/* Shared app shell — the one stylesheet every broker page loads (before its own
   <style>, so page rules can override). Owns the theme tokens, the app bar, the
   nav (rendered by nav.js), the alarm badge, and the toast stack. */

/* theme tokens — dark is the default; nav.js's ☀/☾ toggle stamps
   data-theme="light" on <html> (persisted in localStorage "theme").
   Accent colors (blues/greens/reds/ambers) are shared by both themes. */
:root {
  color-scheme: dark;
  --bg: #0f172a;        /* page background */
  --bg2: #0b1322;       /* deep surfaces: canvas, inputs, wells */
  --panel: #1e293b;     /* cards, header, nodes */
  --panel2: #111c30;    /* asides, tab strip */
  --hover: #273449;     /* hovered controls */
  --hover2: #15233b;    /* hovered rows / used pins */
  --line: #334155;      /* borders */
  --line2: #475569;     /* dim strokes, ticks */
  --ink: #e2e8f0;       /* primary text */
  --ink2: #cbd5e1;      /* secondary text */
  --muted: #94a3b8;     /* labels */
  --dim: #64748b;       /* hints, disabled */
  --overlay: rgba(15,23,42,.86);  /* floating bars (crumbs, minimap) */
  --scrim: rgba(2,6,23,.6);       /* modal backdrop */
}
:root[data-theme="light"] {
  color-scheme: light;
  /* muted engineering gray, not white paper — the canvas (bg2) especially */
  --bg: #cdd4dd;
  --bg2: #dde2e9;
  --panel: #edf0f4;
  --panel2: #c6cfda;
  --hover: #bac5d2;
  --hover2: #c9d3df;
  --line: #9fadbe;
  --line2: #77879c;
  --ink: #111827;
  --ink2: #334155;
  --muted: #43536a;
  --dim: #64748b;
  --overlay: rgba(214,221,229,.92);
  --scrim: rgba(15,23,42,.45);
}
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: var(--bg); color: var(--ink); }

/* app bar */
header { background: var(--panel); padding: 10px 18px; border-bottom: 1px solid var(--line);
         display: flex; gap: 12px; align-items: center; font-weight: 600; flex-wrap: wrap; }
header .ttl { font-size: 16px; white-space: nowrap; }
header select, header button { background: var(--bg); color: var(--ink); border: 1px solid var(--line);
         border-radius: 6px; padding: 5px 9px; font: inherit; font-size: 13px; font-weight: 400; }
header button { cursor: pointer; }
header button:hover { background: var(--hover); }
header button:disabled { opacity: .4; cursor: default; }
header button:disabled:hover { background: var(--bg); }
header button.primary { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
header a { font-size: 13px; font-weight: 400; color: var(--muted); text-decoration: none; white-space: nowrap; }
header a:hover { color: var(--ink); }
header .sp { flex: 1; }
#status { font-size: 13px; font-weight: 400; color: var(--muted); }
.hint { color: var(--dim); font-size: 13px; }

/* nav (injected by nav.js at the end of <header>) */
.appnav { display: flex; align-items: center; gap: 12px; margin-left: 4px; }
.appnav .navlinks { display: flex; align-items: center; gap: 12px; }
.appnav a.cur { color: var(--ink); font-weight: 600; cursor: default; }
.appnav .navbtn { display: none; font-size: 15px; line-height: 1; padding: 4px 9px; }
/* settings gear (nav.js): account actions — change password, log out */
.gearmenu { position: relative; }
.gearmenu > a { font-size: 15px; line-height: 1; }
.geardrop { display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 3000;
  flex-direction: column; align-items: stretch; gap: 2px; min-width: 185px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.gearmenu.open .geardrop { display: flex; }
.geardrop a { padding: 7px 10px; border-radius: 6px; white-space: nowrap; font-size: 13px; }
.geardrop a:hover { background: var(--hover); }

/* narrow screens: links collapse behind the ☰ button */
@media (max-width: 900px) {
  .appnav { position: relative; }
  .appnav .navbtn { display: inline-block; }
  .appnav .navlinks { display: none; position: absolute; right: 0; top: calc(100% + 8px);
    z-index: 3000; flex-direction: column; align-items: stretch; gap: 2px; min-width: 160px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5); }
  .appnav.open .navlinks { display: flex; }
  .appnav .navlinks a { padding: 7px 10px; border-radius: 6px; }
  .appnav .navlinks a:hover { background: var(--hover); }
}

/* alarm badge (nav.js keeps it current; hidden when the site is quiet) */
.alarmbadge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
  border: 1px solid #b45309; color: #fde68a; background: #78350f22; white-space: nowrap; }
.alarmbadge.active { border-color: #b91c1c; color: #fecaca; background: #7f1d1d; }
:root[data-theme="light"] .alarmbadge { color: #92400e; background: #fef3c7; }
:root[data-theme="light"] .alarmbadge.active { color: #991b1b; background: #fee2e2; }
.alarmbadge b { font-variant-numeric: tabular-nums; }
.alarmbadge[hidden] { display: none; }

/* global search (Ctrl+K, from nav.js) */
.cmdk-bg { position: fixed; inset: 0; z-index: 6000; background: var(--scrim);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.cmdk { width: min(560px, 92vw); background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 16px 50px rgba(0,0,0,.5); overflow: hidden; }
.cmdk input { width: 100%; background: var(--bg2); color: var(--ink); border: none;
  border-bottom: 1px solid var(--line); padding: 13px 16px; font: inherit; font-size: 15px; outline: none; }
.cmdk-list { max-height: 46vh; overflow: auto; }
.cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13px;
  cursor: pointer; }
.cmdk-item:hover, .cmdk-item.sel { background: var(--hover); }
.cmdk-item .k { color: #38bdf8; }
.cmdk-item .n { font-weight: 600; white-space: nowrap; }
.cmdk-item .s { color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.cmdk-none { padding: 14px 16px; color: var(--dim); font-size: 13px; }

/* broker password dialog (nav.js pwOpen) — rides the cmdk shell */
.pwdlg { padding: 18px 20px 16px; }
.pwdlg h3 { margin: 0 0 6px; font-size: 15px; }
.pwdlg p { margin: 0 0 12px; color: var(--dim); font-size: 12.5px; line-height: 1.45; }
.pwdlg input { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px;
  font-size: 14px; padding: 10px 12px; }
.pwrow { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.pwrow button { font: inherit; font-size: 13px; padding: 7px 16px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg2); color: var(--ink); cursor: pointer; }
.pwrow button[data-b='save'] { background: #38bdf8; border-color: #38bdf8; color: #082638;
  font-weight: 600; }
.pwrow button:hover { filter: brightness(1.12); }

/* toasts (window.toast from nav.js) */
#toasts { position: fixed; right: 14px; bottom: 14px; z-index: 5000;
  display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 28px)); }
.toast { background: var(--panel); border: 1px solid var(--line); border-left-width: 4px; border-radius: 9px;
  padding: 10px 14px; font-size: 13px; color: var(--ink); box-shadow: 0 8px 28px rgba(0,0,0,.45);
  cursor: pointer; white-space: pre-wrap; overflow-wrap: break-word; }
.toast.ok  { border-left-color: #16a34a; }
.toast.err { border-left-color: #dc2626; }
.toast.info { border-left-color: #3b82f6; }
