/* =============================================================================
   Command Deck theme.
   Every color routes through a CSS variable so TenantBranding can rebrand the
   whole UI at runtime (MainLayout injects overrides from the database).
   ============================================================================= */

:root {
    --cd-bg: #0a0f1a;
    --cd-bg-grid: rgba(80, 120, 200, 0.05);
    --cd-panel: #101827;
    --cd-panel-2: #131d2e;
    --cd-border: #1e2c44;
    --cd-border-bright: #2c3f5f;
    --cd-text: #e6edf8;
    --cd-dim: #7c8ea8;
    --cd-primary: #3b82f6;   /* healthy / money — Escencion brand blue */
    --cd-cyan: #38bdf8;      /* big cash numbers        */
    --cd-accent: #f5c518;    /* warning / spend yellow  */
    --cd-red: #f4566c;       /* risk red                */
    --cd-green: #34d399;     /* status: healthy         */
    /* Sans-serif reads as an application; the old monospace read as a terminal.
       Numbers keep tabular figures via .cd-value / .cd-num so columns align. */
    --cd-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cd-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
    --cd-radius: 12px;
    --cd-radius-sm: 8px;
    --cd-side-w: 232px;
}

.cd-shell {
    min-height: 100vh;
    background-color: var(--cd-bg);
    background-image: radial-gradient(120% 80% at 15% -10%, rgba(59, 130, 246, 0.07), transparent 60%);
    background-attachment: fixed;
    color: var(--cd-text);
    font-family: var(--cd-font);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Top bar ---------- */

/* iOS-material bar: deep frosted glass, hairline edge, soft drop shadow. */
.cd-topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 2rem;
    border-bottom: 1px solid rgba(151, 170, 255, 0.12);
    background: linear-gradient(180deg, rgba(14, 21, 38, 0.72), rgba(10, 15, 30, 0.62));
    position: sticky;
    top: 0;
    z-index: 10;
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.cd-brand {
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cd-text);
    text-decoration: none;
    white-space: nowrap;
}

.cd-brand { display: inline-flex; align-items: center; }

.cd-brand-logo {
    height: 34px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    margin-right: 0.8rem;
    filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.35));
}

.cd-brand-sub {
    font-weight: 400;
    letter-spacing: 0.12em;
    font-size: 0.72em;
    color: var(--cd-dim);
    margin-left: 0.5rem;
}

.cd-nav { display: flex; gap: 0.35rem; flex: 1; }

/* Segmented-control pills, iOS style: quiet at rest, glass capsule when active. */
.cd-nav a {
    color: var(--cd-dim);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78em;
    padding: 0.34rem 0.8rem;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.cd-nav a:hover {
    color: var(--cd-text);
    background: rgba(151, 170, 255, 0.07);
}

.cd-nav a.active {
    color: #e6dcff;
    background: rgba(167, 139, 250, 0.14);
    border-color: rgba(167, 139, 250, 0.35);
    box-shadow: 0 0 14px rgba(167, 139, 250, 0.18), inset 0 0 8px rgba(167, 139, 250, 0.08);
}

.cd-auth { display: flex; align-items: center; gap: 0.8rem; font-size: 0.8em; }
.cd-auth a { color: var(--cd-dim); text-decoration: none; }
.cd-auth a:hover { color: var(--cd-text); }

.cd-linkbtn {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--cd-dim); font: inherit; letter-spacing: inherit;
}
.cd-linkbtn:hover { color: var(--cd-text); }

.cd-footer {
    padding: 1rem 2rem;
    color: var(--cd-dim);
    font-size: 0.75em;
    letter-spacing: 0.1em;
    text-align: center;
}

/* ---------- Page + sections ---------- */

/* width:100% is load-bearing: .cd-main is a flex item inside the column-flex
   .cd-col, and `margin: 0 auto` cancels flex stretch — without an explicit
   width it sizes to its CONTENT (the nowrap LIVE ticker), clamps at the
   1500px max, and on phones renders 3x the screen with fixed overlays
   (drill drawer) anchored off-screen. */
.cd-main { padding: 1.5rem 2rem 3rem; width: 100%; min-width: 0; max-width: 1500px; margin: 0 auto; }

.cd-page-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.4rem;
}

.cd-chips { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.75em; color: var(--cd-dim); }

.cd-chip { display: inline-flex; align-items: center; gap: 0.35rem; letter-spacing: 0.08em; text-transform: uppercase; }

.cd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cd-primary); box-shadow: 0 0 6px var(--cd-primary); }
.cd-dot.stale { background: var(--cd-accent); box-shadow: 0 0 6px var(--cd-accent); }
.cd-dot.err { background: var(--cd-red); box-shadow: 0 0 6px var(--cd-red); }
.cd-dot.off { background: var(--cd-dim); box-shadow: none; }

.cd-clock { color: var(--cd-text); font-size: 0.85em; letter-spacing: 0.15em; }

.cd-section { margin-bottom: 2rem; }

.cd-section-title {
    display: flex; align-items: center; gap: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.22em;
    font-size: 0.8em; font-weight: 700; color: var(--cd-text);
    margin-bottom: 0.9rem;
}

.cd-section-title .num { color: var(--cd-dim); }
.cd-section-title::after { content: ""; flex: 1; height: 1px; background: var(--cd-border); }

/* ---------- Grids, cards, values ---------- */

.cd-grid { display: grid; gap: 0.8rem; }
/* Grid/flex children default to min-width:auto, which lets one long unbreakable
   string (a token, an error message) blow the whole layout out sideways. */
.cd-grid > *, .cd-split > * { min-width: 0; }
.cd-grid.cols-7 { grid-template-columns: repeat(7, 1fr); }
.cd-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.cd-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cd-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cd-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.cd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; align-items: stretch; }
.cd-split-wide-right { grid-template-columns: 5fr 4fr; }

@media (max-width: 1250px) {
    .cd-grid.cols-7, .cd-grid.cols-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    .cd-grid.cols-7, .cd-grid.cols-6, .cd-grid.cols-4, .cd-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
    .cd-split, .cd-split-wide-right { grid-template-columns: 1fr; }
    .cd-main { padding: 1rem; }
    .cd-topbar { padding: 0.8rem 1rem; flex-wrap: wrap; }
}

.cd-card {
    background: linear-gradient(180deg, var(--cd-panel-2), var(--cd-panel));
    border: 1px solid var(--cd-border);
    border-radius: 4px;
    padding: 0.85rem 1rem;
    min-height: 5.2rem;
    display: flex; flex-direction: column; justify-content: space-between; gap: 0.4rem;
}

.cd-panel {
    background: linear-gradient(180deg, var(--cd-panel-2), var(--cd-panel));
    border: 1px solid var(--cd-border);
    border-radius: 4px;
    padding: 1.1rem 1.2rem;
}

.cd-label {
    font-size: 0.68em; text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--cd-dim);
}

.cd-value { font-size: 1.7em; font-weight: 700; line-height: 1.1; color: var(--cd-text); }
.cd-value.big { font-size: 2.3em; }
.cd-value.green { color: var(--cd-primary); text-shadow: 0 0 14px color-mix(in srgb, var(--cd-primary) 45%, transparent); }
.cd-value.cyan { color: var(--cd-cyan); text-shadow: 0 0 14px color-mix(in srgb, var(--cd-cyan) 40%, transparent); }
.cd-value.yellow { color: var(--cd-accent); text-shadow: 0 0 14px color-mix(in srgb, var(--cd-accent) 40%, transparent); }
.cd-value.red { color: var(--cd-red); text-shadow: 0 0 14px color-mix(in srgb, var(--cd-red) 40%, transparent); }

.cd-sub { font-size: 0.72em; color: var(--cd-dim); letter-spacing: 0.05em; }
.cd-sub.up { color: var(--cd-primary); }
.cd-sub.down { color: var(--cd-red); }
.cd-sub.warn { color: var(--cd-accent); }

/* ---------- Bars ---------- */

.cd-bar { height: 5px; background: #1a2440; border-radius: 3px; overflow: hidden; margin-top: 0.3rem; }
.cd-bar-fill { height: 100%; background: var(--cd-primary); border-radius: 3px; box-shadow: 0 0 8px var(--cd-primary); transition: width 0.6s ease; }
.cd-bar-fill.yellow { background: var(--cd-accent); box-shadow: 0 0 8px var(--cd-accent); }
.cd-bar-fill.red { background: var(--cd-red); box-shadow: 0 0 8px var(--cd-red); }
.cd-bar-fill.cyan { background: var(--cd-cyan); box-shadow: 0 0 8px var(--cd-cyan); }

/* ---------- Radial gauge (runway) ---------- */

.cd-gauge-wrap { display: flex; align-items: center; gap: 1.6rem; }

.cd-gauge {
    --pct: 50; /* set inline from code: 0..100 */
    width: 130px; height: 130px; border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--cd-panel) 76%, transparent 77%),
        conic-gradient(var(--cd-accent) calc(var(--pct) * 1%), #1a2440 0);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; flex-shrink: 0;
    border: 1px dashed var(--cd-border-bright);
}

.cd-gauge .val { font-size: 1.6em; font-weight: 700; color: var(--cd-accent); }
.cd-gauge .cap { font-size: 0.6em; color: var(--cd-dim); text-transform: uppercase; letter-spacing: 0.15em; }

/* ---------- Lists (attention / escalations) ---------- */

.cd-list { display: flex; flex-direction: column; }

.cd-list-item {
    display: flex; align-items: flex-start; gap: 0.8rem;
    padding: 0.6rem 0.2rem;
    border-bottom: 1px dashed var(--cd-border);
}
.cd-list-item:last-child { border-bottom: none; }

.cd-list-item .t { color: var(--cd-text); font-weight: 700; font-size: 0.9em; }
.cd-list-item .d { color: var(--cd-dim); font-size: 0.78em; margin-top: 0.15rem; }

.cd-badge {
    font-size: 0.62em; font-weight: 700; letter-spacing: 0.14em;
    padding: 0.2rem 0.5rem; border-radius: 2px; border: 1px solid;
    text-transform: uppercase; flex-shrink: 0; margin-top: 0.15rem;
}
.cd-badge.risk, .cd-badge.critical { color: var(--cd-red); border-color: var(--cd-red); background: color-mix(in srgb, var(--cd-red) 12%, transparent); }
.cd-badge.watch, .cd-badge.warning { color: var(--cd-accent); border-color: var(--cd-accent); background: color-mix(in srgb, var(--cd-accent) 10%, transparent); }
.cd-badge.info { color: var(--cd-cyan); border-color: var(--cd-cyan); background: color-mix(in srgb, var(--cd-cyan) 10%, transparent); }

/* ---------- Key/value rows (pipeline panel) ---------- */

.cd-kv { display: flex; justify-content: space-between; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px dashed var(--cd-border); font-size: 0.85em; }
.cd-kv:last-child { border-bottom: none; }
.cd-kv .k { color: var(--cd-dim); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85em; }
.cd-kv .v { color: var(--cd-text); font-weight: 700; }

/* ---------- Forms (integrations / manual entry) ---------- */

.cd-input, .cd-select {
    background: #0b1122; border: 1px solid var(--cd-border); border-radius: 3px;
    color: var(--cd-text); font-family: var(--cd-font); font-size: 0.9em;
    padding: 0.45rem 0.6rem; width: 100%;
}
.cd-input:focus, .cd-select:focus { outline: none; border-color: var(--cd-primary); }

.cd-btn {
    background: color-mix(in srgb, var(--cd-primary) 15%, transparent);
    border: 1px solid var(--cd-primary); border-radius: 3px;
    color: var(--cd-primary); font-family: var(--cd-font);
    text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75em; font-weight: 700;
    padding: 0.5rem 1rem; cursor: pointer; white-space: nowrap;
}
.cd-btn:hover { background: color-mix(in srgb, var(--cd-primary) 28%, transparent); }
.cd-btn.secondary { border-color: var(--cd-border-bright); color: var(--cd-dim); background: transparent; }
.cd-btn.secondary:hover { color: var(--cd-text); }
.cd-btn.danger { border-color: var(--cd-red); color: var(--cd-red); background: color-mix(in srgb, var(--cd-red) 10%, transparent); }

.cd-form-row { display: flex; gap: 0.7rem; align-items: center; margin: 0.5rem 0; flex-wrap: wrap; }
.cd-form-row label { min-width: 180px; color: var(--cd-dim); font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.1em; }

.cd-note { color: var(--cd-dim); font-size: 0.78em; margin-top: 0.4rem; overflow-wrap: anywhere; }
.cd-note.ok { color: var(--cd-primary); }
.cd-note.err { color: var(--cd-red); }
.cd-note code { overflow-wrap: anywhere; }
.cd-panel, .cd-card { overflow-wrap: anywhere; }

.cd-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.cd-table th { text-align: left; color: var(--cd-dim); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75em; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--cd-border); }
.cd-table td { padding: 0.45rem 0.6rem; border-bottom: 1px dashed var(--cd-border); }

.cd-empty { color: var(--cd-dim); font-size: 0.85em; padding: 1rem 0; text-align: center; letter-spacing: 0.05em; }

/* ---------- Drill-down slide-over ---------- */

.cd-clickable { cursor: pointer; transition: border-color 0.15s ease; }
.cd-clickable:hover { border-color: var(--cd-primary); }

.cd-drill-backdrop { position: fixed; inset: 0; background: rgba(4, 8, 18, 0.65); z-index: 40; }

.cd-drill {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(940px, 100vw);
    background: var(--cd-panel); border-left: 1px solid var(--cd-border-bright);
    z-index: 50; overflow-y: auto; padding: 1.2rem 1.4rem;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
    font-family: var(--cd-font); color: var(--cd-text); font-size: 14px;
}

.cd-drill-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }

.cd-btn.mini { padding: 0.22rem 0.5rem; font-size: 0.62em; letter-spacing: 0.08em; }

.cd-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.cd-table th.sortable:hover { color: var(--cd-text); }

/* =============================================================================
   COMMAND DECK 2.0 - glass + glow visual layer (overrides the base above)
   ============================================================================= */

body {
    background:
        linear-gradient(var(--cd-bg-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--cd-bg-grid) 1px, transparent 1px),
        radial-gradient(1100px 700px at 85% -10%, rgba(109, 67, 224, 0.20), transparent 60%),
        radial-gradient(900px 700px at -15% 25%, rgba(24, 139, 246, 0.10), transparent 55%),
        radial-gradient(1000px 800px at 50% 120%, rgba(167, 139, 250, 0.10), transparent 60%),
        var(--cd-bg);
    background-size: 40px 40px, 40px 40px, auto, auto, auto, auto;
    background-attachment: fixed;
}

.cd-panel, .cd-card {
    background: linear-gradient(165deg, rgba(151, 170, 255, 0.07), rgba(14, 21, 38, 0.42) 45%), rgba(15, 22, 42, 0.55);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border: 1px solid rgba(151, 170, 255, 0.13);
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(2, 6, 16, 0.45);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.cd-card.cd-clickable:hover, .cd-panel.cd-clickable:hover {
    transform: translateY(-2px);
    border-color: rgba(167, 139, 250, 0.5);
    box-shadow: 0 14px 40px rgba(2, 6, 16, 0.55), 0 0 26px rgba(167, 139, 250, 0.22);
}

.cd-btn { border-radius: 999px; }
.cd-chip { border-radius: 999px; background: rgba(15, 22, 42, 0.5); border: 1px solid rgba(151, 170, 255, 0.14); padding: 0.25rem 0.7rem; }
.cd-input, .cd-select { border-radius: 10px; }
.cd-section-title::after { background: linear-gradient(90deg, rgba(167, 139, 250, 0.55), rgba(127, 215, 232, 0.2), transparent); }

.cd-drill {
    background: rgba(10, 15, 30, 0.86);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-left: 1px solid rgba(167, 139, 250, 0.25);
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.28); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(167, 139, 250, 0.45); }
::-webkit-scrollbar-track { background: transparent; }

/* ============================== MOBILE ==================================== */

@media (max-width: 640px) {
    /* clip, not hidden: overflow-x hidden on html/body silently disables
       position:sticky (the topbar), letting pages scroll under the iOS
       status bar. clip prevents sideways scroll without breaking sticky. */
    /* `clip` on html+body (hidden is only the fallback for old engines):
       clip creates NO scroll container, so position:sticky keeps the
       viewport as its scroller, and WebKit maps a root clip to the viewport
       exactly like hidden — the document stays at device width. Do NOT use
       body-only `hidden`: with html visible it propagates to the viewport and
       body's own overflow becomes visible, and iOS then lets the page pan
       sideways. The real width bug was .cd-main's flex sizing (see above),
       never this rule. */
    html, body { overflow-x: hidden; overflow-x: clip; }
    /* Guard the work column too — clip, never hidden (hidden = scroll
       container = dead sticky). Fixed overlays are unaffected either way. */
    .cd-col { overflow-x: clip; }
    body { font-size: 13px; }
    .cd-main { padding: 0.7rem 0.7rem 6rem; }
    /* topbar/nav rules below are legacy (pre-sidebar shell); the scoped
       MainLayout stylesheet now owns nav layout. Kept inert on purpose. */
    .cd-brand { font-size: 0.8rem; letter-spacing: 0.12em; }

    .cd-nav::-webkit-scrollbar { display: none; }



    .cd-chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 0.2rem; min-width: 0; max-width: 100%; }
    .cd-chips::-webkit-scrollbar { display: none; }
    .cd-chip { flex: none; white-space: nowrap; }

    .cd-grid, .cd-grid.cols-7, .cd-grid.cols-6, .cd-grid.cols-4, .cd-grid.cols-3, .cd-grid.cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .cd-split, .cd-split-wide-right { grid-template-columns: 1fr; }
    .cd-value { font-size: 1.3em; word-break: break-word; }
    .cd-panel { max-width: 100%; }

    /* Anchor to BOTH screen edges (never right:0 + 100vw, which lands
       off-screen if any ancestor ever becomes the containing block), size
       to the dynamic viewport so the bottom clears Safari's toolbar, and
       keep the header row out from under the notch in the installed PWA. */
    .cd-drill {
        left: 0; right: 0; width: auto; max-width: 100%;
        height: 100vh; height: 100dvh;
        padding: 0.8rem 0.7rem;
        padding-top: calc(0.8rem + env(safe-area-inset-top, 0px));
        padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
    }
    /* 16px inputs: iOS Safari auto-zooms the page on focus of any smaller
       input, which is a second way to end up "magnified and cut off". */
    .cd-input, .cd-select, .ai-textinput, .cdp-input { font-size: 16px; }
    .cd-table, .fin-table, .cli-table, .ads-table {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    }

    .ai-orb-fab { width: 96px; height: 96px; right: 0.15rem; bottom: 0.15rem; }
    .ai-orb-toast { bottom: 102px; right: 0.5rem; max-width: 82vw; }
    /* HUD head: clear the notch/status bar, tighter chips on one wrap line */
    .ai-hud-head {
        flex-wrap: wrap;
        padding: 0.55rem 0.7rem 0.5rem;
        padding-top: calc(0.55rem + env(safe-area-inset-top, 0px));
        row-gap: 0.35rem;
        column-gap: 0.45rem;
    }
    .ai-hud-title { font-size: 0.78rem; letter-spacing: 0.2em; }
    .ai-chip { display: none; } /* model chip is noise on a phone */
    .ai-iconbtn { font-size: 0.6rem; padding: 0.26rem 0.45rem; border-radius: 5px; }
    /* Escape hatch: a big fixed ✕ so nobody gets trapped in the console */
    .ai-closebtn {
        position: fixed;
        top: calc(0.5rem + env(safe-area-inset-top, 0px));
        right: 0.6rem;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 1.05rem;
        border-radius: 50%;
        background: rgba(10, 18, 34, 0.85);
        border-color: rgba(80, 220, 255, 0.5);
        z-index: 1001;
    }
    .ai-hud-head { padding-right: 3.4rem; } /* keep chips clear of the ✕ */
    .ai-orb-canvas { width: 190px; height: 190px; }
    .ai-transcript, .ai-inputrow { width: 94vw; }
    .ai-inputrow { margin-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px)); }
    .ai-micbtn { width: 46px; height: 46px; font-size: 1.1rem; }
    .ai-sendbtn { padding: 0.65rem 0.9rem; font-size: 0.8rem; }
    .ai-msg { max-width: 92%; }
}

/* ===== Booked-calls mobile cards (Apple-Card style grouped list) ===== */

.calls-cards { display: none; }

.cd-callcard {
    background: linear-gradient(165deg, rgba(151, 170, 255, 0.08), rgba(14, 21, 38, 0.5) 45%), rgba(15, 22, 42, 0.6);
    border: 1px solid rgba(151, 170, 255, 0.14);
    border-radius: 16px;
    padding: 0.85rem 0.9rem;
    margin-bottom: 0.65rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.cc-row { display: flex; align-items: center; gap: 0.8rem; }

.cc-avatar {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
    background: linear-gradient(140deg, #6d43e0, #a78bfa);
    box-shadow: 0 0 14px rgba(167, 139, 250, 0.35);
    letter-spacing: 0.02em;
}

.cc-main { flex: 1; min-width: 0; }

.cc-name {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-sub {
    font-size: 0.72rem;
    color: var(--cd-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-type { opacity: 0.8; }

.cc-right { flex: none; text-align: right; display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-end; }

.cc-time { font-weight: 700; font-variant-numeric: tabular-nums; }

.cc-status {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    border: 1px solid transparent;
}

.cc-status.sch { color: #7fd7e8; border-color: rgba(127, 215, 232, 0.4); }
.cc-status.done { color: #a78bfa; border-color: rgba(167, 139, 250, 0.45); }
.cc-status.ns { color: #ff8aa5; border-color: rgba(255, 138, 165, 0.45); }
.cc-status.can { color: var(--cd-dim); border-color: rgba(215, 236, 245, 0.2); }

.cc-actions {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(151, 170, 255, 0.1);
}

@media (max-width: 640px) {
    .calls-tablewrap { display: none; }
    .calls-cards { display: block; }
}

/* ===== Generic mobile card swap: any drill/table can opt in ===== */

.drill-cards { display: none; }

.cc-status.warn { color: #ffcf7d; border-color: rgba(255, 207, 125, 0.45); }

@media (max-width: 640px) {
    .drill-tablewrap { display: none; }
    .drill-cards { display: block; }
}

/* ===== Desktop motion + polish layer ===== */

.cd-spark { width: 100%; height: 30px; margin-top: 0.4rem; opacity: 0.9; }
.cd-spark polyline { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 0 5px currentColor); }
.cd-spark polygon { fill: currentColor; opacity: 0.10; }

/* Sections rise into place on load */
.cd-section { animation: cd-rise 0.5s ease both; }
.cd-section:nth-of-type(2) { animation-delay: 0.05s; }
.cd-section:nth-of-type(3) { animation-delay: 0.10s; }
.cd-section:nth-of-type(4) { animation-delay: 0.15s; }
.cd-section:nth-of-type(5) { animation-delay: 0.20s; }
@keyframes cd-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* Gradient accent sweeps across cards on hover */
.cd-card { position: relative; overflow: hidden; }
.cd-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.8), rgba(127, 215, 232, 0.5), transparent);
    opacity: 0; transition: opacity 0.2s ease;
}
.cd-card:hover::before { opacity: 1; }

/* Status dots breathe */
.cd-dot { animation: cd-breathe 2.8s ease-in-out infinite; }
.cd-dot.off { animation: none; }
@keyframes cd-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.82); opacity: 0.75; }
}

/* Nav + clock glow */
.cd-nav a { transition: color 0.15s ease, text-shadow 0.15s ease; }
.cd-nav a.active { text-shadow: 0 0 12px rgba(167, 139, 250, 0.55); }
.cd-clock { text-shadow: 0 0 10px rgba(127, 215, 232, 0.45); }

/* Table rows respond */
.cd-table tbody tr { transition: background 0.12s ease; }
.cd-table tbody tr:hover { background: rgba(167, 139, 250, 0.06); }

/* Drill drawer slides in */
.cd-drill { animation: cd-drill-in 0.22s ease-out; }
@keyframes cd-drill-in {
    from { transform: translateX(36px); opacity: 0; }
    to { transform: none; opacity: 1; }
}
.cd-drill-backdrop { animation: cd-fade 0.2s ease-out; }
@keyframes cd-fade { from { opacity: 0; } to { opacity: 1; } }

/* Buttons lift slightly */
.cd-btn { transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease; }
.cd-btn:hover:not(:disabled) { transform: translateY(-1px); }

/* Numbers align like instruments */
.cd-value { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .cd-section, .cd-drill, .cd-drill-backdrop { animation: none; }
    .cd-dot { animation: none; }
}

/* ===== Cards-first on EVERY screen size; tables become an opt-in view ===== */

.drill-cards, .calls-cards { display: block; }
.drill-tablewrap, .calls-tablewrap { display: none; }

@media (min-width: 641px) {
    .tables .drill-cards, .tables .calls-cards { display: none; }
    .tables .drill-tablewrap, .tables .calls-tablewrap { display: block; }
}

/* Desktop drill: cards flow two-up to use the drawer width */
@media (min-width: 900px) {
    .cd-drill .drill-cards, .cd-drill .calls-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem;
        align-items: start;
    }
    .cd-drill .cd-callcard { margin-bottom: 0; }
    .cd-drill.tables .drill-cards, .cd-drill.tables .calls-cards { display: none; }
}

/* ===== Visual 3.0: display typeface, atmosphere, instrument charts ===== */

/* Orbitron (self-hosted variable font, weights 400-900) for identity text only —
   data stays monospace so numbers keep their instrument feel. */
@font-face {
    font-family: "Orbitron";
    src: url("fonts/orbitron.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
}

.cd-brand { font-family: "Orbitron", var(--cd-font); letter-spacing: 0.14em; }
.cd-section-title { font-family: "Orbitron", var(--cd-font); letter-spacing: 0.1em; font-weight: 600; }
.cd-section-title .num { font-family: var(--cd-font); }

/* Aurora drift: fixed layer sandwiched between the shell's grid background and
   its content (negative z-index inside the shell's own stacking context). */
.cd-shell { position: relative; z-index: 0; }
.cd-shell::before {
    content: "";
    position: fixed;
    inset: -25%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46% 38% at 22% 28%, rgba(109, 67, 224, 0.16), transparent 70%),
        radial-gradient(50% 42% at 78% 72%, rgba(24, 139, 246, 0.10), transparent 70%),
        radial-gradient(34% 30% at 60% 10%, rgba(167, 139, 250, 0.08), transparent 70%);
    animation: cd-aurora 26s ease-in-out infinite alternate;
}
@keyframes cd-aurora {
    from { transform: translate3d(-2.5%, -1.5%, 0) rotate(-1deg) scale(1); }
    to   { transform: translate3d(2.5%, 2%, 0) rotate(1deg) scale(1.08); }
}

/* Page-to-page fade */
/* fill-mode `backwards`, NOT `both`: `both` keeps the animated transform
   applied after the entrance, and a transformed ancestor becomes the
   containing block for position:fixed — which pinned the drill drawer and
   its backdrop to .cd-main instead of the viewport. */
.cd-main { animation: cd-pagein 0.35s ease-out backwards; }
/* Opacity ONLY — no transform. Any transform on .cd-main (even a paused
   animation's start frame in a background tab) makes it the containing block
   for position:fixed, which pins the drill drawer off-screen on phones. */
@keyframes cd-pagein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Sparklines 2.0: taller, gradient area (inline fill), glowing end dot */
.cd-spark { height: 34px; }
.cd-spark-dot { filter: drop-shadow(0 0 4px currentColor); }

/* Client-health donut gauge */
.cd-donut-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.cd-donut { width: 52px; height: 52px; flex: 0 0 auto; filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.25)); }

/* Trend charts (Financials + Ads): non-uniform SVG scale, so strokes pin to px */
.fin-chartpanel, .ads-chartpanel { margin-bottom: 1rem; }
.fin-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.fin-legend { display: flex; gap: 0.9rem; }
.fin-leg {
    font-size: 0.7rem; color: var(--cd-dim); letter-spacing: 0.08em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.fin-leg i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.fin-chart { width: 100%; height: 200px; display: block; }
.fin-grid { stroke: rgba(167, 139, 250, 0.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fin-zero { stroke: rgba(255, 93, 115, 0.4); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.fin-line { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fin-line.inc { stroke: #a78bfa; filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.55)); }
.fin-line.exp { stroke: #f5c518; opacity: 0.85; }
.fin-line.net { stroke: #67e8f9; stroke-dasharray: 5 4; opacity: 0.9; }
.fin-chart-labels { display: flex; justify-content: space-between; margin-top: 0.35rem; font-size: 0.68rem; color: var(--cd-dim); letter-spacing: 0.06em; }

@media (max-width: 640px) {
    .fin-chart { height: 140px; }
    .cd-donut { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .cd-shell::before { animation: none; }
    .cd-main { animation: none; }
}

/* ===== Live activity ticker (dashboard) ===== */

.cd-ticker {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.1rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--cd-border);
    border-radius: 12px;
    background: rgba(14, 21, 38, 0.6);
    backdrop-filter: blur(8px);
    overflow: hidden;
}
.cd-ticker-label {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.68rem; letter-spacing: 0.18em; color: var(--cd-primary);
    font-family: "Orbitron", var(--cd-font); flex: 0 0 auto;
}
.cd-ticker { overflow: hidden; } /* long items must never widen the page */

.cd-ticker-items {
    display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none;
    flex: 1; min-width: 0; /* flex child: allow shrinking below content width */
    white-space: nowrap; mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.cd-ticker-items::-webkit-scrollbar { display: none; }
.cd-ticker-item { font-size: 0.78rem; color: var(--cd-text); flex: 0 0 auto; }
.cd-ticker-item .tk-ico { margin-right: 0.35rem; }
.cd-ticker-item .tk-ago { margin-left: 0.45rem; color: var(--cd-dim); font-size: 0.68rem; }
.cd-ticker-item.money { color: #b9f6ce; }
.cd-ticker-item.lead { color: #cdbcfd; }
.cd-ticker-item.call { color: #a5e6f5; }

/* ===== Drill drawer: never scroll sideways =====
   1fr grid columns have an implicit min-content floor, so one long email
   was pushing the two-up card grid wider than the drawer. Let columns
   shrink below content width and wrap long strings instead. */
.cd-drill { overflow-x: hidden; }
@media (min-width: 900px) {
    .cd-drill .drill-cards, .cd-drill .calls-cards {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}
.cd-callcard { min-width: 0; }
.cd-callcard .cc-main { min-width: 0; }
.cd-callcard .cc-name, .cd-callcard .cc-sub { overflow-wrap: anywhere; }

/* ===== Mobile feel: press feedback, sticky drill header, safe areas ===== */

/* Cards respond to touch like buttons — no iOS gray tap flash */
.cd-card.cd-clickable, .cd-callcard, .cd-panel.cd-clickable, .cd-chip, .cd-btn {
    -webkit-tap-highlight-color: transparent;
}
.cd-card.cd-clickable, .cd-callcard, .cd-panel.cd-clickable {
    transition: transform 0.1s ease;
}
.cd-card.cd-clickable:active, .cd-callcard:active, .cd-panel.cd-clickable:active {
    transform: scale(0.982);
}

/* Drill header stays pinned while you scroll the drawer, so TABLE/CLOSE
   are always reachable */
.cd-drill-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(10, 15, 30, 0.92);
    backdrop-filter: blur(8px);
    padding: 0.5rem 0;
    margin-top: -0.5rem;
}

/* iPhone notch / home-bar breathing room */
@supports (padding: env(safe-area-inset-bottom)) {
    .cd-main { padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    .cd-card.cd-clickable, .cd-callcard, .cd-panel.cd-clickable { transition: none; }
    .cd-card.cd-clickable:active, .cd-callcard:active, .cd-panel.cd-clickable:active { transform: none; }
}

/* =============================================================================
   APPENDED: Touch gestures (deckfx.js `gestures`) — swipe-to-close drill
   drawer + pull-to-refresh indicator. Do not fold into earlier sections.
   ============================================================================= */

/* Vertical scrolling inside the drawer stays native; horizontal touches are
   left to the swipe-to-close gesture handler. */
.cd-drill { touch-action: pan-y; }

/* Pull-to-refresh indicator: parked off-screen (top: -60px); deckfx.js drives
   `top` while pulling. Centered via left:50% + negative margin — NOT
   translateX(-50%) — so `transform` stays free for the wind-up rotation while
   pulling and the .spin animation while refreshing. */
.cd-ptr {
    position: fixed;
    top: -60px;
    left: 50%;
    margin-left: -20px; /* half of the 40px circle */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--cd-font);
    font-size: 1.2rem;
    line-height: 1;
    color: var(--cd-primary);
    background: linear-gradient(165deg, rgba(151, 170, 255, 0.10), rgba(14, 21, 38, 0.6) 45%), rgba(15, 22, 42, 0.85);
    border: 1px solid rgba(167, 139, 250, 0.35);
    box-shadow: 0 10px 32px rgba(2, 6, 16, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 60;
    pointer-events: none;
}

/* Past the release threshold: violet glow says "let go to refresh". */
.cd-ptr.ready {
    border-color: var(--cd-primary);
    box-shadow: 0 0 18px rgba(167, 139, 250, 0.55), 0 10px 32px rgba(2, 6, 16, 0.45);
}

/* Refresh in flight: spin the ↻ glyph. */
.cd-ptr.spin { animation: cd-ptr-spin 0.8s linear infinite; }
@keyframes cd-ptr-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cd-ptr.spin { animation: none; }
}

/* ===== Installed-PWA safe areas (tablet/desktop widths) =====
   The <=640px header handles this in MainLayout.razor.css; this covers the
   full-width topbar when the app is installed on an iPad or similar. */
@supports (padding: env(safe-area-inset-top)) {
    @media (min-width: 641px) {
        .cd-topbar { padding-top: calc(0.9rem + env(safe-area-inset-top)); }
    }
}

/* =============================================================================
   PLATFORM SHELL OVERRIDES (2026-09) — application feel, not terminal feel.
   Appended last so these win over the original rules without touching them.
   ============================================================================= */

/* Softer, rounder surfaces */
.cd-card, .cd-panel {
    border-radius: var(--cd-radius);
    background: linear-gradient(180deg, var(--cd-panel-2), var(--cd-panel));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.cd-card { padding: 1rem 1.1rem; }

/* The old scanline sweep on cards belonged to the terminal look. */
.cd-card::before { display: none; }

/* Sans-serif everywhere, but numbers stay tabular so columns line up. */
.cd-value, .cd-num, .ads-num, .cd-kv .v, .cd-clock {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.cd-value { font-weight: 650; }

/* Labels: quieter and tighter than the old wide-tracked caps. */
.cd-label {
    font-size: 0.7em;
    letter-spacing: 0.09em;
    font-weight: 600;
    color: var(--cd-dim);
}

.cd-section-title {
    letter-spacing: 0.06em;
    font-size: 0.9em;
}

/* Status pills read as data, not decoration. */
.cd-badge { border-radius: 999px; font-weight: 600; letter-spacing: 0.04em; }

.cd-input, .cd-select { border-radius: var(--cd-radius-sm); font-family: var(--cd-font); }
.cd-btn { border-radius: var(--cd-radius-sm); letter-spacing: 0.04em; font-weight: 600; }
.cd-btn.mini { border-radius: 999px; }

::-webkit-scrollbar-thumb { background: rgba(59, 130, 246, 0.3); }
::-webkit-scrollbar-thumb:hover { background: rgba(59, 130, 246, 0.5); }

/* ---- Status dot palette (endpoints, accounts, licences) ---- */
.cd-dot.ok, .cd-dot.online { background: var(--cd-green); box-shadow: 0 0 6px var(--cd-green); }
.cd-dot.warn, .cd-dot.warning { background: var(--cd-accent); box-shadow: 0 0 6px var(--cd-accent); }
.cd-dot.crit, .cd-dot.critical { background: var(--cd-red); box-shadow: 0 0 6px var(--cd-red); }
.cd-dot.offline, .cd-dot.unknown { background: var(--cd-dim); box-shadow: none; }

/* =============================================================================
   RESPONSIVE FIXES (2026-09-02)
   Appended last so they win by source order — the blocks above are untouched,
   which keeps desktop behaviour exactly as it was except where noted.
   ============================================================================= */

/* .cols-5 was never defined. Endpoints and the client Account header both use
   it, so they silently fell back to ONE column at every width — desktop
   included. This is the missing rule, not a mobile tweak. */
.cd-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1250px) {
    .cd-grid.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .cd-grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .cd-grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* .cols-2 carries dense FORM cards (Integrations, AI Settings) rather than
       compact KPI tiles. Two per row on a phone breaks names mid-word
       ("Calend ly", "GoHig hLevel") and pushes the buttons off screen, so these
       go single-column while the KPI grids above stay 2-up. */
    .cd-grid.cols-2 { grid-template-columns: minmax(0, 1fr); }

    /* Long unbroken strings (webhook URLs, tokens, account ids) must wrap
       rather than widen the card and push the layout sideways. */
    .cd-panel code,
    .cd-note code { overflow-wrap: anywhere; word-break: break-word; }

    /* Wide data tables stay horizontal scrollers, but keep the scroll inside
       the panel instead of bleeding to the screen edge. */
    .cd-panel > .cd-table,
    .cd-panel > .fin-table { max-width: 100%; }
}

/* ---- Restricted panel: router NotAuthorized for signed-in users (Components/Access/NoAccess.razor) ---- */
.cd-noaccess { max-width: 560px; margin: 8vh auto 0; padding: 2rem 1.6rem; text-align: center; border: 1px solid var(--cd-border); border-radius: var(--cd-radius); background: var(--cd-panel); }
.cd-noaccess-badge { display: inline-block; font-family: var(--cd-mono); font-size: 0.7rem; letter-spacing: 0.2em; color: var(--cd-accent); border: 1px solid var(--cd-accent); border-radius: 999px; padding: 0.25rem 0.7rem; margin-bottom: 1rem; }
.cd-noaccess h1 { font-size: 1.4rem; margin: 0 0 0.6rem; }
.cd-noaccess p { color: var(--cd-dim); line-height: 1.5; margin: 0 0 1rem; }
.cd-noaccess-links { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; align-items: center; margin-top: 1.2rem; }
.cd-noaccess-links > span { width: 100%; font-family: var(--cd-mono); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cd-dim); }
.cd-noaccess-link { padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid var(--cd-border-bright); color: var(--cd-text); text-decoration: none; font-size: 0.85rem; }
.cd-noaccess-link:hover { border-color: var(--cd-accent); color: var(--cd-accent); }
.cd-noaccess-muted { color: var(--cd-dim); font-size: 0.85rem; }