/* ═══════════════════════════════════════════════════════════════════
   OPSVOICE DEMO-UI — shared dark-theme kit for the /demo/* hub pages
   The Two Shot language · matches opsvoice-ui.css tokens + approved
   demo_landing.html / demo_panel.html (locked Aug 19 2026).

   Styles the demo pages' NATIVE class names (.page-head, .stats-table,
   .kpi, pills/badges/chips, bars …) so their body markup stays
   byte-identical. Link once per page:
     <link rel="stylesheet" href="/portal/static/demo-ui.css">
   Keep only genuinely page-unique rules in the page's own <style>.
   Do not re-derive colors — use the variables.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root{
  --paper:#E7EBEE; --paper-hi:#F9FBFC; --paper-lo:#D5DCE1;
  --edge:#B7C2C9; --edge-2:#96A4AD;
  --ink:#07090C; --ink-2:#262E36; --grey:#5F6B74;
  --face:#060A0D; --face-hi:#05080B; --face-lo:#0E1418;
  --green:#3DF59F; --green-hi:#8AFFC8;
  --disp:#F2FBF6; --disp-dim:#B2C6BC; --disp-dim2:#84958D;
  --orange:#FF4D1F; --or-hi:#FF6B2E; --or-lo:#F03D00; --or-edge:#D63500;
  --mono:"IBM Plex Mono",Consolas,monospace;
  --sans:"IBM Plex Sans",Helvetica,Arial,sans-serif;
  --r:14px;
}

*{box-sizing:border-box;margin:0;padding:0}

/* ── page ground: dark plastic, slight top light ── */
body{font-family:var(--sans);color:var(--ink);min-height:100vh;
  background-color:#161D24;
  background-image:linear-gradient(180deg,#242D35 0%,#161D24 40%,#0C1218 100%);
  background-attachment:fixed}

/* ── layout wrappers ── */
.wrap{max-width:1100px;margin:28px auto;padding:0 24px 44px}

/* ── page header (title + description + primary action) ── */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:16px;margin-bottom:24px}
.page-head h1{font-size:30px;font-weight:700;color:#F2FBF6;letter-spacing:-.8px;margin-bottom:6px}
.page-head .desc{font-size:13.5px;color:#8FA0AC;line-height:1.5}
.heading{font-size:30px;font-weight:700;color:#F2FBF6;letter-spacing:-.8px;margin:28px 0 6px;max-width:1100px;padding:0 24px}
.sub{font-size:13.5px;color:#8FA0AC;margin:0 0 22px;max-width:1100px;padding:0 24px}
.section-title{font-family:var(--mono);font-size:9px;font-weight:600;color:var(--orange);
  text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.section-head h3{font-size:16px;font-weight:700;color:#F2FBF6}

/* ── primary / action buttons (orange keycaps) ── */
.btn-primary,.btn-save{display:inline-block;background:linear-gradient(180deg,var(--or-hi),var(--or-lo));
  color:#fff;border:1px solid var(--or-edge);border-radius:9px;padding:10px 18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;cursor:pointer;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 2px 3px rgba(0,0,0,.3)}
.btn-primary:active,.btn-save:active{transform:translateY(1px)}

/* ── info / note banner (light inset on dark ground) ── */
.info,.rule{background:linear-gradient(180deg,var(--paper-hi),var(--paper-lo));
  border:1px solid var(--edge);border-left:3px solid var(--green);border-radius:10px;
  padding:12px 16px;margin-bottom:20px;font-size:13px;color:var(--ink-2);line-height:1.5;
  box-shadow:0 10px 24px -18px rgba(0,0,0,.6)}
.warn-banner{background:rgba(255,77,31,.10);border:1px solid var(--or-hi);border-radius:10px;
  padding:12px 16px;margin-bottom:20px;font-size:13px;color:#FFB59A;line-height:1.5}
.empty{font-family:var(--mono);font-size:12px;color:var(--disp-dim2);text-align:center;padding:32px 0}

/* ── filter / control toolbar ── */
.controls,.filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.controls input,.controls select,.filters input,.filters select,.add-row input,.add-row select{
  font-family:var(--sans);font-size:13.5px;color:var(--ink);background:var(--paper-hi);
  border:1px solid var(--edge);border-radius:8px;padding:8px 12px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.controls input{flex:1;max-width:400px}
.controls input:focus,.controls select:focus,.filters input:focus,.filters select:focus{
  outline:none;border-color:var(--green);box-shadow:inset 0 1px 3px rgba(0,0,0,.08),0 0 0 3px rgba(61,245,159,.18)}
.count{font-family:var(--mono);font-size:11px;color:var(--disp-dim2);margin-left:auto;letter-spacing:.06em}

/* ── table housing (light plastic card wrapping a table) ── */
.stats-table,.card-table{background:linear-gradient(180deg,var(--paper-hi) 0%,var(--paper) 45%,var(--paper-lo) 100%);
  border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 36px -18px rgba(0,0,0,.55);margin-bottom:24px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grey);font-weight:600;padding:11px 14px;border-bottom:1px solid var(--edge-2);
  background:rgba(255,255,255,.4)}
td{padding:11px 14px;border-bottom:1px solid var(--edge);color:var(--ink-2);font-size:13px}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(61,245,159,.06)}
td.name,td.number,td.room-num{font-weight:600;color:var(--ink)}
td.ext{font-family:var(--mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
td.date,td.last,td.dur{font-family:var(--mono);font-size:11.5px;color:var(--grey)}
a.ext,td a{color:#1256C4;text-decoration:none;font-weight:500}
a.ext:hover,td a:hover{text-decoration:underline}
a.back{display:inline-block;margin:0 0 16px;font-family:var(--mono);font-size:11px;
  color:var(--disp-dim2);text-decoration:none;letter-spacing:.08em}
a.back:hover{color:var(--green)}
.time-cell{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ── numeric cells + inline metric coloring ── */
.num,th.num,td.num,.grpnum,.q-num,.ps-num{text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500;white-space:nowrap}
.num.ok,td.ok{color:#0B6B41}
.num.warn,td.warn{color:#A33A00}
.num.amber,td.amber{color:#C97A00}
.num.dim,td.dim{color:var(--grey);font-weight:400}
/* numeric context neutralizes the pill shape of wait-* thresholds */
.num.wait-good,.num.wait-warn,.num.wait-bad{display:inline;padding:0;border:none;background:none}
.num.wait-good{color:#0B6B41}
.num.wait-warn{color:#A33A00}
.num.wait-bad{color:#B02A1A}
.unstaffed{color:#B02A1A;font-weight:700}
.gap-row td{background:rgba(255,77,31,.06)}

/* ── pills / badges / chips (mono uppercase tags) ── */
.scope-badge,.scope-pill,.loc-pill,.q-pill,.wg-badge,.group-badge,.badge,.chip,.count-pill,
.ext-badge,.loc-badge,.summary-pill,.key-badge,.mem-chip,.moh-chip,.strat-badge,.ready-pill,
.admin-chip,.sup-chip,.action-chip,.action-badge,.rec-badge,.rec-chip,.used-chip,.occupied-pill,
.sys-tag,.use-tag,.fn-badge,.pin-val,.slot-range,.pill,
.disp,.dir-in,.dir-out,.dir,.status-live,.status-out,.wait-good,.wait-warn,.wait-bad,.state{
  display:inline-block;border-radius:6px;padding:3px 8px;font-family:var(--mono);
  font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--edge-2);background:rgba(0,0,0,.04);vertical-align:middle}
.wait-good{color:#0B6B41;border-color:#6BCB9C;background:rgba(61,245,159,.15)}
.wait-warn{color:#A33A00;border-color:var(--or-hi);background:rgba(255,77,31,.10)}
.wait-bad{color:#B02A1A;border-color:#E08072;background:rgba(176,42,26,.10)}
/* green = live / on / good / positive scope */
.scope-badge.all,.scope-pill.all,.scope-pill.corp,.scope-pill.tenant,.rec-badge.on,.pill.on,
.occupied-pill.active,.fn-badge.unpause,.ready-pill,.status-live,.dir-in,.dir.in,.disp.ans,
.disp.ANSWERED,.wait-good,.state.open,.state.auto{
  color:#0B6B41;border-color:#6BCB9C;background:rgba(61,245,159,.15)}
/* orange = warning / here / attention */
.scope-badge.specific,.scope-pill.spec,.scope-pill.loc,.action-text.closed,.fn-badge.pause,
.wait-warn,.state.closed,.disp.BUSY,.disp.busy,.status-out,.pct-down,.trend-down{
  color:#A33A00;border-color:var(--or-hi);background:rgba(255,77,31,.10)}
/* red-ish = bad / failed */
.disp.FAILED,.disp.NOANSWER,.disp.miss,.wait-bad{
  color:#B02A1A;border-color:#E08072;background:rgba(176,42,26,.10)}
/* neutral/off */
.rec-badge.off,.pill.off,.occupied-pill.empty,.fn-badge.none,.dir-out,.dir.out,.state{
  color:var(--grey);border-color:var(--edge-2);background:rgba(0,0,0,.04)}
/* accent chips (indigo/violet flavors from source, remapped cool) */
.loc-pill,.q-pill,.loc-badge{color:#1256C4;border-color:#8FB3E8;background:rgba(18,86,196,.10)}
.wg-badge,.action-chip,.strat-badge{color:#5B2AB5;border-color:#B79BE6;background:rgba(91,42,181,.10)}
.count-pill,.summary-pill{color:var(--ink);border-color:var(--edge-2);background:rgba(255,255,255,.6)}
.summary-pill .n{color:var(--green);font-weight:700}
.chip.mode-l{color:#0B6B41;border-color:#6BCB9C;background:rgba(61,245,159,.15)}
.chip.mode-w{color:#A33A00;border-color:var(--or-hi);background:rgba(255,77,31,.10)}
.chip.mode-b{color:#B02A1A;border-color:#E08072;background:rgba(176,42,26,.10)}
.pin-val{font-size:11px;letter-spacing:.14em;color:var(--ink);background:rgba(0,0,0,.05)}

/* ── small text annotations in cells ── */
.action-text,.perm-text,.vis-text,.desc-cell,.reason,.fc-scope,.ivr-desc{
  font-size:12px;color:var(--grey);line-height:1.5}
.transcript{display:block;font-size:11px;color:var(--grey);margin-top:3px}

/* ── KPI display tiles (dark windows, green numbers) ── */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
.kpi{border-radius:12px;padding:15px 18px;
  background:linear-gradient(180deg,var(--face-hi),var(--face));
  box-shadow:inset 0 2px 7px rgba(0,0,0,.7),inset 0 0 0 1px rgba(61,245,159,.08)}
.kpi .k-label{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--disp-dim2);
  text-transform:uppercase;font-weight:600}
.kpi .k-value{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--green);
  letter-spacing:-1px;margin-top:6px;text-shadow:0 0 14px rgba(61,245,159,.4)}
.kpi .k-sub{font-family:var(--mono);font-size:10px;color:var(--disp-dim);margin-top:4px}
.kpi.good .k-value{color:var(--green)}
.kpi.warn .k-value{color:var(--or-hi);text-shadow:0 0 14px rgba(255,107,46,.35)}
.kpi.bad .k-value{color:#FF6F5A;text-shadow:0 0 14px rgba(255,111,90,.35)}
.trend-up,.pct-up{color:var(--green)}
.trend-down,.pct-down{color:var(--or-hi)}
.trend-flat{color:var(--disp-dim2)}

/* ── content cards on the dark ground ── */
.card,.chart-card,.summary-card,.group-card,.finder-card,.ivr-card,.upload-card{
  background:linear-gradient(180deg,var(--paper-hi) 0%,var(--paper) 45%,var(--paper-lo) 100%);
  border:1px solid var(--edge);border-radius:var(--r);padding:18px 20px;margin-bottom:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 36px -18px rgba(0,0,0,.55)}
.chart-wrap{position:relative;min-height:200px;margin-bottom:8px}
.card h3,.chart-card h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:12px}
.card .desc{font-size:12.5px;color:var(--grey);margin-bottom:14px;line-height:1.5}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:20px}
.chart-card .h{font-family:var(--mono);font-size:9px;color:var(--grey);text-transform:uppercase;
  letter-spacing:.12em;margin-bottom:10px}

/* ── summary tiles (dark displays) ── */
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
.summary-card{padding:15px 18px;background:linear-gradient(180deg,var(--face-hi),var(--face));
  box-shadow:inset 0 2px 7px rgba(0,0,0,.7),inset 0 0 0 1px rgba(61,245,159,.08);border:none}
.summary-value{font-family:var(--mono);font-size:24px;font-weight:600;color:var(--green);
  letter-spacing:-1px;text-shadow:0 0 14px rgba(61,245,159,.4)}
.summary-value.warn{color:var(--or-hi);text-shadow:0 0 14px rgba(255,107,46,.35)}
.summary-label{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--disp-dim2);
  text-transform:uppercase;font-weight:600;margin-top:5px}

/* ── progress bars (service level, utilization, rate) ── */
.sl-bar,.rate-bar,.util-bar{position:relative;height:8px;border-radius:5px;overflow:hidden;min-width:80px;
  background:rgba(0,0,0,.12);box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.sl-bar>span,.rate-bar>span,.util-bar>span{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#2FD98C,var(--green));box-shadow:0 0 8px rgba(61,245,159,.5)}
.sl-bar.mid>span,.rate-bar.mid>span,.util-bar.mid>span{background:linear-gradient(90deg,#F0A500,#FFC742)}
.sl-bar.low>span,.rate-bar.low>span,.util-bar.low>span{background:linear-gradient(90deg,var(--or-lo),var(--or-hi))}

/* ── row / cell action buttons ── */
.actions{display:flex;gap:8px;align-items:center}
.actions a,.actions button,.actions .del,.btn-del,.btn-join,.btn-play,.btn-call,.btn-record,
.btn-upload,.mini-btn,.play,.row-actions .del{
  display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 11px;border-radius:6px;cursor:pointer;text-decoration:none;
  border:1px solid var(--edge);color:var(--ink-2);
  background:linear-gradient(180deg,#FDFEFE,#D8DFE4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1.5px 0 rgba(0,0,0,.25)}
.actions a:active,.actions button:active,.mini-btn:active,.btn-play:active,.btn-join:active{transform:translateY(1px)}
.actions .del,.btn-del,.row-actions .del{color:#B02A1A;border-color:#E08072}
.btn-join,.btn-play,.btn-call,.btn-record,.mini-btn.active{color:#0B6B41;border-color:#6BCB9C}
.btn-join:hover,.btn-play:hover{border-color:var(--green)}
.mini-btn.active{background:linear-gradient(180deg,rgba(61,245,159,.2),rgba(61,245,159,.08))}