/* ==========================================================================
   KITSS Voice Console — stylesheet
   --------------------------------------------------------------------------
   An operator console for reviewing phone calls. Dense and scannable, not a
   marketing page. Everything is token-driven: the palette, type scale and
   spacing live as custom properties on :root and are redefined wholesale for
   dark mode, so components never hard-code a colour.

   Identity: a telephone line. Slate neutrals carrying a slight teal bias, one
   teal "signal" accent, and semantic colours kept deliberately separate from
   that accent so a status never reads as a link.

   No webfonts, no CDN — the CSP blocks them. Transcripts are Hindi/Hinglish, so
   the stack must include a Devanagari face and the line-height must be generous.
   ========================================================================== */

:root {
  /* ground + ink — slate, very slightly teal */
  --bg:            #f6f8f8;
  --surface:       #ffffff;
  --surface-2:     #eef2f2;
  --surface-3:     #e2e8e8;
  --border:        #d3dcdc;
  --border-strong: #b6c4c4;
  --ink:           #12201f;
  --ink-2:         #40514f;
  --ink-3:         #6b7d7b;

  /* the single accent */
  --accent:        #0d7d76;
  --accent-ink:    #075e58;
  --accent-soft:   #ddefed;

  /* semantics — separate from the accent on purpose */
  --good:          #1c6b45;
  --good-soft:     #dcefe3;
  --warn:          #8a5a10;
  --warn-soft:     #f6ecd8;
  --quiet:         #5c6a69;
  --quiet-soft:    #e6ebeb;
  --bad:           #9d2f2f;
  --bad-soft:      #f7e2e2;

  --focus:         #0d7d76;

  /* type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans",
          "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-md: 0.9375rem;
  --t-lg: 1.125rem;
  --t-xl: 1.5rem;
  --t-2xl: 2rem;

  /* space */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px rgba(18, 32, 31, .06), 0 1px 3px rgba(18, 32, 31, .04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0e1615;
    --surface:       #15201f;
    --surface-2:     #1b2726;
    --surface-3:     #23302f;
    --border:        #2b3a39;
    --border-strong: #3d4f4d;
    --ink:           #e8efee;
    --ink-2:         #b3c2c0;
    --ink-3:         #829694;

    --accent:        #38b2a6;
    --accent-ink:    #6fd3c8;
    --accent-soft:   #17302e;

    --good:          #5cc08c;
    --good-soft:     #142c20;
    --warn:          #d6a95a;
    --warn-soft:     #2e2413;
    --quiet:         #93a3a1;
    --quiet-soft:    #202b2a;
    --bad:           #e08585;
    --bad-soft:      #331b1b;

    --focus:         #38b2a6;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  }
}

/* The viewer's theme toggle stamps data-theme on the root; it must beat the
   media query in BOTH directions, so each is restated in full. */
:root[data-theme="light"] {
  --bg: #f6f8f8; --surface: #ffffff; --surface-2: #eef2f2; --surface-3: #e2e8e8;
  --border: #d3dcdc; --border-strong: #b6c4c4;
  --ink: #12201f; --ink-2: #40514f; --ink-3: #6b7d7b;
  --accent: #0d7d76; --accent-ink: #075e58; --accent-soft: #ddefed;
  --good: #1c6b45; --good-soft: #dcefe3; --warn: #8a5a10; --warn-soft: #f6ecd8;
  --quiet: #5c6a69; --quiet-soft: #e6ebeb; --bad: #9d2f2f; --bad-soft: #f7e2e2;
  --focus: #0d7d76;
}
:root[data-theme="dark"] {
  --bg: #0e1615; --surface: #15201f; --surface-2: #1b2726; --surface-3: #23302f;
  --border: #2b3a39; --border-strong: #3d4f4d;
  --ink: #e8efee; --ink-2: #b3c2c0; --ink-3: #829694;
  --accent: #38b2a6; --accent-ink: #6fd3c8; --accent-soft: #17302e;
  --good: #5cc08c; --good-soft: #142c20; --warn: #d6a95a; --warn-soft: #2e2413;
  --quiet: #93a3a1; --quiet-soft: #202b2a; --bad: #e08585; --bad-soft: #331b1b;
  --focus: #38b2a6;
}

/* --------------------------------------------------------------- base ---- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;               /* the body itself must never scroll sideways */
}

a { color: var(--accent-ink); }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1.25; }

.muted { color: var(--ink-3); }

/* An unknown value. Historical calls predate the richer event logging, so their
   direction/numbers/tenant/lead are genuinely unknown — never invented. */
.unknown {
  color: var(--ink-3);
  border-bottom: 1px dotted var(--border-strong);
  cursor: help;
}

/* --------------------------------------------------------------- shell ---- */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topnav {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topnav__brand {
  font-size: var(--t-md);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.topnav__brand b { color: var(--ink); font-weight: 650; }

.topnav nav { display: flex; gap: var(--s1); flex: 1; }

.topnav__link {
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-sm);
  font-size: var(--t-sm);
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.topnav__link:hover { background: var(--surface-2); color: var(--ink); }

.topnav__link--active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* the skip link only appears on keyboard focus */
.topnav__link[data-skip] { position: absolute; left: -9999px; }
.topnav__link[data-skip]:focus { position: static; left: auto; }

.main {
  flex: 1;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--s5);
}
.main:focus { outline: none; }

[data-foot] {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--s5) var(--s6);
  font-size: var(--t-xs);
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s5);
}

.h1 { font-size: var(--t-xl); font-weight: 650; letter-spacing: -.01em; }

.badge {
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 2px var(--s2);
  border-radius: 999px;
  background: var(--good-soft);
  color: var(--good);
  border: 1px solid currentColor;
}

/* ---------------------------------------------------------------- card ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--shadow);
}

/* ----------------------------------------------------------------- KPI ---- */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s5);
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
}

.kpi__label {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  font-weight: 600;
}

.kpi__value {
  font-size: var(--t-2xl);
  font-weight: 640;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-top: var(--s1);
  line-height: 1.1;
}

.kpi__sub { font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--s1); }

/* --------------------------------------------------------------- table ---- */
/* Wide content scrolls inside its own container, never the page. */
.tablewrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }

.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  text-align: left;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-3);
  font-weight: 650;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }

.table__num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.table__empty { padding: var(--s6); text-align: center; color: var(--ink-3); }

.rowlink { color: inherit; text-decoration: none; font-weight: 600; }
.rowlink:hover { color: var(--accent-ink); text-decoration: underline; }

/* ---------------------------------------------------------------- pill ---- */
/* Outcome pills differ by BOTH colour and border style, so they stay
   distinguishable in greyscale or with colour-vision deficiency. */
.pill {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  padding: 2px var(--s2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.pill--lead    { background: var(--good-soft);  color: var(--good);  border: 1px solid var(--good); }
.pill--talked  { background: var(--warn-soft);  color: var(--warn);  border: 1px dashed var(--warn); }
.pill--noconv  { background: var(--quiet-soft); color: var(--quiet); border: 1px dotted var(--quiet); }
.pill--unknown { background: transparent;       color: var(--ink-3); border: 1px dotted var(--border-strong); }

/* --------------------------------------------------------------- chart ---- */
/* .chart is a wrapper; the <svg> inside scales to it. */
.chart { display: block; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.chart__bar { fill: var(--accent); }
.chart__bar[data-zero="1"] { fill: var(--border-strong); }
/* the leads sub-bar sits in front of the calls bar */
.chart__bar[data-series="leads"] { fill: var(--good); }

/* gridlines */
.chart line[data-grid] { stroke: var(--border); stroke-width: 1; }
.chart line[data-grid="base"] { stroke: var(--border-strong); }

/* chart__axis is used on BOTH the axis lines and their <text> labels */
line.chart__axis { stroke: var(--border); stroke-width: 1; }
text.chart__axis,
.chart text.chart__axis {
  fill: var(--ink-3);
  font-size: 10px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.chart__label { fill: var(--ink-3); font-size: 10px; font-family: var(--mono); }
.chart__label[data-month="1"] { font-weight: 700; }

/* invisible per-day hit target so the whole column is clickable */
.chart [data-hit="1"] { fill: transparent; }
.chart a:hover [data-hit="1"] { fill: var(--surface-3); }
.chart a { cursor: pointer; }
.chart a:focus-visible [data-hit="1"] { fill: var(--accent-soft); }

/* legend swatches, coloured to match the series they describe */
.legend__item[data-series]::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--border-strong);
  display: inline-block;
}
.legend__item[data-series="calls"]::before { background: var(--accent); }
.legend__item[data-series="leads"]::before { background: var(--good); }
.legend__item[data-series="hint"]::before  { display: none; }

/* --------------------------------------------------------------- convo ---- */
.convo { display: flex; flex-direction: column; gap: var(--s3); }

.turn {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: var(--s3);
  align-items: start;
}

.turn__time {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  padding-top: 6px;
}

.turn__who {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 2px;
}

/* Devanagari needs the extra leading. */
.turn__text {
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.turn--caller .turn__who  { color: var(--accent-ink); }
.turn--caller .turn__text { background: var(--accent-soft); border: 1px solid var(--border); }

.turn--agent  .turn__who  { color: var(--ink-3); }
.turn--agent  .turn__text { background: var(--surface-2); border: 1px solid var(--border); }

/* -------------------------------------------------------------- fields ---- */
.fields { display: flex; flex-direction: column; gap: 0; }

.fields__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--t-sm);
}
.fields__row:last-child { border-bottom: 0; }

.fields__k { color: var(--ink-3); }
.fields__v { overflow-wrap: anywhere; }

/* ------------------------------------------------------------- filters ---- */
.filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
  margin-bottom: var(--s4);
}

.filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: flex-end;
}

.field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }

.field__label {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.input, .select {
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--s2) var(--s3);
  min-width: 0;
}
.input:hover, .select:hover { border-color: var(--accent); }

textarea.input { min-height: 4.5rem; resize: vertical; line-height: 1.6; width: 100%; }

/* ------------------------------------------------------------- buttons ---- */
.btn {
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  padding: var(--s2) var(--s4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }

.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.btn--danger { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.btn--danger:hover { background: var(--bad); color: #fff; }

.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-3); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* --------------------------------------------------------------- flash ---- */
.flash {
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  border: 1px solid;
  font-size: var(--t-sm);
  margin: 0 0 var(--s4);
}
.flash--ok  { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.flash--err { background: var(--bad-soft);  border-color: var(--bad);  color: var(--bad); }

/* --------------------------------------------------------------- empty ---- */
.empty {
  padding: var(--s7) var(--s5);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.empty__title { font-size: var(--t-lg); font-weight: 600; margin-bottom: var(--s2); }
.empty__hint  { color: var(--ink-3); font-size: var(--t-sm); max-width: 46ch; margin: 0 auto; }

/* --------------------------------------------------------------- pager ---- */
.pager {
  display: flex;
  align-items: center;
  gap: var(--s3);
  justify-content: flex-end;
  margin-top: var(--s4);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

.pager__link {
  padding: var(--s2) var(--s3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
}
.pager__link:hover { background: var(--surface-2); }
.pager__link[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* -------------------------------------------------------------- legend ---- */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.legend__item { display: flex; align-items: center; gap: var(--s2); }

/* --------------------------------------------------------------- login ---- */
.loginwrap {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s5);
}
.loginwrap .card { width: 100%; max-width: 380px; }
.loginwrap .field { width: 100%; }
.loginwrap .input { width: 100%; }

/* ------------------------------------------------------- odds and ends ---- */
/* Views emit KPI paragraphs rather than divs; keep them flush. */
.kpi p { margin: 0; }
.kpi__value i { font-style: normal; font-size: var(--t-sm); color: var(--ink-3); margin-left: 2px; }
.kpi[data-tone="accent"] { border-left: 3px solid var(--accent); }
.kpi[data-tone="good"]   { border-left: 3px solid var(--good); }

.table caption {
  caption-side: top;
  text-align: left;
  padding: var(--s3) var(--s4);
  font-size: var(--t-xs);
  color: var(--ink-3);
  border-bottom: 1px solid var(--border);
}

/* Section headings inside cards. */
.card > h2 { font-size: var(--t-lg); font-weight: 620; letter-spacing: -.01em; }
.card + .card { margin-top: var(--s5); }
section.card { margin-bottom: var(--s5); }

code {
  font-family: var(--mono);
  font-size: .92em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
}

/* The "new calls have arrived" banner carries its own refresh button. */
[data-newcalls] { display: flex; align-items: center; gap: var(--s3); justify-content: space-between; }
[data-newcalls][hidden] { display: none; }

.convo { list-style: none; margin: 0; padding: 0; }
.convo .turn__who, .convo .turn__text { margin: 0; }

/* --------------------------------------------------------------- small ---- */
@media (max-width: 700px) {
  .main { padding: var(--s4); }
  .topnav { flex-wrap: wrap; gap: var(--s2); padding: var(--s3); }
  .fields__row { grid-template-columns: 1fr; gap: 0; }
  .turn { grid-template-columns: 44px 1fr; }
}