/*
 * pagine/destinazioni.css — modale "Seleziona destinazioni" del sito esterno.
 *
 * PERCHE' ESISTE QUESTO FILE
 * La finestra e' costruita a runtime da share/js/share_destinazioni.js
 * (createDestForm / createRow / createNewAddress) e finora era vestita da
 * ordini/form_destinazioni.css, un foglio legacy a float e percentuali che
 * non conosce nessun token --ld-*: input #eee, ombre diffuse sotto ogni
 * riga, colonne al 60/17/17/5% disallineate rispetto all'intestazione,
 * form nuovo indirizzo largo 800px fissi con etichette su 180px.
 *
 * form_destinazioni.css NON si tocca: e' caricato da 10 template, 8 dei
 * quali sono pagine interne (gestionale e magazzino). Le due pagine del
 * sito nuovo smettono di caricarlo e caricano questo al suo posto:
 *
 *   sito/ordini/invio_ordine.html
 *   sito/pagine/nuovo_preventivo.html
 *
 * Di conseguenza qui NON ci sono override difensivi (float:none,
 * width:auto, !important): il foglio legacy non e' in cascata, si
 * riparte da zero. L'unica eccezione e' #shadow, che arriva da
 * common/css/shadow.css — quello resta caricato perche' definisce .hide,
 * usata da tutta la logica JS condivisa.
 *
 * IL JS NON E' STATO MODIFICATO. share_destinazioni.js e' condiviso con
 * magazzino: il contratto DOM (id e classi) qui sotto e' esattamente
 * quello che il JS genera oggi.
 *
 * Ombre: rimosse ovunque tranne l'elevazione del dialog, che galleggia
 * davvero sopra la pagina oscurata.
 */

/* ====================================================================
   1. SCRIM E GUSCIO DEL DIALOG
   ====================================================================
   share_destinazioni.js fa shadowDiv.appendChild(mainDiv): #div-destinazioni
   e' figlio di #shadow. Centrare con flex sul genitore evita il
   position:fixed + top/left in percentuale del legacy, e mantiene intatto
   hideShadow() (chiude solo se e.target === shadowDiv, quindi il click sul
   padding dello scrim continua a chiudere).
   ==================================================================== */

#shadow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ld-space-4);
  /* Inchiostro caldo, non il velo grigio chiaro del legacy: il dialog
     deve staccare, non annegare (token --ld-velo). */
  background-color: var(--ld-velo);
  z-index: 1050;
}

#div-destinazioni {
  /* Griglia condivisa da intestazione e righe: e' l'unico punto in cui
     le colonne sono definite, quindi non possono piu' divergere come
     accadeva con le percentuali ripetute del legacy. */
  --dest-colonne: minmax(0, 1fr) 7rem 4rem 5.5rem;

  position: static;
  display: flex;
  flex-direction: column;
  width: min(60rem, 100%);
  max-height: 100%;
  /*
    Lo scroll NON sta qui, sta nel pannello (regola sotto). Un elemento
    che e' insieme colonna flex E scroll container entra in conflitto
    con i propri figli: in colonna un flex item ha min-height:auto,
    quindi non si restringe mai sotto la propria altezza naturale. Il
    contenuto pretende piu' spazio del max-height, i due meccanismi si
    contendono l'altezza e lo scrollTop si ricalcola a ogni modifica
    del contenuto (comparsa di #NA-Div, updateSelect() che abilita e
    disabilita le option): e' il "torna sempre su".
  */
  overflow: hidden;
  font-family: var(--ld-font-ui);
  font-size: var(--ld-dim-corpo);
  color: var(--ld-testo);
  background-color: var(--ld-superficie);
  border-radius: var(--ld-radius-lg);
  box-shadow: var(--ld-ombra-3);
}

/*
  I due pannelli del dialog: il wrapper "upper" creato dal JS (lista) e
  #NA-Div (nuovo indirizzo). min-height:0 e' indispensabile: senza,
  l'overflow-y non ha effetto perche' il flex item non puo' restringersi
  sotto il contenuto.
*/
#div-destinazioni > div {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ld-space-6);
}

/* Il wrapper "upper": intestazione, lista, bottoni. */
#div-destinazioni > div:not(#NA-Div) {
  display: flex;
  flex-direction: column;
  gap: var(--ld-space-3);
}

/* ====================================================================
   1-bis. I TRE LIVELLI
   ====================================================================
   Richiesta esplicita: 1) form invio ordine, 2) selezione destinazioni,
   3) nuovo indirizzo. I primi due esistono gia' (pagina e dialog); il
   terzo si ottiene ritirando la lista quando la scheda del nuovo
   indirizzo e' aperta, invece di impilarle nello stesso pannello.

   Si fa in CSS puro perche' share_destinazioni.js e' condiviso con
   magazzino e non va toccato: il JS gia' toglie .hide da #NA-Div
   quando si sceglie "Inserisci nuovo indirizzo" (createNewAddress) e
   gliela rimette sia su Annulla sia a salvataggio riuscito
   (checkAddress -> insertAddress). Il ritorno al livello 2 funziona
   quindi senza una riga di JS in piu'.

   Effetto collaterale desiderato: il pannello del nuovo indirizzo non
   deve piu' condividere l'altezza con la lista, quindi lo scroll da
   percorrere si accorcia di molto.
   ==================================================================== */

#div-destinazioni:has(> #NA-Div:not(.hide)) > div:not(#NA-Div) {
  display: none;
}

/* ====================================================================
   2. INTESTAZIONE DELLE COLONNE
   ====================================================================
   Il JS mette nell'intestazione TRE celle (.listdest, #copie-mancanti,
   .listsald) mentre ogni riga ne ha QUATTRO: manca la colonna azioni.
   E' la causa prima del disallineamento. La cella fantasma ::after
   ristabilisce il conto senza toccare il JS.
   ==================================================================== */

.listhead {
  display: grid;
  grid-template-columns: var(--dest-colonne);
  gap: var(--ld-space-3);
  align-items: center;
  padding: var(--ld-space-2);
  font-size: var(--ld-dim-piccolo);
  font-weight: var(--ld-peso-semi);
  color: var(--ld-testo-muted);
  /* Stessa veste delle <th> delle liste (design.css § 7). */
  background-color: var(--ld-superficie-3);
  border-radius: var(--ld-radius-sm);
}

.listhead::after {
  content: "";
}

.listhead > #copie-mancanti,
.listhead > .listsald {
  text-align: center;
}

/* Il contatore delle copie residue: e' un dato, non un'etichetta. */
#copie-mancanti b {
  color: var(--ld-primario-testo);
  font-variant-numeric: tabular-nums;
}

/* ====================================================================
   3. LISTA DELLE DESTINAZIONI
   ==================================================================== */

#div-list {
  max-height: 22rem;
  /* 'auto', non 'scroll': il legacy teneva la barra sempre disegnata
     anche con due righe. Niente overscroll-behavior:contain, che a fine
     corsa impedirebbe alla rotellina di proseguire sul pannello. */
  overflow-y: auto;
}

.listrow {
  display: grid;
  grid-template-columns: var(--dest-colonne);
  gap: var(--ld-space-3);
  align-items: center;
  padding: var(--ld-space-2);
  border-radius: var(--ld-radius-sm);
  /* Via l'alone `0 3px 17px #DFDFDF` che faceva di ogni riga una
     mini-card fluttuante. Le righe si separano con un filo. */
  border-bottom: 1px solid var(--ld-bordo-neutro);
}

.listrow:last-child {
  border-bottom: 0;
}

.listrow:hover {
  background-color: var(--ld-riga-hover);
}

.listrow > .listsald {
  display: flex;
  justify-content: center;
}

/* Colonna azioni. row-reverse perche' il JS accoda prima "+" e poi "x":
   invertendo il flusso il "+" resta incolonnato a destra su tutte le
   righe, comprese quelle che non hanno il "x" (la prima). */
.listrow > .listdele {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: var(--ld-space-2);
}

/* ====================================================================
   4. CAMPI
   ====================================================================
   Il JS crea <input> e <select> nudi, senza classi Bootstrap: .form-control
   e tutto bootstrap-ponte.css non li raggiungono mai. Qui si riproduce la
   stessa veste, per selettore.
   ==================================================================== */

#div-destinazioni input:not([type="checkbox"]):not([type="hidden"]),
#div-destinazioni select {
  width: 100%;
  min-height: 2.5rem;
  padding: var(--ld-space-2) var(--ld-space-3);
  font-family: inherit;
  font-size: var(--ld-dim-piccolo);
  line-height: 1.4;
  color: var(--ld-testo);
  /* Fondo bianco e bordo a 3:1, non il #eee su #EDEDED del legacy:
     il contorno di cio' che si tocca deve vedersi (WCAG 1.4.11). */
  background-color: var(--ld-superficie);
  border: 1px solid var(--ld-bordo);
  border-radius: var(--ld-radius-md);
  box-shadow: none;
}

/* Stesso anello di focus di .form-control (bootstrap-ponte.css). */
#div-destinazioni input:focus,
#div-destinazioni select:focus {
  border-color: var(--ld-focus);
  box-shadow: 0 0 0 .2rem var(--ld-focus-anello);
}

.listrow input.copies {
  text-align: center;
}

/* accent-color veste la checkbox nativa col colore del tenant: nessun
   markup aggiuntivo, quindi nessuna modifica al JS. */
#div-destinazioni input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--ld-primario);
  cursor: pointer;
}

/* ====================================================================
   5. SELECT2
   ====================================================================
   createRow() chiama $(select).select2(): la <select> viene sostituita da
   una struttura tutta sua, che va ricondotta ai token.
   ==================================================================== */

/* Select2 4.0 scrive la larghezza inline sul container copiandola dalla
   <select> originale: senza !important non si riesce a farla stare nella
   cella della griglia. */
#div-destinazioni .select2-container {
  width: 100% !important;
}

#div-destinazioni .select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  height: auto;
  min-height: 2.5rem;
  padding: var(--ld-space-1) var(--ld-space-3);
  background-color: var(--ld-superficie);
  border: 1px solid var(--ld-bordo);
  border-radius: var(--ld-radius-md);
}

#div-destinazioni .select2-container--default
.select2-selection--single .select2-selection__rendered {
  padding: 0;
  font-size: var(--ld-dim-piccolo);
  line-height: 1.4;
  color: var(--ld-testo);
}

#div-destinazioni .select2-container--default
.select2-selection--single .select2-selection__arrow {
  top: 0;
  right: var(--ld-space-2);
  height: 100%;
}

#div-destinazioni .select2-container--open .select2-selection--single {
  border-color: var(--ld-focus);
  box-shadow: 0 0 0 .2rem var(--ld-focus-anello);
}

/*
  Il pannello a tendina di Select2 e' agganciato al <body>, fuori da
  #div-destinazioni: sotto quell'id non lo si raggiunge. Le regole qui
  sotto sono percio' nude, ma il file e' caricato solo dalle due pagine
  del sito nuovo, quindi non toccano il legacy.
*/
.select2-dropdown {
  border-color: var(--ld-bordo);
  border-radius: var(--ld-radius-md);
  box-shadow: var(--ld-ombra-2);
}

.select2-container--default
.select2-results__option--highlighted[aria-selected] {
  background-color: var(--ld-primario);
  color: var(--ld-su-primario);
}

.select2-container--default
.select2-search--dropdown .select2-search__field {
  padding: var(--ld-space-2);
  border: 1px solid var(--ld-bordo);
  border-radius: var(--ld-radius-sm);
}

.select2-container--default
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--ld-focus);
  box-shadow: 0 0 0 .2rem var(--ld-focus-anello);
  outline: none;
}

/* ====================================================================
   6. BOTTONI
   ====================================================================
   share_destinazioni.js genera i bottoni con le classi di evo-button.css,
   foglio che il sito nuovo non carica per scelta esplicita (design.css,
   decisione 3): le classi nude .blue/.small colpirebbero qualsiasi
   elemento omonimo altrove in pagina. Qui sono ridefinite scoped, sul
   modello di .btn / .btn-primary / .btn-outline-secondary.
   ==================================================================== */

#div-destinazioni .evo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ld-space-2) var(--ld-space-4);
  font-size: var(--ld-dim-piccolo);
  font-weight: var(--ld-peso-medio);
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--ld-radius-md);
  cursor: pointer;
  user-select: none;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

#div-destinazioni .evo-button.blue {
  background-color: var(--ld-primario);
  border-color: var(--ld-primario);
  color: var(--ld-su-primario);
}

#div-destinazioni .evo-button.blue:hover {
  background-color: var(--ld-primario-scuro);
  border-color: var(--ld-primario-scuro);
}

#div-destinazioni .evo-button.lightblue {
  background-color: transparent;
  border-color: var(--ld-bordo);
  color: var(--ld-testo);
}

#div-destinazioni .evo-button.lightblue:hover {
  background-color: var(--ld-superficie-2);
}

/* Barra dei bottoni della lista. Il JS accoda prima "Prosegui" e poi
   "Annulla": row-reverse li rimette nell'ordine del resto del sito
   (azione secondaria a sinistra, primaria a destra). */
#div-destinazioni div:has(> #btnDest) {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: var(--ld-space-3);
  padding-top: var(--ld-space-4);
  border-top: 1px solid var(--ld-bordo-neutro);
}

/* --- Bottoni icona delle righe (aggiungi / rimuovi) ------------------
   Nel legacy erano due blocchi blu pieni per riga: con cinque righe la
   finestra diventava una scacchiera. Qui sono quadrati discreti, il
   colore torna solo al passaggio del mouse. */
/*
  ATTENZIONE ALLA SPECIFICITA': queste regole devono battere
  `#div-destinazioni .evo-button.blue` (1-2-0) qui sopra, perche' il JS
  mette la classe .blue anche sui bottoni icona. Un selettore
  `.listdele .evo-button` peserebbe 0-2-0 e perderebbe, lasciando i
  quadrati blu pieni: da qui l'id in testa a ogni selettore.
*/
#div-destinazioni .listdele .evo-button.blue {
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: var(--ld-dim-piccolo);
  background-color: transparent;
  border-color: var(--ld-bordo-neutro);
  color: var(--ld-primario-testo);
}

/*
  Glifi: il JS applica le classi di fontello (.icon-plus / .icon-cancel),
  ma tutto il resto del sito usa Bootstrap Icons, gia' caricate da
  sito/base.html. Invece di toccare il JS condiviso si riscrive qui il
  solo glifo, cosi' le icone del modale parlano la stessa lingua delle
  liste e della navbar. I codepoint sono quelli di .bi-plus-lg e
  .bi-x-lg in vendor/bootstrap-icons/bootstrap-icons.min.css.

  Fontello imposta anche margine e larghezza fissa sullo pseudo-elemento:
  in un bottone quadrato disassano il glifo, vanno azzerati.
*/
#div-destinazioni .listdele .evo-button::before {
  font-family: "bootstrap-icons";
  font-weight: normal;
  font-style: normal;
  width: auto;
  margin: 0;
  line-height: 1;
  vertical-align: middle;
}

#div-destinazioni .listdele .evo-button.icon-plus::before {
  content: "\f64d";
}

#div-destinazioni .listdele .evo-button.icon-cancel::before {
  content: "\f659";
}

#div-destinazioni .listdele .evo-button.icon-plus:hover {
  background-color: var(--ld-primario-chiaro);
  border-color: var(--ld-primario);
}

/* La rimozione e' distruttiva: resta neutra a riposo, si tinge di
   rosso solo sotto il puntatore. */
#div-destinazioni .listdele .evo-button.icon-cancel {
  color: var(--ld-testo-muted);
}

#div-destinazioni .listdele .evo-button.icon-cancel:hover {
  background-color: var(--bs-danger-bg-subtle, #F8D7DA);
  border-color: var(--bs-danger, #DC3545);
  color: var(--bs-danger-text-emphasis, #B02A37);
}

/* Stato spento del "+" di riga quando gli indirizzi dell'anagrafica sono
   finiti (sito/js/destinazioni_sito.js, updateSelect() decorato): non
   sparisce e non si disabilita via attributo `disabled`, perche' il
   clic deve comunque restare possibile — serve a mostrare la notifica
   che rimanda a "+ Aggiungi indirizzo". Le regole ripetono anche lo
   stato :hover per pareggiarne la specificita' (id + 4 classi): senza,
   passandoci sopra col mouse l'azzurro dell'hover normale vincerebbe
   sull'ordine di dichiarazione. */
#div-destinazioni .listdele .evo-button.icon-plus.ld-esaurito,
#div-destinazioni .listdele .evo-button.icon-plus.ld-esaurito:hover {
  background-color: transparent;
  border-color: var(--ld-bordo-neutro);
  color: var(--ld-testo-disabilitato);
  opacity: .6;
  cursor: not-allowed;
}

/* ====================================================================
   6-bis. "+ AGGIUNGI INDIRIZZO"
   ====================================================================
   Unico punto di ingresso per creare un indirizzo nuovo (sostituisce
   "Inserisci nuovo indirizzo" nelle tendine di riga — la stessa
   decorazione JS che lo toglie inserisce questo pulsante, vedi
   sito/js/destinazioni_sito.js e
   docs/grafica_sito_esterno/13-destinazioni-aggiungi-indirizzo.md).
   Le classi Bootstrap (.btn.btn-outline-primary.btn-sm) bastano da
   sole: a differenza degli <input>/<select> generati da
   share_destinazioni.js, questo bottone e' creato dalla decorazione e
   puo' usare le classi vere invece di doverle riprodurre a mano.
   ==================================================================== */

.ld-dest-azioni {
  margin-top: var(--ld-space-2);
}

/* ====================================================================
   7. SCHEDA "NUOVO INDIRIZZO"
   ====================================================================
   createNewAddress() accoda #NA-Div come fratello della lista, dentro la
   stessa superficie bianca: senza uno sfondo proprio non si capisce che
   e' un blocco a se'. Qui diventa una scheda con fondo tenue, bordo e
   raggio propri.

   Il layout passa da "etichetta a destra su 180px fissi, blocco largo
   800px" a una griglia a due colonne con l'etichetta SOPRA il campo,
   come il resto dei form del sito (.form-label, bootstrap-ponte.css).
   Le classi .long / .medium / .short generate da createDLI() diventano
   indicazioni di quante colonne occupare.
   ==================================================================== */

#div-destinazioni > #NA-Div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: var(--ld-space-4);
  /* Niente padding in fondo: lo mette la barra dei bottoni, che e'
     appiccicata al fondo del pannello (sotto). */
  padding: var(--ld-space-5) var(--ld-space-5) 0;
  /* Fondo tenue anche a pannello pieno: segnala che si e' scesi di un
     livello rispetto alla lista delle destinazioni. */
  background-color: var(--ld-superficie-2);
}

/*
  Titolo del livello 3. Il testo NON sta qui: arriva dal template come
  custom property (--ld-titolo-nuovo-indirizzo), altrimenti sarebbe una
  stringa italiana fissa nel CSS, invisibile a gettext e quindi non
  traducibile in EN/FR/DE. Se la property non e' dichiarata, il
  fallback e' la stringa vuota e non compare nulla.
*/
#div-destinazioni > #NA-Div::before {
  content: var(--ld-titolo-nuovo-indirizzo, "");
  grid-column: 1 / -1;
  font-family: var(--ld-font-display);
  font-size: var(--ld-dim-h3);
  font-weight: var(--ld-peso-semi);
  letter-spacing: var(--ld-tracciato-titolo);
  color: var(--ld-testo);
  padding-bottom: var(--ld-space-3);
  border-bottom: 1px solid var(--ld-bordo-neutro);
}

#NA-Div > div {
  display: flex;
  flex-direction: column;
  gap: var(--ld-space-1);
  min-width: 0;
}

#NA-Div > div.long {
  grid-column: 1 / -1;
}

#NA-Div label {
  font-size: var(--ld-dim-piccolo);
  font-weight: var(--ld-peso-medio);
  color: var(--ld-testo);
}

/* Il campo "a saldo" e' una checkbox: etichetta a fianco, non sopra, e
   allineata in basso per restare sulla linea del campo "copie" che le
   sta accanto nella griglia. createDLI() accoda label e poi input,
   quindi row-reverse per avere la casella prima del testo. */
#NA-Div > div:has(> input[type="checkbox"]) {
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ld-space-2);
  align-self: end;
  min-height: 2.5rem;
}

/*
  Barra dei bottoni della scheda (div.a). Appiccicata al fondo del
  pannello: con quattordici campi, "Annulla" e' anche il tasto per
  tornare al livello 2, e non deve costringere a scorrere tutto il form
  per essere raggiunto. Lo sfondo pieno serve a non far trasparire i
  campi che le scorrono sotto.
*/
#NA-Div .a {
  grid-column: 1 / -1;
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  gap: var(--ld-space-3);
  margin-top: var(--ld-space-2);
  padding-block: var(--ld-space-4);
  background-color: var(--ld-superficie-2);
  border-top: 1px solid var(--ld-bordo-neutro);
}

/* ====================================================================
   8. STATI DI ERRORE
   ====================================================================
   updateMissingCopie() e checkAddress() aggiungono .error ai campi e al
   contatore. Il legacy riempiva il campo di rosso pieno (#E85D5D),
   rendendo illeggibile il valore appena digitato: qui il fondo resta
   tenue e a parlare e' il bordo.
   ==================================================================== */

#div-destinazioni input.error,
#div-destinazioni select.error {
  background-color: var(--bs-danger-bg-subtle, #F8D7DA);
  border-color: var(--bs-danger, #DC3545);
}

#div-destinazioni input.error:focus,
#div-destinazioni select.error:focus {
  border-color: var(--bs-danger, #DC3545);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-danger-rgb, 220, 53, 69), .25);
}

#copie-mancanti b.error {
  color: var(--bs-danger-text-emphasis, #B02A37);
}

/* ====================================================================
   9. SCHERMI STRETTI
   ====================================================================
   Sotto i 576px le quattro colonne non stanno: la destinazione prende
   tutta la riga e copie / saldo / azioni si dispongono sotto. Il
   breakpoint e' lo stesso usato da .ld-cv in design.css.
   ==================================================================== */

@media (max-width: 575.98px) {
  /* Il padding sta sui pannelli, non sul dialog: si stringe li'. */
  #div-destinazioni > div {
    padding: var(--ld-space-4);
  }

  /* Delle tre intestazioni resta il contatore delle copie residue, che
     e' un dato che cambia; le altre due etichettano campi che a colonna
     unica si leggono da soli. */
  .listhead {
    grid-template-columns: 1fr;
  }

  .listhead > .listdest,
  .listhead > .listsald,
  .listhead::after {
    display: none;
  }

  .listhead > #copie-mancanti {
    text-align: left;
  }

  .listrow {
    grid-template-columns: 1fr auto auto;
    row-gap: var(--ld-space-2);
    padding-block: var(--ld-space-3);
  }

  .listrow > .listdest {
    grid-column: 1 / -1;
  }

  /* Stessa specificita' (2-0-0) della regola a schermo largo, altrimenti
     non la batte e il pannello resterebbe a due colonne. */
  #div-destinazioni > #NA-Div {
    grid-template-columns: 1fr;
    padding: var(--ld-space-4) var(--ld-space-4) 0;
  }
}