/* ============================================================
   STRATUS SUITE — Component styles (Fase C)
   Stili dei componenti condivisi. Consumano SOLO i token di
   design-tokens.css. Namespace `.ds-` per non collidere con
   Tailwind/stili legacy durante il rollout progressivo.
   Usati da public/shared/design.js (React.createElement).
   ============================================================ */

.ds-root, .ds-root * { box-sizing: border-box; }
.ds-root { font-family: var(--font-sans); color: var(--text); font-size: var(--text-body); line-height: var(--leading-normal); }
.ds-mono { font-family: var(--font-mono); }
.ds-eyebrow { font-family: var(--font-mono); font-size: var(--text-micro); text-transform: uppercase;
              letter-spacing: var(--tracking-label); color: var(--text-dim); }

/* ---------- Button ---------- */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
          font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--weight-medium);
          padding: 9px 16px; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer;
          transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
          white-space: nowrap; }
.ds-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.ds-btn--primary { background: var(--emerald); color: var(--text-on-accent); font-weight: var(--weight-semibold); }
.ds-btn--primary:hover { background: var(--emerald-hover); }
.ds-btn--secondary { background: var(--bg-surface); color: var(--text); border-color: var(--border-strong); }
.ds-btn--secondary:hover { background: var(--bg-hover); }
.ds-btn--ghost { background: transparent; color: var(--text-muted); }
.ds-btn--ghost:hover { background: var(--bg-hover); color: var(--text); }
.ds-btn--danger { background: var(--danger); color: #fff; }
.ds-btn--danger:hover { filter: brightness(.94); }
.ds-btn--sm { padding: 6px 12px; font-size: var(--text-body-sm); }
.ds-btn--lg { padding: 12px 20px; font-size: var(--text-body-lg); }
.ds-btn[disabled], .ds-btn--loading { opacity: .55; cursor: not-allowed; pointer-events: none; }

.ds-iconbtn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md);
              border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer;
              transition: background var(--transition-fast), color var(--transition-fast); }
.ds-iconbtn:hover { background: var(--bg-hover); color: var(--text); }
.ds-iconbtn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.ds-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
              display: inline-block; animation: ds-spin .7s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ---------- Card ---------- */
.ds-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ds-card--pad { padding: var(--space-6); }
.ds-card--elevated { box-shadow: var(--shadow-md); }
.ds-card__head { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border);
                 display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ds-card__title { font-size: var(--text-h3); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.ds-card__body { padding: var(--space-6); }
.ds-card__foot { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border);
                 display: flex; justify-content: flex-end; gap: var(--space-3); }

/* ---------- KpiCard ---------- */
.ds-kpi { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.ds-kpi__lbl { font-family: var(--font-mono); font-size: var(--text-micro); text-transform: uppercase;
               letter-spacing: var(--tracking-label); color: var(--text-dim); }
.ds-kpi__val { font-family: var(--font-mono); font-size: var(--text-h1); font-weight: var(--weight-semibold);
               letter-spacing: var(--tracking-tight); margin-top: 6px; }
.ds-kpi__delta { font-size: var(--text-caption); font-weight: var(--weight-semibold); margin-top: 4px; }
.ds-kpi__delta--up { color: var(--success); } .ds-kpi__delta--down { color: var(--danger); }
.ds-kpi__delta--flat { color: var(--text-muted); }

/* ---------- Form ---------- */
.ds-field { display: flex; flex-direction: column; gap: 6px; }
.ds-field__label { font-size: var(--text-body-sm); font-weight: var(--weight-medium); }
.ds-field__label .req { color: var(--danger); margin-left: 2px; }
.ds-field__help { font-size: var(--text-caption); color: var(--text-muted); }
.ds-field__err { font-size: var(--text-caption); color: var(--danger); }
.ds-input, .ds-select, .ds-textarea {
  font-family: var(--font-sans); font-size: var(--text-body); color: var(--text); background: var(--bg-inset);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 9px 12px; width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--text-dim); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: none; border-color: var(--border-accent); box-shadow: var(--shadow-focus); }
.ds-input--error, .ds-select--error, .ds-textarea--error { border-color: var(--danger); }
.ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled { background: var(--bg-surface-2); color: var(--text-dim); cursor: not-allowed; }
.ds-toggle { position: relative; width: 38px; height: 22px; border-radius: var(--radius-full); background: var(--border-strong);
             cursor: pointer; transition: background var(--transition-fast); flex: none; }
.ds-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
                    background: #fff; transition: transform var(--transition-fast); box-shadow: var(--shadow-sm); }
.ds-toggle--on { background: var(--emerald); }
.ds-toggle--on::after { transform: translateX(16px); }

/* ---------- Badge / Pill ---------- */
.ds-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-caption);
            font-weight: var(--weight-medium); padding: 3px 9px; border-radius: var(--radius-full); white-space: nowrap; }
.ds-badge .ds-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ds-badge--success { color: var(--success); background: var(--success-bg); }
.ds-badge--warning { color: var(--warning); background: var(--warning-bg); }
.ds-badge--danger  { color: var(--danger);  background: var(--danger-bg); }
.ds-badge--info    { color: var(--info);    background: var(--info-bg); }
.ds-badge--neutral { color: var(--text-muted); background: var(--bg-surface-2); }

/* ---------- Tabs ---------- */
.ds-tabs { display: flex; gap: var(--space-6); border-bottom: 1px solid var(--border); }
.ds-tab { font-size: var(--text-body); color: var(--text-muted); padding: 10px 2px; border: none; background: none;
          border-bottom: 2px solid transparent; cursor: pointer; transition: color var(--transition-fast); }
.ds-tab:hover { color: var(--text); }
.ds-tab--active { color: var(--text); border-bottom-color: var(--emerald); font-weight: var(--weight-medium); }
.ds-tabs--pill { border: none; gap: var(--space-1); background: var(--bg-surface-2); padding: 3px; border-radius: var(--radius-md); }
.ds-tabs--pill .ds-tab { border: none; padding: 6px 12px; border-radius: var(--radius-sm); font-size: var(--text-body-sm); }
.ds-tabs--pill .ds-tab--active { background: var(--emerald); color: var(--text-on-accent); }

/* ============================================================
   UTILITY token-backed (.u-*) — per migrare i moduli da Tailwind
   hardcoded a token senza perdere il dark. Mappano 1:1 gli idiomi
   Tailwind piu comuni ai token semantici.
   ============================================================ */
/* testo */
.u-text { color: var(--text); }
.u-muted { color: var(--text-muted); }
.u-dim { color: var(--text-dim); }
.u-accent { color: var(--text-accent); }
.u-success { color: var(--success); }
.u-warning { color: var(--warning); }
.u-danger { color: var(--danger); }
.u-info { color: var(--info); }
/* sfondi */
.u-bg-app { background: var(--bg-app); }
.u-bg-surface { background: var(--bg-surface); }
.u-bg-2 { background: var(--bg-surface-2); }
.u-bg-accent { background: var(--emerald); color: var(--text-on-accent); }
.u-bg-accent-subtle { background: var(--bg-accent-subtle); }
.u-bg-success { background: var(--success-bg); }
.u-bg-warning { background: var(--warning-bg); }
.u-bg-danger { background: var(--danger-bg); }
.u-bg-info { background: var(--info-bg); }
.u-hover:hover { background: var(--bg-hover); }
/* bordi (larghezza + colore token, cosi il dark funziona) */
.u-bd { border: 1px solid var(--border); }
.u-bd-b { border-bottom: 1px solid var(--border); }
.u-bd-t { border-top: 1px solid var(--border); }
.u-bd-r { border-right: 1px solid var(--border); }
.u-bd-l { border-left: 1px solid var(--border); }
.u-bc { border-color: var(--border); }
/* focus ring accent */
.u-focus:focus { outline: none; box-shadow: var(--shadow-focus); border-color: var(--border-accent); }

/* ---------- Sidebar nav item (shell dei moduli) ---------- */
.ds-navitem { display:flex; align-items:center; gap:var(--space-3); width:100%; padding:9px 14px; border-radius:var(--radius-md);
              margin-bottom:2px; color:var(--text-muted); background:transparent; border:none; cursor:pointer;
              font-weight:var(--weight-medium); font-size:var(--text-body); text-align:left;
              transition:background var(--transition-fast), color var(--transition-fast); }
.ds-navitem:hover { background:var(--bg-hover); color:var(--text); }
.ds-navitem--active, .ds-navitem--active:hover { background:var(--emerald); color:var(--text-on-accent); }

/* ---------- Avatar ---------- */
.ds-avatar { display: inline-grid; place-items: center; border-radius: var(--radius-full); background: var(--bg-accent-subtle);
             color: var(--emerald-strong); font-weight: var(--weight-semibold); font-size: var(--text-body-sm); flex: none; }

/* ---------- Table ---------- */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
.ds-table thead th { text-align: left; font-family: var(--font-mono); font-size: var(--text-micro); text-transform: uppercase;
                     letter-spacing: var(--tracking-wide); color: var(--text-muted); background: var(--bg-surface-2);
                     padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: var(--weight-medium); }
.ds-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); }
.ds-table tbody tr:hover { background: var(--bg-hover); }
.ds-table .ds-num { font-family: var(--font-mono); text-align: right; }

/* ---------- Modal ---------- */
.ds-backdrop { position: fixed; inset: 0; z-index: var(--z-modal-backdrop); background: rgba(9,14,11,.45);
               display: grid; place-items: center; padding: var(--space-6); animation: ds-fade var(--transition-base); }
[data-theme="dark"] .ds-backdrop { background: rgba(0,0,0,.6); }
@keyframes ds-fade { from { opacity: 0; } }
.ds-modal { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg); width: 100%; max-height: 90vh; overflow: auto; z-index: var(--z-modal); }
.ds-modal--sm { max-width: 380px; } .ds-modal--md { max-width: 520px; }
.ds-modal--lg { max-width: 720px; } .ds-modal--xl { max-width: 960px; }

/* ---------- Toast ---------- */
.ds-toast { display: inline-flex; align-items: center; gap: var(--space-3); background: var(--bg-surface);
            border: 1px solid var(--border); border-left: 3px solid var(--text-muted); border-radius: var(--radius-md);
            box-shadow: var(--shadow-md); padding: 12px 16px; font-size: var(--text-body-sm); }
.ds-toast--success { border-left-color: var(--success); }
.ds-toast--warning { border-left-color: var(--warning); }
.ds-toast--danger  { border-left-color: var(--danger); }
.ds-toast--info    { border-left-color: var(--info); }

/* ---------- EmptyState / Skeleton ---------- */
.ds-empty { text-align: center; padding: var(--space-12) var(--space-6); color: var(--text-muted); }
.ds-empty__ic { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--bg-accent-subtle);
                color: var(--emerald-strong); display: grid; place-items: center; margin: 0 auto var(--space-4); font-size: 20px; }
.ds-empty__title { font-weight: var(--weight-semibold); color: var(--text); }
.ds-skeleton { background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--bg-hover) 37%, var(--bg-surface-2) 63%);
               background-size: 400% 100%; animation: ds-shimmer 1.4s ease infinite; border-radius: var(--radius-sm); height: 12px; }
@keyframes ds-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }