:root{--bg:#EEF1F4;--sf:#fff;--ink:#17212B;--mu:#5E6B78;--ln:#D5DBE1;--ac:#1F4FD8;--act:#fff;--ok:#1B7F4B;--wa:#B26A00;--er:#C23B3B;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#10161C;--sf:#18212A;--ink:#E7ECF1;--mu:#92A0AD;--ln:#2B3743;--ac:#6B93FF;--act:#0B1220;--ok:#4CC38A;--wa:#E3A23B;--er:#F07575}}
:root[data-theme="dark"]{--bg:#10161C;--sf:#18212A;--ink:#E7ECF1;--mu:#92A0AD;--ln:#2B3743;--ac:#6B93FF;--act:#0B1220;--ok:#4CC38A;--wa:#E3A23B;--er:#F07575}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 'Schibsted Grotesk',system-ui,sans-serif;font-variant-numeric:tabular-nums}
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
#side{background:var(--sf);border-right:1px solid var(--ln);padding:18px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{font-weight:700;font-size:20px;margin-bottom:8px;line-height:1.2}.brand small{display:block;font-weight:400;font-size:12px;color:var(--mu);margin-top:2px}
#side select{width:100%}
.nv{all:unset;cursor:pointer;padding:8px 10px;border-radius:6px;color:var(--mu);display:block}
.nv:hover{background:var(--bg)}.nv.on{background:var(--ac);color:var(--act);font-weight:500}.nv:focus-visible,.b:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.sp{flex:1}
#main{padding:26px 30px;max-width:1100px;width:100%}
h1{font-size:26px;margin:0 0 4px}h2{margin:0}h3{margin:0 0 12px}.mu{color:var(--mu)}
.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.b{font:inherit;cursor:pointer;border:1px solid var(--ln);background:var(--sf);color:var(--ink);padding:7px 13px;border-radius:6px}
.b:hover{border-color:var(--ac)}.b.p{background:var(--ac);border-color:var(--ac);color:var(--act);font-weight:500}.b.s{padding:4px 9px;font-size:13px}.b.d{color:var(--er)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--ln);border-radius:6px;padding:7px 9px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ac);outline-offset:-1px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:22px}
.st{background:var(--sf);border:1px solid var(--ln);border-radius:8px;padding:14px}.st b{display:block;font-size:22px;margin-top:2px}
.tw{overflow-x:auto;background:var(--sf);border:1px solid var(--ln);border-radius:8px}
table{border-collapse:collapse;width:100%}th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--ln);white-space:nowrap}th{color:var(--mu);font-weight:500;font-size:13px}tr:last-child td{border:0}
.n{text-align:right}td.act{text-align:right}td.act .b{margin-left:4px}
.tg{display:inline-block;padding:1px 9px;border-radius:99px;font-size:12.5px;border:1px solid currentColor}
.Paid,.Accepted,.Invoiced{color:var(--ok)}.Partial,.Sent,.Open{color:var(--wa)}.Overdue,.Rejected,.Unpaid{color:var(--er)}.Draft{color:var(--mu)}
.em{padding:34px;text-align:center;color:var(--mu)}
.ov{position:fixed;inset:0;background:rgba(10,16,22,.55);display:flex;align-items:flex-start;justify-content:center;padding:4vh 12px;overflow:auto;z-index:9}
.md{background:var(--sf);border-radius:10px;padding:20px;width:100%;max-width:520px}.md.wide{max-width:900px}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.fg label{display:block;font-size:13px;color:var(--mu)}.fg label.w{grid-column:1/-1}.fg input,.fg select,.fg textarea{margin-top:3px;color:var(--ink)}
.row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.mbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.el td{padding:6px 5px}.el input,.el select{padding:6px}
.tot{margin-left:auto;width:280px;margin-top:12px}.tot div{display:flex;justify-content:space-between;padding:3px 0}.tot .g{border-top:1px solid var(--ln);font-weight:700;font-size:17px;margin-top:4px;padding-top:7px}
.sheet{background:#fff;color:#111;border:1px solid var(--ln);padding:34px;border-radius:4px}.sheet .mu{color:#555}
.sh{display:flex;justify-content:space-between;gap:20px;margin-bottom:22px}.sh .cn{font-size:20px}.rt{text-align:right}.bt{margin-bottom:18px}.bt span{display:block}
.sheet table{margin-bottom:6px}.sheet th,.sheet td{border-bottom:1px solid #ddd;padding:7px 6px;color:#111;white-space:normal}.sheet th{color:#555}
.sheet .tot{width:260px}.ft{margin-top:22px;font-size:13px;color:#555;white-space:pre-line}
.wel{max-width:480px;margin:12vh auto;text-align:center}.wel h1{font-size:32px}.wel .fg{text-align:left}.lg{display:block;max-height:56px;max-width:200px;margin-bottom:8px}
@media(max-width:760px){.app{grid-template-columns:1fr}#side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--ln)}.brand,#side select{flex-basis:100%}.sp{display:none}#main{padding:18px 14px}.fg{grid-template-columns:1fr}.sh{flex-direction:column}.rt{text-align:left}.sheet{padding:18px}}
@media print{body *{visibility:hidden}.sheet,.sheet *{visibility:visible}.sheet{position:absolute;left:0;top:0;width:100%;border:0}.ov{position:static;background:none}}
