:root {
    --bg: #04060d;
    --bg-2: #0b1020;
    --fg: #e8eefc;
    --muted: #94a7c8;
    --line: #1c2740;
    --cy: #3ce0ff;
    --bl: #6a5cff;
    --err: #ff6b6b;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: radial-gradient(1200px 600px at 70% -10%, #0e1630, var(--bg));
    color: var(--fg);
    min-height: 100dvh;
}
.wrap { max-width: none; margin: 0; padding: 22px 28px; }
@media (max-width: 600px) { .wrap { padding: 18px 16px; } }
.topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 24px;
}
.card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 24px 60px -30px rgba(0,0,0,.8);
}
.card--login { max-width: 400px; margin: 10vh auto 0; }
h1 { font-size: 1.5rem; margin: 0 0 .3rem; }
.muted { color: var(--muted); margin-top: 0; }
.error { color: var(--err); font-weight: 600; }
label { display: block; margin: 14px 0 4px; font-size: .9rem; color: var(--muted); }
input {
    width: 100%; padding: .7em .8em; border-radius: 10px;
    border: 1px solid var(--line); background: #070b16; color: var(--fg); font-size: 1rem;
}
input:focus { outline: 2px solid var(--cy); outline-offset: 1px; }
button {
    margin-top: 20px; width: 100%; padding: .8em 1em; border: 0; border-radius: 11px;
    background: linear-gradient(120deg, var(--cy), var(--bl)); color: #04121a;
    font-weight: 700; font-size: 1rem; cursor: pointer;
}
button.link {
    width: auto; margin: 0; padding: .4em .8em; background: none;
    color: var(--muted); font-weight: 600;
}
button.link:hover { color: var(--fg); }

/* topbar + nav */
.topbar { gap: 18px; }
.brand { color: var(--fg); display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.nav-logo { height: 22px; width: auto; }
.login-logo { height: 52px; width: auto; display: block; margin: 0 auto 10px; }
.doc-logo { height: 58px; width: auto; margin-bottom: 6px; }
.mainnav { display: flex; gap: 6px; margin-right: auto; }
.mainnav a {
    color: var(--muted); text-decoration: none; padding: .45em .8em;
    border-radius: 9px; font-weight: 600; font-size: .92rem;
}
.mainnav a.on, .mainnav a:hover { color: var(--fg); background: var(--bg-2); }
.logout { margin: 0; }
.btn-inline {
    display: inline-block; margin-top: 8px; color: var(--cy);
    text-decoration: none; font-weight: 600;
}

/* lista */
.list-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.search { display: flex; gap: 8px; margin: 0; }
.search input { width: 280px; max-width: 60vw; }
.search button, .search input { margin: 0; }
.search button { width: auto; padding: .6em 1.1em; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0; }
.filters a {
    color: var(--muted); text-decoration: none; font-size: .86rem;
    padding: .35em .75em; border: 1px solid var(--line); border-radius: 999px;
}
.filters a.on, .filters a:hover { color: var(--fg); border-color: var(--cy); }

.tablewrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.grid th, table.grid td { padding: .6em .7em; text-align: left; border-bottom: 1px solid var(--line); }
table.grid th { color: var(--muted); font-weight: 600; white-space: nowrap; }
table.grid th a { color: var(--muted); text-decoration: none; }
table.grid th a:hover { color: var(--fg); }
table.grid tbody tr:hover, table.grid tr:hover { background: rgba(255,255,255,.02); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.editlink { color: var(--cy); text-decoration: none; font-weight: 600; }
.empty { text-align: center; padding: 2em; }

.badge { font-variant-numeric: tabular-nums; padding: .2em .55em; border-radius: 7px; font-size: .85rem; }
.b-scaduta { background: rgba(255,107,107,.15); color: #ff9b9b; }
.b-imminente { background: rgba(255,196,0,.15); color: #ffd666; }
.b-ok { background: rgba(60,224,255,.12); color: #8fe9ff; }
.b-nd { color: var(--muted); }

/* form edit */
.card--form { max-width: 720px; }
.back { color: var(--muted); text-decoration: none; }
.back:hover { color: var(--fg); }
.ok { color: #7ee787; font-weight: 600; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.grid2 label { margin-top: 12px; }
select {
    width: 100%; padding: .7em .8em; border-radius: 10px;
    border: 1px solid var(--line); background: #070b16; color: var(--fg); font-size: 1rem;
}
textarea {
    width: 100%; padding: .7em .8em; border-radius: 10px; font-family: inherit;
    border: 1px solid var(--line); background: #070b16; color: var(--fg); font-size: 1rem;
}
h2.sec { font-size: 1.05rem; margin: 28px 0 4px; padding-top: 16px; border-top: 1px solid var(--line); }
ul.status { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
ul.status li { display: flex; align-items: center; gap: 10px; }
code { background: var(--bg-2); padding: .1em .4em; border-radius: 5px; font-size: .9em; }
.check { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--muted); font-size: .9rem; }
.check input { width: auto; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }

/* clienti: toolbar import/match */
.toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 14px 0 6px; }
.inline-form { display: inline-flex; gap: 8px; margin: 0; align-items: center; }
.inline-form button { width: auto; margin: 0; padding: .55em 1em; font-size: .9rem; }
.inline-form input[type=file] { color: var(--muted); font-size: .85rem; max-width: 220px; }
.mono { font-family: var(--ff-mono, monospace); font-size: .88rem; }
td.mono { font-variant-numeric: tabular-nums; }
.danger-form { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 18px; }
button.danger {
    width: auto; margin: 0; background: none; border: 1px solid var(--err);
    color: var(--err); font-weight: 600; padding: .6em 1.1em;
}
button.danger:hover { background: rgba(255,107,107,.12); }

.notice-form { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
button.btn-mail {
    width: auto; margin: 0; background: var(--bg-2); color: var(--cy);
    border: 1px solid var(--cy); font-weight: 600; padding: .6em 1.1em;
}
button.btn-mail:hover { background: rgba(60,224,255,.1); }

.subsection { margin-top: 10px; }
.row-add { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.row-add select { width: auto; min-width: 240px; margin: 0; }
.row-add .qty { width: 90px; margin: 0; }
.row-add button { width: auto; margin: 0; padding: .6em 1.1em; }

/* proforma: documento su fondo bianco (leggibile e stampabile) */
.doc {
    background: #fff; color: #1a1a1a; border-radius: 14px; padding: 36px;
    max-width: 820px; margin: 18px auto; line-height: 1.5;
}
.doc-head { display: flex; justify-content: space-between; gap: 24px; border-bottom: 2px solid #1a1a1a; padding-bottom: 16px; }
.doc .mittente { font-size: .92rem; }
.doc-meta { text-align: right; }
.doc-meta h2 { margin: 0 0 6px; letter-spacing: 2px; text-transform: uppercase; color: #444; }
.doc .cliente { margin: 24px 0; font-size: .95rem; }
.doc .cliente .lbl { color: #777; font-size: .8rem; }
table.doc-grid { width: 100%; border-collapse: collapse; margin: 18px 0; }
table.doc-grid th { text-align: left; border-bottom: 1px solid #999; padding: 8px 6px; font-size: .82rem; color: #555; text-transform: uppercase; }
table.doc-grid td { padding: 10px 6px; border-bottom: 1px solid #e3e3e3; }
table.doc-grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.totali { margin-left: auto; width: 280px; }
.totali > div { display: flex; justify-content: space-between; padding: 5px 6px; }
.totali .tot { border-top: 2px solid #1a1a1a; font-weight: 700; font-size: 1.1rem; margin-top: 4px; }
.doc .nota { font-size: .82rem; color: #555; margin-top: 20px; }
.doc .nota.muted { color: #999; }

@media print {
    .topbar, .no-print { display: none !important; }
    body { background: #fff; }
    .wrap { max-width: none; padding: 0; }
    .doc { box-shadow: none; margin: 0; max-width: none; border-radius: 0; }
}

/* scadenze: tracciamento invio proforma + azioni rapide */
.track { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.trk { font-size: .78rem; padding: .15em .5em; border-radius: 6px; white-space: nowrap; border: 1px solid transparent; }
.trk-on { background: rgba(126,231,135,.14); color: #9af0a4; border-color: rgba(126,231,135,.25); }
.trk-off { background: rgba(148,167,200,.1); color: var(--muted); }
.trk-paid { background: rgba(60,224,255,.14); color: #8fe9ff; border-color: rgba(60,224,255,.3); font-weight: 600; }
.row-paid { opacity: .72; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.row-actions .inline-form { gap: 0; }
button.btn-mini {
    width: auto; margin: 0; padding: .4em .7em; font-size: .82rem; border-radius: 8px;
    background: #0c1424; border: 1px solid var(--line); color: var(--fg); cursor: pointer;
}
button.btn-mini:hover { border-color: var(--cy); color: var(--cy); }
button.btn-paid { border-color: rgba(126,231,135,.4); color: #9af0a4; }
button.btn-paid:hover { border-color: #7ee787; color: #bdf5c3; }
.list-note { margin-top: 10px; }
.card--spaced { margin-top: 14px; }
h2.sec--flush { border-top: 0; margin-top: 0; padding-top: 0; }
.last-act { white-space: nowrap; font-size: .85rem; }
.last-act .la-label { color: var(--fg); }
.last-act .la-when { font-size: .78rem; }

/* dashboard KPI */
.kpis { display: flex; flex-wrap: wrap; gap: 14px; margin: 20px 0 8px; }
.kpi {
    flex: 1 1 160px; display: flex; flex-direction: column; gap: 4px; text-decoration: none;
    padding: 16px 18px; border-radius: 12px; background: #0b1221; border: 1px solid var(--line);
    transition: border-color .15s, transform .05s;
}
.kpi:hover { border-color: var(--cy); transform: translateY(-1px); }
.kpi-num { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); line-height: 1; }
.kpi-label { color: var(--muted); font-size: .9rem; }
.kpi-warn .kpi-num { color: #ffd666; }
.kpi-pay .kpi-num { color: #8fe9ff; }
.kpi-over .kpi-num { color: #ff9b9b; }
.trk-err { background: rgba(255,107,107,.15); color: #ff9b9b; border-color: rgba(255,107,107,.3); }
.prossima { white-space: nowrap; font-size: .9rem; }
.error { color: #ff9b9b; font-weight: 600; }
button.btn-retry { border-color: rgba(255,196,0,.45); color: #ffd666; }
button.btn-retry:hover { border-color: #ffd666; color: #ffe599; }
a.btn-mini {
    display: inline-block; padding: .4em .7em; font-size: .82rem; border-radius: 8px;
    background: #0c1424; border: 1px solid var(--line); color: var(--fg); text-decoration: none;
}
a.btn-mini:hover { border-color: var(--cy); color: var(--cy); }
a.btn-retry { border-color: rgba(255,196,0,.45); color: #ffd666; }
a.btn-retry:hover { border-color: #ffd666; color: #ffe599; }
dl.recap { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 18px 0 8px; }
dl.recap dt { color: var(--muted); font-size: .9rem; }
dl.recap dd { margin: 0; }
dl.recap .nuova { color: #9af0a4; font-size: 1.15rem; }
.prossima .rel { font-size: .78rem; margin-top: 2px; }
.kpi-rev .kpi-num { color: #9af0a4; font-size: 1.5rem; }

/* dashboard: barra soglia forfettario */
.soglia { margin: 22px 0 6px; }
.soglia-head { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: baseline; margin-bottom: 7px; font-size: .92rem; }
.soglia-note { margin-top: 7px; font-size: .85rem; }
progress.soglia-bar {
    width: 100%; height: 16px; border: 1px solid var(--line); border-radius: 9px;
    background: #0b1221; appearance: none; -webkit-appearance: none; overflow: hidden;
}
progress.soglia-bar::-webkit-progress-bar { background: #0b1221; border-radius: 9px; }
progress.soglia-bar::-webkit-progress-value { border-radius: 9px; transition: width .3s; }
.soglia-bar--ok::-webkit-progress-value { background: #7ee787; }
.soglia-bar--ok::-moz-progress-bar { background: #7ee787; }
.soglia-bar--warn::-webkit-progress-value { background: #ffd666; }
.soglia-bar--warn::-moz-progress-bar { background: #ffd666; }
.soglia-bar--over::-webkit-progress-value { background: #ff6b6b; }
.soglia-bar--over::-moz-progress-bar { background: #ff6b6b; }

/* dashboard: alert soglia */
.alert { border-radius: 10px; padding: 12px 16px; margin: 4px 0 18px; font-size: .92rem; line-height: 1.5; border: 1px solid; }
.alert strong { display: inline; }
.alert-warn { background: rgba(255,214,102,.12); border-color: rgba(255,214,102,.4); color: #ffe199; }
.alert-over { background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.45); color: #ffb3b3; }