/* ══════════════════════════════════════════════════════════════
   adapted-cyberpunk.css — AdaptEd "Nebula" Theme Overlay
   ══════════════════════════════════════════════════════════════
   PURPOSE: Layers on TOP of darkmode.css + dashboard.css
   LOAD ORDER: site.css → dashboard.css → darkmode.css → adapted-cyberpunk.css
   
   This file does NOT replace darkmode.css. It overrides specific
   values and adds the OpenClaw-inspired ambient effects (stars,
   gradient orbs, glowing card borders, punched-up text contrast).
   
   SCOPE: [data-theme="dark"] only — light mode is unaffected.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. VARIABLE OVERRIDES ──────────────────────────────────
   Override the base dark-mode variables with the Nebula palette.
   These cascade into all existing [data-theme="dark"] rules.
   ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    /* Backgrounds — shifted from pure black to dark blue-charcoal */
    --bg-primary: #0c1016;
    --bg-secondary: #111318;
    --card-bg: #111318;
    --nav-bg: #111111;
    /* Matching cc-* variables from dashboard.css */
    --cc-bg-base: #0c1016;
    --cc-bg-card: #111318;
    --cc-bg-card-alt: #151a21;
    --cc-bg-sidebar: #111111;
    /* Borders — faint white with slight transparency */
    --border-color: rgba(255, 255, 255, 0.06);
    --cc-border: rgba(255, 255, 255, 0.06);
    --cc-border-light: rgba(255, 255, 255, 0.10);
    /* Text — key change: primary is now TRUE WHITE for headings */
    --text-primary: #ffffff;
    --text-secondary: #9ca3b8;
    --cc-text-primary: #ffffff;
    --cc-text-secondary: #9ca3b8;
    --cc-text-muted: #4b5563;
    /* Accent palette — cyberpunk neons */
    --accent-primary: #00e676;
    --accent-secondary: #00e0ff;
    --accent-magenta: #ff2d78;
    --accent-amber: #ffea00;
    --cc-cyan: #00e676;
    --cc-magenta: #00e0ff;
    --cc-green: #00e676;
    /* Glow effects */
    --card-hover-shadow: 0 0 28px rgba(0, 230, 118, 0.07);
    --button-gradient: linear-gradient(135deg, #00e676 0%, #00c853 100%);
    /* Hero gradients — green-tinted */
    --hero-gradient-start: #0a1210;
    --hero-gradient-end: #0c1016;
}

    /* ── 2. TEXT HIERARCHY ──────────────────────────────────────
   The #1 lesson from OpenClaw: true white titles + muted body.
   This creates the "pop" Ram noticed.
   ──────────────────────────────────────────────────────────── */

    /* Page titles, card titles, modal titles — pure white */
    [data-theme="dark"] h1,
    [data-theme="dark"] h2,
    [data-theme="dark"] h3,
    [data-theme="dark"] h4 {
        color: #ffffff;
    }

    /* Smaller headings and labels — slightly muted */
    [data-theme="dark"] h5,
    [data-theme="dark"] h6 {
        color: #e8ecf4;
    }

    /* Body text, descriptions, table cells — readable but not white */
    [data-theme="dark"] p,
    [data-theme="dark"] .card-body,
    [data-theme="dark"] td {
        color: #c8cdd8;
    }

    /* Muted text — pushed dimmer for contrast gap */
    [data-theme="dark"] .text-muted {
        color: #4b5563 !important;
    }

    /* Secondary text — labels, hints, timestamps */
    [data-theme="dark"] .text-secondary,
    [data-theme="dark"] small:not(.badge) {
        color: #6b7280;
    }

    /* ── 3. CONTENT AREA AMBIENT EFFECTS ────────────────────────
   Stars and gradient orbs live ONLY in portal-content / cc-content.
   The sidebar stays clean and solid.
   
   Implementation: Add this to _PortalLayout.cshtml ONCE:
   
   <div class="nebula-bg" id="nebulaBg">
       <div class="nebula-orb nebula-orb-1"></div>
       <div class="nebula-orb nebula-orb-2"></div>
       <div class="nebula-orb nebula-orb-3"></div>
   </div>
   
   Place it as the FIRST child of .portal-content (or .cc-content).
   Stars are injected via JS (see bottom of this file for the snippet).
   ──────────────────────────────────────────────────────────── */

    [data-theme="dark"] .nebula-bg {
        position: fixed;
        top: 0;
        left: var(--portal-sidebar-width, 252px);
        right: 0;
        bottom: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
    }

/* Collapsed sidebar adjustment */
.portal-sidebar.collapsed ~ .portal-main .nebula-bg {
    left: var(--portal-sidebar-collapsed, 60px);
}

[data-theme="dark"] .nebula-star {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
}

[data-theme="dark"] .nebula-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

[data-theme="dark"] .nebula-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 230, 118, 0.06) 0%, transparent 70%);
    top: -80px;
    left: -60px;
}

[data-theme="dark"] .nebula-orb-2 {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(0, 224, 255, 0.05) 0%, transparent 70%);
    bottom: -60px;
    right: -40px;
}

[data-theme="dark"] .nebula-orb-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 45, 120, 0.04) 0%, transparent 70%);
    top: 40%;
    left: 55%;
}

/* Hide nebula in light mode */
[data-theme="light"] .nebula-bg {
    display: none;
}

/* Ensure content sits above the nebula layer */
[data-theme="dark"] .portal-content,
[data-theme="dark"] .cc-content {
    position: relative;
    z-index: 1;
}

/* ── 4. CARD SYSTEM ─────────────────────────────────────────
   Cards: translucent background, subtle border, glow-on-hover.
   Each card "type" gets its own accent color for the glow.
   ──────────────────────────────────────────────────────────── */

[data-theme="dark"] .card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    [data-theme="dark"] .card:hover {
        border-color: rgba(0, 230, 118, 0.25);
        box-shadow: 0 0 28px rgba(0, 230, 118, 0.06), inset 0 0 28px rgba(0, 230, 118, 0.015);
        transform: none; /* Override the translateY from base darkmode.css */
    }

[data-theme="dark"] .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #ffffff;
}

[data-theme="dark"] .card-body {
    background: transparent;
    color: #c8cdd8;
}

/* ── 4b. BOOTSTRAP UTILITY CLASS OVERRIDES ──────────────────
   Bootstrap .bg-primary, .bg-info etc. use !important which
   beats our .card-header { background: transparent } rule.
   These !important overrides ensure Nebula wins everywhere.
   ADD THIS after section 4 (CARD SYSTEM) in adapted-cyberpunk.css
   ──────────────────────────────────────────────────────────── */

[data-theme="dark"] .card-header.bg-primary,
[data-theme="dark"] .card-header.bg-info,
[data-theme="dark"] .card-header.bg-secondary,
[data-theme="dark"] .card-header.bg-success,
[data-theme="dark"] .card-header.bg-warning,
[data-theme="dark"] .card-header.bg-light,
[data-theme="dark"] .card-header.bg-dark {
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #ffffff;
}

    /* Card-header icon accents by original Bootstrap class */
    [data-theme="dark"] .card-header.bg-primary h3 i,
    [data-theme="dark"] .card-header.bg-primary h4 i,
    [data-theme="dark"] .card-header.bg-primary h5 i,
    [data-theme="dark"] .card-header.bg-primary h6 i {
        color: #00e676;
    }

    [data-theme="dark"] .card-header.bg-info h3 i,
    [data-theme="dark"] .card-header.bg-info h4 i,
    [data-theme="dark"] .card-header.bg-info h5 i,
    [data-theme="dark"] .card-header.bg-info h6 i {
        color: #00e0ff;
    }

    [data-theme="dark"] .card-header.bg-secondary h3 i,
    [data-theme="dark"] .card-header.bg-secondary h4 i,
    [data-theme="dark"] .card-header.bg-secondary h5 i,
    [data-theme="dark"] .card-header.bg-secondary h6 i {
        color: #00e0ff;
    }

    [data-theme="dark"] .card-header.bg-success h5 i,
    [data-theme="dark"] .card-header.bg-success h6 i {
        color: #00e676;
    }

[data-theme="dark"] .card-header.bg-warning {
    color: #ffea00;
}

/* .btn-light inside dark card headers → green accent button */
[data-theme="dark"] .card-header .btn-light {
    background: rgba(0, 230, 118, 0.1) !important;
    border: 1px solid rgba(0, 230, 118, 0.25);
    color: #00e676;
}

    [data-theme="dark"] .card-header .btn-light:hover {
        background: rgba(0, 230, 118, 0.2) !important;
        color: #00e676;
    }

/* General .btn-light in dark mode */
[data-theme="dark"] .btn-light {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

    [data-theme="dark"] .btn-light:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff;
    }

/* .card.bg-light / .card-body with bg-light */
[data-theme="dark"] .card.bg-light {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

[data-theme="dark"] .bg-light {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* card-footer */
[data-theme="dark"] .card-footer {
    background: transparent;
    border-top-color: rgba(255, 255, 255, 0.04);
}

/* Alert override for .border-info, .border-success etc. (used with border-left: 5px solid) */
[data-theme="dark"] .alert.border-info {
    border-color: rgba(0, 230, 118, 0.3) !important;
}

/* Kill Bootstrap .border-info blue on cards/elements globally */
[data-theme="dark"] .border-info {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Kill Bootstrap .bg-info.bg-opacity-10 blue tint globally */
[data-theme="dark"] .bg-info.bg-opacity-10,
[data-theme="dark"] .bg-info.bg-opacity-25 {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* .btn-outline-info → cyan accent in dark mode */
[data-theme="dark"] .btn-outline-info {
    color: #00e0ff;
    border-color: rgba(0, 224, 255, 0.3);
}

    [data-theme="dark"] .btn-outline-info:hover {
        background: rgba(0, 224, 255, 0.1);
        border-color: rgba(0, 224, 255, 0.5);
        color: #00e0ff;
    }

[data-theme="dark"] .alert.border-success {
    border-color: rgba(0, 230, 118, 0.3) !important;
}

[data-theme="dark"] .alert.border-warning {
    border-color: rgba(255, 234, 0, 0.3) !important;
}

[data-theme="dark"] .alert.border-danger {
    border-color: rgba(255, 82, 82, 0.3) !important;
}

/* .alert-light in dark mode */
[data-theme="dark"] .alert-light {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

/* form-check-input checked → green */
[data-theme="dark"] .form-check-input:checked {
    background-color: #00e676;
    border-color: #00e676;
}

/* form-select option backgrounds */
[data-theme="dark"] .form-select option {
    background: #12151b;
    color: #e2e8f0;
}

/* text-muted in dark */
[data-theme="dark"] .text-muted {
    color: #6b7280 !important;
}

/* .text-primary → green in dark */
[data-theme="dark"] .text-primary {
    color: #00e676 !important;
}

/* .text-info → cyan in dark */
[data-theme="dark"] .text-info {
    color: #00e0ff !important;
}

/* .text-success → green in dark */
[data-theme="dark"] .text-success {
    color: #00e676 !important;
}

/* .text-warning → amber in dark */
[data-theme="dark"] .text-warning {
    color: #ffea00 !important;
}

/* .text-danger → red in dark */
[data-theme="dark"] .text-danger {
    color: #ff5252 !important;
}

/* Fix modal background: #111318 is slightly blue-tinted */
[data-theme="dark"] .modal-content {
    background: rgba(12, 15, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
}

/* Nav tabs in dark mode */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

    [data-theme="dark"] .nav-tabs .nav-link {
        color: #9ca3b8;
    }

        [data-theme="dark"] .nav-tabs .nav-link:hover {
            color: #e2e8f0;
            border-color: rgba(255, 255, 255, 0.1);
        }

        [data-theme="dark"] .nav-tabs .nav-link.active {
            background: rgba(0, 230, 118, 0.08);
            color: #00e676;
            border-color: rgba(0, 230, 118, 0.2) rgba(0, 230, 118, 0.2) transparent;
        }

/* Progress bars */
[data-theme="dark"] .progress {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .progress-bar {
    background: #00e676;
}

/* Spinner */
[data-theme="dark"] .spinner-border.text-primary {
    color: #00e676 !important;
}

/* Generic .border overrides */
[data-theme="dark"] .border {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .border-top {
    border-top-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .border-bottom {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}



/* ── 5. BUTTON SYSTEM ───────────────────────────────────────
   Primary: green gradient. Secondary: ghost with border.
   Hover: glow matching accent color.
   ──────────────────────────────────────────────────────────── */

[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
    border: none;
    color: #0c1016;
    font-weight: 600;
}

    [data-theme="dark"] .btn-primary:hover {
        box-shadow: 0 0 20px rgba(0, 230, 118, 0.25);
    }

[data-theme="dark"] .btn-outline-primary {
    color: #00e676;
    border-color: rgba(0, 230, 118, 0.3);
    background: transparent;
}

    [data-theme="dark"] .btn-outline-primary:hover {
        background: rgba(0, 230, 118, 0.1);
        border-color: rgba(0, 230, 118, 0.5);
        color: #00e676;
        box-shadow: 0 0 16px rgba(0, 230, 118, 0.12);
    }

[data-theme="dark"] .btn-outline-secondary {
    color: #9ca3b8;
    border-color: rgba(255, 255, 255, 0.1);
}

    [data-theme="dark"] .btn-outline-secondary:hover {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.2);
        color: #ffffff;
    }

[data-theme="dark"] .btn-success {
    background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
    border: none;
    color: #0c1016;
}

/* ── 6. FORM INPUTS ─────────────────────────────────────────
   Inputs match the translucent card aesthetic.
   Focus: green glow ring.
   ──────────────────────────────────────────────────────────── */

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

    [data-theme="dark"] .form-control:focus,
    [data-theme="dark"] .form-select:focus,
    [data-theme="dark"] select:focus,
    [data-theme="dark"] input:focus,
    [data-theme="dark"] textarea:focus {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(0, 230, 118, 0.4);
        box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.1);
        color: #ffffff;
    }

/* ── 7. TABLES ──────────────────────────────────────────────
   Tables: transparent bg, subtle row separation.
   Hover: faint green tint.
   ──────────────────────────────────────────────────────────── */

[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    color: #c8cdd8;
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .table thead th {
    color: #9ca3b8;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: transparent;
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(0, 230, 118, 0.03);
    color: #ffffff;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.015);
}

/* ── 8. MODALS ──────────────────────────────────────────────
   Modals: same card aesthetic. Backdrop darkened.
   ──────────────────────────────────────────────────────────── */

[data-theme="dark"] .modal-content {
    background: #111318;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5), 0 0 80px rgba(0, 230, 118, 0.03);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

[data-theme="dark"] .modal-footer {
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* ── 9. SIDEBAR (preserved, minimal changes) ────────────────
   Sidebar stays solid #111111 — no stars, no orbs.
   Active state uses green accent.
   ──────────────────────────────────────────────────────────── */

[data-theme="dark"] .portal-sidebar {
    background: #111111;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .sidebar-brand-text {
    color: #ffffff;
}

[data-theme="dark"] .sidebar-nav li a {
    color: #7c8497;
}

    [data-theme="dark"] .sidebar-nav li a:hover {
        background: rgba(255, 255, 255, 0.04);
        color: #c8cdd8;
    }

    [data-theme="dark"] .sidebar-nav li a.active {
        background: rgba(0, 230, 118, 0.08);
        color: #00e676;
    }

        [data-theme="dark"] .sidebar-nav li a.active::before {
            background: #00e676;
        }

[data-theme="dark"] .sidebar-section-label {
    color: #374151;
}

/* ── 10. TOPBAR ─────────────────────────────────────────────
   Topbar: transparent bg, subtle bottom border.
   ──────────────────────────────────────────────────────────── */

[data-theme="dark"] .portal-topbar {
    background: rgba(12, 16, 22, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[data-theme="dark"] .portal-page-title {
    color: #9ca3b8;
}

[data-theme="dark"] .portal-topbar-date {
    color: #374151;
}

/* ── 11. ALERTS ─────────────────────────────────────────────
   Alerts: dark translucent backgrounds with accent border.
   ──────────────────────────────────────────────────────────── */

[data-theme="dark"] .alert-info {
    background: rgba(0, 224, 255, 0.06);
    color: #00e0ff;
    border-color: rgba(0, 224, 255, 0.2);
}

[data-theme="dark"] .alert-success {
    background: rgba(0, 230, 118, 0.06);
    color: #00e676;
    border-color: rgba(0, 230, 118, 0.2);
}

[data-theme="dark"] .alert-warning {
    background: rgba(255, 234, 0, 0.06);
    color: #ffea00;
    border-color: rgba(255, 234, 0, 0.2);
}

[data-theme="dark"] .alert-danger {
    background: rgba(255, 82, 82, 0.06);
    color: #ff5252;
    border-color: rgba(255, 82, 82, 0.2);
}

/* ── 12. BADGES & PILLS ────────────────────────────────────
   Zone badges (R/Y/G) keep their semantic colors.
   Other badges match the translucent style.
   ──────────────────────────────────────────────────────────── */

[data-theme="dark"] .badge.bg-primary {
    background: rgba(0, 230, 118, 0.15) !important;
    color: #00e676;
}

[data-theme="dark"] .badge.bg-success {
    background: rgba(0, 230, 118, 0.15) !important;
    color: #00e676;
}

[data-theme="dark"] .badge.bg-info {
    background: rgba(0, 224, 255, 0.15) !important;
    color: #00e0ff;
}

[data-theme="dark"] .badge.bg-warning {
    background: rgba(255, 234, 0, 0.15) !important;
    color: #ffea00;
}

[data-theme="dark"] .badge.bg-danger {
    background: rgba(255, 82, 82, 0.15) !important;
    color: #ff5252;
}

/* ── 13. SCROLLBARS ─────────────────────────────────────────
   Dark scrollbars with green thumb accent.
   ──────────────────────────────────────────────────────────── */

[data-theme="dark"] ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: transparent;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

    [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 230, 118, 0.2);
    }

/* ── 14. SELECTION ──────────────────────────────────────────
   Text selection: green tint.
   ──────────────────────────────────────────────────────────── */

[data-theme="dark"] ::selection {
    background: rgba(0, 230, 118, 0.25);
    color: #ffffff;
}

/* ── 15. PROGRESS BARS ──────────────────────────────────────
   ──────────────────────────────────────────────────────────── */

[data-theme="dark"] .progress {
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

[data-theme="dark"] .progress-bar {
    background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
}

/* ── 16. DROPDOWN MENUS ─────────────────────────────────────
   ──────────────────────────────────────────────────────────── */

[data-theme="dark"] .dropdown-menu {
    background: #111318;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .dropdown-item {
    color: #9ca3b8;
}

    [data-theme="dark"] .dropdown-item:hover {
        background: rgba(0, 230, 118, 0.06);
        color: #ffffff;
    }

[data-theme="dark"] .dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* Email / username text in account dropdown */
[data-theme="dark"] .dropdown-item-text,
[data-theme="dark"] .dropdown-item-text strong {
    color: #ffffff !important;
}

[data-theme="dark"] .dropdown-header {
    color: #9ca3b8;
    background-color: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .dropdown-item small.text-muted {
    color: #6b7280 !important;
}

/* ── 16b. LIGHT-MODE DROPDOWN RESETS ───────────────────────
   Ensures dropdowns stay white even when dashboard.css :root
   variables default to dark. Uses !important to beat any
   inherited dark values.
   ──────────────────────────────────────────────────────────── */

[data-theme="light"] .dropdown-menu {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a1a2e;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .dropdown-item {
    color: #374151 !important;
}

    [data-theme="light"] .dropdown-item:hover,
    [data-theme="light"] .dropdown-item:focus {
        background-color: rgba(0, 0, 0, 0.04) !important;
        color: #1a1a2e !important;
    }

[data-theme="light"] .dropdown-item-text,
[data-theme="light"] .dropdown-item-text strong {
    color: #1a1a2e !important;
}

[data-theme="light"] .dropdown-header {
    color: #6b7280;
    background-color: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .dropdown-divider {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .dropdown-item .text-danger {
    color: #dc2626 !important;
}

/* ── 17. LIST GROUPS ────────────────────────────────────────
   ──────────────────────────────────────────────────────────── */

[data-theme="dark"] .list-group-item {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.04);
    color: #c8cdd8;
}

    [data-theme="dark"] .list-group-item:hover {
        background: rgba(255, 255, 255, 0.04);
    }

    [data-theme="dark"] .list-group-item.active {
        background: rgba(0, 230, 118, 0.08);
        border-color: rgba(0, 230, 118, 0.15);
        color: #ffffff;
    }

/* ══════════════════════════════════════════════════════════════
   UTILITY CLASSES — For per-card accent colors
   Apply these to cards that need specific glow colors.
   ══════════════════════════════════════════════════════════════ */

/* Green glow (default / primary) */
[data-theme="dark"] .glow-green:hover {
    border-color: rgba(0, 230, 118, 0.35);
    box-shadow: 0 0 28px rgba(0, 230, 118, 0.07), inset 0 0 28px rgba(0, 230, 118, 0.015);
}

/* Cyan glow */
[data-theme="dark"] .glow-cyan:hover {
    border-color: rgba(0, 224, 255, 0.35);
    box-shadow: 0 0 28px rgba(0, 224, 255, 0.07), inset 0 0 28px rgba(0, 224, 255, 0.015);
}

/* Magenta glow */
[data-theme="dark"] .glow-magenta:hover {
    border-color: rgba(255, 45, 120, 0.35);
    box-shadow: 0 0 28px rgba(255, 45, 120, 0.07), inset 0 0 28px rgba(255, 45, 120, 0.015);
}

/* Amber glow */
[data-theme="dark"] .glow-amber:hover {
    border-color: rgba(255, 234, 0, 0.35);
    box-shadow: 0 0 28px rgba(255, 234, 0, 0.07), inset 0 0 28px rgba(255, 234, 0, 0.015);
}

/* ══════════════════════════════════════════════════════════════
   ACCENT ICON BACKGROUNDS — For card header icons
   ══════════════════════════════════════════════════════════════ */

.accent-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

[data-theme="dark"] .accent-icon-green {
    background: rgba(0, 230, 118, 0.1);
    color: #00e676;
}

[data-theme="dark"] .accent-icon-cyan {
    background: rgba(0, 224, 255, 0.1);
    color: #00e0ff;
}

[data-theme="dark"] .accent-icon-magenta {
    background: rgba(255, 45, 120, 0.1);
    color: #ff2d78;
}

[data-theme="dark"] .accent-icon-amber {
    background: rgba(255, 234, 0, 0.1);
    color: #ffea00;
}

/* ══════════════════════════════════════════════════════════════
   ACCENT BADGES — Pill-shaped badges with translucent accent bg
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .accent-badge-green {
    background: rgba(0, 230, 118, 0.12);
    color: #00e676;
}

[data-theme="dark"] .accent-badge-cyan {
    background: rgba(0, 224, 255, 0.12);
    color: #00e0ff;
}

[data-theme="dark"] .accent-badge-magenta {
    background: rgba(255, 45, 120, 0.12);
    color: #ff2d78;
}

[data-theme="dark"] .accent-badge-muted {
    background: rgba(255, 255, 255, 0.04);
    color: #4b5563;
}

/* ══════════════════════════════════════════════════════════════
   ACCENT BUTTONS — Ghost buttons with accent color
   ══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .accent-btn-green {
    background: rgba(0, 230, 118, 0.08);
    color: #00e676;
    border: none;
}

    [data-theme="dark"] .accent-btn-green:hover {
        background: rgba(0, 230, 118, 0.18);
    }

[data-theme="dark"] .accent-btn-cyan {
    background: rgba(0, 224, 255, 0.08);
    color: #00e0ff;
    border: none;
}

    [data-theme="dark"] .accent-btn-cyan:hover {
        background: rgba(0, 224, 255, 0.18);
    }

[data-theme="dark"] .accent-btn-magenta {
    background: rgba(255, 45, 120, 0.08);
    color: #ff2d78;
    border: none;
}

    [data-theme="dark"] .accent-btn-magenta:hover {
        background: rgba(255, 45, 120, 0.18);
    }