/** * The Flock CRM - Dark Mode Stylesheet * Comprehensive dark theme for the CRM admin dashboard. * Activated via data-theme="dark" on or via auto + OS preference. * Version: 2.0.0 * * Colour palette (GitHub-style dark): * Background: #0d1117 * Surface/cards: #161b22 * Elevated: #1c2128 * Input: #21262d * Border: rgba(255, 255, 255, 0.1) / #30363d * Text primary: #e6edf3 * Text secondary: #8b949e * Brand accent: var(--brand-500, #7c3aed) * * Scoped to body:not(.hangout-app) so it never clashes with Hangout's * own dark-mode file (hangout-dark-mode.css). */ /* ========================================================================== 1. DARK TOKEN OVERRIDES — explicit dark mode ========================================================================== */ [data-theme="dark"] { /* ---- Neutral / Gray scale ---- */ --gray-50: #161b22; --gray-100: #1c2128; --gray-200: #21262d; --gray-300: #30363d; --gray-400: #484f58; --gray-500: #6e7681; --gray-600: #8b949e; --gray-700: #c9d1d9; --gray-800: #e6edf3; --gray-900: #f0f6fc; /* ---- Text ---- */ --text-primary: #e6edf3; --text-secondary: #c9d1d9; --text-tertiary: #8b949e; --text-muted: #8b949e; --text-inverse: #0d1117; --text-link: #c4b5fd; --text-link-hover: #a78bfa; /* ---- Backgrounds ---- */ --background: #0d1117; --background-secondary: #161b22; --background-tertiary: #1c2128; --background-overlay: rgba(0, 0, 0, 0.7); --surface: #161b22; --surface-primary: #161b22; --surface-secondary: #0d1117; /* ---- Borders ---- */ --border: #30363d; --border-light: #21262d; --border-dark: #484f58; --border-subtle: rgba(255, 255, 255, 0.1); --border-focus: var(--brand-400, #a855f7); /* ---- Semantic soft backgrounds ---- */ --success-50: rgba(34, 197, 94, 0.12); --success-soft: rgba(34, 197, 94, 0.15); --warning-50: rgba(245, 158, 11, 0.12); --warning-soft: rgba(245, 158, 11, 0.15); --danger-50: rgba(239, 68, 68, 0.12); --danger-soft: rgba(239, 68, 68, 0.15); --info-50: rgba(6, 182, 212, 0.12); --info-soft: rgba(6, 182, 212, 0.15); --primary-soft: rgba(124, 58, 237, 0.15); --accent-soft: rgba(59, 130, 246, 0.15); /* ---- Shadows (darker, more subtle) ---- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7); --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.4); /* ---- Charts ---- */ --chart-text: #c9d1d9; --chart-grid: rgba(255, 255, 255, 0.06); --chart-bg: #161b22; --chart-primary-light: rgba(124, 58, 237, 0.2); /* ---- Cards ---- */ --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.6); /* ---- Forms ---- */ --input-border-color: #30363d; --input-focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.25); /* ---- Tables ---- */ --table-header-bg: #161b22; /* ---- Modals ---- */ --modal-backdrop-bg: rgba(0, 0, 0, 0.7); /* ---- Skeleton loaders ---- */ --skeleton-bg: #21262d; --skeleton-shimmer: linear-gradient(90deg, #21262d 0%, #30363d 50%, #21262d 100%); /* ===== CRM NAVIGATION TOKENS ===== */ --nav-bg: #0d1117; --nav-text: #e6edf3; --nav-text-muted: #8b949e; --nav-border: #30363d; --nav-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); --nav-toggle-text: #c9d1d9; --nav-close-text: #8b949e; --nav-close-hover-bg: #21262d; --nav-close-hover-text:#e6edf3; --nav-item-text: #c9d1d9; --nav-item-hover-bg: rgba(124, 58, 237, 0.1); --nav-item-active-bg: rgba(124, 58, 237, 0.15); --nav-item-active-text: #c4b5fd; --notification-bell-text: #8b949e; --notification-bell-hover: #c4b5fd; --dropdown-bg: #161b22; --dropdown-border: #30363d; --dropdown-border-light: #30363d; --dropdown-hover-bg: #1c2128; --dropdown-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.5); --dropdown-header-text: #e6edf3; --dropdown-link-text: #c4b5fd; --dropdown-link-hover: #a78bfa; --notification-title-text: #e6edf3; --notification-message-text: #8b949e; --notification-time-text: #6e7681; --notification-unread-bg: rgba(59, 130, 246, 0.1); --notification-unread-hover-bg: rgba(59, 130, 246, 0.15); --notification-icon-bg: rgba(124, 58, 237, 0.15); --notification-icon-text: #c4b5fd; --scrollbar-bg: #0d1117; --scrollbar-thumb: #30363d; --scrollbar-thumb-hover: #484f58; /* ===== CRM MODAL TOKENS ===== */ --modal-bg: #161b22; --modal-border: #30363d; --modal-footer-bg: #0d1117; --modal-body-bg: #161b22; --modal-scrollbar-thumb: rgba(124, 58, 237, 0.3); --modal-scrollbar-thumb-hover: rgba(124, 58, 237, 0.5); --modal-scrollbar-thumb-legacy: rgba(124, 58, 237, 0.35); --modal-scrollbar-thumb-legacy-hover: rgba(124, 58, 237, 0.55); --modal-label-text: #c9d1d9; --modal-input-border: #30363d; --modal-input-focus-border:#a78bfa; --modal-input-focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.2); --modal-input-placeholder: #6e7681; --modal-input-bg: #21262d; --modal-btn-secondary-bg: #21262d; --modal-btn-secondary-border: #30363d; --modal-btn-secondary-text: #c9d1d9; --modal-btn-secondary-hover-bg: #30363d; --modal-btn-secondary-hover-border: #484f58; --modal-btn-secondary-hover-text: #e6edf3; --modal-btn-outline-text: #8b949e; --modal-btn-outline-hover-bg: #21262d; --modal-btn-outline-hover-border: #30363d; --modal-btn-outline-hover-text: #e6edf3; --modal-close-text: #8b949e; --modal-close-hover-bg: #21262d; --modal-close-hover-text: #e6edf3; --modal-legacy-header-text:#e6edf3; --modal-confirm-icon-bg: rgba(239, 68, 68, 0.15); --modal-success-icon-bg: rgba(16, 185, 129, 0.15); /* Toast notifications */ --toast-bg: #161b22; --toast-text: #e6edf3; --toast-border: #30363d; --modal-focus-border: #a78bfa; --modal-focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.2); --modal-checkbox-accent: #a78bfa; /* ===== V2 DESIGN TOKEN OVERRIDES ===== */ --v2-background: #0d1117; --v2-surface: #0d1117; --v2-surface-lowest: #0d1117; --v2-surface-low: #161b22; --v2-surface-container:#1c2128; --v2-surface-high: #21262d; --v2-surface-highest: #30363d; --v2-surface-variant: #30363d; --v2-surface-bright: #1c2128; --v2-on-surface: #e6edf3; --v2-on-surface-variant: #8b949e; --v2-on-background: #e6edf3; --v2-outline: #484f58; --v2-outline-variant: #30363d; --v2-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3); --v2-shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.4); --v2-shadow-nav: none; --v2-shadow-bottom-nav:0 -4px 16px rgba(0, 0, 0, 0.5); } /* ---- Sidebar menu-item overrides (beats components.css !important) ---- */ [data-theme="dark"] .menu-item { color: var(--nav-item-text, #c9d1d9) !important; } [data-theme="dark"] .menu-item i { color: var(--text-muted, #8b949e) !important; } [data-theme="dark"] .menu-item span { color: inherit !important; } [data-theme="dark"] .menu-item:hover { color: var(--text-primary, #e6edf3) !important; background: var(--nav-item-hover-bg, rgba(124, 58, 237, 0.1)) !important; } [data-theme="dark"] .menu-item:hover i { color: var(--text-primary, #e6edf3) !important; } [data-theme="dark"] .menu-item.active { color: var(--nav-item-active-text, #c4b5fd) !important; background: var(--nav-item-active-bg, rgba(124, 58, 237, 0.15)) !important; } [data-theme="dark"] .menu-item.active i { color: var(--nav-item-active-text, #c4b5fd) !important; } /* ========================================================================== 2. AUTO MODE — follows OS preference (token overrides) ========================================================================== */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { /* ---- Neutral / Gray scale ---- */ --gray-50: #161b22; --gray-100: #1c2128; --gray-200: #21262d; --gray-300: #30363d; --gray-400: #484f58; --gray-500: #6e7681; --gray-600: #8b949e; --gray-700: #c9d1d9; --gray-800: #e6edf3; --gray-900: #f0f6fc; /* ---- Text ---- */ --text-primary: #e6edf3; --text-secondary: #c9d1d9; --text-tertiary: #8b949e; --text-muted: #8b949e; --text-inverse: #0d1117; --text-link: #c4b5fd; --text-link-hover: #a78bfa; /* ---- Backgrounds ---- */ --background: #0d1117; --background-secondary: #161b22; --background-tertiary: #1c2128; --background-overlay: rgba(0, 0, 0, 0.7); --surface: #161b22; --surface-primary: #161b22; --surface-secondary: #0d1117; /* ---- Borders ---- */ --border: #30363d; --border-light: #21262d; --border-dark: #484f58; --border-subtle: rgba(255, 255, 255, 0.1); --border-focus: var(--brand-400, #a855f7); /* ---- Semantic soft backgrounds ---- */ --success-50: rgba(34, 197, 94, 0.12); --success-soft: rgba(34, 197, 94, 0.15); --warning-50: rgba(245, 158, 11, 0.12); --warning-soft: rgba(245, 158, 11, 0.15); --danger-50: rgba(239, 68, 68, 0.12); --danger-soft: rgba(239, 68, 68, 0.15); --info-50: rgba(6, 182, 212, 0.12); --info-soft: rgba(6, 182, 212, 0.15); --primary-soft: rgba(124, 58, 237, 0.15); --accent-soft: rgba(59, 130, 246, 0.15); /* ---- Shadows ---- */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7); --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.4); /* ---- Charts ---- */ --chart-text: #c9d1d9; --chart-grid: rgba(255, 255, 255, 0.06); --chart-bg: #161b22; --chart-primary-light: rgba(124, 58, 237, 0.2); /* ---- Cards ---- */ --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.6); /* ---- Forms ---- */ --input-border-color: #30363d; --input-focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.25); /* ---- Tables ---- */ --table-header-bg: #161b22; /* ---- Modals ---- */ --modal-backdrop-bg: rgba(0, 0, 0, 0.7); /* ---- Skeleton loaders ---- */ --skeleton-bg: #21262d; --skeleton-shimmer: linear-gradient(90deg, #21262d 0%, #30363d 50%, #21262d 100%); /* ===== CRM NAVIGATION TOKENS ===== */ --nav-bg: #0d1117; --nav-text: #e6edf3; --nav-text-muted: #8b949e; --nav-border: #30363d; --nav-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); --nav-toggle-text: #c9d1d9; --nav-close-text: #8b949e; --nav-close-hover-bg: #21262d; --nav-close-hover-text:#e6edf3; --nav-item-text: #c9d1d9; --nav-item-hover-bg: rgba(124, 58, 237, 0.1); --nav-item-active-bg: rgba(124, 58, 237, 0.15); --nav-item-active-text: #c4b5fd; --notification-bell-text: #8b949e; --notification-bell-hover: #c4b5fd; --dropdown-bg: #161b22; --dropdown-border: #30363d; --dropdown-border-light: #30363d; --dropdown-hover-bg: #1c2128; --dropdown-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.5); --dropdown-header-text: #e6edf3; --dropdown-link-text: #c4b5fd; --dropdown-link-hover: #a78bfa; --notification-title-text: #e6edf3; --notification-message-text: #8b949e; --notification-time-text: #6e7681; --notification-unread-bg: rgba(59, 130, 246, 0.1); --notification-unread-hover-bg: rgba(59, 130, 246, 0.15); --notification-icon-bg: rgba(124, 58, 237, 0.15); --notification-icon-text: #c4b5fd; --scrollbar-bg: #0d1117; --scrollbar-thumb: #30363d; --scrollbar-thumb-hover: #484f58; /* ===== CRM MODAL TOKENS ===== */ --modal-bg: #161b22; --modal-border: #30363d; --modal-footer-bg: #0d1117; --modal-body-bg: #161b22; --modal-scrollbar-thumb: rgba(124, 58, 237, 0.3); --modal-scrollbar-thumb-hover: rgba(124, 58, 237, 0.5); --modal-scrollbar-thumb-legacy: rgba(124, 58, 237, 0.35); --modal-scrollbar-thumb-legacy-hover: rgba(124, 58, 237, 0.55); --modal-label-text: #c9d1d9; --modal-input-border: #30363d; --modal-input-focus-border:#a78bfa; --modal-input-focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.2); --modal-input-placeholder: #6e7681; --modal-input-bg: #21262d; --modal-btn-secondary-bg: #21262d; --modal-btn-secondary-border: #30363d; --modal-btn-secondary-text: #c9d1d9; --modal-btn-secondary-hover-bg: #30363d; --modal-btn-secondary-hover-border: #484f58; --modal-btn-secondary-hover-text: #e6edf3; --modal-btn-outline-text: #8b949e; --modal-btn-outline-hover-bg: #21262d; --modal-btn-outline-hover-border: #30363d; --modal-btn-outline-hover-text: #e6edf3; --modal-close-text: #8b949e; --modal-close-hover-bg: #21262d; --modal-close-hover-text: #e6edf3; --modal-legacy-header-text:#e6edf3; --modal-confirm-icon-bg: rgba(239, 68, 68, 0.15); --modal-success-icon-bg: rgba(16, 185, 129, 0.15); /* Toast notifications */ --toast-bg: #161b22; --toast-text: #e6edf3; --toast-border: #30363d; --modal-focus-border: #a78bfa; --modal-focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.2); --modal-checkbox-accent: #a78bfa; /* ===== V2 DESIGN TOKEN OVERRIDES ===== */ --v2-background: #0d1117; --v2-surface: #0d1117; --v2-surface-lowest: #0d1117; --v2-surface-low: #161b22; --v2-surface-container:#1c2128; --v2-surface-high: #21262d; --v2-surface-highest: #30363d; --v2-surface-variant: #30363d; --v2-surface-bright: #1c2128; --v2-on-surface: #e6edf3; --v2-on-surface-variant: #8b949e; --v2-on-background: #e6edf3; --v2-outline: #484f58; --v2-outline-variant: #30363d; --v2-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3); --v2-shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.4); --v2-shadow-nav: none; --v2-shadow-bottom-nav:0 -4px 16px rgba(0, 0, 0, 0.5); } } /* ---- Sidebar menu-item overrides for auto mode ---- */ @media (prefers-color-scheme: dark) { [data-theme="auto"] .menu-item { color: var(--nav-item-text, #c9d1d9) !important; } [data-theme="auto"] .menu-item i { color: var(--text-muted, #8b949e) !important; } [data-theme="auto"] .menu-item span { color: inherit !important; } [data-theme="auto"] .menu-item:hover { color: var(--text-primary, #e6edf3) !important; background: var(--nav-item-hover-bg, rgba(124, 58, 237, 0.1)) !important; } [data-theme="auto"] .menu-item:hover i { color: var(--text-primary, #e6edf3) !important; } [data-theme="auto"] .menu-item.active { color: var(--nav-item-active-text, #c4b5fd) !important; background: var(--nav-item-active-bg, rgba(124, 58, 237, 0.15)) !important; } [data-theme="auto"] .menu-item.active i { color: var(--nav-item-active-text, #c4b5fd) !important; } } /* ========================================================================== 3. DIRECT ELEMENT OVERRIDES These handle Bootstrap components, browser defaults, and elements that don't read design tokens. Uses a helper mixin pattern: define rules once for [data-theme="dark"] then repeat inside @media for auto mode. ========================================================================== */ /* ---- Page body ---- */ [data-theme="dark"] body:not(.hangout-app), [data-theme="auto"] body:not(.hangout-app) { background-color: var(--background, #0d1117); color: var(--text-primary, #e6edf3); } @media (prefers-color-scheme: light) { [data-theme="auto"] body:not(.hangout-app) { background-color: revert; color: revert; } } /* ---- Main content area ---- */ [data-theme="dark"] #main-content { background-color: var(--background); color: var(--text-primary); } /* ---- Sidebar ---- */ [data-theme="dark"] .sidebar-enhanced { background: var(--background, #0d1117); border-right-color: var(--border, #30363d); box-shadow: none; } [data-theme="dark"] .sidebar-enhanced .sidebar-header { background: var(--background, #0d1117); border-bottom-color: var(--border, #30363d); } [data-theme="dark"] .sidebar-enhanced .organization-name { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .sidebar-enhanced .sidebar-user { background: var(--background-tertiary, #1c2128); border-top-color: var(--border, #30363d); } [data-theme="dark"] .sidebar-enhanced .user-info .user-name { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .sidebar-enhanced .user-info .user-role { color: var(--text-muted, #8b949e); } [data-theme="dark"] .nav-group-header { color: var(--text-muted, #8b949e); border-bottom-color: var(--border-subtle, rgba(255, 255, 255, 0.1)); } [data-theme="dark"] .nav-item-content { color: var(--text-secondary, #c9d1d9); } [data-theme="dark"] .nav-item-content i { color: var(--text-muted, #8b949e); } [data-theme="dark"] .nav-item:hover { background: var(--nav-item-hover-bg, rgba(124, 58, 237, 0.1)); } [data-theme="dark"] .nav-item:hover .nav-item-content { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .nav-item.active { background: var(--nav-item-active-bg, rgba(124, 58, 237, 0.15)); } [data-theme="dark"] .nav-item.active .nav-item-content { color: var(--nav-item-active-text, #c4b5fd); } [data-theme="dark"] .nav-item.active .nav-item-content i { color: var(--nav-item-active-text, #c4b5fd); } /* ---- Cards ---- */ [data-theme="dark"] .card, [data-theme="dark"] .card-body { background-color: var(--background-secondary, #161b22); color: var(--text-primary); border-color: var(--border, #30363d); } [data-theme="dark"] .card-header { background-color: var(--background-tertiary, #1c2128); border-bottom-color: var(--border); color: var(--text-primary); } [data-theme="dark"] .card-footer { background-color: var(--background-tertiary, #1c2128); border-top-color: var(--border); color: var(--text-secondary); } /* ---- Tables ---- */ [data-theme="dark"] .table { color: var(--text-primary); --bs-table-bg: transparent; --bs-table-color: var(--text-primary); } [data-theme="dark"] .table > thead { background-color: var(--background-secondary, #161b22); } [data-theme="dark"] .table > thead > tr > th { background-color: var(--background-secondary, #161b22); color: var(--text-muted, #8b949e); border-bottom-color: var(--border); } [data-theme="dark"] .table > tbody > tr > td { background-color: transparent; color: var(--text-primary); border-bottom-color: var(--border); } [data-theme="dark"] .table > tbody > tr { background-color: var(--background, #0d1117); } [data-theme="dark"] .table-hover > tbody > tr:hover > td { background-color: var(--background-tertiary, #1c2128); --bs-table-hover-bg: var(--background-tertiary); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--background-secondary, #161b22); --bs-table-striped-bg: var(--background-secondary); } /* ---- Forms ---- */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--modal-input-bg, #21262d); color: var(--text-primary); border-color: var(--input-border-color, #30363d); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { background-color: var(--modal-input-bg, #21262d); color: var(--text-primary); border-color: var(--border-focus); box-shadow: var(--input-focus-ring); } [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-muted); } [data-theme="dark"] .form-label, [data-theme="dark"] label { color: var(--text-secondary); } [data-theme="dark"] .form-text { color: var(--text-muted); } [data-theme="dark"] .form-check-input { background-color: var(--background-tertiary); border-color: var(--border-dark, #484f58); } [data-theme="dark"] .form-check-input:checked { background-color: var(--brand-500, #7c3aed); border-color: var(--brand-500, #7c3aed); } [data-theme="dark"] .input-group-text { background-color: var(--background-secondary); color: var(--text-secondary); border-color: var(--input-border-color, #30363d); } /* ---- Buttons ---- */ [data-theme="dark"] .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-dark, #484f58); } [data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--background-tertiary); color: var(--text-primary); border-color: var(--border-dark); } [data-theme="dark"] .btn-light { background-color: var(--background-tertiary, #1c2128); color: var(--text-primary); border-color: var(--border); } [data-theme="dark"] .btn-light:hover { background-color: var(--background-secondary, #161b22); color: var(--text-primary); } [data-theme="dark"] .btn-outline-light { color: var(--text-secondary); border-color: var(--border); } [data-theme="dark"] .btn-secondary { background-color: var(--background-tertiary, #1c2128); border-color: var(--border, #30363d); color: var(--text-primary); } [data-theme="dark"] .btn-secondary:hover { background-color: var(--background-secondary, #161b22); border-color: var(--border-dark, #484f58); color: var(--text-primary); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ---- Alerts ---- */ [data-theme="dark"] .alert-success { background-color: var(--success-50); color: #4ade80; border-color: rgba(34, 197, 94, 0.25); } [data-theme="dark"] .alert-warning { background-color: var(--warning-50); color: #fbbf24; border-color: rgba(245, 158, 11, 0.25); } [data-theme="dark"] .alert-danger { background-color: var(--danger-50); color: #f87171; border-color: rgba(239, 68, 68, 0.25); } [data-theme="dark"] .alert-info { background-color: var(--info-50); color: #22d3ee; border-color: rgba(6, 182, 212, 0.25); } [data-theme="dark"] .alert-primary { background-color: var(--primary-soft); color: #c4b5fd; border-color: rgba(124, 58, 237, 0.25); } /* ---- Badges ---- */ [data-theme="dark"] .badge.bg-light { background-color: var(--background-tertiary) !important; color: var(--text-primary) !important; } [data-theme="dark"] .badge.bg-secondary { background-color: var(--gray-300) !important; color: var(--text-primary) !important; } [data-theme="dark"] .badge.bg-success { background-color: rgba(34, 197, 94, 0.15) !important; color: #4ade80 !important; } [data-theme="dark"] .badge.bg-warning { background-color: rgba(245, 158, 11, 0.15) !important; color: #fbbf24 !important; } [data-theme="dark"] .badge.bg-danger { background-color: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; } [data-theme="dark"] .badge.bg-info { background-color: rgba(59, 130, 246, 0.15) !important; color: #60a5fa !important; } [data-theme="dark"] .badge.bg-primary { background-color: rgba(124, 58, 237, 0.15) !important; color: #c4b5fd !important; } /* ---- Dropdowns (Bootstrap) ---- */ [data-theme="dark"] .dropdown-menu { background-color: var(--dropdown-bg, #161b22); border-color: var(--dropdown-border, #30363d); box-shadow: var(--dropdown-shadow); color: var(--text-primary); } [data-theme="dark"] .dropdown-item { color: var(--text-primary); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--dropdown-hover-bg, #1c2128); color: var(--text-primary); } [data-theme="dark"] .dropdown-divider { border-top-color: var(--border); } /* ---- Modals (Bootstrap) ---- */ [data-theme="dark"] .modal-content { background-color: var(--modal-bg, #161b22); color: var(--text-primary); border-color: var(--modal-border, #30363d); } [data-theme="dark"] .modal-header { border-bottom-color: var(--modal-border); } [data-theme="dark"] .modal-footer { background-color: var(--modal-footer-bg, #0d1117); border-top-color: var(--modal-border); } [data-theme="dark"] .modal-title { color: var(--text-primary); } /* ---- Tooltips ---- */ [data-theme="dark"] .tooltip-inner { background-color: #e6edf3; color: #0d1117; } [data-theme="dark"] .bs-tooltip-top .tooltip-arrow::before { border-top-color: #e6edf3; } [data-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #e6edf3; } /* ---- Popovers ---- */ [data-theme="dark"] .popover { background-color: var(--dropdown-bg); border-color: var(--border); } [data-theme="dark"] .popover-header { background-color: var(--background-secondary); border-bottom-color: var(--border); color: var(--text-primary); } [data-theme="dark"] .popover-body { color: var(--text-primary); } /* ---- Nav tabs / pills ---- */ [data-theme="dark"] .nav-tabs { border-bottom-color: var(--border); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-muted); } [data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--border) var(--border) transparent; color: var(--text-primary); } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--background-secondary, #161b22); border-color: var(--border) var(--border) var(--background-secondary); color: var(--text-primary); } [data-theme="dark"] .nav-pills .nav-link { color: var(--text-secondary); } [data-theme="dark"] .nav-pills .nav-link.active { background-color: var(--brand-500, #7c3aed); color: #ffffff; } /* ---- List groups ---- */ [data-theme="dark"] .list-group-item { background-color: var(--background-secondary, #161b22); border-color: var(--border); color: var(--text-primary); } [data-theme="dark"] .list-group-item:hover { background-color: var(--background-tertiary, #1c2128); } [data-theme="dark"] .list-group-item.active { background-color: var(--brand-500, #7c3aed); border-color: var(--brand-500, #7c3aed); } /* ---- Breadcrumbs ---- */ [data-theme="dark"] .breadcrumb { background-color: transparent; } [data-theme="dark"] .breadcrumb-item a { color: var(--text-link); } [data-theme="dark"] .breadcrumb-item.active { color: var(--text-muted); } [data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } /* ---- Pagination ---- */ [data-theme="dark"] .page-link { background-color: var(--background-secondary, #161b22); border-color: var(--border); color: var(--text-primary); } [data-theme="dark"] .page-link:hover { background-color: var(--background-tertiary, #1c2128); border-color: var(--border-dark); color: var(--text-primary); } [data-theme="dark"] .page-item.active .page-link { background-color: var(--brand-500, #7c3aed); border-color: var(--brand-500, #7c3aed); color: #ffffff; } [data-theme="dark"] .page-item.disabled .page-link { background-color: var(--background, #0d1117); border-color: var(--border); color: var(--text-muted); } /* ---- Accordions ---- */ [data-theme="dark"] .accordion-item { background-color: var(--background-secondary, #161b22); border-color: var(--border); } [data-theme="dark"] .accordion-button { background-color: var(--background-secondary, #161b22); color: var(--text-primary); } [data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(2); } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--primary-soft); color: var(--text-primary); } [data-theme="dark"] .accordion-body { background-color: var(--background-secondary, #161b22); color: var(--text-primary); } /* ---- Progress bars ---- */ [data-theme="dark"] .progress { background-color: var(--background-tertiary, #1c2128); } /* ---- Offcanvas ---- */ [data-theme="dark"] .offcanvas { background-color: var(--background-secondary, #161b22); color: var(--text-primary); border-color: var(--border); } /* ---- Text utilities ---- */ [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] .text-dark { color: var(--text-primary) !important; } [data-theme="dark"] .text-body { color: var(--text-primary) !important; } [data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; } [data-theme="dark"] .text-black-50 { color: var(--text-muted) !important; } /* ---- Background utilities ---- */ [data-theme="dark"] .bg-light { background-color: var(--background-secondary, #161b22) !important; } [data-theme="dark"] .bg-white { background-color: var(--background-secondary, #161b22) !important; } [data-theme="dark"] .bg-body { background-color: var(--background) !important; } [data-theme="dark"] .bg-body-secondary { background-color: var(--background-secondary) !important; } [data-theme="dark"] .bg-body-tertiary { background-color: var(--background-tertiary) !important; } /* ---- Border utilities ---- */ [data-theme="dark"] .border { border-color: var(--border) !important; } [data-theme="dark"] .border-bottom { border-bottom-color: var(--border) !important; } [data-theme="dark"] .border-top { border-top-color: var(--border) !important; } [data-theme="dark"] .border-start { border-left-color: var(--border) !important; } [data-theme="dark"] .border-end { border-right-color: var(--border) !important; } /* ---- Scrollbars (CRM-wide) ---- */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--background, #0d1117); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, #30363d); border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover, #484f58); } /* ---- hr / horizontal rules ---- */ [data-theme="dark"] hr { border-color: var(--border); opacity: 1; } /* ---- Code blocks ---- */ [data-theme="dark"] code { color: #e879f9; background-color: rgba(124, 58, 237, 0.1); } [data-theme="dark"] pre { background-color: var(--background-secondary); color: var(--text-primary); border-color: var(--border); } /* ---- Links (generic) ---- */ [data-theme="dark"] a:not(.btn):not(.nav-link):not(.nav-item):not(.dropdown-item):not(.user-action-btn) { color: var(--text-link); } [data-theme="dark"] a:not(.btn):not(.nav-link):not(.nav-item):not(.dropdown-item):not(.user-action-btn):hover { color: var(--text-link-hover); } /* ---- Flash messages ---- */ [data-theme="dark"] .flash-message { background-color: var(--background-secondary, #161b22); border-color: var(--border, #30363d); color: var(--text-primary); } [data-theme="dark"] .flash-message .flash-close { color: var(--text-muted); } [data-theme="dark"] .flash-error { background-color: var(--danger-50); border-color: rgba(239, 68, 68, 0.25); } [data-theme="dark"] .flash-success { background-color: var(--success-50); border-color: rgba(34, 197, 94, 0.25); } [data-theme="dark"] .flash-warning { background-color: var(--warning-50); border-color: rgba(245, 158, 11, 0.25); } [data-theme="dark"] .flash-info { background-color: var(--info-50); border-color: rgba(6, 182, 212, 0.25); } /* ---- Footer ---- */ [data-theme="dark"] .site-footer { background: var(--background-secondary, #161b22); border-top-color: var(--border, #30363d); color: var(--text-muted, #8b949e); } [data-theme="dark"] .site-footer h4 { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .site-footer a { color: var(--text-secondary, #c9d1d9); } [data-theme="dark"] .site-footer a:hover { color: var(--text-link, #c4b5fd); } [data-theme="dark"] .footer-bottom { border-top-color: var(--border, #30363d); color: var(--text-muted, #8b949e); } [data-theme="dark"] .cookie-preferences-btn { color: var(--text-muted, #8b949e); } /* ---- CRM Top Bar ---- */ [data-theme="dark"] .crm-top-bar { background-color: var(--background, #0d1117); border-bottom-color: var(--border, #30363d); } [data-theme="dark"] .crm-top-icon { color: var(--text-muted, #8b949e); } [data-theme="dark"] .crm-top-icon:hover { background: var(--background-tertiary, #1c2128); color: var(--text-primary, #e6edf3); } [data-theme="dark"] .crm-profile-menu { background: var(--background-secondary, #161b22); border-color: var(--border, #30363d); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .crm-profile-name { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .crm-profile-email { color: var(--text-muted, #8b949e); } [data-theme="dark"] .crm-profile-divider { background: var(--border, #30363d); } [data-theme="dark"] .crm-profile-item { color: var(--text-secondary, #c9d1d9); } [data-theme="dark"] .crm-profile-item:hover { background: var(--background-tertiary, #1c2128); } [data-theme="dark"] .crm-profile-item.logout { color: #f87171; } [data-theme="dark"] .crm-profile-item.logout:hover { background: rgba(239, 68, 68, 0.08); } /* ---- Filter pills / bars ---- */ [data-theme="dark"] .filter-pill, [data-theme="dark"] .filter-btn { background-color: var(--background-tertiary, #1c2128); color: var(--text-secondary, #c9d1d9); border-color: var(--border, #30363d); } [data-theme="dark"] .filter-pill:hover, [data-theme="dark"] .filter-btn:hover { background-color: var(--background-secondary, #161b22); color: var(--text-primary); } [data-theme="dark"] .filter-pill.active, [data-theme="dark"] .filter-btn.active { background-color: var(--brand-500, #7c3aed); color: #ffffff; border-color: var(--brand-500, #7c3aed); } [data-theme="dark"] .filter-bar { background-color: var(--background-secondary, #161b22); border-color: var(--border, #30363d); } /* ---- Search inputs ---- */ [data-theme="dark"] .search-input, [data-theme="dark"] [type="search"] { background-color: var(--modal-input-bg, #21262d); color: var(--text-primary); border-color: var(--border, #30363d); } /* ---- Member detail / profile pages ---- */ [data-theme="dark"] .detail-card, [data-theme="dark"] .profile-card, [data-theme="dark"] .member-detail-card { background-color: var(--background-secondary, #161b22); border-color: var(--border, #30363d); color: var(--text-primary); } [data-theme="dark"] .detail-label, [data-theme="dark"] .profile-label { color: var(--text-muted, #8b949e); } [data-theme="dark"] .detail-value, [data-theme="dark"] .profile-value { color: var(--text-primary, #e6edf3); } /* ---- Stat cards (dashboard) ---- */ [data-theme="dark"] .stat-card { background: var(--background-secondary, #161b22); border-color: var(--border, #30363d); } [data-theme="dark"] .stat-card .stat-label { color: var(--text-muted, #8b949e); } [data-theme="dark"] .stat-card .stat-value { color: var(--text-primary, #e6edf3); } /* Tinted stat icon backgrounds adapt well in dark mode as-is */ [data-theme="dark"] .stat-purple .stat-icon { background: rgba(139, 92, 246, 0.15); } [data-theme="dark"] .stat-blue .stat-icon { background: rgba(59, 130, 246, 0.15); } [data-theme="dark"] .stat-green .stat-icon { background: rgba(16, 185, 129, 0.15); } [data-theme="dark"] .stat-amber .stat-icon { background: rgba(245, 158, 11, 0.15); } [data-theme="dark"] .stat-red .stat-icon { background: rgba(239, 68, 68, 0.15); } [data-theme="dark"] .stat-cyan .stat-icon { background: rgba(6, 182, 212, 0.15); } /* ---- Chart / Quick Actions / Info cards ---- */ [data-theme="dark"] .chart-card, [data-theme="dark"] .quick-actions-card, [data-theme="dark"] .info-card { background: var(--background-secondary, #161b22); border-color: var(--border, #30363d); } [data-theme="dark"] .chart-header, [data-theme="dark"] .quick-actions-header, [data-theme="dark"] .info-card-header { border-bottom-color: var(--border, #30363d); } [data-theme="dark"] .chart-title, [data-theme="dark"] .quick-actions-title, [data-theme="dark"] .info-card-title, [data-theme="dark"] .section-title { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .chart-subtitle { color: var(--text-muted, #8b949e); } /* ---- Quick action items ---- */ [data-theme="dark"] .quick-action-item.secondary { background: var(--background-tertiary, #1c2128); color: var(--text-primary, #e6edf3); border-color: var(--border, #30363d); } /* ---- Action cards (coloured) ---- */ [data-theme="dark"] .action-red { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.08) 100%); border-color: rgba(239, 68, 68, 0.2); } [data-theme="dark"] .action-red .action-title { color: #fca5a5; } [data-theme="dark"] .action-red .action-desc { color: #f87171; } [data-theme="dark"] .action-blue { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.08) 100%); border-color: rgba(59, 130, 246, 0.2); } [data-theme="dark"] .action-blue .action-title { color: #93c5fd; } [data-theme="dark"] .action-blue .action-desc { color: #60a5fa; } [data-theme="dark"] .action-amber { background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.08) 100%); border-color: rgba(245, 158, 11, 0.2); } [data-theme="dark"] .action-amber .action-title { color: #fcd34d; } [data-theme="dark"] .action-amber .action-desc { color: #fbbf24; } [data-theme="dark"] .action-green { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.08) 100%); border-color: rgba(16, 185, 129, 0.2); } [data-theme="dark"] .action-green .action-title { color: #6ee7b7; } [data-theme="dark"] .action-green .action-desc { color: #34d399; } /* ---- Sunday Readiness ---- */ [data-theme="dark"] .sunday-readiness-card, [data-theme="dark"] #sunday-readiness { background: var(--background-secondary, #161b22); border-color: var(--border, #30363d); } [data-theme="dark"] .readiness-header { border-bottom-color: var(--border, #30363d); } [data-theme="dark"] .readiness-title { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .readiness-icon { background: rgba(245, 158, 11, 0.15); } [data-theme="dark"] .readiness-item-label { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .readiness-item-hint { color: var(--text-muted, #8b949e); } [data-theme="dark"] .readiness-item:hover { background: var(--background-tertiary, #1c2128); } [data-theme="dark"] .readiness-check-icon { border-color: var(--border, #30363d); } [data-theme="dark"] .readiness-progress-bar { background: var(--background-tertiary, #1c2128); } [data-theme="dark"] .readiness-footer { background: rgba(16, 185, 129, 0.08); border-top-color: rgba(16, 185, 129, 0.15); } [data-theme="dark"] .readiness-complete-msg { color: #6ee7b7; } /* ---- Org switcher ---- */ [data-theme="dark"] .org-switcher { background: var(--background-secondary, #161b22); border-color: var(--border, #30363d); } [data-theme="dark"] .org-switcher-label { color: var(--text-muted, #8b949e); } [data-theme="dark"] .org-switcher-select { background: var(--background-tertiary, #1c2128); color: var(--text-primary, #e6edf3); border-color: var(--border, #30363d); } /* ---- Org type subtitle ---- */ [data-theme="dark"] .org-type-subtitle { color: var(--text-muted, #8b949e); } /* ---- Activity items ---- */ [data-theme="dark"] .activity-text { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .activity-time { color: var(--text-muted, #8b949e); } [data-theme="dark"] .activity-item:hover { background: var(--background-tertiary, #1c2128); } /* ---- Service items ---- */ [data-theme="dark"] .service-name { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .service-time { color: var(--text-muted, #8b949e); } /* ---- Empty states ---- */ [data-theme="dark"] .empty-state-mini { color: var(--text-muted, #8b949e); } [data-theme="dark"] .empty-state, [data-theme="dark"] .no-data { color: var(--text-muted, #8b949e); } /* ---- Celebration cards ---- */ [data-theme="dark"] .celebration-card { background: var(--background-secondary, #161b22); border-color: var(--border, #30363d); } /* Card title + member name are hardcoded #111827 (near-black) in components.css and were never flipped — black-on-dark, unreadable. Override for both the explicit-dark theme and auto + OS-dark. */ [data-theme="dark"] .celebration-card-title, [data-theme="dark"] .celebration-member-name, [data-theme="dark"] .celebration-member-detail { color: var(--text-primary, #e6edf3); } @media (prefers-color-scheme: dark) { [data-theme="auto"] .celebration-card { background: var(--background-secondary, #161b22); border-color: var(--border, #30363d); } [data-theme="auto"] .celebration-card-title, [data-theme="auto"] .celebration-member-name, [data-theme="auto"] .celebration-member-detail { color: var(--text-primary, #e6edf3); } } /* ---- Org Banner ---- */ [data-theme="dark"] .org-banner { border-color: var(--border, #30363d); } [data-theme="dark"] .super-admin-banner-content { background: var(--background-secondary, #161b22); border-color: var(--border, #30363d); color: var(--text-primary, #e6edf3); } /* ========================================================================== 4. COMMAND PALETTE — dark mode ========================================================================== */ [data-theme="dark"] .command-palette-overlay { background: rgba(0, 0, 0, 0.6); } [data-theme="dark"] .command-palette { background: var(--background-secondary, #161b22); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border, #30363d); } [data-theme="dark"] .command-palette-header { border-bottom-color: var(--border, #30363d); } [data-theme="dark"] .command-palette-header .search-icon { color: var(--text-muted, #8b949e); } [data-theme="dark"] .command-palette-input { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .command-palette-input::placeholder { color: var(--text-muted, #8b949e); } [data-theme="dark"] .command-palette-shortcut-hint { background: var(--background-tertiary, #1c2128); border-color: var(--border, #30363d); color: var(--text-muted, #8b949e); } [data-theme="dark"] .command-palette-category { color: var(--text-muted, #8b949e); } [data-theme="dark"] .command-palette-item:hover, [data-theme="dark"] .command-palette-item.selected { background-color: var(--background-tertiary, #1c2128); } [data-theme="dark"] .command-palette-item-icon { background: var(--background-tertiary, #1c2128); color: var(--text-muted, #8b949e); } [data-theme="dark"] .command-palette-item.selected .command-palette-item-icon, [data-theme="dark"] .command-palette-item:hover .command-palette-item-icon { background: rgba(124, 58, 237, 0.15); color: #c4b5fd; } [data-theme="dark"] .command-palette-item-label { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .command-palette-item-label mark { background: rgba(251, 191, 36, 0.2); color: #fbbf24; } [data-theme="dark"] .command-palette-item-category-badge { color: var(--text-muted, #8b949e); } [data-theme="dark"] .command-palette-item-recent { color: var(--text-muted, #8b949e); } [data-theme="dark"] .command-palette-empty-icon { color: var(--gray-300, #30363d); } [data-theme="dark"] .command-palette-empty-text { color: var(--text-muted, #8b949e); } [data-theme="dark"] .command-palette-empty-hint { color: var(--text-muted, #8b949e); } [data-theme="dark"] .command-palette-footer { border-top-color: var(--border, #30363d); background: var(--background-tertiary, #1c2128); } [data-theme="dark"] .command-palette-footer-hint { color: var(--text-muted, #8b949e); } [data-theme="dark"] .command-palette-footer-hint kbd { background: var(--background-secondary, #161b22); border-color: var(--border, #30363d); color: var(--text-muted, #8b949e); } [data-theme="dark"] .command-palette-body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, #30363d); } /* ========================================================================== 5. WHAT'S NEW MODAL — dark mode ========================================================================== */ [data-theme="dark"] .whats-new-modal { background: var(--background-secondary, #161b22); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .whats-new-header { border-bottom-color: var(--border, #30363d); } [data-theme="dark"] .whats-new-header-icon { background: rgba(124, 58, 237, 0.15); color: #c4b5fd; } [data-theme="dark"] .whats-new-title { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .whats-new-subtitle { color: var(--text-muted, #8b949e); } [data-theme="dark"] .whats-new-close { color: var(--text-muted, #8b949e); } [data-theme="dark"] .whats-new-close:hover { color: var(--text-primary, #e6edf3); background: var(--background-tertiary, #1c2128); } [data-theme="dark"] .whats-new-entry { border-bottom-color: var(--border, #30363d); } [data-theme="dark"] .whats-new-version { color: var(--text-muted, #8b949e); } [data-theme="dark"] .whats-new-date { color: var(--text-muted, #8b949e); } [data-theme="dark"] .whats-new-entry-title { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .whats-new-entry-desc { color: var(--text-secondary, #c9d1d9); } [data-theme="dark"] .whats-new-item { color: var(--text-secondary, #c9d1d9); } [data-theme="dark"] .whats-new-footer { border-top-color: var(--border, #30363d); } /* ========================================================================== 6. TOAST NOTIFICATIONS — dark mode ========================================================================== */ [data-theme="dark"] .toast { background: var(--background-secondary, #161b22) !important; border-color: var(--border, #30363d) !important; color: var(--text-primary, #e6edf3); } [data-theme="dark"] .toast .toast-title { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .toast .toast-message { color: var(--text-secondary, #c9d1d9); } [data-theme="dark"] .toast .toast-close { color: var(--text-muted, #8b949e); } /* ========================================================================== 7. SKELETON LOADERS — dark mode ========================================================================== */ [data-theme="dark"] .skeleton, [data-theme="dark"] .skeleton-text, [data-theme="dark"] .skeleton-circle, [data-theme="dark"] .skeleton-card { background: var(--skeleton-bg, #21262d); } [data-theme="dark"] .skeleton::after, [data-theme="dark"] .skeleton-text::after { background: var(--skeleton-shimmer); } /* ========================================================================== 8. LOADING SCREEN — dark mode ========================================================================== */ [data-theme="dark"] .loading-overlay, [data-theme="dark"] .page-loading { background-color: var(--background, #0d1117); color: var(--text-primary, #e6edf3); } [data-theme="dark"] .loading-spinner { border-color: var(--border, #30363d); border-top-color: var(--brand-500, #7c3aed); } /* ========================================================================== 9. RESPONSIVE TABLE-TO-CARD SYSTEM — dark mode ========================================================================== */ [data-theme="dark"] .responsive-card { background: var(--background-secondary, #161b22); border-color: var(--border, #30363d); } [data-theme="dark"] .responsive-card-label { color: var(--text-muted, #8b949e); } [data-theme="dark"] .responsive-card-value { color: var(--text-primary, #e6edf3); } /* ========================================================================== 10. COOKIE CONSENT — dark mode ========================================================================== */ [data-theme="dark"] .cookie-banner, [data-theme="dark"] .cookie-consent-banner { background: var(--background-secondary, #161b22); border-color: var(--border, #30363d); color: var(--text-primary, #e6edf3); } /* ========================================================================== 11. SETTINGS & CHURCH SETTINGS PAGES — dark mode ========================================================================== */ [data-theme="dark"] .settings-card, [data-theme="dark"] .settings-section { background: var(--background-secondary, #161b22); border-color: var(--border, #30363d); } [data-theme="dark"] .settings-label { color: var(--text-muted, #8b949e); } [data-theme="dark"] .settings-value { color: var(--text-primary, #e6edf3); } /* ========================================================================== 12. NOTIFICATIONS PAGE — dark mode ========================================================================== */ [data-theme="dark"] .notification-card, [data-theme="dark"] .notification-item { background: var(--background-secondary, #161b22); border-color: var(--border, #30363d); } [data-theme="dark"] .notification-card.unread, [data-theme="dark"] .notification-item.unread { background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.15); } /* ========================================================================== 13. STANDARDIZED BANNERS — dark mode ========================================================================== */ [data-theme="dark"] .standardized-banner, [data-theme="dark"] .page-banner { background: var(--background-secondary, #161b22); border-color: var(--border, #30363d); } [data-theme="dark"] .banner-title { color: var(--text-primary, #e6edf3); } [data-theme="dark"] .banner-subtitle, [data-theme="dark"] .banner-description { color: var(--text-secondary, #c9d1d9); } /* ========================================================================== 14. USER ACTION BUTTONS (sidebar) — dark mode ========================================================================== */ [data-theme="dark"] .user-action-btn { color: var(--text-secondary, #c9d1d9); } [data-theme="dark"] .user-action-btn:hover { background: var(--background-tertiary, #1c2128); color: var(--text-primary, #e6edf3); } /* ========================================================================== 15. IMAGES & MEDIA — dark mode tinting ========================================================================== */ /* Slightly dim images in dark mode for eye comfort */ [data-theme="dark"] img:not([src*=".svg"]):not(.organization-logo):not(.user-avatar-img) { opacity: 0.92; } /* ========================================================================== 16. AUTO MODE — element overrides (mirrors all above under media query) ========================================================================== */ @media (prefers-color-scheme: dark) { /* Body */ [data-theme="auto"] body:not(.hangout-app) { background-color: var(--background, #0d1117); color: var(--text-primary, #e6edf3); } [data-theme="auto"] #main-content { background-color: var(--background); color: var(--text-primary); } /* Sidebar */ [data-theme="auto"] .sidebar-enhanced { background: var(--background, #0d1117); border-right-color: var(--border, #30363d); box-shadow: none; } [data-theme="auto"] .sidebar-enhanced .sidebar-header { background: var(--background, #0d1117); border-bottom-color: var(--border, #30363d); } [data-theme="auto"] .sidebar-enhanced .organization-name { color: var(--text-primary, #e6edf3); } [data-theme="auto"] .sidebar-enhanced .sidebar-user { background: var(--background-tertiary, #1c2128); border-top-color: var(--border, #30363d); } [data-theme="auto"] .nav-group-header { color: var(--text-muted, #8b949e); border-bottom-color: var(--border-subtle, rgba(255, 255, 255, 0.1)); } [data-theme="auto"] .nav-item-content { color: var(--text-secondary, #c9d1d9); } [data-theme="auto"] .nav-item-content i { color: var(--text-muted, #8b949e); } [data-theme="auto"] .nav-item:hover { background: var(--nav-item-hover-bg, rgba(124, 58, 237, 0.1)); } [data-theme="auto"] .nav-item.active { background: var(--nav-item-active-bg, rgba(124, 58, 237, 0.15)); } [data-theme="auto"] .nav-item.active .nav-item-content { color: var(--nav-item-active-text, #c4b5fd); } /* Cards */ [data-theme="auto"] .card, [data-theme="auto"] .card-body { background-color: var(--background-secondary, #161b22); color: var(--text-primary); border-color: var(--border); } [data-theme="auto"] .card-header { background-color: var(--background-tertiary, #1c2128); border-bottom-color: var(--border); color: var(--text-primary); } [data-theme="auto"] .card-footer { background-color: var(--background-tertiary, #1c2128); border-top-color: var(--border); color: var(--text-secondary); } /* Tables */ [data-theme="auto"] .table { color: var(--text-primary); --bs-table-bg: transparent; --bs-table-color: var(--text-primary); } [data-theme="auto"] .table > thead > tr > th { background-color: var(--background-secondary, #161b22); color: var(--text-muted, #8b949e); border-bottom-color: var(--border); } [data-theme="auto"] .table > tbody > tr { background-color: var(--background, #0d1117); } [data-theme="auto"] .table > tbody > tr > td { background-color: transparent; color: var(--text-primary); border-bottom-color: var(--border); } [data-theme="auto"] .table-hover > tbody > tr:hover > td { background-color: var(--background-tertiary); --bs-table-hover-bg: var(--background-tertiary); } [data-theme="auto"] .table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--background-secondary, #161b22); --bs-table-striped-bg: var(--background-secondary); } /* Forms */ [data-theme="auto"] .form-control, [data-theme="auto"] .form-select, [data-theme="auto"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), [data-theme="auto"] textarea, [data-theme="auto"] select { background-color: var(--modal-input-bg, #21262d); color: var(--text-primary); border-color: var(--input-border-color, #30363d); } [data-theme="auto"] .form-control:focus, [data-theme="auto"] .form-select:focus, [data-theme="auto"] input:focus, [data-theme="auto"] textarea:focus, [data-theme="auto"] select:focus { background-color: var(--modal-input-bg, #21262d); color: var(--text-primary); border-color: var(--border-focus); box-shadow: var(--input-focus-ring); } [data-theme="auto"] .form-control::placeholder, [data-theme="auto"] input::placeholder, [data-theme="auto"] textarea::placeholder { color: var(--text-muted); } [data-theme="auto"] .form-label, [data-theme="auto"] label { color: var(--text-secondary); } [data-theme="auto"] .form-check-input { background-color: var(--background-tertiary); border-color: var(--border-dark, #484f58); } [data-theme="auto"] .input-group-text { background-color: var(--background-secondary); color: var(--text-secondary); border-color: var(--input-border-color, #30363d); } /* Buttons */ [data-theme="auto"] .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-dark); } [data-theme="auto"] .btn-light { background-color: var(--background-tertiary); color: var(--text-primary); border-color: var(--border); } [data-theme="auto"] .btn-secondary { background-color: var(--background-tertiary, #1c2128); border-color: var(--border, #30363d); color: var(--text-primary); } [data-theme="auto"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* Alerts */ [data-theme="auto"] .alert-success { background-color: var(--success-50); color: #4ade80; border-color: rgba(34, 197, 94, 0.25); } [data-theme="auto"] .alert-warning { background-color: var(--warning-50); color: #fbbf24; border-color: rgba(245, 158, 11, 0.25); } [data-theme="auto"] .alert-danger { background-color: var(--danger-50); color: #f87171; border-color: rgba(239, 68, 68, 0.25); } [data-theme="auto"] .alert-info { background-color: var(--info-50); color: #22d3ee; border-color: rgba(6, 182, 212, 0.25); } [data-theme="auto"] .alert-primary { background-color: var(--primary-soft); color: #c4b5fd; border-color: rgba(124, 58, 237, 0.25); } /* Badges */ [data-theme="auto"] .badge.bg-light { background-color: var(--background-tertiary) !important; color: var(--text-primary) !important; } [data-theme="auto"] .badge.bg-secondary { background-color: var(--gray-300) !important; color: var(--text-primary) !important; } [data-theme="auto"] .badge.bg-success { background-color: rgba(34, 197, 94, 0.15) !important; color: #4ade80 !important; } [data-theme="auto"] .badge.bg-warning { background-color: rgba(245, 158, 11, 0.15) !important; color: #fbbf24 !important; } [data-theme="auto"] .badge.bg-danger { background-color: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; } [data-theme="auto"] .badge.bg-info { background-color: rgba(59, 130, 246, 0.15) !important; color: #60a5fa !important; } [data-theme="auto"] .badge.bg-primary { background-color: rgba(124, 58, 237, 0.15) !important; color: #c4b5fd !important; } /* Dropdowns */ [data-theme="auto"] .dropdown-menu { background-color: var(--dropdown-bg); border-color: var(--dropdown-border); box-shadow: var(--dropdown-shadow); color: var(--text-primary); } [data-theme="auto"] .dropdown-item { color: var(--text-primary); } [data-theme="auto"] .dropdown-item:hover { background-color: var(--dropdown-hover-bg); } [data-theme="auto"] .dropdown-divider { border-top-color: var(--border); } /* Modals */ [data-theme="auto"] .modal-content { background-color: var(--modal-bg); color: var(--text-primary); border-color: var(--modal-border); } [data-theme="auto"] .modal-header { border-bottom-color: var(--modal-border); } [data-theme="auto"] .modal-footer { background-color: var(--modal-footer-bg); border-top-color: var(--modal-border); } [data-theme="auto"] .modal-title { color: var(--text-primary); } /* Nav tabs */ [data-theme="auto"] .nav-tabs { border-bottom-color: var(--border); } [data-theme="auto"] .nav-tabs .nav-link { color: var(--text-muted); } [data-theme="auto"] .nav-tabs .nav-link.active { background-color: var(--background-secondary); border-color: var(--border) var(--border) var(--background-secondary); color: var(--text-primary); } /* List groups */ [data-theme="auto"] .list-group-item { background-color: var(--background-secondary); border-color: var(--border); color: var(--text-primary); } /* Pagination */ [data-theme="auto"] .page-link { background-color: var(--background-secondary); border-color: var(--border); color: var(--text-primary); } [data-theme="auto"] .page-item.active .page-link { background-color: var(--brand-500, #7c3aed); border-color: var(--brand-500, #7c3aed); color: #ffffff; } /* Accordions */ [data-theme="auto"] .accordion-item { background-color: var(--background-secondary, #161b22); border-color: var(--border); } [data-theme="auto"] .accordion-button { background-color: var(--background-secondary, #161b22); color: var(--text-primary); } [data-theme="auto"] .accordion-button::after { filter: invert(1) brightness(2); } /* Progress */ [data-theme="auto"] .progress { background-color: var(--background-tertiary, #1c2128); } /* Utility overrides */ [data-theme="auto"] .text-muted { color: var(--text-muted) !important; } [data-theme="auto"] .text-dark { color: var(--text-primary) !important; } [data-theme="auto"] .text-body { color: var(--text-primary) !important; } [data-theme="auto"] .text-secondary { color: var(--text-secondary) !important; } [data-theme="auto"] .bg-light { background-color: var(--background-secondary) !important; } [data-theme="auto"] .bg-white { background-color: var(--background-secondary) !important; } [data-theme="auto"] .bg-body { background-color: var(--background) !important; } /* Borders */ [data-theme="auto"] .border { border-color: var(--border) !important; } [data-theme="auto"] .border-bottom { border-bottom-color: var(--border) !important; } [data-theme="auto"] .border-top { border-top-color: var(--border) !important; } /* Scrollbars */ [data-theme="auto"] ::-webkit-scrollbar-track { background: var(--background, #0d1117); } [data-theme="auto"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, #30363d); border-radius: 4px; } [data-theme="auto"] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover, #484f58); } /* Horizontal rules */ [data-theme="auto"] hr { border-color: var(--border); opacity: 1; } /* Code */ [data-theme="auto"] code { color: #e879f9; background-color: rgba(124, 58, 237, 0.1); } [data-theme="auto"] pre { background-color: var(--background-secondary); color: var(--text-primary); } /* Links */ [data-theme="auto"] a:not(.btn):not(.nav-link):not(.nav-item):not(.dropdown-item):not(.user-action-btn) { color: var(--text-link); } /* Flash messages */ [data-theme="auto"] .flash-message { background-color: var(--background-secondary, #161b22); border-color: var(--border); color: var(--text-primary); } [data-theme="auto"] .flash-error { background-color: var(--danger-50); border-color: rgba(239, 68, 68, 0.25); } [data-theme="auto"] .flash-success { background-color: var(--success-50); border-color: rgba(34, 197, 94, 0.25); } /* Footer */ [data-theme="auto"] .site-footer { background: var(--background-secondary, #161b22); border-top-color: var(--border); color: var(--text-muted); } [data-theme="auto"] .site-footer h4 { color: var(--text-primary); } /* CRM Top Bar */ [data-theme="auto"] .crm-top-icon { color: var(--text-muted, #8b949e); } [data-theme="auto"] .crm-top-icon:hover { background: var(--background-tertiary, #1c2128); color: var(--text-primary); } [data-theme="auto"] .crm-profile-menu { background: var(--background-secondary, #161b22); border-color: var(--border); } [data-theme="auto"] .crm-profile-name { color: var(--text-primary); } [data-theme="auto"] .crm-profile-email { color: var(--text-muted); } [data-theme="auto"] .crm-profile-divider { background: var(--border); } [data-theme="auto"] .crm-profile-item { color: var(--text-secondary); } [data-theme="auto"] .crm-profile-item:hover { background: var(--background-tertiary); } [data-theme="auto"] .crm-profile-item.logout { color: #f87171; } /* Filter pills */ [data-theme="auto"] .filter-pill, [data-theme="auto"] .filter-btn { background-color: var(--background-tertiary, #1c2128); color: var(--text-secondary); border-color: var(--border); } [data-theme="auto"] .filter-pill.active, [data-theme="auto"] .filter-btn.active { background-color: var(--brand-500, #7c3aed); color: #ffffff; border-color: var(--brand-500, #7c3aed); } /* Stat / Chart / Action cards */ [data-theme="auto"] .stat-card { background: var(--background-secondary, #161b22); border-color: var(--border); } [data-theme="auto"] .chart-card, [data-theme="auto"] .quick-actions-card, [data-theme="auto"] .info-card { background: var(--background-secondary, #161b22); border-color: var(--border); } [data-theme="auto"] .chart-header, [data-theme="auto"] .quick-actions-header, [data-theme="auto"] .info-card-header { border-bottom-color: var(--border); } [data-theme="auto"] .quick-action-item.secondary { background: var(--background-tertiary, #1c2128); color: var(--text-primary); border-color: var(--border); } /* Action cards coloured */ [data-theme="auto"] .action-red { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.08)); border-color: rgba(239, 68, 68, 0.2); } [data-theme="auto"] .action-red .action-title { color: #fca5a5; } [data-theme="auto"] .action-blue { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.08)); border-color: rgba(59, 130, 246, 0.2); } [data-theme="auto"] .action-blue .action-title { color: #93c5fd; } [data-theme="auto"] .action-amber { background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.08)); border-color: rgba(245, 158, 11, 0.2); } [data-theme="auto"] .action-amber .action-title { color: #fcd34d; } [data-theme="auto"] .action-green { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.08)); border-color: rgba(16, 185, 129, 0.2); } [data-theme="auto"] .action-green .action-title { color: #6ee7b7; } /* Sunday Readiness */ [data-theme="auto"] .sunday-readiness-card { background: var(--background-secondary, #161b22); border-color: var(--border); } [data-theme="auto"] .readiness-header { border-bottom-color: var(--border); } [data-theme="auto"] .readiness-item:hover { background: var(--background-tertiary, #1c2128); } [data-theme="auto"] .readiness-progress-bar { background: var(--background-tertiary, #1c2128); } [data-theme="auto"] .readiness-footer { background: rgba(16, 185, 129, 0.08); border-top-color: rgba(16, 185, 129, 0.15); } [data-theme="auto"] .readiness-complete-msg { color: #6ee7b7; } /* Org switcher */ [data-theme="auto"] .org-switcher { background: var(--background-secondary, #161b22); border-color: var(--border); } /* Command Palette */ [data-theme="auto"] .command-palette { background: var(--background-secondary, #161b22); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border); } [data-theme="auto"] .command-palette-header { border-bottom-color: var(--border); } [data-theme="auto"] .command-palette-input { color: var(--text-primary); } [data-theme="auto"] .command-palette-input::placeholder { color: var(--text-muted); } [data-theme="auto"] .command-palette-shortcut-hint { background: var(--background-tertiary); border-color: var(--border); color: var(--text-muted); } [data-theme="auto"] .command-palette-category { color: var(--text-muted); } [data-theme="auto"] .command-palette-item:hover, [data-theme="auto"] .command-palette-item.selected { background-color: var(--background-tertiary); } [data-theme="auto"] .command-palette-item-icon { background: var(--background-tertiary); color: var(--text-muted); } [data-theme="auto"] .command-palette-item.selected .command-palette-item-icon, [data-theme="auto"] .command-palette-item:hover .command-palette-item-icon { background: rgba(124, 58, 237, 0.15); color: #c4b5fd; } [data-theme="auto"] .command-palette-item-label { color: var(--text-primary); } [data-theme="auto"] .command-palette-item-label mark { background: rgba(251, 191, 36, 0.2); color: #fbbf24; } [data-theme="auto"] .command-palette-footer { border-top-color: var(--border); background: var(--background-tertiary); } [data-theme="auto"] .command-palette-footer-hint kbd { background: var(--background-secondary); border-color: var(--border); color: var(--text-muted); } /* What's New */ [data-theme="auto"] .whats-new-modal { background: var(--background-secondary, #161b22); } [data-theme="auto"] .whats-new-header { border-bottom-color: var(--border); } [data-theme="auto"] .whats-new-header-icon { background: rgba(124, 58, 237, 0.15); color: #c4b5fd; } [data-theme="auto"] .whats-new-title { color: var(--text-primary); } [data-theme="auto"] .whats-new-subtitle { color: var(--text-muted); } [data-theme="auto"] .whats-new-close { color: var(--text-muted); } [data-theme="auto"] .whats-new-close:hover { color: var(--text-primary); background: var(--background-tertiary); } [data-theme="auto"] .whats-new-entry { border-bottom-color: var(--border); } [data-theme="auto"] .whats-new-entry-title { color: var(--text-primary); } [data-theme="auto"] .whats-new-entry-desc { color: var(--text-secondary); } [data-theme="auto"] .whats-new-item { color: var(--text-secondary); } [data-theme="auto"] .whats-new-footer { border-top-color: var(--border); } /* Toast */ [data-theme="auto"] .toast { background: var(--background-secondary) !important; border-color: var(--border) !important; } /* Skeleton loaders */ [data-theme="auto"] .skeleton, [data-theme="auto"] .skeleton-text { background: var(--skeleton-bg, #21262d); } /* Loading screen */ [data-theme="auto"] .loading-overlay, [data-theme="auto"] .page-loading { background-color: var(--background, #0d1117); } /* Responsive table cards */ [data-theme="auto"] .responsive-card { background: var(--background-secondary, #161b22); border-color: var(--border); } /* Notifications */ [data-theme="auto"] .notification-card, [data-theme="auto"] .notification-item { background: var(--background-secondary, #161b22); border-color: var(--border); } /* Cookie banner */ [data-theme="auto"] .cookie-banner, [data-theme="auto"] .cookie-consent-banner { background: var(--background-secondary, #161b22); border-color: var(--border); } /* Images */ [data-theme="auto"] img:not([src*=".svg"]):not(.organization-logo):not(.user-avatar-img) { opacity: 0.92; } }