/* =====================================================
   SPS Modern 2027
   Sidebar - Restyling elegante e stabile
   Compatibile con AdminLTE / OpenSTAManager
   ===================================================== */


/* =====================================================
   1. SIDEBAR GENERALE
   ===================================================== */

.main-sidebar {
    box-shadow: 3px 0 20px rgba(0, 0, 0, 0.08);
}

/*
   Manteniamo dimensioni, posizione e comportamento
   originali della sidebar.
*/



/* =====================================================
   2. MENU PRINCIPALE
   ===================================================== */

.sidebar-menu > li {
    position: relative;
}

.sidebar-menu > li > a {
    display: block;
    position: relative;

    /* Nessun margine verticale aggiuntivo */
    margin: 0 9px;

    /* Manteniamo la spaziatura originale di AdminLTE */
    padding: 12px 12px;

    border-radius: 10px;
    border-left: 0 !important;

    font-weight: 500;
    letter-spacing: 0.1px;

    box-sizing: border-box;

    transition:
        background-color 0.20s ease,
        color 0.20s ease,
        box-shadow 0.20s ease;
}

/* Hover elegante, senza spostamenti */

.sidebar-menu > li:not(.active) > a:hover {
    background-color: rgba(130, 150, 175, 0.13);

    box-shadow:
        inset 0 0 0 1px rgba(140, 155, 175, 0.08);
}


/* Hover senza movimento */

.sidebar-menu > li:not(.active) > a:hover {
    background-color: rgba(130, 150, 175, 0.13);

    box-shadow:
        inset 0 0 0 1px rgba(140, 155, 175, 0.08);
}


/* =====================================================
   3. VOCE ATTIVA
   ===================================================== */

.sidebar-menu > li.active > a {
    border-radius: 10px;
    font-weight: 600;

    background-color: rgba(91, 155, 143, 0.15);

    box-shadow:
        inset 3px 0 0 #337ab7,
        inset 0 0 0 1px rgba(99, 169, 155, 0.08);
}


/* =====================================================
   4. ICONE MENU PRINCIPALE
   ===================================================== */

/*
   Icone sempre ferme.
   Nessuna animazione transform o translateX.
*/

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .fas,
.sidebar-menu > li > a > .far,
.sidebar-menu > li > a > .fab,
.sidebar-menu > li > a > .glyphicon {
    width: 20px;
    min-width: 20px;

    margin-right: 5px;

    text-align: center;
    font-size: 15px;

    opacity: 0.84;

    transform: none;

    transition: opacity 0.20s ease;
}


/* Hover: cambia solo l'opacita */

.sidebar-menu > li > a:hover > .fa,
.sidebar-menu > li > a:hover > .fas,
.sidebar-menu > li > a:hover > .far,
.sidebar-menu > li > a:hover > .fab,
.sidebar-menu > li > a:hover > .glyphicon {
    opacity: 1;
    transform: none;
}


/* Icone voci attive */

.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .fas,
.sidebar-menu > li.active > a > .far,
.sidebar-menu > li.active > a > .fab,
.sidebar-menu > li.active > a > .glyphicon {
    opacity: 1;
}


/* =====================================================
   5. FRECCE SOTTOMENU
   ===================================================== */

.sidebar-menu > li > a > .pull-right-container {
    right: 12px;
}

/*
   Manteniamo la rotazione delle frecce
   gestita da AdminLTE.
   Non aggiungiamo trasformazioni personalizzate.
*/

.sidebar-menu .fa-angle-left {
    opacity: 0.65;
    transition: opacity 0.20s ease;
}

.sidebar-menu > li:hover > a .fa-angle-left {
    opacity: 1;
}


/* =====================================================
   6. SOTTOMENU
   ===================================================== */

.sidebar-menu .treeview-menu {
    padding: 4px 0 6px;
    margin: 0 9px 5px;

    border-radius: 0 0 10px 10px;
}


/* Singole voci */

.sidebar-menu .treeview-menu > li > a {
    position: relative;

    margin: 2px 4px;

    padding-top: 9px;
    padding-bottom: 9px;

    border-radius: 8px;

    font-size: 12.5px;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}


/* Hover senza spostamenti */

.sidebar-menu .treeview-menu > li > a:hover {
    background-color: rgba(130, 150, 175, 0.12);
}


/* Voce attiva del sottomenu */

.sidebar-menu .treeview-menu > li.active > a {
    font-weight: 600;
    background-color: rgba(91, 155, 143, 0.12);
}


/* =====================================================
   7. ICONE SOTTOMENU
   ===================================================== */

.sidebar-menu .treeview-menu > li > a > .fa,
.sidebar-menu .treeview-menu > li > a > .fas,
.sidebar-menu .treeview-menu > li > a > .far {
    width: 16px;
    margin-right: 5px;

    text-align: center;
    opacity: 0.75;

    transform: none;
}


/* =====================================================
   8. SEPARATORI / INTESTAZIONI
   ===================================================== */

.sidebar-menu > li.header {
    padding: 15px 18px 7px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;

    opacity: 0.72;
}


/* =====================================================
   9. SCROLLBAR SIDEBAR
   ===================================================== */

.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(140, 155, 175, 0.30);
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 155, 175, 0.50);
}


/* Firefox */

.sidebar {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(140, 155, 175, 0.30) transparent;
}


/* =====================================================
   10. ACCESSIBILITA'
   ===================================================== */

.sidebar-menu a:focus-visible {
    outline: 2px solid #337ab7;
    outline-offset: -2px;
}


/* =====================================================
   11. SIDEBAR COMPATTA
   ===================================================== */

@media (min-width: 768px) {

    .sidebar-mini.sidebar-collapse
    .sidebar-menu > li > a {
        margin-left: 0;
        margin-right: 0;

        border-radius: 0;
    }

    .sidebar-mini.sidebar-collapse
    .sidebar-menu > li > a > .fa,
    .sidebar-mini.sidebar-collapse
    .sidebar-menu > li > a > .fas,
    .sidebar-mini.sidebar-collapse
    .sidebar-menu > li > a > .far {
        margin-right: 0;
    }

    .sidebar-mini.sidebar-collapse
    .sidebar-menu > li > .treeview-menu {
        margin: 0;
    }
}


/* =====================================================
   12. DASHBOARD - PULSANTE CHIUSURA WIDGET
   ===================================================== */

/*
   Manteniamo anche la personalizzazione
   della X che avevi inserito in questo file.
*/

li.li-widget {
    position: relative;
}

li.li-widget > button.close {
    position: absolute !important;

    top: 6px;
    right: 21px;

    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 19px;
    height: 19px;

    margin: 0;
    padding: 0;

    border: none;
    border-radius: 50%;

    background: rgba(120, 135, 150, 0.10);
    color: #84909d;

    font-size: 16px;
    font-weight: 400;
    line-height: 1;

    opacity: 0.45;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease;
}


/* Hover del widget */

li.li-widget:hover > button.close {
    opacity: 0.75;
}


/* Hover della X */

li.li-widget > button.close:hover {
    background: rgba(220, 65, 65, 0.12);
    color: #d44747;

    opacity: 1;
}


/* Focus tastiera */

li.li-widget > button.close:focus-visible {
    opacity: 1;

    outline: 2px solid #63a99b;
    outline-offset: 2px;
}


/* =====================================================
   13. ANIMAZIONI RIDOTTE
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

    .sidebar-menu a,
    .sidebar-menu .fa-angle-left,
    li.li-widget > button.close {
        transition: none !important;
    }

}