body { margin: 0; }

.app {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

/* — nav — */
.app-nav {
  padding: 14px 32px;
  gap: 26px;
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 5;
}
.app-brand { display: flex; align-items: center; gap: 10px; margin-right: 28px; }
.brand-mark {
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  display: grid; place-items: center;
  font-size: 11px;
}
.nav-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; }
.nav-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

/* — shared — */
.page-title { margin: 0 0 4px; }
.page-sub { font-size: 13px; margin: 0; }
.stack-10 { display: flex; flex-direction: column; gap: 10px; }
.row-between { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-right { text-align: right; }
select.input { appearance: none; }

/* — nuova etichetta — */
.nuova {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, auto);
  gap: 48px;
  padding: 28px 32px 64px;
  align-items: start;
}
.form-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; font-size: 13px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-divider);
  color: var(--color-text);
}
.chip:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.chip[aria-pressed='true'] { border-color: var(--color-accent); color: var(--color-accent); }
.section-label { margin: 0; color: var(--color-accent); }
.campi-affiancati { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 12px; }

.contact-list {
  display: flex; flex-direction: column;
  max-height: 300px; overflow: auto;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.contact {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--color-divider);
  color: var(--color-text); font: inherit;
  cursor: pointer; text-align: left;
}
.contact:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
.contact[aria-selected='true'] {
  box-shadow: inset 2px 0 0 var(--color-accent);
  background: var(--color-accent-900);
}
.contact-text { display: flex; flex-direction: column; gap: 1px; text-align: left; min-width: 0; }
.contact-name { font-size: 14px; font-weight: 500; }
.contact-sede { font-size: 12px; opacity: 0.6; }
.contact-mark { font-size: 11px; color: var(--color-accent); letter-spacing: 0.08em; }
.list-empty { padding: 14px 12px; font-size: 13px; }

.colli {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.colli-label { font-size: 13px; }
.colli-controls { display: flex; align-items: center; gap: 10px; }
.colli-count { font-size: 15px; min-width: 16px; text-align: center; }
.note { font-size: 12px; margin: 0; }
.btn-stampa { min-height: 40px; }

/* — anteprima / etichette — */
.preview-col { display: flex; flex-direction: column; gap: 14px; }
.preview-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; }
.anteprima-scroll { max-height: 78vh; overflow: auto; }
.print-scale { transform: scale(0.55); transform-origin: top left; width: 440px; }
.print-area { display: flex; flex-direction: column; gap: 18px; }
.sheet {
  width: 210mm; height: 297mm;
  background: #ffffff; color: #17181f;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-md);
}
/* Le misure dell'etichetta stanno tutte su --scala: con quattro etichette per foglio
   lo spazio è metà in larghezza e uguale in altezza, quindi rimpicciolisce tutto. */
.slot {
  --scala: 1;
  height: 148.5mm;
  padding: calc(14mm * var(--scala)) calc(16mm * var(--scala));
  display: flex; flex-direction: column;
  border-bottom: 1px dashed rgba(23, 24, 31, 0.35);
}
/* Quattro per foglio: due colonne da 105 mm, due righe da 148,5 mm. */
.foglio-4 { display: grid; grid-template-columns: 105mm 105mm; grid-template-rows: 148.5mm 148.5mm; }
.foglio-4 .slot { --scala: 0.56; }
.foglio-4 .slot:nth-child(odd) { border-right: 1px dashed rgba(23, 24, 31, 0.35); }

.label-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: calc(8mm * var(--scala));
  border-bottom: 1px solid #17181f;
  padding-bottom: calc(3mm * var(--scala));
}
.label-kicker {
  font-size: calc(10px * var(--scala)); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55;
}
.label-vettore {
  font-size: calc(20px * var(--scala)); font-weight: 600; letter-spacing: -0.01em; margin-top: 1mm;
}
.label-rif { display: flex; flex-direction: column; align-items: flex-end; gap: 1mm; text-align: right; }
.label-codice {
  font-size: calc(15px * var(--scala)); font-weight: 600; letter-spacing: 0.1em; font-variant-numeric: tabular-nums;
}
.label-ddt {
  font-size: calc(13px * var(--scala)); font-weight: 500; letter-spacing: 0.06em; font-variant-numeric: tabular-nums;
}
.label-dest { margin-top: calc(14mm * var(--scala)); }
.label-nome {
  font-size: calc(40px * var(--scala)); font-weight: 600; line-height: 1.05;
  letter-spacing: -0.025em; margin-top: 2mm;
}
.label-sede { font-size: calc(22px * var(--scala)); font-weight: 400; margin-top: calc(3mm * var(--scala)); }
.label-foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: flex-end; gap: calc(6mm * var(--scala));
  border-top: 1px solid #17181f;
  padding-top: calc(3mm * var(--scala));
}
.label-mittente { font-size: calc(10px * var(--scala)); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }
.label-peso { font-size: calc(14px * var(--scala)); font-weight: 500; font-variant-numeric: tabular-nums; margin-left: auto; }
.label-collo { font-size: calc(15px * var(--scala)); font-weight: 600; font-variant-numeric: tabular-nums; }
.slot-empty {
  flex: 1; display: grid; place-items: center;
  font-size: calc(11px * var(--scala)); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(23, 24, 31, 0.3);
}

/* — borderò: scelta della giornata — */
.giornata-riga { display: flex; gap: 8px; }
.giornata-riga select { flex: 1; min-width: 0; }
.giornata-riga input[type='date'] { width: 132px; flex: none; }

/* — borderò: riga selezionabile — */
.riga-sped { cursor: pointer; }
.riga-sped input { width: 15px; height: 15px; flex: none; accent-color: var(--color-accent); cursor: pointer; }
.riga-sped .contact-text { flex: 1; }
.riga-usata { opacity: 0.5; cursor: default; }
.riga-usata input { cursor: default; }

/* — borderò: documento stampabile — */
/* height auto + min-height: se le righe vanno a capo più del previsto la pagina
   si allunga e il browser ne stampa un'altra, invece di tagliare il contenuto. */
.bordero-sheet { height: auto; min-height: 297mm; padding: 14mm 14mm 10mm; gap: 5mm; }
.bordero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10mm; }
.bordero-numero { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin-top: 1mm; }
.bordero-meta { display: flex; gap: 8mm; text-align: right; }
.bordero-meta div { display: flex; flex-direction: column; gap: 1mm; }
.bordero-meta span {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55;
}
.bordero-meta strong { font-size: 13px; font-weight: 600; }

.bordero-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.bordero-table th {
  text-align: left; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.55; padding: 0 3mm 2mm 0; border-bottom: 1px solid #17181f;
}
.bordero-table td {
  padding: 1.9mm 3mm 1.9mm 0;
  border-bottom: 1px solid rgba(23, 24, 31, 0.18);
  vertical-align: top;
}
.bordero-table tr { break-inside: avoid; }
/* Il codice spedizione non deve andare a capo: raddoppierebbe l'altezza della riga. */
.bordero-table td:nth-child(2) { white-space: nowrap; padding-right: 4mm; }
.bordero-table th:nth-child(1), .bordero-table td:nth-child(1) { width: 7mm; opacity: 0.55; }
.bordero-table .col-colli, .bordero-table .col-peso {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bordero-table .col-peso { padding-right: 0; }
/* Il DDT sta su una riga sola; il destinatario è la colonna in evidenza. */
.bordero-table td:nth-child(3) { white-space: nowrap; }
.bordero-table td:nth-child(4) { font-weight: 600; }
.bordero-vuoto { text-align: center; padding: 8mm 0; opacity: 0.45; }

.bordero-totali {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-top: 2mm;
  font-size: 13px;
}
.bordero-totali span { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55; }

.bordero-firme { display: flex; gap: 10mm; margin-top: 4mm; }
.bordero-firme .firma { flex: 1; display: flex; flex-direction: column; gap: 8mm; }
.bordero-firme span { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55; }
.bordero-firme .riga-firma { border-bottom: 1px solid #17181f; }

.bordero-pie {
  margin-top: auto;
  display: flex; justify-content: space-between; gap: 8mm;
  padding-top: 3mm;
  border-top: 1px solid rgba(23, 24, 31, 0.25);
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55;
}

/* — storico — */
.storico { padding: 28px 32px 64px; max-width: 1150px; }
.storico .page-sub { margin: 0 0 24px; }
.empty-state { padding: 18px 0; font-size: 13px; }
.azioni-riga { display: flex; justify-content: flex-end; gap: 2px; white-space: nowrap; }
/* Stessa saturazione dell'accento, tinta rossa: distingue l'azione distruttiva. */
.btn-elimina { color: #d98484; }
.btn-elimina:hover { background: color-mix(in srgb, #d98484 12%, transparent); }
.btn-elimina:active { background: color-mix(in srgb, #d98484 20%, transparent); }

/* — rubrica — */
.rubrica {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 48px;
  padding: 28px 32px 64px;
  max-width: 1100px;
  align-items: start;
}
.rubrica-col { display: flex; flex-direction: column; gap: 16px; }
.csv-input { min-height: 160px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.sedi-input { min-height: 96px; font-size: 13px; }
.rubrica-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rubrica-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

@media (max-width: 900px) {
  .nuova, .rubrica { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* — stampa —
   Fuori dai fogli non deve restare niente: con `visibility: hidden` l'interfaccia
   continuerebbe a occupare spazio e il browser stamperebbe pagine in più, per giunta
   nere (lo sfondo scuro dell'app). Qui il resto è `display: none` e la pagina è bianca. */
/* — accesso — */
.login-page { display: flex; align-items: center; justify-content: center; padding: 32px; }
.login-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 360px;
  padding: 32px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.login-card .app-brand { margin: 0; }
.login-errore { color: var(--color-accent); }
.nav-utente { display: flex; align-items: center; gap: 10px; }

/* — utenti — */
.utenti {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 48px;
  padding: 28px 32px 64px;
  max-width: 1000px;
  align-items: start;
}
.utenti-col { display: flex; flex-direction: column; gap: 16px; }
.utenti-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.utenti-azioni { display: flex; gap: 8px; flex-wrap: wrap; }
.utente-io { color: var(--color-accent); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

@media print {
  @page { size: A4; margin: 0; }

  html, body, .app, #view {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
  }
  .app-nav, .form-col, .preview-head, .storico, .rubrica, .utenti, .avviso { display: none !important; }
  .nuova, .preview-col, .anteprima-scroll, .print-scale, .print-area {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }
  /* L'altezza scende di 0,1 mm: l'arrotondamento dei millimetri in pixel non deve far
     traboccare il foglio sulla pagina dopo, che uscirebbe vuota. Sullo stacco fra le due
     etichette lo scarto è 0,05 mm, invisibile rispetto alla fustella. */
  .sheet {
    height: 296.9mm;
    box-shadow: none !important;
    margin: 0 !important;
    overflow: hidden;
    break-after: page;
  }
  .bordero-sheet { height: auto; min-height: 296.9mm; }
  /* Senza questo l'ultimo foglio si porta dietro una pagina vuota. */
  .print-area .sheet:last-child { break-after: auto; }
  /* Solo i fogli forzano la resa dei colori: l'interfaccia scura non deve mai finire in stampa. */
  .print-area, .print-area * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}