/* coolhanx design system — U-FE1
   Bound to the confirmed prototype (ink/teal/seal, mono numerics).
   Theme-aware (light/dark). No external assets (self-contained, CSP-safe). */
:root{
  --ground:#EEF1F5; --surface:#FFFFFF; --surface-2:#F7F9FC;
  --ink:#0F1B2D; --ink-2:#33465E; --muted:#5D6B7E; --faint:#8B97A8;
  --line:#E1E7EF; --line-2:#CFD8E4;
  /* 2026-07-29: the accent used to be teal (#0E9E98), a colour that appears nowhere in the
     CoolHan mark (red #D0202C + blue #1E4FA3) and nowhere in the tenant portal (blue #3b4fe4).
     Three surfaces claimed three different brand colours, and every status colour was muted
     enough to read as "some kind of grey-green". Now: the logo's blue, raised in chroma for
     screen use, with the logo's red as the secondary. Every value below is checked against
     WCAG AA for the way it is actually used (see the ratios in the commit notes). */
  --accent:#1F5FE0; --accent-strong:#1747B0; --accent-soft:#E4EDFF;
  --seal:#D0202C; --seal-soft:#FDE7E8;
  --good:#0E8A45; --good-soft:#DCF7E7; --warn:#9A5B00; --warn-soft:#FFF1D6;
  --crit:#D92D20; --crit-soft:#FDE6E4; --info:#1F5FE0;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code","Roboto Mono",Menlo,Consolas,monospace;
  --sh-1:0 1px 2px rgba(16,27,45,.05); --sh-2:0 4px 16px rgba(16,27,45,.08);
  --r:11px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0A1120; --surface:#0F1A2B; --surface-2:#0C1524;
  --ink:#EAF1F8; --ink-2:#C2D0E0; --muted:#93A2B5; --faint:#63728A;
  --line:#20304A; --line-2:#2A3D5A;
  --accent:#5B93FF; --accent-strong:#8FB6FF; --accent-soft:#12224A;
  --seal:#FF6B75; --seal-soft:#3A1418;
  --good:#3ECF8E; --good-soft:#0F2C20; --warn:#F5A623; --warn-soft:#33240F;
  --crit:#FF6B5E; --crit-soft:#341613; --info:#5B93FF;
  --sh-1:0 1px 2px rgba(0,0,0,.35); --sh-2:0 6px 22px rgba(0,0,0,.4);
}}
:root[data-theme="dark"]{
  --ground:#0A1120; --surface:#0F1A2B; --surface-2:#0C1524;
  --ink:#EAF1F8; --ink-2:#C2D0E0; --muted:#93A2B5; --faint:#63728A;
  --line:#20304A; --line-2:#2A3D5A;
  --accent:#5B93FF; --accent-strong:#8FB6FF; --accent-soft:#12224A;
  --seal:#FF6B75; --seal-soft:#3A1418;
  --good:#3ECF8E; --good-soft:#0F2C20; --warn:#F5A623; --warn-soft:#33240F;
  --crit:#FF6B5E; --crit-soft:#341613; --info:#5B93FF;
  --sh-1:0 1px 2px rgba(0,0,0,.35); --sh-2:0 6px 22px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
a{color:var(--accent-strong)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;letter-spacing:-.01em;line-height:1.15}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}

.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;font-size:1.15rem}
.brand .x{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;background:var(--ink);color:var(--ground);font-family:var(--mono);font-weight:700}
.brand b{color:var(--accent-strong)}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:999px}
.b-seal{background:var(--seal-soft);color:var(--seal);border:1px solid color-mix(in srgb,var(--seal) 35%,transparent)}
.b-good{background:var(--good-soft);color:var(--good)} .b-warn{background:var(--warn-soft);color:var(--warn)}
.b-crit{background:var(--crit-soft);color:var(--crit)} .b-info{background:var(--accent-soft);color:var(--accent-strong)}
.b-muted{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;font-weight:650;font-size:.9rem;padding:10px 15px;border:1px solid transparent;transition:transform .1s,background .15s}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff;width:100%}
.btn-primary:hover:not([disabled]){background:var(--accent-strong);color:#fff}
.btn-ghost{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent)}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:40px 20px;
  background:radial-gradient(1200px 500px at 50% -10%, var(--accent-soft), transparent 60%), var(--ground)}
.login-card{width:min(400px,94vw);background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--sh-2);padding:34px 30px}
.login h1{font-size:1.35rem;font-weight:750;margin:22px 0 4px}
.login p.sub{color:var(--muted);margin:0 0 22px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:.8rem;font-weight:600;color:var(--ink-2)}
.field input{background:var(--surface-2);border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;color:var(--ink);font-size:.95rem}
.field input:focus{border-color:var(--accent);background:var(--surface)}
.twofa{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.78rem;color:var(--muted)}
.form-msg{min-height:18px;font-size:.82rem;margin:4px 0 12px}
.form-msg.err{color:var(--crit)} .form-msg.ok{color:var(--good)}
.login-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:.74rem;color:var(--faint);display:flex;gap:10px;flex-wrap:wrap}

/* ---------- app shell ---------- */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;gap:4px}
.side .brand{padding:6px 8px 14px}
.navlbl{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:700;padding:12px 10px 5px}
.nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--ink-2);font-weight:550;font-size:.9rem;border:1px solid transparent;background:none;width:100%;text-align:left}
.nav:hover{background:var(--surface-2);color:var(--ink)}
.nav.active{background:var(--accent-soft);color:var(--accent-strong);border-color:color-mix(in srgb,var(--accent) 22%,transparent);font-weight:650}
.nav .ic{width:18px;text-align:center;font-family:var(--mono);font-size:.85rem;opacity:.9}
.nav .cnt{margin-left:auto;font-size:.7rem;background:var(--surface-2);color:var(--muted);padding:1px 7px;border-radius:999px;font-family:var(--mono)}
.side-foot{margin-top:auto;padding:10px 8px;font-size:.72rem;color:var(--faint);border-top:1px solid var(--line)}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{height:56px;display:flex;align-items:center;gap:14px;padding:0 22px;border-bottom:1px solid var(--line);background:var(--surface)}
.topbar .tenant{font-weight:700}
.topbar .spacer{margin-left:auto}
.icobtn{height:34px;min-width:34px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);display:inline-grid;place-items:center;color:var(--ink-2);font-size:.8rem}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--ground);display:grid;place-items:center;font-weight:700;font-size:.8rem}
.content{padding:24px 26px;overflow:auto}
.page-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-size:1.5rem;font-weight:780}
.page-head p{color:var(--muted);margin:3px 0 0;font-size:.86rem}
.ph-actions{margin-left:auto;display:flex;gap:9px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{padding:16px 18px;display:flex;flex-direction:column;gap:3px}
.kpi .lab{font-size:.74rem;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.kpi .val{font-size:1.9rem;font-weight:800;letter-spacing:-.02em}
.kpi .val small{font-size:.8rem;color:var(--muted);font-weight:600}
.kpi.attn .val{color:var(--warn)} .kpi.crit .val{color:var(--crit)}

.pipe{display:flex;gap:0;padding:16px 18px;overflow-x:auto}
.pstep{flex:1;min-width:112px;display:flex;flex-direction:column;gap:6px;position:relative;padding-right:12px}
.pstep::after{content:"\2192";position:absolute;right:-2px;top:26px;color:var(--line-2)}
.pstep:last-child::after{display:none}
.pstep .pn{font-family:var(--mono);font-size:.66rem;color:var(--accent-strong);letter-spacing:.06em}
.pstep .pt{font-size:.82rem;color:var(--ink-2);font-weight:600}
.pstep .pv{font-size:1.35rem;font-weight:800}

table.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--line)}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl .r{text-align:right} .amt{font-family:var(--mono);font-weight:600}
.tbl-click tbody tr{cursor:pointer}
.sect-t{font-size:.95rem;font-weight:700;padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.sect-t .cnt{margin-left:auto}
.empty{padding:26px 18px;text-align:center;color:var(--muted);font-size:.86rem}
/* shared key/value row (was duplicated inline in account/belege) */
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)} .kv .v{font-weight:600;text-align:right}
/* shared two-column form grid (was undefined -> fremdbelege review form didn't lay out) */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}

/* ---------- invoice editor (U-FE2) ---------- */
.edit-grid{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
@media(max-width:1000px){.edit-grid{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.fld label{font-size:.76rem;font-weight:600;color:var(--ink-2)}
.fld select,.fld input,.fld textarea{background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;padding:9px 11px;color:var(--ink);font-size:.9rem;font-family:inherit;box-sizing:border-box}
/* A field always fills the box it was put in. Without this an input nested one level
   deeper than `.fld` keeps its intrinsic ~176px and spills over its neighbour - which is
   what PLZ did to Ort on the company form until 2026-08-24. Checkboxes are excluded:
   stretching one to the full column turns a tick box into a banner. */
.fld input:not([type=checkbox]):not([type=radio]):not(.visually-hidden),.fld select:not(.visually-hidden),.fld textarea:not(.visually-hidden){width:100%}
/* Pointer targets: the browser default is 13x13, well under the 24x24 WCAG 2.5.8 asks for,
   on screens a bookkeeper clicks all day. */
input[type=checkbox],input[type=radio]{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
label:has(> input[type=checkbox]),label:has(> input[type=radio]){cursor:pointer;padding:3px 0;display:inline-flex;align-items:center;gap:7px}
.fld select:focus,.fld input:focus,.fld textarea:focus{border-color:var(--accent);background:var(--surface)}
.pcard{padding:16px 18px}
.pcard h3{font-size:.95rem;font-weight:700;margin-bottom:12px}
.tasklist{display:flex;flex-direction:column}
.task-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.task-row:last-child{border-bottom:none}
.task-row:hover{background:var(--surface-2)}
.task-row .tk-dot{width:9px;height:9px;border-radius:999px;flex:none;background:var(--good)}
.task-row.attn .tk-dot{background:var(--warn)} .task-row.crit .tk-dot{background:var(--crit)}
.task-row .tk-lab{flex:1;font-size:.88rem;font-weight:600}
.task-row .tk-n{font-family:var(--mono);font-weight:700;font-size:.9rem}
.task-row.attn .tk-n{color:var(--warn)} .task-row.crit .tk-n{color:var(--crit)}
.task-row .tk-arrow{color:var(--muted);font-size:.8rem}
.badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px}
.lines-t{width:100%;border-collapse:collapse;font-size:.85rem}
.lines-t th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:8px 8px;border-bottom:1px solid var(--line)}
.lines-t td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.lines-t input,.lines-t select{width:100%;background:var(--surface-2);border:1px solid var(--line-2);border-radius:7px;padding:7px 8px;color:var(--ink);font-size:.85rem;font-family:inherit}
.lines-t .r{text-align:right}
.lines-t .amt{font-family:var(--mono);font-variant-numeric:tabular-nums}
.line-note{font-size:.72rem;color:var(--muted);margin-top:3px}
.line-warn{font-size:.72rem;color:var(--warn);margin-top:3px}
.rmline{background:none;border:1px solid var(--line-2);border-radius:6px;color:var(--crit);width:26px;height:26px;line-height:1}
.totbox{padding:16px 18px}
.totrow{display:flex;justify-content:space-between;padding:7px 0;font-size:.9rem}
.totrow.grand{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-weight:800;font-size:1.05rem}
.totrow .v{font-family:var(--mono);font-variant-numeric:tabular-nums}
.result-ok{padding:14px 16px;border-radius:10px;background:var(--good-soft);border:1px solid color-mix(in srgb,var(--good) 30%,transparent);margin-bottom:14px}
.result-err{padding:14px 16px;border-radius:10px;background:var(--crit-soft);border:1px solid color-mix(in srgb,var(--crit) 30%,transparent);margin-bottom:14px}
.result-err ul{margin:8px 0 0;padding-left:18px}
.kosit-note{font-size:.74rem;color:var(--muted);display:flex;align-items:center;gap:7px;margin-top:12px}

/* PC-only gate (work zone is desktop only per device policy) */
.pc-gate{display:none;min-height:100vh;place-items:center;padding:40px;text-align:center}
.pc-gate .card{max-width:420px;padding:30px 26px}
@media(max-width:820px){
  .app,.login{display:none!important}
  .pc-gate{display:grid}
}

/* CoolHanX brand (logo + tri-color wordmark: Cool=blue, Han=red, X=accent) */
:root{--brand-blue:#1E4FA3;--brand-red:#D0202C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--brand-blue:#5B85D6;--brand-red:#E4606A}}
:root[data-theme="dark"]{--brand-blue:#5B85D6;--brand-red:#E4606A}
.brand .mark{display:block}
.brand .wm{display:inline-flex;letter-spacing:-.02em}
.brand .wm-cool{color:var(--brand-blue)}
.brand .wm-han{color:var(--brand-red)}
.brand .wm b{color:var(--accent-strong)}