/**
 * PintarRPH Dark Glassmorphic Theme
 * Matches brand palette from Marketing + Activation Server
 * Replaces ai-theme-enhancements.css
 */

/* ===========================
   Brand Color Palette
   =========================== */
:root {
    /* Core Brand */
    --brand-primary: #60a5fa;
    --brand-indigo: #6366f1;
    --brand-amber: #fbbf24;
    --brand-green: #34d399;
    --brand-green-dark: #10b981;
    --brand-cyan: #22d3ee;
    --brand-purple: #a78bfa;
    --brand-pink: #f9a8d4;
    --brand-red: #ef4444;

    /* Backgrounds */
    --bg-base: #0d0d1f;
    --bg-mid: #16103a;
    --bg-alt: #0a1628;
    --bg-card: rgba(22, 16, 58, 0.6);
    --bg-card-solid: #1a1440;
    --bg-card-alt: #1a1440;
    --bg-card-hover: rgba(30, 24, 72, 0.8);
    --bg-input: rgba(22, 16, 58, 0.8);
    --bg-input-focus: rgba(30, 27, 75, 0.9);
    --bg-sidebar: linear-gradient(180deg, #0d0d1f 0%, #16103a 50%, #1a1052 100%);
    --bg-modal: #16103a;
    --bg-dropdown: #16103a;
    --bg-tooltip: #1a1440;
    --bg-activity-box: rgba(30, 27, 75, 0.55);
    --bg-meta-item: rgba(30, 27, 75, 0.55);

    /* Borders */
    --border-card: rgba(96, 165, 250, 0.15);
    --border-input: rgba(96, 165, 250, 0.25);
    --border-input-focus: rgba(96, 165, 250, 0.6);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-divider: rgba(255, 255, 255, 0.06);
    --border-table: rgba(255, 255, 255, 0.05);

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-tertiary: rgba(255, 255, 255, 0.6);
    --text-muted: rgba(255, 255, 255, 0.35);

    /* Inline label accents (used by templates via var()) */
    --label-accent: #818cf8;
    --label-accent-light: #a5b4fc;
    --label-blue: #60a5fa;
    --label-blue-light: #93c5fd;
    --label-green: #10b981;
    --label-green-light: #6ee7b7;
    --label-amber: #fbbf24;
    --label-amber-light: #fcd34d;
    --label-red: #ef4444;
    --label-red-light: #fca5a5;
    --label-purple: #c084fc;
    --label-pink: #f472b6;
    --label-slate: #94a3b8;
    --label-slate-light: #e2e8f0;

    /* Glassmorphism */
    --glass-blur: blur(12px);
    --glass-bg: rgba(22, 16, 58, 0.6);
    --glass-border: 1px solid rgba(96, 165, 250, 0.15);

    /* Shadows */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-dropdown: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow-blue: 0 0 20px rgba(96, 165, 250, 0.15);
    --shadow-glow-amber: 0 0 25px rgba(251, 191, 36, 0.35), 0 0 60px rgba(251, 191, 36, 0.15);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #60a5fa, #818cf8);
    --gradient-amber: linear-gradient(135deg, #fbbf24, #f59e0b);
    --gradient-green: linear-gradient(135deg, #34d399, #10b981);
    --gradient-purple: linear-gradient(135deg, #a78bfa, #8b5cf6);
    --gradient-cyan: linear-gradient(135deg, #22d3ee, #06b6d4);
    --gradient-danger: linear-gradient(135deg, #ef4444, #dc2626);

    /* Alert backgrounds */
    --alert-primary-bg: rgba(96, 165, 250, 0.1);
    --alert-success-bg: rgba(52, 211, 153, 0.1);
    --alert-info-bg: rgba(34, 211, 238, 0.1);
    --alert-warning-bg: rgba(251, 191, 36, 0.1);
    --alert-danger-bg: rgba(239, 68, 68, 0.1);

    /* Interactive hover */
    --hover-bg: rgba(96, 165, 250, 0.1);
    --hover-bg-subtle: rgba(96, 165, 250, 0.06);

    /* Table */
    --table-stripe-bg: rgba(96, 165, 250, 0.03);
    --table-hover-bg: rgba(96, 165, 250, 0.06);
    --table-header-bg: rgba(96, 165, 250, 0.12);

    /* Scrollbar */
    --scrollbar-track: rgba(13, 13, 31, 0.5);
    --scrollbar-thumb: rgba(96, 165, 250, 0.3);
    --scrollbar-thumb-hover: rgba(96, 165, 250, 0.5);

    /* Loading overlay */
    --loading-bg: rgba(13, 13, 31, 0.9);
}

/* ===========================
   Light Mode — Content Area Only
   Sidebar & topbar stay dark.
   =========================== */
:root[data-theme="light"] {
    /* Backgrounds — Ghost Gray + Pale Lavender palette */
    --bg-base: #F8FAFC;
    --bg-mid: #F8FAFC;
    --bg-alt: #F8FAFC;
    --bg-card: #F3E8FF;
    --bg-card-solid: #F3E8FF;
    --bg-card-alt: #EDE5FB;
    --bg-card-hover: #EBE0FA;
    --bg-input: #FFFFFF;
    --bg-input-focus: #FFFFFF;
    /* --bg-sidebar: stays dark #0d0d1f (inherited) */
    --bg-modal: #F3E8FF;
    --bg-dropdown: #FFFFFF;
    --bg-tooltip: #1E1B4B;
    --bg-activity-box: #EDE5FB;
    --bg-meta-item: #EDE5FB;

    /* Text — Dark theme palette as text colors */
    --text-primary: #0d0d1f;
    --text-secondary: #16103a;
    --text-tertiary: #1a1440;
    --text-muted: #64748B;

    /* Inline label accents — dark theme palette as accent text */
    --label-accent: #6366f1;
    --label-accent-light: #818cf8;
    --label-blue: #3B82F6;
    --label-blue-light: #2563EB;
    --label-green: #059669;
    --label-green-light: #059669;
    --label-amber: #D97706;
    --label-amber-light: #B45309;
    --label-red: #DC2626;
    --label-red-light: #DC2626;
    --label-purple: #7C3AED;
    --label-pink: #DB2777;
    --label-slate: #64748B;
    --label-slate-light: #334155;

    /* Borders — Soft Violet tint */
    --border-card: rgba(139, 92, 246, 0.1);
    --border-input: rgba(139, 92, 246, 0.2);
    --border-input-focus: #4F46E5;
    --border-subtle: rgba(139, 92, 246, 0.08);
    --border-divider: rgba(139, 92, 246, 0.1);
    --border-table: rgba(139, 92, 246, 0.1);

    /* Glassmorphism — disabled in light */
    --glass-blur: none;
    --glass-bg: transparent;
    --glass-border: none;

    /* Shadows — purple-tinted, shadow over border */
    --shadow-card: 0 4px 6px -1px rgba(139, 92, 246, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 10px 15px -3px rgba(139, 92, 246, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-dropdown: 0 4px 12px rgba(139, 92, 246, 0.1);
    --shadow-modal: 0 8px 24px rgba(139, 92, 246, 0.12);
    --shadow-glow-blue: none;
    --shadow-glow-amber: none;

    /* Brand accents — Royal Blue primary, Vivid Amber signature */
    --brand-primary: #4F46E5;
    --brand-indigo: #4F46E5;
    --brand-amber: #D97706;
    --brand-green: #059669;
    --brand-green-dark: #047857;
    --brand-cyan: #0891B2;
    --brand-purple: #7C3AED;
    --brand-pink: #DB2777;
    --brand-red: #DC2626;

    /* Gradients — indigo-based */
    --gradient-primary: linear-gradient(135deg, #4F46E5, #6366F1);
    --gradient-amber: linear-gradient(135deg, #F59E0B, #D97706);
    --gradient-green: linear-gradient(135deg, #10B981, #059669);
    --gradient-purple: linear-gradient(135deg, #8B5CF6, #7C3AED);
    --gradient-cyan: linear-gradient(135deg, #06B6D4, #0891B2);
    --gradient-danger: linear-gradient(135deg, #EF4444, #DC2626);

    /* Alert backgrounds — on lavender base */
    --alert-primary-bg: rgba(79, 70, 229, 0.08);
    --alert-success-bg: rgba(5, 150, 105, 0.08);
    --alert-info-bg: rgba(8, 145, 178, 0.08);
    --alert-warning-bg: rgba(217, 119, 6, 0.08);
    --alert-danger-bg: rgba(220, 38, 38, 0.08);

    /* Interactive hover — purple tint */
    --hover-bg: rgba(79, 70, 229, 0.08);
    --hover-bg-subtle: rgba(79, 70, 229, 0.04);

    /* Table — lavender tinted */
    --table-stripe-bg: #EDE5FB;
    --table-hover-bg: #E8DEFF;
    --table-header-bg: #EDE5FB;

    /* Scrollbar — purple tinted */
    --scrollbar-track: #F3E8FF;
    --scrollbar-thumb: #C4B5FD;
    --scrollbar-thumb-hover: #A78BFA;

    /* Loading overlay */
    --loading-bg: rgba(248, 250, 252, 0.9);
}

/* ===========================
   Global Dark Background
   =========================== */
body {
    background: var(--bg-base) !important;
    min-height: 100vh;
    color: var(--text-primary) !important;
    font-family: 'Plus Jakarta Sans', 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Dark mode body gradient — only when not light */
:root:not([data-theme="light"]) body {
    background: linear-gradient(160deg, var(--bg-base) 0%, var(--bg-mid) 45%, var(--bg-alt) 100%) !important;
}

#wrapper {
    min-height: 100vh;
}

#content-wrapper {
    background: transparent !important;
}

#content {
    background: transparent !important;
}

/* ===========================
   Sidebar — Dark Brand
   =========================== */
.sidebar.bg-gradient-primary,
.bg-gradient-primary {
    background: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border-subtle) !important;
}

.sidebar {
    position: relative;
}

/* Subtle animated gradient accent on sidebar */
.sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        rgba(99, 102, 241, 0.08) 0%,
        rgba(96, 165, 250, 0.04) 50%,
        transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.sidebar * {
    position: relative;
    z-index: 1;
}

.sidebar .sidebar-brand {
    padding: 1.2rem 1rem;
}

.sidebar .sidebar-brand-icon i {
    color: var(--brand-amber) !important;
    font-size: 1.5rem;
}

.sidebar .sidebar-brand-text {
    color: var(--brand-amber) !important;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.sidebar .sidebar-heading {
    font-size: 0.65rem !important;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.sidebar .nav-link {
    color: var(--text-tertiary) !important;
    padding: 0.65rem 1rem;
    border-radius: 0.5rem;
    margin: 0.1rem 0.5rem;
    transition: all 0.25s ease;
}

.sidebar .nav-link:hover {
    color: var(--text-primary) !important;
    background: rgba(96, 165, 250, 0.1) !important;
}

.sidebar .nav-link i {
    width: 20px;
    text-align: center;
    opacity: 0.7;
    transition: opacity 0.25s ease;
}

.sidebar .nav-link:hover i {
    opacity: 1;
}

.sidebar .nav-item.active .nav-link {
    color: var(--text-primary) !important;
    background: rgba(96, 165, 250, 0.15) !important;
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.1);
    font-weight: 600;
}

.sidebar .nav-item.active .nav-link i {
    opacity: 1;
}

.sidebar-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin: 0.5rem 1rem !important;
}

/* Sticky thead */
.thead-light[style*="sticky"] th,
thead[style*="sticky"] th {
    background: var(--bg-card-solid) !important;
    color: var(--text-secondary) !important;
}

/* Sidebar toggle button */
#sidebarToggle,
#sidebarToggle::after {
    background-color: rgba(96, 165, 250, 0.2) !important;
    border: none !important;
    color: var(--brand-primary) !important;
}

#sidebarToggle:hover {
    background-color: rgba(96, 165, 250, 0.3) !important;
}

/* Toggled (collapsed) sidebar overrides */
.sidebar.toggled {
    background: var(--bg-sidebar) !important;
}

/* ===========================
   Topbar — Dark
   =========================== */
.topbar,
.navbar-light.bg-white {
    background: rgba(13, 13, 31, 0.85) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    z-index: 1030 !important;
    flex-wrap: nowrap !important;
}

.topbar .nav-link {
    color: var(--text-tertiary) !important;
}

.topbar .nav-link:hover {
    color: var(--brand-primary) !important;
}

.topbar .topbar-divider {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar .topbar-username,
.topbar .text-gray-600 {
    color: var(--text-secondary) !important;
}

.topbar .img-profile {
    border: 2px solid rgba(96, 165, 250, 0.3);
}

/* Mobile brand in topbar */
.mobile-topbar-brand span.font-weight-bold {
    color: var(--brand-amber) !important;
}

.mobile-topbar-brand .badge {
    background: var(--gradient-amber) !important;
    color: #1a1440 !important;
}

/* Topbar hamburger */
#sidebarToggleTop {
    color: var(--text-tertiary) !important;
}

#sidebarToggleTop:hover {
    color: var(--brand-primary) !important;
}

/* Scroll wrapper for topbar reference links */
.topbar-scroll-wrapper {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(96,165,250,0.25) transparent;
}

.topbar-scroll-wrapper::-webkit-scrollbar {
    height: 3px;
}

.topbar-scroll-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.topbar-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(96,165,250,0.25);
    border-radius: 3px;
}

/* Keep user dropdown pinned — never shrink */
.topbar .navbar-nav.ml-auto {
    flex-shrink: 0 !important;
}

/* Topbar reference links inside scroll wrapper */
.topbar-ref-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    gap: 0.25rem;
}

.topbar-ref-links .nav-link {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.8rem;
    padding: 0.5rem 0.6rem !important;
    border-radius: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.topbar-ref-links .topbar-divider {
    flex-shrink: 0;
}

.topbar-ref-links .nav-item {
    flex-shrink: 0;
}

.topbar-ref-links .nav-link:hover {
    color: #60a5fa !important;
    background: rgba(96, 165, 250, 0.1);
}

.topbar-ref-links .nav-link.active {
    color: #60a5fa !important;
    background: rgba(96, 165, 250, 0.12);
    font-weight: 600;
}

.topbar-ref-links .nav-link i {
    color: #22d3ee;
    font-size: 0.75rem;
}

/* ===========================
   Cards — Glassmorphic
   =========================== */
.card {
    background: var(--bg-card-solid) !important;
    border: var(--glass-border) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--shadow-card) !important;
    transition: all 0.3s ease;
    color: var(--text-primary) !important;
}

.card:hover {
    background: var(--bg-card-hover) !important;
    box-shadow: var(--shadow-card-hover) !important;
    border-color: var(--border-card) !important;
    transform: translateY(-2px);
}

:root:not([data-theme="light"]) .card:hover {
    box-shadow: var(--shadow-card), var(--shadow-glow-amber) !important;
    border-color: rgba(251, 191, 36, 0.25) !important;
}

.card-header {
    background: var(--bg-card-alt) !important;
    border-bottom: 1px solid var(--border-card) !important;
    color: var(--text-primary) !important;
}

:root:not([data-theme="light"]) .card-header {
    background: rgba(96, 165, 250, 0.04) !important;
}

.card-body {
    color: var(--text-primary) !important;
}

/* Border-left accent cards */
.card.border-left-primary {
    border-left: 4px solid var(--brand-primary) !important;
}

.card.border-left-success {
    border-left: 4px solid var(--brand-green) !important;
}

.card.border-left-info {
    border-left: 4px solid var(--brand-cyan) !important;
}

.card.border-left-warning {
    border-left: 4px solid var(--brand-amber) !important;
}

.card.border-left-danger {
    border-left: 4px solid var(--brand-red) !important;
}

/* Metric card text colors */
.text-primary {
    color: var(--brand-primary) !important;
}

.text-success {
    color: var(--brand-green) !important;
}

.text-info {
    color: var(--brand-cyan) !important;
}

.text-warning {
    color: var(--brand-amber) !important;
}

.text-danger {
    color: var(--brand-red) !important;
}

.text-gray-800 {
    color: var(--text-primary) !important;
}

.text-gray-600 {
    color: var(--text-secondary) !important;
}

.text-gray-400,
.text-gray-300 {
    color: var(--text-muted) !important;
}

.text-muted {
    color: var(--text-tertiary) !important;
}

.text-dark {
    color: var(--text-primary) !important;
}

/* ===========================
   Buttons — Brand Gradients
   =========================== */
.btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(96, 165, 250, 0.3);
    color: #fff !important;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    box-shadow: 0 6px 25px rgba(96, 165, 250, 0.5) !important;
    transform: translateY(-1px);
}

.btn-success {
    background: var(--gradient-green) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(52, 211, 153, 0.3);
    color: #fff !important;
    font-weight: 600;
}

.btn-success:hover {
    box-shadow: 0 6px 25px rgba(52, 211, 153, 0.5) !important;
    transform: translateY(-1px);
}

.btn-info {
    background: var(--gradient-cyan) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(34, 211, 238, 0.3);
    color: #fff !important;
    font-weight: 600;
}

.btn-info:hover {
    box-shadow: 0 6px 25px rgba(34, 211, 238, 0.5) !important;
    transform: translateY(-1px);
}

.btn-warning {
    background: var(--gradient-amber) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
    color: #1a1440 !important;
    font-weight: 600;
}

.btn-warning:hover {
    box-shadow: 0 6px 25px rgba(251, 191, 36, 0.5) !important;
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--gradient-danger) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
    color: #fff !important;
    font-weight: 600;
}

.btn-danger:hover {
    box-shadow: 0 6px 25px rgba(239, 68, 68, 0.5) !important;
    transform: translateY(-1px);
}

.btn-secondary {
    background: rgba(96, 165, 250, 0.1) !important;
    border: 1px solid rgba(96, 165, 250, 0.2) !important;
    color: var(--text-secondary) !important;
}

.btn-secondary:hover {
    background: rgba(96, 165, 250, 0.2) !important;
    color: var(--text-primary) !important;
}

.btn-light {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--text-primary) !important;
}

.btn-light:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Outline buttons */
.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: rgba(96, 165, 250, 0.4) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: rgba(96, 165, 250, 0.15) !important;
    color: var(--brand-primary) !important;
}

.btn-outline-success {
    color: var(--brand-green) !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
    background: transparent !important;
}

.btn-outline-success:hover {
    background: rgba(52, 211, 153, 0.15) !important;
    color: var(--brand-green) !important;
}

.btn-outline-info {
    color: var(--brand-cyan) !important;
    border-color: rgba(34, 211, 238, 0.4) !important;
    background: transparent !important;
}

.btn-outline-info:hover {
    background: rgba(34, 211, 238, 0.15) !important;
    color: var(--brand-cyan) !important;
}

.btn-outline-warning {
    color: var(--brand-amber) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
    background: transparent !important;
}

.btn-outline-danger {
    color: var(--brand-red) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    background: transparent !important;
}

/* Icon split button */
.btn-icon-split .icon {
    background: rgba(255, 255, 255, 0.1);
}

/* User form button style */
.btn-user {
    border-radius: 10rem;
    padding: 0.75rem 1rem;
    font-weight: 700;
}

/* ===========================
   Forms — Dark Inputs
   =========================== */
.form-control,
.custom-select,
select.form-control {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-input) !important;
    color: var(--text-primary) !important;
    transition: all 0.25s ease;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

.form-control:focus {
    background: var(--bg-input-focus) !important;
    border-color: var(--border-input-focus) !important;
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25) !important;
    color: var(--text-primary) !important;
}

.form-control:disabled,
.form-control[readonly] {
    background: var(--bg-card-alt) !important;
    color: var(--text-muted) !important;
    opacity: 0.7;
}

/* Form user (login page rounded inputs) */
.form-control-user {
    border-radius: 10rem !important;
    padding: 0.75rem 1.5rem !important;
}

/* Labels */
label,
.form-group label {
    color: var(--text-secondary) !important;
    font-weight: 600;
}

.form-text,
.form-text.text-muted {
    color: var(--text-muted) !important;
}

/* Custom file input */
.custom-file-label {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-secondary) !important;
}

.custom-file-label::after {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    border: none !important;
}

/* ===========================
   Select2 Dark Theme
   =========================== */
.select2-container .select2-selection,
.select2-container--default .select2-selection,
.select2-container--bootstrap4 .select2-selection {
    background: var(--bg-input) !important;
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-input) !important;
    color: var(--text-primary) !important;
}

.select2-container .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
    background: transparent !important;
}

.select2-container .select2-selection--single .select2-selection__placeholder,
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: var(--text-muted) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-muted) transparent transparent transparent !important;
}

.select2-dropdown {
    background: var(--bg-card-solid) !important;
    background-color: var(--bg-card-solid) !important;
    border: 1px solid var(--border-card) !important;
}

.select2-results__option {
    color: var(--text-secondary) !important;
    background: transparent !important;
}

.select2-results__option--highlighted,
.select2-results__option[aria-selected=true] {
    background: rgba(96, 165, 250, 0.2) !important;
    color: var(--text-primary) !important;
}

.select2-search__field,
.select2-search--dropdown .select2-search__field {
    background: var(--bg-input) !important;
    background-color: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

.select2-container--default .select2-results > .select2-results__options {
    background: var(--bg-card-solid) !important;
}

/* ===========================
   Alerts — Dark Glassmorphic
   =========================== */
.alert {
    border-radius: 0.5rem;
}

.alert-primary {
    background: var(--alert-primary-bg) !important;
    border-color: var(--border-card) !important;
    color: var(--brand-primary) !important;
}

.alert-success {
    background: var(--alert-success-bg) !important;
    border-color: var(--border-card) !important;
    color: var(--brand-green) !important;
}

.alert-info {
    background: var(--alert-info-bg) !important;
    border-color: var(--border-card) !important;
    color: var(--brand-cyan) !important;
}

.alert-warning {
    background: var(--alert-warning-bg) !important;
    border-color: var(--border-card) !important;
    color: var(--brand-amber) !important;
}

.alert-danger {
    background: var(--alert-danger-bg) !important;
    border-color: var(--border-card) !important;
    color: var(--brand-red) !important;
}

.alert-light {
    background: var(--bg-card-alt) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-secondary) !important;
}

.alert .close {
    color: var(--text-secondary) !important;
    text-shadow: none !important;
}

/* ===========================
   Badges — Brand Colors
   =========================== */
.badge-primary {
    background: var(--gradient-primary) !important;
    color: #fff !important;
}

.badge-success {
    background: var(--brand-green-dark) !important;
    color: #fff !important;
}

.badge-info {
    background: rgba(34, 211, 238, 0.2) !important;
    color: var(--brand-cyan) !important;
}

.badge-warning {
    background: rgba(251, 191, 36, 0.2) !important;
    color: var(--brand-amber) !important;
}

.badge-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

.badge-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-tertiary) !important;
}

.badge-light {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-secondary) !important;
}

/* BETA Feature Badge */
.badge-beta {
    display: inline-block;
    font-size: 0.45rem;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 1px 4px;
    margin-left: 2px;
    border-radius: 3px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a1440;
    vertical-align: text-top;
    line-height: 1.2;
    cursor: help;
    position: relative;
    top: -4px;
}

.badge-beta:hover::after {
    content: attr(title);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 10, 40, 0.97);
    color: #e2e8f0;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    white-space: normal;
    width: 280px;
    line-height: 1.5;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.badge-beta:hover::before {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: rgba(251, 191, 36, 0.3);
    z-index: 10000;
    pointer-events: none;
}

/* ===========================
   Tables — Dark
   =========================== */
.table {
    color: var(--text-secondary) !important;
}

.table thead th {
    color: var(--text-tertiary) !important;
    border-bottom: 2px solid var(--border-card) !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.table td,
.table th {
    border-top: 1px solid var(--border-table) !important;
}

.table-hover tbody tr:hover {
    background: var(--table-hover-bg) !important;
    color: var(--text-primary) !important;
}

.table-bordered {
    border: 1px solid var(--border-subtle) !important;
}

.table-bordered td,
.table-bordered th {
    border: 1px solid var(--border-subtle) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: var(--table-stripe-bg) !important;
}

/* Table contextual row colors */
.thead-light th {
    background: var(--table-header-bg) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-subtle) !important;
}

.table-warning,
.table-warning > td,
.table-warning > th {
    background: rgba(251, 191, 36, 0.12) !important;
    color: #fbbf24 !important;
}

.table-danger,
.table-danger > td,
.table-danger > th {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
}

.table-secondary,
.table-secondary > td,
.table-secondary > th {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.table-info,
.table-info > td,
.table-info > th {
    background: rgba(34, 211, 238, 0.1) !important;
    color: #22d3ee !important;
}

.table-success,
.table-success > td,
.table-success > th {
    background: rgba(52, 211, 153, 0.1) !important;
    color: #34d399 !important;
}

.table-primary,
.table-primary > td,
.table-primary > th {
    background: rgba(96, 165, 250, 0.1) !important;
    color: #60a5fa !important;
}

/* Sticky thead — uses variable-based rule above sidebar-divider */

/* ===========================
   Dropdowns — Dark
   =========================== */
.dropdown-menu {
    background: var(--bg-dropdown) !important;
    border: var(--glass-border) !important;
    box-shadow: var(--shadow-dropdown) !important;
    z-index: 1050 !important;
}

.dropdown-item {
    color: var(--text-secondary) !important;
    transition: all 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--hover-bg) !important;
    color: var(--brand-primary) !important;
}

.dropdown-item i {
    color: var(--text-muted) !important;
}

.dropdown-item:hover i {
    color: var(--brand-primary) !important;
}

.dropdown-divider {
    border-top: 1px solid var(--border-divider) !important;
}

/* ===========================
   Modals — Dark Glassmorphic
   =========================== */
.modal-content {
    background: var(--bg-modal) !important;
    border: var(--glass-border) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-modal);
}

.modal-header {
    border-bottom: 1px solid var(--border-divider) !important;
    color: var(--text-primary) !important;
}

.modal-header .close {
    color: var(--text-secondary) !important;
    text-shadow: none !important;
}

.modal-footer {
    border-top: 1px solid var(--border-divider) !important;
}

.modal-body {
    color: var(--text-secondary) !important;
}

.modal-title {
    color: var(--text-primary) !important;
}

.modal-backdrop.show {
    opacity: 0.7;
}

/* ===========================
   Footer — Dark
   =========================== */
.sticky-footer,
.sticky-footer.bg-white {
    background: rgba(13, 13, 31, 0.95) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

.sticky-footer .copyright {
    color: var(--text-tertiary) !important;
}

.sticky-footer strong {
    color: var(--text-secondary) !important;
}

.sticky-footer a {
    color: var(--brand-primary) !important;
}

.sticky-footer a:hover {
    color: var(--brand-cyan) !important;
}

/* ===========================
   List Groups — Dark
   =========================== */
.list-group-item {
    background: transparent !important;
    border-color: var(--border-table) !important;
    color: var(--text-secondary) !important;
}

.list-group-item:hover {
    background: var(--hover-bg-subtle) !important;
}

.list-group-item-primary {
    background: var(--hover-bg) !important;
    color: var(--brand-primary) !important;
}

/* Activity items */
.activity-item {
    border-left: 3px solid transparent !important;
    border-bottom: 1px solid var(--border-table) !important;
}

.activity-item:hover {
    border-left-color: var(--brand-primary) !important;
    background: var(--hover-bg-subtle) !important;
}

/* Icon circles */
.icon-circle {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.bg-primary {
    background: var(--gradient-primary) !important;
}

.bg-success {
    background: var(--gradient-green) !important;
}

.bg-info {
    background: var(--gradient-cyan) !important;
}

.bg-warning {
    background: var(--gradient-amber) !important;
}

.bg-danger {
    background: var(--gradient-danger) !important;
}

.bg-secondary {
    background: var(--bg-card-alt) !important;
}

.bg-light {
    background: var(--bg-card-alt) !important;
}

.table-light,
.table-light > td,
.table-light > th {
    background: var(--table-header-bg) !important;
    color: var(--text-secondary) !important;
}

.bg-white {
    background: transparent !important;
}

/* ===========================
   Progress Bar
   =========================== */
.progress {
    background: var(--hover-bg) !important;
    border-radius: 0.5rem;
}

.progress-bar {
    background: var(--gradient-primary) !important;
}

/* ===========================
   Spinner
   =========================== */
.spinner-border {
    color: var(--brand-primary) !important;
}

/* ===========================
   Scroll to Top
   =========================== */
.scroll-to-top {
    background: var(--gradient-amber) !important;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3) !important;
}

.scroll-to-top:hover {
    box-shadow: 0 6px 25px rgba(251, 191, 36, 0.5) !important;
}

.scroll-to-top i {
    color: #1a1440 !important;
}

/* ===========================
   Links
   =========================== */
a {
    color: var(--brand-primary);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--brand-cyan);
}

.text-decoration-none {
    text-decoration: none !important;
}

/* ===========================
   Pagination
   =========================== */
.page-link {
    background: var(--bg-input) !important;
    border-color: var(--border-card) !important;
    color: var(--text-secondary) !important;
}

.page-link:hover {
    background: rgba(96, 165, 250, 0.15) !important;
    color: var(--brand-primary) !important;
}

.page-item.active .page-link {
    background: var(--gradient-primary) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.page-item.disabled .page-link {
    background: rgba(22, 16, 58, 0.4) !important;
    color: var(--text-muted) !important;
}

/* ===========================
   Borders Override
   =========================== */
.border {
    border-color: var(--border-subtle) !important;
}

.border-top,
.border-bottom,
.border-left,
.border-right {
    border-color: var(--border-subtle) !important;
}

.border-primary {
    border-color: rgba(96, 165, 250, 0.3) !important;
}

.border-info {
    border-color: rgba(34, 211, 238, 0.3) !important;
}

.border-warning {
    border-color: rgba(251, 191, 36, 0.3) !important;
}

/* ===========================
   Utility Overrides
   =========================== */
.shadow {
    box-shadow: var(--shadow-card) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-modal) !important;
}

.o-hidden {
    overflow: hidden !important;
}

/* SB Admin 2 background override */
.bg-gradient-primary {
    background: var(--bg-sidebar) !important;
}

/* ===========================
   Smooth Transitions
   (Only on interactive elements, not * which causes layout thrashing)
   =========================== */
a, .nav-link, .btn, .card, .form-control, .custom-select, .badge, .alert {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

/* ===========================
   Custom Animations
   =========================== */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(96, 165, 250, 0.2);
    }
    50% {
        box-shadow: 0 0 30px rgba(96, 165, 250, 0.4);
    }
}

.ai-glow-pulse {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ===========================
   Responsive — Mobile
   =========================== */
@media (max-width: 768px) {
    .card:hover {
        transform: none;
    }

    .btn:hover {
        transform: none;
    }
}

/* ===========================
   Custom Scrollbar
   =========================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ===========================
   Loading Overlay Dark
   =========================== */
.loading-overlay {
    background: var(--loading-bg) !important;
    backdrop-filter: blur(8px);
}

.loading-content {
    color: var(--text-primary) !important;
}

.loading-message {
    color: var(--text-primary) !important;
}

/* ===========================
   Accordion (Collapsible Cards)
   =========================== */
.accordion .card-header {
    cursor: pointer;
}

.accordion .card-header:hover {
    background: var(--hover-bg) !important;
}

/* ===========================
   Nav Tabs / Pills
   =========================== */
.nav-tabs {
    border-bottom: 1px solid var(--border-divider) !important;
}

.nav-tabs .nav-link {
    color: var(--text-tertiary) !important;
    border: none !important;
}

.nav-tabs .nav-link:hover {
    color: var(--text-primary) !important;
    border-bottom: 2px solid rgba(96, 165, 250, 0.3) !important;
}

.nav-tabs .nav-link.active {
    background: transparent !important;
    color: var(--brand-primary) !important;
    border-bottom: 2px solid var(--brand-primary) !important;
}

/* ===========================
   Breadcrumb
   =========================== */
.breadcrumb {
    background: var(--hover-bg-subtle) !important;
    border: 1px solid var(--border-card) !important;
}

.breadcrumb-item {
    color: var(--text-tertiary) !important;
}

.breadcrumb-item.active {
    color: var(--text-primary) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted) !important;
}

/* ===========================
   Studio Chat (if applicable)
   =========================== */
.message-bubble {
    background: var(--glass-bg) !important;
    border: var(--glass-border) !important;
    color: var(--text-primary) !important;
}

.chat-container {
    background: transparent !important;
}

.chat-input-area {
    background: var(--loading-bg) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

/* ===========================
   Light Mode — Specific Overrides
   Elements that can't be fully controlled via variables alone.
   =========================== */

/* Light mode: content area background */
[data-theme="light"] #content-wrapper,
[data-theme="light"] #content {
    background: var(--bg-base) !important;
}

/* Light mode: remove glow animations */
[data-theme="light"] .ai-glow-pulse {
    animation: none;
}

/* Light mode: badges need darker text */
[data-theme="light"] .badge-info {
    background: rgba(8, 145, 178, 0.1) !important;
    color: var(--brand-cyan) !important;
}

[data-theme="light"] .badge-warning {
    background: rgba(217, 119, 6, 0.1) !important;
    color: var(--brand-amber) !important;
}

[data-theme="light"] .badge-danger {
    background: rgba(220, 38, 38, 0.1) !important;
    color: var(--brand-red) !important;
}

[data-theme="light"] .badge-secondary {
    background: #F1F5F9 !important;
    color: var(--text-tertiary) !important;
}

[data-theme="light"] .badge-light {
    background: #F1F5F9 !important;
    color: var(--text-secondary) !important;
}

/* Light mode: buttons — remove glow shadows */
[data-theme="light"] .btn-primary {
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .btn-primary:focus {
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35) !important;
}

[data-theme="light"] .btn-success {
    box-shadow: 0 1px 3px rgba(5, 150, 105, 0.3);
}

[data-theme="light"] .btn-info {
    box-shadow: 0 1px 3px rgba(8, 145, 178, 0.3);
}

[data-theme="light"] .btn-warning {
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.3);
}

[data-theme="light"] .btn-danger {
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3);
}

[data-theme="light"] .btn-secondary {
    background: #F1F5F9 !important;
    border: 1px solid #D1D5DB !important;
    color: var(--text-secondary) !important;
}

[data-theme="light"] .btn-secondary:hover {
    background: #E2E8F0 !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .btn-light {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .btn-light:hover {
    background: #F1F5F9 !important;
}

/* Light mode: outline buttons — white bg instead of transparent on lavender */
[data-theme="light"] .btn-outline-primary {
    border-color: var(--brand-primary) !important;
    background: #FFFFFF !important;
    color: var(--brand-primary) !important;
}
[data-theme="light"] .btn-outline-primary:hover {
    background: var(--brand-primary) !important;
    color: #FFFFFF !important;
}

[data-theme="light"] .btn-outline-success {
    border-color: var(--brand-green) !important;
    background: #FFFFFF !important;
    color: var(--brand-green) !important;
}
[data-theme="light"] .btn-outline-success:hover {
    background: var(--brand-green) !important;
    color: #FFFFFF !important;
}

[data-theme="light"] .btn-outline-info {
    border-color: var(--brand-cyan) !important;
    background: #FFFFFF !important;
    color: var(--brand-cyan) !important;
}
[data-theme="light"] .btn-outline-info:hover {
    background: var(--brand-cyan) !important;
    color: #FFFFFF !important;
}

[data-theme="light"] .btn-outline-warning {
    border-color: var(--brand-amber) !important;
    background: #FFFFFF !important;
    color: var(--brand-amber) !important;
}
[data-theme="light"] .btn-outline-warning:hover {
    background: var(--brand-amber) !important;
    color: #FFFFFF !important;
}

[data-theme="light"] .btn-outline-danger {
    border-color: var(--brand-red) !important;
    background: #FFFFFF !important;
    color: var(--brand-red) !important;
}
[data-theme="light"] .btn-outline-danger:hover {
    background: var(--brand-red) !important;
    color: #FFFFFF !important;
}

/* Light mode: secondary button — white bg */
[data-theme="light"] .btn-secondary {
    background: #FFFFFF !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    color: #16103a !important;
}
[data-theme="light"] .btn-secondary:hover {
    background: #EDE5FB !important;
    color: #0d0d1f !important;
}

/* Light mode: icon split buttons */
[data-theme="light"] .btn-icon-split .icon {
    background: rgba(0, 0, 0, 0.06);
}

/* Light mode: scroll-to-top */
[data-theme="light"] .scroll-to-top {
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.2) !important;
}

[data-theme="light"] .scroll-to-top i {
    color: #fff !important;
}

/* Light mode: Select2 dropdown */
[data-theme="light"] .select2-results__option--highlighted,
[data-theme="light"] .select2-results__option[aria-selected=true] {
    background: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] .select2-container--default .select2-results > .select2-results__options {
    background: #FFFFFF !important;
}

/* Light mode: table contextual rows */
[data-theme="light"] .table-warning,
[data-theme="light"] .table-warning > td,
[data-theme="light"] .table-warning > th {
    background: rgba(217, 119, 6, 0.08) !important;
    color: var(--brand-amber) !important;
}

[data-theme="light"] .table-danger,
[data-theme="light"] .table-danger > td,
[data-theme="light"] .table-danger > th {
    background: rgba(220, 38, 38, 0.08) !important;
    color: var(--brand-red) !important;
}

[data-theme="light"] .table-secondary,
[data-theme="light"] .table-secondary > td,
[data-theme="light"] .table-secondary > th {
    background: #F8FAFC !important;
    color: var(--text-secondary) !important;
}

[data-theme="light"] .table-info,
[data-theme="light"] .table-info > td,
[data-theme="light"] .table-info > th {
    background: rgba(8, 145, 178, 0.06) !important;
    color: var(--brand-cyan) !important;
}

[data-theme="light"] .table-success,
[data-theme="light"] .table-success > td,
[data-theme="light"] .table-success > th {
    background: rgba(5, 150, 105, 0.06) !important;
    color: var(--brand-green) !important;
}

[data-theme="light"] .table-primary,
[data-theme="light"] .table-primary > td,
[data-theme="light"] .table-primary > th {
    background: rgba(59, 130, 246, 0.06) !important;
    color: var(--brand-primary) !important;
}

/* Light mode: .bg-white should be white — but NOT the topbar (it stays dark) */
[data-theme="light"] .bg-white:not(.topbar):not(.navbar-light) {
    background: #FFFFFF !important;
}

/* Light mode: .bg-light — use lighter lavender */
[data-theme="light"] .bg-light:not(.topbar) {
    background: #EDE5FB !important;
}

/* Light mode: all table headers */
[data-theme="light"] .thead-light th,
[data-theme="light"] .table thead th {
    background: linear-gradient(135deg, #4338CA, #7C3AED) !important;
    color: #FFFFFF !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
}

/* Light mode: table cells */
[data-theme="light"] .table td {
    color: #0d0d1f !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
}

/* Light mode: table hover */
[data-theme="light"] .table-hover tbody tr:hover {
    background: rgba(79, 70, 229, 0.04) !important;
}

/* Light mode: table links */
[data-theme="light"] .table td a {
    color: #4338CA !important;
}

[data-theme="light"] .table td a:hover {
    color: #7C3AED !important;
}

/* Light mode: .text-primary, .text-info, .text-success etc — use indigo palette */
/* BUT NOT inside card-header (which has gradient bg with white text) */
[data-theme="light"] #content-wrapper .text-primary:not(.card-header .text-primary) {
    color: #4F46E5 !important;
}

[data-theme="light"] #content-wrapper .text-info:not(.card-header .text-info) {
    color: #0891B2 !important;
}

[data-theme="light"] #content-wrapper .text-success:not(.card-header .text-success) {
    color: #059669 !important;
}

[data-theme="light"] #content-wrapper .text-warning:not(.card-header .text-warning) {
    color: #D97706 !important;
}

[data-theme="light"] #content-wrapper .text-danger:not(.card-header .text-danger) {
    color: #DC2626 !important;
}

[data-theme="light"] #content-wrapper .text-muted:not(.card-header .text-muted) {
    color: #64748B !important;
}

/* Force white text inside card-header — must win over .text-primary etc */
[data-theme="light"] .card-header .text-primary,
[data-theme="light"] .card-header .text-info,
[data-theme="light"] .card-header .text-success,
[data-theme="light"] .card-header .text-warning,
[data-theme="light"] .card-header .text-danger,
[data-theme="light"] .card-header .text-white,
[data-theme="light"] .card-header .text-muted,
[data-theme="light"] #content-wrapper .card-header .text-primary,
[data-theme="light"] #content-wrapper .card-header .text-info,
[data-theme="light"] #content-wrapper .card-header .text-success,
[data-theme="light"] #content-wrapper .card-header .text-warning,
[data-theme="light"] #content-wrapper .card-header .text-danger {
    color: #FFFFFF !important;
}

/* Light mode: custom switch labels */
[data-theme="light"] .custom-control-label {
    color: #0d0d1f;
}

/* Light mode: .card .bg-light inside forms */
[data-theme="light"] .card .bg-light {
    background: #EDE5FB !important;
    border: 1px solid rgba(139, 92, 246, 0.1) !important;
}

/* Light mode: pagination disabled */
[data-theme="light"] .page-item.disabled .page-link {
    background: #F1F5F9 !important;
}

/* Light mode: footer */
[data-theme="light"] .sticky-footer,
[data-theme="light"] .sticky-footer.bg-white {
    background: #F3E8FF !important;
    border-top: 1px solid rgba(139, 92, 246, 0.1) !important;
}

[data-theme="light"] .sticky-footer .copyright {
    color: var(--text-tertiary) !important;
}

[data-theme="light"] .sticky-footer strong {
    color: var(--text-secondary) !important;
}

/* Light mode: loading overlay — no blur needed */
[data-theme="light"] .loading-overlay {
    backdrop-filter: none;
}

/* Light mode: sidebar & topbar STAY DARK — force dark-mode token values and appearance */
[data-theme="light"] .topbar,
[data-theme="light"] .navbar-light.bg-white {
    background: #0d0d1f !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="light"] .topbar .topbar-divider {
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="light"] .topbar .img-profile {
    border: 2px solid rgba(96, 165, 250, 0.3) !important;
}

[data-theme="light"] .sidebar,
[data-theme="light"] .sidebar *,
[data-theme="light"] .topbar,
[data-theme="light"] .topbar *,
[data-theme="light"] .mobile-bottom-nav,
[data-theme="light"] .mobile-bottom-nav * {
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-tertiary: rgba(255, 255, 255, 0.6);
    --text-muted: rgba(255, 255, 255, 0.35);
    --label-accent: #818cf8;
    --label-accent-light: #a5b4fc;
    --label-blue: #60a5fa;
    --label-blue-light: #93c5fd;
    --label-green: #10b981;
    --label-green-light: #6ee7b7;
    --label-amber: #fbbf24;
    --label-amber-light: #fcd34d;
    --label-red: #ef4444;
    --label-red-light: #fca5a5;
    --label-purple: #c084fc;
    --label-pink: #f472b6;
    --label-slate: #94a3b8;
    --label-slate-light: #e2e8f0;
    --brand-primary: #60a5fa;
    --brand-indigo: #6366f1;
    --brand-amber: #fbbf24;
    --brand-green: #34d399;
    --brand-green-dark: #10b981;
    --brand-cyan: #22d3ee;
    --brand-purple: #a78bfa;
    --brand-pink: #f9a8d4;
    --brand-red: #ef4444;
    --border-card: rgba(96, 165, 250, 0.15);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --bg-card-solid: #1a1440;
    --bg-base: #0d0d1f;
    --hover-bg: rgba(96, 165, 250, 0.1);
}

/* Light mode: card depth — shadow over border, lavender palette, keep left accent */
[data-theme="light"] .card {
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    box-shadow: var(--shadow-card) !important;
}

/* Remove bootstrap .shadow dark box-shadow in light mode */
[data-theme="light"] .shadow {
    box-shadow: var(--shadow-card) !important;
}

[data-theme="light"] .shadow-sm {
    box-shadow: 0 2px 4px -1px rgba(139, 92, 246, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.04) !important;
}

/* Preserve border-left accent on cards (same as dark theme) */
[data-theme="light"] .card.border-left-primary {
    border-left: 4px solid var(--brand-primary) !important;
}
[data-theme="light"] .card.border-left-success {
    border-left: 4px solid var(--brand-green) !important;
}
[data-theme="light"] .card.border-left-info {
    border-left: 4px solid var(--brand-cyan) !important;
}
[data-theme="light"] .card.border-left-warning {
    border-left: 4px solid var(--brand-amber) !important;
}
[data-theme="light"] .card.border-left-danger {
    border-left: 4px solid var(--brand-red) !important;
}
/* Metric cards with inline border-left — keep accent, fix other borders */
[data-theme="light"] .card[style*="border-left"] {
    border-left-width: 4px !important;
    border-left-style: solid !important;
    border-top: 1px solid rgba(139, 92, 246, 0.12) !important;
    border-right: 1px solid rgba(139, 92, 246, 0.12) !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.12) !important;
}

/* Override any inline border-color that targets dark theme */
[data-theme="light"] .card[style*="border-color"] {
    border-color: rgba(139, 92, 246, 0.12) !important;
}

/* Card header — indigo-purple gradient strip, MySyarikat style */
[data-theme="light"] .card-header {
    background: linear-gradient(135deg, #4338CA, #7C3AED) !important;
    color: #FFFFFF !important;
    border-bottom: none !important;
}

[data-theme="light"] .card-header h6,
[data-theme="light"] .card-header .font-weight-bold,
[data-theme="light"] .card-header .m-0,
[data-theme="light"] .card-header i,
[data-theme="light"] .card-header span,
[data-theme="light"] .card-header a {
    color: #FFFFFF !important;
}

/* Card header with bg-gradient-primary — same treatment */
[data-theme="light"] .card-header.bg-gradient-primary {
    background: linear-gradient(135deg, #4338CA, #7C3AED) !important;
}

[data-theme="light"] .card-header.bg-gradient-primary * {
    color: #FFFFFF !important;
}

[data-theme="light"] .card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover) !important;
}

/* Light mode: form helper text */
[data-theme="light"] .form-text,
[data-theme="light"] small.text-muted,
[data-theme="light"] .text-muted {
    color: #6B7280 !important;
}

/* Light mode: card header gradient (RPH/RPT info cards) — exclude sidebar */
[data-theme="light"] .card .bg-gradient-primary,
[data-theme="light"] .card-header.bg-gradient-primary {
    background: var(--gradient-primary) !important;
    color: #fff !important;
}

[data-theme="light"] .card .bg-gradient-primary *,
[data-theme="light"] .card-header.bg-gradient-primary * {
    color: #fff !important;
}

/* Light mode: form labels */
[data-theme="light"] label {
    color: var(--text-primary) !important;
    font-weight: 600;
}

/* Light mode: select dropdowns — purple-tinted */
[data-theme="light"] .select2-container--default .select2-selection--single {
    background: #FFFFFF !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
}

[data-theme="light"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
}

[data-theme="light"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--text-muted) !important;
}

[data-theme="light"] .select2-dropdown {
    background: #FFFFFF !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    box-shadow: var(--shadow-dropdown) !important;
}

/* Light mode: modal backdrop — lighter */
/* Light mode: modal — global overrides */
[data-theme="light"] .modal-backdrop.show {
    opacity: 0.5;
}

[data-theme="light"] .modal-content {
    background: #F3E8FF !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    color: #0d0d1f !important;
}

[data-theme="light"] .modal-header {
    border-bottom: 1px solid rgba(139, 92, 246, 0.1) !important;
    color: #0d0d1f !important;
}

[data-theme="light"] .modal-header .modal-title,
[data-theme="light"] .modal-header h5,
[data-theme="light"] .modal-header h4 {
    color: #0d0d1f !important;
}

[data-theme="light"] .modal-header .close {
    color: #0d0d1f !important;
    opacity: 0.6;
}

[data-theme="light"] .modal-body {
    color: #0d0d1f !important;
}

[data-theme="light"] .modal-body label {
    color: #16103a !important;
}

[data-theme="light"] .modal-footer {
    border-top: 1px solid rgba(139, 92, 246, 0.1) !important;
}

/* Modal buttons — Batal/Cancel */
[data-theme="light"] .modal-footer .btn-secondary,
[data-theme="light"] .modal .btn-secondary,
[data-theme="light"] .modal .btn[data-dismiss="modal"] {
    background: #FFFFFF !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    color: #16103a !important;
}

/* Light mode: force dark text on content area — use dark theme palette */
/* Exclude sidebar, topbar, mobile-bottom-nav (they stay dark with white text) */
[data-theme="light"] #content-wrapper .text-white,
[data-theme="light"] #content-wrapper .text-gray-800 {
    color: #0d0d1f !important;
}

/* Inline rgba(255,255,255,*) text in content area — override to dark theme mid */
[data-theme="light"] #content-wrapper [style*="color: rgba(255"],
[data-theme="light"] #content-wrapper [style*="color:rgba(255"] {
    color: #16103a !important;
}

/* Stat card numbers — dark theme base color */
[data-theme="light"] .metric-card .h5,
[data-theme="light"] .metric-card .h4,
[data-theme="light"] .metric-card .h3 {
    color: #0d0d1f !important;
}

/* Branding header (school name banner) — keep visible on gradient */
[data-theme="light"] .branding-header {
    background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(139,92,246,0.08)) !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
}

/* Roster/class cards — dark text on lavender */
[data-theme="light"] .roster-card .text-white,
[data-theme="light"] .roster-card h6,
[data-theme="light"] .roster-card .font-weight-bold {
    color: var(--text-primary) !important;
}

/* Mastery bar bg — visible on lavender */
[data-theme="light"] .mastery-bar {
    background: rgba(139, 92, 246, 0.1) !important;
}

/* Icon circles in cards — adjust for lavender bg */
[data-theme="light"] .icon-circle {
    opacity: 0.7;
}

/* Empty state icons and text — visible on lavender */
[data-theme="light"] .card-body .fa-3x,
[data-theme="light"] .card-body .fa-2x {
    color: rgba(79, 70, 229, 0.25) !important;
}

/* Card header text — always white on gradient header */
[data-theme="light"] .card-header h6,
[data-theme="light"] .card-header .font-weight-bold,
[data-theme="light"] .card-header .m-0,
[data-theme="light"] #content-wrapper .card-header h6,
[data-theme="light"] #content-wrapper .card-header .font-weight-bold {
    color: #FFFFFF !important;
}

/* Light mode: .bg-gradient-primary stays dark (sidebar) */

/* Light mode: BETA badge tooltip bg */
[data-theme="light"] .badge-beta:hover::after {
    background: #1F2937;
    border-color: rgba(217, 119, 6, 0.3);
}

/* ===========================
   Light Mode: Form Controls
   =========================== */
[data-theme="light"] .form-control {
    background: #FFFFFF !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    color: #0d0d1f !important;
}

[data-theme="light"] .form-control:focus {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15) !important;
}

[data-theme="light"] .form-control::placeholder {
    color: #94A3B8 !important;
}

[data-theme="light"] .custom-file-label {
    background: #FFFFFF !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    color: #64748B !important;
}

[data-theme="light"] .custom-file-label::after {
    background: linear-gradient(135deg, #4338CA, #7C3AED) !important;
    color: #FFFFFF !important;
    border-left: 1px solid rgba(139, 92, 246, 0.2) !important;
}

[data-theme="light"] .input-group-append .btn-outline-secondary,
[data-theme="light"] .input-group-prepend .btn-outline-secondary {
    border-color: rgba(139, 92, 246, 0.2) !important;
    color: #64748B !important;
    background: #F8FAFC !important;
}

[data-theme="light"] .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #4F46E5 !important;
    border-color: #4F46E5 !important;
}

[data-theme="light"] .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #4F46E5 !important;
}

/* ===========================
   Light Mode: Nav Tabs
   =========================== */
[data-theme="light"] .nav-tabs {
    border-bottom-color: rgba(139, 92, 246, 0.15) !important;
}

[data-theme="light"] .nav-tabs .nav-link {
    color: #64748B !important;
}

[data-theme="light"] .nav-tabs .nav-link:hover {
    border-color: rgba(139, 92, 246, 0.15) rgba(139, 92, 246, 0.15) transparent !important;
    color: #4F46E5 !important;
}

[data-theme="light"] .nav-tabs .nav-link.active {
    color: #4F46E5 !important;
    background: #FFFFFF !important;
    border-color: rgba(139, 92, 246, 0.15) rgba(139, 92, 246, 0.15) #FFFFFF !important;
}

/* ===========================
   Light Mode: Alerts
   =========================== */
[data-theme="light"] .alert-info {
    background: rgba(8, 145, 178, 0.08) !important;
    border-color: rgba(8, 145, 178, 0.2) !important;
    color: #0C4A6E !important;
}

[data-theme="light"] .alert-success {
    background: rgba(5, 150, 105, 0.08) !important;
    border-color: rgba(5, 150, 105, 0.2) !important;
    color: #064E3B !important;
}

[data-theme="light"] .alert-warning {
    background: rgba(217, 119, 6, 0.08) !important;
    border-color: rgba(217, 119, 6, 0.2) !important;
    color: #78350F !important;
}

[data-theme="light"] .alert-danger {
    background: rgba(220, 38, 38, 0.08) !important;
    border-color: rgba(220, 38, 38, 0.2) !important;
    color: #7F1D1D !important;
}

[data-theme="light"] .alert .close {
    color: #64748B !important;
}

[data-theme="light"] .alert a,
[data-theme="light"] .alert .alert-link {
    color: inherit !important;
    font-weight: 700;
    text-decoration: underline;
}

/* ===========================
   Light Mode: Badges (contextual)
   =========================== */
[data-theme="light"] .badge-primary {
    background: rgba(79, 70, 229, 0.12) !important;
    color: #4F46E5 !important;
}

[data-theme="light"] .badge-success {
    background: rgba(5, 150, 105, 0.12) !important;
    color: #059669 !important;
}

/* ===========================
   Light Mode: Pagination
   =========================== */
[data-theme="light"] .page-item .page-link {
    background: #FFFFFF !important;
    border-color: rgba(139, 92, 246, 0.15) !important;
    color: #4F46E5 !important;
}

[data-theme="light"] .page-item.active .page-link {
    background: linear-gradient(135deg, #4338CA, #7C3AED) !important;
    border-color: #4338CA !important;
    color: #FFFFFF !important;
}

/* ===========================
   Light Mode: Horizontal Rules
   =========================== */
[data-theme="light"] #content-wrapper hr {
    border-color: rgba(139, 92, 246, 0.1) !important;
}

/* ===========================
   Light Mode: Referral Cards
   =========================== */
[data-theme="light"] .ref-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.06) !important;
}

/* ===========================
   Light Mode: Dropdowns (Bootstrap)
   =========================== */
[data-theme="light"] .dropdown-menu {
    background: #FFFFFF !important;
    border: 1px solid rgba(139, 92, 246, 0.15) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1) !important;
}

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

[data-theme="light"] .dropdown-item:hover,
[data-theme="light"] .dropdown-item:focus {
    background: rgba(79, 70, 229, 0.06) !important;
    color: #4F46E5 !important;
}

/* ===========================
   Light Mode: Progress Bars
   =========================== */
[data-theme="light"] .progress {
    background: rgba(139, 92, 246, 0.08) !important;
}

/* ===========================
   Light Mode: List Groups
   =========================== */
[data-theme="light"] .list-group-item {
    background: #FFFFFF !important;
    border-color: rgba(139, 92, 246, 0.1) !important;
    color: #0d0d1f !important;
}

/* ===========================
   Light Mode: Generating / Loading pages
   =========================== */
[data-theme="light"] .generating-container,
[data-theme="light"] .generating-card {
    background: #FFFFFF !important;
}

/* ===========================
   Light Mode: JSU/Soalan List Pages
   =========================== */
[data-theme="light"] .jsu-matrix-wrapper {
    border-color: rgba(139, 92, 246, 0.2) !important;
}

[data-theme="light"] .jsu-matrix tbody td {
    border-color: rgba(139, 92, 246, 0.08) !important;
}

/* ===========================
   Light Mode: RPH/RPT List Cards
   =========================== */
[data-theme="light"] .rph-cards-mobile .card {
    background: #FFFFFF !important;
}

/* ===========================
   Theme Toggle Switch
   =========================== */
.theme-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    cursor: pointer;
}

.theme-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(96, 165, 250, 0.2);
    border-radius: 26px;
    transition: background 0.3s ease;
    border: 1px solid var(--border-card);
}

.theme-toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease, background 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.theme-toggle-switch input:checked + .theme-toggle-slider {
    background: var(--gradient-amber);
}

.theme-toggle-switch input:checked + .theme-toggle-slider::before {
    transform: translateX(24px);
}

/* Sun/moon icons via pseudo-elements */
.theme-toggle-slider::after {
    content: '\f186';  /* moon icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 7px;
    top: 4px;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.5);
}

.theme-toggle-switch input:checked + .theme-toggle-slider::after {
    content: '\f185';  /* sun icon */
    left: 6px;
    right: auto;
    color: #1a1440;
}

/* ===========================
   Print — Override dark for printing
   =========================== */
@media print {
    /* Base: white background, black text */
    body {
        background: #fff !important;
        color: #000 !important;
    }

    #content-wrapper, #content {
        background: #fff !important;
        margin-left: 0 !important;
        padding: 0 !important;
    }

    /* Hide navigation, footer, interactive elements */
    .sidebar, .topbar, .mobile-bottom-nav, .scroll-to-top,
    .sticky-footer, .navbar, .breadcrumb,
    #sidebarThemeToggle, .theme-toggle-switch,
    .loading-overlay, .ai-glow-pulse {
        display: none !important;
    }

    /* Cards: clean white with light borders */
    .card {
        background: #fff !important;
        border: 1px solid #ddd !important;
        color: #000 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    /* Card headers: simple gray instead of gradient */
    .card-header {
        background: #f5f5f5 !important;
        color: #000 !important;
        border-bottom: 2px solid #ddd !important;
    }

    .card-header h6, .card-header .font-weight-bold,
    .card-header .m-0, .card-header i,
    .card-header span, .card-header a {
        color: #000 !important;
    }

    /* Table headers: gray background instead of gradient */
    .table thead th, .thead-light th {
        background: #f0f0f0 !important;
        color: #000 !important;
        border-color: #ccc !important;
    }

    /* Table cells */
    .table td {
        color: #000 !important;
        border-color: #ddd !important;
    }

    /* Text colors: all dark for readability */
    .text-primary, .text-success, .text-info, .text-warning, .text-danger {
        color: #000 !important;
    }

    .text-white, .text-gray-800, .text-gray-600 {
        color: #333 !important;
    }

    .text-muted {
        color: #666 !important;
    }

    /* Inline rgba(255,...) text */
    [style*="color: rgba(255"],
    [style*="color:rgba(255"] {
        color: #333 !important;
    }

    /* Labels and form text */
    label, .form-text, small {
        color: #333 !important;
    }

    /* Badges: outlined for print */
    .badge {
        border: 1px solid #999 !important;
        color: #000 !important;
    }

    /* Links: dark, no underline */
    a {
        color: #333 !important;
        text-decoration: none !important;
    }

    /* Remove shadows and transforms */
    .shadow, .shadow-sm, .shadow-lg {
        box-shadow: none !important;
    }

    * {
        transform: none !important;
    }

    /* Alerts: clean borders */
    .alert {
        background: #f8f8f8 !important;
        border: 1px solid #ccc !important;
        color: #333 !important;
    }

    /* Custom components: white bg */
    .soalan-header-card, .soalan-selector, .jsu-selector,
    .jsu-header-card, .jsu-summary-card, .stats-card,
    .paper-preview, .result-header, .summary-card,
    .report-type-card, .form-panel, .availability-panel,
    .roster-card, .student-row-card, .bank-card, .detail-card,
    .gambar-card, .ref-card, .filter-panel, .bulk-panel,
    .profile-header, .builder-panel, .paper-panel {
        background: #fff !important;
        border: 1px solid #ddd !important;
        color: #000 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }
}