/*
  Brand theme — Sunset Point Software design language.

  One centralized override layer, loaded LAST (after dashmix, app.css, and the
  Syncfusion theme) so it wins the cascade with no per-component edits. Values
  are defined once as :root tokens and re-mapped onto Bootstrap/Dashmix/
  Syncfusion hooks — edit the tokens below to re-skin the whole app.

  Palette: navy #1A4969 (dominant: sidebar, buttons, links, headings);
           orange #F37121 (ACCENT ONLY, never a button fill); semantic family
           success #2F8C5F, danger #C0392B, warning #E0A12E, info #3C8DCE.
  Type:    Roboto (body 400, headings 700), system-ui fallback.

  Invariants: all action buttons are navy (Delete = pomegranate); orange is
  punctuation, never a button fill.

  Do NOT theme: app.css status colors (.status-*, .qb-*) encode data state, not
  brand; vendor CSS is overridden via the cascade, never edited; IDs, selectors,
  and test hooks are untouched.
*/

/* Self-hosted Roboto — mirrors the existing Inter @font-face setup; no external
   font CDN. Weights 400/500/700 match what the app actually uses. */
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local(""),url(../fonts/roboto/roboto-v51-latin-regular.woff2) format("woff2")}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:local(""),url(../fonts/roboto/roboto-v51-latin-500.woff2) format("woff2")}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:local(""),url(../fonts/roboto/roboto-v51-latin-700.woff2) format("woff2")}

:root {
    /* ---- Brand palette ---- */
    --brand-navy: #1A4969;
    --brand-navy-dark: #143a54;
    --brand-navy-darker: #0e2a3d;
    --brand-navy-slate: #53778F;
    --brand-navy-mist: #8DA4B4;
    --brand-blue-royal: #003A96;
    --brand-navy-deep: #001D4B;

    --brand-accent: #F37121;
    --brand-accent-dark: #d85f17;
    --brand-accent-darker: #ED5829;

    --brand-tint: #E5F0FE;
    --brand-tint-2: #C8E0FE;
    --brand-border: #C6D2DA;
    --brand-surface: #ffffff;
    --brand-bg: #f6f8fb;
    --brand-text: #393636;
    --brand-text-muted: #727272;

    --brand-navy-rgb: 26, 73, 105;
    --brand-accent-rgb: 243, 113, 33;

    --brand-shadow-sm: 0 1px 2px rgba(16, 42, 67, .05), 0 1px 3px rgba(16, 42, 67, .06);
    --brand-shadow-md: 0 2px 6px rgba(16, 42, 67, .06), 0 8px 24px rgba(16, 42, 67, .07);

    /* ---- Re-map Bootstrap / Dashmix tokens onto the brand ---- */
    --bs-primary: var(--brand-navy);
    --bs-primary-rgb: var(--brand-navy-rgb);
    --bs-primary-text-emphasis: var(--brand-navy-darker);
    --bs-primary-bg-subtle: var(--brand-tint);
    --bs-primary-border-subtle: var(--brand-border);

    --bs-link-color: var(--brand-navy);
    --bs-link-color-rgb: var(--brand-navy-rgb);
    --bs-link-hover-color: var(--brand-accent-dark);
    --bs-link-hover-color-rgb: 216, 95, 23;

    --bs-body-color: var(--brand-text);
    --bs-body-color-rgb: 57, 54, 54;
    --bs-emphasis-color: var(--brand-navy);
    --bs-border-color: var(--brand-border);

    --bs-body-font-family: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ============================ Typography ============================ */
body {
    font-family: var(--bs-body-font-family);
    color: var(--brand-text);
    background-color: var(--brand-bg);
    letter-spacing: .002em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bs-body-font-family);
    font-weight: 700;
    color: var(--brand-navy);
    letter-spacing: -.01em;
    line-height: 1.25;
}

/* Dashmix hard-codes Inter on form controls and tooltips (they opt out of the
   body font). Point them at the brand stack so the whole UI renders Roboto and
   Inter is no longer referenced by any rendered element. */
.form-control,
.form-select,
.tooltip {
    font-family: var(--bs-body-font-family);
}

.content-heading {
    color: var(--brand-navy);
    border-bottom-color: var(--brand-border);
}

::selection {
    background: rgba(var(--brand-navy-rgb), .16);
}

/* ============================ Links ============================ */
/* Most links resolve through --bs-link-color above. These cover the
   Dashmix utility classes that hard-code blue with !important. */
.text-primary,
a.text-primary {
    color: var(--brand-navy) !important;
}

    .text-primary:hover,
    a.text-primary:hover {
        color: var(--brand-navy-darker) !important;
    }

.text-primary-dark {
    color: var(--brand-navy-dark) !important;
}

.text-primary-darker {
    color: var(--brand-navy-darker) !important;
}

.text-primary-light {
    color: var(--brand-navy-slate) !important;
}

.text-primary-lighter {
    color: var(--brand-navy-mist) !important;
}

/* ============================ Backgrounds ============================ */
.bg-primary {
    background-color: var(--brand-navy) !important;
}

.bg-primary-dark {
    background-color: var(--brand-navy-dark) !important;
}

.bg-primary-darker {
    background-color: var(--brand-navy-darker) !important;
}

.bg-primary-light {
    background-color: var(--brand-navy-slate) !important;
}

.bg-primary-op {
    background-color: rgba(var(--brand-navy-rgb), .75) !important;
}

.bg-primary-dark-op {
    background-color: rgba(var(--brand-navy-rgb), .82) !important;
}

    .bg-primary-dark-op:focus,
    a.bg-primary-dark-op:hover,
    button.bg-primary-dark-op:focus,
    button.bg-primary-dark-op:hover {
        background-color: rgba(14, 42, 61, .85) !important;
    }

.border-primary {
    border-color: var(--brand-navy) !important;
}

/* ============================ Buttons ============================ */
/* All action buttons use the brand navy — one consistent style. Orange is an
   accent only (page-title bar, active nav, logo, progress), never a button fill.
   Keeps Dashmix's button geometry (uppercase, bold, radius, soft shadow). */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-navy);
    --bs-btn-border-color: var(--brand-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-navy-dark);
    --bs-btn-hover-border-color: var(--brand-navy-darker);
    --bs-btn-focus-shadow-rgb: var(--brand-navy-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-navy-dark);
    --bs-btn-active-border-color: var(--brand-navy-darker);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-navy);
    --bs-btn-disabled-border-color: var(--brand-navy);
    box-shadow: 0 .125rem .75rem rgba(var(--brand-navy-rgb), .25);
}

.btn-hero.btn-primary {
    box-shadow: 0 .125rem .75rem rgba(var(--brand-navy-rgb), .25);
}

.btn-alt-primary {
    --bs-btn-color: var(--brand-navy-dark);
    --bs-btn-bg: #d6e2ec;
    --bs-btn-border-color: #d6e2ec;
    --bs-btn-hover-color: var(--brand-navy-darker);
    --bs-btn-hover-bg: #bcd0de;
    --bs-btn-hover-border-color: #bcd0de;
    --bs-btn-focus-shadow-rgb: var(--brand-navy-rgb);
    --bs-btn-active-color: var(--brand-navy-darker);
    --bs-btn-active-bg: #cadcea;
    --bs-btn-active-border-color: #cadcea;
    --bs-btn-disabled-color: var(--brand-navy-dark);
    --bs-btn-disabled-bg: #d6e2ec;
    --bs-btn-disabled-border-color: #d6e2ec;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-navy);
    --bs-btn-border-color: var(--brand-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-navy);
    --bs-btn-hover-border-color: var(--brand-navy);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-navy);
    --bs-btn-active-border-color: var(--brand-navy);
    --bs-btn-focus-shadow-rgb: var(--brand-navy-rgb);
}

/* (No orange button style — orange is reserved for accents, never button fills.) */

/* ============================ Cards / panels ============================ */
/* .block is Dashmix's card. Exclude the transparent variant used by the
   login hero so it stays see-through. */
.block:not(.block-transparent):not(.block-themed) {
    background-color: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: .5rem;
    box-shadow: var(--brand-shadow-sm);
}

.block.block-themed > .block-header {
    background-color: var(--brand-navy);
}

.block-rounded {
    border-radius: .5rem;
}

.bg-body-light {
    background-color: var(--brand-bg) !important;
}

.bg-body-extra-light {
    background-color: var(--brand-surface) !important;
}

/* ============================ Sidebar (dark → navy) ============================ */
#page-container.sidebar-dark #sidebar,
.sidebar-dark #sidebar {
    background-color: var(--brand-navy);
    color: rgba(255, 255, 255, .82);
}

.bg-header-dark {
    background-color: var(--brand-navy-dark) !important;
}

/* STG logo lockup (expanded sidebar) — a wide horizontal graphic, white-on-navy:
   the STG wordmark + an orange divider bar + the "System Transition / Governance"
   tagline (Governance in orange). */
.site-logo {
    line-height: 1;
}

.site-logo-full {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.slg-mark {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
}

.slg-tag {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: .5rem;
    border-left: 2px solid var(--brand-accent);
    text-align: left;
    line-height: 1.15;
}

.slg-tag-1 {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
}

.slg-tag-2 {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--brand-accent);
    white-space: nowrap;
}

/* Mini (collapsed) sidebar — compact "STG". */
.site-logo-mini {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
}

/* Sidebar-header buttons (mini-toggle + mobile close) — clean transparent icon
   buttons on the navy header: light glyph, no resting box, subtle hover.
   Must match Dashmix's full (1,3,0) selector to beat its blue default. */
#sidebar .bg-header-dark .content-header .btn-alt-secondary {
    --bs-btn-color: rgba(255, 255, 255, .7);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, .15);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, .22);
    --bs-btn-active-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
    box-shadow: none;
}

#sidebar .nav-main-heading {
    color: rgba(255, 255, 255, .5);
}

#sidebar .nav-main-link {
    color: rgba(255, 255, 255, .78);
}

    #sidebar .nav-main-link:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, .07);
    }

    #sidebar .nav-main-link.active {
        color: #fff;
        background-color: rgba(var(--brand-accent-rgb), .15);
        box-shadow: inset 3px 0 0 var(--brand-accent);
    }

        #sidebar .nav-main-link.active .nav-main-link-icon {
            color: var(--brand-accent);
        }

/* ============================ Header ============================ */
/* Top-bar action buttons (toggle, project, user) use the app's standard
   icon-on-chrome treatment: white glyphs on a navy fill — matching the sidebar
   and primary buttons. The navy background is set alongside the icon color so
   the white glyph keeps contrast. */
#page-header .btn-alt-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-navy);
    --bs-btn-border-color: var(--brand-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-navy-dark);
    --bs-btn-hover-border-color: var(--brand-navy-darker);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-navy-darker);
    --bs-btn-active-border-color: var(--brand-navy-darker);
    --bs-btn-focus-shadow-rgb: var(--brand-navy-rgb);
}

/* Hide the header hamburger while the sidebar is expanded (desktop) — it only
   needs to show when the sidebar is collapsed, to bring it back. Keyed off
   Dashmix's `sidebar-o` state class; visibility only, no logic. */
@media (min-width: 992px) {
    #page-container.sidebar-o #page-header [data-action="sidebar_toggle"] {
        display: none;
    }
}

/* Focus box only for keyboard navigation (Tab) — not after a mouse click. Removes
   the lingering "selected" outline around a clicked project dropdown / nav item /
   button, while preserving keyboard focus rings for accessibility. */
#page-header .btn:focus:not(:focus-visible),
.dropdown .btn:focus:not(:focus-visible),
.dropdown-item:focus:not(:focus-visible),
.e-btn:focus:not(:focus-visible),
.e-dropdown-btn:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
}

/* Nav links: drop only the focus outline box (keep the active orange bar). */
#sidebar .nav-main-link:focus:not(:focus-visible) {
    outline: 0;
}

/* <FocusOnNavigate Selector="h1"> focuses the page <h1> after navigation (a11y).
   Hide the resulting outline for mouse/navigation focus; keep it for keyboard. */
h1:focus:not(:focus-visible) {
    outline: 0;
}

/* ============================ Dropdowns ============================ */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--brand-navy);
    color: #fff;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--brand-tint);
    color: var(--brand-navy-darker);
}

.dropdown-item.active:hover,
.dropdown-item.active:focus {
    background-color: var(--brand-navy);
    color: #fff;
}

/* ============================ Forms ============================ */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-navy-mist);
    box-shadow: 0 0 0 .25rem rgba(var(--brand-navy-rgb), .18);
}

.form-check-input:checked {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}

.form-check-input:focus {
    border-color: var(--brand-navy-mist);
    box-shadow: 0 0 0 .25rem rgba(var(--brand-navy-rgb), .18);
}

.form-switch .form-check-input:checked {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--brand-navy);
}

.form-range::-moz-range-thumb {
    background-color: var(--brand-navy);
}

/* ============================ Misc Bootstrap surfaces ============================ */
.page-link {
    color: var(--brand-navy);
}

.page-item.active .page-link {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--brand-navy);
}

.list-group-item.active {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}

.alert-primary {
    --bs-alert-color: var(--brand-navy-darker);
    --bs-alert-bg: var(--brand-tint);
    --bs-alert-border-color: var(--brand-border);
}

.progress-bar {
    background-color: var(--brand-accent);
}

a.link-fx::before {
    background-color: var(--brand-accent);
}

/* Subtle orange accent on card headers — a thin left bar that echoes the
   active-nav indicator, adding brand orange at the panel level. */
.block-header.block-header-default {
    box-shadow: inset 3px 0 0 var(--brand-accent);
}

/* ============================ Semantic palette (harmonized) ============================ */
/* One coordinated semantic family so navy, orange and the status colors read as a
   single set instead of three unrelated reds + assorted Material greens/blues.
   Danger = deep pomegranate: clearly destructive, distinct from the orange CTA,
   but warm-coordinated with it and pairing cleanly with the navy. */
:root {
    --brand-success: #2F8C5F;
    --brand-success-dark: #25734C;
    --brand-danger: #C0392B;
    --brand-danger-dark: #A33124;
    --brand-warning: #E0A12E;
    --brand-warning-dark: #C2861C;
    --brand-info: #3C8DCE;
    --brand-info-dark: #2F72A8;
    --brand-teal: #2E9E8F;
    --brand-slate: #64748B;

    --bs-success: var(--brand-success);
    --bs-success-rgb: 47, 140, 95;
    --bs-danger: var(--brand-danger);
    --bs-danger-rgb: 192, 57, 43;
    --bs-warning: var(--brand-warning);
    --bs-warning-rgb: 224, 161, 46;
    --bs-info: var(--brand-info);
    --bs-info-rgb: 60, 141, 206;
}

/* Bootstrap/Dashmix semantic utilities (baked as literals with !important). */
.bg-danger { background-color: var(--brand-danger) !important; }
.text-danger, a.text-danger { color: var(--brand-danger) !important; }
.bg-success { background-color: var(--brand-success) !important; }
.text-success, a.text-success { color: var(--brand-success) !important; }
.bg-info { background-color: var(--brand-info) !important; }
.text-info, a.text-info { color: var(--brand-info) !important; }
.bg-warning { background-color: var(--brand-warning) !important; }
.text-warning, a.text-warning { color: var(--brand-warning) !important; }

/* Bootstrap semantic buttons (baked colors). */
.btn-danger {
    --bs-btn-bg: var(--brand-danger);
    --bs-btn-border-color: var(--brand-danger);
    --bs-btn-hover-bg: var(--brand-danger-dark);
    --bs-btn-hover-border-color: var(--brand-danger-dark);
    --bs-btn-active-bg: var(--brand-danger-dark);
    --bs-btn-active-border-color: var(--brand-danger-dark);
    --bs-btn-disabled-bg: var(--brand-danger);
    --bs-btn-disabled-border-color: var(--brand-danger);
    --bs-btn-focus-shadow-rgb: 192, 57, 43;
}

.btn-hero.btn-danger {
    box-shadow: 0 .125rem .75rem rgba(192, 57, 43, .25);
}

.btn-success {
    --bs-btn-bg: var(--brand-success);
    --bs-btn-border-color: var(--brand-success);
    --bs-btn-hover-bg: var(--brand-success-dark);
    --bs-btn-hover-border-color: var(--brand-success-dark);
    --bs-btn-active-bg: var(--brand-success-dark);
    --bs-btn-active-border-color: var(--brand-success-dark);
    --bs-btn-focus-shadow-rgb: 47, 140, 95;
}

/* Syncfusion semantic buttons — re-tinted to the same family (Delete = pomegranate). */
.e-btn.e-danger,
.e-css.e-btn.e-danger {
    background-color: var(--brand-danger);
    border-color: var(--brand-danger);
}

    .e-btn.e-danger:hover,
    .e-btn.e-danger:focus,
    .e-btn.e-danger:active,
    .e-css.e-btn.e-danger:hover {
        background-color: var(--brand-danger-dark);
        border-color: var(--brand-danger-dark);
    }

.e-btn.e-success,
.e-css.e-btn.e-success {
    background-color: var(--brand-success);
    border-color: var(--brand-success);
}

    .e-btn.e-success:hover,
    .e-btn.e-success:focus,
    .e-btn.e-success:active {
        background-color: var(--brand-success-dark);
        border-color: var(--brand-success-dark);
    }

.e-btn.e-warning,
.e-css.e-btn.e-warning {
    background-color: var(--brand-warning);
    border-color: var(--brand-warning);
}

    .e-btn.e-warning:hover,
    .e-btn.e-warning:focus {
        background-color: var(--brand-warning-dark);
        border-color: var(--brand-warning-dark);
    }

/* App status colors (app.css) re-tuned to the harmonized family — "review" moved
   off orange (now amber) so it never competes with the orange CTA, and "cancelled"
   moved off purple (now slate). */
.status-completed { color: #246B49; }
.status-processing { color: #1F5C94; }
.status-queued { color: #3E4A55; }
.status-uploading { color: #1C5E55; }
.status-review { color: #8A6212; }
.status-cancelled { color: #3E4A55; }

.status-badge.status-completed { background-color: #E4F0EA; border-color: var(--brand-success); color: #246B49; }
.status-badge.status-completed:hover { background-color: #D3E7DC; }
.status-badge.status-processing { background-color: #E5F0FA; border-color: var(--brand-info); color: #1F5C94; }
.status-badge.status-processing:hover { background-color: #D4E6F6; }
.status-badge.status-queued { background-color: #EEF1F4; border-color: var(--brand-slate); color: #3E4A55; }
.status-badge.status-queued:hover { background-color: #E2E7EC; }
.status-badge.status-uploading { background-color: #E2F0EE; border-color: var(--brand-teal); color: #1C5E55; }
.status-badge.status-uploading:hover { background-color: #D2E8E4; }
.status-badge.status-review { background-color: #FBF1DD; border-color: var(--brand-warning); color: #8A6212; }
.status-badge.status-review:hover { background-color: #F6E7C8; }
.status-badge.status-cancelled { background-color: #ECEFF2; border-color: var(--brand-slate); color: #3E4A55; }
.status-badge.status-cancelled:hover { background-color: #E0E5EA; }

/* ============================ Syncfusion accents ============================ */
/* Re-point the Syncfusion bootstrap4 accent (Bootstrap blue) to brand navy
   where it shows as chrome: focus rings, primary buttons, selection, checks. */
.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--brand-navy-mist);
    box-shadow: 0 0 0 3px rgba(var(--brand-navy-rgb), .2);
}

/* Primary Syncfusion buttons — toolbar actions, dialog Save/Create, dropdown
   buttons (e.g. "Go To Layout"), and row Edit — all use the brand navy, so every
   action button (incl. SfDropDownButton) shares one consistent style. */
.e-btn.e-primary,
.e-css.e-btn.e-primary,
.e-dropdown-btn.e-primary,
.e-split-btn.e-primary {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
}

    .e-btn.e-primary:hover,
    .e-btn.e-primary:focus,
    .e-btn.e-primary:active,
    .e-css.e-btn.e-primary:hover,
    .e-dropdown-btn.e-primary:hover,
    .e-dropdown-btn.e-primary:focus {
        background-color: var(--brand-navy-dark);
        border-color: var(--brand-navy-darker);
    }

/* Flat & outline Syncfusion buttons render *filled* in this theme (Bootstrap
   blue/red) — re-tint to brand. Covers the flat Edit (blue) / Delete (red)
   buttons on SearchConfig and anywhere else they're used. */
.e-btn.e-flat.e-primary, .e-css.e-btn.e-flat.e-primary,
.e-btn.e-outline.e-primary, .e-css.e-btn.e-outline.e-primary {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}

    .e-btn.e-flat.e-primary:hover, .e-btn.e-flat.e-primary:focus, .e-btn.e-flat.e-primary:active,
    .e-css.e-btn.e-flat.e-primary:hover,
    .e-btn.e-outline.e-primary:hover, .e-btn.e-outline.e-primary:focus, .e-btn.e-outline.e-primary:active {
        background-color: var(--brand-navy-dark);
        border-color: var(--brand-navy-darker);
        color: #fff;
    }

.e-btn.e-flat.e-danger, .e-css.e-btn.e-flat.e-danger,
.e-btn.e-outline.e-danger, .e-css.e-btn.e-outline.e-danger {
    background-color: var(--brand-danger);
    border-color: var(--brand-danger);
    color: #fff;
}

    .e-btn.e-flat.e-danger:hover, .e-btn.e-flat.e-danger:focus, .e-btn.e-flat.e-danger:active,
    .e-css.e-btn.e-flat.e-danger:hover,
    .e-btn.e-outline.e-danger:hover, .e-btn.e-outline.e-danger:focus, .e-btn.e-outline.e-danger:active {
        background-color: var(--brand-danger-dark);
        border-color: var(--brand-danger-dark);
        color: #fff;
    }

/* Plain outline buttons (no semantic color) → navy, to fit the palette. */
.e-btn.e-outline, .e-css.e-btn.e-outline {
    color: var(--brand-navy);
    border-color: var(--brand-navy);
}

    .e-btn.e-outline:hover, .e-btn.e-outline:focus, .e-btn.e-outline:active {
        background-color: var(--brand-navy);
        border-color: var(--brand-navy);
        color: #fff;
    }

/* Disabled action buttons → a clean neutral gray (was a washed-out blue/red that
   looked broken when disabled on /snapshots, /jobs, etc.). */
.e-btn:disabled, .e-btn.e-disabled,
.e-btn.e-primary:disabled, .e-btn.e-primary.e-disabled,
.e-btn.e-danger:disabled, .e-btn.e-danger.e-disabled,
.e-css.e-btn.e-primary:disabled, .e-css.e-btn.e-primary.e-disabled,
.e-css.e-btn.e-danger:disabled,
.e-dropdown-btn.e-primary:disabled, .e-dropdown-btn.e-primary.e-disabled {
    background-color: #e9ecef;
    border-color: #e9ecef;
    color: #adb5bd;
    box-shadow: none;
    opacity: 1;
}

.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}

.e-grid td.e-selectionbackground,
.e-grid .e-rowcell.e-selectionbackground,
.e-grid .e-selectionbackground {
    background-color: rgba(var(--brand-navy-rgb), .12) !important;
}

.e-grid .e-gridheader,
.e-grid .e-headercell .e-headertext {
    color: var(--brand-navy);
}

/* Align the in-app filtered-column highlight (was a stray blue) to brand. */
.e-grid .e-filtered {
    background: rgba(var(--brand-navy-rgb), .18);
}

    .e-grid .e-filtered::before {
        color: var(--brand-navy) !important;
    }

/* ============================ Login hero (unauthenticated) ============================ */
/* Layout markup unchanged; the navy overlay comes from .bg-primary-dark-op
   above. Lift the centered card with a slightly larger radius + shadow. */
.hero-static .block-rounded {
    border-radius: .75rem;
    box-shadow: var(--brand-shadow-md);
}