/* ================================================================
   Registro Chiavi — custom.css
   Solo stili NON coperti da Bootstrap (css/bootstrap.css).
   Primario #019ee1  |  Secondario #DBDBDB  |  Accento #CEB992
   ================================================================ */

/* ----------------------------------------------------------------
   1. Font — Inter (variable, copre l'intera gamma di pesi 100-900 e il
   corsivo in un solo file ciascuno, invece delle decine di file statici
   dell'archivio originale in font/)
   ---------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('/font/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/font/Inter-Italic-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ----------------------------------------------------------------
   2. Override variabili Bootstrap
   ---------------------------------------------------------------- */
:root {
  --bs-body-font-family: 'Inter', var(--bs-font-sans-serif);

  --bs-primary:          #019ee1;
  --bs-primary-rgb:      1, 158, 225;
  --bs-secondary:        #DBDBDB;
  --bs-secondary-rgb:    219, 219, 219;
  --bs-link-color:       #019ee1;
  --bs-link-hover-color: #004777;
  --bs-focus-ring-color: rgba(1, 158, 225, .25);

  /* Accento (era oro #CEB992, sostituito su richiesta esplicita): grigio
     scurissimo caldo, usato per il bordo dei link attivi nel menu, il box
     localita' della dashboard e il bordo della card sede in Rubrica —
     stessi punti di prima, cambia solo il colore dietro la variabile. */
  --bs-accent:     #34312d;
  --bs-accent-rgb: 52, 49, 45;

  /* Barra di brand: SEMPRE questo valore, a prescindere dal tema
     chiaro/scuro della pagina — usata per topbar/footer, che restano una
     "barra di brand" riconoscibile in entrambi i temi. Era un navy fisso
     (#004777) separato dal primario; unificata al blu di brand su
     richiesta esplicita ("ragioniamo con la nav 019ee1"), un solo colore
     vivo invece di due. Nome variabile invariato per non toccare tutti i
     punti che la referenziano (topbar, footer, badge conteggio contatti
     Rubrica). */
  --brand-navy: #019ee1;

  /* Blu primario scurito, per testo su sfondo chiaro (es. label del login):
     più tenue del blu pieno usato per bottoni/link. */
  --hover-contrast:     #004777;
  --hover-contrast-rgb: 0, 71, 119;

  /* Altezza della topbar amministrativa: unica fonte di verità, usata
     anche per l'altezza minima del main e la posizione del toast flash
     (prima duplicata come "56px" in tre punti diversi). */
  --topbar-height: 56px;

  /* Canvas pagina chiaro: off-white (F3F3F4) invece di bianco puro. Le
     card restano bianche (--bs-body-bg di default, non toccato): stessa
     "carta sollevata sul tavolo" di prima, solo il tavolo cambia tono. */
  --bs-tertiary-bg: #F3F3F4;
}

/* --bs-body-color va scritto SOLO per il tema chiaro: essendo su :root
   con la stessa specificita' di [data-bs-theme=dark] (entrambe le regole
   si applicano a <html>), l'ultima dichiarata in ordine di sorgente vince
   a prescindere dal tema — senza :not() questa regola sovrascriverebbe
   anche il valore chiaro-su-scuro di Bootstrap per il tema scuro,
   rendendo illeggibile qualunque testo senza colore esplicito (bug reale,
   trovato durante la verifica visiva della pagina di prova). */
:root:not([data-bs-theme=dark]) {
  /* Testo body: grigio scurissimo (coerente col nuovo accento) invece del
     nero quasi puro di default Bootstrap — leggermente piu' morbido da
     leggere. */
  --bs-body-color: #34312d;
}

[data-bs-theme=dark] {
  /* Sullo sfondo scuro del tema #004777 perderebbe contrasto: variante
     più chiara della stessa tinta. */
  --hover-contrast:     #4fc3f7;
  --hover-contrast-rgb: 79, 195, 247;

  /* Stessa logica di elevazione del chiaro, invertita: canvas piu' scuro
     (14110f), superfici/card leggermente piu' chiare (34312d) sopra di
     esso — cosi' le card restano distinguibili dallo sfondo anche in
     tema scuro. */
  --bs-tertiary-bg:  #14110f;
  --bs-body-bg:      #34312d;
  --bs-secondary-bg: #34312d;
}

/* .link-secondary di Bootstrap usa --bs-secondary-rgb (#DBDBDB), un grigio
   chiaro pensato per sfondi/bordi (vedi nota su .link-forgot più sotto):
   come colore di testo risulta quasi invisibile (es. "Ruoli e modalità di
   login" in index.php, "Cambia" in login.php). Sovrascritto con il blu
   primario. */
.link-secondary {
  color: var(--bs-primary) !important;
}
.link-secondary:hover,
.link-secondary:focus {
  color: var(--hover-contrast) !important;
}

/* ----------------------------------------------------------------
   3. Layout — topbar + footer fissi (niente più sidebar che sposta
   il contenuto: il main è sempre a piena larghezza)
   ---------------------------------------------------------------- */
.app-header {
  position: sticky;
  top:      0;
  z-index:  1030;
}

.app-main {
  min-height: calc(100vh - var(--topbar-height) - 45px);
}

/* Footer navy come la topbar (stile "footer-bottom" di arsrubiana): stessa
   barra di brand, fissa a prescindere dal tema chiaro/scuro della pagina. */
.app-footer {
  padding:       .75rem 1rem;
  font-size:     .82rem;
  color:         rgba(255, 255, 255, .8); /* era .65, stesso motivo del nav-link sopra */
  background:    var(--brand-navy);
  border-top:    1px solid rgba(255, 255, 255, .1);
}
.app-footer a               { color: rgba(255, 255, 255, .85); }
.app-footer a:hover         { color: #fff; }

.app-footer .sidebar-toggle-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  vertical-align:   middle;
  font-size:        1rem;
  padding:          .2rem .35rem;
  color:            rgba(255, 255, 255, .75);
  background:       none;
  border:           0;
  border-radius:    var(--bs-border-radius);
  cursor:           pointer;
  transition:       color .15s, background-color .15s;
}
.app-footer .sidebar-toggle-btn:hover {
  color:            #fff;
  background-color: rgba(255, 255, 255, .1);
}

.app-footer .dropdown-menu {
  z-index:                        1036;
  --bs-dropdown-bg:               var(--brand-navy);
  --bs-dropdown-color:            #fff;
  --bs-dropdown-link-color:       rgba(255, 255, 255, .85);
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-hover-bg:    rgba(255, 255, 255, .1);
  --bs-dropdown-link-active-bg:   rgba(255, 255, 255, .15);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-divider-bg:       rgba(255, 255, 255, .15);
  --bs-dropdown-border-color:     rgba(255, 255, 255, .15);
}

/* ----------------------------------------------------------------
   4. Input group — allinea bordo bottone al bordo del campo
   ---------------------------------------------------------------- */
.input-group .btn {
  --bs-btn-border-color:        var(--bs-border-color);
  --bs-btn-hover-border-color:  var(--bs-border-color);
  --bs-btn-focus-border-color:  var(--bs-border-color);
  --bs-btn-active-border-color: var(--bs-border-color);
}

/* ----------------------------------------------------------------
   4bis. Bottone primario — allineato a --bs-primary
   .btn-primary in bootstrap.css NON era mai stato agganciato alla nostra
   variabile: bg/hover/active/focus/disabled erano tutti fissi sul blu di
   STOCK di Bootstrap (#0d6efd, #0b5ed7, #0a58ca...), leggermente diverso
   dal blu di brand (--bs-primary, #019ee1) gia' usato da topbar/link/
   focus-ring — bug pre-esistente, mai notato finche' non si e' provato a
   personalizzare i bottoni. Le tonalita' hover/active sono calcolate con
   color-mix() (gia' usato altrove in questo file, vedi .link-forgot) per
   restare corrette anche se --bs-primary cambiasse di nuovo in futuro,
   invece di fissare a mano dei valori esadecimali che andrebbero
   ricalcolati ogni volta.
   ---------------------------------------------------------------- */
.btn-primary {
  --bs-btn-color:               #fff;
  --bs-btn-bg:                  var(--bs-primary);
  --bs-btn-border-color:        var(--bs-primary);
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            color-mix(in srgb, var(--bs-primary), black 12%);
  --bs-btn-hover-border-color:  color-mix(in srgb, var(--bs-primary), black 18%);
  --bs-btn-focus-shadow-rgb:    var(--bs-primary-rgb);
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           color-mix(in srgb, var(--bs-primary), black 18%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary), black 22%);
  --bs-btn-disabled-color:      #fff;
  --bs-btn-disabled-bg:         var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

/* ----------------------------------------------------------------
   4ter. Bottone outline primario — stesso bug di 4bis, mai notato prima
   perche' segnalato solo dopo il fix di .btn-primary. Usato da "Cerca"/
   "Elenco Completo" (chiavi/index.php, cerca.php) e "Sposta"
   (chiavi/_tabella.php, modifica.php) — non da "In Consegna"/"Storico"/
   "Box", che sono outline-danger/info/secondary e restano sui colori
   semantici di Bootstrap, mai legati al primario.
   ---------------------------------------------------------------- */
.btn-outline-primary {
  --bs-btn-color:               var(--bs-primary);
  --bs-btn-border-color:        var(--bs-primary);
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            var(--bs-primary);
  --bs-btn-hover-border-color:  var(--bs-primary);
  --bs-btn-focus-shadow-rgb:    var(--bs-primary-rgb);
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color:      var(--bs-primary);
  --bs-btn-disabled-bg:         transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
}

/* ----------------------------------------------------------------
   5. Topbar amministrativa (stile arsrubiana)
   Barra scura fissa in alto: colore di brand fisso (navy), NON legato al
   tema chiaro/scuro della pagina — stessa logica dell'admin-topbar di
   arsrubiana, dove la barra resta sempre riconoscibile.
   ---------------------------------------------------------------- */
.admin-topbar {
  min-height:       var(--topbar-height);
  background-color: var(--brand-navy);
  border-bottom:    1px solid rgba(255, 255, 255, .08);
}

.admin-toggler {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            38px;
  height:           38px;
  flex-shrink:      0;
  padding:          0;
  font-size:        1.4rem;
  color:            rgba(255, 255, 255, .8);
  background:       none;
  border:           0;
  border-radius:    .375rem;
  cursor:           pointer;
  transition:       background-color .15s ease, color .15s ease;
}
.admin-toggler:hover {
  color:            #fff;
  background-color: rgba(255, 255, 255, .1);
}

.admin-brand         { color: #fff; }
.admin-brand:hover   { color: rgba(255, 255, 255, .85); }
.admin-brand-text    { font-size: .95rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }

.admin-username {
  font-size:   .875rem;
  color:       rgba(255, 255, 255, .9);
  font-weight: 500;
}

.admin-logout {
  border:      1px solid rgba(255, 255, 255, .3);
  color:       rgba(255, 255, 255, .9);
  font-size:   .85rem;
  background:  transparent;
}
.admin-logout:hover {
  color:            #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color:     rgba(255, 255, 255, .5);
}

/* Dropdown utente nella topbar: sfondo scuro coerente con la barra,
   invece del bianco di default (che stonerebbe attaccato a una barra
   navy) — stessa idea applicata al footer più sotto. */
.admin-topbar .dropdown-menu {
  --bs-dropdown-bg:               var(--brand-navy);
  --bs-dropdown-color:            #fff;
  --bs-dropdown-link-color:       rgba(255, 255, 255, .9);
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-hover-bg:    rgba(255, 255, 255, .1);
  --bs-dropdown-divider-bg:       rgba(255, 255, 255, .15);
  --bs-dropdown-border-color:     rgba(255, 255, 255, .15);
}

/* ----------------------------------------------------------------
   6. Voci di navigazione — in linea nella topbar (niente più
   sidebar/offcanvas nascosti: il menu resta sempre a vista su desktop,
   dietro l'hamburger solo sotto il breakpoint lg — vedi layout/sidebar.php)
   ---------------------------------------------------------------- */
.sidebar-menu .nav-item { position: relative; }

.sidebar-menu .nav-link {
  display:         flex;
  align-items:     center;
  gap:             .4rem;
  padding:         .5rem .75rem;
  /* Era .75 di opacita': sufficiente sul navy scuro di prima, ma sbiadito
     sul blu di brand piu' chiaro ora usato per la topbar (verificato via
     screenshot). */
  color:           rgba(255, 255, 255, .92);
  font-size:       .9rem;
  font-weight:     500;
  text-decoration: none;
  white-space:     nowrap;
  border-radius:   .375rem;
  border-bottom:   2px solid transparent;
  transition:      background-color .15s, color .15s, border-color .15s;
}
.sidebar-menu .nav-link:hover {
  color:            #fff;
  background-color: rgba(255, 255, 255, .08);
}
.sidebar-menu .nav-link:hover .nav-icon { color: #fff; }

/* Link attivo: bordo inferiore oro d'accento */
.sidebar-menu .nav-link.active {
  color:              #fff;
  font-weight:        600;
  border-bottom-color: var(--bs-accent);
}
.sidebar-menu .nav-link.active .nav-icon { color: #fff; }

/* Il <p> dentro nav-link contiene testo (+ eventuale freccia): niente margini */
.sidebar-menu .nav-link p {
  margin: 0;
  line-height: 1.2;
}

.nav-icon {
  font-size:   1rem;
  flex-shrink: 0;
  color:       rgba(255, 255, 255, .85); /* era .6, stesso motivo del nav-link sopra */
  transition:  color .15s;
}

/* Sotto il breakpoint lg il pannello collassa: la lista torna verticale,
   stessa barra navy della topbar (nessuno sfondo aggiuntivo necessario). */
@media (max-width: 991.98px) {
  .sidebar-menu { padding: .5rem 0; }
  .sidebar-menu .nav-link { border-bottom: none; border-left: 3px solid transparent; }
  .sidebar-menu .nav-link.active { border-left-color: var(--bs-accent); }
}

/* ----------------------------------------------------------------
   7. Content header
   ---------------------------------------------------------------- */
.app-content-header {
  padding:       1rem 1.5rem;
  border-bottom: 1px solid var(--bs-border-color);
}

/* ----------------------------------------------------------------
   8. Toast flash — alzato sotto la topbar invece che in basso a destra
   (richiesta esplicita: più visibile appena l'azione ha effetto, prima
   rischiava di passare inosservato in fondo allo schermo)
   ---------------------------------------------------------------- */
.flash-toast-container {
  top: calc(var(--topbar-height) + 1rem) !important;
}

/* ----------------------------------------------------------------
   9. Hero — banner in cima alla dashboard (stile arsrubiana: immagine
   a tutta larghezza + overlay scuro + scritta centrata)
   ---------------------------------------------------------------- */
.dashboard-hero {
  position:         relative;
  height:           220px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  overflow:         hidden;
  background-size:  cover;
  background-position: center;
}

.dashboard-hero-overlay {
  position:   absolute;
  inset:      0;
  /* Alleggerito su richiesta esplicita (era .55/.8): la foto sotto si
     vedeva troppo poco. Tinta invariata (navy): e' solo un velo per la
     leggibilita' del testo bianco sopra l'immagine, non un elemento di
     brand legato a --brand-navy. */
  background: linear-gradient(180deg, rgba(0, 71, 119, .28), rgba(0, 71, 119, .45));
}

.dashboard-hero-text {
  position:  relative;
  z-index:   1;
  color:     #fff;
  text-align: center;
  padding:   1rem;
}
.dashboard-hero-text h1 {
  margin:      0;
  font-size:   1.5rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

/* .ml3 (animazione lettera-per-lettera) alla stessa dimensione dell'h1
   sopra di lei nella hero, invece del suo font-size generico (3.5em). */
.dashboard-hero-text .ml3 {
  font-size: 1.5rem;
}

/* Localita' sotto la hero: box quadrato oro d'accento, testo bianco.
   aspect-ratio (non altezza fissa) mantiene il quadrato a qualunque
   larghezza, compresi i due box affiancati su mobile — stesso principio
   delle service-item card del template Company (ombra leggera che si
   accentua in hover, angoli arrotondati). Ora e' anche un link (<a>) verso
   la pagina della sede (almese.php/avigliana.php): text-decoration-none
   gia' in classe nell'HTML, qui basta ereditare color:#fff invece del blu
   di default dei link. */
.dashboard-location-box {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             .5rem;
  aspect-ratio:    1 / 1;
  max-width:       300px;
  margin-inline:   auto;
  background:      var(--bs-accent);
  color:           #fff;
  text-align:      center;
  padding:         1.25rem;
  border-radius:   .5rem;
  box-shadow:      0 4px 14px rgba(0, 0, 0, .1);
  transition:      box-shadow .3s ease;
}
.dashboard-location-box:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  color:      #fff;
}

/* Icona sopra il titolo: bianca a riposo, blu di brand in hover (hover sul
   box intero, non sulla sola icona — coerente con tutto il box che e' un
   link). */
.dashboard-location-icon {
  font-size:  1.75rem;
  color:      #fff;
  transition: color .2s ease;
}
.dashboard-location-box:hover .dashboard-location-icon {
  color: var(--bs-primary);
}

.dashboard-location-title {
  font-size:      clamp(1.15rem, 5vw, 1.75rem);
  font-weight:    700;
  letter-spacing: .03em;
}

.dashboard-location-text {
  margin:      0;
  font-size:   .75rem;
  font-weight: 400;
  line-height: 1.4;
  color:       rgba(255, 255, 255, .85);
}

@media (min-width: 768px) {
  .dashboard-hero        { height: 280px; }
  .dashboard-hero-text h1 { font-size: 2.25rem; }
  .dashboard-hero-text .ml3 { font-size: 2.25rem; }
}

/* ----------------------------------------------------------------
   10. Icone tema (mostra quella corretta in base a data-bs-theme)
   ---------------------------------------------------------------- */
[data-lte-theme-icon]                              { display: none !important; }
[data-bs-theme=light] [data-lte-theme-icon=light] { display: inline !important; }
[data-bs-theme=dark]  [data-lte-theme-icon=dark]  { display: inline !important; }

/* ----------------------------------------------------------------
   11. Login — form (campi a pillola con icona incorporata, label colorate)
   ---------------------------------------------------------------- */
/* Scoperto solo dentro .login-form: e' uno stile scelto per questa pagina,
   non (ancora) una decisione per i form degli altri moduli. */
.login-form .form-label {
  /* Blu primario ma nella variante gia' usata per gli stati hover (piu'
     scuro in tema chiaro, piu' chiaro in tema scuro): colorato ma meno
     vivido del blu pieno usato per bottoni/link, gia' verificato per
     contrasto (vedi commento su --hover-contrast piu' sopra). */
  color: var(--hover-contrast);
}

.login-form .form-icon-group {
  position: relative;
}
.login-form .form-icon-group .form-icon {
  position:       absolute;
  left:           16px;
  /* Offset fisso (meta' dei 44px dell'input, non "top:50%" del
     contenitore): .invalid-feedback vive DENTRO .form-icon-group (deve
     essere fratello diretto dell'input perche' il selettore Bootstrap
     :invalid ~ .invalid-feedback funzioni), quindi quando compare fa
     crescere il contenitore. Con top:50% l'icona seguiva quella crescita
     e scivolava verso il centro di TUTTO il blocco (input + messaggio)
     invece di restare sul centro del solo input. Un valore fisso ignora
     l'altezza del contenitore e resta sempre sul centro dei 44px in alto. */
  top:            22px;
  transform:      translateY(-50%);
  color:          var(--bs-secondary-color);
  pointer-events: none;
}
.login-form .form-icon-group .form-control {
  height:            44px;
  padding-left:      44px;
  background-color:  var(--bs-tertiary-bg);
  border:            1px solid var(--bs-border-color);
  border-radius:     50rem;
  font-size:         .875rem;
  transition:        border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.login-form .form-icon-group .form-control:focus {
  background-color: var(--bs-body-bg);
}
/* Il border-color fisso qui sopra (--bs-border-color) ha la stessa
   specificita' delle regole di validazione di Bootstrap
   (.was-validated .form-control:invalid/:valid, .is-invalid/.is-valid) e
   viene caricato DOPO bootstrap.css: senza queste due regole vincerebbe
   sempre il nostro grigio, nascondendo il rosso/verde di validazione. */
.login-form.was-validated .form-icon-group .form-control:invalid,
.login-form .form-icon-group .form-control.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}
.login-form.was-validated .form-icon-group .form-control:valid,
.login-form .form-icon-group .form-control.is-valid {
  border-color: var(--bs-form-valid-border-color);
}
.login-form .form-icon-group.has-toggle .form-control {
  padding-right: 44px;
}
.login-form .icon-toggle-btn {
  position:        absolute;
  right:           6px;
  top:             22px; /* stesso motivo di .form-icon: offset fisso, non dipendente dall'altezza del contenitore */
  transform:       translateY(-50%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  padding:         0;
  background:      none;
  border:          0;
  border-radius:   50%;
  color:           var(--bs-secondary-color);
  cursor:          pointer;
  transition:      background-color .15s ease, color .15s ease;
}
.login-form .icon-toggle-btn:hover {
  background-color: var(--bs-secondary-bg);
  color:            var(--bs-body-color);
}

/* Link "secondari" del login (Password dimenticata?, Torna al login...):
   prima usavano link-secondary, che con --bs-secondary di questo progetto
   (#DBDBDB, un grigio molto chiaro pensato per sfondi/bordi) risultava
   quasi invisibile come colore di testo su una card chiara. Colore
   dedicato invece del blu primario (gia' molto presente in pagina),
   pensato come "antagonista": scurito, si schiarisce all'hover.
   Classe globale (non piu' scoped sotto .login-form): usata sia nello
   step password sia nello step OTP di login.php, form diversi sulla
   stessa pagina. */
.link-forgot {
  color:      #481d24;
  transition: color .15s ease;
}
.link-forgot:hover {
  color: color-mix(in srgb, #481d24, white 30%);
}

/* ----------------------------------------------------------------
   12. Print
   ---------------------------------------------------------------- */
@media print {
  .app-header, .offcanvas { display: none !important; }
}
.ml3 {
  font-weight: 900;
  font-size: 3.5em;
}

/* ----------------------------------------------------------------
   13. Rubrica — badge reparto e intestazione "card" sede (risultati.php,
   stampa.php): entrambi usano solo utility Bootstrap 5.3 (subtle colors,
   rounded-pill), qui solo le rifiniture non esprimibili con le utility.
   ---------------------------------------------------------------- */
.rubrica-badge-reparto {
  font-weight: 600;
}

/* Intestazione sede in stampa.php: bordo inferiore colore d'accento, stesso
   linguaggio visivo del link attivo in sidebar (vedi sezione 6) — dà alla
   sede il peso di un titolo di sezione invece di un semplice <h4>. */
.rubrica-sede-card {
  border-bottom: 2px solid var(--bs-accent);
}

/* Badge conteggio contatti: sfondo pieno (via --brand-navy, oggi lo stesso
   blu del primario) contro i badge reparto accanto in stile "subtle" —
   il contrasto pieno/subtle li distingue a colpo d'occhio come
   "meta-informazione" sulla sede, non serve piu' una tinta diversa ora
   che brand-navy e primary coincidono. */
.rubrica-badge-contatti {
  background-color: var(--brand-navy);
}

/* ----------------------------------------------------------------
   14. Badge ruolo (Utenti) e badge stato (Registro Chiavi) — pillole
   "subtle" invece dei badge Bootstrap pieni usati finora. Nati da un bug
   di contrasto trovato durante la verifica della nuova palette: "User"
   (text-bg-secondary) quasi illeggibile perche' --bs-secondary di
   progetto e' un grigio chiarissimo (#DBDBDB) con testo bianco fisso di
   Bootstrap; "Mod. Chiavi"/"Mod. Rubrica" (entrambi text-bg-info)
   identici, indistinguibili fra loro.
   ---------------------------------------------------------------- */
.badge-pill {
  font-weight:   600;
  border-radius: 50rem;
  padding:       .35em .7em;
}

/* Pillola neutra generica: badge ruolo "User", stato "Disabilitato"
   (Utenti), badge "Tu" (storico movimenti) — stesso identico bisogno
   (un'etichetta neutra, non uno stato semantico) in punti diversi
   dell'app, tutti con lo stesso identico bug di contrasto prima di
   questo fix (text-bg-secondary = testo bianco fisso su --bs-secondary
   di progetto, un grigio chiarissimo). */
.badge-ruolo-user,
.badge-neutro {
  background-color: var(--bs-tertiary-bg);
  color:             var(--bs-body-color);
  border:            1px solid var(--bs-border-color);
}
.badge-ruolo-moderatore-chiavi {
  background-color: rgba(var(--bs-primary-rgb), .15);
  color:             var(--bs-primary);
}
.badge-ruolo-moderatore-rubrica {
  background-color: rgba(var(--bs-accent-rgb), .18);
  color:             var(--bs-accent);
}
.badge-ruolo-moderatore-visite {
  background-color: rgba(var(--bs-info-rgb), .18);
  color:             var(--bs-info-text-emphasis);
}
.badge-ruolo-admin {
  background-color: rgba(var(--bs-warning-rgb), .2);
  color:             #92660a;
}
.badge-ruolo-superadmin {
  background-color: var(--bs-danger);
  color:             #fff;
}
[data-bs-theme=dark] .badge-ruolo-moderatore-rubrica { color: #cfc9c2; }
[data-bs-theme=dark] .badge-ruolo-admin               { color: #ffce6d; }

.badge-stato-disponibile {
  background-color: rgba(var(--bs-success-rgb), .15);
  color:             var(--bs-success-text-emphasis);
}
.badge-stato-consegnata {
  background-color: rgba(var(--bs-warning-rgb), .2);
  color:             #92660a;
}
[data-bs-theme=dark] .badge-stato-consegnata { color: #ffce6d; }

/* ----------------------------------------------------------------
   15. Pagina 404
   ---------------------------------------------------------------- */
.error-404 {
  min-height:     calc(100vh - var(--topbar-height) - 4rem);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  text-align:     center;
  padding:        3rem 1.5rem;
}
.error-404-img {
  max-width: 320px;
  width:     100%;
  height:    auto;
  margin-bottom: 1.5rem;
  /* Dondolio leggero, come se la spina fosse ancora a mezz'aria appena
     staccata — transform-origin in alto: oscilla "appesa" invece di
     ruotare sul proprio centro. */
  transform-origin: top center;
  animation: error-404-swing 3.5s ease-in-out infinite;
}
@keyframes error-404-swing {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .error-404-img { animation: none; }
}
.error-404-title {
  font-size:   3rem;
  font-weight: 700;
  color:       var(--bs-body-color);
  margin:      0;
}
.error-404-text {
  color:      var(--bs-secondary-color);
  max-width:  32rem;
  margin:     .5rem 0 1.5rem;
}

/* ----------------------------------------------------------------
   16. Pulsanti outline della barra principale — sweep hover
   Decisa con l'utente attraverso una pagina di prova dedicata
   (/demo-pulsanti.php, poi cancellata): i pulsanti della barra
   principale (Elenco Completo/In Consegna/Storico/Box in Chiavi, Elenco
   per Reparto/Gestisci in Rubrica) restano grigi a riposo — nessun colore
   semantico finche' non ci si passa sopra — e il colore (blu/rosso/
   ciano/grigio scuro, lo stesso gia' associato a ciascun bottone tramite
   btn-outline-primary/danger/info/secondary) si rivela con un
   riempimento che scorre da sinistra a destra sull'hover, invece del
   fill istantaneo di serie di Bootstrap.

   SOLO sulla barra principale, su richiesta esplicita: i pulsanti piccoli
   nelle tabelle (Modifica/Sposta/Elimina) e i "Torna a..." restano
   invariati (vedi leggimi.txt, punto 3 "DA FARE").

   Il riempimento usa background/transform su uno pseudo-elemento invece
   che il background-color istantaneo delle custom property --bs-btn-*
   (che restano usate solo per bordo/testo): e' l'unico modo per ottenere
   una transizione DIREZIONALE (sinistra->destra) invece di un fade.
   position:relative + isolation:isolate creano un nuovo stacking context
   cosi' lo pseudo-elemento con z-index:-1 resta sempre dietro al testo
   reale del bottone, mai davanti; overflow:hidden lo ritaglia sui bordi
   arrotondati del bottone.
   ---------------------------------------------------------------- */
.btn-sweep {
  --bs-btn-color: var(--bs-secondary-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-bg: transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.btn-sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sweep-color, var(--bs-secondary-color));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
  z-index: -1;
}
.btn-sweep:hover,
.btn-sweep:focus-visible {
  --bs-btn-color: var(--sweep-text, #fff);
  --bs-btn-border-color: var(--sweep-color, var(--bs-secondary-color));
}
.btn-sweep:hover::before,
.btn-sweep:focus-visible::before {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .btn-sweep::before { transition: none; }
}

/* Colore di riempimento per variante: uguale al colore gia' usato a
   riposo da ciascun btn-outline-* prima di questa modifica. Info usa
   testo scuro in hover (--sweep-text) per lo stesso motivo per cui
   Bootstrap di serie usa gia' testo nero su .btn-outline-info: il suo
   colore (#0dcaf0) e' troppo chiaro per il bianco. */
.btn-outline-primary.btn-sweep   { --sweep-color: var(--bs-primary); }
.btn-outline-danger.btn-sweep    { --sweep-color: var(--bs-danger); }
.btn-outline-info.btn-sweep      { --sweep-color: var(--bs-info); --sweep-text: #000; }
.btn-outline-secondary.btn-sweep { --sweep-color: var(--bs-secondary-color); }

/* Badge dentro un bottone in sweep (es. conteggio "In Consegna"): senza
   un bordo si confonde nel riempimento rosso a tinta quasi identica. */
.btn-sweep:hover .badge {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
}