/* ============================================================ Dark Mode — Hosting CRM Theme ============================================================ Comprehensive dark mode overrides. Import AFTER tokens.css. Activation methods: 1. Manual: 2. Auto: prefers-color-scheme: dark (this file handles it) All colors maintain WCAG AA contrast ratios (4.5:1 normal, 3:1 large). ============================================================ */ /* ============================================================ AUTO-ACTIVATION: System Preference ============================================================ When no data-theme is set on the HTML element, automatically activate dark mode if the user's OS prefers dark scheme. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Backgrounds */ --bg-base: #0f1117; --bg-surface: #161822; --bg-surface-hover: #1e2030; --bg-elevated: #1e2030; --bg-muted: #1a1d2e; --bg-subtle: #252838; /* Text — WCAG AA compliant on dark backgrounds */ --text-primary: #e2e8f0; /* 14.5:1 on #0f1117 */ --text-secondary: #94a3b8; /* 7.0:1 on #0f1117 */ --text-muted: #64748b; /* 4.0:1 on #0f1117 — used for non-essential */ --text-inverse: #0f172a; /* Borders */ --border-default: #2e3348; --border-subtle: #252838; --border-strong: #475569; /* Brand — slightly brighter for dark backgrounds */ --color-primary: #3b82f6; --color-primary-hover: #60a5fa; --color-primary-light: rgba(59, 130, 246, 0.12); --color-primary-glow: 0 0 20px rgba(59, 130, 246, 0.3); --color-secondary: #94a3b8; --color-secondary-hover: #cbd5e1; --color-secondary-light: rgba(148, 163, 184, 0.12); /* Semantic — brighter for contrast on dark */ --color-success: #34d399; --color-success-hover: #6ee7b7; --color-success-light: rgba(52, 211, 153, 0.12); --color-warning: #fbbf24; --color-warning-hover: #fcd34d; --color-warning-light: rgba(251, 191, 36, 0.12); --color-danger: #f87171; --color-danger-hover: #fca5a5; --color-danger-light: rgba(248, 113, 113, 0.12); --color-info: #60a5fa; --color-info-hover: #93c5fd; --color-info-light: rgba(96, 165, 250, 0.12); /* Sidebar — keep dark, slight adjustments */ --sidebar-bg: #0d0f15; --sidebar-bg-hover: #1a1d2e; --sidebar-bg-active: rgba(59, 130, 246, 0.2); --sidebar-border: rgba(255, 255, 255, 0.06); --sidebar-text: #94a3b8; --sidebar-text-active: #e2e8f0; /* Header */ --header-bg: #1e2030; --header-text: #e2e8f0; /* Shadows — heavier for dark mode depth */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.25); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.25); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2); } } /* ============================================================ MANUAL ACTIVATION: [data-theme="dark"] ============================================================ */ [data-theme="dark"] { /* Backgrounds */ --bg-base: #0f1117; --bg-surface: #161822; --bg-surface-hover: #1e2030; --bg-elevated: #1e2030; --bg-muted: #1a1d2e; --bg-subtle: #252838; /* Text — WCAG AA compliant on dark backgrounds */ --text-primary: #e2e8f0; /* 14.5:1 on #0f1117 */ --text-secondary: #94a3b8; /* 7.0:1 on #0f1117 */ --text-muted: #64748b; /* 4.0:1 on #0f1117 */ --text-inverse: #0f172a; /* Borders */ --border-default: #2e3348; --border-subtle: #252838; --border-strong: #475569; /* Brand */ --color-primary: #3b82f6; --color-primary-hover: #60a5fa; --color-primary-light: rgba(59, 130, 246, 0.12); --color-primary-glow: 0 0 20px rgba(59, 130, 246, 0.3); --color-secondary: #94a3b8; --color-secondary-hover: #cbd5e1; --color-secondary-light: rgba(148, 163, 184, 0.12); /* Semantic */ --color-success: #34d399; --color-success-hover: #6ee7b7; --color-success-light: rgba(52, 211, 153, 0.12); --color-warning: #fbbf24; --color-warning-hover: #fcd34d; --color-warning-light: rgba(251, 191, 36, 0.12); --color-danger: #f87171; --color-danger-hover: #fca5a5; --color-danger-light: rgba(248, 113, 113, 0.12); --color-info: #60a5fa; --color-info-hover: #93c5fd; --color-info-light: rgba(96, 165, 250, 0.12); /* Sidebar */ --sidebar-bg: #0d0f15; --sidebar-bg-hover: #1a1d2e; --sidebar-bg-active: rgba(59, 130, 246, 0.2); --sidebar-border: rgba(255, 255, 255, 0.06); --sidebar-text: #94a3b8; --sidebar-text-active: #e2e8f0; /* Header */ --header-bg: #1e2030; --header-text: #e2e8f0; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.25); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.25); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2); } /* ============================================================ GLOBAL DARK OVERRIDES ============================================================ */ /* --- Body & Base --- */ [data-theme="dark"] body, @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { background-color: var(--bg-base); color: var(--text-primary); } } /* --- Selection --- */ [data-theme="dark"] ::selection { background-color: rgba(59, 130, 246, 0.3); color: #ffffff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) ::selection { background-color: rgba(59, 130, 246, 0.3); color: #ffffff; } } /* --- Scrollbar --- */ [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) ::-webkit-scrollbar-thumb { background: #334155; } :root:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover { background: #475569; } } /* --- Code Blocks --- */ [data-theme="dark"] code { background: #1e2030; color: #e2e8f0; } [data-theme="dark"] pre { background: #0d0f15; border: 1px solid #2e3348; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) code { background: #1e2030; color: #e2e8f0; } :root:not([data-theme="light"]) pre { background: #0d0f15; border: 1px solid #2e3348; } } /* --- Horizontal Rule --- */ [data-theme="dark"] hr { border-top-color: #2e3348; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) hr { border-top-color: #2e3348; } } /* --- Focus Ring --- */ [data-theme="dark"] :focus-visible { outline-color: #60a5fa; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :focus-visible { outline-color: #60a5fa; } } /* ============================================================ BUTTONS — Dark Mode ============================================================ */ [data-theme="dark"] .sd-button { background: #1e2030; color: #e2e8f0; border-color: #2e3348; } [data-theme="dark"] .sd-button:hover { background: #252838; border-color: #475569; } [data-theme="dark"] .sd-button:active { background: #2e3348; } [data-theme="dark"] .sd-button:focus-visible { outline-color: #60a5fa; } /* Primary */ [data-theme="dark"] .sd-button--primary { background: #3b82f6; border-color: #3b82f6; color: #ffffff; } [data-theme="dark"] .sd-button--primary:hover { background: #60a5fa; border-color: #60a5fa; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4); } [data-theme="dark"] .sd-button--primary:active { background: #2563eb; } /* Secondary */ [data-theme="dark"] .sd-button--secondary { background: transparent; border-color: #475569; color: #94a3b8; } [data-theme="dark"] .sd-button--secondary:hover { background: #1e2030; border-color: #64748b; color: #e2e8f0; } [data-theme="dark"] .sd-button--secondary:active { background: #252838; } /* Danger */ [data-theme="dark"] .sd-button--danger { background: #dc2626; border-color: #dc2626; color: #ffffff; } [data-theme="dark"] .sd-button--danger:hover { background: #ef4444; border-color: #ef4444; box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4); } [data-theme="dark"] .sd-button--danger:active { background: #b91c1c; } /* Ghost */ [data-theme="dark"] .sd-button--ghost { background: transparent; color: #94a3b8; } [data-theme="dark"] .sd-button--ghost:hover { background: #1e2030; color: #e2e8f0; } [data-theme="dark"] .sd-button--ghost:active { background: #252838; } /* Loading spinner */ [data-theme="dark"] .sd-button--loading::after { border-color: rgba(255, 255, 255, 0.2); border-right-color: transparent; } /* ============================================================ INPUTS / SELECTS / TEXTAREAS — Dark Mode ============================================================ */ [data-theme="dark"] .sd-input, [data-theme="dark"] .sd-select, [data-theme="dark"] .sd-textarea { background: #0d0f15; border-color: #2e3348; color: #e2e8f0; } [data-theme="dark"] .sd-input:hover, [data-theme="dark"] .sd-select:hover, [data-theme="dark"] .sd-textarea:hover { border-color: #475569; } [data-theme="dark"] .sd-input:focus, [data-theme="dark"] .sd-select:focus, [data-theme="dark"] .sd-textarea:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } [data-theme="dark"] .sd-input::placeholder, [data-theme="dark"] .sd-textarea::placeholder { color: #64748b; } [data-theme="dark"] .sd-input:disabled, [data-theme="dark"] .sd-select:disabled, [data-theme="dark"] .sd-textarea:disabled { background: #161822; border-color: #252838; color: #475569; } /* Select dropdown arrow */ [data-theme="dark"] .sd-select { 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%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); } /* Error state */ [data-theme="dark"] .sd-input--error, [data-theme="dark"] .sd-select--error, [data-theme="dark"] .sd-textarea--error { border-color: #f87171; } [data-theme="dark"] .sd-input--error:focus, [data-theme="dark"] .sd-select--error:focus, [data-theme="dark"] .sd-textarea--error:focus { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2); } /* Success state */ [data-theme="dark"] .sd-input--success, [data-theme="dark"] .sd-select--success { border-color: #34d399; } [data-theme="dark"] .sd-input--success:focus, [data-theme="dark"] .sd-select--success:focus { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2); } /* Form labels & help text */ [data-theme="dark"] .sd-form-label { color: #94a3b8; } [data-theme="dark"] .sd-form-help { color: #64748b; } [data-theme="dark"] .sd-form-error { color: #f87171; } /* ============================================================ BADGES — Dark Mode ============================================================ */ [data-theme="dark"] .sd-badge--success { background: rgba(52, 211, 153, 0.15); color: #34d399; } [data-theme="dark"] .sd-badge--warning { background: rgba(251, 191, 36, 0.15); color: #fbbf24; } [data-theme="dark"] .sd-badge--danger { background: rgba(248, 113, 113, 0.15); color: #f87171; } [data-theme="dark"] .sd-badge--info { background: rgba(96, 165, 250, 0.15); color: #60a5fa; } [data-theme="dark"] .sd-badge--neutral { background: rgba(148, 163, 184, 0.15); color: #94a3b8; } /* Outline badges */ [data-theme="dark"] .sd-badge--outline.sd-badge--success { color: #34d399; border-color: #34d399; } [data-theme="dark"] .sd-badge--outline.sd-badge--warning { color: #fbbf24; border-color: #fbbf24; } [data-theme="dark"] .sd-badge--outline.sd-badge--danger { color: #f87171; border-color: #f87171; } [data-theme="dark"] .sd-badge--outline.sd-badge--info { color: #60a5fa; border-color: #60a5fa; } /* ============================================================ CHECKBOXES — Dark Mode ============================================================ */ [data-theme="dark"] .sd-checkbox { color: #e2e8f0; } [data-theme="dark"] .sd-checkbox__box { background: #0d0f15; border-color: #475569; } [data-theme="dark"] .sd-checkbox__input:checked + .sd-checkbox__box { background: #3b82f6; border-color: #3b82f6; } [data-theme="dark"] .sd-checkbox__input:focus-visible + .sd-checkbox__box { outline-color: #60a5fa; } [data-theme="dark"] .sd-checkbox__input:disabled + .sd-checkbox__box { background: #161822; border-color: #252838; } [data-theme="dark"] .sd-checkbox__input:disabled:checked + .sd-checkbox__box { background: #475569; border-color: #475569; } [data-theme="dark"] .sd-checkbox__label { color: #e2e8f0; } /* Error state */ [data-theme="dark"] .sd-checkbox--error .sd-checkbox__box { border-color: #f87171; } [data-theme="dark"] .sd-checkbox--error .sd-checkbox__label { color: #f87171; } /* ============================================================ RADIO BUTTONS — Dark Mode ============================================================ */ [data-theme="dark"] .sd-radio { color: #e2e8f0; } [data-theme="dark"] .sd-radio__circle { background: #0d0f15; border-color: #475569; } [data-theme="dark"] .sd-radio__input:checked + .sd-radio__circle { background: #3b82f6; border-color: #3b82f6; } [data-theme="dark"] .sd-radio__input:focus-visible + .sd-radio__circle { outline-color: #60a5fa; } [data-theme="dark"] .sd-radio__input:disabled + .sd-radio__circle { background: #161822; border-color: #252838; } [data-theme="dark"] .sd-radio__input:disabled:checked + .sd-radio__circle { background: #475569; border-color: #475569; } [data-theme="dark"] .sd-radio__label { color: #e2e8f0; } /* Error state */ [data-theme="dark"] .sd-radio--error .sd-radio__circle { border-color: #f87171; } [data-theme="dark"] .sd-radio--error .sd-radio__label { color: #f87171; } /* ============================================================ TOGGLES — Dark Mode ============================================================ */ [data-theme="dark"] .sd-toggle { color: #e2e8f0; } [data-theme="dark"] .sd-toggle__track { background: #334155; } [data-theme="dark"] .sd-toggle__input:checked + .sd-toggle__track { background: #3b82f6; } [data-theme="dark"] .sd-toggle__input:focus-visible + .sd-toggle__track { outline-color: #60a5fa; } [data-theme="dark"] .sd-toggle__thumb { background: #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .sd-toggle__input:disabled + .sd-toggle__track { background: #1e2030; } [data-theme="dark"] .sd-toggle__input:disabled:checked + .sd-toggle__track { background: #475569; } [data-theme="dark"] .sd-toggle__input:disabled + .sd-toggle__track .sd-toggle__thumb { background: #475569; } [data-theme="dark"] .sd-toggle__label { color: #e2e8f0; } /* ============================================================ TABLES — Dark Mode ============================================================ */ [data-theme="dark"] table { border-color: #2e3348; } [data-theme="dark"] thead { background: #161822; } [data-theme="dark"] th { color: #94a3b8; border-bottom-color: #2e3348; font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; } [data-theme="dark"] td { border-bottom-color: #1e2030; color: #e2e8f0; } [data-theme="dark"] tbody tr:hover { background: #1e2030; } [data-theme="dark"] tbody tr:active { background: #252838; } [data-theme="dark"] tbody tr:nth-child(even) { background: rgba(22, 24, 34, 0.5); } [data-theme="dark"] tbody tr:nth-child(even):hover { background: #1e2030; } /* Table variants */ [data-theme="dark"] .table-striped tbody tr:nth-child(even) { background: rgba(30, 32, 48, 0.5); } [data-theme="dark"] .table-hover tbody tr:hover { background: #1e2030; } /* ============================================================ CARDS — Dark Mode ============================================================ */ [data-theme="dark"] .card, [data-theme="dark"] .sd-card { background: #161822; border-color: #2e3348; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .card:hover, [data-theme="dark"] .sd-card:hover { border-color: #475569; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .card-header, [data-theme="dark"] .sd-card__header { background: #1a1d2e; border-bottom-color: #2e3348; color: #e2e8f0; } [data-theme="dark"] .card-body, [data-theme="dark"] .sd-card__body { color: #e2e8f0; } [data-theme="dark"] .card-footer, [data-theme="dark"] .sd-card__footer { background: #1a1d2e; border-top-color: #2e3348; } /* ============================================================ SIDEBAR — Dark Mode ============================================================ */ [data-theme="dark"] .sidebar, [data-theme="dark"] .sd-sidebar { background: #0d0f15; border-right-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .sidebar:hover, [data-theme="dark"] .sd-sidebar:hover { background: #0d0f15; } [data-theme="dark"] .sidebar-nav-item, [data-theme="dark"] .sd-sidebar__item { color: #94a3b8; } [data-theme="dark"] .sidebar-nav-item:hover, [data-theme="dark"] .sd-sidebar__item:hover { background: #1a1d2e; color: #e2e8f0; } [data-theme="dark"] .sidebar-nav-item.active, [data-theme="dark"] .sd-sidebar__item--active { background: rgba(59, 130, 246, 0.15); color: #e2e8f0; } [data-theme="dark"] .sidebar-nav-item.active:hover, [data-theme="dark"] .sd-sidebar__item--active:hover { background: rgba(59, 130, 246, 0.2); } [data-theme="dark"] .sidebar-section-title, [data-theme="dark"] .sd-sidebar__section-title { color: #64748b; } [data-theme="dark"] .sidebar-divider, [data-theme="dark"] .sd-sidebar__divider { border-top-color: rgba(255, 255, 255, 0.06); } /* ============================================================ HEADER — Dark Mode ============================================================ */ [data-theme="dark"] .header, [data-theme="dark"] .sd-header { background: #1e2030; border-bottom-color: #2e3348; color: #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .header-nav-item, [data-theme="dark"] .sd-header__nav-item { color: #94a3b8; } [data-theme="dark"] .header-nav-item:hover, [data-theme="dark"] .sd-header__nav-item:hover { color: #e2e8f0; background: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .header-nav-item.active, [data-theme="dark"] .sd-header__nav-item--active { color: #e2e8f0; background: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .header-search, [data-theme="dark"] .sd-header__search { background: #0d0f15; border-color: #2e3348; color: #e2e8f0; } [data-theme="dark"] .header-search::placeholder, [data-theme="dark"] .sd-header__search::placeholder { color: #64748b; } [data-theme="dark"] .header-user-menu, [data-theme="dark"] .sd-header__user-menu { background: #161822; border-color: #2e3348; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .header-user-menu-item:hover, [data-theme="dark"] .sd-header__user-menu-item:hover { background: #1e2030; color: #e2e8f0; } /* ============================================================ MODALS — Dark Mode ============================================================ */ [data-theme="dark"] .modal-backdrop, [data-theme="dark"] .sd-modal__backdrop { background: rgba(0, 0, 0, 0.7); } [data-theme="dark"] .modal, [data-theme="dark"] .sd-modal { background: #161822; border-color: #2e3348; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6); } [data-theme="dark"] .modal-header, [data-theme="dark"] .sd-modal__header { background: #1a1d2e; border-bottom-color: #2e3348; color: #e2e8f0; } [data-theme="dark"] .modal-body, [data-theme="dark"] .sd-modal__body { color: #e2e8f0; } [data-theme="dark"] .modal-footer, [data-theme="dark"] .sd-modal__footer { background: #1a1d2e; border-top-color: #2e3348; } /* ============================================================ DROPDOWNS — Dark Mode ============================================================ */ [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .sd-dropdown__menu { background: #161822; border-color: #2e3348; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .dropdown-item, [data-theme="dark"] .sd-dropdown__item { color: #e2e8f0; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .sd-dropdown__item:hover { background: #1e2030; color: #ffffff; } [data-theme="dark"] .dropdown-item:active, [data-theme="dark"] .sd-dropdown__item:active { background: #252838; } [data-theme="dark"] .dropdown-divider, [data-theme="dark"] .sd-dropdown__divider { border-top-color: #2e3348; } /* ============================================================ TOOLTIPS — Dark Mode ============================================================ */ [data-theme="dark"] .tooltip, [data-theme="dark"] .sd-tooltip { background: #1e2030; color: #e2e8f0; border-color: #2e3348; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); } /* ============================================================ ALERTS / NOTIFICATIONS — Dark Mode ============================================================ */ [data-theme="dark"] .alert, [data-theme="dark"] .sd-alert { border-color: #2e3348; } [data-theme="dark"] .alert-success, [data-theme="dark"] .sd-alert--success { background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.3); color: #34d399; } [data-theme="dark"] .alert-warning, [data-theme="dark"] .sd-alert--warning { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); color: #fbbf24; } [data-theme="dark"] .alert-danger, [data-theme="dark"] .sd-alert--danger { background: rgba(248, 113, 113, 0.1); border-color: rgba(248, 113, 113, 0.3); color: #f87171; } [data-theme="dark"] .alert-info, [data-theme="dark"] .sd-alert--info { background: rgba(96, 165, 250, 0.1); border-color: rgba(96, 165, 250, 0.3); color: #60a5fa; } /* ============================================================ PAGINATION — Dark Mode ============================================================ */ [data-theme="dark"] .pagination, [data-theme="dark"] .sd-pagination { gap: 0.25rem; } [data-theme="dark"] .pagination-item, [data-theme="dark"] .sd-pagination__item { background: #161822; border-color: #2e3348; color: #94a3b8; } [data-theme="dark"] .pagination-item:hover, [data-theme="dark"] .sd-pagination__item:hover { background: #1e2030; border-color: #475569; color: #e2e8f0; } [data-theme="dark"] .pagination-item.active, [data-theme="dark"] .sd-pagination__item--active { background: #3b82f6; border-color: #3b82f6; color: #ffffff; } [data-theme="dark"] .pagination-item:disabled, [data-theme="dark"] .sd-pagination__item:disabled { background: #0d0f15; border-color: #252838; color: #475569; cursor: not-allowed; } /* ============================================================ TABS — Dark Mode ============================================================ */ [data-theme="dark"] .tabs, [data-theme="dark"] .sd-tabs { border-bottom-color: #2e3348; } [data-theme="dark"] .tab-item, [data-theme="dark"] .sd-tabs__item { color: #94a3b8; border-bottom-color: transparent; } [data-theme="dark"] .tab-item:hover, [data-theme="dark"] .sd-tabs__item:hover { color: #e2e8f0; background: rgba(255, 255, 255, 0.03); } [data-theme="dark"] .tab-item.active, [data-theme="dark"] .sd-tabs__item--active { color: #3b82f6; border-bottom-color: #3b82f6; } [data-theme="dark"] .tab-content, [data-theme="dark"] .sd-tabs__content { color: #e2e8f0; } /* ============================================================ PROGRESS BARS — Dark Mode ============================================================ */ [data-theme="dark"] .progress, [data-theme="dark"] .sd-progress { background: #1e2030; } [data-theme="dark"] .progress-bar, [data-theme="dark"] .sd-progress__bar { background: #3b82f6; } [data-theme="dark"] .progress-bar-success, [data-theme="dark"] .sd-progress__bar--success { background: #34d399; } [data-theme="dark"] .progress-bar-warning, [data-theme="dark"] .sd-progress__bar--warning { background: #fbbf24; } [data-theme="dark"] .progress-bar-danger, [data-theme="dark"] .sd-progress__bar--danger { background: #f87171; } /* ============================================================ AVATARS — Dark Mode ============================================================ */ [data-theme="dark"] .avatar, [data-theme="dark"] .sd-avatar { border-color: #2e3348; box-shadow: 0 0 0 2px #161822; } [data-theme="dark"] .avatar-group .avatar + .avatar, [data-theme="dark"] .sd-avatar-group .sd-avatar + .sd-avatar { border-color: #161822; } /* ============================================================ LISTS / LIST GROUPS — Dark Mode ============================================================ */ [data-theme="dark"] .list-group, [data-theme="dark"] .sd-list-group { border-color: #2e3348; } [data-theme="dark"] .list-group-item, [data-theme="dark"] .sd-list-group__item { background: #161822; border-bottom-color: #2e3348; color: #e2e8f0; } [data-theme="dark"] .list-group-item:hover, [data-theme="dark"] .sd-list-group__item:hover { background: #1e2030; } [data-theme="dark"] .list-group-item.active, [data-theme="dark"] .sd-list-group__item--active { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.3); color: #e2e8f0; } /* ============================================================ STAT CARDS / KPI — Dark Mode ============================================================ */ [data-theme="dark"] .stat-card, [data-theme="dark"] .sd-stat { background: #161822; border-color: #2e3348; } [data-theme="dark"] .stat-card:hover, [data-theme="dark"] .sd-stat:hover { border-color: #475569; } [data-theme="dark"] .stat-value, [data-theme="dark"] .sd-stat__value { color: #e2e8f0; } [data-theme="dark"] .stat-label, [data-theme="dark"] .sd-stat__label { color: #94a3b8; } /* ============================================================ EMPTY STATES — Dark Mode ============================================================ */ [data-theme="dark"] .empty-state, [data-theme="dark"] .sd-empty-state { color: #64748b; } [data-theme="dark"] .empty-state-icon, [data-theme="dark"] .sd-empty-state__icon { color: #334155; } /* ============================================================ PREFERS-REDUCED-MOTION (respected in dark mode too) ============================================================ */ @media (prefers-reduced-motion: reduce) { [data-theme="dark"] *, [data-theme="dark"] *::before, [data-theme="dark"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }