/* ================================================================
   9Vault App Theme — Visual polish aligned with devsplash.html
   Load AFTER Bootstrap 5 CDN, BEFORE inline <style> blocks.
   ================================================================ */

/* ── Google Fonts — Inter ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ================================================================
   PHASE 1 — Design Tokens & Typography
   ================================================================ */

/* ── Shared tokens (apply to both themes) ── */
:root {
    /* ── Typography ── */
    --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);

    /* ── Border radius — generous, matching landing page ── */
    --bs-border-radius:    8px;
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 12px;
    --bs-border-radius-xl: 16px;

    /* ── Shared animation token ── */
    --9v-transition:        all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Chrome (top nav / IVR toolbar) — deepest navy, like the marketing sticky
       nav. Sits BELOW the body canvas so the body reads lighter than the nav. */
    --9v-header-bg:         linear-gradient(135deg, #0a0f1c 0%, #0d1426 100%);

    /* ── Brand accent — cyan "spark" from the marketing page (used sparingly) ──
       ACCENT DISCIPLINE (light + dark): brand blue/cyan is allowed only on
       focus rings, active/selected states, links, thin accents (hairlines,
       underlines, gradient top-lines), and a single primary CTA per view.
       It is NOT used as a large surface fill — panel/card headers use the
       neutral .panel-header treatment; color there is carried by the icon. */
    --9v-accent-cyan:       #0dcaf0;
    --9v-accent-gradient:   linear-gradient(90deg, var(--bs-primary), #0dcaf0);
}

/* ── Light theme tokens ── */
[data-bs-theme="light"] {
    --bs-body-color: #1e293b;
    /* Off-white page background — reduces glare vs pure #fff */
    --bs-body-bg:           #f8fafc;
    --bs-body-bg-rgb:       248, 250, 252;
    /* Elevated surfaces (cards, modals) stay brighter to "pop" */
    --9v-surface-bg:        #ffffff;
    --9v-surface-muted:     #e9f0f8;
    --9v-surface-soft:      #e2ebf5;
    --9v-card-shadow:       0 4px 24px rgba(0, 0, 0, 0.08);
    --9v-card-hover-shadow: 0 8px 40px rgba(13, 110, 253, 0.12);
    /* Cool slate-tinted separators (matches marketing #e2e8f0/#e9eef5 hue) */
    --9v-border-light:      rgba(15, 23, 42, 0.08);
    --9v-text-muted:        #64748b;
    --9v-text-quiet-strong: #475569;
    /* Dashboard-only surfaces (higher contrast vs page — step A/B) */
    --9v-dash-card-bg:      #ffffff;
    --9v-dash-kpi-bg:       #ffffff;
    --9v-dash-border:       rgba(15, 23, 42, 0.11);
    --9v-dash-shadow:       0 1px 2px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(15, 23, 42, 0.08);
    --9v-dash-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.07), 0 10px 28px rgba(15, 23, 42, 0.1);
    --9v-dash-list-stripe:  #f1f5f9;
    /* Unified panel-header treatment — calm surface, meaning carried by icon */
    --9v-panel-header-bg:     #ffffff;
    --9v-panel-header-border: rgba(15, 23, 42, 0.10);
    --9v-panel-title:         #1e293b;
    --9v-table-head-bg:       var(--bs-secondary-bg, #e9ecef);
    --9v-table-head-color:    var(--bs-emphasis-color, #1e293b);
}

/* ── Dark theme tokens — re-based onto marketing slate/navy (#0f172a) ── */
[data-bs-theme="dark"] {
    /* Canvas — a mid-navy that sits ABOVE the chrome, mirroring the marketing
       hero (lighter body) vs the darker sticky nav. Ladder: chrome < body < cards. */
    --bs-body-bg:           #161d33;
    --bs-body-bg-rgb:       22, 29, 51;
    /* Slate-200 body text on the navy canvas */
    --bs-body-color:        #e2e8f0;
    --bs-body-color-rgb:    226, 232, 240;
    --bs-emphasis-color:    #f1f5f9;
    --bs-emphasis-color-rgb: 241, 245, 249;
    /* Bootstrap surface vars — striping, inputs, hover rows */
    --bs-secondary-bg:      #1e293b;
    --bs-secondary-bg-rgb:  30, 41, 59;
    --bs-tertiary-bg:       #273349;
    --bs-tertiary-bg-rgb:   39, 51, 73;
    --bs-border-color:      rgba(148, 163, 184, 0.18);
    --bs-border-color-translucent: rgba(148, 163, 184, 0.14);
    /* Elevated surfaces lift ABOVE the canvas so cards/modals read as panels */
    --9v-surface-bg:        #1e293b;
    --9v-surface-muted:     #243044;
    --9v-surface-soft:      #2c3a52;
    --9v-card-shadow:       0 4px 24px rgba(0, 0, 0, 0.35);
    --9v-card-hover-shadow: 0 8px 40px rgba(13, 110, 253, 0.18);
    --9v-border-light:      rgba(148, 163, 184, 0.16);
    --9v-text-muted:        #94a3b8;
    --9v-text-quiet-strong: #cbd5e1;
    /* Dashboard-only surfaces (closer to page — less busy — step A/B) */
    --9v-dash-card-bg:      color-mix(in srgb, var(--bs-body-bg) 96%, #ffffff 4%);
    --9v-dash-kpi-bg:       color-mix(in srgb, var(--bs-body-bg) 98%, #ffffff 2%);
    --9v-dash-border:       rgba(148, 163, 184, 0.12);
    --9v-dash-shadow:       none;
    --9v-dash-shadow-hover: none;
    --9v-dash-list-stripe:  color-mix(in srgb, var(--bs-body-bg) 94%, #ffffff 6%);
    /* Unified panel-header treatment — elevated navy surface, light title */
    --9v-panel-header-bg:     #243044;
    --9v-panel-header-border: rgba(148, 163, 184, 0.16);
    --9v-panel-title:         #e2e8f0;
    --9v-table-head-bg:       var(--9v-panel-header-bg);
    --9v-table-head-color:    var(--9v-panel-title);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ================================================================
   PHASE 2 — Cards, Modals & Shadows
   ================================================================ */

/* ── Cards — resting elevation + hover lift ── */
.card {
    background-color: var(--9v-surface-bg);
    border: 1px solid var(--9v-border-light);
    box-shadow: var(--9v-card-shadow);
    transition: var(--9v-transition);
}
.card:hover {
    box-shadow: var(--9v-card-hover-shadow);
}

/* ── Modals — larger radius, shadow, gradient top accent ── */
.modal-content {
    background-color: var(--9v-surface-bg);
    border-radius: var(--bs-border-radius-xl);
    box-shadow: var(--9v-card-shadow);
    border: 1px solid var(--9v-border-light);
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid var(--9v-border-light);
}
.modal-footer {
    border-top: 1px solid var(--9v-border-light);
}

/* Session timeout must outrank IVR fullscreen, nested module modals,
   import fullscreen (1070), toasts (1090), and the page-load bar (99999).
   Stays below the startup-failure panel (200000). */
#sessionWarningModal {
    z-index: 110000;
}
.modal-backdrop.session-warning-backdrop {
    z-index: 109990;
}

/* ── Offcanvas — shadow on visible edge ── */
.offcanvas {
    box-shadow: var(--9v-card-shadow);
}

/* Import preview fullscreen shell */
.iw-preview-actions-wrap {
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--9v-border-light);
    border-radius: var(--bs-border-radius-lg);
    background: color-mix(in srgb, var(--9v-surface-bg) 92%, var(--bs-body-color) 8%);
}

.iw-preview-actions-bar {
    padding: 0;
    row-gap: 0.55rem;
}

.iw-preview-actions-bar .btn {
    min-height: 2rem;
    padding-inline: 0.7rem;
}

.iw-grid-shortcuts {
    white-space: nowrap;
    margin-top: 0.35rem;
}

.iw-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(2px);
    padding: 1rem;
}

.iw-fullscreen-shell {
    height: 100%;
    width: 100%;
    background: var(--9v-surface-bg);
    border: 1px solid var(--9v-border-light);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--9v-card-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.iw-fullscreen-header,
.iw-fullscreen-footer {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--9v-border-light);
    background: color-mix(in srgb, var(--9v-surface-bg) 88%, var(--bs-body-color) 12%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.iw-fullscreen-footer {
    border-top: 1px solid var(--9v-border-light);
    border-bottom: 0;
    justify-content: flex-start;
}

.iw-fullscreen-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 0.75rem;
}

.iw-fullscreen-table-host {
    height: 100%;
    min-height: 0;
}

.iw-fullscreen-table-host .iw-preview-container {
    height: 100%;
    min-height: 0;
    max-height: none !important;
    margin-bottom: 0 !important;
    overflow: auto !important;
}

.iw-fullscreen-table-host .iw-preview-table {
    width: max-content;
    min-width: 100%;
}

.iw-editable-cell {
    cursor: text;
    outline: none;
    transition: background-color 0.15s ease;
}

.iw-row-index-cell,
.iw-col-select-header {
    cursor: pointer;
}

.iw-row-index-cell:hover,
.iw-col-select-header:hover {
    background: color-mix(in srgb, var(--bs-secondary-bg-subtle, #e2e3e5) 55%, transparent);
}

.iw-editable-cell:focus {
    background: color-mix(in srgb, var(--bs-info-bg-subtle, #cff4fc) 55%, transparent);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bs-info, #0dcaf0) 50%, transparent);
}

.iw-editable-cell.iw-cell-selected {
    background: color-mix(in srgb, var(--bs-info-bg-subtle, #cff4fc) 68%, transparent);
}

.iw-editable-cell.iw-cell-active {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bs-primary, #0d6efd) 60%, transparent);
    background: color-mix(in srgb, var(--bs-primary-bg-subtle, #cfe2ff) 70%, transparent);
}

td[contenteditable="false"].iw-editable-cell {
    cursor: default;
    background: color-mix(in srgb, var(--bs-secondary-bg, #e9ecef) 45%, transparent);
}

body.iw-preview-fullscreen-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .iw-grid-shortcuts {
        white-space: normal;
    }
    .iw-preview-actions-wrap {
        padding: 0.65rem;
    }
    .iw-fullscreen-overlay {
        padding: 0.5rem;
    }
}

/* ── Accordion — softer borders, subtle radius ── */
.accordion-item {
    border-color: var(--9v-border-light);
}
.accordion-button:not(.collapsed) {
    box-shadow: none;
}

/* ── Dropdown menus — elevation + radius ── */
.dropdown-menu {
    background-color: var(--9v-surface-bg);
    box-shadow: var(--9v-card-shadow);
    border: 1px solid var(--9v-border-light);
    border-radius: var(--bs-border-radius-lg);
}
.dropdown-item {
    border-radius: var(--bs-border-radius-sm);
    margin: 0 0.25rem;
    transition: background-color 0.15s ease;
}

/* Dialing Options visual grouping */
.dialing-mode-sheet .dialing-mode-group {
    border-color: var(--9v-border-light) !important;
    background-color: color-mix(in srgb, var(--9v-surface-bg) 94%, var(--bs-body-color) 6%);
}

.dialing-mode-sheet .form-check-inline {
    margin-right: 0.75rem;
}

/* ── Popover — matching elevation ── */
.popover {
    background-color: var(--9v-surface-bg);
    box-shadow: var(--9v-card-shadow);
    border: 1px solid var(--9v-border-light);
}


/* ================================================================
   PHASE 3 — Buttons & Transitions
   ================================================================ */

/* ── All buttons — snappy transition ── */
.btn {
    transition: var(--9v-transition);
}

/* ── Primary action buttons — subtle gradient + hover lift ── */
.btn-primary {
    background: linear-gradient(135deg, var(--bs-primary), #0a58ca);
    border-color: transparent;
}
.btn-primary:hover,
.btn-primary:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--bs-primary-rgb), 0.35);
}
.btn-primary:active {
    transform: translateY(0);
}

/* ── Top-nav readiness alert chip ── */
.readiness-alert-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.12);
    transition: var(--9v-transition);
}

.readiness-alert-chip .readiness-alert-icon {
    color: #ffc107;
    font-size: 0.9rem;
}

.readiness-alert-chip .readiness-alert-text {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

#readiness-nav-alert:hover .readiness-alert-chip,
#readiness-nav-alert:focus-visible .readiness-alert-chip {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.65);
}

#readiness-nav-alert[data-readiness-status="warning"] .readiness-alert-icon {
    color: #ffd257;
}

#readiness-nav-alert[data-readiness-status="critical"] .readiness-alert-chip {
    border-color: rgba(255, 210, 87, 0.72);
    background: rgba(255, 193, 7, 0.18);
}

#readiness-nav-alert[data-readiness-status="critical"] .readiness-alert-icon {
    color: #ffd257;
}

@keyframes readinessPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

#readiness-nav-alert.readiness-pulse .readiness-alert-chip {
    animation: readinessPulse 1.25s ease-out infinite;
}

/* Healthy — all checks pass: calm green, never pulses */
#readiness-nav-alert[data-readiness-status="ready"] .readiness-alert-chip {
    border-color: rgba(110, 231, 183, 0.55);
    background: rgba(34, 197, 94, 0.20);
}
#readiness-nav-alert[data-readiness-status="ready"] .readiness-alert-icon {
    color: #6ee7b7;
}

/* ── Setup & Readiness card tone (gentler, less alarm-heavy) ── */
.readiness-check {
    border: 1px solid var(--9v-border-light);
    border-left-width: 4px;
    box-shadow: none;
}

.readiness-check:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.readiness-check .card-body {
    background: color-mix(in srgb, var(--9v-surface-bg) 95%, var(--bs-body-color) 5%);
}

.readiness-check-icon-pass {
    color: #2d8a57;
}

.readiness-check-icon-fail {
    color: #6c7a89;
}

[data-bs-theme="light"] .readiness-check--critical.readiness-check--fail {
    border-left-color: #d06a76;
}

[data-bs-theme="light"] .readiness-check--warning.readiness-check--fail {
    border-left-color: #c29a2f;
}

[data-bs-theme="light"] .readiness-check--info.readiness-check--fail {
    border-left-color: #4a91b8;
}

[data-bs-theme="light"] .readiness-check--pass {
    border-left-color: #4f9a6e;
}

[data-bs-theme="dark"] .readiness-check .card-body {
    background: color-mix(in srgb, var(--9v-surface-bg) 90%, #ffffff 10%);
}

[data-bs-theme="dark"] .readiness-check--critical.readiness-check--fail {
    border-left-color: #cc7d86;
}

[data-bs-theme="dark"] .readiness-check--warning.readiness-check--fail {
    border-left-color: #d3ac56;
}

[data-bs-theme="dark"] .readiness-check--info.readiness-check--fail {
    border-left-color: #63a9d1;
}

[data-bs-theme="dark"] .readiness-check--pass {
    border-left-color: #68b487;
}

/* Setup Readiness toolbar buttons: keep tertiary style, ensure readable hover states */
[data-bs-theme="light"] .setup-readiness-toolbar-btn {
    color: #334155;
    border-color: rgba(100, 116, 139, 0.55);
    background-color: rgba(255, 255, 255, 0.95);
}

[data-bs-theme="light"] .setup-readiness-toolbar-btn:hover,
[data-bs-theme="light"] .setup-readiness-toolbar-btn:focus-visible {
    color: #ffffff;
    border-color: #475569;
    background-color: #475569;
}

[data-bs-theme="dark"] .setup-readiness-toolbar-btn {
    color: #dbe6f5;
    border-color: rgba(148, 163, 184, 0.65);
    background-color: rgba(100, 116, 139, 0.22);
}

[data-bs-theme="dark"] .setup-readiness-toolbar-btn:hover,
[data-bs-theme="dark"] .setup-readiness-toolbar-btn:focus-visible {
    color: #0b1220;
    border-color: #b6c6df;
    background-color: #b6c6df;
}


/* ── Setup & Readiness — reimagined as a guided journey ───────────────────────
   Shares the visual language of the customer-facing Help docs (css/help.css):
   soft tinted callouts, numbered milestones with a connecting rail, themed SVG
   diagrams. Everything is theme-aware via Bootstrap --bs-* vars + color-mix. */

/* Orientation hero (mirrors .help-roles tone) */
.readiness-hero {
    border: 1px solid var(--bs-border-color);
    border-left: 3px solid var(--bs-primary);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--bs-primary) 6%, transparent);
    padding: 0.85rem 1.1rem;
}
.readiness-hero .readiness-hero-lead {
    font-size: 1.02rem;
    font-weight: 500;
}

/* Progress headline + segmented bar */
.readiness-progress-headline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.readiness-progress-count {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-body-color);
}
.readiness-progress-total {
    color: var(--bs-secondary-color);
    font-weight: 600;
}
.readiness-progress-pct {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--bs-secondary-color);
}

.readiness-segbar {
    display: flex;
    gap: 3px;
    height: 14px;
    margin: 0.7rem 0 0.6rem;
}
.readiness-seg {
    flex: 1 1 0;
    border-radius: 3px;
    background: var(--bs-secondary-bg, #e9ecef);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.readiness-seg:hover {
    transform: scaleY(1.3);
    filter: brightness(1.05);
}
.readiness-seg--pass { background: var(--bs-success); }
.readiness-seg--critical { background: var(--bs-danger); }
.readiness-seg--warning { background: var(--bs-warning); }
.readiness-seg--info { background: var(--bs-info); }

.readiness-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
}
.readiness-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.readiness-legend .dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 2px;
    display: inline-block;
}
.readiness-legend .dot--pass { background: var(--bs-success); }
.readiness-legend .dot--critical { background: var(--bs-danger); }
.readiness-legend .dot--warning { background: var(--bs-warning); }
.readiness-legend .dot--info { background: var(--bs-info); }

/* Live readiness status map (generalized from the Help-doc SVG diagram) */
.readiness-map {
    overflow-x: auto;
}
.readiness-map svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--bs-body-color);
}
.readiness-map .rd-node {
    fill: var(--bs-body-bg);
    stroke: var(--bs-border-color);
    stroke-width: 1.5;
}
.readiness-map .rd-node--pass {
    fill: color-mix(in srgb, var(--bs-success) 14%, var(--bs-body-bg));
    stroke: var(--bs-success);
}
.readiness-map .rd-node--critical {
    fill: color-mix(in srgb, var(--bs-danger) 12%, var(--bs-body-bg));
    stroke: color-mix(in srgb, var(--bs-danger) 72%, var(--bs-border-color));
}
.readiness-map .rd-node--warning {
    fill: color-mix(in srgb, var(--bs-warning) 16%, var(--bs-body-bg));
    stroke: color-mix(in srgb, var(--bs-warning) 72%, var(--bs-border-color));
}
.readiness-map .rd-node--info {
    fill: color-mix(in srgb, var(--bs-info) 12%, var(--bs-body-bg));
    stroke: color-mix(in srgb, var(--bs-info) 72%, var(--bs-border-color));
}
.readiness-map .rd-overall { stroke-width: 2; }
.readiness-map .rd-label { fill: var(--bs-body-color); font-size: 13px; font-weight: 500; }
.readiness-map .rd-icon { font-size: 15px; font-weight: 700; fill: var(--bs-secondary-color); }
.readiness-map .rd-icon--pass { fill: var(--bs-success); }
.readiness-map .rd-icon--critical { fill: var(--bs-danger); }
.readiness-map .rd-icon--warning { fill: var(--bs-warning-text-emphasis, var(--bs-warning)); }
.readiness-map .rd-icon--info { fill: var(--bs-info-text-emphasis, var(--bs-info)); }
.readiness-map .rd-overall-label { fill: var(--bs-body-color); font-size: 13px; font-weight: 600; }
.readiness-map .rd-overall-sub { fill: var(--bs-secondary-color); font-size: 11px; }
.readiness-map .rd-edge { stroke: var(--bs-border-color); fill: none; stroke-width: 1.5; }
.readiness-map .rd-edge--pass { stroke: color-mix(in srgb, var(--bs-success) 55%, var(--bs-border-color)); }
.readiness-map .rd-edge-arrow { fill: var(--bs-border-color); }

/* The setup journey — milestones with a connecting rail (à la .help-steps) */
.readiness-journey {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.readiness-journey .readiness-step {
    position: relative;
    padding: 0 0 1.15rem 3rem;
}
.readiness-journey .readiness-step:last-child { padding-bottom: 0; }
.readiness-journey .readiness-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(1rem - 1px);
    top: 2rem;
    bottom: 0;
    width: 2px;
    background: var(--bs-border-color);
}
.readiness-step-state {
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    z-index: 1;
}
.readiness-step--pass .readiness-step-state {
    border-color: var(--bs-success);
    background: var(--bs-success);
    color: #fff;
}
.readiness-step--critical .readiness-step-state {
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}
.readiness-step--warning .readiness-step-state {
    border-color: var(--bs-warning);
    color: var(--bs-warning-text-emphasis, var(--bs-warning));
}
.readiness-step--info .readiness-step-state {
    border-color: var(--bs-info);
    color: var(--bs-info-text-emphasis, var(--bs-info));
}
.readiness-step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}
.readiness-step-title { font-weight: 600; }
.readiness-step-sev {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.5rem;
    border-radius: 2rem;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
}
.readiness-step--pass .readiness-step-sev {
    border-color: color-mix(in srgb, var(--bs-success) 40%, transparent);
    color: var(--bs-success-text-emphasis, var(--bs-success));
}
.readiness-step--critical .readiness-step-sev {
    border-color: color-mix(in srgb, var(--bs-danger) 40%, transparent);
    color: var(--bs-danger-text-emphasis, var(--bs-danger));
}
.readiness-step--warning .readiness-step-sev {
    border-color: color-mix(in srgb, var(--bs-warning) 45%, transparent);
    color: var(--bs-warning-text-emphasis, var(--bs-warning));
}
.readiness-step-desc {
    margin: 0.1rem 0;
    color: var(--bs-body-color);
}
.readiness-step-why {
    margin: 0;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}
.readiness-step-action {
    margin-top: 0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    border: 1px solid var(--bs-primary);
    color: var(--bs-primary);
    background: var(--bs-body-bg);
    border-radius: 2rem;
    padding: 0.25rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}
.readiness-step-action:hover,
.readiness-step-action:focus-visible {
    background: var(--bs-primary);
    color: #fff;
}
.readiness-step-done {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--bs-success-text-emphasis, var(--bs-success));
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}


/* ── Info buttons — remapped to primary-family blues (less cyan glare) ── */
[data-bs-theme="light"] .btn-info {
    background: linear-gradient(135deg, #56a1ff, #3b8cf2);
    border-color: #3b8cf2;
    color: #ffffff;
}
[data-bs-theme="light"] .btn-info:hover,
[data-bs-theme="light"] .btn-info:focus-visible {
    background: linear-gradient(135deg, #4c9afc, #2f83ec);
    border-color: #2f83ec;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(13, 110, 253, 0.28);
}
[data-bs-theme="light"] .btn-info:active {
    background: linear-gradient(135deg, #3f8fe8, #2a74d4);
    border-color: #2a74d4;
    transform: translateY(0);
}

[data-bs-theme="dark"] .btn-info {
    background: linear-gradient(135deg, #5da6ff, #418cf0);
    border-color: #418cf0;
    color: #ffffff;
}
[data-bs-theme="dark"] .btn-info:hover,
[data-bs-theme="dark"] .btn-info:focus-visible {
    background: linear-gradient(135deg, #68b0ff, #4d97f5);
    border-color: #4d97f5;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.36);
}
[data-bs-theme="dark"] .btn-info:active {
    background: linear-gradient(135deg, #4b93ea, #377ed8);
    border-color: #377ed8;
    transform: translateY(0);
}

[data-bs-theme="light"] .btn-outline-info {
    color: #0a58ca;
    border-color: #5f93e8;
    background-color: rgba(13, 110, 253, 0.08);
}
[data-bs-theme="light"] .btn-outline-info:hover,
[data-bs-theme="light"] .btn-outline-info:focus-visible {
    color: #ffffff;
    border-color: #0a58ca;
    background-color: #0a58ca;
}

[data-bs-theme="dark"] .btn-outline-info {
    color: #9bc1ff;
    border-color: #4f76b8;
    background-color: rgba(79, 118, 184, 0.16);
}
[data-bs-theme="dark"] .btn-outline-info:hover,
[data-bs-theme="dark"] .btn-outline-info:focus-visible {
    color: #ffffff;
    border-color: #5c88d4;
    background-color: #416eb7;
}

/* ── Success/danger buttons — hover lift ── */
.btn-success:hover,
.btn-danger:hover {
    transform: translateY(-1px);
}
.btn-success:active,
.btn-danger:active {
    transform: translateY(0);
}

/* ── Outline buttons — subtle background fill on hover ── */
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover {
    transform: translateY(-1px);
}

/* ── Snippet controls — improved discoverability in detail sections ── */
.snippet-capture-btn,
.snippet-apply-btn {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.25rem 0.4rem;
    line-height: 1;
    border-width: 1px;
    transition: var(--9v-transition);
}

.snippet-capture-btn i,
.snippet-apply-btn i {
    font-size: 1rem;
    line-height: 1;
}

[data-bs-theme="light"] .snippet-capture-btn,
[data-bs-theme="light"] .snippet-apply-btn {
    color: #334155;
    border-color: rgba(100, 116, 139, 0.45);
    background-color: rgba(255, 255, 255, 0.95);
}

[data-bs-theme="light"] .snippet-capture-btn:hover,
[data-bs-theme="light"] .snippet-apply-btn:hover,
[data-bs-theme="light"] .snippet-capture-btn:focus-visible,
[data-bs-theme="light"] .snippet-apply-btn:focus-visible {
    color: #0f172a;
    border-color: rgba(13, 110, 253, 0.6);
    background-color: #ffffff;
}

[data-bs-theme="dark"] .snippet-capture-btn,
[data-bs-theme="dark"] .snippet-apply-btn {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.45);
    background-color: rgba(15, 23, 42, 0.65);
}

[data-bs-theme="dark"] .snippet-capture-btn:hover,
[data-bs-theme="dark"] .snippet-apply-btn:hover,
[data-bs-theme="dark"] .snippet-capture-btn:focus-visible,
[data-bs-theme="dark"] .snippet-apply-btn:focus-visible {
    color: #f8fafc;
    border-color: rgba(96, 165, 250, 0.75);
    background-color: rgba(15, 23, 42, 0.9);
}

[data-bs-theme="light"] .snippet-apply-btn.is-applicable {
    border-color: rgba(13, 110, 253, 0.95) !important;
    box-shadow:
        0 0 0 4px rgba(13, 110, 253, 0.34),
        0 0 18px rgba(13, 110, 253, 0.38);
    animation: snippetApplyGlowLight 1.35s ease-in-out infinite;
}

[data-bs-theme="dark"] .snippet-apply-btn.is-applicable {
    border-color: rgba(255, 214, 10, 0.96) !important;
    box-shadow:
        0 0 0 4px rgba(255, 193, 7, 0.34),
        0 0 18px rgba(255, 193, 7, 0.42);
    animation: snippetApplyGlowDark 1.35s ease-in-out infinite;
}

@keyframes snippetApplyGlowLight {
    0%,
    100% {
        box-shadow:
            0 0 0 3px rgba(13, 110, 253, 0.3),
            0 0 14px rgba(13, 110, 253, 0.28);
    }
    50% {
        box-shadow:
            0 0 0 8px rgba(13, 110, 253, 0.22),
            0 0 26px rgba(13, 110, 253, 0.48);
    }
}

@keyframes snippetApplyGlowDark {
    0%,
    100% {
        box-shadow:
            0 0 0 3px rgba(255, 193, 7, 0.32),
            0 0 15px rgba(255, 193, 7, 0.32);
    }
    50% {
        box-shadow:
            0 0 0 8px rgba(255, 193, 7, 0.24),
            0 0 28px rgba(255, 214, 10, 0.56);
    }
}

[data-bs-theme="light"] .snippet-applied {
    border-color: rgba(25, 135, 84, 0.7) !important;
    box-shadow: 0 0 0 0.18rem rgba(25, 135, 84, 0.2) !important;
    background-color: rgba(25, 135, 84, 0.08) !important;
}

[data-bs-theme="light"] .snippet-skipped {
    border-color: rgba(220, 53, 69, 0.7) !important;
    box-shadow: 0 0 0 0.18rem rgba(220, 53, 69, 0.2) !important;
    background-color: rgba(220, 53, 69, 0.08) !important;
}

[data-bs-theme="dark"] .snippet-applied {
    border-color: rgba(40, 167, 69, 0.7) !important;
    box-shadow: 0 0 0 0.18rem rgba(40, 167, 69, 0.28) !important;
    background-color: rgba(40, 167, 69, 0.14) !important;
}

[data-bs-theme="dark"] .snippet-skipped {
    border-color: rgba(248, 113, 113, 0.75) !important;
    box-shadow: 0 0 0 0.18rem rgba(248, 113, 113, 0.28) !important;
    background-color: rgba(248, 113, 113, 0.14) !important;
}

/* ── Option A: light-mode tint for remaining outline buttons ── */
/* Scoped to button/a only — excludes <label> radio-toggle groups (CSV/JSON, view mode, etc.) */
[data-bs-theme="light"] button[class*="btn-outline-"]:not(.btn-outline-light),
[data-bs-theme="light"] a[class*="btn-outline-"]:not(.btn-outline-light) {
    background-color: rgba(0, 0, 0, 0.04);
}

/* ── Form controls — refined radius + focus glow ── */
.form-control,
.form-select {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control:focus,
.form-select:focus {
    /* Primary glow base + a faint cyan outer ring (brand spark) */
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15),
                0 0 0 4px rgba(13, 202, 240, 0.10);
}

/* ── Switches — smooth slide ── */
.form-check-input {
    transition: background-color 0.2s ease, border-color 0.2s ease, background-position 0.2s ease;
}


/* ================================================================
   PHASE 4 — Header & Sidebar Polish
   ================================================================ */

/* ── Header — dark navy gradient matching landing page ── */
.app-header {
    background: var(--9v-header-bg) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
}

/* ── Header brand tagline — small subtle text below logo ── */
.app-header .brand-tagline {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.4);
    margin-top: -2px;
    line-height: 1;
}

/* ── Header nav links — smooth hover like landing page ── */
.app-header .nav-link {
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: var(--bs-border-radius-sm);
}

/* ── Sidebar — deep navy "chrome" rail matching the header (both themes) ── */
#sidebar {
    /* Always-dark navy rail: its contents (toggle, section headers, vendor
       block) are designed for a dark surface, and it ties the sidebar to the
       navy header instead of the old flat .bg-secondary gray. */
    background: linear-gradient(180deg, #16243d 0%, #0f1a2e 100%);
    color: rgba(255, 255, 255, 0.85);
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.18);
    border-right: 1px solid rgba(148, 163, 184, 0.10) !important;
}
[data-bs-theme="dark"] #sidebar {
    /* Match the nav as the darkest chrome, below the lighter body canvas */
    background: linear-gradient(180deg, #0d1525 0%, #0a0f1d 100%);
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.35);
    border-right-color: rgba(148, 163, 184, 0.12) !important;
}

/* Collapse toggle + scrollbar tuned for the dark rail */
#sidebar #toggleSidebar {
    color: rgba(255, 255, 255, 0.65);
}
#sidebar #toggleSidebar:hover {
    color: #ffffff;
}

/* ── Sidebar menu items — transparent on the dark navy rail, light text ── */
#sidebar .list-group,
#sidebar .list-group-flush {
    background-color: transparent;
}
#sidebar .list-group-item {
    transition: var(--9v-transition);
    border: none;
    border-radius: 0 !important;
    margin-bottom: 0;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.82);
}
#sidebar .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
#sidebar .list-group-item.active {
    position: relative;
    border-left: none !important;
    background-color: rgba(var(--bs-primary-rgb), 0.18) !important;
    color: #ffffff;
}
/* Cyan→blue gradient hairline accent on the active item (brand spark) */
#sidebar .list-group-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--9v-accent-cyan), var(--bs-primary));
}


/* ── Sidebar section headers — refined ── */
.sidebar-section-header {
    border-radius: var(--bs-border-radius-sm);
}

/* ── Sidebar search — refined ── */
#sidebarSearchInput {
    border-radius: 0 !important;
}
#sidebarSearchClear {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
    border-radius: 0;
}
#sidebarSearchClear:hover {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* ── Sidebar dynamic-menu accordion (System Objects workspace) — dark rail ──
   Bootstrap accordions default to a light body-bg surface + dark text/chevron,
   which looked pasted-on-white over the navy rail. Make them transparent with
   light text and a light-tinted chevron. */
#sidebar .accordion,
#sidebar .accordion-flush,
#sidebar .accordion-item,
#sidebar .accordion-body {
    background-color: transparent;
    border: none;
}
#sidebar .accordion-button {
    transition: var(--9v-transition);
    background-color: transparent;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
    box-shadow: none;
}
#sidebar .accordion-button:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}
#sidebar .accordion-button:not(.collapsed) {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    box-shadow: none;
}
/* Chevron — light rail uses Bootstrap's default dark SVG as-is; the dark theme
   already ships a light SVG, so neither needs inverting now. */
#sidebar .accordion-button::after {
    opacity: 0.6;
}
#sidebar .accordion-button:not(.collapsed)::after {
    opacity: 0.9;
}
/* Sub-menu separators — soften the inline gray double-rule to a slate hairline */
#sidebar .accordion-body hr {
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin: 0.3rem 0 0 !important;
}


/* ================================================================
   Light-mode chrome (Option B) — bright header band with a contained
   navy brand lockup, slate nav text, and a lighter steel-navy rail.
   Dark mode is intentionally untouched; --9v-header-bg stays dark for
   the reused IVR full-screen toolbar.
   ================================================================ */

/* Header — slate chrome band matching the sidebar rail (#f1f5f9), set off the
   slate-50 page by a hairline border + soft shadow */
[data-bs-theme="light"] .app-header {
    background: #f1f5f9 !important;
    color: #1e293b;
    border-bottom: 1px solid rgba(15, 23, 42, 0.15);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 6px 20px rgba(15, 23, 42, 0.05);
}

/* Brand lockup — new shield mark + live "9Vault" wordmark. The mark carries its
   own dark shield, so it sits directly on either chrome; the wordmark recolors
   per theme. (Replaces the old navy-chip workaround for the baked white logo.) */
.app-header .brand-lockup {
    gap: 0.5rem;
}
.app-header .brand-mark {
    height: 44px;
    width: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.app-header .brand-wordmark {
    font-family: var(--bs-font-sans-serif);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #f1f5f9; /* default — dark chrome */
}
[data-bs-theme="light"] .app-header .brand-wordmark {
    color: #0f172a;
}
/* Small brand spark — blue→cyan gradient on the leading "9" */
.app-header .brand-wordmark-9 {
    background: var(--9v-accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* Tagline recolors for the light chrome (dark mode keeps the light tagline) */
[data-bs-theme="light"] .app-header .brand-tagline {
    color: #64748b;
}

/* Nav links/icons flip from white to slate on the light band */
[data-bs-theme="light"] .app-header .nav-link {
    color: #334155 !important;
}
[data-bs-theme="light"] .app-header .nav-link:hover {
    background-color: rgba(15, 23, 42, 0.06);
    color: #0f172a !important;
}

/* User avatar — brand gradient so it reads on the bright band */
[data-bs-theme="light"] .app-header .user-avatar {
    background: linear-gradient(135deg, var(--bs-primary), var(--9v-accent-cyan));
    color: #ffffff;
}

/* Readiness chip — swap the white-on-navy treatment for slate-on-light */
[data-bs-theme="light"] .readiness-alert-chip {
    border-color: rgba(15, 23, 42, 0.18);
    background: rgba(15, 23, 42, 0.05);
    color: #334155;
}
[data-bs-theme="light"] #readiness-nav-alert:hover .readiness-alert-chip,
[data-bs-theme="light"] #readiness-nav-alert:focus-visible .readiness-alert-chip {
    background: rgba(15, 23, 42, 0.09);
    border-color: rgba(15, 23, 42, 0.30);
}
/* Healthy — all checks pass: calm green on the light band */
[data-bs-theme="light"] #readiness-nav-alert[data-readiness-status="ready"] .readiness-alert-chip {
    border-color: rgba(22, 163, 74, 0.35);
    background: rgba(22, 163, 74, 0.12);
    color: #166534;
}
[data-bs-theme="light"] #readiness-nav-alert[data-readiness-status="ready"] .readiness-alert-icon {
    color: #15803d;
}

/* ── Light-mode sidebar — slate rail (#f1f5f9), a distinct cool surface that
   reads as a panel against the white header and slate-50 page. All interior
   pieces (built for the dark rail) are flipped to slate text + brand accents. */
[data-bs-theme="light"] #sidebar {
    background: #f1f5f9;
    color: #334155;
    box-shadow: 2px 0 16px rgba(15, 23, 42, 0.06);
    border-right: 1px solid rgba(15, 23, 42, 0.15) !important;
}

/* Collapse caret + menu items */
[data-bs-theme="light"] #sidebar #toggleSidebar {
    color: #475569;
}
[data-bs-theme="light"] #sidebar #toggleSidebar:hover {
    color: #0f172a;
}
[data-bs-theme="light"] #sidebar .list-group-item {
    color: #334155;
}
[data-bs-theme="light"] #sidebar .list-group-item:hover {
    background-color: rgba(15, 23, 42, 0.05);
    color: #0f172a;
}
[data-bs-theme="light"] #sidebar .list-group-item.active {
    background-color: rgba(13, 110, 253, 0.12) !important;
    color: #0a58ca;
}

/* Section headers — light slate band with slate-600 caps */
[data-bs-theme="light"] #sidebar .sidebar-section-header {
    color: #475569;
    background: rgba(15, 23, 42, 0.06);
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

/* Workspace toggle — light segmented control with a crisp white active pill */
[data-bs-theme="light"] #sidebar .ws-toggle {
    background: rgba(15, 23, 42, 0.06);
}
[data-bs-theme="light"] #sidebar .ws-seg {
    color: #64748b;
}
[data-bs-theme="light"] #sidebar .ws-seg:hover {
    color: #0f172a;
}
[data-bs-theme="light"] #sidebar .ws-seg.active {
    background: #ffffff;
    color: var(--bs-primary);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

/* Accordion (System Objects workspace) — slate text + primary-tinted open state */
[data-bs-theme="light"] #sidebar .accordion-button {
    color: #334155;
}
[data-bs-theme="light"] #sidebar .accordion-button:hover {
    background-color: rgba(15, 23, 42, 0.05);
    color: #0f172a;
}
[data-bs-theme="light"] #sidebar .accordion-button:not(.collapsed) {
    background-color: rgba(13, 110, 253, 0.08);
    color: #0a58ca;
}
[data-bs-theme="light"] #sidebar .accordion-body hr {
    border-top-color: rgba(15, 23, 42, 0.10) !important;
}


/* ================================================================
   PHASE 5 — Tables & Forms Refinement
   ================================================================ */

/* ── Table container — rounded wrapper + subtle shadow ── */
.table-container {
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--9v-border-light);
}

/* ── Cards — use design-token shadow instead of Bootstrap shadow-sm ── */
.card {
    box-shadow: var(--9v-card-shadow);
}
/* Dashboard cards — scoped tokens (A: surfaces, B: shadows); global .card unchanged */
#dashboard-tab .card {
    background: var(--9v-dash-card-bg);
    border-color: var(--9v-dash-border);
    box-shadow: var(--9v-dash-shadow);
}
#dashboard-tab .card:hover {
    box-shadow: var(--9v-dash-shadow-hover);
}
#dashboard-tab .card .card-body {
    background: transparent;
}
#dashboard-tab .card .list-group-item {
    background: var(--9v-dash-card-bg);
    border-color: var(--9v-dash-border);
}
#dashboard-tab .card .list-group-item:nth-child(even) {
    background: var(--9v-dash-list-stripe);
}
#dashboard-tab .card .text-muted {
    color: var(--9v-text-quiet-strong) !important;
}

/* ── Unified panel header — one calm, token-driven treatment. Meaning is
   carried by the icon color, not a saturated header fill. Opt in app-wide via
   .panel-header / .panel-attention / .panel-danger; auto-applied on the
   dashboard so every dashboard panel matches without extra classes. ── */
.card-header.panel-header,
#dashboard-tab .card-header {
    background: var(--9v-panel-header-bg) !important;
    color: var(--9v-panel-title);
    border-bottom: 1px solid var(--9v-panel-header-border);
    font-weight: 600;
}
.card-header.panel-header h5,
.card-header.panel-header h6,
#dashboard-tab .card-header h5,
#dashboard-tab .card-header h6 {
    color: var(--9v-panel-title);
}
/* Attention (amber) — for panels that genuinely need eyes */
.card-header.panel-attention,
#dashboard-tab .card-header.panel-attention {
    background: rgba(255, 193, 7, 0.10) !important;
    border-bottom: 1px solid rgba(255, 193, 7, 0.35);
    color: var(--9v-panel-title);
    font-weight: 600;
}
/* Danger (red) — for genuine error/failure surfaces */
.card-header.panel-danger {
    background: rgba(220, 53, 69, 0.10) !important;
    border-bottom: 1px solid rgba(220, 53, 69, 0.38);
    color: var(--9v-panel-title);
    font-weight: 600;
}

/* KPI stat tiles — same dashboard elevation system as content cards */
#kpi-bar .card {
    transition: var(--9v-transition);
    cursor: default;
    background: var(--9v-dash-kpi-bg);
    border: 1px solid var(--9v-dash-border);
    box-shadow: var(--9v-dash-shadow);
    position: relative;
    overflow: hidden;
}
/* Cyan→blue gradient top-accent line — fades in on hover (echoes .feature-card) */
#kpi-bar .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--9v-accent-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
}
#kpi-bar .card:hover {
    box-shadow: var(--9v-dash-shadow-hover);
    transform: translateY(-1px);
}
#kpi-bar .card:hover::before {
    opacity: 1;
}
[data-bs-theme="dark"] #kpi-bar .card:hover {
    transform: none;
    filter: none;
}
[data-bs-theme="light"] #kpi-bar .card:hover {
    filter: saturate(1.04);
}
#kpi-bar .display-6 {
    color: color-mix(in srgb, var(--bs-body-color) 90%, #000000 10%);
    letter-spacing: -0.02em;
}
[data-bs-theme="dark"] #kpi-bar .display-6 {
    color: color-mix(in srgb, var(--bs-body-color) 88%, #ffffff 12%);
}
#kpi-bar .small.text-muted {
    color: var(--9v-text-quiet-strong) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}
/* Soft tinted icon chip — auto-matches each KPI's semantic color via currentColor
   (text-primary/-secondary, or the JS-driven danger/success on Failed Tests) */
#kpi-bar .card-body > .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 14%, transparent);
    margin-bottom: 0.35rem;
}
#kpi-bar .bi {
    opacity: 0.95;
}

/* ── letter-spacing-1 utility (used on dashboard section headings) ── */
.letter-spacing-1 {
    letter-spacing: 0.06em;
}

/* ── thead.table-danger — ensure readable text in dark mode ──
   Same cascade problem as contextual rows: Bootstrap sets --bs-table-color
   on the thead element; override it so header text stays legible.         */
[data-bs-theme="dark"] thead.table-danger th {
    --bs-table-color: #1e293b;
    color: #1e293b;
}

/* Theme-aware table headers — Bootstrap table-light / table-dark ignore the active
   theme (white bars in dark mode, black bars in light). Map both to the same
   neutral header surface everywhere legacy markup uses them.                  */
[data-bs-theme="light"] .table > thead.table-light > tr > th,
[data-bs-theme="light"] .table > thead > tr.table-light > th,
[data-bs-theme="light"] .table > thead.table-dark > tr > th,
[data-bs-theme="light"] .table > thead > tr.table-dark > th,
[data-bs-theme="dark"] .table > thead.table-light > tr > th,
[data-bs-theme="dark"] .table > thead > tr.table-light > th,
[data-bs-theme="dark"] .table > thead.table-dark > tr > th,
[data-bs-theme="dark"] .table > thead > tr.table-dark > th {
    --bs-table-bg: var(--9v-table-head-bg);
    --bs-table-color: var(--9v-table-head-color);
    --bs-table-border-color: var(--bs-border-color);
    background-color: var(--9v-table-head-bg) !important;
    color: var(--9v-table-head-color) !important;
    border-color: var(--bs-border-color) !important;
    font-weight: 600;
}

/* Plain thead (no Bootstrap tone class) — same subtle header in both themes */
.table > thead:not(.table-light):not(.table-dark) > tr > th,
.table > thead:not(.table-light):not(.table-dark) > tr > td {
    background-color: var(--9v-table-head-bg);
    color: var(--9v-table-head-color);
    border-color: var(--bs-border-color);
    font-weight: 600;
}

/* ── Table — softer hover rows ── */
.table > tbody > tr {
    transition: background-color 0.15s ease;
}
.table-hover > tbody > tr:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.04) !important;
}

/* ── Dashboard job-status row tints — left-border accent, no Bootstrap
   contextual class, so colour is fully under our control in both themes  */
.dc-job-failed {
    border-left: 3px solid var(--bs-danger);
    color: var(--bs-body-color) !important;
}
.dc-job-running {
    border-left: 3px solid var(--bs-warning);
    color: var(--bs-body-color) !important;
}
.dc-job-failed td,
.dc-job-failed th,
.dc-job-running td,
.dc-job-running th {
    color: inherit !important;
}
.dc-job-failed td,
.dc-job-failed th {
    background-color: rgba(var(--bs-danger-rgb), 0.16) !important;
}
.dc-job-running td,
.dc-job-running th {
    background-color: rgba(var(--bs-warning-rgb), 0.16) !important;
}

/* ── Sticky columns — cleaner translucent backgrounds ── */
.sticky-actions,
.sticky-checkbox {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
[data-bs-theme="light"] .sticky-actions,
[data-bs-theme="light"] .sticky-checkbox {
    background-color: rgba(255, 255, 255, 0.85) !important;
}
[data-bs-theme="dark"] .sticky-actions,
[data-bs-theme="dark"] .sticky-checkbox {
    background-color: rgba(15, 23, 42, 0.85) !important;
}

/* ── Pagination — rounded, hover lift ── */
.pagination .page-link {
    border-radius: var(--bs-border-radius-sm);
    margin: 0 2px;
    transition: var(--9v-transition);
}
.pagination .page-link:hover {
    transform: translateY(-1px);
}
.pagination .page-item.active .page-link {
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.3);
}

/* ── Column group header row (2nd thead row) — hidden by default for lower cognitive load.
   Keep generation logic intact in table renderer/templates for future debugging.
   Add `debug-show-group-headers` on <body> to restore visibility instantly. ── */
.table thead tr.group-header {
    display: none;
}
body.debug-show-group-headers .table thead tr.group-header {
    display: table-row;
}


/* ================================================================
   PHASE 6 — Badges, Chips & Spacing
   ================================================================ */

/* ── Badges — slightly more padding, pill default ── */
.badge {
    padding: 0.35em 0.65em;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ── Quiet metadata pills — tinted wash (Jobs list, etc.) ── */
.pill-quiet {
    color: var(--9v-text-quiet-strong);
    background: color-mix(in srgb, currentColor 14%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    font-weight: 600;
}
.pill-quiet.tone-info    { color: var(--bs-info); }
.pill-quiet.tone-success { color: var(--bs-success); }
.pill-quiet.tone-warning { color: var(--bs-warning); }
.pill-quiet.tone-muted   { color: var(--9v-text-quiet-strong); }
.pill-quiet.tone-danger  { color: var(--bs-danger); }

/* ── Filter chips — softer, rounder ── */
.filter-chips .chip {
    border-radius: 100px;
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--9v-border-light);
    transition: var(--9v-transition);
    max-width: min(22rem, 100%);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}
.filter-chips .chip .chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 30ch;
}
.filter-chips .chip .remove {
    flex-shrink: 0;
    cursor: pointer;
    margin-left: 0.15rem;
}
.filter-chips .chip:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── NV chips — amber pill style ── */
.nv-chip {
    border-radius: 100px !important;
    font-weight: 600;
}

/* ── Mod Panel — bulk edit chip bar (matches filter chips bar) ── */
.mod-panel {
    margin-bottom: 0.25rem;
}
.mod-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.3rem 0.7rem;
    border-radius: 100px;
    background: var(--bs-primary);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 500;
    transition: var(--9v-transition);
}
.mod-chip:hover {
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25);
}
.mod-chip .mod-chip-remove {
    cursor: pointer;
    opacity: 0.7;
    font-size: 0.9rem;
    line-height: 1;
}
.mod-chip .mod-chip-remove:hover {
    opacity: 1;
}
.mod-chip.badge-add {
    background: #198754;
}
.mod-chip.badge-add:hover {
    box-shadow: 0 2px 8px rgba(25, 135, 84, 0.25);
}
.mod-chip.badge-remove {
    background: #dc3545;
}
.mod-chip.badge-remove:hover {
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.25);
}
.mod-chip.mod-chip-disabled {
    background: rgba(108, 117, 125, 0.3);
    color: var(--bs-body-color);
    border: 1px dashed rgba(108, 117, 125, 0.5);
    box-shadow: none;
    cursor: not-allowed;
}
.mod-disabled-section .mod-chip.mod-chip-disabled:hover {
    box-shadow: none;
}
.mod-chip .mod-chip-field {
    opacity: 0.8;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.mod-panel .mod-field-picker,
.mod-panel .mod-value-input {
    font-size: 0.85rem;
}

.mod-offcanvas {
    --bs-offcanvas-width: min(460px, 92vw);
}

.mod-offcanvas .offcanvas-title {
    font-weight: 600;
}

.mod-offcanvas .offcanvas-body {
    padding-top: 0.75rem;
}

.mod-offcanvas .mod-panel {
    margin-bottom: 0;
}

.mod-offcanvas .mod-field-picker,
.mod-offcanvas .mod-value-input {
    font-size: 0.85rem;
}

.mod-offcanvas .mod-offcanvas-composer {
    display: flex;
    flex-direction: column;
}

/* Ensure at least half-line separation between stacked bulk editor blocks. */
.mod-offcanvas .mod-offcanvas-composer > * + * {
    margin-top: 0.6rem;
}

.mod-offcanvas .mod-value-input-area > .badge {
    margin-bottom: 0.45rem;
}

/* Keep inner controls in the value area from appearing crowded. */
.mod-offcanvas .mod-value-input-area > * + * {
    margin-top: 0.55rem;
}

.mod-badge-mode-row .mod-badge-mode-group .badge-mode-choice {
    min-width: 92px;
    font-weight: 600;
}

.mod-badge-mode-row .mod-badge-mode-group .badge-mode-choice i {
    font-size: 0.85em;
}

.mod-badge-mode-row .input-group {
    min-width: 190px;
}

/* Add breathing room between the selected field badge and add/remove controls. */
.mod-badge-mode-row {
    margin-top: 0.5rem;
    padding-top: 0.1rem;
}

.lpw-region-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.25rem 0.75rem;
}

.lpw-territories-select {
    min-height: 260px;
}

.lpw-stepbar {
    gap: 0.5rem;
}

.lpw-stepbar .lpw-step-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--9v-border-light);
    background-color: var(--9v-surface-bg);
    color: var(--9v-text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    box-shadow: var(--9v-card-shadow);
}

.lpw-stepbar .lpw-step-link.active {
    background-color: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

.lpw-stepbar .lpw-step-link.done {
    background-color: var(--bs-success);
    color: #fff;
    border-color: var(--bs-success);
}

.lpw-stepbar .lpw-step-link:disabled {
    opacity: 0.65;
    box-shadow: none;
    cursor: not-allowed;
}

#local-presence-wizard-page .card {
    background-color: var(--9v-surface-bg);
    border-color: var(--9v-border-light);
}

/* Bank claim/return radios — locked when credential lacks inventory edit */
#local-presence-wizard-page .lpw-bank-action-locked {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}

#local-presence-wizard-page .lpw-bank-action-locked .form-check-input,
#local-presence-wizard-page .lpw-bank-action-locked .form-check-label {
    cursor: not-allowed;
}

/* ── Typeahead group headers ── */
.typeahead-group-header {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--9v-text-muted);
    padding: 0.35rem 0.75rem 0.15rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nested IVR modals (condition row editor) — stay above stacked Bootstrap modals */
.typeahead-dropdown-ivr-nested-modal {
    z-index: 108000 !important;
}

.mod-extra-fields-area .form-label {
    font-size: 0.78rem;
    font-weight: 500;
    margin-bottom: 0.15rem;
}

/* ── Toast notifications — polished ── */
.toast {
    border-radius: var(--bs-border-radius-lg) !important;
    box-shadow: var(--9v-card-shadow);
}

/* Tone down info toasts (replace bright cyan with calmer blue family). */
[data-bs-theme="light"] .toast.text-bg-info {
    background: linear-gradient(135deg, #56a1ff, #3b8cf2) !important;
    color: #ffffff !important;
}
[data-bs-theme="dark"] .toast.text-bg-info {
    background: linear-gradient(135deg, #5da6ff, #418cf0) !important;
    color: #ffffff !important;
}
[data-bs-theme="light"] .toast.text-bg-info .btn-close,
[data-bs-theme="dark"] .toast.text-bg-info .btn-close {
    filter: invert(1) grayscale(100%) brightness(220%);
}

/* ── Modal body / card body — breathing room ── */
.modal-body {
    padding: 1.5rem;
}

/* ── Breadcrumbs — refined ── */
.breadcrumb {
    font-size: 0.875rem;
    padding: 0.5rem 0;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--9v-text-muted);
    padding-left: 0.55rem;
    padding-right: 0.55rem;
}
.page-title-sub {
    font-size: 0.72em;
    font-weight: 500;
    color: var(--9v-text-muted);
}

/* ── Tooltips — rounded ── */
.tooltip-inner {
    border-radius: var(--bs-border-radius-sm);
    font-size: 0.78rem;
    padding: 0.35rem 0.65rem;
}

/* ── Alert refinement (for any remaining inline alerts) ── */
.alert {
    border-radius: var(--bs-border-radius-lg);
}

/* ── Nav tabs — softer ── */
.nav-tabs .nav-link {
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    transition: var(--9v-transition);
    position: relative;
}
/* Active tab — thin cyan→blue gradient underline (brand spark) */
.nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--9v-accent-gradient);
    border-radius: 2px 2px 0 0;
}
.nav-pills .nav-link {
    border-radius: var(--bs-border-radius);
    transition: var(--9v-transition);
}

/* ── Badge cell in tables — refined scrollbar ── */
.badge-cell {
    scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
}

/* ── Input group — rounded ends ── */
.input-group > :first-child {
    border-top-left-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important;
}
.input-group > :last-child {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

/* ================================================================
   DNIS Method Switcher — campaign detail DNISes tab
   ================================================================ */
.dnis-method-switcher {
    box-shadow: var(--9v-card-shadow);
    border-radius: var(--bs-border-radius-lg);
}
.dnis-method-nav .nav-link {
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: var(--bs-border-radius-sm);
    color: var(--9v-text-muted);
    transition: var(--9v-transition);
}
.dnis-method-nav .nav-link.active {
    box-shadow: 0 1px 4px rgba(13, 110, 253, 0.18);
}
.dnis-method-nav .nav-link:not(.active):hover {
    background-color: rgba(13, 110, 253, 0.06);
    color: var(--bs-primary);
}

/* ================================================================
   PHASE 7 — Jobs Detail Page
   ================================================================ */

/* ── Restore run picker ── */
.dc-run-dot {
    display: block; width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--bs-primary);
    margin: 1px auto 0;
}
.flatpickr-day.selected .dc-run-dot { background: #fff; }
.dc-run-dot-multi { background: var(--bs-warning); }
.dc-run-multi-picker {
    position: absolute; top: calc(100% + 2px); left: 0; right: 0;
    z-index: 1050;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    box-shadow: var(--9v-card-shadow);
    max-height: 220px; overflow-y: auto;
}
.dc-run-multi-header {
    padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 600;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
    text-transform: uppercase; letter-spacing: .04em;
}
.dc-run-multi-item {
    padding: 0.45rem 0.75rem; cursor: pointer; font-size: 0.85rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
}
.dc-run-multi-item:last-child { border-bottom: none; }
.dc-run-multi-item:hover { background: var(--bs-tertiary-bg); }

/* ── Restore accordion ── */
.restore-accordion .accordion-item { border-left: 3px solid transparent; }
.restore-accordion .accordion-item.in-backup { border-left-color: var(--bs-success); }
.restore-accordion .accordion-item.not-in-backup { border-left-color: var(--bs-secondary); opacity: .55; }
.restore-accordion .accordion-button { padding: .45rem .75rem; font-size: .875rem; }
.restore-accordion .accordion-button::after { width: .875rem; height: .875rem; }
.restore-accordion .accordion-button:not(.collapsed) { background: var(--bs-tertiary-bg); }
.restore-accordion .accordion-body { padding: .25rem .5rem; max-height: 300px; overflow-y: auto; }
.restore-accordion .restore-obj-item {
    padding: .3rem .5rem; font-size: .825rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    display: flex; align-items: center; gap: .4rem;
}
.restore-accordion .restore-obj-item:last-child { border-bottom: none; }
.restore-type-header { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
.restore-type-count { font-size: .75rem; }
.restore-select-all { font-size: .75rem; cursor: pointer; white-space: nowrap; }

/* ── Prior runs table ── */
.error-cell { max-width: 400px; word-wrap: break-word; overflow-wrap: break-word; }
.error-content {
    margin: 0; padding-left: 1rem; font-size: 0.8rem;
    max-height: 6em; overflow: hidden;
    transition: max-height 0.3s ease;
}
.error-content.expanded { max-height: none; }
.error-content li { margin-bottom: 0.15rem; word-break: break-word; line-height: 1.2; }
.error-toggle {
    cursor: pointer; color: var(--bs-primary);
    font-size: 0.75rem; margin-top: 0.25rem; display: inline-block;
}
.error-toggle:hover { text-decoration: underline; }
.prior-run-row.hidden-page { display: none; }
.prior-runs-pagination {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem; margin-top: 0.5rem; font-size: 0.85rem;
}
.prior-runs-pagination .page-size-selector {
    display: flex; align-items: center; gap: 0.25rem;
}
.prior-runs-pagination .page-size-selector .form-label { white-space: nowrap; }
.prior-runs-pagination .btn { padding: 0.15rem 0.4rem; font-size: 0.75rem; }

/* Run History tab — collapsible search controls (mirrors object-tab toolbar) */
#jobHistory .job-runs-list-toolbar {
    min-height: 2rem;
}
#jobHistory .job-runs-list-toolbar > .btn,
#jobHistory .job-runs-list-toolbar > a.btn {
    align-self: flex-end;
    margin-bottom: 0.125rem;
}
#jobHistory #job-runs-search-controls-panel {
    flex: 1 1 auto;
    min-width: 0;
}
#jobHistory .job-runs-filter-field {
    flex: 0 0 auto;
}
#jobHistory .job-runs-filter-outcome .form-select {
    width: 7.5rem;
    min-width: 7.5rem;
}
#jobHistory .job-runs-filter-date .form-control {
    width: 9.25rem;
    min-width: 9.25rem;
    max-width: 9.25rem;
}
#jobHistory .job-runs-filter-search .form-control {
    width: 14rem;
    min-width: 10rem;
    max-width: 18rem;
}
#jobHistory .job-runs-filter-checks {
    white-space: nowrap;
}
#jobHistory .job-runs-filter-checks .form-check-label {
    white-space: nowrap;
}

/* ── Object picker badges ── */
.job-obj-pill-frozen { opacity: 0.7; cursor: default; pointer-events: none; }

/* ── Detail sticky footer (Save / Update / Back) ── */
.detail-sticky-footer,
.jobs-sticky-footer {
    position: sticky; bottom: 0; z-index: 10;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: 0.75rem 0; margin-top: 1.25rem;
}

/* Keep last fields reachable above the sticky bar while scrolling */
.detail-has-sticky-footer > .tab-content,
.detail-has-sticky-footer > .card,
.detail-has-sticky-footer .card-body > .row,
.detail-has-sticky-footer > form {
    padding-bottom: 4rem;
}

/* Live progress banner pinned to the top of the job detail page while running */
.jobs-sticky-progress {
    position: sticky; top: 0; z-index: 11;
    background: var(--bs-body-bg);
    padding-top: 0.5rem;
}

/* ── Empty State Cards ─────────────────────────────── */
.empty-state-card {
    background: var(--9v-surface-bg);
    border-radius: var(--bs-border-radius-lg);
    border: 2px dashed var(--9v-border-light);
    margin: 2rem auto;
    max-width: 480px;
}
.empty-state-icon {
    font-size: 3rem;
    color: var(--bs-primary);
    opacity: 0.6;
}
[data-bs-theme="dark"] .empty-state-icon {
    opacity: 0.5;
}

/* ── Brand decorative surface — dot-grid texture + radial glow (from marketing hero) ──
   Opt-in via the .brand-surface class on a safe container (no overflow-clipped children
   like dropdowns). Also baked into empty-state cards. */
.brand-surface,
.empty-state-card {
    position: relative;
    overflow: hidden;
}
.brand-surface::before,
.empty-state-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(13, 110, 253, 0.10) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
    z-index: 0;
}
[data-bs-theme="dark"] .brand-surface::before,
[data-bs-theme="dark"] .empty-state-card::before {
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
.brand-surface::after,
.empty-state-card::after {
    content: '';
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    top: -150px;
    right: -120px;
    background: radial-gradient(circle, rgba(13, 202, 240, 0.10) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
/* Keep real content above the decorative layers */
.brand-surface > *,
.empty-state-card > * {
    position: relative;
    z-index: 1;
}

/* ── Registration flow (aligned with public/index.html pricing) ── */
#register-tab {
    padding: 1.5rem 0 3rem;
}
.register-flow {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1rem;
}
.register-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bs-primary);
    margin-bottom: 0.75rem;
}
.register-title,
.register-form-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 0.75rem;
}
.register-subtitle,
.register-form-subtitle {
    font-size: 1.02rem;
    color: var(--9v-text-muted);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}
.register-form-card {
    background: var(--9v-surface-bg);
    border: 1px solid var(--9v-border-light);
    border-radius: 22px;
    padding: 2.5rem 2rem;
    box-shadow: var(--9v-card-shadow);
}
.register-plan-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 100px;
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
}
.register-pw-track {
    height: 6px;
    border-radius: 3px;
    background: var(--9v-surface-soft);
    overflow: hidden;
}
.register-pw-fill {
    height: 100%;
    border-radius: 3px;
    width: 0;
    transition: width 0.3s, background-color 0.3s;
}
.register-terms-label {
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--9v-text-muted);
}
.register-terms-label a {
    color: var(--9v-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
#auth-legal-footer a {
    color: var(--9v-text-muted);
    text-decoration: none;
}
#auth-legal-footer a:hover {
    color: var(--9v-primary);
    text-decoration: underline;
}
.register-step--form {
    padding-top: 0.5rem;
}

/* Pricing cards — registration plan selector */
#register-tab .pricing-card {
    background: var(--9v-surface-bg);
    border: 1px solid var(--9v-border-light);
    border-radius: 22px;
    padding: 2.25rem 2rem;
    position: relative;
    transition: var(--9v-transition);
    cursor: pointer;
}
#register-tab .pricing-card:not(.featured):hover {
    transform: translateY(-4px);
    box-shadow: var(--9v-card-hover-shadow);
    border-color: rgba(var(--bs-primary-rgb), 0.35);
}
#register-tab .pricing-card.featured {
    background: linear-gradient(145deg, #0f172a 0%, #1e3a5f 100%);
    border-color: rgba(13, 110, 253, 0.35);
    box-shadow: 0 20px 56px rgba(13, 110, 253, 0.2);
}
#register-tab .pricing-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--bs-primary), #0dcaf0);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.22rem 0.7rem;
    border-radius: 100px;
    margin-bottom: 1rem;
}
#register-tab .pricing-badge--muted {
    background: linear-gradient(135deg, #64748b, #475569);
}
#register-tab .tier-name {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--9v-text-muted);
    margin-bottom: 0.4rem;
}
#register-tab .featured .tier-name { color: rgba(255, 255, 255, 0.5); }
#register-tab .tier-price {
    font-size: 2.75rem;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1;
    margin-bottom: 0.35rem;
}
#register-tab .featured .tier-price { color: #fff; }
#register-tab .tier-price sup { font-size: 1.1rem; font-weight: 600; vertical-align: super; }
#register-tab .tier-price sub { font-size: 0.85rem; font-weight: 500; color: var(--9v-text-muted); }
#register-tab .featured .tier-price sub { color: rgba(255, 255, 255, 0.4); }
#register-tab .price-num--contact { font-size: 1.55rem; letter-spacing: 0; }
#register-tab .plan-price-trial {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--9v-text);
}
#register-tab .featured .plan-price-trial { color: #fff; }
#register-tab .plan-price-trial .price-num { font-size: 2rem; font-weight: 800; }
#register-tab .tier-desc {
    font-size: 0.83rem;
    color: var(--9v-text-muted);
    margin-bottom: 0;
    line-height: 1.6;
    min-height: 2.5rem;
}
#register-tab .featured .tier-desc { color: rgba(255, 255, 255, 0.5); }
#register-tab .tier-divider {
    height: 1px;
    background: var(--9v-border-light);
    margin: 1.25rem 0 1rem;
}
#register-tab .featured .tier-divider { background: rgba(255, 255, 255, 0.1); }
#register-tab .price-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
#register-tab .price-features li {
    font-size: 0.84rem;
    color: var(--9v-text-quiet-strong);
    padding: 0.38rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.45;
}
#register-tab .featured .price-features li { color: rgba(255, 255, 255, 0.82); }
#register-tab .price-features li i {
    font-size: 0.88rem;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--bs-success);
}
#register-tab .featured .price-features li i { color: #0dcaf0; }
#register-tab .price-features li.off { opacity: 0.4; }
#register-tab .price-features li.off i { color: var(--9v-text-muted); }
#register-tab .plan-features-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
    margin-bottom: 0.75rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-primary);
    cursor: pointer;
}
#register-tab .featured .plan-features-toggle { color: #7ec8ff; }
#register-tab .plan-features-toggle:hover { text-decoration: underline; }
#register-tab .btn-tier {
    width: 100%;
    padding: 0.8rem;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 700;
    transition: var(--9v-transition);
    text-align: center;
    text-decoration: none;
    display: block;
    border: 2px solid transparent;
}
#register-tab .btn-tier-outline {
    background: transparent;
    border-color: var(--9v-border-light);
    color: inherit;
}
#register-tab .btn-tier-outline:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}
#register-tab .featured .btn-tier-outline {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}
#register-tab .featured .btn-tier-outline:hover {
    border-color: #7ec8ff;
    color: #fff;
}
#register-tab .btn-tier-filled {
    background: linear-gradient(135deg, var(--bs-primary), #0a58ca);
    border: none;
    color: #fff;
    box-shadow: 0 4px 18px rgba(var(--bs-primary-rgb), 0.38);
}
#register-tab .btn-tier-filled:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(var(--bs-primary-rgb), 0.48);
    color: #fff;
}
.plan-card--selected {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25), var(--9v-card-shadow) !important;
}
.plan-card--locked {
    opacity: 0.62;
    cursor: default;
}
.plan-card--locked:hover {
    border-color: var(--9v-border-light) !important;
    box-shadow: none !important;
    transform: none !important;
}
.plan-card--locked .btn-tier {
    opacity: 1;
    cursor: pointer;
}

/* ══ Phase 5: single-focus register layout ══════════════════════════════ */

/* Subtle backdrop behind the plan selection step (marketing-style depth) */
#planSelectionStep {
    position: relative;
}
.register-bg-accent {
    position: absolute;
    inset: -2rem -2rem auto -2rem;
    height: 420px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(60% 80% at 50% 0%, rgba(13, 110, 253, 0.16), transparent 70%),
        radial-gradient(40% 60% at 80% 10%, rgba(13, 202, 240, 0.12), transparent 70%);
    filter: blur(2px);
}
#planSelectionStep > *:not(.register-bg-accent) {
    position: relative;
    z-index: 1;
}

/* Vertical, centered stack instead of an equal-weight 3-col grid */
.register-plans-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.75rem;
}

/* Hero (trial) card — the single focal point */
.register-hero-card-wrap {
    width: 100%;
    max-width: 540px;
}
#register-tab .register-hero-card {
    width: 100%;
    overflow: hidden;
    padding: 2.5rem 2.25rem;
}
#register-tab .register-hero-card .register-hero-glow {
    position: absolute;
    top: -40%;
    right: -30%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13, 202, 240, 0.28), transparent 65%);
    pointer-events: none;
    z-index: 0;
}
#register-tab .register-hero-card > *:not(.register-hero-glow) { position: relative; z-index: 1; }
#register-tab .register-hero-card .tier-price {
    font-size: 3rem;
}

/* Trust signals near the CTA */
.register-trust-row {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
}
.register-trust-row li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--9v-text-quiet-strong);
}
.register-trust-row li i {
    color: var(--bs-success);
    font-size: 0.95rem;
}
#register-tab .featured .register-trust-row li { color: rgba(255, 255, 255, 0.78); }
#register-tab .featured .register-trust-row li i { color: #5fe3a1; }

/* Slim "compare upgrade plans" row */
.register-compare {
    width: 100%;
    max-width: 760px;
}
.register-compare-label {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--9v-text-muted);
    margin-bottom: 1rem;
}
.register-compare-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}
.register-compare-card {
    flex: 1 1 320px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--9v-surface-bg);
    border: 1px solid var(--9v-border-light);
    border-radius: 16px;
    padding: 1.25rem 1.35rem;
    transition: var(--9v-transition);
}
.register-compare-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--9v-card-hover-shadow);
    border-color: rgba(var(--bs-primary-rgb), 0.3);
}
.register-compare-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.register-compare-name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.register-compare-desc {
    font-size: 0.8rem;
    color: var(--9v-text-muted);
    line-height: 1.5;
    margin: 0.25rem 0 0;
}
.register-compare-price {
    font-size: 1.1rem;
    font-weight: 800;
    white-space: nowrap;
    color: var(--bs-primary);
    text-align: right;
}
.register-compare-price .price-num--contact { font-size: 1.1rem; }
.register-compare-price .plan-price-trial { font-size: 0.85rem; font-weight: 700; }
.register-compare-card .btn-tier {
    margin-top: auto;
    padding: 0.6rem;
    font-size: 0.86rem;
}
.register-compare-card .price-features {
    list-style: none;
    padding: 0;
    margin: 0;
}
.register-compare-card .price-features li {
    font-size: 0.78rem;
    color: var(--9v-text-muted);
    padding: 0.3rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    line-height: 1.4;
}
.register-compare-card .price-features li i {
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--bs-primary);
}
.register-compare-card .plan-features-toggle {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--bs-primary);
    cursor: pointer;
}
.register-compare-card .plan-features-toggle:hover { text-decoration: underline; }

/* Entrance animation (tab toggles visibility, so animate on render) */
@keyframes registerFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.register-fade-up {
    animation: registerFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--rfade-delay, 0s);
}
.register-compare-card {
    animation: registerFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--rfade-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
    .register-fade-up,
    .register-compare-card { animation: none; }
}

@media (max-width: 575.98px) {
    #register-tab .register-hero-card { padding: 2rem 1.5rem; }
    .register-compare-card { flex-basis: 100%; }
}

/* ── Page header — bold title (matches marketing rhythm) ── */
.object-tab-header-row .page-header-titlewrap {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    align-self: center;
}
.object-tab-header-row h3.page-title {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* Page header divider — always visible on list and detail views */
.object-tab-header-divider {
    margin: 0.75rem 0 1rem;
    border: 0;
    border-top: 1px solid var(--9v-panel-header-border);
    opacity: 1;
}

/* ── Search / filter control bar ───────────────────────── */
.search-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

.search-form-container {
    display: flex;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 0;
}

.search-controls-inner {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

/* Help deep-link target highlight when scrolled into view via an anchor */
.help-anchor-flash {
    animation: helpAnchorFlash 1.6s ease-out;
    border-radius: 0.375rem;
}

@keyframes helpAnchorFlash {
    0%   { background-color: rgba(13, 110, 253, 0.18); }
    100% { background-color: transparent; }
}

/* Portfolio Access governance settings — keep paired cells aligned in the 2×2 grid */
.pac-settings-grid > [class*="col-"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.pac-settings-grid .form-label {
    min-height: 1.5rem;
}

.search-controls-panel {
    transition: opacity 0.16s ease;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.search-controls-panel.is-collapsed {
    opacity: 0;
}

.search-toggle-label {
    font-weight: 600;
}

#tabs-container h3 .btn#search-controls-toggle,
#tabs-container h3 .btn[id$="-search-controls-toggle"] {
    vertical-align: middle;
}

[data-bs-theme="light"] #tabs-container h3 .btn[id$="-search-controls-toggle"].btn-outline-info {
    background-color: var(--bs-secondary-bg-subtle);
    color: #0a58ca;
    border-color: #0a58ca;
}

[data-bs-theme="light"] #tabs-container h3 .btn[id$="-search-controls-toggle"].btn-outline-info:hover,
[data-bs-theme="light"] #tabs-container h3 .btn[id$="-search-controls-toggle"].btn-outline-info:focus-visible {
    color: #ffffff;
    background-color: #0a58ca;
    border-color: #0a58ca;
}

/* Datasource header row above list tables */
.datasource-header-row {
    width: 100%;
}

.datasource-tags {
    min-height: 2rem;
}

.source-result-chip {
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 100px;
    white-space: nowrap;
}

.datasource-paging-controls {
    margin-left: auto;
}

.datasource-paging-controls > div {
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .datasource-paging-controls {
        width: 100%;
        margin-left: 0;
    }

    .datasource-paging-controls > div {
        justify-content: flex-start;
    }

    .bulk-selection-bar > div {
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .bulk-selection-bar [id$="-export-controls"] {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .bulk-selection-bar .ms-auto {
        width: 100%;
        margin-left: 0 !important;
    }

    .bulk-selection-bar .ms-auto .btn {
        width: 100%;
    }
}

/* ── Bulk selection contextual bar ─────────────────────── */
.bulk-selection-bar {
    display: none;
}
.bulk-selection-bar.bulk-bar-visible {
    display: block;
    padding-top: 0.5rem;
    animation: bulk-bar-in 0.18s ease-out;
}
.bulk-selection-bar > div {
    background: var(--bs-warning-bg-subtle);
    border: 1px solid var(--bs-warning-border-subtle);
    gap: 0.45rem !important;
}

.bulk-selection-bar .btn {
    white-space: nowrap;
}

.bulk-selection-bar [id$="-export-controls"] {
    margin-left: 0.25rem;
    max-width: 100%;
}

.bulk-selection-bar [id$="-export-controls"] .btn-group {
    flex-wrap: nowrap;
}

/* Right-edge drawer tab trigger (shown only when rows are selected) */
.bulk-dock-trigger {
    position: fixed;
    right: calc(0.95rem + env(safe-area-inset-right));
    top: 40vh;
    z-index: 1045;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.55rem 0.35rem;
    min-height: 10.5rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--bs-border-radius-sm);
    border-bottom-left-radius: var(--bs-border-radius-sm);
    border-right: 0;
    white-space: nowrap;
    background-color: rgba(13, 110, 253, 0.84);
    border-color: rgba(13, 110, 253, 0.9);
    opacity: 0.82;
    backdrop-filter: blur(2px);
    box-shadow: -10px 10px 24px rgba(0, 0, 0, 0.2);
}

.bulk-dock-trigger:hover,
.bulk-dock-trigger:active {
    background-color: rgba(13, 110, 253, 0.92);
    border-color: rgba(13, 110, 253, 1);
    opacity: 1;
}

.bulk-dock-trigger .bulk-dock-label {
    display: block;
    font-weight: 600;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    line-height: 1;
}

.bulk-dock-trigger .badge {
    min-width: 1.25rem;
    writing-mode: horizontal-tb;
}

.bulk-dock-trigger i {
    writing-mode: horizontal-tb;
}

.bulk-dock-trigger:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--bs-primary) 60%, white 40%);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .bulk-dock-trigger {
        right: calc(0.75rem + env(safe-area-inset-right));
        top: 40vh;
        max-width: calc(100vw - 0.35rem);
        min-height: 9.5rem;
    }

    .bulk-dock-trigger .bulk-dock-label {
        display: block;
    }
}

@keyframes bulk-bar-in {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Selected plan badge in registration form */
#selectedPlanBadge .badge {
    font-size: 0.85rem;
    padding: 0.4em 0.8em;
}

/* ================================================================
   IVR Visualizer — SVG canvas styles
   ================================================================ */

/* Canvas container */
.ivr-detail-canvas {
    display: flex;
    flex-direction: column;
    height: 85vh;
    min-height: 500px;
}
#script-tab-flow .ivr-detail-canvas {
    height: calc(100vh - 280px);
    min-height: 420px;
}
.ivr-detail-canvas .ivr-svg-wrap {
    flex: 1 1 0;
    height: auto;
    min-height: 100px;
}
.ivr-detail-canvas #ivrHangupSection {
    flex: 0 0 auto;
    min-height: 0;
    max-height: 32%;
}
.ivr-detail-canvas #ivrHangupSection .ivr-svg-wrap,
.ivr-detail-canvas .ivr-svg-wrap--hangup {
    height: 100%;
    min-height: 0;
}
.ivr-svg-wrap {
    width: 100%;
    height: 70vh;
    min-height: 400px;
    background-color: #e8ecf1;
    border: 1px solid var(--9v-border-light);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: var(--9v-card-shadow);
    overflow: hidden;
    cursor: grab;
    position: relative;
    transition: var(--9v-transition);
}
.ivr-svg-wrap:hover {
    box-shadow: var(--9v-card-hover-shadow);
}
.ivr-svg-wrap:active {
    cursor: grabbing;
}
.ivr-svg-wrap--hangup {
    height: 35vh;
    min-height: 250px;
}

/* SVG fills wrapper */
#ivrSvg,
#ivrHangupSvg {
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
}

/* Nodes */
.ivr-node-bg {
    cursor: default;
    rx: 8;
    ry: 8;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.10));
}
.ivr-node-overlay {
    pointer-events: none;
    stroke: none;
    fill: transparent;
    transition: fill 0.2s, stroke 0.2s;
    rx: 8;
    ry: 8;
}
.ivr-node-label {
    font-family: var(--bs-font-sans-serif);
    font-size: 13px;
    fill: var(--bs-body-color);
    pointer-events: none;
    font-weight: 500;
    text-anchor: middle;
}
.ivr-node-type-label {
    font-family: var(--bs-font-sans-serif);
    font-size: 10px;
    fill: var(--9v-text-muted);
    pointer-events: none;
    font-weight: 400;
    text-anchor: middle;
}
.ivr-node-group {
    transition: transform 0.15s ease-out;
    cursor: pointer;
}
.ivr-node-group.ivr-selected .ivr-node-bg {
    stroke-width: 3;
    filter: drop-shadow(0 0 8px rgba(13, 110, 253, 0.5));
}
.ivr-node-group.ivr-dragging {
    cursor: grabbing;
    transition: none;
    opacity: 0.72;
    filter: drop-shadow(0 6px 16px rgba(13, 110, 253, 0.45));
}

/* Connection ports */
.ivr-port {
    fill: var(--9v-surface-bg);
    stroke: var(--9v-text-muted);
    stroke-width: 1.5;
    opacity: 0;
    cursor: crosshair;
    transition: opacity 0.2s, fill 0.2s, stroke 0.2s;
    pointer-events: all;
}
.ivr-node-group:hover .ivr-port,
.ivr-node-group.ivr-selected .ivr-port {
    opacity: 1;
}
.ivr-port:hover {
    fill: var(--bs-primary);
    stroke: var(--bs-primary);
    opacity: 1;
}
.ivr-port--error:hover {
    fill: #dc3545;
    stroke: #dc3545;
}

/* Wiring rubber-band line */
.ivr-wiring-line {
    stroke: var(--bs-primary);
    stroke-width: 2;
    stroke-dasharray: 6, 4;
    fill: none;
    pointer-events: none;
}
.ivr-wiring-active {
    cursor: crosshair !important;
}

/* Edge click selection */
.ivr-edge-clickable {
    cursor: pointer;
    stroke-width: 1.5;
    pointer-events: stroke;
}
.ivr-edge-clickable:hover {
    stroke-width: 3;
}
.ivr-edge--selected {
    stroke: var(--bs-primary) !important;
    stroke-width: 3;
    stroke-dasharray: none;
}
.ivr-edge--selected.ivr-edge--error {
    stroke: #dc3545 !important;
}

/* Module palette dropdown */
.ivr-palette-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}
.ivr-palette-menu .dropdown-item {
    font-size: 0.875rem;
    padding: 0.35rem 1rem;
}

/* Edges */
.ivr-edge {
    fill: none;
    stroke: var(--9v-text-muted);
    stroke-width: 1.5;
    transition: stroke 0.2s, stroke-width 0.2s;
}
.ivr-edge--error {
    stroke: #dc3545;
    stroke-dasharray: 5, 5;
}
.ivr-edge-label {
    font-family: var(--bs-font-sans-serif);
    font-size: 11px;
    fill: var(--9v-text-muted);
    pointer-events: none;
    font-weight: 500;
}

/* Branch pills */
.ivr-branch-pill {
    fill: var(--9v-surface-bg);
    stroke: var(--9v-border-light);
    stroke-width: 1;
    rx: 10;
    ry: 10;
}
.ivr-branch-pill-text {
    font-family: var(--bs-font-sans-serif);
    font-size: 11px;
    fill: var(--bs-body-color);
    pointer-events: none;
}

/* Arrow marker */
.ivr-arrow {
    fill: var(--9v-text-muted);
}

/* ── Phase 6 — Mini-map ── */
.ivr-minimap {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 180px;
    height: 120px;
    background: var(--9v-surface-bg);
    border: 1px solid var(--9v-border-light);
    border-radius: var(--bs-border-radius-sm);
    box-shadow: var(--9v-card-shadow);
    overflow: hidden;
    opacity: 0.85;
    transition: opacity 0.2s;
    z-index: 10;
    pointer-events: auto;
}
.ivr-minimap:hover {
    opacity: 1;
}
.ivr-minimap-svg {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
}
.ivr-minimap-viewport {
    fill: rgba(13, 110, 253, 0.12);
    stroke: var(--bs-primary);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* ── Phase 6 — Search highlights ── */
.ivr-node-group.ivr-search-match .ivr-node-bg {
    stroke: #ffc107 !important;
    stroke-width: 3;
    filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.6));
}
.ivr-node-group.ivr-search-active .ivr-node-bg {
    stroke: #0dcaf0 !important;
    stroke-width: 4;
    filter: drop-shadow(0 0 14px rgba(13, 202, 240, 0.75));
}
.ivr-node-group.ivr-search-dim {
    opacity: 0.3;
}

/* ── Phase 6 — Search input bar ── */
.ivr-search-bar {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ivr-search-bar input {
    width: 160px;
    font-size: 0.8125rem;
    padding: 0.2rem 0.5rem;
}
.ivr-search-count {
    font-size: 0.75rem;
    font-weight: 500;
}

.ivr-advanced-search {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.ivr-advanced-search .form-select,
.ivr-advanced-search .form-control {
    width: auto;
    min-width: 110px;
    font-size: 0.78rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.ivr-adv-input-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 110px;
}

.ivr-adv-input-wrap .form-control {
    width: 100%;
    padding-right: 1.45rem;
}

.ivr-adv-field-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 140px;
}

.ivr-adv-field-hint {
    font-size: 0.64rem;
    line-height: 1;
    white-space: nowrap;
    padding-left: 2px;
}

.ivr-adv-clear-btn {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--9v-text-muted);
    padding: 0;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
}

.ivr-adv-clear-btn:hover,
.ivr-adv-clear-btn:focus-visible {
    opacity: 1;
    color: var(--bs-secondary-color);
}

.ivr-advanced-search #ivrAdvFieldPath {
    min-width: 140px;
}

.ivr-advanced-search #ivrAdvValue {
    min-width: 130px;
}

/* ── IVR flow toolbar (detail / fullscreen / dual-pane) ── */
.ivr-flow-toolbar {
    row-gap: 0.5rem;
}
.ivr-toolbar-search {
    flex: 1 1 auto;
    justify-content: flex-end;
}
.ivr-adv-filter-panel {
    min-width: 300px;
    max-width: 360px;
}
.ivr-advanced-search--panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}
.ivr-advanced-search--panel .ivr-adv-input-wrap,
.ivr-advanced-search--panel .ivr-adv-field-wrap {
    width: 100%;
    min-width: 0;
}
.ivr-advanced-search--panel .form-control,
.ivr-advanced-search--panel .form-select {
    width: 100%;
    min-width: 0;
}
.ivr-advanced-search--panel .ivr-adv-nav-row {
    margin-top: 0.15rem;
}

/* Dark-mode overrides */
[data-bs-theme="dark"] .ivr-svg-wrap {
    background-color: #111827;
}
[data-bs-theme="dark"] .ivr-node-bg {
    fill: #243044;
    stroke-width: 2.5;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.40));
}
[data-bs-theme="dark"] .ivr-node-group image {
    filter: invert(1) brightness(2);
}
[data-bs-theme="dark"] .ivr-branch-pill {
    fill: #243044;
}
[data-bs-theme="dark"] .ivr-edge {
    stroke: #8b95a5;
    stroke-width: 1.8;
}
[data-bs-theme="dark"] .ivr-arrow {
    fill: #8b95a5;
}
[data-bs-theme="dark"] .ivr-node-group.ivr-selected .ivr-node-bg {
    filter: drop-shadow(0 0 10px rgba(13, 110, 253, 0.7));
}
[data-bs-theme="dark"] .ivr-port {
    fill: #243044;
    stroke: #8b95a5;
}
[data-bs-theme="dark"] .ivr-wiring-line {
    stroke: #6ea8fe;
}
[data-bs-theme="dark"] .ivr-edge--selected {
    stroke: #6ea8fe !important;
}
[data-bs-theme="dark"] .ivr-minimap {
    background: #111827;
    border-color: rgba(148, 163, 184, 0.16);
}
[data-bs-theme="dark"] .ivr-minimap-viewport {
    fill: rgba(110, 168, 254, 0.15);
    stroke: #6ea8fe;
}
[data-bs-theme="dark"] .ivr-node-group.ivr-search-match .ivr-node-bg {
    filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.8));
}
[data-bs-theme="dark"] .ivr-node-group.ivr-search-active .ivr-node-bg {
    filter: drop-shadow(0 0 14px rgba(13, 202, 240, 0.9));
}

/* ── IVR Full-Screen Overlay (Phase A) ── */
.ivr-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background-color: var(--9v-surface-bg, #ffffff);
    display: flex;
    flex-direction: column;
}
.ivr-fs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--9v-header-bg, linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%));
    color: #fff;
    flex-shrink: 0;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.ivr-fs-toolbar .btn-outline-secondary {
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.3);
}
.ivr-fs-toolbar .btn-outline-secondary:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}
.ivr-fs-toolbar .ivr-search-bar input {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.ivr-fs-toolbar .ivr-search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.ivr-fs-toolbar .ivr-advanced-search .form-select,
.ivr-fs-toolbar .ivr-advanced-search .form-control {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.ivr-fs-toolbar .ivr-advanced-search .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.ivr-fs-toolbar .ivr-adv-field-hint {
    color: rgba(255, 255, 255, 0.55) !important;
}
.ivr-fs-toolbar .ivr-adv-clear-btn {
    color: rgba(255, 255, 255, 0.7);
}
.ivr-fs-toolbar .ivr-adv-clear-btn:hover,
.ivr-fs-toolbar .ivr-adv-clear-btn:focus-visible {
    color: rgba(255, 255, 255, 0.95);
}

.ivr-adv-field-dropdown {
    max-width: min(80vw, 760px);
    overflow-x: hidden;
}

.ivr-adv-module-dropdown {
    max-width: min(72vw, 520px);
    overflow-x: hidden;
}

.ivr-adv-field-dropdown .dropdown-item,
.ivr-adv-field-dropdown .typeahead-group-header {
    white-space: normal;
    overflow-wrap: anywhere;
}

.ivr-adv-module-dropdown .dropdown-item,
.ivr-adv-module-dropdown .typeahead-group-header {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ── IVR function body editor (script globals modal) ── */
.ivr-fn-body-shell {
    border-radius: var(--bs-border-radius);
}
.ivr-fn-body-shell--error .ivr-fn-body-editor {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.15);
}
.ivr-fn-body-editor {
    display: flex;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background: var(--bs-body-bg);
}
.ivr-fn-body-gutter {
    flex: 0 0 auto;
    min-width: 2.75rem;
    padding: 0.375rem 0.5rem;
    background: var(--bs-secondary-bg);
    border-right: 1px solid var(--bs-border-color);
    font-family: var(--bs-font-monospace, ui-monospace, monospace);
    font-size: 0.875rem;
    line-height: 1.5;
    user-select: none;
    text-align: right;
    color: var(--bs-secondary-color);
    overflow: hidden;
}
.ivr-fn-gutter-line {
    height: 1.5em;
}
.ivr-fn-gutter-line--error {
    color: var(--bs-danger);
    font-weight: 700;
    background: rgba(var(--bs-danger-rgb), 0.18);
    border-radius: 0.15rem;
}
.ivr-fn-body-input-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
}
.ivr-fn-body-error-band {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 0;
    background: rgba(var(--bs-danger-rgb), 0.12);
    pointer-events: none;
}
.ivr-fn-body-input-wrap .ivr-fn-body {
    position: relative;
    z-index: 1;
    border: 0;
    border-radius: 0;
    resize: vertical;
    width: 100%;
    line-height: 1.5;
    font-size: 0.875rem;
    background: transparent;
}
.ivr-fn-body-input-wrap .ivr-fn-body:focus {
    box-shadow: none;
}
.ivr-fn-test-panel {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color) !important;
}
.ivr-fn-test-panel .form-label,
.ivr-fn-test-panel .text-muted {
    color: var(--bs-secondary-color) !important;
}

.ivr-tts-preview {
    resize: vertical;
    min-height: 2.5rem;
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
    cursor: default;
}
.ivr-tts-preview:focus {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
    box-shadow: none;
}

.ivr-fs-toolbar .ivr-advanced-search .form-select option {
    color: #212529;
}
.ivr-fs-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}
.ivr-fs-body .ivr-svg-wrap {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    border: none;
    border-radius: 0;
}
.ivr-fs-body #ivrHangupSection {
    flex: 0 0 auto;
    max-height: 32%;
    min-height: 60px;
    overflow: hidden;
    background: var(--9v-surface-bg, #ffffff);
    border-top: none;
}
.ivr-fs-body #ivrHangupSection .ivr-svg-wrap,
.ivr-fs-body .ivr-svg-wrap--hangup {
    height: 100%;
    min-height: 0;
}
[data-bs-theme="dark"] .ivr-fullscreen-overlay {
    background-color: var(--bs-body-bg);
}
[data-bs-theme="dark"] .ivr-fs-body #ivrHangupSection {
    background-color: var(--bs-body-bg);
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ── IVR resizable splitter ───────────────────────── */
.ivr-splitter {
    flex: 0 0 6px;
    height: 6px;
    cursor: row-resize;
    background: var(--9v-border-light);
    position: relative;
    z-index: 5;
    transition: background 0.15s;
    user-select: none;
}
.ivr-splitter::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: var(--9v-text-muted);
    opacity: 0.4;
    transition: opacity 0.15s;
}
.ivr-splitter:hover,
.ivr-splitter.ivr-splitter-active {
    background: var(--bs-primary);
}
.ivr-splitter:hover::after,
.ivr-splitter.ivr-splitter-active::after {
    opacity: 0.8;
    background: #fff;
}
[data-bs-theme="dark"] .ivr-splitter {
    background: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .ivr-splitter:hover,
[data-bs-theme="dark"] .ivr-splitter.ivr-splitter-active {
    background: var(--bs-primary);
}

/* ── Floating reset-zoom button ───────────────────── */
.ivr-floating-reset {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 8;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--bs-border-radius-sm);
    background: rgba(0, 0, 0, 0.15);
    color: var(--9v-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s, background 0.2s;
    pointer-events: auto;
}
.ivr-floating-reset:hover {
    opacity: 1;
    background: var(--bs-primary);
    color: #fff;
}
[data-bs-theme="dark"] .ivr-floating-reset {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}
[data-bs-theme="dark"] .ivr-floating-reset:hover {
    background: var(--bs-primary);
    color: #fff;
}

/* ── Dual-pane IVR overlay ────────────────────────── */
.ivr-dual-body {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    min-height: 0;
}
.ivr-dual-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--9v-border-light);
    transition: box-shadow 0.2s ease;
}
.ivr-dual-pane:last-child {
    border-right: none;
}
.ivr-dual-pane-active {
    box-shadow: inset 0 3px 0 0 var(--bs-primary);
}
.ivr-dual-pane-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: var(--9v-surface-bg);
    border-bottom: 1px solid var(--9v-border-light);
    flex-shrink: 0;
}
.ivr-dual-pane-toolbar .ivr-search-bar {
    flex: 0 1 180px;
}
.ivr-dual-pane-toolbar .ivr-advanced-search {
    flex: 1 1 auto;
}

/* ── Credential Chip Colors ── */
.cred-chip-vcc {
    background: linear-gradient(135deg, #1e3a5f, #0f172a) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.cred-chip-studio {
    background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Light theme — the dark navy/purple chips above were built for the old dark
   header and read as black/slate on the light chrome. Recolor to calm, branded
   light chips (VCC = blue, Studio = purple); the env badge still carries the
   prod/dev/uat alert color. */
[data-bs-theme="light"] .cred-chip-vcc {
    background: #e6effc !important;
    color: #0a58ca !important;
    border-color: #c2dbfa;
}
[data-bs-theme="light"] .cred-chip-studio {
    background: #efe8fc !important;
    color: #6d28d9 !important;
    border-color: #d9c8f6;
}
/* The remove (x) button ships as btn-close-white; flip it dark on the light chip */
[data-bs-theme="light"] .cred-chip-vcc .btn-close-white,
[data-bs-theme="light"] .cred-chip-studio .btn-close-white {
    filter: none;
}

.datasource-refresh-btn {
    color: inherit;
    text-decoration: none;
    opacity: 0.75;
    line-height: 1;
}
.datasource-refresh-btn:hover,
.datasource-refresh-btn:focus-visible {
    color: inherit;
    opacity: 1;
    text-decoration: none;
}
.datasource-refresh-btn .bi {
    font-size: 0.8rem;
}
.datasource-refresh-btn.is-refreshing .bi {
    animation: datasourceRefreshSpin 0.8s linear infinite;
}

@keyframes datasourceRefreshSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Environment Badge System ── */
.env-label-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 100px;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}
.env-label-badge i { font-size: 0.6rem; }

/* DEV — emerald */
.env-label-dev {
    background: #059669;
    color: #fff;
    border: 1px solid #047857;
}
/* UAT — indigo */
.env-label-uat {
    background: #4f46e5;
    color: #fff;
    border: 1px solid #4338ca;
}
/* PROD — crimson */
.env-label-prod {
    background: #dc2626;
    color: #fff;
    border: 1px solid #b91c1c;
}

/* Light-mode — same solid colors, slightly lighter */
[data-bs-theme="light"] .env-label-dev  { background: #10b981; border-color: #059669; color: #fff; }
[data-bs-theme="light"] .env-label-uat  { background: #6366f1; border-color: #4f46e5; color: #fff; }
[data-bs-theme="light"] .env-label-prod { background: #ef4444; border-color: #dc2626; color: #fff; }

/* Jobs & creds list — mute DEV/UAT env badges; PROD stays saturated as danger anchor */
#jobs-table .env-label-dev,
#jobs-table .env-label-uat,
#creds-table .env-label-dev,
#creds-table .env-label-uat {
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: var(--9v-text-quiet-strong);
    border-color: color-mix(in srgb, currentColor 25%, transparent);
}

/* Environment selector button group on detail page */
.env-selector-group {
    display: inline-flex;
    gap: 0.25rem;
}
.env-selector-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--bs-border-radius-sm);
    border: 1px solid var(--9v-border-light);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: var(--9v-transition);
    color: var(--9v-text-muted);
}
.env-selector-btn:hover {
    background: rgba(128, 128, 128, 0.08);
    transform: translateY(-1px);
}
.env-selector-btn.active {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.env-selector-btn.active[data-env="dev"]  { background: #059669; }
.env-selector-btn.active[data-env="uat"]  { background: #4f46e5; }
.env-selector-btn.active[data-env="prod"] { background: #dc2626; }
.env-selector-btn.active[data-env=""]     { background: var(--9v-text-muted); }

/* Mini badge for datasource chips */
.env-chip-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.05rem 0.35rem;
    border-radius: 100px;
    margin-left: 0.3rem;
    vertical-align: middle;
}
.env-chip-badge.env-label-dev,
.env-chip-badge.env-label-uat,
.env-chip-badge.env-label-prod {
    /* inherit colors from parent env-label-* classes */
}
.env-chip-badge i { font-size: 0.5rem; }
.ivr-dual-pane-toolbar .ivr-search-bar input {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.15);
    color: inherit;
    font-size: 0.8rem;
}
.ivr-dual-pane-toolbar .ivr-advanced-search .form-select,
.ivr-dual-pane-toolbar .ivr-advanced-search .form-control {
    font-size: 0.75rem;
    min-width: 96px;
}
.ivr-dual-pane .ivr-svg-wrap {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    overflow: auto;
    position: relative;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.ivr-dual-pane .ivr-svg-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
}
.ivr-dual-pane [id^="ivrDualHangupSection"] {
    flex: 0 0 22%;
    max-height: 28%;
    min-height: 80px;
    overflow: hidden;
    background: var(--9v-surface-bg);
}
.ivr-dual-pane [id^="ivrDualHangupSection"] .ivr-svg-wrap,
.ivr-dual-pane .ivr-svg-wrap--hangup {
    height: 100%;
    min-height: 0;
}
[data-bs-theme="dark"] .ivr-dual-pane {
    border-right-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .ivr-dual-pane [id^="ivrDualHangupSection"] {
    background-color: var(--bs-body-bg);
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ── Cross-SVG drag ghost & drop zone ─────────────── */
.ivr-drag-ghost {
    position: fixed;
    z-index: 1070;
    padding: 0.375rem 0.75rem;
    background: var(--bs-primary);
    color: #fff;
    border-radius: var(--bs-border-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    animation: ivrGhostIn 0.15s ease-out;
}
@keyframes ivrGhostIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 0.9; transform: scale(1); }
}
.ivr-dual-drop-zone {
    box-shadow: inset 0 0 0 3px var(--bs-primary), inset 0 0 24px rgba(13, 110, 253, 0.1);
    transition: box-shadow 0.2s ease;
}

/* ── Audit History Tab ───────────────────────────── */
/* Table header: neutral translucent tint — works in both light and dark mode */
.audit-thead th {
    background-color: rgba(128, 128, 128, 0.1) !important;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2) !important;
    font-weight: 600;
}

/* Audit timeline rows: stronger separator + hover lift in light mode */
.audit-entry {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    transition: background-color 0.15s ease;
}
.audit-entry:hover {
    background-color: rgba(0, 0, 0, 0.025);
}
[data-bs-theme="dark"] .audit-entry {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .audit-entry:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

/* Wrap the timeline in a subtle card-like surface for visual lift */
.audit-timeline {
    border: 1px solid var(--9v-border-light);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background-color: var(--9v-surface-bg);
}

/* ── Startup failure full-screen panel ─────────────────────── */
.app-startup-failure {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    z-index: 200000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 45%, #0f172a 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app-startup-failure.app-startup-failure-visible {
    display: flex;
}

.app-startup-failure-card {
    width: min(520px, 100%);
    max-height: calc(100dvh - 3rem);
    overflow-y: auto;
    padding: 2.25rem 2rem 2rem;
    border-radius: var(--bs-border-radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(15, 23, 42, 0.96);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    color: #f8fafc;
    text-align: center;
    text-rendering: optimizeLegibility;
}

.app-startup-failure-mark {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(248, 113, 113, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #fca5a5;
    font-size: 1.45rem;
}

.app-startup-failure-eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(248, 250, 252, 0.55);
}

.app-startup-failure-title {
    margin: 0 0 0.85rem;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.app-startup-failure-message {
    margin: 0 0 1.25rem;
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(248, 250, 252, 0.78);
}

.app-startup-failure-details {
    margin-bottom: 1.35rem;
    text-align: left;
    padding: 0.85rem 1rem;
    border-radius: var(--bs-border-radius);
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.app-startup-failure-details-label {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(248, 250, 252, 0.5);
}

.app-startup-failure-details-list {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(248, 250, 252, 0.72);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.app-startup-failure-actions {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}

.app-startup-failure-preview-note {
    margin: 0 0 0.85rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(147, 197, 253, 0.85);
}

.app-startup-failure-footnote {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(248, 250, 252, 0.45);
}

.app-startup-failure-link {
    color: rgba(147, 197, 253, 0.9);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.app-startup-failure-link:hover {
    color: #bfdbfe;
}

body.app-startup-failure-active {
    overflow: hidden;
    background: #0f172a;
}

body.app-startup-failure-active #navigation-top,
body.app-startup-failure-active #sidebar,
body.app-startup-failure-active #tabs-container,
body.app-startup-failure-active #toast-container,
body.app-startup-failure-active #page-load-bar,
body.app-startup-failure-active #ivrFullscreenOverlay {
    display: none !important;
}

/* ================================================================
   Restore manifest report — KPI tiles + per-object accordion
   Shares the dashboard elevation tokens; tone carried by thin
   accents + chips, never large fills. Works in both themes via
   --bs-* / --9v-* custom properties.
   ================================================================ */

/* KPI tiles — mirror the dashboard #kpi-bar treatment */
.restore-kpi .card {
    background: var(--9v-dash-kpi-bg);
    border: 1px solid var(--9v-dash-border);
    box-shadow: var(--9v-dash-shadow);
    transition: var(--9v-transition);
    overflow: hidden;
}
.restore-kpi .card:hover {
    box-shadow: var(--9v-dash-shadow-hover);
}
.restore-kpi .display-6 {
    font-size: 1.9rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: color-mix(in srgb, var(--bs-body-color) 90%, var(--bs-emphasis-color) 10%);
}
.restore-kpi .card-body > .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 14%, transparent);
    margin-bottom: 0.3rem;
    font-size: 1.05rem;
}
.restore-kpi .small.text-muted {
    color: var(--9v-text-quiet-strong) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
}

/* Tier legend dots */
.ro-legend-dot {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.15rem;
}
.ro-legend-dot.c-error { background: var(--bs-danger); }
.ro-legend-dot.c-limitation { background: var(--bs-warning); }
.ro-legend-dot.c-info { background: color-mix(in srgb, var(--bs-secondary) 70%, var(--bs-body-color)); }

/* Accordion shell */
.restore-report {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.ro-type {
    border: 1px solid var(--9v-border-light);
    border-left: 3px solid var(--9v-border-light);
    border-radius: var(--bs-border-radius);
    background: var(--9v-surface-bg);
    overflow: hidden;
}
.ro-type.ro-error { border-left-color: var(--bs-danger); }
.ro-type.ro-warning { border-left-color: var(--bs-warning); }
.ro-type.ro-clean { border-left-color: color-mix(in srgb, var(--bs-success) 55%, transparent); }

.ro-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    font-weight: 600;
    user-select: none;
}
.ro-summary::-webkit-details-marker { display: none; }
.ro-summary:hover { background: color-mix(in srgb, var(--bs-body-color) 4%, transparent); }
.ro-caret i {
    display: inline-block;
    transition: transform 0.15s ease;
    color: var(--9v-text-muted);
}
.ro-type[open] > .ro-summary .ro-caret i { transform: rotate(90deg); }
.ro-name { flex: 1 1 auto; min-width: 0; }
.ro-stats { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.ro-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.12rem 0.5rem;
    border-radius: 1rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}
.ro-badge .bi { font-size: 0.7rem; }
.ro-badge.ins { color: var(--bs-info); background: color-mix(in srgb, var(--bs-info) 15%, transparent); }
.ro-badge.upd { color: var(--bs-success); background: color-mix(in srgb, var(--bs-success) 15%, transparent); }
.ro-badge.skp { color: var(--9v-text-quiet-strong); background: color-mix(in srgb, var(--bs-secondary) 18%, transparent); }
.ro-badge.inf { color: var(--bs-info); background: color-mix(in srgb, var(--bs-info) 15%, transparent); }
.ro-badge.wrn { color: var(--bs-warning); background: color-mix(in srgb, var(--bs-warning) 18%, transparent); }
.ro-badge.err { color: var(--bs-danger); background: color-mix(in srgb, var(--bs-danger) 16%, transparent); }

/* Entry list (level 2 → individual notices) */
.ro-entries {
    padding: 0.35rem 0.7rem 0.6rem 1.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border-top: 1px solid var(--9v-border-light);
}
.ro-entry { border-radius: var(--bs-border-radius-sm); }
.ro-entry-static .ro-entry-line {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.3rem 0.4rem;
}
.ro-entry-msg-full {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    color: var(--bs-body-color);
}
.ro-entry-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.4rem;
    border-radius: 0.3rem;
    user-select: none;
}
.ro-entry-summary::-webkit-details-marker { display: none; }
.ro-entry-summary:hover { background: color-mix(in srgb, var(--bs-body-color) 6%, transparent); }
.ro-chip {
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.12rem 0.45rem;
    border-radius: 0.3rem;
    white-space: nowrap;
}
.ro-chip.c-error { color: #fff; background: var(--bs-danger); }
.ro-chip.c-limitation {
    color: color-mix(in srgb, var(--bs-warning) 35%, var(--bs-body-color));
    background: color-mix(in srgb, var(--bs-warning) 22%, transparent);
}
.ro-chip.c-info {
    color: var(--9v-text-quiet-strong);
    background: color-mix(in srgb, var(--bs-secondary) 20%, transparent);
}
.ro-entry-msg {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.82rem;
    color: var(--9v-text-quiet-strong);
    font-family: var(--bs-font-monospace, ui-monospace, monospace);
}
.ro-entry[open] > .ro-entry-summary .ro-entry-msg { color: var(--bs-body-color); }
.ro-entry-full {
    margin: 0.1rem 0.4rem 0.4rem 1.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--bs-border-radius-sm);
    background: var(--bs-body-bg);
    border: 1px solid var(--9v-border-light);
    font-size: 0.82rem;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--bs-body-color);
    font-family: var(--bs-font-monospace, ui-monospace, monospace);
}
.ro-clean-note {
    font-size: 0.82rem;
    color: var(--bs-success);
    padding: 0.15rem 0.4rem;
}
.ro-totals-note {
    padding: 0.35rem 0.4rem;
    border-radius: var(--bs-border-radius-sm);
    background: color-mix(in srgb, var(--bs-secondary) 8%, transparent);
    border: 1px solid var(--9v-border-light);
}

/* KPI clickable filters (restore manifest report) */
.restore-kpi .kpi-card { cursor: pointer; }
.restore-kpi .kpi-card:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
.restore-kpi .col { position: relative; }
.restore-kpi .kpi-card.kpi-active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary), var(--9v-dash-shadow-hover);
}
.restore-kpi .kpi-card.kpi-active::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--9v-accent-gradient);
}
.restore-kpi.has-active .kpi-card:not(.kpi-active) { opacity: 0.55; }
.kpi-filtered-hidden { display: none !important; }

/* Run History table */
#job-runs-table-wrap .job-runs-table {
    width: 100%;
    table-layout: auto;
}
#job-runs-table-wrap .run-datetime-cell {
    white-space: nowrap;
    font-size: 0.8125rem;
    width: 172px;
}
#job-runs-table-wrap .run-outcome-cell {
    font-size: 0.8125rem;
    width: 120px;
}
#job-runs-table-wrap .run-files-cell {
    width: 52px;
    text-align: center;
}
#job-runs-table-wrap .run-actions-cell {
    width: 156px;
    text-align: right;
}
#job-runs-table-wrap.job-runs-backup-layout .job-runs-col-kpi {
    display: none;
}
#job-runs-table-wrap.job-runs-restore-layout .job-runs-col-summary {
    display: none;
}
#job-runs-table-wrap .run-kpi-col {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.run-kpi-col-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}
#job-runs-table-wrap .run-kpi-col .bi {
    font-size: 0.95rem;
}
.run-outcome-label {
    font-weight: 500;
}
.prior-run-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}
.prior-run-actions .btn {
    padding: 0.28rem 0.5rem;
    line-height: 1;
}
.prior-run-actions .btn .bi {
    font-size: 0.95rem;
}
.run-kpi-cell {
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}
.run-kpi-ins { color: var(--bs-info); }
.run-kpi-upd { color: var(--bs-success); }
.run-kpi-skp { color: var(--bs-secondary); }
.run-kpi-inf { color: var(--bs-secondary); }
.run-kpi-wrn { color: var(--bs-warning); }
.run-kpi-err { color: var(--bs-danger); }
.run-summary-cell { min-width: 140px; }

/* Full-page manifest route (/login/manifest/{jobId}/{runDateTime}) */
#manifest-tab .detail-view,
#manifest-detail-content,
#manifest-detail-content .manifest-render-root,
#manifest-detail-content .card-body {
    overflow: visible;
    max-height: none;
}
#manifest-tab .object-detail-breadcrumb:not(.d-none) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
}
#manifest-tab .object-detail-breadcrumb .breadcrumb-item {
    display: flex;
    align-items: center;
}
#manifest-tab .object-detail-breadcrumb .btn-link {
    padding-left: 0.15rem;
    padding-right: 0.15rem;
}
.manifest-page-toolbar {
    border-bottom: 1px solid var(--9v-border-light);
    padding-bottom: 0.75rem;
}

/* Backup manifest — muted panels (align with restore report) */
.backup-manifest-warnings {
    background: color-mix(in srgb, var(--bs-warning) 10%, var(--9v-surface-bg, var(--bs-card-bg)));
    border: 1px solid color-mix(in srgb, var(--bs-warning) 22%, var(--bs-border-color));
    border-radius: var(--bs-border-radius);
    padding: 0.75rem 1rem;
}
.backup-manifest-info-card {
    border-color: color-mix(in srgb, var(--bs-info) 22%, var(--bs-border-color)) !important;
}
.backup-manifest-info-card > .card-header {
    background: color-mix(in srgb, var(--bs-info) 8%, var(--9v-surface-bg, var(--bs-card-bg)));
    border-bottom: 1px solid color-mix(in srgb, var(--bs-info) 18%, var(--bs-border-color));
}
.backup-manifest-danger-card {
    border-color: color-mix(in srgb, var(--bs-danger) 22%, var(--bs-border-color)) !important;
}
.backup-manifest-danger-card > .card-header {
    background: color-mix(in srgb, var(--bs-danger) 8%, var(--9v-surface-bg, var(--bs-card-bg)));
    border-bottom: 1px solid color-mix(in srgb, var(--bs-danger) 18%, var(--bs-border-color));
}
.manifest-objects-table .manifest-dep-row > td {
    background: color-mix(in srgb, var(--bs-secondary-bg) 35%, transparent);
}
.manifest-objects-table .manifest-audio-row > td {
    background: color-mix(in srgb, var(--bs-info) 6%, transparent);
}
.kpi-active-bar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.kpi-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-primary) 35%, transparent);
    text-transform: capitalize;
}
.kpi-clear { text-decoration: none; }

/* ── Side-by-side JSON diff (Diff Checker L4 + Quick Compare) ── */
.dc-json-diff {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    overflow: hidden;
    background: var(--bs-body-bg);
}
.dc-json-diff-labels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid var(--bs-border-color);
    background: color-mix(in srgb, var(--bs-secondary-bg) 70%, transparent);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.dc-json-diff-label {
    padding: 0.35rem 0.75rem;
}
.dc-json-diff-label-a { border-right: 1px solid var(--bs-border-color); }
.dc-json-diff-body {
    font-family: var(--bs-font-monospace, ui-monospace, monospace);
    font-size: 0.78rem;
    line-height: 1.45;
    max-height: 28rem;
    overflow: auto;
}
.dc-json-diff-row {
    display: grid;
    grid-template-columns: 2.5rem 1fr 2.5rem 1fr;
    min-height: 1.45em;
    border-bottom: 1px solid color-mix(in srgb, var(--bs-border-color) 55%, transparent);
}
.dc-json-diff-row:last-child { border-bottom: none; }
.dc-json-diff-gutter {
    padding: 0 0.35rem;
    text-align: right;
    color: var(--bs-secondary-color);
    user-select: none;
    border-right: 1px solid color-mix(in srgb, var(--bs-border-color) 45%, transparent);
    background: color-mix(in srgb, var(--bs-tertiary-bg) 80%, transparent);
}
.dc-json-diff-gutter-b { border-right: none; }
.dc-json-diff-code {
    padding: 0 0.5rem;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.dc-json-diff-code-a { border-right: 1px solid var(--bs-border-color); }
.dc-json-diff-same .dc-json-diff-code { background: transparent; }
.dc-json-diff-remove .dc-json-diff-code-a {
    background: color-mix(in srgb, var(--bs-danger) 14%, transparent);
}
.dc-json-diff-add .dc-json-diff-code-b {
    background: color-mix(in srgb, var(--bs-success) 14%, transparent);
}
.dc-json-diff-change .dc-json-diff-code-a,
.dc-json-diff-change .dc-json-diff-code-b {
    background: color-mix(in srgb, var(--bs-warning) 12%, transparent);
}
.dc-json-diff-line-remove {
    background: color-mix(in srgb, var(--bs-danger) 22%, transparent);
}
.dc-json-diff-line-add {
    background: color-mix(in srgb, var(--bs-success) 22%, transparent);
}
.dc-json-diff-ch-remove {
    background: color-mix(in srgb, var(--bs-danger) 35%, transparent);
    border-radius: 2px;
}
.dc-json-diff-ch-add {
    background: color-mix(in srgb, var(--bs-success) 35%, transparent);
    border-radius: 2px;
}
.dc-json-diff-ch-left-all,
.dc-json-diff-ch-right-all {
    display: inline-block;
    width: 100%;
}
.dc-json-diff-ch-left-all {
    background: color-mix(in srgb, var(--bs-danger) 28%, transparent);
}
.dc-json-diff-ch-right-all {
    background: color-mix(in srgb, var(--bs-success) 28%, transparent);
}
.dc-json-diff-fold {
    background: color-mix(in srgb, var(--bs-secondary-bg) 65%, transparent);
}
.dc-json-diff-fold-label {
    grid-column: 2 / -1;
    text-align: center;
    color: var(--bs-secondary-color);
    font-style: italic;
    padding: 0.2rem 0.5rem;
}
[data-bs-theme="dark"] .dc-json-diff-remove .dc-json-diff-code-a {
    background: color-mix(in srgb, var(--bs-danger) 22%, transparent);
}
[data-bs-theme="dark"] .dc-json-diff-add .dc-json-diff-code-b {
    background: color-mix(in srgb, var(--bs-success) 22%, transparent);
}
[data-bs-theme="dark"] .dc-json-diff-change .dc-json-diff-code-a,
[data-bs-theme="dark"] .dc-json-diff-change .dc-json-diff-code-b {
    background: color-mix(in srgb, var(--bs-warning) 18%, transparent);
}
.dc-json-diff-code .dc-field-audit-badge {
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: baseline;
    white-space: nowrap;
}

/* ── Quick Compare FAB + modal ── */
.qc-fab {
    position: fixed;
    bottom: 5.5rem;
    right: 1.25rem;
    z-index: 1085;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--bs-primary) 35%, transparent);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.qc-fab:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--bs-primary) 45%, transparent);
}
.qc-fab:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
.qc-fab i { font-size: 1.1rem; }
@keyframes qc-pulse {
    0%, 100% {
        box-shadow:
            0 4px 14px color-mix(in srgb, var(--bs-primary) 35%, transparent),
            0 0 0 0 color-mix(in srgb, var(--bs-primary) 45%, transparent);
    }
    50% {
        box-shadow:
            0 4px 14px color-mix(in srgb, var(--bs-primary) 35%, transparent),
            0 0 0 10px color-mix(in srgb, var(--bs-primary) 0%, transparent);
    }
}
.qc-fab.qc-fab-pulse {
    animation: qc-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .qc-fab.qc-fab-pulse { animation: none; }
    .qc-fab { transition: none; }
}
.qc-modal-content {
    background: var(--9v-surface-bg, var(--bs-body-bg));
    border-color: var(--bs-border-color);
}
.qc-modal-header {
    background: color-mix(in srgb, var(--bs-secondary-bg) 55%, transparent);
    border-bottom: 1px solid var(--bs-border-color);
}
.qc-modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--9v-surface-bg, var(--bs-body-bg));
}
.qc-modal-body .dc-json-diff {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: none;
    border-radius: 0;
}
.qc-modal-body .dc-json-diff-body {
    flex: 1 1 auto;
    max-height: none;
    overflow: auto;
}

/* Diff Check results tabs — global so injected static HTML does not rely on inline <style> */
#dc-results-panels > .dc-results-pane,
#dc-results-tab-content > .tab-pane {
    display: none !important;
}
#dc-results-panels > .dc-results-pane.is-active,
#dc-results-tab-content > .tab-pane.active {
    display: block !important;
}

/* Environment Profiles — list table and compact rule rows */
.pm-profiles-table tbody tr.pm-profile-row:hover {
    background-color: var(--bs-table-hover-bg);
}
.pm-profiles-table tbody tr.pm-profile-row:active {
    background-color: var(--bs-table-active-bg);
}
.pm-map-tabs .nav-link {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
}
.pm-rule-row.is-disabled {
    opacity: 0.55;
}
.pm-rule-row-summary .pm-rule-summary-btn {
    color: var(--bs-body-color);
    text-decoration: none;
}
.pm-rule-row-summary .pm-rule-summary-btn:hover {
    text-decoration: underline;
}
.pm-rule-row.is-expanded {
    border-color: var(--bs-primary-border-subtle, var(--bs-primary)) !important;
}
.pm-summary-lines li {
    max-width: 100%;
}
.pm-flags-chip {
    font-size: 0.7rem;
}