/* ==========================================================================
FASE 1: COLORE AZZURRO CHIARO INTESTAZIONI
========================================================================= */

/* Header principale del sito */
.container-header {
  background: var(--info) !important;
  box-shadow: none !important;
}

/* Sfondo azzurro per le intestazioni dei moduli */
.card-header {
  background-color: var(--info) !important;
  color: var(--white) !important;
}

/* Testo del menu */
.container-header .mod-menu,
.container-header .navbar-toggler {
color: #ffffff !important;
}

/* ==========================================================================
FASE 2 & 3: ARROTONDAMENTO TOTALE E TRASPARENZA MODULI
========================================================================= */

/* Forza l'arrotondamento su tutti e 4 gli angoli per l'intestazione e i contenitori */
.card, .card-header, .item-page, .item-content, .login, .breadcrumb {
border-radius: 0.5rem !important;
}

/* Rende i moduli trasparenti e aggiunge il padding (crea lo spazio intorno all'intestazione) */
.card, .item-page, .login {
background-color: rgba(255, 255, 255, 0) !important;
padding: 15px !important;
}

/* Aggiunge un po' di margine sotto l'intestazione azzurra per staccarla dal testo sottostante */
.card-header {
margin-bottom: 15px !important;
padding: 10px 15px !important;
}

/* ==========================================================================
FASE 4: ACCENTI GIALLO ORO (SOTTOLINEATURE E PULSANTI)
========================================================================== */

/* Ridefinizione delle variabili di colore native del template */
:root {
--cassiopeia-color-primary: #f8bb19;
--cassiopeia-color-hover: #f8bb19;
}

/* Sottolineature animate e indicatori di stato attivo nel menu dell'header */
.container-header .metismenu > li.active > a::after,
.container-header .metismenu > li.active > button::before,
.container-header .metismenu > li > a:hover::after,
.container-header .metismenu > li > button:hover::before {
background: #f8bb19 !important;
opacity: 1 !important;
}

/* Stile per i pulsanti principali (es. pulsante "Cerca" o invio moduli) */
.btn-primary {
color: #ffffff !important;
background-color: #f8bb19 !important;
border-color: #f8bb19 !important;
}

/* Cambio colore al passaggio del mouse sui pulsanti principali per dare feedback */
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: #dfa613 !important; /* Un oro leggermente piĂą scuro per l'effetto click */
border-color: #dfa613 !important;
color: #ffffff !important;
}