/* ============================================================
   PEPPER — I COLORI

   I tre file prima di questo sono lo stile di Dossiero, copiati
   da docs/stile/css/ senza toccarli: se di là cambia qualcosa,
   si ricopiano e basta. Qui dentro c'è SOLO quello che rende la
   consolle di Pepper riconoscibile come Pepper.

   E qui si vede il senso di quel kit: per cambiare marca non
   serve riscrivere un componente, bastano i nomi dei colori.
   Se un giorno serve toccare un componente per far tornare i
   conti, vuol dire che quel componente ha un colore scritto a
   mano invece di una variabile: si sistema là, non qui.

   Ed è successo davvero (5 settembre): tre difetti visti dal
   telefono — i blocchi di codice che allargavano la pagina, i
   bottoni della barra in alto larghi tutta la riga, un campo di
   testo schiacciato dentro una tabella impilata. Erano tutti e
   tre buchi del KIT, non cose di Pepper. Sono stati messi là
   (§10bis, §10ter e §11 di 03-componenti.css) e i tre file sono
   stati ricopiati: qui non è rimasta nessuna toppa. Se ne trovi
   una, è il segno che qualcuno ha risolto nel posto sbagliato.

   L'accento di Dossiero è il ciano. Quello di Pepper è il fuoco:
   il rosso e l'arancio che aveva già la barra in alto.

   Ordine: 01-token, 02-base, 03-componenti, 04-pepper.
   ============================================================ */

/* ---- Tema scuro (quello di casa) ---- */
:root {
  /* L'arancio acceso è l'unico che si legge davvero sul blu notte:
     il rosso #c0392b su quel fondo diventa marrone. */
  --accent: #ff8a4c;
  --accent-2: #ffb489;
  --accent-soft: rgba(255, 138, 76, 0.10);
  --accent-ring: rgba(255, 138, 76, 0.18);

  /* Il bottone che conta: il rosso-arancio della barra di Pepper.
     Al contrario del ciano di Dossiero è un colore SCURO, quindi
     il testo sopra è bianco e non nero. */
  --btn-bg: linear-gradient(135deg, #e0562e, #c0392b);
  --btn-text: #ffffff;
  --btn-glow: rgba(224, 86, 46, 0.32);
  --btn-glow-hover: rgba(224, 86, 46, 0.45);
}

/* ---- Tema chiaro: la carta color panna che Pepper aveva già ---- */
body.theme-light {
  --bg: #f6f3ee;
  --bg-soft: #efe9e0;
  --panel: #ffffff;
  --panel-2: #f1ece3;
  --card: #ffffff;
  --card-strong: #fbf8f3;
  --card-muted: #f1ece3;

  --text: #2b2724;
  --muted: #6f675c;
  --muted-strong: #423c35;

  --line: #eae4d9;
  --line-strong: #d9d2c5;

  /* Sul chiaro l'arancio sparisce: l'accento testuale torna al rosso
     Pepper, che sul bianco si legge. Il bottone resta com'è. */
  --accent: #c0392b;
  --accent-2: #a02c20;
  --accent-soft: rgba(192, 57, 43, 0.10);
  --accent-ring: rgba(192, 57, 43, 0.16);

  --shadow: 0 18px 48px rgba(60, 45, 30, 0.12);
  --shadow-soft: 0 10px 24px rgba(60, 45, 30, 0.10);
}

/* ---- Il marchio ----
   L'unica aggiunta di struttura: il logo nella barra in alto.
   Il kit prevede .brand-logo, qui gli si dà solo la faccia di Pepper. */
.brand-logo {
  width: 42px;
  height: 42px;
  display: block;
  /* Il logo ha il fondo trasparente: niente cerchio né ombra squadrata
     (quelle del kit, 03-componenti), solo l'ombra della sua sagoma. */
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Il numero di versione sotto il nome, in alto a sinistra: chi guarda
   la consolle deve sapere subito cosa sta girando davvero sul server. */
.brand-sub {
  letter-spacing: 0.04em;
}

/* ---- Il piede, che non si leggeva ----
   Il kit mette il piede sotto a menu E contenuto («footer footer»). Ma il menu
   è appiccicoso (position: sticky) e alto quanto lo schermo: arrivati in fondo
   alla pagina ci scivola sopra, e la scritta del piede — che parte da sinistra —
   finiva proprio sotto il menu. Si vedeva solo una riga vuota.
   Qui il menu tiene la sua colonna fino in fondo e il piede sta sotto al
   contenuto, dove niente lo copre. Sul telefono il menu è un cassetto e il
   piede è nascosto dal kit: lì non cambia niente. */
@media (min-width: 921px) {
  .app:not(.senza-menu) {
    grid-template-areas:
      "sidebar content"
      "sidebar footer";
  }
  .app:not(.senza-menu) > .footer {
    grid-column: auto;
  }
}

/* ---- Le pagine senza menu (il login) ----
   Il kit dà per scontato che il menu laterale ci sia sempre: la griglia tiene
   la sua colonna anche quando dentro non c'è niente, e il contenuto finisce
   spostato a destra di tutta la larghezza del menu. Sul login il menu non c'è
   (non si è ancora entrati), quindi lì la griglia torna a una colonna sola. */
.app.senza-menu {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "content"
    "footer";
}

/* ---- Chiavi e impronte ----
   Stringhe lunghe senza spazi (chiavi API, id di conversazione): senza
   questo sfondano la card invece di andare a capo. */
code.chiave {
  display: inline-block;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 9px;
  font-size: var(--fs-small);
  word-break: break-all;
  max-width: 100%;
}

/* ---- La larghezza del campo dei domini ----
   Il kit sa già cosa fare sul telefono con una `.cella-larga` (etichetta sopra,
   campo a tutta larghezza). Qui resta solo quanto è largo sul computer, che è
   una misura di questo campo e non una regola di stile.

   Sta nel foglio e non scritta dentro il tag: uno stile inline batte qualsiasi
   regola, compresa quella del telefono, e il campo resterebbe largo 260px
   dentro una schedina da 360. */
.cella-larga input[type="text"] {
  width: 260px;
  max-width: 100%;
  min-width: 0;
}

/* ---- Numeri in colonna ----
   Nelle tabelle di consumi e costi le cifre vanno a destra e con le
   cifre della stessa larghezza, o le colonne ballano riga per riga. */
.destra {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- Badge dentro le tabelle ----
   Il badge del kit è alto 30px: va bene da solo, ma in una cella accanto a un
   nome o in fila con altri si toccavano, sopra e sotto, e «Pepper 7b ·
   opus-5-5 ragiona» sembrava una parola sola. Dentro una tabella è più basso,
   e quando in una cella c'è più di una cosa stanno in una `.segni`: una fila
   che va a capo, con lo spazio tra una cosa e l'altra. `.sotto` la stacca
   dalla riga di testo di sopra. */
.table .status-badge {
  min-height: 22px;
  padding: 2px 8px;
}

.segni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.segni.sotto {
  margin-top: 6px;
}

/* Un nome in un elenco (i progetti che hanno scelto un modello): una targhetta
   chiara, non un semaforo — non dice a che punto siamo, dice chi. */
.targhetta {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  font-size: var(--fs-small);
  white-space: nowrap;
}

/* Sul telefono la cella è una riga «etichetta … valore»: il valore sta a
   destra, e la fila anche. In una `.cella-larga` l'etichetta va sopra e la
   fila parte da sinistra, come il testo. */
@media (max-width: 640px) {
  .table.is-stacked td:not(.cella-larga) .segni {
    justify-content: flex-end;
  }
}

/* ------------------------------------------------------------
   Il pannello riordinato (ottobre 2026)
   ------------------------------------------------------------ */

/* I titoletti dei gruppi nel menu: Panoramica, Pepper, Chi lo usa, Sistema. */
.sidebar nav .menu-gruppo {
  margin: var(--space-4) var(--space-3) var(--space-1);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sidebar nav .menu-gruppo:first-child { margin-top: 0; }

/* L'avviso di un salvataggio galleggia in basso: la pagina resta dov'eri e
   l'avviso deve vedersi lo stesso. */
.alert.avviso-volante {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 50;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: min(520px, calc(100vw - 2 * var(--space-4)));
  margin: 0;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.avviso-chiudi {
  flex: none;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* «Come funziona»: le spiegazioni lunghe restano tutte, ma chiuse. */
details.come-funziona {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--fs-small);
}
details.come-funziona > summary {
  display: inline-block;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
}
details.come-funziona > summary::-webkit-details-marker { display: none; }
/* La «i» è disegnata, non un carattere: il carattere ⓘ in Roboto non c'è e
   su molti telefoni esce un rettangolo. */
details.come-funziona > summary::before {
  content: "i";
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: -2px;
}
details.come-funziona[open] > summary { margin-bottom: var(--space-2); }
details.come-funziona .hint { margin: 0 0 var(--space-2); }

/* Una card che si apre col clic sul titolo: «Nuovo progetto», «Versioni». */
details.card > summary {
  cursor: pointer;
  font-size: var(--fs-h2);
  font-weight: 500;
}
details.card[open] > summary { margin-bottom: var(--space-4); }

/* La scheda di un progetto: le righe «nome — comando» di una sezione. */
.voci-scheda { display: grid; gap: var(--space-3); }
.voce-scheda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.voce-scheda:last-child { padding-bottom: 0; border-bottom: 0; }
.voce-scheda .voce-nome { min-width: 0; flex: 1 1 260px; }
.voce-scheda .voce-nome b { display: block; color: var(--text); font-weight: 500; }
.voce-scheda .voce-nome small { display: block; color: var(--muted); }
.voce-scheda .voce-nome .segni,
.voce-scheda .voce-nome > .hint { margin-top: var(--space-1); }
.voce-scheda form { margin: 0; }

/* Il filtro per nome sopra l'elenco dei progetti. */
.cerca-progetti { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.cerca-progetti .campo { flex: 1; min-width: 200px; max-width: 360px; }
.cerca-progetti .campo input { width: 100%; }
.cerca-progetti .hint { margin: 0 0 var(--space-2); }
/* Le righe scartate dal filtro: sul telefono la tabella è a schede e il suo
   display:block vincerebbe sull'hidden del browser. */
.table tr[hidden] { display: none !important; }

/* ---- Le richieste dal modulo del gateway (admin/richieste.php) ---- */
.richiesta { padding: 16px 0; border-top: 1px solid var(--line); }
.richiesta header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.richiesta p { margin: 10px 0 0; line-height: 1.55; }
.richiesta.is-nuova { border-left: 3px solid var(--accent); padding-left: 14px; }

/* ---- Lo stato di una chiave salvata, sotto il suo campo (chiave_stato) ---- */
.chiave-stato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 8px;
}
.chiave-stato .hint { margin: 0; }

/* ---- Un riquadro che si apre con un clic (Webchat → Persone) ---- */
details.card > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  cursor: pointer;
  list-style: none;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h2 { margin: 0; }
details.card > summary h2::before {
  content: "▸";
  display: inline-block;
  margin-right: 10px;
  color: var(--accent);
  transition: transform 0.15s ease;
}
details.card[open] > summary h2::before { transform: rotate(90deg); }
details.card[open] > summary { margin-bottom: var(--space-3); }

/* ---- Il «ti resta» che si ricalcola mentre scrivi (scheda del piano) ---- */
.margine-vivo { margin: 0; }
.margine-vivo.is-ok strong { color: var(--state-green); }
.margine-vivo.is-perdita { color: var(--text); }
.margine-vivo.is-perdita strong { color: var(--state-red); }