/* =====================================================================
   Safety-ID · foglio di restyle
   ---------------------------------------------------------------------
   Va caricato DOPO bootstrap.min.css e sb-admin-2.css: non sostituisce
   nulla, sovrascrive solo l'aspetto. La logica di layout della sidebar e
   del page-wrapper resta quella originale, cosi' le 125 pagine in
   /pages non vanno toccate: usano gia' queste classi.

   Per tornare indietro basta togliere il <link> dalle JSP.

   Colori del marchio, presi dal logo:
     grigio #5B5B5B (la scritta)  ·  giallo #FFED00 (l'elmo)
   Il giallo e' anche il colore della sicurezza ed e' l'accento del
   template. Non regge testo su fondo chiaro (contrasto ~1.1:1), quindi
   si usa dove funziona: filetti, voce di menu attiva, pulsante
   principale, messa a fuoco. I colori dei dati restano distinti.
   ===================================================================== */

:root {
  --sid-grey:    #5b5b5b;
  --sid-yellow:  #ffed00;

  --sid-bg:      #f2f4f7;
  --sid-card:    #ffffff;
  --sid-line:    #e2e6ec;
  --sid-line-2:  #cfd6df;
  --sid-ink:     #131a22;
  --sid-ink-2:   #4d5865;
  --sid-ink-3:   #7d8896;

  --sid-nav:     #3e3e3e;
  --sid-nav-ink: #e6e6e6;
  --sid-nav-ink2:#a8a8a8;
  --sid-nav-line:#5c5c5c;

  --sid-blue:  #1d5fa8;  --sid-blue-t:  #e8f0f9;
  --sid-green: #17804d;  --sid-green-t: #e5f2eb;
  --sid-red:   #bf1f2c;  --sid-red-t:   #fbe8ea;
  --sid-amber: #b06e05;  --sid-amber-t: #fdf1dc;

  --sid-radius: 10px;
  --sid-shadow: 0 1px 2px rgba(19,26,34,.05), 0 10px 26px -18px rgba(19,26,34,.30);
  --sid-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- base */
body {
  background: var(--sid-bg);
  color: var(--sid-ink);
  font-family: var(--sid-sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sid-blue); }
a:hover, a:focus { color: var(--sid-blue); }

/* messa a fuoco visibile: prima non c'era */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--sid-yellow);
  outline-offset: 2px;
  border-radius: 5px;
}

/* ------------------------------------------------------- barra in alto */
/* Chiara: il logo ha la scritta grigia, su fondo grigio sparirebbe.
   Il giallo del marchio la chiude sotto con un filetto. */
.navbar-default.navbar-static-top {
  background: var(--sid-card);
  border: 0;
  border-bottom: 3px solid var(--sid-yellow);
  box-shadow: 0 1px 3px rgba(19,26,34,.06);
}
.navbar-default .navbar-header img { max-height: 40px !important; margin: 10px 0 0 12px; }
.navbar-top-links > li > a { color: var(--sid-ink-2); }
.navbar-top-links > li > a:hover,
.navbar-top-links > li > a:focus { color: var(--sid-ink); background: var(--sid-bg); }
.navbar-default .navbar-toggle {
  border-color: var(--sid-line-2);
}
.navbar-default .navbar-toggle .icon-bar { background-color: var(--sid-ink-2); }
.navbar-top-links img[src*="/en.png"],
.navbar-top-links img[src*="/it2.png"],
.navbar-top-links img[src*="/fr.png"] { border-radius: 2px; }

.dropdown-menu {
  border: 1px solid var(--sid-line);
  border-radius: var(--sid-radius);
  box-shadow: var(--sid-shadow);
  padding: 6px;
}
.dropdown-menu > li > a { border-radius: 6px; padding: 8px 12px; color: var(--sid-ink-2); }
.dropdown-menu > li > a:hover { background: var(--sid-bg); color: var(--sid-ink); }
.dropdown-menu .divider { background: var(--sid-line); }

/* ------------------------------------------------------ menu laterale */
/* sb-admin-2 stacca la sidebar dall'alto con "margin-top: 51px", un valore
   fisso che vale solo per la barra originale da 50px + 1px di bordo. Qui la
   barra e' piu' alta (il logo ha i suoi margini) e sotto ha il filetto giallo
   da 3px, quindi quel 51px faceva partire la sidebar troppo in su e il giallo
   spariva dietro al menu.
   Invece di rincorrere il numero giusto a ogni ritocco del logo, la sidebar
   viene ancorata al fondo reale della barra: e' in position:absolute dentro
   il <nav>, che Bootstrap tiene in position:relative, quindi "top: 100%"
   equivale al bordo inferiore della barra e i 3px la portano sotto al
   filetto. Cosi' resta allineata da sola anche se la barra cambia altezza. */
@media (min-width: 768px) {
  .sidebar {
    margin-top: 0;
    top: calc(100% + 3px);
  }
}
.navbar-default .sidebar { background: var(--sid-nav); border: 0; }
.sidebar ul li { border-bottom: 0; }
.sidebar ul li a {
  color: var(--sid-nav-ink);
  border-left: 3px solid transparent;
  padding: 9px 15px;
  font-size: 13.5px;
}
.sidebar ul li a i { color: var(--sid-nav-ink2); width: 18px; }
.sidebar ul li a:hover,
.sidebar ul li a:focus { background: rgba(255,255,255,.05); color: #fff; }
.sidebar ul li a.active,
.sidebar ul li.active > a {
  background: rgba(255,237,0,.10);
  border-left-color: var(--sid-yellow);
  color: #fff;
  font-weight: 600;
}
.sidebar ul li a.active i,
.sidebar ul li.active > a i { color: var(--sid-yellow); }
.sidebar .nav-second-level li a { padding-left: 42px; font-size: 13px; color: var(--sid-nav-ink2); }
.sidebar .nav-second-level li a:hover { color: #fff; }
.sidebar .arrow { opacity: .5; }

/* ---------------------------------------------------------- contenuto */
#page-wrapper { border-left: 0; background: var(--sid-bg); padding: 18px 20px; }

.page-header {
  margin: 0 0 20px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--sid-line);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--sid-ink);
}
.page-header i { color: var(--sid-ink-3); font-size: .85em; }

h1, h2, h3, h4, h5 { letter-spacing: -.01em; }
h4 { font-size: 15px; font-weight: 700; }
/* i titoli di sezione erano grassetto+sottolineato: filetto giallo */
.panel-body h4 > b > u,
.panel-body h4 u { text-decoration: none; }
.panel-body h4 > b {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--sid-yellow);
}

/* ------------------------------------------------------------ pannelli */
.panel {
  background: var(--sid-card);
  border: 1px solid var(--sid-line);
  border-radius: var(--sid-radius);
  box-shadow: var(--sid-shadow);
  margin-bottom: 16px;
}
.panel > .panel-heading {
  border: 0;
  border-bottom: 1px solid var(--sid-line);
  border-radius: var(--sid-radius) var(--sid-radius) 0 0;
  background: var(--sid-card);
  color: var(--sid-ink);
  padding: 12px 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.panel-body { padding: 18px 16px; }
.panel-footer { background: var(--sid-card); border-top: 1px solid var(--sid-line); border-radius: 0 0 var(--sid-radius) var(--sid-radius); }

/* Le varianti colorate non riempiono piu' tutta la testata:
   restano riconoscibili dal colore del testo e da un filetto in alto. */
.panel-primary > .panel-heading { color: var(--sid-blue);  box-shadow: inset 0 3px 0 var(--sid-blue); }
.panel-green   > .panel-heading,
.panel-success > .panel-heading { color: var(--sid-green); box-shadow: inset 0 3px 0 var(--sid-green); }
.panel-red     > .panel-heading,
.panel-danger  > .panel-heading { color: var(--sid-red);   box-shadow: inset 0 3px 0 var(--sid-red); }
.panel-yellow  > .panel-heading,
.panel-warning > .panel-heading { color: var(--sid-amber); box-shadow: inset 0 3px 0 var(--sid-yellow); }
.panel-info    > .panel-heading { color: var(--sid-blue);  box-shadow: inset 0 3px 0 var(--sid-blue); }

/* -------------------------------------------- riquadri con contatore */
/* L'icona enorme su fondo pieno diventa un glifo in un riquadro tinto,
   e il numero prende il primo piano. */
.panel-primary > .panel-heading .fa-5x,
.panel-green   > .panel-heading .fa-5x,
.panel-success > .panel-heading .fa-5x,
.panel-red     > .panel-heading .fa-5x,
.panel-yellow  > .panel-heading .fa-5x,
.panel-info    > .panel-heading .fa-5x {
  font-size: 22px !important;
  width: 46px; height: 46px; line-height: 46px;
  border-radius: 9px; text-align: center; display: block;
}
.panel-primary > .panel-heading .fa-5x { background: var(--sid-blue-t);  color: var(--sid-blue); }
.panel-green   > .panel-heading .fa-5x,
.panel-success > .panel-heading .fa-5x { background: var(--sid-green-t); color: var(--sid-green); }
.panel-red     > .panel-heading .fa-5x { background: var(--sid-red-t);   color: var(--sid-red); }
.panel-yellow  > .panel-heading .fa-5x { background: var(--sid-amber-t); color: var(--sid-amber); }
.panel-info    > .panel-heading .fa-5x { background: var(--sid-blue-t);  color: var(--sid-blue); }

.huge {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--sid-ink);
}
.panel-heading .text-right > div:not(.huge) {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sid-ink-3); text-transform: uppercase;
}
/* il piede vuoto sotto i contatori non serve piu' */
.panel > a > .panel-footer { display: none; }

/* -------------------------------------------------------------- form */
.form-control {
  border: 1px solid var(--sid-line-2);
  border-radius: 7px;
  box-shadow: none;
  height: auto;
  padding: 8px 11px;
  font-size: 14px;
  color: var(--sid-ink);
  background: var(--sid-card);
}
.form-control:focus { border-color: var(--sid-blue); box-shadow: 0 0 0 3px rgba(29,95,168,.12); }
.form-control[readonly] { background: var(--sid-bg); color: var(--sid-ink-2); }
label { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--sid-ink-2); }
.form-group { margin-bottom: 15px; }

/* ----------------------------------------------------------- pulsanti */
.btn {
  border-radius: 7px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 8px 15px;
  border: 1px solid transparent;
  transition: background-color .15s, border-color .15s;
}
.btn-lg { padding: 11px 20px; font-size: 15px; }
.btn-primary { background: var(--sid-blue); border-color: var(--sid-blue); }
.btn-primary:hover, .btn-primary:focus { background: #17497f; border-color: #17497f; }
.btn-success { background: var(--sid-green); border-color: var(--sid-green); }
.btn-success:hover, .btn-success:focus { background: #10653b; border-color: #10653b; }
.btn-danger { background: var(--sid-red); border-color: var(--sid-red); }
.btn-danger:hover, .btn-danger:focus { background: #9a1823; border-color: #9a1823; }
.btn-warning {
  background: var(--sid-yellow); border-color: var(--sid-yellow); color: #2a2a00;
}
.btn-warning:hover, .btn-warning:focus { background: #e6d500; border-color: #e6d500; color: #2a2a00; }
.btn-default {
  background: var(--sid-card); border-color: var(--sid-line-2); color: var(--sid-ink-2);
}
.btn-default:hover, .btn-default:focus { background: var(--sid-bg); border-color: var(--sid-ink-3); }

/* ---------------------------------------------------------- tabelle */
.table { color: var(--sid-ink); }
.table > thead > tr > th {
  border-bottom: 1px solid var(--sid-line-2);
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sid-ink-3);
  padding: 10px 10px;
}
.table > tbody > tr > td {
  border-top: 1px solid var(--sid-line);
  padding: 10px;
  font-size: 13.5px;
  vertical-align: middle;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
.table-hover > tbody > tr:hover { background: var(--sid-blue-t); }
/* orari, date e conteggi incolonnati */
.table td, .table th { font-variant-numeric: tabular-nums; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--sid-line-2); border-radius: 7px; padding: 5px 9px;
}
.dataTables_wrapper .dt-buttons .btn { margin-right: 5px; }
.dataTables_wrapper .paginate_button {
  border-radius: 6px !important; border-color: var(--sid-line) !important;
}
.dataTables_wrapper .paginate_button.current {
  background: var(--sid-blue) !important; border-color: var(--sid-blue) !important;
  color: #fff !important;
}

/* --------------------------------------------------------- messaggi */
.alert { border-radius: var(--sid-radius); border-width: 1px; padding: 12px 15px; font-size: 14px; }
.alert-success { background: var(--sid-green-t); border-color: var(--sid-green); color: var(--sid-green); }
.alert-danger  { background: var(--sid-red-t);   border-color: var(--sid-red);   color: var(--sid-red); }
.alert-warning { background: var(--sid-amber-t); border-color: var(--sid-amber); color: var(--sid-amber); }
.alert-info    { background: var(--sid-blue-t);  border-color: var(--sid-blue);  color: var(--sid-blue); }

.modal-content { border: 0; border-radius: 12px; box-shadow: 0 20px 60px -20px rgba(0,0,0,.45); }
.modal-header { border-bottom: 1px solid var(--sid-line); border-top: 3px solid var(--sid-yellow);
                border-radius: 12px 12px 0 0; padding: 14px 18px; }
.modal-footer { border-top: 1px solid var(--sid-line); }

.well { background: var(--sid-bg); border: 1px solid var(--sid-line); border-radius: var(--sid-radius); box-shadow: none; }
hr { border-top: 1px solid var(--sid-line); }

/* ------------------------------------------------------ schermi piccoli */
@media (max-width: 768px) {
  #page-wrapper { padding: 14px 12px; }
  .page-header { font-size: 19px; }
  .huge { font-size: 26px; }
  .navbar-default .navbar-header img { max-height: 34px !important; }
  .table > tbody > tr > td, .table > thead > tr > th { padding: 8px 7px; font-size: 13px; }
}

/* =====================================================================
   CORREZIONI sulla struttura reale delle pagine
   ---------------------------------------------------------------------
   L'anteprima usava un markup mio; le pagine vere usano quello di
   Bootstrap 3 (row + col-xs-3 / col-xs-9 dentro .panel-heading) e le
   varianti colorate di sb-admin-2.css impostano background-color e
   color:white con la stessa specificita'. Qui si allinea il risultato
   alla proposta lavorando sui selettori veri.
   ===================================================================== */

/* --- le testate colorate non devono piu' essere a fondo pieno --------- */
.panel-primary > .panel-heading,
.panel-green   > .panel-heading,
.panel-success > .panel-heading,
.panel-red     > .panel-heading,
.panel-danger  > .panel-heading,
.panel-yellow  > .panel-heading,
.panel-warning > .panel-heading,
.panel-info    > .panel-heading {
  background-color: var(--sid-card) !important;
  border-color: var(--sid-line) !important;
}
.panel-primary, .panel-green, .panel-success,
.panel-red, .panel-danger, .panel-yellow, .panel-warning, .panel-info {
  border-color: var(--sid-line) !important;
}
.panel-green > a, .panel-red > a, .panel-yellow > a,
.panel-primary > a, .panel-info > a { color: var(--sid-ink-3); }

/* --- riquadri contatore della dashboard ------------------------------
   La testata che contiene una .row e' un riquadro contatore: li' il testo
   non va reso maiuscolo e minuto come nelle testate normali. */
.panel > .panel-heading .row {
  text-transform: none;
  letter-spacing: normal;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-items: center;
  margin: 0;
}
.panel > .panel-heading .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
.panel > .panel-heading .row > .col-xs-3 { width: auto; flex: none; margin-right: 14px; float: none; }
.panel > .panel-heading .row > .col-xs-9 { width: auto; flex: 1 1 auto; float: none; }

.panel > .panel-heading .huge {
  font-size: 30px !important;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--sid-ink);
}
.panel > .panel-heading .huge + div {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sid-ink-3);
  margin-top: 2px;
}

/* --- tabelle con testata bloccata e scorrimento ----------------------- */
.dataTables_scrollHead {
  background: var(--sid-card);
  border-bottom: 1px solid var(--sid-line-2);
}
.dataTables_scrollHead .table > thead > tr > th { border-bottom: 0; }
.dataTables_scrollBody { border-bottom: 1px solid var(--sid-line); }
.dataTables_scrollBody::-webkit-scrollbar { width: 10px; height: 10px; }
.dataTables_scrollBody::-webkit-scrollbar-thumb {
  background: var(--sid-line-2); border-radius: 5px;
}
.dataTables_scrollBody::-webkit-scrollbar-track { background: var(--sid-bg); }
.dataTables_wrapper { overflow: visible; }

/* =====================================================================
   SECONDA PASSATA — allineamento alla proposta, dopo confronto visivo
   ===================================================================== */

/* --- riquadri contatore: numero accanto all'icona, non all'estremo ---
   Il markup usa .col-xs-9.text-right, che spinge numero ed etichetta
   contro il bordo destro lasciando un vuoto enorme in mezzo. */
.panel > .panel-heading .row > .col-xs-9.text-right { text-align: left !important; }

/* niente filetto colorato sopra i riquadri contatore: nella proposta il
   colore sta solo nel riquadro dell'icona */
.panel-primary > .panel-heading,
.panel-green   > .panel-heading,
.panel-success > .panel-heading,
.panel-red     > .panel-heading,
.panel-danger  > .panel-heading,
.panel-yellow  > .panel-heading,
.panel-warning > .panel-heading,
.panel-info    > .panel-heading { box-shadow: none; }

/* il filetto colorato resta solo sulle testate con un titolo testuale */
.panel-primary > .panel-heading:not(:has(.row)) { box-shadow: inset 0 3px 0 var(--sid-blue); }
.panel-green   > .panel-heading:not(:has(.row)),
.panel-success > .panel-heading:not(:has(.row)) { box-shadow: inset 0 3px 0 var(--sid-green); }
.panel-red     > .panel-heading:not(:has(.row)),
.panel-danger  > .panel-heading:not(:has(.row)) { box-shadow: inset 0 3px 0 var(--sid-red); }
.panel-info    > .panel-heading:not(:has(.row)) { box-shadow: inset 0 3px 0 var(--sid-blue); }

/* i riquadri contatore non hanno bordo inferiore: sono la scheda intera */
.panel > .panel-heading:has(.row) { border-bottom: 0; padding: 15px 16px; }

/* --- icone duotone (fad) nel menu: vanno colorate con le variabili
       proprie di FontAwesome, altrimenti restano coi colori originali --- */
.sidebar ul li a i,
.sidebar ul li a svg {
  --fa-primary-color: var(--sid-nav-ink2);
  --fa-secondary-color: var(--sid-nav-ink2);
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: .45;
}
.sidebar ul li.active > a i, .sidebar ul li a.active i,
.sidebar ul li.active > a svg, .sidebar ul li a.active svg {
  --fa-primary-color: var(--sid-yellow);
  --fa-secondary-color: var(--sid-yellow);
}
/* solo la voce attiva e' evidenziata: le altre restano neutre */
.sidebar ul li a { background: transparent; }

/* --- elenchi delle funzioni nei pannelli --------------------------------
   Il markup ha <li> senza <ul>, quindi il browser mostra i punti elenco.
   Si tolgono e si allineano icona e testo come nella proposta. */
.panel-body p > li,
.panel-body li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 14px;
  color: var(--sid-ink-2);
}
.panel-body p > li > i,
.panel-body li > i {
  width: 26px; height: 26px; line-height: 26px; text-align: center;
  border-radius: 6px; background: var(--sid-blue-t); color: var(--sid-blue);
  font-size: 12px; flex: none;
  --fa-primary-color: var(--sid-blue);
  --fa-secondary-color: var(--sid-blue);
}

/* --- testate testuali: pallino di colore come nella proposta ---------- */
.panel > .panel-heading:not(:has(.row)) { display: flex; align-items: center; gap: 9px; }

/* --- foto dell'utente nella barra in alto ---------------------------- */
.avatar-utente {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; display: inline-block; vertical-align: middle;
  border: 1px solid var(--sid-line-2); background: var(--sid-bg);
  margin-right: 4px;
}
.avatar-vuoto {
  width: 30px; height: 30px; line-height: 28px; border-radius: 50%;
  text-align: center; display: inline-block; vertical-align: middle;
  border: 1px solid var(--sid-line-2); background: var(--sid-bg);
  color: var(--sid-ink-3); margin-right: 4px;
}

/* --- albero della gestione file -------------------------------------- */
/*
 * Nel markup #jstree sta dentro un .row senza una colonna che lo contenga:
 * eredita cosi' i margini negativi di Bootstrap e sborda dal pannello. In piu'
 * i nomi lunghi di cartelle e documenti allargano l'albero oltre lo schermo,
 * senza modo di scorrere: su un telefono la parte destra diventa irraggiungibile.
 *
 * Si rimettono i margini a zero, si da' un'altezza massima con scorrimento
 * proprio, e si impedisce ai nomi di andare a capo dentro la riga dell'albero
 * (che li spezzerebbe sotto l'icona).
 */
#jstree {
  margin: 0;
  padding: 4px 2px 8px;
  max-height: 60vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#jstree .jstree-anchor {
  white-space: nowrap;
}

/* Il contenitore non deve tagliare l'albero: lo scorrimento sta dentro #jstree. */
#jstree ~ *,
#jstree {
  min-width: 0;
}

@media (max-width: 768px) {
  #jstree {
    max-height: 50vh;
  }
  /* Voci piu' alte: sul touch servono bersagli piu' grandi del dito. */
  #jstree .jstree-anchor {
    line-height: 28px;
    height: 28px;
  }
}

/* --- footer ---------------------------------------------------------- */
.sid-footer {
  margin-left: 250px;
  padding: 16px 20px 22px;
  border-top: 1px solid var(--sid-line);
  background: var(--sid-bg);
  color: var(--sid-ink-3);
  font-size: 12.5px;
  text-align: center;
}
.sid-footer b { color: var(--sid-ink-2); font-weight: 600; }
@media (max-width: 768px) { .sid-footer { margin-left: 0; } }

/* --- home rigenerata sul modello della proposta ---------------------- */
.sid-feat { list-style: none; margin: 0; padding: 0; }
.sid-feat > li {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; font-size: 14px; color: var(--sid-ink-2);
}
.sid-feat > li > i {
  width: 26px; height: 26px; line-height: 26px; text-align: center; flex: none;
  border-radius: 6px; background: var(--sid-blue-t); color: var(--sid-blue); font-size: 12px;
  --fa-primary-color: var(--sid-blue); --fa-secondary-color: var(--sid-blue);
}
.sid-feat-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 22px; }
@media (max-width: 992px) { .sid-feat-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sid-feat-3 { grid-template-columns: 1fr; } }

.sid-sub { margin-bottom: 13px; }
.sid-sub > b {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--sid-ink-3); margin-bottom: 2px;
  border: 0; padding: 0;
}
.sid-sub > span { font-size: 14px; color: var(--sid-ink-2); }
.sid-intro { font-size: 14px; color: var(--sid-ink-2); max-width: 72ch; margin: 0 0 14px; }

/* =====================================================================
   CORREZIONE menu laterale
   ---------------------------------------------------------------------
   metisMenu assegna la classe .active a piu' voci (i genitori dei
   sottomenu aperti, non solo la pagina corrente): evidenziarle tutte in
   giallo tingeva l'intera barra di verde oliva e rendeva gialle tutte le
   icone. L'applicazione non tiene traccia della pagina corrente, quindi
   l'evidenziazione si toglie e le icone restano grigie uniformi.
   ===================================================================== */
.sidebar ul li a.active,
.sidebar ul li.active > a {
  background: transparent !important;
  border-left-color: transparent !important;
  color: var(--sid-nav-ink) !important;
  font-weight: 400 !important;
}
.sidebar ul li a:hover,
.sidebar ul li a:focus { background: rgba(255,255,255,.06) !important; color: #fff !important; }

/* icone del menu: grigie sempre, comprese le duotone di FontAwesome */
.sidebar ul li a i,
.sidebar ul li a.active i,
.sidebar ul li.active > a i {
  color: var(--sid-nav-ink2) !important;
  --fa-primary-color: var(--sid-nav-ink2) !important;
  --fa-secondary-color: var(--sid-nav-ink2) !important;
  --fa-primary-opacity: 1 !important;
  --fa-secondary-opacity: .45 !important;
}

/* --- pannelli: nessun bordo colorato, solo il filetto sulla testata --- */
.panel-primary, .panel-green, .panel-success, .panel-red,
.panel-danger, .panel-yellow, .panel-warning, .panel-info,
.panel-primary > .panel-heading, .panel-green > .panel-heading,
.panel-success > .panel-heading, .panel-red > .panel-heading,
.panel-danger > .panel-heading, .panel-yellow > .panel-heading,
.panel-warning > .panel-heading, .panel-info > .panel-heading {
  border-color: var(--sid-line) !important;
}

/* --- home: icone piu' grandi e presenti in ogni sezione --------------- */
.sid-feat > li { font-size: 14.5px; padding: 7px 0; gap: 12px; }
.sid-feat > li > i {
  width: 34px; height: 34px; line-height: 34px; font-size: 15px; border-radius: 8px;
}

/* voci della colonna di destra: icona accanto al testo */
.sid-sub {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px;
}
.sid-sub > i {
  width: 34px; height: 34px; line-height: 34px; text-align: center; flex: none;
  border-radius: 8px; background: var(--sid-blue-t); color: var(--sid-blue); font-size: 15px;
  --fa-primary-color: var(--sid-blue); --fa-secondary-color: var(--sid-blue);
}
.sid-sub > div { min-width: 0; }

/* sezioni in basso: icona sopra il titolo */
.sid-box > i {
  display: block; width: 40px; height: 40px; line-height: 40px; text-align: center;
  border-radius: 9px; background: var(--sid-green-t); color: var(--sid-green);
  font-size: 17px; margin-bottom: 10px;
  --fa-primary-color: var(--sid-green); --fa-secondary-color: var(--sid-green);
}
.sid-box > h4 { margin: 0 0 6px; }
.sid-box > h4 > b {
  border-bottom: 2px solid var(--sid-yellow);
  display: inline-block; padding-bottom: 4px;
  font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
}
.sid-box > p { margin: 0; font-size: 13.5px; color: var(--sid-ink-2); line-height: 1.55; }

/* --- logo dell'azienda accanto al marchio ---------------------------- */
.logo-azienda {
  max-height: 40px; width: auto; margin-left: 14px;
  padding-left: 14px; border-left: 1px solid var(--sid-line-2);
  vertical-align: middle; display: inline-block;
}
@media (max-width: 640px) { .logo-azienda { max-height: 30px; margin-left: 8px; padding-left: 8px; } }