/* Navbar in alto: logo a sinistra, logo cliente al centro, quick-actions a destra.

   File a parte e non in global.css: global.css e' servito con un token di cache
   manuale (cacheLast(), dalla tabella decode) che non cambia quando il file
   cambia, quindi i browser continuavano a usare le regole vecchie. Questo file e'
   incluso con versioned_asset(), che usa la data di modifica.

   Prima i tre elementi erano colonne Bootstrap flottanti (col-md-4 + col-md-4) piu'
   un float a destra: quando le quick-actions non ci stavano andavano a capo, sopra
   il contenuto; sotto i 1024px il tema le metteva in position:absolute e finivano
   sopra il logo cliente.

   Ora e' una griglia a tre colonne. Le due laterali sono `minmax(max-content, 1fr)`:
   si dividono in parti uguali lo spazio, cosi' il logo centrale e' davvero al
   centro, ma nessuna puo' diventare piu' stretta del proprio contenuto. I tre
   elementi quindi non possono ne' sovrapporsi ne' andare a capo; quando lo spazio
   non basta, il logo centrale scompare (media query sotto).

   La sidebar (#sidebar), che sta nello stesso contenitore, e' position:fixed e non
   occupa celle della griglia. */
#navbar .navbar-collapse {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    column-gap: 24px;
    align-items: center;
    height: 62px;
    padding-left: 0;
    padding-right: 0;
}
/* .navbar-header e' vuoto (il brand non ha contenuto) ma, flottato e largo 40px
   da col-md-2, faceva partire la griglia da x=40: lo sfondo della navbar
   cominciava li' e a sinistra restava una striscia di 40px di colore diverso. Via
   l'elemento; i 40px diventano padding, cosi' il logo resta dove era. */
#navbar > .navbar-header { display: none; }
@media (min-width: 992px) {
    #navbar .navbar-collapse { padding-left: 40px; }
}

/* Il clearfix di Bootstrap su .navbar-collapse (::before/::after) in una griglia
   occuperebbe due celle e sposterebbe tutto. */
#navbar .navbar-collapse::before,
#navbar .navbar-collapse::after { content: none; display: none; }

#navbar .navbar-collapse > .pageheader {
    float: none;
    width: auto;
    min-width: 0;
    padding-top: 0;
}
#navbar .navbar-collapse > .pageheader.pageleft { grid-column: 1; justify-self: start; }
#navbar .navbar-collapse > .pageheader.pagecenter { grid-column: 2; justify-self: center; padding: 0 16px; }
#navbar .navbar-collapse > .pageheader.pagecenter .c4rgo-logo { float: none; margin: 0; }
#navbar .navbar-collapse > .pageheader > div[style*="clear"] { display: none; }

#navbar .navbar-collapse > .quick-actions {
    grid-column: 3;
    justify-self: end;
    float: none;
    position: static;
    margin: 0;
    padding-top: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Pulsante del menu compatto: compare solo con nav-compact (sotto). */
#navbar .navbar-compact-toggle { display: none; }
/* Nome della voce (Attivita', Messaggi, ...): serve solo nel menu compatto, dove
   le icone sono in colonna; nella navbar normale bastano icona e contatore. */
#navbar .quick-actions .compact-label { display: none; }

/* Le due disposizioni ridotte non dipendono da soglie in pixel: lo script in
   base.html.twig misura quanto spazio serve davvero (dipende da font, lingua, nome
   utente, numero di notifiche) e mette sul #navbar una di queste classi.
   Con soglie fisse bastava un carattere un po' piu' largo nel browser dell'utente
   perche' la colonna destra sforasse e l'ultima voce, il menu utente, finisse
   fuori dalla finestra.

   nav-no-center: il logo cliente non sta al centro senza toccare gli altri due
   elementi. Invece di scivolare di lato e attaccarsi al menu, sparisce e le
   colonne diventano due. */
#navbar.nav-no-center .navbar-collapse { grid-template-columns: max-content 1fr; }
#navbar.nav-no-center .navbar-collapse > .pageheader.pagecenter { display: none; }
#navbar.nav-no-center .navbar-collapse > .quick-actions,
#navbar.nav-no-center .navbar-collapse > .navbar-compact-toggle { grid-column: 2; }

/* nav-compact: le icone (task, messaggi, allarmi, chat, utente) non stanno piu'
   accanto al logo: invece di comprimerle vengono raccolte in un menu classico,
   aperto dal pulsante. Le voci restano quelle di sempre, con i loro sottomenu.
   :has() limita la regola alle pagine che hanno il pulsante (non errorbase), dove
   altrimenti il menu sparirebbe senza modo di riaprirlo. */
#navbar.nav-compact .navbar-collapse:has(> .navbar-compact-toggle) > .navbar-compact-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: 46px;
    height: 42px;
    margin-right: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font-size: 20px;
}
#navbar.nav-compact.compact-open .navbar-compact-toggle { background: rgba(255, 255, 255, 0.12); }

/* !important: la regola deve vincere su qualunque `display` che una pagina
   dia alle quick-actions, altrimenti le icone restano in riga accanto al
   pulsante e la navbar sfora. */
#navbar.nav-compact .navbar-collapse:has(> .navbar-compact-toggle) > .quick-actions { display: none !important; }

#navbar.nav-compact.compact-open .navbar-collapse > .quick-actions {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    right: 8px;
    width: min(320px, calc(100vw - 16px));
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    height: auto;
    margin: 0;
    padding: 6px 0;
    border-radius: 0 0 6px 6px;
    background: #0c1226 !important;
    opacity: 1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    white-space: normal;
    z-index: 1050;
}
#navbar.nav-compact.compact-open .quick-actions > li {
    display: block;
    width: 100%;
    float: none;
    border-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#navbar.nav-compact.compact-open .quick-actions > li:last-child { border-bottom: 0; }
#navbar.nav-compact.compact-open .quick-actions > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    color: #fff;
    font-size: 15px;
}
#navbar.nav-compact.compact-open .quick-actions > li > a > i { width: 20px; font-size: 18px; text-align: center; }
#navbar.nav-compact.compact-open .quick-actions .compact-label { display: inline; flex: 1 1 auto; }
#navbar.nav-compact.compact-open .quick-actions > li > a > .label { margin: 0; }
/* Utente: foto e nome sulla stessa riga. */
#navbar.nav-compact.compact-open .quick-actions > li.user {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 18px;
}
#navbar.nav-compact.compact-open .quick-actions > li.user .profile-photo { margin-left: 0; width: 36px; }
#navbar.nav-compact.compact-open .quick-actions > li.user > a { flex: 1 1 auto; padding-left: 10px; }
/* I sottomenu si aprono dentro il pannello, sotto la loro voce, invece che
   fluttuanti di fianco. */
#navbar.nav-compact.compact-open .quick-actions .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}
#navbar.nav-compact.compact-open .quick-actions > li.user > .dropdown-menu { flex: 0 0 100%; margin-left: -18px; width: calc(100% + 18px); }
#navbar.nav-compact.compact-open .quick-actions .dropdown-menu.arrow::before,
#navbar.nav-compact.compact-open .quick-actions .dropdown-menu.arrow::after { display: none; }

/* Utente: foto (o segnaposto) rotonda e nome sulla stessa riga. Il tema dava alla
   foto solo la larghezza: con un'immagine mancante il riquadro restava alto 20px e
   non si vedeva niente. */
#navbar #current-user { display: flex; align-items: center; }
#navbar #current-user .profile-photo {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-left: 12px;
    border-radius: 50%;
    overflow: hidden;
}
#navbar #current-user .profile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Sidebar ─────────────────────────────────────────────────────────────────
   La sidebar sta dentro .navbar-collapse ed e' position:fixed senza `left`:
   prende quindi la posizione orizzontale del contenitore. Da quando
   .navbar-collapse e' una griglia, parte di fianco al .navbar-header flottato
   (40px, vuoto) invece che sotto: senza un left esplicito la sidebar si spostava
   di 40px con lui. */
#navbar #sidebar { left: 0; }

/* Sidebar ridotta del 20%, icone comprese. Le misure originali sono in
   global.css (larghezza 90px, voci 80px, icone 68px con corpo 42px, contenuto
   rientrato di 100px): qui sono tutte a 0,8. Stanno in questo file perche'
   global.css ha il token di cache manuale (vedi l'intestazione). */
#navbar #sidebar.collapsed { width: 72px; }
#navbar #sidebar.collapsed > li.navigation > ul > li { max-height: 64px; max-width: 64px; }
#navbar #sidebar.collapsed > li.navigation > ul > li > a { width: 64px; height: 64px; font-size: 21px; }
#navbar #sidebar.collapsed > li.navigation > ul > li.hovered { max-width: 350px; }
#navbar #sidebar > li.navigation .menu > li > a > i {
    width: 54px;
    height: 54px;
    font-size: 34px;
}
/* Il contenuto lascia alla sidebar 80px invece di 100: solo dove la sidebar c'e',
   le pagine che la tolgono restano come sono. */
body:has(#sidebar) #wrap #content { padding-left: 80px; }