/* ============================================================
   ARLENS — dense ERP interface.
   Light chrome (white header + white menu), black ink, no radii.
   ============================================================ */
:root{
  --ink:#111111; --paper:#ffffff;
  --g0:#fcfcfc; --g1:#f7f7f8; --g2:#f0f0f1; --g3:#e4e4e6; --g4:#d2d2d5; --g5:#9a9aa0; --g6:#6a6a70; --g7:#3a3a3e;
  --hdr:#1a1a1a;
  --ok:#1b8a2a; --warn:#c77d00; --bad:#c62828;
  --focus:#111111;
  --nav:236px;
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html,body{height:100%}
body{font-family:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-size:12px;color:var(--ink);
  background:var(--g1);-webkit-font-smoothing:antialiased}
.mono,td.n,th.n,.kpi-val,.num{font-family:'JetBrains Mono',Consolas,Menlo,monospace;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:12px;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.muted{color:var(--g6)} .tiny{font-size:10.5px} .neg{color:var(--bad)}
.up{color:var(--ok)} .dn{color:var(--bad)} .wn{color:var(--warn)}
.hr{height:1px;background:var(--g3);margin:12px 0}
.right{text-align:right} .nowrap{white-space:nowrap}

/* ------------------------------------------------------------ shell */
#app{display:flex;flex-direction:column;height:100%}
.topbar{flex:0 0 54px;height:54px;background:#fff;border-bottom:1px solid var(--g3);display:flex;align-items:stretch;z-index:60;position:relative;overflow:visible}
.topbar .logo{display:flex;align-items:center;gap:9px;flex:0 0 var(--nav);width:var(--nav);
  padding:0 16px;font-weight:600;letter-spacing:5px;font-size:15px;
  border-right:1px solid var(--g3);color:#000;box-sizing:border-box}
.topbar .logo em{font-style:normal;font-size:8.5px;letter-spacing:1.4px;color:var(--g5);font-weight:600;white-space:nowrap}
.tb-ctx{display:flex;align-items:stretch;flex:1;min-width:0;overflow:visible}
.tb-sel{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 16px;border-right:1px solid var(--g3);min-width:0}
.tb-sel label{font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--g5);font-weight:600}
.tb-sel.static b{font-size:12px;font-weight:600}
.tb-right{display:flex;align-items:stretch;margin-left:auto}
.tb-btn{display:flex;align-items:center;gap:7px;padding:0 14px;border-left:1px solid var(--g3);cursor:pointer;
  background:none;border-top:0;border-bottom:0;border-right:0;font-weight:500;color:var(--g7)}
.tb-btn:hover{background:var(--g1);color:#000}
.tb-btn .badge{background:var(--bad);color:#fff;font-size:9px;padding:1px 5px;font-weight:600;font-family:'JetBrains Mono',monospace}
.tb-btn.user{gap:9px}
.avatar{width:28px;height:28px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:600;letter-spacing:.5px;flex:0 0 28px}
.who{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.who b{font-size:11.5px;font-weight:600;color:#000}
.who i{font-style:normal;font-size:9.5px;color:var(--g6)}
.tb-user{position:relative;display:flex}
.menu-pop{position:absolute;right:0;top:54px;background:#fff;border:1px solid var(--g3);min-width:210px;
  box-shadow:0 6px 20px rgba(0,0,0,.09);display:none;z-index:70}
.tb-user.open .menu-pop{display:block}
.menu-pop a{display:block;padding:8px 13px;font-size:12px}
.menu-pop a:hover{background:var(--g1)}
.mp-sep{height:1px;background:var(--g3)}

.body{display:flex;flex:1;min-height:0}
.sidebar{flex:0 0 var(--nav);width:var(--nav);box-sizing:border-box;background:#fff;border-right:1px solid var(--g3);overflow-y:auto;display:flex;flex-direction:column}
.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-thumb{background:var(--g4)}
.nav-grp{padding:13px 15px 5px;font-size:8.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--g5);font-weight:700}
.nav-i{display:flex;align-items:center;padding:6px 15px;font-size:12px;color:var(--g7);border-left:3px solid transparent;cursor:pointer}
.nav-i:hover{background:var(--g1);color:#000}
.nav-i.on{background:var(--g2);color:#000;font-weight:600;border-left-color:#000}
.nav-i .cnt{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--g5)}
.nav-i.on .cnt{color:var(--g7)}
.nav-foot{margin-top:auto;padding:14px 15px 18px}
.rolecard{border:1px solid var(--g3);padding:9px 10px;background:var(--g0)}
.rolecard .rk{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.rolecard p{font-size:10px;color:var(--g6);margin:4px 0 6px;line-height:1.45}
.main{flex:1;overflow-y:auto;min-width:0;background:var(--g1)}

.page-hd{background:#fff;border-bottom:1px solid var(--g3);padding:13px 20px;display:flex;align-items:flex-start;gap:16px;
  position:sticky;top:0;z-index:40}
.page-hd h1{font-size:17px;font-weight:600;letter-spacing:-.25px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.page-hd h1 .hd-sub{font-size:11px;font-weight:400;color:var(--g6);letter-spacing:0}
.page-hd .crumb{font-size:9.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--g6);margin-bottom:3px;font-weight:600}
.page-hd .acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.wrap{padding:15px 20px 48px}

/* ----------------------------------------------------------- atoms */
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;border:1px solid var(--ink);
  padding:6px 13px;cursor:pointer;font-weight:500;line-height:16px;white-space:nowrap;height:30px}
.btn:hover{background:#333;border-color:#333}
.btn.sec{background:#fff;color:var(--ink);border-color:var(--g4)}
.btn.sec:hover{background:var(--g1);border-color:var(--ink)}
.btn.dgr{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.dgr:hover{background:#a71d1d;border-color:#a71d1d}
.btn.sm{height:24px;padding:2px 9px;font-size:11px}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn.xls::before{content:'';width:11px;height:11px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v8m0 0L5 6m3 3 3-3M2 12v2h12v-2'  stroke='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v8m0 0L5 6m3 3 3-3M2 12v2h12v-2' stroke='%23000' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") center/contain no-repeat}
.lnk{border-bottom:1px solid var(--g4);cursor:pointer}
.lnk:hover{border-bottom-color:#000}
.pill{display:inline-block;padding:1px 6px;border:1px solid var(--g4);font-size:10px;font-weight:500;white-space:nowrap;background:#fff}
.pill.ok{color:var(--ok);border-color:#9ed3a6} .pill.wn{color:var(--warn);border-color:#e6c489}
.pill.bad{color:var(--bad);border-color:#e2a1a1} .pill.ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.dot{display:inline-block;width:7px;height:7px;margin-right:6px;vertical-align:middle;background:var(--g5)}
.dot.ok{background:var(--ok)}.dot.wn{background:var(--warn)}.dot.bad{background:var(--bad)}

.card{background:#fff;border:1px solid var(--g3);margin-bottom:14px}
.card>h3{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.1px;padding:10px 13px;
  border-bottom:1px solid var(--g3);background:var(--g0);display:flex;align-items:center;gap:10px}
.card>h3 .r{margin-left:auto;font-weight:400;text-transform:none;letter-spacing:0;color:var(--g6);font-size:11px}
.card .pad{padding:13px}
.kpis{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:1px;background:var(--g3);
  border:1px solid var(--g3);margin-bottom:14px}
/* The strip holds one line on a normal desktop. It only folds when the tiles
   would genuinely be too narrow to read, and then to the count the screen asked
   for rather than to an arbitrary four. */
@media(max-width:1400px){.kpis{grid-template-columns:repeat(min(var(--n,4),var(--wrap,4)),minmax(0,1fr))}}
@media(max-width:1080px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.kpis{grid-template-columns:1fr}}

/* Density steps: six, seven and nine-plus tiles each give up a little padding
   and type size so the row stays on one line instead of wrapping. */
.kpis.k6 .kpi{padding:11px 12px}
.kpis.k6 .kpi .kpi-val{font-size:18px}
.kpis.k7 .kpi{padding:10px 11px}
.kpis.k7 .kpi .lbl{font-size:9px;letter-spacing:.4px}
.kpis.k7 .kpi .kpi-val{font-size:16.5px;letter-spacing:-.3px}
.kpis.k7 .kpi .kpi-val.md{font-size:14.5px}
.kpis.k7 .kpi .kpi-val.sm{font-size:13px}
.kpis.k7 .kpi .kpi-val.xs{font-size:11.5px}
.kpis.k9 .kpi{padding:9px 10px}
.kpis.k9 .kpi .lbl{font-size:8.5px;letter-spacing:.3px}
.kpis.k9 .kpi .kpi-val{font-size:15px;letter-spacing:-.3px}
.kpis.k9 .kpi .kpi-val.md{font-size:13.5px}
.kpis.k9 .kpi .kpi-val.sm{font-size:12px}
.kpis.k9 .kpi .kpi-val.xs{font-size:11px}
.kpis.k7 .kpi .sub,.kpis.k9 .kpi .sub{font-size:9.5px}
.kpi{background:#fff;padding:11px 13px;min-width:0;overflow:hidden}
/* a lone tile on the final row stretches to fill it rather than sitting orphaned */
/* the strip now has exactly as many columns as tiles, so nothing needs to stretch */
.kpi .lbl{font-size:9px;text-transform:uppercase;letter-spacing:1.1px;color:var(--g6);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .kpi-val{font-size:21px;font-weight:500;margin:5px 0 3px;letter-spacing:-.6px;
  white-space:nowrap;overflow:hidden;text-overflow:clip;line-height:1.15}
.kpi .kpi-val.md{font-size:17px;letter-spacing:-.4px}
.kpi .kpi-val.sm{font-size:14.5px;letter-spacing:-.2px}
.kpi .kpi-val.xs{font-size:12.5px;letter-spacing:0}
.kpi .sub{font-size:10.5px;color:var(--g6);line-height:1.45;overflow-wrap:anywhere}
.split{display:grid;gap:14px}
.s-2{grid-template-columns:1fr 1fr} .s-3{grid-template-columns:1fr 1fr 1fr}
.s-64{grid-template-columns:1.55fr 1fr} .s-46{grid-template-columns:1fr 1.55fr}
@media(max-width:1240px){.s-2,.s-3,.s-64,.s-46{grid-template-columns:1fr}}

/* ---------------------------------------------------------- tables
   ARLENS-CSS-BUILD 2026.10.05-1

   Columns size to their content; the wrapper scrolls horizontally when the
   total exceeds the viewport. Nothing wraps. Breaking "12-Aug-2026 – 18-Aug-2026"
   across five lines to avoid a scrollbar makes every row five times taller and
   the whole grid unreadable — a horizontal scrollbar is the cheaper trade.

   Long free text (an audit detail, a bank narration) is capped and ellipsised
   rather than wrapped, so one verbose row cannot dictate the height of the
   table. The full value is in the title attribute and in the export. */
table{width:100%;border-collapse:collapse;font-size:11.5px;table-layout:auto}
thead th{background:var(--hdr);color:#fff;text-align:left;padding:8px 9px;font-weight:500;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.7px;white-space:nowrap;position:sticky;top:0;z-index:2}
thead th.n{text-align:right}
thead th a.thsort{color:#fff;border-bottom:1px dotted #777}
thead th a.thsort:hover{border-bottom-color:#fff}
tbody td{padding:6px 9px;border-bottom:1px solid var(--g3);vertical-align:top;
  white-space:nowrap;word-break:keep-all;overflow-wrap:normal}
/* a column that asked to wrap now truncates instead — same intent, fixed height */
tbody td.cwrap,thead th.cwrap{white-space:nowrap;max-width:520px;overflow:hidden;text-overflow:ellipsis}
/* secondary lines inside a cell are their own block, and equally do not wrap */
tbody td .tiny,tbody td .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* (secondary lines are inline — see ONE ROW = ONE LINE below) */
tbody tr:nth-child(even){background:var(--g0)}
tbody tr:hover{background:#ececee}
tbody td.n{text-align:right}
tbody tr.tot{background:var(--g2)!important;font-weight:600}
tbody tr.tot td{border-top:2px solid var(--ink);border-bottom:0}
tbody tr.grp{background:var(--g2)!important;font-weight:600}
tbody td.empty{padding:26px;text-align:center;color:var(--g6);background:#fff}
.tbl-wrap{overflow-x:auto;overflow-y:visible} .tbl-scroll{overflow:auto;max-height:520px}
/* a hint that there is more to the right, rather than a silently clipped table */
.tbl-wrap,.tbl-scroll{scrollbar-width:thin}

/* --------------------------------------------------- forms & selects */
.filters{background:#fff;border:1px solid var(--g3);padding:9px 11px;display:flex;gap:9px;align-items:flex-end;
  flex-wrap:wrap;margin-bottom:13px}
.f{display:flex;flex-direction:column;gap:3px}
.f label{font-size:8.5px;text-transform:uppercase;letter-spacing:1.1px;color:var(--g6);font-weight:700}
.fbtns{display:flex;gap:6px}
.in,textarea.in{border:1px solid var(--g4);background:#fff;height:30px;padding:0 9px;min-width:150px}
textarea.in{height:auto;min-height:70px;padding:7px 9px;line-height:1.5;width:100%}
.in:hover{border-color:var(--g5)} .in:focus{border-color:var(--ink);outline:none;box-shadow:inset 0 0 0 1px var(--ink)}
.f.sm .in,.f.sm .sel{min-width:104px} .f.wide .in,.f.wide .sel{min-width:250px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:11px 15px}
.chk{display:flex;align-items:center;gap:7px;cursor:pointer;padding:3px 0;font-size:11.5px}
.chk input{width:13px;height:13px;accent-color:#000}

/* custom dropdown */
.sel{position:relative;min-width:158px;font-size:12px}
.sel.wide{min-width:250px} .sel.sm{min-width:104px}
.sel-btn{width:100%;height:30px;background:#fff;border:1px solid var(--g4);display:flex;align-items:center;gap:8px;
  padding:0 8px 0 9px;cursor:pointer;text-align:left}
.sel-btn:hover{border-color:var(--g5)}
.sel.open .sel-btn{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sel-lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.sel-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--g6);flex:0 0 8px}
.sel.open .sel-caret{border-top-color:var(--ink)}
.sel-pop{position:absolute;top:calc(100% + 2px);left:0;min-width:100%;background:#fff;border:1px solid var(--ink);
  box-shadow:0 8px 24px rgba(0,0,0,.12);display:none;z-index:120;max-width:360px}
.sel.open .sel-pop{display:block}
.sel.up .sel-pop{top:auto;bottom:calc(100% + 2px)}
.sel-search{padding:6px;border-bottom:1px solid var(--g3);background:var(--g0)}
.sel-search input{width:100%;height:26px;border:1px solid var(--g4);padding:0 7px;background:#fff}
.sel-list{max-height:264px;overflow:auto}
.sel-opt{padding:6px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel-opt:hover,.sel-opt.hi{background:var(--g2)}
.sel-opt.on{background:var(--ink);color:#fff;font-weight:500}
.sel-none{display:none;padding:9px 10px;color:var(--g6)}
.sel-pop.empty .sel-none{display:block}
.tb-sel .sel-btn{border:0;height:22px;padding:0;background:none}
.tb-sel .sel-btn:hover .sel-lbl{border-bottom:1px solid var(--g4)}
.tb-sel .sel.open .sel-btn{box-shadow:none}
.tb-sel .sel{min-width:auto;max-width:210px}
.tb-sel .sel-pop{min-width:216px;top:calc(100% + 8px)}
.tb-sel .sel-lbl{font-size:12px;font-weight:600}

/* --------------------------------------------------------- widgets */
.note{background:var(--g0);border-left:3px solid var(--g4);padding:9px 12px;font-size:11.5px;color:var(--g7);
  margin-bottom:13px;line-height:1.55}
.note.w{border-left-color:var(--warn)} .note.b{border-left-color:var(--bad)} .note.g{border-left-color:var(--ok)}
.bar-row{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.bar-row .bl{font-size:10.5px;color:var(--g7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .bt{flex:1;background:var(--g2);height:14px;position:relative;min-width:40px}
.bar-row .bt i{position:absolute;left:0;top:0;bottom:0;background:var(--ink);display:block}
.bar-row .bt i.wn{background:var(--warn)}.bar-row .bt i.bad{background:var(--bad)}.bar-row .bt i.ok{background:#2f8f3c}
.bar-row .bt i em{position:absolute;left:0;top:0;bottom:0;background:var(--bad);display:block}
.bar-row.klik{cursor:pointer} .bar-row.klik:hover .bl{color:#000;text-decoration:underline}
.bar-row .bv{min-width:94px;flex:0 0 auto;text-align:right;font-family:'JetBrains Mono',monospace;
  font-size:11px;white-space:nowrap;padding-left:4px}
.chart{width:100%;display:block}
.chart .cl{font-size:9px;fill:var(--g6);font-family:'JetBrains Mono',monospace}
.chart .cv{font-size:8.5px;fill:var(--g7);font-family:'JetBrains Mono',monospace}
.chart .ax{font-size:8.5px;fill:var(--g5);font-family:'JetBrains Mono',monospace}
.chart .gl{stroke:var(--g3)} .chart .gl0{stroke:var(--g4)}
.chart .axr{font-size:8.5px;fill:var(--warn);font-family:'JetBrains Mono',monospace}
.chart .pv{font-size:8.5px;fill:var(--warn);font-family:'JetBrains Mono',monospace;font-weight:600}
.legend{display:flex;gap:15px;flex-wrap:wrap;font-size:10.5px;color:var(--g7);margin-top:7px}
.stack{display:flex;height:16px;border:1px solid var(--g3);overflow:hidden;background:#fff}
.stack i{display:block;height:100%}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:11.5px}
dl.kv dt{color:var(--g6);white-space:nowrap} dl.kv dd{font-weight:500;text-align:right}
.tabs{display:flex;border-bottom:1px solid var(--g3);background:#fff;margin-bottom:13px;overflow-x:auto}
.tabs a{padding:9px 15px;cursor:pointer;border-bottom:2px solid transparent;font-weight:500;color:var(--g6);white-space:nowrap}
.tabs a:hover{color:#000} .tabs a.on{color:#000;border-bottom-color:#000}
.steps{display:flex;border:1px solid var(--g3);background:#fff;margin-bottom:14px}
.steps div{flex:1;padding:10px 13px;border-right:1px solid var(--g3);color:var(--g6)}
.steps div:last-child{border-right:0}
.steps div b{display:block;font-size:11.5px;color:inherit}
.steps div span{font-size:9px;text-transform:uppercase;letter-spacing:1.1px}
.steps div.on{background:var(--ink);color:#fff} .steps div.done{color:var(--ok)}
.drop{border:2px dashed var(--g4);padding:32px;text-align:center;background:var(--g0);cursor:pointer;display:block}
.drop:hover,.drop.over{border-color:var(--ink);background:#fff}
.drop b{display:block;font-size:13px;margin-bottom:5px}
.drop span{color:var(--g6)}
.rpt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(308px,1fr));gap:1px;background:var(--g3);border:1px solid var(--g3)}
.rpt{background:#fff;padding:13px 15px;display:block}
.rpt:hover{background:var(--g0)}
.rpt b{display:block;font-size:12.5px;margin-bottom:3px}
.rpt .c{font-size:9px;letter-spacing:1.1px;color:var(--g6);font-weight:600;font-family:'JetBrains Mono',monospace}
.rpt p{color:var(--g6);font-size:11px;margin-top:5px;line-height:1.5}
.matrix td{text-align:center} .matrix td:first-child{text-align:left;font-weight:500}
.toast{position:fixed;right:18px;bottom:18px;background:var(--ink);color:#fff;padding:11px 15px;z-index:300;
  border-left:3px solid var(--ok);max-width:400px;box-shadow:0 8px 26px rgba(0,0,0,.2)}
.toast.err{border-left-color:var(--bad)} .toast.warn{border-left-color:var(--warn)}
.modal-bg{position:fixed;inset:0;background:rgba(17,17,17,.5);z-index:250;display:flex;align-items:flex-start;
  justify-content:center;padding:52px 20px;overflow:auto}
.modal{background:#fff;width:100%;max-width:820px;border:1px solid var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal h3{padding:12px 15px;border-bottom:1px solid var(--g3);font-size:13.5px;display:flex;align-items:center;font-weight:600}
.modal h3 .x{margin-left:auto;cursor:pointer;font-size:17px;line-height:1;color:var(--g6)}
.modal h3 .x:hover{color:#000}
.modal .mb{padding:15px} .modal .mf{padding:11px 15px;border-top:1px solid var(--g3);display:flex;gap:8px;justify-content:flex-end;background:var(--g0)}
.filelist{border:1px solid var(--g3)}
.filerow{display:flex;align-items:center;gap:11px;padding:8px 11px;border-bottom:1px solid var(--g3)}
.filerow:last-child{border-bottom:0}
.fico{width:30px;height:34px;border:1px solid var(--g4);display:flex;align-items:center;justify-content:center;
  font-size:8.5px;font-weight:700;color:var(--g6);flex:0 0 30px;background:var(--g0)}

/* ----------------------------------------------------------- login */
.login-pg{display:flex;min-height:100vh;background:#fff}
.lg-brand{flex:1;background:#0e0e0f;color:#fff;padding:54px 60px;display:flex;flex-direction:column;
  justify-content:space-between;position:relative;overflow:hidden;min-width:0}
.lg-brand::after{content:'';position:absolute;right:-160px;top:-160px;width:520px;height:520px;
  border:1px solid rgba(255,255,255,.06);border-radius:50%}
.lg-brand::before{content:'';position:absolute;right:-70px;bottom:-230px;width:520px;height:520px;
  border:1px solid rgba(255,255,255,.05);border-radius:50%}
.lg-top{position:relative;z-index:1}
.lg-mark{font-size:23px;letter-spacing:11px;font-weight:600;line-height:1}
.lg-sub{font-size:9px;letter-spacing:3.2px;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:12px}
.lg-lead{position:relative;z-index:1;max-width:560px}
.lg-rule{width:44px;height:2px;background:#fff;margin-bottom:22px}
.lg-lead h2{font-size:30px;line-height:1.3;font-weight:500;letter-spacing:-.6px;margin-bottom:16px}
.lg-lead p{color:rgba(255,255,255,.62);line-height:1.7;font-size:13px;max-width:50ch}
.lg-flow{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;border-top:1px solid rgba(255,255,255,.12)}
.lg-flow div{padding:13px 18px 13px 0;flex:1 1 128px;border-right:1px solid rgba(255,255,255,.1);padding-left:18px}
.lg-flow div:first-child{padding-left:0}
.lg-flow div:last-child{border-right:0}
.lg-flow b{display:block;font-size:11.5px;font-weight:500;margin-bottom:3px}
.lg-flow span{font-size:10px;color:rgba(255,255,255,.42);line-height:1.4;display:block}
.lg-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.12);padding-top:20px}
.lg-stats div{padding-right:18px}
.lg-stats b{display:block;font-family:'JetBrains Mono',monospace;font-size:23px;font-weight:400;letter-spacing:-.5px}
.lg-stats span{font-size:9px;text-transform:uppercase;letter-spacing:1.3px;color:rgba(255,255,255,.42);
  margin-top:5px;display:block;line-height:1.4}
.lg-foot{position:relative;z-index:1;font-size:10px;color:rgba(255,255,255,.3);letter-spacing:.4px}

.lg-form{width:452px;flex:0 0 452px;padding:0 56px;display:flex;flex-direction:column;justify-content:center;background:#fff}
.lg-form h1{font-size:20px;font-weight:600;letter-spacing:-.3px;margin-bottom:5px}
.lg-form .hint{color:var(--g6);margin-bottom:26px;font-size:12px;line-height:1.6}
.lg-f{margin-bottom:15px}
.lg-f label{display:flex;align-items:baseline;font-size:9px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--g6);font-weight:700;margin-bottom:6px}
.lg-f label a{margin-left:auto;text-transform:none;letter-spacing:0;font-size:10.5px;font-weight:400;
  color:var(--g6);border-bottom:1px solid var(--g4)}
.lg-f label a:hover{color:#000;border-bottom-color:#000}
.lg-f .in{width:100%;min-width:0;height:38px;border-color:var(--g4)}
.lg-btn{width:100%;height:42px;justify-content:center;font-size:13px;font-weight:500;letter-spacing:.2px;margin-top:6px}
.lg-err{border-left:3px solid var(--bad);background:#fdf4f4;padding:10px 13px;margin-bottom:16px;
  font-size:11.5px;line-height:1.55}
.lg-meta{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:10.5px;color:var(--g6)}
.lg-meta .lock{width:11px;height:11px;border:1.5px solid var(--g5);border-top-width:5px;flex:0 0 11px;margin-top:1px}
.lg-roles{margin-top:26px;border-top:1px solid var(--g3);padding-top:16px}
.lg-roles .t{font-size:9px;letter-spacing:1.3px;text-transform:uppercase;color:var(--g6);font-weight:700;margin-bottom:10px}
.rolebtn{display:flex;gap:11px;align-items:center;width:100%;background:#fff;border:1px solid var(--g3);
  padding:9px 11px;margin-bottom:6px;cursor:pointer;text-align:left}
.rolebtn:hover{border-color:var(--ink);background:var(--g0)}
.rolebtn.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.rolebtn b{font-size:11.5px;font-weight:600;display:block}
.rolebtn i{font-style:normal;font-size:10px;color:var(--g6);display:block;margin-top:2px;line-height:1.4}
.rolebtn .rb-k{font-size:9px;font-weight:700;letter-spacing:.6px;background:var(--ink);color:#fff;
  padding:4px 6px;flex:0 0 auto;font-family:'JetBrains Mono',monospace}
.rolebtn:hover .rb-k{background:#000}
@media(max-width:1080px){.lg-brand{display:none}.lg-form{width:100%;flex:1;padding:40px 28px}}

/* ------------------------------------------------------ dd report */
.dd-doc{background:#fff;border:1px solid var(--g3)}
.dd-body{padding:22px 26px 40px;max-width:1080px}
.dd-cover{border-bottom:1px solid var(--g3);padding:26px}
.dd-cover .k{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--g6);font-weight:700}
.dd-cover h2{font-size:24px;font-weight:600;letter-spacing:-.4px;margin:6px 0 3px}
.dd-cover .sub{color:var(--g6);font-size:12px}
.dd-verdict{display:flex;gap:1px;background:var(--g3);border:1px solid var(--g3);margin-top:18px}
.dd-verdict div{background:#fff;padding:11px 14px;flex:1}
.dd-verdict .lbl{font-size:8.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--g6);font-weight:700}
.dd-verdict .val{font-size:17px;font-weight:600;margin-top:4px;letter-spacing:-.3px}
.dd-toc{display:flex;flex-wrap:wrap;gap:1px;background:var(--g3);border-top:1px solid var(--g3)}
.dd-toc a{background:#fff;padding:8px 13px;flex:1 1 190px;font-size:11px}
.dd-toc a:hover{background:var(--g1)}
.dd-body h3{font-size:15px;font-weight:600;margin:28px 0 9px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.dd-body h3:first-child{margin-top:0}
.dd-body h4{font-size:12.5px;font-weight:600;margin:16px 0 6px}
.dd-body p{margin:0 0 10px;line-height:1.62;max-width:88ch}
.dd-body ul{margin:0 0 12px 18px} .dd-body li{margin-bottom:5px;line-height:1.55}
.formula{background:var(--g0);border-left:3px solid var(--ink);padding:9px 12px;margin:0 0 11px;
  font-family:'JetBrains Mono',monospace;font-size:11px}
.scorebar{display:flex;height:22px;border:1px solid var(--g3);background:var(--g1);position:relative;margin:8px 0 4px}
.scorebar i{background:var(--ink);display:block}
.scorebar span{position:absolute;right:7px;top:3px;font-size:10.5px;font-family:'JetBrains Mono',monospace}
@media print{.topbar,.sidebar,.page-hd .acts,.dd-toc{display:none}.main{overflow:visible}.wrap{padding:0}}

/* KPI tiles that drill through to the report behind the number */
.kpi-link{display:block;text-decoration:none;color:inherit;position:relative}
.kpi-link:hover{background:var(--g0)}
.kpi-link:hover .kpi-val{text-decoration:underline;text-underline-offset:3px}
.kpi .lbl{display:flex;align-items:center;gap:6px}
.kpi-go{margin-left:auto;font-size:11px;color:var(--g4);font-weight:400}
.kpi-link:hover .kpi-go{color:var(--ink)}

/* ------------------------------------------------------------- pagination */
.pager{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:8px 11px;background:var(--g0);
  border:1px solid var(--g3);border-bottom:0;font-size:11.5px}
.tbl-wrap + .pager,.tbl-scroll + .pager{border-top:0;border-bottom:1px solid var(--g3)}
.pg-count{color:var(--g7)}
.pg-size,.pg-nav{display:flex;align-items:center;gap:2px;color:var(--g6)}
.pg-size{margin-left:auto}
.pg-size a,.pg-nav a,.pg-nav span{display:inline-block;padding:2px 7px;border:1px solid transparent;
  font-family:'JetBrains Mono',monospace;font-size:10.5px}
.pg-size a:hover,.pg-nav a:hover{border-color:var(--g4);background:#fff}
.pg-size a.on,.pg-nav a.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
.pg-nav span.off{color:var(--g4)}
.pg-nav span.gap{color:var(--g5);padding:2px 3px}
.pg-warn{color:var(--warn);font-size:10.5px}
.lg-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--g5);font-size:11px;
  text-transform:uppercase;letter-spacing:1.4px}
.lg-or::before,.lg-or::after{content:'';flex:1;height:1px;background:var(--g3)}


/* An element asked to be hidden stays hidden. Component classes set `display`,
   which silently beats the hidden attribute — that is how an empty button ended
   up drawn as a black square in a filter bar. */
[hidden] { display: none !important; }


/* A toolbar strip inside a card: one row, aligned, no stray sentence running the
   width of the table. Used for the list upload and the bulk stage controls. */
.tbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;
  background:var(--g0);border-bottom:1px solid var(--g3)}
.tbar-lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--g6)}
.tbar-note{font-size:10.5px;color:var(--g6);margin-left:auto;text-align:right}
.tbar .sel{min-width:230px}

/* A file input that matches the rest of the buttons rather than the browser's. */
.filepick{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.filepick input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.filepick .fname{font-size:11px;color:var(--g6);max-width:240px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.buildstamp{font-size:9.5px;color:var(--g5);letter-spacing:.4px;padding:6px 12px 0;text-align:center}

/* Selection column: narrow, centred, and not something you have to aim at. */
tbody td:has(.rowpick), thead th:has([data-pick-all]){text-align:center;padding-left:6px;padding-right:6px}
.rowpick,[data-pick-all]{cursor:pointer;width:14px;height:14px;accent-color:#1a1a1a;vertical-align:middle}


/* ---------------------------------------------------- dense table controls
   A control inside a table cell has to fit the row, not set it. The standard
   30px select was taller than the 26px row, so every row with a stage dropdown
   stood a third taller than the rest and the grid lost its rhythm. */
tbody td .sel{font-size:11px}
tbody td .sel-btn{height:24px;padding:0 6px 0 7px;gap:5px}
tbody td .sel-pop{font-size:11px}
tbody td .in{height:24px;padding:0 6px;font-size:11px}
tbody td{padding-top:3px;padding-bottom:3px}

/* ---------------------------------------------------------- one-row toolbar
   Everything on a single line: pick a list, filter, set a stage, apply. The
   explanation moves to the buttons' own titles rather than wrapping the strip
   onto a second row and colliding with the table. */
.tbar{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:6px 10px}
.tbar .sel{min-width:200px}
.tbar .sel-btn{height:26px}
.tbar-sep{width:1px;height:20px;background:var(--g3);margin:0 4px;flex:0 0 1px}
.tbar-note{display:none}
.tbar .btn{white-space:nowrap}
.tbar-in{display:flex;align-items:center;gap:6px}


/* ------------------------------------------------- one row is one row high
   Anything dropped into a table cell has to live inside the row's height, not
   set it. Controls, pills, status chips and the little action buttons were each
   sized for a form, so a row carrying one stood a third taller than its
   neighbours and the grid lost its rhythm — on a dense ledger that is the
   difference between twenty rows on screen and fourteen. */
tbody td .pill{padding:1px 6px;font-size:9.5px;line-height:15px}
tbody td .btn{height:22px;padding:0 8px;font-size:10.5px;line-height:20px}
tbody td .btn.sm{height:20px;padding:0 6px;font-size:10px;line-height:18px}
tbody td .bar-row{margin:0}
tbody td .bt{height:8px}
tbody td svg,tbody td img,tbody td .ico{height:13px;width:auto;vertical-align:middle}
tbody td input[type=checkbox]{margin:0}
tbody td .tiny{line-height:13px}
tbody td a.lnk{line-height:16px}


/* ------------------------------------------------- one line, or an ellipsis
   Cells were told not to wrap but nothing truncated them, so a long customer
   name simply made its column wider and pushed the rest of the row out of shape
   — which is what the wrapping looked like. Now a cell that cannot fit its
   content is cut with an ellipsis and keeps its line.

   A cell holding a control is excluded: a dropdown's popup is positioned inside
   the cell, and clipping the cell clips the list. */
tbody td.clip{max-width:300px;overflow:hidden;text-overflow:ellipsis}
tbody td.n,tbody td.num{max-width:none;overflow:visible}
/* decided server-side, so it does not rely on :has() */
tbody td.holds-control{overflow:visible;text-overflow:clip}
tbody td>a,tbody td>span:not(.pill){display:inline-block;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}
tbody td .tiny,tbody td .muted{max-width:100%}

/* Columns that are usually the longest get a tighter ceiling, so one wide value
   cannot squeeze the numbers that matter off the screen. */
tbody td.wide{max-width:360px}
tbody td.narrow{max-width:150px}

/* =====================================================================
   ONE ROW = ONE LINE — every table, every screen.
   Rows were uneven for three reasons, all closed here:
   1. a long-text column carried the class "wrap", which is also the page
      container — its 48px padding landed in every cell (now "cwrap");
   2. secondary text (an account number under a bank name) was a block on its
      own line — it now sits inline after the main value;
   3. in-cell controls and the empty-state row were taller than a line.
   ===================================================================== */
thead th{white-space:nowrap;vertical-align:middle;height:30px;box-sizing:border-box;padding-top:0;padding-bottom:0}
tbody td{white-space:nowrap;vertical-align:middle;line-height:18px;height:30px;box-sizing:border-box;
  padding-top:5px;padding-bottom:5px}
tbody td.cwrap,thead th.cwrap{max-width:520px;overflow:hidden;text-overflow:ellipsis}
tbody td>div:not(.scorebar):not(.sel):not(.stack):not(.bar):not(.hbar),tbody td>p,tbody td>span.tiny,tbody td>small{display:inline;margin:0 0 0 6px}
tbody td>div:first-child,tbody td>p:first-child,tbody td>span.tiny:first-child{margin-left:0}
tbody td br{display:none}
tbody td .tiny{font-size:10.5px}
tbody td.holds-control{padding-top:5px;padding-bottom:5px}
tbody td select,tbody td input:not([type=checkbox]):not([type=radio]),tbody td textarea,tbody td .btn{
  height:20px;line-height:18px;padding-top:0;padding-bottom:0;font-size:11px;vertical-align:middle;box-sizing:border-box}
tbody td textarea{resize:none;overflow:hidden;white-space:nowrap}
tbody td form{display:inline;margin:0}
tbody td .pill{line-height:14px;height:18px;box-sizing:border-box;vertical-align:middle}
tbody td.empty{height:30px;padding:6px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--g6);font-style:italic}
tbody td.empty *{display:inline}

/* In-table controls and bars sized to the row. !important because the general
   control rules (.in 30px, .sel-btn 30px, their 24px table variants) are older and
   more numerous; a row must not grow by the height of whatever control it holds. */
tbody td .in,tbody td select,tbody td input:not([type=checkbox]):not([type=radio]),tbody td .sel-btn,tbody td .btn{
  height:20px!important;min-height:0!important;line-height:18px!important;padding-top:0!important;padding-bottom:0!important;
  box-sizing:border-box!important;font-size:11px}
tbody td .btn{display:inline-flex;align-items:center}
tbody td .scorebar{display:inline-flex;margin:0;height:16px;vertical-align:middle}
tbody td .scorebar span{top:1px}
/* the totals rule is drawn inside the row, so a totals row is the same height as the rest */
tbody tr.tot td{border-top:0;box-shadow:inset 0 2px 0 var(--ink)}
/* inline boxes (buttons, dropdowns, pills, inputs) sit on the middle of the line,
   not its baseline — baseline alignment adds descender space under them */
tbody td *{vertical-align:middle}
tbody td .sel{display:inline-block;vertical-align:middle}
tbody td .stack,tbody td .bar,tbody td .hbar{display:inline-flex;height:12px;width:100%;margin:0;vertical-align:middle}