:root {
    --bg-body: color-mix(in oklab, #0a0e14 100%, transparent);

    /* anti fouc */
    --bg-primary: #1A1D23;
    --bg-secondary: #2B3139;
    --text-primary: #EAECEF;
    --accent-cyan: #00E5FF;
}

/* 1. HTML deve ser sempre visível e com fundo escuro para evitar o Flash Branco */
html {
    background-color: var(--bg-primary) !important;
    opacity: 1 !important; /* CORREÇÃO: Removemos o opacity: 0 daqui */
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
}

/* 2. Esconde apenas o CONTEÚDO principal, não a página inteira */
/* Usamos :not(.ready) para garantir que tudo inicie invisível exceto o loading screen */
html:not(.ready) #app-shell,
html:not(.ready) #main-navbar,
html:not(.ready) #favorites-sidebar,
html:not(.ready) #site-footer {
    opacity: 0;
    visibility: hidden; /* Garante que não interfira no layout enquanto carrega */
}
html {
    background-color: var(--bg-body) !important;
}

body {
    background-color: var(--bg-body) !important;
    height: 100%;
    margin: 0;
    overscroll-behavior-y: none;
}

#app-shell {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}


body.turbo-loading {
    cursor: wait;
}

#initial-loading-screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #0a0e14 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.8s ease, visibility 0.8s ease !important;
}

#initial-loading-screen.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* 3. Transição suave quando a classe .ready for adicionada pelo JS */
#app-shell, #main-navbar, #favorites-sidebar, #site-footer {
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    opacity: 1;
    visibility: visible;
}

/* Força navbar a aparecer em desktop (Layout Shift Fix) */
@media (min-width: 992px) {
    .navbar-collapse {
        display: flex !important;
        visibility: visible !important;
        flex-basis: auto !important;
    }
}

/* Estado inicial sem animação para evitar o deslize no load */
.sidebar-is-collapsed #local-favorites-sidebar {
    margin-left: -180px !important;
    border-right-width: 0 !important;
}

.sidebar-is-collapsed #floating-sidebar-toggle {
    display: flex !important;
}

/* Reativa a transição apenas após o load completo para interações manuais */
body.ready #local-favorites-sidebar {
    transition: margin-left 0.3s ease-in-out !important;
}