/* ════════════════════════════════════════════════════════════════════════════
   FOS DESIGN SYSTEM (ds-fos)  ·  v2 — tokenizzato
   --------------------------------------------------------------------------
   Sergiy Grimoldi · Polygon Medisolve Group
   Design system standalone.
   Naming: ds-fos-{block}__{element}--{modifier}
   Toggle theme: <html data-theme="light"> or <html data-theme="dark">

   Novità v2
   · Nessun valore letterale fuori dal LAYER 0: colori, px, pesi, ombre,
     z-index, durate e opacità sono tutti token --ds-fos-*.
   · Nuovi token: scala spacing estesa, border width, icone, pesi, line-height,
     letter-spacing, dimensioni componente, layout shell/modal/auth, motion.
   · Nuovi componenti: ds-fos-auth (login split), ds-fos-stepline,
     ds-fos-divider-label, ds-fos-msg, ds-fos-hint, ds-fos-btn--xl/--pill,
     ds-fos-input--lg/--bar/--otp, ds-fos-spin.
   · LAYER 8: gli stili che stavano nei <style> di index.html, stessi nomi di
     classe, solo token.
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   LAYER 0 — TOKENS
   --------------------------------------------------------------------------
   REGOLA: fuori da questo layer non esistono valori letterali (colori, px,
   pesi, ombre, z-index, durate). Ogni regola dei layer 1–8 usa solo
   var(--ds-fos-*).
   Eccezioni volute: 0, 100%, 50%, 1fr, unità di viewport (100vh / 100dvh) e i
   breakpoint delle @media (le custom property non funzionano nelle media query).

   0a  Scale invarianti (spacing, tipografia, dimensioni, motion, z-index)
   0b  Colori invarianti (chrome scuro dei modal, overlay su media/wallpaper)
   0c  Tema light  (default)
   0d  Tema dark
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 0a · SCALE ─────────────────────────────────────────────────────────── */
:root {
  /* Spacing — da sp-10 in su vale sp-N = 2·N px */
  --ds-fos-sp-1:  2px;
  --ds-fos-sp-2:  4px;
  --ds-fos-sp-3:  6px;
  --ds-fos-sp-4:  8px;
  --ds-fos-sp-5: 10px;
  --ds-fos-sp-6: 12px;
  --ds-fos-sp-7: 14px;
  --ds-fos-sp-8: 16px;
  --ds-fos-sp-10: 20px;
  --ds-fos-sp-12: 24px;
  --ds-fos-sp-16: 32px;
  --ds-fos-sp-20: 40px;
  --ds-fos-sp-24: 48px;

  /* Border & ring widths */
  --ds-fos-bw-thin: 1.5px;
  --ds-fos-bw:      1px;
  --ds-fos-bw-md:   2px;
  --ds-fos-bw-lg:   3px;
  --ds-fos-ring-w:  3px;

  /* Font scale */
  --ds-fos-fs-2xs:  9.5px;
  --ds-fos-fs-xs:  10.5px;
  --ds-fos-fs-sm:  11.5px;
  --ds-fos-fs-md:  12.5px;   /* default UI */
  --ds-fos-fs-lg:  13.5px;
  --ds-fos-fs-xl:  15px;
  --ds-fos-fs-2xl: 18px;
  --ds-fos-fs-3xl: 22px;
  --ds-fos-fs-4xl: 24px;
  --ds-fos-fs-hero:    clamp(38px, 5vw, 64px);
  --ds-fos-fs-hero-sm: 34px;
  --ds-fos-fs-code:    0.92em;

  /* Font weights */
  --ds-fos-fw-regular:  400;
  --ds-fos-fw-medium:   500;
  --ds-fos-fw-semibold: 600;
  --ds-fos-fw-bold:     700;

  /* Line heights */
  --ds-fos-lh-none:  1;
  --ds-fos-lh-tight: 1.05;
  --ds-fos-lh-snug:  1.4;
  --ds-fos-lh-base:  1.5;

  /* Letter spacing */
  --ds-fos-ls-none:    0;
  --ds-fos-ls-tight:  -0.2px;
  --ds-fos-ls-display:-0.02em;
  --ds-fos-ls-xs:      0.2px;
  --ds-fos-ls-sm:      0.3px;
  --ds-fos-ls-md:      0.4px;
  --ds-fos-ls-lg:      0.6px;
  --ds-fos-ls-otp:     2px;

  /* Icon sizes (bootstrap-icons) */
  --ds-fos-icon-xs:  10px;
  --ds-fos-icon-sm:  11px;
  --ds-fos-icon-md:  12px;
  --ds-fos-icon-lg:  13px;
  --ds-fos-icon-xl:  14px;
  --ds-fos-icon-2xl: 16px;
  --ds-fos-icon-3xl: 20px;
  --ds-fos-icon-4xl: 32px;

  /* Control heights */
  --ds-fos-h-row:      30px;
  --ds-fos-h-row-sm:   26px;
  --ds-fos-h-btn:      28px;
  --ds-fos-h-btn-sm:   24px;
  --ds-fos-h-btn-lg:   34px;
  --ds-fos-h-btn-xl:   44px;
  --ds-fos-h-input:    30px;
  --ds-fos-h-input-lg: 40px;
  --ds-fos-h-badge:    20px;
  --ds-fos-h-badge-lg: 24px;
  --ds-fos-h-icon-btn: 26px;
  --ds-fos-h-progress:  8px;

  /* Radius */
  --ds-fos-radius-sm:    4px;
  --ds-fos-radius:       6px;
  --ds-fos-radius-md:    8px;
  --ds-fos-radius-lg:   12px;
  --ds-fos-radius-pill: 9999px;
  --ds-fos-radius-round: 50%;

  /* Status dots */
  --ds-fos-dot-sm:  6px;
  --ds-fos-dot:     8px;
  --ds-fos-dot-lg: 10px;

  /* Component dimensions */
  --ds-fos-check-size:        14px;
  --ds-fos-switch-w:          32px;
  --ds-fos-switch-h:          18px;
  --ds-fos-switch-thumb-size: 14px;
  --ds-fos-switch-gap:         2px;
  --ds-fos-spinner-size:      14px;
  --ds-fos-spinner-size-sm:   12px;
  --ds-fos-spinner-size-lg:   24px;
  --ds-fos-caret-size:         5px;
  --ds-fos-theme-dot-size:    18px;
  --ds-fos-pipeline-circle:   28px;
  --ds-fos-pipeline-link-gap: 18px;
  --ds-fos-pipeline-step-min-w:80px;
  --ds-fos-timeline-indent:   14px;
  --ds-fos-timeline-dot:      10px;
  --ds-fos-form-label-w:     140px;
  --ds-fos-form-grid-min:    220px;
  --ds-fos-search-min-w:     220px;
  --ds-fos-textarea-min-h:    64px;
  --ds-fos-input-icon-pad:    30px;
  --ds-fos-scrollbar-w:        8px;
  --ds-fos-scrollbar-w-thin:   4px;
  --ds-fos-step-num-size:     20px;
  --ds-fos-kpi-min-w:        180px;
  --ds-fos-quicklink-min-w:  100px;
  --ds-fos-progress-label-w: 110px;
  --ds-fos-stat-grid-min-w:  240px;
  --ds-fos-card-grid-min-w:  280px;
  --ds-fos-icon-box:          34px;
  --ds-fos-table-col-icon-w:  36px;
  --ds-fos-table-details-max-w:500px;
  --ds-fos-combo-max-h:       240px;
  --ds-fos-combo-wide-w:      420px;
  --ds-fos-search-w-lg:       360px;
  --ds-fos-note-min-h:         80px;
  --ds-fos-note-max-h:        400px;
  --ds-fos-lookup-w:          480px;
  --ds-fos-filter-panel-w:    240px;
  --ds-fos-rail-w:            208px;
  --ds-fos-field-grid-cols:      4;
  --ds-fos-cols-main:          3fr;
  --ds-fos-cols-side:          2fr;
  --ds-fos-step-num:           22px;
  --ds-fos-stepper-cols:          2;
  --ds-fos-stepper-cols-sm:       1;
  --ds-fos-progress-w:         96px;
  --ds-fos-meter-label-w:     170px;
  --ds-fos-price-input-w:      90px;
  --ds-fos-field-grid-cols-md:   2;
  --ds-fos-field-grid-cols-sm:   1;

  /* App shell */
  --ds-fos-topbar-h:            52px;
  /* Safe area (notch / barra di stato / gesture bar): 0 nei browser normali */
  --ds-fos-safe-top:    env(safe-area-inset-top, 0px);
  --ds-fos-safe-right:  env(safe-area-inset-right, 0px);
  --ds-fos-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ds-fos-safe-left:   env(safe-area-inset-left, 0px);
  --ds-fos-sidebar-w:          220px;
  --ds-fos-sidebar-w-collapsed: 44px;
  --ds-fos-logo-h:              28px;

  /* Modal */
  --ds-fos-modal-w:       680px;
  --ds-fos-modal-w-sm:    440px;
  --ds-fos-modal-w-lg:    900px;
  --ds-fos-modal-w-xl:   1180px;
  --ds-fos-modal-w-full:   96vw;
  --ds-fos-modal-max-h:    92dvh;   /* dvh: area realmente visibile su mobile */
  --ds-fos-modal-max-h-full:96dvh;
  --ds-fos-modal-split-cols: minmax(0, 1.4fr) minmax(0, 1fr);

  /* Auth (login a schermo intero) */
  --ds-fos-auth-cols:        3fr 2fr;   /* wallpaper 60% | form 40% */
  --ds-fos-auth-form-w:      360px;
  --ds-fos-auth-hero-w:      340px;
  --ds-fos-auth-note-w:      420px;
  --ds-fos-auth-logo-w:      120px;
  --ds-fos-auth-media-min-h: 260px;

  /* Stacking */
  --ds-fos-z-raised: 1;
  --ds-fos-z-topbar: 50;
  --ds-fos-z-dropdown: 60;
  --ds-fos-z-modal:  100;

  /* Motion */
  --ds-fos-ease:            ease;
  --ds-fos-transition:      0.15s ease;
  --ds-fos-transition-slow: 0.25s ease;
  --ds-fos-duration-modal:  0.18s;
  --ds-fos-duration-spin:   0.7s;
  --ds-fos-press-offset:    1px;
  --ds-fos-lift:           -2px;
  --ds-fos-scale-hover:     1.15;
  --ds-fos-modal-in-y:      8px;
  --ds-fos-modal-in-scale:  0.98;
  --ds-fos-blur-overlay:    2px;

  /* Opacity */
  --ds-fos-op-disabled: 0.5;
  --ds-fos-op-muted:    0.7;
  --ds-fos-op-soft:     0.85;
  --ds-fos-op-strong:   0.9;

  /* Fonts */
  --ds-fos-font-ui:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ds-fos-font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* ── 0b · COLORI INVARIANTI (uguali in light e dark) ────────────────────── */
:root {
  --ds-fos-switch-thumb:            #ffffff;

  /* Modal header: barra scura in entrambi i temi */
  --ds-fos-modal-header-from:       #171717;
  --ds-fos-modal-header-to:         #292929;
  --ds-fos-modal-header-text:       #ffffff;
  --ds-fos-modal-header-text-soft:  rgba(255, 255, 255, 0.7);
  --ds-fos-modal-header-icon:       rgba(255, 255, 255, 0.85);
  --ds-fos-modal-header-line:       rgba(255, 255, 255, 0.15);
  --ds-fos-modal-header-hover:      rgba(255, 255, 255, 0.1);

  /* Contenuti sopra media (wallpaper video/immagine) */
  --ds-fos-media-bg:                #171717;
  --ds-fos-on-media:                #ffffff;
  --ds-fos-on-media-soft:           rgba(255, 255, 255, 0.9);
  --ds-fos-media-shade-top:         rgba(0, 0, 0, 0.5);
  --ds-fos-media-shade-mid:         rgba(0, 0, 0, 0.25);
  --ds-fos-media-shade-bottom:      rgba(0, 0, 0, 0.55);
  --ds-fos-media-text-shadow:       0 2px 12px rgba(0, 0, 0, 0.45);

  /* Pallini del selettore tema */
  --ds-fos-theme-ocean:             #111111;
}

/* ── 0c · TEMA LIGHT (default) ──────────────────────────────────────────── */
:root,
[data-theme="light"] {
  /* Page surfaces */
  --ds-fos-bg:           #f7f7f7;
  --ds-fos-bg-deep:      #eeeeee;
  --ds-fos-panel:        #ffffff;
  --ds-fos-panel-2:      #ffffff;
  --ds-fos-surface-1:    #fcfcfd;
  --ds-fos-surface-2:    #f8fafc;

  /* Borders */
  --ds-fos-border:       #e7e7e7;
  --ds-fos-border-light: #f4f4f4;
  --ds-fos-border-strong:#d4d4d4;

  /* Text */
  --ds-fos-text:           #292929;
  --ds-fos-text-strong:    #171717;
  --ds-fos-text-secondary: #545454;
  --ds-fos-text-muted:     #a2a2a2;
  --ds-fos-text-on-accent: #ffffff;
  --ds-fos-text-on-dark:   #ffffff;

  /* Accent */
  --ds-fos-accent:         #111111;
  --ds-fos-accent-hover:   #2b2b2b;
  --ds-fos-accent-active:  #000000;
  --ds-fos-accent-soft:    rgba(17,17,17,0.06);
  --ds-fos-accent-tint:    rgba(17,17,17,0.10);
  --ds-fos-accent-ring:    rgba(17,17,17,0.18);

  /* Bande titolo (callout): colore scelto dall'admin in Home › Personalizza.
     Il JS imposta --ds-fos-band su <html>; vuoto = colore accento. */
  --ds-fos-band:           var(--ds-fos-accent);
  --ds-fos-band-soft:      color-mix(in srgb, var(--ds-fos-band) 10%, transparent);

  /* Status palette */
  --ds-fos-success:        #10b981;
  --ds-fos-success-hover:  #059669;
  --ds-fos-success-bg:     #ecfdf5;
  --ds-fos-success-text:   #065f46;
  --ds-fos-success-border: #a7f3d0;

  --ds-fos-warn:           #f59e0b;
  --ds-fos-warn-hover:     #d97706;
  --ds-fos-warn-bg:        #fffbeb;
  --ds-fos-warn-text:      #92400e;
  --ds-fos-warn-border:    #fde68a;

  --ds-fos-danger:         #ef4444;
  --ds-fos-danger-hover:   #dc2626;
  --ds-fos-danger-bg:      #fef2f2;
  --ds-fos-danger-text:    #991b1b;
  --ds-fos-danger-border:  #fecaca;
  --ds-fos-danger-ring:    rgba(239, 68, 68, 0.28);

  --ds-fos-info:           #858585;
  --ds-fos-info-bg:        #f5f5f5;
  --ds-fos-info-text:      #4b4b4b;
  --ds-fos-info-border:    #d8d8d8;
  --ds-fos-violet:         #7c3aed;
  --ds-fos-violet-bg:      #f5f3ff;
  --ds-fos-violet-text:    #5b21b6;
  --ds-fos-violet-border:  #ddd6fe;

  /* Inputs / Modals / Overlays */
  --ds-fos-input-bg:       #ffffff;
  --ds-fos-input-border:   #e7e7e7;
  --ds-fos-field-cell-bg:  var(--ds-fos-bg);
  --ds-fos-input-disabled: #f4f4f4;
  --ds-fos-modal-bg:       #ffffff;
  --ds-fos-overlay:        rgba(23,23,23,0.34);

  /* Tables */
  --ds-fos-thead-bg:       #f8fafc;
  --ds-fos-thead-text:     #737373;
  --ds-fos-row-hover:      #f8fafc;
  --ds-fos-row-alt:        #fcfcfd;
  --ds-fos-row-selected:   #f5f5f5;

  /* Shadows */
  --ds-fos-shadow-xs:    0 1px 2px rgba(23,23,23,0.04);
  --ds-fos-shadow-sm:    0 1px 3px rgba(23,23,23,0.05), 0 1px 2px rgba(23,23,23,0.04);
  --ds-fos-shadow-md:    0 4px 12px rgba(23,23,23,0.06), 0 2px 4px rgba(23,23,23,0.04);
  --ds-fos-shadow-lg:    0 10px 25px rgba(23,23,23,0.08), 0 4px 10px rgba(23,23,23,0.04);
  --ds-fos-shadow-modal: 0 24px 48px rgba(23,23,23,0.18), 0 8px 16px rgba(23,23,23,0.08);
}

/* ── 0d · TEMA DARK ─────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --ds-fos-bg:           #171717;
  --ds-fos-bg-deep:      #070707;
  --ds-fos-panel:        #292929;
  --ds-fos-panel-2:      #292929;
  --ds-fos-surface-1:    #242424;
  --ds-fos-surface-2:    #343434;

  --ds-fos-border:       #404040;
  --ds-fos-border-light: #292929;
  --ds-fos-border-strong:#545454;

  --ds-fos-text:           #e7e7e7;
  --ds-fos-text-strong:    #f4f4f4;
  --ds-fos-text-secondary: #d4d4d4;
  --ds-fos-text-muted:     #737373;
  --ds-fos-text-on-accent: #ffffff;
  --ds-fos-text-on-dark:   #ffffff;

  --ds-fos-accent:         #a2a2a2;
  --ds-fos-accent-hover:   #858585;
  --ds-fos-accent-active:  #6d6d6d;
  --ds-fos-accent-soft:    rgba(162,162,162,0.12);
  --ds-fos-accent-tint:    rgba(162,162,162,0.16);
  --ds-fos-accent-ring:    rgba(162,162,162,0.28);

  --ds-fos-success:        #34d399;
  --ds-fos-success-hover:  #10b981;
  --ds-fos-success-bg:     rgba(16, 185, 129, 0.12);
  --ds-fos-success-text:   #6ee7b7;
  --ds-fos-success-border: rgba(16, 185, 129, 0.3);

  --ds-fos-warn:           #fbbf24;
  --ds-fos-warn-hover:     #f59e0b;
  --ds-fos-warn-bg:        rgba(245, 158, 11, 0.12);
  --ds-fos-warn-text:      #fcd34d;
  --ds-fos-warn-border:    rgba(245, 158, 11, 0.3);

  --ds-fos-danger:         #f87171;
  --ds-fos-danger-hover:   #ef4444;
  --ds-fos-danger-bg:      rgba(239, 68, 68, 0.12);
  --ds-fos-danger-text:    #fca5a5;
  --ds-fos-danger-border:  rgba(239, 68, 68, 0.3);
  --ds-fos-danger-ring:    rgba(248, 113, 113, 0.32);

  --ds-fos-info:           #a2a2a2;
  --ds-fos-info-bg:        rgba(133,133,133,0.12);
  --ds-fos-info-text:      #c1c1c1;
  --ds-fos-violet:         #a78bfa;
  --ds-fos-violet-bg:      rgba(139, 92, 246, 0.14);
  --ds-fos-violet-text:    #c4b5fd;
  --ds-fos-violet-border:  rgba(139, 92, 246, 0.35);
  --ds-fos-info-border:    rgba(133,133,133,0.3);

  --ds-fos-input-bg:       #242424;
  --ds-fos-input-border:   #404040;
  --ds-fos-field-cell-bg:  var(--ds-fos-surface-2);
  --ds-fos-input-disabled: #292929;
  --ds-fos-modal-bg:       #292929;
  --ds-fos-overlay:        rgba(0, 0, 0, 0.6);

  --ds-fos-thead-bg:       #242424;
  --ds-fos-thead-text:     #a2a2a2;
  --ds-fos-row-hover:      #343434;
  --ds-fos-row-alt:        #242424;
  --ds-fos-row-selected:   rgba(162,162,162,0.12);

  --ds-fos-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.2);
  --ds-fos-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --ds-fos-shadow-md:    0 4px 12px rgba(0, 0, 0, 0.3);
  --ds-fos-shadow-lg:    0 10px 25px rgba(0, 0, 0, 0.4);
  --ds-fos-shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* ════════════════════════════════════════════════════════════════════════════
   LAYER 1 — RESET MINIMO (solo elementi DS-prefixed)
   ════════════════════════════════════════════════════════════════════════════ */

[class^="ds-fos-"], [class*=" ds-fos-"] {
  box-sizing: border-box;
}

/* ════════════════════════════════════════════════════════════════════════════
   LAYER 2 — COMPONENTI ATOMICI
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── BUTTON ─────────────────────────────────────────────────────────────── */
.ds-fos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-fos-sp-3);
  height: var(--ds-fos-h-btn);
  padding: 0 var(--ds-fos-sp-6);
  font-family: var(--ds-fos-font-ui);
  font-size: var(--ds-fos-fs-md);
  font-weight: var(--ds-fos-fw-medium);
  line-height: var(--ds-fos-lh-none);
  white-space: nowrap;
  border: var(--ds-fos-bw) solid var(--ds-fos-accent);
  background: var(--ds-fos-accent);
  color: var(--ds-fos-text-on-accent);
  border-radius: var(--ds-fos-radius);
  cursor: pointer;
  transition: all var(--ds-fos-transition);
  user-select: none;
}
.ds-fos-btn i { font-size: var(--ds-fos-icon-md); }
.ds-fos-btn:hover { background: var(--ds-fos-accent-hover); border-color: var(--ds-fos-accent-hover); }
.ds-fos-btn:active { background: var(--ds-fos-accent-active); transform: translateY(var(--ds-fos-press-offset)); }
.ds-fos-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ds-fos-ring-w) var(--ds-fos-accent-ring);
}
.ds-fos-btn:disabled,
.ds-fos-btn[aria-disabled="true"] {
  opacity: var(--ds-fos-op-disabled); cursor: not-allowed; transform: none;
  background: var(--ds-fos-accent); border-color: var(--ds-fos-accent);
}

/* Button variants */
.ds-fos-btn--secondary {
  background: var(--ds-fos-panel);
  border-color: var(--ds-fos-border);
  color: var(--ds-fos-text);
}
.ds-fos-btn--secondary:hover { background: var(--ds-fos-surface-1); border-color: var(--ds-fos-border-strong); }
.ds-fos-btn--secondary:active { background: var(--ds-fos-surface-2); }

.ds-fos-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ds-fos-text-secondary);
}
.ds-fos-btn--ghost:hover { background: var(--ds-fos-surface-1); color: var(--ds-fos-text); border-color: transparent; }

.ds-fos-btn--link {
  background: transparent; border-color: transparent;
  color: var(--ds-fos-accent);
  height: auto; padding: 0;
}
.ds-fos-btn--link:hover { background: transparent; border-color: transparent; text-decoration: underline; }

.ds-fos-btn--danger {
  background: var(--ds-fos-danger); border-color: var(--ds-fos-danger);
}
.ds-fos-btn--danger:hover { background: var(--ds-fos-danger-hover); border-color: var(--ds-fos-danger-hover); }
.ds-fos-btn--danger:focus-visible { box-shadow: 0 0 0 var(--ds-fos-ring-w) var(--ds-fos-danger-ring); }

.ds-fos-btn--success {
  background: var(--ds-fos-success); border-color: var(--ds-fos-success);
}
.ds-fos-btn--success:hover { background: var(--ds-fos-success-hover); border-color: var(--ds-fos-success-hover); }

.ds-fos-btn--warning {
  background: var(--ds-fos-warn); border-color: var(--ds-fos-warn);
  color: var(--ds-fos-text-on-accent);
}
.ds-fos-btn--warning:hover { background: var(--ds-fos-warn-hover); border-color: var(--ds-fos-warn-hover); }

/* Button sizes */
.ds-fos-btn--sm { height: var(--ds-fos-h-btn-sm); padding: 0 var(--ds-fos-sp-4); font-size: var(--ds-fos-fs-sm); }
.ds-fos-btn--sm i { font-size: var(--ds-fos-icon-sm); }
.ds-fos-btn--lg { height: var(--ds-fos-h-btn-lg); padding: 0 var(--ds-fos-sp-8); font-size: var(--ds-fos-fs-lg); }
.ds-fos-btn--lg i { font-size: var(--ds-fos-icon-xl); }

/* Icon-only square button */
.ds-fos-btn--icon { width: var(--ds-fos-h-btn); padding: 0; }
.ds-fos-btn--icon.ds-fos-btn--sm { width: var(--ds-fos-h-btn-sm); }
.ds-fos-btn--icon.ds-fos-btn--lg { width: var(--ds-fos-h-btn-lg); }

/* Loading state */
.ds-fos-btn--loading { pointer-events: none; opacity: var(--ds-fos-op-muted); position: relative; color: transparent !important; }
.ds-fos-btn--loading::after {
  content: ""; position: absolute; width: var(--ds-fos-spinner-size); height: var(--ds-fos-spinner-size);
  border: var(--ds-fos-bw-md) solid currentColor; border-top-color: transparent; border-radius: var(--ds-fos-radius-round);
  animation: ds-fos-spin var(--ds-fos-duration-spin) linear infinite;
  color: var(--ds-fos-text-on-accent);
}
.ds-fos-btn--loading.ds-fos-btn--secondary::after,
.ds-fos-btn--loading.ds-fos-btn--ghost::after { color: var(--ds-fos-text-secondary); }

@keyframes ds-fos-spin { to { transform: rotate(360deg); } }

/* Button group */
.ds-fos-btn-group { display: inline-flex; }
.ds-fos-btn-group > .ds-fos-btn { border-radius: 0; margin-left: calc(var(--ds-fos-bw) * -1); }
.ds-fos-btn-group > .ds-fos-btn:first-child { border-radius: var(--ds-fos-radius) 0 0 var(--ds-fos-radius); margin-left: 0; }
.ds-fos-btn-group > .ds-fos-btn:last-child  { border-radius: 0 var(--ds-fos-radius) var(--ds-fos-radius) 0; }
.ds-fos-btn-group > .ds-fos-btn:hover { z-index: var(--ds-fos-z-raised); }

/* ─── INPUT / SELECT / TEXTAREA ──────────────────────────────────────────── */
.ds-fos-input,
.ds-fos-select,
.ds-fos-textarea {
  display: block;
  width: 100%;
  height: var(--ds-fos-h-input);
  padding: 0 var(--ds-fos-sp-4);
  font-family: var(--ds-fos-font-ui);
  font-size: var(--ds-fos-fs-md);
  font-weight: var(--ds-fos-fw-regular);
  line-height: var(--ds-fos-lh-snug);
  color: var(--ds-fos-text);
  background: var(--ds-fos-input-bg);
  border: var(--ds-fos-bw) solid var(--ds-fos-input-border);
  border-radius: var(--ds-fos-radius);
  outline: none;
  transition: border-color var(--ds-fos-transition), box-shadow var(--ds-fos-transition);
}
.ds-fos-input::placeholder,
.ds-fos-textarea::placeholder { color: var(--ds-fos-text-muted); }

.ds-fos-input:hover,
.ds-fos-select:hover,
.ds-fos-textarea:hover { border-color: var(--ds-fos-border-strong); }

.ds-fos-input:focus,
.ds-fos-select:focus,
.ds-fos-textarea:focus {
  border-color: var(--ds-fos-accent);
  box-shadow: 0 0 0 var(--ds-fos-ring-w) var(--ds-fos-accent-ring);
}

.ds-fos-input:disabled,
.ds-fos-select:disabled,
.ds-fos-textarea:disabled {
  background: var(--ds-fos-input-disabled);
  color: var(--ds-fos-text-muted);
  cursor: not-allowed;
}

.ds-fos-textarea {
  height: auto;
  padding: var(--ds-fos-sp-3) var(--ds-fos-sp-4);
  resize: vertical;
  min-height: var(--ds-fos-textarea-min-h);
  line-height: var(--ds-fos-lh-base);
}

.ds-fos-select {
  appearance: none;
  cursor: pointer;
  padding-right: var(--ds-fos-sp-10);
  /* Caret con due gradienti: il colore segue il tema (una data-URI non può usare var()) */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ds-fos-text-muted) 50%),
    linear-gradient(135deg, var(--ds-fos-text-muted) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position:
    calc(100% - var(--ds-fos-sp-10)) 50%,
    calc(100% - var(--ds-fos-sp-10) + var(--ds-fos-caret-size)) 50%;
  background-size: var(--ds-fos-caret-size) var(--ds-fos-caret-size);
}

/* Input sizes */
.ds-fos-input--sm,
.ds-fos-select--sm,
.ds-fos-textarea--sm { height: var(--ds-fos-h-row-sm); font-size: var(--ds-fos-fs-sm); padding: 0 var(--ds-fos-sp-3); }

/* Input with leading icon */
.ds-fos-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.ds-fos-input-wrap > .ds-fos-input { padding-left: var(--ds-fos-input-icon-pad); }
.ds-fos-input-wrap > i.bi {
  position: absolute;
  left: var(--ds-fos-sp-4);
  font-size: var(--ds-fos-icon-lg);
  color: var(--ds-fos-text-muted);
  pointer-events: none;
}

/* ─── LABEL ──────────────────────────────────────────────────────────────── */
.ds-fos-label {
  display: block;
  font-size: var(--ds-fos-fs-sm);
  font-weight: var(--ds-fos-fw-medium);
  color: var(--ds-fos-text-secondary);
  margin-bottom: var(--ds-fos-sp-2);
}
.ds-fos-label--required::after {
  content: " *";
  color: var(--ds-fos-danger);
}

/* ─── CHECKBOX & RADIO ───────────────────────────────────────────────────── */
.ds-fos-check {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-fos-sp-3);
  font-size: var(--ds-fos-fs-md);
  color: var(--ds-fos-text);
  cursor: pointer;
  user-select: none;
}
.ds-fos-check input[type="checkbox"],
.ds-fos-check input[type="radio"] {
  width: var(--ds-fos-check-size); height: var(--ds-fos-check-size);
  accent-color: var(--ds-fos-accent);
  cursor: pointer;
}
.ds-fos-check input[disabled] + span { opacity: var(--ds-fos-op-disabled); cursor: not-allowed; }

/* ─── SWITCH (toggle) ────────────────────────────────────────────────────── */
.ds-fos-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-fos-sp-3);
  cursor: pointer;
  user-select: none;
  font-size: var(--ds-fos-fs-md);
  color: var(--ds-fos-text);
}
.ds-fos-switch input { display: none; }
.ds-fos-switch__track {
  position: relative;
  width: var(--ds-fos-switch-w); height: var(--ds-fos-switch-h);
  background: var(--ds-fos-border-strong);
  border-radius: var(--ds-fos-radius-pill);
  transition: background var(--ds-fos-transition);
}
.ds-fos-switch__track::before {
  content: ""; position: absolute;
  top: var(--ds-fos-switch-gap); left: var(--ds-fos-switch-gap);
  width: var(--ds-fos-switch-thumb-size); height: var(--ds-fos-switch-thumb-size);
  background: var(--ds-fos-switch-thumb);
  border-radius: var(--ds-fos-radius-round);
  transition: transform var(--ds-fos-transition);
  box-shadow: var(--ds-fos-shadow-xs);
}
.ds-fos-switch input:checked + .ds-fos-switch__track { background: var(--ds-fos-accent); }
.ds-fos-switch input:checked + .ds-fos-switch__track::before { transform: translateX(calc(var(--ds-fos-switch-w) - var(--ds-fos-switch-thumb-size) - 2 * var(--ds-fos-switch-gap))); }

/* ─── BADGE ──────────────────────────────────────────────────────────────── */
.ds-fos-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-fos-sp-2);
  height: var(--ds-fos-h-badge);
  padding: 0 var(--ds-fos-sp-3);
  font-size: var(--ds-fos-fs-xs);
  font-weight: var(--ds-fos-fw-semibold);
  line-height: var(--ds-fos-lh-none);
  color: var(--ds-fos-text-secondary);
  background: var(--ds-fos-surface-2);
  border: var(--ds-fos-bw) solid var(--ds-fos-border);
  border-radius: var(--ds-fos-radius-sm);
  white-space: nowrap;
  letter-spacing: var(--ds-fos-ls-xs);
}
.ds-fos-badge i { font-size: var(--ds-fos-icon-xs); }
.ds-fos-badge--success { background: var(--ds-fos-success-bg); color: var(--ds-fos-success-text); border-color: var(--ds-fos-success-border); }
.ds-fos-badge--warning { background: var(--ds-fos-warn-bg); color: var(--ds-fos-warn-text); border-color: var(--ds-fos-warn-border); }
.ds-fos-badge--danger  { background: var(--ds-fos-danger-bg); color: var(--ds-fos-danger-text); border-color: var(--ds-fos-danger-border); }
.ds-fos-badge--info    { background: var(--ds-fos-info-bg); color: var(--ds-fos-info-text); border-color: var(--ds-fos-info-border); }
.ds-fos-badge--accent  { background: var(--ds-fos-accent-soft); color: var(--ds-fos-accent); border-color: var(--ds-fos-accent-soft); }
.ds-fos-badge--solid   { background: var(--ds-fos-accent); color: var(--ds-fos-text-on-accent); border-color: var(--ds-fos-accent); }
.ds-fos-badge--solid.ds-fos-badge--success { background: var(--ds-fos-success); color: var(--ds-fos-text-on-accent); border-color: var(--ds-fos-success); }
.ds-fos-badge--solid.ds-fos-badge--warning { background: var(--ds-fos-warn); color: var(--ds-fos-text-on-accent); border-color: var(--ds-fos-warn); }
.ds-fos-badge--solid.ds-fos-badge--danger  { background: var(--ds-fos-danger); color: var(--ds-fos-text-on-accent); border-color: var(--ds-fos-danger); }
.ds-fos-badge--pill    { border-radius: var(--ds-fos-radius-pill); padding: 0 var(--ds-fos-sp-4); }
.ds-fos-badge--lg      { height: var(--ds-fos-h-badge-lg); font-size: var(--ds-fos-fs-sm); padding: 0 var(--ds-fos-sp-4); }
.ds-fos-badge--dot::before {
  content: ""; display: inline-block;
  width: var(--ds-fos-dot-sm); height: var(--ds-fos-dot-sm);
  border-radius: var(--ds-fos-radius-round);
  background: currentColor;
  margin-right: var(--ds-fos-sp-1);
}

/* ─── SPINNER ────────────────────────────────────────────────────────────── */
.ds-fos-spinner {
  display: inline-block;
  width: var(--ds-fos-spinner-size); height: var(--ds-fos-spinner-size);
  border: var(--ds-fos-bw-md) solid var(--ds-fos-border);
  border-top-color: var(--ds-fos-accent);
  border-radius: var(--ds-fos-radius-round);
  animation: ds-fos-spin var(--ds-fos-duration-spin) linear infinite;
}
.ds-fos-spinner--sm { width: var(--ds-fos-spinner-size-sm); height: var(--ds-fos-spinner-size-sm); border-width: var(--ds-fos-bw-thin); }
.ds-fos-spinner--lg { width: var(--ds-fos-spinner-size-lg); height: var(--ds-fos-spinner-size-lg); border-width: var(--ds-fos-bw-lg); }

/* ─── CODE / KBD inline ──────────────────────────────────────────────────── */
.ds-fos-code {
  font-family: var(--ds-fos-font-mono);
  font-size: var(--ds-fos-fs-code);
  padding: var(--ds-fos-sp-1) var(--ds-fos-sp-3);
  background: var(--ds-fos-surface-2);
  border: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  border-radius: var(--ds-fos-radius-sm);
  color: var(--ds-fos-text-strong);
}

/* ─── DIVIDER ────────────────────────────────────────────────────────────── */
.ds-fos-divider {
  height: var(--ds-fos-bw);
  background: var(--ds-fos-border-light);
  border: 0;
  margin: var(--ds-fos-sp-6) 0;
}
.ds-fos-divider--vertical {
  width: var(--ds-fos-bw); height: auto; align-self: stretch;
  margin: 0 var(--ds-fos-sp-4);
}

/* ════════════════════════════════════════════════════════════════════════════
   LAYER 3 — COMPONENTI MOLECOLARI
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── CARD ───────────────────────────────────────────────────────────────── */
.ds-fos-card {
  background: var(--ds-fos-panel);
  border: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  border-radius: var(--ds-fos-radius-md);
  box-shadow: var(--ds-fos-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ds-fos-card--flat   { box-shadow: none; }
.ds-fos-card--ghost  { background: transparent; border-color: var(--ds-fos-border-light); box-shadow: none; }

.ds-fos-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-fos-sp-4);
  padding: var(--ds-fos-sp-5) var(--ds-fos-sp-7);
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  background: var(--ds-fos-surface-1);
}
.ds-fos-card__title {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-3);
  font-size: var(--ds-fos-fs-sm);
  font-weight: var(--ds-fos-fw-bold);
  color: var(--ds-fos-text);
  text-transform: uppercase;
  letter-spacing: var(--ds-fos-ls-md);
  margin: 0;
}
.ds-fos-card__title i { font-size: var(--ds-fos-icon-xl); color: var(--ds-fos-accent); }
.ds-fos-card__sub {
  font-size: var(--ds-fos-fs-xs);
  color: var(--ds-fos-text-muted);
  font-weight: var(--ds-fos-fw-regular);
  letter-spacing: var(--ds-fos-ls-none);
  text-transform: none;
}
.ds-fos-card__actions { display: flex; align-items: center; gap: var(--ds-fos-sp-3); }
.ds-fos-card__body    { padding: var(--ds-fos-sp-7); flex: 1; }
.ds-fos-card__body--flush { padding: 0; }
.ds-fos-card__footer  {
  padding: var(--ds-fos-sp-5) var(--ds-fos-sp-7);
  border-top: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  background: var(--ds-fos-surface-1);
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-fos-sp-3);
}

/* ─── SECTION (titled box, lighter than card) ───────────────────────────── */
.ds-fos-section {
  background: var(--ds-fos-panel);
  border: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  border-radius: var(--ds-fos-radius);
  overflow: hidden;
}
.ds-fos-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-fos-sp-4);
  padding: var(--ds-fos-sp-3) var(--ds-fos-sp-5);
  background: var(--ds-fos-surface-1);
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border-light);
}
.ds-fos-section__title {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-3);
  font-size: var(--ds-fos-fs-sm);
  font-weight: var(--ds-fos-fw-semibold);
  color: var(--ds-fos-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ds-fos-ls-md);
  margin: 0;
}
.ds-fos-section__title i { font-size: var(--ds-fos-icon-md); color: var(--ds-fos-accent); }
.ds-fos-section__count {
  font-size: var(--ds-fos-fs-xs);
  color: var(--ds-fos-text-muted);
  background: var(--ds-fos-surface-2);
  padding: var(--ds-fos-sp-1) var(--ds-fos-sp-3);
  border-radius: var(--ds-fos-radius-sm);
  font-weight: var(--ds-fos-fw-semibold);
}
.ds-fos-section__body { padding: var(--ds-fos-sp-5); }
.ds-fos-section__body--flush { padding: 0; }

/* ─── TOOLBAR ────────────────────────────────────────────────────────────── */
.ds-fos-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-fos-sp-3);
  align-items: center;
  padding: var(--ds-fos-sp-3) var(--ds-fos-sp-5);
  background: var(--ds-fos-panel);
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border-light);
}
.ds-fos-toolbar__title {
  font-size: var(--ds-fos-fs-md);
  font-weight: var(--ds-fos-fw-semibold);
  color: var(--ds-fos-text);
  margin: 0;
}
.ds-fos-toolbar__spacer { flex: 1; }
.ds-fos-toolbar__group {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-fos-sp-2);
}

.ds-fos-toolbar-search {
  position: relative;
  min-width: var(--ds-fos-search-min-w);
}
.ds-fos-toolbar-search > .ds-fos-input { padding-left: var(--ds-fos-input-icon-pad); }
.ds-fos-toolbar-search > i.bi {
  position: absolute;
  left: var(--ds-fos-sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ds-fos-text-muted);
  font-size: var(--ds-fos-icon-lg);
  pointer-events: none;
}

/* ─── FORM ROW & GRID ────────────────────────────────────────────────────── */
.ds-fos-form-row {
  display: grid;
  grid-template-columns: var(--ds-fos-form-label-w) 1fr;
  align-items: center;
  gap: var(--ds-fos-sp-4);
  padding: var(--ds-fos-sp-3) 0;
}
.ds-fos-form-row__label {
  font-size: var(--ds-fos-fs-sm);
  color: var(--ds-fos-text-secondary);
  font-weight: var(--ds-fos-fw-medium);
}
.ds-fos-form-row__value { color: var(--ds-fos-text); font-size: var(--ds-fos-fs-md); }
.ds-fos-form-row__hint {
  font-size: var(--ds-fos-fs-xs);
  color: var(--ds-fos-text-muted);
  margin-top: var(--ds-fos-sp-1);
}

.ds-fos-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ds-fos-form-grid-min), 1fr));
  gap: var(--ds-fos-sp-5) var(--ds-fos-sp-7);
}

/* Field used in anagrafica grids — label on top */
.ds-fos-field {
  display: flex;
  flex-direction: column;
  gap: var(--ds-fos-sp-2);
  min-width: 0;
}
.ds-fos-field__label {
  font-size: var(--ds-fos-fs-xs);
  color: var(--ds-fos-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ds-fos-ls-md);
  font-weight: var(--ds-fos-fw-semibold);
}
.ds-fos-field__value {
  font-size: var(--ds-fos-fs-md);
  color: var(--ds-fos-text);
  word-break: break-word;
}
.ds-fos-field__value--muted { color: var(--ds-fos-text-muted); font-style: italic; }
.ds-fos-field__value--mono  { font-family: var(--ds-fos-font-mono); font-size: var(--ds-fos-fs-sm); }

/* ─── EMPTY STATE ────────────────────────────────────────────────────────── */
.ds-fos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--ds-fos-sp-12) var(--ds-fos-sp-8);
  color: var(--ds-fos-text-muted);
  gap: var(--ds-fos-sp-3);
}
.ds-fos-empty__icon {
  font-size: var(--ds-fos-icon-4xl);
  color: var(--ds-fos-text-muted);
  opacity: var(--ds-fos-op-disabled);
}
.ds-fos-empty__title { font-size: var(--ds-fos-fs-md); font-weight: var(--ds-fos-fw-semibold); color: var(--ds-fos-text-secondary); }
.ds-fos-empty__hint  { font-size: var(--ds-fos-fs-sm); }

/* ─── BANNER ─────────────────────────────────────────────────────────────── */
.ds-fos-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-fos-sp-4);
  padding: var(--ds-fos-sp-5) var(--ds-fos-sp-6);
  border-radius: var(--ds-fos-radius);
  border: var(--ds-fos-bw) solid var(--ds-fos-info-border);
  background: var(--ds-fos-info-bg);
  color: var(--ds-fos-info-text);
  font-size: var(--ds-fos-fs-md);
  line-height: var(--ds-fos-lh-base);
}
.ds-fos-banner > i.bi { font-size: var(--ds-fos-icon-2xl); flex-shrink: 0; margin-top: var(--ds-fos-bw); }
.ds-fos-banner__title { font-weight: var(--ds-fos-fw-semibold); margin-bottom: var(--ds-fos-sp-1); }
.ds-fos-banner__body { flex: 1; }
.ds-fos-banner__close {
  background: transparent; border: 0; color: inherit;
  cursor: pointer; padding: var(--ds-fos-sp-1); opacity: var(--ds-fos-op-muted);
}
.ds-fos-banner__close:hover { opacity: 1; }

.ds-fos-banner--success { background: var(--ds-fos-success-bg); border-color: var(--ds-fos-success-border); color: var(--ds-fos-success-text); }
.ds-fos-banner--warning { background: var(--ds-fos-warn-bg); border-color: var(--ds-fos-warn-border); color: var(--ds-fos-warn-text); }
.ds-fos-banner--danger  { background: var(--ds-fos-danger-bg); border-color: var(--ds-fos-danger-border); color: var(--ds-fos-danger-text); }

/* ─── TABLE ──────────────────────────────────────────────────────────────── */
.ds-fos-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--ds-fos-radius);
  border: var(--ds-fos-bw) solid var(--ds-fos-border-light);
}
.ds-fos-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ds-fos-panel);
  font-size: var(--ds-fos-fs-md);
}
.ds-fos-table thead th {
  background: var(--ds-fos-thead-bg);
  color: var(--ds-fos-thead-text);
  font-size: var(--ds-fos-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ds-fos-ls-md);
  font-weight: var(--ds-fos-fw-semibold);
  padding: var(--ds-fos-sp-3) var(--ds-fos-sp-5);
  text-align: left;
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border);
  white-space: nowrap;
  position: sticky; top: 0;
}
.ds-fos-table tbody td {
  padding: var(--ds-fos-sp-3) var(--ds-fos-sp-5);
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  color: var(--ds-fos-text);
  vertical-align: middle;
}
.ds-fos-table tbody tr { transition: background var(--ds-fos-transition); cursor: default; }
.ds-fos-table tbody tr:hover { background: var(--ds-fos-row-hover); }
.ds-fos-table--zebra tbody tr:nth-child(even) { background: var(--ds-fos-row-alt); }
.ds-fos-table--zebra tbody tr:nth-child(even):hover { background: var(--ds-fos-row-hover); }
.ds-fos-table tbody tr:last-child td { border-bottom: none; }
.ds-fos-table--clickable tbody tr { cursor: pointer; }
.ds-fos-table tr.ds-fos-table__row--selected { background: var(--ds-fos-row-selected) !important; }
.ds-fos-table--compact tbody td { padding: var(--ds-fos-sp-2) var(--ds-fos-sp-4); }

/* ════════════════════════════════════════════════════════════════════════════
   LAYER 4 — PATTERN COMPOSITI
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── MODAL ──────────────────────────────────────────────────────────────── */
.ds-fos-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--ds-fos-overlay);
  backdrop-filter: blur(var(--ds-fos-blur-overlay));
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(var(--ds-fos-sp-6), var(--ds-fos-safe-top))
    max(var(--ds-fos-sp-6), var(--ds-fos-safe-right))
    max(var(--ds-fos-sp-6), var(--ds-fos-safe-bottom))
    max(var(--ds-fos-sp-6), var(--ds-fos-safe-left));
  z-index: var(--ds-fos-z-modal);
  animation: ds-fos-fade-in var(--ds-fos-duration-modal) var(--ds-fos-ease);
}
.ds-fos-modal-backdrop[hidden] { display: none; }

@keyframes ds-fos-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-fos-modal-in {
  from { opacity: 0; transform: translateY(var(--ds-fos-modal-in-y)) scale(var(--ds-fos-modal-in-scale)); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ds-fos-modal {
  width: min(var(--ds-fos-modal-w), 100%);
  max-height: var(--ds-fos-modal-max-h);
  display: flex;
  flex-direction: column;
  background: var(--ds-fos-modal-bg);
  border: var(--ds-fos-bw) solid var(--ds-fos-border);
  border-radius: var(--ds-fos-radius-lg);
  box-shadow: var(--ds-fos-shadow-modal);
  animation: ds-fos-modal-in var(--ds-fos-duration-modal) var(--ds-fos-ease);
  overflow: hidden;
}
.ds-fos-modal--sm    { width: min(var(--ds-fos-modal-w-sm), 100%); }
.ds-fos-modal--lg    { width: min(var(--ds-fos-modal-w-lg), 100%); }
.ds-fos-modal--xl    { width: min(var(--ds-fos-modal-w-xl), 100%); }
.ds-fos-modal--full  { width: var(--ds-fos-modal-w-full); max-height: var(--ds-fos-modal-max-h-full); }

.ds-fos-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-fos-sp-4);
  padding: var(--ds-fos-sp-5) var(--ds-fos-sp-7);
  background: linear-gradient(var(--ds-fos-modal-header-from), var(--ds-fos-modal-header-to));
  color: var(--ds-fos-modal-header-text);
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border);
  flex-shrink: 0;
}
.ds-fos-modal__title {
  font-size: var(--ds-fos-fs-md);
  font-weight: var(--ds-fos-fw-semibold);
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-3);
  flex-wrap: wrap;
  margin: 0;
  color: var(--ds-fos-modal-header-text);
}
.ds-fos-modal__title i { font-size: var(--ds-fos-icon-xl); opacity: var(--ds-fos-op-strong); }
.ds-fos-modal__sub {
  font-size: var(--ds-fos-fs-xs);
  color: var(--ds-fos-modal-header-text-soft);
  font-weight: var(--ds-fos-fw-regular);
}
.ds-fos-modal__actions {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-3);
}
.ds-fos-modal__close {
  background: transparent;
  border: var(--ds-fos-bw) solid var(--ds-fos-modal-header-line);
  color: var(--ds-fos-modal-header-icon);
  width: var(--ds-fos-h-icon-btn); height: var(--ds-fos-h-icon-btn);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: var(--ds-fos-radius-sm);
  transition: all var(--ds-fos-transition);
}
.ds-fos-modal__close:hover { background: var(--ds-fos-modal-header-hover); color: var(--ds-fos-modal-header-text); }

.ds-fos-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ds-fos-sp-7);
}
.ds-fos-modal__body--flush { padding: 0; }

.ds-fos-modal__footer {
  padding: var(--ds-fos-sp-5) var(--ds-fos-sp-7);
  border-top: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  background: var(--ds-fos-surface-1);
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-fos-sp-3);
  flex-shrink: 0;
}

/* MODAL SPLIT — main / side columns (60/40) */
.ds-fos-modal--split .ds-fos-modal__body {
  display: grid;
  grid-template-columns: var(--ds-fos-modal-split-cols);
  gap: 0;
  padding: 0;
}
.ds-fos-modal__col {
  padding: var(--ds-fos-sp-7);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ds-fos-sp-5);
}
.ds-fos-modal__col--side {
  background: var(--ds-fos-surface-1);
  border-left: var(--ds-fos-bw) solid var(--ds-fos-border-light);
}
@media (max-width: 900px) {
  .ds-fos-modal--split .ds-fos-modal__body { grid-template-columns: 1fr; }
  .ds-fos-modal__col--side { border-left: 0; border-top: var(--ds-fos-bw) solid var(--ds-fos-border-light); }
}

/* ─── MAIL LIST (expandable items) ───────────────────────────────────────── */
.ds-fos-mail-list { display: flex; flex-direction: column; }
.ds-fos-mail-item {
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  background: var(--ds-fos-panel);
  transition: background var(--ds-fos-transition);
}
.ds-fos-mail-item:last-child { border-bottom: 0; }
.ds-fos-mail-item--inbound { background: var(--ds-fos-info-bg); }

.ds-fos-mail-item__head {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-3);
  padding: var(--ds-fos-sp-3) var(--ds-fos-sp-5);
  cursor: pointer;
  user-select: none;
  font-size: var(--ds-fos-fs-sm);
}
.ds-fos-mail-item__head:hover { background: var(--ds-fos-row-hover); }
.ds-fos-mail-item__icon { color: var(--ds-fos-text-muted); font-size: var(--ds-fos-icon-lg); flex-shrink: 0; }
.ds-fos-mail-item--inbound .ds-fos-mail-item__icon { color: var(--ds-fos-accent); }
.ds-fos-mail-item__date {
  color: var(--ds-fos-text-muted);
  font-family: var(--ds-fos-font-mono);
  font-size: var(--ds-fos-fs-xs);
  white-space: nowrap;
  flex-shrink: 0;
}
.ds-fos-mail-item__subject {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ds-fos-text);
}
.ds-fos-mail-item__chevron {
  color: var(--ds-fos-text-muted);
  font-size: var(--ds-fos-icon-sm);
  transition: transform var(--ds-fos-transition);
  flex-shrink: 0;
}
.ds-fos-mail-item.is-open .ds-fos-mail-item__chevron { transform: rotate(90deg); }

.ds-fos-mail-item__detail {
  display: none;
  padding: var(--ds-fos-sp-3) var(--ds-fos-sp-5) var(--ds-fos-sp-5);
  background: var(--ds-fos-surface-1);
  border-top: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  font-size: var(--ds-fos-fs-sm);
}
.ds-fos-mail-item.is-open .ds-fos-mail-item__detail { display: block; }
.ds-fos-mail-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-fos-sp-4);
  color: var(--ds-fos-text-secondary);
  font-size: var(--ds-fos-fs-xs);
  padding-bottom: var(--ds-fos-sp-3);
  border-bottom: var(--ds-fos-bw) dashed var(--ds-fos-border-light);
  margin-bottom: var(--ds-fos-sp-3);
}
.ds-fos-mail-item__meta b { color: var(--ds-fos-text-muted); font-weight: var(--ds-fos-fw-medium); margin-right: var(--ds-fos-sp-1); }
.ds-fos-mail-item__body {
  color: var(--ds-fos-text);
  line-height: var(--ds-fos-lh-base);
  white-space: pre-wrap;
  font-size: var(--ds-fos-fs-md);
}

/* ─── TIMELINE (action log) ──────────────────────────────────────────────── */
.ds-fos-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: var(--ds-fos-timeline-indent);
}
.ds-fos-timeline::before {
  content: "";
  position: absolute;
  top: var(--ds-fos-sp-2); bottom: var(--ds-fos-sp-2); left: var(--ds-fos-sp-2);
  width: var(--ds-fos-bw);
  background: var(--ds-fos-border);
}

.ds-fos-timeline__item {
  position: relative;
  padding: var(--ds-fos-sp-3) 0 var(--ds-fos-sp-3) var(--ds-fos-sp-6);
}
.ds-fos-timeline__dot {
  position: absolute;
  left: calc(var(--ds-fos-timeline-dot) / -2 - var(--ds-fos-bw)); top: var(--ds-fos-sp-4);
  width: var(--ds-fos-timeline-dot); height: var(--ds-fos-timeline-dot);
  border-radius: var(--ds-fos-radius-round);
  background: transparent;
  border: var(--ds-fos-bw-thin) solid var(--ds-fos-text-muted);
  box-shadow: 0 0 0 var(--ds-fos-ring-w) var(--ds-fos-panel);
}
.ds-fos-timeline__item--manual .ds-fos-timeline__dot { background: var(--ds-fos-success); border-color: var(--ds-fos-success); }
.ds-fos-timeline__item--auto   .ds-fos-timeline__dot { background: var(--ds-fos-text-muted); border-color: var(--ds-fos-text-muted); }
.ds-fos-timeline__item--info   .ds-fos-timeline__dot { background: var(--ds-fos-accent); border-color: var(--ds-fos-accent); }
.ds-fos-timeline__item--warn   .ds-fos-timeline__dot { background: var(--ds-fos-warn); border-color: var(--ds-fos-warn); }
.ds-fos-timeline__item--danger .ds-fos-timeline__dot { background: var(--ds-fos-danger); border-color: var(--ds-fos-danger); }

.ds-fos-timeline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-fos-sp-3);
  align-items: center;
  font-size: var(--ds-fos-fs-xs);
  color: var(--ds-fos-text-muted);
  margin-bottom: var(--ds-fos-sp-2);
}
.ds-fos-timeline__time { font-family: var(--ds-fos-font-mono); }
.ds-fos-timeline__desc {
  font-size: var(--ds-fos-fs-md);
  color: var(--ds-fos-text);
  line-height: var(--ds-fos-lh-base);
}

/* ─── STAT CARD (KPI) ────────────────────────────────────────────────────── */
.ds-fos-stat-card {
  background: var(--ds-fos-panel);
  border: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  border-radius: var(--ds-fos-radius-md);
  padding: var(--ds-fos-sp-7);
  box-shadow: var(--ds-fos-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--ds-fos-sp-3);
  cursor: pointer;
  transition: all var(--ds-fos-transition);
  border-top: var(--ds-fos-bw-lg) solid transparent;
}
.ds-fos-stat-card:hover { transform: translateY(var(--ds-fos-lift)); box-shadow: var(--ds-fos-shadow-md); }
.ds-fos-stat-card--accent  { border-top-color: var(--ds-fos-accent); }
.ds-fos-stat-card--success { border-top-color: var(--ds-fos-success); }
.ds-fos-stat-card--warning { border-top-color: var(--ds-fos-warn); }
.ds-fos-stat-card--danger  { border-top-color: var(--ds-fos-danger); }

.ds-fos-stat-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.ds-fos-stat-card__icon {
  font-size: var(--ds-fos-icon-3xl);
  color: var(--ds-fos-accent);
}
.ds-fos-stat-card__value {
  font-size: var(--ds-fos-fs-3xl);
  font-weight: var(--ds-fos-fw-bold);
  color: var(--ds-fos-text-strong);
  line-height: var(--ds-fos-lh-none);
}
.ds-fos-stat-card__label {
  font-size: var(--ds-fos-fs-xs);
  color: var(--ds-fos-text-secondary);
  font-weight: var(--ds-fos-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ds-fos-ls-md);
}
.ds-fos-stat-card__sub {
  font-size: var(--ds-fos-fs-xs);
  color: var(--ds-fos-text-muted);
}

/* Multi-stat: 3 numbers side by side */
.ds-fos-stat-card__multi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ds-fos-sp-3);
  align-items: start;
}
.ds-fos-stat-card__multi > div {
  border-left: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  padding-left: var(--ds-fos-sp-4);
}
.ds-fos-stat-card__multi > div:first-child { border-left: 0; padding-left: 0; }
.ds-fos-stat-card__multi-value {
  font-size: var(--ds-fos-fs-2xl);
  font-weight: var(--ds-fos-fw-bold);
  color: var(--ds-fos-text-strong);
  line-height: var(--ds-fos-lh-none);
}
.ds-fos-stat-card__multi-label {
  font-size: var(--ds-fos-fs-2xs);
  font-weight: var(--ds-fos-fw-semibold);
  color: var(--ds-fos-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ds-fos-ls-sm);
  margin-top: var(--ds-fos-sp-2);
}

/* ─── STEP PIPELINE (workflow steps horizontal) ──────────────────────────── */
.ds-fos-pipeline {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  padding: var(--ds-fos-sp-4);
  background: var(--ds-fos-surface-1);
  border-radius: var(--ds-fos-radius);
  border: var(--ds-fos-bw) solid var(--ds-fos-border-light);
}
.ds-fos-pipeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-fos-sp-2);
  flex: 1;
  min-width: var(--ds-fos-pipeline-step-min-w);
  position: relative;
}
.ds-fos-pipeline__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--ds-fos-pipeline-circle) / 2);
  left: calc(50% + var(--ds-fos-pipeline-link-gap));
  right: calc(-50% + var(--ds-fos-pipeline-link-gap));
  height: var(--ds-fos-bw-md);
  background: var(--ds-fos-border);
}
.ds-fos-pipeline__step.is-done:not(:last-child)::after { background: var(--ds-fos-success); }
.ds-fos-pipeline__circle {
  width: var(--ds-fos-pipeline-circle); height: var(--ds-fos-pipeline-circle);
  border-radius: var(--ds-fos-radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-fos-panel);
  border: var(--ds-fos-bw-md) solid var(--ds-fos-border);
  color: var(--ds-fos-text-muted);
  font-size: var(--ds-fos-fs-md);
  font-weight: var(--ds-fos-fw-semibold);
  z-index: var(--ds-fos-z-raised);
}
.ds-fos-pipeline__step.is-done .ds-fos-pipeline__circle { background: var(--ds-fos-success); border-color: var(--ds-fos-success); color: var(--ds-fos-text-on-accent); }
.ds-fos-pipeline__step.is-active .ds-fos-pipeline__circle { background: var(--ds-fos-accent); border-color: var(--ds-fos-accent); color: var(--ds-fos-text-on-accent); box-shadow: 0 0 0 var(--ds-fos-ring-w) var(--ds-fos-accent-ring); }
.ds-fos-pipeline__label {
  font-size: var(--ds-fos-fs-xs);
  color: var(--ds-fos-text-secondary);
  text-align: center;
  font-weight: var(--ds-fos-fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ds-fos-ls-xs);
  white-space: nowrap;
}
.ds-fos-pipeline__step.is-active .ds-fos-pipeline__label { color: var(--ds-fos-accent); font-weight: var(--ds-fos-fw-bold); }
.ds-fos-pipeline__step.is-done .ds-fos-pipeline__label { color: var(--ds-fos-success); }

/* ════════════════════════════════════════════════════════════════════════════
   LAYER 5 — UTILITIES
   ════════════════════════════════════════════════════════════════════════════ */

/* Spacing — margin */
.ds-fos-mt-0 { margin-top: 0 !important; }
.ds-fos-mt-1 { margin-top: var(--ds-fos-sp-2); }
.ds-fos-mt-2 { margin-top: var(--ds-fos-sp-4); }
.ds-fos-mt-3 { margin-top: var(--ds-fos-sp-6); }
.ds-fos-mt-4 { margin-top: var(--ds-fos-sp-8); }
.ds-fos-mb-1 { margin-bottom: var(--ds-fos-sp-2); }
.ds-fos-mb-2 { margin-bottom: var(--ds-fos-sp-4); }
.ds-fos-mb-3 { margin-bottom: var(--ds-fos-sp-6); }
.ds-fos-mb-4 { margin-bottom: var(--ds-fos-sp-8); }

/* Spacing — padding */
.ds-fos-p-0 { padding: 0 !important; }
.ds-fos-p-1 { padding: var(--ds-fos-sp-2); }
.ds-fos-p-2 { padding: var(--ds-fos-sp-4); }
.ds-fos-p-3 { padding: var(--ds-fos-sp-6); }
.ds-fos-p-4 { padding: var(--ds-fos-sp-8); }

/* Text */
.ds-fos-text-xs   { font-size: var(--ds-fos-fs-xs); }
.ds-fos-text-sm   { font-size: var(--ds-fos-fs-sm); }
.ds-fos-text-md   { font-size: var(--ds-fos-fs-md); }
.ds-fos-text-lg   { font-size: var(--ds-fos-fs-lg); }
.ds-fos-text-xl   { font-size: var(--ds-fos-fs-xl); }
.ds-fos-text-mono { font-family: var(--ds-fos-font-mono); }
.ds-fos-text-muted    { color: var(--ds-fos-text-muted) !important; }
.ds-fos-text-strong   { color: var(--ds-fos-text-strong); font-weight: var(--ds-fos-fw-semibold); }
.ds-fos-text-accent   { color: var(--ds-fos-accent); }
.ds-fos-text-success  { color: var(--ds-fos-success-text); }
.ds-fos-text-warn     { color: var(--ds-fos-warn-text); }
.ds-fos-text-danger   { color: var(--ds-fos-danger-text); }
.ds-fos-text-bold     { font-weight: var(--ds-fos-fw-bold); }
.ds-fos-text-medium   { font-weight: var(--ds-fos-fw-medium); }
.ds-fos-text-center   { text-align: center; }
.ds-fos-text-right    { text-align: right; }
.ds-fos-text-uppercase{ text-transform: uppercase; letter-spacing: var(--ds-fos-ls-md); }
.ds-fos-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Flex */
.ds-fos-flex     { display: flex; }
.ds-fos-flex-col { display: flex; flex-direction: column; }
.ds-fos-flex-1   { flex: 1; min-width: 0; }
.ds-fos-flex-wrap{ flex-wrap: wrap; }
.ds-fos-items-center  { align-items: center; }
.ds-fos-items-start   { align-items: flex-start; }
.ds-fos-items-end     { align-items: flex-end; }
.ds-fos-justify-between { justify-content: space-between; }
.ds-fos-justify-center  { justify-content: center; }
.ds-fos-justify-end     { justify-content: flex-end; }

/* Gap */
.ds-fos-gap-1 { gap: var(--ds-fos-sp-2); }
.ds-fos-gap-2 { gap: var(--ds-fos-sp-4); }
.ds-fos-gap-3 { gap: var(--ds-fos-sp-6); }
.ds-fos-gap-4 { gap: var(--ds-fos-sp-8); }

/* Width */
.ds-fos-w-full { width: 100%; }
.ds-fos-w-auto { width: auto; }

/* Visibility */
.ds-fos-hidden       { display: none !important; }
.ds-fos-visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: var(--ds-fos-bw); height: var(--ds-fos-bw);
  overflow: hidden;
}

/* Cursor */
.ds-fos-cursor-pointer { cursor: pointer; }
.ds-fos-cursor-default { cursor: default; }

/* ════════════════════════════════════════════════════════════════════════════
   LAYER 6 — APP SHELL (sidebar, top bar, navigation)
   --------------------------------------------------------------------------
   These components apply to the global layout. They are designed to coexist
   with legacy class names (.tabsBar, .tabBtn, .top) so JavaScript hooks
   keep working: just add ds-fos-* alongside.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── VIEWPORT: lo scroll vive dentro .ds-fos-content, non nel body ───────── */
html, body { overscroll-behavior-y: none; }

/* ─── APP SHELL (grid: top + sidebar | content) ──────────────────────────── */
.ds-fos-shell {
  height: 100vh;                     /* fallback browser senza dvh */
  height: 100dvh;                    /* mobile: esclude la barra del browser */
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: calc(var(--ds-fos-topbar-h) + var(--ds-fos-safe-top)) 1fr;
  grid-template-columns: var(--ds-fos-sidebar-w) 1fr;
  gap: 0;
  overflow: hidden;
  background: var(--ds-fos-bg);
  color: var(--ds-fos-text);
  font-family: var(--ds-fos-font-ui);
  font-size: var(--ds-fos-fs-md);
  line-height: var(--ds-fos-lh-base);
}
.ds-fos-shell.ds-fos-shell--sidebar-collapsed {
  grid-template-columns: var(--ds-fos-sidebar-w-collapsed) 1fr;
}

/* ─── TOP BAR ────────────────────────────────────────────────────────────── */
.ds-fos-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--ds-fos-sp-7);
  /* la topbar parte SOTTO la barra di stato / notch */
  padding-top: var(--ds-fos-safe-top);
  padding-left: max(var(--ds-fos-sp-7), var(--ds-fos-safe-left));
  padding-right: max(var(--ds-fos-sp-7), var(--ds-fos-safe-right));
  background: var(--ds-fos-panel);
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  box-shadow: var(--ds-fos-shadow-xs);
  z-index: var(--ds-fos-z-topbar);
}
.ds-fos-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-4);
}
.ds-fos-topbar__brand img {
  height: var(--ds-fos-logo-h);
  width: auto;
}
.ds-fos-topbar__brand h1 {
  font-size: var(--ds-fos-fs-xl);
  font-weight: var(--ds-fos-fw-bold);
  color: var(--ds-fos-text-strong);
  margin: 0;
  letter-spacing: var(--ds-fos-ls-tight);
}
.ds-fos-topbar__sub {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-3);
  font-size: var(--ds-fos-fs-xs);
  color: var(--ds-fos-text-muted);
}
.ds-fos-topbar__sub i { color: var(--ds-fos-accent); }

.ds-fos-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-5);
}

/* Theme switcher — circular dot palette */
.ds-fos-theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-fos-sp-2);
  padding: 0 var(--ds-fos-sp-3);
}
.ds-fos-theme-dot {
  width: var(--ds-fos-theme-dot-size); height: var(--ds-fos-theme-dot-size);
  border-radius: var(--ds-fos-radius-round);
  border: var(--ds-fos-bw-md) solid transparent;
  cursor: pointer;
  padding: 0;
  transition: all var(--ds-fos-transition);
  outline: none;
}
.ds-fos-theme-dot:hover  { transform: scale(var(--ds-fos-scale-hover)); border-color: var(--ds-fos-border-strong); }
.ds-fos-theme-dot.is-active,
.ds-fos-theme-dot.active { border-color: var(--ds-fos-accent); box-shadow: 0 0 0 var(--ds-fos-bw) var(--ds-fos-panel) inset; }

/* ─── SIDEBAR ────────────────────────────────────────────────────────────── */
.ds-fos-sidebar {
  background: var(--ds-fos-panel);
  border-right: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  display: flex;
  flex-direction: column;
  padding: var(--ds-fos-sp-3) 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--ds-fos-transition);
}
.ds-fos-sidebar::-webkit-scrollbar         { width: var(--ds-fos-scrollbar-w-thin); }
.ds-fos-sidebar::-webkit-scrollbar-track   { background: transparent; }
.ds-fos-sidebar::-webkit-scrollbar-thumb   { background: var(--ds-fos-border); border-radius: var(--ds-fos-radius-sm); }

/* Sidebar navigation button */
.ds-fos-nav-btn {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-4);
  width: 100%;
  padding: var(--ds-fos-sp-3) var(--ds-fos-sp-6);
  border: 0;
  background: transparent;
  color: var(--ds-fos-text-secondary);
  font-family: var(--ds-fos-font-ui);
  font-size: var(--ds-fos-fs-md);
  font-weight: var(--ds-fos-fw-medium);
  text-align: left;
  cursor: pointer;
  transition: all var(--ds-fos-transition);
  position: relative;
  white-space: nowrap;
  border-left: var(--ds-fos-bw-lg) solid transparent;
}
.ds-fos-nav-btn i {
  font-size: var(--ds-fos-icon-xl);
  width: var(--ds-fos-icon-2xl);
  flex-shrink: 0;
  opacity: var(--ds-fos-op-soft);
}
.ds-fos-nav-btn:hover {
  background: var(--ds-fos-surface-1);
  color: var(--ds-fos-text);
}
.ds-fos-nav-btn.active,
.ds-fos-nav-btn.is-active {
  background: var(--ds-fos-accent-tint);
  color: var(--ds-fos-accent);
  border-left-color: var(--ds-fos-accent);
  font-weight: var(--ds-fos-fw-semibold);
}
.ds-fos-nav-btn.active i,
.ds-fos-nav-btn.is-active i { opacity: 1; color: var(--ds-fos-accent); }

/* Sidebar — group toggle (collapsible section) */
.ds-fos-nav-group { position: relative; }
.ds-fos-nav-group__toggle {
  /* Looks like a section header, behaves like a button */
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-3);
  width: 100%;
  padding: var(--ds-fos-sp-4) var(--ds-fos-sp-6) var(--ds-fos-sp-2);
  border: 0;
  background: transparent;
  color: var(--ds-fos-text-muted);
  font-family: var(--ds-fos-font-ui);
  font-size: var(--ds-fos-fs-xs);
  font-weight: var(--ds-fos-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ds-fos-ls-lg);
  text-align: left;
  cursor: pointer;
  transition: color var(--ds-fos-transition);
}
.ds-fos-nav-group__toggle:hover { color: var(--ds-fos-text-secondary); }
.ds-fos-nav-group__toggle.active,
.ds-fos-nav-group__toggle.is-active {
  color: var(--ds-fos-accent);
  font-weight: var(--ds-fos-fw-bold);
}
.ds-fos-nav-group__toggle.active i,
.ds-fos-nav-group__toggle.is-active i { color: var(--ds-fos-accent); opacity: 1; }
.ds-fos-nav-group__toggle i { font-size: var(--ds-fos-icon-sm); opacity: var(--ds-fos-op-muted); }
.ds-fos-nav-group__arrow {
  margin-left: auto;
  transition: transform var(--ds-fos-transition);
}
.ds-fos-nav-group__toggle.expanded .ds-fos-nav-group__arrow,
.ds-fos-nav-group__toggle.is-expanded .ds-fos-nav-group__arrow { transform: rotate(90deg); }

.ds-fos-nav-group__items {
  display: none;
  flex-direction: column;
}
.ds-fos-nav-group__items.open,
.ds-fos-nav-group__items.is-open { display: flex; }
.ds-fos-nav-group__items .ds-fos-nav-btn {
  padding-left: var(--ds-fos-sp-12);
  font-size: var(--ds-fos-fs-sm);
}
.ds-fos-nav-group__items .ds-fos-nav-btn i { font-size: var(--ds-fos-icon-md); }

/* Spacer for pushing logout to bottom */
.ds-fos-nav-spacer { flex: 1; }

/* Logout button — danger style */
.ds-fos-nav-btn--logout {
  margin-top: auto;
  color: var(--ds-fos-danger-text);
}
.ds-fos-nav-btn--logout:hover { background: var(--ds-fos-danger-bg); color: var(--ds-fos-danger); }

/* Sidebar collapsed (icon-only) state */
.ds-fos-shell--sidebar-collapsed .ds-fos-sidebar { width: var(--ds-fos-sidebar-w-collapsed); }
.ds-fos-shell--sidebar-collapsed .ds-fos-nav-btn span,
.ds-fos-shell--sidebar-collapsed .ds-fos-nav-group__toggle span,
.ds-fos-shell--sidebar-collapsed .ds-fos-nav-group__arrow,
.ds-fos-shell--sidebar-collapsed .ds-fos-nav-group__toggle { display: none; }
.ds-fos-shell--sidebar-collapsed .ds-fos-nav-btn { padding: var(--ds-fos-sp-3) 0; justify-content: center; }
.ds-fos-shell--sidebar-collapsed .ds-fos-nav-btn i { width: auto; }

/* ─── CONTENT AREA ───────────────────────────────────────────────────────── */
.ds-fos-content {
  min-height: 0;                     /* figlio di grid 1fr: senza questo cresce col contenuto e lo scroll non parte */
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;      /* lo scroll non "trascina" la pagina/barra del browser */
  -webkit-overflow-scrolling: touch;
  padding: var(--ds-fos-sp-6);
  padding-bottom: calc(var(--ds-fos-sp-6) + var(--ds-fos-safe-bottom));
  padding-right: max(var(--ds-fos-sp-6), var(--ds-fos-safe-right));
  background: var(--ds-fos-bg);
}
.ds-fos-content::-webkit-scrollbar         { width: var(--ds-fos-scrollbar-w); }
.ds-fos-content::-webkit-scrollbar-track   { background: transparent; }
.ds-fos-content::-webkit-scrollbar-thumb   { background: var(--ds-fos-border); border-radius: var(--ds-fos-radius-sm); }
.ds-fos-content::-webkit-scrollbar-thumb:hover { background: var(--ds-fos-border-strong); }

/* ════════════════════════════════════════════════════════════════════════════
   LAYER 7 — ESTENSIONI ATOMICHE + AUTH
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── BUTTON: taglia XL e forma pill ────────────────────────────────────── */
.ds-fos-btn--xl {
  height: var(--ds-fos-h-btn-xl);
  padding: 0 var(--ds-fos-sp-12);
  font-size: var(--ds-fos-fs-lg);
  font-weight: var(--ds-fos-fw-semibold);
}
.ds-fos-btn--xl i { font-size: var(--ds-fos-icon-2xl); }
.ds-fos-btn--pill { border-radius: var(--ds-fos-radius-pill); }

/* ─── INPUT: taglia lg, barra d'accento, campo OTP ──────────────────────── */
.ds-fos-input--lg {
  height: var(--ds-fos-h-input-lg);
  font-size: var(--ds-fos-fs-lg);
}
.ds-fos-input--bar,
.ds-fos-input--bar:hover,
.ds-fos-input--bar:focus { border-left: var(--ds-fos-bw-lg) solid var(--ds-fos-accent); }
.ds-fos-input--otp {
  letter-spacing: var(--ds-fos-ls-otp);
  font-weight: var(--ds-fos-fw-bold);
}

/* ─── HINT / MESSAGGIO DI FORM ──────────────────────────────────────────── */
.ds-fos-hint {
  font-size: var(--ds-fos-fs-xs);
  color: var(--ds-fos-text-muted);
  line-height: var(--ds-fos-lh-base);
}
.ds-fos-msg {
  min-height: calc(1em * var(--ds-fos-lh-base));
  text-align: center;
  font-size: var(--ds-fos-fs-md);
  font-weight: var(--ds-fos-fw-medium);
  line-height: var(--ds-fos-lh-base);
  color: var(--ds-fos-text-secondary);
}
.ds-fos-msg--error   { color: var(--ds-fos-danger-text); }
.ds-fos-msg--success { color: var(--ds-fos-success-text); }

/* ─── DIVIDER con etichetta ("oppure") ──────────────────────────────────── */
.ds-fos-divider-label {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-5);
  font-size: var(--ds-fos-fs-sm);
  color: var(--ds-fos-text-muted);
}
.ds-fos-divider-label::before,
.ds-fos-divider-label::after {
  content: "";
  flex: 1;
  border-top: var(--ds-fos-bw) dashed var(--ds-fos-border-strong);
}

/* ─── STEPLINE (etichetta numerata di un passaggio di form) ─────────────── */
.ds-fos-stepline {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-4);
}
.ds-fos-stepline__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-fos-step-num-size);
  height: var(--ds-fos-step-num-size);
  border-radius: var(--ds-fos-radius-round);
  background: var(--ds-fos-accent);
  color: var(--ds-fos-text-on-accent);
  font-size: var(--ds-fos-fs-xs);
  font-weight: var(--ds-fos-fw-bold);
  line-height: var(--ds-fos-lh-none);
}
.ds-fos-stepline__num--muted { background: var(--ds-fos-text-muted); }
.ds-fos-stepline__label {
  font-size: var(--ds-fos-fs-sm);
  font-weight: var(--ds-fos-fw-medium);
  color: var(--ds-fos-text-secondary);
}

/* ─── UTILITY: rotazione continua (icone di attesa) ─────────────────────── */
.ds-fos-spin { animation: ds-fos-spin var(--ds-fos-duration-spin) linear infinite; }

/* ─── UTILITY: layout a pila, peso, no-wrap, dimensione icona ───────────── */
.ds-fos-stack        { display: flex; flex-direction: column; gap: var(--ds-fos-sp-10); width: 100%; }
.ds-fos-stack--lg    { gap: var(--ds-fos-sp-12); }
.ds-fos-text-semibold{ font-weight: var(--ds-fos-fw-semibold); }
.ds-fos-nowrap       { white-space: nowrap; }
.ds-fos-icon-sm      { font-size: var(--ds-fos-icon-sm); }
.ds-fos-icon-md      { font-size: var(--ds-fos-icon-md); }
.ds-fos-icon-lg      { font-size: var(--ds-fos-icon-lg); }
.ds-fos-icon-xl      { font-size: var(--ds-fos-icon-xl); }
.ds-fos-icon-2xl     { font-size: var(--ds-fos-icon-2xl); }

/* ─── CARD / TABLE: varianti a filo ─────────────────────────────────────── */
.ds-fos-card__body--flush-y { padding: 0 var(--ds-fos-sp-8); }
.ds-fos-table-wrap--flush   { border: 0; border-radius: 0; }
.ds-fos-table__col-icon     { width: var(--ds-fos-table-col-icon-w); }
.ds-fos-table__cell-details { max-width: var(--ds-fos-table-details-max-w); }

/* ─── PALLINO DI STATO ──────────────────────────────────────────────────── */
.ds-fos-dot {
  flex-shrink: 0;
  width: var(--ds-fos-dot-sm);
  height: var(--ds-fos-dot-sm);
  border-radius: var(--ds-fos-radius-round);
  background: var(--ds-fos-accent);
}
.ds-fos-dot--danger  { background: var(--ds-fos-danger); }

/* ─── [hidden] sui componenti DS ─────────────────────────────────────────────
   Gli elementi con classe ds-fos-* si nascondono con l'attributo hidden
   (el.hidden = true), anche quando la loro classe imposta un display. */
[class*="ds-fos-"][hidden] { display: none !important; }

/* Stack: un figlio vuoto non deve generare gap */
.ds-fos-stack > :empty { display: none; }

/* ─── SECTION / CARD: overflow visibile (dropdown che escono dal box) ───── */
.ds-fos-section--visible,
.ds-fos-card--visible { overflow: visible; }
.ds-fos-section__actions {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-3);
  margin-left: auto;
}

/* ─── TOOLBAR: variante "barra" con bordo, ricerca larga ────────────────── */
.ds-fos-toolbar--bar {
  border: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  border-radius: var(--ds-fos-radius-md);
  box-shadow: var(--ds-fos-shadow-xs);
}
.ds-fos-toolbar-search--lg { min-width: var(--ds-fos-search-w-lg); }

/* ─── BUTTON: toggle (acceso/spento) ────────────────────────────────────── */
.ds-fos-btn--toggle.is-active,
.ds-fos-btn--toggle.is-active:hover {
  background: var(--ds-fos-accent);
  border-color: var(--ds-fos-accent);
  color: var(--ds-fos-text-on-accent);
}

/* ─── TABS (sottolineate) ───────────────────────────────────────────────── */
.ds-fos-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-fos-sp-2);
  margin-bottom: var(--ds-fos-sp-6);
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border);
}
.ds-fos-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-fos-sp-3);
  padding: var(--ds-fos-sp-4) var(--ds-fos-sp-7);
  margin-bottom: calc(var(--ds-fos-bw) * -1);
  border: 0;
  border-bottom: var(--ds-fos-bw-md) solid transparent;
  background: transparent;
  color: var(--ds-fos-text-secondary);
  font-family: var(--ds-fos-font-ui);
  font-size: var(--ds-fos-fs-md);
  font-weight: var(--ds-fos-fw-medium);
  cursor: pointer;
  transition: color var(--ds-fos-transition), border-color var(--ds-fos-transition);
}
.ds-fos-tabs__tab:hover { color: var(--ds-fos-text); }
.ds-fos-tabs__tab:focus-visible { outline: none; box-shadow: 0 0 0 var(--ds-fos-ring-w) var(--ds-fos-accent-ring); }
.ds-fos-tabs__tab.is-active {
  color: var(--ds-fos-accent);
  border-bottom-color: var(--ds-fos-accent);
  font-weight: var(--ds-fos-fw-semibold);
}
.ds-fos-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ds-fos-h-badge);
  height: var(--ds-fos-h-badge);
  padding: 0 var(--ds-fos-sp-3);
  border-radius: var(--ds-fos-radius-pill);
  background: var(--ds-fos-surface-2);
  border: var(--ds-fos-bw) solid var(--ds-fos-border);
  color: var(--ds-fos-text-secondary);
  font-size: var(--ds-fos-fs-xs);
  font-weight: var(--ds-fos-fw-semibold);
  line-height: var(--ds-fos-lh-none);
}
.ds-fos-tabs__tab.is-active .ds-fos-tabs__badge {
  background: var(--ds-fos-accent-soft);
  border-color: var(--ds-fos-accent-soft);
  color: var(--ds-fos-accent);
}

.ds-fos-tabpanel { min-width: 0; }

/* ─── PILL TABS (elementi aperti, con pallino e chiusura) ───────────────── */
.ds-fos-pilltabs { display: flex; flex-wrap: wrap; gap: var(--ds-fos-sp-3); }
.ds-fos-pilltab {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-fos-sp-3);
  height: var(--ds-fos-h-btn);
  padding: 0 var(--ds-fos-sp-4) 0 var(--ds-fos-sp-5);
  border: var(--ds-fos-bw) solid var(--ds-fos-border);
  border-radius: var(--ds-fos-radius-pill);
  background: var(--ds-fos-panel);
  color: var(--ds-fos-text-secondary);
  font-family: var(--ds-fos-font-ui);
  font-size: var(--ds-fos-fs-md);
  cursor: pointer;
  transition: all var(--ds-fos-transition);
}
.ds-fos-pilltab:hover { border-color: var(--ds-fos-border-strong); color: var(--ds-fos-text); }
.ds-fos-pilltab:focus-visible { outline: none; box-shadow: 0 0 0 var(--ds-fos-ring-w) var(--ds-fos-accent-ring); }
.ds-fos-pilltab.is-active {
  border-color: var(--ds-fos-accent);
  background: var(--ds-fos-accent-soft);
  color: var(--ds-fos-text-strong);
}
.ds-fos-pilltab__code { font-family: var(--ds-fos-font-mono); font-size: var(--ds-fos-fs-sm); }
.ds-fos-pilltab__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-fos-icon-2xl);
  height: var(--ds-fos-icon-2xl);
  border-radius: var(--ds-fos-radius-round);
  color: var(--ds-fos-text-muted);
}
.ds-fos-pilltab__close:hover { background: var(--ds-fos-danger-bg); color: var(--ds-fos-danger-text); }

/* ─── COMBO (input + lista a tendina) ───────────────────────────────────────
   <div class="ds-fos-combo"><input …><div class="ds-fos-combo__list" hidden>…</div></div> */
.ds-fos-combo { position: relative; }
.ds-fos-combo__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--ds-fos-z-dropdown);
  margin-top: var(--ds-fos-sp-1);
  max-height: var(--ds-fos-combo-max-h);
  overflow-y: auto;
  background: var(--ds-fos-panel);
  border: var(--ds-fos-bw) solid var(--ds-fos-border);
  border-radius: var(--ds-fos-radius);
  box-shadow: var(--ds-fos-shadow-lg);
}
.ds-fos-combo__list--wide { right: auto; min-width: var(--ds-fos-combo-wide-w); }
.ds-fos-combo__list--panel { right: auto; min-width: var(--ds-fos-filter-panel-w); }
.ds-fos-combo__item {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-4);
  padding: var(--ds-fos-sp-4) var(--ds-fos-sp-6);
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  font-size: var(--ds-fos-fs-md);
  color: var(--ds-fos-text);
  cursor: pointer;
}
.ds-fos-combo__item:last-child { border-bottom: 0; }
.ds-fos-combo__item:hover { background: var(--ds-fos-row-hover); }
.ds-fos-combo__item.is-current { background: var(--ds-fos-accent-soft); }
.ds-fos-combo__item--wrap { flex-wrap: wrap; align-items: baseline; }
.ds-fos-combo__item--static { flex-direction: column; align-items: flex-start; cursor: default; }
.ds-fos-combo__item--static:hover { background: transparent; }
.ds-fos-combo__empty {
  padding: var(--ds-fos-sp-4) var(--ds-fos-sp-6);
  font-size: var(--ds-fos-fs-md);
  color: var(--ds-fos-text-muted);
}
.ds-fos-combo__actions { display: flex; gap: var(--ds-fos-sp-3); padding: var(--ds-fos-sp-4) var(--ds-fos-sp-6); }

/* ─── CALLOUT (etichetta + testo con barra d'accento) ───────────────────── */
.ds-fos-callout {
  padding: var(--ds-fos-sp-6) var(--ds-fos-sp-8);
  background: var(--ds-fos-band-soft);
  border-left: var(--ds-fos-bw-lg) solid var(--ds-fos-band);
  border-radius: var(--ds-fos-radius);
}
.ds-fos-callout__label {
  margin: 0 0 var(--ds-fos-sp-2);
  font-size: var(--ds-fos-fs-xs);
  font-weight: var(--ds-fos-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ds-fos-ls-md);
  color: var(--ds-fos-band);
}
.ds-fos-callout__text {
  margin: 0;
  font-size: var(--ds-fos-fs-lg);
  line-height: var(--ds-fos-lh-base);
  color: var(--ds-fos-text);
  white-space: pre-wrap;
}

/* ─── FIELD GRID (scheda campi a celle incassate) ───────────────────────────
   Nessuna linea: ogni campo è una cella su fondo appena diverso da quello
   della card che la contiene (token --ds-fos-field-cell-bg). */
.ds-fos-field-grid {
  display: grid;
  grid-template-columns: repeat(var(--ds-fos-field-grid-cols), minmax(0, 1fr));
  gap: var(--ds-fos-sp-4);
}
.ds-fos-field-grid > .ds-fos-field {
  padding: var(--ds-fos-sp-5) var(--ds-fos-sp-6);
  background: var(--ds-fos-field-cell-bg);
  border-radius: var(--ds-fos-radius);
}
.ds-fos-field--span-2 { grid-column: span 2; }
.ds-fos-field__value--strong { font-weight: var(--ds-fos-fw-semibold); color: var(--ds-fos-text-strong); }
@media (max-width: 1100px) {
  .ds-fos-field-grid { grid-template-columns: repeat(var(--ds-fos-field-grid-cols-md), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ds-fos-field-grid { grid-template-columns: repeat(var(--ds-fos-field-grid-cols-sm), minmax(0, 1fr)); }
  .ds-fos-field--span-2 { grid-column: auto; }
}

/* ─── FORM: pila di righe + azioni ──────────────────────────────────────── */
.ds-fos-form { display: flex; flex-direction: column; gap: var(--ds-fos-sp-6); }
.ds-fos-form-row--top { align-items: start; }
.ds-fos-form-row--top > .ds-fos-form-row__label { padding-top: var(--ds-fos-sp-3); }
.ds-fos-form-row__control {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-4);
  min-width: 0;
}
.ds-fos-form-row__control > .ds-fos-input { flex: 1; min-width: 0; }
.ds-fos-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ds-fos-sp-4);
}
.ds-fos-form-actions > .ds-fos-msg { flex: 1; }
.ds-fos-msg--inline { min-height: 0; text-align: left; font-size: var(--ds-fos-fs-xs); }

/* ─── INPUT / TEXTAREA: varianti ────────────────────────────────────────── */
.ds-fos-input--mono {
  font-family: var(--ds-fos-font-mono);
  font-weight: var(--ds-fos-fw-semibold);
  letter-spacing: var(--ds-fos-ls-sm);
  background: var(--ds-fos-surface-2);
}
.ds-fos-textarea--note {
  min-height: var(--ds-fos-note-min-h);
  max-height: var(--ds-fos-note-max-h);
  padding: var(--ds-fos-sp-5) var(--ds-fos-sp-6);
  background: var(--ds-fos-warn-bg);
  resize: none;
  overflow-y: hidden;
  font-size: var(--ds-fos-fs-lg);
  line-height: var(--ds-fos-lh-base);
}
.ds-fos-textarea--note[readonly] { background: var(--ds-fos-surface-2); cursor: default; }
.ds-fos-textarea--scroll { overflow-y: auto; }

/* ─── LINK ──────────────────────────────────────────────────────────────── */
.ds-fos-link { color: var(--ds-fos-accent); text-decoration: underline; cursor: pointer; }
.ds-fos-link:hover { color: var(--ds-fos-accent-hover); }
.ds-fos-link--mono { font-family: var(--ds-fos-font-mono); font-size: var(--ds-fos-fs-md); }

/* ─── CHECKLIST (filtri multipli) ───────────────────────────────────────── */
.ds-fos-checklist { max-height: var(--ds-fos-combo-max-h); overflow-y: auto; padding: var(--ds-fos-sp-2) 0; }
.ds-fos-checklist__item { display: flex; width: 100%; padding: var(--ds-fos-sp-3) var(--ds-fos-sp-6); }
.ds-fos-checklist__item:hover { background: var(--ds-fos-row-hover); }
.ds-fos-checklist__actions {
  display: flex;
  justify-content: space-between;
  gap: var(--ds-fos-sp-4);
  padding: var(--ds-fos-sp-4) var(--ds-fos-sp-6);
  border-top: var(--ds-fos-bw) solid var(--ds-fos-border-light);
}

/* ─── LOOKUP (anteprima risultato esterno con azione) ───────────────────── */
.ds-fos-lookup { display: inline-flex; max-width: var(--ds-fos-lookup-w); text-align: left; }
.ds-fos-lookup .ds-fos-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-fos-sp-3);
}

/* ─── STATI: tinte riga, pallini, code, empty ───────────────────────────── */
.ds-fos-row--alert  { background: var(--ds-fos-accent-soft); }
.ds-fos-row--warn   { background: var(--ds-fos-warn-bg); }
.ds-fos-row--done   { background: var(--ds-fos-success-bg); }
.ds-fos-row--cancel { color: var(--ds-fos-text-muted); text-decoration: line-through; }
.ds-fos-dot--warn    { background: var(--ds-fos-warn); }
.ds-fos-dot--success { background: var(--ds-fos-success); }
.ds-fos-dot--muted   { background: var(--ds-fos-text-muted); }
.ds-fos-code--success {
  background: var(--ds-fos-success-bg);
  color: var(--ds-fos-success-text);
  border-color: var(--ds-fos-success-border);
  font-weight: var(--ds-fos-fw-semibold);
}
.ds-fos-empty--error { color: var(--ds-fos-danger-text); }

/* ─── TABS dentro una card: la striscia diventa l'header, senza margine ── */
.ds-fos-tabs--flush { margin-bottom: 0; padding: 0 var(--ds-fos-sp-6); }

/* ─── SECTION piana: contenuto dentro una card senza un secondo riquadro ── */
.ds-fos-section--plain { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.ds-fos-section--plain > .ds-fos-section__header {
  padding: 0 0 var(--ds-fos-sp-4);
  background: transparent;
  border-bottom: 0;
}
.ds-fos-section--plain > .ds-fos-section__body { padding: 0; }

/* ─── STACK con divisori: linea solo tra blocchi non vuoti ──────────────── */
.ds-fos-stack--divided > :not(:empty) ~ :not(:empty) {
  padding-top: var(--ds-fos-sp-7);
  border-top: var(--ds-fos-bw) solid var(--ds-fos-border-light);
}

/* ─── BUTTON: stato disabilitato per variante ───────────────────────────────
   La regola base .ds-fos-btn:disabled forza sfondo e bordo accent su TUTTE le
   varianti: un secondary/ghost disabilitato diventava blu. Qui ogni variante
   ritrova i propri colori (e non reagisce all'hover). */
.ds-fos-btn--secondary:disabled,
.ds-fos-btn--secondary[aria-disabled="true"] {
  background: var(--ds-fos-panel); border-color: var(--ds-fos-border); color: var(--ds-fos-text);
}
.ds-fos-btn--ghost:disabled,
.ds-fos-btn--ghost[aria-disabled="true"],
.ds-fos-btn--link:disabled,
.ds-fos-btn--link[aria-disabled="true"] {
  background: transparent; border-color: transparent; text-decoration: none;
}
.ds-fos-btn--ghost:disabled { color: var(--ds-fos-text-secondary); }
.ds-fos-btn--link:disabled  { color: var(--ds-fos-accent); }
.ds-fos-btn--danger:disabled,
.ds-fos-btn--danger[aria-disabled="true"]  { background: var(--ds-fos-danger);  border-color: var(--ds-fos-danger); }
.ds-fos-btn--success:disabled,
.ds-fos-btn--success[aria-disabled="true"] { background: var(--ds-fos-success); border-color: var(--ds-fos-success); }
.ds-fos-btn--warning:disabled,
.ds-fos-btn--warning[aria-disabled="true"] { background: var(--ds-fos-warn);    border-color: var(--ds-fos-warn); }

/* ─── THEME DOT: pallino "Blu Oceano" ───────────────────────────────────── */
.ds-fos-theme-dot--ocean { background: var(--ds-fos-theme-ocean); }

/* ─── AUTH — login a schermo intero (media | form) ──────────────────────────
   <main class="ds-fos-auth">
     <aside class="ds-fos-auth__media"> video + shade + hero </aside>
     <section class="ds-fos-auth__pane"> center > form  + note </section>
   </main>
   Il contenitore è fixed: copre il viewport a prescindere dai margini del body
   e scorre da solo se il contenuto è più alto dello schermo.
   ─────────────────────────────────────────────────────────────────────────── */
.ds-fos-auth {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: var(--ds-fos-auth-cols);
  grid-template-rows: minmax(min-content, 1fr);
  overflow-y: auto;
  background: var(--ds-fos-panel);
  color: var(--ds-fos-text);
  font-family: var(--ds-fos-font-ui);
  font-size: var(--ds-fos-fs-md);
  line-height: var(--ds-fos-lh-base);
}

/* Pannello media */
.ds-fos-auth__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-fos-sp-20) var(--ds-fos-sp-24);
  overflow: hidden;
  background: var(--ds-fos-media-bg);
  color: var(--ds-fos-on-media);
}
.ds-fos-auth__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ds-fos-auth__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--ds-fos-media-shade-top) 0%,
    var(--ds-fos-media-shade-mid) 45%,
    var(--ds-fos-media-shade-bottom) 100%
  );
}
.ds-fos-auth__hero {
  position: relative;
  max-width: var(--ds-fos-auth-hero-w);
  text-align: center;
  text-shadow: var(--ds-fos-media-text-shadow);
}
.ds-fos-auth__hero-kicker {
  margin: 0 0 var(--ds-fos-sp-3);
  font-size: var(--ds-fos-fs-2xl);
  color: var(--ds-fos-on-media-soft);
}
.ds-fos-auth__hero-title {
  margin: 0;
  font-size: var(--ds-fos-fs-hero);
  font-weight: var(--ds-fos-fw-bold);
  line-height: var(--ds-fos-lh-tight);
  letter-spacing: var(--ds-fos-ls-display);
  color: var(--ds-fos-on-media);
}
.ds-fos-auth__hero-text {
  margin: var(--ds-fos-sp-10) 0 0;
  font-size: var(--ds-fos-fs-lg);
  color: var(--ds-fos-on-media-soft);
}

/* Pannello form */
.ds-fos-auth__pane {
  display: flex;
  flex-direction: column;
  padding: var(--ds-fos-sp-16) var(--ds-fos-sp-24) var(--ds-fos-sp-12);
  background: var(--ds-fos-panel);
}
.ds-fos-auth__center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ds-fos-auth__form {
  width: 100%;
  max-width: var(--ds-fos-auth-form-w);
  display: flex;
  flex-direction: column;
  gap: var(--ds-fos-sp-8);
}
.ds-fos-auth__head { text-align: center; }
.ds-fos-auth__brand { margin-bottom: var(--ds-fos-sp-10); }
.ds-fos-auth__brand img {
  display: block;
  width: var(--ds-fos-auth-logo-w);
  height: auto;
  margin: 0 auto;
}
.ds-fos-auth__brand-sub {
  margin-top: var(--ds-fos-sp-3);
  font-size: var(--ds-fos-fs-md);
  color: var(--ds-fos-text-secondary);
}
.ds-fos-auth__heading {
  margin: 0;
  font-size: var(--ds-fos-fs-3xl);
  font-weight: var(--ds-fos-fw-semibold);
  color: var(--ds-fos-accent-hover);
}
.ds-fos-auth__sub {
  margin: var(--ds-fos-sp-4) 0 0;
  font-size: var(--ds-fos-fs-sm);
  color: var(--ds-fos-text-secondary);
}
.ds-fos-auth__note {
  max-width: var(--ds-fos-auth-note-w);
  margin: var(--ds-fos-sp-12) auto 0;
  text-align: center;
  font-size: var(--ds-fos-fs-xs);
  line-height: var(--ds-fos-lh-base);
  color: var(--ds-fos-text-muted);
}

/* Breakpoint (le @media non accettano var(): 860px = soglia tablet portrait) */
@media (max-width: 860px) {
  /* Mobile: niente pannello video, il pannello form è fullscreen */
  .ds-fos-auth {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(min-content, 1fr);
    overscroll-behavior: contain;
  }
  .ds-fos-auth__media { display: none; }
  .ds-fos-auth__pane {
    padding:
      calc(var(--ds-fos-sp-16) + var(--ds-fos-safe-top))
      max(var(--ds-fos-sp-12), var(--ds-fos-safe-right))
      calc(var(--ds-fos-sp-12) + var(--ds-fos-safe-bottom))
      max(var(--ds-fos-sp-12), var(--ds-fos-safe-left));
  }
}

/* ─── ACCESSIBILITÀ: riduzione movimento ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ds-fos-modal-backdrop,
  .ds-fos-modal { animation: none; }
  .ds-fos-stat-card:hover { transform: none; }
}


/* ════════════════════════════════════════════════════════════════════════════
   LAYER 8 — COMPONENTI APP (nomi di classe legacy agganciati dal JS)
   --------------------------------------------------------------------------
   Erano blocchi <style> dentro index.html. I nomi restano identici perché li
   generano i file /static/*.js; cambia solo l'origine dei valori: solo token.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Home: KPI e link rapidi ───────────────────────────────────────────── */
.homeKpiGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ds-fos-kpi-min-w), 1fr));
  gap: var(--ds-fos-sp-6);
}
.homeKpiCard {
  padding: var(--ds-fos-sp-8);
  border: var(--ds-fos-bw) solid var(--ds-fos-border);
  border-radius: var(--ds-fos-radius-md);
  background: var(--ds-fos-surface-1);
  transition: transform var(--ds-fos-transition), box-shadow var(--ds-fos-transition);
}
.homeKpiCard:hover {
  transform: translateY(var(--ds-fos-lift));
  box-shadow: var(--ds-fos-shadow-md);
}
.homeLinksGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ds-fos-quicklink-min-w), 1fr));
  gap: var(--ds-fos-sp-5);
}
.homeQuickLink {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ds-fos-sp-8) var(--ds-fos-sp-5);
  border: var(--ds-fos-bw) solid var(--ds-fos-border);
  border-radius: var(--ds-fos-radius-md);
  background: var(--ds-fos-surface-1);
  cursor: pointer;
  transition: transform var(--ds-fos-transition), box-shadow var(--ds-fos-transition), border-color var(--ds-fos-transition);
}
.homeQuickLink:hover {
  transform: translateY(var(--ds-fos-lift));
  box-shadow: var(--ds-fos-shadow-md);
  border-color: var(--ds-fos-accent);
}

/* ─── Barra riepilogo licenze sopra la tabella assunzioni ───────────────── */
.licSummary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-fos-sp-4);
  padding: var(--ds-fos-sp-5) var(--ds-fos-sp-7);
  margin: 0 0 var(--ds-fos-sp-5);
  border-radius: var(--ds-fos-radius);
  font-size: var(--ds-fos-fs-lg);
  border: var(--ds-fos-bw) solid var(--ds-fos-border);
  background: var(--ds-fos-surface-1);
}
.licSummary .ls-verdict {
  font-weight: var(--ds-fos-fw-bold);
  margin-right: var(--ds-fos-sp-3);
  white-space: nowrap;
}
.licSummary .ls-sep {
  width: var(--ds-fos-bw);
  height: var(--ds-fos-h-badge);
  background: var(--ds-fos-border);
  margin: 0 var(--ds-fos-sp-2);
}
.licSummary .ls-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-fos-sp-3);
  padding: var(--ds-fos-sp-2) var(--ds-fos-sp-5);
  border-radius: var(--ds-fos-radius-sm);
  font-size: var(--ds-fos-fs-md);
  font-weight: var(--ds-fos-fw-semibold);
  white-space: nowrap;
}
.licSummary .ls-chip.ok   { background: var(--ds-fos-success-bg); color: var(--ds-fos-success-text); }
.licSummary .ls-chip.warn { background: var(--ds-fos-warn-bg);    color: var(--ds-fos-warn-text); }
.licSummary .ls-chip.err  { background: var(--ds-fos-danger-bg);  color: var(--ds-fos-danger-text); }
.licSummary .ls-chip .ls-dot {
  width: var(--ds-fos-dot-sm);
  height: var(--ds-fos-dot-sm);
  border-radius: var(--ds-fos-radius-round);
}
.licSummary .ls-chip.ok   .ls-dot { background: var(--ds-fos-success); }
.licSummary .ls-chip.warn .ls-dot { background: var(--ds-fos-warn); }
.licSummary .ls-chip.err  .ls-dot { background: var(--ds-fos-danger); }

/* ─── Modal dipendente: sotto-tab e schede ──────────────────────────────── */
.dipTab.active { color: var(--ds-fos-accent) !important; border-bottom-color: var(--ds-fos-accent) !important; }
.dipTab:hover:not(.active) { color: var(--ds-fos-text); background: var(--ds-fos-surface-2); }
.dipDetailGrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-fos-sp-4) var(--ds-fos-sp-12); }
.dipDetailGrid .dk {
  font-size: var(--ds-fos-fs-sm);
  color: var(--ds-fos-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ds-fos-ls-sm);
}
.dipDetailGrid .dv {
  font-size: var(--ds-fos-fs-lg);
  color: var(--ds-fos-text);
  margin-bottom: var(--ds-fos-sp-3);
}
.dipDeviceCard {
  border: var(--ds-fos-bw) solid var(--ds-fos-border);
  border-radius: var(--ds-fos-radius);
  padding: var(--ds-fos-sp-6) var(--ds-fos-sp-8);
  margin-bottom: var(--ds-fos-sp-4);
  background: var(--ds-fos-panel);
  cursor: pointer;
  transition: border-color var(--ds-fos-transition);
}
.dipDeviceCard:hover { border-color: var(--ds-fos-accent); }
.dipDocRow {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-5);
  padding: var(--ds-fos-sp-4) var(--ds-fos-sp-6);
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border);
  font-size: var(--ds-fos-fs-lg);
}
.dipDocRow:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   DETTAGLIO A TUTTA PAGINA  (assunzioni; riusabile da ogni vista lista→dettaglio)
   ═══════════════════════════════════════════════════════════════════════════ */

/* La vista in modalità dettaglio nasconde tutto tranne il pannello di dettaglio:
   niente wrapper da aggiungere alla lista, funziona con qualsiasi markup. */
.ds-fos-view--detail > :not(.ds-fos-detail-panel) { display: none; }

/* ─── PAGE HEAD: testata del dettaglio (occhiello + titolo + sottotitolo) ── */
.ds-fos-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-fos-sp-8);
  padding: 0 var(--ds-fos-sp-2);
}
.ds-fos-page-head__eyebrow {
  font-size: var(--ds-fos-fs-xs);
  font-weight: var(--ds-fos-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ds-fos-ls-md);
  color: var(--ds-fos-text-muted);
}
.ds-fos-page-head__title {
  margin: var(--ds-fos-sp-1) 0 0;
  font-size: var(--ds-fos-fs-3xl);
  font-weight: var(--ds-fos-fw-semibold);
  line-height: var(--ds-fos-lh-snug);
  color: var(--ds-fos-text-strong);
}
.ds-fos-page-head__sub { margin-top: var(--ds-fos-sp-1); font-size: var(--ds-fos-fs-lg); color: var(--ds-fos-text-secondary); }

/* ─── COLS: due colonne principale/laterale (60/40), una sola sotto soglia ─ */
.ds-fos-cols {
  display: grid;
  grid-template-columns: minmax(0, var(--ds-fos-cols-main)) minmax(0, var(--ds-fos-cols-side));
  gap: var(--ds-fos-sp-6);
  align-items: start;
}
@media (max-width: 1100px) { .ds-fos-cols { grid-template-columns: minmax(0, 1fr); } }
.ds-fos-stack--tight { gap: var(--ds-fos-sp-6); }

/* ─── FIELD GRID a 2 colonne (colonna principale) ───────────────────────── */
.ds-fos-field-grid--2 { --ds-fos-field-grid-cols: 2; }

/* ─── STEPPER: passi di un flusso con stato (done/active/blocked/skipped) ──
   Con --phases i passi si raggruppano in fasi: una fase --full occupa tutta la
   riga, le altre stanno affiancate (percorsi paralleli). */
.ds-fos-stepper { display: flex; flex-direction: column; gap: var(--ds-fos-sp-2); }
.ds-fos-stepper--phases {
  display: grid;
  grid-template-columns: repeat(var(--ds-fos-stepper-cols), minmax(0, 1fr));
  gap: var(--ds-fos-sp-8) var(--ds-fos-sp-10);
}
@media (max-width: 1100px) {
  .ds-fos-stepper--phases { grid-template-columns: repeat(var(--ds-fos-stepper-cols-sm), minmax(0, 1fr)); }
}
.ds-fos-stepper__phase { display: flex; flex-direction: column; gap: var(--ds-fos-sp-2); min-width: 0; }
.ds-fos-stepper__phase--full { grid-column: 1 / -1; }
.ds-fos-stepper__phase-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-fos-sp-2);
  padding: 0 var(--ds-fos-sp-5) var(--ds-fos-sp-3);
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  font-size: var(--ds-fos-fs-xs);
  font-weight: var(--ds-fos-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ds-fos-ls-md);
  color: var(--ds-fos-text-muted);
}
.ds-fos-step {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-6);
  padding: var(--ds-fos-sp-4) var(--ds-fos-sp-5);
  border-radius: var(--ds-fos-radius);
}
.ds-fos-step--next { background: var(--ds-fos-accent-soft); }
.ds-fos-step__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-fos-step-num);
  height: var(--ds-fos-step-num);
  border: var(--ds-fos-bw) solid var(--ds-fos-border-strong);
  border-radius: var(--ds-fos-radius-round);
  background: var(--ds-fos-panel);
  color: var(--ds-fos-text-muted);
  font-size: var(--ds-fos-fs-sm);
  font-weight: var(--ds-fos-fw-semibold);
}
.ds-fos-step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ds-fos-sp-1); }
.ds-fos-step__title {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-3);
  font-size: var(--ds-fos-fs-md);
  font-weight: var(--ds-fos-fw-semibold);
  color: var(--ds-fos-text-strong);
}
.ds-fos-step__detail { font-size: var(--ds-fos-fs-sm); color: var(--ds-fos-text-muted); overflow-wrap: anywhere; }
.ds-fos-step__actions { flex: none; display: flex; align-items: center; gap: var(--ds-fos-sp-3); }
.ds-fos-step--active .ds-fos-step__num,
.ds-fos-step--next .ds-fos-step__num {
  border-color: var(--ds-fos-accent);
  background: var(--ds-fos-accent-soft);
  color: var(--ds-fos-accent);
}
.ds-fos-step--done .ds-fos-step__num {
  border-color: var(--ds-fos-success);
  background: var(--ds-fos-success);
  color: var(--ds-fos-text-on-accent);
}
.ds-fos-step--skipped .ds-fos-step__num { border-style: dashed; }
.ds-fos-step--blocked .ds-fos-step__title { color: var(--ds-fos-text-muted); font-weight: var(--ds-fos-fw-medium); }
.ds-fos-step--blocked .ds-fos-step__num { background: var(--ds-fos-surface-2); }

/* ─── NEXTSTEP: "Prossimo passo" con un solo bottone primario ───────────── */
.ds-fos-nextstep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-fos-sp-8);
  padding: var(--ds-fos-sp-6) var(--ds-fos-sp-8);
  border-radius: var(--ds-fos-radius-md);
  background: var(--ds-fos-accent-soft);
}
.ds-fos-nextstep__body { min-width: 0; }
.ds-fos-nextstep__eyebrow {
  font-size: var(--ds-fos-fs-xs);
  font-weight: var(--ds-fos-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ds-fos-ls-md);
  color: var(--ds-fos-accent);
}
.ds-fos-nextstep__title {
  margin-top: var(--ds-fos-sp-1);
  font-size: var(--ds-fos-fs-xl);
  font-weight: var(--ds-fos-fw-semibold);
  color: var(--ds-fos-text-strong);
}
.ds-fos-nextstep__detail { margin-top: var(--ds-fos-sp-1); font-size: var(--ds-fos-fs-md); color: var(--ds-fos-text-secondary); overflow-wrap: anywhere; }
.ds-fos-nextstep--done { background: var(--ds-fos-success-bg); }
.ds-fos-nextstep--done .ds-fos-nextstep__eyebrow { color: var(--ds-fos-success-text); }

/* ─── PROGRESS: <progress> senza stili inline ──────────────────────────── */
.ds-fos-progress {
  appearance: none;
  width: var(--ds-fos-progress-w);
  height: var(--ds-fos-h-progress);
  border: 0;
  border-radius: var(--ds-fos-radius-pill);
  background: var(--ds-fos-surface-2);
  overflow: hidden;
}
.ds-fos-progress::-webkit-progress-bar   { background: var(--ds-fos-surface-2); }
.ds-fos-progress::-webkit-progress-value { background: var(--ds-fos-success); border-radius: var(--ds-fos-radius-pill); }
.ds-fos-progress::-moz-progress-bar      { background: var(--ds-fos-success); border-radius: var(--ds-fos-radius-pill); }

.ds-fos-progress--warn::-webkit-progress-value, .ds-fos-progress--warn::-moz-progress-bar   { background: var(--ds-fos-warn); }
.ds-fos-progress--danger::-webkit-progress-value, .ds-fos-progress--danger::-moz-progress-bar { background: var(--ds-fos-danger); }

/* ─── CARD comprimibile: riepilogo nell'header + stato chiuso ───────────── */
.ds-fos-card__meta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ds-fos-fs-sm);
  color: var(--ds-fos-text-muted);
}
.ds-fos-card.is-collapsed > .ds-fos-card__header { border-bottom: 0; }

/* ─── STATUSBOX: esito con pallino, titolo/sottotitolo e badge ──────────── */
.ds-fos-statusbox {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-5);
  padding: var(--ds-fos-sp-5) var(--ds-fos-sp-6);
  border-radius: var(--ds-fos-radius);
  background: var(--ds-fos-surface-2);
}
.ds-fos-statusbox--ok   { background: var(--ds-fos-success-bg); }
.ds-fos-statusbox--warn { background: var(--ds-fos-warn-bg); }
.ds-fos-statusbox--err  { background: var(--ds-fos-danger-bg); }
.ds-fos-statusbox__body  { flex: 1; min-width: 0; }
.ds-fos-statusbox__title { font-size: var(--ds-fos-fs-md); font-weight: var(--ds-fos-fw-semibold); color: var(--ds-fos-text-strong); }
.ds-fos-statusbox__sub   { font-size: var(--ds-fos-fs-sm); color: var(--ds-fos-text-secondary); }

/* ─── STATUSBAR: riga informativa a fondo pagina ────────────────────────── */
.ds-fos-statusbar {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-4);
  padding: var(--ds-fos-sp-4) var(--ds-fos-sp-6);
  font-size: var(--ds-fos-fs-sm);
  color: var(--ds-fos-text-muted);
  background: var(--ds-fos-panel);
  border: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  border-radius: var(--ds-fos-radius-md);
}

/* ─── Righe cliccabili, section "completata", colonne pari ──────────────── */
.ds-fos-row--clickable { cursor: pointer; }
.ds-fos-section--done > .ds-fos-section__header { background: var(--ds-fos-success-bg); }
.ds-fos-cols--even { --ds-fos-cols-main: 1fr; --ds-fos-cols-side: 1fr; }

/* ─── Inventari: chip, scelte, passi a pallini, input inline ───────────── */
.ds-fos-is-loading { opacity: var(--ds-fos-op-muted); pointer-events: none; }
.ds-fos-row--flagged > td:first-child { box-shadow: inset var(--ds-fos-bw-lg) 0 0 var(--ds-fos-danger); }
.ds-fos-text-warning { color: var(--ds-fos-warn-text); }
.ds-fos-text-secondary { color: var(--ds-fos-text-secondary); }
.ds-fos-eyebrow {
  font-size: var(--ds-fos-fs-xs);
  font-weight: var(--ds-fos-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ds-fos-ls-md);
  color: var(--ds-fos-text-muted);
}
.ds-fos-heading { font-size: var(--ds-fos-fs-xl); font-weight: var(--ds-fos-fw-semibold); color: var(--ds-fos-text-strong); }

.ds-fos-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-fos-sp-3);
  height: var(--ds-fos-h-badge-lg);
  padding: 0 var(--ds-fos-sp-3) 0 var(--ds-fos-sp-5);
  border: var(--ds-fos-bw) solid var(--ds-fos-border);
  border-radius: var(--ds-fos-radius-pill);
  background: var(--ds-fos-panel);
  font-size: var(--ds-fos-fs-sm);
  color: var(--ds-fos-text-secondary);
}
.ds-fos-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-fos-text-muted);
  cursor: pointer;
}
.ds-fos-chip__remove:hover { color: var(--ds-fos-danger-text); }

.ds-fos-choices { display: flex; flex-direction: column; gap: var(--ds-fos-sp-4); }
.ds-fos-choice {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-5);
  width: 100%;
  padding: var(--ds-fos-sp-5) var(--ds-fos-sp-6);
  border: var(--ds-fos-bw) solid var(--ds-fos-border);
  border-radius: var(--ds-fos-radius);
  background: var(--ds-fos-panel);
  color: var(--ds-fos-text);
  font-family: var(--ds-fos-font-ui);
  font-size: var(--ds-fos-fs-md);
  font-weight: var(--ds-fos-fw-medium);
  text-align: left;
  cursor: pointer;
  transition: all var(--ds-fos-transition);
}
.ds-fos-choice i { font-size: var(--ds-fos-icon-xl); color: var(--ds-fos-text-muted); }
.ds-fos-choice:hover { border-color: var(--ds-fos-accent); background: var(--ds-fos-surface-1); }
.ds-fos-choice.is-selected {
  border-color: var(--ds-fos-accent);
  background: var(--ds-fos-accent-soft);
  color: var(--ds-fos-accent);
  font-weight: var(--ds-fos-fw-semibold);
}
.ds-fos-choice.is-selected i { color: var(--ds-fos-accent); }
.ds-fos-choice--dashed { border-style: dashed; justify-content: space-between; }
.ds-fos-checklist__item--button {
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ds-fos-checklist__item.is-selected { background: var(--ds-fos-accent-soft); }

.ds-fos-progress-steps { display: flex; align-items: center; gap: var(--ds-fos-sp-3); }
.ds-fos-progress-steps__dot {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-fos-step-num);
  height: var(--ds-fos-step-num);
  border: var(--ds-fos-bw) solid var(--ds-fos-border-strong);
  border-radius: var(--ds-fos-radius-round);
  background: var(--ds-fos-surface-1);
  color: var(--ds-fos-text-secondary);
  font-size: var(--ds-fos-fs-sm);
  font-weight: var(--ds-fos-fw-semibold);
}
.ds-fos-progress-steps__dot.is-done   { border-color: var(--ds-fos-success); background: var(--ds-fos-success); color: var(--ds-fos-text-on-accent); }
.ds-fos-progress-steps__dot.is-active { border-color: var(--ds-fos-accent); background: var(--ds-fos-accent); color: var(--ds-fos-text-on-accent); box-shadow: 0 0 0 var(--ds-fos-ring-w) var(--ds-fos-accent-ring); }
.ds-fos-progress-steps__line { flex: 1; height: var(--ds-fos-bw-md); background: var(--ds-fos-border); }
.ds-fos-progress-steps__line.is-done { background: var(--ds-fos-success); }

.ds-fos-input--inline {
  height: auto;
  padding: var(--ds-fos-sp-1) var(--ds-fos-sp-2);
  border-color: transparent;
  border-bottom: var(--ds-fos-bw) dashed var(--ds-fos-border-strong);
  border-radius: 0;
  background: transparent;
}
.ds-fos-input--inline:focus { border-bottom-style: solid; border-bottom-color: var(--ds-fos-accent); box-shadow: none; }

.ds-fos-modal__panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ─── PDF inline, testo citato, spaziatura destra automatica ───────────── */
.ds-fos-pdf-frame { width: 100%; height: 60dvh; min-height: 420px; border: 0; display: block; background: var(--ds-fos-surface-2); }
.ds-fos-quote {
  margin: var(--ds-fos-sp-2) 0 0;
  padding: var(--ds-fos-sp-4) var(--ds-fos-sp-5);
  background: var(--ds-fos-surface-2);
  border-left: var(--ds-fos-bw-md) solid var(--ds-fos-border-strong);
  border-radius: var(--ds-fos-radius);
  font-family: var(--ds-fos-font-mono);
  font-size: var(--ds-fos-fs-xs);
  color: var(--ds-fos-text-muted);
  white-space: pre-wrap;
  max-height: 160px;
  overflow-y: auto;
}
.ds-fos-mail-item__thread-msg {
  margin-top: var(--ds-fos-sp-3);
  padding: var(--ds-fos-sp-3) var(--ds-fos-sp-4);
  border-left: var(--ds-fos-bw-md) solid var(--ds-fos-border);
  border-radius: var(--ds-fos-radius);
  background: var(--ds-fos-surface-2);
}
.ds-fos-mail-item__thread-msg.is-inbound { border-left-color: var(--ds-fos-accent); background: var(--ds-fos-accent-soft); }
.ds-fos-ml-auto { margin-left: auto; }
.ds-fos-btn--as-label { cursor: pointer; }

/* ─── Nav compatta a riga singola (dashboard home, colonna laterale) ───── */
.ds-fos-quick-grid--single { grid-template-columns: 1fr; }
.ds-fos-flex-2 { flex: 2; min-width: 0; }
.ds-fos-quick-grid--single .ds-fos-quick-item { border-right: 0; }
.ds-fos-list-group-label {
  padding: var(--ds-fos-sp-5) var(--ds-fos-sp-7) var(--ds-fos-sp-2);
  font-size: var(--ds-fos-fs-xs);
  font-weight: var(--ds-fos-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ds-fos-ls-md);
  color: var(--ds-fos-text-muted);
}
.ds-fos-list-group-label:not(:first-child) { border-top: var(--ds-fos-bw) solid var(--ds-fos-border-light); margin-top: var(--ds-fos-sp-2); }

/* ─── RAIL: navigazione verticale a icone per dettagli con molte sezioni ── */
.ds-fos-rail-layout { display: flex; align-items: flex-start; gap: var(--ds-fos-sp-8); }
.ds-fos-rail {
  flex: 0 0 var(--ds-fos-rail-w);
  display: flex;
  flex-direction: column;
  gap: var(--ds-fos-sp-1);
  position: sticky;
  top: 0;
}
.ds-fos-rail__item {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-4);
  padding: var(--ds-fos-sp-4) var(--ds-fos-sp-5);
  border: 0;
  border-radius: var(--ds-fos-radius);
  background: transparent;
  color: var(--ds-fos-text-secondary);
  font-family: var(--ds-fos-font-ui);
  font-size: var(--ds-fos-fs-md);
  text-align: left;
  cursor: pointer;
  transition: all var(--ds-fos-transition);
}
.ds-fos-rail__item > i:first-child { flex: none; font-size: var(--ds-fos-icon-xl); }
.ds-fos-rail__item:hover { background: var(--ds-fos-surface-1); color: var(--ds-fos-text); }
.ds-fos-rail__item.is-active { background: var(--ds-fos-accent-soft); color: var(--ds-fos-accent); font-weight: var(--ds-fos-fw-semibold); }
.ds-fos-rail__label { flex: 1; min-width: 0; }
.ds-fos-rail__content { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .ds-fos-rail-layout { flex-direction: column; }
  .ds-fos-rail { flex-direction: row; flex-wrap: wrap; position: static; width: 100%; }
}

/* ─── DISCLOSURE: riga con dettaglio a comparsa (elenchi, non tabelle) ──── */
.ds-fos-disclosure { border: var(--ds-fos-bw) solid var(--ds-fos-border-light); border-radius: var(--ds-fos-radius); overflow: hidden; }
.ds-fos-disclosure + .ds-fos-disclosure { margin-top: var(--ds-fos-sp-3); }
.ds-fos-disclosure__head {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-5);
  padding: var(--ds-fos-sp-5) var(--ds-fos-sp-6);
  cursor: pointer;
  background: var(--ds-fos-panel);
}
.ds-fos-disclosure__head:hover { background: var(--ds-fos-surface-1); }
.ds-fos-disclosure__chevron { transition: transform var(--ds-fos-transition); color: var(--ds-fos-text-muted); }
.ds-fos-disclosure.is-open .ds-fos-disclosure__chevron { transform: rotate(90deg); }
.ds-fos-disclosure__body { display: none; padding: var(--ds-fos-sp-6); border-top: var(--ds-fos-bw) solid var(--ds-fos-border-light); background: var(--ds-fos-surface-2); }
.ds-fos-disclosure.is-open .ds-fos-disclosure__body { display: block; }

/* ─── Licenze: barra a piena larghezza, righe misuratore, slider, tabella
   annidata, righe-gruppo con disclosure ───────────────────────────────── */
.ds-fos-progress--block { width: 100%; }

.ds-fos-meter-row {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-6);
  padding: var(--ds-fos-sp-4) 0;
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border-light);
}
.ds-fos-meter-row:last-child { border-bottom: 0; }
.ds-fos-meter-row__label {
  flex: 0 0 var(--ds-fos-meter-label-w);
  font-size: var(--ds-fos-fs-sm);
  font-weight: var(--ds-fos-fw-semibold);
  color: var(--ds-fos-text-strong);
}
.ds-fos-meter-row__bar { flex: 1; }
.ds-fos-meter-row__value { flex: 0 0 auto; font-size: var(--ds-fos-fs-sm); color: var(--ds-fos-text-muted); white-space: nowrap; }

.ds-fos-range { width: 100%; accent-color: var(--ds-fos-accent); cursor: pointer; }

.ds-fos-table--nested { box-shadow: none; }
.ds-fos-table--nested td { background: var(--ds-fos-surface-2); border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border-light); }
.ds-fos-table--nested td:first-child { padding-left: var(--ds-fos-sp-10); color: var(--ds-fos-text-secondary); }

.ds-fos-table__group-row { cursor: pointer; background: var(--ds-fos-surface-1); }
.ds-fos-table__group-row:hover { background: var(--ds-fos-surface-2); }
.ds-fos-table__chevron { display: inline-block; transition: transform var(--ds-fos-transition); margin-right: var(--ds-fos-sp-3); }
.ds-fos-table__group-row[aria-expanded="true"] .ds-fos-table__chevron { transform: rotate(90deg); }
.ds-fos-table__group-detail-cell { padding: 0 !important; }
.ds-fos-table__group-detail[hidden] { display: none; }

/* ─── Varianti e utility che mancavano ──────────────────────────────────── */
.ds-fos-block { display: block; }
.ds-fos-msg--warn { color: var(--ds-fos-warn-text); }
.ds-fos-badge--violet { background: var(--ds-fos-violet-bg); color: var(--ds-fos-violet-text); border-color: var(--ds-fos-violet-border); }
.ds-fos-row--danger { background: var(--ds-fos-danger-bg); }
.ds-fos-input[readonly] { background: var(--ds-fos-surface-2); }

/* ─── Sincroware: card dei job ──────────────────────────────────────────── */
#sincroware-section .sincro-jobs-container {
  display: flex;
  flex-direction: column;
  gap: var(--ds-fos-sp-6);
  padding: var(--ds-fos-sp-6);
}
#sincroware-section .job-card {
  border: var(--ds-fos-bw) solid var(--ds-fos-border);
  background: var(--ds-fos-panel);
  border-radius: var(--ds-fos-radius-md);
  padding: var(--ds-fos-sp-7) var(--ds-fos-sp-8);
  transition: border-color var(--ds-fos-transition);
}
#sincroware-section .job-card.job-overdue { border-color: var(--ds-fos-danger); }
#sincroware-section .job-card-header {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-4);
  margin-bottom: var(--ds-fos-sp-5);
  font-weight: var(--ds-fos-fw-semibold);
  color: var(--ds-fos-text);
}
#sincroware-section .job-cdc {
  font-size: var(--ds-fos-fs-2xl);
  letter-spacing: var(--ds-fos-ls-sm);
}
#sincroware-section .pill {
  font-size: var(--ds-fos-fs-sm);
  padding: var(--ds-fos-sp-1) var(--ds-fos-sp-4);
  border-radius: var(--ds-fos-radius-pill);
  font-weight: var(--ds-fos-fw-semibold);
}
#sincroware-section .pill-success { background: var(--ds-fos-success);     color: var(--ds-fos-text-on-accent); }
#sincroware-section .pill-neutral { background: var(--ds-fos-border);      color: var(--ds-fos-text-secondary); }
#sincroware-section .pill-warning { background: var(--ds-fos-warn-border); color: var(--ds-fos-warn-text); }
#sincroware-section .pill-danger  { background: var(--ds-fos-danger);      color: var(--ds-fos-text-on-accent); }
#sincroware-section .job-steps {
  display: flex;
  align-items: center;
  margin-bottom: var(--ds-fos-sp-4);
}
#sincroware-section .step-pill {
  font-size: var(--ds-fos-fs-sm);
  padding: var(--ds-fos-sp-2) var(--ds-fos-sp-4);
  border-radius: var(--ds-fos-radius);
  white-space: nowrap;
  border: var(--ds-fos-bw) solid var(--ds-fos-border);
}
#sincroware-section .step-done {
  background: var(--ds-fos-success);
  color: var(--ds-fos-text-on-accent);
  border-color: transparent;
}
#sincroware-section .step-missing {
  color: var(--ds-fos-text-secondary);
  background: transparent;
}
#sincroware-section .step-connector {
  flex: 1 1 auto;
  height: var(--ds-fos-bw);
  background: var(--ds-fos-border);
  margin: 0 var(--ds-fos-sp-2);
  min-width: var(--ds-fos-sp-4);
}
#sincroware-section .job-missing {
  font-size: var(--ds-fos-fs-md);
  color: var(--ds-fos-text-secondary);
  margin-bottom: var(--ds-fos-sp-4);
}
#sincroware-section .job-progress-wrap {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-5);
}
#sincroware-section .job-progress-bar {
  flex: 1 1 auto;
  height: var(--ds-fos-h-progress);
  border-radius: var(--ds-fos-radius-pill);
  background: var(--ds-fos-border);
  overflow: hidden;
}
#sincroware-section .job-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--ds-fos-accent);
  transition: width var(--ds-fos-transition-slow), background-color var(--ds-fos-transition-slow);
}
#sincroware-section .job-progress-fill.progress-overdue { background: var(--ds-fos-danger); }
#sincroware-section .job-progress-label {
  font-size: var(--ds-fos-fs-sm);
  color: var(--ds-fos-text-secondary);
  min-width: var(--ds-fos-progress-label-w);
  text-align: right;
}
#sincroware-section .empty-state {
  text-align: center;
  padding: var(--ds-fos-sp-12);
  color: var(--ds-fos-text-secondary);
}

/* ─── Dashboard (home.js) ───────────────────────────────────────────────────
   Nomi nuovi ds-fos-*: sostituiscono gli style="" e gli onmouseenter/leave
   che stavano nel markup generato da home.js.
   ─────────────────────────────────────────────────────────────────────────── */

/* Saluto */
.ds-fos-home__greeting {
  font-size: var(--ds-fos-fs-4xl);
  font-weight: var(--ds-fos-fw-bold);
  color: var(--ds-fos-text-strong);
}

/* Griglie */
.ds-fos-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ds-fos-stat-grid-min-w), 1fr));
  gap: var(--ds-fos-sp-8);
  width: 100%;
}
.ds-fos-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--ds-fos-card-grid-min-w), 1fr));
  gap: var(--ds-fos-sp-8);
  width: 100%;
}

/* Stat card: varianti usate dalla dashboard */
.ds-fos-stat-card--dim { opacity: var(--ds-fos-op-soft); }
.ds-fos-stat-card__sub--note {
  margin-top: var(--ds-fos-sp-3);
  line-height: var(--ds-fos-lh-snug);
}
.ds-fos-stat-card__foot {
  margin-top: var(--ds-fos-sp-5);
  padding-top: var(--ds-fos-sp-4);
  border-top: var(--ds-fos-bw) solid var(--ds-fos-border-light);
}
.ds-fos-stat-card__multi-value--warn   { color: var(--ds-fos-warn-text); }
.ds-fos-stat-card__multi-value--danger { color: var(--ds-fos-danger-text); }

/* Riga lista con icona (elenco "Task operativi da fare") */
.ds-fos-list-item {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-6);
  padding: var(--ds-fos-sp-5) var(--ds-fos-sp-8);
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  cursor: pointer;
  transition: background var(--ds-fos-transition);
}
.ds-fos-list-item:hover { background: var(--ds-fos-surface-1); }
.ds-fos-list-item__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-fos-icon-box);
  height: var(--ds-fos-icon-box);
  border-radius: var(--ds-fos-radius);
  background: var(--ds-fos-surface-2);
  font-size: var(--ds-fos-icon-2xl);
  color: var(--ds-fos-text-secondary);
}
.ds-fos-list-item__icon--accent { color: var(--ds-fos-accent); }
.ds-fos-list-item__icon--warn   { color: var(--ds-fos-warn-text); }
.ds-fos-list-item__icon--danger { color: var(--ds-fos-danger); }
.ds-fos-list-item__main  { flex: 1; min-width: 0; }
.ds-fos-list-item__title {
  font-size: var(--ds-fos-fs-md);
  font-weight: var(--ds-fos-fw-medium);
  color: var(--ds-fos-text);
}
.ds-fos-list-item__desc {
  font-size: var(--ds-fos-fs-xs);
  color: var(--ds-fos-text-muted);
}
.ds-fos-list-item__chevron {
  flex-shrink: 0;
  font-size: var(--ds-fos-icon-md);
  color: var(--ds-fos-text-muted);
}

/* Collegamenti rapidi (griglia a 2 colonne dentro una card) */
.ds-fos-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.ds-fos-quick-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-5);
  padding: var(--ds-fos-sp-5) var(--ds-fos-sp-7);
  border-right: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  cursor: pointer;
  transition: background var(--ds-fos-transition);
}
.ds-fos-quick-item:hover { background: var(--ds-fos-surface-1); }
.ds-fos-quick-item__icon {
  flex-shrink: 0;
  font-size: var(--ds-fos-icon-2xl);
  color: var(--ds-fos-accent);
}
.ds-fos-quick-item__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ds-fos-fs-md);
  font-weight: var(--ds-fos-fw-medium);
  color: var(--ds-fos-text);
}
.ds-fos-quick-item__badge { margin-left: auto; }

/* Riga task (planner) */
.ds-fos-task-row {
  display: flex;
  align-items: center;
  gap: var(--ds-fos-sp-6);
  padding: var(--ds-fos-sp-5) 0;
  border-bottom: var(--ds-fos-bw) solid var(--ds-fos-border-light);
}
.ds-fos-task-row__main  { flex: 1; min-width: 0; }
.ds-fos-task-row__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ds-fos-fs-md);
  color: var(--ds-fos-text);
}
.ds-fos-task-row__meta {
  font-size: var(--ds-fos-fs-xs);
  color: var(--ds-fos-text-muted);
}
.ds-fos-task-row__meta--overdue { color: var(--ds-fos-danger); }
.ds-fos-task-row__flag {
  margin-left: var(--ds-fos-sp-2);
  color: var(--ds-fos-danger);
}

/* Piè di pagina della dashboard */
.ds-fos-footnote {
  margin-top: var(--ds-fos-sp-16);
  padding-top: var(--ds-fos-sp-8);
  border-top: var(--ds-fos-bw) solid var(--ds-fos-border-light);
  text-align: center;
  font-size: var(--ds-fos-fs-xs);
  letter-spacing: var(--ds-fos-ls-sm);
  color: var(--ds-fos-text-muted);
}

/* ─── Compat: keyframes "spin" usato da markup generato dai file JS ─────────
   Nuovo codice: usare .ds-fos-spin. Rimuovere quando non serve più. */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════════
   END FOS DESIGN SYSTEM
   ════════════════════════════════════════════════════════════════════════════ */