/* ============================================================================
   EastGate Dashboard — DARK THEME
   branding/eastgate-dark.css      loads AFTER layout.css, dark mode only
   ----------------------------------------------------------------------------
   WHY THIS FILE EXISTS
   The STM app and this one share layout.css, and layout.css is overwritten
   wholesale whenever a change is synced from stm-dashboard. Anything designed
   *into* layout.css therefore has a shelf life of exactly one sync. So the
   EastGate dark theme lives here instead:

     layout.css         generic structure + the LIGHT theme  (syncable, owned by STM)
     apply_brand.php    mechanical hue substitution          (purple -> blue/amber)
     eastgate-dark.css  the EastGate DARK DESIGN             (owned by EastGate)

   Sync from STM stays exactly as before: copy the file over, then run
   `php branding/apply_brand.php`. Neither step touches this layer, and this
   layer always wins the cascade. See branding/RECOLOR.md.

   DESIGN — "blueprint at night"
   * ONE cool navy hue (~215deg) for every neutral. The old theme mixed a navy
     page background with purple-grey cards (hue ~257deg); those two hues fight,
     which is what made it read muddy.
   * Elevation is expressed as LIGHTNESS, consistently: the further forward a
     surface sits, the lighter it is. Cards are OPAQUE, never translucent — a
     translucent card drifts in colour as the page's background glows pass
     beneath it, which is why card colour looked inconsistent before.
   * Inner surfaces go LIGHTER than their card (tiles, table heads, chips).
     Only true input fields go darker, and those keep a visible border so they
     read as fields rather than holes.
   * Separation = lightness step + hairline border + dark drop shadow + a 1px
     inset top highlight (light from above). No large coloured glows.
   * COLOUR ROLES:  blue = structure & navigation.  amber = attention & activity.
     Every "this is live / selected / focused / important" signal is amber.
   * Contrast floor measured on the card surface: body 13.7:1, secondary 7.3:1,
     muted 5.2:1, amber 7.7:1, amber-hi 9.1:1 — all above WCAG AA.

   BRAND COLOURS ARE FIXED: blue #015fc9, amber #fe9d3b. Only their USE changes.
   ========================================================================== */


/* -- 1. Tokens ------------------------------------------------------------ */

[data-theme="dark"] {
    /* Ground ramp — one hue, monotonic lightness */
    --eg-page:        #0a1322;
    --eg-sidebar:     #0d1828;
    --eg-topbar:      #101c2e;
    --eg-card:        #132236;
    --eg-card-hd:     #16273c;
    --eg-raised:      #1a2c44;
    --eg-raised-hi:   #21374f;
    --eg-sunken:      #0e1929;

    /* Hairlines — cool light, NOT brand-tinted. Brand colour at low alpha over
       navy reads as dirt; a neutral cool line reads as an edge. */
    --eg-line:        rgba(137, 178, 232, 0.13);
    --eg-line-soft:   rgba(137, 178, 232, 0.075);
    --eg-line-strong: rgba(137, 178, 232, 0.22);

    /* Brand — values unchanged, roles reassigned */
    --eg-blue:        #015fc9;
    --eg-blue-lite:   #5aa2f0;
    --eg-amber:       #fe9d3b;
    --eg-amber-hi:    #ffb45f;
    --eg-amber-dim:   rgba(254, 157, 59, 0.12);
    --eg-amber-line:  rgba(254, 157, 59, 0.34);

    /* Elevation — dark shadow does the lifting, not coloured glow */
    --eg-lift-1: 0 1px 2px rgba(0,0,0,0.40), 0 6px 18px -8px rgba(0,0,0,0.55);
    --eg-lift-2: 0 2px 4px rgba(0,0,0,0.42), 0 14px 32px -12px rgba(0,0,0,0.62);
    --eg-lift-3: 0 8px 20px rgba(0,0,0,0.50), 0 32px 64px -20px rgba(0,0,0,0.70);
    --eg-topgloss: inset 0 1px 0 rgba(255,255,255,0.055);

    /* Re-point the shared layout.css variables at the new ramp */
    --color-page-bg:        var(--eg-page);
    --color-card:           var(--eg-card);
    --color-sidebar:        var(--eg-sidebar);
    --color-topbar:         var(--eg-topbar);
    --color-border:         var(--eg-line);
    --color-border-card:    var(--eg-line-soft);

    --color-text-primary:   #e8eef7;
    --color-text-secondary: #9fb1c8;
    --color-text-muted:     #8194ad;
    --color-text-label:     #c4d3e6;
    --color-text:           #e8eef7;

    --color-accent:         var(--eg-blue-lite);
    --color-accent-dark:    var(--eg-blue);
    --color-accent-light:   rgba(1, 95, 201, 0.16);
    --color-accent-ring:    rgba(254, 157, 59, 0.22);   /* focus = amber */

    --color-bg-card:        var(--eg-card);
    --color-bg-input:       var(--eg-sunken);
    --color-bg-secondary:   var(--eg-raised);

    --shadow-resting: var(--eg-lift-1);
    --shadow-lifted:  var(--eg-lift-2);
    --shadow-float:   var(--eg-lift-3);
    --shadow-btn:     0 2px 10px rgba(1, 95, 201, 0.45);

    color-scheme: dark;
}


/* -- 2. Ground ------------------------------------------------------------ */
/* Two quiet light sources: a cool blue wash top-left (the app's atmosphere)
   and a warm amber ember bottom-right (the brand's warm half). Both sit far
   below card level, so they never tint a card — cards are opaque. */

[data-theme="dark"] body {
    background-color: var(--eg-page) !important;
    background-image:
        radial-gradient(ellipse 70% 48% at 12% -8%,  rgba(1, 95, 201, 0.22) 0%, transparent 60%),
        radial-gradient(ellipse 40% 34% at 96% 104%, rgba(254, 157, 59, 0.09) 0%, transparent 62%),
        radial-gradient(ellipse 52% 40% at 88% 0%,   rgba(254, 157, 59, 0.05) 0%, transparent 58%) !important;
    background-attachment: fixed;
}

/* The old theme blurred a 52px coloured glow behind every heading. It smears
   glyph edges and costs contrast — headings are lit by weight, not by glow. */
[data-theme="dark"] .page-hd-title,
[data-theme="dark"] .db-welcome-title,
[data-theme="dark"] .card-title,
[data-theme="dark"] .text-profit,
[data-theme="dark"] .text-loss {
    text-shadow: none !important;
}

[data-theme="dark"] .page-hd-sub { opacity: 1 !important; }

/* Page title carries a short amber rule — the brand's first mark on every page */
[data-theme="dark"] .page-hd-left  { position: relative; padding-left: 14px; }
[data-theme="dark"] .page-hd-left::before {
    content: '';
    position: absolute;
    left: 0; top: 5px; bottom: 5px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--eg-amber) 0%, rgba(254,157,59,0.18) 100%);
}


/* -- 3. Sidebar: amber marks where you ARE -------------------------------- */

[data-theme="dark"] .sidebar {
    background: var(--eg-sidebar) !important;
    border-right: 1px solid var(--eg-line) !important;
    box-shadow: 1px 0 0 rgba(0,0,0,0.30);
}

[data-theme="dark"] .sidebar-section + .sidebar-section { border-top-color: var(--eg-line-soft); }
[data-theme="dark"] .sidebar-section-label { color: #7e8fa8; }

[data-theme="dark"] .sidebar-item   { color: var(--color-text-label); }
[data-theme="dark"] .sidebar-item i { color: #8194ad; }

/* Hover is BLUE, active is AMBER — so the two states never read alike */
[data-theme="dark"] .sidebar-item:hover {
    background: rgba(1, 95, 201, 0.16);
    color: #ffffff;
}
[data-theme="dark"] .sidebar-item:hover i { color: var(--eg-blue-lite); }

[data-theme="dark"] .sidebar-item.active {
    background: linear-gradient(90deg, rgba(254,157,59,0.14) 0%, rgba(254,157,59,0.035) 100%) !important;
    color: var(--eg-amber-hi) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .sidebar-item.active::before {
    background: var(--eg-amber) !important;
    box-shadow: 0 0 14px rgba(254, 157, 59, 0.60);
}
[data-theme="dark"] .sidebar-item.active i { color: var(--eg-amber) !important; }

[data-theme="dark"] .sidebar-footer     { border-top-color: var(--eg-line-soft); }
[data-theme="dark"] .sidebar-role-badge { color: #8194ad; }


/* -- 4. Topbar ------------------------------------------------------------ */

[data-theme="dark"] .topbar {
    background: rgba(16, 28, 46, 0.86) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--eg-line) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.35) !important;
}


/* -- 5. Cards: the main event --------------------------------------------- */
/* Opaque surface + hairline + dark lift + top gloss. Nothing translucent,
   nothing glowing. The card is a lit panel; the page is the room. */

[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .form-section,
[data-theme="dark"] .data-section,
[data-theme="dark"] .financial-section,
[data-theme="dark"] .shortcuts-section,
[data-theme="dark"] .user-select-section,
[data-theme="dark"] .permission-group,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .page-header,
[data-theme="dark"] .task-card,
[data-theme="dark"] .modal-service,
[data-theme="dark"] .quick-actions .action-box,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .stat-box {
    background: var(--eg-card) !important;
    background-image: none !important;
    border: 1px solid var(--eg-line) !important;
    box-shadow: var(--eg-topgloss), var(--eg-lift-1) !important;
    color: var(--color-text-primary);
}

[data-theme="dark"] .card:hover {
    border-color: var(--eg-line-strong) !important;
    box-shadow: var(--eg-topgloss), var(--eg-lift-2) !important;
}

/* Card header — one step lighter than the body, so the title band reads as
   the lit top edge of the panel rather than a separate object. */
[data-theme="dark"] .card-header {
    background: var(--eg-card-hd) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--eg-line) !important;
}

/* Card title icon in amber — a small brand mark on every card in the app */
[data-theme="dark"] .card-title   { color: var(--color-text-primary); }
[data-theme="dark"] .card-title i { color: var(--eg-amber) !important; }

/* Financial card gets an amber ring instead of the blue one — money is the
   thing you came to look at. */
[data-theme="dark"] .db-financial > .card {
    border-color: var(--eg-amber-line) !important;
    box-shadow: var(--eg-topgloss), var(--eg-lift-2), 0 0 0 1px rgba(254,157,59,0.10) !important;
}


/* -- 6. Stat cards -------------------------------------------------------- */
/* styles.css already paints a 4px left rail on .stat-card::before using the
   two brand colours (blue at top -> amber at bottom). That rail IS the brand
   mark, so we keep it and do NOT add a second accent — an earlier pass put a
   cluster line along the top as well and the two read as noise. Here the rail
   is only made legible: brand blue #015fc9 is too dark to see against a navy
   card, so the top stop lifts to the readable blue. Cluster identity moves to
   the hover state, where it has the card to itself. */

[data-theme="dark"] .stat-card {
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

[data-theme="dark"] .stat-card::before {
    width: 3px !important;
    background: linear-gradient(180deg, var(--eg-blue-lite) 0%, var(--eg-amber) 100%) !important;
}

[data-theme="dark"] .stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--eg-line-strong) !important;
    box-shadow: var(--eg-topgloss), var(--eg-lift-2) !important;
}
[data-theme="dark"] [data-cluster="bookings"] .stat-card:hover { border-color: rgba( 90,162,240,0.34) !important; }
[data-theme="dark"] [data-cluster="tours"]    .stat-card:hover { border-color: rgba(  1, 95,201,0.55) !important; }
[data-theme="dark"] [data-cluster="work"]     .stat-card:hover { border-color: var(--eg-amber-line)   !important; }

[data-theme="dark"] .stat-card-number,
[data-theme="dark"] .stat-card-value  { color: #f2f6fb !important; }
[data-theme="dark"] .stat-card-label,
[data-theme="dark"] .stat-label       { color: var(--color-text-muted) !important; }

/* Stat icons — flat tinted chips. The amber/pink slots are the brand slots. */
[data-theme="dark"] .stat-card-icon,
[data-theme="dark"] [class*="stat-icon-"] { border: 1px solid transparent; }

[data-theme="dark"] .stat-icon-purple { background: rgba(  1, 95,201,0.20) !important; color: #7db4f4 !important; border-color: rgba(  1, 95,201,0.34) !important; }
[data-theme="dark"] .stat-icon-blue   { background: rgba( 59,130,246,0.18) !important; color: #7db4f4 !important; border-color: rgba( 59,130,246,0.30) !important; }
[data-theme="dark"] .stat-icon-amber,
[data-theme="dark"] .stat-icon-pink   { background: rgba(254,157, 59,0.18) !important; color: var(--eg-amber-hi) !important; border-color: var(--eg-amber-line) !important; }
[data-theme="dark"] .stat-icon-green  { background: rgba( 16,185,129,0.16) !important; color: #34d399 !important; border-color: rgba( 16,185,129,0.28) !important; }
[data-theme="dark"] .stat-icon-red    { background: rgba(239, 68, 68,0.16) !important; color: #f87171 !important; border-color: rgba(239, 68, 68,0.28) !important; }
[data-theme="dark"] .stat-icon-indigo { background: rgba( 99,102,241,0.18) !important; color: #a5b4fc !important; border-color: rgba( 99,102,241,0.30) !important; }

/* Section label rule above each stat cluster — amber */
[data-theme="dark"] .stat-group-label         { color: #8a9db5; }
[data-theme="dark"] .stat-group-label::before { background: var(--eg-amber) !important; opacity: 1 !important; }


/* -- 7. Welcome banner ---------------------------------------------------- */
/* Blue panel, amber kicker + amber name: the brand's two halves in one block */

[data-theme="dark"] .db-welcome {
    background: linear-gradient(115deg, #12294a 0%, #102340 46%, var(--eg-card) 100%) !important;
    border: 1px solid rgba(1, 95, 201, 0.34) !important;
    box-shadow: var(--eg-topgloss), var(--eg-lift-2) !important;
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .db-welcome::after {
    content: '';
    position: absolute;
    right: -60px; top: -90px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(254,157,59,0.16) 0%, transparent 68%);
    pointer-events: none;
}
[data-theme="dark"] .db-welcome-kicker     { color: var(--eg-amber) !important; opacity: 1 !important; }
[data-theme="dark"] .db-welcome-title      { color: #f2f6fb !important; }
[data-theme="dark"] .db-welcome-title span { color: var(--eg-amber-hi) !important; }
[data-theme="dark"] .db-welcome-sub        { color: #9fb1c8 !important; }


/* -- 8. Financial cards --------------------------------------------------- */

[data-theme="dark"] .fin-card {
    background: var(--eg-raised) !important;
    background-image: none !important;
    border: 1px solid var(--eg-line) !important;
    box-shadow: var(--eg-topgloss), 0 1px 3px rgba(0,0,0,0.34) !important;
}
[data-theme="dark"] .fin-card-label  { color: #8a9db5 !important; }
[data-theme="dark"] .fin-card-amount { color: #f2f6fb !important; }
[data-theme="dark"] .fin-card.profit .fin-card-amount { color: #34d399 !important; }
[data-theme="dark"] .fin-card.loss   .fin-card-amount { color: #fb7185 !important; }

/* The neutral (non-profit/loss) headline figure is the brand figure */
[data-theme="dark"] .fin-card:not(.profit):not(.loss) .fin-card-amount { color: var(--eg-amber-hi) !important; }

/* Range pills — active is amber */
[data-theme="dark"] .fin-range-tab        { color: #8a9db5; }
[data-theme="dark"] .fin-range-tab:hover  { background: rgba(1,95,201,0.18); color: var(--eg-blue-lite); }
[data-theme="dark"] .fin-range-tab.active {
    background: var(--eg-amber-dim) !important;
    color: var(--eg-amber-hi) !important;
    box-shadow: inset 0 0 0 1px var(--eg-amber-line);
}


/* -- 9. Raised inner surfaces --------------------------------------------- */
/* Everything that sits INSIDE a card and is content (not a field) goes one
   step LIGHTER than the card. Previously these were darker than their card,
   which is what made card interiors look like holes. */

[data-theme="dark"] .tool-tile,
[data-theme="dark"] .financial-item,
[data-theme="dark"] .shortcut-btn,
[data-theme="dark"] .permission-card,
[data-theme="dark"] .perm-card,
[data-theme="dark"] .perm-card-icon,
[data-theme="dark"] .profile-info-item,
[data-theme="dark"] .file-card,
[data-theme="dark"] .log-entry,
[data-theme="dark"] .fin-secondary-item,
[data-theme="dark"] .task-item {
    background: var(--eg-raised) !important;
    background-image: none !important;
    border-color: var(--eg-line) !important;
    box-shadow: var(--eg-topgloss), 0 1px 2px rgba(0,0,0,0.30) !important;
    color: var(--color-text-primary);
}

[data-theme="dark"] .tool-tile:hover,
[data-theme="dark"] .shortcut-btn:hover,
[data-theme="dark"] .file-card:hover,
[data-theme="dark"] .perm-card:hover:not(.perm-card-disabled) {
    background: var(--eg-raised-hi) !important;
    border-color: var(--eg-amber-line) !important;
    box-shadow: var(--eg-topgloss), 0 4px 14px rgba(0,0,0,0.38) !important;
}
[data-theme="dark"] .tool-tile:hover i,
[data-theme="dark"] .shortcut-btn:hover i { color: var(--eg-amber) !important; }

[data-theme="dark"] .permission-card.selected {
    background: rgba(254,157,59,0.16) !important;
    background-image: none !important;
    border-color: var(--eg-amber) !important;
    color: var(--eg-amber-hi) !important;
}


/* -- 10. Fields: the only surfaces that go DARKER ------------------------- */

[data-theme="dark"] .stm-input,
[data-theme="dark"] .form-control,
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.stm-input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] .stm-select-trigger,
[data-theme="dark"] .es-trigger,
[data-theme="dark"] .es-search {
    /* background-COLOR only, never the `background` shorthand: the shorthand
       also resets background-repeat/position/size, which made the <select>
       chevron SVG tile across the whole field instead of sitting once at the
       right edge. */
    background-color: var(--eg-sunken) !important;
    border: 1px solid var(--eg-line-strong) !important;
    color: var(--color-text-primary) !important;
}

/* Focus is AMBER everywhere — the single clearest "you are here" in the app */
[data-theme="dark"] .stm-input:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .stm-select-trigger:focus,
[data-theme="dark"] .stm-select-trigger.ss-open,
[data-theme="dark"] .es-trigger:focus {
    border-color: var(--eg-amber) !important;
    box-shadow: 0 0 0 3px rgba(254, 157, 59, 0.20) !important;
    outline: none !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #7e8fa8 !important; }

[data-theme="dark"] label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .stm-label { color: var(--color-text-label); }

/* Native select chevron — matched to the lighter blue. The geometry is
   restated alongside the image so the glyph can never tile, whatever a
   synced layout.css does to the shorthand upstream. */
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.stm-input,
[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235aa2f0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 34px;
}

/* Options in the native dropdown popup follow the theme too */
[data-theme="dark"] select option {
    background-color: var(--eg-card);
    color: var(--color-text-primary);
}
[data-theme="dark"] .stm-select-chevron { color: var(--eg-blue-lite); }


/* -- 11. Tables: amber column labels, amber row rail ---------------------- */

[data-theme="dark"] .stm-table thead th,
[data-theme="dark"] .table th,
[data-theme="dark"] .data-table th {
    background: var(--eg-card-hd) !important;
    color: var(--eg-amber-hi) !important;
    font-weight: 600 !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase;
    border-bottom: 1px solid var(--eg-line-strong) !important;
}

[data-theme="dark"] .stm-table tbody td,
[data-theme="dark"] .table td,
[data-theme="dark"] .data-table td {
    color: var(--color-text-secondary) !important;
    border-bottom-color: var(--eg-line-soft) !important;
}

[data-theme="dark"] .stm-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.022); }

[data-theme="dark"] .stm-table tbody tr:hover,
[data-theme="dark"] .table tbody tr:hover,
[data-theme="dark"] .data-table tbody tr:hover {
    background: rgba(254, 157, 59, 0.065) !important;
}
[data-theme="dark"] .stm-table tbody tr:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--eg-amber) !important;
}
[data-theme="dark"] .stm-table tbody tr:hover td { color: var(--color-text-primary) !important; }

[data-theme="dark"] .stm-table .cell-primary { color: #f2f6fb !important; font-weight: 600; }
[data-theme="dark"] .stm-table td a          { color: var(--eg-blue-lite); }
[data-theme="dark"] .stm-table .table-empty  { color: #7e8fa8 !important; }

[data-theme="dark"] .text-profit { color: #34d399 !important; }
[data-theme="dark"] .text-loss   { color: #fb7185 !important; }

/* Record-count chip in card headers */
[data-theme="dark"] .bl-count {
    background: var(--eg-amber-dim) !important;
    color: var(--eg-amber-hi) !important;
    border: 1px solid var(--eg-amber-line) !important;
}


/* -- 12. Pagination: amber current page ----------------------------------- */

[data-theme="dark"] .stm-pagination      { border-top-color: var(--eg-line) !important; }
[data-theme="dark"] .stm-pagination-info { color: #8a9db5 !important; }
[data-theme="dark"] .stm-pagination-btn  { color: var(--color-text-secondary); }
[data-theme="dark"] .stm-pagination-btn:not(.disabled):not(.active):hover {
    background: rgba(1,95,201,0.20) !important;
    color: #ffffff !important;
}
[data-theme="dark"] .stm-pagination-btn.active {
    background: var(--eg-amber-dim) !important;
    border-color: var(--eg-amber) !important;
    color: var(--eg-amber-hi) !important;
}
[data-theme="dark"] .stm-pagination-btn.disabled { color: #8194ad !important; }


/* -- 13. Buttons ---------------------------------------------------------- */

[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #0a6ad6 0%, #015fc9 100%) !important;
    border-color: rgba(90,162,240,0.30) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.40), 0 4px 14px rgba(1,95,201,0.35) !important;
}
[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, #1479e8 0%, #0a6ad6 100%) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.40), 0 8px 22px rgba(1,95,201,0.48) !important;
}

[data-theme="dark"] .btn-secondary {
    background: var(--eg-raised) !important;
    border-color: var(--eg-line-strong) !important;
    color: var(--color-text-label) !important;
}
[data-theme="dark"] .btn-secondary:hover {
    background: var(--eg-raised-hi) !important;
    border-color: var(--eg-amber-line) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-ghost       { color: var(--eg-blue-lite) !important; }
[data-theme="dark"] .btn-ghost:hover { background: rgba(1,95,201,0.18) !important; color: #ffffff !important; }

[data-theme="dark"] .btn:focus-visible {
    outline: 2px solid var(--eg-amber) !important;
    outline-offset: 2px;
}


/* -- 14. Badges & chips --------------------------------------------------- */

[data-theme="dark"] .badge { border: 1px solid transparent; }

/* "Active" is the live state -> amber */
[data-theme="dark"] .badge-active {
    background: var(--eg-amber-dim) !important;
    color: var(--eg-amber-hi) !important;
    border-color: var(--eg-amber-line) !important;
}
[data-theme="dark"] .badge-completed { background: rgba(16,185,129,0.14) !important; color: #6ee7b7 !important; border-color: rgba(16,185,129,0.26) !important; }
[data-theme="dark"] .badge-info      { background: rgba(90,162,240,0.14) !important; color: #93c5fd !important; border-color: rgba(90,162,240,0.26) !important; }
[data-theme="dark"] .badge-priority-medium { background: rgba(90,162,240,0.14) !important; color: #93c5fd !important; }
[data-theme="dark"] .badge-priority-low    { background: rgba(255,255,255,0.07) !important; color: var(--color-text-secondary) !important; }

/* The badge family in styles.css (the older stylesheet) draws on --success-light
   / --warning-light / --danger-light, which are only ever defined with light
   values — so these five had no dark treatment at all and rendered as pastel
   blocks. .badge-secondary is the brand's amber badge. */
[data-theme="dark"] .badge-success   { background: rgba( 16,185,129,0.16) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .badge-warning   { background: rgba(254,157, 59,0.16) !important; color: var(--eg-amber-hi) !important; }
[data-theme="dark"] .badge-danger    { background: rgba(239, 68, 68,0.16) !important; color: #fca5a5 !important; }
[data-theme="dark"] .badge-primary   { background: rgba( 90,162,240,0.16) !important; color: #93c5fd !important; }
[data-theme="dark"] .badge-secondary { background: var(--eg-amber-dim)     !important; color: var(--eg-amber-hi) !important; }


/* -- 15. Overlays, dropdowns, modals -------------------------------------- */

[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .stm-modal-overlay,
[data-theme="dark"] .svc-modal-overlay { background: rgba(3, 8, 16, 0.76) !important; backdrop-filter: blur(3px); }

[data-theme="dark"] .notification-dropdown,
[data-theme="dark"] .stm-select-menu,
[data-theme="dark"] .es-panel,
[data-theme="dark"] .user-dropdown,
[data-theme="dark"] .svc-modal,
[data-theme="dark"] .stm-modal {
    background: var(--eg-card) !important;
    border: 1px solid var(--eg-line-strong) !important;
    box-shadow: var(--eg-lift-3) !important;
}

[data-theme="dark"] .notification-header,
[data-theme="dark"] .notification-footer,
[data-theme="dark"] .svc-modal-hd,
[data-theme="dark"] .stm-modal-hd { background: var(--eg-card-hd) !important; }

[data-theme="dark"] .notification-item       { border-bottom-color: var(--eg-line-soft) !important; }
[data-theme="dark"] .notification-item:hover { background: rgba(1,95,201,0.14) !important; }
/* Unread = needs attention -> amber, with an amber rail */
[data-theme="dark"] .notification-item.unread {
    background: rgba(254,157,59,0.075) !important;
    box-shadow: inset 3px 0 0 var(--eg-amber);
}
[data-theme="dark"] .notification-item-title   { color: var(--color-text-primary) !important; }
[data-theme="dark"] .notification-item-message { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .dropdown-divider          { background: var(--eg-line) !important; }

[data-theme="dark"] .stm-select-option:hover,
[data-theme="dark"] .stm-select-option.ss-focused { background: rgba(1,95,201,0.20) !important; color: #fff !important; }
[data-theme="dark"] .stm-select-option.selected {
    background: var(--eg-amber-dim) !important;
    color: var(--eg-amber-hi) !important;
}

[data-theme="dark"] .loading-overlay { background: rgba(7, 14, 26, 0.72) !important; }


/* -- 16. Alerts & insights ------------------------------------------------ */

[data-theme="dark"] .alert,
[data-theme="dark"] .stm-alert {
    background: var(--eg-raised) !important;
    border: 1px solid var(--eg-line) !important;
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] .alert-success, [data-theme="dark"] .stm-alert-success, [data-theme="dark"] .success-message { background: rgba( 16,185,129,0.13) !important; border-color: rgba( 16,185,129,0.34) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .alert-error,   [data-theme="dark"] .stm-alert-error,   [data-theme="dark"] .error-message   { background: rgba(239, 68, 68,0.13) !important; border-color: rgba(239, 68, 68,0.34) !important; color: #fca5a5 !important; }
[data-theme="dark"] .alert-warning, [data-theme="dark"] .stm-alert-warning { background: rgba(254,157, 59,0.13) !important; border-color: var(--eg-amber-line) !important; color: var(--eg-amber-hi) !important; }
[data-theme="dark"] .alert-info,    [data-theme="dark"] .stm-alert-info    { background: rgba( 90,162,240,0.13) !important; border-color: rgba( 90,162,240,0.34) !important; color: #93c5fd !important; }

[data-theme="dark"] .insight-danger  { background: rgba(239, 68, 68,0.11) !important; border-left-color: #f87171 !important; }
[data-theme="dark"] .insight-warning { background: rgba(254,157, 59,0.12) !important; border-left-color: var(--eg-amber) !important; }
[data-theme="dark"] .insight-success { background: rgba( 16,185,129,0.11) !important; border-left-color: #34d399 !important; }
[data-theme="dark"] .insight-info    { background: rgba( 90,162,240,0.11) !important; border-left-color: var(--eg-blue-lite) !important; }


/* -- 17. Service editor --------------------------------------------------- */

[data-theme="dark"] .svc-card       { background: var(--eg-card) !important; background-image: none !important; border: 1px solid var(--eg-line) !important; box-shadow: var(--eg-topgloss), var(--eg-lift-1) !important; }
[data-theme="dark"] .svc-card:hover { border-color: var(--eg-amber-line) !important; }
[data-theme="dark"] .svc-editor     { border-color: var(--eg-line-strong) !important; background: var(--eg-card) !important; }
/* The block you are working in gets the amber edge */
[data-theme="dark"] .svc-card.open,
[data-theme="dark"] .svc-card.is-open,
[data-theme="dark"] .svc-card.expanded,
[data-theme="dark"] .svc-card.active {
    border-color: var(--eg-amber-line) !important;
    box-shadow: var(--eg-topgloss), var(--eg-lift-2), inset 3px 0 0 var(--eg-amber) !important;
}


/* -- 18. Admin hero ------------------------------------------------------- */

[data-theme="dark"] .admin-hero {
    background: linear-gradient(115deg, #12294a 0%, #102340 50%, var(--eg-card) 100%) !important;
    border: 1px solid rgba(1,95,201,0.32) !important;
    box-shadow: var(--eg-topgloss), var(--eg-lift-2) !important;
}


/* -- 19. Scrollbars ------------------------------------------------------- */

[data-theme="dark"] ::-webkit-scrollbar             { width: 11px; height: 11px; }
[data-theme="dark"] ::-webkit-scrollbar-track       { background: var(--eg-page); }
[data-theme="dark"] ::-webkit-scrollbar-thumb       { background: #24364f; border: 2px solid var(--eg-page); border-radius: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--eg-amber); }
[data-theme="dark"] * { scrollbar-color: #24364f var(--eg-page); }


/* -- 20. Text selection --------------------------------------------------- */

[data-theme="dark"] ::selection { background: rgba(254,157,59,0.30); color: #ffffff; }


/* -- 21. Dividers & misc -------------------------------------------------- */

[data-theme="dark"] hr,
[data-theme="dark"] .divider,
[data-theme="dark"] .section-divider { border-color: var(--eg-line) !important; }

[data-theme="dark"] .section-header h3,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--color-text-primary) !important; }

[data-theme="dark"] .info-label { color: #8a9db5 !important; }
[data-theme="dark"] .info-value { color: var(--color-text-primary) !important; }

/* Segmented range control (dashboard "This Week / Month / Year"). The shared
   rule fills the selected pill with brand blue #015fc9, which on a dark card
   reads as just another dark blue block — and it disagreed with the amber
   .fin-range-tab.active two cards below it. One selection colour, amber. */
[data-theme="dark"] .stm-range-pills { background: var(--eg-sunken) !important; border-color: var(--eg-line) !important; }
[data-theme="dark"] .stm-range-pill   { color: var(--color-text-secondary); }
[data-theme="dark"] .stm-range-pill:hover { color: #ffffff; }
[data-theme="dark"] .stm-range-pill.is-active {
    background: var(--eg-amber) !important;
    color: #0a1322 !important;          /* 8.9:1 — dark ink on amber */
    box-shadow: 0 1px 6px rgba(254,157,59,0.34);
}

/* Department performance meter — the shared fill runs blue to DARKER blue,
   which disappears into the track on a dark surface. Run it to amber instead,
   so a longer bar is visibly a hotter bar. */
[data-theme="dark"] .db-kpi-dept-bar  { background: var(--eg-sunken) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.40); }
[data-theme="dark"] .db-kpi-dept-fill { background: linear-gradient(90deg, var(--eg-blue) 0%, #2b8ff0 55%, var(--eg-amber) 100%) !important; }

/* Sidebar logo plate. The EastGate mark has black outlines and dark arc text,
   so it genuinely needs a light substrate — but pure #ffffff made it the
   brightest object on the screen by a wide margin. Soften to a cool off-white
   and ring it in amber so it reads as a designed plate, not a hole. */
[data-theme="dark"] .sidebar-logo {
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(254,157,59,0.05)) !important;
    box-shadow: inset 0 -1px 0 var(--eg-line) !important;
}
[data-theme="dark"] .sidebar-logo-link {
    background: #eaf0f7 !important;
    border: 1px solid rgba(254,157,59,0.45) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.34) !important;
}

/* -- 22. Brand blue used as TEXT -------------------------------------------
   --color-primary is #015fc9 in BOTH themes (correct: it is the brand blue and
   it fills buttons and pills, where white sits on it at 6:1). But a dozen
   components also use it as a text colour, and #015fc9 on a navy card is
   ~2.6:1 — unreadable. It cannot simply be redefined for dark, or every
   solid fill using it would turn pale and lose its white label. So the fix is
   per-component: text usages move to the readable blue, fills stay brand.
   ------------------------------------------------------------------------- */

[data-theme="dark"] .bl-applied-chip,
[data-theme="dark"] .bl-filter-tab.active,
[data-theme="dark"] .file-chip,
[data-theme="dark"] .tuf-name,
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] [style*="color:var(--color-primary)"],
[data-theme="dark"] [style*="color: var(--color-primary)"] {
    color: var(--eg-blue-lite) !important;
}
[data-theme="dark"] .bl-filter-tab.active { border-left-color: var(--eg-amber) !important; }
[data-theme="dark"] .bl-applied-chip,
[data-theme="dark"] .file-chip { background: rgba(1,95,201,0.18) !important; }

/* View tabs (Current / Previous) — selected tab follows the amber rule */
[data-theme="dark"] .bl-view-tabs      { background: var(--eg-sunken) !important; }
[data-theme="dark"] .bl-view-tab       { color: var(--color-text-secondary); }
[data-theme="dark"] .bl-view-tab:hover { color: #ffffff !important; }
[data-theme="dark"] .bl-view-tab.active {
    background: var(--eg-amber-dim) !important;
    color: var(--eg-amber-hi) !important;
    box-shadow: inset 0 0 0 1px var(--eg-amber-line) !important;
}




/* -- 23. Hardcoded light-mode colours in INLINE styles ---------------------
   Pages across the app emit colours directly in style="..." attributes, using
   the LIGHT-mode palette. An inline style beats every class rule, so nothing
   above can reach them: light pastels stayed as bright blocks punched into
   dark cards (the service-status pills in the bookings list were the worst
   case), and light-mode text greys went dim or, for gray-800/900, effectively
   invisible — #1f2937 on the card is 1.09:1.

   Matching the inline text is the only way to reach these without editing
   shared PHP, which also keeps the whole fix inside this branding-owned layer
   so an EastGate sync cannot undo it.

   The mapping preserves the ORIGINAL INTENT of each colour (primary vs label
   vs muted; danger vs warning vs success); it does not flatten them.

   SELECTOR SHAPE: "color:" is only matched at the START of the attribute, or
   after a space, or after a semicolon. Without that anchor, [style*="color:#x"]
   would also capture border-color:#x / outline-color:#x and repaint their TEXT
   — both spellings exist in these files. The `i` flag covers #8B3A8E and
   #8b3a8e, which are both written in the PHP.

   Deliberately NOT matched: declarations where a dark hex is the BACKGROUND of
   a solid button (background:#166534 / #92400e / #b91c1c, all with white text).
   Those keep their fill; section 27 only darkens the two that fail on white.
   This block is generated — keep it in sync with the sibling app's copy.
   ------------------------------------------------------------------------- */

/* primary text (gray-900/800, near-black, navy) */
[data-theme="dark"] [style^="color:#111827" i],
[data-theme="dark"] [style^="color: #111827" i],
[data-theme="dark"] [style*=" color:#111827" i],
[data-theme="dark"] [style*=" color: #111827" i],
[data-theme="dark"] [style*=";color:#111827" i],
[data-theme="dark"] [style*=";color: #111827" i],
[data-theme="dark"] [style^="color:#1f2937" i],
[data-theme="dark"] [style^="color: #1f2937" i],
[data-theme="dark"] [style*=" color:#1f2937" i],
[data-theme="dark"] [style*=" color: #1f2937" i],
[data-theme="dark"] [style*=";color:#1f2937" i],
[data-theme="dark"] [style*=";color: #1f2937" i],
[data-theme="dark"] [style^="color:#1f1635" i],
[data-theme="dark"] [style^="color: #1f1635" i],
[data-theme="dark"] [style*=" color:#1f1635" i],
[data-theme="dark"] [style*=" color: #1f1635" i],
[data-theme="dark"] [style*=";color:#1f1635" i],
[data-theme="dark"] [style*=";color: #1f1635" i],
[data-theme="dark"] [style^="color:#0a1f3c" i],
[data-theme="dark"] [style^="color: #0a1f3c" i],
[data-theme="dark"] [style*=" color:#0a1f3c" i],
[data-theme="dark"] [style*=" color: #0a1f3c" i],
[data-theme="dark"] [style*=";color:#0a1f3c" i],
[data-theme="dark"] [style*=";color: #0a1f3c" i],
[data-theme="dark"] [style^="color:#0f172a" i],
[data-theme="dark"] [style^="color: #0f172a" i],
[data-theme="dark"] [style*=" color:#0f172a" i],
[data-theme="dark"] [style*=" color: #0f172a" i],
[data-theme="dark"] [style*=";color:#0f172a" i],
[data-theme="dark"] [style*=";color: #0f172a" i],
[data-theme="dark"] [style^="color:#3b3b46" i],
[data-theme="dark"] [style^="color: #3b3b46" i],
[data-theme="dark"] [style*=" color:#3b3b46" i],
[data-theme="dark"] [style*=" color: #3b3b46" i],
[data-theme="dark"] [style*=";color:#3b3b46" i],
[data-theme="dark"] [style*=";color: #3b3b46" i] {
    color: var(--color-text-primary) !important;
}

/* label text (gray-700) */
[data-theme="dark"] [style^="color:#374151" i],
[data-theme="dark"] [style^="color: #374151" i],
[data-theme="dark"] [style*=" color:#374151" i],
[data-theme="dark"] [style*=" color: #374151" i],
[data-theme="dark"] [style*=";color:#374151" i],
[data-theme="dark"] [style*=";color: #374151" i] {
    color: var(--color-text-label) !important;
}

/* secondary text (gray-600/500, slate-600/500) */
[data-theme="dark"] [style^="color:#4b5563" i],
[data-theme="dark"] [style^="color: #4b5563" i],
[data-theme="dark"] [style*=" color:#4b5563" i],
[data-theme="dark"] [style*=" color: #4b5563" i],
[data-theme="dark"] [style*=";color:#4b5563" i],
[data-theme="dark"] [style*=";color: #4b5563" i],
[data-theme="dark"] [style^="color:#475569" i],
[data-theme="dark"] [style^="color: #475569" i],
[data-theme="dark"] [style*=" color:#475569" i],
[data-theme="dark"] [style*=" color: #475569" i],
[data-theme="dark"] [style*=";color:#475569" i],
[data-theme="dark"] [style*=";color: #475569" i],
[data-theme="dark"] [style^="color:#64748b" i],
[data-theme="dark"] [style^="color: #64748b" i],
[data-theme="dark"] [style*=" color:#64748b" i],
[data-theme="dark"] [style*=" color: #64748b" i],
[data-theme="dark"] [style*=";color:#64748b" i],
[data-theme="dark"] [style*=";color: #64748b" i],
[data-theme="dark"] [style^="color:#6b7280" i],
[data-theme="dark"] [style^="color: #6b7280" i],
[data-theme="dark"] [style*=" color:#6b7280" i],
[data-theme="dark"] [style*=" color: #6b7280" i],
[data-theme="dark"] [style*=";color:#6b7280" i],
[data-theme="dark"] [style*=";color: #6b7280" i] {
    color: var(--color-text-secondary) !important;
}

/* muted text (gray-400) */
[data-theme="dark"] [style^="color:#9ca3af" i],
[data-theme="dark"] [style^="color: #9ca3af" i],
[data-theme="dark"] [style*=" color:#9ca3af" i],
[data-theme="dark"] [style*=" color: #9ca3af" i],
[data-theme="dark"] [style*=";color:#9ca3af" i],
[data-theme="dark"] [style*=";color: #9ca3af" i] {
    color: var(--color-text-muted) !important;
}

/* brand text — structure colour */
[data-theme="dark"] [style^="color:#015fc9" i],
[data-theme="dark"] [style^="color: #015fc9" i],
[data-theme="dark"] [style*=" color:#015fc9" i],
[data-theme="dark"] [style*=" color: #015fc9" i],
[data-theme="dark"] [style*=";color:#015fc9" i],
[data-theme="dark"] [style*=";color: #015fc9" i],
[data-theme="dark"] [style^="color:#0150ad" i],
[data-theme="dark"] [style^="color: #0150ad" i],
[data-theme="dark"] [style*=" color:#0150ad" i],
[data-theme="dark"] [style*=" color: #0150ad" i],
[data-theme="dark"] [style*=";color:#0150ad" i],
[data-theme="dark"] [style*=";color: #0150ad" i],
[data-theme="dark"] [style^="color:#01438f" i],
[data-theme="dark"] [style^="color: #01438f" i],
[data-theme="dark"] [style*=" color:#01438f" i],
[data-theme="dark"] [style*=" color: #01438f" i],
[data-theme="dark"] [style*=";color:#01438f" i],
[data-theme="dark"] [style*=";color: #01438f" i],
[data-theme="dark"] [style^="color:#013e8c" i],
[data-theme="dark"] [style^="color: #013e8c" i],
[data-theme="dark"] [style*=" color:#013e8c" i],
[data-theme="dark"] [style*=" color: #013e8c" i],
[data-theme="dark"] [style*=";color:#013e8c" i],
[data-theme="dark"] [style*=";color: #013e8c" i] {
    color: var(--eg-blue-lite) !important;
}

/* blue text */
[data-theme="dark"] [style^="color:#2563eb" i],
[data-theme="dark"] [style^="color: #2563eb" i],
[data-theme="dark"] [style*=" color:#2563eb" i],
[data-theme="dark"] [style*=" color: #2563eb" i],
[data-theme="dark"] [style*=";color:#2563eb" i],
[data-theme="dark"] [style*=";color: #2563eb" i],
[data-theme="dark"] [style^="color:#1d4ed8" i],
[data-theme="dark"] [style^="color: #1d4ed8" i],
[data-theme="dark"] [style*=" color:#1d4ed8" i],
[data-theme="dark"] [style*=" color: #1d4ed8" i],
[data-theme="dark"] [style*=";color:#1d4ed8" i],
[data-theme="dark"] [style*=";color: #1d4ed8" i],
[data-theme="dark"] [style^="color:#1e40af" i],
[data-theme="dark"] [style^="color: #1e40af" i],
[data-theme="dark"] [style*=" color:#1e40af" i],
[data-theme="dark"] [style*=" color: #1e40af" i],
[data-theme="dark"] [style*=";color:#1e40af" i],
[data-theme="dark"] [style*=";color: #1e40af" i],
[data-theme="dark"] [style^="color:#3b82f6" i],
[data-theme="dark"] [style^="color: #3b82f6" i],
[data-theme="dark"] [style*=" color:#3b82f6" i],
[data-theme="dark"] [style*=" color: #3b82f6" i],
[data-theme="dark"] [style*=";color:#3b82f6" i],
[data-theme="dark"] [style*=";color: #3b82f6" i],
[data-theme="dark"] [style^="color:#0284c7" i],
[data-theme="dark"] [style^="color: #0284c7" i],
[data-theme="dark"] [style*=" color:#0284c7" i],
[data-theme="dark"] [style*=" color: #0284c7" i],
[data-theme="dark"] [style*=";color:#0284c7" i],
[data-theme="dark"] [style*=";color: #0284c7" i],
[data-theme="dark"] [style^="color:#1a6fa0" i],
[data-theme="dark"] [style^="color: #1a6fa0" i],
[data-theme="dark"] [style*=" color:#1a6fa0" i],
[data-theme="dark"] [style*=" color: #1a6fa0" i],
[data-theme="dark"] [style*=";color:#1a6fa0" i],
[data-theme="dark"] [style*=";color: #1a6fa0" i] {
    color: #93c5fd !important;
}

/* indigo text */
[data-theme="dark"] [style^="color:#4f46e5" i],
[data-theme="dark"] [style^="color: #4f46e5" i],
[data-theme="dark"] [style*=" color:#4f46e5" i],
[data-theme="dark"] [style*=" color: #4f46e5" i],
[data-theme="dark"] [style*=";color:#4f46e5" i],
[data-theme="dark"] [style*=";color: #4f46e5" i],
[data-theme="dark"] [style^="color:#3730a3" i],
[data-theme="dark"] [style^="color: #3730a3" i],
[data-theme="dark"] [style*=" color:#3730a3" i],
[data-theme="dark"] [style*=" color: #3730a3" i],
[data-theme="dark"] [style*=";color:#3730a3" i],
[data-theme="dark"] [style*=";color: #3730a3" i] {
    color: #a5b4fc !important;
}

/* teal / cyan text */
[data-theme="dark"] [style^="color:#0d9488" i],
[data-theme="dark"] [style^="color: #0d9488" i],
[data-theme="dark"] [style*=" color:#0d9488" i],
[data-theme="dark"] [style*=" color: #0d9488" i],
[data-theme="dark"] [style*=";color:#0d9488" i],
[data-theme="dark"] [style*=";color: #0d9488" i],
[data-theme="dark"] [style^="color:#0f766e" i],
[data-theme="dark"] [style^="color: #0f766e" i],
[data-theme="dark"] [style*=" color:#0f766e" i],
[data-theme="dark"] [style*=" color: #0f766e" i],
[data-theme="dark"] [style*=";color:#0f766e" i],
[data-theme="dark"] [style*=";color: #0f766e" i],
[data-theme="dark"] [style^="color:#0c5460" i],
[data-theme="dark"] [style^="color: #0c5460" i],
[data-theme="dark"] [style*=" color:#0c5460" i],
[data-theme="dark"] [style*=" color: #0c5460" i],
[data-theme="dark"] [style*=";color:#0c5460" i],
[data-theme="dark"] [style*=";color: #0c5460" i],
[data-theme="dark"] [style^="color:#0891b2" i],
[data-theme="dark"] [style^="color: #0891b2" i],
[data-theme="dark"] [style*=" color:#0891b2" i],
[data-theme="dark"] [style*=" color: #0891b2" i],
[data-theme="dark"] [style*=";color:#0891b2" i],
[data-theme="dark"] [style*=";color: #0891b2" i] {
    color: #67e8f9 !important;
}

/* danger text */
[data-theme="dark"] [style^="color:#b91c1c" i],
[data-theme="dark"] [style^="color: #b91c1c" i],
[data-theme="dark"] [style*=" color:#b91c1c" i],
[data-theme="dark"] [style*=" color: #b91c1c" i],
[data-theme="dark"] [style*=";color:#b91c1c" i],
[data-theme="dark"] [style*=";color: #b91c1c" i],
[data-theme="dark"] [style^="color:#991b1b" i],
[data-theme="dark"] [style^="color: #991b1b" i],
[data-theme="dark"] [style*=" color:#991b1b" i],
[data-theme="dark"] [style*=" color: #991b1b" i],
[data-theme="dark"] [style*=";color:#991b1b" i],
[data-theme="dark"] [style*=";color: #991b1b" i],
[data-theme="dark"] [style^="color:#dc2626" i],
[data-theme="dark"] [style^="color: #dc2626" i],
[data-theme="dark"] [style*=" color:#dc2626" i],
[data-theme="dark"] [style*=" color: #dc2626" i],
[data-theme="dark"] [style*=";color:#dc2626" i],
[data-theme="dark"] [style*=";color: #dc2626" i],
[data-theme="dark"] [style^="color:#ef4444" i],
[data-theme="dark"] [style^="color: #ef4444" i],
[data-theme="dark"] [style*=" color:#ef4444" i],
[data-theme="dark"] [style*=" color: #ef4444" i],
[data-theme="dark"] [style*=";color:#ef4444" i],
[data-theme="dark"] [style*=";color: #ef4444" i],
[data-theme="dark"] [style^="color:#a01a1a" i],
[data-theme="dark"] [style^="color: #a01a1a" i],
[data-theme="dark"] [style*=" color:#a01a1a" i],
[data-theme="dark"] [style*=" color: #a01a1a" i],
[data-theme="dark"] [style*=";color:#a01a1a" i],
[data-theme="dark"] [style*=";color: #a01a1a" i],
[data-theme="dark"] [style^="color:#721c24" i],
[data-theme="dark"] [style^="color: #721c24" i],
[data-theme="dark"] [style*=" color:#721c24" i],
[data-theme="dark"] [style*=" color: #721c24" i],
[data-theme="dark"] [style*=";color:#721c24" i],
[data-theme="dark"] [style*=";color: #721c24" i] {
    color: #fca5a5 !important;
}

/* warning / amber text */
[data-theme="dark"] [style^="color:#92400e" i],
[data-theme="dark"] [style^="color: #92400e" i],
[data-theme="dark"] [style*=" color:#92400e" i],
[data-theme="dark"] [style*=" color: #92400e" i],
[data-theme="dark"] [style*=";color:#92400e" i],
[data-theme="dark"] [style*=";color: #92400e" i],
[data-theme="dark"] [style^="color:#b45309" i],
[data-theme="dark"] [style^="color: #b45309" i],
[data-theme="dark"] [style*=" color:#b45309" i],
[data-theme="dark"] [style*=" color: #b45309" i],
[data-theme="dark"] [style*=";color:#b45309" i],
[data-theme="dark"] [style*=";color: #b45309" i],
[data-theme="dark"] [style^="color:#c2410c" i],
[data-theme="dark"] [style^="color: #c2410c" i],
[data-theme="dark"] [style*=" color:#c2410c" i],
[data-theme="dark"] [style*=" color: #c2410c" i],
[data-theme="dark"] [style*=";color:#c2410c" i],
[data-theme="dark"] [style*=";color: #c2410c" i],
[data-theme="dark"] [style^="color:#d97706" i],
[data-theme="dark"] [style^="color: #d97706" i],
[data-theme="dark"] [style*=" color:#d97706" i],
[data-theme="dark"] [style*=" color: #d97706" i],
[data-theme="dark"] [style*=";color:#d97706" i],
[data-theme="dark"] [style*=";color: #d97706" i],
[data-theme="dark"] [style^="color:#ca8a04" i],
[data-theme="dark"] [style^="color: #ca8a04" i],
[data-theme="dark"] [style*=" color:#ca8a04" i],
[data-theme="dark"] [style*=" color: #ca8a04" i],
[data-theme="dark"] [style*=";color:#ca8a04" i],
[data-theme="dark"] [style*=";color: #ca8a04" i],
[data-theme="dark"] [style^="color:#856404" i],
[data-theme="dark"] [style^="color: #856404" i],
[data-theme="dark"] [style*=" color:#856404" i],
[data-theme="dark"] [style*=" color: #856404" i],
[data-theme="dark"] [style*=";color:#856404" i],
[data-theme="dark"] [style*=";color: #856404" i],
[data-theme="dark"] [style^="color:#78350f" i],
[data-theme="dark"] [style^="color: #78350f" i],
[data-theme="dark"] [style*=" color:#78350f" i],
[data-theme="dark"] [style*=" color: #78350f" i],
[data-theme="dark"] [style*=";color:#78350f" i],
[data-theme="dark"] [style*=";color: #78350f" i],
[data-theme="dark"] [style^="color:#9a3412" i],
[data-theme="dark"] [style^="color: #9a3412" i],
[data-theme="dark"] [style*=" color:#9a3412" i],
[data-theme="dark"] [style*=" color: #9a3412" i],
[data-theme="dark"] [style*=";color:#9a3412" i],
[data-theme="dark"] [style*=";color: #9a3412" i] {
    color: var(--eg-amber-hi) !important;
}

/* success text */
[data-theme="dark"] [style^="color:#166534" i],
[data-theme="dark"] [style^="color: #166534" i],
[data-theme="dark"] [style*=" color:#166534" i],
[data-theme="dark"] [style*=" color: #166534" i],
[data-theme="dark"] [style*=";color:#166534" i],
[data-theme="dark"] [style*=";color: #166534" i],
[data-theme="dark"] [style^="color:#059669" i],
[data-theme="dark"] [style^="color: #059669" i],
[data-theme="dark"] [style*=" color:#059669" i],
[data-theme="dark"] [style*=" color: #059669" i],
[data-theme="dark"] [style*=";color:#059669" i],
[data-theme="dark"] [style*=";color: #059669" i],
[data-theme="dark"] [style^="color:#047857" i],
[data-theme="dark"] [style^="color: #047857" i],
[data-theme="dark"] [style*=" color:#047857" i],
[data-theme="dark"] [style*=" color: #047857" i],
[data-theme="dark"] [style*=";color:#047857" i],
[data-theme="dark"] [style*=";color: #047857" i],
[data-theme="dark"] [style^="color:#065f46" i],
[data-theme="dark"] [style^="color: #065f46" i],
[data-theme="dark"] [style*=" color:#065f46" i],
[data-theme="dark"] [style*=" color: #065f46" i],
[data-theme="dark"] [style*=";color:#065f46" i],
[data-theme="dark"] [style*=";color: #065f46" i],
[data-theme="dark"] [style^="color:#15803d" i],
[data-theme="dark"] [style^="color: #15803d" i],
[data-theme="dark"] [style*=" color:#15803d" i],
[data-theme="dark"] [style*=" color: #15803d" i],
[data-theme="dark"] [style*=";color:#15803d" i],
[data-theme="dark"] [style*=";color: #15803d" i],
[data-theme="dark"] [style^="color:#16a34a" i],
[data-theme="dark"] [style^="color: #16a34a" i],
[data-theme="dark"] [style*=" color:#16a34a" i],
[data-theme="dark"] [style*=" color: #16a34a" i],
[data-theme="dark"] [style*=";color:#16a34a" i],
[data-theme="dark"] [style*=";color: #16a34a" i],
[data-theme="dark"] [style^="color:#155724" i],
[data-theme="dark"] [style^="color: #155724" i],
[data-theme="dark"] [style*=" color:#155724" i],
[data-theme="dark"] [style*=" color: #155724" i],
[data-theme="dark"] [style*=";color:#155724" i],
[data-theme="dark"] [style*=";color: #155724" i] {
    color: #6ee7b7 !important;
}

/* neutral light surfaces -> the raised surface */
[data-theme="dark"] [style*="background:#f9fafb" i],
[data-theme="dark"] [style*="background: #f9fafb" i],
[data-theme="dark"] [style*="background-color:#f9fafb" i],
[data-theme="dark"] [style*="background-color: #f9fafb" i],
[data-theme="dark"] [style*="background:#f8fafc" i],
[data-theme="dark"] [style*="background: #f8fafc" i],
[data-theme="dark"] [style*="background-color:#f8fafc" i],
[data-theme="dark"] [style*="background-color: #f8fafc" i],
[data-theme="dark"] [style*="background:#f3f4f6" i],
[data-theme="dark"] [style*="background: #f3f4f6" i],
[data-theme="dark"] [style*="background-color:#f3f4f6" i],
[data-theme="dark"] [style*="background-color: #f3f4f6" i],
[data-theme="dark"] [style*="background:#e5e7eb" i],
[data-theme="dark"] [style*="background: #e5e7eb" i],
[data-theme="dark"] [style*="background-color:#e5e7eb" i],
[data-theme="dark"] [style*="background-color: #e5e7eb" i],
[data-theme="dark"] [style*="background:#f0f0f0" i],
[data-theme="dark"] [style*="background: #f0f0f0" i],
[data-theme="dark"] [style*="background-color:#f0f0f0" i],
[data-theme="dark"] [style*="background-color: #f0f0f0" i],
[data-theme="dark"] [style*="background:#f1f5f9" i],
[data-theme="dark"] [style*="background: #f1f5f9" i],
[data-theme="dark"] [style*="background-color:#f1f5f9" i],
[data-theme="dark"] [style*="background-color: #f1f5f9" i],
[data-theme="dark"] [style*="background:#eef3fb" i],
[data-theme="dark"] [style*="background: #eef3fb" i],
[data-theme="dark"] [style*="background-color:#eef3fb" i],
[data-theme="dark"] [style*="background-color: #eef3fb" i],
[data-theme="dark"] [style*="background:#f4f8fe" i],
[data-theme="dark"] [style*="background: #f4f8fe" i],
[data-theme="dark"] [style*="background-color:#f4f8fe" i],
[data-theme="dark"] [style*="background-color: #f4f8fe" i],
[data-theme="dark"] [style*="background:#e7f0fb" i],
[data-theme="dark"] [style*="background: #e7f0fb" i],
[data-theme="dark"] [style*="background-color:#e7f0fb" i],
[data-theme="dark"] [style*="background-color: #e7f0fb" i] {
    background-color: var(--eg-raised) !important;
    background-image: none !important;
}

/* blue pastels */
[data-theme="dark"] [style*="background:#dbeafe" i],
[data-theme="dark"] [style*="background: #dbeafe" i],
[data-theme="dark"] [style*="background-color:#dbeafe" i],
[data-theme="dark"] [style*="background-color: #dbeafe" i],
[data-theme="dark"] [style*="background:#e0e7ff" i],
[data-theme="dark"] [style*="background: #e0e7ff" i],
[data-theme="dark"] [style*="background-color:#e0e7ff" i],
[data-theme="dark"] [style*="background-color: #e0e7ff" i],
[data-theme="dark"] [style*="background:#eff6ff" i],
[data-theme="dark"] [style*="background: #eff6ff" i],
[data-theme="dark"] [style*="background-color:#eff6ff" i],
[data-theme="dark"] [style*="background-color: #eff6ff" i],
[data-theme="dark"] [style*="background:#e8f4fd" i],
[data-theme="dark"] [style*="background: #e8f4fd" i],
[data-theme="dark"] [style*="background-color:#e8f4fd" i],
[data-theme="dark"] [style*="background-color: #e8f4fd" i],
[data-theme="dark"] [style*="background:#d1ecf1" i],
[data-theme="dark"] [style*="background: #d1ecf1" i],
[data-theme="dark"] [style*="background-color:#d1ecf1" i],
[data-theme="dark"] [style*="background-color: #d1ecf1" i],
[data-theme="dark"] [style*="background:#d8e8fc" i],
[data-theme="dark"] [style*="background: #d8e8fc" i],
[data-theme="dark"] [style*="background-color:#d8e8fc" i],
[data-theme="dark"] [style*="background-color: #d8e8fc" i],
[data-theme="dark"] [style*="background:#eff5fe" i],
[data-theme="dark"] [style*="background: #eff5fe" i],
[data-theme="dark"] [style*="background-color:#eff5fe" i],
[data-theme="dark"] [style*="background-color: #eff5fe" i] {
    background-color: rgba(90,162,240,0.16) !important;
    background-image: none !important;
}

/* green pastels */
[data-theme="dark"] [style*="background:#dcfce7" i],
[data-theme="dark"] [style*="background: #dcfce7" i],
[data-theme="dark"] [style*="background-color:#dcfce7" i],
[data-theme="dark"] [style*="background-color: #dcfce7" i],
[data-theme="dark"] [style*="background:#d1fae5" i],
[data-theme="dark"] [style*="background: #d1fae5" i],
[data-theme="dark"] [style*="background-color:#d1fae5" i],
[data-theme="dark"] [style*="background-color: #d1fae5" i],
[data-theme="dark"] [style*="background:#f0fdf4" i],
[data-theme="dark"] [style*="background: #f0fdf4" i],
[data-theme="dark"] [style*="background-color:#f0fdf4" i],
[data-theme="dark"] [style*="background-color: #f0fdf4" i],
[data-theme="dark"] [style*="background:#d4edda" i],
[data-theme="dark"] [style*="background: #d4edda" i],
[data-theme="dark"] [style*="background-color:#d4edda" i],
[data-theme="dark"] [style*="background-color: #d4edda" i] {
    background-color: rgba(16,185,129,0.18) !important;
    background-image: none !important;
}

/* amber pastels */
[data-theme="dark"] [style*="background:#fef3c7" i],
[data-theme="dark"] [style*="background: #fef3c7" i],
[data-theme="dark"] [style*="background-color:#fef3c7" i],
[data-theme="dark"] [style*="background-color: #fef3c7" i],
[data-theme="dark"] [style*="background:#fffbeb" i],
[data-theme="dark"] [style*="background: #fffbeb" i],
[data-theme="dark"] [style*="background-color:#fffbeb" i],
[data-theme="dark"] [style*="background-color: #fffbeb" i],
[data-theme="dark"] [style*="background:#fff3cd" i],
[data-theme="dark"] [style*="background: #fff3cd" i],
[data-theme="dark"] [style*="background-color:#fff3cd" i],
[data-theme="dark"] [style*="background-color: #fff3cd" i],
[data-theme="dark"] [style*="background:#ffedd5" i],
[data-theme="dark"] [style*="background: #ffedd5" i],
[data-theme="dark"] [style*="background-color:#ffedd5" i],
[data-theme="dark"] [style*="background-color: #ffedd5" i] {
    background-color: rgba(254,157,59,0.20) !important;
    background-image: none !important;
}

/* red pastels */
[data-theme="dark"] [style*="background:#fee2e2" i],
[data-theme="dark"] [style*="background: #fee2e2" i],
[data-theme="dark"] [style*="background-color:#fee2e2" i],
[data-theme="dark"] [style*="background-color: #fee2e2" i],
[data-theme="dark"] [style*="background:#fef2f2" i],
[data-theme="dark"] [style*="background: #fef2f2" i],
[data-theme="dark"] [style*="background-color:#fef2f2" i],
[data-theme="dark"] [style*="background-color: #fef2f2" i],
[data-theme="dark"] [style*="background:#fef7f7" i],
[data-theme="dark"] [style*="background: #fef7f7" i],
[data-theme="dark"] [style*="background-color:#fef7f7" i],
[data-theme="dark"] [style*="background-color: #fef7f7" i],
[data-theme="dark"] [style*="background:#fde8e8" i],
[data-theme="dark"] [style*="background: #fde8e8" i],
[data-theme="dark"] [style*="background-color:#fde8e8" i],
[data-theme="dark"] [style*="background-color: #fde8e8" i],
[data-theme="dark"] [style*="background:#f8d7da" i],
[data-theme="dark"] [style*="background: #f8d7da" i],
[data-theme="dark"] [style*="background-color:#f8d7da" i],
[data-theme="dark"] [style*="background-color: #f8d7da" i] {
    background-color: rgba(239,68,68,0.18) !important;
    background-image: none !important;
}
/* -- 24. One selection colour across every tab / pill / chip ---------------
   The app grew several independent tab and pill components, each hardcoding
   brand blue for its selected state. Two problems in dark mode: #015fc9 as
   TEXT on the page is ~3.1:1, and side by side the controls disagreed about
   what "selected" looks like. This is the design rule applied consistently —
   selected is amber, everywhere, in one place.
   ------------------------------------------------------------------------- */

[data-theme="dark"] .fin-tab.active,
[data-theme="dark"] .cal-view-tab.active,
[data-theme="dark"] .lv-tab.active,
[data-theme="dark"] .filter-pill.active,
[data-theme="dark"] .group-pill.active,
[data-theme="dark"] .bl-chip.selected {
    color: var(--eg-amber-hi) !important;
    border-bottom-color: var(--eg-amber) !important;
    border-color: var(--eg-amber-line) !important;
}
[data-theme="dark"] .filter-pill.active,
[data-theme="dark"] .group-pill.active,
[data-theme="dark"] .bl-chip.selected {
    background: var(--eg-amber-dim) !important;
}
[data-theme="dark"] .fin-tab.active .fin-tab-count {
    background: var(--eg-amber-dim) !important;
    color: var(--eg-amber-hi) !important;
}
/* unselected tabs stay neutral, hover is blue */
[data-theme="dark"] .fin-tab,
[data-theme="dark"] .cal-view-tab,
[data-theme="dark"] .lv-tab          { color: var(--color-text-secondary); }
[data-theme="dark"] .fin-tab:hover,
[data-theme="dark"] .cal-view-tab:hover,
[data-theme="dark"] .lv-tab:hover    { color: #ffffff !important; }

/* -- 25. Reports (booking_report.php) -------------------------------------
   This page predates the theme system and carries its own light-mode CSS, so
   almost nothing above reached it. Two problems:

   1. Its five KPI tiles mixed saturated gradient fills (gross, net, profit)
      with plain tiles (cost, bookings) in a single row, and the plain ones
      printed their figure in brand blue #015fc9 — 2.66:1 on a dark tile.
      Unified here onto ONE treatment: every tile is a card surface, and the
      FIGURE carries the colour. Same language as the Finance summary, so the
      two pages finally agree.
   2. Its status/audit badges are class-based light pastels (#d1fae5 etc.),
      which the inline-style rules in section 23 cannot reach.
   ------------------------------------------------------------------------- */

[data-theme="dark"] .kpi-card,
[data-theme="dark"] .kpi-card.revenue,
[data-theme="dark"] .kpi-card.net,
[data-theme="dark"] .kpi-card.profit-pos,
[data-theme="dark"] .kpi-card.profit-neg,
[data-theme="dark"] .kpi-card.neutral {
    background: var(--eg-card) !important;
    background-image: none !important;
    border: 1px solid var(--eg-line) !important;
    box-shadow: var(--eg-topgloss), var(--eg-lift-1) !important;
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] .kpi-card:hover {
    border-color: var(--eg-line-strong) !important;
    box-shadow: var(--eg-topgloss), var(--eg-lift-2) !important;
}
[data-theme="dark"] .kpi-label,
[data-theme="dark"] .kpi-card.neutral .kpi-label { color: var(--color-text-muted) !important; opacity: 1 !important; }

/* The figure carries the meaning: money = amber, cost = blue, result = semantic */
[data-theme="dark"] .kpi-value                     { color: #f2f6fb !important; }
[data-theme="dark"] .kpi-card.revenue    .kpi-value,
[data-theme="dark"] .kpi-card.net        .kpi-value { color: var(--eg-amber-hi) !important; }
[data-theme="dark"] .kpi-card.neutral    .kpi-value { color: var(--eg-blue-lite) !important; }
[data-theme="dark"] .kpi-card.profit-pos .kpi-value { color: #34d399 !important; }
[data-theme="dark"] .kpi-card.profit-neg .kpi-value { color: #fb7185 !important; }

[data-theme="dark"] .kpi-icon,
[data-theme="dark"] .kpi-card.neutral .kpi-icon {
    background: rgba(137,178,232,0.10) !important;
    color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .kpi-card.revenue    .kpi-icon,
[data-theme="dark"] .kpi-card.net        .kpi-icon { background: rgba(254,157, 59,0.18) !important; color: var(--eg-amber-hi) !important; }
[data-theme="dark"] .kpi-card.profit-pos .kpi-icon { background: rgba( 16,185,129,0.16) !important; color: #34d399 !important; }
[data-theme="dark"] .kpi-card.profit-neg .kpi-icon { background: rgba(239, 68, 68,0.16) !important; color: #f87171 !important; }

/* Report table head — same amber micro-caps as every other table */
[data-theme="dark"] .report-table thead th {
    background: var(--eg-card-hd) !important;
    color: var(--eg-amber-hi) !important;
    border-bottom: 1px solid var(--eg-line-strong) !important;
}
[data-theme="dark"] .report-table thead th.sortable a       { color: var(--eg-amber-hi) !important; opacity: 0.75; }
[data-theme="dark"] .report-table thead th.sortable a:hover { color: var(--eg-amber-hi) !important; opacity: 1; }
[data-theme="dark"] .report-table thead th.sort-active a    { color: var(--eg-amber-hi) !important; opacity: 1; }
[data-theme="dark"] .report-table thead th .th-sort-icon,
[data-theme="dark"] .report-table thead th .th-sort-icon.active { color: var(--eg-amber-hi) !important; }
[data-theme="dark"] .report-table tbody td      { border-bottom-color: var(--eg-line-soft) !important; }
[data-theme="dark"] .report-table tbody td a    { color: var(--eg-blue-lite) !important; }
[data-theme="dark"] .report-table tbody tr:hover{ background: rgba(254,157,59,0.065) !important; }

/* Class-based status / audit badges */
[data-theme="dark"] .status-badge.confirmed,
[data-theme="dark"] .audit-badge.audited        { background: rgba( 16,185,129,0.16) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .status-badge.completed     { background: rgba( 90,162,240,0.16) !important; color: #93c5fd !important; }
[data-theme="dark"] .status-badge.pending       { background: rgba(254,157, 59,0.16) !important; color: var(--eg-amber-hi) !important; }
[data-theme="dark"] .status-badge.cancelled,
[data-theme="dark"] .audit-badge.not-audited    { background: rgba(239, 68, 68,0.16) !important; color: #fca5a5 !important; }
[data-theme="dark"] .status-badge.cancelled-billed { background: rgba(249,115, 22,0.18) !important; color: #fdba74 !important; }

[data-theme="dark"] .btn-outline {
    color: var(--eg-blue-lite) !important;
    border-color: rgba(90,162,240,0.34) !important;
    background: transparent !important;
}
[data-theme="dark"] .btn-outline:hover { background: rgba(1,95,201,0.18) !important; color: #ffffff !important; }

/* Notification count badge: white on #ef4444 is 3.76:1. One step darker takes
   it to 4.83:1 without changing what the badge reads as. Dark mode only. */
[data-theme="dark"] .notification-badge { background: #dc2626 !important; }

/* Employee-selector avatar placeholder — #9ca3af is a light-mode grey and was
   the second-brightest object on a dark list page. */
[data-theme="dark"] .es-avatar { background: var(--eg-raised-hi) !important; color: var(--color-text-label) !important; }

/* -- 26. Pages that carry their own un-themed CSS -------------------------
   A full sweep of 20 pages found three still written entirely against the
   light palette in their own <style> blocks, so nothing above reached them:
   all_notifications.php (white header + white cards), manage_lookups.php
   (light form panel, blue tabs) and users.php (white-on-light-blue pill).
   These are ordinary dark-mode gaps, fixed here rather than in the shared
   PHP so an STM sync cannot reintroduce them.
   ------------------------------------------------------------------------- */

/* --- all_notifications.php --- */
[data-theme="dark"] .page-header-custom {
    background: var(--eg-card) !important;
    border: 1px solid var(--eg-line) !important;
    box-shadow: var(--eg-topgloss), var(--eg-lift-1) !important;
}
[data-theme="dark"] .page-header-custom h1 { color: var(--color-text-primary) !important; }
[data-theme="dark"] .notification-card {
    background: var(--eg-card) !important;
    border: 1px solid var(--eg-line) !important;
    box-shadow: var(--eg-topgloss), var(--eg-lift-1) !important;
}
[data-theme="dark"] .notification-card:hover {
    border-color: var(--eg-line-strong) !important;
    box-shadow: var(--eg-topgloss), var(--eg-lift-2) !important;
}
/* unread = needs attention = amber, same rule as the topbar dropdown */
[data-theme="dark"] .notification-card.unread {
    background: rgba(254,157,59,0.08) !important;
    border-left: 4px solid var(--eg-amber) !important;
}
[data-theme="dark"] .notification-title   { color: var(--color-text-primary) !important; }
[data-theme="dark"] .notification-message { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .notification-time    { color: var(--color-text-muted) !important; }
[data-theme="dark"] .notification-icon.task    { background: rgba( 90,162,240,0.16) !important; color: #93c5fd !important; }
[data-theme="dark"] .notification-icon.booking { background: rgba( 16,185,129,0.16) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .notification-icon.file,
[data-theme="dark"] .notification-icon.default { background: rgba(  1, 95,201,0.20) !important; color: #7db4f4 !important; }
[data-theme="dark"] .btn-mark-read {
    background: var(--eg-raised) !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid var(--eg-line) !important;
}
[data-theme="dark"] .btn-mark-read:hover { background: var(--eg-raised-hi) !important; color: #ffffff !important; }
[data-theme="dark"] .empty-state i  { color: #2c4463 !important; }
[data-theme="dark"] .empty-state h3 { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .empty-state p  { color: var(--color-text-muted) !important; }

/* --- manage_lookups.php --- */
[data-theme="dark"] .lk-tabs            { border-bottom-color: var(--eg-line) !important; }
[data-theme="dark"] .lk-tabs a          { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .lk-tabs a:hover:not(.active) { color: #ffffff !important; }
[data-theme="dark"] .lk-tabs a.active   { color: var(--eg-amber-hi) !important; border-bottom-color: var(--eg-amber) !important; }
[data-theme="dark"] .lk-add-form {
    background: var(--eg-raised) !important;
    border: 1px solid var(--eg-line) !important;
}
[data-theme="dark"] .lk-add-form label  { color: var(--color-text-label) !important; }
[data-theme="dark"] .lk-actions .btn-danger-ghost        { color: #fca5a5 !important; }
[data-theme="dark"] .lk-actions .btn-danger-ghost:hover  { background: rgba(239,68,68,0.16) !important; }

/* --- users.php --- */
[data-theme="dark"] .up-role-btn        { color: var(--color-text-secondary) !important; border-color: var(--eg-line) !important; }
[data-theme="dark"] .up-role-btn:hover  { border-color: var(--eg-amber-line) !important; color: #ffffff !important; }
[data-theme="dark"] .up-role-btn.active {
    background: var(--eg-amber) !important;
    border-color: var(--eg-amber) !important;
    color: #0a1322 !important;              /* dark ink on amber = 8.9:1 */
}
[data-theme="dark"] .up-role-btn.active .up-role-count { background: rgba(10,19,34,0.22) !important; }
[data-theme="dark"] .up-role-count      { background: rgba(255,255,255,0.10); }
/* supervisor cyan is carried by the regenerated section 23 (teal group). */

/* --- styles.css .session-message family (no dark variant upstream) --- */
[data-theme="dark"] .session-message.success { background: rgba( 16,185,129,0.13) !important; border-color: rgba( 16,185,129,0.34) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .session-message.error   { background: rgba(239, 68, 68,0.13) !important; border-color: rgba(239, 68, 68,0.34) !important; color: #fca5a5 !important; }
[data-theme="dark"] .session-message.warning { background: rgba(254,157, 59,0.13) !important; border-color: var(--eg-amber-line)   !important; color: var(--eg-amber-hi) !important; }
[data-theme="dark"] .session-message.info    { background: rgba( 90,162,240,0.13) !important; border-color: rgba( 90,162,240,0.34) !important; color: #93c5fd !important; }

/* Inline red count pills carry white text; #ef4444 gives 3.76:1, #dc2626 4.83:1 */
[data-theme="dark"] [style*="background:#ef4444" i],
[data-theme="dark"] [style*="background: #ef4444" i] { background-color: #dc2626 !important; }

/* Progress / meter fills — blue track filling to amber at the top end */
[data-theme="dark"] .progress-bar,
[data-theme="dark"] .kpi-bar-track,
[data-theme="dark"] .meter-track { background: var(--eg-sunken) !important; border: 1px solid var(--eg-line-soft); }
[data-theme="dark"] .progress-fill,
[data-theme="dark"] .kpi-bar-fill,
[data-theme="dark"] .meter-fill  { background: linear-gradient(90deg, var(--eg-blue) 0%, #2b8ff0 60%, var(--eg-amber) 100%) !important; }


/* -- 27. The four surface tokens that were never defined -------------------
   ROOT CAUSE, and the single biggest remaining dark-mode bug in the app.

   Six pages style their panels with `var(--color-surface, #fff)`,
   `var(--color-surface-2, #f8fafc)`, `var(--color-bg-subtle, #f1f5f9)` and
   `var(--color-card-bg)`. None of those four custom properties is defined
   ANYWHERE in either stylesheet — so every one of them silently resolved to
   its hardcoded LIGHT fallback, in both themes. That is why the hard-delete
   modal, the advanced-filter popup, the dashboard search rows, the treasury
   table head and the linked-booking panel all rendered white on a dark page:
   not a missing dark rule, a missing token. (The first dark pass missed these
   because the modals are display:none until opened, so a page-level sweep
   never saw them.)

   Defining them HERE, scoped to dark, is the whole fix: in light mode the
   properties stay undefined and the existing fallbacks still apply, so light
   rendering is byte-identical to before.
   ------------------------------------------------------------------------- */

[data-theme="dark"] {
    --color-surface:   var(--eg-card);
    --color-surface-2: var(--eg-card-hd);
    --color-bg-subtle: var(--eg-raised);
    --color-card-bg:   var(--eg-card);
}

/* The modal shells themselves hardcode `background: white` rather than going
   through a token, so they need naming directly. Same list in both apps. */
[data-theme="dark"] .hd-modal-box,
[data-theme="dark"] .bl-filter-box,
[data-theme="dark"] .lnk-modal-box,
[data-theme="dark"] .dlg-box,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .popup-box {
    background: var(--eg-card) !important;
    border: 1px solid var(--eg-line-strong) !important;
    box-shadow: var(--eg-lift-3) !important;
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] .hd-modal-title { color: #fca5a5 !important; }
[data-theme="dark"] .hd-modal-text  { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .hd-modal-hint  { color: var(--color-text-muted) !important; }
[data-theme="dark"] .hd-confirm-word {
    background: rgba(239,68,68,0.20) !important;
    color: #fca5a5 !important;
}
/* Solid danger button: white on #b91c1c is 2.82:1 once the dark overlay tints
   it. Lift the fill so the white label clears AA. */
[data-theme="dark"] .hd-confirm-submit,
[data-theme="dark"] .btn-danger {
    background: #b81b1b !important;
    background-image: none !important;
    border-color: #d33 !important;
    color: #ffffff !important;
}
[data-theme="dark"] .hd-confirm-submit:hover,
[data-theme="dark"] .btn-danger:hover { background: #cf2222 !important; }

/* Filter popup internals */
[data-theme="dark"] .bl-filter-head    { border-bottom-color: var(--eg-line) !important; }
[data-theme="dark"] .bl-filter-head h3 { color: var(--color-text-primary) !important; }
[data-theme="dark"] .bl-filter-close   { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .bl-filter-sidebar { border-right-color: var(--eg-line) !important; background: var(--eg-card-hd) !important; }
[data-theme="dark"] .bl-filter-foot    { border-top-color: var(--eg-line) !important; background: var(--eg-card-hd) !important; }
[data-theme="dark"] .bl-filter-tab     { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .bl-chip-group-label { color: var(--color-text-muted) !important; }
[data-theme="dark"] .bl-chip {
    background: var(--eg-raised) !important;
    border-color: var(--eg-line) !important;
    color: var(--color-text-label) !important;
}
[data-theme="dark"] .bl-chip:hover { background: var(--eg-raised-hi) !important; color: #ffffff !important; }

/* Dashboard "starting soon" rows + linked-booking inherit panel */
[data-theme="dark"] .ss-row        { background: var(--eg-raised) !important; border-color: var(--eg-line) !important; }
[data-theme="dark"] .ss-row-title  { color: var(--color-text-primary) !important; }
[data-theme="dark"] .ss-start      { color: var(--eg-amber-hi) !important; }
[data-theme="dark"] .lb-inherit    { background: var(--eg-raised) !important; border-color: var(--eg-line) !important; }
[data-theme="dark"] .lb-inherit span { color: var(--color-text-muted) !important; }
[data-theme="dark"] .lnk-comm-btn  { background: var(--eg-raised) !important; color: var(--color-text-secondary) !important; }
[data-theme="dark"] .lnk-comm-btn.active { background: var(--eg-blue) !important; color: #fff !important; }

/* Required-field asterisk: #f87171 is 2.77:1 on the card once it is no longer
   sitting on white. Lift it — it is the only cue that a field is mandatory. */
[data-theme="dark"] .form-label-required { color: #fca5a5 !important; }


/* -- 28. Supplier-type panel (manage_suppliers / manage_lookups?tab=…) -----
   Built entirely from light literals — #f9fafb form, pastel badges, a light
   toolbar — so it stayed a bright island on a dark page and printed its own
   labels at 1.05:1 (white "Save" on #f9fafb).
   ------------------------------------------------------------------------- */

[data-theme="dark"] .sst-toolbar {
    background: var(--eg-card-hd) !important;
    border-color: var(--eg-line) !important;
    color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .sst-form {
    background: var(--eg-raised) !important;
    border-color: var(--eg-line) !important;
}
[data-theme="dark"] .sst-badge {
    background: rgba(1,95,201,0.30) !important;
    color: var(--eg-blue-lite) !important;
}
[data-theme="dark"] .sst-edit-link     { color: var(--eg-blue-lite) !important; }
[data-theme="dark"] .sst-refresh-meta  { color: var(--color-text-muted) !important; }
[data-theme="dark"] .sst-progress-hint { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .sst-check         { color: var(--color-text-label) !important; }


/* -- 29. Treasury ledger --------------------------------------------------
   Its sticky table head is `var(--color-surface-2, #f8fafc)` — one of the four
   undefined tokens from section 27 — so the whole header row, and the frozen
   first column behind it, rendered near-white over dark rows. This page could
   not be opened during the first dark pass (the test account lacked
   access_treasury), which is why it was never caught.
   ------------------------------------------------------------------------- */

[data-theme="dark"] .tr-table thead th {
    background: var(--eg-card-hd) !important;
    color: var(--eg-amber-hi) !important;
    border-bottom-color: var(--eg-line-strong) !important;
}
[data-theme="dark"] .tr-table th,
[data-theme="dark"] .tr-table td            { border-bottom-color: var(--eg-line-soft) !important; }
[data-theme="dark"] .tr-table th:first-child,
[data-theme="dark"] .tr-table td:first-child { background: var(--eg-card) !important; }
[data-theme="dark"] .tr-table thead th:first-child { background: var(--eg-card-hd) !important; }
[data-theme="dark"] .tr-table tbody tr:hover td,
[data-theme="dark"] .tr-table tbody tr:hover td:first-child { background: var(--eg-raised) !important; }
[data-theme="dark"] .tr-table thead th a:hover { color: var(--eg-amber-hi) !important; }
[data-theme="dark"] .tr-type-in  { color: #6ee7b7 !important; }
[data-theme="dark"] .tr-type-out { color: #fca5a5 !important; }
[data-theme="dark"] .tr-scroll-proxy { background: var(--eg-sunken) !important; }


/* -- 30. Notification icons (bell dropdown + all_notifications) -----------
   Light pastel chips: they are small but they appear on EVERY page through
   the topbar bell, so they were the most-repeated light leak in the app.
   ------------------------------------------------------------------------- */

[data-theme="dark"] .notification-icon         { background: rgba(  1, 95,201,0.30) !important; color: var(--eg-blue-lite) !important; }
[data-theme="dark"] .notification-icon.task    { background: rgba( 90,162,240,0.16) !important; color: #93c5fd !important; }
[data-theme="dark"] .notification-icon.booking { background: rgba( 16,185,129,0.16) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .notification-icon.file,
[data-theme="dark"] .notification-icon.default { background: rgba(  1, 95,201,0.30) !important; color: var(--eg-blue-lite) !important; }


/* -- 31. Booking financial preview & small meta text ----------------------
   `.fin-live` (the live figures strip under the booking form, including the
   Cancelled-billed preview) used --color-page-bg, i.e. it was DARKER than the
   card it sits in — the "hole" pattern — and printed its labels at 4.2:1.
   It becomes a raised strip like every other inner surface.
   ------------------------------------------------------------------------- */

[data-theme="dark"] .fin-live {
    background: var(--eg-raised) !important;
    border-color: var(--eg-line) !important;
    box-shadow: var(--eg-topgloss), 0 1px 2px rgba(0,0,0,0.30) !important;
}
[data-theme="dark"] .fin-live-item  { border-right-color: var(--eg-line) !important; }
[data-theme="dark"] .fin-live-label { color: var(--color-text-muted) !important; }
[data-theme="dark"] .fin-live-value { color: var(--color-text-primary) !important; }
[data-theme="dark"] .fin-live-value.live-profit { color: #34d399 !important; }
[data-theme="dark"] .fin-live-value.live-loss   { color: #fb7185 !important; }

[data-theme="dark"] .currency-pill {
    background: var(--eg-raised) !important;
    border-color: var(--eg-line) !important;
    color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .currency-pill.is-empty { color: var(--color-text-muted) !important; }
[data-theme="dark"] .commission-helper      { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .charge-mode-btn.active,
[data-theme="dark"] .ccc-mode-btn.active,
[data-theme="dark"] .commission-mode-btn.active {
    background: var(--eg-amber-dim) !important;
    color: var(--eg-amber-hi) !important;
    border-color: var(--eg-amber-line) !important;
}

/* Small meta text that sat on --color-text-muted's old value */
[data-theme="dark"] .receipt-mini-meta,
[data-theme="dark"] .es-option-role,
[data-theme="dark"] .es-group-label,
[data-theme="dark"] .bd-unassigned,
[data-theme="dark"] .bd-emp-role,
[data-theme="dark"] .svc-card-meta,
[data-theme="dark"] .bl-onhold-sub,
[data-theme="dark"] .bookrep-onhold-sub,
[data-theme="dark"] .sec-stat-label,
[data-theme="dark"] .pm-log-action,
[data-theme="dark"] .bu-hint,
[data-theme="dark"] .bu-view-k,
[data-theme="dark"] .form-hint,
[data-theme="dark"] .date-sep,
[data-theme="dark"] .bl-count,
[data-theme="dark"] .stm-modal-close { color: var(--color-text-muted) !important; }
[data-theme="dark"] .bl-count { color: var(--eg-amber-hi) !important; }

/* Security dashboard tiles + the red "active tab" that was 3.3:1 */
[data-theme="dark"] .sec-stat-num { color: var(--color-text-primary) !important; }
[data-theme="dark"] .sec-tabs a.active,
[data-theme="dark"] .card-kebab-menu-item-danger { color: #fca5a5 !important; }

/* Role badges printed dark ink on their own 12% tint — all under 3.7:1 */
[data-theme="dark"] .up-role-badge,
[data-theme="dark"] .ta-role-badge { color: var(--color-text-label) !important; }


/* -- 32. Login page -------------------------------------------------------
   login.php never set data-theme at all, so a user who had chosen dark was
   shown a white card every time they signed in — the one screen guaranteed to
   be seen in every session. login.php now runs the same pre-paint snippet as
   header.php; this is the matching surface treatment.

   Its copyright line was also #9ca3af on white — 2.54:1 — a failure that was
   present in LIGHT mode too; that one is fixed in login.php itself so both
   themes benefit.
   ------------------------------------------------------------------------- */

[data-theme="dark"] .login-card {
    background: var(--eg-card) !important;
    border: 1px solid var(--eg-line-strong) !important;
    box-shadow: var(--eg-lift-3) !important;
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] .login-header h1,
[data-theme="dark"] .login-card h1,
[data-theme="dark"] .login-card h2 { color: var(--color-text-primary) !important; }
[data-theme="dark"] .login-card label,
[data-theme="dark"] .login-card .form-label { color: var(--color-text-label) !important; }
[data-theme="dark"] .login-card .form-control,
[data-theme="dark"] .login-card input {
    background-color: var(--eg-sunken) !important;
    border-color: var(--eg-line-strong) !important;
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] .login-footer,
[data-theme="dark"] .login-card p { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .captcha-card {
    background: var(--eg-card) !important;
    border: 1px solid var(--eg-line-strong) !important;
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] .captcha-sub   { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .captcha-track { background: var(--eg-sunken) !important; }
[data-theme="dark"] .captcha-head i { color: var(--eg-amber) !important; }


/* -- 33. The legacy styles.css palette, and white-on-brand-gradient -------
   Two last families the sweep turned up.

   (a) styles.css still carries an OLDER brand token — --brand-primary — from
       before the app settled on its current pair. It is what
       `a { color: var(--brand-primary) }` resolves to, so EVERY plain link in
       the app, the pagination numbers and the bell's "View all notifications"
       footer rendered at ~2.5-3.8:1 on a dark surface. The token cannot simply
       be lightened: it also fills gradient buttons where white sits on it. So
       the TEXT consumers are named here and moved to the readable blue; the
       fills keep the token.

   (b) White text on the brand gradient: a 20%-white chip over it in the
       calendar header is only ~3.3:1. The chip is darkened rather than the
       gradient, so the header keeps its brand fill.
   ------------------------------------------------------------------------- */

[data-theme="dark"] a,
[data-theme="dark"] .text-primary,
[data-theme="dark"] .notification-footer a,
[data-theme="dark"] .stm-page-item,
[data-theme="dark"] .stat-icon.primary,
[data-theme="dark"] .dropdown-content a:hover {
    color: var(--eg-blue-lite);
}
/* links that live inside a coloured surface keep that surface's own colour */
[data-theme="dark"] .btn a,
[data-theme="dark"] a.btn,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .sidebar-item,
[data-theme="dark"] .calendar-nav a,
[data-theme="dark"] .topbar a { color: inherit; }

[data-theme="dark"] .stm-page-item.active {
    color: var(--eg-amber-hi);
    background: var(--eg-amber-dim);
    border-color: var(--eg-amber-line);
}

/* Supplier-tagging progress line — class-based light literals, so section 23's
   inline rules could not reach them. */
[data-theme="dark"] .sst-progress         { color: var(--color-text-secondary) !important; }
[data-theme="dark"] .sst-progress strong  { color: var(--eg-blue-lite) !important; }
[data-theme="dark"] .sst-progress-hint    { color: var(--color-text-muted) !important; }
[data-theme="dark"] .sst-refresh-meta     { color: var(--color-text-muted) !important; }

/* (b) white-on-gradient chips */
[data-theme="dark"] .calendar-nav a         { background: rgba(0,0,0,0.30) !important; color: #ffffff !important; }
[data-theme="dark"] .calendar-nav a:hover   { background: rgba(0,0,0,0.44) !important; }
[data-theme="dark"] .profile-hero-role      { color: #ffffff !important; }

/* .brand-name is gradient-CLIPPED text (-webkit-text-fill-color: transparent),
   so the glyphs themselves are the brand colours — brand blue is ~3:1 on a dark
   card. Run the clip through the light twins instead.
   background-IMAGE, never the shorthand: the shorthand also resets
   background-clip to border-box, which would turn the wordmark into a solid
   gradient rectangle with invisible text. */
[data-theme="dark"] .brand-name {
    background-image: linear-gradient(135deg, var(--eg-blue-lite), var(--eg-amber)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* finance.php redefines .badge-pending with its own light pastel, overriding
   the shared token-driven rule. Same treatment as every other pending chip. */
[data-theme="dark"] .badge-pending {
    background: rgba(254,157,59,0.18) !important;
    color: var(--eg-amber-hi) !important;
    border-color: var(--eg-amber-line) !important;
}

/* -- 34. Token lift after the full-coverage re-measure --------------------
   Measuring every page (not just the 20 of the first pass) and every modal
   showed three tokens sitting just under AA once they land on a TINTED
   surface rather than the plain card — a badge tint, a calendar event chip,
   a refunded service card. The card-surface numbers quoted in the header were
   right; the tinted-surface numbers were not measured before.

     --color-text-muted  #8194ad -> #9db0c8   worst tinted 3.39 -> 4.74
     --eg-blue-lite      #5aa2f0 -> #7db9f7   worst tinted 3.93 -> 5.08

   And the brand gradient ends on #2b8ff0, which is too LIGHT to carry white
   text (3.34:1) on the avatars, the login button and the profile hero. The
   dark-mode gradient ends one step deeper instead; the blue is unchanged.
   ------------------------------------------------------------------------- */

[data-theme="dark"] {
    --color-text-muted: #9db0c8;
    --eg-blue-lite:     #7db9f7;
}

[data-theme="dark"] .topbar-avatar,
[data-theme="dark"] .user-dropdown-avatar,
[data-theme="dark"] .profile-hero,
[data-theme="dark"] .profile-hero-avatar,
[data-theme="dark"] .calendar-header,
[data-theme="dark"] .btn-login {
    background: linear-gradient(135deg, #015fc9 0%, #1569bd 100%) !important;
}
[data-theme="dark"] [style*="linear-gradient(135deg, #015fc9, #2b8ff0)" i],
[data-theme="dark"] [style*="linear-gradient(135deg,#015fc9,#2b8ff0)" i] {
    background-image: linear-gradient(135deg, #015fc9, #1569bd) !important;
}

/* Brand blue as a table sort glyph — same per-component treatment as §22 */
[data-theme="dark"] .th-sort-icon,
[data-theme="dark"] .th-sort-icon.active { color: var(--eg-amber-hi) !important; }

/* -- 35. Status badges must read as CHIPS ---------------------------------
   The TEXT in these badges was never the problem (8.1:1) — the FILL was.
   .badge-confirmed / .badge-pending / .badge-cancelled draw on
   --color-success-bg and friends, which dark mode set to a 12% tint. 12% of a
   colour over a dark card is a 1.11-1.22:1 fill: the pill shape disappears and
   the badge reads as loose coloured words rather than a chip.

   Two changes, applied to the tokens so every consumer benefits:
     fill   12% -> 24%   (fill-vs-card 1.22 -> 1.47-1.62)
     border none -> 60%  (border-vs-card 2.0-3.3 — this is what draws the pill)
   Text colours are unchanged; they were already well clear of AA.
   ------------------------------------------------------------------------- */

[data-theme="dark"] {
    --color-success-bg: rgba( 16, 185, 129, 0.24);
    --color-warning-bg: rgba(245, 158,  11, 0.24);
    --color-danger-bg:  rgba(239,  68,  68, 0.24);
}

[data-theme="dark"] .badge-confirmed { border: 1px solid rgba( 16,185,129,0.60) !important; }
[data-theme="dark"] .badge-pending   { border: 1px solid rgba(245,158, 11,0.60) !important; }
[data-theme="dark"] .badge-cancelled { border: 1px solid rgba(239, 68, 68,0.60) !important; }
[data-theme="dark"] .badge-cancelled-billed {
    background: rgba(249,115,22,0.24) !important;
    border: 1px solid rgba(249,115,22,0.60) !important;
    color: #fdba74 !important;
}
[data-theme="dark"] .badge-completed { border: 1px solid rgba(147,197,253,0.42) !important; }

/* The same "chip, not words" rule for the inline service-status pills in the
   bookings list. Section 23 already re-tinted their backgrounds; this gives
   them the outline that makes each one read as its own box. */
[data-theme="dark"] [style*="background:#dcfce7" i],
[data-theme="dark"] [style*="background: #dcfce7" i],
[data-theme="dark"] [style*="background:#d1fae5" i],
[data-theme="dark"] [style*="background: #d1fae5" i] { box-shadow: inset 0 0 0 1px rgba( 16,185,129,0.55) !important; }
[data-theme="dark"] [style*="background:#fef3c7" i],
[data-theme="dark"] [style*="background: #fef3c7" i] { box-shadow: inset 0 0 0 1px rgba(245,158, 11,0.55) !important; }
[data-theme="dark"] [style*="background:#fee2e2" i],
[data-theme="dark"] [style*="background: #fee2e2" i] { box-shadow: inset 0 0 0 1px rgba(239, 68, 68,0.55) !important; }