/* ==========================================================================
   SpendArk — Theme Overrides
   Default: Glass Morphism   |   Toggle: Dark Mode
   Loaded after app.css to override base light variables
   ========================================================================== */

/* ==========================================================================
   DEFAULT — Glass Morphism ("Frost")
   Frosted glass cards, gradient backgrounds, floating shadows
   Applied at :root level so it overrides app.css defaults
   ========================================================================== */
:root {
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-hover: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-border-hover: rgba(255, 255, 255, 0.75);
    --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    --glass-blur: blur(16px) saturate(1.3);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* --- Background --- */
main {
    background: linear-gradient(135deg, #e8ecf7 0%, #f0e6f6 35%, #e6eef8 70%, #eef1f8 100%) !important;
    background-attachment: fixed;
}

/* --- Sidebar --- */
.sidebar {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border-right: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 1px 0 16px rgba(0, 0, 0, 0.04) !important;
}

.sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.sidebar-savings-card {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #2563eb 100%) !important;
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.nav-item.active {
    background: rgba(124, 58, 237, 0.08) !important;
    box-shadow: inset 3px 0 0 #7c3aed !important;
    backdrop-filter: blur(8px);
}

.nav-item.active .nav-icon {
    color: #7c3aed !important;
}

.nav-group-item.active {
    box-shadow: inset 3px 0 0 #7c3aed !important;
    background: rgba(124, 58, 237, 0.08) !important;
}

/* --- Top Header --- */
.top-header {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03) !important;
}

/* --- Cards & Stat Cards --- */
.card,
.stat-card,
.metric-card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), var(--glass-inset) !important;
}

.card:hover,
.stat-card:hover,
.metric-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    border-color: var(--glass-border-hover) !important;
}

/* --- KPI Cards (enhanced glass with subtle gradient tints) --- */
.kpi-card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), var(--glass-inset) !important;
    position: relative;
    overflow: hidden;
}

/* Subtle refraction light on glass cards */
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.4) 70%, transparent 100%);
    z-index: 1;
}

.kpi-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    border-color: var(--glass-border-hover) !important;
    transform: translateY(-3px);
}

/* Gradient KPI card (hero/savings) */
.kpi-card-gradient {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.88) 0%, rgba(79, 70, 229, 0.88) 50%, rgba(124, 58, 237, 0.88) 100%) !important;
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(79, 70, 229, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.kpi-card-gradient::before {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 30%, rgba(255,255,255,0.1) 70%, transparent 100%);
}

.kpi-card-gradient:hover {
    box-shadow: 0 16px 48px rgba(79, 70, 229, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-3px);
}

/* --- Icon boxes with glass effect --- */
.icon-box-blue {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(96, 165, 250, 0.08)) !important;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.icon-box-purple {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(167, 139, 250, 0.08)) !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
}

.icon-box-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(251, 191, 36, 0.08)) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
}

/* --- Dashboard Sections --- */
.dashboard-section,
.dashboard-chart-section,
.dashboard-feed-section,
.dashboard-table-section {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.dashboard-section:hover,
.dashboard-chart-section:hover,
.dashboard-feed-section:hover,
.dashboard-table-section:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* --- Tables (glass theme) --- */
.dashboard-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.dashboard-table th {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 2px solid rgba(124, 58, 237, 0.08) !important;
}

.dashboard-table tbody tr {
    transition: all 200ms ease;
}

.dashboard-table tbody tr:hover {
    background: rgba(124, 58, 237, 0.04) !important;
}

.dashboard-table td {
    border-bottom-color: rgba(0, 0, 0, 0.04) !important;
}

/* Also style .table for non-dashboard tables */
.table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.table th {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.table tbody tr:hover {
    background: rgba(124, 58, 237, 0.03) !important;
}

/* --- Buttons --- */
.btn-pill-primary {
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.25) !important;
}

.btn-pill-secondary {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

.btn-pill-secondary:hover {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
}

.button {
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.button.button-secondary {
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow: none;
}

.button.button-secondary:hover {
    background: rgba(255, 255, 255, 0.7) !important;
}

/* --- Clean Select (native dropdown, replaces MudSelect) --- */
.select-clean {
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--text, #0f172a);
    cursor: pointer;
    outline: none;
    transition: border-color 200ms ease, box-shadow 200ms ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 14px;
    line-height: 1.4;
    min-width: 0;
}

.select-clean:hover {
    border-color: rgba(0, 0, 0, 0.25);
}

.select-clean:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.select-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    margin-bottom: 0.25rem;
}

/* --- Inputs (solid white, visible borders) --- */
.input,
.form-input {
    background: #ffffff !important;
    border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
}

.input:focus,
.form-input:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

.input:hover,
.form-input:hover {
    border-color: rgba(0, 0, 0, 0.2) !important;
}

/* --- MudBlazor Select — shadcn-inspired styling --- */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: 12px !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    transition: all 200ms ease !important;
}

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(0, 0, 0, 0.25) !important;
}

.mud-input-outlined.mud-input-outlined-focus .mud-input-outlined-border {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

.mud-popover {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.08) !important;
}

.mud-list-item {
    border-radius: 8px !important;
    margin: 1px 4px !important;
    transition: all 150ms ease !important;
}

.mud-list-item:hover {
    background: rgba(124, 58, 237, 0.06) !important;
}

.mud-list-item.mud-selected-item {
    background: rgba(124, 58, 237, 0.1) !important;
    color: #7c3aed !important;
}


/* --- Profile / Overlay --- */
.profile-slideout {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.profile-overlay {
    background: rgba(15, 23, 42, 0.12) !important;
    backdrop-filter: blur(8px);
}

/* --- Provider Cards --- */
.provider-card {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.provider-card:hover {
    background: rgba(255, 255, 255, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

/* --- Empty State --- */
.empty-state {
    background: rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(124, 58, 237, 0.1) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* --- Filter Bar --- */
.filter-bar {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.filter-select {
    background: #ffffff !important;
    border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 10px !important;
}

.filter-select:hover {
    border-color: rgba(0, 0, 0, 0.2) !important;
}

.filter-select:focus {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

/* --- Auth --- */
.auth-layout {
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 30%, #ede9fe 60%, #fae8ff 100%) !important;
}

.auth-card {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* --- Plan Cards --- */
.plan-card {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.plan-card:hover {
    background: rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
}

.plan-card-current {
    border-color: rgba(124, 58, 237, 0.25) !important;
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.1), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* --- Subscription Banner --- */
.sub-status-banner {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

/* --- Badges --- */
.header-plan-badge {
    background: rgba(124, 58, 237, 0.08) !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(124, 58, 237, 0.12) !important;
}

/* --- Misc Glass --- */
.opportunity-item:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

.upgrade-gate-icon {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(37, 99, 235, 0.08)) !important;
    border-color: rgba(124, 58, 237, 0.12) !important;
    color: #7c3aed !important;
}


/* ==========================================================================
   DARK MODE — "Midnight"
   Deep navy backgrounds, glowing accents, chart-friendly dark palette
   Toggled via data-theme="dark" on <html>
   ========================================================================== */
[data-theme="dark"] {
    --bg: #0b1120;
    --bg-card: #111827;
    --bg-elevated: #1e293b;
    --bg-hover: #334155;
    --bg-active: rgba(0, 127, 255, 0.15);

    --text: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-faint: #475569;

    --border: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-hover: rgba(255, 255, 255, 0.15);
    --ring: #8b5cf6;

    --accent: #60a5fa;
    --accent-hover: #93c5fd;
    --accent-muted: rgba(96, 165, 250, 0.15);

    --green: #34d399;
    --green-muted: rgba(52, 211, 153, 0.15);
    --red: #f87171;
    --red-muted: rgba(248, 113, 113, 0.12);
    --yellow: #fbbf24;
    --yellow-muted: rgba(251, 191, 36, 0.12);
    --blue: #60a5fa;
    --blue-muted: rgba(96, 165, 250, 0.12);
    --violet: #a78bfa;
    --violet-muted: rgba(167, 139, 250, 0.12);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow-accent: 0 0 24px rgba(96, 165, 250, 0.2);
    --shadow-glow-green: 0 0 24px rgba(52, 211, 153, 0.2);
    --shadow-glow-violet: 0 0 24px rgba(167, 139, 250, 0.25);

    --glass-bg: #111827;
    --glass-bg-hover: #1e293b;
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-hover: rgba(255, 255, 255, 0.12);
    --glass-inset: none;
    --glass-blur: none;

    --sidebar-bg: #0f172a;
    --sidebar-border: rgba(255, 255, 255, 0.06);
    --sidebar-text: #64748b;
    --sidebar-text-active: #f1f5f9;
    --sidebar-hover: rgba(96, 165, 250, 0.06);
    --sidebar-active: rgba(96, 165, 250, 0.12);
}

[data-theme="dark"] html,
[data-theme="dark"] body {
    background-color: #0b1120;
    color: #f1f5f9;
}

/* --- Dark Sidebar --- */
[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #0f172a 0%, #0b1120 100%) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

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

[data-theme="dark"] .nav-item {
    color: #94a3b8;
}

[data-theme="dark"] .nav-item:hover {
    background: rgba(96, 165, 250, 0.06);
    color: #e2e8f0;
}

[data-theme="dark"] .nav-item.active {
    background: rgba(139, 92, 246, 0.1) !important;
    color: #f1f5f9;
    box-shadow: inset 3px 0 0 #8b5cf6 !important;
    backdrop-filter: none;
}

[data-theme="dark"] .nav-item.active .nav-icon {
    color: #a78bfa !important;
}

[data-theme="dark"] .nav-group-header {
    color: #94a3b8;
}

[data-theme="dark"] .nav-group-header:hover {
    background: rgba(96, 165, 250, 0.06);
    color: #e2e8f0;
}

[data-theme="dark"] .nav-group-item.active {
    box-shadow: inset 3px 0 0 #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.1) !important;
}

[data-theme="dark"] .admin-section-label,
[data-theme="dark"] .nav-section-label {
    color: #475569;
}

/* --- Dark Main Area --- */
[data-theme="dark"] main {
    background: linear-gradient(180deg, #0b1120 0%, #0d1526 100%) !important;
}

[data-theme="dark"] .top-header {
    background: rgba(17, 24, 39, 0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .top-header-avatar {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

[data-theme="dark"] .top-header-avatar:hover {
    border-color: rgba(139, 92, 246, 0.3);
    color: #e2e8f0;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.15);
}

/* --- Dark Cards (subtle gradient backgrounds) --- */
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .metric-card {
    background: linear-gradient(180deg, #111827 0%, #0f1521 100%) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .metric-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 1px rgba(139, 92, 246, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- Dark KPI Cards --- */
[data-theme="dark"] .kpi-card {
    background: linear-gradient(180deg, #111827 0%, #0f1521 100%) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .kpi-card::before {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.02) 70%, transparent 100%);
}

[data-theme="dark"] .kpi-card:hover {
    border-color: rgba(139, 92, 246, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(139, 92, 246, 0.06) !important;
}

/* Dark gradient KPI card with glow */
[data-theme="dark"] .kpi-card-gradient {
    background: linear-gradient(135deg, #1e3a8a 0%, #312e81 40%, #4c1d95 100%) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3), 0 0 40px rgba(124, 58, 237, 0.15) !important;
}

[data-theme="dark"] .kpi-card-gradient::before {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.03) 70%, transparent 100%);
}

[data-theme="dark"] .kpi-card-gradient:hover {
    box-shadow: 0 8px 32px rgba(79, 70, 229, 0.4), 0 0 60px rgba(124, 58, 237, 0.2) !important;
}

[data-theme="dark"] .kpi-value { color: #f1f5f9; }
[data-theme="dark"] .kpi-label { color: #64748b; }

[data-theme="dark"] .trend-badge-up {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

[data-theme="dark"] .trend-badge-down {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
}

[data-theme="dark"] .kpi-subtitle {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
}

/* --- Dark Icon Boxes (with glow) --- */
[data-theme="dark"] .icon-box-blue {
    background: rgba(96, 165, 250, 0.12) !important;
    color: #60a5fa;
    backdrop-filter: none;
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.08);
}

[data-theme="dark"] .icon-box-purple {
    background: rgba(139, 92, 246, 0.12);
    color: #a78bfa;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.08);
}

[data-theme="dark"] .icon-box-amber {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.08);
}

/* --- Dark Dashboard Sections --- */
[data-theme="dark"] .dashboard-section,
[data-theme="dark"] .dashboard-chart-section,
[data-theme="dark"] .dashboard-feed-section,
[data-theme="dark"] .dashboard-table-section {
    background: linear-gradient(180deg, #111827 0%, #0f1521 100%) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .dashboard-section:hover,
[data-theme="dark"] .dashboard-chart-section:hover,
[data-theme="dark"] .dashboard-feed-section:hover,
[data-theme="dark"] .dashboard-table-section:hover {
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .section-header-row h3 { color: #f1f5f9; }
[data-theme="dark"] .dashboard-header-title h1 { color: #f1f5f9; }
[data-theme="dark"] .dashboard-header-meta { color: #475569; }

/* --- Dark Tables (improved contrast + sticky headers) --- */
[data-theme="dark"] .dashboard-table th {
    color: #64748b;
    background: rgba(17, 24, 39, 0.95) !important;
    backdrop-filter: blur(8px);
    border-bottom: 2px solid rgba(139, 92, 246, 0.1) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[data-theme="dark"] .dashboard-table td {
    color: #e2e8f0;
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .dashboard-table tbody tr:hover {
    background: rgba(139, 92, 246, 0.05) !important;
    box-shadow: inset 3px 0 0 rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .table th {
    background: rgba(17, 24, 39, 0.95) !important;
    color: #64748b;
    border-bottom: 2px solid rgba(139, 92, 246, 0.08) !important;
}

[data-theme="dark"] .table td {
    color: #e2e8f0;
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .table tbody tr:hover {
    background: rgba(139, 92, 246, 0.04) !important;
}

/* --- Dark Buttons --- */
[data-theme="dark"] .btn-pill-secondary {
    background: #1e293b !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #94a3b8;
}

[data-theme="dark"] .btn-pill-secondary:hover {
    border-color: rgba(139, 92, 246, 0.3) !important;
    color: #a78bfa;
    background: #1e293b !important;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.1);
}

[data-theme="dark"] .btn-pill-primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3), 0 0 20px rgba(124, 58, 237, 0.15) !important;
}

[data-theme="dark"] .button {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
}

[data-theme="dark"] .button:hover {
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35), 0 0 24px rgba(124, 58, 237, 0.15) !important;
}

[data-theme="dark"] .button.button-secondary {
    background: #1e293b !important;
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .button.button-secondary:hover {
    background: #334155 !important;
    border-color: rgba(255, 255, 255, 0.15);
}

/* --- Dark Clean Select --- */
[data-theme="dark"] .select-clean {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="dark"] .select-clean:hover {
    border-color: rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .select-clean:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

[data-theme="dark"] .select-label {
    color: #64748b;
}

/* --- Dark Inputs --- */
[data-theme="dark"] .input,
[data-theme="dark"] .form-input {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9;
}

[data-theme="dark"] .input:focus,
[data-theme="dark"] .form-input:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15), 0 0 12px rgba(139, 92, 246, 0.08);
}

[data-theme="dark"] .textarea,
[data-theme="dark"] .feedback-textarea {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

/* --- Dark MudBlazor Select — shadcn-style --- */
[data-theme="dark"] .mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
}

[data-theme="dark"] .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(139, 92, 246, 0.25) !important;
}

[data-theme="dark"] .mud-input-outlined.mud-input-outlined-focus .mud-input-outlined-border {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12), 0 0 12px rgba(139, 92, 246, 0.06) !important;
}

[data-theme="dark"] .mud-input { color: #f1f5f9 !important; }
[data-theme="dark"] .mud-input-label { color: #64748b !important; }

[data-theme="dark"] .mud-popover {
    background: #1e293b !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .mud-list-item {
    color: #e2e8f0 !important;
    border-radius: 8px !important;
    margin: 1px 4px !important;
}

[data-theme="dark"] .mud-list-item:hover {
    background: rgba(139, 92, 246, 0.08) !important;
}

[data-theme="dark"] .mud-list-item.mud-selected-item {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #a78bfa !important;
}

/* --- Dark Empty State --- */
[data-theme="dark"] .empty-state {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: linear-gradient(180deg, #111827, #1e293b) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

[data-theme="dark"] .empty-state-title { color: #f1f5f9; }

/* --- Dark Provider Cards --- */
[data-theme="dark"] .provider-card {
    background: linear-gradient(180deg, #111827, #0f1521) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .provider-card:hover {
    border-color: rgba(139, 92, 246, 0.15) !important;
    background: #1e293b !important;
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.06);
}

/* --- Dark Profile --- */
[data-theme="dark"] .profile-slideout {
    background: #111827 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-left-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .profile-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(6px);
}

[data-theme="dark"] .profile-header { border-bottom-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .profile-section { border-bottom-color: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .profile-org-name { color: #f1f5f9; }

[data-theme="dark"] .profile-tier-badge {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
}

[data-theme="dark"] .header-plan-badge {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(96, 165, 250, 0.1)) !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
    color: #a78bfa;
}

[data-theme="dark"] .sidebar-savings-card {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35), 0 0 40px rgba(124, 58, 237, 0.15) !important;
}

/* --- Dark Auth --- */
[data-theme="dark"] .auth-layout {
    background: linear-gradient(135deg, #0b1120 0%, #1e1b4b 50%, #0f172a 100%) !important;
}

[data-theme="dark"] .auth-card {
    background: #111827 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 40px rgba(79, 70, 229, 0.08) !important;
}

[data-theme="dark"] .auth-title { color: #f1f5f9; }
[data-theme="dark"] .auth-brand span { color: #f1f5f9; }

/* --- Dark Filter --- */
[data-theme="dark"] .filter-bar {
    background: #111827 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .filter-select {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9;
    border-radius: 10px !important;
}

[data-theme="dark"] .filter-select:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12) !important;
}

/* --- Dark Misc --- */
[data-theme="dark"] .opportunity-item:hover {
    background: #1e293b !important;
    border-color: rgba(139, 92, 246, 0.1);
}

[data-theme="dark"] .plan-card {
    background: linear-gradient(180deg, #111827, #0f1521) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .plan-card:hover {
    border-color: rgba(139, 92, 246, 0.15) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(139, 92, 246, 0.06) !important;
}

[data-theme="dark"] .plan-card-current {
    border-color: rgba(139, 92, 246, 0.3) !important;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.15), 0 0 20px rgba(139, 92, 246, 0.08) !important;
}

[data-theme="dark"] .plan-card-name,
[data-theme="dark"] .plan-card-price-amount { color: #f1f5f9; }

[data-theme="dark"] .sub-status-banner {
    background: #111827 !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .sub-status-plan-name,
[data-theme="dark"] .sub-status-price-amount { color: #f1f5f9; }

[data-theme="dark"] .upgrade-gate-title { color: #f1f5f9; }
[data-theme="dark"] .upgrade-gate-icon {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(96, 165, 250, 0.1)) !important;
    border-color: rgba(139, 92, 246, 0.2) !important;
    color: #a78bfa !important;
}

[data-theme="dark"] .code-block {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
}

/* Dark badges */
[data-theme="dark"] .badge-success { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
[data-theme="dark"] .badge-info    { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
[data-theme="dark"] .badge-warning { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
[data-theme="dark"] .badge-error   { background: rgba(248, 113, 113, 0.12); color: #f87171; }

/* Dark alerts */
[data-theme="dark"] .alert { background: #1e293b; border-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .alert-success { background: rgba(96, 165, 250, 0.1); color: #60a5fa; border-color: rgba(96, 165, 250, 0.2); border-left-color: #60a5fa; }
[data-theme="dark"] .alert-error { background: rgba(248, 113, 113, 0.1); color: #f87171; border-color: rgba(248, 113, 113, 0.2); border-left-color: #f87171; }

/* Dark metrics */
[data-theme="dark"] .metric-value { color: #f1f5f9; }
[data-theme="dark"] .metric-label { color: #64748b; }
[data-theme="dark"] .metric-trend-up { color: #34d399; }
[data-theme="dark"] .metric-trend-down { color: #f87171; }

/* Dark dropdown */
[data-theme="dark"] .dropdown-select {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
    border-radius: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="dark"] .dropdown-select:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12);
}

/* Dark profile links */
[data-theme="dark"] .logout-button { color: #94a3b8; }
[data-theme="dark"] .logout-button:hover { background: rgba(139, 92, 246, 0.06); color: #e2e8f0; }

[data-theme="dark"] .profile-feedback-link {
    background: #1e293b;
    color: #94a3b8;
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .profile-feedback-link:hover { background: #334155; color: #f1f5f9; }

/* Dark skeletons */
[data-theme="dark"] .skeleton-card { background: #111827; border-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .skeleton-line { background: #1e293b; }

[data-theme="dark"] .sidebar-currency-selector select {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

/* Dark scrollbar */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
[data-theme="dark"] ::selection { background: rgba(139, 92, 246, 0.3); color: #f1f5f9; }




/* ==========================================================================
   THEME TOGGLE — Sun/Moon switch in top header
   ========================================================================== */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 3px;
    margin-right: 0.25rem;
}

.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    transition: all 150ms ease;
    padding: 0;
    font-size: 0;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--text, #0f172a);
}

.theme-toggle-btn.active {
    background: rgba(255, 255, 255, 0.7);
    color: var(--text, #0f172a);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.theme-toggle-btn svg {
    width: 14px;
    height: 14px;
}

[data-theme="dark"] .theme-toggle {
    background: #1e293b;
}

[data-theme="dark"] .theme-toggle-btn:hover {
    background: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .theme-toggle-btn.active {
    background: #334155;
    color: #f1f5f9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}