/* ============================================
   CEH - DARK MODE STYLESHEET
   Sistema de Modo Escuro Completo
   ============================================ */

/* Variáveis de Cores - Light Mode (Padrão) */
:root {
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f3f4f6;
    --bg-hover: #f9fafb;
    
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    /* Cards e Componentes */
    --card-bg: #ffffff;
    --card-border: #e5e7eb;
    
    /* Inputs e Forms */
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-text: #111827;
    --input-placeholder: #9ca3af;
    
    /* Alerts e Notificações */
    --alert-success-bg: #f0fdf4;
    --alert-success-border: #bbf7d0;
    --alert-success-text: #166534;
    
    --alert-error-bg: #fef2f2;
    --alert-error-border: #fecaca;
    --alert-error-text: #991b1b;
    
    --alert-info-bg: #eff6ff;
    --alert-info-border: #bfdbfe;
    --alert-info-text: #1e40af;
    
    --alert-warning-bg: #fefce8;
    --alert-warning-border: #fef08a;
    --alert-warning-text: #854d0e;
}

/* Variáveis de Cores - Dark Mode */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-hover: #475569;
    
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    
    --border-color: #334155;
    --border-light: #475569;
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
    
    /* Cards e Componentes */
    --card-bg: #1e293b;
    --card-border: #334155;
    
    /* Inputs e Forms */
    --input-bg: #334155;
    --input-border: #475569;
    --input-text: #f1f5f9;
    --input-placeholder: #64748b;
    
    /* Alerts e Notificações */
    --alert-success-bg: #064e3b;
    --alert-success-border: #059669;
    --alert-success-text: #d1fae5;
    
    --alert-error-bg: #7f1d1d;
    --alert-error-border: #dc2626;
    --alert-error-text: #fecaca;
    
    --alert-info-bg: #1e3a8a;
    --alert-info-border: #3b82f6;
    --alert-info-text: #dbeafe;
    
    --alert-warning-bg: #78350f;
    --alert-warning-border: #f59e0b;
    --alert-warning-text: #fef3c7;
}

/* ============================================
   APLICAÇÃO DO DARK MODE
   ============================================ */

/* Background Principal */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Headers e Navigation */
header {
    background-color: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

/* Cards e Containers Brancos */
.bg-white {
    background-color: var(--card-bg) !important;
}

.bg-gray-50 {
    background-color: var(--bg-tertiary) !important;
}

/* Textos */
.text-gray-900 {
    color: var(--text-primary) !important;
}

.text-gray-700 {
    color: var(--text-secondary) !important;
}

.text-gray-600,
.text-gray-500 {
    color: var(--text-tertiary) !important;
}

.text-gray-400 {
    color: var(--text-tertiary) !important;
    opacity: 0.8;
}

/* Bordas */
.border-gray-200,
.border-gray-300 {
    border-color: var(--border-color) !important;
}

.border-gray-100 {
    border-color: var(--border-light) !important;
}

/* Hover States */
.hover\:bg-gray-50:hover {
    background-color: var(--bg-hover) !important;
}

.hover\:bg-gray-100:hover {
    background-color: var(--bg-hover) !important;
}

/* Inputs e Forms */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="file"],
textarea,
select {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder) !important;
}

/* Alerts e Mensagens */
.bg-green-50 {
    background-color: var(--alert-success-bg) !important;
}

.border-green-200 {
    border-color: var(--alert-success-border) !important;
}

.text-green-700 {
    color: var(--alert-success-text) !important;
}

.bg-red-50 {
    background-color: var(--alert-error-bg) !important;
}

.border-red-200 {
    border-color: var(--alert-error-border) !important;
}

.text-red-700 {
    color: var(--alert-error-text) !important;
}

.bg-blue-50 {
    background-color: var(--alert-info-bg) !important;
}

.border-blue-200 {
    border-color: var(--alert-info-border) !important;
}

.text-blue-700,
.text-blue-600 {
    color: var(--alert-info-text) !important;
}

.bg-yellow-50 {
    background-color: var(--alert-warning-bg) !important;
}

.border-yellow-200 {
    border-color: var(--alert-warning-border) !important;
}

.text-yellow-700 {
    color: var(--alert-warning-text) !important;
}

/* Tabelas */
table thead {
    background-color: var(--bg-tertiary) !important;
}

table tbody tr {
    border-bottom: 1px solid var(--border-color);
}

table tbody tr:hover {
    background-color: var(--bg-hover) !important;
}

/* Shadows */
.shadow {
    box-shadow: var(--shadow) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

/* Modal e Overlays */
[data-theme="dark"] .bg-gray-600 {
    background-color: rgba(15, 23, 42, 0.8) !important;
}

/* Status Badges - Manter cores vibrantes */
[data-theme="dark"] .bg-yellow-100 {
    background-color: #713f12 !important;
}

[data-theme="dark"] .text-yellow-800 {
    color: #fef08a !important;
}

[data-theme="dark"] .bg-blue-100 {
    background-color: #1e3a8a !important;
}

[data-theme="dark"] .text-blue-800 {
    color: #bfdbfe !important;
}

[data-theme="dark"] .bg-green-100 {
    background-color: #064e3b !important;
}

[data-theme="dark"] .text-green-800 {
    color: #bbf7d0 !important;
}

[data-theme="dark"] .bg-purple-100 {
    background-color: #581c87 !important;
}

[data-theme="dark"] .text-purple-800 {
    color: #e9d5ff !important;
}

[data-theme="dark"] .bg-orange-100 {
    background-color: #7c2d12 !important;
}

[data-theme="dark"] .text-orange-500,
[data-theme="dark"] .text-orange-600 {
    color: #fed7aa !important;
}

/* Botão de Dark Mode Toggle */
.dark-mode-toggle {
    position: relative;
    width: 60px;
    height: 30px;
    background-color: #cbd5e1;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
}

[data-theme="dark"] .dark-mode-toggle {
    background-color: #3b82f6;
}

.dark-mode-toggle-slider {
    width: 22px;
    height: 22px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .dark-mode-toggle-slider {
    transform: translateX(30px);
}

.dark-mode-toggle-icon {
    font-size: 12px;
}

[data-theme="light"] .dark-mode-toggle-icon.sun {
    display: block;
    color: #f59e0b;
}

[data-theme="light"] .dark-mode-toggle-icon.moon {
    display: none;
}

[data-theme="dark"] .dark-mode-toggle-icon.sun {
    display: none;
}

[data-theme="dark"] .dark-mode-toggle-icon.moon {
    display: block;
    color: #fbbf24;
}

/* Animação suave de transição */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Exceções para elementos que não devem ter transição */
button,
a,
input,
select,
textarea {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* ============================================
   AJUSTES ESPECÍFICOS PARA MANTER LEGIBILIDADE
   ============================================ */

/* Manter botões coloridos legíveis */
[data-theme="dark"] .bg-blue-600 {
    background-color: #2563eb !important;
}

[data-theme="dark"] .bg-red-600 {
    background-color: #dc2626 !important;
}

[data-theme="dark"] .bg-green-600 {
    background-color: #16a34a !important;
}

[data-theme="dark"] .bg-purple-600 {
    background-color: #9333ea !important;
}

/* Links permanecem visíveis */
[data-theme="dark"] a.text-blue-600 {
    color: #60a5fa !important;
}

/* Ícones coloridos mantêm cor */
[data-theme="dark"] .text-yellow-400,
[data-theme="dark"] .text-yellow-500 {
    color: #fbbf24 !important;
}

[data-theme="dark"] .text-blue-400,
[data-theme="dark"] .text-blue-500 {
    color: #60a5fa !important;
}

[data-theme="dark"] .text-green-400,
[data-theme="dark"] .text-green-500 {
    color: #34d399 !important;
}

[data-theme="dark"] .text-purple-400 {
    color: #c084fc !important;
}

/* Divisores e Separadores */
hr,
.divide-y > * {
    border-color: var(--border-color) !important;
}

/* Select e Dropdowns */
select option {
    background-color: var(--input-bg);
    color: var(--input-text);
}

/* Scrollbars (Chrome, Edge, Safari) */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
}

/* Placeholder para file inputs */
[data-theme="dark"] input[type="file"]::file-selector-button {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] input[type="file"]::file-selector-button:hover {
    background-color: var(--bg-hover);
}