/*
 * bootstrap-ponte.css — mappatura dei token sui componenti Bootstrap 5.3.
 *
 * Attua l'Opzione A della decisione 7 (tematizzazione senza Sass), con una
 * variante rispetto a 05-proposta-restyle.md: il piano prevedeva di ripetere
 * questo blocco di override dentro OGNI file di tema (~80 righe x 6 tenant).
 * Non serve: le custom property CSS si risolvono al momento dell'uso, quindi
 * basta mappare una volta sola `--bs-*` su `--ld-*` qui, e lasciare che ogni
 * tema ridefinisca soltanto i propri 6 valori di `--ld-`.
 *
 * Risultato: ~480 righe di CSS di tema diventano ~40, e aggiungere un
 * componente Bootstrap si fa in un punto solo invece che in sei.
 *
 * Il file va caricato DOPO bootstrap.min.css e DOPO design-tokens.css, e
 * PRIMA del tema di tenant.
 */

/* ====================================================================
   BOTTONI
   ==================================================================== */

.btn-primary {
  --bs-btn-bg:                 var(--ld-primario);
  --bs-btn-border-color:       var(--ld-primario);
  --bs-btn-color:              var(--ld-su-primario);
  --bs-btn-hover-bg:           var(--ld-primario-scuro);
  --bs-btn-hover-border-color: var(--ld-primario-scuro);
  --bs-btn-hover-color:        var(--ld-su-primario);
  --bs-btn-active-bg:          var(--ld-primario-scuro);
  --bs-btn-active-border-color: var(--ld-primario-scuro);
  --bs-btn-active-color:       var(--ld-su-primario);
  --bs-btn-disabled-bg:        var(--ld-primario);
  --bs-btn-disabled-border-color: var(--ld-primario);
  --bs-btn-disabled-color:     var(--ld-su-primario);
}

.btn-outline-primary {
  --bs-btn-color:              var(--ld-primario-testo);
  --bs-btn-border-color:       var(--ld-bordo);
  --bs-btn-hover-bg:           var(--ld-primario);
  --bs-btn-hover-border-color: var(--ld-primario);
  --bs-btn-hover-color:        var(--ld-su-primario);
  --bs-btn-active-bg:          var(--ld-primario-scuro);
  --bs-btn-active-border-color: var(--ld-primario-scuro);
  --bs-btn-active-color:       var(--ld-su-primario);
  --bs-btn-disabled-color:     var(--ld-testo-disabilitato);
  --bs-btn-disabled-border-color: var(--ld-bordo-neutro);
}

/* Bottone terziario "ghost": nessuno sfondo finche' non ci passi sopra. */
.btn-ghost {
  --bs-btn-color:        var(--ld-testo);
  --bs-btn-bg:           transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg:     var(--ld-superficie-2);
  --bs-btn-hover-color:  var(--ld-primario-testo);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg:    var(--ld-superficie-3);
  --bs-btn-active-color: var(--ld-primario-testo);
  --bs-btn-active-border-color: transparent;
}

/* Bottone d'accento: l'arancio condiviso. Attenzione al contrasto — a
   piena saturazione vuole testo scuro; la variante scura regge il bianco
   (06-palette-e-asset-tenant.md).                                       */
.btn-accento {
  --bs-btn-bg:                 var(--ld-accento);
  --bs-btn-border-color:       var(--ld-accento);
  --bs-btn-color:              var(--ld-su-accento);
  --bs-btn-hover-bg:           var(--ld-accento-scuro);
  --bs-btn-hover-border-color: var(--ld-accento-scuro);
  --bs-btn-hover-color:        #FFFFFF;
  --bs-btn-active-bg:          var(--ld-accento-scuro);
  --bs-btn-active-color:       #FFFFFF;
}

/* Densita' dei controlli, governata dalla direzione visiva. */
.btn {
  --bs-btn-padding-y: var(--ld-space-2);
  --bs-btn-padding-x: var(--ld-space-4);
  --bs-btn-font-weight: var(--ld-peso-medio);
  --bs-btn-border-radius: var(--ld-radius-md);
}

/* ====================================================================
   LINK
   ==================================================================== */

a {
  color: var(--ld-primario-testo);
  text-underline-offset: 0.2em;
}
a:hover, a:focus {
  color: var(--ld-primario-scuro);
}

/* ====================================================================
   CAMPI DI FORM
   ==================================================================== */

.form-control,
.form-select {
  --bs-border-color: var(--ld-bordo-neutro);
  border-radius: var(--ld-radius-md);
  padding: var(--ld-densita-controllo);
}

.form-select {
  /* La shorthand sopra azzera il padding-right maggiorato che
     Bootstrap riserva alla freccia nativa (2.25rem): senza
     ripristinarlo la freccia si sovrappone al testo selezionato. */
  padding-right: 2.25rem;
}

.form-control:focus,
.form-select:focus {
  /* --ld-bordo e' un neutro condiviso (design-tokens.css § 2): il
     focus resta l'unico bordo che parla del tenant, tramite --ld-focus. */
  border-color: var(--ld-focus);
  box-shadow: 0 0 0 0.2rem var(--ld-focus-anello);
}

.form-label {
  font-size: var(--ld-dim-piccolo);
  font-weight: var(--ld-peso-medio);
  color: var(--ld-testo);
  margin-bottom: var(--ld-space-1);
}

.form-text {
  font-size: var(--ld-dim-caption);
  color: var(--ld-testo-muted);
}

.form-check-input:checked {
  background-color: var(--ld-primario);
  border-color: var(--ld-primario);
}

/* ====================================================================
   NAVIGAZIONE, PAGINAZIONE, TAB
   ==================================================================== */

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--ld-primario);
  --bs-nav-pills-link-active-color: var(--ld-su-primario);
  --bs-nav-pills-border-radius: var(--ld-radius-md);
}

.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--ld-primario-testo);
  --bs-nav-tabs-link-active-border-color:
      var(--ld-bordo-neutro) var(--ld-bordo-neutro) var(--ld-superficie);
}

.pagination {
  --bs-pagination-color:            var(--ld-primario-testo);
  --bs-pagination-hover-color:      var(--ld-primario-scuro);
  --bs-pagination-hover-bg:         var(--ld-primario-chiaro);
  --bs-pagination-active-bg:        var(--ld-primario);
  --bs-pagination-active-border-color: var(--ld-primario);
  --bs-pagination-active-color:     var(--ld-su-primario);
  --bs-pagination-border-color:     var(--ld-bordo-neutro);
  --bs-pagination-border-radius:    var(--ld-radius-md);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg:    var(--ld-primario);
  --bs-dropdown-link-active-color: var(--ld-su-primario);
  --bs-dropdown-border-color:      var(--ld-bordo-neutro);
  --bs-dropdown-border-radius:     var(--ld-radius-md);
  --bs-dropdown-box-shadow:        var(--ld-ombra-2);
}

/* ====================================================================
   CARD, ALERT, BADGE, TABELLE, MODALI, TOAST
   ==================================================================== */

.card {
  /* Senza questo, Bootstrap eredita --bs-card-bg da --bs-body-bg (il
     fondo avorio della pagina): la card sparisce nel fondo invece di
     stagliarsi come superficie sollevata. */
  --bs-card-bg:             var(--ld-superficie);
  --bs-card-border-color:   var(--ld-bordo-neutro);
  --bs-card-border-radius:  var(--ld-radius-lg);
  --bs-card-cap-bg:         var(--ld-superficie-2);
  --bs-card-spacer-y:       var(--ld-space-4);
  --bs-card-spacer-x:       var(--ld-space-4);
  /* Ombra tenue invece del solo bordo: sulla direzione "Ibrido D3" la
     card si stacca leggermente dal fondo avorio della pagina. */
  box-shadow: var(--ld-ombra-1);
}

/* --------------------------------------------------------------------
   AVVISI: palette di stato, condivisa da .alert e .ld-avviso
   --------------------------------------------------------------------
   Ogni variante imposta sull'elemento quattro variabili intermedie, e
   nient'altro:

     --ld-stato         colore forte: filetto, icona, testo
     --ld-stato-tenue   fondo del blocco
     --ld-stato-bordo   contorno
     --ld-stato-glifo   codepoint dell'icona in Bootstrap Icons

   Perche' l'intermediazione invece di scrivere due volte i colori: la
   stessa riga di variante veste sia l'alert nel flusso della pagina sia
   il toast flottante, che per Bootstrap sono componenti diversi con set
   di variabili diversi (--bs-alert-* e --bs-toast-*). Una definizione,
   due usi; e aggiungere uno stato costa una riga sola.

   L'anatomia (filetto a sinistra, incavo dell'icona, impilamento delle
   notifiche, animazione) sta in design.css § 12: Bootstrap non la copre.

   `.ld-avviso--*` sono le classi che sito/js/notifiche.js mette sui
   toast. Stanno qui accanto alle varianti Bootstrap corrispondenti
   proprio perche' si vedano appaiate: se una cambia, cambia l'altra.
   -------------------------------------------------------------------- */

.alert-success,
.ld-avviso--successo {
  --ld-stato:       var(--ld-successo);
  --ld-stato-tenue: var(--ld-successo-tenue);
  --ld-stato-bordo: var(--ld-successo-bordo);
  --ld-stato-glifo: "\f26a";   /* bi-check-circle-fill */
}

.alert-danger,
.ld-avviso--errore {
  --ld-stato:       var(--ld-errore);
  --ld-stato-tenue: var(--ld-errore-tenue);
  --ld-stato-bordo: var(--ld-errore-bordo);
  --ld-stato-glifo: "\f622";   /* bi-x-circle-fill */
}

.alert-warning,
.ld-avviso--avviso {
  --ld-stato:       var(--ld-avviso);
  --ld-stato-tenue: var(--ld-avviso-tenue);
  --ld-stato-bordo: var(--ld-avviso-bordo);
  --ld-stato-glifo: "\f33a";   /* bi-exclamation-triangle-fill */
}

.alert-info,
.alert-primary,
.ld-avviso--info {
  --ld-stato:       var(--ld-info);
  --ld-stato-tenue: var(--ld-info-tenue);
  --ld-stato-bordo: var(--ld-info-bordo);
  --ld-stato-glifo: "\f430";   /* bi-info-circle-fill */
}

/* Neutro: e' il livello DEBUG di django.contrib.messages, che non ha un
   colore perche' non ha un significato per l'utente finale. */
.alert-secondary {
  --ld-stato:       var(--ld-testo-muted);
  --ld-stato-tenue: var(--ld-superficie-2);
  --ld-stato-bordo: var(--ld-bordo-neutro);
  --ld-stato-glifo: "\f430";   /* bi-info-circle-fill */
}

/* --------------------------------------------------------------------
   AVVISI: cablaggio sulle variabili di Bootstrap
   --------------------------------------------------------------------
   Le varianti qui sopra hanno specificita' (0,1,0), esattamente come
   `.alert` e `.toast`: e' l'ordine dei file a decidere. Questo foglio e'
   caricato dopo bootstrap.min.css, quindi queste righe vincono sulle
   varianti di serie; e siccome le custom property si risolvono
   sull'elemento e non nella regola, non importa quale delle due regole
   scriva --ld-stato e quale lo legga.
   -------------------------------------------------------------------- */

.alert {
  --bs-alert-color:         var(--ld-stato, var(--ld-testo));
  --bs-alert-bg:            var(--ld-stato-tenue, var(--ld-superficie-2));
  --bs-alert-border-color:  var(--ld-stato-bordo, var(--ld-bordo-neutro));
  --bs-alert-link-color:    var(--ld-stato, var(--ld-testo));
  --bs-alert-border-radius: var(--ld-radius-md);
  --bs-alert-padding-y:     var(--ld-space-3);
  --bs-alert-padding-x:     var(--ld-space-4);
  --bs-alert-margin-bottom: var(--ld-space-4);
}

/* Il bottone di chiusura di serie ha padding 1.25rem: era tarato sul
   padding 1rem dell'alert Bootstrap, non sui 12px del nostro. Senza
   questo la "x" scivola sotto la prima riga di testo. */
.alert-dismissible .btn-close {
  padding: var(--ld-space-3) var(--ld-space-4);
}

.toast {
  --bs-toast-color:         var(--ld-stato, var(--ld-testo));
  /* Di serie e' rgba(fondo, .85): un avviso semitrasparente lascia
     leggere in trasparenza la pagina sotto. Qui e' opaco. */
  --bs-toast-bg:            var(--ld-stato-tenue, var(--ld-superficie));
  --bs-toast-border-color:  var(--ld-stato-bordo, var(--ld-bordo-neutro));
  --bs-toast-border-radius: var(--ld-radius-md);
  --bs-toast-box-shadow:    var(--ld-ombra-2);
  --bs-toast-padding-y:     var(--ld-space-3);
  --bs-toast-padding-x:     var(--ld-space-4);
  /* 0.875rem di serie: un messaggio d'errore non e' una didascalia. */
  --bs-toast-font-size:     var(--ld-dim-corpo);
  --bs-toast-max-width:     26rem;
}

/* I badge di stato ordine usano i colori semantici di Bootstrap, MAI
   l'accento: l'arancio significa "accento", non "attenzione"
   (07-piano-di-sviluppo.md § A6).                                      */
.badge {
  --bs-badge-font-weight: var(--ld-peso-medio);
  --bs-badge-border-radius: var(--ld-radius-sm);
}

.table {
  --bs-table-border-color: var(--ld-bordo-neutro);
  --bs-table-striped-bg:   var(--ld-superficie-2);
  --bs-table-hover-bg:     var(--ld-riga-hover);
}

.modal {
  --bs-modal-border-color:  var(--ld-bordo-neutro);
  --bs-modal-border-radius: var(--ld-radius-lg);
  --bs-modal-box-shadow:    var(--ld-ombra-3);
}

.offcanvas {
  --bs-offcanvas-border-color: var(--ld-bordo-neutro);
}

/* ====================================================================
   LIBRERIE DI TERZE PARTI
   ==================================================================== */

/* Tom Select: il tema bootstrap5 ufficiale copre quasi tutto, restano il
   colore di selezione e il raggio.                                      */
.ts-wrapper .ts-control {
  border-radius: var(--ld-radius-md);
  border-color: var(--ld-bordo-neutro);
}
.ts-dropdown .active {
  background-color: var(--ld-primario-chiaro);
  color: var(--ld-testo);
}

/* jQuery UI datepicker (campo "Data consegna" di invio_ordine.html): il
   pannello e' disegnato dalla libreria con classi .ui-*, va ricondotto
   ai token come sotto per Flatpickr. Stesso raggio dei .dropdown-menu,
   essendo un pannello flottante analogo.                               */
.ui-datepicker {
  border-radius: var(--ld-radius-md);
  border-color: var(--ld-bordo-neutro);
  box-shadow: var(--ld-ombra-2);
  padding: var(--ld-space-2);
}
.ui-datepicker .ui-widget-header {
  background: var(--ld-superficie-2);
  border-color: var(--ld-bordo-neutro);
  color: var(--ld-testo);
}
.ui-datepicker .ui-state-default {
  border-radius: var(--ld-radius-sm);
}
.ui-datepicker .ui-state-hover {
  background: var(--ld-primario-chiaro);
  border-color: var(--ld-primario-chiaro);
  color: var(--ld-testo);
}
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-active.ui-state-hover {
  background: var(--ld-primario);
  border-color: var(--ld-primario);
  color: var(--ld-su-primario);
}

/* Flatpickr: il calendario e' disegnato dalla libreria, va ricondotto ai
   token. Su touch la libreria si ritira e lascia il campo nativo.       */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--ld-primario);
  border-color: var(--ld-primario);
  color: var(--ld-su-primario);
}
.flatpickr-day.today {
  border-color: var(--ld-bordo);
}

/* Dropzone: l'area di rilascio. */
.dropzone {
  border: 2px dashed var(--ld-bordo-neutro);
  border-radius: var(--ld-radius-lg);
  background: var(--ld-superficie-2);
  min-height: 8rem;
}
.dropzone:hover,
.dropzone.dz-drag-hover {
  border-color: var(--ld-primario);
  background: var(--ld-primario-chiaro);
}

/* DataTables 2.x, tema Bootstrap 5. */
div.dt-container .dt-paging .dt-paging-button.current {
  background: var(--ld-primario);
  border-color: var(--ld-primario);
  color: var(--ld-su-primario) !important;
}
div.dt-container .dt-search input:focus,
div.dt-container .dt-length select:focus {
  border-color: var(--ld-focus);
  box-shadow: 0 0 0 0.2rem var(--ld-focus-anello);
}