/**
 * Admin di SVILAPP — le composizioni «Personalizzate» (v.9.0.0). CONTENUTO.
 *
 * L'Admin si costruisce coi componenti del brand book SVILAPP, così come
 * sono: li rendono i file di resources/views/ui/. Dalla 11.9.0 il brand book
 * ha i componenti dei backoffice (card richiudibile, avviso, filtri,
 * paginazione, tabella ferma, KPI, bacheca, organigramma, log, dettaglio,
 * caselle, campo telefono, resa compatta…), e con la 11.9.1 i ritocchi che
 * l'Admin aveva chiesto: le composizioni che l'Admin aveva fatto da sé sono
 * uscite da qui. Resta soltanto il guscio dell'applicativo e pochi pezzi suoi,
 * composti coi pezzi e coi token del brand book, come vuole la regola dei due
 * passi.
 *
 * Tre regole, che il presidio controlla:
 *  - nessun selettore riscrive un componente del brand book (.sv-*): una
 *    classe ui-* può stare sullo stesso elemento di una .sv-*, ma per dare
 *    proprietà che il componente non dà, mai per cambiarne una;
 *  - nessun colore scritto a mano: solo token semantici;
 *  - nessuna meccanica: posizioni fisse, strati, scorrimenti e griglia li
 *    dà il motore (public/css/meccaniche.css), che legge da qui le misure
 *    di cui ha bisogno.
 *
 * Ciò che qui si compone, o che del brand book non si è potuto usare così
 * com'è, è anche una richiesta al brand book: docs/richieste-brand-book.md.
 */

/* ════════════════════ Le misure che le meccaniche leggono ════════════════════ */

:root {
    --ds-h-topbar: 64px;                   /* l'altezza di .sv-topbar */
    --ds-h-finestra: calc(100vh - 210px);  /* la tabella sotto barra e strumenti */
    --ds-h-indice: 40px;                   /* l'indice delle sezioni, fermo sotto la barra */
    --ds-toast-bordo: var(--sv-s5);        /* il toast, dal bordo dello schermo */
    --ds-popover-gap: var(--sv-s2);
    --ds-z-sticky: var(--sv-z-sticky);
    --ds-z-overlay: var(--sv-z-overlay);
    --ds-z-modal: var(--sv-z-modal);
}

html, body { margin: 0; }

/* ════════════════════ Il guscio: layout «barra laterale» 5.1.3 ════════════════════
   La variante 1 del brand book: barra larga su bg-0 col filo a destra, i
   gruppi richiudibili (.sv-nav__gruppo), il contenuto a destra. */

.ui-pagina { min-height: 100vh; }

.ui-salta {
    position: absolute;
    left: var(--sv-s3);
    top: calc(var(--sv-s8) * -2);
    z-index: var(--sv-z-modal);
    padding: var(--sv-s2) var(--sv-s3);
    border-radius: var(--sv-r2);
    background: var(--sv-surface-2);
    color: var(--sv-text-1);
}
.ui-salta:focus { top: var(--sv-s3); }

.ui-guscio { display: flex; min-height: 100vh; }

.ui-laterale {
    width: 248px;
    flex: none;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 12px;
    background: var(--sv-bg-0);
    border-right: 1px solid var(--sv-line);
}
/* Il marchio, il menu che scorre (la meccanica è del motore) e il piede, che
   non si stringono mai: è il menu a cedere lo spazio. */
.ui-laterale__testa { flex: none; justify-content: space-between; padding: 0 var(--sv-s1); }
.ui-menu {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sv-s2);
    /* l'anello di fuoco (4px) esce dalle voci: dentro un riquadro che scorre
       verrebbe tagliato, e qui ha il suo margine */
    margin: -4px;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--sv-line-strong) transparent;
}
.ui-laterale__piede {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--sv-s2);
    padding-top: var(--sv-s3);
    border-top: 1px solid var(--sv-line);
}
/* Il marchio è un collegamento alla bacheca: tiene l'inchiostro del lockup,
   senza la sottolineatura e il colore che il browser dà ai collegamenti
   (richiesta al brand book: a.sv-lockup). */
.ui-marchio { min-width: 0; color: inherit; text-decoration: none; }
/* Il piede, allineato alle voci del menu (il rientro di .sv-nav__item): come
   nel layout «barra laterale» del brand book, la versione è una riga mono,
   piccola, in inchiostro 3. */
.ui-orologio { padding: 0 var(--sv-s3); font-family: var(--sv-font-mono); white-space: nowrap; }
.ui-laterale__piede > [data-utenza] { padding: 0 var(--sv-s3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-laterale__piede > [data-zona="chiusura"] { padding: 0 var(--sv-s3); justify-content: space-between; align-items: center; }
.ui-pagina .ui-laterale__piede a[data-versione] {
    font: 400 11px/16px var(--sv-font-mono);
    color: var(--sv-text-3);
    text-decoration: none;
}
.ui-pagina .ui-laterale__piede a[data-versione]:hover { color: var(--sv-text-1); }
.ui-orologio--alterato { color: var(--sv-warn-text); }

.ui-principale { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Il titolo è il percorso del brand book (.sv-percorso): nella barra prende
   lo spazio che resta, e si stringe. */
.ui-barra__titolo { flex: 1; min-width: 0; }
/* Quando la barra è stretta (il telefono, coi comandi accanto) i gradini che
   precedono il titolo si stringono per primi e finiscono coi puntini: nel
   brand book si stringono anche loro, ma il testo esce e si sovrappone al
   gradino dopo (richiesta al brand book). */
.ui-barra__titolo li:not([aria-current="page"]) { flex-shrink: 10; overflow: hidden; }
.ui-briciola { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-barra__azioni { margin-left: auto; flex-wrap: wrap; }
/* Sul telefono, coi comandi che vanno a capo, il titolo restava a larghezza
   zero e la pagina non diceva più che cosa fosse (v.9.1.0): lì la barra va a
   capo, il titolo prende la riga accanto al bottone del menu e i comandi la
   riga sotto. */
@media (max-width: 640px) {
  .ui-barra { height: auto; min-height: 64px; flex-wrap: wrap; row-gap: var(--sv-s2); padding-top: var(--sv-s3); padding-bottom: var(--sv-s3); }
  .ui-barra__titolo { flex: 1 1 calc(100% - 56px); }
  .ui-barra__azioni { margin-left: 0; }
}
.ui-contenuto { padding: var(--sv-s5); }


/* Il selettore dell'aspetto: pastiglia bicroma che legge gli accenti del kit
   in cui si trova. */
.ui-aspetto__pastiglia {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: var(--sv-r-full);
    background: linear-gradient(135deg, var(--sv-accent-1) 0 50%, var(--sv-accent-2) 50% 100%);
}
.ui-aspetto__scelte { flex-wrap: wrap; margin-bottom: var(--sv-s3); }

/* Il collegamento nel testo: la regola del brand book (2.2, .sv-link e
   .sv-prosa a), applicata ai collegamenti senza classe che le pagine del
   motore scrivono. .sv-prosa sull'intera pagina vestirebbe anche i
   collegamenti dei componenti (recapiti, ordinamento). */
.ui-pagina a:not([class]) {
    color: var(--sv-accent-1-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--sv-line-strong);
    text-underline-offset: 3px;
    transition: color var(--sv-dur-2) var(--sv-ease), text-decoration-color var(--sv-dur-2) var(--sv-ease);
}
.ui-pagina a:not([class]):hover { color: var(--sv-text-1); text-decoration-color: var(--sv-accent-1); }
.ui-pagina a:not([class]):focus-visible { outline: none; box-shadow: var(--sv-focus-ring); border-radius: 2px; }

/* ════════════════════ La composizione delle pagine ════════════════════ */

/* La griglia a 12 colonne: le colonne sono una meccanica; fra le righe lo
   spazio del modulo del brand book (.sv-form), fra le colonne il gutter. */
.ui-griglia { gap: var(--sv-s4) var(--sv-s5); align-items: start; }
.ui-griglia > [data-allinea="fondo"] { align-self: end; }
.ui-azioni { flex-wrap: wrap; }
.ui-azioni--fine { justify-content: flex-end; }
.ui-riga { flex-wrap: wrap; }
.ui-scelta-binaria { flex-wrap: wrap; }
.ui-schede-tab { display: flex; flex-direction: column; gap: var(--sv-s4); }

/* La card col filo d'avviso al posto della firma (la conferma di
   un'eliminazione, la revoca di un'utenza). */
.ui-scheda__richiamo { height: 2px; background: var(--sv-warn); }
/* Il corpo della card distanzia da sé i blocchi (11.9.0); un modulo che sta
   dentro il corpo ne porta la stessa pila. */
.ui-scheda__corpo > form { display: flex; flex-direction: column; gap: var(--sv-s4); }

/* L'indice delle sezioni (.sv-tabs--indice) va a filo dei bordi del
   contenuto; ciò che porta data-zona="coda" (il comando «Apri tutte») va a
   destra, centrato sulla fila. */
.ui-navigazione-schede[data-m~="fisso-sotto-barra"] { margin: 0 calc(var(--sv-s5) * -1); }
.ui-navigazione-schede > [data-zona="coda"] { margin-left: auto; flex: none; align-self: center; }

/* Nella barra dei filtri: ciò che porta data-zona="coda" va a destra; la
   scelta delle colonne prende la riga intera. */
.ui-barra-strumenti > [data-zona="coda"] { margin-left: auto; }
.ui-barra-strumenti > .ui-caselle { flex: 1 1 100%; }

/* ════════════════════ La tabella ════════════════════
   Le celle ferme, il loro fondo e il codice su una riga sono del brand book
   (11.9.1). Qui le celle che le pagine marcano con data-cella. */
.ui-tabella [data-cella="codice"] { font-family: var(--sv-font-mono); white-space: nowrap; }
.ui-tabella [data-cella="dettaglio"] { white-space: normal; }
.ui-tabella tr[data-riga-link] { cursor: pointer; }

/* ════════════════════ I pezzi ════════════════════ */

.ui-nota { margin: 0; }
.ui-titoletto { margin: var(--sv-s3) 0 0; }

/* La nota informativa: la riga, l'icona del brand book accanto al testo che
   spiega, il popover che si apre sotto. */
.ui-info__riga {
    display: inline-flex;
    align-items: center;
    gap: var(--sv-s2);
    cursor: pointer;
    list-style: none;
}
.ui-info__riga::-webkit-details-marker { display: none; }
.ui-info__testo { max-width: min(560px, 90vw); }
.ui-info__testo > p { margin: 0 0 var(--sv-s2); }
.ui-info__testo > p:last-child { margin-bottom: 0; }

.ui-anteprima-immagine { display: flex; flex-wrap: wrap; gap: var(--sv-s2); }
.ui-anteprima-immagine:empty { display: none; }
.ui-anteprima-immagine img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 1px solid var(--sv-line);
    border-radius: var(--sv-r2);
    background: var(--sv-surface-1);
}

.ui-ripetitore { gap: var(--sv-s3); }
.ui-ripetitore__voce { padding: var(--sv-s3) var(--sv-s4); }

/* La lista di una colonna della bacheca: dove si lasciano le task, alta
   abbastanza da essere un bersaglio anche vuota. */
.ui-bacheca__lista { flex: 1; display: flex; flex-direction: column; gap: var(--sv-s2); min-height: 96px; }

/* Più persone nello stesso nodo dell'organigramma: il nodo del brand book ne
   porta una, e qui si separano con un filo. */
.ui-organigramma__persona { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-organigramma__persona + .ui-organigramma__persona { margin-top: var(--sv-s2); padding-top: var(--sv-s2); border-top: 1px solid var(--sv-line); }

/* La modale è un <dialog> (v.9.5.1), aperto nel top layer, che porta lo
   scrim del brand book. Il browser dà al dialog una misura sua (al più lo
   schermo meno un margine), un bordo e un colore: qui si tolgono, perché il
   velo è lo scrim e copre tutto lo schermo; il ::backdrop resta trasparente,
   perché il velo lo dipinge già lo scrim. Il pannello si centra coi margini
   automatici, che — a differenza del centraggio del flex — non tagliano la
   testa di un pannello più alto dello schermo: si scorre dall'inizio al
   piede. Richiesta al brand book: lo scrim come dialog. */
dialog[data-m~="modale"] {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border: 0;
    color: inherit;
}
dialog[data-m~="modale"]::backdrop { background: transparent; }
dialog[data-m~="modale"] > * { margin-block: auto; }

/* ════════════════════ La pagina d'accesso ════════════════════
   Il layout «pagina di login» nella variante dei backoffice (5.2.5): il
   fondo del kit col filo in cima, la card al centro. */
.ui-accesso { min-height: 100vh; display: flex; flex-direction: column; background: var(--sv-bg-0); }
.ui-accesso__filo { height: 2px; background: var(--sv-gradient-kit); }
.ui-accesso__scena { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--sv-s5); }
.ui-accesso__scheda { width: min(420px, 100%); }
.ui-accesso__corpo { display: flex; flex-direction: column; gap: var(--sv-s5); padding: var(--sv-s5) var(--sv-s6) var(--sv-s6); }
.ui-accesso__testa { display: flex; flex-direction: column; align-items: center; gap: var(--sv-s3); text-align: center; }
.ui-accesso__titolo { margin: 0; font-size: var(--sv-t-h2); line-height: var(--sv-t-h2-lh); color: var(--sv-text-1); }