/* ============================================================ Dark Theme Overrides Applied via [data-theme="dark"] on or ============================================================ */ [data-theme="dark"] { /* Backgrounds */ --bg-primary: #0f1117; --bg-secondary: #161823; --bg-tertiary: #1e2030; --bg-dark: #0a0b10; --bg-elevated: #1a1c2a; --bg-overlay: rgba(0, 0, 0, 0.7); --bg-hover: rgba(255, 255, 255, 0.05); /* Text */ --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-light: #64748b; --text-inverse: #0f172a; --text-link: #60a5fa; /* Borders */ --border: #1e293b; --border-dark: #334155; --border-light: #1e293b; --border-focus: #3b82f6; /* Shadows (darker in dark mode) */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3); /* Neutral Scale */ --gray-50: #1e293b; --gray-100: #1e2030; --gray-200: #334155; --gray-300: #475569; --gray-400: #64748b; --gray-500: #94a3b8; --gray-600: #cbd5e1; --gray-700: #e2e8f0; --gray-800: #f1f5f9; --gray-900: #f8fafc; --gray-950: #ffffff; /* Sidebar (stays dark in both modes) */ --sidebar-bg: #070a13; --sidebar-divider: rgba(255, 255, 255, 0.06); /* Top Bar */ --topbar-bg: #0f1117; --topbar-border: #1e293b; /* Chart Colors (slightly brighter for dark bg) */ --chart-grid: #1e293b; --chart-text: #94a3b8; } /* Dark mode adjustments for specific components */ [data-theme="dark"] .topbar { background: rgba(15, 17, 23, 0.9); } [data-theme="dark"] .search-trigger { background: var(--bg-tertiary); } [data-theme="dark"] .search-trigger-shortcut { background: #1e293b; border-color: #334155; } /* KPI icon backgrounds in dark mode */ [data-theme="dark"] .kpi-icon.blue { background: rgba(59, 130, 246, 0.15); } [data-theme="dark"] .kpi-icon.green { background: rgba(16, 185, 129, 0.15); } [data-theme="dark"] .kpi-icon.amber { background: rgba(245, 158, 11, 0.15); } [data-theme="dark"] .kpi-icon.red { background: rgba(239, 68, 68, 0.15); } [data-theme="dark"] .kpi-icon.purple { background: rgba(139, 92, 246, 0.15); } [data-theme="dark"] .kpi-icon.pink { background: rgba(236, 72, 153, 0.15); } /* Badges in dark mode */ [data-theme="dark"] .badge.success { background: rgba(16, 185, 129, 0.15); color: #34d399; } [data-theme="dark"] .badge.warning { background: rgba(245, 158, 11, 0.15); color: #fbbf24; } [data-theme="dark"] .badge.danger { background: rgba(239, 68, 68, 0.15); color: #f87171; } [data-theme="dark"] .badge.info { background: rgba(59, 130, 246, 0.15); color: #60a5fa; } [data-theme="dark"] .badge.neutral { background: rgba(148, 163, 184, 0.1); } [data-theme="dark"] .badge.purple { background: rgba(139, 92, 246, 0.15); color: #a78bfa; } /* Trend badges in dark mode */ [data-theme="dark"] .kpi-trend.up { background: rgba(16, 185, 129, 0.15); color: #34d399; } [data-theme="dark"] .kpi-trend.down { background: rgba(239, 68, 68, 0.15); color: #f87171; } [data-theme="dark"] .kpi-trend.neutral { background: rgba(148, 163, 184, 0.1); } /* Table in dark mode */ [data-theme="dark"] .data-table thead th { background: var(--bg-tertiary); } /* Activity icons in dark mode */ [data-theme="dark"] .activity-icon.print { background: rgba(59, 130, 246, 0.15); } [data-theme="dark"] .activity-icon.team { background: rgba(139, 92, 246, 0.15); } [data-theme="dark"] .activity-icon.billing { background: rgba(16, 185, 129, 0.15); } [data-theme="dark"] .activity-icon.integration { background: rgba(245, 158, 11, 0.15); } [data-theme="dark"] .activity-icon.error { background: rgba(239, 68, 68, 0.15); } /* Quick action cards in dark mode */ [data-theme="dark"] .quick-action-card:hover { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); } [data-theme="dark"] .quick-action-card:hover .quick-action-icon { background: rgba(59, 130, 246, 0.15); } /* Onboarding card in dark mode */ [data-theme="dark"] .onboarding-card { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%); border-color: rgba(99, 102, 241, 0.2); } [data-theme="dark"] .onboarding-step:hover { background: rgba(255, 255, 255, 0.05); } /* Skeleton in dark mode */ [data-theme="dark"] .skeleton { background: linear-gradient(90deg, var(--bg-tertiary) 25%, #252840 50%, var(--bg-tertiary) 75%); background-size: 200% 100%; } /* Toast in dark mode */ [data-theme="dark"] .toast { background: var(--bg-elevated); border-color: var(--border); } /* Modal in dark mode */ [data-theme="dark"] .modal-v2 { background: var(--bg-elevated); } /* Integration card hover in dark mode */ [data-theme="dark"] .integration-card-v2:hover { border-color: var(--border-dark); } /* Pagination button in dark mode */ [data-theme="dark"] .pagination-btn { background: var(--bg-primary); border-color: var(--border); color: var(--text-secondary); } [data-theme="dark"] .pagination-btn:hover:not(:disabled) { background: var(--bg-tertiary); border-color: var(--border-dark); color: var(--text-primary); } /* Filter buttons in dark mode */ [data-theme="dark"] .table-filter-btn { background: var(--bg-primary); border-color: var(--border); } [data-theme="dark"] .table-filter-btn.active { background: rgba(37, 99, 235, 0.15); border-color: rgba(59, 130, 246, 0.4); } /* Toggle in dark mode */ [data-theme="dark"] .sidebar-toggle { background: var(--bg-elevated); border-color: var(--border); } /* Tooltip in dark mode */ [data-theme="dark"] .tooltip { background: #e2e8f0; color: #0f172a; } [data-theme="dark"] .tooltip.top::after { border-top-color: #e2e8f0; }