:root {
  color-scheme: light;
  /* "Siamo su un telefono?": la soglia sta qui e basta, e la legge
     `core/telefono.js`. Vale 1 dentro la media query dei 700px. */
  --telefono: 0;
  --content-max-width: 2200px;
  --ui-font-scale: 1;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-size: calc(16px * var(--ui-font-scale));
  color: var(--text);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
input, select, textarea, button { font: inherit; }

.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.sidebar {
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Segue lo scorrimento: nelle pagine lunghe restava in cima al documento, e
     per cambiare voce di menu bisognava risalire tutta la pagina.
     `align-self: start` non e' decorativo: in una griglia l'elemento viene
     stirato per tutta l'altezza della riga, e uno sticky alto quanto cio' che
     dovrebbe scorrere non si stacca mai. */
  position: sticky;
  top: 0;
  align-self: start;
  /* Alta **quanto lo schermo**, non quanto il suo contenuto: il fondo blu deve
     arrivare in basso, e il piede (stato e versione) ci si appoggia con il
     `margin-top: auto` che ha gia'. Con `max-height` la barra finiva dove
     finivano le voci di menu, lasciando il bianco sotto. */
  height: 100vh;
  overflow-y: auto;
}

.logo { display: flex; align-items: center; padding: 2px 4px 6px; }
/* Variante chiara: sulla barra scura quella normale sparirebbe, perche' "Car"
   e' blu notte. I due file li produce marchio/prepara.py dal PNG. */
/* **Due tetti, nessuna misura imposta.** La regola era `width: 176px`, e con
   marchi di forma diversa dava pesi diversi: CarBi e' 3,11:1 e Pubblicauto
   4,31:1, quindi alla stessa larghezza uscivano alti 57px e 41px — misurati.
   In una barra laterale il peso di un logotipo lo fa l'altezza.

   Si scrive con `max-height` e `max-width` e **non** con `height` fissa: con
   un'altezza imposta e la larghezza tagliata dal tetto, l'immagine si **stira**
   invece di rimpicciolirsi. Visto misurando: il marchio della console usciva
   a proporzione 3,86 contro 3,11. Con i due tetti e le misure `auto` il
   browser la scala mantenendo la forma, e si ferma sul vincolo che scatta
   prima.

   56,5px e' l'altezza che il gestionale ha sempre avuto (176 x 289/900): il
   suo marchio non si sposta di un pixel. */
.logo__img {
  width: auto;
  height: auto;
  max-height: calc(56.5px * var(--ui-font-scale));
  max-width: 100%;
}

/* La barra laterale sul telefono: un pannello che entra da sinistra
   (`core/menu-mobile.js`). Qui c'e' solo cio' che vale **ovunque**, cioe'
   spenti: sul computer i due elementi stanno nel documento e non disegnano
   niente. Si accendono solo nella media query dei 700px, quindi sopra quella
   misura non si applica una sola dichiarazione — ed e' la garanzia che il
   gestionale da scrivania non possa cambiare di un pixel. */
.menu-telefono { display: none; }
.velo-menu { display: none; }
.filtri-apri { display: none; }
/* Impilata solo sotto i 700px: la classe la mette `core/tabelle-telefono.js`,
   ma qui sopra la tabella resta una tabella. */

.nav-block { display: flex; flex-direction: column; gap: 8px; }

.sidebar__select {
  color: var(--sidebar-text);
  padding: 8px 10px;
  font-size: calc(13px * var(--ui-font-scale));
}

.nav { display: flex; flex-direction: column; gap: 6px; }
.nav__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: calc(14px * var(--ui-font-scale));
  line-height: 1.2;
  border: 1px solid transparent;
  background: transparent;
}

.nav-group {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.nav__item--toggle {
  width: 100%;
  justify-content: flex-start;
  cursor: pointer;
}
.nav__item--toggle .nav__caret {
  margin-left: auto;
  transition: transform 0.15s ease;
}
.nav-group.is-open .nav__item--toggle .nav__caret {
  transform: rotate(180deg);
}
.nav-sub {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.nav-group.is-open .nav-sub { display: flex; }
.nav-sub__item {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px 8px 40px;
  border: 1px solid transparent;
  font-size: calc(13px * var(--ui-font-scale));
}

.contract-checkbox-field,
.quote-checkbox-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  align-self: end;
  padding-bottom: 10px;
}
.contract-checkbox-field input[type="checkbox"],
.quote-checkbox-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #2563eb;
}

.nav__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
}
.nav__icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar__footer { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sidebar__version {
  font-size: calc(11px * var(--ui-font-scale));
  color: rgba(255, 255, 255, .45);
  letter-spacing: .02em;
  cursor: default;
}

.main {
  padding: 18px 20px 32px;
  /* **La riga che fa stare la pagina nello schermo**, a qualunque larghezza.
     `.main` e' una cella di griglia, e una cella ha `min-width: auto`: si
     rifiuta di scendere sotto la larghezza del suo contenuto. Con una tabella
     larga dentro era la **pagina intera** a scorrere di lato, e
     l'`overflow-x: auto` del `.table-wrapper` non serviva a niente perche' il
     contenitore si allargava insieme alla tabella. Adesso scorre la tabella
     dentro il suo riquadro, che e' quello che deve fare.

     Misurato: dashboard da 1316 a 1024 su uno schermo da 1024, e da 1048 a
     390 su un telefono. E' la stessa regola di `.app-topbar__nav`, delle
     pagine documento e delle celle con un layout dentro. */
  min-width: 0;
}

.main > .topbar,
.main > .section {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.topbar h1 {
  margin: 4px 0 0;
  font-size: calc(clamp(1.45rem, 1.05rem + 0.9vw, 2rem) * var(--ui-font-scale));
}
.topbar__meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* Firma e pulsante dell'utente: sul computer non sono una scatola —
   `contents` li lascia figli della striscia, esattamente com'erano. Sul
   telefono diventano un elemento solo, cosi' il capo non cade fra i due.
   Sta **qui e non accanto a `.powered`**: la regola del telefono ha la stessa
   specificita', e dichiarandola piu' sotto nel foglio vincerebbe lei — il
   capo tornerebbe a cadere in mezzo senza che niente lo dica. */
.topbar__firma-account { display: contents; }
.meta {
  background: #fff;
  border: 1px solid var(--border);
  min-width: 98px;
  text-align: center;
}
.alerts-bell {
  position: relative;
  display: inline-flex;
}
.alerts-bell__btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.alerts-bell__btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.alerts-bell__btn:hover {
  border-color: #93c5fd;
  color: var(--accent);
}
.alerts-bell__dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--danger);
}
.alerts-bell__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(380px, 80vw);
  border: 1px solid var(--border);
  background: #fff;
  z-index: 40;
}
.alerts-bell__panel-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.alerts-bell__list {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow: auto;
}
.alerts-bell__item {
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f7;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.alerts-bell__item:last-child {
  border-bottom: none;
}
.alerts-bell__item:hover {
  background: #f8fafc;
}
.alerts-bell__item-title {
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 700;
  color: var(--text);
}
.alerts-bell__item-text {
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--muted);
}
.alerts-bell__item-date {
  font-size: calc(12px * var(--ui-font-scale));
  color: #1d4ed8;
  font-weight: 700;
}
.alerts-bell__empty {
  margin: 0;
  padding: 14px 12px;
  color: var(--muted);
  font-size: calc(13px * var(--ui-font-scale));
}

.section { margin-bottom: 16px; }
.section__header { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.actions-inline { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.section h2 { margin: 4px 0 0; font-size: calc(1.05rem * var(--ui-font-scale)); }

.grid { display: grid; gap: 14px; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) {
  .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .metrics-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
/* I numeri del gruppo hanno una casella in piu' della dashboard — le auto
   consegnate — e i cinque stati vanno letti **su una riga sola**: spezzati
   fra due righe si perde il filo di come si muove un'auto, da disponibile a
   restituita. Scende poi con gli stessi passi della griglia a quattro. */
.metrics-grid--cinque { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1400px) {
  .metrics-grid--cinque { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .metrics-grid--cinque { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .metrics-grid--cinque { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .metrics-grid--cinque { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
.grid.columns { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.grid.two-columns { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
@media (max-width: 700px) {
  /* Con `auto-fit` a 500px nascono due colonne da 209: ci stanno, ma dentro
     una c'e' un `<select>` con un'opzione lunga che tiene 269px di suo, e in
     un'altra pagina un pulsante che non va a capo. Fuori da `.form` i
     controlli non prendono il `width: 100%` che altrove li fa stare nella
     cella, e una cella di griglia ha `min-width: auto`: a scorrere di lato
     era la pagina intera (autoscout-bridge +23, settings-vehicle-photos +14).
     Misurato su 23 pagine che usano questa griglia. */
  .grid.two-columns > * { min-width: 0; }
  .grid.two-columns select,
  .grid.two-columns input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .grid.two-columns .btn { white-space: normal; }
}
.grid.settings-cards-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 8px;
  align-items: stretch;
}
.grid.settings-cards-grid > .card {
  min-width: 0;
}

.checkbox-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}

.checkbox-card span {
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 700;
  color: var(--text);
}

.checkbox-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #2563eb;
}

.archive-manager-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.9fr);
  gap: 16px;
  align-items: start;
}

.archive-manager-panel {
  min-width: 0;
}

.archive-manager-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.archive-manager-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.archive-manager-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: #fff;
}

.archive-manager-column__head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: #f8fafc;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 700;
}

.archive-manager-list {
  min-height: 400px;
  max-height: 540px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}

.archive-manager-item {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  background: #fff;
  text-align: left;
  color: var(--text);
  cursor: pointer;
}

.archive-manager-item:hover {
  border-color: rgba(37, 99, 235, 0.2);
  background: #f8fbff;
}

.archive-manager-item.is-active {
  border-color: rgba(37, 99, 235, 0.38);
  background: #eef4ff;
}

.archive-manager-item strong {
  display: block;
  font-size: calc(13px * var(--ui-font-scale));
  line-height: 1.3;
}

.archive-manager-item span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  line-height: 1.35;
}

.archive-manager-empty {
  padding: 14px 12px;
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
}

.archive-manager-hint {
  margin: 12px 0 0;
}

.archive-manager-meta-grid {
  margin-top: 6px;
}

@media (max-width: 1180px) {
  .archive-manager-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .archive-manager-columns {
    grid-template-columns: 1fr;
  }

  .archive-manager-list {
    min-height: 220px;
    max-height: 320px;
  }
}
.graphics-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}
.graphics-setting-card {
  display: grid;
  gap: 14px;
}
.graphics-settings-footer {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.graphics-setting-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #c7d2fe;
  background: #eef4ff;
  color: #1e3a8a;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.graphics-setting-body {
  display: grid;
  gap: 12px;
}
.graphics-setting-range-row {
  display: grid;
  gap: 10px;
}
.graphics-setting-label {
  font-weight: 700;
  color: var(--text);
}
.graphics-setting-range {
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
}
.graphics-setting-labels {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}
.graphics-setting-preview {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.graphics-setting-preview strong {
  color: var(--text);
}
.graphics-setting-status {
  margin: 0;
}
.graphics-setting-status[data-state="saving"] {
  color: #1d4ed8;
}
.graphics-setting-status[data-state="saved"] {
  color: #166534;
}
.graphics-setting-status[data-state="error"] {
  color: #b91c1c;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
}

.card h3 { margin: 6px 0; font-size: calc(1rem * var(--ui-font-scale)); letter-spacing: -0.015em; }

/* Le caselle della dashboard portano da qualche parte: devono dirlo. Sono
   ancore, quindi il colore del testo va riportato — un <a> lo eredita azzurro
   e sottolineato, e le caselle diventerebbero un elenco di link. */
a.card.metric {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
a.card.metric:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(9, 14, 26, 0.12);
}
a.card.metric:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
/* Una casella senza sorgente dati non finge di essere cliccabile. */
.metric--senza-dati { opacity: .72; }
.card h4 { margin: 4px 0 12px; }
.muted { color: var(--muted); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pill);
  color: #1e3a8a;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #c7d2fe;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(7px * var(--ui-font-scale)) calc(11px * var(--ui-font-scale));
  min-height: calc(34px * var(--ui-font-scale));
  border: 1px solid transparent;
  font-size: calc(12px * var(--ui-font-scale));
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
}
.btn.primary {
  color: #fff;
}
.btn.primary:hover { transform: translateY(-1px); }
.btn.success {
  color: #fff;
}
.btn.success:hover { transform: translateY(-1px); }
.btn.danger {
  color: #fff;
}
.btn.danger:hover { transform: translateY(-1px); }
.btn.ghost {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
.btn:active { box-shadow: none; }
.btn-sm {
  padding: calc(6px * var(--ui-font-scale)) calc(10px * var(--ui-font-scale));
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 700;
  min-height: calc(32px * var(--ui-font-scale));
}

.form { display: flex; flex-direction: column; gap: 10px; }
.form label { font-size: calc(12px * var(--ui-font-scale)); color: var(--text); letter-spacing: -0.01em; }
.form input, .form select {
  width: 100%;
  margin-top: 6px;
  padding: calc(8px * var(--ui-font-scale)) calc(10px * var(--ui-font-scale));
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: calc(13px * var(--ui-font-scale));
  line-height: 1.35;
  min-height: calc(36px * var(--ui-font-scale));
  box-shadow: none;
}
.form textarea {
  width: 100%;
  margin-top: 6px;
  padding: calc(9px * var(--ui-font-scale)) calc(10px * var(--ui-font-scale));
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: calc(13px * var(--ui-font-scale));
  font-family: inherit;
  resize: vertical;
  line-height: 1.5;
  min-height: calc(88px * var(--ui-font-scale));
  box-shadow: none;
}
.form input:focus,
.form select:focus,
.form textarea:focus,
.customer-search-input:focus,
.filter-field input:focus,
.filter-field select:focus,
.finance-inline-commission:focus {
  outline: none;
  border-color: #7aa9f8;
  box-shadow: 0 0 0 4px rgba(15, 95, 215, 0.11);
}
.form select {
  appearance: none;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:
    calc(100% - calc(18px * var(--ui-font-scale))) calc(50% - 1px),
    calc(100% - calc(12px * var(--ui-font-scale))) calc(50% - 1px);
  background-size:
    calc(6px * var(--ui-font-scale)) calc(6px * var(--ui-font-scale)),
    calc(6px * var(--ui-font-scale)) calc(6px * var(--ui-font-scale));
  background-repeat: no-repeat;
  padding-right: calc(34px * var(--ui-font-scale));
}
.form [data-load-when="acquisto"] select,
.form [data-load-when="mandato"] select,
.form [data-purchase-vat-manager] select {
  background-color: #eef7ff;
  border-color: #bfdcff;
}
.form [data-load-when="acquisto"] select:focus,
.form [data-load-when="mandato"] select:focus,
.form [data-purchase-vat-manager] select:focus {
  border-color: #7fb2ff;
  box-shadow: 0 0 0 3px rgba(125, 177, 255, 0.22);
}
.form [data-purchase-vat-add] {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
  min-width: 44px;
}
.form [data-purchase-vat-add]:hover {
  background: #15803d;
  transform: translateY(-1px);
}
.form__hint { font-size: calc(12px * var(--ui-font-scale)); margin: 4px 0 0; }
.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  overflow: hidden;
  width: fit-content;
}
.segmented__item {
  padding: 8px 14px;
  border: none;
  background: #fff;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.segmented__item.is-active {
  background: var(--accent);
  color: #fff;
}
.customer-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.customer-search-card { padding: 16px; }
.customer-search-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  padding: calc(9px * var(--ui-font-scale)) calc(10px * var(--ui-font-scale));
  font-size: calc(13px * var(--ui-font-scale));
  line-height: 1.35;
  min-height: calc(38px * var(--ui-font-scale));
}
.customer-form-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contract-form-layout,
.quote-form-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contract-form-shell,
.quote-form-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.9fr);
  gap: 16px;
  align-items: start;
}
.contract-summary-rail,
.quote-summary-rail {
  position: sticky;
  top: 16px;
}
.contract-summary-card,
.quote-summary-card {
  gap: 14px;
}
.contract-summary-list,
.quote-summary-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contract-summary-row,
.quote-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: calc(13px * var(--ui-font-scale));
}
.contract-summary-row strong,
.quote-summary-row strong {
  text-align: right;
  font-size: calc(14px * var(--ui-font-scale));
}
/* "Di cui imponibile" e "IVA sul veicolo" **scompongono** il prezzo di
   vendita, non si sommano al totale: rientrate e smorzate si leggono come
   sottovoci di quello che sta sopra, invece che come due addendi in piu'.
   E' la stessa regola dei supplementi in statistiche (6.30-bis). */
.contract-summary-row--dettaglio {
  padding-left: 12px;
  border-bottom-style: dashed;
  color: var(--muted, #6b7280);
}
.contract-summary-row--dettaglio strong { font-weight: 600; }

.contract-summary-row--total,
.contract-summary-row--balance,
.quote-summary-row--total,
.quote-summary-row--balance {
  padding-top: 4px;
  font-weight: 800;
}
.contract-summary-row--total strong,
.contract-summary-row--balance strong,
.quote-summary-row--total strong,
.quote-summary-row--balance strong {
  font-size: calc(16px * var(--ui-font-scale));
}
.contract-summary-inputs,
.quote-summary-inputs {
  margin-top: 4px;
}
.contract-services-list,
.quote-services-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contract-service-row {
  display: grid;
  /* Descrizione, importo IVA inclusa, aliquota, "Rimuovi". */
  grid-template-columns: minmax(0, 1.5fr) minmax(160px, 0.8fr) minmax(150px, 0.7fr) auto;
  gap: 10px;
  /* In alto, non in fondo: sotto l'importo c'e' la riga dello scorporo, e
     allineando al fondo le altre etichette scendevano di una riga. */
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
/* Imponibile e IVA scorporati dall'importo, sotto il campo: si scrive il
   lordo, il resto si legge. */
.contract-service-row__scorporo {
  display: block;
  margin-top: calc(4px * var(--ui-font-scale));
  font-size: calc(11.5px * var(--ui-font-scale));
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.contract-service-row__remove {
  align-self: center;
}
.contract-service-row--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  color: var(--muted);
  border-style: dashed;
  background: #f8fafc;
}
.customer-form-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contract-form-section,
.quote-form-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.customer-form-section__title {
  margin: 0;
  font-size: calc(12px * var(--ui-font-scale));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 800;
}
.contract-form-section__title,
.quote-form-section__title {
  margin: 0;
  font-size: calc(12px * var(--ui-font-scale));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 800;
}
/* Sotto-titolo dentro una sezione (es. "Indirizzo" / "Sede legale"
   nei dati di fatturazione): piu' leggero del titolo di sezione. */
.customer-form-subtitle {
  margin: 2px 0 0;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 700;
  color: var(--text);
}
.grid.customer-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
/* Riga con un solo campo (es. la tendina "Tipo"): non deve stirarsi
   per tutta la larghezza della sezione. */
.grid.customer-form-grid.customer-form-grid--narrow {
  grid-template-columns: minmax(220px, 320px);
}
.grid.contract-form-grid,
.grid.quote-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.contract-form-grid__wide,
.quote-form-grid__wide {
  grid-column: 1 / -1;
}
.contract-transfer-price-grid,
.quote-transfer-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.customer-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.customer-form-note {
  margin: 0;
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
}
.customer-name-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.customer-name-cell strong {
  font-size: calc(14px * var(--ui-font-scale));
  color: var(--text);
}
.customer-row-meta {
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
}
/* Riga della lista aperta nell'editor qui sotto. */
#customers-table tr.is-selected {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
#customers-table tr.is-selected .customer-name-cell strong {
  color: var(--accent);
}
.customer-detail-card {
  padding: 16px;
}
.customer-detail-card .detail-grid {
  margin-top: 8px;
}
.form-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 6px;
}
.form-tab {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  background: #fff;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.form-tab.is-active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}
.form-tab-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
}
.form-tab-panel.is-active { display: flex; }
.vehicle-info-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vehicle-info-section {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vehicle-info-section__title {
  margin: 0;
  font-size: calc(12px * var(--ui-font-scale));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 800;
}
.vehicle-info-section .grid {
  gap: 10px;
}
.grid.vehicle-info-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.vehicle-info-note {
  margin: 0;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--muted);
}
.field-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 600;
  font-size: calc(14px * var(--ui-font-scale));
  color: var(--text);
}
.field-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
}
.field-checkbox span {
  line-height: 1.3;
}
.accessories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}
.accessory-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
  font-weight: 600;
  font-size: calc(13px * var(--ui-font-scale));
}
.accessory-item input {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  border-radius: 0;
}
.accessory-item span { line-height: 1.3; }

.table-wrapper {
  overflow: auto;
  border: 1px solid var(--border);
  background: #fff;
}
.table-wrapper--row-menu {
  overflow: visible;
}
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td {
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: calc(12px * var(--ui-font-scale));
  vertical-align: middle;
}
th {
  text-transform: uppercase;
}
table.table--compact th,
table.table--compact td {
  font-size: calc(11px * var(--ui-font-scale));
  line-height: 1.25;
  vertical-align: top;
}
table.table--compact .table-meta {
  font-size: calc(11px * var(--ui-font-scale));
}
table.table--compact input,
table.table--compact select {
  margin-top: 0;
  width: 100%;
  padding: 6px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: calc(12px * var(--ui-font-scale));
}
.table-sort {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.table-sort:hover { color: var(--text); }
.table-sort__arrows {
  display: inline-grid;
  grid-template-rows: 6px 6px;
  gap: 2px;
}
.table-sort__arrow {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0.35;
}
.table-sort__arrow--up { border-bottom: 6px solid var(--muted); }
.table-sort__arrow--down { border-top: 6px solid var(--muted); }
.table-sort.is-active-asc .table-sort__arrow--up {
  opacity: 1;
  border-bottom-color: var(--accent);
}
.table-sort.is-active-desc .table-sort__arrow--down {
  opacity: 1;
  border-top-color: var(--accent);
}
.table-actions-header {
  width: 1%;
}

.table-row-clickable td { cursor: pointer; }
.table-row-clickable .actions-inline,
.table-row-clickable .actions-inline * { cursor: auto; }
.sales-contract-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}
.sales-contracts-table td,
.sales-contracts-table th {
  vertical-align: middle;
}
.sales-contracts-table .table-title {
  margin-bottom: 2px;
}
.sales-contracts-table .table-title strong { font-size: calc(14px * var(--ui-font-scale)); }
.sales-contracts-table .table-actions {
  width: 1%;
  white-space: nowrap;
}
.sales-contracts-table .statement-numdate__date {
  font-size: calc(11px * var(--ui-font-scale));
}
.payable-import-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fbff;
  margin-bottom: 18px;
}
.payable-import-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.payable-import-dropzone {
  width: 100%;
  min-height: 180px;
  border: 2px dashed #93c5fd;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
  color: #0f172a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
}
.payable-import-dropzone.is-dragover {
  border-color: #2563eb;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.payable-import-summary {
  display: grid;
  gap: 12px;
}
.payable-import-files {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.payable-import-file {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  display: grid;
  gap: 4px;
}
.invoice-register-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.invoice-register-note {
  margin-top: 12px;
}
.sale-invoice-shell {
  display: grid;
  grid-template-columns: minmax(340px, 390px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.sale-invoice-sidebar {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 18px;
}
.sale-invoice-card,
.sale-invoice-stage {
  border-radius: 8px;
  border: 1px solid #dbe3ee;
  background: #ffffff;
  box-shadow: none;
}
.sale-invoice-card {
  display: grid;
  gap: 16px;
}
.sale-invoice-card--hero {
  padding: 16px;
  gap: 14px;
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}
.sale-invoice-card .section__header,
.sale-invoice-stage .section__header {
  align-items: center;
}
.sale-invoice-card .eyebrow,
.sale-invoice-stage .eyebrow,
.sale-invoice-card--hero .eyebrow {
  letter-spacing: 0.08em;
}
.sale-invoice-card--hero h2 {
  margin: 0;
  font-size: calc(31px * var(--ui-font-scale));
  line-height: 1.05;
}
.sale-invoice-card--hero .muted {
  margin: 0;
  color: #475569;
}
.sale-invoice-status-row {
  display: flex;
  align-items: center;
}
.sale-invoice-status-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 800;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
}
.sale-invoice-status-chip--draft {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}
.sale-invoice-status-chip--done {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.sale-invoice-stage .btn.ghost.active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
}
.sale-invoice-status-chip--danger {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.sale-invoice-primary-actions,
.sale-invoice-secondary-actions,
.sale-invoice-downloads {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sale-invoice-primary-actions .btn {
  min-width: 190px;
}
.sale-invoice-downloads .btn {
  background: #fff;
}
.sale-invoice-card .detail-grid {
  gap: 10px;
}
.sale-invoice-card .detail-item {
  border-radius: 6px;
  background: #f8fbff;
  border: 1px solid #e2e8f0;
  padding: 12px 14px;
}
.sale-invoice-documents {
  display: grid;
  gap: 12px;
}
.sale-invoice-document-card {
  display: grid;
  gap: 10px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.sale-invoice-document-card.is-active {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.sale-invoice-document-card__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.sale-invoice-document-card__top h3 {
  margin: 2px 0 0;
  font-size: calc(17px * var(--ui-font-scale));
}
.sale-invoice-document-card__badge {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 5px 9px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 800;
}
.sale-invoice-document-card.is-active .sale-invoice-document-card__badge {
  background: #dbeafe;
  color: #1d4ed8;
}
.sale-invoice-document-card__meta,
.sale-invoice-document-card__files,
.sale-invoice-document-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.sale-invoice-document-card__meta span,
.sale-invoice-document-card__files span {
  border-radius: 999px;
  padding: 6px 9px;
  background: #eef4fb;
  color: #334155;
  font-size: calc(12px * var(--ui-font-scale));
}
.sale-invoice-document-card__files span {
  border-radius: 7px;
  background: #f8fafc;
  color: #64748b;
}
.sale-invoice-stage {
  display: grid;
  gap: 16px;
  min-height: 78vh;
  padding-bottom: 6px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fafe 100%);
}
.sale-invoice-preview-body {
  min-height: 520px;
  padding: 10px;
  border-radius: 6px;
  background: linear-gradient(180deg, #edf3f9 0%, #f8fbff 100%);
}
.sale-invoice-stage .invoice-preview-sheet {
  border-radius: 6px;
  border-color: #dbe3ee;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}
.sale-invoice-stage .invoice-preview-docbox,
.sale-invoice-stage .invoice-preview-party,
.sale-invoice-stage .invoice-preview-vat,
.sale-invoice-stage .invoice-preview-totals {
  border-radius: 6px;
  background: #fbfdff;
}
.sale-invoice-stage .btn.btn-sm {
  min-width: 72px;
}
.sale-invoice-preview-body iframe {
  width: 100%;
  min-height: 76vh;
  border: 0;
  border-radius: 10px;
  background: #e5e7eb;
}
.accounting-modal.sale-invoice-pdf-modal {
  padding: 12px;
}
.accounting-modal__panel.sale-invoice-pdf-modal__panel {
  width: min(1480px, calc(100vw - 24px));
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}
.accounting-modal__header.sale-invoice-pdf-modal__header {
  margin-bottom: 0;
}
.sale-invoice-pdf-modal-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 8px;
  background: #e5e7eb;
}
.finance-inline-commission {
  /* Larghezza minima e non fissa: nella colonna della polizza accanto c'e'
     anche il pulsante Modifica, e con una larghezza rigida il campo veniva
     schiacciato a un filo. */
  width: 120px;
  min-width: 90px;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  font: inherit;
}
.finance-inline-commission:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}
.finance-commission-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.finance-inline-commission[readonly],
.finance-inline-commission:disabled {
  background: #f8fafc;
  color: #475569;
}
.finance-ledger-row--invoiced {
  background: #f8fafc;
}
.finance-ledger-row--invoiced input[type="checkbox"] {
  cursor: not-allowed;
}
.receivables-filter-row {
  display: flex;
  gap: 12px;
  align-items: end;
  justify-content: space-between;
}
.receivables-filter-bar {
  flex: 1 1 auto;
}
.receivables-filter-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  white-space: nowrap;
}
.payables-filter-row {
  display: flex;
  gap: 12px;
  align-items: end;
  justify-content: space-between;
  /* Va a capo invece di sfondare. La regola che la mette in colonna sta a
     980px, ma a 1024 sforava gia' di 6 pixel: invece di spostare la soglia —
     che vorrebbe dire indovinare la prossima — si lascia andare a capo, che
     non fa niente finche' il contenuto ci sta. */
  flex-wrap: wrap;
}
.payables-filter-bar {
  flex: 1 1 auto;
}
.payables-filter-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  white-space: nowrap;
}
.payables-status-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.receivables-type-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 980px) {
  .receivables-filter-row,
  .payables-filter-row {
    align-items: stretch;
    flex-direction: column;
  }
  .receivables-filter-actions,
  .payables-filter-actions {
    justify-content: flex-start;
    white-space: normal;
  }
  .payables-status-buttons {
    justify-content: flex-start;
  }
}
.finance-ledger-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 18px;
  align-items: start;
}
.finance-ledger-main {
  min-width: 0;
}
.finance-selection-panel {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 18px;
}
.finance-selection-note {
  margin: 0;
  font-size: calc(13px * var(--ui-font-scale));
  color: #475569;
}
.finance-selection-note--error {
  color: #b91c1c;
  font-weight: 700;
}
.finance-selection-note--ok {
  color: #166534;
  font-weight: 700;
}
.finance-selection-panel .btn {
  width: 100%;
}
.invoice-register-table td,
.invoice-register-table th {
  vertical-align: top;
}
.invoice-register-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  border: 1px solid transparent;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 700;
  white-space: nowrap;
}
.invoice-register-pill--passive {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.invoice-register-pill--active {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}
.invoice-register-pill--credit {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}
.invoice-register-subject strong {
  display: block;
  margin-bottom: 2px;
}
.invoice-register-number strong {
  display: block;
  margin-bottom: 2px;
}
.invoice-register-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.tulps-register-table th,
.tulps-register-table td {
  line-height: 1.05;
}
.tulps-register-table tbody td {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  height: calc(40px * var(--ui-font-scale));
  vertical-align: middle !important;
  overflow: hidden;
}
.tulps-register-table .table-meta {
  margin-top: 0;
  font-size: calc(9px * var(--ui-font-scale));
  line-height: 1.05;
}
.tulps-register-table tbody tr {
  height: calc(40px * var(--ui-font-scale));
}
.tulps-register-table .tulps-cell-primary {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.05;
}
.tulps-register-table .tulps-cell-primary strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tulps-register-table .tulps-cell-meta {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-height: calc(2.1em);
}
.tulps-register-table strong {
  display: block;
  margin: 0;
  line-height: 1.02;
}
.tulps-register-table .table-actions {
  width: 150px;
  min-width: 150px;
  white-space: nowrap;
  vertical-align: middle !important;
}
.tulps-actions-header {
  width: 150px;
  min-width: 150px;
}
.tulps-row-actions {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  justify-content: end;
  gap: 3px;
  width: max-content;
  min-width: 130px;
  margin-left: auto;
  white-space: nowrap;
}
.tulps-row-actions .btn {
  white-space: nowrap;
}
.tulps-register-table .btn.btn-sm {
  min-height: calc(24px * var(--ui-font-scale));
  padding: calc(2px * var(--ui-font-scale)) calc(7px * var(--ui-font-scale));
  font-size: calc(10px * var(--ui-font-scale));
  line-height: 1;
  border-radius: 4px;
}
.tulps-print-tools {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.tulps-print-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  padding: 14px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
.tulps-print-form strong {
  align-self: center;
  min-width: 210px;
  margin-right: 6px;
}
.tulps-print-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
  color: #475569;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 800;
}
.tulps-print-form input,
.tulps-print-form select {
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  padding: 8px 10px;
  font-weight: 700;
}
.tulps-print-form input.tulps-readonly-number[readonly] {
  border-color: #94a3b8 !important;
  background: #e5e7eb !important;
  color: #475569 !important;
  cursor: not-allowed !important;
  box-shadow: inset 0 0 0 1px #cbd5e1;
  font-weight: 900;
}
.tulps-print-lock {
  color: #92400e;
  font-weight: 800;
}
.tulps-register-table tbody tr.tulps-row--definitive {
  background: #fffbeb;
}
.tulps-register-table tbody tr.tulps-row--definitive:hover {
  background: #fef3c7;
}
.payable-import-customer-dialog {
  max-width: 760px;
}
.payable-import-customer-dialog__body {
  display: grid;
  gap: 12px;
}
.payable-import-customer-summary {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  background: #f8fafc;
}
.payable-import-customer-summary span {
  color: #475569;
  font-size: calc(13px * var(--ui-font-scale));
}
.payable-import-customer-dialog__similar {
  display: grid;
  gap: 8px;
}
.payable-import-customer-dialog__category {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 800;
}
.payable-import-customer-dialog__category select {
  min-height: 38px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
}
.payable-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.payable-row-actions .btn.ghost {
  background: #fff;
}
.payable-draft-installments {
  margin-top: 12px;
}
.payable-installment-due {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.payable-installment-due input {
  min-width: 0;
}
.payable-installment-kind {
  margin-bottom: 0;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.payable-installment-kind--withholding {
  color: #b45309;
}
.table-meta.payable-withholding-meta {
  font-weight: 700;
}
.table-meta.payable-withholding-meta--open {
  color: #b91c1c;
}
.table-meta.payable-withholding-meta--paid {
  color: #166534;
}
.btn.payable-edit {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #0c4a6e;
  box-shadow: none;
}
.btn.payable-edit:hover {
  transform: translateY(-1px);
  background: #dbeafe;
  border-color: #93c5fd;
}
.invoice-register-table .quote-status {
  white-space: nowrap;
}
.invoice-viewer-modal__panel {
  width: min(1180px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
}
.invoice-viewer-body {
  min-height: 420px;
}
.invoice-viewer-panel {
  min-height: 420px;
}
.invoice-viewer-panel iframe {
  width: 100%;
  min-height: 70vh;
  border: 0;
  border-radius: 10px;
  background: #e5e7eb;
}
.invoice-preview-sheet {
  display: grid;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.invoice-preview-sheet__header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.invoice-preview-docbox {
  min-width: 220px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  display: grid;
  gap: 4px;
  text-align: right;
}
.invoice-preview-parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.invoice-preview-party {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  display: grid;
  gap: 4px;
}
.invoice-preview-meta {
  margin: 0;
  color: #475569;
  font-size: calc(13px * var(--ui-font-scale));
}
.invoice-preview-causals {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: #f8fafc;
  color: #334155;
  font-size: calc(13px * var(--ui-font-scale));
}
.invoice-preview-causals .eyebrow {
  margin-bottom: 0;
}
.invoice-preview-description-trigger {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.invoice-preview-description-trigger:hover {
  color: #1d4ed8;
}
.invoice-preview-edit-trigger {
  width: 100%;
  padding: 3px 4px;
  border: 1px dashed transparent;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.invoice-preview-edit-trigger:hover {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}
.invoice-preview-vat-select {
  min-width: 110px;
  min-height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  font-size: calc(13px * var(--ui-font-scale));
}
.invoice-preview-customer-change {
  justify-self: start;
  margin-top: 6px;
}
.invoice-preview-inline-editor {
  display: grid;
  gap: 8px;
}
.invoice-preview-inline-editor input {
  width: 100%;
  min-width: 120px;
}
.invoice-preview-description-editor {
  display: grid;
  gap: 8px;
}
.invoice-preview-description-editor input {
  width: 100%;
}
.invoice-preview-description-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.invoice-preview-footer {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.8fr);
  gap: 16px;
}
.invoice-preview-payment {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fafc;
}
.invoice-preview-payment > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 6px;
}
.invoice-preview-payment > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.invoice-preview-payment span {
  color: #64748b;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 800;
}
.invoice-preview-payment strong {
  text-align: right;
}
.invoice-preview-vat {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  display: grid;
  gap: 8px;
}
.invoice-preview-vat__row,
.invoice-preview-totals div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}
.invoice-preview-totals {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  display: grid;
  gap: 8px;
}
.invoice-preview-totals div {
  grid-template-columns: minmax(0, 1fr) auto;
}
.table-image {
  width: 72px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: #e5e7eb;
}
/* Nel parco auto la miniatura e' piu' grande, e la riga **non cresce**: quelle
   righe sono alte da sole — titolo, riga dati, filiale — e la miniatura ne
   usava 48px lasciando vuoti i 61 utili della cella.
   87x58 e' il massimo che sta dentro senza spostare niente, e il limite e' la
   **larghezza**, non l'altezza: la colonna cresce a spese di quella del
   titolo, che a un certo punto manda il testo a capo e allunga la riga. E'
   misurato riga per riga:

     larghezza finestra   72x48 (prima)   87x58   92x58
     1180                 126px           126px   126px
     1280                  95px            95px   110px   <- qui si rompe
     1440                  79px            79px    79px

   Le proporzioni restano 3:2: allargando la sola altezza, `object-fit: cover`
   taglierebbe i fianchi di una foto panoramica — l'auto piu' grande ma meno
   visibile, che e' il contrario di cio' che serve.
   E' una variante, non la regola generale: la stessa miniatura sta anche in
   Gestione vendite e nella scheda cliente, dove le righe sono piu' basse e
   crescerebbero. */
.table-image--grande {
  width: 87px;
  height: 58px;
}
.table-title { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.table-title strong { font-size: calc(14px * var(--ui-font-scale)); letter-spacing: -0.01em; }
.table-meta { color: var(--muted); font-size: calc(12px * var(--ui-font-scale)); line-height: 1.35; }
.vehicle-price-cell {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  vertical-align: middle;
}
.status-dot--danger {
  background: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16);
}
/* Due pulsanti, due forme, la stessa pastiglia. Quello dei pagamenti porta un
   **importo** e cresce con lui; quello del documento porta un'icona e resta
   tondo. Erano tutti e due larghi 34px: "€ 12.345,00" non ci sta dentro, e a
   video si vedeva la cifra a cavallo del cerchio. */
.deed-payment-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: calc(14px * var(--ui-font-scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
/* Il pulsante del documento resta un tondo: dentro c'e' un'icona, non un
   numero, e il riempimento laterale lo renderebbe un ovale. */
.deed-document-toggle {
  width: 34px;
  padding: 0;
}
.deed-payment-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
  margin: 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.deed-payment-toggle.is-empty {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #4b5563;
}
.deed-payment-toggle.is-partial {
  background: #ffedd5;
  border-color: #fdba74;
  color: #c2410c;
}
.deed-payment-toggle.is-balanced {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}
.deed-payment-toggle.is-over {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}
.deed-payment-toggle:hover,
.deed-payment-toggle.is-open {
  background: #dbeafe;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.deed-toggle-cell {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}
/* La didascalia ("di € 2.300,00", "Nessun documento") sta sotto la pastiglia e
   in asse con lei: senza questo respiro le due si toccavano. */
.deed-toggle-cell .table-meta {
  margin-top: 5px;
  text-align: center;
}
.deed-actions-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.deed-document-toggle.is-loaded {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}
.deed-payments-expanded-row td {
  background: #f8fbff;
  padding: 0;
}
.deed-documents-expanded-row td {
  background: #f8fbff;
  padding: 0;
}
.deed-payments-panel {
  padding: 16px 18px;
}
.deed-payments-panel__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.deed-payments-panel__total {
  margin-left: auto;
  color: #0f172a;
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 700;
}
.deed-payments-panel__body {
  display: grid;
  gap: 12px;
}
.deed-payment-row {
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(180px, 220px) minmax(220px, 1fr) auto auto auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid #dbe7f5;
  border-radius: 10px;
  background: #ffffff;
}
/* Riga che arriva da un altro documento — oggi la fattura del fornitore.
   Si vede che non si tocca: fondo diverso, campi in sola lettura e il
   riferimento al documento sopra. Modificarla da qui vorrebbe dire scrivere lo
   stesso pagamento in due posti. */
.deed-payment-row--esterna {
  grid-template-columns: minmax(120px, 150px) minmax(180px, 220px) minmax(220px, 1fr) auto;
  background: #f4f8fd;
  border-style: dashed;
}
.deed-payment-row--esterna input {
  background: transparent;
  border-color: #cfdcec;
  color: #3a4a63;
}
.deed-payment-row__origine {
  grid-column: 1 / -1;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 600;
  color: #3a5a9b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.deed-payment-row--esterna .deed-payment-row__status {
  grid-column: 4;
  grid-row: 2;
}
.deed-payment-row__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.deed-payment-row__actions--top {
  grid-column: 6;
  grid-row: 1;
  align-self: center;
}
.deed-payment-row__description {
  grid-column: 1 / -1;
}
.deed-payment-row__status {
  grid-column: 5;
  grid-row: 1;
  display: flex;
  align-items: center;
  min-height: 42px;
}
.deed-payment-posted {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: #e5e7eb;
  color: #374151;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 700;
}
.deed-payment-posted.is-posted {
  background: #dcfce7;
  color: #166534;
}
.deed-documents-panel {
  padding: 16px 18px;
}
.deed-documents-panel__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.deed-documents-panel__meta {
  color: #475569;
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 600;
}
.deed-documents-dropzone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.deed-documents-dropzone strong {
  display: block;
  color: #0f172a;
  font-size: calc(14px * var(--ui-font-scale));
  margin-bottom: 4px;
}
.deed-documents-dropzone p {
  margin: 0;
}
.deed-documents-dropzone.is-loaded {
  border-color: #86efac;
  background: #f0fdf4;
}
.deed-documents-dropzone.is-dragover {
  border-color: #60a5fa;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.deed-documents-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 980px) {
  .deed-payment-row {
    grid-template-columns: 1fr;
  }
  .deed-payment-row__status {
    min-height: 0;
  }
  .deed-documents-panel__header,
  .deed-documents-dropzone,
  .deed-documents-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .causal-picker-modal__split.is-create-open {
    grid-template-columns: 1fr;
  }
  .causal-picker-trigger {
    flex-direction: column;
  }
}
.table-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.table-row-menu {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}
.table-row-menu__toggle {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  font-weight: 700;
  font-size: calc(18px * var(--ui-font-scale));
  line-height: 1;
  cursor: pointer;
}
.table-row-menu__toggle:hover {
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}
.table-row-menu__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  z-index: 1200;
  display: none;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border);
  background: #fff;
}
.table-row-menu.is-open .table-row-menu__list {
  display: flex;
}
.table-row-menu__item {
  border: 1px solid transparent;
  background: #fff;
  color: var(--text);
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
}
.table-row-menu__item:hover {
  background: #f8fafc;
  border-color: var(--border);
}
/* Una voce spenta dice **perche'** non si puo' fare, invece di sparire: senza,
   chi la cerca non sa se manchi per una regola o per un guasto. Il cursore di
   aiuto invita a fermarcisi sopra, dove sta la spiegazione. */
.table-row-menu__item:disabled {
  opacity: 0.45;
  cursor: help;
}
.table-row-menu__item:disabled:hover {
  background: none;
}
.table-row-menu__item--danger {
  color: var(--danger-strong);
}
.table-row-menu__item--danger:hover {
  background: var(--danger-soft);
  border-color: #fecaca;
}
.vehicle-branch-modal__panel {
  width: min(460px, 100%);
}
.vehicle-branch-modal__body {
  display: grid;
  gap: 10px;
}
.statement-numdate {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
}
.statement-numdate__id {
  color: var(--text);
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 700;
  line-height: 1.2;
}
.statement-numdate__date {
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  line-height: 1.2;
}
.sale-type-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  width: fit-content;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 700;
  border: 1px solid transparent;
}
.sale-type-tag--mandato {
  background: #f5edff;
  border-color: #ddd6fe;
  color: #6d28d9;
}
.sale-type-tag--acquisto {
  background: #ffedd5;
  border-color: #fdba74;
  color: #9a3412;
}
.sale-type-tag--unknown {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}
.statement-col-orange {
  background: #fff4e8;
  color: #9a3412;
  font-weight: 600;
}
.statement-col-green {
  background: #ecfdf3;
  color: #166534;
  font-weight: 600;
}
.statement-money-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.statement-money-cell .table-meta {
  font-weight: 600;
}
.statement-expanded-row .deed-payment-row {
  grid-template-columns: minmax(110px, 130px) minmax(140px, 160px) minmax(180px, 220px) minmax(220px, 1fr) auto auto auto;
}
.statement-expanded-row .deed-payment-row__actions--top {
  grid-column: 7;
}
.statement-expanded-row .deed-payment-row__status {
  grid-column: 6;
}
.vehicle-card__img {
  width: 96px;
  height: 64px;
  overflow: hidden;
  background: #e5e7eb;
}
.vehicle-card__img.large {
  width: 180px;
  height: 120px;
}
.vehicle-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vehicle-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}
.vehicle-card__title strong { font-size: calc(15px * var(--ui-font-scale)); }
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 700;
  text-transform: capitalize;
}
.badge--available { background: #ffedd5; color: #9a3412; }
.badge--sold { background: #dcfce7; color: #166534; }
.badge--delivered { background: #e0f2fe; color: #075985; }
.badge--returned { background: #fce8ef; color: #9f1239; }
.badge--temporary { background: #e2e8f0; color: #0f172a; }
/* Si/no leggibili anche senza colore: la pastiglia porta sempre la parola. */
.badge--ok { background: var(--ok-soft); color: var(--ok-ink); }
.badge--muted { background: #eef2f7; color: #64748b; }
.badge--info { background: #e0f2fe; color: #075985; }
.load-type-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 700;
  white-space: nowrap;
}
.load-type-tag--mandato {
  background: #ede9fe;
  color: #6d28d9;
}
.load-type-tag--acquisto {
  background: #dbeafe;
  color: #1d4ed8;
}

/* Il mandato: c'e' il documento o no.
   Sta accanto alla pastiglia del tipo di carico, non dentro: quella dice come
   e' entrata l'auto, questa se l'adempimento e' chiuso. Il segno (spunta o
   punto esclamativo) accompagna il colore, che da solo non basta. */
.mandate-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 700;
  white-space: nowrap;
}
.mandate-flag--ok {
  background: #dcfce7;
  color: #15803d;
}
.mandate-flag--pending {
  background: #fef3c7;
  color: #b45309;
}
/* La revisione scaduta: rossa, perche' un'auto cosi' non puo' circolare. Il
   punto esclamativo e la scritta accompagnano il colore. */
.mandate-flag--scaduta {
  background: var(--danger-soft, #fee2e2);
  color: var(--danger-strong, #b91c1c);
}

.vehicle-meta { margin: 0; color: var(--muted); font-size: calc(13px * var(--ui-font-scale)); }
.vehicle-meta strong { color: var(--text); }
.vehicle-footer { margin: 6px 0 0; font-size: calc(13px * var(--ui-font-scale)); color: var(--muted); }
.vehicle-detail__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
.vehicle-detail__info { display: flex; flex-direction: column; gap: 6px; }
.vehicle-view {
  margin-bottom: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.view-tab {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 12px;
  background: #fff;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.view-tab.is-active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}
.view-panel { display: none; }
.view-panel.is-active { display: block; }
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.detail-item {
  border: 1px solid var(--border);
  padding: 10px 11px;
  background: #fff;
}
.detail-label {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.detail-value {
  margin: 0;
  font-weight: 700;
  font-size: calc(14px * var(--ui-font-scale));
  color: var(--text);
  word-break: break-word;
}
.detail-accessories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.detail-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
  padding: 6px 10px;
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 700;
}
.vehicle-costs-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 10px;
}
.detail-empty {
  color: var(--muted);
  font-size: calc(14px * var(--ui-font-scale));
}
.hidden { display: none; }
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vehicle-gallery { margin-top: 12px; }
.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.gallery-header h4 { margin: 0; }
.gallery-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.gallery-item {
  position: relative;
  width: 80px;
  height: 64px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: #fff;
  flex: 0 0 auto;
}
.gallery-item a { display: block; width: 100%; height: 100%; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item.is-default {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.gallery-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  border: none;
  font-size: calc(12px * var(--ui-font-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-default {
  position: absolute;
  bottom: -6px;
  left: -6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-default svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
.gallery-item.is-default .gallery-default {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.gallery-item.is-default .gallery-default svg { fill: currentColor; }
.gallery-add {
  width: 80px;
  height: 64px;
  border: 2px dashed var(--border);
  background: #fff;
  color: var(--muted);
  font-size: calc(24px * var(--ui-font-scale));
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.footer {
  padding: 18px 24px 28px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.eyebrow { text-transform: uppercase; color: var(--muted); margin: 0; }

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.chip {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 20px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); }
.chip.active {
  background: var(--accent);
  color: #fff;
}
.chip.has-alert {
  position: relative;
  padding-right: 20px;
}
.chip.has-alert::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--danger);
  box-shadow: 0 0 0 2px #fff;
}

.filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  align-items: end;
}
.filter-bar input[type="search"] {
  min-width: 0;
}
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
  color: var(--text);
  font-size: calc(12px * var(--ui-font-scale));
}
.filter-bar .filter-field input,
.filter-bar .filter-field select {
  width: 100%;
  height: calc(42px * var(--ui-font-scale));
  min-height: calc(42px * var(--ui-font-scale));
  padding: 0 calc(12px * var(--ui-font-scale));
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: calc(14px * var(--ui-font-scale));
  line-height: 1.2;
  background: #fff;
  color: var(--text);
}
.filter-bar .filter-field input:focus,
.filter-bar .filter-field select:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.filter-search {
  width: 100%;
  background: #fff;
}
.period-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.sales-filter-shortcuts {
  display: grid;
  grid-template-columns: max-content 1fr;
  justify-content: stretch;
  align-items: center;
  column-gap: 24px;
}
.sales-filter-shortcuts__left,
.sales-filter-shortcuts__right {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sales-filter-shortcuts__right {
  justify-content: flex-end;
}
.period-btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 8px 12px;
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 700;
  cursor: pointer;
}
.period-btn:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}
.period-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.accounting-toolbar {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.sales-contracts-table colgroup col,
.finance-ledger-table colgroup col,
.payables-ledger-table colgroup col {
  width: auto;
}
.accounting-layout-grid {
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}
.accounting-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.accounting-form-grid__wide {
  grid-column: span 2;
}
.accounting-readonly-input {
  background: #f8fafc;
  color: #111827;
  font-weight: 700;
}
.accounting-inline-form {
  display: grid;
  grid-template-columns: 1fr 180px 140px auto;
  align-items: end;
  gap: 8px;
}
.accounting-causals-table-wrap {
  margin-top: 12px;
  max-height: 360px;
}
.accounting-totals {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
.accounting-total {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 7px 10px;
  background: #fff;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--text);
}
.accounting-total strong {
  font-size: calc(12px * var(--ui-font-scale));
}
.accounting-total--entry {
  background: #ecfdf3;
  border-color: #bbf7d0;
  color: #166534;
}
.accounting-total--exit {
  background: #fff4e8;
  border-color: #fed7aa;
  color: #9a3412;
}
.accounting-total--transfer {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}
.accounting-type {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 2px 8px;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 700;
  white-space: nowrap;
}
.accounting-type--entry {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}
.accounting-type--exit {
  background: #ffedd5;
  border-color: #fdba74;
  color: #9a3412;
}
.accounting-type--transfer {
  background: #e0e7ff;
  border-color: #a5b4fc;
  color: #3730a3;
}
.entry-description-field {
  grid-column: 1 / -1;
}
.entry-causal-field {
  grid-column: span 2;
}
.entry-subject-picker-field {
  grid-column: span 2;
}
.accounting-installments {
  margin-top: 10px;
  border: 1px solid var(--border);
  padding: 10px;
  background: #f8fafc;
}
.accounting-lock-note {
  margin: 0 0 8px;
  color: #9a3412;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 700;
}
.accounting-installment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.accounting-installment-row:last-child {
  margin-bottom: 0;
}
.accounting-installment-row .btn {
  margin-left: auto;
}
.accounting-modal[hidden] {
  display: none !important;
}
.accounting-modal {
  position: fixed;
  inset: 0;
  z-index: 1020;
  display: grid;
  place-items: center;
  padding: 20px;
}
.accounting-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}
.accounting-modal__panel {
  position: relative;
  width: min(740px, 100%);
  border: 1px solid var(--border);
  background: #fff;
}
.accounting-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.accounting-modal__header h3 {
  margin: 0;
}
.accounting-modal__meta {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: calc(13px * var(--ui-font-scale));
}
.accounting-alert-text {
  color: #b91c1c;
  font-weight: 700;
}
.accounting-row-alert {
  background: #fffaf4;
}
.accounting-row-focus {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

.vehicle-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.vehicle-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  border: 1px solid var(--border);
  padding: 12px;
  background: #fff;
}

.app-dialog-backdrop {
  position: fixed;
  inset: 0;
  /* Sopra a tutti i modal (picker 1010, accounting 1020): i dialog devono sempre stare in cima. */
  z-index: 2000;
  background: rgba(15, 23, 42, 0.45);
  display: grid;
  place-items: center;
  padding: 24px;
}
.app-dialog {
  width: min(calc(520px + ((var(--ui-font-scale) - 1) * 140px)), 100%);
  background: #fff;
  border: 1px solid var(--border);
}
.app-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.app-dialog__title {
  margin: 0;
  font-size: calc(18px * var(--ui-font-scale));
  flex: 1 1 220px;
  min-width: 0;
}
.app-dialog__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.app-dialog__badge--info {
  background: #dbeafe;
  color: #1d4ed8;
}
.app-dialog__badge--success {
  background: var(--ok-soft);
  color: var(--ok);
}
.app-dialog__badge--error {
  background: var(--danger-soft);
  color: var(--danger-strong);
}
.app-dialog__message {
  margin: 0;
  color: var(--text);
  line-height: 1.5;
  font-size: calc(15px * var(--ui-font-scale));
  white-space: pre-wrap;
}
/* Campo con il pulsante accanto (prova di invio SMTP). Stesso blocco che usa
   la console: le due pagine devono restare uguali. */
.campo-con-azione { display: flex; gap: 8px; align-items: stretch; }
.campo-con-azione input { flex: 1; }

/* Elenco di cosa verra' toccato, dentro un dialogo di conferma. */
.app-dialog__details {
  margin: 0 0 4px;
  padding: 10px 12px 10px 26px;
  max-height: 320px;
  overflow-y: auto;
  list-style: disc;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  font-size: calc(13px * var(--ui-font-scale));
  line-height: 1.55;
}
.app-dialog__details li + li { margin-top: 4px; }
.app-dialog__details strong { color: var(--text); }
.app-dialog__details span { color: var(--muted); }

/* La riga "cosa fare" sta **sotto** la voce, non in coda: e' una frase, e
   accanto al nome del documento si leggerebbe come parte di quello. Le voci si
   distanziano un po' di piu' quando ne portano una. */
.app-dialog__nota {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  line-height: 1.5;
}
.app-dialog__details li:has(.app-dialog__nota) + li { margin-top: 10px; }

.app-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.quote-customer-field {
  grid-column: 1 / -1;
}
.quote-customer-picker {
  margin-top: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.quote-customer-picker input {
  margin-top: 0;
  background: #f8fafc;
  cursor: pointer;
}
.quote-customer-picker input.field-invalid {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
  background: #fff7f7;
}
.field-invalid-text {
  color: #b91c1c;
}
.quote-customer-picker .btn {
  padding: calc(10px * var(--ui-font-scale)) calc(12px * var(--ui-font-scale));
  white-space: nowrap;
}

.customer-picker-modal[hidden] {
  display: none !important;
}
.customer-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 1010;
  display: grid;
  place-items: center;
  padding: 18px;
}
.customer-picker-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.customer-picker-modal__panel {
  position: relative;
  width: min(calc(920px + ((var(--ui-font-scale) - 1) * 220px)), 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  overflow: hidden;
}
.customer-picker-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.customer-picker-modal__header h3 {
  margin: 0;
  font-size: calc(19px * var(--ui-font-scale));
  flex: 1 1 260px;
  min-width: 0;
}
.customer-picker-modal__close {
  padding: calc(8px * var(--ui-font-scale)) calc(12px * var(--ui-font-scale));
  flex: 0 0 auto;
  align-self: flex-start;
}
.customer-picker-modal__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.customer-picker-modal__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.customer-picker-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.customer-picker-filter {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  padding: calc(8px * var(--ui-font-scale)) calc(12px * var(--ui-font-scale));
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 800;
  cursor: pointer;
}
.customer-picker-filter.is-active {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #075985;
}
.customer-picker-modal__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
}
.customer-picker-modal__split.is-create-open {
  grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.1fr);
}
.customer-picker-modal__panel--expanded {
  width: min(calc(1240px + ((var(--ui-font-scale) - 1) * 320px)), 100%);
}
.customer-picker-modal__results-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  min-width: 0;
}
.customer-picker-modal__search-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 700;
}
.customer-picker-modal__search {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  padding: calc(10px * var(--ui-font-scale)) calc(12px * var(--ui-font-scale));
  font-size: calc(14px * var(--ui-font-scale));
  line-height: 1.35;
  min-height: calc(40px * var(--ui-font-scale));
}
.customer-picker-modal__search:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.customer-picker-modal__results {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  overflow: auto;
  min-height: 220px;
  max-height: 52vh;
}
.customer-picker-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: 12px 14px;
  border: none;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}
.customer-picker-item__content {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}
.customer-picker-item__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  flex: 0 0 auto;
}
.customer-picker-item__action {
  white-space: nowrap;
}
.customer-picker-item:last-child {
  border-bottom: none;
}
.customer-picker-item:hover {
  background: #f8fafc;
}
.customer-picker-item.is-highlighted {
  background: #eff6ff;
  box-shadow: inset 3px 0 0 #2563eb;
}
.customer-picker-item__main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.customer-picker-item__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.customer-picker-item__meta {
  color: var(--muted);
  font-size: calc(13px * var(--ui-font-scale));
}
.customer-picker-item--empty {
  cursor: default;
  color: var(--muted);
}
.customer-picker-item--empty:hover {
  background: #fff;
}
.customer-picker-modal__create {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  overflow: auto;
}
.customer-picker-modal__create .grid.two-columns,
.causal-picker-modal__panel .grid.two-columns,
.payable-inline-editor .grid.two-columns,
.app-dialog .grid.two-columns {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 12px;
}
.customer-picker-modal__create.hidden,
.customer-picker-modal__create[hidden] {
  display: none !important;
}
/* Form "Nuovo soggetto": etichette sopra i campi, larghezze uniformi e allineate. */
.customer-picker-modal__create .grid > label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
  min-width: 0;
  font-weight: 650;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--text);
  letter-spacing: -0.01em;
}
.customer-picker-modal__create .grid > label.hidden {
  display: none;
}
.customer-picker-modal__create .grid > label > input,
.customer-picker-modal__create .grid > label > select,
.customer-picker-modal__create .grid > label > textarea {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: calc(8px * var(--ui-font-scale)) calc(10px * var(--ui-font-scale));
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-weight: 500;
}
.customer-picker-modal__create .grid > label > textarea {
  resize: vertical;
  min-height: 64px;
}
/* Note e ragione sociale occupano tutta la riga. */
.customer-picker-modal__create .grid > label:has(textarea),
.customer-picker-modal__create .grid > label:has(input[id$="-create-company-name"]):not(.hidden) {
  grid-column: 1 / -1;
}
.customer-picker-modal__create .form-actions {
  margin-top: 2px;
}
.customer-picker-modal__create-header h4 {
  margin: 0;
  font-size: calc(15px * var(--ui-font-scale));
}
.customer-picker-modal__create-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
}
.causal-picker-modal__panel {
  width: min(calc(980px + ((var(--ui-font-scale) - 1) * 200px)), 100%);
  padding: 16px;
}
.causal-picker-modal__toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.causal-picker-modal__search-wrap {
  min-width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 700;
}
.causal-picker-modal__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.causal-picker-modal__split.is-create-open {
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 0.95fr);
}
.causal-picker-trigger {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
/* La tendina del tipo movimento si colora come il pulsante Salva: verde in
   entrata, arancione in uscita. E' la cosa che si sbaglia piu' facilmente, e da
   salvata si nota solo riguardando il saldo. */
/* `.form select` (0,2,0) batte una classe sola: senza qualificare l'elemento
   restava il colore del testo e spariva sfondo e bordo — la stessa trappola di
   `.btn.primary` contro `.btn--entrata`. */
.campo--entrata,
.form select.campo--entrata,
.form input.campo--entrata {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
  font-weight: 700;
}
.campo--uscita,
.form select.campo--uscita,
.form input.campo--uscita {
  border-color: #fdba74;
  background: #fff7ed;
  color: #c2410c;
  font-weight: 700;
}

/* Giacenza: giorni in piazzale, con la fascia che li commenta. Il numero sta
   sempre accanto al colore — un colore da solo obbliga a ricordarsi le soglie. */
.giacenza {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.giacenza--verde { background: #dcfce7; border-color: #86efac; color: #166534; }
.giacenza--arancione { background: #ffedd5; border-color: #fdba74; color: #c2410c; }
.giacenza--rosso { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.giacenza--nero { background: #1f2937; border-color: #111827; color: #f9fafb; }
/* Venduta: la giacenza si e' fermata, e non deve gridare come quella di
   un'auto che e' ancora li'. */
.giacenza--chiusa { opacity: 0.55; }

.giacenza-anteprima {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 4px 0 8px;
}
.giacenza-anteprima__voce { display: flex; align-items: center; gap: 8px; }

/* Quanto vendiamo di quello che gestiamo, e la giacenza dello stock. */
.stats-conversione, .stats-giacenza { display: flex; flex-direction: column; gap: 12px; }
.stats-conversione__testa { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stats-conversione__quota { font-size: calc(30px * var(--ui-font-scale)); font-weight: 800; }
.stats-conversione__barra {
  height: 12px;
  border-radius: 999px;
  background: var(--surface-strong, #eef2f7);
  overflow: hidden;
}
.stats-conversione__barra span { display: block; height: 100%; background: #16a34a; }
.stats-conversione__voci { display: flex; flex-direction: column; gap: 6px; }
.stats-conversione__voce {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(13px * var(--ui-font-scale));
}
.stats-conversione__voce strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.stats-dot--verde { background: #16a34a; }
.stats-dot--blu { background: #3b82f6; }
.stats-dot--ambra { background: #f59e0b; }
.stats-dot--rosso { background: #dc2626; }
.stats-giacenza__fasce { display: flex; flex-wrap: wrap; gap: 14px; }
.stats-giacenza__fascia { display: flex; align-items: center; gap: 7px; font-size: calc(13px * var(--ui-font-scale)); }

/* Suggerimenti sotto a un campo: causali e soggetti della prima nota. */
.suggerimenti-ancora { position: relative; }
.suggerimenti {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 18px 40px -22px rgba(2, 8, 20, 0.55);
  padding: 4px;
}
/* Aperto verso l'alto: il campo sta in fondo alla finestra e sotto non c'e'
   posto. Lo decide `colloca()` in `core/suggerimenti.js`, misurando. */
.suggerimenti--sopra {
  top: auto;
  bottom: calc(100% + 4px);
}
.suggerimenti__voce {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 7px;
  background: none;
  padding: 7px 9px;
  cursor: pointer;
  font-size: calc(13.5px * var(--ui-font-scale));
}
.suggerimenti__voce:hover,
.suggerimenti__voce.is-evidenziato { background: var(--surface-strong, #eef2f7); }
.suggerimenti__etichetta { display: block; font-weight: 600; }
.suggerimenti__dettaglio {
  display: block;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--muted);
}

.causal-picker-trigger__display {
  flex: 1 1 auto;
  min-width: 0;
  background: #f8fafc;
}

.payable-groups-search-field {
  margin-top: 12px;
}
.payable-groups-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr);
  gap: 18px;
}
/* Le due colonne vogliono 320 + 360 + 18 = 698px, e con la barra laterale e
   i margini della pagina ci stanno solo da ~1100px in su: a 900 la scheda ne
   aveva 566 e a scorrere di lato era la pagina intera. La regola che gia'
   mette una colonna sola sta piu' sotto, in una media query piu' stretta:
   questa la anticipa. E' la stessa soglia delle pagine documento. */
@media (max-width: 1100px) {
  .payable-groups-layout { grid-template-columns: 1fr; }
}
.payable-groups-layout--modal {
  grid-template-columns: minmax(300px, 0.95fr) minmax(360px, 1.05fr);
  width: 100%;
}
.payable-pane {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 14px;
  min-height: 420px;
  min-width: 0;
}
.payable-pane__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.payable-pane__header h3 {
  margin: 4px 0;
  font-size: calc(20px * var(--ui-font-scale));
}
.payable-items-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.payable-inline-editor {
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
}
.payable-inline-editor h4 {
  margin: 0 0 10px;
  font-size: calc(16px * var(--ui-font-scale));
}
.payable-item-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  background: #fff;
}
.payable-item-card.is-active {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
  background: #f8fbff;
}
.payable-item-card--static {
  align-items: flex-start;
}
.payable-item-card__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.payable-item-card__select {
  width: 100%;
  border: none;
  padding: 0;
  background: transparent;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.payable-item-card__select strong,
.payable-item-card__content strong {
  display: block;
  font-size: calc(16px * var(--ui-font-scale));
  line-height: 1.2;
}
.payable-item-subtitle {
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 700;
}
.payable-item-count {
  min-width: 30px;
  text-align: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 800;
}
.payable-expense-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
}
.payable-expense-row--empty {
  color: var(--muted);
  border-style: dashed;
  background: #f8fafc;
}

@media (max-width: 1180px) {
  .contract-form-shell,
.quote-form-shell {
    grid-template-columns: 1fr;
  }
  .contract-summary-rail,
.quote-summary-rail {
    position: static;
  }
  .customer-picker-modal__split.is-create-open,
  .payable-groups-layout--modal {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1120px) {
  .causal-picker-modal__split.is-create-open {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .contract-transfer-price-grid,
.quote-transfer-price-grid {
    grid-template-columns: 1fr;
  }
  .contract-service-row {
    grid-template-columns: 1fr;
  }
  .contract-service-row__remove {
    width: 100%;
  }
  .customer-picker-modal__toolbar {
    align-items: stretch;
  }
  .customer-picker-modal__split {
    grid-template-columns: 1fr;
  }
  .customer-picker-item {
    flex-direction: column;
  }
  .customer-picker-item__actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .payable-groups-layout {
    grid-template-columns: 1fr;
  }
  .payable-pane__header,
  .payable-item-card,
  .payable-expense-row {
    flex-direction: column;
    align-items: stretch;
  }
}

.quote-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid transparent;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 700;
}
.quote-status--open {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.quote-status--concluded {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}
.quote-status--partial {
  background: #ffedd5;
  border-color: #fdba74;
  color: #9a3412;
}
.quote-status--cancelled {
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}
.pdf-action-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #1f2933;
}
.pdf-action-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pdf-action-btn:hover {
  border-color: #93c5fd;
  color: #1d4ed8;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.e-invoicing-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.e-invoicing-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.e-invoicing-module h3 {
  margin: 4px 0 8px;
}

.e-invoicing-list {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #334155;
}

.e-invoicing-list li + li {
  margin-top: 6px;
}

.e-invoicing-import-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.e-invoicing-dropzone {
  width: 100%;
  min-height: 240px;
  border: 2px dashed #93c5fd;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
  color: #0f172a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  text-align: left;
  cursor: pointer;
}

.e-invoicing-dropzone.is-dragover {
  border-color: #2563eb;
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.e-invoicing-import-summary {
  display: grid;
  gap: 14px;
}

@media (max-width: 900px) {
  .e-invoicing-hero,
  .e-invoicing-import-layout,
  .finance-ledger-shell,
  .invoice-register-hero,
  .payable-import-layout,
  .invoice-preview-sheet__header,
  .invoice-preview-parties,
  .invoice-preview-footer {
    grid-template-columns: 1fr;
    display: grid;
  }
  /* Una colonna sola non basta: i figli di una griglia hanno `min-width: auto`
     e si rifiutano di scendere sotto la larghezza del loro contenuto. La
     colonna dei comandi restava larga 412px dentro un contenitore da 358, e a
     scorrere di lato era la pagina. Vale per tutte le pagine documento —
     contratto, consegna, conformita', fattura manuale, perizia. */
  .e-invoicing-hero > *,
  .e-invoicing-import-layout > *,
  .finance-ledger-shell > *,
  .invoice-register-hero > *,
  .payable-import-layout > * {
    min-width: 0;
  }
  .finance-selection-panel {
    position: static;
  }
}

/* Le pagine documento passano a una colonna gia' dai **1100px**, non dai 900.
   Misurato sulla perizia: il modulo "Rilievo alla valutazione" e' una griglia
   `repeat(auto-fit, minmax(220px, 1fr))` che **non scende sotto i 365px**, e
   la colonna che lo contiene scende sotto quella misura gia' a 1101px. Sotto
   quella soglia le due colonne non ci stanno, e a scorrere di lato era la
   pagina intera — su un monitor da 1024, non su un telefono.

   La soglia e' **1200 e non 1100**: a 1100 la pagina sforava di 6 pixel e a
   1101 di 5, quindi fermarsi a 1100 lasciava fuori proprio il caso che si
   stava correggendo. Trovato da `deploy/controlla-larghezze.py`, che misura
   ogni larghezza invece di confrontarne due.

   | finestra | colonna | griglia | |
   |---|---|---|---|
   | 1200 | 488 | 422 | ci sta |
   | 1100 | 388 | 365 | sfora di 6 |
   | 1024 | 312 | 365 | sfora di 82 |

   Sopra i 1100 non cambia niente: due colonne come sempre. */
@media (max-width: 1200px) {
  .sale-invoice-shell {
    display: grid;
    grid-template-columns: 1fr;
  }
  .sale-invoice-shell > * { min-width: 0; }
  .sale-invoice-sidebar { position: static; }
}
.quote-print-area {
  margin-top: 0;
}
.quote-print-sheet {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px;
  box-shadow: none;
  max-width: 980px;
}
.contract-print-area {
  margin-top: 0;
}
.contract-print-sheet {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 18px;
  box-shadow: none;
  max-width: 980px;
}
.contract-vehicle-specs {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
}
.contract-grid-two {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 8px;
}
.contract-box {
  border: 1px solid var(--border);
}
.contract-box__note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: calc(12px * var(--ui-font-scale));
  white-space: pre-wrap;
}
.quote-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.quote-head h2 {
  margin: 0 0 4px;
  font-size: calc(22px * var(--ui-font-scale));
}
.quote-head p {
  margin: 2px 0;
  font-size: calc(12px * var(--ui-font-scale));
}
.quote-head__box {
  border: 1px solid var(--border);
  min-width: 180px;
  text-align: right;
}
.quote-head__box p {
  margin: 2px 0;
}
.quote-vehicle {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 12px;
  margin-top: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.quote-vehicle__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #f5f7fa;
}
.quote-vehicle__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quote-vehicle__details h3 {
  margin: 0;
  font-size: calc(22px * var(--ui-font-scale));
}
.quote-vehicle__details p {
  margin: 4px 0 0;
  color: #4b5563;
  font-size: calc(12px * var(--ui-font-scale));
}
.quote-vehicle__specs {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
}
.quote-spec {
  border: 1px solid var(--border);
  padding: 7px 8px;
}
.quote-spec span {
  display: block;
  font-size: calc(11px * var(--ui-font-scale));
  text-transform: uppercase;
}
.quote-spec strong {
  display: block;
  margin-top: 4px;
  color: #111827;
  font-size: calc(14px * var(--ui-font-scale));
}
.quote-section-title {
  margin: 0 0 6px;
  font-size: calc(11px * var(--ui-font-scale));
  text-transform: uppercase;
  font-weight: 800;
}
.quote-customer {
  margin-top: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.quote-customer p {
  margin: 2px 0;
  font-size: calc(12px * var(--ui-font-scale));
}
.quote-financial {
  margin-top: 8px;
  border: 1px solid var(--border);
}
.quote-financial__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
  font-size: calc(12px * var(--ui-font-scale));
}
.quote-financial__row:last-child {
  border-bottom: none;
}
.quote-financial__row--total {
  font-weight: 700;
}
.quote-financial__row strong {
  font-variant-numeric: tabular-nums;
}
.quote-notes {
  margin-top: 10px;
}
.quote-notes p {
  margin: 0;
  white-space: pre-wrap;
}
.quote-accessories {
  margin-top: 12px;
}
.quote-accessories__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quote-footer {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.quote-footer p {
  margin: 0;
  color: #6b7280;
  font-size: calc(11px * var(--ui-font-scale));
}
.quote-footer strong {
  display: block;
  margin-top: 3px;
  font-size: calc(12px * var(--ui-font-scale));
}
.quote-footer__signature {
  min-width: 280px;
  border-top: 1px solid #9ca3af;
  padding-top: 8px;
  margin-top: 14px;
}

.mandate-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.78fr);
  gap: 16px;
  align-items: start;
}

.mandate-main-card,
.mandate-side-card {
  min-width: 0;
}

.mandate-main-card {
  padding: 16px;
}

.mandate-hero {
  display: grid;
  grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.mandate-hero__image {
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #f8fafc 0%, #e5edf8 100%);
}

.mandate-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mandate-hero__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mandate-hero__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.mandate-hero__header h2 {
  margin: 4px 0 0;
  font-size: calc(clamp(1.45rem, 1.1rem + 0.55vw, 1.9rem) * var(--ui-font-scale));
  letter-spacing: -0.03em;
}

.mandate-hero__header .muted {
  margin: 6px 0 0;
  max-width: 72ch;
}

.mandate-status-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  min-width: 220px;
}

.mandate-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #f8fafc;
  color: var(--text);
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mandate-status-chip[data-tone="warning"] {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}

.mandate-status-chip[data-tone="ready"] {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.mandate-status-chip[data-tone="done"] {
  background: #ecfdf5;
  border-color: #86efac;
  color: #166534;
}

.mandate-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.mandate-stat {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 11px;
  background: #f8fafc;
}

.mandate-stat p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mandate-stat strong {
  display: block;
  margin: 0;
  color: var(--text);
  font-size: calc(14px * var(--ui-font-scale));
  font-weight: 800;
  word-break: break-word;
}

.mandate-panel-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mandate-panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.mandate-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.mandate-panel__header h3 {
  margin: 4px 0 0;
  font-size: calc(1.02rem * var(--ui-font-scale));
  letter-spacing: -0.02em;
}

.mandate-customer-block__name {
  margin: 0;
  font-size: calc(18px * var(--ui-font-scale));
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mandate-customer-block p {
  margin: 4px 0;
  word-break: break-word;
}

.mandate-inline-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.mandate-fact {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  background: #f8fafc;
}

.mandate-fact--highlight {
  border-color: #bfdbfe;
  background: #eff6ff;
}

.mandate-fact__label {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mandate-fact__value {
  margin: 0;
  color: var(--text);
  font-size: calc(14px * var(--ui-font-scale));
  font-weight: 700;
  word-break: break-word;
  white-space: pre-wrap;
}

.mandate-note-card {
  margin-top: 10px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 10px 11px;
  background: #f8fafc;
}

.mandate-note-card p:last-child {
  margin: 6px 0 0;
  white-space: pre-wrap;
}

.mandate-document-card {
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 12px;
  background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
}

.mandate-document-card__title {
  margin: 0;
  font-size: calc(18px * var(--ui-font-scale));
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mandate-document-card .muted {
  margin: 6px 0 0;
}

.mandate-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mandate-side-card {
  padding: 14px;
}

.mandate-side-card h3 {
  margin: 6px 0 8px;
  letter-spacing: -0.02em;
}

.mandate-side-card--hint {
  background: #f8fafc;
}

.mandate-readiness-meter {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
  margin: 10px 0 12px;
}

.mandate-readiness-meter__bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #93c5fd 0%, #2563eb 100%);
  transition: width 0.18s ease;
}

.mandate-readiness-meter__bar[data-tone="warning"] {
  background: linear-gradient(90deg, #fdba74 0%, #ea580c 100%);
}

.mandate-readiness-meter__bar[data-tone="ready"] {
  background: linear-gradient(90deg, #93c5fd 0%, #2563eb 100%);
}

.mandate-readiness-meter__bar[data-tone="done"] {
  background: linear-gradient(90deg, #86efac 0%, #16a34a 100%);
}

.mandate-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mandate-checklist__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
}

.mandate-checklist__item[data-tone="warning"] {
  background: #fff7ed;
  border-color: #fdba74;
}

.mandate-checklist__item[data-tone="ready"] {
  background: #eff6ff;
  border-color: #93c5fd;
}

.mandate-checklist__item[data-tone="done"] {
  background: #ecfdf5;
  border-color: #86efac;
}

.mandate-checklist__icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 800;
  background: #f3f4f6;
  color: #374151;
}

.mandate-checklist__item[data-tone="warning"] .mandate-checklist__icon {
  background: #fed7aa;
  color: #9a3412;
}

.mandate-checklist__item[data-tone="ready"] .mandate-checklist__icon {
  background: #bfdbfe;
  color: #1d4ed8;
}

.mandate-checklist__item[data-tone="done"] .mandate-checklist__icon {
  background: #bbf7d0;
  color: #166534;
}

.mandate-checklist__text {
  margin: 1px 0 0;
  color: var(--text);
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 600;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .quote-vehicle {
    grid-template-columns: 1fr;
  }
  .mandate-hero {
    grid-template-columns: 1fr;
  }
  .mandate-panel-grid {
    grid-template-columns: 1fr;
  }
  .quote-footer {
    flex-direction: column;
  }
  .quote-footer__signature {
    min-width: 0;
  }
  .accounting-layout-grid {
    grid-template-columns: 1fr;
  }
  .accounting-inline-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1200px) {
  .mandate-workspace {
    grid-template-columns: 1fr;
  }
}

@media print {
  .sidebar,
  .topbar,
  .no-print,
  .section__header {
    display: none !important;
  }
  body,
  .main,
  .app {
    margin: 0;
    padding: 0;
    background: #fff;
  }
  .app {
    display: block;
    min-height: auto;
  }
  .quote-print-area {
    margin: 0;
  }
  .quote-print-sheet {
    border: none;
    box-shadow: none;
    border-radius: 0;
    max-width: none;
    width: 100%;
    padding: 0;
  }
  .contract-print-sheet {
    border: none;
    box-shadow: none;
    border-radius: 0;
    max-width: none;
    width: 100%;
    padding: 0;
  }
}

@media (max-width: 700px) {
  .app { grid-template-columns: 1fr; }

  /* Il pannello che sostituisce il nastro orizzontale: il pulsante che lo apre
     e le regole della barra in alto stanno piu' sotto, accanto a `.app-topbar`
     — li' vanno **dopo** le regole che devono scavalcare, e a parita' di
     specificita' vince l'ultima. Scritte qui non si applicavano affatto. */

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(84vw, 300px);
    height: auto;
    /* La barra in alto sta a 900: sotto, il pannello aperto le finirebbe dietro. */
    z-index: 960;
    overflow-y: auto;
    /* Chiusa non si vede **e non si raggiunge da tastiera**: un menu invisibile
       in cui si puo' entrare col tab e' peggio di nessun menu. */
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s ease;
  }
  .sidebar.is-aperta { transform: none; visibility: visible; }

  .velo-menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 950;
    background: rgba(15, 23, 42, 0.45);
  }
  /* `display: block` qui sopra e' una regola d'autore e batte quella del
     browser: senza questa riga il velo resterebbe steso sulla pagina anche da
     chiuso. E' la stessa trappola dell'immagine del lightbox (6.44). */
  .velo-menu[hidden] { display: none; }

  /* Con il pannello aperto, scorrendo si portava dietro la pagina sotto. */
  body.menu-mobile-aperto { overflow: hidden; }

  .main { padding-left: 16px; padding-right: 16px; padding-bottom: 30px; }
  /* L'intestazione si prendeva la prima schermata. Su parco auto erano ~290px
     di riquadri — campanella, filiale attiva, Filiali, Veicoli, API, la firma
     CarBi, l'account — impilati a due per riga, piu' ottanta pixel di titolo
     ripetuto dalla sezione sotto. Prima di vedere una macchina si scorreva uno
     schermo intero.

     Ora sono **una striscia sola** che scorre di lato: `grid` con `auto-fit`
     mandava a capo, `flex` con `nowrap` no. Da ~370px a ~90. */
  .topbar { flex-direction: column; align-items: flex-start; gap: 6px; }
  .topbar h1 { font-size: calc(22px * var(--ui-font-scale)); }
  .topbar__meta {
    width: 100%;
    display: flex;
    /* **Va a capo, non scorre.** Con `overflow-x: auto` la striscia diventava
       un contenitore che **ritaglia i figli assoluti**: la campanella e il
       menu account stanno dentro di lei e i loro pannelli sono `absolute`,
       quindi si aprivano e venivano tagliati via. Da fuori sembrava che il
       clic non facesse niente — e dal telefono non si riusciva piu' nemmeno a
       uscire o a cambiare password.

       Una riga in piu' quando i contatori sono tanti costa una trentina di
       pixel; un comando che non si raggiunge costa molto di piu'. */
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
  }
  /* Senza, i riquadri si stringono per stare nella riga invece di scorrere. */
  .topbar__meta > * { flex: 0 0 auto; }
  .meta { padding: 5px 10px; border-radius: 8px; }
  .meta .eyebrow { font-size: calc(9.5px * var(--ui-font-scale)); letter-spacing: 0.06em; }
  .meta strong { font-size: calc(13px * var(--ui-font-scale)); }

  /* Marcati da `session.js`: a decidere e' li', a nascondere e' qui — dentro la
     media query, cosi' sul computer restano tutti. */
  .meta--da-scrivania { display: none; }
  .titolo-ripetuto { display: none; }
  /* La firma resta anche sul telefono, ma **impilata**: "powered by" sopra e
     il marchio sotto, accanto al pulsante dell'utente. In riga si prendeva il
     posto di un contatore vero — ed e' per questo che prima spariva del tutto;
     ma sparendo, l'unica cosa che distingue il marchio del cliente da chi fa
     il prodotto non si vedeva proprio dove il gestionale si usa di piu'.
     Impilata sta in una quarantina di pixel.

     Un ID batte `.powered` senza dipendere da dove sta nel foglio, e serve
     anche a riaccendere il testo: `.powered__testo` lo spegne qui sotto per la
     riga, e senza la specificita' dell'ID la scritta non tornerebbe. */
  #powered-by {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-right: 2px;
  }
  #powered-by .powered__testo {
    display: block;
    font-size: calc(9px * var(--ui-font-scale));
    line-height: 1;
  }
  #powered-by .powered__logo { height: calc(14px * var(--ui-font-scale)); }
  .topbar__firma-account {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }

  /* I filtri stanno chiusi finche' non si chiedono: aperti si prendevano
     cinque righe di pastiglie piu' sei campi, e l'elenco cominciava sotto il
     bordo dello schermo. Il pulsante lo mette `core/filtri-telefono.js`. */
  .filtri-apri {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: inherit;
    font-weight: 650;
    font-size: calc(13.5px * var(--ui-font-scale));
    cursor: pointer;
  }
  .filtri-apri svg { width: 17px; height: 17px; }
  .filtri-apri__conto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: calc(11px * var(--ui-font-scale));
  }
  .filtri-apri__conto[hidden] { display: none; }
  .filtri-chiusi { display: none; }

  /* `repeat(auto-fit, minmax(220px, 1fr))` a 356px da' **una** colonna, ma la
     voce larga chiede `grid-column: span 2`: ne nasce una implicita e la
     pagina sfora di quaranta pixel. Con una colonna sola "largo" e' gia'
     tutto. */
  :root { --telefono: 1; }

  .accounting-form-grid { grid-template-columns: 1fr; }

  /* Le regole del calendario stanno piu' sotto, accanto alle sue: li' vanno
     **dopo** quelle che devono scavalcare — a parita' di specificita' vince
     l'ultima, ed e' la seconda volta che questa svista costa una prova. */
  .accounting-form-grid__wide { grid-column: auto; }

  /* La campanella sta a sinistra, ma il suo pannello e' ancorato a destra:
     a 390px usciva dallo schermo dalla parte opposta — 312px di larghezza a
     x=-252, cioe' visibile per un dito. Qui si ancora a sinistra e si tiene
     dentro i bordi. */
  .alerts-bell__panel {
    left: 0;
    right: auto;
    width: min(340px, calc(100vw - 32px));
  }

  /* Le righe di un elenco diventano schede. Undici colonne a 390px o scorrono
     di lato — e meta' non si vedono, senza che niente lo dica — o si stringono
     fino a mandare ogni parola a capo. L'etichetta di ogni riga la stampa
     `tabelle-telefono.js` leggendo l'intestazione della colonna. */
  .tabella-impilata thead { display: none; }
  .tabella-impilata,
  .tabella-impilata tbody,
  .tabella-impilata tr,
  .tabella-impilata td { display: block; width: auto; }
  .tabella-impilata { border: 0; }
  .tabella-impilata tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  /* L'elenco ha gia' il suo fondo: la riga evidenziata al passaggio del mouse
     non vuol dire niente su un telefono, e qui colorerebbe una scheda intera. */
  .tabella-impilata tbody tr:hover { background: var(--card); }
  .tabella-impilata td {
    border: 0;
    padding: 3px 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    white-space: normal;
  }
  .tabella-impilata td::before {
    content: attr(data-etichetta);
    flex: 0 0 34%;
    color: var(--muted);
    font-size: calc(10.5px * var(--ui-font-scale));
    font-weight: 650;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  /* "MANDATO —" su ogni riga e' rumore che allunga la scheda senza dire
     niente: la voce vuota non si scrive. */
  /* Certe celle hanno un layout loro dentro — nel parco auto la descrizione e'
     nome, pastiglia, targa, km e venditore in riga — e senza `min-width: 0` un
     figlio flex non scende sotto la larghezza del suo contenuto: a scorrere
     tornava la pagina intera. E' la terza volta che questa regola serve
     (§6.45): la griglia del calendario, la barra in alto, e qui. */
  .tabella-impilata td > * { min-width: 0; max-width: 100%; }
  .tabella-impilata td { flex-wrap: wrap; }
  .tabella-impilata td[data-vuota] { display: none; }
  /* "Nessun veicolo" e i totali: una riga sola, senza etichette a indice. */
  .tabella-impilata tr[data-riga-libera] td::before { content: none; }
  .tabella-impilata tr[data-riga-libera] td { display: block; }

  /* ---- La riga di un veicolo non si impila: si disegna ----
     Impilata veniva male, e il motivo e' che le sue celle non sono valori: la
     "descrizione" e' gia' un piccolo layout suo — nome, pastiglia del carico,
     targa, km, venditore — quindi "DESCRIZIONE:" seguito da quel blocco dava
     un ammasso, e accanto comparivano righe come "FORNITORE n/d".

     Qui la riga diventa una scheda: foto a sinistra, nome e dati a destra,
     sotto stato e giacenza, e il prezzo in fondo. Le classi le mette
     `tabelle-telefono.js` guardando cosa c'e' dentro le celle. Quello che non
     e' elencato qui sparisce: numero, data di inserimento e fornitore su un
     telefono non si leggono. */
  .tabella-impilata .riga-veicolo {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr) auto;
    align-items: start;
    gap: 5px 10px;
  }
  .tabella-impilata .riga-veicolo > td { display: none; padding: 0; }
  .tabella-impilata .riga-veicolo > td::before { content: none; }

  .tabella-impilata .riga-veicolo > .cella-foto {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  .tabella-impilata .cella-foto .table-image { width: 86px; height: 65px; border-radius: 8px; }
  .tabella-impilata .riga-veicolo > .cella-titolo { display: block; grid-column: 2 / -1; grid-row: 1; }
  .tabella-impilata .riga-veicolo > .table-actions {
    display: block;
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
    align-self: center;
  }
  .tabella-impilata .riga-veicolo > .cella-stato { display: block; grid-column: 2; grid-row: 2; }
  .tabella-impilata .riga-veicolo > .cella-giacenza {
    display: block;
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }
  .tabella-impilata .riga-veicolo > .cella-prezzo {
    display: block;
    grid-column: 2;
    grid-row: 3;
    align-self: center;
  }
  /* Il prezzo e' la cosa che si cerca: si legge senza doverla cercare. */
  .tabella-impilata .vehicle-price-cell {
    font-size: calc(17px * var(--ui-font-scale));
    font-weight: 750;
  }
  /* Il nome va a capo invece di uscire dalla scheda, e la pastiglia del
     carico scende sotto: in mezzo alle parole spezzava "Fiat 500 1.2 Lounge"
     in "Fiat 500 1.2 [Acquisto] Lounge". */
  .tabella-impilata .table-title { white-space: normal; display: block; }
  .tabella-impilata .table-title strong { display: block; }
  .tabella-impilata .table-meta {
    white-space: normal;
    font-size: calc(11px * var(--ui-font-scale));
    line-height: 1.35;
  }
  .section__header { align-items: flex-start; }
  .quote-customer-picker {
    grid-template-columns: 1fr;
  }
  .customer-picker-modal {
    padding: 12px;
  }
  .customer-picker-modal__panel {
    max-height: 90vh;
  }
}
/* La scadenza si legge dal colore prima che dalla data: rosso quella passata,
   ambra quella entro la settimana. La scritta sotto dice quanti giorni, cosi'
   il colore non e' l'unica informazione. */
.payable-scadenza { white-space: nowrap; }
.payable-scadenza--scaduta { color: #b91c1c; }
.payable-scadenza--vicina { color: #b45309; }

.payable-status-dot {
  width: 34px;
  height: 34px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: calc(14px * var(--ui-font-scale));
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.payable-status-dot svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.payable-status-dot.is-empty {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #4b5563;
}

.payable-status-dot.is-partial {
  background: #ffedd5;
  border-color: #fdba74;
  color: #c2410c;
}

.payable-status-dot.is-balanced {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

/* Rosso velato, lo stesso di ogni altro rosso del gestionale: `is-da-pagare`
   e' la fattura su cui non e' ancora uscito niente, `is-over` quella pagata
   piu' del dovuto. Sono due stati diversi con la stessa tinta, e va bene
   cosi': l'uno si legge sull'elenco, l'altro aprendo i pagamenti. */
.payable-status-dot.is-da-pagare,
.payable-status-dot.is-over {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.payable-status-dot:hover,
.payable-status-dot.is-open {
  background: #dbeafe;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* **Costo si' o no, dall'elenco.** Verde pieno con la spunta quando la
   fattura conta fra i costi dell'auto, tratteggiato e smorto quando e' solo
   collegata: la parola accompagna sempre il colore. */
.payable-costo {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px dashed #d1d5db;
  border-radius: 999px;
  background: #f9fafb;
  color: #6b7280;
  font: inherit;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.payable-costo.is-costo {
  border-style: solid;
  border-color: #86efac;
  background: var(--ok-soft);
  color: var(--ok-ink);
}
.payable-costo:hover { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); }
.payable-costo:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.payable-costo:disabled { cursor: progress; opacity: .6; }

.payable-expanded-row td {
  background: #f8fbff;
}

.payable-inline-panel {
  padding: 0.75rem 0;
}

.payable-installment-paybox {
  display: grid;
  grid-template-columns: 160px 160px auto 120px;
  gap: 0.75rem;
  align-items: center;
}

.payable-installment-paybox__cashbook {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid #dbe7f3;
  border-radius: 14px;
  background: #ffffff;
}

.payable-installment-paybox__cashbook label {
  display: grid;
  gap: 0.35rem;
}

.payable-installment-paybox__description {
  grid-column: span 1;
}

.payable-installment-paid {
  display: grid;
  gap: 0.25rem;
}

@media (max-width: 1100px) {
  .payable-installment-paybox {
    grid-template-columns: 1fr;
  }

  .payable-installment-paybox__cashbook {
    grid-template-columns: 1fr;
  }
}

.numbering-settings-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 1rem;
}

.numbering-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  justify-content: flex-start;
}

.numbering-settings-group {
  display: grid;
  gap: 0.9rem;
  padding: 18px;
  border: 1px solid #d7e3ef;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdff 0%, #f6f9fc 100%);
}

.numbering-settings-group__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e3ebf3;
}

.numbering-settings-group__header h2 {
  margin: 0;
  font-size: calc(1.02rem * var(--ui-font-scale));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #12324a;
}

.numbering-settings-group__header p {
  margin: 4px 0 0;
  font-size: calc(12px * var(--ui-font-scale));
}

.numbering-settings-grid--sales,
.numbering-settings-grid--invoices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.numbering-settings-grid--tulps {
  grid-template-columns: repeat(2, minmax(320px, calc((100% - 2rem) / 3)));
  justify-content: flex-start;
}

@media (max-width: 1280px) {
  .numbering-settings-grid--sales,
  .numbering-settings-grid--invoices,
  .numbering-settings-grid--tulps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .numbering-settings-grid--sales,
  .numbering-settings-grid--invoices,
  .numbering-settings-grid--tulps {
    grid-template-columns: 1fr;
  }

  .numbering-settings-group {
    padding: 14px;
  }
}

.numbering-settings-card {
  display: grid;
  gap: 0.85rem;
}

.numbering-settings-preview-box {
  display: grid;
  gap: 0.2rem;
  min-width: 160px;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  border: 1px solid #d7e3ef;
  background: linear-gradient(135deg, #f7fbff 0%, #eef5fb 100%);
  text-align: right;
}

.numbering-settings-preview-box strong {
  font-size: calc(1.05rem * var(--ui-font-scale));
  color: #12324a;
}

.numbering-settings-note {
  margin: -0.15rem 0 0;
}

.numbering-settings-checkbox {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 600;
  color: #1f2937;
}

.numbering-settings-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* ============================================================
   TEMA MODERNO — layer di restyling globale
   Aggiornato: 2026-07. Ridefinisce token e componenti core
   (sidebar, topbar, card, bottoni, form, tabelle, modali).
   Le regole qui sotto vincono sulle precedenti a pari
   specificità: mantenere questo blocco in fondo al file.
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f4f6fa;
  --card: #ffffff;
  --text: #101828;
  --muted: #5f6b7e;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --border: #e3e8f0;
  --pill: #eef3ff;
  --shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 8px -2px rgba(15, 23, 42, 0.07);
  --radius: 12px;
  --radius-sm: 8px;
  --sidebar: #0e1626;
  --sidebar-text: #e7ecf4;
  --sidebar-muted: #8b96ab;
  --surface: #f8fafd;
  --surface-strong: #eef2f8;
  --focus-ring: 0 0 0 3.5px rgba(37, 99, 235, 0.16);

  /* Le famiglie semantiche del guscio: sono i nomi che il tema
     scuro dovra' ridefinire, ed e' l'unico motivo per cui hanno un
     token. I valori sono quelli che c'erano nelle regole, invariati. */
  --danger: #dc2626;  /* il rosso pieno: il pallino degli avvisi, il fondo del bottone */
  --danger-strong: #b91c1c;  /* il rosso scuro: l'inchiostro su fondo tenue */
  --danger-soft: #fee2e2;  /* il fondo tenue, sotto un inchiostro rosso */
  --ok: #15803d;  /* il verde pieno */
  --ok-ink: #166534;  /* l'inchiostro verde sul fondo tenue */
  --ok-soft: #dcfce7;  /* il fondo tenue, sotto un inchiostro verde */
}

body {
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(900px 320px at 90% -5%, rgba(37, 99, 235, 0.05), transparent 60%),
    var(--bg);
  line-height: 1.45;
}

::selection { background: rgba(37, 99, 235, 0.18); }

h1, h2, h3, h4 { font-weight: 700; }

/* --- Scrollbar --- */
* { scrollbar-width: thin; scrollbar-color: #c3ccda transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #c3ccda;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: #a6b2c5; background-clip: content-box; }

/* --- Sidebar --- */
.sidebar {
  /* La sfumatura passa da una variabile perche' il marchio dell'istanza puo'
     cambiarla (`core/marchio.js`). Il valore qui e' quello di CarBi, ed e'
     anche il ripiego: senza personalizzazione la barra resta identica. */
  background: var(--sidebar-gradient, linear-gradient(180deg, #0f1a30 0%, #0c1424 55%, #0a111e 100%));
  box-shadow: inset -1px 0 0 rgba(148, 163, 184, 0.08);
  padding: 20px 14px;
}
.sidebar__select {
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sidebar__select:hover { border-color: rgba(148, 163, 184, 0.4); }
.sidebar__select:focus { outline: none; border-color: #3b82f6; box-shadow: var(--focus-ring); }
/* **La tendina aperta la disegna il sistema, non la barra laterale.** Il
   controllo chiuso e' chiaro su fondo scuro, e il sistema riusa quel colore
   per l'elenco che apre — dove il fondo pero' e' bianco: con piu' di una sede
   i nomi delle filiali erano bianco su bianco, illeggibili. Le voci si
   dichiarano quindi per conto loro, e restano leggibili anche sotto un marchio
   dal fondo chiaro. */
.sidebar__select option,
.sidebar__select optgroup {
  color: #111827;
  background: #fff;
}
.nav__item {
  border-radius: 9px;
  padding: 9px 11px;
  color: #c3cbdb;
  font-weight: 600;
  transition: background 0.14s ease, color 0.14s ease;
}
.nav__item:hover { background: rgba(148, 163, 184, 0.1); color: #fff; }
.nav__item.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.95) 0%, rgba(37, 99, 235, 0.95) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(37, 99, 235, 0.6);
}
.nav__icon { color: inherit; opacity: 0.9; }
.nav-sub__item {
  border-radius: 8px;
  color: #aeb8ca;
  font-weight: 550;
  transition: background 0.14s ease, color 0.14s ease;
}
.nav-sub__item:hover { background: rgba(148, 163, 184, 0.1); color: #fff; }
.nav-sub__item.active {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.28);
  color: #fff;
}

/* --- Topbar --- */
.topbar { border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 18px; }
.topbar h1 { font-weight: 750; letter-spacing: -0.03em; }
.eyebrow { letter-spacing: 0.1em; font-weight: 650; font-size: calc(11px * var(--ui-font-scale)); }
.meta {
  border-radius: 10px;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  padding: 8px 12px;
}
.meta strong { font-size: calc(16px * var(--ui-font-scale)); font-variant-numeric: tabular-nums; }
.alerts-bell__btn {
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.alerts-bell__panel { border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }

/* --- Card e metriche --- */
.card {
  border-radius: var(--radius);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}
.card.metric { border-radius: var(--radius); }
.card.metric > p.muted {
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 600;
  letter-spacing: 0.01em;
}
.card.metric h3 {
  margin: 6px 0 2px;
  font-size: calc(26px * var(--ui-font-scale));
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.metric--available { background: linear-gradient(135deg, #fff8ef 0%, #ffedd5 100%); border-color: #fbd8a8; }
.metric--available h3 { color: #b45309; }
.metric--loaded { background: linear-gradient(135deg, #f0f3ff 0%, #e0e7ff 100%); border-color: #c0c9f7; }
.metric--loaded h3 { color: #4338ca; }
.metric--sold { background: linear-gradient(135deg, #f0fdf5 0%, #dcfce7 100%); border-color: #a9ecc0; }
.metric--sold h3 { color: #15803d; }
.metric--returned { background: linear-gradient(135deg, #fef2f6 0%, #fce8ef 100%); border-color: #f4b3c6; }
.metric--returned h3 { color: #be123c; }
/* Le auto consegnate: la dashboard di una concessionaria non ha questa
   casella, i numeri del gruppo si'. Prende un colore suo — non il verde delle
   vendute, che accanto le farebbe leggere come la stessa cosa — cosi' le
   caselle di stato restano tutte colorate e le altre tutte bianche, che e' la
   regola con cui si legge la dashboard. */
.metric--delivered { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-color: #a8d8f4; }
.metric--delivered h3 { color: #0369a1; }

/* --- Bottoni --- */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 650;
  letter-spacing: 0;
  transition: transform 0.1s ease, box-shadow 0.18s ease, background 0.18s ease,
    border-color 0.18s ease, color 0.18s ease, filter 0.18s ease;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.3); }
.btn.primary {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border-color: #1e55d6;
  box-shadow: 0 2px 6px -1px rgba(29, 78, 216, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn.primary:hover {
  background: linear-gradient(180deg, #4b8dfa 0%, #2f6bf0 100%);
  box-shadow: 0 6px 14px -4px rgba(29, 78, 216, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn.success {
  background: linear-gradient(180deg, #16a34a 0%, var(--ok) 100%);
  border-color: #136f36;
  box-shadow: 0 2px 6px -1px rgba(21, 128, 61, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.btn.success:hover { box-shadow: 0 6px 14px -4px rgba(21, 128, 61, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.btn.danger {
  background: linear-gradient(180deg, #ef4444 0%, var(--danger) 100%);
  border-color: #c22020;
  box-shadow: 0 2px 6px -1px rgba(185, 28, 28, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.btn.danger:hover { box-shadow: 0 6px 14px -4px rgba(185, 28, 28, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.btn.ghost {
  box-shadow: var(--shadow-sm);
  transition: transform 0.1s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn.ghost:hover { border-color: #c4cede; background: #f8fafd; transform: translateY(-1px); }
.btn:active { transform: translateY(0); filter: brightness(0.97); }
.btn-sm { border-radius: 7px; }

/* --- Form e input --- */
.form input, .form select, .form textarea,
/* I movimenti dell'estratto conto e degli atti non stanno dentro un `.form`:
   erano gli unici campi dell'applicazione con il riquadro squadrato del
   browser e un carattere diverso. */
.deed-payment-row input, .deed-payment-row select,
.customer-search-input,
.customer-picker-modal__search,
.filter-bar .filter-field input,
.filter-bar .filter-field select {
  border-radius: var(--radius-sm);
  border-color: #d6deea;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.form input:hover, .form select:hover, .form textarea:hover,
.deed-payment-row input:hover, .deed-payment-row select:hover,
.customer-search-input:hover,
.filter-bar .filter-field input:hover,
.filter-bar .filter-field select:hover { border-color: #b9c5d8; }
.form input:focus,
.form select:focus,
.form textarea:focus,
.customer-search-input:focus,
.customer-picker-modal__search:focus,
.filter-field input:focus,
.filter-field select:focus,
.filter-bar .filter-field input:focus,
.filter-bar .filter-field select:focus,
.finance-inline-commission:focus {
  outline: none;
  border-color: #7fa7f4;
  box-shadow: var(--focus-ring);
}
.form label { font-weight: 650; }
.field-checkbox { border-radius: var(--radius-sm); }
.segmented { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.segmented__item { transition: background 0.15s ease, color 0.15s ease; }

/* --- Tab --- */
.form-tab, .view-tab {
  border-radius: var(--radius-sm);
  font-weight: 650;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-tab:hover, .view-tab:hover { border-color: #b9c5d8; background: #f8fafd; }
.form-tab.is-active, .view-tab.is-active {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border-color: #1e55d6;
  color: #fff;
  box-shadow: 0 2px 6px -1px rgba(29, 78, 216, 0.4);
}

/* --- Chip e filtri --- */
.chip { transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.chip:hover { box-shadow: var(--shadow-sm); }
.chip.active { box-shadow: 0 2px 8px -2px rgba(29, 78, 216, 0.45); border-color: transparent; }
.period-btn { border-radius: 7px; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.period-btn.active { box-shadow: 0 2px 6px -2px rgba(29, 78, 216, 0.45); }

/* --- Tabelle --- */
.table-wrapper {
  border-radius: 10px;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
th {
  background: #f7f9fc;
  color: #5b6779;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 700;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #dfe6ef;
}
td { border-bottom: 1px solid #eef2f7; }
th, td { padding: 9px 11px; }
table.table--compact th, table.table--compact td { padding: 5px 7px; }
.tulps-register-table th, .tulps-register-table td { padding: 2px 4px !important; }
tbody tr { transition: background 0.1s ease; }
tbody tr:hover { background: #f0f6ff; }
.table-wrapper tbody tr:nth-child(even) { background: #fbfcfe; }
.table-wrapper tbody tr:nth-child(even):hover { background: #f0f6ff; }
.table-row-menu__toggle { border-radius: 8px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.table-row-menu__list { border-radius: 10px; box-shadow: var(--shadow); padding: 6px; }
.table-row-menu__item { border-radius: 7px; transition: background 0.12s ease; }
.table-image { border-radius: 8px; }

/* --- Badge, pill, tag --- */
.pill { border-color: #cdddfd; font-weight: 650; }
.badge, .load-type-tag { border-radius: 999px; padding: 4px 10px; }
.sale-type-tag { border-radius: 7px; }
.detail-chip { border-radius: 7px; }
.detail-item { border-radius: var(--radius-sm); }

/* --- Modali e dialoghi --- */
.accounting-modal__backdrop,
.app-dialog-backdrop,
.customer-picker-modal__backdrop {
  background: rgba(9, 14, 26, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.accounting-modal__panel {
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 18px;
  border-color: rgba(227, 232, 240, 0.9);
}
.app-dialog {
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 18px;
}
.customer-picker-modal__panel { border-radius: 14px; box-shadow: var(--shadow); }
.customer-picker-modal__header { background: linear-gradient(180deg, #f8fafd 0%, #f1f5fa 100%); }
.causal-picker-modal__panel { border-radius: 14px; }

/* --- Dropzone e pannelli --- */
.payable-import-dropzone,
.deed-documents-dropzone,
.e-invoicing-dropzone { border-radius: var(--radius); }
.customer-form-section,
.contract-form-section,
.vehicle-info-section,
.customer-form-section,
.quote-form-section,
.vehicle-info-section { border-radius: 10px; }
.accounting-installments { border-radius: var(--radius-sm); }

/* --- Sezioni e varie --- */
.section__header { margin-bottom: 10px; }
.section h2 { font-weight: 700; letter-spacing: -0.02em; }
.vehicle-card { border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow 0.18s ease, border-color 0.18s ease; }
.vehicle-card:hover { box-shadow: var(--shadow); border-color: #d3ddeb; }
.vehicle-card__img { border-radius: var(--radius-sm); }
.gallery-item { border-radius: var(--radius-sm); }
.gallery-add { border-radius: var(--radius-sm); transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.gallery-add:hover { border-color: #7fa7f4; color: var(--accent); background: #f5f9ff; }
.footer { background: transparent; }

/* --- Anteprime documento (contratto / preventivo) --- */
.quote-print-sheet,
.contract-print-sheet {
  border-radius: 14px;
  border-color: #dde5f0;
  box-shadow: 0 14px 36px -14px rgba(15, 23, 42, 0.2), 0 3px 10px -5px rgba(15, 23, 42, 0.08);
  padding: 28px 32px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.quote-head {
  border-bottom: 2px solid var(--accent);
  padding-bottom: 14px;
}
.quote-head h2 { font-weight: 800; letter-spacing: -0.025em; }
.quote-head > div:first-child p { color: var(--muted); }
.quote-head__box {
  border-radius: 10px;
  border-color: #cdddfd;
  background: #eef4ff;
  padding: 10px 14px;
}
.quote-head__box p:first-child {
  color: #1d4ed8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: calc(12px * var(--ui-font-scale));
}
.quote-vehicle { border-bottom-color: #eef2f7; }
.quote-vehicle__image { border-radius: 10px; border-color: #e3e8f0; }
.quote-vehicle__details h3 { font-weight: 800; letter-spacing: -0.02em; }
.quote-spec {
  border-radius: 8px;
  border-color: #e5eaf2;
  background: #f8fafd;
}
.quote-spec span {
  color: #3a5a9b;
  font-weight: 650;
  letter-spacing: 0.06em;
}
.quote-section-title { color: #1d4ed8; letter-spacing: 0.12em; }
.quote-customer { border-bottom-color: #eef2f7; }
.quote-financial {
  border-radius: 10px;
  overflow: hidden;
  border-color: #e5eaf2;
}
.quote-financial__row { border-bottom-color: #eef2f7; }
.quote-financial__row--total {
  background: #16233b;
  color: #fff;
}
.contract-box {
  border-radius: 10px;
  border-color: #e5eaf2;
  padding: 12px 14px;
  background: #fbfcfe;
}
.quote-footer {
  border-top: 2px solid var(--accent);
  padding-top: 12px;
}
.quote-footer__signature { border-top-color: #33415c; }

/* --- Logo documenti (impostazioni profilo fatturazione) --- */
.invoicing-logo-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.invoicing-logo-row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.invoicing-logo-preview {
  flex: 0 0 auto;
  width: 220px;
  min-height: 96px;
  display: grid;
  place-items: center;
  border: 1px dashed #c3cede;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}
.invoicing-logo-preview img {
  max-width: 100%;
  max-height: 96px;
  object-fit: contain;
  display: block;
}
/* `hidden` funziona con `display: none` del browser: una regola d'autore che
   dichiara `display` la scavalca, e senza logo si vedeva l'icona di immagine
   rotta accanto a "Nessun logo caricato". */
.invoicing-logo-preview img[hidden] { display: none; }
.invoicing-logo-actions {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invoicing-logo-actions p { margin: 0; font-size: calc(13px * var(--ui-font-scale)); }

/* --- Visualizzatore PDF a schermo pieno --- */
.accounting-modal:has(.invoice-viewer-modal__panel) {
  padding: 12px;
}
.accounting-modal__panel.invoice-viewer-modal__panel {
  width: min(1680px, calc(100vw - 24px));
  height: calc(100vh - 24px);
  max-height: calc(100vh - 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}
.invoice-viewer-modal__panel .accounting-modal__header {
  margin-bottom: 0;
}
.invoice-viewer-modal__panel .invoice-viewer-body {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}
.invoice-viewer-modal__panel .invoice-viewer-panel {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}
.invoice-viewer-modal__panel .invoice-viewer-panel iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
}
/* `.invoice-viewer-modal__panel .invoice-viewer-panel` (0,2,0) batte `.hidden`
   (0,1,0): il pannello nascosto restava in griglia sotto quello mostrato — con
   XML e PDF insieme si vedeva l'anteprima PDF sotto la fattura resa. La stessa
   trappola del lightbox e della scheda Indicata (§6.44, §6.46). */
.invoice-viewer-modal__panel .invoice-viewer-panel.hidden {
  display: none;
}

/* La ripartizione di una fattura sulle auto, nel partitario passivo. */
.payable-ripartizione {
  display: grid;
  gap: 6px;
}
.payable-ripartizione[hidden] {
  display: none;
}
.payable-ripartizione__elenco {
  margin: 0;
  padding: 0 0 0 26px;
  list-style: none;
  display: grid;
  gap: 2px;
  font-size: calc(13px * var(--ui-font-scale));
}
.payable-ripartizione__elenco li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}

/* ==== Barra superiore applicazione ==== */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--sidebar);
  color: var(--sidebar-text);
  padding: 0 18px;
  height: 52px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 10px rgba(15, 23, 42, 0.25);
}
.app-topbar__nav { display: flex; align-items: center; gap: 6px; }
.app-topbar--beside-sidebar {
  position: fixed;
  top: 0;
  left: 260px;
  right: 0;
}
.has-beside-topbar .app .main { padding-top: 70px; }
.app-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 6px;
  color: var(--sidebar-text);
  font-size: calc(13.5px * var(--ui-font-scale));
  font-weight: 600;
  border: 1px solid transparent;
}
.app-topbar__link:hover { background: rgba(255, 255, 255, 0.07); }
.app-topbar__link.active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.16);
}
.app-topbar__link-icon { font-size: calc(15px * var(--ui-font-scale)); }
/* L'avviso che la bozza e' tornata (core/bozza-pagina.js): dice che i campi
   non sono quelli salvati, ma quelli che si stavano scrivendo. */
.bozza-avviso {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 1200;
  background: var(--sidebar);
  color: var(--sidebar-text);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: calc(13.5px * var(--ui-font-scale));
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
  max-width: calc(100vw - 32px);
}
/* Un `<button>` porta con se' fondo e carattere del sistema: si riportano a
   quelli delle voci accanto, altrimenti sarebbe l'unico riquadro grigio della
   barra. */
.app-topbar__indietro {
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  flex: 0 0 auto;
}

@media (max-width: 700px) {
  /* La barra usciva **sopra** il contenuto come un nastro orizzontale: con una
     quindicina di voci che vanno a capo si prendeva mezzo schermo, e per
     arrivare alla pagina bisognava scorrere oltre il menu ogni volta. Ora esce
     dalla pagina e si riapre dal pulsante qui sotto.

     Il pulsante sta dentro la barra in alto che c'e' gia': una seconda barra
     fissa a `top: 0` le finiva sovrapposta, ed e' un difetto che si vede solo
     aprendo la pagina. */
  .app-topbar--beside-sidebar { left: 0; }
  .app-topbar { padding: 0 8px; gap: 8px; }
  /* Le voci non ci stanno in 390px: scorrono invece di sfondare la pagina.
     `min-width: 0` non e' decorativo — senza, un figlio flex non scende sotto
     la larghezza del suo contenuto e a scorrere sarebbe la pagina intera. */
  .app-topbar__nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .app-topbar__nav::-webkit-scrollbar { display: none; }
  .app-topbar__link { flex: 0 0 auto; }
  /* Sul telefono resta la sola freccia: la scritta si prenderebbe il posto
     di una voce del menu. */
  .app-topbar__indietro { padding: 7px 10px; }
  .app-topbar__indietro-testo { display: none; }

  .menu-telefono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sidebar-text);
    cursor: pointer;
  }
  .menu-telefono svg { width: 24px; height: 24px; }
  /* Attaccato all'intestazione della pagina invece che alla barra dell'app —
     e' il caso di chi non ha la barra di navigazione fra applicazioni — il
     fondo e' chiaro e `--sidebar-text` sparirebbe. Nel gestionale il pulsante
     sta dentro `.app-topbar`, mai figlio diretto di `.topbar`: questa riga
     non lo tocca. */
  .topbar > .menu-telefono { color: var(--text); }
  .marchio--barra-chiara .menu-telefono { color: #374151; }
}

/* ==== Layout pagine standalone (senza sidebar) ==== */
.standalone-page { background: var(--bg); }
.standalone-main {
  max-width: min(var(--content-max-width), 1560px);
  margin: 0 auto;
  padding: 26px 28px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.standalone-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.standalone-header h1 { margin: 4px 0 6px; }
.standalone-header .muted { margin: 0; }

/* ==== Pagina statistiche ==== */
.stats-filters { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.stats-filters__quick { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.stats-filters__quick .btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.stats-filters__dates { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.stats-filters__dates label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--muted);
  font-weight: 600;
}
.stats-filters__dates input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  background: #fff;
}
.stats-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.stats-kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid #94a3b8;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stats-kpi--blue { border-left-color: #3b82f6; }
.stats-kpi--amber { border-left-color: #f59e0b; }
.stats-kpi--green { border-left-color: #16a34a; }
.stats-kpi--red { border-left-color: #dc2626; }
.stats-kpi--slate { border-left-color: #64748b; }
.stats-kpi__label {
  font-size: calc(12px * var(--ui-font-scale));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 650;
}
.stats-kpi__value { font-size: calc(22px * var(--ui-font-scale)); letter-spacing: -0.01em; }
.stats-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.stats-chart-card { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.stats-chart-card--wide { grid-column: 1 / -1; }
.stats-chart-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.stats-chart-card__head h2 { margin: 0; font-size: calc(16px * var(--ui-font-scale)); }
.stats-chart svg { width: 100%; height: auto; display: block; }
.stats-chart--donut { display: grid; place-items: center; }
.stats-donut-wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; }
.stats-donut-wrap svg { width: 190px; height: 190px; flex: 0 0 auto; }
.stats-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: calc(12.5px * var(--ui-font-scale));
  color: var(--muted);
  align-items: center;
}
.stats-legend--column { flex-direction: column; align-items: flex-start; gap: 8px; }
.stats-legend--column strong { color: var(--text); margin-left: 6px; }
.stats-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stats-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.stats-empty { color: var(--muted); margin: 24px 0; text-align: center; }
/* Uscite di cassa per gruppo di voci (Statistiche + Impostazioni -> Gruppi
   statistiche). I riquadri stanno affiancati finche' c'e' posto: sono da
   leggere a colpo d'occhio, uno sotto l'altro sarebbero una lista. */
/* Voltura esclusa: la sezione resta visibile ma spenta. Nasconderla toglierebbe
   il modo di vedere che cosa si sta escludendo. */
.contract-transfer-section.is-esclusa .contract-form-grid,
.contract-transfer-section.is-esclusa #contract-ipt-helper { opacity: 0.5; }
/* I campi in sola lettura sono gia' grigi: gli altri lo diventano da spenti,
   altrimenti nella stessa griglia se ne vedono due specie. */
.contract-transfer-section.is-esclusa input:disabled,
.contract-transfer-section.is-esclusa select:disabled { background: var(--surface, #f9fafc); }

.stats-groups-card { padding: 18px; }
/* I riquadri in griglia, il totale sotto. Con il totale **dentro** la griglia
   (`grid-column: 1/-1`) le colonne non risultano piu' vuote, `auto-fit` non le
   accorpa, e due gruppi restano larghi il minimo con il resto della scheda
   bianco. */
.stats-groups { display: flex; flex-direction: column; gap: 14px; }
.stats-groups__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(280px * var(--ui-font-scale)), 1fr));
  gap: 14px;
}
.stats-group {
  border: 1px solid var(--border, #e3e8f0);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Le voci senza gruppo non sono un gruppo: si vedono, ma smorzate, perche'
   sono una configurazione da finire e non una categoria di spesa. */
.stats-group--unassigned {
  border-style: dashed;
  background: #fbfcfe;
}
.stats-group__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.stats-group__head h3 {
  margin: 0;
  font-size: calc(15px * var(--ui-font-scale));
}
.stats-group__total {
  font-size: calc(18px * var(--ui-font-scale));
  white-space: nowrap;
}
/* Il segno della cassa si legge anche dal colore: verde quello che entra,
   rosso quello che esce. Il segno resta scritto — chi non distingue i due
   colori deve vedere lo stesso di che verso e' il numero. */
.is-positivo { color: #047857; }
.is-negativo { color: #b91c1c; }
.stats-groups__totale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 2px solid var(--border, #e3e8f0);
  padding: 14px 4px 2px;
}
.stats-groups__totale .eyebrow { margin: 0 0 2px; }
.stats-groups__totale-meta { margin: 0; font-size: calc(12px * var(--ui-font-scale)); }
.stats-groups__totale-valore {
  font-size: calc(22px * var(--ui-font-scale));
  white-space: nowrap;
}
/* --- Breakeven -----------------------------------------------------------
   Le due voci del conto sopra, il risultato sotto e staccato da una riga: e'
   la stessa forma del totale dei gruppi, perche' e' la stessa specie di
   numero — il conto si legge, non si prende per buono. */
.breakeven__conto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 24px;
}
.breakeven__voce {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border, #e3e8f0);
}
.breakeven__voce strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.breakeven__risultato {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 2px solid var(--border, #e3e8f0);
  margin-top: 12px;
  padding: 14px 4px 2px;
}
.breakeven__risultato .eyebrow { margin: 0 0 2px; }
.breakeven__meta { margin: 0; font-size: calc(12px * var(--ui-font-scale)); }
.breakeven__valore {
  font-size: calc(22px * var(--ui-font-scale));
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stats-group__meta {
  margin: 0;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--muted, #7a8699);
}
/* L'avviso sul gruppo che mescola incassi e costi: si legge, non allarma —
   e' una configurazione da sistemare, non un guasto. */
.stats-group__avviso {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  font-size: calc(12px * var(--ui-font-scale));
  color: #9a3412;
  line-height: 1.45;
}
.stats-group__avviso a { color: inherit; }
.stats-group__tipo {
  font-style: normal;
  font-size: calc(10px * var(--ui-font-scale));
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #15803d;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  border-radius: 5px;
  padding: 0 4px;
  margin-left: 4px;
}
.stats-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stats-group__voce > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: calc(13px * var(--ui-font-scale));
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.stats-group__voce > button:hover { background: #f2f6fc; }
.stats-group__voce.is-open > button { background: #eef4ff; font-weight: 600; }
.stats-group__voce span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* `table-layout: fixed` con le larghezze dichiarate: lasciandole dedurre, la
   colonna della descrizione riceveva pochi pixel e ogni riga usciva tagliata
   dopo due lettere. */
.stats-group__movimenti {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 4px 0 8px;
  font-size: calc(12px * var(--ui-font-scale));
}
.stats-group__movimenti td {
  padding: 4px 8px;
  border-bottom: 1px solid #eef2f8;
  color: var(--muted, #7a8699);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-group__movimenti td:first-child { width: calc(72px * var(--ui-font-scale)); }
.stats-group__movimenti td:last-child { width: calc(88px * var(--ui-font-scale)); }
.stats-group__importo {
  text-align: right;
  white-space: nowrap;
  color: #b45309;
}
/* Un rientro dentro un gruppo di costi non e' una spesa: si distingue, o il
   totale netto sembra sbagliato. */
.stats-group__importo.is-entry { color: #15803d; }
.stats-group__movimenti-vuoti {
  margin: 4px 0 8px 8px;
  font-size: calc(12px * var(--ui-font-scale));
}
.stats-group__more { align-self: flex-start; }
.stats-group-name { width: 100%; }

/* Cruscotto della forza vendita: riusa i riquadri dei gruppi statistiche, con
   una tabella a cinque colonne al posto di tre. */
.sales-force-card { gap: 10px; }
.sales-force-table { table-layout: auto; }
.sales-force-table td:first-child { width: calc(78px * var(--ui-font-scale)); }
.sales-force-table td:nth-child(4),
.sales-force-table td:last-child { width: calc(96px * var(--ui-font-scale)); }

.stats-table-card { padding: 18px; }
.table-scroll { overflow-x: auto; }
/* Con le colonne di garanzie e provvigioni la tabella non ci sta piu' nella
   scheda: senza una larghezza minima il browser la comprime invece di farla
   scorrere, e la colonna Veicolo finiva a una parola per riga. Ora la riga
   resta alta una riga e, se serve, si scorre di lato (`.table-scroll`). */
/* Senza la colonna giacenza la tabella ci sta in un monitor normale: la
   larghezza minima scende e il nome del veicolo si stringe, cosi' non si deve
   piu' scorrere di lato per leggere il margine. */
.stats-table { min-width: 980px; }
.stats-table th, .stats-table td { white-space: nowrap; }
/* Un nome lungo non deve allargare tutto il resto: si taglia con i puntini e
   resta per intero nel `title`. */
.stats-table th:first-child, .stats-table td:first-child {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-table th.num, .stats-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.stats-table tbody tr { cursor: pointer; }
.stats-table tbody tr:hover td { background: #f1f5fb; }
.stats-table tfoot td { border-top: 2px solid var(--border); background: var(--surface); }
.stats-pos { color: #15803d; }
.stats-neg { color: #b91c1c; }
.stats-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.pill--green { background: var(--ok-soft); border-color: #86efac; color: var(--ok-ink); }
.pill--blue { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }

/* ==== Pagina calendario ==== */
.cal-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-month-label {
  min-width: 170px;
  text-align: center;
  font-size: calc(17px * var(--ui-font-scale));
  text-transform: capitalize;
}
.cal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: start;
}
.cal-card { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0 2px;
}
.cal-weekdays span { text-align: right; padding-right: 6px; }
/* In vista Giorno e Anno `calendar.js` mette `hidden` su questa riga, ma
   `.cal-weekdays` e' dichiarata **dopo** `.hidden` e a parita' di specificita'
   vince l'ultima: la classe c'era e non faceva niente, quindi sopra il giorno
   comparivano LUN MAR MER... che li' non vogliono dire niente. E' la stessa
   trappola del pannello del calendario (6.25) e dell'immagine del lightbox
   (6.44), ed e' il motivo per cui `.hidden` da sola non basta mai. */
.cal-weekdays.hidden { display: none; }
/* La griglia del mese e' un rettangolo fermo: sette colonne uguali e sei
   righe uguali, qualunque cosa ci sia dentro.

   Non era cosi'. `1fr` ha un `min-width: auto` implicito e le pastiglie hanno
   `white-space: nowrap`: il titolo di un appuntamento diventava la larghezza
   minima della **colonna**, e scrivendo qualcosa nel 7 si allargavano anche il
   14, il 21 e il 28, vuoti. `minmax(0, 1fr)` toglie quel minimo — la pastiglia
   si tronca coi puntini e il titolo intero sta nel `title`. Le righe a `1fr`
   fanno il resto: una casella piena non e' piu' alta di una vuota, e il mese
   si legge come un foglio, non come una tabella che respira. */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 6px;
}
.cal-day {
  min-width: 0;
  /* Due pastiglie da due righe (ora sopra, titolo sotto), la testa con numero e
     pulsante, e la riga "+N altre": e' il massimo che il mese mostra
     (`PASTIGLIE_NEL_MESE` in calendar.js), e la casella e' alta esattamente
     quanto serve a quel massimo — misurato sul reso. Cosi' non ha mai bisogno
     di crescere, e il mese non cambia altezza passando da uno pieno a uno
     vuoto. */
  min-height: calc(165px * var(--ui-font-scale));
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.cal-day:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.cal-day--outside { background: var(--surface); opacity: 0.55; }
.cal-day--today { border-color: var(--accent); background: #f0f6ff; }
.cal-day--today .cal-day__num {
  background: var(--accent);
  color: #fff;
}
/* Il pulsante a sinistra, il numero a destra dove e' sempre stato. */
.cal-day__testa { display: flex; align-items: center; gap: 4px; }
.cal-day__espandi {
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.cal-day__espandi:hover { background: #eaf1ff; color: var(--accent); }
.cal-day--today .cal-day__espandi { color: var(--accent); }
.cal-day__num {
  margin-left: auto;
  font-size: calc(12.5px * var(--ui-font-scale));
  font-weight: 700;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.cal-day__items { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.cal-chip {
  --chip-color: #2563eb;
  display: flex;
  align-items: stretch;
  width: 100%;
  border-left: 3px solid var(--chip-color);
  border-radius: 4px;
  background: color-mix(in srgb, var(--chip-color) 12%, #ffffff);
  overflow: hidden;
}
.cal-chip:hover { background: color-mix(in srgb, var(--chip-color) 22%, #ffffff); }
/* Il pallino e' un bersaglio suo: cambia lo stato senza aprire l'attivita'. */
.cal-chip__stato {
  border: none;
  background: transparent;
  color: var(--chip-color);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 800;
  line-height: 1;
  padding: 3px 2px 3px 4px;
  cursor: pointer;
}
.cal-chip__stato:hover { color: var(--text); }
/* Ora sopra, titolo sotto. Sulla stessa riga l'ora si prendeva meta' della
   larghezza della casella — un settimo di schermo — e del titolo non restava
   niente da leggere. */
.cal-chip__testo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: none;
  background: transparent;
  text-align: left;
  color: var(--text);
  font-size: calc(11.5px * var(--ui-font-scale));
  font-weight: 600;
  padding: 3px 4px 3px 2px;
  cursor: pointer;
  overflow: hidden;
}
/* Due righe di titolo, poi i puntini: per intero resta nel `title`. */
.cal-chip__titolo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
/* Completata e annullata restano visibili ma smorzate: servono a sapere cosa
   e' stato fatto, non a competere con quello che resta da fare. */
.cal-chip--completato { opacity: 0.55; }
.cal-chip--completato .cal-chip__testo { text-decoration: line-through; }
.cal-chip--annullato { opacity: 0.45; background: var(--surface); }
.cal-chip--annullato .cal-chip__testo { text-decoration: line-through; color: var(--muted); }
.cal-chip__time {
  color: var(--chip-color);
  font-weight: 800;
  font-size: calc(10.5px * var(--ui-font-scale));
  line-height: 1.2;
  letter-spacing: 0.02em;
}
/* Nel giorno e nella settimana lo spazio non manca: il titolo si legge intero. */
.cal-day--alta .cal-chip__titolo, .cal-day--piena .cal-chip__titolo { -webkit-line-clamp: 3; }
/* Le altre viste riusano la casella del mese, cambiando solo quante colonne
   ci sono e quanto sono alte: cosi' pastiglie e stati si comportano uguale. */
.cal-grid--settimana { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-grid--giorno { grid-template-columns: 1fr; }
.cal-grid--anno { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cal-day--alta { min-height: 220px; }
.cal-day--piena { min-height: 320px; cursor: default; }
.cal-day--alta .cal-day__items, .cal-day--piena .cal-day__items { overflow-y: auto; }
.cal-day--piena .cal-chip { font-size: calc(13px * var(--ui-font-scale)); }

@media (max-width: 700px) {
  /* ---- Il calendario ----
     Si apriva sul **mese**: sette colonne da 42px e una griglia alta 1020px
     quasi tutta vuota. Su un telefono il mese non si guarda — si guarda oggi,
     e la vista di partenza la sceglie `calendar.js` leggendo `--telefono`.
     Chi vuole il mese lo trova comunque, e da qui e' compatto: la casella
     cresce con cio' che ha dentro invece di essere alta 165px sempre. */
  .cal-grid { gap: 4px; grid-auto-rows: auto; }
  .cal-day { min-height: calc(58px * var(--ui-font-scale)); padding: 4px; gap: 2px; }
  .cal-day--alta { min-height: calc(120px * var(--ui-font-scale)); }
  .cal-day--piena { min-height: calc(160px * var(--ui-font-scale)); }
  .cal-weekdays { font-size: calc(10px * var(--ui-font-scale)); }
  /* Il paragrafo che spiega come si usa il calendario si prende cento pixel
     della prima schermata per dire una cosa che si scopre premendo (§7). */
  .standalone-header p.muted { display: none; }
}
.cal-vuoto { font-size: calc(12.5px * var(--ui-font-scale)); }
.cal-mese {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 14px;
  cursor: pointer;
  font-size: calc(13px * var(--ui-font-scale));
  text-transform: capitalize;
}
.cal-mese:hover { border-color: var(--accent); }
.cal-collegamento {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: calc(12.5px * var(--ui-font-scale));
  color: var(--muted);
}
.cal-stato-campo { min-width: 180px; }
/* "+N altre" e' un pulsante, non una scritta: porta al giorno, dove le
   attivita' si vedono tutte. Una casella che dice "ce ne sono altre" senza
   un modo per vederle e' un vicolo cieco. */
.cal-more {
  align-self: flex-start;
  border: none;
  background: transparent;
  font: inherit;
  font-size: calc(11px * var(--ui-font-scale));
  color: var(--accent);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  cursor: pointer;
}
.cal-more:hover { background: #eaf1ff; }
/* --- Popup del giorno --- */
.cal-day-modal__panel {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cal-day-modal__panel .accounting-modal__header h2 { text-transform: capitalize; }
.cal-day-modal__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  min-height: 0;
}
.cal-voce {
  --chip-color: #2563eb;
  display: flex;
  align-items: stretch;
  border-left: 3px solid var(--chip-color);
  border-radius: 6px;
  background: color-mix(in srgb, var(--chip-color) 10%, #ffffff);
}
.cal-voce:hover { background: color-mix(in srgb, var(--chip-color) 18%, #ffffff); }
.cal-voce .cal-chip__stato {
  font-size: calc(13px * var(--ui-font-scale));
  padding: 8px 4px 8px 8px;
}
.cal-voce__testo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: none;
  background: transparent;
  text-align: left;
  color: var(--text);
  font: inherit;
  padding: 8px 10px 8px 4px;
  cursor: pointer;
}
.cal-voce__testo strong { font-size: calc(13.5px * var(--ui-font-scale)); }
.cal-voce__testo .muted { font-size: calc(12px * var(--ui-font-scale)); }
.cal-voce--completato { opacity: 0.6; }
.cal-voce--completato .cal-voce__testo strong { text-decoration: line-through; }
.cal-voce--annullato { opacity: 0.5; background: var(--surface); }
.cal-voce--annullato .cal-voce__testo strong { text-decoration: line-through; color: var(--muted); }

.cal-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--muted);
  padding-top: 4px;
}
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-upcoming { padding: 16px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 66px; }
.cal-upcoming h2 { margin: 0; font-size: calc(16px * var(--ui-font-scale)); }
.cal-upcoming__list { display: flex; flex-direction: column; gap: 14px; max-height: 70vh; overflow-y: auto; }
.cal-upcoming__day h3 {
  margin: 0 0 6px;
  font-size: calc(12.5px * var(--ui-font-scale));
  text-transform: capitalize;
  color: var(--muted);
  font-weight: 700;
}
.cal-upcoming__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  margin-bottom: 6px;
}
.cal-upcoming__item:hover { border-color: var(--accent); }
.cal-upcoming__item .stats-dot { margin-top: 5px; }
.cal-upcoming__body { display: flex; flex-direction: column; gap: 2px; font-size: calc(13px * var(--ui-font-scale)); }
/* Il pannello e' cresciuto con i campi dei tipi: senza un tetto e uno
   scorrimento suo, il pulsante Salva finisce fuori dallo schermo. */
.cal-modal__panel {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
.cal-modal__panel .cal-form { overflow-y: auto; padding-right: 4px; }
/* `.cal-form label` e `.cal-form__row` battono `.hidden` per specificita': i
   campi di un tipo diverso resterebbero visibili. Va detto qui, dove il
   selettore e' piu' forte. */
.cal-form [data-per-tipo].hidden, .cal-form label.hidden { display: none; }
.cal-form { display: flex; flex-direction: column; gap: 12px; }
.cal-form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: calc(13px * var(--ui-font-scale)); }
.cal-form input, .cal-form select, .cal-form textarea {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
  font-weight: 500;
}
.cal-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
/* `.form input` stira i campi a tutta colonna: la casella torna alla sua misura. */
.cal-privato { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.cal-privato input[type="checkbox"] { width: auto; min-height: 0; margin: 0; }
.cal-privato-segno { font-size: 0.85em; }
.cal-form__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 1100px) {
  .cal-layout { grid-template-columns: 1fr; }
  .stats-charts { grid-template-columns: 1fr; }
  .cal-upcoming { position: static; }
}

/* Avviso sotto al comune quando un CAP vale per piu' comuni: non e' un errore,
   e' una scelta che tocca a chi compila. */
.cap-avviso {
  display: block;
  margin-top: 4px;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 600;
  color: #b45309;
}

/* ==== Icona invio WhatsApp nelle liste ==== */
.table-actions-flex {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.wa-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: #9ca3af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.wa-send-btn svg { width: 19px; height: 19px; }
.wa-send-btn:hover {
  color: #128c7e;
  border-color: #128c7e;
  background: #e9fbf3;
}
.wa-send-btn--sent {
  color: #fff;
  background: #25d366;
  border-color: #25d366;
}
.wa-send-btn--sent:hover {
  color: #fff;
  background: #1ebe5d;
  border-color: #1ebe5d;
}
.wa-send-btn--placeholder {
  visibility: hidden;
  cursor: default;
}

/* --- Flag collegamento auto da XML passivo --- */
.payable-vehicle-flag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #bbe3c8;
  border-radius: 10px;
  background: #effaf3;
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 600;
  color: #14532d;
  cursor: pointer;
}
/* **`display: flex` qui sopra batte `[hidden]`**, che e' una regola del
   browser e non d'autore: senza questa riga i due riquadri non si nascondono
   mai: quello del veicolo restava in pagina con la targa della fattura
   **precedente**, e quello del costo con la sua spunta. E' la stessa trappola
   di `.powered.hidden` (6.43) e dell'immagine del lightbox (6.44). */
.payable-vehicle-flag[hidden] { display: none; }

.payable-vehicle-flag input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #16a34a;
  cursor: pointer;
}

/* I collegamenti rapidi della dashboard: sito, social, portali.

   Stanno **sulla riga dei filtri, in fondo a destra**: sono segnalibri, non
   funzioni del gestionale, e una fila di pastiglie tutta loro sopra i numeri
   li faceva leggere come un comando della pagina. All'estremo opposto del
   periodo si vedono quando si cercano e non rubano la scena a cio' che sta
   sotto. */
.dashboard-barra {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
}
/* Il margine lo tiene la riga: sommandolo a quello delle pastiglie resterebbe
   uno scalino fra le icone e il periodo, che sono alla stessa altezza. */
.dashboard-barra .filter-chips { margin-bottom: 0; }

.bottoni-rapidi {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
}
/* Spinte in fondo: l'avanzo della riga se lo prende il margine, non le
   pastiglie del periodo — che restano larghe quanto le loro voci e attaccate
   a sinistra. Con la riga che va a capo (telefono) il margine non ha avanzo
   da prendersi e le icone si appoggiano da sole all'inizio della riga nuova. */
.dashboard-barra .bottoni-rapidi { margin-left: auto; }
/* `display: flex` qui sopra batte `[hidden]`, che e' una regola del browser:
   senza questa riga la barra resterebbe in pagina anche vuota, su ogni
   gestionale che i collegamenti non li usa. E' la trappola di `.powered`
   (6.43), del lightbox (6.44), della scheda Indicata (6.46) e dei riquadri
   del partitario (6.30-quater). */
.bottoni-rapidi[hidden] { display: none; }

/* Grigie a riposo, scure sotto il puntatore: il colore e' l'unica cosa che
   cambia, quindi l'icona non si sposta e la riga non si muove. */
.bottone-rapido {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.16s ease, background-color 0.16s ease;
}
.bottone-rapido:hover,
.bottone-rapido:focus-visible {
  color: #1f2937;
  background: #eef2f7;
}
/* `currentColor` dentro gli SVG: il grigio e lo scuro si dichiarano una volta
   sola, sul collegamento. */
.bottone-rapido svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* --- Hub Impostazioni --- */
.settings-search {
  position: relative;
  max-width: 560px;
}
.settings-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.settings-search input {
  width: 100%;
  padding: calc(10px * var(--ui-font-scale)) 14px calc(10px * var(--ui-font-scale)) 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: calc(14px * var(--ui-font-scale));
  color: var(--text);
}
.settings-search input:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.settings-search input::placeholder { color: var(--muted); }

.settings-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 14px;
  align-items: start;
}
@media (max-width: 860px) {
  .settings-groups { grid-template-columns: 1fr; }
}
.card.settings-group {
  padding: 0;
  overflow: hidden;
}
.settings-group__head {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.settings-group__head h2 {
  margin: 0;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.settings-group__list { display: flex; flex-direction: column; }
.settings-link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
  border-bottom: 1px solid #eef2f7;
  transition: background 0.12s ease;
}
.settings-link:last-child { border-bottom: none; }
.settings-link:hover { background: #f6f9ff; }
.settings-link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.4);
}
.settings-link__icon {
  flex: 0 0 auto;
  width: calc(38px * var(--ui-font-scale));
  height: calc(38px * var(--ui-font-scale));
  border-radius: 9px;
  background: var(--pill);
  border: 1px solid #dbe6fb;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.settings-link__icon svg {
  width: calc(19px * var(--ui-font-scale));
  height: calc(19px * var(--ui-font-scale));
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.settings-link__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-link__title {
  font-weight: 650;
  font-size: calc(14px * var(--ui-font-scale));
  letter-spacing: -0.01em;
  color: var(--text);
}
.settings-link__desc {
  font-size: calc(12.5px * var(--ui-font-scale));
  color: var(--muted);
  line-height: 1.35;
}
.settings-link__chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  stroke: #b6c2d4;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.12s ease, stroke 0.12s ease;
}
.settings-link:hover .settings-link__chevron {
  stroke: var(--accent);
  transform: translateX(2px);
}
.settings-empty { margin: 14px 2px 0; }

/* --- Raccomandazione di prezzo AutoScout (Nuova auto > Dati commerciali) --- */
.autoscout-price-reco {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 14px 16px;
}
.autoscout-price-reco.hidden { display: none; }
.autoscout-price-reco__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.autoscout-price-reco__logo {
  background: #ffed00;
  color: #111827;
  font-weight: 800;
  font-size: calc(11px * var(--ui-font-scale));
  letter-spacing: 0.01em;
  padding: 3px 8px;
  border-radius: 4px;
}
.autoscout-price-reco__title {
  font-weight: 750;
  font-size: calc(14px * var(--ui-font-scale));
  letter-spacing: -0.01em;
}
.autoscout-price-reco__suggested {
  margin: 0 0 12px;
  font-size: calc(13px * var(--ui-font-scale));
  color: var(--text);
}
.autoscout-price-reco__suggested strong {
  font-size: calc(14px * var(--ui-font-scale));
  font-variant-numeric: tabular-nums;
}
.autoscout-price-reco__spectrum {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.autoscout-price-reco__cat {
  flex: 1 1 140px;
  min-width: 130px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px 9px;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.autoscout-price-reco__cat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--reco-cat-color, #9ca3af);
}
.autoscout-price-reco__cat-label {
  display: block;
  font-weight: 700;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--reco-cat-color, var(--text));
  margin-bottom: 2px;
}
.autoscout-price-reco__cat-range {
  display: block;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.autoscout-price-reco__cat[data-cat="verygood"] { --reco-cat-color: #0d7a3f; }
.autoscout-price-reco__cat[data-cat="good"] { --reco-cat-color: #43a047; }
.autoscout-price-reco__cat[data-cat="fair"] { --reco-cat-color: #d99a06; }
.autoscout-price-reco__cat[data-cat="increased"] { --reco-cat-color: #fb8c00; }
.autoscout-price-reco__cat[data-cat="high"] { --reco-cat-color: #e53935; }
.autoscout-price-reco__cat[data-cat="veryhigh"] { --reco-cat-color: #b71c1c; }

/* --- Indicata: quante ne restano, in testa alla scelta dell'auto --- */
/* Due budget distinti, quindi due voci: targhe e valutazioni. La barra dice a
   colpo d'occhio quanto e' stato consumato — un numero da solo obbliga a fare
   la divisione a mente ogni volta. */
.listing-conto {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.listing-conto.hidden { display: none; }
.listing-conto__voce {
  min-width: 104px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px 7px;
  background: #fff;
}
.listing-conto__nome {
  display: block;
  font-size: calc(10.5px * var(--ui-font-scale));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.listing-conto__cifra {
  display: block;
  font-size: calc(13px * var(--ui-font-scale));
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin-top: 1px;
}
.listing-conto__cifra strong {
  font-size: calc(15px * var(--ui-font-scale));
  font-weight: 800;
  letter-spacing: -0.01em;
}
.listing-conto__barra {
  display: block;
  height: 3px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.listing-conto__barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--conto-colore, #43a047);
  transition: width 0.2s ease;
}
/* Il colore cambia quando il numero comincia a contare davvero. */
.listing-conto__voce[data-stato="quasi"] { --conto-colore: #d99a06; }
.listing-conto__voce[data-stato="finito"] { --conto-colore: #e53935; }
.listing-conto__voce[data-stato="finito"] .listing-conto__cifra strong { color: #e53935; }

/* --- Indicata: la valutazione di mercato, sotto quella di AutoScout --- */
/* Stessa scatola del riquadro AutoScout — e' la stessa domanda fatta a un
   altro fornitore, e due forme diverse la farebbero leggere come due cose. */
.indicata-valuta {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 14px 16px;
}
.indicata-valuta.hidden { display: none; }
.indicata-valuta__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.indicata-valuta__logo {
  background: #0b2e4f;
  color: #fff;
  font-weight: 800;
  font-size: calc(11px * var(--ui-font-scale));
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 4px;
}
.indicata-valuta__title {
  font-weight: 750;
  font-size: calc(14px * var(--ui-font-scale));
  letter-spacing: -0.01em;
}
/* I tre campi e il pulsante su una riga: sono una domanda sola — questa auto,
   con questi chilometri, in questa zona. */
.indicata-valuta__campi {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.indicata-valuta__campi label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 600;
  color: var(--muted);
  flex: 1 1 120px;
  min-width: 0;
}
.indicata-valuta__campi input {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.indicata-valuta__campi .btn { flex: 0 0 auto; }
.indicata-valuta__nota {
  margin: 10px 0 0;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--muted);
}
.indicata-valuta__esito {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.indicata-valuta__esito.hidden { display: none; }
/* Un prezzo per riquadro: sono due risposte diverse — a quanto la vendo, e
   quanto posso pagarla — e affiancate si leggono in un colpo. */
.indicata-valuta__prezzo {
  flex: 1 1 200px;
  min-width: 180px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px 11px;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.indicata-valuta__prezzo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--valuta-colore, #9ca3af);
}
.indicata-valuta__prezzo[data-tipo="RETAIL_100"] { --valuta-colore: #0d7a3f; }
.indicata-valuta__prezzo[data-tipo="MAX_PURCHASE_PRICE_100"] { --valuta-colore: #1d4ed8; }
.indicata-valuta__nome {
  display: block;
  font-weight: 700;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--valuta-colore, var(--text));
  margin-bottom: 2px;
}
.indicata-valuta__cifra {
  display: block;
  font-weight: 800;
  font-size: calc(20px * var(--ui-font-scale));
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.indicata-valuta__sotto {
  display: block;
  margin-top: 2px;
  font-size: calc(11.5px * var(--ui-font-scale));
  color: var(--muted);
}
/* Il contorno del prezzo: giorni per venderla, quante ne sono in vendita.
   E' quello che dice se quel numero e' un prezzo o un'attesa. */
.indicata-valuta__contorno {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--muted);
}

/* --- Voltura contratto: campi calcolati non editabili --- */
.contract-transfer-section input[readonly],
.quote-transfer-section input[readonly] {
  background: #f1f3f6;
  color: #4b5563;
  border-color: #dde3ec;
  cursor: not-allowed;
}
.contract-transfer-section input[readonly]:hover,
.quote-transfer-section input[readonly]:hover {
  border-color: #dde3ec;
}

/* --- Modale con pagina incorporata (Gestisci garanzie / agenzie) --- */
.embed-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.embed-modal[hidden] { display: none; }
.embed-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.embed-modal__dialog {
  position: relative;
  width: min(1100px, 96vw);
  height: min(88vh, 900px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.embed-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.embed-modal__head h2 {
  margin: 0;
  font-size: calc(15px * var(--ui-font-scale));
  letter-spacing: -0.01em;
}
.embed-modal__frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
}

/* --- Pagina incorporata in modale: nascondi chrome dell'app --- */
body.is-embedded .app-topbar,
body.is-embedded .sidebar,
body.is-embedded .topbar {
  display: none !important;
}
body.is-embedded .main {
  padding-top: 12px;
}

/* --- Mandato: compilazione inline dei dati mancanti --- */
.mandate-fix-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.mandate-fix-form[hidden] { display: none; }
.mandate-fix-intro {
  margin: 0 0 10px;
  font-size: calc(12.5px * var(--ui-font-scale));
}
.mandate-fix-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mandate-fix-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 700;
  color: var(--text);
}
.mandate-fix-field input,
.mandate-fix-field select,
.mandate-fix-field textarea {
  width: 100%;
  padding: calc(7px * var(--ui-font-scale)) calc(9px * var(--ui-font-scale));
  border: 1px solid var(--border);
  border-radius: 6px;
  font-weight: 500;
  font-size: calc(13px * var(--ui-font-scale));
  background: #fff;
}
.mandate-fix-field input:focus,
.mandate-fix-field select:focus,
.mandate-fix-field textarea:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.mandate-fix-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

/* --- Ritenuta: flag esente inline nel form --- */
.listing-check-line {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.listing-check-line input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #2563eb;
}

.withholding-exempt-field {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  align-self: end;
  padding-bottom: 10px;
}
.withholding-exempt-field input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #2563eb;
}

/* --- Campo data unificato (maschera + calendario rapido) --- */
.gdate-field {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  width: 100%;
}
.gdate-field .gdate-text {
  width: 100%;
  min-width: 0;
  margin: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.gdate-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0);
  overflow: hidden;
}
/* Modalita' solo mese: restano le tendine, la griglia dei giorni sparisce. */
/* Solo mese: al posto della griglia dei giorni, i dodici mesi in tre righe.
   La testata perde la tendina del mese e resta con le frecce sull'anno, quindi
   tre colonne invece di quattro. */
.gdate-pop--mese { width: 232px; }
.gdate-pop--mese .gdate-pop__head { grid-template-columns: auto 1fr auto; }
.gdate-mesi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.gdate-mese {
  padding: 8px 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}
.gdate-mese:hover { background: #eef4ff; border-color: #bfdbfe; }
.gdate-mese.is-today { border-color: #93c5fd; }
.gdate-mese.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.gdate-mese.is-selected:hover { background: var(--accent); }

.gdate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 6px 6px 0;
  background: #fafafa;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.gdate-btn:hover { background: #eef4ff; color: var(--accent); }
.gdate-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* Calendario */
.gdate-pop {
  position: absolute;
  z-index: 3000;
  width: 268px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.32);
  padding: 10px;
  font-size: 13px;
}
.gdate-pop__head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}
.gdate-select {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
.gdate-nav {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gdate-nav:hover { background: #eef4ff; border-color: #93c5fd; color: var(--accent); }
.gdate-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.gdate-grid--weekdays { margin-bottom: 2px; }
.gdate-weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  padding: 2px 0;
}
.gdate-day {
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gdate-day:hover { background: #eef4ff; border-color: #bfdbfe; }
.gdate-day--empty { cursor: default; }
.gdate-day.is-today { border-color: #93c5fd; font-weight: 700; }
/* Giorno oltre il tetto del campo (`max`): la voltura non si registra prima
   di averla fatta, quindi il futuro non si puo' nemmeno cliccare. */
.gdate-day.is-fuori {
  color: var(--muted);
  opacity: 0.45;
  cursor: not-allowed;
}
.gdate-day.is-fuori:hover { background: transparent; border-color: transparent; }
.gdate-day.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}
.gdate-pop__foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.gdate-action {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.gdate-action:hover { background: #eef4ff; border-color: #93c5fd; color: var(--accent); }

/* --- Accesso --------------------------------------------------------- */
/* Foto a sinistra che sfuma nel blu a destra, scheda bianca sopra. Non e' una
   colonna netta: la sfumatura e' una velatura stesa su tutta la scena, cosi'
   la foto non finisce con un taglio. */
.login-body {
  min-height: 100vh;
  margin: 0;
  background: #071125;
}
.login-scena {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr min(470px, 100%) 0.5fr;
  grid-template-rows: 1fr auto;
  padding: clamp(24px, 4vw, 48px) clamp(24px, 5vw, 96px) clamp(20px, 3vw, 34px);
  background: #071125;
}
.login-scena::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 62%;
  background: url("/static/img/login-sfondo.jpg?v=3") left center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, #000 38%, rgba(0, 0, 0, 0.55) 68%, transparent 100%);
  mask-image: linear-gradient(to right, #000 38%, rgba(0, 0, 0, 0.55) 68%, transparent 100%);
}
.login-scena::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(7, 17, 37, 0) 0%,
    rgba(7, 17, 37, 0) 30%,
    rgba(9, 24, 52, 0.3) 46%,
    rgba(11, 27, 58, 0.72) 58%,
    #0a1a35 70%,
    #071125 100%);
}
/* Archi in alto a destra e trama di puntini in basso: sono nel mockup, e
   riempiono il blu senza aggiungere un'altra immagine da scaricare. */
.login-scena__trama {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 116% -14%,
      rgba(150, 190, 255, 0) 0 34px, rgba(150, 190, 255, 0.07) 34px 35px) no-repeat,
    radial-gradient(circle at 1px 1px, rgba(160, 200, 255, 0.16) 1px, transparent 1.6px)
      right 3% bottom 5% / 15px 15px;
  background-repeat: no-repeat, repeat;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 52%, #000 78%);
  mask-image: linear-gradient(to right, transparent 52%, #000 78%);
}

.login-main {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 100%;
  min-width: 0;
}
.login-card {
  width: 100%;
  display: grid;
  gap: 20px;
  padding: clamp(28px, 3.2vw, 40px) clamp(24px, 2.8vw, 36px);
  border-radius: 18px;
  background: #fdfdfd;
  box-shadow: 0 30px 70px -24px rgba(2, 8, 20, 0.65);
}
.login-logo {
  display: block;
  justify-self: center;
  width: min(310px, 76%);
  height: auto;
  margin-bottom: 2px;
}

/* Sottotitolo e istruzioni della scheda: li usano il cambio password del
   gestionale e, sulla console, anche recupero e indirizzario. */
.login-occhiello {
  margin: -8px 0 0;
  text-align: center;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7a90;
}
.login-istruzioni {
  margin: -6px 0 0;
  text-align: center;
  font-size: calc(13px * var(--ui-font-scale));
  line-height: 1.55;
  color: #6b7a90;
}

.login-form { display: grid; gap: 17px; }
.login-field { display: grid; gap: 8px; }
.login-field__label {
  font-size: calc(14px * var(--ui-font-scale));
  font-weight: 700;
  color: #1b2637;
}
.login-field__box { position: relative; display: block; }
.login-field__icona {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);
  fill: none;
  stroke: #9aa5b5;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.login-form input {
  width: 100%;
  border: 1px solid #e4e8f0;
  border-radius: 10px;
  background: #fdfdfd;
  padding: calc(13px * var(--ui-font-scale)) calc(14px * var(--ui-font-scale));
  padding-left: 46px;
  font-size: calc(15px * var(--ui-font-scale));
  min-height: calc(50px * var(--ui-font-scale));
  color: #1b2637;
}
.login-form input::placeholder { color: #9aa5b5; }
.login-form input:focus {
  outline: none;
  border-color: #0c65d6;
  box-shadow: 0 0 0 3px rgba(12, 101, 214, 0.15);
}
#login-password { padding-right: 48px; }

.login-occhio {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  color: #9aa5b5;
}
.login-occhio:hover { color: #1b2637; background: rgba(154, 165, 181, 0.14); }
.login-occhio svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-error {
  margin: 0;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 600;
}
.login-recovery { margin: -6px 0 0; text-align: right; }
.login-recovery a {
  color: #136de4;
  font-size: calc(14px * var(--ui-font-scale));
  font-weight: 600;
  text-decoration: none;
}
.login-recovery a:hover { text-decoration: underline; }

.login-actions { justify-content: stretch; }
.login-actions .btn {
  width: 100%;
  justify-content: center;
  min-height: calc(52px * var(--ui-font-scale));
  border-radius: 10px;
  background: #0c65d6;
  border-color: #0c65d6;
  font-size: calc(16px * var(--ui-font-scale));
  font-weight: 700;
}
.login-actions .btn:hover:not(:disabled) { background: #0a56b8; border-color: #0a56b8; }

.login-foot {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 2;
  margin: 24px 0 0;
  font-size: calc(13px * var(--ui-font-scale));
  color: rgba(203, 216, 235, 0.62);
  text-align: center;
}

/* Sotto i 900px la scena diventa una colonna: la foto resta in alto come
   fascia, la scheda sotto. */
@media (max-width: 900px) {
  .login-scena {
    grid-template-columns: min(470px, 100%);
    justify-content: center;
    padding-top: clamp(180px, 34vw, 260px);
  }
  /* Qui la foto e' una fascia in alto: la sfumatura va verso il basso, non
     verso destra. */
  .login-scena::before {
    width: 100%;
    height: clamp(220px, 42vw, 310px);
    bottom: auto;
    background-position: center 32%;
    -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 64%, transparent 100%);
  }
  .login-scena::after {
    background: linear-gradient(184deg,
      rgba(7, 17, 37, 0) 0%,
      rgba(7, 17, 37, 0) 19%,
      rgba(9, 24, 52, 0.42) 30%,
      #0f2246 42%,
      #071125 78%);
  }
  .login-scena__trama { display: none; }
  .login-main, .login-foot { grid-column: 1; }
}

/* --- Utente in sidebar ----------------------------------------------- */

/* Riquadro utente nel calendario, che non ha la barra laterale. */

/* Campi del dialogo password (core/dialog.js). */
.app-dialog__form { display: flex; flex-direction: column; gap: 12px; }
.app-dialog__form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 600;
}
.app-dialog__form .app-dialog__actions { margin-top: 4px; }
.app-dialog__error { color: var(--danger, #c0392b); font-weight: 600; }

/* ==== Menu account nella barra in alto ====
   Montato da core/session.js, non scritto nelle pagine: sono una cinquantina e
   replicarlo a mano vorrebbe dire cinquanta punti da tenere allineati. */
.account { position: relative; display: inline-flex; margin-left: auto; }

.account__btn {
  display: grid;
  place-items: center;
  width: calc(36px * var(--ui-font-scale));
  height: calc(36px * var(--ui-font-scale));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--muted, #5b6b7f);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.account__btn:hover { background: var(--accent-soft, #eef4ff); color: var(--accent, #2563eb); border-color: var(--accent, #2563eb); }
.account__btn[aria-expanded="true"] { background: var(--accent, #2563eb); color: #fff; border-color: var(--accent, #2563eb); }
/* Il fuoco da tastiera: non c'era, e questo tondo non e' un `.btn` — quindi
   `.btn:focus-visible` non lo copriva e chi naviga da tastiera non vedeva
   dove si trovava. Stessa forma dell'anello dei bottoni. */
.account__btn:focus-visible { outline: none; box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.3); }
.account__btn svg {
  width: calc(19px * var(--ui-font-scale));
  height: calc(19px * var(--ui-font-scale));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: calc(210px * var(--ui-font-scale));
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px -8px rgba(16, 24, 40, .22), 0 3px 8px -3px rgba(16, 24, 40, .12);
}

/* **Sul telefono il pannello si ancora all'intestazione, non al pulsante.**

   Ancorato al pulsante parte dal suo bordo destro e si apre all'indietro: su
   un telefono quel pulsante sta a x=74, quindi 210px di pannello finivano a
   **x = -100** — fuori dallo schermo, misurato su otto pagine su dieci.
   Ancorarlo a sinistra non basta: dove il pulsante sta gia' a destra (x=286)
   uscirebbe dall'altra parte.

   Togliendo la posizione a `.account` il riquadro di riferimento diventa
   `header.topbar`, che e' gia' `relative` ed e' largo quanto la finestra: da
   li' `right: 12px` lo tiene dentro **ovunque** stia il pulsante.

   Queste righe stanno **qui** e non insieme alle altre regole del telefono:
   quelle vengono prima nel foglio, e a parita' di specificita' vince
   l'ultima — scritte la' non si applicavano affatto. E' la stessa nota che
   `.app-topbar` si porta dietro per lo stesso motivo. */
@media (max-width: 700px) {
  .account { position: static; }
  .account__panel {
    right: 12px;
    left: auto;
    min-width: 0;
    width: min(260px, calc(100vw - 24px));
  }
}

.account__who {
  display: grid;
  gap: 2px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.account__name {
  font-weight: 650;
  font-size: calc(13.5px * var(--ui-font-scale));
  overflow-wrap: anywhere;
}
.account__role {
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--muted, #667085);
}

.account__action {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: calc(13px * var(--ui-font-scale));
  color: inherit;
  cursor: pointer;
}
.account__action:hover { background: var(--surface, #f4f7fb); }
.account__action--exit { color: var(--danger, #b42318); }
.account__action--exit:hover { background: var(--danger-soft, #fef3f2); }

/* --- Caricamento foto da telefono ------------------------------------------
   Pagina a se': si apre sul telefono, senza barra laterale e senza sessione.
   Tutto e' dimensionato per il pollice, non per il mouse. */
body.carica-foto {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--bg, #f1f5f9);
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
}
.carica-foto__scheda {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px 26px;
  box-shadow: 0 18px 44px -22px rgba(15, 23, 42, 0.35);
}
.carica-foto__marchio { display: block; height: 34px; width: auto; margin: 0 0 18px; }
.carica-foto h1 { margin: 0 0 8px; font-size: calc(21px * var(--ui-font-scale)); }
.carica-foto__istruzioni { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
/* Marca e modello dell'auto: si legge prima di tutto il resto, e' quello che
   dice se si sta scattando sulla macchina giusta. */
.carica-foto__veicolo {
  margin: 0 0 14px;
  padding: calc(10px * var(--ui-font-scale)) calc(14px * var(--ui-font-scale));
  border-radius: 10px;
  background: var(--surface-2, rgba(15, 23, 42, 0.05));
  font-size: calc(17px * var(--ui-font-scale));
  font-weight: 700;
  line-height: 1.3;
}
.carica-foto__attesa, .carica-foto__errore { color: var(--muted); line-height: 1.5; }
.carica-foto__errore h1 { color: var(--text); }

/* Bersaglio grande: si preme con il pollice, spesso all'aperto. */
.carica-foto__scegli {
  display: block;
  padding: 18px 16px;
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: var(--accent);
  font-weight: 700;
  font-size: calc(16px * var(--ui-font-scale));
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.carica-foto__scegli:active { background: #eef4ff; border-color: #93c5fd; }
.carica-foto__scegli:has(input:disabled) { opacity: 0.55; cursor: default; }

.carica-foto__avanzamento { margin-top: 16px; }
.carica-foto__barra {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}
.carica-foto__barra span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 0.15s linear;
}
.carica-foto__conteggio { margin: 16px 0 0; font-weight: 600; }
.carica-foto__esito { margin: 8px 0 0; font-weight: 600; }
.carica-foto__esito--ok { color: #15803d; }
.carica-foto__esito--errore { color: #b91c1c; }
.carica-foto__anteprime {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.carica-foto__anteprima {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.carica-foto__scadenza { margin: 18px 0 0; font-size: calc(12.5px * var(--ui-font-scale)); }

/* --- QR nel wizard --------------------------------------------------------- */
.qr-foto { display: grid; gap: 12px; justify-items: center; text-align: center; }
.qr-foto__immagine {
  width: 200px;
  height: 200px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.qr-foto__indirizzo {
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--muted);
  word-break: break-all;
}
.qr-foto__conteggio { font-weight: 700; }
/* Il QR nel campo foto sta di fianco alla zona di trascinamento: piu' piccolo,
   perche' li' e' una delle tre vie per aggiungere una foto, non una schermata
   a se'. Resta abbastanza grande da inquadrare senza avvicinarsi. */
.qr-foto--compatto { gap: 8px; }
.qr-foto--compatto .qr-foto__immagine { width: 168px; height: 168px; padding: 8px; }
.qr-foto--compatto .muted { font-size: calc(12px * var(--ui-font-scale)); }
.qr-foto--compatto .qr-foto__indirizzo { display: none; }

/* Anteprima della filigrana: tre riquadri di proporzioni diverse, con
   i loghi ancorati agli angoli. Resta un'approssimazione — il risultato vero
   lo produce Pillow al caricamento — ma la geometria e' la stessa. */
.overlay-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  margin-top: 10px;
}
@media (max-width: 700px) {
  /* Il riquadro dell'anteprima ha `width:260px; height:195px` scritti inline
     dalla pagina, e non si stringe: e' l'anteprima che rifa' in CSS lo stesso
     calcolo della filigrana (6.19), e schiacciarla la farebbe mentire. In una
     cella da 213px sforava di 14 e a scorrere era la pagina. Qui scorre il
     suo contenitore: il riquadro resta intero e vero. Il logo dentro e'
     `absolute` ma sta nel riquadro, che e' gia' `overflow: hidden` — questo
     `overflow` non ritaglia niente di nuovo (6.45). */
  .overlay-preview { max-width: 100%; overflow-x: auto; }
}
.overlay-preview__box {
  position: relative;
  margin: 0 0 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: repeating-conic-gradient(#e2e8f0 0% 25%, #f8fafc 0% 50%) 50% / 18px 18px;
}
/* Ogni logo e' un ritaglio della PNG, ancorato al proprio angolo: e' lo
   stesso ragionamento del backend, non una stiratura sull'intero riquadro. */
.overlay-preview__logo {
  position: absolute;
  background-repeat: no-repeat;
}

/* Archivio PDF: i comandi di riga stanno su una riga sola. La colonna e'
   stretta e senza questo si impilavano uno sotto l'altro; la tabella scorre
   gia' in orizzontale, quindi non c'e' niente da nascondere. */
.pdf-archive-actions { flex-wrap: nowrap; white-space: nowrap; }

/* --- Impaginazione degli elenchi -------------------------------------------
   Venti righe per volta. La barra sta sotto la tabella e dice sempre quante
   righe rispondono al filtro, anche quando la pagina e' una sola: e' un dato
   a se', non solo un comando di navigazione. */
.paginazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 2px 2px;
  font-size: calc(13px * var(--ui-font-scale));
  color: var(--muted);
}
.paginazione__comandi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.paginazione__stato {
  min-width: 62px;
  text-align: center;
  font-weight: 700;
  color: var(--text);
}
.paginazione--unica .paginazione__comandi { display: none; }

/* La foto in elenco apre il visualizzatore. E' un <button> e non un <div> con
   un click: si raggiunge da tastiera e dice da solo che e' premibile. Lo stile
   lo riporta a sembrare la sola immagine che era prima. */
.table-image-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  display: block;
  line-height: 0;
}
.table-image-btn:focus-visible { outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; }

/* --- Visualizzatore foto a schermo intero ---
   Stava dentro la pagina del wizard annunci, quindi in elenco parco auto il
   visualizzatore usciva **senza stile**: l'immagine a dimensione naturale in
   fondo al documento, che allungava la pagina anche da chiuso. Le regole
   stanno qui perche' le usano due pagine: core/galleria-foto.js le riusa. */
.listing-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.82);
  padding: 24px;
}

.listing-lightbox.is-open {
  display: flex;
}

.listing-lightbox__frame {
  position: relative;
  width: min(92vw, 1120px);
  height: min(88vh, 760px);
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 12px;
}

.listing-lightbox__image-shell {
  /* La colonna si dichiara, non si lascia dedurre: con una foto sola le due
     frecce sono `hidden`, quindi spariscono dalla griglia e l'immagine
     scivolava nella prima colonna — larga 56px, cioe' la foto grande quanto
     un pulsante. Succedeva anche con la foto predefinita. */
  grid-column: 2;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}

.listing-lightbox__image {
  /* Riempie il riquadro invece di fermarsi alla misura naturale: la foto
     predefinita e' un disegno di 120x80 e si vedeva grande quanto una
     miniatura. `contain` tiene le proporzioni. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* `display: block` qui sotto **batte** l'attributo `hidden`: e' una regola
   d'autore, e quella del browser perde comunque. Senza questa riga l'immagine
   svuotata restava in griglia accanto al video, che si ritrovava meta'
   riquadro. E' la stessa trappola di `.hidden` nel pannello del calendario. */
.listing-lightbox__image[hidden],
.listing-lightbox__video[hidden] {
  display: none;
}

.listing-lightbox__video {
  /* Le stesse regole dell'immagine: il riquadro e' quello, e un video che si
     ferma alla misura naturale si vedrebbe piccolo in mezzo al nero. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000000;
}

.listing-lightbox__nav,
.listing-lightbox__close {
  border: none;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: calc(24px * var(--ui-font-scale));
  cursor: pointer;
}

.listing-lightbox__nav:hover,
.listing-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.listing-lightbox__close {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: calc(28px * var(--ui-font-scale));
  line-height: 1;
}

.listing-lightbox__caption {
  position: absolute;
  left: 68px;
  right: 68px;
  bottom: -8px;
  color: #ffffff;
  font-size: calc(13px * var(--ui-font-scale));
  text-align: center;
}

@media (max-width: 700px) {
  /* Su un telefono il riquadro e' una griglia `56px 1fr 56px`: le due frecce
     si prendevano i lati e alla foto restava una colonna da **223px** larga e
     743 alta. Una foto di un'auto e' orizzontale, quindi con `contain` si
     vedeva grande come un francobollo in mezzo al nero.

     Qui la foto prende lo schermo intero e le frecce ci vanno **sopra**. */
  .listing-lightbox {
    padding: 0;
    /* Pieno, non velato: a schermo intero su un telefono la pagina che si
       intravede sotto fa sembrare la foto un riquadro appoggiato sopra. */
    background: #0b111d;
  }
  .listing-lightbox__frame {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* La regola generale la manda in colonna 2: con una colonna sola ne
     nascerebbe una implicita e la foto finirebbe fuori dallo schermo. */
  .listing-lightbox__image-shell { grid-column: 1; border-radius: 0; }
  .listing-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    background: rgba(15, 23, 42, 0.55);
    z-index: 2;
  }
  .listing-lightbox__nav[data-galleria="prev"] { left: 8px; }
  .listing-lightbox__nav[data-galleria="next"] { right: 8px; }
  /* Fuori dal riquadro finiva meta' sotto il bordo dello schermo. */
  .listing-lightbox__close {
    top: 10px;
    right: 10px;
    background: rgba(15, 23, 42, 0.55);
    z-index: 3;
  }
  .listing-lightbox__caption { left: 12px; right: 12px; bottom: 16px; }
}

/* Numero grande, importo piccolo accanto: la tile dice quante pratiche e
   quanto denaro, senza diventare due riquadri. */
.metric__accanto {
  font-size: calc(14px * var(--ui-font-scale));
  font-weight: 600;
  color: var(--muted);
  margin-left: 6px;
  white-space: nowrap;
}

/* Barra laterale di un marchio dal fondo chiaro: le scritte diventano scure
   (`core/marchio.js`), e con loro vanno riportati i grigi delle voci, che
   erano stati scelti per il fondo blu notte. */
.marchio--barra-chiara .nav__item { color: #374151; }
.marchio--barra-chiara .nav__item:hover { background: rgba(17, 24, 39, 0.08); color: #111827; }
.marchio--barra-chiara .nav-sub__item { color: #4b5563; }
.marchio--barra-chiara .nav-sub__item:hover { background: rgba(17, 24, 39, 0.08); color: #111827; }
.marchio--barra-chiara .sidebar__select { background: rgba(17, 24, 39, 0.06); border-color: rgba(17, 24, 39, 0.2); }
.marchio--barra-chiara .sidebar { box-shadow: inset -1px 0 0 rgba(17, 24, 39, 0.12); }
/* La versione era bianca trasparente: su fondo chiaro sparisce del tutto. */
.marchio--barra-chiara .sidebar__version { color: rgba(17, 24, 39, 0.55); }

/* I quattro riquadri dell'archivio dell'auto: fornitore e acquirente sopra,
   mandati e contratti e il resto sotto. E' la stessa divisione della cartella
   di carta, ed e' il motivo per cui sono quattro e non un elenco solo.
   `minmax(0, 1fr)` non e' decorativo: con il solo `1fr` un nome di file lungo
   allargherebbe la colonna e la griglia scorrerebbe di lato. */
.archivio-griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
/* Sotto questa misura due colonne diventano due strisce: meglio in fila. */
@media (max-width: 1100px) {
  .archivio-griglia { grid-template-columns: minmax(0, 1fr); }
}
.archivio-quadrante {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 140px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
/* Ci si trascinano dentro i documenti: il riquadro si accende tutto, cosi' si
   vede dove stanno per finire. */
.archivio-quadrante.is-dragover {
  border-color: #60a5fa;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.archivio-quadrante__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.archivio-quadrante__testa h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: calc(14px * var(--ui-font-scale));
}
.archivio-quadrante__conto {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 600;
  text-align: center;
}
.archivio-quadrante__vuoto {
  margin: auto 0;
  text-align: center;
  font-size: calc(12px * var(--ui-font-scale));
}
.archivio-voci {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.archivio-voce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
}
.archivio-voce__testa {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 170px;
  min-width: 0;
}
/* Un nome di file non ha spazi dove andare a capo: senza questo esce dal
   riquadro invece di spezzarsi. */
.archivio-voce__testa strong { overflow-wrap: anywhere; }
.archivio-voce__testa input[type="text"] { width: 100%; }
.archivio-voce__dati { font-size: calc(11px * var(--ui-font-scale)); }
.archivio-voce__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.archivio-voce__sposta {
  max-width: 170px;
  padding: 5px 7px;
  border: 1px solid #d7dce5;
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  font-size: calc(11px * var(--ui-font-scale));
}

/* La barra dell'archivio documenti: la tendina dell'ordine a sinistra, quello
   che sta succedendo a destra. */
.listing-archive-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.listing-archive-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--muted);
}

/* "powered by CarBi" in alto a destra: c'e' su ogni istanza, anche su quelle
   vendute sotto un altro marchio. Discreto di proposito — il marchio della
   pagina e' quello del cliente, questa e' una firma. */
.powered {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 6px;
  opacity: 0.92;
  transition: opacity 0.15s ease;
}
.powered:hover { opacity: 1; }
/* `.hidden` da sola non basta: e' dichiarata molto piu' su nel foglio, ha la
   stessa specificita' di `.powered`, e a parita' vince l'ultima — la firma
   restava visibile senza che niente lo dicesse. E' la stessa trappola dei
   campi del calendario (CLAUDE.md 6.25). */
.powered.hidden { display: none; }
.powered__testo {
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--muted);
  white-space: nowrap;
}
/* 28px, non 20: a 20 il marchio si perdeva fra i contatori della barra. */
.powered__logo { height: calc(28px * var(--ui-font-scale)); width: auto; display: block; }

/* Su schermo stretto resta il solo logo: "powered by" e' la parte che si
   capisce comunque, il logo no. */
@media (max-width: 700px) {
  .powered__testo { display: none; }
}

/* Pagina che si guarda ma non si tocca. Il colore e' quello degli avvisi, non
   degli errori: non e' successo niente di sbagliato, e' come deve funzionare. */
.avviso-sola-lettura {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 18px;
  font-size: calc(13px * var(--ui-font-scale));
  line-height: 1.5;
}

/* Campo che nasce vuoto e va compilato: si nota lavorando a nastro, quando
   e' proprio la data quella che sfugge. */
.campo-da-compilare:placeholder-shown,
.campo-da-compilare:invalid,
input[type="date"].campo-da-compilare:not(:valid) {
  border-color: #38bdf8;
  background: #f0f9ff;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}
.campo-da-compilare:focus { border-color: #0284c7; }

/* Il tipo di movimento e' la cosa che si sbaglia piu' facilmente: il colore lo
   dice mentre si preme, non dopo aver riguardato il saldo. */
/* Due classi, non una: il pulsante e' gia' `.btn.primary`, e con un selettore
   a classe singola quello vinceva per specificita' — la classe c'era e il
   colore no. */
.btn.btn--entrata { background: #059669; border-color: #059669; color: #fff; }
.btn.btn--entrata:hover { background: #047857; border-color: #047857; }
.btn.btn--uscita { background: #ea580c; border-color: #ea580c; color: #fff; }
.btn.btn--uscita:hover { background: #c2410c; border-color: #c2410c; }

/* Campi dei movimenti (estratto conto, pagamenti atto): stessa resa dei campi
   dentro un `.form`, che e' dove sta la definizione buona. Duplicare le regole
   le farebbe divergere alla prima correzione, quindi qui si aggiunge solo la
   riga che serve — il resto arriva dai selettori sopra. */
.deed-payment-row label {
  font-weight: 700;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--text);
  letter-spacing: -0.01em;
}
.deed-payment-row input,
.deed-payment-row select {
  width: 100%;
  margin-top: 6px;
  padding: calc(8px * var(--ui-font-scale)) calc(10px * var(--ui-font-scale));
  border: 1px solid var(--border);
  background: #fff;
  font-family: inherit;
  font-size: calc(13px * var(--ui-font-scale));
  line-height: 1.35;
  min-height: calc(36px * var(--ui-font-scale));
  box-shadow: none;
}
.deed-payment-row input:focus,
.deed-payment-row select:focus {
  outline: none;
  border-color: #7aa9f8;
  box-shadow: 0 0 0 4px rgba(15, 95, 215, 0.11);
}

/* Differenze fra perizia e controperizia: e' la domanda per cui la seconda
   scheda esiste, quindi si legge come un elenco, non come un paragrafo. */
.appraisal-diff {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: calc(13px * var(--ui-font-scale));
  line-height: 1.5;
}
.appraisal-diff li { margin-bottom: 4px; }

/* La cointestazione e' l'eccezione: la spunta sta in fondo all'acquirente e
   apre gli stessi campi, perche' e' la stessa cosa — un'altra persona sullo
   stesso contratto. */
.contract-second-holder-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
  font-weight: 600;
  cursor: pointer;
}
.contract-second-holder-toggle input { width: auto; margin: 0; }

/* La spunta della voltura esclusa ha la stessa forma: una domanda in cima alla
   sezione, non un campo della griglia. Senza una regola sua prende il
   `width: 100%` dei campi del modulo e diventa un riquadro largo una riga. */
.contract-transfer-excluded {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 12px;
  font-weight: 600;
  cursor: pointer;
}
.contract-transfer-excluded input { width: auto; margin: 0; accent-color: #2563eb; }

/* La scheda quadrettata della perizia: cinque viste con la griglia sopra, e a
   fianco il pannello del danno. La geometria arriva dal server — qui c'e' solo
   l'aspetto e il fatto che i riquadri si premono. */
/* La scheda si affianca al pannello del danno solo se c'e' posto **qui
   dentro**. La media query guardava lo schermo, che non dice niente: la
   colonna del modulo e' larga meno di meta' finestra, quindi su un monitor
   grande le due colonne restavano affiancate e le viste frontale e posteriore
   finivano fuori dal riquadro, raggiungibili solo scorrendo di lato. */
/* Multipubblicatore: una colonna per canale. L'auto online sul canale ha la
   cella verde; cio' che cambiera' applicando ha la sua scritta.
   Niente si deve muovere spuntando: la barra "Applica" galleggia in basso a
   destra invece di comparire sopra la tabella (la spingeva giu'), le colonne
   dei canali hanno una larghezza loro (la scritta "Da pubblicare" le
   allargava) e lo spazio della scritta c'e' anche quando e' vuota. */
.mp-modifiche {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 800;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 48px);
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface, #fff);
  box-shadow: 0 10px 30px rgba(15, 26, 48, 0.18);
  font-weight: 600;
}
/* `display: flex` qui sopra batte l'attributo `hidden` del browser. */
.mp-modifiche[hidden] { display: none; }
/* La barra copre l'angolo in basso: la paginazione deve restare raggiungibile. */
.mp-sezione { padding-bottom: 72px; }
.mp-tabella .mp-canale { width: 118px; text-align: center; white-space: nowrap; }
.mp-tabella td.mp-canale.is-online { background: var(--ok-soft); }
.mp-casella { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.mp-casella input[type="checkbox"], .mp-canale input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
.mp-stato { display: block; min-height: 1.3em; font-size: calc(11px * var(--ui-font-scale)); font-weight: 700; }
.mp-stato--online { color: var(--ok-ink); }
.mp-stato--da-pubblicare { color: #b45309; }
.mp-stato--da-togliere { color: var(--danger-strong); }
@media (max-width: 700px) {
  .mp-modifiche { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

/* Partitario passivo: piu' fatture dello stesso fornitore pagate con un
   bonifico. La barra compare solo con qualcosa spuntato. */
.payables-bonifico {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-muted, #f8fafc);
  font-weight: 600;
}
/* `display: flex` qui sopra batte l'attributo `hidden` del browser. */
.payables-bonifico[hidden] { display: none; }
.payable-pick-header,
.payable-pick { width: 32px; text-align: center; }
.payable-pick input { width: 16px; height: 16px; margin: 0; }

/* Voce obbligatoria della perizia lasciata vuota: si accende quando il
   salvataggio la rifiuta, e si spegne appena la si compila. */
.perizia-mancante input:not([type="hidden"]),
.perizia-mancante textarea {
  border-color: var(--danger, #dc2626);
  background: #fff7f7;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.perizia-scheda-area { container-type: inline-size; }
.perizia-scheda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
@container (max-width: 900px) {
  .perizia-scheda { grid-template-columns: minmax(0, 1fr); }
}
/* Ripiego per chi non ha le container query: si guarda comunque lo schermo. */
@supports not (container-type: inline-size) {
  @media (max-width: 1500px) {
    .perizia-scheda { grid-template-columns: minmax(0, 1fr); }
  }
}
.sa-contenitore {
  padding: 10px;
  border: 1px solid #dbe7f5;
  border-radius: 12px;
  background: #ffffff;
  overflow-x: auto;
}
.sa-schema { width: 100%; min-width: 520px; height: auto; display: block; }
/* Una vista sola, ritagliata sulla sua tela: sul telefono le cinque in fila
   danno riquadri da cinque pixel, che col dito non si premono. Qui il
   `min-width` che tiene leggibile la fila intera non serve piu' e anzi
   farebbe scorrere la pagina. */
.sa-schema--una { min-width: 0; }
/* La fila per scegliere la vista esiste sempre, si vede solo sul telefono. */
.scheda-viste { display: none; }

@media (max-width: 700px) {
  .scheda-viste {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
  }
  .scheda-viste__voce {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: inherit;
    font-size: calc(12.5px * var(--ui-font-scale));
    font-weight: 650;
    cursor: pointer;
  }
  .scheda-viste__voce.is-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
  }
  /* Quante ne ha segnate quella vista: con una per volta, le altre quattro non
     si vedono, e senza il conto non si saprebbe che ci sono. */
  .scheda-viste__conto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.12);
    font-size: calc(10.5px * var(--ui-font-scale));
  }
  .scheda-viste__voce.is-active .scheda-viste__conto { background: rgba(255, 255, 255, 0.28); }
}
/* Le auto sono fotografie appoggiate sotto la griglia: non devono prendersi
   i clic dei riquadri, che stanno sopra. */
.sa-schema image { pointer-events: none; }
.sa-cella { fill: transparent; stroke: #94a3b8; stroke-width: 0.7; }
/* Il riquadro sull'auto si preme; quello fuori e' aria — tratteggiato, spento
   e senza cursore, cosi' non si prova nemmeno. */
.sa-cella[data-cella] { cursor: pointer; }
.sa-cella[data-cella]:hover { fill: #cfe0f6; fill-opacity: 0.55; }
.sa-cella--spenta { stroke: #e3eaf3; stroke-dasharray: 3 3; pointer-events: none; }
/* Il riquadro segnato: bianco pieno con il bordo doppio nel colore del danno.
   La velatura sopra la fotografia lasciava la lettera in mezzo al grigio della
   lamiera — stessa resa del PDF, cosi' quello che si segna e quello che si
   stampa si somigliano. */
.sa-cella--segnata { stroke-width: 2.4; }
.sa-cella--scelta { stroke: #1d4ed8; stroke-width: 2.4; }
.sa-coord { font-size: 11px; fill: #64748b; text-anchor: middle; pointer-events: none; }
.sa-coord--riga { dominant-baseline: central; }
.sa-titolo {
  font-size: 12px;
  font-weight: 800;
  fill: #1d4ed8;
  letter-spacing: 0.5px;
  pointer-events: none;
}
.sa-lettera {
  /* Piu' grande e quasi nera: e' l'unica cosa che dice *che* danno e'. */
  font-size: 18px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.perizia-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  font-size: calc(12px * var(--ui-font-scale));
  color: #475569;
}
.perizia-legenda__voce { display: inline-flex; align-items: center; gap: 6px; }
.perizia-legenda__voce i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-style: normal;
  font-weight: 800;
  color: var(--tinta);
  border: 1px solid var(--tinta);
  background: color-mix(in srgb, var(--tinta) 14%, #ffffff);
}

.perizia-dettaglio {
  border: 1px solid #dbe7f5;
  border-radius: 12px;
  background: #f8fbff;
  padding: 14px;
  position: sticky;
  top: 12px;
}
.perizia-dettaglio__testa h4 { margin: 0 0 2px; }
.perizia-dettaglio__etichetta {
  display: block;
  margin: 12px 0 6px;
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #64748b;
}
.perizia-dettaglio__area {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
}
.perizia-dettaglio__area strong { display: block; color: #1d4ed8; }
.perizia-dettaglio__campo { display: block; margin-top: 12px; }
.perizia-dettaglio__azioni { display: grid; gap: 8px; margin-top: 14px; }
.perizia-tipi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.perizia-tipo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid #dbe7f5;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  font-size: calc(11px * var(--ui-font-scale));
  color: #334155;
  text-align: center;
}
.perizia-tipo__codice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-weight: 800;
  color: var(--tinta);
  border: 1px solid var(--tinta);
  background: color-mix(in srgb, var(--tinta) 14%, #ffffff);
}
.perizia-tipo.is-active { border-color: var(--tinta); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tinta) 22%, transparent); }
.perizia-gravita { display: flex; gap: 8px; }
.perizia-gravita__voce {
  flex: 1;
  padding: 7px 4px;
  border-radius: 999px;
  border: 1px solid #dbe7f5;
  background: #ffffff;
  cursor: pointer;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 600;
  color: #475569;
}
.perizia-gravita__voce--lieve.is-active { border-color: #16a34a; color: #166534; background: #dcfce7; }
.perizia-gravita__voce--media.is-active { border-color: #d97706; color: #92400e; background: #ffedd5; }
.perizia-gravita__voce--grave.is-active { border-color: #dc2626; color: #991b1b; background: #fee2e2; }

/* Spesa marcata "acquisto veicolo": la nota sotto la spunta spiega a cosa
   serve, perche' il collegamento all'estratto conto non si indovina. */
.payable-expense-flag { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.payable-expense-flag input { width: auto; margin: 0; }
.payable-expense-flag__nota { margin: 2px 0 6px; font-size: calc(12px * var(--ui-font-scale)); }
.form-actions--start { justify-content: flex-start; }

/* Tendina dentro una finestra di dialogo: la scelta sta fra il messaggio e i
   pulsanti, dove la si cerca. */
.app-dialog__choice { display: block; margin: 4px 0 12px; }
.app-dialog__choice select { width: 100%; }

/* Descrizione del movimento con il pulsante che ci infila l'auto: il campo
   prende tutto lo spazio, il pulsante resta della sua misura. */
.deed-payment-descrizione { display: flex; align-items: stretch; gap: 8px; }
.deed-payment-descrizione input { flex: 1 1 auto; min-width: 0; }
.deed-payment-descrizione .btn { flex: 0 0 auto; white-space: nowrap; }

/* Garanzie in statistiche: quante, quanto rendono. */
.stats-garanzie__voci {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin-top: 12px;
}
.stats-garanzie__voci div { display: flex; flex-direction: column; gap: 2px; }
.stats-garanzie__voci strong { font-size: calc(17px * var(--ui-font-scale)); }
.stats-garanzie__voci .is-positivo { color: #166534; }
.stats-garanzie__voci .is-negativo { color: #b42318; }
.stats-garanzie__nota { margin-top: 10px; font-size: calc(12px * var(--ui-font-scale)); }

/* Carico, scarico, fattura nell'elenco vendite: tre segni in fila, letti a
   colpo d'occhio. Ognuno ha la sua lettera, e lo stato cambia **forma** oltre
   che colore — pieno fatto, puntini in attesa, tratteggiato mancante — cosi'
   si legge anche senza distinguere il verde dal grigio. */
.col-avanzamento { width: 118px; text-align: center; white-space: nowrap; }
.passi-vendita { display: inline-flex; gap: 4px; }
.passo-vendita {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: calc(12px * var(--ui-font-scale));
}
.passo-vendita--fatto { background: #dcfce7; color: #15803d; border-color: #86efac; }
.passo-vendita--in_attesa { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
.passo-vendita--manca { background: transparent; color: #94a3b8; border: 1px dashed #cbd5e1; }

/* Selettore veicolo del partitario: due azioni gemelle sulla stessa riga —
   collegare la fattura all'auto conteggiandola fra i costi, oppure collegarla
   e basta (la voltura e' gia' contata nel dettaglio economico del contratto). */
.customer-picker-item--azioni {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: default;
}
.customer-picker-item--azioni .customer-picker-item__testo { min-width: 0; }
.customer-picker-item__azioni { display: flex; gap: 6px; flex-shrink: 0; }

/* Lo stato del veicolo in statistiche: un pallino, non una parola. Giallo in
   stock, verde venduta, blu consegnata — il nome sta nel `title`, perche' un
   colore da solo non si legge. */
.stats-table th:last-child, .stats-table td:last-child { width: 52px; text-align: center; }
.stato-pallino {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  vertical-align: middle;
}
.stato-pallino--stock { background: #facc15; }
.stato-pallino--venduta { background: #22c55e; }
.stato-pallino--consegnata { background: #2563eb; }
.stato-pallino--provvisoria { background: #cbd5e1; }

/* I due totali del partitario passivo: verde cio' che e' uscito, arancione
   cio' che deve ancora uscire. Il colore accompagna un'etichetta ("Pagato",
   "Da pagare"), non la sostituisce. */
.importo-pagato { color: #15803d; }
.importo-da-pagare { color: #b45309; }

/* Il fascicolo: le spunte di cosa stampare, dentro la scheda delle stampe. */
.fascicolo {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fascicolo__voci { display: flex; flex-direction: column; gap: 4px; }
/* La scelta di chi intesta l'istanza: sotto le schede dei documenti, perche'
   vale sia per l'anteprima sia per il fascicolo. Il campo non sta dentro un
   `.form`, quindi l'aspetto di serie degli altri campi va rimesso qui:
   altrimenti e' l'unico riquadro squadrato della pagina. */
.fascicolo__intestatario {
  margin-top: 12px;
  display: block;
  font-weight: 700;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--text);
  letter-spacing: -0.01em;
}
.fascicolo__intestatario input {
  width: 100%;
  padding: calc(8px * var(--ui-font-scale)) calc(10px * var(--ui-font-scale));
  border: 1px solid #d6deea;
  border-radius: var(--radius-sm);
  background: #f8fafc;
  font-family: inherit;
  font-size: calc(13px * var(--ui-font-scale));
  font-weight: 500;
  line-height: 1.35;
  min-height: calc(36px * var(--ui-font-scale));
  cursor: pointer;
}
.fascicolo__intestatario input:hover { border-color: #b9c5d8; }
.fascicolo__intestatario input:focus {
  outline: none;
  border-color: #7aa9f8;
  box-shadow: 0 0 0 4px rgba(15, 95, 215, 0.11);
}
/* Un `label` di serie in questo foglio e' una colonna (etichetta sopra, campo
   sotto): senza `row` la spunta finirebbe **sopra** il suo testo. */
.riga-spunta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
}
.riga-spunta input { width: auto; margin: 0; accent-color: #2563eb; }

/* Il periodo del cruscotto provvigioni: due tendine e la scorciatoia al mese
   corrente. Larghezze fisse, cosi' cambiare mese non fa muovere la barra —
   con le pastiglie il numero di caratteri cambiava e tutto si spostava. */
.sf-periodo {
  grid-template-columns: minmax(140px, 180px) minmax(110px, 140px) auto;
  align-items: end;
  gap: 10px;
}
.sf-periodo__oggi { height: calc(42px * var(--ui-font-scale)); white-space: nowrap; }

@media (max-width: 700px) {
  /* Tre colonne con un minimo di 140+110 piu' il pulsante vogliono ~400px: a
     390 sforavano di otto. Mese e anno restano affiancati — sono la stessa
     domanda — e "Mese corrente" scende sotto. */
  .sf-periodo { grid-template-columns: 1fr 1fr; }
  .sf-periodo__oggi { grid-column: 1 / -1; }
}

/* Quando la percentuale in anagrafica non e' piu' quella con cui il mese e'
   stato calcolato: si dice, e accanto c'e' il pulsante che la applica. */
.avviso-riallinea { color: #b45309; }
.btn--riallinea { border-color: #f0b100; color: #92400e; }

/* --- Numeri del gruppo (capogruppo di affiliati) --- */

/* Un affiliato che non risponde non deve passare inosservato: e' la
   differenza fra "questo mese hanno consegnato poco" e "manca un'agenzia".
   Rosso come gli errori, perche' finche' c'e' non si puo' fatturare. */
.gruppo-avviso {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 18px;
  font-size: calc(13px * var(--ui-font-scale));
  line-height: 1.5;
}
.gruppo-avviso strong { color: inherit; }

/* La riga dell'agenzia muta: si vede che c'e' ed e' vuota, invece di
   sembrare un'agenzia che non ha venduto niente. */
.gruppo-riga--spenta { background: #fff7f7; }
.gruppo-riga--spenta td { color: #9a3412; }
.gruppo-riga__motivo {
  display: block;
  font-size: calc(11px * var(--ui-font-scale));
  color: #b91c1c;
  line-height: 1.4;
}

/* Il secondo blocco di una sezione affiliato si stacca dalla tabella del
   primo: attaccato, il titolo "Finanziamenti" si legge come la didascalia
   dell'elenco che si e' appena finito di guardare. */
.gf-blocco { margin-top: 22px; }
#gruppo-classifica { min-width: 170px; }

/* La seconda barra della stessa scheda: si stacca dalla prima, altrimenti le
   sei tendine si leggono come un elenco solo. */
.gf-incasso { margin-top: 10px; }

/* Il titolo di un blocco dentro la scheda: piu' piccolo dell'h2 della sezione,
   che sta fuori e nomina l'affiliato. Senza, i due pesano uguale e non si
   capisce quale contenga l'altro. */
.card > .section__header h3 {
  margin: 0;
  font-size: calc(0.95rem * var(--ui-font-scale));
  letter-spacing: -0.015em;
}
.card > .section__header > div > p.muted { margin: 2px 0 0; }

/* La barra della fattura al gruppo ha una voce in piu' — l'affiliato — quindi
   non puo' riusare le tre colonne della forza vendita: li' la terza si prende
   l'avanzo, e qui l'anno finiva schiacciato a niente. Dichiarata **dopo**
   `.sf-periodo`, che a parita' di specificita' e' come si vince. */
.gf-periodo {
  /* L'ultima traccia e' **vuota**: assorbe lo spazio che avanza. Nella scheda,
     larga tutta la pagina, un `auto` sul pulsante lo faceva crescere fino al
     bordo destro — un "Mese corrente" lungo mezzo schermo. */
  grid-template-columns:
    minmax(150px, 210px) minmax(120px, 160px) minmax(90px, 120px) max-content 1fr;
}
/* Anche l'incasso resta a sinistra invece di stirarsi sulla riga. */
.gf-incasso {
  grid-template-columns: minmax(150px, 210px) minmax(150px, 240px) 1fr;
}

/* I pulsanti di una riga non vanno a capo: in una tabella stretta finivano uno
   sotto l'altro e la riga diventava alta il doppio. Se non ci stanno, scorre
   il contenitore — che e' cio' che `.table-wrapper` fa gia'. */
.table-actions .actions-inline { flex-wrap: nowrap; }

/* Le filiali dell'affiliato: spunte in griglia, non una colonna sola. Con
   quattro sedi in verticale il modulo si allungava di mezzo schermo per una
   domanda a cui si risponde in un istante. */
.affiliato-filiali {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px 12px;
  margin: 0;
}
.affiliato-filiali legend {
  font-size: calc(12px * var(--ui-font-scale));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 650;
  padding: 0 4px;
}
.affiliato-filiali > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 4px 16px;
}
/* Senza affiliato scelto dentro c'e' una riga sola: con i margini di serie del
   paragrafo il riquadro diventava alto il doppio dei campi accanto. */
.affiliato-filiali > div > p.muted { margin: 2px 0; }

/* Un'agenzia del gruppo senza ancora i suoi patti: c'e', e si vede che manca
   qualcosa. Sparire sarebbe il modo per non fatturarla mai. */
.affiliato--da-compilare { background: #fffbeb; }
.affiliato--da-compilare td:first-child strong { color: #92400e; }

/* ------------------------------------------------------------------ voltura
   Data voltura e scarico TULPS, sulla pagina del contratto.

   Finche' e' vuota il movimento **non entra nel registro**: la scheda si
   marca in rosso perche' e' una cosa rimasta da fare, non un dettaglio. Da
   compilata torna una scheda come le altre — un rosso che resta acceso per
   sempre e' un rosso che si smette di vedere. */
.voltura__campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: calc(13px * var(--ui-font-scale));
  color: var(--muted);
}
.voltura__campo input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: calc(14px * var(--ui-font-scale));
  color: var(--text);
  background: #fff;
}
.voltura .actions-inline { margin-top: 10px; }
.voltura--mancante { border-color: #fca5a5; box-shadow: inset 3px 0 0 #dc2626; }
.voltura--mancante h2 { color: #b91c1c; }
.voltura--mancante .voltura__campo span { color: #b91c1c; font-weight: 600; }
.voltura--mancante .voltura__campo input { border-color: #fca5a5; background: #fef2f2; }

/* Righe di filiale che seguono la prima della stessa agenzia: il nome non si
   ripete, quindi il filo che le tiene insieme e' il bordo piu' tenue. */
.gruppo-riga--seguito > td { border-top-color: #f1f5f9; }

/* Gruppi di ricavo in Impostazioni: le caselle dei tipi di fattura. */
.ricavo-gruppo { border-top: 1px solid var(--border); padding: 14px 0; }
.ricavo-gruppo:first-child { border-top: 0; padding-top: 0; }
.ricavo-gruppo__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ricavo-gruppo__testa h3 { margin: 0; font-size: calc(15px * var(--ui-font-scale)); }
.ricavo-tipi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 18px;
}
.ricavo-tipo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(13px * var(--ui-font-scale));
}

/* Gruppi di ricavo nella scheda Costi e ricavi. Il verde e' l'unico segnale
   che li distingue dai costi a colpo d'occhio: il segno da solo si legge, ma
   solo dopo aver letto il numero. */
.stats-group--ricavo { border-color: #bbf7d0; background: #f6fef9; }
.stats-group--ricavo .eyebrow { color: #15803d; }
.stats-group__voce--statica {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: calc(13px * var(--ui-font-scale));
}
.stats-groups__totale--netto { border-top-width: 2px; }

/* ---------------------------------------------------------------- fatturato
   Fatturato attivo e passivo con la ripartizione IVA, in Statistiche. */
.fatturato { display: flex; flex-direction: column; gap: 14px; }
.fatturato__lati {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.fatturato__lato {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
}
.fatturato__lato header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.fatturato__lato h3 { margin: 2px 0 0; font-size: calc(16px * var(--ui-font-scale)); }
.fatturato__lato--attivo { border-color: #bbf7d0; background: #f6fef9; }
.fatturato__lato--attivo .eyebrow { color: #15803d; }
.fatturato__lato--passivo { border-color: #fecaca; background: #fffafa; }
.fatturato__lato--passivo .eyebrow { color: #b91c1c; }
.fatturato__totale { font-size: calc(18px * var(--ui-font-scale)); white-space: nowrap; }
.fatturato__voci { list-style: none; margin: 10px 0 0; padding: 0; }
.fatturato__voci li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  font-size: calc(13px * var(--ui-font-scale));
}
.fatturato__voci li:first-child { border-top: 0; }
.fatturato__voci strong { font-variant-numeric: tabular-nums; }

/* Le colonne numeriche delle tabelle filiali e venditori: **in grassetto**,
   perche' sono il dato e il resto e' contorno. Quelle di stato prendono in
   piu' il colore della loro casella in cima alla pagina — e' lo stesso numero
   letto due volte, e con tinte diverse si leggerebbe come due cose. I colori
   sono quelli degli `h3` di `.metric--*`: cambiarne uno solo qui li farebbe
   divergere. */
/* Il podio: la medaglia o la coppa a sinistra del numero, che resta e resta
   incolonnato con il 4 (la colonna e' allineata a destra). Le medaglie l'oro,
   l'argento e il bronzo ce l'hanno gia' dentro; la coppa e' un'emoji sola e
   nasce oro, quindi argento e bronzo li fa il filtro — con tre coppe identiche
   il podio non direbbe chi e' primo. */

/* La colonna del podio: **allineata a sinistra**, non a destra.

   E' l'unico modo perche' il numero stia alla stessa distanza dal bordo nelle
   due classifiche. "Top filiali" ha undici colonne e "Top venditori" sette, e
   con `table-layout: auto` lo spazio in eccesso si distribuisce fra le
   colonne: dare al `#` la stessa larghezza non basta, perche' la fetta in piu'
   che riceve e' diversa nelle due tabelle e il numero — allineato a destra —
   si sposta con lei. Allineato a sinistra parte invece dal riempimento della
   cella, che e' lo stesso, e il segno del podio ha larghezza fissa: il numero
   cade sempre nello stesso punto.

   La specificita' deve battere `.stats-table td.num` (0,2,1), che allinea a
   destra: per questo i selettori sono qualificati. */
.num--podio,
.stats-table th.num--podio,
.stats-table td.num--podio {
  width: 76px;
  text-align: left;
}

.podio {
  /* Larghezza fissa, e resta anche vuota fuori dal podio: e' cosi' che il
     numero si incolonna con quelli del podio in **qualunque** tabella, che sia
     allineata a destra o a sinistra. */
  display: inline-block;
  width: 1.4em;
  text-align: center;
  margin-right: 4px;
  font-size: calc(14px * var(--ui-font-scale));
  line-height: 1;
  vertical-align: -1px;
}
.podio--argento { filter: grayscale(1) brightness(1.25) contrast(0.9); }
.podio--bronzo { filter: sepia(1) saturate(2.2) hue-rotate(-22deg) brightness(0.82); }

/* La classifica si ordina cliccando il titolo della colonna: il titolo dice
   gia' su cosa si ordina, e una tendina accanto lo direbbe una seconda volta.
   La freccia compare solo sulla colonna attiva — un clic che non lascia
   traccia non si capisce se ha funzionato. */
.colonna-ordinabile { cursor: pointer; user-select: none; }
.colonna-ordinabile:hover { color: #1d4ed8; }
.colonna-ordinabile.is-ordinata { color: #1d4ed8; }
.colonna-ordinabile.is-ordinata::after { content: " \2193"; font-weight: 700; }

.cella-stato { font-weight: 700; }
.cella-stato--available { color: #b45309; }
.cella-stato--loaded { color: #4338ca; }
.cella-stato--sold { color: #15803d; }
.cella-stato--delivered { color: #0369a1; }
.cella-stato--returned { color: #be123c; }

/* Sotto il nome della sede, quello della concessionaria. Con quattro filiali
   di due agenzie diverse, "Novara" da sola non dice di chi e'.

   La regola sta su una **classe** e non sull'id della tabella: cosi' vale in
   tutte e due le pagine che montano `core/tabella-filiali.js`, e soprattutto
   non prende anche l'importo finanziato — che e' un `small` nella stessa
   tabella e andava a capo per sbaglio. */
.tabella-filiali__agenzia {
  display: block;
  font-size: calc(11px * var(--ui-font-scale));
  line-height: 1.5;
}

/* --------------------------------------------------------- targhe prova
   Riga di una targa disattivata: resta in elenco perche' le deleghe gia'
   firmate la nominano, ma si vede che non si puo' piu' delegare. */
.riga-spenta > td { background: #fafafa; }
.riga-spenta > td:first-child strong { color: var(--muted); font-weight: 500; }
tr.is-selected > td { background: #eef4ff; }

/* Intestazione documenti: una scheda per filiale.
   Le schede si succedono in colonna e non in griglia: sono moduli da
   compilare, non riquadri da confrontare, e affiancati i campi diventerebbero
   troppo stretti per un indirizzo. */
.letterhead-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 16px;
  margin-top: 12px;
}
.letterhead-card__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.letterhead-card__head h3 {
  margin: 0;
  font-size: calc(15px * var(--ui-font-scale));
}
/* Le schede non stanno dentro un `.form`, quindi l'aspetto dei campi non gli
   arriva (§6.35-ter): le etichette restavano in linea con il campo, e si
   incolonnavano solo dove il testo era abbastanza lungo da mandarlo a capo —
   "Denominazione" sopra il campo ed "Email" accanto, nella stessa riga. */
.letterhead-card label {
  display: grid;
  gap: 4px;
  font-size: calc(12px * var(--ui-font-scale));
  color: var(--muted);
}
.letterhead-card label input {
  width: 100%;
}

/* --- Scheda pubblica dell'auto ---------------------------------------------
   La apre un cliente dal link ricevuto in chat, quasi sempre dal telefono:
   niente barra laterale, niente sessione, e tutto dimensionato per il pollice.
   E' l'unica pagina del gestionale che vede qualcuno che non ci lavora, quindi
   la prima cosa che si legge e' il marchio della concessionaria e la seconda
   e' la macchina. */
body.vetrina {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--bg, #f4f6fa);
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
}
.vetrina__scheda {
  width: 100%;
  max-width: 560px;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 18px 24px;
  box-shadow: 0 18px 44px -22px rgba(15, 23, 42, 0.35);
}
/* Marchio a sinistra, firma a destra. Su una CarBi pura la firma non c'e' e
   il logo resta da solo, come prima. */
.vetrina__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}
.vetrina__marchio { display: block; height: 34px; width: auto; max-width: 55%; object-fit: contain; }
/* Qui il "powered by" si legge anche sul telefono, al contrario che nella
   barra del gestionale: la' lo spazio serve ai contatori e chi guarda sa gia'
   dove si trova, qui e' un cliente e quella riga e' l'unica cosa che dice chi
   fa il prodotto. */
.vetrina .powered { margin-right: 0; flex: 0 0 auto; }
.vetrina .powered__testo { display: inline; }
.vetrina .powered__logo { height: 22px; }
@media (max-width: 380px) {
  .vetrina .powered__testo { display: none; }
}
.vetrina__titolo {
  margin: 0 0 14px;
  font-size: calc(23px * var(--ui-font-scale));
  line-height: 1.25;
  text-wrap: balance;
}
.vetrina__attesa, .vetrina__errore { color: var(--muted); line-height: 1.5; }
.vetrina__errore h1 { color: var(--text); font-size: calc(20px * var(--ui-font-scale)); margin: 0 0 8px; }

/* La galleria e' uno scorrimento con aggancio: il gesto lo fa il sistema
   operativo, non un ascoltatore del trascinamento scritto da noi — funziona
   anche mentre le immagini stanno ancora arrivando. */
/* Il palco esiste per le frecce da computer: sul telefono e' un contenitore
   trasparente che non cambia niente. */
.vetrina__palco { position: relative; }
/* Sul telefono le frecce non ci sono proprio: il gesto e' lo swipe, e due
   pulsanti sopra la foto coprirebbero la macchina. */
.vetrina__freccia { display: none; }

.vetrina__slide {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 12px;
  background: var(--surface-strong, #f3f4f6);
  /* La barra di scorrimento qui e' rumore: il gesto e' lo swipe, e sotto c'e'
     gia' il conteggio che dice a che punto si e'. */
  scrollbar-width: none;
}
.vetrina__slide::-webkit-scrollbar { display: none; }
.vetrina__foto {
  flex: 0 0 100%;
  width: 100%;
  /* `contain` e non `cover`: le foto di un'auto non hanno tutte le stesse
     proporzioni, e ritagliarle taglierebbe proprio la macchina. */
  aspect-ratio: 4 / 3;
  object-fit: contain;
  scroll-snap-align: center;
  background: var(--surface-strong, #f3f4f6);
}
.vetrina__conteggio {
  margin: 8px 0 12px;
  text-align: center;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: calc(13px * var(--ui-font-scale));
}
.vetrina__miniature {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.vetrina__miniatura {
  flex: 0 0 auto;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  line-height: 0;
  /* Il bordo della miniatura attiva non e' l'unico segnale: le altre restano
     smorte, cosi' si distingue anche senza percepire il colore. */
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.vetrina__miniatura.is-attiva { border-color: var(--accent); opacity: 1; }
/* Le stesse misure per la foto e per il video: nella striscia sono la stessa
   cosa — cio' che c'e' di quell'auto, in ordine. */
.vetrina__miniatura img,
.vetrina__miniatura video {
  width: 62px;
  height: 46px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.vetrina__miniatura--video { position: relative; }
/* Un fermo immagine da solo non si distingue da una foto: il triangolo dice
   che li' sotto c'e' un filmato. Non prende i clic — il clic e' della
   miniatura, che porta il visualizzatore su quel video. */
.vetrina__miniatura-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding-left: 2px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.62);
  color: #ffffff;
  font-size: calc(11px * var(--ui-font-scale));
  pointer-events: none;
}
/* Il video nella striscia grande: stessa misura della foto, fondo nero — e'
   li' che il filmato ci sta dentro senza essere ritagliato. */
.vetrina__foto--video { background: #000000; }
@media (prefers-reduced-motion: reduce) {
  .vetrina__slide { scroll-behavior: auto; }
  .vetrina__miniatura { transition: none; }
}

/* --- La stessa scheda, aperta da un computer ------------------------------
   Il link nasce per la chat e da li' si apre quasi sempre dal telefono, dove
   la colonna stretta e' giusta: una foto larga quanto lo schermo, lo swipe, il
   pulsante che riempie la riga. Sullo schermo di un computer quella stessa
   colonna diventa una striscia in mezzo al vuoto, con la foto piccola e due
   terzi di pagina bianchi.
   Da 900px in su la scheda si apre in **due colonne** — la galleria a
   sinistra, cio' che si legge a destra — e compaiono le frecce, perche' li' lo
   swipe non c'e'. **Sotto quella misura non cambia una riga**: il telefono
   resta esattamente com'era. */
@media (min-width: 900px) {
  body.vetrina { align-items: center; padding: 34px 26px 40px; }
  .vetrina__scheda { max-width: 1240px; padding: 26px 26px 26px; }
  .vetrina__marchio { height: 40px; }
  .vetrina .powered__logo { height: 26px; }

  /* **Le foto prendono tutta la larghezza.** Il pulsante in una colonna di
     lato si portava via un terzo della scheda per due righe di testo, e quel
     terzo e' proprio lo spazio in cui si guarda la macchina: ora sta in cima,
     accanto al titolo, e sotto c'e' solo la galleria. */
  #vetrina-contenuto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    align-items: center;
  }
  .vetrina__titolo {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 16px;
    font-size: calc(30px * var(--ui-font-scale));
  }
  .vetrina__salva { grid-column: 2; grid-row: 1; margin: 0 0 16px; text-align: right; }
  .vetrina__galleria,
  #vetrina-senza-foto { grid-column: 1 / -1; grid-row: 2; }
  /* Da computer i video stanno **dentro** la galleria: questo blocco resta
     vuoto, e la riga esiste solo per le schede aperte prima. */
  .vetrina__video { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; }
  /* Il pulsante largo quanto la colonna e' del telefono, dove la riga e' il
     dito. Qui si tiene la misura del suo testo. */
  .vetrina__salva-btn { width: auto; padding-inline: calc(26px * var(--ui-font-scale)); }
  .vetrina__salva-nota { text-align: left; }

  /* **Si parte dall'altezza, non dalle proporzioni.** Con un `aspect-ratio`
     l'altezza esce dalla larghezza della colonna, e su uno schermo orizzontale
     una foto 4/3 restava alta un terzo dello spazio disponibile. Fissando
     l'altezza la macchina prende tutti i pixel che lo schermo concede, e
     `contain` continua a non ritagliare niente — le foto di un'auto non hanno
     tutte le stesse proporzioni. Il tetto in pixel serve agli schermi molto
     alti, dove `62vh` diventerebbe una foto piu' alta che larga. */
  /* La misura e' **misurata**: con 58vh su un portatile (900px di altezza) la
     striscia delle miniature finisce dentro lo schermo, e la foto resta la
     cosa piu' grande della pagina. A 62vh la striscia usciva di un pixel e la
     pagina cominciava a scorrere per niente. */
  .vetrina__foto { aspect-ratio: auto; height: min(58vh, 620px); }

  /* **Una riga sola, che scorre.** Andando a capo, ventitre foto diventavano
     quattro file di miniature che si prendevano mezza pagina — e quella pagina
     serve alla macchina. La miniatura attiva si porta sotto gli occhi da sola
     (`scrollIntoView` in `auto.js`), quindi la riga non si scorre a mano. */
  .vetrina__miniature { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
  .vetrina__miniatura img,
  .vetrina__miniatura video { width: 96px; height: 70px; }
  .vetrina__miniatura-play { width: 30px; height: 30px; }

  /* Le frecce: sopra la foto, agli estremi. Con una foto sola restano
     `hidden` — un comando che non porta da nessuna parte e' peggio di
     nessun comando. */
  .vetrina__freccia:not([hidden]) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.55);
    color: #ffffff;
    font-size: calc(28px * var(--ui-font-scale));
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .vetrina__freccia--prec { left: 10px; }
  .vetrina__freccia--succ { right: 10px; }
  .vetrina__freccia:hover,
  .vetrina__freccia:focus-visible { background: rgba(17, 24, 39, 0.78); }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .vetrina__freccia { transition: none; }
}

/* --- "Manda le info": il pannello dal parco auto --------------------------- */
.share-modal__panel { max-width: 460px; }
.share-modal__body { display: flex; flex-direction: column; gap: 14px; }
.share-modal__body label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.share-modal__body input {
  padding: calc(9px * var(--ui-font-scale)) calc(11px * var(--ui-font-scale));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  font-weight: 400;
}
/* Nessuna foto caricata: si dice prima di mandare, non dopo. */
.share-modal__meta--vuota { color: #b45309; font-weight: 600; }
.share-modal__link { margin: 0; font-size: calc(12px * var(--ui-font-scale)); color: var(--muted); word-break: break-all; }
.share-modal__link a { color: var(--accent); }

.share-rubrica__esiti {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
}
.share-rubrica__esiti .muted { margin: 6px; }
.share-rubrica__voce {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: calc(7px * var(--ui-font-scale)) calc(9px * var(--ui-font-scale));
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.share-rubrica__voce:hover, .share-rubrica__voce:focus-visible { background: var(--pill); }
.share-rubrica__nome { font-weight: 600; }
.share-rubrica__numero { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* **La casella resta una casella.** `.form input` la stira a tutta la colonna
   con 36px di altezza minima: dentro una tabella diventa un rettangolo grande
   quanto una cella. Qui si rimette alla sua misura. */
.manual-invoice-lines-wrap input[type="checkbox"] {
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  display: block;
  accent-color: var(--accent);
}

/* Una riga di solo testo: i campi spenti si vedono spenti, altrimenti sembrano
   da riempire. */
.manual-invoice-lines-wrap .riga-descrittiva input:disabled,
.manual-invoice-lines-wrap .riga-descrittiva select:disabled {
  background: var(--surface-strong, #f3f4f6);
  color: var(--muted);
}
.manual-invoice-lines-wrap td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Messaggio al cliente (Impostazioni) ---------------------------------- */
.vetrina-segnaposto { display: flex; flex-wrap: wrap; gap: 6px; }
.vetrina-segnaposto__voce {
  padding: calc(5px * var(--ui-font-scale)) calc(10px * var(--ui-font-scale));
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--pill);
  color: var(--accent-strong);
  font: inherit;
  font-size: calc(12px * var(--ui-font-scale));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
}
.vetrina-segnaposto__voce:hover, .vetrina-segnaposto__voce:focus-visible {
  border-color: var(--accent);
}
.vetrina-anteprima {
  padding: calc(12px * var(--ui-font-scale)) calc(14px * var(--ui-font-scale));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.vetrina-anteprima p:last-child { margin: 0; line-height: 1.5; white-space: pre-wrap; }

/* --- I video nella scheda del cliente -------------------------------------- */
.vetrina__video { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.vetrina__clip { margin: 0; }
.vetrina__clip video {
  width: 100%;
  border-radius: 12px;
  background: #000;
  display: block;
}
.vetrina__clip figcaption {
  margin-top: 4px;
  text-align: center;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: calc(13px * var(--ui-font-scale));
}

/* --- Video dell'auto: wizard e pagina del telefono ------------------------- */
.carica-foto__nota-video { margin: 6px 0 14px; text-align: center; font-size: calc(12px * var(--ui-font-scale)); }

/* --- "Salva sul telefono" -------------------------------------------------- */
.vetrina__salva { margin-top: 18px; text-align: center; }
.vetrina__salva-btn {
  width: 100%;
  padding: calc(13px * var(--ui-font-scale)) calc(16px * var(--ui-font-scale));
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: calc(16px * var(--ui-font-scale));
  cursor: pointer;
}
.vetrina__salva-btn:disabled { opacity: 0.6; cursor: default; }
.vetrina__salva-nota {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: calc(13px * var(--ui-font-scale));
  min-height: 1.2em;
}

/* Il margine nella creazione del contratto.
   Si apre da un pulsante e non sta sempre acceso: davanti al cliente puo'
   essere meglio non averlo sullo schermo. */
.contract-margine {
  margin-top: 14px;
}

/* I due campi delle provvigioni stanno sopra al riquadro calcolato, non
   dentro: quel riquadro si riscrive a ogni ricalcolo, e un campo dentro
   perderebbe il fuoco a ogni cifra digitata. */
.contract-margine__provvigioni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.contract-margine__provvigioni.hidden {
  display: none;
}

.contract-margine__box {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-strong, #f8fafc);
}

.contract-margine__riga {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: calc(13px * var(--ui-font-scale));
}

.contract-margine__riga--totale {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: calc(15px * var(--ui-font-scale));
}

/* Il colore accompagna il segno, non lo sostituisce: il numero resta scritto
   con il suo meno davanti. */
.contract-margine__riga--totale.is-guadagno strong { color: var(--success, #15803d); }
.contract-margine__riga--totale.is-perdita strong { color: var(--danger, #b91c1c); }

.contract-margine__nota {
  margin: 10px 0 0;
  font-size: calc(12px * var(--ui-font-scale));
}

/* La spunta del conto bonifico nella tabella dei conti.
   `.form input` la stirerebbe a tutta la colonna con 36px di altezza minima:
   dentro una cella diventerebbe un rettangolo grande quanto la casella. */
.conto-bonifico {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.conto-bonifico input[type="checkbox"] {
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  margin: 0;
  cursor: pointer;
}

/* Lo storico delle spese di gestione: l'elenco dei mesi a sinistra e le
   colonne a destra. Due letture della stessa cosa — una si legge, l'altra si
   guarda — e su schermi stretti si impilano invece di stringersi entrambe. */
.spese-storico {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.spese-storico__elenco {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spese-storico__riga {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: baseline;
  padding: calc(4px * var(--ui-font-scale)) calc(8px * var(--ui-font-scale));
  border-radius: 6px;
  font-size: calc(13px * var(--ui-font-scale));
}

.spese-storico__riga:nth-child(odd) {
  background: var(--surface-strong, #f8fafc);
}

.spese-storico__riga strong {
  font-variant-numeric: tabular-nums;
}

.spese-storico__riga em {
  font-style: normal;
  font-size: calc(11px * var(--ui-font-scale));
  color: var(--muted, #6b7280);
  font-variant-numeric: tabular-nums;
}

/* Il colore dice se il mese e' sopra o sotto il precedente, ma non da solo:
   nell'elenco la freccia lo accompagna sempre. */
.spese-storico__riga.is-su em { color: #b91c1c; }
.spese-storico__riga.is-giu em { color: #047857; }

.spese-storico__grafico svg {
  width: 100%;
  height: auto;
}

.spese-storico__anno {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: calc(12px * var(--ui-font-scale));
}

@media (max-width: 700px) {
  .spese-storico {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* I supplementi della garanzia in contratto: **uno per riga**, con la spunta a
   sinistra. Il contenitore non aveva regole, quindi le etichette scorrevano
   una dietro l'altra sulla stessa riga e a tre o quattro supplementi non si
   capiva piu' quale spunta appartenesse a quale voce. */
.contract-warranty-supplements {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--ui-font-scale));
  margin-top: calc(6px * var(--ui-font-scale));
}

/* `.hidden` e' dichiarata molto piu' su: a parita' di specificita' vince
   l'ultima, quindi senza questa riga il riquadro resterebbe visibile anche su
   una garanzia che di supplementi non ne ha. E' la trappola di 6.43, 6.44 e
   6.46 — la quarta volta. */
.contract-warranty-supplements.hidden {
  display: none;
}

.contract-warranty-supplements .listing-check-line {
  width: 100%;
  justify-content: flex-start;
}

/* La consegna ha una colonna sua in Gestione vendite. Verde quando e' fatta:
   e' la riga che non chiede piu' niente, e in una colonna di pastiglie il
   colore e' la prima cosa che si legge. Il testo lo accompagna sempre. */
.badge--consegnata { background: #dcfce7; color: #166534; }

.col-consegna {
  white-space: nowrap;
}

/* Il titolo si preme per ordinare: deve dirlo prima di essere premuto. */
.is-ordinabile {
  cursor: pointer;
  user-select: none;
}

.is-ordinabile:hover {
  text-decoration: underline;
}

.is-ordinabile.is-ordinata {
  color: var(--accent, #0ea5e9);
}

/* --------------------------------------------------------------------------
   La vetrina delle Liste
   ---------------------
   La pagina che vede chi le Liste non le ha: l'unica del gestionale che deve
   **convincere** invece di far lavorare. Ha un impianto suo, ma dentro i
   colori e il carattere di sempre — e' pur sempre il loro gestionale.

   La tavolozza esce dalla foto: il blu notte delle ombre, il ciano dei fari,
   l'ambra delle luci della citta'. Tre tinte, usate per distinguere le
   schede, non per riempire: il colore qui serve a dare un ritmo alla griglia,
   non a colorare tutto.

   **Niente immagini da fuori.** La CSP del proxy dichiara `img-src 'self'`:
   una foto presa da un CDN verrebbe bloccata in silenzio. La fotografia e'
   quella che la pagina di accesso usa gia', e il resto e' disegnato — icone
   in SVG e il foglio di esempio costruito in CSS.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Scegliere fra tante voci: si cerca, e cio' che si e' scelto resta davanti.

   Vive nel **guscio** perche' lo usano console e Liste per la stessa cosa —
   assegnare le filiali a un accesso. Il gestionale oggi non lo usa: sta qui
   perche' qui sta il foglio che il guscio copia.
   -------------------------------------------------------------------------- */
.scelta-filiali {
  display: grid;
  gap: 8px;
  min-width: calc(220px * var(--ui-font-scale));
}

.scelta-filiali__scelte {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.scelta-filiali__scelta {
  display: inline-flex;
  /* **La direzione va dichiarata.** Il foglio ha un `label`/contenitore a
     colonna piu' in su, e senza questa riga il nome finirebbe sopra la x. */
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft, rgba(37, 99, 235, .1));
  color: var(--accent-strong, var(--accent));
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 650;
  white-space: nowrap;
}

.scelta-filiali__togli {
  display: grid;
  place-items: center;
  width: calc(18px * var(--ui-font-scale));
  height: calc(18px * var(--ui-font-scale));
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: calc(15px * var(--ui-font-scale));
  line-height: 1;
  cursor: pointer;
}

.scelta-filiali__togli:hover { background: rgba(0, 0, 0, .08); }

.scelta-filiali__vuoto { font-size: calc(12px * var(--ui-font-scale)); }

/* L'elenco esce **sopra** il resto e non allunga la riga: dentro una tabella,
   spingerebbe in basso tutte le righe sotto ogni volta che si cerca. */
.scelta-filiali__cerca { position: relative; }

.scelta-filiali__campo { width: 100%; min-height: calc(34px * var(--ui-font-scale)); }

.scelta-filiali__elenco {
  /* **Fissa, non assoluta**, ed e' il punto da non cambiare senza sapere
     perche'. Il controllo vive dentro una tabella, e la tabella sta in un
     `.table-wrapper` con `overflow: auto`: un elemento *assoluto* non esce da
     li' — l'elenco veniva tagliato dal bordo del riquadro e da fuori sembrava
     che la tendina si aprisse "sotto" e sparisse. In `fixed` non lo ritaglia
     nessun antenato.

     Il prezzo e' che le coordinate non le puo' piu' dare il foglio: le scrive
     `colloca()` in `guscio/scelta-filiali.js`, che misura lo spazio vero e —
     se sotto non ce n'e' — apre verso l'alto. Lo `z-index` passa sopra la
     barra in alto (900): e' una tendina che dura un istante, e finire sotto
     di lei sarebbe lo stesso difetto di prima da un'altra parte. */
  position: fixed;
  z-index: 950;
  max-height: calc(240px * var(--ui-font-scale));
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px -8px rgba(16, 24, 40, .22);
}

.scelta-filiali__elenco[hidden] { display: none; }

.scelta-filiali__voce {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.scelta-filiali__voce:hover,
.scelta-filiali__voce.is-evidenziata { background: var(--pill); }

.scelta-filiali__altre,
.scelta-filiali__niente {
  margin: 4px 0 2px;
  padding: 0 10px;
  font-size: calc(12px * var(--ui-font-scale));
}

/* --------------------------------------------------------------------------
   La pagina che racconta a cosa servono le Liste, a chi non le ha comprate.

   **Si chiama `promo`, non `vetrina`, e il motivo va saputo.** Era nata
   riusando i nomi `vetrina__*`, che pero' erano gia' della **scheda pubblica
   dell'auto** ("Manda le info", §6.43): tre di quei nomi coincidevano —
   `.vetrina`, `.vetrina__scheda`, `.vetrina__foto` — e queste regole, stando
   piu' avanti nel foglio, vincevano sulle sue. Il risultato si vedeva dove fa
   piu' danno: dietro ogni foto d'auto mandata a un cliente compariva lo
   **sfondo della pagina di accesso**, con la sua velatura a sinistra.

   Un foglio solo per tutto il prodotto vuol dire che un nome e' unico in tutto
   il prodotto: due pagine diverse non possono chiamare le cose allo stesso
   modo e sperare che il contesto le separi — il contesto, in CSS, non esiste.

   **`hidden` da solo non nasconde niente qui.** `.promo` dichiara un
   `display`, che e' una regola d'autore e batte quella del browser: questa
   pagina restava visibile dal caricamento fino al salto, quindi **chi le Liste
   ce le ha** vedeva per un attimo la pubblicita' di una cosa che ha gia'
   comprato.

   E' la quinta volta in questo progetto: `.powered` (§6.43), l'immagine del
   lightbox (§6.44), la scheda Indicata (§6.46), i riquadri della fattura
   passiva (§6.30-quater). La regola sta accanto a quella che causa il
   problema, che e' l'unico posto in cui la si ritrova.
   -------------------------------------------------------------------------- */
.promo[hidden] { display: none; }

.promo {
  --vet-notte: #0b1226;
  --vet-blu: #1d3a6e;
  --vet-accento: #3b82f6;
  --vet-ciano: #7dd3fc;
  --vet-ambra: #f59e0b;
  --vet-verde: #34d399;

  display: flex;
  flex-direction: column;
  gap: calc(22px * var(--ui-font-scale));
}

/* --- l'apertura: parole a sinistra, la foto a destra -------------------- */

.promo__apertura {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  background:
    radial-gradient(1200px 400px at 0% 0%, rgba(59, 130, 246, .28), transparent 60%),
    linear-gradient(135deg, var(--vet-notte) 0%, #142a52 55%, var(--vet-blu) 100%);
  border-radius: 18px;
  overflow: hidden;
  color: #e8eefc;
}
.promo__parole {
  padding: calc(46px * var(--ui-font-scale)) calc(40px * var(--ui-font-scale));
  align-self: center;
}
.promo__occhiello {
  margin: 0 0 12px;
  font-size: calc(11.5px * var(--ui-font-scale));
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vet-ciano);
}
.promo__apertura h2 {
  margin: 0 0 14px;
  font-size: calc(33px * var(--ui-font-scale));
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 16em;
}
.promo__sommario {
  margin: 0;
  color: #b9c9e8;
  font-size: calc(15.5px * var(--ui-font-scale));
  line-height: 1.62;
  max-width: 40em;
}
.promo__azioni {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: calc(26px * var(--ui-font-scale));
}
/* Sul fondo scuro il grigio di `.muted` sparirebbe. */
.promo__mail { color: #8ea6d4; font-size: calc(13.5px * var(--ui-font-scale)); }

.promo__cta {
  display: inline-flex;
  align-items: center;
  padding: calc(11px * var(--ui-font-scale)) calc(20px * var(--ui-font-scale));
  border-radius: 999px;
  background: var(--vet-accento);
  color: #fff;
  font-weight: 700;
  font-size: calc(14px * var(--ui-font-scale));
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(59, 130, 246, .35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.promo__cta:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(59, 130, 246, .45); text-decoration: none; }
.promo__cta:focus-visible { outline: none; box-shadow: 0 0 0 3.5px rgba(125, 211, 252, .55); }
.promo__cta--chiara { background: #fff; color: var(--vet-blu); box-shadow: 0 8px 20px rgba(11, 18, 38, .18); }
.promo__cta--chiara:hover { box-shadow: 0 10px 26px rgba(11, 18, 38, .26); }

/* La foto e' verticale (668x1024): a destra ci sta per intero, e la velatura
   a sinistra la fonde nel fondo invece di lasciare un taglio netto. */
.promo__foto {
  /* La foto e' verticale: `center 38%` tiene in quadro il frontale e le
     luci, che sono la parte che si riconosce a colpo d'occhio. */
  min-height: calc(260px * var(--ui-font-scale));
  background: url("/static/img/login-sfondo.jpg?v=3") center 38% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%);
  mask-image: linear-gradient(to right, transparent, #000 22%);
}

/* --- le sei schede ------------------------------------------------------ */

/* Il minimo e' **420px e non 300**, e non e' un numero a caso: a 300 le sei
   schede si dispongono 4+2 su un monitor largo, e due rimaste sole in fondo
   si leggono come se mancasse qualcosa. A 420 la griglia non riesce a farne
   quattro e ne fa tre, cioe' due righe piene. Piu' stretto degrada da solo a
   due e poi a una. */
.promo__griglia {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.promo__scheda {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: calc(22px * var(--ui-font-scale));
  transition: box-shadow .14s ease, transform .14s ease;
}
.promo__scheda:hover { box-shadow: 0 10px 26px rgba(15, 23, 42, .09); transform: translateY(-2px); }
.promo__scheda h3 {
  margin: 14px 0 6px;
  font-size: calc(15.5px * var(--ui-font-scale));
  letter-spacing: -0.015em;
}
.promo__scheda p {
  margin: 0;
  color: var(--muted);
  font-size: calc(13.5px * var(--ui-font-scale));
  line-height: 1.62;
}

/* La pastiglia colorata: e' il colore a dare ritmo alla griglia, e ogni
   tinta torna due volte — un colore per scheda sarebbe un arcobaleno. */
.promo__chip {
  display: grid;
  place-items: center;
  width: calc(42px * var(--ui-font-scale));
  height: calc(42px * var(--ui-font-scale));
  border-radius: 12px;
}
.promo__chip svg {
  width: calc(21px * var(--ui-font-scale));
  height: calc(21px * var(--ui-font-scale));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.promo__chip--blu   { background: #dbeafe; color: #1d4ed8; }
.promo__chip--ciano { background: #cffafe; color: #0e7490; }
.promo__chip--ambra { background: #fef3c7; color: #b45309; }
.promo__chip--verde { background: #d1fae5; color: #047857; }

/* --- il foglio di esempio ----------------------------------------------- */

.promo-lista {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: calc(26px * var(--ui-font-scale));
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: calc(26px * var(--ui-font-scale));
}
.promo__occhiello--scuro { color: var(--vet-accento); }
.promo-lista__testa h3 { margin: 0 0 6px; font-size: calc(19px * var(--ui-font-scale)); letter-spacing: -0.02em; }
.promo-lista__testa p { margin: 0 0 8px; font-size: calc(13.5px * var(--ui-font-scale)); line-height: 1.6; }
.promo-lista__testa p:last-child { margin-bottom: 0; }

/* Il foglio: si scorre di lato invece di stringere le colonne, come ogni
   altra tabella del gestionale.
   `position: relative` regge la sfumatura in fondo, che e' il modo per far
   capire che l'elenco **continua** senza scrivere un numero che non
   sapremmo: quante auto trovi dipende da come sono larghe le maglie della
   ricerca, e inventarne una cifra sarebbe una promessa. */
.promo-lista__foglio {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
/* Le ultime righe svaniscono: l'occhio legge "ce ne sono altre" prima di
   qualunque didascalia. Non intercetta i clic — e' una velatura, non un
   coperchio. */
.promo-lista__sfuma {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(86px * var(--ui-font-scale));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 82%);
  pointer-events: none;
}
.promo-lista__foglio table { width: 100%; border-collapse: collapse; font-size: calc(13px * var(--ui-font-scale)); }
.promo-lista__foglio th {
  text-align: left;
  padding: calc(10px * var(--ui-font-scale)) calc(14px * var(--ui-font-scale));
  background: #f1f5f9;
  color: var(--muted);
  font-size: calc(11px * var(--ui-font-scale));
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.promo-lista__foglio td {
  padding: calc(11px * var(--ui-font-scale)) calc(14px * var(--ui-font-scale));
  border-top: 1px solid var(--border);
  white-space: nowrap;
}
.promo-lista__auto { font-weight: 650; }
/* I numeri incolonnati: senza, le cifre ballano da riga a riga. */
.promo-lista__prezzo { font-weight: 700; color: var(--vet-blu); font-variant-numeric: tabular-nums; }
.promo-lista__foglio td:nth-child(2),
.promo-lista__foglio td:nth-child(3) { font-variant-numeric: tabular-nums; color: var(--muted); }
.promo-lista__zona {
  color: #0e7490;
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 650;
}
/* La freccia: dice che la riga **porta da qualche parte** — un clic e si apre
   l'annuncio. Senza, un elenco di numeri sembra un foglio da leggere e basta. */
.promo-lista__apri {
  width: 1%;
  padding-right: calc(12px * var(--ui-font-scale));
  color: var(--vet-accento);
}
.promo-lista__apri svg {
  display: block;
  width: calc(15px * var(--ui-font-scale));
  height: calc(15px * var(--ui-font-scale));
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.promo-lista__foglio tbody tr:hover { background: #f8fafc; }

/* --- la chiusura -------------------------------------------------------- */

.promo__chiusura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, var(--vet-blu) 0%, var(--vet-notte) 100%);
  border-radius: 14px;
  padding: calc(26px * var(--ui-font-scale)) calc(30px * var(--ui-font-scale));
  color: #e8eefc;
}
.promo__chiusura h3 { margin: 0 0 6px; font-size: calc(18px * var(--ui-font-scale)); letter-spacing: -0.02em; }
.promo__chiusura p { margin: 0; max-width: 46em; color: #b9c9e8; font-size: calc(13.5px * var(--ui-font-scale)); line-height: 1.6; }

/* Sotto i 900px l'apertura e il foglio si impilano: la foto resta, piu'
   bassa, perche' e' la cosa che fa capire di cosa si parla prima di leggere. */
/* Impilandosi, l'apertura diventava alta piu' di uno schermo: il titolo a
   33px su una colonna stretta va a cinque righe, e delle schede non si vedeva
   niente. Si stringono titolo e margini — la foto resta, perche' e' quella
   che fa capire di cosa si parla prima ancora di leggere. */
@media (max-width: 900px) {
  .promo__apertura { grid-template-columns: minmax(0, 1fr); }
  .promo__parole { padding: calc(30px * var(--ui-font-scale)) calc(24px * var(--ui-font-scale)); }
  .promo__apertura h2 { font-size: calc(25px * var(--ui-font-scale)); }
  .promo__sommario { font-size: calc(14.5px * var(--ui-font-scale)); }
  .promo__azioni { margin-top: calc(20px * var(--ui-font-scale)); }
  .promo__foto {
    min-height: calc(180px * var(--ui-font-scale));
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%);
    mask-image: linear-gradient(to bottom, transparent, #000 26%);
  }
  .promo-lista { grid-template-columns: minmax(0, 1fr); }
}

.liste-ponte { padding: calc(18px * var(--ui-font-scale)) 0; }

/* La data dentro un pulsante: "Riscarica XML 23/09/2026".

   **In linea e piu' piccola**, non su una seconda riga: la riga della tabella
   deve restare alta com'e'. Il colore e' quello del pulsante attenuato —
   dichiarare una tinta propria la farebbe leggere come un'altra cosa invece
   che come un dettaglio della stessa etichetta. */
.btn-data {
  margin-left: 6px;
  font-size: 0.86em;
  font-weight: 600;
  opacity: .8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Il consenso al marketing, sulla scheda dell'informativa privacy: e' una
   domanda che si fa mentre si prepara il foglio da far firmare, non una
   tendina in un'altra pagina. */
.consenso-marketing {
  display: block;
  margin-top: calc(10px * var(--ui-font-scale));
  padding-top: calc(10px * var(--ui-font-scale));
  border-top: 1px dashed var(--border);
}
.consenso-marketing__titolo {
  display: block;
  margin-bottom: calc(4px * var(--ui-font-scale));
  font-size: calc(12px * var(--ui-font-scale));
  font-weight: 600;
  color: var(--muted);
}
.consenso-marketing .form-select { width: 100%; }
.consenso-marketing small { display: block; margin-top: calc(4px * var(--ui-font-scale)); }
.sale-invoice-document-card__nota {
  margin: calc(8px * var(--ui-font-scale)) 0 0;
  font-size: calc(12px * var(--ui-font-scale));
}

/* **Il prezzo di vendita non e' un dato della fattura.** Stava in mezzo a
   numero e data del documento d'acquisto, e li' si legge come una voce del
   fornitore: ora si stacca con una riga sopra. */
.listing-prezzo-vendita {
  grid-column: 1 / -1;
  padding-top: calc(10px * var(--ui-font-scale));
  border-top: 1px dashed var(--border);
}
.listing-prezzo-acquisto {
  display: block;
  max-width: calc(360px * var(--ui-font-scale));
  margin-bottom: calc(12px * var(--ui-font-scale));
}
.listing-prezzo-vendita small,
.listing-prezzo-acquisto small { display: block; margin-top: calc(3px * var(--ui-font-scale)); }

/* **Aggiungere una riga alla fattura da contratto.** Sta sotto la tabella
   dell'anteprima: descrizione, importo IVA inclusa, aliquota. La riga nasce
   gia' con un prezzo, perche' nell'anteprima una riga a zero e' solo testo e
   quantita', prezzo e IVA li' non si toccano. */
.invoice-preview-aggiungi {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(140px, 1fr) minmax(150px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.invoice-preview-aggiungi label {
  display: grid;
  gap: 4px;
  font-size: calc(11.5px * var(--ui-font-scale));
  font-weight: 600;
  color: var(--muted);
}
.invoice-preview-aggiungi input,
.invoice-preview-aggiungi select { width: 100%; }
.invoice-preview-togli { margin-left: 8px; }
@media (max-width: 700px) {
  .invoice-preview-aggiungi { grid-template-columns: 1fr; }
}

/* Le scadenze degli affiliati (pagina Affiliati della capogruppo): scaduta
   rossa, vicina ambra. Il testo dice sempre "scaduta il" o "fra N giorni":
   il colore accompagna, non sostituisce. */
.scadenza {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: calc(12px * var(--ui-font-scale));
  white-space: nowrap;
}
.scadenza--scaduta { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.scadenza--vicina { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }