/* ============================================================================
   SAMS Voice AI — Design system
   Ported from preview.html so Blazor pages + static preview render identically.
   ============================================================================ */

:root {
    --mud-palette-primary:#1E88E5; --mud-palette-primary-darken:#1976D2; --mud-palette-primary-lighten:#E3F2FD;
    --mud-palette-success:#2E7D32; --mud-palette-success-lighten:#E8F5E9;
    --mud-palette-warning:#ED6C02; --mud-palette-warning-lighten:#FFF4E5;
    --mud-palette-error:#D32F2F;   --mud-palette-error-lighten:#FDECEA;
    --mud-palette-info:#0288D1;    --mud-palette-info-lighten:#E1F5FE;
    --mud-palette-background:#F7F8FB; --mud-palette-surface:#FFFFFF; --mud-palette-background-grey:#FAFBFD;
    --mud-palette-divider:#EEF0F5; --mud-palette-lines-default:#E6E8EF;
    --mud-palette-text-primary:#1E2432; --mud-palette-text-secondary:#596174; --mud-palette-text-light:white;  --mud-palette-text-disabled:#9AA0B1;
    --mud-typography-default-family: Inter, Roboto, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
    background: var(--mud-palette-background);
    font-family: var(--mud-typography-default-family);
    -webkit-font-smoothing: antialiased;
}
.mud-main-content { background: var(--mud-palette-background); }

/* ============================================================================
   Shell — app bar + permanent drawer
   ============================================================================ */

.svai-brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; }
.svai-brand .mark {
    width:28px; height:28px; border:1px solid rgba(255,255,255,.5); border-radius:50%;
    display:grid; place-items:center; font-size:12px; font-weight:700;
}
.svai-tenant-chip {
    font-size:12px; background:rgba(255,255,255,.14); padding:5px 10px;
    border-radius:14px; letter-spacing:.2px; margin-left:4px; color:#fff;
}
.svai-appbar-avatar {
    width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.22);
    display:grid; place-items:center; font-weight:600; font-size:12px;
    margin-left:6px; border:1px solid rgba(255,255,255,.4); color:#fff;
}
.svai-nav-section {
    font-size:10.5px; font-weight:700; letter-spacing:.8px;
    color:var(--mud-palette-text-disabled); text-transform:uppercase;
    padding:8px 12px 3px;
}
.mud-nav-link.active-link {
    background:var(--mud-palette-primary-lighten) !important;
    color:var(--mud-palette-primary-darken) !important;
    font-weight:600 !important;
}
/* Default MudNavMenu recolors active text to primary but leaves the icon grey;
   recolor the active icon to match (Mud only ships this for colored navmenus). */
.mud-nav-link.active .mud-nav-link-icon {
    color:var(--mud-palette-primary) !important;
}
/* Active + hover background for sidebar menu items (primary @ 22%). */
.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color:rgb(30 136 229 / 22%) !important;
}

/* Soft shadow on the right edge of the left navigation sidebar to lift it
   off the content area (Mud renders the drawer flat at Elevation=0). */
.mud-drawer.mud-drawer-pos-left {
    box-shadow:4px 0 16px rgba(20,27,45,.10), 1px 0 4px rgba(20,27,45,.06) !important;
}

/* Compact the left nav so every menu item fits on short screens WITHOUT a
   scrollbar (the drawer content is overflow:hidden). Tighter row height; scoped
   to the left navigation drawer only so the right Conversations drawer is
   unaffected. */
.mud-drawer-pos-left .mud-navmenu .mud-nav-link {
    min-height:38px; padding-top:6px; padding-bottom:6px;
}
.mud-drawer-pos-left .mud-navmenu .mud-nav-link .mud-nav-link-icon {
    min-width:32px;
}

/* ── Large-screen collapsed "mini rail" ──────────────────────────────────────
   On large screens the menu button collapses the left drawer to the Mini variant
   instead of hiding it. In that collapsed state (.mud-drawer-mini.mud-drawer--closed)
   each nav item becomes a centered icon with its label stacked underneath in a
   small font, so the rail stays fully clickable/navigable. Scoped to the mini +
   closed + left drawer only, so the expanded drawer and the small-screen overlay
   are untouched. */
.mud-drawer-pos-left.mud-drawer-mini.mud-drawer--closed .mud-navmenu {
    padding-left:4px !important;
    padding-right:4px !important;
}
.mud-drawer-pos-left.mud-drawer-mini.mud-drawer--closed .mud-navmenu .mud-nav-link {
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:1px;
    padding:6px 2px;
    min-height:0;
    border-radius:8px;
}
.mud-drawer-pos-left.mud-drawer-mini.mud-drawer--closed .mud-navmenu .mud-nav-link .mud-nav-link-icon {
    min-width:0;
    margin:0;
}
/* MudBlazor clips the label in mini mode by shrinking the rail; reinstate it as a
   wrapped caption under the icon. */
.mud-drawer-pos-left.mud-drawer-mini.mud-drawer--closed .mud-navmenu .mud-nav-link .mud-nav-link-text {
    display:block !important;
    opacity:1 !important;
    width:100%;
    margin:0 !important;
    padding:0 !important;
    font-size:9.5px;
    line-height:1.15;
    white-space:normal !important;
    overflow:visible;
    text-overflow:clip;
    letter-spacing:.1px;
    text-align:center !important;
}
/* Section captions ("Workspace", "Approvals", "Admin") are just noise in the narrow
   rail — hide them while keeping the items themselves. */
.mud-drawer-pos-left.mud-drawer-mini.mud-drawer--closed .mud-navmenu .svai-nav-section {
    display:none;
}

/* Let the left nav scroll when items exceed the viewport height — overrides the
   global `.mud-drawer-content { overflow:hidden }` (line ~552) for the LEFT
   drawer only, so no menu item is ever hidden. Thin scrollbar, shown only when
   content actually overflows. Scoped so the right Conversations drawer keeps its
   own overflow handling. */
.mud-drawer-pos-left .mud-drawer-content {
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;                                   /* Firefox */
    scrollbar-color:var(--mud-palette-lines-default) transparent;
}
.mud-drawer-pos-left .mud-drawer-content::-webkit-scrollbar {            /* Chromium/Edge/WebKit */
    width:6px;
}
.mud-drawer-pos-left .mud-drawer-content::-webkit-scrollbar-thumb {
    background:var(--mud-palette-lines-default);
    border-radius:3px;
}
.mud-drawer-pos-left .mud-drawer-content::-webkit-scrollbar-thumb:hover {
    background:var(--mud-palette-text-secondary);
}
.mud-drawer-pos-left .mud-drawer-content::-webkit-scrollbar-track {
    background:transparent;
}

/* <FocusOnNavigate> focuses the page <h1> after each navigation, drawing a
   focus outline around the header until the user clicks. Suppress that ring on
   the (non-interactive) heading; real controls keep their focus rings. */
h1:focus, h1:focus-visible { outline:none; }

/* ============================================================================
   Layout helpers
   ============================================================================ */

.scroll { overflow-y:auto; flex:1; min-height:0; }
.content-padded { padding:20px 28px 32px; }

/* ============================================================================
   Page headers
   ============================================================================ */

.page-head {
    padding:20px 28px 12px;
    display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
}
.page-head h1 { font-size:22px; font-weight:600; margin:0 0 4px; letter-spacing:-.2px; color:var(--mud-palette-text-primary); }
.page-head .sub { font-size:13px; color:var(--mud-palette-text-secondary); }

.page-title { font-size:22px; font-weight:600; margin:0 0 4px; letter-spacing:-.2px; color:var(--mud-palette-text-primary); }
.page-sub   { font-size:13px; color:var(--mud-palette-text-secondary); }

/* ============================================================================
   KPI strip (compact pill) + KPI card (grid tile)
   ============================================================================ */

.kpis { display:flex; gap:10px; }
.kpi {
    background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default);
    border-radius:10px; padding:10px 14px; min-width:112px;
    display:flex; flex-direction:column;
}
.kpi .kv { font-size:18px; font-weight:600; color:var(--mud-palette-text-primary); font-variant-numeric:tabular-nums; }
.kpi .kl { font-size:11px; color:var(--mud-palette-text-secondary); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }
.kpi.accent .kv { color:var(--mud-palette-primary); }

.kpigrid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 14px;
    margin-bottom: 20px;
    height: stretch;
}
@media (max-width:1100px) { .kpigrid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:680px)  { .kpigrid { grid-template-columns:repeat(2,1fr); } }
.kpi-card {
    background:var(--mud-palette-surface); border:0;
    border-radius:12px; padding:16px 18px;
    box-shadow:0 1px 3px rgba(20,27,45,.06), 0 8px 20px rgba(20,27,45,.05);
    display:flex; flex-direction:column;
    position:relative; overflow:hidden;
    transition:box-shadow .18s ease, transform .18s ease;
}
/* Light colored accent bar so the cards read as cards, not blank white. */
.kpi-card::before {
    content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--mud-palette-primary); opacity:.65;
}
.kpi-card:hover { box-shadow:0 2px 6px rgba(20,27,45,.08), 0 12px 28px rgba(20,27,45,.09); transform:translateY(-1px); }
/* Clickable KPI card (e.g. Pending Approval → /approvals) */
.kpi-card--link { text-decoration:none; color:inherit; cursor:pointer; }
.kpi-card--link .kpi-go {
    position:absolute; top:12px; right:12px; font-size:18px;
    color:var(--mud-palette-text-secondary); opacity:.45;
    transition:opacity .18s ease, transform .18s ease, color .18s ease;
}
.kpi-card--link:hover .kpi-go { opacity:1; transform:translateX(2px); color:var(--mud-palette-primary); }
.kpi-card .ol { font-size:10.5px; font-weight:700; color:var(--mud-palette-primary); letter-spacing:.6px; text-transform:uppercase; }
.kpi-card .vl { font-size:36px; font-weight:600; margin-top:4px; letter-spacing:-.5px; color:var(--mud-palette-text-primary); font-variant-numeric:tabular-nums; line-height:1.1; }
.kpi-card .cp { font-size:12px; color:var(--mud-palette-text-secondary); margin-top:6px; display:flex; align-items:center; gap:4px; }
/* Up/down delta as a small, friendly tinted pill with a compact arrow. */
.kpi-card .cp.up, .kpi-card .cp.down {
    align-self:flex-start; font-weight:600; font-size:11px;
    padding:2px 9px 2px 6px; border-radius:999px; gap:2px; margin-top:8px;
}
.kpi-card .cp.up   { color:var(--mud-palette-success); background:rgba(46,125,50,.12); }
.kpi-card .cp.down { color:var(--mud-palette-error);   background:rgba(211,47,47,.12); }
.kpi-card .cp .mud-icon-root, .kpi-card .cp .material-icons { font-size:13px; }
.kpi-card .cp.up .mud-icon-root, .kpi-card .cp.down .mud-icon-root { font-size:13px; }

/* ============================================================================
   Dashboard overview — 4 KPI cards (2×2) on the left, Approval Workflow panel
   on the right. Structure ported from the V2 mockup, restyled to the light
   SAMS theme. Collapses to a single column on narrow screens.
   ============================================================================ */

.dash-overview { display:grid; grid-template-columns:5fr 7fr; gap:16px; margin-bottom:20px; align-items:start; }
@media (max-width:900px) { .dash-overview { grid-template-columns:1fr; } }

/* Left: the 4 KPI cards become a fixed 2×2 grid (overrides the 5-col base). */
.kpigrid--quad { grid-template-columns:repeat(2,1fr); margin-bottom:0; }
@media (max-width:480px) { .kpigrid--quad { grid-template-columns:1fr; } }

/* Each left card carries a blue rounded-badge icon in the top-right corner. The
   value (.vl) is vertically centered in the card and the caption (.cp) is pinned
   to the bottom, so both line up across the row regardless of content height. */
.kpigrid--quad .kpi-card { min-height:148px; }
.kpigrid--quad .kpi-card .vl  { margin-top:auto; }
.kpigrid--quad .kpi-card .cp,
.kpigrid--quad .kpi-card .cp.up,
.kpigrid--quad .kpi-card .cp.down { margin-top:auto; }
.kpi-ic {
    position:absolute; top:14px; right:14px;
    box-sizing:content-box;
    font-size:24px !important;                       /* glyph size */
    padding:9px; border-radius:12px;
    background:var(--mud-palette-primary-lighten);   /* light-blue tint */
    color:var(--mud-palette-primary) !important;     /* solid blue glyph */
}

/* ── Right: Approval Workflow — "progress bar per row" ──────────────────────── */
.aw-panel { margin-bottom:0; height:100%; }
.aw-list  { display:flex; flex-direction:column; }

.aw-row {
    display:block; text-decoration:none; color:inherit;
    padding:7px 4px 7px; /*border-bottom:1px solid var(--mud-palette-divider);*/
    transition:background .14s ease;
}
.aw-row:last-child { border-bottom:0; }
.aw-row:hover { background:var(--mud-palette-background-grey); }

.aw-head  { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.aw-ic    { font-size:18px !important; flex:0 0 auto; color:var(--mud-palette-text-secondary); }
.aw-label { font-size:13.5px; font-weight:500; color:var(--mud-palette-text-primary); }
.aw-count {
    margin-left:auto; font-size:17px; font-weight:700; font-variant-numeric:tabular-nums;
    color:var(--mud-palette-text-primary); line-height:1;
}

/* Progress-bar track + proportional fill. Width comes from an inline --aw-pct var. */
.aw-bar  { height:5px; border-radius:3px; background:var(--mud-palette-divider); overflow:hidden; }
.aw-fill {
    height:100%; border-radius:3px; width:var(--aw-pct,0%); min-width:6px;
    background:var(--mud-palette-primary); transition:width .5s cubic-bezier(.33,0,.2,1);
}

/* Per-status accent — icon, alert-count tint, and bar fill color. */
.aw--pending   .aw-ic   { color:var(--mud-palette-primary); }
.aw--pending   .aw-count{ color:var(--mud-palette-primary); }
.aw--pending   .aw-fill { background:var(--mud-palette-primary); }
.aw--auto      .aw-ic   { color:var(--mud-palette-success); }
.aw--auto      .aw-count{ color:var(--mud-palette-success); }
.aw--auto      .aw-fill { background:var(--mud-palette-success); }
.aw--escalated .aw-ic   { color:var(--mud-palette-error); }
.aw--escalated .aw-count{ color:var(--mud-palette-error); }
.aw--escalated .aw-fill { background:var(--mud-palette-error); }
.aw--rejected  .aw-ic   { color:#FB8C00; }
.aw--rejected  .aw-count{ color:#FB8C00; }
.aw--rejected  .aw-fill { background:#FB8C00; }
.aw--expired   .aw-ic   { color:#ffc107; }
.aw--expired   .aw-count{ color:#ffc107; }
.aw--expired   .aw-fill { background:#ffc107; }

/* ============================================================================
   Filter bar
   ============================================================================ */

.filters { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px 28px 14px; }

.mud-input {
    display:flex; align-items:center; background:var(--mud-palette-surface);
    border:1px solid var(--mud-palette-lines-default); border-radius:6px;
    padding:0 10px; height:36px; gap:6px;
}
.mud-input:focus-within { border-color:var(--mud-palette-primary); box-shadow:0 0 0 3px rgba(30,136,229,.12); }
.mud-input input, .mud-input select {
    border:0; outline:none; background:transparent;
    font:inherit; color:var(--mud-palette-text-primary); width:100%;
}
.mud-input.search { flex:1; min-width:240px; max-width:380px; }
.mud-input .label { font-size:11px; color:var(--mud-palette-text-secondary); font-weight:500; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
.mud-input .material-icons { color:var(--mud-palette-text-secondary); font-size:18px; }

/* Filter box that HOSTS a MudBlazor input (e.g. the searchable Provider dropdown).
   The app's custom `.mud-input` class name collides with MudBlazor's own internal
   `.mud-input` class, so a MudAutocomplete placed in a `.mud-input` wrapper renders a
   box-inside-a-box (the stacked look). We use a separate `.flt` wrapper and reset
   MudBlazor's input chrome inside it so the control sits inline like a native input. */
.flt {
    /* horizontal row: icon, label, autocomplete on one line, vertically centered —
       matching the sibling `.mud-input` filters. flex-flow row nowrap guarantees the
       autocomplete never drops onto a second line below the label. */
    display:flex; flex-flow:row nowrap; align-items:center; gap:6px;
    background:var(--mud-palette-surface);
    border:1px solid var(--mud-palette-lines-default); border-radius:6px;
    padding:0 10px; height:36px;
}
.flt:focus-within { border-color:var(--mud-palette-primary); box-shadow:0 0 0 3px rgba(30,136,229,.12); }
/* icon + label hold their size; the autocomplete takes the remaining width of the row */
.flt > .mud-icon-root, .flt > .flt-label { flex:0 0 auto; }
.flt .flt-label { font-size:11px; color:var(--mud-palette-text-secondary); font-weight:500; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
.flt .material-icons, .flt .mud-icon-root { color:var(--mud-palette-text-secondary); font-size:18px; }

/* the hosted MudAutocomplete: fill the rest of the row, stay vertically centered, and
   shed MudBlazor's stacked input chrome so it reads like the native inputs beside it. */
.flt-ac { flex:1 1 auto; min-width:0; margin:0; }
.flt-ac.mud-input-control { display:flex; flex-direction:column; justify-content:center; min-height:0; margin:0; }
.flt-ac .mud-input-control-input-container { min-height:0; }
.flt-ac .mud-input { margin:0; padding:0; border:0; border-radius:0; height:auto; min-height:0; background:transparent; box-shadow:none; }
.flt-ac .mud-input:focus-within { border:0; box-shadow:none; }
.flt-ac .mud-input.mud-input-underline::before,
.flt-ac .mud-input.mud-input-underline::after { display:none; }
.flt-ac .mud-input-slot { padding:0; height:auto; }
.flt-ac .mud-input-root { padding:0; font:inherit; color:var(--mud-palette-text-primary); }

/* Tenant-formatted date filter — hosts a MudDatePicker inline inside a `.mud-input`
   filter box. Native <input type="date"> renders in the browser's locale and ignores
   the tenant's configured date format; the picker honours it via DateFormat="@Dtf.DatePattern".
   These rules shed MudBlazor's stacked input chrome so the picker reads like the native
   filter inputs beside it (same reset approach as `.flt-ac` above). */
.svai-date { cursor:pointer; }
.svai-date .svai-date-pick { flex:1 1 auto; min-width:0; margin:0; }
.svai-date .mud-input-control { margin:0; }
.svai-date .mud-input { margin:0; padding:0; border:0; border-radius:0; height:auto; min-height:0; background:transparent; box-shadow:none; }
.svai-date .mud-input:focus-within { border:0; box-shadow:none; }
.svai-date .mud-input.mud-input-underline::before,
.svai-date .mud-input.mud-input-underline::after { display:none; }
.svai-date .mud-input-slot { padding:0; height:auto; }
.svai-date .mud-input-root { padding:0; font:inherit; font-size:13px; color:var(--mud-palette-text-primary); cursor:pointer; }
.svai-date .mud-input-root::placeholder { color:var(--mud-palette-text-secondary); opacity:1; }

.mud-chipset { display:flex;  flex-wrap:wrap; }
.mud-chip {
    display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px 0 8px;
    background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default);
    border-radius:16px; font-size:12.5px; cursor:pointer; user-select:none;
    font-family:inherit; color:var(--mud-palette-text-primary);
}
.mud-chip:hover { background:var(--mud-palette-background-grey); }
.mud-chip.on { background:var(--mud-palette-primary-lighten); border-color:var(--mud-palette-primary); color:var(--mud-palette-primary-darken); }
.mud-chip .material-icons { font-size:14px; }
.mud-chip .dot { width:6px; height:6px; border-radius:50%; }

/* Escalation status-filter chips — badge-tinted background (no leading dot).
   The active filter keeps its tone and gains an inset ring in the same color. */
.mud-chip.esc-filter         { padding:0 10px; height:26px; font-weight:500; }
.mud-chip.esc-filter.default { background:var(--mud-palette-surface); border-color:var(--mud-palette-lines-default); color:var(--mud-palette-text-secondary); }
.mud-chip.esc-filter.warning { background:#FFF4E5; border-color:#FFD9A8; color:#ED6C02; }
.mud-chip.esc-filter.info    { background:#E1F5FE; border-color:#B3E5FC; color:#0288D1; }
.mud-chip.esc-filter.success { background:#E8F5E9; border-color:#C8E6C9; color:#2E7D32; }
.mud-chip.esc-filter:hover   { filter:brightness(.96); }
.mud-chip.esc-filter.on      { box-shadow:inset 0 0 0 2px currentColor; font-weight:700; }

.divider-v { width:1px; height:22px; background:var(--mud-palette-lines-default); flex-shrink:0; }

/* ============================================================================
   Grid card (data table wrapper)
   ============================================================================ */

.grid-card {
    margin:0 28px 24px;
    background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default);
    border-radius:10px; box-shadow:0 1px 2px rgba(20,27,45,.06);
    overflow:hidden; display:flex; flex-direction:column; min-height:0;
}
.grid-toolbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; border-bottom:1px solid var(--mud-palette-divider); gap:12px; flex-shrink:0;
}
.grid-toolbar .count { font-size:13px; color:var(--mud-palette-text-secondary); }
.grid-toolbar .count b { color:var(--mud-palette-text-primary); }
.grid-actions { display:flex; gap:4px; }

.icon-btn {
    width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
    cursor:pointer; color:var(--mud-palette-text-secondary);
    background:transparent; border:0; font-family:inherit; transition:background .12s, color .12s;
}
.icon-btn:hover { background:var(--mud-palette-background-grey); color:var(--mud-palette-primary); }
.icon-btn .material-icons { font-size:18px; }

.framed-note {
    margin:0 28px 18px; background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default);
    border-radius:8px; padding:8px 12px; font-size:11.5px;
    color:var(--mud-palette-text-secondary); display:flex; align-items:center; gap:8px;
}
.framed-note .material-icons { font-size:14px; color:var(--mud-palette-primary); }

/* ============================================================================
   Panels (Dashboard / Settings / misc.)
   ============================================================================ */

.panel {
    background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default);
    border-radius:10px; padding:16px; /*box-shadow:0 1px 2px rgba(20,27,45,.06);*/
}
.panel h3 { margin:0 0 10px; font-size:15px; font-weight:600; color:var(--mud-palette-text-primary); display:flex; align-items:center; gap:8px; }
.panel h3 .mud-icon-root { font-size:19px; color:var(--mud-palette-primary); flex:0 0 auto; }

.dash-grid   { display:grid; grid-template-columns:5fr 7fr; gap:16px; margin-bottom:16px; }
.dash-grid-2 { display:grid; grid-template-columns:7fr 5fr; gap:16px; }

/* ── Operation Outcome — modern gradient gauge KPI card ─────────────────────── */
.oc-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
/* year / month filter for the Operation Outcome breakdown */
.oc-filter { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.oc-select {
    font-size:12px; font-weight:600; color:var(--mud-palette-text-primary);
    background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default);
    border-radius:8px; padding:4px 8px; cursor:pointer; outline:none;
    transition:border-color .15s ease;
}
.oc-select:hover:not(:disabled) { border-color:var(--mud-palette-primary); }
.oc-select:focus-visible { border-color:var(--mud-palette-primary); }
.oc-select:disabled { opacity:.5; cursor:not-allowed; }
.oc-total-chip {
    font-size:11px; font-weight:600; color:var(--mud-palette-primary);
    background:var(--mud-palette-primary-lighten); padding:3px 10px; border-radius:11px; white-space:nowrap;
}
/* headline trend pill */
.og-trend { display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:700;
    padding:3px 9px 3px 6px; border-radius:11px; white-space:nowrap; }
.og-trend .mud-icon-root { font-size:14px; }
.og-trend.up   { color:var(--mud-palette-success); background:rgba(46,125,50,.12); }
.og-trend.down { color:var(--mud-palette-error);   background:rgba(211,47,47,.12); }

.og-wrap { display:flex; align-items:center; gap:6px; margin-top:2px; }
.og-gauge-box { position:relative; flex:0 0 auto; width:206px; }
.og-gauge { width:100%; height:auto; aspect-ratio:200 / 124; display:block; overflow:visible; }
.og-arc { transition:stroke-width .2s ease; }
.oc-animate .og-arc { animation:ogDraw 1.1s cubic-bezier(.33,0,.2,1) both; }
@keyframes ogDraw { from { stroke-dasharray:0 100; } to { stroke-dasharray:var(--p) 100; } }

/* big % + caption, sitting in the open bottom of the semicircle */
.og-gauge-center { position:absolute; left:0; right:0; bottom:8px;
    display:flex; flex-direction:column; align-items:center; pointer-events:none; }
.og-pct { font-size:34px; font-weight:700; letter-spacing:-1.5px; line-height:1;
    color:var(--mud-palette-text-primary); font-variant-numeric:tabular-nums; }
.oc-animate .og-pct { animation:ocValueIn .6s ease both .15s; }
@keyframes ocValueIn { from { opacity:0; transform:scale(.82); } to { opacity:1; transform:scale(1); } }
.og-cap { font-size:10.5px; font-weight:600; letter-spacing:.3px; color:var(--mud-palette-text-secondary); margin-top:3px; }

/* sparkline column */
.og-side { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; padding-top:6px; }
.og-side-cap { font-size:9.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:var(--mud-palette-text-secondary); }
.og-side-pct { letter-spacing:0; color:#10B981; font-variant-numeric:tabular-nums; }
.og-side-pct .pk { color:var(--mud-palette-text-secondary); font-weight:600; }
.og-spark { width:100%; height:48px; display:block; }
.og-spark-line { fill:none; stroke:#10B981; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.og-spark-area { stroke:none; }
.oc-animate .og-spark-line { stroke-dasharray:340; stroke-dashoffset:340; animation:ogSpark 1.2s ease both .2s; }
.oc-animate .og-spark-area { animation:fadeIn .8s ease both .5s; }
@keyframes ogSpark { to { stroke-dashoffset:0; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* outcome stat grid */
.og-stats { display:grid; grid-template-columns:1fr 1fr; gap:4px 16px; margin-top:14px;
    padding-top:12px; border-top:1px solid var(--mud-palette-divider); }
.oc-animate .og-stats { animation:fadeUp .5s ease both .35s; }
@keyframes fadeUp { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.og-stat { display:flex; align-items:center; gap:8px; font-size:12.5px; padding:2px 0; }
.og-stat-dot { width:9px; height:9px; border-radius:3px; flex:0 0 auto; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.og-stat-name { color:var(--mud-palette-text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.og-stat-count { margin-left:auto; flex:0 0 auto; font-weight:700; font-variant-numeric:tabular-nums; color:var(--mud-palette-text-primary); }
.og-stat-pct { flex:0 0 auto; width:34px; text-align:right; font-size:11px; color:var(--mud-palette-text-secondary); font-variant-numeric:tabular-nums; }

.oc-empty {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    height:200px; color:var(--mud-palette-text-secondary); font-size:13px;
}
.oc-empty .mud-icon-root { font-size:40px; opacity:.4; }

/* Responsive: collapse the dashboard grid, then stack gauge over sparkline */
@media (max-width:900px) { .dash-grid { grid-template-columns:1fr; } }
@media (max-width:560px) {
    .og-wrap { flex-direction:column; align-items:stretch; }
    .og-gauge-box { align-self:center; }
    .og-stats { grid-template-columns:1fr; }
}

.bar-chart {
    display:flex; align-items:flex-end; gap:4px; height:230px;
    padding:8px 4px 28px; position:relative;
    border-left:1px solid var(--mud-palette-lines-default);
    border-bottom:1px solid var(--mud-palette-lines-default);
}
.bar-chart .bar {
    flex:1;
    background:linear-gradient(180deg,var(--mud-palette-primary) 0%,var(--mud-palette-primary-darken) 100%);
    border-radius:3px 3px 0 0; position:relative; min-height:2px;
}
.bar-chart .bar:hover { filter:brightness(1.08); }
.bar-chart .lbl {
    position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
    font-size:10.5px; color:var(--mud-palette-text-secondary); font-variant-numeric:tabular-nums;
}
.bar-chart .vtop {
    position:absolute; top:-16px; left:50%; transform:translateX(-50%);
    font-size:10px; color:var(--mud-palette-text-primary); font-weight:600;
}

/* Axis titles for the Calls-by-Hour chart — the bars already carry per-hour tick
   labels, these name what each axis MEANS (y = number of calls, x = hour of day). */
.bar-chart-wrap { display:flex; align-items:stretch; gap:6px; }
.bar-chart-wrap .bar-chart { flex:1; min-width:0; }
.bar-chart-wrap .axis-y {
    flex:0 0 auto; align-self:center;
    writing-mode:vertical-rl; transform:rotate(180deg);
    font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
    color:var(--mud-palette-text-secondary);
    padding-bottom:28px;   /* offset the chart's x-tick gutter so it centers on the bars */
}
.axis-x {
    text-align:center; margin-top:8px;
    font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
    color:var(--mud-palette-text-secondary);
}

.mini-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
    border-radius: 0px 0px 15px 15px;
    border: 1px solid #cee5f9;
}

    .mini-table th {
        background-color: #cee5f9;
    }

.mini-table th, .mini-table td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--mud-palette-divider); }
.mini-table th { font-size:10.5px; text-transform:uppercase; color:var(--mud-palette-text-secondary); letter-spacing:.4px; font-weight:600; }
.mini-table tr:last-child td { border-bottom:0; }

.health-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--mud-palette-divider); }
.health-row:last-child { border-bottom:0; }
.health-row .hn { flex:1; font-size:13px; color:var(--mud-palette-text-primary); }
.health-row .hv { font-size:12px; color:var(--mud-palette-text-secondary); font-variant-numeric:tabular-nums; }
.health-row .mud-icon-root { font-size:16px; }

/* ============================================================================
   Pills — tone-coded status / outcome / sentiment indicators
   ============================================================================ */

.pill {
    display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px;
    border-radius:11px; font-size:11.5px; font-weight:500; white-space:nowrap;
}
.pill .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.success { background:#E8F5E9 !important; color:#2E7D32 !important; }
.pill.warning { background:#FFF4E5 !important; color:#ED6C02 !important; }
.pill.error   { background:#FDECEA !important; color:#D32F2F !important; }
.pill.info    { background:#E1F5FE !important; color:#0288D1 !important; }
.pill.default { background:rgba(0, 0, 0, .08) !important; color:#596174 !important; border:1px solid #E6E8EF !important; }
/* Theme-blue tone — theme primary text on a light tint of the same blue.
   Used for Cancelled campaign-queue tasks so they read distinct from the
   gray Pending default. */
.pill.primary { background:rgba(30, 136, 229, .12) !important; color:#1E88E5 !important; }

/* ============================================================================
   DataGrid cell helpers
   ============================================================================ */

.cell-date .abs { color:var(--mud-palette-text-primary); font-size:13px; }
.cell-date .rel { color:var(--mud-palette-text-secondary); font-size:11.5px; font-variant-numeric:tabular-nums; }

.cell-patient { display:flex; align-items:center; gap:10px; }
.cell-patient .avatar-sm {
    width:30px; height:30px; border-radius:50%;
    background:var(--mud-palette-primary-lighten); color:var(--mud-palette-primary-darken);
    display:grid; place-items:center; font-weight:600; font-size:11.5px; flex-shrink:0;
}
.cell-patient .name  { font-weight:500; line-height:1.2; }
.cell-patient .phone { font-size:11.5px; color:var(--mud-palette-text-secondary); font-variant-numeric:tabular-nums; }

.cell-dir { display:inline-flex; align-items:center; gap:6px; color:var(--mud-palette-text-secondary); }
.cell-dir .mud-icon-root, .cell-dir .material-icons { font-size:15px; }
.cell-dir.in  .mud-icon-root, .cell-dir.in  .material-icons { color:var(--mud-palette-success); }
.cell-dir.out .mud-icon-root, .cell-dir.out .material-icons { color:var(--mud-palette-primary); }
.cell-dur { font-variant-numeric:tabular-nums; color:var(--mud-palette-text-secondary); text-align:right; }

/* MudDataGrid row selection */
.mud-table-row.mud-selected-item,
.mud-data-grid-row.mud-selected-item {
    background:var(--mud-palette-primary-lighten) !important;
}
.mud-table-row.mud-selected-item td:first-child,
.mud-data-grid-row.mud-selected-item td:first-child {
    box-shadow:inset 3px 0 0 var(--mud-palette-primary);
}

/* ============================================================================
   Conversations drawer
   ============================================================================ */

/* Drawer header row */
.dh {
    padding:14px 18px; border-bottom:1px solid var(--mud-palette-divider);
    display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.dh .mud-icon-root, .dh .material-icons { color:var(--mud-palette-primary); }
.dh .title { font-size:14px; font-weight:600; flex:0 0 auto; }
.dh .cid {
    font-size:11px; color:var(--mud-palette-text-secondary);
    font-family:'JetBrains Mono',monospace;
    background:var(--mud-palette-background-grey); padding:2px 6px; border-radius:4px;
}

/* Patient header strip */
.patient-hdr {
    display:flex; align-items:center; gap:12px; padding:16px 18px;
    background:var(--mud-palette-background-grey);
    border-bottom:1px solid var(--mud-palette-divider); flex-shrink:0;
}
.patient-hdr .av {
    width:44px; height:44px; border-radius:50%;
    background:var(--mud-palette-primary-lighten); color:var(--mud-palette-primary-darken);
    display:grid; place-items:center; font-weight:600; font-size:15px; flex-shrink:0;
}
.patient-hdr .name { font-weight:600; font-size:15px; }
.patient-hdr .meta { font-size:12px; color:var(--mud-palette-text-secondary); margin-top:2px; display:flex; gap:10px; flex-wrap:wrap; }
.patient-hdr .meta .mud-icon-root,
.patient-hdr .meta .material-icons { font-size:12px; vertical-align:middle; }

.dbody { overflow-y:auto; flex:1; min-height:0; }

/* Sections */
.sec { padding:16px 18px; border-bottom:1px solid var(--mud-palette-divider); }
.sec:last-child { border-bottom:0; }
.sec-title {
    font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px;
    color:var(--mud-palette-text-secondary); margin:0 0 10px;
    display:flex; align-items:center; gap:8px;
}
.sec-title .tag {
    font-size:10px; font-weight:600; padding:2px 6px; border-radius:4px;
    background:var(--mud-palette-primary-lighten); color:var(--mud-palette-primary-darken); letter-spacing:.3px;
    text-transform:none;
}
.sec-title .right {
    margin-left:auto; font-size:11px; font-weight:500;
    color:var(--mud-palette-text-secondary); text-transform:none; letter-spacing:0;
}

/* AI Summary */
.paper-ai {
    background:linear-gradient(180deg,var(--mud-palette-primary-lighten) 0%,var(--mud-palette-background-grey) 100%);
    border:1px solid var(--mud-palette-lines-default); border-radius:10px;
    padding:14px; box-shadow:0 1px 2px rgba(20,27,45,.06);
}
.paper-ai .row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.paper-ai .mk {
    width:22px; height:22px; border-radius:6px;
    background:var(--mud-palette-primary); color:#fff;
    display:grid; place-items:center; font-size:11px; font-weight:700;
}
.paper-ai .lb { font-size:11px; color:var(--mud-palette-primary-darken); font-weight:600; letter-spacing:.4px; text-transform:uppercase; }
.paper-ai p { margin:0; font-size:13.5px; line-height:1.55; color:var(--mud-palette-text-primary); }

/* Metadata grid */
.meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
.meta-grid .k { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--mud-palette-text-secondary); margin-bottom:2px; }
.meta-grid .v { font-size:13px; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:6px; color:var(--mud-palette-text-primary); }
.meta-grid .v .mud-icon-root, .meta-grid .v .material-icons { font-size:14px; color:var(--mud-palette-text-secondary); }

/* Chat bubbles */
.bubble-row { display:flex; margin-bottom:10px; gap:8px; }
.bubble-row.ai { justify-content:flex-start; }
.bubble-row.patient { justify-content:flex-end; }
.bubble { max-width:78%; padding:9px 12px; border-radius:12px; font-size:13px; line-height:1.5; }
.bubble-row.ai .bubble {
    background:var(--mud-palette-background-grey); color:var(--mud-palette-text-primary);
    border:1px solid var(--mud-palette-lines-default); border-top-left-radius:3px;
}
.bubble-row.patient .bubble { background:var(--mud-palette-primary); color:#fff; border-top-right-radius:3px; }
.bubble .ts { display:block; font-size:10px; opacity:.7; margin-bottom:2px; font-variant-numeric:tabular-nums; }
.sp-mk {
    width:24px; height:24px; border-radius:50%;
    background:var(--mud-palette-primary); color:#fff;
    display:grid; place-items:center; flex-shrink:0; align-self:flex-end;
}
.sp-mk .mud-icon-root, .sp-mk .material-icons { font-size:14px; }

/* Related calls */
.rel-list { display:flex; flex-direction:column; gap:6px; }
.rel-item {
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; border:1px solid var(--mud-palette-lines-default); border-radius:6px;
    background:var(--mud-palette-background-grey); cursor:pointer;
    transition:background .12s, border-color .12s;
}
.rel-item:hover { background:var(--mud-palette-primary-lighten); border-color:var(--mud-palette-primary) !important; }
.rel-item .when { font-size:12px; color:var(--mud-palette-text-secondary); min-width:92px; font-variant-numeric:tabular-nums; }
.rel-item .mud-icon-root, .rel-item .material-icons { font-size:14px; }
.rel-item .arrow { margin-left:auto; color:var(--mud-palette-text-disabled); }

/* Action buttons */
.btnrow { display:flex; gap:8px; flex-wrap:wrap; }
.btn {
    display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px;
    border-radius:6px; border:1px solid var(--mud-palette-lines-default);
    background:var(--mud-palette-surface); color:var(--mud-palette-text-primary);
    font:inherit; font-size:12.5px; font-weight:500; cursor:pointer;
}
.btn:hover { background:var(--mud-palette-background-grey); }
.btn .mud-icon-root, .btn .material-icons { font-size:14px; }
.btn.primary { background:var(--mud-palette-primary); color:#fff; border-color:var(--mud-palette-primary); }
.btn.primary:hover { background:var(--mud-palette-primary-darken); }

/* Audio card */
.audio-card { background:var(--mud-palette-background-grey); border:1px solid var(--mud-palette-lines-default); border-radius:10px; padding:12px; }
.audio-card audio { width:100%; height:36px; outline:none; }
.audio-meta { display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:11.5px; color:var(--mud-palette-text-secondary); }
.audio-meta a { color:var(--mud-palette-primary); text-decoration:none; font-weight:500; }
.audio-meta a:hover { text-decoration:underline; }

/* Sentiment sparkline */
.senti { background:var(--mud-palette-background-grey); border:1px solid var(--mud-palette-lines-default); border-radius:6px; padding:10px 12px; }
.senti .lg { display:flex; justify-content:space-between; font-size:10.5px; color:var(--mud-palette-text-secondary); margin-top:4px; font-variant-numeric:tabular-nums; }

/* MudDrawer override — match preview drawer position/shadow */
.mud-drawer--right.mud-drawer-open { box-shadow:0 10px 28px rgba(20,27,45,.18),0 4px 12px rgba(20,27,45,.1) !important; }
.mud-drawer-content { display:flex; flex-direction:column; overflow:hidden; }

/* ============================================================================
   SearchableMultiSelect — searchable + multi-select filter control.
   Hosted inside a `.mud-input.ms-host` box so the trigger matches the sibling
   Specialty / Priority filter boxes exactly (same height, border, alignment).
   ============================================================================ */
/* Fixed-width box: never grows/shrinks as the selected-text summary changes — the
   summary truncates with an ellipsis instead of stretching the box. (No overflow:hidden
   here — the dropdown menu is absolutely positioned and must escape the box.) */
.ms-host { position:relative; flex:0 0 auto; }
.ms-root { display:flex; align-items:center; flex:1 1 auto; min-width:0; }

/* Trigger — renders like the native <input>/<select> inside .mud-input. */
.ms-trigger {
    display:flex; align-items:center; gap:6px; width:100%; min-width:0; height:100%;
    border:0; background:transparent; padding:0; margin:0; cursor:pointer; font:inherit;
    color:var(--mud-palette-text-primary);
}
.ms-value { flex:1 1 auto; min-width:0; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.ms-value.ph { color:var(--mud-palette-text-secondary); }
.ms-arrow { flex:0 0 auto; font-size:18px !important; color:var(--mud-palette-text-secondary); transition:transform .15s; }
.ms-root.open .ms-arrow { transform:rotate(180deg); }

/* Click-away backdrop + floating menu. */
.ms-backdrop { position:fixed; inset:0; z-index:1400; background:transparent; }
.ms-menu {
    position:absolute; z-index:1401; top:calc(100% + 5px); left:0; width:264px; padding:8px;
    background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default);
    border-radius:10px; box-shadow:0 10px 28px rgba(20,27,45,.18), 0 4px 12px rgba(20,27,45,.10);
}

/* Search */
.ms-search {
    display:flex; align-items:center; gap:8px; height:38px; padding:0 10px;
    border:1px solid var(--mud-palette-lines-default); border-radius:8px; background:var(--mud-palette-surface);
    transition:border-color .15s, box-shadow .15s;
}
.ms-search:focus-within { border-color:var(--mud-palette-primary); box-shadow:0 0 0 3px rgba(30,136,229,.12); }
.ms-search input { border:0; outline:none; background:transparent; font:inherit; font-size:13.5px; width:100%; color:var(--mud-palette-text-primary); }
.ms-search-ic { font-size:18px !important; color:var(--mud-palette-text-secondary); flex:0 0 auto; }
.ms-search-x { font-size:16px !important; color:var(--mud-palette-text-secondary); cursor:pointer; border-radius:50%; flex:0 0 auto; }
.ms-search-x:hover { background:var(--mud-palette-background-grey); color:var(--mud-palette-text-primary); }

/* Toolbar */
.ms-tools { display:flex; align-items:center; justify-content:space-between; padding:8px 2px 6px; }
.ms-count { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--mud-palette-text-secondary); }
.ms-tools-actions { display:flex; align-items:center; gap:12px; }
.ms-link { border:0; background:transparent; cursor:pointer; font:inherit; font-size:12px; font-weight:600; color:var(--mud-palette-primary); padding:0; }
.ms-link:hover { text-decoration:underline; }

/* Options */
.ms-list { max-height:240px; overflow-y:auto; margin:0 -4px; padding:0 4px; }
.ms-list::-webkit-scrollbar { width:8px; }
.ms-list::-webkit-scrollbar-thumb { background:var(--mud-palette-lines-default); border-radius:8px; border:2px solid var(--mud-palette-surface); }
.ms-opt {
    display:flex; align-items:center; gap:10px; height:36px; padding:0 8px; border-radius:8px; cursor:pointer;
    font-size:13.5px; color:var(--mud-palette-text-primary); margin:0;
}
.ms-opt:hover { background:var(--mud-palette-background-grey); }
.ms-opt.sel { background:rgba(30,136,229,.08); }
.ms-opt input[type=checkbox] { width:16px; height:16px; flex:0 0 auto; accent-color:var(--mud-palette-primary); cursor:pointer; margin:0; }
.ms-opt-text { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-opt.sel .ms-opt-text { font-weight:600; }
.ms-empty { padding:18px; text-align:center; color:var(--mud-palette-text-secondary); font-size:12.5px; }

/* ============================================================================
   Settings page
   ============================================================================ */

.tabs {
    display: flex;
    gap: 0;
    /*    background: var(--mud-palette-surface);*/
    border: 0;
    background: transparent;
    border-bottom: 1px solid #c0c5cc;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin: 0 28px 0;
}

.tab {
    padding:12px 20px; font-size:13px; font-weight:500;
    color:var(--mud-palette-text-secondary); cursor:pointer;
    border-bottom:2px solid transparent;
    display:flex; align-items:center; gap:6px;
    background:transparent; 
    border-left:0; border-right:0; border-top:0;
    font-family:inherit;
}
.tab .mud-icon-root, .tab .material-icons { font-size:16px; }
.tab:hover { color:var(--mud-palette-text-primary); }
.tab.on { color:var(--mud-palette-primary); border-bottom-color:var(--mud-palette-primary); background:var(--mud-palette-primary-lighten); }

.tab-body { margin:0 28px 28px; border:1px solid var(--mud-palette-lines-default); border-top:0; border-bottom-left-radius:8px; border-bottom-right-radius:8px; background:var(--mud-palette-surface); }
.tab-body-inner { padding:16px; }

/* Dialing compliance table */
.comp-card { background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default); border-radius:10px; overflow:hidden; /*margin:0 28px 28px;*/ }
.comp-card table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.comp-card th {
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--mud-palette-text-secondary); padding:12px 16px;
    background:var(--mud-palette-background-grey);
    border-bottom:1px solid var(--mud-palette-lines-default); font-weight:600;
}
.comp-card td {
    padding:12px 16px; border-bottom:1px solid var(--mud-palette-divider);
    font-variant-numeric:tabular-nums; color:var(--mud-palette-text-primary); vertical-align:middle;
}
.comp-card tr:last-child td { border-bottom:0; }
.comp-card td input[type=number] {
    width:70px; border:1px solid var(--mud-palette-lines-default);
    border-radius:4px; padding:4px 8px; font:inherit; font-size:13px;
    text-align:center; background:var(--mud-palette-surface); color:var(--mud-palette-text-primary);
}
.comp-card td input[type=number]:focus { outline:none; border-color:var(--mud-palette-primary); box-shadow:0 0 0 2px rgba(30,136,229,.12); }

.comp-window { position:relative; height:20px; background:var(--mud-palette-background-grey); border-radius:10px; border:1px solid var(--mud-palette-lines-default); }
.comp-window .bar-bg { position:absolute; top:0; bottom:0; background:var(--mud-palette-primary-lighten); border-radius:10px; }
.comp-window .bar-fg { position:absolute; top:0; bottom:0; background:linear-gradient(90deg,var(--mud-palette-primary),var(--mud-palette-primary-darken)); opacity:.55; border-radius:10px; }
.comp-scale { display:flex; justify-content:space-between; font-size:10px; color:var(--mud-palette-text-secondary); margin-top:2px; font-variant-numeric:tabular-nums; }

/* Template cards */
.set-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:0 28px 28px; }
.tpl-card { background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default); border-radius:10px; padding:16px; box-shadow:0 1px 2px rgba(20,27,45,.06); }
.tpl-head { display:flex; align-items:center; margin-bottom:14px; }
.tpl-head h4 { margin:0; font-size:15px; font-weight:600; color:var(--mud-palette-text-primary); }

.switch { display:inline-flex; align-items:center; gap:8px; margin-left:auto; cursor:pointer; }
.switch .track { width:34px; height:18px; background:var(--mud-palette-primary); border-radius:9px; position:relative; }
.switch.off .track { background:var(--mud-palette-lines-default); }
.switch .thumb { position:absolute; top:2px; left:18px; width:14px; height:14px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:left .15s; }
.switch.off .thumb { left:2px; }
.switch .lbl { font-size:12px; color:var(--mud-palette-text-secondary); font-weight:500; }

.field { margin-bottom:12px; }
.field .lb { font-size:10.5px; color:var(--mud-palette-text-secondary); text-transform:uppercase; letter-spacing:.5px; font-weight:600; margin-bottom:4px; }
.field textarea, .field input[type=text] {
    width:100%; border:1px solid var(--mud-palette-lines-default);
    border-radius:6px; padding:10px 12px; font:inherit; font-size:13px;
    background:var(--mud-palette-surface); color:var(--mud-palette-text-primary); resize:vertical;
}
.field textarea:focus, .field input[type=text]:focus { outline:none; border-color:var(--mud-palette-primary); box-shadow:0 0 0 3px rgba(30,136,229,.12); }
.field .help { font-size:11px; color:var(--mud-palette-text-secondary); margin-top:4px; }
.tpl-foot { font-size:11px; color:var(--mud-palette-text-secondary); }

/* Tenant identity */
.tenant-identity { padding:24px; }
.tenant-identity h3 { margin:0 0 16px; font-size:15px; font-weight:600; color:var(--mud-palette-text-primary); }
.tenant-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.tenant-field .lb { font-size:10.5px; color:var(--mud-palette-text-secondary); text-transform:uppercase; letter-spacing:.5px; font-weight:600; margin-bottom:4px; }
.tenant-field input[type=text] {
    width:100%; border:1px solid var(--mud-palette-lines-default);
    border-radius:6px; padding:10px 12px; font-family:'JetBrains Mono',monospace; font-size:13px;
    background:var(--mud-palette-background-grey); color:var(--mud-palette-text-primary);
}
/* Editable inputs get the same surface background as the select boxes; the grey
   fill stays only on the read-only fields to signal they can't be edited. */
.tenant-field input[type=text]:not([readonly]) {
    background-color:var(--mud-palette-surface);
}
.tenant-field input[type=text]:not([readonly]):focus {
    outline:none; border-color:var(--mud-palette-primary);
    box-shadow:0 0 0 3px rgba(30,136,229,.20);
}
/* Bootstrap-style form-select for the Date Format / Divider dropdowns. */
.tenant-field select {
    width:100%; border:1px solid var(--mud-palette-lines-default);
    border-radius:6px; padding:10px 36px 10px 12px; font:inherit; font-size:13px;
    color:var(--mud-palette-text-primary); background-color:var(--mud-palette-surface);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23596174' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; background-size:14px 11px;
    -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.tenant-field select:hover  { border-color:var(--mud-palette-text-secondary); }
.tenant-field select:focus  {
    outline:none; border-color:var(--mud-palette-primary);
    box-shadow:0 0 0 3px rgba(30,136,229,.20);
}
.tenant-note { margin-top:16px; font-size:11.5px; color:var(--mud-palette-text-secondary); line-height:1.5; }

/* ── Provider Directory ── */
.pd-toolbar { display:flex; align-items:center; gap:12px; /*margin:0 28px 12px;*/ }
.pd-search { display:flex; align-items:center; gap:6px; flex:0 1 360px;
    border:1px solid var(--mud-palette-lines-default); border-radius:8px; padding:6px 12px;
    background:var(--mud-palette-surface); color:var(--mud-palette-text-secondary); }
.pd-search input { border:0; outline:0; flex:1; font:inherit; font-size:13px; background:transparent; color:var(--mud-palette-text-primary); }

/* Clearable search boxes. js/inputfilter.js toggles `.has-text` on the .js-search wrapper as the
   input gains/loses text; the ✕ button clears it. Works inside both .pd-search and .mud-input. */
.js-search .js-clear {
    display:none; align-items:center; justify-content:center; flex:0 0 auto;
    border:0; background:transparent; cursor:pointer; padding:2px; line-height:0;
    border-radius:50%; color:var(--mud-palette-text-secondary);
}
.js-search.has-text .js-clear { display:inline-flex; }
.js-search .js-clear:hover { background:rgba(0,0,0,.06); color:var(--mud-palette-text-primary); }
.js-search .js-clear .material-icons { font-size:16px; }

.pd-badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11.5px; font-weight:600; }
.pd-badge.on  { background:rgba(46,160,67,.14);  color:#2EA043; }
.pd-badge.off { background:var(--mud-palette-background-grey); color:var(--mud-palette-text-secondary); }

/* Drawer form */
.pd-form { padding:18px 20px 28px; overflow-y:auto; }
.pd-section { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
    color:var(--mud-palette-primary); margin:18px 0 10px; padding-bottom:6px;
    border-bottom:1px solid var(--mud-palette-divider); }
.pd-form .pd-section:first-child { margin-top:0; }
.pd-row { display:flex; gap:12px; }
.pd-toggle { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--mud-palette-text-primary); margin-top:4px; }

.pd-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.pd-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 6px 3px 10px;
    background:var(--mud-palette-primary-lighten); color:var(--mud-palette-primary);
    border-radius:12px; font-size:12px; font-weight:500; }
.pd-chip button { border:0; background:transparent; cursor:pointer; color:inherit;
    font-size:15px; line-height:1; padding:0 2px; }
.pd-chip button:hover { color:var(--mud-palette-error); }

/* ── Consent Registry ── */
.cn-badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11.5px; font-weight:600; }
.cn-badge.ok    { background:rgba(46,160,67,.14); color:#2EA043; }
.cn-badge.muted { background:var(--mud-palette-background-grey); color:var(--mud-palette-text-secondary); }
.cn-flag { display:inline-block; margin-right:4px; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600;
    background:rgba(211,47,47,.12); color:var(--mud-palette-error); }

.cn-warn { display:flex; align-items:flex-start; gap:8px; margin-bottom:14px; padding:10px 12px;
    border-radius:8px; font-size:12.5px; line-height:1.45;
    background:rgba(237,108,2,.10); border:1px solid rgba(237,108,2,.35); color:var(--mud-palette-warning); }
.cn-warn .mud-icon-root { flex:0 0 auto; margin-top:1px; }

.cn-toggle { display:flex; align-items:center; gap:12px; padding:8px 0; }
.cn-toggle .cn-toggle-text { flex:1; }
.cn-toggle-text .t { font-size:13px; font-weight:600; color:var(--mud-palette-text-primary); }
.cn-toggle-text .s { font-size:11.5px; color:var(--mud-palette-text-secondary); margin-top:1px; }
.cn-divider { height:1px; background:var(--mud-palette-divider); margin:6px 0; }

.cn-history { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.cn-hrow { display:flex; gap:10px; padding:8px 10px; border:1px solid var(--mud-palette-lines-default);
    border-radius:8px; background:var(--mud-palette-background-grey); }
.cn-hwhen { flex:0 0 92px; font-size:11px; color:var(--mud-palette-text-secondary); font-variant-numeric:tabular-nums; }
.cn-hbody { flex:1; display:flex; flex-direction:column; gap:2px; }
.cn-haction { font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--mud-palette-primary); }
.cn-hflags { font-size:12px; color:var(--mud-palette-text-primary); }
.cn-hby { font-size:11px; color:var(--mud-palette-text-secondary); }

/* ============================================================================
   MudDataGrid overrides — match preview table styling exactly
   MudBlazor renders thead th as .mud-table-cell inside .mud-table-head;
   the header content is wrapped in a .column-header div > .header-label span.
   ============================================================================ */

/* ── Header cells ── */
.mud-data-grid .mud-table-head .mud-table-cell {
    padding: 10px 14px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    color: #596174 !important;
    background: #F7F8FB !important;
    border-bottom: 1px solid #E6E8EF !important;
    white-space: nowrap !important;
    height: auto !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}

/* Reset the inner column-header wrapper so it inherits all typography above */
.mud-data-grid .column-header {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    cursor: default !important;
    gap: 4px !important;
}
.mud-data-grid .header-label {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    line-height: inherit !important;
    overflow: visible !important;
    white-space: nowrap !important;
}
/* Hide sort icon in non-sortable / hide excess space from sort button */
.mud-data-grid .column-options { display: none !important; }

/* ── Body cells ── */
.mud-data-grid .mud-table-body .mud-table-cell {
    padding: 11px 14px;
    border-bottom: 1px solid #EEF0F5 !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    color: #1E2432 !important;
    line-height: 1.4 !important;
    height: auto !important;
}

/* Remove border on last row */
.mud-data-grid .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: 0 !important;
}

/* Hover row background — scoped to the BODY so hovering the header row
   (thead is also a .mud-table-row) doesn't repaint the header cells. */
.mud-data-grid.mud-table-hover .mud-table-body .mud-table-row:hover .mud-table-cell {
    background: #F7F8FB !important;
}

/* Pager row — keep compact */
.mud-data-grid .mud-table-pagination-toolbar {
    background-color: white !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    border-top: 1px solid #E6E8EF !important;
    min-height: unset !important;
}


.svai-sticky-scroll {
    flex: none !important;
    height: calc(100vh - var(--mud-appbar-height, 56px));
    overflow-y: auto;
    background: var(--mud-palette-background, #F7F8FB);
    --svai-thead-top: 0px;
}

.svai-sticky-grid,
.svai-sticky-grid .mud-data-grid,
.svai-sticky-grid .mud-table-container { overflow: visible !important; }

/*.svai-sticky-grid {
    border-radius: 0 !important;
}*/
.svai-sticky-grid .mud-data-grid .mud-table-head .mud-table-cell {
    color: #ffffff !important;
    background: #1E88E5 !important;
    position: sticky !important;
    top: var(--svai-thead-top, 0px) !important;
    z-index: 20;
}

.svai-sticky-grid.is-stuck::before {
    content: "";
    position: sticky;
    top: 0;
    z-index: 21;
    display: block;
    height: var(--svai-thead-top, 0px);
    margin: 0 -1px calc(-1 * var(--svai-thead-top, 0px));
    background: var(--mud-palette-background, #F7F8FB);
    box-shadow: inset 0 -6px 6px -6px rgba(20, 27, 45, .28);
    pointer-events: none;
}
/* Pager pinned to the bottom of the visible scroll region. Opaque background +
   thin top border so rows scrolling underneath don't bleed through. */
.svai-sticky-grid .mud-data-grid .mud-table-pagination,
.svai-sticky-grid .mud-data-grid .mud-table-pager {
    position: sticky !important;
    /* Nudged 6px lower so the footer sits closer to the very bottom edge of the
       scroll region. The opaque background still covers rows scrolling under it. */
    bottom: -1px !important;
    z-index: 25;
    background: var(--mud-palette-surface, #fff);
    border-top: 1px solid #E6E8EF;
}


.svai-sticky-toolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 30;
    background: var(--mud-palette-background, #F7F8FB);
    padding-top: 8px !important;
    padding-bottom: 12px !important;
    margin-top: 0 !important;
}


/* Conversations Hub (/conversations) — no sticky toolbar above the grid. */
.svai-stk--conv         { --svai-thead-top: 20px; }
/* Campaign Queue (/campaigns) — filter box scrolls away; thead pins below the
   common toolbar with a 20px gap (see per-page <style> in Campaigns.razor). */
.svai-stk--camp         { --svai-thead-top: 20px; }
/* Approval History (/approvals/history) — no sticky toolbar above the grid. */
.svai-stk--apphist      { --svai-thead-top: 20px; }
/* Learned Templates (/approvals/templates) — no sticky toolbar above the grid. */
.svai-stk--apptmpl      { --svai-thead-top: 20px; }
/* Provider Directory (/provider-directory) — sticky .pd-toolbar above. */
.svai-stk--provider     { --svai-thead-top: 64px; }
/* Consent Registry (/consent-registry) — sticky .pd-toolbar above. */
.svai-stk--consent      { --svai-thead-top: 64px; }
/* Facilities (/facilities) — no sticky toolbar above the grid. */
.svai-stk--facilities   { --svai-thead-top: 20px; }
/* Reminder Rules (/reminder-rules) — no sticky toolbar above the grid. */
.svai-stk--reminders    { --svai-thead-top: 20px; }
/* Facility Holidays (/facility-holidays) — facility-picker panel above. */
.svai-stk--holidays     { --svai-thead-top: 20px; }

/* ============================================================================
   Campaign Wizard
   ============================================================================ */

.wiz-steps {
    display:flex; align-items:center; padding:16px 28px 0; gap:0; flex-shrink:0;
}
.wiz-step { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.wiz-step .num {
    width:24px; height:24px; border-radius:50%; border:2px solid;
    display:grid; place-items:center; font-size:11px; font-weight:700; flex-shrink:0;
}
.wiz-step .lbl { font-size:12.5px; font-weight:500; white-space:nowrap; }
.wiz-step.future .num  { border-color:var(--mud-palette-lines-default); color:var(--mud-palette-text-disabled); background:transparent; }
.wiz-step.future .lbl  { color:var(--mud-palette-text-disabled); }
.wiz-step.active .num  { border-color:var(--mud-palette-primary); background:var(--mud-palette-primary); color:#fff; }
.wiz-step.active .lbl  { color:var(--mud-palette-primary); font-weight:600; }
.wiz-step.done .num    { border-color:#2E7D32; background:#2E7D32; color:#fff; }
.wiz-step.done .lbl    { color:var(--mud-palette-text-secondary); }
.wiz-connector         { flex:1; height:2px; background:var(--mud-palette-lines-default); margin:0 8px; min-width:20px; }
.wiz-connector.done    { background:#2E7D32; }

.wiz-body { flex:1; overflow-y:auto; padding:20px 28px 8px; min-height:0; }
.wiz-section { margin-bottom:24px; }
.wiz-section h3 {
    font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
    color:var(--mud-palette-primary); margin:0 0 14px; border-bottom:1px solid var(--mud-palette-lines-default);
    padding-bottom:8px;
}
.wiz-foot {
    padding:12px 28px 18px; border-top:1px solid var(--mud-palette-lines-default);
    display:flex; align-items:center; gap:10px; flex-shrink:0;
}

.channel-btns { display:flex; gap:8px; }
.channel-btn {
    display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 18px;
    border-radius:8px; border:1.5px solid var(--mud-palette-lines-default);
    background:var(--mud-palette-surface); color:var(--mud-palette-text-secondary);
    font:inherit; font-size:13px; font-weight:500; cursor:pointer; transition:all .12s;
}
.channel-btn:hover { border-color:var(--mud-palette-primary); color:var(--mud-palette-primary); }
.channel-btn.on {
    border-color:var(--mud-palette-primary); background:var(--mud-palette-primary-lighten);
    color:var(--mud-palette-primary-darken);
}
.channel-btn .mud-icon-root { font-size:16px; }

.state-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:6px; }
.state-chip {
    display:flex; align-items:center; gap:5px; padding:6px 8px;
    border:1px solid var(--mud-palette-lines-default); border-radius:6px;
    cursor:pointer; font-size:12.5px; background:var(--mud-palette-surface);
    color:var(--mud-palette-text-secondary); user-select:none; transition:all .1s;
}
.state-chip input[type=checkbox] { accent-color:var(--mud-palette-primary); margin:0; pointer-events:none; }
.state-chip.checked {
    border-color:var(--mud-palette-primary); background:var(--mud-palette-primary-lighten);
    color:var(--mud-palette-primary-darken);
}

.reach-pill {
    display:inline-flex; align-items:center; gap:10px; padding:12px 18px;
    background:var(--mud-palette-primary-lighten); border:1px solid var(--mud-palette-primary);
    border-radius:10px; font-size:13px; color:var(--mud-palette-primary-darken); font-weight:500;
}
.reach-pill .num { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
.reach-pill .mud-icon-root { font-size:20px; }

.tpl-preview {
    background:var(--mud-palette-background-grey); border:1px solid var(--mud-palette-lines-default);
    border-radius:8px; padding:14px;
}
.tpl-preview .body { font-size:13px; line-height:1.6; color:var(--mud-palette-text-primary); white-space:pre-wrap; }

.review-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.review-table tr:not(:last-child) td { border-bottom:1px solid var(--mud-palette-divider); }
.review-table td { padding:11px 14px; vertical-align:middle; }
.review-table td:first-child {
    width:150px; font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.5px; color:var(--mud-palette-text-secondary); white-space:nowrap;
}

/* ============================================================================
   Escalations page
   ============================================================================ */

.esc-layout { display:flex; height:100%; overflow:hidden; }

.esc-sidebar {
    width:360px; flex-shrink:0; border-right:1px solid var(--mud-palette-lines-default);
    display:flex; flex-direction:column; overflow:hidden; background:var(--mud-palette-surface);
    height:calc(100vh - 43px);   /* full viewport minus the 56px app bar */
}
.esc-sidebar-head { padding:16px 16px 12px; border-bottom:1px solid var(--mud-palette-lines-default); flex-shrink:0; }
.esc-sidebar-head h2 { font-size:15px; font-weight:600; margin:0 0 10px; color:var(--mud-palette-text-primary); }

.esc-list { overflow-y:auto; flex:1; min-height:0; }

.esc-card {
    padding:12px 16px; border-bottom:1px solid var(--mud-palette-divider);
    cursor:pointer; display:flex; flex-direction:column; gap:5px; border-left:3px solid transparent;
    transition:background .1s;
}
.esc-card:hover { background:var(--mud-palette-background-grey); }
.esc-card.selected {
    background:var(--mud-palette-primary-lighten);
    border-left-color:var(--mud-palette-primary);
}
.esc-card .esc-name {
    font-weight:600; font-size:13px; display:flex;
    align-items:center; justify-content:space-between; gap:8px;
}
.esc-card .esc-q {
    font-size:12.5px; color:var(--mud-palette-text-secondary); line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.esc-card .esc-meta {
    font-size:11px; color:var(--mud-palette-text-disabled);
    display:flex; align-items:center; gap:6px;
}
.esc-card .esc-meta .mud-icon-root { font-size:12px; }

.esc-main { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--mud-palette-background); }
.esc-empty {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    flex:1; color:var(--mud-palette-text-disabled); font-size:13px; text-align:center; gap:12px;
}
.esc-empty .mud-icon-root { font-size:52px; opacity:.4; }

.esc-detail { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.esc-detail-head {
    padding:14px 20px; border-bottom:1px solid var(--mud-palette-divider);
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0; background:var(--mud-palette-surface);
}

.esc-reply-thread {
    margin:10px 20px 20px;
    border:1px solid var(--mud-palette-lines-default);
    border-left:3px solid var(--mud-palette-primary);
    border-radius:8px; padding:14px 16px 16px;
    background:var(--mud-palette-surface);
}
.esc-reply-label {
    display:flex; align-items:center; gap:8px; margin-bottom:10px;
    font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.5px; color:var(--mud-palette-text-secondary);
}
.esc-reply-label .mk-reply {
    width:22px; height:22px; border-radius:50%; flex-shrink:0;
    background:var(--mud-palette-primary-lighten); color:var(--mud-palette-primary-darken);
    display:grid; place-items:center; font-size:9px; font-weight:700;
}
.esc-reply-textarea {
    width:100%; border:1px solid var(--mud-palette-lines-default); border-radius:6px;
    padding:10px 12px; font:inherit; font-size:13px; resize:vertical;
    background:var(--mud-palette-background); color:var(--mud-palette-text-primary);
    min-height:100px; box-sizing:border-box;
}
.esc-reply-textarea:focus {
    outline:none; border-color:var(--mud-palette-primary);
    box-shadow:0 0 0 3px rgba(30,136,229,.12);
}

/* ── Login / auth screen ──────────────────────────────────────────────────── */
.svai-auth-shell {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#1E88E5 0%,#1565C0 100%); padding:24px;
}
.svai-login-card {
    width:100%; max-width:380px; background:var(--mud-palette-surface);
    border-radius:12px; padding:32px; box-shadow:0 18px 50px rgba(16,24,48,.28);
}
.svai-login-brand { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.svai-login-brand .mark {
    width:40px; height:40px; border-radius:9px; flex:none;
    background:linear-gradient(135deg,#1E88E5,#1565C0); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
}
.svai-login-brand .title    { font-size:17px; font-weight:600; color:var(--mud-palette-text-primary); }
.svai-login-brand .subtitle { font-size:12px; color:var(--mud-palette-text-secondary); }
.svai-login-field { display:block; margin-bottom:16px; }
.svai-login-field span {
    display:block; font-size:12px; font-weight:500; margin-bottom:6px;
    color:var(--mud-palette-text-secondary);
}
.svai-login-field input {
    width:100%; box-sizing:border-box; padding:10px 12px; font-size:14px;
    border:1px solid var(--mud-palette-lines-default); border-radius:7px;
    background:var(--mud-palette-background-grey); color:var(--mud-palette-text-primary);
}
.svai-login-field input:focus {
    outline:none; border-color:var(--mud-palette-primary);
    box-shadow:0 0 0 3px rgba(30,136,229,.12); background:#fff;
}
/* Password field with show/hide toggle */
.svai-pw-wrap { position:relative; }
.svai-pw-wrap input { padding-right:42px; }
.svai-pw-toggle {
    position:absolute; top:0; right:0; height:100%; width:40px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; cursor:pointer; padding:0;
    color:var(--mud-palette-text-secondary);
}
.svai-pw-toggle:hover  { color:var(--mud-palette-primary); }
.svai-pw-toggle:focus-visible {
    outline:none; color:var(--mud-palette-primary);
    box-shadow:0 0 0 3px rgba(30,136,229,.12); border-radius:7px;
}
/* Default: password hidden → show the "eye"; hide the "eye-off". Swap when visible. */
.svai-pw-toggle .svai-eye-off { display:none; }
.svai-pw-toggle.is-visible .svai-eye     { display:none; }
.svai-pw-toggle.is-visible .svai-eye-off { display:block; }
.svai-login-btn {
    width:100%; padding:11px; margin-top:4px; font-size:14px; font-weight:600; color:#fff;
    background:linear-gradient(135deg,#1E88E5,#1565C0); border:none; border-radius:7px; cursor:pointer;
}
    .svai-login-btn:hover {
        background: linear-gradient(135deg,#1567c2,#1565C0);
    }
.svai-login-error {
    background: var(--mud-palette-error-lighten);
    color: var(--mud-palette-text-light);
    border: 1px solid rgba(211,47,47,.25);
    border-radius: 7px;
    padding: 9px 12px;
    font-size: 13px;
    margin-bottom: 16px;
}
.svai-login-foot {
    margin-top:20px; text-align:center; font-size:11px; color:var(--mud-palette-text-disabled);
}

/* ============================================================================
   Health Query — NL-to-SQL page styles (matches HealthQuery.Web design)
   ============================================================================ */

/* Card with header bar */
.hq-card {
    background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default);
    border-radius:10px; box-shadow:0 1px 3px rgba(20,27,45,.06); overflow:hidden;
}
.hq-card-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:1px solid var(--mud-palette-lines-default);
    font-size:14px; font-weight:600; color:var(--mud-palette-text-primary);
    background:var(--mud-palette-background-grey);
}

/* "AI-Powered" pill */
.hq-pill-ai {
    display:inline-flex; align-items:center; gap:4px; padding:3px 10px;
    border:1.5px solid var(--mud-palette-primary); border-radius:14px;
    font-size:11px; font-weight:600; color:var(--mud-palette-primary);
    background:var(--mud-palette-primary-lighten); letter-spacing:.3px;
}

/* Query textarea */
.hq-textarea {
    width:100%; border:1px solid var(--mud-palette-lines-default);
    border-radius:8px; padding:14px 16px; font:inherit; font-size:14px; line-height:1.5;
    background:var(--mud-palette-surface); color:var(--mud-palette-text-primary);
    resize:vertical; min-height:80px; transition:border-color .15s, box-shadow .15s;
}
.hq-textarea:focus {
    outline:none; border-color:var(--mud-palette-primary);
    box-shadow:0 0 0 3px rgba(30,136,229,.12);
}
.hq-textarea::placeholder { color:var(--mud-palette-text-disabled); }

/* Run / action buttons */
.hq-btn-run {
    display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 20px;
    border-radius:8px; border:none; cursor:pointer;
    font:inherit; font-size:13px; font-weight:600; transition:background .15s;
    background:#2563eb; color:#fff;
}
.hq-btn-run:hover { background:#1d4ed8; }
.hq-btn-run:disabled { opacity:.55; cursor:not-allowed; }

.hq-btn-clear {
    display:inline-flex; align-items:center; gap:4px; height:38px; padding:0 14px;
    border:none; background:transparent; cursor:pointer;
    font:inherit; font-size:13px; font-weight:500; color:var(--mud-palette-text-secondary);
}
.hq-btn-clear:hover { color:var(--mud-palette-text-primary); }

.hq-btn-export {
    display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px;
    border:1.5px solid #10b981; border-radius:8px; background:transparent;
    font:inherit; font-size:12px; font-weight:600; color:#10b981; cursor:pointer;
    transition:background .15s, color .15s;
}
.hq-btn-export:hover { background:rgba(16,185,129,.08); }

/* Results metadata line */
.hq-results-meta {
    font-size:12px; font-weight:500; color:var(--mud-palette-text-secondary);
    font-variant-numeric:tabular-nums; letter-spacing:.2px;
}

/* Tabs — Data Table / Chart */
.hq-tabs {
    display:flex; align-items:center; border-bottom:1px solid var(--mud-palette-lines-default);
    padding:0 18px; gap:0;
}
.hq-tab {
    display:inline-flex; align-items:center; gap:5px;
    padding:11px 18px; font-size:13px; font-weight:600;
    color:var(--mud-palette-text-secondary); cursor:pointer;
    border:none; background:none;
    border-bottom:2.5px solid transparent;
    transition:color .15s, border-color .15s;
    font-family:inherit;
}
.hq-tab:hover { color:var(--mud-palette-text-primary); }
.hq-tab.active {
    color:#2563eb;
    border-bottom-color:#2563eb;
}
.hq-tab .mud-icon-root { font-size:16px; }

/* "Auto" pill next to Chart tab */
.hq-auto-pill {
    display:inline-flex; align-items:center; padding:2px 7px;
    border-radius:10px; font-size:10px; font-weight:600; letter-spacing:.3px;
    background:#E8F5E9; color:#2E7D32; margin-left:4px;
}

/* Chart controls bar */
.hq-chart-controls {
    display:flex; align-items:center; gap:14px; padding:12px 18px; flex-wrap:wrap;
    border-bottom:1px solid var(--mud-palette-lines-default);
    background:var(--mud-palette-background-grey);
}
.hq-chart-control {
    display:flex; align-items:center; gap:6px;
}
.hq-chart-control label {
    font-size:12px; font-weight:600; color:var(--mud-palette-text-secondary);
    white-space:nowrap;
}

/* Chart canvas container */
.hq-chart-wrap {
    position:relative; height:400px; padding:18px;
}

/* Chart not-applicable placeholder */
.hq-chart-na {
    padding:60px 24px; text-align:center; color:var(--mud-palette-text-secondary);
}
.hq-chart-na .icon {
    font-size:42px; opacity:.25; display:block; margin:0 auto 14px;
}
.hq-chart-na .title { font-size:14px; font-weight:600; margin-bottom:4px; }
.hq-chart-na .hint  { font-size:12px; opacity:.7; }

/* SQL block */
.hq-sql-block {
    padding:14px 18px; margin:0; font-size:12px;
    font-family:'JetBrains Mono', Consolas, monospace;
    background:#0f172a; color:#e2e8f0; border-radius:0 0 10px 10px;
    overflow-x:auto; line-height:1.6; white-space:pre-wrap; word-break:break-word;
}

/* Skeleton loader */
.hq-skeleton {
    height:14px; border-radius:6px; margin-bottom:10px;
    background:linear-gradient(90deg, var(--mud-palette-lines-default) 25%, var(--mud-palette-background-grey) 50%, var(--mud-palette-lines-default) 75%);
    background-size:200% 100%;
    animation:hqShimmer 1.5s infinite;
}
@keyframes hqShimmer {
    0%   { background-position:200% 0; }
    100% { background-position:-200% 0; }
}

/* KPI value styling inside HQ */
.hq-kpi-value {
    font-size:24px; font-weight:700; color:var(--mud-palette-text-primary);
    font-variant-numeric:tabular-nums; letter-spacing:-.5px; line-height:1.1;
}
.hq-kpi-label {
    font-size:11px; font-weight:600; color:var(--mud-palette-text-secondary);
    text-transform:uppercase; letter-spacing:.5px; margin-top:4px;
    display:flex; align-items:center; gap:4px;
}

/* ============================================================================
   SAMS Assistant — floating action button (all pages)
   ============================================================================ */

.sams-fab {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 0;
    height: 52px;
    border-radius: 26px;
    background : #1e88e5 !important;
    /*background:linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);*/
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(30,136,229,.4), 0 2px 6px rgba(0,0,0,.12);
    cursor: grab;
    overflow: hidden;
    padding: 0 16px;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    touch-action: none;
    user-select: none;
}
/* While dragging: pin movement to pointer (no transition/animation/hover lift) */
.sams-fab--dragging {
    transition:none !important;
    animation:none !important;
    transform:none !important;
    cursor:grabbing;
}
.sams-fab:hover {
    box-shadow:0 6px 22px rgba(30,136,229,.5), 0 3px 10px rgba(0,0,0,.15);
    transform:translateY(-2px);
    padding:0 20px 0 16px;
}
.sams-fab:active {
    transform:translateY(0);
    box-shadow:0 2px 8px rgba(30,136,229,.35);
}

.sams-fab-icon {
    display:flex; align-items:center; justify-content:center;
    width:24px; height:24px; flex-shrink:0;
}

.sams-fab-label {
    max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
    font-size:13px; font-weight:600; letter-spacing:.2px;
    transition:max-width .3s cubic-bezier(.4,0,.2,1), opacity .25s ease, margin .3s ease;
    margin-left:0;
}
.sams-fab:hover .sams-fab-label {
    max-width:160px; opacity:1; margin-left:10px;
}

/* Subtle breathing animation when idle */
@keyframes samsFabPulse {
    0%, 100% { box-shadow:0 4px 14px rgba(30,136,229,.4), 0 2px 6px rgba(0,0,0,.12); }
    50%      { box-shadow:0 4px 20px rgba(30,136,229,.55), 0 2px 8px rgba(0,0,0,.12); }
}
.sams-fab { animation:samsFabPulse 3s ease-in-out infinite; }
.sams-fab:hover { animation:none; }

/* Voice recording button */
.hq-voice-btn {
    position:absolute; right:10px; top:10px; width:36px; height:36px;
    border-radius:50%; border:1.5px solid var(--mud-palette-lines-default);
    background:var(--mud-palette-surface); display:flex; align-items:center;
    justify-content:center; cursor:pointer; padding:0;
    color:var(--mud-palette-text-secondary);
    transition:all .2s ease;
}
.hq-voice-btn:hover {
    border-color:var(--mud-palette-primary); color:var(--mud-palette-primary);
    background:var(--mud-palette-primary-lighten);
}
.hq-voice-btn:disabled { opacity:.4; cursor:not-allowed; }
.hq-voice-btn.recording {
    border-color:#ef4444; background:#fef2f2; color:#ef4444;
    animation:hqVoiceBtnPulse 1.5s ease-in-out infinite;
}
@keyframes hqVoiceBtnPulse {
    0%, 100% { box-shadow:0 0 0 0 rgba(239,68,68,.3); }
    50%      { box-shadow:0 0 0 8px rgba(239,68,68,0); }
}

/* Voice status indicator */
.hq-voice-status {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:600; color:#ef4444;
}
.hq-voice-pulse {
    display:inline-block; width:8px; height:8px;
    background:#ef4444; border-radius:50%;
    animation:hqPulseDot 1s infinite;
}
@keyframes hqPulseDot {
    0%, 100% { opacity:1; }
    50%      { opacity:.3; }
}

/* ============================================================================
   Toast / Snackbar — polished look (enhances MudBlazor's flat Filled default).
   Keeps the solid severity color + white text (readable), but adds rounded
   corners, a richer shadow, a subtle gradient sheen, tighter typography and a
   cleaner close button. Scoped to .mud-snackbar so nothing else is affected.
   ============================================================================ */
.mud-snackbar {
    border-radius:12px !important;
    box-shadow:0 12px 32px rgba(20,27,45,.26), 0 4px 12px rgba(20,27,45,.16) !important;
    padding:12px 14px !important;
    min-width:300px; max-width:440px;
    background-image:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)) !important;
    border:1px solid rgba(255,255,255,.16) !important;
}
.mud-snackbar .mud-snackbar-content         { font-size:13.5px; line-height:1.45; font-weight:500; letter-spacing:.1px; }
.mud-snackbar .mud-snackbar-content-message { padding:0 4px; }
.mud-snackbar .mud-icon-root                { font-size:20px; }

/* Close button: subtle on the colored surface, solid on hover. */
.mud-snackbar .mud-button-root.mud-icon-button {
    color:rgba(255,255,255,.85) !important;
    opacity:.85; border-radius:8px;
}
.mud-snackbar .mud-button-root.mud-icon-button:hover {
    opacity:1; background:rgba(255,255,255,.18) !important;
}

/* ============================================================================
   DARK MODE
   ----------------------------------------------------------------------------
   app.css mirrors the MudBlazor palette on :root with LIGHT values and uses a
   lot of literal hex (panels, tables, pills) that the dark palette can't reach,
   so dark mode left text/background unreadable. The `.svai-dark` class is added
   to <html> by MainLayout (js/theme.js) in lock-step with MudThemeProvider.

   1) Re-point every palette variable to dark — this alone fixes everything that
      uses var(--mud-palette-*): .panel, .btn, .mud-input, .oc-select, selected
      rows, drawers, and all native MudBlazor components/dialogs/popovers.
   2) Override the remaining literal-hex rules (data-grid header/body/HOVER/pager
      and the tinted pills/chips) that ignore the palette.
   html.svai-dark (0,1,1) out-specifies :root (0,1,0), so the remap always wins.
   ============================================================================ */
html.svai-dark {
    --mud-palette-primary:#42A5F5; --mud-palette-primary-darken:#1E88E5; --mud-palette-primary-lighten:rgba(66,165,245,.16);
    --mud-palette-secondary:#26A69A;
    --mud-palette-success:#66BB6A; --mud-palette-success-lighten:rgba(102,187,106,.16);
    --mud-palette-warning:#FFA726; --mud-palette-warning-lighten:rgba(255,167,38,.16);
    --mud-palette-error:#EF5350;   --mud-palette-error-lighten:rgba(239,83,80,.16);
    --mud-palette-info:#29B6F6;     --mud-palette-info-lighten:rgba(41,182,246,.16);
    --mud-palette-background:#0F1320; --mud-palette-surface:#171C2C; --mud-palette-background-grey:#1E2536;
    --mud-palette-divider:#262C3D; --mud-palette-lines-default:#2A3142;
    --mud-palette-text-primary:#E7EAF3; --mud-palette-text-secondary:#A4ACC2; --mud-palette-text-disabled:#6B7280;
}

/* ── Data grid: header / body / hover / pager were hardcoded light ── */
html.svai-dark .mud-data-grid .mud-table-head .mud-table-cell {
    color: var(--mud-palette-text-secondary) !important;
    background: #1E2536 !important;
    border-bottom-color: var(--mud-palette-lines-default) !important;
}
html.svai-dark .mud-data-grid .mud-table-body .mud-table-cell {
    color: var(--mud-palette-text-primary) !important;
    border-bottom-color: var(--mud-palette-divider) !important;
}
/* The reported hover bug: rows turned near-white (#F7F8FB) on hover in dark mode. */
html.svai-dark .mud-data-grid.mud-table-hover .mud-table-body .mud-table-row:hover .mud-table-cell {
    background: rgba(255,255,255,.05) !important;
}
html.svai-dark .mud-data-grid .mud-table-pagination-toolbar {
    background-color: var(--mud-palette-surface) !important;
    border-top-color: var(--mud-palette-lines-default) !important;
}
html.svai-dark .svai-sticky-grid .mud-data-grid .mud-table-pagination,
html.svai-dark .svai-sticky-grid .mud-data-grid .mud-table-pager {
    border-top-color: var(--mud-palette-lines-default) !important;
}
/* Focused input glow used a light-mode blue tint at very low alpha — bump it. */
html.svai-dark .mud-input:focus-within { box-shadow:0 0 0 3px rgba(66,165,245,.25); }

/* ── Pills: tinted backgrounds + dark text were baked in as light hex ── */
html.svai-dark .pill.success { background:rgba(102,187,106,.16) !important; color:#81C784 !important; }
html.svai-dark .pill.warning { background:rgba(255,167,38,.16)  !important; color:#FFB74D !important; }
html.svai-dark .pill.error   { background:rgba(239,83,80,.16)   !important; color:#E57373 !important; }
html.svai-dark .pill.info    { background:rgba(41,182,246,.16)  !important; color:#4FC3F7 !important; }
html.svai-dark .pill.primary { background:rgba(66,165,245,.16)  !important; color:#64B5F6 !important; }
html.svai-dark .pill.default {
    background:rgba(255,255,255,.08) !important;
    color:var(--mud-palette-text-secondary) !important;
    border-color:var(--mud-palette-lines-default) !important;
}

/* ── Escalation filter chips (same baked-in light tints) ── */
html.svai-dark .mud-chip.esc-filter.warning { background:rgba(255,167,38,.16) !important;  border-color:rgba(255,167,38,.4) !important;  color:#FFB74D !important; }
html.svai-dark .mud-chip.esc-filter.info    { background:rgba(41,182,246,.16) !important;  border-color:rgba(41,182,246,.4) !important;  color:#4FC3F7 !important; }
html.svai-dark .mud-chip.esc-filter.success { background:rgba(102,187,106,.16) !important; border-color:rgba(102,187,106,.4) !important; color:#81C784 !important; }

/* ── Left nav drawer ──
   MudBlazor gives the drawer no border, so the elevated drawer surface (#171C2C)
   meeting the darker content (#0F1320) read as a fuzzy light seam, and the
   light-mode drop-shadow is invisible on a dark background. Define the edge with
   a crisp dark border + dark shadow so it looks deliberate. */
html.svai-dark .mud-drawer.mud-drawer-pos-left {
    border-right:1px solid var(--mud-palette-lines-default);
    box-shadow:4px 0 18px rgba(0,0,0,.45), 1px 0 0 rgba(0,0,0,.6) !important;
}

/* ── Unverified caller badge + dashed avatar ──
   The tag's background fell back to a black tint (invisible on dark) and the
   dashed avatar ring vanished. Restore a subtle, readable neutral treatment. */
html.svai-dark .unverified-tag {
    color:var(--mud-palette-text-secondary) !important;
    background:rgba(255,255,255,.07) !important;
    border-color:var(--mud-palette-lines-default) !important;
}
html.svai-dark .avatar-sm.unverified,
html.svai-dark .av.unverified {
    color:var(--mud-palette-text-secondary) !important;
    border-color:var(--mud-palette-text-disabled) !important;
}