/* ===== Layout admin-panel con sidebar verticale (area Civici) ===== */

/* Titolo area centrato sulla riga: stile allineato al logo immagine
   (AreaNameImage) - sans geometrico extra-bold, tutto maiuscolo, blu scuro. */
.portale-area-title {
    font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;
    color: #1b5b9b;
    letter-spacing: 0.04em;
    white-space: nowrap;
    pointer-events: none;
}

@media (min-width: 768px) {
    .portale-area-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 575.98px) {
    .portale-area-title {
        font-size: 1.8rem;
    }
}

/* Titolo area come immagine (AreaNameImage): altezza in em cosi' eredita
   il font-size del titolo e scala con le stesse media query del testo.
   inline-block/vertical-align per stare sulla stessa riga del testo. */
.portale-area-title .portale-area-title-img {
    display: inline-block;
    height: 1.6em;
    width: auto;
    vertical-align: middle;
}

.portale-sidebar-body {
    background-color: #f4f5f7;
}

.portale-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: #fff;
    /* La topbar e' sticky: quando Bootstrap apre un modal aggiunge padding-right
       al <body> (per compensare la scrollbar scomparsa) e questo restringe la
       larghezza del nav, facendo ricalcolare il flex-wrap del container e
       corrompendo il layout su due righe (mobile). Fissiamo i lati orizzontali
       cosi' la topbar occupa sempre l'intera viewport indipendentemente dal
       padding-right del body. */
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Su mobile l'apertura di un modal Bootstrap setta padding-right sul <body>:
   la topbar sticky sopra e' ora ancorata ai lati della viewport (left/right:0),
   quindi non viene piu' ristretta. Compensiamo comunque il padding-right sul
   body quando c'e' la topbar, per evitare spostamenti del contenuto sottostante
   e del pulsante di collapse. */
body.modal-open.has-portale-topbar {
    padding-right: 0 !important;
}

.portale-sidebar-toggle {
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-padding-y: 0.25rem;
    line-height: 1;
}

/* Link utente in topbar (gestione account): colore accent, icona persona e
   affordance da link (hover/active/focus) per distinguerlo dal testo semplice. */
.portale-user-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    color: #007bff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.portale-user-link .portale-user-ico {
    font-size: 1.05rem;
    line-height: 1;
}

.portale-user-link:hover {
    background-color: rgba(0, 123, 255, 0.1);
    color: #0056b3;
    text-decoration: underline;
}

.portale-user-link:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Layout del contenitore topbar.
   Mobile: toggle menu, brand e azioni (help/login) sulla stessa riga,
   con il titolo area centrato in modo assoluto. Utente/logout su mobile
   vivono nel menu offcanvas come prima voce.
   Selettori con specificità sufficiente a superare .navbar > .container-fluid (Bootstrap). */
.portale-topbar .portale-topbar-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 0.5rem;
    position: relative;
    min-height: 40px;
}

.portale-topbar .portale-topbar-brand {
    order: 1;
    flex: 0 0 auto;
    min-width: 0;
}

.portale-topbar .portale-topbar-right {
    order: 2;
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 0;
}

/* Titolo area su mobile: a destra nella topbar, prima dell'icona help,
   troncato con ellipsis se lo spazio non basta. */
.portale-topbar .portale-topbar-right .portale-topbar-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
}

/* Brand: testo del link troncato se lo spazio non basta (schermi piccoli). */
.portale-topbar .portale-topbar-brand a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Desktop (>=992px): brand a sinistra, titolo centrato in modo assoluto,
    login a destra, toggle menu nascosto. Una sola riga. */
@media (min-width: 992px) {
    .portale-topbar .portale-topbar-brand .portale-topbar-title {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .portale-topbar .portale-topbar-right {
        margin-left: auto;
    }
}

.portale-sidebar-layout {
    display: flex;
    align-items: flex-start;
    position: relative;
}

.portale-sidebar {
    width: 260px;
    flex: 0 0 260px;
    background-color: #fff;
    border-right: 1px solid #e6e8eb;
    overflow-y: auto;
    overflow-x: hidden;
    /* z-index sopra il backdrop offcanvas di Bootstrap (z-index: 1040)
       cosi' su mobile le voci del menu restano cliccabili. */
    z-index: 1045;
}

/* Desktop: sidebar fissa (non scrolla) sotto la topbar.
   La sidebar esce dal flusso (fixed), quindi il main viene compensato
   con margin-left pari alla larghezza della sidebar (vedi .portale-main desktop).
   --portale-topbar-h e' misurata via JS sull'altezza reale della topbar.
   I !important servono a vincere le regole .offcanvas di Bootstrap
   (top:0/bottom:0) che altrimenti bloccano la sidebar in cima. */
@media (min-width: 992px) {
    .portale-sidebar {
        position: fixed !important;
        top: var(--portale-topbar-h, 73px) !important;
        left: 0 !important;
        bottom: auto !important;
        /* Larghezza vincolata a 260px (fino al bordo del pulsante di collapse):
           vince sul --bs-offcanvas-width: 400px di Bootstrap .offcanvas. */
        width: 260px !important;
        --bs-offcanvas-width: 260px;
        height: calc(100vh - var(--portale-topbar-h, 73px)) !important;
        max-height: calc(100vh - var(--portale-topbar-h, 73px)) !important;
        align-self: flex-start;
        z-index: 1020;
        display: block !important;
        /* Sfondo opaco: il contenuto che scrolla sotto non deve essere visibile. */
        background-color: #fff !important;
        visibility: visible !important;
        transform: none !important;
    }
}

@media (max-width: 991.98px) {
    .portale-sidebar {
        --bs-offcanvas-width: 280px;
    }
}

.portale-sidebar-nav {
    padding-top: 0;
    padding-bottom: 1.25rem;
}

.portale-menu {
    --portale-accent: #007bff;
    --portale-hover-bg: rgba(75, 84, 92, 0.08);
    --portale-active-bg: rgba(0, 123, 255, 0.12);
}

.portale-menu-link,
.portale-menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    color: #3a3f45;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.portale-menu-link:hover,
.portale-menu-toggle:hover {
    background-color: var(--portale-hover-bg);
    color: #212529;
}

.portale-menu-ico {
    font-size: 1.05rem;
    flex: 0 0 auto;
    width: 1.25rem;
    text-align: center;
    color: #6c757d;
}

.portale-menu-link.active,
.portale-menu-toggle.active {
    color: var(--portale-accent);
    font-weight: 700;
    background-color: var(--portale-active-bg);
    border-left: 3px solid var(--portale-accent);
    padding-left: calc(1rem - 3px);
}

.portale-menu-link.active .portale-menu-ico,
.portale-menu-toggle.active .portale-menu-ico {
    color: var(--portale-accent);
}

.portale-menu-caret {
    margin-left: auto;
    font-size: 0.75rem;
    color: #9aa0a6;
    transition: transform 0.2s ease;
}

.portale-menu-toggle:not(.collapsed) .portale-menu-caret {
    transform: rotate(180deg);
}

.portale-menu-sub {
    list-style: none;
    padding: 0;
    margin: 0;
}

.portale-menu-sublink {
    display: block;
    padding: 0.42rem 1rem 0.42rem 2.85rem;
    color: #555a60;
    font-size: 0.9rem;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.portale-menu-sublink:hover {
    background-color: var(--portale-hover-bg);
    color: #212529;
}

.portale-menu-sublink.active {
    color: var(--portale-accent);
    font-weight: 700;
    border-left-color: var(--portale-accent);
    background-color: var(--portale-active-bg);
}

.portale-menu-subhead {
    padding: 0.55rem 1rem 0.2rem 2.85rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9aa0a6;
}

.portale-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.25rem 1rem 2rem;
}

@media (min-width: 992px) {
    .portale-main {
        /* Compensa la sidebar fixed (260px) per evitare sovrapposizioni del contenuto. */
        margin-left: 260px;
        padding: 1.5rem 1.75rem 2rem;
    }

    /* Il footer e' sibling della sidebar-layout nel body: compensa la sidebar fixed
       per non essere coperto quando si scrolla a fondo pagina. */
    .portale-sidebar-body > footer {
        margin-left: 260px;
    }
}

/* Toggle quadrato esterno, attaccato al bordo destro della sidebar */
.portale-sidebar-collapse {
    position: fixed;
    top: var(--portale-topbar-h, 73px);
    left: 260px;
    z-index: 1035;
    width: 24px;
    height: 38px;
    margin-left: -1px;
    padding: 0;
    border-radius: 0 4px 4px 0;
    background-color: #4b545c;
    border: 1px solid #4b545c;
    color: #fff;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.8rem;
    transition: left 0.2s ease, background-color 0.12s ease;
    cursor: pointer;
}

.portale-sidebar-collapse:hover {
    background-color: #3a4047;
    color: #fff;
}

.portale-sidebar-collapse:focus,
.portale-sidebar-collapse:focus-visible,
.portale-sidebar-collapse:active {
    outline: none;
    box-shadow: none;
    background-color: #4b545c;
}

@media (max-width: 991.98px) {
    .portale-sidebar-collapse {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .portale-sidebar-layout.portale-sidebar-collapsed .portale-sidebar {
        width: 56px !important;
        --bs-offcanvas-width: 56px;
        flex: 0 0 56px;
    }

    /* Riduce l'offset del main per seguire la sidebar collassata. */
    .portale-sidebar-layout.portale-sidebar-collapsed > .portale-main {
        margin-left: 56px;
    }

    /* Footer segue la sidebar collassata (56px). */
    .portale-sidebar-layout.portale-sidebar-collapsed ~ footer {
        margin-left: 56px;
    }

    .portale-sidebar-layout.portale-sidebar-collapsed > .portale-sidebar-collapse {
        left: 56px;
    }

    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-link,
    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-toggle {
        padding: 0.6rem 0;
        justify-content: center;
        gap: 0;
    }

    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-link > span,
    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-toggle > span,
    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-caret {
        display: none;
    }

    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-ico {
        width: auto;
    }

    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-link.active,
    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-toggle.active {
        padding-left: 0;
        border-left-width: 0;
        box-shadow: inset 3px 0 0 var(--portale-accent);
    }

    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-sub,
    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-subhead {
        display: none !important;
    }

    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-link,
    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-toggle {
        position: relative;
    }
}

@media (max-width: 991.98px) {
    .portale-sidebar-layout.portale-sidebar-collapsed .portale-sidebar {
        width: var(--bs-offcanvas-width, 280px);
        flex: 0 0 auto;
    }
    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-link,
    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-toggle {
        padding: 0.6rem 1rem;
        justify-content: flex-start;
        gap: 0.6rem;
    }
    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-link > span,
    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-toggle > span,
    .portale-sidebar-layout.portale-sidebar-collapsed .portale-menu-caret {
        display: revert;
    }
}