/* public/style.css — ConsoleDDT × fiordisnack.it (plan 02-01, Task 3)
 *
 * Token esatti da .planning/UI-DESIGN-SYSTEM.md:
 * --ink #222225, --paper #FFFFFF, --sole #FFD402, --leaf #519433,
 * --paprika #F9B21A, --sour #3875BA, --danger #cf2e2e.
 * Titoli Rubik 800 (fallback Archivo 800), corpo/dati Overpass.
 * Bottoni con ombra dura translate(4px,-4px) + -4px 4px 0 rgba(0,0,0,0.6).
 * Niente gradienti, niente animazioni; prefers-reduced-motion rispettato.
 * Layout PC fisso a due colonne, niente hamburger.
 */

:root {
  --ink: #222225;
  --paper: #FFFFFF;
  --crema: #FAF6EC;
  --sole: #FFD402;
  --leaf: #519433;
  --paprika: #F9B21A;
  --sour: #3875BA;
  --danger: #CF2E2E;
  --riga: #E8E2D2;
  --nc-fondo: #FBE3E3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--ink);
  font-family: "Overpass", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

h1, h2, .marchio {
  font-family: "Rubik", "Archivo", sans-serif;
  font-weight: 800;
  margin: 0 0 12px;
}

a { color: var(--sour); }

/* --- header --- */

.top {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 20px;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}

.marchio { font-size: 22px; margin: 0; display: flex; align-items: center; gap: 10px; }
.marchio .logo { height: 34px; width: auto; display: block; }
.scheda-login .marchio { justify-content: center; }
.scheda-login .logo { height: 44px; }
.scheda-login h1 { text-align: center; }

.top-nav { display: flex; gap: 16px; }

.top-nav a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

/* Righe DDT cliccabili ovunque (apri/chiudi espanso; link e controlli restano interattivi). */
tr.riga-ddt { cursor: pointer; }
tr.riga-ddt.selezionata { cursor: default; }

.utente { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.logout-form { margin: 0; }

/* --- layout due colonne --- */

.due-colonne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  padding: 16px 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.lista {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 16px 18px;
  overflow-x: auto;
}

.sidebar {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 16px;
  align-self: start;
  position: sticky;
  top: 16px;
}

/* --- ricerca --- */

.ricerca {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.ricerca label { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; }

.ricerca input, .ricerca select {
  font: inherit;
  padding: 6px 8px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
}

.ricerca input[type="search"] { min-width: 240px; }

/* Con JS attivo la ricerca è live (q, da, a, per): il bottone Cerca è il
   fallback per il submit senza JS e sparisce quando non serve più. */
.js .ricerca .btn-primario { display: none; }
/* Aggiorna serve solo con JS (rilegge la lista via fetch): senza JS non c'è. */
.ricerca .btn-aggiorna, .ricerca .agg-stato { display: none; }
.js .ricerca .btn-aggiorna { display: inline-block; }
.js .ricerca .agg-stato { display: inline; font-size: 13px; align-self: center; }

/* --- bottoni: ombra dura, press-to-zero --- */

.btn {
  font: inherit;
  font-weight: 700;
  padding: 8px 16px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transform: translate(4px, -4px);
  box-shadow: -4px 4px 0 rgba(0, 0, 0, 0.6);
}

.btn:hover { transform: translate(0, 0); box-shadow: none; }

.btn-primario { background: var(--sole); color: var(--ink); }

.btn-piccolo { padding: 4px 10px; font-size: 13px; }

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

.tabella-ddt, .tabella-righe {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabella-ddt th, .tabella-righe th {
  text-align: left;
  background: var(--paper);
  color: var(--ink);
  padding: 6px 8px;
  border-bottom: 2px solid var(--ink);
  font-family: "Rubik", "Archivo", sans-serif;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
}

.tabella-ddt td, .tabella-righe td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--riga);
}

.tabella-ddt tbody tr:nth-child(even) td, .tabella-righe tbody tr:nth-child(even) td {
  background: #F4EFE1;
}

.riga-ddt.selezionata td { background: var(--sole); }

/* --- lista interattiva: hover righe + TH ordinabili --- */

.tabella-ddt tbody tr.riga-ddt:hover td { background: #FFF0BF; }
.tabella-ddt tbody tr.riga-ddt.selezionata td,
.tabella-ddt tbody tr.riga-ddt.selezionata:hover td { background: var(--sole); }
.tabella-ddt th a.ord { color: var(--ink); text-decoration: none; white-space: nowrap; }
.tabella-ddt th a.ord:hover { text-decoration: underline; }
.tabella-ddt th a.ord.attivo { border-bottom: 3px solid var(--sole); }
.tabella-ddt tbody a:hover, .espanso-blocco a:hover { text-decoration: underline; }

tr.espanso td { background: var(--crema); padding: 12px; }

tr:target td, tr.evidenziata td { background: var(--sole); }

/* --- badge di stato: verde ok / arancio verifica / blu scarto --- */

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--ink);
}

.stato-ok { background: var(--leaf); color: #fff; }
.stato-verifica { background: var(--paprika); color: var(--ink); }
.stato-scarto { background: var(--sour); color: #fff; }

/* --- espanso: testata + tavola righe --- */

.testata {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.testata div { background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; padding: 6px 10px; }
.testata dt { font-size: 12px; font-weight: 700; text-transform: uppercase; }
.testata dd { margin: 0; font-weight: 600; }

/* --- sidebar anomalie --- */

.anomalie { list-style: none; margin: 8px 0 0; padding: 0; }

.anomalie li { margin-bottom: 8px; }

.anomalie a { text-decoration: none; color: var(--ink); }

.nota { font-size: 13px; }

.errore {
  color: var(--danger);
  font-weight: 700;
}

.vuoto {
  font-size: 16px;
  padding: 18px 6px;
}

/* --- login --- */

body.login { display: grid; place-items: center; min-height: 100vh; }

.scheda-login {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 28px 32px;
  width: 360px;
}

.scheda-login label { display: flex; flex-direction: column; margin-bottom: 12px; font-weight: 600; }

.scheda-login input {
  font: inherit;
  padding: 8px 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  margin-top: 4px;
}

/* Bottone bypass CONSOLEDDT_TEST_LOGIN: mai confondibile col login vero. */
.avviso-test-login {
  margin: 18px 0 6px;
  padding-top: 14px;
  border-top: 2px dashed var(--riga);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--danger);
}

/* --- paginazione --- */

.paginazione { margin-top: 12px; display: flex; gap: 12px; align-items: center; font-size: 14px; }

/* --- editor inline riga (plan 02-03, Task 3: form Gravity-like) --- */

.modulo-edit { margin-top: 10px; }

.campi-edit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 10px;
  margin-bottom: 10px;
}

.campi-edit label { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; }

.campi-edit small { font-weight: 400; color: var(--ink); opacity: 0.7; }

.campi-edit input {
  font: inherit;
  padding: 6px 8px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  margin-top: 2px;
}

.sola-lettura {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 0 0 10px;
}

.sola-lettura div { background: var(--crema); border: 2px solid var(--riga); border-radius: 10px; padding: 6px 10px; }
.sola-lettura dt { font-size: 12px; font-weight: 700; text-transform: uppercase; }
.sola-lettura dd { margin: 0; font-weight: 600; }

.azioni-edit { display: flex; gap: 10px; align-items: center; }

.azioni-riga { white-space: nowrap; }

.modifica-riga td { background: #FFF6D6; }

/* L'editor vive in un <td colspan> dentro una tabella ad auto-layout: senza
   vincolo, il contenuto (10 campi + letture) detta la larghezza dell'INTERA
   tabella, che sfonda .lista{overflow-x:auto} e si allarga ben oltre lo
   schermo (misurato: la tabella intera diventa >1000px anche su viewport
   stretti). width:1px + min-width:100% e' il trucco standard per far
   ignorare al layout automatico il contenuto largo e riprendere la
   larghezza reale disponibile della riga. */
.modifica-riga td { width: 1px; min-width: 100%; }

tr.riga-tolta td { text-decoration: line-through; opacity: 0.65; }

tr.riga-tolta td:last-child { text-decoration: none; opacity: 1; }

details.togli, details.aggiungi-riga { margin-top: 6px; }

details.togli summary, details.aggiungi-riga summary { cursor: pointer; font-weight: 700; }

details.aggiungi-riga { margin-top: 12px; }

details.aggiungi-riga summary.btn { display: inline-block; }

label.conferma { display: flex; gap: 8px; align-items: center; font-weight: 700; margin: 10px 0; }

.azioni-conflitto { margin-top: 12px; display: grid; gap: 10px; }

/* --- stati: ok / avvisi / caricamento --- */

.avviso-ok {
  background: #E7F2DF;
  border: 2px solid var(--leaf);
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
}

.caricamento { font-size: 15px; padding: 18px 6px; }

.btn-pericolo { background: var(--danger); color: #fff; }

.archiviate td { vertical-align: middle; }

/* --- accessibilita: focus sempre visibile --- */

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--sour);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none; animation: none; }
}

/* --- non conformita (fase 9, 09-04) ---
 * Un solo linguaggio danger + tinta --nc-fondo (UI-SPEC NC-02). Solo token
 * di scala 4/8/16/24 (+ 2px bordi di sistema) e colori di sistema + --nc-fondo.
 * Il danger qui e' attenzione, non distruzione: nessuna cancellazione NC.
 */

/* Riga DDT/NC in lista + riga legata in espanso: banda sempre visibile,
 * fondo tinta (vince sulla zebra, perde sulla selezionata sole). */
tr.riga-nc { box-shadow: inset 8px 0 0 var(--danger); }
tr.riga-nc td { background: var(--nc-fondo); }
.tabella-ddt tbody tr.riga-nc:hover td { background: var(--nc-fondo); }
tr.riga-ddt.selezionata.riga-nc td,
tr.riga-ddt.selezionata.riga-nc:hover td { background: var(--sole); }

/* Badge ⚠ NC: fondo danger, testo bianco, bordo ink 2px. */
.badge-nc { background: var(--danger); color: #fff; }

/* Badge categoria: tinta chiara, bordo ink di sistema. */
.badge-nc-categoria { background: var(--nc-fondo); color: var(--ink); }

/* Fascia sopra .testata: fondo danger, testo bianco Rubik 800 15px. */
.fascia-nc {
  background: var(--danger);
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px 16px;
  margin: 0 0 8px;
  font-family: "Rubik", "Archivo", sans-serif;
  font-weight: 800;
  font-size: 15px;
}
.fascia-nc a { color: #fff; }
.fascia-nc .nota-nc { font-family: "Overpass", "Segoe UI", sans-serif; font-weight: 600; }

/* Storico fornitore 12 mesi in sidebar: solo lettura. */
.storico-nc { margin: 16px 0 0; padding: 8px 0 0; border-top: 2px solid var(--riga); }

/* --- fine non conformita --- */

/* --- responsive (MOB-01): sotto 860px il due-colonne impila, la sidebar
   scende sotto la lista invece di restare sticky a fianco. Sopra la soglia
   nessuna riga qui si applica: desktop resta byte-identico a prima. --- */
@media (max-width: 860px) {
  .due-colonne { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
  .sidebar { position: static; }
  .top { flex-wrap: wrap; gap: 10px 16px; padding: 10px 12px; }
  .top-nav { order: 3; width: 100%; }
  .ricerca input[type="search"] { min-width: 0; flex: 1 1 100%; }
  .ricerca { gap: 8px; }
  .tabella-ddt, .tabella-righe { font-size: 13px; }
  .azioni-riga { white-space: normal; }
}

/* --- collegamento DDT-ordine (quick 261005) --- */
.fascia-ordine {
  background: #E6EEF8;
  border: 2px solid var(--sour);
  border-radius: 10px;
  padding: 8px 16px;
  margin: 0 0 8px;
  font-weight: 600;
}
.fascia-ordine .btn { margin-left: 8px; }
.avvisi-ordine { margin: 8px 0; padding-left: 20px; }
.avvisi-ordine li { margin: 4px 0; font-weight: 600; }
/* --- fine collegamento DDT-ordine --- */