/* Font per il valore nei cerchi fuel (deve stare in cima: un @import CSS
   viene ignorato dal browser se preceduto da altre regole). */

/* ============================================================
   COMPONENTS — topbar, filtri, tabelle, settings, modal, toast
   ============================================================ */

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--pad-lg);
  padding: var(--pad-md) var(--pad-lg);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.tb-left, .tb-right { display: flex; align-items: center; gap: var(--pad-md); }
.tb-left { flex: 0 0 auto; }
.tb-right { margin-left: auto; }

.logo-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.2rem 0.75rem 0.2rem 0.55rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface2);
  color: var(--text);
  line-height: 1;
}
.logo-badge .logo-svg {
  height: 22px;
  width: auto;
  color: var(--text);
  /* Expose accent to the SVG's var(--accent) fallback */
  display: block;
}
.logo-badge .logo-subtitle {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  padding-left: 0.5rem;
  border-left: 1px solid var(--border);
  /* baseline adjust so it sits nicely next to the logo */
  transform: translateY(1px);
}
/* Legacy dot (kept as no-op for backward compatibility with any leftover markup) */
.lb-dot { display: none; }

.tb-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tb-chip {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.tb-chip.warn { color: var(--accent3); border-color: var(--accent3); }

.tb-spacer { flex: 1; }
.tb-tabs {
  display: flex;
  gap: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.tb-tab {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0.45rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all 0.15s;
  white-space: nowrap;
}
.tb-tab:hover { color: var(--text); }
.tb-tab.active { background: var(--accent); color: #fff; }

/* ── Buttons ────────────────────────────────────────────── */
.btn-solid {
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: filter 0.15s;
}
.btn-solid:hover { filter: brightness(1.1); }
.btn-solid.danger { background: var(--danger); }
.btn-solid.muted { background: var(--surface2); color: var(--text); }

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all 0.15s;
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.file-input {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* ── Filters bar ────────────────────────────────────────── */
.filters {
  display: flex;
  gap: var(--pad-md);
  align-items: flex-end;
  padding: var(--pad-md) var(--pad-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 160px;
}
.filter-group label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}
.filter-group select, .filter-group input[type="text"] {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.filter-group select:focus, .filter-group input:focus {
  border-color: var(--accent);
}
.filter-spacer { flex: 1; }

.carrier-pills {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  max-width: 50vw;
}
.carrier-pill {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  transition: all 0.15s;
}
.carrier-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.carrier-pill:hover:not(.active) {
  border-color: var(--accent);
  color: var(--text);
}

/* ── Selettore corrieri: DROPDOWN (trigger inline + popover in body) ─── */
/* Quando #f-carriers ha la classe .cf-dd (la aggiunge filters.js) cambia
   completamente aspetto rispetto al vecchio accordion inline. Tiene un
   footprint compatto nella filter bar e apre un popover posizionato in
   document.body per evitare clipping/z-index coi genitori che hanno overflow. */
#f-carriers.cf-dd {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: none;
  max-height: none;
  overflow: visible;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.cf-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.45rem 0.7rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  min-width: 160px;
  justify-content: space-between;
}
.cf-trigger:hover { border-color: var(--accent); }
.cf-trigger.open { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface2)); }
.cf-trigger-label { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.cf-trigger-count {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  min-width: 2.2rem;
  text-align: center;
}
.cf-trigger-arrow { color: var(--muted); font-size: 0.75em; margin-left: 0.2rem; }
.cf-trigger-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-style: italic;
}
.cf-trigger-clear {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  padding: 0;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}
.cf-trigger-clear:hover { color: var(--danger); border-color: var(--danger); }

/* Popover attaccato a document.body (position: fixed da JS) */
.cf-popover {
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  width: min(420px, 94vw);
  max-height: min(520px, 70vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cfPopIn 0.12s ease-out;
}
@keyframes cfPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.cf-pop-toolbar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  flex-wrap: wrap;
}
.cf-pop-search {
  flex: 1 1 140px;
  min-width: 120px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  outline: none;
}
.cf-pop-search:focus { border-color: var(--accent); }

.cf-pop-meta {
  padding: 0.35rem 0.7rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-family: var(--mono);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  background: var(--surface);
}

.cf-pop-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.3rem 0.3rem 0.4rem 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cf-chip {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.cf-chip.ghost { background: transparent; color: var(--muted); border-color: var(--border); }
.cf-chip.ghost:hover { color: var(--text); border-color: var(--accent); }
.cf-chip:not(.active):not(.ghost) { background: var(--surface2); color: var(--muted); border-color: var(--border); }
.cf-chip:not(.active):not(.ghost):hover { color: var(--text); border-color: var(--accent); }

/* Nodi gerarchia (3 livelli): vendor -> listino -> servizio */
.cf-node {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-sm);
  color: var(--text);
}
.cf-node .cf-caret { color: var(--muted); font-size: 0.78em; width: 0.9em; text-align: center; }
.cf-node .cf-nname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-node .cf-ncount {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--surface2);
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  min-width: 2.2rem;
  text-align: center;
}

.cf-node.vendor {
  margin-top: 0.35rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-weight: 700;
}
.cf-node.vendor:first-child { margin-top: 0; }
.cf-node.vendor:hover { border-color: var(--accent); }
.cf-node.vendor .cf-nname { font-weight: 700; color: var(--text); letter-spacing: 0.02em; }

.cf-node.listino {
  margin-left: 0.9rem;
  background: transparent;
  border-left: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding-left: 0.5rem;
}
.cf-node.listino:hover { background: var(--surface2); }
.cf-node.listino .cf-nname { font-weight: 600; color: var(--text); font-size: var(--fs-sm); }

.cf-node.servizio {
  margin-left: 2rem;
  padding: 0.25rem 0.5rem 0.25rem 0.45rem;
  color: var(--muted);
  font-size: var(--fs-xs);
  gap: 0.4rem;
  cursor: pointer;
}
.cf-node.servizio:hover { background: var(--surface2); color: var(--text); }
.cf-node.servizio.on { color: var(--text); }
.cf-node.servizio input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; margin: 0; }
.cf-node.servizio .cf-stext {
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Toggle tri-state (on / some / off) per vendor e listino */
.cf-tog {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cf-tog.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.cf-tog.some {
  background: color-mix(in srgb, var(--accent) 30%, var(--surface));
  color: var(--accent);
  border-color: var(--accent);
}
.cf-tog.off { background: var(--surface); color: var(--muted); }
.cf-tog:hover { border-color: var(--accent); }

/* ── Chip group multi-file (sostituisce <select id="f-file">) ─────── */
.filter-group-files { min-width: 280px; max-width: 60vw; }
#rate-files-host .rf-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.35rem 0.4rem;
  min-height: 2.4rem;
}
.rf-empty {
  color: var(--muted);
  font-style: italic;
  font-size: var(--fs-xs);
  padding: 0 0.2rem;
}
.rf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.45rem 0.25rem 0.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-xs);
  color: var(--text);
  max-width: 280px;
}
.rf-chip.own { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.rf-chip.cli { border-color: color-mix(in srgb, var(--accent2) 60%, var(--border)); }
.rf-chip-badge {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rf-chip.own .rf-chip-badge { background: var(--accent); color: #fff; }
.rf-chip.cli .rf-chip-badge { background: var(--accent2); color: #fff; }
.rf-chip-name {
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.rf-chip-x {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 0.15rem;
  line-height: 1;
}
.rf-chip-x:hover { color: var(--danger); }

.rf-add {
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--accent);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}
.rf-add:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Dialog "+ Aggiungi listino" */
.modal-dialog.rf-dlg { width: min(640px, 92vw); }
.rf-dlg-body { padding: var(--pad-md) var(--pad-lg); overflow-y: auto; max-height: 70vh; }
.rf-dlg-body h4 { margin: var(--pad-md) 0 0.4rem; color: var(--accent); font-size: var(--fs-md); }
.rf-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.rf-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.rf-row.already { opacity: 0.55; }
.rf-row-info { flex: 1; min-width: 0; }
.rf-row-name { font-weight: 600; color: var(--text); font-family: var(--mono); font-size: var(--fs-sm); }
.rf-row-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 0.15rem; }
.rf-row-flag {
  font-size: var(--fs-xs);
  color: var(--accent2);
  font-style: italic;
  padding: 0 0.4rem;
}
.rf-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: var(--pad-md);
  padding-top: var(--pad-md);
  border-top: 1px solid var(--border);
}

/* ── Stats row ──────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--pad-md);
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--pad-md) var(--pad-lg);
}
.stat-label {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
}
.stat-value {
  font-family: var(--mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
}
.stat-sub {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 0.2rem;
}

/* ── Banners (compat, age) ──────────────────────────────── */
.compat, .age {
  display: flex;
  align-items: center;
  gap: var(--pad-md);
  padding: var(--pad-md) var(--pad-lg);
  border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.compat {
  background: color-mix(in srgb, var(--accent3) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent3) 35%, transparent);
  color: var(--text);
}
.compat-body { flex: 1; min-width: 200px; }
.compat-actions { display: flex; gap: 0.5rem; }

.age {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

/* ── Empty state ────────────────────────────────────────── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pad-lg);
  padding: 4rem var(--pad-lg);
  text-align: center;
}
.empty h1 {
  font-size: 1.8rem;
  background: linear-gradient(135deg, var(--text) 40%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.empty p { color: var(--muted); max-width: 480px; }

/* ── Table rates ────────────────────────────────────────── */
.view {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-md) var(--pad-lg);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.record-count {
  font-size: var(--fs-xs);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  color: var(--accent);
}

.table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  /* height impostata da JS (renderRatesTable) in base allo spazio disponibile */
}
table.rates {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
table.rates thead th {
  background: var(--surface2);
  padding: 0.4rem 0.4rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.15;
  color: var(--muted);
  /* I nomi corriere vanno a capo su pi\u00F9 righe per stare in poco spazio */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  vertical-align: bottom;
  max-width: 110px;
  min-width: 70px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}
table.rates thead th.weight-col {
  text-align: center;
  color: var(--text);
  white-space: nowrap;
  max-width: none;
  min-width: 60px;
}
/* Spezzo il nome corriere su " - " mostrando vettore / servizio / categoria */
.car-head { display: flex; flex-direction: column; gap: 1px; }
.car-head .car-vendor { font-weight: 700; color: var(--text); font-size: 0.74rem; }
.car-head .car-svc { color: var(--muted); font-size: 0.66rem; opacity: 0.85; }
.car-head .car-cat { color: var(--accent); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; }
table.rates tbody tr:hover { background: rgba(255,255,255,0.02); }
table.rates tbody td {
  padding: 0.3rem 0.45rem;
  text-align: center;
  white-space: nowrap;
  font-size: 0.78rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
table.rates tbody td.weight-col {
  text-align: center;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--muted);
  background: var(--surface2);
  border-right: 1px solid var(--border);
  position: sticky;
  left: 0;
  z-index: 3;
}
.price-na { color: var(--border); font-style: italic; }

/* ── Heatmap controls (sopra la tabella) ──────────────── */
.hm-controls {
  display: flex;
  align-items: center;
  gap: var(--pad-md);
  padding: var(--pad-sm) var(--pad-lg);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.hm-mode { display: flex; align-items: center; gap: 0.5rem; }
.hm-mode label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}
.hm-seg {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.hm-seg-btn {
  background: transparent;
  border: none;
  padding: 0.25rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-right: 1px solid var(--border);
}
.hm-seg-btn:last-child { border-right: none; }
.hm-seg-btn:hover { color: var(--text); }
.hm-seg-btn.active { background: var(--accent); color: #fff; }
.hm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.hm-toggle input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
.hm-spacer { flex: 1; }

/* ── Heatmap cells ────────────────────────────────────── */
table.rates tbody td.hm-cell {
  position: relative;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s;
}
table.rates tbody td.hm-cell .hm-price {
  font-family: var(--mono);
  font-weight: 500;
}
table.rates tbody td.hm-cell.is-best .hm-price {
  font-weight: 700;
  color: var(--text);
}
.hm-star {
  display: inline-block;
  margin-right: 0.3rem;
  color: var(--accent3);
  font-size: 0.85em;
  text-shadow: 0 0 6px color-mix(in srgb, var(--accent3) 60%, transparent);
}
.hm-delta {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--mono);
  font-size: 0.72em;
  font-weight: 600;
  opacity: 0.75;
}
.hm-delta.pos { color: var(--danger); }
.hm-delta.neg { color: var(--accent2); }

/* ── Riga editor μ nell'header ────────────────────────── */
/* bg OPACO + top calcolato a runtime da table.js in --mu-top. Il -1px su top
   forza la mu-row a sovrapporsi di 1px sulla prima riga: elimina il gap
   sub-pixel che il browser a volte lascia fra due sticky rows. Altrimenti
   il body si vede scorrere dietro la riga μ.
   3.11.0: bordo superiore esplicito + background-clip per compensare
   sub-pixel rounding a certi livelli di zoom. */
table.rates thead tr.mu-row th {
  background: var(--surface2);
  background-clip: padding-box;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--accent) 35%, transparent);
  padding: 0.3rem 0.4rem;
  position: sticky;
  top: calc(var(--mu-top, 52px) - 1px);
  z-index: 4;
}
table.rates thead tr.mu-row th.weight-col.mu-label {
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
}
/* Il TH resta table-cell (NON flex, romperebbe il modello tabellare).
   Il flex va sul div .mu-cell-inner contenuto dentro. */
.mu-cell {
  padding: 0.3rem 0.35rem;
  /* Indica all'utente che la cella è trascinabile verticalmente per ±μ */
  cursor: ns-resize;
  user-select: none;
}
.mu-cell.mu-dragging {
  background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
.mu-cell-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}
.markup-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  padding: 0.15rem 0.35rem;
  width: 54px;
  text-align: right;
  outline: none;
  /* L'input NON deve ereditare il cursore ns-resize della cella */
  cursor: text;
}
.markup-input:focus { border-color: var(--accent); }
.markup-input::-webkit-outer-spin-button,
.markup-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.markup-input { -moz-appearance: textfield; }

/* Stepper verticale ▲/▼ — due micro-bottoni impilati alla destra dell'input */
.mu-steps {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mu-step-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 8px;
  line-height: 1;
  padding: 0;
  width: 14px;
  height: 11px;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.mu-step-btn:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.mu-step-btn:active { transform: translateY(1px); }

/* ---- Settings > Fasce > Markup step picker ---- */
.mu-step-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.mu-step-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.mu-step-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
}
.mu-step-chip:hover { color: var(--text); border-color: var(--accent); }
.mu-step-chip.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.mu-step-custom {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
}
.mu-step-custom input[type="number"] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.25rem 0.5rem;
  width: 90px;
  font-family: var(--mono);
}
.mu-step-current {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  margin-left: auto;
}
.mu-suggest {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--accent);
  border-radius: var(--radius);
  width: 22px;
  height: 22px;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.mu-suggest:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--accent); }

/* ── Modal suggeritore μ ──────────────────────────────── */
.modal-dialog.mu-sugg { width: min(640px, 92vw); }

/* ── Modal download cliente on-demand ───────────────────── */
.modal-dialog.coc-dlg { width: min(520px, 92vw); }
.modal-dialog.coc-dlg-wide { width: min(780px, 94vw); }
.coc-warn {
  background: color-mix(in srgb, var(--warning, #c08a40) 15%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning, #c08a40) 50%, transparent);
  color: var(--text);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  font-size: var(--fs-sm);
  margin-bottom: 0.8rem;
}
.coc-key-row { display: flex; gap: 0.3rem; align-items: stretch; }
.coc-key-row input { flex: 1; }
.coc-status {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding: 0.5rem 0;
  min-height: 1.4em;
}
.coc-status.busy { color: var(--accent); }
.coc-status.err { color: var(--danger); }
.clients-actions { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }

/* Selettori scenari/pesi nella modal cliente */
.coc-pick-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.coc-pick-head > label { margin: 0; font-weight: 600; }
.coc-pick-head .coc-pick-tools { margin-left: auto; display: flex; gap: 0.25rem; }
.coc-count-badge {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 0.5rem;
  color: var(--accent);
}
.coc-pickbox {
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.coc-pick-loading {
  color: var(--muted);
  font-style: italic;
  font-size: var(--fs-sm);
  padding: 0.4rem;
}
.coc-pick-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  font-size: var(--fs-sm);
}
.coc-pick-row .coc-pick-name { flex: 1; }
.coc-pick-row:hover { background: var(--surface2); }
.coc-pick-row input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
.coc-pick-name { flex: 1; color: var(--text); }
.coc-pick-meta { color: var(--muted); font-size: var(--fs-xs); font-family: var(--mono); }
.coc-weights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 4px;
}
.coc-weight-chip {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.45rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 1px);
  cursor: pointer;
  font-size: var(--fs-xs);
  font-family: var(--mono);
}
.coc-weight-chip:hover { border-color: var(--accent); }
.coc-weight-chip input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
.coc-stats {
  font-size: var(--fs-sm);
  color: var(--muted);
  background: var(--surface2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
  margin-top: 0.4rem;
}
.coc-stats strong { color: var(--accent); font-family: var(--mono); }

/* ── Widget floating fetch cliente ──────────────────────── */
.cf-widgets-host {
  position: fixed;
  bottom: 12px;
  right: 12px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: 90;
  pointer-events: none;
}
.cf-w {
  pointer-events: auto;
  width: min(520px, 92vw);
  max-height: min(70vh, 560px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: var(--fs-sm);
}
.cf-w.minimized { max-height: 40px; }
.cf-w.minimized .cf-w-body { display: none; }
.cf-w.compact { width: min(360px, 80vw); max-height: 280px; }
.cf-w.finished.finished-success { border-color: color-mix(in srgb, var(--accent2) 60%, var(--border)); }
.cf-w.finished.finished-error { border-color: color-mix(in srgb, var(--danger) 60%, var(--border)); }
.cf-w.finished.finished-cancelled { border-color: color-mix(in srgb, var(--accent3) 60%, var(--border)); }

.cf-w-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  cursor: move;
  user-select: none;
  flex-shrink: 0;
}
.cf-w-title {
  flex: 1;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-w-title .cf-w-sub {
  color: var(--muted);
  font-weight: 400;
  font-size: var(--fs-xs);
}
.cf-w-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--mono);
}
.cf-w-btn:hover:not(:disabled) { background: var(--surface); color: var(--text); border-color: var(--border); }
.cf-w-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.cf-w-btn.tiny { width: auto; padding: 0 0.4rem; font-size: var(--fs-xs); }

.cf-w-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}
.cf-w-progress {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cf-w-prog-line {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-w-pct {
  color: var(--accent);
  font-weight: 700;
  font-family: var(--mono);
}
.cf-w-bar {
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
}
.cf-w-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 0.3s;
}
.cf-w-bar-fill.done { background: var(--accent2); }
.cf-w-bar-fill.err { background: var(--danger); }
.cf-w-bar-fill.cancel { background: var(--accent3); }

/* 3.71.0 — barra indeterminata: la lettura di un report non sa quante righe
   ci sono finche' non le ha lette, e una percentuale inventata sarebbe
   peggio di nessuna percentuale. La striscia che scorre dice "sto
   lavorando" senza promettere un traguardo. */
.cf-w-bar-fill.indet {
  width: 35% !important;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: cf-w-indet 1.2s ease-in-out infinite;
  transition: none;
}
@keyframes cf-w-indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(285%); }
}
@media (prefers-reduced-motion: reduce) {
  .cf-w-bar-fill.indet { animation: none; }
}

.cf-w-log-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--muted);
  flex-shrink: 0;
}
.cf-w-log-head > span:first-child { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.cf-w-autoscroll { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.cf-w-autoscroll input { accent-color: var(--accent); }

.cf-w-log {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  padding: 0.3rem 0.5rem;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
  min-height: 0;
}
.cf-w-log-row {
  display: grid;
  grid-template-columns: 60px 48px 1fr;
  gap: 0.4rem;
  padding: 1px 0;
  /* IMPORTANTE: no truncation. Mostra riga intera, wrap se serve. */
  word-break: break-word;
  white-space: pre-wrap;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent);
}
.cf-w-log-time { color: var(--muted); font-size: 10px; white-space: nowrap; }
.cf-w-log-lvl {
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cf-w-log-row.level-info .cf-w-log-lvl { color: var(--accent); }
.cf-w-log-row.level-warning .cf-w-log-lvl,
.cf-w-log-row.level-warn .cf-w-log-lvl { color: var(--accent3); }
.cf-w-log-row.level-error .cf-w-log-lvl,
.cf-w-log-row.level-critical .cf-w-log-lvl { color: var(--danger); }
.cf-w-log-msg { color: var(--text); }

.cf-w-actions {
  padding: 0.4rem 0.7rem;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}
.cf-w-cancel { font-size: var(--fs-xs); }

/* 3.9.0: regole della Toolbar confronto (.cmp-*, .compare-*) eliminate. La
   sezione "Confronto" e' stata assorbita da Tariffe (multi-JSON). */

/* ── Modal export multi-scenario ───────────────────────── */
.modal-dialog.exp-dlg { width: min(560px, 92vw); }
.exp-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
}
.exp-counter {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-family: var(--mono);
}
.exp-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem;
}
.exp-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text);
}
.exp-row:hover { background: var(--surface2); }
.exp-row input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
/* 3.13.6: header sezione Italia / Estero nel modal Esporta Excel. */
.exp-group-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.55rem;
  margin-top: 0.35rem;
  background: var(--surface2);
  border-radius: 4px;
  font-size: var(--fs-xs, 0.7rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}
.exp-group-head .exp-group-meta { color: var(--muted); font-weight: 500; }
.exp-mu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.2rem 0.2rem 0.2rem;
  font-size: var(--fs-sm);
  color: var(--text);
  cursor: pointer;
}
.exp-mu input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
/* 3.60.0 — export unificato: formato, ricerca, intervallo pesi */
.exp-fmt {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0 0.6rem 0;
  font-size: var(--fs-sm);
  color: var(--text);
}
.exp-fmt-label {
  font-size: var(--fs-xs, 0.7rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.exp-fmt-opt { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.exp-fmt-opt input[type="radio"] { accent-color: var(--accent); cursor: pointer; }
.exp-search {
  width: 100%;
  padding: 0.45rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--fs-sm);
}
.exp-search:focus { outline: none; border-color: var(--accent); }
.exp-empty {
  padding: 0.8rem 0.5rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}
.exp-hint {
  margin: 0.35rem 0 0 0;
  font-size: var(--fs-xs, 0.7rem);
  color: var(--muted);
}
/* Export: scelta dell'intestazione delle colonne listino (nome completo o
   voci scomposte). L'etichetta prende una riga sua: il dialog e' stretto e
   accanto ai due radio non ci starebbe. */
.exp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 0.7rem 0 0.4rem 0;
  font-size: var(--fs-sm);
  color: var(--text);
}
.exp-head .exp-fmt-label { flex: 0 0 100%; }
.exp-head-parts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 0 0 0.2rem 1.4rem;
  font-size: var(--fs-sm);
  color: var(--text);
}
.exp-head-parts.is-off { opacity: 0.45; }
.exp-head-parts input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
.exp-weights {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0 0.2rem 0;
  font-size: var(--fs-sm);
  color: var(--text);
}
.exp-weights label { display: flex; align-items: center; gap: 0.35rem; }
select.exp-w {
  padding: 0.3rem 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--fs-sm);
}
.mu-out {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--pad-md) var(--pad-lg);
  margin-top: var(--pad-md);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
}
.mu-out-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}
.mu-out-val {
  font-family: var(--mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
}
.mu-out-val.pos { color: var(--accent2); }
.mu-out-val.neg { color: var(--danger); }
.mu-out-formula {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
}

/* ── Compat fix per .price-best legacy (usato altrove?) ── */
.price-best { color: var(--accent2); font-weight: 700; }

/* ── 3.11.0: Coverage banner + modal ───────────────────── */
.coverage-banner-slot { margin: 0.25rem 0 0.75rem 0; }
.coverage-banner-slot.hidden { display: none; }
.coverage-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--warning, #f0ad4e) 55%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--warning, #f0ad4e) 10%, var(--surface2));
  font-size: var(--fs-sm);
}
.coverage-banner .coverage-icon { font-size: 1.1em; }
.coverage-banner .coverage-msg { flex: 1; color: var(--text); }
.coverage-banner .coverage-actions { display: flex; gap: 0.35rem; }

.coverage-summary {
  padding: 0.5rem 0.75rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}
.coverage-summary .coverage-kind { color: var(--muted); font-family: var(--mono); font-size: var(--fs-xs); }

.coverage-wrap {
  max-height: 58vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}
.coverage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.coverage-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 0.5rem;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
}
.coverage-table thead th:first-child { text-align: left; }
.coverage-table tbody td {
  border-bottom: 1px solid var(--border);
  padding: 0.35rem 0.5rem;
  text-align: center;
}
.coverage-table .cov-scen { text-align: left; font-weight: 500; }
.coverage-table .cov-count { color: var(--muted); font-family: var(--mono); }
.coverage-table .cov-cell.ok { color: var(--accent2, #4caf50); font-weight: 700; }
.coverage-table .cov-cell.miss {
  background: color-mix(in srgb, var(--danger, #e74c3c) 12%, transparent);
}
/* 3.13.6: header sezione Italia / Estero nella tabella coverage. */
.coverage-table .cov-group-row .cov-group-head {
  text-align: left;
  font-size: var(--fs-xs, 0.7rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
  background: var(--surface2);
  padding: 0.45rem 0.6rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: sticky;
  left: 0;
}

.coverage-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.25rem 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* ── 3.39.0: Modal mappatura colonne import XLSX (analysis) ─────────── */
.modal-dialog.an-map-dlg { width: min(760px, 94vw); }
.an-map-preview-wrap { max-height: 220px; }
.an-map-preview-tbl th, .an-map-preview-tbl td {
  white-space: nowrap;
  font-family: var(--mono);
  font-size: var(--fs-xs);
}
.an-map-preview-tbl tr.an-map-header-row td {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-weight: 600;
}
.an-map-fields {
  margin-top: var(--pad-md);
}
.an-map-fields .fld { flex: 1 1 200px; }
.an-map-error { color: var(--danger); }

/* 3.9.0: .compare-* e .clients-head/.clients-list eliminati (view rimosse). */
.client-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-sm) var(--pad-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  background: var(--surface2);
}
.client-row .cr-name { font-weight: 600; }
.client-row .cr-meta { color: var(--muted); font-size: var(--fs-xs); }

/* ── Modal / Settings ──────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.modal-dialog {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: min(920px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-md) var(--pad-lg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-head h2 { font-size: var(--fs-lg); }
.modal-close {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  width: 32px; height: 32px;
  font-size: 1.2rem;
  line-height: 1;
}
.modal-close:hover { color: var(--danger); border-color: var(--danger); }

.settings-tabs {
  display: flex;
  gap: 0;
  padding: 0 var(--pad-lg);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
  flex-grow: 0;
}
.st-tab {
  background: transparent;
  border: none;
  padding: var(--pad-md) var(--pad-md);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.st-tab:hover { color: var(--text); }
.st-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.settings-body {
  padding: var(--pad-lg);
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
}

/* campi settings */
.fld {
  margin-bottom: var(--pad-md);
}
.fld label {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.3rem;
  font-weight: 600;
}
.fld input, .fld select, .fld textarea {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  color: var(--text);
  outline: none;
  width: 100%;
  max-width: 480px;
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--accent);
}
.fld-help {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 0.25rem;
}
.fld-row {
  display: flex;
  gap: var(--pad-md);
  flex-wrap: wrap;
}
.fld-row .fld { flex: 1; min-width: 160px; }

/* ── Toast ──────────────────────────────────────────────── */
.toasts {
  position: fixed;
  bottom: var(--pad-lg);
  right: var(--pad-lg);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 200;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--pad-md) var(--pad-lg);
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.toast.success { border-left-color: var(--accent2); }
.toast.warn { border-left-color: var(--accent3); }
.toast.error { border-left-color: var(--danger); }
.toast .t-title { font-weight: 700; font-size: var(--fs-sm); }
.toast .t-body { font-size: var(--fs-xs); color: var(--muted); }
.toast .t-actions { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.toast .t-actions button {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  font-size: var(--fs-xs);
}

/* ── Fetch overlay ─────────────────────────────────────── */
.fetch-overlay {
  position: fixed;
  bottom: var(--pad-lg);
  left: var(--pad-lg);
  z-index: 150;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--pad-md) var(--pad-lg);
  min-width: 320px;
  max-width: 400px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.fetch-card h3 { font-size: var(--fs-md); margin-bottom: 0.4rem; }
.fetch-bar-wrap {
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
  margin: var(--pad-sm) 0;
}
.fetch-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  width: 0%;
  transition: width 0.3s;
}
.fetch-detail {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-family: var(--mono);
}

/* ── Theme editor preview ──────────────────────────────── */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--pad-sm);
}
.theme-swatch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
}
.swatch-dot {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
}
.swatch-label {
  font-size: var(--fs-xs);
  font-family: var(--mono);
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--pad-sm);
  margin-bottom: var(--pad-lg);
}
.preset-card {
  padding: var(--pad-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  cursor: pointer;
  transition: all 0.15s;
}
.preset-card:hover { border-color: var(--accent); }
.preset-card.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.preset-card .pc-name { font-weight: 700; }
.preset-card .pc-mode { font-size: var(--fs-xs); color: var(--muted); }

/* responsive */
@media (max-width: 768px) {
  .topbar { flex-wrap: wrap; }
  .tb-tabs { order: 3; width: 100%; }
  .tb-tab { flex: 1; }
}

/* ============================================================
   SETTINGS / MAPPER / MISC (extensioni usate dai moduli JS)
   ============================================================ */

.tab-hint {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--pad-md);
}
.settings-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--pad-md);
  flex-wrap: wrap;
}
.settings-body h3 { font-size: var(--fs-lg); margin-bottom: 0.4rem; }
.settings-body h4 { font-size: var(--fs-md); margin: var(--pad-md) 0 0.4rem; color: var(--accent); }

.form-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: var(--pad-md);
  margin-bottom: 0.6rem;
}
.form-row label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}
.form-row input, .form-row select, .form-row textarea {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.45rem 0.7rem;
  color: var(--text);
  outline: none;
  max-width: 480px;
}
.form-row input:focus, .form-row select:focus { border-color: var(--accent); }

.api-status, .sched-status, .status-idle, .status-active {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--pad-sm) var(--pad-md);
  font-size: var(--fs-sm);
  margin: var(--pad-sm) 0;
}
.status-ok { color: var(--accent2); font-weight: 600; }
.status-warn { color: var(--accent3); font-weight: 600; }
.status-active { border-color: var(--accent); color: var(--accent); }

.btn-ghost.tiny { padding: 0.15rem 0.5rem; font-size: var(--fs-xs); }
.btn-ghost.danger:hover { border-color: var(--danger); color: var(--danger); }

.error-box {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: var(--pad-sm) var(--pad-md);
  color: var(--danger);
  font-size: var(--fs-sm);
}

/* ── Bande (tab fasce) ───────────────────────────────── */
.bands-box { margin: var(--pad-sm) 0; }
.band-head, .band-row {
  display: grid;
  grid-template-columns: 100px 100px 100px 1fr 40px;
  gap: 0.5rem;
  align-items: center;
  padding: 0.3rem 0;
}
.band-head {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.band-row input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.3rem 0.5rem;
  color: var(--text);
}
.band-preview { color: var(--muted); font-family: var(--mono); font-size: var(--fs-xs); }
.band-total {
  margin-top: 0.5rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.parcel-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem;
}

/* ── Scheduler ───────────────────────────────────────── */
.sched-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  margin-bottom: var(--pad-md);
}
.small-tbl {
  width: 100%;
  font-size: var(--fs-xs);
  font-family: var(--mono);
  margin-top: var(--pad-sm);
}
.small-tbl th, .small-tbl td {
  padding: 0.3rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.small-tbl th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: var(--fs-xs);
}

/* ── Addresses tab ───────────────────────────────────── */
.addr-table-wrap { overflow-x: auto; margin-bottom: var(--pad-md); }
.addr-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}
.addr-tbl th, .addr-tbl td {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.addr-tbl th {
  background: var(--surface2);
  color: var(--muted);
  text-transform: uppercase;
  font-size: var(--fs-xs);
}
.addr-tbl input, .addr-tbl select {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  padding: 0.25rem 0.3rem;
  width: 100%;
  font-size: var(--fs-xs);
}
.addr-tbl input:focus, .addr-tbl select:focus {
  border-color: var(--accent);
  background: var(--surface);
}

/* ── Clients settings ───────────────────────────────── */
.clients-settings-list { display: flex; flex-direction: column; gap: 0.4rem; }
.client-name { font-weight: 700; }
.client-meta { color: var(--muted); font-size: var(--fs-xs); }
.empty-sub { color: var(--muted); font-style: italic; padding: var(--pad-md); text-align: center; }

/* ── Theme editor ───────────────────────────────────── */
.palette-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.4rem; margin-bottom: var(--pad-md); }
.pal-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.5rem; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); }
.pal-label { flex: 1; font-size: var(--fs-sm); }
.pal-row input[type="color"] { width: 36px; height: 28px; border: 1px solid var(--border); border-radius: 4px; background: transparent; cursor: pointer; padding: 0; }
.pal-row input[type="text"] { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.25rem 0.5rem; color: var(--text); font-family: var(--mono); font-size: var(--fs-xs); }

.layout-toggles { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: var(--pad-md); }
.chk { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); cursor: pointer; }

/* ── About ──────────────────────────────────────────── */
.about-tbl { width: 100%; font-size: var(--fs-sm); margin-bottom: var(--pad-md); }
.about-tbl th, .about-tbl td { padding: 0.4rem 0.6rem; text-align: left; border-bottom: 1px solid var(--border); }
.about-tbl th { color: var(--muted); text-transform: uppercase; font-size: var(--fs-xs); width: 180px; }

/* ── Mapper (listini cliente) ────────────────────────── */
.mapper-wrap {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--pad-md) var(--pad-lg);
  margin: var(--pad-md);
}
.mapper-wrap h3 { font-size: var(--fs-lg); margin-bottom: 0.4rem; color: var(--accent); }
.mapper-wrap h4 { font-size: var(--fs-md); margin: var(--pad-md) 0 0.4rem; color: var(--muted); }
.mapper-hint { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--pad-md); }
.mapper-modes { display: flex; gap: var(--pad-md); flex-wrap: wrap; }
.mapper-mode { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); }
.mapper-warn {
  background: color-mix(in srgb, var(--accent3) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent3) 30%, transparent);
  border-radius: var(--radius);
  padding: var(--pad-sm) var(--pad-md);
  font-size: var(--fs-sm);
  color: var(--accent3);
  margin: var(--pad-sm) 0;
}
.mapper-actions { display: flex; gap: 0.6rem; margin-top: var(--pad-md); }
.mapper-stat { font-family: var(--mono); color: var(--accent); font-size: var(--fs-sm); }

table.rates.preview {
  font-size: var(--fs-xs);
  margin: 0.5rem 0;
  max-height: none;
}
table.rates.preview thead th { text-align: left; }
table.rates.preview tbody td { text-align: left; }

/* ── Toast (icone) ──────────────────────────────────── */
.toast { flex-direction: row; align-items: center; gap: 0.6rem; transform: translateX(120%); transition: transform 0.3s ease-out; }
.toast.t-in { transform: translateX(0); }
.toast.t-out { transform: translateX(120%); opacity: 0; }
.toast-icon { font-size: 1.1rem; font-weight: 700; }
.toast.success .toast-icon { color: var(--accent2); }
.toast.error .toast-icon { color: var(--danger); }
.toast.warn .toast-icon { color: var(--accent3); }
.toast.info .toast-icon { color: var(--accent); }
.toast-msg { font-size: var(--fs-sm); color: var(--text); }


/* ═══════════════════════════════════════════════════════════════════════
   3.12.0 — Multi-app shell (App picker home + topbar minimale)
   ═══════════════════════════════════════════════════════════════════════ */

.app-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 80px);
  padding: 4rem 2rem;
}
.app-picker.hidden { display: none; }
.app-picker-inner { width: 100%; max-width: 720px; }
.app-picker-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.app-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 3rem 2rem;
  cursor: pointer;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
  font-family: var(--sans);
  transition: all .18s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}
.app-tile:hover {
  border-color: var(--accent);
  background: var(--surface2);
  transform: translateY(-2px);
}
.app-tile-name { font-size: 1.4rem; letter-spacing: .02em; }

/* 3.60.0 (T1): i tre tasti (⌂ / ↻ / ⚙) non stanno piu' in topbar — Home e
   Impostazioni sono nel menu laterale, "Ricarica" e' nella barra filtri di
   Tariffe, dove serve. Resta l'occultamento dei chip file/eta' sulla Home. */
.topbar.topbar-minimal .tb-meta { visibility: hidden; }

/* ═══════════════════════════════════════════════════════════════════════
   3.12.0 — Simulator wizard (Analisi)
   ═══════════════════════════════════════════════════════════════════════ */

#view-simulator { padding: 1.5rem 2rem; }
.sim-wiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.sim-wiz-title { font-size: 1.1rem; font-weight: 600; color: var(--text); }
.sim-wiz-reset {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: .35rem .75rem;
  border-radius: .4rem;
  cursor: pointer;
  font-size: .75rem;
}

.sim-stepper {
  display: flex;
  gap: 4px;
  background: var(--surface2);
  padding: 8px;
  border-radius: .5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.sim-step-btn {
  flex: 1;
  min-width: 100px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .4rem;
  padding: .5rem .75rem;
  font-size: .8rem;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  font-family: var(--sans);
  transition: all .12s;
}
.sim-step-btn .sim-step-num {
  display: block;
  font-size: .65rem;
  opacity: .7;
  margin-bottom: 2px;
}
.sim-step-btn:hover { border-color: var(--accent); color: var(--text); }
.sim-step-btn.active {
  background: rgba(99, 102, 241, .12);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}
.sim-step-btn.done { color: var(--accent2); }

.sim-wiz-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
  min-height: 320px;
}
.sim-wiz-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

.sim-step-title { font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; color: var(--text); }
.sim-hint { color: var(--muted); font-size: .8rem; margin-bottom: 1rem; }
.sim-hint-mini { font-size: .72rem; }

.sim-form-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin: 1rem 0; }
.sim-field { display: flex; flex-direction: column; gap: .35rem; }
.sim-label {
  font-size: .68rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.sim-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: .4rem;
  padding: .45rem .7rem;
  font-family: var(--mono);
  font-size: .85rem;
  outline: none;
}
.sim-input:focus { border-color: var(--accent); }

.sim-auto-tag {
  background: rgba(16, 185, 129, .15);
  color: var(--accent2);
  font-size: .58rem;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}

.sim-info-box {
  background: var(--surface2);
  border-left: 3px solid var(--accent);
  padding: .6rem .9rem;
  border-radius: 0 .4rem .4rem 0;
  margin: .75rem 0;
  font-size: .8rem;
  color: var(--text);
  font-family: var(--mono);
}

.sim-import { margin: .75rem 0; }
.sim-drop {
  border: 2px dashed var(--border);
  border-radius: .6rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--surface2);
  transition: all .15s;
  cursor: pointer;
}
.sim-drop.drag { border-color: var(--accent); background: rgba(99, 102, 241, .05); }
.sim-drop-icon { font-size: 1.6rem; opacity: .6; margin-bottom: 4px; }
.sim-drop-title { font-weight: 600; color: var(--text); font-size: .88rem; margin-bottom: 4px; }
.sim-drop-hint { font-size: .72rem; color: var(--muted); margin-bottom: .5rem; }
.sim-drop-btn {
  display: inline-block;
  padding: .35rem .8rem;
  background: var(--accent);
  color: white;
  border-radius: .35rem;
  font-size: .8rem;
  cursor: pointer;
  font-family: var(--sans);
  font-weight: 500;
}

.sim-banner {
  background: rgba(59, 130, 246, .08);
  border: 1px solid rgba(59, 130, 246, .25);
  color: var(--text);
  padding: .7rem 1rem;
  border-radius: .5rem;
  margin: .75rem 0;
  display: flex;
  gap: .75rem;
  align-items: center;
  font-size: .8rem;
}
.sim-banner-icon { font-size: 1.2rem; }
.sim-banner-title { font-weight: 600; }
.sim-banner-sub { font-size: .72rem; color: var(--muted); margin-top: 2px; }

.sim-band-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: .75rem 0; }
.sim-band-chip {
  padding: .5rem .85rem;
  border-radius: .5rem;
  border: 1.5px solid rgba(100, 116, 139, .3);
  background: transparent;
  color: rgba(100, 116, 139, .6);
  font-family: var(--mono);
  font-size: .8rem;
  cursor: pointer;
  transition: all .15s;
}
.sim-band-chip.on {
  background: rgba(99, 102, 241, .15);
  border-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

.sim-table { width: 100%; border-collapse: collapse; font-size: .8rem; margin: .5rem 0; }
.sim-table thead th {
  background: var(--surface2);
  padding: .4rem .7rem;
  text-align: left;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--border);
}
.sim-table tbody td {
  padding: .35rem .7rem;
  border-bottom: 1px solid rgba(37, 48, 80, .3);
}
.sim-table-mini { font-size: .75rem; max-width: 500px; }
.sim-table-mini thead th { padding: .3rem .5rem; font-size: .62rem; }
.sim-table-mini tbody td { padding: .25rem .5rem; }
.sim-table .mono, .mono { font-family: var(--mono); }

.sim-scen-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: .5rem;
  padding: .85rem 1rem;
  margin-bottom: .65rem;
}
.sim-scen-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  font-family: var(--mono);
  margin-bottom: .4rem;
}

.sim-scen-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: .8rem;
  flex-wrap: wrap;
}
.sim-scen-tab {
  padding: .4rem .9rem;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: .8rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: var(--sans);
}
.sim-scen-tab.on { color: var(--text); border-color: var(--accent); font-weight: 600; }

.sim-toolbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .5rem 0;
  flex-wrap: wrap;
}
.sim-toolbar-info { font-size: .72rem; color: var(--muted); margin-left: auto; font-family: var(--mono); }

/* Heatmap weight x carrier */
.sim-heat-wrap { overflow-x: auto; max-width: 100%; margin-top: .5rem; }
.sim-heat-tbl {
  border-collapse: separate;
  border-spacing: 0;
  font-size: .72rem;
  min-width: 720px;
}
.sim-heat-tbl th, .sim-heat-tbl td {
  padding: 4px 6px;
  text-align: center;
  font-family: var(--mono);
  border-bottom: 1px solid var(--border);
}
.sim-heat-tbl thead th {
  background: var(--surface2);
  font-size: .62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.sim-heat-th-carrier {
  text-align: left !important;
  font-family: var(--sans) !important;
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 180px;
  background: var(--surface2);
}
.sim-heat-th-band { min-width: 75px; }
.sim-heat-td-carrier {
  text-align: left !important;
  font-family: var(--sans) !important;
  font-size: .76rem;
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
  min-width: 180px;
}
.sim-heat-row-client td { background: rgba(245, 158, 11, .08) !important; color: var(--accent3); font-weight: 600; }
.sim-heat-row-client .sim-heat-td-carrier { background: rgba(245, 158, 11, .15) !important; }
.sim-heat-td-cell { vertical-align: middle; }
.sim-heat-td-client { font-weight: 600; }
.sim-heat-stack { display: flex; flex-direction: column; gap: 1px; align-items: center; }
.sim-heat-base { color: var(--muted); font-size: .62rem; }
.sim-heat-mu {
  background: transparent;
  border: 1px solid transparent;
  color: var(--accent);
  font-weight: 600;
  font-size: .68rem;
  text-align: center;
  width: 50px;
  padding: 1px 4px;
  font-family: var(--mono);
  border-radius: 3px;
}
.sim-heat-mu:hover { border-color: var(--border); }
.sim-heat-mu:focus { border-color: var(--accent); outline: none; }
.sim-heat-mu.override { color: var(--accent3); text-decoration: underline; }
.sim-heat-final { font-weight: 700; font-size: .76rem; color: var(--text); }

.sim-heat-better { background: rgba(16, 185, 129, .25); }
.sim-heat-good { background: rgba(16, 185, 129, .10); }
.sim-heat-bad { background: rgba(239, 68, 68, .12); }
.sim-heat-worse { background: rgba(239, 68, 68, .25); }

.sim-heat-legend {
  display: flex;
  gap: 12px;
  margin-top: .75rem;
  font-size: .68rem;
  color: var(--muted);
  flex-wrap: wrap;
  font-family: var(--mono);
}
.sim-legend-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

/* Step 6 — Risultati */
.sim-metric-row {
  display: flex;
  gap: 8px;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.sim-metric {
  flex: 1;
  min-width: 140px;
  background: var(--surface2);
  border-radius: .5rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
}
.sim-metric-lbl {
  font-size: .65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .35rem;
  font-weight: 600;
}
.sim-metric-val {
  font-size: 1.3rem;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--text);
}
.sim-metric-val.pos { color: var(--accent2); }
.sim-metric-val.neg { color: var(--danger); }

.sim-result-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: .6rem;
  padding: 1rem 1.25rem;
  margin: .75rem 0;
}
.sim-result-card-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .65rem;
}

.sim-row-client td {
  background: rgba(245, 158, 11, .08);
  font-weight: 600;
  color: var(--accent3);
}
.sim-delta-pos { color: var(--accent2); font-weight: 600; }
.sim-delta-neg { color: #f87171; font-weight: 600; }

.sim-band-detail-title {
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  font-family: var(--mono);
  margin-bottom: .25rem;
  margin-top: .5rem;
}
.sim-band-totals {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: .35rem .6rem;
  background: rgba(37, 48, 80, .15);
  border-radius: .35rem;
  font-size: .72rem;
  font-family: var(--mono);
}
.sim-band-tot { color: var(--text); }
.sim-band-tot.pos { color: var(--accent2); font-weight: 600; }
.sim-band-tot.neg { color: #f87171; font-weight: 600; }
.sim-band-tot-client { color: var(--accent3); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════
   3.13.0 — Analisi (sostituisce simulator/wizard)
   ═══════════════════════════════════════════════════════════════════════ */

.an-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 0; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.an-tool-label { font-size: .78rem; color: var(--muted); font-weight: 500; }
.an-tabs-host { margin-bottom: 8px; }
.an-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: end; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.an-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: .8rem;
  color: var(--muted);
  transition: all .15s;
}
.an-tab:hover { color: var(--text); border-color: var(--accent); }
.an-tab.on {
  background: var(--surface);
  color: var(--text);
  border-color: var(--accent);
  font-weight: 600;
  margin-bottom: -1px;
}
.an-tab-meta { font-family: var(--mono); font-size: .68rem; opacity: .7; }
.an-tab-x { opacity: .4; cursor: pointer; padding: 0 4px; font-size: 1rem; }
.an-tab-x:hover { opacity: 1; color: var(--danger); }
.an-tab-add {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  font-style: italic;
}

.an-section { margin: 14px 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.an-import-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.an-import-title { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.an-import-actions { display: flex; gap: 8px; }
.an-drop {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  background: var(--surface2);
  margin: 10px 0;
  cursor: pointer;
  transition: all .15s;
}
.an-drop.drag { border-color: var(--accent); background: rgba(99,102,241,.05); }
.an-drop-icon { font-size: 1.4rem; opacity: .5; margin-bottom: 4px; }
.an-drop-title { font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.an-drop-hint { font-size: .72rem; color: var(--muted); margin-bottom: 8px; }
.an-drop-btn {
  display: inline-block; padding: 6px 12px; cursor: pointer;
  background: var(--accent); color: white; border-radius: 4px;
  font-size: .78rem; font-weight: 500;
}
.an-hint-row {
  display: flex; gap: 8px; align-items: center; margin-top: 10px;
  font-size: .76rem; color: var(--muted); flex-wrap: wrap;
}
.an-hint-help { font-size: .68rem; color: var(--muted); font-style: italic; }
.an-banner {
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.25);
  padding: 10px 12px; border-radius: 6px;
  margin-top: 10px;
  display: flex; gap: 10px; align-items: center;
  font-size: .78rem;
}
.an-banner-icon { font-size: 1.2rem; }
.an-banner-title { font-weight: 600; }
.an-banner-sub { font-size: .68rem; color: var(--muted); margin-top: 2px; }

/* Mapping panel */
.an-mapping-panel { margin-top: 4px; }
.an-mapping-title { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; margin-bottom: 8px; }
.an-mapping-help { text-transform: none; font-weight: 400; opacity: .7; }
.an-mapping-tbl { width: 100%; border-collapse: collapse; font-size: .78rem; }
.an-mapping-tbl th { background: var(--surface2); padding: 6px 8px; text-align: left; font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); }
.an-mapping-tbl td { padding: 5px 8px; border-bottom: 1px solid rgba(37,48,80,.3); }
.an-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .65rem; font-family: var(--mono); }
.pill-ok { background: rgba(16,185,129,.15); color: var(--accent2); }
.pill-warn { background: rgba(245,158,11,.15); color: var(--accent3); }
.pill-skip { background: rgba(100,116,139,.15); color: var(--muted); }
.pill-info { background: rgba(99,102,241,.15); color: var(--accent); }

/* Zone card */
.an-zone-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; margin: 12px 0; overflow: hidden; }
.an-zone-head { background: var(--surface); padding: 10px 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); }
.an-zone-name { font-weight: 600; font-size: .88rem; }
.an-zone-stats { font-size: .72rem; color: var(--muted); font-family: var(--mono); flex: 1; }
.an-zone-add-ct { margin-left: auto; }
.an-add-carrier-btn {
  padding: 5px 10px; font-size: .72rem;
  background: rgba(99,102,241,.1);
  border: 1px dashed var(--accent);
  color: var(--accent);
  border-radius: 6px;
  cursor: pointer;
}
.an-zone-sub {
  padding: 8px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between;
  font-size: .76rem;
  font-family: var(--mono);
  color: var(--muted);
}
.an-zone-sub .pos { color: var(--accent2); font-weight: 600; }
.an-zone-sub .neg { color: var(--danger); font-weight: 600; }

/* Pivot table */
.an-pivot-tbl { width: 100%; border-collapse: collapse; font-size: .76rem; }
.an-pivot-tbl thead th {
  background: var(--surface2);
  padding: 6px 8px;
  font-size: .62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 500;
  text-align: right;
  vertical-align: bottom;
  border-bottom: 1px solid var(--border);
}
.an-th-fascia { text-align: left !important; }
.an-th-num { text-align: right; }
.an-th-carrier { min-width: 100px; }
.an-th-cname { display: block; font-family: var(--mono); text-transform: none; letter-spacing: 0; font-size: .68rem; color: var(--text); margin-bottom: 4px; max-width: 140px; word-break: break-word; }
.an-th-mu-row { display: flex; align-items: center; gap: 4px; justify-content: center; }
.an-mu-label { font-size: .62rem; color: var(--muted); }
.an-mu-input {
  width: 70px;
  min-width: 70px;
  text-align: center;
  padding: 3px 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
}
.an-mu-input::-webkit-inner-spin-button,
.an-mu-input::-webkit-outer-spin-button { opacity: 1; }
.an-pivot-tbl td.an-cell-price,
.an-pivot-tbl td.an-cell-num { text-align: center !important; }
.an-cell-best-nomu { text-align: center !important; padding: 4px 6px !important; background: rgba(16,185,129,.06); }
.an-best-nomu-name { font-size: .58rem; color: var(--muted); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.an-best-nomu-price { font-size: .78rem; font-weight: 700; color: var(--accent2); font-family: var(--mono); }
.an-th-best-nomu { background: rgba(16,185,129,.10) !important; }
.an-mu-pct { font-size: .62rem; color: var(--muted); }
.an-th-x { cursor: pointer; opacity: .5; padding: 0 4px; }
.an-th-x:hover { opacity: 1; color: var(--danger); }
.an-pivot-tbl td { padding: 5px 8px; border-bottom: 1px solid rgba(37,48,80,.3); text-align: right; font-family: var(--mono); }
.an-cell-fascia { text-align: left !important; font-family: var(--sans) !important; }
.an-fascia-range { color: var(--muted); font-size: .62rem; opacity: .6; }
.an-cell-num { font-family: var(--mono); }
.an-cli-cost { color: var(--accent3); font-weight: 600; }
.an-cell-price { font-weight: 500; }
.an-cell-price.an-best { color: var(--accent2); font-weight: 700; position: relative; }
.an-cell-price.an-best::after { content: ' ●'; }
.an-row-empty td { color: var(--muted); opacity: .5; }
.an-preview-row td {
  background: rgba(99,102,241,.08);
  font-style: italic;
  opacity: 0.85;
}

/* Carrier dropdown menu */
.an-carrier-menu {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 6px;
  min-width: 280px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 9999;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
}
.an-carrier-search {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  border-radius: 4px;
  font-size: .78rem;
  outline: none;
  margin-bottom: 4px;
}
.an-carrier-search:focus { border-color: var(--accent); }
.an-carrier-list { display: flex; flex-direction: column; gap: 1px; }
.an-carrier-opt {
  padding: 6px 10px;
  font-size: .76rem;
  cursor: pointer;
  border-radius: 4px;
  font-family: var(--mono);
}
.an-carrier-opt:hover { background: rgba(99,102,241,.15); color: var(--text); }
.an-carrier-empty { padding: 8px; font-size: .72rem; color: var(--muted); text-align: center; font-style: italic; }

/* Totals bar (sticky bottom) */
.an-totals-host { margin-top: 16px; }
.an-totals {
  position: sticky;
  bottom: 0;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
}
.an-tot-lbl { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; font-weight: 600; }
.an-tot-val { font-size: 1.05rem; font-weight: 700; font-family: var(--mono); }
.an-tot-val.pos { color: var(--accent2); }
.an-tot-val.neg { color: var(--danger); }
.an-tot-scope { font-size: .62rem; color: var(--muted); margin-top: 2px; font-family: var(--mono); }

/* Saved analyses dialog */
.an-saved-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.an-saved-row:hover { background: var(--surface2); }
.an-saved-name { flex: 1; font-weight: 600; }
.an-saved-meta { font-size: .68rem; color: var(--muted); font-family: var(--mono); }

/* 3.13.1 - manual form */
.an-manual-form {
  display: flex; gap: 8px; align-items: end; flex-wrap: wrap;
  padding: 12px; background: var(--surface2); border-radius: 6px;
  margin-bottom: 12px;
}
.an-manual-form .sim-label { display: inline-block; margin-right: -4px; font-size: .65rem; }

/* 3.13.2 - preview column on hover dropdown */
.an-preview-cell, .an-preview-th {
  background: rgba(99,102,241,0.10) !important;
  font-style: italic;
  border-left: 2px dashed var(--accent);
}
.an-preview-th .an-th-cname { color: var(--accent); }

/* 3.13.2 — badge versione in topbar */
.app-version-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  font-family: var(--mono);
  font-size: .65rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  letter-spacing: .03em;
}

/* 3.13.4 - Calcolatore Fee */
#view-calculator { padding: 1.5rem 2rem; }
.calc-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
/* 3.85.0 — Calcolatore Fee al telefono: il padding di vista non scendeva
   mai sotto i 2rem e i 7 campi restavano affiancati a 360px. */
@media (max-width: 640px) {
  #view-calculator { padding: 1rem 0.9rem; }
  #view-simulator  { padding: 1rem 0.9rem; }
  .calc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) { .calc-wrap { grid-template-columns: 1fr; } }
.calc-h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.calc-field { display: flex; flex-direction: column; gap: 4px; }
.calc-label { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.calc-input-wrap { display: flex; align-items: center; gap: 6px; }
.calc-suffix { font-size: .78rem; color: var(--muted); font-family: var(--mono); min-width: 30px; }
.calc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
.calc-card-title { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; margin-bottom: 8px; }
.calc-tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.calc-tbl tr { border-bottom: 1px solid var(--border); }
.calc-tbl tr:last-child { border-bottom: none; }
.calc-tbl-lbl { padding: 6px 8px; color: var(--text); }
.calc-tbl-val { padding: 6px 8px; font-family: var(--mono); text-align: right; font-weight: 600; }
.calc-highlight { color: var(--accent); }
.calc-pos { color: var(--accent2); }
.calc-danger { color: var(--danger); }

/* 3.46.0 - Palletways: bancali ripetibili + email + conferma */
#view-palletways { padding: 1.5rem 2rem; }
.pw-bancali-head { margin-top: 12px; }
.pw-bancali-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pw-bancale-row {
  display: grid;
  grid-template-columns: 20px 1fr 1fr auto auto;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: .4rem;
  padding: 6px 8px;
}
.pw-bancale-idx { color: var(--muted); font-size: .75rem; font-family: var(--mono); text-align: center; }
.pw-bancale-input { width: 100%; }
.pw-bancale-sagoma {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; color: var(--muted); white-space: nowrap;
}
.pw-email-textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  white-space: pre-wrap;
}
@media (max-width: 700px) {
  .pw-bancale-row { grid-template-columns: 1fr 1fr; }
  .pw-bancale-idx { display: none; }
}

/* 3.13.5 - gruppi scenari nel modal cliente */
.coc-group-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px;
  background: var(--surface2);
  font-size: .72rem; font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 4px;
  margin-top: 6px;
  margin-bottom: 2px;
}
.coc-group-meta { font-size: .62rem; color: var(--muted); font-weight: 400; }

/* ── Revenue analyzer (3.13.11) ─────────────────────────────────────── */
.rev-root { padding: 1.2rem 1.6rem; max-width: 1400px; margin: 0 auto; }
.rev-head { margin-bottom: 1rem; }
.rev-title { margin: 0 0 .25rem 0; font-size: 1.45rem; }
.rev-sub { color: var(--muted); margin: 0; font-size: .85rem; }

.rev-drop {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  background: var(--surface2);
  margin-bottom: 1.2rem;
  transition: background .15s, border-color .15s;
}
.rev-drop.drag { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.rev-drop-icon { font-size: 1.6rem; margin-bottom: .35rem; }
.rev-drop-title { font-weight: 600; margin-bottom: .5rem; color: var(--text); }
.rev-drop-btn {
  display: inline-block; padding: .5rem 1rem; cursor: pointer;
  background: var(--accent); color: #fff; border-radius: 6px;
  font-size: .85rem; font-weight: 500;
}
.rev-drop-btn:hover { opacity: .9; }
.rev-drop-hint { margin-top: .6rem; color: var(--muted); font-size: .75rem; }

.rev-section { margin-bottom: 1.5rem; }
.rev-section-title {
  margin: 0 0 .6rem 0; font-size: 1rem; font-weight: 600;
  color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: .35rem;
}
.rev-section-sub { color: var(--muted); font-weight: 400; font-size: .78rem; }
.rev-empty { padding: .8rem; color: var(--muted); font-style: italic; font-size: .85rem; }

/* T4: messaggio quando non c'è alcun report caricato (il caricamento è in Home) */
.rev-empty-state {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.2rem 1.4rem; background: var(--surface2); border-radius: 8px;
  color: var(--muted); margin-bottom: 1.2rem;
}
.rev-empty-state-icon { font-size: 1.6rem; flex: 0 0 auto; }
.rev-empty-state-text { font-size: .9rem; }
.rev-empty-state-text strong { color: var(--text); }

/* Totals bar */
.rev-totals-bar { position: sticky; bottom: 0; background: var(--surface);
  border-top: 1px solid var(--border); padding: .6rem 0; margin-top: 1rem; }
.rev-totals { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.rev-tot { padding: .5rem .7rem; background: var(--surface2); border-radius: 6px; }
.rev-tot-lbl { font-size: .68rem; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; }
.rev-tot-val { font-size: 1.05rem; font-weight: 700; margin-top: .2rem; color: var(--text); }
.rev-tot-val.pos { color: var(--accent2, #4caf50); }
.rev-tot-val.neg { color: var(--danger, #e74c3c); }
.rev-tot-sub { font-size: .7rem; color: var(--muted); margin-top: .1rem; }

/* Fee editor */
.rev-fee-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rev-fee-tbl th, .rev-fee-tbl td { padding: .4rem .6rem; border-bottom: 1px solid var(--border); }
.rev-fee-tbl th { background: var(--surface2); text-align: left; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rev-fee-tbl tr.rev-fee-tnt td { background: color-mix(in srgb, var(--accent3, #f59e0b) 6%, transparent); }
.rev-fee-input {
  width: 70px; padding: .2rem .4rem; text-align: right;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text); font-family: var(--mono);
}
.rev-fee-pct { margin-left: .25rem; color: var(--muted); }
.rev-fee-codcli { background: var(--surface2); padding: 1px 5px; border-radius: 3px; font-size: .78rem; }

/* Summary table */
.rev-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rev-tbl th, .rev-tbl td { padding: .45rem .6rem; border-bottom: 1px solid var(--border); }
.rev-tbl th { background: var(--surface2); text-align: left; font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rev-th-num { text-align: right; }
.rev-cell-num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.rev-cell-num.pos { color: var(--accent2, #4caf50); font-weight: 600; }
.rev-cell-num.neg { color: var(--danger, #e74c3c); font-weight: 600; }

.rev-summary-row { cursor: pointer; transition: background .12s; }
.rev-summary-row:hover { background: var(--surface2); }
.rev-summary-row.open { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.rev-cell-name { display: flex; align-items: flex-start; gap: .5rem; }
.rev-caret { color: var(--muted); font-size: .85rem; user-select: none; min-width: 12px; }
.rev-name-block { display: flex; flex-direction: column; }
.rev-name { font-weight: 600; color: var(--text); }
.rev-cod { font-size: .7rem; color: var(--muted); font-family: var(--mono); }

.rev-detail-row { background: var(--surface2); }
.rev-detail-cell { padding: 0 !important; }
.rev-detail { padding: .5rem 1rem 1rem 2.5rem; }
.rev-detail-tbl { font-size: .76rem; background: var(--surface); }
.rev-detail-tbl th { background: var(--surface2); }

/* Timeline chart */
.rev-chart-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: .8rem; }
.rev-chart-svg { width: 100%; height: auto; display: block; }
.rev-chart-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.rev-chart-axis { fill: var(--muted); font-size: 10px; font-family: var(--mono); }
.rev-chart-zero { stroke: var(--text); stroke-width: 1; stroke-dasharray: 4 3; opacity: .4; }
.rev-chart-line { stroke-width: 2; }
.rev-chart-line.line-preventivo { stroke: #3b82f6; }
.rev-chart-line.line-acquisto   { stroke: #f59e0b; }
.rev-chart-line.line-margine    { stroke: #10b981; }
.rev-chart-dot { stroke: var(--surface); stroke-width: 1; }
.rev-chart-dot.line-preventivo { fill: #3b82f6; }
.rev-chart-dot.line-acquisto   { fill: #f59e0b; }
.rev-chart-dot.line-margine    { fill: #10b981; }
.rev-chart-legend { display: flex; gap: 1.2rem; margin-top: .6rem; justify-content: center; font-size: .78rem; color: var(--text); }
.rev-leg-item { display: inline-flex; align-items: center; gap: .35rem; }
.rev-leg-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.rev-leg-dot.line-preventivo { background: #3b82f6; }
.rev-leg-dot.line-acquisto   { background: #f59e0b; }
.rev-leg-dot.line-margine    { background: #10b981; }

@media (max-width: 900px) {
  .rev-totals { grid-template-columns: repeat(2, 1fr); }
}

/* 3.13.13: header row con bottone "Imposta fee" allineato a destra */
.rev-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.rev-head-row .rev-title { margin: 0; }

/* 3.13.14: box fee casamadre in cima al tab Settings → Fatturazione */
.rev-cm-box {
  padding: .8rem 1rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface2));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 8px;
  margin: .8rem 0 1.2rem 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem;
}
.rev-cm-title { font-weight: 700; color: var(--text); grid-column: 1; }
.rev-cm-sub { font-size: .75rem; color: var(--muted); grid-column: 1; }
.rev-cm-row { display: flex; align-items: center; gap: .25rem; grid-column: 2; grid-row: 1 / span 2; }
.rev-cm-row .rev-fee-input { width: 80px; font-size: 1rem; padding: .35rem .5rem; }
.rev-fee-subhead { margin: 1rem 0 .4rem 0; font-size: .85rem; color: var(--text); font-weight: 600; }

/* 3.13.15: controls grafico timeline (metriche + clienti) */
.rev-chart-controls {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.rev-ctrl-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .6rem .8rem;
}
.rev-ctrl-title { font-weight: 600; font-size: .82rem; color: var(--text); margin-bottom: .5rem; }
.rev-ctrl-sub { font-weight: 400; color: var(--muted); font-size: .72rem; }
.rev-ctrl-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.rev-ctrl-chk {
  display: inline-flex; align-items: center; gap: .35rem;
  cursor: pointer; font-size: .82rem; color: var(--text);
  padding: .15rem .3rem; border-radius: 4px;
}
.rev-ctrl-chk:hover { background: var(--surface); }
.rev-ctrl-clients { display: flex; flex-direction: column; }
.rev-ctrl-tools { display: flex; align-items: center; gap: .35rem; margin-bottom: .5rem; }
.rev-ctrl-count { margin-left: auto; font-size: .72rem; color: var(--muted); }
.rev-ctrl-search {
  width: 100%; padding: .3rem .5rem; margin-bottom: .4rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text); font-size: .8rem;
}
.rev-ctrl-list {
  max-height: 200px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px;
}
.rev-cli-row { display: flex; gap: .35rem; align-items: center; padding: .25rem .4rem; }
.rev-cli-name { flex: 1; font-size: .82rem; color: var(--text); }
.rev-cli-cod { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.rev-leg-line {
  display: inline-block; width: 28px; height: 0; border-bottom: 2px solid currentColor;
  vertical-align: middle; margin-right: .25rem;
}

@media (max-width: 900px) {
  .rev-chart-controls { grid-template-columns: 1fr; }
}

/* 3.13.18: banner riepilogo file caricato in alto */
.rev-file-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface2));
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 8px;
  padding: .8rem 1rem;
  margin-bottom: 1rem;
}
.rev-fb-head { display: flex; align-items: center; gap: .8rem; }
.rev-fb-icon { font-size: 1.4rem; }
.rev-fb-meta { display: flex; flex-direction: column; gap: .15rem; }
.rev-fb-title { font-weight: 700; color: var(--text); font-size: .95rem; }
.rev-fb-period { font-family: var(--mono); font-size: .78rem; color: var(--muted); font-weight: 500; }
.rev-fb-sub { font-size: .75rem; color: var(--muted); }
.rev-fb-totals { display: flex; gap: 1rem; flex-wrap: wrap; }
.rev-fb-kv { display: flex; flex-direction: column; gap: .1rem; min-width: 100px; }
.rev-fb-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rev-fb-val { font-family: var(--mono); font-weight: 700; color: var(--text); font-size: .9rem; white-space: nowrap; }
.rev-fb-val.pos { color: var(--accent2, #4caf50); }
.rev-fb-val.neg { color: var(--danger, #e74c3c); }

@media (max-width: 900px) {
  .rev-file-banner { grid-template-columns: 1fr; }
  .rev-fb-totals { gap: .6rem; }
}

/* 3.13.19: panel statistiche revenue (card grid) */
.rev-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.rev-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  transition: transform .12s, box-shadow .12s;
}
.rev-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
}
.rev-stat-card-wide { grid-column: 1 / -1; }
.rev-stat-head {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .8rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.rev-stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  font-size: 1rem; flex-shrink: 0;
}
.rev-stat-title { font-weight: 700; font-size: .92rem; color: var(--text); flex: 1; }

/* Top list (top 5 clienti) */
.rev-top-list { display: flex; flex-direction: column; gap: .5rem; }
.rev-top-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: .5rem; align-items: center;
}
.rev-top-rank {
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  color: var(--muted); text-align: center;
  background: var(--surface2); padding: .15rem .25rem; border-radius: 3px;
}
.rev-top-name { min-width: 0; }
.rev-top-name-text {
  font-size: .8rem; color: var(--text); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: .15rem;
}
.rev-top-bar-bg {
  height: 5px; background: var(--surface2); border-radius: 3px; overflow: hidden;
}
.rev-top-bar-fill {
  height: 100%; border-radius: 3px;
  transition: width .3s ease;
}
.rev-top-val {
  font-family: var(--mono); font-weight: 700; font-size: .8rem;
  color: var(--text); white-space: nowrap;
}
.rev-top-val.neg { color: var(--danger, #e74c3c); }

/* Carrier card (wide) */
.rev-carrier-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.rev-donut-host {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.rev-donut-svg { width: 200px; height: 200px; }
.rev-donut-slice { stroke: var(--surface); stroke-width: 1; cursor: pointer; transition: opacity .12s; }
.rev-donut-slice:hover { opacity: .8; }
.rev-donut-center-val {
  font-family: var(--mono); font-weight: 700;
  fill: var(--text); font-size: 14px;
}
.rev-donut-center-lbl {
  fill: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em;
}
.rev-donut-legend {
  display: flex; flex-direction: column; gap: .25rem;
  width: 100%; font-size: .72rem;
}
.rev-donut-leg {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: .35rem; align-items: center;
}
.rev-donut-leg.muted { color: var(--muted); font-style: italic; padding-left: 18px; }
.rev-donut-leg-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}
.rev-donut-leg-pct {
  font-family: var(--mono); font-weight: 600; color: var(--muted);
}
.rev-carrier-tbl-host { overflow-x: auto; }
/* 3.85.0 — tabelle larghe su schermo stretto.
   base.css ha body{overflow-x:hidden}: una tabella piu' larga della finestra
   senza wrapper non scorre, viene TAGLIATA e le colonne di destra diventano
   irraggiungibili col dito. Questi due wrapper sono la correzione minima
   (le schede vere per il telefono restano in coda, vedi TODO Mobile). */
.rev-tbl-scroll { overflow-x: auto; }
.an-pivot-scroll { overflow-x: auto; }
.rev-carrier-tbl { font-size: .78rem; }
.rev-th-sortable {
  cursor: pointer; user-select: none;
  transition: background .12s;
}
.rev-th-sortable:hover { background: var(--surface); }
.rev-th-sortable.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

@media (max-width: 1100px) {
  .rev-stats-grid { grid-template-columns: 1fr 1fr; }
  .rev-carrier-body { grid-template-columns: 1fr; }
  .rev-donut-host { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .rev-stats-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Opportunity panel  (.rev-opp-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card container */
.rev-opp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

/* Card header */
.rev-opp-head {
  padding: .85rem 1.2rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.rev-opp-head-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
}
.rev-opp-head-icon { font-size: 1.1rem; }
.rev-opp-head-badge {
  font-size: .7rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border-radius: 10px;
  padding: 1px 8px;
}
.rev-opp-head-sub {
  font-size: .78rem;
  color: var(--muted);
  margin-top: .3rem;
}

/* Accordion */
.rev-opp-accordion { }

/* Client row */
.rev-opp-client {
  border-bottom: 1px solid var(--border);
}
.rev-opp-client:last-child { border-bottom: none; }

.rev-opp-client-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem 1.2rem;
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.rev-opp-client-head:hover { background: var(--surface2); }
.rev-opp-client.expanded > .rev-opp-client-head {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.rev-opp-client-toggle { color: var(--muted); font-size: .85rem; min-width: 12px; }
.rev-opp-client-name   { font-weight: 600; color: var(--text); flex: 1; }
.rev-opp-client-code   { font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.rev-opp-client-meta   { display: flex; gap: .35rem; align-items: center; margin-left: auto; }
.rev-opp-client-badge  {
  font-size: .68rem;
  font-weight: 600;
  border-radius: 9px;
  padding: 1px 7px;
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.rev-opp-client-badge.zone {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.rev-opp-client-badge.warn {
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  color: #b45309;
  border-color: color-mix(in srgb, #f59e0b 35%, transparent);
}

/* Expanded detail body */
.rev-opp-client-detail {
  padding: 0 1.2rem 1rem 1.2rem;
  display: none;
}
.rev-opp-client.expanded > .rev-opp-client-detail { display: block; }

/* Zone tabs */
.rev-opp-zone-tabs {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin: .7rem 0 .6rem 0;
}
.rev-opp-zone-tab {
  padding: .3rem .75rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .12s;
}
.rev-opp-zone-tab:hover { border-color: var(--accent); color: var(--accent); }
.rev-opp-zone-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.rev-opp-zone-count { font-weight: 400; }

/* Toolbar (aggiungi carrier) */
.rev-opp-toolbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
  margin-top: .5rem;
}
.rev-opp-add-carrier {
  appearance: none;
  -webkit-appearance: none;
  padding: .3rem .6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: .8rem;
  cursor: pointer;
  min-width: 180px;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  padding-right: 1.6rem;
}
.rev-opp-add-carrier:hover { border-color: var(--accent); }
.rev-opp-add-carrier option {
  background: var(--surface2);
  color: var(--text);
}

/* Pivot table */
.rev-opp-pivot-host { overflow-x: auto; }
.rev-opp-pivot {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.rev-opp-pivot th,
.rev-opp-pivot td {
  border: 1px solid var(--border);
  padding: .4rem .55rem;
  vertical-align: top;
}

/* TH generico */
.rev-opp-th {
  background: var(--surface2);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
  text-align: left;
}
.rev-opp-th-fascia  { min-width: 80px; }
.rev-opp-th-count   { text-align: right; min-width: 50px; }
.rev-opp-th-cliente { text-align: right; min-width: 100px; }
.rev-opp-th-delta   { text-align: right; min-width: 130px; }

/* TH carrier — struttura verticale nome+remove / μ */
.rev-opp-th-carrier {
  min-width: 130px;
  text-align: center;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface2));
}

.rev-opp-th-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin-bottom: .35rem;
}
.rev-opp-th-cname {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.rev-opp-th-remove {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
  font-size: .7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all .12s;
}
.rev-opp-th-remove:hover {
  background: var(--danger, #e74c3c);
  border-color: var(--danger, #e74c3c);
  color: #fff;
}

.rev-opp-th-mu-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
}
.rev-opp-th-mu-label {
  font-size: .65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.rev-opp-th-mu-inp {
  width: 54px;
  padding: .15rem .3rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .78rem;
  font-family: var(--mono);
  text-align: right;
  outline: none;
  transition: border-color .12s;
}
.rev-opp-th-mu-inp:focus { border-color: var(--accent); }

/* TD */
.rev-opp-td { vertical-align: middle; }
.rev-opp-td-fascia { font-weight: 600; color: var(--text); white-space: nowrap; }
.rev-opp-td-count  { text-align: right; color: var(--muted); font-family: var(--mono); }
.rev-opp-td-cliente {
  text-align: right;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--muted);
  white-space: nowrap;
}
.rev-opp-td-carrier {
  text-align: right;
  font-family: var(--mono);
  font-size: .82rem;
  white-space: nowrap;
  transition: background .15s;
}
.rev-opp-td-carrier.is-best {
  background: color-mix(in srgb, #10b981 12%, transparent);
}
/* 3.82.0 — supplementi di zona nell'Analisi opportunita' */
.rev-opp-suppl {
  display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 4px;
  font-size: .68rem; font-weight: 600; vertical-align: 1px; cursor: help;
  background: color-mix(in srgb, var(--ok, #3ecf8e) 18%, transparent);
  color: var(--ok, #3ecf8e);
}
.rev-opp-suppl.is-warn {
  background: color-mix(in srgb, var(--warn, #ffaf3f) 18%, transparent);
  color: var(--warn, #ffaf3f);
}
.rev-opp-capbadge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px;
  font-size: .66rem; font-weight: 600; cursor: help;
  background: color-mix(in srgb, var(--warn, #ffaf3f) 15%, transparent);
  color: var(--warn, #ffaf3f);
}

.rev-opp-best-price {
  color: #059669;
  font-weight: 700;
}
.rev-opp-td-delta {
  text-align: right;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .8rem;
}
.rev-opp-na { color: var(--muted); }

/* Delta badge */
.rev-opp-delta {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .78rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
}
.rev-opp-delta.pos {
  background: color-mix(in srgb, #10b981 12%, transparent);
  color: #059669;
}
.rev-opp-delta.neg {
  background: color-mix(in srgb, #ef4444 10%, transparent);
  color: #dc2626;
}
.rev-opp-delta.even { color: var(--muted); }

/* Unresolved footer */
.rev-opp-unresolved {
  margin-top: .6rem;
  font-size: .76rem;
  color: var(--muted);
  font-style: italic;
}
.rev-opp-unresolved-icon { font-style: normal; }

/* Empty state */
.rev-opp-empty {
  padding: .8rem;
  color: var(--muted);
  font-style: italic;
  font-size: .85rem;
}

@media (max-width: 768px) {
  .rev-opp-th-cname { max-width: 80px; }
  .rev-opp-th-mu-inp { width: 44px; }
  .rev-opp-pivot { font-size: .74rem; }
}
.rev-opp-row { transition: background .1s; }
.rev-opp-row:hover { background: color-mix(in srgb, var(--accent) 3%, transparent); }
.rev-th-pct  { min-width: 80px; white-space: nowrap; }
.rev-cell-pct { font-family: var(--mono); font-size: .8rem; white-space: nowrap; font-weight: 600; }

/* ── Revenue Store — 3.15.0 ──────────────────────────────────────── */

/* Period bar */
.rev-store-period-bar-host { margin-bottom: 8px; }
.rev-store-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 8px;
  font-size: .82rem;
}
.rev-store-bar-label {
  font-weight: 600;
  color: var(--text-muted);
  margin-right: 4px;
}
.rev-store-btn {
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: .8rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.rev-store-btn:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg-card)); border-color: var(--accent); }
.rev-store-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}
.rev-store-btn-all { font-style: italic; }
.rev-store-bar-count {
  margin-left: auto;
  font-size: .76rem;
  color: var(--text-muted);
}

/* Save banner */
.rev-store-save-banner-host { margin-bottom: 10px; }
.rev-store-banner {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, var(--bg-card));
}
.rev-store-banner.loading { color: var(--text-muted); font-size: .85rem; }
.rev-store-banner.error {
  border-color: color-mix(in srgb, var(--color-neg, #ef4444) 35%, transparent);
  background: color-mix(in srgb, var(--color-neg, #ef4444) 6%, var(--bg-card));
  color: var(--color-neg, #ef4444);
  font-size: .85rem;
}
.rev-store-banner.has-conflicts {
  border-color: color-mix(in srgb, #f59e0b 35%, transparent);
  background: color-mix(in srgb, #f59e0b 6%, var(--bg-card));
}
.rev-store-banner-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rev-store-banner-icon { font-size: 1.2rem; flex-shrink: 0; }
.rev-store-banner-info { flex: 1; min-width: 0; }
.rev-store-banner-title { font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.rev-store-banner-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.rev-store-chip {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .76rem;
  font-weight: 600;
}
.rev-store-chip.new     { background: color-mix(in srgb, #10b981 18%, transparent); color: #10b981; }
.rev-store-chip.skip    { background: color-mix(in srgb, var(--text-muted) 15%, transparent); color: var(--text-muted); }
.rev-store-chip.conflict{ background: color-mix(in srgb, #f59e0b 18%, transparent); color: #d97706; }
.rev-store-chip.period  { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.rev-store-banner-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* Conflicts table */
.rev-store-conflicts {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  overflow-x: auto;
}
.rev-store-conflicts-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}
.rev-store-conflicts-tbl th,
.rev-store-conflicts-tbl td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.rev-store-conflicts-tbl th { color: var(--text-muted); font-weight: 600; }
.rev-store-conflicts-tbl td.conflict-diff {
  color: #d97706;
  font-weight: 700;
}
.rev-store-conflicts-more {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: 6px;
}

/* ═══════════════════════════════════════════════════════
   Riconciliazione Fatture Corrieri — 3.16.0
   ═══════════════════════════════════════════════════════ */

.reconcil-wrap {
  padding: 1.5rem;
  /* 3.68.2 — pagina a tutta larghezza: il gabbiotto a 1400px centrato lasciava
     bordi vuoti ai lati E costringeva la tabella allo scroll orizzontale. */
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Upload zone */
.reconcil-upload-zone {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: var(--bg-card);
}
.reconcil-upload-zone:hover,
.reconcil-upload-zone.drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
}
.reconcil-upload-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.reconcil-upload-hint { margin: .25rem 0; color: var(--text); font-size: .95rem; }
.reconcil-upload-hint2 { margin: .15rem 0; color: var(--text-dim); font-size: .8rem; letter-spacing: .03em; }
.reconcil-upload-btn {
  margin-top: .8rem;
  padding: .45rem 1.2rem;
  background: var(--accent);
  color: var(--accent-fg, #fff);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
}
.reconcil-upload-btn:hover { opacity: .88; }

/* Spinner */
.reconcil-spinner {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
}

/* Parse error */
.reconcil-parse-error,
.reconcil-error {
  padding: .8rem 1rem;
  background: color-mix(in srgb, var(--red, #e44) 12%, var(--bg-card));
  border-left: 3px solid var(--red, #e44);
  border-radius: 6px;
  color: var(--text);
  font-size: .9rem;
}

/* Preview card */
.reconcil-preview-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

/* Header fattura */
.reconcil-preview-hdr {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.reconcil-carrier-badge {
  padding: .25rem .65rem;
  border-radius: 4px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  background: var(--accent);
  color: var(--accent-fg, #fff);
}
.reconcil-fatt-num { font-weight: 700; font-size: 1.05rem; }
.reconcil-fatt-date { color: var(--text-dim); font-size: .88rem; }

/* Chips info */
.reconcil-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.reconcil-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 20px;
  border: 1px solid var(--border);
  font-size: .8rem; background: var(--bg);
}
.reconcil-chip-lbl { color: var(--text-dim); }
.reconcil-chip-val { font-weight: 600; }
/* 3.30.0 (P3): chip quadratura non allocata */
.reconcil-chip.warn { border-color: var(--yellow, #c89b30); }
.reconcil-chip.warn .reconcil-chip-val { color: var(--yellow, #c89b30); font-weight: 600; }

/* Parser notes */
.reconcil-parser-notes {
  font-size: .82rem; color: var(--yellow, #c89b30);
  background: color-mix(in srgb, var(--yellow, #c89b30) 8%, transparent);
  padding: .4rem .7rem; border-radius: 5px;
}
.reconcil-parser-notes p { margin: .1rem 0; }

/* Preview table */
.reconcil-preview-tbl-wrap { overflow-x: auto; }
.reconcil-preview-more { font-size: .8rem; color: var(--text-dim); text-align: right; margin: 0; }

/* Controls periodo */
.reconcil-controls {
  display: flex; flex-direction: column; gap: .5rem;
  border-top: 1px solid var(--border); padding-top: .9rem;
}
.reconcil-period-lbl { font-size: .88rem; color: var(--text-dim); }
.reconcil-date-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.reconcil-date-row label { display: flex; align-items: center; gap: .4rem; font-size: .88rem; }
.reconcil-date-input {
  padding: .3rem .5rem; border: 1px solid var(--border);
  border-radius: 5px; background: var(--bg); color: var(--text);
  font-size: .88rem;
}
.reconcil-go-btn {
  align-self: flex-start;
  padding: .5rem 1.4rem;
  background: var(--accent); color: var(--accent-fg, #fff);
  border: none; border-radius: 6px; cursor: pointer;
  font-size: .92rem; font-weight: 700; margin-top: .3rem;
}
.reconcil-go-btn:hover { opacity: .88; }

/* Summary bar */
.reconcil-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
}
.reconcil-summary-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: .8rem 1rem; text-align: center;
}
.reconcil-summary-val { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.reconcil-summary-lbl { font-size: .78rem; color: var(--text-dim); margin-top: .3rem; }
.reconcil-summary-card.delta-pos .reconcil-summary-val { color: var(--red, #e44); }
.reconcil-summary-card.delta-neg .reconcil-summary-val { color: var(--green, #2b9); }
.reconcil-summary-card.delta-zero .reconcil-summary-val { color: var(--text-dim); }
.reconcil-summary-card.good .reconcil-summary-val { color: var(--green, #2b9); }
.reconcil-summary-card.warn .reconcil-summary-val { color: var(--yellow, #c89b30); }
.reconcil-summary-card.bad  .reconcil-summary-val { color: var(--red, #e44); }

/* Warnings */
.reconcil-warnings {
  padding: .6rem .9rem;
  background: color-mix(in srgb, var(--yellow, #c89b30) 10%, var(--bg-card));
  border-left: 3px solid var(--yellow, #c89b30);
  border-radius: 6px; font-size: .85rem;
}
.reconcil-warnings p { margin: .15rem 0; }

/* Tabs */
.reconcil-tab-bar {
  display: flex; gap: .25rem; border-bottom: 2px solid var(--border);
  flex-wrap: wrap;
}
.reconcil-tab {
  padding: .5rem 1rem;
  border: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
  background: transparent; cursor: pointer; font-size: .88rem; color: var(--text-dim);
  border-radius: 4px 4px 0 0; transition: color .15s;
}
.reconcil-tab:hover { color: var(--text); }
.reconcil-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.reconcil-tab-content { padding: 1rem 0; }

/* Totals bar */
.reconcil-totals-bar {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem;
}
.reconcil-tot-chip {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: .35rem .7rem; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg); min-width: 110px;
}
.rtc-lbl { font-size: .72rem; color: var(--text-dim); }
.rtc-val { font-size: .95rem; font-weight: 700; }
.reconcil-tot-chip.pos .rtc-val { color: var(--red, #e44); }
.reconcil-tot-chip.neg .rtc-val { color: var(--green, #2b9); }

/* Mass actions */
.reconcil-mass-actions { display: flex; gap: .5rem; margin-bottom: .5rem; }
.reconcil-mass-btn {
  padding: .3rem .75rem; font-size: .8rem;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text); cursor: pointer;
}
.reconcil-mass-btn:hover { background: var(--bg-hover, var(--border)); }

/* Tables */
.reconcil-tbl-wrap { overflow-x: auto; max-height: 65vh; overflow-y: auto; }
/* 3.68.2 — variante per le tabelle spedizioni: NIENTE scroll annidati (né
   orizzontale né verticale), scorre solo la pagina. */
.reconcil-tbl-flat { overflow: visible; max-height: none; }
.reconcil-tbl-flat .reconcil-tbl { width: 100%; }
.reconcil-row-click { cursor: pointer; }
.reconcil-row-click:hover td { background: rgba(59, 130, 246, .06); }

/* 3.68.3 — dettaglio a tutta larghezza, testi sempre dentro il pannello */
.reconcil-detail { width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
.reconcil-det-info { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; min-width: 0; }
.reconcil-det-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; }
.reconcil-det-grid > * { min-width: 0; }

/* 3.68.3 — striscia pesi a 3 valori (il maggiore tra rilevato e volumetrico
   in verde: è la base su cui il corriere tassa) */
.reconcil-pesi-strip { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.reconcil-peso-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .35rem .8rem;
  white-space: nowrap;
}
.reconcil-peso-max {
  border-color: var(--accent2);
  color: var(--accent2);
  font-weight: 600;
}

/* 3.68.2 — sotto-sezioni affiancate (Discrepanze / Confermate / OK) */
.reconcil-subtabs { display: flex; gap: .4rem; border-bottom: 1px solid var(--border); }
.reconcil-subtab {
  padding: .5rem 1.1rem;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: .85rem;
}
.reconcil-subtab:hover { color: var(--text); }
.reconcil-subtab.active {
  background: var(--surface2);
  color: var(--text);
  font-weight: 600;
  border-color: var(--accent);
}
/* 3.68.6 — azione massiva contestuale a destra, ad altezza linguette */
.reconcil-subtabs .reconcil-bulk-ctx { margin-left: auto; margin-bottom: .35rem; }
.reconcil-bulk-ctx:disabled { opacity: .45; cursor: not-allowed; }
.reconcil-tbl {
  width: 100%; border-collapse: collapse; font-size: .82rem;
}
.reconcil-tbl th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-card); border-bottom: 2px solid var(--border);
  padding: .4rem .5rem; text-align: left; white-space: nowrap;
  color: var(--text-dim); font-weight: 600; font-size: .78rem;
}
.reconcil-tbl td {
  padding: .32rem .5rem; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.reconcil-tbl tr:hover td { background: var(--bg-hover, color-mix(in srgb, var(--accent) 4%, transparent)); }
.reconcil-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.reconcil-tbl td.mono { font-family: monospace; font-size: .78rem; }
.reconcil-tbl td.small { font-size: .75rem; }
.reconcil-tbl td.chk-cell { text-align: center; width: 36px; }
.reconcil-tbl td.suppl-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }

/* Delta coloring */
.reconcil-tbl tr.delta-pos td { background: color-mix(in srgb, var(--red, #e44) 5%, transparent); }
.reconcil-tbl tr.delta-neg td { background: color-mix(in srgb, var(--green, #2b9) 5%, transparent); }
.reconcil-tbl td.delta-pos { color: var(--red, #e44); font-weight: 600; }
.reconcil-tbl td.delta-neg { color: var(--green, #2b9); font-weight: 600; }
.reconcil-tbl td.delta-zero { color: var(--text-dim); }

/* Other concessionarie */
.reconcil-other-summary {
  display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem;
}
.reconcil-other-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .4rem .6rem; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 6px;
  flex-wrap: wrap;
}
.reconcil-other-mitt { font-weight: 600; flex: 1; min-width: 150px; }
.reconcil-other-cnt { color: var(--text-dim); font-size: .85rem; }
.reconcil-other-tot { font-weight: 700; font-size: .95rem; margin-left: auto; }

/* Empty / warn */
.reconcil-empty { color: var(--text-dim); padding: 1.5rem; text-align: center; font-style: italic; }
.reconcil-warn {
  padding: .5rem .8rem; margin-bottom: .75rem;
  color: var(--yellow, #c89b30); font-size: .88rem;
  background: color-mix(in srgb, var(--yellow, #c89b30) 8%, transparent);
  border-radius: 5px;
}

/* Export button */
.reconcil-export-btn {
  margin-top: 1rem;
  padding: .5rem 1.2rem;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text);
  font-size: .88rem; cursor: pointer;
}
.reconcil-export-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Mode switcher Riconciliazione / Parser */
.reconcil-mode-switcher {
  display: flex; gap: .5rem; margin-bottom: .25rem;
}
.reconcil-mode-btn {
  padding: .4rem 1rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg); color: var(--text-dim);
  cursor: pointer; font-size: .88rem; font-weight: 500;
  transition: all .15s;
}
.reconcil-mode-btn:hover { border-color: var(--accent); color: var(--accent); }
.reconcil-mode-btn.active {
  background: var(--accent); color: var(--accent-fg, #fff);
  border-color: var(--accent); font-weight: 700;
}

/* Parser mode */
.reconcil-parser-mode { display: flex; flex-direction: column; gap: .75rem; }
.reconcil-parser-infobar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .5rem .75rem; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 7px;
}

/* Fonte dati ShippyPro nella sezione riconciliazione */
.reconcil-src-wrap {
  border-top: 1px solid var(--border);
  padding-top: .75rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.reconcil-store-info {
  font-size: .83rem; color: var(--text-dim);
  padding: .3rem .5rem;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 4px;
}
.reconcil-orders-toggle {
  align-self: flex-start;
  font-size: .82rem; color: var(--accent);
  background: none; border: none; cursor: pointer; padding: 0;
  text-decoration: underline;
}
.reconcil-orders-toggle:hover { opacity: .75; }
.reconcil-orders-box {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .5rem;
  background: var(--bg); border: 1px dashed var(--border);
  border-radius: 5px; flex-wrap: wrap;
}
.reconcil-orders-label { font-size: .82rem; color: var(--text-dim); }

/* ── Revenue filter bar 3.16.1 ─────────────────────────────────────── */
.rev-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .6rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: .75rem;
}
.rev-filter-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.rev-filter-sep {
  font-size: .78rem;
  color: var(--text-muted);
}
.rev-filter-input {
  padding: .28rem .5rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  font-size: .82rem;
  cursor: pointer;
}
.rev-filter-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.rev-filter-active-badge {
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: .2rem .55rem;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Tabella tariffe trasposta 3.16.1 ──────────────────────────────── */
table.rates.transposed th.carrier-col,
table.rates.transposed td.carrier-col {
  min-width: 180px;
  max-width: 260px;
  white-space: normal;
  word-break: break-word;
}
table.rates.transposed th.weight-hdr {
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
  padding: .35rem .6rem;
}
table.rates.transposed td.carrier-name {
  padding: .35rem .6rem;
  vertical-align: middle;
}
table.rates.transposed td.carrier-name .car-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hm-seg-btn.active { font-weight: 700; }

/* ── Riconciliazione multi-file 3.16.3 ─────────────────────────────── */
.reconcil-filelist {
  margin: .75rem 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.reconcil-filelist-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .85rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.reconcil-filelist-title {
  font-weight: 600;
  font-size: .85rem;
}
.reconcil-filelist-totals {
  font-size: .78rem;
  color: var(--text-muted);
}
.reconcil-file-card {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .55rem .85rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.reconcil-file-card:last-child { border-bottom: none; }
.reconcil-file-card.has-error { background: color-mix(in srgb, #e74c3c 8%, transparent); }
.reconcil-file-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .9rem;
  padding: 0 .25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.reconcil-file-remove:hover { color: #e74c3c; }
.reconcil-file-info {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  flex: 1;
}
.reconcil-file-name { font-weight: 600; font-size: .85rem; }
.reconcil-file-date { font-size: .78rem; color: var(--text-muted); }
.reconcil-file-chips {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
}
.reconcil-file-loading {
  display: flex; align-items: center; gap: .4rem;
  color: var(--text-muted); font-size: .82rem;
}
.reconcil-file-error { color: #e74c3c; font-size: .82rem; }
.reconcil-file-notes {
  display: flex; gap: .3rem; flex-wrap: wrap; width: 100%;
  margin-top: .2rem;
}
.reconcil-note-item {
  font-size: .72rem; color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
  padding: .1rem .35rem; border-radius: 4px;
}
.reconcil-carrier-badge.small { font-size: .7rem; padding: .1rem .3rem; }
.reconcil-carrier-badge.tiny { font-size: .65rem; padding: .08rem .25rem; }
/* Intestazione multi-fatture nei risultati */
.reconcil-multi-fatture-hdr {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; padding: .5rem .85rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 7px; margin-bottom: .6rem; font-size: .82rem;
}
.reconcil-mf-label { font-weight: 600; margin-right: .25rem; }
.reconcil-mf-item { display: flex; align-items: center; gap: .3rem; }

/* ── Opportunity panel: corrieri usati dal cliente ──────────────────── */
.rev-opp-client-carriers {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .25rem .75rem .3rem 2.2rem;
  font-size: .75rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.rev-opp-carriers-lbl {
  color: var(--text-muted);
  font-size: .72rem;
  white-space: nowrap;
  margin-right: .1rem;
}
.rev-opp-carrier-used-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 20px;
  padding: .1rem .45rem .1rem .35rem;
  cursor: default;
  transition: background .15s;
}
.rev-opp-carrier-used-badge:hover {
  background: color-mix(in srgb, var(--accent) 22%, var(--bg));
}
.rev-opp-cub-name {
  font-weight: 600;
  color: var(--text);
  font-size: .72rem;
}
.rev-opp-cub-count {
  font-size: .68rem;
  color: var(--text-muted);
  background: color-mix(in srgb, var(--text-muted) 15%, transparent);
  border-radius: 10px;
  padding: 0 .3rem;
  min-width: 1.4rem;
  text-align: center;
}

/* ── Analisi Opportunità: carrier tabs (livello esterno) ── */
.rev-opp-carrier-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 0;
}
.rev-opp-carrier-tab {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  position: relative;
  top: 2px;
}
.rev-opp-carrier-tab:hover {
  background: var(--bg-hover, var(--bg));
  color: var(--text);
}
.rev-opp-carrier-tab.active {
  background: var(--bg);
  color: var(--accent, var(--primary));
  border-color: var(--border);
  border-bottom-color: var(--bg);
  font-weight: 700;
  z-index: 1;
}
.rev-opp-carrier-tab-count {
  font-size: 0.72rem;
  opacity: 0.7;
  font-weight: 400;
}
.rev-opp-single-carrier-label {
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ── Riepilogo cliente: dettaglio raggruppato (v3.16.5) ── */
.rev-detail-grouped { padding: .5rem 0 .75rem 0; }

/* Carrier tabs nel dettaglio */
.rev-det-carrier-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 1rem 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 0;
}
.rev-det-carrier-tab {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  background: var(--surface2);
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  top: 2px;
  transition: background .12s, color .12s;
}
.rev-det-carrier-tab:hover { background: var(--surface); color: var(--text); }
.rev-det-carrier-tab.active {
  background: var(--surface);
  color: var(--accent, var(--primary));
  border-bottom-color: var(--surface);
  font-weight: 700;
  z-index: 1;
}
.rev-det-carrier-name { }
.rev-det-carrier-cnt  { font-size: .7rem; opacity: .65; font-weight: 400; }
.rev-det-carrier-label {
  padding: 6px 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--text-secondary);
}
.rev-det-carrier-badge {
  display: inline-block;
  background: color-mix(in srgb, var(--accent, var(--primary)) 12%, transparent);
  color: var(--accent, var(--primary));
  border: 1px solid color-mix(in srgb, var(--accent, var(--primary)) 30%, transparent);
  border-radius: 4px;
  padding: 1px 8px;
  font-size: .76rem;
  font-weight: 600;
}

/* Contenuto corriere */
.rev-det-content { padding: 0; }

/* Tabella gruppo fascia×destinazione */
.rev-det-group-tbl { font-size: .78rem; width: 100%; border-collapse: collapse; }
.rev-det-group-tbl th { background: var(--surface2); padding: 4px 8px; font-size: .73rem; font-weight: 600; text-align: left; border-bottom: 1px solid var(--border); }
.rev-det-th-expand { width: 28px; }
.rev-det-th-fascia  { min-width: 70px; }
.rev-det-th-dest    { }

.rev-det-group-row { cursor: pointer; transition: background .1s; }
.rev-det-group-row:hover { background: var(--surface2); }
.rev-det-group-row.open { background: color-mix(in srgb, var(--accent, var(--primary)) 5%, transparent); }

.rev-det-td-expand  { width: 28px; padding: 4px 4px; text-align: center; }
.rev-det-td-fascia  { padding: 4px 8px; font-size: .76rem; font-weight: 500; white-space: nowrap; }
.rev-det-td-dest    { padding: 4px 8px; font-size: .76rem; }

.rev-det-row-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .8rem;
  color: var(--text-secondary);
  padding: 0 2px;
  line-height: 1;
}
.rev-det-row-toggle:hover { color: var(--accent, var(--primary)); }

.rev-det-group-tbl td { padding: 4px 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }

/* Riga spedizioni collassabile */
.rev-det-sped-row { }
.rev-det-sped-row.hidden { display: none; }
.rev-det-sped-cell { padding: 0 0 6px 2rem !important; background: var(--surface2); }

/* Riga totali corriere */
.rev-det-totals-row { font-weight: 700; border-top: 2px solid var(--border); }
.rev-det-totals-row td { padding: 5px 8px; background: color-mix(in srgb, var(--surface2) 60%, transparent); }
.rev-det-td-total-lbl { font-size: .76rem; }

/* Tabella mini spedizioni */
.rev-sped-mini-tbl { font-size: .73rem; width: 100%; border-collapse: collapse; margin-top: 4px; }
.rev-sped-mini-tbl th { background: color-mix(in srgb, var(--surface2) 80%, transparent); padding: 3px 6px; font-weight: 600; font-size: .7rem; border-bottom: 1px solid var(--border); }
.rev-sped-mini-tbl td { padding: 3px 6px; border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent); }
.rev-sped-mini-tbl tr:last-child td { border-bottom: none; }
.rev-sped-mini-tbl tr:hover td { background: color-mix(in srgb, var(--accent, var(--primary)) 4%, transparent); }

.rev-det-nopeso-note {
  font-size: .75rem;
  color: var(--text-secondary);
  padding: 6px 12px;
  background: color-mix(in srgb, var(--warn, #f59e0b) 10%, transparent);
  border-left: 3px solid var(--warn, #f59e0b);
  margin: 6px 0 8px;
}

/* ── Tariffe: overflow override per sticky header (v3.17.4) ── */
/* .view { overflow: hidden } è necessario in generale, ma rompe position:sticky
   in .table-wrap. Per #view-rates lo sovrascriviamo a visible. */
#view-rates {
  overflow: visible;
}

/* ── Tariffe: markup base+delta sub-riga (v3.17.0) ── */
.hm-cell.has-mu { padding-bottom: 3px; }
.hm-sub {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
  padding-top: 2px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.hm-base-val {
  font-size: .68rem;
  color: var(--text-secondary);
  opacity: .75;
}
.hm-delta-val {
  font-size: .68rem;
  font-weight: 600;
}
.hm-delta-val.mu-pos { color: color-mix(in srgb, #f59e0b 90%, var(--text)); }
.hm-delta-val.mu-neg { color: color-mix(in srgb, #34d399 90%, var(--text)); }

/* μ cell: tooltip indica il listino */
.mu-cell[data-listino] { cursor: ns-resize; }


/* ── Fatturato: zona tabs nel dettaglio cliente (v3.17.7) ── */
.rev-det-zona-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 6px 10px 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface2) 40%, transparent);
}
.rev-det-zona-tab {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  top: 1px;
  transition: background .1s, color .1s;
}
.rev-det-zona-tab:hover { background: var(--surface2); color: var(--text); }
.rev-det-zona-tab.active {
  background: var(--surface);
  color: var(--accent, var(--primary));
  border-bottom-color: var(--surface);
  font-weight: 700;
  z-index: 1;
}
.rev-det-zona-content { }

/* Riconciliazione 3.22.0 — menu azioni riga (⋯), legenda sigle, celle editabili */
.reconcil-actions-menu > summary { list-style: none; }
.reconcil-actions-menu > summary::-webkit-details-marker { display: none; }
.reconcil-actions-menu[open] > summary { background: var(--hover, rgba(0,0,0,.06)); }
.reconcil-menu-item:hover { background: var(--hover, rgba(0,0,0,.08)); }
.reconcil-legend > summary { color: var(--accent, inherit); user-select: none; }
.reconcil-editable:hover { background: var(--hover, rgba(0,0,0,.05)); }

/* Tabella comparativa cliente ↔ corriere (dettaglio spedizione) — stile tema */
.reconcil-cmp-tbl { border-collapse: collapse; font-size: .8rem; margin: .2rem 0; }
.reconcil-cmp-tbl th,
.reconcil-cmp-tbl td { padding: .22rem .6rem; border-bottom: 1px solid var(--border); }
.reconcil-cmp-tbl thead th {
  background: var(--surface2, var(--bg-secondary));
  color: var(--text-dim, var(--muted));
  font-weight: 600; text-align: left;
}
.reconcil-cmp-tbl th.num,
.reconcil-cmp-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.reconcil-cmp-tbl tbody tr:hover td { background: var(--bg-hover, color-mix(in srgb, var(--accent) 4%, transparent)); }
.reconcil-cmp-tbl tr.cmp-warn td {
  background: color-mix(in srgb, var(--warning, #f0ad4e) 12%, var(--surface));
  font-weight: 600;
}
.reconcil-cmp-tbl tr.cmp-warn td.cmp-delta { color: var(--warning, #c08a40); }
.reconcil-cmp-tbl tr.cmp-strong td { font-weight: 700; border-top: 2px solid var(--border); }
.reconcil-detail .reconcil-det-title { color: var(--accent, inherit); border-bottom: 1px solid var(--border); padding-bottom: .15rem; }

/* ============================================================
   Black Dashboard — layer di stili firmati (v3.36.0)
   Attivo SOLO con il tema "blackdash" (html[data-theme="blackdash"]).
   Replica font Poppins, gradienti, ombre e angoli del template
   Creative Tim. I colori arrivano dalle CSS vars del tema.
   ============================================================ */
html[data-theme="blackdash"] {
  --radius: 6px;
  --radius-lg: 8px;
}
html[data-theme="blackdash"] body {
  font-family: 'Poppins', 'IBM Plex Sans', sans-serif;
  font-weight: 300;
  background: linear-gradient(135deg, #1e1e2e 0%, #1a1a2e 60%, #191734 100%);
  background-attachment: fixed;
}
/* Card e superfici: ombra morbida tipica del template */
html[data-theme="blackdash"] .stat-card,
html[data-theme="blackdash"] .view,
html[data-theme="blackdash"] .modal-dialog,
html[data-theme="blackdash"] .app-tile {
  box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.22);
}
/* Bottone primario: gradiente magenta + glow, maiuscolo */
html[data-theme="blackdash"] .btn-solid {
  background: linear-gradient(to bottom left, #e14eca, #ba54f5);
  box-shadow: 0 4px 14px 0 rgba(225, 78, 202, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: var(--fs-xs);
}
html[data-theme="blackdash"] .btn-solid:hover { filter: brightness(1.06); }
html[data-theme="blackdash"] .btn-solid.danger {
  background: linear-gradient(to bottom left, #fd5d93, #ec250d);
  box-shadow: 0 4px 14px 0 rgba(253, 93, 147, 0.35);
}
/* Tab attiva della topbar: gradiente + glow al posto del pieno */
html[data-theme="blackdash"] .tb-tab.active {
  background: linear-gradient(to bottom left, #e14eca, #ba54f5);
  box-shadow: 0 4px 14px 0 rgba(225, 78, 202, 0.35);
}
/* Home: le tile prendono un bordo-accento e un hover in gradiente */
html[data-theme="blackdash"] .app-tile:hover {
  border-color: #e14eca;
  box-shadow: 0 7px 22px -6px rgba(225, 78, 202, 0.45);
}
/* Logo badge piu' pulito sul fondo scuro del template */
html[data-theme="blackdash"] .logo-badge {
  background: linear-gradient(to bottom left, #e14eca, #ba54f5);
  border-color: transparent;
}
html[data-theme="blackdash"] .logo-badge .logo-svg { color: #fff; }

/* ============================================================
   Sidebar persistente + Impostazioni inline (v3.37.0)
   ============================================================ */
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: 212px;
  background: var(--surface); border-right: 1px solid var(--border);
  z-index: 60; display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; transition: width 0.15s ease;
}
/* 3.94.0 — la barra di scorrimento non si vede piu'.
   Su Windows e' una barra grigia larga ~15px disegnata SOPRA il contenuto:
   nella colonna stretta di 56px copriva le icone, che sono l'unica cosa
   leggibile in quello stato. Lo scorrimento resta (rotella, trackpad,
   tastiera, e la barra ricompare quando serve su macOS, dove e' a scomparsa
   di suo). Le tre righe sono i tre motori: Firefox, IE/Edge vecchio,
   WebKit/Blink. */
.sidebar { scrollbar-width: none; -ms-overflow-style: none; }
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }

body:not([data-sidebar="on"]) .sidebar { display: none; }
body[data-sidebar="on"] .topbar,
body[data-sidebar="on"] .main { margin-left: 212px; transition: margin-left 0.15s ease; }
body[data-sidebar="on"][data-sidebar-collapsed="1"] .sidebar { width: 56px; }
body[data-sidebar="on"][data-sidebar-collapsed="1"] .topbar,
body[data-sidebar="on"][data-sidebar-collapsed="1"] .main { margin-left: 56px; }

/* 3.94.0 — la barra stretta si apre al passaggio del mouse, SOPRA la pagina.
   Il margine del contenuto resta 56px (le due regole qui sopra guardano solo
   gli attributi del body, non lo stato di hover): la pagina non si sposta di
   un pixel mentre la barra si allarga. E' la differenza fra un menu che si
   apre sopra e uno che spinge di lato, ed e' il comportamento del menu di
   Supabase che l'utente ha approvato il 07/09/2026.
   `focus-within` e' li' per la tastiera: chi arriva alle voci con Tab deve
   vederne le etichette come chi ci passa sopra col mouse. */
@media (min-width: 769px) {
body[data-sidebar="on"][data-sidebar-collapsed="1"] .sidebar:hover,
body[data-sidebar="on"][data-sidebar-collapsed="1"] .sidebar:focus-within {
  width: 212px; box-shadow: 6px 0 22px rgba(0, 0, 0, .45);
}
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, body[data-sidebar="on"] .topbar, body[data-sidebar="on"] .main { transition: none; }
}

.sb-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 12px; border-bottom: 1px solid var(--border);
}
.sb-mark {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px;
  background: var(--accent); color: #fff; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
}
.sb-word { flex: 1; font-weight: 600; color: var(--text); font-size: var(--fs-md); white-space: nowrap; }
.sb-toggle { background: transparent; border: none; color: var(--muted); padding: 4px; display: flex; }
.sb-toggle:hover { color: var(--text); }
.sb-group-label {
  font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.06em; padding: 12px 16px 4px; white-space: nowrap;
}
.sb-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 16px; background: transparent; border: none;
  border-left: 2px solid transparent; color: var(--muted);
  font-family: inherit; font-size: var(--fs-sm); white-space: nowrap; cursor: pointer;
}
.sb-item:hover { color: var(--text); background: var(--surface2); }
.sb-item.active { color: var(--text); background: var(--surface2); border-left-color: var(--accent); }
.sb-ico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; }

/* ── Listini ufficiali (TODO §6) — 3.45.0 ────────────────────────── */
.listini-wrap { display: flex; gap: var(--pad-lg); align-items: flex-start; }
.listini-sidebar {
  flex: 0 0 260px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--pad-md);
}
.listini-main { flex: 1; min-width: 0; }
.listini-title { margin: 0 0 var(--pad-sm) 0; font-size: var(--fs-md); }
.listini-empty { color: var(--muted); font-size: var(--fs-sm); padding: var(--pad-sm) 0; }
.listini-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--pad-md); }
.listini-item {
  padding: 8px 10px; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; background: var(--surface2);
}
.listini-item:hover { border-color: var(--border); }
.listini-item.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface2)); }
.listini-item-titolo { font-size: var(--fs-sm); }
.listini-item-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.listini-badge-scaduto {
  color: var(--danger); font-weight: 600; margin-left: 6px;
}
.listini-btn-nuovo { width: 100%; }

.listini-upload-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--pad-lg);
}
.listini-upload-row {
  display: flex; align-items: center; gap: var(--pad-sm); flex-wrap: wrap;
  margin: var(--pad-sm) 0;
}
.listini-upload-row select, .listini-upload-row input[type=text] {
  padding: 6px 8px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface2); color: var(--text);
}
.listini-banner-warn {
  padding: 0.5rem 0.75rem; border-radius: var(--radius); font-size: var(--fs-sm);
  border: 1px solid color-mix(in srgb, var(--warning, #f0ad4e) 55%, var(--border));
  background: color-mix(in srgb, var(--warning, #f0ad4e) 10%, var(--surface2));
  margin: var(--pad-sm) 0;
}

.listini-header { margin-bottom: var(--pad-md); }
.listini-header h2 { margin: 0 0 var(--pad-sm) 0; }
.listini-note {
  font-size: var(--fs-sm); color: var(--muted); background: var(--surface2);
  border-radius: var(--radius); padding: var(--pad-sm); margin: var(--pad-sm) 0;
}
.listini-note ul { margin: 4px 0 0 0; padding-left: 1.2em; }

.listini-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: var(--pad-md); }
.listini-tab {
  padding: 8px 14px; background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); cursor: pointer; font-family: inherit; font-size: var(--fs-sm);
}
.listini-tab:hover { color: var(--text); }
.listini-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

.listini-servizio-picker { margin-bottom: var(--pad-sm); }
.listini-servizio-sel { padding: 6px 8px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface2); color: var(--text); }
.listini-note-servizio { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--pad-sm); }

.listini-grid-tbl { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.listini-grid-tbl th, .listini-grid-tbl td { padding: 5px 8px; border: 1px solid var(--border); text-align: right; white-space: nowrap; }
.listini-grid-tbl th:first-child, .listini-grid-tbl td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); }
.listini-fascia-label { font-family: var(--mono); font-size: var(--fs-xs); }
.listini-cell-vuota { color: var(--muted); text-align: center; }
.listini-cell-input {
  width: 72px; text-align: right; padding: 3px 5px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text);
}
.listini-cell-overridden { background: color-mix(in srgb, var(--accent3, #f59e0b) 12%, transparent); }
.listini-cell-overridden .listini-cell-input { border-color: var(--accent3, #f59e0b); }

/* Tab Supplementi: voce a catalogo mai valorizzata dal parser (attenuata,
   non nascosta — resta visibile per segnalare cosa manca) e voce presente
   nel listino ma non a catalogo (badge "fuori catalogo"). */
.listini-suppl-vuoto { opacity: 0.55; }
.listini-suppl-extra {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--muted); background: var(--surface2); border: 1px solid var(--border);
}

.listini-sim-form { display: grid; grid-template-columns: auto 1fr; gap: 8px var(--pad-sm); align-items: center; max-width: 480px; }
.listini-sim-form input { padding: 6px 8px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface2); color: var(--text); }
.listini-sim-actions { grid-column: 1 / -1; display: flex; gap: var(--pad-sm); margin-top: 4px; }
.listini-sim-risultato { margin-top: var(--pad-md); }
.listini-sim-box {
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--pad-md); font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 6px;
}
.listini-sim-totale { font-size: var(--fs-md); margin-top: 6px; }

/* ── Costi extra per corriere ────────────────────────────────────────
   La pagina non mostra piu' la griglia tariffaria (quella la calcola
   ShippyPro): mostra solo cosa PUO' arrivare in piu' oltre al nolo, per
   corriere, raggruppato per categoria. Colonne testuali quindi allineate
   a sinistra e a capo libero — l'opposto della griglia prezzi sopra. */
.listini-intro {
  font-size: var(--fs-sm); color: var(--muted); margin: 0 0 var(--pad-md) 0;
  max-width: 70ch; line-height: 1.5;
}
.listini-cat { margin-bottom: var(--pad-lg); }
.listini-cat-title {
  margin: 0 0 2px 0; font-size: var(--fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
}
.listini-cat-sub { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 6px; }

.listini-suppl-tbl { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.listini-suppl-tbl th, .listini-suppl-tbl td {
  padding: 6px 8px; border: 1px solid var(--border);
  text-align: left; vertical-align: top; white-space: normal;
}
.listini-suppl-tbl th { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.listini-suppl-tbl td.num { text-align: right; white-space: nowrap; }
.listini-voce-nome { font-weight: 600; }
.listini-voce-cond { color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; }
.listini-voce-nota { color: var(--muted); font-size: var(--fs-xs); margin-top: 3px; line-height: 1.45; }
/* Voce senza importo inserito: attenuata ma MAI nascosta — il punto della
   pagina e' vedere anche i costi che non sono ancora stati quantificati. */
.listini-voce-vuota { opacity: 0.72; }
/* Regole di calcolo: niente casella importo, sfondo diverso per non farle
   confondere con le voci compilabili. */
.listini-voce-regola td { background: color-mix(in srgb, var(--surface2) 55%, transparent); }
.listini-importo-input {
  width: 86px; text-align: right; padding: 4px 6px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text);
}
.listini-nota-input {
  width: 100%; min-width: 120px; padding: 4px 6px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text);
  font-size: var(--fs-xs);
}
.listini-badge-shippy, .listini-badge-extra {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
  border: 1px solid var(--border);
}
/* Verde = ShippyPro lo restituisce gia' nel prezzo: non e' una sorpresa.
   Ambra = ShippyPro NON lo calcola: e' esattamente cio' che fa saltare il
   margine, ed e' il motivo per cui questa pagina esiste. */
.listini-badge-shippy { color: var(--accent2); background: color-mix(in srgb, var(--accent2) 10%, var(--surface2)); }
.listini-badge-extra { color: var(--accent3, #f59e0b); background: color-mix(in srgb, var(--accent3, #f59e0b) 12%, var(--surface2)); }
.listini-corriere-count { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.listini-fonte {
  font-size: var(--fs-xs); color: var(--muted); margin-top: var(--pad-md);
  border-top: 1px solid var(--border); padding-top: var(--pad-sm);
}

@media (max-width: 900px) {
  .listini-wrap { flex-direction: column; }
  .listini-sidebar { flex: none; width: 100%; }
}
.sb-sub { font-size: var(--fs-xs); padding-top: 7px; padding-bottom: 7px; }
/* 3.70.1 — Nessuna voce si comprime. La sidebar e' un flex column con
   overflow-y:auto: senza questo, su finestre basse il flexbox schiacciava i
   figli invece di far comparire la barra di scorrimento. A pagarla era
   .sb-set-box, che avendo overflow:hidden puo' rimpicciolirsi fino a 0: con
   le Impostazioni aperte le ultime voci (da "File cliente" in giu') finivano
   tagliate e non c'era modo di scorrere per raggiungerle. */
.sb-brand, .sb-group-label, .sb-item, .sb-set-box, .sb-foot { flex: 0 0 auto; }
.sb-spacer { flex: 1 1 auto; min-height: 0; }
.sb-foot { border-top: 1px solid var(--border); padding: 10px 14px; display: flex; align-items: center; gap: 8px; }
.sb-user { flex: 1; font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-logout { width: auto; padding: 6px; }
.sb-logout .sb-label { display: none; }

/* Impostazioni a tendina */
.sb-set-toggle .sb-chev { margin-left: auto; display: flex; align-items: center; color: var(--muted); transition: transform 0.15s ease; }
.sidebar[data-settings-open="1"] .sb-set-toggle .sb-chev { transform: rotate(180deg); }
.sb-set-box { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
/* 3.70.1 — il tetto deve stare sopra alle voci di SETTINGS (sidebar.js):
   ~32px l'una, 14 voci = 448px. Se si aggiungono impostazioni oltre le ~20,
   alzare questo numero: quello che avanza viene tagliato senza avvisare. */
.sidebar[data-settings-open="1"] .sb-set-box { max-height: 640px; }
.sb-set-box .sb-item { padding-left: 30px; }
/* 3.94.0 — le regole della barra STRETTA stanno tutte in questo media query.
   Sotto i 768px la barra e' un overlay a scomparsa aperto dall'hamburger e
   mostra sempre le etichette: la modalita' a sole icone li' non ha senso,
   perche' non c'e' un passaggio del mouse per riaprirla. Tenerle qui dentro
   evita di doverle disfare piu' sotto a colpi di specificita'. */
@media (min-width: 769px) {
body[data-sidebar-collapsed="1"] .sidebar:not(:hover):not(:focus-within) .sb-set-box { max-height: 0 !important; }
body[data-sidebar-collapsed="1"] .sidebar:not(:hover):not(:focus-within) .sb-chev { display: none; }
}

/* Pallino rosso "attività da gestire" */
.sb-badge {
  margin-left: auto; flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #fd5d93; color: #fff; font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
@media (min-width: 769px) {
body[data-sidebar-collapsed="1"] .sidebar:not(:hover):not(:focus-within) .sb-badge {
  position: absolute; margin: 0; min-width: 8px; height: 8px; padding: 0;
  transform: translate(10px, -10px);
  overflow: hidden; color: transparent;
}
}
.sb-item { position: relative; }

/* 3.94.0 — separatori fra i gruppi, al posto delle etichette.
   Nella colonna stretta un'etichetta («Lavoro») non si puo' mostrare, e senza
   niente le voci diventano una colonna indistinta di dodici icone. La riga
   sottile invece si vede in tutti e due gli stati e dice la stessa cosa: qui
   comincia un altro gruppo. */
.sb-sep { flex: 0 0 auto; height: 1px; background: var(--border); margin: 7px 10px; }

/* Il lucchetto in fondo: blocca la barra aperta, o la lascia aprirsi al
   passaggio. Prende il posto del vecchio tasto «comprimi» che stava in alto —
   con la barra stretta come stato normale, «comprimi» non voleva piu' dire
   niente, e due comandi per la stessa cosa sono peggio di uno. */
.sb-lockrow { flex: 0 0 auto; border-top: 1px solid var(--border); padding: 6px 0; }
.sb-lock {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 8px 16px; background: transparent; border: none;
  color: var(--muted); font-family: inherit; font-size: var(--fs-xs);
  white-space: nowrap; cursor: pointer;
}
.sb-lock:hover { color: var(--text); background: var(--surface2); }
@media (min-width: 769px) {
body[data-sidebar-collapsed="1"] .sidebar:not(:hover):not(:focus-within) .sb-lock {
  justify-content: center; padding-left: 0; padding-right: 0;
}
}

/* Settings -> Fuel: 7 box soglie allarme (uno per corriere) */
.fuel-cfg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .8rem;
}
.fuel-cfg-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .8rem .9rem;
}
.fuel-cfg-name { font-weight: 700; color: var(--text); margin-bottom: .5rem; }
.fuel-cfg-fields { display: flex; flex-direction: column; gap: .5rem; }
.fuel-cfg-field { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: var(--muted); }
.fuel-cfg-input {
  width: 100%; padding: .3rem .5rem; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text); font-family: var(--mono);
}
.fuel-cfg-scaglioni {
  margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: .2rem;
}
.fuel-cfg-scaglioni-row { display: flex; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--muted); }
.fuel-cfg-scaglioni-row strong { color: var(--text); font-family: var(--mono); font-weight: 600; }
.fuel-cfg-scaglioni-note { font-size: .7rem; color: var(--muted); margin: .4rem 0 0 0; font-style: italic; }

/* 3.94.0 — il `:not(:hover):not(:focus-within)` e' la chiave di tutto: sono
   le stesse regole di prima, che pero' smettono di valere mentre la barra e'
   aperta al passaggio. Cosi' le etichette tornano senza doverle riaccendere
   una per una, e senza che JavaScript debba tenere uno stato che si puo'
   disallineare dal mouse. */
@media (min-width: 769px) {
body[data-sidebar-collapsed="1"] .sidebar:not(:hover):not(:focus-within) .sb-label,
body[data-sidebar-collapsed="1"] .sidebar:not(:hover):not(:focus-within) .sb-group-label { display: none; }
body[data-sidebar-collapsed="1"] .sidebar:not(:hover):not(:focus-within) .sb-item,
body[data-sidebar-collapsed="1"] .sidebar:not(:hover):not(:focus-within) .sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }
body[data-sidebar-collapsed="1"] .sidebar:not(:hover):not(:focus-within) .sb-foot { justify-content: center; }
}

.view-settings .settings-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--pad-md);
}
.view-settings .settings-head h2 { font-size: var(--fs-lg); }

/* Under Black Dashboard: marchio sidebar a gradiente come il resto */
html[data-theme="blackdash"] .sb-mark {
  background: linear-gradient(to bottom left, #e14eca, #ba54f5);
}

/* ============================================================
   Cruscotto Home (v3.38.0)
   ============================================================ */
.app-picker.home-mode {
  display: block; align-items: stretch; justify-content: flex-start;
  min-height: 0; padding: var(--pad-lg);
}
.home-dash { width: 100%; display: flex; flex-direction: column; gap: var(--pad-lg); }
.home-tabs { display: flex; gap: 8px; align-items: center; }
/* 3.43.0 (Dev I): indicatore discreto "aggiornamento…" per la stale-while-
   revalidate del cruscotto — visibile solo mentre i dati freschi arrivano
   dopo aver già mostrato l'ultimo snapshot salvato. */
.home-updating-badge {
  font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: 5px;
  padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
}
.home-updating-badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--accent); border-top-color: transparent;
  animation: home-updating-spin .8s linear infinite;
}
@keyframes home-updating-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Busy indicator generico (static/js/busy.js) — spinner+label per
   operazioni lunghe senza una barra di progresso dedicata (import
   listino, simulatore Analisi, export, query Fatturato). Riusa
   l'animazione home-updating-spin qui sopra, senza toccarla.
   ============================================================ */
[data-busy="1"] { display: inline-flex; align-items: center; gap: 6px; cursor: progress; opacity: .85; }
.busy-spin {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--accent); border-top-color: transparent;
  animation: home-updating-spin .8s linear infinite;
}
.busy-label { font-size: var(--fs-xs); }

.home-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 9px 18px; color: var(--muted); font-family: inherit; font-size: var(--fs-md); font-weight: 600; cursor: pointer;
}
.home-tab .home-tab-sub { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.home-tab.active { color: var(--text); border-color: var(--accent); }
.home-tab.active .home-tab-sub { color: var(--accent); }
.home-filter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px;
}
.home-filter-label { font-weight: 600; color: var(--text); }
.home-filter-sep { color: var(--muted); font-size: var(--fs-sm); }
.home-filter-input {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; color: var(--text);
}
/* T4: bottone upload spinto sul lato destro della riga filtro periodo */
.home-filter-upload-btn { margin-left: auto; }
/* H2 (3.60.0): periodo effettivamente coperto dai dati */
.home-period-info {
  font-size: var(--fs-xs); color: var(--muted); font-style: italic;
  padding-left: 6px; border-left: 2px solid var(--border);
}
.home-period-info:empty { display: none; }
/* H4 (3.60.0): barra di avanzamento della Home. Riga sottile, non un overlay:
   la pagina resta interagibile e non viene opacizzata. */
.home-progress {
  position: relative;
  height: 18px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}
.home-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 9px;
  transition: width 180ms ease-out;
}
.home-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--text);
  letter-spacing: 0.02em;
  pointer-events: none;
}
/* Indeterminata: una sola chiamata, nessun i/N onesto da mostrare. */
.home-progress.indeterminate .home-progress-fill {
  width: 35%;
  transition: none;
  animation: home-progress-slide 1.1s ease-in-out infinite;
}
@keyframes home-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
  .home-progress.indeterminate .home-progress-fill { animation: none; width: 100%; opacity: 0.5; }
}

/* H8 (3.60.0): ricerca spedizioni.
   3.64.0 (A4): la barra vive dentro il panel dei tab, spinta a destra e corta.
   Puo' restringersi (flex-shrink) ma non allargarsi: cosi' i due tab non
   vanno mai a capo su schermi stretti. */
.home-searchbar {
  display: flex; margin-left: auto; min-width: 0;
  flex: 0 1 min(320px, 40%); width: min(320px, 40%);
}
.home-search-input {
  width: 100%; min-width: 0; text-overflow: ellipsis;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 7px 12px; color: var(--text);
  font-family: inherit; font-size: var(--fs-sm);
}
@media (max-width: 700px) {
  .home-searchbar { flex-basis: min(200px, 45%); width: min(200px, 45%); }
}
.home-search-input:focus { outline: none; border-color: var(--accent); }
.home-search-count { font-size: var(--fs-xs); color: var(--muted); }
.home-search-track { font-family: var(--mono); font-size: var(--fs-xs); }
/* 3.66.0: suggerimenti mentre si digita. La tendina e' assoluta sotto la
   casella: .home-searchbar diventa il riferimento di posizione. */
.home-searchbar { position: relative; }
.home-search-sugg {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  max-height: 280px; overflow-y: auto;
}
.home-search-sugg-item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 7px 12px; cursor: pointer; font-size: var(--fs-sm);
}
.home-search-sugg-item:hover,
.home-search-sugg-item.active { background: var(--hover, rgba(128, 128, 128, 0.15)); }
.home-search-sugg-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-search-sugg-meta { flex: none; font-size: var(--fs-xs); color: var(--muted); }
.home-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.home-kpi { background: var(--surface); border-radius: var(--radius); padding: 14px 16px; }
.home-kpi-label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.home-kpi-val { font-size: 1.5rem; font-weight: 600; }
.home-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad-lg); }
@media (max-width: 900px) { .home-charts-row { grid-template-columns: 1fr; } }

/* 3.64.0 (B3) — riga mappa spedizioni. Decisione dell'utente: la mappa e'
   larga la META' di prima e ha di fianco UN SOLO panel informazioni, anche lui
   a meta'. La riga sta subito sotto Distribuzione e Andamento. Sotto i 900px
   si impilano, come i grafici. Lo stile della mappa vera e propria sta in
   css/mappa-led.css (del pacchetto consegnato): qui non si tocca. */
.home-map-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad-lg); align-items: stretch; }
.home-map-card { min-width: 0; }
/* Il panel e' alto ESATTAMENTE quanto la mappa, decisione dell'utente: niente
   spazio vuoto sotto e piu' righe possibile a schermo.
   Come: lo slot e' la cella della griglia e prende l'altezza della riga, che e'
   quella della mappa (.rates-mappa ha aspect-ratio 960/520); il panel ci sta
   dentro in assoluto, quindi la sua classifica NON puo' far crescere la riga —
   scorre dentro .home-map-body. Al contrario, un panel in flusso normale
   detterebbe lui l'altezza e sotto la mappa resterebbe il buco. */
.home-map-info-slot { position: relative; min-width: 0; }
.home-map-info-card {
  position: absolute; inset: 0;
  min-width: 0; display: flex; flex-direction: column; overflow: hidden;
}
/* La sola parte che scorre: la pagina non scorre mai per colpa del panel. */
.home-map-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.home-map-tot { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.home-map-list { display: flex; flex-direction: column; gap: 7px; }
.home-map-item { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; }
.home-map-rank { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
.home-map-name { min-width: 0; }
.home-map-name-text {
  font-size: var(--fs-sm); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Riga Italia: il nome e' un bottone (si apre a tendina sul dettaglio per
   regione), ma deve leggersi come le altre righe, non come un bottone. */
.home-map-caret {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); color: var(--text);
  text-align: left; width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-map-caret:hover { color: var(--accent); }
/* Dettaglio regione: rientrato, senza barra, piu' smorto della nazione. */
.home-map-item-regione { padding-left: 22px; }
.home-map-item-regione .home-map-name-text,
.home-map-item-regione .home-map-val { color: var(--muted); font-size: var(--fs-xs); }
/* 3.65.2 — regione ricavata dal CAP invece che dalla provincia. Sta di fianco
   al nome, smorta e piccola: e' una nota di provenienza, non un dato in piu'.
   Serve perche' una regione dedotta e una dichiarata non si confondano. */
.home-map-dedotta { font-size: var(--fs-xs); color: var(--muted); font-style: italic; margin-top: 2px; }
.home-map-bar-bg { height: 5px; border-radius: 999px; background: var(--surface2); margin-top: 4px; overflow: hidden; }
/* 3.65.0: la barra resta lunga quanto il rapporto col primo in classifica
   (volume) ma dentro si divide nei colori delle fasce (composizione). Il fondo
   rosso resta per le righe di cui non si hanno le fasce. */
.home-map-bar-fill { height: 100%; border-radius: 999px; background: var(--map-led, #E5342B); display: flex; overflow: hidden; }
.home-map-val { font-family: var(--mono); font-size: var(--fs-sm); color: var(--text); white-space: nowrap; }
.home-map-pct { color: var(--muted); font-size: var(--fs-xs); }
/* Le tre fasce di peso: sempre visibili sopra la classifica, non scorrono via. */
.home-map-fasce {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-bottom: 10px;
}
.home-map-fascia {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; padding: 6px 8px; min-width: 0; text-align: center;
}
.home-map-fascia-lbl {
  font-size: var(--fs-xs); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-map-fascia-val { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.home-map-fascia-pct { font-size: var(--fs-xs); color: var(--accent); }
.home-map-nota, .home-map-scartate {
  font-size: var(--fs-xs); color: var(--muted);
}
.home-map-nota { margin-bottom: 10px; }
.home-map-nota-sub { margin: 0 0 4px 52px; }
.home-map-scartate { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }

/* 3.65.0 — le fasce di peso su OGNI destinazione (richiesta dell'utente).
   Lo spazio e' mezzo panel, alto quanto la mappa: tre colonne di numeri per
   riga lo riempirebbero senza dire niente. Percio' due letture sovrapposte —
   i segmenti colorati dentro la barra di volume, e sotto i numeri in chip
   corte, solo per le fasce che esistono davvero. Le percentuali di riga sono
   sul totale DI QUELLA riga, quelle in cima su tutto il periodo: la didascalia
   .home-map-fasce-cap e' li' perche' le due non si confondano. */
.home-map-fasce-cap { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 4px; }
/* I colori sono i token di tema, non tinte scelte a mano: il blocco .home-map-*
   deve restare senza colori fissi (lo verifica test_home_destinazioni.py) e i
   temi chiaro/scuro devono continuare a funzionare da soli. Scala voluta: piu'
   pesante = piu' caldo, fino al rosso della mappa. */
.home-map-seg { height: 100%; }
.home-map-seg-0-30 { background: var(--accent); }
.home-map-seg-30-70 { background: var(--accent3); }
.home-map-seg-70-oltre { background: var(--map-led, #E5342B); }
.home-map-seg-nd { background: var(--muted); opacity: .5; }
.home-map-fasce-riga { display: flex; flex-wrap: wrap; gap: 2px 9px; margin-top: 4px; }
.home-map-chip {
  font-size: var(--fs-xs); color: var(--muted); white-space: nowrap;
  border-left: 3px solid var(--border); padding-left: 5px;
}
.home-map-chip-0-30 { border-left-color: var(--accent); }
.home-map-chip-30-70 { border-left-color: var(--accent3); }
.home-map-chip-70-oltre { border-left-color: var(--map-led, #E5342B); }
.home-map-chip-nd { border-left-color: var(--muted); font-style: italic; }
/* Dentro la tendina Italia le fasce di regione restano leggibili ma smorte,
   come il resto del dettaglio. */
.home-map-item-regione .home-map-fasce-riga { opacity: .85; }

/* I contatori delle righe scartate sono bottoni: aprono la schermata che le
   elenca una per una. Devono leggersi come testo, non come pulsanti. */
.home-map-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; color: var(--accent);
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.home-map-link:hover { color: var(--text); }

/* Schermata "Righe da correggere": elenca le righe incomplete con il loro
   motivo. Non le corregge (nessuna rotta di modifica per riga esiste), e la
   nota in fondo dice dove si correggono davvero. */
/* 3.65.2 — LA MAPPA PASSAVA DAVANTI A QUESTA FINESTRA. Non e' un caso limite,
   e' aritmetica di z-index, misurata sui file veri:
     .modal (components.css) ............................. z-index: 100
     .leaflet-pane / .leaflet-overlay-pane (vendor) ...... z-index: 400
     .leaflet-shadow/marker/tooltip/popup-pane ........... 500 / 600 / 650 / 700
     .leaflet-control, .leaflet-zoom-box ................. z-index: 800
     .leaflet-top, .leaflet-bottom ....................... z-index: 1000
   Il modale sta su document.body; .rates-mappa e' position:relative con
   z-index AUTO, quindi NON apre un contesto di impilamento e quei 400-1000 di
   Leaflet finiscono a competere direttamente col 100 del modale, nel contesto
   radice. Vince Leaflet: la finestra viene coperta dove passa sopra la mappa.
   Il CSS del pacchetto consegnato (vendor/leaflet, mappa-led.css) non si
   tocca, quindi si corregge da fuori e in due punti:
   1) si chiude Leaflet dentro la sua card. `isolation: isolate` apre un
      contesto di impilamento su .rates-mappa senza cambiare nient'altro: da
      li' in giu' i numeri di Leaflet valgono solo fra loro e non escono piu'
      dalla card. Vale per i controlli e i tooltip, non solo per i pannelli, e
      vale per QUALUNQUE modale dell'app, non solo per questo;
   2) si alza comunque questa finestra sopra il massimo che Leaflet dichiara
      (1000), cosi' regge anche se un domani qualcosa desse alla card un
      contesto di impilamento suo. Il backdrop sta dentro .modal, quindi sale
      con lei; i grafici Chart.js non dichiarano z-index e restano sotto. */
.home-map-card .rates-mappa { isolation: isolate; }
.modal.home-map-fix-modal { z-index: 1500; }
.modal-dialog.home-map-fix-dlg { width: min(940px, 94vw); }
.home-map-fix-body {
  padding: var(--pad-lg); overflow-y: auto; overflow-x: hidden;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.home-map-fix-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.home-map-fix-tab {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 20px;
  color: var(--muted); padding: 5px 12px;
  font-family: inherit; font-size: var(--fs-xs); cursor: pointer;
}
/* Attivo per bordo e colore del testo, non per riempimento: un fondo pieno
   vorrebbe un bianco fisso sopra, e qui i colori fissi non ci vanno. */
.home-map-fix-tab.attivo { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.home-map-fix-tot { font-size: var(--fs-xs); color: var(--muted); }
.home-map-fix-wrap { max-height: 52vh; overflow: auto; }
.home-map-fix-tbl { width: 100%; }
.home-map-fix-track { font-family: var(--mono); font-size: var(--fs-xs); }
.home-map-fix-motivo { font-size: var(--fs-xs); color: var(--accent3); }
.home-map-fix-nota {
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.5;
  border-top: 1px solid var(--border); padding-top: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.home-map-fix-nota strong { color: var(--text); }

@media (max-width: 900px) {
  /* Impilati: qui la riga non ha piu' un'altezza da imporre, quindi il panel
     torna in flusso normale e si allunga quanto serve. */
  .home-map-row { grid-template-columns: 1fr; }
  .home-map-info-slot { position: static; }
  .home-map-info-card { position: static; max-height: 70vh; }
}
.home-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.home-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.home-card-title { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.home-pie-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.home-seg { display: inline-flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.home-seg-btn { background: transparent; border: none; color: var(--muted); padding: 5px 12px; font-family: inherit; font-size: var(--fs-xs); cursor: pointer; }
.home-seg-btn.active { background: var(--accent); color: #fff; }
.home-trend-wrap { position: relative; height: 260px; }
/* 3.88.0 — la Distribuzione: disegno a sinistra, legenda in una COLONNA LARGA
   SEMPRE UGUALE a destra. La legenda di Chart.js si disegnava dentro il canvas
   e si prendeva la larghezza dell'etichetta piu' lunga: cambiando
   raggruppamento (Cliente -> Corriere) la ciambella scivolava di lato e su
   mobile cambiava anche raggio, dentro una card che restava ferma. Con la
   colonna fissa il box del disegno non dipende piu' da cosa c'e' scritto.
   La colonna scorre se le voci sono tante (il massimo e' 10, "Altri"
   compreso): scorrere non sposta niente, crescere si. */
.home-pie-wrap { position: relative; height: 260px; display: flex; align-items: center; gap: 12px; }
.home-pie-canvas-box { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; }
.home-pie-legend { flex: 0 0 150px; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.home-pie-legend-item { display: flex; align-items: center; gap: 6px; min-width: 0; width: 100%;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-xs); color: var(--muted); text-align: left; }
.home-pie-legend-item:hover { color: var(--text); }
.home-pie-legend-item.spenta { opacity: .45; text-decoration: line-through; }
.home-pie-legend-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Schermo stretto: la colonna toglierebbe meta' del disegno. Sotto i 480px la
   legenda passa SOTTO, in una fascia di altezza fissa che scorre — fissa, cosi'
   la card non cambia altezza fra un raggruppamento e l'altro. */
@media (max-width: 480px) {
  .home-pie-wrap { flex-direction: column; align-items: stretch; height: auto; gap: 10px; }
  .home-pie-canvas-box { height: 200px; }
  .home-pie-legend { flex: 0 0 auto; height: 72px; max-height: 72px; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
  .home-pie-legend-item { width: auto; max-width: 100%; }
}
.home-trend-legend { display: flex; gap: 12px; flex-wrap: wrap; }
.home-legend-item { font-size: var(--fs-xs); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.home-legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.home-top-toggle { margin-top: 10px; }

/* 3.64.0 (B1): le regole .home-sit-* della scheda "Situazione" sono state
   rimosse insieme alla scheda. Ripeteva quattro KPI gia' presenti a inizio
   pagina; le sue due metriche esclusive (Marginalita', Clienti) sono ora nella
   riga dei KPI (renderKpi in home/dashboard.js). */

/* Classifiche clienti: 3 colonne affiancate */
.home-top-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.home-top-col-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }

/* Tabelle dettaglio (fatturato reale per cliente / manuali) */
.home-detail-wrap { overflow-x: auto; }
.home-detail-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.home-detail-tbl th { text-align: left; padding: 8px 10px; color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--border); font-weight: 500; }
.home-detail-tbl th.rev-th-num { text-align: right; }
.home-detail-tbl td { padding: 8px 10px; border-top: 1px solid var(--border); color: var(--text); }

/* 3.64.0 — le regole .home-geo-* della scheda "Destinazioni" (cartogramma a
   caselle, tabella province, barre estero) sono state rimosse insieme alla
   scheda, su decisione dell'utente: le destinazioni si leggono solo nella
   mappa e nel suo panel "Dove spediamo" (regole .home-map-* qui sopra). */

/* 3.41.0 — Pre-fattura Poste + conguagli (Riconciliazione, Dev F) */
.reconcil-sessions-header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.reconcil-type-badge {
  display: inline-block; padding: .1rem .5rem; border-radius: 10px;
  font-size: .72rem; font-weight: 600; background: var(--bg); border: 1px solid var(--border);
  color: var(--text-dim); white-space: nowrap;
}
.reconcil-type-badge.pre {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent); color: var(--accent);
}
.reconcil-type-badge.used {
  background: color-mix(in srgb, var(--yellow, #c89b30) 15%, transparent);
  border-color: var(--yellow, #c89b30); color: var(--yellow, #c89b30);
}
.reconcil-pre-banner {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem;
  padding: .5rem .8rem; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-left: 3px solid var(--accent); font-size: .85rem;
}
.home-detail-tbl td.rev-cell-num { text-align: right; font-family: var(--mono); }
.home-detail-tbl td.pos { color: var(--accent2); }
.home-detail-tbl td.neg { color: var(--danger); }

/* Form spedizioni manuali */
.home-manual-hint { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 12px; }
.home-manual-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.home-manual-input { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; color: var(--text); font-size: var(--fs-sm); }

/* Supplemento carburante — TODO #9 (T3): card multi-corriere in Home */
.fuel-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.fuel-badge {
  display: inline-block; padding: .15rem .55rem; border-radius: 10px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
}
.fuel-badge-over {
  color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  background: color-mix(in srgb, var(--danger) 12%, var(--surface2));
}
.fuel-badge-under {
  color: var(--yellow, #c89b30); border-color: color-mix(in srgb, var(--yellow, #c89b30) 50%, var(--border));
  background: color-mix(in srgb, var(--yellow, #c89b30) 12%, var(--surface2));
}
.fuel-badge-ok {
  color: var(--accent2); border-color: color-mix(in srgb, var(--accent2) 45%, var(--border));
  background: color-mix(in srgb, var(--accent2) 10%, var(--surface2));
}
.fuel-badge-na { color: var(--muted); }
.fuel-badge-missing { color: var(--muted); font-style: italic; background: transparent; border-style: dashed; }

/* home-fuel-circles: griglia di 7 cerchi animati, uno per corriere fisico
   (sostituisce la tabella e il vecchio filtro Tutti/Nazionale/Internazionale
   — l'ambito ora si legge sul badge .fuel-scope-badge di ogni card e si
   cambia cliccando sull'oblò). Colore e stato del cerchio riusano le classi
   fuel-badge-over/under/ok/na già calcolate da _fuelStatus(). */
.fuel-circles-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
}
.fuel-circle-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; border-radius: 10px;
}
.fuel-circle-name { font-weight: 600; font-size: var(--fs-sm); color: var(--text); }

/* Badge ambito (Nazionale/Internazionale): unico indicatore, ora che il
   filtro sopra la griglia non c'è più, di quale valore mostra l'oblò.
   Giallo Fuel per Nazionale (ambito di default), neutro per Internazionale
   — niente blu, per restare nella palette del brand. */
.fuel-scope-row { display: flex; align-items: center; gap: 4px; }
.fuel-scope-badge {
  display: inline-block; padding: .1rem .5rem; border-radius: 8px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  border: 1px solid var(--border); white-space: nowrap;
}
.fuel-scope-badge.scope-nat {
  color: #ECA927; border-color: color-mix(in srgb, #ECA927 55%, var(--border));
  background: color-mix(in srgb, #ECA927 14%, var(--surface2));
}
.fuel-scope-badge.scope-intl { color: var(--text); border-color: var(--border); background: var(--surface2); }
.fuel-scope-toggle-hint { font-size: .8rem; color: var(--muted); }

/* Cerchio "a onda": design fornito dall'utente (colore unico #ECA927,
   niente più semaforo verde/giallo/rosso sul cerchio — lo stato resta
   leggibile nel badge testuale sotto). Adattato da un cerchio centrato a
   tutta pagina (position:absolute) a un elemento di griglia normale. */
.fuel-circle {
  position: relative; width: 104px; height: 104px; border-radius: 50%;
  overflow: hidden; background: var(--surface2);
  border: 4px solid #FFFFFF; box-shadow: 0 0 0 4px #ECA927;
  display: flex; align-items: center; justify-content: center;
}
/* Oblò con due varianti (nazionale/internazionale): cliccabile per cambiare
   ambito. Il bagliore extra all'hover è l'unico segnale di interattività
   oltre alla freccia ⇄ accanto al badge — l'onda sotto si "alza" per
   chiunque (vedi :hover su .fuel-circle-fill), cliccabile o no. */
.fuel-circle.fuel-circle-toggle { cursor: pointer; }
.fuel-circle.fuel-circle-toggle:hover {
  box-shadow: 0 0 0 4px #ECA927, 0 0 16px 3px rgba(236, 169, 39, .6);
}
/* Contorno scuro sul testo (non un riquadro pieno: coprirebbe l'onda
   animata dietro, vanificandola). Piu' livelli di text-shadow attorno al
   testo simulano un bordo spesso, leggibile sopra l'onda chiara o
   l'ombra scura del riempimento, lasciando l'animazione visibile. */
.fuel-circle-value {
  position: relative; z-index: 2; font-family: 'Shantell Sans', var(--mono); font-weight: 700;
  font-size: .88rem; color: #fff; text-align: center; line-height: 1.2; padding: 0 8px;
  text-shadow:
    -1.5px -1.5px 0 rgba(0,0,0,.9), 1.5px -1.5px 0 rgba(0,0,0,.9),
    -1.5px  1.5px 0 rgba(0,0,0,.9), 1.5px  1.5px 0 rgba(0,0,0,.9),
    0 0 5px rgba(0,0,0,.7);
}
.fuel-circle-value-main { font-size: .95rem; }
.fuel-circle-value-sub { font-size: .68rem; font-weight: 500; opacity: .9; margin-top: 1px; }
/* Riempimento "a fluido": altezza impostata una volta per render (nessun
   keyframe su height/width). NIENTE overflow:hidden qui (a differenza di
   versioni precedenti): le due strisce d'onda (.fuel-wave) devono poter
   sporgere un po' sopra il proprio bordo superiore per sedersi A CAVALLO
   del pelo del liquido — il ritaglio finale lo fa comunque il cerchio
   esterno (.fuel-circle, overflow:hidden + border-radius:50%). */
.fuel-circle-fill {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  background: #ECA927; box-shadow: inset 0 0 24px 0 rgba(0, 0, 0, .35);
  transition: height .5s ease, transform .35s ease;
}
/* Effetto "liquido che sale" all'hover, ripreso dall'animazione a bottone
   di riferimento (lì un top: -80px -> -120px scopriva più liquido dentro
   overflow:hidden): qui la stessa idea, ma via scaleY ancorato al fondo
   (transform-origin: bottom) invece di un translateY, per non staccare il
   liquido dal fondo del cerchio. Colore invariato (Yellow Fuel #ECA927). */
.fuel-circle:hover .fuel-circle-fill { transform: scaleY(1.35); }
/* Onda "a immagine" invece che "a blob rotante": due tentativi precedenti
   (quadrato arrotondato, poi ellisse che ruota) sono falliti — verificato
   coi colori a piena opacità su un clone ingrandito 4x, il confine restava
   piatto o al massimo una diagonale netta, mai un'onda vera con più
   creste. La tecnica che funziona per davvero (rifatta da
   github.com/coiger/fill-water-animation, verificata qui con lo stesso
   metodo — clone 4x, colori reali, controllo del movimento nel tempo):
   un'immagine SVG con un profilo a onda vera (curve multiple, non una sola
   ellisse), ripetuta in orizzontale (repeat-x) e fatta scorrere lateralmente
   via background-position — quello scorrimento laterale è il moto ondoso,
   non una rotazione. Due strati (chiaro/scuro, velocità e direzione
   diverse) per profondità. La striscia siede A CAVALLO del pelo del
   liquido (metà sopra, metà dentro, via top negativo) cosi' la cresta
   dell'onda sporge leggermente sopra la superficie piatta. */
/* Altezza del riquadro = altezza della tile (background-size), sempre:
   un riquadro più alto della tile lasciava un margine trasparente sotto
   l'immagine (niente repeat verticale, solo repeat-x), che scopriva il
   colore pieno di .fuel-circle-fill sotto — un bordo netto, un'altra
   "riga piatta". Stessa posizione verticale (top/height) per i due
   strati, come richiesto: prima erano a due altezze diverse e quasi non
   si sovrapponevano, sembravano due righe separate invece di un'unica
   onda. Sfasate in orizzontale (il keyframe scuro parte da metà del suo
   ciclo, non da zero) così le due creste non coincidono mai: è quella
   sfalsatura, non un'altezza diversa, a dare l'effetto onda più ricco. */
.fuel-wave {
  position: absolute; left: -10px; right: -10px; top: -5px; height: 10px;
  background-repeat: repeat-x;
}
.fuel-wave.fuel-wave-light {
  background-size: 40px 10px;
  background-image: url(../img/fuel-wave-light.svg);
  opacity: .85;
  animation: fuelWaveSlideLight 3.4s linear infinite;
}
.fuel-wave.fuel-wave-dark {
  background-size: 60px 10px;
  background-image: url(../img/fuel-wave-dark.svg);
  opacity: .8;
  animation: fuelWaveSlideDark 5.6s linear infinite reverse;
}
@keyframes fuelWaveSlideLight { from { background-position-x: 0; } to { background-position-x: 40px; } }
@keyframes fuelWaveSlideDark  { from { background-position-x: 20px; } to { background-position-x: 80px; } }
@media (prefers-reduced-motion: reduce) {
  .fuel-wave { animation: none; }
  .fuel-circle-fill { transition: none; }
}
/* Cerchio statico (fonte = 'non inserito'): niente riempimento, niente onda. */
.fuel-circle.fuel-circle-empty { background: var(--surface2); box-shadow: 0 0 0 4px var(--border); }
.fuel-circle.fuel-circle-empty .fuel-circle-value { color: var(--muted); text-shadow: none; }
.fuel-circle-sub { font-size: var(--fs-xs); color: var(--muted); }
.fuel-circle-meta {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: var(--fs-xs); color: var(--muted); margin-top: 2px;
}
.fuel-circle-item .fuel-row-actions { justify-content: center; margin-top: 4px; }

.fuel-modal-links { display: flex; gap: 14px; flex-wrap: wrap; }
.fuel-modal-links a { color: var(--accent2); font-size: var(--fs-sm); text-decoration: none; }
.fuel-modal-links a:hover { text-decoration: underline; }
.modal-dialog.fuel-dlg { width: min(460px, 92vw); }
.modal-dialog.fuel-hist-dlg { width: min(640px, 92vw); }
.fuel-hist-chart { height: 220px; margin-bottom: 14px; }

/* ============================================================
   M5 — Mobile/PWA, prima passata pragmatica (v3.39.0)
   Additivo, solo @media (max-width: 768px): zero regressioni desktop.
   Copre sidebar/topbar (globali) + Home/Tariffe/Riconciliazione (viste
   piu' usate). Le altre viste ereditano gia' overflow-x:auto sulle
   tabelle e grid auto-fit, quindi restano leggibili senza ulteriori
   interventi in questa prima passata.
   ============================================================ */

/* Hamburger: nascosto su desktop, mostrato solo sotto il breakpoint */
.sidebar-hamburger {
  display: none;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.4rem 0.6rem;
}

@media (max-width: 768px) {
  .sidebar-hamburger { display: inline-flex; }

  /* Sidebar: da colonna fissa a overlay a scomparsa (hamburger la apre) */
  body[data-sidebar="on"] .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    width: 240px;
    box-shadow: 0 0 32px rgba(0,0,0,0.5);
  }
  body[data-sidebar="on"][data-sidebar-mobile-open="1"] .sidebar {
    transform: translateX(0);
  }
  /* Il contenuto non deve mai essere spinto dalla sidebar collassata/aperta:
     su mobile la sidebar e' sempre in overlay, quindi margin-left: 0. */
  body[data-sidebar="on"] .topbar,
  body[data-sidebar="on"] .main,
  body[data-sidebar="on"][data-sidebar-collapsed="1"] .topbar,
  body[data-sidebar="on"][data-sidebar-collapsed="1"] .main {
    margin-left: 0;
  }
  /* Su mobile l'overlay mostra sempre le etichette (niente modalita' "icone soltanto") */
  body[data-sidebar="on"] .sb-label,
  body[data-sidebar="on"] .sb-group-label { display: inline; }
  body[data-sidebar="on"] .sb-item,
  body[data-sidebar="on"] .sb-brand { justify-content: flex-start; padding-left: 16px; padding-right: 16px; }

  /* 3.94.0 — sul telefono la modalita' a sole icone NON esiste: non c'e' il
     passaggio del mouse per riaprirla, e le regole della barra stretta stanno
     tutte dentro `@media (min-width: 769px)` proprio per non arrivare fin
     qui. Non serve compensare niente. */

  /* Topbar piu' compatta: chip data/versione vanno a capo, meno padding */
  .topbar { padding: var(--pad-sm) var(--pad-md); gap: var(--pad-sm); }
  .logo-badge .logo-subtitle { display: none; }
  .tb-meta { order: 3; width: 100%; margin-top: 4px; }
  .tb-right { gap: 0.4rem; }
  .tb-right .btn-solid, .tb-right .btn-ghost { padding: 0.4rem 0.6rem; font-size: var(--fs-xs); }

  /* Filtri/stat cards: una colonna, meno respiro */
  .filters { padding: var(--pad-sm) var(--pad-md); gap: var(--pad-sm); }
  .filter-group { min-width: 0; flex: 1 1 100%; }
  .stats { grid-template-columns: 1fr 1fr; }

  /* Home dashboard: KPI e classifiche clienti a 2 colonne / 1 colonna */
  .home-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .home-top-grid { grid-template-columns: 1fr; }
  .home-filter { padding: 8px 10px; }

  /* Modal: piu' vicino al bordo schermo, meno spreco di spazio */
  .modal-dialog { width: 96vw; max-height: 94vh; }
  .modal-head { padding: var(--pad-sm) var(--pad-md); }
  .settings-body { padding: var(--pad-md); }

  /* Riconciliazione: meno padding, upload zone piu' compatta (la tabella
     preview/righe ha gia' overflow-x:auto, vedi .reconcil-*-tbl-wrap) */
  .reconcil-wrap { padding: 0.9rem; gap: 0.9rem; }
  .reconcil-upload-zone { padding: 1.5rem 1rem; }
  .reconcil-preview-card { padding: 0.9rem 1rem; }
}

/* Backdrop dietro la sidebar mobile aperta (div dedicato, creato da
   sidebar.js — non un ::before per non entrare in conflitto con
   body[data-grid="on"]::before usato altrove per la griglia di sfondo). */
.sb-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 59; /* sotto .sidebar (z-index 60), sopra il resto */
}
.home-manual-num { width: 120px; }

/* ============================================================
   3.68.0 — Restyling riconciliazione (stile preview approvata)
   ============================================================ */

/* Badge anomalia colorati per tipo */
.reconcil-anomalia-badge {
  border: none; cursor: pointer; font-size: .78em; font-weight: 600;
  padding: .18rem .6rem; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--accent3, #F59E0B) 16%, transparent);
  color: var(--accent3, #F59E0B);
}
.reconcil-anomalia-badge.anomalia-ricalcolo {
  background: color-mix(in srgb, var(--danger, #EF4444) 16%, transparent);
  color: var(--danger, #EF4444);
}
.reconcil-anomalia-badge.anomalia-favore {
  background: color-mix(in srgb, var(--accent2, #10B981) 16%, transparent);
  color: var(--accent2, #10B981);
}
.reconcil-anomalia-badge.anomalia-supplementi {
  background: color-mix(in srgb, var(--purple, #A78BFA) 18%, transparent);
  color: var(--purple, #A78BFA);
}
.reconcil-anomalia-badge:hover { filter: brightness(1.15); }

/* Icone azione sulla riga (PDF / segnala / conferma / escludi) */
.reconcil-row-ico {
  background: var(--surface2, #1C2540); border: 1px solid var(--border, #253050);
  color: var(--muted, #64748B); border-radius: 6px; cursor: pointer;
  width: 1.7rem; height: 1.5rem; font-size: .8rem; line-height: 1;
  padding: 0; margin: 0 .08rem; vertical-align: middle;
}
.reconcil-row-ico:hover:not(:disabled) { border-color: var(--accent, #3B82F6); color: var(--text, #E2E8F0); }
.reconcil-row-ico:disabled { opacity: .35; cursor: not-allowed; }
.reconcil-row-ico.ico-ok { color: var(--accent2, #10B981); }
.reconcil-row-ico.ico-danger { color: var(--danger, #EF4444); }
.reconcil-row-ico.ico-warn { color: var(--accent3, #F59E0B); }
.reconcil-row-ico.ico-info { color: var(--accent, #3B82F6); }

/* Blocco "confronto nolo+fuel" nel dettaglio */
.reconcil-base-cmp {
  background: var(--surface2, #1C2540); border-radius: 8px;
  padding: .55rem .75rem; margin: .15rem 0 .45rem; max-width: 24rem;
}
.reconcil-base-cmp-title {
  color: var(--muted, #64748B); font-size: .74rem; letter-spacing: .04em;
  margin-bottom: .3rem; text-transform: uppercase;
}
.reconcil-base-cmp-row { display: flex; justify-content: space-between; gap: 1rem; padding: .08rem 0; }
.reconcil-base-line { margin: .25rem 0; }
.reconcil-base-ricalcolo { color: var(--danger, #EF4444); }
.reconcil-base-choice {
  background: var(--surface2, #1C2540); border-radius: 8px;
  padding: .45rem .75rem; margin: .3rem 0;
}
.delta-ok { color: var(--accent2, #10B981); }

/* Tabella pesi: semantica colori (rilevato vs dichiarato) + cella "vincente" */
.reconcil-cmp-tbl td.peso-su { color: var(--danger, #EF4444); font-weight: 700; }
.reconcil-cmp-tbl td.peso-uguale { color: var(--accent2, #10B981); font-weight: 700; }
.reconcil-cmp-tbl td.peso-giu { color: var(--accent3, #F59E0B); font-weight: 700; }
.reconcil-cmp-tbl td.cmp-hl {
  background: color-mix(in srgb, var(--accent, #3B82F6) 14%, transparent);
  border-radius: 4px;
}

/* FIX bianco-su-bianco: input/select dentro il dettaglio spedizione ereditano
   il tema scuro (prima: sfondo bianco di default + testo chiaro = illeggibili) */
.reconcil-detail input[type="number"],
.reconcil-detail input[type="text"],
.reconcil-detail select {
  background: var(--surface2, #1C2540); color: var(--text, #E2E8F0);
  border: 1px solid var(--border, #253050); border-radius: 6px;
  padding: .15rem .35rem;
}

/* Sezioni della tabella Nostre spedizioni */
.reconcil-section-head { font-weight: 700; margin: .9rem 0 .3rem; font-size: 1.02em; }
.reconcil-section-warn { color: var(--accent3, #F59E0B); }
.reconcil-section-conf { color: var(--accent, #3B82F6); }
.reconcil-section-ok { color: var(--accent2, #10B981); }

/* Dettaglio congelato (spedizione confermata) */
.reconcil-detail-frozen { opacity: .88; }
.reconcil-detail-frozen input:disabled,
.reconcil-detail-frozen select:disabled { opacity: .7; }
.reconcil-frozen-note {
  background: color-mix(in srgb, var(--accent, #3B82F6) 12%, transparent);
  color: var(--accent, #3B82F6); border-radius: 6px;
  padding: .35rem .6rem; font-weight: 600;
}

/* Bottoni conferma/escludi nel dettaglio */
.reconcil-mass-btn.btn-ok { color: var(--accent2, #10B981); border-color: color-mix(in srgb, var(--accent2, #10B981) 45%, transparent); }
.reconcil-mass-btn.btn-danger { color: var(--danger, #EF4444); border-color: color-mix(in srgb, var(--danger, #EF4444) 45%, transparent); }

/* ============================================================
   3.68.1 — Dettaglio spedizione col layout della preview
   ============================================================ */

.reconcil-detail {
  background: var(--bg, #0B0F17);
  border: 1px solid var(--border, #253050);
  border-radius: 10px;
}
.mutlbl { color: var(--muted, #94A3B8); }
.mono { font-family: var(--mono, 'Space Mono', monospace); }

/* striscia info orizzontale */
.reconcil-det-info {
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem;
  font-size: .93em;
}
.reconcil-det-info-item b { color: var(--muted, #64748B); font-weight: 500; }

/* griglia a 3 riquadri */
.reconcil-det-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: .6rem; margin: .1rem 0 .5rem;
}
.reconcil-det-card {
  background: var(--surface2, #1C2540); border-radius: 8px;
  padding: .6rem .75rem; font-size: .95em;
  display: flex; flex-direction: column; gap: .15rem;
}
.reconcil-det-card-title {
  /* 3.68.5 — leggibilità: era .72rem, "non si legge" */
  color: var(--muted, #64748B); font-size: .82rem; letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: .3rem; font-weight: 600;
}
.reconcil-verdict { margin-top: .3rem; font-size: .88em; font-weight: 600; }
.reconcil-verdict.v-shippy { color: var(--accent2, #10B981); }
.reconcil-verdict.v-corr { color: var(--danger, #EF4444); }
.reconcil-base-formula { font-size: 1em; line-height: 1.6; }
.reconcil-choice-lbl {
  display: flex; gap: .35rem; align-items: baseline; cursor: pointer;
  margin: .15rem 0; font-size: .92em;
}
.reconcil-supp-lbl {
  display: flex; gap: .4rem; align-items: center; cursor: pointer; margin: .12rem 0;
}
.reconcil-supp-name { flex: 1; color: var(--muted, #94A3B8); }
.reconcil-addeb-amount { width: 5.2rem; text-align: right; }

/* barra finale col totale e le azioni */
.reconcil-det-footer {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  border-top: 1px solid var(--border, #253050); padding-top: .55rem; margin-top: .2rem;
}
.reconcil-det-eff { font-size: 1.25em; color: var(--accent2, #10B981); font-weight: 700; }

/* pannelli collassabili (costi completi, verifica tariffa, giustificazione) */
.reconcil-det-collapse {
  border: 1px solid var(--border, #253050); border-radius: 8px;
  padding: .35rem .6rem; background: color-mix(in srgb, var(--surface2, #1C2540) 55%, transparent);
}
.reconcil-det-collapse > summary {
  cursor: pointer; color: var(--muted, #94A3B8); font-size: .88em; font-weight: 600;
  list-style: none;
}
.reconcil-det-collapse > summary::before { content: '▸ '; }
.reconcil-det-collapse[open] > summary::before { content: '▾ '; }
.reconcil-det-collapse[open] { padding-bottom: .6rem; }
.reconcil-det-collapse > summary::-webkit-details-marker { display: none; }

/* tabelle spedizioni: ammodernamento righe (stile preview) */
.reconcil-tbl th {
  font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted, #64748B); font-weight: 600;
}
.reconcil-tbl td { padding: .42rem .5rem; }
.reconcil-tbl td.num, .reconcil-tbl td.mono { font-family: var(--mono, 'Space Mono', monospace); }
.reconcil-tbl tbody tr { border-top: 1px solid color-mix(in srgb, var(--border, #253050) 60%, transparent); }
.reconcil-tbl tbody tr:hover { background: color-mix(in srgb, var(--surface2, #1C2540) 55%, transparent); }

/* tabella comparativa pesi/costi: header come da preview */
.reconcil-cmp-tbl th {
  font-size: .66rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted, #64748B);
}
.reconcil-cmp-tbl td { font-family: var(--mono, 'Space Mono', monospace); font-size: .92em; }
.reconcil-cmp-tbl td:first-child { font-family: inherit; }

/* ============================================================
   ASSISTENZA (AS1) — 3.70.0
   Le quattro colonne dell'agenda, le schede task, il dettaglio
   ticket e le tabelle del motore, come nel riferimento visivo
   approvato il 07/08/2026.

   I colori NON sono quelli scritti a mano nella preview: si
   ricavano dalle variabili del tema, perche' theme.js le
   riscrive a runtime e un tema chiaro renderebbe illeggibile
   qualunque #0E1421 fissato qui dentro. Le uniche tinte
   aggiunte sono quelle che la preview usa e la palette
   dell'app non ha (un terzo livello di superficie, il rosa dei
   termini di legge, un grigio piu' chiaro del --muted).
   ============================================================ */

#view-support {
  --sup-surface3: color-mix(in srgb, var(--surface2) 94%, var(--text));
  --sup-sunken: color-mix(in srgb, var(--bg) 75%, var(--surface));
  --sup-muted2: color-mix(in srgb, var(--muted) 65%, var(--text));
  --sup-warn: var(--accent3);
  --sup-ok: var(--accent2);
  --sup-pink: #F472B6;
}

.sup-wrap { max-width: 1240px; margin: 0 auto; padding: var(--pad-lg) var(--pad-lg) 3rem; }

/* ── testata ─────────────────────────────────────────────── */
.sup-head {
  display: flex; align-items: center; gap: var(--pad-md);
  flex-wrap: wrap; padding-bottom: var(--pad-md);
}
.sup-title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: .01em; }
.sup-title-sub { font-size: var(--fs-xs); color: var(--muted); flex-basis: 100%; order: 3; }
.sup-sync {
  margin-left: auto; font-size: var(--fs-xs); color: var(--muted);
  display: flex; align-items: center; gap: var(--pad-xs);
}
.sup-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.sup-pulse-ok { background: var(--sup-ok); }
.sup-pulse-err { background: var(--danger); }
.sup-pulse-idle { background: var(--accent); }
.sup-pulse-off { background: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .sup-pulse-ok, .sup-pulse-idle { animation: sup-pulse 2.4s ease-in-out infinite; }
  @keyframes sup-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}
.sup-head-actions { display: flex; gap: var(--pad-xs); align-items: center; }

/* ── schede ──────────────────────────────────────────────── */
.sup-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--border);
  overflow-x: auto; margin-bottom: var(--pad-lg);
}
.sup-tabs button {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: var(--pad-sm) var(--pad-md); color: var(--muted);
  font: inherit; font-size: var(--fs-sm); white-space: nowrap; cursor: pointer;
}
.sup-tabs button:hover { color: var(--text); }
.sup-tabs button[aria-selected="true"] {
  color: var(--text); border-bottom-color: var(--accent); font-weight: 600;
}
.sup-mini {
  font-family: var(--mono); font-size: var(--fs-xs);
  color: var(--muted); margin-left: var(--pad-xs);
}
.sup-mini-alert { color: var(--danger); font-weight: 700; }

/* ── avvisi e riepilogo di apertura ──────────────────────── */
.sup-avviso, .sup-riepilogo {
  background: var(--sup-sunken); border: 1px solid var(--border);
  border-left: 3px solid var(--sup-warn); border-radius: var(--radius);
  padding: var(--pad-sm) var(--pad-md); font-size: var(--fs-sm);
  color: var(--sup-muted2); margin-bottom: var(--pad-md);
}
.sup-riepilogo { border-left-color: var(--danger); }
.sup-riepilogo-ok { border-left-color: var(--sup-ok); }
.sup-riepilogo strong, .sup-avviso strong { color: var(--text); }

/* ── KPI ─────────────────────────────────────────────────── */
.sup-kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--pad-sm); margin-bottom: var(--pad-lg);
}
.sup-kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--pad-sm) var(--pad-md);
}
.sup-kpi-label {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}
.sup-kpi-value {
  font-size: 1.4rem; font-weight: 700; font-family: var(--mono);
  font-variant-numeric: tabular-nums; margin-top: .1rem;
}
.sup-kpi-value small { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.sup-kpi.alert { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.sup-kpi.alert .sup-kpi-value { color: var(--danger); }
.sup-kpi.amber .sup-kpi-value { color: var(--sup-warn); }
.sup-kpi.green .sup-kpi-value { color: var(--sup-ok); }
.sup-kpi.purple .sup-kpi-value { color: var(--purple); }

/* ── agenda: le quattro colonne ──────────────────────────── */
.sup-agenda {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: var(--pad-md); align-items: start;
}
.sup-col {
  background: var(--sup-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--pad-sm);
}
.sup-col > header {
  display: flex; align-items: center; gap: var(--pad-xs);
  padding: .15rem .25rem var(--pad-sm);
}
.sup-col h2 {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .09em; color: var(--sup-muted2); font-weight: 600;
}
.sup-col-bar { width: 3px; height: 14px; border-radius: 2px; background: var(--muted); flex: none; }
.sup-col-cnt {
  margin-left: auto; font-family: var(--mono);
  font-size: var(--fs-xs); color: var(--muted);
}
.sup-col-vuota {
  font-size: var(--fs-xs); color: var(--muted);
  padding: var(--pad-sm) var(--pad-xs); font-style: italic;
}
.sup-col-scaduto .sup-col-bar { background: var(--danger); }
.sup-col-scaduto h2 { color: color-mix(in srgb, var(--danger) 55%, var(--text)); }
.sup-col-oggi .sup-col-bar { background: var(--sup-warn); }
.sup-col-oggi h2 { color: color-mix(in srgb, var(--sup-warn) 55%, var(--text)); }
.sup-col-settimana .sup-col-bar { background: var(--accent); }
.sup-col-attesa .sup-col-bar { background: var(--purple); }

/* ── scheda task ─────────────────────────────────────────── */
.sup-task {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--pad-sm) var(--pad-md);
  position: relative; margin-bottom: var(--pad-sm);
}
.sup-task::before {
  content: ''; position: absolute; left: 0; top: var(--pad-sm); bottom: var(--pad-sm);
  width: 3px; border-radius: 3px; background: var(--muted);
}
.sup-task-over::before { background: var(--danger); }
.sup-task:hover { background: var(--surface2); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.sup-task-when {
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: .04em; display: flex; align-items: center; gap: var(--pad-xs);
}
.sup-warnico { font-size: .8rem; }
/* E' un <button> per accessibilita' (si apre il ticket da tastiera), ma deve
   leggersi come il titolo che e'. Senza il reset resta col grigio di sistema:
   stessa convenzione di .sup-titem nell'elenco ticket. */
.sup-task-titolo {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0;
  color: inherit; font: inherit;
  font-weight: 600; font-size: var(--fs-sm);
  margin: .2rem 0 .25rem; line-height: 1.35;
}
.sup-task-titolo:hover { text-decoration: underline; }
/* Di QUALE pratica si tratta: numero e oggetto della mail. Il titolo sopra
   dice cosa fare, questa riga su cosa — senza, con cliente e tracking non
   ancora agganciati le schede sono indistinguibili. */
.sup-task-caso {
  display: flex; align-items: baseline; gap: var(--pad-xs);
  width: 100%; text-align: left; background: none; border: 0; padding: 0;
  color: inherit; font: inherit; cursor: pointer; margin-bottom: .15rem;
}
.sup-task-id {
  font-family: var(--mono); font-size: var(--fs-xs);
  color: var(--accent); flex: none;
}
.sup-task-ogg {
  font-size: var(--fs-xs); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sup-task-caso:hover .sup-task-ogg { text-decoration: underline; }
.sup-task-meta { font-size: var(--fs-xs); color: var(--sup-muted2); }
.sup-task-meta b { color: var(--text); font-weight: 600; }
.sup-badges { display: flex; gap: var(--pad-xs); flex-wrap: wrap; margin-top: var(--pad-xs); }
/* `origine` non e' decorazione: e' la frase che spiega perche' questo task
   esiste. Se non si legge, l'utente non si fida della scadenza. */
.sup-task-origine {
  margin-top: var(--pad-xs); font-size: var(--fs-xs); color: var(--muted);
  border-top: 1px dashed var(--border); padding-top: var(--pad-xs);
  display: flex; gap: var(--pad-xs); align-items: baseline;
}
.sup-task-origine b {
  color: var(--purple); font-weight: 600;
  font-family: var(--mono); font-size: var(--fs-xs);
}
.sup-task-acts { display: flex; gap: var(--pad-xs); flex-wrap: wrap; margin-top: var(--pad-sm); }

.sup-w-scaduto { color: color-mix(in srgb, var(--danger) 55%, var(--text)); }
.sup-w-oggi { color: color-mix(in srgb, var(--sup-warn) 55%, var(--text)); }
.sup-w-settimana, .sup-w-attesa, .sup-w-futuro { color: var(--muted); }

/* ── etichette ───────────────────────────────────────────── */
.sup-badge {
  font-size: var(--fs-xs); padding: .08rem .45rem; border-radius: 999px;
  border: 1px solid transparent; font-weight: 600; white-space: nowrap;
}
.sup-badge.b-critica { color: color-mix(in srgb, var(--danger) 50%, var(--text)); border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.sup-badge.b-alta    { color: color-mix(in srgb, var(--sup-warn) 55%, var(--text)); border-color: color-mix(in srgb, var(--sup-warn) 50%, transparent); background: color-mix(in srgb, var(--sup-warn) 12%, transparent); }
.sup-badge.b-media   { color: color-mix(in srgb, var(--accent) 45%, var(--text)); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sup-badge.b-bassa   { color: var(--sup-muted2); border-color: color-mix(in srgb, var(--muted) 50%, transparent); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.sup-badge.b-cat     { color: color-mix(in srgb, var(--purple) 45%, var(--text)); border-color: color-mix(in srgb, var(--purple) 50%, transparent); background: color-mix(in srgb, var(--purple) 12%, transparent); }
.sup-badge.b-cor     { color: color-mix(in srgb, var(--teal) 45%, var(--text)); border-color: color-mix(in srgb, var(--teal) 50%, transparent); background: color-mix(in srgb, var(--teal) 12%, transparent); }
.sup-badge.b-legge   { color: color-mix(in srgb, var(--sup-pink) 45%, var(--text)); border-color: color-mix(in srgb, var(--sup-pink) 50%, transparent); background: color-mix(in srgb, var(--sup-pink) 12%, transparent); }
.sup-badge.b-auto    { color: color-mix(in srgb, var(--sup-ok) 45%, var(--text)); border-color: color-mix(in srgb, var(--sup-ok) 50%, transparent); background: color-mix(in srgb, var(--sup-ok) 12%, transparent); }
.sup-badge.b-manuale { color: color-mix(in srgb, var(--danger) 50%, var(--text)); border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.sup-badge.b-chiusa  { color: var(--muted); border-color: var(--border); background: var(--sup-sunken); }
.sup-badge.b-misto   { color: color-mix(in srgb, var(--sup-warn) 55%, var(--text)); border-color: color-mix(in srgb, var(--sup-warn) 50%, transparent); background: color-mix(in srgb, var(--sup-warn) 12%, transparent); }

/* ── ticket: elenco + dettaglio ──────────────────────────── */
.sup-panes {
  display: grid; grid-template-columns: minmax(280px, 4fr) minmax(380px, 7fr);
  gap: var(--pad-md); align-items: start;
}
.sup-tlist {
  display: flex; flex-direction: column; gap: var(--pad-sm);
  max-height: 78vh; overflow: auto; padding-right: .2rem;
}
.sup-titem {
  width: 100%; text-align: left; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--pad-sm) var(--pad-md); position: relative;
  color: inherit; font: inherit; cursor: pointer;
}
.sup-titem::before {
  content: ''; position: absolute; left: 0; top: var(--pad-sm); bottom: var(--pad-sm);
  width: 3px; border-radius: 3px; background: var(--muted);
}
.sup-titem:hover { background: var(--surface2); }
.sup-titem[aria-current="true"] { border-color: var(--accent); background: var(--surface2); }
.sup-titem-r1 { display: flex; align-items: baseline; gap: var(--pad-sm); }
.sup-titem-cli { font-weight: 600; font-size: var(--fs-sm); }
.sup-qd {
  font-size: var(--fs-xs); color: var(--muted);
  font-family: var(--mono); white-space: nowrap;
}
.sup-titem-r1 .sup-qd { margin-left: auto; }
.sup-titem-ogg {
  font-size: var(--fs-xs); color: var(--sup-muted2); margin-top: .1rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sup-titem-r3 { display: flex; gap: var(--pad-xs); margin-top: var(--pad-xs); flex-wrap: wrap; align-items: center; }

.sup-detail {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--pad-lg);
}
.sup-dhead { border-bottom: 1px solid var(--border); padding-bottom: var(--pad-md); margin-bottom: var(--pad-md); }
.sup-did {
  font-family: var(--mono); font-size: var(--fs-xs);
  color: var(--muted); letter-spacing: .06em;
}
.sup-detail h2 { margin: .15rem 0 var(--pad-sm); font-size: var(--fs-lg); }
.sup-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--pad-sm); margin-top: var(--pad-md);
}
.sup-fact {
  background: var(--sup-sunken); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--pad-xs) var(--pad-sm);
}
.sup-fact-k {
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted);
}
.sup-fact-v { font-size: var(--fs-sm); font-weight: 600; margin-top: .1rem; word-break: break-word; }
.sup-fact-v.mono { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 400; }

/* ── blocchi del dettaglio ───────────────────────────────── */
.sup-block { margin-top: var(--pad-lg); }
.sup-block > h3 {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--sup-muted2); margin-bottom: var(--pad-xs); font-weight: 600;
}
.sup-na {
  background: var(--sup-sunken); border: 1px solid var(--border);
  border-left: 3px solid var(--sup-warn); border-radius: var(--radius);
  padding: var(--pad-sm) var(--pad-md);
}
.sup-na.over { border-left-color: var(--danger); }
.sup-na-t { font-weight: 600; font-size: var(--fs-sm); }
.sup-na-s { font-size: var(--fs-xs); color: var(--muted); margin-top: .2rem; font-family: var(--mono); }
.sup-na-acts { display: flex; gap: var(--pad-xs); margin-top: var(--pad-sm); flex-wrap: wrap; align-items: center; }
.sup-na-altre { margin-top: var(--pad-sm); }

.sup-btn {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .28rem .7rem;
  font: inherit; font-size: var(--fs-xs); color: var(--text);
  cursor: pointer; text-decoration: none; display: inline-block;
}
.sup-btn:hover { background: var(--sup-surface3); }
.sup-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.sup-btn.primary:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); }
.sup-btn.ghost { background: transparent; }
.sup-btn.small { padding: .15rem .5rem; }
.sup-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Selettore di stato della pratica: stessa forma del navigatore dei testi
   (.sup-tpl-nav), classe propria perche' vive in un'altra scheda. */
.sup-seg { display: flex; gap: var(--pad-xs); flex-wrap: wrap; margin-top: var(--pad-sm); }
.sup-seg button {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: .28rem .8rem; font: inherit; font-size: var(--fs-xs);
  color: var(--sup-muted2); cursor: pointer;
}
.sup-seg button[aria-pressed="true"] {
  background: var(--surface2); border-color: var(--accent); color: var(--text);
}
.sup-seg button:disabled { opacity: .45; cursor: not-allowed; }

/* Barra dell'elenco ticket: quante aperte, quante chiuse, e il modo di
   vedere anche queste ultime. */
.sup-tfiltro {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pad-sm); font-size: var(--fs-xs); color: var(--muted);
  padding: 0 .1rem .1rem;
}

/* ── inserimento dei dati della pratica ──────────────────── */
.sup-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--pad-sm); margin-top: var(--pad-sm);
}
.sup-field { display: flex; flex-direction: column; gap: .2rem; font-size: var(--fs-xs); color: var(--muted); }
.sup-field.largo { grid-column: 1 / -1; }
.sup-field input, .sup-field textarea, .sup-field select, .sup-select {
  background: var(--sup-sunken); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .3rem var(--pad-sm);
  color: var(--text); font: inherit; font-size: var(--fs-sm);
}
.sup-field textarea { min-height: 4.5rem; resize: vertical; }
.sup-field input:focus, .sup-field textarea:focus, .sup-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── checklist dei dati mancanti ─────────────────────────── */
.sup-chk { display: flex; flex-direction: column; gap: .3rem; }
.sup-chk-i { display: flex; gap: var(--pad-sm); align-items: baseline; font-size: var(--fs-sm); }
.sup-chk-m { font-family: var(--mono); font-size: var(--fs-xs); }
.sup-chk-i.ok .sup-chk-m { color: var(--sup-ok); }
.sup-chk-i.no .sup-chk-m { color: var(--danger); }
.sup-chk-i.no { color: var(--sup-muted2); }

/* ── bozza di mail ───────────────────────────────────────── */
.sup-mailbox {
  background: var(--sup-sunken); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-top: var(--pad-sm);
}
.sup-mh {
  display: flex; gap: var(--pad-sm); align-items: center;
  padding: var(--pad-xs) var(--pad-md); border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, var(--bg));
  font-size: var(--fs-xs); color: var(--muted);
}
.sup-mh-to { font-family: var(--mono); color: var(--sup-muted2); word-break: break-all; }
.sup-mh-tag { margin-left: auto; }
.sup-mailbox pre {
  padding: var(--pad-md); font-family: var(--mono); font-size: var(--fs-xs);
  line-height: 1.6; white-space: pre-wrap; color: var(--sup-muted2); overflow-x: auto;
}

/* ── cronologia dei messaggi ─────────────────────────────── */
.sup-tl { position: relative; padding-left: var(--pad-lg); }
.sup-tl::before {
  content: ''; position: absolute; left: 3px; top: .4rem; bottom: .4rem;
  width: 1px; background: var(--border);
}
.sup-tl-e { position: relative; padding: .25rem 0 var(--pad-xs); }
.sup-tl-e::before {
  content: ''; position: absolute; left: calc(var(--pad-lg) * -1 + 1.5px); top: .55rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
}
.sup-tl-e.out::before { background: var(--accent); }
.sup-tl-d { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
.sup-tl-t { font-size: var(--fs-sm); }
/* Il corpo dei messaggi contiene dati di clienti terzi: si apre a richiesta,
   non sta aperto per sbaglio davanti a chi passa dietro alla scrivania. */
.sup-msg-corpo {
  margin-top: var(--pad-xs); padding: var(--pad-sm);
  background: var(--sup-sunken); border: 1px solid var(--border);
  border-radius: var(--radius); font-family: var(--mono);
  font-size: var(--fs-xs); line-height: 1.6; white-space: pre-wrap;
  color: var(--sup-muted2); overflow-x: auto;
}

/* ── contenuti generici (motore, corrieri, testi) ────────── */
.sup-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--pad-md) var(--pad-lg);
  margin-bottom: var(--pad-md);
}
.sup-card > h2 { font-size: var(--fs-md); margin-bottom: .2rem; }
.sup-lead { color: var(--sup-muted2); font-size: var(--fs-sm); margin-bottom: var(--pad-md); }
.sup-note {
  font-size: var(--fs-xs); color: var(--muted);
  border-top: 1px solid var(--border); margin-top: var(--pad-md); padding-top: var(--pad-sm);
}
.sup-tight { margin: .3rem 0 0 1.1rem; font-size: var(--fs-sm); color: var(--sup-muted2); }
.sup-tight li { margin-bottom: .22rem; }
.sup-tight b { color: var(--text); }
.sup-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad-md); }
.sup-mono { font-family: var(--mono); font-size: var(--fs-xs); }

.sup-tblwrap { overflow-x: auto; }
.sup-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.sup-table th, .sup-table td {
  text-align: left; padding: var(--pad-xs) var(--pad-sm);
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.sup-table th {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 600; white-space: nowrap;
}
.sup-table tbody tr:hover { background: var(--sup-sunken); }

.sup-flow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--pad-sm); margin-top: var(--pad-sm);
}
.sup-fstep {
  background: var(--sup-sunken); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--pad-sm) var(--pad-md);
}
.sup-fstep-n {
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: .09em; color: var(--purple);
}
.sup-fstep h3 { margin: .2rem 0 .25rem; font-size: var(--fs-sm); }
.sup-fstep p { font-size: var(--fs-xs); color: var(--sup-muted2); line-height: 1.45; }

.sup-tpl-nav { display: flex; gap: var(--pad-xs); flex-wrap: wrap; margin-bottom: var(--pad-md); }
.sup-tpl-nav button {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: .28rem .8rem; font: inherit; font-size: var(--fs-xs);
  color: var(--sup-muted2); cursor: pointer;
}
.sup-tpl-nav button[aria-pressed="true"] {
  background: var(--surface2); border-color: var(--accent); color: var(--text);
}
.sup-tpl-esito { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--pad-sm); }
.sup-trigger {
  background: var(--sup-sunken); border: 1px solid var(--border);
  border-left: 3px solid var(--teal); border-radius: var(--radius);
  padding: var(--pad-sm) var(--pad-md); font-size: var(--fs-xs);
  color: var(--sup-muted2); margin-bottom: var(--pad-sm);
}
.sup-trigger b { color: var(--text); }

/* ── schermi stretti ─────────────────────────────────────── */
@media (max-width: 920px) { .sup-panes { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .sup-split { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .sup-wrap { padding: var(--pad-sm) var(--pad-sm) 2rem; }
  .sup-tlist { max-height: none; }
  .sup-sync { margin-left: 0; flex-basis: 100%; }
}


/* ============================================================
   3.77.0 — Ricerca globale della riconciliazione
   La casella sta in cima alla sezione e cerca in TUTTE le sessioni.
   Stessa grammatica visiva del resto della piattaforma: superficie
   var(--surface), bordo var(--border), raggio var(--radius), accento sul
   focus — come .home-search-input nel cruscotto.
   ============================================================ */

.reconcil-search-block { display: flex; flex-direction: column; gap: .5rem; }

.reconcil-searchbar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}

.reconcil-search-field {
  position: relative; display: flex; align-items: center;
  flex: 1 1 420px; max-width: 620px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  transition: border-color .15s, box-shadow .15s;
}
.reconcil-search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.reconcil-search-ico {
  padding: 0 .1rem 0 .7rem; font-size: .95rem; line-height: 1;
  color: var(--muted, #64748B); flex: none;
}
.reconcil-search-input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: none; outline: none;
  padding: 9px 12px; color: var(--text);
  font-family: inherit; font-size: var(--fs-sm, .9rem);
  text-overflow: ellipsis;
}
/* la crocetta nativa di input[type=search] non segue il tema: via */
.reconcil-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.reconcil-search-spin { padding-right: .7rem; font-size: .85rem; flex: none; }

.reconcil-search-hint {
  font-size: var(--fs-xs, .78rem); color: var(--text-dim, var(--muted));
}

/* Pannello dei risultati: una scheda, non una tendina — resta aperta mentre
   si guarda la sessione sotto. */
.reconcil-search-results {
  background: var(--bg-card, var(--surface));
  border: 1px solid var(--border); border-radius: var(--radius, 8px);
  padding: .5rem .7rem; display: flex; flex-direction: column; gap: .3rem;
  max-height: 46vh; overflow-y: auto;
}
.reconcil-search-head {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding-bottom: .35rem; border-bottom: 1px solid var(--border);
}
.reconcil-search-count { font-size: .85rem; font-weight: 600; }
.reconcil-search-trunc { font-size: var(--fs-xs, .78rem); color: var(--accent3, #F59E0B); }
.reconcil-search-close {
  margin-left: auto; background: transparent; border: none; cursor: pointer;
  color: var(--text-dim, var(--muted)); font-size: .9rem; line-height: 1;
  padding: .2rem .35rem; border-radius: 4px;
}
.reconcil-search-close:hover { background: var(--bg-hover, var(--border)); color: var(--text); }
.reconcil-search-empty {
  margin: .4rem 0; font-size: .85rem; color: var(--text-dim, var(--muted));
}

/* Una spedizione trovata */
.reconcil-hit { border-bottom: 1px solid var(--border); padding: .35rem 0; }
.reconcil-hit:last-child { border-bottom: none; }
.reconcil-hit-row {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .85rem;
}
.reconcil-hit-trk { font-weight: 600; flex: 0 0 auto; }
.reconcil-hit-cli { flex: 1 1 160px; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.reconcil-hit-meta { color: var(--text-dim, var(--muted)); font-size: var(--fs-xs, .78rem); }
.reconcil-hit-tot { font-weight: 700; min-width: 72px; text-align: right; }
.reconcil-hit-n { color: var(--text-dim, var(--muted)); font-size: var(--fs-xs, .78rem); }
.reconcil-hit-toggle {
  background: transparent; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-dim, var(--muted)); cursor: pointer; line-height: 1;
  padding: .15rem .4rem; font-size: .75rem;
}
.reconcil-hit-toggle:hover { color: var(--text); background: var(--bg-hover, var(--border)); }
.reconcil-hit-badge {
  font-size: .74rem; font-weight: 600; padding: .14rem .55rem;
  border-radius: 999px; white-space: nowrap;
}
.reconcil-hit-badge.fatturata {
  background: color-mix(in srgb, var(--accent2, #10B981) 16%, transparent);
  color: var(--accent2, #10B981);
}
.reconcil-hit-badge.mai {
  background: color-mix(in srgb, var(--accent3, #F59E0B) 18%, transparent);
  color: var(--accent3, #F59E0B);
}
.reconcil-hit-occ { padding: .3rem 0 .5rem; }
.reconcil-occ-tbl { font-size: .82rem; }
.reconcil-occ-stato { color: var(--text-dim, var(--muted)); }
.reconcil-occ-stato.conteggiata { color: var(--accent2, #10B981); font-weight: 600; }

/* Storia nel dettaglio riga */
.reconcil-det-storia {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.reconcil-storia-note { font-size: .85rem; }
.reconcil-storia-note.ok { color: var(--accent2, #10B981); }
.reconcil-storia-note.ko { color: var(--accent3, #F59E0B); }

/* Badge anomalia: esito dell'aggancio post-fattura */
.reconcil-anomalia-badge.anomalia-post-ok {
  background: color-mix(in srgb, var(--accent2, #10B981) 16%, transparent);
  color: var(--accent2, #10B981);
}
.reconcil-anomalia-badge.anomalia-post-ko {
  background: color-mix(in srgb, var(--danger, #EF4444) 16%, transparent);
  color: var(--danger, #EF4444);
}

/* 3.78 — reso/riconsegna: nasce da confermare e porta 0 finché non lo
   confermi, quindi ha un colore suo (ciano) e non si confonde né con le
   anomalie di prezzo né con i supplementi post-fattura. */
.reconcil-anomalia-badge.anomalia-reso {
  background: color-mix(in srgb, var(--teal, #14B8A6) 18%, transparent);
  color: var(--teal, #14B8A6);
}

@media (max-width: 700px) {
  .reconcil-search-field { flex-basis: 100%; max-width: none; }
  .reconcil-hit-meta, .reconcil-hit-n { display: none; }
}

/* C3 (3.65.0) — Calculator (sezione id 'preventivo'): wizard a tre passi,
   validazione in riga, compilazione da CAP e peso volumetrico. Porting di
   preview/calculator-preview.html, approvata dall'utente: layout e testi sono
   quelli. Solo variabili di tema, nessun colore fisso — la sezione deve reggere
   tutti e quattro i temi. Il blocco .prev-* della 3.62.0 (form destinazione +
   peso su file gia' scaricati) e' sparito con la sezione che lo usava. */
.prev-wrap {
  display: flex; flex-direction: column; gap: var(--pad-lg);
  max-width: 1080px; margin: 0 auto; padding: var(--pad-lg);
}
.prev-head { display: flex; flex-direction: column; gap: 4px; }
.prev-title { margin: 0; font-size: var(--fs-lg); color: var(--text); }
.prev-sub { margin: 0; font-size: var(--fs-sm); color: var(--muted); max-width: 80ch; }

/* Barra dei passi: dice a che punto si e' e quali sono gia' chiusi. */
.prev-steps { display: flex; gap: var(--pad-sm); flex-wrap: wrap; }
.prev-step {
  flex: 1 1 180px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--pad-sm) var(--pad-md);
  font-size: var(--fs-sm); color: var(--muted);
}
.prev-step b { display: block; color: var(--text); font-size: var(--fs-md); }
.prev-step.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.prev-step.is-active b { color: var(--accent); }
.prev-step.is-done b::after { content: ' ✓'; color: var(--accent2); }

/* Form */
.prev-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--pad-lg);
}
.prev-card-title { font-weight: 700; color: var(--text); }
.prev-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--pad-md); margin-top: var(--pad-md);
}
.prev-grid-stretta { max-width: 240px; }
.prev-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prev-field > label {
  font-size: var(--fs-xs); color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.prev-field input, .prev-field select {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius); padding: 0.4rem 0.55rem;
  font-family: inherit; font-size: var(--fs-sm); width: 100%; min-width: 0;
}
.prev-field.is-error input, .prev-field.is-error select { border-color: var(--danger); }
/* Altezza riservata anche quando il messaggio non c'e': senza, la griglia
   sobbalza a ogni carattere digitato. */
.prev-err { font-size: var(--fs-xs); color: var(--danger); min-height: 1rem; }
.prev-err.prev-avviso { color: var(--accent3); }
.prev-chip {
  display: inline-block; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.1rem 0.6rem; font-size: var(--fs-xs); color: var(--muted);
}
.prev-chip b { color: var(--text); }

/* Compilazione da CAP: un CAP condiviso arriva a 44 comuni, quindi la lista
   scorre dentro il suo riquadro invece di allungare la pagina. */
.prev-cap-sug {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 11rem; overflow-y: auto;
}
.prev-cap-opt {
  background: var(--surface2); border: 1px solid var(--accent); color: var(--text);
  border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); text-align: left;
}
.prev-cap-opt:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }

/* Selettore pacchi/bancali e righe merce */
.prev-mode { display: flex; gap: var(--pad-sm); margin-top: var(--pad-md); flex-wrap: wrap; }
.prev-mode-btn {
  flex: 1 1 150px; background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius); padding: var(--pad-sm) var(--pad-md);
  cursor: pointer; font-family: inherit; font-size: var(--fs-sm); text-align: left;
}
.prev-mode-btn small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.prev-mode-btn.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.prev-rows { display: flex; flex-direction: column; gap: var(--pad-sm); margin-top: var(--pad-md); }
.prev-row {
  display: grid; grid-template-columns: 2.2rem repeat(auto-fit, minmax(105px, 1fr)) 2.2rem;
  gap: var(--pad-sm); align-items: end;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--pad-sm);
}
.prev-row-n { color: var(--muted); font-size: var(--fs-sm); padding-bottom: 0.5rem; }
/* La ✕ sta in una cella con etichetta vuota e la stessa imbottitura degli
   input: la griglia la allinea alle celle dei dati. */
.prev-row-del {
  background: none; border: 1px solid var(--border); color: var(--danger);
  cursor: pointer; border-radius: var(--radius); padding: 0.4rem 0;
  font-size: var(--fs-md); width: 100%;
}
.prev-row-del:disabled { opacity: .45; cursor: not-allowed; }
.prev-add { margin-top: var(--pad-sm); }

/* Peso volumetrico calcolato in riga: il maggiore fra reale e volumetrico si
   evidenzia, perche' e' quello su cui il corriere fattura. */
.prev-vol {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius); padding: 0.4rem 0.55rem;
  font-family: var(--mono); font-size: var(--fs-sm); white-space: nowrap;
}
.prev-vol.is-maggiore { border-color: var(--accent2); color: var(--accent2); font-weight: 700; }
.prev-field input.is-maggiore { border-color: var(--accent2); color: var(--accent2); font-weight: 700; }

/* Navigazione fra i passi */
.prev-nav { display: flex; gap: var(--pad-sm); justify-content: space-between; flex-wrap: wrap; }
.prev-nav button:disabled { opacity: .45; cursor: not-allowed; }

/* Risultati: li riempie il calcolo, e finche' non lo si preme resta vuoto. */
.prev-risultati { display: flex; flex-direction: column; gap: var(--pad-md); }
.prev-res-head {
  display: flex; gap: var(--pad-sm); align-items: baseline; flex-wrap: wrap;
  margin-bottom: var(--pad-sm);
}
.prev-res-ts { color: var(--muted); font-size: var(--fs-sm); }
/* «Superato — ricalcola»: il risultato resta a schermo ma non e' piu' quello
   dei dati sotto. Un banner, non una cancellazione: il prezzo di un attimo fa
   serve ancora a chi e' al telefono. */
.prev-stale {
  background: color-mix(in srgb, var(--accent3) 14%, transparent);
  border: 1px solid var(--accent3); color: var(--accent3);
  border-radius: var(--radius); padding: 0.4rem 0.6rem;
  font-size: var(--fs-sm); margin-bottom: var(--pad-sm);
}
/* Errore in chiaro al posto della tabella: mai una tabella vuota e muta. */
.prev-errore { margin: 0; color: var(--danger); font-size: var(--fs-sm); }

/* Tabella dei prezzi: scorre da sola invece di stringere le colonne. */
.prev-tbl-scroll { overflow-x: auto; }
.prev-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 720px; }
.prev-tbl th, .prev-tbl td {
  text-align: left; padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.prev-tbl th {
  color: var(--muted); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .04em;
}
.prev-tbl tbody tr.is-sel { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.prev-tbl tbody tr.is-clickable { cursor: pointer; }
.prev-prezzo { font-family: var(--mono); white-space: nowrap; }
.prev-noprice { color: var(--accent3); font-size: var(--fs-xs); }
.prev-src {
  font-size: var(--fs-xs); border-radius: 999px; padding: 0.1rem 0.5rem;
  display: inline-block; white-space: nowrap;
}
.prev-src-live {
  background: color-mix(in srgb, var(--accent2) 16%, transparent);
  color: var(--accent2); border: 1px solid var(--accent2);
}
.prev-src-rates {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); border: 1px solid var(--accent);
}

/* Markup: percentuale per riga, risultato accanto al costo d'acquisto. La
   colonna Prezzo resta il costo: il markup non la tocca. */
.prev-mk {
  display: flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem;
  font-size: var(--fs-xs); color: var(--muted);
}
.prev-mk input {
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius); padding: 0.2rem 0.35rem; width: 4.2rem;
  font-family: var(--mono); font-size: var(--fs-xs);
}
.prev-mk-out { color: var(--accent2); font-family: var(--mono); white-space: nowrap; }

/* Possibili costi aggiuntivi: cella cliccabile solo quando c'e' davvero un
   dettaglio da aprire. */
.prev-supp-btn {
  background: none; border: 1px dashed var(--border); color: var(--text);
  border-radius: var(--radius); padding: 0.25rem 0.5rem; cursor: pointer;
  font-size: var(--fs-xs); font-family: inherit; text-align: left;
}
.prev-supp-na { color: var(--muted); font-size: var(--fs-xs); }
.prev-supp-det { background: var(--surface); font-size: var(--fs-sm); }
.prev-supp-det ul { margin: 0.3rem 0; padding-left: 1.1rem; }
.prev-supp-det li { margin-bottom: 0.25rem; }
.prev-supp-cond { color: var(--muted); }
.prev-supp-nota { color: var(--accent3); }
.prev-supp-incluso { color: var(--muted); }
.prev-supp-worst { margin-top: 0.4rem; font-weight: 600; }
.prev-note { margin-top: var(--pad-md); color: var(--muted); font-size: var(--fs-xs); }
.prev-note li { margin-bottom: 0.2rem; }

/* Pannello email Palletways, dentro la tabella sotto la riga scelta. */
.prev-pw-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-family: inherit; font-size: inherit;
  text-decoration: underline;
}
.prev-pw-email {
  width: 100%; min-height: 240px; background: var(--surface2);
  border: 1px solid var(--border); color: var(--text); border-radius: var(--radius);
  padding: 0.6rem; font-family: var(--mono); font-size: var(--fs-xs);
}
.prev-pw-actions {
  display: flex; gap: var(--pad-sm); align-items: center;
  flex-wrap: wrap; margin-top: var(--pad-sm);
}
.prev-pw-actions button:disabled { opacity: .45; cursor: not-allowed; }
.prev-msg { color: var(--accent2); font-size: var(--fs-sm); min-height: 1rem; }
.prev-info {
  background: var(--surface2); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 0.5rem 0.7rem;
  font-size: var(--fs-sm); margin-top: var(--pad-sm);
}

@media (max-width: 640px) {
  .prev-wrap { padding: var(--pad-sm); }
  .prev-row { grid-template-columns: 1fr 1fr; }
}
/* FINE Calculator — scripts/test_preventivo.py controlla SOLO fin qui.
   Prima il test leggeva "dal marker di apertura fino a fine file" e
   pretendeva ovunque il namespace .prev-*: chiunque aggiungesse una sezione
   in coda al file rompeva una suite che parla d'altro (successo il 26/08
   con la sezione referral). Sotto questa riga si scrive liberamente; chi
   aggiunge regole al Calculator le mette SOPRA. */


/* ============================================================
   PRESENTA UN CLIENTE (R1) — 3.78.0
   La tabella dei clienti classificati, il simulatore a due
   colonne e il registro delle presentazioni.

   Stessa grammatica visiva dell'Assistenza: superficie
   var(--surface), bordo var(--border), raggio var(--radius),
   accento sulla scheda scelta. Nessun colore scritto a mano:
   theme.js riscrive le variabili a runtime e un #hex fissato
   qui diventerebbe illeggibile sul tema chiaro. Le classi
   A/B/C/D si distinguono con le tinte che la palette ha gia'
   (--accent2 verde, --accent3 giallo, --danger rosso,
   --muted grigio).
   ============================================================ */

#view-referral {
  --ref-sunken: color-mix(in srgb, var(--bg) 75%, var(--surface));
  --ref-surface3: color-mix(in srgb, var(--surface2) 94%, var(--text));
  --ref-muted2: color-mix(in srgb, var(--muted) 65%, var(--text));
  --ref-ok: var(--accent2);
  --ref-warn: var(--accent3);
}

.ref-wrap { max-width: 1240px; margin: 0 auto; padding: var(--pad-lg) var(--pad-lg) 3rem; }

/* ── testata ─────────────────────────────────────────────── */
.ref-head {
  display: flex; align-items: center; gap: var(--pad-md);
  flex-wrap: wrap; padding-bottom: var(--pad-md);
}
.ref-title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: .01em; }
.ref-title-sub { font-size: var(--fs-xs); color: var(--muted); flex-basis: 100%; order: 3; }
.ref-finestra {
  font-size: var(--fs-xs); color: var(--muted); font-family: var(--mono);
  margin-left: auto;
}
.ref-head-actions { display: flex; gap: var(--pad-xs); align-items: center; }

/* ── schede ──────────────────────────────────────────────── */
.ref-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--border);
  overflow-x: auto; margin-bottom: var(--pad-lg);
}
.ref-tabs button {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: var(--pad-sm) var(--pad-md); color: var(--muted);
  font: inherit; font-size: var(--fs-sm); white-space: nowrap; cursor: pointer;
}
.ref-tabs button:hover { color: var(--text); }
.ref-tabs button[aria-selected="true"] {
  color: var(--text); border-bottom-color: var(--accent); font-weight: 600;
}
.ref-mini {
  font-family: var(--mono); font-size: var(--fs-xs);
  color: var(--muted); margin-left: var(--pad-xs);
}

/* ── avvisi, note, riquadri vuoti ────────────────────────── */
.ref-avviso, .ref-nota {
  background: var(--ref-sunken); border: 1px solid var(--border);
  border-left: 3px solid var(--ref-warn); border-radius: var(--radius);
  padding: var(--pad-sm) var(--pad-md); font-size: var(--fs-sm);
  color: var(--ref-muted2); margin-bottom: var(--pad-md);
}
.ref-avviso-err { border-left-color: var(--danger); }
.ref-avviso-ok { border-left-color: var(--ref-ok); }
.ref-nota { border-left-color: var(--accent); }
.ref-avviso strong, .ref-nota strong { color: var(--text); }
.ref-qd { font-size: var(--fs-xs); color: var(--muted); }
.ref-vuoto {
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius-lg); padding: var(--pad-lg);
  text-align: center;
}
.ref-vuoto-t { font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--pad-xs); }
.ref-vuoto-s {
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.5;
  max-width: 62ch; margin: 0 auto .4rem;
}

/* ── tabella dei clienti ─────────────────────────────────── */
.ref-tblwrap { overflow-x: auto; }
.ref-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.ref-table th, .ref-table td {
  text-align: left; padding: var(--pad-xs) var(--pad-sm);
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.ref-table th {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 600; white-space: nowrap;
}
.ref-table th.num, .ref-table td.num {
  text-align: right; font-family: var(--mono); white-space: nowrap;
}
.ref-row { cursor: pointer; }
.ref-row:hover { background: var(--ref-sunken); }
.ref-row.aperta { background: var(--surface2); }
.ref-cli { font-weight: 600; }

/* ── badge: classi, stati, Ambasciatore ──────────────────── */
.ref-badge {
  display: inline-block; border: 1px solid var(--border);
  border-radius: 999px; padding: .08rem .5rem;
  font-size: var(--fs-xs); white-space: nowrap;
}
.ref-badge.c-a   { color: color-mix(in srgb, var(--ref-ok) 50%, var(--text)); border-color: color-mix(in srgb, var(--ref-ok) 50%, transparent); background: color-mix(in srgb, var(--ref-ok) 12%, transparent); }
.ref-badge.c-b   { color: color-mix(in srgb, var(--ref-warn) 55%, var(--text)); border-color: color-mix(in srgb, var(--ref-warn) 50%, transparent); background: color-mix(in srgb, var(--ref-warn) 12%, transparent); }
.ref-badge.c-c   { color: color-mix(in srgb, var(--danger) 50%, var(--text)); border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.ref-badge.c-d   { color: var(--ref-muted2); border-color: color-mix(in srgb, var(--muted) 50%, transparent); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.ref-badge.c-ins { color: var(--muted); border-color: var(--border); background: var(--ref-sunken); }
.ref-badge.c-amb { color: color-mix(in srgb, var(--purple) 45%, var(--text)); border-color: color-mix(in srgb, var(--purple) 50%, transparent); background: color-mix(in srgb, var(--purple) 12%, transparent); }
.ref-badge.s-proposto  { color: color-mix(in srgb, var(--accent) 45%, var(--text)); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ref-badge.s-attivo    { color: color-mix(in srgb, var(--ref-ok) 50%, var(--text)); border-color: color-mix(in srgb, var(--ref-ok) 50%, transparent); background: color-mix(in srgb, var(--ref-ok) 12%, transparent); }
.ref-badge.s-sospeso   { color: color-mix(in srgb, var(--ref-warn) 55%, var(--text)); border-color: color-mix(in srgb, var(--ref-warn) 50%, transparent); background: color-mix(in srgb, var(--ref-warn) 12%, transparent); }
.ref-badge.s-chiuso    { color: var(--muted); border-color: var(--border); background: var(--ref-sunken); }
.ref-badge.s-rifiutato { color: color-mix(in srgb, var(--danger) 50%, var(--text)); border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); }

.ref-amb { display: flex; align-items: center; gap: var(--pad-xs); flex-wrap: wrap; }

/* ── bottoni ─────────────────────────────────────────────── */
.ref-btn {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .28rem .7rem;
  font: inherit; font-size: var(--fs-xs); color: var(--text);
  cursor: pointer; text-decoration: none; display: inline-block;
}
.ref-btn:hover { background: var(--ref-surface3); }
.ref-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ref-btn.primary:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); }
.ref-btn.ghost { background: transparent; }
.ref-btn.small { padding: .15rem .5rem; }
.ref-btn:disabled { opacity: .45; cursor: not-allowed; }
.ref-acts {
  display: flex; gap: var(--pad-xs); margin-top: var(--pad-sm);
  flex-wrap: wrap; align-items: center;
}
.ref-esito { font-size: var(--fs-xs); color: var(--muted); }

/* ── simulatore ──────────────────────────────────────────── */
.ref-sim {
  margin-top: var(--pad-lg); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--pad-md);
}
.ref-sim-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--pad-sm); flex-wrap: wrap;
}
.ref-sim-head h3 { font-size: var(--fs-sm); font-weight: 600; }
.ref-sim-acts { display: flex; gap: var(--pad-xs); }
.ref-sim-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--pad-sm); margin: var(--pad-sm) 0 var(--pad-md);
}
.ref-sim-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad-md); }
.ref-sim-col {
  background: var(--ref-sunken); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--pad-sm) var(--pad-md);
}
.ref-sim-col h4 {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--ref-muted2); margin-bottom: var(--pad-xs); font-weight: 600;
}
.ref-voce {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--pad-sm); padding: .18rem 0; border-bottom: 1px solid var(--border);
}
.ref-voce:last-child { border-bottom: none; }
.ref-voce-k { font-size: var(--fs-xs); color: var(--muted); }
.ref-voce-v { font-family: var(--mono); font-size: var(--fs-sm); white-space: nowrap; }
/* Il saldo negativo si vede prima di leggerlo: e' il numero per cui il
   programma costa piu' di quanto porta. */
.ref-voce-v.neg { color: var(--danger); font-weight: 600; }

/* ── registro delle presentazioni ────────────────────────── */
.ref-block { margin-top: var(--pad-lg); }
.ref-block > h3 {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--ref-muted2); margin-bottom: var(--pad-xs); font-weight: 600;
}
.ref-seg { display: flex; gap: var(--pad-xs); flex-wrap: wrap; margin-top: var(--pad-sm); }
.ref-seg button {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: .28rem .8rem; font: inherit; font-size: var(--fs-xs);
  color: var(--ref-muted2); cursor: pointer;
}
.ref-seg button[aria-pressed="true"] {
  background: var(--surface2); border-color: var(--accent); color: var(--text);
}
.ref-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--pad-sm); margin-top: var(--pad-sm);
}
.ref-field {
  display: flex; flex-direction: column; gap: .2rem;
  font-size: var(--fs-xs); color: var(--muted);
}
.ref-field.largo { grid-column: 1 / -1; }
.ref-field input, .ref-field textarea, .ref-field select, .ref-select {
  background: var(--ref-sunken); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .3rem var(--pad-sm);
  color: var(--text); font: inherit; font-size: var(--fs-sm);
}
.ref-field textarea { min-height: 3rem; resize: vertical; }
.ref-field input:focus, .ref-field textarea:focus, .ref-select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.ref-hint {
  font-size: var(--fs-xs); color: var(--muted);
  margin-top: var(--pad-xs); min-height: 1rem;
}
.ref-hint.warn { color: color-mix(in srgb, var(--ref-warn) 55%, var(--text)); }

.ref-pres {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border); border-radius: var(--radius);
  padding: var(--pad-sm) var(--pad-md); margin-top: var(--pad-sm);
}
.ref-pres-proposto { border-left-color: var(--accent); }
.ref-pres-attivo { border-left-color: var(--ref-ok); }
.ref-pres-sospeso { border-left-color: var(--ref-warn); }
.ref-pres-rifiutato { border-left-color: var(--danger); }
.ref-pres-r1 {
  display: flex; align-items: center; gap: var(--pad-xs);
  flex-wrap: wrap; font-size: var(--fs-sm);
}
.ref-pres-r1 .ref-qd { margin-left: auto; font-family: var(--mono); }
.ref-pres-r2 { font-size: var(--fs-xs); color: var(--muted); margin-top: .2rem; }
.ref-freccia { color: var(--muted); }
/* Gli avvisi salvati sulla presentazione: informativi, tranne «era gia'
   cliente», l'unico che puo' far pagare un premio su fatturato che c'era gia'. */
.ref-avv { font-size: var(--fs-xs); color: var(--ref-muted2); margin-top: .25rem; }
.ref-avv::before { content: '▸ '; color: var(--muted); }
.ref-avv.grave { color: var(--danger); font-weight: 600; }

/* ── schermi stretti ─────────────────────────────────────── */
@media (max-width: 820px) { .ref-sim-cols { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ref-wrap { padding: var(--pad-sm) var(--pad-sm) 2rem; }
  .ref-finestra { margin-left: 0; flex-basis: 100%; }
}

/* ── scheda Crediti: liquidazioni trimestrali ─────────────
   Aggiunte della Fase 4. Stesse variabili della sezione
   (definite su #view-referral): nessun colore scritto a
   mano, altrimenti sul tema chiaro diventa illeggibile.
   ========================================================= */

/* ── testata: trimestre e calcolo ────────────────────────── */
.ref-liq-testata { margin-top: 0; }
.ref-liq-barra {
  display: flex; align-items: flex-end; gap: var(--pad-sm);
  flex-wrap: wrap; margin: var(--pad-sm) 0 var(--pad-xs);
}
.ref-liq-barra .ref-field { min-width: 16rem; }

/* Il risultato dell'ultimo calcolo: le righe SALTATE sono la parte che
   spiega perché un totale non si è mosso, quindi restano a video finché
   non le si chiude. */
.ref-liq-esito { border-left-color: var(--accent); }
.ref-liq-elenco {
  margin: .2rem 0 .2rem 1.1rem; padding: 0;
  font-size: var(--fs-xs); color: var(--ref-muted2); line-height: 1.6;
}
.ref-liq-esito .ref-acts { margin-top: var(--pad-xs); }

/* ── banner del budget ───────────────────────────────────── */
.ref-liq-budget {
  margin-top: var(--pad-md); padding: var(--pad-sm) var(--pad-md);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--ref-ok); border-radius: var(--radius);
}
.ref-liq-budget-r1 {
  font-size: var(--fs-md); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ref-liq-budget-r2 {
  font-size: var(--fs-xs); color: var(--muted);
  line-height: 1.5; margin-top: .25rem;
}
/* Sopra budget: non blocca niente, ma non deve poter passare inosservato. */
.ref-liq-budget.sopra {
  border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}
.ref-liq-budget.sopra .ref-liq-budget-r1 { color: var(--danger); }
.ref-liq-budget.sopra .ref-liq-budget-r2 {
  color: color-mix(in srgb, var(--danger) 45%, var(--text));
}

/* ── tabella per presentatore ────────────────────────────── */
.ref-liq-table { margin-top: var(--pad-md); }
.ref-liq-table .ref-acts { margin-top: 0; flex-wrap: nowrap; }
/* Il totale è il numero che finisce in fattura: è l'unico in grassetto. */
.ref-liq-tot { font-weight: 600; color: var(--text); }
/* Il riporto in uscita è premio tagliato dal tetto: rinviato, non perso. */
.ref-liq-riporto { color: color-mix(in srgb, var(--ref-warn) 60%, var(--text)); }

.ref-badge.l-bozza      { color: var(--muted); border-color: var(--border); background: var(--ref-sunken); }
.ref-badge.l-confermata { color: color-mix(in srgb, var(--accent) 45%, var(--text)); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ref-badge.l-applicata  { color: color-mix(in srgb, var(--ref-ok) 50%, var(--text)); border-color: color-mix(in srgb, var(--ref-ok) 50%, transparent); background: color-mix(in srgb, var(--ref-ok) 12%, transparent); }
.ref-badge.l-sospesa    { color: color-mix(in srgb, var(--ref-warn) 55%, var(--text)); border-color: color-mix(in srgb, var(--ref-warn) 50%, transparent); background: color-mix(in srgb, var(--ref-warn) 12%, transparent); }

/* ── riga espansa: il dettaglio per presentato ───────────── */
.ref-liq-detrow > .ref-liq-det {
  background: var(--ref-sunken); padding: var(--pad-sm) var(--pad-md);
}
.ref-liq-det .ref-qd { margin-top: .3rem; }
.ref-liq-sub { font-size: var(--fs-xs); background: var(--surface); }
.ref-liq-sub th, .ref-liq-sub td { padding: .2rem var(--pad-xs); }
.ref-liq-sub tr:last-child td { border-bottom: none; }

.ref-liq-note { margin-top: var(--pad-md); }

@media (max-width: 640px) {
  .ref-liq-barra .ref-field { min-width: 0; width: 100%; }
}

/* 3.83.0 — tab Anagrafica clienti */
.anag-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.anag-table th { text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; opacity: .65; padding: 4px 8px; }
.anag-table td { padding: 4px 8px; vertical-align: top; }
.anag-nome { width: 100%; min-width: 220px; }
.anag-alias { width: 100%; min-width: 260px; resize: vertical; font: inherit; }
.anag-int { text-align: center; }
.anag-del { font-size: 1.05rem; line-height: 1; }
.anag-actions { display: flex; gap: 10px; margin-top: 12px; }
.anag-empty { opacity: .7; font-size: .85rem; margin-top: 10px; }