:root { --fg:#1f2933; --muted:#6b7780; --bg:#f4f6f8; --card:#fff; --line:#d9dee3; --accent:#D7141C; --brand-red:#EF1C25; --err:#b42318; --ok:#1a7f37; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 Arial, Helvetica, sans-serif; color:var(--fg); background:var(--bg); }
.top { display:flex; align-items:center; justify-content:space-between; padding:10px 22px; background:#fff; color:var(--fg); border-bottom:4px solid var(--brand-red); flex-wrap:wrap; gap:12px 16px; }
.top .brand { display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--fg); }
.top .brand img { height:40px; width:auto; display:block; }
.top .brand .name { font-size:19px; font-weight:bold; letter-spacing:.2px; padding-left:14px; border-left:2px solid var(--line); }
.top nav { display:flex; gap:18px; align-items:center; flex-wrap:wrap; font-size:14px; }
.top nav a, .top nav button.link { color:var(--fg); text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; }
.top nav a:hover, .top nav button.link:hover { border-bottom-color:var(--line); }
.top nav a.on { border-bottom-color:var(--brand-red); }
main { max-width:1680px; margin:24px auto; padding:0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:6px; padding:20px 24px; margin-bottom:20px; }
.card.narrow { max-width:440px; margin:40px auto; }
h1 { font-size:20px; margin:0 0 14px; }
label { display:block; margin:0 0 12px; font-weight:bold; }
input[type=email], input[type=password], input[type=text], input[type=number], select { display:block; width:100%; margin-top:4px; padding:8px 10px; border:1px solid var(--line); border-radius:4px; font:inherit; }
button { padding:8px 16px; border:0; border-radius:4px; background:var(--accent); color:#fff; font:inherit; cursor:pointer; }
button.link { background:none; padding:0; color:var(--accent); text-decoration:underline; }
form.inline { display:inline; margin:0; }
.errors { background:#fdecea; border:1px solid #f5c2bd; color:var(--err); padding:8px 12px; border-radius:4px; margin-bottom:12px; }
.errors ul { margin:0; padding-left:18px; }
.flash { background:#e8f3ea; border:1px solid #b7dcc0; color:var(--ok); padding:8px 12px; border-radius:4px; }
.muted { color:var(--muted); }
.qr { width:220px; margin:10px 0; }
.qr svg { width:100%; height:auto; }
code.key { font-size:16px; letter-spacing:1px; background:var(--bg); padding:2px 6px; border-radius:3px; }

/* admin */
h2 { font-size:16px; margin:18px 0 10px; }
.card.narrow-wide { max-width:820px; }
.subnav { display:flex; gap:4px; margin-bottom:16px; flex-wrap:wrap; }
.subnav a { padding:6px 12px; border-radius:4px; background:#e3e8ed; color:var(--fg); text-decoration:none; }
.subnav a.on { background:var(--accent); color:#fff; }
.bar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.btn { display:inline-block; padding:8px 14px; border-radius:4px; background:var(--accent); color:#fff; text-decoration:none; }
button.secondary { background:#e3e8ed; color:var(--fg); }
button:disabled { opacity:.45; cursor:default; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.actions form { margin:0; }
.scroll { overflow-x:auto; }
table.grid { width:100%; border-collapse:collapse; font-size:14px; }
table.grid th, table.grid td { padding:6px 8px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
table.grid th { background:#f0f3f6; }
table.grid td.num, table.grid th.num { text-align:right; }
table.grid tr.off td { color:var(--muted); }
.warn { color:#b54708; font-weight:bold; }
.notice { background:#fff8e6; border:1px solid #f3d38a; padding:10px 12px; border-radius:4px; margin-bottom:12px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px; }
.filters select, .filters input { width:auto; display:inline-block; margin:0; }
.cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:0 16px; }
label.check { font-weight:normal; display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; }
label.check input { margin-top:3px; }
label small, fieldset small { display:block; font-weight:normal; }
fieldset { border:1px solid var(--line); border-radius:4px; margin:0 0 14px; padding:10px 14px; }
textarea { display:block; width:100%; margin-top:4px; padding:8px 10px; border:1px solid var(--line); border-radius:4px; font:inherit; }
.default-submit { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* links in content */
main a { color:var(--accent); }
main a.btn { color:#fff; }
table.grid td a { font-weight:bold; text-decoration:none; }
table.grid td a:hover { text-decoration:underline; }
.btn:hover, button:not(.link):not(.secondary):not(:disabled):hover { filter:brightness(.92); }

/* AM portal */
.deadline h1 { margin-bottom:6px; }
.deadline.locked { border-left:4px solid var(--muted); }
progress.deadline-bar { width:100%; height:10px; appearance:none; border:0; border-radius:5px; background:#e3e8ed; overflow:hidden; }
progress.deadline-bar::-webkit-progress-bar { background:#e3e8ed; border-radius:5px; }
progress.deadline-bar::-webkit-progress-value { background:var(--accent); border-radius:5px; }
progress.deadline-bar::-moz-progress-bar { background:var(--accent); border-radius:5px; }
.section h2 { margin:0; }
table.portal input[type=text] { display:inline-block; width:80px; margin:0; padding:4px 6px; text-align:right; }
table.portal select { display:inline-block; width:auto; margin:0; padding:4px 6px; }
table.portal label.check { margin:0; align-items:center; }
table.portal tr.err td { background:#fdecea; }
.rowerr { color:var(--err); font-size:12px; font-weight:bold; white-space:normal; max-width:260px; }
.badge { display:inline-block; font-size:11px; padding:1px 6px; border-radius:8px; background:#fff1f1; color:var(--accent); border:1px solid #f5c2bd; white-space:nowrap; }

/* reports: tiles + server-side SVG charts (categorical slots 1–3, validated) */
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin:0 0 16px; }
.tile { border:1px solid var(--line); border-radius:6px; padding:10px 14px; display:flex; flex-direction:column; gap:2px; }
.tile strong { font-size:22px; }
.tile small { font-size:12px; }
table.grid tr.total td { font-weight:bold; border-top:2px solid var(--line); }
table.grid td.up { color:#006300; }
table.grid td.down { color:var(--err); }
svg.chart { width:100%; max-width:900px; height:auto; display:block; background:#fcfcfb; border-radius:4px; }
svg.chart .grid { stroke:#e1e0d9; stroke-width:1; }
svg.chart .base { stroke:#c3c2b7; stroke-width:1; }
svg.chart .tick { fill:#898781; font-size:12px; }
svg.chart .lbl  { fill:#52514e; font-size:12px; }
svg.chart .line { fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
svg.chart .dot  { stroke:#fcfcfb; stroke-width:2; }
svg.chart .hit  { fill:transparent; }
svg.chart .pt:hover .dot { r:6; }
svg.chart .pt:hover .bar { opacity:.85; }
svg.chart .s1 { stroke:#2a78d6; } svg.chart .dot.s1, svg.chart .bar.s1 { fill:#2a78d6; }
svg.chart .s2 { stroke:#eb6834; } svg.chart .dot.s2 { fill:#eb6834; }
svg.chart .s3 { stroke:#1baf7a; } svg.chart .dot.s3 { fill:#1baf7a; }
svg.chart .bar { stroke:none; }
ul.legend { list-style:none; display:flex; gap:18px; padding:0; margin:8px 0 0; font-size:13px; color:#52514e; flex-wrap:wrap; }
ul.legend .key { display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:6px; }
ul.legend .key.s1 { background:#2a78d6; } ul.legend .key.s2 { background:#eb6834; } ul.legend .key.s3 { background:#1baf7a; }
.tip { position:absolute; z-index:10; background:#0b0b0b; color:#fff; font-size:12px; padding:4px 8px; border-radius:4px; pointer-events:none; white-space:nowrap; }
table.sortable th.sort { cursor:pointer; user-select:none; }
table.sortable th.sort:hover { text-decoration:underline; }
table.sortable th[data-dir="asc"]::after { content:" ▲"; font-size:10px; }
table.sortable th[data-dir="desc"]::after { content:" ▼"; font-size:10px; }
.notice.test { background:#fdecea; border-color:#f5c2bd; color:var(--err); }
.notice .btn { margin-left:12px; }
.cols2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:0 20px; }
small.up { color:#006300; } small.down { color:var(--err); }
section.order.bad { border-left:4px solid var(--err); }
section.order h3 { font-size:13px; margin:12px 0 6px; }
table.grid.kv th { width:150px; }
p.small { font-size:13px; margin:0 0 6px; }
p.up, span.up { color:#1a7f37; }
table.grid.kv td { white-space:normal; }
.cols2 > * { min-width:0; overflow-x:auto; }
/* licence providers (§14) */
.prov { display:inline-block; font-size:10px; font-weight:600; letter-spacing:.03em; padding:1px 6px; border-radius:3px; white-space:nowrap; vertical-align:middle; }
.prov-bits { background:#e8eef6; color:#27456b; border:1px solid #c6d3e4; }
.prov-printanista { background:#eef6ea; color:#2f5d1f; border:1px solid #cde3c2; }
.badge.new { background:#e8f4ff; color:#0b5394; border-color:#b8d8f5; }
.notice.warnbox { border-color:#e8b04a; }
/* footer: red line like the header, version left, copyright right (always at the bottom of the window) */
body { min-height:100vh; display:flex; flex-direction:column; }
body > main { flex:1 0 auto; width:100%; box-sizing:border-box; }
.foot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; padding:10px 22px; background:#fff;
        border-top:2px solid var(--brand-red); color:var(--muted); font-size:12.5px; }
/* "Log out?" confirmation */
.dlg { border:0; border-top:4px solid var(--brand-red); border-radius:6px; padding:22px 26px; box-shadow:0 10px 40px rgba(0,0,0,.25); min-width:300px; }
.dlg::backdrop { background:rgba(31,41,51,.45); }
.dlg .dlg-q { font-size:17px; font-weight:bold; margin:0 0 16px; }
.dlg .actions { display:flex; gap:10px; justify-content:flex-end; }

/* admin: email users */
#mailer [hidden] { display:none; }
.m-label { font-weight:bold; margin:0 0 4px; }
.m-users { border:1px solid var(--line); border-radius:4px; margin:0 0 12px; padding:8px 12px 4px; max-height:260px; overflow:auto; columns:2 260px; }
#mailer legend { font-weight:bold; padding:0 6px; }
.m-users label.check { font-weight:normal; margin:0 0 6px; break-inside:avoid; }
.ed-bar { display:flex; gap:4px; flex-wrap:wrap; align-items:center; padding:6px; border:1px solid var(--line); border-bottom:0; border-radius:4px 4px 0 0; background:var(--bg); }
.ed-bar button { padding:5px 11px; min-width:34px; background:#fff; border:1px solid var(--line); }
.ed-bar .sep { width:1px; align-self:stretch; background:var(--line); margin:0 4px; }
.ed-linkrow { display:flex; gap:6px; padding:6px; border:1px solid var(--line); border-bottom:0; background:#fff; }
.ed-linkrow input { margin:0; flex:1; }
.ed { min-height:240px; max-height:520px; overflow:auto; padding:12px 14px; border:1px solid var(--line); border-radius:0 0 4px 4px; background:#fff; margin-bottom:14px; line-height:1.5; }
.ed:focus { outline:2px solid #9db7d1; outline-offset:-1px; }
.ed p { margin:0 0 12px; }
.ed h3 { font-size:16px; margin:16px 0 8px; }
.ed ul, .ed ol { margin:0 0 12px; padding-left:24px; }
.ed a { color:var(--accent); }
.mail-cols { display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start; }
.mail-frame { flex:1 1 640px; min-width:320px; height:620px; border:1px solid var(--line); border-radius:4px; background:var(--bg); }
.mail-list { flex:1 1 380px; max-height:620px; overflow:auto; }
.mail-send { margin-top:18px; align-items:center; }

/* reports: margin */
.wl { display:inline-block; font-size:12px; font-weight:bold; padding:1px 8px; border-radius:8px; }
.wl.win { background:#e8f3ea; color:#1a7f37; border:1px solid #b7dcc0; }
.wl.lost { background:#fdecea; color:var(--err); border:1px solid #f5c2bd; }
.tile strong.up { color:#1a7f37; } .tile strong.down { color:var(--err); }
table.grid td.pay { background:#fff8e6; }
/* shown only on paper / in "Export PDF" (assets/print.css) */
.print-only { display:none; }
.notice label.check { margin:8px 0 0; font-weight:bold; }
/* supplier invoice check */
table.supplier input[type=text] { display:inline-block; width:90px; margin:0; padding:4px 6px; text-align:right; }
table.supplier td:first-child { white-space:normal; }
table.supplier .rowerr { max-width:none; }
details > summary { cursor:pointer; color:var(--accent); margin:10px 0 6px; }
#supplier .actions { margin-top:14px; }
/* supplier invoice check: groups of other rows with a tick (counted / not counted) */
label.tick { display:inline; margin:0; font-weight:normal; cursor:pointer; }
label.tick input[type=checkbox] { display:inline-block; width:auto; margin:0 6px 0 0; vertical-align:middle; }
#supplier-exp tr.off td { color:#8a949c; }
#supplier-exp tr.off td.num { text-decoration:line-through; }
table.supplier .rowerr[hidden], #supplier-dirty[hidden] { display:none; }
#supplier-dirty { margin-left:12px; }
/* customer ON HOLD in Sage (app/hold.php) — information only. Not the light-red row: that one means "error on this row". */
.badge.hold { background:var(--err); color:#fff; border-color:var(--err); font-weight:bold; letter-spacing:.3px; }
table.grid tr.onhold td:first-child { box-shadow:inset 4px 0 0 var(--err); }
table.grid tr.onhold td { background:#fff7f6; }
table.portal tr.onhold.err td { background:#fdecea; }
.notice.hold { background:#fff7f6; border-color:#f5c2bd; border-left:4px solid var(--err); }