/* Lo stile delle pagine di accesso, in un posto solo.
   I colori stanno tutti qui: il tema chiaro e quello scuro cambiano solo
   questi, e il resto li segue. */
:root{
  --fondo:#f4f3f1; --carta:#fff; --riga:#e0ddd8;
  --inchiostro:#171b1d; --tenue:#6a7075; --fioco:#9aa0a4;
  --acceso:#0b6b58; --male:#a4322c; --nota:#b5710a; --boss:#7a3ea8;
  --ombra:0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark){
  :root{
    --fondo:#101416; --carta:#171c1f; --riga:#262d31;
    --inchiostro:#e8ecee; --tenue:#8e979d; --fioco:#5d666c;
    --acceso:#3fd39f; --male:#ff6a5e; --nota:#f0b429; --boss:#c08cec;
    --ombra:0 1px 2px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
/* Il fondo sta ANCHE su html: dove la pagina non arriva - il rimbalzo dello
   scroll, uno spiraglio sotto la barra - si vede html, e senza questo colore
   si vede una striscia nera (o bianca) che non e' di nessuno. */
html{-webkit-text-size-adjust:100%;background:var(--fondo)}
body{
  margin:0; background:var(--fondo); color:var(--inchiostro);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.foglio{max-width:420px;margin:0 auto;padding:34px 16px 40px}
.largo{max-width:900px}
h1{margin:0 0 4px;font-size:17px;letter-spacing:.14em;text-transform:uppercase;font-weight:650}
.sotto{color:var(--tenue);font-size:13px;margin:0 0 22px}
.carta{background:var(--carta);border:1px solid var(--riga);border-radius:12px;
       padding:20px;box-shadow:var(--ombra)}
label{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
      color:var(--tenue);margin:14px 0 5px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--riga);
             border-radius:7px;font:inherit;background:var(--fondo);color:var(--inchiostro)}
textarea{resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:2px solid var(--acceso);outline-offset:-1px}
input[type=checkbox]{width:auto;padding:0;accent-color:var(--acceso)}

/* Quello che si apre solo se serve: una spiegazione lunga non deve stare
   davanti a chi non la sta cercando. */
summary{cursor:pointer;font-size:13px;color:var(--acceso);list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"› ";display:inline-block;transition:transform .12s}
details[open] summary::before{transform:rotate(90deg)}
button{width:100%;margin-top:20px;padding:12px;border:0;border-radius:7px;
       background:var(--acceso);color:#fff;font:inherit;font-weight:600;cursor:pointer}
button:hover{filter:brightness(1.08)}
button:disabled{opacity:.5;cursor:default}
button.piano{width:auto;margin:0;padding:6px 11px;font-size:12.5px;font-weight:500;
             background:transparent;color:var(--tenue);border:1px solid var(--riga)}
button.piano:hover{color:var(--inchiostro)}
.dice{margin-top:16px;padding:11px 13px;border-radius:7px;font-size:13.5px;line-height:1.5}
.dice.male{background:color-mix(in srgb,var(--male) 12%,transparent);color:var(--male)}
.dice.bene{background:color-mix(in srgb,var(--acceso) 12%,transparent);color:var(--acceso)}
.dice.nota{background:color-mix(in srgb,var(--nota) 12%,transparent);color:var(--nota)}
.altrove{margin-top:20px;text-align:center;font-size:13px}
a{color:var(--acceso)}
.nota-piede{margin-top:24px;color:var(--fioco);font-size:12px;line-height:1.6}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
   color:var(--tenue);padding:8px 6px;border-bottom:1px solid var(--riga);font-weight:600}
td{padding:9px 6px;border-bottom:1px solid var(--riga);vertical-align:middle}
/* La linea separa le righe FRA loro, quindi sotto l'ultima non ci va: li' non
   separa niente, e disegna una riga sopra il bordo della carta.
   Si toglie in CSS e non contando gli elementi in JavaScript: cosi' vale per
   ogni tabella, anche quelle che verranno, senza che nessuno se ne ricordi. */
tbody tr:last-child td{border-bottom:none}
.liv{display:inline-block;font-size:10.5px;letter-spacing:.08em;
     text-transform:uppercase;padding:3px 8px;line-height:1.25;
     border-radius:5px;border:1px solid currentColor;white-space:nowrap}
.liv.boss{color:var(--boss)} .liv.admin{color:var(--acceso)} .liv.user{color:var(--tenue)}
/* LA RIGA DI TESTA SI ALLINEA AL CENTRO, non alla linea del testo.

   Con l'allineamento alla base ogni cosa che non e' testo si appoggiava dove
   poggiano le lettere: il divisore accanto a "casa" restava alto quanto quella
   parolina invece che quanto il titolo, un pallino di sette punti finiva a
   fondo riga, e una pillola sembrava caduta. Da lontano si legge come una riga
   storta - ed era proprio quello.

   Al centro tutto sta in mezzo all'altezza della riga, che e' quello che
   l'occhio si aspetta quando le cose sono di dimensioni diverse. */
.riga-cima{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
           margin-bottom:18px;min-height:26px}
.riga-cima .chi{margin-left:auto;font-size:12.5px;color:var(--tenue)}
.riga-cima h1{line-height:1.35}
/* Le voci di "chi sei": nome a sinistra, valore a destra, una riga per cosa.
   La linea sta FRA le righe, non sotto l'ultima. */
.voce{display:flex;gap:14px;align-items:baseline;padding:10px 0;
      border-bottom:1px solid var(--riga)}
.voce:last-child{border-bottom:none}
.voce .nome{color:var(--tenue);font-size:12.5px;min-width:88px}
.voce .valore{margin-left:auto;text-align:right;word-break:break-all}

/* UNA SESSIONE E' UNA SCHEDA, non una riga di tabella.

   Il testo sta a sinistra su tre righe corte, il bottone a destra, centrato su
   tutte e tre. Nessuna colonna da far stare in larghezza, quindi funziona
   uguale su un telefono e su uno schermo: e' la stessa forma, non due.

   L'indirizzo di posta puo' essere lunghissimo: si spezza invece di allargare
   la scheda e spingere fuori il bottone. */
.sessione{display:grid;grid-template-columns:minmax(0,1fr) auto;
          gap:6px 12px;align-items:center;padding:16px 0;
          border-bottom:1px solid var(--riga)}
.sessione:last-child{border-bottom:none}
.sessione .quale{grid-column:1;word-break:break-word;line-height:1.35}
.sessione .dove{grid-column:1;font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
                color:var(--tenue);display:flex;align-items:center;gap:7px;
                flex-wrap:wrap}
.sessione .tempi{grid-column:1;font-size:12px;color:var(--fioco)}
/* IL BOTTONE DI UNA RIGA VA A DESTRA - ma SOLO quello attaccato direttamente
   alla riga (il "chiudi" di una sessione). I pulsanti dentro un contenitore -
   i comandi di un utente, le pastiglie dei permessi - NON sono suoi: con
   `.sessione button` finivano tutti spinti nella stessa cella e si
   accavallavano. Il `>` prende il figlio diretto e basta. */
.sessione > button{grid-column:2;grid-row:1/4;align-self:center}
/* I COMANDI DI UN UTENTE (ruolo, blocca, togli): a destra su schermo largo,
   riga propria a tutta larghezza sul telefono. */
.sessione .comandi-utente{grid-column:2;grid-row:1/3;display:flex;gap:8px;
                          align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* Il setaccio delle sessioni. Gli input qui dentro sono larghi tutta la
   riga - va bene per un modulo, non per una casella che sta accanto a un
   titolo: qui si stringe e si spinge a destra. */
.setaccio{margin-left:auto;width:auto;min-width:190px;max-width:280px;
          padding:7px 10px;font-size:13px;border-radius:8px}

/* Una tendina dentro una riga, non dentro un modulo: si stringe al suo
   contenuto invece di prendersi tutta la larghezza. */
select.stretta{width:auto;padding:5px 8px;font-size:12.5px;border-radius:6px}

/* ---- roba che serve a piu' di una pagina --------------------------------
   Sta qui e non nella cartella di un modulo perche' un modulo che si scrive
   il suo riquadro se lo scrive a modo suo, e due pagine della stessa macchina
   smettono di somigliarsi. */

.vasto{max-width:1120px}

/* I NUMERI D'INSIEME: pochi numeri grossi in cima, prima del dettaglio.
   Due per riga sul telefono, tutti in fila sullo schermo. */
.cifre{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:16px}
@media(min-width:560px){ .cifre{grid-template-columns:repeat(4,1fr)} }
.cifre.cinque{grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){ .cifre.cinque{grid-template-columns:repeat(5,1fr)} }

/* TRE numeri restano tre anche sul telefono.

   In due colonne il terzo resta da solo su una riga sua, largo il doppio degli
   altri: si legge come se contasse di piu', e non e' vero. Tre riquadri stretti
   stanno bene anche su uno schermo da trecentosettanta punti, se le parole
   sotto sono corte. */
.cifre.tre{grid-template-columns:repeat(3,1fr)}
.cifra{background:var(--carta);border:1px solid var(--riga);border-radius:11px;
       padding:11px 13px;box-shadow:var(--ombra)}
.cifra b{display:block;font-size:23px;font-weight:600;line-height:1.15;
         font-variant-numeric:tabular-nums}
.cifra span{display:block;font-size:11px;letter-spacing:.09em;color:var(--tenue);
            text-transform:uppercase;margin-top:3px}

/* UNA GRIGLIA DI CARTE: una colonna sul telefono, due o tre sullo schermo. */
.griglia{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:640px){ .griglia{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .griglia.tre{grid-template-columns:repeat(3,1fr)} }

/* LE PILLOLE: una parola sola che qualifica, non un bottone. Stesso disegno
   dei livelli utente, cosi' "boss" e "da approvare" si leggono allo stesso
   modo perche' sono la stessa cosa: un'etichetta. */
.pillola{display:inline-block;font-size:10.5px;letter-spacing:.08em;
         text-transform:uppercase;padding:3px 8px;line-height:1.25;
         border-radius:5px;border:1px solid currentColor;white-space:nowrap;
         color:var(--tenue)}
.pillola.bene{color:var(--acceso)} .pillola.male{color:var(--male)}
.pillola.nota{color:var(--nota)}   .pillola.forte{color:var(--boss)}

/* IL REGISTRO: righe che scorrono, a larghezza fissa perche' sono output di
   programmi e le colonne devono restare colonne. L'inchiostro sta solo sui
   guai: se una riga non ha colore, e' andata bene. */
.registro{background:var(--fondo);border:1px solid var(--riga);border-radius:9px;
          padding:11px 12px;max-height:340px;overflow:auto;
          font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
          white-space:pre-wrap;word-break:break-word}
.registro .ok{color:var(--acceso)}
.registro .no{color:var(--male)}

/* Un bottone che non e' l'azione principale della pagina, ma nemmeno piano:
   fa una cosa da cui non si torna indietro. */
button.male{background:transparent;color:var(--male);border:1px solid currentColor}
button.male:hover{background:color-mix(in srgb,var(--male) 10%,transparent)}
button.stretto{width:auto;margin:0}

.riga-cima h1{font-size:14px}

/* TORNARE A CASA DA OGNI PAGINA.

   Sta in cima a sinistra, prima del titolo, uguale ovunque: si impara una
   volta. Senza, l'unica via di ritorno e' il tasto indietro del browser, che
   con tre pagine aperte una dentro l'altra vuol dire tre colpi - e chi arriva
   da un collegamento non ha nemmeno quelli. */
/* Il divisore accanto a "casa" e' alto quanto la riga, non quanto la parola:
   una lineetta corta accanto a un titolo piu' alto si legge come un errore. */
.a-casa{font-size:12px;letter-spacing:.07em;text-transform:uppercase;
        color:var(--tenue);text-decoration:none;padding:2px 10px 2px 0;
        border-right:1px solid var(--riga);margin-right:4px;white-space:nowrap;
        line-height:1.6;align-self:stretch;display:flex;align-items:center}
.a-casa::before{content:"\2039";margin-right:5px;font-size:15px;line-height:1}
.a-casa:hover{color:var(--acceso)}

/* IL MENU IN CIMA. Un modulo con piu' pagine le mette qui, sotto il proprio
   nome: si vede dove si e' e dove si puo' andare senza scendere in fondo, e la
   pagina sotto resta libera.

   La riga sotto il menu chiude la testata: quello che viene dopo e' contenuto,
   e senza uno stacco la prima carta sembra attaccata alla navigazione. */
/* IL MENU SCORRE DI LATO, NON IN SU.

   `overflow-x: auto` da solo non basta a dirlo: quando si mette un overflow
   diverso da `visible` su un asse, il browser porta l'ALTRO a `auto` per conto
   suo - e' scritto nelle specifiche, e il risultato e' una barra verticale
   dentro una riga di menu alta trenta pixel. Si vede come uno scatto quando la
   si tocca, e su Mac con le barre sempre visibili si vede proprio.

   Dicendo `hidden` in verticale la barra sparisce e la riga resta ferma. */
.menu{display:flex;gap:2px;margin:0 0 22px;
      border-bottom:1px solid var(--riga);
      flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
      -webkit-overflow-scrolling:touch}
.menu::-webkit-scrollbar{display:none}
.menu a{padding:8px 13px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
        color:var(--tenue);text-decoration:none;border-bottom:2px solid transparent;
        margin-bottom:-1px;white-space:nowrap;flex:0 0 auto}
.menu a:hover{color:var(--inchiostro)}
.menu a.qui{color:var(--inchiostro);border-bottom-color:var(--acceso)}
.fila{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.fila.fine{justify-content:flex-end}
.tenue{color:var(--tenue)}
.numeri{font-variant-numeric:tabular-nums}

@media(max-width:560px){
  td,th{padding:8px 4px}
  .menu a{padding:8px 9px;letter-spacing:.04em}
  .foglio{padding:22px 13px 34px}
  /* Sullo stretto la riga va a capo: la casella si prende tutta la larghezza
     invece di restare un francobollo schiacciato a destra. */
  .setaccio{margin-left:0;width:100%;max-width:none}

  /* SOLO LA RIGA UTENTE VA IN COLONNA sul telefono: ruolo, blocca, togli e le
     pastiglie sono troppa roba per stare schiacciata a destra. La riga
     SESSIONE invece ha un solo "chiudi", che a destra ci sta comodo su ogni
     schermo - e li' resta. */
  .sessione.utente{grid-template-columns:1fr}
  .sessione.utente .comandi-utente{grid-column:1;grid-row:auto;
                                   justify-content:flex-start;margin-top:4px}
  .sessione.utente .comandi-utente select{flex:1;min-width:0}
  .risorse{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}

/* ── NIENTE ZOOM, IN TUTTE LE PAGINE ─────────────────────────────────────

   Aggiunta alla schermata home questa e' un'app, e un'app non si pizzica per
   ingrandirla: lo zoom la sposta di lato, la barra dei comandi esce dallo
   schermo, e da li' non si capisce piu' come tornare indietro.

   Sta QUI e non nel foglio di una singola pagina perche' le pagine sono
   quattordici - la dashboard, gli utenti, le macchine, la flotta, Instagram
   Manager - e sono la stessa app: scritte una per volta, tre restano fuori e
   ci si accorge dell'ultima fra un mese.

   Non basta il meta viewport: Safari ignora `user-scalable=no`, di proposito.
   Servono tre difese, e questa e' la prima. */
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%}

/* Anche dentro: Safari applica `touch-action` per elemento, e un contenitore
   che scorre si riprende il pizzico se non glielo si toglie anche a lui. */
.foglio,.carta,.pagina,main,section,article{touch-action:manipulation}

/* LA SECONDA, ed e' quella che da' piu' fastidio: iOS ingrandisce DA SOLO
   quando si tocca un campo scritto sotto i sedici pixel, e poi non torna
   indietro. Non e' un gesto di chi guarda - succede scrivendo in una casella.

   Vale solo sul telefono: sul monitor sedici pixel in ogni casella sarebbero
   sproporzionati, e li' il problema non esiste. */
@media (max-width:820px){
  input,select,textarea{font-size:16px}
}


/* "riapri" e' verde: e' l'unico dei due pulsanti che restituisce qualcosa. */
button.piano.riapre{color:var(--acceso)}
button.piano.riapre:hover{border-color:var(--acceso)}


/* LE RISORSE di una persona: una pastiglia per risorsa, DUE STATI SOLI -
   acceso o spento. Il pallino a sinistra pieno = ce l'ha, cerchio vuoto = no;
   l'acceso ha anche il fondo appena tinto e il testo pieno, lo spento resta
   piatto e tenue. Chi l'abbia deciso, il ruolo o una mano, qui non si mostra.

   E STANNO IN GRIGLIA, in colonne allineate, non a capo dove capita: dieci
   moduli a fila libera erano un muro storto, e non si trovava quello cercato. */
.risorse{grid-column:1/-1;display:grid;
         grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
         gap:7px;margin-top:10px;padding-top:10px;border-top:1px solid var(--riga)}
button.ris{position:relative;width:100%;margin:0;padding:6px 12px 6px 26px;
           font-size:11.5px;font-weight:500;letter-spacing:.02em;line-height:1.25;
           border-radius:7px;cursor:pointer;text-align:left;white-space:nowrap;
           overflow:hidden;text-overflow:ellipsis;
           background:transparent;border:1px solid var(--riga);color:var(--fioco)}
button.ris:hover{filter:none;border-color:var(--tenue)}
button.ris:disabled{opacity:.4;cursor:default}
/* IL PALLINO DI STATO a sinistra: pieno = acceso, cerchio vuoto = spento. */
button.ris::before{content:"";position:absolute;left:9px;top:50%;
                   width:10px;height:10px;margin-top:-5px;border-radius:50%;
                   box-sizing:border-box;border:1.5px solid currentColor;
                   background:transparent}
button.ris.on::before{background:currentColor}
button.ris.on{color:var(--inchiostro);
              border-color:color-mix(in srgb,var(--tenue) 50%,var(--riga));
              background:color-mix(in srgb,var(--inchiostro) 5%,transparent)}