/* ===================================
   DARK MODE STYLES
   M2E Central - Sistema de Ocorrências
   ================================== */

/* Variáveis do tema escuro */
:root {
  --dark-bg-primary: #0a0f1e;
  --dark-bg-secondary: #161d2f;
  --dark-bg-tertiary: #1f2937;
  --dark-text-primary: #f1f5f9;
  --dark-text-secondary: #cbd5e1;
  --dark-text-muted: #94a3b8;
  --dark-border: #2d3748;
  --dark-hover: #374151;
  --dark-shadow: rgba(0, 0, 0, 0.7);
}

/* Aplicar tema escuro quando a classe está presente */
body.dark-mode {
  background: linear-gradient(135deg, #0a0f1e 0%, #161d2f 100%) !important;
  color: var(--dark-text-primary) !important;
  min-height: 100vh;
}

/* SOLUÇÃO: Forçar background escuro no .container (onde os cards ficam!) */
body.dark-mode .container {
  background-color: #1f2937 !important;
  background: #1f2937 !important;
}

/* ===================================
   COMPONENTES GERAIS
   ================================== */

body.dark-mode * {
  border-color: var(--dark-border) !important;
}

body.dark-mode .bg-white {
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100,
body.dark-mode.bg-gray-50,
body.dark-mode.bg-gray-100 {
  background-color: #1a2332 !important;
}

body.dark-mode .text-gray-600,
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-900 {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .text-gray-500 {
  color: var(--dark-text-secondary) !important;
}

body.dark-mode .text-gray-400 {
  color: var(--dark-text-muted) !important;
}

/* ===================================
   CORES DE STATUS / PRAZO (legíveis no escuro)
   Os tons -600 do Tailwind são escuros (feitos p/ fundo claro).
   No modo escuro usamos os tons -400, mais claros e com bom contraste.
   ================================== */
body.dark-mode .text-red-600,
body.dark-mode .text-red-700 {
  color: #f87171 !important; /* red-400 */
}
body.dark-mode .text-orange-600,
body.dark-mode .text-orange-700 {
  color: #fb923c !important; /* orange-400 */
}
body.dark-mode .text-amber-600,
body.dark-mode .text-amber-700 {
  color: #fbbf24 !important; /* amber-400 */
}
body.dark-mode .text-green-600,
body.dark-mode .text-green-700 {
  color: #4ade80 !important; /* green-400 */
}
body.dark-mode .text-blue-600,
body.dark-mode .text-blue-700 {
  color: #60a5fa !important; /* blue-400 */
}
body.dark-mode .text-purple-600,
body.dark-mode .text-purple-700 {
  color: #c084fc !important; /* purple-400 */
}
body.dark-mode .text-indigo-600,
body.dark-mode .text-indigo-700 {
  color: #818cf8 !important; /* indigo-400 */
}

/* ===================================
   CARDS
   ================================== */

body.dark-mode .card,
body.dark-mode .rounded-2xl,
body.dark-mode .rounded-xl,
body.dark-mode .rounded-lg {
  background-color: var(--dark-bg-secondary) !important;
  box-shadow: 0 4px 6px var(--dark-shadow) !important;
}

body.dark-mode .card:hover {
  background-color: var(--dark-bg-tertiary) !important;
}

/* ===================================
   FORMULÁRIOS
   ================================== */

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  background-color: var(--dark-bg-secondary) !important;
  border-color: #6366f1 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--dark-text-muted) !important;
}

body.dark-mode input[type="radio"],
body.dark-mode input[type="checkbox"] {
  background-color: var(--dark-bg-tertiary) !important;
}

/* ===================================
   AUTOCOMPLETE DO NAVEGADOR (dark mode)
   Corrige o fundo branco/amarelo que o browser injeta
   nos campos preenchidos automaticamente
   ================================== */

body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover,
body.dark-mode input:-webkit-autofill:focus,
body.dark-mode input:-webkit-autofill:active {
  /* Cobre o fundo branco com um box-shadow gigante na cor do input dark */
  -webkit-box-shadow: 0 0 0 9999px var(--dark-bg-tertiary) inset !important;
  box-shadow: 0 0 0 9999px var(--dark-bg-tertiary) inset !important;
  /* Cor do texto preenchido */
  -webkit-text-fill-color: var(--dark-text-primary) !important;
  /* Cor do cursor */
  caret-color: var(--dark-text-primary) !important;
  /* Congela a transição de background que o browser faz */
  transition: background-color 99999s ease-in-out 0s;
  border-color: var(--dark-border) !important;
}

/* ===================================
   TABELAS
   ================================== */

body.dark-mode table {
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode thead {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
}

body.dark-mode th {
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode tbody tr {
  border-color: var(--dark-border) !important;
}

body.dark-mode tbody tr:hover {
  background-color: var(--dark-bg-tertiary) !important;
}

body.dark-mode td {
  color: var(--dark-text-secondary) !important;
}

/* ===================================
   MODAIS
   ================================== */

body.dark-mode .modal {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

body.dark-mode .modal-content {
  background-color: var(--dark-bg-secondary) !important;
}

/* ===================================
   BADGES E CHIPS
   ================================== */

body.dark-mode .badge,
body.dark-mode .chip {
  filter: brightness(0.9);
}

/* Badges específicos - manter cores mas escurecer fundo */
body.dark-mode .bg-green-100 {
  background-color: #065f46 !important;
}

body.dark-mode .bg-blue-100 {
  background-color: #1e3a8a !important;
}

body.dark-mode .bg-yellow-100 {
  background-color: #78350f !important;
}

body.dark-mode .bg-red-100 {
  background-color: #7f1d1d !important;
}

body.dark-mode .bg-purple-100 {
  background-color: #581c87 !important;
}

body.dark-mode .bg-orange-100 {
  background-color: #7c2d12 !important;
}

/* Textos dos badges */
body.dark-mode .text-green-800 {
  color: #86efac !important;
}

body.dark-mode .text-blue-800 {
  color: #93c5fd !important;
}

body.dark-mode .text-yellow-800 {
  color: #fde047 !important;
}

body.dark-mode .text-red-800 {
  color: #fca5a5 !important;
}

body.dark-mode .text-purple-800 {
  color: #d8b4fe !important;
}

body.dark-mode .text-orange-800 {
  color: #fdba74 !important;
}

/* ===================================
   NAVEGAÇÃO E HEADER
   ================================== */

body.dark-mode .header-container,
body.dark-mode nav {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode .header-title,
body.dark-mode .header-subtitle {
  color: var(--dark-text-primary) !important;
}

/* Padronizar headers de todos os módulos com o estilo verde M2E */
/* Aplicado em: Nova Ocorrência, Histórico, Tratamento, Configurações, Usuários */
/* NÃO aplicado em: Editar Ocorrências, Auditoria */
body.dark-mode .usuarios-header,
body.dark-mode .config-header,
body.dark-mode .tratamento-header {
  background: linear-gradient(135deg, var(--m2e-green) 0%, var(--m2e-teal) 100%) !important;
}

/* ===================================
   BOTÕES
   ================================== */

/* Botões primários - manter cores originais mas ajustar contraste */
body.dark-mode .bg-indigo-600,
body.dark-mode .bg-blue-600 {
  filter: brightness(1.2);
}

body.dark-mode .bg-indigo-600:hover,
body.dark-mode .bg-blue-600:hover {
  filter: brightness(1.4);
}

/* Botões secundários */
body.dark-mode .bg-gray-200,
body.dark-mode .bg-gray-300 {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .bg-gray-200:hover,
body.dark-mode .bg-gray-300:hover {
  background-color: var(--dark-hover) !important;
}

/* ===================================
   ESTATÍSTICAS
   ================================== */

body.dark-mode .stat-card {
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .stat-value {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .stat-label {
  color: var(--dark-text-secondary) !important;
}

/* ===================================
   LOGIN PAGE
   ================================== */

body.dark-mode .login-container {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

body.dark-mode .login-card {
  background-color: var(--dark-bg-secondary) !important;
  box-shadow: 0 10px 30px var(--dark-shadow) !important;
}

/* ===================================
   LOADING E ESTADOS VAZIOS
   ================================== */

body.dark-mode .loading-spinner {
  border-color: var(--dark-border) !important;
  border-top-color: #6366f1 !important;
}

body.dark-mode .empty-state {
  color: var(--dark-text-muted) !important;
}

/* ===================================
   BORDAS E DIVISORES
   ================================== */

body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300,
body.dark-mode .border-gray-400 {
  border-color: var(--dark-border) !important;
}

body.dark-mode hr {
  border-color: var(--dark-border) !important;
}

/* ===================================
   IMAGENS E ÍCONES
   ================================== */

body.dark-mode img {
  opacity: 0.9;
}

body.dark-mode .icon {
  filter: brightness(1.2);
}

/* ===================================
   SCROLLBAR (Webkit) - MÁXIMA PRIORIDADE
   ================================== */

/* SOBRESCREVER m2e-theme.css que define scrollbar branca */
/* Usar múltiplos seletores com especificidade alta */

/* === SCROLLBAR WIDTH === */
html body.dark-mode::-webkit-scrollbar,
body.dark-mode::-webkit-scrollbar,
body.dark-mode *::-webkit-scrollbar,
body.dark-mode html::-webkit-scrollbar,
body.dark-mode .container::-webkit-scrollbar,
body.dark-mode div::-webkit-scrollbar,
body.dark-mode main::-webkit-scrollbar,
body.dark-mode section::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
}

/* === SCROLLBAR TRACK (TRILHA/FUNDO) - COR DO BACKGROUND === */
html body.dark-mode::-webkit-scrollbar-track,
body.dark-mode::-webkit-scrollbar-track,
body.dark-mode *::-webkit-scrollbar-track,
body.dark-mode html::-webkit-scrollbar-track,
body.dark-mode .container::-webkit-scrollbar-track,
body.dark-mode div::-webkit-scrollbar-track,
body.dark-mode main::-webkit-scrollbar-track,
body.dark-mode section::-webkit-scrollbar-track,
body.dark-mode table::-webkit-scrollbar-track,
body.dark-mode .modal::-webkit-scrollbar-track,
body.dark-mode [style*="overflow"]::-webkit-scrollbar-track {
  background-color: #161d2f !important; /* Cor do background dos cards */
  background: #161d2f !important;
  border-radius: 0 !important;
}

/* === SCROLLBAR THUMB (BARRA) === */
html body.dark-mode::-webkit-scrollbar-thumb,
body.dark-mode::-webkit-scrollbar-thumb,
body.dark-mode *::-webkit-scrollbar-thumb,
body.dark-mode html::-webkit-scrollbar-thumb,
body.dark-mode .container::-webkit-scrollbar-thumb,
body.dark-mode div::-webkit-scrollbar-thumb,
body.dark-mode main::-webkit-scrollbar-thumb,
body.dark-mode section::-webkit-scrollbar-thumb {
  background-color: #374151 !important; /* Thumb mais claro */
  background: #374151 !important;
  border-radius: 6px !important;
}

/* === SCROLLBAR THUMB HOVER === */
html body.dark-mode::-webkit-scrollbar-thumb:hover,
body.dark-mode::-webkit-scrollbar-thumb:hover,
body.dark-mode *::-webkit-scrollbar-thumb:hover,
body.dark-mode html::-webkit-scrollbar-thumb:hover,
body.dark-mode .container::-webkit-scrollbar-thumb:hover,
body.dark-mode div::-webkit-scrollbar-thumb:hover,
body.dark-mode main::-webkit-scrollbar-thumb:hover,
body.dark-mode section::-webkit-scrollbar-thumb:hover {
  background-color: #4b5563 !important; /* Hover ainda mais claro */
  background: #4b5563 !important;
}

/* === FIREFOX SCROLLBAR === */
html body.dark-mode,
body.dark-mode,
body.dark-mode *,
body.dark-mode html,
body.dark-mode .container,
body.dark-mode div,
body.dark-mode main,
body.dark-mode section {
  scrollbar-width: thin !important;
  scrollbar-color: #374151 #161d2f !important; /* thumb / track */
}

/* ===================================
   SELEÇÃO DE TEXTO
   ================================== */

body.dark-mode ::selection {
  background-color: #6366f1;
  color: white;
}

/* ===================================
   BOTÃO DARK MODE TOGGLE
   ================================== */

#dark-mode-toggle {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  width: auto;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-left: 12px;
}

#dark-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#dark-mode-toggle:active {
  transform: translateY(0);
}

body.dark-mode #dark-mode-toggle {
  background: transparent !important; /* Fundo transparente no dark mode */
  border-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode #dark-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.1) !important; /* Hover suave no dark mode */
  border-color: rgba(255, 255, 255, 0.5);
}

/* Ajuste em mobile */
@media (max-width: 640px) {
  #dark-mode-toggle {
    min-width: 44px;
    height: 40px;
    padding: 0 12px;
    font-size: 16px;
    margin-left: 8px;
  }
}

/* ===================================
   TRANSIÇÕES SUAVES
   ================================== */

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-mode * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ===================================
   AJUSTES ESPECÍFICOS DE MÓDULOS
   ================================== */

/* Menu Principal */
body.dark-mode .menu-card {
  background: linear-gradient(135deg, var(--dark-bg-secondary) 0%, var(--dark-bg-tertiary) 100%) !important;
}

/* Filtros */
body.dark-mode .filter-container {
  background-color: var(--dark-bg-secondary) !important;
}

/* Paginação */
body.dark-mode .pagination {
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .pagination-info {
  color: var(--dark-text-secondary) !important;
}

/* Criticidade (Radio buttons) */
body.dark-mode .criticidade-option {
  background-color: var(--dark-bg-tertiary) !important;
}

body.dark-mode .criticidade-option:hover {
  background-color: var(--dark-hover) !important;
}

/* ===================================
   MÓDULO: NOVA OCORRÊNCIA
   ================================== */

/* Formulário principal */
body.dark-mode #form-ocorrencia {
  background-color: var(--dark-bg-secondary) !important;
}

/* Cards de seção coloridos - ESCURECER MUITO */
body.dark-mode .bg-purple-50 {
  background-color: #2d1b4e !important; /* Roxo muito escuro */
}

body.dark-mode .bg-blue-50 {
  background-color: #1a2942 !important; /* Azul muito escuro */
}

body.dark-mode .bg-yellow-50 {
  background-color: #3d3417 !important; /* Amarelo muito escuro */
}

body.dark-mode .bg-green-50 {
  background-color: #1a3326 !important; /* Verde muito escuro */
}

body.dark-mode .bg-red-50 {
  background-color: #3d1a1a !important; /* Vermelho muito escuro */
}

body.dark-mode .bg-orange-50 {
  background-color: #3d2617 !important; /* Laranja muito escuro */
}

body.dark-mode .bg-teal-50 {
  background-color: #1a3d3d !important; /* Teal/verde-água muito escuro */
}

body.dark-mode .bg-cyan-50 {
  background-color: #1a3342 !important; /* Ciano muito escuro */
}

body.dark-mode .bg-indigo-50 {
  background-color: #1e1b4b !important; /* Indigo muito escuro */
}

/* Manter bordas coloridas com cores originais vibrantes */
body.dark-mode .border-purple-500 {
  border-color: #a855f7 !important; /* Roxo vibrante */
}

body.dark-mode .border-blue-500 {
  border-color: #3b82f6 !important; /* Azul vibrante */
}

body.dark-mode .border-yellow-500 {
  border-color: #eab308 !important; /* Amarelo vibrante */
}

body.dark-mode .border-green-500 {
  border-color: #22c55e !important; /* Verde vibrante */
}

body.dark-mode .border-red-500 {
  border-color: #ef4444 !important; /* Vermelho vibrante */
}

body.dark-mode .border-orange-500 {
  border-color: #f97316 !important; /* Laranja vibrante */
}

body.dark-mode .border-teal-500 {
  border-color: #14b8a6 !important; /* Teal vibrante */
}

body.dark-mode .border-cyan-500 {
  border-color: #06b6d4 !important; /* Ciano vibrante */
}

body.dark-mode .border-indigo-500 {
  border-color: #6366f1 !important; /* Indigo vibrante */
}

/* Textos dentro dos cards - FORÇAR BRANCO */
body.dark-mode .bg-purple-50 *,
body.dark-mode .bg-blue-50 *,
body.dark-mode .bg-yellow-50 *,
body.dark-mode .bg-green-50 *,
body.dark-mode .bg-red-50 *,
body.dark-mode .bg-orange-50 *,
body.dark-mode .bg-teal-50 *,
body.dark-mode .bg-cyan-50 *,
body.dark-mode .bg-indigo-50 * {
  color: var(--dark-text-primary) !important;
}

/* Títulos específicos dos cards (DATA E HORA, LOCAL, etc) */
body.dark-mode .text-purple-700,
body.dark-mode .text-blue-700,
body.dark-mode .text-yellow-700,
body.dark-mode .text-green-700,
body.dark-mode .text-red-700,
body.dark-mode .text-orange-700,
body.dark-mode .text-teal-700,
body.dark-mode .text-teal-900,
body.dark-mode .text-cyan-700,
body.dark-mode .text-indigo-700,
body.dark-mode .text-indigo-900 {
  color: var(--dark-text-primary) !important;
}

/* Ícones de calendário e relógio dentro dos inputs - BRANCO */
body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="time"]::-webkit-calendar-picker-indicator,
body.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2) !important;
}

/* Ícone da lua no botão dark-mode - PRETO */
#dark-mode-toggle i.fa-moon {
  color: #000000 !important;
}

/* Cards de seção gerais */
body.dark-mode .form-section,
body.dark-mode .field-group,
body.dark-mode .section-card {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

/* Preview de texto revisado (IA) */
body.dark-mode #texto-revisado,
body.dark-mode #texto-revisado-comentarios {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

/* Preview de imagem */
body.dark-mode #preview-imagem {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

/* Resumo de ações e contatos */
body.dark-mode #resumo-acoes,
body.dark-mode #resumo-contatos {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

/* Checkboxes e labels de ações/contatos */
body.dark-mode label.flex.items-start {
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode label.flex.items-start:hover {
  background-color: var(--dark-hover) !important;
}

/* Labels e títulos */
body.dark-mode .field-label,
body.dark-mode .section-title {
  color: var(--dark-text-primary) !important;
}

/* Descrições e textos secundários */
body.dark-mode .field-description,
body.dark-mode .help-text {
  color: var(--dark-text-muted) !important;
}

/* ===================================
   MÓDULO: RELATÓRIO
   ================================== */

body.dark-mode #bg-relatorio {
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode #grid-relatorio {
  background-color: #1f2937 !important;
}

body.dark-mode #grid-rel-font {
  color: white !important;
}

/* Badges de status no relatório */
body.dark-mode .badge-status-comunicada {
  background: #0d47a1 !important;
  color: #e3f2fd !important;  
}

body.dark-mode .badge-status-em_andamento {
  background: #5d4037 !important; 
  color: #fff59d !important;
}

body.dark-mode .badge-status-resolvida {
  background: #1b5e20 !important;
  color: #c8e6c9 !important;
}

body.dark-mode .badge-status-cancelada {
  background: #2c2c2c !important; 
  color: #e0e0e0 !important;
}

/* ===================================
   MÓDULO: CONFIGURAÇÕES
   ================================== */

body.dark-mode .aba-btn {
  background-color: #161d2f !important; 
}

body.dark-mode .aba-ativa {
  border-bottom-color: #667eea !important; 
}

body.dark-mode #config-classific-card {
  background-color: #1f2937 !important;
}

body.dark-mode .bg-gradient-to-br {
  background: linear-gradient(to bottom right, #0d1b2a, #1a237e) !important;
}

/* ===================================
   MÓDULO: USUÁRIOS
   ================================== */

body.dark-mode .usuarios-container {
  background-color: #374151;
}

body.dark-mode #usuarios-th th {
  background-color: #161d2f !important;
  color: white !important;
}

body.dark-mode .badge-info {
  background: #1e3a8a;
  color: #dbeafe;
}

body.dark-mode .badge-success {
  background: #064e3b; 
  color: #6ee7b7;      
}

body.dark-mode .badge-danger {
  background: #7f1d1d;
  color: #fca5a5;      
}

/* ===================================
   LOGIN
   ================================== */

body.dark-mode .login-box {
  background-color: #1f2937 !important;
}

body.dark-mode .error-message{
  background: #2b1212;
  border: 2px solid #7f1d1d;
  color: #f87171; 
}

/* Drop zone (área de arrastar imagem) */
body.dark-mode .drop-zone {
  border-color: var(--dark-border) !important;
  background-color: transparent !important;
}

body.dark-mode .drop-zone:hover,
body.dark-mode .drop-zone.dragging {
  background-color: rgba(99, 102, 241, 0.1) !important; /* Indigo 10% opacity */
  border-color: #6366f1 !important; /* Indigo vibrante */
}

/* Ícone de nuvem e textos dentro do drop-zone */
body.dark-mode .drop-zone .fa-cloud-upload-alt,
body.dark-mode .drop-zone .text-indigo-600,
body.dark-mode .drop-zone .text-indigo-900,
body.dark-mode .drop-zone .text-indigo-700 {
  color: #6366f1 !important; /* Azul do botão Selecionar Arquivo */
}

/* ===================================
   CORREÇÕES DE CONTRASTE
   ================================== */

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--dark-text-primary) !important;
}

body.dark-mode p,
body.dark-mode span,
body.dark-mode div {
  color: var(--dark-text-secondary);
}

body.dark-mode label {
  color: var(--dark-text-primary) !important;
}

/* ===================================
   PRINT MODE (desabilitar dark mode)
   ================================== */

@media print {
  body.dark-mode {
    background-color: white !important;
    color: black !important;
  }
  
  body.dark-mode * {
    background-color: white !important;
    color: black !important;
  }
  
  #dark-mode-toggle {
    display: none !important;
  }
}

/* ===================================
   SCROLLBAR OVERRIDE FINAL - MÁXIMA PRIORIDADE
   Colocado no FINAL do arquivo para garantir precedência
   ================================== */

/* Sobrescrever TUDO do m2e-theme.css */
body.dark-mode::-webkit-scrollbar,
body.dark-mode *::-webkit-scrollbar {
  width: 12px !important;
  height: 12px !important;
}

body.dark-mode::-webkit-scrollbar-track,
body.dark-mode *::-webkit-scrollbar-track {
  background: #161d2f !important;
  background-color: #161d2f !important;
  border-radius: 0 !important;
}

body.dark-mode::-webkit-scrollbar-thumb,
body.dark-mode *::-webkit-scrollbar-thumb {
  background: #374151 !important;
  background-color: #374151 !important;
  border-radius: 6px !important;
}

body.dark-mode::-webkit-scrollbar-thumb:hover,
body.dark-mode *::-webkit-scrollbar-thumb:hover {
  background: #4b5563 !important;
  background-color: #4b5563 !important;
}

/* Firefox */
body.dark-mode,
body.dark-mode * {
  scrollbar-width: thin !important;
  scrollbar-color: #374151 #161d2f !important;
}

/* ===================================
   DARK MODE TOGGLE BUTTON
   ================================== */

#dark-mode-toggle {
  background: rgba(99, 102, 241, 0.1);
  border: 2px solid rgba(99, 102, 241, 0.3);
  color: #6366f1;
  border-radius: 8px;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#dark-mode-toggle:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: #6366f1;
  transform: scale(1.05);
}

body.dark-mode #dark-mode-toggle {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}

body.dark-mode #dark-mode-toggle:hover {
  background: rgba(251, 191, 36, 0.2);
  border-color: #fbbf24;
}

/* Responsividade do botão */
@media (max-width: 640px) {
  #dark-mode-toggle {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
  }
}

/* ===================================
   INPUTS DE SENHA NO MODO ESCURO
   ================================== */

body.dark-mode input[type="password"] {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

body.dark-mode input[type="password"]::placeholder {
  color: var(--dark-text-secondary) !important;
}

body.dark-mode input[type="password"]:focus {
  background-color: var(--dark-bg-tertiary) !important;
  border-color: #6366f1 !important;
  color: var(--dark-text-primary) !important;
}

/* Ícone de olho do input de senha - modo escuro */
body.dark-mode .fa-eye,
body.dark-mode .fa-eye-slash,
body.dark-mode input[type="password"] ~ i,
body.dark-mode input[type="password"] ~ button i,
body.dark-mode input[type="password"] + i,
body.dark-mode input[type="password"] + button i {
  color: #ffffff !important;
}

/* Container de input com ícone de senha - modo escuro */
body.dark-mode .password-input-container i,
body.dark-mode .input-group i.fa-eye,
body.dark-mode .input-group i.fa-eye-slash {
  color: #ffffff !important;
}

/* ===================================
   TELA DE ESQUECI MINHA SENHA
   ================================== */

body.dark-mode .login-box {
  background-color: var(--dark-bg-secondary) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .login-header h1 {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .login-header p {
  color: var(--dark-text-secondary) !important;
}

body.dark-mode .instrucao {
  color: var(--dark-text-secondary) !important;
}

body.dark-mode .form-group label {
  color: var(--dark-text-primary) !important;
}

body.dark-mode .voltar-login a {
  color: #6ee7f7 !important;
}

body.dark-mode .voltar-login a:hover {
  color: #a3e635 !important;
}

body.dark-mode .success-message {
  background: #052e16 !important;
  border-color: #166534 !important;
  color: #86efac !important;
}

body.dark-mode .error-message {
  background: #1a0a0a !important;
  border-color: #7f1d1d !important;
  color: #fca5a5 !important;
}

body.dark-mode .toggle-password {
  color: var(--dark-text-secondary) !important;
}

body.dark-mode .toggle-password:hover {
  color: #6ee7f7 !important;
}

/* Link "Esqueci minha senha" no dark mode */
body.dark-mode .link-esqueci-senha {
  color: #6ee7f7 !important;
}

body.dark-mode .link-esqueci-senha:hover {
  color: #a3e635 !important;
}