/* ---------------------------------------------------------------------------
   Two colour systems live here and they are deliberately separate:

   * UI chrome  -- the navy sidebar, the accent blue on buttons and the active
     nav item. Brand surface, never applied to a data mark.
   * Data marks -- --series-1..8, the validated eight-slot categorical palette
     (worst adjacent CVD ΔE 9.1 light / 8.4 dark). Dark mode re-steps the same
     eight hues for the dark surface rather than inverting them.

   Keeping them apart is what stops "the accent colour" from quietly becoming
   "series 1" in one chart and "a button" in the next.
--------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --nav-bg: #101a2e;
  --nav-bg-soft: #17233c;
  --nav-ink: #cdd6e6;
  --nav-ink-dim: #7c89a3;
  --accent: #1d5fe8;
  --accent-ink: #ffffff;

  --surface-1: #ffffff;
  --plane: #f3f5f9;
  --text-primary: #101828;
  --text-secondary: #52596b;
  --text-muted: #8a93a6;
  --grid: #eef1f6;
  --axis: #d3d9e4;
  --border: #e4e8f0;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --wash: #f6f8fc;

  --good: #0ca30c;
  --good-text: #0f8a3d;
  --warning: #fab219;
  --critical: #d03b3b;

  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --deemph: #b9bfcc;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --nav-bg: #0b1220;
    --nav-bg-soft: #141d31;
    --nav-ink: #c3cbdb;
    --nav-ink-dim: #6f7c96;
    --accent: #3d79f0;
    --surface-1: #171a21;
    --plane: #0d0f14;
    --text-primary: #f4f6fa;
    --text-secondary: #b6bdcc;
    --text-muted: #868e9f;
    --grid: #242832;
    --axis: #333947;
    --border: #262b36;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5);
    --wash: #1c2029;
    --good-text: #35c05f;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --deemph: #4b5262;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --nav-bg: #0b1220;
  --nav-bg-soft: #141d31;
  --nav-ink: #c3cbdb;
  --nav-ink-dim: #6f7c96;
  --accent: #3d79f0;
  --surface-1: #171a21;
  --plane: #0d0f14;
  --text-primary: #f4f6fa;
  --text-secondary: #b6bdcc;
  --text-muted: #868e9f;
  --grid: #242832;
  --axis: #333947;
  --border: #262b36;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5);
  --wash: #1c2029;
  --good-text: #35c05f;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --deemph: #4b5262;
}

* { box-sizing: border-box; }
/* The UA's [hidden] rule sits at author-origin-zero, so any display: we set
   silently outranks it and "hidden" elements stay on screen. Restore the
   attribute's meaning once, globally. */
[hidden] { display: none !important; }
html { background: var(--plane); }
html, body { margin: 0; }
body {
  background: var(--plane);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
input, select, button, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- layout --------------------------------------------------------------- */
.layout { display: grid; grid-template-columns: 226px minmax(0, 1fr); min-height: 100vh; }

.sidenav {
  background: var(--nav-bg); color: var(--nav-ink);
  display: flex; flex-direction: column; gap: 6px; padding: 20px 14px;
  position: sticky; top: 0; height: 100vh;
}
.sidenav .logo { display: flex; align-items: center; gap: 10px; padding: 0 6px 18px; }
.sidenav .logo .mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--accent);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; flex: none;
}
.sidenav .logo b { display: block; color: #fff; font-size: 14px; font-weight: 750; line-height: 1.25; }
.sidenav nav { display: flex; flex-direction: column; gap: 3px; }
.navlink {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; color: var(--nav-ink); cursor: pointer;
  padding: 9px 12px; border-radius: 8px; text-align: left; font-size: 13.5px; font-weight: 560;
}
.navlink:hover { background: var(--nav-bg-soft); }
.navlink[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 640; }
.navlink .glyph { width: 16px; text-align: center; flex: none; opacity: .9; }
.sidenav .spacer { flex: 1 1 auto; }
.whoami {
  display: flex; align-items: center; gap: 10px; padding: 14px 6px 0;
  border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 8px;
}
.whoami .avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none;
}
.whoami .id { min-width: 0; }
.whoami b { display: block; color: #fff; font-size: 12.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whoami span { display: block; color: var(--nav-ink-dim); font-size: 11px; }

.content { padding: 26px clamp(16px, 2.4vw, 34px) 60px; min-width: 0; }

/* --- page header ---------------------------------------------------------- */
.pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.pagehead h1 { font-size: 27px; font-weight: 720; margin: 0; letter-spacing: -.02em; }
.pagehead p { margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; }
.headtools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.period-chip {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 560; color: var(--text-secondary);
}

/* --- controls ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--surface-1); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 580; min-height: 36px;
}
.btn:hover { background: var(--wash); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: none; border-color: transparent; color: var(--text-secondary); }
.btn.ghost:hover { background: var(--wash); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn[aria-pressed="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-1); }

select, input[type="month"], input[type="text"], input[type="search"], input[type="password"] {
  width: 100%; background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; min-height: 38px;
}

.filtercard {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 18px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px 16px; align-items: end;
}
.filtercard .field { min-width: 0; }
.filtercard .field > label, .filtercard .field > span {
  display: block; font-size: 12px; font-weight: 620; color: var(--text-secondary); margin-bottom: 6px;
}
.chipset { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  cursor: pointer; border: 1px solid var(--border); background: var(--surface-1);
  color: var(--text-secondary); border-radius: 7px; padding: 7px 12px;
  font-size: 12.5px; font-weight: 580; min-height: 36px;
}
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Compact multi-select. A native <select multiple> tall enough to be usable
   triples the height of the filter row, so the list opens in a panel instead. */
.picker { position: relative; }
.picker > summary {
  list-style: none; cursor: pointer; user-select: none;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary);
  border-radius: 8px; padding: 8px 11px; min-height: 38px;
  display: flex; align-items: center; gap: 8px; font-size: 13px;
}
.picker > summary::-webkit-details-marker { display: none; }
.picker > summary::after { content: "▾"; margin-left: auto; color: var(--text-muted); font-size: 11px; }
.picker[open] > summary { border-color: var(--accent); }
.picker-panel {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 310px; max-width: 84vw;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .14); padding: 10px;
}
.picker-list { max-height: 250px; overflow-y: auto; margin-top: 8px; }
.picker-list label {
  display: flex; align-items: center; gap: 9px; padding: 6px 5px; border-radius: 6px;
  font-size: 13px; cursor: pointer; min-height: 30px;
}
.picker-list label:hover { background: var(--wash); }
.picker-list input { accent-color: var(--accent); }
.picker-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--grid); }
.picker-actions .count { font-size: 12px; color: var(--text-muted); align-self: center; }

/* --- cards ---------------------------------------------------------------- */
.card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 16px 18px 18px; min-width: 0;
}
/* Descendant, not child: some cards wrap their heading inside .card-head, and
   a child-only rule silently left those titles at the UA's h2 size. */
.card h2 { font-size: 14px; font-weight: 680; margin: 0 0 2px; }
.card .sub { margin: 0 0 6px; font-size: 12px; color: var(--text-muted); max-width: 62ch; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.card-head .card-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 14px; margin-bottom: 14px; }
.grid.g2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.grid.g3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* --- KPI tiles ------------------------------------------------------------ */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 15px 17px 16px;
}
.kpi .top { display: flex; align-items: center; gap: 11px; }
.kpi .badge {
  width: 34px; height: 34px; border-radius: 50%; flex: none; color: #fff;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 750; letter-spacing: .01em;
}
.kpi .name { font-size: 13px; font-weight: 640; color: var(--text-primary); }
.kpi .value { font-size: 25px; font-weight: 720; letter-spacing: -.022em; margin-top: 12px; }
.kpi.hero .value { font-size: 34px; }
.kpi .delta { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.kpi .delta b { font-weight: 660; }
.kpi .delta.up b { color: var(--good-text); }
.kpi .delta.down b { color: var(--critical); }
.kpi .spark { display: block; margin-top: 10px; }

/* --- charts --------------------------------------------------------------- */
.chart-wrap { position: relative; margin-top: 10px; }
.chart-wrap.loading { opacity: .45; }
.chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.grid-line { stroke: var(--grid); stroke-width: 1; }
.axis-line { stroke: var(--axis); stroke-width: 1; }
.tick { fill: var(--text-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.mark-label { fill: var(--text-secondary); font-size: 10.5px; font-weight: 580; }
.crosshair { stroke: var(--axis); stroke-width: 1; pointer-events: none; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; margin-top: 8px; }
.legend button {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  color: var(--text-secondary); background: none; border: 0; cursor: pointer; padding: 2px; min-height: 22px;
}
.legend button[aria-pressed="false"] { opacity: .38; }
.legend .key-line { width: 13px; height: 2px; border-radius: 1px; }
.legend .key-rect { width: 10px; height: 10px; border-radius: 2px; }
.tooltip {
  position: absolute; pointer-events: none; z-index: 8; min-width: 160px; max-width: 290px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 9px;
  box-shadow: 0 10px 26px rgba(16, 24, 40, .16); padding: 9px 11px; font-size: 12px;
}
.tooltip .tt-head { font-size: 11px; color: var(--text-muted); font-weight: 660; margin-bottom: 6px; }
.tooltip .tt-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.tooltip .tt-key { width: 11px; height: 2px; border-radius: 1px; flex: none; }
.tooltip .tt-key.rect { width: 9px; height: 9px; border-radius: 2px; }
.tooltip .tt-name { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tooltip .tt-value { font-weight: 660; font-variant-numeric: tabular-nums; margin-left: auto; }
.tooltip .tt-total { display: flex; gap: 8px; margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--grid); font-weight: 660; }
.tooltip .tt-total span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; }

/* --- tables --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin-top: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 13px; border-bottom: 1px solid var(--grid); font-size: 12.5px; white-space: nowrap; }
th {
  font-size: 11.5px; font-weight: 660; color: var(--text-secondary);
  background: var(--surface-1); position: sticky; top: 0; z-index: 1;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text-primary); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--wash); }
td.pos { color: var(--good-text); font-weight: 620; }
td.neg { color: var(--critical); font-weight: 620; }
.avatar-sq {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  color: #fff; font-size: 11px; font-weight: 720; margin-right: 9px; vertical-align: middle;
}
.pill { display: inline-block; font-size: 11px; font-weight: 640; padding: 3px 9px; border-radius: 6px; }
.pill.npd { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.pill.existing { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good-text); }
.pill.muted { background: var(--wash); color: var(--text-muted); }
.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }

/* --- messages ------------------------------------------------------------- */
.banner { border-radius: 10px; padding: 16px 18px; margin: 16px 0; border: 1px solid var(--border); background: var(--surface-1); font-size: 13px; }
.banner h3 { margin: 0 0 6px; font-size: 15px; }
.banner.error { border-left: 3px solid var(--critical); }
.banner.info { border-left: 3px solid var(--accent); }
.banner ol, .banner ul { margin: 10px 0 0; padding-left: 20px; }
.banner li { margin: 4px 0; }
.empty { padding: 34px 10px; text-align: center; color: var(--text-muted); font-size: 13px; }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 22px; z-index: 60;
  background: var(--text-primary); color: var(--plane); padding: 11px 18px; border-radius: 9px;
  font-size: 13px; font-weight: 560; box-shadow: 0 10px 30px rgba(16, 24, 40, .3); max-width: min(560px, 92vw);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- config editor -------------------------------------------------------- */
.cfg-row select, .cfg-row input { min-height: 32px; font-size: 12.5px; padding: 5px 8px; }
.cfg-row input[type="month"] { width: 142px; }
.cfg-row input[type="text"] { width: 180px; }
tr.dirty td { background: color-mix(in srgb, var(--warning) 14%, transparent); }
.savebar {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface-1); border-top: 1px solid var(--border); padding: 12px 2px 2px; margin-top: 6px;
}
.savebar .count { font-size: 13px; color: var(--text-secondary); margin-right: auto; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .sidenav { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; }
  .sidenav nav { flex-direction: row; flex-wrap: wrap; }
  /* The nav links are width:100% so they fill the vertical rail; once the rail
     turns into a horizontal bar they have to shrink to their content again. */
  .navlink { width: auto; }
  .sidenav .spacer { display: none; }
  .whoami { border-top: 0; margin: 0; padding: 0; }
  .kpi.hero .value { font-size: 28px; }
}

/* --- login screen ----------------------------------------------------------- */
.loginscreen {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--plane); padding: 24px;
}
.logincard {
  width: min(400px, 100%); background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 12px 40px rgba(16, 24, 40, .12); padding: 30px 28px 26px;
}
.logincard .mark {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 17px;
}
.logincard h1 { font-size: 20px; font-weight: 700; margin: 16px 0 4px; letter-spacing: -.015em; }
.logincard .sub { font-size: 13px; color: var(--text-secondary); margin: 0 0 22px; }
.logincard label { display: block; font-size: 12.5px; font-weight: 620; margin-bottom: 6px; }
.logincard label .opt { font-weight: 500; color: var(--text-muted); }
.logincard input { margin-bottom: 16px; }
.logincard .btn { width: 100%; justify-content: center; min-height: 42px; font-size: 14px; }
.loginerror {
  margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 560;
  background: color-mix(in srgb, var(--critical) 12%, transparent); color: var(--critical);
}
.loginerror.setup { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 500; }
.loginerror code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }

.whoami .logout {
  margin-left: auto; background: none; border: 0; color: var(--nav-ink-dim); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 6px; border-radius: 7px; flex: none;
}
.whoami .logout:hover { background: var(--nav-bg-soft); color: #fff; }