:root {
  /* ──────────────────────────────────────────────────────────────
     RenTrip Ops color-role system
     Material-style role tokens are the single source of truth for
     colour, communicating brand, hierarchy, state and meaning.
     Legacy tokens (--surface, --text, --accent, --answered…) are kept
     as thin aliases below so no markup or downstream rule must change.
       primary      → brand actions, high-emphasis CTAs
       secondary    → neutral/tonal supporting actions
       surface-*    → app / card / panel / hover / selected layering
       outline-*    → borders and dividers
       success/warning/danger/info → semantic status roles
     ────────────────────────────────────────────────────────────── */

  /* Brand primary — RenTrip blue #00aeef (exact brand anchor).
     Darker derivatives (-strong/-hover) cover active/borders/text-on-light;
     on-primary is near-black for AA-readable text on the bright cyan fill. */
  --color-primary: #00aeef;
  --color-primary-strong: #0073a8;
  --color-primary-hover: #0098d4;
  --color-on-primary: #06283a;
  --color-primary-container: #d7f2fd;
  --color-on-primary-container: #075472;

  /* Secondary / neutral-tonal */
  --color-secondary: #41557a;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #eaf0f9;
  --color-on-secondary-container: #2a3a57;

  /* Surfaces & layering (lowest = flattest → high = most raised/tinted) */
  --color-surface: #ffffff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f8fbff;
  --color-surface-container: #f2f6fd;
  --color-surface-container-high: #eaf1fb;
  --color-on-surface: #0d1117;
  --color-on-surface-variant: #56657f;
  /* Table header surface + text, and the expanded/inline-detail surface */
  --color-table-header: #f5f8ff;
  --color-on-table-header: #324664;
  --color-surface-expanded: #f4f8ff;

  /* Outlines (refined to crisper, lighter hairlines for a premium SaaS feel) */
  --color-outline: #ccd8e8;
  --color-outline-strong: #a4b9d8;
  --color-outline-variant: #e4eaf3;

  /* Semantic status roles.
     Success is RenTrip green #7ed026 darkened to an AA-readable green for
     text/status/borders; --color-success-bright keeps the exact brand lime
     for decorative fills (bars/progress) that don't carry text. */
  --color-success: #3a8214;
  --color-on-success: #ffffff;
  --color-success-container: #eef8e1;
  --color-on-success-container: #2f6a12;
  --color-success-outline: #b4dd86;
  --color-success-bright: #7ed026;

  --color-warning: #ab6b0c;
  --color-on-warning: #ffffff;
  --color-warning-container: #fff8ea;
  --color-on-warning-container: #7f5404;
  --color-warning-outline: #e5cb96;

  --color-danger: #ca2c2c;
  --color-on-danger: #ffffff;
  --color-danger-container: #fff1f1;
  --color-on-danger-container: #8e1f1f;
  --color-danger-outline: #efb1b1;

  /* Info/actions — RenTrip blue, darkened for AA text/links on light. */
  --color-info: #0079be;
  --color-on-info: #ffffff;
  --color-info-container: #e2f4fc;
  --color-on-info-container: #075472;
  --color-info-outline: #a9d9f1;

  /* Brand-cyan focus ring (deepened for a visible indicator) + soft halo. */
  --color-focus-ring: #0091cf;
  /* Soft halo used alongside the solid focus outline / control focus. */
  --color-focus-ring-soft: rgba(0, 174, 239, 0.30);

  /* ── Backward-compatible aliases (legacy token names) ──────────── */
  /* Softer, calmer page background so elevated white cards read as the
     focal surface (premium "operations canvas" feel). */
  --bg: #eef2f8;
  --bg-accent:
    radial-gradient(1100px 560px at 14% -12%, #f5f8ff 0%, transparent 60%),
    radial-gradient(900px 520px at 100% 0%, #eef3fb 0%, transparent 55%),
    linear-gradient(180deg, #eef2f8 0%, #e8edf6 100%);
  --surface: var(--color-surface);
  --surface-alt: var(--color-surface-container);
  --surface-soft: var(--color-surface-container-low);
  --border: var(--color-outline-variant);
  --border-strong: var(--color-outline);
  --text: var(--color-on-surface);
  --muted: var(--color-on-surface-variant);
  --sidebar: #0d1930;
  --sidebar-hover: #18294b;
  --sidebar-active: #214680;
  --focus: var(--color-focus-ring);
  --accent: var(--color-primary);
  --accent-strong: var(--color-primary-strong);
  --answered: var(--color-success);
  --missed: var(--color-danger);
  --transferred: #7b30b8;
  --outbound: var(--color-info);
  --pending: var(--color-warning);
  --missing: #455a64;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  /* Layered, directional shadows read as genuine elevation rather than a flat
     blur — the single biggest "premium" lift across every card/panel/drawer. */
  --shadow-xs: 0 1px 1px rgba(15, 32, 57, 0.04);
  --shadow-soft: 0 1px 2px rgba(15, 32, 57, 0.05), 0 1px 3px rgba(15, 32, 57, 0.04);
  --shadow: 0 1px 2px rgba(15, 32, 57, 0.04), 0 8px 20px -6px rgba(15, 32, 57, 0.10);
  --shadow-raised: 0 1px 2px rgba(15, 32, 57, 0.05), 0 12px 26px -8px rgba(15, 32, 57, 0.14);
  --shadow-hover: 0 2px 4px rgba(15, 32, 57, 0.05), 0 18px 36px -10px rgba(15, 32, 57, 0.18);
  --text-subtle: #66748d;
  --state-success-bg: var(--color-success-container);
  --state-success-border: var(--color-success-outline);
  --state-warning-bg: var(--color-warning-container);
  --state-warning-border: var(--color-warning-outline);
  --state-danger-bg: var(--color-danger-container);
  --state-danger-border: var(--color-danger-outline);
  --state-info-bg: var(--color-info-container);
  --state-info-border: var(--color-info-outline);
  --space-compact: 6px;

  /* ──────────────────────────────────────────────────────────────
     RenTrip Ops typography system
     Single source of truth for fonts, sizes, weights, line-heights
     and tracking. Intended hierarchy (largest/strongest → smallest):
       display / title  → page titles (h1)            : --font-size-2xl / --title-1
       section heading  → card + panel titles (h2/h3) : --font-size-lg / --title-2 / --title-3
       body             → default reading + controls   : --font-size-md
       label / caption  → eyebrows, KPI/table labels   : --font-size-sm / --font-size-xs (uppercase)
       mono / numeric   → KPI values, durations, times : --font-family-mono + tabular-nums
     Existing tokens (--font-size, --font-size-sm/-xs, --title-1/2/3)
     are kept for backward compatibility.
     ────────────────────────────────────────────────────────────── */
  --font-family-sans: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-family-mono: 'SF Mono', Menlo, Consolas, ui-monospace, monospace;

  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 20px;
  --font-size-2xl: 28px;
  --font-size-3xl: 34px;

  --line-height-tight: 1.2;
  --line-height-normal: 1.45;
  --line-height-relaxed: 1.6;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --letter-spacing-label: .05em;
  --letter-spacing-title: -.015em;

  /* Backward-compatible aliases */
  --font-size: var(--font-size-md);
  --title-1: clamp(1.55rem, 2.1vw, 2.05rem);
  --title-2: 1.15rem;
  --title-3: 1rem;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  background: var(--bg-accent);
  color: var(--text);
}

.top-alert { background: #ffe9b3; border-bottom: 1px solid #efcc63; padding: var(--space-2) var(--space-3); font-weight: 700; }
.layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: var(--space-3); max-width: 1700px; margin: 0 auto; padding: var(--space-3); }
.ops-sidebar {
  background: linear-gradient(165deg, #0c172d 0%, #112141 60%, #15294d 100%);
  color: #cddcf6;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(151, 182, 236, 0.22);
  box-shadow: var(--shadow);
  padding: var(--space-3);
  position: sticky;
  top: 12px;
  height: fit-content;
}
.brand { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(151, 182, 236, 0.14); }
.brand-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(145deg, #00aeef, #0073a8); display: grid; place-items: center; font-weight: 800; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 6px 14px rgba(20, 50, 110, 0.4); }
.brand-title { margin: 0; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); letter-spacing: -.01em; }
.brand-subtitle { margin: 2px 0 0; color: #93abd4; font-size: var(--font-size-xs); }
.sidebar-toggle { display: none; width: 100%; margin-bottom: var(--space-2); }
.ops-sidebar ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.nav-link { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; text-decoration: none; background: transparent; border: 1px solid transparent; color: #c2d2ee; padding: 10px 12px; border-radius: 10px; font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.nav-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; border-color: rgba(138, 178, 243, 0.18); }
.nav-link.active { background: linear-gradient(100deg, rgba(0, 174, 239, 0.30), rgba(0, 115, 168, 0.18)); border-color: rgba(138, 178, 243, 0.4); color: #fff; box-shadow: inset 0 0 0 1px rgba(138, 178, 243, 0.12); }
.nav-link.active::before { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 999px; background: linear-gradient(180deg, #5fd0ff, #00aeef); }
.nav-link.active .nav-icon { opacity: 1; color: #cfe0ff; }

main { min-width: 0; }
.card, .state-card, .kpi-card, .focus-card, .dept-card, .detail-card, .admin-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.card:hover, .state-card:hover, .kpi-card:hover, .focus-card:hover, .dept-card:hover, .detail-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-strong);
}
.card + .card { margin-top: var(--space-3); }

h1, h2, h3 { letter-spacing: var(--letter-spacing-title); line-height: var(--line-height-tight); }
h1 { margin: 6px 0; font-size: var(--title-1); font-weight: var(--font-weight-bold); }
h2 { margin: 0 0 12px; font-size: var(--title-2); font-weight: var(--font-weight-bold); }
h3 { margin: 16px 0 8px; font-size: var(--title-3); font-weight: var(--font-weight-semibold); }
p { margin: 0 0 8px; }
code { font-family: var(--font-family-mono); font-size: 0.85em; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }

.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: 16px 18px; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); font-size: var(--font-size-xs); color: var(--muted); font-weight: var(--font-weight-bold); }
.topbar-heading { min-width: 0; }
.topbar-heading h1 { margin: 0; }
.topbar-subtitle { margin: 4px 0 0; color: var(--text-subtle); font-size: var(--font-size-sm); }
.phase, .viewer, .pbx-note, .muted, .kpi-helper { color: var(--text-subtle); }
.topbar-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
.topbar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; justify-content: flex-end; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.topbar-meta .viewer { margin: 0; font-weight: var(--font-weight-semibold); color: var(--text); font-size: var(--font-size-sm); }
.topbar-meta .permission-note { margin: 0; display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); }
.topbar-meta #logout { padding: 7px 14px; }
.global-search { position: relative; min-width: min(380px, 100%); flex: 1 1 320px; }
.global-search::before { content: "⌕"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 16px; pointer-events: none; z-index: 1; }
.global-search input { width: 100%; background: var(--surface-soft); padding-left: 34px; border-radius: 12px; }
.global-search input:focus-visible { background: var(--color-surface); }
.pbx-note { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--space-3); padding: 7px 14px; border: 1px solid var(--state-success-border); background: var(--state-success-bg); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--color-on-success-container); }
.pbx-note::before { content: "🛡"; font-size: 14px; }
.global-search-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 25; background: var(--color-surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow); padding: 10px; display: grid; gap: 10px; max-height: 360px; overflow-y: auto; }
.global-search-group { display: grid; gap: 6px; }
.global-search-label { margin: 0; font-size: var(--font-size-xs); color: var(--muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); font-weight: var(--font-weight-bold); }
.global-search-result { width: 100%; text-align: left; border: 1px solid var(--border); background: var(--surface-soft); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; cursor: pointer; }
.global-search-result:hover, .global-search-result:focus-visible { border-color: var(--border-strong); background: var(--color-surface); outline: none; }
.global-search-primary { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.global-search-title { font-weight: 600; color: var(--text); }
.global-search-pill { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-subtle); border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 8px; background: var(--color-surface); flex-shrink: 0; }
.global-search-meta, .global-search-helper { font-size: 12px; color: var(--text-subtle); }
.global-search-empty { margin: 0; color: var(--muted); font-weight: 600; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.kpi-card { position: relative; background: var(--surface); overflow: hidden; }
.kpi-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--color-primary), var(--color-primary-strong)); }
.kpi-label { margin: 0; color: var(--muted); font-size: var(--font-size-xs); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; font-weight: var(--font-weight-bold); }
.kpi-value { font-size: var(--font-size-2xl); display: block; margin-top: var(--space-1); font-weight: var(--font-weight-bold); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.filters { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 10px; align-items: end; }
input, select, textarea, button, .button-link {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  background: var(--color-surface);
  color: var(--text);
}
input:hover, select:hover, textarea:hover { border-color: var(--color-outline-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--focus); }
textarea { min-height: 96px; width: 100%; resize: vertical; }
label { font-weight: var(--font-weight-semibold); color: var(--muted); }
/* Default control = neutral / medium-emphasis. Filled-primary, tonal and
   destructive variants are layered on top in the button-hierarchy block. */
button, .button-link {
  cursor: pointer;
  background: var(--color-surface-container-low);
  border-color: var(--color-outline);
  color: var(--color-on-surface);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
button:hover:not(:disabled), .button-link:hover { border-color: var(--color-outline-strong); background: var(--color-surface-container-high); box-shadow: var(--shadow-soft); }
button:active, .button-link:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .nav-link:focus-visible, .button-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.ops-row:focus-within, .simple-table tbody tr:focus-within { outline: 2px solid var(--focus); outline-offset: -1px; }

.split { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-2); margin: var(--space-3) 0; align-items: start; }
.call-card { border: 1px solid var(--border); border-radius: 10px; padding: var(--space-2); background: var(--surface-alt); margin-top: 10px; }
.pill { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--state-info-bg); display: inline-block; border: 1px solid var(--state-info-border); text-transform: capitalize; }
.pill.tone-answered { background: var(--state-success-bg); border-color: var(--state-success-border); }
.pill.tone-missed { background: var(--state-danger-bg); border-color: var(--state-danger-border); }
.pill.tone-transferred, .pill.tone-outbound { background: var(--state-info-bg); border-color: var(--state-info-border); }
.pill.tone-pending, .pill.tone-missing { background: var(--state-warning-bg); border-color: var(--state-warning-border); }
.tone-answered { color: var(--answered); }
.tone-missed { color: var(--missed); }
.tone-transferred { color: var(--transferred); }
.tone-outbound { color: var(--outbound); }
.tone-pending { color: var(--pending); }
.tone-missing { color: var(--missing); }

.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--color-surface); }
.simple-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.simple-table th, .simple-table td { border-bottom: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.simple-table th { background: var(--color-surface-container); color: #3a4a66; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); font-weight: var(--font-weight-bold); position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--border-strong); }
.simple-table tbody tr:nth-child(even) { background: var(--color-surface-container-low); }
.simple-table tbody tr:hover { background: var(--color-surface-container-high); }
.simple-table tbody tr:last-child td { border-bottom: 0; }
.row-selected { background: var(--color-primary-container) !important; box-shadow: inset 0 0 0 1px var(--color-outline-strong); }
.empty-state { text-align: center; }

.ops-workflow { grid-template-columns: minmax(220px, 280px) minmax(420px, 1.35fr) minmax(260px, 1fr); }
.ops-list { display: grid; gap: 10px; }
.ops-list-head, .ops-row { display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr auto; gap: 10px; align-items: start; }
.ops-list-head { font-weight: 700; color: var(--muted); border-bottom:1px solid var(--border); padding: 0 8px 8px; }
.ops-list-head p { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.ops-row { border:1px solid var(--border); border-left:4px solid transparent; border-radius:12px; padding:12px; background: var(--surface-soft); box-shadow: var(--shadow-soft); }
.ops-row:hover { border-color: #bfd0ea; transform: translateY(-1px); transition: transform .08s ease; }
.ops-row.tone-missed { border-left-color: var(--missed); }
.ops-row.tone-answered { border-left-color: var(--answered); }
.ops-row.tone-outbound { border-left-color: var(--outbound); }
.ops-row.tone-pending, .ops-row.tone-transferred { border-left-color: var(--pending); }
.ops-label { margin:0; font-size:var(--font-size-xs); color:var(--muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); }
.muted { font-size: var(--font-size-sm); margin: 4px 0 0; }

ul { padding-left: 18px; }
li { margin-bottom: 6px; }

.admin-actions { display: grid; gap: 10px; margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: center; }
.admin-actions label { display: flex; gap: 8px; align-items: center; font-weight: 600; color: var(--muted); }

.event-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.event { background: var(--surface-alt); border-left: 4px solid var(--color-primary); padding: var(--space-1) var(--space-2); }

@media (max-width: 1280px) {
  .ops-workflow { grid-template-columns: minmax(240px, 0.95fr) minmax(440px, 1.35fr); }
  .ops-workflow > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 1080px) {
  .layout, .split, .ops-workflow { grid-template-columns: 1fr; }
  .ops-sidebar { position: static; }
  .sidebar-toggle { display: block; }
  .ops-sidebar nav { display: none; }
  .ops-sidebar.collapsed nav { display: none; }
  .ops-sidebar:not(.collapsed) nav { display: block; }
  .simple-table { min-width: 760px; }
}
@media (max-width: 680px) {
  .layout { padding: var(--space-2); }
  .kpi-grid { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; }
  .topbar-actions { justify-content: flex-start; }
  input, select, textarea, button, .button-link { font-size: 16px; }
}
.dept-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 12px; }
.dept-card { border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--surface-alt); }
.progress-track { width:100%; height:10px; background:var(--color-outline-variant); border-radius:999px; overflow:hidden; }
.progress-fill { display:block; height:100%; background:linear-gradient(90deg,#00aeef,#7ed026); }
.traffic-list { display:grid; gap:8px; }
.traffic-row { display:grid; grid-template-columns: 70px 1fr 40px; align-items:center; gap:10px; }

.call-filters { grid-template-columns: 1fr; gap: 12px; }
.filter-field { display: grid; gap: 6px; font-weight: 600; color: var(--muted); }
/* Secondary / tonal — useful but not the primary action (e.g. Cancel). */
.button-secondary { background: var(--color-secondary-container); border-color: var(--color-outline-variant); color: var(--color-on-secondary-container); }
.button-secondary:hover:not(:disabled) { background: var(--color-surface-container-high); border-color: var(--color-outline-strong); }
.detail-panel { display: grid; gap: 10px; }
.detail-card { background: var(--surface-soft); }
.detail-summary-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.detail-grid p { margin: 0; }
.detail-list { margin: 0; }
.detail-timeline { list-style: none; padding: 0; display: grid; gap: 8px; }
.detail-timeline li { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--color-surface); margin-bottom: 0; }
.timeline-empty { color: var(--text-subtle); font-style: italic; }
.participant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.participant-group { border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: var(--color-surface); }
.participant-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.participant-list li { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.participant-meta { color: var(--text-subtle); font-size: 12px; }
.entity-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.entity-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--color-surface); }
.entity-empty { color: var(--muted); }
.inline-form { display: grid; gap: 8px; margin-top: 10px; }
.two-col-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form input, .inline-form textarea, .inline-form select, .admin-form input, .admin-form select { width: 100%; }
.inline-form .form-actions, .admin-form .form-actions { grid-column: 1 / -1; }
.technical-card { opacity: .85; }
.ops-action { display: flex; align-items: center; justify-content: flex-end; }

@media (max-width: 1366px) {
  .ops-list-head, .ops-row { grid-template-columns: 1.1fr 1fr 1fr 1fr auto; }
}

@media (max-width: 1080px) {
  .participant-grid, .two-col-form { grid-template-columns: 1fr; }
}

.executive-kpi-grid .kpi-card { min-height: 130px; }
.dashboard-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.dashboard-section { margin-top: 0; }
.dashboard-agent-table { min-width: 640px; }
.focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.focus-card { background: var(--surface-soft); }
.focus-card.danger { border-left: 4px solid var(--missed); }
.focus-card.warning { border-left: 4px solid var(--pending); }
.focus-card.neutral { border-left: 4px solid var(--outbound); }
.focus-value { font-size: 1.8rem; font-weight: 700; margin: 6px 0; }

@media (max-width: 1366px) {
  .dashboard-overview-grid { grid-template-columns: 1fr; }
  .focus-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .focus-grid { grid-template-columns: 1fr; }
}

/* --- Operational analytics Dashboard (PR170) ----------------------------- */
.dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.dashboard-header-actions { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.health-pill { cursor: pointer; border: 1px solid var(--border-strong); font: inherit; }
.updating-pill { font-size: var(--font-size-xs); color: var(--muted); padding: 4px 10px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border); }

.dashboard-period { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0 var(--space-3); }
.period-btn { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 14px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.period-btn:hover { background: var(--surface-soft); }
.period-btn.is-active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary-strong); }
.period-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.analytics-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.analytics-kpi { position: relative; display: grid; gap: 4px; align-content: start; }
.analytics-kpi-delta { min-height: 22px; }
.delta-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); }
.delta-chip.is-good { color: var(--color-on-success-container); background: var(--color-success-container); border-color: var(--color-success-outline); }
.delta-chip.is-bad { color: var(--color-on-warning-container); background: var(--color-warning-container); border-color: var(--color-warning-outline); }
.delta-chip.is-flat, .delta-chip.is-none { color: var(--muted); background: var(--surface-soft); border-color: var(--border); }

.dashboard-inline-error { display: flex; align-items: center; gap: 8px; color: var(--color-on-danger-container); background: var(--color-danger-container); border: 1px solid var(--color-danger-outline); border-radius: var(--radius-sm); padding: 8px 12px; margin: 0 0 var(--space-2); }
.link-button { background: none; border: none; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

.dashboard-state-panel { display: grid; gap: 8px; justify-items: start; }
.dashboard-error-panel { border-left: 4px solid var(--missed); }
.dashboard-spinner { width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--color-primary); animation: dashboard-spin 0.8s linear infinite; }
@keyframes dashboard-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dashboard-spinner { animation: none; } }
.dashboard-empty-note { border-left: 4px solid var(--pending); }

.dashboard-charts-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-3); margin-bottom: var(--space-3); }
.outcome-donut-wrap { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.outcome-donut { width: 150px; height: 150px; flex: 0 0 auto; }
.donut-total { font-size: 26px; font-weight: var(--font-weight-bold); fill: var(--text); }
.donut-total-label { font-size: 11px; fill: var(--muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); }
.outcome-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 160px; flex: 1 1 160px; }
.outcome-legend li { display: flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.legend-label { flex: 1 1 auto; }
.legend-value { font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; display: inline-flex; gap: 6px; align-items: baseline; }
.legend-pct { color: var(--muted); font-weight: var(--font-weight-medium); font-size: var(--font-size-xs); }

.bucket-chart { display: flex; align-items: flex-end; gap: 4px; height: 140px; overflow-x: auto; padding-bottom: 4px; }
.bucket-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 0 14px; min-width: 14px; height: 100%; }
.bucket-bar { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 110px; background: var(--surface-soft); border-radius: 4px; overflow: hidden; }
.bucket-seg { display: block; width: 100%; }
.bucket-seg.seg-answered { background: var(--answered); }
.bucket-seg.seg-missed { background: var(--missed); }
.bucket-label { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bucket-legend { display: flex; gap: var(--space-3); margin-top: 8px; font-size: var(--font-size-xs); color: var(--muted); }
.bucket-legend span { display: inline-flex; align-items: center; gap: 6px; }

.dept-pickup-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.dept-pickup-value { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

.self-perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.self-perf-stat { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: grid; gap: 4px; }
.self-perf-value { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.self-perf-label { font-size: var(--font-size-xs); color: var(--muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); }

@media (max-width: 1366px) {
  .dashboard-charts-grid { grid-template-columns: 1fr; }
}

.admin-control-header { background: linear-gradient(180deg, var(--color-surface), #f7faff); }
.admin-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.settings-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin-form { background: var(--surface-soft); }
.admin-form h3 { margin-top: 0; }
.check-inline { display: flex; align-items: center; gap: 8px; }
.empty-state-copy p { margin: 6px 0 0; }
.admin-table tbody tr:hover { background: var(--color-surface-container-low); }

@media (max-width: 1200px) {
  .admin-kpi-grid, .settings-card-grid { grid-template-columns: 1fr; }
}

.app-shell {
  min-height: 100vh;
  padding-bottom: var(--space-4);
}

.state-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.state-shell .state-card {
  width: min(560px, 100%);
  text-align: center;
}

.state-actions {
  margin-top: var(--space-3);
  display: flex;
  justify-content: center;
}

.empty-state, .empty-state-copy {
  background: var(--surface-soft);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: var(--space-3);
}

.guidance-card {
  text-align: left;
}

.guidance-card h3 {
  margin-top: 12px;
}

.setup-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.empty-state-actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.loading-dots {
  display: inline-flex;
  gap: 8px;
  margin-top: 10px;
}

.loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-primary);
  animation: pulse 1.05s infinite ease-in-out;
}

.loading-dots span:nth-child(2) { animation-delay: .15s; }
.loading-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes pulse {
  0%, 80%, 100% { opacity: .35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.nav-link,
button,
.button-link,
.ops-row,
.card,
.state-card {
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .12s ease;
}

.card:hover {
  box-shadow: 0 14px 26px rgba(15, 32, 57, 0.1);
}

@media (max-width: 1080px) {
  .ops-sidebar {
    top: 0;
  }

  .ops-sidebar nav {
    margin-top: 8px;
  }

  .sidebar-toggle {
    display: block;
    font-weight: 700;
  }
}

.page-action-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.page-action-bar.compact { margin-bottom: 10px; padding: 10px 12px; background: var(--surface-soft); }
.page-action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.call-log-period-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.call-log-period { margin: 0; }
.call-log-period-selected { font-size: var(--font-size-xs); color: var(--text-subtle); }
.call-log-period-selected strong { color: var(--text); }
.filter-chip-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; align-items: center; }
.filter-chip { border: 1px solid var(--state-info-border); background: var(--state-info-bg); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
.selected-context-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.next-action-list { display: grid; gap: 4px; color: var(--text-subtle); font-size: 13px; }

@media (max-width: 760px) {
  .page-action-bar { align-items: flex-start; }
}

.role-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--state-info-border);
  background: var(--state-info-bg);
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  margin-right: 6px;
}

.permission-note {
  margin: 0;
  color: var(--text-subtle);
  font-size: 13px;
}

.readonly-banner {
  margin: 6px 0;
  padding: 8px 10px;
  border: 1px solid var(--state-warning-border);
  background: var(--state-warning-bg);
  border-radius: 10px;
  color: var(--text);
}

.scope-hint {
  margin: 4px 0 0;
  color: var(--text-subtle);
  font-size: 13px;
}

.insight-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.insight-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface-soft); display: grid; gap: 8px; align-content: start; }
.insight-severity { font-weight: 700; }
.drilldown-action { width: 100%; }
.metric-helper { color: var(--text-subtle); font-size: 13px; margin: 0; }

@media (max-width: 1366px) {
  .insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .insight-grid { grid-template-columns: 1fr; }
}

.action-message,.action-inline-status{border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:var(--surface-alt);margin:8px 0;}
.action-message-success{border-color:var(--state-success-border);background:var(--state-success-bg);color:var(--answered);}
.action-message-error{border-color:var(--state-danger-border);background:var(--state-danger-bg);color:var(--missed);}
.action-message-warning{border-color:var(--state-warning-border);background:var(--state-warning-bg);color:var(--pending);}
.is-saving{opacity:.8;}
/* Destructive — visually distinct (danger tint), but not an aggressive red
   fill. Loud solid-red is reserved for genuinely dangerous confirmations. */
.destructive-action { background: var(--color-danger-container); border-color: var(--color-danger-outline); color: var(--color-danger); }
.destructive-action:hover:not(:disabled) { border-color: var(--color-danger); background: var(--color-danger-container); color: var(--color-on-danger-container); box-shadow: var(--shadow-soft); }

.sync-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sync-updated {
  font-size: 0.8rem;
  color: var(--text-muted, #667085);
}

.stale-data-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0;
  padding: 10px 14px;
  border: 1px solid var(--state-warning-border);
  background: var(--state-warning-bg);
  border-radius: 10px;
  color: var(--text);
}
.stale-data-banner.tone-missed { border-color: var(--state-danger-border); background: var(--state-danger-bg); }
.stale-data-banner.tone-pending { border-color: var(--state-warning-border); background: var(--state-warning-bg); }
.stale-banner-text { font-weight: 600; }
.stale-banner-link { white-space: nowrap; }

.call-logs-freshness {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 13px;
  color: var(--text-subtle);
}
.call-logs-freshness-meta { color: var(--text-subtle); }

.report-stale-note {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--state-warning-border);
  background: var(--state-warning-bg);
  border-radius: 10px;
}
.report-stale-note.tone-missed { border-color: var(--state-danger-border); background: var(--state-danger-bg); }

.call-logs-compact { overflow-x: hidden; }
.call-log-shell { display: grid; gap: 12px; }
.call-log-topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.call-log-topbar h2 { margin: 0; }
.call-log-topbar .kpi-helper { margin: 4px 0 0; }
.call-log-filter-rail { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }
.call-log-search { display: grid; gap: 6px; font-weight: 700; }
.call-log-search > span { font-size: var(--font-size-xs); color: var(--muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); }
.call-log-search input { font-size: var(--font-size-md); padding: 10px 12px; background: var(--color-surface); }
.call-filter-group { display: grid; gap: 6px; font-weight: var(--font-weight-semibold); color: var(--muted); min-width: 150px; }
.advanced-filter-panel summary { cursor: pointer; font-weight: var(--font-weight-bold); color: var(--text-subtle); padding: 4px 0; }
.advanced-filter-panel .filters { margin-top: 10px; }
.quick-filter-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--color-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.quick-filter-chip:hover { background: var(--surface-alt); border-color: var(--color-outline-strong); }
.quick-filter-chip.is-active { background: var(--color-primary-container); border-color: var(--color-primary); color: var(--color-on-primary-container); box-shadow: inset 0 0 0 1px var(--color-primary); }

.call-log-summary-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.call-log-summary-card { border: 1px solid var(--border); border-left: 4px solid var(--border-strong); background: var(--surface-soft); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.call-log-summary-card.tone-answered { border-left-color: var(--answered); }
.call-log-summary-card.tone-missed { border-left-color: var(--missed); }
.call-log-summary-card.tone-pending { border-left-color: var(--pending); }
.call-log-summary-card.tone-missing { border-left-color: var(--missing); }
.call-log-summary-card.tone-neutral { border-left-color: var(--outbound); }
.call-log-summary-label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--muted); font-weight: var(--font-weight-bold); }
.call-log-summary-value { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--text); font-variant-numeric: tabular-nums; }

.call-log-table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; overflow-y: visible; background: var(--color-surface); max-height: none; }
.call-log-table-v2 { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1080px; font-size: var(--font-size-sm); }
.call-log-table-v2 thead th {
  background: var(--color-table-header);
  color: var(--color-on-table-header);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  font-weight: var(--font-weight-bold);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-strong);
}
.call-log-table-v2 tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.call-log-table-v2 tbody tr.call-log-row-v2 { cursor: pointer; }
.call-log-table-v2 tbody tr.call-log-row-v2:hover { background: var(--color-surface-container-low); }
.call-log-table-v2 tbody tr.call-log-row-v2:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.call-log-table-v2 tbody tr.row-selected { background: var(--color-primary-container); box-shadow: inset 3px 0 0 var(--color-primary); }
.call-log-table-v2 tbody tr.row-expanded { background: var(--color-surface-expanded); }
.call-log-table-v2 tbody tr.row-expanded td { border-bottom-color: transparent; }
.call-log-expanded-row-v2 > td { padding: 0; background: var(--color-surface-expanded); border-bottom: 1px solid var(--border); }
.call-log-inline-panel { padding: 12px 16px; display: grid; gap: 10px; border-left: 3px solid var(--color-primary); }
.call-log-inline-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; }
.call-log-inline-field { display: grid; gap: 2px; min-width: 0; }
.call-log-inline-label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--muted); font-weight: var(--font-weight-bold); }
.call-log-inline-value { font-size: var(--font-size-sm); color: var(--text); word-break: break-word; }
.call-log-inline-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.call-log-table-v2 tbody tr.call-log-row-v2.tone-missed td.cell-caller { box-shadow: inset 3px 0 0 var(--missed); }
.call-log-table-v2 tbody tr.call-log-row-v2.tone-answered td.cell-caller { box-shadow: inset 3px 0 0 var(--answered); }
.call-log-table-v2 tbody tr.call-log-row-v2.tone-transferred td.cell-caller { box-shadow: inset 3px 0 0 var(--transferred); }
.call-log-table-v2 tbody tr.call-log-row-v2.tone-outbound td.cell-caller { box-shadow: inset 3px 0 0 var(--outbound); }
.call-log-table-v2 tbody tr.call-log-row-v2.tone-pending td.cell-caller { box-shadow: inset 3px 0 0 var(--pending); }
.call-log-table-v2 tbody tr.call-log-row-v2:last-child td { border-bottom: 0; }

.call-log-empty-row td { padding: 0; }
.call-log-empty-row .empty-state-copy { margin: 12px; }

.cell-stack { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cell-stack > div { display: grid; gap: 1px; min-width: 0; }
.cell-stack > .cell-primary, .cell-stack > .cell-secondary { display: block; }
td .cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
td.cell-caller .cell-stack { flex-direction: row; align-items: center; gap: 8px; }
.cell-primary { font-weight: var(--font-weight-semibold); color: var(--text); }
.cell-secondary { font-size: var(--font-size-xs); color: var(--text-subtle); }
.cell-mono { font-family: var(--font-family-mono); font-variant-numeric: tabular-nums; }
.cell-time { white-space: nowrap; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.cell-time-col { white-space: nowrap; }
.cell-duration { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell-recording { min-width: 140px; }
.cell-actions { text-align: right; white-space: nowrap; }
.cell-actions-head { width: 1%; }

.status-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--border-strong); flex: 0 0 9px; }
.status-dot-answered { background: var(--answered); }
.status-dot-missed { background: var(--missed); }
.status-dot-transferred { background: var(--transferred); }
.status-dot-outbound { background: var(--outbound); }
.status-dot-pending { background: var(--pending); }
.status-dot-neutral { background: var(--border-strong); }

.recording-actions { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Compact inline recording player. Kept narrow so Call Logs rows never get bulky. */
.recording-player { display: inline-flex; flex-direction: column; gap: 4px; max-width: 100%; }
.recording-player-controls { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
.recording-player-toggle, .recording-player-stop { padding: 5px 8px; min-width: 32px; justify-content: center; }
.recording-progress { -webkit-appearance: none; appearance: none; width: 140px; max-width: 40vw; height: 4px; border-radius: 999px; background: var(--border-strong); cursor: pointer; }
.recording-progress:disabled { cursor: not-allowed; opacity: .55; }
.recording-progress::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); box-shadow: 0 1px 2px rgba(15, 32, 64, 0.25); cursor: pointer; }
.recording-progress::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); cursor: pointer; }
.recording-progress:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.recording-time { font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.recording-time-current { color: var(--text); font-weight: var(--font-weight-semibold); }
.recording-player-status { margin: 0; font-size: var(--font-size-xs); }
.icon-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: var(--font-size-sm);
  border-radius: 8px;
  border: 1px solid var(--color-outline);
  background: var(--color-surface-container-low);
  color: var(--color-on-surface);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}
.icon-button:hover:not(:disabled) { border-color: var(--color-outline-strong); background: var(--color-surface-container-high); }
.icon-button:disabled { opacity: .5; cursor: not-allowed; }
.icon-button-label { font-size: var(--font-size-xs); }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

.call-log-pagination { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.call-log-pagination p { margin: 0; }
.call-pagination { display: inline-flex; align-items: center; gap: 8px; }

.call-detail-drawer { position: fixed; right: 16px; top: 96px; bottom: 16px; width: min(480px, calc(100vw - 32px)); margin-top: 0; padding: 16px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-soft); box-shadow: -8px 0 40px rgba(15, 32, 64, 0.16), 0 12px 32px rgba(15, 32, 64, 0.12); overflow-y: auto; z-index: 30; display: grid; gap: 12px; align-content: start; animation: drawer-slide-in .2s ease; }
@keyframes drawer-slide-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.call-detail-drawer .detail-drawer-head { position: sticky; top: -16px; margin: -16px -16px 0; padding: 14px 16px; background: linear-gradient(180deg, var(--color-surface), var(--surface-soft)); border-bottom: 1px solid var(--border); z-index: 1; backdrop-filter: blur(4px); }
.detail-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.detail-drawer-head h3 { margin: 0; font-size: var(--title-2); }
.call-inline-compact { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 16px; }
.call-inline-compact > div { font-size: var(--font-size-sm); color: var(--text); }
.call-inline-compact b { display: block; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--muted); font-weight: var(--font-weight-bold); margin-bottom: 2px; }

@media (max-width: 1080px) {
  .call-log-table-v2 { min-width: 920px; }
}
@media (max-width: 760px) {
  .call-log-summary-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icon-button-label { display: none; }
  .call-log-table-v2 { min-width: 720px; font-size: 13px; }
  .call-log-table-v2 thead th, .call-log-table-v2 tbody td { padding: 8px 10px; }
  .call-detail-drawer { left: 8px; right: 8px; top: 72px; bottom: 8px; width: auto; }
}
.nav-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-link-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.nav-icon { width: 18px; text-align: center; font-size: var(--font-size-sm); opacity: .95; flex: 0 0 18px; }
.nav-badge { min-width: 22px; height: 22px; border-radius: 999px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: #fff; background: #ca2c2c; border: 1px solid rgba(255,255,255,.3); }

.report-visual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 12px 0; }
.report-chart-card, .report-risk-card { display: grid; gap: 10px; align-content: start; }
.report-metric-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(170px, 1.2fr); gap: 10px; align-items: center; }
.report-metric-row p { margin: 0; color: var(--muted); font-size: 13px; }
.report-metric-row strong { font-size: 16px; }
.report-bar { display: grid; gap: 5px; }
.report-bar span { font-weight: 600; color: var(--text-subtle); font-size: 12px; }
.report-bar-track { width: 100%; height: 10px; border-radius: 999px; background: var(--color-outline-variant); overflow: hidden; }
.report-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #00aeef, #7ed026); }
.report-metric-row.tone-missed .report-bar-fill { background: linear-gradient(90deg, #f06a6a, #ca2c2c); }
.report-metric-row.tone-answered .report-bar-fill { background: linear-gradient(90deg, #7ed026, #3a8214); }
.report-segmented-bar { display: flex; width: 100%; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); background: #eef3fb; min-height: 32px; }
.report-segment { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; padding: 6px 8px; white-space: nowrap; }
.report-segment-ready { background: var(--color-success-container); color: var(--color-on-success-container); }
.report-segment-pending { background: var(--color-warning-container); color: var(--color-on-warning-container); }
.report-segment-missing { background: var(--color-danger-container); color: var(--color-on-danger-container); }

@media (max-width: 680px) {
  .report-metric-row { grid-template-columns: 1fr; }
  .nav-badge { min-width: 20px; height: 20px; font-size: 11px; }
}

.attention-queue { display: grid; gap: 12px; overflow-x: clip; }
.attention-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.attention-risk-card { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.queue-filter-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px; }
.queue-filter-row label { display: grid; gap: 6px; min-width: 220px; }
.queue-card-list { display: grid; gap: 10px; }
.queue-card { border: 1px solid var(--border); border-left: 4px solid var(--state-info-border); border-radius: 12px; padding: 12px; background: var(--surface-soft); display: grid; gap: 10px; }
.queue-card-critical { border-left-color: var(--missed); border-color: var(--state-danger-border); background: var(--state-danger-bg); }
.recording-health-bar { width: 100%; height: 12px; border-radius: 999px; overflow: hidden; border: 1px solid var(--border-strong); display: flex; background: var(--color-outline-variant); }
.recording-segment { height: 100%; display: block; }

@media (max-width: 1366px) {
  .attention-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .attention-summary-grid { grid-template-columns: 1fr; }
  .queue-filter-row { align-items: stretch; }
}

.directory-control-center, .department-control-center { display: grid; gap: 12px; }
.ux-page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ux-page-header h2 { margin: 0 0 4px; }
.ux-page-header p { margin: 0; color: var(--muted); }
.ux-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin: 4px 0 12px; padding: 0; }
.ux-tab { background: transparent; border: 1px solid transparent; border-bottom: none; padding: 8px 14px; border-radius: 8px 8px 0 0; color: var(--muted); font-weight: 600; cursor: pointer; }
.ux-tab:hover { background: var(--surface-soft); color: var(--text); }
.ux-tab.active { background: var(--color-surface); border-color: var(--border); color: var(--text); box-shadow: 0 1px 0 0 var(--color-surface); position: relative; top: 1px; }
.ux-tab-panel { display: grid; gap: 12px; }
.ux-section-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ux-section-header h2 { margin: 0 0 4px; }
.ux-section-header p { margin: 0; color: var(--muted); font-size: 13px; }
/* High-emphasis filled primary — the final/primary action.
   .button-primary and .ux-primary are aliases of the same role. */
.button-primary, .ux-primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.button-primary:hover:not(:disabled), .ux-primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); box-shadow: var(--shadow-soft); }
.ux-callout { background: var(--state-info-bg, #eef4ff); border: 1px solid var(--state-info-border, #b8cdec); padding: 10px 14px; border-radius: 10px; margin: 8px 0; color: #1e3a6b; }
.ux-guide-card h3 { margin: 0 0 8px; }
.ux-setup-flow { margin: 0; padding-left: 20px; color: var(--muted); display: grid; gap: 4px; }
.ux-form-card { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin: 10px 0; }
.form-error { margin: 2px 0; color: var(--color-on-danger-container); background: var(--color-danger-container); border: 1px solid var(--color-danger-outline); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: var(--font-weight-semibold); }
.ux-empty { padding: 18px 8px; text-align: center; color: var(--muted); }
.ux-empty h3 { margin: 0 0 6px; color: var(--text); }
.ux-empty p { margin: 0 0 4px; }
@media (max-width: 600px) {
  .ux-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .ux-tab { white-space: nowrap; }
  .ux-section-header { flex-direction: column; align-items: stretch; }
}
.directory-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.directory-card { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.directory-table .simple-table { min-width: 820px; }
.extension-health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.department-performance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.department-card { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.department-bar { width: 100%; height: 10px; border-radius: 999px; background: var(--color-outline-variant); overflow: hidden; }
.department-bar span { display: block; height: 100%; background: linear-gradient(90deg,#00aeef,#7ed026); }
.structure-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--state-info-border); background: var(--state-info-bg); font-weight: 700; }

.audit-control-center { display: grid; gap: 14px; }
.audit-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.audit-summary-card { border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--surface-soft); }
.audit-filter-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; align-items: end; }
.audit-filter-bar button { min-height: 42px; }
.audit-timeline { display: grid; gap: 12px; }
.audit-timeline ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.audit-timeline-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--surface-soft); }
.audit-timeline-marker { width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--border-strong); display: grid; place-items: center; font-weight: 700; background: var(--color-surface); }
.audit-event-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-subtle); }
.audit-event-title { margin: 6px 0 4px; font-weight: 700; }
.audit-event-body { margin: 0; color: var(--muted); }
.audit-severity-pill { border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .03em; }

/* Login screen */
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background:
    radial-gradient(circle at 12% 18%, rgba(91, 162, 255, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 88% 82%, rgba(59, 115, 216, 0.18) 0%, transparent 55%),
    var(--bg-accent);
}
.login-panel {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: min(1120px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 32, 57, 0.18);
  overflow: hidden;
}
.login-hero {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  color: #e8f0ff;
  background:
    radial-gradient(circle at 20% 0%, rgba(91, 162, 255, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(46, 87, 161, 0.45) 0%, transparent 55%),
    linear-gradient(160deg, #0d1930 0%, #122443 50%, #18305a 100%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  isolation: isolate;
}
.login-hero-glow {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(91, 162, 255, 0.35), transparent 65%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
.login-hero > * { position: relative; z-index: 1; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-monogram {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(145deg, #00aeef, #0073a8);
  display: grid; place-items: center;
  font-weight: 800; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 8px 18px rgba(20, 50, 110, 0.5);
}
.login-brand-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  color: #a8bee2;
  font-weight: 700;
}
.login-brand-title { margin: 2px 0 0; font-size: 16px; font-weight: 700; }
.login-hero-title {
  margin: 8px 0 0;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.15;
  font-weight: 700;
}
.login-hero-subtitle { margin: 0; color: #b8c8e6; max-width: 38ch; }
.login-feature-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: grid;
  gap: 10px;
}
.login-feature-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(151, 182, 236, 0.18);
  backdrop-filter: blur(6px);
}
.login-feature-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(91, 162, 255, 0.18);
  border: 1px solid rgba(151, 182, 236, 0.35);
  display: grid; place-items: center;
  color: #cfe0ff;
  font-size: 12px;
}
.login-feature-title { margin: 0; font-weight: 700; color: #f1f6ff; }
.login-feature-copy { margin: 2px 0 0; color: #b8c8e6; font-size: 13px; }
.login-status-pill {
  margin: auto 0 0;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(126, 208, 38, 0.16);
  border: 1px solid rgba(126, 208, 38, 0.50);
  color: #d8f3ad;
  font-size: 12px;
  font-weight: 600;
}
.login-status-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #7ed026;
  box-shadow: 0 0 0 3px rgba(126, 208, 38, 0.28);
}

.login-card {
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--surface);
}
.login-card-head { display: grid; gap: 6px; }
.login-card-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.login-card-title { margin: 0; font-size: 1.35rem; letter-spacing: -.01em; }
.login-card-subtitle { margin: 0; color: var(--text-subtle); }
.login-form { display: grid; gap: 14px; }
.login-field { display: grid; gap: 6px; }
.login-field-label { font-weight: 600; font-size: 13px; color: var(--text); }
.login-form input[type="email"],
.login-form input[type="password"],
.login-form input[type="text"] {
  width: 100%;
  padding: 11px 13px;
  font-size: 15px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface-soft);
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.login-form input::placeholder { color: #97a4bd; }
.login-form input:hover { border-color: #9fb6d8; }
.login-form input:focus {
  outline: none;
  border-color: var(--focus);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px rgba(90, 162, 255, 0.22);
}
.login-password-wrap { position: relative; display: block; }
.login-password-wrap input { padding-right: 72px; }
.login-password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--color-surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.login-password-toggle:hover { border-color: #9fb6d8; background: var(--surface-alt); }
.login-password-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.login-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  user-select: none;
}
.login-remember input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: #0073a8;
}
.login-submit {
  margin-top: 4px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: linear-gradient(145deg, #00aeef, #0073a8);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(36, 79, 159, 0.25);
  transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease;
}
.login-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(36, 79, 159, 0.32); }
.login-submit:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.login-submit:disabled { opacity: .75; cursor: progress; transform: none; }
.login-submit.is-loading { cursor: progress; }
.login-error {
  margin: 0;
  min-height: 0;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--missed);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .15s ease, transform .15s ease, padding .15s ease;
}
.login-error.is-visible {
  padding: 10px 12px;
  background: var(--state-danger-bg);
  border-color: var(--state-danger-border);
  opacity: 1;
  transform: none;
}
.login-security-note {
  margin: 0;
  font-size: 12px;
  color: var(--text-subtle);
  text-align: center;
}
/* Single-column variant of the login panel, reused by the forced
   password-change screen so it keeps the premium card chrome (border, radius,
   shadow) without the marketing hero. */
.login-panel.is-single {
  grid-template-columns: minmax(0, 1fr);
  width: min(460px, 100%);
}
.login-field-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-subtle);
}

@media (max-width: 880px) {
  .login-shell { padding: var(--space-3); }
  .login-panel {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 20px;
  }
  .login-hero { order: 2; padding: 24px; gap: 14px; }
  .login-card { order: 1; padding: 24px; }
  .login-hero-title { font-size: 1.3rem; }
  .login-feature-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .login-shell { padding: 12px; }
  .login-card, .login-hero { padding: 20px; }
  .login-card-title { font-size: 1.2rem; }
}

/* ── SaaS polish refinements ─────────────────────────────────────── */

/* Nav issue badges: compact and clearly an alert without shouting. */
.nav-badge { min-width: 20px; height: 20px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); background: linear-gradient(180deg, #e0463f, #c4271f); box-shadow: 0 1px 3px rgba(120, 20, 16, 0.4); }

/* Premium status pills: tiny dot reinforces state without relying on colour alone. */
.pill { font-size: 11.5px; padding: 4px 11px; }

/* Section cards on the dashboard get a touch more breathing room. */
.dashboard-section { padding: 18px; }

/* Grouped SaaS-style forms: clear card, helper text, aligned action bar. */
.admin-form, .ux-form-card {
  border-radius: var(--radius-sm);
  padding: 16px;
  gap: 12px;
}
.admin-form h3, .ux-form-card h3 { margin: 0 0 2px; font-size: 0.95rem; }
.admin-form label, .ux-form-card label { font-size: 13px; }
.form-help { margin: 0; color: var(--text-subtle); font-size: 12px; }
.admin-form .form-actions, .ux-form-card .form-actions,
.admin-form button[type="submit"], .ux-form-card button[type="submit"] { margin-top: 2px; }

/* Settings: keep raw diagnostics tucked behind an advanced panel so they
   never dominate the page. Long checksums wrap via the global code rule. */
.diagnostics-advanced { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); padding: 0; }
.diagnostics-advanced > summary { cursor: pointer; font-weight: 700; color: var(--text); padding: 12px 14px; list-style: none; display: flex; align-items: center; gap: 8px; }
.diagnostics-advanced > summary::-webkit-details-marker { display: none; }
.diagnostics-advanced > summary::before { content: "▸"; color: var(--muted); font-size: 12px; transition: transform .15s ease; }
.diagnostics-advanced[open] > summary::before { transform: rotate(90deg); }
.diagnostics-advanced[open] > summary { border-bottom: 1px solid var(--border); }
.diagnostics-advanced .diagnostics-body { padding: 6px 14px 14px; }
.diagnostics-advanced .diagnostics-body p { font-size: 13px; overflow-wrap: anywhere; }
.diagnostic-redacted { color: var(--text-subtle); font-style: italic; }

/* Nav badge stays compact even with large counts (renders as 999+). */
.nav-badge { padding: 0 6px; max-width: 52px; overflow: hidden; }

/* Settings connector cards: surface checksums cleanly. */
.settings-card-grid code { display: inline-block; max-width: 100%; }

/* Call log rows: slightly stronger hover for a tactile feel. */
.call-log-table-v2 tbody tr.call-log-row-v2:hover { background: var(--color-surface-container-high); }

/* Click-to-call (PR155): primary CTA + confirmation modal. The modal never renders a full
   customer number — only a masked value provided by the renderer.
   The filled-primary look is shared with .ux-primary in the button-hierarchy block. */
.c2c-action-card .button-primary { width: 100%; }
.c2c-trigger-inline { font-size: 12px; padding: 4px 10px; }

/* Compact phone-icon action on a list/workspace row (the primary click-to-call entry point).
   Inherits .icon-button; an accent tint distinguishes the call action from neutral row icons. */
/* Use the darker brand-blue derivative so the call icon/label and its border
   stay AA-readable on the light row surface (bright #00aeef is text-unsafe). */
.c2c-row-button { color: var(--color-primary-strong, var(--text)); margin-right: 6px; }
.c2c-row-button:not(:disabled) { border-color: var(--color-primary-strong, var(--border-strong)); }
.detail-summary-head .c2c-row-button { margin-left: 8px; margin-right: 0; }
.call-log-topbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#click-to-call-number { padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm, 6px); font: inherit; }

.c2c-modal-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 32, 57, 0.45); backdrop-filter: blur(4px); }
.c2c-modal { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-hover); padding: 22px; }
.c2c-modal-head h3 { margin: 0 0 6px; }
.c2c-modal-explain { margin: 0 0 16px; color: var(--text-subtle); }
.c2c-modal-fields { display: grid; gap: 12px; margin-bottom: 14px; }
.c2c-field { display: flex; flex-direction: column; gap: 4px; }
.c2c-field > span:first-child { font-size: 12px; font-weight: 600; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .03em; }
.c2c-field-value { font-weight: 600; color: var(--text); }
.c2c-modal-note { margin: 0 0 12px; }
.c2c-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 540px) { .c2c-modal-actions { flex-direction: column-reverse; } .c2c-modal-actions button { width: 100%; } }

/* Missed Leads (supervisor/admin) workspace: queue + workload two-column layout.
   Reuses existing card/queue-card/pill design tokens; no new visual language. */
.missed-leads-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: var(--space-2); align-items: start; margin-top: var(--space-2); }
.missed-leads-workload h3 { margin: 0 0 6px; }
.inline-checkbox { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 1100px) { .missed-leads-layout { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════
   BRAND DESIGN SYSTEM FOUNDATION — RenTrip Voice OS / Call Command Center
   ────────────────────────────────────────────────────────────────────
   Visual-only refinement layer (PR: Brand Design System Foundation).
   Goal: make the whole app feel like a premium, branded SaaS product —
   confident, operational, enterprise-grade — WITHOUT changing any behavior,
   data, routing, RBAC, recording, pagination, filters or analytics.

   It only refines SHARED, centralized presentation (cards, KPIs, buttons,
   pills/chips, tables, inputs, empty/loading/error states) by overriding
   existing selectors via the cascade, and adds a small set of reusable
   utility classes. No page markup is required to change. The whole block is
   self-contained and reversible — delete it to restore prior styling.

   Brand reference: exact RenTrip brand anchors provided by the user —
   blue #00aeef, green #7ed026, white #ffffff, and black for high-emphasis
   text where feasible. Darker accessible derivatives of the blue/green are
   used for hover/active states, borders, and text-on-light where the bright
   brand colours don't meet contrast (e.g. button text uses near-black on the
   cyan fill; success text uses a darkened green). Operational status stays
   standard: green = answered/success, red = missed/risk, amber = pending/
   warning, blue = info/actions — and is never colour-only.
   ════════════════════════════════════════════════════════════════════ */

/* — Cards & elevated panels: deliberate hairline + true layered elevation,
     with a calm hover lift. Reads as a real "panel" rather than a flat box. — */
.card, .state-card, .kpi-card, .focus-card, .dept-card, .detail-card, .admin-form {
  border-color: var(--color-outline-variant);
  box-shadow: var(--shadow-soft);
}
.card:hover, .state-card:hover, .kpi-card:hover, .focus-card:hover, .dept-card:hover, .detail-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--color-outline);
}
/* Preserve the coloured status rail on hover. The neutral border-color above
   would otherwise reset the status-specific left edge at equal specificity,
   dropping the red/amber/blue status cue these cards rely on. */
.focus-card.danger:hover { border-left-color: var(--missed); }
.focus-card.warning:hover { border-left-color: var(--pending); }
.focus-card.neutral:hover { border-left-color: var(--outbound); }
.dashboard-error-panel:hover { border-left-color: var(--missed); }
.dashboard-empty-note:hover { border-left-color: var(--pending); }

/* — KPI cards: stronger numeric hierarchy (label → value → helper) and a
     cleaner brand accent rail. — */
.kpi-value, .call-log-summary-value, .focus-value {
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kpi-value { font-size: var(--font-size-3xl); line-height: 1.08; }
.kpi-helper { margin: 6px 0 0; font-size: var(--font-size-xs); color: var(--text-subtle); line-height: var(--line-height-normal); }
.kpi-card::before { width: 4px; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }

/* — Buttons: keep the existing primary / secondary / ghost / destructive
     hierarchy, add a touch of weight to the primary CTA so the main action
     is unmistakable. — */
.button-primary, .ux-primary { box-shadow: var(--shadow-xs); }
.button-primary:hover:not(:disabled), .ux-primary:hover:not(:disabled) { box-shadow: var(--shadow-raised); }

/* — Inputs / selects / search: a soft focus halo (paired with the existing
     solid outline) for a cleaner, more consistent control language. — */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  box-shadow: 0 0 0 3px var(--color-focus-ring-soft);
}

/* — Pills / status chips: consistent, readable, never colour-only (callers
     pair a tone class with a visible label or status dot). — */
.pill { font-weight: var(--font-weight-bold); letter-spacing: .005em; }

/* — Tables: SaaS-grade headers and calmer row rhythm. — */
.simple-table th, .call-log-table-v2 thead th { white-space: nowrap; }
.table-wrap, .call-log-table-wrap { box-shadow: var(--shadow-soft); }

/* — Empty / loading / error states: calmer, consistent framing. — */
.empty-state, .empty-state-copy, .ux-empty { box-shadow: none; }

/* ── Reusable presentation utilities (additive, opt-in) ──────────────
   Low-risk helpers pages can adopt incrementally. Nothing depends on them. */

/* Page shell + header */
.ui-page { display: grid; gap: var(--space-3); }
.ui-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.ui-page-header h1, .ui-page-header h2 { margin: 0; }
.ui-eyebrow { margin: 0 0 2px; text-transform: uppercase; letter-spacing: var(--letter-spacing-label); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--muted); }

/* Card header + action bar inside a card */
.ui-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.ui-card-header h2, .ui-card-header h3 { margin: 0; }
.ui-card-actions { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }

/* Compact helper / caption text */
.ui-helper { margin: 0; color: var(--text-subtle); font-size: var(--font-size-xs); line-height: var(--line-height-normal); }

/* Metric block (label / value / helper) */
.ui-metric { display: grid; gap: 2px; align-content: start; }
.ui-metric-label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); font-weight: var(--font-weight-bold); color: var(--muted); }
.ui-metric-value { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; color: var(--text); }

/* Status chip — semantic tone variants reuse the shared status tokens */
.ui-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); border: 1px solid var(--color-outline); background: var(--color-surface-container); color: var(--text); }
.ui-chip.is-success { background: var(--color-success-container); border-color: var(--color-success-outline); color: var(--color-on-success-container); }
.ui-chip.is-danger { background: var(--color-danger-container); border-color: var(--color-danger-outline); color: var(--color-on-danger-container); }
.ui-chip.is-warning { background: var(--color-warning-container); border-color: var(--color-warning-outline); color: var(--color-on-warning-container); }
.ui-chip.is-info { background: var(--color-info-container); border-color: var(--color-info-outline); color: var(--color-on-info-container); }

/* Responsive grid helpers */
.ui-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); }
.ui-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ui-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
@media (max-width: 980px) { .ui-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .ui-grid-2, .ui-grid-3 { grid-template-columns: 1fr; } }

/* Reduced motion: respect user preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   PR 2 — App Shell, Sidebar & Command Bar upgrade
   Product-shell visual polish only, built on the PR 1 brand tokens. No
   behaviour, data, routing, RBAC, recording, pagination, filter, or analytics
   change. Centralized here so the shell upgrade is easy to review and revert.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar: polished RenTrip Voice OS navigation panel ─────────────────── */
.brand-text { min-width: 0; }
/* Branded RT mark — pure CSS (no image asset): brand-blue gradient tile with a
   soft highlight and a small brand-green status dot so it reads as RenTrip. */
.brand-icon {
  position: relative;
  width: 42px; height: 42px;
  color: #fff;
  font-size: 15px;
  letter-spacing: .03em;
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255, 255, 255, .35), transparent 55%),
    linear-gradient(150deg, var(--color-primary) 0%, var(--color-primary-strong) 100%);
}
.brand-icon > span { position: relative; z-index: 1; }
.brand-icon::after {
  content: "";
  position: absolute; right: -2px; bottom: -2px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--color-success-bright);
  border: 2px solid #0c172d;
}
.brand-title { font-size: var(--font-size-md); line-height: 1.15; color: #fff; }
.brand-subtitle { color: #9fb6dd; letter-spacing: .02em; }

/* Nav rhythm + clearer hover/active treatment (keeps the active brand rail). */
.ops-sidebar ul { gap: 2px; }
.nav-link { padding: 9px 11px; border-radius: var(--radius-xs); }
.nav-link:hover { background: rgba(255, 255, 255, .08); }
.nav-link.active { background: linear-gradient(100deg, rgba(0, 174, 239, .34), rgba(0, 115, 168, .2)); }
.nav-icon { opacity: .82; }
.nav-link.active .nav-icon { opacity: 1; }
/* Attention badge: compact, with a thin ring so it stays legible on the dark panel. */
.nav-badge { min-width: 20px; height: 20px; border: 1px solid rgba(255, 255, 255, .45); }
.sidebar-toggle { font-weight: var(--font-weight-semibold); }

/* ── Command bar (global header): tighter, unified, premium ──────────────── */
/* Trim wasted vertical height and right-size the page title so the shell — not
   an oversized per-page header — communicates context. */
.topbar { padding: 13px 18px; align-items: center; gap: var(--space-2) var(--space-3); }
.topbar-heading h1 { font-size: clamp(1.1rem, 1.4vw, 1.35rem); font-weight: var(--font-weight-bold); }
.topbar-subtitle { margin-top: 2px; }
.topbar-actions { gap: 10px 12px; }

/* Search: a tidy command input — cap the stretch on wide screens. */
.global-search { flex: 1 1 300px; max-width: 460px; }

/* Operational status strip → one cohesive sync + session control unit. */
.topbar-meta { gap: 6px 10px; padding: 6px 8px 6px 12px; align-items: center; }
.topbar-meta-sep { width: 1px; align-self: stretch; min-height: 26px; background: var(--border-strong); }
.viewer-block { display: grid; gap: 1px; min-width: 0; }
.topbar-meta .viewer { line-height: 1.2; }
.topbar-meta .permission-note { gap: 6px; flex-wrap: wrap; }
.role-pill { margin-right: 0; }
.permission-hint { color: var(--text-subtle); font-size: var(--font-size-xs); }
.topbar-meta .logout-button { padding: 7px 14px; }

/* ── Responsive shell polish ─────────────────────────────────────────────── */
/* Laptop range only (above the ≤1080px stacking breakpoint): trim sidebar bulk
   and keep the long permission hint to a single compact line (still visible +
   read in full by screen readers) so the status strip stays a tidy one-line
   unit. Scoped with min-width so it can't override the ≤1080px one-column
   stacked layout that comes earlier in the cascade. */
@media (min-width: 1081px) and (max-width: 1366px) {
  .layout { grid-template-columns: 248px minmax(0, 1fr); }
  .ops-sidebar { padding: var(--space-2); }
  .brand { margin-bottom: var(--space-3); padding-bottom: var(--space-2); }
  .permission-hint { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Tablet: search + status strip wrap full-width under the heading. */
@media (max-width: 1080px) {
  .topbar-actions { width: 100%; justify-content: flex-start; }
  .global-search { max-width: none; }
}

/* Mobile: stack the command bar; meta wraps without overflow. */
@media (max-width: 680px) {
  .topbar-meta { width: 100%; justify-content: flex-start; }
  .topbar-meta-sep { display: none; }
}