/* ════════════════════════════════════════════════════════════════
   THEME-VARS.CSS — CSS variable definitions only.
   Loaded on all pages (including login) so data-theme persists visually.
   Holds the colour palette plus the shared type scale. Still no layout or
   form rules, so it stays safe to load anywhere.
   ════════════════════════════════════════════════════════════════ */

/* ── Default theme (Red / Dark Sidebar) ─────────────────────── */
:root {
    /* ── Type scale ──────────────────────────────────────────────
       Seven steps replacing the 27 distinct font-size values the app had
       grown (including half-pixel ones like 13.5px). Chosen to preserve the
       current density: --fs-md is the 14px body and --fs-base the 13px table
       cell, both of which keep their own step. --fs-xs is the readability
       floor - nothing renders below it any more.                          */
    --fs-xs:    11px;
    --fs-sm:    12px;
    --fs-base:  13px;
    --fs-md:    14px;
    --fs-lg:    15px;
    --fs-xl:    18px;
    --fs-2xl:   22px;

    /* -- Spacing ladder --------------------------------------------
       The 655 padding/margin/gap declarations used 34 different values;
       these 16 are what they were snapped onto. A strict 4px scale was
       measured and rejected: it would have moved 426 declarations, 253 of
       them by a full 2px (padding:10px -> 12px alone occurs 74 times), which
       reshapes every component rather than tidying anything.
       Reference for new rules -- existing declarations keep literal px, since
       "change every 10px at once" is almost never the edit you want.        */
    --sp-2:   2px;   --sp-4:   4px;   --sp-6:   6px;   --sp-8:   8px;
    --sp-10: 10px;   --sp-12: 12px;   --sp-14: 14px;   --sp-16: 16px;
    --sp-18: 18px;   --sp-20: 20px;   --sp-24: 24px;   --sp-28: 28px;
    --sp-32: 32px;   --sp-36: 36px;   --sp-40: 40px;   --sp-48: 48px;

    /* -- Control height ------------------------------------------------
       One height for the default tier so an input, its select2 sibling and
       the button beside it share a baseline. Measured before: 34 / 35 / 36.
       34px is Bootstrap's own .form-control height, which real inputs
       already had, so this moves the other two onto them rather than
       moving every form. --ctl-h-sm is the existing input-small tier.   */
    --ctl-h:    34px;
    --ctl-h-sm: 30px;

    --ui-bg:           #eef2f8;
    --ui-surface:      #ffffff;
    --ui-surface-alt:  #f8fafc;
    --ui-border:       #e5eaf2;
    --ui-text:         #1a1d2e;
    /* 4.63:1 on the page ground and 5.21:1 on a white card. The previous
       #6b7280 gave 4.30 on the page ground - every piece of secondary text
       in the default theme sat just under the 4.5 AA needs. */
    --ui-muted:        #666d7a;
    --ui-primary:      #e53935;
    --ui-primary-dark: #b71c1c;
    --ui-primary-soft: rgba(229, 57, 53, 0.10);
    --ui-success:      #10b981;
    --ui-warning:      #f59e0b;
    --ui-info:         #3b82f6;
    --ui-shadow-sm:    0 1px 3px rgba(0, 0, 0, .08);
    --ui-shadow-md:    0 4px 16px rgba(0, 0, 0, .10);
    --ui-shadow-lg:    0 12px 40px rgba(0, 0, 0, .14);
    --ui-radius:       12px;
    --ui-radius-sm:    10px;
    --sidebar-bg:      #18181b;
    --sidebar-text:           rgba(255, 255, 255, .65);
    --sidebar-text-hover:     #ffffff;
    --sidebar-active-bg:      rgba(229, 57, 53, .18);
    --sidebar-border:         rgba(255, 255, 255, .06);
    --sidebar-sub-bg:         rgba(255, 255, 255, .03);
    --input-bg:        #fafbff;
    --input-border:    #dce3ef;
    --btn-secondary-bg:     #2d3655;
    --btn-secondary-border: #1e2540;
    --btn-secondary-text:   #ffffff;
    --btn-secondary-hover:  #1e2540;
    --portlet-title-bg:     #f7f9fc;
    --portlet-title-border: #e2e8f2;
    --table-header-bg:      #edf2fa;
    --table-header-text:    #1a1d2e;
    --table-header-border:  #d6dde8;
    --table-row-hover:      #f5f8ff;
    --table-stripe:         #fafbfd;
    --table-border:         #e9eef6;
    --modal-header-bg:  #f8fafc;
    --modal-footer-bg:  #f8fafc;
    --dropdown-bg:      #ffffff;
    --dropdown-hover:   var(--ui-bg);
}

/* ── Green Dark ──────────────────────────────────────────────── */
[data-theme="light"] {
    --ui-bg:           #1d3326;
    --ui-surface:      #243d2e;
    --ui-surface-alt:  #2c4836;
    --ui-border:       #365440;
    --ui-text:         #aeecc4;
    --ui-muted:        #6ab882;
    --ui-primary:      #20aa52;
    --ui-primary-dark: #188040;
    --ui-primary-soft: rgba(32, 170, 82, .18);
    --ui-success:      #34d399;
    --ui-warning:      #fbbf24;
    --ui-info:         #60a5fa;
    --ui-shadow-sm:    0 1px 4px rgba(0, 0, 0, .28);
    --ui-shadow-md:    0 4px 18px rgba(0, 0, 0, .38);
    --sidebar-bg:             #162a1d;
    --sidebar-text:           rgba(160, 230, 190, .75);
    --sidebar-text-hover:     #ffffff;
    --sidebar-active-bg:      rgba(32, 170, 82, .22);
    --sidebar-border:         rgba(255, 255, 255, .06);
    --sidebar-sub-bg:         rgba(255, 255, 255, .03);
    --input-bg:               #243d2e;
    --input-border:           #365440;
    --btn-secondary-bg:       #2c4836;
    --btn-secondary-border:   #243d2e;
    --btn-secondary-text:     #aeecc4;
    --btn-secondary-hover:    #243d2e;
    --portlet-title-bg:       #2c4836;
    --portlet-title-border:   #365440;
    --table-header-bg:        #2c4836;
    --table-header-text:      #aeecc4;
    --table-header-border:    #365440;
    --table-row-hover:        #243d2e;
    --table-stripe:           #1d3326;
    --table-border:           #284e32;
    --modal-header-bg:        #243d2e;
    --modal-footer-bg:        #1d3326;
    --dropdown-bg:            #243d2e;
    --dropdown-hover:         #2c4836;
}

/* ── Red Dark ────────────────────────────────────────────────── */
[data-theme="dark"] {
    --ui-bg:           #1e2a48;
    --ui-surface:      #253454;
    --ui-surface-alt:  #2c3e62;
    --ui-border:       #384e70;
    --ui-text:         #d5e4f5;
    --ui-muted:        #8898b8;
    --ui-primary:      #e04848;
    --ui-primary-dark: #c03030;
    --ui-primary-soft: rgba(224, 72, 72, .18);
    --ui-success:      #34d399;
    --ui-warning:      #fbbf24;
    --ui-info:         #60a5fa;
    --ui-shadow-sm:    0 1px 4px rgba(0, 0, 0, .22);
    --ui-shadow-md:    0 4px 18px rgba(0, 0, 0, .32);
    --ui-shadow-lg:    0 12px 40px rgba(0, 0, 0, .44);
    --sidebar-bg:             #161e38;
    --sidebar-text:           rgba(190, 210, 250, .72);
    --sidebar-text-hover:     #e8f0ff;
    --sidebar-active-bg:      rgba(224, 72, 72, .22);
    --sidebar-border:         rgba(255, 255, 255, .07);
    --sidebar-sub-bg:         rgba(255, 255, 255, .04);
    --input-bg:               #253454;
    --input-border:           #384e70;
    --btn-secondary-bg:       #2c3e62;
    --btn-secondary-border:   #384e70;
    --btn-secondary-text:     #d5e4f5;
    --btn-secondary-hover:    #384e70;
    --portlet-title-bg:       #2c3e62;
    --portlet-title-border:   #384e70;
    --table-header-bg:        #2c3e62;
    --table-header-text:      #d5e4f5;
    --table-header-border:    #384e70;
    --table-row-hover:        #253454;
    --table-stripe:           #1e2a48;
    --table-border:           #2e4268;
    --modal-header-bg:        #2c3e62;
    --modal-footer-bg:        #1e2a48;
    --dropdown-bg:            #253454;
    --dropdown-hover:         #2c3e62;
}

/* ── Ocean Blue ──────────────────────────────────────────────── */
[data-theme="ocean"] {
    --ui-bg:           #ebf4ff;
    --ui-surface:      #ffffff;
    --ui-surface-alt:  #deeeff;
    --ui-border:       #9ecef7;
    --ui-text:         #0c2d4e;
    --ui-muted:        #3d6b8e;
    --ui-primary:      #0284c7;
    --ui-primary-dark: #0369a1;
    --ui-primary-soft: rgba(2, 132, 199, .10);
    --ui-success:      #059669;
    --ui-warning:      #d97706;
    --ui-info:         #7c3aed;
    --sidebar-bg:             #0c3a5c;
    --sidebar-text:           rgba(180, 220, 255, .70);
    --sidebar-text-hover:     #ffffff;
    --sidebar-active-bg:      rgba(2, 132, 199, .28);
    --sidebar-border:         rgba(255, 255, 255, .07);
    --sidebar-sub-bg:         rgba(255, 255, 255, .04);
    --input-bg:               #f0f8ff;
    --input-border:           #7dc4f0;
    --btn-secondary-bg:       #0c3a5c;
    --btn-secondary-border:   #083358;
    --btn-secondary-text:     #ffffff;
    --btn-secondary-hover:    #083358;
    --portlet-title-bg:       #d0eafb;
    --portlet-title-border:   #7dc4f0;
    --table-header-bg:        #8ec2ee;
    --table-header-text:      #0c3a5c;
    --table-header-border:    #4fa3e0;
    --table-row-hover:        #dbeffe;
    --table-stripe:           #eef6ff;
    --table-border:           #9ecef7;
    --modal-header-bg:        #dbeffe;
    --modal-footer-bg:        #dbeffe;
    --dropdown-bg:            #ffffff;
    --dropdown-hover:         #dbeffe;
}

/* ── Emerald ─────────────────────────────────────────────────── */
[data-theme="emerald"] {
    --ui-bg:           #ecfdf5;
    --ui-surface:      #ffffff;
    --ui-surface-alt:  #d1fae5;
    --ui-border:       #6ee7b7;
    --ui-text:         #064e3b;
    --ui-muted:        #2d7a5f;
    --ui-primary:      #059669;
    --ui-primary-dark: #047857;
    --ui-primary-soft: rgba(5, 150, 105, .10);
    --ui-success:      #10b981;
    --ui-warning:      #d97706;
    --ui-info:         #2563eb;
    --sidebar-bg:             #052e22;
    --sidebar-text:           rgba(167, 243, 208, .75);
    --sidebar-text-hover:     #ffffff;
    --sidebar-active-bg:      rgba(5, 150, 105, .28);
    --sidebar-border:         rgba(255, 255, 255, .06);
    --sidebar-sub-bg:         rgba(255, 255, 255, .03);
    --input-bg:               #f0fdf8;
    --input-border:           #6ee7b7;
    --btn-secondary-bg:       #065f46;
    --btn-secondary-border:   #052e22;
    --btn-secondary-text:     #ffffff;
    --btn-secondary-hover:    #052e22;
    --portlet-title-bg:       #c4f3dd;
    --portlet-title-border:   #6ee7b7;
    --table-header-bg:        #9de8c2;
    --table-header-text:      #064e3b;
    --table-header-border:    #34d399;
    --table-row-hover:        #d1fae5;
    --table-stripe:           #ecfdf5;
    --table-border:           #6ee7b7;
    --modal-header-bg:        #d1fae5;
    --modal-footer-bg:        #d1fae5;
    --dropdown-bg:            #ffffff;
    --dropdown-hover:         #d1fae5;
}

/* ── Blue Dark (Accessible) ──────────────────────────────────── */
[data-theme="accessible"] {
    --ui-bg:           #1a2e50;
    --ui-surface:      #22395e;
    --ui-surface-alt:  #2a446e;
    --ui-border:       #34507c;
    --ui-text:         #b0d8f2;
    --ui-muted:        #6098b8;
    --ui-primary:      #24a4d8;
    --ui-primary-dark: #1888b8;
    --ui-primary-soft: rgba(36, 164, 216, .18);
    --ui-success:      #34d399;
    --ui-warning:      #fbbf24;
    --ui-info:         #a78bfa;
    --ui-shadow-sm:    0 1px 4px rgba(0, 0, 0, .28);
    --ui-shadow-md:    0 4px 18px rgba(0, 0, 0, .38);
    --sidebar-bg:             #122038;
    --sidebar-text:           rgba(170, 218, 248, .75);
    --sidebar-text-hover:     #ffffff;
    --sidebar-active-bg:      rgba(36, 164, 216, .22);
    --sidebar-border:         rgba(255, 255, 255, .06);
    --sidebar-sub-bg:         rgba(255, 255, 255, .03);
    --input-bg:               #22395e;
    --input-border:           #34507c;
    --btn-secondary-bg:       #2a446e;
    --btn-secondary-border:   #34507c;
    --btn-secondary-text:     #b0d8f2;
    --btn-secondary-hover:    #34507c;
    --portlet-title-bg:       #2a446e;
    --portlet-title-border:   #34507c;
    --table-header-bg:        #2a446e;
    --table-header-text:      #b0d8f2;
    --table-header-border:    #34507c;
    --table-row-hover:        #22395e;
    --table-stripe:           #1a2e50;
    --table-border:           #284870;
    --modal-header-bg:        #22395e;
    --modal-footer-bg:        #1a2e50;
    --dropdown-bg:            #22395e;
    --dropdown-hover:         #2a446e;
}


/* ════════════════════════════════════════════════════════════════
   DARK-THEMES.CSS — Single source of truth for all dark theme overrides
   Loaded last so these rules always win.

   HOW TO ADD A NEW DARK THEME:
     1. Add CSS variable block to common.css
     2. Add the selector to the :is() list in the shared block below
     3. Done — all structural rules apply automatically.

   All values reference CSS custom properties — never hardcode hex here.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   CSS VARIABLE OVERRIDES — defined here (last file) so they always win
   ════════════════════════════════════════════════════════════════ */

/* ── Green Dark ──
   Base: near-black charcoal with micro green hint → emerald accent pops vividly
   Elevation: bg #111412 → surface #181d19 → surface-alt #1f2821 (each step ~5L up)
   Text: green-tinted off-white — harmonises with accent, softer than pure white
── */
[data-theme="light"] {
    --ui-bg:              #1a201a !important;
    --ui-surface:         #232e24 !important;
    --ui-surface-alt:     #2c3c2e !important;
    --ui-border:          #354840 !important;
    --ui-text:            #d8f2e0 !important;
    --ui-muted:           #6ea878 !important;
    --ui-primary:         #22c05c !important;
    --ui-primary-dark:    #189044 !important;
    --ui-primary-soft:    rgba(34, 192, 92, .18) !important;
    --sidebar-bg:         #151a15 !important;
    --sidebar-active-bg:  rgba(34, 192, 92, .22) !important;
    --input-bg:           #232e24 !important;
    --input-border:       #354840 !important;
    --portlet-title-bg:   #2c3c2e !important;
    --portlet-title-border: #354840 !important;
    --table-header-bg:    #2c3c2e !important;
    --table-header-text:  #d8f2e0 !important;
    --table-header-border: #354840 !important;
    --table-row-hover:    #232e24 !important;
    --table-stripe:       #1a201a !important;
    --table-border:       #2a3c2c !important;
    --modal-header-bg:    #232e24 !important;
    --modal-footer-bg:    #1a201a !important;
    --dropdown-bg:        #232e24 !important;
    --dropdown-hover:     #2c3c2e !important;
}

/* ── Red Dark ──
   Base: near-black with warm-violet undertone → red accent feels warm & bold
   Elevation: bg #131118 → surface #1c1928 → surface-alt #232135 (each step ~5L up)
   Text: warm off-white (violet-tinted) — reduces blue-light eye strain
── */
[data-theme="dark"] {
    --ui-bg:              #1c1828 !important;
    --ui-surface:         #262336 !important;
    --ui-surface-alt:     #302d48 !important;
    --ui-border:          #3d3a58 !important;
    --ui-text:            #e8e4f4 !important;
    --ui-muted:           #8880a8 !important;
    --ui-primary:         #e05252 !important;
    --ui-primary-dark:    #b83838 !important;
    --ui-primary-soft:    rgba(224, 82, 82, .18) !important;
    --sidebar-bg:         #16121e !important;
    --sidebar-active-bg:  rgba(224, 82, 82, .22) !important;
    --input-bg:           #262336 !important;
    --input-border:       #3d3a58 !important;
    --portlet-title-bg:   #302d48 !important;
    --portlet-title-border: #3d3a58 !important;
    --table-header-bg:    #302d48 !important;
    --table-header-text:  #e8e4f4 !important;
    --table-header-border: #3d3a58 !important;
    --table-row-hover:    #262336 !important;
    --table-stripe:       #1c1828 !important;
    --table-border:       #332f50 !important;
    --modal-header-bg:    #262336 !important;
    --modal-footer-bg:    #1c1828 !important;
    --dropdown-bg:        #262336 !important;
    --dropdown-hover:     #302d48 !important;
}

/* ── Blue Dark ──
   Base: near-black with minimal cool hint → steel-blue accent reads crisp & clear
   Elevation: bg #0f1117 → surface #171c2a → surface-alt #1d2336 (each step ~5L up)
   Text: cool off-white — complements blue accent naturally
── */
[data-theme="accessible"] {
    --ui-bg:              #181c2a !important;
    --ui-surface:         #202638 !important;
    --ui-surface-alt:     #272e4a !important;
    --ui-border:          #323a56 !important;
    --ui-text:            #cce2f8 !important;
    --ui-muted:           #5e88b0 !important;
    --ui-primary:         #2ab8e8 !important;
    --ui-primary-dark:    #1a94c0 !important;
    --ui-primary-soft:    rgba(42, 184, 232, .18) !important;
    --sidebar-bg:         #131620 !important;
    --sidebar-active-bg:  rgba(42, 184, 232, .22) !important;
    --input-bg:           #202638 !important;
    --input-border:       #323a56 !important;
    --portlet-title-bg:   #272e4a !important;
    --portlet-title-border: #323a56 !important;
    --table-header-bg:    #272e4a !important;
    --table-header-text:  #cce2f8 !important;
    --table-header-border: #323a56 !important;
    --table-row-hover:    #202638 !important;
    --table-stripe:       #181c2a !important;
    --table-border:       #2a3250 !important;
    --modal-header-bg:    #202638 !important;
    --modal-footer-bg:    #181c2a !important;
    --dropdown-bg:        #202638 !important;
    --dropdown-hover:     #272e4a !important;
}

/* ════════════════════════════════════════════════════════════════
   SHARED — applies to every dark theme via single :is() selector
   ════════════════════════════════════════════════════════════════ */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) body {
    background: var(--ui-bg) !important;
}

:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-content-wrapper,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-content {
    background: var(--ui-bg) !important;
    color: var(--ui-text) !important;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-sidebar {
    background: var(--sidebar-bg) !important;
    box-shadow: none !important;
    border-right: none !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-sidebar .page-sidebar-menu > li > a,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-sidebar .page-sidebar-menu > li.open > a {
    color: var(--sidebar-text) !important;
    border-left-color: transparent !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-sidebar .page-sidebar-menu > li > a > i { color: var(--sidebar-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-sidebar .page-sidebar-menu > li > a:hover,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-sidebar .page-sidebar-menu > li:hover > a {
    color: var(--sidebar-text-hover) !important;
    background: rgba(255,255,255,.06) !important;
    border-left-color: transparent !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-sidebar .page-sidebar-menu > li.active > a {
    background: var(--sidebar-active-bg) !important;
    color: #fff !important;
    border-left-color: var(--ui-primary) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-sidebar .page-sidebar-menu > li.active > a > i { color: #fff !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-sidebar .page-sidebar-menu .sub-menu {
    background: var(--sidebar-sub-bg) !important;
    border: none !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-sidebar .page-sidebar-menu .sub-menu > li > a { color: var(--sidebar-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-sidebar .page-sidebar-menu .sub-menu > li > a:hover,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-sidebar .page-sidebar-menu .sub-menu > li.active > a {
    color: var(--sidebar-text-hover) !important;
    background: rgba(255,255,255,.06) !important;
}

/* ── Header / Navbar ─────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-header.navbar {
    background: var(--sidebar-bg) !important;
    border-bottom: 2px solid var(--ui-primary) !important;
    box-shadow: none !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover {
    color: var(--sidebar-text-hover) !important;
}
/* default.css directly targets > i and > .username with lower-specificity rules
   that beat inherited color — override them explicitly */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle > i,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle > .username,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover > i,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-header.navbar .top-menu .navbar-nav > li.dropdown > .dropdown-toggle:hover > .username {
    color: var(--sidebar-text-hover) !important;
}

/* ── Breadcrumb / page-bar ───────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-bar {
    background: var(--ui-surface) !important;
    border-bottom: 1px solid var(--ui-border) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-bar .page-breadcrumb li a,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-bar .page-breadcrumb li { color: var(--ui-muted) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-bar .page-breadcrumb li.active { color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-bar .page-breadcrumb > li + li::before { color: var(--ui-muted) !important; }

/* ── Portlets ────────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet.light,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet.light.bordered {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet.light > .portlet-title {
    background: var(--portlet-title-bg) !important;
    border-bottom-color: var(--portlet-title-border) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-content .portlet.box > .portlet-title {
    background: var(--portlet-title-bg) !important;
    color: var(--ui-text) !important;
    /* The 2px --ui-primary accent from the base rule is what the header
       treatment is built on; overriding the colour here erased it in every
       theme but the default. */
}

:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet.box > .portlet-body,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet > .portlet-body { background: var(--ui-surface) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet .portlet-title .caption,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet .portlet-title .caption .caption-subject,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet .portlet-title .caption i { color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) div.portlet-body { background: var(--ui-surface-alt) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) div.portlet-body .table { background: transparent !important; }

/* ── Tables ──────────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .table {
    background: transparent !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .table > thead > tr > th,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) div.portlet-body .table thead tr th {
    background: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
    border-color: var(--table-header-border) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .table > tbody > tr > td,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .table > tfoot > tr > td,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) div.portlet-body .table tbody tr td {
    color: var(--ui-text) !important;
    border-color: var(--table-border) !important;
    background-color: transparent !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .table > tbody > tr:hover > td,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) div.portlet-body .table tbody tr:hover td { background: var(--table-row-hover) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .table-striped > tbody > tr:nth-of-type(odd) { background: var(--table-stripe) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) div.portlet-body .table tbody tr:nth-of-type(even) td { background: var(--ui-bg) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .group-row,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) td.group {
    background: linear-gradient(90deg, var(--ui-surface-alt), var(--ui-surface)) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) span.voucher-number { color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) td.RecordDate { color: var(--ui-muted) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .table-white-header,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .table-white-header caption { background-color: var(--ui-surface-alt) !important; }

/* ── Forms ───────────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .form-control,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) select.form-control,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) textarea.form-control,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) input.form-control {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--ui-text) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .form-control::placeholder { color: var(--ui-muted) !important; opacity: .7 !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .form-control:focus { background: var(--ui-surface) !important; border-color: var(--ui-primary) !important; }

/* Chrome/Edge autofill forces its own white background via an internal
   UA style that ignores background-color — must be beaten with the
   inset box-shadow trick (same technique already used on the login page). */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .form-control:-webkit-autofill,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .form-control:-webkit-autofill:hover,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
    -webkit-text-fill-color: var(--ui-text) !important;
    caret-color: var(--ui-text);
    border-color: var(--ui-primary) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Flight/region type selectors (e.g. booking wizard transfer table): plain
   <select class="btn arrival-destinationtype"> without .form-control, so the
   generic form-control rule above never reaches them and they stay browser-white. */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) select.arrival-destinationtype,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) select.departure-destinationtype {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--ui-text) !important;
}

:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) label,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .control-label { color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) p,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) span:not(.label):not(.badge) { color: var(--ui-text) !important; }

/* ── Select2 v3 dark mode ────────────────────────────────────── */
/* Closed single-select box */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-container .select2-choice {
    background: var(--input-bg) !important;
    background-image: none !important;
    border-color: var(--input-border) !important;
    color: var(--ui-text) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-container .select2-choice .select2-arrow {
    background: var(--input-bg) !important;
    border-left-color: var(--input-border) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-container .select2-choice .select2-arrow b {
    border-top-color: var(--ui-muted) !important;
}
/* The closed-box text itself (e.g. Price Search's Airport/Region toggle,
   the first live use of single-select2 on this page in a while) has its
   OWN hardcoded, non-theme-aware color set directly on `.select2-chosen`
   in common.css (`color: rgb(26,29,46) !important`, a dark-navy value only
   legible on a light background) — since it's declared on the element
   itself rather than inherited, the `color` set above on the parent
   `.select2-choice` never reaches it regardless of specificity. Matching
   selector chain + the `:is(...)` theme scope gives this enough
   specificity to override it. */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .form-control.select2-container:not(.select2-container-multi) .select2-choice .select2-chosen {
    color: var(--ui-text) !important;
}

/* Closed multi-select container — giving this box an OPAQUE background
   (unlike light mode, where it's transparent and the outer .form-control's
   own rounded corners show through) means its own border-radius now
   matters for the first time: it was 0 (never needed one before), so its
   square corners squared off the outer container's rounded ones on every
   multi-select field in dark mode (Room, Board, Currency, Region, etc. —
   same root cause as the Currency-corners bug found earlier for the
   disabled state specifically, just app-wide here since every dark-theme
   multi-select gets this opaque fill, not just disabled ones). */
html[data-theme="dark"] .select2-container-multi .select2-choices,
html[data-theme="light"] .select2-container-multi .select2-choices,
html[data-theme="accessible"] .select2-container-multi .select2-choices {
    background-color: var(--input-bg) !important;
    background-image: none !important;
    border-color: var(--input-border) !important;
    border-radius: 10px !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-container-multi .select2-choices .select2-search-field input {
    color: var(--ui-text) !important;
    background: transparent !important;
}
/* Selected tags inside multi-select */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-container-multi .select2-choices .select2-search-choice {
    background-color: var(--ui-surface-alt) !important;
    background-image: none !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-search-choice-close {
    filter: invert(0.7) !important;
}

/* Opened dropdown — appended to body but still descendant of html[data-theme] */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-drop {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.35) !important;
}
/* plugins.css has !important on background-color — use html[data-theme] for guaranteed higher specificity */
html[data-theme="dark"] .select2-drop .select2-search,
html[data-theme="light"] .select2-drop .select2-search,
html[data-theme="accessible"] .select2-drop .select2-search {
    background: var(--ui-surface) !important;
    border-bottom: 1px solid var(--ui-border) !important;
}
html[data-theme="dark"] .select2-search input,
html[data-theme="light"] .select2-search input,
html[data-theme="accessible"] .select2-search input {
    background-color: var(--input-bg) !important;
    background-image: none !important;
    border-color: var(--input-border) !important;
    color: var(--ui-text) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-results .select2-result-label {
    color: var(--ui-text) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-results li.select2-result-with-children > .select2-result-label {
    color: var(--ui-muted) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-results li.select2-highlighted {
    background: var(--sidebar-active-bg) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-results li.select2-highlighted .select2-result-label {
    color: var(--sidebar-text-hover) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-results li:not(.select2-highlighted):hover .select2-result-label {
    background: var(--ui-surface-alt) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-more-results,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-no-results,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-searching,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-selection-limit {
    background: var(--ui-surface-alt) !important;
    color: var(--ui-muted) !important;
}

/* common.css:662 hardcodes red border + white bg on active select2 — override per theme */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .form-control.select2-container-active,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .form-control.select2-container-multi.select2-container-active {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 2px rgba(128,128,128,.15) !important;
    background-color: var(--input-bg) !important;
}
/* Also fix the inner choices border when multi-select is active */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .select2-container-multi.select2-container-active .select2-choices {
    border-color: var(--ui-primary) !important;
    background-color: var(--input-bg) !important;
}

/* ── DataTables controls ─────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dataTables_wrapper .dataTables_length,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dataTables_wrapper .dataTables_filter {
    background: var(--ui-surface) !important;
    border-bottom-color: var(--ui-border) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dataTables_wrapper .dataTables_length select {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--ui-text) !important;
}
/* Search input handled separately below (per-theme block) — it needs its
   background SHORTHAND to also carry the embedded search-icon SVG from
   common.css; a flat `background: var(--input-bg)` here would erase that
   icon instead of just recoloring it. */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dataTables_wrapper .dataTables_filter input {
    border-color: var(--input-border) !important;
    color: var(--ui-text) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dataTables_wrapper .dataTables_paginate,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dataTables_wrapper .dataTables_info {
    background: var(--ui-surface) !important;
    border-top-color: var(--ui-border) !important;
    color: var(--ui-muted) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dataTables_wrapper .dataTables_paginate a.paginate_button {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dropdown-checkboxes li a:hover {
    background: var(--ui-surface-alt) !important;
    color: var(--ui-text) !important;
}

/* ── Pagination ──────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-content .pagination > li > a,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-content .pagination > li > span {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

/* ── Modal ───────────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .modal-content { background: var(--ui-surface) !important; color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .modal-header { background: var(--modal-header-bg) !important; border-bottom-color: var(--ui-border) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .modal-footer { background: var(--modal-footer-bg) !important; border-top-color: var(--ui-border) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .modal-title { color: var(--ui-text) !important; }

/* ── Dropdown menus ──────────────────────────────────────────── */
/* common.css:2604 has a later, hardcoded-white "glass" .dropdown-menu rule
   that otherwise wins by source order on every theme. ocean/emerald were
   previously missing from this list, so their dropdown menus (user menu,
   notifications, row actions, etc.) silently fell back to that white glass
   instead of each theme's own --dropdown-bg/--dropdown-hover tokens. */
:is([data-theme="dark"], [data-theme="light"], [data-theme="ocean"], [data-theme="emerald"], [data-theme="accessible"]) .dropdown-menu { background: var(--dropdown-bg) !important; border-color: var(--ui-border) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="ocean"], [data-theme="emerald"], [data-theme="accessible"]) .dropdown-menu > li > a { color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="ocean"], [data-theme="emerald"], [data-theme="accessible"]) .dropdown-menu > li > a:hover { background: var(--dropdown-hover) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="ocean"], [data-theme="emerald"], [data-theme="accessible"]) .bw-add-services-menu > li { color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="ocean"], [data-theme="emerald"], [data-theme="accessible"]) .bw-add-services-menu > li:hover { background: var(--dropdown-hover) !important; }

/* ── Nav tabs ────────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .nav-tabs:not(.process-tabs) > li > a {
    background: var(--ui-surface-alt) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-muted) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .nav-tabs:not(.process-tabs) > li.active > a,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .nav-tabs:not(.process-tabs) > li.active > a:hover,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .nav-tabs:not(.process-tabs) > li.active > a:focus {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-primary) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .nav-tabs:not(.process-tabs) > li > a:hover { background: var(--ui-surface) !important; }

/* ── Booking Wizard step icons: transparent anchor, no square bg ─────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .process-tabs > li > a,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .process-tabs > li > a:hover,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .process-tabs > li > a:focus,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .process-tabs > li.active > a,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .process-tabs > li.active > a:hover,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .process-tabs > li.active > a:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .tab-content { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; }
/* tabbable-custom form areas (add hotel/general/tour service popups) get a lighter lift */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .tabbable-custom .tab-content { background: var(--ui-surface-alt) !important; }
/* bw-section-header: page has no portlet wrapper so it sits on --ui-bg; use a
   white overlay to produce a clearly visible lifted card appearance */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .bw-section-header {
    background: rgba(255,255,255, 0.13) !important;
    border-color: rgba(255,255,255, 0.14) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .bw-section-title { color: var(--ui-text) !important; }

/* ── List group ──────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .list-group-item {
    background: var(--ui-surface-alt) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .list-group-item:hover,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .list-group-item:focus { background: var(--ui-surface) !important; }

/* ── Well / panel ────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .well,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .panel,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .panel-body {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

/* ── Dashboard stat widgets ──────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dashboard-stat,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dashboard-stat:hover {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

/* ── Feeds widget (Favorite Hotels) ─────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .feeds li {
    background-color: var(--ui-surface-alt) !important;
    border-bottom-color: var(--ui-border) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .feeds .desc a { color: var(--ui-muted) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .feeds .desc a:hover { color: var(--ui-primary) !important; }

/* ── Announcements ───────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .news-item {
    border-bottom-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .news-item:hover { background: var(--ui-surface-alt) !important; }

/* ── Buttons ─────────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .btn.red,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .btn.btn-danger,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .btn.btn-primary {
    background-color: var(--ui-primary) !important;
    background-image: linear-gradient(180deg, var(--ui-primary), var(--ui-primary-dark)) !important;
    border-color: var(--ui-primary-dark) !important;
    box-shadow: 0 2px 6px var(--ui-primary-soft) !important;
    color: #fff !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .btn.red:hover,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .btn.btn-danger:hover,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .btn.btn-primary:hover {
    background-color: var(--ui-primary-dark) !important;
    background-image: none !important;
}

/* ── Hotel search ────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .pricerow {
    background: var(--ui-surface-alt) !important;
    border-color: var(--ui-border) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.30) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .pricerow:hover { border-color: var(--ui-primary) !important; box-shadow: 0 4px 18px rgba(0,0,0,.45) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .rooms-row { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .rooms-row:hover { border-color: var(--ui-primary) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .rooms-row > span:not(.label) { color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .hotel-bestprice-body { background-color: var(--ui-surface-alt) !important; border-color: var(--ui-border) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .hotel-bestprice-body h4 { color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .hotel-transfer-badge { border-color: var(--ui-border) !important; color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .hotel-transfer-badge small { color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .hotel-allprice.collapse,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .hotel-allprice.collapse.in { background-color: var(--ui-surface-alt) !important; border-top-color: var(--ui-border) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .hotel-description-text,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .hotel-description-text a,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .hotel-description-text a:hover { color: var(--ui-muted) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .hotelwebsite { color: var(--ui-muted) !important; border-bottom-color: var(--ui-border) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .hotel-property li { background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .hotel-property li i { color: var(--ui-muted) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .price-header-caption { background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .hotel-picture { background: url("/Content/custom/images/hotel-default.jpg") center center / cover no-repeat !important; }

/* ── Reservation wizard ──────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) span.round-tabs { background: var(--ui-surface-alt) !important; box-shadow: 0 1px 4px rgba(0,0,0,.35) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) li.active span.round-tabs.one,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) li.active span.round-tabs.two,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) li.active span.round-tabs.three,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) li.active span.round-tabs.four,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) li.active span.round-tabs.five { background: var(--ui-surface-alt) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .tab-content .head { color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .btn-outline-rounded { background: var(--ui-surface-alt) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .btn-outline-rounded:hover { border-color: var(--ui-primary) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .box-title small { color: var(--ui-muted) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) #btnBWNext {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-dark)) !important;
    box-shadow: 0 2px 10px var(--ui-primary-soft) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) #btnBWNext:hover { background: var(--ui-primary-dark) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) #btnBackToPriceSearch { background: var(--ui-surface-alt) !important; border-color: var(--ui-border) !important; color: var(--ui-muted) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) #btnBackToPriceSearch:hover { border-color: var(--ui-primary) !important; color: var(--ui-text) !important; }

/* ── Booking Wizard service cards (sit on --ui-bg, need clear elevation) ─ */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .customer-process .panel.panel-default {
    background: var(--ui-surface-alt) !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.28) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .customer-process .panel-heading {
    background: var(--ui-surface) !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
    color: var(--ui-text) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .customer-process .panel-body {
    background: var(--ui-surface-alt) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .customer-process .panel-footer {
    background: var(--ui-surface) !important;
    border-top-color: rgba(255,255,255,.08) !important;
}

/* ── Customer information ─────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) div.customer-information,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .customer-information { background: var(--ui-surface-alt) !important; border-color: var(--ui-border) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .customer-information label { color: var(--ui-muted) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .customer-information .form-control,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .customer-information select.form-control { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--ui-text) !important; }

/* ── Flight selector ─────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .selected-flights,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .flight-area { background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .flight-area .portlet { background-color: transparent !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .arrival-selected-flight .caption-subject,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .departure-selected-flight .caption-subject,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .arrival-selected-flight i,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .departure-selected-flight i,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .arrival-selected-flight .caption-helper,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .departure-selected-flight .caption-helper { color: var(--ui-muted) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .selected-flights span.Price { color: var(--ui-primary) !important; }

/* ── File widget ─────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) div.file-item { background: var(--ui-surface-alt) !important; border-color: var(--ui-border) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) div.file-item:hover { box-shadow: 0 4px 14px rgba(0,0,0,.35) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) div.file-name a { color: var(--ui-muted) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) div.file-name a:hover { color: var(--ui-primary) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) div.file-not-read img { background-color: var(--ui-surface) !important; }

/* ── Stop-freesale color cells ───────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) #tblstopfreesale tbody tr td[style*="#D51C1C"] { background-color: rgba(220,60,60,.30) !important; color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) #tblstopfreesale tbody tr td[style*="#1421D8"] { background-color: rgba(56,100,245,.30) !important; color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) #tblstopfreesale tbody tr td[style*="#838384"] { background-color: rgba(140,140,140,.25) !important; color: var(--ui-text) !important; }

/* ── Login ───────────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) body.login {
    background: linear-gradient(160deg, var(--ui-bg) 0%, var(--ui-surface) 50%, var(--ui-bg) 100%) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .login .content {
    background: var(--ui-surface) !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 0 0 1px var(--ui-primary-soft), 0 24px 64px rgba(0,0,0,.50) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .login .content h3,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .login .content h4,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .login .content p,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .login .content .form-title { color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .login .content .input-icon .form-control,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .login .content select.form-control { background: var(--input-bg) !important; color: var(--ui-text) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .login .content .form-actions .btn,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .login .content .form-actions .btn.blue,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .login .content .btn-block,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .user-login-5 .login-container .form-actions .btn,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .user-login-5 .login-container .btn-block {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-dark)) !important;
    box-shadow: 0 4px 18px var(--ui-primary-soft) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .login .copyright,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) footer.copyright,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .login .footer { color: var(--ui-muted) !important; }

/* ── Reservation monitor ─────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet.box.purple-intense,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) #divReservationInfoPortletBox,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) #divCustomerInfoPortletBox { border-color: var(--ui-border) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet.box.purple-intense > .portlet-body { background: var(--ui-surface-alt) !important; }
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet.box.purple-intense label { color: var(--ui-muted) !important; }

/* ════════════════════════════════════════════════════════════════
   PER-THEME — rules that differ between dark themes
   ════════════════════════════════════════════════════════════════ */

/* ── Red-Black Dark: announcement icon cells ─────────────────── */
[data-theme="dark"] td.announce-1 { background-color: rgba(240,80,80,.18) !important; color: #fca5a5 !important; }
[data-theme="dark"] td.announce-2 { background-color: rgba(251,191,36,.14) !important; color: #fde68a !important; }
[data-theme="dark"] td.announce-3 { background-color: rgba(240,80,80,.10) !important; color: #fca5a5 !important; }
[data-theme="dark"] td.announce-4 { background-color: rgba(251,191,36,.07) !important; color: var(--ui-muted) !important; }
[data-theme="dark"] td.announce-5 { background-color: var(--ui-surface-alt) !important; color: var(--ui-muted) !important; }

/* ── Green Dark: announcement icon cells ─────────────────────── */
[data-theme="light"] td.announce-1 { background-color: rgba(34,197,94,.15) !important; color: #bbf7d0 !important; }
[data-theme="light"] td.announce-2 { background-color: rgba(251,191,36,.12) !important; color: #fde68a !important; }
[data-theme="light"] td.announce-3 { background-color: rgba(34,197,94,.08) !important; color: #bbf7d0 !important; }
[data-theme="light"] td.announce-4 { background-color: rgba(251,191,36,.06) !important; color: var(--ui-muted) !important; }
[data-theme="light"] td.announce-5 { background-color: var(--ui-surface-alt) !important; color: var(--ui-muted) !important; }

/* ── Blue Dark: announcement icon cells ──────────────────────── */
[data-theme="accessible"] td.announce-1 { background-color: rgba(56,189,248,.15) !important; color: #bae6fd !important; }
[data-theme="accessible"] td.announce-2 { background-color: rgba(251,191,36,.12) !important; color: #fde68a !important; }
[data-theme="accessible"] td.announce-3 { background-color: rgba(56,189,248,.08) !important; color: #bae6fd !important; }
[data-theme="accessible"] td.announce-4 { background-color: rgba(251,191,36,.06) !important; color: var(--ui-muted) !important; }
[data-theme="accessible"] td.announce-5 { background-color: var(--ui-surface-alt) !important; color: var(--ui-muted) !important; }

/* ── Blue Dark: colorblind-safe semantic button colors ───────── */
[data-theme="accessible"] .btn.green,
[data-theme="accessible"] .btn.btn-success {
    background-color: #e69f00 !important;
    background-image: none !important;
    border-color: #c87d00 !important;
    box-shadow: 0 2px 6px rgba(230,159,0,.32) !important;
}
[data-theme="accessible"] .btn.green:hover,
[data-theme="accessible"] .btn.btn-success:hover { background-color: #c87d00 !important; }
[data-theme="accessible"] .btn.blue,
[data-theme="accessible"] .btn.btn-info {
    background-color: #0072b2 !important;
    background-image: none !important;
    border-color: #005b8e !important;
    box-shadow: 0 2px 6px rgba(0,114,178,.32) !important;
}

/* ── Login 2: per-theme .user-login-5 background gradient ───── */
/* Note: login-themes.css overrides these with html[data-theme] (higher specificity).
   Kept here for completeness / fallback. */
[data-theme="dark"] .user-login-5 {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(224, 82, 82, .20) 0%, transparent 42%),
        radial-gradient(ellipse at 90% 80%, rgba(136, 128, 168, .12) 0%, transparent 40%),
        linear-gradient(160deg, #1c1828 0%, #262336 50%, #1c1828 100%) !important;
}
[data-theme="light"] .user-login-5 {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(34, 192, 92, .18) 0%, transparent 42%),
        radial-gradient(ellipse at 90% 80%, rgba(34, 192, 92, .10) 0%, transparent 40%),
        linear-gradient(160deg, #1a201a 0%, #232e24 50%, #1a201a 100%) !important;
}
[data-theme="accessible"] .user-login-5 {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(42, 184, 232, .18) 0%, transparent 42%),
        radial-gradient(ellipse at 90% 80%, rgba(42, 184, 232, .10) 0%, transparent 40%),
        linear-gradient(160deg, #181c2a 0%, #202638 50%, #181c2a 100%) !important;
}

/* ── Stop-freesale: gray legend badge ───────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet-body .progress .progress-bar[style*="gray"] {
    background-color: #5a6a82 !important;
    color: #e0eaf8 !important;
}

/* ── Stop-freesale: row tinting (overrides light-mode base colors) */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"])
    #tblstopfreesale tbody tr:has(td[style*="#D51C1C"]):not(:has(td[style*="#1421D8"])):not(:has(td[style*="#838384"]))
    td:not([style*="#D51C1C"]):not([style*="#1421D8"]):not([style*="#838384"]) {
    background-color: rgba(220,60,60,.18) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"])
    #tblstopfreesale tbody tr:has(td[style*="background-color:"]:not([style*="#"]))
    td:not([style*="background-color:"]) {
    background-color: rgba(220,60,60,.18) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"])
    #tblstopfreesale tbody tr:has(td[style*="#1421D8"])
    td:not([style*="#D51C1C"]):not([style*="#1421D8"]):not([style*="#838384"]) {
    background-color: rgba(56,100,245,.18) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"])
    #tblstopfreesale tbody tr:has(td[style*="#838384"]):not(:has(td[style*="#1421D8"])):not(:has(td[style*="#D51C1C"]))
    td:not([style*="#D51C1C"]):not([style*="#1421D8"]):not([style*="#838384"]) {
    background-color: rgba(56,100,245,.12) !important;
}

/* ── DataTable row-details expand/collapse icon ──────────────────────────
   The PNG sprite (datatable-row-openclose.png) is a dark icon on a transparent
   background — invisible on dark table rows. Invert it to white. */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dataTable .row-details {
    filter: invert(1) !important;
}

/* ── DataTable row: override white default from jquery.dataTables.css ────
   That file sets `table.dataTable tbody tr { background-color: white }` on
   the TR element. Our existing td-level transparent rule doesn't reach it.
   Transparent rows inherit the portlet-body surface; odd/stripe get a shade.
───────────────────────────────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) table.dataTable tbody tr {
    background-color: transparent !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) table.dataTable.stripe tbody tr.odd,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) table.dataTable.display tbody tr.odd {
    background-color: var(--table-stripe) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) table.dataTable.hover tbody tr:hover,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) table.dataTable.display tbody tr:hover {
    background-color: var(--table-row-hover) !important;
}
/* FixedColumns cloned table rows */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) table.DTFC_Cloned tr.even,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) table.DTFC_Cloned tr.odd {
    background-color: transparent !important;
}

/* ── Bootstrap panel-footer (Only Transfer passenger form) ───────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .panel-footer {
    background: var(--ui-surface) !important;
    border-top-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

/* ── Price Search: beat hotelsearch.css !important white backgrounds ─────
   hotelsearch.css is rendered inside @RenderBody() (body), so it comes after
   dark-themes.css (head). We gain specificity via the [data-theme] attribute
   prefix: 0,5,0,0 vs hotelsearch's 0,4,0,0 — wins regardless of load order.
───────────────────────────────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet-body .row.advancedSearch:not(.collapse),
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet-body .row.collapse.in.advancedSearch {
    background: var(--ui-surface-alt) !important;
    border-color: var(--ui-border) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
}

:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .portlet-body .row:has(.calculatetransfer) {
    background: var(--ui-surface-alt) !important;
    border-color: var(--ui-border) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
}

/* .search-main-criteria-wrap has background:#ffffff hardcoded in hotelsearch.css —
   no [data-theme] prefix existed for it, so it stayed white in dark themes. */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .search-main-criteria-wrap {
    background: var(--ui-surface-alt) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.25) !important;
}

/* ── Alerts: replace hardcoded dark text with readable theme-aware colors ──
   common.css uses colors like #065f46/#7f1d1d that are invisible on dark bgs.
   Keep the semantic hue but use the token palette so they're legible.
───────────────────────────────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-content .alert.alert-success {
    background: rgba(52, 211, 153, .10) !important;
    border-color: rgba(52, 211, 153, .25) !important;
    color: var(--ui-success) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-content .alert.alert-danger {
    background: rgba(240, 96, 96, .10) !important;
    border-color: rgba(240, 96, 96, .25) !important;
    color: var(--ui-primary) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-content .alert.alert-info {
    background: rgba(96, 165, 250, .10) !important;
    border-color: rgba(96, 165, 250, .25) !important;
    color: var(--ui-info) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-content .alert.alert-warning {
    background: rgba(251, 191, 36, .10) !important;
    border-color: rgba(251, 191, 36, .25) !important;
    color: var(--ui-warning) !important;
}

/* ── Input group addon: override light gray surface ──────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .input-group .input-group-addon {
    background: var(--ui-surface-alt) !important;
    color: var(--ui-muted) !important;
    border-color: var(--ui-border) !important;
}

/* ── DataTable pagination: hover and disabled states ─────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dataTables_wrapper .dataTables_paginate a.paginate_button:hover,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--ui-surface-alt) !important;
    border-color: var(--ui-primary) !important;
    color: var(--ui-primary) !important;
    box-shadow: none !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover {
    background: var(--ui-surface) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-muted) !important;
    box-shadow: none !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--ui-muted) !important;
}

/* ── Timeline (reservation history) ─────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .timeline .timeline-icon {
    background-color: var(--ui-surface-alt) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .timeline .timeline-body {
    background-color: var(--ui-surface-alt) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .timeline .timeline-body-arrow {
    border-right-color: var(--ui-surface-alt) !important;
    border-color: transparent var(--ui-surface-alt) transparent transparent !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .timeline:before {
    background: var(--ui-border) !important;
}

/* ── Progress bar track ──────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-content .progress {
    background: var(--ui-surface-alt) !important;
}

/* ── Daily rate table row backgrounds ────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) table.tbldailyrate > tbody > tr:nth-child(odd) {
    background-color: var(--table-stripe) !important;
}
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) table.tbldailyratedetails > tbody > tr {
    background-color: var(--ui-surface-alt) !important;
}

/* ── Datepicker: no-flight disabled dates ────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .datepicker .noFlight.disabled,
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .datepicker .noFlight.disabled:hover {
    background-color: var(--ui-surface-alt) !important;
    color: var(--ui-muted) !important;
}

/* ── Popover title ───────────────────────────────────────────────────── */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .page-content .popover-title {
    background: var(--ui-surface-alt) !important;
    color: var(--ui-text) !important;
}

/* ── Stop-freesale: reset CSS var overrides that hardcode white stripe ──
   stopfreesale.css intentionally sets --table-stripe:#ffffff for light mode;
   in dark mode we restore the theme token so rows don't flash white.
───────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] #tblstopfreesale_wrapper   { --table-stripe: transparent; --table-row-hover: rgba(255,255,255,.04); }
[data-theme="light"] #tblstopfreesale_wrapper  { --table-stripe: transparent; --table-row-hover: rgba(255,255,255,.04); }
[data-theme="accessible"] #tblstopfreesale_wrapper { --table-stripe: transparent; --table-row-hover: rgba(255,255,255,.04); }
[data-theme="emerald"] .page-content .portlet.box.blue-hoki > .portlet-title .caption,
[data-theme="emerald"] .page-content .portlet.box.blue-hoki > .portlet-title .caption i,
[data-theme="emerald"] .page-content .portlet.box.blue-steel > .portlet-title .caption,
[data-theme="emerald"] .page-content .portlet.box.blue-steel > .portlet-title .caption i,
[data-theme="emerald"] .page-content .portlet.box.red-sunglo > .portlet-title .caption,
[data-theme="emerald"] .page-content .portlet.box.red-sunglo > .portlet-title .caption i,
[data-theme="emerald"] .page-content .portlet.box.green-meadow > .portlet-title .caption,
[data-theme="emerald"] .page-content .portlet.box.green-meadow > .portlet-title .caption i,
[data-theme="emerald"] .page-content .portlet.box.purple-intense > .portlet-title .caption,
[data-theme="emerald"] .page-content .portlet.box.purple-intense > .portlet-title .caption i,
[data-theme="emerald"] .page-content .portlet.box.red-thunderbird > .portlet-title .caption,
[data-theme="emerald"] .page-content .portlet.box.red-thunderbird > .portlet-title .caption i,
[data-theme="emerald"] .page-content .portlet.box.yellow-casablanca > .portlet-title .caption,
[data-theme="emerald"] .page-content .portlet.box.yellow-casablanca > .portlet-title .caption i,
[data-theme="emerald"] .page-content .portlet.box.blue-chambray > .portlet-title .caption,
[data-theme="emerald"] .page-content .portlet.box.blue-chambray > .portlet-title .caption i {
    color: #fff !important;
}

/* ── Subtle page backgrounds for light themes ──────────────────────────── */
html:not([data-theme]) .page-content-wrapper,
html:not([data-theme]) .page-content {
    background: linear-gradient(160deg, #f5f0f8 0%, #eef2f8 40%, #f0f4fb 100%) !important;
}
[data-theme="ocean"] .page-content-wrapper,
[data-theme="ocean"] .page-content {
    background: linear-gradient(160deg, #dbeffe 0%, #ebf4ff 40%, #e4f6ff 100%) !important;
}
[data-theme="emerald"] .page-content-wrapper,
[data-theme="emerald"] .page-content {
    background: linear-gradient(160deg, #d1fae5 0%, #ecfdf5 40%, #e8fdf2 100%) !important;
}

/* ── Default/Red Light: header fix ────────────────────────────────────────
   common.css glassmorphism hardcodes rgba(26,32,50,0.88) for .page-header.navbar
   with no theme selector. Dark themes have [data-theme="X"] overrides in
   dark-themes.css (lines 164-169). This restores the default theme's header
   to match its sidebar-bg (#18181b) instead of showing mismatched dark-navy.
──────────────────────────────────────────────────────────────────────────── */
html:not([data-theme]) .page-header.navbar {
    background: var(--sidebar-bg) !important;
    border-bottom: 2px solid var(--ui-primary) !important;
    box-shadow: none !important;
}

/* ── Hotel Extras / Supplements modal table header ────────────────────────
   Reuses the exact same per-theme gradients as the colored portlet headers
   above so this table's header matches every other header in the app.
──────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] .hotel-extra-table thead tr,
[data-theme="light"] .hotel-extra-table thead tr,
[data-theme="accessible"] .hotel-extra-table thead tr {
    border-bottom: 1px solid rgba(224, 82, 82, .35) !important;
}
[data-theme="dark"] .hotel-extra-table thead tr {
    background: linear-gradient(135deg, #1c1828 0%, #aa3050 100%) !important;
}
[data-theme="light"] .hotel-extra-table thead tr {
    background: linear-gradient(135deg, #1a201a 0%, #1eaa5e 100%) !important;
}
[data-theme="accessible"] .hotel-extra-table thead tr {
    background: linear-gradient(135deg, #181c2a 0%, #1a88c4 100%) !important;
}
html:not([data-theme]) .hotel-extra-table thead tr {
    background: linear-gradient(135deg, #9b1c1c 0%, #e53935 60%, #ef5350 100%) !important;
}
[data-theme="ocean"] .hotel-extra-table thead tr {
    background: linear-gradient(135deg, #0c3a6a 0%, #0369a1 55%, #0ea5e9 100%) !important;
}
[data-theme="emerald"] .hotel-extra-table thead tr {
    background: linear-gradient(135deg, #064e3b 0%, #059669 55%, #10b981 100%) !important;
}
/* Needs to out-specify the generic `.table > thead > tr > th` rule above
   (which sets an opaque solid background on every TH, hiding the TR gradient
   underneath) — hence the doubled-up `.hotel-extra-table.table` + full
   thead>tr>th chain instead of the shorter `.hotel-extra-table thead th`. */
[data-theme="dark"] .hotel-extra-table.table thead tr th,
[data-theme="light"] .hotel-extra-table.table thead tr th,
[data-theme="accessible"] .hotel-extra-table.table thead tr th,
[data-theme="ocean"] .hotel-extra-table.table thead tr th,
[data-theme="emerald"] .hotel-extra-table.table thead tr th,
html:not([data-theme]) .hotel-extra-table.table thead tr th {
    background: transparent !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* Mandatory-extra highlighted rows: the pale pink/dark-maroon combo
   (`.highlight-red`, set inline in _GetServiceHotelExtra.cshtml) is only
   readable on a light page. In dark themes the generic dark-theme table-cell
   rule forces `color: var(--ui-text)` (near-white) onto the <td> directly,
   landing on top of the still-visible light-pink <tr> background — white text
   on light red. Give these rows their own dark-red background + light-pink
   text in dark themes instead. */
:is([data-theme="dark"], [data-theme="light"], [data-theme="accessible"]) .hotel-extra-table tr.highlight-red > td {
    background-color: #5c1a1a !important;
    color: #ffb4b4 !important;
}

/* ── See Others table: DataTables search input icon, recolored per dark theme ──
   common.css embeds a fixed grey (#9ca3af) magnifying-glass SVG as the input's
   background-image. The generic dark-theme rule above flattens `background` to
   `var(--input-bg)` for legibility, which also erases that SVG. Re-add the same
   icon here with each theme's own muted colour baked into the SVG string. ── */
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
    background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238880a8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat left 11px center !important;
    background-size: 15px !important;
}
[data-theme="light"] .dataTables_wrapper .dataTables_filter input {
    background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ea878' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat left 11px center !important;
    background-size: 15px !important;
}
[data-theme="accessible"] .dataTables_wrapper .dataTables_filter input {
    background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e88b0' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat left 11px center !important;
    background-size: 15px !important;
}

/* ════════════════════════════════════════════════════════════════
   LOGIN-THEMES.CSS — Per-theme backgrounds for the login page.
   Loaded only on _EmptyLayout pages via a direct link (no bundle).
   ════════════════════════════════════════════════════════════════ */

/* Default / Red — light, matches light dashboard */
html:not([data-theme]) body.login {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(229,57,53,.10) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, rgba(59,130,246,.07) 0%, transparent 50%),
        linear-gradient(160deg, #f0f4fb 0%, #eef2f8 50%, #e8eef8 100%) !important;
}
html:not([data-theme]) .login .copyright,
html:not([data-theme]) footer.copyright,
html:not([data-theme]) .login .footer { color: rgba(10,30,60,.50) !important; }

/* Red Dark — matches dark-themes.css palette */
html[data-theme="dark"] body.login {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(224, 82, 82, .18) 0%, transparent 42%),
        radial-gradient(ellipse at 85% 80%, rgba(136, 128, 168, .12) 0%, transparent 40%),
        linear-gradient(160deg, #131118 0%, #1c1928 50%, #131118 100%) !important;
}

/* Green Dark — matches dark-themes.css palette */
html[data-theme="light"] body.login {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(34, 192, 92, .18) 0%, transparent 42%),
        radial-gradient(ellipse at 85% 80%, rgba(34, 192, 92, .10) 0%, transparent 40%),
        linear-gradient(160deg, #111412 0%, #181d19 50%, #111412 100%) !important;
}

/* Ocean — light blue */
html[data-theme="ocean"] body.login {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(2,132,199,.12) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, rgba(124,58,237,.08) 0%, transparent 50%),
        linear-gradient(160deg, #deeeff 0%, #ebf4ff 50%, #dbeffe 100%) !important;
}
html[data-theme="ocean"] .login .copyright,
html[data-theme="ocean"] footer.copyright,
html[data-theme="ocean"] .login .footer { color: rgba(10,30,60,.50) !important; }

/* Emerald — light green */
html[data-theme="emerald"] body.login {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(5,150,105,.12) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%, rgba(37,99,235,.08) 0%, transparent 50%),
        linear-gradient(160deg, #d1fae5 0%, #ecfdf5 50%, #d1fae5 100%) !important;
}
html[data-theme="emerald"] .login .copyright,
html[data-theme="emerald"] footer.copyright,
html[data-theme="emerald"] .login .footer { color: rgba(5,40,20,.50) !important; }

/* Blue Dark — matches dark-themes.css palette */
html[data-theme="accessible"] body.login {
    background:
        radial-gradient(ellipse at 15% 20%, rgba(42, 184, 232, .18) 0%, transparent 42%),
        radial-gradient(ellipse at 85% 80%, rgba(42, 184, 232, .10) 0%, transparent 40%),
        linear-gradient(160deg, #0f1117 0%, #171c2a 50%, #0f1117 100%) !important;
}

/* Dark card + inputs for dark themes */
html[data-theme="dark"] .login .content,
html[data-theme="light"] .login .content,
html[data-theme="accessible"] .login .content {
    background: var(--ui-surface) !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 0 0 1px var(--ui-primary-soft), 0 24px 64px rgba(0,0,0,.50) !important;
}
html[data-theme="dark"] .login .content h3,
html[data-theme="dark"] .login .content .form-title,
html[data-theme="light"] .login .content h3,
html[data-theme="light"] .login .content .form-title,
html[data-theme="accessible"] .login .content h3,
html[data-theme="accessible"] .login .content .form-title {
    color: var(--ui-text) !important;
}
html[data-theme="dark"] .login .content .input-icon .form-control,
html[data-theme="dark"] .login .content select.form-control,
html[data-theme="light"] .login .content .input-icon .form-control,
html[data-theme="light"] .login .content select.form-control,
html[data-theme="accessible"] .login .content .input-icon .form-control,
html[data-theme="accessible"] .login .content select.form-control {
    background: var(--input-bg) !important;
    color: var(--ui-text) !important;
    border-color: var(--input-border) !important;
}
html[data-theme="dark"] .login .content .input-icon .form-control::placeholder,
html[data-theme="light"] .login .content .input-icon .form-control::placeholder,
html[data-theme="accessible"] .login .content .input-icon .form-control::placeholder {
    color: var(--ui-muted) !important;
}

/* Button: theme primary for all non-default themes */
html[data-theme] .login .content .form-actions .btn,
html[data-theme] .login .content .btn-block {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-dark)) !important;
    box-shadow: 0 4px 18px var(--ui-primary-soft) !important;
}

/* ════════════════════════════════════════════════════════════════
   LOGIN2 (.user-login-5) OVERRIDES
   Uses html[data-theme="x"] prefix (specificity 0,2,1) to beat the
   css-login2 bundle rules (0,1,1) that load later in <body>.
   ════════════════════════════════════════════════════════════════ */

/* Red Dark */
html[data-theme="dark"] .user-login-5 {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(224, 82, 82, .20) 0%, transparent 42%),
        radial-gradient(ellipse at 90% 80%, rgba(136, 128, 168, .12) 0%, transparent 40%),
        linear-gradient(160deg, #1c1828 0%, #262336 50%, #1c1828 100%) !important;
}

/* Green Dark */
html[data-theme="light"] .user-login-5 {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(34, 192, 92, .18) 0%, transparent 42%),
        radial-gradient(ellipse at 90% 80%, rgba(34, 192, 92, .10) 0%, transparent 40%),
        linear-gradient(160deg, #1a201a 0%, #232e24 50%, #1a201a 100%) !important;
}

/* Blue Dark */
html[data-theme="accessible"] .user-login-5 {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(42, 184, 232, .18) 0%, transparent 42%),
        radial-gradient(ellipse at 90% 80%, rgba(42, 184, 232, .10) 0%, transparent 40%),
        linear-gradient(160deg, #181c2a 0%, #202638 50%, #181c2a 100%) !important;
}

/* Ocean — light blue outer, dark left panel */
html[data-theme="ocean"] .user-login-5 {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(2, 132, 199, .14) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 80%, rgba(124, 58, 237, .10) 0%, transparent 50%),
        linear-gradient(160deg, #deeeff 0%, #ebf4ff 50%, #dbeffe 100%) !important;
}
html[data-theme="ocean"] .user-login-5 .login-container {
    background: rgba(12, 58, 92, 0.88) !important;
}

/* Emerald — light green outer, dark left panel */
html[data-theme="emerald"] .user-login-5 {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(5, 150, 105, .14) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 80%, rgba(37, 99, 235, .10) 0%, transparent 50%),
        linear-gradient(160deg, #d1fae5 0%, #ecfdf5 50%, #d1fae5 100%) !important;
}
html[data-theme="emerald"] .user-login-5 .login-container {
    background: rgba(5, 46, 34, 0.88) !important;
}

/* All non-default themes: button uses theme primary */
html[data-theme] .user-login-5 .login-container .form-actions .btn,
html[data-theme] .user-login-5 .login-container .form-actions .btn.blue,
html[data-theme] .user-login-5 .login-container .btn-block {
    background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-dark)) !important;
    box-shadow: 0 4px 20px var(--ui-primary-soft) !important;
}

/* Input icon accent follows theme primary */
html[data-theme] .user-login-5 .login-container .input-icon > i {
    color: var(--ui-primary) !important;
}