/**
 * Styles critiques pour l'initialisation du thème
 * Ces styles sont chargés en priorité et empêchent tout flash
 */

/* Masquer le contenu initial pour éviter tout flash */
html.no-js {
    visibility: hidden;
}

/* Styles ultra-prioritaires pour le thème sombre */
html.theme-dark,
html.theme-dark body {
    background-color: #2a3042 !important;
    color: #e9ecef !important;
}

html.theme-dark .topnav,
html.theme-dark #page-topbar,
html.theme-dark .navbar-header,
html.theme-dark .app-search,
html.theme-dark .dropdown-menu {
    background-color: #2a3042 !important;
    border-color: #32394e !important;
}

html.theme-dark .vertical-menu,
html.theme-dark #sidebar-menu,
html.theme-dark #sidebar-menu .mm-active {
    background-color: #2a3042 !important;
    color: #e9ecef !important;
}

html.theme-dark #sidebar-menu .menu-title,
html.theme-dark #sidebar-menu .menu-item {
    color: #a6b0cf !important;
}

html.theme-dark .card {
    background-color: #32394e !important;
    border-color: #32394e !important;
}

html.theme-dark .form-control,
html.theme-dark .form-select {
    background-color: #2e3446 !important;
    border-color: #32394e !important;
    color: #e9ecef !important;
}

/* Style spécifique pour éviter le flash initial en mode sombre */
html.theme-dark body.initial-load {
    visibility: hidden;
}

html.theme-dark body {
    visibility: visible;
    animation: fadeIn 0.3s ease forwards;
}

/* Force les bonnes couleurs pour le page-topbar selon le thème */
body[data-layout-mode="light"] #page-topbar,
body:not([data-layout-mode="dark"]) #page-topbar {
    box-shadow: 0 .25rem .75rem rgba(18,38,63,.08) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Style spécifique pour topbar sombre même en mode clair */
body[data-topbar="dark"] #page-topbar, 
body[data-topbar="dark"] .navbar-brand-box {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

body[data-layout-mode="dark"] #page-topbar {
    background-color: #282f36 !important;
    border-color: #282f36 !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Fix pour les transitions entre les deux thèmes */
#page-topbar {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInContent {
    from { opacity: 0; }
    to { opacity: 1; }
}

body.theme-ready {
    animation: fadeInContent 0.2s ease-in-out;
}