/* static/css/core/sidebar_layout.css */
/* Layout da barra lateral (expandida/recolhida), prevenção de FOUC e espaçamento de conteúdo */

/* 1. Botão Sair no Hover */
.sidebar-logout-button:hover,
.sidebar-logout-button:hover span,
.sidebar-logout-button:hover .material-icons {
    color: white !important;
}

/* 2. Largura da Sidebar */
html:not(.sidebar-is-collapsed) .sidebar-principal {
    width: 13.2rem;
}
html.sidebar-is-collapsed .sidebar-principal {
    width: 5rem;
}

/* 3. Altura Fixa do Cabeçalho da Sidebar (Prevenção de FOUC) */
html:not(.sidebar-is-collapsed) .sidebar-header {
    height: 9rem !important; /* h-36 */
}
html.sidebar-is-collapsed .sidebar-header {
    height: 5rem !important; /* h-20 */
}

/* 4. Visibilidade dos Textos e Logo (Sidebar Expandida) */
html:not(.sidebar-is-collapsed) .sidebar-principal .sidebar-nav-text,
html:not(.sidebar-is-collapsed) .sidebar-principal .sidebar-section-title {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
html:not(.sidebar-is-collapsed) .sidebar-principal .sidebar-header-logo-container {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}
html:not(.sidebar-is-collapsed) .sidebar-principal .sidebar-nav-item,
html:not(.sidebar-is-collapsed) .sidebar-principal .sidebar-nav-item div.flex {
    gap: 0.5rem !important;
}

/* 5. Visibilidade dos Textos e Logo (Sidebar Recolhida) */
html.sidebar-is-collapsed .sidebar-principal .sidebar-nav-text,
html.sidebar-is-collapsed .sidebar-principal .sidebar-section-title,
html.sidebar-is-collapsed .sidebar-principal .sidebar-header-logo-container {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
html.sidebar-is-collapsed .sidebar-principal .sidebar-nav-item,
html.sidebar-is-collapsed .sidebar-principal .sidebar-nav-item div.flex {
    gap: 0 !important;
    justify-content: center !important;
}
html.sidebar-is-collapsed .sidebar-principal .sidebar-nav-item span[id^="sidebar-badge-"] {
    display: none !important;
}

/* 6. Espaçamento de Conteúdo Desktop vs Mobile */
.page-content-pusher {
    margin-left: 0 !important;
}

@media (min-width: 1024px) {
    body.logged-in .page-content-pusher {
        position: relative !important;
        left: auto !important;
        margin-left: var(--sidebar-width, 13.2rem) !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
        width: auto !important;
        padding-top: 40px !important;
    }

    body.logged-in #main-content {
        padding-top: 10px !important;
    }
}