/**
 * Admin — le MECCANICHE (v.9.0.0). È motore: un figlio le eredita così come
 * sono.
 *
 * Fino alla v.8.1.0 il motore portava tutto l'aspetto dell'Admin, in
 * `public/css/admin.css`: misure, densità, schede, tabelle, bacheca, login.
 * Un figlio lo ereditava, e con lui la forma dell'interfaccia di SVILAPP. Ora
 * le pagine del motore chiamano i componenti dell'interfaccia (<x-ui::…>),
 * la cui versione vera l'installazione costruisce coi componenti del proprio
 * brand book; qui resta soltanto ciò che fa FUNZIONARE l'interfaccia,
 * qualunque aspetto abbia:
 *
 *  - gli elementi che restano attaccati al bordo mentre si scorre;
 *  - gli strati che si sovrappongono: modale, pannelli, barra a scomparsa;
 *  - i contenitori che scorrono, invece di allargare la pagina;
 *  - la griglia a 12 colonne, con la quota che il componente `colonna`
 *    scrive in linea (`--ds-col`);
 *  - ciò che è nascosto finché non serve;
 *  - il testo per i soli lettori di schermo.
 *
 * Le meccaniche si agganciano agli ATTRIBUTI, non alle classi: le pagine le
 * dichiarano chiamando un componente (`data-m="finestra testa-ferma"`), e lo
 * stato passa dagli attributi che il brand book già veste (aria-*, hidden).
 * Le classi sono dei componenti, cioè di chi installa: qualunque classe usi
 * il brand book di un figlio, la tabella tiene ferma l'intestazione.
 *
 * Qui non c'è un colore, una spaziatura, un carattere, un bordo, un raggio o
 * un'ombra, e nessun token del brand book (`--sv-*`). Dove una meccanica
 * dipende da una misura la legge da una variabile `--ds-*` che il contenuto
 * dichiara (public/ui/personalizzato.css nel primogenito), con un valore
 * neutro di riserva: senza i componenti veri l'Admin è nudo, ma funziona.
 *
 * Si carica DOPO le risorse dell'installazione: un componente non può
 * rompere una meccanica. Il presidio controlla che qui dentro non entrino
 * forma né classi (`scripts/verifica-contratto.sh`, «l'aspetto si costruisce
 * coi componenti»).
 */

/* Il modello di scatola, per tutta la pagina: senza, una misura data da un
   componente vorrebbe dire due cose diverse per un bottone e per un campo. */
*, *::before, *::after { box-sizing: border-box; }

/* Ciò che è nascosto resta nascosto anche se un componente gli dà un
   display (una casella del brand book è inline-flex, e un attributo hidden
   da solo perde contro una classe): [hidden] è lo STATO, che il motore
   scrive, e vince sempre. */
[hidden] { display: none !important; }

/* ---- Ciò che resta attaccato al bordo ---- */
[data-m~="fisso-alto"] { position: sticky; top: 0; z-index: calc(var(--ds-z-sticky, 100) + 1); }
[data-m~="fisso-sotto-barra"] { position: sticky; top: var(--ds-h-topbar, 0); z-index: var(--ds-z-sticky, 100); }
[data-m~="fisso-basso"] { position: sticky; bottom: 0; z-index: var(--ds-z-sticky, 100); }

[data-m~="scorre"] { overflow: auto; }
[data-m~="scorre-x"] { overflow-x: auto; }
[data-m~="scorre-y"] { overflow-y: auto; }

/* Un contenitore che scorre in una finestra: non più alto dello schermo meno
   ciò che gli sta sopra (la misura la dà il contenuto), così l'intestazione che
   resta ferma resta anche visibile. */
[data-m~="finestra"] { max-height: var(--ds-h-finestra, none); overflow: auto; }

[data-m~="testa-ferma"] thead th { position: sticky; top: 0; z-index: 1; }
[data-m~="tabella-congelata"] th:first-child,
[data-m~="tabella-congelata"] td:first-child { position: sticky; left: 0; z-index: 2; }
[data-m~="tabella-congelata"] [data-cella="azioni"] { position: sticky; right: 0; z-index: 2; }
[data-m~="tabella-congelata"] thead th:first-child,
[data-m~="tabella-congelata"] thead [data-cella="azioni"] { z-index: 3; }

[data-m~="griglia"] { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
[data-m~="colonna"] { grid-column: span min(var(--ds-col, 12), 12); min-width: 0; }
@media (max-width: 1400px) {
  [data-m~="colonna"] { grid-column: span min(var(--ds-col-md, var(--ds-col, 12)), 12); }
}
@media (max-width: 1100px) {
  [data-m~="colonna"] { grid-column: 1 / -1; }
}

/* Una sezione raggiunta dall'indice atterra sotto la pila ferma (barra e
   indice), non dietro: le due altezze le dà il contenuto. */
[data-section] { scroll-margin-top: calc(var(--ds-h-topbar, 0px) + var(--ds-h-indice, 0px)); }

[data-m~="ancora"] { position: relative; }
[data-m~="sopra"] { position: absolute; top: calc(100% + var(--ds-popover-gap, 0px)); left: 0; z-index: var(--ds-z-overlay, 900); }

[data-m~="modale"] { position: fixed; inset: 0; z-index: var(--ds-z-modal, 1000); overflow-y: auto; }

/* Il messaggio a comparsa sta in un angolo dello schermo, non dove cadrebbe
   nel flusso: la distanza dal bordo la dà il contenuto. */
[data-m~="toast"] { position: fixed; right: var(--ds-toast-bordo, 0px); bottom: var(--ds-toast-bordo, 0px); z-index: var(--ds-z-modal, 1000); }

[data-m~="solo-lettori"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La barra laterale sul telefono: esce di lato, e il bottone del menu
   ([data-apri-barra]) la riporta dentro. */
[data-m~="barra-laterale"] { position: sticky; top: 0; z-index: calc(var(--ds-z-sticky, 100) + 2); }
[data-m~="solo-telefono"] { display: none; }
@media (max-width: 1023px) {
  [data-m~="barra-laterale"] { position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--ds-z-overlay, 900); transform: translateX(-100%); }
  [data-m~="barra-laterale"][data-aperta] { transform: none; }
  [data-m~="solo-telefono"] { display: inline-flex; }
}