/* ========================================
   CUSTOM SIDEBAR TOGGLE - VERSIONE CORRETTA
   ======================================== */

/* Sidebar con transizione */
aside#layout-menu {
    width: 260px !important;
    transition: width 0.3s ease;
}

    /* Rimuovi effetti hover sulla sidebar */
    aside#layout-menu:hover {
        width: 260px !important;
    }

    aside#layout-menu.menu-collapsed:hover {
        width: 80px !important;
    }

    /* Forza il link del brand a usare flex per allineare gli elementi */
    aside#layout-menu .app-brand-link {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        flex-direction: row !important;
    }

    /* Logo del brand */
    aside#layout-menu .app-brand-logo {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        flex-shrink: 0 !important;
    }

    /* Testo/SVG del brand - inline accanto al logo */
    aside#layout-menu:not(.menu-collapsed) .app-brand-text {
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
        width: auto !important;
        max-width: none !important;
        vertical-align: middle !important;
        flex-shrink: 0 !important;
    }

        aside#layout-menu:not(.menu-collapsed) .app-brand-text svg {
            display: inline-block !important;
            vertical-align: middle !important;
            height: 56px !important;
            width: auto !important;
        }

    /* Blocca il container brand per evitare movimenti */
    aside#layout-menu .app-brand {
        transform: none !important;
        transition: none !important;
    }

    /* FORZA visibilità del testo brand (es. "miraia") SEMPRE quando aperto */
    aside#layout-menu:not(.menu-collapsed) .app-brand-text {
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
        width: auto !important;
        max-width: none !important;
        vertical-align: middle !important;
    }

    /* Forza il link del brand a usare flex per allineare gli elementi */
    aside#layout-menu:not(.menu-collapsed) .app-brand-link {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    /* Forza visibilità di TUTTI gli elementi dentro app-brand quando aperto */
    aside#layout-menu:not(.menu-collapsed) .app-brand * {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Disabilita comportamento hover di Materio */
    aside#layout-menu:not(.menu-collapsed):hover .app-brand-text,
    aside#layout-menu:not(.menu-collapsed):not(:hover) .app-brand-text {
        opacity: 1 !important;
        visibility: visible !important;
        display: inline-block !important;
    }

    /* Nascondi testo brand solo quando collassato */
    aside#layout-menu.menu-collapsed .app-brand-text {
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        display: none !important;
    }

    /* Sidebar collassata */
    aside#layout-menu.menu-collapsed {
        width: 80px !important;
    }

    /* Margine sinistro e destro per le voci del menu SOLO quando aperto */
    aside#layout-menu:not(.menu-collapsed) .menu-item {
        margin-left: 20px;
        margin-right: 20px;
        transition: margin 0.3s ease;
    }

    /* Spaziatura extra per la prima voce di menu - SEMPRE */
    aside#layout-menu .menu-item:first-child {
        margin-top: 50px;
    }

    aside#layout-menu.menu-collapsed .menu-item {
        margin-left: 0;
        margin-right: 0;
    }

    /* Forza larghezza elementi interni quando APERTO */
    aside#layout-menu:not(.menu-collapsed) .menu-inner,
    aside#layout-menu:not(.menu-collapsed) .menu-inner ul {
        width: 260px !important;
    }

    aside#layout-menu:not(.menu-collapsed) .menu-item {
        width: 220px !important;
    }

    aside#layout-menu:not(.menu-collapsed) .menu-link {
        width: 220px !important;
    }

    /* Forza larghezza elementi interni quando COLLASSATO */
    aside#layout-menu.menu-collapsed .menu-inner,
    aside#layout-menu.menu-collapsed .menu-inner ul,
    aside#layout-menu.menu-collapsed .menu-item,
    aside#layout-menu.menu-collapsed .menu-link {
        width: 80px !important;
    }

        /* Nascondi testo quando collassato */
        aside#layout-menu.menu-collapsed .app-brand-text,
        aside#layout-menu.menu-collapsed .menu-link > div {
            opacity: 0 !important;
            visibility: hidden !important;
            width: 0 !important;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }

    /* FORZA visibilità testo quando aperto */
    aside#layout-menu:not(.menu-collapsed) .app-brand-text,
    aside#layout-menu:not(.menu-collapsed) .menu-link > div {
        opacity: 1 !important;
        visibility: visible !important;
        width: auto !important;
        max-width: none !important;
        display: block !important;
        flex: 1 !important;
        min-width: 150px !important;
        transition: opacity 0.3s ease 0.1s, visibility 0.3s ease 0.1s;
        /* Stili tipografici */
        font-family: 'Inter' !important;
        font-style: normal !important;
        font-weight: 400 !important;
        font-size: 14px !important;
        line-height: 150% !important;
        /* NO wrapping - testo su una riga */
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

/* Toggle Button Custom */
#menuToggle {
    position: fixed;
    left: 260px;
    top: 12px;
    transform: translateX(-50%);
    z-index: 1100;
    background: transparent;
    border: none;
    width: 46px;
    height: 46px;
    cursor: pointer;
    transition: left 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    pointer-events: auto;
}

/* Toggle button quando sidebar è collassata */
aside#layout-menu.menu-collapsed ~ #menuToggle {
    left: 80px;
}

/* Hover del toggle button */
#menuToggle:hover {
    opacity: 0.8;
}

/* Icona del toggle - SVG */
.menu-toggle-icon {
    width: 46px;
    height: 46px;
    display: block;
    transition: transform 0.3s ease;
}

/* Ruota l'icona quando collassato */
aside#layout-menu.menu-collapsed ~ #menuToggle .menu-toggle-icon {
    transform: rotate(180deg);
}

/* Layout page con margine - VALORI CORRETTI */
.layout-page {
    margin-left: 300px !important; /* 260px sidebar + 40px distanza */
    transition: margin-left 0.3s ease;
}

    /* Navbar dentro layout-page */
    .layout-page .layout-navbar {
        transition: all 0.3s ease;
    }

/* Layout page quando menu è collassato */
body:has(aside#layout-menu.menu-collapsed) .layout-page {
    margin-left: 120px !important; /* 80px sidebar + 40px distanza */
}

/* ========================================
   RESPONSIVE
   ======================================== */

/* Per tablet e mobile - NASCONDI IL TOGGLE CUSTOM */
@media (max-width: 1199px) {
    #menuToggle {
        display: none !important;
    }

    aside#layout-menu {
        position: fixed;
        transform: translateX(-260px);
    }

        aside#layout-menu.menu-open {
            transform: translateX(0);
        }

    .layout-page {
        margin-left: 0 !important;
    }
}

/* Per schermi molto piccoli */
@media (max-width: 767px) {
    #menuToggle {
        width: 36px;
        height: 36px;
        top: 24px;
    }

    .menu-toggle-icon {
        font-size: 1.125rem;
    }
}