/* ============================================================
   PrintCore ERP — corporate minimal theme
   Ink blue accent · paper-grey canvas · hairline borders ·
   IBM Plex Sans (UI) + IBM Plex Mono (document codes).
   ============================================================ */
:root {
  --ink: #1E4E8C; --ink-dark: #163A69; --ink-soft: #EAF0F8;
  --text: #1B2330; --muted: #64708A; --canvas: #F5F6F8; --surface: #FFFFFF;
  --line: #E4E7EE; --line-strong: #CBD2DE;
  --t-blue-bg:#E8F0FB; --t-blue:#1E4E8C; --t-green-bg:#E7F4EC; --t-green:#1D7A46;
  --t-amber-bg:#FBF2DF; --t-amber:#8A6410; --t-red-bg:#FBEAEA; --t-red:#A83232;
  --t-gray-bg:#EEF0F4; --t-gray:#5B6577;
  --cy:#00A3D9; --mg:#D6317F; --ye:#F0B400; --k:#1B2330;
  --radius:6px; --shadow:0 1px 2px rgba(20,30,50,.06),0 4px 14px rgba(20,30,50,.05);
  --font-ui:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --sidebar-w:236px; --aside-w:300px;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body { font-family:var(--font-ui); font-size:14px; color:var(--text); background:var(--canvas); -webkit-font-smoothing:antialiased; }
a { color:var(--ink); text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }

/* ---------- App frame ---------- */
.app { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; transition:grid-template-columns .18s; }
.app.aside-open { grid-template-columns:var(--sidebar-w) 1fr var(--aside-w); }

/* ---------- Sidebar ---------- */
.sidebar { background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; }
.brand { display:flex; align-items:center; gap:10px; padding:16px 18px 13px; border-bottom:1px solid var(--line); }
.brand-mark { display:grid; grid-template-columns:8px 8px; gap:3px; flex:none; }
.brand-mark i { width:8px; height:8px; border-radius:50%; display:block; }
.brand-mark i:nth-child(1){background:var(--cy);} .brand-mark i:nth-child(2){background:var(--mg);}
.brand-mark i:nth-child(3){background:var(--ye);} .brand-mark i:nth-child(4){background:var(--k);}
.brand-name { font-weight:600; letter-spacing:.2px; font-size:15px; }
.brand-name small { display:block; font-weight:400; color:var(--muted); font-size:10.5px; letter-spacing:.4px; }
.nav { padding:8px 10px 24px; }
.nav-group-label { font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); padding:14px 10px 5px; }
.nav a { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:var(--radius); color:var(--text); font-size:13.5px; margin-bottom:1px; }
.nav a svg { width:16px; height:16px; stroke:var(--muted); flex:none; }
.nav a:hover { background:var(--canvas); }
.nav a.active { background:var(--ink-soft); color:var(--ink); font-weight:600; }
.nav a.active svg { stroke:var(--ink); }
.nav a .phase2-tag { margin-left:auto; font-size:9px; background:var(--t-gray-bg); color:var(--t-gray); padding:1px 5px; border-radius:8px; font-weight:600; }

/* ---------- Main + topbar ---------- */
.main { display:flex; flex-direction:column; min-width:0; }
.topbar { display:flex; align-items:center; gap:12px; background:var(--surface); border-bottom:1px solid var(--line); padding:9px 20px; position:sticky; top:0; z-index:20; }
.topbar .search { flex:1; max-width:400px; position:relative; }
.topbar .search input { width:100%; padding:7px 12px 7px 32px; border:1px solid var(--line); border-radius:var(--radius); background:var(--canvas); font-size:13px; }
.topbar .search svg { position:absolute; left:9px; top:8px; width:15px; height:15px; stroke:var(--muted); }
.breadcrumb { font-size:12.5px; color:var(--muted); display:flex; gap:6px; align-items:center; }
.breadcrumb b { color:var(--text); font-weight:600; }
.spacer { flex:1; }
.icon-btn { border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:6px 8px; display:inline-flex; position:relative; }
.icon-btn svg { width:16px; height:16px; stroke:var(--muted); }
.icon-btn:hover svg { stroke:var(--ink); }
.icon-btn .dot { position:absolute; top:3px; right:3px; width:7px; height:7px; background:var(--t-red); border-radius:50%; }
.lang-switch { display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.lang-switch button { border:0; background:var(--surface); padding:5px 11px; font-size:12px; font-weight:600; color:var(--muted); }
.lang-switch button.on { background:var(--ink); color:#fff; }
.user-chip { display:flex; align-items:center; gap:8px; font-size:13px; }
.user-chip .avatar { width:28px; height:28px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:600; }
.user-chip small { color:var(--muted); display:block; font-size:11px; }

/* ---------- Page ---------- */
.page { padding:16px 18px; width:100%; margin:0; }
/* Narrow content (Phase-2 placeholders, empty states) still reads better centred. */
.page > .phase2, .page > .empty { max-width:900px; margin-left:auto; margin-right:auto; }
.page-head { display:flex; align-items:flex-end; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.page-head h1 { font-size:19px; margin:0; font-weight:600; }
.page-head p { margin:2px 0 0; color:var(--muted); font-size:13px; }
.page-head .actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Tabs (sub-workspaces) ---------- */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px; flex-wrap:wrap; }
.tabs button { border:0; background:none; padding:9px 14px; font-size:13.5px; color:var(--muted); border-bottom:2px solid transparent; font-weight:500; }
.tabs button.on { color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }
.tabs button:hover { color:var(--text); }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-strong); background:var(--surface); color:var(--text); border-radius:var(--radius); padding:7px 13px; font-size:13px; font-weight:500; }
.btn:hover { border-color:var(--ink); color:var(--ink); }
.btn.primary { background:var(--ink); border-color:var(--ink); color:#fff; }
.btn.primary:hover { background:var(--ink-dark); }
.btn.danger { color:var(--t-red); }
.btn.sm { padding:4px 10px; font-size:12px; }

/* ---------- KPI ---------- */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:11px; margin-bottom:16px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow); cursor:pointer; }
.kpi:hover { border-color:var(--line-strong); }
.kpi .label { font-size:11.5px; color:var(--muted); }
.kpi .value { font-size:20px; font-weight:600; margin-top:3px; font-variant-numeric:tabular-nums; }
.kpi .value.warn { color:var(--t-amber); } .kpi .value.bad { color:var(--t-red); } .kpi .value.good { color:var(--t-green); }

/* ---------- Cards ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-head { display:flex; align-items:center; padding:11px 15px; border-bottom:1px solid var(--line); font-weight:600; font-size:13.5px; }
.card-head .right { margin-left:auto; font-weight:400; font-size:12.5px; }
.card-body { padding:15px; }
.grid-2 { display:grid; grid-template-columns:1.5fr 1fr; gap:14px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:980px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }

/* ---------- Toolbar ---------- */
.toolbar { display:flex; gap:9px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.toolbar input[type=search], .toolbar select { padding:7px 10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); font-size:13px; font-family:inherit; }
.toolbar input[type=search] { min-width:210px; }
.toolbar .count { color:var(--muted); font-size:12.5px; margin-left:auto; }

/* ---------- Table ---------- */
.table-wrap { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; font-size:12px; }
thead th { text-align:left; padding:7px 9px; font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); font-weight:600; border-bottom:1px solid var(--line); background:#FAFBFC; white-space:nowrap; cursor:pointer; user-select:none; }
thead th:hover { color:var(--ink); }
thead th.num { text-align:right; }
tbody td { padding:6px 9px; border-bottom:1px solid var(--line); vertical-align:middle;
  white-space:nowrap; }
/* Only free-text columns may wrap, and only past a sensible width. */
tbody td.wrapcell { white-space:normal; min-width:180px; max-width:340px; }
tbody tr:last-child td { border-bottom:0; }
tbody tr.clickable { cursor:pointer; }
tbody tr.clickable:hover { background:#F8FAFD; }
td.num { text-align:right; font-variant-numeric:tabular-nums; }
.mono { font-family:var(--font-mono); font-size:11px; color:var(--ink-dark); white-space:nowrap; }
.cell-sub { color:var(--muted); font-size:12px; }
.bell { width:15px; height:15px; stroke:var(--muted); cursor:pointer; }
.bell:hover { stroke:var(--ink); }

/* ---------- Badges & pills ---------- */
.badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; white-space:nowrap; }
.badge.blue{background:var(--t-blue-bg);color:var(--t-blue);} .badge.green{background:var(--t-green-bg);color:var(--t-green);}
.badge.amber{background:var(--t-amber-bg);color:var(--t-amber);} .badge.red{background:var(--t-red-bg);color:var(--t-red);}
.badge.gray{background:var(--t-gray-bg);color:var(--t-gray);}
.pill { display:inline-block; padding:1px 7px; border-radius:10px; font-size:10px; font-weight:600; background:var(--ink-soft); color:var(--ink); margin-left:5px; }
.pill.gps { background:#EAF3EC; color:#1D7A46; } .pill.cash { background:var(--t-amber-bg); color:var(--t-amber); }
.pill.locked { background:var(--t-gray-bg); color:var(--t-gray); }

/* ---------- Drawer (full-screen) ---------- */
.drawer-overlay { position:fixed; inset:0; background:rgba(20,28,45,.4); z-index:40; }
.drawer { position:fixed; top:0; right:0; height:100vh; width:min(640px,94vw); background:var(--surface); border-left:1px solid var(--line); box-shadow:-8px 0 30px rgba(15,25,45,.14); z-index:45; display:flex; flex-direction:column; animation:slideIn .18s ease-out; }
@keyframes slideIn { from{transform:translateX(30px);opacity:0;} to{transform:none;opacity:1;} }
.drawer-head { padding:15px 18px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:10px; }
.drawer-head .x { margin-left:auto; border:0; background:none; font-size:18px; color:var(--muted); }
.drawer-body { padding:16px 18px; overflow-y:auto; flex:1; }
.drawer-foot { padding:12px 18px; border-top:1px solid var(--line); display:flex; gap:8px; align-items:center; }
.drawer-foot .footmark { font-size:11px; color:var(--muted); margin-right:auto; }
.dtabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin:-4px -18px 14px; padding:0 18px; overflow-x:auto; }
.dtabs button { border:0; background:none; padding:8px 11px; font-size:12.5px; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap; }
.dtabs button.on { color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }
.dl { display:grid; grid-template-columns:150px 1fr; row-gap:9px; column-gap:12px; font-size:13px; }
.dl dt { color:var(--muted); } .dl dd { margin:0; }
.hint { margin-top:16px; padding:10px 12px; border:1px dashed var(--line-strong); border-radius:var(--radius); font-size:11.5px; color:var(--muted); background:#FBFCFE; }
.hint code { font-family:var(--font-mono); color:var(--ink-dark); }

/* ---------- Modal ---------- */
.overlay { position:fixed; inset:0; background:rgba(20,28,45,.45); display:grid; place-items:center; z-index:50; padding:20px; }
.modal { background:var(--surface); border-radius:8px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; box-shadow:0 18px 50px rgba(15,25,45,.25); }
.modal-head { display:flex; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); font-weight:600; }
.modal-head .x { margin-left:auto; border:0; background:none; font-size:18px; color:var(--muted); }
.modal-body { padding:18px; display:grid; gap:12px; }
.modal-foot { padding:13px 18px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:8px; }
.field label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:4px; }
.field input, .field select, .field textarea { width:100%; padding:8px 10px; border:1px solid var(--line-strong); border-radius:var(--radius); font-size:13px; font-family:inherit; background:var(--surface); }
.field textarea { resize:vertical; min-height:66px; }
.field .req { color:var(--t-red); }

/* ---------- Aside panel ---------- */
.aside { background:var(--surface); border-left:1px solid var(--line); position:sticky; top:0; height:100vh; overflow-y:auto; display:none; }
.app.aside-open .aside { display:block; }
.aside-head { padding:13px 16px; border-bottom:1px solid var(--line); font-weight:600; font-size:14px; display:flex; align-items:center; }
.aside-head .x { margin-left:auto; border:0; background:none; color:var(--muted); font-size:16px; }
.aside-tabs { display:flex; border-bottom:1px solid var(--line); }
.aside-tabs button { flex:1; border:0; background:none; padding:8px 4px; font-size:11.5px; color:var(--muted); border-bottom:2px solid transparent; }
.aside-tabs button.on { color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }
.aside-body { padding:14px 16px; }
.aside-item { padding:9px 0; border-bottom:1px solid var(--line); font-size:12.5px; }
.aside-item:last-child { border-bottom:0; }
.aside-item .when { color:var(--muted); font-size:11px; margin-top:2px; }
.aside-metric { display:flex; justify-content:space-between; font-size:12px; padding:5px 0; }
.aside-metric b { font-variant-numeric:tabular-nums; }

/* ---------- Charts ---------- */
.bars { display:flex; align-items:flex-end; gap:12px; height:140px; padding:6px 4px 0; }
.bars .bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; height:100%; justify-content:flex-end; }
.bars .bar b { width:100%; max-width:40px; background:var(--ink); border-radius:3px 3px 0 0; min-height:4px; opacity:.88; }
.bars .bar:last-child b { background:var(--ink-dark); opacity:1; }
.bars .bar span { font-size:10.5px; color:var(--muted); }
.bars .bar em { font-style:normal; font-size:10.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.plbar { display:flex; flex-direction:column; gap:10px; }
.plbar .row { display:flex; align-items:center; gap:10px; font-size:12.5px; }
.plbar .row .name { width:70px; } .plbar .row .track { flex:1; height:20px; background:var(--canvas); border-radius:4px; overflow:hidden; position:relative; }
.plbar .row .fill { height:100%; background:var(--ink); }
.plbar .row .fill.neg { background:var(--t-red); }
.plbar .row .val { width:80px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }

/* ---------- Operations action buttons ---------- */
.op-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:9px; margin-bottom:16px; }
.op-btn { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); font-size:12px; font-weight:500; text-align:center; box-shadow:var(--shadow); }
.op-btn:hover { border-color:var(--ink); color:var(--ink); }
.op-btn svg { width:20px; height:20px; stroke:var(--ink); }

/* ---------- Roles matrix ---------- */
.matrix td, .matrix th { text-align:center; }
.matrix td:first-child, .matrix th:first-child { text-align:left; }
.matrix .yes { color:var(--t-green); font-weight:700; }
.matrix .no { color:var(--line-strong); }
.matrix tbody tr { cursor:default; }

/* ---------- Empty / toast / phase2 ---------- */
.empty { padding:44px; text-align:center; color:var(--muted); }
.phase2 { padding:56px 24px; text-align:center; }
.phase2 .p2mark { font-size:34px; margin-bottom:8px; }
.phase2 h2 { margin:0 0 6px; font-size:18px; }
.phase2 p { color:var(--muted); max-width:440px; margin:0 auto; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--text); color:#fff; padding:9px 16px; border-radius:var(--radius); font-size:13px; z-index:60; box-shadow:var(--shadow); }

/* ---------- Notifications dropdown ---------- */
.dropdown { position:absolute; top:44px; right:16px; width:300px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 40px rgba(15,25,45,.18); z-index:55; }
.dropdown-head { padding:11px 14px; border-bottom:1px solid var(--line); font-weight:600; font-size:13px; display:flex; }
.dropdown-head a { margin-left:auto; font-size:11.5px; font-weight:400; }
.dropdown-item { padding:10px 14px; border-bottom:1px solid var(--line); font-size:12.5px; }
.dropdown-item:last-child { border-bottom:0; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .app,.app.aside-open { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:-260px; width:250px; transition:left .2s; z-index:60; }
  .sidebar.open { left:0; box-shadow:0 0 40px rgba(0,0,0,.25); }
  .aside { position:fixed; right:0; width:290px; z-index:55; }
  .menu-btn { display:inline-flex!important; }
}
.menu-btn { display:none; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

/* ============================================================
   DETAIL LAYER — drawer tabs, forms, hubs, analytics, settings
   Corporate minimal: same ink-blue accent, paper-grey canvas,
   no new colours introduced.
   ============================================================ */

/* --- detail tables inside drawers --- */
.dt table { font-size: 12.5px; }
.dt th { white-space: nowrap; }
.dsec { margin-bottom: 18px; }
.dsec h4 { font-size: 13px; font-weight: 600; margin: 0 0 8px; color: var(--ink, #1E4E8C); letter-spacing: .01em; }
.dnote { font-size: 12px; color: #5b6472; margin: 8px 0 0; line-height: 1.5; }
.dnote.warn { color: #8a5a00; }
.hint.anchor { margin-top: 14px; }
tr.row-bad td { background: #fdf3f3; }
.empty.sm { padding: 10px; font-size: 12px; }

/* --- original-status chain --- */
.chain { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chain-step { font-size: 11.5px; padding: 4px 10px; border-radius: 12px; background: #eef0f4; color: #7b8492; white-space: nowrap; }
.chain-step.on { background: #1E4E8C; color: #fff; }
.chain i { color: #b9c0cb; font-style: normal; }

/* --- ticket thread --- */
.thread-item { border-left: 2px solid #e3e6ec; padding: 8px 0 8px 12px; margin-bottom: 10px; }
.thread-item.vis { border-left-color: #1E4E8C; }
.thread-meta { font-size: 11.5px; color: #6b7482; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.thread-body { font-size: 13px; margin-top: 4px; }

/* --- forms --- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; margin-bottom: 14px; }
.modal.wide { max-width: 940px; width: calc(100vw - 48px); }
.lines-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 8px; }
.lines-head strong { font-size: 13px; }
#opTable input { width: 100%; font-size: 12.5px; padding: 4px 6px; }
.chk { display: flex; gap: 7px; align-items: center; font-size: 13px; margin: 8px 0; }
.seg { display: inline-flex; border: 1px solid #dfe3ea; border-radius: 6px; overflow: hidden; margin-bottom: 14px; }
.seg button { background: #fff; border: 0; padding: 7px 16px; font: inherit; font-size: 13px; cursor: pointer; color: #5b6472; }
.seg button.on { background: #1E4E8C; color: #fff; }

/* --- call-centre intake --- */
.hit-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.hit { text-align: left; background: #fff; border: 1px solid #e3e6ec; border-radius: 6px; padding: 8px 12px; cursor: pointer; font: inherit; }
.hit:hover { border-color: #1E4E8C; }
.hit strong { display: block; font-size: 13px; }
.hit span { font-size: 11.5px; color: #6b7482; }
.ctx { border-top: 1px solid #e9ecf1; padding-top: 12px; margin-top: 12px; }
.ctx-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.ctx-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ctx-cols h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #7b8492; margin: 0 0 6px; }
.ctx-row { font-size: 12.5px; padding: 3px 0; border-bottom: 1px solid #f2f4f7; }

/* --- hub board --- */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.board-col { background: #f5f6f8; border-radius: 8px; padding: 10px; }
.board-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #5b6472;
              display: flex; justify-content: space-between; margin-bottom: 8px; }
.card-mini { background: #fff; border: 1px solid #e6e9ef; border-radius: 6px; padding: 8px 10px; margin-bottom: 7px; }
.card-mini .mono { font-size: 11px; color: #7b8492; }
.cm-title { font-size: 12.5px; margin: 3px 0; }
.cm-meta { font-size: 11px; color: #6b7482; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }

/* --- analytics bars --- */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 34px; gap: 8px; align-items: center; font-size: 12px; }
.bar-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5b6472; }
.bar { background: #eef0f4; border-radius: 3px; height: 8px; display: block; }
.bar i { display: block; height: 8px; border-radius: 3px; background: #1E4E8C; }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; color: #5b6472; }

/* --- chips (calendar, role preview) --- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { font-size: 12px; padding: 5px 11px; border-radius: 14px; background: #eef0f4; color: #5b6472; display: inline-flex; gap: 6px; align-items: center; }
.chip.on { background: #e8eef7; color: #1E4E8C; }
.chip.off { background: #f5f6f8; color: #a8b0bc; text-decoration: line-through; }

/* --- kpi strip --- */
.kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.kpi { background: #fff; border: 1px solid #e6e9ef; border-radius: 8px; padding: 10px 16px; min-width: 130px; }
.kpi span { display: block; font-size: 11.5px; color: #7b8492; }
.kpi strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.kpi.bad strong { color: #b4232a; }

/* --- translation editor --- */
#trBody input { width: 100%; font-size: 12.5px; padding: 4px 6px; border: 1px solid #e3e6ec; border-radius: 4px; }
#trBody input:focus { border-color: #1E4E8C; outline: none; }

/* --- contract nesting tree --- */
.tree { font-size: 12.5px; }
.tree-root { padding: 8px 10px; background: #eef2f8; border-radius: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tree-branch { margin: 10px 0 0 18px; border-left: 2px solid #e3e6ec; padding-left: 14px; }
.tree-type { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: #7b8492; margin-bottom: 5px; display: flex; gap: 6px; align-items: center; }
.tree-type .count { background: #eef0f4; border-radius: 9px; padding: 0 7px; font-size: 11px; }
.tree-leaf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid #f2f4f7; }
.tree-date { color: #7b8492; font-size: 11.5px; }
.tree-note { color: #7b8492; font-size: 11.5px; font-style: italic; }

/* --- sidebar sub-items --- */
.subnav { display: flex; flex-direction: column; margin: 2px 0 6px 34px; border-left: 1px solid #dfe3ea; }
.subnav a { padding: 5px 10px; font-size: 12.5px; color: #5b6472; text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; }
.subnav a:hover { color: #1E4E8C; }
.subnav a.active { color: #1E4E8C; border-left-color: #1E4E8C; font-weight: 500; }

/* --- cross-pill jump --- */
.pill.jump { cursor: pointer; background: #e8eef7; color: #1E4E8C; }
.pill.jump:hover { background: #1E4E8C; color: #fff; }

/* ===== UI-enhancement pass (Abdul review 19.07) ===== */

/* --- sortable / filterable table headers --- */
table.sortable thead th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
table.sortable thead th[data-sort]:hover{background:#eef2f7}
table.sortable thead th .arw{font-style:normal;font-size:9px;margin-left:5px;color:#9aa5b4;vertical-align:1px}
table.sortable thead th.sorted{color:var(--ink);background:#eaf0f8}
table.sortable thead th.sorted .arw{color:var(--ink)}
tr.filter-row td{padding:3px 6px !important;background:#fafbfc;border-bottom:1px solid var(--line)}
input.colf{width:100%;min-width:60px;border:1px solid var(--line);border-radius:3px;padding:3px 6px;
  font:inherit;font-size:11.5px;background:#fff;color:var(--text)}
input.colf:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 2px rgba(30,78,140,.10)}
.daterange{display:inline-flex;align-items:center;gap:5px}
.daterange input{border:1px solid var(--line);border-radius:4px;padding:4px 6px;font:inherit;font-size:12px}
.daterange span{color:var(--muted)}

/* --- column picker --- */
.colpick{position:relative;display:inline-block}
.colmenu{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:60;background:#fff;
  border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 24px rgba(20,30,50,.14);
  padding:8px;min-width:190px;max-height:320px;overflow:auto}
.colmenu.open{display:block}
.colmenu label{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:4px;
  font-size:12.5px;cursor:pointer;white-space:nowrap}
.colmenu label:hover{background:var(--canvas)}

/* --- two-step drawer --- */
.drawer-expand{padding:6px 20px;border-top:1px solid var(--line);background:#fff;text-align:right}
.drawer.wide{width:calc(100vw - 232px);max-width:calc(100vw - 232px)}
@media (max-width:900px){.drawer.wide{width:100vw;max-width:100vw}}

/* --- dashboard grid + widgets --- */
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.dash-w{min-width:0}
.dash-w.full{grid-column:1 / -1}
.dash-grid.editing .dash-w{outline:1px dashed #c6d0dd;border-radius:8px;padding:4px;cursor:grab}
.dash-w.dragging{opacity:.45}
.dash-w.dragover{outline:2px solid var(--ink)}
.drag-handle{font-size:11px;color:var(--muted);padding:2px 6px 5px;letter-spacing:.02em}
.widget-picker{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;
  padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:8px}
.widget-picker .chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  padding:4px 10px;border:1px solid var(--line);border-radius:20px;cursor:pointer}
.widget-picker .chip.on{background:#eaf0f8;border-color:#c3d3e8}
.widget-picker .chip.off{opacity:.55}
@media (max-width:1100px){.dash-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.dash-grid{grid-template-columns:1fr}}

/* --- revenue chart --- */
.chart{display:flex;align-items:flex-end;gap:14px;height:190px;padding:12px 4px 0}
.cbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.cbar em{font-style:normal;font-size:11px;color:var(--muted);margin-bottom:5px;font-variant-numeric:tabular-nums}
.cbar b{width:100%;max-width:44px;background:linear-gradient(180deg,#3a6db0,var(--ink));
  border-radius:3px 3px 0 0;min-height:4px;transition:height .25s ease}
.cbar:hover b{background:linear-gradient(180deg,#4d80c4,#255fa8)}
.cbar span{font-size:11px;color:var(--muted);margin-top:7px;white-space:nowrap}

/* --- editable child tables --- */
.lines-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 8px}
.lines-head strong{font-size:12.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
td.actcol{white-space:nowrap;width:64px;text-align:right}
button.ic{border:1px solid var(--line);background:#fff;border-radius:4px;width:24px;height:24px;
  line-height:1;cursor:pointer;color:var(--muted);font-size:12px;margin-left:3px}
button.ic:hover{border-color:var(--ink);color:var(--ink)}
button.ic.danger:hover{border-color:var(--t-red);color:var(--t-red)}

/* --- collapsible contract tree --- */
.tree{margin-bottom:10px;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#fff}
.tree-root{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 12px;background:#f7f9fc;
  border-bottom:1px solid var(--line)}
.tree-root.collapsible{cursor:pointer;user-select:none}
.tree-root.collapsible:hover{background:#eef3f9}
.tree-root .tw{color:var(--muted);font-size:11px;width:12px}
.tree-root .count{margin-left:auto;font-size:11px;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:1px 8px}
.tree-kids{padding:2px 0}
.tree-leaf{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:7px 12px 7px 34px;
  border-bottom:1px solid #f0f3f7;font-size:12.5px}
.tree-leaf:last-child{border-bottom:0}
.tree-date{color:var(--muted);font-size:11.5px}
.tree-note{color:var(--muted);font-size:11.5px;font-style:italic}
.empty.sm{padding:10px 34px;font-size:12px;color:var(--muted)}

/* --- misc --- */
.toolbar.sub{border:0;background:transparent;padding:0 0 10px;box-shadow:none}
label.chk{display:flex;gap:7px;align-items:center;font-size:12.5px;cursor:pointer}
label.chk.sm{font-size:12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:12px}
.seg button{border:0;background:#fff;padding:6px 14px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--ink);color:#fff}
.dnote.warn{color:var(--t-red)}
a.lnk{color:var(--ink);text-decoration:none;border-bottom:1px dotted currentColor}
a.lnk:hover{border-bottom-style:solid}
.kpis{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.kpis .kpi{flex:1;min-width:120px;background:#f7f9fc;border:1px solid var(--line);border-radius:7px;padding:9px 12px}
.kpis .kpi span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.kpis .kpi strong{font-size:17px;font-variant-numeric:tabular-nums}

/* ===== Session 1: density, badges, abbreviations ===== */

/* --- business-line abbreviation pills: one character, saves a column of width --- */
.blx{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
  border-radius:50%;font-size:10px;font-weight:700;letter-spacing:0;line-height:1;
  border:1px solid transparent;vertical-align:middle}
.blx + .blx{margin-left:3px}
.blx.p{background:#e7effa;color:#1E4E8C;border-color:#c6d9f2}   /* Printer */
.blx.g{background:#e6f6ee;color:#116b43;border-color:#bfe6d2}   /* GPS */
.blx.a{background:#f0eefb;color:#4b3fa8;border-color:#d8d2f2}   /* Admin */

/* --- movement class: single character, colour carries the meaning --- */
.mvx{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;font-size:10.5px;font-weight:700;line-height:1;border:1px solid transparent}
.mvx.a{background:#e6f6ee;color:#116b43;border-color:#bfe6d2}   /* fast */
.mvx.d{background:#fdeaea;color:#a3221f;border-color:#f5c9c7}   /* dead */
.mvx.s{background:#fdf3e0;color:#8a5a08;border-color:#f2ddb4}   /* slow */

/* --- ledger badges: R official (gold) / QR cash (green), used app-wide --- */
.led{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:11px;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;border:1px solid transparent;white-space:nowrap}
.led.r{background:#fdf5e3;color:#8a6508;border-color:#efdcae}
.led.qr{background:#e8f6ee;color:#116b43;border-color:#c2e6d3}
.led + .led{margin-left:3px}

/* --- header filter selects (replacing free-text boxes) --- */
select.colf{width:100%;min-width:64px;max-width:150px;border:1px solid var(--line);border-radius:3px;
  padding:2px 4px;font:inherit;font-size:11px;background:#fff;color:var(--text);cursor:pointer}
select.colf:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 2px rgba(30,78,140,.10)}
select.colf.set{border-color:var(--ink);background:#f4f8fd;font-weight:600}

/* --- Myzone panel --- */
.mz-head{padding:12px 16px;border-bottom:1px solid var(--line);background:#fafbfc}
.mz-date{font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.mz-sub{font-size:12px;color:var(--muted);margin-top:2px}
.mz-clock{font-variant-numeric:tabular-nums;font-size:26px;font-weight:300;letter-spacing:-.02em;
  color:var(--ink);margin-top:6px;line-height:1}
/* Icon tabs — five of them fit a narrow panel without scrolling. */
.mz-tabs{display:flex;padding:6px 8px 0;border-bottom:1px solid var(--line);background:#fafbfc}
.mz-tabs button{flex:1;position:relative;border:0;background:transparent;padding:7px 0 8px;
  cursor:pointer;border-bottom:2px solid transparent;display:flex;align-items:center;justify-content:center}
.mz-tabs button:hover{background:#f1f4f8}
.mz-tabs button.on{border-bottom-color:var(--ink)}
.mzi{width:17px;height:17px;stroke:var(--muted);fill:none}
.mz-tabs button.on .mzi{stroke:var(--ink)}
.mzb{position:absolute;top:2px;right:calc(50% - 15px);min-width:14px;height:14px;padding:0 3px;
  border-radius:8px;background:var(--t-red);color:#fff;font-size:9px;font-weight:700;font-style:normal;
  display:flex;align-items:center;justify-content:center;line-height:1}
.mz-label{padding:7px 16px 0;font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.mz-body{padding:12px 14px;overflow-y:auto;flex:1}
.cal{width:100%;border-collapse:collapse;font-size:11.5px;table-layout:fixed}
.cal th{padding:4px 0;text-align:center;font-size:10px;color:var(--muted);text-transform:uppercase;
  border:0;background:transparent;letter-spacing:.04em}
.cal td{padding:0;text-align:center;border:0;white-space:normal}
.cal .d{position:relative;height:29px;display:flex;align-items:center;justify-content:center;
  border-radius:5px;cursor:default}
.cal .d.today{background:var(--ink);color:#fff;font-weight:700}
.cal .d.has{background:#eaf0f8;font-weight:600;cursor:pointer}
.cal .d.out{color:#c3cbd6}
.cal .dot{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;
  border-radius:50%;background:var(--t-red)}
.cal .d.today .dot{background:#fff}

/* ===== header column menu (replaces the filter row) ===== */
thead th[data-hmenu]{position:relative;cursor:pointer;user-select:none}
thead th[data-hmenu]:hover{background:#eef2f7}
thead th .hlabel{vertical-align:middle}
thead th .arw{font-style:normal;font-size:8px;margin-left:4px;color:#b3bcc9;vertical-align:middle}
thead th .arw.on{color:var(--ink);font-size:9px}
thead th:hover .arw{color:var(--ink)}
thead th.filtered{background:#eaf0f8;color:var(--ink)}
thead th .fdot{font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  min-width:14px;height:14px;padding:0 3px;margin-left:4px;border-radius:7px;background:var(--ink);
  color:#fff;font-size:9px;font-weight:700;vertical-align:middle;line-height:1}

/* Fixed-position portal: the menu lives on <body>, so a short table or a
   table inside a scroll container can never clip it. */
.hmenu{position:fixed;z-index:400;min-width:210px;max-width:280px;
  background:#fff;border:1px solid var(--line);border-radius:6px;
  box-shadow:0 10px 30px rgba(20,30,50,.16);padding:5px;cursor:default;
  text-transform:none;letter-spacing:0;font-weight:400}
.hm-item{display:block;width:100%;text-align:left;border:0;background:transparent;padding:6px 9px;
  border-radius:4px;font:inherit;font-size:12px;color:var(--text);cursor:pointer}
.hm-item:hover{background:var(--canvas)}
.hm-sep{height:1px;background:var(--line);margin:5px 2px}
.hm-search{padding:2px 3px 6px}
.hm-search input{width:100%;border:1px solid var(--line);border-radius:4px;padding:4px 7px;
  font:inherit;font-size:12px}
.hm-search input:focus{outline:none;border-color:var(--ink)}
.hm-list{max-height:210px;overflow-y:auto;padding:0 2px}
.hm-opt{display:flex;align-items:center;gap:7px;padding:4px 7px;border-radius:4px;font-size:12px;
  cursor:pointer;white-space:nowrap;overflow:hidden}
.hm-opt:hover{background:var(--canvas)}
.hm-opt span{overflow:hidden;text-overflow:ellipsis}
.hm-foot{display:flex;gap:6px;padding:7px 3px 2px;border-top:1px solid var(--line);margin-top:5px}
.hm-foot .btn{flex:1}

/* ===== Files ===== */
.fdrop{border:2px dashed #c8d3e0;border-radius:9px;background:#fafcfe;padding:18px;text-align:center;
  margin-bottom:12px;transition:border-color .15s,background .15s}
.fdrop.over{border-color:var(--ink);background:#eef4fc}
.fdrop-in{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.fdrop-in strong{font-size:13px;color:var(--text)}
.fdrop-in span{font-size:12px;color:var(--muted)}
.fstats{display:flex;gap:16px;font-size:11.5px;color:var(--muted);margin-bottom:12px;padding:0 2px}
.fstats span{white-space:nowrap}
.ffolder{margin-bottom:10px;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#fff}
.ffolder-head{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f7f9fc;
  border-bottom:1px solid var(--line);cursor:pointer;user-select:none;font-size:12.5px}
.ffolder-head:hover{background:#eef3f9}
.ffolder-head .tw{color:var(--muted);font-size:11px;width:12px}
.ffolder-head .count{margin-left:auto;font-size:11px;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:1px 8px}
.fkind{display:inline-flex;align-items:center;justify-content:center;width:34px;height:20px;
  border-radius:3px;font-size:9px;font-weight:700;letter-spacing:.04em;background:#eef2f7;
  color:#5b6879;border:1px solid #dde4ec}
.fkind.k-pdf{background:#fdeceb;color:#b3312b;border-color:#f6cbc8}
.fkind.k-jpg,.fkind.k-jpeg,.fkind.k-png{background:#eaf4ec;color:#276b41;border-color:#c9e4d3}
.fkind.k-xlsx,.fkind.k-xls{background:#e9f3ec;color:#1d6b3f;border-color:#c6e2d1}
.fkind.k-docx,.fkind.k-doc{background:#e9f0fa;color:#1E4E8C;border-color:#c9daf2}
.fkind.k-eml{background:#f3eefb;color:#5a3fa8;border-color:#ded2f4}

/* OneDrive mirror toggle */
.odtog{display:inline-flex;align-items:center;cursor:pointer}
.odtog input{position:absolute;opacity:0;width:0;height:0}
.odsw{width:30px;height:17px;border-radius:9px;background:#d5dce5;position:relative;transition:background .15s}
.odsw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.odtog input:checked + .odsw{background:#1E4E8C}
.odtog input:checked + .odsw::after{transform:translateX(13px)}

/* upload form rows */
.frow{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.frow:last-of-type{border-bottom:0}
.frow > .fkind{margin-top:20px;flex:0 0 34px}
.fgrid{flex:1;display:grid;grid-template-columns:1fr 160px;gap:8px 10px}
.fgrid .field.wide{grid-column:1 / -1}
.frow > .chk{margin-top:20px;white-space:nowrap}

/* ===== product photos ===== */
img.thumb{width:28px;height:28px;border-radius:4px;object-fit:cover;border:1px solid var(--line);
  background:#f2f5f9;cursor:zoom-in;vertical-align:middle;display:block}
img.thumb:hover{border-color:var(--ink)}
span.thumb.none{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:4px;border:1px dashed #ccd5e0;color:#aab4c2;font-size:11px;background:#fafbfc}
.photo-pv{display:none;position:fixed;z-index:200;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:0 14px 40px rgba(15,25,45,.22);padding:6px;pointer-events:none}
.photo-pv img{display:block;width:200px;height:200px;object-fit:contain;border-radius:5px;background:#f2f5f9}
.photo-pv span{display:block;text-align:center;font-family:var(--font-mono);font-size:10.5px;
  color:var(--muted);padding-top:4px}
.lightbox .lb{background:#fff;border-radius:10px;max-width:620px;width:calc(100vw - 48px);overflow:hidden}
.lb-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.lb-head .x{margin-left:auto;border:0;background:none;font-size:16px;color:var(--muted);cursor:pointer}
.lb-n{font-size:11.5px;color:var(--muted)}
#lbImg{display:block;width:100%;max-height:60vh;object-fit:contain;background:#f2f5f9}
.lb-thumbs{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line)}
.lb-thumbs img{width:46px;height:46px;object-fit:cover;border-radius:5px;border:2px solid transparent;
  cursor:pointer;background:#f2f5f9}
.lb-thumbs img.on{border-color:var(--ink)}

/* ===== goods receipt ===== */
.modal.wide{max-width:1100px;width:calc(100vw - 40px)}
.segsm{display:inline-flex;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.segsm button{border:0;background:#fff;padding:5px 13px;font:inherit;font-size:11.5px;font-weight:700;
  cursor:pointer;color:var(--muted)}
.segsm button.on{background:var(--ink);color:#fff}
input.qin{width:74px;text-align:right;border:1px solid var(--line);border-radius:4px;padding:3px 6px;
  font:inherit;font-size:12px;font-variant-numeric:tabular-nums}
input.nin{width:100%;min-width:120px;border:1px solid var(--line);border-radius:4px;padding:3px 6px;
  font:inherit;font-size:11.5px}
input.ro{background:#f5f7fa;color:var(--muted)}
.short{color:var(--t-red);font-weight:600;font-variant-numeric:tabular-nums}
.over{color:#8a5a08;font-weight:600;font-variant-numeric:tabular-nums}
.ok-dot{color:#116b43;font-weight:700}
button.ic.on{background:#fdeaea;border-color:#f5c9c7}
.recvbar{display:flex;align-items:center;gap:12px;padding:9px 13px;border-radius:7px;margin-bottom:11px;
  font-size:12.5px;border:1px solid var(--line);background:#fafbfc;flex-wrap:wrap}
.recvbar.full{background:#eef7f1;border-color:#c9e4d3}
.recvbar.part{background:#fdf6e8;border-color:#f0dfb8}
.recvbar.none{background:#fbeeee;border-color:#f2cdcb}
.recvbar .btn{margin-left:auto}
.hint.ok{background:#eef7f1;border-color:#c9e4d3}
.pill.warn{background:#fdf3e0;color:#8a5a08;border-color:#f2ddb4}

/* delivery-note rows on the receipt */
.dnotes{margin-top:14px;padding:11px 13px;border:1px solid var(--line);border-radius:7px;background:#fafbfc}
.nrow{display:flex;gap:8px;align-items:center;margin-top:7px}
.nrow input{border:1px solid var(--line);border-radius:4px;padding:4px 8px;font:inherit;font-size:12px}
.nrow input[data-nn]{flex:1;min-width:150px}
.nrow input[type=date]{width:150px}
.nrow .ic[disabled]{opacity:.3;cursor:not-allowed}
select:disabled,input:disabled{background:#f2f4f7;color:#7b8695;cursor:not-allowed}
.segsm button[disabled]{opacity:.55;cursor:not-allowed}
.recvbar .dnote{font-size:11.5px}

/* ===== printable movement documents ===== */
.sheet{background:#fff;border:1px solid var(--line);border-radius:4px;padding:26px 30px;
  font-size:12px;color:#111}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;
  border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:16px}
.sh-co{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.sh-sub{font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.sh-title{text-align:right}
.sh-title h2{margin:0;font-size:15px;font-weight:600}
.sh-no{font-size:13px;margin-top:3px}
.sh-date{font-size:11px;color:var(--muted)}
.sh-meta{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:11.5px}
.sh-meta th{text-align:left;padding:4px 8px 4px 0;color:var(--muted);font-weight:500;
  white-space:nowrap;width:1%;background:none;border:0;text-transform:none;letter-spacing:0}
.sh-meta td{padding:4px 18px 4px 0;border:0;font-weight:600;white-space:normal}
.sh-warn{padding:8px 11px;border-radius:5px;background:#fdf3e0;border:1px solid #f0dfb8;
  font-size:11.5px;margin-bottom:13px;color:#6b4a08}
.sh-warn.info{background:#eaf0f8;border-color:#c9daf2;color:#1a3f70}
.sh-lines{width:100%;border-collapse:collapse;font-size:11.5px;margin-bottom:26px}
.sh-lines th{background:#f2f5f9;border:1px solid #d6dee8;padding:6px 8px;text-align:left;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:#4a5666}
.sh-lines td{border:1px solid #d6dee8;padding:6px 8px;white-space:normal}
.sh-sign{display:flex;gap:34px;margin-top:30px}
.sig{flex:1}
.sig-role{font-size:11px;font-weight:600;margin-bottom:32px}
.sig-line{border-bottom:1px solid #333}
.sig-name{font-size:9.5px;color:var(--muted);padding-top:3px}
.sh-foot{display:flex;justify-content:space-between;margin-top:24px;padding-top:9px;
  border-top:1px solid var(--line);font-size:10px;color:var(--muted)}

@media print{
  body.printing .app,body.printing .overlay{visibility:hidden}
  body.printing #pdSheet,body.printing #pdSheet *{visibility:visible}
  body.printing #pdSheet{position:absolute;left:0;top:0;width:100%;border:0;padding:0}
  body.printing .modal-head,body.printing .hint{display:none}
}

/* Advance notice: purchases approved but not yet arrived, pinned above the
   movements so the stockman knows what is coming before it reaches the gate. */
tbody tr.pending > td{background:#fdf8ec;border-bottom-color:#f0e2c2}
tbody tr.pending:hover > td{background:#fbf2dd}
tbody tr.pending > td:first-child{box-shadow:inset 3px 0 0 #d9a441}
tbody tr.pending + tr:not(.pending) > td{border-top:2px solid var(--line)}