/* ============================================================
   stile.css — Stile grafico "Magazzino K-LOCK"
   Pensato per essere leggibile anche da chi lavora in officina:
   font abbastanza grande, contrasti netti, pochi fronzoli.

   TEMA "NERO & ORO" (09/07/2026, richiesto da Daniele): stessa veste
   della bozza A del reparto grafico usata per la stampa dell'ordine
   fornitore (vedi app/services/pdf_ordine.py): fascia nera con filetto
   oro, sfondo nero "un pochino piu' chiaro", accenti e pulsanti oro,
   e le TABELLE come sul documento: testata nera con scritte oro,
   righe alternate bianco/tortora con testo scuro (le "caselle che si
   leggono" chieste da Daniele). Le STAMPE restano su fondo BIANCO:
   vedi il blocco @media print in fondo al file.
   ============================================================ */

:root {
  /* Palette Nero & Oro (bozza A del reparto grafico) */
  --scuro: #1d1d1b;                 /* fascia nera di testata */
  --oro: #c9a24a;                   /* oro pieno del brand */
  --oro-scuro: #a8843a;             /* oro per hover e testi su chiaro */
  --oro-chiaro: #d9b96e;            /* oro leggibile su fondo scuro */
  --crema: #f7f3ea;                 /* tortora/crema delle righe tabella */
  --colore-primario: #c9a24a;       /* oro: pulsanti, accenti */
  --colore-primario-scuro: #a8843a; /* hover dei pulsanti */
  --colore-titolo: #d9b96e;         /* titoli su fondo scuro */
  --colore-accento: #f59e0b;        /* arancio per gli avvisi */
  --colore-sfondo: #26241f;         /* sfondo pagina: nero caldo, piu' chiaro della fascia */
  --colore-card: #2e2b25;           /* sfondo schede / form */
  --colore-testo: #ede9df;
  --colore-testo-tenue: #a49e90;
  --colore-bordo: #4a453b;
  --colore-verde: #2eb85c;
  --colore-rosso: #e5534b;
  --colore-grigio-chiaro: #3a362e;  /* superficie alternativa (hover su fondo scuro) */
  --raggio-bordo: 6px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  color: var(--colore-testo);
  background-color: var(--colore-sfondo);
}

/* Link generici leggibili su fondo scuro */
a {
  color: var(--oro-chiaro);
}

/* --- Intestazione e menu principale --- */
header.intestazione {
  background-color: var(--scuro);
  color: white;
  padding: 0.8rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  /* filetto oro sotto la fascia nera, come nella bozza A di stampa */
  border-bottom: 3px solid var(--oro);
}

header.intestazione a.titolo-app {
  color: white;
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

/* Logo aziendale: nero nei documenti, reso bianco nell'intestazione
   scura con un filtro (cosi' basta un solo file SVG) */
.logo-app {
  height: 34px;
  filter: brightness(0) invert(1);
}

.by-unika {
  font-weight: 400;
  opacity: 0.75;
  font-size: 0.85rem;
}

/* Intestazione aziendale dei documenti stampabili (bolle d'ordine,
   schede fornitore) */
.intestazione-documento {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  margin: 0.4rem 0 1rem;
}

.intestazione-documento img {
  height: 46px;
}

.by-unika-documento {
  color: var(--colore-testo-tenue);
  font-size: 0.95rem;
  padding-bottom: 2px;
}

nav.menu-principale {
  display: flex;
  gap: 0.15rem;
  /* Tutte le voci su UNA sola riga: niente a capo. Se lo schermo è
     troppo stretto per contenerle, la barra scorre in orizzontale
     invece di andare a capo (così resta comunque su una riga). */
  flex-wrap: nowrap;
  overflow-x: auto;
  min-width: 0;
}

nav.menu-principale a {
  color: white;
  text-decoration: none;
  padding: 0.4rem 0.55rem;
  border-radius: var(--raggio-bordo);
  font-weight: 600;
  /* 0.78 -> 0.88rem: richiesto da Daniele (08/07/2026), "un pochino
     di piu'" ma sempre tutto su una riga */
  font-size: 0.88rem;
  white-space: nowrap;
}

nav.menu-principale a:hover,
nav.menu-principale a.attivo {
  background-color: var(--oro);
  color: var(--scuro); /* testo nero sull'oro: si legge meglio del bianco */
}

/* Voce della sezione corrente (classe aggiunta dallo script in
   _layout.html): oltre allo sfondo, una riga scura sotto il testo,
   così si distingue anche dal semplice passaggio del mouse. */
nav.menu-principale a.attivo {
  box-shadow: inset 0 -3px 0 rgba(29, 29, 27, 0.6);
}

/* Utente collegato nell'intestazione (nome + Utenti/Esci) */
.utente-menu {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--colore-testo-tenue);
}

.utente-menu a {
  color: var(--oro-chiaro);
  font-weight: 600;
}

/* --- Contenuto principale --- */
main.contenuto {
  max-width: 1200px;
  margin: 1.5rem auto;
  padding: 0 1.2rem;
}

h1 {
  font-size: 1.6rem;
  margin-top: 0;
  color: var(--colore-titolo);
}

h2 {
  font-size: 1.25rem;
  color: var(--colore-titolo);
}

/* --- Box/card generico --- */
.box {
  background: var(--colore-card);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo);
  padding: 1.2rem;
  margin-bottom: 1.2rem;
}

/* --- Dashboard Home: griglia di conteggi --- */
.griglia-conteggi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.conteggio {
  background: var(--colore-card);
  border: 1px solid var(--colore-bordo);
  border-left: 6px solid var(--colore-primario);
  border-radius: var(--raggio-bordo);
  padding: 1rem 1.2rem;
}

.conteggio .numero {
  font-size: 2rem;
  font-weight: 700;
  color: var(--colore-titolo);
}

.conteggio .etichetta {
  font-size: 0.95rem;
  color: var(--colore-testo-tenue);
}

.conteggio.avviso {
  border-left-color: var(--colore-accento);
}

.griglia-link-sezioni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.link-sezione {
  display: block;
  background: var(--colore-card);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo);
  padding: 1.2rem;
  text-decoration: none;
  color: var(--colore-testo);
  font-weight: 600;
  font-size: 1.05rem;
  transition: box-shadow 0.15s ease;
}

.link-sezione:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  border-color: var(--colore-titolo);
}

/* --- Form --- */
form.form-standard {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 640px;
}

label {
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: block;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo);
  font-size: 1rem;
  font-family: inherit;
  background: #1c1a16;
  color: var(--colore-testo);
}

input::placeholder,
textarea::placeholder {
  color: var(--colore-testo-tenue);
}

textarea {
  min-height: 90px;
  resize: vertical;
}

.campo-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.campo-checkbox input {
  width: auto;
}

/* --- Scelta allegati email (scheda ordine): una checkbox per documento --- */
fieldset.scelta-allegati {
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo);
  padding: 0.6rem 0.8rem;
}

fieldset.scelta-allegati legend {
  font-weight: 600;
  padding: 0 0.3rem;
}

fieldset.scelta-allegati .intestazione-disegni {
  margin: 0.6rem 0 0.3rem;
}

/* Tanti disegni = elenco lungo: oltre una certa altezza scorre da solo,
   così il form email resta compatto. */
.elenco-allegati {
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Titoli di sezione dentro l'elenco allegati (le lamiere a misura per
   prime, ben riconoscibili in oro). */
.elenco-allegati .sezione-allegati {
  margin: 0.5rem 0 0.15rem;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oro-chiaro);
  border-bottom: 1px solid var(--colore-bordo);
  padding-bottom: 2px;
}

.elenco-allegati .sezione-allegati:first-child {
  margin-top: 0;
}

/* --- Pulsanti --- */
.pulsante,
button {
  display: inline-block;
  background-color: var(--oro);
  /* testo nero sull'oro (come le scritte sulla fascia della bozza A) */
  color: var(--scuro);
  border: none;
  padding: 0.6rem 1.1rem;
  border-radius: var(--raggio-bordo);
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.pulsante:hover,
button:hover {
  background-color: var(--oro-scuro);
}

.pulsante.secondario {
  background-color: transparent;
  color: var(--oro-chiaro);
  border: 1px solid var(--oro);
}

.pulsante.secondario:hover {
  background-color: var(--colore-grigio-chiaro);
}

.pulsante.pericolo {
  background-color: #b3261e;
  color: white;
}

.pulsante.pericolo:hover {
  background-color: #8a1e18;
}

/* Tasto START (verde): avvia la commessa nel flusso di produzione */
.pulsante.start,
button.start {
  background-color: #1b7a3d;
  color: white;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.pulsante.start:hover,
button.start:hover {
  background-color: #145e2f;
}

.barra-azioni {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* Variante verticale: pulsanti in colonna, tutti della stessa larghezza,
   nell'ordine del flusso di lavoro (es. scheda commessa) */
.barra-azioni.verticale {
  flex-direction: column;
  align-items: stretch;
  max-width: 340px;
}

.barra-azioni.verticale form {
  display: contents;
}

.barra-azioni.verticale .pulsante,
.barra-azioni.verticale button {
  text-align: center;
}

/* --- Tabelle ---
   Come la tabella della bozza A di stampa (Daniele, 09/07/2026):
   testata NERA con scritte ORO, righe alternate BIANCO/TORTORA con
   testo scuro. Sono le "caselle che si leggono": chiare apposta,
   anche se il resto dell'app e' scuro. */
table.tabella-dati {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo);
  overflow: hidden;
}

table.tabella-dati th,
table.tabella-dati td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid #e6dfd0;
  font-size: 0.95rem;
}

table.tabella-dati td {
  color: #24221d;
}

table.tabella-dati th {
  background-color: var(--scuro);
  font-weight: 700;
  color: var(--oro);
  border-bottom: none;
}

table.tabella-dati th a {
  color: inherit;
  text-decoration: none;
}

/* Righe alternate bianco/tortora, come sul documento stampato */
table.tabella-dati tbody tr:nth-child(even) td {
  background-color: var(--crema);
}

table.tabella-dati tr:last-child td {
  border-bottom: none;
}

/* Sulle righe chiare i colori "da tema scuro" non si leggono:
   varianti scure di link, testi tenui, badge e campi input. */
table.tabella-dati a {
  color: var(--oro-scuro);
}

table.tabella-dati .testo-tenue {
  color: #6b6b66;
}

table.tabella-dati .badge.attivo {
  background-color: #e3f6e8;
  color: #1b7a3d;
}

table.tabella-dati .badge.inattivo {
  background-color: #eceae3;
  color: #6b6b66;
}

table.tabella-dati input[type="text"],
table.tabella-dati input[type="number"],
table.tabella-dati input[type="date"],
table.tabella-dati select {
  background: #ffffff;
  color: #24221d;
  border-color: #cfc8b6;
}

table.tabella-dati .miniatura-placeholder {
  background: #f0ece1;
  border-color: #d8d2c2;
  color: #8a857a;
}

/* Pulsanti "secondari" dentro le celle chiare: l'oro chiaro da fondo
   scuro non si legge sul bianco, serve la variante scura. */
table.tabella-dati .pulsante.secondario {
  color: var(--oro-scuro);
  border-color: var(--oro-scuro);
}

table.tabella-dati .pulsante.secondario:hover {
  background-color: #f0e6cf;
}

.numero-negativo {
  color: var(--colore-rosso);
  font-weight: 700;
}

table.tabella-dati .numero-negativo {
  color: #b3261e;
}

/* Testo secondario/didascalie (sostituisce i vecchi color:#555 inline) */
.testo-tenue {
  color: var(--colore-testo-tenue);
}

/* Riga di tabella "MANCA A MAGAZZINO" (fabbisogno > giacenza): sulle
   righe chiare torna il rosa tenue con bordo rosso a sinistra.
   Il "tbody" nel selettore serve a vincere sull'alternanza
   bianco/tortora qui sopra (stessa forza, ma scritta dopo). */
table.tabella-dati tbody tr.riga-da-ordinare td {
  background: #fbe7e4;
}
table.tabella-dati tbody tr.riga-da-ordinare td:first-child {
  border-left: 4px solid #b3261e;
}

/* Il passaggio del mouse scurisce leggermente la riga (dopo le regole
   di sfondo qui sopra, cosi' vince su striping e riga-da-ordinare) */
table.tabella-dati tbody tr:hover td {
  background-color: #efe6cf;
}

.numero-positivo {
  color: var(--colore-verde);
}

table.tabella-dati .numero-positivo {
  color: #1b7a3d;
}

/* --- Miniature/immagini --- */
/* I disegni dei pezzi sono su fondo bianco: le cornici restano chiare
   apposta, cosi' il disegno resta leggibile anche col tema scuro. */
.miniatura {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--colore-bordo);
  background: #f4f6f7;
}

.miniatura-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  border: 1px dashed var(--colore-bordo);
  background: var(--colore-grigio-chiaro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--colore-testo-tenue);
  text-align: center;
}

/* --- Lightbox: clic su una miniatura per vedere la foto ingrandita --- */
img.miniatura[data-immagine] {
  cursor: zoom-in;
}

.lightbox-sfondo {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.lightbox-sfondo img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
}

.immagine-grande {
  max-width: 320px;
  max-height: 320px;
  object-fit: contain;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo);
  background: white;
}

.immagine-grande-placeholder {
  width: 320px;
  height: 220px;
  border: 1px dashed var(--colore-bordo);
  border-radius: var(--raggio-bordo);
  background: var(--colore-grigio-chiaro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--colore-testo-tenue);
}

/* --- Filtri di ricerca --- */
.barra-filtri {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 1rem;
  background: var(--colore-card);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-bordo);
  padding: 1rem;
}

.barra-filtri .campo-filtro {
  display: flex;
  flex-direction: column;
  min-width: 160px;
}

.barra-filtri .campo-filtro label {
  font-size: 0.82rem;
  margin-bottom: 0.2rem;
  color: var(--colore-testo-tenue);
}

/* --- Messaggi di stato --- */
.messaggio {
  padding: 0.8rem 1rem;
  border-radius: var(--raggio-bordo);
  margin-bottom: 1rem;
  font-weight: 600;
}

.messaggio.ok {
  background-color: #123028;
  color: #7ee2a8;
  border: 1px solid #1f5c40;
}

.messaggio.errore {
  background-color: #3a201d;
  color: #ffb4ab;
  border: 1px solid #6e352e;
}

.lista-errori {
  margin: 0;
  padding-left: 1.2rem;
}

/* --- Badge di stato --- */
.badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.badge.attivo {
  background-color: #123028;
  color: #7ee2a8;
}

.badge.inattivo {
  background-color: var(--colore-grigio-chiaro);
  color: var(--colore-testo-tenue);
}

/* --- Paginazione --- */
.paginazione {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
  font-size: 0.9rem;
}

/* --- Griglia dettaglio particolare --- */
.dettaglio-griglia {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: 1.5rem;
}

@media (max-width: 720px) {
  .dettaglio-griglia {
    grid-template-columns: 1fr;
  }
  nav.menu-principale {
    justify-content: flex-start;
  }
}

.tabella-campi {
  width: 100%;
  border-collapse: collapse;
}

.tabella-campi td {
  padding: 0.35rem 0.5rem;
  vertical-align: top;
  border-bottom: 1px solid var(--colore-bordo);
}

.tabella-campi td.etichetta-campo {
  font-weight: 600;
  color: var(--colore-testo-tenue);
  width: 180px;
  white-space: nowrap;
}

footer.piede-pagina {
  text-align: center;
  padding: 1.5rem;
  color: var(--colore-testo-tenue);
  font-size: 0.85rem;
}

/* ============================================================
   STAMPA: i documenti (schede d'ordine, distinte, bolle) si stampano
   SEMPRE su fondo bianco con testo scuro, qualunque sia il tema a
   schermo. Le variabili tornano alla palette chiara originale.
   ============================================================ */
@media print {
  :root {
    --scuro: #1d1d1b;
    --colore-primario: #1d1d1b;
    --colore-primario-scuro: #000000;
    --colore-titolo: #1d1d1b;
    --colore-accento: #a8843a;
    --colore-sfondo: #ffffff;
    --colore-card: #ffffff;
    --colore-testo: #1f2933;
    --colore-testo-tenue: #555555;
    --colore-bordo: #d3dbe0;
    --colore-verde: #1b7a3d;
    --colore-rosso: #b3261e;
    --colore-grigio-chiaro: #eceff1;
    --oro-chiaro: #a8843a; /* i link oro-chiaro non si leggono su bianco */
  }

  body {
    background: #ffffff;
    color: #1f2933;
  }

  a {
    color: #143844;
  }

  input[type="text"],
  input[type="number"],
  select,
  textarea {
    background: #ffffff;
    color: #1f2933;
  }

  .messaggio.ok {
    background-color: #e3f6e8;
    color: #1b7a3d;
    border-color: #b7e4c3;
  }

  .messaggio.errore {
    background-color: #fdecea;
    color: #b3261e;
    border-color: #f5c1bc;
  }

  .badge.attivo {
    background-color: #e3f6e8;
    color: #1b7a3d;
  }

  .badge.inattivo {
    background-color: #f1f1f1;
    color: #777777;
  }

  /* Il logo torna nero (niente filtro-bianco da intestazione scura) */
  .logo-app {
    filter: none;
  }

  /* In stampa la riga "manca a magazzino" resta rosa tenue su bianco
     (stessa regola dello schermo: le tabelle sono gia' chiare) */
  table.tabella-dati tbody tr.riga-da-ordinare td {
    background: #fff6f0;
  }
}