/* ===== Lockersmiths ERP — refined industrial ===== */
:root{
  --blue:#007CC4; --blue-700:#0063a0; --blue-050:#e9f3fa;
  --ink:#0e1626; --ink-2:#1b2433; --ink-soft:#5a6573;
  --paper:#f4f6f9; --card:#ffffff; --line:#e4e8ee; --line-strong:#ccd3dd;
  --sidebar-bg:#0e1626;                 /* the sidebar stays dark in BOTH themes */
  --grey:#A8A8AC; --pos:#1f9d63; --neg:#d1483a; --warn:#e08b18;
  /* The strip at the top of a panel. A gradient literal, not a token, is how the cockpit ended
     up with white header bands sitting on dark cards: --card followed the theme and the header
     could not. Every surface that is "the card, one shade off" reads from here. */
  --head:linear-gradient(180deg,#fbfcfe,#f6f8fb); --sunk:#f9fbfd;
  --r:10px; --shadow:0 1px 2px rgba(14,22,38,.05),0 8px 24px rgba(14,22,38,.06);
  --sidebar-w:236px;
}
[data-theme="dark"]{
  --blue-050:#12202c;
  --ink:#e7eaf0; --ink-2:#cdd3dd; --ink-soft:#9aa3b2;
  --paper:#0f141b; --card:#161c25; --line:#262f3b; --line-strong:#34404f;
  --sidebar-bg:#0a0e14;                 /* slightly deeper than the dark page, keeps the rail readable */
  --grey:#6b7480; --pos:#34c684; --neg:#f0685a; --warn:#eaa53a;
  --head:linear-gradient(180deg,#1c2431,#171e28); --sunk:#12181f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.45);
}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
  background:#1b232e;color:var(--ink);border-color:var(--line-strong);
}
[data-theme="dark"] .field input{background:#1b232e}
[data-theme="dark"] select{color-scheme:dark}                 /* native dropdown panel + arrow follow the theme */
[data-theme="dark"] input[type=date],[data-theme="dark"] input[type=time],
[data-theme="dark"] input[type=datetime-local]{color-scheme:dark}
[data-theme="dark"] ::placeholder{color:var(--ink-soft);opacity:1}
/* Specific form controls hardcode a light background (#fcfdfe / #f6f8fa) that out-specifies
   the generic rule above — re-assert the dark surface for every one of them. */
[data-theme="dark"] .form-grid select,[data-theme="dark"] .form-grid input,
[data-theme="dark"] .line-tbl input,[data-theme="dark"] .line-tbl select,
/* the light rule is .line-tbl input:not([type=checkbox]):not([type=radio]) — two :not()s out-rank
   the plain selector above, so every line editor drew white boxes of pale text in dark mode */
[data-theme="dark"] .line-tbl input:not([type=checkbox]):not([type=radio]),
[data-theme="dark"] .field textarea,[data-theme="dark"] input.pick-val,
[data-theme="dark"] .toolbar .inline input[type=date],[data-theme="dark"] .fromto input,
[data-theme="dark"] .sapdoc-grid .f input,[data-theme="dark"] .sapdoc-grid .f select,
[data-theme="dark"] .sapdoc-foot textarea,[data-theme="dark"] .totbox .row input,
[data-theme="dark"] .ssel-input{
  background:#1b232e;color:var(--ink);border-color:var(--line-strong);
}
[data-theme="dark"] .linegrid input,[data-theme="dark"] .linegrid select{color:var(--ink)}
[data-theme="dark"] .linegrid input:focus,[data-theme="dark"] .linegrid select:focus{background:#1b232e}
[data-theme="dark"] .cfl select,[data-theme="dark"] .cfl input{color:var(--ink)}
/* searchable-select dropdown panel (hardcodes a white bg) */
[data-theme="dark"] .ssel-panel{background:var(--card);border-color:var(--line-strong)}
[data-theme="dark"] .ssel-opt{color:var(--ink)}
[data-theme="dark"] .ssel-opt.hi,[data-theme="dark"] .ssel-opt:hover{background:var(--line)}
/* document-view footer band + popovers + attachment chips (hardcode light backgrounds) */
[data-theme="dark"] .actmenu-pop{background:var(--card);border-color:var(--line-strong)}
[data-theme="dark"] .attach-item{background:#1b232e;border-color:var(--line-strong)}
[data-theme="dark"] .bp-code,[data-theme="dark"] .search,[data-theme="dark"] .mono-area{background:#1b232e}
.gsearch{position:relative}
.gsearch input{width:280px;max-width:38vw;padding:8px 12px;border:1px solid var(--line-strong);border-radius:9px;background:var(--card);font-size:13px}
.gsearch input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.gs-panel{position:absolute;top:112%;left:0;right:0;background:var(--card);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow);max-height:360px;overflow:auto;z-index:60}
.gs-item{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.gs-item:hover{background:var(--paper)}
.gs-item .t{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);align-self:center}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:'Archivo',system-ui,sans-serif; color:var(--ink);
  background:var(--paper); -webkit-font-smoothing:antialiased;
}
.boot{display:grid;place-items:center;height:100vh;color:var(--ink-soft);font-family:'JetBrains Mono',monospace;letter-spacing:.05em}
.mono{font-family:'JetBrains Mono',monospace}
.num{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}
a{color:inherit;text-decoration:none}

/* labels */
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

/* ===== LOGIN ===== */
.login{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    linear-gradient(0deg,rgba(0,124,196,.04),rgba(0,124,196,.04)),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(14,22,38,.045) 31px 32px),
    repeating-linear-gradient(90deg,transparent 0 31px,rgba(14,22,38,.045) 31px 32px),
    var(--paper);
}
.login-card{
  position:relative;width:100%;max-width:392px;background:var(--card);
  border:1px solid var(--line-strong);border-radius:14px;padding:38px 34px 30px;
  box-shadow:var(--shadow);
}
.login-card::before,.login-card::after{
  content:"";position:absolute;width:14px;height:14px;border:2px solid var(--blue);
}
.login-card::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:14px}
.login-card::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:14px}
.brand{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.brand .mark{
  width:38px;height:38px;border-radius:9px;background:var(--sidebar-bg);display:grid;place-items:center;
  position:relative;flex:none;
}
.brand .mark::before{content:"";width:18px;height:18px;border:2.5px solid var(--blue);border-radius:3px;transform:rotate(45deg)}
.brand .mark::after{content:"";position:absolute;width:6px;height:6px;background:var(--blue);border-radius:1px}
.brand h1{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em}
.brand span{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;color:var(--ink-soft);text-transform:uppercase;margin-top:2px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.field input{
  width:100%;padding:11px 13px;border:1px solid var(--line-strong);border-radius:9px;
  font-size:14px;background:#fcfdfe;transition:border-color .15s,box-shadow .15s;
}
.field input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.btn{
  width:100%;padding:12px;border:0;border-radius:9px;background:var(--blue);color:#fff;
  font-weight:700;font-size:14px;letter-spacing:.01em;transition:background .15s,transform .05s;
}
.btn:hover{background:var(--blue-700)} .btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:default}
.err{background:#fdecea;border:1px solid #f5c4be;color:#a23226;font-size:12.5px;padding:9px 12px;border-radius:8px;margin-bottom:14px}
.login-foot{margin-top:18px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;color:var(--grey);text-transform:uppercase}

/* ===== SHELL ===== */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.side{background:var(--sidebar-bg);color:#aeb8c6;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side .brand{padding:18px 18px 14px;margin:0;border-bottom:1px solid rgba(255,255,255,.07)}
.side .brand h1{color:#fff;font-size:15px}
.nav{padding:10px 10px;overflow:auto;flex:1}
.nav .grp{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#5d6b7d;padding:14px 10px 6px;display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
.nav .grp:hover{color:#8696a8}
.nav .grp-caret{font-size:8px;line-height:1;transform:rotate(90deg);transition:transform .15s ease;display:inline-block}
.nav .grp.collapsed .grp-caret{transform:rotate(0)}
.nav .grp-body{display:none}
.nav .grp-body.open{display:block}
.nav a{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;font-size:13.5px;
  font-weight:500;color:#aeb8c6;margin-bottom:2px;transition:background .12s,color .12s;
}
.nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.nav a.active{background:var(--blue);color:#fff}
.nav a .ic{width:7px;height:7px;border:1.5px solid currentColor;border-radius:2px;flex:none;opacity:.8}
.nav a.active .ic{background:var(--card);border-color:#fff}
.side-foot{padding:12px 16px;border-top:1px solid rgba(255,255,255,.07);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:#5d6b7d}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 26px;height:60px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;
}
.topbar .co{display:flex;align-items:center;gap:4px}
.topbar .co b{font-size:14px;font-weight:700}
.topbar .co .chip{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:var(--blue-050);padding:3px 8px;border-radius:20px}
.co-switch{display:flex;align-items:center;gap:9px;background:transparent;border:1px solid transparent;border-radius:9px;padding:5px 9px;cursor:pointer;color:var(--ink)}
.co-switch:hover{background:#f4f6f9;border-color:var(--line)}
.co-caret{font-size:11px;color:var(--ink-soft)}
/* choose-company list */
.co-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.co-row{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.co-row:last-child{border-bottom:0}
.co-row.on{background:var(--blue-050)}
.co-pick{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left;background:transparent;border:0;padding:11px 14px;cursor:pointer}
.co-pick:disabled{cursor:default}
.co-pick:not(:disabled):hover{background:#f4f6f9}
.co-row-name{font-size:13.5px;font-weight:600;color:var(--ink)}
.co-row-id{font-size:11px;color:var(--ink-soft)}
.co-badge{font-size:10px;font-weight:700;color:var(--pos);background:rgba(58,157,107,.12);padding:1px 7px;border-radius:10px;margin-left:6px;text-transform:uppercase;letter-spacing:.06em}
.co-acts{display:flex;align-items:center;border-left:1px solid var(--line)}
.co-act{background:transparent;border:0;border-right:1px solid var(--line);padding:0 11px;cursor:pointer;font-size:11.5px;font-weight:600;color:var(--blue);white-space:nowrap}
.co-act:hover{background:var(--blue-050)}
.co-act.warn{color:#c47a13}
.co-act.warn:hover{background:rgba(224,163,42,.1)}
.co-del{background:transparent;border:0;padding:0 13px;cursor:pointer;font-size:14px;opacity:.65}
.co-del:hover{opacity:1;background:rgba(214,69,69,.08)}
.co-new{margin-top:12px}

/* ===== Chart of Accounts — collapsible tree ===== */
.coa-head{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.coa-head:hover{color:var(--blue)}
.coa-count{font-size:11px;font-weight:600;color:var(--ink-soft);background:#eef1f5;border-radius:10px;padding:1px 8px}
.coa-group.collapsed .coa-body{display:none}
.coa-chev{background:none;border:0;cursor:pointer;font-size:11px;color:var(--ink-soft);width:16px;height:16px;line-height:1;padding:0;transition:transform .15s;display:inline-flex;align-items:center;justify-content:center}
.coa-chev.closed{transform:rotate(-90deg)}
.coa-chev-sp{display:inline-block;width:16px}
.coa-code{white-space:nowrap}
.coa-code .coa-chev,.coa-code .coa-chev-sp{margin-right:6px;vertical-align:middle}
.coa-num{font-variant-numeric:tabular-nums}
.coa-acts{opacity:0;transition:opacity .12s}
tr.rowlink:hover .coa-acts{opacity:1}
.coa-act{background:transparent;border:0;cursor:pointer;font-size:12.5px;line-height:1;padding:2px 5px;border-radius:5px;color:var(--ink-soft)}
.coa-act:hover{background:var(--blue-050);color:var(--blue)}
tr.acct-susp td{opacity:.55}
tr.acct-susp .coa-acts{opacity:1}

/* ===== Business Partner master ===== */
.bp-code{display:flex;align-items:center;gap:14px;background:#f4f6f9;border:1px solid var(--line);border-radius:9px;padding:9px 13px;margin-bottom:12px;font-size:12.5px;color:var(--ink-soft)}
.bp-code b{color:var(--ink);font-size:13.5px}
.bp-ctrl{margin-left:auto;font-size:11.5px}
.field textarea{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--line-strong);border-radius:9px;font-size:13px;font-family:inherit;background:#fcfdfe;resize:vertical}
.who{display:flex;align-items:center;gap:12px}
.who .u{text-align:right;line-height:1.2}
.who .u b{font-size:13px;font-weight:600;display:block}
.who .u span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.who .av{width:34px;height:34px;border-radius:9px;background:var(--sidebar-bg);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.logout{border:1px solid var(--line-strong);background:var(--card);border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--ink)}
.bell-wrap{position:relative}
.bell{background:none;border:0;font-size:17px;cursor:pointer;line-height:1;padding:4px;position:relative}
.bell-badge{position:absolute;top:-2px;right:-2px;background:var(--neg);color:#fff;font-size:9px;font-weight:700;min-width:15px;height:15px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 3px}
.notif-panel{position:absolute;top:36px;right:0;width:320px;max-height:62vh;overflow:auto;background:var(--card);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 14px 40px rgba(14,22,38,.22);z-index:70}
.np-head{padding:10px 14px;font-weight:700;font-size:13px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
.np-item{padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.np-item:last-child{border-bottom:0}
.np-item:hover{background:var(--blue-050)}
.np-item.unread{background:#f3f8fd}
.np-item.unread .np-title{font-weight:700}
.np-title{font-size:13px;color:var(--ink)}
.np-sub{font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.np-time{font-size:10.5px;color:var(--ink-soft);margin-top:3px;font-family:'JetBrains Mono',monospace}
/* dark mode: the unread/hover tints are hardcoded light — override so text stays readable */
[data-theme="dark"] .np-item.unread{background:#12314a}
[data-theme="dark"] .np-item:hover{background:#1c2c3e}
/* document change-log timeline */
.timeline{padding:6px 2px 2px}
.tl-item{display:flex;padding:10px 0 10px 18px;border-left:2px solid var(--line);margin-left:9px;position:relative}
.tl-ic{position:absolute;left:-11px;top:8px;width:20px;height:20px;background:var(--card);border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px}
.tl-head{font-size:13px;color:var(--ink)}
.tl-detail{font-size:12px;color:var(--ink);margin-top:2px}
.tl-time{font-size:10.5px;color:var(--ink-soft);margin-top:2px}
.logout:hover{border-color:var(--neg);color:var(--neg)}

.content{padding:26px 44px;max-width:none;width:100%;margin:0 auto}
.content.wide-page{max-width:none}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.page-head h2{margin:0;font-size:23px;font-weight:800;letter-spacing:-.02em}
.page-head .sub{margin-top:3px}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(208px,1fr));gap:14px;margin-bottom:14px}
.kpis.kpis-dense{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}
.kpis.kpis-dense .kpi{padding:14px 14px 13px}
.kpis.kpis-dense .k-val{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 15px;box-shadow:var(--shadow);overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue)}
.kpi.pos::before{background:var(--pos)} .kpi.neg::before{background:var(--neg)} .kpi.muted::before{background:var(--grey)}
/* "worth a look", which is neither good news nor bad — a doubtful hand-over, a figure that did
   not settle. Red would be an accusation the tile has no business making. */
.kpi.warn::before{background:var(--warn)}
.kpi .k-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.kpi .k-val{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-size:24px;font-weight:700;margin-top:10px;letter-spacing:-.01em}
.kpi .k-val small{font-size:13px;color:var(--ink-soft);font-weight:500;margin-right:3px}
.kpi .k-foot{font-size:11.5px;color:var(--ink-soft);margin-top:5px}
/* THE SECOND WAY OUT OF A TILE. Quiet until the tile is under the cursor: a dashboard of
   eleven tiles each wearing a permanent arrow is eleven things asking to be clicked. */
.kpi-go{position:absolute;top:8px;right:8px;border:0;background:transparent;cursor:pointer;
  font-size:13px;line-height:1;padding:3px 5px;border-radius:5px;color:var(--ink-soft);
  opacity:0;transition:opacity .12s,background .12s}
.kpi:hover .kpi-go,.kpi-go:focus-visible{opacity:1}
.kpi-go:hover{background:var(--line);color:var(--ink)}
/* A TILE THAT IS ONE FIGURE MADE OF TWO. Cash and bank are added up because that is the
   question the top of a dashboard answers — how much is liquid — but they are not the same
   thing to anybody who has to move it, and the split was a click away in the chart of
   accounts. The halves sit under the total and must come to it. */
.kpi .k-split{display:flex;gap:0;margin-top:11px;border-top:1px solid var(--line)}
.kpi .k-split > div{flex:1 1 0;min-width:0;padding:8px 0 0}
.kpi .k-split > div + div{border-left:1px solid var(--line);padding-left:12px}
.kpi .k-split .s-l{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.kpi .k-split .s-v{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:14px;font-weight:700;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* accounting-nature colour coding: header tint + left accent (readable on light and dark cards) */
.kpi .k-label.nat-asset{color:#4a90d9}
.kpi .k-label.nat-liability{color:#e0932f}
.kpi .k-label.nat-equity{color:#a06bd6}
.kpi .k-label.nat-income{color:#3a9d6b}
.kpi .k-label.nat-expense{color:#d9534f}
.kpi.kpi-asset{border-left:3px solid #4a90d9}
.kpi.kpi-liability{border-left:3px solid #e0932f}
.kpi.kpi-equity{border-left:3px solid #a06bd6}
.kpi.kpi-income{border-left:3px solid #3a9d6b}
.kpi.kpi-expense{border-left:3px solid #d9534f}
.k-val.pos{color:var(--pos)} .k-val.neg{color:var(--neg)}
.kpi-link{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
.kpi-link:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(20,80,160,.10);transform:translateY(-1px)}
.kpi-link .k-label::after{content:"  \2197";color:var(--blue);font-weight:700}

/* ===== SAP B1-style cockpit widgets ===== */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:14px;align-items:stretch}
.widget{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.widget.wide{grid-column:span 2}
@media(max-width:760px){.widget.wide{grid-column:span 1}}
.widget-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--head)}
.widget-h h4{margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;display:flex;align-items:center;gap:7px}
.widget-h .tick{width:8px;height:8px;border-radius:2px;background:var(--blue);display:inline-block}
/* accounting-nature colour coding of widget headers (title + tick) */
.widget-h.nat-asset h4{color:#4a90d9}.widget-h.nat-asset .tick{background:#4a90d9}
.widget-h.nat-liability h4{color:#e0932f}.widget-h.nat-liability .tick{background:#e0932f}
.widget-h.nat-equity h4{color:#a06bd6}.widget-h.nat-equity .tick{background:#a06bd6}
.widget-h.nat-income h4{color:#3a9d6b}.widget-h.nat-income .tick{background:#3a9d6b}
.widget-h.nat-expense h4{color:#d9534f}.widget-h.nat-expense .tick{background:#d9534f}
.wlink{font-size:11.5px;font-weight:600;color:var(--blue);cursor:pointer;white-space:nowrap}
.wlink:hover{text-decoration:underline}
.widget-b{padding:13px 14px;flex:1 1 auto}

/* stat rows (open documents, cash & bank) */
.wstat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);cursor:pointer}
.wstat:last-child{border-bottom:0}
.wstat:hover .wstat-l{color:var(--blue)}
.wstat-l{font-size:13px;color:var(--ink)}
.wstat-v{font-size:13px;color:var(--ink)}
.wstat-v b{font-size:15px;font-variant-numeric:tabular-nums}
.wstat-v small{color:var(--ink-soft);margin-right:4px}
/* A heading INSIDE a widget's list, for the groups a flat list was hiding. Deliberately
   quieter than the widget's own header — it divides rows, it does not compete with the
   panel's title. */
.wsec{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:12px 0 5px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line-strong)}
.wsec:first-child{padding-top:0}
.wsec .wsec-v{font-size:12px;font-weight:700;letter-spacing:0;color:var(--ink);
  font-variant-numeric:tabular-nums}

/* sales/purchases bar chart */
.wlegend{display:flex;gap:16px;font-size:11.5px;color:var(--ink-soft);margin-bottom:10px}
.wlegend i.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.sw.sales{background:var(--blue)} .sw.purch{background:#c9d3e0}
.chartcols{display:flex;align-items:flex-end;justify-content:space-around;gap:8px;height:104px;padding-top:6px}
.ccol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.cbars{display:flex;align-items:flex-end;gap:3px;height:86px;width:100%;justify-content:center}
.cbar{width:14px;border-radius:3px 3px 0 0;min-height:2px;transition:height .3s}
.cbar.sales{background:var(--blue)} .cbar.purch{background:#c9d3e0}
.clabel{font-size:10.5px;color:var(--ink-soft);font-family:'JetBrains Mono',monospace}
/* THE FIGURES UNDER THE BARS. The chart was drawn at the top of a tall tile and left two
   thirds of it empty, so the numbers go in the space that was already there rather than
   making the tile taller. Fixed layout so six columns stay the same width whatever is in
   them — a ragged grid under a regular one reads as a second, unrelated thing. */
.chartfig{width:100%;table-layout:fixed;border-collapse:collapse;margin-top:10px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;font-variant-numeric:tabular-nums}
.chartfig th{text-align:left;width:74px;font-weight:600;color:var(--ink-soft);
  font-family:var(--disp,inherit);font-size:11px;padding:3px 0}
.chartfig td{text-align:center;padding:3px 2px;white-space:nowrap}
.chartfig td.s{color:var(--blue)}
.chartfig td.p{color:var(--ink-2)}
.chartfig td.z{color:var(--ink-soft);opacity:.55}
.chartfig tr.mo td{color:var(--ink-soft);font-size:10px;border-top:1px solid var(--line);padding-top:4px}

/* ageing bars */
.ageblock{display:flex;flex-direction:column;gap:9px}
.agerow{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:9px}
.agelbl{font-size:11.5px;color:var(--ink-soft)}
.agebar{height:9px;background:#eef1f5;border-radius:5px;overflow:hidden}
.agefill{display:block;height:100%;border-radius:5px}
.agefill.a0{background:#3a9d6b} .agefill.a1{background:#5b8def} .agefill.a2{background:#e0a32a} .agefill.a3{background:#e07a2a} .agefill.a4{background:var(--neg)}
.ageamt{font-size:11.5px;min-width:64px;text-align:right}

/* mini ranked rows (top receivables) */
.minirow{display:grid;grid-template-columns:1fr 70px auto;align-items:center;gap:9px;padding:6px 0}
.mini-l{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-bar{height:7px;background:#eef1f5;border-radius:4px;overflow:hidden}
.mini-bar span{display:block;height:100%;background:var(--blue);border-radius:4px}
.mini-v{font-size:11.5px;min-width:62px;text-align:right}
table.tbl.mini td,table.tbl.mini th{padding:6px 8px;font-size:12px}
.ok-note{font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.appr-banner{border-left:3px solid var(--blue)}

/* ===== THE COCKPIT'S FACE =====
   A greeting, a strip of what is waiting on this person, six money tiles each carrying its
   thirteen-month line, one position bar, the widgets, and a foot line saying whether the books
   hold together. Tokens only, so the dark theme is the same page in the dark. */
.cockpit .pos{color:var(--pos)} .cockpit .neg{color:var(--neg)} .cockpit .warn{color:var(--warn)}
.cockpit .ck-flat{color:var(--ink-soft)}
.ck-head{display:flex;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.ck-head h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}
.ck-when{color:var(--ink-soft);font-size:12.5px;margin-top:3px}
.ck-when b{color:var(--ink)}
.ck-acts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ck-acts .btn-ghost{padding:7px 12px;font-size:12.5px;font-weight:500}
.ck-acts .btn-ghost.on{border-color:var(--blue);color:var(--blue)}
.ck-k{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:8px;padding:7px 10px;
  color:var(--ink-soft);background:var(--card);min-width:250px;font:inherit;font-size:12.5px;cursor:text;text-align:left}
.ck-k:hover{border-color:var(--blue)}
/* the mine strip */
.cockpit-mine{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.ck-chip{display:inline-flex;align-items:center;gap:9px;padding:8px 12px 8px 10px;border-radius:10px;background:var(--card);
  border:1px solid var(--line);font-size:12.5px;cursor:pointer;color:var(--ink);box-shadow:var(--shadow)}
.ck-chip:hover{border-color:var(--blue)}
.ck-chip b{font-family:'JetBrains Mono',monospace;font-size:15px;font-variant-numeric:tabular-nums}
.ck-chip .ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--head);font-size:12px;flex:none}
.ck-chip small{color:var(--ink-soft);font-size:11.5px}
.ck-chip.muted{color:var(--ink-soft)} .ck-chip.muted b{color:var(--ink-soft)}
.ck-chip.bad{border-color:rgba(209,72,58,.45);background:rgba(209,72,58,.06)} .ck-chip.bad .ic{background:rgba(209,72,58,.16)} .ck-chip.bad b{color:var(--neg)}
.ck-chip.warn{border-color:rgba(224,139,24,.5);background:rgba(224,139,24,.07)} .ck-chip.warn .ic{background:rgba(224,139,24,.18)} .ck-chip.warn b{color:var(--warn)}
/* the money tiles */
.cockpit-money{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:12px}
.cockpit-money .kpi{padding:12px 13px 10px;min-width:0}
.cockpit-money .k-val{font-size:clamp(15px,1.3vw,21px);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-d{font-size:11.5px;margin-top:4px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:16px}
.ck-d b{font-weight:700}
.ck-spark{display:block;width:100%;height:30px;margin-top:6px}
.ck-foot{font-size:11px;color:var(--ink-soft);display:flex;justify-content:space-between;gap:8px;margin-top:5px;min-height:14px;align-items:flex-start;line-height:1.3}
.ck-foot span{min-width:0} .ck-foot span+span{text-align:right;flex:none;max-width:55%}
.ck-pill{display:inline-block;padding:0 6px;border-radius:999px;font-size:10.5px;font-weight:600;line-height:16px}
.ck-pill.bad{background:rgba(209,72,58,.13);color:var(--neg)} .ck-pill.warn{background:rgba(224,139,24,.16);color:var(--warn)} .ck-pill.ok{background:rgba(31,157,99,.14);color:var(--pos)}
/* the position bar */
.ck-pos{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:10px 16px;margin-bottom:14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.ck-pos .k-label{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.ck-seg{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--line);min-width:120px}
.ck-seg i{display:block;height:100%}
.ck-leg{display:flex;gap:16px;font-size:12px;white-space:nowrap;flex-wrap:wrap}
.ck-leg span{cursor:pointer} .ck-leg span:hover{color:var(--blue)}
.ck-leg b{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.ck-leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.ck-leg small{color:var(--ink-soft)}
.cockpit.fin-closed .ck-fin{display:none}
/* customise: the handles and hide buttons the tiles carry stay hidden until asked for */
.cockpit .w-ctrl{display:none!important}
.cockpit.customising .w-ctrl{display:inline-flex!important}
.cockpit .wcount{color:var(--ink);letter-spacing:0;margin-left:2px}
/* rows inside widgets */
.ck-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:12.5px;align-items:flex-start}
.ck-row:last-child{border-bottom:0}
.ck-row small,.ck-sub{display:block;color:var(--ink-soft);font-size:11px;margin-top:1px}
.ck-row .n{font-family:'JetBrains Mono',monospace;white-space:nowrap;font-variant-numeric:tabular-nums}
.ck-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin:2px 0 6px}
.ck-bar i{display:block;height:100%;border-radius:3px}
.ck-cf{display:flex;justify-content:space-between;gap:10px;margin-top:8px;padding-top:9px;border-top:1px solid var(--line);font-size:12.5px;cursor:pointer;flex-wrap:wrap}
.ck-cf:hover{color:var(--blue)}
/* sales & purchases: paired bars */
.cockpit .wlegend .ck-net{margin-left:auto}
.cockpit .sw.sales,.cockpit .chartfig td.s{color:#3a9d6b} .cockpit .sw.sales{background:#3a9d6b}
.cockpit .sw.purch{background:#e0932f} .cockpit .chartfig td.p{color:#e0932f}
.ck-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;align-items:end;height:120px;border-bottom:1px solid var(--line)}
.ck-m{display:flex;gap:3px;align-items:flex-end;height:100%}
.ck-m i{flex:1;display:block;border-radius:3px 3px 0 0;background:#3a9d6b;min-height:1px}
.ck-m i.p{background:#e0932f}
/* ageing twin */
.ck-agetwin{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ck-age{cursor:pointer;min-width:0}
.ck-age .seg{display:flex;height:16px;border-radius:8px;overflow:hidden;margin:6px 0;background:var(--line)}
.ck-age .seg i{display:block;height:100%}
.ck-age .kv{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-soft);gap:6px}
.ck-age .kv b{font-family:'JetBrains Mono',monospace;color:var(--ink);font-variant-numeric:tabular-nums}
.ck-age .a0{background:#3a9d6b} .ck-age .a1{background:#5b8def} .ck-age .a2{background:#e0a32a} .ck-age .a3{background:#e07a2a} .ck-age .a4{background:var(--neg)}
.ck-age .seg i.none{background:var(--line)}
.ck-agefig{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ck-agefig span{white-space:nowrap}
.ck-agefig i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:3px;vertical-align:-1px}
/* MES strip */
.ck-mes{display:grid;grid-template-columns:repeat(5,1fr) 1.6fr;gap:8px;align-items:stretch}
.ck-mc{border:1px solid var(--line);border-radius:9px;padding:9px 8px;text-align:center}
.ck-mc b{display:block;font:800 20px 'JetBrains Mono',monospace;line-height:1;font-variant-numeric:tabular-nums}
.ck-mc span{font-size:11px;color:var(--ink-soft)}
.ck-mc.bad b{color:var(--neg)} .ck-mc.ok b{color:var(--pos)} .ck-mc.warn b{color:var(--warn)}
.ck-mc.note{text-align:left;font-size:12px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.ck-mc.note span{font-size:12px;color:var(--ink)} .ck-mc.note span b{display:inline;font:inherit;font-weight:700}
/* online now · live activity */
.ck-live{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line);font-size:12px;cursor:pointer}
.ck-live:last-child{border-bottom:0}
.ck-live .dot{width:7px;height:7px;flex:none}
.ck-live .u{font-weight:600;white-space:nowrap}
.ck-live .a{flex:1;color:var(--ink-soft);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-live .a .lnk{font-size:11px;padding:0 2px}
.ck-live .t{font-family:'JetBrains Mono',monospace;color:var(--ink-soft);font-size:11px;white-space:nowrap}
.ck-live:hover .u{color:var(--blue)}
/* the foot line */
.cockpit-foot{display:flex;gap:18px;font-size:12px;padding:9px 14px;color:var(--ink-soft);flex-wrap:wrap;margin-top:12px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);align-items:center}
.cockpit-foot .ck-fi{cursor:pointer} .cockpit-foot .ck-fi:hover{color:var(--blue)}
.cockpit-foot .ck-fi b{color:var(--pos)} .cockpit-foot .ck-fi.bad,.cockpit-foot .ck-fi.bad b{color:var(--neg)}
.cockpit-foot .ck-fi.end{margin-left:auto} .cockpit-foot .ck-fi .warn{color:var(--warn)}
.cockpit-foot small{font-size:11px;margin-left:4px}
@media(max-width:1180px){.cockpit-money{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  .cockpit-money{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cockpit-money .k-val{font-size:17px}
  .ck-head{flex-direction:column;align-items:stretch} .ck-acts{margin-left:0} .ck-k{min-width:0;flex:1}
  .ck-pos{grid-template-columns:1fr;gap:8px} .ck-leg{gap:10px}
  .ck-agetwin{grid-template-columns:1fr}
  .ck-mes{grid-template-columns:repeat(3,1fr)} .ck-mc.note{grid-column:span 3}
  .ck-bars{gap:6px}
  .cockpit-foot .ck-fi.end{margin-left:0}
}

/* A .section breathes by default: screens that write content straight into it (transfer,
   allocations, half the registers) used to press text against the card border because only
   the optional .body wrapper carried padding. The section pads itself now; h3 header bands
   and .body pull back out with negative margins so their full-bleed geometry is unchanged. */
/* A TILE — WHICH `class="card"` HAS NEVER ACTUALLY BEEN.
   Eleven places asked for a card and were handed a naked div. `--card` existed, as a COLOUR
   variable, and the class that shares its name styled nothing at all: the charts on the inventory
   board floated on the page with no edge to sit inside, and the warning boxes in purchasing drew a
   coloured left border against thin air. Same ingredients as .section, without its top margin,
   because a card is laid out by whatever grid is placing it. */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:14px 16px}
.section{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-top:16px;padding:16px 18px}
.section>h3:first-child{margin:-16px -18px 0}
.section h3{margin:0;padding:15px 18px;font-size:14px;font-weight:700;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px}
.section h3 .tick{width:8px;height:8px;background:var(--blue);border-radius:2px}
.section>.body{margin:0 -18px -16px;padding:18px}
.section>.body:first-child{margin-top:-16px}
.section .body{padding:18px}
.statusline{display:flex;align-items:center;gap:9px;font-size:13px;padding:14px 18px}
.dot{width:9px;height:9px;border-radius:50%}
.dot.ok{background:var(--pos)} .dot.bad{background:var(--neg)}

/* tables */
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding:10px 18px;border-bottom:1px solid var(--line)}
table.tbl td{padding:10px 18px;border-bottom:1px solid var(--line)}
table.tbl td.r,table.tbl th.r{text-align:right;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
/* Ledger memo: free text of any length sits next to money columns that must stay readable, so it
   is capped and ellipsised rather than allowed to push the figures off to the right. The full
   text stays available on hover — truncating the display must not lose the content. */
table.tbl td.memo{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
table.tbl tr:last-child td{border-bottom:0}
/* A foot of totals reads as a summary, not as one more line of the list. */
table.tbl tfoot td{background:var(--blue-050);font-weight:600;border-bottom:1px solid var(--line)}
table.tbl tfoot tr:first-child td{border-top:2px solid var(--line)}
/* The GRAND total — every row in the view — sits a shade deeper than a single document's own
   total, which already wears --blue-050. Two rows meaning different things must not share a
   colour. Stated as a translucent blue so it deepens whatever ground it lands on, light or dark. */
table.tbl tfoot tr.grand td{background:rgba(0,124,196,.16);border-top:2px solid var(--blue)}
table.tbl tr.rowlink{cursor:pointer}
table.tbl tr.rowlink:hover td{background:var(--blue-050)}

/* placeholder */
.soon{display:grid;place-items:center;padding:70px 20px;text-align:center}
.soon .b{width:46px;height:46px;border:2px dashed var(--line-strong);border-radius:11px;display:grid;place-items:center;margin:0 auto 14px}
.soon .b::after{content:"";width:16px;height:16px;border:2px solid var(--blue);border-radius:3px;transform:rotate(45deg)}
.soon h3{margin:0 0 6px;font-size:16px} .soon p{margin:0;color:var(--ink-soft);font-size:13px;max-width:340px}

.skel{height:24px;border-radius:6px;background:linear-gradient(90deg,#eef1f5 25%,#e3e8ef 37%,#eef1f5 63%);background-size:400% 100%;animation:sh 1.3s infinite}
@keyframes sh{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* The sidebar used to collapse only below 780px, which left a 10" tablet held upright (800px)
   with the full desktop layout and no room for it — every screen scrolled sideways by ~358px.
   1024 covers portrait tablets while leaving a landscape 10" (1280) on the desktop layout, which
   measured clean. */
@media (max-width:1024px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;z-index:40;width:240px;transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none}
  .topbar{padding:0 16px}.content{padding:16px}
  /* the button that opens it is declared further down — see the note at .menu-btn */
}

/* ---- touch / narrow-screen fixes -----------------------------------------------------------
   The top bar is a flex row of fixed-size pieces with nothing allowed to shrink, so the user
   cluster (.who, 344px) sat past the right edge of every screen under ~1150px — the single most
   common source of sideways scroll in the app, on every route. Flex children need min-width:0
   before they will shrink at all; the rest is dropping what a small screen does not need. */
@media (max-width:1024px){
  .topbar{gap:10px}
  .topbar > *{min-width:0}
  .topbar .co .chip{display:none}          /* the company code — the name is still there */
  .gsearch input{width:180px;max-width:32vw}
  .who{gap:8px}
  .who .u{display:none}                    /* name + role: the avatar still identifies the session */
}
@media (max-width:560px){
  /* On a phone there is no arrangement of company + search + user + sign-out that fits one 60px
     row, so let it use two. Everything stays reachable; nothing is hidden that cannot be. */
  .topbar{height:auto;min-height:56px;flex-wrap:wrap;padding:8px 12px;row-gap:8px}
  .gsearch{order:3;flex:1 1 100%}
  .gsearch input{width:100%;max-width:none}
  .who .wlink{display:none}                /* secondary links; the actions remain in the menu */
}

/* NOTE on the 141 data tables: none has a scroll container, so a table wider than a phone pushes
   the page sideways. Phones need the columns prioritised, not a scrollbar — a separate piece of
   work. (The old reason for avoiding overflow-x — that it clipped the row action menu — is gone:
   .actmenu-pop is placed with position:fixed while open, which no scroll container clips.) */

/* Tablet: a wide table does not overflow, it CRUSHES. Measured on the Approvals inbox at 1180px
   (iPad landscape), the nine columns fitted in 854px only by giving the actions 106px — so
   "Open Approve Reject" wrapped onto three lines, supplier names onto four, and every row grew
   from 44px to 84px. The page looked broken down its right-hand edge.

   18px of padding on each side of nine columns is 324px of that 854 — more than a third of the
   table spent on gaps. Half of it back is enough for the actions to sit on one line, which is
   what stops the row wrapping at all. Actions never wrap: a row's buttons are the one thing that
   must stay put, and they are short. */
@media (max-width:1280px){
  table.tbl th,table.tbl td{padding-left:10px;padding-right:10px}
  table.tbl td.r:last-child,table.tbl th.r:last-child{white-space:nowrap}
  /* .opt marks a column that repeats what the column beside it already says. Dropping it is what
     gives a name column the width to stop wrapping four lines deep. Mark a column .opt only when
     losing it costs the reader nothing they cannot see elsewhere on the same row. */
  table.tbl .opt{display:none}
}
/* Opt-in sideways scroll for the few tables that are genuinely too wide to fit — the Sales Orders
   list carries a five-step tracker on top of nine columns. Opt-in, not global, because a table
   that fits reads better without a scrollbar under it. */
.tblscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tblscroll>table.tbl{min-width:1140px}
/* Left to itself the browser gave the five-pill tracker 297px and the goods 91px, so a product
   name wrapped seven lines deep and the row stood 139px tall. These two say what the row is
   about; they get a floor. */
table.tbl td.itemcell{min-width:190px}
/* In a list that scrolls sideways anyway, the floor must also hold the two columns the leader
   list now keeps INSIDE that cell — the SKU (52px) and the quantity — or the name is left ~75px
   and wraps seven deep again (a 122px row on a 1180px tablet). The width costs nothing here: the
   table already scrolls inside itself. */
.tblscroll>table.tbl td.itemcell{min-width:300px}
/* And the customer, now that the order's PO reference wraps under the name (06d5660): at its
   narrowest word the cell held the name on four lines and the PO on three. */
.tblscroll>table.tbl td.partycell{min-width:160px}
table.tbl td.timingcell{white-space:nowrap}

/* Touch targets. A 33px-tall nav row is comfortable with a mouse and a coin-toss with a finger;
   44px is the Apple HIG minimum and what the shop floor should get. Applied on touch-capable
   pointers rather than by width, so a tablet gets it in landscape too. */
@media (hover:none) and (pointer:coarse){
  .nav a,.nav button,.navgroup>button,.grp-body a,.grp-body button{min-height:44px}
  /* AND THE GROUP HEADINGS WITH THEM, or the top strip comes out ragged. A group with one item
     renders as an <a> and picked this floor up; the ten with a dropdown render as a <div> and did
     not — so on a touch screen Procurement and MES stood 44px tall in a row of 35px items and sat
     visibly lower than everything beside them. The floor is right for a finger; what was wrong is
     that only two of twelve got it. */
  .nav-top .grp{min-height:44px}
  .btn-sm,.btn-ghost,.lnk,.chip{min-height:44px;display:inline-flex;align-items:center}
  table.tbl td,table.tbl th{padding-top:13px;padding-bottom:13px}
  /* iOS zooms the whole page when a text field under 16px is focused, and never zooms back.
     Every input in this app was 13px. */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
}
.menu-btn{display:none;width:36px;height:36px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);place-items:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{content:"";display:block;width:16px;height:2px;background:var(--ink);position:relative}
.menu-btn span::before{position:absolute;top:-5px}.menu-btn span::after{position:absolute;top:5px}
/* THE MENU VANISHING. Below 1024 the sidebar becomes a drawer parked at translateX(-100%), and
   this button is the only thing that brings it back. It was shown by `.menu-btn{display:grid}`
   inside the 1024 media query far above — but the `display:none` on the line above here is
   declared LATER in the file at the same specificity, so it won the cascade and the button was
   invisible at every width. The drawer had no handle: on a tablet the whole menu was simply gone,
   and rotating the device or resizing across 1024 made it look random.
   Keeping the show rule here, after the base, is what makes it stick. */
@media (max-width:1024px){ .menu-btn{display:grid} }
/* In top-menu mode the nav is a bar across the top, not a drawer — there is nothing to open. */
.nav-top .menu-btn{display:none}

/* ===== shared components (added for module screens) ===== */
.page-head .actions{display:flex;gap:8px;align-items:center}
/* Toolbar inputs/selects follow the theme like the buttons beside them — rounded corners,
   the same border and background — instead of the browser's default square chrome. */
.page-head .actions input,.page-head .actions select{
  padding:9px 12px;border:1px solid var(--line-strong);border-radius:8px;font-size:13px;
  background:var(--card);color:var(--ink);font-family:inherit;box-sizing:border-box}
.page-head .actions input:focus,.page-head .actions select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.btn-sm{background:var(--blue);color:#fff;border:0;border-radius:8px;padding:9px 15px;font-size:13px;font-weight:700}
.btn-sm:hover{background:var(--blue-700)} .btn-sm:disabled{opacity:.6;cursor:default}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--line-strong);border-radius:8px;padding:9px 14px;font-size:13px;font-weight:600}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.lnk{background:none;border:0;color:var(--blue);font-size:12.5px;font-weight:600;padding:2px 4px}
.lnk:hover{text-decoration:underline}
.lnk.del{color:var(--neg)}

.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line-strong);border-radius:9px;overflow:hidden}
.seg button{background:var(--card);border:0;padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--ink-soft);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--blue);color:#fff}
.search{flex:1;min-width:180px;max-width:340px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:9px;font-size:13px;background:#fcfdfe}
.search:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.toolbar .inline{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft)}
.toolbar .inline input[type=date]{padding:7px 9px;border:1px solid var(--line-strong);border-radius:8px;font-size:12.5px;background:#fcfdfe}

.badge{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:20px;font-weight:600}
.badge.cust{background:var(--blue-050);color:var(--blue)}
.badge.supp{background:#fdf0e3;color:var(--warn)}
.badge.parent{background:#ece9fb;color:#5b46c9}

/* Row action dropdown — primary action stays inline, the rest under “⋯” */
.actmenu{position:relative;display:inline-block}
.actmenu-tog{padding:0 6px;font-weight:700;letter-spacing:1px}
.actmenu-pop{display:none;position:absolute;right:0;top:calc(100% + 4px);z-index:60;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 22px rgba(20,30,50,.16);padding:4px;min-width:132px;text-align:left}
.actmenu.open .actmenu-pop{display:block}
.actmenu-pop .lnk{display:block;width:100%;text-align:left;padding:6px 10px;border-radius:6px;margin:0}
.actmenu-pop .lnk:hover{background:var(--blue-050)}
.actmenu-pop .badge{display:block;margin:4px}

/* Searchable select — text input overlay + filtered panel over a hidden native <select> */
.ssel{position:relative;display:inline-block;width:100%;vertical-align:middle}
.ssel-input{width:100%;cursor:text;background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px}
.ssel-panel{display:none;position:fixed;z-index:9999;background:#fff;border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 12px 34px rgba(14,22,38,.24);max-height:264px;overflow:auto;padding:4px}
.ssel-panel.show{display:block}
.ssel-opt{padding:6px 10px;border-radius:6px;font-size:13px;cursor:pointer;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.ssel-opt.hi,.ssel-opt:hover{background:var(--blue-050)}
.ssel-opt.sel{font-weight:600}
.ssel-empty{padding:8px 10px;color:var(--ink-soft);font-size:12px}

.empty{padding:42px 20px;text-align:center;color:var(--ink-soft);font-size:13px}
.tbl tr.op td{background:var(--sunk);font-style:italic;color:var(--ink-soft)}
/* A ROW THAT IS NOT A DOCUMENT YET. A draft sits in the register beside orders that have been
   approved, and read identically to them. The amber wash is the same colour the warn badge and
   the pending pill already use for "someone still has to act on this", and the bar down the left
   edge is what carries it when the wash is too faint to see — on a projector, on a print, or for
   a reader who cannot separate the two backgrounds. Deliberately weak: it must mark the row
   without making the figures on it harder to read than the rows around it. */
/* TWO ROWS THAT NEED FINDING IN A REGISTER, and they are not the same kind of wrong.
   `row-late` is a deadline missed — somebody has to chase it. `row-bad` is money that has left
   the bank with nothing in the ledger to say so, which is not a queue item but a fault. The
   amber and the red say which, before anything is read. */
.tbl tr.row-late>td{background:#fff8ec}
[data-theme="dark"] .tbl tr.row-late>td{background:#241d10}
.tbl tr.row-late>td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.tbl tr.row-bad>td{background:#fdeceb}
[data-theme="dark"] .tbl tr.row-bad>td{background:#2a1512}
.tbl tr.row-bad>td:first-child{box-shadow:inset 3px 0 0 var(--neg)}
.tbl tr.row-draft>td{background:#fff8ec}
[data-theme="dark"] .tbl tr.row-draft>td{background:#241d10}
.tbl tr.row-draft>td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.badge.draft{background:#fdf0e3;color:var(--warn);border:1px dashed var(--warn);font-weight:700}
[data-theme="dark"] .badge.draft{background:#2b2214}
.ledger-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 18px;border-bottom:1px solid var(--line)}

/* modal */
.modal-overlay{position:fixed;inset:0;background:rgba(14,22,38,.45);display:grid;place-items:center;z-index:60;padding:20px}
.modal{background:var(--card);border-radius:14px;width:100%;max-width:520px;box-shadow:0 20px 60px rgba(14,22,38,.3);max-height:90vh;display:flex;flex-direction:column}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:16px;font-weight:700}
.modal-head .x{background:none;border:0;font-size:24px;line-height:1;color:var(--ink-soft)}
.modal-head .x:hover{color:var(--neg)}
.modal-body{padding:18px 20px;overflow:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:9px;padding:14px 20px;border-top:1px solid var(--line)}
/* A DIALOG THAT BECAME A PAGE. openPage() reuses the modal's three parts so a form can move
   between the two by changing one word at the call site; these rules undo the only things that
   were about being a floating box. The foot sticks to the bottom of the viewport because a
   twenty-field document scrolls, and Save must not scroll off with it. */
.docpage-edit{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.docpage-edit .modal-body{max-height:none;overflow:visible;padding:20px}
.docpage-edit .modal-foot{position:sticky;bottom:0;background:var(--panel);z-index:5}
/* A FULL-PAGE FORM'S TITLE BAR PASSES UNDER THE APP'S TOP BAR, NOT OVER IT. With the top bar's own
   z-index it was painted above it as the page scrolled — "Purchase order from PR-0004" printed
   across "Lockersmiths", Back sat on Sign out. One layer below fixes that. (top stays 0: the
   .docpage-edit box clips its overflow, so the head never actually sticks to the window — an
   offset only pushed it down over the form's first row.) */
.docpage-edit .modal-head{position:sticky;top:0;background:var(--panel);z-index:4}

/* ===== THE EMPLOYEE RECORD — a page: title bar, a rail, cards across the width =====
   The one full-page form that lets its box overflow: the title bar and the rail have to stick to
   the WINDOW while the cards scroll, and a clipping box gives sticky nothing to stick to. The
   offset under the app's own top bar is measured by the page (--empf-top), never assumed — it is
   taller on a phone and different in the top-navigation layout. */
.docpage-edit.empf-page{overflow:visible;border:0;border-radius:0;background:transparent;--empf-top:60px}
.empf-page [hidden]{display:none!important}          /* a grid or flex rule must not un-hide what "+ More" folded */
.empf-page>.modal-head{position:sticky;top:var(--empf-top);z-index:6;background:var(--paper);border-bottom:1px solid var(--line);padding:12px 0;gap:14px;flex-wrap:wrap}
.empf-head-t{display:flex;align-items:baseline;gap:12px;min-width:0;flex:1 1 320px}
.empf-head-t h3{margin:0;font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.empf-note{font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.empf-acts{display:flex;gap:8px;align-items:center;margin-left:auto}
.empf-page>.modal-body{padding:18px 0 48px}
.empf{display:grid;grid-template-columns:228px minmax(0,1fr);gap:22px;align-items:start}
.empf-rail{position:sticky;top:calc(var(--empf-top) + var(--empf-headh,64px) + 16px);display:flex;flex-direction:column;gap:14px}
.empf-photo{position:relative;aspect-ratio:1/1;border:1.5px dashed var(--line-strong);border-radius:14px;background:var(--card);display:grid;place-items:center;cursor:pointer;overflow:hidden;transition:border-color .15s,background .15s}
.empf-photo:hover,.empf-photo:focus-visible,.empf-photo.drag{border-color:var(--blue);background:var(--blue-050);outline:0}
.empf-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.empf-photo.has{border-style:solid;border-color:var(--line)}
.empf-photo.has img{display:block}
.empf-photo.has .empf-photo-empty{display:none}
.empf-photo-empty{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:12px;color:var(--ink-soft)}
.empf-photo-empty b{font-size:13.5px;color:var(--ink)}
.empf-photo-ic{width:38px;height:38px;border-radius:50%;background:var(--blue-050);color:var(--blue);display:grid;place-items:center;font-size:22px;font-weight:500;margin-bottom:2px}
.empf-photo-acts{display:flex;justify-content:center;gap:12px;margin-top:-6px}
.empf-prog{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.empf-prog-h{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;margin-bottom:8px}
.empf-prog-h span{font-weight:700;color:var(--ink)}
.empf-bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.empf-bar i{display:block;width:0;height:100%;border-radius:6px;background:var(--blue);transition:width .25s}
.empf-bar.full i{background:var(--pos)}
.empf-togo{margin-top:7px;font-size:11.5px;color:var(--ink-soft)}
.empf-jump{display:flex;flex-direction:column;gap:2px}
.empf-jump button{background:none;border:0;text-align:left;padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;font-family:inherit}
.empf-jump button:hover{color:var(--ink);background:var(--card)}
.empf-jump button.on{color:var(--blue);background:var(--blue-050);box-shadow:inset 2px 0 0 var(--blue)}
.empf-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.empf-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;container-type:inline-size;min-width:0}
.empf-card.wide,.empf-srverr{grid-column:1/-1}
.empf-card>h4{margin:0 0 14px;font-size:14.5px;font-weight:700;color:var(--ink);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.empf-card>h4 small{font-size:12px;font-weight:500;color:var(--ink-soft)}
.empf-sub{margin:16px 0 10px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.empf .form-grid.empf-fg{grid-template-columns:minmax(0,1fr);gap:12px 14px}
@container (min-width:340px){.empf .form-grid.empf-fg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:600px){.empf .form-grid.empf-fg{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* The address pairs with the email in two columns and takes a row of its own in three. */
@container (max-width:599px){.empf .form-grid.empf-fg .field.full.empf-pair{grid-column:auto}}
@container (max-width:339px){.empf .form-grid.empf-fg .field.full.empf-pair{grid-column:1/-1}}
.empf .field{margin:0;min-width:0}
.empf .field>label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin-bottom:5px}
.empf .form-grid input:not([type=checkbox]):not([type=file]),.empf .form-grid select{height:38px;padding:0 11px;font-size:13.5px;box-sizing:border-box}
.empf-req{color:var(--neg)}
.empf-hint{font-size:11.5px;color:var(--ink-soft);margin-top:4px}
.empf .field.bad input,.empf .field.bad select{border-color:var(--neg);box-shadow:0 0 0 3px color-mix(in srgb,var(--neg) 16%,transparent)}
.empf-err{font-size:11.5px;font-weight:600;color:var(--neg);margin-top:4px}
.empf-chk{display:inline-flex;align-items:center;gap:7px;color:var(--ink);cursor:pointer}
.empf .form-grid .empf-chk input{flex:none;margin:0;padding:0;width:15px;height:15px;accent-color:var(--blue)}
.empf-more{margin-top:12px;padding:2px 0;font-size:12.5px}
.empf-extra{margin-top:12px;padding-top:14px;border-top:1px dashed var(--line)}
.empf-total{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;padding:9px 12px;border-radius:9px;background:var(--sunk);border:1px solid var(--line);font-size:12.5px;color:var(--ink-soft)}
.empf-total b{color:var(--ink)}
.empf-total.ok span:last-child{color:var(--pos);font-weight:600}
.empf-total.warn{border-color:color-mix(in srgb,var(--warn) 55%,transparent);background:color-mix(in srgb,var(--warn) 10%,var(--card))}
.empf-total.warn span:last-child{color:var(--warn);font-weight:700}
.empf-srverr{background:color-mix(in srgb,var(--neg) 9%,var(--card));border:1px solid color-mix(in srgb,var(--neg) 40%,transparent);color:var(--neg);border-radius:10px;padding:10px 14px;font-size:13px}
.empf-docs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;gap:12px;align-items:start}
@container (max-width:760px){.empf-docs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:380px){.empf-docs{grid-template-columns:minmax(0,1fr)}}
.empf-doc{border:1.5px dashed var(--line-strong);border-radius:12px;background:var(--sunk);min-width:0;transition:border-color .15s,background .15s}
.empf-doc.done{border-style:solid;border-color:var(--line);background:var(--card)}
.empf-doc.lapsed{border-color:var(--warn)}
.empf-doc.open{grid-column:1/-1;border-style:solid;border-color:var(--blue);background:var(--card)}
.empf-doc.drag,.empf-doc-h.drag{border-color:var(--blue);background:var(--blue-050)}
.empf-doc-h{display:flex;align-items:center;gap:11px;width:100%;padding:13px 14px;background:none;border:0;border-radius:12px;text-align:left;cursor:pointer;color:var(--ink);font-family:inherit}
.empf-doc-ic{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:10.5px;font-weight:800;letter-spacing:.04em;background:var(--blue-050);color:var(--blue)}
.empf-doc.done .empf-doc-ic{background:color-mix(in srgb,var(--pos) 15%,transparent);color:var(--pos)}
.empf-doc.lapsed .empf-doc-ic{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.empf-doc-t{flex:1;min-width:0}
.empf-doc-t b{display:block;font-size:13px}
.empf-doc-t small{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empf-doc-chev{flex:none;width:7px;height:7px;margin:0 4px 4px;border-right:1.8px solid var(--ink-soft);border-bottom:1.8px solid var(--ink-soft);transform:rotate(45deg);transition:transform .15s;font-size:0}
.empf-doc.open .empf-doc-chev{transform:rotate(225deg);margin:4px 4px 0}
.empf-doc-b{padding:2px 14px 14px}
.empf-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.empf-slots.one{grid-template-columns:minmax(0,1fr)}
.empf-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:76px;padding:10px;border:1.5px dashed var(--line-strong);border-radius:10px;text-align:center;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink);transition:border-color .15s,background .15s}
.empf-slot:hover,.empf-slot.drag{border-color:var(--blue);background:var(--blue-050)}
.empf-slot.set{border-style:solid;border-color:color-mix(in srgb,var(--pos) 60%,transparent)}
.empf-slot-s{font-size:11.5px;font-weight:500;color:var(--ink-soft);word-break:break-word}
.empf-menu{position:relative}
.empf-menu>summary{list-style:none;cursor:pointer;user-select:none}
.empf-menu>summary::-webkit-details-marker{display:none}
.empf-menu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:250px;padding:6px;background:var(--card);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow)}
.empf-menu-pop button{display:block;width:100%;padding:8px 10px;background:none;border:0;border-radius:7px;text-align:left;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit}
.empf-menu-pop button small{display:block;font-weight:500;font-size:11.5px;color:var(--ink-soft)}
.empf-menu-pop button:hover{background:var(--blue-050)}
#ef_s_hist .re-row input{min-width:0;height:36px;padding:0 10px;border:1px solid var(--line-strong);border-radius:8px;font-size:13px;background:#fcfdfe;color:var(--ink)}
[data-theme="dark"] #ef_s_hist .re-row input{background:#1b232e}
@media (max-width:1180px){.empf-main{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .empf{grid-template-columns:minmax(0,1fr);gap:16px}
  .empf-rail{position:static;display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px 14px;align-items:start}
  .empf-photo{grid-row:span 2}
  .empf-photo-acts{grid-column:1;margin:0}
  .empf-jump{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:6px}
  .empf-jump button{padding:6px 10px;font-size:12px;background:var(--card);border:1px solid var(--line)}
  .empf-jump button.on{box-shadow:none;border-color:var(--blue)}
}
@media (max-width:560px){
  .empf-page>.modal-head{padding:10px 0;gap:8px}
  .empf-head-t{flex-basis:100%;flex-wrap:wrap;row-gap:2px}
  .empf-head-t h3{font-size:16px}
  .empf-acts{margin-left:0;width:100%}
  .empf-acts #modalOk{flex:1}
  .empf-card{padding:14px}
  #ef_s_hist .re-row{flex-wrap:wrap}
  #ef_s_hist .re-row input{flex:1 1 40%!important}
}

/* Choose-from-List picker (stacks above an open modal) */
.pick-overlay{z-index:70}
.pick-field{display:flex;align-items:center;gap:8px}
.pick-field .pick-val{flex:1;min-width:0}
input.pick-val{padding:9px 12px;border:1px solid var(--line-strong);border-radius:9px;font-size:13px;background:#f6f8fa;color:var(--ink);cursor:default}
.btn-pick{padding:9px 13px;white-space:nowrap}
.pick-overlay .pick-search{width:100%;max-width:none;box-sizing:border-box}
.pick-add{display:flex;gap:8px;margin-top:10px}
.pick-add .pick-new{flex:1;max-width:none}
.pick-list{margin-top:10px;max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
.pick-row{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:0;border-bottom:1px solid var(--line);padding:11px 14px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.pick-row:last-child{border-bottom:0}
.pick-row:hover{background:var(--blue-050)}
.pick-row.on{background:var(--blue-050);box-shadow:inset 3px 0 0 var(--blue)}
.pick-sub{font-size:11.5px;font-weight:500;color:var(--ink-soft)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.form-grid .full{grid-column:1/-1}
.form-grid .field{margin-bottom:0}
.form-grid label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.form-grid select,.form-grid input{width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:9px;font-size:13.5px;background:#fcfdfe}
.form-grid select:focus,.form-grid input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
/* A FIGURE THE FORM WORKED OUT, not one it is asking for. It has to LOOK unlike the boxes beside
   it, or the only thing telling somebody they cannot type in it is the cursor refusing to appear —
   which reads as a broken field rather than a settled one. */
input.derived,.form-grid input.derived{background:var(--paper);border-style:dashed;color:var(--ink);font-weight:700;cursor:default}
input.derived:focus{box-shadow:none;border-color:var(--line-strong)}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:600;z-index:80;opacity:0;transition:opacity .2s,transform .2s;box-shadow:0 10px 30px rgba(0,0,0,.25)}
[data-theme="dark"] .toast{background:#222c38;color:var(--ink)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--neg)}
/* Something worked but is not finished — a request saved as a draft until its receipt arrives.
   Without its own colour it wore the success green and read as "done". */
.toast.warn{background:var(--warn);color:#fff}

/* ===== inventory ===== */
.sub-divider{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:16px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
/* On-screen QR (asset card etc.): segno's SVG carries fixed pixel width/height from its scale,
   so without this it overflows or rattles inside whatever box the screen gives it. */
.qr-card svg{width:100%;height:100%;display:block}
.badge.stock{background:var(--blue-050);color:var(--blue)}
.badge.svc{background:#eef0f3;color:var(--ink-soft)}
.badge.low{background:#fdecea;color:var(--neg)}
.badge.autoissue{background:#fef3c7;color:#92400e}
[data-theme="dark"] .badge.autoissue{background:#3a2c10;color:#f5c66b}
.mv-auto td{background:rgba(245,158,11,.06)}
.mv-hist td{color:var(--ink-soft);font-style:italic}
.cp-refs:not(.open){display:none!important}
.smode-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin:4px 0 8px}
.smode{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer}
.smode:has(input:checked){border-color:var(--accent,#2563eb);background:rgba(37,99,235,.06)}
.smode input{margin-top:3px}.smode b{display:block;font-size:13px}.smode .hint{display:block;margin-top:2px;line-height:1.35}

/* ===== transactional modules ===== */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 16px;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--blue);border-bottom-color:var(--blue)}
/* MATERIAL IN AND MATERIAL OUT, TOLD APART BEFORE THEY ARE READ. Nine tabs of identical grey is a
   strip somebody scans word by word every time; the two that move stock are the two people reach
   for most, and they are opposites. Green for what comes in, amber for what goes out — the same
   pair of meanings the rest of the system already uses for a receipt and an issue. The tint is on
   the label only, so the selected-tab underline still says which one you are on. */
.tabs button[data-t="receipts"]{color:var(--pos)}
.tabs button[data-t="issuance"],.tabs button[data-t="returns"]{color:var(--warn)}
/* The button that sends material out of the building, coloured like the act. Everything else on
   an inventory toolbar reads a list; this one moves stock and money, and it should not look the
   same as Print. */
.btn-sm.out{background:var(--warn);border-color:var(--warn);color:#3a2a00}
.btn-sm.out:hover{filter:brightness(1.06)}
.btn-sm.in{background:var(--pos);border-color:var(--pos);color:#052e14}
.btn-sm.in:hover{filter:brightness(1.06)}
.tabs button[data-t="receipts"].on{color:var(--pos);border-bottom-color:var(--pos)}
.tabs button[data-t="issuance"].on,.tabs button[data-t="returns"].on{color:var(--warn);border-bottom-color:var(--warn)}
.line-tbl{width:100%;border-collapse:collapse;margin-bottom:10px}
.line-tbl th{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding:4px 6px}
.line-tbl td{padding:3px 5px;vertical-align:middle}
/* Text boxes and dropdowns fill their cell. A CHECKBOX IS NEITHER, and this rule used to catch
   it: width:100% made a 13px box 246px wide, so its tick sat in the middle of the column and the
   label beside it was pushed past the right-hand edge and clipped away. That is how the delivery
   note's serial picker came to show a column of checkboxes with no serial numbers against them.
   The permissions table had already met this and patched the width half of it for itself alone;
   the rule simply should not reach a checkbox in the first place. */
.line-tbl input:not([type=checkbox]):not([type=radio]),.line-tbl select{width:100%;padding:8px 9px;border:1px solid var(--line-strong);border-radius:7px;font-size:13px;background:#fcfdfe}
.line-tbl input:focus,.line-tbl select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-050)}
.line-tbl.perm td{text-align:center}
.line-tbl.perm td:first-child{text-align:left;font-size:12.5px;white-space:nowrap}
/* Was the local workaround for the rule above, kept so the permissions grid is not the only
   table whose checkboxes behave. It is redundant now and left out deliberately rather than left
   in to puzzle the next reader. */
.badge.ok2{background:#e6f4ec;color:var(--pos)}
/* Pipeline states read as a progression, so each stage gets its own hue instead of every
   in-flight state sharing one green: ordered (blue, in motion) -> received (teal, goods in)
   -> billed (indigo, liability booked) -> paid (solid green, settled). */
.badge.st-approved{background:#eef2f6;color:#475467}
.badge.st-ordered{background:#e7f0fd;color:#0d6efd}
.badge.st-received{background:#dff3f0;color:#0f766e}
.badge.st-billed{background:#ece9fb;color:#5b46c9}
.badge.pend{background:#fdf0e3;color:var(--warn)}
.report-row{display:flex;justify-content:space-between;align-items:center;padding:11px 18px;border-bottom:1px solid var(--line);font-size:13.5px}
.report-row:last-child{border-bottom:0}
.report-row.tot{font-weight:700;background:var(--sunk)}
.report-row .num{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.warnbar{background:#fdf0e3;border:1px solid #f0d4a8;color:#8a5a12;font-size:12.5px;padding:11px 14px;border-radius:9px;margin-bottom:16px}
/* A rejection somebody has not seen yet. Loud enough to stop a person who came back to their desk
   and glanced at the screen — which is the whole job — and quiet enough not to be a modal that
   loses what they were typing. It sits above the page rather than inside it, so a screen redraw
   does not take it away. */
/* Item photograph beside a document line — invoice, bill, order, receipt, delivery. Small enough
   not to change the shape of the table, big enough to tell a bracket from a hinge. */
.linethumb{width:26px;height:26px;object-fit:contain;background:#fff;border:1px solid var(--line);
  border-radius:4px;vertical-align:middle;margin-right:7px}
@media print{.linethumb{display:none!important}}
#rejBanner{padding:0 22px;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.rejbar{display:flex;align-items:center;gap:12px;background:#fdecec;border:1px solid #f3b7b7;
  border-left:4px solid var(--neg,#c0392b);color:#7d1f1f;border-radius:9px;padding:11px 14px;font-size:13px}
.rejbar b{color:#5c1414}
.rejbar .rejx{cursor:pointer;opacity:.55;font-size:14px;line-height:1}
.rejbar .rejx:hover{opacity:1}
.rejbar .rejopen,.rejbar .rejdismiss{border:1px solid #e0a0a0;background:#fff;color:#7d1f1f;
  border-radius:7px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.rejbar .rejopen{background:var(--neg,#c0392b);border-color:var(--neg,#c0392b);color:#fff}
@media print{#rejBanner{display:none!important}}
.modal.wide{max-width:760px}
/* A settlement form is a form AND a table: the invoices being cleared, which branch each was
   billed to, what is due and what is being settled. At 760px those columns fight the fields
   above them. Between wide and xwide, because xwide is for a printed document preview and is far
   too much room for a voucher. */
.modal.wider{max-width:min(1060px,96vw)}
/* For content that is inherently a ROW — the relationship map's document chain — rather
   than a form. Capped against the viewport so it never overflows a small screen. */
.modal.xwide{max-width:min(1560px,96vw)}

/* ===== live attendance board (kiosk) ===== */
.attb{background:#0d1320;color:#e7edf6;border-radius:14px;padding:22px 24px;min-height:82vh}
.attb-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.attb-title{font-size:22px;font-weight:800;letter-spacing:.5px}
.attb-date{color:#8aa0bd;font-size:13px;margin-top:3px}
.attb-clock{font-family:'JetBrains Mono',monospace;font-size:46px;font-weight:700;color:#fff;letter-spacing:2px}
.attb-actions{display:flex;gap:8px}
.attb .btn-ghost{background:rgba(255,255,255,.08);color:#e7edf6;border-color:rgba(255,255,255,.16)}
.attb-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px;margin-bottom:22px}
.attb-kpi{background:#141d2e;border:1px solid #22304a;border-radius:12px;padding:14px 12px;text-align:center}
.attb-kpi .v{font-size:34px;font-weight:800;line-height:1}
.attb-kpi .l{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#8aa0bd;margin-top:6px}
.attb-kpi.ok .v{color:#3ddc84}.attb-kpi.bad .v{color:#ff6b5e}.attb-kpi.warn .v{color:#ffb84d}
.attb-feedhead{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#8aa0bd;margin-bottom:10px}
.attb-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.attb-card{display:flex;align-items:center;gap:12px;background:#141d2e;border:1px solid #22304a;border-left-width:4px;border-radius:12px;padding:10px 12px}
.attb-card.i{border-left-color:#3ddc84}.attb-card.o{border-left-color:#ffb84d}
.attb-card .pic img,.attb-card .pic .ph{width:52px;height:52px;border-radius:10px;object-fit:cover;display:flex;align-items:center;justify-content:center}
.attb-card .pic .ph{background:#22304a;color:#cdd9ec;font-weight:700;font-size:18px}
.attb-card .who{flex:1;min-width:0}
.attb-card .nm{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attb-card .dp{font-size:11px;color:#8aa0bd;margin-top:2px}
.attb-card .tm{text-align:right}
.attb-card .io{font-size:11px;font-weight:800;padding:2px 8px;border-radius:6px}
.attb-card .io.in{background:rgba(61,220,132,.18);color:#3ddc84}
.attb-card .io.out{background:rgba(255,184,77,.18);color:#ffb84d}
.attb-card .tm .t{font-family:'JetBrains Mono',monospace;font-size:14px;margin-top:4px;color:#cdd9ec}
.attb-empty{color:#8aa0bd;padding:34px;text-align:center;grid-column:1/-1}

/* dense salary sheet — fit every column, no horizontal scroll, grouped headers */
.tbl.sheet{width:100%;font-size:10px;table-layout:auto;border-collapse:collapse}
.tbl.sheet th,.tbl.sheet td{padding:5px 5px;white-space:nowrap;border-right:1px solid var(--line)}
.tbl.sheet th{letter-spacing:0;font-size:9.5px}
.tbl.sheet .gsep{border-left:2px solid var(--line-strong)}
.tbl.sheet thead tr.grp th{text-align:center;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);background:var(--paper);border-bottom:1px solid var(--line-strong);padding:4px 6px}
/* ===== PRINT: turn any in-app page into a clean document (item report, ledgers,
   stock status, registers…). Redefines the design tokens for paper so everything
   that uses var() becomes document-like, then strips on-screen chrome. ===== */
@page{margin:14mm}
@media print{
  /* force a light, flat palette regardless of the active theme */
  :root,[data-theme="dark"]{
    --ink:#15202e;--ink-2:#1b2433;--ink-soft:#5a6573;
    --paper:#ffffff;--card:#ffffff;--line:#d6dbe2;--line-strong:#b6bdc8;
    --shadow:none;--r:6px;--blue:#1b2a44;--blue-700:#1b2a44;
  }
  html,body{background:#fff!important}
  *{box-shadow:none!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* strip interactive chrome */
  .side,#side,.topbar,.gsearch,.navgroup,.page-head .actions,.tabs,
  .sapdoc-toolbar,.sapdoc-nav,.seg,.attach-btns,.filters,
  .btn,.btn-sm,.btn-ghost,.ga,[data-od-add],#notifPanel,.skel,.kpi-link::after,
  .warnbar{display:none!important}

  /* full-bleed single column */
  .shell,.nav-top.shell{display:block!important;grid-template-columns:1fr!important}
  .main{display:block!important;width:100%!important}
  .content{padding:0!important;max-width:none!important;width:100%!important;margin:0!important}

  /* links print as plain dark text (keep ref values visible, drop the blue) */
  a,.lnk{color:var(--ink)!important;text-decoration:none!important}

  /* page heading */
  .page-head{border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:14px}
  .page-head h2{font-size:20px!important}

  /* cards → flat document blocks */
  .section,.card,.widget,.kpi{border:1px solid var(--line)!important;border-radius:0!important;background:#fff!important;break-inside:avoid}
  .section{margin:0 0 12px!important}
  .kpis{gap:0!important;border:1px solid var(--line);border-radius:0}
  .kpi{border:0!important;border-right:1px solid var(--line)!important}
  .kpi:last-child{border-right:0!important}

  /* tables → clean, repeat header, never split a row across pages */
  table{width:100%!important;border-collapse:collapse!important}
  thead{display:table-header-group}
  tr{break-inside:avoid}
  th{background:#eef1f5!important;border-bottom:1.5px solid var(--ink-soft)!important;
     text-transform:uppercase;font-size:9.5px;letter-spacing:.04em;color:#3a4453!important}
  td,th{padding:6px 9px!important;font-size:10.5px!important}
  td{border-bottom:1px solid #e8ebf0!important}

  /* chips/badges → outline, not filled */
  .badge,.statuschip{background:#fff!important;border:1px solid var(--line-strong)!important;color:#333!important}
  .sub-divider{color:#3a4453!important;border-bottom-color:var(--ink-soft)!important}
  .print-meta{margin-top:18px!important}
}

/* ===== attachments (camera + file) ===== */
.attach-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.attach-btns .btn-ghost{font-size:13px}
.attach-list{display:flex;flex-direction:column;gap:6px}
.attach-item{display:flex;align-items:center;gap:10px;background:#f6f8fa;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:12.5px}
.attach-item .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-item .sz{font-family:'JetBrains Mono',monospace;color:var(--ink-soft);font-size:11px}
/* a block a file can be dropped on or pasted into (35-shared-txn.js attachDropPaste) */
.attdrop{position:relative;border-radius:8px}
.attdrop.drag{outline:2px dashed var(--blue);outline-offset:4px;background:var(--blue-050)}
.attdrop.drag::after{content:"Drop to attach";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;color:var(--blue);background:var(--blue-050);opacity:.92;border-radius:8px;pointer-events:none}

/* ===== security policy screen ===== */
.toggle{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer}
.toggle input{width:auto}
.hint{font-size:12px;color:var(--ink-soft);margin:0 0 8px}
.mono-area{width:100%;padding:10px 12px;border:1px solid var(--line-strong);border-radius:9px;font-family:'JetBrains Mono',monospace;font-size:12.5px;background:#fcfdfe;resize:vertical}
.mono-area:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-050)}
.secwin{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
.secdays{display:flex;gap:4px;flex-wrap:wrap}
.daychip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;background:#f3f5f8;border:1px solid var(--line);border-radius:6px;padding:4px 7px;cursor:pointer}
.daychip input{width:auto}
.fromto{font-size:12.5px;color:var(--ink-soft)}
.fromto input{padding:6px 8px;border:1px solid var(--line-strong);border-radius:7px;font-size:12.5px}

/* ===== item master (tabbed) ===== */
.tabpane{padding-top:4px}
.flagrow{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:4px}
.chk{display:inline-flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
.chk input{width:auto}
.itemthumb{width:38px;height:38px;border-radius:8px;object-fit:cover;background:#eef1f4;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--ink-soft);border:1px solid var(--line)}
.itemthumb.ph{font-family:'JetBrains Mono',monospace}
.thumbs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.thumb{position:relative;width:96px}
.thumb img{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#eef1f4}
.thumb-x{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:0;background:var(--neg);color:#fff;cursor:pointer;font-size:12px;line-height:1}
.thumb-set{display:block;width:100%;margin-top:4px;font-size:10.5px;background:none;border:0;color:var(--blue);cursor:pointer}
.thumb-primary{display:block;margin-top:4px;font-size:10px;text-align:center;color:var(--pos);font-weight:700;text-transform:uppercase;letter-spacing:.05em}

/* ===== sales order ===== */
.netchip{float:right;font-family:inherit;font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.netchip b{color:var(--blue);font-size:13px}
.inforow{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 24px}
@media(min-width:560px){.inforow{grid-template-columns:repeat(4,1fr)}}
.kv{display:flex;flex-direction:column;gap:2px}
.kv .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-family:'JetBrains Mono',monospace}
.kv .v{font-size:13px;color:var(--ink)}

/* ===== Relationship Map (SAP B1 document flow) ===== */
.rm-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-soft);margin-bottom:12px}
.rm-legend span{display:inline-flex;align-items:center;gap:5px}
.rm-swatch.entry{width:14px;height:14px;border-radius:4px;border:1px solid #e0962a;box-shadow:0 0 0 2px #fbeed2;display:inline-block}
.rm-flow{display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;padding:4px 2px 10px;scrollbar-width:thin}
/* the chain is one line: nodes keep their width and the row scrolls instead of wrapping */
.rm-flow > *{flex-shrink:0}
.rm-node{flex:0 0 172px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:11px 12px;position:relative;display:flex;flex-direction:column}
.rm-node.entry{border-color:#e0962a;box-shadow:0 0 0 3px #fbeed2}
.rm-node .rm-kind{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:700}
.rm-node .rm-no{font-size:13.5px;font-weight:700;margin:3px 0}
.rm-node .rm-amt{font-size:12px;color:var(--ink-soft)}
.rm-node .rm-st{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:var(--ink-soft)}
.rm-node .rm-glyphs{position:absolute;top:9px;right:10px;font-size:11px}
.rm-conn{flex:0 0 30px;display:flex;align-items:center;justify-content:center;color:var(--line-strong);font-size:18px}
.rm-flow .dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.rm-flow .dot.open{background:var(--pos)} .rm-flow .dot.part{background:var(--warn)} .rm-flow .dot.closed{background:var(--ink-soft)}
.rm-flow .dot.skipped{background:transparent;border:1px dashed var(--ink-soft)}
.rm-node.skipped{border-style:dashed;background:var(--paper);opacity:.7}
.rm-open{position:absolute;bottom:8px;right:9px}
/* Bottom-left on every card, so the eye reads dates straight across the chain instead of hunting
   for them at whatever height the card above happened to end.
   PINNED ABSOLUTELY, THEY LANDED ON EACH OTHER. One card carries up to four of these lines — the
   date, the approver, the hour they approved, the bridge mark — and every one of them was pinned
   to the same corner, so anything past the first printed over the last. The block bottom-aligns
   instead (the row already stretches every card to the same height, which is what made the
   straight read work in the first place) and the lines inside stack upward from it.
   The right padding is the open arrow's corner; text stops before it rather than under it. */
.rm-node .rm-foot{margin-top:auto;padding-top:9px;padding-right:20px;display:flex;flex-direction:column;gap:1px}
.rm-node .rm-date{margin:0;font-size:10.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-node .rm-date.soft{font-weight:500;font-size:10px;opacity:.8}
.ga{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border:1px solid transparent;border-radius:4px;background:transparent;color:#e0962a;font-weight:800;font-size:13px;cursor:pointer;line-height:1}
.ga:hover{background:#fbf1de;border-color:#e6cf9b}
.u-paid{border-bottom:2px solid var(--pos)} .u-unpaid{border-bottom:2px solid var(--neg)}

/* ===== SAP B1 document layout (full-page marketing document) ===== */
.sapdoc-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.sapdoc-toolbar .seg{display:flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.sapdoc-toolbar .seg button{background:var(--card);border:0;border-right:1px solid var(--line);padding:6px 12px;font-size:12.5px;color:var(--ink-soft);cursor:pointer}
.sapdoc-toolbar .seg button:last-child{border-right:0}
.sapdoc-toolbar .seg button.on{background:var(--blue);color:#fff}
.sapdoc-tbtn{background:var(--card);border:1px solid var(--line-strong);border-radius:8px;padding:6px 12px;font-size:12.5px;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.sapdoc-tbtn:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.sapdoc-tbtn:disabled{opacity:.45;cursor:not-allowed}
.sapdoc-tbtn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.sapdoc-tbtn.primary:hover{background:var(--blue-700)}
.sapdoc-sp{flex:1}
.sapdoc-nav{display:inline-flex;gap:3px;align-items:center}
.sapdoc-nav .sapdoc-tbtn{padding:6px 9px}
.sapdoc-pos{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);padding:0 6px;white-space:nowrap;min-width:42px;text-align:center}
.sapdoc{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.sapdoc-head{display:flex;justify-content:space-between;gap:20px;padding:18px 22px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--card),var(--card))}
.sapdoc-title{font-size:20px;font-weight:800;margin:0}
.sapdoc-no{color:var(--ink-soft);font-size:12.5px;margin-top:3px}
.statuschip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;background:var(--card)}
.statuschip .dot{width:8px;height:8px;border-radius:50%;background:var(--warn);display:inline-block}
.statuschip.s-done .dot{background:var(--pos)}
.statuschip.s-cancel .dot{background:var(--neg)}
.statuschip.s-draft .dot{background:var(--warn)}
.sapdoc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 26px;padding:18px 22px}
/* a read-only document's facts fill the width: as many across as 220px columns allow, so a wide screen is not three sparse columns with a gulf between each */
.sapdoc-grid.sapdoc-meta{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 26px;padding:14px 22px}
.sapdoc-grid .f label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:3px;font-weight:600}
.sapdoc-grid .f input,.sapdoc-grid .f select{width:100%;border:1px solid var(--line-strong);border-radius:8px;padding:7px 9px;font-size:14px;font-family:inherit}
.sapdoc-grid .f .ro{font-size:14px;padding:7px 0}
.cfl{display:flex;align-items:center;gap:6px;border:1px solid var(--line-strong);border-radius:8px;padding:0 8px;background:var(--card)}
.cfl select,.cfl input{border:0;outline:0;flex:1;font-size:14px;font-family:inherit;background:transparent;padding:7px 0}
.ga{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:4px;color:#e0962a;font-weight:800;font-size:13px;border:0;background:transparent;cursor:pointer;line-height:1}
.ga:hover{background:#fbf1de}
.sapdoc .tabs{display:flex;gap:2px;padding:0 22px;border-bottom:1px solid var(--line);background:var(--card);overflow-x:auto}
.sapdoc .tabs button{background:transparent;border:0;border-bottom:2px solid transparent;padding:12px 14px;font-size:13px;font-weight:600;color:var(--ink-soft);white-space:nowrap;cursor:pointer}
.sapdoc .tabs button.on{color:var(--blue);border-bottom-color:var(--blue)}
.sapdoc .tabpane{padding:16px 22px}
.linegrid{width:100%;border-collapse:collapse;font-size:13px}
.linegrid th{text-align:right;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:8px;border-bottom:1px solid var(--line)}
.linegrid th:nth-child(1),.linegrid th:nth-child(2){text-align:left}
.linegrid td{padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.linegrid td.r{text-align:right}
.linegrid input,.linegrid select{border:1px solid transparent;border-radius:6px;padding:6px;font-size:13px;font-family:inherit;width:100%;background:transparent}
.linegrid input:focus,.linegrid select:focus{border-color:var(--blue);background:var(--card);outline:0}
.linegrid input.num{text-align:right}
.linegrid td.ln-total{font-weight:600;white-space:nowrap}
.linegrid .ln-del{border:0;background:transparent;color:var(--neg);cursor:pointer;font-size:13px;width:auto}
.addrow-btn{margin-top:8px;background:var(--card);border:1px dashed var(--line-strong);border-radius:8px;padding:8px 12px;color:var(--blue);font-size:12.5px;cursor:pointer}
.sapdoc-foot{display:grid;grid-template-columns:1fr 320px;gap:24px;padding:18px 22px;border-top:1px solid var(--line);background:var(--sunk)}
.sapdoc-foot textarea{width:100%;min-height:84px;border:1px solid var(--line-strong);border-radius:8px;padding:10px;font-family:inherit;font-size:13px;margin-top:4px}
.totbox .row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13px}
.totbox .row input{width:120px;text-align:right;border:1px solid var(--line-strong);border-radius:6px;padding:4px 6px;font-family:inherit}
.totbox .row.grand{border-bottom:0;border-top:2px solid var(--ink);margin-top:4px;padding-top:10px;font-weight:800;font-size:16px}
.ro-grid{width:100%;border-collapse:collapse;font-size:13px}
/* Alignment follows the DATA, not the column position. This used to right-align everything
   except the first column, which stranded the SKU hard left and threw Item / Description to the
   far right of a wide column — the two things you read together, as far apart as the table could
   put them. Numeric cells already carry .r from the renderer, so they stay right; text now reads
   left, next to the code it belongs to. */
.ro-grid th{text-align:left;font-size:10.5px;text-transform:uppercase;color:var(--ink-soft);padding:8px;border-bottom:1px solid var(--line)}
.ro-grid td{padding:8px;border-bottom:1px solid var(--line);text-align:left}
.ro-grid th.r,.ro-grid td.r{text-align:right}
/* the code column only needs to be as wide as a code */
.ro-grid td:first-child,.ro-grid th:first-child{width:1%;white-space:nowrap;padding-right:18px}
@media(max-width:760px){.sapdoc-grid{grid-template-columns:1fr}.sapdoc-foot{grid-template-columns:1fr}}

/* granular access — Users & Access permission grid */
.acc-group{border:1px solid var(--line);border-radius:8px;margin-bottom:6px;overflow:hidden}
.acc-head{padding:8px 12px;font-weight:600;font-size:13px;background:var(--paper);display:flex;align-items:center;gap:8px}
.acc-body table.perm{width:100%;font-size:12.5px}
.acc-body table.perm th{font-weight:600;color:var(--ink-soft);padding:6px 4px;text-align:center}
.acc-body table.perm th:first-child{text-align:left}
.acc-body table.perm td{padding:5px 4px;border-top:1px solid var(--line)}

/* nav position: top menu mode (toggle) */
.nav-top.shell{display:flex;flex-direction:column;grid-template-columns:none}
/* transform:none is load-bearing below 1024. The drawer rule parks .side at translateX(-100%),
   and in top-menu mode the bar is the full width of the screen — so it was parked exactly one
   screen to the left, with no hamburger to bring it back (there is no drawer to open). On a
   tablet in top-menu mode the menu was gone for good. */
.nav-top .side{width:100%;height:auto;min-height:0;flex-direction:row;align-items:center;gap:6px;padding:6px 14px;position:sticky;top:0;z-index:60;overflow:visible;border-bottom:1px solid rgba(255,255,255,.07);transform:none}
.nav-top .side .brand{border-bottom:0}
.nav-top .side .brand{margin:0 14px 0 0;flex:0 0 auto;padding:0}
.nav-top .side-foot{display:none}
.nav-top .nav{display:flex;flex-direction:row;flex:1 1 auto;flex-wrap:wrap;gap:2px;overflow:visible;padding:0}
.nav-top .navgroup{position:relative;flex:0 0 auto}
.nav-top .grp{white-space:nowrap;margin:0;padding:9px 12px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;color:#eef3f9;font-size:12.5px;font-weight:600;letter-spacing:.02em}
.nav-top .grp:hover{background:rgba(255,255,255,.08)}
.nav-top .grp-caret{transform:rotate(90deg);transition:transform .15s;color:#8aa0b8}
.nav-top .grp.collapsed .grp-caret{transform:rotate(0deg)}
/* A GROUP WITH ONE ITEM HAS NO MENU, SO IT SHOWS NO MARKER. Procurement and MES are single-item
   groups and render as direct links; their caret is hidden rather than absent, because DOWN THE
   SIDEBAR that placeholder is what keeps every label starting at the same x. Across the top strip
   there is no column to line up with, so the placeholder is just 8px of caret and 6px of gap
   holding nothing — which is exactly why those two labels sat adrift from the rest with no dot in
   front of them. Removed here only; the sidebar keeps its column. */
.nav-top .grp-direct .grp-caret{display:none}
/* THE MENU IS CENTRED ON THE SCREEN, NOT ON WHAT IS LEFT OF IT. Centring the nav inside its flex
   slot centres it in the space BESIDE the logo, which leaves it pushed right by half the brand's
   width — close enough to look like a mistake rather than a choice. So the brand comes out of the
   flow and the nav spans the whole bar.

   ONLY WHERE THERE IS ROOM, and the arithmetic is why this threshold is not lower. The full menu
   measures about 1190px and the brand about 216px including its gutter. A screen-centred menu
   leaves (W − 1190) ÷ 2 on each side, which only clears the logo once W passes roughly 1620. Try
   it sooner — by reserving the brand's width as padding on both sides, which is what keeps the
   midpoints aligned — and the menu no longer fits on one line: at 1440 it wrapped ADMIN and
   COLLABORATE onto a second row, which is a worse bar than an off-centre one. Below this width it
   keeps today's behaviour and starts from the left. */
@media (min-width:1640px){
  .nav-top .side .brand{position:absolute;left:14px;top:50%;transform:translateY(-50%);margin:0}
  .nav-top .nav{justify-content:center}
}
.nav-top .grp-body{position:absolute;top:calc(100% + 4px);left:0;min-width:210px;background:var(--sidebar-bg);border:1px solid rgba(255,255,255,.1);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.45);padding:6px;z-index:70;max-height:0;overflow:hidden}
.nav-top .grp-body.open{max-height:72vh;overflow:auto}
.nav-top .nav a{border-radius:7px;color:#e7edf4}
.nav-top .nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-top .main{width:100%}

/* ---- column sorting: headers are clickable; the sorted column shows its direction ---- */
table.tbl thead th{cursor:pointer;user-select:none}
table.tbl thead th:hover{color:var(--ink)}
table.tbl thead th[data-sdir="asc"]::after{content:" ▲";font-size:8px;opacity:.85}
table.tbl thead th[data-sdir="desc"]::after{content:" ▼";font-size:8px;opacity:.85}
table.tbl[data-nosort] thead th{cursor:default}

/* Header font: Helvetica across the board (user call, 2026-08-30) */
h1, h2, h3, h4, .page-head h2, .sapdoc-title, .page-title {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ===== Org chart — the reporting line, drawn =====
   A CSS tree rather than a canvas: it is text, so it is searchable, selectable, printable and
   readable by a screen reader, and it survives a browser zoom that a drawn diagram does not.
   The connectors are borders on the list items, which is why the first and last child are
   trimmed — otherwise the line overshoots past the top and bottom node. */
.orgchart{overflow-x:auto;padding:6px 2px 14px}
.orgchart ul{position:relative;padding-top:18px;display:flex;justify-content:flex-start;gap:14px;margin:0;list-style:none}
.orgchart > ul{padding-top:0}
.orgchart li{position:relative;padding:18px 10px 0;list-style:none;text-align:center}
.orgchart li::before,.orgchart li::after{content:"";position:absolute;top:0;right:50%;
  border-top:1px solid var(--line-strong);width:50%;height:18px}
.orgchart li::after{right:auto;left:50%;border-left:1px solid var(--line-strong)}
.orgchart li:only-child::before,.orgchart li:only-child::after{display:none}
.orgchart li:only-child{padding-top:18px}
.orgchart li:first-child::before,.orgchart li:last-child::after{border:0}
.orgchart li:last-child::before{border-right:1px solid var(--line-strong);border-radius:0 5px 0 0}
.orgchart li:first-child::after{border-radius:5px 0 0 0}
.orgchart ul ul::before{content:"";position:absolute;top:0;left:50%;
  border-left:1px solid var(--line-strong);width:0;height:18px}
.org-node{display:inline-block;min-width:158px;max-width:210px;text-align:left;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 10px;
  box-shadow:0 1px 2px rgba(16,24,43,.04)}
.org-node:hover{border-color:var(--blue);box-shadow:0 2px 10px rgba(0,124,196,.12)}
.org-name{font-weight:600;font-size:13px;line-height:1.25}
.org-sub{font-size:11px;color:var(--ink-soft);margin-top:2px}
.org-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}

/* ===== The chart of POSTS — drawn downward, not across =====
   The person chart above this one grows sideways, which is correct for three levels and
   unreadable the moment a supervisor has eleven people under him: the page scrolls horizontally
   and the boxes shrink until the names are initials. A chart of posts is longer than it is wide
   by nature — every bench, every office, every vacancy — so it is drawn as an indented list with
   a rail per level. It scrolls the way a page scrolls, prints down a sheet of A4 in the order it
   is read, and a branch can be folded away when somebody is looking at a different department.

   The rail is one border on the container and one stub per child, rather than the ::before/::after
   arithmetic the sideways chart needs — at this depth that arithmetic is where the alignment bugs
   live. */
.postchart{padding:4px 2px 10px}
.pc-node{position:relative}
.pc-kids{margin-left:19px;padding-left:20px;border-left:1px solid var(--line-strong)}
.pc-kids > .pc-node::before{content:"";position:absolute;left:-20px;top:22px;width:15px;
  border-top:1px solid var(--line-strong)}
/* Capped, not full-bleed. A box stretched across a 1400px screen puts its title at one end and
   its buttons at the other with two feet of nothing between them, and the rail that says who
   answers to whom is lost off at the left edge. */
.pc-box{display:flex;align-items:flex-start;gap:10px;margin:6px 0;padding:8px 10px;max-width:660px;
  background:var(--card);border:1px solid var(--line);border-radius:9px;
  box-shadow:0 1px 2px rgba(16,24,43,.04)}
.pc-box:hover{border-color:var(--blue);box-shadow:0 2px 10px rgba(0,124,196,.12)}
/* A VACANCY IS NOT AN ERROR, so it is not red — it is the ordinary state of a post nobody has
   been hired into yet, and it gets a dashed edge rather than a warning colour.
   NOT `.empty`: that class is the app's own empty-state block and centres its text, so every
   vacant box in the chart came out centred while the filled ones beside it read left. */
.pc-box.vacant{border-style:dashed;background:transparent}
.pc-box.off{opacity:.55}
.pc-head{display:flex;align-items:flex-start;gap:8px;flex:1;min-width:0}
.pc-fold{background:none;border:0;cursor:pointer;color:var(--ink-soft);font-size:13px;
  line-height:1;padding:3px 2px 0;width:16px;text-align:center}
.pc-fold.ghost{cursor:default;visibility:hidden}
.pc-title{font-weight:600;font-size:13.5px;line-height:1.25}
.pc-sub{font-size:11px;color:var(--ink-soft);margin-top:2px}
.pc-people{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.pc-who{font-size:11px;padding:1px 7px;border-radius:10px;background:var(--paper);
  border:1px solid var(--line);white-space:nowrap}
/* Somebody with no login cannot be sent an approval, so the chart says so where the name is
   rather than leaving it to be discovered when a queue sticks. */
.pc-who.nologin{border-style:dashed;color:var(--ink-soft)}
.pc-vacant{font-size:11px;color:var(--ink-soft);font-style:italic}
.pc-acts{display:flex;gap:10px;align-items:center;white-space:nowrap;opacity:0;transition:opacity .12s}
.pc-box:hover .pc-acts,.pc-box:focus-within .pc-acts{opacity:1}
.pc-acts .lnk{font-size:11.5px}
@media (max-width:820px){
  /* On a tablet the actions cannot hide behind a hover that does not exist. */
  .pc-acts{opacity:1;flex-wrap:wrap;white-space:normal}
  .pc-box{flex-wrap:wrap}
}
@media print{ .pc-acts,.pc-fold{display:none} .pc-box{break-inside:avoid} }

/* ===== The chart of posts, running LEFT TO RIGHT =====
   Drawn top-down first, because that is the shape everybody pictures, and it was the wrong shape
   for this company. A top-down chart's width is its widest LEVEL: forty-six posts made thirteen
   columns side by side, eleven feet of paper, and a scrollbar. Stacking the posts that manage
   nothing helped and did not solve it, because no arrangement of thirteen columns fits a page.

   Turned on its side, the width is its DEPTH instead — chief executive, director, manager,
   supervisor, operator. Five levels. Six hundred pixels wider than a single card, whatever the
   company grows to sideways, because hiring four more benches makes this chart TALLER and a page
   has as much height as you give it. It scrolls and prints the way every other list in the system
   does, which is downward.

   The connectors are simpler for it too. A rail runs down the left of each group of children with
   a stub into each card, and a stub from the parent's card into the rail — no elbow arithmetic,
   no dependence on sibling cards being the same height, which they are not: a post with four
   people in it is four times the height of the one under it. */
.occ{overflow-x:hidden;padding:10px 4px 18px}
/* The element the fit-to-width zoom is applied to. It must be the thing that CONTAINS the tree
   and not the scroll box, or scaling it changes what it is being measured against. */
.occ-fit{display:inline-block;min-width:100%;transform-origin:top left}
/* EVERY SELECTOR HERE NAMES THE ELEMENT, NOT AN ANCESTOR. These were `.occ ul` and `.occ li`, and
   anything that put the markup somewhere without its `.occ` wrapper — a stylesheet half-applied,
   the copy lifted out for printing — lost the layout and the list-style in one go and left a
   column of cards with bullet points beside them. A chart must not be one missing div away from
   that. */
.occ-row{list-style:none;margin:0;padding:0}
/* card on the left, everything that reports to it on the right */
.occ-node{position:relative;list-style:none;display:flex;align-items:center;gap:0}
.occ-node > .occ-card{flex:0 0 auto}
.occ-node > .occ-row{position:relative;margin-left:24px}

/* THE RAIL, BUILT OUT OF THE CHILDREN THEMSELVES. Each child owns the piece of vertical line
   beside it, so the rail cannot come adrift from a card that grew taller — the first child's
   piece starts at its own middle and the last child's ends at its own middle, which is exactly
   where the line should stop. */
.occ-row > .occ-node{padding-left:24px}
.occ-row > .occ-node::before{content:"";position:absolute;left:12px;top:0;bottom:0;
  border-left:1px solid var(--line-strong)}
.occ-row > .occ-node:first-child::before{top:50%}
.occ-row > .occ-node:last-child::before{bottom:50%}
.occ-row > .occ-node:only-child::before{display:none}
.occ-row > .occ-node::after{content:"";position:absolute;left:12px;top:50%;width:12px;
  border-top:1px solid var(--line-strong)}
/* and the stub out of the parent's card into that rail: from the card's right edge, across the
   gap, to where the rail stands */
.occ-node > .occ-row::before{content:"";position:absolute;left:-24px;top:50%;width:36px;
  border-top:1px solid var(--line-strong)}
/* The top of the chart hangs from nothing. */
.occ-fit > .occ-row > .occ-node,.occ > .occ-row > .occ-node{padding-left:0}
.occ-fit > .occ-row > .occ-node::before,.occ > .occ-row > .occ-node::before,
.occ-fit > .occ-row > .occ-node::after,.occ > .occ-row > .occ-node::after{display:none}
/* A folded branch draws no rail — there is nothing beside it to join to. */
.occ-node.folded > .occ-row{display:none}

.occ-card{position:relative;width:170px;background:var(--card);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(16,24,43,.07);text-align:left}
.occ-card:hover{border-color:var(--blue);box-shadow:0 3px 14px rgba(0,124,196,.16)}
.occ-card.off{opacity:.55}
.occ-hd{background:#4a5462;color:#fff;padding:7px 10px;font-weight:600;font-size:12.5px;line-height:1.3}
.occ-dept{display:block;font-weight:400;font-size:10.5px;opacity:.8;margin-top:1px}
.occ-bd{padding:8px 10px}
.occ-card.haskids{padding-right:14px}
/* The title bar is the way into a branch, so it has to look like it. */
.occ-hd[data-occfocus]:hover{background:#3a4350}
.occ-p{display:flex;gap:9px;align-items:flex-start}
.occ-p + .occ-p{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.occ-face{width:42px;height:42px;border-radius:5px;object-fit:cover;flex:0 0 42px;background:var(--paper)}
.occ-face.none{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px;
  color:var(--ink-soft);border:1px solid var(--line)}
.occ-pd{min-width:0;flex:1}
.occ-pn{font-weight:600;font-size:12px;line-height:1.3}
.occ-pl{font-size:10.5px;color:var(--ink-soft);line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.occ-nl{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--warn);font-weight:700}
/* OPEN is a thing to act on, so it is stated rather than implied by an absence. */
.occ-card.open .occ-hd{background:#8a94a3}
.occ-open{text-align:center;padding:1px 0;font-weight:700;font-size:11.5px;letter-spacing:.08em;color:var(--ink-soft)}
.occ-acts{position:absolute;top:5px;right:6px;display:flex;gap:5px;opacity:0;transition:opacity .12s}
.occ-card:hover .occ-acts,.occ-card:focus-within .occ-acts{opacity:1}
.occ-acts .lnk{color:#fff;font-size:12px;line-height:1}
.occ-acts .lnk.del{color:#ffc9c4}
/* The fold sits where the branch LEAVES the card, which since the chart turned sideways is the
   right-hand edge, not the bottom. On the bottom it landed on the card's last line. */
.occ-fold{position:absolute;top:50%;right:-1px;transform:translateY(-50%);
  background:var(--card);border:1px solid var(--line-strong);border-right:0;
  border-radius:6px 0 0 6px;cursor:pointer;font-size:10px;line-height:1;padding:3px 4px;
  color:var(--ink-soft)}
.occ-fold:hover{color:var(--blue);border-color:var(--blue)}
@media (max-width:820px){ .occ-acts{opacity:1} }
/* On paper the chart is a single picture: it must not be broken across two sheets, and the sheet
   it goes on is turned sideways because the shape is wider than it is tall. The report shell's own
   @page rule sets the orientation (opts.landscape); this only keeps the drawing whole. */
@media print{
  .occ-acts,.occ-fold{display:none}
  .occ{overflow:visible}
  .occ-fit{zoom:1 !important;display:block}
  .occ-card{break-inside:avoid;box-shadow:none}
  .occ-card{break-inside:avoid}
}

/* ===== Time register — a month of days across the page =====
   Thirty-one narrow columns and two wide ones. The day cells are square and centred so a column
   of them reads down as fast as across, and the status is carried by a tint as well as a letter:
   a register is scanned for the exceptions, and A and P are one glyph apart. */
.treg th,.treg td{padding:4px 5px;font-size:11px}
.treg .trc{width:26px;min-width:26px;text-align:center;font-family:'JetBrains Mono',monospace}
.treg th.trc{font-size:10px;line-height:1.1;color:var(--ink-soft)}
.treg .trwd{font-size:8.5px;letter-spacing:.02em;opacity:.7}
.treg .trsum{width:34px;min-width:34px;text-align:center;background:var(--paper);font-size:10.5px}
.treg th.trsum{font-weight:700;color:var(--ink-soft)}
.treg td.trs-a{background:#fdeaea;color:#b02a20;font-weight:700}
.treg td.trs-i{background:#fdf1dc;color:#9a6212;font-weight:700}
.treg td.trs-p{color:var(--ink-soft)}
.treg td.trs-al,.treg td.trs-sl,.treg td.trs-cl{background:var(--blue-050);color:var(--blue);font-weight:700}
.treg td.trs-o,.treg td.trs-h,.treg td.trs-x{color:var(--ink-faint,#98a1ad);background:var(--paper)}
[data-theme="dark"] .treg td.trs-a{background:#3a1d1b;color:#f0938a}
[data-theme="dark"] .treg td.trs-i{background:#3a2b12;color:#e8b563}

/* ===== Chart of Accounts, and its ledger beside it =====
   The tree took the whole width — far more than a list of codes and names needs — and the ledger
   arrived as a modal on top of it. Reading three accounts meant three opens and three closes,
   each one covering the very list being worked down. Half the width each: pick on the left, read
   on the right, and the row stays marked so the eye can go back to where it was.
   Below 1100px there is no second half to give, so the pane falls under the tree. */
.coa-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.coa-split > div{min-width:0}
/* The pane scrolls WITH THE PAGE. It was sticky, with a height cap and a scrollbar of its own,
   which put two scrollbars on one screen and made a long ledger a small window onto itself —
   the wheel moved whichever one the pointer happened to be over. One page, one scroll. */
.coa-pane{overflow:visible}
#acctOut tr[data-acct].sel > td{background:var(--blue-050)}
#acctOut tr[data-acct].sel > td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
@media (max-width:1100px){ .coa-split{grid-template-columns:1fr} }

/* ===== Material issue slip — one line per row, read left to right =====
   Six table columns inside a modal turned every item name into a three-line stack and
   every status badge into confetti. A grid keeps the item and its SKU together where
   the eye starts, lines the numbers up on the right, and gives the verdict one pill.

   NO HORIZONTAL RULES. A rule under every line put twenty hairlines across a slip of
   twenty components and the storeman lost his place between them. Alternating tint
   separates the rows just as well and draws nothing: the columns still line up, so the
   quantities read down the page as one column of figures. The LOT column appears only
   when something on the shelf is actually batch- or serial-tracked — an empty box on
   every line was most of the clutter. */
.miv-head,.miv-row{display:grid;grid-template-columns:minmax(260px,1fr) 104px 92px 128px 26px;gap:12px;align-items:center}
/* QTY, UNIT AND LOT BELONG BESIDE THE NAME, NOT BESIDE THE MIDDLE OF THE CELL.
   The item cell is two rows deep — the picker with its thumbnail, and the SKU and on-hand under
   it — so centring the whole row dropped the three boxes to the gap between those two lines, and
   the person keying a slip read across from a name to a figure that was not level with it. They
   align to the TOP of the row and match the picker's own height, which is the line they are
   answering. */
.miv-row{align-items:start}
.miv-row .miv-cell{display:flex;align-items:center;min-height:36px}
.miv-row .miv-del{align-self:start;height:36px}
.miv-head.nolot,.miv-row.nolot{grid-template-columns:minmax(260px,1fr) 104px 92px 26px}
.miv-head{padding:14px 8px 8px;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
/* Qty is a figure and reads right; Unit and Lot are words and read left. The header follows the
   cell under it — a right-aligned "UNIT" sitting over a left-aligned "PCS" is the column looking
   like it belongs to the wrong data. */
.miv-head span:nth-child(2){text-align:right}
.miv-row .miv-uom.flat{padding-left:2px}
.miv-row{padding:9px 8px;border-radius:8px}
.miv-row:nth-of-type(odd){background:var(--paper)}
.miv-cell-item{min-width:0}
.miv-pick{width:100%;text-align:left;background:var(--card);border:1px solid var(--line-strong);border-radius:7px;
  padding:7px 10px;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.miv-pick:hover{border-color:var(--blue);color:var(--blue)}
.miv-sub{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap}
.miv-sub .miv-sku{width:104px;padding:3px 7px;font-family:'JetBrains Mono',monospace;font-size:11.5px;
  border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--ink)}
.miv-sub .miv-onhand{font-size:11.5px;color:var(--ink-soft);white-space:nowrap}
.miv-row .miv-qty{width:100%;text-align:right}
.miv-row .miv-uom,.miv-row .miv-lot{width:100%}
/* An item with ONE unit gets no dropdown. A select offering a single choice is furniture:
   it reads as a decision the storeman has to make and there is nothing to decide. */
.miv-row .miv-uom.flat{border-color:transparent;background:transparent;padding-left:2px;
  -webkit-appearance:none;appearance:none;pointer-events:none;
  font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink-soft)}
.miv-row .miv-lot:disabled{border-color:transparent;background:transparent;cursor:default}
.miv-chip{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap}
.miv-chip.ok{background:var(--pos-050,#e8f6ee);color:var(--pos,#1b7a44)}
.miv-chip.warn{background:#fdf1dc;color:#9a6212}
.miv-chip.bad{background:#fdeaea;color:#b02a20}
.miv-del{background:none;border:0;color:var(--ink-soft);font-size:15px;cursor:pointer;padding:2px 4px;line-height:1}
.miv-del:hover{color:var(--neg)}
[data-theme="dark"] .miv-chip.warn{background:#3a2b12;color:#e8b563}
[data-theme="dark"] .miv-chip.bad{background:#3a1d1b;color:#f0938a}
.miv-plan{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:12px 0 2px;padding:9px 12px;border-radius:8px;background:var(--blue-050);border-left:3px solid var(--blue);font-size:13px}
.miv-plan.short{background:#fdf1dc;border-left-color:#c8880f}
.miv-plan-sub{color:var(--ink-soft);font-size:12px}
[data-theme="dark"] .miv-plan.short{background:#3a2b12}
.miv-plan-lbl{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin-right:6px}
.miv-plan select{max-width:340px}
.miv-idrow{display:flex;align-items:center;gap:8px;min-width:0}
.miv-idrow .miv-pick{flex:1;min-width:0}
.miv-thumb{width:34px;height:34px;flex:0 0 34px;border-radius:6px;border:1px solid var(--line);
  object-fit:cover;background:var(--bg-soft,#f2f4f7);cursor:pointer}
.miv-thumb.ph{display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;
  color:var(--ink-soft);cursor:default;letter-spacing:.02em}

/* ===== Project requirement cards =====
   A donut spent a third of each card saying one number and squeezed the words into a
   column beside it, so names truncated and every verdict wrapped. Coverage reads along a
   line instead: name and percentage on one row, a stacked bar under it, the two figures
   that matter side by side, and the verdict on its own line where it fits. */
.req-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px}
.req-card{border:1px solid var(--line);border-left:4px solid var(--line-strong);border-radius:10px;
  padding:12px 14px;cursor:pointer;background:var(--card);transition:box-shadow .12s,transform .12s}
.req-card:hover{box-shadow:0 6px 18px rgba(14,22,38,.10);transform:translateY(-1px)}
.req-card.sev-ok{border-left-color:var(--pos,#1b7a44)}
.req-card.sev-warn{border-left-color:#c8880f}
.req-card.sev-bad{border-left-color:var(--neg,#c0271f)}
.req-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.req-name{font-weight:700;font-size:13px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.req-pct{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:800;
  font-variant-numeric:tabular-nums;flex:none;letter-spacing:-.02em}
.sev-ok .req-pct{color:var(--pos,#1b7a44)}
.sev-warn .req-pct{color:#c8880f}
.sev-bad .req-pct{color:var(--neg,#c0271f)}
.req-sku{font-size:11px;color:var(--ink-soft);margin-top:1px}
.req-bar{display:flex;height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin:9px 0 8px}
.req-bar .s{background:var(--blue,#2563eb)}
.req-bar .o{background:#9db8f0}
.req-figs{display:flex;gap:16px}
.req-figs > div{display:flex;flex-direction:column;gap:1px;min-width:0}
.req-figs span{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
.req-figs b{font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.req-verdict{margin-top:9px;padding-top:8px;border-top:1px solid var(--line);
  font-size:11.5px;font-weight:600;line-height:1.35}
.sev-ok .req-verdict{color:var(--ink-soft)}
.sev-warn .req-verdict{color:#9a6212}
.sev-bad .req-verdict{color:var(--neg,#b02a20)}
.req-key{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:2px}
.req-key.s{background:var(--blue,#2563eb)}
.req-key.o{background:#9db8f0}
.req-key.n{background:var(--line)}
.req-alt{font-size:10.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.req-figs b{white-space:normal}

/* Three feeds side by side: what came in, what went out, what is running out. */
/* Stretched, not top-aligned: three tiles of three different heights read as three things that
   happen to be near each other, and these three are one answer — what came in, what went out,
   what is running short. One straight line along the bottom is what makes them a board. */
.mv3{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:12px}
.mv3 .tbl td,.mv3 .tbl th{padding:5px 8px;font-size:12px}
.lamp-open{cursor:pointer;transition:background .12s}
.lamp-open:hover{background:var(--blue-050)!important}
.lamp-open::after{content:"?";position:absolute;bottom:8px;right:10px;font-size:10px;font-weight:800;
  color:var(--ink-soft);opacity:.45}
.lamp-open:hover::after{opacity:1;color:var(--blue)}
.mv3 tr.rowlink{cursor:pointer}
.mv3 tr.rowlink:hover{background:var(--blue-050)}

/* A SKU beside an item name is a different KIND of thing from the name — a reference to a
   record, not prose — and on a three-line order cell the two ran together as one grey string.
   The tint says "code" at a glance without competing with the name for weight. Blue-050 is a
   theme token, so the chip follows the page into dark rather than staying a pale wash on it. */
.sku-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;
  color:var(--blue);background:var(--blue-050);border:1px solid var(--blue-050);
  border-radius:5px;padding:0 4px;white-space:nowrap;vertical-align:1px}
/* #007CC4 on the dark chip is too close to its own ground to read; lift the ink, not the fill. */
[data-theme="dark"] .sku-tag{color:#5cb4e8;border-color:#1d3242}

/* An order with no customer PO reference used to render an empty space, which reads as a tidy
   row rather than as a gap.

   TWO STATES, TWO COLOURS, because they are two different jobs. MISSING is red: nobody has
   asked for anything in writing, there is no number to chase and nothing for the customer's
   accounts department to match an invoice against. PENDING is amber: a requisition exists, the
   purchase order has not been issued, and the job is to ring their purchasing department — the
   order is further along than nothing at all, and colouring both the same made the whole column
   read as one alarm.

   Its own line, width to fit: inline-block ran it straight onto the end of the customer's name,
   so "LOCKER CO" and its missing PO read as one word. */
.po-flag{font-size:10.5px;overflow-wrap:anywhere;font-weight:600;
  display:block;width:fit-content;max-width:100%;margin-top:3px;padding:0 5px;border-radius:5px}
.po-flag.missing{color:var(--neg);
  background:rgba(209,72,58,.10);border:1px solid rgba(209,72,58,.28)}
[data-theme="dark"] .po-flag.missing{background:rgba(240,104,90,.14);border-color:rgba(240,104,90,.34)}
.po-flag.pending{color:#8a6d00;
  background:rgba(224,139,24,.12);border:1px solid rgba(224,139,24,.34)}
/* --warn is already lifted for the dark page; the fill follows it rather than staying a wash. */
[data-theme="dark"] .po-flag.pending{color:var(--warn);
  background:rgba(234,165,58,.15);border-color:rgba(234,165,58,.36)}

/* The statement's memo column now carries what was sold beneath what was typed. Smaller and
   softer than the memo so the narration still reads first, and the rate in mono so a column
   of them lines up down the page. */
.memo-item{font-size:11px;color:var(--ink-soft);margin-top:2px;line-height:1.45}
.memo-item .mono{white-space:nowrap}

/* A ROW UNDER THE POINTER, ALL THE WAY ACROSS.
   A statement is eight columns wide and the eye has to carry a date on the left to a balance on
   the right; on a screen of forty rows it lands a line out, and a figure read off the wrong row
   is the kind of mistake nobody catches because the number was real.

   Painted as a background IMAGE rather than a colour so it layers over whatever the row already
   wears — a draft's tint, a negative figure's wash, the blue of a clickable row — instead of
   replacing it. Neutral, not blue: blue on this table means "this row opens something", and a
   hint that appears under every pointer must not claim that. Rows that DO open something keep
   the stronger blue below. */
table.tbl tbody tr:hover > td,
table.line-tbl tbody tr:hover > td,
table.linegrid tbody tr:hover > td,
table.ro-grid tbody tr:hover > td{background-image:linear-gradient(rgba(14,22,38,.045),rgba(14,22,38,.045))}
[data-theme="dark"] table.tbl tbody tr:hover > td,
[data-theme="dark"] table.line-tbl tbody tr:hover > td,
[data-theme="dark"] table.linegrid tbody tr:hover > td,
[data-theme="dark"] table.ro-grid tbody tr:hover > td{background-image:linear-gradient(rgba(255,255,255,.055),rgba(255,255,255,.055))}
/* A DOCUMENT OF SEVERAL LINES IS ONE THING UNDER THE POINTER. Where a register draws each entry as
   its own row group (the journal voucher register: reference, date and memo span every line), the
   whole group lights together — the per-row tint above would light the spanning cells with the
   first line only. Same specificity, so the later group rule wins over the row rule. */
table.tbl tbody.jvgrp tr:hover > td{background-image:none}
table.tbl tbody.jvgrp:hover > tr > td{background-image:linear-gradient(rgba(14,22,38,.045),rgba(14,22,38,.045))}
[data-theme="dark"] table.tbl tbody.jvgrp tr:hover > td{background-image:none}
[data-theme="dark"] table.tbl tbody.jvgrp:hover > tr > td{background-image:linear-gradient(rgba(255,255,255,.055),rgba(255,255,255,.055))}
/* The pointer is a blunt instrument on a touch screen and the tint follows it around; somebody
   who has asked for less motion gets the table they had. */
@media (hover:none){table tbody tr:hover > td{background-image:none}
  table.tbl tbody.jvgrp:hover > tr > td, [data-theme="dark"] table.tbl tbody.jvgrp:hover > tr > td{background-image:none}}

/* What a line was TYPED as, where that differs from the item's name in the catalogue. Quiet,
   because the catalogue name is the identity and this is the note beside it — but present,
   because a line typed as a different product is either the customer's own wording or the
   wrong item picked, and dropping it silently is how the row and its own lines came to name
   two different products one click apart. */
.line-alias{font-size:10px;color:var(--ink-soft);font-style:italic;margin-top:1px}

/* ===== The delivery note's line table =====
   It had grown a set of inline styles that matched nothing else on the system: a red "required"
   word stacked above one input, which made that cell taller than its neighbours and threw the
   whole row out of line; a hand-drawn bordered box with its own scrollbar around the serial
   picker; and a 130px input that showed a truncated serial when it held two, so the screen
   contradicted what had just been ticked into it. */
table.line-tbl td{vertical-align:middle}
.req{color:var(--neg);font-weight:700}
/* Wide enough for two serials, and it grows rather than hiding what it holds. */
input.dn-lot{width:100%;min-width:190px}
td.sercell{width:280px}
/* NOT FLEX. A serial is a fixed-length code that must never break, and a flex child with
   `overflow-wrap:anywhere` in a table cell shrinks to its MIN-content — which for an unbreakable
   string is one character. The box rendered as a column of single letters with two scrollbars.
   Ordinary inline layout and an explicit width cannot do that. */
.serpick{width:264px;max-height:196px;resize:vertical;overflow-y:auto;overflow-x:hidden;
  border:1px solid var(--line);border-radius:var(--r);background:var(--sunk);padding:3px}
.serpick label{display:block;font-size:12px;line-height:1.7;padding:2px 5px;border-radius:5px;
  white-space:nowrap;cursor:pointer}
.serpick label:hover{background:var(--card)}
.serpick label.off{cursor:default;opacity:.7}
.serpick input{margin:0 6px 0 0;vertical-align:middle}
.serpick .mono{vertical-align:middle}
/* The reason a unit cannot be picked, beside it rather than off the right-hand edge. */
.serpick .why{margin-left:6px;font-size:10.5px;color:var(--warn)}
.serpick-foot{font-size:11px;margin-top:3px}

/* WHAT MATCHED, MARKED WHERE IT MATCHED. A filter that narrows eight rows to three has said
   "somewhere in here" and left the eye to do the work the search was for. A wash rather than a
   block of colour: the mark sits inside item names and references that are already carrying
   their own weight, and it has to be findable without shouting over them. */
mark{background:rgba(224,139,24,.30);color:inherit;border-radius:3px;padding:0 1px}
[data-theme="dark"] mark{background:rgba(234,165,58,.32);color:inherit}


/* A LEADER LINE: name, dots, quantity, the way a bill of quantities sets it.
   The dots are the BOTTOM BORDER of a box that takes up whatever space is left, so they run
   exactly as far as the gap does and nothing has to be told how wide the column is. Aligned on
   the baseline rather than centred, or the dots float at the middle of a two-line name.
   tabular-nums so 9 and 32 line up under each other — the whole point of moving them here. */
.leaders { display: flex; flex-direction: column; gap: 2px; }
.leader { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.leader-name { min-width: 0; }
.leader-dots {
  flex: 1 1 auto; min-width: 10px; align-self: baseline;
  border-bottom: 1px dotted var(--line, #d6dae0);
  position: relative; top: -3px;
}
/* Both trailing cells are FIXED, which is what makes them columns rather than two things that
   happen to be near the right-hand edge. A SKU is five digits here and the width is set from
   that with room to spare; a longer one widens its own cell and the dots give up the space,
   so the column still lines up with itself. */
.leader-sku { flex: none; min-width: 52px; }
.leader-sku:empty { min-width: 0; }
.leader-qty { flex: none; min-width: 34px; text-align: right;
              white-space: nowrap; font-variant-numeric: tabular-nums; }
/* ON A PHONE THE COLUMNS STAY COLUMNS. Only the dots give ground — down to a token 6px, enough
   to still read as a leader — while the SKU and the quantity keep their widths, because a column
   that survives only on a wide screen is not a column, it is a coincidence of the desktop.
   The NAME is what yields: it has min-width:0 and wraps, which is the right thing to lose on a
   narrow screen since it is the part a reader can finish from context. */
@media (max-width: 560px) { .leader-dots { min-width: 6px; } }


/* THE MARK: the item lines bracketed, and one arrow from the bracket to the total they make.
   Dotted like the leader it continues, and a shade lighter, because it is a pointer between two
   things already on the page and must never compete with either of them for attention.
   Absolutely placed and pointer-events:none so it cannot take a click meant for the number. */
td.qtycell { position: relative; }
svg.qty-fan { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
svg.qty-fan .dot {
  fill: none; stroke: var(--line, #d6dae0); stroke-width: 1;
  stroke-dasharray: 1.5 2.5; stroke-linecap: round;
}
/* The head is solid, and is the only solid thing in the mark. A dotted arrowhead at this size is
   three dashes in a triangle, which does not read as an arrow at all. */
svg.qty-fan .head { fill: var(--line, #d6dae0); stroke: none; }
/* A printed sheet is read without the screen's cues and at a size where hairlines silt up, and
   the column totals are already set out on the paper. */
@media print { svg.qty-fan { display: none; } }

/* ===== the unfolded document: one screen, divided (see unfoldTabs in 00-shell.js) ===== */
.docsec-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start;padding:10px 22px}
.docsec{border:1px solid var(--line);border-radius:10px;background:var(--card,#fff);min-width:0}
.docsec-h{margin:0;padding:6px 12px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);border-bottom:1px solid var(--line);background:var(--paper,#f7f8fa);border-radius:10px 10px 0 0}
.docsec .tabpane,.sapdoc .docsec .tabpane{padding:8px 12px}
.docsec .empty{padding:14px 12px;text-align:left}
/* a hoisted Attachments field already has its label; the uploader's own divider would say it twice */
.docsec-head > .f > div > .sub-divider:first-child,.docsec-head > .field > div > .sub-divider:first-child{display:none}
/* the header grid, with the hoisted fields in it: four across on a desktop */
.sapdoc .sapdoc-grid.docsec-head{grid-template-columns:repeat(4,minmax(0,1fr))}
.form-grid.docsec-head{grid-template-columns:repeat(4,minmax(0,1fr))}
.docsec-toggles{grid-column:1/-1;display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;margin-top:2px}
.docsec-toggles .toggle{flex:1 1 380px;display:block;font-size:12px;line-height:1.4;margin:0}
.docsec-toggles .toggle input{width:auto;margin:0 6px 0 0;vertical-align:middle}
.docsec-postlabel{color:var(--ink-soft)}
.docsec-postdate{width:150px;padding:3px 6px;font-size:12px;margin-left:6px;vertical-align:middle}
/* a master: one grid down the page, a caption per old tab */
.docsec-master{padding:0}
.docsec-cap{margin:14px 0 6px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:4px}
.docsec-master > .docsec-cap:first-child{margin-top:0}
.docsec-master .tabpane{padding:0}
.docsec-master .form-grid,.docsec-master .fgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.docsec-master .form-grid .field.full,.docsec-master .fgrid .f.full{grid-column:1/-1}
/* the form's own foot (remarks, totals) follows without a gulf */
.sapdoc .docsec-grid + .sapdoc-foot{margin-top:0}
.sapdoc .sapdoc-foot textarea{min-height:56px}
@media (max-width:1100px){.sapdoc .sapdoc-grid.docsec-head,.form-grid.docsec-head,.docsec-master .form-grid,.docsec-master .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.docsec-grid{padding:10px 14px}}
@media (max-width:640px){.sapdoc .sapdoc-grid.docsec-head,.form-grid.docsec-head,.docsec-master .form-grid,.docsec-master .fgrid{grid-template-columns:1fr}}
.serpick-head{width:264px;display:flex;align-items:center;gap:10px;font-size:11px;margin-bottom:3px}
.serpick-head .serpick-count{font-weight:700}
.serpick-head .lnk{font-size:11px;padding:0}
/* delivery notes: the items on the row, and the tiles that narrow the list */
.dc-item{font-size:12.5px;line-height:1.5;white-space:nowrap}
.dc-item .mono{color:var(--ink-soft)}
.kpi.dc-tile.on{outline:2px solid var(--blue);outline-offset:-2px}
.kpi.so-tile.on{outline:2px solid var(--blue);outline-offset:-2px}
.kpi.inv-tile.on,.kpi.q-tile.on,.kpi.sc-tile.on,.kpi.rb-tile.on,.kpi.mr-tile.on,.kpi.dash-tile.on{outline:2px solid var(--blue);outline-offset:-2px}
.kpi.rcv-tile.on,.kpi.pr-tile.on{outline:2px solid var(--blue);outline-offset:-2px}
.kpi.dso-tile.on{outline:2px solid var(--blue);outline-offset:-2px}
td.dso-ready{white-space:nowrap}

/* Ready to Bill: the customer header row, a ticked note, and the invoice bar under the list */
tr.rb-cust td{background:var(--paper);border-top:2px solid var(--line-strong)}
tr.rb-on td{background:var(--blue-050)}
.rb-bar{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:10px 12px;margin-top:8px;box-shadow:0 -4px 12px rgba(16,24,43,.06);z-index:2}

/* Receipts / Payments dashboard */
.mr-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
@media (max-width:980px){.mr-grid{grid-template-columns:minmax(0,1fr)}}
.mr-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow)}
.mr-card-h{font-weight:700;font-size:13px;margin-bottom:8px}
.mr-owe td{padding:7px 6px}
.mr-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.mr-filters .search{flex:1;min-width:220px}
tr.mr-month td{background:var(--paper);border-top:2px solid var(--line-strong)}
.mr-alloc{line-height:1.9}
.mr-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);border-radius:999px;padding:1px 9px;font-size:11.5px;background:var(--card);white-space:nowrap}
.mr-chip.adv{border-color:#d9b25b;background:#fdf6e6;color:#7a5410}
.mr-chip.warn{border-color:var(--warn);color:var(--warn);background:#fff7ec}
.mr-chip.muted{color:var(--ink-soft);background:var(--paper)}
[data-theme="dark"] .mr-chip.adv{background:#3a2d12;color:#f0c674;border-color:#7a5a1e}
[data-theme="dark"] .mr-chip.warn{background:#3a2a10}
.mr-reg td.mono,.mr-reg td.r.mono,.mr-reg td:first-child,.mr-reg td:nth-child(2){white-space:nowrap}
.mr-reg td.pty .lnk,.mr-owe td.pty .lnk{font-family:inherit;font-weight:600;text-align:left}
.mr-owe .btn-ghost{white-space:nowrap}

/* Dashboards are a right of their own (<screen>.dashboard). Without it the body carries no-dash and
   the summary rows go; the register, its filters and anything inside a document stay. */
body.no-dash #content .kpis:not(.dash-keep):not(.docpage-edit .kpis):not(.docpage .kpis),
body.no-dash #content .mr-grid:not(.docpage-edit .mr-grid),
body.no-dash #content .dash-only{display:none!important}

/* Fiscal-year month chart (dashMonthBars) */
.mr-card-h{display:flex;align-items:baseline;gap:8px}
.mr-card-r{margin-left:auto;font-weight:600;font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.dmb{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;height:132px;padding-top:4px}
.dmb-col{display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}
.dmb-bar-wrap{flex:1;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-height:0}
.dmb-val{font-size:10.5px;line-height:14px;height:14px;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.dmb-bar{width:100%;max-width:26px;display:flex;flex-direction:column-reverse;border-radius:3px 3px 0 0;overflow:hidden;gap:1px;background:transparent}
.dmb-bar span{display:block;min-height:1px}
.dmb-lab{font-size:10.5px;color:var(--ink-soft);margin-top:4px;line-height:12px}
.dmb-col.cur .dmb-lab{color:var(--ink);font-weight:700}
.dmb-col.future .dmb-lab{opacity:.45}
.dmb-col.future .dmb-bar-wrap{background:repeating-linear-gradient(0deg,transparent 0 12px,var(--line) 12px 13px);opacity:.35;border-radius:3px}
.dmb-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:11.5px;color:var(--ink-soft)}
.dmb-legend span{display:inline-flex;align-items:center;gap:5px}
.dmb-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
.dmb-empty{padding:34px 0;text-align:center;color:var(--ink-soft);font-size:12.5px}
/* why an item is on the procurement list: batch, product, order */
.req-why{margin-top:8px;padding-top:7px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--ink-2);line-height:1.45}
.req-why-h{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px}
.req-why-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== AI Advisor — chats on the left, the conversation, the auditor on the right =====
   The workspace fills the window below the page head so the thread scrolls inside itself and the
   composer never leaves the screen. Under 1200px the auditor drops below; under 860px it stacks. */
.adv-head{margin-bottom:14px}
.adv-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;height:calc(100vh - 176px);min-height:560px}
.adv-shell.has-aud{grid-template-columns:280px minmax(0,1fr) 380px}
.adv-shell.has-aud.aud-min{grid-template-columns:280px minmax(0,1fr) 48px}
.adv-rail,.adv-main,.adv-aud{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}
/* rail */
.adv-rail-top{display:flex;flex-direction:column;gap:8px;padding:12px;border-bottom:1px solid var(--line);background:var(--head)}
.adv-rail-top input{width:100%;box-sizing:border-box;padding:8px 11px;border:1px solid var(--line-strong);border-radius:8px;font-size:13px;background:var(--card);color:var(--ink)}
.adv-rail-top input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.adv-newbtn{width:100%}
.adv-rail-list{flex:1;overflow:auto;padding:4px 8px 12px}
.adv-rail-empty{padding:26px 12px;text-align:center;color:var(--ink-soft);font-size:12.5px;line-height:1.5}
.adv-grp{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding:14px 8px 6px}
.adv-chat{position:relative;padding:8px 10px;border-radius:8px;cursor:pointer;border:1px solid transparent;margin-bottom:2px}
.adv-chat:hover{background:var(--sunk);border-color:var(--line)}
.adv-chat:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.adv-chat.on{background:var(--blue-050);border-color:rgba(0,124,196,.28)}
.adv-chat-t{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adv-chat:hover .adv-chat-t,.adv-chat:focus-within .adv-chat-t{padding-right:50px}
.adv-chat-m{font-size:11px;color:var(--ink-soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adv-chat-acts{position:absolute;right:6px;top:6px;display:none;gap:2px}
.adv-chat:hover .adv-chat-acts,.adv-chat:focus-within .adv-chat-acts{display:flex}
.adv-chat-acts button{border:0;background:transparent;color:var(--ink-soft);width:24px;height:24px;border-radius:6px;cursor:pointer;font-size:12px;line-height:24px;padding:0}
.adv-chat-acts button:hover{background:var(--line);color:var(--ink)}
.adv-chat-acts button.del:hover{color:var(--neg)}
/* conversation */
.adv-main-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--head);min-height:22px}
/* the chat's title wraps to two lines before it is cut — a finding's title is read, not skimmed */
.adv-title{font-weight:700;font-size:14px;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.adv-main-meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:var(--ink-soft);white-space:nowrap}
.adv-thread{position:relative;flex:1;overflow:auto;padding:22px 26px 8px}
.adv-col{max-width:1040px;margin:0 auto}
.adv-msg{display:flex;gap:12px;margin:0 0 20px}
.adv-msg.user{justify-content:flex-end}
.adv-bubble{max-width:min(78%,760px);background:var(--blue);color:#fff;padding:10px 14px;border-radius:14px 14px 4px 14px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;line-height:1.55;box-shadow:0 1px 2px rgba(14,22,38,.08)}
.adv-avatar{flex:none;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--blue),#4e5bd6);color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;margin-top:2px}
.adv-avatar.lg{width:46px;height:46px;border-radius:13px;font-size:15px;margin:0 auto}
.adv-body{flex:1;min-width:0}
.adv-name{font-size:12px;font-weight:700;color:var(--ink);margin:3px 0 6px;display:flex;gap:8px;align-items:baseline}
.adv-name .t{font-weight:500;color:var(--ink-soft);font-size:11px}
.adv-md{font-size:13.5px;line-height:1.62;color:var(--ink);background:var(--sunk);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:13px 17px;overflow-wrap:anywhere}
.adv-md.err{border-color:var(--neg);background:rgba(209,72,58,.07)}
.adv-md.stop{color:var(--ink-soft);font-style:italic}
.adv-md>:first-child{margin-top:0}.adv-md>:last-child{margin-bottom:0}
.adv-md p{margin:0 0 10px}
.adv-md .md-h{margin:18px 0 8px;line-height:1.3;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.adv-md .md-h1{font-size:18px}.adv-md .md-h2{font-size:16px}.adv-md .md-h3{font-size:14.5px}
.adv-md .md-h4,.adv-md .md-h5,.adv-md .md-h6{font-size:13.5px}
.adv-md>.md-h:first-child{margin-top:2px}
.adv-md .md-list{margin:0 0 10px;padding-left:22px}
.adv-md .md-list li{margin:3px 0}
.adv-md .md-list li>p{margin:4px 0}
.adv-md .md-list .md-list{margin:4px 0}
.adv-md .md-quote{margin:0 0 10px;padding:8px 14px;border-left:3px solid var(--blue);background:var(--blue-050);border-radius:0 8px 8px 0;color:var(--ink-2)}
.adv-md .md-quote p:last-child{margin-bottom:0}
.adv-md .md-hr{border:0;border-top:1px solid var(--line-strong);margin:16px 0}
.adv-md .md-code{font-family:'JetBrains Mono',monospace;font-size:12px;background:var(--card);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.adv-md .md-pre{background:#0e1626;color:#e7eaf0;border-radius:8px;padding:12px 14px;overflow:auto;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.5;margin:0 0 10px}
.adv-md a{color:var(--blue)}
.adv-md .md-tbl{overflow-x:auto;margin:4px 0 12px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.adv-md .md-tbl table.tbl{width:100%;font-size:12.5px}
.adv-md .md-tbl table.tbl th{padding:9px 14px;background:var(--head);white-space:nowrap}
.adv-md .md-tbl table.tbl td{padding:8px 14px;vertical-align:top;min-width:70px}
.adv-md .md-tbl table.tbl td.r,.adv-md .md-tbl table.tbl th.r{white-space:nowrap}
.adv-md .md-tbl table.tbl tbody tr:hover td{background:var(--blue-050)}
.adv-acts{display:flex;gap:6px;margin-top:5px;opacity:.55;transition:opacity .12s}
.adv-msg:hover .adv-acts,.adv-acts:focus-within,.adv-acts.on{opacity:1}
.adv-acts .lnk{font-size:11.5px}
/* thinking */
.adv-think{display:inline-flex;align-items:center;gap:10px;padding:11px 15px;background:var(--sunk);border:1px solid var(--line);border-radius:4px 14px 14px 14px;font-size:13px;color:var(--ink-soft);max-width:100%;flex-wrap:wrap}
.adv-think.slow{border-color:var(--warn)}
.adv-think .sec{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--ink-soft);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1px 8px}
.adv-dots{display:inline-flex;gap:4px}
.adv-dots i{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:advDot 1.2s infinite ease-in-out}
.adv-dots i:nth-child(2){animation-delay:.16s}.adv-dots i:nth-child(3){animation-delay:.32s}
@keyframes advDot{0%,80%,100%{transform:scale(.55);opacity:.35}40%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.adv-dots i{animation:none;opacity:.8}}
/* welcome */
.adv-welcome{max-width:720px;margin:7vh auto 20px;text-align:center}
.adv-welcome h3{font-size:20px;margin:14px 0 6px;letter-spacing:-.01em}
.adv-welcome p{color:var(--ink-soft);font-size:13px;margin:0}
.adv-sugg{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:22px;text-align:left}
.adv-sugg button{border:1px solid var(--line);background:var(--sunk);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--ink);cursor:pointer;text-align:left;line-height:1.4}
.adv-sugg button:hover{border-color:var(--blue);background:var(--blue-050)}
/* composer */
.adv-composer{border-top:1px solid var(--line);padding:12px 20px 10px;background:var(--card)}
.adv-inputwrap{max-width:1040px;margin:0 auto;display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line-strong);border-radius:12px;padding:6px 6px 6px 14px;background:var(--card);transition:border-color .12s,box-shadow .12s}
.adv-inputwrap:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.adv-inputwrap textarea,[data-theme="dark"] .adv-inputwrap textarea{flex:1;min-width:0;border:0;outline:0;resize:none;background:transparent;font:inherit;font-size:14px;line-height:21px;padding:6px 0;height:33px;max-height:176px;color:var(--ink);box-shadow:none}
.adv-send,.adv-stop{flex:none;border-radius:9px;padding:8px 18px;font-weight:700;font-size:13px;cursor:pointer;height:34px}
.adv-send{background:var(--blue);color:#fff;border:0}
.adv-send:disabled{background:var(--line-strong);color:var(--card);cursor:not-allowed}
.adv-stop{background:var(--card);border:1px solid var(--neg);color:var(--neg)}
.adv-stop:hover{background:rgba(209,72,58,.08)}
.adv-send[hidden],.adv-stop[hidden]{display:none}
.adv-foot{max-width:1040px;margin:6px auto 0;display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--ink-soft);flex-wrap:wrap}
.adv-prov.on::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pos);margin-right:6px;vertical-align:1px}
.adv-prov.off{color:var(--warn)}
/* auditor */
.adv-aud-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--head)}
.adv-aud-tog{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--ink);font-weight:700;font-size:14px;cursor:pointer;padding:2px 0}
.adv-aud-tog .chev{display:inline-block;transform:rotate(90deg);transition:transform .15s;color:var(--ink-soft);font-size:11px}
.adv-aud.collapsed .adv-aud-tog .chev{transform:none}
.adv-aud-count{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;background:var(--line);color:var(--ink);border-radius:10px;padding:1px 8px}
.adv-aud-count.hi{background:var(--neg);color:#fff}
.adv-aud-body{flex:1;overflow:auto;padding:14px 16px 16px}
.adv-aud.collapsed .adv-aud-body{display:none}
.adv-shell.aud-min .adv-aud-head{flex-direction:column;justify-content:flex-start;padding:12px 0;height:100%;border-bottom:0}
.adv-shell.aud-min .adv-aud-tog{writing-mode:vertical-rl;padding:0}
.adv-shell.aud-min .adv-aud-tog .chev{transform:rotate(180deg)}
.adv-shell.aud-min .adv-aud-head .lnk{display:none}
.adv-sev{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.adv-sev>div{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--sunk);min-width:0}
.adv-sev .n{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-size:20px;font-weight:700;line-height:1.1}
.adv-sev .l{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}
.adv-sev .tot{border-left:3px solid var(--blue)}
.adv-sev .high .n{color:var(--neg)}.adv-sev .medium .n{color:var(--warn)}.adv-sev .low .n{color:var(--ink-soft)}
.adv-aud-scan{font-size:11.5px;color:var(--ink-soft);margin:10px 0 8px;line-height:1.45}
.adv-aud-run{width:100%;padding:7px 12px}
.adv-aud-sec{margin-top:14px}
.adv-aud-lab{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.adv-aud-lab .up{color:var(--neg)}.adv-aud-lab .down{color:var(--pos)}
.adv-spark{width:100%;height:46px;display:block}
.adv-spark .l{fill:none;stroke:var(--blue);stroke-width:2;vector-effect:non-scaling-stroke}
.adv-spark .a{fill:var(--blue);opacity:.1}
.adv-spark .d{fill:var(--blue)}
.adv-chk{display:grid;grid-template-columns:minmax(0,1fr) 84px 30px;gap:8px;align-items:center;font-size:12px;padding:3px 0}
.adv-chk .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adv-chk .bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.adv-chk .bar i{display:block;height:100%;background:var(--blue);border-radius:3px}
.adv-chk .bar i.hi{background:var(--neg)}
.adv-chk .n{text-align:right;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-size:11.5px}
.adv-find{padding:9px 0;border-bottom:1px solid var(--line)}
.adv-find:last-child{border-bottom:0}
.adv-find .t{font-size:12.5px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.adv-find .m{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px;font-size:11.5px;color:var(--ink-soft)}
.adv-find .m .lnk{padding:0;font-size:11.5px}
.adv-askf{margin-left:auto}
.adv-sevchip{display:inline-block;padding:1px 7px;border-radius:9px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;vertical-align:1px}
.adv-sevchip.high{color:var(--neg);background:rgba(209,72,58,.13)}
.adv-sevchip.medium{color:var(--warn);background:rgba(224,139,24,.15)}
.adv-sevchip.low{color:var(--ink-soft);background:var(--line)}
/* THE PANES ANSWER TO THE ROOM THEY HAVE, NOT THE SCREEN. The sidebar takes 236px of a laptop's
   1440, so a viewport breakpoint would squeeze the conversation to 500px between two side cards.
   Under 1300px of workspace the auditor moves beneath the chat as a strip of three blocks. */
.adv-wrap{container-type:inline-size;container-name:advw}
.adv-aud-c+.adv-aud-c{margin-top:4px}
@container advw (max-width:1299px){
  .adv-shell,.adv-shell.has-aud,.adv-shell.has-aud.aud-min{grid-template-columns:240px minmax(0,1fr);height:auto;min-height:0}
  .adv-rail,.adv-main{height:calc(100vh - 176px);min-height:520px}
  .adv-aud{grid-column:1 / -1}
  .adv-aud-body{overflow:visible;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start}
  .adv-aud-c+.adv-aud-c{margin-top:0}
  .adv-aud-c>.sub-divider:first-child{margin-top:0}
  .adv-shell.aud-min .adv-aud-head{flex-direction:row;justify-content:space-between;padding:10px 14px;height:auto}
  .adv-shell.aud-min .adv-aud-tog{writing-mode:horizontal-tb}
  .adv-shell.aud-min .adv-aud-tog .chev{transform:none}
  .adv-shell.aud-min .adv-aud-head .lnk{display:inline}
}
@container advw (max-width:900px){
  .adv-aud-body{grid-template-columns:minmax(0,1fr);gap:4px}
  .adv-aud-c>.sub-divider:first-child{margin-top:16px}
}
@container advw (max-width:760px){
  .adv-shell,.adv-shell.has-aud,.adv-shell.has-aud.aud-min{grid-template-columns:minmax(0,1fr)}
  .adv-rail{height:auto;max-height:240px;min-height:0}
  .adv-main{height:calc(100vh - 140px);min-height:460px}
  .adv-thread{padding:14px 12px 6px}
  .adv-composer{padding:10px 12px 8px}
  .adv-bubble{max-width:88%}
  .adv-msg{gap:8px}
  .adv-sev{grid-template-columns:repeat(2,1fr)}
}

/* ===== INTELLIGENCE — Command Center, AI CFO, Auditor =====
   THE SAME FAMILY AS THE ADVISOR, AND THE SAME RULE: the page answers to the room it has, not to
   the screen. The sidebar takes 236px of a laptop's 1440, so every breakpoint below is a container
   query on .intel — a KPI band is six across on a wide monitor, three on a laptop, two on a phone,
   and no card is stretched into a two-metre line or squeezed into a column of one word. */
.intel{container-type:inline-size;container-name:intel}
.intel-head{flex-wrap:wrap;margin-bottom:16px}
.intel-head .actions{flex-wrap:wrap;justify-content:flex-end}
.intel-kpis{display:grid;gap:12px;margin-bottom:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.intel-kpis.k6{grid-template-columns:repeat(6,minmax(0,1fr))}
.intel-kpis.k7{grid-template-columns:repeat(7,minmax(0,1fr))}
.intel-kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* ---- cash control: the till's state above its cash book ---- */
.cc-ctl{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.cc-ban{padding:9px 12px;border-radius:8px;border:1px solid var(--line);background:var(--paper);font-size:13px;line-height:1.45}
.cc-ban.neg{border-color:#f0b8b4;background:#fdecea;color:#8a1f16}
.cc-ban.warn{border-color:#f2d2a6;background:#fdf0e3;color:#7a4a05}
.cc-ban.pos{border-color:#bfe3cc;background:#e9f7ee;color:#1d5b36}
.cc-ban .lnk,.cc-ban .btn-sm,.cc-ban .btn-ghost{margin-left:6px;vertical-align:baseline}
.cc-card{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 12px;border-radius:8px;border:1px dashed var(--line);font-size:12px;color:var(--ink-soft)}
.cc-card-r{display:flex;align-items:center;gap:8px;white-space:nowrap}
.cc-trend{display:inline-flex;align-items:flex-end;gap:3px;height:18px;vertical-align:middle}
.cc-trend.big{height:30px;gap:5px}
.cc-trend i{display:inline-block;width:7px;min-height:3px;border-radius:2px 2px 0 0;background:var(--pos)}
.cc-trend.big i{width:11px}
.cc-trend i.short{background:var(--neg)}
.cc-trend i.over{background:var(--warn)}
.cc-trend i.spot{background:transparent;box-shadow:inset 0 0 0 2px currentColor;color:var(--ink-soft)}
.cc-trend i.spot.short{color:var(--neg)}
.cc-trend i.spot.over{color:var(--warn)}
:root[data-theme="dark"] .cc-ban.neg{background:#3a1b18;border-color:#6b2b25;color:#f5c6c1}
:root[data-theme="dark"] .cc-ban.warn{background:#3b2a12;border-color:#6e4d1c;color:#f3d8a6}
:root[data-theme="dark"] .cc-ban.pos{background:#143123;border-color:#245c3c;color:#bfe9cf}
.intel-tile{padding:14px 15px 13px;min-width:0}
.intel-tile .k-label{display:flex;justify-content:space-between;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.intel-tile .k-val{font-size:22px;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.intel-tile .k-foot{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.intel-tile .k-foot .neg,.intel .neg{color:var(--neg)}
.intel-tile .k-foot .pos,.intel .pos{color:var(--pos)}
.intel .warnc{color:var(--warn)}
.intel-tile.act{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
.intel-tile.act:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(20,80,160,.10);transform:translateY(-1px)}
.intel-tile.act:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.intel-tile.on{outline:2px solid var(--blue);outline-offset:-2px;background:var(--blue-050)}
.intel-go{color:var(--blue);font-weight:700;opacity:0;transition:opacity .12s}
.intel-tile.act:hover .intel-go,.intel-tile.act:focus-visible .intel-go{opacity:1}
.intel-grid{display:grid;gap:14px;margin-bottom:14px;grid-template-columns:minmax(0,1fr);align-items:stretch}
.intel-grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.intel-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.intel-grid.cc-top{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.intel-grid>.mr-card{margin:0;min-width:0}
.intel-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:0;display:flex;flex-direction:column}
.intel>.intel-card,.cfo-main>.intel-card,.intel-cfo+.intel-card{margin-bottom:14px}
.intel-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--head);border-radius:var(--r) var(--r) 0 0}
.intel-card-t{min-width:0}
.intel-card-t h3{margin:0;font-size:14px;font-weight:700;letter-spacing:-.005em}
.intel-card-sub{font-size:11.5px;color:var(--ink-soft);margin-top:2px;line-height:1.4}
.intel-card-r{flex:none;font-size:12px;display:flex;gap:8px;align-items:center}
.intel-card-b{padding:14px 16px;min-width:0;flex:1}
.intel-quiet{padding:18px 8px;text-align:center;color:var(--ink-soft);font-size:12.5px}
.intel-err{padding:12px 16px;border:1px solid var(--line);border-left:3px solid var(--neg);border-radius:8px;background:rgba(209,72,58,.06);font-size:13px}
.intel-gate{padding:22px 24px;max-width:640px}
.intel-gate h3{margin:0 0 6px;font-size:16px}
.intel-gate p{margin:0;color:var(--ink-soft);font-size:13px;line-height:1.55}
.intel-skel{padding:4px 0}
.intel-ask{white-space:nowrap}
/* ===== AGENTS HUB — one card per agent, its figure for today =====
   One grid for all three groups, the group titles spanning it, so a card is the same width in
   every group at every width (auto-fit alone would stretch a group of four wider than one of
   five). min(100%,…) keeps a phone to one column with no sideways scroll. */
.hub-back{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--blue);text-decoration:none;margin:0 0 4px;padding:2px 0}
.hub-back:hover{text-decoration:underline}
.hub-back:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.agh-h-sub{font-weight:500;color:var(--ink-soft);font-size:.72em;letter-spacing:0}
.agh-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr));align-items:stretch}
.agh-grp-h{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:14px 0 0;padding-bottom:7px;border-bottom:1px solid var(--line)}
.agh-grp-h:first-child{margin-top:0}
.agh-grp-h h3{margin:0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
.agh-grp-h span{font-size:12px;color:var(--ink-soft)}
.agh-card{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 14px 13px 17px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;min-width:0;overflow:hidden;transition:border-color .12s,box-shadow .12s,transform .12s}
.agh-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
.agh-card.t-neg::before{background:var(--neg)}
.agh-card.t-warn::before{background:var(--warn)}
.agh-card:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(20,80,160,.10);transform:translateY(-1px);text-decoration:none}
.agh-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.agh-ic{flex:none;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--blue-050);color:var(--blue)}
.agh-card.t-neg .agh-ic{background:rgba(209,72,58,.12);color:var(--neg)}
.agh-card.t-warn .agh-ic{background:rgba(224,139,24,.14);color:var(--warn)}
.agh-b{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.agh-top{display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px;min-width:0;padding-right:14px}
.agh-n{font-size:13px;font-weight:700;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.agh-badge{flex:none;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.08em;padding:1px 7px;border-radius:999px;border:1px solid transparent}
.agh-badge.dry{background:var(--blue-050);color:var(--blue);border-color:var(--blue)}
.agh-badge.live{background:rgba(31,157,99,.14);color:var(--pos);border-color:rgba(31,157,99,.35)}
.agh-badge.off{background:rgba(120,130,145,.14);color:var(--ink-soft);border-color:var(--line-strong)}
.agh-fig{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:22px}
.agh-card.t-neg .agh-fig{color:var(--neg)}
.agh-card.t-warn .agh-fig{color:var(--warn)}
.agh-foot{font-size:12px;color:var(--ink-soft);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.agh-card.quiet .agh-fig{font-size:13px;font-weight:600;color:var(--ink-soft);white-space:normal}
.agh-go{position:absolute;top:12px;right:13px;color:var(--blue);font-weight:700;opacity:0;transition:opacity .12s}
.agh{margin-top:4px}
.agh-card:hover .agh-go,.agh-card:focus-visible .agh-go{opacity:1}
@media (max-width:600px){ .agh-head .actions{width:100%;justify-content:flex-start} .agh-fig{font-size:16px} }
.adv-sevchip.win{color:var(--pos);background:rgba(31,157,99,.13)}
.adv-sevchip.info{color:var(--pos);background:rgba(31,157,99,.13)}
/* a bar that says what share of the whole a part is — domain scores, checks, people */
.intel-barrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(56px,38%) 46px;gap:10px;align-items:center;font-size:12.5px;padding:4px 0}
.intel-barrow .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.intel-barrow .bar{height:7px;border-radius:4px;background:var(--line);overflow:hidden}
.intel-barrow .bar i{display:block;height:100%;background:var(--blue);border-radius:4px}
.intel-barrow .n{text-align:right;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;font-size:11.5px}
.intel-barrow.act{cursor:pointer;border-radius:6px;padding:4px 6px;margin:0 -6px}
.intel-barrow.act:hover,.intel-barrow.act:focus-visible{background:var(--sunk);outline:0}
.intel-barrow.on{background:var(--blue-050)}
.intel-barrow.quiet .nm,.intel-barrow.quiet .n{color:var(--ink-soft)}
/* compact tables inside cards */
table.tbl.intel-tbl{font-size:12.5px}
table.tbl.intel-tbl th{padding:8px 10px}
table.tbl.intel-tbl td{padding:8px 10px;vertical-align:top}
table.tbl.intel-tbl td:first-child,table.tbl.intel-tbl th:first-child{padding-left:0}
table.tbl.intel-tbl td:last-child,table.tbl.intel-tbl th:last-child{padding-right:0}
table.tbl.intel-tbl tr.sum td{border-top:1px solid var(--line-strong)}
table.tbl.intel-tbl tr.grand td{border-top:2px solid var(--line-strong);border-bottom:0}
table.tbl.intel-tbl tr.cur td{background:var(--blue-050)}
table.tbl.intel-tbl tr.cur td:first-child{box-shadow:inset 3px 0 var(--blue);padding-left:8px}
table.tbl.intel-tbl td.neg{color:var(--neg)}
table.tbl.intel-tbl td.r{white-space:nowrap}
/* AI text */
.intel-ai-mark{color:var(--blue)}
.intel-ai-b{min-height:120px}
.intel-ai-idle p{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.intel-ai-idle p.hint{font-size:12px;color:var(--ink-soft)}
.intel-ai-think{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.intel-md{border-radius:10px}
.intel-ai-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--ink-soft)}
.intel-ai-acts{display:flex;gap:2px;flex-wrap:wrap}
.intel-ai-acts .lnk{font-size:12px}
.intel-ai-off{border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:8px;padding:10px 14px;background:var(--sunk);font-size:12.5px;line-height:1.55}
.intel-ai-off p{margin:0 0 6px}.intel-ai-off p:last-child{margin:0}
/* ---- Command Center ---- */
.cc-health-in{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.cc-ring{flex:none;width:104px;height:104px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p) * 1%),var(--line) 0);display:grid;place-items:center}
.cc-ring-in{width:80px;height:80px;border-radius:50%;background:var(--card);display:flex;align-items:baseline;justify-content:center;padding-top:26px;box-sizing:border-box}
.cc-ring-in b{font-family:'JetBrains Mono',monospace;font-size:26px;line-height:1}
.cc-ring-in span{font-size:11px;color:var(--ink-soft);margin-left:1px}
.cc-band .b{font-weight:800;font-size:16px;margin-bottom:4px}
.cc-band .hint{font-size:12px;line-height:1.45}
.cc-atts{display:flex;flex-direction:column}
.cc-att{display:flex;gap:10px;align-items:flex-start;padding:10px 8px;margin:0 -8px;border-bottom:1px solid var(--line);border-radius:6px}
.cc-att:last-child{border-bottom:0}
.cc-att.act{cursor:pointer}
.cc-att.act:hover,.cc-att.act:focus-visible{background:var(--sunk);outline:0}
.cc-dot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:5px;background:var(--ink-soft)}
.cc-dot.high{background:var(--neg)}.cc-dot.medium{background:var(--warn)}
.cc-att-t{flex:1;min-width:0}
.cc-att-t .t{font-weight:600;font-size:13px;line-height:1.35}
.cc-att-t .d{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-att-t .m{font-size:11px;color:var(--ink-soft);margin-top:3px}
.cc-att-go{flex:none;font-size:12px;font-weight:600;color:var(--blue);white-space:nowrap;margin-top:1px}
.cc-more{padding-top:8px}
.cc-side{display:flex;flex-direction:column;gap:14px;min-width:0;container-type:inline-size;container-name:ccside}
.cc-side>.intel-card{flex:none}
.cc-sigs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));column-gap:32px}
.cc-sigs .cc-sig:first-child{padding-top:10px}
.cc-prod-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.cc-pt{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--sunk);min-width:0}
.cc-pt b{display:block;font-family:'JetBrains Mono',monospace;font-size:20px;line-height:1.1}
.cc-pt span{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-pt.neg b{color:var(--neg)}.cc-pt.warn b{color:var(--warn)}.cc-pt.pos b{color:var(--pos)}.cc-pt.muted b{color:var(--ink-soft)}
.cc-prog{display:inline-block;vertical-align:middle;width:70px;height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-right:6px}
.cc-prog i{display:block;height:100%;background:var(--blue)}
.cc-sig{padding:10px 0;border-bottom:1px solid var(--line)}
.cc-sig:last-child{border-bottom:0}
.cc-sig-h{display:flex;gap:8px;align-items:baseline;font-size:13px}
.cc-sig-h b{min-width:0}
.cc-conf{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-soft);white-space:nowrap}
.cc-sig .d{font-size:12px;color:var(--ink-2);margin-top:4px;line-height:1.45}
.cc-metrics{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cc-metric{border:1px solid var(--line);border-radius:999px;padding:1px 9px;font-size:11px;color:var(--ink-soft)}
.cc-metric b{color:var(--ink);font-weight:600}
.cc-sig-acts{display:flex;gap:10px;margin-top:4px}
.cc-sig-acts .lnk{padding-left:0}
.cc-links{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 8px}
.cc-links a{border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--card);text-decoration:none}
.cc-links a:hover{border-color:var(--blue);color:var(--blue)}
/* ---- AI CFO ---- */
.intel-cfo{display:grid;gap:14px;grid-template-columns:248px minmax(0,1fr) minmax(340px,420px);align-items:start}
.cfo-rail{position:sticky;top:12px}
.cfo-rail-b{padding:8px;max-height:calc(100vh - 210px);overflow:auto}
.cfo-src{padding:9px 10px;border-radius:8px;border:1px solid transparent;cursor:pointer;margin-bottom:2px}
.cfo-src:hover{background:var(--sunk);border-color:var(--line)}
.cfo-src:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.cfo-src.on{background:var(--blue-050);border-color:rgba(0,124,196,.28)}
.cfo-src .t{font-weight:600;font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.cfo-src.sm .t{font-size:12.5px;font-weight:600}
.cfo-src .m{font-size:11.5px;color:var(--ink-soft);margin-top:2px}
.cfo-rail-sec{padding:12px 4px 6px;border-top:1px solid var(--line);margin-top:8px}
.cfo-rail-sec .lab{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.cfo-rail-sec input{width:100%;box-sizing:border-box;padding:7px 10px;border:1px solid var(--line-strong);border-radius:8px;font-size:12.5px;background:var(--card);color:var(--ink)}
.cfo-none{padding:8px 6px}
.cfo-note{font-size:11px;color:var(--ink-soft);margin:10px 6px 4px;line-height:1.45}
.cfo-main{container-type:inline-size;container-name:cfomain;min-width:0}
.cfo-subject{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.cfo-subject h3{margin:2px 0 0;font-size:17px;font-weight:800;letter-spacing:-.01em}
.cfo-subject .hint{font-size:12px}
.cfo-flag{display:flex;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.45}
.cfo-flag:first-child{padding-top:0}.cfo-flag:last-child{border-bottom:0;padding-bottom:0}
.cfo-flag .adv-sevchip{flex:none}
.cfo-flag{flex-wrap:wrap}
.cfo-flag .t{flex:1 1 220px;min-width:0}
.cfo-flag .intel-ask{margin-left:auto}
.cfo-stack{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px;margin:0 0 8px}
.cfo-stack span{min-width:3px}
.cfo-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--ink-soft);margin-bottom:10px}
.cfo-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.cfo-legend b{color:var(--ink);font-weight:600}
.cfo-formula{font-size:10.5px;overflow-wrap:anywhere;margin-top:2px}
.cfo-scen+.cfo-scen{margin-top:14px}
.intel-cfo>.intel-ai{position:sticky;top:12px;max-height:calc(100vh - 100px)}
.intel-cfo>.intel-ai .intel-ai-b{overflow:auto}
/* ---- Auditor ---- */
.aud-filters{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.aud-status{max-width:100%;overflow-x:auto;align-self:flex-start}
.aud-status button{white-space:nowrap}
.aud-fsel{display:flex;flex-wrap:wrap;gap:8px}
.aud-fsel select{width:auto;min-width:128px;max-width:230px;padding:7px 10px;font-size:12.5px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);color:var(--ink)}
.aud-fsel input{flex:1 1 180px;max-width:300px;min-width:150px;padding:7px 11px;font-size:12.5px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);color:var(--ink);box-sizing:border-box}
.aud-fmeta{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--ink-soft);flex-wrap:wrap}
.aud-fmeta b{color:var(--ink)}
.aud-pill{border:1px solid var(--blue);color:var(--blue);border-radius:999px;padding:1px 9px;font-size:11px;font-weight:600}
.aud-register>.intel-card-b{padding-bottom:6px}
.aud-reg{overflow-x:auto;margin:0 -16px}
.aud-reg table.tbl th{padding:9px 12px;white-space:nowrap}
.aud-reg table.tbl td{padding:9px 12px;vertical-align:top}
.aud-reg table.tbl th:first-child,.aud-reg table.tbl td:first-child{padding-left:16px}
.aud-reg table.tbl th:last-child,.aud-reg table.tbl td:last-child{padding-right:16px}
.aud-reg th.ck,.aud-reg td.ck{width:22px}
.aud-reg tr.sev-high td:first-child{box-shadow:inset 3px 0 var(--neg)}
.aud-reg tr.sev-medium td:first-child{box-shadow:inset 3px 0 var(--warn)}
.aud-reg tbody tr:hover td{background:var(--sunk)}
.aud-scope{white-space:nowrap;color:var(--ink-2);font-size:12px}
.aud-f{min-width:260px;max-width:680px}
.aud-f .t{font-weight:600;line-height:1.4}
.aud-f .d{color:var(--ink-soft);font-size:12px;margin-top:2px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.aud-f .d.open{display:block;-webkit-line-clamp:unset}
.aud-f .n{color:var(--ink-2);font-size:12px;font-style:italic;margin-top:3px}
.aud-f .c{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.aud-new{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:var(--blue-050);border-radius:9px;padding:1px 7px;vertical-align:1px}
.aud-age{white-space:nowrap}
.aud-age .hint{font-size:10.5px}
.aud-act{white-space:nowrap;text-align:right}
.aud-reg td.aud-amt{white-space:nowrap}
.aud-act .lnk{padding:2px 5px}
.aud-st{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:9px;padding:1px 7px;margin-right:4px;background:var(--line);color:var(--ink-2)}
.aud-st.resolved{background:rgba(31,157,99,.13);color:var(--pos)}
.aud-empty{padding:34px 8px}
.aud-bulk{position:sticky;bottom:0;z-index:5;display:none;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;margin:10px 0 8px;border:1px solid var(--line);border-radius:10px;background:var(--card);box-shadow:0 -4px 14px rgba(16,24,40,.08)}
.aud-when{font-size:13px}
.aud-facts{display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 12px;font-size:12px;color:var(--ink-soft)}
.aud-facts b{color:var(--ink);font-family:'JetBrains Mono',monospace}
.aud-facts .neg b{color:var(--neg)}
.aud-trend-h{display:flex;justify-content:space-between;gap:8px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.aud-trend{display:grid;gap:4px;height:92px;align-items:end}
.aud-trend .col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.aud-trend .v{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft);height:13px;line-height:13px}
.aud-trend .b{width:100%;max-width:24px;background:var(--blue);opacity:.45;border-radius:3px 3px 0 0}
.aud-trend .col.cur .b{opacity:1}
.aud-trend .col.cur .v{color:var(--ink);font-weight:700}
.aud-trend-x{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-soft);margin-top:4px;border-top:1px solid var(--line);padding-top:3px}
.aud-trend-none{padding:10px 0}
.aud-person{display:flex;align-items:center;gap:8px;border-radius:6px;padding:0 6px;margin:0 -6px;cursor:pointer}
.aud-person:hover,.aud-person:focus-visible{background:var(--sunk);outline:0}
.aud-person.on{background:var(--blue-050)}
.aud-person .intel-barrow{flex:1;min-width:0}
.aud-person .aud-q{flex:none;font-size:11.5px;padding:2px 4px}
.aud-person .intel-barrow{grid-template-columns:minmax(0,1fr) minmax(40px,26%) 26px}
.aud-person .adv-sevchip{margin-left:4px}
.aud-work{margin-top:0}
.aud-work-h{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:var(--head);border:0;padding:12px 16px;cursor:pointer;color:var(--ink);border-radius:var(--r);font-size:14px}
.aud-work-h .intel-card-sub{display:block;font-weight:400}
.aud-work-h .chev{color:var(--ink-soft);font-size:11px;transition:transform .15s}
.aud-work.open .aud-work-h{border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}
.aud-work.open .aud-work-h .chev{transform:rotate(90deg)}
.aud-work-bar{margin-bottom:12px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.aud-sub{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:16px 0 6px}
.aud-scroll{overflow-x:auto}
.aud-ex{margin:0 0 8px;padding-left:18px;font-size:12.5px;line-height:1.8}
.aud-q .intel-grid{margin-top:4px}
/* ---- the room each layout needs ---- */
@container intel (max-width:1399px){
  .intel-cfo{grid-template-columns:212px minmax(0,1fr) minmax(290px,330px)}
}
@container intel (max-width:999px){
  .intel-cfo{grid-template-columns:212px minmax(0,1fr)}
  .intel-cfo>.intel-ai{grid-column:2;position:static;max-height:none}
}
@container intel (max-width:1100px){
  .intel-kpis.k6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .intel-kpis.k7{grid-template-columns:repeat(4,minmax(0,1fr))}
  .intel-grid.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intel-grid.g3>.aud-scan{grid-column:1 / -1}
}
@container intel (max-width:820px){
  .intel-grid.cc-top{grid-template-columns:minmax(0,1fr)}
  .intel-grid.g2,.intel-grid.g3{grid-template-columns:minmax(0,1fr)}
  .intel-cfo{grid-template-columns:minmax(0,1fr)}
  .intel-cfo>.intel-ai{grid-column:auto}
  .cfo-rail{position:static}
  .cfo-rail-b{max-height:260px}
  .intel-kpis.k4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container intel (max-width:760px){
  .aud-reg{margin:0}
  .aud-reg thead{display:none}
  .aud-reg table,.aud-reg tbody,.aud-reg tr,.aud-reg td{display:block;width:auto}
  .aud-reg tr{position:relative;border:1px solid var(--line);border-radius:10px;margin:0 0 10px;padding:10px 12px}
  .aud-reg table.tbl td,.aud-reg table.tbl td:first-child,.aud-reg table.tbl td:last-child{border:0;padding:2px 0;text-align:left;box-shadow:none}
  .aud-reg tr.sev-high{border-left:3px solid var(--neg)}
  .aud-reg tr.sev-medium{border-left:3px solid var(--warn)}
  .aud-reg td[data-l]::before{content:attr(data-l);display:inline-block;width:86px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);vertical-align:1px}
  .aud-reg td.aud-f::before{display:none}
  .aud-reg td.aud-f{max-width:none;min-width:0;padding:6px 0 4px}
  .aud-reg td.ck{position:absolute;right:10px;top:8px;width:auto}
  .aud-reg td.aud-age .hint{display:inline;margin-left:6px}
  .aud-reg td.aud-act{white-space:normal;padding-top:6px;border-top:1px solid var(--line)}
  .aud-reg td.aud-act .lnk:first-child{padding-left:0}
  .aud-fsel select,.aud-fsel input{flex:1 1 calc(50% - 8px);max-width:none;min-width:0}
}
@container intel (max-width:600px){
  .intel-kpis.k6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intel-kpis.k7{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-att{flex-wrap:wrap}
  .cc-att-go{flex-basis:100%;padding-left:19px}
  .intel-tile .k-val{font-size:19px}
  .cc-prod-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-health-in{gap:12px}
  .cc-ring{width:88px;height:88px}.cc-ring-in{width:68px;height:68px;padding-top:21px}.cc-ring-in b{font-size:22px}
  .cc-jobs th:nth-child(2),.cc-jobs td:nth-child(2),.cc-jobs th:nth-child(4),.cc-jobs td:nth-child(4){display:none}
  .intel-barrow{grid-template-columns:minmax(0,1fr) 30% 40px}
}
@container cfomain (max-width:620px){
  .cfo-main .intel-kpis.k4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfo-main .intel-grid.g2{grid-template-columns:minmax(0,1fr)}
}
/* A filter with many choices becomes the app's searchable picker (enhanceSelect wraps it in .ssel,
   which is full-width by default); in the filter row it keeps the width of a filter. */
.aud-fsel .ssel{width:auto;flex:0 1 210px;min-width:150px;max-width:240px}
.aud-fsel .ssel-input{width:100%;box-sizing:border-box;padding:7px 26px 7px 10px;font-size:12.5px;border:1px solid var(--line-strong);border-radius:8px;background-color:var(--card);color:var(--ink)}
@container intel (max-width:760px){.aud-fsel .ssel{flex:1 1 calc(50% - 8px);max-width:none;min-width:0}}
/* Production sits under Company health in the Command Center's side column: in that width
   the target date goes (days left says it) and the four counts stay one row. */
@container ccside (max-width:520px){
  .cc-jobs th:nth-child(4),.cc-jobs td:nth-child(4){display:none}
  .cc-prog{width:44px}
  .cc-pt{padding:7px 8px}.cc-pt b{font-size:18px}
}
@container ccside (max-width:360px){
  .cc-prod-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-jobs th:nth-child(2),.cc-jobs td:nth-child(2){display:none}
}
.intel .cc-signals{margin-bottom:14px}
.intel .aud-register{margin-bottom:14px}

/* ---- Agents: the Procurement Agent's page, its word on a document, and its coach on the form ---- */
.agt-id{margin-bottom:14px}
.agt-id-b{display:flex;gap:16px;align-items:center;padding:16px 18px}
.agt-id.off{border-left:3px solid var(--neg)}
.agt-av{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:18px;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-700))}
.agt-id.off .agt-av{background:var(--grey)}
/* one card per agent above the selected one's page */
.agt-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:0 0 12px}
.agt-pick-c{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);padding:10px 12px;cursor:pointer;font:inherit;min-width:0}
.agt-pick-c:hover{border-color:var(--line-strong)}
.agt-pick-c.on{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);background:var(--blue-050)}
.agt-pick-c:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.agt-pick-av{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-700))}
.agt-pick-c.off .agt-pick-av{background:var(--grey)}
.agt-pick-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.agt-pick-n{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agt-pick-m{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.agt-pick-m .agt-mode,.agt-pick-m .agt-onoff{font-size:9px;padding:1px 7px}
.agt-pick-f{font-size:11.5px;color:var(--ink-soft)}
.agt-who{flex:1;min-width:0}
.agt-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.agt-name h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.agt-mode,.agt-onoff{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.1em;border-radius:999px;padding:3px 9px}
.agt-mode.live{background:rgba(31,157,99,.14);color:var(--pos);border:1px solid rgba(31,157,99,.35)}
.agt-mode.dry{background:var(--blue-050);color:var(--blue);border:1px solid var(--blue)}
.agt-onoff.on{color:var(--ink-soft);border:1px solid var(--line-strong)}
.agt-onoff.off{color:var(--neg);border:1px solid var(--neg)}
.agt-sub{font-size:12.5px;color:var(--ink-soft);margin-top:4px;line-height:1.45}
.agt-thr{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.agt-thr span{font-size:11.5px;border:1px solid var(--line);background:var(--sunk);border-radius:7px;padding:2px 8px;color:var(--ink-2);white-space:nowrap}
.agt-ctl{flex:none}
.agt-switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;font-size:13px;position:relative}
.agt-switch input{position:absolute;opacity:0;width:1px;height:1px}
.agt-sw{width:42px;height:24px;border-radius:12px;background:var(--line-strong);position:relative;transition:background .15s}
.agt-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.agt-switch input:checked+.agt-sw{background:var(--pos)}
.agt-switch input:checked+.agt-sw::after{transform:translateX(18px)}
.agt-switch input:focus-visible+.agt-sw{outline:2px solid var(--blue);outline-offset:2px}
.intel-kpis.agt-k7{grid-template-columns:repeat(7,minmax(0,1fr))}
.agt-charts .mr-card{min-width:0}
.agt-days{grid-template-columns:repeat(14,minmax(0,1fr));gap:4px}
.agt-acc-b{display:flex;gap:16px;align-items:center}
.agt-acc-n{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;border:6px solid var(--blue-050);outline:1px solid var(--line)}
.agt-acc-n b{font-size:22px;font-family:'JetBrains Mono',monospace}
.agt-acc-n span{font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
.agt-acc-l{display:flex;flex-direction:column;gap:7px;font-size:12.5px;min-width:0}
.agt-acc-l>div{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.agt-acc-l .hint{font-size:11px;flex-basis:100%;margin-left:15px}
.agt-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.agt-dot.pos{background:var(--pos)}.agt-dot.neg{background:var(--neg)}.agt-dot.warn{background:var(--warn)}
.agt-seg{max-width:100%;overflow-x:auto;align-self:flex-start}
.agt-seg button{white-space:nowrap;cursor:pointer}
.agt-date{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft)}
.agt-date input{padding:6px 8px;font-size:12.5px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);color:var(--ink);width:auto}
.agt-out{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;white-space:nowrap;border:1px solid transparent}
.agt-out.pos{background:rgba(31,157,99,.13);color:var(--pos)}
.agt-out.warn{background:rgba(224,139,24,.14);color:var(--warn)}
.agt-out.blue{background:var(--blue-050);color:var(--blue);border-color:var(--blue)}
.agt-out.neg{background:rgba(209,72,58,.12);color:var(--neg)}
.agt-out.muted{background:var(--sunk);color:var(--ink-soft);border-color:var(--line)}
.agt-dry{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.agt-rules{white-space:nowrap}
/* an agent with nine rules wraps its chips rather than push the After column off the card */
.agt-reg td.agt-rules{white-space:normal;min-width:230px}
.agt-rule{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;border-radius:6px;padding:1px 6px;margin:0 3px 3px 0;border:1px solid var(--line);color:var(--ink-2);background:var(--card);cursor:help}
.agt-rule i{font-style:normal;font-weight:800;font-size:10.5px}
.agt-rule.s-pass i{color:var(--pos)}
.agt-rule.s-fail{border-color:var(--neg);color:var(--neg);background:rgba(209,72,58,.07)}
.agt-rule.s-warn{border-color:var(--warn);color:var(--warn);background:rgba(224,139,24,.08)}
.agt-rule.s-skip{color:var(--ink-soft);border-style:dashed}
.agt-rule.s-person{border-color:var(--blue);color:var(--blue);background:var(--blue-050)}
.agt-sumline{white-space:normal;font-size:12px}
.agt-reg tr.agt-row{cursor:pointer}
.agt-reg tr.o-approved td:first-child{box-shadow:inset 3px 0 var(--pos)}
.agt-reg tr.o-held td:first-child{box-shadow:inset 3px 0 var(--warn)}
.agt-reg tr.o-admin_held td:first-child{box-shadow:inset 3px 0 var(--neg)}
.agt-reg tr.o-would_approve td:first-child{box-shadow:inset 3px 0 var(--blue)}
.agt-reg tr.open td{background:var(--sunk)}
.agt-reg td.agt-ts{white-space:nowrap}
.agt-reg td.agt-kind{white-space:nowrap;font-size:12px;color:var(--ink-2)}
.agt-after{font-weight:700;text-transform:capitalize}
.agt-reg tr.agt-detail td{background:var(--sunk);padding:4px 16px 14px;white-space:normal}
.agt-sum{font-weight:600;margin:6px 0 10px;line-height:1.45}
.agt-why{border-left:2px solid var(--line);padding:2px 0 2px 10px;margin:0 0 10px}
.agt-why.s-fail{border-left-color:var(--neg)}.agt-why.s-person{border-left-color:var(--blue)}.agt-why.s-warn{border-left-color:var(--warn)}.agt-why.s-pass{border-left-color:var(--pos)}
.agt-why-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12.5px}
.agt-why-t{color:var(--ink-2);line-height:1.45}
.agt-fig{margin-top:6px;font-size:12px;max-width:980px}
.agt-reg .agt-fig th,.agt-reg .agt-fig td{padding:4px 8px !important;box-shadow:none !important}
.agt-fig-line{font-size:12px;color:var(--ink-2);margin-top:4px}
.agt-meta{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
.agt-set .agt-set-rule{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 10px;background:var(--card)}
.agt-num{display:flex;align-items:center;gap:6px}
.agt-num input{max-width:140px}
.agt-num span{font-size:12px;color:var(--ink-soft)}
.agt-modeseg button{cursor:pointer}
/* the agent's word on a document */
.agt-doc{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:10px;background:var(--card);padding:10px 14px;margin:0 0 12px;font-size:13px;line-height:1.5}
.agt-doc.ok{border-left-color:var(--pos)}
.agt-doc.info{border-left-color:var(--blue)}
.agt-doc-t{display:flex;gap:10px;align-items:flex-start;min-width:0;flex:1}
.agt-doc-rules{margin-top:6px}
.agt-doc-b{display:flex;gap:8px;flex-wrap:wrap}
.agt-doc .btn-ghost.danger{color:var(--neg);border-color:var(--neg)}
.agt-win{margin-top:4px;color:var(--ink-2)}
.agc-tag,.agt-doc-tag{flex:none;display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--blue);border-radius:5px;padding:2px 7px;margin-right:6px;vertical-align:1px}
/* the coach, above Save */
.agent-coach{margin:12px 0 0;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.5;background:var(--card)}
.agent-coach.idle{display:none}
.agent-coach.ok{color:var(--ink-soft);border-left:3px solid var(--pos)}
.agent-coach.warn{border-left:3px solid var(--warn);background:rgba(224,139,24,.05)}
.agent-coach .agc-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.agent-coach .agc-note{margin-left:auto;font-size:11px;color:var(--ink-soft)}
.agent-coach ul{margin:6px 0 0;padding-left:20px}
.agent-coach li{margin:2px 0}
.agent-coach ul.agc-info{list-style:none;padding-left:0;margin-top:6px;border-top:1px dashed var(--line);padding-top:6px;color:var(--ink-2);font-size:12.5px}
.apx-agent{font-size:11px;color:var(--ink-soft);max-width:300px;white-space:normal;margin-top:3px;line-height:1.35}
.apx-agent.held{color:var(--warn)}
.apx-agent.person{color:var(--blue)}
.apx-agent .agc-tag{font-size:8.5px;padding:1px 5px}
.agt-reg td.agt-amt,.agt-reg td .lnk.mono{white-space:nowrap}
.agt-reg td.agt-exp{white-space:nowrap;width:1%}
.agt-reg table.tbl th,.agt-reg table.tbl td{padding-left:9px;padding-right:9px}
@container intel (max-width:1300px){ .intel-kpis.agt-k7{grid-template-columns:repeat(4,minmax(0,1fr))} }
@container intel (max-width:1100px){ .agt-charts.g3>.agt-acc{grid-column:1 / -1} }
@container intel (max-width:760px){
  .agt-reg tr.agt-row{padding-right:56px}
  .agt-reg td.agt-exp{position:absolute;right:10px;top:8px;border:0;padding:0}
  .agt-reg tr.agt-detail{border:0;margin-top:-10px;padding:0 4px 8px}
  .agt-reg tr.agt-detail td{padding:6px 10px 10px !important}
  .agt-fig{display:block;overflow-x:auto}
  .agt-rules{white-space:normal}
  .agt-id-b{flex-wrap:wrap}
  .agt-date{flex:1 1 calc(50% - 8px)}
  .agt-date input{flex:1;min-width:0}
}
@container intel (max-width:600px){
  .intel-kpis.agt-k7{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agt-acc-b{flex-direction:column;align-items:flex-start}
  .agt-av{width:42px;height:42px;font-size:15px;border-radius:11px}
}
@container intel (max-width:600px){
  .agt-id-b{align-items:flex-start}
  .agt-who{flex:1 1 calc(100% - 58px)}
  .agt-ctl{margin-left:58px}
}

/* ===== WEIGHT CALCULATOR =====
   Shapes down the left, the piece in the middle, its weight on the right, the list underneath.
   THE PAGE MEASURES ITS OWN WIDTH (container queries), not the screen's: with the sidebar open a
   1440 laptop gives it barely 1150px, and three columns there crush the inputs. */
.wc{container-type:inline-size;container-name:wc}
.wc-grid{display:grid;gap:14px;grid-template-columns:212px minmax(0,1.45fr) minmax(300px,1fr);align-items:start;margin-bottom:14px}
.wc-pick{grid-row:span 2;display:grid;grid-template-columns:1fr;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:8px;min-width:0}
.wc-shape{display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ink);font-size:13px;font-weight:600;text-align:left;cursor:pointer;white-space:nowrap;min-width:0}
.wc-shape span{overflow:hidden;text-overflow:ellipsis}
.wc-shape svg{width:22px;height:22px;flex:none;color:var(--ink-soft)}
.wc-shape:hover{background:var(--sunk);border-color:var(--line)}
.wc-shape:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.wc-shape.on{background:var(--blue-050);border-color:var(--blue)}
.wc-shape.on svg{color:var(--blue)}
.wc-in,.wc-out,.wc-listwrap{min-width:0}
.wc-listwrap{grid-column:2 / -1}
.wc-in{container-type:inline-size;container-name:wcin}
.wc-formula{font-family:'JetBrains Mono',monospace;font-size:11px}
.wc-inb{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:18px;align-items:start}
.wc-fig{background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:8px;display:flex;justify-content:center}
.wc-svg{width:100%;max-width:260px;height:auto;display:block}
.wc-svg .s{fill:var(--blue-050);stroke:var(--blue);stroke-width:1.6;stroke-linejoin:round}
.wc-svg .s.top{fill:var(--card)}
.wc-svg .s.side{fill:var(--line)}
.wc-svg .h{fill:var(--sunk);stroke:var(--blue);stroke-width:1.6}
.wc-svg .d{stroke:var(--ink-soft);stroke-width:1}
.wc-svg .e{stroke:var(--ink-soft);stroke-width:.7;stroke-dasharray:2 2;fill:none;opacity:.8}
.wc-svg text{fill:var(--ink);font:700 11.5px 'JetBrains Mono',monospace;paint-order:stroke;stroke:var(--sunk);stroke-width:4px;stroke-linejoin:round}
.wc-form{min-width:0}
.wc-units{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:10px}
.wc-units label,.wc-lab{font-size:11.5px;font-weight:600;color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.wc-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:10px}
.wc-row .wc-lab{min-width:112px}
.wc .wc-sel{padding:6px 8px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);color:var(--ink);font-size:12.5px;max-width:100%;min-width:0}
.wc .wc-sel.wc-wide{flex:1 1 180px}
.wc-gauge{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 220px;min-width:0}
.wc-gauge .wc-sel{flex:1 1 120px}
/* A long list (gauges, sections, materials) becomes the app's searchable select; its wrapper takes
   the room the native control would have had. */
.wc-row>.ssel{flex:1 1 180px;width:auto;min-width:0}
.wc-gauge>.ssel{flex:1 1 150px;width:auto;min-width:0}
.wc-matf>.ssel{display:block;width:100%}
.wc .ssel-input{box-sizing:border-box;padding:7px 26px 7px 10px;font-size:12.5px;border:1px solid var(--line-strong);border-radius:8px;background-color:var(--card);color:var(--ink);box-shadow:none}
.wc .ssel-input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.wc-matf .ssel-input{padding-top:9px;padding-bottom:9px}
.wc-seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.wc-seg button{border:0;background:var(--card);color:var(--ink-soft);padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer}
.wc-seg button+button{border-left:1px solid var(--line-strong)}
.wc-seg button.on{background:var(--blue);color:#fff}
.wc-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px 12px}
.wc-f{min-width:0}
.wc-f label{display:flex;align-items:baseline;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-f label b{font-family:'JetBrains Mono',monospace;color:var(--blue);font-size:12px}
.wc-f label i{font-style:normal;font-weight:500;font-size:10.5px;opacity:.8}
.wc-inp{display:flex;align-items:stretch;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);overflow:hidden;transition:border-color .12s,box-shadow .12s}
.wc .wc-inp input{flex:1 1 auto;min-width:0;width:100%;border:0;background:transparent;padding:8px 9px;font:600 14px 'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;color:var(--ink);outline:0;box-shadow:none}
.wc-inp span{flex:none;display:flex;align-items:center;padding:0 8px;font-size:11px;color:var(--ink-soft);background:var(--sunk);border-left:1px solid var(--line);white-space:nowrap}
.wc-inp:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.wc-f.bad .wc-inp{border-color:var(--neg)}
.wc-err{font-size:11px;color:var(--neg);margin-top:3px;line-height:1.3}
.wc-err:empty{display:none}
.wc-hint{font-size:11px;color:var(--ink-soft);margin-top:6px;line-height:1.4}
.wc-hint:empty{display:none}
.wc-matrow{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:10px 12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.wc-matf .wc-sel{width:100%;padding:8px}
.wc-desc{font-size:13px;font-weight:600;margin-bottom:12px;line-height:1.4;overflow-wrap:anywhere}
.wc-big{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.wc-kg{background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:11px 12px;min-width:0}
.wc-kg.tot{background:var(--blue-050);border-color:var(--blue)}
.wc-kg .l{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-kg .v{font:700 26px 'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-kg .v small{font-size:13px;font-weight:500;color:var(--ink-soft)}
.wc-kg .s{font-size:11.5px;color:var(--ink-soft);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.wc-cost{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;margin-bottom:12px;font-size:12px;color:var(--ink-soft)}
.wc-cost b{font:700 18px 'JetBrains Mono',monospace;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.wc-rows{margin:0}
.wc-rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line)}
.wc-rows>div:last-child{border-bottom:0}
.wc-rows dt{font-size:12px;color:var(--ink-soft);white-space:nowrap}
.wc-rows dd{margin:0;font:600 13px 'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.wc-rows dd small{font-size:11px;font-weight:500;color:var(--ink-soft);margin-left:4px}
.wc-blocked{border:1px solid var(--neg);border-radius:8px;padding:10px 12px;font-size:12.5px;color:var(--neg);background:var(--sunk)}
.wc-add{display:flex;gap:8px;margin-top:14px}
.wc-add .btn-sm{flex:1}
.wc-listcard .intel-card-r{flex-wrap:wrap;justify-content:flex-end}
.wc .wc-del{color:var(--neg)}
.wc-empty{font-size:13px;color:var(--ink-soft);padding:6px 0;line-height:1.5}
.wc-tblwrap{overflow-x:auto;margin:-14px -16px 0}
.wc table.wc-list td,.wc table.wc-list th{padding:9px 12px;white-space:nowrap}
.wc table.wc-list td.num{font-family:'JetBrains Mono',monospace;color:var(--ink-soft)}
.wc table.wc-list td.wc-size{font-family:'JetBrains Mono',monospace;font-size:12.5px}
.wc table.wc-list tr.wc-editing td{background:var(--blue-050)}
.wc table.wc-list td.wc-acts{text-align:right}
.wc-sum{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:flex-end;padding-top:12px;margin-top:4px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-soft)}
.wc-sum b{font:700 16px 'JetBrains Mono',monospace;color:var(--ink);font-variant-numeric:tabular-nums}
/* The item form's weight section: its readout sits in a quiet band under the sizes. */
.iw-out{margin:2px 0 6px;padding:8px 11px;background:var(--sunk);border:1px solid var(--line);border-radius:8px;font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.iw-out b{color:var(--ink);font-family:'JetBrains Mono',monospace}
.iw-out:empty{display:none}
@container wc (max-width:1240px){
  .wc-grid{grid-template-columns:minmax(0,1.35fr) minmax(290px,1fr)}
  .wc-pick{grid-column:1 / -1;grid-row:auto;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:4px}
  .wc-listwrap{grid-column:1 / -1}
}
@container wc (max-width:780px){
  .wc-grid{grid-template-columns:minmax(0,1fr)}
  .wc-pick{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
}
@container wc (max-width:420px){
  .wc-pick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wc-shape{font-size:12px;padding:6px 7px;gap:7px}
  .wc-kg .v{font-size:22px}
}
@container wcin (max-width:560px){
  .wc-inb{grid-template-columns:minmax(0,1fr)}
  .wc-fig .wc-svg{max-width:220px}
  .wc-matrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wc-matf{grid-column:1 / -1}
}

/* ===== COLLECTIONS =====
   The chase list is rows, not a table: on a laptop it is nine columns across, on a phone each
   customer folds into a card with the figure on the right — the same markup, measured against the
   page's own width like the rest of Intelligence. The drawer slides over the list from the right
   and never closes on a stray click beside it: a half-edited reminder is worth more than a shortcut. */
.intel-kpis.clx-k7{grid-template-columns:repeat(7,minmax(0,1fr))}
.clx-kv-s{font-size:11px;font-weight:600;color:var(--ink-soft);letter-spacing:0}
.clx-charts{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.clx-agecard .intel-barrow{grid-template-columns:minmax(0,1fr) minmax(56px,45%) 74px}
.clx-agefoot{margin:10px 0 0;font-size:11.5px}
.clx-listcard .intel-card-b{padding:0}
.clx-q{padding:6px 10px;font-size:12.5px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);color:var(--ink);width:230px;max-width:46vw}
.clx-chan{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line);font-size:11.5px;background:var(--sunk)}
.clx-chan-h{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.clx-chan .on{color:var(--pos);font-weight:600}.clx-chan .off{color:var(--ink-soft)}
.clx-hidden{padding:8px 16px;font-size:12px;color:var(--ink-2);border-bottom:1px solid var(--line);border-left:3px solid var(--warn)}
.clx-row{display:grid;grid-template-columns:30px minmax(170px,1.6fr) minmax(130px,1fr) minmax(104px,.8fr) minmax(84px,.6fr) minmax(112px,.8fr) minmax(112px,.8fr) minmax(92px,.7fr) 76px;
  gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);font-size:12.5px;min-width:0}
.clx-row>span{min-width:0}
.clx-row:not(.clx-head){cursor:pointer;transition:background .1s}
.clx-row:not(.clx-head):hover{background:var(--sunk)}
.clx-row:not(.clx-head):focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.clx-row.on{background:var(--blue-050);box-shadow:inset 3px 0 var(--blue)}
.clx-head{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding-top:8px;padding-bottom:8px;background:var(--head)}
.clx-row .c-rank{color:var(--ink-soft);font-size:11.5px}
.clx-row .c-name b{font-size:13px}
.clx-row .c-amt b{font-size:14px}
.clx-code{font-size:10.5px;color:var(--ink-soft);font-weight:400}
.clx-sub{font-size:11px;color:var(--ink-soft);margin-top:2px;line-height:1.35;overflow:hidden;text-overflow:ellipsis}
.clx-flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.clx-chip{display:inline-block;font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 8px;white-space:nowrap;border:1px solid transparent;background:var(--sunk);color:var(--ink-2)}
.clx-chip.pos{background:rgba(31,157,99,.13);color:var(--pos)}
.clx-chip.warn{background:rgba(224,139,24,.15);color:var(--warn)}
.clx-chip.neg{background:rgba(209,72,58,.12);color:var(--neg)}
.clx-chip.blue{background:var(--blue-050);color:var(--blue);border-color:var(--blue)}
.clx-chip.muted{background:var(--sunk);color:var(--ink-soft);border-color:var(--line)}
.clx-age{display:flex;height:5px;border-radius:3px;overflow:hidden;background:var(--line);margin-top:5px;max-width:150px}
.clx-age i{display:block;height:100%}
.clx-days{font-weight:700}
.clx-days.d1{color:var(--warn)}.clx-days.d2{color:#e0701a}.clx-days.d3,.clx-days.d4{color:var(--neg)}
.clx-tone{display:inline-block;font-size:11.5px;font-weight:700;color:var(--blue);white-space:nowrap}
.clx-tone.t-firm{color:#e0701a}.clx-tone.t-final{color:var(--neg)}
[data-theme="dark"] .clx-days.d2,[data-theme="dark"] .clx-tone.t-firm{color:#f0954a}
/* the drawer */
.clx-scrim{position:fixed;inset:0;background:rgba(14,22,38,.28);z-index:64}
.clx-drawer{position:fixed;top:0;right:0;bottom:0;width:min(760px,100vw);background:var(--paper);border-left:1px solid var(--line-strong);
  box-shadow:-12px 0 36px rgba(14,22,38,.18);overflow-y:auto;overscroll-behavior:contain;animation:clxIn .16s ease-out;z-index:65}
@keyframes clxIn{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.clx-dh{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 18px 12px;background:var(--card);border-bottom:1px solid var(--line)}
.clx-dh h3{margin:0;font-size:17px}
.clx-dh .x{background:none;border:0;font-size:26px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:0 4px}
.clx-dh .x:hover{color:var(--neg)}
.clx-db{padding:14px 18px 24px}
.clx-figs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:10px}
.clx-fig{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 10px;min-width:0}
.clx-fig .k{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.clx-fig .v{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clx-fig .f{font-size:11px;color:var(--ink-soft);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clx-fig.neg .v{color:var(--neg)}.clx-fig.warn .v{color:var(--warn)}
.clx-alert{border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:8px;padding:8px 12px;font-size:12.5px;background:var(--card);margin-bottom:8px}
.clx-why{font-size:12px;color:var(--ink-2);margin:0 0 6px}
.clx-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin-top:12px}
.clx-sec h4{margin:0 0 10px;font-size:13px}
.clx-dctl{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px 12px;align-items:end;margin-bottom:8px}
.clx-dctl label,.clx-dto label,.clx-pform label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--ink-soft);min-width:0}
.clx-dctl select,.clx-dctl input,.clx-dto input,.clx-pform input{padding:6px 8px;font-size:12.5px;border:1px solid var(--line-strong);border-radius:7px;background:var(--card);color:var(--ink);min-width:0;width:100%;box-sizing:border-box}
.clx-txt{display:block;width:100%;box-sizing:border-box;font:13px/1.55 'Segoe UI',system-ui,sans-serif;padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);color:var(--ink);resize:vertical;margin-top:4px}
.clx-txt[hidden]{display:none}
.clx-txt.ur{font-family:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq','Noto Naskh Arabic','Segoe UI',serif;font-size:15px;line-height:2.1;direction:rtl;text-align:right}
.clx-dto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin-top:8px}
.clx-dact{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.clx-dact button[disabled]{opacity:.55;cursor:not-allowed}
.clx-wa{background:#1f9d63;border-color:#1f9d63}
.clx-dnote{font-size:11.5px;color:var(--ink-soft);margin-top:8px}
.clx-dnote.ok{color:var(--pos)}.clx-dnote.warn{color:var(--warn)}.clx-dnote.bad{color:var(--neg)}
.clx-prow{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:10px;align-items:start;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.clx-pform{display:grid;grid-template-columns:130px 150px minmax(0,1fr) auto;gap:8px;align-items:end;margin-top:10px}
.clx-tblwrap{overflow-x:auto}
.clx-tbl{font-size:12.5px}
.clx-explain{font-size:12.5px;line-height:1.55;margin:0 0 10px;color:var(--ink-2)}
.clx-hist .intel-barrow{grid-template-columns:96px minmax(56px,1fr) 82px}
.clx-subh{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:12px 0 4px}
.clx-tl{border-left:2px solid var(--line);margin-left:4px;padding-left:12px}
.clx-tli{position:relative;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:12px;padding:3px 0}
.clx-tli .dot{position:absolute;left:-17px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--pos)}
.clx-log{font-size:12px}
.clx-logi{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:10px;padding:5px 0;border-bottom:1px solid var(--line)}
.clx-logi.k-promise{color:var(--ink-2)}
.clx-dfoot{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
[data-theme="dark"] .clx-scrim{background:rgba(0,0,0,.5)}
[data-theme="dark"] .clx-drawer{box-shadow:-12px 0 36px rgba(0,0,0,.55)}
@container intel (max-width:1300px){
  .intel-kpis.clx-k7{grid-template-columns:repeat(4,minmax(0,1fr))}
  .clx-row{grid-template-columns:28px minmax(160px,1.6fr) minmax(120px,1fr) minmax(100px,.8fr) minmax(104px,.8fr) minmax(104px,.8fr) 70px}
  .clx-row .c-paid,.clx-row .c-rem{display:none}
}
@container intel (max-width:900px){ .clx-charts{grid-template-columns:minmax(0,1fr)} }
@container intel (max-width:760px){
  .intel-kpis.clx-k7{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clx-head{display:none}
  .clx-row{grid-template-columns:24px minmax(0,1fr) auto;gap:4px 10px;padding:12px 14px}
  .clx-row .c-rank{grid-row:1 / span 4;align-self:start;padding-top:2px}
  .clx-row .c-name{grid-column:2;grid-row:1}
  .clx-row .c-amt{grid-column:3;grid-row:1;text-align:right}
  .clx-row .c-amt .clx-age{margin-left:auto}
  .clx-row .c-old,.clx-row .c-pred,.clx-row .c-prom{grid-column:2 / -1;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
  .clx-row .c-old .clx-sub,.clx-row .c-pred .clx-sub,.clx-row .c-prom .clx-sub{margin-top:0}
  .clx-row .c-old::before{content:"Oldest";font-size:10px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
  .clx-row .c-pred::before{content:"Predicted";font-size:10px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
  .clx-row .c-prom::before{content:"Promise";font-size:10px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
  .clx-row .c-go{display:none}
  .clx-listcard .intel-card-h{flex-wrap:wrap}
  .clx-listcard .intel-card-r{flex:1 1 100%}
  .clx-q{width:100%;max-width:none}
}
@media (max-width:700px){
  .clx-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clx-dctl{grid-template-columns:1fr 1fr}
  .clx-dctl label.wide{grid-column:1 / -1}
  .clx-dto{grid-template-columns:minmax(0,1fr)}
  .clx-pform{grid-template-columns:1fr 1fr}
  .clx-pform label.wide,.clx-pform button{grid-column:1 / -1}
  .clx-db{padding:12px 12px 24px}
}

/* ===== ANOMALY WATCH & ATTENDANCE WATCH — the two watchers under Intelligence =====
   Tiles, the three cards, then the Auditor's own register table; the evidence opens in a drawer
   over the right edge (the whole screen on a phone) so the list stays where it was. */
.intel-kpis.anw-k6{grid-template-columns:repeat(6,minmax(0,1fr))}
.anw-mid .intel-card{min-width:0}
.anw-chips span{white-space:normal}
.anw-note{margin-top:10px;font-size:12px;line-height:1.45}
.anw-last{margin-top:10px;font-size:11.5px}
.anw-limits{margin:0;padding-left:18px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.anw-limits li{margin:0 0 6px}
.anw-seg{max-width:100%;overflow-x:auto;align-self:flex-start}
.anw-seg button{white-space:nowrap;cursor:pointer}
.anw-regt tr.anw-row{cursor:pointer}
.anw-regt tr.anw-row.cur td{background:var(--blue-050)}
.anw-regt tr.sev-low td:first-child{box-shadow:inset 3px 0 var(--line-strong)}
.anw-st{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:9px;padding:1px 7px;white-space:nowrap;background:var(--line);color:var(--ink-2)}
.anw-st.s-new{background:var(--blue-050);color:var(--blue)}
.anw-st.s-open{background:rgba(224,139,24,.15);color:var(--warn)}
.anw-st.s-resolved{background:rgba(31,157,99,.13);color:var(--pos)}
.intel-tile .k-val small{font-size:12px;font-weight:600;color:var(--ink-soft);margin-left:3px}
.wd-overlay{position:fixed;inset:0;z-index:1200;background:rgba(10,14,20,0);transition:background .18s;display:flex;justify-content:flex-end}
.wd-overlay.in{background:rgba(10,14,20,.38)}
.wd-drawer{width:min(640px,100%);height:100%;background:var(--card);color:var(--ink);border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(0,0,0,.18);display:flex;flex-direction:column;transform:translateX(24px);opacity:0;transition:transform .18s,opacity .18s;outline:0}
.wd-overlay.in .wd-drawer{transform:none;opacity:1}
.wd-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid var(--line);background:var(--head)}
.wd-head-t{min-width:0}
.wd-kicker{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.wd-head h3{margin:0;font-size:16px;line-height:1.35;font-weight:700;letter-spacing:-.01em}
.wd-x{flex:none;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);border-radius:8px;width:32px;height:32px;font-size:20px;line-height:1;cursor:pointer}
.wd-x:hover{border-color:var(--blue);color:var(--blue)}
.wd-body{flex:1;overflow:auto;padding:14px 18px 18px}
.wd-foot{border-top:1px solid var(--line);padding:12px 18px;display:flex;flex-direction:column;gap:10px;background:var(--sunk)}
.wd-foot .intel-ask{align-self:flex-start;font-weight:700}
.wd-chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.wd-type{font-size:12px;font-weight:600;color:var(--ink-2)}
.wd-detail{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.wd-note{font-size:12.5px;font-style:italic;color:var(--ink-2);margin:0 0 12px}
.wd-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0 0 14px}
.wd-facts div{border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--sunk);min-width:0}
.wd-facts dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.wd-facts dd{margin:2px 0 0;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--ink);overflow-wrap:anywhere}
.wd-sub{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin:6px 0 6px}
.wd-tbl{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
.wd-tbl table.tbl{margin:0;font-size:12.5px}
.wd-tbl table.tbl th,.wd-tbl table.tbl td{padding:6px 9px;white-space:nowrap}
.wd-tbl table.tbl td:last-child{white-space:normal;min-width:150px}
.wd-rule{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.wd-rule input{flex:1 1 220px;min-width:0;padding:7px 10px;font-size:12.5px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);color:var(--ink)}
.wd-people{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.wd-person{display:inline-flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;padding:5px 10px;background:var(--sunk);font-size:12.5px}
.wd-person .hint{font-size:11px}
.wd-caveat{margin-top:14px;font-size:12px;color:var(--ink-soft);border-left:3px solid var(--blue);padding:4px 0 4px 10px}
.atw-dept .intel-barrow.act{cursor:pointer;border-radius:6px}
.atw-dept .intel-barrow.act:hover,.atw-dept .intel-barrow.on{background:var(--blue-050)}
@container intel (max-width:1300px){ .intel-kpis.anw-k6{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container intel (max-width:600px){ .intel-kpis.anw-k6{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .wd-drawer{width:100%;border-left:0}
  .wd-head{padding:12px 14px 10px}
  .wd-body{padding:12px 14px 14px}
  .wd-foot{padding:10px 14px}
}

/* ---- Delivery Promise (97-promise.js) and Yield & Scrap (97-yield.js) ----
   THE SAME FAMILY AS THE AGENTS PAGE: figures first, then one divided page. Promise puts the
   orders on the left and the floor (station load, the what-if) on the right; the drawer is the one
   overlay, because an order's timeline is read beside the list, not instead of it. Every width
   below is the page's own (container intel), not the screen's. */
.intel-kpis.dp-k5,.intel-kpis.ys-k5{grid-template-columns:repeat(5,minmax(0,1fr))}
.dp-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(330px,1fr);gap:14px;align-items:start;margin-bottom:14px}
.dp-left,.dp-side{min-width:0;display:flex;flex-direction:column;gap:14px}
.dp-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;border-radius:999px;padding:2px 9px;white-space:nowrap;border:1px solid transparent}
.dp-chip.neg{color:var(--neg);background:rgba(209,72,58,.10);border-color:rgba(209,72,58,.28)}
.dp-chip.warn{color:var(--warn);background:rgba(224,139,24,.11);border-color:rgba(224,139,24,.30)}
.dp-chip.pos{color:var(--pos);background:rgba(31,157,99,.11);border-color:rgba(31,157,99,.28)}
.dp-chip.muted{color:var(--ink-soft);background:var(--sunk);border-color:var(--line)}
.dp-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:5px;padding:1px 5px;vertical-align:1px}
.dp-why{font-size:11.5px;color:var(--warn);margin-top:3px;line-height:1.35;max-width:260px}
.dp-reg tr.dp-row{cursor:pointer}
.dp-reg tr.dp-row:focus-visible td{background:var(--blue-050);outline:0}
.dp-reg tr.dp-row.open td{background:var(--blue-050)}
.dp-reg td .lnk.mono{padding-left:0}
.dp-filters{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
.dp-filters .seg{align-self:center}
.dp-filters .seg button{padding:7px 12px}
.dp-filters .aud-fsel{flex:1 1 220px;justify-content:flex-end}
.dp-load .intel-barrow{grid-template-columns:minmax(0,1fr) minmax(56px,34%) 50px}
.dp-load .intel-barrow .nm{white-space:normal;display:flex;flex-direction:column;line-height:1.25}
.dp-load .intel-barrow .nm b{font-weight:600}
.dp-how{font-size:11px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-load .intel-barrow.dp-bneck{background:rgba(224,139,24,.08);border-radius:6px;padding:4px 6px;margin:0 -6px}
.dp-foot{font-size:11.5px;line-height:1.5;margin:4px 2px 18px;max-width:1100px}
/* the what-if */
.dp-wif{display:flex;flex-direction:column;gap:8px}
.dp-wif .field{margin:0}
.dp-wif select,.dp-wif input{width:100%;box-sizing:border-box}
.dp-wif select{padding:10px 12px;border:1px solid var(--line-strong);border-radius:9px;font-size:14px;background:var(--card);color:var(--ink)}
.dp-wif select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.dp-wirow{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:8px}
.dp-wif .btn-sm{align-self:flex-start}
.dp-ans{display:flex;gap:12px;align-items:center;margin:14px 0 10px;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--sunk);font-size:12.5px;line-height:1.45}
.dp-ans-w{flex:none;font-weight:800;font-size:20px;letter-spacing:-.01em;min-width:44px}
.dp-ans.yes{border-color:rgba(31,157,99,.35);background:rgba(31,157,99,.07)}.dp-ans.yes .dp-ans-w{color:var(--pos)}
.dp-ans.no{border-color:rgba(209,72,58,.32);background:rgba(209,72,58,.06)}.dp-ans.no .dp-ans-w{color:var(--neg)}
table.tbl.dp-wiload{margin-bottom:8px}
.dp-sugg{margin:6px 0 4px}
.dp-sugg-h{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.dp-sg{display:flex;gap:9px;align-items:flex-start;padding:7px 9px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px;font-size:12.5px;line-height:1.45}
.dp-sg.ok{border-color:rgba(31,157,99,.4)}
.dp-sg-i{flex:none;width:18px;text-align:center}
.dp-wiacts{margin:6px 0 10px}
.dp-wi .intel-ai{box-shadow:none;margin-top:4px}
.dp-wi .intel-ai .intel-ai-b{min-height:0}
/* the drawer */
.dp-drawer-bg{position:fixed;inset:0;background:rgba(10,16,26,.38);z-index:880;animation:dpFade .12s ease-out}
.dp-drawer{position:fixed;top:0;right:0;bottom:0;width:min(620px,100vw);background:var(--card);border-left:1px solid var(--line);box-shadow:-12px 0 40px rgba(0,0,0,.18);z-index:881;display:flex;flex-direction:column;animation:dpSlide .16s ease-out}
@keyframes dpFade{from{opacity:0}to{opacity:1}}
@keyframes dpSlide{from{transform:translateX(24px)}to{transform:none}}
.dp-dh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--head)}
.dp-dref{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dp-x{font-size:18px;line-height:1;padding:4px 8px}
.dp-db{padding:14px 18px 22px;overflow-y:auto;flex:1;container-type:inline-size;container-name:dpd}
.dp-dates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.dp-dates>div{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--sunk);min-width:0}
.dp-dates span{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.dp-dates b{display:block;font-size:14px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-reasons{border-left:3px solid var(--warn);background:rgba(224,139,24,.07);border-radius:6px;padding:8px 10px;font-size:12.5px;line-height:1.45;margin-bottom:12px}
table.tbl.dp-lines{margin-bottom:14px}
.dp-job{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.dp-jh{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.dp-jr{display:flex;gap:12px;align-items:center;font-size:12.5px;flex-wrap:wrap}
.dp-gantt{font-size:12px}
.dp-gaxis,.dp-trow{display:grid;grid-template-columns:118px 46px minmax(0,1fr) 58px;gap:8px;align-items:center}
.dp-gaxis{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.dp-ax{display:flex;justify-content:space-between;gap:6px}
.dp-ax-t{color:var(--neg)}
.dp-trow{padding:4px 0;border-top:1px dashed var(--line)}
.dp-tl{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.dp-tl b{font-weight:600}
.dp-tl span{font-size:10.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-tprog{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.dp-tprog i{display:block;height:100%;background:var(--pos)}
.dp-track{position:relative;height:16px;border-radius:4px;background:var(--sunk);border:1px solid var(--line)}
.dp-gbar{position:absolute;top:2px;bottom:2px;border-radius:3px;background:var(--blue)}
.dp-gbar.bn{background:var(--warn)}
.dp-target{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px dashed var(--neg);z-index:1}
.dp-tdone{position:absolute;left:6px;top:0;font-size:10.5px;color:var(--pos);line-height:14px}
.dp-trow.done .dp-tl b{color:var(--ink-soft)}
.dp-tf{text-align:right;font-size:11px;white-space:nowrap}
.dp-dacts{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px}
.dp-dacts .lnk.mono{font-family:inherit}
@container dpd (max-width:480px){
  .dp-dates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dp-gaxis,.dp-trow{grid-template-columns:86px minmax(0,1fr) 52px}
  .dp-gaxis>span:nth-child(2),.dp-tprog{display:none}
}
/* Yield & Scrap */
.ys-of{font-size:13px;color:var(--ink-soft);font-weight:600}
.ys-charts{margin-bottom:14px}
.ys-worst{margin-bottom:14px}
.ys-reg td.r{white-space:nowrap}
.ys-reg td.ys-why{min-width:260px;max-width:460px;font-size:12px;line-height:1.45}
.ys-reg td.ys-why>div+div{margin-top:3px}
.ys-save{margin-top:6px;padding:6px 8px;border-radius:7px;background:rgba(31,157,99,.08);border:1px solid rgba(31,157,99,.25)}
.ys-save b{color:var(--pos);margin-right:4px}
.ys-reg tr.ys-has td:first-child{box-shadow:inset 3px 0 var(--pos)}
.ys-lower{align-items:start}
.ys-reuse-h{font-size:12.5px;margin-bottom:10px;color:var(--ink-2)}
.ys-rb{border-top:1px solid var(--line);padding:9px 0}
.ys-rb:first-of-type{border-top:0}
.ys-rb-h{display:flex;gap:10px;align-items:flex-start}
.ys-rb-h>div{flex:1;min-width:0}
.ys-rb-h .hint{font-size:11.5px;margin-top:2px}
.ys-rb-kg{flex:none;font-size:12px;color:var(--ink-soft);padding-top:2px}
.ys-rb-list{margin-top:8px;overflow-x:auto}
.ys-by-wrap{overflow-x:auto}
.ys-seg button{padding:5px 10px;font-size:11.5px}
.ys-notes{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.ys-note{border-left:3px solid var(--warn);background:rgba(224,139,24,.07);border-radius:6px;padding:8px 12px;font-size:12.5px}
@container intel (max-width:1180px){
  .dp-grid{grid-template-columns:minmax(0,1fr)}
  .dp-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
@container intel (max-width:1100px){
  .intel-kpis.dp-k5,.intel-kpis.ys-k5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ys-lower{grid-template-columns:minmax(0,1fr)}
  .ys-charts.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ys-charts.g3>:last-child{grid-column:1 / -1}
}
@container intel (max-width:820px){
  .dp-side{display:flex}
  .ys-charts.g2,.ys-charts.g3{grid-template-columns:minmax(0,1fr)}
}
@container intel (max-width:760px){
  .dp-why{max-width:none}
  .ys-reg td.ys-why{min-width:0;max-width:none;padding-top:6px}
  .ys-reg td.ys-why::before{display:block;margin-bottom:2px}
  .ys-reg tr.ys-has{border-left:3px solid var(--pos)}
  .ys-reg tr.ys-has td:first-child{box-shadow:none}
}
@container intel (max-width:600px){
  .intel-kpis.dp-k5,.intel-kpis.ys-k5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dp-filters .seg{display:flex;flex-wrap:wrap}
  .dp-filters .seg button{flex:1 1 auto;padding:7px 8px}
  .dp-wirow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ===== Employee import · data gaps · bulk edit (71-hr-people.js) ===== */
.ei-top{display:flex;align-items:center;gap:14px;margin:0 0 12px;flex-wrap:wrap}
.ei-top .ei-title{flex:1 1 320px;min-width:0}
.ei-top .ei-title h3{margin:0;font-size:17px}
.ei-top .ei-acts{display:flex;gap:8px;flex-wrap:wrap}
.ei-wrap{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:14px;align-items:start}
.ei-side{position:sticky;top:10px;margin:0}
.ei-side textarea{width:100%;font-family:'JetBrains Mono',monospace;font-size:11.5px;resize:vertical;box-sizing:border-box}
.ei-step{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.ei-step:last-child{border-bottom:0}
.ei-sn{flex:0 0 24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
.ei-btns{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.ei-main{min-width:0}
.ei-main .section,.ei-sec{margin-top:0}
.ei-sec + .ei-sec{margin-top:14px}
.ei-sh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line)}
.ei-sh h3{margin:0;font-size:14px;flex:1 1 auto}
.ei-seg button{padding:6px 10px;font-size:12px}
.ei-seg button b{font-family:'JetBrains Mono',monospace;margin-left:3px}
.ei-tbl td{vertical-align:top}
.ei-tbl tr[data-kind="problem"] td{background:rgba(209,72,58,.05)}
.ei-tbl tr[data-kind="duplicate"] td{background:rgba(224,139,24,.07)}
.ei-tbl tr.ei-decided td{background:rgba(31,157,99,.06)}
.ei-ch{list-style:none;margin:0;padding:0;font-size:12.5px}
.ei-ch li{margin:1px 0;display:grid;grid-template-columns:104px minmax(0,1fr);gap:8px;align-items:baseline}
.ei-tbl .badge{white-space:nowrap}
.ei-tbl td:nth-child(3){min-width:110px}
.ei-tbl td:nth-child(5){min-width:220px}
.ei-tbl td:nth-child(6){width:190px;min-width:170px}
.ei-f{color:var(--ink-soft);font-size:11.5px;margin-right:4px}
.ei-old{color:var(--ink-soft)}
.ei-new{color:var(--ink);overflow-wrap:anywhere}
.ei-prob{color:var(--neg);font-size:12px;margin-top:2px}
.ei-note{color:var(--warn);font-size:12px;margin-top:2px}
.ei-cand{font-size:12.5px;margin:2px 0}
.ei-dec{width:100%;max-width:186px;font-size:12px}
.ei-chip{display:inline-block;font-size:10.5px;line-height:1.5;padding:0 6px;margin:1px 3px 1px 0;border-radius:10px;background:var(--sunk);border:1px solid var(--line-strong);color:var(--ink-soft);white-space:nowrap}
.ei-chip.req{background:rgba(209,72,58,.08);border-color:rgba(209,72,58,.45);color:var(--neg)}
.ei-chip.more{border-style:dashed}
.ei-pct{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);margin-right:3px}
.ei-pct.ok{color:var(--pos)}
.ei-mcell{min-width:150px;max-width:260px}
.ei-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 12px}
.ei-gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.ei-gh{display:flex;flex-direction:column;margin-bottom:6px}
.ei-frow{display:grid;grid-template-columns:minmax(0,1fr) 90px 84px;gap:8px;align-items:center;width:100%;background:transparent;border:0;border-radius:6px;padding:6px;text-align:left;cursor:pointer;color:var(--ink);font:inherit;font-size:12.5px}
.ei-frow:hover{background:var(--sunk)}
.ei-frow.on{background:var(--blue-050);outline:1px solid var(--blue)}
.ei-frow.done{color:var(--ink-soft)}
.ei-fn{font-family:'JetBrains Mono',monospace;font-size:11px;text-align:right;white-space:nowrap}
.ei-bar{display:inline-block;height:6px;width:90px;border-radius:4px;background:var(--line);overflow:hidden;vertical-align:middle}
.ei-bar.wide{width:70px}
.ei-bar i{display:block;height:100%;background:var(--warn)}
.ei-bar.wide i{background:var(--pos)}
.ei-gate .toggle{font-size:13px}
.ei-gfields{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px}
.ei-gridbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ei-gridbar label{display:flex;gap:6px;align-items:center;font-size:12.5px}
.ei-fill{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);font-size:12.5px}
.ei-fill select,.ei-fill input{max-width:260px}
.ei-fill .ssel,.ei-gridbar .ssel{width:260px;max-width:100%}
.ei-gaps-pct{white-space:nowrap;min-width:120px}
.ei-gtbl td:nth-child(5){min-width:220px}
.ei-main .table-wrap,.ei-sh + .table-wrap,#tabBody .section > .table-wrap{overflow-x:auto}
.ei-grid td{vertical-align:middle}
.ei-grid select,.ei-grid input{width:100%;max-width:320px;box-sizing:border-box}
.ei-grid tr.ei-dirty td{background:rgba(0,124,196,.07)}
.ei-grid tr.ei-dirty select,.ei-grid tr.ei-dirty input{border-color:var(--blue)}
@media (max-width:1024px){
  .ei-wrap{grid-template-columns:minmax(0,1fr)}
  .ei-side{position:static}
  .ei-groups{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .ei-frow{grid-template-columns:minmax(0,1fr) 60px 70px}
  .ei-bar{width:60px}
  .ei-top .ei-acts{width:100%}
  .ei-gtbl,.ei-tbl,.ei-grid{min-width:680px}
}

/* ===== A VOUCHER AND THE DOCUMENT IT SETTLES (receipt ↔ invoice, payment ↔ bill) =====
   The form on the left, set in two columns; the invoice or bill on the right, live. Cancel and
   the primary action sit on the title bar (moved there by vdocChrome), so the page has one bar
   and no foot. The head keeps the .docpage-edit sticky rule and top:0 — the box clips its
   overflow, so an offset would only push the bar down over the first row. Tokens only, so the
   dark theme follows without a rule of its own. */
.docpage-edit.vdoc-page>.modal-head{gap:12px;flex-wrap:wrap}
.docpage-edit.vdoc-page>.modal-head h3{min-width:0;overflow:hidden;text-overflow:ellipsis}
.vdoc-acts{display:flex;gap:9px;align-items:center;margin-left:auto}
.vdoc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start}
.vdoc-form{min-width:0}
.vdoc-form .re-row{flex-wrap:wrap}
.vdoc-form .re-row>select,.vdoc-form .re-row>input{min-width:0}
.vdoc-form #rc_inv_box .tbl,.vdoc-form #pm_bill_box .tbl{width:100%}
.vdoc-form tr.vdoc-row{cursor:pointer}
.vdoc-form tr.vdoc-row:has(input[type=checkbox]:checked)>td{background:var(--blue-050)}
.vdoc-form tr.vdoc-row.vdoc-shown>td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
.vdoc-due{font-size:11px;color:var(--ink-soft);margin-top:2px;white-space:normal}
.vdoc-due>span{white-space:nowrap}
.vdoc-form .rc_al_amt,.vdoc-form .pm_al_amt{width:118px!important}
.vdoc-form .rc_adv_amt,.vdoc-form .pm_adv_amt{width:108px!important}
.vdoc-due .late{color:var(--neg);font-weight:600}
.vdoc-refcell{white-space:nowrap}
.vdoc-nowrap{white-space:nowrap}
.vdoc-form #rc_inv_box,.vdoc-form #pm_bill_box{overflow-x:auto}
.vdoc-panel{min-width:0}
.vdoc-empty{border:1.5px dashed var(--line-strong);border-radius:12px;padding:56px 24px;text-align:center;background:var(--sunk)}
.vdoc-empty-t{font-size:14px;font-weight:700;color:var(--ink-soft)}
.vdoc-card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.vdoc-msg{padding:22px 18px}
.vdoc-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--head)}
.vdoc-chips-t{font-size:11.5px;color:var(--ink-soft);margin-right:4px}
.vdoc-chip{border:1px solid var(--line-strong);background:var(--card);color:var(--ink-2);border-radius:999px;padding:3px 11px;font:600 11.5px 'JetBrains Mono',monospace;cursor:pointer}
.vdoc-chip:hover{border-color:var(--blue);color:var(--blue)}
.vdoc-chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.vdoc-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.vdoc-kind{font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vdoc-ref{display:flex;align-items:baseline;gap:10px;margin-top:3px}
.vdoc-ref .lnk{font-size:19px;font-weight:700;padding:0}
.vdoc-date{font-size:12.5px;color:var(--ink-soft)}
.vdoc-tot-top{text-align:right;white-space:nowrap}
.vdoc-tot-top small{display:block;font-size:11px;color:var(--ink-soft)}
.vdoc-tot-top b{font-size:17px}
.vdoc-meta{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px 18px;margin:0;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--sunk)}
.vdoc-meta dt{font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.vdoc-meta dd{margin:2px 0 0;font-size:12.5px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.vdoc-meta dd .lnk{padding:0;font-size:12.5px}
.vdoc-late{color:var(--neg)}
.vdoc-sec{font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding:14px 18px 6px}
.vdoc-lines-wrap{padding:0 18px;overflow-x:auto}
.vdoc-lines{width:100%;border-collapse:collapse;font-size:12.5px}
.vdoc-lines th{font-size:10.5px;font-weight:600;color:var(--ink-soft);text-align:left;padding:6px 0;border-bottom:1px solid var(--line)}
.vdoc-lines td{padding:7px 0;border-bottom:1px solid var(--line);vertical-align:top}
.vdoc-lines th.r,.vdoc-lines td.r{text-align:right;padding-left:12px;white-space:nowrap}
.vdoc-sku{font-size:11px;color:var(--ink-soft)}
.vdoc-tots{padding:6px 18px 4px;margin-left:auto;max-width:360px}
.vdoc-r{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:4px 0;font-size:12.5px}
.vdoc-r>span{min-width:0}
.vdoc-r small{display:block;font-size:11px;color:var(--ink-soft);font-weight:400}
.vdoc-r b{white-space:nowrap}
.vdoc-grand{border-top:1px solid var(--line-strong);margin-top:4px;padding-top:7px;font-weight:700}
.vdoc-sum{border-top:1px dashed var(--line);margin:4px 18px 0;padding-top:6px;color:var(--ink-soft)}
.vdoc-sec+.hint{padding:0 18px}
.vdoc-ev{display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:6px 18px;font-size:12.5px;border-bottom:1px solid var(--line)}
.vdoc-ev-k{color:var(--ink-soft);font-size:12px}
.vdoc-ev-ref{min-width:0}
.vdoc-ev-ref .lnk{padding:0}
.vdoc-ev-ref small{display:block;font-size:11px;color:var(--ink-soft)}
.vdoc-ev-ref>small:first-of-type{display:inline;margin-left:4px}
.vdoc-pend{margin:10px 18px 0;border:1px dashed var(--line-strong);border-radius:8px;overflow:hidden}
.vdoc-pend .vdoc-ev{padding:6px 10px;opacity:.8}
.vdoc-pend .vdoc-ev:last-child{border-bottom:0}
.vdoc-pend-t{font-size:11px;font-weight:600;color:var(--warn);padding:6px 10px 2px}
.vdoc-run{margin:14px 0 0;padding:12px 18px 16px;border-top:1px solid var(--line);background:var(--head)}
.vdoc-run .vdoc-r{font-size:13px}
.vdoc-this{color:var(--blue)}
.vdoc-this small{color:var(--ink-soft)}
.vdoc-after{border-top:1px solid var(--line-strong);margin-top:6px;padding-top:8px;font-size:15px!important;font-weight:700}
.vdoc-after.ok b{color:var(--pos)}
.vdoc-after.part b{color:var(--warn)}
.vdoc-after.over b{color:var(--neg)}
.vdoc-state{margin-top:8px;display:inline-block;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700}
.vdoc-state.ok{color:var(--pos);background:color-mix(in srgb,var(--pos) 14%,transparent)}
.vdoc-state.part{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.vdoc-state.over{color:var(--neg);background:color-mix(in srgb,var(--neg) 14%,transparent)}
/* the payment that settles no bill (PayDocPanel, 50g-payment-doc.js): an order's advance, a
   supplier's position, an expense head's month, a payment request — the same card, plus a bar
   for "how much of it", an info line, and the duplicate warning. */
.vdoc-bar{height:6px;border-radius:999px;background:var(--line);margin:8px 0 2px;overflow:hidden}
.vdoc-bar>i{display:block;height:100%;background:var(--blue);border-radius:inherit}
.vdoc-bar.over>i{background:var(--neg)}
.vdoc-info{margin-top:10px;font-size:12px;line-height:1.45;color:var(--ink-2);border-left:3px solid var(--blue);padding:4px 0 4px 10px}
.vdoc-info-top{margin:0;padding:9px 18px 9px 15px;background:var(--blue-050);border-bottom:1px solid var(--line)}
.vdoc-dup{margin:12px 18px 0;padding:9px 12px;border-radius:8px;font-size:12.5px;line-height:1.45;color:var(--ink);
  background:color-mix(in srgb,var(--warn) 13%,transparent);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
.vdoc-dup .lnk{padding:0}
.vdoc-run-flat{margin-top:0;border-top:0}
.vdoc-recv{display:block;font-size:11px;color:var(--ink-soft)}
.vdoc-refplain{font-size:19px;font-weight:700;color:var(--ink)}
/* a field a payment request has fixed (payee, account) reads as fixed, search box and all */
.vdoc-form .ssel-input:disabled{background-color:var(--sunk);color:var(--ink-soft);cursor:not-allowed}
@media (max-width:1100px){
  .vdoc-split{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .docpage-edit.vdoc-page .modal-body{padding:14px}
  .vdoc-acts{width:100%;justify-content:flex-end}
  .vdoc-form .form-grid{grid-template-columns:minmax(0,1fr)}
  .vdoc-form .rc_al_amt,.vdoc-form .pm_al_amt,.vdoc-form .rc_adv_amt,.vdoc-form .pm_adv_amt{width:84px!important;padding-left:6px;padding-right:6px}
  .vdoc-form td.vdoc-nowrap{white-space:normal}
  .vdoc-form #rc_inv_box .tbl th,.vdoc-form #rc_inv_box .tbl td,.vdoc-form #pm_bill_box .tbl th,.vdoc-form #pm_bill_box .tbl td{padding-left:6px;padding-right:6px}
  .vdoc-ev{grid-template-columns:minmax(0,1fr) auto}
  .vdoc-ev-k{grid-column:1/-1}
  .vdoc-hd{flex-wrap:wrap}
  .vdoc-tot-top{text-align:left}
}

/* ===== ACCESS PREVIEW — the checker page (admin) and the marks inside a preview frame ===== */
body.apv-open{overflow:hidden}
/* the page sits over the shell; its own dialogs (the Apply confirmation) and toasts sit over it */
.apv{position:fixed;inset:0;z-index:55;background:var(--paper);display:flex;flex-direction:column;
  --apv-add:#1f9d63;--apv-del:#d1483a;--apv-add-bg:rgba(31,157,99,.12);--apv-del-bg:rgba(209,72,58,.10)}
[data-theme="dark"] .apv{--apv-add:#34c684;--apv-del:#f0685a;--apv-add-bg:rgba(52,198,132,.14);--apv-del-bg:rgba(240,104,90,.14)}
.apv-top{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.apv-back{align-self:center}
.apv-title{display:flex;flex-direction:column;gap:2px;margin-right:6px;align-self:center}
.apv-title b{font-size:16px;letter-spacing:-.01em}
.apv-title .hint{font-size:11.5px;color:var(--ink-soft)}
.apv-ctl{display:flex;flex-direction:column;gap:4px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-family:'JetBrains Mono',monospace}
.apv-ctl select{min-width:180px;max-width:260px;padding:7px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card);color:var(--ink);font-size:13px;text-transform:none;letter-spacing:0;font-family:'Archivo',system-ui,sans-serif}
.apv-ctl .seg button{padding:7px 12px;text-transform:none;letter-spacing:0;font-family:'Archivo',system-ui,sans-serif}
.apv-status{margin-left:auto;align-self:center;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);white-space:nowrap}
.apv-narrow{background:#fff6e6;color:#8a5a00;padding:6px 16px;font-size:12.5px;border-bottom:1px solid var(--line)}
[data-theme="dark"] .apv-narrow{background:#2a2112;color:var(--warn)}
.apv-narrow[hidden]{display:none}
.apv-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(380px,28vw,520px)}
.apv-stage{position:relative;min-width:0;min-height:0;padding:12px;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;
  background:repeating-linear-gradient(45deg,transparent 0 14px,rgba(127,140,160,.05) 14px 28px)}
.apv-device{position:relative;overflow:hidden;border:1px solid var(--line-strong);border-radius:10px;background:var(--card);box-shadow:var(--shadow)}
.apv-device.phone{border:10px solid #1b2230;border-radius:34px;box-shadow:0 18px 40px rgba(14,22,38,.25)}
.apv-device iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:var(--paper);visibility:hidden}
.apv-device iframe.on{visibility:visible;z-index:1}
.apv-note{position:absolute;left:24px;right:24px;bottom:20px;z-index:3;background:var(--card);border:1px solid var(--line-strong);border-left:4px solid var(--warn);
  border-radius:9px;padding:10px 14px;font-size:13px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.apv-note[hidden]{display:none}
.apv-side{min-height:0;display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--card)}
.apv-who{padding:12px 16px;border-bottom:1px solid var(--line)}
.apv-who-name{font-size:15px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.apv-who .hint{font-size:12px;color:var(--ink-soft);margin-top:4px}
.apv-tree-head{display:flex;gap:8px;align-items:center;padding:10px 16px 8px}
.apv-tree-head .search{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;font-size:13px;background:var(--card);color:var(--ink)}
.apv-filter button{padding:6px 10px;font-size:12px}
.apv-tree{flex:1 1 0;min-height:160px;overflow:auto;padding:0 10px 10px}
.apv-sec{border:1px solid var(--line);border-radius:9px;margin:6px 0;background:var(--sunk)}
.apv-sec>summary{cursor:pointer;padding:8px 10px;font-weight:700;font-size:13px;display:flex;gap:8px;align-items:center;list-style:none}
.apv-sec>summary::-webkit-details-marker{display:none}
.apv-sec>summary::before{content:"▸";color:var(--ink-soft);transition:transform .15s}
.apv-sec[open]>summary::before{transform:rotate(90deg)}
.apv-tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);border:1px solid var(--line-strong);border-radius:999px;padding:1px 7px}
.apv-cnt{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;color:var(--blue)}
.apv-scr{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:7px 10px;border-top:1px solid var(--line);background:var(--card)}
.apv-scr.held .apv-scr-l{font-weight:600}
.apv-scr-l{font-size:12.5px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.apv-scr-l .mono{font-size:10px;color:var(--ink-soft)}
.apv-caps{display:flex;flex-wrap:wrap;gap:5px}
.apv-cap{position:relative;border:1px solid var(--line-strong);background:var(--card);color:var(--ink-soft);border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600;line-height:1.4}
.apv-cap:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.apv-cap.on{background:var(--blue-050);border-color:var(--blue);color:var(--blue)}
.apv-cap.add{background:var(--apv-add-bg);border-color:var(--apv-add);color:var(--apv-add)}
.apv-cap.del{background:var(--apv-del-bg);border-color:var(--apv-del);color:var(--apv-del);text-decoration:line-through}
.apv-cap.pos{border-style:dashed}
.apv-cap:disabled{cursor:not-allowed;opacity:.85}
.apv-mk{font-style:normal;font-size:9px;letter-spacing:.06em;text-transform:uppercase;margin-left:5px;font-family:'JetBrains Mono',monospace;text-decoration:none;display:inline-block}
.apv-changes{flex:0 1 auto;max-height:50%;min-height:70px;overflow:auto;border-top:1px solid var(--line);padding:10px 16px}
.apv-ch-head{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.apv-ch-grp{margin:6px 0 10px}
.apv-ch-t{font-weight:700;font-size:12.5px;margin-bottom:3px}
.apv-ch{font-size:12.5px;padding:3px 8px;border-radius:6px;margin:2px 0}
.apv-ch b{display:inline-block;width:12px}
.apv-ch.add{background:var(--apv-add-bg);color:var(--apv-add)}
.apv-ch.del{background:var(--apv-del-bg);color:var(--apv-del)}
.apv-ch .hint{color:var(--ink-soft);font-size:11px}
.apv-changes .hint{color:var(--ink-soft);font-size:12px}
.apv-actions{display:flex;justify-content:flex-end;gap:8px;padding:10px 16px;border-top:1px solid var(--line);background:var(--head)}
.apv-confirm{list-style:none;padding:0;margin:8px 0 0;max-height:46vh;overflow:auto}
.apv-confirm li{padding:5px 8px;border-radius:6px;margin:3px 0;font-size:13px}
.apv-confirm li.add{background:rgba(31,157,99,.12);color:var(--pos)}
.apv-confirm li.del{background:rgba(209,72,58,.10);color:var(--neg)}
.apv-confirm .hint{font-size:10.5px;color:var(--ink-soft)}
/* inside a preview frame */
.pv-banner{background:#fff4d6;color:#6b4a00;border-bottom:1px solid #f0d58a;padding:6px 18px;font-size:12.5px;text-align:center}
[data-theme="dark"] .pv-banner{background:#2d2410;color:#f2c35b;border-bottom-color:#4a3a14}
.pv-chip{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:#fff4d6;color:#6b4a00;border:1px solid #f0d58a;white-space:nowrap}
[data-theme="dark"] .pv-chip{background:#2d2410;color:#f2c35b;border-color:#4a3a14}
.pv-ended{display:grid;place-items:center;height:100vh;padding:16px}
.pv-ended-card{max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px 24px;box-shadow:var(--shadow);text-align:center}
.pv-ended-card p{color:var(--ink-soft);font-size:13.5px}
/* Set Attendance — Individual, and the dated exemptions (70b-hr-attendance.js) */
.ai-bar{flex-wrap:wrap;gap:8px}
.ai-step{display:inline-flex;gap:2px}
.ai-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 18px;padding:10px 12px;margin:6px 0 10px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.ai-who{min-width:0;flex:1 1 240px}
.ai-who .ai-code{color:var(--blue);font-weight:700;margin-right:4px}
.ai-month{font-weight:700;font-size:15px;white-space:nowrap}
.ai-flags{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.ai-scroll{max-width:100%;overflow-x:auto}
.tblscroll.ai-scroll>table.tbl.ai-grid{min-width:960px}
.ai-grid{font-size:12px}
table.tbl.ai-grid th,table.tbl.ai-grid td{padding:4px 6px;white-space:nowrap}
table.tbl.ai-grid th{letter-spacing:.04em;font-size:10px}
.ai-grid .ai-wd{color:var(--ink-soft);font-size:11px}
.ai-grid .ai-min{font-size:10px;color:var(--ink-soft)}
.ai-grid td.c,.ai-grid th.c,.ai-tp td.c,.ai-tp th.c{text-align:center}
table.tbl.ai-grid input[type=time]{width:98px;min-width:0;padding:3px 2px}
table.tbl.ai-grid select{width:62px;min-width:0;padding:3px 2px}
table.tbl.ai-grid .ai-note{width:150px;min-width:0;padding:3px 6px}
table.tbl.ai-grid td.ai-rem{white-space:normal;width:160px}
.ai-grid .ai-xs{margin-top:2px}
.ai-grid td.ai-rem .hint{font-size:10.5px;line-height:1.3;margin-top:2px}
.ai-grid tr.ai-off td{background:var(--paper);color:var(--ink-soft)}
.ai-grid tr.ai-abs td:first-child{color:#b02a20;font-weight:700}
.ai-grid tr.ai-inc td:first-child{color:#9a6212;font-weight:700}
.ai-grid tr.ai-dirty td{background:#fff8e1}
[data-theme="dark"] .ai-grid tr.ai-dirty td{background:#2e2712}
.ai-grid tr.ai-punch td{background:var(--paper);padding:4px 10px}
.ai-grid tr.ai-tot td{font-weight:600;border-top:2px solid var(--line-strong)}
.ai-p{display:inline-block;margin-right:14px;font-size:11.5px}
.ai-pbtn{padding:1px 8px;font-size:11px}
.ai-xb{font-size:10px;padding:1px 6px}
.ai-sums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 6px}
.ai-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0;overflow-x:auto}
.ai-ct{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:6px}
.ai-kv{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px dashed var(--line);font-size:12.5px}
.ai-kv:last-child{border-bottom:0}
.ai-kv.warn b{color:#9a6212}
.ai-tp{font-size:11.5px;margin-bottom:6px;width:100%}
table.tbl.ai-tp th,table.tbl.ai-tp td{padding:3px 2px;letter-spacing:.02em}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.treg td.trx sup{color:var(--pos,#1b7a44);font-weight:700;margin-left:1px}
.ex-list td{vertical-align:top}
.ex-pick-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.ex-pick-bar input{flex:1 1 180px}
.ex-pick{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:var(--card)}
.field .ex-pick label.ex-pe{display:flex;align-items:center;gap:8px;padding:4px 0;margin:0;font-size:12.5px;font-weight:500;cursor:pointer;text-transform:none;letter-spacing:0}
.field .ex-pick label.ex-pe input[type=checkbox]{width:auto;min-width:0;height:auto;flex:none;margin:0;padding:0}
.field .ex-pick label.ex-pe[hidden]{display:none}
.tblscroll>table.tbl.ex-list{min-width:0}
table.tbl.ex-list th,table.tbl.ex-list td{padding:8px 10px}
table.tbl.ex-list td.mono{white-space:nowrap}
@media(max-width:760px){
  .ai-sums{grid-template-columns:1fr}
  .ai-bar label.inline{flex:1 1 100%}
  .ai-bar label.inline select,.ai-bar label.inline input{max-width:100%}
  .ai-month{font-size:14px}
}

/* ---- the settlement grid on the receipt / payment voucher (50e-settle-grid.js) ---- */
.sgrid-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 8px}
.sgrid-bar-hint{font-size:11.5px}
.sgrid-wrap{overflow-x:auto;max-width:100%}
table.tbl.sgrid{table-layout:fixed;width:100%;min-width:1040px}
table.tbl.sgrid td,table.tbl.sgrid th{padding:8px 6px}
table.tbl.sgrid .sgrid-wol{display:block;font-size:11px;font-weight:400;color:var(--ink-soft);margin:2px 0 0;white-space:normal;line-height:1.3;cursor:pointer;text-transform:none;letter-spacing:0;text-align:right}
table.tbl.sgrid td.sgrid-branch{max-width:118px;white-space:normal;font-size:12px}
table.tbl.sgrid th{white-space:nowrap;vertical-align:top;overflow:hidden;text-overflow:ellipsis}
table.tbl.sgrid th.sgrid-dedh small{text-transform:none;letter-spacing:0;font-weight:400;font-family:inherit}
table.tbl.sgrid td{vertical-align:top}
.sgrid input[type=number]{min-width:0;padding:6px 8px;font-size:12.5px;text-align:right}
.sgrid .sgrid-apply-all:disabled{opacity:.45}
.sgrid-err{font-size:10.5px;color:var(--neg);text-align:right;margin-top:2px;min-height:0}
/* what other vouchers already say about the document — muted under its reference; a pending one
   is the figure the warning counts */
.sgrid-claims{font-size:10.5px;color:var(--ink-soft);margin-top:2px;white-space:nowrap;font-family:inherit}
.sgrid-claims .pend{color:var(--warn,#b45309)}
.sgrid-warn{font-size:10.5px;color:var(--warn,#b45309);text-align:right;margin-top:2px;min-height:0;white-space:normal}
.sgrid-warn:empty{display:none}
.sgrid input.sgrid-bad{border-color:var(--neg);box-shadow:0 0 0 3px color-mix(in srgb,var(--neg) 16%,transparent)}
.sgrid .sgrid-wo{margin-top:3px}
.sgrid-wol{font-size:11px;color:var(--ink-soft);white-space:nowrap;cursor:pointer}
.sgrid-wol input{vertical-align:middle;margin:0 3px 0 0}
.sgrid .rc_al_left.ok,.sgrid .pm_al_left.ok{color:var(--pos)}
.sgrid .rc_al_left.over,.sgrid .pm_al_left.over{color:var(--neg)}
table.tbl.sgrid tfoot td{border-top:2px solid var(--line-strong);font-weight:700;background:var(--head);padding-top:8px;white-space:nowrap}
table.tbl.sgrid tfoot td.sgrid-tw{font-weight:500}
.sgrid-ok{color:var(--pos);font-weight:600}
/* THE DEDUCTIONS CELL: what was kept back on the row, one plain sentence per line with the base
   and section under it and the figure on the right; "+ deduction" opens the picker beneath */
table.tbl.sgrid td.sgrid-ded{white-space:normal;text-align:left}
.sgrid-ded .sgrid-err{text-align:left}
.sgrid-dl{list-style:none;margin:0;padding:0}
.sgrid-dline{display:flex;gap:8px;align-items:baseline;padding:2px 0}
.sgrid-dword{flex:1;min-width:0;font-size:12.5px;line-height:1.3;cursor:pointer}
.sgrid-dword:hover{color:var(--blue)}
.sgrid-dsub{display:block;font-size:11px;color:var(--ink-soft);white-space:normal}
.sgrid-damt{flex:none;width:96px;text-align:right;white-space:nowrap;font-size:12.5px;cursor:pointer}
.sgrid-damt.typed{color:var(--blue)}
.sgrid-dline.sgrid-bad .sgrid-damt{color:var(--neg);font-weight:600}
.sgrid-ddel{flex:none;color:var(--neg);background:none;border:0;cursor:pointer;font-size:12px;line-height:1;padding:0 2px;opacity:.7}
.sgrid-ddel:hover{opacity:1}
.sgrid-dnone{color:var(--ink-soft);font-style:italic;font-size:12px}
.sgrid-dtick{font-size:11.5px;color:var(--ink-soft)}
.sgrid-dadd{display:inline-block;margin-top:4px;color:var(--blue);background:transparent;border:1px dashed var(--line-strong);border-radius:6px;padding:3px 8px;font:inherit;font-size:11.5px;cursor:pointer}
.sgrid-dadd:hover{border-color:var(--blue)}
/* the picker: what was kept back, what it is measured on, the amount, Add — and the invoice's
   own split under it, so the On figure can be checked against the paper */
.sgrid-pick{margin-top:8px;border:1px solid var(--blue);border-radius:8px;background:var(--card,#fff);padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px 10px;align-items:end}
.sgrid-pf-what{grid-column:1/-1}
.sgrid-pick label{display:block;font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px}
.sgrid-pick select{width:100%;padding:6px 8px;font-size:12.5px;border:1px solid var(--line-strong);border-radius:6px;background:var(--card,#fff);color:var(--ink)}
.sgrid-pick input[type=number]{width:100%;box-sizing:border-box}
.sgrid-pick input.hand{border-color:var(--blue)}
.sgrid-pbtns{display:flex;gap:6px;align-items:center;white-space:nowrap}
.sgrid-pbtns .btn-sm{padding:7px 12px;font-size:12.5px}
.sgrid-pnote{grid-column:1/-1;font-size:11.5px;margin:0;white-space:normal}
.vdoc-r.vdoc-portion{font-size:11.5px;color:var(--ink-soft)}
/* the register: the document's cells once, its withholding lines beneath */
table.tbl.wh-reg tr.wh-more td{border-top:0;padding-top:0;color:var(--ink-soft)}
.wh-head{font-size:11px;font-weight:600;padding:1px 6px;border-radius:999px;white-space:nowrap}
.wh-head.it{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
.wh-head.st{background:color-mix(in srgb,var(--pos) 16%,transparent);color:var(--pos)}
/* the band across both halves (who paid, what for, the settlement grid) */
.vdoc-head{grid-column:1/-1;min-width:0}
.vdoc-head .re-row{flex-wrap:wrap}
.vdoc-head #rc_inv_box .tbl,.vdoc-head #pm_bill_box .tbl{width:100%}
.vdoc-head tr.vdoc-row{cursor:pointer}
.vdoc-head tr.vdoc-row:has(input[type=checkbox]:checked)>td{background:var(--blue-050)}
.vdoc-head tr.vdoc-row.vdoc-shown>td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
.vdoc-head #rc_inv_box,.vdoc-head #pm_bill_box{overflow-x:auto}
@media (max-width:560px){
  .vdoc-head .form-grid{grid-template-columns:minmax(0,1fr)}
}
/* ===== CONTROL ACCOUNT HUNTER (50h-control-hunter.js) ===== */
.hunter-head{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}
.hunter-head .kpi .k-val{font-variant-numeric:tabular-nums}
.hunter-head .kpi.bad .k-val{color:var(--neg)}
.hunter-head .kpi.good .k-val{color:var(--pos)}
.hunter-head .kpi.bad::before{background:var(--neg)}
.hunter-head .kpi.good::before{background:var(--pos)}
.hunter-wrap{overflow-x:auto}
.hunter-tbl{width:100%;table-layout:fixed}
.hunter-tbl td:first-child{white-space:normal}
.hunter-tbl .r{text-align:right}
.hunter-refs-tbl{width:100%;table-layout:fixed}
.hunter-refs-tbl th:nth-child(1),.hunter-refs-tbl td:nth-child(1){width:150px}
.hunter-refs-tbl th:nth-child(2),.hunter-refs-tbl td:nth-child(2){width:110px;white-space:nowrap}
.hunter-refs-tbl th:nth-child(4),.hunter-refs-tbl td:nth-child(4){width:140px}
.hunter-refs-tbl td:nth-child(3){white-space:normal}
.hunter-tbl tr.hunter-row{cursor:pointer}
.hunter-tbl tr.hunter-row.open>td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
.hunter-tbl tr.hunter-refs>td{background:var(--bg-soft,rgba(0,0,0,.03));padding:8px 12px 10px}
.hunter-tbl .hunter-fix{margin:0 0 8px;color:var(--warn)}
.hunter-tbl .hunter-tag{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.hunter-tbl .hunter-tag.ok{background:var(--pos-soft,rgba(40,160,90,.14));color:var(--pos)}
.hunter-tbl .hunter-tag.bad{background:var(--neg-soft,rgba(200,60,60,.14));color:var(--neg)}
.hunter-tbl tr.hunter-foot>td{border-top:2px solid var(--line-strong);font-weight:600}
.hunter-ledger-link{margin:0 0 8px}
@media (max-width:720px){.hunter-head{grid-template-columns:minmax(0,1fr)}}