:root {
    --bordo: #d6d9de;
    --bordo-forte: #a8adb6;
    --sfondo: #f6f7f9;
    --testo: #1c1f24;
    --tenue: #6b7280;
    --accento: #1a56b8;
    --errore: #b3261e;
    --errore-sfondo: #fdecea;
    --ok-sfondo: #e8f5e9;
    --evidenza: #fff8e1;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 13px/1.4 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--testo);
    background: var(--sfondo);
}

header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 14px;
    background: #fff;
    border-bottom: 1px solid var(--bordo);
    position: sticky;
    top: 0;
    z-index: 10;
}

header nav { display: flex; gap: 4px; }
header .nota { margin-left: auto; color: var(--tenue); font-size: 12px; }

.tab {
    border: 1px solid var(--bordo);
    background: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
}
.tab.attiva { background: var(--accento); border-color: var(--accento); color: #fff; }

main { padding: 12px; }
.vista.nascosta { display: none; }

.colonne { display: flex; gap: 12px; align-items: flex-start; }
.pannello {
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 5px;
    padding: 10px 12px;
    flex: 1;
    min-width: 0;
}
.pannello.stretto { flex: 0 0 320px; }

h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); margin: 0 0 8px; }
h3 { font-size: 13px; margin: 16px 0 6px; }
h3 .conteggio { color: var(--tenue); font-weight: normal; }

.aiuto, .vuoto { color: var(--tenue); font-size: 12px; margin: 4px 0 10px; }

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--bordo); padding: 0; text-align: left; }
th {
    background: #eef0f3;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tenue);
    padding: 3px 6px;
    font-weight: 600;
    white-space: nowrap;
}
td.numero, th.numero { text-align: right; }

/* celle-input in stile foglio di calcolo */
td input, td select {
    width: 100%;
    border: 0;
    padding: 3px 6px;
    font: inherit;
    background: transparent;
    color: inherit;
    min-width: 0;
}
td input:focus, td select:focus {
    outline: 2px solid var(--accento);
    outline-offset: -2px;
    background: #fff;
}
td input.numero { text-align: right; font-variant-numeric: tabular-nums; }
td.check { text-align: center; }
td.check input { width: auto; }

tr.nuova td { background: #fbfcfd; }
tr.sporca td { background: var(--evidenza); }
tr.in-errore td { background: var(--errore-sfondo); }
tr.salvata td { background: var(--ok-sfondo); transition: background .8s; }

.azioni { width: 26px; text-align: center; }
.azioni button {
    border: 0;
    background: transparent;
    color: var(--tenue);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
}
.azioni button:hover { color: var(--errore); }

.messaggio-errore {
    background: var(--errore-sfondo);
    color: var(--errore);
    border: 1px solid #f3c4c0;
    border-radius: 4px;
    padding: 6px 8px;
    margin: 6px 0;
    font-size: 12px;
}
.errore { background: var(--errore-sfondo); color: var(--errore); padding: 12px; border-radius: 5px; }
.errore code { background: #fff; padding: 1px 5px; border-radius: 3px; }

/* elenco tool */
.riga-tool {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--bordo);
    background: transparent;
    padding: 6px 4px;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.riga-tool:hover { background: #f0f4fb; }
.riga-tool.selezionato { background: #e4ecfa; box-shadow: inset 3px 0 0 var(--accento); }
.riga-tool .nome { font-weight: 600; }
.riga-tool .meta { margin-left: auto; color: var(--tenue); font-size: 11px; white-space: nowrap; }
.riga-tool.inattivo .nome { color: var(--tenue); text-decoration: line-through; }

.nuovo-tool { display: flex; gap: 6px; margin-top: 8px; }
.nuovo-tool input {
    flex: 1;
    border: 1px solid var(--bordo);
    border-radius: 4px;
    padding: 4px 6px;
    font: inherit;
}
.nuovo-tool button {
    border: 1px solid var(--accento);
    background: var(--accento);
    color: #fff;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font: inherit;
}

.testa-tool { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.testa-tool h2 { margin: 0; }
.testa-tool .pannello-link { color: var(--accento); font-size: 12px; }
.testa-tool .elimina {
    margin-left: auto;
    border: 1px solid var(--bordo);
    background: #fff;
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    font: inherit;
    color: var(--errore);
}
.riepilogo { color: var(--tenue); font-size: 12px; margin: 8px 0 0; }
.riepilogo b { color: var(--testo); font-variant-numeric: tabular-nums; }

/* colonne in sola lettura, ricalcolate mentre scrivi */
td .calcolato {
    display: block;
    padding: 3px 6px;
    color: var(--tenue);
    font-variant-numeric: tabular-nums;
    background: #f4f6f8;
    white-space: nowrap;
}
th.calcolata { background: #e6e9ed; }

button.come-link {
    border: 0;
    background: transparent;
    color: var(--accento);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

/* ------------------------------------------------------------------- report */
.testa-report { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.testa-report h2 { margin: 0; }
.testa-report label { color: var(--tenue); font-size: 12px; }
.testa-report input {
    border: 1px solid var(--bordo);
    border-radius: 4px;
    padding: 3px 6px;
    font: inherit;
    width: 82px;
}
.testa-report button {
    border: 1px solid var(--accento);
    background: var(--accento);
    color: #fff;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font: inherit;
}
.testa-report .nota { color: var(--tenue); font-size: 12px; margin-left: auto; }

.scorrevole { overflow-x: auto; }

table.matrice { font-variant-numeric: tabular-nums; }
table.matrice th.riga {
    text-align: left;
    padding: 3px 8px;
    background: #fff;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    color: var(--testo);
    white-space: nowrap;
    position: sticky;
    left: 0;
}
table.matrice td { padding: 0; }
table.matrice td.numero { padding: 3px 8px; white-space: nowrap; }
table.matrice td.zero { color: #c3c7cd; }
table.matrice td.totale, table.matrice th.totale { background: #eef0f3; font-weight: 600; }
table.matrice tfoot tr.struttura td, table.matrice tfoot tr.struttura th { background: #fdf6e3; }
table.matrice tfoot tr.totali td, table.matrice tfoot tr.totali th {
    background: #e6e9ed;
    font-weight: 600;
}

button.cella {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: right;
    padding: 3px 8px;
    cursor: pointer;
    color: inherit;
}
button.cella:hover { background: #e4ecfa; }
button.cella.attiva { background: var(--accento); color: #fff; }

#dettaglio-cella { margin-top: 14px; }
#dettaglio-cella td.testo { padding: 3px 8px; vertical-align: top; }
#dettaglio-cella td.spiegazione { color: var(--tenue); font-size: 12px; }

/* ------------------------------------------------- banner delle scadenze */
/* Un abbonamento mensile aperto addebita per sempre: questo e' il promemoria. */
.banner {
    margin: 0;
    padding: 8px 16px;
    background: #fff8e1;
    border-bottom: 1px solid #ffe082;
    font-size: 13px;
}
.banner strong { margin-right: 4px; }
.come-link.rosso { color: #c62828; font-weight: 600; }

/* ------------------------------------------------------------- fatture */
table.fatture { width: 100%; border-collapse: collapse; }
table.fatture td { padding: 4px 8px; border-bottom: 1px solid #eee; }
table.fatture td.vuoto { color: #999; font-style: italic; }
table.fatture a { color: #1a4fbf; }

.carica-fattura {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 8px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 4px;
}
.carica-fattura input[type="file"] { font-size: 12px; }

/* --------------------------------------------------- campanella e avvisi */
.campanella {
    position: relative;
    margin-left: auto;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    line-height: 1;
}
.campanella:hover { border-color: #ccc; background: #f3f3f3; }
.campanella .pallino {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    padding: 0 4px;
    background: #c62828;
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.pannello-avvisi {
    margin: 0;
    padding: 10px 16px 14px;
    background: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}
.testa-avvisi { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.testa-avvisi .come-link { margin-left: auto; }

ul.lista-avvisi { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; }
ul.lista-avvisi li {
    padding: 6px 0 6px 10px;
    border-left: 3px solid #ffc107;
    border-bottom: 1px solid #f0f0f0;
}
ul.lista-avvisi li.scaduto { border-left-color: #c62828; }
ul.lista-avvisi .testo { font-size: 12px; color: #444; }
ul.lista-avvisi .quando { font-size: 11px; color: #999; }
ul.lista-avvisi .nuovo {
    margin-left: 6px;
    padding: 1px 5px;
    background: #1a4fbf;
    color: #fff;
    border-radius: 3px;
    font-size: 10px;
    text-transform: uppercase;
}

/* un blocco di report per valuta: senza cambio non si sommano */
h3.titolo-valuta {
    margin: 14px 0 4px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #555;
}

/* esito della voce "tutti" nel menu della persona */
.esito-tutti {
    margin: 6px 0;
    padding: 5px 9px;
    background: #e8f5e9;
    border-left: 3px solid #43a047;
    font-size: 12px;
}

/* quanto paga ognuno, sotto la griglia delle assegnazioni */
p.ripartizione {
    margin: 4px 0 0;
    padding: 5px 9px;
    background: #f5f7fb;
    border-left: 3px solid #1a4fbf;
    font-size: 12px;
    line-height: 1.7;
}

/* la parte di costo che nessuna percentuale copre */
p.ripartizione .resto { color: #b26a00; font-weight: 600; }

/* il cambio usato nel report */
.testa-report .cambio { margin-left: 8px; font-size: 12px; color: #555; }
.testa-report .cambio input { width: 70px; }

/* ripartizione di una singola riga di costo */
.scegli-riga { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.scegli-riga select { max-width: 480px; }
#griglia-ripartizione table { width: 100%; border-collapse: collapse; }
#griglia-ripartizione td { padding: 3px 8px; border-bottom: 1px solid #f0f0f0; }
#griglia-ripartizione input { width: 70px; }

/* i cambi mese per mese */
.cambi-mensili {
    margin: 8px 0;
    padding: 10px 12px;
    background: #f5f7fb;
    border: 1px solid #dde3ef;
    border-radius: 4px;
}
.cambi-griglia { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0; }
.cambi-griglia label { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.cambi-griglia input { width: 68px; }

/* i titoli delle due sezioni del report */
h3.titolo-sezione {
    margin: 16px 0 4px;
    font-size: 14px;
    padding-bottom: 3px;
    border-bottom: 2px solid #1a4fbf;
    display: inline-block;
}

/* pagina di accesso */
body.pagina-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #eef1f6;
}
.scatola-login {
    width: 340px;
    padding: 24px;
    background: #fff;
    border: 1px solid #dde3ef;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.scatola-login h1 { margin: 0 0 14px; font-size: 18px; }
.scatola-login label { display: block; font-size: 12px; color: #555; margin-bottom: 4px; }
.scatola-login input { width: 100%; padding: 7px 8px; margin-bottom: 12px; }
.scatola-login button { width: 100%; padding: 8px; }
.scatola-login .nota { margin: 8px 0 0; }
header a.esci { margin-left: 10px; font-size: 12px; color: #1a4fbf; }

/* ---------------------------------------------------------------- compensi */

/* Una riga della tabella dei compensi si apre: sotto compare da dove viene la
   quota, contenitore per contenitore. */
table.matrice tr.cliccabile { cursor: pointer; }
table.matrice tr.cliccabile:hover th.riga { background: #e6eefb; }
table.matrice tr.aperta th.riga,
table.matrice tr.aperta td { background: #eef4fd; }
table.matrice .freccia { color: var(--tenue); }

/* Un negativo e' un soldo dato in piu' da recuperare: si deve vedere subito. */
table.matrice td.negativo { color: var(--errore); }
table.matrice tfoot tr.totali td.negativo { color: #8c1d16; }

.etichetta {
    margin-left: 6px;
    font-size: 11px;
    font-weight: normal;
    color: var(--tenue);
    border: 1px solid var(--bordo);
    border-radius: 3px;
    padding: 0 5px;
}

#compensi-dettaglio h3 { margin-top: 14px; }
#compensi-dettaglio table.matrice th.riga .nota { font-weight: normal; }

/* La tabella del procedimento: le colonne degli operatori (− spese, = netto,
   × %) sono di servizio, non il risultato. Piu' tenui, cosi' l'occhio cade
   sulla colonna del guadagno. */
table.procedimento th.numero { font-weight: 600; }
table.procedimento tbody td.numero { color: #4a5058; }
table.procedimento tbody td.numero.totale { color: var(--testo); }
table.procedimento tfoot th.riga { font-weight: normal; }
table.procedimento tfoot tr.totali th.riga { font-weight: 600; }

/* Una nota scritta su una riga di provvigione: dice qualcosa che i numeri non
   dicono (di solito che il mensile e' ripartito e non versato). Sta accanto ai
   numeri che spiega, non solo nella griglia dove e' stata scritta. */
.avviso-nota {
    background: var(--evidenza);
    border: 1px solid #e6d9a8;
    border-radius: 4px;
    padding: 6px 9px;
    margin: 8px 0 0;
    font-size: 12px;
}

/* --------------------------------------------------------------- andamento */

.riquadri { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.riquadro {
    flex: 1 1 150px;
    border: 1px solid var(--bordo);
    border-radius: 5px;
    padding: 8px 10px;
    background: #fbfcfd;
}
.riquadro.forte { background: var(--evidenza); border-color: #e6d9a8; }
.riquadro .etichetta-riquadro {
    display: block; font-size: 11px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--tenue);
}
.riquadro strong { display: block; font-size: 17px; font-variant-numeric: tabular-nums; margin: 2px 0; }
.riquadro strong.negativo { color: var(--errore); }
.riquadro .nota { font-size: 11px; }

table.classifica th.posto { width: 2.2em; text-align: center; color: var(--tenue); background: #fff; }
table.classifica td.barra { width: 28%; padding: 0 8px; }
/* la barra si legge a colpo d'occhio: la distanza fra il primo e gli altri
   in cifre va confrontata a mente, qui no */
table.classifica td.barra span {
    display: block; height: 9px; border-radius: 2px; background: var(--accento); min-width: 1px;
}
.riquadro .quota-riquadro {
    display: block; font-size: 12px; font-weight: 600; color: var(--accento);
}
.riquadro.forte .quota-riquadro { color: #8a6d1f; }

/* ------------------------------------------------------------------ mobile

   Sotto i 760px la pagina si riorganizza: le colonne affiancate si impilano,
   le tabelle scorrono in orizzontale con la prima colonna che resta ferma, e
   la barra delle schede scorre invece di andare a capo.

   Le tabelle NON si trasformano in schede: sono fogli di calcolo, e il
   confronto fra righe e' il motivo per cui esistono. Scorrere e' meglio che
   perdere l'allineamento delle colonne. */

@media (max-width: 760px) {
    body { font-size: 14px; }
    main { padding: 8px; }

    /* la barra in alto: il titolo va a capo, le schede scorrono di lato */
    header { flex-wrap: wrap; gap: 8px; padding: 8px 10px; }
    header > strong { flex: 1 1 100%; }
    header nav {
        order: 3;
        flex: 1 1 100%;
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }
    header nav .tab { white-space: nowrap; }
    /* la riga di spiegazione a destra non serve su schermo stretto */
    header .nota { display: none; }
    header a.esci { margin-left: auto; }

    /* elenco e dettaglio uno sotto l'altro, non affiancati */
    .colonne { flex-direction: column; }
    .pannello.stretto { flex: 1 1 auto; width: 100%; }
    .pannello { padding: 8px 9px; }

    /* i filtri del periodo: vanno a capo invece di stringersi */
    .testa-report { gap: 8px; }
    .testa-report .nota { margin-left: 0; flex: 1 1 100%; }
    .testa-report input { min-width: 6em; }

    /* bersagli toccabili: sotto i 36px si sbaglia */
    td input, td select, .testa-report input, .testa-report select, .testa-report button {
        min-height: 34px;
    }
    /* iOS ingrandisce la pagina se un campo ha meno di 16px */
    input, select, textarea { font-size: 16px; }

    /* la prima colonna resta ferma mentre il resto scorre: senza, a meta'
       tabella non si sa piu' di chi e' la riga che si sta leggendo */
    .scorrevole { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.matrice th.riga, table.matrice tbody th, table.matrice tfoot th {
        position: sticky;
        left: 0;
        z-index: 1;
        background: #fff;
        box-shadow: 1px 0 0 var(--bordo);
    }
    table.matrice tr.aperta th.riga { background: #eef4fd; }
    table.matrice tfoot tr.totali th { background: #e9edf2; }
    table.matrice tfoot tr.struttura th { background: #fdf6e3; }

    /* i riquadri dell'andamento: due per riga invece di sei */
    .riquadro { flex: 1 1 45%; }
    table.classifica td.barra { display: none; }

    .pannello-avvisi { left: 8px; right: 8px; width: auto; }
    .aiuto, .vuoto { font-size: 12px; }
}

/* schermi molto stretti: un riquadro per riga */
@media (max-width: 420px) {
    .riquadro { flex: 1 1 100%; }
    header > strong { font-size: 13px; }
}

/* ------------------------------------------------------------- lavorazioni */

/* Gli stati si leggono a colpo d'occhio in una tabella lunga: il colore fa
   quel lavoro, la parola resta perche' il colore da solo non basta a chi non
   li distingue. Sono <select>: lo stato si cambia da li', ed e' la cosa che si
   fa piu' spesso in questa scheda. */
select.stato {
    font-size: 11px; font-weight: 600; padding: 2px 4px;
    border-radius: 3px; border: 1px solid var(--bordo); cursor: pointer;
}
select.stato.online    { background: var(--ok-sfondo);     color: #1b5e20; border-color: #bfe0c2; }
select.stato.revisione { background: var(--evidenza);      color: #7a5d00; border-color: #e6d9a8; }
select.stato.rifiutata { background: var(--errore-sfondo); color: var(--errore); border-color: #f2c8c4; }
select.stato.sospesa   { background: #eceef1;              color: #4a5058; }

.riga-tool .conta { margin-left: auto; color: var(--tenue); font-size: 11px;
                    font-variant-numeric: tabular-nums; white-space: nowrap; }
.riga-tool .conta b { font-size: 14px; color: var(--testo); }
.riga-tool.senza .conta b { color: var(--tenue); font-weight: normal; }

td.giorno { font-variant-numeric: tabular-nums; color: var(--tenue); white-space: nowrap; }

.scheda-form {
    border: 1px solid var(--accento); border-radius: 5px;
    padding: 10px 12px; background: #f7faff; margin: 10px 0 14px;
}
.scheda-form h3 { margin: 0 0 8px; font-size: 14px; }
.campi { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.campi label { display: block; font-size: 11px; color: var(--tenue); }
.campi input, .campi select {
    display: block; padding: 6px 7px; border: 1px solid var(--bordo);
    border-radius: 4px; font: inherit; margin-top: 2px;
}
.campi .salva {
    padding: 7px 14px; border: 1px solid var(--accento); background: var(--accento);
    color: #fff; border-radius: 4px; cursor: pointer; font: inherit;
}
.campi .salva:disabled { opacity: .6; cursor: default; }

table.calendario td { text-align: center; font-variant-numeric: tabular-nums; }
table.calendario td.zero { color: #c9ccd1; }
table.calendario th.giorno-col { text-align: center; font-weight: normal; color: var(--tenue); }
table.calendario th.giorno-col.oggi { color: var(--accento); font-weight: 600; }
table.calendario td.tot { font-weight: 600; background: #f6f7f9; }
table.calendario th.riga { text-align: left; }

/* Sul telefono i campi non devono rimpicciolire: 16px e' la soglia sotto la
   quale iOS zooma da solo appena tocchi un campo. */
@media (max-width: 760px) {
    .campi label, .campi input, .campi select { font-size: 16px; }
    .campi input { width: 100%; }
    .campi label { flex: 1 1 100%; }
    .campi .salva { width: 100%; padding: 10px; }
}

/* I riquadri di Andamento portano cifre lunghe e sul telefono ne sta uno per
   riga. Qui i numeri sono piccoli (quante app), e uno per riga vorrebbe dire
   scorrere tre schermate prima di arrivare al modulo, che e' la cosa per cui
   si apre la scheda. Quindi due per riga. */
@media (max-width: 420px) {
    #lav-riquadri .riquadro { flex: 1 1 40%; }
}

/* app o sito: una parola corta accanto al nome, tenue perche' e' una
   classificazione e non il dato */
td.tipo { color: var(--tenue); font-size: 11px; text-transform: uppercase;
          letter-spacing: .03em; white-space: nowrap; }
.campi select:disabled, .campi input:disabled { background: #f1f2f4; color: var(--tenue); }

/* la colonna del ponte verso il tabellone: si guarda solo quando qualcosa non
   va, quindi sta zitta quando va bene */
td.ponte { font-size: 11px; white-space: nowrap; color: var(--tenue); }
td.ponte.fatto  { color: #1b5e20; }
td.ponte.attesa { color: #7a5d00; }
td.chi { font-weight: 600; white-space: nowrap; }
td.ponte.assorbita { color: #7a5d00; background: var(--evidenza); }

/* Una riga che spiega e non somma: le spese che il bro si sorbisce davvero
   sono gia' dentro il maturato, quindi vanno lette come contesto e non come
   una voce da sottrarre un'altra volta. Tenue e in corsivo: si distingue
   dalle righe che fanno il conto senza sparire. */
table.matrice tr.informativa th.riga,
table.matrice tr.informativa td {
    color: var(--tenue);
    font-style: italic;
    font-weight: normal;
}