/* ════════════════════════════════════════════════════════════ Astas — Dark Mode Theme Ativado via classe `dark` no ════════════════════════════════════════════════════════════ */ html.dark { color-scheme: dark; } html.dark body { background: #0f1416 !important; color: #e1e3e5; } /* ─── Backgrounds ─── */ html.dark .bg-background, html.dark .bg-surface, html.dark .bg-surface-bright { background-color: #0f1416 !important; } html.dark .bg-surface-container-lowest { background-color: #151a1c !important; } html.dark .bg-surface-container-low { background-color: #1a2022 !important; } html.dark .bg-surface-container { background-color: #1f2528 !important; } html.dark .bg-surface-container-high { background-color: #262d30 !important; } html.dark .bg-surface-container-highest { background-color: #303639 !important; } html.dark .bg-white { background-color: #1a2022 !important; } html.dark .bg-white\/90 { background-color: rgb(15 20 22 / 0.92) !important; } html.dark .bg-white\/95 { background-color: rgb(15 20 22 / 0.95) !important; } /* ─── Texts ─── */ html.dark .text-on-surface, html.dark .text-on-background { color: #e1e3e5 !important; } html.dark .text-on-surface-variant { color: #a8b3ad !important; } html.dark .text-on-primary-fixed-variant { color: #a8f0e3 !important; } html.dark .text-black { color: #e1e3e5 !important; } /* ─── Borders (com opacidade) ─── */ html.dark .border-outline { border-color: #6c7a74 !important; } html.dark .border-outline-variant { border-color: #3d4a44 !important; } html.dark .border-outline-variant\/10 { border-color: rgb(108 122 116 / 0.25) !important; } html.dark .border-outline-variant\/20 { border-color: rgb(108 122 116 / 0.35) !important; } html.dark .border-outline-variant\/30 { border-color: rgb(108 122 116 / 0.45) !important; } html.dark .border-outline-variant\/40 { border-color: rgb(108 122 116 / 0.55) !important; } html.dark .border-outline-variant\/50 { border-color: rgb(108 122 116 / 0.65) !important; } /* ─── Inputs / Selects / Textareas ─── */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html.dark textarea, html.dark select { background-color: #1a2022 !important; color: #e1e3e5 !important; border-color: #3d4a44 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #6c7a74 !important; } html.dark select option { background-color: #1a2022 !important; color: #e1e3e5 !important; } /* file inputs */ html.dark input[type="file"] { color: #a8b3ad !important; } html.dark input[type="file"]::file-selector-button { background-color: rgb(28 105 95 / 0.25) !important; color: #8cd4c7 !important; } /* ─── Tables ─── */ html.dark tbody tr { border-color: rgb(108 122 116 / 0.18) !important; } html.dark tbody tr:hover { background: rgb(255 255 255 / 0.04) !important; } html.dark thead { background-color: #1a2022 !important; } html.dark thead th { color: #a8b3ad !important; } /* ─── Sidebar ─── */ html.dark #sidebar { background-color: #151a1c !important; border-color: #2a3033 !important; } html.dark .nav-link { color: #a8b3ad !important; } html.dark .nav-link:hover { background: #1f2528 !important; color: #e1e3e5 !important; } html.dark .nav-link.active { color: #8cd4c7 !important; background: rgba(140, 212, 199, 0.12) !important; border-right-color: #8cd4c7 !important; } /* ─── Header (top bar) ─── */ html.dark header { background-color: rgb(15 20 22 / 0.92) !important; border-color: #2a3033 !important; } /* ─── Modais ─── */ html.dark .bg-black\/50 { background-color: rgba(0, 0, 0, 0.7) !important; } html.dark .bg-black\/40 { background-color: rgba(0, 0, 0, 0.65) !important; } /* ─── Cores tema mantidas mas suavizadas em fundo escuro ─── */ html.dark .bg-primary\/5 { background-color: rgb(140 212 199 / 0.08) !important; } html.dark .bg-primary\/10 { background-color: rgb(140 212 199 / 0.13) !important; } html.dark .bg-primary\/20 { background-color: rgb(140 212 199 / 0.20) !important; } html.dark .bg-tertiary-fixed\/10 { background-color: rgb(255 218 213 / 0.08) !important; } html.dark .bg-tertiary-fixed\/40 { background-color: rgb(255 180 169 / 0.15) !important; } html.dark .bg-secondary-container\/20 { background-color: rgb(143 244 227 / 0.10) !important; } /* avisos coloridos */ html.dark .bg-yellow-50 { background-color: rgb(120 53 15 / 0.30) !important; } html.dark .border-yellow-200 { border-color: rgb(202 138 4 / 0.50) !important; } html.dark .text-yellow-700 { color: #fbbf24 !important; } html.dark .bg-blue-50 { background-color: rgb(30 58 95 / 0.35) !important; } html.dark .border-blue-200 { border-color: rgb(96 165 250 / 0.40) !important; } html.dark .text-blue-700 { color: #93c5fd !important; } html.dark .bg-red-50 { background-color: rgb(127 29 29 / 0.30) !important; } html.dark .text-red-700 { color: #fca5a5 !important; } html.dark .bg-green-50 { background-color: rgb(6 78 59 / 0.30) !important; } html.dark .text-green-700 { color: #86efac !important; } /* ─── Scrollbar ─── */ html.dark ::-webkit-scrollbar-thumb { background: #3d4a44; } html.dark ::-webkit-scrollbar-thumb:hover { background: #4d5a54; } /* ─── Code & pre ─── */ html.dark code { background-color: rgb(108 122 116 / 0.20) !important; color: #c4d4cc !important; padding: 1px 5px; border-radius: 4px; } /* ─── Sombras (mais sutis no escuro) ─── */ html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.4) !important; } html.dark .shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.5) !important; } html.dark .shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5) !important; } html.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.6) !important; } html.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.7) !important; } /* ─── Badges (legacy do styles.css) — mantém pois já são dark-friendly ─── */ /* ─── Backdrop blur dos modais ─── */ html.dark .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ─── Progress bars / outras ─── */ html.dark .bg-outline-variant\/20 { background-color: rgb(108 122 116 / 0.25) !important; } html.dark .bg-outline-variant\/30 { background-color: rgb(108 122 116 / 0.35) !important; } /* ─── Dropdowns / menus flutuantes ─── */ html.dark [class*="absolute"][class*="bg-white"], html.dark [class*="bg-surface-container-lowest"][class*="absolute"] { background-color: #1f2528 !important; border-color: #3d4a44 !important; } /* ─── Toast container ─── */ html.dark #toast-container > div { background-color: #1f2528 !important; color: #e1e3e5 !important; border-color: #3d4a44 !important; } /* ─── Login page (gradiente ajustado) ─── */ html.dark .login-bg { background: linear-gradient(135deg, #0f1416 0%, #151a1c 100%) !important; }