/* NorthStar Data Disseminator — "Harbor Teal" design system.
   Tokens + reusable component classes. Light is default; body.dark overrides. */

:root {
  --bg:#f6f8f8; --surface:#ffffff; --surface2:#f4f7f7; --border:#e3e9ea; --border2:#eef2f2;
  --text:#22313a; --muted:#5b6b70; --primary:#0f766e; --primary-contrast:#ffffff; --brand:#134e4a;
  --chipbg:#d7e5e3; --ok:#2e9e5b; --oktext:#166c3f; --bad:#c2453b; --badtext:#a63a32;
  --badbg:#fcf1f0; --badborder:#f0c8c4; --warn:#d9a026; --warnbg:#fdf7e7; --warntext:#6d5716;
  --warnborder:#e8d193; --idle:#e8ecec; --track:#d9e6e4; --shadow:0 1px 3px rgba(19,44,48,.07);
  --btnborder:#d5dedf; --headerbg:#5a6f6c; --header-fg:#f2f6f5; --header-muted:#b9cac6;
  --header-active:#8fd8cf; --header-btnborder:rgba(255,255,255,.28); --codebg:#f0f4f4;
}
body.dark {
  --bg:#0f1517; --surface:#161e21; --surface2:#1b2529; --border:#243035; --border2:#202b2f;
  --text:#dbe5e6; --muted:#8fa1a5; --primary:#2fb3a6; --primary-contrast:#06211f; --brand:#7fd4cb;
  --chipbg:#1e3d3a; --ok:#3dbb6e; --oktext:#5ecf8d; --bad:#d95c51; --badtext:#e58880;
  --badbg:#2a1a18; --badborder:#4a2724; --warn:#d9a026; --warnbg:#2a2210; --warntext:#e3c26a;
  --warnborder:#4d3f14; --idle:#243035; --track:#1f3634; --shadow:0 1px 3px rgba(0,0,0,.35);
  --btnborder:#2c393e; --headerbg:#121a1d; --header-fg:#dbe5e6; --header-muted:#8fa1a5;
  --header-active:#2fb3a6; --header-btnborder:#2c393e; --codebg:#101b1e;
}

/* ===== Base ===== */
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; font-family:system-ui,'Segoe UI',sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--brand); text-decoration:underline; }
h1,h2,h3 { margin:0; }
input:not([type=checkbox]):not([type=radio]),select,textarea {
  font-family:inherit; font-size:13px; color:var(--text); background:var(--surface);
  border:1px solid var(--btnborder); border-radius:8px; padding:7px 10px;
}
input[type=checkbox],input[type=radio] { width:auto; margin:0; accent-color:var(--primary); }
textarea { resize:vertical; }
button { white-space:nowrap; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:2px solid var(--primary); outline-offset:1px;
}
code { font-family:ui-monospace,'Cascadia Mono',Menlo,monospace; font-size:.92em; background:var(--codebg); padding:1px 5px; border-radius:4px; }
.mono { font-family:ui-monospace,'Cascadia Mono',Menlo,monospace; font-size:12px; }
.muted { color:var(--muted); }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.nowrap { white-space:nowrap; }

@keyframes kitt { 0%{top:-9px} 50%{top:calc(100% - 17px)} 100%{top:-9px} }
@keyframes kittDown { 0%{opacity:0} 12%{opacity:1} 42%{opacity:1} 58%{opacity:0} 100%{opacity:0} }
@keyframes kittUp { 0%{opacity:0} 42%{opacity:0} 58%{opacity:1} 92%{opacity:1} 100%{opacity:0} }

/* ===== App shell ===== */
.app { min-height:100vh; display:flex; flex-direction:column; }
.app-header {
  display:flex; align-items:center; gap:26px; padding:0 28px; height:58px;
  background:var(--headerbg); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5;
}
.sys-banner {
  background:var(--warnbg); color:var(--warntext); border-bottom:1px solid var(--warnborder);
  padding:9px 28px; font-size:13px; font-weight:600; text-align:center;
  position:sticky; top:0; z-index:6;
}
.app-brand { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.app-brand img { height:30px; display:block; }
.app-brand__sub { font-weight:400; font-size:15px; color:var(--header-muted); }
.app-nav { display:flex; gap:22px; font-size:13.5px; font-weight:500; height:100%; align-items:stretch; }
.app-nav a { display:flex; align-items:center; color:var(--header-muted); text-decoration:none; border-bottom:2px solid transparent; }
.app-nav a:hover { color:var(--header-active); text-decoration:none; }
.app-nav a.active { color:var(--header-active); border-bottom-color:var(--header-active); }
.app-actions { margin-left:auto; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--header-muted); }
.icon-btn {
  font:inherit; font-size:14px; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:1px solid var(--header-btnborder); border-radius:8px;
  background:transparent; color:var(--header-fg); cursor:pointer;
}
.icon-btn:hover { border-color:var(--header-active); }
.avatar { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.16); color:var(--header-fg); font-weight:600; font-size:11.5px; }
.avatar-btn { display:inline-flex; align-items:center; padding:0; background:transparent; border:none; cursor:pointer; }
.app-header .logout { font:inherit; font-size:13px; padding:5px 12px; border:1px solid var(--header-btnborder); border-radius:8px; background:transparent; color:var(--header-fg); cursor:pointer; }
.app-header .logout:hover { border-color:var(--header-active); }
.app-main { flex:1; width:100%; max-width:1180px; margin:0 auto; padding:28px 32px 48px; display:flex; flex-direction:column; gap:22px; }

/* ===== Type / page head ===== */
.page-title { font-size:23px; font-weight:650; letter-spacing:-0.015em; }
.page-head { display:flex; justify-content:space-between; align-items:center; }
.stack { display:flex; flex-direction:column; gap:22px; }
.stack-sm { display:flex; flex-direction:column; gap:14px; }
/* Ensure the HTML hidden attribute wins over display:flex layout classes (e.g. .stack-sm). */
[hidden] { display:none !important; }
.row { display:flex; gap:10px; align-items:center; }
.row-14 { display:flex; gap:14px; }

/* ===== Buttons ===== */
.btn { font:inherit; font-size:13px; font-weight:500; padding:8px 15px; border:1px solid var(--btnborder); border-radius:9px; background:var(--surface); color:var(--text); cursor:pointer; }
.btn:hover { border-color:var(--primary); }
.btn--primary { border:none; font-weight:600; background:var(--primary); color:var(--primary-contrast); }
.btn--primary:hover { filter:brightness(1.1); border:none; }
.btn--danger { border-color:var(--badborder); color:var(--badtext); }
.btn--danger:hover { border-color:var(--badtext); }
.btn--sm { font-size:12px; padding:5px 11px; border-radius:8px; }
.btn--dashed { font-size:12.5px; padding:6px 12px; border:1px dashed var(--btnborder); border-radius:8px; background:var(--surface); color:var(--primary); cursor:pointer; }
.btn--dashed:hover { border-color:var(--primary); }
.btn--icon { font-size:14px; width:30px; height:28px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.btn:disabled { opacity:.45; cursor:default; border-color:var(--btnborder); filter:none; }

/* ===== Pager ===== */
.pager { display:flex; gap:14px; align-items:center; justify-content:flex-end; padding:10px 24px; border-top:1px solid var(--border2); font-size:12px; color:var(--muted); }

/* ===== Row highlight (deep-linked run) ===== */
.row-highlight td { background:color-mix(in srgb, var(--primary) 10%, transparent); }
@keyframes rowflash { 0% { background:color-mix(in srgb, var(--primary) 26%, transparent); } 100% { background:color-mix(in srgb, var(--primary) 10%, transparent); } }
.row-highlight td { animation:rowflash 1.4s ease-out 1; }

/* ===== Cards ===== */
.card { background:var(--surface); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.card--pad { padding:22px 26px; }
/* Cards that host an overlay (e.g. the time-zone dropdown) must not clip it. */
.card--overflow { overflow:visible; }
.card__head { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:2px solid var(--brand); }
.card__title { font-size:15px; font-weight:650; }
.card__sub { font-size:12px; color:var(--muted); }

/* ===== KPI tiles ===== */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kpi { background:var(--surface); border-radius:12px; box-shadow:var(--shadow); padding:20px 22px; }
.kpi__label { font-size:12.5px; color:var(--muted); font-weight:500; }
.kpi__value { margin-top:8px; font-size:32px; font-weight:700; line-height:1; }
.kpi__foot { margin-top:10px; font-size:11.5px; color:var(--muted); font-weight:400; }
.kpi--bad { border-top:3px solid var(--bad); padding:18px 22px 20px; }
.kpi--bad .kpi__foot { color:var(--badtext); }
.kpi--bad .kpi__label { color:var(--badtext); font-weight:600; }
.kpi--bad .kpi__value { color:var(--badtext); }

/* ===== Tables ===== */
.table { width:100%; border-collapse:collapse; font-size:13.5px; }
.table thead th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; padding:12px 12px; }
.table thead th:first-child { padding-left:24px; }
.table tbody td { padding:12px 12px; }
.table tbody td:first-child { padding-left:24px; }
.table tbody tr { border-top:1px solid var(--border2); }
.table .actions { text-align:right; white-space:nowrap; padding-right:24px; }
.table .actions > .row { justify-content:flex-end; gap:6px; }
.tr-muted { color:var(--muted); }
.tr-muted td { color:var(--muted); }
/* A step's detail sits on its own indented row directly under the step (no divider above it). */
.table tbody tr.step-detail { border-top:none; }

/* ===== Status: left edge + text ===== */
.edge { position:absolute; left:0; top:-1px; bottom:0; width:4px; }
.edge--ok { background:var(--ok); } .edge--bad { background:var(--bad); }
.edge--warn { background:var(--warn); } .edge--idle { background:var(--idle); }
.edge--run { background:var(--track); overflow:hidden; }
.edge--run .scan { position:absolute; left:0; width:4px; height:26px; animation:kitt 3.2s ease-in-out infinite; }
.scan__dot { position:absolute; left:0; top:9px; width:4px; height:8px; border-radius:2px; background:var(--primary); }
.scan__down { position:absolute; left:0; top:0; width:4px; height:14px; border-radius:2px; background:linear-gradient(to top,var(--primary) 0%,transparent 100%); animation:kittDown 3.2s linear infinite; }
.scan__up { position:absolute; left:0; bottom:0; width:4px; height:14px; border-radius:2px; background:linear-gradient(to bottom,var(--primary) 0%,transparent 100%); animation:kittUp 3.2s linear infinite; }
.cell-edge { position:relative; }
.status { font-weight:600; font-size:12.5px; }
.status--ok { color:var(--oktext); } .status--bad { color:var(--badtext); }
.status--warn { color:var(--warntext); } .status--run { color:var(--primary); } .status--muted { color:var(--muted); }

/* ===== Callouts / messages ===== */
.callout { border:1px solid var(--border); border-radius:9px; padding:9px 14px; font-size:13px; }
.callout--warn { border-color:var(--warnborder); border-left:3px solid var(--warn); background:var(--warnbg); color:var(--warntext); }
.callout--bad { border-color:var(--badborder); background:var(--badbg); color:var(--badtext); }
.callout--ok { background:var(--surface); color:var(--oktext); }
.text-bad { color:var(--badtext); }
.text-ok { color:var(--oktext); }

/* ===== Status legend ===== */
.legend { display:flex; gap:18px; align-items:center; padding:10px 24px; border-top:1px solid var(--border2); font-size:11.5px; color:var(--muted); }
.legend span.item { display:inline-flex; align-items:center; gap:6px; }
.legend .sw { width:4px; height:14px; border-radius:2px; }

/* ===== Forms ===== */
.section-title { font-size:14px; font-weight:650; color:var(--brand); border-bottom:1px solid var(--border2); padding-bottom:8px; }
.field { display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:500; }
.field > input, .field > select, .field > textarea { width:100%; }
.field__hint { font-size:12px; font-weight:400; color:var(--muted); }
.check { display:flex; gap:8px; align-items:center; font-size:13px; font-weight:400; }
.check input { width:auto; }
.subpanel { margin-left:24px; display:flex; flex-direction:column; gap:12px; border-left:2px solid var(--border2); padding-left:16px; }
.subbox { border:1px solid var(--border2); border-radius:9px; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.subbox__title { font-size:12.5px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.param-card { border:1px solid var(--border2); border-radius:9px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }

/* ===== Row action menu ===== */
.menu-wrap { position:relative; display:inline-flex; }
.menu { position:absolute; right:0; top:32px; z-index:10; display:flex; flex-direction:column; min-width:130px; background:var(--surface); border:1px solid var(--border); border-radius:9px; box-shadow:0 6px 20px rgba(0,0,0,.16); overflow:hidden; padding:4px; }
.menu button { font:inherit; font-size:12.5px; text-align:left; padding:7px 12px; border:none; border-radius:6px; background:none; color:var(--text); cursor:pointer; }
.menu button:hover { background:var(--surface2); }
.menu button.danger { color:var(--badtext); }
.menu button.danger:hover { background:var(--badbg); }
/* Account (avatar) dropdown — wider, with normal cursor over its content. */
.menu--account { top:40px; min-width:300px; max-width:420px; padding:14px 16px; color:var(--text); cursor:default; }

/* Multi-select checklist dropdown (select-styled trigger + floating checkbox panel). */
.ms { position:relative; width:100%; }
.ms-btn { display:flex; align-items:center; gap:8px; width:100%; font:inherit; font-size:13px; font-weight:400;
  text-align:left; color:var(--text); background:var(--surface); border:1px solid var(--btnborder); border-radius:8px; padding:7px 10px; cursor:pointer; }
.ms-btn:hover { border-color:var(--primary); }
.ms-summary { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-caret { color:var(--muted); font-size:11px; }
.ms-backdrop { position:fixed; inset:0; z-index:19; }
.ms-panel { position:absolute; z-index:20; top:calc(100% + 4px); left:0; min-width:100%; max-height:280px; overflow:auto;
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:9px; box-shadow:0 6px 20px rgba(0,0,0,.16); padding:4px; }
.ms-item { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:6px; font-size:12.5px; font-weight:400; white-space:nowrap; cursor:pointer; }
.ms-item:hover { background:var(--surface2); }

/* ===== Help disclosure ===== */
.help summary { cursor:pointer; color:var(--primary); font-size:13px; font-weight:500; }
.help__body { border:1px solid var(--border2); border-left:3px solid var(--primary); border-radius:0 8px 8px 0; padding:12px 16px; margin-top:8px; font-size:12.5px; color:var(--muted); display:flex; flex-direction:column; gap:8px; }
.help__body p { margin:0; }
.help__body ul { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:3px; }
.help__note { border-top:1px solid var(--border2); padding-top:8px; color:var(--warntext); }

/* ===== Sticky save bar ===== */
.save-bar { display:flex; gap:10px; position:sticky; bottom:0; background:var(--bg); padding:14px 0; border-top:1px solid var(--border); }

/* ===== Empty / loading ===== */
.empty, .loading { color:var(--muted); font-size:13.5px; }
.empty em { font-style:italic; }

/* ===== Time zone picker (combobox) ===== */
.tzpicker { position:relative; }
.tzpicker__input { width:100%; }
.tzpicker__menu {
  position:absolute; z-index:40; left:0; right:0; top:100%;
  margin:3px 0 0; padding:4px; list-style:none;
  max-height:240px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.tzpicker__item { padding:6px 9px; border-radius:6px; cursor:pointer; font-size:13.5px; color:var(--text); }
.tzpicker__item:hover { background:var(--surface2); }
.tzpicker__item.is-selected { background:var(--chipbg); }
.tzpicker__empty { padding:6px 9px; color:var(--muted); font-size:13.5px; }

/* ===== Responsive (tablet / mobile) ===== */
/* The hamburger only appears once the nav folds (see media query). */
.hamburger { display:none; }

@media (max-width:820px) {
  .app-header { gap:12px; padding:0 14px; }
  .hamburger { display:inline-flex; }

  /* Nav folds into a dropdown panel beneath the header. */
  .app-nav {
    position:absolute; top:58px; left:0; right:0; z-index:6;
    flex-direction:column; align-items:stretch; gap:0; height:auto;
    background:var(--headerbg); border-bottom:1px solid var(--border);
    padding:6px 0; display:none; box-shadow:0 10px 24px rgba(0,0,0,.28);
  }
  .app-nav.app-nav--open { display:flex; }
  .app-nav a { padding:12px 20px; border-bottom:none; }
  .app-nav a.active { border-bottom:none; box-shadow:inset 3px 0 0 var(--header-active); }
  .nav-backdrop { position:fixed; inset:0; z-index:4; }

  .app-actions { gap:8px; }

  /* The avatar menu matches the nav dropdown: full-width, docked under the header, green. */
  .menu--account {
    position:fixed; top:58px; left:0; right:0; min-width:0; max-width:none;
    border:none; border-bottom:1px solid var(--border); border-radius:0;
    background:var(--headerbg); color:var(--header-fg);
    box-shadow:0 10px 24px rgba(0,0,0,.28); padding:16px 20px;
    max-height:calc(100vh - 58px); overflow:auto;
  }
  .menu--account .muted { color:var(--header-muted); }
  /* Buttons in the green menu read like the header's own buttons (light on the dark bar). */
  .menu--account .btn { background:transparent; color:var(--header-fg); border-color:var(--header-btnborder); }
  .menu--account .btn:hover { border-color:var(--header-active); }

  .app-main { padding:16px 14px 40px; gap:16px; }
  .page-title { font-size:20px; }
  .page-head { flex-direction:column; align-items:stretch; gap:12px; }
  .page-head > .row { flex-wrap:wrap; }

  .kpi-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
  .kpi { padding:16px 16px; }
  .kpi__value { font-size:26px; }

  .card--pad { padding:16px 16px; }

  /* Filter rows stack — each field takes a full row (overrides inline widths). */
  .row-14 { flex-wrap:wrap; }
  .row-14 > .field { flex:1 1 100% !important; width:100% !important; min-width:0 !important; }

  /* Wide tables scroll horizontally within their card; secondary columns collapse away. */
  .card { overflow-x:auto; }
  .table thead th, .table tbody td { padding:10px 8px; }
  .table thead th:first-child, .table tbody td:first-child { padding-left:14px; }
  .hide-sm { display:none !important; }

  /* Run-detail steps: with the Status column hidden, colour the step name by its status instead. */
  .stepc--ok { color:var(--oktext); }
  .stepc--bad { color:var(--badtext); }
  .stepc--warn { color:var(--warntext); }
  .stepc--run { color:var(--primary); }
  .stepc--muted { color:var(--muted); }

  .save-bar { flex-wrap:wrap; }
}

@media (max-width:560px) {
  .app-brand__sub { display:none; }
}