/* IWC Flow - one stylesheet. Colors come ONLY from the variables below (light/dark). Logical properties => RTL works. */
:root {
  --bg: #f5f6f8; --surface: #ffffff; --surface-2: #eff1f4; --text: #18202c; --muted: #647084; --line: #e1e5ea;
  --accent: #0f766e; --accent-ink: #ffffff; --focus: #0f766e66;
  --ok: #15803d;     --ok-bg: #e5f5ea;
  --warn: #a85a06;   --warn-bg: #fcefd8;
  --bad: #b42318;    --bad-bg: #fde7e4;
  --info: #1d4ed8;   --info-bg: #e5edfc;
  --accent-t: #6d28d9; --accent-t-bg: #eee7fb;
  --muted-t: #5b6678; --muted-bg: #edf0f3;
  --shadow: 0 1px 2px var(--scrim-soft);
  --scrim: #000000;
  --scrim-soft: #10182810;
  --radius: 10px;
  --side-w: 224px; --side-w-min: 60px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Naskh Arabic", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html[data-theme="dark"] {
  --bg: #0d1116; --surface: #141a22; --surface-2: #1a222c; --text: #e5e9ef; --muted: #8b97a8; --line: #252f3b;
  --accent: #2dd4bf; --accent-ink: #04201c; --focus: #2dd4bf55;
  --ok: #4ade80;   --ok-bg: #12301f;
  --warn: #fbbf24; --warn-bg: #3a2b0c;
  --bad: #f87171;  --bad-bg: #3c1717;
  --info: #7aa2ff; --info-bg: #172640;
  --accent-t: #c4a1ff; --accent-t-bg: #2b1e45;
  --muted-t: #9aa6b8; --muted-bg: #1f2833;
  --shadow: none;
  --scrim-soft: #00000000;
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 12.5px; }
h1, h2 { margin: 0; font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.end { text-align: end; }
.icon { width: 18px; height: 18px; flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- shell ---- */
body.app { display: flex; min-height: 100vh; }
.side { width: var(--side-w); background: var(--surface); border-inline-end: 1px solid var(--line); display: flex; flex-direction: column; padding: 12px 8px; gap: 8px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px; color: var(--text); font-weight: 600; font-size: 15px; }
.brand:hover { text-decoration: none; }
.brand-mark { background: var(--accent); color: var(--accent-ink); border-radius: 7px; padding: 3px 7px; font-size: 12px; letter-spacing: .04em; }
.brand-lg { font-size: 22px; justify-content: center; margin-block-end: 18px; }
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--muted); background: none; border: 0; font: inherit; cursor: pointer; width: 100%; text-align: start; }
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.is-on { background: var(--accent-t-bg); color: var(--accent); }
.side-toggle .flip { transition: transform .15s; }
[dir="rtl"] .side-toggle .flip { transform: scaleX(-1); }
.nav-collapsed .side { width: var(--side-w-min); }
.nav-collapsed .side-label { display: none; }
.nav-collapsed .side-toggle .flip { transform: scaleX(-1); }
[dir="rtl"].nav-collapsed .side-toggle .flip { transform: none; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-block-end: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 5; }
.top-title { font-size: 17px; }
.top-tools { display: flex; align-items: center; gap: 8px; }
.who { display: inline-flex; align-items: center; gap: 8px; padding-inline: 6px; }
.who-name { font-weight: 500; }
.content { padding: 20px; max-width: 1280px; width: 100%; }
.only-dark { display: none; }
html[data-theme="dark"] .only-dark { display: inline; }
html[data-theme="dark"] .only-light { display: none; }
kbd { font: 11px var(--mono); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--muted); }

/* ---- primitives ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-block-end: 16px; }
.card.flush { padding: 0; overflow-x: auto; }
.card.narrow { max-width: 520px; }
.card-title { font-size: 15px; margin-block-end: 12px; }
.grid.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-block-end: 16px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat-label { color: var(--muted); font-size: 12px; }
.stat-value { font-size: 30px; font-weight: 600; line-height: 1.2; margin-block-start: 4px; }
.stat-hint { color: var(--muted); font-size: 12px; }
.toolbar { display: flex; align-items: center; gap: 8px; margin-block-end: 12px; flex-wrap: wrap; }
.toolbar-end { align-items: flex-end; }
.player { width: 100%; max-width: 560px; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); }
.btn-danger { color: var(--bad); border-color: var(--bad); background: transparent; }
.btn-danger:hover { background: var(--bad-bg); }
.btn.is-disabled { opacity: .45; pointer-events: none; }
.chip { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 6px; padding: 3px 7px; font: 600 11px var(--font); cursor: pointer; }
.chip.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.lang { display: inline-flex; gap: 4px; }

.flash { padding: 10px 14px; border-radius: 8px; margin-block-end: 14px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; }

/* ONE status-color map: .st-* is used by badges, flash boxes and table rows. */
.st-ok     { color: var(--ok);       background: var(--ok-bg); }
.st-warn   { color: var(--warn);     background: var(--warn-bg); }
.st-bad    { color: var(--bad);      background: var(--bad-bg); }
.st-info   { color: var(--info);     background: var(--info-bg); }
.st-accent { color: var(--accent-t); background: var(--accent-t-bg); }
.st-muted  { color: var(--muted-t);  background: var(--muted-bg); }
tr.row.st-ok, tr.row.st-warn, tr.row.st-bad, tr.row.st-info, tr.row.st-accent, tr.row.st-muted { background: transparent; }
tr.row.st-ok > td:first-child     { box-shadow: inset 3px 0 0 var(--ok); }
tr.row.st-warn > td:first-child   { box-shadow: inset 3px 0 0 var(--warn); }
tr.row.st-bad > td:first-child    { box-shadow: inset 3px 0 0 var(--bad); }
tr.row.st-info > td:first-child   { box-shadow: inset 3px 0 0 var(--info); }
tr.row.st-accent > td:first-child { box-shadow: inset 3px 0 0 var(--accent-t); }
tr.row.st-muted > td:first-child  { box-shadow: inset 3px 0 0 var(--line); }
[dir="rtl"] tr.row > td:first-child { box-shadow: none; }
[dir="rtl"] tr.row.st-ok > td:first-child     { box-shadow: inset -3px 0 0 var(--ok); }
[dir="rtl"] tr.row.st-warn > td:first-child   { box-shadow: inset -3px 0 0 var(--warn); }
[dir="rtl"] tr.row.st-bad > td:first-child    { box-shadow: inset -3px 0 0 var(--bad); }
[dir="rtl"] tr.row.st-info > td:first-child   { box-shadow: inset -3px 0 0 var(--info); }
[dir="rtl"] tr.row.st-accent > td:first-child { box-shadow: inset -3px 0 0 var(--accent-t); }
[dir="rtl"] tr.row.st-muted > td:first-child  { box-shadow: inset -3px 0 0 var(--line); }

/* ---- tables ---- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: start; font-weight: 500; font-size: 12px; color: var(--muted); padding: 9px 14px; border-block-end: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 7px 14px; border-block-end: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr:last-child td { border-block-end: 0; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl td.end { white-space: nowrap; }
.tbl td.end form { display: inline-block; margin: 0; }
.tbl td.end > * { vertical-align: middle; }
input[type="checkbox"] { accent-color: var(--accent); }
.tbl .empty { text-align: center; color: var(--muted); padding: 28px; }
.json { display: inline-block; max-width: min(240px, 13vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--muted); }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
/* routing engine R1 */
.kv + .form { margin-block-start: 18px; }
.card.flush .card-title { padding: 16px 16px 0; margin-block-end: 8px; }

/* ---- forms ---- */
.form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12px; color: var(--muted); }
.input { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; width: 100%; }
.input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.input.is-invalid { border-color: var(--bad); }
.error { color: var(--bad); font-size: 12px; }
.hint { color: var(--muted); font-size: 12px; }
.field[hidden], .hint[hidden] { display: none; }
.check { display: flex; align-items: center; gap: 8px; }

/* ---- guest ---- */
body.guest { display: grid; place-items: center; min-height: 100vh; padding: 20px; position: relative; }
.guest-box { width: 100%; max-width: 400px; text-align: center; }
.guest-box .card, .guest-box .form { text-align: start; }
.guest-tools { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; display: flex; gap: 8px; align-items: center; }
.error-code { font-size: 64px; font-weight: 700; color: var(--muted); }

/* ---- command palette ---- */
.palette { position: fixed; inset: 0; background: color-mix(in srgb, var(--scrim) 60%, transparent); display: grid; place-items: start center; padding-block-start: 14vh; z-index: 50; }
.palette[hidden] { display: none; }
.palette-box { width: min(520px, 92vw); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.palette-list { list-style: none; margin: 8px 0 0; padding: 0; }
.palette-list a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text); }
.palette-list li.is-on a, .palette-list a:hover { background: var(--accent-t-bg); text-decoration: none; }
.palette-empty { color: var(--muted); padding: 8px 10px; margin: 0; }

@media (max-width: 760px) {
  .hide-sm { display: none; }
  .side { width: var(--side-w-min); }
  .side-label { display: none; }
  .content { padding: 14px; }
  .who-name { display: none; }
}

/* ---- live monitors (phase 3c) ---- */
.live-updated { color: var(--muted); font-size: 12px; margin-inline-start: auto; }
.live-empty { text-align: center; color: var(--muted); padding: 28px; margin: 0; }
.live-empty[hidden], .flash[hidden] { display: none; }

/* ---- live monitor tabs (phase 3c-2) ---- */
.tabs { display: flex; gap: 4px; margin-block-end: 12px; border-block-end: 1px solid var(--line); }
.tab { padding: 8px 14px; color: var(--muted); border-block-end: 2px solid transparent; margin-block-end: -1px; }
.tab:hover { color: var(--text); text-decoration: none; }
.tab.is-on { color: var(--accent); border-block-end-color: var(--accent); }

/* ---- agent softphone (phase 3d-2) ---- */
.softphone { max-width: 520px; }
.sp-caller { font-size: 1.6rem; font-weight: 600; margin-block: 12px 4px; overflow-wrap: anywhere; }
.sp-note { color: var(--muted); margin-block: 0 14px; }

/* ---- agent commands (phase 3d-3a) ---- */
.btn-sm { padding: 3px 8px; font-size: 12px; }
/* agent readiness A1 */
/* agent panel A1b */
.sp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; max-width: 980px; }
.sp-layout .softphone { max-width: none; }
.sp-head { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; flex-wrap: wrap; }
.sp-name { font-size: 1.15rem; }
.sp-timer { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.sp-main { min-block-size: 230px; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 18px; }
.sp-actions .btn { padding: 11px 22px; font-size: 1rem; justify-content: center; }
.sp-dial-title { font-weight: 600; margin-block: 0 2px; }
.sp-dial-hint { color: var(--muted); font-size: 12px; margin-block: 0 12px; }
.sp-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sp-keypad .btn { justify-content: center; font-size: 1.4rem; font-weight: 600; padding: 15px 0; }
.btn-key { background: var(--surface-2); border-color: var(--line); }
.btn-key:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn-outline { background: transparent; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 820px) { .sp-layout { grid-template-columns: minmax(0, 1fr); } }
.cmd-cell { white-space: nowrap; }
.cmd-cell .btn + .btn { margin-inline-start: 6px; }
.cmd-reason { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; color: var(--muted); font-size: 12px; }
.cmd-reason .field { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
.cmd-reason .input { width: auto; padding: 4px 8px; }
.cmd-note { font-size: 12px; color: var(--muted); }

/* ---- dashboard (phase 5e1) ---- */
.dash-section { font-size: 13px; font-weight: 600; color: var(--muted); margin-block: 4px 8px; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-sys { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }

/* ---- softphone controls (phase 3d-3b) ---- */
/* a display rule on a component (.btn is inline-flex) must never defeat the hidden attribute */
[hidden] { display: none !important; }
.sp-pause { align-items: center; gap: 10px; margin-top: 14px; max-width: 280px; }
/* agent panel A1b pause */
.sp-pause .cmd-reason { margin-inline-start: 0; }

/* ---- call history (phase 4a) ---- */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; }
.filters-actions { display: flex; align-items: flex-end; }

/* ---- reports ---- */
.chart { margin: 0; }
.chart-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; font-weight: 600; margin-block-end: 8px; }
.chart-key { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.key-offered { background: var(--muted); opacity: .35; }
.key-answered { background: var(--accent); }
.chart-svg { display: block; width: 100%; height: auto; max-height: 200px; }
.chart-axis { stroke: var(--line); stroke-width: 1; }
.bar-offered { fill: var(--muted); opacity: .35; }
.bar-answered { fill: var(--accent); }
.chart-label { fill: var(--muted); font-size: 6px; }

/* ---- recordings list ---- */
.player-row { width: 220px; max-width: 100%; vertical-align: middle; margin-inline-end: 8px; }

/* ---- exports ---- */
.export-links { display: inline-flex; gap: 6px; }
.tabs-end { margin-inline-start: auto; display: inline-flex; padding-block-end: 4px; }

/* ---- wallboard (phase 5c) ---- */
body.wallboard .side { display: none; }
body.wallboard .content { max-width: none; padding: 24px; }
body.wallboard .stat-value { font-size: 44px; }
body.wb-full .top { display: none; }
.wb-bar { gap: 14px; }
.wb-center { font-size: 24px; }
.wb-section { font-size: 15px; font-weight: 600; color: var(--muted); margin-block: 8px 10px; }
.wb-queues { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-block-end: 18px; }
.wb-queue { background: var(--surface); border: 1px solid var(--line); border-inline-start: 6px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); }
.wb-tone-ok { border-inline-start-color: var(--ok); }
.wb-tone-warn { border-inline-start-color: var(--warn); }
.wb-tone-bad { border-inline-start-color: var(--bad); }
.wb-tone-info { border-inline-start-color: var(--info); }
.wb-tone-accent { border-inline-start-color: var(--accent-t); }
.wb-tone-muted { border-inline-start-color: var(--line); }
.wb-queue-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wb-queue-name { font-weight: 600; font-size: 18px; overflow-wrap: anywhere; }
.wb-queue-main { display: flex; align-items: baseline; gap: 12px; }
.wb-waiting { font-size: 56px; font-weight: 700; line-height: 1; }
.wb-waiting-label { color: var(--muted); font-size: 16px; }
.wb-wait-row { display: flex; align-items: center; gap: 10px; }
.wb-wait-label { color: var(--muted); font-size: 14px; }
.wb-wait { font-size: 26px; font-weight: 600; border-radius: 8px; }
.wb-wait.st-bad { padding-inline: 10px; }
.wb-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; color: var(--muted); font-size: 12px; }
.wb-mini strong { display: block; font-size: 22px; color: var(--text); }