/* Vue SPA dark-theme rescue overrides
 *
 * Bootstrap 5 ships utility classes (text-muted, bg-light, text-body,
 * default modal/card/form-control backgrounds) tuned for a light theme.
 * The Vue SPA at /Default/Vue lives inside body.theme-dark, where those
 * defaults render as washed-out gray text on dark panels and near-white
 * popups/inputs that glare against the surrounding UI.
 *
 * Rather than patch ~40 .vue files individually, this file narrows
 * scope to .theme-dark descendants and remaps the Bootstrap defaults
 * to dark-theme-aware values. Per-page scoped styles still win
 * (loaded after this file and scoped via data-v-* with higher
 * specificity).
 *
 * Anything that explicitly opts into a non-default colour
 * (.bg-primary, .text-white, .modal-content + a custom class, ...)
 * is left alone — only the implicit "uses Bootstrap defaults" cases
 * are corrected here. */

.theme-dark {
    /* ── Panel / Card design tokens ────────────────────────────────
     * Promoted from the ad-hoc --vr-* set originally living inside
     * viewer-echo.vue so every viewer / report panel shares the same
     * colour vocabulary. Override these once to retheme the whole app.
     */
    --hs-panel-bg:    #2a2a2a;
    /* Panel chrome (card-header / card-footer) uses #2b3035: it's the
     * shade every viewer was forcing via its own `.col-md-3 .card-header
     * { #2b3035 !important }` scoped override, because the previous
     * #161616 was too dark to read as a distinct band above the panel
     * body. Token-ising it lets us delete those 5 duplicate overrides
     * and keep viewer-pdf consistent with the rest. */
    --hs-panel-head:  #2b3035;
    --hs-panel-foot:  #2b3035;
    --hs-panel-border: #0a0a0a;
    --hs-panel-text:  #e7e7e7;
    --hs-panel-muted: #9a9a9a;

    /* Bootstrap .card uses --bs-card-bg / --bs-card-cap-bg internally.
     * Wire those to the same tokens so .card-header / .card-footer in
     * legacy viewer-pdf / viewer-default etc. pick up the dark surface
     * without each component reaching for `bg-white` overrides. */
    --bs-card-bg:      var(--hs-panel-bg);
    --bs-card-cap-bg:  var(--hs-panel-head);
    --bs-card-color:   var(--hs-panel-text);
    --bs-card-border-color: var(--hs-panel-border);

    /* The :not(.bg-white) opt-out lets viewer-ecg / viewer-stress keep
     * their intentional "ECG paper" white surface — a viewer that
     * really wants a white card-header/footer just keeps the bg-white
     * utility. Everywhere else picks up the dark panel surface. */
    .card > .card-header:not(.bg-white):not(.bg-light),
    .card > .card-footer:not(.bg-white):not(.bg-light) {
        background-color: var(--hs-panel-head);
        color: var(--hs-panel-text);
        border-color: var(--hs-panel-border);
    }

    /* ── Viewer card height ────────────────────────────────────────
     * Canonical pattern (matches viewer-ecg, ting-approved): each
     * viewer .card pins its own height so the card chrome fills the
     * viewport. Bumped +10px (was -82) per ting feedback that the
     * card felt short — ptinfo height was smaller than assumed.
     * Tweak here, not in 8 scoped blocks. */
    .h-100vh,
    .h-fit-windows {
        height: calc(100vh - 67px);
    }

    /* Viewer-page navbar gap is moved out of this nested block — see the
     * standalone `body.theme-dark > #app > .container-fluid` rule below.
     * (Using `body > #app …` inside the `.theme-dark` nesting yields the
     * wrong selector because the parent ampersand has to be an ancestor
     * of body, not body itself.) */

    /* Tell the user-agent to render native form widgets (the <select>
     * popup, <input type=date> calendar, scrollbars, autofill chips)
     * with the dark colour scheme. Without this the native <select>
     * dropdown popup keeps its white background even though the
     * trigger itself is styled dark, which leaves option text
     * unreadable on Windows. */
    color-scheme: dark;

    /* Explicit <option> styling as a fallback for browsers that don't
     * honour color-scheme on the popup (e.g. older Edge/Chrome on
     * Windows). The background may still be overridden by the OS in
     * some cases, but the text colour at least stays readable. */
    select option {
        background-color: #2b3035;
        color: #e9ecef;
    }
    select option:checked {
        background-color: #0d6efd;
        color: #fff;
    }

    /* ── Text utilities ───────────────────────────────────────────── */

    /* #6c757d on #1a1a1a is ~3:1 — fails WCAG AA for small text. */
    .text-muted,
    .text-secondary {
        color: #adb5bd !important;
    }

    .text-body {
        color: #e9ecef;
    }

    /* text-dark forces #212529; invisible on a dark surface. */
    .text-dark {
        color: #e9ecef !important;
    }

    /* ── Backgrounds ─────────────────────────────────────────────── */

    .bg-light {
        background-color: rgba(255, 255, 255, 0.05) !important;
        color: #e9ecef;
    }

    .bg-white {
        background-color: #2b3035 !important;
        color: #e9ecef;
    }

    /* ── Modals ──────────────────────────────────────────────────── */

    .modal-content {
        background-color: #2b3035;
        color: #e9ecef;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .modal-header {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .modal-footer {
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    /* btn-close ships as a black SVG; invert it so it shows on dark. */
    .modal-content .btn-close:not(.btn-close-white) {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    /* ── Cards ───────────────────────────────────────────────────── */

    /* Skip cards that already opted into a bg-* utility (e.g. bg-dark,
     * bg-primary) — those are intentional. */
    .card:not([class*="bg-"]) {
        background-color: rgba(255, 255, 255, 0.03);
        color: #e9ecef;
        border-color: rgba(255, 255, 255, 0.1);
    }

    .card-header {
        background-color: rgba(255, 255, 255, 0.04);
        border-bottom-color: rgba(255, 255, 255, 0.1);
        color: #fff;
    }

    .card-footer {
        /* Match .card-header (0.04) so a card's header and footer chrome are
         * the same shade. */
        background-color: rgba(255, 255, 255, 0.04);
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    /* ── Form controls ─────────────────────────────────────────────
     * Design tokens (kept inline so legacy aspx pages don't need a
     * separate CSS file). All form fields share the same surface +
     * border so users see one consistent control style; focus uses a
     * stronger primary ring + brighter surface so the active field is
     * unambiguous (was alpha 0.06 -> 0.08 which is invisible).
     */

    /* Solid input surface (was rgba(255,255,255,0.06) which only shifted
     * #2a2a2a panel by ~5px lightness — too subtle to read as "input
     * field" against the panel, and ting flagged it as "color not
     * changed" vs the old #dadfe3. #141414 is the same depressed-surface
     * shade report-main used before the refactor: clearly darker than
     * the panel, clearly inverted from #fff, unambiguously an input. */
    --hs-input-surface: #141414;
    --hs-input-surface-focus: #1c1c1c;
    --hs-input-surface-disabled: #1a1a1a;
    --hs-input-border: rgba(255, 255, 255, 0.18);
    --hs-input-border-focus: #0d6efd;
    --hs-input-ring-focus: 0 0 0 0.2rem rgba(13, 110, 253, 0.35);
    --hs-input-text: #e9ecef;
    --hs-input-text-disabled: rgba(255, 255, 255, 0.5);
    --hs-input-placeholder: rgba(255, 255, 255, 0.4);

    /* Form-control rules are intentionally moved OUT of this nested
     * block — see the standalone `body.theme-dark .form-control …`
     * declaration below the closing `}` of .theme-dark.
     *
     * Why standalone (and prefixed with `body.theme-dark` not just
     * `.theme-dark`):
     *   - body.theme-dark .form-control specificity = 0,2,1
     *   - .theme-dark   .form-control specificity = 0,2,0  (Bootstrap5
     *      / vueapp / any other stylesheet's tied attempt)
     *   - .form-control                  specificity = 0,1,0  (raw Bootstrap)
     * The extra body element guarantees the theme always wins regardless
     * of stylesheet load order (vueapp.min.css already had a competing
     * `.theme-dark .form-control { #dadfe3 }` rule that tied us in the
     * cascade and left inputs near-white — fixed by deleting that rule,
     * but the body prefix is the belt-and-braces version so it doesn't
     * regress if another file resurrects an equal-specificity rule.) */

    /* Native date / time pickers honour color-scheme: dark on the body
     * already, but be explicit at the element level too so the calendar
     * popup + spin buttons stay dark even under nested light containers
     * (e.g. modals that override color-scheme). */
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="month"] {
        color-scheme: dark;
    }

    .form-label,
    .form-check-label,
    .col-form-label {
        color: #e9ecef;
    }

    /* (Removed: the 40px tab-content margin pushed the Report panel's
     * Report/Info pane down 40px too, because the rule was global. If a
     * specific tab strip needs breathing room, add it scoped in that
     * component, not here.) */

    .form-text {
        color: #adb5bd;
    }

    /* ── List groups ─────────────────────────────────────────────── */

    .list-group-item {
        background-color: rgba(255, 255, 255, 0.03);
        border-color: rgba(255, 255, 255, 0.08);
        color: #e9ecef;
    }

    .list-group-item-action:hover,
    .list-group-item-action:focus {
        background-color: rgba(255, 255, 255, 0.07);
        color: #fff;
    }

    .list-group-item.active {
        background-color: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
    }

    /* ── Tables ──────────────────────────────────────────────────── */

    /* Skip tables that already opt into table-dark / table-* variants. */
    .table:not(.table-dark):not([class*="table-light"]) {
        --bs-table-color: #e9ecef;
        --bs-table-bg: transparent;
        --bs-table-border-color: rgba(255, 255, 255, 0.1);
        --bs-table-striped-color: #e9ecef;
        --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
        --bs-table-hover-color: #fff;
        --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
        color: var(--bs-table-color);
    }

    /* ── Alerts ──────────────────────────────────────────────────── */

    .alert-info {
        background-color: rgba(13, 202, 240, 0.12);
        border-color: rgba(13, 202, 240, 0.35);
        color: #9eeaff;
    }

    .alert-secondary {
        background-color: rgba(108, 117, 125, 0.15);
        border-color: rgba(108, 117, 125, 0.35);
        color: #d1d5db;
    }

    .alert-warning {
        background-color: rgba(255, 193, 7, 0.12);
        border-color: rgba(255, 193, 7, 0.35);
        color: #ffd166;
    }

    .alert-success {
        background-color: rgba(25, 135, 84, 0.12);
        border-color: rgba(25, 135, 84, 0.4);
        color: #86efac;
    }

    .alert-danger {
        background-color: rgba(220, 53, 69, 0.12);
        border-color: rgba(220, 53, 69, 0.35);
        color: #fda4af;
    }

    /* ── Buttons ─────────────────────────────────────────────────── */

    /* btn-light shows up across the SPA as a neutral fallback. The
     * default white isn't readable next to dark headers / against
     * coloured siblings. */
    .btn-light {
        background-color: #495057;
        border-color: #495057;
        color: #e9ecef;
    }
    .btn-light:hover,
    .btn-light:focus {
        background-color: #5c636a;
        border-color: #565e64;
        color: #fff;
    }

    .btn-outline-secondary {
        color: #e9ecef;
        border-color: rgba(255, 255, 255, 0.25);
    }
    .btn-outline-secondary:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.4);
    }

    /* ── Dropdown menus ──────────────────────────────────────────── */

    /* Leave .dropdown-menu-dark alone (already styled). */
    .dropdown-menu:not(.dropdown-menu-dark) {
        background-color: #2b3035;
        border-color: rgba(255, 255, 255, 0.1);
        color: #e9ecef;
    }

    .dropdown-menu:not(.dropdown-menu-dark) .dropdown-item {
        color: #e9ecef;
    }

    .dropdown-menu:not(.dropdown-menu-dark) .dropdown-item:hover,
    .dropdown-menu:not(.dropdown-menu-dark) .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    .dropdown-menu:not(.dropdown-menu-dark) .dropdown-divider {
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    /* ── Misc ────────────────────────────────────────────────────── */

    /* Page-level <hr> defaults to near-invisible 0.25 alpha; nudge up. */
    hr {
        border-color: rgba(255, 255, 255, 0.15);
    }

    /* close (X) buttons that aren't inside a modal-header still
     * default to black; only target plain ones, not btn-close-white. */
    .btn-close:not(.btn-close-white) {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
}

/* ── Viewer card layout ──────────────────────────────────────────────
 * Standalone (not nested under .theme-dark) so the parent ampersand
 * doesn't break the selector.
 *
 * Pattern matches viewer-ecg (ting-approved):
 *   body.theme-dark
 *     #app
 *       <nav class="navbar fixed-top">                    <-- skip
 *       <ptinfo>…</ptinfo>                                <-- touches navbar
 *       <div class="container-fluid">                     <-- 10px gap above
 *         <div class="row"><.card.h-100vh /></div>        <-- calc(100vh-86)
 *
 * The patient info bar (.ptinfo) sits flush against the fixed navbar
 * (no body padding-top — ting confirmed that band reads as wasted
 * real estate). Then container-fluid takes a 10px top margin, putting
 * the card row 10px below ptinfo. Card height reserves another 10px at
 * the bottom (calc(100vh - 86) instead of -76).
 *
 * :has(.ptinfo) scopes this to viewer pages only; setting/inventory/
 * dashboard pages don't render <ptinfo>, so their container-fluid is
 * untouched. Direct-child `#app >` skips navbar's nested
 * `<div class="container-fluid">`. */
/* ── Form-control surface (standalone, body-prefixed) ───────────────
 * The body-prefix gives this rule specificity 0,2,1 so any tied
 * `.theme-dark .form-control` from another stylesheet (Bootstrap,
 * vueapp, legacy theme files) can't beat it via cascade order. */
body.theme-dark .form-control,
body.theme-dark .form-select,
body.theme-dark .input-group-text,
body.theme-dark input[type="text"],
body.theme-dark input[type="number"],
body.theme-dark input[type="search"],
body.theme-dark input[type="tel"],
body.theme-dark input[type="url"],
body.theme-dark input[type="email"],
body.theme-dark input[type="password"],
body.theme-dark input[type="date"],
body.theme-dark input[type="datetime-local"],
body.theme-dark input[type="time"],
body.theme-dark input[type="month"],
body.theme-dark select,
body.theme-dark textarea {
    background-color: var(--hs-input-surface);
    border: 1px solid var(--hs-input-border);
    color: var(--hs-input-text);
}

body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus,
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus {
    background-color: var(--hs-input-surface-focus);
    color: #fff;
    border-color: var(--hs-input-border-focus);
    box-shadow: var(--hs-input-ring-focus);
    outline: none;
}

body.theme-dark .form-control::placeholder,
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: var(--hs-input-placeholder);
}

body.theme-dark .form-control:disabled,
body.theme-dark .form-control[readonly],
body.theme-dark .form-select:disabled,
body.theme-dark input:disabled,
body.theme-dark select:disabled,
body.theme-dark textarea:disabled {
    background-color: var(--hs-input-surface-disabled);
    color: var(--hs-input-text-disabled);
}

body.theme-dark:has(> #app > .ptinfo) > #app > .container-fluid {
    /* Use padding-top, NOT margin-top. ting flagged a screenshot
     * where margin-top:10 was applied (DevTools highlighted) but
     * no gap showed: that's CSS margin-collapsing through
     * #app/ptinfo's zero margins into body's 56px navbar
     * clearance. Padding doesn't collapse, so it lands reliably
     * between ptinfo and the card row.
     *
     * 6px matches the bottom reservation in the .h-100vh calc
     * (also 6px) so the card has symmetric top/bottom gaps. */
    padding-top: 6px;
}