@import url("standardColorPortale.css");

/* ============================================================
   PERSONALIZZAZIONE COLORI — PORTALE LIGHT
   ============================================================
   File per cliente: uno per ciascun client (es. UA, XYZ, ...).

   STRUTTURA:
     SEZIONE A — Colori brand         → modificare per ogni cliente
     SEZIONE B — Regole componenti    → non toccare, si auto-adatta
     SEZIONE C — Override cliente UA  → personalizzazioni specifiche UA

   COME PERSONALIZZARE UN NUOVO CLIENTE:
   1. Modificare i valori nel LIVELLO 1 della Sezione A (obbligatorio).
   2. Se un elemento specifico deve avere un colore diverso
      dagli altri, decommentare la riga nel LIVELLO 2 della Sezione A.
   3. Non modificare la Sezione B.
   4. Aggiungere override specifici del cliente SOLO nella Sezione C.

   NOTA TECNICA — box-shadow focus:
   I ring di focus definiti in questo file usano color-mix() e si
   aggiornano automaticamente al cambio di --brand-primary.
   Le variabili --brand-primary-r/g/b rimangono per compatibilità
   Bootstrap Italia: aggiornarle sempre insieme a --brand-primary.
   ============================================================ */


/* ============================================================
   SEZIONE A — COLORI BRAND
   ============================================================
   L'UNICA sezione da modificare per personalizzare il portale.
   ============================================================ */

:root {

	/* ----------------------------------------------------------
	   LIVELLO 1 — PALETTE BASE (obbligatorio)
	   Modificare questi valori. Il 90% delle personalizzazioni
	   si risolve qui senza toccare altro.
	   ---------------------------------------------------------- */

	/*
	   COLORE PRINCIPALE del cliente.
	   Dove appare: pulsante "Accedi" e pulsanti primari globali,
	   tab "Forniture"/"Servizi" attiva nella griglia, link breadcrumb
	   "Portale acquisti", bordo input al focus, badge Bootstrap.
	*/
	/* --brand-primary:         #003366; */

	/*
	   Scomposizione RGB di --brand-primary.
	   !! AGGIORNARE SEMPRE INSIEME AL VALORE HEX SOPRA !!
	   Esempio: #003366 → r:0, g:51, b:102

	   PERCHÉ ESISTONO: compatibilità Bootstrap Italia — questi valori
	   alimentano DUE variabili BS che non accettano HEX:
	     - --bs-primary-rgb        (badge, ring, componenti BI)
	     - --bs-btn-focus-shadow-rgb (ring focus pulsanti Bootstrap)

	   I box-shadow espliciti in questo file usano color-mix() e NON
	   dipendono da questi canali — si aggiornano automaticamente.

	   WCAG — ATTENZIONE: se si cambia --brand-primary aggiornare
	   OBBLIGATORIAMENTE anche questi tre valori, altrimenti i ring
	   focus generati da Bootstrap (non dai nostri override) useranno
	   il colore sbagliato, compromettendo la conformità WCAG 2.1 §2.4.7.
	*/
	/* --brand-primary-r:       0;
	--brand-primary-g:       51;
	--brand-primary-b:       102; */

	/*
	   TONO SCURO del primario (circa 15-20% più scuro).
	   Dove appare: sfondo pulsanti al hover, colore link al hover,
	   sfondo pulsanti A+/A-/Ripristina al hover nell'header.
	   Regola pratica: usare una tinta del primario,
	   non un colore completamente diverso.
	*/
	/* --brand-primary-dark:    #0053a6; */

	/*
	   TONO MOLTO SCURO del primario (circa 30-40% più scuro).
	   Dove appare: stato active/pressed dei pulsanti primari,
	   sfondo voci menu sidebar "Area Pubblica" se non personalizzato
	   nel Livello 2 (--brand-menu-btn-bg).
	*/
	/* --brand-primary-darker:  var(--brand-primary); */

	/*
	   TESTO SU SFONDI COLORATI.
	   Dove appare: testo di tutti i pulsanti colorati (Accedi,
	   Filtra, voci menu, ...), testo nella barra header.
	   Quasi sempre bianco. Cambiare SOLO se il primario è
	   molto chiaro (es. giallo pastello) e il bianco non è
	   leggibile.
	*/
	/* --brand-text-on-primary: #ffffff; */

	/*
	   SFONDO DELLA BARRA HEADER in cima alla pagina.
	   Dove appare: barra orizzontale con il logo del cliente.
	   Può essere il primario, un tono più scuro, o bianco.
	   ATTENZIONE: se questo colore è chiaro (es. bianco),
	   i pulsanti A+/A-/Ripristina (testo bianco) diventeranno
	   invisibili. In quel caso sovrascrivere la regola
	   ".it-header-center-wrapper .btn-outline-light" in fondo.
	*/
	--brand-header-bg:       #06c;

	/* ── fine LIVELLO 1 ──────────────────────────────────── */


	/* ----------------------------------------------------------
	   LIVELLO 2 — FINE-TUNING ELEMENTI SPECIFICI (opzionale)
	   Di default ogni elemento usa i valori del Livello 1.
	   Decommentare e modificare UNA RIGA ALLA VOLTA solo se
	   quell'elemento specifico deve avere un colore diverso
	   dagli altri. Lasciare commentato = comportamento corretto.

	   Formato commento per ogni variabile:
	     Dove appare → Cosa succede se modifichi → Default usato
	   ---------------------------------------------------------- */

	/*
	   AZZURRO MEDIO ACI — colore secondario del brand.
	   Dove appare: link nella sidebar, sfondo voci menu "Area Pubblica"
	   (--brand-menu-btn-bg), bordo input al focus (--brand-borders-color-active),
	   colore testo tab non attive (--brand-nav-link-color) e hover tab
	   (--brand-nav-link-hover-color).
	   Se modifichi: cambia tutti i componenti che referenziano var(--brand-links-color).
	*/
	--brand-links-color:          #4798C7;

	/*
	   GRIGIO BORDI — colore dei bordi degli input a riposo.
	   Dove appare: bordo degli elementi .form-control nello stato normale
	   (non focus). Sostituisce il primario per un effetto neutro.
	   Usato in Sezione B: regola .border-primary e .form-control base.
	   Default usato in Sezione B: var(--brand-primary)
	*/
	/* --brand-borders-color:        #E6E6E6; */

	/*
	   BORDO INPUT AL FOCUS — colore del bordo degli input al focus.
	   Corrisponde a --brand-links-color: stesso azzurro dei link e
	   delle voci menu, per coerenza visiva tra elementi interattivi.
	   Usato in Sezione B: regola .form-control:focus.
	   Default usato in Sezione B: var(--brand-primary)
	*/
	/* --brand-borders-color-active: var(--brand-links-color); */

	/*
	   --brand-main-container-bg: var(--brand-primary);
	   Dove appare: sfondo del contenitore centrale della pagina (#main),
	   l'area principale a destra della sidebar.
	   Se modifichi: cambia il colore di sfondo dell'intera area contenuto.
	   Attenzione: usare un colore con sufficiente contrasto rispetto al
	   testo della pagina (WCAG AA richiede rapporto ≥ 4.5:1).
	   Default: var(--brand-primary)
	*/
	/* --brand-main-container-bg:     #ffffff; */

	/*
	   --brand-menu-btn-bg: #234E73;
	   Dove appare: sfondo delle voci NON ATTIVE del menu "Area
	   Pubblica" nella sidebar (i pulsanti di navigazione Home/Bandi di gara).
	   Se modifichi: cambia il colore di sfondo di quelle voci,
	   il testo rimane sempre --brand-text-on-primary (bianco).
	   Default: var(--brand-primary-darker) = #2d2c57
	*/
	/* --brand-menu-btn-bg:          var(--brand-links-color); */

	/*
	   --brand-h3-color: #0066CC;
	   Dove appare: titoli "Area Pubblica" e "Area Privata" nella
	   sidebar (i testi h3 che separano le sezioni menu).
	   Se modifichi: cambia solo il colore di quei due titoli.
	   Default: var(--brand-primary-dark) = #0053a6
	*/
	/* --brand-h3-color:             var(--brand-primary); */

	/*
	   --brand-login-btn-bg: #1a5276;
	   Dove appare: sfondo NORMALE del pulsante "Accedi" e SSO
	   nel form di login nell'Area Privata della sidebar.
	   Default: var(--brand-primary) = #1a5276
	*/
	/* --brand-login-btn-bg:         var(--brand-primary); */

	/*
	   --brand-login-btn-hover-bg: #0053a6;
	   Dove appare: sfondo del pulsante "Accedi" al HOVER/FOCUS.
	   Necessario perché la regola scoped form#login ha specificità
	   più alta del hover globale e lo sovrascrirebbe senza questo.
	   Default: var(--brand-primary-dark) = #0053a6
	*/
	/* --brand-login-btn-hover-bg:   #0053a6; */

	/*
	   --brand-filter-header-bg: #2d2c57;
	   Dove appare: sfondo dell'intestazione dell'accordion "Filtri"
	   nella griglia bandi (la barra colorata con scritto "Filtri").
	   Default: var(--brand-primary-darker) = #2d2c57
	*/
	/* --brand-filter-header-bg:     #2d2c57; */

	/*
	   --brand-filter-btn-bg: #1a5276;
	   Dove appare: sfondo NORMALE del pulsante "Filtra"
	   nell'accordion filtri bandi.
	   Default: var(--brand-primary) = #1a5276
	*/
	/* --brand-filter-btn-bg:        #1a5276; */

	/*
	   --brand-filter-btn-hover-bg: #0053a6;
	   Dove appare: sfondo del pulsante "Filtra" al HOVER/FOCUS.
	   Necessario per lo stesso motivo di --brand-login-btn-hover-bg:
	   la regola scoped ha specificità più alta del hover globale.
	   Default: var(--brand-primary-dark) = #0053a6
	*/
	/* --brand-filter-btn-hover-bg:  #0053a6; */

	/*
	   --brand-filter-outline-color: #1a5276;
	   Dove appare: pulsante "Pulisci" nell'accordion filtri bandi.
	   È un pulsante OUTLINE VERO: sfondo trasparente, solo bordo
	   e testo colorati. Hover: sfondo pieno con testo bianco.
	   Default: var(--brand-primary) = #1a5276
	*/
	/* --brand-filter-outline-color: #1a5276; */

	/*
	   --brand-menu-hover-border: #0053a6;
	   Dove appare: bordo sinistro colorato che compare al passaggio
	   del mouse sulle voci del menu "Area Pubblica" nella sidebar.
	   È un effetto visivo di highlight laterale.
	   Default: var(--brand-primary-dark) = #0053a6
	*/
	/* --brand-menu-hover-border:    #0053a6; */

	/*
	   --brand-nav-bg: #f8f9fa;
	   Dove appare: sfondo del contenitore principale della griglia
	   bandi (#nav_container), che racchiude le tab Forniture/Servizi
	   e la griglia dati sottostante.
	   Di default trasparente (eredita lo sfondo della pagina).
	   Default: transparent
	*/
	/* --brand-nav-bg:               var(--brand-primary); */

	/*
	   --brand-nav-pills-bg: #f8f9fa;
	   Dove appare: sfondo della barra con le tab Forniture/Servizi
	   (#nav_grid_bandi), separato dallo sfondo del contenitore
	   esterno. Utile se si vuole sfondo diverso tra la barra tab
	   e il resto del contenitore.
	   Di default trasparente (eredita da #nav_container).
	   Default: transparent
	*/
	/* --brand-nav-pills-bg:          var(--brand-primary); */

	/*
	   --brand-nav-link-color: #6c757d;
	   Dove appare: testo delle tab NON ATTIVE nella barra
	   di navigazione (es. "Forniture", "Servizi") nella griglia bandi.
	   Default: #6c757d (grigio neutro Bootstrap)
	*/
	/* --brand-nav-link-color:       var(--brand-primary); */

	/*
	   --brand-nav-link-hover-color: #1a5276;
	   Dove appare: colore testo delle tab al passaggio del mouse
	   (stato hover). Solo il testo cambia, lo sfondo rimane
	   trasparente durante l'hover.
	   Default: var(--brand-primary)
	*/
	/* --brand-nav-link-hover-color: var(--brand-links-color); */

	/*
	   --brand-nav-link-active-bg: #1a5276;
	   Dove appare: sfondo della tab ATTIVA (quella selezionata,
	   es. "Forniture" quando si è nella vista Forniture).
	   Default: var(--brand-primary)
	*/
	/* --brand-nav-link-active-bg:    var(--brand-primary); */

	/*
	   --brand-nav-link-active-color: #ffffff;
	   Dove appare: testo della tab ATTIVA.
	   Default: var(--brand-text-on-primary) = bianco
	*/
	/* --brand-nav-link-active-color: var(--brand-text-on-primary); */

	/*
	   --brand-grid-header-bg: #f3f4f6;
	   Dove appare: sfondo delle celle intestazione della griglia
	   (riga con i nomi delle colonne: Oggetto, Ente, Scadenza, ...).
	   Default: #f3f4f6 (grigio chiarissimo)
	*/
	/* --brand-grid-header-bg:       #BA4166; */

	/*
	   --brand-grid-header-text: (colore Bootstrap secondary);
	   Dove appare: testo delle celle intestazione della griglia.
	   NOTA TECNICA: in Portale.css il testo usa var(--bs-secondary)
	   con !important, non la variabile --gm-header-txt (che esiste
	   ma non viene usata). Questa var sovrascrive correttamente.
	   Default: var(--bs-secondary) = grigio scuro Bootstrap
	*/
	/* --brand-grid-header-text:     var(--brand-text-on-primary); */

	/*
	   --brand-btn-stampa-bg: ...;
	   Dove appare: sfondo del pulsante "Stampa" accanto alle
	   tab Forniture/Servizi nella barra #nav_container.
	   Default: var(--bs-body-bg) = bianco/sfondo pagina Bootstrap
	*/
	/* --brand-btn-stampa-bg:         var(--bs-body-bg); */

	/*
	   --brand-btn-stampa-color: ...;
	   Dove appare: colore testo/icona del pulsante "Stampa".
	   Default: var(--bs-secondary) = grigio Bootstrap
	*/
	/* --brand-btn-stampa-color:      var(--bs-secondary); */

	/*
	   --brand-btn-stampa-hover-bg: ...;
	   Dove appare: sfondo del pulsante "Stampa" al hover.
	   Default: var(--bs-tertiary-bg) = grigio chiaro Bootstrap
	*/
	/* --brand-btn-stampa-hover-bg:   var(--brand-primary-darker); */

	/*
	   --brand-btn-stampa-hover-color: ...;
	   Dove appare: colore testo/icona del pulsante "Stampa" al hover.
	   Default: var(--bs-body-color) = testo scuro Bootstrap
	*/
	/* --brand-btn-stampa-hover-color: var(--brand-text-on-primary); */

	/*
	   --brand-sidebar-bg: ...;
	   Dove appare: sfondo dell'intera area sidebar (#sidebar-area),
	   che contiene il menu "Area Pubblica", il form di login
	   "Area Privata" e i link di navigazione.
	   Di default trasparente (eredita lo sfondo della pagina).
	   Default: transparent
	*/
	/* --brand-sidebar-bg:            #ffffff; */
}
/* ── fine SEZIONE A ──────────────────────────────────────── */


/* ============================================================
   SEZIONE B — REGOLE COMPONENTI  (inizio)
   ============================================================
   Non modificare questa sezione.
   Le regole leggono automaticamente i valori dalla Sezione A
   tramite CSS custom properties (var()).

   Per override avanzati non coperti dal Livello 2:
   aggiungere regole DOPO questa sezione, in fondo al file,
   usando i selettori DOM del portale come ancore di zona.
   ============================================================ */

/* ============================================================
   CONTRATTO SELETTORI ID — mappa DOM <> CSS
   ============================================================
   Questa sezione usa selettori ID per agganciarsi a elementi
   specifici del portale. Gli ID NON sono attributi statici in
   HTML ma CONTRATTI tra JavaScript e CSS: cambiarli richiede
   un aggiornamento coordinato su più file.

   ATTENZIONE: PRIMA DI RINOMINARE UN ID verificare TUTTE le sorgenti
   elencate qui sotto, altrimenti il tema si rompe in silenzio.

   ID                      | Tipo    | Sorgente
   ─────────────────────────┼─────────┼──────────────────────────────────────────
   #collapseFilter         | JS gen  | domToolbox.js, pageGenerator.js,
                           |         | fles_base.js, fvoe_richiesta_accesso.js,
                           |         | PortaleLight/Portale.js
   #headingFilter          | JS gen  | (stesso gruppo di #collapseFilter)
   #nav_container          | JS gen  | PortaleLight/Portale.js
   #nav_grid_bandi         | JS gen  | PortaleLight/Portale.js:1006
   #sidebar_area_pubblica  | HTML    | Pages/Portale/INC/layoutNew.cshtml:451
   #sidebar-area           | HTML    | Pages/Portale/INC/layoutNew.cshtml:408
   #btnStampa              | JS gen  | PortaleLight/Portale.js:1064
   #main                   | HTML    | Pages/Portale/INC/layout.cshtml:459
                           |         | Pages/Portale/INC/layoutNew.cshtml:777,1098
   ============================================================ */


/* ==============================================================
   Bootstrap Italia — ricablaggio variabili primarie
   Tutti i componenti BI che leggono --bs-primary si adattano
   automaticamente (badge, ring, componenti form, ecc.).
   ============================================================== */
:root {
/* --bs-primary:     var(--brand-primary);
--bs-primary-rgb: var(--brand-primary-r), var(--brand-primary-g), var(--brand-primary-b); */
/* --bs-link-color: override ACI — i link globali usano --brand-links-color (azzurro medio)
   invece di --bs-primary (blu navy). Fallback = blu Bootstrap standard.              */
/* --bs-link-color: var(--brand-links-color, hsl(210, 100%, 40%)); */
}


/* ==============================================================
   HEADER — barra superiore con logo e pulsanti accessibilità
   ============================================================== */

/* Sfondo barra header (logo cliente + pulsanti A+/A-/Ripristina) */
/* .it-header-center-wrapper {
background-color: var(--brand-header-bg);
} */

/*
   Pulsanti A+ / A- / Ripristina nella barra header.
   Usano overlay bianchi semi-trasparenti assumendo sfondo SCURO.
   Se --brand-header-bg è chiaro (es. bianco), questi pulsanti
   non saranno visibili. In quel caso aggiungere un override
   in fondo al file che imposta color/border-color espliciti.
*/
/* .it-header-center-wrapper .btn-outline-light {
--bs-btn-color:               var(--brand-text-on-primary);
--bs-btn-border-color:        rgba(255, 255, 255, 0.7);
--bs-btn-hover-bg:            rgba(255, 255, 255, 0.15);
--bs-btn-hover-border-color:  var(--brand-text-on-primary);
--bs-btn-hover-color:         var(--brand-text-on-primary);
--bs-btn-active-bg:           rgba(255, 255, 255, 0.25);
--bs-btn-active-border-color: var(--brand-text-on-primary);
--bs-btn-active-color:        var(--brand-text-on-primary);
color:        var(--brand-text-on-primary);
border-color: rgba(255, 255, 255, 0.7);
} */

/* .it-header-center-wrapper .btn-outline-light:hover {
background-color: rgba(255, 255, 255, 0.15);
border-color:     var(--brand-text-on-primary);
color:            var(--brand-text-on-primary);
} */

/* .it-header-center-wrapper .btn-outline-light:focus,
.it-header-center-wrapper .btn-outline-light:focus-visible {
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.4);
} */

/* .it-header-center-wrapper .btn-outline-light:not(:disabled):not(.disabled):active,
.it-header-center-wrapper .btn-outline-light:not(:disabled):not(.disabled).active {
background-color: rgba(255, 255, 255, 0.25);
border-color:     var(--brand-text-on-primary);
color:            var(--brand-text-on-primary);
} */


/* ==============================================================
   LINK PRIMARI — breadcrumb "Portale acquisti" e link brand
   ============================================================== */
/* a.link-primary,
.link-primary {
color: var(--brand-primary) !important;
}

a.link-primary:hover,
.link-primary:hover {
color: var(--brand-primary-dark) !important;
} */


/* ==============================================================
   TESTI E BORDI — classi Bootstrap Italia
   ============================================================== */

/* Testi con classe text-primary (badge, alerts, etichette) */
/* .text-primary {
color: var(--brand-primary) !important;
} */

/*
   Titoli h3 con classe text-primary: sezioni "Area Pubblica"
   e "Area Privata" nella sidebar.
   Usa --brand-h3-color se definito nel Livello 2,
   altrimenti ricade su --brand-primary-dark come default.
*/
/* h3.text-primary {
color: var(--brand-h3-color, var(--brand-primary-dark)) !important;
} */

/* Bordi con classe border-primary */
/* .border-primary {
border-color: var(--brand-borders-color, var(--brand-primary)) !important;
} */


/* ==============================================================
   INPUT FORM — stato focus (tutti i form-control del portale)
   ============================================================== */
/* .form-control:focus {
border-color: var(--brand-borders-color-active, var(--brand-primary)) !important;
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-borders-color-active, var(--brand-primary)) 25%, transparent) !important;
} */


/* ==============================================================
   btn-primary — GLOBALE (tutti gli stati)
   ============================================================
   Si applica a qualunque .btn-primary nel portale.
   Le zone specifiche (login, filtri) sovrascrivono solo
   il colore base più sotto; hover/active rimangono questi.
   ============================================================== */
/* .btn-primary {
--bs-btn-bg:                    var(--brand-primary);
--bs-btn-border-color:          var(--brand-primary);
--bs-btn-color:                 var(--brand-text-on-primary);
--bs-btn-hover-bg:              var(--brand-primary-dark);
--bs-btn-hover-border-color:    var(--brand-primary-dark);
--bs-btn-hover-color:           var(--brand-text-on-primary);
--bs-btn-active-bg:             var(--brand-primary-darker);
--bs-btn-active-border-color:   var(--brand-primary-darker);
--bs-btn-active-color:          var(--brand-text-on-primary);
--bs-btn-disabled-bg:           var(--brand-primary);
--bs-btn-disabled-border-color: var(--brand-primary);
--bs-btn-disabled-color:        var(--brand-text-on-primary);
--bs-btn-focus-shadow-rgb:      var(--brand-primary-r), var(--brand-primary-g), var(--brand-primary-b);
background-color: var(--brand-primary);
border-color:     var(--brand-primary);
color:            var(--brand-text-on-primary);
}

.btn-primary:hover {
background-color: var(--brand-primary-dark);
border-color:     var(--brand-primary-dark);
color:            var(--brand-text-on-primary);
}

.btn-primary:focus,
.btn-primary:focus-visible {
background-color: var(--brand-primary-dark);
border-color:     var(--brand-primary-dark);
color:            var(--brand-text-on-primary);
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary) 50%, transparent);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary.dropdown-toggle.show,
.show > .btn-primary.dropdown-toggle {
background-color: var(--brand-primary-darker);
border-color:     var(--brand-primary-darker);
color:            var(--brand-text-on-primary);
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary) 50%, transparent);
}

.btn-primary:disabled,
.btn-primary.disabled {
background-color: var(--brand-primary);
border-color:     var(--brand-primary);
color:            var(--brand-text-on-primary);
opacity: 0.65;
} */


/* ── ZONA form#login: pulsante "Accedi" e SSO ────────────────────
   La form di login si trova dentro #sidebar_area_privata.

   NOTA SPECIFICITÀ: form#login .btn-primary (specificità 1-1-1)
   batte .btn-primary:hover (0-2-0), quindi anche al hover vince
   la regola base e il colore non cambia. Per questo esistono
   le regole :hover scoped qui sotto e le variabili dedicate
   --brand-login-btn-bg e --brand-login-btn-hover-bg in Livello 2.
   ---------------------------------------------------------------- */
/* form#login .btn-primary {
--bs-btn-bg:           var(--brand-login-btn-bg, var(--brand-primary));
--bs-btn-border-color: var(--brand-login-btn-bg, var(--brand-primary));
background-color:      var(--brand-login-btn-bg, var(--brand-primary));
border-color:          var(--brand-login-btn-bg, var(--brand-primary));
}

form#login .btn-primary:hover,
form#login .btn-primary:focus-visible {
background-color: var(--brand-login-btn-hover-bg, var(--brand-primary-dark));
border-color:     var(--brand-login-btn-hover-bg, var(--brand-primary-dark));
color:            var(--brand-text-on-primary);
} */

/* ── ZONA #collapseFilter: pulsante "Filtra" ─────────────────────
   L'accordion filtri nella griglia bandi genera dinamicamente
   il pulsante "Filtra" con classe btn-primary.

   NOTA SPECIFICITÀ: stesso problema di form#login. La regola
   #collapseFilter .btn-primary (1-1-0) batte .btn-primary:hover
   (0-2-0). Necessarie regole :hover scoped e variabile dedicata
   --brand-filter-btn-hover-bg in Livello 2.
   ---------------------------------------------------------------- */
/* #collapseFilter .btn-primary {
--bs-btn-bg:           var(--brand-filter-btn-bg, var(--brand-primary));
--bs-btn-border-color: var(--brand-filter-btn-bg, var(--brand-primary));
background-color:      var(--brand-filter-btn-bg, var(--brand-primary));
border-color:          var(--brand-filter-btn-bg, var(--brand-primary));
}

#collapseFilter .btn-primary:hover,
#collapseFilter .btn-primary:focus-visible {
background-color: var(--brand-filter-btn-hover-bg, var(--brand-primary-dark));
border-color:     var(--brand-filter-btn-hover-bg, var(--brand-primary-dark));
color:            var(--brand-text-on-primary);
} */


/* ==============================================================
   btn-outline-primary — GLOBALE (vero outline trasparente)
   ============================================================
   Di default è un outline puro: sfondo trasparente, solo
   testo e bordo colorati con --brand-primary.
   Al hover diventa solid (sfondo pieno, testo bianco).

   Il menu sidebar (#sidebar_area_pubblica) lo sovrascrive
   come SOLID più sotto — quella è l'eccezione, non la regola.
   ============================================================== */
/* .btn-outline-primary {
--bs-btn-color:                 var(--brand-primary);
--bs-btn-border-color:          var(--brand-primary);
--bs-btn-hover-bg:              var(--brand-primary);
--bs-btn-hover-border-color:    var(--brand-primary);
--bs-btn-hover-color:           var(--brand-text-on-primary);
--bs-btn-active-bg:             var(--brand-primary-dark);
--bs-btn-active-border-color:   var(--brand-primary-dark);
--bs-btn-active-color:          var(--brand-text-on-primary);
--bs-btn-disabled-color:        var(--brand-primary);
--bs-btn-disabled-border-color: var(--brand-primary);
--bs-btn-focus-shadow-rgb:      var(--brand-primary-r), var(--brand-primary-g), var(--brand-primary-b);
color:            var(--brand-primary);
border-color:     var(--brand-primary);
background-color: transparent;
background-image: none;
} */

/* .btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
background-color: var(--brand-primary);
border-color:     var(--brand-primary);
color:            var(--brand-text-on-primary);
} */

/* .btn-outline-primary:focus {
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary) 50%, transparent);
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary.dropdown-toggle.show,
.show > .btn-outline-primary.dropdown-toggle {
background-color: var(--brand-primary-dark);
border-color:     var(--brand-primary-dark);
color:            var(--brand-text-on-primary);
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand-primary) 50%, transparent);
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
color:            var(--brand-primary);
border-color:     var(--brand-primary);
background-color: transparent;
opacity: 0.65;
} */


/* ── ZONA #sidebar_area_pubblica: voci menu — SOLID ──────────────
   PERCHÉ ESISTE QUESTA ECCEZIONE:
   Il menu "Area Pubblica" usa btn-outline-primary per le voci
   non attive, ma deve avere sfondo COLORATO (non trasparente).
   Questa è una scelta progettuale del portale: le voci del menu
   usano classi outline ma appaiono solid.

   Questo blocco sovrascrive il comportamento outline globale
   SOLO all'interno di #sidebar_area_pubblica.

   Se --brand-menu-btn-bg non è definito nel Livello 2,
   usa --brand-primary-darker come fallback.

   La voce ATTIVA del menu usa btn-primary (non outline)
   e segue le regole globali btn-primary sopra.
   ---------------------------------------------------------------- */
/* #sidebar_area_pubblica .btn-outline-primary {
--bs-btn-bg:           var(--brand-menu-btn-bg, var(--brand-primary-darker));
--bs-btn-border-color: var(--brand-menu-btn-bg, var(--brand-primary-darker));
--bs-btn-color:        var(--brand-text-on-primary);
--bs-btn-hover-bg:     var(--brand-primary-dark);
--bs-btn-hover-color:  var(--brand-text-on-primary);
color:            var(--brand-text-on-primary);
border-color:     var(--brand-menu-btn-bg, var(--brand-primary-darker));
background-color: var(--brand-menu-btn-bg, var(--brand-primary-darker));
background-image: none;
box-shadow: none;
}

#sidebar_area_pubblica .btn-outline-primary:hover,
#sidebar_area_pubblica .btn-outline-primary:focus-visible {
background-color: var(--brand-primary-dark);
border-color:     var(--brand-primary-dark);
color:            var(--brand-text-on-primary);
box-shadow: none;
} */

/*
   Bordo sinistro colorato al hover sulle voci menu.
   Classe .custom-hover è presente SOLO sui pulsanti menu
   della sidebar. L'effetto è un highlight laterale.
   Se --brand-menu-hover-border non è definito nel Livello 2,
   usa --brand-primary-dark come fallback.
*/
/* #sidebar_area_pubblica .btn.custom-hover:hover {
border-left: 1rem solid var(--brand-menu-hover-border, var(--brand-primary-dark));
} */


/* ── ZONA #collapseFilter: pulsante "Pulisci" — vero outline ─────
   Il pulsante "Pulisci" nell'accordion filtri deve rimanere
   un VERO OUTLINE: sfondo trasparente, solo bordo e testo colorati.

   Questa regola è esplicita (ridondante rispetto al globale) per
   garantire che future regole in PortaleLight/Portale.css non
   alterino per errore il comportamento di "Pulisci".

   Se --brand-filter-outline-color non è definito nel Livello 2,
   usa --brand-primary come fallback.
   ---------------------------------------------------------------- */
/* #collapseFilter .btn-outline-primary {
--bs-btn-color:        var(--brand-filter-outline-color, var(--brand-primary));
--bs-btn-border-color: var(--brand-filter-outline-color, var(--brand-primary));
--bs-btn-hover-bg:     var(--brand-filter-outline-color, var(--brand-primary));
--bs-btn-hover-color:  var(--brand-text-on-primary);
color:            var(--brand-filter-outline-color, var(--brand-primary));
border-color:     var(--brand-filter-outline-color, var(--brand-primary));
background-color: transparent;
background-image: none;
box-shadow: none;
}

#collapseFilter .btn-outline-primary:hover,
#collapseFilter .btn-outline-primary:focus-visible {
background-color: var(--brand-filter-outline-color, var(--brand-primary));
border-color:     var(--brand-filter-outline-color, var(--brand-primary));
color:            var(--brand-text-on-primary);
} */


/* ==============================================================
   #headingFilter — intestazione accordion "Filtri"
   Override di PortaleLight/Portale.css
   (quella regola imposta un colore fisso hardcoded che qui
   viene sovrascritto con il valore brand del cliente)
   ============================================================== */
/* #headingFilter {
padding: .5rem 1.5rem !important;
--bs-bg-opacity: 1;
background-color: var(--brand-filter-header-bg, var(--brand-primary-darker)) !important;
color: var(--brand-text-on-primary) !important;
} */


/* ==============================================================
   #nav_container — griglia bandi: sfondo, tab navigazione,
   intestazione colonne
   ============================================================
   #nav_container è il wrapper che contiene:
     - le tab "Forniture" / "Servizi" / ecc. (#nav_grid_bandi)
     - la griglia dati con le intestazioni colonna (.gm-container)

   NOTA TECNICA SFONDO GRIGLIA:
   Portale.css usa "--gm-header-bg" come variabile per lo sfondo
   delle intestazioni, ma usa "var(--bs-secondary)" hardcoded per
   il testo (non usa "--gm-header-txt" pur avendola definita).
   Questo file sovrascrive entrambe nel modo corretto.
   ============================================================== */

/* Sfondo del contenitore principale della griglia bandi.
   Di default trasparente. Decommentare --brand-nav-bg in
   Livello 2 per impostare un colore di sfondo.              */
/* #nav_container {
background-color: var(--brand-nav-bg, transparent) !important;
} */

/* Sfondo della barra con le tab Forniture/Servizi.
   Separato da #nav_container: permette di colorare solo la
   barra tab lasciando il resto del contenitore diverso.     */
/* #nav_grid_bandi .nav-pills {
background-color: var(--brand-nav-pills-bg, transparent) !important;
} */

/* Testo delle tab NON ATTIVE.           */
/* #nav_grid_bandi .nav-pills .nav-link {
color: var(--brand-nav-link-color, #6c757d);
} */

/* Testo delle tab al hover (sfondo rimane trasparente).        */
/* #nav_grid_bandi .nav-pills .nav-link:hover {
color: var(--brand-nav-link-hover-color, var(--brand-primary));
} */

/* Tab ATTIVA — sfondo e testo.
   Portale.css usa background-color: var(--bs-primary) e color: #fff
   hardcoded. Stesso selettore + caricamento dopo = questa vince.
   Se --brand-nav-link-active-bg non è definito in Livello 2,
   usa --brand-primary come fallback (comportamento invariato).  */
/* #nav_grid_bandi .nav-pills .nav-link.active {
background-color: var(--brand-nav-link-active-bg,    var(--brand-primary));
color:            var(--brand-nav-link-active-color, var(--brand-text-on-primary));
} */

/* Sfondo intestazione colonne della griglia.
   Ridefinisce --gm-header-bg che Portale.css legge con !important
   nelle regole thead. La var cascade correttamente.            */
/* .gm-container {
--gm-header-bg: var(--brand-grid-header-bg, #f3f4f6);
} */

/* Testo intestazione colonne.
   Portale.css usa "color: var(--bs-secondary) !important" hardcoded
   (non la variabile --gm-header-txt). Stesso selettore + stessa
   specificità + caricamento dopo = questa regola vince.        */
/* .gm-container thead.gm-thead th.gridjs-th.gm-th {
color: var(--brand-grid-header-text, var(--bs-secondary)) !important;
} */


/* ==============================================================
   #sidebar-area — colonna laterale sinistra
   ============================================================== */

/* Sfondo dell'intera sidebar (Area Pubblica + Area Privata). */
/* #sidebar-area {
background-color: var(--brand-sidebar-bg, transparent);
} */


/* ==============================================================
   #btnStampa — pulsante Stampa nella barra #nav_container
   ============================================================
   In Portale.css usa variabili Bootstrap (bs-body-bg,
   bs-secondary, bs-tertiary-bg, bs-body-color).
   Le regole sotto hanno stesso selettore + caricamento dopo
   quindi vincono senza bisogno di !important.
   ============================================================== */
/* #btnStampa {
background-color: var(--brand-btn-stampa-bg,    var(--bs-body-bg));
color:            var(--brand-btn-stampa-color,  var(--bs-secondary));
}

#btnStampa:hover {
background-color: var(--brand-btn-stampa-hover-bg,    var(--bs-tertiary-bg));
color:            var(--brand-btn-stampa-hover-color, var(--bs-body-color));
} */
/* ── fine SEZIONE B ──────────────────────────────────────── */


/* ============================================================
   SEZIONE C — OVERRIDE CLIENTE ACI  (inizio)
   ============================================================
   Regole specifiche per il cliente ACI che sovrascrivono o
   estendono il comportamento base del portale.

   STRUTTURA:
     C1 — Layout globale
     C2 — Header
     C3 — Contenuto principale (#main)
     C4 — Home page (contenuto custom via multilinguismo)
     C5 — Footer (contenuto custom via multilinguismo)
     C6 — Link sidebar

   REGOLA: aggiungere nuove personalizzazioni ACI SOLO qui,
   mai intercalate nella Sezione A o Sezione B.
   ============================================================ */


/* ── C1 — Layout globale ─────────────────────────────────── */

/* Previene lo scroll orizzontale causato da componenti Bootstrap
   che eccedono la viewport su schermi stretti. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}


/* ── C2 — Header ─────────────────────────────────────────── */

/* Secondo logo opzionale nel header: non utilizzato da ACI. */
.it-header-center-logo {
    display: none;
}

/* Zona pulsanti A+/A-/Ripristina (accessibilità dimensione testo):
   non utilizzata da UA, nascosta per pulizia visiva. */
.it-header-right-zone {
    display: none;
}

.it-brand-wrapper img {
	max-height: 60px !important;
	min-height: 20px !important;
}

.it-header-center-content-wrapper { 
    box-shadow: inset 0 -10px 10px -10px rgba(0, 0, 0, .1);
    padding-bottom: 10px;
}

/* ── C3 — Contenuto principale ───────────────────────────── */

/* Sfondo del contenitore centrale della pagina (#main).
   Sovrascrive il default Bootstrap per applicare --brand-main-container-bg.
   Il fallback #ffffff garantisce la leggibilità se la variabile
   non è definita. */
/* #main {
    background: none !important;
    background-color: var(--brand-main-container-bg, #ffffff) !important;
} */


/* ── C4 — Home page ──────────────────────────────────────── */
/* Contenuto HTML centrale iniettato via multilinguismo
   con chiave: "Contenuto html centrale home page di portale" */

.home-central-content {
    text-align: center;
}

#centered-text-home-page {
    color: var(--brand-primary) !important;
}

#centered-image-home-page {
    display: block;
    max-width: 90%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 20px;
}


/* ── C5 — Footer ─────────────────────────────────────────── */
/* Contenuto HTML iniettato via multilinguismo
   con chiave: "Contenuto html footer portale" */

/*
   VARIABILI LOCALI — solo quelle senza equivalente nel sistema brand.
   --pg-accent:     oro ACI, colore di richiamo senza corrispondenza brand.
   --pg-text-muted: testo secondario su sfondo scuro (nessun equivalente brand).
   --pg-link-color: link su sfondo scuro — variante chiara di --brand-links-color,
                    necessaria perché --brand-links-color (#4798C7) non ha contrasto
                    sufficiente su sfondo --brand-primary.
   --pg-divider:    separatori su sfondo scuro (nessun equivalente brand).

   Font: non dichiarati qui — gestiti dalla sezione C7.
   Gli elementi h4 e p ereditano da C7 (Poppins e Merriweather).
   Gli altri elementi (.pg-brand-name, .pg-title, .pg-col a)
   ereditano da body → Merriweather.
*/

  .footer-portale-gare{
    --pg-text-muted: #fff;
    background-color: var(--brand-header-bg);
    color: #fff; 
    /* box-shadow: inset 0 10px 10px -10px rgba(0,0,0,.1); */
  }

  .footer-portale-gare .pg-brand{
    border-right: 1px solid #FFF;
  }
  @media (max-width: 767.98px){
    .footer-portale-gare .pg-brand{
      border-right: none;
      border-bottom: 1px solid #fff;
    }
  }

  .footer-portale-gare .pg-brand-name{
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
  }

  .footer-portale-gare .pg-logo{
   margin-top: 12px;
  }
  
  .footer-portale-gare .pg-logo svg,
  .footer-portale-gare .pg-logo img{
    height: 80px;
    width: auto;
    max-width: 100%;
    display: block;
  }
  .footer-portale-gare .pg-title{
    font-size: 20px;
    letter-spacing: 1px;
  }

  .footer-portale-gare .pg-col h4{
    font-size: 13px;
    letter-spacing: .4px;
  }

  .footer-portale-gare .pg-col p{
    font-size: 13px;
    color: var(--pg-text-muted);
  }

  .footer-portale-gare .pg-col a{
    color: var(--brand-links-color);
  }

  .footer-portale-gare .pg-col-divider{
    border-left: 1px solid #fff;
  }
  @media (max-width: 767.98px){
    .footer-portale-gare .pg-col-divider{
      border-left: none;
      border-top: 1px solid #fff;
    }
  }

/* ── C6 — Link sidebar ───────────────────────────────────── */
/* Link nelle sezioni "Area Pubblica" e "Area Privata" della sidebar,
   generati dal componente link-list di Bootstrap Italia.
   Colore a riposo:  --brand-links-color (azzurro medio ACI).
   Colore al hover:  --brand-primary-dark (tonalità più scura, standard UX). */
/* .link-list-wrapper .link-list li a.list-item,
.link-list-wrapper .link-list li a.list-item span {
	color: var(--brand-links-color, #06c) !important;
	text-decoration: none;
} */

/* .link-list-wrapper .link-list li a.list-item:hover,
.link-list-wrapper .link-list li a.list-item:hover span {
	color: var(--brand-primary-dark) !important;
	text-decoration: underline;
} */

/* ── C7 — Tipografia (Poppins / Merriweather) ────────────── */
/* Sistema tipografico ACI: Poppins (UI) + Merriweather (editoriale).
   Font SELF-HOSTED (no CDN Google Fonts): per un portale di ente
   pubblico, caricare font da fonts.googleapis.com invia l'IP
   dell'utente a server extra-UE ad ogni pagina — il Garante
   Privacy ha già sanzionato siti PA italiani per questo motivo.

   POPPINS — file .ttf ricevuti da Google Fonts, usati COSÌ COME
   SONO (nessuna conversione woff2): nomi invariati rispetto allo
   zip originale. Includere anche OFL.txt (licenza SIL Open Font
   License) nella cartella di destinazione: obbligatorio per
   redistribuzione.
   NOTA PESO: .ttf pesa 2-3× più di un equivalente .woff2
   (compressione assente); a parità di rete più lento da caricare.
   Se in futuro serve ottimizzare, si converte senza toccare
   questo file (cambia solo l'estensione nell'url() sotto).

   MERRIWEATHER — sono arrivati due variable font (assi: opsz, wdth, wght)
   anziché file statici per peso:
     - Merriweather-VariableFont_opsz,wdth,wght.ttf        (normal)
     - Merriweather-Italic-VariableFont_opsz,wdth,wght.ttf (italic)
   Le dichiarazioni @font-face usano font-weight come intervallo (100 900)
   per coprire tutti i pesi tramite un singolo file variable.

   ATTENZIONE — PATH DI CARTELLA (per entrambi i font-family):
   "../fonts/..." presume che i .ttf vengano pubblicati in
   wwwroot/Customization/aci/portale/fonts/ (sibling di css/).
   Verificare/correggere in base alla posizione reale nel
   progetto. Se il path è sbagliato i font falliscono in
   silenzio: il browser ricade sui fallback di sistema definiti
   in --brand-font-primary/--brand-font-secondary, senza errori
   visibili in pagina (controllare la tab Network del browser).
*/

/* @font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins/Poppins-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins/Poppins-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins/Poppins-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins/Poppins-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Merriweather";
	src: url("../fonts/merriweather/Merriweather-VariableFont_opsz,wdth,wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Merriweather";
	src: url("../fonts/merriweather/Merriweather-Italic-VariableFont_opsz,wdth,wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
} */

/*
   Variabili font, scope ACI (solo questo file, non condivise con UA).
   Fallback: stack di sistema equivalente in caso i .ttf non
   carichino (path errato, file mancante, offline).
*/
/* :root {
	--brand-font-primary:   "Poppins", "Titillium Web", Arial, sans-serif;
	--brand-font-secondary: "Merriweather", Georgia, "Times New Roman", serif;
} */

/* Poppins — elementi UI ad alta leggibilità/impatto visivo.
   Headings, navigazione, menu/tab, badge, pulsanti/CTA, label
   form, microcopy, metadata, header tabella, elementi dashboard. */
/* h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.navbar, .nav-link,
#nav_grid_bandi .nav-pills .nav-link,
.link-list-wrapper .link-list li a.list-item,
.badge,
.btn,
label, .form-label,
small, .small,
th,
.gm-container thead.gm-thead th.gridjs-th.gm-th,
.dropdown-menu, .dropdown-item {
	font-family: var(--brand-font-primary);
} */

/* Merriweather — contenuti editoriali/long-form ad alta densità
   testuale. Body copy, paragrafi, pagine di dettaglio, descrizioni
   card, abstract/introduzioni, note informative, contenuti
   istituzionali, articoli. */
/* body,
p,
.card-text, .card-body p,
.home-central-content,
.site-footer__info,
article, .article-content {
	font-family: var(--brand-font-secondary);
} */

#sidebar_area_pubblica {
	display: none;
}

#sidebar-area .d-inline-flex a.link-primary {
	pointer-events: none;
}

#login div {
    margin-left: 0px !important;
}

.footer-portale-gare .pg-content p,
.footer-portale-gare .pg-content h4 {
    line-height: 1.1;
}

/* Override: fix testo che va a capo sotto l'icona con zoom elevato */
.italia-it-button.italia-it-button-size-m {
    display: flex !important;
    align-items: center !important;
}

.italia-it-button.italia-it-button-size-m .italia-it-button-icon,
.italia-it-button.italia-it-button-size-m .italia-it-button-text {
    float: none !important;
    display: flex !important;
    align-items: center !important;
}

.italia-it-button.italia-it-button-size-m .italia-it-button-icon {
    flex: 0 0 auto !important;
}

.italia-it-button.italia-it-button-size-m .italia-it-button-text {
    flex: 1 1 auto !important;
    justify-content: center !important;
}
/* ── fine SEZIONE C ──────────────────────────────────────── */