/* ==========================================================================
   APEX AUTOMOTIVE - DARK MODE OVERRIDES
   Activates via [data-theme="dark"] on html element
   ========================================================================== */

[data-theme="dark"] {
  --bg-primary: #0b0f17;
  --bg-secondary: #111827;
  --bg-tertiary: #1f2937;
  --bg-dark: #070a0f;
  --bg-surface: #1e293b;
  --bg-card: #111827;
  
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-light: #64748b;
  
  --border-color: #374151;
  --border-hover: #4b5563;
  
  --accent-blue-light: rgba(37, 99, 235, 0.15);
  --accent-red-light: rgba(220, 38, 38, 0.15);
  --accent-emerald-light: rgba(5, 150, 105, 0.15);

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.6);
}

/* Header Dark Mode Specifics */
[data-theme="dark"] .site-header {
  background-color: rgba(11, 15, 23, 0.92);
  border-bottom-color: rgba(55, 65, 81, 0.8);
}

[data-theme="dark"] .site-header.scrolled {
  background-color: rgba(11, 15, 23, 0.98);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .theme-toggle-btn,
[data-theme="dark"] .rtl-toggle-btn,
[data-theme="dark"] .hamburger-btn {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Card Overrides */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .service-item-tile,
[data-theme="dark"] .tech-card,
[data-theme="dark"] .feature-timeline-item,
[data-theme="dark"] .testimonial-spotlight,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .form-control {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .form-control {
  color: #f8fafc;
}

[data-theme="dark"] .form-control::placeholder {
  color: #94a3b8;
}

[data-theme="dark"] .hero-float-card {
  background: rgba(17, 24, 39, 0.95);
  border-color: var(--border-color);
}

[data-theme="dark"] .process-testimonial-wrapper {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

[data-theme="dark"] .process-node-circle {
  background-color: var(--bg-card);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

/* Dashboard Specific Dark Mode */
[data-theme="dark"] .dash-header,
[data-theme="dark"] .dash-stat-card,
[data-theme="dark"] .tracker-card,
[data-theme="dark"] .custom-table {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .custom-table th {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

[data-theme="dark"] .custom-table td {
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .tracker-dot {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-muted);
}

/* Dropdown & Home 2 Dark Mode Overrides */
[data-theme="dark"] .dropdown-menu {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item.active {
  background-color: rgba(37, 99, 235, 0.2);
  color: #60a5fa;
}

[data-theme="dark"] .mobile-submenu-link:hover,
[data-theme="dark"] .mobile-submenu-link.active {
  background-color: rgba(37, 99, 235, 0.2);
  color: #60a5fa;
}

[data-theme="dark"] .h2-intro-experience-card,
[data-theme="dark"] .h2-intro-stat-card,
[data-theme="dark"] .h2-property-hero-card,
[data-theme="dark"] .h2-property-card,
[data-theme="dark"] .h2-why-item,
[data-theme="dark"] .h2-service-tile,
[data-theme="dark"] .h2-testimonial-box {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}


/* Auth Pages (Login & Register) Dark Mode */
[data-theme="dark"] .auth-page-controls .theme-toggle-btn,
[data-theme="dark"] .auth-page-controls .rtl-toggle-btn {
  background-color: rgba(17, 24, 39, 0.92);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .auth-page-controls .theme-toggle-btn:hover,
[data-theme="dark"] .auth-page-controls .rtl-toggle-btn:hover {
  background-color: var(--accent-blue);
  color: #ffffff;
}

[data-theme="dark"] .login-card,
[data-theme="dark"] .register-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}