@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:         #1a5276;

	/*
	   Scomposizione RGB di --brand-primary.
	   !! AGGIORNARE SEMPRE INSIEME AL VALORE HEX SOPRA !!
	   Esempio: #1a5276 → r:26, g:82, b:118

	   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:       26;
	--brand-primary-g:       82;
	--brand-primary-b:       118;

	/*
	   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:  #2d2c57;

	/*
	   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:       #ffffff;

	/* ── 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
	   ---------------------------------------------------------- */

	/*
	   --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:    var(--brand-primary);

	/*
	   --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-primary);

	/*
	   --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:             #0066CC;

	/*
	   --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:         #1a5276; */

	/*
	   --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-text-on-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-text-on-primary);

	/*
	   --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-darker);

	/*
	   --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:       var(--brand-primary);

	/*
	   --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);
}


/* ==============================================================
   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-primary) !important;
}


/* ==============================================================
   INPUT FORM — stato focus (tutti i form-control del portale)
   ============================================================== */
.form-control:focus {
border-color: var(--brand-primary) !important;
box-shadow: 0 0 0 0.2rem color-mix(in srgb, 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 UA  (inizio)
   ============================================================
   Regole specifiche per il cliente UA 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)

   REGOLA: aggiungere nuove personalizzazioni UA 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 UA. */
.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;
}


/* ── 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: 100%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 20px;
}


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

.site-footer__bottom {
    background-color: var(--brand-primary-darker);
    color: var(--brand-text-on-primary);
    padding: 1.5rem 1rem;
}

.site-footer__info {
    font-style: normal;
    max-width: 1200px;
    margin: 0 auto;
    line-height: 1.5;
}

.site-footer__info p {
    margin: 0 0 0.25rem;
    text-align: center;
}
/* ── fine SEZIONE C ──────────────────────────────────────── */