/* ============================================================
   QS Portal – Global Stylesheet
   ============================================================
   HOW TO CUSTOMIZE:
   Edit the CSS variables in :root to change colors site-wide
   without touching any PHP files.
   ============================================================ */

/* ── Google Font import ──────────────────────────────────────────────────────
   Change 'Inter' to any Google Font name you prefer, e.g.:
   'Roboto', 'Lato', 'Nunito', 'Poppins', 'Source Sans 3'             */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Light theme variables ────────────────────────────────────────────────── */
:root {
    /* ── team.blue brand palette ──────────────────────────────────────────────
       --tb-navy  #1C3F6E  "Biscay"       structure, navbar, primary buttons
       --tb-blue  #17ACE3  "Curious Blue" bright accent: active state, dot, focus
       Kept split for accessibility — Curious Blue is too light for white text,
       so it's used for accents/underlines while navy carries buttons + nav.     */
    --tb-navy:             #1C3F6E;
    --tb-navy-dark:        #16324f;
    --tb-navy-line:        #2b527f;   /* hairline on navy surfaces      */
    --tb-blue:             #17ACE3;   /* signature accent               */
    --tb-blue-dark:        #1391c2;
    --tb-blue-soft:        #e3f3fb;   /* light tint: hover/active bg    */

    /* Brand / accent – change these to repaint the whole portal */
    --qa-primary:          #1C3F6E;   /* buttons, links, active         */
    --qa-primary-hover:    #16324f;
    --qa-primary-rgb:      28, 63, 110;

    /* Page backgrounds */
    --qa-bg:               #eef2f7;   /* outer page background         */
    --qa-surface:          #ffffff;   /* cards, modals, tables         */
    --qa-surface-alt:      #f6f9fc;   /* striped table rows            */
    --qa-border:           #dbe4ee;

    /* Text */
    --qa-text:             #17263c;   /* body text                     */
    --qa-text-muted:       #64748b;
    --qa-text-heading:     #1C3F6E;

    /* Navbar */
    --qa-nav-bg:           #1C3F6E;
    --qa-nav-text:         #c7d8ea;

    /* Status colors */
    --qa-success:          #16a34a;
    --qa-warning:          #d97706;
    --qa-danger:           #dc2626;
    --qa-info:             #0891b2;

    /* Score badges */
    --qa-score-high-bg:    #16a34a;
    --qa-score-mid-bg:     #d97706;
    --qa-score-low-bg:     #dc2626;
    --qa-score-text:       #ffffff;
    --qa-score-mid-text:   #ffffff;

    /* Shadows */
    --qa-shadow:           0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --qa-shadow-md:        0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);

    /* Font */
    --qa-font:             'Inter', 'Segoe UI', Arial, sans-serif;
    --qa-font-size-base:   14px;
    --qa-font-size-sm:     12px;
    --qa-line-height:      1.6;
    --qa-radius:           8px;
}

/* ── Base reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family:      var(--qa-font);
    font-size:        var(--qa-font-size-base);
    line-height:      var(--qa-line-height);
    color:            var(--qa-text);
    background-color: var(--qa-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color:       var(--qa-text-heading);
    font-weight: 600;
    line-height: 1.3;
}

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.navbar {
    background-color: var(--qa-nav-bg) !important;
    box-shadow: var(--qa-shadow-md);
    padding: .6rem 1rem;
}
.navbar-brand {
    color: #ffffff !important;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.navbar .nav-link,
.navbar .navbar-text {
    color: var(--qa-nav-text) !important;
    font-size: var(--qa-font-size-base);
}
.navbar .nav-link:hover { color: #ffffff !important; }
.navbar .btn-outline-light {
    border-color: rgba(255,255,255,.3);
    color: var(--qa-nav-text);
    font-size: var(--qa-font-size-sm);
}
.navbar .btn-outline-light:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.5);
    color: #fff;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
    background-color: var(--qa-surface);
    border:           1px solid var(--qa-border);
    border-radius:    var(--qa-radius);
    box-shadow:       var(--qa-shadow);
}
.card-header {
    background-color: var(--qa-surface);
    border-bottom:    1px solid var(--qa-border);
    padding:          .75rem 1rem;
    font-weight:      600;
    font-size:        var(--qa-font-size-base);
    color:            var(--qa-text-heading);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table {
    color:   var(--qa-text);
    font-size: var(--qa-font-size-base);
    --bs-table-bg: transparent;
}
.table thead th {
    background-color: var(--qa-surface-alt);
    color:            var(--qa-text-heading);
    font-weight:      600;
    font-size:        var(--qa-font-size-sm);
    text-transform:   uppercase;
    letter-spacing:   .04em;
    border-bottom:    2px solid var(--qa-border);
    padding:          .6rem .75rem;
}
.table tbody td {
    border-bottom: 1px solid var(--qa-border);
    padding:       .55rem .75rem;
    vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--qa-surface-alt);
    --bs-table-accent-bg: transparent;
}
.table-hover > tbody > tr:hover > * {
    background-color: rgba(var(--qa-primary-rgb), .07);
    --bs-table-accent-bg: transparent;
}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    background-color: var(--qa-surface);
    color:            var(--qa-text);
    border:           1px solid var(--qa-border);
    border-radius:    6px;
    font-size:        var(--qa-font-size-base);
    font-family:      var(--qa-font);
    transition:       border-color .15s, box-shadow .15s;
}
.form-control:focus,
.form-select:focus {
    background-color: var(--qa-surface);
    color:            var(--qa-text);
    border-color:     var(--qa-primary);
    box-shadow:       0 0 0 3px rgba(var(--qa-primary-rgb), .2);
    outline:          none;
}
.form-control::placeholder { color: var(--qa-text-muted); opacity: 1; }
.form-label {
    font-weight: 500;
    font-size:   var(--qa-font-size-sm);
    color:       var(--qa-text-heading);
    margin-bottom: .3rem;
}
textarea.form-control { resize: vertical; min-height: 64px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
    font-family:   var(--qa-font);
    font-weight:   500;
    border-radius: 6px;
    font-size:     var(--qa-font-size-base);
    transition:    background .15s, border-color .15s, box-shadow .15s;
}
.btn-primary {
    background-color: var(--qa-primary);
    border-color:     var(--qa-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--qa-primary-hover);
    border-color:     var(--qa-primary-hover);
}
.btn-sm { font-size: var(--qa-font-size-sm); padding: .3rem .65rem; }

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.nav-tabs {
    border-bottom: 2px solid var(--qa-border);
    gap: 4px;
}
.nav-tabs .nav-link {
    color:         var(--qa-text-muted);
    border:        none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -2px;
    padding:       .5rem .9rem;
    font-weight:   500;
    font-size:     var(--qa-font-size-base);
    transition:    color .15s, border-color .15s;
}
.nav-tabs .nav-link:hover {
    color:        var(--qa-text);
    border-color: var(--qa-border);
    background:   transparent;
}
.nav-tabs .nav-link.active {
    color:            var(--qa-primary);
    border-bottom:    2px solid var(--qa-primary);
    background:       transparent;
    font-weight:      600;
}

/* ── Score badges ─────────────────────────────────────────────────────────── */
.badge-score-high {
    background-color: var(--qa-score-high-bg);
    color:            var(--qa-score-text);
    font-size:        var(--qa-font-size-sm);
    font-weight:      700;
    padding:          .25em .6em;
    border-radius:    20px;
    display:          inline-block;
}
.badge-score-mid {
    background-color: var(--qa-score-mid-bg);
    color:            var(--qa-score-mid-text);
    font-size:        var(--qa-font-size-sm);
    font-weight:      700;
    padding:          .25em .6em;
    border-radius:    20px;
    display:          inline-block;
}
.badge-score-low {
    background-color: var(--qa-score-low-bg);
    color:            var(--qa-score-text);
    font-size:        var(--qa-font-size-sm);
    font-weight:      700;
    padding:          .25em .6em;
    border-radius:    20px;
    display:          inline-block;
}

/* ── Bootstrap badge overrides ────────────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: .02em; }
.bg-warning { color: #1a1a1a !important; } /* keep warning text readable always */

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert { border-radius: var(--qa-radius); font-size: var(--qa-font-size-base); }

/* ── Dropdowns ────────────────────────────────────────────────────────────── */
.dropdown-menu {
    background-color: var(--qa-surface);
    border:           1px solid var(--qa-border);
    border-radius:    var(--qa-radius);
    box-shadow:       var(--qa-shadow-md);
    font-size:        var(--qa-font-size-base);
    padding:          .3rem;
}
.dropdown-item {
    color:         var(--qa-text);
    border-radius: 5px;
    padding:       .4rem .75rem;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(var(--qa-primary-rgb), .1);
    color:            var(--qa-primary);
}
.dropdown-item.active {
    background-color: var(--qa-primary);
    color:            #fff;
}
.dropdown-divider { border-color: var(--qa-border); }

/* ── Modals ───────────────────────────────────────────────────────────────── */
.modal-content {
    background-color: var(--qa-surface);
    border:           1px solid var(--qa-border);
    border-radius:    var(--qa-radius);
    box-shadow:       var(--qa-shadow-md);
    color:            var(--qa-text);
}
.modal-header, .modal-footer { border-color: var(--qa-border); }
.modal-title { font-weight: 600; color: var(--qa-text-heading); }
.btn-close { filter: none; opacity: .6; }

/* ── Text utilities ───────────────────────────────────────────────────────── */
.text-muted  { color: var(--qa-text-muted) !important; }
code         { color: var(--qa-primary); font-size: .9em; }

/* ── KPI cards (stats page) ───────────────────────────────────────────────── */
.kpi-card .display-val {
    font-size:   2.2rem;
    font-weight: 700;
    line-height: 1.1;
}
.kpi-card .kpi-label {
    font-size:  var(--qa-font-size-sm);
    color:      var(--qa-text-muted);
    margin-top: .25rem;
}

/* ── Scrollable table wrapper ─────────────────────────────────────────────── */
.table-responsive { border-radius: 0 0 var(--qa-radius) var(--qa-radius); }

/* ── Sortable columns ─────────────────────────────────────────────────────── */
th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-sort]:hover { color: var(--qa-primary); }
th[data-sort]::after        { content: ' ⇅'; opacity: .35; font-size: .75em; }
th[data-sort].asc::after    { content: ' ↑'; opacity: 1;   color: var(--qa-primary); }
th[data-sort].desc::after   { content: ' ↓'; opacity: 1;   color: var(--qa-primary); }

/* ── Notes preview cell ───────────────────────────────────────────────────── */
.notes-preview {
    max-width:     200px;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    color:         var(--qa-text-muted);
    font-size:     var(--qa-font-size-sm);
}

/* ── Login page ───────────────────────────────────────────────────────────── */
.login-wrap {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1rem;
}
.login-card { width: 100%; max-width: 420px; }
.login-card .card-body { padding: 2rem; }
.login-logo {
    text-align:    center;
    margin-bottom: 1.5rem;
}
.login-logo .icon {
    font-size:        2.5rem;
    color:            var(--qa-primary);
    display:          block;
    margin-bottom:    .5rem;
}
.login-logo h1 { font-size: 1.4rem; margin: 0; }
.login-logo p  { color: var(--qa-text-muted); font-size: var(--qa-font-size-sm); margin: .25rem 0 0; }

/* ============================================================================
   team.blue unified navigation + toolbar  (shared across every staff page)
   ============================================================================ */

/* ── Top navbar ─────────────────────────────────────────────────────────────*/
.tb-navbar {
    background: var(--tb-navy);
    box-shadow: 0 2px 10px rgba(15, 40, 70, .18);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.tb-navbar-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1.25rem;
    min-height: 60px;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.tb-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 1.18rem;
    letter-spacing: -.015em;
    white-space: nowrap;
}
.tb-brand-word { color: #fff; }
.tb-brand-dot {
    display: inline-block;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: var(--tb-blue);
    margin: 0 .16rem;
    vertical-align: -.1em;   /* sit low, near the baseline (like team.blue) */
}
.tb-brand-accent { color: var(--tb-blue); }
.tb-brand-logo { height: 30px; width: auto; display: block; }

/* ── Primary links ──────────────────────────────────────────────────────────*/
.tb-nav-links {
    display: flex;
    align-items: center;
    gap: .1rem;
    flex-wrap: wrap;
    margin-right: auto;
}
.tb-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .72rem;
    border-radius: 7px;
    color: var(--qa-nav-text);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    transition: color .12s ease, background .12s ease, box-shadow .12s ease;
}
.tb-nav-link i { font-size: 1.02rem; }
.tb-nav-link:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.tb-nav-link.is-active {
    color: #fff;
    background: rgba(255, 255, 255, .10);
    box-shadow: inset 0 -2.5px 0 var(--tb-blue);   /* Curious Blue active accent */
}

/* ── User chip + logout ─────────────────────────────────────────────────────*/
.tb-nav-user { display: flex; align-items: center; gap: .6rem; margin-left: auto; }

/* Right-hand nav cluster (Help + user menu) */
.tb-nav-right { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.tb-user-menu {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .7rem;
    border-radius: 7px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
}
.tb-user-menu:hover,
.tb-user-menu.is-active,
.tb-user-menu[aria-expanded="true"] { background: rgba(255, 255, 255, .2); }
.tb-user-menu i.bi-person-circle { font-size: 1.15rem; }
.tb-user-menu .tb-user-name { color: #fff; }
.tb-caret { font-size: .7rem; opacity: .8; }
.tb-user-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #dce8f4;
    font-size: .8rem;
    font-weight: 500;
}
.tb-user-chip i { font-size: 1.15rem; color: #fff; }
.tb-user-name { color: #fff; }
.tb-scope {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    background: rgba(23, 172, 227, .20);
    border: 1px solid rgba(23, 172, 227, .45);
    color: #eaf7fe;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.tb-logout {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .72rem;
    border-radius: 7px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 600;
}
.tb-logout:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* ── Impersonation banner ───────────────────────────────────────────────────*/
.tb-impersonate {
    background: #fff4d6;
    border-bottom: 1px solid #f0d999;
    color: #7a5b12;
    padding: .5rem 1.25rem;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.tb-impersonate-back {
    color: #7a3b12;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #d9ad5a;
    padding: .18rem .6rem;
    border-radius: 6px;
    background: #fff;
    white-space: nowrap;
}
.tb-impersonate-back:hover { background: #fbeecb; color: #5c2d0d; }

/* Breathing room between the sticky navbar (or impersonation banner) and the
   first page-content block, so content isn't glued to the navigation. */
.tb-navbar + .container-fluid.px-4,
.tb-impersonate + .container-fluid.px-4 {
    margin-top: 1.5rem;
}

/* ── Filter toolbar (sits below the navbar, replaces in-nav filters) ─────────*/
.toolbar {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    background: var(--qa-surface);
    border: 1px solid var(--qa-border);
    border-radius: var(--qa-radius);
    padding: .55rem .8rem;
    box-shadow: var(--qa-shadow);
    margin-bottom: 1rem;
}
.toolbar-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--qa-text-muted);
    margin-right: .1rem;
}
.toolbar .form-select,
.toolbar .form-control { width: auto; min-width: 130px; }
.toolbar .form-control[type="date"] { min-width: 150px; }
.toolbar-spacer { margin-left: auto; }

/* ── Brand cohesion: keep Bootstrap primaries on-brand ──────────────────────*/
.bg-primary { background-color: var(--tb-navy) !important; }
.btn-outline-primary { color: var(--tb-navy); border-color: var(--tb-navy); }
.btn-outline-primary:hover { background: var(--tb-navy); border-color: var(--tb-navy); color: #fff; }
.nav-tabs .nav-link.active { box-shadow: inset 0 -2.5px 0 var(--tb-blue); }
a { color: var(--tb-navy); }
a:hover { color: var(--tb-blue-dark); }

/* ── Accessible focus ring (Curious Blue) ───────────────────────────────────*/
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.tb-nav-link:focus-visible,
.tb-logout:focus-visible,
.tb-impersonate-back:focus-visible {
    outline: 2px solid var(--tb-blue);
    outline-offset: 2px;
}

/* ── Responsive: icons-only nav on narrow screens ───────────────────────────*/
@media (max-width: 760px) {
    .tb-nav-link span { display: none; }
    .tb-nav-link { padding: .5rem .55rem; }
    .tb-user-name { display: none; }
    .tb-navbar-inner { gap: .75rem; padding: 0 .85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tb-nav-link { transition: none; }
}

/* ============================================================================
   MIDNIGHT — dark gradient theme (opt-in via Admin → Appearance)
   Layered on top of Bootstrap's native dark mode (data-bs-theme="dark"),
   which handles cards, tables, modals, dropdowns and form controls.
   ============================================================================ */
[data-theme="dark"] {
    /* Page + surfaces */
    --qa-bg:           #0b1220;
    --qa-surface:      #131c2e;
    --qa-surface-alt:  #1a2740;
    --qa-border:       #24324c;

    /* Text */
    --qa-text:         #e6edf6;
    --qa-text-muted:   #93a4bd;
    --qa-text-heading: #eaf2fb;

    /* Brand accents (brighter for dark) */
    --tb-navy:         #16233b;
    --tb-navy-dark:    #0f1a2c;
    --tb-navy-line:    #24324c;
    --tb-blue:         #3bbdf0;
    --tb-blue-dark:    #17ACE3;
    --tb-blue-soft:    #12314a;

    /* Primary action */
    --qa-primary:       #2b8fd6;
    --qa-primary-hover: #2079ba;
    --qa-primary-rgb:   43, 143, 214;

    /* Navbar */
    --qa-nav-bg:   #0e1626;
    --qa-nav-text: #9fb2cc;
}

/* Ambient gradient background */
[data-theme="dark"] body {
    background:
        radial-gradient(1200px 620px at 12% -12%, rgba(23,172,227,.12), transparent 60%),
        radial-gradient(1000px 520px at 100% 0%, rgba(16,185,129,.08), transparent 55%),
        var(--qa-bg);
    background-attachment: fixed;
    color: var(--qa-text);
}

/* Navbar — deep gradient with a faint accent hairline */
[data-theme="dark"] .tb-navbar {
    background: linear-gradient(180deg, #10192b, #0c1424);
    box-shadow: 0 1px 0 rgba(23,172,227,.18), 0 8px 22px rgba(0,0,0,.45);
}

/* Cards — subtle gradient surface + depth */
[data-theme="dark"] .card {
    background: linear-gradient(180deg, #16223a, #121a2c);
    border: 1px solid var(--qa-border);
    box-shadow: 0 10px 26px rgba(0,0,0,.38);
}
[data-theme="dark"] .card-header {
    background: rgba(255,255,255,.02);
    border-bottom-color: var(--qa-border);
}

/* KPI cards — gradient top accent (teal → Curious Blue), like the reference */
[data-theme="dark"] .kpi-card { position: relative; overflow: hidden; }
[data-theme="dark"] .kpi-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #10b981, #17ACE3 60%, #6366f1);
}
[data-theme="dark"] .display-val { text-shadow: 0 0 22px rgba(23,172,227,.25); }

/* Filter toolbar */
[data-theme="dark"] .toolbar {
    background: rgba(255,255,255,.025);
    border-color: var(--qa-border);
}

/* Primary buttons — gradient fill */
[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #2b8fd6, #17ACE3);
    border: none;
    color: #06121e;
    font-weight: 600;
}
[data-theme="dark"] .btn-primary:hover { filter: brightness(1.08); }

/* Links + misc */
[data-theme="dark"] a { color: #6fc9f2; }
[data-theme="dark"] a:hover { color: #9bdcff; }
[data-theme="dark"] .table { --bs-table-bg: transparent; }
[data-theme="dark"] .tb-brand-word,
[data-theme="dark"] .tb-user-name { color: #fff; }

/* Light utility chips keep dark, legible text on dark surfaces */
[data-theme="dark"] .badge.bg-light { background: #1f2c44 !important; color: #dbe6f4 !important; }

/* Contextual highlights & light utilities that don't auto-adapt to dark */
[data-theme="dark"] .table-info  { --bs-table-bg: #143050; --bs-table-color: #e6edf6; --bs-table-border-color: #24324c; }
[data-theme="dark"] .table-light { --bs-table-bg: #1a2740; --bs-table-color: #e6edf6; }
[data-theme="dark"] .bg-light    { background-color: var(--qa-surface-alt) !important; color: var(--qa-text); }
[data-theme="dark"] .cat-badge.bg-primary { background: #1e3a5f !important; border: 1px solid rgba(59,189,240,.28); }

/* Outline buttons stay visible on dark (Edit/action buttons, filter dropdowns) */
[data-theme="dark"] .btn-outline-primary { color: #6fc9f2; border-color: rgba(111,201,242,.55); }
[data-theme="dark"] .btn-outline-primary:hover { background: #2b8fd6; border-color: #2b8fd6; color: #06121e; }
[data-theme="dark"] .btn-outline-secondary { color: #aebfd6; border-color: rgba(174,191,214,.40); }
[data-theme="dark"] .btn-outline-secondary:hover { background: #2a3a56; border-color: #2a3a56; color: #fff; }