/* Moneyview v2 — the one theme. Shared by the dashboard, the login page and the
   telecaller console so the three read as one product.

   Direction (2026-09-07, Rahul): DESIGN-posthog.md, applied as written. A warm
   cream canvas, olive ink, IBM Plex Sans with hierarchy built from weight,
   flat white cards with a 1px olive hairline and 6px corners, and ONE loud
   colour — the yellow-orange pill — on the primary action. No shadows, no
   gradients, no uppercase. Red (accent-red) is kept for the two buttons that
   end things, because a dialler needs Stop to read as Stop.

   The hedgehogs are PostHog's; ours is a small caller in a headset, drawn
   once per page as an SVG <symbol> and placed the way the brief places its
   mascots — beside the content, never as a background.

   Tokens first, then components. Legacy names (--rausch, --series-*, --bar,
   --canvas, --plane, --lift) are kept as aliases because 500 lines of
   page-specific CSS in dashboard.html still say them. */

:root {
  color-scheme: light;
  /* brief: colors */
  --primary: #f7a501; --primary-pressed: #dd9001; --primary-active: #b17816; --on-primary: #23251d;
  --ink: #23251d; --body: #4d4f46; --charcoal: #33342d; --mute: #6c6e63; --ash: #9b9c92; --stone: #b6b7af;
  --hairline: #bfc1b7; --hairline-soft: #dcdfd2; --on-dark: #ffffff;
  --canvas: #eeefe9; --surface-soft: #e5e7e0; --surface-card: #ffffff; --surface-doc: #fcfcfa; --surface-dark: #23251d;
  --link-blue: #1d4ed8; --link-teal: #1078a3;
  --accent-blue: #2c84e0; --accent-blue-soft: #dceaf6;
  --accent-red: #cd4239; --accent-red-soft: #f7d6d3;
  --accent-green: #2c8c66; --accent-green-soft: #d9eddf;
  --accent-purple: #7c44a6; --accent-purple-soft: #e7d8ee;
  --focus-ring: rgba(59, 130, 246, .5);
  --on-ink: #ffffff;               /* text on an ink-filled control; flips with the theme */
  /* the names the pages use */
  --page: var(--canvas);
  --surface: var(--surface-card); --plane: var(--surface-card);
  --surface-strong: var(--surface-soft);
  --ink-2: var(--body); --ink-muted: var(--mute); --ink-faint: var(--ash);
  --border: var(--hairline); --border-soft: var(--hairline-soft); --border-strong: var(--hairline);
  --primary-hover: var(--primary-pressed); --primary-soft: #fde7b3; --primary-wash: rgba(247, 165, 1, .14);
  --good: var(--accent-green); --good-text: var(--accent-green); --good-soft: var(--accent-green-soft);
  --warning: #b17816; --warning-soft: #fdeac0;
  --critical: var(--accent-red); --critical-soft: var(--accent-red-soft); --serious: var(--accent-red); --error: var(--accent-red);
  --info-soft: var(--accent-blue-soft);
  --series-1: var(--accent-blue); --series-2: var(--stone); --series-3: var(--ink);
  --bar: var(--accent-blue-soft); --bar-strong: var(--accent-blue); --grid: var(--hairline-soft); --axis: var(--hairline);
  --rausch: var(--primary); --rausch-active: var(--primary-pressed); --rausch-soft: var(--primary-soft);
  --rausch-wash: var(--primary-wash); --on-rausch: var(--on-primary);
  /* brief: rounded */
  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 6px; --r-xl: 8px; --r-full: 9999px;
  --lift: none;
  --sans: "IBM Plex Sans", "IBM Plex Sans Variable", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Source Code Pro", SFMono-Regular, Menlo, "JetBrains Mono", monospace;
  --side-w: 240px; --top-h: 56px;
}
/* Night: the brief's own inverted surface (surface-dark is the same olive as
   the ink), with the yellow kept as the one loud colour. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #1c1e17; --surface-card: #23251d; --surface-doc: #23251d; --surface-soft: #2e3027;
    --ink: #f3f4ee; --body: #cfd1c6; --charcoal: #e2e4da; --mute: #9b9c92; --ash: #6c6e63; --stone: #55574e;
    --hairline: #3d3f35; --hairline-soft: #31332b; --on-ink: #23251d;
    --primary-soft: #5a4408; --primary-wash: rgba(247, 165, 1, .18);
    --good: #6cc9a0; --good-text: #6cc9a0; --good-soft: rgba(44, 140, 102, .22);
    --warning: #e0b04a; --warning-soft: rgba(177, 120, 22, .24);
    --critical: #ef7a71; --critical-soft: rgba(205, 66, 57, .24);
    --accent-blue: #5aa0ea; --accent-blue-soft: rgba(44, 132, 224, .22); --link-teal: #5fb4d6; --link-blue: #8fb3ff;
    --accent-purple-soft: rgba(124, 68, 166, .24);
    --series-2: #6c6e63; --bar: rgba(44, 132, 224, .3); --grid: #31332b; --axis: #3d3f35;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #1c1e17; --surface-card: #23251d; --surface-doc: #23251d; --surface-soft: #2e3027;
  --ink: #f3f4ee; --body: #cfd1c6; --charcoal: #e2e4da; --mute: #9b9c92; --ash: #6c6e63; --stone: #55574e;
  --hairline: #3d3f35; --hairline-soft: #31332b; --on-ink: #23251d;
  --primary-soft: #5a4408; --primary-wash: rgba(247, 165, 1, .18);
  --good: #6cc9a0; --good-text: #6cc9a0; --good-soft: rgba(44, 140, 102, .22);
  --warning: #e0b04a; --warning-soft: rgba(177, 120, 22, .24);
  --critical: #ef7a71; --critical-soft: rgba(205, 66, 57, .24);
  --accent-blue: #5aa0ea; --accent-blue-soft: rgba(44, 132, 224, .22); --link-teal: #5fb4d6; --link-blue: #8fb3ff;
  --accent-purple-soft: rgba(124, 68, 166, .24);
  --series-2: #6c6e63; --bar: rgba(44, 132, 224, .3); --grid: #31332b; --axis: #3d3f35;
}

/* ── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; min-height: 100%; background: var(--canvas); color: var(--body);
  font: 400 14px/1.43 var(--sans); -webkit-font-smoothing: antialiased; }        /* body-xs at weight 400 */
a { color: var(--link-teal); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
h1, h2, h3 { color: var(--ink); margin: 0; }
h1 { font-size: 24px; font-weight: 800; line-height: 1.33; letter-spacing: -0.6px; }     /* display-lg */
h2 { font-size: 18px; font-weight: 600; line-height: 1.56; margin-bottom: 2px; }          /* heading-sm-mixed */
h3 { font-size: 14px; font-weight: 700; line-height: 1.71; margin: 18px 0 6px; }          /* caption-md */
.sub { font-size: 14px; font-weight: 400; color: var(--mute); margin: 0 0 12px; max-width: 78ch; line-height: 1.5; }
.sub.muted, .muted { color: var(--ash); }
.mono { font-family: var(--mono); font-size: 13px; }
code { font-family: var(--mono); font-size: 13px; font-weight: 500; background: var(--surface-soft); color: var(--ink);
  padding: 2px 6px; border-radius: var(--r-xs); }                                         /* inline-code */
.num, td.num, th.num, .kpiValue, .capSeg, .capLane .calls, .setCtl input, .summaryTable td.num,
td { font-variant-numeric: tabular-nums; }
.spacer { flex: 1; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.grid2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.empty { color: var(--mute); font-size: 14px; padding: 24px 0; }
.empty b { display: block; color: var(--ink); font-weight: 600; font-size: 15px; margin-bottom: 4px; }
[hidden] { display: none !important; }

/* ── the mascot: flat colour, drawn once per page as a <symbol> ──────── */
.mascot { width: 34px; height: 34px; flex: none; display: block; }
.mascot.big { width: 56px; height: 56px; }
.mascot.corner { position: absolute; top: 24px; right: 24px; width: 84px; height: 84px; pointer-events: none; }
.mascot.hero { width: 140px; height: 140px; }
.tab > section { position: relative; }
@media (max-width: 900px) { .mascot.corner { display: none; } }

/* ── the shell: sidebar + content, both on the cream ──────────────────── */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 12px 16px; background: var(--canvas); border-right: 1px solid var(--hairline); overflow-y: auto; }
.side .brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; color: var(--ink);
  font-weight: 700; font-size: 15px; line-height: 1.2; }
.side .brand small { display: block; font-weight: 500; color: var(--mute); font-size: 12px; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 7px 10px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--body);
  font: 500 14px/1.43 var(--sans); cursor: pointer; position: relative; }             /* product-tab */
.side nav button svg { width: 18px; height: 18px; flex: none; color: var(--mute); }
.side nav button:hover { background: var(--surface-soft); color: var(--ink); }
.side nav button[aria-selected="true"], .side nav button.on {
  background: var(--surface-card); border-color: var(--hairline); color: var(--ink); font-weight: 600; } /* product-tab-active */
.side nav button[aria-selected="true"] svg, .side nav button.on svg { color: var(--ink); }
.side nav button .count { margin-left: auto; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: var(--r-full);
  background: var(--accent-red-soft); color: var(--accent-red); }
.side nav button .count:empty { display: none; }
.side .foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 2px; }
.side .foot button { justify-content: flex-start; width: 100%; min-height: 36px; font-weight: 600; }
button.theme svg { width: 16px; height: 16px; }
button.theme .moon { display: none; }
:root[data-theme="dark"] button.theme .sun { display: none; }
:root[data-theme="dark"] button.theme .moon { display: inline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.theme .sun { display: none; } :root:not([data-theme="light"]) button.theme .moon { display: inline; } }
.side .who { font-size: 13px; color: var(--mute); padding: 4px 8px; line-height: 1.5; }
.side .who b { color: var(--ink); display: block; font-weight: 600; }
.content { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 10; background: var(--canvas); border-bottom: 1px solid var(--hairline);
  padding: 10px 24px; display: flex; flex-direction: column; gap: 8px; }                /* primary-nav */
.topbar .hrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 36px; }
.topbar .title { display: flex; flex-direction: column; gap: 0; margin-right: 8px; }
.topbar .title .sub { margin: 0; font-size: 13px; font-weight: 500; }
.topbar .sub-row { padding-top: 8px; border-top: 1px solid var(--hairline-soft); }        /* sub-nav-strip */
main { padding: 24px 24px 80px; width: 100%; max-width: 1280px; }
@media (min-width: 1920px) { main { padding-left: 80px; padding-right: 80px; max-width: 1440px; } }
@media (max-width: 900px) {
  .app { grid-template-columns: 60px minmax(0, 1fr); }
  .side { padding: 12px 8px; }
  .side .brand span, .side nav button span, .side .who, .side .foot .label { display: none; }
  .side nav button { justify-content: center; padding: 10px 0; }
  .side nav button .count { position: absolute; top: 2px; right: 4px; margin: 0; }
  main, .topbar { padding-left: 14px; padding-right: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tab { animation: fadein .12s ease-out; }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
}

/* ── cards: white, hairline, 6px, 24px inside, flat on cream ──────────── */
.tab > section, .tab > .grid2 > section {
  background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 24px; margin-bottom: 16px; }                                                  /* product-card */
.tab > .grid2 { margin-bottom: 16px; }
.tab > .grid2 > section { margin-bottom: 0; }
.card { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 24px; }
/* A card inside a section is a panel — a filter row, a form, a report — on the cream. */
section .card { background: var(--canvas); border: 1px solid var(--hairline-soft); padding: 16px; margin: 12px 0; }
section .card:last-child { margin-bottom: 0; }
/* A card that only wraps a table is the list itself. */
.card.scroll, .tablewrap { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 0; overflow-x: auto; margin: 12px 0 0; }
.card.scroll > table, .tablewrap > table { margin: 0; }
.card > h2, .card > h3:first-child { margin-top: 0; }
.panelHead { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.panelHead h3 { margin-bottom: 0; }

/* ── KPI tiles: feature-tile ──────────────────────────────────────────── */
.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); margin: 4px 0; }
.tile { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 20px; }
section .tile { background: var(--surface-doc); }
.tile .label { font-size: 14px; font-weight: 500; color: var(--body); line-height: 1.43; }
.tile .value { font-size: 24px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.33; margin-top: 4px; color: var(--ink); }
.tile .value.money::before { content: "₹"; font-size: 15px; font-weight: 600; color: var(--mute); margin-right: 1px; }
.tile .foot { font-size: 13px; font-weight: 500; color: var(--mute); margin-top: 4px; }

/* ── tables ───────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 700; font-size: 13px; color: var(--body); white-space: nowrap;
  padding: 10px 12px; background: var(--canvas); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; }
td { padding: 10px 12px; border-bottom: 1px solid var(--hairline-soft); vertical-align: middle; color: var(--body); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-doc); }
td.num, th.num { text-align: right; }
td.muted { color: var(--mute); }
tfoot td { font-weight: 700; color: var(--ink); background: var(--canvas); border-top: 1px solid var(--hairline); }
table table th { position: static; }

/* ── chips, pills, dots ───────────────────────────────────────────────── */
.badge { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); white-space: nowrap;
  background: var(--surface-soft); color: var(--body); display: inline-flex; align-items: center; gap: 6px; border: 0; } /* badge-promo */
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.good { background: var(--accent-green-soft); color: var(--accent-green); }
.badge.warning, .badge.warn { background: var(--warning-soft); color: var(--warning); }
.badge.critical, .badge.bad { background: var(--accent-red-soft); color: var(--accent-red); }
.badge.info { background: var(--accent-blue-soft); color: var(--link-blue); }
.pill { font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: var(--r-full); border: 1px solid var(--hairline);
  background: var(--surface-card); color: var(--body); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pill.on { background: var(--accent-green-soft); color: var(--accent-green); border-color: transparent; }
.pill.ring { background: var(--primary-soft); color: var(--primary-active); border-color: transparent; }
.pill.live { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.pill.alert { background: var(--accent-red); color: #fff; border-color: var(--accent-red); font-weight: 600; cursor: pointer; min-height: 0; padding: 4px 12px; }
.pill.alert:hover { filter: brightness(.94); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ash); display: inline-block; flex: none; }
.dot.open { background: var(--accent-green); }
.dot.shut { background: var(--accent-red); }
.dir { font-size: 12px; font-weight: 500; padding: 1px 6px; border-radius: var(--r-sm); border: 1px solid var(--hairline); color: var(--body); white-space: nowrap; }
.dir.out::before { content: "↑ "; color: var(--accent-blue); }
.dir.in::before { content: "↓ "; color: var(--mute); }

/* ── buttons ──────────────────────────────────────────────────────────── */
button { font: 700 14px/1.5 var(--sans); padding: 8px 16px; min-height: 40px; border-radius: var(--r-md);
  border: 1px solid transparent; background: var(--surface-soft); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }             /* button-secondary */
button:hover { background: var(--hairline-soft); }
button:active { background: var(--hairline); }
button.go, button.primary { background: var(--primary); color: var(--on-primary); }       /* button-primary */
button.go:hover, button.primary:hover { background: var(--primary-pressed); }
button.go:active, button.primary:active { background: var(--primary-active); color: var(--on-dark); }
button.primary:disabled, button.go:disabled { background: var(--surface-soft); color: var(--ash); }
button.danger { background: var(--accent-red); color: var(--on-dark); }
button.danger:hover { background: #b5372f; }
button.quiet, button.icon { background: transparent; color: var(--ink); padding: 8px 12px; }  /* button-tertiary */
button.quiet:hover, button.icon:hover { background: var(--surface-soft); }
button.icon { min-height: 36px; padding: 6px 10px; }
button:disabled { background: var(--surface-soft); color: var(--ash); cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 1px; }
.periodBtn { font: 500 13px/1 var(--sans); padding: 8px 14px; min-height: 0; border-radius: var(--r-full);
  background: transparent; color: var(--body); }                                           /* pill-tab */
.periodBtn:hover { background: var(--surface-soft); }
.periodBtn.on { background: var(--ink); color: var(--on-ink); }                          /* pill-tab-active */
#periodBox { display: flex; gap: 2px; align-items: center; }
#periodApply { min-height: 32px; padding: 6px 14px; margin-left: 6px; font-size: 13px; }
#periodBox input[type=date] { font-size: 13px; padding: 4px 8px; height: 32px; }
.periodLabel { font-size: 13px; font-weight: 500; color: var(--mute); margin: 0 4px; }

/* ── inputs: text-input ───────────────────────────────────────────────── */
input[type=text], input[type=number], input[type=search], input[type=date], input[type=datetime-local],
input[type=password], input[type=email], select, textarea {
  font: 400 14px/1.43 var(--sans); padding: 7px 12px; min-height: 36px; border-radius: var(--r-md);
  border: 1px solid var(--hairline); background: var(--surface-card); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--focus-ring); outline-offset: 0; border-color: var(--accent-blue); }
input[type=file] { font: inherit; font-size: 13px; }
label { font-size: 14px; font-weight: 500; color: var(--body); }
input[type=range] { accent-color: var(--ink); }
input[type=checkbox], input[type=radio] { accent-color: var(--ink); }

/* ── bars used by the funnel and the hourly table ─────────────────────── */
.fbar { height: 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--accent-blue); min-width: 2px; }
.minibar { height: 7px; border-radius: 0 3px 3px 0; background: var(--accent-blue-soft); }

/* ── dialogs: a card that floats over a dimmed cream ──────────────────── */
dialog { border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface-card); color: var(--body);
  padding: 24px; width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(35, 37, 29, .45); }
dialog form label { display: block; margin: 10px 0 4px; }
dialog form label input { width: 100%; margin-top: 4px; }
dialog form #tcLangs label { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 400; }