/* my-finances dashboard — dark theme.
 *
 * Colors come from the dataviz reference palette (dark column), validated as a set
 * against --surface-1 below. The categorical slots are exposed as --series-1..16 so
 * the one bridge from CSS to ECharts is getComputedStyle() — theme lives here, never
 * in JS. Text always wears text tokens; only marks wear series color.
 */

:root {
  color-scheme: dark;

  /* Surfaces */
  --plane: #0d0e12;          /* page background */
  --surface-1: #16181f;      /* cards / chart surface (≈ validator surface) */
  --surface-2: #1c1f28;      /* insets, hover wash */
  --surface-3: #232733;      /* active / raised */

  /* Ink */
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;

  /* Chrome */
  --grid: #2c2c2a;
  --axis: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Deltas / status (legible small-text steps on the dark surface) */
  --pos: #3ddc84;
  --neg: #ff6b6b;
  --warn: #fab219;

  /* Categorical series — fixed order IS the CVD-safety mechanism; never reorder.
   * Slots 1–8 are the reference palette's dark column in its documented order.
   * Slots 9–16 are the SAME eight hues at a lighter step: with 17 accounts to draw,
   * hue alone cannot carry identity, so hue names the family and lightness the tier
   * (composite encoding). That is legal only because every series is also named — in
   * the legend, in every tooltip row, and in both tables. Measured with the dataviz
   * validator against --surface-1: chroma floor, normal-vision ΔE (worst adjacent
   * 17.9 vs floor 15) and contrast (light tier 7.2–9.5:1) all pass; worst adjacent
   * CVD ΔE is 7.1, inside the 6–8 band that mandates that secondary encoding. The
   * light steps sit above the dark lightness band on purpose — brighter on a dark
   * surface means more contrast, not less. */
  --series-1: #3987e5;  /* blue */
  --series-2: #d95926;  /* orange */
  --series-3: #199e70;  /* aqua */
  --series-4: #c98500;  /* yellow */
  --series-5: #d55181;  /* magenta */
  --series-6: #008300;  /* green */
  --series-7: #9085e9;  /* violet */
  --series-8: #e66767;  /* red */
  --series-9: #65a8fd;   /* blue    light */
  --series-10: #fe8e67;  /* orange  light */
  --series-11: #4cd39d;  /* aqua    light */
  --series-12: #f3a525;  /* yellow  light */
  --series-13: #fe8aaf;  /* magenta light */
  --series-14: #5fd658;  /* green   light */
  --series-15: #aba4fe;  /* violet  light */
  --series-16: #fe8885;  /* red     light */

  --radius: 14px;
  --radius-sm: 9px;
  --gap: 16px;
  --maxw: 1180px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--plane);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--series-1); text-decoration: none; }
a:hover { text-decoration: underline; }

.tnum { font-variant-numeric: tabular-nums; }

/* ── Header ─────────────────────────────────────────────────────────── */
.hdr {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px clamp(14px, 4vw, 28px);
  background: rgba(13, 14, 18, 0.82);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.hdr__brand {
  font-weight: 650;
  letter-spacing: -0.01em;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.hdr__dot {
  /* Aqua specifically — the halo below is the same hue at low alpha. */
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--series-3);
  box-shadow: 0 0 0 4px rgba(25, 158, 112, 0.16);
}
.hdr__spacer { flex: 1; }
.hdr__sync {
  font-size: 12.5px;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.hdr__sync .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); }
.hdr__sync.is-stale .pip { background: var(--warn); }
.hdr__sync.is-error .pip { background: var(--neg); }
.btn-logout {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.btn-logout:hover { background: var(--surface-3); color: var(--text-primary); }

/* ── Page shell ─────────────────────────────────────────────────────── */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 26px) clamp(14px, 4vw, 28px) 60px;
}

.section-gap { height: var(--gap); }

/* ── Hero + period matrix ───────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(0, 1.9fr);
  gap: var(--gap);
}
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.card--hero { display: flex; flex-direction: column; justify-content: center; }

/* Change and income for every window in one card: rows are the metric, columns the
   period, so the eye compares along a row instead of across six separate tiles. */
.pgrid {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  align-items: baseline;
  column-gap: 14px;
  row-gap: 2px;
}
.pgrid__head { text-align: right; }
.pgrid__key { padding-right: 4px; white-space: nowrap; }
.pgrid__val {
  text-align: right;
  font-size: 20px; font-weight: 680; letter-spacing: -0.02em;
  white-space: nowrap;
  margin-top: 4px;
}
.pgrid__sub { text-align: right; font-size: 12px; color: var(--text-muted); }
.pgrid__spark { grid-column: 2 / -1; }
.pgrid__gap { grid-column: 1 / -1; height: 10px; }
.stat__label {
  font-size: 12.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.stat__value {
  margin-top: 6px;
  font-size: 23px;
  font-weight: 680;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.card--hero .stat__value { font-size: clamp(34px, 6vw, 46px); }
.spark { margin-top: 12px; height: 34px; width: 100%; display: block; }

/* ── Period switcher / segmented controls ───────────────────────────── */
.controls-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.seg {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  appearance: none; border: 0; background: transparent;
  color: var(--text-secondary);
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  transition: background .12s, color .12s;
}
.seg button:hover { color: var(--text-primary); }
.seg button[aria-pressed="true"] {
  background: var(--series-1);
  color: #fff;
}
.seg--sub button[aria-pressed="true"] { background: var(--surface-3); color: var(--text-primary); }

/* ── Chart cards ────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }

.panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  min-width: 0;               /* let grid children shrink so ECharts can resize */
  display: flex;
  flex-direction: column;     /* so a chart can claim the row's leftover height */
}
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 6px; flex-wrap: wrap;
}
.panel__title { font-size: 15px; font-weight: 640; letter-spacing: -0.01em; }
.panel__sub { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; }
.chart { width: 100%; height: 300px; }
/* Grid rows stretch, and the breakdown beside it is as tall as the account list.
   Rather than leave a void under the net worth, let it take the slack — a 17-band
   stack is easier to read the more height it gets. */
.chart--tall { height: 320px; flex: 1 1 auto; }
.chart--cal { height: 190px; }
.chart--donut { height: 240px; }

.note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}
.note--warn { color: var(--warn); }

/* ── Tables ─────────────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tbl th, .tbl td {
  padding: 9px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border);
}
.tbl th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: sticky; top: 0;
  background: var(--surface-1);
  z-index: 1;
}
.tbl th:first-child, .tbl td:first-child {
  text-align: left;
  position: sticky; left: 0;
  background: var(--surface-1);
  z-index: 2;
}
.tbl th:first-child { z-index: 3; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl tbody tr:hover td:first-child { background: var(--surface-2); }
.tbl tfoot td {
  font-weight: 680;
  border-top: 1px solid var(--border-strong);
  border-bottom: 0;
}
/* Closed accounts sit under the live ones: present, readable, and plainly not part
   of the figures above. The rule above the first of them is the divider. */
.row--archived td { color: var(--text-secondary); }
.tbl tbody tr:not(.row--archived) + .row--archived td { border-top: 1px solid var(--border-strong); }
.cell-native { color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted { color: var(--text-muted); }
.dash { color: var(--text-muted); }

.badge {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  text-transform: capitalize;
}
/* Blue and aqua by hue, not by slot — the border beside each is the same hue at low
   alpha, so these two must not follow a palette re-order. */
.badge--invest { color: var(--series-1); border-color: rgba(57, 135, 229, 0.4); }
.badge--cash { color: var(--series-3); border-color: rgba(25, 158, 112, 0.4); }

.swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 7px; vertical-align: baseline;
}

.empty {
  padding: 40px 18px; text-align: center; color: var(--text-muted); font-size: 14px;
}

/* Key-value list under the donut — every account or currency, none hidden, but
   capped so one long roster can't set the height of the whole chart row. */
.kv-list {
  margin-top: 12px;
  display: flex; flex-direction: column;
  max-height: 300px;
  overflow-y: auto;
}
.kv-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline; gap: 10px;
  padding: 5px 2px; font-size: 12.5px;
  border-bottom: 1px solid var(--border);
}
.kv-row:last-child { border-bottom: 0; }
.kv-code { color: var(--text-secondary); font-weight: 600; }
.kv-native { color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.kv-usd { color: var(--text-primary); font-variant-numeric: tabular-nums; min-width: 78px; text-align: right; }
.kv-share { color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }

/* ── Login ──────────────────────────────────────────────────────────── */
.login-shell {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 360px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
}
.login-card h1 {
  margin: 0 0 4px; font-size: 20px; font-weight: 680; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
}
.login-card p.sub { margin: 0 0 20px; color: var(--text-muted); font-size: 13.5px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--text-secondary); margin-bottom: 6px; }
.field input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: inherit; font-size: 15px;
  padding: 10px 12px;
}
.field input:focus {
  outline: none;
  border-color: var(--series-1);
  box-shadow: 0 0 0 3px rgba(57, 135, 229, 0.22);
}
.btn-primary {
  width: 100%;
  appearance: none; border: 0; cursor: pointer;
  background: var(--series-1);
  color: #fff; font: inherit; font-size: 15px; font-weight: 640;
  padding: 11px; border-radius: var(--radius-sm);
  margin-top: 4px;
}
.btn-primary:hover { filter: brightness(1.06); }
.form-error {
  background: rgba(255, 107, 107, 0.10);
  border: 1px solid rgba(255, 107, 107, 0.35);
  color: var(--neg);
  border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 13px; margin-bottom: 16px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .col-8, .col-7, .col-6, .col-5, .col-4 { grid-column: span 12; }
  .stats { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 14px; }
  .chart { height: 244px; }
  .chart--tall { height: 260px; }
  .hdr__sync .sync-text { display: none; }
  .stat__value { font-size: 22px; }
  /* The period matrix keeps all four columns — it is the whole point of the card —
     but the label column and the figures shrink rather than wrap. */
  .pgrid { column-gap: 8px; }
  .pgrid__val { font-size: 16px; }
  .pgrid__sub { font-size: 11px; }
  .stat__label { font-size: 11px; letter-spacing: 0.02em; }
}