/*
 * NetGuardian — La barra condivisa dalle pagine nuove (Fase 2)
 *
 * Un foglio a parte e non una copia in ogni pagina: tre copie divergono al
 * primo cambiamento, e una voce di menu che esiste in due pagine su tre è
 * peggio di nessun menu — insegna che la navigazione non è affidabile.
 *
 * Serve anche a rendere evidente dove ci si trova: senza `aria-current`, tre
 * collegamenti identici lasciano chi guarda a dedurre la pagina dal titolo.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * I COLORI VENGONO DALLA TAVOLOZZA (21 ottobre 2026)
 *
 * Questo foglio nasceva coi colori scritti a mano — scuri, dell'unico tema
 * che c'era. Con il tema chiaro arrivato il 20 ottobre quei valori erano la
 * quinta tavolozza del prodotto: la barra restava scura anche sul chiaro, e
 * «la barra non segue il tema» è un difetto che si nota per primo. Da qui in
 * poi i colori sono le variabili di `condiviso.css`, e la barra li segue
 * in tutti e due i temi senza una regola in più.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * IL MENÙ PASSA A SINISTRA (21 ottobre 2026)
 *
 * La barra in alto occupa la prima riga di schermo per tutta la sua altezza,
 * e il contenuto che si guarda ogni giorno ci passa sotto. Il menù verticale
 * a sinistra, fermo, lascia tutta la larghezza al contenuto — è la correzione
 * più concreta del rifacimento in `docs/RIEPILOGO-E-SEDE-DA-RIFARE.md`.
 *
 * Non si tocca il markup delle pagine (la barra è scritta a mano dentro
 * ognuna): si ripiega con i fogli condivisi. Le regole con `:has()` valgono
 * solo dove la barra ha le sue voci (`nav.ng-nav`): le pagine d'ingresso
 * (invito, reimposta) tengono la barra ridotta in alto, com'è. Un browser
 * senza `:has()` — o uno schermo stretto, sotto i 641 pixel — vede la barra
 * di sempre in alto: il peggio che può succedere è non vedere il cambiamento.
 */

.ng-testa {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 24px;
  background: var(--pannello);
  border-bottom: 1px solid var(--bordo);
}

.ng-marchio {
  font-size: 17px;
  font-weight: 600;
  color: var(--accento);
  letter-spacing: -0.01em;
}

.ng-nav {
  display: flex;
  gap: 4px;
}

.ng-nav a {
  padding: 6px 13px;
  border-radius: 6px;
  font-size: 15.5px;
  text-decoration: none;
  color: var(--tenue);
  border: 1px solid transparent;
}

.ng-nav a:hover {
  color: var(--testo);
  background: var(--pannello-2);
}

/* La pagina corrente si distingue anche senza colore: il bordo la circoscrive.
   Chi non distingue i colori deve comunque sapere dov'è. */
.ng-nav a[aria-current="page"] {
  color: var(--accento);
  border-color: var(--bordo);
  background: var(--pannello-2);
}

/* Le voci di amministrazione dell'impianto portano fuori dal pannello del
   cliente — sono un'altra cosa, e si vede senza doverlo leggere. Il bordo, non
   il solo colore: chi non distingue i colori deve comunque accorgersene. */
.ng-nav a.ng-impianto {
  color: var(--viola);
  border-color: var(--bordo);
}

.ng-nav a.ng-impianto:hover {
  background: var(--pannello-2);
}

.ng-stato {
  margin-left: auto;
  font-size: 14.5px;
  color: var(--tenue);
}

/* ── Chi è entrato, e come se ne va ──────────────────────────────────────────
 *
 * In fondo alla barra, dopo lo stato: è il posto in cui la si cerca, e non
 * compete con le voci di menu — «Esci» premuto per sbaglio al posto di «Sedi»
 * fa rifare l'accesso a chi voleva solo cambiare pagina.
 *
 * L'indirizzo accanto al pulsante risponde alla domanda che viene prima
 * dell'uscita: «con quale utente sono dentro?». Si tronca invece di andare a
 * capo — un indirizzo lungo non deve alzare la barra di una riga — e resta
 * intero nel `title`.
 */
.ng-utente {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ng-chi {
  font-size: 14.5px;
  color: var(--tenue);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

/* Si vede che è un collegamento solo avvicinandosi: nella barra è un'etichetta,
   e sottolinearlo sempre lo farebbe competere con le voci di menu. */
.ng-chi:hover { color: var(--testo); border-bottom-color: var(--bordo); }
.ng-chi:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

.ng-esci {
  /* `width` e `min-height` dichiarati apposta, e non sono ridondanti: la barra
     vive dentro pagine che hanno un loro `button { width: 100% }` per i moduli
     — `profilo.html` è la prima — e quella regola, più generica ma non
     sovrascritta qui, allargava «Esci» a tutta la riga schiacciando
     l'indirizzo accanto. Un componente condiviso non può dipendere da cosa NON
     c'è nel foglio della pagina che lo ospita. */
  width: auto;
  min-height: 0;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--testo);
  background: var(--pannello-2);
  border: 1px solid var(--bordo);
  border-radius: 6px;
  padding: 6px 13px;
  cursor: pointer;
}

.ng-esci:hover { background: var(--bordo); }

/* Il contorno alla tastiera: si esce anche senza mouse, e il pulsante è
   l'ultimo elemento della barra — chi ci arriva con Tab deve vedere dov'è. */
.ng-esci:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }

/* ── Telefono ────────────────────────────────────────────────────────────────
 *
 * A 375 pixel la barra andava a capo tre volte e «aggiornato ... fa» finiva su
 * una riga sua, allineato a destra, dove sembrava un'altra cosa. Qui il marchio
 * e l'ora stanno sulla stessa riga — l'ora e' un'informazione di contorno e non
 * merita una riga propria — e le voci di menu scendono sotto, larghe abbastanza
 * da essere toccate: sotto i 44 punti un dito sbaglia bersaglio, e la voce
 * sbagliata su questo pannello significa aprire l'inventario di un altro
 * cliente.
 */
/* ── La scelta: cliente, poi sonda ───────────────────────────────────────────
 *
 * Sta nella barra e non nella pagina perche' e' la stessa scelta su ogni
 * schermata: un menu che in una pagina ricorda e in un'altra no insegna che la
 * scelta non e' affidabile.
 *
 * Il sottomenu e' visibilmente subordinato — piu' stretto, e sul telefono va a
 * capo sotto il primo — perche' l'ordine e' quello: senza cliente non c'e'
 * nessuna sonda da scegliere, e il `disabled` da solo non lo racconta.
 */
.ng-scelta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ng-scelta select {
  background: var(--pannello-2);
  color: var(--testo);
  border: 1px solid var(--bordo);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14.5px;
  font-family: inherit;
  /* A 260 pixel «Sarda Domotica — 2 sonde, 1 sede senza sonda» si troncava su
     «1 sed», che e' peggio di non scriverlo: il riassunto serve a scegliere
     senza aprire, e mezzo riassunto non fa scegliere niente. */
  max-width: 360px;
}

.ng-scelta select:focus { outline: 2px solid var(--accento); outline-offset: -1px; }

/* Una scelta ancora da fare non e' un guasto, ma non deve nemmeno passare
   inosservata: chi non guarda la barra non capirebbe perche' la pagina e'
   vuota. */
.ng-scelta select:invalid,
.ng-scelta select[data-scegliere="si"] { border-color: var(--ambra); }

.ng-scelta select:disabled { color: var(--spento); border-color: var(--bordo); }

/* Il sottomenu porta il nome della sonda, che e' piu' corto del nome del
   cliente col suo riassunto. */
#ngSonda { max-width: 220px; }

/* ── La pagina non è partita ─────────────────────────────────────────────────
 *
 * Lo scrive `avvio.js` quando l'avvio fallisce per una ragione che non è un
 * accesso scaduto: il server non risponde. Sta qui e non nelle pagine perché è
 * lo stesso riquadro ovunque, e perché alcune pagine hanno il loro dentro un
 * pannello ancora nascosto in quel momento. */
.ng-guasto {
  max-width: 1400px;
  margin: 24px auto 0;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--rosso);
  color: var(--rosso);
  background: rgba(239, 68, 68, .08);
  font-size: 15.5px;
}

/* ── La seconda riga: cosa si fa nella sezione in cui si è ───────────────────
 *
 * Il primo livello dice DOVE sei — sei luoghi, sempre gli stessi —, il secondo
 * cosa lì si può fare. Sta fuori dalla barra e non dentro, perché non è la
 * stessa specie di cosa: la barra resta ferma mentre si naviga, questa cambia
 * a ogni sezione, e mescolarle avrebbe fatto ballare le voci sotto il dito.
 *
 * Si vede che è subordinata senza doverlo leggere: fondo più scuro, voci più
 * piccole, e compare solo quando c'è più di una cosa da scegliere — una voce
 * sola ripeterebbe il nome della sezione senza offrire niente.
 */
.ng-sotto {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 24px;
  background: var(--fondo);
  border-bottom: 1px solid var(--bordo);
}

.ng-sotto a {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 14.5px;
  text-decoration: none;
  color: var(--tenue);
  border: 1px solid transparent;
}

.ng-sotto a:hover {
  color: var(--testo);
  background: var(--pannello-2);
}

/* Come nella barra: il bordo e non il solo colore, perché chi non distingue i
   colori deve comunque sapere dov'è. */
.ng-sotto a[aria-current="page"] {
  color: var(--accento);
  border-color: var(--bordo);
  background: var(--pannello-2);
}

.ng-sotto a:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }

@media (max-width: 640px) {
  .ng-testa {
    padding: 12px 14px;
    gap: 10px;
    row-gap: 12px;
  }

  .ng-stato {
    /* Prima dell'elenco nell'ordine visivo, sulla riga del marchio. */
    order: 1;
    font-size: 13.5px;
  }

  .ng-nav {
    order: 2;
    width: 100%;
    gap: 6px;
    /* Con quattro voci stavano in riga; a sette la riga sfondava di 175 pixel e
       la PAGINA scorreva in orizzontale — il difetto che si nota per primo e si
       perdona per ultimo. Vanno a capo. */
    flex-wrap: wrap;
  }

  .ng-nav a {
    /* `flex: 1` da solo comprimeva ogni voce fino a farla sbordare invece di
       mandarla a capo: senza una larghezza minima, «Impostazioni» finiva a 550
       pixel su uno schermo da 375. Con la base al 28% ne stanno tre per riga,
       tutte sopra i 44 punti. */
    flex: 1 1 28%;
    text-align: center;
    padding: 11px 6px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: var(--bordo);
    font-size: 14.5px;
  }
  /* A 375 pixel due menu affiancati lasciano 90 pixel a testa, e un nome di
     cliente diventa illeggibile. Uno per riga, alti abbastanza da essere
     toccati: sotto i 44 punti un dito sbaglia bersaglio, e il bersaglio
     sbagliato qui significa aprire i dati di un altro cliente. */
  .ng-scelta {
    order: 3;
    width: 100%;
    gap: 8px;
  }

  .ng-scelta select {
    flex: 1 1 100%;
    max-width: none;
    min-height: 44px;
  }

  /* Sulla riga sua, in fondo: l'indirizzo a sinistra e il pulsante a destra,
     alto abbastanza da essere toccato senza sbagliare bersaglio. */
  .ng-utente {
    order: 4;
    width: 100%;
    justify-content: space-between;
  }

  .ng-chi { max-width: 60%; }

  .ng-esci {
    min-height: 44px;
    padding: 11px 18px;
  }

  /* Anche la seconda riga si tocca con un dito: stessa regola dei 44 punti. */
  .ng-sotto {
    padding: 8px 14px;
    gap: 6px;
  }

  .ng-sotto a {
    flex: 1 1 28%;
    text-align: center;
    padding: 11px 6px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: var(--bordo);
  }

  #ngSonda { max-width: none; }
}

/* ── Il menù a sinistra ──────────────────────────────────────────────────────
 *
 * Sopra i 640 pixel la barra diventa una colonna ferma a sinistra: le voci
 * principali in verticale, sotto la scelta del cliente e le voci della sezione,
 * e in fondo lo stato e l'uscita. Il contenuto prende tutta la larghezza
 * rimasta — è il pannello che si guarda ogni giorno, e adesso non passa più
 * sotto una riga di menu.
 *
 * `:has()` non è un capriccio: è ciò che permette di non toccare il markup
 * delle ventuno pagine con la barra. Dove le voci non ci sono (invito,
 * reimposta) o dove il browser non conosce `:has()`, vale tutto il foglio di
 * sopra e la barra resta in alto.
 */
@media (min-width: 641px) {
  body:has(.ng-testa .ng-nav) { padding-left: 236px; }

  .ng-testa:has(.ng-nav) {
    position: fixed;
    inset: 0 auto 0 0;
    width: 220px;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 20px 14px;
    overflow-y: auto;
    border-bottom: 0;
    border-right: 1px solid var(--bordo);
  }

  .ng-testa:has(.ng-nav) .ng-marchio {
    padding: 2px 10px 14px;
    font-size: 19px;
  }

  .ng-testa:has(.ng-nav) .ng-nav {
    flex-direction: column;
    gap: 2px;
  }

  .ng-testa:has(.ng-nav) .ng-nav a {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 16px;
  }

  /* La scelta del cliente in colonna: nella barra stretta due menu affiancati
     non ci stanno, e la larghezza piena è quella che il nome del cliente
     chiede. */
  .ng-testa:has(.ng-nav) .ng-scelta {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: 12px;
  }

  .ng-testa:has(.ng-nav) .ng-scelta select {
    max-width: none;
    width: 100%;
  }

  /* Le voci della sezione restano attaccate alla scelta: sono le cose che si
     fanno DOVE si è, e in fondo alla colonna nessuno le cercherebbe. */
  .ng-testa:has(.ng-nav) .ng-sotto {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: transparent;
    border: 0;
    padding: 12px 0 0;
    margin-top: 10px;
    border-top: 1px solid var(--bordo);
  }

  .ng-testa:has(.ng-nav) .ng-sotto a {
    padding: 7px 12px;
    border-radius: 8px;
  }

  /* In fondo alla colonna, appiccicati al bordo: lo stato è un'informazione di
     contorno e l'uscita il gesto che si cerca per ultimo — il margine che
     respinge tutto in basso sta sullo stato, che viene prima di entrambi. */
  .ng-testa:has(.ng-nav) .ng-stato {
    margin-left: 0;
    margin-top: auto;
    padding-top: 12px;
    font-size: 13.5px;
  }

  .ng-testa:has(.ng-nav) .ng-utente {
    margin-top: 8px;
  }

  .ng-testa:has(.ng-nav) .ng-chi { max-width: none; }
}