/*
 * Asset-ID - strato di stile sopra AdminLTE 4.
 *
 * Solo quello che AdminLTE non ha: il marchio, le linguette del workspace,
 * le intestazioni ordinabili e un paio di dettagli di leggibilita'. Tutto il
 * resto arriva dal tema, in modo che un aggiornamento di AdminLTE non debba
 * fare i conti con uno strato di sovrascritture.
 *
 * Il sito funziona in tema chiaro e scuro: dove serve un colore proprio si
 * usano le variabili di Bootstrap (--bs-*), che cambiano con il tema, invece
 * di valori fissi.
 */

/* --------------------------------------------------------------- marchio */

:root {
  /*
   * Il rosso di Dynamic-ID, preso dal logo e non a occhio: e' il colore
   * dominante di assets/logo-dynamic-id.png, rosso pieno. Serve una
   * variabile e non il valore ripetuto, perche' il "-ID" compare nel
   * marchio delle pagine di accesso e in quello del menu laterale: con due
   * valori scritti a mano, il giorno che cambia ne resta indietro uno.
   */
  --asset-id-rosso: #ff0000;
}

.marchio {
  letter-spacing: -0.5px;
}

.login-logo .marchio {
  font-size: 2.1rem;
  font-weight: 300;
}

/*
 * Il "-ID" nel rosso dell'azienda, non nel blu del tema: "Asset" e' il
 * prodotto, "-ID" e' la famiglia (Dpp-ID, Safety-ID, Asset-ID), e si vede
 * che e' la stessa casa. Vale sia qui sia nel menu laterale, sotto.
 */
.login-logo .marchio b {
  font-weight: 700;
  color: var(--asset-id-rosso);
}

/* Icona di Asset-ID accanto alla scritta, nelle pagine di accesso */
.icona-marchio {
  width: 2.4rem;
  height: 2.4rem;
}

/*
 * Logo Dynamic-ID: e' l'azienda che fa il prodotto, non il prodotto, quindi
 * sta in fondo e in tono minore. Il file e' un PNG scuro: in tema scuro si
 * schiarisce invece di tenere un rettangolo nero.
 */
.logo-accesso {
  height: 28px;
  width: auto;
  opacity: 0.75;
}

.logo-footer {
  height: 20px;
  width: auto;
  opacity: 0.8;
}

[data-bs-theme="dark"] .logo-accesso,
[data-bs-theme="dark"] .logo-footer {
  filter: brightness(0) invert(1);
  opacity: 0.65;
}

/* Stesso rosso anche nel marchio del menu laterale. Il menu e' in tema
   scuro (data-bs-theme="dark"), e il rosso pieno ci si legge bene. */
.sidebar-brand .brand-text b {
  color: var(--asset-id-rosso);
  font-weight: 700;
}

/* Il marchio nel menu laterale: l'icona non va schiarita, e' gia' a colori */
.sidebar-brand .brand-image {
  width: 1.9rem;
  height: 1.9rem;
  margin-right: 0.5rem;
  float: none;
  opacity: 1;
}

/*
 * Menu utente in alto a destra: la larghezza minima evita che il nome
 * dell'utente vada a capo, ma senza l'altezza fissa di 175px che AdminLTE
 * impone alla sua struttura user-header.
 */
.menu-utente {
  min-width: 15rem;
}

/* --------------------------------------------------------------- linguette */

/*
 * Workspace a linguette, come in Tunnelwatcher: la barra puo' riempirsi,
 * quindi scorre in orizzontale invece di andare a capo e far ballare il
 * contenuto sotto.
 */
.barra-schede {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 0;
}

.barra-schede .nav-item {
  flex: 0 0 auto;
}

.barra-schede .nav-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  color: var(--bs-secondary-color);
  cursor: pointer;
}

.barra-schede .nav-link.active {
  font-weight: 600;
  color: var(--bs-emphasis-color);
  background-color: var(--bs-body-bg);
}

.barra-schede .etichetta-scheda {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La x di chiusura: discreta, piu' evidente al passaggio del mouse */
.chiudi-scheda {
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.15rem;
  border-radius: 0.2rem;
  opacity: 0.55;
}

.chiudi-scheda:hover {
  opacity: 1;
  color: var(--bs-danger);
  background-color: var(--bs-danger-bg-subtle);
}

/* Il pannello attivo: lo sfondo prosegue quello della linguetta */
.contenuto-schede {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-top: 0;
  border-radius: 0 0 0.375rem 0.375rem;
  padding: 1rem;
}

/* Il titolo di pagina sta nell'intestazione: nel pannello e' ridondante */
.pannello-scheda h1.page-header {
  display: none;
}

/* --------------------------------------------------------------- tabelle */

th.ordinabile {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

/*
 * Le frecce di ordinamento sono glifi di Font Awesome inseriti via CSS: non
 * stanno nell'HTML perche' cambiano a ogni clic e tenerle qui evita di
 * ridisegnare l'intestazione in JavaScript.
 *
 * font-weight: 900 seleziona la famiglia "solid": senza, il carattere non
 * viene trovato e al posto dell'icona compare un rettangolo vuoto.
 */
th.ordinabile::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.7em;
  opacity: 0.3;
  margin-left: 0.35rem;
  content: "\f0dc"; /* sort */
}

th.ordinata-asc::after {
  content: "\f0de"; /* sort-up */
  opacity: 0.9;
}

th.ordinata-desc::after {
  content: "\f0dd"; /* sort-down */
  opacity: 0.9;
}

/* --------------------------------------------------------------- vario */

/* Segnaposto delle parti non ancora realizzate (mappa del cruscotto) */
.riquadro-tratteggiato {
  border: 2px dashed var(--bs-border-color);
  border-radius: 0.5rem;
}

/* Voci di menu previste dal documento ma non ancora realizzate */
#menu-laterale .nav-link.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/*
 * Etichetta e badge "fase N" nella stessa riga: senza min-width:0 il testo
 * non si lascia comprimere e spinge il badge oltre il bordo del menu, che lo
 * taglia ("Storico movimenti fase" senza il numero).
 */
#menu-laterale .nav-link p {
  min-width: 0;
  gap: 0.35rem;
}

#menu-laterale .testo-voce {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#menu-laterale .nav-link .badge {
  flex: 0 0 auto;
}

/* Le chiavi dei parametri si leggono meglio a larghezza fissa */
.font-monospace {
  font-size: 0.9em;
}

/*
 * Zona di rilascio dei documenti, nella scheda dell'asset.
 * Il tratteggio dice "qui si puo' lasciare qualcosa" senza bisogno di
 * spiegarlo; il cambio di colore durante il trascinamento serve a capire
 * che il rilascio verra' raccolto da questo riquadro e non dalla pagina.
 */
.zona-rilascio {
  border: 2px dashed var(--bs-border-color);
  border-radius: 0.5rem;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.zona-rilascio:hover {
  border-color: var(--bs-primary);
}
.zona-rilascio.in-rilascio {
  border-color: var(--bs-primary);
  background-color: rgba(13, 110, 253, 0.08);
}

/*
 * Mappa del cruscotto. L'altezza e' fissa e generosa: la mappa e' larga
 * quanto la pagina (richiesta del 06/11/2026) e una striscia bassa su tutta
 * la larghezza non lascia spazio ai segnaposti di aree vicine.
 * In verticale (telefono) si abbassa, altrimenti si mangia tutto lo schermo.
 */
.mappa-cruscotto {
  width: 100%;
  height: 460px;
  background-color: var(--bs-secondary-bg);
}
@media (max-width: 767.98px) {
  .mappa-cruscotto {
    height: 300px;
  }
}

/* Legenda della mappa: gli stessi colori dei segnaposti. */
.pallino {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-right: 0.25rem;
  vertical-align: -1px;
}
.pallino-ok {
  background-color: #198754;
}
.pallino-avviso {
  background-color: #dc3545;
}
.pallino-vietata {
  background-color: #fd7e14;
}
.pallino-uscita {
  background-color: #ffc107;
}

/*
 * Icone dei tag nell'elenco asset: una per tag, affiancate.
 * Si distinguono per colore e simbolo, non solo per colore: chi non
 * distingue i colori deve comunque capire se un asset ha un BLE o un RFID.
 */
.icona-tag {
  font-size: 0.85rem;
  margin-right: 0.15rem;
}
.icona-tag-ble {
  color: #0d6efd;
}
.icona-tag-nfc {
  color: #6f42c1;
}
.icona-tag-uhf {
  color: #20c997;
}

/* Il QR nella scheda dell'asset e nella pagina di stampa. */
.qrcode-asset svg {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Diario delle operazioni: i valori prima/dopo di un campo modificato. */
.diario-cambiamento {
  font-family: var(--bs-font-monospace);
  font-size: 0.78rem;
}
.diario-prima {
  color: var(--bs-danger);
  text-decoration: line-through;
}
.diario-dopo {
  color: var(--bs-success);
}

/* Logo dell'azienda: il riquadro tiene l'altezza anche quando e' vuoto, cosi'
   la scheda non salta quando si carica o si toglie l'immagine. */
.riquadro-logo {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--bs-border-color);
  border-radius: 0.375rem;
  padding: 0.5rem;
}
.logo-azienda {
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
}