/** * Dark Mode Theme - Company Map UK * Activated when data-theme="dark" on element */ :root[data-theme="dark"] { /* ============================================ Color Overrides for Dark Mode ============================================ */ /* Colors - Primary */ --color-primary: #00d4ff; --color-primary-hover: #00b8e6; --color-primary-light: #1a4a5a; /* Colors - Secondary */ --color-secondary: #8b5cf6; --color-secondary-hover: #a78bfa; /* Colors - Status */ --color-success: #10b981; --color-error: #ef4444; --color-warning: #f59e0b; --color-info: #06b6d4; /* Grays */ --gray-50: #1f2937; --gray-100: #1a1a1a; --gray-200: #2a2a2a; --gray-300: #3a3a3a; --gray-400: #6b7280; --gray-500: #9ca3af; --gray-600: #d1d5db; --gray-700: #e5e7eb; --gray-800: #f3f4f6; --gray-900: #f9fafb; /* Background */ --bg-primary: #0a0a0a; --bg-secondary: #111111; --bg-panel: #1a1a1a; --bg-hover: #2a2a2a; /* Borders */ --border-color: rgba(255, 255, 255, 0.1); --border-color-hover: rgba(255, 255, 255, 0.2); --border-accent: rgba(0, 212, 255, 0.3); /* Text */ --text-primary: #ffffff; --text-secondary: #d1d5db; --text-muted: #9ca3af; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8); --shadow-floating: 0 12px 40px rgba(0, 0, 0, 0.4); } /* ============================================ Component Overrides ============================================ */ /* Header */ :root[data-theme="dark"] .app-header { background: var(--bg-primary); border-bottom-color: var(--border-color); } /* Mobile Header Row 1 Background (different from Row 2) */ @media (max-width: 768px) { :root[data-theme="dark"] .header-brand-link { background: var(--bg-panel); border-bottom-color: var(--border-color); } } /* Panels */ :root[data-theme="dark"] .panel { background: var(--bg-panel); border-color: var(--border-color); } /* Buttons */ :root[data-theme="dark"] .btn-primary { background: var(--color-primary); color: var(--bg-primary); } :root[data-theme="dark"] .btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); box-shadow: 0 0 20px rgba(0, 212, 255, 0.4); } :root[data-theme="dark"] .export-btn:hover:not(:disabled) { box-shadow: 0 0 25px rgba(0, 212, 255, 0.5); } :root[data-theme="dark"] .btn-secondary { background: var(--gray-100); color: var(--text-primary); } :root[data-theme="dark"] .btn-secondary:hover { background: var(--gray-200); } :root[data-theme="dark"] .text-btn { color: var(--color-primary); } :root[data-theme="dark"] .text-btn:hover { color: var(--color-primary-hover); } :root[data-theme="dark"] .control-btn { background: var(--bg-panel); border-color: var(--border-color); color: var(--text-primary); } :root[data-theme="dark"] .control-btn:hover { background: var(--bg-hover); border-color: var(--border-color-hover); } /* Forms */ :root[data-theme="dark"] .search-input, :root[data-theme="dark"] .form-input, :root[data-theme="dark"] .form-textarea { background: var(--bg-panel); border-color: var(--border-color); color: var(--text-primary); } :root[data-theme="dark"] .search-input::placeholder, :root[data-theme="dark"] .form-input::placeholder, :root[data-theme="dark"] .form-textarea::placeholder { color: var(--text-muted); } :root[data-theme="dark"] .search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.2); } /* Search Results */ :root[data-theme="dark"] .company-list-item { border-color: transparent; } :root[data-theme="dark"] .company-list-item:hover { background: var(--bg-hover); border-color: var(--border-color); } :root[data-theme="dark"] .company-list-item.selected { background: rgba(0, 212, 255, 0.15); border-color: var(--color-primary); } /* Status Badges */ :root[data-theme="dark"] .status-badge.active { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; } :root[data-theme="dark"] .status-badge.dissolved { background: rgba(239, 68, 68, 0.2); color: #fca5a5; } /* Industry Tags */ :root[data-theme="dark"] .industry-tag { background: var(--gray-200); color: var(--text-secondary); } /* Map */ :root[data-theme="dark"] .map-container { background: var(--gray-100); } :root[data-theme="dark"] .map-loading { background: var(--bg-secondary); } :root[data-theme="dark"] .loading-status { color: var(--text-primary); } :root[data-theme="dark"] .loading-stat { color: var(--text-muted); } :root[data-theme="dark"] .loading-stat .material-icons { color: var(--color-primary); } /* Map Popup (Glassmorphic - matches hero map) */ :root[data-theme="dark"] .maplibregl-popup-content { background: var(--bg-panel) !important; border: none !important; box-shadow: var(--shadow-floating) !important; backdrop-filter: blur(20px) !important; color: var(--text-primary) !important; } :root[data-theme="dark"] .maplibregl-popup-tip { border-top-color: var(--bg-panel) !important; border-bottom-color: var(--bg-panel) !important; } :root[data-theme="dark"] .popup-title { color: var(--color-primary); } :root[data-theme="dark"] .popup-stats { color: var(--text-secondary); } :root[data-theme="dark"] .popup-meta { color: var(--text-secondary); } /* MapLibre Attribution */ :root[data-theme="dark"] .maplibregl-ctrl-attrib { background-color: rgba(0, 0, 0, 0.8); color: var(--text-secondary); } :root[data-theme="dark"] .maplibregl-ctrl-attrib a { color: var(--color-primary); } /* Zoom Indicator */ :root[data-theme="dark"] .zoom-indicator { background: rgba(17, 24, 39, 0.95); color: var(--gray-400); } :root[data-theme="dark"] .zoom-indicator span { color: var(--color-primary); } /* Scrollbar */ :root[data-theme="dark"] .sidebar-section::-webkit-scrollbar-track, :root[data-theme="dark"] .search-results::-webkit-scrollbar-track { background: var(--gray-100); } :root[data-theme="dark"] .sidebar-section::-webkit-scrollbar-thumb, :root[data-theme="dark"] .search-results::-webkit-scrollbar-thumb { background: var(--gray-300); } :root[data-theme="dark"] .sidebar-section::-webkit-scrollbar-thumb:hover, :root[data-theme="dark"] .search-results::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } /* Loading Spinner */ :root[data-theme="dark"] .loading-spinner { border-color: var(--gray-200); border-top-color: var(--color-primary); } /* Export Panel */ :root[data-theme="dark"] #exportCount { color: var(--color-primary); } /* Help Icon Button - Dark Mode */ :root[data-theme="dark"] .help-icon-btn { background: var(--bg-panel); border-color: var(--border-color); color: var(--text-secondary); } :root[data-theme="dark"] .help-icon-btn:hover { background: var(--bg-hover); border-color: var(--color-primary); color: var(--color-primary); } /* Utility Classes */ :root[data-theme="dark"] .text-error { color: #fca5a5; } :root[data-theme="dark"] .text-success { color: #6ee7b7; } /* Modal */ :root[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.7); } :root[data-theme="dark"] .modal-content { background: var(--bg-panel); border-color: var(--border-color); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8); } :root[data-theme="dark"] .price-display { background: var(--bg-secondary); border-color: var(--border-color); } :root[data-theme="dark"] .price-amount { color: var(--color-primary); } /* Price Details - Dark Mode */ :root[data-theme="dark"] .price-details { background: var(--bg-secondary); border-color: var(--border-color); } :root[data-theme="dark"] .price-breakdown { color: var(--text-secondary); } :root[data-theme="dark"] .price-tier { background: var(--bg-panel); border-color: var(--border-color); color: var(--text-secondary); } :root[data-theme="dark"] .price-savings { color: var(--color-success); background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.3); }