/* ==========================================================================
   Sidebar — comportamento no DESKTOP (>= 1025px)

   PROBLEMA REAL: no layout, `.page-wrapper` e `.page-footer` são IRMÃOS de
   `.wrapper` (não filhos). Todas as regras existentes usam
   `.wrapper.toggled .page-wrapper` (descendente) e por isso NUNCA batem
   quando o menu recolhe — o conteúdo fica preso na margem do menu aberto.

   Aqui usamos o combinador de irmão (`~`) para o estado recolhido, então
   o conteúdo acompanha a largura do menu. Carregado por último.
   Abaixo de 1025px vale o modo "overlay" do template (intacto).
   ========================================================================== */

@media (min-width: 1025px) {

    :root {
        --sb-open: 250px;
        --sb-collapsed: 70px;
    }

    /* Transição sincronizada */
    .sidebar-wrapper,
    .topbar,
    .page-wrapper,
    .page-footer {
        transition: margin-left .24s ease, left .24s ease, width .24s ease !important;
    }

    /* ---------- ESTADO EXPANDIDO (padrão) ---------- */
    .sidebar-wrapper { width: var(--sb-open); }

    .page-wrapper {
        margin-left: var(--sb-open) !important;
        width: calc(100% - var(--sb-open)) !important;
        max-width: calc(100% - var(--sb-open)) !important;
    }
    .topbar,
    .page-footer {
        left: var(--sb-open) !important;
        width: calc(100% - var(--sb-open)) !important;
    }

    /* ---------- ESTADO RECOLHIDO ---------- */
    .wrapper.toggled .sidebar-wrapper { width: var(--sb-collapsed) !important; }

    /* topbar é filho de .wrapper -> descendente */
    .wrapper.toggled .topbar {
        left: var(--sb-collapsed) !important;
        width: calc(100% - var(--sb-collapsed)) !important;
    }

    /* .page-wrapper / .page-footer são IRMÃOS de .wrapper -> combinador ~
       (mantém também a forma descendente, caso algum layout aninhe diferente) */
    .wrapper.toggled ~ .page-wrapper,
    .wrapper.toggled .page-wrapper {
        margin-left: var(--sb-collapsed) !important;
        width: calc(100% - var(--sb-collapsed)) !important;
        max-width: calc(100% - var(--sb-collapsed)) !important;
    }
    .wrapper.toggled ~ .page-footer,
    .wrapper.toggled .page-footer {
        left: var(--sb-collapsed) !important;
        width: calc(100% - var(--sb-collapsed)) !important;
    }

    /* ---------- HOVER "ESPIAR" ----------
       menu recolhido: ao passar o mouse ele expande POR CIMA do conteúdo,
       sem empurrar nada (o conteúdo continua na largura recolhida). */
    .wrapper.toggled.sidebar-hovered .sidebar-wrapper {
        width: var(--sb-open) !important;
        box-shadow: 4px 0 24px rgba(13, 25, 41, .22);
        z-index: 999;
    }

    /* ---------- detalhes ---------- */
    /* não bloquear cliques durante a transição do menu */
    .wrapper.sidebar-transition,
    .wrapper.sidebar-transition * { pointer-events: auto !important; }

    /* remove o hack de camada que atrapalha o recálculo de largura */
    .page-wrapper { transform: none !important; }

    /* botão de recolher continua visível e clicável com o menu fechado */
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {
        justify-content: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .toggle-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        cursor: pointer;
    }
    .wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .toggle-icon i {
        transform: scaleX(-1);
    }
}