/* =============================================================
   custom.css - sm2care (sm / Metronic)
   Classi utility generiche del progetto.
   Le variabili CSS e lo stile del tema vengono da style.bundle.css
   ============================================================= */

/* ---- Colori testo ---- */
.text-bold         { font-weight: bold !important; }
.text-giallo       { color: #FFC000 !important; }
.text-custom-green { color: var(--brand-success) !important; }
.text-purple       { color: #6f42c1 !important; }
.custom-blue       { color: var(--brand-primary); }
.custom-gray       { color: #868e96 !important; }
.custom-green      { color: var(--brand-success) !important; }
.icon-danger       { color: #dc3545 !important; }
.icon-white        { color: #fff !important; }
.force-svg-white   { filter: brightness(0) invert(1); }

/* ---- Sfondi ---- */
.bg-white { background-color: #fff !important; }

/* ---- Bordi ---- */
.border-bottom-0 { border-bottom: 0 !important; }
.sm-br-white     { border-right: 1px solid white !important; }
.sm-bl-white     { border-left: 1px solid white !important; }
.sm-bb-1         { border-bottom: 1px; }

/* ---- Border radius tabelle (legacy) ---- */
.sm-btl-20 { border-top-left-radius: 20px !important; border-bottom: 1px; }
.sm-btr-20 { border-top-right-radius: 20px !important; border-bottom: 1px; }

/* ---- Bottoni custom ---- */
.btn-custom-blue { background: var(--brand-primary); border-color: var(--brand-primary); color: white; }
.btn-custom-blue:hover,
.btn-custom-blue:focus,
.btn-custom-blue:active { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); color: white; }

.btn-custom-gray { background: #6c757d; border-color: #6c757d; color: white; }
.btn-custom-gray:hover,
.btn-custom-gray:focus,
.btn-custom-gray:active { background: #5a6268; border-color: #5a6268; color: white; }

.btn-custom-green { background: var(--brand-success); border-color: var(--brand-success); color: white; }
.btn-custom-green:hover,
.btn-custom-green:focus,
.btn-custom-green:active { background: var(--brand-success); border-color: var(--brand-success); color: white; }

.btn-custom-ocra { background: #c3a20e; border-color: #c3a20e; color: white; }
.btn-custom-ocra:hover,
.btn-custom-ocra:focus,
.btn-custom-ocra:active { background: #a17f0b; border-color: #a17f0b; color: white; }

.btn-custom-green-ossola { background: var(--brand-success); border-color: var(--brand-success); color: white; }
.btn-custom-green-ossola:hover,
.btn-custom-green-ossola:focus,
.btn-custom-green-ossola:active { background: var(--brand-success); border-color: var(--brand-success); color: white; }

/* ---- Outline bottoni custom ---- */
.btn-outline-custom-blue  { color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-outline-custom-green { color: var(--brand-success); border-color: var(--brand-success); }
.btn-outline-arancione    { color: #c3a20e !important; border-color: #c3a20e !important; }
.btn-outline-gray         { color: #6c757d; border-color: #6c757d; }
.btn-outline-gray:hover,
.btn-outline-gray:focus,
.btn-outline-gray:active  { color: #5a6268; border-color: #5a6268; }
.btn-outline-custom-ocra  { color: #c3a20e; border-color: #c3a20e; }
.btn-outline-custom-ocra:hover,
.btn-outline-custom-ocra:focus,
.btn-outline-custom-ocra:active { color: #a17f0b; border-color: #a17f0b; }

/* ---- Stato disabled globale ---- */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
  background-color: #ccc !important;
  border-color: #ccc !important;
  color: #666 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ---- Righe tabella ---- */
.sm-row-totale td,
.sm-row-totale th  { background: #e5e5e5 !important; }
.sm-row-totale td  { color: #333; border-top: 2px solid #d0d0d0 !important; }

.row-error   { background: rgba(220, 53, 69, 0.08) !important; transition: background-color 0.2s ease; }
.row-warning { background-color: #fff3cd !important; transition: background-color 0.2s ease; }
.row-error input,
.row-error .form-control,
.row-error .form-select-sm { border-color: rgba(220, 53, 69, 0.55) !important; box-shadow: 0 0 0 .15rem rgba(220, 53, 69, 0.12); }
.row-error select           { border-color: rgba(220, 53, 69, 0.55) !important; box-shadow: 0 0 0 .15rem rgba(220, 53, 69, 0.12); }
.row-error .input-group-text { border-color: rgba(220, 53, 69, 0.55) !important; background-color: rgba(220, 53, 69, 0.08) !important; }

/* ---- Collapse card ---- */
.collapse-card             { overflow: hidden; transition: all 0.3s ease; }
.collapse-card:not(.show)  { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
.collapse-card.show        { height: auto; opacity: 1; }

/* ---- Accordion manuale ---- */
.accordion-content         { display: none; }
.accordion-content.show    { display: table-row; animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn          { from { opacity: 0; } to { opacity: 1; } }
.accordion-toggle          { cursor: pointer; transition: background-color 0.2s ease; }
.accordion-toggle:hover    { background-color: rgba(37, 99, 235, 0.1) !important; }
.accordion-icon            { transition: transform 0.3s ease; margin-left: 10px; }
.accordion-icon.rotated    { transform: rotate(90deg); }

/* ---- Local suggest (autocomplete) ---- */
.local-suggest-menu  { position: absolute; z-index: 2000; top: 100%; left: 0; right: 0; max-height: 320px; overflow: auto; border: 1px solid rgba(0,0,0,.12); border-top: none; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.12); border-radius: 0 0 .5rem .5rem; }
.local-suggest-sec   { padding: .375rem .75rem; border-top: 1px solid rgba(0,0,0,.06); }
.local-suggest-sec:first-child { border-top: none; }
.local-suggest-title { font-size: .75rem; color: #6c757d; margin: .25rem 0; }
.local-suggest-item  { padding: .5rem .75rem; cursor: pointer; }
.local-suggest-item small { color: #6c757d; display: block; }
.local-suggest-item:hover,
.local-suggest-item.active { background: #f5f5f5; }
.local-suggest-empty { padding: .5rem .75rem; color: #9aa0a6; font-style: italic; }

/* ---- Select2 customizzazioni ---- */
.s2-option-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; }
.s2-tooltip        { display: none; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); background: #333; color: #fff; padding: 4px 6px; border-radius: 4px; white-space: nowrap; font-size: 12px; z-index: 9999; }
.select2-results__option:hover .s2-tooltip { display: inline-block; }
.s2-disabled .s2-text { color: #999 !important; cursor: not-allowed; }

/* ---- Google Maps autocomplete ---- */
.pac-container { background-color: #FFF; z-index: 9999; position: fixed; display: inline-block; float: left; }

/* ---- Sezioni e card UI ---- */
.sm-section-title { color: var(--brand-primary); font-weight: 700; }
.sm-card-soft     { border: 1px solid rgba(0,0,0,.06); border-radius: 18px; box-shadow: 0 10px 26px rgba(0,0,0,.06); }

/* ---- Input monospace ---- */
.aru-input-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; letter-spacing: .2px; }

/* Altezza header ridotta */
:root {
    --kt-app-header-height: 70px !important;
    --kt-app-header-height-actual: 70px !important;
    --bs-app-header-height: 70px !important;
    --bs-app-header-height-actual: 70px !important;
}
body[data-kt-app-header-fixed="true"] {
    --kt-app-header-height: 70px !important;
}
#kt_app_header {
    min-height: 70px !important;
    height: 70px !important;
}
#kt_app_header .d-flex.flex-stack.flex-grow-1 {
    min-height: 70px !important;
    height: 70px !important;
}

/* Sidebar: allinea top al nuovo header */
#kt_app_sidebar {
    top: 70px !important;
    height: calc(100vh - 70px) !important;
}

/* Sidebar: stato attivo della voce corrente.
   Il menu è piatto: la classe `.active` viene messa lato server sul
   `.menu-link` di primo livello (vedi _sidebar.php). Le regole vanno quindi
   sul link attivo, non su una struttura `.menu-sub` (che qui non esiste). */
#kt_app_sidebar_menu .menu-item > .menu-link.active {
    background-color: var(--bs-primary-bg-subtle) !important;
    /* accento sinistro brand: box-shadow inset così non sposta il contenuto
       e segue l'arrotondamento della voce (menu-rounded) */
    box-shadow: inset 3px 0 0 0 var(--bs-primary) !important;
}
#kt_app_sidebar_menu .menu-item > .menu-link.active .menu-title {
    color: var(--bs-primary) !important;
    font-weight: 600;
}
#kt_app_sidebar_menu .menu-item > .menu-link.active .menu-icon,
#kt_app_sidebar_menu .menu-item > .menu-link.active .menu-icon i,
#kt_app_sidebar_menu .menu-item > .menu-link.active .menu-icon i:before {
    color: var(--bs-primary) !important;
}
/* Eventuali sotto-voci con bullet: bullet primario ingrandito */
#kt_app_sidebar_menu .menu-sub .menu-item.active > .menu-link.active .menu-bullet .bullet {
    background-color: var(--bs-primary) !important;
    transform: scale(1.4);
}

/* =======================================================================
   Sidebar - logo brand cliente + stato minimizzato
   ----------------------------------------------------------------------- */

/* Logo brand: contenitore non comprimibile, sempre a tutta larghezza */
#kt_app_sidebar_logo {
    flex: 0 0 auto;
}
/* Stessa altezza del logo completo anche a sidebar minimizzata: il menu non
   salta su e giu' quando la sidebar si riespande in hover. */
#kt_app_sidebar_logo > a {
    min-height: 58px;
}
.sm-sidebar-logo-default {
    height: 58px;
    width: auto;
    max-width: 100%;
    display: block;
}
/* Logo a sidebar minimizzata: marchio quadrato, dentro la colonna stretta.
   Il logo completo ad altezza fissa (RRD e' 7:1) usciva dalla colonna e
   veniva tagliato ai lati; object-fit tiene dentro anche un logo non quadrato
   se l'istanza non definisce SM_BRAND_LOGO_ICON. */
.sm-sidebar-logo-minimize {
    width: 48px;
    height: 48px;
    max-width: 100%;
    object-fit: contain;
    display: none;   /* mostrato solo a sidebar minimizzata (regole sotto) */
}

/* Pulsante che minimizza la sidebar: quadrato fisso, non comprimibile.
   Senza flex-shrink il flex della testata lo stringeva a 20px e l'icona
   hamburger usciva dai bordi; mt-1 la spingeva anche fuori centro. */
#kt_app_sidebar_toggle {
    flex: 0 0 auto;
    width: 34px !important;
    height: 34px !important;
    padding: 0;
    align-items: center;
    justify-content: center;
}
#kt_app_sidebar_toggle i {
    line-height: 1;
    margin: 0;
}

/* Sidebar minimizzata (non in hover): mostra il logo ridotto e centrato.
   Con hover attivo (sidebar che si riespande) torna il logo completo. */
[data-kt-app-sidebar-minimize="on"] .app-sidebar:not(:hover) #kt_app_sidebar_logo {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
[data-kt-app-sidebar-minimize="on"] .app-sidebar:not(:hover) .sm-sidebar-logo-default {
    display: none;
}
[data-kt-app-sidebar-minimize="on"] .app-sidebar:not(:hover) .sm-sidebar-logo-minimize {
    display: block;
}

/* Menu minimizzato: icone perfettamente centrate nella colonna stretta */
[data-kt-app-sidebar-minimize="on"] .app-sidebar:not(:hover) #kt_app_sidebar_menu > .menu-item > .menu-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
[data-kt-app-sidebar-minimize="on"] .app-sidebar:not(:hover) #kt_app_sidebar_menu > .menu-item > .menu-link .menu-icon {
    margin-right: 0;
    width: auto;
    justify-content: center;
}
/* Titolo voce: nel menu piatto Metronic non lo nasconde da solo a sidebar
   minimizzata, così il suo flex-grow tiene larga la voce e spinge l'icona a
   sinistra (icona scentrata + pillola attiva sbilanciata). Lo nascondiamo:
   le icone si centrano e l'evidenziazione attiva resta simmetrica. */
[data-kt-app-sidebar-minimize="on"] .app-sidebar:not(:hover) #kt_app_sidebar_menu > .menu-item > .menu-link .menu-title {
    display: none !important;
}

/* Voce attiva a sidebar minimizzata: con l'icona centrata l'accento sinistro
   resta incollato al bordo e sembra disallineato. Lo togliamo e lasciamo solo
   un riquadro arrotondato in tinta brand, centrato sull'icona. L'accento
   sinistro torna quando la sidebar si riespande in hover (regola base). */
[data-kt-app-sidebar-minimize="on"] .app-sidebar:not(:hover) #kt_app_sidebar_menu > .menu-item > .menu-link.active {
    box-shadow: none !important;
    border-radius: 0.475rem;
}

/* Respiro in fondo alla sidebar: l'ultima voce non resta incollata/tagliata */
#kt_app_sidebar_menu {
    padding-bottom: 1.75rem;
}
#kt_app_sidebar_wrapper {
    padding-bottom: 0.5rem;
}

/* ---- Dimensioni utili ---- */
.w200          { width: 200px !important; }
.max-width-100 { max-width: 100px !important; }
.min-width-70  { min-width: 70px !important; }
.min-width-100 { min-width: 100px !important; }
.min-width-120 { min-width: 120px !important; }
.min-width-150 { min-width: 170px !important; }
.min-width-170 { min-width: 170px !important; }
.min-width-200 { min-width: 200px !important; }
.max-width-200 { max-width: 200px !important; }
.min-width-250 { min-width: 270px !important; }
.max-width-250 { max-width: 270px !important; }
.max-width-350 { max-width: 370px !important; }
.min-height-34 { min-height: 34px !important; }
.min-height-48 { min-height: 48px !important; }

/* ---- Loader locale su pannelli/card/div ---- */
.sm-block-loader-overlay {
  position: absolute;
  inset: 0;
  z-index: 980;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.56);
}
.sm-block-loader-box {
  --sk-color: var(--brand-primary, #2563eb);
  --sk-size: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  padding: .25rem;
  border-radius: 8px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.sm-block-loader-text {
  font-size: .78rem;
  font-weight: 600;
  color: var(--brand-danger);
}
.sm-block-loader-overlay--modal {
  background: rgba(15, 23, 42, 0.20);
  backdrop-filter: blur(1px);
}
.sm-block-loader-overlay--premium {
  background: rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(1.2px);
}
.sm-block-loader-overlay--premium .sm-block-loader-box {
  min-width: 160px;
  padding: .35rem .5rem .2rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.sm-block-loader-overlay--premium .sm-block-loader-box .sk-circle-fade,
.sm-block-loader-overlay--premium .sm-block-loader-box .sk-chase,
.sm-block-loader-overlay--premium .sm-block-loader-box .sk-flow,
.sm-block-loader-overlay--premium .sm-block-loader-box .sk-grid {
  filter: drop-shadow(0 0 3px rgba(37, 99, 235, 0.16));
}
.sm-block-loader-overlay--premium .sm-block-loader-text {
  color: var(--brand-danger);
  font-weight: 600;
  letter-spacing: .01em;
}
.sm-block-loader-overlay--app {
  background: linear-gradient(180deg, rgba(247, 249, 252, 0.82) 0%, rgba(247, 249, 252, 0.9) 100%);
  backdrop-filter: blur(1.5px);
}
.sm-block-loader-overlay--app .sm-block-loader-box {
  --sk-color: var(--brand-primary);
  --sk-size: 30px;
  min-width: 220px;
  padding: .85rem 1.1rem .75rem;
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.sm-block-loader-overlay--app .sm-block-loader-box .sk-flow {
  padding: 8px;
}
.sm-block-loader-overlay--app .sm-block-loader-text {
  color: #334155;
  font-weight: 600;
}
.sm-block-loader-overlay--app .sm-block-loader-box .sk-flow-dot {
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.22);
}

/* Brand color overrides Bootstrap/Metronic sono ora gestiti da
   custom.themes.css (override --bs-primary cascading).
   Lasciato solo il tint specifico dello spinner loader. */

/* =============================================================
   Form dinamico (sm/lib_scripts/dpp_dynamic_form.js): campi, due lingue, scelte a
   vista, immagini, simboli di manutenzione, livello su scala, tabella.
   Colori solo da variabili del tema.
   ============================================================= */
.sm-dyn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; }
.sm-dyn-grid > * { min-width: 0; }
.sm-dyn-grid > .sm-dyn-field--wide { grid-column: 1 / -1; }
@media (max-width: 767.98px) { .sm-dyn-grid { grid-template-columns: minmax(0, 1fr); } }

.sm-dyn-label { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .35rem; }
.sm-dyn-label .badge { margin-left: .15rem !important; }
.sm-dyn-req { color: var(--bs-danger); }
.sm-dyn-error { color: var(--bs-danger); font-size: .8rem; font-weight: 500; margin-top: .35rem; }
.sm-dyn-error:empty { display: none; }
.sm-dyn-field.has-error .form-control, .sm-dyn-field.has-error .form-select,
.sm-dyn-field.has-error .select2-selection, .sm-pd-f.has-error .form-control, .sm-pd-f.has-error .form-select,
.sm-pd-f.has-error .select2-selection { border-color: var(--bs-danger) !important; }
.sm-dyn-field.has-error .sm-dyn-label, .sm-pd-f.has-error .form-label { color: var(--bs-danger); }
.sm-dyn-field.is-manca:not(.has-error) .sm-dyn-error::before { content: "Obbligatorio"; }
.sm-dyn-field.is-manca .sm-dyn-error { display: block; }

/* testo in due lingue: IT ed EN affiancati, la lingua nell'angolo del campo */
.sm-dyn-i18n { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 767.98px) { .sm-dyn-i18n { grid-template-columns: minmax(0, 1fr); } }
.sm-dyn-i18n-cell { position: relative; min-width: 0; }
.sm-dyn-i18n-cell .form-control { padding-right: 2.9rem; }
.sm-dyn-lang {
    position: absolute; top: .55rem; right: .55rem; z-index: 2; pointer-events: none;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; line-height: 1; padding: .3rem .4rem; border-radius: .35rem;
    background: var(--bs-gray-100); color: var(--bs-gray-600);
}
.sm-dyn-i18n-cell:focus-within .sm-dyn-lang { background: rgba(var(--brand-primary-rgb, 249, 115, 22), .1); color: var(--brand-primary, var(--bs-primary)); }

.sm-dyn-num { max-width: 14rem; font-variant-numeric: tabular-nums; }

/* si'/no */
.sm-dyn-bool { min-height: calc(1.5em + 1.55rem + 2px); display: flex; align-items: center; margin: 0; }
.sm-dyn-bool .form-check-label { font-weight: 600; color: var(--bs-gray-800); }
.sm-dyn-bool-si { display: none; }
.sm-dyn-bool .form-check-input:checked ~ .form-check-label .sm-dyn-bool-si { display: inline; }
.sm-dyn-bool .form-check-input:checked ~ .form-check-label .sm-dyn-bool-no { display: none; }
.sm-dyn-bool .form-check-input:not(:checked) ~ .form-check-label { color: var(--bs-gray-600); }

/* scelta fra poche opzioni, tutte a vista */
.sm-dyn-seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.sm-dyn-seg-opt { position: relative; margin: 0; cursor: pointer; }
.sm-dyn-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sm-dyn-seg-opt span {
    display: inline-flex; align-items: center; min-height: 2.6rem; padding: .45rem .9rem; border-radius: .6rem;
    border: 1px solid var(--bs-gray-300); background: var(--bs-body-bg); color: var(--bs-gray-800); font-weight: 500;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.sm-dyn-seg-opt:hover span { border-color: var(--bs-gray-500); }
.sm-dyn-seg-none span { color: var(--bs-gray-600); }
.sm-dyn-seg-opt input:checked + span {
    border-color: var(--brand-primary, var(--bs-primary)); color: var(--bs-gray-900); font-weight: 600;
    background: rgba(var(--brand-primary-rgb, 249, 115, 22), .06); box-shadow: inset 0 0 0 1px var(--brand-primary, var(--bs-primary));
}
.sm-dyn-seg-none input:checked + span { border-color: var(--bs-gray-400); background: var(--bs-gray-100); box-shadow: none; color: var(--bs-gray-700); }
.sm-dyn-seg-opt input:focus-visible + span { outline: 2px solid var(--brand-accent, var(--brand-primary, var(--bs-primary))); outline-offset: 2px; }
.sm-dyn-seg-opt input:disabled + span { opacity: .55; cursor: not-allowed; }

/* elenco di voci: le voci e il campo per aggiungerne, nello stesso riquadro */
.sm-dyn-chips {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-height: calc(1.5em + 1.55rem + 2px);
    padding: .35rem .5rem; border: 1px solid var(--bs-gray-300); border-radius: .475rem; background: var(--bs-body-bg); cursor: text;
}
.sm-dyn-chips:focus-within { border-color: var(--brand-accent, var(--brand-primary, var(--bs-primary))); }
.sm-dyn-chip {
    display: inline-flex; align-items: center; gap: .15rem; padding: .25rem .3rem .25rem .6rem; border-radius: .4rem;
    background: var(--bs-gray-100); color: var(--bs-gray-800); font-size: .875rem; font-weight: 500;
}
.sm-dyn-chip-remove { border: 0; background: none; padding: .1rem; border-radius: .3rem; line-height: 1; color: var(--bs-gray-500); display: inline-flex; }
.sm-dyn-chip-remove:hover { color: var(--bs-danger); background: var(--bs-body-bg); }
.sm-dyn-mschar-input { flex: 1 1 8rem; min-width: 6rem; border: 0; outline: 0; background: transparent; padding: .3rem .2rem; color: var(--bs-gray-900); }

/* immagine o file: un riquadro che si riempie */
.sm-dyn-media { max-width: 14rem; }
.sm-pd-foto .sm-dyn-media { max-width: none; }
.sm-dyn-media-tile {
    position: relative; aspect-ratio: 1; border-radius: .75rem; overflow: hidden;
    border: 1px dashed var(--bs-gray-400); background: var(--bs-gray-100);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.sm-dyn-media.is-filled .sm-dyn-media-tile { border-style: solid; border-color: var(--bs-border-color); background: var(--bs-body-bg); }
.sm-dyn-media-tile.is-over { border-color: var(--brand-primary, var(--bs-primary)); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 249, 115, 22), .18); }
.sm-dyn-media-preview { position: absolute; inset: 0; }
.sm-dyn-media-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sm-dyn-media-pdf { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; color: var(--bs-gray-700); font-weight: 600; font-size: .8rem; }
.sm-dyn-media-pdf i { font-size: 2.25rem; }
.sm-dyn-media-btn {
    position: absolute; inset: 0; width: 100%; border: 0; background: none; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .35rem; color: var(--bs-gray-600); font-weight: 600; font-size: .85rem;
}
.sm-dyn-media-btn i { font-size: 1.9rem; color: var(--bs-gray-500); transition: color .15s ease; }
.sm-dyn-media-btn:hover { color: var(--bs-gray-900); }
.sm-dyn-media-btn:hover i { color: var(--brand-primary, var(--bs-primary)); }
.sm-dyn-media-btn:focus-visible { outline: 2px solid var(--brand-accent, var(--brand-primary, var(--bs-primary))); outline-offset: -3px; border-radius: .75rem; }
.sm-dyn-media.is-filled .sm-dyn-media-btn { display: none; }
.sm-dyn-media-actions {
    position: absolute; left: .4rem; right: .4rem; bottom: .4rem; display: none; justify-content: flex-end; gap: .25rem;
}
.sm-dyn-media.is-filled .sm-dyn-media-actions { display: flex; }
.sm-dyn-media-actions .btn {
    width: 2.25rem; height: 2.25rem; border-radius: .5rem; background: var(--bs-body-bg); color: var(--bs-gray-700);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.sm-dyn-media-actions .btn:hover { color: var(--bs-gray-900); }
.sm-dyn-media-actions .btn:disabled { opacity: .4; }
.sm-dyn-media-actions .sm-dyn-media-remove:hover { color: var(--bs-danger); }
.sm-dyn-media-actions .sm-pd-foto-dx { margin-right: auto; }
/* con il mouse le azioni compaiono al passaggio; al tocco e da tastiera restano visibili */
@media (hover: hover) {
    .sm-dyn-media.is-filled .sm-dyn-media-actions { opacity: 0; transition: opacity .15s ease; }
    .sm-dyn-media.is-filled:hover .sm-dyn-media-actions, .sm-dyn-media.is-filled:focus-within .sm-dyn-media-actions { opacity: 1; }
}
.sm-dyn-media-busy { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), .7); color: var(--bs-gray-700); }
.sm-dyn-media.is-busy .sm-dyn-media-busy { display: flex; }

/* simboli di manutenzione: una riga per famiglia, il nome di quello scelto accanto */
.sm-dyn-care { display: grid; gap: .9rem; }
.sm-dyn-care-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; min-height: 1.2rem; }
.sm-dyn-care-fam-title { font-size: .8rem; font-weight: 600; color: var(--bs-gray-700); flex-shrink: 0; }
.sm-dyn-care-scelto { font-size: .8rem; color: var(--bs-gray-900); font-weight: 500; min-width: 0; }
.sm-dyn-care-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.sm-dyn-care-opt {
    position: relative; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin: 0;
    border: 1px solid var(--bs-gray-300); border-radius: .55rem; background: var(--bs-body-bg); color: var(--bs-gray-700); cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.sm-dyn-care-opt:hover { border-color: var(--bs-gray-500); color: var(--bs-gray-900); }
.sm-dyn-care-chk { position: absolute; opacity: 0; pointer-events: none; }
.sm-dyn-care-ico svg { display: block; width: 1.9rem; height: 1.9rem; }
.sm-dyn-care-opt:has(.sm-dyn-care-chk:checked) {
    border-color: var(--sm2care-accent, var(--bs-primary)); color: var(--bs-gray-900);
    background: rgba(var(--sm2care-accent-rgb, var(--bs-primary-rgb)), .08);
    box-shadow: inset 0 0 0 1px var(--sm2care-accent, var(--bs-primary));
}
.sm-dyn-care-opt:has(.sm-dyn-care-chk:focus-visible) { outline: 2px solid var(--sm2care-accent, var(--bs-primary)); outline-offset: 2px; }

.sm-dyn-scale { display: flex; flex-wrap: wrap; gap: .4rem; align-items: stretch; }
.sm-dyn-scale-opt { position: relative; cursor: pointer; margin: 0; }
.sm-dyn-scale-opt input { position: absolute; opacity: 0; pointer-events: none; }
.sm-dyn-scale-opt span {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 3.25rem; min-height: 2.75rem; padding: .35rem .8rem; border: 1px solid var(--bs-gray-300);
    border-radius: .6rem; color: var(--bs-gray-800); background: var(--bs-body-bg);
    transition: border-color .15s ease, background-color .15s ease;
}
.sm-dyn-scale-opt:hover span { border-color: var(--bs-gray-500); }
.sm-dyn-scale-opt span b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.sm-dyn-scale-opt span small { font-size: .7rem; color: var(--bs-gray-600); }
.sm-dyn-scale-none span { color: var(--bs-gray-600); font-size: .85rem; }
.sm-dyn-scale-opt input:checked + span {
    border-color: var(--sm2care-accent, var(--bs-primary));
    background: rgba(var(--sm2care-accent-rgb, var(--bs-primary-rgb)), .08);
    box-shadow: inset 0 0 0 1px var(--sm2care-accent, var(--bs-primary));
}
.sm-dyn-scale-none input:checked + span { border-color: var(--bs-gray-400); background: var(--bs-gray-100); box-shadow: none; }
.sm-dyn-scale-opt input:focus-visible + span { outline: 2px solid var(--sm2care-accent, var(--bs-primary)); outline-offset: 2px; }

/* position: il testo nascosto dell'intestazione (visually-hidden, assoluto) resta dentro lo scorrimento */
.sm-dyn-table .table-responsive { position: relative; border: 1px solid var(--bs-border-color); border-radius: .6rem; }
.sm-dyn-table table { min-width: 520px; margin: 0; }
.sm-dyn-table thead th { font-size: .78rem; font-weight: 600; color: var(--bs-gray-600); padding: .55rem .5rem .4rem !important; background: var(--bs-gray-100); }
.sm-dyn-table td { padding: .3rem .25rem !important; }
.sm-dyn-table td:first-child, .sm-dyn-table th:first-child { padding-left: .5rem !important; }
.sm-dyn-table .sm-dyn-table-x { width: 2.75rem; text-align: right; padding-right: .4rem !important; }
.sm-dyn-table-del { color: var(--bs-gray-500); }
.sm-dyn-table-del:hover { color: var(--bs-danger); }
.sm-dyn-table-add { margin-top: .6rem; }

/* ------------------------------------------------------------------
   sm_sortable (sm/lib_scripts/sm_sortable.js): trascinamento
   ------------------------------------------------------------------ */
.sm-sortable-handle {
    touch-action: none;                 /* sul telefono il dito trascina, non scorre la pagina */
    cursor: grab;
    border: 0; background: transparent; padding: .25rem; line-height: 1;
    color: var(--bs-gray-500); border-radius: .375rem;
}
.sm-sortable-handle:hover { color: var(--bs-gray-800); background: var(--bs-gray-100); }
.sm-sortable-handle:focus-visible {
    outline: 2px solid var(--brand-primary, var(--bs-primary)); outline-offset: 1px;
}
.sm-sortable-attivo, .sm-sortable-attivo * { cursor: grabbing !important; user-select: none; }
.sm-sortable-dragging {
    background: var(--bs-body-bg);
    box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .12), 0 .125rem .375rem rgba(0, 0, 0, .08);
    border-radius: .65rem;
    opacity: .96;
}
.sm-sortable-placeholder {
    border: 1px dashed rgba(var(--brand-primary-rgb, 249, 115, 22), .55);
    background: rgba(var(--brand-primary-rgb, 249, 115, 22), .05);
    border-radius: .65rem;
}