/* Audit 2026-09-02 (§T-14): era @import url("./design-tokens.css") qui —
   design-tokens.css è già caricato con un <link> proprio in
   templates/header.php (con cache-busting ?v=ASSET_VERSION), PRIMA di
   questo file. L'@import lo scaricava una seconda volta, senza
   cache-busting: dopo una modifica ai token la copia importata restava in
   cache mentre l'altra si aggiornava, con l'ordine del cascade a decidere
   quale valore vinceva — e un round-trip di rete in più, serializzato,
   prima ancora che il resto di questo file iniziasse a essere applicato. */

/* Pannello admin a tutta larghezza, non centrato con margini come le pagine
   pubbliche — decisione confermata da Giacomo su TEST 2026-09-05 (screenshot
   DevTools delle regole responsive di .container). .container-fluid da solo
   NON basta: è annidato dentro il .container di <main> (header.php,
   condiviso da tutto il sito), quindi resta comunque limitato alla
   larghezza del genitore — stesso principio già visto per l'hero della
   home (.full-bleed). 4 viste su 13 usavano .container-fluid credendo
   bastasse (non funzionava neanche lì, solo un'incoerenza visiva in più).
   Sostituito ovunque da questa classe, stesso trucco width:100vw + margini
   negativi di .full-bleed, con un gutter fisso al posto di quello di
   Bootstrap (che .full-bleed da solo non ha). */
.admin-full-width {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* .fs-2 di Bootstrap è "responsive font sizing" (RFS): sotto i 1200px di
   LARGHEZZA VIEWPORT (non della colonna del titolo — l'unità vw guarda
   sempre l'intera finestra) usa calc(1.325rem + 0.9vw), più piccolo di
   2rem; solo oltre i 1200px diventa fisso a 2rem. DESIGN.md lo documenta
   come "il" titolo di pagina standard di 31 viste admin/amministratore
   (stesso identico markup <h1 class="fs-2">, verificato) — ma sotto quella
   soglia (zoom del browser, finestra non massimizzata) la stessa identica
   pagina rende un titolo più piccolo. Trovato da Giacomo confrontando due
   screenshot su TEST con titoli di taglia visibilmente diversa. Fissato
   qui a 2rem sempre: h1.fs-2 (specificità maggiore di .fs-2) vince su
   entrambe le regole di bootstrap.min.css, dentro e fuori la sua media
   query, senza toccare i 31 file. */
h1.fs-2 {
  font-size: 2rem !important;
}

  html, body {
    height: 100%;
  }
  body {
    display: flex;
    flex-direction: column;
  }
  .content {
    flex: 1 0 auto; /* si espande per riempire */
  }
  footer {
    flex-shrink: 0; /* il footer resta in fondo */
    margin-top: 30px;
  }


/* Sidebar layout */

.sidebar {
  background-color: var(--color-neutral-bg-light);
  border-right: 1px solid var(--color-neutral-divider);
  padding: 20px 10px;
  min-height: 100%;
}


.sidebar .sidebar-header {
  text-align: center;
  margin-bottom: 20px;
}

.sidebar .sidebar-header h5 {
  font-weight: bold;
  margin-bottom: 5px;
}

.sidebar .welcome {
  font-size: 1rem;
  color: var(--color-neutral-text-secondary);
  margin-bottom: 15px;
}

.sidebar .list-group-item {
  border: none;
  border-radius: 6px;
  margin-bottom: 6px;
  font-weight: 500;
}

.sidebar .list-group-item.active {
  background-color: var(--color-accent-orange); /* arancione */
  color: var(--color-neutral-white);
  font-weight: 600;
}

/* Gruppi collassabili della sidebar admin (restyling 2026-09-05, /impeccable
   — meccanismo preso dal gestionale AVIS Provinciale La Spezia, colori
   restano quelli di OpenGDPR: la sidebar qui è chiara, non navy come in
   AVIS, quindi l'etichetta di gruppo è testo navy su sfondo chiaro, non
   bianco su blu). Markup e toggle in templates/sidebar_admin_content.php
   + public/js/admin.js. */
.sidebar-nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--color-brand-navy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--font-size-xs); /* 12px, il gradino più piccolo della scala */
  font-weight: 700;
  padding: 8px 12px;
  margin-top: 4px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

.sidebar-nav-group-toggle:hover,
.sidebar-nav-group-toggle:focus-visible {
  background-color: var(--color-neutral-divider);
}

.sidebar-nav-caret {
  font-size: var(--font-size-xs); /* stesso gradino dell'etichetta accanto */
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform 0.15s ease-in-out;
}

.sidebar-nav-group-toggle.collapsed .sidebar-nav-caret {
  transform: rotate(-90deg);
}

.sidebar-nav-subgroup {
  display: flex;
  flex-direction: column;
}

/* Indentate sotto l'etichetta di gruppo, per leggersi come figlie e non
   come voci di pari livello con Dashboard/Profilo sopra. */
.sidebar-nav-subgroup .list-group-item {
  padding-left: 28px;
}

/* Header tabella (restyling 2026-09-05, /impeccable — stesso riferimento
   AVIS del gruppo sidebar sopra): sostituisce la riga grigia di default di
   Bootstrap. Navy, non arancio, per la Regola dell'Arancio Segnale
   (l'arancio comunica solo stato/azione, questa è chrome decorativo fisso).
   Applicata a ogni <table>, non solo alle viste admin: nessuna ragione per
   trattare diversamente l'unica tabella pubblica (cookie_policy.php). */
.table thead th {
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.03em;
  color: var(--color-brand-navy);
  border-bottom: 2px solid var(--color-brand-navy);
}

/* Fix 8: bottoni icon + label */
.btn i.fas,
.btn i.far,
.btn i.fab {
  margin-right: 5px;
}

.btn i.fas:last-child,
.btn i.far:last-child,
.btn i.fab:last-child {
  margin-right: 0;
}

/* Fix 9: feedback di validazione per-campo */
.form-control.is-invalid,
.form-control:invalid,
.form-select.is-invalid,
.form-select:invalid {
  border-color: var(--color-danger);
}

.form-control.is-invalid:focus,
.form-control:invalid:focus,
.form-select.is-invalid:focus,
.form-select:invalid:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .25);
}

.invalid-feedback {
  color: var(--color-danger);
  font-size: 0.875em;
  margin-top: var(--spacing-xs);
}

form.was-validated .form-control:invalid ~ .invalid-feedback,
form.was-validated .form-select:invalid ~ .invalid-feedback,
form.was-validated .is-invalid ~ .invalid-feedback {
  display: block;
}

/* Colore arancione usato nel progetto */
.bg-orange {
  background-color: var(--color-accent-orange-light) !important;
}

.text-orange {
  color: var(--color-accent-orange-light) !important;
}

.btn-orange {
  /* era --color-accent-orange-light (#ff6600): con testo bianco sopra dava
     ≈2.94:1, ben sotto AA 4.5:1 (WCAG 1.4.3) — vedi audit 2026-08-05. */
  background-color: var(--color-accent-orange);
  border-color: var(--color-accent-orange);
  color: var(--color-neutral-white);
  font-weight: 600;
}

.btn-orange:hover {
  background-color: var(--color-accent-orange-dark);
  border-color: var(--color-accent-orange-dark);
  color: var(--color-neutral-white);
}

body, html { margin:0; padding:0; height:100%; background: var(--color-neutral-bg-page) !important; overflow-x: hidden; } /* background: era --color-neutral-divider (§U-12); overflow-x: richiesto da .full-bleed (§U-03), vedi commento lì */
/* .user_card — consolidata più sotto (era ridefinita 3 volte in questo file: qui,
   nella sezione registrazione, e in "LOGIN PAGE" — quest'ultima, essendo l'ultima
   nel file, era già l'unica a determinare il rendering reale a parità di specificità;
   le prime due erano interamente shadowate, nessun cambio visivo da questa rimozione). */
.form_container { margin-top:20px; }
.login_btn { width:100%; background: var(--color-accent-orange-dark) !important; color: var(--color-neutral-white) !important; font-weight:500; }
.login_btn:hover { background: var(--color-accent-orange-dark) !important; }

/* Pulsante "Registrati" in navbar (audit 2026-09-02 §U-08) — unico elemento
   arancio della barra pubblica, per la Regola dell'Arancio Segnale di
   DESIGN.md (comunica un'azione, non decorazione). Stesso token di
   .login_btn (--color-accent-orange-dark, tarato AA per sfondo con testo
   bianco): coerente con l'unico altro pulsante arancio del sito. */
.btn-nav-cta {
  background: var(--color-accent-orange-dark);
  color: var(--color-neutral-white);
  font-weight: 600;
  border: none;
}
.btn-nav-cta:hover,
.btn-nav-cta:focus {
  background: var(--color-accent-orange);
  color: var(--color-neutral-white);
}

/* .input-group-text — restyle 2026-09-06 (segnalato da Giacomo dopo la bozza
   Comparabilitalia: il blocco pieno navy + gap di 5px prima dell'input
   leggeva come due elementi separati, "pesante/datato" ripetuto su ogni
   campo di login/recupero-password/cambio-password/ricerca/profilo
   self-service — unici punti dell'app che usano .input-group-text, il
   drawer CRUD admin usa .form-control semplice). Stessa struttura Bootstrap
   (.input-group + .input-group-text + .form-control), nessun markup
   cambiato: icona e campo condividono ora bordo/sfondo (Regola del Piatto
   di Default, DESIGN.md §4) invece di un blocco colorato + un gap. */
.input-group-text {
  background-color: var(--color-neutral-white) !important;
  color: var(--color-brand-navy) !important;
  border: 1px solid var(--color-brand-navy) !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  line-height: 42px;
  font-size: 1rem;
  padding: 0;
  margin-right: 0;
}

.input-group:focus-within .input-group-text {
  border-color: var(--color-accent-orange) !important;
}

/* .btn-primary — consolidata (era ridefinita 2 volte; #263c5c vinceva già in produzione grazie a !important) */
.btn-primary {
  background-color: var(--color-brand-navy) !important;
  border-color: var(--color-brand-navy) !important;
  border-radius: 6px;
  font-weight: 600;
  color: var(--color-neutral-white);
  transition: background-color 0.3s ease, border-color 0.3s ease; /* era "all", incoerente con .form-switch poco sotto */
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--color-brand-navy-dark) !important;
  border-color: var(--color-brand-navy-dark) !important;
}


/* =============================
   SEZIONE REGISTRAZIONE UTENTE
   ============================= */

/* Titolo principale */
.page-title {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-brand-navy);
  margin-bottom: 25px;
}

/* Toggle moderno (switch persona/società, profilo.php e registrati.php) */
.form-switch {
  position: relative;
  width: 60px;
  height: 30px;
}

.form-switch .form-check-input {
  appearance: none;
  -webkit-appearance: none;
  width: 60px;
  height: 30px;
  background-color: var(--color-accent-orange-dark);
  border-radius: 50px;
  position: relative;
  transition: background-color 0.4s ease;
  outline: none;
  cursor: pointer;
  border: 2px solid var(--color-accent-orange-dark);
}

.form-switch .form-check-input:focus-visible {
  /* outline:none sopra toglie l'indicatore nativo senza fornirne uno
     sostitutivo (WCAG 2.4.7) — alone navy coerente col resto dei campi. */
  box-shadow: 0 0 0 0.2rem rgba(38, 60, 92, 0.25);
}

.form-switch .form-check-input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-neutral-white);
  transition: transform 0.3s ease;
}

.form-switch .form-check-input:checked {
  background-color: var(--color-brand-navy);
  border-color: var(--color-brand-navy);
}

/* admin.css rispetta già prefers-reduced-motion per drawer/toast — mancava
   qui (audit /impeccable 2026-08-31). Stesso principio: il cambio di stato
   resta visibile, solo istantaneo invece che animato. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .form-switch .form-check-input,
  .form-switch .form-check-input::before,
  .sidebar-nav-caret {
    transition: none;
  }
}

.form-switch .form-check-input:checked::before {
  transform: translateX(30px);
}

/* =============================
   BOX E SEZIONI
   ============================= */
.form-box {
  background-color: var(--color-neutral-bg-lighter);
  border-radius: 12px;
  padding: 20px 25px;
  margin-bottom: 25px;
  border: 1px solid var(--color-neutral-divider);
}

/* Card delle pagine pubbliche (views/common/): bordo sottile invece di ombra,
   applicazione alla lettera della Regola del Piatto di Default (DESIGN.md §4) —
   restyle 2026-07-24 su richiesta di Giacomo, sostituisce .shadow-lg/.shadow-sm
   + .border-0 usati finora. Stesso bordo di .form-box, niente nuovo token. */
.card-flat {
  border: 1px solid var(--color-neutral-divider);
}

.section-title {
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--color-brand-navy);
}

/* Avatar placeholder profilo.php — nessuna foto reale in anagrafica (schema
   `utenti` non ha una colonna immagine): un'icona generica basta a dare un
   punto di riferimento visivo alla testata del profilo, senza inventare un
   upload-foto non richiesto. Ispirato al profilo di Comparabilitalia
   (2026-09-06), ridotto a icona+cerchio neutro per restare nella Regola del
   Piatto di Default — nessuna ombra, nessun colore nuovo. */
.profile-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-neutral-divider);
  background-color: var(--color-neutral-bg-light);
  color: var(--color-neutral-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
}

/* Ritmo "lista impostazioni" tra le sotto-sezioni di profilo.php (Dati
   personali/società, Contatti, Indirizzo, I miei dati, Visibilità pubblica):
   un divisore sottile al posto dei soli margini bootstrap (mb-3/mb-4) usati
   finora — stesso token --color-neutral-divider già usato da .form-box/
   .card-flat, nessun valore nuovo. Sostituisce la classe mb-* sull'elemento
   a cui si applica (la spaziatura viene da qui, non si sommano le due). */
.profile-section {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-neutral-divider);
}

/* =============================
   INPUT E BOTTONI
   ============================= */

.input-group .form-control,
.input-group .form-select {
  border-left: none;
  border: 1px solid var(--color-brand-navy);
  border-radius: 0 8px 8px 0;
  font-size: 1rem;
  height: 42px;          /* altezza uniforme */
  line-height: 42px;
  padding: 0 12px;
}

/* Focus: era solo l'icona a virare in arancio, il campo restava navy —
   ora l'intero .input-group segnala lo stato attivo in modo coerente
   (Regola dell'Arancio Segnale, DESIGN.md §2: l'arancio è per lo stato,
   non solo per metà del controllo). */
.input-group .form-control:focus,
.input-group .form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(195, 76, 0, 0.15);
  border-color: var(--color-accent-orange);
}

.input-group {
    width: 100%;
    box-sizing: border-box;
}

/* Campi in sola lettura dentro un .input-group (es. profilo.php: Dati
   personali/CF/P.IVA, Ruolo e stato) — stessa struttura dei campi editabili,
   ma resa visivamente distinta (sfondo neutro, icona attenuata) così non si
   confondono con i campi che l'utente può davvero modificare. Selettore
   generico su [readonly]: si applica ovunque nell'app, non solo in profilo.php. */
.input-group .form-control[readonly] {
  background-color: var(--color-neutral-bg-lighter);
  color: var(--color-neutral-text-secondary);
  border-color: var(--color-neutral-divider);
  cursor: default;
}

.input-group .form-control[readonly]:focus {
  box-shadow: 0 0 0 0.2rem rgba(85, 85, 85, 0.15);
  border-color: var(--color-neutral-divider);
}

.input-group:has(.form-control[readonly]) .input-group-text {
  background-color: var(--color-brand-navy-light) !important;
}

/* =============================
   RESPONSIVITÀ
   ============================= */
@media (max-width: 768px) {
  .user_card {
    padding: 20px;
  }

  .form-box {
    padding: 15px;
  }

  .input-group-text {
    width: 40px;
  }

  .form-switch {
    width: 50px;
    height: 26px;
  }

  .form-switch .form-check-input {
    width: 50px;
    height: 26px;
  }

  .form-switch .form-check-input::before {
    width: 20px;
    height: 20px;
  }

  .form-switch .form-check-input:checked::before {
    transform: translateX(24px);
  }
}

/* .cookie-banner — consolidata (era ridefinita 2 volte con proprietà in conflitto) */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  background-color: var(--color-brand-navy);
  color: var(--color-neutral-bg-light);
  border-top: 1px solid var(--color-neutral-divider);
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
  padding: 0.75rem 0;
  font-size: 1rem;
}

.cookie-banner-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cookie-banner-text {
  margin: 0;
}

.cookie-banner-text a {
  /* --color-accent-orange è tarato per sfondo bianco/testo bianco sopra (AA);
     su questo banner navy serve la variante chiarita, altrimenti ≈3.1:1. */
  color: var(--color-accent-orange-on-navy);
}

.cookie-banner-text a:hover {
  text-decoration: underline;
}

@media (max-width: 576px) {
  .cookie-banner-inner {
    align-items: flex-start;
  }

  #cookie-banner-close {
    margin-top: 8px;
  }

  /* Audit 2026-09-02 (§U-02): il banner arrivava a 192px su un viewport di
     812px (24% dello schermo), coprendo il campo di ricerca della home alla
     prima visita. Il testo resta invariato (nessun taglio di contenuto,
     stessa trasparenza sui cookie): solo dimensione e interlinea più
     compatte sotto i 576px, dove lo spazio verticale è più prezioso. */
  .cookie-banner {
    font-size: 0.875rem;
  }

  .cookie-banner-text {
    line-height: 1.35;
  }
}

@media (min-width: 768px) {
  .cookie-banner-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Cerchi icona "Come funziona" (index.php): era lo stesso style inline
   ripetuto 3 volte (colore corretto, ma zero riuso) — consolidato qui. */
.step-icon-circle {
  background-color: var(--color-brand-navy);
  color: var(--color-neutral-white);
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

/* Audit 2026-09-02 (§U-03): l'hero e la CTA finale della home sono
   .container-fluid ma vivono dentro <main class="content container">
   (templates/header.php) — un container-fluid dentro un container eredita
   il max-width del genitore, non è affatto a tutta larghezza. Verificato:
   a 1440px l'hero risultava 1296px, con margini grigi ben visibili ai lati
   mentre navbar e footer arrivano ai bordi. .full-bleed rompe fuori dal
   contenitore con l'idioma standard, senza toccare <main> (romperebbe ogni
   altra pagina, che il container lo vuole).

   CORREZIONE post-deploy: la prima versione metteva overflow-x:hidden solo
   su .full-bleed, ragionamento sbagliato — 100vw include la scrollbar
   verticale (più larga di document.documentElement.clientWidth quando è
   presente), quindi è il BOX STESSO dell'elemento a eccedere il viewport,
   non i suoi figli: overflow-x:hidden su un elemento clippa il contenuto
   che trabocca DA esso, non le dimensioni del suo stesso margin-box.
   Verificato dal vivo su test.opengdpr.it: scroll orizzontale reale
   comparso a 1440px. overflow-x:hidden su body è il fix standard per
   esattamente questo problema (nessun'altra regola overflow-x nel file). */
.full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Hero homepage OpenGDPR — ricomposto 2026-09-05 (/impeccable, riferimento
   comparabilitalia.it): la ricerca è la funzione reale della pagina, non un
   secondo blocco sotto una vetrina. Titolo+tagline+card di ricerca vivono
   ora nello stesso blocco navy, dimensionato dal contenuto (padding, non
   più min-height + flex-centering: con la card dentro, un'altezza fissa
   avrebbe richiesto ricalcolarla ogni volta che il contenuto cambia). */
.hero-opengdpr {
    background-color: var(--color-brand-navy);
    color: var(--color-neutral-white);
    padding: 4rem 1rem 5rem;
    /* margin-top negativo: annulla il .mt-4 (1.5rem) di <main> in
       header.php, condiviso da tutte le pagine — qui lascia intravedere lo
       sfondo chiaro della pagina tra la navbar e il blocco navy, una fascia
       chiara non voluta (feedback diretto di Giacomo, screenshot su TEST,
       2026-09-05). Corretto solo sull'hero, non su <main>. */
    margin-top: -1.5rem;
}

/* Versione ottimizzata per schermi piccoli */
@media (max-width: 576px) {
    .hero-opengdpr {
        padding: 2.5rem 1rem 3rem;
    }
}

/* Card di ricerca dentro l'hero (v. commento in includes/search_form.php):
   un pannello chiaro che risalta sul navy, non un elemento a riposo nel
   flusso — ombra vera (--shadow-md, mai usato finora) invece del bordo di
   .card-flat. */
.hero-search-card .card {
    box-shadow: var(--shadow-md);
}


/* Footer OpenGDPR */

.footer-main {
  background-color: var(--color-brand-navy);
  font-size: 1rem;
}

.footer-brand {
  /* Era arancio: su navy dava ≈3.15:1 (sotto AA 4.5:1), ed è un'etichetta
     statica, non uno stato/azione — anche la Regola dell'Arancio Segnale di
     DESIGN.md lo sconsiglia. Il maiuscolo tracciato in grassetto resta
     l'elemento distintivo, non serve il colore per differenziarla. */
  color: var(--color-neutral-white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1rem;
  font-weight: 700;
}

.footer-title {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--color-neutral-white); /* era arancio, stesso motivo di .footer-brand sopra */
  font-weight: 700;
}

.footer-link {
  color: var(--color-neutral-bg-light);
  /* Audit 2026-09-02 (§U-10): i link del footer erano alti solo quanto il
     testo (~19px), sotto il minimo WCAG 2.2 SC 2.5.8 (24px) — su mobile sono
     anche il modo principale di navigare le pagine pubbliche (§U-07). */
  display: inline-block;
  padding-block: 0.3rem;
}

.footer-link:hover {
  /* qui l'arancio è legittimo (stato hover, non decorazione statica): serve
     però la variante chiarita per restare leggibile su navy (AA). */
  color: var(--color-accent-orange-on-navy);
}

.footer-bottom {
  background-color: var(--color-brand-navy-dark); /* leggermente più scuro del top */
}


/* LOGIN PAGE */
.login-page-container {
    background: var(--color-neutral-bg-page) !important; /* era --color-neutral-divider, audit 2026-09-02 §U-12 */
    height: 100vh;
}

.user_card {
    /* Era 420px fisso: rischio di clipping se un messaggio d'errore va a più
       righe (audit tecnico 2026-08-23). Le 4 varianti sotto (.reset-card/
       .recover-card/.password-card/.register-card) erano già height: auto —
       questa è l'unica rimasta indietro, allineata alle sorelle. */
    height: auto;
    width: min(350px, 100%); /* era 350px fisso: overflow orizzontale sotto ~350-380px di viewport */
    margin-top: 80px;
    margin-bottom: 80px;
    background: var(--color-neutral-white);
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 10px;
    box-shadow: var(--shadow-login-card-1, 0 4px 8px rgba(0, 0, 0, 0.2)),
                var(--shadow-login-card-2, 0 6px 20px rgba(0, 0, 0, 0.19));
    border-radius: 8px;
}

.brand_logo_container {
    position: absolute;
    height: 120px;
    width: 120px;
    top: -60px;
    border-radius: 50%;
    background: var(--color-brand-navy);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand_icon {
    /* 60px = esattamente 50% dei 120px di .brand_logo_container (audit
       2026-08-05, vedi 0_progetto/restyling.md): non un valore arbitrario,
       ma nessun token della scala tipografica (max 28px, --font-size-2xl) è
       pensato per un'icona decorativa di queste dimensioni — forzarlo su
       quella scala rimpicciolirebbe l'icona in modo vistoso. Se si introduce
       una scala dedicata a icone/display in futuro, va consolidato lì.
       Va aggiornato insieme a height/width di .brand_logo_container se quel
       cerchio cambia dimensione. */
    font-size: 60px;
    /* icona su cerchio navy (.brand_logo_container): serve la variante
       chiarita, non quella scurita per bottoni (che qui sarebbe quasi
       invisibile sul navy). */
    color: var(--color-accent-orange-on-navy);
}

.form_container {
    margin-top: 80px;
}

.links {
    color: var(--color-brand-navy);
}

/* Gli <a> non ereditano il color del contenitore (Bootstrap imposta il proprio
   colore link di default su ogni <a>): senza questa riga "Registrati"/
   "Password dimenticata?" rendevano nel blu di default di Bootstrap invece
   che nel navy dichiarato sopra (audit /impeccable 2026-08-31, verificato
   dal vivo con getComputedStyle). */
.links a {
    margin-left: 5px;
    color: inherit;
}

/* Reset password card */
.user_card.reset-card {
    width: min(380px, 100%);
    padding: 20px;
    height: auto;
}

/* Modifica specifica per la card del recupero password */
.user_card.recover-card {
    height: auto;
    width: min(380px, 100%);
    padding: 20px;
}

/* Card di cambio password (cambia_password.php, 2026-08-05): stessa forma di
   .reset-card/.recover-card, per restare nello stesso linguaggio visivo del
   percorso password invece di un quarto contenitore diverso. */
.user_card.password-card {
    height: auto;
    width: min(420px, 100%);
    padding: 20px;
}

/* Card di attivazione/registrazione (registrati.php, P3-15): stesso pattern di
   .reset-card/.recover-card, ma più larga per il form anagrafico esteso (P3-16) */
.user_card.register-card {
    height: auto;
    width: 100%;
    max-width: 900px;
    padding: 20px;
}

.user_card .alert {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    padding: 12px 15px;
    font-size: 1rem;
}

/* Era ".input_user, .input_pass:focus" (probabile refuso: mancava ":focus" su
   .input_user) con "box-shadow: none !important; outline: 0 !important;" —
   cancellava sempre l'indicatore di focus su .input_user e al focus su
   .input_pass, proprio sul form più critico dell'app (WCAG 2.4.7). Ripristina
   lo stesso alone navy già usato in ".input-group .form-control:focus". */
.input_user:focus,
.input_pass:focus {
    box-shadow: 0 0 0 0.2rem rgba(38, 60, 92, 0.25);
    outline: 0;
    border-color: var(--color-brand-navy);
}

/**
 * ===== CONSOLIDAMENTO V1 → V2 =====
 *
 * Palette colori consolidata (design-tokens.css):
 * - Navy: var(--color-brand-navy) + shade dark/light — unifica il vecchio #263c5c (navbar/footer/hero)
 *   con #004080 (form/login), che era un secondo "primary" non dichiarato. Il colore visibile non
 *   cambia per navbar/footer/hero (già #263c5c per via di regole !important); cambia intenzionalmente
 *   per i form di login/registrazione, che passano da #004080 a #263c5c.
 * - Accent: var(--color-accent-orange) (#ea5821) + shade dark/light — unifica 5 arancioni storici
 *   (#ea5821, #f26101, #ff6600, #ff5722, #e65c00) in 3 variabili. Cambio visivo intenzionale su
 *   pulsanti login/toggle registrazione (da #f26101 a #d95400) e voce attiva sidebar (da #ff5722 a #ea5821).
 * - Neutral: 5 grigi quasi identici (#ddd, #dee2e6, #e9ecef, #e0e0e0) unificati in
 *   var(--color-neutral-divider) (#e9ecef) — differenza percettibile nulla.
 *
 * Componenti consolidati (eliminate le ridefinizioni multiple nello stesso file):
 * - .btn-primary: era definito 2 volte con colori diversi; in produzione vinceva già #263c5c
 *   per via di !important. Ora è un'unica definizione (navy + dark hover), stessa resa visiva.
 * - .input-group-text: era definito 3 volte con proprietà sovrapposte (background/color concordi,
 *   border/dimensioni in conflitto). Consolidato in un'unica definizione che riproduce lo stile
 *   effettivamente risultante dal cascade precedente, con focus-within accent arancione aggiunto.
 * - .cookie-banner: erano 2 implementazioni con background/padding/font-size in conflitto.
 *   Consolidata in un'unica definizione che riproduce il risultato effettivo del cascade precedente
 *   (navy, come vinceva già la seconda regola). Rimossa la classe morta .cookie-banner-link
 *   (non referenziata in templates/footer.php).
 *
 * Font Awesome: versione 6.5.1 unica (import in templates/header.php, rimosso il doppio
 * caricamento da templates/navigation.php).
 *
 * Ready for v2 UI module (design-system.css estenderà questi token).
 */

/* Utility navy scoped (non rimappa .text-primary/.bg-primary globali per non
   toccare le pagine pubbliche in views/common/ che li usano già: applicata solo
   dove il pannello admin usava il blu Bootstrap di default al posto del navy). */
.text-navy {
  color: var(--color-brand-navy) !important;
}

.bg-navy {
  background-color: var(--color-brand-navy) !important;
}

/* Touch target minimo 44px (WCAG 2.5.5) per i bottoni icona nelle colonne
   Azioni delle tabelle admin, solo su mobile: la densità desktop non cambia. */
@media (max-width: 768px) {
  .btn-icon-sm {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Riepilogo statistiche dashboard admin: striscia unica con divisori invece di
   card ripetute identiche (audit /impeccable, pattern "hero-metric" evitato). */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
}

.stat-strip .stat-item {
  flex: 1 1 160px;
  padding: 0 var(--spacing-lg);
  text-align: center;
  border-right: 1px solid var(--color-neutral-divider);
}

.stat-strip .stat-item:last-child {
  border-right: none;
}

@media (max-width: 576px) {
  .stat-strip .stat-item {
    flex: 1 1 45%;
    border-right: none;
    border-bottom: 1px solid var(--color-neutral-divider);
    padding-bottom: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .stat-strip .stat-item:nth-last-child(-n+2) {
    border-bottom: none;
    margin-bottom: 0;
  }
}