/* Entibase · l'app dei dati (app.{ambiente}), stile EndItUp / WorkItUp.

   Si carica dopo entibase.css e ne usa i token e i componenti: barra laterale,
   barra in alto, pannelli, tabelle che diventano schede, modali a livelli. Qui
   c'è solo ciò che è dell'app — menu delle tabelle, riquadri della home, barra
   della lista, binario delle sezioni nella scheda. Nessun colore a mano: tutto
   passa dai token, così il tema scuro viene da sé. */

/* --- Impianto -------------------------------------------------------------- */

.app-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.app-badge {
  display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
  background: var(--accent-bg); color: var(--accent-ink); font-size: 12.5px; font-weight: 600;
}
.app-sidebar nav { padding-top: 4px; }
.app-nav { display: flex; flex-direction: column; gap: 2px; }

/* La casella che filtra il menu: compare solo con lo script, che la sa usare. */
.app-nav-search { padding: 10px 10px 0; }
.app-nav-search input[type=search] { min-height: 36px; font-size: 14px; }
.app-nav-empty { margin: 8px 2px 0; }

/* L'icona di una tabella: l'iniziale del plurale in un quadrato. */
.table-mark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: var(--radius-s);
  background: var(--accent-bg); color: var(--accent-ink); font-size: 12px; font-weight: 700; line-height: 1;
}
.sidebar nav a.active .table-mark { background: var(--accent-solid); color: var(--on-accent); }

/* --- Home ------------------------------------------------------------------ */

.app-home-group { margin-bottom: 24px; }
.app-home-group > h2, .app-recent > h2 { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 10px; }
.app-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
a.app-tile {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  margin: 0; padding: 14px 16px; min-height: 72px; color: var(--fg); text-decoration: none;
  transition: border-color .12s, box-shadow .12s;
}
a.app-tile:hover { color: var(--fg); border-color: var(--accent); box-shadow: var(--shadow); }
a.app-tile .table-mark { grid-row: 1 / span 2; width: 36px; height: 36px; font-size: 16px; border-radius: var(--radius); }
.app-tile-name { font-weight: 650; font-size: 15px; overflow-wrap: anywhere; }
.app-tile-count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { a.app-tile { transition: none; } }

.app-recent { margin-bottom: 24px; }
.app-recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.app-recent-list a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  color: var(--fg); text-decoration: none; max-width: 100%;
}
.app-recent-list a:hover { border-color: var(--accent); color: var(--fg); }
.app-recent-list .muted { font-size: 12.5px; }

/* --- Elenco ---------------------------------------------------------------- */

.app-toolbar { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.app-search { display: flex; gap: 8px; align-items: center; flex: 1 1 360px; max-width: 560px; min-width: 0; }
.app-search input[type=search] { flex: 1; min-width: 0; }
.app-toolbar-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.app-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.app-filter { gap: 6px; padding: 2px 4px 2px 10px; font-size: 13px; background: var(--accent-bg); color: var(--accent-ink); border-color: transparent; }
.app-filter-remove {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 999px; color: inherit;
}
.app-filter-remove:hover { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
.app-filter-remove .icon { width: 14px; height: 14px; }

table.app-grid td.num, table.app-grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sort-link {
  display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none;
  min-height: 28px; border-radius: var(--radius-s);
}
.sort-link:hover { color: var(--fg); }
.sort-link.sorted { color: var(--fg); }
.sort-icon { font-size: 11px; color: var(--muted); }
.sort-link.sorted .sort-icon { color: var(--accent); }
a.record-link { font-weight: 650; }

.app-pager { margin-top: -4px; }
.pager-steps { display: inline-flex; align-items: center; gap: 4px; }
.pager-step { min-width: 36px; padding: 6px 10px; }
span.pager-step[aria-disabled=true] { opacity: .45; cursor: default; }
.pager-where { padding: 0 6px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.page-size { display: inline-flex; align-items: center; gap: 6px; }
.page-size label { font-size: 13px; color: var(--muted); }
.page-size select { width: auto; min-height: 36px; padding: 4px 28px 4px 8px; }

@media (max-width: 760px) {
  .app-search { flex-basis: 100%; max-width: none; }
  .app-toolbar-actions { margin-left: 0; }
  .pager-step, .page-size select, .app-search button, .app-search a.button { min-height: 44px; }
  .app-pager { gap: 10px; }
  .app-pager .spacer { display: none; }
  .app-filter-remove { width: 36px; height: 36px; }
}

/* --- Scheda: binario delle sezioni (WorkItUp) ------------------------------- */

/* Con il binario la finestra ha un'altezza fissa sul desktop: passando da una
   sezione all'altra non salta. Un po' più larga, per la colonna delle icone. */
@media (min-width: 641px) {
  .modal-box.has-rail { max-width: 860px; height: min(88vh, 50rem); height: min(88dvh, 50rem); display: flex; flex-direction: column; }
  .modal-box.has-rail > .record-shell { flex: 1 1 auto; min-height: 0; }
}

.record-shell.has-rail { display: flex; gap: 16px; align-items: stretch; min-height: 0; }
.record-pane { flex: 1 1 auto; min-width: 0; }
.modal-box.has-rail .record-pane { overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }

.record-rail {
  flex: none; width: 52px; position: sticky; top: 0; align-self: flex-start;
  border-right: 1px solid var(--border); padding-right: 8px; margin-left: -4px;
}
.modal-box.has-rail .record-rail { align-self: stretch; overflow-y: auto; }
.rail-list { display: flex; flex-direction: column; gap: 4px; }
.rail-handle, .rail-item {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--muted); font: inherit; font-weight: 500; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.rail-handle { margin-bottom: 4px; }
/* La maniglia serve solo con lo script, che sa allargare il binario. */
html:not(.js) .rail-handle { display: none; }
.rail-item:hover, .rail-handle:hover { background: var(--hover); color: var(--accent-ink); filter: none; }
.rail-item.is-active { background: var(--accent-bg); color: var(--accent-ink); }
.rail-item.is-active .table-mark { background: var(--accent-solid); color: var(--on-accent); }
.rail-item:disabled { opacity: .4; cursor: not-allowed; background: transparent; }
.rail-item .icon { flex: none; }
.rail-label { display: none; font-size: 14px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; }

/* La maniglia allarga il binario e mostra i nomi accanto alle icone. */
.record-rail.is-expanded { width: 220px; }
.record-rail.is-expanded .rail-item, .record-rail.is-expanded .rail-handle { width: 100%; justify-content: flex-start; padding: 0 10px; }
.record-rail.is-expanded .rail-label { display: inline; }
.record-rail.is-expanded .rail-handle .icon { transform: rotate(180deg); }

/* Una sezione aperta nasconde il modulo, che resta com'è (modifiche comprese). */
[data-record-shell]:not([data-panel=detail]) .record-detail { display: none; }
.record-related > [data-related-body] { min-height: 120px; }
.related-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.related-head h3 { margin: 0; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; }
.related-head .related-all { margin-left: auto; font-size: 13px; }
.embedded-list .table-wrap { border: 1px solid var(--border); border-radius: var(--radius); }
.embedded-list table th, .embedded-list table td { padding-left: 12px; }
.embedded-list .app-pager { margin-top: 10px; }
.crumb-part:not(:empty)::before { content: " › "; }

/* Accanto al binario c'è meno spazio: «Apri …» va sotto la tendina invece di
   schiacciarla. */
.record-shell.has-rail .lookup-row { flex-wrap: wrap; }
.record-shell.has-rail .lookup-row select { flex: 1 1 180px; }

@media (max-width: 760px) {
  /* Sotto i 760 px le righe sono già schede: il bordo del contenitore sarebbe un secondo riquadro. */
  .embedded-list .table-wrap { border: 0; }
  .embedded-list .table-wrap > table { margin: 0; }
}

@media (max-width: 640px) {
  .record-rail { width: 48px; padding-right: 6px; }
  .record-shell.has-rail { gap: 10px; }
  .record-rail.is-expanded { width: min(220px, 70vw); background: var(--surface); z-index: 3; box-shadow: var(--shadow); }
  .rail-handle, .rail-item { width: 40px; height: 44px; }
}

/* La pagina intera della scheda con il binario: un po' più larga. */
.record-page.has-rail { max-width: 980px; }

/* --- Filtri e viste --------------------------------------------------------- */

/* La barra sopra l'elenco: «Viste», «Filtri», «Colonne». Ognuno è un <details>
   nativo che si apre senza script; app-views.js ne tiene aperto uno alla volta.
   Sul desktop il riquadro scende sotto il pulsante, sotto i 640 px è a tutto
   schermo con la testata e i pulsanti sempre in vista. */
.views-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.views-pop { position: relative; }
.views-pop > summary { list-style: none; gap: 8px; max-width: 100%; }
.views-pop > summary::-webkit-details-marker { display: none; }
.views-pop[open] > summary { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-ink); }
.views-trigger-label { overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.views-menu .views-trigger-label { font-weight: 600; }
.views-caret { font-size: 11px; color: var(--muted); }
.views-pop[open] .views-caret { transform: rotate(180deg); }
.views-count { background: var(--accent-solid); color: var(--on-accent); border-color: transparent; font-weight: 600; }
.views-badge { font-size: 11.5px; padding: 0 7px; background: var(--accent-bg); color: var(--accent-ink); border-color: transparent; }

.views-sheet {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 60;
  width: min(360px, calc(100vw - 32px)); max-height: min(72vh, 640px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-l);
  box-shadow: var(--shadow); padding: 0 16px 16px;
}
.views-sheet-wide { width: min(720px, calc(100vw - 32px)); }
.views-sheet-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px;
  margin: 0 -16px 8px; padding: 8px 8px 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.views-sheet-head h2 { margin: 0; font-size: 15px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.views-sheet-foot {
  position: sticky; bottom: -16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin: 12px -16px -16px; padding: 12px 16px; background: var(--surface); border-top: 1px solid var(--border);
}

/* Il menu delle viste: le voci, poi la vista aperta, poi «Salva come vista». */
.views-list { list-style: none; margin: 0 0 8px; padding: 0; }
.views-group { margin: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
a.views-item {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; margin: 0 -10px;
  border-radius: var(--radius); color: var(--fg); text-decoration: none;
}
a.views-item:hover { background: var(--hover); color: var(--fg); }
a.views-item.is-active { background: var(--accent-bg); color: var(--accent-ink); font-weight: 600; }
.views-item-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.views-section { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px; }
.views-section h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; overflow-wrap: anywhere; }
.views-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.views-section label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.views-section label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; min-height: 32px; margin: 6px 0 0; cursor: pointer; }
.views-create { display: flex; flex-direction: column; align-items: stretch; }
.views-create > button { align-self: flex-start; margin-top: 10px; }
.views-rename { margin-bottom: 10px; }
.views-inline { display: flex; gap: 8px; }
.views-inline input { flex: 1; min-width: 0; }
button.views-delete { color: var(--danger); border-color: var(--border); }
button.views-delete:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

/* Il pannello dei filtri: un campo per colonna, due colonne dove c'è spazio. */
.views-fields { display: grid; gap: 4px 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.views-field { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.views-field > label, .views-field > legend { display: block; padding: 0; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--fg); }
.views-choices { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.views-choice { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; font-size: 14px; }
.views-range { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px 8px; align-items: center; margin-top: 4px; }
.views-range label { font-size: 13px; color: var(--muted); }
.views-lookup-search { margin-bottom: 6px; }
.views-lookup[aria-busy=true] select { opacity: .6; }

/* Le colonne: una riga per campo, le frecce per l'ordine. */
.views-cols { list-style: none; margin: 8px 0 0; padding: 0; }
.views-col { display: flex; align-items: center; gap: 8px; min-height: 40px; border-bottom: 1px solid var(--border); }
.views-col:last-child { border-bottom: 0; }
.views-col > label { flex: 1; min-width: 0; }
.views-col-move { display: inline-flex; gap: 2px; }
.views-move { width: 32px; height: 32px; color: var(--muted); text-decoration: none; font-size: 15px; }
.views-move:hover { color: var(--accent-ink); }
.views-move[data-disabled] { opacity: .3; pointer-events: none; }
.views-move[hidden] { display: none; }

/* Le pastiglie dei filtri attivi, e «Azzera». */
.views-chips { align-items: center; }
a.views-reset { font-size: 13px; padding: 4px 6px; }

@media (max-width: 760px) {
  .views-bar { gap: 6px; }
  .views-pop > summary { min-height: 44px; }
  .views-trigger-label { max-width: 150px; }
  .views-choice { min-height: 44px; }
  .views-move { width: 44px; height: 44px; }
  a.views-item { min-height: 44px; }
  .views-section input[type=text], .views-fields input:not([type=checkbox]):not([type=radio]), .views-fields select { font-size: 16px; min-height: 44px; }
}

@media (max-width: 640px) {
  /* A tutto schermo: la testata in alto con la chiusura, i pulsanti in basso. */
  .views-pop { position: static; }
  .views-sheet, .views-sheet-wide {
    position: fixed; inset: 0; width: auto; max-height: none; height: 100%; height: 100dvh;
    border: 0; border-radius: 0; box-shadow: none; z-index: 120; padding: 0 16px 16px;
  }
  html.views-sheet-open, html.views-sheet-open body { overflow: hidden; }
  .views-fields { grid-template-columns: 1fr; }
  .views-sheet-foot > button, .views-sheet-foot > a.button { flex: 1; min-height: 44px; }
}

/* --- Cruscotto ------------------------------------------------------------- */

/* Il cruscotto della home (App/AppDashboard.cs): importi con sparkline,
   distribuzioni per stato, attività recente. Una sola serie per grafico, quindi
   un solo colore: l'accento. Il testo resta nei colori del testo; barre e linee
   portano il colore, mai i numeri. */

.dash-title { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 10px; }
.dash-partial { margin: 0 0 12px; }

.dash-amounts { margin-bottom: 24px; }
.dash-amount-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-items: start; }
.card.dash-amount { margin: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
a.dash-amount-link { display: flex; flex-direction: column; gap: 2px; color: var(--fg); text-decoration: none; border-radius: var(--radius-s); }
a.dash-amount-link:hover { color: var(--fg); }
a.dash-amount-link:hover .dash-amount-label { color: var(--accent-ink); text-decoration: underline; }
.dash-amount-label { font-size: 13px; color: var(--muted); font-weight: 600; overflow-wrap: anywhere; }
.dash-amount-value { font-size: 24px; font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
.dash-amount-sub { margin: 0; font-size: 12.5px; color: var(--muted); }

.dash-spark { display: block; width: 100%; max-width: 160px; height: auto; margin-top: 6px; overflow: visible; }
.dash-spark-base { stroke: var(--border); stroke-width: 1; }
.dash-spark-area { fill: var(--accent); fill-opacity: .1; stroke: none; }
.dash-spark-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dash-spark-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.dash-spark-hit { fill: transparent; }
.dash-spark-hit:hover { fill: var(--accent); fill-opacity: .08; }

.dash-values { margin-top: 4px; font-size: 13px; }
.dash-values > summary { cursor: pointer; color: var(--muted); min-height: 28px; display: inline-flex; align-items: center; }
.dash-values > summary:hover { color: var(--accent-ink); }
.dash-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.dash-table th, .dash-table td { padding: 4px 0; border-bottom: 1px solid var(--border); text-align: left; font-weight: 400; }
.dash-table thead th { color: var(--muted); font-size: 12px; }
.dash-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.dash-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); margin-bottom: 24px; align-items: start; }
.dash-grid > .panelcard { margin: 0; min-width: 0; }
.dash-panel > .top h2 { font-size: 15px; }

.dash-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-bar {
  display: grid; grid-template-columns: minmax(84px, 9rem) 1fr auto; align-items: center; gap: 12px;
  min-height: 36px; padding: 4px 8px; margin: 0 -8px; border-radius: var(--radius-s);
  color: var(--fg); text-decoration: none;
}
a.dash-bar:hover { background: var(--hover); color: var(--fg); }
a.dash-bar:hover .dash-bar-label { color: var(--accent-ink); text-decoration: underline; }
.dash-bar-label { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar-track { display: block; height: 10px; }
/* La barra parte dalla linea di base, quadrata, e finisce arrotondata. */
.dash-bar-fill { display: block; height: 100%; min-width: 2px; background: var(--accent); border-radius: 0 4px 4px 0; }
.dash-bar-fill.is-zero { min-width: 0; }
.dash-bar-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dash-bar-percent { color: var(--muted); font-weight: 400; font-size: 12.5px; margin-left: 6px; display: inline-block; min-width: 3.2em; }

.dash-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dash-activity-list > li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); min-height: 44px; }
.dash-activity-list > li:last-child { border-bottom: 0; }
.dash-activity-main { display: flex; flex-direction: column; min-width: 0; }
a.dash-activity-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-activity-meta { font-size: 12.5px; color: var(--muted); }

/* I riquadri delle tabelle: il numero leggibile, la riga della settimana sotto. */
a.app-tile { grid-template-rows: auto auto auto; }
a.app-tile .table-mark { grid-row: 1 / span 3; align-self: start; }
a.app-tile .app-tile-count { color: var(--fg); font-weight: 600; font-size: 14px; }
.app-tile-new { grid-column: 2; color: var(--muted); font-size: 12.5px; }

@media (forced-colors: active) {
  .dash-bar-fill, .dash-spark-dot { background: CanvasText; fill: CanvasText; }
  .dash-spark-line { stroke: CanvasText; }
}

@media (max-width: 640px) {
  /* Una colonna; i riquadri compatti a due per riga. */
  .app-tiles, .dash-amount-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  a.app-tile { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 2px; padding: 10px 12px; min-height: 0; }
  a.app-tile .table-mark { grid-row: auto; width: 28px; height: 28px; font-size: 13px; margin-bottom: 4px; }
  .app-tile-name { font-size: 14px; }
  .app-tile-new { grid-column: 1; }
  .card.dash-amount { padding: 10px 12px; }
  .dash-amount-value { font-size: 18px; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-bar { grid-template-columns: minmax(64px, 7rem) 1fr auto; gap: 8px; min-height: 44px; }
  .dash-values > summary { min-height: 44px; }
}

/* --- Esportazione ------------------------------------------------------------ */

/* «Esporta in Excel»: ghost con l'icona del foglio. Nella sezione collegata,
   accanto a «Nuovo», è più compatto e sotto i 480 px resta solo l'icona (il
   nome resta nel title e nel testo per i lettori di schermo). */
a.app-export { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
a.app-export .icon { width: 16px; height: 16px; flex: none; }
.related-head a.app-export { padding: 6px 10px; font-size: 13px; }

@media (max-width: 760px) {
  a.app-export { min-height: 44px; }
}

@media (max-width: 480px) {
  .related-head a.app-export { min-width: 44px; justify-content: center; }
  .related-head a.app-export .app-export-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* «Mostra disattivati» resta raggiungibile anche sul telefono: sotto i 640 px
   sta nel menu «Altro» della barra (blocco «Correzioni liste e home»), oltre
   che nel pannello Filtri («Anche i disattivati») e nello stato vuoto. */

/* --- Correzioni liste e home --- */

/* La barra dell'elenco (ListPage.Toolbar): la ricerca su una riga; sotto,
   Viste · Filtri · Colonne e le azioni secondarie; le pastiglie in coda. */
.app-toolbar.app-listbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
.app-listbar > .app-search { flex: none; max-width: 560px; }
.app-listbar-row { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.app-listbar-row > .views-bar { margin-bottom: 0; }
.app-listbar-row > .views-chips { order: 1; flex-basis: 100%; margin-bottom: 0; }
.app-listbar-row > .app-toolbar-actions { margin-left: auto; }
.app-search-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.app-search-go .icon { flex: none; }

/* «Altro»: c'è solo sul telefono (sotto). */
.views-pop.app-more { display: none; }
.app-more-dots { font-size: 20px; line-height: 1; font-weight: 700; }
.app-more-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  display: flex; flex-direction: column; gap: 4px; min-width: 220px; padding: 8px;
  background: var(--surface); color: var(--fg); border: 1px solid var(--border);
  border-radius: var(--radius-l); box-shadow: var(--shadow);
}

/* --- Correzioni scheda e ARIA --- */

/* Il binario della scheda, come in WorkItUp: icona, etichetta e conteggio dei
   figli attivi. Da 900 px in su parte aperto e la maniglia lo chiude (la
   scelta sta su <html> come .rail-closed, che app.js legge da localStorage).
   Sotto i 900 px resta a icone col conteggio come pastiglia; la maniglia apre
   i nomi sopra il modulo. L'etichetta non esce mai dall'albero di
   accessibilità: a icone è solo nascosta alla vista, ed è il nome della voce. */
.rail-item { position: relative; }
.rail-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; }
.record-rail .rail-label {
  display: block; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.rail-count {
  position: absolute; top: 1px; right: -1px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--accent-solid); color: var(--on-accent);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.rail-count.is-zero { background: var(--panel); color: var(--fg); box-shadow: inset 0 0 0 1px var(--border); }
.record-rail .rail-handle .icon { transform: rotate(180deg); }
.record-rail.is-expanded .rail-handle .icon { transform: none; }

/* Le voci con il nome accanto all'icona: binario allargato dalla maniglia. */
.record-rail.is-expanded .rail-item { width: 100%; justify-content: flex-start; padding: 0 10px; }
.record-rail.is-expanded .rail-label {
  position: static; width: auto; height: auto; margin: 0; clip: auto; clip-path: none;
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.rail-item.is-active .rail-label { color: var(--accent-ink); }
.record-rail.is-expanded .rail-count {
  position: static; flex: none; min-width: 24px; height: 20px; padding: 0 7px; border-radius: 10px;
  background: var(--panel); color: var(--fg); box-shadow: inset 0 0 0 1px var(--border); font-size: 12px; line-height: 20px;
}
.record-rail.is-expanded .rail-item.is-active .rail-count { background: var(--surface); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }

@media (min-width: 900px) {
  /* Aperto di default; .rail-closed lo riporta a icone. */
  html:not(.rail-closed) .record-rail { width: 212px; }
  html:not(.rail-closed) .record-rail .rail-item { width: 100%; justify-content: flex-start; padding: 0 10px; }
  html:not(.rail-closed) .record-rail .rail-label {
    position: static; width: auto; height: auto; margin: 0; clip: auto; clip-path: none;
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left;
  }
  html:not(.rail-closed) .record-rail .rail-count {
    position: static; flex: none; min-width: 24px; height: 20px; padding: 0 7px; border-radius: 10px;
    background: var(--panel); color: var(--fg); box-shadow: inset 0 0 0 1px var(--border); font-size: 12px; line-height: 20px;
  }
  html:not(.rail-closed) .record-rail .rail-item.is-active .rail-count { background: var(--surface); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
  html:not(.rail-closed) .record-rail .rail-handle .icon { transform: none; }
  /* Con i nomi la finestra e la pagina si allargano: il modulo resta comodo. */
  html:not(.rail-closed) .modal-box.has-rail { max-width: 1000px; }
  html:not(.rail-closed) .record-page.has-rail { max-width: 1140px; }
}

@media (max-width: 899px) {
  /* Allargato, l'elenco delle voci si apre sopra il modulo senza spostarlo;
     la maniglia resta dov'è. */
  .record-rail.is-expanded { width: 52px; background: none; box-shadow: none; z-index: 4; }
  .modal-box.has-rail .record-rail.is-expanded { overflow: visible; }
  .record-rail.is-expanded .rail-list {
    position: absolute; z-index: 4; top: 48px; left: -4px; width: min(248px, 78vw); padding: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  }
}

@media (max-width: 760px) {
  /* Bersagli da 44 px: voci e maniglia del binario, «Apri l'elenco» della
     sezione, la freccia del lookup, le caselle del pannello Viste. */
  .record-rail, .record-rail.is-expanded { width: 52px; padding-right: 6px; }
  .rail-handle, .rail-item { width: 44px; height: 44px; }
  .record-rail.is-expanded .rail-item { width: 100%; }
  .related-head .related-all { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .lookup-combo .lookup-toggle { top: 0; bottom: 0; }
  .views-section label.check { min-height: 44px; }
  /* Nella sezione della scheda l'intestazione diventa la barra di ordinamento:
     anche i suoi link vanno toccati col dito. */
  .record-related .sort-link { min-height: 44px; }
}

/* Il pannello Viste: un gruppo è una voce con il suo titolo e la sua lista. */
.views-list .views-group { display: block; }
.views-sublist { list-style: none; margin: 0; padding: 0; }
.app-more-menu > a.button { justify-content: flex-start; width: 100%; min-height: 44px; }

/* Lo stato vuoto con più di un'azione. */
.app-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* «Ordina per»: solo nella vista a schede, dove l'intestazione non si vede. */
.app-sort { display: none; }

@media (max-width: 760px) {
  /* Sotto il titolo del pannello, a tutta larghezza: le voci («Data, dal più
     recente») si leggono intere. */
  .panelcard > .top:has(.app-sort) { flex-wrap: wrap; row-gap: 8px; }
  .app-sort { display: flex; flex: 1 1 100%; align-items: center; gap: 8px; min-width: 0; }
  .app-sort label { font-size: 13px; color: var(--muted); white-space: nowrap; }
  .app-sort select { flex: 1; width: auto; min-width: 0; min-height: 44px; font-size: 16px; padding: 4px 28px 4px 8px; }

  /* «Disattiva» non su ogni scheda: un tocco sbagliato costa caro. Resta nella
     scheda del record; «Riattiva» sui disattivati resta in vista. */
  .row-state.is-deactivate { display: none; }
  tr:not(.is-inactive) > td.row-actions-state { display: none; }
}

@media (max-width: 640px) {
  .app-listbar > .app-search { max-width: none; }
  .app-search-go { min-width: 44px; padding-left: 10px; padding-right: 10px; }
  .app-search-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* Il primo record entro ~200 px dalla ricerca: spazi stretti fra barra,
     titolo del pannello con «Ordina per» e prima scheda. */
  .app-toolbar.app-listbar { gap: 6px; margin-bottom: 8px; }
  .panelcard > .top:has(.app-sort) { padding-top: 6px; padding-bottom: 6px; row-gap: 4px; min-height: 0; }
  .panelcard:has(.app-sort) > .inner.flush > .table-wrap { padding-top: 8px; }

  /* Una riga sola: Viste prende lo spazio che resta, Colonne e Altro sono icone. */
  .app-listbar-row { gap: 6px; }
  .app-listbar-row > .views-bar { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; gap: 6px; }
  .app-listbar-row > .app-toolbar-actions { display: none; }
  .views-pop.app-more { display: block; flex: none; position: static; }
  .app-more > summary { min-width: 44px; min-height: 44px; justify-content: center; padding: 0 10px; }
  .views-bar > .views-pop { flex: none; }
  .views-bar > .views-menu { flex: 0 1 auto; min-width: 0; }
  .views-bar > .views-pop > summary { min-height: 44px; padding-left: 10px; padding-right: 10px; gap: 6px; }
  .views-bar > .views-menu > summary { width: 100%; overflow: hidden; }
  .views-bar .views-trigger-label { min-width: 0; max-width: none; white-space: nowrap; }
  .views-bar .views-caret, .views-bar .views-badge { display: none; }
  .views-columns .views-trigger-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* Gli importi della home: il mese in corso grande, sotto il mese prima e da
   inizio anno, poi una riga che dice cosa è sommato. */
.dash-amount-when { margin-top: 2px; }
.dash-compare { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 6px 0 0; font-size: 12.5px; }
.dash-compare > div { display: flex; gap: 4px; }
.dash-compare dt { color: var(--muted); }
.dash-compare dt::after { content: ":"; }
.dash-compare dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-amount-scope { margin: 4px 0 0; font-size: 12px; color: var(--muted); }