/* ============================================================
   zelosre-theme.css  --  ZelosRE Brand Theme  v2.0
   Supports both Dark (default) and Light variants.
   Accent colors (cyan, green, gold) are shared between modes;
   backgrounds, text, and borders flip.
   ============================================================

   DARK PALETTE
   --zre-bg-deep:   #080d12   body background
   --zre-bg-card:   #0c1620   card / panel background
   --zre-bg-input:  #0a1219   input field background
   --zre-bg-raised: #111c28   slightly raised elements

   LIGHT PALETTE
   --zre-bg-deep:   #eef5fc   body background
   --zre-bg-card:   #ffffff   card / panel background
   --zre-bg-input:  #f5faff   input field background
   --zre-bg-raised: #e4f0f8   slightly raised elements

   SHARED ACCENTS (both modes)
   Cyan:  #38bdf8 (dark) / #0284c7 (light, darker for contrast)
   Green: #34d399 (dark) / #059669 (light)
   Gold:  #d4a843 (dark) / #b45309 (light)
   ============================================================ */

/* ── Dark theme variables ──────────────────────────────── */
:root,
[data-bs-theme="dark"] {
    --zre-bg-deep:       #080d12;
    --zre-bg-card:       #0c1620;
    --zre-bg-input:      #0a1219;
    --zre-bg-raised:     #111c28;
    --zre-border:        #1a2d3e;
    --zre-border-subtle: #152232;
    --zre-border-deep:   #12202e;

    --zre-text:          #e8edf2;
    --zre-text-sub:      #94aab8;
    --zre-text-muted:    #5a7a8f;
    --zre-text-dim:      #3a5a6f;

    --zre-cyan:          #38bdf8;
    --zre-cyan-dark:     #0369a1;
    --zre-green:         #34d399;
    --zre-green-dark:    #059669;
    --zre-gold:          #d4a843;
    --zre-red:           #ef4444;

    --zre-shadow:        rgba(0,0,0,0.5);
    --zre-btn-text:      #080d12;

    /* Bootstrap CSS variable overrides */
    --bs-body-bg:                  #080d12;
    --bs-body-color:               #e8edf2;
    --bs-border-color:             #1a2d3e;
    --bs-card-bg:                  #0c1620;
    --bs-card-border-color:        #1a2d3e;
    --bs-modal-bg:                 #0c1620;
    --bs-modal-border-color:       #1a2d3e;
    --bs-input-bg:                 #0a1219;
    --bs-input-border-color:       #1a2d3e;
    --bs-input-color:              #e8edf2;
    --bs-input-placeholder-color:  #5a7a8f;
    --bs-secondary-bg:             #111c28;
    --bs-tertiary-bg:              #0c1620;
    --bs-link-color:               #38bdf8;
    --bs-link-hover-color:         #7dd3fc;
    --bs-table-bg:                 transparent;
    --bs-table-striped-bg:         rgba(21,34,50,0.5);
    --bs-table-hover-bg:           rgba(56,189,248,0.06);
    --bs-table-border-color:       #1a2d3e;
    --bs-navbar-color:             #94aab8;
    --bs-navbar-hover-color:       #e8edf2;
    --bs-navbar-active-color:      #38bdf8;
    --bs-dropdown-bg:              #111c28;
    --bs-dropdown-border-color:    #1a2d3e;
    --bs-dropdown-link-color:      #94aab8;
    --bs-dropdown-link-hover-bg:   rgba(56,189,248,0.08);
    --bs-dropdown-link-hover-color:#e8edf2;
    --bs-dropdown-link-active-bg:  rgba(56,189,248,0.15);
    --bs-dropdown-link-active-color:#38bdf8;
    --bs-nav-tabs-border-color:    #1a2d3e;
    --bs-nav-tabs-link-active-color:#38bdf8;
    --bs-nav-tabs-link-active-bg:  #0c1620;
    --bs-nav-tabs-link-active-border-color: #1a2d3e #1a2d3e #0c1620;
    --bs-pagination-bg:            #0c1620;
    --bs-pagination-border-color:  #1a2d3e;
    --bs-pagination-color:         #94aab8;
    --bs-pagination-hover-bg:      #111c28;
    --bs-pagination-hover-color:   #e8edf2;
    --bs-pagination-active-bg:     #38bdf8;
    --bs-pagination-active-color:  #080d12;
    --bs-pagination-active-border-color: #38bdf8;
}

/* ── Light theme variables ─────────────────────────────── */
[data-bs-theme="light"] {
    --zre-bg-deep:       #eef5fc;
    --zre-bg-card:       #ffffff;
    --zre-bg-input:      #f5faff;
    --zre-bg-raised:     #e4f0f8;
    --zre-border:        #c4d8e8;
    --zre-border-subtle: #d8eaf4;
    --zre-border-deep:   #aecde0;

    --zre-text:          #0d1f2e;
    --zre-text-sub:      #345670;
    --zre-text-muted:    #5a7a8f;
    --zre-text-dim:      #7a9ab0;

    --zre-cyan:          #0284c7;
    --zre-cyan-dark:     #0369a1;
    --zre-green:         #059669;
    --zre-green-dark:    #047857;
    --zre-gold:          #b45309;
    --zre-red:           #dc2626;

    --zre-shadow:        rgba(13,31,46,0.12);
    --zre-btn-text:      #ffffff;

    /* Bootstrap CSS variable overrides */
    --bs-body-bg:                  #eef5fc;
    --bs-body-color:               #0d1f2e;
    --bs-border-color:             #c4d8e8;
    --bs-card-bg:                  #ffffff;
    --bs-card-border-color:        #c4d8e8;
    --bs-modal-bg:                 #ffffff;
    --bs-modal-border-color:       #c4d8e8;
    --bs-input-bg:                 #f5faff;
    --bs-input-border-color:       #c4d8e8;
    --bs-input-color:              #0d1f2e;
    --bs-input-placeholder-color:  #7a9ab0;
    --bs-secondary-bg:             #e4f0f8;
    --bs-tertiary-bg:              #f0f7fc;
    --bs-link-color:               #0284c7;
    --bs-link-hover-color:         #0369a1;
    --bs-table-bg:                 transparent;
    --bs-table-striped-bg:         rgba(196,216,232,0.25);
    --bs-table-hover-bg:           rgba(2,132,199,0.06);
    --bs-table-border-color:       #c4d8e8;
    --bs-dropdown-bg:              #ffffff;
    --bs-dropdown-border-color:    #c4d8e8;
    --bs-dropdown-link-color:      #345670;
    --bs-dropdown-link-hover-bg:   rgba(2,132,199,0.07);
    --bs-dropdown-link-hover-color:#0d1f2e;
    --bs-dropdown-link-active-bg:  rgba(2,132,199,0.12);
    --bs-dropdown-link-active-color:#0284c7;
    --bs-nav-tabs-border-color:    #c4d8e8;
    --bs-nav-tabs-link-active-color:#0284c7;
    --bs-nav-tabs-link-active-bg:  #ffffff;
    --bs-nav-tabs-link-active-border-color: #c4d8e8 #c4d8e8 #ffffff;
    --bs-pagination-bg:            #ffffff;
    --bs-pagination-border-color:  #c4d8e8;
    --bs-pagination-color:         #345670;
    --bs-pagination-hover-bg:      #e4f0f8;
    --bs-pagination-hover-color:   #0d1f2e;
    --bs-pagination-active-bg:     #0284c7;
    --bs-pagination-active-color:  #ffffff;
    --bs-pagination-active-border-color: #0284c7;
}

/* ── Accent color schemes ─────────────────────────────────────────
   The default accent is Cyan and is baked into the dark/light blocks
   above. These selectors override the brand hue only — backgrounds,
   text, and borders still flip with the dark/light mode toggle. Each
   scheme has a dark-mode variant (bright, saturated) and a light-mode
   variant (deeper, higher-contrast on white). Applied via a
   `data-zre-accent="..."` attribute on <html>, set from the ZREAccent
   cookie by the anti-flash script in Portal.master. */

/* Emerald — default camping-friendly green */
[data-zre-accent="emerald"][data-bs-theme="dark"],
[data-zre-accent="emerald"]:not([data-bs-theme]) {
    --zre-cyan:                    #34d399;
    --zre-cyan-dark:               #059669;
    --zre-green:                   #6ee7b7;
    --zre-green-dark:              #047857;
    --bs-link-color:               #34d399;
    --bs-link-hover-color:         #6ee7b7;
    --bs-navbar-active-color:      #34d399;
    --bs-dropdown-link-hover-bg:   rgba(52,211,153,0.08);
    --bs-dropdown-link-active-bg:  rgba(52,211,153,0.15);
    --bs-dropdown-link-active-color:#34d399;
    --bs-nav-tabs-link-active-color:#34d399;
    --bs-pagination-active-bg:     #34d399;
    --bs-pagination-active-border-color: #34d399;
    --bs-table-hover-bg:           rgba(52,211,153,0.06);
}
[data-zre-accent="emerald"][data-bs-theme="light"] {
    --zre-cyan:                    #059669;
    --zre-cyan-dark:               #047857;
    --zre-green:                   #10b981;
    --zre-green-dark:              #065f46;
    --bs-link-color:               #059669;
    --bs-link-hover-color:         #047857;
    --bs-dropdown-link-hover-bg:   rgba(5,150,105,0.07);
    --bs-dropdown-link-active-bg:  rgba(5,150,105,0.12);
    --bs-dropdown-link-active-color:#059669;
    --bs-nav-tabs-link-active-color:#059669;
    --bs-pagination-active-bg:     #059669;
    --bs-pagination-active-border-color: #059669;
    --bs-table-hover-bg:           rgba(5,150,105,0.06);
}

/* Pine — deep evergreen forest */
[data-zre-accent="pine"][data-bs-theme="dark"],
[data-zre-accent="pine"]:not([data-bs-theme]) {
    --zre-cyan:                    #4ade80;
    --zre-cyan-dark:               #15803d;
    --zre-green:                   #86efac;
    --zre-green-dark:              #166534;
    --bs-link-color:               #4ade80;
    --bs-link-hover-color:         #86efac;
    --bs-navbar-active-color:      #4ade80;
    --bs-dropdown-link-hover-bg:   rgba(74,222,128,0.08);
    --bs-dropdown-link-active-bg:  rgba(74,222,128,0.15);
    --bs-dropdown-link-active-color:#4ade80;
    --bs-nav-tabs-link-active-color:#4ade80;
    --bs-pagination-active-bg:     #4ade80;
    --bs-pagination-active-border-color: #4ade80;
    --bs-table-hover-bg:           rgba(74,222,128,0.06);
}
[data-zre-accent="pine"][data-bs-theme="light"] {
    --zre-cyan:                    #15803d;
    --zre-cyan-dark:               #14532d;
    --zre-green:                   #166534;
    --zre-green-dark:              #052e16;
    --bs-link-color:               #15803d;
    --bs-link-hover-color:         #14532d;
    --bs-dropdown-link-hover-bg:   rgba(21,128,61,0.07);
    --bs-dropdown-link-active-bg:  rgba(21,128,61,0.12);
    --bs-dropdown-link-active-color:#15803d;
    --bs-nav-tabs-link-active-color:#15803d;
    --bs-pagination-active-bg:     #15803d;
    --bs-pagination-active-border-color: #15803d;
    --bs-table-hover-bg:           rgba(21,128,61,0.06);
}

/* Amber — warm gold */
[data-zre-accent="amber"][data-bs-theme="dark"],
[data-zre-accent="amber"]:not([data-bs-theme]) {
    --zre-cyan:                    #fbbf24;
    --zre-cyan-dark:               #d97706;
    --zre-green:                   #fcd34d;
    --zre-green-dark:              #b45309;
    --bs-link-color:               #fbbf24;
    --bs-link-hover-color:         #fcd34d;
    --bs-navbar-active-color:      #fbbf24;
    --bs-dropdown-link-hover-bg:   rgba(251,191,36,0.08);
    --bs-dropdown-link-active-bg:  rgba(251,191,36,0.15);
    --bs-dropdown-link-active-color:#fbbf24;
    --bs-nav-tabs-link-active-color:#fbbf24;
    --bs-pagination-active-bg:     #fbbf24;
    --bs-pagination-active-border-color: #fbbf24;
    --bs-table-hover-bg:           rgba(251,191,36,0.06);
}
[data-zre-accent="amber"][data-bs-theme="light"] {
    --zre-cyan:                    #d97706;
    --zre-cyan-dark:               #b45309;
    --zre-green:                   #ea580c;
    --zre-green-dark:              #9a3412;
    --bs-link-color:               #d97706;
    --bs-link-hover-color:         #b45309;
    --bs-dropdown-link-hover-bg:   rgba(217,119,6,0.07);
    --bs-dropdown-link-active-bg:  rgba(217,119,6,0.12);
    --bs-dropdown-link-active-color:#d97706;
    --bs-nav-tabs-link-active-color:#d97706;
    --bs-pagination-active-bg:     #d97706;
    --bs-pagination-active-border-color: #d97706;
    --bs-table-hover-bg:           rgba(217,119,6,0.06);
}

/* Sunset — warm orange */
[data-zre-accent="sunset"][data-bs-theme="dark"],
[data-zre-accent="sunset"]:not([data-bs-theme]) {
    --zre-cyan:                    #fb923c;
    --zre-cyan-dark:               #ea580c;
    --zre-green:                   #fdba74;
    --zre-green-dark:              #c2410c;
    --bs-link-color:               #fb923c;
    --bs-link-hover-color:         #fdba74;
    --bs-navbar-active-color:      #fb923c;
    --bs-dropdown-link-hover-bg:   rgba(251,146,60,0.08);
    --bs-dropdown-link-active-bg:  rgba(251,146,60,0.15);
    --bs-dropdown-link-active-color:#fb923c;
    --bs-nav-tabs-link-active-color:#fb923c;
    --bs-pagination-active-bg:     #fb923c;
    --bs-pagination-active-border-color: #fb923c;
    --bs-table-hover-bg:           rgba(251,146,60,0.06);
}
[data-zre-accent="sunset"][data-bs-theme="light"] {
    --zre-cyan:                    #ea580c;
    --zre-cyan-dark:               #c2410c;
    --zre-green:                   #f97316;
    --zre-green-dark:              #9a3412;
    --bs-link-color:               #ea580c;
    --bs-link-hover-color:         #c2410c;
    --bs-dropdown-link-hover-bg:   rgba(234,88,12,0.07);
    --bs-dropdown-link-active-bg:  rgba(234,88,12,0.12);
    --bs-dropdown-link-active-color:#ea580c;
    --bs-nav-tabs-link-active-color:#ea580c;
    --bs-pagination-active-bg:     #ea580c;
    --bs-pagination-active-border-color: #ea580c;
    --bs-table-hover-bg:           rgba(234,88,12,0.06);
}

/* Violet */
[data-zre-accent="violet"][data-bs-theme="dark"],
[data-zre-accent="violet"]:not([data-bs-theme]) {
    --zre-cyan:                    #a78bfa;
    --zre-cyan-dark:               #7c3aed;
    --zre-green:                   #c4b5fd;
    --zre-green-dark:              #6d28d9;
    --bs-link-color:               #a78bfa;
    --bs-link-hover-color:         #c4b5fd;
    --bs-navbar-active-color:      #a78bfa;
    --bs-dropdown-link-hover-bg:   rgba(167,139,250,0.08);
    --bs-dropdown-link-active-bg:  rgba(167,139,250,0.15);
    --bs-dropdown-link-active-color:#a78bfa;
    --bs-nav-tabs-link-active-color:#a78bfa;
    --bs-pagination-active-bg:     #a78bfa;
    --bs-pagination-active-border-color: #a78bfa;
    --bs-table-hover-bg:           rgba(167,139,250,0.06);
}
[data-zre-accent="violet"][data-bs-theme="light"] {
    --zre-cyan:                    #7c3aed;
    --zre-cyan-dark:               #6d28d9;
    --zre-green:                   #8b5cf6;
    --zre-green-dark:              #5b21b6;
    --bs-link-color:               #7c3aed;
    --bs-link-hover-color:         #6d28d9;
    --bs-dropdown-link-hover-bg:   rgba(124,58,237,0.07);
    --bs-dropdown-link-active-bg:  rgba(124,58,237,0.12);
    --bs-dropdown-link-active-color:#7c3aed;
    --bs-nav-tabs-link-active-color:#7c3aed;
    --bs-pagination-active-bg:     #7c3aed;
    --bs-pagination-active-border-color: #7c3aed;
    --bs-table-hover-bg:           rgba(124,58,237,0.06);
}

/* Rose — magenta/pink */
[data-zre-accent="rose"][data-bs-theme="dark"],
[data-zre-accent="rose"]:not([data-bs-theme]) {
    --zre-cyan:                    #fb7185;
    --zre-cyan-dark:               #e11d48;
    --zre-green:                   #fda4af;
    --zre-green-dark:              #be123c;
    --bs-link-color:               #fb7185;
    --bs-link-hover-color:         #fda4af;
    --bs-navbar-active-color:      #fb7185;
    --bs-dropdown-link-hover-bg:   rgba(251,113,133,0.08);
    --bs-dropdown-link-active-bg:  rgba(251,113,133,0.15);
    --bs-dropdown-link-active-color:#fb7185;
    --bs-nav-tabs-link-active-color:#fb7185;
    --bs-pagination-active-bg:     #fb7185;
    --bs-pagination-active-border-color: #fb7185;
    --bs-table-hover-bg:           rgba(251,113,133,0.06);
}
[data-zre-accent="rose"][data-bs-theme="light"] {
    --zre-cyan:                    #e11d48;
    --zre-cyan-dark:               #be123c;
    --zre-green:                   #f43f5e;
    --zre-green-dark:              #9f1239;
    --bs-link-color:               #e11d48;
    --bs-link-hover-color:         #be123c;
    --bs-dropdown-link-hover-bg:   rgba(225,29,72,0.07);
    --bs-dropdown-link-active-bg:  rgba(225,29,72,0.12);
    --bs-dropdown-link-active-color:#e11d48;
    --bs-nav-tabs-link-active-color:#e11d48;
    --bs-pagination-active-bg:     #e11d48;
    --bs-pagination-active-border-color: #e11d48;
    --bs-table-hover-bg:           rgba(225,29,72,0.06);
}

/* ── Base ────────────────────────────────────────────────── */
html, body {
    background-color: var(--zre-bg-deep) !important;
    color: var(--zre-text) !important;
}

/* ── Accent bar ──────────────────────────────────────────── */
.zre-accent-bar {
    height: 2px;
    background: linear-gradient(90deg, transparent, #059669, #0ea5e9, #38bdf8, #d4a843, transparent);
    width: 100%;
}

/* ── Navbar (always stays dark, data-bs-theme="dark" on the nav) */
#NavigationMenu {
    background-color: #0c1620 !important;
    border-bottom: 1px solid #1a2d3e !important;
}
#NavigationMenu .navbar-brand,
#NavigationMenu .navbar-brand:hover { color: #e8edf2 !important; }
#NavigationMenu .nav-link { color: #94aab8 !important; transition: color .15s; }
#NavigationMenu .nav-link:hover,
#NavigationMenu .nav-link:focus  { color: #e8edf2 !important; }
#NavigationMenu .nav-link.active { color: var(--zre-cyan) !important; }
#NavigationMenu .navbar-toggler  { border-color: #1a2d3e !important; }
#NavigationMenu .navbar-toggler-icon { filter: invert(0.7); }
#NavigationMenu .dropdown-menu {
    background-color: #111c28 !important;
    border: 1px solid #1a2d3e !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
#NavigationMenu .dropdown-item { color: #94aab8 !important; font-size: 0.875rem; }
#NavigationMenu .dropdown-item:hover,
#NavigationMenu .dropdown-item:focus {
    background-color: color-mix(in srgb, var(--zre-cyan) 12%, transparent) !important;
    color: #e8edf2 !important;
}
#NavigationMenu .dropdown-item.active,
#NavigationMenu .dropdown-item:active {
    background-color: color-mix(in srgb, var(--zre-cyan) 20%, transparent) !important;
    color: var(--zre-cyan) !important;
}

/* ── Theme toggle button ─────────────────────────────────── */
#themeToggleBtn {
    background: transparent;
    border: 1px solid #2a4050;
    border-radius: 20px;
    color: #5a7a8f;
    cursor: pointer;
    font-size: 0.78rem;
    padding: 4px 10px;
    transition: all .2s;
    white-space: nowrap;
}
#themeToggleBtn:hover {
    border-color: var(--zre-cyan);
    color: var(--zre-cyan);
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
    background-color: var(--zre-bg-card) !important;
    border-color: var(--zre-border) !important;
    color: var(--zre-text) !important;
}
.card-header {
    background-color: transparent !important;
    border-bottom-color: var(--zre-border) !important;
    color: var(--zre-text) !important;
}
.card-footer {
    background-color: transparent !important;
    border-top-color: var(--zre-border) !important;
}

/* ── Dropdowns (outside navbar) ─────────────────────────── */
.dropdown-menu {
    background-color: var(--zre-bg-raised) !important;
    border: 1px solid var(--zre-border) !important;
    box-shadow: 0 8px 24px var(--zre-shadow) !important;
}
.dropdown-item { color: var(--zre-text-sub) !important; font-size: 0.875rem; }
.dropdown-item:hover, .dropdown-item:focus {
    background-color: color-mix(in srgb, var(--zre-cyan) 10%, transparent) !important;
    color: var(--zre-text) !important;
}
.dropdown-item.active, .dropdown-item:active {
    background-color: color-mix(in srgb, var(--zre-cyan) 15%, transparent) !important;
    color: var(--zre-cyan) !important;
}
.dropdown-divider { border-color: var(--zre-border) !important; }

/* ── Forms ───────────────────────────────────────────────── */
.form-control, .form-select {
    background-color: var(--zre-bg-input) !important;
    border-color: var(--zre-border) !important;
    color: var(--zre-text) !important;
}
.form-control::placeholder { color: var(--zre-text-muted) !important; }
.form-control:focus, .form-select:focus {
    background-color: var(--zre-bg-input) !important;
    border-color: var(--zre-cyan) !important;
    color: var(--zre-text) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zre-cyan) 18%, transparent) !important;
}
.form-control.is-valid   { border-color: var(--zre-green) !important; }
.form-control.is-invalid { border-color: var(--zre-red)   !important; }
.form-label {
    color: var(--zre-text-sub);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.input-group-text {
    background-color: var(--zre-bg-raised) !important;
    border-color: var(--zre-border) !important;
    color: var(--zre-text-sub) !important;
}
.form-check-input {
    background-color: var(--zre-bg-input) !important;
    border-color: var(--zre-border) !important;
}
.form-check-input:checked {
    background-color: var(--zre-cyan) !important;
    border-color: var(--zre-cyan) !important;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-primary {
    background: linear-gradient(135deg, var(--zre-cyan-dark), var(--zre-green-dark)) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--zre-cyan), var(--zre-green)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zre-cyan) 25%, transparent) !important;
}
.btn-success {
    background: linear-gradient(135deg, var(--zre-cyan-dark), var(--zre-green-dark)) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.btn-success:hover {
    background: linear-gradient(135deg, var(--zre-cyan), var(--zre-green)) !important;
}
.btn-secondary {
    background-color: var(--zre-bg-raised) !important;
    border-color: var(--zre-border) !important;
    color: var(--zre-text-sub) !important;
}
.btn-secondary:hover {
    background-color: var(--zre-border) !important;
    color: var(--zre-text) !important;
}
.btn-outline-primary {
    border-color: var(--zre-cyan) !important;
    color: var(--zre-cyan) !important;
}
.btn-outline-primary:hover {
    background-color: color-mix(in srgb, var(--zre-cyan) 15%, transparent) !important;
    color: var(--zre-cyan) !important;
}
.btn-outline-secondary {
    border-color: var(--zre-border) !important;
    color: var(--zre-text-sub) !important;
}
.btn-outline-secondary:hover {
    background-color: var(--zre-bg-raised) !important;
    color: var(--zre-text) !important;
    border-color: var(--zre-cyan) !important;
}
.btn-outline-info {
    border-color: var(--zre-cyan) !important;
    color: var(--zre-cyan) !important;
}
.btn-outline-info:hover {
    background-color: color-mix(in srgb, var(--zre-cyan) 15%, transparent) !important;
    color: var(--zre-cyan) !important;
}
.btn-danger  { background-color: var(--zre-red)  !important; border-color: var(--zre-red)  !important; color: #fff !important; }
.btn-warning { background-color: var(--zre-gold) !important; border-color: var(--zre-gold) !important; color: #fff !important; }
.btn-link { color: var(--zre-cyan) !important; }
.btn-link:hover { color: var(--zre-cyan-dark) !important; }
.btn-info { background-color: var(--zre-cyan) !important; border-color: var(--zre-cyan) !important; color: #fff !important; }

/* ── Tables ──────────────────────────────────────────────── */
.table {
    color: var(--zre-text) !important;
    border-color: var(--zre-border) !important;
}
.table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--zre-text) !important;
    border-bottom-color: var(--zre-border) !important;
}
.table-light th, .table thead th {
    background-color: var(--zre-bg-raised) !important;
    color: var(--zre-text-sub) !important;
    border-color: var(--zre-border) !important;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.table-hover > tbody > tr:hover > * {
    background-color: color-mix(in srgb, var(--zre-cyan) 8%, transparent) !important;
}
.dataTables_wrapper { color: var(--zre-text) !important; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--zre-bg-input) !important;
    border-color: var(--zre-border) !important;
    color: var(--zre-text) !important;
}
.dataTables_wrapper .dataTables_info { color: var(--zre-text-muted) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--zre-text-sub) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--zre-cyan) !important;
    color: #fff !important;
    border-color: var(--zre-cyan) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--zre-bg-raised) !important;
    color: var(--zre-text) !important;
    border-color: var(--zre-border) !important;
}

/* ── Modals ──────────────────────────────────────────────── */
.modal-content {
    background-color: var(--zre-bg-card) !important;
    border-color: var(--zre-border) !important;
    color: var(--zre-text) !important;
}
.modal-header {
    border-bottom-color: var(--zre-border) !important;
    background-color: var(--zre-bg-raised) !important;
}
.modal-footer { border-top-color: var(--zre-border) !important; }
.modal-title  { color: var(--zre-text) !important; }
.btn-close    { filter: invert(0.5); }
[data-bs-theme="light"] .btn-close { filter: none; }
.modal-backdrop { background-color: #000 !important; }

/* ── Alerts ──────────────────────────────────────────────── */
.alert-danger  { background-color: rgba(220,38,38,0.10)  !important; border-color: rgba(220,38,38,0.25)  !important; color: var(--zre-red)   !important; }
.alert-warning { background-color: rgba(180,83,9,0.10)   !important; border-color: rgba(180,83,9,0.25)   !important; color: var(--zre-gold)  !important; }
.alert-success { background-color: rgba(5,150,105,0.10)  !important; border-color: rgba(5,150,105,0.25)  !important; color: var(--zre-green) !important; }
.alert-info    { background-color: color-mix(in srgb, var(--zre-cyan) 12%, transparent) !important; border-color: color-mix(in srgb, var(--zre-cyan) 28%, transparent) !important; color: var(--zre-cyan)  !important; }

/* ── Badges ──────────────────────────────────────────────── */
.badge.bg-primary   { background-color: var(--zre-cyan)      !important; color: #fff !important; }
.badge.bg-success   { background-color: var(--zre-green)     !important; color: #fff !important; }
.badge.bg-warning   { background-color: var(--zre-gold)      !important; color: #fff !important; }
.badge.bg-danger    { background-color: var(--zre-red)       !important; color: #fff !important; }
.badge.bg-secondary { background-color: var(--zre-bg-raised) !important; color: var(--zre-text-sub) !important; border: 1px solid var(--zre-border); }

/* ── Nav tabs ────────────────────────────────────────────── */
.nav-tabs { border-bottom-color: var(--zre-border) !important; }
.nav-tabs .nav-link { color: var(--zre-text-sub) !important; border-color: transparent !important; }
.nav-tabs .nav-link:hover { color: var(--zre-text) !important; border-color: var(--zre-border) !important; }
.nav-tabs .nav-link.active {
    background-color: var(--zre-bg-card) !important;
    border-color: var(--zre-border) var(--zre-border) var(--zre-bg-card) !important;
    color: var(--zre-cyan) !important;
}

/* ── List groups ─────────────────────────────────────────── */
.list-group-item {
    background-color: var(--zre-bg-card) !important;
    border-color: var(--zre-border) !important;
    color: var(--zre-text) !important;
}
.list-group-item:hover { background-color: var(--zre-bg-raised) !important; }
.list-group-item.active {
    background-color: color-mix(in srgb, var(--zre-cyan) 12%, transparent) !important;
    border-color: var(--zre-cyan) !important;
    color: var(--zre-cyan) !important;
}

/* ── Progress bars ───────────────────────────────────────── */
.progress { background-color: var(--zre-bg-raised) !important; }
.progress-bar { background-color: var(--zre-cyan) !important; }

/* ── Accordion ───────────────────────────────────────────── */
.accordion-item {
    background-color: var(--zre-bg-card) !important;
    border-color: var(--zre-border) !important;
    color: var(--zre-text) !important;
}
.accordion-button {
    background-color: var(--zre-bg-raised) !important;
    color: var(--zre-text) !important;
}
.accordion-button:not(.collapsed) { color: var(--zre-cyan) !important; }
.accordion-button::after { filter: invert(0.5); }
[data-bs-theme="light"] .accordion-button::after { filter: none; }

/* ── Misc ────────────────────────────────────────────────── */
hr { border-color: var(--zre-border) !important; opacity: 1; }
.text-muted   { color: var(--zre-text-muted) !important; }
.text-primary { color: var(--zre-cyan)  !important; }
.text-success { color: var(--zre-green) !important; }
.text-warning { color: var(--zre-gold)  !important; }
.text-danger  { color: var(--zre-red)   !important; }
.bg-body-secondary { background-color: var(--zre-bg-raised) !important; }
a { color: var(--zre-cyan); }
a:hover { color: var(--zre-cyan-dark); }
small, .small { color: var(--zre-text-sub); }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--zre-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--zre-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--zre-cyan-dark); }

/* ── Login page ──────────────────────────────────────────── */
.zre-login-wrap {
    min-height: 100vh;
    background-color: var(--zre-bg-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.zre-login-card {
    background: var(--zre-bg-card);
    border: 1px solid var(--zre-border);
    border-radius: 16px;
    padding: 40px 36px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 48px var(--zre-shadow);
}
.zre-brand-name { color: var(--zre-text); font-size: 1.6rem; font-weight: 800; }
.zre-brand-name span { color: var(--zre-cyan); }
.zre-login-sub { color: var(--zre-text-muted); font-size: 0.875rem; }
.zre-field-label { color: var(--zre-text-sub); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px; display: block; }

/* ── Portal sub-nav ──────────────────────────────────────── */
nav.navbar:not(#NavigationMenu) {
    background-color: var(--zre-bg-raised) !important;
    border-bottom: 1px solid var(--zre-border) !important;
}

/* ── Light mode specific tweaks ──────────────────────────── */
[data-bs-theme="light"] .pipeline-buyer  { background-color: #dbeafe; color: #1d4ed8; }
[data-bs-theme="light"] .pipeline-seller { background-color: #dcfce7; color: #15803d; }
[data-bs-theme="light"] .stage-pill      { background: #e8f3fb; border-color: #b0cfd8; color: #345670; }
[data-bs-theme="light"] .zre-stat-card   { background: #ffffff; border-color: #c4d8e8; }
[data-bs-theme="light"] .stage-bar-wrap  { background: #ffffff; border-color: #c4d8e8; }
[data-bs-theme="light"] .kanban-col      { background: #ffffff; border-color: #c4d8e8; }
[data-bs-theme="light"] .client-card     { background: #f5faff; border-color: #c4d8e8; }
[data-bs-theme="light"] .client-card:hover { border-color: var(--zre-cyan); }
[data-bs-theme="light"] .pipeline-jump-btn { background: #f5faff; border-color: #c4d8e8; color: #345670; }
[data-bs-theme="light"] .pipeline-jump-btn:hover { border-color: var(--zre-cyan); color: var(--zre-cyan); }
[data-bs-theme="light"] .pipeline-jump-btn .pj-count { color: #fff; }
[data-bs-theme="light"] .tag-chip { border-color: #c4d8e8; }
[data-bs-theme="light"] .crm-card { border-color: #c4d8e8; }
[data-bs-theme="light"] .info-row { border-color: #e4f0f8; }
[data-bs-theme="light"] .note-entry { background: color-mix(in srgb, var(--zre-cyan) 5%, transparent); border-color: var(--zre-cyan); }
[data-bs-theme="light"] .kanban-empty { color: #7a9ab0; }
[data-bs-theme="light"] .stage-bar-track { background: #e4f0f8; }

/* ── Dark mode specific tweaks ───────────────────────────── */
[data-bs-theme="dark"] .pipeline-buyer  { background-color: rgba(29,78,216,0.2); color: #93c5fd; }
[data-bs-theme="dark"] .pipeline-seller { background-color: rgba(21,128,61,0.2); color: #6ee7b7; }
[data-bs-theme="dark"] .stage-pill      { background: #1a2d3e; border-color: #1a2d3e; color: #94aab8; }