/* ============================================================================
   STM Dashboard — DARK THEME
   branding/stm-dark.css        loads AFTER layout.css, dark mode only
   ----------------------------------------------------------------------------
   WHY THIS FILE EXISTS
   `layout.css` is the file that gets copied wholesale to the EastGate sibling
   on every sync, and `styles.css` with it. Anything designed *into* them has to
   survive a mechanical hue substitution on the way over, and anything the
   sibling writes back overwrites it. So the DARK DESIGN lives here instead, and
   the sibling keeps the mirror image of this file:

     layout.css / styles.css     generic structure + the LIGHT theme  (synced)
     branding/stm-dark.css       the STM DARK DESIGN                  (this file)
     branding/eastgate-dark.css  the EastGate DARK DESIGN             (sibling)

   The two dark files are deliberately kept SECTION-FOR-SECTION PARALLEL: same
   numbering, same selectors, different palette. `branding/check_dark_parity.php`
   diffs their selector sets and fails if one grows a rule the other lacks —
   run it after touching either file. See branding/STM-DARK.md.

   DESIGN — "ink and neon"
   * ONE violet hue (~260deg) for every neutral, so no two surfaces disagree
     about what colour "dark" is.
   * Elevation is LIGHTNESS and only lightness: the further forward a surface
     sits, the lighter it is. Cards are OPAQUE — a translucent card drifts in
     colour as the page's background glows pass beneath it.
   * 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 + dark drop shadow + a 1px inset
     top highlight (light from above). No large coloured glows.
   * COLOUR ROLES:  purple = structure & navigation.  pink = attention &
     activity. Every "this is live / selected / focused / unread" signal is
     pink; everything structural stays purple.
   * Contrast floor measured on the card surface: body 13.6:1, secondary 7.4:1,
     muted 6.3:1, purple 7.5:1, pink 7.7:1 — all above WCAG AA.

   BRAND COLOURS ARE FIXED: purple #8B3A8E, pink #D63A7C. Neither is legible as
   TEXT on a dark surface (2.2:1 / 3.3:1), so each gets a lightened dark-mode
   twin for text and hairlines. Fills keep the true brand colour.
   ========================================================================== */


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

[data-theme="dark"] {
    /* Ground ramp — one hue, monotonic lightness (L = 0.0065 … 0.0347) */
    --stm-page:       #14111f;
    --stm-sidebar:    #191527;
    --stm-topbar:     #1d1830;
    --stm-card:       #221c38;
    --stm-card-hd:    #271f3f;
    --stm-raised:     #2c2447;
    --stm-raised-hi:  #382e56;
    --stm-sunken:     #100d1a;

    /* Hairlines — cool light, NOT brand-tinted. Brand colour at low alpha over
       violet reads as dirt; a neutral light line reads as an edge. */
    --stm-line:        rgba(199, 180, 235, 0.13);
    --stm-line-soft:   rgba(199, 180, 235, 0.075);
    --stm-line-strong: rgba(199, 180, 235, 0.22);

    /* Brand — true values kept for FILLS, lightened twins for TEXT/lines */
    --stm-purple:       #8B3A8E;
    --stm-purple-lite:  #c9a3d6;
    --stm-pink:         #D63A7C;
    --stm-pink-lite:    #ff8fc0;
    --stm-pink-hi:      #ffa6cd;
    --stm-pink-dim:     rgba(255, 143, 192, 0.12);
    --stm-pink-line:    rgba(255, 143, 192, 0.34);
    --stm-ink:          #14111f;          /* dark ink for text ON pink fills */

    /* Elevation — dark shadow does the lifting, not coloured glow */
    --stm-lift-1: 0 1px 2px rgba(0,0,0,0.40), 0 6px 18px -8px rgba(0,0,0,0.55);
    --stm-lift-2: 0 2px 4px rgba(0,0,0,0.42), 0 14px 32px -12px rgba(0,0,0,0.62);
    --stm-lift-3: 0 8px 20px rgba(0,0,0,0.50), 0 32px 64px -20px rgba(0,0,0,0.70);
    --stm-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(--stm-page);
    --color-card:           var(--stm-card);
    --color-sidebar:        var(--stm-sidebar);
    --color-topbar:         var(--stm-topbar);
    --color-border:         var(--stm-line);
    --color-border-card:    var(--stm-line-soft);

    --color-text-primary:   #ece9f6;
    --color-text-secondary: #b3abc9;
    --color-text-muted:     #a49cbd;
    --color-text-label:     #d6cfe9;
    --color-text:           #ece9f6;

    --color-accent:         var(--stm-purple-lite);
    --color-accent-dark:    var(--stm-purple);
    --color-accent-light:   rgba(139, 58, 142, 0.18);
    --color-accent-ring:    rgba(255, 143, 192, 0.22);   /* focus = pink */

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

    --shadow-resting: var(--stm-lift-1);
    --shadow-lifted:  var(--stm-lift-2);
    --shadow-float:   var(--stm-lift-3);
    --shadow-btn:     0 2px 10px rgba(139, 58, 142, 0.50);

    color-scheme: dark;
}


/* -- 2. Ground ------------------------------------------------------------ */
/* Two quiet light sources: a violet wash top-left (the app's atmosphere) and a
   pink 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(--stm-page) !important;
    background-image:
        radial-gradient(ellipse 70% 48% at 12% -8%,  rgba(139, 58, 142, 0.26) 0%, transparent 60%),
        radial-gradient(ellipse 40% 34% at 96% 104%, rgba(214, 58, 124, 0.10) 0%, transparent 62%),
        radial-gradient(ellipse 52% 40% at 88% 0%,   rgba(214, 58, 124, 0.06) 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 pink 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(--stm-pink-lite) 0%, rgba(255,143,192,0.18) 100%);
}


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

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

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

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

/* Hover is PURPLE, active is PINK — so the two states never read alike */
[data-theme="dark"] .sidebar-item:hover {
    background: rgba(139, 58, 142, 0.26);
    color: #ffffff;
}
[data-theme="dark"] .sidebar-item:hover i { color: var(--stm-purple-lite); }

[data-theme="dark"] .sidebar-item.active {
    background: linear-gradient(90deg, rgba(255,143,192,0.14) 0%, rgba(255,143,192,0.035) 100%) !important;
    color: var(--stm-pink-hi) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .sidebar-item.active::before {
    background: var(--stm-pink-lite) !important;
    box-shadow: 0 0 14px rgba(255, 143, 192, 0.60);
}
[data-theme="dark"] .sidebar-item.active i { color: var(--stm-pink-lite) !important; }

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


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

[data-theme="dark"] .topbar {
    background: rgba(29, 24, 48, 0.86) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid var(--stm-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(--stm-card) !important;
    background-image: none !important;
    border: 1px solid var(--stm-line) !important;
    box-shadow: var(--stm-topgloss), var(--stm-lift-1) !important;
    color: var(--color-text-primary);
}

[data-theme="dark"] .card:hover {
    border-color: var(--stm-line-strong) !important;
    box-shadow: var(--stm-topgloss), var(--stm-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(--stm-card-hd) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--stm-line) !important;
}

/* Card title icon in pink — 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(--stm-pink-lite) !important; }

/* Financial card gets a pink ring instead of the purple one — money is the
   thing you came to look at. */
[data-theme="dark"] .db-financial > .card {
    border-color: var(--stm-pink-line) !important;
    box-shadow: var(--stm-topgloss), var(--stm-lift-2), 0 0 0 1px rgba(255,143,192,0.10) !important;
}


/* -- 6. Stat cards -------------------------------------------------------- */
/* styles.css already paints a 4px left rail on .stat-card::before using the
   two brand colours (purple at top -> pink at bottom). That rail IS the brand
   mark, so we keep it and do NOT add a second accent. Here the rail is only
   made legible: brand purple #8B3A8E is too dark to see against a violet card,
   so the top stop lifts to the readable purple. 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(--stm-purple-lite) 0%, var(--stm-pink-lite) 100%) !important;
}

[data-theme="dark"] .stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--stm-line-strong) !important;
    box-shadow: var(--stm-topgloss), var(--stm-lift-2) !important;
}
[data-theme="dark"] [data-cluster="bookings"] .stat-card:hover { border-color: rgba(201,163,214,0.40) !important; }
[data-theme="dark"] [data-cluster="tours"]    .stat-card:hover { border-color: rgba(139, 58,142,0.62) !important; }
[data-theme="dark"] [data-cluster="work"]     .stat-card:hover { border-color: var(--stm-pink-line)   !important; }

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

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

[data-theme="dark"] .stat-icon-purple { background: rgba(139, 58,142,0.30) !important; color: var(--stm-purple-lite) !important; border-color: rgba(139, 58,142,0.50) !important; }
[data-theme="dark"] .stat-icon-blue   { background: rgba( 59,130,246,0.18) !important; color: #93c5fd !important; border-color: rgba( 59,130,246,0.30) !important; }
[data-theme="dark"] .stat-icon-amber  { background: rgba(245,158, 11,0.18) !important; color: #fcd34d !important; border-color: rgba(245,158, 11,0.30) !important; }
[data-theme="dark"] .stat-icon-pink   { background: rgba(255,143,192,0.18) !important; color: var(--stm-pink-hi) !important; border-color: var(--stm-pink-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 — pink */
[data-theme="dark"] .stat-group-label         { color: #a89fc4; }
[data-theme="dark"] .stat-group-label::before { background: var(--stm-pink-lite) !important; opacity: 1 !important; }


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

[data-theme="dark"] .db-welcome {
    background: linear-gradient(115deg, #3a1d50 0%, #2d1943 46%, var(--stm-card) 100%) !important;
    border: 1px solid rgba(139, 58, 142, 0.50) !important;
    box-shadow: var(--stm-topgloss), var(--stm-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(214,58,124,0.20) 0%, transparent 68%);
    pointer-events: none;
}
[data-theme="dark"] .db-welcome-kicker     { color: var(--stm-pink-lite) !important; opacity: 1 !important; }
[data-theme="dark"] .db-welcome-title      { color: #f5f3fb !important; }
[data-theme="dark"] .db-welcome-title span { color: var(--stm-pink-hi) !important; }
[data-theme="dark"] .db-welcome-sub        { color: #bdb4d4 !important; }


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

[data-theme="dark"] .fin-card {
    background: var(--stm-raised) !important;
    background-image: none !important;
    border: 1px solid var(--stm-line) !important;
    box-shadow: var(--stm-topgloss), 0 1px 3px rgba(0,0,0,0.34) !important;
}
[data-theme="dark"] .fin-card-label  { color: #a89fc4 !important; }
[data-theme="dark"] .fin-card-amount { color: #f5f3fb !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(--stm-pink-hi) !important; }

/* Range pills — active is pink */
[data-theme="dark"] .fin-range-tab        { color: #a89fc4; }
[data-theme="dark"] .fin-range-tab:hover  { background: rgba(139,58,142,0.28); color: var(--stm-purple-lite); }
[data-theme="dark"] .fin-range-tab.active {
    background: var(--stm-pink-dim) !important;
    color: var(--stm-pink-hi) !important;
    box-shadow: inset 0 0 0 1px var(--stm-pink-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(--stm-raised) !important;
    background-image: none !important;
    border-color: var(--stm-line) !important;
    box-shadow: var(--stm-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(--stm-raised-hi) !important;
    border-color: var(--stm-pink-line) !important;
    box-shadow: var(--stm-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(--stm-pink-lite) !important; }

[data-theme="dark"] .permission-card.selected {
    background: rgba(255,143,192,0.16) !important;
    background-image: none !important;
    border-color: var(--stm-pink-lite) !important;
    color: var(--stm-pink-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 makes the <select>
       chevron SVG tile across the whole field instead of sitting once at the
       right edge. */
    background-color: var(--stm-sunken) !important;
    border: 1px solid var(--stm-line-strong) !important;
    color: var(--color-text-primary) !important;
}

/* Focus is PINK 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(--stm-pink-lite) !important;
    box-shadow: 0 0 0 3px rgba(255, 143, 192, 0.20) !important;
    outline: none !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #9d95b8 !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 purple. 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='%23c9a3d6'%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(--stm-card);
    color: var(--color-text-primary);
}
[data-theme="dark"] .stm-select-chevron { color: var(--stm-purple-lite); }


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

[data-theme="dark"] .stm-table thead th,
[data-theme="dark"] .table th,
[data-theme="dark"] .data-table th {
    background: var(--stm-card-hd) !important;
    color: var(--stm-pink-hi) !important;
    font-weight: 600 !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase;
    border-bottom: 1px solid var(--stm-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(--stm-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(255, 143, 192, 0.065) !important;
}
[data-theme="dark"] .stm-table tbody tr:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--stm-pink-lite) !important;
}
[data-theme="dark"] .stm-table tbody tr:hover td { color: var(--color-text-primary) !important; }

[data-theme="dark"] .stm-table .cell-primary { color: #f5f3fb !important; font-weight: 600; }
[data-theme="dark"] .stm-table td a          { color: var(--stm-purple-lite); }
[data-theme="dark"] .stm-table .table-empty  { color: #9d95b8 !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(--stm-pink-dim) !important;
    color: var(--stm-pink-hi) !important;
    border: 1px solid var(--stm-pink-line) !important;
}


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

[data-theme="dark"] .stm-pagination      { border-top-color: var(--stm-line) !important; }
[data-theme="dark"] .stm-pagination-info { color: #a89fc4 !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(139,58,142,0.32) !important;
    color: #ffffff !important;
}
[data-theme="dark"] .stm-pagination-btn.active {
    background: var(--stm-pink-dim) !important;
    border-color: var(--stm-pink-lite) !important;
    color: var(--stm-pink-hi) !important;
}
[data-theme="dark"] .stm-pagination-btn.disabled { color: #a49cbd !important; }


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

[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #9d43a0 0%, #8B3A8E 100%) !important;
    border-color: rgba(201,163,214,0.30) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.40), 0 4px 14px rgba(139,58,142,0.45) !important;
}
[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, #b34fb6 0%, #9d43a0 100%) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.40), 0 8px 22px rgba(139,58,142,0.58) !important;
}

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

[data-theme="dark"] .btn-ghost       { color: var(--stm-purple-lite) !important; }
[data-theme="dark"] .btn-ghost:hover { background: rgba(139,58,142,0.28) !important; color: #ffffff !important; }

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


/* -- 14. Badges & chips --------------------------------------------------- */
/* A badge must read as a CHIP, not as coloured text. On a dark card a 12%
   tint is a 1.1:1 fill — invisible, which is why the green "Confirmed" badge
   looked like floating green words. Fill goes to 24% and every badge gets a
   1px border at 60%, putting the outline at 2.1-3.4:1 against the card. */

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

/* "Active" is the live state -> pink */
[data-theme="dark"] .badge-active {
    background: var(--stm-pink-dim) !important;
    color: var(--stm-pink-hi) !important;
    border-color: var(--stm-pink-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(147,197,253,0.14) !important; color: #93c5fd !important; border-color: rgba(147,197,253,0.26) !important; }
[data-theme="dark"] .badge-priority-medium { background: rgba(147,197,253,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 pink badge. */
[data-theme="dark"] .badge-success   { background: rgba( 16,185,129,0.16) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .badge-warning   { background: rgba(245,158, 11,0.18) !important; color: #fcd34d !important; }
[data-theme="dark"] .badge-danger    { background: rgba(239, 68, 68,0.16) !important; color: #fca5a5 !important; }
[data-theme="dark"] .badge-primary   { background: rgba(139, 58,142,0.30) !important; color: var(--stm-purple-lite) !important; }
[data-theme="dark"] .badge-secondary { background: var(--stm-pink-dim)     !important; color: var(--stm-pink-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(8, 5, 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(--stm-card) !important;
    border: 1px solid var(--stm-line-strong) !important;
    box-shadow: var(--stm-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(--stm-card-hd) !important; }

[data-theme="dark"] .notification-item       { border-bottom-color: var(--stm-line-soft) !important; }
[data-theme="dark"] .notification-item:hover { background: rgba(139,58,142,0.22) !important; }
/* Unread = needs attention -> pink, with a pink rail */
[data-theme="dark"] .notification-item.unread {
    background: rgba(255,143,192,0.075) !important;
    box-shadow: inset 3px 0 0 var(--stm-pink-lite);
}
[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(--stm-line) !important; }

[data-theme="dark"] .stm-select-option:hover,
[data-theme="dark"] .stm-select-option.ss-focused { background: rgba(139,58,142,0.32) !important; color: #fff !important; }
[data-theme="dark"] .stm-select-option.selected {
    background: var(--stm-pink-dim) !important;
    color: var(--stm-pink-hi) !important;
}

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


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

[data-theme="dark"] .alert,
[data-theme="dark"] .stm-alert {
    background: var(--stm-raised) !important;
    border: 1px solid var(--stm-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(245,158, 11,0.14) !important; border-color: rgba(245,158, 11,0.38) !important; color: #fcd34d !important; }
[data-theme="dark"] .alert-info,    [data-theme="dark"] .stm-alert-info    { background: rgba(147,197,253,0.13) !important; border-color: rgba(147,197,253,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(245,158, 11,0.12) !important; border-left-color: #fcd34d !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(147,197,253,0.11) !important; border-left-color: var(--stm-purple-lite) !important; }


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

[data-theme="dark"] .svc-card       { background: var(--stm-card) !important; background-image: none !important; border: 1px solid var(--stm-line) !important; box-shadow: var(--stm-topgloss), var(--stm-lift-1) !important; }
[data-theme="dark"] .svc-card:hover { border-color: var(--stm-pink-line) !important; }
[data-theme="dark"] .svc-editor     { border-color: var(--stm-line-strong) !important; background: var(--stm-card) !important; }
/* The block you are working in gets the pink 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(--stm-pink-line) !important;
    box-shadow: var(--stm-topgloss), var(--stm-lift-2), inset 3px 0 0 var(--stm-pink-lite) !important;
}


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

[data-theme="dark"] .admin-hero {
    background: linear-gradient(115deg, #3a1d50 0%, #2d1943 50%, var(--stm-card) 100%) !important;
    border: 1px solid rgba(139,58,142,0.48) !important;
    box-shadow: var(--stm-topgloss), var(--stm-lift-2) !important;
}


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

[data-theme="dark"] ::-webkit-scrollbar             { width: 11px; height: 11px; }
[data-theme="dark"] ::-webkit-scrollbar-track       { background: var(--stm-page); }
[data-theme="dark"] ::-webkit-scrollbar-thumb       { background: #3d3358; border: 2px solid var(--stm-page); border-radius: 8px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--stm-pink-lite); }
[data-theme="dark"] * { scrollbar-color: #3d3358 var(--stm-page); }


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

[data-theme="dark"] ::selection { background: rgba(255,143,192,0.30); color: #ffffff; }


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

[data-theme="dark"] hr,
[data-theme="dark"] .divider,
[data-theme="dark"] .section-divider { border-color: var(--stm-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: #a89fc4 !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 purple #8B3A8E, which on a dark card
   reads as just another dark violet block — and it disagreed with the pink
   .fin-range-tab.active two cards below it. One selection colour, pink. */
[data-theme="dark"] .stm-range-pills { background: var(--stm-sunken) !important; border-color: var(--stm-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(--stm-pink-lite) !important;
    color: var(--stm-ink) !important;         /* 8.8:1 — dark ink on pink */
    box-shadow: 0 1px 6px rgba(255,143,192,0.34);
}

/* Department performance meter — the shared fill runs purple to DARKER purple,
   which disappears into the track on a dark surface. Run it to pink instead,
   so a longer bar is visibly a hotter bar. */
[data-theme="dark"] .db-kpi-dept-bar  { background: var(--stm-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(--stm-purple) 0%, #b34fb6 55%, var(--stm-pink-lite) 100%) !important; }

/* Sidebar logo plate. The STM mark has dark 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 warm off-white and ring
   it in pink 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(214,58,124,0.05)) !important;
    box-shadow: inset 0 -1px 0 var(--stm-line) !important;
}
[data-theme="dark"] .sidebar-logo-link {
    background: #f3eef7 !important;
    border: 1px solid rgba(255,143,192,0.45) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.34) !important;
}


/* -- 22. Brand purple used as TEXT -----------------------------------------
   --color-primary is #8B3A8E in BOTH themes (correct: it is the brand purple
   and it fills buttons and pills, where white sits on it at 6.9:1). But a
   dozen components also use it as a text colour, and #8B3A8E on a violet card
   is ~2.2: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 purple, 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(--stm-purple-lite) !important;
}
[data-theme="dark"] .bl-filter-tab.active { border-left-color: var(--stm-pink-lite) !important; }
[data-theme="dark"] .bl-applied-chip,
[data-theme="dark"] .file-chip { background: rgba(139,58,142,0.30) !important; }

/* View tabs (Current / Previous) — selected tab follows the pink rule */
[data-theme="dark"] .bl-view-tabs      { background: var(--stm-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(--stm-pink-dim) !important;
    color: var(--stm-pink-hi) !important;
    box-shadow: inset 0 0 0 1px var(--stm-pink-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:#8b3a8e" i],
[data-theme="dark"] [style^="color: #8b3a8e" i],
[data-theme="dark"] [style*=" color:#8b3a8e" i],
[data-theme="dark"] [style*=" color: #8b3a8e" i],
[data-theme="dark"] [style*=";color:#8b3a8e" i],
[data-theme="dark"] [style*=";color: #8b3a8e" i],
[data-theme="dark"] [style^="color:#6b21a8" i],
[data-theme="dark"] [style^="color: #6b21a8" i],
[data-theme="dark"] [style*=" color:#6b21a8" i],
[data-theme="dark"] [style*=" color: #6b21a8" i],
[data-theme="dark"] [style*=";color:#6b21a8" i],
[data-theme="dark"] [style*=";color: #6b21a8" i],
[data-theme="dark"] [style^="color:#7c3aed" i],
[data-theme="dark"] [style^="color: #7c3aed" i],
[data-theme="dark"] [style*=" color:#7c3aed" i],
[data-theme="dark"] [style*=" color: #7c3aed" i],
[data-theme="dark"] [style*=";color:#7c3aed" i],
[data-theme="dark"] [style*=";color: #7c3aed" i],
[data-theme="dark"] [style^="color:#8b5cf6" i],
[data-theme="dark"] [style^="color: #8b5cf6" i],
[data-theme="dark"] [style*=" color:#8b5cf6" i],
[data-theme="dark"] [style*=" color: #8b5cf6" i],
[data-theme="dark"] [style*=";color:#8b5cf6" i],
[data-theme="dark"] [style*=";color: #8b5cf6" i] {
    color: var(--stm-purple-lite) !important;
}

/* brand text — attention colour */
[data-theme="dark"] [style^="color:#db2777" i],
[data-theme="dark"] [style^="color: #db2777" i],
[data-theme="dark"] [style*=" color:#db2777" i],
[data-theme="dark"] [style*=" color: #db2777" i],
[data-theme="dark"] [style*=";color:#db2777" i],
[data-theme="dark"] [style*=";color: #db2777" i] {
    color: var(--stm-pink-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: #fcd34d !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:#f8f7fc" i],
[data-theme="dark"] [style*="background: #f8f7fc" i],
[data-theme="dark"] [style*="background-color:#f8f7fc" i],
[data-theme="dark"] [style*="background-color: #f8f7fc" i],
[data-theme="dark"] [style*="background:#f3f0f9" i],
[data-theme="dark"] [style*="background: #f3f0f9" i],
[data-theme="dark"] [style*="background-color:#f3f0f9" i],
[data-theme="dark"] [style*="background-color: #f3f0f9" i] {
    background-color: var(--stm-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] {
    background-color: rgba(147,197,253,0.14) !important;
    background-image: none !important;
}

/* brand pastels */
[data-theme="dark"] [style*="background:#ede9fe" i],
[data-theme="dark"] [style*="background: #ede9fe" i],
[data-theme="dark"] [style*="background-color:#ede9fe" i],
[data-theme="dark"] [style*="background-color: #ede9fe" i],
[data-theme="dark"] [style*="background:#f3e8ff" i],
[data-theme="dark"] [style*="background: #f3e8ff" i],
[data-theme="dark"] [style*="background-color:#f3e8ff" i],
[data-theme="dark"] [style*="background-color: #f3e8ff" i],
[data-theme="dark"] [style*="background:#faf5ff" i],
[data-theme="dark"] [style*="background: #faf5ff" i],
[data-theme="dark"] [style*="background-color:#faf5ff" i],
[data-theme="dark"] [style*="background-color: #faf5ff" i] {
    background-color: rgba(201,163,214,0.15) !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(245,158,11,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 purple for its selected state. Two problems in dark mode: #8B3A8E as
   TEXT on a card is 2.24:1, and side by side the controls disagreed about what
   "selected" looks like. This is the design rule applied consistently —
   selected is pink, 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(--stm-pink-hi) !important;
    border-bottom-color: var(--stm-pink-lite) !important;
    border-color: var(--stm-pink-line) !important;
}
[data-theme="dark"] .filter-pill.active,
[data-theme="dark"] .group-pill.active,
[data-theme="dark"] .bl-chip.selected {
    background: var(--stm-pink-dim) !important;
}
[data-theme="dark"] .fin-tab.active .fin-tab-count {
    background: var(--stm-pink-dim) !important;
    color: var(--stm-pink-hi) !important;
}
/* unselected tabs stay neutral, hover is purple */
[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 purple #8B3A8E — 2.24: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(--stm-card) !important;
    background-image: none !important;
    border: 1px solid var(--stm-line) !important;
    box-shadow: var(--stm-topgloss), var(--stm-lift-1) !important;
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] .kpi-card:hover {
    border-color: var(--stm-line-strong) !important;
    box-shadow: var(--stm-topgloss), var(--stm-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 = pink, cost = purple, result = semantic */
[data-theme="dark"] .kpi-value                     { color: #f5f3fb !important; }
[data-theme="dark"] .kpi-card.revenue    .kpi-value,
[data-theme="dark"] .kpi-card.net        .kpi-value { color: var(--stm-pink-hi) !important; }
[data-theme="dark"] .kpi-card.neutral    .kpi-value { color: var(--stm-purple-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(199,180,235,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(255,143,192,0.20) !important; color: var(--stm-pink-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 pink micro-caps as every other table */
[data-theme="dark"] .report-table thead th {
    background: var(--stm-card-hd) !important;
    color: var(--stm-pink-hi) !important;
    border-bottom: 1px solid var(--stm-line-strong) !important;
}
[data-theme="dark"] .report-table thead th.sortable a       { color: var(--stm-pink-hi) !important; opacity: 0.75; }
[data-theme="dark"] .report-table thead th.sortable a:hover { color: var(--stm-pink-hi) !important; opacity: 1; }
[data-theme="dark"] .report-table thead th.sort-active a    { color: var(--stm-pink-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(--stm-pink-hi) !important; }
[data-theme="dark"] .report-table tbody td      { border-bottom-color: var(--stm-line-soft) !important; }
[data-theme="dark"] .report-table tbody tr:hover{ background: rgba(255,143,192,0.065) !important; }
[data-theme="dark"] .report-table tbody td a    { color: var(--stm-purple-lite) !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(147,197,253,0.16) !important; color: #93c5fd !important; }
[data-theme="dark"] .status-badge.pending       { background: rgba(245,158, 11,0.18) !important; color: #fcd34d !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(--stm-purple-lite) !important;
    border-color: rgba(201,163,214,0.34) !important;
    background: transparent !important;
}
[data-theme="dark"] .btn-outline:hover { background: rgba(139,58,142,0.28) !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(--stm-raised-hi) !important; color: var(--color-text-label) !important; }


/* -- 26. Pages that carry their own un-themed CSS -------------------------
   A full sweep found three pages 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, purple tabs) and users.php (white-on-light-purple pill).
   These are ordinary dark-mode gaps, fixed here rather than in the shared PHP
   so a sync cannot reintroduce them.
   ------------------------------------------------------------------------- */

/* --- all_notifications.php --- */
[data-theme="dark"] .page-header-custom {
    background: var(--stm-card) !important;
    border: 1px solid var(--stm-line) !important;
    box-shadow: var(--stm-topgloss), var(--stm-lift-1) !important;
}
[data-theme="dark"] .page-header-custom h1 { color: var(--color-text-primary) !important; }
[data-theme="dark"] .notification-card {
    background: var(--stm-card) !important;
    border: 1px solid var(--stm-line) !important;
    box-shadow: var(--stm-topgloss), var(--stm-lift-1) !important;
}
[data-theme="dark"] .notification-card:hover {
    border-color: var(--stm-line-strong) !important;
    box-shadow: var(--stm-topgloss), var(--stm-lift-2) !important;
}
/* unread = needs attention = pink, same rule as the topbar dropdown */
[data-theme="dark"] .notification-card.unread {
    background: rgba(255,143,192,0.08) !important;
    border-left: 4px solid var(--stm-pink-lite) !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"] .btn-mark-read {
    background: var(--stm-raised) !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid var(--stm-line) !important;
}
[data-theme="dark"] .btn-mark-read:hover { background: var(--stm-raised-hi) !important; color: #ffffff !important; }
[data-theme="dark"] .empty-state i  { color: #443a63 !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(--stm-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(--stm-pink-hi) !important; border-bottom-color: var(--stm-pink-lite) !important; }
[data-theme="dark"] .lk-add-form {
    background: var(--stm-raised) !important;
    border: 1px solid var(--stm-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(--stm-line) !important; }
[data-theme="dark"] .up-role-btn:hover  { border-color: var(--stm-pink-line) !important; color: #ffffff !important; }
[data-theme="dark"] .up-role-btn.active {
    background: var(--stm-pink-lite) !important;
    border-color: var(--stm-pink-lite) !important;
    color: var(--stm-ink) !important;              /* dark ink on pink = 8.8:1 */
}
[data-theme="dark"] .up-role-btn.active .up-role-count { background: rgba(20,17,31,0.22) !important; }
[data-theme="dark"] .up-role-count      { background: rgba(255,255,255,0.10); }

/* --- 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(245,158, 11,0.14) !important; border-color: rgba(245,158,11,0.38) !important; color: #fcd34d !important; }
[data-theme="dark"] .session-message.info    { background: rgba(147,197,253,0.13) !important; border-color: rgba(147,197,253,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 — purple track filling to pink at the top end */
[data-theme="dark"] .progress-bar,
[data-theme="dark"] .kpi-bar-track,
[data-theme="dark"] .meter-track { background: var(--stm-sunken) !important; border: 1px solid var(--stm-line-soft); }
[data-theme="dark"] .progress-fill,
[data-theme="dark"] .kpi-bar-fill,
[data-theme="dark"] .meter-fill  { background: linear-gradient(90deg, var(--stm-purple) 0%, #b34fb6 60%, var(--stm-pink-lite) 100%) !important; }


/* -- 27. The four surface tokens that were never defined -------------------
   ROOT CAUSE, and the single biggest 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.

   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(--stm-card);
    --color-surface-2: var(--stm-card-hd);
    --color-bg-subtle: var(--stm-raised);
    --color-card-bg:   var(--stm-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(--stm-card) !important;
    border: 1px solid var(--stm-line-strong) !important;
    box-shadow: var(--stm-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(--stm-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(--stm-line) !important; background: var(--stm-card-hd) !important; }
[data-theme="dark"] .bl-filter-foot    { border-top-color: var(--stm-line) !important; background: var(--stm-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(--stm-raised) !important;
    border-color: var(--stm-line) !important;
    color: var(--color-text-label) !important;
}
[data-theme="dark"] .bl-chip:hover { background: var(--stm-raised-hi) !important; color: #ffffff !important; }

/* Dashboard "starting soon" rows + linked-booking inherit panel */
[data-theme="dark"] .ss-row        { background: var(--stm-raised) !important; border-color: var(--stm-line) !important; }
[data-theme="dark"] .ss-row-title  { color: var(--color-text-primary) !important; }
[data-theme="dark"] .ss-start      { color: #fcd34d !important; }
[data-theme="dark"] .lb-inherit    { background: var(--stm-raised) !important; border-color: var(--stm-line) !important; }
[data-theme="dark"] .lb-inherit span { color: var(--color-text-muted) !important; }
[data-theme="dark"] .lnk-comm-btn  { background: var(--stm-raised) !important; color: var(--color-text-secondary) !important; }
[data-theme="dark"] .lnk-comm-btn.active { background: var(--stm-purple) !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, #eef/#ede9fe 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(--stm-card-hd) !important;
    border-color: var(--stm-line) !important;
    color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .sst-form {
    background: var(--stm-raised) !important;
    border-color: var(--stm-line) !important;
}
[data-theme="dark"] .sst-badge {
    background: rgba(139,58,142,0.30) !important;
    color: var(--stm-purple-lite) !important;
}
[data-theme="dark"] .sst-edit-link     { color: var(--stm-purple-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.
   ------------------------------------------------------------------------- */

[data-theme="dark"] .tr-table thead th {
    background: var(--stm-card-hd) !important;
    color: var(--stm-pink-hi) !important;
    border-bottom-color: var(--stm-line-strong) !important;
}
[data-theme="dark"] .tr-table th,
[data-theme="dark"] .tr-table td            { border-bottom-color: var(--stm-line-soft) !important; }
[data-theme="dark"] .tr-table th:first-child,
[data-theme="dark"] .tr-table td:first-child { background: var(--stm-card) !important; }
[data-theme="dark"] .tr-table thead th:first-child { background: var(--stm-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(--stm-raised) !important; }
[data-theme="dark"] .tr-table thead th a:hover { color: var(--stm-pink-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(--stm-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(139, 58,142,0.32) !important; color: var(--stm-purple-lite) !important; }
[data-theme="dark"] .notification-icon.task    { background: rgba(147,197,253,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(139, 58,142,0.32) !important; color: var(--stm-purple-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(--stm-raised) !important;
    border-color: var(--stm-line) !important;
    box-shadow: var(--stm-topgloss), 0 1px 2px rgba(0,0,0,0.30) !important;
}
[data-theme="dark"] .fin-live-item  { border-right-color: var(--stm-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(--stm-raised) !important;
    border-color: var(--stm-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(--stm-pink-dim) !important;
    color: var(--stm-pink-hi) !important;
    border-color: var(--stm-pink-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(--stm-pink-hi) !important; }

/* Security dashboard tiles + the red "active tab" that was 3.66: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(--stm-card) !important;
    border: 1px solid var(--stm-line-strong) !important;
    box-shadow: var(--stm-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(--stm-sunken) !important;
    border-color: var(--stm-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(--stm-card) !important;
    border: 1px solid var(--stm-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(--stm-sunken) !important; }
[data-theme="dark"] .captcha-head i { color: var(--stm-pink-lite) !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 pair — --brand-primary #8b5cf6
       / --primary-500 — from before the app settled on #8B3A8E/#D63A7C. 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 3.4-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 purple; the fills keep the token.

   (b) White text on the brand gradient fails at the PINK end: #D63A7C gives
       4.42:1 (and a 20%-white chip over it, in the calendar header, only
       3.34:1). Dark mode nudges the gradient's end stop to #c72f6d — same hue,
       ~6% darker, white clears at 5.18:1. Light mode is untouched.
   ------------------------------------------------------------------------- */

[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(--stm-purple-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(--stm-pink-hi);
    background: var(--stm-pink-dim);
    border-color: var(--stm-pink-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(--stm-purple-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) the brand gradient, dark mode only */
[data-theme="dark"] {
    --color-accent-gradient: linear-gradient(135deg, #8B3A8E, #c72f6d);
}
[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, #8B3A8E 0%, #c72f6d 100%) !important;
}
/* a 20%-white chip on that gradient is still only 3.3:1 — darken the chip
   instead of the gradient so the header keeps its brand fill */
[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 — #8B3A8E is 2.2:1 on a dark
   card. Run the clip through the light twins instead. */
[data-theme="dark"] .brand-name {
    /* background-IMAGE, never the shorthand: the shorthand also resets
       background-clip to border-box, and with !important that beat the page's
       own -webkit-background-clip:text — which turned the wordmark into a solid
       gradient rectangle with invisible text. */
    background-image: linear-gradient(135deg, var(--stm-purple-lite), var(--stm-pink-lite)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* The same brand gradient also appears INLINE on a handful of call-to-action
   links (white label, 4.42:1 at the pink end). Both spellings are in use. */
[data-theme="dark"] [style*="linear-gradient(135deg, #8B3A8E, #D63A7C)" i],
[data-theme="dark"] [style*="linear-gradient(135deg,#8B3A8E,#D63A7C)" i] {
    background-image: linear-gradient(135deg, #8B3A8E, #c72f6d) !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(245,158,11,0.18) !important;
    color: #fcd34d !important;
    border-color: rgba(245,158,11,0.42) !important;
}

/* -- 34. Token lift after the full-coverage re-measure --------------------
   The sibling app needed its --color-text-muted and its lighter brand blue
   lifted here, because measuring TINTED surfaces (badge fills, calendar event
   chips, refunded service cards) rather than only the plain card put both just
   under AA. STM's equivalents were measured across the same tinted surfaces
   and do not need it:

     --color-text-muted #a49cbd   worst tinted 4.77:1   card 6.25:1
     --stm-purple-lite  #c9a3d6   worst tinted 5.72:1   card 7.51:1

   The section is kept so the two files stay numbered in step; see
   branding/STM-DARK.md and branding/check_dark_parity.php.
   ------------------------------------------------------------------------- */


/* -- 35. Status badges must read as CHIPS ---------------------------------
   The reported symptom: "the green status badge is barely visible". Measured,
   the TEXT was never the problem (8.9: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.13-1.20:1 fill: the pill shape disappears and the badge reads as loose
   coloured words, which is exactly what "washed out" describes.

   Two changes, applied to the tokens so every consumer benefits:
     fill   12% -> 24%   (fill-vs-card 1.19 -> 1.45-1.60)
     border none -> 60%  (border-vs-card 2.1-3.4 — 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; }

/* Brand colour as a table sort glyph, wherever the class appears outside the
   report table — same per-component treatment as section 22. */
[data-theme="dark"] .th-sort-icon,
[data-theme="dark"] .th-sort-icon.active { color: var(--stm-pink-hi) !important; }