/* Listino del giorno Del Mar — colonna unica, foglio A4.
   Ricalca il modello approvato da Mattias (13/08/2026): testata col claim a destra, titolo
   grande, sezioni numerate, piede a tre blocchi.
   Revisione del 13/08: TUTTE le scritte nel blu del logo (prima il titolo era grigio) e le
   righe di separazione in corallo — il colore caldo passa da accento puntuale a struttura
   del foglio, ed e' quello che tiene insieme la pagina quando il testo e' tutto di un colore.
   Le stesse regole finiranno in app/views/pdf/pdf.css. */

/* I colori sono quelli del brand (docs/design_system.md), non scelti a occhio:
   navy #26327e e' il pesce del logo, corallo #e05a48 e' il secondo colore deciso il
   09/08/2026. Il grigio del titolo e' sparito: Mattias lo vuole nel blu del logo. */

:root {
  --navy: #26327e;
  --navy-scuro: #1d2661;
  --navy-tenue: #6a72a5;
  --corallo: #e05a48;
  --corallo-scuro: #b0402f;
  --corallo-soft: #fdece8;
  /* Il grigio della scritta "DelMar" del logo: il titolo lo riprende, cosi' la testata e
     il titolo sono la stessa voce e il blu resta a tutto il resto. */
  --grigio-logo: #7d8689;
  --azure-soft: #e9f5fc;
  --foglio: #ffffff;
  --fondo: #e9edf2;

  /* L'ACCENTO E' L'UNICA COSA CHE CAMBIA DA UN LISTINO ALL'ALTRO. Navy, grigio del logo,
     impaginato e tipografia restano identici: e' quello che tiene insieme la famiglia.
     Il corallo del brand resta il valore di partenza, gli altri temi lo sostituiscono. */
  --accento: var(--corallo);
  --accento-scuro: var(--corallo-scuro);
  --accento-velo: #fdf3f1;
}

/* Il PAT delle pescherie e quello dei ristoranti sono lo STESSO pescato a prezzi diversi:
   due file quasi identici che e' facilissimo scambiare mandandoli. Il colore diverso non
   e' decorazione, e' la sicurezza che a un ristorante non arrivi il prezzo delle pescherie. */
.lst-tema-acqua {
  --accento: #17879b;
  --accento-scuro: #10606f;
  --accento-velo: #eff8fa;
}

.lst-tema-mare {
  --accento: #2f7fc1;
  --accento-scuro: #205a8b;
  --accento-velo: #f0f6fc;
}

.lst-tema-ambra {
  --accento: #c98a2e;
  --accento-scuro: #8f6113;
  --accento-velo: #fdf7ec;
}

/* Le occasioni chiedono di essere lette adesso: il rosso e' piu' urgente del corallo,
   ed e' il solo listino dove serve davvero. */
.lst-tema-rosso {
  --accento: #c0392b;
  --accento-scuro: #8d2418;
  --accento-velo: #fdf1ef;
}

* {
  box-sizing: border-box;
}

.lst-body {
  margin: 0;
  padding: 24px 16px 60px;
  background: var(--fondo);
  color: var(--navy);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

/* --- il foglio --- */

.lst-foglio {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 46px 0;
  overflow: hidden;
  background: var(--foglio);
  box-shadow: 0 1px 3px rgba(20, 44, 84, 0.08), 0 12px 40px rgba(20, 44, 84, 0.14);
}

/* La riga navy-corallo in cima chiude il foglio a specchio con quella in fondo: il
   documento smette di essere una pagina che comincia e diventa un oggetto stampato. */
.lst-foglio::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, var(--navy) 0%, var(--navy) 55%, var(--accento) 55%, var(--accento) 100%);
  content: "";
}

/* L'onda in filigrana dietro la testata. Sta sotto a tutto, tenuissima: si nota
   solo se la cerchi, ed e' esattamente il lavoro che deve fare. */
.lst-filigrana {
  position: absolute;
  top: -70px;
  right: -90px;
  z-index: 0;
  width: 420px;
  height: auto;
  color: var(--navy);
  opacity: 0.05;
  pointer-events: none;
}

.lst-foglio > *:not(.lst-filigrana) {
  position: relative;
  z-index: 1;
}

/* --- testata --- */

.lst-testata {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}

.lst-logo {
  width: 200px;
  height: auto;
  flex-shrink: 0;
}

.lst-claim {
  margin: 0;
  padding-left: 26px;
  border-left: 2px solid var(--accento);
  color: var(--navy);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
}

/* --- titolo --- */

/* L'occhiello dice CHE COSA e' il documento, il titolo dice DI CHE COSA parla. Prima il
   titolo faceva tutti e due i lavori e non ne faceva bene nessuno: "Listino del giorno"
   non distingueva il pescato locale dalle occasioni. In corallo, come vuole il design
   system per gli occhielli. */
/* L'occhiello con la lineetta corallo davanti: un segno piccolo che aggancia il titolo
   alla riga in cima e alla spunta delle sezioni. Ripetere lo stesso gesto in tre punti
   e' quello che fa sembrare un foglio disegnato invece che composto. */
.lst-occhiello {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 38px 0 4px;
  color: var(--accento);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lst-occhiello::before {
  width: 26px;
  height: 2px;
  background: var(--accento);
  content: "";
}

/* Il titolo e' l'unica cosa che non e' blu: riprende il grigio del logo. Non e' maiuscolo,
   e ha le lettere piu' strette del normale — a 52px la spaziatura di default sgrana la
   parola. */
.lst-titolo {
  margin: 0;
  color: var(--grigio-logo);
  font-family: "Century Gothic", Futura, "Trebuchet MS", system-ui, sans-serif;
  font-size: 52px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
}

.lst-aggiornamento {
  display: flex;
  gap: 9px;
  align-items: center;
  width: fit-content;
  margin: 16px 0 8px;
  padding: 7px 14px 7px 12px;
  border-radius: 3px;
  background: var(--accento-velo);
  color: var(--navy-tenue);
  font-size: 13px;
}

/* Le tessere del riepilogo: quante voci per reparto, prima ancora di scorrere.
   E' la sola cosa che il foglio dice PRIMA dei prezzi, ed e' la domanda vera di chi
   apre un listino — "che cosa c'e' oggi". */
.lst-riepilogo {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.lst-riepilogo li {
  border-radius: 999px;
}

/* La tessera E' il collegamento, non ne contiene uno: cosi' l'area cliccabile e' tutta la
   pastiglia e non le sole parole. Su un listino da 140 voci il riepilogo diceva quanti
   crostacei c'erano e poi toccava cercarli scorrendo. */
.lst-riepilogo a {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--accento);
  border-radius: 999px;
  color: var(--navy);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.lst-riepilogo a:hover {
  background: var(--accento-velo);
}

.lst-riepilogo a:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
}

/* Lo stacco sopra la sezione quando ci si arriva da un'ancora: senza, la fascia finisce
   appiccicata al bordo dello schermo e non si capisce di essere atterrati su un titolo. */
.lst-sezione {
  scroll-margin-top: 18px;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.lst-riepilogo b {
  margin-left: 5px;
  color: var(--accento);
  font-variant-numeric: tabular-nums;
}

.lst-aggiornamento strong {
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.lst-icona-piccola {
  width: 17px;
  height: 17px;
  color: var(--navy);
}

/* --- tabella --- */

.lst-tabella-guscio {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead th {
  padding: 9px 8px;
  border-top: 2px solid var(--accento);
  border-bottom: 2px solid var(--accento);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Il codice articolo apre la riga: e' quello che il cliente scrive nell'ordine, e cercarlo
   in fondo alla riga vuol dire rileggerla tutta. Tenue e monospaziato, cosi' non compete
   col nome ma le cifre restano incolonnate. */
.lst-col-codice {
  width: 96px;
  padding-left: 40px !important;
  text-align: left;
}

.lst-cella-codice {
  padding-left: 40px;
  color: var(--navy-tenue);
  font-family: "Consolas", "SF Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: -0.02em;
}

.lst-col-prodotto {
  text-align: left;
}

.lst-col-origine {
  width: 240px;
  text-align: left;
}

.lst-col-um {
  width: 90px;
  text-align: center;
}

.lst-col-prezzo {
  width: 96px;
  text-align: right;
  padding-right: 12px !important;
}

/* Le due colonne dello sconto esistono solo sul listino B e C: altrove sarebbero due
   colonne vuote che rubano spazio ai nomi dei prodotti. */

.lst-col-pieno,
.lst-col-sconto,
.lst-cella-pieno,
.lst-cella-sconto {
  display: none;
}

.lst-con-sconto .lst-col-pieno,
.lst-con-sconto .lst-col-sconto,
.lst-con-sconto .lst-cella-pieno,
.lst-con-sconto .lst-cella-sconto {
  display: table-cell;
}

.lst-col-pieno {
  width: 88px;
  text-align: right;
}

.lst-col-sconto {
  width: 86px;
  text-align: center;
}

/* Il prezzo pieno barrato: e' il termine di paragone, quindi si vede ma non compete col
   prezzo vero — piu' piccolo, tenue, e con la riga sopra. */
.lst-cella-pieno {
  color: var(--navy-tenue);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-decoration: line-through;
}

/* Lo sconto e' l'unica cosa che sul listino B/C si legge prima del nome: pastiglia corallo
   piena, il colore caldo del brand usato dove serve davvero convincere. */
.lst-cella-sconto {
  text-align: center;
}

.lst-pastiglia {
  display: inline-block;
  min-width: 52px;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--accento);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.lst-pastiglia-vuota {
  color: var(--navy-tenue);
  font-size: 12px;
}

tbody td {
  padding: 8px;
}

tbody tr.lst-pari td {
  background: var(--azure-soft);
}

/* Il rilievo al passaggio del mouse: il foglio nasce per essere stampato, ma nove volte
   su dieci si legge a schermo, e seguire una riga fino al prezzo su 140 voci senza un
   aggancio e' faticoso. La lineetta corallo a sinistra e' lo stesso segno dell'occhiello. */
tbody tr:not(.lst-sezione):hover td {
  background: var(--accento-velo);
}

tbody tr:not(.lst-sezione):hover .lst-cella-codice {
  box-shadow: inset 3px 0 0 var(--accento);
}

.lst-cella-nome {
  color: var(--navy);
}

/* La condizione di acquisto accanto al nome: sul listino sushi lo stesso articolo compare
   piu' volte a prezzi diversi, e senza la quantita' minima le righe sembrerebbero un
   errore invece che uno scaglione. In corallo perche' e' la leva commerciale della riga. */
.lst-minimo {
  margin-left: 9px;
  padding: 2px 7px;
  border: 1px solid var(--accento);
  border-radius: 3px;
  color: var(--accento-scuro);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lst-cella-origine {
  color: var(--navy-tenue);
  font-size: 12.5px;
}

.lst-cella-um {
  color: var(--navy-tenue);
  font-size: 12.5px;
  text-align: center;
}

.lst-cella-prezzo {
  padding-right: 12px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- intestazione di sezione --- */

/* LE SEZIONI SONO FASCE PIENE NEL COLORE DEL LISTINO, anche da schermo grande.
   Prima l'accento toccava solo dettagli da pochi pixel e i cinque fogli restavano
   indistinguibili a colpo d'occhio: il colore deve occupare superficie per farsi vedere.
   Sono l'elemento che si ripete cinque o sei volte per pagina, quindi sono anche il
   posto giusto per farlo. */
.lst-sezione td {
  padding: 11px 14px;
  border-bottom: 0;
  border-radius: 3px;
  background: var(--accento);
}

.lst-sezione {
  /* Lo stacco sopra la fascia: una riga di tabella non prende margini, quindi lo
     spazio lo fa una cella trasparente sopra. */
  border-top: 18px solid transparent;
}

.lst-sezione-titolo {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* L'icona dentro un cerchio: la stessa idea del bollo del modello, ridotta a un segno.
   Da' alle sezioni un peso che una riga di testo da sola non ha. */
.lst-sezione-icona {
  width: 26px;
  height: 20px;
  flex-shrink: 0;
  color: #ffffff;
}

.lst-sezione-spunta {
  width: 3px;
  height: 15px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.55);
}

/* Il numero grande e corallo: si conta a colpo d'occhio quante sezioni ha il listino. */
.lst-sezione-numero {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
}

/* --- piede --- */

.lst-piede {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 0;
  margin-top: 30px;
  padding: 18px 0 22px;
  border-top: 2px solid var(--accento);
}

.lst-piede-blocco {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0 22px;
  border-left: 1px solid var(--accento);
}

.lst-piede-blocco:first-child {
  padding-left: 0;
  border-left: 0;
}

.lst-piede-icona {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--navy);
}

.lst-piede-titolo {
  margin: 0 0 3px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lst-piede-testo {
  margin: 0;
  color: var(--navy-tenue);
  font-size: 11.5px;
  line-height: 1.45;
}

.lst-piede-testo a {
  color: var(--navy-tenue);
  text-decoration: none;
}

/* La riga a due colori in fondo al foglio, come sul modello. */
.lst-barra {
  display: flex;
  height: 7px;
  margin: 0 -46px;
}

.lst-barra-navy {
  width: 72%;
  background: var(--navy);
}

.lst-barra-accento {
  width: 28%;
  background: var(--accento);
}

.lst-nota {
  max-width: 860px;
  margin: 14px auto 0;
  color: var(--navy-tenue);
  font-size: 11px;
  text-align: center;
}

@media print {
  .lst-body {
    padding: 0;
    background: #ffffff;
  }

  .lst-nota {
    display: none;
  }

  .lst-foglio {
    max-width: none;
    box-shadow: none;
  }

  .lst-sezione {
    break-after: avoid;
  }

  tbody tr {
    break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }
}

/* =========================================================================
   TELEFONO. La tabella a quattro colonne non si stringe: a 390px il prezzo
   finiva fuori schermo e "€/kg" andava a capo in mezzo. Qui la tabella smette
   di essere una tabella e ogni prodotto diventa un blocco: nome sopra, e sotto
   una riga di servizio col codice, l'origine e l'unita', col PREZZO grande a
   destra — che e' la cosa che si cerca quando si scorre un listino col pollice.
   ========================================================================= */

@media (max-width: 720px) {
  .lst-body {
    padding: 0 0 32px;
  }

  .lst-foglio {
    padding: 22px 18px 0;
    box-shadow: none;
  }

  /* La testata occupava mezzo schermo prima di far vedere un prezzo. */
  .lst-testata {
    gap: 14px;
    align-items: flex-start;
  }

  .lst-logo {
    width: 132px;
  }

  .lst-claim {
    padding-left: 14px;
    font-size: 14px;
    line-height: 1.3;
  }

  .lst-occhiello {
    margin-top: 22px;
    font-size: 10px;
    letter-spacing: 0.13em;
  }

  .lst-titolo {
    font-size: 30px;
  }

  .lst-aggiornamento {
    flex-wrap: wrap;
    margin: 10px 0 18px;
    font-size: 12px;
  }

  .lst-aggiornamento strong {
    font-size: 12px;
  }

  /* Via l'intestazione di colonna: senza colonne non ha piu' niente da intestare. */
  thead {
    display: none;
  }

  .lst-tabella-guscio {
    overflow-x: visible;
  }

  table,
  tbody,
  tbody tr,
  tbody td {
    display: block;
    width: auto;
  }

  /* NIENTE RIGHE ALTERNATE sul telefono. Lo sfondo stava sulle CELLE, e con le celle
     diventate blocchi di larghezze diverse usciva a macchie sfalsate invece che a righe.
     Al posto delle strisce, aria e un filo sottile: si legge meglio e sembra piu' curato. */
  tbody tr.lst-pari td,
  tbody tr td {
    background: transparent;
  }

  tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    padding: 13px 2px;
    border-bottom: 1px solid #e6ecf4;
  }

  tbody td {
    padding: 0;
  }

  /* Il codice sopra il nome, minuscolo: chi ordina lo cerca, chi legge lo salta. */
  .lst-cella-codice {
    grid-column: 1;
    padding-left: 0;
    font-size: 10.5px;
    letter-spacing: 0;
    opacity: 0.75;
  }

  .lst-cella-nome {
    grid-column: 1;
    margin: 1px 0 3px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
  }

  .lst-cella-origine,
  .lst-cella-um {
    grid-column: 1;
    display: inline;
    font-size: 11px;
  }

  .lst-cella-origine.lst-vuota {
    display: none;
  }

  .lst-cella-um::before {
    margin: 0 5px;
    content: "·";
  }

  /* L'unita' non ha il puntino davanti se l'origine non c'e': senza questa regola
     la riga cominciava con un separatore appeso al nulla. */
  .lst-cella-origine.lst-vuota + .lst-cella-um::before {
    content: none;
  }

  /* LA COLONNA DEL PREZZO. E' il motivo per cui si apre un listino: sta a destra,
     grande, su una colonna sua, e non si spezza mai. */
  .lst-cella-pieno {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 12px;
    text-align: right;
  }

  .lst-cella-prezzo {
    grid-column: 2;
    grid-row: 2;
    padding-right: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
  }

  .lst-cella-sconto {
    grid-column: 2;
    grid-row: 3;
    margin-top: 5px;
    text-align: right;
  }

  /* Il trattino dello "sconto assente" spariva male: su desktop e' una colonna da
     riempire, sul telefono e' una riga vuota in piu' sotto ogni prezzo. */
  .lst-cella-sconto.lst-pastiglia-vuota {
    display: none;
  }

  .lst-pastiglia {
    min-width: 0;
    padding: 3px 9px;
    font-size: 12.5px;
  }

  /* LE SEZIONI DIVENTANO FASCE PIENE. Su un foglio A4 bastava una riga con un filetto;
     scorrendo col pollice serve un blocco che si riconosca senza leggerlo. */
  .lst-sezione {
    border-bottom: 0;
  }

  .lst-sezione td {
    margin: 22px 0 2px;
    padding: 11px 12px;
    border-bottom: 0;
    border-radius: 4px;
    background: var(--navy);
  }

  .lst-sezione-titolo {
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 0.06em;
    line-height: 1.2;
  }

  /* Sulla fascia piena il cerchio attorno all'icona non serve: il contrasto lo fa gia'
     il fondo navy, e un bordo bianco dentro una banda bianca sarebbe un doppio giro. */
  .lst-sezione-icona {
    width: 24px;
    height: 19px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #ffffff;
  }

  .lst-sezione-spunta {
    height: 13px;
    background: var(--accento);
  }

  /* Il numero resta bianco: il corallo sul navy non si legge. */
  .lst-sezione-numero {
    color: #ffffff;
    font-size: 14px;
  }

  .lst-aggiornamento {
    width: auto;
    padding: 6px 10px;
  }

  .lst-riepilogo {
    margin-bottom: 18px;
  }

  .lst-riepilogo li {
    font-size: 10px;
  }

  .lst-filigrana {
    display: none;
  }

  .lst-piede {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 22px;
  }

  .lst-piede-blocco {
    padding: 0;
    border-left: 0;
  }

  .lst-piede-icona {
    width: 32px;
    height: 32px;
  }

  .lst-barra {
    margin: 0 -18px;
  }

  .lst-nota {
    padding: 0 18px;
  }
}