/* =====================================================================
   dark.css — Modo escuro do Sistema Global Vacinas
   Aplica estilos quando <html> tem a classe "dark" (adicionada pelo theme.js)
   ===================================================================== */

html.dark {
  color-scheme: dark;
}

/* ─── Corpo / fundo da página ─── */
html.dark body {
  background-color: #0f172a !important;
  color: #f1f5f9;
}

/* ─── Backgrounds ─── */
html.dark .bg-white     { background-color: #1e293b !important; }
html.dark .bg-slate-50  { background-color: #0f172a !important; }
html.dark .bg-slate-100 { background-color: #1e293b !important; }
html.dark .bg-slate-200 { background-color: #334155 !important; }
html.dark .bg-slate-300 { background-color: #475569 !important; }

/* Cards de funcionários na coluna esquerda: levemente mais claros que o painel */
html.dark #lista-todos .bg-slate-50 { background-color: #334155 !important; }

/* Células "não atende" na grade: mais escuras que o painel (efeito desativado) */
html.dark #grade-locais .bg-slate-50 { background-color: #0f172a !important; }

/* ─── Textos ─── */
html.dark .text-slate-800 { color: #f1f5f9  !important; }
html.dark .text-slate-700 { color: #e2e8f0  !important; }
html.dark .text-slate-600 { color: #cbd5e1  !important; }
html.dark .text-slate-500 { color: #94a3b8  !important; }
html.dark .text-slate-400 { color: #64748b  !important; }

/* ─── Bordas ─── */
html.dark .border-slate-100 { border-color: #334155 !important; }
html.dark .border-slate-200 { border-color: #334155 !important; }
html.dark .border-slate-300 { border-color: #475569 !important; }

/* ─── Hover states ─── */
html.dark .hover\:bg-slate-50:hover  { background-color: #334155 !important; }
html.dark .hover\:bg-slate-100:hover { background-color: #334155 !important; }
html.dark .hover\:bg-slate-200:hover { background-color: #475569 !important; }
html.dark .hover\:bg-slate-300:hover { background-color: #475569 !important; }
html.dark .hover\:text-slate-900:hover { color: #f1f5f9 !important; }
html.dark .hover\:text-slate-700:hover { color: #e2e8f0 !important; }

/* ─── Item de nav ativo ─── */
html.dark .bg-emerald-50  { background-color: #022c22 !important; }
html.dark .text-emerald-700 { color: #34d399 !important; }

/* ─── Cores de estado (escala: bem/sem exame/reforco/threshold) ─── */
html.dark .bg-rose-50  { background-color: #1f0a0e !important; }
html.dark .bg-rose-100 { background-color: #2d1117 !important; }
html.dark .border-rose-200 { border-color: #4c1626 !important; }
html.dark .text-rose-400 { color: #fb7185 !important; }

html.dark .bg-red-100  { background-color: #2d1117 !important; }
html.dark .border-red-300 { border-color: #6b1f2a !important; }
html.dark .text-red-800 { color: #fca5a5 !important; }
html.dark .bg-red-100.border.border-red-300 { background-color: #2d1117 !important; }

html.dark .bg-amber-50  { background-color: #1a1300 !important; }
html.dark .bg-amber-100 { background-color: #1f1800 !important; }
html.dark .border-amber-300 { border-color: #78450a !important; }
html.dark .text-amber-700 { color: #fbbf24 !important; }

/* ─── Tags de alocação na grade (geradas pelo escala.js) ─── */
html.dark .bg-emerald-200 { background-color: #064e3b !important; color: #6ee7b7 !important; }
html.dark .bg-amber-200   { background-color: #451a03 !important; color: #fcd34d !important; }
html.dark .bg-sky-200     { background-color: #0c2d48 !important; color: #7dd3fc !important; }

/* ─── Chips de regular da semana + badges de perfil ─── */
html.dark .bg-emerald-100 { background-color: #064e3b !important; }
html.dark .text-emerald-800 { color: #6ee7b7 !important; }
html.dark .bg-violet-100   { background-color: #2e1065 !important; }
html.dark .text-violet-700 { color: #c4b5fd !important; }

/* ─── Header fixo ─── */
html.dark header {
  background-color: #1e293b !important;
  border-color: #334155  !important;
}

/* ─── Menu mobile ─── */
html.dark #nav-mobile {
  background-color: #1e293b !important;
  border-color: #334155  !important;
}

/* ─── Separador vertical do nav desktop ─── */
html.dark .w-px.bg-slate-200 { background-color: #475569 !important; }

/* ─── Inputs, selects e textareas ─── */
html.dark input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.dark select,
html.dark textarea {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
  border-color: #475569 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748b;
}

/* ─── Classe .inp (forms internos) ─── */
html.dark .inp {
  background-color: #0f172a !important;
  color: #f1f5f9 !important;
  border-color: #475569 !important;
}
html.dark .inp:focus {
  box-shadow: 0 0 0 2px #10b981;
  border-color: #10b981 !important;
}

/* ─── Label .lbl ─── */
html.dark .lbl { color: #cbd5e1; }

/* ─── Tabelas ─── */
html.dark table { color: #e2e8f0; }
html.dark thead tr { border-color: #334155; }
html.dark tbody tr:hover { background-color: #334155; }
html.dark th, html.dark td { border-color: #334155; }
html.dark .border-b { border-color: #334155 !important; }
html.dark .border-t { border-color: #334155 !important; }

/* ─── Sections / cards ─── */
html.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* ─── Painel KM (verde claro) ─── */
html.dark .bg-emerald-50.rounded-xl,
html.dark .border-emerald-200 {
  background-color: #022c22 !important;
  border-color: #065f46   !important;
}
html.dark .text-emerald-800 { color: #6ee7b7 !important; }
html.dark .text-emerald-600 { color: #34d399 !important; }

/* ─── Fundo sticky toolbar (escala) ─── */
html.dark .bg-white.shadow-sm { background-color: #1e293b !important; }

/* ─── Badges mono (código de coluna) ─── */
html.dark .font-mono.bg-slate-100 { background-color: #334155 !important; color: #cbd5e1 !important; }

/* ─── Botões outline/borda ─── */
html.dark .border.border-slate-200 { border-color: #475569 !important; }

/* ─── Preview passo 2 importação ─── */
html.dark .bg-slate-50.sticky { background-color: #1e293b !important; }

/* ─── Scrollbar (Webkit) ─── */
html.dark ::-webkit-scrollbar         { width: 8px; height: 8px; }
html.dark ::-webkit-scrollbar-track   { background: #1e293b; }
html.dark ::-webkit-scrollbar-thumb   { background: #475569; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ─── Botão toggle de tema ─── */
#layout-tema, #layout-tema-mobile {
  transition: background-color .2s;
}