/* Senza questo reset, un elemento con "width: 100%" e anche padding/bordo
   (es. la "scheda" .tabella-movimenti tr in vista-schede: width:100% +
   padding 0.5rem/0.75rem + bordo 1px) si rendering PIU' largo del 100% del
   genitore, perche' per default (content-box) padding e bordo si sommano
   alla larghezza del contenuto invece di esserne inclusi — causa reale
   dello sfondamento a destra della scheda su mobile, non un problema di
   margine sul body. */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    font-family: system-ui, sans-serif;
    max-width: 60rem;
    margin: 2rem auto;
    padding: 0 1rem;
    line-height: 1.4;
}

a, a:visited {
    color: #0069c8;
    text-decoration: none;
}

a:hover {
    color: #004c93;
}

a:active {
    color: #003a6e;
}

header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    border-bottom: 1px solid #ccc;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

header h1 {
    font-size: 1.3rem;
    margin: 0;
}

nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

nav a {
    text-decoration: none;
}

nav a.nav-attivo {
    font-weight: bold;
    border-bottom: 2px solid currentColor;
}

.nav-utente {
    color: #666;
}

.nav-logout {
    display: inline;
    margin: 0;
}

.nav-esci {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
}

.nav-esci:hover {
    color: #0069c8;
}

.nav-esci:active {
    color: #004c93;
}

.errore {
    color: #b00020;
    font-weight: bold;
}

.messaggio {
    color: #2e7d32;
    background: #eaf6ec;
    border-radius: 0.25rem;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
}

.conteggio {
    color: #666;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.saldo {
    font-size: 1.1rem;
}

.saldo-credito {
    color: #2e7d32;
    font-weight: bold;
}

.saldo-debito {
    color: #b00020;
    font-weight: bold;
}

.saldo-pareggio {
    color: #666;
    font-weight: bold;
}

.bottone, .bottone:visited {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    background: #0069c8;
    color: #fff;
    text-decoration: none;
    border-radius: 0.25rem;
    border: none;
    font: inherit;
    cursor: pointer;
}

.bottone:hover {
    background: #005aa8;
}

.bottone:active {
    background: #004c93;
    transform: translateY(1px);
}

input[type="search"],
input[type="text"],
input[type="date"],
input[type="password"],
select,
textarea {
    font: inherit;
    padding: 0.3rem;
    width: 100%;
    max-width: 24rem;
    box-sizing: border-box;
}

#ricerca {
    max-width: 100%;
}

.form-movimento label {
    font-weight: bold;
}

.titolo-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tabella-scroll {
    overflow-x: auto;
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9rem;
}

th, td {
    border-bottom: 1px solid #ddd;
    padding: 0.35rem 0.5rem;
    text-align: left;
    white-space: nowrap;
}

#tabella-movimenti thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

table tbody tr:nth-child(even) {
    background: #f4f6f8;
}

/* La colonna Modifica/Elimina e' la prima e resta ancorata a sinistra
   durante lo scroll orizzontale (note lunghe possono allargare parecchio
   la tabella): non serve piu' scorrere fino in fondo alla riga per agire
   su un movimento. Sfondo esplicito (non "inherit"): da fermo la cella e'
   trasparente, ma durante lo scroll deve coprire le celle che le passano
   sotto, altrimenti il loro contenuto trasparirebbe. */
#tabella-movimenti th:first-child,
#tabella-movimenti td.azioni-riga {
    position: sticky;
    left: 0;
    background: #fff;
}

#tabella-movimenti tbody tr:nth-child(even) td.azioni-riga {
    background: #f4f6f8;
}

#tabella-movimenti th:first-child {
    z-index: 2;
}

#tabella-movimenti td.azioni-riga {
    z-index: 1;
    width: 2.2rem;
    text-align: center;
}

.icona-azione {
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.15rem 0.3rem;
}

td.importo {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

th.ordinabile {
    cursor: pointer;
    user-select: none;
}

th.ordinabile:hover {
    color: #0069c8;
}

th.ordine-asc::after {
    content: " \25B2";
}

th.ordine-desc::after {
    content: " \25BC";
}

.link-pericolo, .link-pericolo:visited {
    background: none;
    border: none;
    color: #b00020;
    cursor: pointer;
    padding: 0;
    font: inherit;
    text-decoration: none;
}

.link-pericolo:hover {
    color: #94001a;
}

.link-pericolo:active {
    color: #7a0015;
}

.bottone-pericolo, .bottone-pericolo:visited {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    background: #b00020;
    color: #fff;
    border: none;
    border-radius: 0.25rem;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
}

.bottone-pericolo:hover {
    background: #94001a;
}

.bottone-pericolo:active {
    background: #7a0015;
    transform: translateY(1px);
}

.bottone-secondario, .bottone-secondario:visited {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    background: none;
    color: #0069c8;
    border: 1px solid #0069c8;
    border-radius: 0.25rem;
    text-decoration: none;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.bottone-secondario:hover {
    background: #eaf2fb;
}

.bottone-secondario:active {
    background: #d5e6f7;
}

.riepilogo-eliminazione th {
    text-align: left;
    padding-right: 1rem;
    color: #666;
}

.riepiloghi {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.riepiloghi > div {
    flex: 1 1 16rem;
}

.riepiloghi h3 {
    margin-bottom: 0.3rem;
}

.tabella-riepilogo {
    font-size: 0.9rem;
}

.filtro-utente {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: fit-content;
}

.filtro-utente select {
    width: auto;
    max-width: none;
}

details {
    margin-top: 0.5rem;
}

details summary {
    cursor: pointer;
    color: #0069c8;
    font-size: 0.9rem;
}

details table {
    margin-top: 0.3rem;
}

mark {
    background: #ffe58a;
    padding: 0;
}

/* Sotto i 640px il titolo e la nav si impilano invece di stare sulla stessa
   riga (flex-wrap dell'header), entrambi allineati a sinistra: stesso
   allineamento del titolo, uno sotto l'altro. "flex-wrap" sulla nav evita
   che i suoi elementi causino overflow orizzontale se non ci stanno tutti
   su una riga sola. */
@media (max-width: 640px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }

    nav {
        flex-wrap: wrap;
    }
}

/* Tabella movimenti -> schede in verticale ("body.vista-schede"): scorrere
   una tabella larga per leggere ogni riga e' scomodo su schermi stretti, ma
   resta comunque una scelta dell'utente (bottone "Vista schede/Vista
   tabella" in movimenti.html, gestito da app.js) e non solo un automatismo
   legato alla larghezza dello schermo — chi preferisce la tabella classica
   anche da telefono puo' tenerla. Ogni <tr> diventa una "scheda" e ogni
   <td> mostra "Etichetta: valore" (la etichetta viene da data-label,
   impostato nel template, non duplicato nel markup). La nota puo' essere
   lunga: invece di lasciarla andare a capo liberamente (renderebbe le
   schede altissime a seconda del contenuto, non voluto), viene troncata a
   2 righe con i puntini di sospensione - il testo completo resta comunque
   disponibile aprendo "Modifica". */
body.vista-schede .tabella-scroll {
    overflow-x: visible;
}

body.vista-schede #tabella-movimenti thead {
    display: none;
}

body.vista-schede #tabella-movimenti,
body.vista-schede #tabella-movimenti tbody,
body.vista-schede #tabella-movimenti tr,
body.vista-schede #tabella-movimenti td {
    display: block;
    width: 100%;
}

body.vista-schede #tabella-movimenti tr {
    border: 1px solid #ddd;
    border-radius: 0.4rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

body.vista-schede #tabella-movimenti td {
    position: static;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid #f0f0f0;
    white-space: normal;
    text-align: right;
    background: none;
}

body.vista-schede #tabella-movimenti td:last-child {
    border-bottom: none;
}

body.vista-schede #tabella-movimenti td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    color: #666;
    text-align: left;
    flex-shrink: 0;
}

/* Senza min-width:0 un elemento flex non si restringe mai sotto la
   larghezza del proprio contenuto (default "min-width: auto"): una nota
   lunga senza interruzioni di riga naturali spingerebbe la scheda oltre il
   bordo destro dello schermo invece di andare a capo, costringendo a
   scorrere l'intera pagina in orizzontale (bug reale osservato dall'utente).
   overflow-wrap la' dove serve anche se capita una singola parola/token
   troppo lungo per andare a capo da solo. */
body.vista-schede #tabella-movimenti td > .valore {
    min-width: 0;
    overflow-wrap: anywhere;
}

body.vista-schede #tabella-movimenti td.nota-cella {
    display: block;
    text-align: left;
}

body.vista-schede #tabella-movimenti td.nota-cella::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    color: #666;
    margin-bottom: 0.15rem;
}

body.vista-schede #tabella-movimenti td.nota-cella .valore {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sovrascrive lo sfondo bianco/grigio della colonna azioni ancorata (serve
   solo per lo scroll orizzontale della tabella larga): qui la scheda non
   scorre e quello sfondo, fisso, non seguiva i colori alternati delle
   schede (bug reale osservato dall'utente). */
body.vista-schede #tabella-movimenti td.azioni-riga {
    width: auto;
    justify-content: flex-end;
    border-bottom: none;
    padding-bottom: 0;
    background: none;
}

@media (prefers-color-scheme: dark) {
    body { background: #1e1e1e; color: #eee; }
    a, a:visited { color: #4da3ff; }
    a:hover { color: #7dbfff; }
    header { border-color: #444; }
    .nav-utente { color: #aaa; }
    th, td { border-color: #444; }
    table tbody tr:nth-child(even) { background: #2a2a2a; }
    #tabella-movimenti thead th { background: #1e1e1e; }
    #tabella-movimenti th:first-child,
    #tabella-movimenti td.azioni-riga { background: #1e1e1e; }
    #tabella-movimenti tbody tr:nth-child(even) td.azioni-riga { background: #2a2a2a; }
    mark { background: #7a6200; color: #fff; }
    .saldo-credito { color: #66bb6a; }
    .saldo-debito { color: #ef5350; }
    .saldo-pareggio { color: #aaa; }
    .messaggio { background: #1e3a20; color: #8fd694; }
    .conteggio { color: #aaa; }
    a:active { color: #a9d3ff; }
    .nav-esci:active { color: #7dbfff; }
    .link-pericolo:hover { color: #ff7961; }
    .link-pericolo:active { color: #ff9a8a; }
    .bottone:hover { background: #0077e0; }
    .bottone:active { background: #4da3ff; }
    .bottone-pericolo:hover { background: #c62838; }
    .bottone-pericolo:active { background: #e0455a; }
    .bottone-secondario { border-color: #4da3ff; color: #4da3ff; }
    .bottone-secondario:hover { background: #16324d; }
    .bottone-secondario:active { background: #1d4166; }
    body.vista-schede #tabella-movimenti tr { border-color: #444; }
    body.vista-schede #tabella-movimenti td { border-bottom-color: #333; }
    body.vista-schede #tabella-movimenti td[data-label]::before,
    body.vista-schede #tabella-movimenti td.nota-cella::before { color: #aaa; }
}