/* Kano Billing — Kano Kimonos brand: near-black / off-white, brush enso, Swiss minimal. Density: dashboard. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
  --ink:#0C0A09;--ink-2:#1C1917;--ink-3:#44403C;--muted:#57534E;--muted-2:#78716C;
  --bg:#F7F5F2;--card:#FFFFFF;--line:#E7E2DC;--line-2:#D6D3D1;--soft:#F1EEE9;
  --accent:#B3261E;--accent-ink:#FFFFFF;
  --ok:#166534;--ok-bg:#EAF6EE;--warn:#92400E;--warn-bg:#FDF3E3;--err:#B3261E;--err-bg:#FCECEB;--info:#1E3A8A;--info-bg:#E8EEFB;--neutral-bg:#ECE9E4;--violet:#5B21B6;--violet-bg:#EFEAFB;
  --r:6px;--r-lg:10px;--sh:0 1px 2px rgba(12,10,9,.06),0 1px 1px rgba(12,10,9,.03);
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --t:180ms cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font:14px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--ink-2);text-decoration:none;text-underline-offset:2px}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* header */
header.top{background:var(--ink);color:#fff;display:flex;align-items:center;gap:22px;padding:0 var(--sp-5);height:58px;position:sticky;top:0;z-index:20;box-shadow:0 1px 0 rgba(255,255,255,.06)}
header.top .logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;letter-spacing:.14em;font-size:11px;text-transform:uppercase}
header.top .logo img{height:26px;width:auto;display:block}
header.top .logo:hover{text-decoration:none}
header.top nav{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
header.top nav a{color:#D6D3D1;padding:9px 12px;border-radius:var(--r);white-space:nowrap;font-weight:500;font-size:13px;transition:background var(--t),color var(--t);position:relative;min-height:38px;display:flex;align-items:center}
header.top nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
header.top nav a.on{color:#fff;background:rgba(255,255,255,.12)}
header.top nav a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-9px;height:2px;background:var(--accent);border-radius:2px}
header.top .user{color:#A8A29E;font-size:12.5px;white-space:nowrap}header.top .user a{color:#fff}
main{max-width:1320px;margin:0 auto;padding:var(--sp-5) var(--sp-5) 72px;position:relative}
main::before{content:"";position:fixed;right:-140px;bottom:-160px;width:560px;height:560px;background:url(enso.png) no-repeat center/contain;opacity:.035;pointer-events:none;z-index:0}
main>*{position:relative;z-index:1}
h1{font-size:22px;font-weight:800;letter-spacing:-.01em;margin:0 0 var(--sp-4)}h2{font-size:15px;font-weight:700;margin:0 0 var(--sp-3)}
h3{font-size:11px;margin:0 0 var(--sp-2);color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-weight:700}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-4) 18px;margin-bottom:var(--sp-4);box-shadow:var(--sh)}
.grid{display:grid;gap:var(--sp-4)}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:1fr 1fr}}@media(max-width:760px){.g2,.g3,.g4{grid-template-columns:1fr}main{padding:var(--sp-4)}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--sh);border-top:3px solid var(--ink)}
.kpi .v{font-size:24px;font-weight:800;margin-top:2px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.kpi .l{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.kpi.err{border-top-color:var(--err)}.kpi.err .v{color:var(--err)}.kpi.warn{border-top-color:var(--warn)}.kpi.warn .v{color:var(--warn)}.kpi.ok{border-top-color:var(--ok)}.kpi.ok .v{color:var(--ok)}
/* tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:700;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;padding:9px 8px;border-bottom:2px solid var(--ink);white-space:nowrap}
td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:hover td,tr:hover td{background:#FBFAF8}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums}
.tbl-wrap{overflow-x:auto}
/* badges */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:var(--neutral-bg);color:var(--ink-3);white-space:nowrap;letter-spacing:.02em;line-height:1.6}
.badge.draft{background:var(--neutral-bg);color:var(--muted)}.badge.issued,.badge.sent,.badge.open,.badge.info,.badge.invoice,.badge.OSS,.badge.suggested-x{background:var(--info-bg);color:var(--info)}
.badge.paid,.badge.closed,.badge.receipt,.badge.matched,.badge.VATCY{background:var(--ok-bg);color:var(--ok)}
.badge.filed,.badge.VATSLO{background:#DDF3E4;color:#14532D}
.badge.partially_paid,.badge.quote,.badge.suggested,.badge.warning,.badge.VIES{background:var(--warn-bg);color:var(--warn)}
.badge.void,.badge.credit_note,.badge.unmatched,.badge.error,.badge.declined{background:var(--err-bg);color:var(--err)}
.badge.converted,.badge.accepted,.badge.EXP{background:var(--violet-bg);color:var(--violet)}.badge.ignored{background:var(--neutral-bg);color:var(--muted-2)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 14px;border-radius:var(--r);border:1px solid var(--ink);background:var(--ink);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;line-height:1.2;transition:background var(--t),border-color var(--t),color var(--t),transform var(--t)}
.btn:hover{background:var(--ink-3);border-color:var(--ink-3);text-decoration:none}.btn:active{transform:translateY(1px)}
.btn.sec{background:#fff;color:var(--ink);border-color:var(--line-2)}.btn.sec:hover{background:var(--soft);border-color:var(--ink-3)}
.btn.danger{background:#fff;color:var(--err);border-color:#F1B4AF}.btn.danger:hover{background:var(--err-bg)}
.btn.ok{background:var(--ok);border-color:var(--ok)}.btn.ok:hover{background:#14532D;border-color:#14532D}
.btn.accent{background:var(--accent);border-color:var(--accent)}.btn.accent:hover{background:#94201A}
.btn.sm{min-height:28px;padding:3px 9px;font-size:12px}.btn[disabled]{opacity:.5;cursor:not-allowed}
form.inline{display:inline}
/* forms */
label{display:block;font-size:11px;color:var(--muted);margin:10px 0 4px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=file],select,textarea{width:100%;min-height:36px;padding:7px 10px;border:1px solid var(--line-2);border-radius:var(--r);font:inherit;font-size:14px;background:#fff;color:var(--ink);transition:border-color var(--t),box-shadow var(--t)}
textarea{min-height:72px}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(12,10,9,.08)}
input[type=file]{padding:6px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}.row>*{flex:1;min-width:140px}.row>.w2{flex:2}.row>.auto{flex:0 0 auto}
.flash{padding:10px 14px;border-radius:var(--r);margin-bottom:14px;border:1px solid;font-weight:500}
.flash.ok{background:var(--ok-bg);border-color:#BFE3CB;color:var(--ok)}.flash.err{background:var(--err-bg);border-color:#F1B4AF;color:var(--err)}.flash.info{background:var(--info-bg);border-color:#C7D4F5;color:var(--info)}
.muted{color:var(--muted)}.small{font-size:12px}.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 14px 12px}.filters>div{min-width:120px}.filters label{margin-top:0}
.lines-table input{padding:5px 7px;min-height:32px}.lines-table td{padding:4px}
.totals{margin-left:auto;width:340px}.totals td{padding:5px 8px}.totals tr.big td{font-weight:800;font-size:16px;border-top:2px solid var(--ink)}
pre{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:12px;overflow:auto;font-size:12px;font-family:"JetBrains Mono",ui-monospace,Menlo,monospace}
.login{max-width:400px;margin:70px auto;text-align:left}.login .brand{display:block;margin:0 auto 22px;height:54px}
.help{font-size:12.5px;color:var(--muted);margin-top:4px;text-transform:none;letter-spacing:0;font-weight:400}
.warnbox{background:var(--warn-bg);border:1px solid #F3D9A6;color:var(--warn);padding:8px 12px;border-radius:var(--r);margin:8px 0;white-space:pre-line}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line-2);margin-bottom:16px;overflow-x:auto}.tabs a{padding:9px 14px;color:var(--muted);font-weight:500;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}.tabs a:hover{color:var(--ink);text-decoration:none}.tabs a.on{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}
details summary{cursor:pointer;color:var(--ink-2);font-weight:500}
.chk{display:flex;align-items:center;gap:8px;margin:8px 0}.chk input{width:18px;height:18px;min-height:0;accent-color:var(--ink)}.chk label{text-transform:none;letter-spacing:0;font-weight:500;font-size:13px;color:var(--ink)}
ol.small li,ul.small li{margin-bottom:4px}