/* Stile MeccanicaMente (design system di Gianluca: palette navy/teal, un solo
   accento arancio, Rubik / IBM Plex Sans / JetBrains Mono). I valori dei token
   vengono da quel sistema, copiati e non approssimati: cambiandone uno qui la
   webapp smette di somigliare al resto dei progetti senza che nulla lo segnali.
   Le regole che contano, prese dal suo README:
   - teal e orange non si usano MAI per testo piccolo su chiaro (3,1:1 e 2,7:1):
     per il testo ci sono teal-text e orange-text;
   - competenze/trattenute si distinguono teal contro arancio, mai verde contro
     rosso, e la legenda lo dice anche a parole;
   - un solo raggio (16px), niente ombre: la profondità la danno surface su bg
     e i bordi.
   La pagina parte dal telefono: gutter di 16px e nessuno scorrimento
   orizzontale della pagina (lo fanno solo le tabelle, dentro .table-responsive). */
:root {
    --bg: #F5F7F9;
    --bg-alt: #EAF1F4;
    --surface: #FCFDFD;
    --border: #DCE3E8;
    --row-alt: #EEF3F6;
    --ink-title: #0F2537;
    --ink-strong: #1E2B36;
    --ink-body: #3E4C59;
    --ink-muted: #5B6B78;
    --navy: #0F2537;
    --navy-card: #17344A;
    --teal: #1B9AAA;
    --teal-text: #137886;
    --teal-light: #5CC6D3;
    --teal-pale: #D9EEF1;
    --on-teal-pale: #0F2537;
    --orange: #D9822B;
    --orange-text: #8A4512;
    --orange-pale: #FBEBDA;
    --on-orange-pale: #3B2410;
    --success: #2E7D4F;
    --radius-card: 16px;
    --border-accent: 6px;
    --font-display: "Rubik", Arial, sans-serif;
    --font-sans: "IBM Plex Sans", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "Courier New", monospace;

    /* Bootstrap legge questi: senza, moduli, finestre e avvisi resterebbero blu
       Bootstrap e grigio Bootstrap accanto al navy. */
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--ink-body);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius-card);
    --bs-primary: var(--navy);
    --bs-primary-rgb: 15, 37, 55;
    --bs-link-color: var(--teal-text);
    --bs-link-hover-color: var(--ink-title);
    --bs-secondary-color: var(--ink-muted);
    --bs-emphasis-color: var(--ink-title);
    --bs-focus-ring-color: rgba(27, 154, 170, 0.35);
}
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink-body);
    font-size: 16px;
    line-height: 1.55;
}
h1, h2, h3, h4, h5, h6, .modal-title { font-family: var(--font-display); color: var(--ink-title); }
.text-muted { color: var(--ink-muted) !important; }
/* Il codice resta neutro: l'arancio nel sistema vuol dire «attenzione». */
code { color: var(--ink-strong); font-family: var(--font-mono); }

/* ====================== INTESTAZIONE ====================== */
/* Lockup del sistema: marchio «M» + nome del progetto in Rubik 600. Il nome è
   FinanceOS, mai MeccanicaMente: il marchio è lo stesso per ogni progetto. */
.intestazione {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 16px;
    display: flex; flex-wrap: wrap; gap: 12px;
    align-items: center; justify-content: space-between;
}
.lockup { display: flex; align-items: center; gap: 12px; margin: 0; }
.lockup .marchio { width: 32px; height: 32px; border-radius: 13%; display: block; flex: none; }
.lockup .nome-progetto { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--ink-title); line-height: 1; }
.lockup .versione-app { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-muted); }
.azioni-intestazione { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.contenuto { padding: 16px; }
@media (min-width: 768px) {
    .intestazione { padding: 20px 32px; }
    .lockup .marchio { width: 40px; height: 40px; }
    .lockup .nome-progetto { font-size: 1.7rem; }
    .contenuto { padding: 32px; }
    .barra-sezioni { padding: 0 32px !important; }
}

/* ====================== SEZIONI E TITOLI ====================== */
.barra-sezioni { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 16px; overflow-x: auto; }
.section-nav { flex-wrap: nowrap; }
.section-nav .nav-link {
    color: var(--ink-muted); border: none; background: none;
    border-bottom: 3px solid transparent; border-radius: 0;
    padding: 12px 16px; font-weight: 600; white-space: nowrap;
}
.section-nav .nav-link.active { color: var(--ink-title); border-bottom-color: var(--teal); }
.section-nav .nav-link:disabled { color: #9AA8B3; }

/* Blocco titolo: eyebrow maiuscolo in teal-text sopra il titolo. */
.blocco-titolo { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.eyebrow { margin: 0; font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--teal-text); }
.titolo { margin: 0; font-size: 1.75rem; line-height: 1.25; font-weight: 600; }
@media (min-width: 768px) { .titolo { font-size: 2rem; } }

/* ====================== CARD ====================== */
/* Card del sistema: surface, bordo hairline, bordo top d'accento da 6px. */
.scheda {
    background: var(--surface); border: 1px solid var(--border);
    border-top: var(--border-accent) solid var(--navy);
    border-radius: var(--radius-card); padding: 20px; margin-bottom: 16px;
}
.scheda--teal { border-top-color: var(--teal); }
.scheda--piatta { border-top-width: 1px; border-top-color: var(--border); }
@media (min-width: 768px) { .scheda { padding: 24px; } }

/* Banda messaggio chiave: teal-pale per l'informazione. */
.banda-info {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--teal-pale); color: var(--on-teal-pale);
    padding: 16px 20px; border-radius: var(--radius-card);
}
.banda-info .bi { flex: none; font-size: 1.25rem; line-height: 1.4; }

/* ====================== PULSANTI ====================== */
.pulsante {
    padding: 8px 16px; background: var(--surface); border: 1px solid var(--navy);
    color: var(--ink-title); border-radius: var(--radius-card); font-weight: 600;
}
.pulsante:hover, .pulsante:focus-visible { background: var(--navy); color: #F3F6F8; }
.pulsante.disabilitato, .upload-box.disabilitato { opacity: 0.45; pointer-events: none; }
.btn-primary {
    --bs-btn-bg: var(--navy); --bs-btn-border-color: var(--navy);
    --bs-btn-hover-bg: var(--navy-card); --bs-btn-hover-border-color: var(--navy-card);
    --bs-btn-active-bg: var(--navy-card); --bs-btn-active-border-color: var(--navy-card);
    --bs-btn-disabled-bg: var(--navy); --bs-btn-disabled-border-color: var(--navy);
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--ink-title); --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--navy); --bs-btn-hover-border-color: var(--navy); --bs-btn-hover-color: #F3F6F8;
}
/* Il pulsante Elimina resta riconoscibile per l'icona e la conferma, non per il
   rosso: arancio = attenzione, e solo come bordo (mai testo piccolo). */
.btn-outline-danger {
    --bs-btn-color: var(--orange-text); --bs-btn-border-color: var(--orange);
    --bs-btn-hover-bg: var(--orange-pale); --bs-btn-hover-border-color: var(--orange); --bs-btn-hover-color: var(--on-orange-pale);
}
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--teal); box-shadow: 0 0 0 0.2rem rgba(27, 154, 170, 0.25); }
.form-check-input:checked { background-color: var(--navy); border-color: var(--navy); }

/* ====================== CARICAMENTO ====================== */
.upload-box {
    border: 2px dashed var(--teal); border-radius: var(--radius-card); padding: 44px 16px 24px;
    text-align: center; background: var(--surface); position: relative; cursor: pointer; color: var(--ink-body);
}
.upload-box:hover, .upload-box.dragover, .upload-box:focus-visible { background: var(--teal-pale); outline: none; }
.icona-upload { font-size: 2rem; color: var(--teal-text); }
.file-label {
    position: absolute; top: 12px; left: 12px; background: var(--navy); color: #F3F6F8;
    padding: 4px 12px; border-radius: var(--radius-card); font-weight: 600; font-size: 0.75rem;
    letter-spacing: 1.5px; text-transform: uppercase;
}
.riquadro-accesso { max-width: 420px; margin: 40px auto; }
.marchio-blocco { border-radius: 13%; }

/* ====================== KPI ====================== */
/* Un importo non va a capo: «27.300,00» su due righe si legge come due numeri. */
.kpi-value { font-family: var(--font-display); font-size: clamp(1.05rem, 5.2vw, 1.35rem); font-weight: 700; color: var(--ink-title); white-space: nowrap; }
@media (min-width: 768px) { .kpi-value { font-size: 1.7rem; } }
.kpi-label { font-size: 0.85rem; color: var(--ink-muted); }

/* ====================== TABELLE ====================== */
/* Intestazione navy e righe alternate; i numeri in mono, allineati a destra,
   così le cifre stanno in colonna e un importo sbagliato salta all'occhio. */
.table { --bs-table-bg: var(--surface); --bs-table-color: var(--ink-body); --bs-table-hover-bg: var(--teal-pale); --bs-table-hover-color: var(--ink-title); margin-bottom: 0; }
.table-payslips { border-collapse: separate; border-spacing: 0; }
.table-payslips thead th {
    background: var(--navy); color: #F3F6F8; font-family: var(--font-display);
    font-size: 0.85rem; font-weight: 600; white-space: nowrap; border: 0; padding: 12px;
}
.table-payslips thead th:first-child { border-top-left-radius: 10px; }
.table-payslips thead th:last-child { border-top-right-radius: 10px; }
.table-payslips td { font-size: 0.9rem; vertical-align: middle; white-space: nowrap; padding: 10px 12px; border-color: var(--border); }
.table-payslips tbody tr:nth-child(even) > td { --bs-table-bg: var(--row-alt); }
.table-payslips td.text-end { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-strong); }
.table-payslips thead .th-totale { background: var(--navy-card); }
.td-totale { box-shadow: inset 3px 0 0 var(--teal); }
.riga-totali > td { --bs-table-bg: var(--bg-alt) !important; color: var(--ink-title); }
.table-voci th { font-size: 0.8rem; color: var(--ink-muted); font-weight: 600; }
.table-voci td { font-size: 0.85rem; }
.table-voci td.text-end, .table-voci code { font-family: var(--font-mono); }
.tabella-voci { max-height: 320px; overflow-y: auto; }
.riquadro-extra { background: var(--bg); border-radius: var(--radius-card) !important; }
.titolo-extra { font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--teal-text); }
.badge-format { font-size: 0.7rem; background: var(--bg-alt) !important; color: var(--ink-strong) !important; border-color: var(--border) !important; }
.badge-voci { background: var(--navy); color: #F3F6F8; font-family: var(--font-mono); }

/* Importi delle voci: competenze teal, trattenute arancio (mai verde/rosso). */
.segno { font-family: var(--font-mono); font-weight: 400; border: 1px solid transparent; }
.segno-competenza { background: var(--teal-pale); color: var(--on-teal-pale); border-color: var(--teal); }
.segno-trattenuta { background: var(--orange-pale); color: var(--on-orange-pale); border-color: var(--orange); }
.segno-neutro { background: var(--bg-alt); color: var(--ink-strong); border-color: var(--border); }

.nav-tabs { --bs-nav-tabs-border-color: var(--border); }
.nav-tabs .nav-link { color: var(--ink-muted); border-radius: var(--radius-card) var(--radius-card) 0 0; font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--ink-title); border-bottom: 3px solid var(--teal); background: var(--surface); }
.riquadro-grafico { height: 360px; }

/* ====================== AVVISI E FINESTRE ====================== */
.alert { border-radius: var(--radius-card); border-width: 1px; }
.alert-info { background: var(--teal-pale); color: var(--on-teal-pale); border-color: var(--teal); }
.alert-success { background: var(--teal-pale); color: var(--on-teal-pale); border-color: var(--success); }
.alert-warning { background: var(--orange-pale); color: var(--on-orange-pale); border-color: var(--orange); }
.alert-danger { background: var(--orange-pale); color: var(--on-orange-pale); border-color: var(--orange-text); border-width: 2px; }
.modal-content { border-radius: var(--radius-card); border: 1px solid var(--border); border-top: var(--border-accent) solid var(--navy); background: var(--surface); }
.modal-header, .modal-footer { border-color: var(--border); }
.changelog-content h5 { font-size: 1rem; font-weight: 600; }
.changelog-content li { margin-bottom: 6px; font-size: 0.9rem; }
.changelog-content .badge { background: var(--teal-pale) !important; color: var(--on-teal-pale) !important; font-family: var(--font-sans); }

/* ====================== SEZIONI CON TABELLE DA COMPILARE ====================== */
/* Il negativo è orange-text e porta il suo «−»: il colore aggiunge, non è
   l'unico segnale (mai verde/rosso, regola del design system). */
.importo-negativo, .table-payslips td.importo-negativo { color: var(--orange-text); }
.importo-positivo { color: inherit; }
.kpi-value.importo-negativo { color: var(--orange-text); }
/* I campi dentro le tabelle non scendono sotto una larghezza leggibile: sul
   telefono la tabella scorre dentro .table-responsive, la pagina no. */
.tabella-modificabile td .form-control, .tabella-modificabile td .form-select { min-width: 7.5rem; }
.tabella-modificabile td .campo-importo { font-family: var(--font-mono); min-width: 6.5rem; }
.riga-cliccabile { cursor: pointer; }
.riga-attiva > td { --bs-table-bg: var(--teal-pale) !important; }

/* Firma in ink-muted, in chiusura. */
.piede { text-align: center; padding: 24px 16px; color: var(--ink-muted); font-size: 0.85rem; }

/* Un elemento in position:absolute dentro una tabella (lo span
   .visually-hidden dell'intestazione) scappa dal ritaglio di
   .table-responsive se nessun antenato è posizionato, e allarga tutta la
   pagina sul telefono. Un overflow-x:hidden sul body lo nasconderebbe invece
   di correggerlo, e la prova «telefono» non lo vedrebbe più. */
.table-responsive { position: relative; }

/* ====================== NAVIGAZIONE DAL TELEFONO ====================== */
/* Dodici sezioni non stanno in una fila di linguette su 375 px: si leggerebbero
   le prime tre e le altre resterebbero da scoprire scorrendo di lato. Sotto i
   992 px le linguette lasciano il posto a una barra in basso con le quattro
   sezioni di tutti i giorni e un menu «Tutte», diviso per gruppi. */
.barra-basso { display: none; }
@media (max-width: 991.98px) {
    .barra-sezioni { display: none; }
    #vistaApp { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .barra-basso {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020;
        background: var(--surface); border-top: 1px solid var(--border);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .piede { padding-bottom: 88px; }
}
.voce-basso {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: 0; border-radius: var(--radius-card); padding: 6px 2px;
    color: var(--ink-muted); font-size: 0.72rem; font-weight: 600; line-height: 1.2;
}
.voce-basso .bi { font-size: 1.3rem; line-height: 1; }
.voce-basso span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.voce-basso.active { color: var(--ink-title); background: var(--teal-pale); }
.menu-sezioni { height: auto !important; max-height: 85vh; border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--surface); }
.menu-sezioni .offcanvas-title { font-family: var(--font-display); color: var(--ink-title); }
.griglia-sezioni { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.tessera-sezione {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-card);
    color: var(--ink-title); font-size: 0.8rem; font-weight: 600; text-align: center; padding: 10px 6px; line-height: 1.2;
}
.tessera-sezione .bi { font-size: 1.4rem; color: var(--teal-text); }
.tessera-sezione.active { border-color: var(--teal); background: var(--teal-pale); }

/* «Come funziona» chiuso di partenza: sul telefono la spiegazione lunga
   spingeva i numeri sotto la piega a ogni apertura della sezione. */
.info-sezione { display: block; }
.info-sezione summary { cursor: pointer; font-weight: 600; list-style-position: inside; }
.info-sezione[open] summary { margin-bottom: 8px; }

/* ====================== SEZIONI A SCHEDE ====================== */
.barra-strumenti { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.lista-voci { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .lista-voci { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .lista-voci { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lista-voci > .voce-vuota { grid-column: 1 / -1; }
.voce { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.voce-testa {
    width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    background: none; border: 0; text-align: left; padding: 14px 16px 10px; color: inherit;
}
.voce-testa:hover, .voce-testa:focus-visible { background: var(--bg-alt); outline: none; }
.voce-titoli { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.voce-titolo { font-family: var(--font-display); font-weight: 600; color: var(--ink-title); overflow-wrap: anywhere; }
.voce-sottotitolo { font-size: 0.8rem; color: var(--ink-muted); overflow-wrap: anywhere; }
.voce-importo { font-family: var(--font-mono); font-weight: 600; color: var(--ink-title); white-space: nowrap; }
.voce-importo.importo-negativo { color: var(--orange-text); }
.voce-barra { height: 6px; margin: 0 16px 8px; background: var(--bg-alt); border-radius: 3px; overflow: hidden; }
.voce-barra span { display: block; height: 100%; background: var(--teal); }
.voce-dati { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 0 16px 14px; }
#autoRiepilogo .voce-dati { padding: 0; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.voce-dato { display: flex; flex-direction: column; min-width: 0; }
.voce-etichetta { font-size: 0.72rem; color: var(--ink-muted); }
.voce-valore { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-strong); overflow-wrap: anywhere; }
.voce-valore.importo-negativo { color: var(--orange-text); }
.voce-azioni { display: flex; gap: 8px; padding: 0 16px 14px; }
.anteprima-voce { background: var(--teal-pale); color: var(--on-teal-pale); border-radius: var(--radius-card); padding: 10px 14px; font-family: var(--font-mono); }
.testo-attenzione { color: var(--orange-text); }
.cifre { font-family: var(--font-mono); }
.bordo-sopra { border-top: 1px solid var(--border); }
/* Sul telefono i campi della finestra sono alti abbastanza per il pollice, e
   a 16 px: sotto, Chrome per Android ingrandisce la pagina a ogni tocco. */
#voceModal .form-control, #voceModal .form-select { min-height: 44px; font-size: 16px; }

/* ====================== SIMULATORE ====================== */
.sim-voci { display: flex; flex-direction: column; gap: 10px; }
.sim-voce {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; align-items: end;
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.sim-voce .sim-nome { grid-column: 1 / -1; font-weight: 600; }
.sim-cella { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.sim-cella > span { font-size: 0.72rem; color: var(--ink-muted); }
.sim-totale { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; font-family: var(--font-mono); font-weight: 600; color: var(--ink-title); }
@media (min-width: 576px) {
    .sim-voce { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; }
    .sim-voce .sim-nome { grid-column: auto; }
    .sim-totale { grid-column: auto; min-width: 7.5rem; }
}
.sim-marginali { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.sim-marginale { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.sim-marginale strong { font-family: var(--font-mono); color: var(--ink-title); }
.sim-marginale span { font-size: 0.75rem; color: var(--ink-muted); line-height: 1.2; }
.sim-storico { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; max-height: 240px; overflow-y: auto; }
.sim-storico-voce { display: flex; align-items: center; gap: 2px; }

/* ====================== CASA NOTARNITONO ====================== */
.griglia-filtri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .griglia-filtri { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.filtri > summary { cursor: pointer; font-weight: 600; color: var(--ink-title); }
.lista-movimenti { display: flex; flex-direction: column; gap: 8px; }
.movimento { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 12px 14px; }
.movimento--interno { background: var(--bg); }
.movimento--interno .movimento-descr, .movimento--interno .movimento-importo { color: var(--ink-muted); }
.movimento-sel { margin-top: 4px; flex: none; }
.movimento-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.movimento-riga { display: flex; justify-content: space-between; gap: 12px; }
.movimento-descr { font-weight: 600; color: var(--ink-title); overflow-wrap: anywhere; }
.movimento-importo { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; color: var(--ink-title); }
.movimento-meta { font-size: 0.78rem; color: var(--ink-muted); overflow-wrap: anywhere; }
@media (min-width: 768px) { .movimento-cat { max-width: 18rem; } }
/* La barra delle selezionate resta in vista mentre si scorre la lista: con
   cento movimenti, tornare in cima per applicare la categoria fa perdere il segno. */
.barra-selezione {
    position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    background: var(--teal-pale); color: var(--on-teal-pale); border: 1px solid var(--teal);
    border-radius: var(--radius-card); padding: 10px 12px; margin-bottom: 10px;
}
.barra-selezione .form-select { width: auto; flex: 1 1 10rem; }
@media (max-width: 991.98px) { .barra-selezione { top: 0; } }
.riga-aggiungi { display: flex; flex-wrap: wrap; gap: 8px; }
.riga-aggiungi .form-control { flex: 1 1 10rem; }
.riga-aggiungi .form-select { flex: 0 1 auto; width: auto; }
@media (max-width: 767.98px) { .riquadro-grafico { height: 280px; } }
/* Sul telefono l'intestazione sta su una riga: i pulsanti restano icone con
   l'etichetta per lo screen reader, l'email si legge nelle impostazioni. */
@media (max-width: 575.98px) {
    .azioni-intestazione .testo-pulsante, #utenteEmail { display: none; }
    .intestazione { flex-wrap: nowrap; }
    .azioni-intestazione .pulsante { padding: 8px 12px; }
}

/* ====================== LETTURA DAL TELEFONO (V0.8.0) ====================== */
.campo-anno { width: 6.5rem; }
.azioni-sezione { display: flex; flex-wrap: wrap; gap: 8px; }
/* Le matrici (RAL, riepilogo di Casa) restano tabelle: scorrendo di lato la
   prima colonna resta ferma, così si sa sempre di che mese o categoria si parla. */
.tabella-matrice th:first-child, .tabella-matrice td:first-child { position: sticky; left: 0; z-index: 1; }
.tabella-matrice td:first-child { background: var(--surface); box-shadow: 1px 0 0 var(--border); }
.tabella-matrice tbody tr:nth-child(even) > td:first-child { background: var(--row-alt); }
.tabella-matrice tr.riga-totali > td:first-child { background: var(--bg-alt); }

@media (max-width: 767.98px) {
    /* Intestazione su una riga sola: marchio, nome, versione e tre pulsanti
       rotondi. Su due righe rubava 120 px a ogni schermata. */
    .intestazione { padding: 10px 16px; flex-wrap: nowrap; gap: 8px; }
    .lockup { gap: 8px; min-width: 0; }
    .lockup .marchio { width: 28px; height: 28px; }
    .lockup .nome-progetto { font-size: 1.2rem; }
    .lockup .versione-app { font-size: 0.68rem; }
    .azioni-intestazione { flex-wrap: nowrap; gap: 6px; }
    .azioni-intestazione .pulsante { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
    .azioni-intestazione .testo-pulsante, #utenteEmail { display: none; }

    .contenuto { padding: 12px 12px 16px; }
    .blocco-titolo { gap: 4px; margin-bottom: 14px; }
    .titolo { font-size: 1.45rem; }
    .eyebrow { font-size: 11px; letter-spacing: 1.5px; }
    .info-sezione { padding: 10px 14px; font-size: 0.9rem; }

    /* KPI: quattro numeri in una griglia 2×2 compatta. Il numero resta grande,
       l'etichetta piccola sotto: la si legge una volta, il numero ogni giorno. */
    .row.g-3 { --bs-gutter-x: 8px; --bs-gutter-y: 8px; }
    .scheda { padding: 14px; border-top-width: 4px; margin-bottom: 12px; }
    .row .scheda.text-center { padding: 12px 8px; height: 100%; display: flex; flex-direction: column; justify-content: center; }
    .kpi-value { font-size: clamp(1rem, 4.8vw, 1.25rem); }
    .kpi-label { font-size: 0.74rem; line-height: 1.25; }

    .azioni-sezione { display: grid; grid-template-columns: 1fr 1fr; }
    .azioni-sezione .pulsante { font-size: 0.82rem; padding: 10px 8px; line-height: 1.2; }
    .upload-box { padding: 40px 12px 16px; }
    .upload-box .icona-upload { font-size: 1.6rem; }

    /* Linguette: in fila e scorrevoli, mai a capo (andando a capo «Andamento»
       finiva sotto le altre e sembrava un titolo). */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-link { white-space: nowrap; padding: 8px 12px; font-size: 0.9rem; }

    /* Strumenti (filtro anno, aggiungi mese, rilevamento): griglia a due
       colonne con i campi alti abbastanza per il pollice. */
    .strumenti-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
    .strumenti-griglia > * { min-width: 0; }
    .strumenti-griglia .form-select, .strumenti-griglia .form-control { min-height: 40px; font-size: 16px; }
    .strumenti-griglia .pulsante, .strumenti-griglia .btn { width: 100%; min-height: 40px; }
    .strumenti-griglia .form-check { grid-column: 1 / -1; }
    .strumenti-griglia > .ms-md-auto { grid-column: 1 / -1; }
    .strumenti-griglia .campo-anno { width: 5.5rem; flex: none; }

    /* ---- Le tabelle diventano schede ----
       Ogni riga è una scheda, ogni cella «etichetta sopra, valore sotto»
       (l'etichetta la mette js/schede.js dall'intestazione della colonna).
       Niente colonne tolte: tutto quello che la tabella mostra sul PC c'è
       anche qui, solo disposto in verticale. */
    .table-responsive:has(> .table-payslips:not(.tabella-matrice)) { overflow: visible; }
    .scheda:has(> .table-responsive > .table-payslips:not(.tabella-matrice)) { padding: 0; border: 0; background: transparent; }
    .table-payslips:not(.tabella-matrice), .table-payslips:not(.tabella-matrice) > tbody, .table-payslips:not(.tabella-matrice) > tfoot { display: block; }
    .table-payslips:not(.tabella-matrice) > thead { display: none; }
    .table-payslips:not(.tabella-matrice) > tbody > tr, .table-payslips:not(.tabella-matrice) > tfoot > tr {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px;
        background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
        padding: 14px 16px; margin-bottom: 10px;
    }
    .table-payslips:not(.tabella-matrice) > tbody > tr > td, .table-payslips:not(.tabella-matrice) > tfoot > tr > td {
        display: flex; flex-direction: column; gap: 2px; min-width: 0;
        padding: 0; border: 0; white-space: normal; text-align: left !important;
        --bs-table-bg: transparent !important; background: transparent; box-shadow: none;
        font-size: 0.95rem; overflow-wrap: anywhere;
    }
    .table-payslips:not(.tabella-matrice) td::before {
        content: attr(data-label); font-family: var(--font-sans); font-size: 0.72rem; font-weight: 400;
        color: var(--ink-muted); line-height: 1.2;
    }
    .table-payslips:not(.tabella-matrice) td:empty { display: none; }
    /* La prima cella è il titolo della scheda (il mese, il conto). */
    .table-payslips:not(.tabella-matrice) td:first-child { grid-column: 1 / -1; font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-title); padding-bottom: 6px; border-bottom: 1px solid var(--border); }
    .table-payslips:not(.tabella-matrice) td:first-child::before { display: none; }
    .table-payslips:not(.tabella-matrice) td[data-larga] { grid-column: 1 / -1; }
    .table-payslips:not(.tabella-matrice) td[data-larga]::before { display: none; }
    /* Il totale della riga spicca: è il numero che si cerca. */
    .table-payslips:not(.tabella-matrice) td.td-totale { background: var(--teal-pale); color: var(--on-teal-pale); border-radius: 10px; padding: 6px 10px; }
    .table-payslips:not(.tabella-matrice) td > .badge { align-self: flex-start; }
    /* Le note sono testo libero: a mezza larghezza si leggevano tre parole. */
    .table-payslips:not(.tabella-matrice) td[data-label="Note"] { grid-column: 1 / -1; }
    .table-payslips:not(.tabella-matrice) td[data-azioni] { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
    .table-payslips:not(.tabella-matrice) td[data-azioni]::before { display: none; }
    .table-payslips:not(.tabella-matrice) td[data-azioni] .btn { min-width: 44px; min-height: 40px; }
    .table-payslips:not(.tabella-matrice) tr.riga-totali, .table-payslips:not(.tabella-matrice) tfoot tr { background: var(--bg-alt); }
    /* Nelle tabelle da compilare il campo prende tutta la cella. */
    .table-payslips.tabella-modificabile td .form-control, .table-payslips.tabella-modificabile td .form-select { min-width: 0; width: 100%; min-height: 40px; font-size: 16px; }
    .table-payslips.tabella-modificabile td .form-check-input { width: 1.4em; height: 1.4em; }
    .table-payslips:not(.tabella-matrice) tr.riga-attiva { border-color: var(--teal); box-shadow: inset 4px 0 0 var(--teal); }

    /* Matrici: caratteri un po' più piccoli, più colonne in vista. */
    .tabella-matrice td, .tabella-matrice th { padding: 8px 10px; font-size: 0.82rem; }
    .riquadro-grafico { height: 300px; padding: 10px; }
}

/* ====================== COME UN'APP (V0.10.0) ====================== */
/* Pillole dell'anno: si sceglie l'anno con un tocco, invece di scorrere 86 mesi. */
.filtro-anni { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filtro-anni::-webkit-scrollbar { display: none; }
.pillola {
    flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--ink-title);
    border-radius: 999px; padding: 6px 16px; font-weight: 600; font-size: 0.9rem; font-family: var(--font-mono);
}
.pillola.attiva { background: var(--navy); border-color: var(--navy); color: #F3F6F8; }

@media (max-width: 767.98px) {
    /* Più recente in cima, come in ogni app: l'ultimo mese è quello che si
       cerca, e prima stava in fondo a una lista lunghissima. Solo l'ordine di
       visualizzazione cambia: il documento e le prove restano in ordine di mese. */
    .table-payslips[data-recenti-prima] > tbody { display: flex; flex-direction: column-reverse; gap: 10px; }
    .table-payslips[data-recenti-prima] > tbody > tr { margin-bottom: 0; }
    .table-payslips[data-recenti-prima] > tfoot { margin-top: 10px; }

    /* Scheda chiusa: titolo a sinistra, numeri principali a destra, una riga
       sola. Un tocco la apre con tutti gli altri valori. */
    .table-payslips[data-comprimibile] > * > tr:not(.aperta) {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 6px 14px; padding: 12px 14px; cursor: pointer;
    }
    .table-payslips[data-comprimibile] > * > tr:not(.aperta) > td { display: none; }
    .table-payslips[data-comprimibile] > * > tr:not(.aperta) > td[data-titolo],
    .table-payslips[data-comprimibile] > * > tr:not(.aperta) > td[data-larga] {
        display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px;
        grid-column: 1 / -1; border: 0; padding: 0; font-size: 1rem;
    }
    .table-payslips[data-comprimibile] > * > tr:not(.aperta) > td[data-principale] { display: flex; font-size: 0.95rem; }
    .table-payslips[data-comprimibile] > * > tr:not(.aperta) > td.td-totale { padding: 4px 8px; }
    /* La freccia dice che la scheda si apre. */
    .table-payslips[data-comprimibile] td[data-titolo]::after {
        content: ''; width: 8px; height: 8px; margin-left: 2px; flex: none;
        border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
        transform: rotate(45deg) translateY(-2px); transition: transform .15s;
    }
    .table-payslips[data-comprimibile] tr.aperta td[data-titolo]::after { transform: rotate(-135deg) translateY(-2px); }
    .table-payslips[data-comprimibile] tr.aperta { border-color: var(--teal); }
    .table-payslips[data-comprimibile] td[data-titolo]:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 6px; }

    /* Il caricamento delle buste diventa una riga, non un riquadro da mezzo
       schermo: si usa una volta al mese, i numeri si guardano ogni giorno. */
    .upload-box { padding: 14px 14px 14px 56px; text-align: left; }
    .upload-box .file-label { display: none; }
    .upload-box .icona-upload { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
    .upload-box p { font-size: 0.9rem; margin-bottom: 2px !important; }

    /* Un numero in evidenza fa da titolo della sezione, grande e su tutta la
       larghezza: il netto medio, il saldo del periodo, il saldo del patrimonio.
       Gli altri tre restano sotto, più piccoli. Prima il primo della fila era
       un conteggio («86 buste»), il numero che non serve. */
    #kpiRow > :nth-child(2), #bilSezione .row.g-3.mb-4 > :nth-child(4), #patContenuto > .row.g-3.mb-4 > :nth-child(3) { order: -1; flex: 0 0 100%; max-width: 100%; }
    #kpiRow > :nth-child(2) .kpi-value, #bilSezione .row.g-3.mb-4 > :nth-child(4) .kpi-value, #patContenuto > .row.g-3.mb-4 > :nth-child(3) .kpi-value { font-size: 1.7rem; }
    /* Gli altri tre in fila sotto, piccoli: in due colonne uno restava da solo. */
    #kpiRow > :not(:nth-child(2)), #bilSezione .row.g-3.mb-4 > :not(:nth-child(4)), #patContenuto > .row.g-3.mb-4 > :not(:nth-child(3)) { flex: 0 0 33.333%; max-width: 33.333%; }
    #kpiRow > :not(:nth-child(2)) .kpi-value, #bilSezione .row.g-3.mb-4 > :not(:nth-child(4)) .kpi-value, #patContenuto > .row.g-3.mb-4 > :not(:nth-child(3)) .kpi-value { font-size: clamp(0.78rem, 3.6vw, 0.95rem); }
    #kpiRow > :not(:nth-child(2)) .kpi-label, #bilSezione .row.g-3.mb-4 > :not(:nth-child(4)) .kpi-label, #patContenuto > .row.g-3.mb-4 > :not(:nth-child(3)) .kpi-label { font-size: 0.66rem; }
    #kpiRow .scheda, #bilSezione .row.g-3.mb-4 .scheda, #patContenuto > .row.g-3.mb-4 .scheda { padding: 10px 6px; }
}