/* =============================================================
   custom.css — Tema unico della piattaforma Prometes + utility funzionali
   Stile estratto dai mockup del modulo Qualità:
   - sidebar SCURA navy (voce attiva arancione)
   - topbar BIANCA, toolbar su canvas piatto, card nette
   Consolidato da: ex custom.css (utility/loaders/autocomplete) + ex custom.themes.css (tema).
   Lo stile dei componenti (form, card, tabelle, DataTables) viene da style.bundle.css;
   qui sopra ci mettiamo brand + shell + override.
   ============================================================= */

/* =============================================================
   1) Token brand + remap Bootstrap primary
   ============================================================= */
:root {
    --sm2care-primary:        var(--brand-primary, #f97316);
    --sm2care-primary-hover:  var(--brand-primary-hover, #ea580c);
    --sm2care-primary-active: var(--brand-primary-active, #c2410c);
    --sm2care-primary-rgb:    var(--brand-primary-rgb, 249, 115, 22);

    --bs-primary: var(--sm2care-primary);
    --bs-primary-rgb: var(--sm2care-primary-rgb);
    --bs-link-color: var(--sm2care-primary);
    --bs-link-hover-color: var(--sm2care-primary-hover);
    --bs-primary-bg-subtle: rgba(var(--sm2care-primary-rgb), 0.12);
    --bs-primary-border-subtle: rgba(var(--sm2care-primary-rgb), 0.28);

    /* Palette shell "clean" */
    --clean-side-bg:      #1c2230;
    --clean-side-text:    #cfd6e4;
    --clean-side-text-hi: #ffffff;
    --clean-side-heading: #6b7689;
    --clean-canvas:       #f4f6fa;
    --clean-card-border:  #e7eaf0;
    --clean-ink:          #1f2733;
    --clean-muted:        #7a8699;
    --clean-label:        #525c6b;  /* label/eyebrow form: contrasto >=4.5:1 su bianco (~6.9:1) */

    /* Altezza header */
    --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;
}

/* =============================================================
   1b) Label/eyebrow form unificata (un solo sistema, contrasto AA)
   ============================================================= */
.sm-field-label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--clean-label);
    margin-bottom: .35rem;
}
.sm-section-eyebrow {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--clean-label);
}

/* =============================================================
   2) Bottoni primary / outline / light
   ============================================================= */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--sm2care-primary);
    --bs-btn-border-color: var(--sm2care-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sm2care-primary-hover);
    --bs-btn-hover-border-color: var(--sm2care-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--sm2care-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sm2care-primary-active);
    --bs-btn-active-border-color: var(--sm2care-primary-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--sm2care-primary);
    --bs-btn-disabled-border-color: var(--sm2care-primary);
}
/* Metronic forza hover/focus/active del primary col suo blu via selettori ad alta
   specificità (.btn.btn-primary:hover:not(.btn-active) ...): li riportiamo al brand. */
.btn-check:checked + .btn.btn-primary,
.btn-check:active + .btn.btn-primary,
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary.active,
.btn.btn-primary.show,
.show > .btn.btn-primary {
    background-color: var(--sm2care-primary-hover) !important;
    border-color: var(--sm2care-primary-hover) !important;
    color: #fff !important;
}
.btn-outline-primary {
    --bs-btn-color: var(--sm2care-primary);
    --bs-btn-border-color: rgba(var(--sm2care-primary-rgb), 0.45);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--sm2care-primary);
    --bs-btn-hover-border-color: var(--sm2care-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--sm2care-primary-active);
    --bs-btn-active-border-color: var(--sm2care-primary-active);
}
.btn-light-primary { background-color: rgba(var(--sm2care-primary-rgb), 0.10); border-color: rgba(var(--sm2care-primary-rgb), 0.16); color: var(--sm2care-primary-active); }
.btn-light-primary:hover, .btn-light-primary:focus { background-color: rgba(var(--sm2care-primary-rgb), 0.16); color: #9a3412; }
.btn-light { background-color: #f4f7fa; border-color: #e7edf3; color: #4b5563; }
.btn-light:hover, .btn-light:focus { background-color: #edf2f7; border-color: #dde6ef; color: #374151; }

/* Focus visibile da tastiera su bottoni e paginazione (WCAG 2.4.7).
   Metronic/Bootstrap sopprime il box-shadow di focus su .btn-icon/.btn-light:
   un anello outline è robusto e compare solo su navigazione da tastiera. */
.btn:focus-visible, .page-link:focus-visible {
    outline: 2px solid var(--sm2care-primary) !important;
    outline-offset: 2px;
}

/* Touch target >=44px SOLO su puntatori grossolani (touch/stylus): la densità
   desktop (mouse) resta invariata. WCAG 2.5.5 / best practice mobile. */
@media (pointer: coarse) {
    .btn-icon.btn-sm { min-width: 44px; min-height: 44px; }
    .btn-sm { min-height: 44px; }
    .page-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    /* azioni ad icona delle tassonomie (matita/cestino) */
    .sm-tax-dim .acts .ic { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* =============================================================
   3) Shell — canvas, header (BIANCO), sidebar (SCURA), toolbar
   ============================================================= */
.app-wrapper, .app-main, .app-content, #kt_app_content, #kt_app_main {
    background-color: var(--clean-canvas) !important;
    background-image: none !important;
}

/* Header bianco */
#kt_app_header { min-height: 70px !important; height: 70px !important; }
#kt_app_header {
    background-color: #ffffff !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid #e7eaf0 !important;
    box-shadow: none !important;
}
#kt_app_header .d-flex.flex-stack.flex-grow-1 { min-height: 70px !important; height: 70px !important; }
#kt_app_header::before, #kt_app_header::after { display: none !important; }
#kt_app_header .app-header-separator { display: none !important; }
#kt_app_header #kt_app_sidebar_toggle,
#kt_app_header #kt_app_sidebar_mobile_toggle,
#kt_app_header .app-navbar-item .btn-icon,
#kt_app_header .app-navbar-item .btn-custom {
    background-color: #f4f6fa !important; color: #6b7280 !important;
    border: 1px solid #e7eaf0 !important; border-radius: 9px;
}
#kt_app_header #kt_app_sidebar_toggle:hover,
#kt_app_header .app-navbar-item .btn-icon:hover { background-color: #eef1f6 !important; color: #111827 !important; }
/* Titolo pagina + path/breadcrumb nella topbar */
.sm-topbar-title { font-weight: 700; font-size: 1.02rem; color: var(--clean-ink); line-height: 1.15; margin-bottom: 5px; white-space: nowrap; }
.sm-topbar-crumbs { gap: .4rem; font-size: .78rem; line-height: 1.1; flex-wrap: nowrap; white-space: nowrap; }
.sm-topbar-crumbs a, .sm-topbar-crumbs span { white-space: nowrap; flex: 0 0 auto; }
.sm-topbar-crumbs a { color: var(--clean-muted); text-decoration: none; }
.sm-topbar-crumbs a:hover { color: var(--sm2care-primary); }
.sm-topbar-crumbs .sep { color: #c5ccd6; }
.sm-topbar-crumbs .cur { color: var(--clean-ink); font-weight: 600; }

/* Sidebar scura (posizionamento full-height: vedi blocco "Layout desktop" in fondo) */
#kt_app_sidebar,
#kt_app_sidebar .app-sidebar-wrapper,
#kt_app_sidebar .hover-scroll-y { background: var(--clean-side-bg) !important; }

/* Vincola i contenitori interni a non sforare i 250px (evita che la voce attiva esca dalla sidebar) */
#kt_app_sidebar { overflow-x: hidden !important; }
#kt_app_sidebar .app-sidebar-wrapper,
#kt_app_sidebar_wrapper,
#kt_app_sidebar_menu {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
    margin-left: 0 !important; margin-right: 0 !important;
}
#kt_app_sidebar_wrapper { padding-left: 10px !important; padding-right: 10px !important; }
#kt_app_sidebar_menu { padding-left: 0 !important; padding-right: 0 !important; }
#kt_app_sidebar { border-right: 1px solid rgba(255,255,255,0.06) !important; box-shadow: none !important; }
#kt_app_sidebar .menu-heading {
    color: var(--clean-side-heading) !important;
    font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 0.12em; text-transform: uppercase;
}
#kt_app_sidebar .menu-link {
    color: var(--clean-side-text) !important;
    border-radius: 8px; min-height: 40px; font-weight: 500; margin: 2px 0;
    transition: background-color .16s ease, color .16s ease;
}
#kt_app_sidebar .menu-link .menu-title,
#kt_app_sidebar .menu-link .menu-icon i,
#kt_app_sidebar .menu-link .menu-icon svg { color: var(--clean-side-text) !important; }
#kt_app_sidebar .menu-link .menu-title { font-size: 0.92rem !important; font-weight: 500 !important; }
#kt_app_sidebar .menu-link .menu-icon i { font-size: 1.1rem !important; }
#kt_app_sidebar .menu-item:not(.here):not(.active):not(.open) > .menu-link:not(.active):hover,
#kt_app_sidebar .menu-link:not(.active):hover { background-color: rgba(255,255,255,0.12) !important; }
#kt_app_sidebar .menu-item:not(.here):not(.active):not(.open) > .menu-link:hover .menu-title,
#kt_app_sidebar .menu-link:not(.active):hover .menu-title,
#kt_app_sidebar .menu-item:not(.here):not(.active):not(.open) > .menu-link:hover .menu-icon i,
#kt_app_sidebar .menu-link:not(.active):hover .menu-icon i { color: var(--clean-side-text-hi) !important; }

/* voce attiva = pieno arancione (.active sta sul .menu-link, vedi _sidebar.php) */
#kt_app_sidebar .menu-link.active,
#kt_app_sidebar .menu-item.active > .menu-link,
#kt_app_sidebar .menu-item.here > .menu-link,
#kt_app_sidebar .menu-item.open > .menu-link { background-color: var(--sm2care-primary) !important; box-shadow: none !important; }
/* La voce attiva resta arancione anche in hover, solo tonalità leggermente più scura (feedback) */
#kt_app_sidebar .menu-link.active:hover,
#kt_app_sidebar .menu-item.active > .menu-link:hover,
#kt_app_sidebar .menu-item.here > .menu-link:hover,
#kt_app_sidebar .menu-item.open > .menu-link:hover { background-color: var(--sm2care-primary-hover) !important; }
#kt_app_sidebar .menu-link.active::before,
#kt_app_sidebar .menu-item.active > .menu-link::before { display: none !important; }
#kt_app_sidebar .menu-link.active .menu-title,
#kt_app_sidebar .menu-link.active .menu-icon i,
#kt_app_sidebar .menu-item.active > .menu-link .menu-title,
#kt_app_sidebar .menu-item.here > .menu-link .menu-title,
#kt_app_sidebar .menu-item.open > .menu-link .menu-title,
#kt_app_sidebar .menu-item.active > .menu-link .menu-icon i,
#kt_app_sidebar .menu-item.here > .menu-link .menu-icon i { color: #ffffff !important; }

/* Freccia accordion: visibile (chiara) da chiusa, BIANCA quando aperta/attiva */
#kt_app_sidebar .menu-arrow:after { background-color: var(--clean-side-text) !important; }
#kt_app_sidebar .menu-item.show > .menu-link .menu-arrow:after,
#kt_app_sidebar .menu-item.here > .menu-link .menu-arrow:after,
#kt_app_sidebar .menu-item.open > .menu-link .menu-arrow:after,
#kt_app_sidebar .menu-link.active .menu-arrow:after { background-color: #ffffff !important; }
#kt_app_sidebar_wrapper::-webkit-scrollbar { width: 8px; }
#kt_app_sidebar_wrapper::-webkit-scrollbar-track { background: #171b25; }
#kt_app_sidebar_wrapper::-webkit-scrollbar-thumb { background: #3c4554; border-radius: 999px; }

/* Toolbar su canvas + tipografia titoli */
#kt_app_toolbar, .app-toolbar { background-color: transparent !important; border-bottom: none !important; box-shadow: none !important; }
.page-heading, .text-gray-900 { color: var(--clean-ink) !important; }
.page-title .page-heading { font-size: 1.5rem !important; font-weight: 700 !important; }
.text-gray-700, .text-gray-600 { color: #374151 !important; }
.text-muted, .text-gray-500 { color: var(--clean-muted) !important; }
body { font-size: 0.95rem; color: var(--clean-ink); }

/* =============================================================
   4) Componenti — card, tabelle, form, badge, link, paginazione, tab
   ============================================================= */
.card {
    background-color: #ffffff !important;
    border: 1px solid var(--clean-card-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(20,30,50,0.05) !important;
}
.card-header { border-bottom-color: var(--clean-card-border) !important; }
.separator { border-color: var(--clean-card-border) !important; }

.table > thead > tr > th { color: var(--clean-muted) !important; border-bottom-color: var(--clean-card-border) !important; font-weight: 700; }
.table > tbody > tr > td { border-bottom-color: var(--clean-card-border) !important; color: #374151; }
.table.table-row-dashed > tbody > tr:hover > td { background-color: #fafbfd !important; }

.form-control, .form-select, .form-control-solid, .form-select-solid, .input-group-text {
    background-color: #fff; border-color: var(--clean-card-border); color: #374151; border-radius: 9px;
}
.form-control::placeholder { color: #9aa4b2; }
.form-control:focus, .form-select:focus { border-color: rgba(var(--sm2care-primary-rgb),0.34); box-shadow: 0 0 0 0.2rem rgba(var(--sm2care-primary-rgb),0.10); }
.form-check-input:checked { background-color: var(--sm2care-primary) !important; border-color: var(--sm2care-primary) !important; }
.form-check-input:focus { border-color: rgba(var(--sm2care-primary-rgb),0.38) !important; box-shadow: 0 0 0 0.2rem rgba(var(--sm2care-primary-rgb),0.16) !important; }

.badge-primary, .label-primary { background-color: var(--sm2care-primary) !important; color: #fff !important; }
.badge-light-primary, .label-light-primary { background-color: rgba(var(--sm2care-primary-rgb),0.12) !important; color: #9a3412 !important; border: 1px solid rgba(var(--sm2care-primary-rgb),0.2) !important; }
.text-primary, .link-primary { color: var(--sm2care-primary) !important; }
a.text-primary:hover, a.link-primary:hover { color: var(--sm2care-primary-hover) !important; }
.bg-primary { background-color: var(--sm2care-primary) !important; }
.text-hover-primary:hover { color: var(--sm2care-primary) !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--sm2care-primary) !important; }
.nav-tabs .nav-link.active { color: var(--sm2care-primary-active) !important; border-bottom-color: var(--sm2care-primary) !important; }
.page-item.active .page-link { background-color: var(--sm2care-primary) !important; border-color: var(--sm2care-primary) !important; color: #fff !important; }
.page-link { color: var(--sm2care-primary) !important; }
.page-link:hover { color: var(--sm2care-primary-hover) !important; }
.page-item.active .page-link:hover { color: #fff !important; }

.dropdown-menu, .modal-content { background-color: #fff; border: 1px solid var(--clean-card-border); box-shadow: 0 14px 34px rgba(15,23,42,0.1); border-radius: 12px; }
.dropdown-item:hover, .dropdown-item:focus { background-color: #fff8f3; color: #111827; }

/* Stats card KPI riutilizzabili */
.stats-card { --stats-accent: var(--sm2care-primary); --stats-accent-soft: rgba(var(--sm2care-primary-rgb),0.10); position: relative; overflow: hidden; background: #fff; border: 1px solid var(--clean-card-border) !important; border-radius: 16px; box-shadow: 0 1px 2px rgba(20,30,50,0.04); transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; }
.stats-card::after { content: ""; position: absolute; top: -45px; right: -45px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle at center, var(--stats-accent-soft), transparent 68%); pointer-events: none; }
.stats-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15,23,42,.09); border-color: var(--stats-accent) !important; }
.stats-card__body { position: relative; z-index: 1; gap: 16px; padding: 1.25rem 1.35rem !important; }
.stats-card__icon { width: 52px !important; height: 52px !important; min-width: 52px; border-radius: 14px !important; background: var(--stats-accent-soft) !important; }
.stats-card__icon i { color: var(--stats-accent) !important; font-size: 1.4rem !important; }
.stats-card__value { color: #0f172a !important; font-size: 1.9rem !important; font-weight: 700 !important; line-height: 1.02; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats-card__label { margin-top: .35rem; color: var(--clean-muted) !important; font-size: .8rem !important; font-weight: 600 !important; letter-spacing: .01em; }
.stats-card--success { --stats-accent: #22c55e; --stats-accent-soft: rgba(34,197,94,.1); }
.stats-card--warning { --stats-accent: #f59e0b; --stats-accent-soft: rgba(245,158,11,.12); }
.stats-card--danger  { --stats-accent: #ef4444; --stats-accent-soft: rgba(239,68,68,.1); }
.stats-card--purple  { --stats-accent: #7c3aed; --stats-accent-soft: rgba(124,58,237,.1); }

/* =============================================================
   5) Utility funzionali (ex custom.css) — testi, bottoni custom, stati riga
   ============================================================= */
.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-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); }
.bg-white { background-color: #fff !important; }
.border-bottom-0 { border-bottom: 0 !important; }

.btn-custom-gray { background: #6c757d; border-color: #6c757d; color: #fff; }
.btn-custom-gray:hover, .btn-custom-gray:focus, .btn-custom-gray:active { background: #5a6268; border-color: #5a6268; color: #fff; }
.btn-custom-green { background: var(--brand-success); border-color: var(--brand-success); color: #fff; }
.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: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;
}

.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 .2s ease; }
.row-warning { background-color: #fff3cd !important; transition: background-color .2s ease; }
.row-error input, .row-error .form-control, .row-error .form-select-sm, .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 { overflow: hidden; transition: all .3s ease; }
.collapse-card:not(.show) { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
.collapse-card.show { height: auto; opacity: 1; }
.accordion-content { display: none; }
.accordion-content.show { display: table-row; animation: fadeIn .3s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.accordion-toggle { cursor: pointer; transition: background-color .2s ease; }
.accordion-toggle:hover { background-color: rgba(var(--sm2care-primary-rgb),0.10) !important; }
.accordion-icon { transition: transform .3s ease; margin-left: 10px; }
.accordion-icon.rotated { transform: rotate(90deg); }

.sm-section-title { color: var(--sm2care-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); }
.aru-input-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: .2px; }

/* Autocomplete locale (riusato dalle anagrafiche) */
.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 / maps */
.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; }
.pac-container { background-color: #FFF; z-index: 9999; position: fixed; }

/* 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; }

/* =============================================================
   6) Loader locale pannelli/card (usato da generic.js / sm_async_post)
   ============================================================= */
.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, #f97316); --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-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(var(--sm2care-primary-rgb),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; }

/* =============================================================
   7) Layout desktop — sidebar full-height a sinistra, topbar alla sua destra
      (identico ai mockup sm/gui/qualita/_mockup)
   ============================================================= */
/* Brand in cima alla sidebar */
.sm-side-brand {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    padding: 16px 20px; flex: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sm-side-brand .sm-side-logo-icon { height: 29px; width: auto; flex: none; object-fit: contain; }
.sm-side-brand .sm-side-logo-text { height: 18px; width: auto; object-fit: contain; margin-left: .35rem; }

@media (min-width: 992px) {
    #kt_app_sidebar {
        position: fixed !important; top: 0 !important; left: 0 !important;
        width: 250px !important; height: 100vh !important;
        display: flex !important; flex-direction: column !important;
        z-index: 100 !important;
    }
    #kt_app_sidebar .app-sidebar-wrapper { flex: 1 1 auto; min-height: 0; }
    #kt_app_header {
        position: fixed !important; top: 0 !important; left: 250px !important; right: 0 !important;
        z-index: 90 !important;
    }
    #kt_app_wrapper { margin-left: 250px !important; }
    /* NB: l'offset verticale di 70px per l'header fisso è già fornito da Metronic
       (padding-top su .app-wrapper via --kt-app-header-height); non aggiungerne un altro. */
    /* Annulla il margin-right:20px che Metronic mette su .app-main (non lo vogliamo). */
    body:not([data-kt-app-aside-enabled=true]) .app-main { margin-right: 0 !important; }
}
/* Su mobile il brand resta in cima; la sidebar usa il drawer Metronic (off-canvas). */