:root {
  /* --- Superfici (dal chiaro allo scuro) --- */
  --bg: #f3ede2;           /* canvas di base (era surface-base) */
  --bg2: #faf6ee;          /* card, pannelli (era surface-card) */
  --bg3: #eae3d6;          /* superfici mute/inattive (era surface-muted) */
  --bg-hover: #f0e9dc;     /* hover su righe/celle */
  --bg-sidebar: #efe8dc;   /* sfondo sidebar */

  /* --- Bordi --- */
  --border: #d8d1c7;       /* bordo standard (era border-subtle) */
  --border2: #e5dfd5;      /* bordo più tenue (era border-light) */

  /* --- Testo --- */
  --text: #2b2b2b;         /* testo primario */
  --text2: #5c5854;        /* testo secondario */
  --text3: #7a7570;        /* testo terziario/label */
  --text-muted: #9e9991;   /* testo disabilitato/placeholder */

  /* --- Colore di sistema (primary) --- */
  --primary: #2b2b2b;
  --primary-hover: #1a1a1a;
  --on-primary: #faf6ee;   /* testo sopra sfondo primary */
  --primary-subtle: #e7e0d3; /* badge/avatar su sfondo primary tenue */

  /* --- Semantici di stato --- */
  --success: #2e5a36;      /* ex --accent per "positivo/in stock" */
  --success-bg: #e9f0e8;
  --success-text: #24492b;

  --amber: #b8741a;        /* attenzione/da revisionare */
  --amber-bg: #fbf3e6;

  --red: #b84a39;          /* critico/alert/errore */
  --red-bg: #f9ece9;

  --blue: #456170;         /* informativo */
  --blue-bg: #ecf1f4;

  /* --- Canali di vendita (badge specifici, non genericizzare) --- */
  --ch-subito: #c26227;
  --ch-subito-bg: #fbefe8;
  --ch-ebay: #b84a39;
  --ch-ebay-bg: #f9ece9;
  --ch-vinted: #2d776f;
  --ch-vinted-bg: #eaf4f2;

  /* --- Raggio angoli --- */
  --radius-sm: 0.125rem;   /* 2px */
  --radius: 0.25rem;       /* 4px — default: input, badge, bottoni */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px — card, modal */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-full: 9999px;   /* solo dot di stato, mai contenitori */

  /* --- Spaziature --- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --gutter: 1.5rem;
  --gutter-mobile: 1rem;
  --margin: 3rem;
  --margin-mobile: 1rem;

  /* --- Font ---
     DA DECIDERE: la bozza usa Inter/Plus Jakarta Sans/JetBrains Mono
     (3 famiglie Google Font aggiuntive). Il CRM oggi usa solo
     IBM Plex Mono + stack di sistema. Sotto propongo l'opzione
     "zero nuove richieste di rete": riuso IBM Plex Mono per i dati/badge
     e lo stack di sistema per i titoli, invece di aggiungere Inter e
     Plus Jakarta Sans. Se preferisci il look esatto della bozza,
     sostituisci --font-headline con 'Plus Jakarta Sans' e aggiungi
     il relativo <link> Google Fonts. */
  --font-mono: 'IBM Plex Mono', monospace;   /* badge, SKU, numeri tabellari */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-headline: 'Plus Jakarta Sans', var(--font-sans);

  /* --- Alias "accento" ---
     Decisione (11/09): il CRM non ha più un accento colorato proprio
     (niente lime condiviso con le altre sezioni dell'hub) — nav attivo,
     pulsanti primari e focus usano il carbone di sistema. Alias mantenuti
     così tutte le regole esistenti che referenziano var(--accent*) restano
     valide senza dover essere riscritte una per una. */
  --accent: var(--primary);
  --accent2: var(--primary-hover);
  --accent-dim: color-mix(in srgb, var(--primary) 10%, transparent);

  /* Colore dedicato al badge condizione "Nuovo Sigillato" (.cond-0), mancante nella prima migrazione token */
  --teal: #2d776f;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 14px; min-height: 100vh; line-height: 1.5; }

/* LAYOUT */
.app { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 56px 1fr; min-height: 100vh; }

/* TOPBAR */
.topbar { grid-column: 1 / -1; background: var(--bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; gap: 16px; position: sticky; top: 0; z-index: 100; }
.logo-img { height: 26px; width: auto; display: block; }

/* SIDEBAR */
.sidebar { background: var(--bg2); border-right: 1px solid var(--border); padding: 16px 0; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; }
.nav-section { padding: 16px 16px 6px; font-size: 10px; color: var(--text3); letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-mono); }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer; color: var(--text2); font-size: 13px; border-left: 2px solid transparent; transition: all 0.15s; user-select: none; }
.nav-item:hover { color: var(--text); background: var(--bg3); }
.nav-item.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-dim); }
.nav-item .icon { width: 16px; text-align: center; font-size: 15px; }
.nav-badge { margin-left: auto; background: var(--bg3); color: var(--text2); font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: 3px; }
.nav-item.active .nav-badge { background: var(--accent-dim); color: var(--accent); }

/* MAIN */
.main { background: var(--bg); overflow-y: auto; }
.page { display: none; padding: 24px; }
.page.active { display: block; }

/* PAGE HEADER */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; }
.page-title { font-size: 22px; font-weight: 700; color: var(--text); }
.page-subtitle { font-size: 12px; color: var(--text3); margin-top: 2px; font-family: var(--font-mono); }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius); font-family: var(--font-sans); font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: var(--bg3); color: var(--text); transition: all 0.15s; white-space: nowrap; }
.btn:hover { border-color: var(--border2); background: var(--bg2); }
.btn-primary { background: var(--accent); color: var(--on-primary); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent2); border-color: var(--accent2); }
.btn-danger { color: var(--red); border-color: transparent; background: transparent; }
.btn-danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-icon { padding: 6px; min-width: 32px; justify-content: center; }

/* FILTERS BAR */
.filters-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
/* Filtri rapidi Inventario (Da inserire/Da riassortire/Senza categoria): pilotano le
   stesse select filter-stato/filter-categoria (vedi toggleQuickFilter in inventario.js),
   non un filtro parallelo — lo stato "active" riflette il valore reale della select. */
.quick-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg2); color: var(--text2); font-family: var(--font-sans); font-size: 12px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.filter-chip:hover { background: var(--bg3); color: var(--text); }
.filter-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
.search-wrap input { width: 100%; padding: 8px 30px 8px 34px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-sans); font-size: 13px; }
.search-wrap::before { content: '⌕'; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text3); font-size: 16px; pointer-events: none; }
.search-wrap input:focus { outline: none; border-color: var(--accent); }
.search-clear { display: none; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text3); cursor: pointer; font-size: 13px; padding: 4px 6px; line-height: 1; border-radius: 4px; }
.search-clear:hover { color: var(--text); background: var(--bg3); }
.search-wrap input:not(:placeholder-shown) ~ .search-clear { display: block; }
select.filter-select { padding: 8px 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-sans); font-size: 13px; cursor: pointer; }
select.filter-select:focus { outline: none; border-color: var(--accent); }

/* TABLE */
.table-wrap { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
thead th { padding: 10px 14px; text-align: left; font-size: 10px; color: var(--text3); letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-mono); border-bottom: 1px solid var(--border); background: var(--bg3); font-weight: 400; cursor: pointer; user-select: none; white-space: nowrap; }
thead th:hover { color: var(--text2); }
thead th.sort-asc::after { content: ' ↑'; color: var(--accent); }
thead th.sort-desc::after { content: ' ↓'; color: var(--accent); }
tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg3); }
tbody td { padding: 11px 14px; font-size: 13px; color: var(--text); vertical-align: middle; }
.td-mono { font-family: var(--font-mono); font-size: 12px; }
.td-muted { color: var(--text2); }
.td-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
tbody tr:hover .td-actions { opacity: 1; }

/* STATUS BADGE */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 3px; font-size: 11px; font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.badge-magazzino { background: rgba(91,179,255,0.12); color: var(--blue); }
.badge-da_riassortire { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.badge-dot::before { content: '●'; font-size: 7px; }

/* STORICO DESCRIZIONI */
.pezzi-venduti-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 2px; margin-top: 10px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text2); font-weight: 500; user-select: none; }
.pezzi-venduti-toggle:hover { color: var(--text); }
.pezzi-venduti-toggle:hover .alert-section-chevron { color: var(--text2); }

.pezzo-row { border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: transparent; transition: background 0.15s, border-color 0.15s; }
/* Un pezzo venduto è tinto di verde leggero (stesso --accent lime usato altrove nell'app
   per indicare stati positivi, es. badge "da inserire"), per riconoscerlo a colpo d'occhio
   sia nella riga espansa sia nella riga compatta della sezione "Venduti". */
.pezzo-row.venduto { background: color-mix(in srgb, var(--primary) 5%, transparent); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }

/* Toggle switch generico per uno stato binario visibile in una lista (pallino che scivola,
   verde --accent quando attivo) — alternativa alla checkbox nativa, poco visibile in una riga
   densa di campi. Nato per "Venduto" (Magazzino), riusato per qualunque stato on/off in elenco
   (es. "Vista" sui canali, "richiede mappatura" in Impostazioni). Struttura: <label
   class="toggle-switch"><input type="checkbox">... <span class="toggle-slider"></span><span
   class="toggle-label">Testo</span></label> — .toggle-label è opzionale, il colore si applica
   solo se presente. */
.toggle-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); flex-shrink: 0; cursor: pointer; user-select: none; }
.toggle-switch input { display: none; }
.toggle-switch .toggle-slider { position: relative; width: 38px; height: 20px; border-radius: 999px; background: var(--bg3); border: 1px solid var(--border); flex-shrink: 0; transition: background 0.15s, border-color 0.15s; }
.toggle-switch .toggle-slider::before { content: ''; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--text3); transition: transform 0.15s, background 0.15s; }
.toggle-switch input:checked + .toggle-slider { background: color-mix(in srgb, var(--primary) 18%, transparent); border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); background: var(--accent); }
.toggle-switch input:checked ~ .toggle-label { color: var(--accent); }

.pezzo-row-compact { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text2); cursor: pointer; background: transparent; transition: background 0.1s, border-color 0.1s; }
.pezzo-row-compact:hover { background: var(--bg3); }
.pezzo-row-compact:hover .alert-section-chevron { color: var(--text2); }
/* Tinta verde riservata ai pezzi venduti (coerente con .pezzo-row.venduto) — riga compatta
   generica di base, riusata anche per i pezzi disponibili (nessuna tinta di stato). */
.pezzo-row-compact.venduto { border-color: color-mix(in srgb, var(--primary) 20%, transparent); background: color-mix(in srgb, var(--primary) 4%, transparent); }
.pezzo-row-compact.venduto:hover { background: color-mix(in srgb, var(--primary) 9%, transparent); border-color: color-mix(in srgb, var(--primary) 40%, transparent); }
.pezzo-row-compact .pezzo-compact-col1 { font-family: var(--font-mono); font-size: 11px; color: var(--text3); flex-shrink: 0; width: 70px; }
.pezzo-row-compact .pezzo-compact-col2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.pezzo-row-compact .pezzo-compact-col3 { flex-shrink: 0; font-family: var(--font-mono); font-size: 12px; color: var(--text); }

/* Pulsante isolato di espandi/comprimi (usato SOLO dove non c'è già un contenitore
   interamente cliccabile intorno, es. il pulsante "Comprimi" sulla riga espansa di un
   pezzo venduto — la riga stessa non è cliccabile, contiene campi form): stesso glyph,
   stesso colore/rotazione di `.alert-section-chevron`, ma con un box proprio (22x22px)
   e un hover proprio (bordo/sfondo), perché deve essere un target cliccabile riconoscibile
   di per sé. Non usare .btn-icon (bordo + sfondo pieno, 32px) per le frecce espandi/comprimi:
   quello stile resta riservato alle
   azioni vere e proprie (elimina, modifica) per non creare due pesi visivi diversi sulla
   stessa riga. */
.pezzo-espandi-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; background: transparent; color: var(--text3); font-size: 15px; cursor: pointer; border-radius: 4px; flex-shrink: 0; transition: color 0.1s, background 0.1s, transform 0.15s; }
.pezzo-espandi-btn:hover { color: var(--text); background: var(--bg3); }
.pezzo-espandi-btn.open { transform: rotate(90deg); }

/* Pulsante di rimozione a piena larghezza in fondo alla riga pezzo: sfondo rosso tenue
   sempre visibile (non solo in hover), coerente con .btn-danger ma con più peso visivo
   per un'azione distruttiva che ora vive isolata a fondo riga invece che tra le icone. */
.btn-elimina-riga { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 2px; padding: 9px 14px; font-size: 13px; font-weight: 500; font-family: var(--font-sans); color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); border: 1px solid color-mix(in srgb, var(--red) 25%, transparent); border-radius: var(--radius); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.btn-elimina-riga:hover { background: color-mix(in srgb, var(--red) 18%, transparent); border-color: color-mix(in srgb, var(--red) 40%, transparent); }

.storico-item { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; overflow-wrap: anywhere; }
.storico-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.storico-item-date { font-family: var(--font-mono); font-size: 11px; color: var(--text2); }
.storico-item-nota { font-size: 12px; color: var(--text2); margin-top: 2px; }
.storico-preview { margin-top: 10px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.storico-preview iframe { width: 100%; height: 320px; border: none; display: block; }
.storico-code { margin-top: 10px; max-height: 220px; overflow: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; font-family: var(--font-mono); font-size: 11px; white-space: pre-wrap; word-break: break-all; color: var(--text2); }

/* CONDIZIONE */
.cond { font-size: 11px; font-family: var(--font-mono); }
.cond-0 { color: var(--teal); }
.cond-A { color: var(--accent); }
.cond-B { color: var(--blue); }
.cond-C { color: var(--amber); }
.cond-D { color: var(--red); }

/* CATEGORY TAG */
.cat-tag { font-size: 11px; color: var(--text2); background: var(--bg3); padding: 2px 6px; border-radius: 3px; font-family: var(--font-mono); }

/* CHANNEL TAG */
.ch-ebay { color: #E53238; font-family: var(--font-mono); font-size: 11px; }
.ch-subito { color: #ff6700; font-family: var(--font-mono); font-size: 11px; }
.ch-altro { color: var(--text2); font-family: var(--font-mono); font-size: 11px; }

/* QTY CONTROL */
.qty-control { display: inline-flex; align-items: center; gap: 6px; }
.qty-btn { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--border2); background: var(--bg3); color: var(--text2); cursor: pointer; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s; user-select: none; }
.qty-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.qty-val { font-family: var(--font-mono); font-size: 13px; font-weight: 500; min-width: 20px; text-align: center; color: var(--text); }
.qty-val.zero { color: var(--red); }

/* MODAL */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal { background: var(--bg2); border: 1px solid var(--border2); border-radius: 10px; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
body.modal-open { overflow: hidden; }
.modal-body, .modal-body * { min-width: 0; }
.modal-body img, .modal-body svg { max-width: 100%; }
.no-spinner::-webkit-outer-spin-button, .no-spinner::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.no-spinner { -moz-appearance: textfield; }
/* Icona calendario nativa dei campi type="date": nessun filtro necessario col tema chiaro
   attuale (l'icona nera di default del browser è già leggibile su sfondo chiaro), solo il
   cursore a manina. In precedenza c'era .date-white con filter:invert(1) — retaggio del
   tema scuro pre-restyle "Atelier Minimal", applicato però solo su un campo e mai ripulito:
   dopo il passaggio al tema chiaro rendeva l'icona bianca su sfondo chiaro, illeggibile. */
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
.foto-item.dragging { opacity: 0.4; }
.modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 16px; font-weight: 700; }
.modal-close { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 20px; line-height: 1; padding: 2px; }
.modal-close:hover { color: var(--text); }
.modal-body { padding: 20px 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* FORM */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.span2 { grid-column: span 2; }
.form-label { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono); }
.form-input, .form-select, .form-textarea { padding: 9px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-sans); font-size: 13px; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-hint { font-size: 11px; color: var(--text3); font-family: var(--font-mono); }

/* DASHBOARD */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
/* .stat-card è condivisa anche dai pannelli di Impostazioni (non solo dalle KPI dashboard):
   qui aggiorniamo solo il raggio (DESIGN.md: card/contenitori = radius-lg, non il radius
   "piccolo" di bottoni/input) — tocca entrambi gli usi in modo innocuo, stesso aspetto per tutti. */
.stat-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; }
.stat-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); margin-bottom: 6px; }
.stat-val { font-size: 24px; font-weight: 700; font-family: var(--font-mono); font-feature-settings: "tnum" 1; color: var(--text); }
.stat-val.amber { color: var(--amber); }
.stat-sub { font-size: 11px; color: var(--text3); margin-top: 3px; font-family: var(--font-mono); }

/* Variante KPI (solo le 6 card della dashboard, via classe aggiuntiva stat-card--kpi:
   .stat-card resta invariata per i pannelli di Impostazioni) */
.stat-card--kpi { padding: var(--space-md) var(--space-lg); }
.stat-card--kpi .kpi-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.stat-card--kpi .stat-label { margin-bottom: 0; }
.kpi-icon { width: 28px; height: 28px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-icon .icon { font-size: 17px; }
.kpi-icon-blue    { background: var(--blue-bg); color: var(--blue); }
.kpi-icon-amber   { background: var(--amber-bg); color: var(--amber); }
.kpi-icon-red     { background: var(--red-bg); color: var(--red); }
.kpi-icon-primary { background: var(--primary-subtle); color: var(--text); }
.kpi-icon-success { background: var(--success-bg); color: var(--success); }

/* Box contenitore per liste a lunghezza variabile (Ultimi aggiunti, Alert attivi):
   altezza FISSA (non solo massima) con scroll interno, così le due card restano sempre
   della stessa altezza indipendentemente da quanti elementi contengono (con poco
   contenuto es. "Alert attivi" vuoto la card non si accorcia) e selezionare "righe: 50"
   non allunga la pagina all'infinito. */
.list-box { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg2); height: 340px; overflow-y: auto; }
/* #recent-list è già un .table-wrap con proprio bordo/sfondo/radius: nidificato dentro
   .list-box creava un doppio bordo. Qui lo si annulla per farlo combaciare a filo col
   contenitore, come già avviene per #dash-alerts (nessun wrapper proprio). */
.list-box .table-wrap { border: none; border-radius: 0; background: transparent; }
/* #dash-alerts non ha un wrapper con bordo come il table-wrap: senza questo padding le
   alert-item (che hanno un proprio bordo/radius) toccherebbero direttamente i bordi del
   .list-box, mentre la tabella di fianco ha già lo spazio dato dal padding delle celle -
   così le due card restano visivamente omogenee. */
#dash-alerts { padding: 10px; }

/* Select compatto per controlli inline accanto a un'etichetta piccola (es. "righe:") —
   .filter-select resta per i filtri delle barre di ricerca, più grande. */
select.select-sm { padding: 3px 6px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-family: var(--font-mono); font-size: 11px; cursor: pointer; }
select.select-sm:focus { outline: none; border-color: var(--accent); }

/* ALERT CARDS */
.alert-section-header { display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; user-select: none; }
.alert-section-header:hover .alert-section-chevron { color: var(--text2); }
.alert-section-chevron { display: inline-block; font-size: 22px; font-weight: 700; color: var(--text3); transition: transform 0.15s; }
.alert-section-chevron.open { transform: rotate(90deg); }
.alert-list { display: flex; flex-direction: column; gap: 8px; }
.alert-item { display: flex; align-items: center; gap: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.alert-icon { font-size: 16px; }
/* Titolo e descrizione ora sulla stessa riga (prima erano impilati su due righe: titolo
   in grassetto sopra, descrizione sotto — causa principale del disallineamento di altezza
   con le righe della tabella "Ultimi aggiunti", che sono a riga singola). Ellissi se il
   testo non entra, invece di andare a capo e tornare a due righe. */
.alert-text { flex: 1; font-size: 13px; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.alert-text strong { color: var(--text); flex-shrink: 0; }
.alert-text span { color: var(--text2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-item.warn { border-left: 3px solid var(--amber); }
.alert-item.danger { border-left: 3px solid var(--red); }
.alert-item.info { border-left: 3px solid var(--accent); }

/* CONFIRM */
.confirm-text { font-size: 14px; color: var(--text2); line-height: 1.6; }
.confirm-item-name { color: var(--text); font-weight: 500; }

/* NOTE BADGE */
.has-note { font-size: 12px; color: var(--text3); cursor: help; }
.has-note:hover { color: var(--text2); }

/* EMPTY STATE */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text3); }
.empty-state .empty-icon { font-size: 40px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; color: var(--text2); }
.empty-state small { font-size: 12px; font-family: var(--font-mono); }

/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

.badge-da_inserire { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--accent); }

/* DA INSERIRE TOGGLE */
.toggle-da-inserire { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--border2); background: var(--bg3); color: var(--text2); font-family: var(--font-sans); font-size: 13px; cursor: pointer; transition: all 0.15s; user-select: none; }
.toggle-da-inserire .ch-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border2); transition: background 0.15s; flex-shrink: 0; }
.toggle-da-inserire.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.toggle-da-inserire.active .ch-toggle-dot { background: var(--accent); }
.channel-toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.ch-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius); border: 1px solid var(--border2); background: var(--bg3); color: var(--text2); font-family: var(--font-sans); font-size: 13px; cursor: pointer; transition: all 0.15s; user-select: none; }
.ch-toggle:hover { color: var(--text); }
.ch-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border2); transition: background 0.15s; flex-shrink: 0; }
.ch-toggle.active { border-color: var(--ch-color, var(--accent)); color: var(--ch-color, var(--accent)); background: color-mix(in srgb, var(--ch-color, var(--accent)) 10%, transparent); }
.ch-toggle.active .ch-toggle-dot { background: var(--ch-color, var(--accent)); }

/* RESPONSIVE / MOBILE */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .topbar { flex-wrap: wrap; padding: 10px 14px; gap: 10px; row-gap: 8px; }
  .topbar-center-actions { position: static !important; transform: none !important; order: 3; width: 100%; flex-direction: column; align-items: stretch !important; gap: 8px !important; }
  .topbar-center-actions .btn-primary { width: 100%; justify-content: center; }
  #db-status { margin-left: auto; }
  .sidebar { position: static; height: auto; width: 100%; flex-direction: row; align-items: center; overflow-x: auto; overflow-y: hidden; border-right: none; border-bottom: 1px solid var(--border); padding: 6px 8px; gap: 4px; -webkit-overflow-scrolling: touch; }
  .nav-section { padding: 0 8px; white-space: nowrap; flex-shrink: 0; }
  .nav-item { white-space: nowrap; flex-shrink: 0; border-left: none; border-bottom: 2px solid transparent; padding: 8px 12px; }
  .nav-item.active { border-left: none; border-bottom-color: var(--accent); }
  .page { padding: 16px; }
  .page-header { flex-wrap: wrap; }
  .stats-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group.span2 { grid-column: span 1; }
  .filters-bar { flex-direction: column; align-items: stretch; }
  .search-wrap { max-width: none; }
  select.filter-select { width: 100%; }
  .table-wrap { overflow-x: auto; }
  table { min-width: 640px; }
  .modal { max-width: 100%; margin: 0 4px; }
}