/* =========================================================
   DARK MODE — html.dark overrides
   ========================================================= */

/* Transição suave nos elementos principais */
html.dark body,
html.dark header,
html.dark aside,
html.dark footer,
html.dark main,
html.dark section,
html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
    transition: background-color 0.25s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ---- Body ---- */
html.dark body {
    background-color: #0f172a !important;
    color: #e2e8f0;
}

/* ---- Header ---- */
html.dark header {
    background-color: #1e293b !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

/* ---- Sidebar (admin) ---- */
html.dark aside {
    background-color: #1e293b !important;
}
html.dark aside .text-gray-400 { color: #475569 !important; }
html.dark aside a { color: #e2e8f0 !important; }
html.dark aside a i { color: #e2e8f0 !important; }
html.dark aside a:hover,
html.dark aside .hover\:bg-orange-50:hover { background-color: #2d1606 !important; color: #CB5024 !important; }
html.dark aside a:hover i { color: #CB5024 !important; }
html.dark aside .bg-orange-50 { background-color: #2d1606 !important; }
html.dark aside .text-primary { color: #CB5024 !important; }

/* ---- Footer ---- */
html.dark footer {
    background-color: #1e293b !important;
    border-top-color: #334155 !important;
}
html.dark footer .text-gray-800 { color: #f1f5f9 !important; }
html.dark footer .text-gray-500 { color: #64748b !important; }
html.dark footer .text-gray-400 { color: #475569 !important; }
html.dark footer .bg-gray-100 { background-color: #334155 !important; }
html.dark footer .border-gray-100 { border-color: #334155 !important; }

/* ---- Fundos gerais ---- */
html.dark .bg-white { background-color: #1e293b !important; }
html.dark .bg-gray-50 { background-color: #162032 !important; }
html.dark .bg-gray-100 { background-color: #0d1829 !important; }
html.dark .bg-gray-900 { background-color: #020811 !important; }

/* ---- Textos ---- */
html.dark .text-gray-900 { color: #f8fafc !important; }
html.dark .text-gray-800 { color: #f1f5f9 !important; }
html.dark .text-gray-700 { color: #e2e8f0 !important; }
html.dark .text-gray-600 { color: #94a3b8 !important; }
html.dark .text-gray-500 { color: #64748b !important; }
html.dark .text-gray-400 { color: #475569 !important; }
html.dark .text-gray-300 { color: #334155 !important; }

/* ---- Bordas ---- */
html.dark .border-gray-100 { border-color: #2d3a4e !important; }
html.dark .border-gray-200 { border-color: #334155 !important; }
html.dark .border-gray-300 { border-color: #475569 !important; }
html.dark .divide-gray-100 > * + * { border-color: #2d3a4e !important; }
html.dark .divide-gray-200 > * + * { border-color: #334155 !important; }

/* ---- Sombras ---- */
html.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important; }
html.dark .shadow    { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important; }
html.dark .shadow-md { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6) !important; }
html.dark .shadow-lg { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6) !important; }
html.dark .shadow-xl { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7) !important; }

/* ---- Inputs e formulários ---- */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
html.dark select,
html.dark textarea {
    background-color: #162032 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b !important; }
html.dark label { color: #cbd5e1 !important; }

/* ---- Badges de ícones do dashboard ---- */
html.dark .bg-orange-100 { background-color: #3d1a08 !important; }
html.dark .bg-blue-100   { background-color: #0c1a3d !important; }
html.dark .bg-green-100  { background-color: #0a2e1a !important; }
html.dark .bg-purple-100 { background-color: #1e0a3d !important; }
html.dark .bg-indigo-100 { background-color: #0a1a3d !important; }
html.dark .bg-red-100    { background-color: #3d0a0a !important; }
html.dark .bg-yellow-100 { background-color: #2e1e00 !important; }
html.dark .bg-amber-100  { background-color: #2e1a00 !important; }

/* ---- Gradientes (cards de receita no dashboard) ---- */
html.dark .from-orange-50 { --tw-gradient-from: #2d1606 var(--tw-gradient-from-position) !important; }
html.dark .to-white       { --tw-gradient-to: #1e293b var(--tw-gradient-to-position) !important; }
html.dark .border-orange-100 { border-color: #3d1a08 !important; }

/* ---- Tabelas ---- */
html.dark thead tr { background-color: #162032 !important; }
html.dark th { color: #94a3b8 !important; border-color: #334155 !important; }
html.dark td { border-color: #2d3a4e !important; color: #cbd5e1 !important; }
html.dark tbody tr:hover { background-color: #162032 !important; }
html.dark .even\:bg-gray-50:nth-child(even) { background-color: #162032 !important; }

/* ---- Breadcrumb (curso-player) ---- */
html.dark .border-b.border-gray-200.shadow-sm { border-color: #334155 !important; }

/* ---- Aula ativa (curso-player) ---- */
html.dark .aula-item-active { background-color: #2d1606 !important; }

/* ---- Módulos do curso-player ---- */
html.dark button.hover\:bg-gray-50:hover { background-color: #162032 !important; }

/* ---- Botões de navegação prev/next ---- */
html.dark a.hover\:bg-orange-50:hover { background-color: #2d1606 !important; }
html.dark a.border-gray-200 { border-color: #334155 !important; }

/* ---- Alertas e mensagens ---- */
html.dark .bg-green-100 { background-color: #0a2e1a !important; }
html.dark .text-green-800 { color: #4ade80 !important; }
html.dark .border-green-400 { border-color: #166534 !important; }
html.dark .bg-blue-50 { background-color: #0c1a3d !important; }
html.dark .text-blue-700 { color: #60a5fa !important; }
html.dark .border-blue-100 { border-color: #0c1a3d !important; }
html.dark .bg-red-50 { background-color: #3d0a0a !important; }
html.dark .text-red-700 { color: #f87171 !important; }
html.dark .border-red-200 { border-color: #7f1d1d !important; }
html.dark .text-amber-600 { color: #fbbf24 !important; }

/* ---- Contrato overlay ---- */
html.dark .border-b.border-gray-200 { border-color: #334155 !important; }

/* ---- Select nos forms ---- */
html.dark option { background-color: #1e293b; color: #e2e8f0; }

/* ---- Links de navegação do header ---- */
html.dark header nav a:hover { color: #CB5024 !important; }

/* ---- Links rápidos do footer ---- */
html.dark footer a:hover { color: #CB5024 !important; }

/* ---- Redes sociais do footer (ícones) ---- */
html.dark footer a.rounded-full:hover { background-color: #CB5024 !important; color: #ffffff !important; }
html.dark footer a.rounded-full:hover svg,
html.dark footer a.rounded-full:hover svg * { stroke: #ffffff !important; color: #ffffff !important; }

/* ---- Logo no header ---- */
html.dark header img { filter: brightness(0.85) !important; }

/* ---- FAQ (landing-page) ---- */
html.dark details {
    background-color: #1e293b !important;
    border-color: #2d3a4e !important;
}
html.dark details summary {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}
html.dark details summary:hover,
html.dark details summary.group-hover\:bg-gray-50 {
    background-color: #162032 !important;
}
html.dark details[open] summary {
    border-bottom-color: #2d3a4e !important;
}
html.dark details > div {
    background-color: #162032 !important;
    border-top-color: #2d3a4e !important;
    color: #cbd5e1 !important;
}
html.dark details > div p {
    color: #cbd5e1 !important;
}
html.dark details summary span {
    color: #f1f5f9 !important;
}
html.dark details summary svg {
    color: #94a3b8 !important;
}

/* ---- Botão toggle dark mode ---- */
#dark-mode-toggle {
    transition: transform 0.2s ease, background-color 0.2s ease;
}
#dark-mode-toggle:hover { transform: scale(1.1); }