/* ============================================================
 * FIGMA OVERLAY — LVF Gestionale
 * Caricato DOPO style.bundle.css (Metronic) e app/assets/css/style.css.
 * Applica look-and-feel "Figma / Linear / Framer" sovrascrivendo
 * selettori Metronic / Bootstrap principali.
 *
 * Scala tipografica: variante "gestionale-readable" (bumpata da 11/12 a 13/14)
 * perché il gestionale è usato 8h/giorno.
 *
 * Attivazione: ?theme=figma → cookie 30gg → caricamento condizionale in head.php
 * Disattivazione: ?theme=default
 * ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root[data-figma-theme],
html[data-figma-theme] {
  /* Backgrounds */
  --fg-bg-base:        #FFFFFF;
  --fg-bg-panel:       #F5F5F5;
  --fg-bg-surface:     #E5E5E5;
  --fg-bg-hover:       rgba(0, 0, 0, 0.04);
  --fg-bg-active:      rgba(0, 0, 0, 0.06);

  /* Borders */
  --fg-border:         rgba(0, 0, 0, 0.08);
  --fg-border-strong:  rgba(0, 0, 0, 0.14);

  /* Text — contrasti alzati per gestionale */
  --fg-text:           #1E1E1E;
  --fg-text-secondary: #525252;
  --fg-text-tertiary:  #757575;
  --fg-text-disabled:  #B3B3B3;

  /* Accent Figma blu */
  --fg-accent:         #0D99FF;
  --fg-accent-hover:   #007BE5;
  --fg-accent-active:  #0066CC;
  --fg-accent-bg:      rgba(13, 153, 255, 0.10);
  --fg-selection:      rgba(13, 153, 255, 0.15);

  /* Semantici */
  --fg-success:        #14AE5C;
  --fg-success-bg:     rgba(20, 174, 92, 0.10);
  --fg-warning:        #B88800;
  --fg-warning-bg:     rgba(255, 205, 41, 0.18);
  --fg-danger:         #D9342B;
  --fg-danger-bg:      rgba(217, 52, 43, 0.10);

  /* Radius */
  --fg-r-tight:        2px;
  --fg-r:              4px;
  --fg-r-panel:        6px;
  --fg-r-modal:        8px;

  /* Shadow — discreti */
  --fg-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.04);
  --fg-shadow:         0 2px 8px rgba(0, 0, 0, 0.08);
  --fg-shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.12);

  /* Tipografia — scala gestionale-readable */
  --fg-font:           'Inter', 'Inter var', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- 2. BASE + TIPOGRAFIA ---------- */
html[data-figma-theme],
html[data-figma-theme] body {
  font-family: var(--fg-font) !important;
  font-size: 14px !important;
  line-height: 20px;
  color: var(--fg-text) !important;
  background-color: var(--fg-bg-panel) !important;
  /* NOTA: usato background-color (non background) per non sovrascrivere
     l'immagine di sfondo eventualmente impostata dal login. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Login page: preserva esplicitamente il background image */
html[data-figma-theme] body#kt_body.bgi-size-cover {
  background-color: transparent !important;
}
/* NOTA: rimosso il selettore universale `html[data-figma-theme] *` che
   forzava Inter ovunque e rompeva i font icon. Inter è già il font di base
   di Metronic (via --bs-font-sans-serif), quindi l'ereditarietà da body
   è sufficiente.

   Riasserzioni esplicite (difensive) per i font icon — usano nomi font
   specifici e specificità (0,1,1) > regola body (0,0,1). */
html[data-figma-theme] .ki-duotone,
html[data-figma-theme] .ki-duotone .path1,
html[data-figma-theme] .ki-duotone .path2,
html[data-figma-theme] .ki-duotone .path3,
html[data-figma-theme] .ki-duotone .path4,
html[data-figma-theme] .ki-duotone .path5 {
  font-family: keenicons-duotone !important;
}
html[data-figma-theme] .ki-outline {
  font-family: keenicons-outline !important;
}
html[data-figma-theme] .ki-solid {
  font-family: keenicons-solid !important;
}
html[data-figma-theme] .bi,
html[data-figma-theme] [class*="bi-"]::before {
  font-family: "bootstrap-icons" !important;
}
html[data-figma-theme] .fa,
html[data-figma-theme] .fas,
html[data-figma-theme] .far,
html[data-figma-theme] .fal,
html[data-figma-theme] .fad {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}
html[data-figma-theme] .fab {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
}
html[data-figma-theme] .material-icons {
  font-family: "Material Icons" !important;
}
html[data-figma-theme] .material-symbols-outlined {
  font-family: "Material Symbols Outlined" !important;
}

html[data-figma-theme] h1, html[data-figma-theme] .h1 { font-size: 22px !important; font-weight: 600 !important; line-height: 30px !important; letter-spacing: -0.01em; }
html[data-figma-theme] h2, html[data-figma-theme] .h2 { font-size: 17px !important; font-weight: 600 !important; line-height: 24px !important; letter-spacing: -0.005em; }
html[data-figma-theme] h3, html[data-figma-theme] .h3 { font-size: 15px !important; font-weight: 600 !important; line-height: 22px !important; }
html[data-figma-theme] h4, html[data-figma-theme] .h4,
html[data-figma-theme] h5, html[data-figma-theme] .h5,
html[data-figma-theme] h6, html[data-figma-theme] .h6 { font-size: 14px !important; font-weight: 600 !important; }
html[data-figma-theme] .fs-1 { font-size: 22px !important; }
html[data-figma-theme] .fs-2 { font-size: 17px !important; }
html[data-figma-theme] .fs-3 { font-size: 15px !important; }
html[data-figma-theme] .fs-4 { font-size: 14px !important; }
html[data-figma-theme] .fs-5 { font-size: 13px !important; }
html[data-figma-theme] .fs-6 { font-size: 13px !important; }
html[data-figma-theme] .fs-7 { font-size: 12px !important; }
html[data-figma-theme] .fs-8 { font-size: 12px !important; }

/* ---------- 3. SIDEBAR (DARK — nero su scritte bianche) ---------- */
:root[data-figma-theme] {
  --fg-sidebar-bg:         #1E1E1E;
  --fg-sidebar-text:       #FFFFFF;
  --fg-sidebar-muted:      #B3B3B3;
  --fg-sidebar-dim:        #757575;
  --fg-sidebar-border:     rgba(255, 255, 255, 0.08);
  --fg-sidebar-hover-bg:   rgba(255, 255, 255, 0.08);
  --fg-sidebar-active-bg:  rgba(13, 153, 255, 0.20);
}

html[data-figma-theme] #kt_app_sidebar,
html[data-figma-theme] .app-sidebar {
  background: var(--fg-sidebar-bg) !important;
  border-right: 1px solid var(--fg-sidebar-border) !important;
  box-shadow: none !important;
}
html[data-figma-theme] .app-sidebar-logo {
  border-bottom: 1px solid var(--fg-sidebar-border) !important;
}
html[data-figma-theme] #kt_app_sidebar_toggle {
  background: var(--fg-sidebar-bg) !important;
  border: 1px solid var(--fg-sidebar-border) !important;
  box-shadow: var(--fg-shadow-sm) !important;
  color: var(--fg-sidebar-muted) !important;
}
html[data-figma-theme] #kt_app_sidebar_toggle:hover {
  background: var(--fg-sidebar-hover-bg) !important;
  color: var(--fg-accent) !important;
}

/* Sidebar menu items */
html[data-figma-theme] .app-sidebar .menu-item {
  padding: 0 !important;
  margin-bottom: 4px !important;
}
/* Spazio extra fra blocchi (es. Dashboards → SEZIONI → Rubrica Clienti ...) */
html[data-figma-theme] .app-sidebar .menu-item.menu-accordion {
  margin-bottom: 6px !important;
}
/* Sottovoci dentro accordion aperto: respiro tra di loro */
html[data-figma-theme] .app-sidebar .menu-sub .menu-item {
  margin-bottom: 2px !important;
}
html[data-figma-theme] .app-sidebar .menu-link {
  padding: 8px 12px !important;
  border-radius: var(--fg-r) !important;
  color: var(--fg-sidebar-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background 150ms ease-out, color 150ms ease-out !important;
}
html[data-figma-theme] .app-sidebar .menu-link:hover,
html[data-figma-theme] .app-sidebar .menu-item.hover > .menu-link {
  background: var(--fg-sidebar-hover-bg) !important;
  color: var(--fg-sidebar-text) !important;
}
html[data-figma-theme] .app-sidebar .menu-item.show > .menu-link,
html[data-figma-theme] .app-sidebar .menu-link.active {
  background: var(--fg-sidebar-active-bg) !important;
  color: #FFFFFF !important;
}
html[data-figma-theme] .app-sidebar .menu-title,
html[data-figma-theme] .app-sidebar .menu-custom-title {
  color: inherit !important;
  font-weight: 500 !important;
}
html[data-figma-theme] .app-sidebar .menu-heading {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--fg-sidebar-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 20px 12px 8px !important;
  margin-top: 8px !important;
  border-top: 1px solid var(--fg-sidebar-border) !important;
}
/* Il primo heading non ha bisogno del border-top */
html[data-figma-theme] .app-sidebar .menu-heading:first-of-type,
html[data-figma-theme] .app-sidebar .menu > .menu-item:first-child .menu-heading {
  border-top: none !important;
  margin-top: 0 !important;
}
html[data-figma-theme] .app-sidebar .menu-icon i {
  color: var(--fg-sidebar-muted) !important;
}
html[data-figma-theme] .app-sidebar .menu-item.show > .menu-link .menu-icon i,
html[data-figma-theme] .app-sidebar .menu-link.active .menu-icon i {
  color: var(--fg-accent) !important;
}
html[data-figma-theme] .app-sidebar .menu-arrow {
  filter: invert(0.85);
}
html[data-figma-theme] .app-sidebar .bullet-dot {
  background-color: var(--fg-sidebar-muted) !important;
  width: 4px !important;
  height: 4px !important;
}
html[data-figma-theme] .app-sidebar .menu-item.show .bullet-dot {
  background-color: var(--fg-accent) !important;
}

/* Sidebar scrollbar webkit — discreta su dark */
html[data-figma-theme] .app-sidebar ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2px solid var(--fg-sidebar-bg) !important;
}
html[data-figma-theme] .app-sidebar ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* Sidebar footer — bottone lasciato a stile Bootstrap/Metronic per scelta utente */

/* ---------- 4. HEADER / TOPBAR ---------- */
html[data-figma-theme] #kt_app_header,
html[data-figma-theme] .app-header {
  background: var(--fg-bg-base) !important;
  border-bottom: 1px solid var(--fg-border) !important;
  box-shadow: none !important;
  min-height: 56px !important;
}
html[data-figma-theme] #kt_app_header_container {
  padding: 0 16px !important;
}
/* NOTA: .app-navbar .btn-icon NON viene più overridato — usa stile Metronic originale */

/* ---------- 5. CONTENT / TOOLBAR ---------- */
html[data-figma-theme] #kt_app_main {
  background: var(--fg-bg-panel) !important;
}
html[data-figma-theme] #kt_app_toolbar {
  background: transparent !important;
  border-bottom: 1px solid var(--fg-border) !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
html[data-figma-theme] .page-title {
  padding-top: 4px !important;
  padding-bottom: 2px !important;
}
html[data-figma-theme] .page-heading,
html[data-figma-theme] .page-title h1 {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--fg-text) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 2px !important;
}
/* Stacco minimo fra toolbar (titolo pagina) e card contenuto */
html[data-figma-theme] #kt_app_content {
  padding-top: 10px !important;
}
html[data-figma-theme] .breadcrumb {
  font-size: 12px !important;
}
html[data-figma-theme] .breadcrumb .text-muted,
html[data-figma-theme] .breadcrumb .breadcrumb-item {
  color: var(--fg-text-secondary) !important;
}

/* ---------- 6. CARDS ---------- */
html[data-figma-theme] .card {
  background: var(--fg-bg-base) !important;
  border: 1px solid var(--fg-border) !important;
  border-radius: var(--fg-r-panel) !important;
  box-shadow: none !important;
}
html[data-figma-theme] .card-flush {
  box-shadow: none !important;
}
html[data-figma-theme] .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--fg-border) !important;
  padding: 12px 16px !important;
  min-height: auto !important;
}
html[data-figma-theme] .card-title {
  margin: 0 !important;
}
html[data-figma-theme] .card-title h1,
html[data-figma-theme] .card-title h2,
html[data-figma-theme] .card-title h3,
html[data-figma-theme] .card-title .card-label {
  font-size: 17px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
html[data-figma-theme] .card-body {
  padding: 16px !important;
}
html[data-figma-theme] .card-footer {
  background: var(--fg-bg-panel) !important;
  border-top: 1px solid var(--fg-border) !important;
  padding: 12px 16px !important;
}

/* ---------- 7. BUTTONS ----------
 * RIMOSSO per scelta utente: i pulsanti mantengono lo stile Metronic/Bootstrap originale.
 * (Niente override su .btn, .btn-primary, .btn-secondary, .btn-light, .btn-success,
 *  .btn-danger, .btn-warning, .btn-icon, .btn-sm, .btn-lg, .button-custom-document)
 */

/* ---------- 8. FORMS ---------- */
html[data-figma-theme] .form-control,
html[data-figma-theme] .form-select,
html[data-figma-theme] .form-control.form-control-solid,
html[data-figma-theme] .form-select.form-select-solid {
  height: 40px !important;
  /* uso padding-block per non sovrascrivere ps-* / pe-* (es. ps-12 per icona search) */
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--fg-text) !important;
  background: var(--fg-bg-panel) !important;
  border: 1px solid transparent !important;
  border-radius: var(--fg-r) !important;
  box-shadow: none !important;
  transition: background 150ms ease-out, border-color 150ms ease-out !important;
}
/* Imposta padding orizzontale di default SOLO se l'input non ha utility ps-*/pe-* */
html[data-figma-theme] .form-control:not([class*="ps-"]):not([class*="pe-"]):not([class*="px-"]),
html[data-figma-theme] .form-select:not([class*="ps-"]):not([class*="pe-"]):not([class*="px-"]) {
  padding-left: 14px !important;
  padding-right: 14px !important;
}
html[data-figma-theme] .form-control:hover,
html[data-figma-theme] .form-select:hover {
  background: var(--fg-bg-surface) !important;
}
html[data-figma-theme] .form-control:focus,
html[data-figma-theme] .form-select:focus {
  background: var(--fg-bg-base) !important;
  border-color: var(--fg-accent) !important;
  box-shadow: 0 0 0 3px var(--fg-accent-bg) !important;
  outline: none !important;
}
html[data-figma-theme] textarea.form-control {
  height: auto !important;
  min-height: 96px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
html[data-figma-theme] .form-control-lg,
html[data-figma-theme] .form-select-lg {
  height: 44px !important;
  font-size: 16px !important;
}
html[data-figma-theme] .form-control-sm,
html[data-figma-theme] .form-select-sm {
  height: 34px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-size: 14px !important;
}
html[data-figma-theme] .form-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--fg-text) !important;
  margin-bottom: 6px !important;
}
html[data-figma-theme] .form-check-input {
  border: 1px solid var(--fg-border-strong) !important;
  border-radius: var(--fg-r-tight) !important;
  width: 18px !important;
  height: 18px !important;
}
html[data-figma-theme] .form-check-input:checked {
  background-color: var(--fg-accent) !important;
  border-color: var(--fg-accent) !important;
}
html[data-figma-theme] .form-check-label {
  font-size: 14px !important;
  color: var(--fg-text) !important;
  margin-left: 4px;
}
html[data-figma-theme] .form-switch .form-check-input {
  width: 36px !important;
  height: 20px !important;
  border-radius: 12px !important;
}
html[data-figma-theme] .form-text {
  font-size: 13px !important;
  color: var(--fg-text-secondary) !important;
}

/* ---------- 9. TABLES ---------- */
html[data-figma-theme] .table {
  --bs-table-bg: transparent !important;
  color: var(--fg-text) !important;
  margin-bottom: 0 !important;
}
html[data-figma-theme] .table thead th,
html[data-figma-theme] .table th {
  background: var(--fg-bg-panel) !important;
  color: var(--fg-text-tertiary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--fg-border) !important;
  vertical-align: middle !important;
}
html[data-figma-theme] .table tbody td {
  padding: 10px 12px !important;
  font-size: 14px !important;
  color: var(--fg-text) !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--fg-border) !important;
  background: transparent !important;
}
/* Override delle utility Metronic gy-* (gap verticale).
   Metronic applica border-spacing: 0 1.25rem sulla .table.gy-5, che crea
   uno spazio fra thead e tbody (e fra ogni riga). Lo rimuovo. */
html[data-figma-theme] .table.gy-3,
html[data-figma-theme] .table.gy-4,
html[data-figma-theme] .table.gy-5,
html[data-figma-theme] .table.gy-6,
html[data-figma-theme] .table.gy-7 {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}
html[data-figma-theme] .table.gy-3 thead th,
html[data-figma-theme] .table.gy-3 thead td,
html[data-figma-theme] .table.gy-4 thead th,
html[data-figma-theme] .table.gy-4 thead td,
html[data-figma-theme] .table.gy-5 thead th,
html[data-figma-theme] .table.gy-5 thead td,
html[data-figma-theme] .table.gy-6 thead th,
html[data-figma-theme] .table.gy-6 thead td,
html[data-figma-theme] .table.gy-7 thead th,
html[data-figma-theme] .table.gy-7 thead td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
html[data-figma-theme] .table.gy-3 tbody td,
html[data-figma-theme] .table.gy-4 tbody td,
html[data-figma-theme] .table.gy-5 tbody td,
html[data-figma-theme] .table.gy-6 tbody td,
html[data-figma-theme] .table.gy-7 tbody td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* DataTables 2.x con scrollX clona il <thead> in .dt-scroll-head e lascia
   un <thead><tr></tr></thead> VUOTO nella tabella dentro .dt-scroll-body.
   Quel tr vuoto ereditava il bg-panel del thead generando una banda grigia
   fra l'header e la prima riga dati. Lo allineamento colonne è gestito dal
   <colgroup>, quindi il thead vuoto può essere nascosto. */
html[data-figma-theme] .dt-scroll-body table.dataTable > thead,
html[data-figma-theme] .dt-scroll-body table.dataTable > thead > tr {
  display: none !important;
}
html[data-figma-theme] .table tbody tr {
  background: transparent !important;
  transition: background 150ms ease-out !important;
}
html[data-figma-theme] .table tbody tr:hover > td {
  background: var(--fg-bg-hover) !important;
}
/* Striping: prima riga (1ª) bianca, righe pari (2ª, 4ª, ...) leggermente grigie.
   Bootstrap usa var(--bs-table-striped-bg); DataTables aggiunge classi .odd/.even
   sulle <tr> direttamente — entrambi vengono neutralizzati esplicitamente. */
html[data-figma-theme] .table-striped {
  --bs-table-striped-bg: transparent !important;
}
html[data-figma-theme] .table.table-striped tbody tr:nth-of-type(odd),
html[data-figma-theme] .table.table-striped tbody tr:nth-of-type(odd) > td,
html[data-figma-theme] table.dataTable.stripe tbody tr.odd,
html[data-figma-theme] table.dataTable.display tbody tr.odd,
html[data-figma-theme] table.dataTable.stripe tbody tr.odd > td,
html[data-figma-theme] table.dataTable.display tbody tr.odd > td {
  background: transparent !important;
  background-color: transparent !important;
}
html[data-figma-theme] .table.table-striped tbody tr:nth-of-type(even) > td,
html[data-figma-theme] table.dataTable.stripe tbody tr.even > td,
html[data-figma-theme] table.dataTable.display tbody tr.even > td {
  background-color: rgba(0, 0, 0, 0.02) !important;
}
html[data-figma-theme] .table.table-striped tbody tr:hover > td,
html[data-figma-theme] table.dataTable tbody tr:hover > td {
  background-color: var(--fg-bg-hover) !important;
}
/* Override del verde fluo presente in style.css */
html[data-figma-theme] .table:not(.table-bordered).table-row-bordered tr {
  border-bottom-color: var(--fg-border) !important;
  background-color: transparent !important;
}
html[data-figma-theme] .table tbody tr:last-child td {
  border-bottom: none !important;
}

/* DataTables filters/info */
html[data-figma-theme] .dataTables_wrapper {
  font-size: 13px !important;
}
html[data-figma-theme] .dataTables_filter input,
html[data-figma-theme] .dataTables_length select {
  height: 28px !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  background: var(--fg-bg-panel) !important;
  border: 1px solid transparent !important;
  border-radius: var(--fg-r) !important;
  color: var(--fg-text) !important;
}
html[data-figma-theme] .dataTables_info {
  font-size: 12px !important;
  color: var(--fg-text-secondary) !important;
  padding-top: 12px !important;
}
/* NOTA: .paginate_button NON viene overridato — lascia stile Metronic standard */

/* ---------- 10. BADGES ---------- */
html[data-figma-theme] .badge {
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 3px 8px !important;
  border-radius: var(--fg-r-tight) !important;
  height: 20px;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px;
}
html[data-figma-theme] .badge-light-success,
html[data-figma-theme] .badge-success { background: var(--fg-success-bg) !important; color: var(--fg-success) !important; }
html[data-figma-theme] .badge-light-warning,
html[data-figma-theme] .badge-warning { background: var(--fg-warning-bg) !important; color: var(--fg-warning) !important; }
html[data-figma-theme] .badge-light-danger,
html[data-figma-theme] .badge-danger  { background: var(--fg-danger-bg)  !important; color: var(--fg-danger)  !important; }
html[data-figma-theme] .badge-light-primary,
html[data-figma-theme] .badge-primary { background: var(--fg-accent-bg)  !important; color: var(--fg-accent)  !important; }
html[data-figma-theme] .badge-light,
html[data-figma-theme] .badge-secondary { background: var(--fg-bg-panel) !important; color: var(--fg-text-secondary) !important; }

/* ---------- 11. MODALS ---------- */
html[data-figma-theme] .modal-content {
  background: var(--fg-bg-base) !important;
  border: 1px solid var(--fg-border) !important;
  border-radius: var(--fg-r-modal) !important;
  box-shadow: var(--fg-shadow-lg) !important;
}
html[data-figma-theme] .modal-header {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--fg-border) !important;
}
html[data-figma-theme] .modal-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--fg-text) !important;
}
html[data-figma-theme] .modal-body { padding: 18px !important; }
html[data-figma-theme] .modal-footer {
  padding: 12px 18px !important;
  border-top: 1px solid var(--fg-border) !important;
  background: var(--fg-bg-panel) !important;
  gap: 6px;
}
html[data-figma-theme] .modal-backdrop.show { opacity: 0.4 !important; }

/* ---------- 12. DROPDOWN / MENU ---------- */
html[data-figma-theme] .menu.menu-sub-dropdown,
html[data-figma-theme] .dropdown-menu {
  background: var(--fg-bg-base) !important;
  border: 1px solid var(--fg-border) !important;
  border-radius: var(--fg-r-panel) !important;
  box-shadow: var(--fg-shadow) !important;
  /* NIENTE override del padding qui: Metronic usa utility p-7/py-4/p-3 ecc.
     sui suoi dropdown (header search, user menu, theme menu) e quel respiro
     va preservato. */
}
html[data-figma-theme] .menu.menu-sub-dropdown .menu-link,
html[data-figma-theme] .dropdown-item {
  font-size: 13px !important;
  color: var(--fg-text) !important;
  border-radius: var(--fg-r) !important;
}
html[data-figma-theme] .menu.menu-sub-dropdown .menu-link:hover,
html[data-figma-theme] .dropdown-item:hover {
  background: var(--fg-bg-hover) !important;
  color: var(--fg-text) !important;
}

/* ---------- 13. SEPARATORS, SYMBOLS ---------- */
html[data-figma-theme] .separator {
  border-color: var(--fg-border) !important;
}
html[data-figma-theme] .symbol > img {
  border-radius: var(--fg-r) !important;
}

/* ---------- 14. SELECT2 (plugin) ---------- */
html[data-figma-theme] .select2-container--bootstrap5 .select2-selection {
  height: 40px !important;
  padding: 8px 14px !important;
  background: var(--fg-bg-panel) !important;
  border: 1px solid transparent !important;
  border-radius: var(--fg-r) !important;
  font-size: 15px !important;
}
html[data-figma-theme] .select2-container--bootstrap5 .select2-selection:hover {
  background: var(--fg-bg-surface) !important;
}
html[data-figma-theme] .select2-container--bootstrap5.select2-container--focus .select2-selection {
  background: var(--fg-bg-base) !important;
  border-color: var(--fg-accent) !important;
  box-shadow: 0 0 0 3px var(--fg-accent-bg) !important;
}
html[data-figma-theme] .select2-dropdown {
  background: var(--fg-bg-base) !important;
  border: 1px solid var(--fg-border) !important;
  border-radius: var(--fg-r-panel) !important;
  box-shadow: var(--fg-shadow) !important;
}
html[data-figma-theme] .select2-results__option {
  padding: 6px 10px !important;
  font-size: 13px !important;
}
html[data-figma-theme] .select2-results__option--highlighted {
  background: var(--fg-bg-hover) !important;
  color: var(--fg-text) !important;
}
html[data-figma-theme] .select2-results__option[aria-selected=true] {
  background: var(--fg-selection) !important;
  color: var(--fg-accent) !important;
}

/* ---------- 15. SCROLLBAR (webkit) ---------- */
html[data-figma-theme] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-figma-theme] ::-webkit-scrollbar-track { background: transparent; }
html[data-figma-theme] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 10px;
  border: 2px solid var(--fg-bg-panel);
}
html[data-figma-theme] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* ---------- 16. FOCUS RING universale ---------- */
html[data-figma-theme] *:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--fg-accent) !important;
}

/* ---------- 17. UTILITY OVERRIDES Bootstrap ---------- */
html[data-figma-theme] .text-primary  { color: var(--fg-accent) !important; }
html[data-figma-theme] .text-success  { color: var(--fg-success) !important; }
html[data-figma-theme] .text-danger   { color: var(--fg-danger) !important; }
html[data-figma-theme] .text-warning  { color: var(--fg-warning) !important; }
html[data-figma-theme] .text-muted    { color: var(--fg-text-secondary) !important; }
html[data-figma-theme] .text-gray-900 { color: var(--fg-text) !important; }
html[data-figma-theme] .text-gray-800 { color: var(--fg-text) !important; }
html[data-figma-theme] .text-gray-700 { color: var(--fg-text-secondary) !important; }
html[data-figma-theme] .text-gray-600 { color: var(--fg-text-secondary) !important; }
html[data-figma-theme] .text-gray-500 { color: var(--fg-text-tertiary) !important; }
html[data-figma-theme] .text-hover-primary:hover { color: var(--fg-accent) !important; }

html[data-figma-theme] .bg-primary    { background-color: var(--fg-accent) !important; }
html[data-figma-theme] .bg-success    { background-color: var(--fg-success) !important; }
html[data-figma-theme] .bg-light      { background-color: var(--fg-bg-panel) !important; }
html[data-figma-theme] .bg-light-primary { background-color: var(--fg-accent-bg) !important; }

/* Anti-pattern hardening: rimuovi gradienti residui sui bg utility (NON sui .btn-*) */
html[data-figma-theme] .bg-primary,
html[data-figma-theme] .bg-success {
  background-image: none !important;
}

/* ---------- 18. THEME SWITCH BANNER (info utente) ---------- */
.figma-theme-banner {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  background: #1E1E1E;
  color: #fff;
  font: 500 12px/16px 'Inter', sans-serif;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.figma-theme-banner a {
  color: #0D99FF;
  text-decoration: none;
  margin-left: 4px;
}
.figma-theme-banner a:hover { text-decoration: underline; }