/* ============================================================
   common.css - il foglio condiviso di Production, ODG ed Equipment (12/10/2026)
   Caricato PER PRIMO da tutte le pagine di /production/. Ogni pagina ha poi
   il suo foglio (style.css, odg.css, equipment.css) con cio' che le e' proprio.
   Cio' che sta qui vale ovunque: cambiare una regola qui la cambia in tutte.
   Le regole sono quelle IDENTICHE nei tre fogli di partenza, spostate senza
   toccare i valori. Vedi ../DESIGN.md.
   ============================================================ */

/* ============================================================
   IL TEMA (14/10/2026). I valori qui sotto sono quelli SCURI, predefiniti.
   Una pagina con un tema diverso (Billing, a fondo chiaro) carica common.css
   per primo e ridefinisce nel proprio :root questi nomi, e basta:
     superfici e testo ... --bg --surface --surface-2 --border --text --text-dim
     verde di marca ...... --accent (riempimenti) --accent-testo (scritte: sul
                           chiaro serve un verde piu' scuro, 4,6:1) --accent-soft
                           --accent-ink
     segnali ............. --danger --danger-soft --green --green-soft --amber
                           --amber-soft
     profondita' ......... --shadow --shadow-popover --shadow-menu --shadow-finestra
     piccoli effetti ..... --hover (passaggio del mouse sulle voci dei menu)
                           --skeleton-luce (riflesso delle righe di caricamento)
                           --velo-notifica (fondo della notifica)
     e color-scheme (dark|light), che qui sotto e' dark.
   Restano scuri in ogni tema, apposta: la visualizzazione foto (.lightbox) e il
   velo dietro le finestre. Le regole non contengono piu' colori fissi, tranne
   quelli.
   ============================================================ */

:root {
  --danger: #e0475b;
  --danger-soft: rgba(224, 71, 91, 0.16);
  --heart: var(--danger);
  --bg: #0e0e10;
  --surface: #1a1a1d;
  --surface-2: #242428;
  --border: #303034;
  --text: #f0f0f2;
  --text-dim: #9a9aa0;
  --accent: #00bbb4;
  --accent-soft: rgba(0, 187, 180, 0.16);
  --accent-ink: #05201f;
  --green: #4cd080;
  --green-soft: rgba(0, 187, 180, 0.14);
  --amber: #e0b13b;
  --amber-soft: rgba(224, 177, 59, 0.16);
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.25);
  --accent-testo: var(--accent);
  --hover: rgba(255, 255, 255, 0.06);
  --skeleton-luce: #2f2f34;
  --velo-notifica: rgba(0, 0, 0, 0.35);
  --shadow-popover: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-menu: 0 12px 34px rgba(0, 0, 0, 0.38);
  --shadow-finestra: 0 20px 60px rgba(0, 0, 0, 0.3);
  --radius: 12px;
  color-scheme: dark;
}


* { box-sizing: border-box; }

/* generic hide switch — !important because plenty of components (e.g.
   .hdr-icon-btn's own `display: flex`) are equal-specificity single-class
   selectors defined later in the cascade, which would otherwise win and
   silently re-show the element */
.hidden { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Il footer condiviso deve stare sotto lo stesso rientro del contenuto, o si
   vede che non sono allineati. La variante --wide di footer.css nasce a 1200
   e qui la si porta ai valori qui sopra. Sta in questo foglio e non in
   footer.css apposta: quel file lo caricano anche le dieci pagine del sito,
   e cambiarlo vorrebbe dire ribumparle e ricaricarle tutte. Tenuto qui, i due
   numeri stanno accanto a quello di #app da cui devono non discostarsi.
   Il selettore comincia da body per una ragione precisa: in Production
   style.css e' caricato PRIMA di footer.css, quindi a parita' di specificita'
   perderebbe. */
body .site-footer--app.site-footer--wide {
  --fo-row-w: 1440px;
  --fo-row-pad: min(55.81px, 3.876vw);
}
.topbar-spacer { flex: 1; }
.brand-title-list { font-size: 22px; font-weight: 700; color: var(--text); }

/* GRIGIE A RIPOSO, VERDI AL PASSAGGIO (19/10/2026). E' quello che DESIGN.md
   chiedeva da sempre ("glifo nudo, grigio, accento al passaggio"), ma qui le
   icone erano col colore pieno del testo; Billing le aveva gia' grigie, con
   gli angoli a 8 per il fondo dello stato attivo. Uniformate su quelle, su
   richiesta di Carlo. */
.hdr-icon-btn {
  border: none;
  background: none;
  color: var(--text-dim);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hdr-icon-btn:hover { color: var(--accent-testo); }
.hdr-icon-btn.active .icon-search { display: none; }
.hdr-icon-btn.active .icon-close { display: block; }
.tabs::-webkit-scrollbar { display: none; }

/* sits inline in the topbar, immediately left of the search toggle, so it
   never covers the other header icons (Filtri etc. stay clickable while
   the field is open) — capped width, it only ever holds short queries */
.searchrow {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 280px;
  margin-right: 4px;
}
.topbar-icons { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.searchrow input:focus { border-color: var(--accent); }

/* --- filters panel: one column of checkboxes per taxonomy, wraps on mobile */
.filterspanel {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 130px;
}
.filter-group h4 {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.filter-chk {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.filter-chk input { accent-color: var(--accent); }
.filters-clear {
  border: none;
  background: none;
  color: var(--accent-testo);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  align-self: flex-start;
}
.filters-clear:hover { text-decoration: underline; }
.list-rows { display: flex; flex-direction: column; gap: 8px; }
.list-row-main { flex: 1; min-width: 0; }

.conn-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  margin: 8px 0;
}
.toast-overlay.show { opacity: 1; pointer-events: auto; }
.toast-card {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--shadow);
}

/* --- login gate (identical pattern to Equipment app) --- */
.login-gate {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.login-logo {
  width: 112px;
  height: 112px;
  border-radius: 28px;
  object-fit: cover;
  margin-bottom: 6px;
}
.login-brand { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.login-sub { font-size: 13.5px; color: var(--text-dim); margin: 0 0 4px; }
.login-email-row {
  position: relative;
  width: 100%;
}
.login-email-row input { width: 100%; padding-right: 46px; }
.login-email-row .hdr-icon-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.login-gate input:focus { border-color: var(--text-dim); }
/* Safari/Chrome autofill forces its own pale background + dark text,
   painting over the send button (fixed above with z-index) and breaking
   the dark theme — this repaints it as the app's own surface color instead */
.login-gate input:-webkit-autofill,
.login-gate input:-webkit-autofill:hover,
.login-gate input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  transition: background-color 5000s ease-in-out 0s;
}
.login-error {
  color: var(--amber);
  font-size: 12.5px;
  min-height: 1em;
  margin: 0;
}
.modal-close:hover { color: var(--accent-testo); }
/* list members popup — same 900px standard as the apply-*.html forms and
   share.html, wide enough for the photo-card grid instead of the default
   640px single-record width */
.modal-title { font-size: 17px; font-weight: 700; margin: 0 0 16px; }
.modal-save-btn {
  width: 100%;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}
.modal-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow-popover);
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }


/* --- il titolo che cambia sezione ----------------------------------------
   Sostituisce la barra a parte che avevo messo il 26/08/2026: due file di
   schede una sopra l'altra non dicevano quale comandasse. Cambiare sezione e'
   un livello sopra al cambiare vista, e sta nel titolo. */
.brand-switch {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.brand-switch-caret { opacity: .45; transition: transform .15s, opacity .15s; }
.brand-switch:hover .brand-switch-caret { opacity: .9; }
.brand-switch[aria-expanded="true"] .brand-switch-caret { transform: rotate(180deg); opacity: .9; }
.brand-menu {
  position: absolute; z-index: 60; top: 100%; left: 0; margin-top: 4px;
  min-width: 190px; padding: 5px;
  background: var(--surface-2, #1a1a1d); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-menu);
  display: flex; flex-direction: column;
}
.brand-menu a {
  padding: 9px 11px; border-radius: 7px; text-decoration: none;
  color: var(--text); font-size: 15px; font-weight: 500;
}
.brand-menu a:hover { background: var(--hover); }
.brand-menu a.qui { color: var(--accent-testo); }

/* Equipment e ODG nella fila delle schede sono collegamenti, non pulsanti:
   stesso aspetto, ma <a> non eredita il font del bottone. */
a.tab { text-decoration: none; display: inline-flex; align-items: center; }
.riga-titolo .brand-col { padding: 0; min-width: 0; }
.riga-titolo .brand-title-list { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riga-titolo-spazio { flex: 1; }
.topbar .tab { padding-bottom: 6px; }

.nav-burger {
  display: none;        /* compare solo stretto, vedi il @media in fondo */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
/* bersaglio da 44px, che e' quello che un dito colpisce davvero, senza
   cambiare il disegno: lo pseudo-elemento e' fuori flusso e non si vede */
.nav-burger::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.nav-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .25s ease, opacity .25s ease;
}
.nav-burger.aperto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.aperto span:nth-child(2) { opacity: 0; }
.nav-burger.aperto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   RITOCCHI DEL 12/10/2026 (vedi ../DESIGN.md, sezione «Lacune»)
   Solo CSS, in coda al foglio: tolto questo blocco, l'app torna com'era.
   1. anello di focus da tastiera coerente
   2. transizioni uniformi su bottoni, voci e righe
   3. menu, pannelli e schede di dettaglio che si aprono con una
      dissolvenza breve invece di comparire di colpo
   4. chi ha «riduci movimento» attivo nel sistema non vede niente di tutto
      questo (elenco di classi invece di `*`: la regola dell'autofill del
      login usa una transizione di 5000s apposta e non va toccata)
   ============================================================ */

/* 1. Focus: solo da tastiera (:focus-visible), mai al clic del mouse. */
:where(button, a, summary, [role="option"], [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tab:focus-visible { outline-offset: 4px; border-radius: 4px; }

/* 3. Aperture: menu e pannelli scendono di 4px mentre compaiono; la scheda
   di dettaglio sale di 8px. `display:none` -> `flex` rilancia l'animazione
   a ogni apertura, senza una riga di JavaScript. */
@keyframes menuIn   { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes modalIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardIn   { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- stato di caricamento dell'elenco (12/10/2026) ---------- */
@keyframes scheletroLuce { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.scheletro { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.scheletro i {
  display: block; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--skeleton-luce) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: scheletroLuce 1.6s linear infinite;
}
.solo-lettore { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* title/date, Data e location, Meteo — plain document flow, no collapse
   logic at all: they scroll away/back exactly like any normal content */
.sticky-collapse-inner { display: flow-root; }
.hdr-icon-btn:disabled { opacity: 0.35; cursor: default; }
#loginStepEmail, #loginStepCode { display: flex; flex-direction: column; gap: 12px; width: 100%; }
#loginStepEmail.hidden, #loginStepCode.hidden { display: none; }
.scheletro-riga, .scheletro-blocco { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.scheletro-blocco { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.scheletro-statistiche { display: flex; gap: 8px; margin-bottom: 4px; }
.scheletro-statistiche .scheletro-blocco { flex: 1 1 0; min-width: 0; }
.scheletro .grande { height: 14px; }

/* ---- regole unificate il 14/10/2026 (prima erano diverse nei tre fogli) ---- */
/* Il marchio in alto a sinistra: stesso margine ovunque (Equipment non l'aveva) */
.brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 10px;
}

.brand-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin-bottom: 18px;
}

.tab {
  white-space: nowrap;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-dim);
  padding: 0 0 10px;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

/* 16px: sotto, iOS ingrandisce la pagina quando si tocca il campo */
.searchrow input {
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  outline: none;
}

.list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color .12s;
}

.list-row-sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.25;
  font-weight: 500;
  margin: 3px 0 0;
}

.toast-overlay {
  position: fixed;
  inset: 0;
  background: var(--velo-notifica);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

/* 16px: sotto, iOS ingrandisce la pagina quando si tocca il campo */
.login-gate input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  outline: none;
  text-align: center;
  font-family: inherit;
}

/* Larghezza: ogni pagina la dichiara con --modal-w (Production 640px, Equipment 560px, ODG 420px: finestre piccole di rinomina/elimina) */
.modal-card {
  background: var(--bg);
  border-radius: 16px;
  max-width: var(--modal-w, 560px);
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  box-shadow: var(--shadow-finestra);
  touch-action: pan-y;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: none;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  z-index: 2;
}

.modal-row:last-child {
  border-bottom: none;
  padding-bottom: 14px;
}

.modal-danger-row {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.modal-danger {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

/* il rosso del cuore/pericolo, lo stesso di --heart in Production e --red in ODG */
.modal-danger:hover {
  color: var(--danger);
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 30px;
  cursor: zoom-out;
}

.pac-container {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  margin-top: 4px;
  box-shadow: var(--shadow) !important;
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.pac-item {
  border-color: var(--border) !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  color: var(--text-dim) !important;
  cursor: pointer;
}

.pac-item:hover, .pac-item-selected {
  background: var(--surface) !important;
}

.pac-item-query {
  color: var(--text) !important;
  font-size: 13.5px !important;
}

.pac-matched {
  color: var(--accent-testo) !important;
  font-weight: 600;
}

.pac-icon {
  display: none !important;
}

.scheletro-riga {
  height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 2%;
  padding: 0 16px;
}

/* ---- unificate il 14/10/2026 (seconda tornata) ---- */
/* Margine in fondo: 60px, o la zona sicura dell'iPhone se e' piu' grande */
#app {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 min(55.81px, 3.876vw) max(60px, env(safe-area-inset-bottom));
}

.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-desc {
  white-space: pre-wrap;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 12px 0;
}

.modal-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--accent-testo);
  text-decoration: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

/* ============================================================
   «ESCI» NELLA FILA DELLE SEZIONI (Carlo, 19/10/2026)
   Ultimo elemento di <nav class="tabs">, tutto a destra, in tutte le pagine
   di Production. Stesse misure di .tab (15px, 500, 10px sotto) cosi' sta sulla
   stessa linea di base; senza sottolineatura perche' non e' mai «attivo».
   Sotto gli 820px le voci stanno nel pannello del burger: li' «Esci» e' l'ultima
   riga, staccata da un filetto.
   ============================================================ */
.tab-esci {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; min-height: 32px;   /* come una .tab: 20 di riga + 10 sotto + 2 di bordo */
  white-space: nowrap;
  margin-left: 8px;
  padding: 0 0 10px;
  border: none; border-bottom: 2px solid transparent;
  background: none; color: var(--text-dim);
  font-family: inherit; font-size: 15px; font-weight: 500; line-height: 20px;
  cursor: pointer;
  transition: color .15s;
}
.tab-esci:hover { color: var(--text); }
.tab-esci svg { flex-shrink: 0; }
/* Dentro la barra in alto le voci hanno 6px sotto (non 10): le stesse misure, cosi' il
   centro dell'icona cade sul centro della riga di testo (misurato: 36px contro 36px). */
.topbar .tab-esci { min-height: 28px; padding-bottom: 6px; }
/* Su schermo largo solo l'icona, centrata sulla riga di testo delle voci; la
   scritta resta per chi usa uno screen reader. */
.tab-esci span {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 820px) {
  .topbar .tab-esci {
    width: 100%; justify-content: flex-start; gap: 8px;
    margin: 6px 0 0; padding: 11px 12px;
    border-bottom: none; border-top: 1px solid var(--border);
    border-radius: 0; text-align: left;
    color: var(--danger);
  }
  .topbar .tab-esci:hover { color: var(--danger); background: var(--danger-soft); }
  .topbar .tab-esci span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* ROTAZIONE SU IPHONE (19/10/2026). Safari ingrandisce da solo il testo quando si
   passa in orizzontale e a volte non lo riporta com'era tornando in verticale:
   la pagina resta con caratteri e righe di misura sbagliata finche' non si
   ricarica. Con 100% il testo resta alla misura scritta nel foglio. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }