/* Smart Locker - ritocchi sopra Bootstrap 5 */

body { font-size: 0.9375rem; }

.navbar-brand { letter-spacing: -.01em; }

/* Tabelle di elenco: compatte e leggibili */
.tabella-elenco { font-size: .875rem; }
.tabella-elenco th {
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  font-weight: 600;
}
.tabella-elenco td { vertical-align: middle; }
.tabella-elenco tbody tr:hover { background-color: var(--bs-tertiary-bg); }

/* Codici, EPC, canali: sempre a spaziatura fissa e allineati */
.mono { font-family: var(--bs-font-monospace); font-size: .8125rem; }
.num  { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Intestazione di pagina */
.testata-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.testata-pagina h1 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -.01em;
}
/* align-items: center non e' un dettaglio estetico, e' la correzione di un
   difetto. Senza, un contenitore flex allinea i figli a "stretch": nelle pagine
   dove accanto al pulsante "Nuovo ..." c'e' anche il modulo di ricerca, se
   quello va a capo su due o tre righe il pulsante si allunga per pareggiarne
   l'altezza e diventa un rettangolo blu alto quanto mezza pagina. Il pulsante
   non e' scritto male: e' scritto uguale a quello delle pagine senza ricerca,
   dove infatti si vede giusto. */
.testata-pagina .azioni {
  margin-left: auto;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* E questa e' la causa del perche' andava a capo, che e' poi la causa vera del
   pulsante gigante. Bootstrap dichiara .form-control e .form-select con
   width:100%: dentro un contenitore flex ognuno di quei campi pretende tutta
   la larghezza della riga, quindi la casella di ricerca, le tendine e il
   pulsante Cerca finiscono uno sotto l'altro anche su uno schermo largo il
   doppio del necessario. Con width:auto i campi tornano larghi quanto il loro
   contenuto - le min-width scritte nelle pagine continuano a valere - e la
   testata sta su una riga sola. */
.testata-pagina .azioni .form-control,
.testata-pagina .azioni .form-select {
  width: auto;
}

/* Griglia degli sportelli: si legge come il fronte del locker */
/* 150px e non piu' 112: da quando nel riquadro c'e' anche cosa contiene il
   vano, con 112 il codice del modello andava a capo in mezzo alla parola. */
.griglia-sportelli {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .5rem;
}
.vano {
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  padding: .5rem;
  background: var(--bs-body-bg);
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: block;
}
.vano:hover { border-color: var(--bs-primary); }
.vano .numero { font-weight: 600; font-size: 1.05rem; line-height: 1.1; }
.vano .canali {
  font-family: var(--bs-font-monospace);
  font-size: .6875rem;
  color: var(--bs-secondary-color);
}

/* Cosa c'e' dentro il vano.
   Sta sotto una riga di separazione perche' e' roba di un altro genere: sopra
   c'e' il mobile - numero, canali, contatto porta - sotto c'e' la merce. Le
   tre righe sono tagliate con l'ellissi invece di andare a capo: un riquadro
   che cambia altezza a seconda di quanto e' lungo il nome del modello fa
   ballare tutta la griglia a ogni aggiornamento automatico. Il testo intero
   resta nel suggerimento del mouse. */
.vano .contenuto {
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px solid var(--bs-border-color);
  line-height: 1.25;
}
.vano .contenuto > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vano .contenuto .modello { font-size: .75rem; font-weight: 600; }
.vano .contenuto .capi { font-size: .6875rem; color: var(--bs-secondary-color); }
.vano .contenuto .pacco {
  font-family: var(--bs-font-monospace);
  font-size: .6875rem;
  color: var(--bs-secondary-color);
}
/* "prenotato da": minuscolo e spento, perche' e' la parola che spiega il nome
   sotto, non un'informazione in piu' da leggere. Senza di essa il nome del
   cliente sembrava dire che il pacco era gia' suo. */
.vano .contenuto .motivo {
  font-size: .625rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--bs-secondary-color);
}
/* Il nome del cliente e' l'unica cosa colorata: se c'e', quel pacco non si
   tocca finche' la prenotazione e' viva. */
.vano .contenuto .cliente {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--bs-warning-text-emphasis, #997404);
}
.vano .contenuto.vuoto {
  font-size: .6875rem;
  color: var(--bs-tertiary-color, var(--bs-secondary-color));
  font-style: italic;
}
.vano.stato-LIBERO         { border-left: 4px solid var(--bs-success); }
.vano.stato-OCCUPATO       { border-left: 4px solid var(--bs-primary); }
.vano.stato-PRENOTATO      { border-left: 4px solid var(--bs-warning); }
.vano.stato-IN_APERTURA    { border-left: 4px solid var(--bs-info); }
.vano.stato-ANOMALIA       { border-left: 4px solid var(--bs-danger); }
.vano.stato-FUORI_SERVIZIO { border-left: 4px solid var(--bs-secondary); opacity: .6; }

/* Stato FISICO della porta, cioe' il contatto.
   Volutamente su un canale visivo diverso dallo stato logico: il bordo a
   sinistra dice cosa c'e' dentro il vano (libero, occupato, prenotato),
   l'etichetta in fondo dice se l'anta e' aperta adesso.

   L'etichetta e' una pastiglia piena e non una scritta colorata: il primo
   tentativo era una velatura al 22% sullo sfondo bianco, corretta sulla carta
   e illeggibile a monitor da un metro di distanza. Su un cruscotto d'impianto
   quello che conta e' accorgersene con la coda dell'occhio. */
.vano .porta {
  display: inline-block;
  margin-top: .25rem;
  padding: .05rem .45rem;
  border-radius: 1rem;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.vano.porta-aperta {
  background: #fff3cd;
  border-color: #ffc107;
  box-shadow: inset 0 0 0 1px #ffc107;
}
.vano.porta-aperta .porta { background: #ffc107; color: #3d2c00; }

.vano.porta-chiusa .porta { background: #d1e7dd; color: #0a3622; }

.vano.porta-ignota .porta {
  background: transparent;
  color: #6c757d;
  font-weight: 400;
  font-style: italic;
  text-transform: none;
}

.vano .numero { display: block; text-decoration: none; color: inherit; }
.vano .numero:hover { text-decoration: underline; }
.vano .apri {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .05rem .5rem;
  font-size: .6875rem;
  line-height: 1.4;
}

/* Riquadri di sintesi del cruscotto */
.riquadro { border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); padding: 1rem; height: 100%; }
.riquadro .valore { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.riquadro .etichetta { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bs-secondary-color); }

/* Anteprima import */
.riga-ERRORE  { background-color: rgba(220,53,69,.07); }
.riga-AVVISO  { background-color: rgba(255,193,7,.10); }

/* Form compatti */
.form-label { font-size: .8125rem; font-weight: 500; margin-bottom: .2rem; }
.obbligatorio::after { content: " *"; color: var(--bs-danger); }

/* Pagina di accesso */
.box-login { max-width: 380px; margin: 8vh auto; }