/* Shared styling for the founder/manager/agent dashboard
   (login.html, founder.html, manager.html, agent.html).

   Brand tokens are copied verbatim from web/deploy/index.html so the
   dashboard reads as the same product, not a bolted-on tool. Chart-role
   tokens (status/categorical/sequential) follow the dataviz skill's
   validated reference values — see references/palette.md in that skill —
   kept as their own layer on top of the brand tokens rather than reinvented,
   since those hex steps are pre-validated for colorblind-safety and
   contrast; only the brand chrome (buttons, links, surfaces) uses the
   site's teal/amber tokens. */

:root{
  --ink: #13171C; --ink-soft: #4B545C; --ink-faint: #7A828A;
  --paper: #F3F6F5; --surface: #E7ECEA; --surface-hi: #DCE4E1;
  --line: rgba(19,23,28,0.14);
  --accent: #1F7A6C; --accent-strong: #145E53; --accent-on: #F3F6F5;
  --warm: #B5720A; --warm-surface: #F1E3C8;
  --font-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  /* Status palette — fixed, never themed (dataviz skill). */
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;

  /* Categorical (channel breakdown) — first slots of the validated ramp. */
  --cat-1: #2a78d6; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #eda100;
  --cat-5: #e87ba4; --cat-6: #4a3aa7; --cat-7: #e34948; --cat-8: #7a828a;

  /* Sequential (heat map cell intensity), blue, light -> dark. */
  --seq-0: transparent; --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #5598e7;
  --seq-4: #2a78d6; --seq-5: #1c5cab; --seq-6: #104281;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink: #E8ECEA; --ink-soft: #A9B3B0; --ink-faint: #7C8683;
    --paper: #0D1114; --surface: #171C20; --surface-hi: #1F262B;
    --line: rgba(232,236,234,0.14);
    --accent: #3AA894; --accent-strong: #57C2AC; --accent-on: #08110F;
    --warm: #E3A73F; --warm-surface: #2B2415;
  }
}
:root[data-theme="dark"]{
  --ink: #E8ECEA; --ink-soft: #A9B3B0; --ink-faint: #7C8683;
  --paper: #0D1114; --surface: #171C20; --surface-hi: #1F262B;
  --line: rgba(232,236,234,0.14);
  --accent: #3AA894; --accent-strong: #57C2AC; --accent-on: #08110F;
  --warm: #E3A73F; --warm-surface: #2B2415;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{ margin:0; background: var(--paper); color: var(--ink); font-family: var(--font-body); }
h1,h2,h3{ font-family: var(--font-display); margin:0; }
a{ color: var(--accent-strong); }
button, input, select{ font-family: inherit; }

/* ---------- Shell / topbar ---------- */
.dash-shell{ max-width: 1180px; margin: 0 auto; padding: 22px 24px 60px; }
.dash-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
.dash-brand{ display:flex; align-items:baseline; gap:12px; }
.dash-brand .eyebrow{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--accent-strong); display:flex; align-items:center; gap:8px;
}
.dash-brand .eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--accent); }
.dash-brand h1{ font-size: clamp(19px, 2.6vw, 24px); font-weight: 800; }
.role-pill{
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; color: var(--ink-soft);
}
.dash-actions{ display:flex; align-items:center; gap:10px; }
.btn{
  font-family: var(--font-display); font-weight:700; font-size:13px; cursor:pointer;
  border-radius:8px; padding:9px 14px; border:1px solid var(--line); background: var(--surface); color: var(--ink);
}
.btn:hover{ background: var(--surface-hi); }
.btn.primary{ background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-on); }
.btn.primary:hover{ opacity: 0.92; }
.btn.ghost{ background: transparent; }
.btn:disabled{ opacity: 0.6; cursor: default; }

/* ---------- Filter bar ---------- */
.filter-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom: 22px;
  background: var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 12px;
}
.preset-group{ display:flex; gap:6px; flex-wrap:wrap; }
.preset-btn{
  font-family: var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.03em;
  background: var(--paper); border:1px solid var(--line); border-radius:6px; padding:6px 10px; cursor:pointer; color: var(--ink-soft);
}
.preset-btn.active{ background: var(--accent-strong); border-color: var(--accent-strong); color: var(--accent-on); }
.filter-bar select, .filter-bar input[type="date"], .filter-bar input[type="search"]{
  background: var(--paper); border:1px solid var(--line); border-radius:6px; padding:6px 9px; font-size:13px; color: var(--ink);
}
.filter-bar .spacer{ flex: 1; }
.filter-bar .updated-at{ font-family: var(--font-mono); font-size:11px; color: var(--ink-faint); }

/* ---------- KPI grid / stat tile ---------- */
.kpi-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom: 24px; }
.kpi-grid:empty::before{ content: "Loading…"; color: var(--ink-faint); font-size: 13px; grid-column: 1 / -1; }
.stat-tile{
  background: var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px;
  display:flex; flex-direction:column; gap:6px; min-width: 0;
}
.stat-tile .label{ font-family: var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color: var(--ink-faint); }
.stat-tile .value{ font-family: var(--font-display); font-size:26px; font-weight:800; font-variant-numeric: tabular-nums; line-height:1.1; }
.stat-tile .delta{ font-size:12px; color: var(--ink-soft); }
.stat-tile .delta.up{ color: var(--status-good); }
.stat-tile .delta.down{ color: var(--status-critical); }
.stat-tile.accent-live .value{ color: var(--status-critical); }
.stat-tile.accent-good .value{ color: var(--status-good); }
.stat-tile.accent-warn .value{ color: var(--warm); }

/* ---------- Section cards ---------- */
.section{ background: var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-bottom: 22px; }
.section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.section-head h2{ font-size:15px; font-weight:700; }
.section-head .hint{ font-size:12px; color: var(--ink-faint); }
.empty-state{ padding: 28px 10px; text-align:center; color: var(--ink-faint); font-size: 13px; }

/* ---------- Heat map (touchpoint x outcome) ---------- */
.heatmap-wrap{ overflow-x:auto; }
.heatmap{ border-collapse: separate; border-spacing: 3px; font-size: 12.5px; min-width: 100%; }
.heatmap th{ font-family: var(--font-mono); font-size: 10.5px; text-transform:uppercase; letter-spacing:0.03em; color: var(--ink-faint); font-weight:600; text-align:left; padding: 4px 8px; }
.heatmap td.channel-cell{ font-family: var(--font-display); font-weight:700; font-size:12.5px; white-space:nowrap; padding: 6px 10px; color: var(--ink); }
.heatmap td.heat-cell{
  text-align:center; padding: 8px 6px; border-radius:6px; font-variant-numeric: tabular-nums; font-weight:600;
  min-width: 46px; color: var(--ink); background: var(--surface-hi);
}
.heatmap td.heat-cell.empty{ color: var(--ink-faint); font-weight:400; background: transparent; }
.heat-legend{ display:flex; align-items:center; gap:6px; margin-top:10px; font-size:11px; color: var(--ink-faint); font-family: var(--font-mono); }
.heat-legend .swatch{ width:14px; height:10px; border-radius:2px; display:inline-block; }

/* ---------- Channel / topic bars ---------- */
.bar-list{ display:flex; flex-direction:column; gap:8px; }
.bar-row{ display:grid; grid-template-columns: 110px 1fr 40px; align-items:center; gap:10px; font-size:12.5px; }
.bar-row .bar-label{ color: var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track{ background: var(--surface-hi); border-radius: 999px; height: 9px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:999px; background: var(--cat-1); }
.bar-row .bar-count{ text-align:right; font-variant-numeric: tabular-nums; color: var(--ink-faint); }

/* ---------- Badges (outcome / status) — icon + label, never color alone ---------- */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-family: var(--font-mono); font-size:11px;
  text-transform:uppercase; letter-spacing:0.02em; border-radius:999px; padding:3px 9px; white-space:nowrap;
  border: 1px solid transparent;
}
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; }
.badge.good{ background: color-mix(in srgb, var(--status-good) 16%, transparent); color: var(--status-good); }
.badge.good::before{ background: var(--status-good); }
.badge.warning{ background: color-mix(in srgb, var(--status-warning) 20%, transparent); color: #8a6300; }
.badge.warning::before{ background: var(--status-warning); }
.badge.serious{ background: color-mix(in srgb, var(--status-serious) 20%, transparent); color: #9c4a29; }
.badge.serious::before{ background: var(--status-serious); }
.badge.critical{ background: color-mix(in srgb, var(--status-critical) 16%, transparent); color: var(--status-critical); }
.badge.critical::before{ background: var(--status-critical); }
.badge.neutral{ background: var(--surface-hi); color: var(--ink-soft); border-color: var(--line); }
.badge.neutral::before{ background: var(--ink-faint); }
.badge.live{ background: color-mix(in srgb, var(--status-critical) 14%, transparent); color: var(--status-critical); }
.badge.live::before{ background: var(--status-critical); animation: pulseDot 1.1s infinite; }
@keyframes pulseDot{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }

/* ---------- Credits panel ---------- */
.credits-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.credit-card{ background: var(--paper); border:1px solid var(--line); border-radius:10px; padding:13px 14px; }
.credit-card .credit-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.credit-card .tool-name{ font-family: var(--font-display); font-weight:700; font-size:14px; }
.credit-card .plan{ font-size:11px; color: var(--ink-faint); font-family: var(--font-mono); }
.meter-track{ background: var(--surface-hi); border-radius:999px; height:8px; overflow:hidden; margin: 8px 0 6px; }
.meter-fill{ height:100%; border-radius:999px; }
.credit-card .credit-figures{ font-size:12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; display:flex; justify-content:space-between; }
.credit-card .credit-meta{ margin-top:8px; font-size:10.5px; color: var(--ink-faint); font-family: var(--font-mono); }
.credit-card .edit-link{ font-size:11px; cursor:pointer; color: var(--accent-strong); background:none; border:none; padding:0; font-family: var(--font-mono); }
.credit-edit-row{ display:flex; gap:6px; margin-top:8px; }
.credit-edit-row input{ width: 90px; padding:5px 7px; border-radius:5px; border:1px solid var(--line); background: var(--surface); color: var(--ink); font-size:12px; }

/* ---------- Call table ---------- */
.table-wrap{ overflow-x:auto; overflow-y:auto; max-height:560px; }
.table-wrap thead th{ position:sticky; top:0; background:var(--surface); z-index:1; }
.pager{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:14px; font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); }
.pager button{ font-family:var(--font-display); font-weight:700; font-size:12.5px; background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:6px 12px; cursor:pointer; color:var(--ink); }
.pager button:disabled{ opacity:0.4; cursor:default; }
table.call-table{ width:100%; border-collapse: collapse; font-size:13px; }
.call-table thead th{
  text-align:left; font-family: var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.03em;
  color: var(--ink-faint); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space:nowrap;
}
.call-table tbody tr{ cursor:pointer; border-bottom: 1px solid var(--line); transition: background 0.12s ease; }
.call-table tbody tr:hover{ background: var(--surface-hi); }
.call-table td{ padding: 9px 10px; vertical-align: middle; }
.call-table .who .name{ font-weight:600; }
.call-table .who .contact{ display:block; font-size:11px; color: var(--ink-faint); }
.call-table .summary-cell{ max-width: 260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--ink-soft); }
.call-table .dur{ font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.channel-chip{ font-family: var(--font-mono); font-size:11px; color: var(--ink-soft); }
.sales-agent-cell{ font-size:12.5px; color: var(--ink-soft); white-space:nowrap; }
.files-cell{ white-space:nowrap; }
.file-chip{ font-size:14px; margin-right:4px; }
.files-none{ color: var(--ink-faint); }

/* ---------- Modal pop-out ---------- */
.modal-overlay{
  position:fixed; inset:0; background: color-mix(in srgb, var(--ink) 45%, transparent);
  backdrop-filter: blur(3px); display:flex; align-items:flex-start; justify-content:center;
  padding: 4vh 16px; opacity:0; pointer-events:none; transition: opacity 0.2s ease; z-index: 50; overflow-y:auto;
}
.modal-overlay.active{ opacity:1; pointer-events:auto; }
.modal-card{
  width:100%; max-width: 640px; background: var(--paper); border:1px solid var(--line); border-radius:14px;
  padding: 22px 24px 24px; box-shadow: 0 30px 80px -30px rgba(0,0,0,0.45);
  transform: translateY(10px) scale(0.98); transition: transform 0.22s ease;
}
.modal-overlay.active .modal-card{ transform: translateY(0) scale(1); }
.modal-close{ float:right; background:none; border:none; font-size:18px; cursor:pointer; color: var(--ink-faint); }
.modal-head h3{ font-size:18px; font-weight:800; margin-bottom:2px; }
.modal-head .modal-sub{ font-size:12.5px; color: var(--ink-faint); }
.modal-live-actions{ display:flex; gap:10px; margin: 4px 0 12px; }
.modal-joins{ font-size:11px; color: var(--ink-faint); margin: -4px 0 12px; }
.modal-meta{ display:flex; flex-wrap:wrap; gap:8px 18px; margin: 14px 0; font-size:12.5px; color: var(--ink-soft); }
.modal-meta .item strong{ display:block; font-family: var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.03em; color: var(--ink-faint); font-weight:600; }
.modal-summary{ background: var(--surface); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:13px; margin-bottom: 14px; }
.modal-audio{ width:100%; margin-bottom: 14px; }
video.modal-audio{ max-height: 320px; border-radius: 8px; background: #000; }
.transcript{ max-height: 320px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; padding: 12px 14px; background: var(--surface); }
.transcript .turn{ margin-bottom:10px; font-size:13px; line-height:1.45; }
.transcript .turn .who{ font-family: var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:2px; }
.transcript .turn.visitor .who{ color: var(--accent-strong); }
.transcript .turn.agent .who{ color: var(--warm); }
.transcript .turn .ts{ color: var(--ink-faint); font-weight:400; margin-left:6px; }

/* ---------- Login page ---------- */
.login-shell{ min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 24px; }
.login-card{ width:100%; max-width: 340px; background: var(--surface); border:1px solid var(--line); border-radius:14px; padding: 28px 26px; box-shadow: 0 20px 60px -30px rgba(0,0,0,0.35); }
.login-card h1{ font-size:19px; margin-bottom:4px; }
.login-card p{ font-size:13px; color: var(--ink-soft); margin: 0 0 18px; }
.login-card input{ width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--line); background: var(--paper); color: var(--ink); font-size:14px; margin-bottom: 12px; }
.login-card .err{ font-size:12.5px; color: var(--status-critical); margin: -4px 0 12px; display:none; }
.login-card .err.show{ display:block; }
.login-card button{ width:100%; }

.skeleton{ color: var(--ink-faint); font-size:13px; padding: 6px 0; }
@media (max-width: 620px){
  .bar-row{ grid-template-columns: 80px 1fr 32px; }
  .dash-topbar{ flex-direction:column; align-items:flex-start; }
}