/* Copyright 2026 G&G Technologies S.r.l. — SPDX-License-Identifier: Apache-2.0 */

/* What this app adds to gg/base.css, and nothing that base.css already says.
   The vocabulary is the site's: panel over border, the 2px accent filament, square bullets, and
   the accent used to mean "chosen" rather than to decorate. */

:root {
  /* base.css has no `--gradient`, no `--radius-lg` and no `--accent-strong`: the site's own sheet
     does, and an app cannot borrow from it — that sheet is generated by the build and versioned
     with a query string that changes under it. Declared here from the tokens base.css does theme,
     so they follow light and dark on their own. Survey Scope does the same, for the same reason.

     Written down because the first version used all three without declaring them: an undeclared
     custom property makes the whole declaration invalid and is dropped in silence, so the panel
     had no filament, the corners were square and "Salvato." was not green — in both themes, with
     every check passing. */
  --gradient: linear-gradient(90deg, var(--accent), var(--accent-text));
  --accent-strong: var(--accent-text);
  --radius-lg: 22px;

  /* The faint fill under fields and hovered rows. `rgba(255,255,255,.03)` was white on white in
     the light theme: the surface disappeared and a hovered row gave no answer at all. */
  --fill: rgba(255, 255, 255, 0.03);
  --danger: #b4413c;
}

:root[data-theme="light"] {
  --fill: rgba(13, 18, 32, 0.04);
}

/* La striscia del dimostrativo, sopra tutto. Sobria di proposito: quello che deve dire lo dice il
   testo, e una fascia colorata sopra un'app di fatturazione somiglia a un avviso di errore. */
.demo-note {
  margin: 0;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--fill);
  color: var(--faint);
  font-size: 0.85rem;
}

/* ----- the shell: a column of navigation beside the work ----- */

.shell { display: flex; align-items: flex-start; flex: 1 1 auto; min-height: 0; }

.navbar {
  flex: 0 0 var(--nav-w, 200px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 10px;
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  align-self: stretch;
}

.navbar a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--faint);
  text-decoration: none;
  font-size: 0.93rem;
  border-left: 2px solid transparent;
}

.navbar a:hover { color: var(--text); background: var(--fill); }

/* The current entry is marked by the filament — this site's mark for "chosen" — and by the text
   colour as well, because colour never carries the information on its own. */
.navbar a.here {
  color: var(--text);
  background: var(--fill);
  border-left-color: var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.navbar a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* **On a narrow screen the column goes back to being a strip.** A sidebar on a phone is a drawer,
   and a drawer is one more thing to open before you can go anywhere. */
@media (max-width: 720px) {
  .shell { display: block; }

  .navbar {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 12px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    position: static;
  }

  .navbar a {
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    white-space: nowrap;
    background: none;
  }

  .navbar a.here {
    border-left: none;
    border-bottom-color: var(--accent);
    border-radius: 0;
    background: none;
  }
}

/* ----- the page grows with its content ----- */

/* `base.css` is written for an app that fills the window — a chart, a game — and sets
   `html, body { height: 100% }` with `main { flex: 1 1 auto; min-height: 0 }`. This app is a
   document, and it needs the other shape: the body grows, and the footer follows it down.
   Survey Scope reached the same conclusion first, for the same reason; the rule stays in the two
   apps rather than moving into the shared sheet, because that is where the repository keeps
   things until a third case asks for them. */
html { height: 100%; }

body {
  height: auto;
  min-height: 100%;
}

/* ----- screens ----- */

/* **The width belongs to the screen, not to `main`.** `main` is a flex item of a flex column, and
   an `auto` horizontal margin on a flex item makes it shrink to its content instead of centring a
   full-width box: the whole app came out 478 px wide and pushed against the right edge, with the
   three figures wrapping two-and-one. Nothing in the stylesheet is wrong on its own — it only
   fails inside the layout base.css sets up, which is why no check could have seen it and opening
   the page did. */
main { padding: 0; flex: 1 1 auto; min-width: 0; }

.screen {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* **Le schermate con una tabella larga hanno una colonna più larga.**
   I 900px sopra sono la misura di un documento, cioè di qualcosa che si legge; l'elenco dei
   documenti ha sette colonne e lo scadenzario cinque più due comandi, e dentro 900px l'ultima
   finiva tagliata contro il bordo del contenitore che scorre. Si vedeva nello screenshot della
   scheda, dove «Crea la fattura differita» arrivava a metà — ed è il modo in cui questo difetto
   andava trovato: guardando la figura, non il CSS. */
.screen.wide { max-width: 1180px; }

.screen h1 { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 20px; }
.screen h2 { font-family: var(--font-display); font-size: 1.1rem; margin: 32px 0 12px; }

/* The command of a section sits on its heading, not under it: two filled buttons stacked down the
   page compete with each other and with the lists they belong to. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 32px 0 12px;
}

.section-head h2, .section-head h3 { margin: 0; }

/* Due comandi sulla stessa intestazione stanno insieme, non ai due capi della riga: sono la stessa
   azione — aggiungere una riga — presa da due parti diverse. */
.head-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* The title of a document and the control that changes its state, on one line: the state is a
   property of the document, so it belongs next to its name rather than among the commands. */
.doc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.doc-head h1 { margin: 0; flex: 1 1 auto; }
.doc-head #docPrint { align-self: center; }
.doc-stato select { max-width: 180px; }

/* A field that belongs to another kind of document. `.form label` is a flex column, which beats the
   browser's own rule for `hidden` — so without this a hidden field stays on the screen. */
.form label[hidden] { display: none; }

/* Un comando dentro un campo: sta sotto al menù a cui appartiene, e pesa meno di un pulsante
   perché non è l'azione della schermata — è la scorciatoia per non doverla lasciare. */
.link-button {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin-top: 2px;
  color: var(--accent-strong);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-button:hover { color: var(--text); }
.link-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.note { color: var(--faint); font-size: 0.92rem; max-width: 62ch; }
.empty { color: var(--faint); font-size: 0.95rem; padding: 28px 0; }
.ok { color: var(--accent-strong); font-size: 0.9rem; align-self: center; }

/* ----- the highlighted panel, exactly as the site draws it ----- */

.panel {
  position: relative;
  background: linear-gradient(170deg, var(--panel-2), var(--panel) 60%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin: 0 0 20px;
  overflow: hidden;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--gradient);
}

.panel p { margin: 0 0 12px; }
.panel .button { margin: 0; }

/* ----- the three figures ----- */

.figures { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; }

.figure {
  flex: 1 1 160px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--fill);
  padding: 14px 16px;
}

.figure .label { display: block; color: var(--faint); font-size: 0.8rem; }
.figure .value { display: block; font-size: 1.3rem; margin-top: 4px; white-space: nowrap; }

/* ----- form ----- */

.form { display: flex; flex-wrap: wrap; gap: 14px; max-width: 640px; }
.form label { display: flex; flex-direction: column; gap: 6px; flex: 1 1 240px; }
.form label.narrow { flex: 0 1 120px; }
.form label span { color: var(--faint); font-size: 0.82rem; }

/* A required field says so before you try to save. The mark is on the label rather than a colour
   on the box, because an empty box that is already red reads as an error you have made. */
.form label:has(input[required]) span::after,
.form label.required span::after {
  content: " *";
  color: var(--accent-strong);
}

.form input {
  background: var(--fill);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 11px;
  color: var(--text);
  font: inherit;
  min-height: 40px;
}

.form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; flex-basis: 100%; margin-top: 4px; }

.form label.wide { flex: 1 1 100%; }

/* ----- i menù a tendina ----- */

/* **Sono `<select>` nativi, e restano nativi.** Un elenco disegnato a mano si porta dietro tutto
   quello che il browser regala: la tastiera, la ricerca digitando le prime lettere, il lettore di
   schermo, e su un telefono la rotella a tutto schermo invece di una lista che scorre sotto il
   pollice. Quello che si sostituisce è solo l'involucro.

   Il selettore è l'elemento, non `.form select`: la regola stava dentro `.form` e dentro `.rows`, e
   i tre menù che vivono fuori da entrambi — «Un altro tipo», «Dal listino», lo stato del documento —
   arrivavano con la resa del sistema operativo **accanto a un pulsante disegnato**. Si vedeva, ed è
   la stessa famiglia della trappola dello switch di lingua sulla home: una regola scritta per un
   contenitore che quell'elemento non ha. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--fill);
  /* La freccia è disegnata qui perché quella di sistema non si può ricolorare. Il grigio è uno
     solo per i due temi: dentro un `data:` non esiste `currentColor`, e due immagini per due temi
     sarebbero due cose da tenere allineate per una freccia di dodici pixel. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%238b93a5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 11px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 32px 9px 11px;
  color: var(--text);
  font: inherit;
  min-height: 40px;
  cursor: pointer;
}

select:hover:not(:disabled) { border-color: var(--border-strong); }
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Un menù chiuso non è un comando: se il documento è emesso, si legge e basta. */
select:disabled { cursor: default; opacity: 1; color: var(--text); background-image: none; }

.check { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: 0.92rem; }
.check input { width: 18px; height: 18px; }

/* ----- tables ----- */

/* **Una tabella larga scorre dentro di sé, non porta con sé la pagina.**
   Con la colonna del tipo l'elenco dei documenti arriva a sei colonne, e su un telefono l'ultima
   finiva tagliata contro il bordo — senza barra, quindi senza modo di arrivarci. Il contenitore
   che scorre è la regola del sito applicata qui: il corpo della pagina non scorre mai in
   orizzontale, il blocco largo sì. */
.table-scroll { overflow-x: auto; }

/* La colonna del codice dell'Ufficio Tributario esiste solo per chi emette da San Marino. Nascosta
   per classe invece che tolta dal markup: l'intestazione sta nell'HTML e le celle le disegna il
   JavaScript, e una colonna che sparisce da una sola delle due parti sposta tutte le altre. */
.rows.no-tm .col-tm { display: none; }

.rows { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.rows th, .rows td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.rows th { color: var(--faint); font-weight: 500; font-size: 0.8rem; }
.rows .right, .rows th.right { text-align: right; }

/* **Una cifra e una data non vanno a capo, mai.** «122,00 €» spezzato fra due righe smette di
   essere un importo e diventa due cose, e «2026-09-15» su tre righe non si legge più come una data:
   sono le uniche celle il cui contenuto ha una forma, e la forma è metà dell'informazione.
   Quando lo spazio non basta la tabella scorre dentro `.table-scroll`; se non bastasse neanche
   quello, la cella taglia con i puntini invece di andare a capo. */
.rows .right,
.rows th.right,
.rows .nowrap {
  white-space: nowrap;
}

.rows td.right,
.rows td.nowrap {
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rows td.meta { color: var(--faint); }

/* A row that opens something says so on hover and under the keyboard, not only with the cursor. */
.rows tr.clickable { cursor: pointer; }
.rows tr.clickable:hover td { background: var(--fill); }
.rows tr.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* **A field in the grid looks like a field.** The first version left them borderless until hover,
   on the reasoning that eight boxes per row would draw a grid nobody asked for — and the result was
   worse than the problem: an empty line read as text, and there was no way to see where to type
   without hunting with the mouse. In a data-entry grid the boxes *are* the interface.

   Faint rather than heavy: the border is there to say "here", not to draw a table twice. */
.rows input, .rows select {
  width: 100%;
  /* `background-color`, non `background`: la scorciatoia cancellerebbe anche l'immagine, cioè la
     freccia dei menù — che nella griglia è l'unica cosa che distingue un menù da un campo di
     testo. È il difetto che si nota solo quando c'è, e sembra un campo che non si apre. */
  background-color: var(--fill);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 6px;
  color: var(--text);
  font: inherit;
  min-height: 32px;
}

/* Nella griglia la freccia sta più stretta, ma resta. */
.rows select {
  background-position: right 6px center;
  background-size: 9px 6px;
  padding-right: 21px;
}

.rows input:hover, .rows select:hover { border-color: var(--border-strong); }

/* A locked field on an issued document is flat: no box, because there is nothing to type into. */
.rows input:disabled, .rows select:disabled {
  background: none;
  border-color: transparent;
}
.rows input:focus-visible, .rows select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  background: var(--fill);
}

.rows input:disabled, .rows select:disabled { opacity: 1; color: var(--text); }

/* The grid needs a little more room once every cell carries a box. */
.rows td { padding: 7px 8px; }
.rows input.tiny { max-width: 76px; }
/* Un menù stretto quanto un campo stretto nasconderebbe l'etichetta dietro la freccia. */
.rows select.tiny { max-width: 108px; }
.rows input.small, .rows select.small { max-width: 120px; }

/* An overdue date is marked in the accent *and* said in words next to it: colour never carries
   the information on its own, and here the information is somebody's money. */
.rows td.overdue { color: var(--accent-strong); }
.rows td.actions-cell { display: flex; gap: 8px; justify-content: flex-end; align-items: center; white-space: nowrap; }
.rows td.actions-cell select { max-width: 130px; }

/* **The row's own action is not a marginal command.** `.ghost.small` from base.css paints in
   `--faint`, which is right for the little × that removes a line and wrong for "Registra un
   incasso": on a dark ground it read as disabled, and a control that looks disabled does not get
   pressed. Same size, real border, normal text colour. */
.rows .row-action {
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 10px;
  white-space: nowrap;
}

.rows .row-action:hover:not(:disabled) { border-color: var(--accent); background: var(--fill); }

/* ----- the chart ----- */

/* Inside the panel vocabulary the site already has: a border, the radius, and the 2px filament.
   Nothing new is invented here — a box of a kind this site does not use passes every check and
   still looks like it came from somewhere else. */
.chart {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--fill);
  padding: 14px 12px 6px;
  margin: 0 0 20px;
  overflow: hidden;
}

.chart::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--gradient);
}

.timeline { display: block; }

/* ----- what only the printed sheet shows ----- */

/* Sender and recipient are on paper and not on the screen: on the screen the company is the one
   whose app this is and the customer is in the menu above, so printing them there would be telling
   somebody two things they chose a moment ago. On paper their absence is the first thing missing. */
#printSheet { display: none; }

/* The bars are the muted colour; the accent is kept for the one thing that is chosen — here, the
   money that is late. Same rule as the navbar and the illustrations. */
.tl-base { stroke: var(--border); stroke-width: 1; }
.tl-bar { fill: var(--muted); opacity: 0.55; }
.tl-bar.tl-now { opacity: 0.8; }
.tl-overdue { fill: var(--accent); }

.tl-label { fill: var(--faint); font-size: 11px; font-family: var(--font); }
.tl-label-now { fill: var(--text); }
.tl-value { fill: var(--faint); font-size: 10px; font-family: var(--font); }

/* ----- the totals, where a mistake is noticed ----- */

.figure-line {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.figure-line span { color: var(--faint); }

.figure-line.total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 1.1rem;
}

.figure-line.total span { color: var(--text); }

/* ----- the data-entry sheet ----- */

/* Wider than the confirmation dialog, because it holds a form: nine fields at the width of a
   question would be a column of stacked boxes. */
dialog.sheet {
  width: min(680px, calc(100vw - 32px));
  max-width: none;
  padding: 24px;
}

dialog.sheet h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 18px;
}

dialog.sheet .form { max-width: none; }
dialog.sheet .sheet-actions { margin-top: 22px; }
dialog.sheet .spacer { flex: 1 1 auto; }

.sheet-problems {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  color: var(--danger);
  font-size: 0.9rem;
}

.sheet-problems li { padding-left: 18px; position: relative; margin-bottom: 6px; }
.sheet-problems li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  background: var(--danger);
}

/* ----- dialog ----- */

dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--text);
  padding: 22px;
  max-width: min(460px, calc(100vw - 32px));
}

dialog::backdrop { background: rgba(5, 8, 16, 0.62); }
dialog p { margin: 0 0 14px; }

/* The square bullet of the site, not the browser's. */
dialog ul { list-style: none; margin: 0 0 16px; padding: 0; }
dialog li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 0.9rem; }
dialog li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  background: var(--gradient);
}

/* base.css styles `button` and `.primary`; it has no `.button`. The markup uses `.button` on
   anchors too — an <a> is not a <button> and gets none of the base rules — so the class is defined
   here once, on top of what base.css already themes. Without this every primary action, the OK of
   the dialog included, looked exactly like a ghost. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--btn-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button:hover:not(:disabled) { filter: brightness(1.06); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.button.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
  font-weight: 400;
}

.button.danger { background: var(--danger); border-color: transparent; color: #fff; }

/* The delete button is a word, not a red block: it sits next to Cancel, and the question that
   follows is what actually guards it.
   **After `.button.ghost` on purpose.** The two have the same specificity, so the one written last
   wins — and written first, this rule lost silently and Elimina came out the colour of every other
   button. */
.button.ghost.danger-text { color: var(--danger); border-color: transparent; }
.button.ghost.danger-text:hover:not(:disabled) { border-color: var(--danger); }

/* The two notices on Home actually look like notices. `.warn` was in the markup and had no rule. */
.panel.warn { border-color: var(--border-strong, var(--border)); }
.panel.warn::before { background: var(--gradient); }

.install-hint { margin: 0; max-width: 30ch; }

/* ----- on a phone you consult; to issue you want a keyboard ----- */

@media (max-width: 640px) {
  /* In colonna, ma **con l'altezza del contenuto**: `flex: 1 1 160px` in una colonna fa della base
     un'altezza, e i tre riquadri arrivavano a trecento pixel l'uno per un numero solo. */
  .figures { flex-direction: column; }
  .figure { flex: 0 0 auto; }
  .form label, .form label.narrow { flex: 1 1 100%; }
}

/* ----- importazione da un altro programma ----- */

/* Le note del pannello: il quadratino in gradiente che il sito usa per gli elenchi, non il punto
   del browser. Stessa ricetta di `.sheet-problems`, con il colore di chi informa e non di chi
   avverte: qui si dice cosa è stato letto, non cosa è andato storto. */
.imp-notes {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  color: var(--faint);
  font-size: 0.92rem;
  max-width: 72ch;
}
.imp-notes li { padding-left: 18px; position: relative; margin-bottom: 6px; }
.imp-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  background: var(--gradient);
}

.imp-source { margin-top: 12px; }
.imp-source > .note { margin: 0 0 4px; }
.imp-names { margin: 0 0 4px 12px; font-size: 0.92rem; }
.imp-names summary { color: var(--faint); }
.imp-names ul {
  list-style: none;
  margin: 6px 0 8px;
  padding: 0 0 0 18px;
  columns: 2;
  column-gap: 24px;
}
.imp-names li { break-inside: avoid; padding: 2px 0; }
@media (max-width: 640px) { .imp-names ul { columns: 1; } }

#impPanel:focus { outline: none; }
#impUndoBox { margin-top: 20px; }

/* ----- gruppi di campi, nell'anagrafica dell'azienda ----- */

/* Un titolo che prende la riga intera e stacca il gruppo da quello sopra: tre gruppi corti si
   leggono, quindici campi in fila no. */
.form h2.form-group {
  flex: 1 1 100%;
  margin: 14px 0 -4px;
  font-size: 1.05rem;
}
.form h2.form-group:first-child { margin-top: 0; }
.form p.note.wide { flex: 1 1 100%; margin: 0; }

/* Il codice TM esiste solo per chi emette da San Marino: la classe la mette e la toglie `app.js`
   sulla radice, e i campi la seguono. */
:root:not(.tm-profile) .tm-only { display: none; }

/* ----- i filtri dell'elenco documenti ----- */
.docs-filters { max-width: none; margin-bottom: 14px; }
.docs-filters label.wide { flex: 2 1 240px; }
.docs-filters label.narrow { flex: 1 1 140px; }

/* ----- le righe di un documento chiuso ----- */

/* Testo, non campi: un documento emesso si legge, non si compila. La descrizione va a capo dove
   serve — è l'unica colonna che porta una frase — e i numeri restano su una riga. */
.rows td.line-text { white-space: normal; min-width: 14ch; }
.rows td.line-num { white-space: nowrap; text-align: right; }
.rows td.line-code { white-space: nowrap; }

/* ----- le due liste della Situazione ----- */
.home-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.home-list .section-head { margin-bottom: 4px; }
.home-list .section-head h2 { font-size: 1.05rem; margin: 0; }
.home-list .section-head a { font-size: 0.9rem; }
.rows.compact td { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 900px) { .home-lists { grid-template-columns: 1fr; } }


/* ----- le righe del documento, sul telefono: una scheda per riga ----- */

/* Otto colonne di campi in una striscia che scorre di lato erano usabili a fatica — la descrizione
   si leggeva a metà mentre la si scriveva. Qui ogni riga diventa una scheda: la descrizione per
   intero, poi i numeri in due file da tre, con l'etichetta sopra ciascuno. La tabella resta una
   tabella per chi legge con uno screen reader: cambia solo il disegno. */
@media (max-width: 640px) {
  #docLinesTable, #docLinesTable tbody { display: block; }
  #docLinesTable thead { display: none; }
  #docLinesTable tr {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 10px;
    padding: 12px 0 14px;
    border-bottom: 1px solid var(--border);
  }
  #docLinesTable td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  #docLinesTable td::before {
    content: attr(data-label);
    display: block;
    color: var(--faint);
    font-size: 0.78rem;
    margin-bottom: 4px;
  }
  #docLinesTable td:empty::before, #docLinesTable td:last-child::before { content: none; }
  #docLinesTable td.cell-descrizione, #docLinesTable td.line-text { grid-column: 1 / -1; }
  /* La natura prende una riga intera — il suo menù porta una frase — e l'aliquota le sta sotto
     accanto al codice TM: tre file da tre, senza un menù solo in mezzo a una riga vuota. */
  #docLinesTable td.cell-natura { grid-column: 1 / -1; order: 2; }
  #docLinesTable td.cell-aliquota, #docLinesTable td.col-tm { order: 3; }
  #docLinesTable td.cell-totale, #docLinesTable td:last-child { order: 4; }
  #docLinesTable td.cell-totale {
    grid-column: 1 / 3;
    align-self: end;
    font-weight: 600;
  }
  #docLinesTable td:last-child { grid-column: 3; justify-self: end; align-self: end; }
  #docLinesTable td input, #docLinesTable td select { width: 100%; max-width: none; }
  #docLinesTable.no-tm td.col-tm { display: none; }
}

/* L'IBAN per intero: ventisette caratteri in monospazio, e la casella li tiene tutti. */
.rows input.iban { min-width: 30ch; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92rem; }

/* ----- il logo nell'anagrafica dell'azienda ----- */
.logo-field { flex: 1 1 100%; display: flex; flex-direction: column; gap: 10px; }
/* Anteprima su fondo chiaro qualunque sia il tema: un logo scuro su fondo scuro sparirebbe, e la
   carta su cui finisce è bianca. */
#companyLogoPreview {
  max-height: 80px;
  max-width: 260px;
  width: auto;
  height: auto;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-self: flex-start;
}
.logo-field .actions { margin: 0; }