/* ==========================================================================
   Custom Styles & Adaptive Theme System (Light / Dark Mode)
   Sistema de Saída Escolar Inteligente (APP SEI)
   ========================================================================== */

/* Transições suaves de tema */
html, body {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* ==========================================
   SCROLLBARS ADAPTATIVOS
   ========================================== */
/* Scrollbar estilizado - Modo Escuro (padrão) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #090d16;
}
::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* Scrollbar estilizado - Modo Claro */
html:not(.dark) ::-webkit-scrollbar-track,
html.light ::-webkit-scrollbar-track {
    background: #f1f5f9;
}
html:not(.dark) ::-webkit-scrollbar-thumb,
html.light ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover,
html.light ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Scrollbar fina para navegação interna */
.scrollbar-thin::-webkit-scrollbar {
    width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 9999px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

html:not(.dark) .scrollbar-thin::-webkit-scrollbar-thumb,
html.light .scrollbar-thin::-webkit-scrollbar-thumb {
    background: #cbd5e1;
}
html:not(.dark) .scrollbar-thin::-webkit-scrollbar-thumb:hover,
html.light .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ==========================================
   ANIMAÇÕES E TRANSIÇÕES
   ========================================== */
.fade-in {
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   SIDEBAR RECOLHIDA (COLLAPSED)
   ========================================== */
html.sidebar-is-collapsed #app-sidebar,
#app-sidebar.sidebar-collapsed {
    width: 5rem !important; /* 80px */
}

html.sidebar-is-collapsed #app-sidebar .sidebar-text,
#app-sidebar.sidebar-collapsed .sidebar-text {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    visibility: hidden !important;
}

html.sidebar-is-collapsed #app-sidebar nav a,
#app-sidebar.sidebar-collapsed nav a {
    justify-content: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* ==========================================
   CORREÇÃO DE CONTRASTE SELECT & DROPDOWNS
   (Evita opções brancas em fundo branco ou texto invisível)
   ========================================== */
select option,
select optgroup {
    background-color: #090d16 !important;
    color: #f8fafc !important;
}

html:not(.dark) select option,
html.light select option,
html:not(.dark) select optgroup,
html.light select optgroup {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* ==========================================
   CRACHÁS E CARTÕES FÍSICOS DE IMPRESSÃO
   (Preserva texto escuro no cartão branco mesmo no modo escuro)
   ========================================== */
.badge-card {
    background-color: #ffffff !important;
    color: #0f172a !important;
}
.badge-card h1,
.badge-card h2,
.badge-card h3,
.badge-card h4,
.badge-card p,
.badge-card span:not([class*="text-"]):not([class*="bg-slate-900"]),
.badge-card .text-slate-900 {
    color: #0f172a !important;
}
.badge-card .text-slate-800 {
    color: #1e293b !important;
}
.badge-card .text-slate-500 {
    color: #64748b !important;
}

/* ==========================================
   PROTEÇÃO DE HOVER NO MODO ESCURO
   (Evita que o fundo fique claro sobre texto branco ao passar o mouse)
   ========================================== */
html.dark .hover\:bg-slate-100:hover,
html:not(.light) .hover\:bg-slate-100:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

html.dark .hover\:bg-slate-200:hover,
html:not(.light) .hover\:bg-slate-200:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

/* ==========================================
   DESIGN TOKENS PARA MODO CLARO (LIGHT MODE)
   ========================================== */

/* Superfícies e Cards */
html:not(.dark) .bg-slate-900,
html.light .bg-slate-900 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

html:not(.dark) .bg-slate-950,
html.light .bg-slate-950 {
    background-color: #f8fafc !important;
}

html:not(.dark) .bg-slate-950\/60,
html:not(.dark) .bg-slate-950\/80,
html:not(.dark) .bg-slate-950\/85,
html:not(.dark) .bg-slate-950\/90,
html:not(.dark) .bg-slate-950\/95,
html.light .bg-slate-950\/60,
html.light .bg-slate-950\/80,
html.light .bg-slate-950\/85,
html.light .bg-slate-950\/90,
html.light .bg-slate-950\/95 {
    background-color: rgba(248, 250, 252, 0.95) !important;
}

/* Bordas e Divisores */
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-800\/80,
html:not(.dark) .border-slate-800\/90,
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-700\/80,
html:not(.dark) .border-slate-900,
html:not(.dark) .divide-slate-800 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]),
html.light .border-slate-800,
html.light .border-slate-800\/80,
html.light .border-slate-800\/90,
html.light .border-slate-700,
html.light .border-slate-700\/80,
html.light .border-slate-900,
html.light .divide-slate-800 > :not([hidden]) ~ :not([hidden]),
html.light .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]) {
    border-color: #e2e8f0 !important;
}

/* Botões Secundários, Badges Neutros e Caixas de Itens */
html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-800\/40,
html:not(.dark) .bg-slate-800\/60,
html:not(.dark) .bg-slate-800\/80,
html:not(.dark) .bg-slate-850,
html.light .bg-slate-800,
html.light .bg-slate-800\/40,
html.light .bg-slate-800\/60,
html.light .bg-slate-800\/80,
html.light .bg-slate-850 {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

html:not(.dark) .hover\:bg-slate-800:hover,
html:not(.dark) .hover\:bg-slate-700:hover,
html.light .hover\:bg-slate-800:hover,
html.light .hover\:bg-slate-700:hover {
    background-color: #e2e8f0 !important;
}

html:not(.dark) .hover\:bg-slate-800\/40:hover,
html:not(.dark) .hover\:bg-slate-800\/60:hover,
html:not(.dark) .hover\:bg-slate-850:hover,
html.light .hover\:bg-slate-800\/40:hover,
html.light .hover\:bg-slate-800\/60:hover,
html.light .hover\:bg-slate-850:hover {
    background-color: #f8fafc !important;
}

/* Inputs, Selects e Textareas */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html:not(.dark) select,
html:not(.dark) textarea,
html.light input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
html.light select,
html.light textarea {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder,
html.light input::placeholder,
html.light textarea::placeholder {
    color: #94a3b8 !important;
}

/* Cabeçalhos de Tabelas */
html:not(.dark) thead,
html:not(.dark) th,
html.light thead,
html.light th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}

/* Tipografia e Textos em Modo Claro */
html:not(.dark) h1:not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-blue-"]):not([class*="text-indigo-"]):not([class*="text-rose-"]):not([class*="text-cyan-"]):not([class*="text-purple-"]):not([class*="text-teal-"]),
html:not(.dark) h2:not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-blue-"]):not([class*="text-indigo-"]):not([class*="text-rose-"]):not([class*="text-cyan-"]):not([class*="text-purple-"]):not([class*="text-teal-"]),
html:not(.dark) h3:not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-blue-"]):not([class*="text-indigo-"]):not([class*="text-rose-"]):not([class*="text-cyan-"]):not([class*="text-purple-"]):not([class*="text-teal-"]),
html:not(.dark) h4:not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-blue-"]):not([class*="text-indigo-"]):not([class*="text-rose-"]):not([class*="text-cyan-"]):not([class*="text-purple-"]):not([class*="text-teal-"]),
html.light h1:not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-blue-"]):not([class*="text-indigo-"]):not([class*="text-rose-"]):not([class*="text-cyan-"]):not([class*="text-purple-"]):not([class*="text-teal-"]),
html.light h2:not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-blue-"]):not([class*="text-indigo-"]):not([class*="text-rose-"]):not([class*="text-cyan-"]):not([class*="text-purple-"]):not([class*="text-teal-"]),
html.light h3:not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-blue-"]):not([class*="text-indigo-"]):not([class*="text-rose-"]):not([class*="text-cyan-"]):not([class*="text-purple-"]):not([class*="text-teal-"]),
html.light h4:not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-blue-"]):not([class*="text-indigo-"]):not([class*="text-rose-"]):not([class*="text-cyan-"]):not([class*="text-purple-"]):not([class*="text-teal-"]) {
    color: #0f172a !important;
}

/* No Modo Claro: todos os textos brancos e neutros em superfícies gerais tornam-se escuros */
html:not(.dark) .text-white,
html.light .text-white,
html:not(.dark) .text-slate-100,
html.light .text-slate-100,
html:not(.dark) .text-slate-200,
html.light .text-slate-200 {
    color: #0f172a !important;
}

/* Proteção contra textos que ficam brancos no hover em superfícies claras */
html:not(.dark) .hover\:text-white:not(.bg-blue-600):not(.bg-blue-700):not(.bg-indigo-600):not(.bg-indigo-700):not(.bg-emerald-600):not(.bg-emerald-700):not(.bg-red-600):not(.bg-rose-600):not(.bg-purple-600):not(.bg-teal-600):hover,
html.light .hover\:text-white:not(.bg-blue-600):not(.bg-blue-700):not(.bg-indigo-600):not(.bg-indigo-700):not(.bg-emerald-600):not(.bg-emerald-700):not(.bg-red-600):not(.bg-rose-600):not(.bg-purple-600):not(.bg-teal-600):hover {
    color: #0f172a !important;
}

html:not(.dark) .text-slate-300,
html.light .text-slate-300 {
    color: #334155 !important;
}

html:not(.dark) .text-slate-400,
html.light .text-slate-400 {
    color: #64748b !important;
}

/* Modais e Diálogos Flutuantes */
html:not(.dark) .bg-slate-950\/85,
html:not(.dark) .bg-slate-950\/80,
html:not(.dark) .bg-slate-950\/90,
html.light .bg-slate-950\/85,
html.light .bg-slate-950\/80,
html.light .bg-slate-950\/90 {
    background-color: rgba(15, 23, 42, 0.6) !important;
}

/* Preserva texto BRANCO estrito nos botões, badges e fundos com cores de destaque */
html:not(.dark) .bg-blue-600,
html:not(.dark) .bg-blue-700,
html:not(.dark) .bg-indigo-600,
html:not(.dark) .bg-indigo-700,
html:not(.dark) .bg-emerald-600,
html:not(.dark) .bg-emerald-700,
html:not(.dark) .bg-red-600,
html:not(.dark) .bg-rose-600,
html:not(.dark) .bg-purple-600,
html:not(.dark) .bg-cyan-600,
html:not(.dark) .bg-teal-600,
html:not(.dark) [class*="from-blue-"],
html:not(.dark) [class*="from-indigo-"],
html:not(.dark) [class*="from-emerald-"],
html:not(.dark) [class*="from-red-"],
html:not(.dark) [class*="from-rose-"],
html:not(.dark) [class*="from-purple-"],
html:not(.dark) [class*="from-cyan-"],
html:not(.dark) [class*="from-teal-"],
html.light .bg-blue-600,
html.light .bg-blue-700,
html.light .bg-indigo-600,
html.light .bg-indigo-700,
html.light .bg-emerald-600,
html.light .bg-emerald-700,
html.light .bg-red-600,
html.light .bg-rose-600,
html.light .bg-purple-600,
html.light .bg-cyan-600,
html.light .bg-teal-600,
html.light [class*="from-blue-"],
html.light [class*="from-indigo-"],
html.light [class*="from-emerald-"],
html.light [class*="from-red-"],
html.light [class*="from-rose-"],
html.light [class*="from-purple-"],
html.light [class*="from-cyan-"],
html.light [class*="from-teal-"] {
    color: #ffffff !important;
}

html:not(.dark) .bg-blue-600 *,
html:not(.dark) .bg-blue-700 *,
html:not(.dark) .bg-indigo-600 *,
html:not(.dark) .bg-indigo-700 *,
html:not(.dark) .bg-emerald-600 *,
html:not(.dark) .bg-emerald-700 *,
html:not(.dark) .bg-red-600 *,
html:not(.dark) .bg-rose-600 *,
html:not(.dark) .bg-purple-600 *,
html:not(.dark) .bg-cyan-600 *,
html:not(.dark) .bg-teal-600 *,
html:not(.dark) [class*="from-blue-"] *,
html:not(.dark) [class*="from-indigo-"] *,
html:not(.dark) [class*="from-emerald-"] *,
html:not(.dark) [class*="from-red-"] *,
html:not(.dark) [class*="from-rose-"] *,
html:not(.dark) [class*="from-purple-"] *,
html:not(.dark) [class*="from-cyan-"] *,
html:not(.dark) [class*="from-teal-"] *,
html.light .bg-blue-600 *,
html.light .bg-blue-700 *,
html.light .bg-indigo-600 *,
html.light .bg-indigo-700 *,
html.light .bg-emerald-600 *,
html.light .bg-emerald-700 *,
html.light .bg-red-600 *,
html.light .bg-rose-600 *,
html.light .bg-purple-600 *,
html.light .bg-cyan-600 *,
html.light .bg-teal-600 *,
html.light [class*="from-blue-"] *,
html.light [class*="from-indigo-"] *,
html.light [class*="from-emerald-"] *,
html.light [class*="from-red-"] *,
html.light [class*="from-rose-"] *,
html.light [class*="from-purple-"] *,
html.light [class*="from-cyan-"] *,
html.light [class*="from-teal-"] * {
    color: #ffffff !important;
}

/* Preserva texto escuro nos elementos com fundo amarelo/âmbar */
html:not(.dark) .bg-amber-500,
html:not(.dark) .bg-amber-400,
html:not(.dark) .bg-amber-500 *,
html:not(.dark) .bg-amber-400 *,
html.light .bg-amber-500,
html.light .bg-amber-400,
html.light .bg-amber-500 *,
html.light .bg-amber-400 * {
    color: #020617 !important;
}