/* ============================================================================
   theme-bs5.css — Tema admin Bootstrap 5, look "Top-nav moderna".
   I COLORI sono PARAMETRICI: arrivano da T_SITE via le CSS variables --bh-*
   definite in config/assets_head.php (niente colori hardcoded qui). Questo file
   definisce solo forma/spaziature/ombre/tipografia moderne.
   Fallback prudenti se una variabile non fosse definita.
   ============================================================================ */

:root {
  /* SOLO valori NON parametrici. I colori/raggi parametrici (--bh-primary,
     --bh-body-text, --bh-field-radius, --bh-btn-radius, --bh-font, ...) sono
     definiti da config/assets_head.php DAI PARAMETRI T_SITE e NON vanno
     ridefiniti qui: questo file si carica DOPO e li sovrascriverebbe
     (era la causa dell'hover "verde" invece del tuo brand). */
  --bh-border: #e7eaec;
  --bh-card-radius: 12px;
}

body {
  background: var(--bh-page-bg);
  font-family: var(--bh-font), -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--bh-body-text);
  font-size: 14px;
}

h1,h2,h3,h4,h5 { color: var(--bh-title-text); }

/* ---- Topbar: i COLORI restano PARAMETRICI dal DB (lo stile inline di menu_top usa
   $menu_background_top / $menu_li_a — barra bianca come nella prima release). Il tema
   NON li sovrascrive: aggiunge solo un'ombra leggera e lo stile moderno dei dropdown. ---- */
.navbar { box-shadow: 0 1px 6px rgba(0,0,0,.08); border: 0; }
.navbar .dropdown-menu {
  min-width: 230px;
  padding: 8px;
  border: 1px solid var(--bh-border);
  border-radius: 14px;
  box-shadow: 0 18px 44px -16px rgba(15,23,42,.30), 0 4px 12px rgba(0,0,0,.06);
  margin-top: 10px;
  background: #fff;
}
.navbar .dropdown-menu > li { list-style: none; }
.navbar .dropdown-menu > li > a, .navbar .dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 9px;
  color: var(--bh-body-text); font-size: 13.5px; line-height: 1.25;
  white-space: nowrap;          /* niente piu' "Registrazione on-/site" a capo */
  text-decoration: none; border: 0; background: transparent;
  transition: background .12s ease, color .12s ease;
}
.navbar .dropdown-menu > li > a:hover, .navbar .dropdown-item:hover {
  background: linear-gradient(180deg,
     color-mix(in srgb, var(--bh-primary) 13%, transparent),
     color-mix(in srgb, var(--bh-primary) 5%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bh-primary) 14%, transparent);
  color: var(--bh-primary);
}
.navbar .dropdown-menu > li.active > a { color: var(--bh-primary); font-weight: 600; }
/* nessun "underline" animato dentro i menu a tendina (solo sulle voci top) */
.navbar .dropdown-menu > li > a::after { content: none !important; }
/* separatore tra gruppi (li.divider) reso come linea */
.navbar .dropdown-menu .divider, .navbar .dropdown-menu .dropdown-divider {
  display: block; list-style: none; height: 1px; margin: 7px 6px; padding: 0;
  background: var(--bh-border); border: 0; overflow: hidden;
}
.navbar .dropdown-menu .divider > * { display: none; }

/* I contenitori della navbar non devono clippare i menu a tendina. */
.navbar, .navbar .navbar-collapse, .navbar .navbar-nav,
.navbar .navbar-nav > li, .navbar .dropdown { overflow: visible !important; }
.navbar .dropdown-menu { z-index: 1050; }

/* APERTURA A HOVER (desktop): il menu Admin e i sottomenu si aprono al passaggio
   del mouse -> funzionano SEMPRE, senza dipendere dal JS dei dropdown. Su mobile
   (sotto lg, barra collassata) restano cliccabili via Bootstrap. */
@media (min-width: 992px) {
  .navbar .navbar-nav > li.dropdown:hover > .dropdown-menu { display: block; animation: bhDropIn .16s ease both; }
  /* PONTE invisibile sul gap di 10px sopra il menu: cosi' spostando il mouse da
     "Admin" alla tendina l'hover non si interrompe e il menu non si chiude. */
  .navbar .navbar-nav > li.dropdown > .dropdown-menu::before {
    content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; background: transparent;
  }
}
/* micro-animazione di apertura dei menu (fade + slide) */
@keyframes bhDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bhSubIn  { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }

/* Sottomenu multi-livello (es. Admin > Config) — sostituisce smartmenus.
   Desktop: fly-out a destra al hover. Mobile/collapse: espansione inline. */
.navbar .dropdown-submenu { position: relative; }
.navbar .dropdown-submenu > .dropdown-menu {
  top: -8px; left: 100%; margin: 0 0 0 6px; display: none;
}
.navbar .dropdown-submenu:hover > .dropdown-menu { display: block; animation: bhSubIn .16s ease both; }
/* ponte orizzontale sul gap del fly-out laterale */
.navbar .dropdown-submenu > .dropdown-menu::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 10px; background: transparent;
}
/* freccia ">" a destra delle voci che hanno un sottomenu (Config, Lists, Report).
   IMPORTANTE: style.php (incluso da menu_top, quindi caricato DOPO questo file) mette
   una "sottolineatura animata" su .dropdown-menu > li a::after (position:absolute,
   height:2px, background:<menu_border_bottom>, width 0->100% su hover/active). A parita'
   di specificita' vincerebbe lei -> sulle voci col sottomenu uscirebbe una BARRA blu
   invece della freccia. Qui alziamo la specificita' (.top-navigation) e forziamo tutto
   con !important per: (a) mostrare la freccia, (b) annullare la barra (bg/posizione/size). */
.top-navigation .navbar-nav .dropdown-menu > li.dropdown-submenu > a::after,
.navbar .navbar-nav .dropdown-menu > li.dropdown-submenu > a::after {
  content: "\f105" !important; font-family: "FontAwesome" !important;
  position: static !important; left: auto !important; bottom: auto !important;
  width: auto !important; height: auto !important;
  background: none !important; background-color: transparent !important;
  transition: none !important; transform: none !important; z-index: auto !important;
  margin-left: auto !important; padding-left: 12px; opacity: .55; float: none; border: 0;
}
@media (max-width: 991.98px) {
  /* su mobile (barra collassata) i sottomenu si espandono inline */
  .navbar .dropdown-submenu > .dropdown-menu { position: static; left: 0; margin: 0; display: block; box-shadow: none; border: 0; padding-left: 16px; }
  .navbar .dropdown-submenu > a::after { content: "\f107" !important; margin-left: auto; }
}

/* ---- Card moderne (sostituisce .ibox/.panel) ---- */
.card, .ibox, .panel, .ibox-content, .ibox-title {
  background: #fff;
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-card-radius);
}
.card, .ibox { box-shadow: 0 6px 20px -12px rgba(15,23,42,.18); }
.card .card-header, .ibox-title { background: #fff; border-bottom: 1px solid var(--bh-border); font-weight: 600; border-radius: var(--bh-card-radius) var(--bh-card-radius) 0 0; }
.card-body, .ibox-content { padding: 18px; border: 0; }

/* ---- Bottoni (parametrici) ---- */
.btn { border-radius: var(--bh-btn-radius); font-weight: 500; }
.btn-primary, .btn.btn-accedi {
  --bs-btn-bg: var(--bh-primary);
  --bs-btn-border-color: var(--bh-primary-border);
  --bs-btn-color: var(--bh-primary-text);
  --bs-btn-hover-bg: var(--bh-primary);
  --bs-btn-hover-border-color: var(--bh-primary-border);
  --bs-btn-hover-color: var(--bh-primary-text);
  --bs-btn-active-bg: var(--bh-primary);
  filter: saturate(1);
}
.btn-primary:hover { filter: brightness(.94); }
/* compat .btn-default (BS3) finché il markup non è migrato */
.btn-default {
  color: var(--bh-body-text); background: #fff; border: 1px solid #ccd2d8;
  border-radius: var(--bh-btn-radius); padding: .375rem .75rem;
}
.btn-default:hover { background: #f3f5f7; }
/* compat .btn-xs (BS3, RIMOSSO in BS5): pulsanti compatti. Usati DENTRO le celle dei
   datagrid (files/badge/invitato...): senza questo rendono a dimensione piena e vengono
   TAGLIATI nella riga. Anche .btn-sm leggermente normalizzato. */
.btn-xs, .btn-group-xs > .btn {
  padding: 2px 8px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  border-radius: 6px;
}
.btn-xs > i, .btn-xs > .fa, .btn-xs i.fa { font-size: 11px; }
/* pulsanti azione dentro le righe della griglia: compatti, allineati, piccolo gap */
.ui-jqgrid .jqgrow td .btn,
.ui-jqgrid .jqgrow td a.btn {
  vertical-align: middle; margin: 1px 2px; white-space: nowrap;
}
.ui-jqgrid .jqgrow td .btn-xs { padding: 1px 7px !important; }

/* ---- Form (raggio parametrico) ---- */
.form-control, .form-select { border-color: #d7dde2; border-radius: var(--bh-field-radius); }
/* SELECT nativi (ex bootstrap-select / select.form-control): aspetto BS5 con freccina */
select.form-control, select.selectpicker, .form-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23667085' stroke-width='1.6' d='M2 5.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 14px;
}
/* eventuale widget BS3 residuo di bootstrap-select nascosto (usiamo il select nativo) */
.bootstrap-select.btn-group { display: none !important; }
.form-control:focus, .form-select:focus { border-color: var(--bh-primary); box-shadow: 0 0 0 .2rem rgba(0,0,0,.06); }
label, .form-label { font-weight: 600; font-size: .875rem; }
.form-group { margin-bottom: 1rem; }          /* compat BS3 */
.control-label { font-weight: 600; }
.has-error .form-control { border-color: #e74c3c; }
.input-group-text { border-radius: var(--bh-field-radius); }

/* ---- Tabelle ---- */
.table { --bs-table-hover-bg: #f6f8fa; }
.table thead th { border-bottom: 2px solid var(--bh-border); font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; color: #6b7680; }

/* ---- jqGrid filter toolbar (ricerca per colonna) ----
   Ogni cella di ricerca e' una tabellina: [operatore][input][x]. Di default
   l'input non riempie la cella e su colonne strette diventa minuscolo. Qui la
   tabellina occupa tutta la larghezza e input/select prendono lo spazio libero,
   restando usabili (vale per tutti i datagrid con filterToolbar). */
.ui-jqgrid .ui-search-toolbar .ui-search-table { width: 100%; table-layout: auto; }
.ui-jqgrid .ui-search-toolbar .ui-search-oper,
.ui-jqgrid .ui-search-toolbar .ui-search-clear { width: 1px; white-space: nowrap; }
.ui-jqgrid .ui-search-toolbar .ui-search-input { width: auto; }
.ui-jqgrid .ui-search-toolbar .ui-search-input input,
.ui-jqgrid .ui-search-toolbar .ui-search-input select { width: 100%; box-sizing: border-box; }

/* Menu a tendina degli operatori (#sopt_menu, appeso al <body>): di default esce
   a tutta pagina e trasparente. Lo rendiamo un popup compatto e opaco. */
ul#sopt_menu.ui-search-menu {
  position: absolute;                 /* il build jQuery UI in uso non porta le regole .ui-menu:
                                         senza position l'altezza non si adatta al contenuto */
  width: auto !important; min-width: 140px; max-width: 260px;
  height: auto !important; max-height: none;
  padding: 4px 0; margin: 0; list-style: none;
  background: #fff; border: 1px solid var(--bh-border); border-radius: 8px;
  box-shadow: 0 8px 24px -10px rgba(15,23,42,.3);
}
ul#sopt_menu.ui-search-menu > li.ui-menu-item { list-style: none; margin: 0; padding: 0; min-height: 0; }
ul#sopt_menu.ui-search-menu > li.ui-menu-item > a {
  display: block; padding: 3px 12px; white-space: nowrap; line-height: 1.2; font-size: 13px;
  color: var(--bh-body-text); text-decoration: none; cursor: pointer;
}
ul#sopt_menu.ui-search-menu > li.ui-menu-item > a table {
  width: auto; border: 0; margin: 0; border-collapse: collapse; line-height: 1.2;
}
ul#sopt_menu.ui-search-menu > li.ui-menu-item > a td { border: 0; padding: 0 6px 0 0; height: auto; }
ul#sopt_menu.ui-search-menu > li.ui-menu-item > a:hover {
  background: color-mix(in srgb, var(--bh-primary) 12%, transparent); color: var(--bh-primary);
}

/* ---- jqGrid: form modale Add/Edit/View record (navGrid -> grid.formedit) ----
   Centralizzato: scritte piu' piccole e pulsanti (Invia/Chiudi) allineati.
   Vale per TUTTI i datagrid del portale, non per singola pagina. */
/* IMPORTANTE: NON uso il prefisso .ui-jqdialog (sul live il wrapper della modal puo'
   NON essere .ui-jqdialog -> le regole non aggancerebbero e le label ereditano 16px dal
   body). Targetto direttamente le classi jqGrid del FORM, che esistono solo qui. */
.EditTable,
.EditTable td,
.ui-jqdialog-content { font-size: 12px !important; }
/* titolo della modal */
.ui-jqdialog-title { font-size: 12px !important; }
/* etichette dei campi: piccole e leggere cosi' non dominano, colonna stretta (vicina ai
   field), righe compatte (padding verticale minimo). Piu' varianti di specificita'
   (con/senza .ui-jqdialog) per agganciare a prescindere dal wrapper e battere override. */
.ui-jqdialog .ui-jqdialog-content table.EditTable td.CaptionTD,
.ui-jqdialog .EditTable td.CaptionTD,
.ui-jqdialog td.CaptionTD,
table.EditTable td.CaptionTD,
td.CaptionTD {
  font-size: 12px !important; font-weight: 400 !important; color: var(--bh-body-text);
  width: 1% !important; white-space: nowrap !important;
  padding: 1px 6px 1px 2px !important; vertical-align: middle;
}
/* IL PUNTO CHIAVE: jqGrid mette la label dentro un ELEMENTO <label> (<td class="CaptionTD">
   <label for="...">TESTO</label></td>), e la regola globale `label{font-size:.875rem}`
   (=14px) vinceva sull'elemento. Quindi NON basta stilizzare il td: va colpito il <label>
   interno. Lo faccio con alta specificita' + !important. */
td.CaptionTD label,
.CaptionTD label,
tr.FormData > td.CaptionTD label,
html body table.EditTable td.CaptionTD label {
  font-size: 12px !important; font-weight: 500 !important;
  margin: 0 !important; line-height: 1.15 !important; display: inline !important;
}
/* celle dei campi: prendono tutto lo spazio rimasto, righe compatte */
table.EditTable td.DataTD,
td.DataTD { width: 99% !important; padding: 2px 4px !important; vertical-align: middle; }
/* input/select/textarea: testo piu' leggibile, larghezza piena, altezza contenuta */
td.DataTD .FormElement,
td.DataTD input,
td.DataTD select,
td.DataTD textarea {
  font-size: 14px !important; width: 100% !important; max-width: 100% !important;
  box-sizing: border-box !important; padding: 4px 8px !important; margin: 0 !important;
}
/* COMPATTAZIONE righe del form: recupero spazio verticale tra i campi (le righe erano
   troppo distanti). Lo spazio extra veniva dal border-spacing della EditTable e dal
   padding di riga: lo azzero e abbasso gli input. Centrale -> vale per TUTTI i datagrid. */
table.EditTable { border-spacing: 0 !important; border-collapse: separate !important; }
table.EditTable tr.FormData > td,
tr.FormData > td.CaptionTD,
tr.FormData > td.DataTD { padding-top: 1px !important; padding-bottom: 1px !important; }
td.DataTD .FormElement,
td.DataTD input,
td.DataTD select,
td.DataTD textarea { padding-top: 3px !important; padding-bottom: 3px !important;
  line-height: 1.25 !important; height: auto !important; min-height: 0 !important; }

/* pulsanti in basso (Invia / Chiudi): icona+testo centrati, larghezza = contenuto.
   Il build mette padding-left:1.9em su .fm-button-icon-left per l'icona in absolute:
   con flex+gap l'icona torna in flusso, quindi azzero quel padding extra. */
td.EditButton { padding: 8px 12px; white-space: nowrap; }
.fm-button {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 5px;
  width: auto !important; height: auto !important; min-width: 0 !important;
  vertical-align: middle; margin-left: 6px; line-height: 1.4; font-size: 10px !important;
  padding: 5px 12px !important;
}
.fm-button-icon-left,
.fm-button-icon-right { padding-left: 12px !important; padding-right: 12px !important; }
.fm-button .fm-button-icon,
.fm-button .ui-icon,
.fm-button .fa {
  position: static !important; margin: 0 !important; float: none !important;
  top: auto !important; left: auto !important; right: auto !important; vertical-align: middle;
}
.fm-button-text { font-size: 10px !important; }
/* l'icona puo' stare prima/dopo il testo: la riordino in base alla classe del bottone */
.fm-button-icon-left .fm-button-icon,
.fm-button-icon-left .ui-icon { order: -1; }
.fm-button-icon-right .fm-button-icon,
.fm-button-icon-right .ui-icon { order: 1; }

/* ---- Widget dei contenuti (token [[...]] risolti da config/content_tokens.php) ----
   Contatori, badge stato, countdown, allotment, gauge: stile centralizzato. */
.bh-widget { display: inline-block; vertical-align: middle; }
/* contatore numero + etichetta */
.bh-counter {
  text-align: center; padding: 14px 18px; margin: 6px;
  border: 1px solid var(--bh-border, #e7eaec); border-radius: var(--bh-card-radius, 12px);
  background: #fff; min-width: 120px;
}
.bh-counter-num { display: block; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--bh-primary, #1ab394); }
.bh-counter-lbl { display: block; margin-top: 6px; font-size: .8rem; color: #6b7680; text-transform: uppercase; letter-spacing: .03em; }
/* badge stato partecipazione */
.bh-badge { padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: .9rem; }
.bh-badge.bh-stat-ok   { background: rgba(26,179,148,.12); color: #138a70; }
.bh-badge.bh-stat-no   { background: rgba(231,76,60,.12);  color: #c0392b; }
.bh-badge.bh-stat-wait { background: rgba(243,156,18,.14); color: #b9770e; }
/* countdown */
.bh-countdown {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 18px; margin: 6px; border-radius: var(--bh-card-radius, 12px);
  background: #fff; border: 1px solid var(--bh-border, #e7eaec);
}
.bh-countdown .bh-cd-lbl { font-size: .8rem; color: #6b7680; text-transform: uppercase; letter-spacing: .03em; }
.bh-countdown .bh-cd-clock { font-size: 1.5rem; font-weight: 800; color: var(--bh-primary, #1ab394); }
.bh-countdown .bh-cd-clock b { font-variant-numeric: tabular-nums; }
/* allotment */
.bh-allotment {
  display: block; padding: 14px 18px; margin: 8px 0;
  border: 1px solid var(--bh-border, #e7eaec); border-radius: var(--bh-card-radius, 12px); background: #fff;
}
.bh-allot-title { font-weight: 700; margin-bottom: 8px; color: var(--bh-title-text, #2b333c); }
.bh-allot-list { list-style: none; margin: 0; padding: 0; }
.bh-allot-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--bh-border, #e7eaec); }
.bh-allot-row:last-child { border-bottom: 0; }
.bh-allot-num { font-weight: 700; color: var(--bh-primary, #1ab394); }
.bh-allot-soldout .bh-allot-num { color: #c0392b; }
.bh-allot-soldout .bh-allot-opt { text-decoration: line-through; color: #9aa0a6; }
/* gauge */
.bh-gauge { display: inline-block; width: 260px; max-width: 100%; margin: 6px; vertical-align: middle; }
/* chip segnaposto nell'editor CKEditor (authoring): vedi anche widget_chip css inline */
.bh-cke-chip {
  display: inline-block; padding: 1px 8px; margin: 0 2px; border-radius: 6px;
  background: #eef6f3; color: #138a70; border: 1px solid #b9e2d6;
  font: 600 12px/1.6 sans-serif; white-space: nowrap; cursor: default;
}

/* ---- Nav-tabs: tab attiva con sottolineatura del colore-menu del portale ----
   Reso con box-shadow interno: le nav-tabs BS5 (margin-bottom + bordi) nascondono
   un semplice border-bottom. Centralizzato qui per tutte le pagine. */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bh-body-text);
  border-color: transparent;
  box-shadow: inset 0 -2px 0 0 var(--bh-menu-border);
}

/* ---- Tabs "a cartella" (.tabs-container): standard del portale (come
   admin/project/progetto_detail.php). Centralizzato qui; copre sia il markup BS3
   (> li.active > a) sia quello BS5 (.nav-link.active). ---- */
.tabs-container { margin-bottom: 20px; }
.tabs-container .nav-tabs {
  background: transparent; border: 1px solid #e7eaec; border-bottom: none;
  border-radius: 12px 12px 0 0; padding-left: 10px; padding-top: 6px;
}
.tabs-container .nav-tabs > li,
.tabs-container .nav-tabs > li.nav-item { float: left; margin-bottom: -1px; border: 0; }
/* tab inattive */
.tabs-container .nav-tabs > li > a,
.tabs-container .nav-tabs .nav-link {
  margin-right: 4px; padding: 8px 20px; line-height: 1.42857143;
  border: 1px solid #e7eaec; border-radius: 12px 12px 0 0;
  color: #676a6c; font-weight: 600; background-color: #f9f9f9;
  text-decoration: none; /* BS5 sottolinea gli <a>: le tab BS3 (senza .nav-link) la mostravano */
}
.tabs-container .nav-tabs > li > a:hover,
.tabs-container .nav-tabs .nav-link:hover { background-color: #efefef; color: #333; }
/* tab attiva (azzurro come progetto_detail, niente underline generico) */
.tabs-container .nav-tabs > li.active > a,
.tabs-container .nav-tabs > li.active > a:hover,
.tabs-container .nav-tabs > li.active > a:focus,
.tabs-container .nav-tabs .nav-link.active,
.tabs-container .nav-tabs .nav-item.show .nav-link {
  cursor: default; background-color: #fff;
  border: 1px solid #e7eaec; border-bottom-color: transparent;
  color: #1ba7d8; box-shadow: none;
}
/* Sottolineatura animata sulle tab (hover + attiva), come i pulsanti del menu:
   resa con ::after (espansione 0->100%) col colore-menu del portale. */
.tabs-container .nav-tabs > li > a,
.tabs-container .nav-tabs .nav-link { position: relative; }
.tabs-container .nav-tabs > li > a::after,
.tabs-container .nav-tabs .nav-link::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px;
  background: var(--bh-menu-border); transition: width .25s ease, left .25s ease;
}
.tabs-container .nav-tabs > li > a:hover::after,
.tabs-container .nav-tabs .nav-link:hover::after,
.tabs-container .nav-tabs > li.active > a::after,
.tabs-container .nav-tabs .nav-link.active::after { width: 100%; left: 0; }

/* contenuto agganciato al pannello */
.tabs-container .tab-content {
  background: #fff; border: 1px solid #e7eaec; border-top: none;
  padding: 20px; border-radius: 0 0 12px 12px;
}
.tabs-container .panel-body { padding: 15px; border: none; }

/* ---- Welcome hero (layout 6 di model.php): card centrato per la home ---- */
.welcome-hero {
  width: 100%; max-width: none; margin: 0 auto; text-align: center;
  background: #fff; border: 1px solid var(--bh-border, #e7eaec);
  border-radius: 18px; box-shadow: 0 22px 55px -30px rgba(15, 23, 42, .38);
  padding: 44px 34px 38px; position: relative; overflow: hidden;
}
/* accento superiore parametrico (colore primario del tema) */
.welcome-hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg,
    var(--bh-primary), color-mix(in srgb, var(--bh-primary) 35%, #ffffff));
}
.welcome-hero .welcome-title { margin-top: 0; margin-bottom: 14px; }
.welcome-hero .welcome-intro { color: var(--bh-title-text); line-height: 1.5; font-weight: 500; }
/* media (immagine o video) SOTTO il box hero: piena larghezza */
.welcome-media-wrap { width: 100%; max-width: none; margin: 18px auto 0; }
.welcome-media-wrap .welcome-media { margin: 14px 0; }
.welcome-media-wrap .welcome-media img,
.welcome-media-wrap .welcome-media video {
  width: 100%; height: auto; display: block;
  border-radius: 12px; box-shadow: 0 14px 34px -20px rgba(15, 23, 42, .4);
}
/* i pulsanti (dal token [[PARTECIPA]]) ereditano lo stile del tema */
.welcome-hero .btn {
  margin: 6px; border-radius: var(--bh-btn-radius, 8px);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .35);
}
.welcome-hero .btn:hover { transform: translateY(-1px); }
@media (max-width: 575.98px) { .welcome-hero { padding: 30px 18px 26px; border-radius: 14px; } }

/* ---- Embed video esterno (token [[VIDEO:...]]): iframe responsive 16:9 ---- */
.bh-video-embed {
  position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */
  margin: 14px 0; border-radius: 12px; overflow: hidden;
  box-shadow: 0 14px 34px -20px rgba(15, 23, 42, .4);
}
.bh-video-embed iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* ---- Utility legacy BS3 ancora nel markup (bridge) ---- */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }

/* ============================================================================
   LAYOUT TOP-NAVIGATION BS5 — sostituisce il layout Inspinia (BS3) per le pagine
   "piene" (menu_top con menu completo + #wrapper/#page-wrapper/.ibox).
   Caricato SOLO sulle pagine gia' BS5 (questo file) -> non tocca le pagine BS3.
   ============================================================================ */

/* --- Navbar fissa, piena larghezza, su una riga --- */
.navbar.navbar-static-top {
  position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1030;
  display: flex; align-items: stretch; padding: 0 14px;
}
/* il wrapper .row attorno alla navbar non deve creare margini negativi */
.row.border-bottom > .navbar.navbar-static-top { margin: 0; }
.navbar .navbar-header { display: flex; align-items: center; float: none; height: auto; }
.navbar .navbar-brand { display: flex; align-items: center; height: auto; padding: 0 14px 0 0; }
.navbar .navbar-collapse { display: flex !important; flex: 1 1 auto; align-items: stretch; padding: 0; }

/* liste orizzontali con spaziatura (la causa del "menu mushed"/accavallato era
   Inspinia: float:left + display:block. Forziamo flex con !important). */
.navbar .navbar-nav, .navbar .nav.navbar-nav {
  display: flex !important; flex-direction: row !important; align-items: stretch;
  gap: 0; margin: 0 !important; padding: 0; list-style: none; float: none !important;
  width: auto !important;
}
.navbar .navbar-nav.pull-right, .navbar .nav.pull-right { margin-left: auto !important; }
.navbar .navbar-nav > li {
  list-style: none; position: relative; display: flex !important;
  float: none !important; flex: 0 0 auto;
}
.navbar .navbar-nav > li > a {
  display: flex !important; align-items: center; padding: 0 15px !important;
  color: inherit; text-decoration: none; white-space: nowrap;
  font-weight: 500; border: 0; background: transparent; height: auto; line-height: normal;
  transition: background .12s ease, color .12s ease;
}
/* neutralizza il margin-top inline degli inner <div> nelle voci */
.navbar .navbar-nav > li > a > div { margin: 0 !important; display: flex; align-items: center; gap: 7px; }
.navbar .navbar-nav > li > a .nav-label { font-weight: 500; }
/* caret: di default nascosti (lo span BS3 e' vuoto). Sulle voci TOP con sottomenu
   (es. Admin) lo mostriamo come freccia in giu' FontAwesome. */
.navbar .caret { display: none; }
.navbar .navbar-nav > li.dropdown > a .caret {
  display: inline-block; width: auto; height: auto; border: 0; margin-left: 6px;
  font-family: "FontAwesome"; font-size: 11px; line-height: 1; opacity: .6; vertical-align: middle;
}
.navbar .navbar-nav > li.dropdown > a .caret::before { content: "\f107"; } /* angle-down */

/* MENU MODERNO (INDICATORE A LINEA / option B): niente sfondo pieno; sotto la voce
   una sottile barra brand arrotondata che cresce dal centro su hover ed e' piena su
   attivo. Stile minimal/SaaS (Linear/Vercel). Tutto parametrico (--bh-primary). */
.navbar .navbar-nav:not(.pull-right) > li > a {
  position: relative; align-self: center; margin: 0 4px; padding: 6px 8px !important;
  border-radius: 8px; line-height: 1.2;
  transition: color .18s ease, background .18s ease;
}
/* hover: solo un velo leggerissimo, niente pill */
.navbar .navbar-nav:not(.pull-right) > li > a:hover {
  background: color-mix(in srgb, var(--bh-primary) 6%, transparent);
  color: var(--bh-primary);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.navbar .navbar-nav:not(.pull-right) > li.active > a,
.navbar .navbar-nav:not(.pull-right) > li.dropdown.active > a {
  background: transparent !important; color: var(--bh-primary) !important; font-weight: 600;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
/* la barretta: sovrascrive sia il vecchio content:none sia la sottolineatura di
   style.php (specificita' .top-navigation + !important). */
.top-navigation .navbar-nav:not(.pull-right) > li > a::after,
.navbar .navbar-nav:not(.pull-right) > li > a::after {
  content: "" !important;
  position: absolute !important; left: 50% !important; right: auto !important; bottom: 2px !important;
  width: 0 !important; height: 2.5px !important; border-radius: 3px !important;
  background: var(--bh-primary) !important; background-color: var(--bh-primary) !important;
  transform: translateX(-50%) !important; transition: width .22s ease !important;
}
.top-navigation .navbar-nav:not(.pull-right) > li > a:hover::after,
.navbar .navbar-nav:not(.pull-right) > li > a:hover::after,
.top-navigation .navbar-nav:not(.pull-right) > li.active > a::after,
.navbar .navbar-nav:not(.pull-right) > li.active > a::after,
.navbar .navbar-nav:not(.pull-right) > li.dropdown.active > a::after {
  width: calc(100% - 16px) !important; left: 50% !important;
}
/* micro-ombra in basso alla barra, look "sticky" moderno */
.navbar.navbar-static-top { box-shadow: 0 1px 0 var(--bh-border), 0 6px 18px -14px rgba(0,0,0,.25); }
/* nessun underline nei link della navbar (BS5 ripristinava il default <a>) */
.navbar a, .navbar a:hover, .navbar a:focus { text-decoration: none !important; }

/* icone azione a destra (profilo/logout): icon-button circolari moderni con hover */
.navbar .navbar-nav.pull-right { gap: 4px; }
.navbar .navbar-nav.pull-right > * { display: flex; align-items: center; }
.navbar .navbar-nav.pull-right > a {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  padding: 0 !important; margin: 0 2px; line-height: 1;
  color: var(--bh-body-text); transition: background .14s ease;
}
.navbar .navbar-nav.pull-right > a:hover {
  background: color-mix(in srgb, var(--bh-primary) 12%, transparent);
}
.navbar .navbar-nav.pull-right > a i { font-size: 19px !important; line-height: 1; }
.navbar .navbar-nav.pull-right > a img { width: 30px !important; height: 30px !important; }

/* --- Contenuto / layout pagina --- */
#wrapper, #page-wrapper { width: 100%; min-height: 1px; }
.wrapper-content { padding: 20px 16px; }
.page-heading { background: #fff; border-bottom: 1px solid var(--bh-border); padding: 16px 18px; }
/* MOBILE: Inspinia mette padding:40px sul wrapper in top-navigation, che su telefono
   mangia la larghezza laterale. Lo riduco a 12px (stessa specificita' 0,3,0 del tema
   legacy, quindi vince per ordine di cascata). Centralizzato: vale per tutte le pagine
   top-navigation (model.php/content, social, photowall, ecc.). Il page-heading/titolo
   resta invariato. Le pagine con override inline piu' stretto (es. registra.php 8px)
   restano tali. */
@media (max-width: 767px) {
  .top-navigation .wrapper.wrapper-content { padding-left: 12px; padding-right: 12px; }
}

/* Bridge offset BS3 -> BS5 (il markup usa ancora .col-*-offset-N) */
.col-xs-offset-1,.col-sm-offset-1,.col-md-offset-1,.col-lg-offset-1 { margin-left: 8.33333%; }
.col-xs-offset-2,.col-sm-offset-2,.col-md-offset-2,.col-lg-offset-2 { margin-left: 16.66667%; }
.col-xs-offset-3,.col-sm-offset-3,.col-md-offset-3,.col-lg-offset-3 { margin-left: 25%; }
.col-xs-offset-4,.col-sm-offset-4,.col-md-offset-4,.col-lg-offset-4 { margin-left: 33.33333%; }

/* .ibox (Inspinia) reso come card BS5 */
.ibox { background: #fff; border: 1px solid var(--bh-border); border-radius: 12px;
  box-shadow: 0 6px 20px -12px rgba(15,23,42,.18); margin-bottom: 20px; }
.ibox-title { padding: 14px 16px; border-bottom: 1px solid var(--bh-border); }
.ibox-content { padding: 16px; border: 0; }

/* ============================================================================
   MOD-4 plugin: ponte GLYPHICON -> FontAwesome per il widget datetimepicker2.
   BS5 ha rimosso le glyphicons; il picker (Eonasdan, self-contained con moment.js)
   le usa per le frecce/icone. FontAwesome e' gia' caricato centralmente, quindi
   rimappiamo SOLO le icone usate dentro il widget. Nessuna modifica agli init.
   ============================================================================ */
.bootstrap-datetimepicker-widget .glyphicon {
  font-family: "FontAwesome" !important; font-style: normal; font-weight: normal;
  line-height: 1; -webkit-font-smoothing: antialiased;
}
.bootstrap-datetimepicker-widget .glyphicon-chevron-left:before  { content: "\f053"; }
.bootstrap-datetimepicker-widget .glyphicon-chevron-right:before { content: "\f054"; }
.bootstrap-datetimepicker-widget .glyphicon-chevron-up:before    { content: "\f077"; }
.bootstrap-datetimepicker-widget .glyphicon-chevron-down:before  { content: "\f078"; }
.bootstrap-datetimepicker-widget .glyphicon-calendar:before      { content: "\f073"; }
.bootstrap-datetimepicker-widget .glyphicon-time:before          { content: "\f017"; }
.bootstrap-datetimepicker-widget .glyphicon-screenshot:before    { content: "\f05b"; }
.bootstrap-datetimepicker-widget .glyphicon-trash:before         { content: "\f1f8"; }
/* l'input-group addon che apre il picker (icona calendario) */
.input-group.date .input-group-addon .glyphicon-calendar:before,
.input-group.date .input-group-text .glyphicon-calendar:before { content: "\f073"; }

/* compat BS3->BS5: .input-group-addon (rimosso in BS5) reso come .input-group-text */
.input-group-addon {
  display: flex; align-items: center; padding: .375rem .75rem;
  font-size: 14px; color: #495057; text-align: center; white-space: nowrap;
  background-color: #eef1f3; border: 1px solid #d7dde2;
  border-radius: var(--bh-field-radius);
}
.input-group > .input-group-addon:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .input-group-addon:not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ============================================================================
   MODALI: layout BS5 robusto sopra i residui Inspinia (style.css) + bottone
   close BS3. I modali legacy vengono riportati sotto <body> dal ponte JS.
   ============================================================================ */
.modal-dialog { margin: 1.75rem auto !important; }              /* centrato */
.modal-content {
  border: 1px solid var(--bh-border, #e7eaec);
  border-radius: 14px;
  box-shadow: 0 24px 60px -15px rgba(15, 23, 42, .45);
}
/* annulla le forzature Inspinia .inmodal (header centrato/padding 30px, body grigio) */
.modal.inmodal .modal-header { text-align: left; padding: 9px 18px; }
.modal.inmodal .modal-body   { background: #fff; }
.modal-header, .modal-footer { border-color: var(--bh-border, #e7eaec); }
/* bottone close BS3 (<button class="close">) non stilizzato in BS5.
   Nel markup legacy sta PRIMA del titolo: lo ancoriamo in alto a destra. */
.modal .modal-header { position: relative; }
.modal .modal-header .close {
  position: absolute; top: 10px; right: 14px; z-index: 2;
  padding: 0 4px; margin: 0; background: transparent; border: 0;
  font-size: 24px; line-height: 1; font-weight: 400; color: #6b7680;
  opacity: .6; cursor: pointer;
}
.modal .modal-header .close:hover { opacity: 1; }
/* l'animazione animate.css non deve lasciare il contenuto fuori schermo se non parte */
.modal-content.animated { animation-name: none !important; transform: none !important; opacity: 1 !important; }
/* GLOBALE: nessuna modal supera mai lo schermo -> corpo limitato + scroll interno,
   cosi' restano dentro la finestra con margine sopra/sotto. Esclude le modal che
   gestiscono l'altezza da se' tramite style inline (height/max-height), es. il
   builder report di anagrafica (#popup3) e le impostazioni Engagement (cap proprio). */
.modal-body:not([style*="height"]) { max-height: calc(100vh - 230px); overflow-y: auto; }

/* ============================================================================
   DIMENSIONE/FONT COERENTI per TUTTE le modali del portale (regola CENTRALE).
   Due famiglie: modali Bootstrap (.modal) e popup SweetAlert2 (.swal2-*, usati da
   Swal.fire in ~48 pagine). I default di SweetAlert2 sono enormi (titolo/bottoni):
   qui li riporto alla stessa scala del resto del sito. SweetAlert2 inietta i suoi
   stili via JS -> servono !important. Una modal con esigenze proprie puo' sempre
   sovrascrivere con uno style inline piu' specifico.
   ============================================================================ */
/* Modali Bootstrap: titolo/corpo uniformi */
.modal-title { font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.modal-body  { font-size: .95rem; }

/* SweetAlert2: si lavora SOLO sui font (titolo/bottoni/campi). NIENTE width forzata:
   la modal resta larga in modo DINAMICO sul contenuto (default swal2 o il width passato
   a Swal.fire), cosi' non taglia i testi. max-width solo come guard su schermi piccoli. */
.swal2-popup { max-width: 92vw !important; border-radius: 14px !important; }
.swal2-title { font-size: 1.25rem !important; font-weight: 700 !important; line-height: 1.25 !important; padding: .2em 0 .35em !important; }
.swal2-html-container { font-size: .95rem !important; line-height: 1.45 !important; margin: .4em 0 0 !important; }
.swal2-actions { margin-top: 1.1em !important; gap: .5rem !important; }
.swal2-styled { font-size: .9rem !important; font-weight: 600 !important; padding: .5em 1.2em !important; border-radius: 8px !important; box-shadow: none !important; margin: 0 !important; }
.swal2-icon { width: 3em !important; height: 3em !important; margin: .6em auto .2em !important; }
.swal2-icon .swal2-icon-content { font-size: 1.7em !important; }
/* font dei campi/select DENTRO al popup (sia quelli nativi swal2 sia quelli custom
   inseriti via html:) -> il browser non eredita il font sui form control, quindi
   li normalizzo esplicitamente, altrimenti restano grandi. */
.swal2-input, .swal2-select, .swal2-textarea, .swal2-file,
.swal2-html-container select, .swal2-html-container input, .swal2-html-container textarea { font-size: .9rem !important; }
.swal2-html-container label { font-size: .92rem !important; }
.swal2-close { font-size: 1.8em !important; }
.swal2-validation-message { font-size: .85rem !important; }

/* ============================================================================
   SWAP IMMAGINE DESKTOP / MOBILE (banner content). La versione mobile e' una
   IMMAGINE diversa (verticale), non un resize: mostro l'una o l'altra in base
   alla larghezza schermo. Usato in content_render_body.php (WELCOME) sui media
   con flag IS_MOBILE. Centrale -> riusabile ovunque servano coppie desk/mobile.
   ============================================================================ */
.bh-mobile { display: none !important; }
@media (max-width: 767px) {
  .bh-desktop { display: none !important; }
  .bh-mobile  { display: block !important; }
}