/* ==========================================================================
   MODO ESCURO - ativado pela classe "dark" no <html> (ver static/js/theme.js)
   Remapeia as classes Tailwind usadas nas telas, sem precisar alterar cada uma.
   ========================================================================== */

/* ---------- Botao de alternar tema ---------- */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 9999px;
    border: 1px solid #cbd5e1; background: #ffffff; color: #475569;
    cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.theme-toggle:hover { background: #f1f5f9; color: #0f172a; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle-fixed { position: fixed; top: 16px; right: 16px; z-index: 60; }

html.dark .theme-toggle { background: #1b2638; border-color: #334155; color: #fbbf24; }
html.dark .theme-toggle:hover { background: #223049; color: #fde68a; }
html.dark .theme-toggle .icon-sun { display: block; }
html.dark .theme-toggle .icon-moon { display: none; }

/* ---------- Base ---------- */
html.dark { color-scheme: dark; }
html.dark body { background-color: #0b1120 !important; color: #dbe3ee; }

/* Logos tem fundo/letras escuras: ganham um selo claro no modo escuro */
html.dark .brand-logo { background: #f8fafc; border-radius: 12px; padding: 4px 10px; }
html.dark header .brand-logo img { width: 180px !important; }

/* ---------- Fundos ---------- */
html.dark .bg-white { background-color: #151e2e; }
html.dark .bg-slate-50,
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/40 { background-color: #1b2638; }
html.dark .bg-slate-100 { background-color: #223049; }
html.dark .hover\:bg-slate-50:hover { background-color: #1f2b40; }
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-slate-200:hover { background-color: #2a3852; }

/* ---------- Textos ---------- */
html.dark .text-slate-900,
html.dark .text-slate-800 { color: #f1f5f9; }
html.dark .text-slate-700 { color: #dbe3ee; }
html.dark .text-slate-600 { color: #b6c2d2; }
html.dark .text-slate-500 { color: #94a3b8; }
html.dark .text-slate-400 { color: #7b8aa0; }
html.dark .hover\:text-slate-900:hover { color: #ffffff; }

/* ---------- Bordas e divisorias ---------- */
html.dark .border-slate-300,
html.dark .border-slate-200 { border-color: #2a3649; }
html.dark .border-slate-100 { border-color: #222d3f; }
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #222d3f; }

/* ---------- Formularios ---------- */
html.dark input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
html.dark select,
html.dark textarea {
    background-color: #0f1828; color: #e2e8f0; border-color: #334155;
}
html.dark input[readonly] { background-color: #1b2638; color: #94a3b8; }
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b; }
html.dark option { background-color: #0f1828; color: #e2e8f0; }

/* ---------- Azul (links, item ativo do menu) ---------- */
html.dark .text-blue-600,
html.dark .text-blue-500 { color: #60a5fa; }
html.dark .text-blue-700 { color: #93c5fd; }
html.dark .text-blue-800,
html.dark .hover\:text-blue-800:hover { color: #bfdbfe; }
html.dark .hover\:text-blue-600:hover { color: #93c5fd; }
html.dark .bg-blue-50,
html.dark .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, .14); }
html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, .22); }
@media (min-width: 768px) {
    html.dark .md\:bg-transparent { background-color: transparent; }
    html.dark .md\:text-blue-600 { color: #60a5fa; }
    html.dark .md\:border-blue-600 { border-color: #60a5fa; }
}

/* ---------- Status: verde / amarelo / vermelho / azul claro ---------- */
html.dark .bg-emerald-50,
html.dark .hover\:bg-emerald-50:hover { background-color: rgba(16, 185, 129, .14); }
html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, .22); }
html.dark .text-emerald-700 { color: #6ee7b7; }
html.dark .text-emerald-600 { color: #34d399; }
html.dark .hover\:text-emerald-800:hover { color: #a7f3d0; }
html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, .35); }

html.dark .bg-amber-50,
html.dark .hover\:bg-amber-50:hover { background-color: rgba(245, 158, 11, .14); }
html.dark .bg-amber-100 { background-color: rgba(245, 158, 11, .22); }
html.dark .text-amber-700 { color: #fcd34d; }
html.dark .text-amber-600 { color: #fbbf24; }
html.dark .text-amber-800,
html.dark .hover\:text-amber-800:hover { color: #fde68a; }
html.dark .border-amber-200 { border-color: rgba(245, 158, 11, .35); }

html.dark .bg-rose-50,
html.dark .bg-rose-50\/30,
html.dark .hover\:bg-rose-50:hover { background-color: rgba(244, 63, 94, .14); }
html.dark .bg-rose-100,
html.dark .hover\:bg-rose-100:hover { background-color: rgba(244, 63, 94, .22); }
html.dark .text-rose-700 { color: #fda4af; }
html.dark .text-rose-600,
html.dark .text-rose-500 { color: #fb7185; }
html.dark .hover\:text-rose-700:hover { color: #fecdd3; }
html.dark .border-rose-200 { border-color: rgba(244, 63, 94, .35); }

html.dark .bg-sky-50 { background-color: rgba(14, 165, 233, .14); }
html.dark .text-sky-700 { color: #7dd3fc; }
html.dark .border-sky-200 { border-color: rgba(14, 165, 233, .35); }

html.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, .16); }
html.dark .text-indigo-600 { color: #a5b4fc; }
html.dark .bg-purple-50 { background-color: rgba(168, 85, 247, .16); }
html.dark .text-purple-600 { color: #d8b4fe; }

/* ---------- Calendario (flatpickr) ---------- */
html.dark .flatpickr-calendar {
    background: #1b2638; border: 1px solid #2a3649;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .55);
}
html.dark .flatpickr-calendar.arrowTop:before { border-bottom-color: #2a3649; }
html.dark .flatpickr-calendar.arrowTop:after { border-bottom-color: #1b2638; }
html.dark .flatpickr-calendar.arrowBottom:before { border-top-color: #2a3649; }
html.dark .flatpickr-calendar.arrowBottom:after { border-top-color: #1b2638; }
html.dark .flatpickr-months .flatpickr-month,
html.dark .flatpickr-current-month,
html.dark .flatpickr-current-month input.cur-year { color: #e2e8f0; fill: #e2e8f0; }
html.dark .flatpickr-current-month .flatpickr-monthDropdown-months { background: #1b2638; color: #e2e8f0; }
html.dark .flatpickr-months .flatpickr-prev-month,
html.dark .flatpickr-months .flatpickr-next-month { color: #e2e8f0; fill: #e2e8f0; }
html.dark .flatpickr-months .flatpickr-prev-month:hover svg,
html.dark .flatpickr-months .flatpickr-next-month:hover svg { fill: #60a5fa; }
html.dark span.flatpickr-weekday { color: #94a3b8; }
html.dark .flatpickr-day { color: #dbe3ee; }
html.dark .flatpickr-day.prevMonthDay,
html.dark .flatpickr-day.nextMonthDay,
html.dark .flatpickr-day.flatpickr-disabled,
html.dark .flatpickr-day.flatpickr-disabled:hover { color: #4b5a70; }
html.dark .flatpickr-day:hover,
html.dark .flatpickr-day:focus { background: #2a3852; border-color: #2a3852; }
html.dark .flatpickr-day.today { border-color: #60a5fa; }
html.dark .flatpickr-day.selected,
html.dark .flatpickr-day.selected:hover { background: #2563eb; border-color: #2563eb; color: #ffffff; }
html.dark .flatpickr-time { border-top-color: #2a3649 !important; }
html.dark .flatpickr-time input,
html.dark .flatpickr-time .flatpickr-am-pm,
html.dark .flatpickr-time .flatpickr-time-separator { color: #e2e8f0; background: transparent; }
html.dark .flatpickr-time input:hover,
html.dark .flatpickr-time .flatpickr-am-pm:hover,
html.dark .flatpickr-time input:focus { background: #223049; }
html.dark .numInputWrapper span.arrowUp:after { border-bottom-color: #e2e8f0; }
html.dark .numInputWrapper span.arrowDown:after { border-top-color: #e2e8f0; }