/* COPIA da depy/static/css/menu.css (commit 1360520, 10/11/2026). Non modificare qui:
   se cambia in Depy si ricopia (vedi web/css/depy/LEGGIMI.md). */
/* DEPY - menu laterale, barra in alto, menu dell'account, campanella,
   barra da telefono. */
/* =============================================
   USER AREA in topbar (avatar iniziali + nome + ruolo)
   ============================================= */

.user-dropdown .user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 4px 4px;
    border-radius: var(--r-pill);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s;
}
.user-dropdown .user-card:hover,
.user-dropdown .user-card[aria-expanded="true"] {
    background: rgba(255,255,255,.1);
}
.user-dropdown .user-card::after {
    display: none; /* Rimuovi la freccia default del dropdown */
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accento-forte);
    color: #fff;
    font-weight: 600;
    font-size: var(--fs-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.user-avatar.user-avatar-lg {
    width: 48px;
    height: 48px;
    font-size: 1.05rem;
}

.user-labels {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    margin-right: 4px;
}
/* nome e ruolo su una riga sola: con il testo grande andavano a capo
   e uscivano dalla barra, che e' alta 60px */
.topbar-main .user-name, .topbar-main .user-role { white-space: nowrap; }
.topbar-main .user-name {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--menu-testo-forte);
}
.topbar-main .user-role {
    font-size: var(--fs-xs);
    color: var(--menu-testo);
}

/* Dropdown menu utente — versione compatta, voci uniformi */
.user-dropdown-menu {
    min-width: 240px;
    padding: 0;
    border-radius: var(--r-md);
    box-shadow: var(--ombra-4);
    overflow: hidden;
}
.user-dropdown-menu .dropdown-item {
    padding: 9px 14px;
    font-size: var(--fs-base);
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.12s ease;
}

/* Campanella notifiche nella barra in alto (solo da PC) */
.topbar-bell {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: 6px; border-radius: var(--r-md);
    color: var(--menu-testo); font-size: 1.2rem; text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.topbar-bell:hover { background: rgba(255,255,255,.1); color: var(--menu-testo-forte); }
.topbar-bell-count {
    position: absolute; top: 3px; right: 2px;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    background: var(--rosso-500); color: #fff; font-size: 0.66rem; font-weight: 700;
    border: 2px solid var(--menu-sfondo);
}
/* Il lavoro in corso (l'import del catalogo che gira mentre si e' altrove):
   una pillola accanto alla campanella, si clicca e si torna alla pagina */
.topbar-lavoro {
    display: inline-flex; align-items: center; gap: 8px; height: 34px; margin-right: 8px; padding: 0 12px 0 10px;
    border-radius: var(--r-pill); background: rgba(255,255,255,.12); color: var(--menu-testo-forte);
    font-size: var(--fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; max-width: 300px;
}
.topbar-lavoro:hover { background: rgba(255,255,255,.2); color: var(--menu-testo-forte); }
.topbar-lavoro .bi-arrow-repeat { animation: lavoroGira 1.2s linear infinite; }
.topbar-lavoro.e-pronto { background: var(--accento); color: var(--blu-900); }
.topbar-lavoro.e-pronto:hover { background: var(--verde-300); }
.topbar-lavoro small { font-weight: 400; opacity: .85; }
.topbar-lavoro .topbar-lavoro-x { margin-left: 2px; border: 0; background: none; color: inherit; opacity: .7; padding: 0 2px; line-height: 1; }
.topbar-lavoro .topbar-lavoro-x:hover { opacity: 1; }
@keyframes lavoroGira { to { transform: rotate(360deg); } }
@media (max-width: 767.98px) { .topbar-lavoro span.topbar-lavoro-testo { display: none; } .topbar-lavoro { padding: 0 8px; } }
/* Campanella e avatar sempre affiancati, anche da telefono */
.topbar-main .navbar-nav { flex-direction: row; align-items: center; }
.user-dropdown-menu .dropdown-item > i {
    font-size: var(--fs-md);
    width: 18px;
    color: var(--testo-2);
    flex-shrink: 0;
    text-align: center;
}
.user-dropdown-menu .dropdown-item:hover > i,
.user-dropdown-menu .dropdown-item:focus > i {
    color: inherit;
}
.user-dropdown-menu .dropdown-divider { margin: 4px 0; }
[data-bs-theme="dark"] .user-dropdown-menu .dropdown-item > i { color: var(--testo-2); }
.user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(var(--blu-500-rgb),0.06), rgba(var(--primario-rgb),0.04));
}
[data-bs-theme="dark"] .user-dropdown-header {
    background: linear-gradient(135deg, rgba(var(--blu-500-rgb),0.12), rgba(var(--primario-rgb),0.10));
}
.user-header-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.user-header-name {
    font-weight: 600;
    color: var(--testo);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-header-meta {
    font-size: var(--fs-sm);
    color: var(--testo-2);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

/* Theme switcher inline */
.user-dropdown-menu .theme-switcher {
    cursor: default;
    padding: 5px 14px;   /* stessa dimensione delle altre voci del dropdown */
}
.theme-switcher:hover {
    background: transparent;
}
.theme-btn {
    padding: 3px 8px;
    line-height: 1;
}
.theme-btn.active {
    background: var(--primario);
    color: var(--su-primario);
    border-color: var(--primario);
}

/* ===== Topbar da telefono: il breadcrumb non deve mai andare a capo =====
   Si mostra solo l'ultima voce, troncata con i puntini, e una freccia per
   tornare al livello sopra. L'area utente a destra non si restringe. */
.topbar-main .container-fluid { flex-wrap: nowrap; }
.topbar-breadcrumb { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.topbar-breadcrumb .breadcrumb { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
.topbar-main .navbar-nav { flex-shrink: 0; }
.topbar-back { display: none; }
@media (max-width: 767.98px) {
    .topbar-sep { display: none; }
    .topbar-back { display: inline-flex; align-items: center; color: var(--menu-testo-forte); font-size: var(--fs-xl); padding: 0 6px 0 0; text-decoration: none; flex-shrink: 0; }
    .topbar-breadcrumb .breadcrumb-item { display: none; }
    .topbar-breadcrumb .breadcrumb-item:last-child { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); font-weight: 600; }
    .topbar-breadcrumb .breadcrumb-item + .breadcrumb-item::before { display: none; }
}

/* =============================================
   CAMPANELLA NOTIFICHE (nb-*): pannello sotto l'icona.
   Le righe .nb-item si usano anche nel riquadro "Da fare" della home completa.
   ============================================= */
.topbar-bell { padding: 0; border: 0; background: none; cursor: pointer; }
.topbar-bell[aria-expanded="true"] { background: var(--superficie-2); color: var(--testo); }
.nb { position: relative; }
.nb-panel {
    position: absolute; top: calc(100% + 10px); right: -6px; z-index: var(--z-notifiche);
    width: 380px; max-width: calc(100vw - 24px); max-height: min(560px, calc(100vh - 90px));
    display: flex; flex-direction: column;
    background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-lg);
    box-shadow: 0 20px 48px rgba(14,29,50,.18), 0 2px 6px rgba(14,29,50,.06);
    animation: nbIn .14s ease-out;
}
.nb-panel::before {
    content: ''; position: absolute; top: -7px; right: 19px; width: 14px; height: 14px;
    background: var(--superficie); border-left: 1px solid var(--bordo); border-top: 1px solid var(--bordo); transform: rotate(45deg);
}
@keyframes nbIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nb-panel { animation: none; } }
.nb-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 14px 16px 10px; border-bottom: 1px solid var(--bordo); }
.nb-head strong { font-size: var(--fs-md); color: var(--testo); }
.nb-tutte { padding: 0; border: 0; background: none; color: var(--blu-500); font-size: var(--fs-sm); font-weight: 500; }
.nb-tutte:hover { text-decoration: underline; }
.nb-tutte:disabled { opacity: .5; }
.nb-body { overflow-y: auto; padding: 4px 8px 8px; }
.nb-sez { padding: 10px 8px 4px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--testo-debole); }
.nb-item { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: var(--r-md); color: inherit; text-decoration: none; transition: background-color .12s; }
.nb-item:hover, .nb-item:focus-visible { background: var(--velo); color: inherit; outline: none; }
.nb-ico { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); }
.nb-testo { flex: 1; min-width: 0; }
.nb-testo strong { display: block; font-size: var(--fs-base); font-weight: 600; color: var(--testo); }
.nb-testo small { display: block; margin-top: 1px; font-size: var(--fs-sm); line-height: 1.35; color: var(--testo-2); }
/* pallino blu sugli avvisi non letti */
.nb-avviso .nb-testo strong::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--blu-500); vertical-align: middle; }
.nb-quando { flex-shrink: 0; align-self: flex-start; margin-top: 2px; font-size: var(--fs-xs); color: var(--testo-debole); white-space: nowrap; }
.nb-chev { flex-shrink: 0; font-size: var(--fs-sm); color: var(--testo-debole); }
.nb-altri { padding: 4px 8px 6px; font-size: var(--fs-sm); color: var(--testo-2); }
.nb-vuoto { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 24px 16px; text-align: center; font-size: .85rem; color: var(--testo-2); }
.nb-vuoto > .bi { margin-bottom: 4px; font-size: var(--fs-3xl); color: var(--verde-400); }
.nb-vuoto > .nb-errore { color: var(--testo-debole); }
.nb-vuoto strong { font-size: .95rem; color: var(--testo); }
.nb-caricamento { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; }
.nb-caricamento span {
    height: 42px; border-radius: var(--r-md);
    background: linear-gradient(90deg, var(--superficie-2) 25%, var(--superficie-2) 37%, var(--superficie-2) 63%); background-size: 400% 100%;
    animation: nbOnda 1.2s ease infinite;
}
@keyframes nbOnda { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
.nb-foot { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px; border-top: 1px solid var(--bordo); border-radius: 0 0 var(--r-lg) var(--r-lg); font-size: .85rem; font-weight: 500; color: var(--blu-500); text-decoration: none; }
.nb-foot:hover { background: var(--velo); color: var(--blu-700); }
[data-bs-theme="dark"] .topbar-bell[aria-expanded="true"] { background: var(--velo); color: #fff; }
[data-bs-theme="dark"] .nb-head, [data-bs-theme="dark"] .nb-foot { border-color: var(--bordo); }
[data-bs-theme="dark"] .nb-head strong, [data-bs-theme="dark"] .nb-testo strong, [data-bs-theme="dark"] .nb-vuoto strong { color: var(--testo); }
[data-bs-theme="dark"] .nb-item:hover, [data-bs-theme="dark"] .nb-item:focus-visible, [data-bs-theme="dark"] .nb-foot:hover { background: var(--blu-800); }
[data-bs-theme="dark"] .nb-caricamento span { background: linear-gradient(90deg, var(--blu-800) 25%, var(--superficie-2) 37%, var(--blu-800) 63%); }

/* =============================================
   AREE CON SEZIONI PROPRIE (Profilo e preferenze, Impostazioni):
   il menu laterale usa le classi menu-* (vedi in fondo); qui la tendina da telefono
   ============================================= */
.sez-mobile { margin-bottom: 1rem; }
/* Tendina compatta: larga quanto il contenuto, non tutta la riga */
.sez-mobile-btn {
    display: inline-flex; align-items: center; gap: 12px; width: auto; min-width: 220px; max-width: 100%; padding: 10px 14px;
    background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-md);
    text-align: left; color: var(--testo); box-shadow: var(--ombra-1);
}
.sez-mobile-testo { flex: 1; min-width: 0; }
.sez-mobile-titolo { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--testo-debole); }
.sez-mobile-voce { display: block; font-weight: 600; }
.sez-mobile-voce .bi { margin-right: 4px; color: var(--testo-2); }
.sez-mobile-chev { color: var(--testo-2); transition: transform .15s; }
.sez-mobile-btn[aria-expanded="true"] .sez-mobile-chev { transform: rotate(180deg); }
.sez-mobile-menu { width: auto; min-width: 220px; max-width: calc(100vw - 32px); padding: 6px; border-radius: var(--r-md); box-shadow: var(--ombra-4); }
.sez-mobile-menu .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); }
.sez-mobile-menu .dropdown-item.active { background: var(--blu-50); color: var(--blu-900); }
[data-bs-theme="dark"] .sez-mobile-menu .dropdown-item.active { background: var(--blu-800); color: var(--blu-200); }

/* Campanella da telefono: icona un po' piu' piccola, il pannello prende la
   larghezza dello schermo tra la barra in alto e quella in basso */
@media (max-width: 991.98px) {
    .topbar-bell { width: 36px; height: 36px; margin-right: 4px; font-size: 1.1rem; }
    .nb { position: static; }
    .nb-panel {
        position: fixed; top: calc(56px + env(safe-area-inset-top) + 6px); left: 8px; right: 8px;
        width: auto; max-width: none;
        max-height: calc(100vh - 56px - env(safe-area-inset-top) - 96px);
    }
    .nb-panel::before { display: none; }
}

/* Import fabbisogno: righe ignorate perche' fuori dai codici gestiti */

/* ===== Telefono: barra in alto fissa, menu utente come pannello, contenuto
   che parte sotto la barra e finisce sopra la barra di navigazione ===== */
@media (max-width: 991.98px) {
    .topbar-main {
        position: sticky; top: 0; z-index: var(--z-sticky);
        height: auto; min-height: 56px; max-height: none;
        padding-top: env(safe-area-inset-top);
        padding-left: 8px; padding-right: 12px;
    }
    .topbar-main .container-fluid { height: 56px; }
    /* Il menu dell'avatar: pannello fisso sotto la barra, compatto e
       allineato a destra sotto l'avatar (non a tutta larghezza). Posizione
       fissa e niente calcoli: prima finiva fuori dallo schermo in alto. */
    .user-dropdown .dropdown-menu.user-dropdown-menu {
        position: fixed !important;
        inset: calc(56px + env(safe-area-inset-top) + 6px) 12px auto auto !important;
        transform: none !important;
        width: min(290px, calc(100vw - 24px)); min-width: 0;
        margin: 0; max-height: calc(100vh - 140px); overflow-y: auto;
        z-index: var(--z-pannello);
    }
    .user-dropdown .user-labels { display: none; }
    .user-dropdown .user-card > .bi-chevron-down { display: none; }
    /* spazio per la barra in basso */
    .contenuto main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ===== Barra di navigazione in basso (solo telefono e tablet) ===== */
.mnav, .mnav-sheet, .mnav-backdrop { display: none; }
@media (max-width: 991.98px) {
    .mnav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barra);
        display: grid; grid-template-columns: 1fr 1fr 72px 1fr 1fr; align-items: end;
        height: calc(64px + env(safe-area-inset-bottom));
        padding: 0 4px env(safe-area-inset-bottom);
        background: var(--superficie); border-top: 1px solid var(--bordo);
        box-shadow: var(--ombra-3);
    }
    .mnav-btn {
        height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        border: 0; background: transparent; color: var(--testo-2); text-decoration: none; font-size: var(--fs-xs); font-weight: 600;
        border-radius: var(--r-md); margin: 4px 2px; padding: 0;
    }
    .mnav-btn i { font-size: var(--fs-xl); line-height: 1; }
    /* «Anagrafiche» deve stare in uno dei quattro posti anche a 360px */
    .mnav-btn span { max-width: 100%; font-size: .64rem; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mnav-btn.is-active { color: var(--blu-700); background: var(--blu-50); }
    .mnav-btn.is-open { color: var(--blu-700); }
    .mnav-plus {
        position: relative; top: -18px; justify-self: center;
        width: 60px; height: 60px; border-radius: 50%; border: 0;
        background: var(--blu-700); color: #fff; font-size: 1.7rem;
        box-shadow: var(--ombra-3); display: flex; align-items: center; justify-content: center;
        transition: transform .15s;
    }
    .mnav-plus.is-open { transform: rotate(45deg); }
    .mnav-backdrop { display: block; position: fixed; inset: 0; background: rgba(17,24,39,.35); z-index: calc(var(--z-barra) - 2); }
    .mnav-backdrop[hidden] { display: none; }
    .mnav-sheet {
        display: block; position: fixed; left: 0; right: 0;
        bottom: calc(64px + env(safe-area-inset-bottom)); z-index: calc(var(--z-barra) - 1);
        background: var(--superficie); border-radius: 18px 18px 0 0; padding: 14px 14px 18px;
        max-height: 65vh; overflow-y: auto; box-shadow: var(--ombra-4);
        animation: mnav-su .18s ease-out;
    }
    .mnav-sheet[hidden] { display: none; }
    @keyframes mnav-su { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
    .mnav-sheet-title { font-weight: 700; font-size: 1.05rem; margin: 0 4px 10px; }
    .mnav-sheet-sub { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--testo-2); margin: 14px 4px 8px; }
    .mnav-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .mnav-grid-compatta { grid-template-columns: repeat(3, 1fr); }
    .mnav-grid a {
        display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r-md);
        background: var(--sfondo); border: 1px solid var(--bordo); color: var(--testo); text-decoration: none; font-weight: 600; font-size: var(--fs-base);
    }
    .mnav-grid-compatta a { flex-direction: column; text-align: center; gap: 6px; font-size: var(--fs-sm); padding: 10px 6px; font-weight: 500; }
    .mnav-grid a i { font-size: 1.2rem; color: var(--blu-700); }
    .mnav-grid a:active { background: var(--blu-50); }
    .mnav-grid-azioni a { flex-direction: column; align-items: flex-start; gap: 4px; }
    .mnav-grid-azioni a small { font-weight: 400; color: var(--testo-2); font-size: var(--fs-xs); }
    .mnav-grid-azioni a i { width: 32px; height: 32px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 2px; }
    /* ognuna col suo colore: tinte del logo (blu, verde) piu' l'ambra per l'acquisto */
    .mnav-grid-azioni a.e-blu { background: var(--primario-tenue); border-color: var(--blu-200); }
    .mnav-grid-azioni a.e-blu i { background: var(--primario); color: var(--su-primario); }
    .mnav-grid-azioni a.e-verde { background: var(--ok-tenue); border-color: var(--verde-200); }
    .mnav-grid-azioni a.e-verde i { background: var(--accento-forte); color: var(--su-primario); }
    .mnav-grid-azioni a.e-ambra { background: var(--attenzione-tenue); border-color: var(--ambra-200); }
    .mnav-grid-azioni a.e-ambra i { background: var(--ambra-500); color: var(--ambra-testo); }
    .mnav-grid-azioni a.e-grigio { background: var(--superficie-2); border-color: var(--bordo); }
    .mnav-grid-azioni a.e-grigio i { background: var(--grigio-600); color: var(--su-primario); }
    /* l'azzurrino e' dell'ordine a fornitore: il giallo resta al materiale da riordinare */
    .mnav-grid-azioni a.e-azzurro { background: var(--primario-tenue); border-color: var(--blu-300); }
    .mnav-grid-azioni a.e-azzurro i { background: var(--blu-300); color: var(--blu-900); }
    .mnav-grid-azioni a.e-notte { background: var(--superficie-2); border-color: var(--bordo-forte); }
    .mnav-grid-azioni a.e-notte i { background: var(--blu-900); color: var(--blu-50); }
    /* nei pannelli delle sezioni: il riordino giallo pieno, l'ordine nuovo azzurrino */
    .mnav-grid a.e-giallo { background: var(--ambra-500); border-color: var(--ambra-500); color: var(--ambra-testo); }
    .mnav-grid a.e-giallo i { color: var(--ambra-testo); }
    .mnav-grid a.e-giallo:active { background: var(--ambra-700); }
    .mnav-grid:not(.mnav-grid-azioni) a.e-azzurro { background: var(--primario-tenue); border-color: var(--blu-300); }
    .mnav-grid:not(.mnav-grid-azioni) a.e-azzurro i { color: var(--blu-500); }
    .mnav-grid-azioni a.e-verde-chiaro { background: var(--verde-50); border-color: var(--verde-200); }
    .mnav-grid-azioni a.e-verde-chiaro i { background: var(--verde-400); color: var(--blu-900); }
    .mnav-grid .mnav-azione-primaria { background: var(--blu-50); border-color: var(--blu-200); }
    [data-bs-theme="dark"] .mnav, [data-bs-theme="dark"] .mnav-sheet { border-color: var(--bordo); }
        [data-bs-theme="dark"] .mnav-btn.is-active { background: var(--blu-800); }
    [data-bs-theme="dark"] .mnav-grid .mnav-azione-primaria { background: var(--blu-800); border-color: var(--blu-800); }
}

/* Telefono: niente hamburger (c'e' la barra in basso), briciole piu' piccole,
   in alto a destra solo l'avatar */
@media (max-width: 991.98px) {
    .topbar-breadcrumb .breadcrumb-item:last-child { font-size: var(--fs-base); font-weight: 600; }
    .topbar-back { font-size: 1.2rem; padding: 0 4px 0 0; }
    .user-dropdown .user-card { padding: 2px; gap: 0; }
    .user-avatar { width: 34px; height: 34px; font-size: .85rem; }
}

/* Colonna centrale della barra: il "+" poggia sulla barra con un anello
   bianco che lo unisce al bordo (prima galleggiava staccato). */
@media (max-width: 991.98px) {
    .mnav { grid-template-columns: 1fr 1fr 76px 1fr 1fr; }
    .mnav-centro { justify-self: center; display: flex; flex-direction: column; align-items: center; height: 64px; }
    .mnav-plus {
        top: -14px; width: 52px; height: 52px; font-size: var(--fs-2xl);
        box-shadow: 0 0 0 6px var(--sfondo), 0 6px 14px rgba(var(--primario-rgb),.30);
    }
    [data-bs-theme="dark"] .mnav-plus { box-shadow: 0 0 0 6px var(--sfondo), 0 6px 14px rgba(0,0,0,.4); }
}

/* ===== Menu dell'account e menu "Altro": stesso linguaggio ===== */
.user-dropdown-menu {
    min-width: 268px;
    padding: 6px;
    border: 1px solid var(--bordo);
    border-radius: var(--r-lg);
    box-shadow: var(--ombra-4);
    overflow: hidden;
}
.user-dropdown-menu .dropdown-item {
    border-radius: var(--r-md);
    padding: 9px 10px;
    font-weight: 500;
}
.user-dropdown-menu .dropdown-item:hover,
.user-dropdown-menu .dropdown-item:focus { background: var(--velo); }
.user-dropdown-menu .dropdown-item > i {
    width: 28px; height: 28px; border-radius: var(--r-sm);
    background: var(--superficie-2); color: var(--testo-2);
    display: inline-flex; align-items: center; justify-content: center; font-size: .95rem;
}
.user-dropdown-menu .dropdown-item:hover > i { background: var(--velo); color: var(--testo); }
.ud-sezione {
    padding: 10px 12px 4px; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--testo-debole);
}
.ud-pie { margin-top: 4px; border-top: 1px solid var(--bordo); padding-top: 4px; }
.ud-esci { color: var(--rosso-700); font-weight: 600; }
.user-dropdown-menu .theme-switcher { border-radius: var(--r-md); }
.user-dropdown-menu .theme-switcher:hover { background: transparent; }

/* Il pulsante "Altro": discreto, non un bottone grigio come gli altri */
.az-altro {
    background: var(--superficie-2); border: 1px solid var(--bordo); color: var(--testo); font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
}
.az-altro:hover, .az-altro[aria-expanded="true"] { background: var(--velo); color: var(--testo); }
.az-altro::after { display: none; }   /* niente freccetta: bastano i tre punti */

.az-menu {
    min-width: 260px; padding: 6px; border: 1px solid var(--bordo); border-radius: var(--r-lg);
    box-shadow: var(--ombra-4);
}
.az-menu-sezione {
    padding: 10px 12px 4px; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--testo-debole);
}
.az-menu-sezione-rossa { color: var(--rosso-700); }
.az-menu .dropdown-item { font-weight: 500; }
.az-menu .dropdown-item > i {
    width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--superficie-2); color: var(--testo-2);
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.az-menu .dropdown-item:hover > i { background: var(--velo); color: var(--testo); }
.az-menu .az-pericolosa > i { background: var(--rosso-100); color: var(--rosso-700); }
.az-menu .az-pericolosa:hover > i { background: var(--rosso-200); color: var(--rosso-800); }
/* le azioni da fare con attenzione: il punto esclamativo a destra */
.az-menu .az-attenzione { margin-left: auto; padding-left: 12px; color: var(--attenzione); font-size: .95rem; line-height: 1; }

[data-bs-theme="dark"] .user-dropdown-menu .dropdown-item > i,
[data-bs-theme="dark"] .az-menu .dropdown-item > i { background: var(--velo); color: var(--testo); }
[data-bs-theme="dark"] .az-altro { background: var(--velo); }

/* =============================================
   MENU DEL PROFILO E PANNELLO DELLE NOTIFICHE: la veste degli elenchi.
   Stesso riquadro bianco con bordo leggero e angoli a 14 punti, voci con
   l'icona in un tondo tinto, etichette di sezione piccole e grigie, i tre
   pulsanti del tema tondi come nel login. Al buio i colori dal tema.
   ============================================= */
.user-dropdown-menu, .nb-panel {
    background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-lg);
    box-shadow: 0 2px 12px rgba(16,24,40,.05), 0 18px 40px rgba(16,24,40,.14);
}
.user-dropdown-menu { min-width: 284px; padding: 0 0 6px; }
.user-dropdown-header { padding: 14px 16px; gap: 12px; background: var(--velo); border-bottom: 1px solid var(--bordo); }
.user-dropdown-header .user-avatar-lg { width: 42px; height: 42px; font-size: var(--fs-md); background: var(--blu-500); color: #fff; }
.user-header-name { color: var(--primario); font-size: .95rem; }
.user-header-meta { color: var(--testo-2); font-size: .76rem; }
.user-header-meta > span {
    background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-pill); padding: 1px 8px;
    font-weight: 600; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-2);
}
.ud-sezione, .nb-sez { padding: 12px 16px 4px; font-size: .67rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--testo-2); }
.user-dropdown-menu .dropdown-item {
    margin: 0 6px; width: auto; border-radius: var(--r-md); padding: 7px 10px; gap: 10px;
    font-size: .86rem; font-weight: 500; color: var(--primario);
}
.user-dropdown-menu .dropdown-item:hover, .user-dropdown-menu .dropdown-item:focus { background: var(--velo); color: var(--primario); }
.user-dropdown-menu .dropdown-item > i { width: 30px; height: 30px; border-radius: 50%; background: var(--hb-lavoro-ico); color: var(--blu-500); font-size: .95rem; }
.user-dropdown-menu .dropdown-item:hover > i { background: var(--blu-500); color: #fff; }
.ud-pie { margin: 6px 6px 0; padding-top: 6px; border-top: 1px solid var(--bordo); }
.ud-pie .dropdown-item { margin: 0; }
/* Da telefono: il logo dell'azienda in alto a sinistra e «Un progetto Depy»
   in fondo al menu dell'utente (al posto del menu laterale, che li' non c'e') */
.topbar-logo-tel, .ud-progetto { display: none; }
@media (max-width: 991.98px) {
    .topbar-logo-tel { display: inline-flex; align-items: center; flex: none; margin-right: 10px; }
    .topbar-logo-tel img { height: 30px; width: auto; max-width: 96px; object-fit: contain; }
    .topbar-logo-tel img.e-azienda { height: 34px; padding: 2px; border-radius: var(--r-sm); background: var(--su-primario); }
    .ud-progetto { display: block; margin: 6px 6px 0; padding-top: 4px; border-top: 1px solid var(--bordo); }
}
.ud-esci, .ud-esci:hover { color: var(--no); }
/* «Esci»: specificita' pari alle voci del menu dell'account, senza !important */
.user-dropdown-menu .ud-esci:hover { background: var(--no-tenue); color: var(--rosso-800); }
.user-dropdown-menu .ud-esci > i { background: var(--no-tenue); color: var(--no); }
.user-dropdown-menu .theme-switcher { cursor: default; }
.user-dropdown-menu .theme-switcher:hover { background: transparent; }
.user-dropdown-menu .theme-switcher:hover > i { background: var(--hb-lavoro-ico); color: var(--blu-500); }
.ud-tema { display: flex; gap: 5px; }
.login-tema .theme-btn, .ud-tema .theme-btn {
    width: 30px; height: 30px; padding: 0; line-height: 1; border-radius: var(--r-pill); border: 1px solid var(--bordo);
    background: var(--superficie); color: var(--testo-2); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-base); cursor: pointer;
}
.login-tema .theme-btn { width: 34px; height: 34px; }
.login-tema .theme-btn:hover, .ud-tema .theme-btn:hover { color: var(--primario); border-color: var(--bordo-forte); }
.login-tema .theme-btn.active, .ud-tema .theme-btn.active { background: var(--blu-500); border-color: var(--blu-500); color: #fff; }

.nb-panel::before { background: var(--superficie); border-color: var(--bordo); }
.nb-head { padding: 13px 16px 11px; border-bottom: 1px solid var(--bordo); }
.nb-head strong { font-size: .95rem; font-weight: 700; color: var(--primario); }
.nb-tutte { height: 26px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--bordo); background: var(--superficie); color: var(--testo-2); font-size: var(--fs-xs); font-weight: 500; }
.nb-tutte:hover { text-decoration: none; background: var(--velo); border-color: var(--bordo-forte); color: var(--primario); }
.nb-body { padding: 2px 6px 6px; }
.nb-item { padding: 8px 10px; gap: 11px; border-radius: var(--r-md); }
.nb-item:hover, .nb-item:focus-visible { background: var(--velo); }
.nb-ico { width: 34px; height: 34px; font-size: .95rem; }
.nb-testo strong { font-size: .86rem; color: var(--primario); }
.nb-testo small { color: var(--testo-2); }
.nb-avviso .nb-testo strong::after { background: var(--blu-500); }
.nb-quando, .nb-chev, .nb-altri { color: var(--testo-2); }
.nb-foot { padding: 10px; border-top: 1px solid var(--bordo); border-radius: 0 0 var(--r-lg) var(--r-lg); color: var(--blu-500); font-size: .84rem; font-weight: 600; }
.nb-foot:hover { background: var(--velo); color: var(--primario); }
.nb-vuoto strong { color: var(--primario); }

[data-bs-theme="dark"] .user-dropdown-menu, [data-bs-theme="dark"] .nb-panel, [data-bs-theme="dark"] .nb-panel::before { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .user-header-name, [data-bs-theme="dark"] .nb-head strong, [data-bs-theme="dark"] .nb-testo strong,
[data-bs-theme="dark"] .nb-vuoto strong, [data-bs-theme="dark"] .user-dropdown-menu .dropdown-item { color: var(--testo); }
[data-bs-theme="dark"] .user-header-meta > span { background: var(--velo); color: var(--testo); }
[data-bs-theme="dark"] .user-dropdown-menu .dropdown-item:hover, [data-bs-theme="dark"] .user-dropdown-menu .dropdown-item:focus,
[data-bs-theme="dark"] .nb-item:hover, [data-bs-theme="dark"] .nb-item:focus-visible, [data-bs-theme="dark"] .nb-foot:hover { color: #fff; }
[data-bs-theme="dark"] .user-dropdown-menu .dropdown-item > i, [data-bs-theme="dark"] .user-dropdown-menu .theme-switcher:hover > i { background: rgba(var(--primario-rgb),.45); color: var(--blu-200); }
[data-bs-theme="dark"] .ud-esci, [data-bs-theme="dark"] .ud-esci:hover { color: var(--rosso-300); }
[data-bs-theme="dark"] .user-dropdown-menu .ud-esci:hover { background: var(--no-tenue); }
[data-bs-theme="dark"] .user-dropdown-menu .ud-esci > i { background: var(--no-tenue); color: var(--rosso-300); }
[data-bs-theme="dark"] .ud-pie, [data-bs-theme="dark"] .nb-head, [data-bs-theme="dark"] .nb-foot { border-color: var(--bordo); }
[data-bs-theme="dark"] .login-tema .theme-btn, [data-bs-theme="dark"] .ud-tema .theme-btn, [data-bs-theme="dark"] .nb-tutte { border-color: var(--bordo-forte); }
[data-bs-theme="dark"] .login-tema .theme-btn:hover, [data-bs-theme="dark"] .ud-tema .theme-btn:hover, [data-bs-theme="dark"] .nb-tutte:hover { background: var(--superficie); color: #fff; }
[data-bs-theme="dark"] .nb-foot { color: var(--blu-300); }

/* =============================================
   MENU LATERALE (menu-*) — struttura di erp.vay.it, colori del logo
   Menu chiaro su --superficie, bordo a destra. Voci dirette in alto, poi le
   sezioni a fisarmonica: il titolo e' una fascia blu (chiusa: blu tenue,
   cosi' con tutto chiuso non e' un muro; aperta: blu pieno), quella in cui
   si e' prende il verde del logo. Le voci sono legate al titolo da una
   linea verticale; la voce attiva ha bordo e testo verdi. Solo ruoli, mai
   colori scritti: il tema scuro viene da solo. Regole in docs/STILE.md.
   ============================================= */
.sidebar.menu {
    position: fixed; top: 0; left: 0; z-index: var(--z-pannello);
    width: var(--sidebar-width); height: 100vh; height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--superficie); color: var(--testo);
    border-right: 1px solid var(--bordo);
    transition: transform .2s ease, box-shadow .2s ease;
}
.menu-testa {
    flex: 0 0 60px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 0 8px 0 16px; border-bottom: 1px solid var(--bordo);
}
.menu-logo { height: 30px; width: auto; max-width: 150px; object-fit: contain; }
.menu-logo-azienda { height: 40px; max-width: 160px; }
/* Il logo dell'azienda grande o centrato (Impostazioni > Azienda > Menu):
   la testata cresce con lui e le icone scendono sulla riga della ricerca. */
.menu-logo-grande .menu-testa, .menu-logo-centrato .menu-testa { flex-basis: auto; min-height: 60px; padding: 10px 16px; }
.menu-logo-grande .menu-logo-azienda { height: auto; max-height: 180px; max-width: 100%; }
.menu-logo-centrato .menu-testa { justify-content: center; }
.menu-logo-centrato .menu-logo-azienda { height: auto; max-height: 96px; max-width: 200px; }
.menu-cerca-riga { display: flex; align-items: flex-end; gap: 2px; padding-right: 8px; }
.menu-cerca-riga .menu-cerca { flex: 1 1 auto; min-width: 0; }
.menu-cerca-riga .menu-strumenti { padding-bottom: 6px; }
.solo-scuro { display: none; }
[data-bs-theme="dark"] .solo-chiaro { display: none; }
[data-bs-theme="dark"] .solo-scuro { display: block; }
.menu-strumenti { display: flex; gap: 2px; flex: none; }
.menu-strumento {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: 0; border-radius: var(--r-sm);
    background: none; color: var(--testo-debole); font-size: .95rem; cursor: pointer;
    transition: background-color .12s, color .12s;
}
.menu-strumento:hover { background: var(--velo); color: var(--accento-forte); }
.menu-strumento:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }
.menu-strumento.e-attivo { background: var(--accento-tenue); color: var(--accento-forte); }
.menu-puntina i { transition: transform .15s, opacity .15s; }
html.menu-sganciato .menu-puntina i { transform: rotate(45deg); opacity: .6; }

.menu-cerca { position: relative; flex: 0 0 auto; padding: 12px 12px 4px; }
.menu-cerca > .bi {
    position: absolute; left: 24px; top: 12px; height: 36px; display: flex; align-items: center;
    font-size: .85rem; color: var(--testo-debole); pointer-events: none;
}
.menu-cerca input {
    width: 100%; height: 36px; padding: 0 10px 0 32px;
    border: 1px solid var(--bordo-forte); border-radius: var(--r-md);
    background: var(--superficie); color: var(--testo); font-size: .86rem;
}
.menu-cerca input::placeholder { color: var(--testo-debole); }
.menu-cerca input:focus { outline: none; border-color: var(--accento); box-shadow: 0 0 0 3px var(--accento-tenue); }

.menu-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 12px 16px; scrollbar-width: thin; }
.menu [hidden] { display: none !important; }

/* Voce diretta (Home, Ricezione merce, i preferiti, le voci di Impostazioni) */
.menu-solo {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-radius: var(--r-sm);
    font-size: var(--fs-base); font-weight: 500; color: var(--testo); text-decoration: none;
    transition: background-color .12s, color .12s;
}
.menu-solo > .bi:first-child { width: 20px; flex: none; text-align: center; font-size: 1.05rem; color: var(--testo-debole); }
.menu-solo:hover { background: var(--velo); color: var(--primario); }
.menu-solo:focus-visible, .menu-voce:focus-visible, .menu-titolo:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }
.menu-solo.attiva { background: var(--accento-tenue); color: var(--accento-forte); }
.menu-solo.attiva > .bi:first-child { color: var(--accento-forte); }
.menu-testo { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-solo-doppia { align-items: flex-start; }
.menu-solo-doppia > .bi:first-child { margin-top: 2px; }
.menu-solo-doppia .menu-testo { white-space: normal; }
.menu-sotto { display: block; margin-top: 1px; font-size: var(--fs-xs); font-weight: 400; color: var(--testo-2); }
.menu-solo.attiva .menu-sotto { color: inherit; }
.menu-freccia-dx { font-size: var(--fs-xs); color: var(--testo-debole); }
.menu-separatore { height: 1px; margin: 8px 12px; background: var(--bordo); }
.menu-vuoto { padding: 8px 12px; font-size: .85rem; color: var(--testo-2); }
.menu mark { padding: 0; background: none; color: var(--accento-forte); font-weight: 700; }
.menu a.e-scelta { background: var(--velo); }

/* Sezione: titolo a fascia, voci sotto */
.menu-sezione { margin-top: 6px; }
.menu-titolo {
    position: sticky; top: -12px; z-index: 5;
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border: 0; border-radius: var(--r-sm);
    background: var(--primario); color: var(--su-primario);
    font: inherit; font-size: var(--fs-base); font-weight: 600; text-align: left; cursor: pointer;
    transition: background-color .12s, color .12s;
}
.menu-titolo > span { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; white-space: nowrap; }
/* il contatore e' anch'esso uno span figlio: senza questa riga prendeva
   flex:1 come il testo, si allargava e mandava a capo «Ordini fornitore» */
.menu-titolo > .menu-badge { flex: none; }
.menu-titolo > span > .bi { width: 20px; flex: none; text-align: center; opacity: .8; }
.menu-titolo:hover { background: var(--primario-hover); }
.menu-freccia { flex: none; font-size: .65rem; opacity: .75; transition: transform .2s; }
.menu-open > .menu-titolo .menu-freccia { transform: rotate(180deg); }
/* Chiusa: nessun fondo, solo il testo (il grigio pieno pesava). Aperta: un
   blu leggero, non quello pieno del logo. Quella della pagina in cui si
   sta: verde, aperta o chiusa. */
.menu-titolo { background: var(--blu-400); }
.menu-titolo:hover { background: var(--blu-500); }
.menu-sezione:not(.menu-open) > .menu-titolo { background: transparent; color: var(--testo); }
.menu-sezione:not(.menu-open) > .menu-titolo > span > .bi { color: var(--primario); opacity: 1; }
.menu-sezione:not(.menu-open) > .menu-titolo:hover { background: var(--velo); }
.menu-titolo.corrente, .menu-titolo.corrente:hover { background: var(--accento-forte); color: var(--su-primario); }
.menu-sezione:not(.menu-open) > .menu-titolo.corrente { background: var(--accento-tenue); color: var(--accento-forte); }
.menu-sezione:not(.menu-open) > .menu-titolo.corrente > span > .bi { color: var(--accento-forte); }
[data-bs-theme="dark"] .menu-sezione:not(.menu-open) > .menu-titolo { color: var(--testo); }
[data-bs-theme="dark"] .menu-sezione:not(.menu-open) > .menu-titolo > span > .bi { color: var(--blu-200); }
.menu-titolo.corrente > span > .bi { opacity: 1; }

.menu-voci { display: none; margin: 0 0 0 22px; padding-left: 4px; border-left: 2px solid var(--bordo); }
.menu-open > .menu-voci { display: block; margin-top: 4px; margin-bottom: 8px; }
.menu-voce {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-left: -6px; padding: 6px 12px;
    border-left: 2px solid transparent; border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: var(--fs-base); color: var(--testo); text-decoration: none;
    transition: background-color .12s, color .12s;
}
.menu-voce:hover { background: var(--velo); color: var(--primario); }
.menu-voce.attiva { border-left-color: var(--accento); background: var(--accento-tenue); color: var(--accento-forte); font-weight: 600; }

/* Divisorio dentro una sezione («Report», «Operazioni»): si legge come
   un'intestazione, non come una voce */
.menu-gruppo {
    display: flex; align-items: center; gap: 8px;
    margin: 14px 0 4px 6px;
    font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--primario); user-select: none;
}
.menu-gruppo::after { content: ""; flex: 1; height: 1px; background: var(--bordo); }
.menu-corpo > .menu-gruppo { margin: 0 12px 4px; }

.menu-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
    background: var(--accento-tenue); color: var(--accento-forte); font-size: var(--fs-xs); font-weight: 700;
}
.menu-titolo .menu-badge-titolo { background: rgba(255,255,255,.22); color: inherit; }
.menu-sezione:not(.menu-open) > .menu-titolo .menu-badge-titolo { background: var(--accento-tenue); color: var(--accento-forte); }

/* Il menu di un'altra area (Impostazioni, Profilo): dice dove si e' */
.menu-intestazione {
    display: flex; align-items: center; gap: 10px;
    margin: 4px 0 8px; padding: 4px 12px 10px; border-bottom: 1px solid var(--bordo);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primario);
}
.menu-intestazione > .bi { color: var(--accento-forte); }
.menu-torna { margin-bottom: 4px; color: var(--testo-2); }

/* Piede: listino in vigore, azienda, utenti */
.menu-piede { flex: 0 0 auto; padding: 8px 12px 10px; border-top: 1px solid var(--bordo); }
/* Stessa altezza con e senza ingranaggio: cambiando menu il piede non deve muoversi */
.menu-piede-riga { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.menu-ingranaggio { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-sm); color: var(--testo-debole); font-size: 1.1rem; text-decoration: none; transition: background-color .12s, color .12s; }
.menu-ingranaggio:hover { background: var(--velo); color: var(--primario); }
.menu-ingranaggio.attiva { background: var(--accento-tenue); color: var(--accento-forte); }
.menu-ingranaggio:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }
.menu-progetto { display: flex; align-items: center; gap: 6px; padding: 4px 12px; color: var(--testo-debole); font-size: .72rem; }
.menu-progetto img { height: 15px; width: auto; }
/* Solo un dato da leggere, non una voce: stesso filo a sinistra delle voci */
.menu-listino { margin-left: -6px; padding: 2px 12px 6px 14px; font-size: var(--fs-xs); color: var(--testo-debole); cursor: default; }

/* Riordino delle sezioni («Personalizza») */
.menu-corpo[data-riordino] .menu-sezione { border: 1px dashed var(--bordo-forte); border-radius: var(--r-sm); padding: 2px; }
.menu-corpo[data-riordino] .menu-sezione.trascinata { opacity: .5; }
.menu-corpo[data-riordino] .menu-titolo { cursor: grab; }
.menu-corpo[data-riordino] .menu-freccia { display: none; }
.menu-sposta { display: flex; gap: 2px; flex: none; }
.menu-sposta button {
    width: 24px; height: 24px; border: 1px solid var(--bordo-forte); border-radius: var(--r-xs);
    background: var(--superficie); color: var(--primario); font-size: .65rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.menu-sposta button:hover { background: var(--velo); }
.menu-riordino {
    margin-top: 12px; padding: 10px 12px; border: 1px solid var(--bordo); border-radius: var(--r-md);
    background: var(--superficie-2); font-size: var(--fs-sm); color: var(--testo-2);
}
.menu-riordino p { margin: 0 0 8px; }
.menu-riordino-azioni { display: flex; gap: 6px; }

/* Tendina: da telefono sempre, da PC quando il menu e' sganciato con la puntina */
.menu-velo { position: fixed; inset: 0; z-index: calc(var(--z-pannello) - 1); background: rgba(14,29,50,.45); }
@media (max-width: 991.98px) {
    .sidebar.menu { transform: translateX(-100%); }
    .sidebar.menu.active { transform: none; box-shadow: var(--ombra-4); }
    .menu-puntina { display: none; }
}
@media (min-width: 992px) {
    html.menu-sganciato .sidebar.menu { transform: translateX(-100%); }
    html.menu-sganciato .sidebar.menu.active { transform: none; box-shadow: var(--ombra-4); }
    html.menu-sganciato .contenuto { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .sidebar.menu { transition: none; } }

/* =============================================
   BARRA IN ALTO: la ricerca globale al centro (Ctrl+K)
   ============================================= */
/* La barra e' una griglia a tre colonne: le due laterali sono uguali (1fr),
   quindi la ricerca sta al centro esatto, non «dopo il percorso». */
.topbar-main .container-fluid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px) minmax(0, 1fr); align-items: center; column-gap: 16px; }
.topbar-sx { display: flex; align-items: center; min-width: 0; }
.topbar-sx .topbar-breadcrumb { min-width: 0; overflow: hidden; }
.topbar-main .navbar-nav { justify-self: end; }
.topbar-cerca { position: relative; display: flex; align-items: center; min-width: 0; }
@media (max-width: 991.98px) { .topbar-main .container-fluid { grid-template-columns: minmax(0, 1fr) 0 auto; column-gap: 0; } }
/* Ogni pezzo nella sua colonna. Sul telefono la ricerca e' nascosta e non
   occupa la sua cella: senza posti fissi campanella e avatar scivolavano
   nella colonna larga zero e uscivano dallo schermo (pagina larga 456px su 390). */
.topbar-main .topbar-sx { grid-column: 1; }
.topbar-main .topbar-centro { grid-column: 2; display: flex; align-items: center; gap: 6px; min-width: 0; }
.topbar-centro .topbar-cerca { flex: 1 1 auto; }
.topbar-centro .topbar-casa { flex: none; margin-right: 0; }
.topbar-main .container-fluid > .navbar-nav { grid-column: 3; justify-self: end; }
/* La barra non e' un .navbar-expand-*: per Bootstrap e' una barra "chiusa",
   e in una barra chiusa il menu a tendina sta nel flusso (position: static).
   Aperto, allungava la barra a 500px e spingeva breadcrumb e ricerca dentro
   la pagina. Da PC il menu dell'account resta appeso sotto l'avatar. */
@media (min-width: 992px) {
    .topbar-main .navbar-nav .dropdown-menu { position: absolute; right: 0; left: auto; top: 100%; margin-top: 6px; }
}
/* L'hamburger serve solo quando il menu non si vede: da telefono e da PC
   con il menu sganciato dalla puntina. Con il menu fisso di fianco e' un
   doppione, e con lui sparisce anche il «›» che lo seguiva. */
@media (min-width: 992px) {
    html:not(.menu-sganciato) #sidebarCollapse,
    html:not(.menu-sganciato) .topbar-sep { display: none; }
}
/* Da telefono e tablet c'e' la barra in basso con tutte le sezioni:
   l'hamburger in alto a sinistra era un doppione. */
@media (max-width: 991.98px) {
    #sidebarCollapse, .topbar-sep { display: none; }
}
.topbar-cerca > .bi { position: absolute; left: 12px; color: rgba(255,255,255,.6); font-size: var(--fs-base); pointer-events: none; }
.topbar-cerca input {
    width: 100%; height: 36px; padding: 0 64px 0 34px;
    border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-md);
    background: rgba(255,255,255,.1); color: var(--menu-testo-forte); font-size: .86rem;
}
.topbar-cerca input::placeholder { color: rgba(255,255,255,.55); }
.topbar-cerca input:focus { outline: none; background: rgba(255,255,255,.16); border-color: var(--accento); }
.topbar-cerca > kbd {
    position: absolute; right: 10px; padding: 1px 6px; border-radius: var(--r-xs);
    background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); font-size: .68rem; pointer-events: none;
}
.cerca-risultati {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: var(--z-menu);
    max-height: min(70vh, 560px); overflow-y: auto; padding: 6px;
    background: var(--superficie); color: var(--testo);
    border: 1px solid var(--bordo); border-radius: var(--r-lg); box-shadow: var(--ombra-4);
}
.cerca-risultati.is-loading { opacity: .75; }
.cerca-risultati .ssr-group { padding: 4px 0; }
.cerca-risultati .ssr-title { padding: 6px 12px 4px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--testo-debole); }
.cerca-risultati .ssr-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: var(--r-sm); color: var(--testo); text-decoration: none; }
.cerca-risultati .ssr-item:hover, .cerca-risultati .ssr-item:focus, .cerca-risultati .ssr-item.is-active { background: var(--velo); color: var(--testo); }
.cerca-risultati .ssr-item > i { width: 18px; flex: none; text-align: center; font-size: var(--fs-md); color: var(--primario); }
.cerca-risultati .ssr-item-body { flex: 1; min-width: 0; }
.cerca-risultati .ssr-lbl { font-size: var(--fs-base); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cerca-risultati .ssr-sub { font-size: var(--fs-xs); color: var(--testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cerca-risultati .ssr-invio { margin-left: auto; opacity: 0; font-size: var(--fs-sm); color: var(--testo-debole); }
.cerca-risultati .ssr-item.is-active .ssr-invio { opacity: 1; }
.cerca-risultati mark { padding: 0 1px; border-radius: var(--r-xs); background: var(--accento-tenue); color: inherit; }
.cerca-risultati .ssr-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 12px; font-size: .85rem; color: var(--testo-2); text-align: center; }
.cerca-risultati .ssr-empty small { color: var(--testo-debole); }
.cerca-risultati .ssr-foot { display: flex; gap: 14px; justify-content: flex-end; margin-top: 4px; padding: 8px 10px 4px; border-top: 1px solid var(--bordo); font-size: var(--fs-xs); color: var(--testo-2); }
.cerca-risultati kbd { margin-right: 3px; padding: 1px 5px; border-radius: var(--r-xs); background: var(--superficie-2); color: var(--testo-2); font-size: var(--fs-xs); box-shadow: none; }
/* da telefono niente ricerca e niente casa (la home e' nella barra in basso):
   serve la stessa forza della regola che le mostra, se no restavano */
@media (max-width: 991.98px) { .topbar-cerca, .topbar-main .topbar-centro { display: none; } }