/* Design system minimo, condiviso da tutte le pagine (§2 di
   architettura.md: niente framework pesante). Font di sistema di base —
   IBM Plex Mono importato qui sotto è l'unica eccezione, necessaria non
   solo estetica: la tabella prodotti (§ redesign 2026-09-16, griglia CSS
   a colonne fisse copiata letterale dal design) ha colonne prezzo larghe
   quanto basta per il testo in QUESTO font mono specifico — senza
   caricarlo, il fallback di sistema (ui-monospace) è più largo per
   carattere e "630,00 €" in grassetto (600) trabocca fuori dalla sua
   colonna di 62px, sovrapponendosi alla cella precedente (bug reale
   misurato in browser: scrollWidth 72px contro i 62px assegnati, non
   un'ipotesi). Stesso import già usato in staff-v2.css per lo stesso
   design, pesi 400/500/600 (il 600 serve qui per i totali in grassetto,
   staff-v2.css non lo usava). */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #f7f6f3;
  --surface: #ffffff;
  --surface-sunken: #f0eee8;
  --ink: #1c1c1a;
  --ink-muted: #66645c;
  --ink-faint: #9c9a90;
  --border: #e3e0d7;
  --border-strong: #cac6b8;
  /* #1f3a5f (blu navy) era la palette "design system minimo" originale,
     precedente al redesign Claude Design — mai aggiornata quando main.css
     ha iniziato a condividere le pagine cliente con quel design (che usa
     il rosa #E93C64 ovunque, vedi staff-v2.css/catalog-gallery.css).
     Bug reale di fedeltà trovato confrontando il mockup col codice
     sorgente: bottoni/link/focus di TUTTA la pagina cliente erano blu
     invece che rosa — non solo "Invia richiesta". Stessi valori esatti
     di staff-v2.css, un solo punto invece di uno per pagina. */
  --accent: #e93c64;
  --accent-dark: #c22b50;
  --accent-ink: #ffffff;
  --accent-soft: #fdecf0;
  --danger: #a8341f;
  --danger-soft: #fbeae6;
  --success: #2b6e46;
  --success-soft: #e7f3ec;
  --radius-s: 6px;
  --radius-m: 10px;
  --shadow: 0 1px 2px rgba(28, 28, 26, 0.06), 0 6px 20px -10px rgba(28, 28, 26, 0.18);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Senza questa regola un elemento con l'attributo `hidden` (usato dal
   wizard staff per alternare i campi nuova-lista/lista-esistente, i passi
   1-2-3, ecc.) resta visibile ogni volta che porta anche una classe con un
   proprio `display` (es. `.field { display: flex }`): il foglio di stile
   dell'autore vince SEMPRE su quello dello user-agent, indipendentemente
   dalla specificità — la regola `[hidden] { display: none }` del browser
   non basta da sola. Bug reale trovato testando il wizard in browser, non
   solo leggendo il CSS (stesso principio dei commenti gemelli più sotto
   sul breakpoint mobile). */
[hidden] {
  display: none !important;
}

/* Stessa causa/correzione già applicata in staff-v2.css (2026-09-16):
   .sort-select e ogni altro <select> qui hanno già bordo/padding/
   border-radius/background nella loro regola, ma senza disattivare
   l'aspetto nativo del sistema operativo Safari/WebKit li ignora e
   mostra comunque il controllo nativo spigoloso — stessa regola del
   design (.dc.html: "select{appearance:none;-webkit-appearance:none}"),
   un solo punto globale invece che per ogni classe di select. */
select {
  appearance: none;
  -webkit-appearance: none;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3 {
  margin: 0 0 4px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px 40px;
}

.page-narrow {
  max-width: 460px;
  margin: 0 auto;
  padding: 48px 20px;
}

/* Il design ha max-width:1240px sul contenitore della lista aperta (riga
   1065/1033) — ragionevole nello strumento di progettazione, dove lo
   spazio visibile è comunque ridotto, ma su un monitor largo reale in
   produzione lascia troppo vuoto ai due lati (misurato: ~410px per lato
   a 1920px con la versione precedente, ancora più stretta a 1100px).
   Preferenza esplicita dell'utente verificata a schermo, non un valore
   letterale da rispettare — 1520px lascia la colonna prodotto
   (minmax(130px,1.3fr), l'unica realmente flessibile della griglia) più
   ampia senza diventare uno spazio vuoto sproporzionato accanto a
   foto+testo. */
.catalogo-page {
  max-width: 1520px;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- form ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
}

.field input,
.field select,
.field textarea {
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.field-row {
  display: flex;
  gap: 12px;
}

.field-row > .field {
  flex: 1;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checkbox-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.checkbox-chip input {
  margin: 0;
}

.checkbox-chip:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- buttons ---------- */

.btn {
  font: inherit;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

/* Stato disabilitato specifico del design (.dc.html, inviaStyle) per i
   bottoni primari — non il semplice "sbiadito" generico di .btn:disabled
   sotto: colori dedicati (bordo/sfondo chiari, testo grigio), non solo
   opacità ridotta sullo stesso rosa. Stessa specificità di .btn:disabled
   (classe+pseudo-classe): vince per ordine, deve restare dopo. */
.btn-primary:disabled {
  background: #f2efe9;
  border-color: #e5e0d8;
  color: #9a948c;
  opacity: 1;
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}

.btn-full {
  width: 100%;
}

/* ---------- messages ---------- */

.message {
  padding: 10px 14px;
  border-radius: var(--radius-s);
  font-size: 13.5px;
  margin-bottom: 16px;
}

.message-error {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid rgba(168, 52, 31, 0.25);
}

.message-success {
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid rgba(43, 110, 70, 0.25);
}

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-logo {
  display: block;
  height: 20px;
  width: auto;
}

/* Fallback testuale se il logo non carica (onerror in HTML) — stesso
   pattern già in uso lato staff (staff-v2.css .wordmark), qui replicato
   per la pagina cliente che condivide questo header col design ma non
   il foglio di stile staff. */
.brand-wordmark {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  align-items: center;
}

.brand-accent-char {
  color: var(--accent);
}

.brand-area-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: var(--ink-muted);
}

/* Selettore lingua IT/EN (multilingua, 2026-09-23) — stessa coppia di
   pulsanti della sidebar staff (staff-v2.css), token della pagina
   cliente qui: nel topbar accanto a "Esci" su catalogo.html, o da solo
   (variante -light, sotto il form) su login.html dove il topbar non
   c'è ancora perché non si è autenticati. */
.lang-switcher {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: var(--surface-sunken);
}

.lang-switcher-btn {
  padding: 4px 9px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  cursor: pointer;
}

.lang-switcher-btn.active {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}

.lang-switcher-light {
  margin: 0 0 22px;
  border: 1px solid var(--border-strong);
}

/* ---------- price list picker ---------- */

.price-list-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.price-list-picker select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  min-width: 240px;
}

/* ---------- toolbar: filtro "solo nel mio ordine" + ordinamento ---------- */

.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 0 2px;
}

.catalog-count {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-muted);
}

.catalog-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* Valori esatti dal design (.dc.html, soloSelS) — non un pill pieno con
   accento chiaro come sembrava a occhio nel giro precedente: bordo
   arrotondato 11px (non 999px) e stato attivo in nero pieno, non rosa
   chiaro. Bug di fedeltà trovato confrontando col sorgente, corretto qui
   insieme all'audit colore chiesto per "Invia richiesta". */
.filter-toggle {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid #e5e0d8;
  border-radius: 11px;
  font-size: 12.5px;
  background: var(--surface);
  color: #3d3a37;
  cursor: pointer;
}

.filter-toggle.active {
  background: #111110;
  border-color: #111110;
  color: #ffffff;
  font-weight: 500;
}

.filter-toggle-count {
  font-size: 11px;
  opacity: 0.75;
}

.sort-select {
  font-family: inherit;
  font-size: 12.5px;
  padding: 10px 14px;
  border: 1px solid #e5e0d8;
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

/* ---------- product grid ---------- */
/* Griglia CSS a colonne fisse, copiata letterale dal sorgente del design
   (.dc.html, righe 1102-1165) — non una <table> ad auto-layout. Una
   <table> lascia che il browser scelga larghezze colonna in base al
   contenuto più lungo di ogni riga, producendo righe più alte (testo
   che va a capo) e proporzioni diverse dal mockup a seconda dei dati
   caricati — non tanti piccoli problemi di stile, ma un'unica
   differenza strutturale a monte (bug reale trovato confrontando col
   codice del design, non "sembra uguale" a occhio). I valori
   grid-template-columns/gap/padding/colori qui sotto sono copiati
   esatti dal file, non approssimati. */

.catalog-grid-outer {
  background: #ffffff;
  border: 1px solid #ebe7e0;
  border-radius: 16px;
  overflow: hidden;
}

.catalog-grid-scroll {
  overflow-x: auto;
}

.catalog-grid-inner {
  min-width: 790px;
}

.catalog-grid-row {
  display: grid;
  /* colonna WHS un.: 78px (era 56) — con lo sconto del fornitore contiene prezzo barrato + prezzo + badge */
  grid-template-columns: 20px minmax(130px, 1.3fr) 104px 68px 62px 38px 30px 56px 62px 78px 68px;
  gap: 6px;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f4f1eb;
  background: transparent;
}

.catalog-grid-row.has-selection {
  background: #fffbfc;
}

.catalog-grid-item:last-child .catalog-grid-row {
  border-bottom: none;
}

.catalog-grid-row:hover {
  background: #faf8f5;
}

.catalog-grid-head {
  background: #faf8f5;
  border-bottom: 1px solid #e5e0d8;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #6e6a66;
  cursor: default;
}

.catalog-grid-head:hover {
  background: #faf8f5;
}

.catalog-grid-row[aria-expanded="true"] {
  background: #faf8f5;
  border-bottom-color: transparent;
}

.catalog-caret {
  font-size: 10px;
  line-height: 1;
  color: #6e6a66;
  transition: transform 0.18s ease;
  transform: rotate(-90deg);
}

.catalog-caret.open {
  transform: rotate(0deg);
}

.catalog-product-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.catalog-product-text {
  min-width: 0;
}

.col-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.col-center {
  text-align: center;
}

.catalog-cell-ellipsis {
  min-width: 0;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Prima causa reale delle "righe più alte": senza questo, un nome
   prodotto lungo andava a capo invece di troncarsi — mai il caso nel
   design (riga 1120, desc: white-space:nowrap;overflow:hidden;
   text-overflow:ellipsis). */
.product-name {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-sub {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: #6e6a66;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-only {
  display: none;
}

/* Le foto fornitore reali (verificato guardando i file veri, non solo
   il codice) hanno composizioni molto diverse — capo su modella con
   tanto margine bianco, prodotto a schermo pieno, ecc. object-fit:
   contain garantisce che nessuna foto venga mai tagliata qualunque sia
   la composizione, invece di uno zoom fisso che ne rovinerebbe alcune
   (vedi commento storico più sotto per il confronto reale già fatto).
   Dimensione 36x44px e radius 7px copiati letterali dal design (riga
   1116) — verificati leggibili con una foto vera reale (non il
   segnaposto a iniziali del mock) ora che l'import preferisce
   correttamente la foto URL invece dell'embedded a inquadratura enorme:
   la foto occupa ormai ~35% larghezza / ~87% altezza dell'inquadratura
   originale, non più il ~13% di quando l'embedded veniva mostrata per
   errore — vedi routes_admin_import.py e la nota su "Lista Test". */
.product-thumb-wrap {
  width: 36px;
  height: 44px;
  border-radius: 7px;
  background: #f2efe9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.product-thumb-empty {
  /* nessuna foto per questo prodotto: solo lo sfondo del contenitore,
     nessun capo da mostrare. */
}

.product-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.catalog-grid-expanded {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.18s ease;
  background: #faf8f5;
  border-bottom: 1px solid #e5e0d8;
}

.catalog-grid-item:last-child .catalog-grid-expanded.open {
  border-bottom: none;
}

.catalog-grid-expanded.open {
  max-height: 900px;
}

/* padding:2px 14px 16px 34px copiato letterale dal design (riga 1135) —
   ASIMMETRICO apposta: 34px a sinistra allinea "TAGLIA"/le righe sotto
   la zona foto+nome della riga sopra (caret 20px + thumb 36px + gap
   11px ≈ 34px), non un padding uniforme come nel primo tentativo
   (padding-left applicato a ogni figlio invece che al contenitore: sulla
   sinistra sembrava comunque troppo attaccato al bordo — bug reale
   segnalato e misurato dall'utente, non un'ipotesi).

   Il padding vive su QUESTO wrapper interno, non su .catalog-grid-expanded
   (l'elemento che anima max-height 0↔900px): max-height:0 con
   overflow:hidden sul genitore non azzera il padding proprio del
   genitore, solo il suo contenuto in eccesso — un pannello "chiuso" con
   padding diretto restava comunque alto ~19px (misurato in browser),
   una striscia di testo residuo visibile tra le righe. Bug reale, non
   un'ipotesi: trovato misurando l'altezza vera dell'elemento chiuso. */
.catalog-grid-expanded-inner {
  padding: 2px 14px 16px 34px;
}

.product-meta-line {
  font-size: 12px;
  color: #6e6a66;
  padding-top: 10px;
  padding-bottom: 4px;
}

.taglia-grid-head,
.taglia-grid-row {
  display: grid;
  gap: 8px;
}

.taglia-grid-head {
  padding: 8px 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #6e6a66;
}

.taglia-grid-head-mobile {
  display: none;
}

.taglia-grid-row {
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid #efebe4;
  font-size: 13px;
  font-weight: 500;
}

.taglia-qty-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.qty-input {
  width: 46px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  text-align: center;
  padding: 6px 3px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: #ffffff;
}

.qty-input:invalid {
  border-color: var(--danger);
}

.row-total {
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

.row-total.has-qty {
  color: var(--ink);
  font-weight: 600;
}

/* Riga "Totale prodotto" a fondo pannello — valori/colori copiati
   letterali dal design (r.sommato, riga 1158-1162 del sorgente). */
.group-total-line {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 4px;
  border-top: 1px solid #111110;
  padding-top: 12px;
  padding-bottom: 16px;
}

.group-total-label {
  flex: 1;
  min-width: 110px;
  font-size: 12.5px;
  color: #3d3a37;
}

.group-total-rrp {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: #6e6a66;
}

.group-total {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #c22b50;
}

.availability-low {
  color: var(--danger);
}

/* Font-size/peso/colore per colonna copiati letterali dal design
   (pzS/rrpTotS/totS ecc., righe 1127-1132 riga principale e 1145-1154
   sottotabella taglie) — diversi tra loro E diversi tra riga principale
   e sottotabella, non un'unica regola generica ".row-total-col" come
   prima: quella lasciava le celle senza font-size esplicito, ereditavano
   i 15px del body invece dei 12-13.5px del design — la causa reale per
   cui "630,00 €" in grassetto (62px di colonna) traboccava di 10px
   nella cella accanto (misurato in browser: scrollWidth 72px contro i
   62px assegnati), non un problema di font mancante. */
.cell-disp,
.cell-pz,
.cell-rrp-un,
.cell-rrp-tot,
.cell-whs-un,
.cell-whs-tot,
.cell-disp-sub,
.cell-rrp-un-sub,
.cell-rrp-tot-sub,
.cell-whs-un-sub,
.cell-whs-tot-sub {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.cell-disp {
  font-size: 12.5px;
  color: #6e6a66;
}

.cell-pz {
  font-size: 13px;
  color: #6e6a66;
}

.cell-pz.has-qty {
  color: #111110;
  font-weight: 600;
}

.cell-rrp-un {
  font-size: 12px;
  color: #6e6a66;
}

.cell-rrp-tot {
  font-size: 13px;
  font-weight: 600;
  color: #6e6a66;
}

.cell-rrp-tot.has-qty {
  color: #111110;
}

.cell-whs-un {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}

.cell-whs-tot {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #6e6a66;
}

.cell-whs-tot.has-qty {
  color: #c22b50;
}

/* Sottotabella taglie: stessa idea, valori leggermente diversi dal
   design (rrpTotS/totS lì hanno peso 600 SOLO quando la taglia ha una
   quantità > 0, a differenza della riga principale dove il grassetto è
   sempre presente e cambia solo il colore — copiato esatto, non
   uniformato per comodità). */
.cell-disp-sub {
  font-size: 12px;
  color: #6e6a66;
}

.cell-rrp-un-sub {
  font-size: 12px;
  color: #6e6a66;
}

.cell-rrp-tot-sub {
  font-size: 12.5px;
  color: #6e6a66;
}

.cell-rrp-tot-sub.has-qty {
  color: #111110;
  font-weight: 600;
}

.cell-whs-un-sub {
  font-size: 12px;
  color: #6e6a66;
}

.cell-whs-tot-sub {
  font-size: 13px;
  color: #6e6a66;
}

.cell-whs-tot-sub.has-qty {
  color: #111110;
  font-weight: 600;
}

.catalog-grid-empty {
  padding: 56px 22px;
  text-align: center;
  color: #6e6a66;
  font-size: 13.5px;
}

/* ---------- sticky order footer ---------- */

.order-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px -12px rgba(28, 28, 26, 0.25);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 10;
}

.order-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- pannello "Rivedi ordine" ---------- */

.riep-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 26, 0.34);
  display: flex;
  justify-content: flex-end;
  z-index: 45;
}

.riep-panel {
  width: min(520px, 100%);
  height: 100%;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.riep-header {
  flex: none;
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.riep-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.riep-line {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
}

.riep-close {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius-s);
  font-size: 16px;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
}

.riep-body {
  flex: 1;
  overflow: auto;
  padding: 18px 26px 28px;
}

.riep-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}

.riep-row:first-child {
  border-top: none;
}

.riep-row-desc {
  font-size: 14px;
  font-weight: 600;
}

.riep-row-sku {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 3px;
}

.riep-row-sizes {
  font-size: 12.5px;
  color: var(--ink);
  margin-top: 7px;
}

.riep-row-amount {
  flex: none;
  text-align: right;
}

.riep-row-total {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.riep-row-pz {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 3px;
}

.riep-row-remove {
  display: block;
  margin-top: 6px;
  background: none;
  border: none;
  padding: 0;
  font-size: 11.5px;
  color: var(--ink-muted);
  text-decoration: underline;
  cursor: pointer;
}

.riep-row-remove:hover {
  color: var(--danger);
}

.riep-total-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--ink);
}

.riep-total-label {
  font-size: 13px;
  color: var(--ink-muted);
}

.riep-total-rrp {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 3px;
}

.riep-total-amount {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.riep-disclaimer {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.6;
}

.riep-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.order-footer-total {
  display: flex;
  flex-direction: column;
}

.order-footer-total .label {
  font-size: 12px;
  color: var(--ink-muted);
}

.order-footer-total .amount {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- interfaccia staff ---------- */

.staff-nav {
  display: flex;
  gap: 4px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.staff-nav a {
  display: inline-block;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.staff-nav a:hover {
  color: var(--ink);
}

.staff-nav a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.data-table thead th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table tbody tr {
  border-top: 1px solid var(--border);
}

.data-table td {
  padding: 10px 12px;
  vertical-align: middle;
  font-size: 13.5px;
}

.data-table .empty-row td {
  padding: 24px 12px;
  color: var(--ink-muted);
  text-align: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.pill-warning {
  background: #fdf1de;
  color: #8a5a1e;
}

.pill-neutral {
  background: var(--surface-sunken);
  color: var(--ink-muted);
}

.pill-success {
  background: var(--success-soft);
  color: var(--success);
}

.pill-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.card {
  background: var(--surface);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow);
  padding: 20px;
}

.card + .card {
  margin-top: 20px;
}

.wizard-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.wizard-steps .step {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-sunken);
}

.wizard-steps .step.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.wizard-steps .step.done {
  color: var(--success);
}

.mapping-table select {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  min-width: 160px;
}

/* Non mappato per un campo obbligatorio (sku/colore/taglia, §audit
   column_mapping): riga rossa, non solo grigia — deve saltare
   all'occhio, non essere scoperta leggendo un messaggio a parte. */
.mapping-table tr.row-required-unmapped {
  background: var(--danger-soft);
}

.mapping-table tr.row-required-unmapped td:first-child {
  font-weight: 600;
  color: var(--danger);
}

/* Ambiguo (più colonne suggeriscono lo stesso campo) o un avviso
   informativo non bloccante (es. brand non mappato → fallback al nome
   fornitore): ambra, non rosso — va verificato, non necessariamente
   corretto. */
.mapping-table tr.row-warning {
  background: #fdf1de;
}

.field-tier-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}

.field-tier-badge.required {
  background: var(--danger-soft);
  color: var(--danger);
}

.field-tier-badge.warning {
  background: #fdf1de;
  color: #8a5a1e;
}

.field-row-note {
  display: block;
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 2px;
}

.composite-size-row select {
  min-width: 110px;
}

.column-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--surface);
  max-height: 220px;
  overflow-y: auto;
}

.column-picker label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-size: 12.5px;
  cursor: pointer;
}

.column-picker label:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}

.column-picker .position-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
}

.file-drop {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-m);
  padding: 28px;
  text-align: center;
  color: var(--ink-muted);
  cursor: pointer;
}

.file-drop:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.file-drop input {
  display: none;
}

.file-drop.has-file {
  border-style: solid;
  border-color: var(--accent);
  color: var(--ink);
}

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

.summary-tile {
  background: var(--surface-sunken);
  border-radius: var(--radius-s);
  padding: 12px 14px;
}

.summary-tile .value {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.summary-tile .label {
  font-size: 11.5px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.actions-cell {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.note-input {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  width: 160px;
}

/* ---------- mobile (<480px, §9 del brief) ---------- */

@media (max-width: 480px) {
  .page {
    padding: 16px 12px 90px;
  }

  /* Griglia semplificata solo caret+prodotto (le colonne "col-desktop-
     only" spariscono, i loro dati restano leggibili nella riga espansa)
     — stessa filosofia mobile già verificata con l'utente nel giro
     precedente, adattata da <table> a grid. Senza azzerare min-width qui
     sotto la card interna resterebbe larga 790px (il minimo desktop) e
     forzerebbe comunque lo scroll orizzontale anche con sole due
     colonne visibili — inutile su schermo stretto. */
  .catalog-grid-inner {
    min-width: 0;
  }

  .catalog-grid-head {
    display: none;
  }

  .catalog-grid-row {
    grid-template-columns: 20px 1fr;
    padding: 10px 12px;
  }

  .col-desktop-only {
    display: none;
  }

  .mobile-only {
    display: inline;
  }

  .catalog-grid-expanded-inner {
    padding: 2px 12px 16px 20px;
  }

  /* Sottotabella taglie: sulle colonne desktop-only nascoste sopra resta
     solo taglia+disponibilità+quantità — restringe la griglia di
     conseguenza invece di lasciare vuoti enormi dove c'erano le colonne
     prezzo. Stesse 3 colonne dell'header mobile qui sotto. */
  .taglia-grid-row {
    grid-template-columns: 54px 44px 1fr !important;
  }

  .taglia-grid-head {
    display: none;
  }

  .taglia-grid-head-mobile {
    display: grid;
    grid-template-columns: 54px 44px 1fr;
    gap: 8px;
    padding: 8px 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.14em;
    color: #6e6a66;
  }

  .order-footer {
    padding: 12px 14px;
  }

  .order-footer-actions {
    gap: 8px;
  }

  .catalog-toolbar {
    justify-content: stretch;
  }

  .catalog-toolbar-actions {
    width: 100%;
  }

  .sort-select {
    flex: 1;
    min-width: 0;
  }

  .riep-panel {
    width: 100%;
  }

  .riep-header,
  .riep-body {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Rubrica commerciale (staff-rubrica.html, 2026-09-11) ------------------- */

.crm-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.crm-tab {
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.crm-tab:hover {
  color: var(--ink);
}

.crm-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.crm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.crm-filters .field {
  margin-bottom: 0;
  min-width: 160px;
}

.crm-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.crm-toolbar-actions {
  display: flex;
  gap: 8px;
}

.data-table tbody tr.crm-row {
  cursor: pointer;
}

.data-table tbody tr.crm-row:hover {
  background: var(--surface-sunken);
}

/* Overlay + pannello laterale: stesso principio del lightbox in
   qc_report.py (backdrop click o Esc per chiudere, un clic SUL pannello
   non lo chiude) — qui riscritto perché questa è una pagina vera del
   frontend, non l'HTML autonomo generato dal report QC, niente da
   condividere direttamente tra i due. */
.side-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 26, 0.32);
  z-index: 900;
  display: flex;
  justify-content: flex-end;
}

.side-panel-backdrop[hidden] {
  display: none;
}

.side-panel {
  width: min(420px, 100vw);
  height: 100%;
  background: var(--surface);
  box-shadow: -8px 0 24px -8px rgba(28, 28, 26, 0.25);
  padding: 24px;
  overflow-y: auto;
}

.side-panel h2 {
  font-size: 17px;
  margin: 0 0 4px;
}

.side-panel-close {
  float: right;
  border: none;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px;
}

.side-panel-close:hover {
  color: var(--ink);
}

.csv-mapping-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.csv-mapping-row .csv-column-name {
  font-size: 12.5px;
  color: var(--ink-muted);
}

/* Nota sotto il totale ordine: sconto raggiunto / minimo d'ordine (2026-09-18) */
.order-note { display:block; font-size:12px; color:#6e6a66; margin-top:2px; }
.order-note.warn { color:#c22b50; font-weight:500; }
.order-note:empty { display:none; }

/* ---------- informativa privacy (2026-09-22) ---------- */

/* Testo lungo a sezioni: una larghezza da lettura (non i 1180px di
   .page, pensati per la tabella prodotti) e un'interlinea più comoda
   della prosa compatta usata altrove nel sito. */
.legal-page {
  max-width: 720px;
}

.legal-page h2 {
  margin-top: 32px;
  font-size: 17px;
}

.legal-page p,
.legal-page li {
  color: var(--ink);
  line-height: 1.65;
}

.legal-page ul {
  margin: 8px 0;
  padding-left: 22px;
}

.legal-page li {
  margin-bottom: 6px;
}

.legal-back-link {
  display: inline-block;
  font-size: 13.5px;
  color: var(--ink-muted);
  text-decoration: none;
  margin-bottom: 18px;
}

.legal-back-link:hover {
  color: var(--ink);
}

.legal-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0 16px;
}

.legal-updated {
  color: var(--ink-muted);
  font-size: 13px;
}

/* Link "Informativa privacy" sempre raggiungibile in fondo a ogni
   pagina cliente (registrazione, login, catalogo, i miei ordini) —
   stesso principio su tutte e quattro, non solo dove capita. Su
   catalogo.html vive DENTRO .page (fine del contenuto normale) invece
   che come <footer> a sé: quella pagina ha già un footer sticky (il
   riepilogo ordine, .order-footer) e un secondo elemento fisso in fondo
   allo schermo competerebbe con quello per lo stesso spazio. */
.site-footer {
  max-width: 1180px;
  margin: 40px auto 0;
  padding: 18px 20px 28px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink-muted);
}

.site-footer a {
  color: var(--ink-muted);
}

.site-footer a:hover {
  color: var(--accent);
}