h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Si è verificato un errore."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ---- Aggiunte dell'applicazione (il tema del prototipo è in tema.css) ---- */
.hnav a.brand { color: #fff; }
.hnav a.who { text-decoration: none; padding: 3px 6px; border-radius: 7px; }
.hnav a.who:hover { background: var(--sidebar-2); }

/* ---- Pagina IN-OUT: a tutta altezza, con intestazione e piè di pagina della tabella sempre visibili ---- */
.content:has(> .page-flush) { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.page-flush { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page-flush .grid-wrap { flex: 1; min-height: 0; overflow: auto; background: var(--surface); position: relative; }
.page-flush .toolbar { flex: none; }
.statusbar .ys { color: var(--ext-yes); }
.statusbar .mc { color: var(--ext); }
.statusbar .pager { gap: 8px; }
.statusbar .pager b { font-variant-numeric: tabular-nums; }


/* riepilogo: percentuale sul valore fatturato, accanto a quella sul numero di righe */
.riep .rp-p.val { background: var(--info-soft); color: #1c5cab; }
.riep .rp-g.ctl { background: transparent; border: 0; padding: 0; }

/* celle della griglia che il prototipo non ha */
.tbl2 .comm button.c-pr { display: inline-block; height: 25px; border: 0; background: transparent; cursor: pointer; border-radius: 4px; font-weight: 600; color: var(--brand-ink); padding: 0 3px; margin-right: 2px; }
.tbl2 .comm button.c-pr:hover:not(:disabled) { background: rgba(255,255,255,.75); }
.tbl2 .comm button.c-pr.todo { color: var(--ink-3); font-weight: 400; }
.tbl2 td.c-kind { padding: 0 4px; font-size: 11px; color: var(--ink-3); line-height: 26px; }
.tbl2 td.c-kind.asst { color: #a8461f; font-weight: 600; }
.tbl2 .ci[readonly] { cursor: default; }
.tbl2 .ci.pag.P { color: var(--good); }
.tbl2 .ci.pag.X { color: var(--bad); }
.tbl2 td.c-del .acts { display: flex; }
.tbl2 td.c-del .acts button { flex: 1; width: auto; }
.tbl2 tfoot td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* popup dei montatori e dell'elemento: il fondo trasparente chiude il popup con un clic fuori */
.mp-bg { position: fixed; inset: 0; z-index: 119; }
.hnav form { display: contents; }
.tbl td .btn + .btn { margin-left: 4px; }
.login-form .links { margin-top: 12px; font-size: 12px; display: flex; justify-content: space-between; }
.validation-message { color: var(--bad); font-size: 12px; }
/* ---- Cruscotto ---- */
.kpi.exty { border-top: 3px solid var(--ext-yes); }
.chart .vl { font-size: 9.5px; fill: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.chart .vl.in { fill: #fff; }

/* ---- Depositi temporanei: stili del Prototipo 3 (assets/style.css, tabella con righe espandibili) ---- */
.d4-kpis { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border-bottom: 1px solid var(--line); }
.d4-kpis > div { padding: 10px 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.d4-kpis > div:last-child { border-right: 0; }
.d4-kpis span { font-size: 11.5px; color: var(--ink-2); }
.d4-kpis b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.d4-kpis em { font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.d4-kpis .bad b { color: var(--bad); } .d4-kpis .warn b { color: var(--warn); }
table.d4 { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12.5px; background: var(--surface); }
/* Solo le intestazioni della tabella principale (figlie dirette di .d4): la tabella delle rate nella riga espansa ha le sue (.dx-t th) e non deve restare fissa in alto sopra le prime */
.d4 > thead > tr > th { position: sticky; top: 0; z-index: 2; background: var(--xl-head); color: #1f3d17; font-size: 11.5px; font-weight: 600; text-align: left; padding: 0 8px; height: 32px; border-bottom: 1px solid #9cc487; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d4 > thead > tr > th.num { text-align: right; }
.d4 > thead > tr > th .th-sort { border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; padding: 0; width: 100%; height: 32px; text-align: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d4 > thead > tr > th em { font-style: normal; color: var(--brand); margin-left: 3px; }
.d4 td { padding: 0 8px; height: 38px; border-bottom: 1px solid var(--xl-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d4 td.num { text-align: right; font-variant-numeric: tabular-nums; }
.d4 td.neg { color: var(--bad); }
.d4 tr.dr { cursor: pointer; }
.d4 tbody tr.dr td { background: var(--xl-light); }
.d4 tbody tr.dr.alt td { background: var(--xl-green); }
.d4 tr.dr:hover td { background: var(--xl-hover); }
.d4 tr.dr.open td, .d4 tr.dr.alt.open td { background: #c4dfb3; border-bottom-color: transparent; font-weight: 500; }
.d4 tr.dr.act td.tg { box-shadow: inset 4px 0 0 var(--bad); }
.d4 td.tg { text-align: center; color: var(--brand); }
.d4 .chev { display: inline-block; width: 18px; height: 18px; line-height: 16px; padding: 0; border-radius: 4px; background: #fff; border: 1px solid #b1d39c; font-size: 11px; color: var(--brand); cursor: pointer; }
.d4 td.na { font-weight: 600; font-size: 12px; }
.d4 td.na.bad { color: var(--bad); } .d4 td.na.warn { color: var(--warn); } .d4 td.na.good { color: var(--good); } .d4 td.na.neutral { color: var(--ink-2); }
.d4 td.acts { overflow: visible; }
.d4 td.acts .btn { height: 24px; padding: 0 8px; font-size: 11.5px; margin-right: 3px; }
.d4 tr.dx > td { padding: 4px 12px 14px 0; height: auto; background: #f4f9f1; border-bottom: 2px solid #9cc487; white-space: normal; }
.d4 tfoot td { position: sticky; bottom: 0; background: var(--xl-head); font-weight: 700; color: #1f3d17; border-top: 1px solid #9cc487; height: 32px; }
.d4 td.empty { height: auto; padding: 40px; }
.d4 td.late, .dx-t td.late { color: var(--bad); font-weight: 600; }
.dx-info { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 8px 2px 10px; font-size: 12px; align-items: baseline; }
.dx-info i { font-style: normal; color: var(--ink-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }
table.dx-t { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }
.dx-t th { text-align: left; font-size: 11px; color: var(--ink-2); font-weight: 600; padding: 6px 8px; background: var(--surface-2); border-bottom: 1px solid var(--line-strong); }
.dx-t th.num, .dx-t td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dx-t td { padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dx-t tr.late td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.dx-t td.acts { text-align: right; }
.dx-t td.acts .btn { height: 24px; padding: 0 8px; font-size: 11.5px; margin-left: 3px; }
.dx-t tbody tr:nth-child(even) td { background: #f1f8ec; }
.dx-t tbody tr:hover td { background: #e6f1de; }
.dx-t tr.pag td { color: var(--ink-3); }
.dx-t input.ri-in, table.pv-t input.pv-in { width: 88px; height: 24px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 6px; text-align: right; font-variant-numeric: tabular-nums; background: #fff; font-size: 12px; }
.dx-t input.ri-in.b { font-weight: 700; }
.dx-t input.ri-in:focus, table.pv-t input.pv-in:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 2px rgba(18,117,98,.15); }
.dx-rem { margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.dx-rem b { font-weight: 600; }
.dx-sum { display: flex; gap: 18px; align-items: center; padding: 8px 2px 0; font-size: 12px; }
.dx-sum .sp { flex: 1; }
.dx-sum .re-w { color: var(--bad); }
.d3m-info { background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 12px; line-height: 1.45; }
table.pv-t { width: 100%; border-collapse: collapse; font-size: 12px; }
table.pv-t th { text-align: left; font-size: 11px; color: var(--ink-3); font-weight: 600; padding: 3px 4px; border-bottom: 1px solid var(--line); }
table.pv-t th.num, table.pv-t td.num { text-align: right; }
table.pv-t td { padding: 3px 4px; border-bottom: 1px solid var(--line); }
table.pv-t input.re-d { height: 26px; border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 4px; font-size: 12px; width: 128px; }
table.pv-t input.pv-in.b { font-weight: 700; }
.re-h { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 6px 0 6px; font-size: 12.5px; }
.re-h span { color: var(--ink-2); }
.re-f { display: flex; gap: 12px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.re-w { color: var(--bad); font-size: 12px; font-weight: 600; }
.rem-prev { white-space: pre-wrap; font-family: var(--font); font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; max-height: 260px; overflow: auto; width: 100%; min-height: 200px; }
.fgrid > * { min-width: 0; }
.field .input { width: 100%; min-width: 0; }
.field .inline { display: flex; gap: 6px; }
.field .inline .input { flex: 1; }
.modal { max-height: calc(100vh - 32px); overflow-y: auto; }
.modal.wide { width: 640px; }
.hist { margin: 0; padding: 0; list-style: none; max-height: 50vh; overflow: auto; font-size: 12.5px; }
.hist li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.hist li small { display: block; color: var(--ink-3); }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 16px; background: var(--warn-soft); border-top: 1px solid #f3dcae; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 8px; }

/* ---------- Select: stesso aspetto ovunque (bianche, con freccia), anche il menu a tendina del browser resta chiaro ---------- */
:root { --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2355534e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* Chiaro ovunque: anche gli elenchi nativi del browser (select, suggerimenti dei campi, calendari) e le barre di scorrimento restano bianchi, anche se il computer o il browser sono in modalità scura */
:root, input, select, textarea { color-scheme: light; }
select option { background: #fff; color: var(--ink); }
select.input, select.sel, select.cell-in,
select.input:hover, select.sel:hover, select.cell-in:hover,
select.input:focus, select.sel:focus, select.cell-in:focus {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    background-color: #fff; background-image: var(--chev); background-repeat: no-repeat; background-position: right 9px center; background-size: 10px 6px;
    padding-right: 26px; text-overflow: ellipsis;
}
select.input:disabled, select.sel:disabled, select.cell-in:disabled { background-image: none; padding-right: 6px; cursor: default; }
select.cell-in { border-color: var(--line-strong); }
/* Tipo e Pag. nella griglia IN-OUT: la cella mostra solo il valore e il clic apre un popup (OptionPicker), non l'elenco nativo del browser */
.tbl2 .ci.pick { text-align: left; font-weight: 600; cursor: pointer; font-family: inherit; }
.tbl2 .ci.pick:disabled { cursor: default; opacity: 1; }
.mpick.sm { width: 240px; }
.mpick .mp-list:focus { outline: none; }
.mpick:focus { outline: none; }
.mpick .mp-i .mp-code { font-weight: 700; min-width: 30px; }
.mpick .mp-i .mp-desc { color: var(--ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpick .mp-i.act { background: var(--surface-3); }
.mpick .mp-i.on.act { background: var(--brand-soft); }
.mpick .mp-i.on::after { content: '✓'; color: var(--brand-2); font-weight: 700; }

/* Elenco dei suggerimenti nelle celle della griglia (disegnato da InOut.razor.js): bianco come gli altri popup */
.sg { position: fixed; z-index: 130; max-height: 260px; display: flex; flex-direction: column; overflow: hidden; background: #fff; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: 0 12px 34px rgba(0,0,0,.2); font-size: 12.5px; }
.sg-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.sg-i { display: flex; align-items: baseline; gap: 8px; padding: 5px 10px; cursor: pointer; }
.sg-i b { font-weight: 700; white-space: nowrap; }
.sg-i span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.sg-i:hover, .sg-i.act { background: var(--surface-3); }

/* Filtro "Uscite: tutti i mesi": pulsante bianco con freccia (come le select), che apre il popup OptionPicker */
button.sel.pick-filter { display: inline-flex; align-items: center; min-width: 168px; padding: 0 28px 0 10px; text-align: left; cursor: pointer; font-weight: 500;
    background-color: #fff; background-image: var(--chev); background-repeat: no-repeat; background-position: right 9px center; background-size: 10px 6px; }
button.sel.pick-filter:hover { border-color: var(--ink-3); }
button.sel.pick-filter:focus-visible { border-color: var(--brand-2); }
.mpick .mp-i .mp-nm { flex: 1; }

/* Campi data: icona del calendario a destra (il calendario nativo del browser è nascosto: lo disegna wwwroot/js/calendar.js) */
:root { --cal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2355534e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 6.5h12M5.5 1.8v2.4M10.5 1.8v2.4'/%3E%3C/svg%3E"); }
input[type="date"] { background-image: var(--cal-icon); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px 14px; padding-right: 28px; }
input[type="date"]::-webkit-calendar-picker-indicator { display: none; }

/* Calendario (popup bianco come gli altri) */
.cal { position: fixed; z-index: 300; width: 264px; padding: 8px; background: #fff; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.22); font-size: 12.5px; outline: none; user-select: none; }
.cal-h { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; }
.cal-t { flex: 1; text-align: center; font-weight: 700; font-size: 13px; }
.cal-n { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer; }
.cal-n:hover { background: var(--surface-3); color: var(--ink); }
.cal-w, .cal-g { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-w span { text-align: center; padding: 4px 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; }
.cal-g { gap: 2px; }
.cal-d { height: 30px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; padding: 0; }
.cal-d:hover { background: var(--surface-3); }
.cal-d.out { color: var(--ink-3); }
.cal-d.today { border-color: var(--brand-2); font-weight: 700; }
.cal-d.cur { box-shadow: 0 0 0 2px rgba(18,117,98,.3); }
.cal-d.sel, .cal-d.sel:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; font-weight: 700; }
.cal-f { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.cal-a { border: 0; background: transparent; color: var(--brand-2); font: inherit; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.cal-a:hover { background: var(--brand-soft); }

/* Campi data nelle tabelle dei depositi: più larghi, perché con l'icona la data deve starci per intero */
.dx-t input.ri-in[type="date"], table.pv-t input.re-d[type="date"] { width: 134px; padding: 0 26px 0 7px; text-align: left; background-image: var(--cal-icon); background-repeat: no-repeat; background-position: right 7px center; background-size: 13px 13px; }