:root{
--bg:#f4f6f9;--card:#fff;--ink:#1f2937;--muted:#6b7280;--line:#e5e7eb;
--hover:#f7fafc;--ghost-hover:#eef3f8;--tag-bg:#eef2f7;--tag-ink:#374151;
--brand:#1f4e78;--brand2:#2f6fb0;
--alta:#e11d48;--media:#d97706;--bassa:#059669;
--done:#059669;--corso:#d97706;--attesa:#7c3aed;--annull:#9ca3af;--iniziare:#2563eb;
--shadow:0 1px 3px rgba(0,0,0,.06);
}
[data-theme="dark"]{
--bg:#0f172a;--card:#1e293b;--ink:#e2e8f0;--muted:#94a3b8;--line:#334155;
--hover:#273449;--ghost-hover:#273449;--tag-bg:#334155;--tag-ink:#cbd5e1;
--brand:#0b1f38;--brand2:#3b82f6;
--shadow:0 1px 3px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
/* Zoom inibito sul telefono (scelta di Mario): il meta viewport in index.html
ferma il pizzico, questo ferma il DOPPIO TOCCO — che ingrandiva la colonna
toccata e lasciava il prospetto storto, senza un modo ovvio di tornare come
prima. Su iPhone Safari ignora user-scalable: lì lavora il blocco del gesto
in JS, sempre in index.html. Le tabelle larghe restano raggiungibili con lo
scorrimento laterale, che non è mai passato dallo zoom. */
html{touch-action:manipulation}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;transition:background .25s ease,color .25s ease}
button{cursor:pointer;border:none;border-radius:8px;font-size:13px;padding:8px 14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none}
.btn-primary{background:var(--brand2);color:#fff}.btn-primary:hover{filter:brightness(.94)}
.btn-ghost{background:var(--card);border:1px solid var(--line);color:var(--ink)}.btn-ghost:hover{background:var(--ghost-hover)}
.btn-danger{background:#fee2e2;color:#b91c1c}.btn-danger:hover{background:#fecaca}
[data-theme="dark"] .btn-danger{background:#7f1d1d;color:#fecaca}[data-theme="dark"] .btn-danger:hover{background:#991b1b}
input,select,textarea{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;background:var(--card);color:var(--ink)}
a{color:var(--brand2)}
.hidden{display:none!important}
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--card);border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.12);padding:32px;width:100%;max-width:380px}
.login-card img.logo{height:52px;display:block;margin:0 auto 12px}
.login-card h1{margin:0 0 4px;font-size:22px;color:var(--brand2);text-align:center}
.login-card p{margin:0 0 22px;color:var(--muted);font-size:13px;text-align:center}
.login-card label{display:block;font-size:12px;color:var(--muted);margin:12px 0 4px;font-weight:600}
.login-card input{width:100%}
.login-card button{width:100%;margin-top:20px;padding:12px}
.err{background:#fee2e2;color:#b91c1c;padding:9px 12px;border-radius:8px;font-size:13px;margin-top:14px}
[data-theme="dark"] .err{background:#7f1d1d;color:#fecaca}
header{background:var(--brand);color:#fff;padding:12px 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
header img.logo{height:30px;background:#fff;border-radius:6px;padding:2px}
header h1{font-size:18px;margin:0;font-weight:700}
header .spacer{flex:1}
header .who{font-size:13px;color:#d6e2ef}
.role-badge{background:rgba(255,255,255,.2);padding:2px 8px;border-radius:20px;font-size:11px;margin-left:6px}
header button{background:rgba(255,255,255,.14);color:#fff}
header button:hover{background:rgba(255,255,255,.28)}
.wrap{padding:18px 20px;max-width:1600px;margin:0 auto}
.tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.tabs button.active{background:var(--brand2);color:#fff;border-color:var(--brand2)}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px;min-width:110px;flex:1 1 110px}
.stat b{display:block;font-size:20px}.stat span{color:var(--muted);font-size:12px}
.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.bar input[type=search]{min-width:180px;flex:1 1 180px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:10px;box-shadow:var(--shadow)}
table thead tr:first-child th:first-child{border-top-left-radius:10px}
table thead tr:first-child th:last-child{border-top-right-radius:10px}
table tbody tr:last-child td:first-child{border-bottom-left-radius:10px}
table tbody tr:last-child td:last-child{border-bottom-right-radius:10px}
/* Le celle partono tutte dall'alto: se una riga ne ha una alta due righe (un
titolo lungo, due etichette), le altre restano appese a metà e la riga sembra
sfalsata. L'intestazione invece resta centrata, che lì sta meglio. */
th,td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
thead th{vertical-align:middle}
/* Anche i bottoni partono dall'alto, come tutto il resto: se fossero centrati,
nelle righe alte due o tre righe fluttuerebbero a metà. Il ritocco di
imbottito porta il testo del bottone sulla stessa riga del testo accanto. */
td.act,td:has(> input[type=checkbox]){vertical-align:top;padding-top:5px}
td.center{vertical-align:middle}
/* Date e importi non si spezzano mai: "27.900,00" sopra e "€" sotto non è
un numero, è un pasticcio. */
td[data-label="Data"],td[data-label="Importo"],td[data-label="Scadenza"],
td[data-label="Inserimento"],td[data-label="Data e ora"],td[data-label="Giorno"]{white-space:nowrap}
td .ic{vertical-align:-.2em}
th{background:var(--brand);color:#fff;font-size:12px;cursor:pointer;white-space:nowrap}
th:hover{background:var(--brand2)}
tr:hover td{background:var(--hover)}
td.desc{max-width:260px}
/* Il titolo va a capo e si ferma a due righe: MAI sopra le colonne vicine.
white-space e overflow-wrap sono ribaditi qui apposta: una classe nata
dopo (vedi il caso .tap → .tappo) non deve poter rompere il ritaglio. */
.clamp2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;overflow-wrap:break-word;word-break:break-word}
/* Le parole senza spazi (codici atto, IBAN, protocolli) si spezzano invece
di sfondare la cella e coprire quella accanto. */
td{overflow-wrap:break-word}
/* La ricerca globale ha SEMPRE il testo a contrasto: sfondo della scheda e
inchiostro del tema, qualunque sia il colore dell'intestazione. Prima era
bianco-su-trasparente: perfetto sull'header colorato, invisibile su chiaro. */
header #cercaTutto{background:var(--card);color:var(--ink);border:1px solid var(--line);max-width:260px;min-width:110px}
header #cercaTutto::placeholder{color:var(--muted)}
/* Sul telefono la ricerca si stringe con gli altri: prima il min-width era
scritto in linea sull'elemento e vinceva su tutto — la casella sfondava
lo schermo. Le misure ora stanno SOLO qui, e il telefono le può ridurre. */
@media(max-width:820px){
header #cercaTutto{flex:1 1 70px;min-width:0;max-width:42vw;padding:6px 8px;font-size:13px}
}
/* ---------- Kanban / Bacheca ---------- */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.kcol{flex:1 1 220px;min-width:220px;background:var(--hover);border:1px solid var(--line);border-radius:12px;padding:10px}
.kcol h4{margin:0 0 8px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.kcol h4 .cnt{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:0 8px;font-size:11px}
.kcol.drag-over{outline:2px dashed var(--brand2);outline-offset:-3px}
.kcard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;box-shadow:var(--shadow)}
.kcard[draggable=true]{cursor:grab}
.kcard.dragging{opacity:.5}
.kcard .kt{font-weight:600;font-size:13px;margin-bottom:6px}
.kcard .km{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:11px;color:var(--muted)}
/* ---------- Calendario ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .cal-h{font-size:11px;color:var(--muted);text-align:center;font-weight:700;padding:4px}
.cal .cal-d{background:var(--card);border:1px solid var(--line);border-radius:8px;min-height:92px;padding:5px;font-size:11px;overflow:hidden}
.cal .cal-d.out{opacity:.4}
.cal .cal-d .dn{font-weight:700;color:var(--muted);margin-bottom:3px}
.cal .cal-d.today{border-color:var(--brand2)}
.cal .cal-d.today .dn{color:var(--brand2)}
.cal .cev{display:block;background:var(--hover);border-left:3px solid var(--brand2);border-radius:4px;padding:2px 4px;margin-bottom:3px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:820px){.cal{gap:3px}.cal .cal-d{min-height:60px;padding:3px}.cal .cev{font-size:10px}}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;color:#fff;white-space:nowrap}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;background:var(--tag-bg);color:var(--tag-ink)}
.overdue{color:var(--alta);font-weight:700}
.people,.info{color:var(--muted);font-size:12px}
.act{display:flex;gap:6px;flex-wrap:nowrap;align-items:center}.act button{padding:5px 9px;font-size:12px;white-space:nowrap}
/* Dentro una tabella la cella DEVE restare una cella: col display:flex la
colonna Azioni si sganciava dalle righe e i bordi ballavano (visto nel
dettaglio dei movimenti con le descrizioni su due righe). */
/* display:table-cell sì (col flex la colonna si sganciava dalle righe), ma
l'allineamento resta in ALTO come tutte le altre celle: centrato, nelle righe
con la descrizione su due o tre righe il bottone fluttuava a metà e la riga
sembrava storta. Il controllo in collaudo/prova-css.js sorveglia questa riga. */
td.act{display:table-cell}
td.act button{margin:1px 3px 1px 0}
.empty{text-align:center;color:var(--muted);padding:40px}
.prog{min-width:80px}
.progbar{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin-top:3px}
.progbar>span{display:block;height:100%;background:var(--done)}
/* ---------- Modali con animazione ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.overlay.open{opacity:1;visibility:visible}
/* la richiesta di conferma e quella di un valore stanno sopra a qualsiasi altro riquadro */
#ovConfirm{z-index:120}
#ovAsk{z-index:118}
.modal{background:var(--card);border-radius:14px;width:100%;max-width:680px;max-height:92vh;overflow:auto;padding:22px;transform:translateY(14px) scale(.98);opacity:0;transition:transform .22s ease,opacity .22s ease}
.overlay.open .modal{transform:translateY(0) scale(1);opacity:1}
.modal h2{margin:0 0 14px;font-size:18px;color:var(--brand2)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:4px}.field.full{grid-column:1/3}
.field label{font-size:12px;color:var(--muted);font-weight:600}
.field textarea{resize:vertical;min-height:60px}
.rte-toolbar{display:flex;gap:4px;margin-bottom:4px;flex-wrap:wrap}
.rte-toolbar button{padding:4px 9px;background:var(--card);border:1px solid var(--line);color:var(--ink);font-size:12px;font-weight:600}
.rte-toolbar button:hover{background:var(--ghost-hover)}
.rte{border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:70px;max-height:220px;overflow:auto;background:var(--card);color:var(--ink);font-size:13px}
.rte:focus{outline:2px solid var(--brand2);outline-offset:-1px}
.rte ul,.rte ol{margin:4px 0 4px 20px;padding:0}
.rte[contenteditable=false]{opacity:.7}
.rem-box{display:flex;flex-wrap:wrap;gap:6px 14px}
.rem-box label{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:400;color:var(--ink)}
.rem-box input{width:auto}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.steps-box{border:1px solid var(--line);border-radius:8px;padding:10px}
.step-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.step-row input[type=text]{flex:1}
.step-row input[type=checkbox]{width:18px;height:18px}
.step-row .done-txt{text-decoration:line-through;color:var(--muted)}
.step-add{display:flex;gap:8px;margin-top:6px}
.step-add input{flex:1}
/* Contatore del carburante: riproduce il quadrante arancione del K33 montato sulla
cisterna. Non è vezzo grafico — chi rifornisce ha la pompa davanti e deve capire
al volo QUALE dei due numeri gli stiamo chiedendo: le tre cifre grandi o il
piccolo TOTAL in basso. */
.k33{background:#e8820c;border-radius:10px;padding:10px;box-shadow:inset 0 0 0 2px #c96f08}
.k33-row{background:#1b3a6b;border-radius:6px;padding:8px 10px;display:flex;align-items:center;gap:10px}
.k33-lab{color:#f5a623;font-weight:800;letter-spacing:2px;font-size:13px;font-family:Verdana,Arial,sans-serif}
.k33-row input{flex:1;min-width:0;background:#0f1e38;color:#f5a623;border:2px solid #0a1526;border-radius:4px;
font-family:Consolas,"Courier New",monospace;font-weight:700;font-size:38px;line-height:1.1;
letter-spacing:14px;text-indent:14px;text-align:center;padding:2px 0}
.k33-row input:focus{outline:2px solid #fff;outline-offset:1px}
.k33-tot{background:#1b3a6b;border-radius:5px;padding:5px 9px;display:flex;align-items:center;gap:8px;margin-top:8px}
.k33-tot .k33-lab{font-size:11px;letter-spacing:1px}
.k33-tot input{flex:1;min-width:0;background:#0f1e38;color:#f5a623;border:1px solid #0a1526;border-radius:3px;
font-family:Consolas,"Courier New",monospace;font-size:18px;letter-spacing:7px;text-indent:7px;text-align:center;padding:2px 0}
.k33-nota{font-size:11.5px;color:#7c3a00;margin-top:6px;text-align:center}
.card-box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px}
.card-box h3{margin:0 0 10px;font-size:15px;color:var(--brand2)}
.muted{color:var(--muted);font-size:12px}
/* ---------- Toast ---------- */
#toasts{position:fixed;top:16px;right:16px;display:flex;flex-direction:column;gap:10px;z-index:100;max-width:340px}
.toast{background:var(--card);color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--brand2);border-radius:10px;padding:12px 14px;box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:13px;opacity:0;transform:translateX(24px);transition:opacity .25s ease,transform .25s ease}
.toast.show{opacity:1;transform:translateX(0)}
.toast-success{border-left-color:var(--done)}
.toast-error{border-left-color:var(--alta)}
.toast-warning{border-left-color:var(--media)}
/* ---------- MOBILE: tabella -> schede ---------- */
@media(max-width:820px){
.wrap{padding:12px}
header{padding:10px 14px}
header h1{font-size:16px}
.modal{padding:16px}
.grid{grid-template-columns:1fr}.field.full{grid-column:1}
table.tbl-cards{box-shadow:none;background:transparent}
table.tbl-cards thead{display:none}
table.tbl-cards,table.tbl-cards tbody,table.tbl-cards tr,table.tbl-cards td{display:block;width:100%}
table.tbl-cards tr{margin-bottom:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
table.tbl-cards td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;text-align:right;padding:8px 12px;border:none;border-bottom:1px solid var(--line);max-width:none}
table.tbl-cards td::before{content:attr(data-label);font-weight:700;color:var(--muted);text-align:left;white-space:nowrap}
table.tbl-cards td:last-child{border-bottom:none}
table.tbl-cards td.act{justify-content:flex-end;background:var(--hover)}
table.tbl-cards td.act::before{display:none}
table.tbl-cards td:has(> input[type=checkbox]){justify-content:flex-end}
.prog{min-width:120px}
button,.btn-ghost{padding:10px 14px}
input,select,textarea{font-size:16px} /* evita lo zoom automatico su iOS */
#toasts{left:12px;right:12px;top:12px;max-width:none}
}
/* Vista task (sola lettura) */
.vrow{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.vlab{color:var(--muted);min-width:140px;font-size:13px}
.vval{flex:1;min-width:0;word-break:break-word}
.vsteps{margin-top:12px}
.vlist{margin:4px 0 0;padding-left:2px;list-style:none}
.vlist li{margin:5px 0}
.vdone{color:var(--muted);text-decoration:line-through}
.vass{color:var(--muted);font-size:12px}
.vnote{margin-top:12px}
.vnote .vval{border:1px solid var(--line);border-radius:8px;padding:8px}
/* Mobile: schede più leggere, tocco, modale ottimizzato */
.clamp2.tap{cursor:pointer}
@media(max-width:820px){
#rows td[data-label="ID"], #rows td[data-label="Inserimento"], #rows td[data-label="Link"], #rows td.info{display:none}
#rows td.desc{font-size:15px;font-weight:600}
.step-row{flex-wrap:wrap;row-gap:6px}
.step-row input[type=text]{order:0;flex:1 1 100%}
.step-row input[type=checkbox]{order:1}
.step-row .step-ass{order:2;flex:1 1 auto;max-width:none !important}
.step-row .btn-danger{order:3}
.vrow{flex-direction:column;gap:2px}
.vlab{min-width:0}
.modal-actions{flex-direction:column-reverse}
.modal-actions button{width:100%}
}
/* Notch / barra di stato + modale a schermo pieno su telefono */
header{padding-top:calc(12px + env(safe-area-inset-top));padding-left:calc(20px + env(safe-area-inset-left));padding-right:calc(20px + env(safe-area-inset-right))}
@media(max-width:820px){
header{padding-top:calc(10px + env(safe-area-inset-top));padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right))}
.overlay{padding:0}
.modal{max-width:100%;width:100%;min-height:100vh;border-radius:0;overflow-x:hidden;padding:16px;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.modal .grid{grid-template-columns:1fr}
.modal input,.modal select,.modal textarea{max-width:100%}
.modal .grid > div[style*="display:flex"]{flex-wrap:wrap}
#ovConfirm{padding:16px}
#ovConfirm .modal{min-height:0;border-radius:14px;padding:20px}
}
/* Testo che va a capo nel modale su telefono (niente taglio a destra) */
@media(max-width:820px){
.modal p,.modal li,.modal td,.modal a,.modal .vval,.modal .vnote,.modal #viewBody{overflow-wrap:anywhere;word-break:break-word}
.modal #viewBody,.modal .vval{max-width:100%}
}
/* Sul telefono la casella "Cerca ovunque" si prendeva mezza barra in alto per
stare lì vuota. Diventa una lente: si tocca e la casella si apre a tutta
larghezza SOTTO la riga dei tasti (l'intestazione va già a capo da sola, e
`order` la manda in fondo), si richiude toccando di nuovo la lente. Su
schermo grande non cambia niente: lì lo spazio c'è e la casella resta. */
#cercaLente{display:none}
/* Header a sole icone su telefono + modale che non taglia il testo a destra */
header .lbl{margin-left:5px}
@media(max-width:820px){
header .lbl{display:none}
#cercaLente{display:inline-flex}
header #cercaTutto{display:none}
body.cerca-aperta header #cercaTutto{display:block;order:99;flex:1 1 100%;
max-width:none;min-width:0;margin-top:6px}
header button{padding:9px 11px}
.overlay{overflow-x:hidden}
.modal{min-width:0}
.modal *{min-width:0}
.modal .rte,.modal textarea,.modal input,.modal select{max-width:100%}
.modal .rte,.modal p,.modal li,.modal td,.modal .vval,.modal .vnote,.modal #viewBody,.modal .field{overflow-wrap:anywhere;word-break:break-word}
.step-add{flex-wrap:wrap}
}
/* Badge scadenza reale (weekend spostato a venerdì) */
.wkbadge{display:inline-block;margin-left:6px;font-size:11px;color:#92400e;background:#fef3c7;border-radius:6px;padding:1px 6px;white-space:nowrap}
/* Pulsante flottante assistente + tab modale */
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:54px;height:54px;border-radius:50%;background:var(--brand2);color:#fff;font-size:24px;line-height:1;border:none;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.28);z-index:40}
.fab:hover{filter:brightness(.95)}
.fab{cursor:grab} /* si trascina: la posizione la sceglie chi lo usa */
.fab:active{cursor:grabbing}
#ovAssist .btn-ghost.active{background:var(--brand2);color:#fff}
/* Dashboard */
.dash-row{padding:8px 4px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:6px}
.dash-row:hover{background:var(--hover)}
.dash-row:last-child{border-bottom:none}
/* Badge messaggi non letti sul pulsante flottante */
.fab-badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#e11d48;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--card)}
/* FAB mobile bottom-right (rinforzo, sopra la barra del browser) */
@media(max-width:820px){
.fab{right:16px;left:auto;top:auto;bottom:calc(20px + env(safe-area-inset-bottom));width:56px;height:56px;font-size:26px;z-index:45}
}
/* ---------- Risorse Umane (HR) ---------- */
.hr-summary{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}
.hr-chip{background:var(--card,#fff);border:1px solid var(--border,#e5e7eb);border-radius:999px;padding:6px 12px;font-size:13px;line-height:1.2}
.hr-chip.warn{border-color:#f59e0b;background:#fffbeb;color:#92400e}
[data-theme="dark"] .hr-chip.warn{background:#3b2f14;color:#fcd34d}
.hr-sub{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;border-bottom:1px solid var(--border,#e5e7eb);padding-bottom:8px}
.hrtab{background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 12px;cursor:pointer;font-size:14px;color:var(--muted,#6b7280)}
.hrtab:hover{background:var(--hover,#f3f4f6)}
.hrtab.active{background:var(--brand2,#2f6fb0);color:#fff}
/* Etichette/tag sui task */
.tagrow{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ttag{background:var(--brand2,#2f6fb0);color:#fff;border-radius:10px;padding:1px 8px;font-size:11px;cursor:pointer;opacity:.92}
.ttag:hover{opacity:1;filter:brightness(1.05)}
/* Timeline / Gantt */
.gantt{font-size:12px}
.gantt-row{display:flex;align-items:center;border-bottom:1px solid var(--border,#eee);min-height:30px}
.gantt-lab{width:210px;min-width:210px;padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gantt-track{position:relative;flex:1;height:24px}
.gantt-headrow{font-weight:600;position:sticky;top:0;background:var(--card,#fff);z-index:1}
.gantt-head{height:20px}
.gantt-tick{position:absolute;top:0;transform:translateX(-50%);color:var(--muted,#6b7280);font-size:11px;border-left:1px solid var(--border,#eee);padding-left:2px;height:100%}
.gantt-today{position:absolute;top:0;bottom:0;width:2px;background:#e11d48;z-index:2}
.gantt-bar{position:absolute;top:3px;height:18px;border-radius:4px;cursor:pointer;opacity:.9;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.gantt-bar:hover{opacity:1}
.gantt-bar.done{opacity:.45}
/* Commesse - dettaglio */
.cd-cards{display:flex;flex-wrap:wrap;gap:10px}
.cd-card{background:var(--hover,#f3f4f6);border-radius:8px;padding:8px 12px;min-width:120px;flex:1}
.cd-l{font-size:12px;color:var(--muted,#6b7280)}
.cd-v{font-size:18px;font-weight:700}
/* Timesheet */
.ts-table{border-collapse:collapse;font-size:11px;width:auto;border-radius:0;overflow:visible;box-shadow:none;background:transparent}
.ts-table th,.ts-table td{border:1px solid var(--line);padding:1px 2px;text-align:center}
.ts-table th{background:var(--brand,#1f4e78);color:#fff;font-weight:600;line-height:1.05}
.ts-table th.ts-day{min-width:22px}
.ts-table td.ts-name{position:sticky;left:0;background:var(--card);color:var(--ink);text-align:left;min-width:120px;white-space:nowrap;z-index:1;font-size:12px}
.ts-table th.ts-name{position:sticky;left:0;z-index:2;min-width:120px}
.ts-table td.ts-we{background:var(--hover)}
.ts-table input{width:26px;border:none;background:transparent;text-align:center;font-size:12px;padding:2px 0;color:var(--ink);-moz-appearance:textfield}
.ts-table input::-webkit-outer-spin-button,.ts-table input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ts-table input:focus{outline:1px solid var(--brand2,#2f6fb0)}
.ts-table td.ts-tot{min-width:36px;background:var(--hover);color:var(--ink);font-size:12px}
.ts-table tr:hover td{background:var(--hover)}
#tsGrid{max-width:100%}
/* TIMESHEET MOBILE: tabella orizzontale scorrevole (non a schede verticali) */
@media(max-width:820px){
.ts-table{display:table !important;width:auto !important}
.ts-table thead{display:table-header-group !important}
.ts-table tbody{display:table-row-group !important}
.ts-table tr{display:table-row !important;margin:0 !important;border:none !important;border-radius:0 !important;box-shadow:none !important;background:transparent !important}
.ts-table th,.ts-table td{display:table-cell !important;width:auto !important;text-align:center !important;border:1px solid var(--line) !important;padding:1px 2px !important;max-width:none !important}
.ts-table th{background:var(--brand,#1f4e78) !important;color:#fff !important}
.ts-table td::before{content:none !important;display:none !important}
.ts-table td.ts-name{position:sticky;left:0;text-align:left !important;min-width:120px;background:var(--card) !important;color:var(--ink) !important}
.ts-table td.ts-we{background:var(--hover) !important}
.ts-table td.ts-tot{background:var(--hover) !important}
.ts-table input{width:26px !important}
}
/* ---------- Stampa: si stampa solo l'area preparata ---------- */
#printArea { display: none; }
@media print {
/* niente trucchi di visibilità: nascondo davvero tutto tranne l'area di stampa,
così il flusso è normale e il contenuto va a capo pagina correttamente */
html, body { height: auto !important; min-height: 0 !important; overflow: visible !important;
background: #fff !important; color: #000 !important; margin: 0 !important; padding: 0 !important; }
body > *:not(#printArea) { display: none !important; }
#printArea { display: block !important; position: static !important; width: auto !important;
margin: 0 !important; padding: 0 !important; background: #fff !important; color: #000 !important;
font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 11px; }
#printArea * { visibility: visible !important; color: #000; box-shadow: none !important; }
#printArea a { text-decoration: none !important; }
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
#printArea table { width: 100% !important; min-width: 0 !important; border-collapse: collapse; font-size: 10.5px; page-break-inside: auto; }
#printArea thead { display: table-header-group !important; }
#printArea tbody { display: table-row-group !important; }
#printArea tr { display: table-row !important; page-break-inside: avoid; break-inside: avoid; }
#printArea th, #printArea td { display: table-cell !important; white-space: normal !important;
position: static !important; max-width: none !important; }
#printArea th { background: #eef1f6 !important; color: #111 !important; text-align: left;
border-bottom: 1.5px solid #999; padding: 4px 6px; font-size: 10px; text-transform: none; }
#printArea td { border-bottom: 1px solid #ddd; padding: 3px 6px; }
#printArea td::before { content: none !important; display: none !important; }
#printArea .pr-head { border-bottom: 2px solid #1f4e78; padding-bottom: 6px; margin-bottom: 10px;
display: flex; align-items: center; gap: 10px; }
#printArea .pr-head img { height: 34px; }
#printArea .pr-firme { margin-top: 26px; display: flex; gap: 40px; page-break-inside: avoid; }
#printArea .table-scroll { overflow: visible !important; border: none !important; background: none !important; }
/* con le larghezze regolate a mano quello che non entra si taglia:
si VEDE in anteprima, e si allarga la colonna invece di stampare storto */
#printArea .pr-fissa td { overflow: hidden; }
/* con le larghezze AUTOMATICHE invece il testo va a capo dentro la sua
colonna: niente tagli sui dati, al peggio una riga in piu */
#printArea .pr-auto td { overflow-wrap: break-word; }
#printArea .pr-auto th { overflow-wrap: normal; } /* le intestazioni intere, sempre */
.pr-grip { display: none !important; }
}
/* La maniglia per regolare le colonne, solo nell'anteprima di stampa */
.pr-grip { position: absolute; top: 0; right: -5px; width: 10px; height: 100%;
cursor: col-resize; user-select: none; touch-action: none; z-index: 5; }
.pr-grip:hover, .pr-grip.attiva { background: rgba(31,78,120,.28); border-radius: 3px; }
/* L'anteprima deve somigliare al foglio: stesso carattere piccolo e stesse
spaziature della stampa, altrimenti le colonne che regoli qui non sono
quelle che escono dalla stampante. */
#prPreview table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
#prPreview th { background: #eef1f6; color: #111; text-align: left; border-bottom: 1.5px solid #999;
padding: 4px 6px; font-size: 10px; text-transform: none; position: relative; }
#prPreview td { border-bottom: 1px solid #ddd; padding: 3px 6px; }
#prPreview .table-scroll { max-height: none !important; overflow: visible !important; border: none !important; }
#prPreview .pr-fissa td { overflow: hidden; }
#prPreview .pr-auto td, #prPreview .pr-auto th { overflow-wrap: break-word; }
/* ---------- Telefono: tabelle dati leggibili (scorrimento orizzontale) ---------- */
.scroll-hint{display:none}
@media(max-width:820px){
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.table-scroll::-webkit-scrollbar{height:6px}
.table-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
table.tbl-wide{display:table;width:max-content;min-width:100%;font-size:12px;border-collapse:collapse}
table.tbl-wide thead{display:table-header-group}
table.tbl-wide tbody{display:table-row-group}
table.tbl-wide tr{display:table-row;margin:0;border:none;border-radius:0;box-shadow:none;background:transparent}
table.tbl-wide th,table.tbl-wide td{display:table-cell;width:auto;max-width:none;white-space:nowrap;padding:7px 9px;text-align:left;border-bottom:1px solid var(--line)}
table.tbl-wide td::before{content:none;display:none}
table.tbl-wide th{background:var(--hover);font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;vertical-align:middle}
/* prima colonna sempre visibile mentre si scorre */
table.tbl-wide th:first-child,table.tbl-wide td:first-child{position:sticky;left:0;background:var(--card);z-index:1;box-shadow:1px 0 0 var(--line)}
table.tbl-wide th:first-child{background:var(--hover);z-index:3}
table.tbl-wide input,table.tbl-wide select{font-size:13px;padding:4px 6px;min-width:70px}
.scroll-hint{display:block;font-size:11px;color:var(--muted);margin:2px 2px 6px}
/* navigazione: tutte le voci visibili, su più righe compatte (niente voci nascoste) */
.tabs,#subTabs{flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tabs button,#subTabs button{flex:0 0 auto;white-space:nowrap;padding:7px 11px;font-size:13px}
#subTabs button{padding:6px 10px;font-size:12.5px}
/* filtri: due per riga, ricerca a tutta larghezza */
.bar{gap:8px}
.bar > select,.bar > input[type=date],.bar > input[type=month]{flex:1 1 calc(50% - 4px);min-width:0;font-size:14px}
.bar > input[type=search],.bar > input[type=text]{flex:1 1 100%;min-width:0}
.bar > button{flex:0 0 auto}
/* la barra dei filtri non deve mangiare mezzo schermo */
.bar{max-height:none}
.stats{gap:8px}
.stats > *{flex:1 1 46%;min-width:0}
.card-box{padding:12px}
h3{font-size:15px}
}
/* ---- Scheda movimento: due colonne che stanno dentro, senza scorrimento laterale ---- */
.cfmov-modal{box-sizing:border-box}
.cfmov-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;width:100%}
.cfmov-grid>.field{min-width:0;display:flex;flex-direction:column}
.cfmov-grid>.field>label{font-size:12px;color:#4b5563;margin-bottom:2px}
.cfmov-grid>.field input,.cfmov-grid>.field select,.cfmov-grid>.field textarea{width:100%;box-sizing:border-box;min-width:0}
.cfmov-grid>.field.full{grid-column:1 / -1}
@media(max-width:640px){.cfmov-grid{grid-template-columns:1fr}}
/* ---- Visualizzatore fattura elettronica — impianto AssoSoftware ---- */
/* L'anteprima della fattura riproduce un documento su carta: qui il nero su
bianco è il documento, non una svista, e resta tale anche in tema scuro. */
.fe-vista{font-family:"Segoe UI",Arial,Helvetica,sans-serif;font-size:12px;color:#000;background:#fff;line-height:1.35}
.fe-vista .fe-tit{text-align:center;border:1px solid #000;padding:6px;margin-bottom:6px}
.fe-vista .fe-tit1{font-size:17px;font-weight:700;letter-spacing:2px}
.fe-vista .fe-tit2{font-size:11px;color:#333;margin-top:1px}
.fe-vista .fe-band{background:#d9d9d9;border:1px solid #000;border-bottom:0;padding:3px 7px;font-weight:700;font-size:11.5px;margin-top:7px;text-transform:uppercase;letter-spacing:.4px}
.fe-vista .fe-det{margin:0}
.fe-vista .fe-det>summary{cursor:pointer;list-style:none}
.fe-vista .fe-det>summary::-webkit-details-marker{display:none}
.fe-vista .fe-det>summary::after{content:" ▸";font-size:10px}
.fe-vista .fe-det[open]>summary::after{content:" ▾"}
.fe-vista .fe-grid{border:1px solid #000;padding:4px 7px;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.fe-vista .fe-v{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dotted #ccc;padding:2px 0}
.fe-vista .fe-v span{color:#444}
.fe-vista .fe-v b{text-align:right}
.fe-vista .fe-sog{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:7px;align-items:stretch}
.fe-vista .fe-box{border:1px solid #000;display:flex;flex-direction:column}
.fe-vista .fe-box-h{background:#d9d9d9;border-bottom:1px solid #000;padding:3px 7px;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
.fe-vista .fe-box-b{padding:5px 7px;line-height:1.35;flex:1}
.fe-vista .fe-nome{font-weight:700;font-size:13px;margin-bottom:1px}
.fe-vista .fe-lab{color:#444;margin-right:4px}
.fe-vista .fe-causale{border:1px solid #000;border-top:0;padding:4px 7px;line-height:1.35;font-style:italic}
.fe-vista table.fe-t{width:100%;border-collapse:collapse;font-size:11.5px;border:1px solid #000}
.fe-vista table.fe-t th{background:#efefef !important;color:#000 !important;text-align:left;padding:3px 6px;border:1px solid #999;font-weight:700}
.fe-vista table.fe-t td{padding:3px 6px;border:1px solid #999;vertical-align:top;color:#000}
.fe-vista table.fe-t tbody tr:nth-child(even) td{background:#fff}
.fe-vista table.fe-t .r{text-align:right;white-space:nowrap}
.fe-vista .fe-sub{margin:6px 0 3px;font-weight:700;font-size:11.5px}
.fe-vista .fe-totale{display:flex;justify-content:flex-end;gap:12px;align-items:baseline;border:1px solid #000;border-top:0;padding:4px 7px;background:#efefef}
.fe-vista .fe-totale b{font-size:15px}
.fe-vista .mono{font-family:ui-monospace,Consolas,monospace;font-size:11px}
.fe-vista .fe-pie{margin-top:8px;font-size:11px;color:#555;border-top:1px solid #999;padding-top:4px}
@media(max-width:700px){.fe-vista .fe-grid{grid-template-columns:1fr}}
@media print{
/* i due soggetti restano affiancati e il foglio resta compatto */
.fe-vista{font-size:10.5px;line-height:1.28}
.fe-vista .fe-sog{grid-template-columns:1fr 1fr !important;gap:6px}
.fe-vista .fe-grid{grid-template-columns:1fr 1fr !important}
.fe-vista .fe-det{display:none} /* dati di trasmissione: non servono su carta */
.fe-vista .fe-pie{display:none} /* niente link "Scarica l'XML" in stampa */
.fe-vista .fe-band,.fe-vista .fe-box-h,.fe-vista table.fe-t th,.fe-vista .fe-totale{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.fe-vista table.fe-t{page-break-inside:auto}
.fe-vista table.fe-t tr,.fe-vista .fe-sog,.fe-vista .fe-totale{page-break-inside:avoid}
@page{margin:10mm}
}
/* ============================================================================
ASPETTO DA APPLICAZIONE
Le schede in fila facevano sembrare il gestionale un browser pieno di
linguette. Qui la navigazione diventa una colonna fissa a sinistra — sempre
nello stesso punto, con il marchio dell'azienda in cima, così non c'è mai
dubbio su quale delle due società si sta guardando. Sul telefono la colonna
non ci sta: diventa una barra in basso, come in qualunque app.
============================================================================ */
.side{
position:fixed;left:0;top:0;bottom:0;width:216px;z-index:30;
background:var(--brand);color:#fff;display:flex;flex-direction:column;
transition:width .18s ease;
}
.side-brand{
display:flex;align-items:center;gap:10px;padding:14px 14px 12px;
border-bottom:1px solid rgba(255,255,255,.14);min-height:64px;
}
.side-brand img{max-height:38px;max-width:150px;object-fit:contain;background:#fff;border-radius:6px;padding:3px}
.side-brand span{font-weight:700;font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side nav{flex:1;overflow-y:auto;padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.side nav button{
width:100%;justify-content:flex-start;gap:11px;background:transparent;color:rgba(255,255,255,.86);
border:none;border-radius:8px;padding:10px 12px;font-size:14px;font-weight:600;text-align:left;
}
.side nav button:hover{background:rgba(255,255,255,.12);color:#fff}
.side nav button.active{background:#fff;color:var(--brand)}
[data-theme="dark"] .side nav button.active{background:rgba(255,255,255,.18);color:#fff}
.side nav button .ico{width:20px;text-align:center;font-size:16px;flex:none}
.side-toggle{
background:transparent;color:rgba(255,255,255,.7);border:none;border-top:1px solid rgba(255,255,255,.14);
border-radius:0;padding:11px;font-size:13px;justify-content:center;gap:7px;
}
.side-toggle:hover{background:rgba(255,255,255,.1);color:#fff}
/* con il menu ridotto restano le sole icone: lo spazio va al lavoro, non al menu */
body.menu-stretto .side{width:60px}
body.menu-stretto .side-brand span,
body.menu-stretto .side nav button .lbl,
body.menu-stretto .side-toggle .lbl{display:none}
body.menu-stretto .side-brand{justify-content:center;padding:14px 6px}
body.menu-stretto .side-brand img{max-width:44px}
body.menu-stretto .side nav button{justify-content:center;padding:11px 0}
body.menu-stretto header,body.menu-stretto .wrap{margin-left:60px}
/* il contenuto si sposta di lato solo quando la barra c'è davvero */
body.con-menu header,body.con-menu .wrap{margin-left:216px;transition:margin-left .18s ease}
body.con-menu header{position:sticky;top:0;z-index:20}
@media(max-width:820px){
/* sul telefono la colonna diventa una barra in basso, con le sole icone */
.side{top:auto;right:0;width:auto;height:auto;flex-direction:row;
border-top:1px solid rgba(255,255,255,.14);padding-bottom:env(safe-area-inset-bottom)}
.side-brand,.side-toggle{display:none}
/* Sul telefono la barra in basso ha spazio per le sole sezioni: le schermate
recenti se lo mangiavano e restringevano le voci vere. Via del tutto — su
un telefono il tasto "indietro" fa già quel mestiere. Della ricerca resta
la sola lente, stretta, in fondo alla fila. */
.side-rec{display:none}
.side-vai{margin:0;padding:8px 6px;border-radius:0;background:transparent;flex:0 0 44px;
align-self:stretch;justify-content:center;border-left:1px solid rgba(255,255,255,.16)}
.side-vai .lbl,.side-vai .tasto{display:none}
.side-vai .ico{font-size:20px;width:auto}
/* La barra in basso è una fila di caselle UGUALI. Prima ogni voce era larga
quanto la sua parola: "Cash Flow" andava a capo su due righe e alzava tutta
la barra, "Sistema" restava tagliato a metà. Ora ogni voce prende la stessa
fetta (flex-basis 0, non "auto": è questo che le rende identiche) e il testo
sta su UNA riga, rimpicciolito quel tanto che basta a entrare. Se un giorno
una voce avrà un nome lunghissimo, i puntini la accorciano invece di
sfondare la fila. `overflow-x` resta auto solo come rete di sicurezza. */
.side nav{flex-direction:row;padding:4px 2px;gap:0;overflow-x:auto}
.side nav button{flex:1 1 0;min-width:0;flex-direction:column;gap:2px;padding:7px 1px;
font-size:10px;line-height:1.15;font-weight:600;text-align:center;border-radius:8px}
.side nav button .lbl{display:block;max-width:100%;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis;letter-spacing:-.2px}
.side nav button .ico{font-size:18px}
/* la lente è l'ultima casella della barra, non un riquadro per conto suo:
stessa altezza, nessuno sfondo e nessun angolo tondo che la stacchi */
.side-vai{flex:0 0 40px;background:transparent;border-radius:0;box-shadow:none;margin:0}
body.con-menu header,body.con-menu .wrap,body.menu-stretto header,body.menu-stretto .wrap{margin-left:0}
body.con-menu .wrap{padding-bottom:76px}
.fab{bottom:calc(78px + env(safe-area-inset-bottom))}
}
/* Con il marchio nella colonna, ripeterlo anche nella barra in alto è rumore:
la barra resta per la ricerca e i comandi personali. Sul telefono, dove la
colonna non c'è, il logo in alto serve ancora e resta. */
@media(min-width:821px){
body.con-menu header img.logo,body.con-menu header h1{display:none}
body.con-menu header{padding:9px 18px;background:var(--card);color:var(--ink);
border-bottom:1px solid var(--line)}
body.con-menu header .btn-ghost{background:transparent;border-color:var(--line)}
body.con-menu header #cercaTutto{background:var(--bg);border:1px solid var(--line);color:var(--ink)}
body.con-menu header #cercaTutto::placeholder{color:var(--muted)}
body.con-menu header .who{color:var(--muted)}
}
/* La riga "dove sono": il titolo grande della schermata e, sopra, il percorso
che ci porta. Sta appiccicata in alto quando si scorre, perché serve proprio
nel momento in cui la tabella è lunga e il resto è uscito dallo schermo. */
:root{--h-barra:0px;--h-dove:0px} /* quanto sono alte la barra in alto e la riga del titolo */
body.con-menu{--h-barra:54px} /* valore di scorta: quello vero lo misura misuraBarra() */
.dove{position:sticky;top:var(--h-barra);z-index:12;background:var(--bg);padding:8px 0 6px;margin:0 0 2px}
.dove .dove-riga{display:flex;align-items:center;gap:8px}
/* Il "?" è un tondino, senza la parola Guida: stesso significato, meno spazio */
/* Il tasto "?" e GRANDE QUANTO IL SUO PALLINO. C'erano due regole in lite:
una lo voleva tondo di 24px senza imbottitura, l'altra a pastiglia con
l'imbottitura per una scritta che non c'e mai stata. Risultato: un bordo
trasparente piu largo del pallino, invisibile finche non ci passavi sopra —
e allora spuntava un secondo cerchio piu grande. Una regola sola, e il
pallino blu E il tasto. */
.btn-guida{width:20px;height:20px;padding:0;border:0;background:transparent;
display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
flex:0 0 auto;vertical-align:middle;line-height:1}
/* La riga unica del Riepilogo: su schermo largo sta tutta su una riga,
sul telefono va a capo da sola senza perdere pezzi */
.riep-uno{flex-wrap:wrap}
/* ---------- Modalità dimostrazione ---------- */
#demoBanner{position:fixed;top:0;left:0;right:0;z-index:400;background:#7c3aed;color:#fff;
text-align:center;padding:6px 10px;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
#demoBanner .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
#demoTut{display:none}
#demoLuce{position:fixed;z-index:398;border:3px solid #7c3aed;border-radius:10px;
box-shadow:0 0 0 4000px rgba(15,23,42,.45);pointer-events:none;transition:all .35s ease;display:none}
#demoCard{position:fixed;z-index:401;left:50%;transform:translateX(-50%);max-width:480px;width:calc(100% - 32px);
background:var(--card);color:var(--ink);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.35);padding:14px 16px}
#demoCard h4{margin:0 0 6px;font-size:16px;color:#7c3aed}
#demoCard p{margin:0;font-size:13.5px;line-height:1.45}
@media(max-width:820px){ #demoCard{bottom:12px !important;top:auto !important} }
@media(max-width:820px){ .riep-uno #cfWInfo{margin-left:0;flex-basis:100%} }
.dove .via{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dove .via i{font-style:normal;opacity:.55}
.dove .via b{color:var(--brand2);font-weight:700}
.dove h2{margin:2px 0 0;font-size:21px;font-weight:700;color:var(--ink);line-height:1.2}
.dove .sotto{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
@media(max-width:820px){
.dove{position:static;padding:10px 0 8px}
.dove h2{font-size:18px}
}
/* La scheda aperta deve saltare all'occhio più delle altre, non un filo di più */
.hrtab.active{box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
/* le ultime schermate aperte, in fondo alla colonna */
.side-rec{padding:0 8px 6px}
.side-tit{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.45);
padding:10px 12px 5px;font-weight:700}
.side-rec button{width:100%;justify-content:flex-start;gap:11px;background:transparent;
color:rgba(255,255,255,.7);border:none;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:600;
text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.side-rec button:hover{background:rgba(255,255,255,.12);color:#fff}
.side-rec .ico{width:20px;text-align:center;flex:none;opacity:.7}
.side-vai{background:rgba(255,255,255,.1);color:#fff;border:none;border-radius:8px;margin:0 8px 8px;
padding:9px 12px;justify-content:flex-start;gap:10px;font-size:13px;font-weight:600}
.side-vai:hover{background:rgba(255,255,255,.2)}
.side-vai .ico{width:20px;text-align:center;font-size:15px}
.side-vai .tasto{margin-left:auto;font-size:10.5px;opacity:.6;border:1px solid rgba(255,255,255,.3);
border-radius:4px;padding:1px 5px;font-weight:600}
body.menu-stretto .side-rec,body.menu-stretto .side-vai .tasto{display:none}
body.menu-stretto .side-vai{justify-content:center;padding:9px 0}
/* la finestrella "Vai a…" */
.ov-vai{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:90;display:flex;
align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.vai-box{background:var(--card);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.3);
width:100%;max-width:520px;overflow:hidden}
.vai-box input{width:100%;border:none;border-bottom:1px solid var(--line);border-radius:0;
padding:16px 18px;font-size:16px;background:transparent}
.vai-box input:focus{outline:none}
.vai-ris{max-height:46vh;overflow-y:auto;padding:6px}
.vai-r{width:100%;display:flex;align-items:baseline;gap:10px;background:transparent;border:none;
border-radius:8px;padding:9px 12px;text-align:left;color:var(--ink);font-weight:600;font-size:14px}
.vai-r .v{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:600}
.vai-r:hover,.vai-r.sel{background:var(--ghost-hover)}
.vai-r.sel{box-shadow:inset 3px 0 0 var(--brand2)}
.vai-aiuto{border-top:1px solid var(--line);padding:9px 16px;font-size:11.5px;color:var(--muted)}
@media(max-width:820px){ .ov-vai{padding:8vh 10px 10px} }
/* La tendina che sta nella barra delle schede al posto di un bottone: deve
sembrare una scheda, non un campo di un modulo, altrimenti la barra si
spezza in due linguaggi diversi. */
.hrtab-sel{
border:1px solid var(--brand2);background:var(--brand2);color:#fff;border-radius:8px;
padding:7px 26px 7px 12px;font-size:12.5px;font-weight:600;font-family:inherit;
appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);
background-position:calc(100% - 14px) 51%,calc(100% - 9px) 51%;
background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.hrtab-sel:hover{filter:brightness(.94)}
.hrtab-sel option{background:var(--card);color:var(--ink)}
/* ---- correzioni di spazio -------------------------------------------------
1. Con il menu ridotto la pagina deve allargarsi davvero. La regola stava
prima di quella del menu largo e perdeva: stessa forza, ma scritta sopra.
Qui è più specifica e arriva dopo, quindi vince — e i 156 pixel liberati
vanno al contenuto, che è il motivo per cui si riduce il menu.
2. La ricerca resta una lente anche da computer: la scritta "Vai a…" diceva
una cosa che l'icona dice già.
3. Sul telefono la barra in alto non va a capo: i comandi restano in fila,
e se non ci stanno si scorre di lato invece di rubare una riga. */
body.con-menu.menu-stretto header,
body.con-menu.menu-stretto .wrap{margin-left:60px}
.side-vai .lbl{display:none}
.side-vai{justify-content:center;gap:0}
.side-vai .tasto{margin-left:8px}
body.menu-stretto .side-vai .tasto{display:none}
@media(max-width:820px){
/* Sul telefono il titolo in intestazione ruba lo spazio ai comandi e li
spinge fuori dallo schermo (non cliccabili): resta solo il logo. */
header h1{display:none}
header{flex-wrap:nowrap;overflow-x:auto;gap:7px;padding:9px 12px;-webkit-overflow-scrolling:touch}
header::-webkit-scrollbar{display:none}
header .btn-ghost{flex:0 0 auto;padding:7px 9px}
header .btn-ghost .lbl{display:none}
header img.logo{flex:0 0 auto}
header h1{font-size:15px;white-space:nowrap;flex:0 0 auto}
header #cercaTutto{flex:1 1 90px;min-width:80px}
header .who{display:none}
}
/* le icone disegnate: la misura la dà il contenitore, il colore lo eredita */
.side nav button .ico svg,.side-vai .ico svg{width:21px;height:21px;display:block}
.side nav button .ico{display:flex;align-items:center;justify-content:center}
@media(max-width:820px){ .side nav button .ico svg{width:23px;height:23px} }
/* i richiami in cima al riepilogo */
.riep-link{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.riep-arr{display:inline-flex;align-items:center;gap:7px;background:#fee2e2;color:#b91c1c;
border-radius:8px;padding:7px 12px;font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none}
.riep-arr:hover{background:#fecaca}
.riep-arr .bang{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
border-radius:50%;background:#e11d48;color:#fff;font-size:12.5px;font-weight:700;flex:none}
[data-theme="dark"] .riep-arr{background:#7f1d1d;color:#fecaca}
.riep-ok{font-size:13px;color:#059669;font-weight:600}
/* Il quadro d'ingresso del Cash Flow. Prima, entrando, si trovava una barra di
sei gruppi: un bivio, non una risposta. Ora la prima cosa è il riepilogo, e i
sei gruppi stanno sotto forma di riquadri con dentro le loro viste — comprese
quelle che in barra non ci sono (registro, arretrati, cronostoria). */
.cf-quadro{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;margin:0 0 16px}
.cf-quadro .qbox{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.cf-quadro .qtit{font-size:11.5px;font-weight:700;color:var(--brand2);text-transform:uppercase;
letter-spacing:.4px;margin:0 0 8px}
.cf-quadro .qvoci{display:flex;flex-wrap:wrap;gap:6px}
.cf-quadro .qv{background:transparent;border:1px solid var(--line);color:var(--ink);
border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:600}
.cf-quadro .qv:hover{background:var(--hover);border-color:var(--brand2);color:var(--brand2)}
@media(max-width:700px){.cf-quadro{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.cf-quadro{grid-template-columns:1fr}}
/* il tasto Guida accanto al titolo della schermata */
.dove-riga{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn-guida:hover .q{filter:brightness(1.12)}
.btn-guida:focus-visible{outline:2px solid var(--brand2);outline-offset:2px}
.btn-guida .q{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
border-radius:50%;background:var(--brand2);color:#fff;font-size:12px;font-weight:700;flex:none}
.guida-box{max-width:600px}
.guida-top{display:flex;align-items:center;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.guida-top h3{margin:0;font-size:16.5px;flex:1;color:var(--brand2)}
.guida-body{padding:16px 18px 20px;max-height:64vh;overflow-y:auto;font-size:14px;line-height:1.62}
.guida-body .g-cosa{margin:0 0 14px;font-size:15px}
.guida-body h4{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.guida-body ol{margin:0 0 14px;padding-left:20px}
.guida-body li{margin-bottom:6px}
.guida-body .g-nota{background:var(--hover);border-left:3px solid var(--brand2);border-radius:0 8px 8px 0;padding:11px 14px}
.guida-body .g-nota b{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.guida-body .g-nota p{margin:4px 0 0}
/* ---- il percorso della fattura, detto in chiaro --------------------------- */
.fl-box{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:4px 0;margin:10px 0 0}
.fl-tit{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
font-weight:700;padding:8px 14px 5px}
/* Su una riga sola, come chiesto: sono quattro avvisi brevi, e incolonnarli
su due righe faceva sembrare la schermata piu piena di quello che e.
Se non ci stanno, scorrono di lato invece di andare a capo. */
.fl-righe{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0}
.fl-righe>.fl-riga{flex:1 1 0;min-width:230px;border-top:none;border-left:1px solid var(--line)}
.fl-righe>.fl-riga:first-child{border-left:none}
.fl-riga{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid var(--line);min-width:0}
.fl-riga:first-of-type{border-top:none}
.fl-n{flex:none;min-width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:700;background:var(--tag-bg);color:var(--tag-ink)}
/* da computer stanno su due colonne: occupano metà altezza e si leggono uguale */
@media(min-width:1000px){
.fl-righe>.fl-riga{min-width:250px}
}
.fl-grave .fl-n{background:#fee2e2;color:#b91c1c}
.fl-att .fl-n{background:#fef3c7;color:#92400e}
.fl-norm .fl-n{background:#dbeafe;color:#1e40af}
[data-theme="dark"] .fl-grave .fl-n{background:#7f1d1d;color:#fecaca}
[data-theme="dark"] .fl-att .fl-n{background:#78350f;color:#fde68a}
[data-theme="dark"] .fl-norm .fl-n{background:#1e3a8a;color:#bfdbfe}
.fl-testo{flex:1;min-width:0;font-size:12.5px}
.fl-eur{font-weight:700;color:var(--brand2)}
.fl-spiega{color:var(--muted);font-size:11.5px;margin-top:1px;line-height:1.35}
.fl-ok{font-size:13px;color:#059669;font-weight:600;margin:10px 0 0}
/* dove sta una fattura: una parola, non un codice */
.tappo{display:inline-block;border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:700;white-space:nowrap}
.tap-new{background:#fef3c7;color:#92400e}
.tap-mezzo{background:#e0e7ff;color:#3730a3}
.tap-si{background:#dbeafe;color:#1e40af}
.tap-ok{background:#d1fae5;color:#065f46}
.tap-no{background:var(--tag-bg);color:var(--muted)}
[data-theme="dark"] .tap-new{background:#78350f;color:#fde68a}
[data-theme="dark"] .tap-mezzo{background:#312e81;color:#c7d2fe}
[data-theme="dark"] .tap-si{background:#1e3a8a;color:#bfdbfe}
[data-theme="dark"] .tap-ok{background:#064e3b;color:#a7f3d0}
.esito-azioni{padding:12px 18px 16px;border-top:1px solid var(--line);gap:8px}
.esito-l{margin:0;padding-left:20px}
.esito-l li{margin-bottom:7px}
.esito-l li.av{color:#92400e}
[data-theme="dark"] .esito-l li.av{color:#fde68a}
/* la finestra del riscontro pagamenti */
.risc-box{max-width:680px}
.risc-ok{background:#d1fae5;color:#065f46;border-radius:10px;padding:12px 14px;font-weight:700;font-size:13.5px}
[data-theme="dark"] .risc-ok{background:#064e3b;color:#a7f3d0}
.risc-al{border:2px solid;border-radius:10px;padding:12px 14px;font-size:13.5px}
.risc-comb{margin-top:12px;background:var(--hover);border-radius:10px;padding:11px 14px;font-size:13px}
.risc-l{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.risc-riga{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 13px}
.risc-imp{font-weight:700;font-size:14px;white-space:nowrap;min-width:88px}
.risc-mid{flex:1;min-width:0;font-size:13px}
.risc-cert{font-size:11.5px;font-weight:700;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
.risc-ind{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.risc-ind span{background:var(--tag-bg);color:var(--tag-ink);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:600}
/* ---- la dashboard a riquadri --------------------------------------------- */
.dash-griglia{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){ .dash-griglia{grid-template-columns:1fr 1fr} .dash-riq.largo{grid-column:1/-1} }
@media(min-width:1400px){ .dash-griglia{grid-template-columns:1fr 1fr 1fr} .dash-riq.largo{grid-column:span 2} }
.dash-riq{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-height:90px}
.dash-tit{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dash-tit h3{margin:0;font-size:14.5px;flex:1;color:var(--brand2)}
.dash-tit .btn-ghost{padding:4px 10px;font-size:12px}
.dash-cari{color:var(--muted);font-size:13px;padding:14px 0}
.dash-grande{font-size:30px;font-weight:700;letter-spacing:-.5px;line-height:1.1}
.dash-banche{display:flex;flex-wrap:wrap;gap:8px;margin:9px 0 0;font-size:12px}
.dash-banche span{background:var(--tag-bg);color:var(--tag-ink);border-radius:8px;padding:3px 9px}
.dash-ok{background:#d1fae5;color:#065f46;border-radius:9px;padding:9px 12px;font-size:12.5px;margin-top:10px}
.dash-all{background:#fee2e2;color:#b91c1c;border-radius:9px;padding:9px 12px;font-size:12.5px;margin-top:10px;font-weight:600}
[data-theme="dark"] .dash-ok{background:#064e3b;color:#a7f3d0}
[data-theme="dark"] .dash-all{background:#7f1d1d;color:#fecaca}
.dash-numeri{display:flex;gap:18px;margin-bottom:10px}
.dash-numeri div{display:flex;flex-direction:column}
.dash-numeri b{font-size:22px;font-weight:700;line-height:1.1}
.dash-numeri span{font-size:11.5px;color:var(--muted)}
.dash-tab{width:100%;font-size:13px}
.dash-tab td{padding:4px 0;border-bottom:1px solid var(--line)}
/* le anomalie in elenco */
.an-l{display:flex;flex-direction:column;gap:6px}
.an-riga{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;cursor:pointer;
border-left:3px solid var(--line);background:var(--hover)}
.an-riga:hover{background:var(--ghost-hover)}
.an-alta{border-left-color:#e11d48}
.an-media{border-left-color:#d97706}
.an-bassa{border-left-color:#94a3b8}
.an-n{flex:none;min-width:28px;text-align:center;font-size:15px;font-weight:700}
.an-alta .an-n{color:#b91c1c}
.an-media .an-n{color:#b45309}
.an-t{flex:1;min-width:0;font-size:13px}
.an-s{color:var(--muted);font-size:11.5px;margin-top:1px;line-height:1.35}
.an-sez{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
/* la scelta dei riquadri */
.pers-riga{display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--line);
border-radius:9px;margin-bottom:7px;cursor:pointer}
.pers-t{flex:1;display:flex;flex-direction:column;font-size:13.5px}
.pers-t .muted{font-size:11.5px;margin-top:1px}
.pers-f{display:flex;gap:4px}
.pers-f .btn-ghost{padding:2px 8px;font-size:13px}
/* le righe dentro i riquadri: una sola misura per tutte */
.dash-l{display:flex;flex-direction:column}
.dash-row{display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);
font-size:13px;line-height:1.4}
.dash-row:last-child{border-bottom:none}
.dash-row .muted{font-size:12px}
.dash-tot{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:13px;text-align:right}
/* ============================================================================
VISTA COMPATTA (predefinita) e VISTA CLASSICA (quella di prima)
L'app è in collaudo: il tasto "Vista" in alto passa dall'una all'altra per
confrontarle. La classica è la resa senza queste regole: per questo tutte
le regole della compatta stanno sotto body:not(.vista-classica), così
togliere la classe riporta esattamente a prima.
Cosa cambia nella compatta, e perché:
· righe più fitte: più fatture e movimenti nello stesso schermo;
· la riga si illumina intera al passaggio del mouse: si vede a colpo
d'occhio quale bottone appartiene a quale riga — era la lamentela
"le righe sono slegate";
· i bottoni delle azioni stanno su una riga sola e non si spezzano;
· righe alternate appena velate, per seguire la riga anche senza mouse.
========================================================================= */
body:not(.vista-classica) th,
body:not(.vista-classica) td{padding:6px 9px;font-size:13px}
body:not(.vista-classica) thead th{font-size:12px}
body:not(.vista-classica) tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--ink) 2.5%, transparent)}
body:not(.vista-classica) tbody tr:hover td{background:color-mix(in srgb, var(--brand) 7%, transparent)}
body:not(.vista-classica) td.act{white-space:nowrap}
/* i bottoni sono display:flex, cioè a blocco: in una cella-azioni andrebbero
uno sotto l'altro. In linea, affiancati, appartengono alla loro riga. */
body:not(.vista-classica) td.act button{display:inline-flex;vertical-align:top}
body:not(.vista-classica) td.act .btn-ghost,
body:not(.vista-classica) td.act .btn-danger{padding:4px 9px;font-size:12.5px}
/* le celle con la prima colonna appiccicata (telefono) hanno già uno sfondo:
la velatura alternata non deve renderle trasparenti */
@media(max-width:820px){
body:not(.vista-classica) table.tbl-wide td:first-child{background:var(--card)}
}
/* ============================================================================
TRE ASPETTI DEGLI ELENCHI (fatture, movimenti): elenco · tabella · schede
========================================================================= */
.asp-barra{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;vertical-align:middle}
.asp-barra button{border:0;border-radius:0;background:var(--card);color:var(--muted);padding:5px 12px;font-size:12.5px}
.asp-barra button.on{background:var(--brand);color:#fff}
/* — ELENCO: righe tutte alte uguali, testo su una riga, stile Stripe/Linear — */
.uno{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.el-lista{border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden}
.el-riga{display:flex;align-items:center;gap:10px;height:46px;padding:0 12px;border-bottom:1px solid var(--line);cursor:pointer}
.el-riga:last-child{border-bottom:0}
.el-riga:hover{background:color-mix(in srgb, var(--brand) 6%, transparent)}
.el-riga.avviso{box-shadow:inset 3px 0 0 #d97706}
.el-riga.imprevisto{box-shadow:inset 3px 0 0 #e11d48}
.el-chip{flex:0 0 74px;font-size:12px;font-weight:700}
.el-main{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.el-main .muted{font-size:11.5px}
/* la colonna di mezzo (tipologia · banca · paese) sta a destra, larghezza
fissa e allineata: prima galleggiava a metà riga e l'occhio non trovava
una colonna — ora tipologie, banche e importi sono incolonnati */
.el-extra{flex:0 0 220px;min-width:0;font-size:12.5px;color:var(--muted);text-align:right}
.el-imp{flex:0 0 110px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.el-st{flex:0 0 auto;min-width:104px;text-align:left;font-size:12px}
.el-az{flex:0 0 auto;display:flex;gap:4px;align-items:center}
.el-az .btn-ghost{padding:4px 10px;font-size:12.5px}
/* — menu ⋯ — */
.mnu{position:relative;display:inline-flex}
.mnu-b{min-width:34px;font-weight:700}
.mnu-l{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.18);padding:4px;min-width:170px}
/* questa regola viene DOPO .mnu-l e vince: senza, il display:flex qui sopra
scavalcava .hidden e la tendina restava sempre aperta dentro la riga */
.mnu-l.hidden{display:none}
.mnu-l button{background:transparent;color:var(--ink);border:0;border-radius:7px;text-align:left;padding:8px 10px;font-size:13px;font-weight:500;white-space:nowrap}
.mnu-l button:hover{background:var(--hover)}
/* — TABELLA rigida: le colonne di sempre ma nessuna cella va a capo — */
.asp-rigida td .uno{max-width:230px}
.asp-rigida td,.asp-rigida th{white-space:nowrap}
/* dodici colonne che non vanno a capo: il tetto per cella resta basso, o tre
colonne di testo (controparte, centro di costo, note) sfondano lo schermo */
.asp-rigida.asp-fitta td .uno{max-width:170px}
/* — SCHEDE: un riquadro per documento — */
.el-schede{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.el-scheda{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.el-scheda:hover{box-shadow:var(--shadow)}
.el-scheda.avviso{border-left:3px solid #d97706}
.el-scheda.imprevisto{border-left:3px solid #e11d48}
.el-sc-testa{display:flex;align-items:center;gap:8px}
.el-sc-piede{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
/* — telefono: l'elenco diventa due righe ordinate, non un accavallarsi — */
@media(max-width:820px){
.el-riga{height:auto;min-height:52px;flex-wrap:wrap;padding:8px 10px;row-gap:2px}
.el-chip{flex-basis:auto}
.el-main{flex:1 1 55%;order:1}
.el-imp{order:2;flex:0 0 auto;margin-left:auto}
.el-extra{display:none}
.el-st{order:3;flex-basis:auto}
.el-az{order:4;margin-left:auto}
}
/* — dashboard: le settimane a linguette (W0 = in corso) — */
.w-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.w-chip{border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:7px;padding:3px 9px;font-size:12px;font-weight:700}
.w-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.w-dett{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--hover);font-size:13px}
/* ============================================================================
TEMA "SEMPLICE" — il terzo, accanto a chiaro e scuro
----------------------------------------------------------------------------
Non è un altro colore: è la stessa applicazione detta più forte. Tre idee,
e nient'altro:
1. si legge senza sforzo — testo più grande, grigi più scuri, righe più
staccate. Il grigio chiaro su bianco è elegante e si legge male;
2. quello che si può toccare si VEDE che si può toccare — i tasti hanno
un bordo e si abbassano quando li premi, le righe si accendono al
passaggio, ogni cosa cliccabile ha la manina;
3. dove sei si capisce a colpo d'occhio — scheda attiva marcata, voce di
menu attiva piena, riquadri staccati dal fondo con un'ombra vera.
REGOLE DI SCRITTURA, per chi mette mano qui dopo:
· ogni regola è prefissata [data-theme="semplice"]: gli altri due temi non
si toccano, e si torna indietro col tasto Tema senza ricaricare niente;
· NON si ridefiniscono --brand e --brand2. Sono il colore dell'azienda e
arrivano dal server scritti in linea sull'elemento radice: da lì vincono
comunque su qualsiasi regola scritta qui, e devono vincere;
· tutto sta dentro @media screen, così la stampa resta quella di sempre;
· le misure dei tasti si scrivono sulle classi (.btn-primary, .act button),
mai sul tipo "button": dentro le tabelle i bottoni sono piccoli apposta.
============================================================================ */
@media screen{
[data-theme="semplice"]{
--bg:#eef2f7;--card:#ffffff;--ink:#0f172a;--muted:#4b5563;--line:#cbd5e1;
--hover:#e6effb;--ghost-hover:#e3ebf6;--tag-bg:#e2e8f0;--tag-ink:#1f2937;
--shadow:0 1px 2px rgba(15,23,42,.10),0 8px 20px rgba(15,23,42,.07);
}
/* --- 1. si legge --- */
[data-theme="semplice"] body{font-size:15px}
[data-theme="semplice"] th,[data-theme="semplice"] td{padding:12px 12px;font-size:14px}
[data-theme="semplice"] th{font-size:12.5px;letter-spacing:.3px}
[data-theme="semplice"] .muted{font-size:13px}
[data-theme="semplice"] .field label{font-size:13px;color:var(--ink);font-weight:700}
[data-theme="semplice"] .card-box h3,[data-theme="semplice"] .modal h2{font-size:17px}
/* --- 2. si vede che si tocca --- */
[data-theme="semplice"] .btn-primary,
[data-theme="semplice"] .btn-ghost,
[data-theme="semplice"] .btn-danger{
font-size:14px;padding:10px 16px;border-radius:10px;
transition:transform .07s ease,box-shadow .15s ease,background .15s ease,filter .15s ease}
[data-theme="semplice"] .btn-primary{box-shadow:0 2px 0 rgba(15,23,42,.22)}
[data-theme="semplice"] .btn-primary:hover{filter:brightness(1.07)}
[data-theme="semplice"] .btn-ghost{border-width:2px;font-weight:700}
[data-theme="semplice"] .btn-primary:active,
[data-theme="semplice"] .btn-ghost:active,
[data-theme="semplice"] .btn-danger:active{transform:translateY(1px);box-shadow:none}
/* i bottoni dentro le righe restano piccoli: crescono quel tanto che basta
a prenderli col dito, non tanto da sfondare la colonna Azioni */
[data-theme="semplice"] .act button,[data-theme="semplice"] td.act button{padding:7px 11px;font-size:13px}
/* qualunque cosa abbia un onclick è cliccabile: che si veda */
[data-theme="semplice"] [onclick]{cursor:pointer}
[data-theme="semplice"] td[onclick]:hover{background:var(--hover);font-weight:700}
/* il segno di dove si è col dito o col mouse, riga per riga */
[data-theme="semplice"] tbody tr:nth-child(even) td{background:#f6f9fd}
[data-theme="semplice"] tbody tr:hover td{background:var(--hover)}
[data-theme="semplice"] tbody tr:hover td:first-child{box-shadow:inset 4px 0 0 var(--brand2)}
/* il contorno di chi ha il fuoco: serve a chi va con la tastiera, e a
chiunque si perda dopo aver premuto Tab */
[data-theme="semplice"] button:focus-visible,
[data-theme="semplice"] a:focus-visible,
[data-theme="semplice"] input:focus-visible,
[data-theme="semplice"] select:focus-visible,
[data-theme="semplice"] textarea:focus-visible{outline:3px solid var(--brand2);outline-offset:2px}
/* --- 3. dove sono --- */
[data-theme="semplice"] .card-box{border-radius:14px;padding:18px;box-shadow:var(--shadow)}
[data-theme="semplice"] .side nav button{font-size:14px;padding:11px 12px;border-radius:10px}
[data-theme="semplice"] .side nav button.active{font-weight:800;box-shadow:0 3px 10px rgba(15,23,42,.25)}
[data-theme="semplice"] .hrtab{font-size:13.5px;padding:8px 14px;border-radius:10px;font-weight:700}
[data-theme="semplice"] .hrtab.active{box-shadow:0 2px 0 rgba(15,23,42,.22)}
[data-theme="semplice"] .stat{font-size:15px}
[data-theme="semplice"] .tag,[data-theme="semplice"] .pill{font-size:12px;padding:3px 10px}
/* i campi dei riquadri e delle barre: più grandi e col bordo che si vede.
NON si tocca "input" in generale — il contatore del carburante ha le sue
misure, e crescerebbe fuori dal quadrante. */
[data-theme="semplice"] .field input,[data-theme="semplice"] .field select,
[data-theme="semplice"] .field textarea,[data-theme="semplice"] .bar input,
[data-theme="semplice"] .bar select{font-size:14px;padding:10px 12px;border-width:2px;border-radius:10px}
/* chi ha chiesto meno movimento non lo subisce lo stesso */
@media (prefers-reduced-motion:reduce){
[data-theme="semplice"] .btn-primary,[data-theme="semplice"] .btn-ghost,
[data-theme="semplice"] .btn-danger{transition:none}
}
}
/* La scelta del tema: un elenco che si legge, non quattro tasti uguali in fila.
Non è prefissata da nessun tema — la maschera deve funzionare in tutti. */
.tema-scelta{width:100%;justify-content:flex-start;align-items:flex-start;gap:10px;
text-align:left;margin-bottom:8px;padding:12px 14px;line-height:1.5;font-weight:600}
.tema-scelta .ic{flex:none;margin-top:3px}
.tema-testo{display:block}
.tema-testo .muted{display:block;margin-top:2px;font-weight:400}
.tema-scelta.attivo{border-color:var(--brand2);box-shadow:inset 0 0 0 1px var(--brand2)}
/* ============================================================================
TEMA "A COLORI" — ogni sezione ha il suo colore, e se lo porta dietro
----------------------------------------------------------------------------
L'idea è una sola: in un gestionale con trenta schermate la domanda vera non
è "che tasto premo", è "dove sono finito". Qui la risposta la dà il colore,
prima che il titolo. Cash Flow verde, Attività blu, Personale viola,
Contratti ambra, Sistema ardesia — e quel colore tinge le intestazioni delle
tabelle, la scheda aperta, la voce di menu attiva, il bordo delle schede, il
tasto dell'azione principale e la riga sotto il mouse.
COME FUNZIONA: showTab() scrive la sezione in body[data-sez]; qui sotto ogni
sezione ridefinisce --sez (il colore pieno) e --sez-chiaro (la sua velatura).
Tutto il resto del tema usa quelle due variabili e non sa niente di sezioni:
per aggiungerne una domani basta una riga qui.
REGOLE, per chi mette mano dopo:
· densità decisa schermata per schermata, come chiesto: le tabelle restano
fitte (lì si guardano i numeri), schede e maschere prendono aria (lì si
decide), e sul telefono i tasti crescono;
· --brand/--brand2 NON si toccano: arrivano dal server scritti in linea e
vincono comunque. Qui si dipinge con --sez, che è roba nostra;
· alcune regole hanno il selettore doppio (con e senza body.con-menu) perché
la regola del menu laterale è più forte e altrimenti vincerebbe lei;
· tutto dentro @media screen: la stampa resta in bianco e nero come deve.
============================================================================ */
@media screen{
[data-theme="colori"]{
--bg:#f1f5f9;--card:#ffffff;--ink:#0f172a;--muted:#475569;--line:#d9e1ea;
--hover:#eef4fb;--ghost-hover:#e9eff7;--tag-bg:#e8edf4;--tag-ink:#334155;
--shadow:0 1px 2px rgba(15,23,42,.07),0 10px 24px rgba(15,23,42,.06);
--sez:#334155;--sez-chiaro:#e9edf3; /* prima che si entri in una sezione */
}
/* La tabella dei colori di sezione la usano DUE temi — "a colori" e "moderno":
stessa idea (il colore dice dove sei), disegno diverso. Sta scritta una
volta sola, con i due selettori appaiati: un colore nuovo entra in tutti e
due insieme e non si scordano allineati. */
[data-theme="colori"] body[data-sez="dashboard"],[data-theme="moderno"] body[data-sez="dashboard"]{--sez:#334155;--sez-chiaro:#e8ecf2}
[data-theme="colori"] body[data-sez="attivita"],[data-theme="moderno"] body[data-sez="attivita"]{--sez:#1d4ed8;--sez-chiaro:#e6edff}
[data-theme="colori"] body[data-sez="cf"],[data-theme="moderno"] body[data-sez="cf"]{--sez:#0f766e;--sez-chiaro:#dcf4f0}
[data-theme="colori"] body[data-sez="archivio"],[data-theme="moderno"] body[data-sez="archivio"]{--sez:#b45309;--sez-chiaro:#fcf0dc}
[data-theme="colori"] body[data-sez="personale"],[data-theme="moderno"] body[data-sez="personale"]{--sez:#7c3aed;--sez-chiaro:#f1e9ff}
[data-theme="colori"] body[data-sez="sistema"],[data-theme="moderno"] body[data-sez="sistema"]{--sez:#475569;--sez-chiaro:#eaeef3}
/* --- il menu: neutro scuro, così i colori si vedono --- */
[data-theme="colori"] .side{background:#0f172a;color:#e2e8f0}
[data-theme="colori"] .side nav button{color:#cbd5e1;border-radius:10px}
[data-theme="colori"] .side nav button:hover{background:rgba(255,255,255,.10);color:#fff}
[data-theme="colori"] .side nav button.active{background:var(--sez);color:#fff;
box-shadow:0 2px 10px rgba(15,23,42,.40)}
/* --- la barra in alto: chiara, con la riga di colore della sezione sotto --- */
[data-theme="colori"] header,
[data-theme="colori"] body.con-menu header{background:var(--card);color:var(--ink);
border-bottom:3px solid var(--sez)}
[data-theme="colori"] header h1{color:var(--ink)}
[data-theme="colori"] header .who{color:var(--muted)}
/* --- la riga "dove sono": è lei che grida il colore --- */
[data-theme="colori"] .dove{background:var(--sez-chiaro);border-left:5px solid var(--sez);
border-radius:0 10px 10px 0;padding:10px 12px 8px}
[data-theme="colori"] .dove .via b{color:var(--sez)}
[data-theme="colori"] .dove h2{color:var(--ink)}
/* --- schede, tabelle, tasti: lo stesso colore, dappertutto --- */
[data-theme="colori"] th{background:var(--sez)}
[data-theme="colori"] th:hover{background:var(--sez);filter:brightness(1.18)}
[data-theme="colori"] .hrtab{border-radius:999px;font-weight:700}
[data-theme="colori"] .hrtab.active{background:var(--sez);border-color:var(--sez);color:#fff}
[data-theme="colori"] .btn-primary{background:var(--sez)}
[data-theme="colori"] .fab{background:var(--sez)}
[data-theme="colori"] a{color:var(--sez)}
[data-theme="colori"] .card-box{border-top:3px solid var(--sez);border-radius:12px;
padding:18px;box-shadow:var(--shadow)}
[data-theme="colori"] .card-box h3,[data-theme="colori"] .modal h2{color:var(--sez)}
[data-theme="colori"] .cal .cal-d.today{border-color:var(--sez)}
[data-theme="colori"] .cal .cal-d.today .dn{color:var(--sez)}
[data-theme="colori"] .cal .cev{border-left-color:var(--sez)}
[data-theme="colori"] .cf-quadro .qtit{color:var(--sez)}
[data-theme="colori"] .cf-quadro .qv:hover{border-color:var(--sez);color:var(--sez)}
[data-theme="colori"] .w-chip.on{background:var(--sez);border-color:var(--sez)}
/* --- le righe: fitte, ma non si sbaglia mai riga --- */
[data-theme="colori"] tbody tr:nth-child(even) td{background:#f8fafc}
[data-theme="colori"] tbody tr:hover td{background:var(--sez-chiaro)}
[data-theme="colori"] tbody tr:hover td:first-child{box-shadow:inset 4px 0 0 var(--sez)}
[data-theme="colori"] [onclick]{cursor:pointer}
[data-theme="colori"] button:focus-visible,[data-theme="colori"] a:focus-visible,
[data-theme="colori"] input:focus-visible,[data-theme="colori"] select:focus-visible,
[data-theme="colori"] textarea:focus-visible{outline:3px solid var(--sez);outline-offset:2px}
/* --- densità: aria dove si decide, niente sprechi dove si legge --- */
[data-theme="colori"] .field label{font-weight:700;color:var(--ink)}
[data-theme="colori"] .modal{border-radius:16px;border-top:4px solid var(--sez)}
/* sul telefono i tasti si prendono col dito, non con la punta dell'unghia */
@media(max-width:820px){
[data-theme="colori"] .btn-primary,[data-theme="colori"] .btn-ghost,
[data-theme="colori"] .btn-danger{padding:11px 15px;font-size:14px}
[data-theme="colori"] .dove{border-radius:10px;margin-bottom:6px}
}
}
/* ============================================================================
TEMA "MODERNO" — qui non cambia il colore, cambia la FORMA
----------------------------------------------------------------------------
I due temi prima ridipingevano la stessa applicazione: stessa griglia, stessa
barra scura sopra le colonne, stessi riquadri squadrati. Questo la ridisegna.
Quattro cose, e da lì discende tutto il resto:
1. LA GRIGLIA SPARISCE. Le tabelle non sono più un reticolo di bordi: ogni
riga diventa una scheda bianca che galleggia sul fondo, staccata dalle
altre. Si segue una riga con l'occhio senza righello.
2. LE INTESTAZIONI SI FANNO DA PARTE. Via la fascia di colore sopra le
colonne: restano etichette piccole in maiuscoletto, grigie. Il colore
serve ai dati, non ai titoli delle colonne.
3. TUTTO GALLEGGIA. Il menu diventa un'isola staccata dal bordo, la barra
in alto è velata e lascia intravedere quello che le scorre sotto, i
riquadri hanno angoli larghi e ombre morbide invece dei bordi.
4. I NUMERI CONTANO. Cifre a larghezza fissa (le colonne di importi si
incolonnano davvero), titoli grandi, tasti a pastiglia.
Il colore della sezione resta — l'ha scelto Mario e funziona — ma qui è un
accento: il pallino accanto al titolo, la scheda aperta, il tasto principale,
la riga sotto il mouse. Non più una vernice sopra tutto.
ATTENZIONE, per chi mette mano dopo:
· le "righe a scheda" NON si applicano a .ts-table (il timesheet è una griglia
fitta e deve restarlo), a .tbl-wide (ha la prima colonna appiccicata) e a
.fe-t (il facsimile della fattura, che riproduce un foglio di carta);
· border-collapse passa a "separate": senza, border-spacing non fa niente e
le righe restano incollate;
· Gantt e calendario sono fatti di div, non di tabelle: non li tocca;
· tutto dentro @media screen — la stampa resta identica.
============================================================================ */
@media screen{
[data-theme="moderno"]{
--bg:#e9eef5;--card:#ffffff;--ink:#0b1220;--muted:#5b6b80;--line:#e3e9f0;
--hover:#f2f6fc;--ghost-hover:#eef2f8;--tag-bg:#eef2f7;--tag-ink:#334155;
--shadow:0 1px 2px rgba(11,18,32,.05),0 10px 30px rgba(11,18,32,.07);
--sez:#334155;--sez-chiaro:#e9edf3;
--isola:22px; /* l'angolo largo che ricorre ovunque */
}
[data-theme="moderno"] body{font-size:14.5px}
[data-theme="moderno"] .wrap{padding:24px 26px}
/* --- 1. le righe diventano schede --- */
/* SULL'OMBRA. La prima versione aveva 9 pixel di sfocatura: su un fondo chiaro
quella sfocatura si vede ANCHE AI LATI, e sembra un bordino grigio attaccato
alla scheda — Mario l'ha visto subito e ha chiesto che cosa fosse. Non era
un bordo: era l'alone dell'ombra. Ora l'ombra e un filo di un pixel SOTTO,
senza sfocatura: le schede restano staccate (ci pensa lo spazio fra le
righe) e ai lati non c'e piu niente da vedere.
Regola: su fondo chiaro, l'ombra di una riga si sente ma non si guarda. */
[data-theme="moderno"] table:not(.ts-table):not(.tbl-wide):not(.fe-t){
border-collapse:separate;border-spacing:0 6px;background:transparent;box-shadow:none;border-radius:0}
[data-theme="moderno"] table:not(.ts-table):not(.tbl-wide):not(.fe-t) tbody tr{
box-shadow:0 1px 0 rgba(11,18,32,.07)} /* vedi nota qui sotto */
[data-theme="moderno"] table:not(.ts-table):not(.tbl-wide):not(.fe-t) tbody td{
background:var(--card);border-bottom:none;padding:14px 12px;font-variant-numeric:tabular-nums}
[data-theme="moderno"] table:not(.ts-table):not(.tbl-wide):not(.fe-t) tbody tr td:first-child{
border-radius:14px 0 0 14px;padding-left:16px}
[data-theme="moderno"] table:not(.ts-table):not(.tbl-wide):not(.fe-t) tbody tr td:last-child{
border-radius:0 14px 14px 0;padding-right:16px}
[data-theme="moderno"] table:not(.ts-table):not(.tbl-wide):not(.fe-t) tbody tr:hover td{
background:var(--sez-chiaro)}
/* Le righe colorate (sintesi, totali, gruppi) devono battere il bianco della
scheda, che qui pesa (0,4,3): stessa forma di selettore, piu la classe. */
[data-theme="moderno"] table:not(.ts-table):not(.tbl-wide):not(.fe-t) tbody tr.r-tenue>td{background:var(--hover)}
[data-theme="moderno"] table:not(.ts-table):not(.tbl-wide):not(.fe-t) tbody tr.r-tot>td{background:#eef2f7;font-weight:700}
[data-theme="moderno"] table:not(.ts-table):not(.tbl-wide):not(.fe-t) tbody tr.r-gruppo>td{background:rgba(47,109,179,.07);font-weight:700}
[data-theme="moderno"] table:not(.ts-table):not(.tbl-wide):not(.fe-t) tbody tr:hover td:first-child{
box-shadow:inset 4px 0 0 var(--sez)}
/* La riga zebrata della vista compatta qui NON va: con le schede staccate una
riga su due usciva grigia e le schede sembravano di due tipi diversi. La
zebratura serve a non perdere la riga in una griglia fitta; qui quel lavoro
lo fanno già lo stacco e l'ombra. Selettore più lungo dell'originale perché
quello pesa (0,2,4) e vincerebbe. Sta PRIMA delle regole di :hover, così
l'evidenziazione del passaggio del mouse resta più forte. */
[data-theme="moderno"] body:not(.vista-classica) tbody tr:nth-child(even) td{background:var(--card)}
/* Le tabelle dei dati veri (Registro, Fatture, Contratti…) portano .tbl-wide,
e TUTTE le regole di quella classe vivono dentro @media(max-width:820px):
sul telefono sono una griglia fitta con la prima colonna appiccicata, e
devono restarlo. Su schermo grande la classe non fa niente — quindi lì le
righe-scheda ci vanno, ed è esattamente dove servono. Escluderla in blocco
(primo giro) voleva dire non vedere il tema proprio dove si lavora. */
@media(min-width:821px){
[data-theme="moderno"] table.tbl-wide{
border-collapse:separate;border-spacing:0 6px;background:transparent;box-shadow:none;border-radius:0}
[data-theme="moderno"] table.tbl-wide tbody tr{
box-shadow:0 1px 0 rgba(11,18,32,.07)} /* vedi nota qui sotto */
[data-theme="moderno"] table.tbl-wide tbody td{
background:var(--card);border-bottom:none;padding:14px 12px;font-variant-numeric:tabular-nums}
[data-theme="moderno"] table.tbl-wide tbody tr td:first-child{border-radius:14px 0 0 14px;padding-left:16px}
[data-theme="moderno"] table.tbl-wide tbody tr td:last-child{border-radius:0 14px 14px 0;padding-right:16px}
[data-theme="moderno"] table.tbl-wide tbody tr:hover td{background:var(--sez-chiaro)}
[data-theme="moderno"] table.tbl-wide tbody tr.r-tenue>td{background:var(--hover)}
[data-theme="moderno"] table.tbl-wide tbody tr.r-tot>td{background:#eef2f7;font-weight:700}
[data-theme="moderno"] table.tbl-wide tbody tr.r-gruppo>td{background:rgba(47,109,179,.07);font-weight:700}
[data-theme="moderno"] table.tbl-wide tbody tr:hover td:first-child{box-shadow:inset 4px 0 0 var(--sez)}
}
/* --- 2. le intestazioni si tolgono di mezzo --- */
/* L'intestazione delle colonne sta STRETTA e attaccata a quello che spiega:
era una riga alta quanto le altre, e con lo stacco fra le righe-scheda
sembrava un blocco a se invece del cappello della tabella. */
/* Il selettore e doppio APPOSTA: `body:not(.vista-classica) th` (la vista
compatta) pesa piu di `[data-theme] th`, e vinceva lei — l'intestazione
restava alta e grigia come le altre righe. Qui si pareggia il conto. */
[data-theme="moderno"] th,
[data-theme="moderno"] body:not(.vista-classica) th{background:transparent;color:var(--muted);
border-bottom:none;font-size:10.5px;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;padding:0 12px 1px;line-height:1.25}
[data-theme="moderno"] th:hover{background:transparent;color:var(--sez)}
/* --- 3. tutto galleggia --- */
[data-theme="moderno"] .side{left:14px;top:14px;bottom:14px;width:196px;
border-radius:var(--isola);background:#0b1220;color:#e5eaf2;
box-shadow:0 18px 40px rgba(11,18,32,.28);overflow:hidden}
/* Col menu ridotto a sole icone il contenuto si sposta a 60px: l'isola deve
stringersi insieme a lui, o resta larga e ci finisce sotto. La regola di
base (body.menu-stretto .side) pesa quanto la mia, e vincerebbe l'ultima
scritta: serve un selettore più forte, non l'ordine. */
@media(min-width:821px){
[data-theme="moderno"] body.menu-stretto .side{left:6px;width:48px}
}
[data-theme="moderno"] .side nav button{border-radius:12px;color:#c3ccda}
[data-theme="moderno"] .side nav button:hover{background:rgba(255,255,255,.10);color:#fff}
[data-theme="moderno"] .side nav button.active{background:var(--sez);color:#fff}
/* La barra in alto finiva con gli angoli vivi accanto all'isola del menu, che
e stondata: tre trattamenti diversi (nero stondato, grigio del fondo, bianco
squadrato) a un centimetro l'uno dall'altro. Ora si chiude in basso con lo
stesso raggio delle isole, e il taglio netto sparisce. */
[data-theme="moderno"] header,
[data-theme="moderno"] body.con-menu header{background:rgba(255,255,255,.86);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
color:var(--ink);border-bottom:1px solid var(--line);
border-radius:0 0 18px 18px}
[data-theme="moderno"] header h1{color:var(--ink)}
[data-theme="moderno"] header .who{color:var(--muted)}
[data-theme="moderno"] .card-box{border:none;border-radius:var(--isola);padding:20px;
box-shadow:var(--shadow)}
[data-theme="moderno"] .stat{border:none;border-radius:16px;padding:14px 16px;box-shadow:var(--shadow)}
[data-theme="moderno"] .stat b{font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
[data-theme="moderno"] .stat span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
[data-theme="moderno"] .modal{border-radius:26px;padding:26px}
[data-theme="moderno"] .kcol{border:none;border-radius:18px;box-shadow:var(--shadow);background:var(--card)}
[data-theme="moderno"] .kcard{border:none;border-radius:14px;box-shadow:0 1px 2px rgba(11,18,32,.06),0 6px 16px rgba(11,18,32,.06)}
/* --- 4. i numeri e i comandi --- */
[data-theme="moderno"] .btn-primary,[data-theme="moderno"] .btn-ghost,
[data-theme="moderno"] .btn-danger{border-radius:999px;padding:10px 18px;font-size:13.5px;
transition:transform .07s ease,box-shadow .15s ease,filter .15s ease}
[data-theme="moderno"] .btn-primary{background:var(--sez);box-shadow:0 6px 16px rgba(11,18,32,.18)}
[data-theme="moderno"] .btn-primary:hover{filter:brightness(1.08)}
[data-theme="moderno"] .btn-primary:active,[data-theme="moderno"] .btn-ghost:active{transform:translateY(1px)}
[data-theme="moderno"] .btn-ghost{border:1px solid var(--line);box-shadow:0 1px 2px rgba(11,18,32,.04)}
[data-theme="moderno"] .act button,[data-theme="moderno"] td.act button{padding:6px 12px;font-size:12.5px}
[data-theme="moderno"] input,[data-theme="moderno"] select,[data-theme="moderno"] textarea{border-radius:12px}
[data-theme="moderno"] .tag,[data-theme="moderno"] .pill,[data-theme="moderno"] .hrtab{border-radius:999px}
[data-theme="moderno"] .hrtab.active{background:var(--sez);border-color:var(--sez);color:#fff;box-shadow:none}
[data-theme="moderno"] .fab{background:var(--sez)}
[data-theme="moderno"] a{color:var(--sez)}
/* il titolo della schermata: grande, con il pallino della sezione davanti */
[data-theme="moderno"] .dove{background:var(--bg)}
[data-theme="moderno"] .dove h2{font-size:27px;font-weight:800;letter-spacing:-.02em}
[data-theme="moderno"] .dove .via{text-transform:uppercase;letter-spacing:.08em;font-size:11px}
[data-theme="moderno"] .dove .via b{color:var(--sez)}
[data-theme="moderno"] .dove .via::before{content:"";width:9px;height:9px;border-radius:50%;
background:var(--sez);flex:none;box-shadow:0 0 0 3px var(--sez-chiaro)}
/* LE INTESTAZIONI RESTANO. Nel Riepilogo ci sono 23 righe e otto settimane in
colonna: scendendo si perdeva la riga dei titoli e non si sapeva più quale
settimana si stesse leggendo. Ora le intestazioni si fermano esattamente
sotto la riga del titolo — l'altezza la misura misuraBarra(), non è un
numero scritto a mano. Solo dentro .wrap: dentro una maschera la tabella
scorre da sé e un'intestazione appiccicata resterebbe a mezz'aria.
z-index 11 = sotto la riga "dove sono" (12) e sotto la barra (20). */
@media(min-width:821px){
/* Perché serve anche questa riga: .table-scroll ha overflow-x:auto, e per le
regole del CSS basta un asse per rendere "auto" anche l'altro — il che
trasforma il riquadro in un contenitore che scorre e ci imprigiona dentro
lo sticky (è la trappola che prova-css.js sorveglia da un'altra parte).
Su schermo grande quel riquadro non serve: .tbl-wide diventa larga quanto
il contenuto SOLO sul telefono, quindi qui le tabelle ci stanno già.
Misurato sul Riepilogo: tabella 1548px dentro un riquadro di 1548px. */
[data-theme="moderno"] .wrap .table-scroll{overflow:visible}
/* ECCEZIONE, e non e un dettaglio: un riquadro con una MAX-HEIGHT e stato
fatto apposta per scorrere dentro il suo spazio. Togliergli l'overflow
non lo allarga, gli fa TRABOCCARE il contenuto sopra quello che sta
sotto — nella Distinta l'elenco delle fatture fresche finiva stampato
sopra la tabella dei pagamenti, testo su testo. Erano 18 riquadri in
giro per l'app; gli altri 21 si salvavano solo perche qualcuno aveva
scritto overflow:auto a mano. Qui si sistemano tutti in una riga. */
[data-theme="moderno"] .wrap .table-scroll[style*="max-height"]{overflow:auto}
/* E dentro un riquadro che scorre l'intestazione si attacca al bordo DEL
RIQUADRO, non a quello della pagina: con l'offset della barra restava
sospesa a meta, stampata sopra le righe. */
[data-theme="moderno"] .wrap .table-scroll[style*="max-height"] table:not(.ts-table) thead th{top:0}
[data-theme="moderno"] .wrap table:not(.ts-table) thead th{
position:sticky;top:calc(var(--h-barra) + var(--h-dove));z-index:11;
background:var(--bg);box-shadow:0 1px 0 var(--line)}
}
/* Nella finestrella i tasti a pastiglia erano troppo larghi e andavano a capo
sfalsati (visto nel "Registro presenza"): lì si stringono. */
[data-theme="moderno"] .modal button{padding:9px 15px}
/* "LEASYS ITALIA S.P.A. – PAGAMEN…" con trecento pixel di bianco lì accanto.
Il taglio non è della colonna: dentro la cella c'è uno span.uno con un tetto
fisso di 230px (.asp-rigida td .uno), misura pensata per schermi piccoli.
Misurato qui: cella 332px, testo tagliato a 230. Sopra i 1200px il tetto si
alza — non si toglie, o una descrizione lunghissima spingerebbe fuori le
colonne dei numeri. Il testo intero è già nel DOM: non si perde niente. */
@media(min-width:1200px){
[data-theme="moderno"] .asp-rigida:not(.asp-fitta) td .uno{max-width:460px}
/* nella tabella fitta (Elettroniche: dodici colonne) il tetto alto faceva
sfondare lo schermo: qui si resta stretti anche sui monitor larghi */
[data-theme="moderno"] .asp-rigida.asp-fitta td .uno{max-width:190px}
}
[data-theme="moderno"] button:focus-visible,[data-theme="moderno"] a:focus-visible,
[data-theme="moderno"] input:focus-visible,[data-theme="moderno"] select:focus-visible,
[data-theme="moderno"] textarea:focus-visible{outline:3px solid var(--sez);outline-offset:2px}
[data-theme="moderno"] [onclick]{cursor:pointer}
@media(max-width:820px){
/* sul telefono l'isola del menu diventa una pastiglia staccata dai bordi */
[data-theme="moderno"] .side{left:10px;right:10px;bottom:10px;top:auto;width:auto;
border-radius:20px;box-shadow:0 10px 30px rgba(11,18,32,.32)}
[data-theme="moderno"] body.con-menu .wrap{padding-bottom:92px}
[data-theme="moderno"] .wrap{padding:16px 14px}
[data-theme="moderno"] .dove h2{font-size:22px}
[data-theme="moderno"] .btn-primary,[data-theme="moderno"] .btn-ghost,
[data-theme="moderno"] .btn-danger{padding:11px 18px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
[data-theme="moderno"] .btn-primary,[data-theme="moderno"] .btn-ghost,
[data-theme="moderno"] .btn-danger{transition:none}
}
}
/* ---------------------------------------------------------------------------
TINTE DI RIGA — sempre sulle CELLE, mai sul
Nel tema "moderno" ogni riga e una scheda: sono le celle ad avere lo sfondo e
gli angoli tondi alle due estremita. Uno sfondo messo sul
resta DIETRO le
celle e non si arrotonda: si vede spuntare un rettangolo grigio con gli angoli
vivi sotto una scheda stondata. E il difetto che si vedeva nel Riepilogo.
Regola: per colorare una riga si usa una di queste classi, che dipingono le
celle. Se qualcuno rimette uno sfondo sul
, la rete di sicurezza qui sotto
lo spegne: meglio una riga non colorata che una scheda rotta.
--------------------------------------------------------------------------- */
tr.r-tenue > td{background:var(--hover)}
tr.r-tot > td{background:#eef2f7;font-weight:700}
tr.r-gruppo > td{background:rgba(47,109,179,.07);font-weight:700}
[data-theme="moderno"] tbody tr[style*="background"]{background:transparent}
/* ---------------------------------------------------------------------------
LE RATE DENTRO IL CASH FLOW
In un registro di trecento righe la domanda "quali sono le rate dei piani?"
non deve costare una lettura riga per riga: hanno un colore loro, il viola
che l'app usa gia per le rate. Vale per tutte e tre le rese (elenco, schede,
tabella) e, come ogni tinta di riga, si dipinge sulle CELLE e mai sul
(nel tema moderno la riga e una scheda: uno sfondo sul
spunta dietro).
Le sospese virano all'ambra: sono rate che si e deciso di non pagare, e
devono staccarsi anche dalle altre rate.
Specificita: la riga pari della vista compatta e (0,2,4) e il tema moderno
(0,3,4) — qui sotto si pareggia e si vince per posizione, stando in fondo.
--------------------------------------------------------------------------- */
@media screen{
tbody tr.rata > td,
body:not(.vista-classica) tbody tr.rata > td{background:rgba(124,58,237,.09)}
body:not(.vista-classica) tbody tr.rata:hover > td{background:rgba(124,58,237,.17)}
tbody tr.rata.sospesa > td,
body:not(.vista-classica) tbody tr.rata.sospesa > td{background:rgba(180,83,9,.11)}
body:not(.vista-classica) tbody tr.rata.sospesa:hover > td{background:rgba(180,83,9,.19)}
[data-theme="moderno"] body:not(.vista-classica) tbody tr.rata > td{background:rgba(124,58,237,.10)}
[data-theme="moderno"] body:not(.vista-classica) tbody tr.rata.sospesa > td{background:rgba(180,83,9,.12)}
[data-theme="dark"] body:not(.vista-classica) tbody tr.rata > td{background:rgba(167,139,250,.15)}
[data-theme="dark"] body:not(.vista-classica) tbody tr.rata.sospesa > td{background:rgba(251,191,36,.14)}
/* elenco e schede: il segno sta sul bordo, come per gli imprevisti */
.el-riga.rata{box-shadow:inset 3px 0 0 #7c3aed}
.el-riga.rata.sospesa{box-shadow:inset 3px 0 0 #b45309}
.el-scheda.rata{border-left:3px solid #7c3aed}
.el-scheda.rata.sospesa{border-left:3px solid #b45309}
}
/* Riga che aspetta una decisione (ambra tenue). Vale la stessa regola di tutte
le tinte: si dipingono le CELLE. Uno sfondo messo sul
nel tema moderno
viene spento apposta dalla rete di sicurezza qui sopra, e la riga resta
bianca: e successo, e sembrava che l'evidenziazione non funzionasse. */
@media screen{
tbody tr.r-attesa > td,
body:not(.vista-classica) tbody tr.r-attesa > td{background:rgba(180,83,9,.09)}
body:not(.vista-classica) tbody tr.r-attesa:hover > td{background:rgba(180,83,9,.16)}
[data-theme="moderno"] body:not(.vista-classica) tbody tr.r-attesa > td{background:rgba(180,83,9,.10)}
[data-theme="dark"] body:not(.vista-classica) tbody tr.r-attesa > td{background:rgba(251,191,36,.13)}
}
/* ---------------------------------------------------------------------------
ZONA SICURA DELL'IPHONE (notch e Dynamic Island)
La difesa vera sta in index.html: niente "viewport-fit=cover" e barra di
stato "black" invece di "black-translucent" — con quelle due parole la
pagina finiva SOTTO il notch e le prime righe non si potevano toccare.
Queste regole sono la seconda cintura: se un giorno si volesse tornare a
coprire tutto lo schermo, quello che sta in cima resta comunque raggiungibile.
Su un telefono senza notch e su un computer env() vale 0 e non cambia niente.
--------------------------------------------------------------------------- */
:root{
--sa-top:env(safe-area-inset-top,0px);
--sa-bottom:env(safe-area-inset-bottom,0px);
--sa-left:env(safe-area-inset-left,0px);
--sa-right:env(safe-area-inset-right,0px);
}
@media screen{
/* i messaggi non devono nascere sotto il notch */
#toasts{top:calc(16px + var(--sa-top));right:calc(16px + var(--sa-right))}
/* la riga del titolo si ferma sotto la barra, mai piu su della zona sicura */
.dove{top:max(var(--h-barra,0px), var(--sa-top))}
/* la colonna del menu, quando e a sinistra, parte sotto la zona sicura */
.side{padding-top:var(--sa-top);padding-left:var(--sa-left)}
}
@media(max-width:820px){
/* sul telefono il menu e la barra IN BASSO: in cima non serve spazio */
.side{padding-top:0}
}
/* ---- Il visore dei documenti (pv*): pagine, riquadri, indicazione col dito ---- */
.pv-pagina { position: relative; margin: 12px auto; box-shadow: 0 2px 10px rgba(0,0,0,.45); background: #fff; }
.pv-pagina canvas { display: block; }
.pv-strato { position: absolute; inset: 0; cursor: crosshair; }
.pv-evid { position: absolute; background: rgba(250,204,21,.28); border: 2px solid #eab308;
border-radius: 3px; cursor: pointer; }
.pv-evid-mem { background: rgba(16,185,129,.22); border-color: #059669; }
.pv-evid-eti { position: absolute; top: -17px; left: -2px; font-size: 10px; font-weight: 700;
background: #eab308; color: #422006; padding: 0 5px; border-radius: 3px; white-space: nowrap; }
.pv-evid-mem .pv-evid-eti { background: #059669; color: #fff; }
.pv-lampeggia { animation: pv-lamp .4s ease-in-out 3; }
@keyframes pv-lamp { 50% { background: rgba(250,204,21,.65); } }
.pv-gomma { position: absolute; border: 2px dashed #2563eb; background: rgba(37,99,235,.12); pointer-events: none; }
/* ---- Dashboard: le schede si fermano al loro contenuto (niente colonne
mezze vuote) e i salti-settimana sono comodi anche col dito ---- */
.dash-griglia{align-items:start}
.w-chip{min-height:30px;padding:5px 12px}
/* ---- Registro (Consulta movimenti): massima visibilita dei dati.
Le schede del tema moderno restano schede, ma respirano di meno: righe piu
fitte, si passa da ~7 a ~14 movimenti per schermata senza perdere leggibilita
(regola della dashboard densa: padding 6-12px, corpo 13px). ---- */
[data-theme="moderno"] #cfPane-mov table{border-spacing:0 3px}
[data-theme="moderno"] #cfPane-mov table tbody td{padding:7px 10px;font-size:13px}
[data-theme="moderno"] #cfPane-mov table tbody tr td:first-child{padding-left:12px;border-radius:10px 0 0 10px}
[data-theme="moderno"] #cfPane-mov table tbody tr td:last-child{padding-right:12px;border-radius:0 10px 10px 0}
[data-theme="moderno"] #cfPane-mov .act .btn-ghost{padding:3px 10px;font-size:12px}
/* negli altri temi basta stringere un filo il passo verticale */
#cfPane-mov table tbody td{line-height:1.35}
/* ---- Prospetto paghe: 113 dipendenti per 24 colonne. Qui la densita' E' la
leggibilita'. La riga-scheda del tema moderno (padding 14px, 6px fra le
righe) lascia vedere CINQUE persone per schermata e spinge fuori campo le
colonne per cui la pagina si apre: Lordo, Busta, Da bonificare. Con lo stesso
spazio, cosi', ce ne stanno diciotto.
L'id vince sull'attributo del tema (stessa strada del Registro), e il nome
resta agganciato a sinistra mentre si scorre verso le voci. ---- */
#pgBody table{border-spacing:0;border-collapse:collapse}
#pgBody table tbody tr{box-shadow:none}
/* l'intestazione resta in vista mentre si scorrono cento dipendenti.
ATTENZIONE al fondo: di regola la fascia e' colorata con la scritta in
bianco (th{background:var(--brand);color:#fff}), e imporle un fondo bianco
la fa sparire — bianco su bianco. Il fondo si mette SOLO dove non c'e:
nel tema moderno, dove l'intestazione e' senza fascia e da appiccicata
si lascerebbe attraversare dalle righe che scorrono sotto. */
#pgBody table thead th{padding:4px 5px;font-size:11px;position:sticky;top:0;z-index:3}
[data-theme="moderno"] #pgBody table thead th{background:var(--card)}
#pgBody table tbody td{padding:3px 5px;font-size:11.5px;border-radius:0;border-bottom:1px solid var(--line)}
#pgBody table tbody tr td:first-child{border-radius:0;padding-left:8px}
#pgBody table tbody tr td:last-child{border-radius:0;padding-right:8px}
#pgBody table tbody tr:not(.pg-sez) td:first-child{position:sticky;left:0;z-index:2;background:var(--card)}
#pgBody table th:first-child{position:sticky;left:0;z-index:2} /* il fondo resta quello del tema */
/* il nome del cantiere e' una riga della tabella, cosi le colonne di un
cantiere e dell'altro restano incolonnate: quella riga non si appiccica
a sinistra (scivolerebbe sopra le altre) e fa da separatore */
#pgBody table tbody tr.pg-sez td{position:static;background:var(--hover);font-weight:700;font-size:11.5px;padding:7px 8px;border-bottom:1px solid var(--line)}
/* la casella d'angolo (Dipendente) e' appiccicata due volte, in alto E a
sinistra: deve stare SOPRA sia l'intestazione sia la colonna dei nomi,
o i nomi che scorrono le passano davanti */
#pgBody table thead th:first-child{z-index:4}
#pgBody table tbody tr:hover td{background:var(--hover)}
/* gli importi non si spezzano mai: "3.010,97 €" su due righe alza la riga e non
si legge (stessa trappola delle stampe, lo spazio prima dell'euro) */
#pgBody table td.num,#pgBody table th.num{white-space:nowrap}
/* le caselle vuote non devono gridare: una riga sotto dice "qui si scrive",
il contorno completo arriva quando ci passi sopra o ci entri */
#pgBody input[type=number]{height:19px;padding:1px 3px;border:1px solid transparent;border-bottom-color:var(--line);border-radius:0;background:transparent}
#pgBody input[type=number]:hover,#pgBody input[type=number]:focus{border-color:var(--sez,#2f6db3);background:var(--card)}
/* la riga il cui lordo non torna col foglio storico: il fondo va messo sulle
CELLE, perche' nel tema moderno la cella ha un fondo suo che copre la riga */
#pgBody table tbody tr.pg-scarto td{background:#fef2f2}
#pgBody table tbody tr.pg-scarto:hover td{background:#fde8e8}
#pgBody table tbody tr td:last-child{padding-right:4px}
/* ---- DAL TELEFONO LA DASHBOARD USCIVA DAI BORDI ----
Il grafico dell'andamento ha una larghezza minima di 680 px (serve: sotto,
le scritte si rimpiccioliscono fino a non leggersi) e sta dentro un riquadro
che scorre di suo. Ma una casella di griglia, di regola, NON si stringe sotto
la larghezza del suo contenuto (min-width:auto): quindi invece di scorrere
dentro il riquadro, il grafico allargava la colonna, e con lei tutta la
pagina. Misurato su un telefono da 390 px: la pagina veniva 826 px, ne
sbordavano 438. Con min-width:0 la casella si stringe e a scorrere torna a
essere il grafico, da solo. */
.dash-griglia>*{min-width:0}
.dash-riq{min-width:0}
/* ---- lo sfocato dietro l'intestazione, sul telefono, no ----
backdrop-filter:blur costringe il browser a ridisegnare quello che sta sotto
l'intestazione a ogni pixel di scorrimento: su un telefono di cantiere e' la
differenza fra scorrere liscio e a scatti. Sul computer resta. */
@media(max-width:820px){
[data-theme="moderno"] header,
[data-theme="moderno"] body.con-menu header{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--card)}
}
/* le righe del rendiconto dell'estratto conto che vanno guardate: il fondo
va messo sulle CELLE, perche' nel tema moderno la cella ha un fondo suo che
copre quello della riga (gia' successo due volte, e due volte l'ho visto
solo guardando lo schermo) */
#ebBody tr.eb-guarda td{background:#fef2f2}
/* Riepilogo per settimana sul telefono: la barra con le frecce (una settimana
per volta). Sul computer non esiste: le colonne ci stanno tutte. */
.cfw-tel{display:none}
@media(max-width:820px){
.cfw-tel{display:flex;align-items:center;gap:8px;margin:6px 0 8px}
.cfw-tel .btn-ghost{min-width:44px;min-height:44px;font-size:22px;line-height:1}
}
/* ---- Riepilogo per settimana: le quattro cose confermate da Mario ----
Misurato sulla sua schermata: la tabella partiva a 540 px dall'alto, 27 righe
da 46,6 px = 1484 px, tre schermate per vedere tutto. */
/* 2) righe piu fitte: da 46,6 a ~30 px, l'id vince sul tema */
#cfPane-week table{border-spacing:0 2px}
#cfPane-week table tbody td{padding:5px 10px;font-size:13px}
#cfPane-week table thead th{padding:4px 10px}
/* 1) Voce a sinistra e Totale a destra restano fermi mentre si scorre in
orizzontale (fino a 26 settimane); le righe-fascia (colspan) non si
appiccicano, scivolerebbero sopra le altre */
#cfPane-week table tbody tr td:first-child:not([colspan]),
#cfPane-week table thead th:first-child{position:sticky;left:0;z-index:2;background:var(--card)}
#cfPane-week table .w-tot{position:sticky;right:0;z-index:2;background:var(--card)}
#cfPane-week table thead th.w-tot{z-index:3}
#cfPane-week table thead th:first-child{z-index:4}
[data-theme="moderno"] #cfPane-week table thead th{background:var(--card)}
/* 3) la riga per cui si apre la pagina: una fascia, col numero grande; e la
settimana che va sotto zero e' rossa gia' nell'intestazione */
#cfPane-week table tbody tr.w-chiusura td{background:#eef2f7;font-size:15px;font-weight:700;padding:9px 10px;border-top:2px solid var(--line)}
#cfPane-week table tbody tr.w-chiusura td:first-child{font-size:14px}
#cfPane-week table thead th.w-negativa{background:#fee2e2;color:#b91c1c}
#cfPane-week table thead th.w-negativa .muted{color:#b91c1c}
/* 4) gli zeri come trattino leggero: l'occhio va sui numeri veri */
#cfPane-week .w-zero{color:#cbd5e1}
/* ---- Contabilita' analitica: tabelle dense e leggibili (regole UI UX Pro Max:
righe a passo fitto ma interlinea 1.45, corpo 13px, niente grigio su grigio,
tocco >= 40px sui tasti che contano; l'intestazione resta in cima). L'id vince
sulla riga-scheda del tema moderno, come per Registro e Prospetto paghe. ---- */
#cfPane-coana table{border-spacing:0 2px}
#cfPane-coana table tbody td{padding:6px 9px;font-size:13px;line-height:1.45}
#cfPane-coana table thead th{padding:5px 9px;position:sticky;top:0;z-index:2}
[data-theme="moderno"] #cfPane-coana table thead th{background:var(--card)}
#cfPane-coana table tbody tr td:first-child{border-radius:0}
#cfPane-coana table tbody tr td:last-child{border-radius:0}
#cfPane-coana .table-scroll{max-height:70vh;overflow:auto}
#cfPane-coana .tag{font-size:11px}
#cfPane-coana select,#cfPane-coana input[type="search"],#cfPane-coana input[type="number"]{min-height:34px}
#cfPane-coana .stat b{font-size:22px}
/* ---- Viaggi: stesse tabelle dense della contabilita' analitica ---- */
#cfPane-viaggi table{border-spacing:0 2px}
#cfPane-viaggi table tbody td{padding:6px 9px;font-size:13px;line-height:1.45;vertical-align:top}
#cfPane-viaggi table thead th{padding:5px 9px;position:sticky;top:0;z-index:2}
[data-theme="moderno"] #cfPane-viaggi table thead th{background:var(--card)}
#cfPane-viaggi table tbody tr td:first-child,#cfPane-viaggi table tbody tr td:last-child{border-radius:0}
#cfPane-viaggi .table-scroll{max-height:70vh;overflow:auto}
#cfPane-viaggi .tag{font-size:11px}
#cfPane-viaggi select,#cfPane-viaggi input{min-height:34px}
#cfPane-viaggi .stat b{font-size:22px}
#cfPane-viaggi tr.vg-da td:first-child{box-shadow:inset 3px 0 0 #f59e0b}
.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* la competenza in testa alla fattura aperta */
.fe-comp{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px;padding:8px 10px;border-radius:8px;background:var(--hover)}
.fe-comp input[type="month"]{min-height:34px;padding:4px 6px}
.fe-comp button{min-height:34px}
/* ---- Categorie e conti: i conti del commercialista dentro la voce ---- */
#cfPane-coana .co-conti{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 2px}
#cfPane-coana .co-conti .tag{font-size:11px;background:var(--hover);white-space:normal;max-width:100%;line-height:1.35}
#cfPane-coana tr.co-fuori td{box-shadow:inset 3px 0 0 #f59e0b}
/* La striscia che compare quando il server non risponde e quello che si vede
viene dalla memoria del dispositivo: deve dare fastidio quel tanto che basta
perche' nessuno registri un pagamento guardando numeri di mezz'ora fa. */
.barra-cache{ position:fixed; left:0; right:0; top:0; z-index:9999; background:#fef3c7; color:#7c2d12;
border-bottom:1px solid #f59e0b; padding:8px 14px; font-size:13px; text-align:center; }
/* Le righe del riquadro "Aggiorna i conti": una strada per riga con la sua
spiegazione accanto, invece di cinque tasti in fila che non dicono quando
usarli. */
.scelta-riga{ display:flex; align-items:center; justify-content:space-between; gap:12px;
border:1px solid var(--line,#e5e8ee); border-radius:12px; padding:10px 12px; margin:8px 0; }
.scelta-riga button{ white-space:nowrap; }
/* Carte Revolut: i riquadri per dipendente si cliccano per filtrare la
tabella (quello scelto resta bordato); le righe proposte dall'app o
cambiate a mano si evidenziano finché non si confermano. */
.rev-dip{ cursor:pointer; border:2px solid transparent; transition:border-color .15s ease; }
.rev-dip:hover{ border-color:var(--brand2,#2f6fb0); }
.rev-dip.active{ border-color:var(--brand2,#2f6fb0); background:var(--hover,#f3f4f6); }
tr.rev-prop td{ background:rgba(124,58,237,.08); box-shadow:inset 3px 0 0 #7c3aed; }
/* ---- Documenti collegati a un movimento di cassa (9/9/2026) ----
Su un pagamento non c'è una fattura sola: ci sono le fatture, le note di
credito che le decurtano e le fatture che abbiamo emesso noi e che si
compensano. Il TIPO si deve leggere di colpo, e il contributo col segno.
Tutti i colori hanno la loro versione scura: i tag chiari sul fondo scuro
diventavano bianco su bianco. */
.doc-tag{ display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:700;
white-space:nowrap; background:var(--tag-bg); color:var(--tag-ink); }
.doc-tag-ft{ background:#e0edfb; color:#1f4e78; }
.doc-tag-nc{ background:#fee2e2; color:#991b1b; }
.doc-tag-comp{ background:#ede9fe; color:#5b21b6; }
[data-theme="dark"] .doc-tag-ft{ background:#1e3a5f; color:#bfdbfe; }
[data-theme="dark"] .doc-tag-nc{ background:#7f1d1d; color:#fecaca; }
[data-theme="dark"] .doc-tag-comp{ background:#4c1d95; color:#ddd6fe; }
/* il contatore «N documenti» nelle righe e nella maschera del movimento */
.doc-conta{ background:#e0edfb; color:#1f4e78; font-weight:700; text-decoration:none; white-space:nowrap; }
a.doc-conta:hover{ filter:brightness(.95); text-decoration:underline; }
[data-theme="dark"] .doc-conta{ background:#1e3a5f; color:#bfdbfe; }
.doc-gia{ background:#d1fae5; color:#065f46; font-weight:700; white-space:nowrap; }
[data-theme="dark"] .doc-gia{ background:#064e3b; color:#a7f3d0; }
/* la tabella dei documenti: il principale si vede, gli importi in meno sono rossi */
table.doc-tab td{ vertical-align:middle; }
table.doc-tab tr.doc-principale td{ background:rgba(47,111,176,.08); }
[data-theme="dark"] table.doc-tab tr.doc-principale td{ background:rgba(59,130,246,.14); }
.doc-spilla{ font-size:12px; }
.doc-meno{ color:#e11d48; }
[data-theme="dark"] .doc-meno{ color:#fb7185; }
.doc-altri{ display:block; font-size:10.5px; font-weight:400; color:#b45309; }
[data-theme="dark"] .doc-altri{ color:#fbbf24; }
.doc-btn{ font-size:11.5px; padding:3px 8px; min-height:0; text-decoration:none; }
.doc-vuoto{ color:var(--muted); padding:18px; text-align:center; }
/* la riga della quadratura e il riepilogo di cosa si sta per collegare:
verde quando i conti tornano, arancione quando manca (o avanza) qualcosa */
.doc-quadra,.doc-riep{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; font-size:12.5px;
background:var(--card); border:1px solid var(--line); border-radius:10px; padding:9px 12px; }
.doc-quadra{ margin-top:10px; border-left:4px solid var(--line); }
.doc-riep{ margin:0 0 8px; border-left:4px solid var(--brand2); }
.doc-quadra.ok{ border-left-color:#059669; }
.doc-quadra.no{ border-left-color:#d97706; }
.doc-esito{ font-weight:700; }
.doc-esito.ok,.doc-quadra.ok .doc-esito{ color:#059669; }
.doc-esito.no,.doc-quadra.no .doc-esito{ color:#d97706; }
[data-theme="dark"] .doc-esito.ok,[data-theme="dark"] .doc-quadra.ok .doc-esito{ color:#34d399; }
[data-theme="dark"] .doc-esito.no,[data-theme="dark"] .doc-quadra.no .doc-esito{ color:#fbbf24; }
/* il suggeritore: schede piu' piccole delle solite, spunta multipla,
e le righe gia' collegate marcate di verde */
.movfe-tabs button{ font-size:12.5px; padding:5px 11px; }
input.movfe-sel{ width:auto; min-height:0; }
tr.movfe-collegata td{ background:rgba(5,150,105,.08); }
[data-theme="dark"] tr.movfe-collegata td{ background:rgba(5,150,105,.18); }