/* ═══════════════════════════════════════════════
   LIGHT THEME — Professional slate/blue palette
   Linear / Notion light-mode inspired
   Applied when html[data-theme="light"]
   ═══════════════════════════════════════════════ */

/* ── CSS Custom Properties ── */
html[data-theme="light"] {
    /* Backgrounds */
    --bg-primary: #f8f9fc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f3f9;
    --bg-sidebar: #ffffff;
    /* Borders */
    --border: #e2e5ef;
    --border-light: #d1d5e0;
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-hover: rgba(0, 0, 0, 0.12);
    /* Text */
    --text-primary: #1a1d2e;
    --text-secondary: #5c6078;
    --text-muted: #8b8fa5;
    /* Accent (blue instead of amber) */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);
    --shadow-glow-amber: 0 0 20px rgba(37, 99, 235, 0.1);
    --shadow-glow-green: 0 0 20px rgba(16, 185, 129, 0.1);
    --shadow-glow-red: 0 0 20px rgba(239, 68, 68, 0.1);
    /* Glass */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.06);
    /* Gradients */
    --gradient-amber: linear-gradient(135deg, #2563eb, #1d4ed8);
    --gradient-card: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, transparent 50%, rgba(37, 99, 235, 0.03) 100%);
}

/* ── Body ── */
html[data-theme="light"] body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ── Theme-aware body class (replaces inline background:#0f1117) ── */
.theme-body {
    background: #0f1117;
    color: #e4e5eb;
}
html[data-theme="light"] .theme-body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ── Mobile menu panel (replaces inline dark background) ── */
.mobile-menu-panel {
    background: rgba(15, 17, 23, 0.95);
    backdrop-filter: blur(20px);
}
html[data-theme="light"] .mobile-menu-panel {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-color: var(--border) !important;
}

/* ═══════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%);
    border-right: 1px solid var(--border);
    box-shadow: 1px 0 12px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .sidebar::after {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.1) 0%, transparent 40%, transparent 60%, rgba(59, 130, 246, 0.06) 100%);
}

html[data-theme="light"] .sidebar-overlay {
    background: rgba(0, 0, 0, 0.25);
}

/* ── Nav Items ── */
html[data-theme="light"] .nav-item {
    color: var(--text-secondary);
}

html[data-theme="light"] .nav-item:hover {
    color: var(--text-primary);
    background: rgba(37, 99, 235, 0.05);
}

html[data-theme="light"] .nav-item.active {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
    box-shadow: inset 3px 0 0 #2563eb, 0 0 8px rgba(37, 99, 235, 0.06);
}

html[data-theme="light"] .nav-item.active::after {
    background: #2563eb;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
}

html[data-theme="light"] .nav-link:hover {
    background: rgba(37, 99, 235, 0.05);
}

html[data-theme="light"] .nav-link.active {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    box-shadow: inset 3px 0 0 #2563eb;
}

html[data-theme="light"] .nav-link.active svg {
    color: #2563eb;
}

/* ═══════════════════════════════════════════════
   HEADER BAR
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .header-bar {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════
   CARDS & GLASS
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .glass-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .glass-card::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0%, transparent 50%, rgba(37, 99, 235, 0.03) 100%);
}

html[data-theme="light"] .glass-card:hover {
    background: #ffffff;
    border-color: var(--border-light);
    box-shadow: var(--shadow-md);
}

html[data-theme="light"] .card-glow::before {
    background: linear-gradient(90deg, transparent, #2563eb, transparent);
}

/* ── Stat Cards ── */
html[data-theme="light"] .stat-card {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .stat-card:hover {
    box-shadow: var(--shadow-md);
}

html[data-theme="light"] .stat-card .stat-value {
    color: var(--text-primary);
}

html[data-theme="light"] .stat-card .stat-label {
    color: var(--text-muted);
}

html[data-theme="light"] .stat-card.stat-positive {
    border-color: rgba(16, 185, 129, 0.25);
}

html[data-theme="light"] .stat-card.stat-negative {
    border-color: rgba(239, 68, 68, 0.25);
}

html[data-theme="light"] .stat-card.stat-neutral {
    border-color: rgba(37, 99, 235, 0.25);
}

html[data-theme="light"] .stat-card.stat-info {
    border-color: rgba(59, 130, 246, 0.25);
}

/* ── Summary Cards ── */
html[data-theme="light"] .summary-card {
    background: #ffffff;
    box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .summary-card:hover {
    box-shadow: var(--shadow-md);
}

html[data-theme="light"] .summary-card::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.01));
}

/* ═══════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .data-table thead th {
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: rgba(248, 249, 252, 0.95);
}

html[data-theme="light"] .data-table tbody td {
    color: var(--text-primary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .data-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.015);
}

html[data-theme="light"] .data-table tbody tr:hover {
    background: rgba(37, 99, 235, 0.04);
    box-shadow: inset 3px 0 0 rgba(37, 99, 235, 0.4);
}

html[data-theme="light"] .data-table tbody tr:hover td {
    color: var(--text-primary);
}

html[data-theme="light"] .dark-table thead th {
    border-bottom-color: var(--border);
}

html[data-theme="light"] .dark-table tbody tr:hover {
    background: var(--bg-card-hover);
}

/* ═══════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .input-dark {
    background: #ffffff;
    border-color: var(--border);
    color: var(--text-primary);
}

html[data-theme="light"] .input-dark:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

html[data-theme="light"] .input-premium {
    background: #ffffff;
    border: 1px solid var(--border);
    color: var(--text-primary);
}

html[data-theme="light"] .input-premium:focus {
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 0 12px rgba(37, 99, 235, 0.06);
    background: #ffffff;
}

html[data-theme="light"] .input-premium::placeholder {
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.2);
}

html[data-theme="light"] .btn-primary:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3);
}

html[data-theme="light"] .btn-primary:active {
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

html[data-theme="light"] .btn-accent {
    background: #2563eb;
    color: #ffffff;
}

html[data-theme="light"] .btn-accent:hover {
    background: #1d4ed8;
}

html[data-theme="light"] .btn-ghost {
    color: var(--text-secondary);
    border-color: var(--border);
}

html[data-theme="light"] .btn-ghost:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

html[data-theme="light"] .btn-ghost-premium {
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

html[data-theme="light"] .btn-ghost-premium::before {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(59, 130, 246, 0.2));
}

html[data-theme="light"] .btn-ghost-premium:hover {
    color: var(--text-primary);
    background: rgba(37, 99, 235, 0.04);
}

/* ═══════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .badge-green { background: rgba(16, 185, 129, 0.1); color: #059669; }
html[data-theme="light"] .badge-red { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
html[data-theme="light"] .badge-blue { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
html[data-theme="light"] .badge-yellow { background: rgba(245, 158, 11, 0.1); color: #d97706; }
html[data-theme="light"] .badge-gray { background: rgba(107, 114, 128, 0.1); color: #6b7280; }

/* ── Status Badges ── */
html[data-theme="light"] .status-badge.status-active {
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.2);
}
html[data-theme="light"] .status-badge.status-active::before {
    background: #059669;
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
}

html[data-theme="light"] .status-badge.status-inactive {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.2);
}
html[data-theme="light"] .status-badge.status-inactive::before {
    background: #dc2626;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
}

html[data-theme="light"] .status-badge.status-pending {
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.2);
}
html[data-theme="light"] .status-badge.status-pending::before {
    background: #d97706;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.4);
}

html[data-theme="light"] .status-badge.status-info {
    background: rgba(59, 130, 246, 0.08);
    color: #2563eb;
    border-color: rgba(59, 130, 246, 0.2);
}
html[data-theme="light"] .status-badge.status-info::before {
    background: #2563eb;
    box-shadow: 0 0 4px rgba(59, 130, 246, 0.4);
}

/* ═══════════════════════════════════════════════
   DROPDOWN & MODAL
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .dropdown-menu {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

html[data-theme="light"] .dropdown-item {
    color: var(--text-secondary);
}

html[data-theme="light"] .dropdown-item:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

html[data-theme="light"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] .modal-content {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
}

/* ═══════════════════════════════════════════════
   FILTERS & PAGINATION
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .filters-panel {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .filter-label {
    color: var(--text-muted);
}

html[data-theme="light"] .filter-chip {
    background: rgba(0, 0, 0, 0.03);
    border-color: var(--border);
    color: var(--text-secondary);
}

html[data-theme="light"] .filter-chip:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--border-light);
    color: var(--text-primary);
}

html[data-theme="light"] .filter-chip.active {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.3);
    color: #2563eb;
}

html[data-theme="light"] .filter-chip.active .chip-count {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

html[data-theme="light"] .pagination-btn {
    color: var(--text-secondary);
    border-color: var(--border);
}

html[data-theme="light"] .pagination-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--border-light);
}

html[data-theme="light"] .pagination-btn.active {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.4);
    color: #2563eb;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.1);
}

/* ═══════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .tabs {
    border-bottom-color: var(--border);
}

html[data-theme="light"] .tab {
    color: var(--text-muted);
}

html[data-theme="light"] .tab:hover {
    color: var(--text-primary);
}

html[data-theme="light"] .tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

html[data-theme="light"] .tab.active::after {
    background: #2563eb;
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.3);
}

/* ═══════════════════════════════════════════════
   CHARTS
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .chart-area {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .chart-panel {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

/* ── ApexCharts ── */
html[data-theme="light"] .apexcharts-tooltip {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}

html[data-theme="light"] .apexcharts-tooltip-title {
    background: var(--bg-card-hover) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .apexcharts-xaxistooltip,
html[data-theme="light"] .apexcharts-yaxistooltip {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .apexcharts-legend-text {
    color: var(--text-secondary) !important;
}

html[data-theme="light"] .apexcharts-menu {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
}

html[data-theme="light"] .apexcharts-menu-item:hover {
    background: var(--bg-card-hover) !important;
}

/* ═══════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .toast {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

html[data-theme="light"] .toast-title {
    color: var(--text-primary);
}

html[data-theme="light"] .toast-text {
    color: var(--text-muted);
}

html[data-theme="light"] .toast-close {
    color: var(--text-muted);
}

html[data-theme="light"] .toast-close:hover {
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════
   SKELETON LOADING
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .skeleton {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 25%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 75%);
    background-size: 200% 100%;
}

/* ═══════════════════════════════════════════════
   AUDIO PLAYER
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .audio-player {
    background: rgba(0, 0, 0, 0.03);
    border-color: var(--border);
}

html[data-theme="light"] .audio-player:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(37, 99, 235, 0.2);
}

html[data-theme="light"] .audio-player button {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
}

html[data-theme="light"] .audio-player button:hover {
    background: rgba(37, 99, 235, 0.2);
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.15);
}

/* ═══════════════════════════════════════════════
   PERIOD & LANG BUTTONS
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .period-btn {
    background: #ffffff;
    color: var(--text-secondary);
    border-color: var(--border);
}

html[data-theme="light"] .period-btn.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

html[data-theme="light"] .lang-btn.active {
    color: #2563eb;
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
}

html[data-theme="light"] .date-preset-btn {
    border-color: var(--border);
    color: var(--text-muted);
}

html[data-theme="light"] .date-preset-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

html[data-theme="light"] .date-preset-btn.active {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.3);
    color: #2563eb;
}

/* ═══════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .progress-bar {
    background: rgba(37, 99, 235, 0.08);
}

html[data-theme="light"] .progress-bar-fill {
    background: linear-gradient(90deg, #2563eb, #3b82f6);
}

/* ═══════════════════════════════════════════════
   NOTIFICATION & EMPTY STATE
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .notification-bell:hover {
    background: rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .empty-state .empty-icon {
    color: var(--border-light);
}

html[data-theme="light"] .empty-state .empty-title {
    color: var(--text-primary);
}

html[data-theme="light"] .empty-state .empty-text {
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════
   QUICK STATS & LEADERBOARD
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .quick-stats {
    background: #ffffff;
    border-color: var(--border);
}

html[data-theme="light"] .quick-stat-label {
    color: var(--text-muted);
}

html[data-theme="light"] .quick-stat-value {
    color: var(--text-primary);
}

html[data-theme="light"] .leaderboard-item {
    background: rgba(0, 0, 0, 0.015);
    border-color: var(--border);
}

html[data-theme="light"] .leaderboard-item:hover {
    background: var(--bg-card-hover);
}

html[data-theme="light"] .rank-default {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════
   LIVE INDICATORS
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .live-badge.live-connected {
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.2);
}

html[data-theme="light"] .live-badge.live-reconnecting {
    background: rgba(245, 158, 11, 0.08);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.2);
}

html[data-theme="light"] .live-badge.live-offline {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.2);
}

/* ═══════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════ */
html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
}

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

html[data-theme="light"] * {
    scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

/* ═══════════════════════════════════════════════
   PUBLIC PAGES — Hero, Plans, FAQ, Footer
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .public-header {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] .hero-section {
    background: linear-gradient(180deg, #f8f9fc 0%, #eef1f8 40%, #f8f9fc 100%);
}

html[data-theme="light"] .hero-title {
    background: linear-gradient(135deg, #1a1d2e 30%, rgba(26, 29, 46, 0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html[data-theme="light"] .hero-subtitle {
    color: var(--text-secondary);
}

html[data-theme="light"] .hero-glow-1,
html[data-theme="light"] .hero-glow-amber {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
}

html[data-theme="light"] .hero-glow-2,
html[data-theme="light"] .hero-glow-blue {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
}

/* ── Plan Cards ── */
html[data-theme="light"] .plan-card {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .plan-card:hover {
    border-color: var(--border-light);
    box-shadow: var(--shadow-md);
}

html[data-theme="light"] .plan-card.featured,
html[data-theme="light"] .plan-card.plan-featured {
    border-color: rgba(37, 99, 235, 0.3);
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08), var(--shadow-md);
}

html[data-theme="light"] .plan-card.featured::before,
html[data-theme="light"] .plan-card.plan-featured::before {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(99, 102, 241, 0.15));
}

html[data-theme="light"] .plan-price {
    color: var(--text-primary);
}

html[data-theme="light"] .plan-price-suffix {
    color: var(--text-muted);
}

html[data-theme="light"] .plan-popular-badge,
html[data-theme="light"] .plan-badge {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
}

html[data-theme="light"] .feature-check {
    color: var(--text-secondary);
}

html[data-theme="light"] .feature-check-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

/* ── Steps ── */
html[data-theme="light"] .step-number {
    background: var(--gradient-amber);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.15);
}

html[data-theme="light"] .step-connector {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.05), rgba(37, 99, 235, 0.2));
}

/* ── FAQ ── */
html[data-theme="light"] .faq-item {
    background: #ffffff;
    border: 1px solid var(--border);
}

html[data-theme="light"] .faq-item:hover {
    border-color: var(--border-light);
}

html[data-theme="light"] .faq-question {
    color: var(--text-primary);
}

html[data-theme="light"] .faq-question:hover {
    color: var(--text-primary);
}

html[data-theme="light"] .faq-answer {
    color: var(--text-secondary);
}

/* ── Footer ── */
html[data-theme="light"] .public-footer {
    background: linear-gradient(180deg, transparent 0%, rgba(226, 229, 239, 0.4) 100%);
    border-top: 1px solid var(--border);
}

html[data-theme="light"] .public-footer a {
    color: var(--text-muted);
}

html[data-theme="light"] .public-footer a:hover {
    color: #2563eb;
}

/* ═══════════════════════════════════════════════
   AUTH & ONBOARDING
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .auth-bg-glow {
    opacity: 0.3;
}

html[data-theme="light"] .pwd-strength-bar {
    background: rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .onboarding-step-line.pending {
    background: rgba(0, 0, 0, 0.06);
}

/* ═══════════════════════════════════════════════
   PAYMENT
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .payment-method-card:hover {
    border-color: var(--border-light);
}

html[data-theme="light"] .payment-method-card.selected {
    border-color: rgba(37, 99, 235, 0.4);
    background: rgba(37, 99, 235, 0.03);
}

html[data-theme="light"] .requisites-block {
    background: var(--bg-card-hover);
    border-color: var(--border);
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════
   MISC COMPONENTS
   ═══════════════════════════════════════════════ */
html[data-theme="light"] .gradient-border {
    background: #ffffff;
}

html[data-theme="light"] .gradient-border::before {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(99, 102, 241, 0.2), rgba(16, 185, 129, 0.2));
}

html[data-theme="light"] .trend-up { background: rgba(16, 185, 129, 0.1); color: #059669; }
html[data-theme="light"] .trend-down { background: rgba(239, 68, 68, 0.1); color: #dc2626; }

html[data-theme="light"] .live-call-card {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.2);
}

html[data-theme="light"] .chip-count {
    background: rgba(0, 0, 0, 0.06);
}

/* ═══════════════════════════════════════════════════════════════
   CRITICAL: Override Tailwind hardcoded white text for light theme
   These classes are used hundreds of times across 45+ templates.
   Without these overrides, text is INVISIBLE on light backgrounds.
   ═══════════════════════════════════════════════════════════════ */

/* ── text-white → dark text ── */
html[data-theme="light"] .text-white {
    color: #1a1d2e !important;
}

/* ── text-white/XX opacity variants → dark text with matching opacity ── */
html[data-theme="light"] .text-white\/5  { color: rgba(26, 29, 46, 0.05) !important; }
html[data-theme="light"] .text-white\/10 { color: rgba(26, 29, 46, 0.10) !important; }
html[data-theme="light"] .text-white\/15 { color: rgba(26, 29, 46, 0.15) !important; }
html[data-theme="light"] .text-white\/20 { color: rgba(26, 29, 46, 0.20) !important; }
html[data-theme="light"] .text-white\/25 { color: rgba(26, 29, 46, 0.25) !important; }
html[data-theme="light"] .text-white\/30 { color: rgba(26, 29, 46, 0.30) !important; }
html[data-theme="light"] .text-white\/35 { color: rgba(26, 29, 46, 0.35) !important; }
html[data-theme="light"] .text-white\/40 { color: rgba(26, 29, 46, 0.40) !important; }
html[data-theme="light"] .text-white\/45 { color: rgba(26, 29, 46, 0.45) !important; }
html[data-theme="light"] .text-white\/50 { color: rgba(26, 29, 46, 0.50) !important; }
html[data-theme="light"] .text-white\/55 { color: rgba(26, 29, 46, 0.55) !important; }
html[data-theme="light"] .text-white\/60 { color: rgba(26, 29, 46, 0.60) !important; }
html[data-theme="light"] .text-white\/65 { color: rgba(26, 29, 46, 0.65) !important; }
html[data-theme="light"] .text-white\/70 { color: rgba(26, 29, 46, 0.70) !important; }
html[data-theme="light"] .text-white\/75 { color: rgba(26, 29, 46, 0.75) !important; }
html[data-theme="light"] .text-white\/80 { color: rgba(26, 29, 46, 0.80) !important; }
html[data-theme="light"] .text-white\/85 { color: rgba(26, 29, 46, 0.85) !important; }
html[data-theme="light"] .text-white\/90 { color: rgba(26, 29, 46, 0.90) !important; }
html[data-theme="light"] .text-white\/95 { color: rgba(26, 29, 46, 0.95) !important; }

/* ── border-white/XX → dark borders ── */
html[data-theme="light"] .border-white\/\[0\.04\] { border-color: rgba(0, 0, 0, 0.04) !important; }
html[data-theme="light"] .border-white\/\[0\.06\] { border-color: rgba(0, 0, 0, 0.06) !important; }
html[data-theme="light"] .border-white\/\[0\.08\] { border-color: rgba(0, 0, 0, 0.08) !important; }
html[data-theme="light"] .border-white\/5  { border-color: rgba(0, 0, 0, 0.05) !important; }
html[data-theme="light"] .border-white\/8  { border-color: rgba(0, 0, 0, 0.08) !important; }
html[data-theme="light"] .border-white\/10 { border-color: rgba(0, 0, 0, 0.10) !important; }
html[data-theme="light"] .border-white\/15 { border-color: rgba(0, 0, 0, 0.15) !important; }
html[data-theme="light"] .border-white\/20 { border-color: rgba(0, 0, 0, 0.12) !important; }

/* ── bg-white/XX → light theme subtle backgrounds ── */
html[data-theme="light"] .bg-white\/\[0\.03\] { background: rgba(0, 0, 0, 0.02) !important; }
html[data-theme="light"] .bg-white\/\[0\.04\] { background: rgba(0, 0, 0, 0.02) !important; }
html[data-theme="light"] .bg-white\/5  { background: rgba(0, 0, 0, 0.03) !important; }
html[data-theme="light"] .bg-white\/6  { background: rgba(0, 0, 0, 0.03) !important; }
html[data-theme="light"] .bg-white\/8  { background: rgba(0, 0, 0, 0.04) !important; }
html[data-theme="light"] .bg-white\/10 { background: rgba(0, 0, 0, 0.05) !important; }

/* ── hover:bg-white/XX → light hover ── */
html[data-theme="light"] .hover\:bg-white\/5:hover  { background: rgba(0, 0, 0, 0.04) !important; }
html[data-theme="light"] .hover\:bg-white\/\[0\.04\]:hover { background: rgba(0, 0, 0, 0.03) !important; }

/* ── hover:text-white → dark text on hover ── */
html[data-theme="light"] .hover\:text-white:hover {
    color: #1a1d2e !important;
}
html[data-theme="light"] .hover\:text-white\/70:hover { color: rgba(26, 29, 46, 0.70) !important; }
html[data-theme="light"] .hover\:text-white\/80:hover { color: rgba(26, 29, 46, 0.80) !important; }

/* ── hover:border-white/XX → dark hover borders ── */
html[data-theme="light"] .hover\:border-white\/20:hover { border-color: rgba(0, 0, 0, 0.15) !important; }

/* ═══════════════════════════════════════════════════════════════
   Inline style overrides for elements using rgba(255,255,255,...)
   These target common patterns in sidebar, header, and dropdowns
   ═══════════════════════════════════════════════════════════════ */

/* Sidebar section dividers and labels */
html[data-theme="light"] .sidebar [style*="rgba(255,255,255,0.04)"],
html[data-theme="light"] .sidebar [style*="rgba(255,255,255,0.06)"] {
    border-color: var(--border) !important;
    background: transparent !important;
}

html[data-theme="light"] .sidebar [style*="rgba(255,255,255,0.25)"],
html[data-theme="light"] .sidebar [style*="rgba(255,255,255,0.35)"] {
    color: var(--text-muted) !important;
}

/* Admin sidebar logo text and labels */
html[data-theme="light"] .sidebar .nav-label [style*="color: rgba(255,255,255"] {
    color: var(--text-muted) !important;
}

/* Header bar breadcrumb and controls */
html[data-theme="light"] .header-bar [style*="color: rgba(255,255,255,0.4)"],
html[data-theme="light"] .header-bar [style*="color:rgba(255,255,255,0.4)"] {
    color: var(--text-muted) !important;
}
html[data-theme="light"] .header-bar [style*="color: rgba(255,255,255,0.75)"],
html[data-theme="light"] .header-bar [style*="color:rgba(255,255,255,0.75)"] {
    color: var(--text-primary) !important;
}
html[data-theme="light"] .header-bar [style*="color: rgba(255,255,255,0.2)"],
html[data-theme="light"] .header-bar [style*="color:rgba(255,255,255,0.2)"] {
    color: var(--text-muted) !important;
}
html[data-theme="light"] .header-bar [style*="color: rgba(255,255,255,0.45)"],
html[data-theme="light"] .header-bar [style*="color:rgba(255,255,255,0.45)"] {
    color: var(--text-secondary) !important;
}
html[data-theme="light"] .header-bar [style*="color: rgba(255,255,255,0.55)"],
html[data-theme="light"] .header-bar [style*="color:rgba(255,255,255,0.55)"] {
    color: var(--text-secondary) !important;
}

/* Dropdown menu text in header */
html[data-theme="light"] .dropdown-menu [style*="color: rgba(255,255,255,0.35)"],
html[data-theme="light"] .dropdown-menu [style*="color:rgba(255,255,255,0.35)"] {
    color: var(--text-muted) !important;
}
html[data-theme="light"] .dropdown-menu [style*="border-bottom: 1px solid rgba(255,255,255"] {
    border-bottom-color: var(--border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Auth pages (login, register, etc.) — inline style overrides
   These pages use style="color:rgba(255,255,255,...)" extensively
   ═══════════════════════════════════════════════════════════════ */

/* Labels: style="color:rgba(255,255,255,0.45)" */
html[data-theme="light"] label[style*="rgba(255,255,255,0.45)"],
html[data-theme="light"] [style*="color:rgba(255,255,255,0.45)"],
html[data-theme="light"] [style*="color: rgba(255,255,255,0.45)"] {
    color: var(--text-secondary) !important;
}

/* Subtitles: style="color:rgba(255,255,255,0.4)" */
html[data-theme="light"] [style*="color:rgba(255,255,255,0.4)"],
html[data-theme="light"] [style*="color: rgba(255,255,255,0.4)"] {
    color: var(--text-secondary) !important;
}

/* Muted text: style="color:rgba(255,255,255,0.35)" */
html[data-theme="light"] [style*="color:rgba(255,255,255,0.35)"],
html[data-theme="light"] [style*="color: rgba(255,255,255,0.35)"] {
    color: var(--text-muted) !important;
}

/* Very muted: style="color:rgba(255,255,255,0.3)" */
html[data-theme="light"] [style*="color:rgba(255,255,255,0.3)"],
html[data-theme="light"] [style*="color: rgba(255,255,255,0.3)"] {
    color: var(--text-muted) !important;
}

/* Very faint: style="color:rgba(255,255,255,0.25)" */
html[data-theme="light"] [style*="color:rgba(255,255,255,0.25)"],
html[data-theme="light"] [style*="color: rgba(255,255,255,0.25)"] {
    color: var(--text-muted) !important;
}

/* Faint text: style="color:rgba(255,255,255,0.5)" */
html[data-theme="light"] [style*="color:rgba(255,255,255,0.5)"],
html[data-theme="light"] [style*="color: rgba(255,255,255,0.5)"] {
    color: var(--text-secondary) !important;
}

/* Light text: style="color:rgba(255,255,255,0.7)" */
html[data-theme="light"] [style*="color:rgba(255,255,255,0.7)"],
html[data-theme="light"] [style*="color: rgba(255,255,255,0.7)"] {
    color: var(--text-primary) !important;
}

/* White text: style="color:#fff" or "color: #fff" */
html[data-theme="light"] [style*="color:#fff"],
html[data-theme="light"] [style*="color: #fff"] {
    color: var(--text-primary) !important;
}

/* Body text: style="color:#e4e5eb" */
html[data-theme="light"] [style*="color:#e4e5eb"],
html[data-theme="light"] [style*="color: #e4e5eb"] {
    color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Background overrides for inline dark backgrounds
   ═══════════════════════════════════════════════════════════════ */

/* Body background: style="background:#0f1117" */
html[data-theme="light"] body[style*="background:#0f1117"],
html[data-theme="light"] body[style*="background: #0f1117"] {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Mobile menu background: style="background: rgba(15,17,23,..." */
html[data-theme="light"] [style*="background: rgba(15,17,23"],
html[data-theme="light"] [style*="background:rgba(15,17,23"] {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
}

/* Dark card backgrounds: style="background:rgba(22,25,35,..." */
html[data-theme="light"] [style*="background:rgba(22,25,35"],
html[data-theme="light"] [style*="background: rgba(22,25,35"] {
    background: #ffffff !important;
}

/* Register suggestions dropdown */
html[data-theme="light"] .suggestions-dropdown {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
}
html[data-theme="light"] .suggestion-item:hover {
    background: rgba(37, 99, 235, 0.06) !important;
}
html[data-theme="light"] .suggestion-name {
    color: var(--text-primary) !important;
}
html[data-theme="light"] .suggestion-meta {
    color: var(--text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Inline border overrides: style="border-bottom: 1px solid rgba(255,255,255,...)"
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] [style*="border-bottom: 1px solid rgba(255,255,255"],
html[data-theme="light"] [style*="border-top: 1px solid rgba(255,255,255"],
html[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255"],
html[data-theme="light"] [style*="border-top:1px solid rgba(255,255,255"] {
    border-color: var(--border) !important;
}

/* Inline dividers: style="height:1px; background: rgba(255,255,255,..." */
html[data-theme="light"] [style*="background: rgba(255,255,255,0.04)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.04)"],
html[data-theme="light"] [style*="background: rgba(255,255,255,0.06)"],
html[data-theme="light"] [style*="background:rgba(255,255,255,0.06)"] {
    background: var(--border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   User cabinet specific: sidebar, top-header, notification
   ═══════════════════════════════════════════════════════════════ */

/* User sidebar (uses .sidebar class from user_base) */
html[data-theme="light"] aside.sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%) !important;
    border-right: 1px solid var(--border) !important;
}

/* User top header (uses .top-header class) */
html[data-theme="light"] .top-header {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
    border-bottom: 1px solid var(--border) !important;
}

/* Sidebar nav item override for user cabinet */
html[data-theme="light"] .sidebar-nav-item {
    color: var(--text-secondary) !important;
}
html[data-theme="light"] .sidebar-nav-item:hover {
    background: rgba(37, 99, 235, 0.05) !important;
    color: var(--text-primary) !important;
}
html[data-theme="light"] .sidebar-nav-item.active {
    background: rgba(37, 99, 235, 0.08) !important;
    color: #2563eb !important;
}
html[data-theme="light"] .sidebar-nav-item.active svg {
    color: #2563eb !important;
}

/* Sidebar status badges */
html[data-theme="light"] .status-active  { background: rgba(34, 197, 94, 0.1); color: #059669; }
html[data-theme="light"] .status-trial   { background: rgba(99, 102, 241, 0.1); color: #4f46e5; }
html[data-theme="light"] .status-expired { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
html[data-theme="light"] .status-awaiting_payment { background: rgba(245, 158, 11, 0.1); color: #d97706; }
html[data-theme="light"] .status-blocked { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
html[data-theme="light"] .status-new     { background: rgba(148, 163, 184, 0.1); color: #6b7280; }

/* Notification dropdown in user cabinet */
html[data-theme="light"] [style*="background: var(--bg-secondary)"] {
    background: #ffffff !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Notification dot — keep white text on colored background */
html[data-theme="light"] .notification-dot {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   Preserve white text on colored/gradient backgrounds
   Buttons, badges, and avatar circles should KEEP white text
   ═══════════════════════════════════════════════════════════════ */

/* Primary buttons — keep white text */
html[data-theme="light"] .btn-primary .text-white,
html[data-theme="light"] .btn-primary.text-white,
html[data-theme="light"] .btn-accent .text-white,
html[data-theme="light"] .btn-accent.text-white {
    color: #ffffff !important;
}

/* Logo "B" icon — gradient bg, keep white */
html[data-theme="light"] [style*="background: linear-gradient(135deg, #f59e0b"] .text-white,
html[data-theme="light"] [style*="background:linear-gradient(135deg,#f59e0b"] .text-white {
    color: #ffffff !important;
}

/* Avatar circles with gradient backgrounds — keep white */
html[data-theme="light"] [style*="background: linear-gradient(135deg, #6366f1"] .text-white,
html[data-theme="light"] .bg-gradient-to-br .text-white {
    color: #ffffff !important;
}

/* Step number circles on gradient backgrounds */
html[data-theme="light"] .step-number {
    color: #ffffff !important;
}

/* Plan popular badge — keep white on blue */
html[data-theme="light"] .plan-popular-badge,
html[data-theme="light"] .plan-badge {
    color: #ffffff !important;
}

/* Period btn active state — keep white on blue */
html[data-theme="light"] .period-btn.active {
    color: #ffffff !important;
}

/* Payment step indicators with amber bg — keep dark text */
html[data-theme="light"] [class*="bg-amber-500"].text-black {
    color: #000000 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Text on colored stat/alert backgrounds — preserve readability
   ═══════════════════════════════════════════════════════════════ */

/* Colored text classes should NOT be overridden */
html[data-theme="light"] .text-emerald-400 { color: #059669 !important; }
html[data-theme="light"] .text-red-400     { color: #dc2626 !important; }
html[data-theme="light"] .text-blue-400    { color: #2563eb !important; }
html[data-theme="light"] .text-amber-400   { color: #d97706 !important; }
html[data-theme="light"] .text-violet-400  { color: #7c3aed !important; }
html[data-theme="light"] .text-cyan-400    { color: #0891b2 !important; }
html[data-theme="light"] .text-indigo-400  { color: #4f46e5 !important; }
html[data-theme="light"] .text-rose-400    { color: #e11d48 !important; }
html[data-theme="light"] .text-red-300     { color: #dc2626 !important; }
html[data-theme="light"] .text-amber-300   { color: #d97706 !important; }
html[data-theme="light"] .text-green-400   { color: #059669 !important; }
html[data-theme="light"] .text-slate-300   { color: var(--text-primary) !important; }
html[data-theme="light"] .text-slate-400   { color: var(--text-secondary) !important; }
html[data-theme="light"] .text-slate-500   { color: var(--text-muted) !important; }

/* ═══════════════════════════════════════════════════════════════
   Hover inline JS handlers: onmouseover="this.style.color='#fff'"
   These cannot be overridden by CSS alone. We override the base
   state and accept that JS hover will flash white briefly.
   Using CSS hover pseudo-class to counteract.
   ═══════════════════════════════════════════════════════════════ */

/* Admin sidebar logout button and header controls */
html[data-theme="light"] .sidebar button[onmouseover]:hover,
html[data-theme="light"] .header-bar button[onmouseover]:hover,
html[data-theme="light"] .header-bar a[onmouseover]:hover,
html[data-theme="light"] .top-header button[onmouseover]:hover {
    color: var(--text-primary) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Auth page links with onmouseover to amber */
html[data-theme="light"] a[onmouseover*="f59e0b"]:hover {
    color: #2563eb !important;
}

/* ═══════════════════════════════════════════════════════════════
   Lookup spinner in register — override border colors
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] .lookup-spinner {
    border-color: rgba(0, 0, 0, 0.1) !important;
    border-top-color: #2563eb !important;
}

/* ═══════════════════════════════════════════════════════════════
   Ambient glow orbs on auth pages — reduce or hide
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] [style*="radial-gradient(circle,rgba(245,158,11,0.06)"],
html[data-theme="light"] [style*="radial-gradient(circle,rgba(59,130,246,0.04)"] {
    opacity: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   KPI sparkline cards in dashboard — dark background overrides
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] .kpi-sparkline {
    opacity: 0.8;
}

/* Gradient background cards in user dashboard */
html[data-theme="light"] [class*="bg-gradient-to-br"][class*="from-violet-500\/10"],
html[data-theme="light"] [class*="bg-gradient-to-br"][class*="from-blue-500\/10"],
html[data-theme="light"] [class*="bg-gradient-to-br"][class*="from-emerald-500\/10"],
html[data-theme="light"] [class*="bg-gradient-to-br"][class*="from-rose-500\/10"] {
    background: #ffffff !important;
    border-color: var(--border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Counter values and summary cards
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] .counter-value.text-white {
    color: var(--text-primary) !important;
}

html[data-theme="light"] .summary-card {
    background: #ffffff !important;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════
   Password strength bar background
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] [style*="background:rgba(255,255,255,0.06)"] {
    background: rgba(0, 0, 0, 0.06) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Filled badge in register form
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] .filled-badge {
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   User base CSS variables override (defined in <style> block)
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f3f9;
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-hover: rgba(0, 0, 0, 0.12);
}

/* ═══════════════════════════════════════════════════════════════
   ApexCharts tooltip in analytics — inline style="color:#fff"
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] .apexcharts-tooltip-text {
    color: var(--text-primary) !important;
}
html[data-theme="light"] .apexcharts-tooltip-series-group {
    color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Sidebar overlay — lighter for light theme
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="light"] .sidebar-overlay {
    background: rgba(0, 0, 0, 0.25) !important;
}