/* ==============================================
   Dark Theme — Variable overrides + targeted fixes
   ============================================== */

[data-theme="dark"] {
  color-scheme: dark;

  /* Core Brand */
  --color-primary-dark: #5BB5B5;
  --color-primary-light: #1A1E23;
  --color-accent-yellow: #F4C430;
  --color-accent-soft-yellow: #F6D365;

  /* Text */
  --color-text-dark: #E4E4E7;
  --color-text-muted: #9CA3AF;
  --color-text-heading: #F0F0F2;
  --color-text-link: #5BB5B5;
  --color-text-on-primary: #F8F9F7;
  --color-text-inverse: #1A1A1A;

  /* Backgrounds */
  --color-background: #121518;
  --color-background-secondary: #1A1E23;
  --color-bg-elevated: #22272B;
  --color-bg-hover: #283033;
  --color-bg-active: rgba(91, 181, 181, 0.15);
  --color-bg-input: #1A1E23;
  --color-bg-overlay: rgba(0, 0, 0, 0.6);

  /* Borders */
  --color-border-gray: #2E3338;

  /* Header */
  --color-header-bg: #0E2525;

  /* Status (brighter for dark bg) */
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-error: #F87171;
  --color-info: #60A5FA;

  /* Priority */
  --color-priority-low: #9CA3AF;
  --color-priority-medium: #60A5FA;
  --color-priority-high: #FB923C;
  --color-priority-urgent: #F87171;

  /* Button states */
  --color-btn-primary-hover: #4A9E9E;
  --color-btn-primary-active: #3D8A8A;
  --color-btn-danger-bg: #EF4444;
  --color-btn-danger-hover: #DC2626;
  --color-btn-success-bg: #10B981;
  --color-btn-success-hover: #059669;
  --color-btn-warning-bg: #F59E0B;
  --color-btn-warning-hover: #D97706;
  --color-btn-info-bg: #3B82F6;
  --color-btn-info-hover: #2563EB;

  /* Alerts */
  --color-alert-success-bg: rgba(52, 211, 153, 0.12);
  --color-alert-success-text: #6EE7B7;
  --color-alert-error-bg: rgba(248, 113, 113, 0.12);
  --color-alert-error-text: #FCA5A5;
  --color-alert-warning-bg: rgba(251, 191, 36, 0.12);
  --color-alert-warning-text: #FDE68A;
  --color-alert-info-bg: rgba(96, 165, 250, 0.12);
  --color-alert-info-text: #BFDBFE;

  /* Shadows (stronger on dark) */
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);

  /* Focus */
  --focus-ring: 2px solid #5BB5B5;
  --focus-ring-color: #5BB5B5;
}

/* ==============================================
   Targeted overrides for remaining hardcoded colors
   ============================================== */

/* --- Global / Base --- */
[data-theme="dark"] body {
  background-color: var(--color-background);
  color: var(--color-text-dark);
}

[data-theme="dark"] ::selection {
  background-color: rgba(91, 181, 181, 0.3);
  color: #F0F0F2;
}

[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--color-background);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3A4044;
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #4A5054;
}

/* --- Forms / Inputs --- */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--color-bg-input);
  color: var(--color-text-dark);
  border-color: var(--color-border-gray);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: #6B7280;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--color-primary-dark);
  box-shadow: 0 0 0 3px rgba(91, 181, 181, 0.2);
}

[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
  accent-color: #5BB5B5;
}

/* Select dropdown arrow (light chevron) */
[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* --- Header --- */
[data-theme="dark"] .header {
  background-color: var(--color-header-bg);
  border-bottom-color: #1A3030;
}

[data-theme="dark"] .header .theme-toggle,
[data-theme="dark"] .header .user-dropdown-toggle {
  color: #FFFFFF;
}

/* --- Sidebar --- */
[data-theme="dark"] .sidebar {
  background-color: var(--color-background-secondary);
  border-right-color: var(--color-border-gray);
}

[data-theme="dark"] .sidebar a:hover,
[data-theme="dark"] .sidebar .nav-item:hover {
  background-color: var(--color-bg-hover);
}

[data-theme="dark"] .sidebar .nav-item.active {
  background-color: var(--color-bg-active);
}

/* --- Cards / Panels --- */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .settings-section,
[data-theme="dark"] .project-card {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border-gray);
}

/* --- Tables --- */
[data-theme="dark"] table th {
  background-color: var(--color-background-secondary);
  color: var(--color-text-muted);
  border-color: var(--color-border-gray);
}

[data-theme="dark"] table td {
  border-color: var(--color-border-gray);
}

[data-theme="dark"] table tr:hover td {
  background-color: var(--color-bg-hover);
}

/* --- Buttons (primary on dark has different colors) --- */
[data-theme="dark"] .btn-primary {
  background-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

[data-theme="dark"] .btn-primary:hover {
  background-color: var(--color-btn-primary-hover);
}

[data-theme="dark"] .btn-secondary {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-dark);
  border-color: var(--color-border-gray);
}

[data-theme="dark"] .btn-secondary:hover {
  background-color: var(--color-bg-hover);
}

/* --- Modals --- */
[data-theme="dark"] .modal-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .modal {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border-gray);
}

/* --- Badges / Tags --- */
[data-theme="dark"] .badge {
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border-color: transparent;
}

[data-theme="dark"] .badge-zero {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
}

/* --- Popovers / Dropdowns --- */
[data-theme="dark"] .user-menu-dropdown,
[data-theme="dark"] .lang-picker-dropdown {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border-gray);
}

/* --- Dashboard task rows --- */
[data-theme="dark"] .task-row {
  background-color: transparent;
  border-color: transparent;
}

[data-theme="dark"] .task-row:hover {
  background-color: var(--color-bg-hover);
}

[data-theme="dark"] .action-row {
  background-color: var(--color-bg-elevated);
}

[data-theme="dark"] .action-row:hover {
  background-color: var(--color-bg-hover);
}

/* --- Panel headers --- */
[data-theme="dark"] .panel-header {
  border-bottom-color: var(--color-border-gray);
}

/* --- Capacity bar overrides --- */
[data-theme="dark"] .cap-green { color: var(--color-success); }
[data-theme="dark"] .cap-yellow { color: var(--color-warning); }
[data-theme="dark"] .cap-red { color: var(--color-error); }

/* --- Toggle switch --- */
[data-theme="dark"] .toggle-switch {
  background-color: #3A4044;
}

[data-theme="dark"] .toggle-switch::after {
  background-color: #9CA3AF;
}

[data-theme="dark"] input:checked + .toggle-switch {
  background-color: var(--color-primary-dark);
}

[data-theme="dark"] input:checked + .toggle-switch::after {
  background-color: #FFFFFF;
}

/* --- Code / pre blocks --- */
[data-theme="dark"] code,
[data-theme="dark"] pre {
  background-color: var(--color-background-secondary);
  color: var(--color-text-dark);
}

/* --- HR / Separators --- */
[data-theme="dark"] hr {
  border-color: var(--color-border-gray);
}

/* --- Tooltip --- */
[data-theme="dark"] .tooltip {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-dark);
  border-color: var(--color-border-gray);
}

/* --- Landing page overrides --- */
[data-theme="dark"] .landing-page {
  background-color: var(--color-background);
}

[data-theme="dark"] .landing-nav {
  background-color: var(--color-background);
  border-bottom-color: var(--color-border-gray);
}

[data-theme="dark"] .landing-hero {
  background-color: var(--color-background);
}

[data-theme="dark"] .landing-section {
  background-color: var(--color-background-secondary);
}

[data-theme="dark"] .landing-feature-card {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border-gray);
}

/* --- Onboarding page overrides --- */
[data-theme="dark"] .onboarding-page {
  background-color: var(--color-background);
}

[data-theme="dark"] .onboarding-container {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border-gray);
}

[data-theme="dark"] .dot {
  border-color: var(--color-border-gray);
}

[data-theme="dark"] .day-btn {
  background-color: var(--color-background-secondary);
  color: var(--color-text-dark);
  border-color: var(--color-border-gray);
}

[data-theme="dark"] .day-btn.active {
  background-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

/* --- Auth pages --- */
[data-theme="dark"] .auth-container,
[data-theme="dark"] .auth-card {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border-gray);
}

[data-theme="dark"] .auth-page {
  background-color: var(--color-background);
}

/* --- Admin pages --- */
[data-theme="dark"] .admin-table tr:nth-child(even) {
  background-color: var(--color-background-secondary);
}

/* --- Planning page --- */
[data-theme="dark"] .planning-slot {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border-gray);
}

/* --- Rollover page --- */
[data-theme="dark"] .rollover-card {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border-gray);
}

/* --- Waiting page --- */
[data-theme="dark"] .waiting-panel {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border-gray);
}

/* --- Meeting pages --- */
[data-theme="dark"] .meeting-card,
[data-theme="dark"] .agenda-item {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border-gray);
}

/* --- Flash message styling (component overrides) --- */
[data-theme="dark"] .flash-message {
  border-color: var(--color-border-gray);
}

/* --- Project color dots: ensure visibility with subtle border --- */
[data-theme="dark"] .project-color-dot {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* --- Logo filter for dark backgrounds --- */
[data-theme="dark"] .header-logo img {
  filter: brightness(1.1);
}

/* --- Placeholder content --- */
[data-theme="dark"] .empty-state {
  color: var(--color-text-muted);
}

/* --- Popover panels --- */
[data-theme="dark"] .popover,
[data-theme="dark"] .date-popover,
[data-theme="dark"] .priority-popover {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border-gray);
}

/* --- Contact picker --- */
[data-theme="dark"] .contact-picker-dropdown {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border-gray);
}

[data-theme="dark"] .contact-picker-item:hover {
  background-color: var(--color-bg-hover);
}

/* --- Cookie consent --- */
[data-theme="dark"] .cookie-consent {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border-gray);
}