/* ============================================
   DARK MODE THEME
   Applied when html[data-theme="dark"]
   ============================================ */

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

/* --- Base surfaces --- */
html[data-theme="dark"] body {
  background: #0f172a;
  color: #e2e8f0;
}

html[data-theme="dark"] header,
html[data-theme="dark"] .global-header {
  background: #1e293b;
  border-bottom-color: #334155;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

html[data-theme="dark"] .sidebar {
  background: #1e293b;
  border-right-color: #334155;
}

html[data-theme="dark"] .main-content {
  background: #0f172a;
}

/* --- Cards & containers --- */
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .kpi-tile,
html[data-theme="dark"] .welcome-card,
html[data-theme="dark"] .module-container,
html[data-theme="dark"] .skeleton-card {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}

html[data-theme="dark"] .section-content {
  background: transparent;
}

/* --- Text --- */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .metric-value,
html[data-theme="dark"] .project-name,
html[data-theme="dark"] .logo-text {
  color: #f1f5f9;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .metric-change,
html[data-theme="dark"] .header-subtitle,
html[data-theme="dark"] .center-title {
  color: #94a3b8;
}

/* --- Inputs & Selects --- */
html[data-theme="dark"] select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #475569;
}

html[data-theme="dark"] select option {
  background: #1e293b;
  color: #e2e8f0;
}

/* --- Buttons --- */
html[data-theme="dark"] .btn {
  border-color: #475569;
}

html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] #btn-export-dashboard {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #475569;
}

html[data-theme="dark"] .logout-btn {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

/* --- Tables --- */
html[data-theme="dark"] .data-table,
html[data-theme="dark"] table {
  color: #e2e8f0;
}

html[data-theme="dark"] .data-table thead th,
html[data-theme="dark"] table thead th {
  background: #1e293b;
  color: #94a3b8;
  border-bottom-color: #334155;
}

html[data-theme="dark"] .data-table tbody tr,
html[data-theme="dark"] table tbody tr {
  border-bottom-color: #1e293b;
}

html[data-theme="dark"] .data-table tbody tr:hover,
html[data-theme="dark"] table tbody tr:hover {
  background: rgba(59, 130, 246, 0.08);
}

/* --- Charts --- */
html[data-theme="dark"] canvas {
  filter: none; /* Don't invert charts */
}

/* --- Sidebar nav links --- */
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .sidebar a {
  color: #94a3b8;
}

html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .sidebar a:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .nav-link.active,
html[data-theme="dark"] .sidebar a.active {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
}

/* --- Dividers & borders --- */
html[data-theme="dark"] hr,
html[data-theme="dark"] .header-divider {
  background: #334155;
}

/* --- Modals --- */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-body {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
}

html[data-theme="dark"] .modal-header {
  border-bottom-color: #334155;
}

/* --- Search overlay --- */
html[data-theme="dark"] .search-overlay,
html[data-theme="dark"] .search-modal {
  background: rgba(15, 23, 42, 0.95);
}

html[data-theme="dark"] .search-input-wrapper input {
  background: #0f172a;
  color: #e2e8f0;
  border-color: #475569;
}

html[data-theme="dark"] .search-result-item:hover {
  background: rgba(56, 189, 248, 0.08);
}

/* --- Skeleton override --- */
html[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
}

/* --- Scrollbar --- */
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.2);
}

/* --- Theme toggle button --- */
html[data-theme="dark"] .theme-toggle-btn {
  border-color: #475569 !important;
}

html[data-theme="dark"] .theme-toggle-btn:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* --- Focus ring --- */
html[data-theme="dark"] :focus-visible {
  outline-color: #38bdf8;
}

/* --- Notifications/Toasts --- */
html[data-theme="dark"] .app-toast {
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* --- Route section --- */
html[data-theme="dark"] .rotas-sidebar {
  background: #1e293b;
  border-color: #334155;
}

html[data-theme="dark"] .rota-item {
  background: #0f172a;
  border-color: #334155;
}

html[data-theme="dark"] .rota-nome {
  color: #e2e8f0;
}

html[data-theme="dark"] .rota-clientes {
  color: #94a3b8;
}

/* --- Rotas Analytics section header (keep gradient) --- */
html[data-theme="dark"] #rotas-analytics-section .section-header {
  background: linear-gradient(135deg, #0b4f6c 0%, #0891b2 100%) !important;
}

/* --- User info --- */
html[data-theme="dark"] .user-name {
  color: #f1f5f9;
}

html[data-theme="dark"] .user-role {
  color: #94a3b8;
}

/* --- Welcome card gradient stays --- */
html[data-theme="dark"] .welcome-card {
  background: linear-gradient(135deg, #1e3a5f 0%, #0f4c75 100%);
}

html[data-theme="dark"] .welcome-card h2 {
  color: #f1f5f9;
}

html[data-theme="dark"] .welcome-card p {
  color: #cbd5e1;
}