:root{
  --green:#1b7a3d; --green-dark:#14602f; --green-darker:#0f4a24; --green-soft:#e8f3ec;
  --green-rgb:27,122,61; --green-line:#bfe0cb; --green-line-soft:#cfe3d6; --green-row:#f4f9f6; --green-light:#7ee0a5;
  --ink:#1f2328; --ink-2:#343a40; --muted:#6c757d;
  --line:#d8dde3; --line-soft:#eef1f4; --field-line:#c4ccd5;
  --gray-50:#f8f9fa; --gray-100:#f1f3f5; --gray-200:#e9ecef; --gray-300:#dee2e6;
  --dark-1:#1b1f23; --dark-2:#23282e; --dark-3:#2b3138;
  --topbar-h:52px; --sidebar-w:240px; --status-h:26px; --radius:3px;--warn:#d98324;--warn-bg:#fff4e0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:calc(13.5px*var(--fs,1));color:var(--ink);background:var(--gray-100);
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
a{text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#eef1f4}
::-webkit-scrollbar-thumb{background:#c3cad1;border:2px solid #eef1f4;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#a8b1ba}

.btn{border-radius:var(--radius);font-size:calc(13px*var(--fs,1))}
.btn-sm{font-size:calc(12.5px*var(--fs,1));padding:.25rem .6rem}
.form-control,.form-select{border-radius:var(--radius);font-size:calc(13px*var(--fs,1));border-color:var(--field-line);background:#fff}
.form-control-sm,.form-select-sm{font-size:calc(12.5px*var(--fs,1))}
.mono{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:calc(12px*var(--fs,1))}
.num{text-align:right;font-variant-numeric:tabular-nums}
.strong{font-weight:700}

.btn-brand{background:var(--green);border:1px solid var(--green);color:#fff;font-weight:600}
.btn-brand:hover,.btn-brand:focus{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.btn-outline-brand{border:1px solid var(--green);color:var(--green);background:#fff}
.btn-outline-brand:hover{background:var(--green-soft);color:var(--green-dark)}

/* TOPBAR */
.topbar{
  position:fixed;inset:0 0 auto 0;height:var(--topbar-h);
  display:flex;align-items:center;gap:8px;padding:0 10px;
  background:var(--dark-1);border-bottom:3px solid var(--green);
  z-index:1040;color:#dfe4e8;
}
/* ── the NDXNano logo (partials/_logo.html) ───────────────────────────── */
.logo{display:inline-flex;align-items:center;gap:9px;padding:0 4px;text-decoration:none;line-height:1}
.logo-mark{display:block;flex:0 0 auto;
  filter:drop-shadow(0 1px 1px rgba(6,20,12,.22));transition:filter .18s}
.logo:hover .logo-mark{filter:drop-shadow(0 2px 5px rgba(var(--green-rgb),.4))}
.logo--light .logo-mark{--logo-ndx-fill:var(--green-darker)}

.topbar-sep{width:1px;height:26px;background:#333a42;margin:0 4px}
.icon-btn{
  position:relative;width:34px;height:34px;display:grid;place-items:center;
  background:transparent;border:1px solid transparent;border-radius:var(--radius);
  color:#c3ccd4;font-size:calc(16px*var(--fs,1));cursor:pointer;
}
.icon-btn:hover{background:var(--dark-3);border-color:#3a424a;color:#fff}
.icon-btn .dot{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:#e8b23a;box-shadow:0 0 0 2px var(--dark-1)}
.topbar-field{position:relative;display:flex;align-items:center}
.topbar-field>i{position:absolute;left:9px;font-size:calc(13px*var(--fs,1));color:#8b959e;pointer-events:none;z-index:2}
.dark-input{
  height:32px;min-width:210px;background:var(--dark-3);border:1px solid #3a424a;color:#dfe4e8;
  padding:0 26px 0 28px;font-size:calc(12.5px*var(--fs,1));border-radius:var(--radius);
}
.dark-input:focus{background:var(--dark-3);color:#fff;border-color:var(--green);box-shadow:0 0 0 2px rgba(var(--green-rgb),.35)}
.dark-input option{background:var(--dark-3);color:#dfe4e8}
select.dark-input.form-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23aeb6bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right 8px center;background-size:12px 12px;
}
.topbar-search{position:relative;display:flex;align-items:center;margin-left:auto}
.topbar-search i{position:absolute;left:10px;color:#8b959e;font-size:calc(13px*var(--fs,1))}
.topbar-search input{
  width:300px;height:32px;background:var(--dark-3);border:1px solid #3a424a;border-radius:var(--radius);
  color:#dfe4e8;padding:0 56px 0 30px;font-size:calc(12.5px*var(--fs,1));outline:none;
}
.topbar-search input::placeholder{color:#79838c}
.topbar-search input:focus{border-color:var(--green);box-shadow:0 0 0 2px rgba(var(--green-rgb),.35)}
.topbar-search kbd{position:absolute;right:8px;background:#3a424a;color:#aeb6bd;font-size:calc(10px*var(--fs,1));padding:2px 5px;border-radius:3px;font-family:inherit}
.user-btn{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid transparent;border-radius:var(--radius);padding:3px 8px;color:#dfe4e8;cursor:pointer}
.user-btn:hover{background:var(--dark-3);border-color:#3a424a}
.avatar{width:28px;height:28px;border-radius:var(--radius);background:var(--green);color:#fff;font-weight:700;font-size:calc(11.5px*var(--fs,1));display:grid;place-items:center}
.user-meta{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.user-meta b{font-size:calc(12.5px*var(--fs,1));color:#e9edf1}
.user-meta small{font-size:calc(10.5px*var(--fs,1));color:#8b959e}

/* SIDEBAR */
.sidebar{
  position:fixed;top:var(--topbar-h);bottom:var(--status-h);left:0;width:var(--sidebar-w);
  background:var(--dark-2);border-right:1px solid #161a1e;overflow-y:auto;overflow-x:hidden;
  z-index:1035;transition:transform .18s ease;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-track{background:#1d2227}
.sidebar::-webkit-scrollbar-thumb{background:#3a424a;border:0}
.nav-section{padding:14px 16px 6px;font-size:calc(10px*var(--fs,1));font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#6d7780}
.nav-group-toggle{
  width:100%;display:flex;align-items:center;gap:10px;padding:9px 14px;
  background:transparent;border:0;border-left:3px solid transparent;
  color:#b9c1c9;font-size:calc(13px*var(--fs,1));font-weight:600;cursor:pointer;text-align:left;
}
.nav-group-toggle:hover{background:#282e35;color:#e9edf1}
.nav-group-toggle i:first-child{font-size:calc(14px*var(--fs,1));color:#7d878f}
.nav-group-toggle[aria-expanded="true"]{color:#e9edf1;border-left-color:var(--green);background:#1e2329}
.nav-group-toggle[aria-expanded="true"] i:first-child{color:var(--green-light)}
.nav-group-toggle .chev{font-size:calc(11px*var(--fs,1));margin-left:auto;transition:transform .18s;color:#6d7780}
.nav-link-app{
  display:flex;align-items:center;gap:10px;padding:7px 14px 7px 34px;
  color:#9aa4ad;font-size:calc(12.5px*var(--fs,1));border-left:3px solid transparent;
}
.nav-link-app:hover{background:#282e35;color:#e9edf1}
.nav-link-app.active{
  background:linear-gradient(90deg,rgba(var(--green-rgb),.22),rgba(var(--green-rgb),0));
  color:var(--green-light);border-left-color:var(--green);font-weight:600;
}
.nav-link-app.active::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--green-light);margin-left:auto}
.nav-badge{margin-left:auto;font-size:calc(10px*var(--fs,1));font-weight:700;background:var(--green);color:#fff;padding:1px 6px;border-radius:8px}
/* sub-heading inside a nav group (the Reports menu groups its 18 entries) */
.nav-sub{padding:9px 14px 3px 34px;font-size:calc(9.5px*var(--fs,1));font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--green)}
.nav-group .nav-sub:first-child{padding-top:4px}

/* ── LOAD BAR ────────────────────────────────────────────────────────
   A 2px activity bar pinned to the top of the viewport. It reports real
   requests (document loads, navigations, HTMX swaps) and nothing else — see
   static/js/loadbar.js for why it never pretends to know how far along a
   request is. z-index sits above the sidebar (1035) and the topbar. */
.loadbar{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:1080;
  pointer-events:none;opacity:0;transition:opacity .18s ease;
}
.loadbar.is-active{opacity:1}
.loadbar.is-done{opacity:1}
.loadbar span{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--green),var(--green-light));
  box-shadow:0 0 6px rgba(var(--green-rgb),.55);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
/* the bar is completing: snap the last few percent, then fade the whole thing
   out from JS — a long transition here would still be running when the next
   navigation starts */
.loadbar.is-done span{transition:transform .16s ease-out}
.loadbar.is-error span{background:linear-gradient(90deg,var(--warn),#e8a44b);
  box-shadow:0 0 6px rgba(217,131,36,.5)}
/* A stalled request (a slow report, a big import) gets a faint pulse so the bar
   does not look frozen while it waits at the ceiling. */
.loadbar.is-active:not(.is-done) span{animation:loadbar-breathe 1.6s ease-in-out infinite}
@keyframes loadbar-breathe{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.35)}
}
@media (prefers-reduced-motion:reduce){
  .loadbar span{transition:none}
  .loadbar.is-active:not(.is-done) span{animation:none}
}
/* print: never */
@media print{.loadbar{display:none}}

/* MAIN */
.main{
  position:fixed;top:var(--topbar-h);left:var(--sidebar-w);right:0;bottom:var(--status-h);
  overflow-y:auto;overflow-x:hidden;background:var(--gray-100);transition:left .18s ease;
}
/* the state is a class on <html>, so it can be applied before the first paint
   (see the inline read in base.html <head>); body keeps working for old URLs/bookmarks */
html.nav-collapsed .sidebar,
body.nav-collapsed .sidebar{transform:translateX(-100%)}
html.nav-collapsed .main,
body.nav-collapsed .main{left:0}

.page-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;background:#fff;border-bottom:1px solid var(--line);
}
.crumb{display:flex;align-items:center;gap:6px;font-size:calc(11.5px*var(--fs,1));color:var(--muted);margin-bottom:2px}
.crumb a{color:var(--muted)} .crumb a:hover{color:var(--green)}
.crumb i{font-size:calc(9px*var(--fs,1))} .crumb span{color:var(--ink-2);font-weight:600}
.page-head h1{margin:0;font-size:calc(18px*var(--fs,1));font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;letter-spacing:.1px}
.badge-soft{font-size:calc(10.5px*var(--fs,1));font-weight:700;letter-spacing:.3px;background:var(--green-soft);color:var(--green-dark);border:1px solid var(--green-line);padding:2px 8px;border-radius:10px;text-transform:uppercase}
.page-actions{display:flex;gap:6px;flex-wrap:wrap}
.content{padding:12px;display:flex;flex-direction:column;gap:12px}
/* a wrapper that stands between .content and its blocks (an Alpine x-data
   scope, a loop) would swallow that gap. .stack re-establishes the same
   rhythm inside it, so nested blocks never need their own margins. */
.stack{display:flex;flex-direction:column;gap:12px}
/* The blocks above also carry their own ideas of vertical space. A Bootstrap
   .row pulls itself up by its gutter (margin-top:-16px) and an .alert pushes
   the next block down (margin-bottom:1rem); against the page gap that reads as
   a block touching its neighbour, or as a 28px hole. At page level the gap is
   the rhythm, so the block's own vertical margins stand down. */
.content > .row,.stack > .row{margin-top:0;margin-bottom:0!important}
.content > .alert,.stack > .alert{margin-bottom:0}
/* .pseg is a card with its own 12px bottom margin for contexts with no layout
   gap (a modal's stacked sections). As a page-level block the gap owns it. */
.content > .pseg,.stack > .pseg{margin-bottom:0}

/* PANELS */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 0 rgba(16,24,40,.03)}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;
  background:linear-gradient(180deg,#f3f9f5,#e6f2ea);border-bottom:1px solid var(--green-line-soft);
  font-size:calc(12px*var(--fs,1));font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--green-dark);
}
.panel-head .bi{color:var(--green-dark);margin-right:5px}
.panel-head-right{font-size:calc(11.5px*var(--fs,1));font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted)}
.panel-body{padding:10px 12px}
/* code samples scroll inside their panel instead of spilling past it */
.panel pre{overflow-x:auto}

/* STAT CARDS */
/* as many cards as the row can hold — never a stranded empty column when a
   report passes four cards, never an orphan when the cockpit passes five.
   Phone breakpoints live in the responsive section at the bottom. */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.stat-card{background:#fff;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:var(--radius);padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stat-card.is-warn{border-left-color:#e0a12a}
.stat-card.is-bad{border-left-color:#c0392b}
.stat-card.is-info{border-left-color:#2f6f9f}
.stat-label{font-size:calc(10.5px*var(--fs,1));font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.stat-value{font-size:calc(21px*var(--fs,1));font-weight:700;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-foot{font-size:calc(11px*var(--fs,1));color:var(--muted);display:flex;align-items:center;gap:5px}
.stat-foot .up{color:var(--green-dark);font-weight:700}
.stat-foot .down{color:#9b1c1c;font-weight:700}

/* TOOLBAR */
.toolbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
/* a filter form that should lay out like the toolbar it sits in: display:contents
   keeps each label+control a direct flex child, so the fields wrap the same way
   without a wrapper div breaking the row */
.toolbar-form{display:contents}
.tb-field{display:flex;flex-direction:column;gap:3px}
.tb-field label{font-size:calc(10.5px*var(--fs,1));font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.tb-field .form-control,.tb-field .form-select{min-width:150px;height:30px}
.tb-actions{display:flex;gap:6px;align-items:center}

/* EXCEL TABLE */
.table-scroll{overflow:auto}
/* a chunky, easy-to-grab horizontal scrollbar for the excel tables */
.table-scroll::-webkit-scrollbar{height:18px;width:18px}
.table-scroll::-webkit-scrollbar-track{background:#e9edf1;border-top:1px solid var(--line-soft)}
.table-scroll::-webkit-scrollbar-thumb{background:#8a97a1;border:3px solid #e9edf1;border-radius:8px;min-width:40px}
.table-scroll::-webkit-scrollbar-thumb:hover{background:var(--green)}
.table-scroll::-webkit-scrollbar-thumb:active{background:var(--green-dark)}
.table-scroll::-webkit-scrollbar-corner{background:#e9edf1}
/* Firefox can't use ::-webkit-scrollbar — thicker scrollbar there only */
@supports (-moz-appearance: none){
  .table-scroll{scrollbar-width:auto;scrollbar-color:#8a97a1 #e9edf1}
}
table.xl-table{
  width:max-content;                   /* size to the columns, not a fixed 1500px */
  min-width:100%;                      /* …but always fill the panel when there's room */
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  font-size:calc(12.5px*var(--fs,1));
  background:#fff;
}
table.xl-table th,
table.xl-table td{
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:0 8px;
  height:30px;
  vertical-align:middle;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;             /* long text now shows ... */
}
table.xl-table thead th{
  top:0;z-index:3;background:var(--green-dark);color:#fff;border-bottom:1px solid var(--green-darker);border-right:1px solid rgba(255,255,255,.14);
  font-size:calc(10.5px*var(--fs,1));font-weight:700;letter-spacing:.5px;text-transform:uppercase;height:32px;user-select:none;
}
table.xl-table thead th {
  overflow: hidden;
  min-width: 40px;
  position: relative;
}
/* visible drag handle on hover */
/* column resize affordance only — logic is in JS */
table.xl-table thead th {
  position: relative;
}
table.xl-table thead th::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 5px; height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 5;
}
table.xl-table thead th:hover::after {
  background: linear-gradient(to right, transparent, rgba(255,255,255,.5));
}

table.xl-table thead th.num{text-align:right}
table.xl-table tbody td{background:#fff}
/* editable cells — line grids reuse the excel table with inline inputs */
table.xl-table tbody td.editable{padding:0}
table.xl-table tbody td.editable input,table.xl-table tbody td.editable select{
  width:100%;height:29px;border:0;background:transparent;padding:0 8px;font-size:calc(12.5px*var(--fs,1));color:inherit;border-radius:0;
}
table.xl-table tbody td.editable input:focus,table.xl-table tbody td.editable select:focus{
  outline:0;background:#fff;box-shadow:inset 0 0 0 2px rgba(var(--green-rgb),.35);
}
table.xl-table tbody td.editable input.num{text-align:right}
table.xl-table tbody tr:hover td{background:var(--green-row)}
table.xl-table tbody tr.selected td{background:var(--green-soft)}
table.xl-table tbody tr.selected td:first-child{box-shadow:inset 3px 0 0 var(--green)}
/* a prose column — sentences, not values: wrap instead of clipping. The grid
   stays nowrap everywhere else. */
table.xl-table th.wrap,table.xl-table td.wrap{white-space:normal;vertical-align:top;padding-top:5px;padding-bottom:5px;line-height:1.35}
/* a prose table fills its panel instead of sizing to the longest sentence */
table.xl-table.table-prose{width:100%}
table.xl-table .sticky-col{position:sticky;left:0;z-index:2}
/* freeze extra columns: add .sticky-col plus an inline left offset (after the frozen
   columns before it) and .shadow-r on the last frozen column for separation */
table.xl-table .sticky-col.shadow-r{box-shadow:2px 0 6px -2px rgba(16,24,40,.18)}
table.xl-table thead .sticky-col{background:var(--green-dark);z-index:4}
table.xl-table tbody td.sticky-col{background:#fff}
table.xl-table tbody tr:hover td.sticky-col{background:var(--green-row)}
table.xl-table tbody tr.selected td.sticky-col{background:var(--green-soft)}
.col-check{width:34px;text-align:center}
.col-num{width:44px;text-align:right;color:var(--muted);font-size:calc(11.5px*var(--fs,1))}
.col-act{width:96px;text-align:center}
.form-check-input{width:14px;height:14px;margin:0;cursor:pointer;border-color:var(--field-line)}
.form-check-input:checked{background-color:var(--green);border-color:var(--green)}
.row-btn{width:24px;height:22px;display:inline-grid;place-items:center;border:1px solid transparent;background:transparent;border-radius:2px;color:#7b858e;font-size:calc(12px*var(--fs,1));cursor:pointer}
.row-btn:hover{background:var(--green-soft);color:var(--green-dark);border-color:var(--green-line)}
.row-btn.danger:hover{background:#fdecec;color:#9b1c1c;border-color:#f3c2c2}
table.xl-table tfoot td{position:sticky;bottom:0;z-index:3;background:#f3f6f8;border-top:2px solid #ccd3da;border-bottom:0;font-weight:700;color:var(--ink-2);height:32px}
table.xl-table tfoot td.sticky-col{background:#f3f6f8;z-index:4}
body.density-compact table.xl-table th,body.density-compact table.xl-table td{height:24px;padding:0 6px;font-size:calc(12px*var(--fs,1))}
body.density-compact table.xl-table thead th{height:26px}

/* PILLS */
.pill{display:inline-block;padding:1px 8px;border-radius:10px;font-size:calc(10.5px*var(--fs,1));font-weight:700;letter-spacing:.2px;border:1px solid transparent}
.pill-ok{background:var(--green-soft);color:var(--green-dark);border-color:var(--green-line)}
.pill-warn{background:#fff4e0;color:#8a5a00;border-color:#f0d9a8}
.pill-bad{background:#fdecec;color:#9b1c1c;border-color:#f3c2c2}
/* nothing is wrong — the thing simply is not there yet */
.pill-muted{background:var(--gray-100);color:var(--ink-2);border-color:var(--line)}

/* STATUS BAR */
.statusbar{
  position:fixed;left:0;right:0;bottom:0;height:var(--status-h);display:flex;align-items:center;gap:0;
  padding:0 10px;background:var(--dark-3);border-top:1px solid #161a1e;color:#adb5bd;font-size:calc(11.5px*var(--fs,1));z-index:1040;
}
.sb-item{display:flex;align-items:center;gap:5px;padding:0 10px;white-space:nowrap}
.sb-item b{color:#e9edf1;font-weight:600}
.sb-sep{width:1px;height:14px;background:#3a424a}
.statusbar .bi{font-size:calc(12px*var(--fs,1))}

/* statusbar — build/version badge */
.sb-version{
  background:none;border:0;color:inherit;font:inherit;line-height:1;cursor:pointer;
  border-radius:var(--radius);padding:2px 8px;
}
.sb-version:hover,.sb-version:focus-visible{background:var(--dark-2);color:#fff;outline:none}
.sb-version .bi{color:var(--green-light)}
.sb-ver{color:#e9edf1;font-weight:600}
.sb-tag{
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:calc(10.5px*var(--fs,1));letter-spacing:.1px;
  padding:1px 7px;border-radius:2px;background:var(--dark-2);color:#c3cad1;border:1px solid #3a424a;
}

/* ── About this build panel ─────────────────────────────────────────────── */
.buildinfo-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;background:var(--gray-50);border-bottom:1px solid var(--line);
}
.buildinfo-name{font-size:calc(15px*var(--fs,1));font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.buildinfo-sub{font-size:calc(11.5px*var(--fs,1));color:var(--muted)}
.buildinfo-channel{
  margin-left:auto;font-size:calc(10px*var(--fs,1));font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;padding:2px 8px;border-radius:2px;
  background:var(--gray-200);color:var(--ink-2);border:1px solid var(--line);
}
.buildinfo-channel--production{background:var(--green-soft);color:var(--green-dark);border-color:var(--green-line)}
.buildinfo-channel--staging{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
.buildinfo-facts{
  display:grid;grid-template-columns:132px 1fr;gap:0;margin:0;padding:6px 18px 2px;
}
.buildinfo-facts dt{
  font-size:calc(11px*var(--fs,1));font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--muted);padding:9px 0;border-bottom:1px solid var(--line-soft);
}
.buildinfo-facts dd{
  margin:0;padding:9px 0;border-bottom:1px solid var(--line-soft);
  font-size:calc(12.5px*var(--fs,1));color:var(--ink);display:flex;align-items:center;gap:8px;
}
.buildinfo-facts dt:nth-last-of-type(1),.buildinfo-facts dd:nth-last-of-type(1){border-bottom:0}
.buildinfo-facts .mono{font-size:calc(12px*var(--fs,1))}
.buildinfo-dim{color:var(--muted)}
.buildinfo-pill{
  font-size:calc(11px*var(--fs,1));font-weight:700;padding:2px 8px;border-radius:2px;
  background:var(--green-soft);color:var(--green-dark);border:1px solid var(--green-line);
}
.buildinfo-pill--quiet{background:var(--gray-100);color:var(--ink-2);border-color:var(--line)}
.buildinfo-note{
  margin:0;padding:12px 18px 16px;font-size:calc(11.5px*var(--fs,1));line-height:1.55;color:var(--muted);
}
.buildinfo-copy{font-size:calc(11px*var(--fs,1));color:var(--muted);margin-right:auto}

/* the maker's line — present, restrained, never competing with the product */
.buildinfo-vendor{
  display:flex;align-items:center;gap:10px;
  padding:0 18px 16px;
}
.buildinfo-vendor-line{
  font-size:calc(11.5px*var(--fs,1));color:var(--ink-2);letter-spacing:.1px;
}
.buildinfo-vendor-line b{
  font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--green-dark);
}


/* static/css/app.css — form label helper */
.form-label-sm{font-size:calc(11px*var(--fs,1));font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#000;margin-bottom:3px;display:block}

[x-cloak]{display:none !important}

/* static/css/app.css — Excel-style inline edit */
/* Excel-style inline edit — input overlays cell, never affects layout */
td.cell.editing {
  padding: 0;
  position: relative;
}
td.cell.editing > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid var(--green);
  border-radius: 0;
  padding: 0 6px;
  font: inherit;
  font-size:calc(12.5px*var(--fs,1));
  background: #fff;
  outline: none;
}
td.cell.editing.num > input { text-align: right; }
body.density-compact td.cell.editing > input { font-size:calc(12px*var(--fs,1)); }

/* sortable table headers */
.th-sortable { cursor: pointer; user-select: none; }
.th-sortable:hover { background: var(--green) !important; }
.th-sortable .bi-arrow-down-up { opacity: .35; font-size:calc(10px*var(--fs,1)); }
.th-sortable .bi-arrow-up,
.th-sortable .bi-arrow-down { color: var(--green-light); font-size:calc(10px*var(--fs,1)); }

/* ── section card (canonical component; .pseg shares this look) ───────────
   A card with an edge-to-edge tinted header. Works with any content: rows,
   tables, textareas. The header spans the card via negative margins, so the
   12px padding gives every body consistent insets. */
.form-section {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--gray-50);
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(31,35,40,.04);
}
.form-section:last-child { margin-bottom: 0; }
.form-section-title {
  display: flex; align-items: center; gap: 7px;
  margin: -12px -12px 12px;
  padding: 9px 12px;
  background: var(--green-soft);
  border-bottom: 1px solid var(--green-line);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: inset 3px 0 0 var(--green);
  font-size:calc(11.5px*var(--fs,1)); font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--green-darker);
}
.form-section-title .bi { margin-right: 0; color: var(--green-dark); font-size:calc(14px*var(--fs,1)); }
.form-section > .row { margin-left: 0; margin-right: 0; }
.form-check.form-switch .form-check-input { margin-top: 2px; }

.pill-info{background:#e7f1fa;color:#205b8a;border-color:#b8d5ee}

/* RESPONSIVE */
@media (max-width:991.98px){
  .sidebar{transform:translateX(-100%)}
  .main{left:0}
  body.nav-open .sidebar{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
  .topbar-search input{width:160px}
  .user-meta{display:none}
  .topbar-field{display:none}
}
/* ── /ui/ layout: index rail + component column ────────────────────
   A class, not an inline style, so the responsive block at the bottom can
   reflow it on a small screen. */
.ui-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px;align-items:start}
/* a nowrap nav link has a huge min-content width; without this the grid
   column grows to it and pushes the whole page sideways on a phone */
.ui-layout > *{min-width:0}
.ui-nav-panel{position:sticky;top:12px}

/* ── /ui/ component codes (ui/registry.py) ──────────────────────────
   A code is the component's identity in a design conversation, so it is
   always visible: in the section header, in the left nav, and in the legend. */
.ui-code{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;padding:1px 6px;margin-left:8px;
  border:1px solid var(--green-line);border-radius:2px;
  background:var(--green-soft);color:var(--green-darker);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:calc(10.5px*var(--fs,1));font-weight:700;letter-spacing:.3px;line-height:1.6;
  text-transform:none;white-space:nowrap;
}
a.ui-code:hover{background:var(--green);border-color:var(--green);color:#fff}
.ui-nav-panel .ui-code{margin-left:0;margin-right:8px;min-width:34px}
.ui-nav-list{max-height:calc(100vh - 240px);overflow-y:auto;padding-bottom:4px}
.ui-nav{display:flex;align-items:center;padding-left:10px}
.ui-nav-empty{padding:10px 12px;color:var(--muted);font-size:calc(12px*var(--fs,1))}
.ui-legend-row{display:flex;flex-wrap:wrap;gap:6px 18px}
.ui-legend-item{font-size:calc(12.5px*var(--fs,1))}
.ui-legend-item .ui-code{margin-left:0;margin-right:6px}

/* =========================================================
   RESPONSIVE — tablet + phone only. Desktop unchanged.
   ========================================================= */

/* ---------- TABLET (≤1100px) ---------- */
@media (max-width: 1100px) {
  .content { padding: 10px; gap: 10px; }
  .stack { gap: 10px; }

  .page-head { flex-wrap: wrap; row-gap: 8px; }
  .page-actions { flex-wrap: wrap; }

  .toolbar { row-gap: 8px; }
  .tb-field .form-control,
  .tb-field .form-select { min-width: 130px; }
}

/* ---------- SMALL TABLET / LARGE PHONE (≤900px) ---------- */
@media (max-width: 900px) {
  :root { --sidebar-w: 220px; }

  .topbar { gap: 6px; padding: 0 8px; }
  .topbar-search { margin-left: auto; }
  .topbar-search input { width: 200px; }
  .brand-text { display: none; }

  .content { padding: 8px; gap: 8px; }
  .stack { gap: 8px; }

  .page-head { padding: 10px 12px; }
  .page-head h1 { font-size:calc(16px*var(--fs,1)); }

  .panel-head { font-size:calc(11px*var(--fs,1)); padding: 7px 10px; }
  .panel-body { padding: 8px 10px; }

  .stat-value { font-size:calc(18px*var(--fs,1)); }
  .stat-label { font-size:calc(10px*var(--fs,1)); }
}

/* ---------- TABLET (≤900px): the /ui/ rail goes on top ------------- */
@media (max-width: 900px) {
  .ui-layout { grid-template-columns: minmax(0, 1fr); }
  .ui-nav-panel { position: static; }
  .ui-nav-list { max-height: 240px; }
}

/* ---------- PHONE (≤640px) ---------- */
@media (max-width: 640px) {
  :root { --topbar-h: 48px; --status-h: 24px; }

  /* topbar: icon only */
  .topbar-search { display: none; }
  .topbar-field   { display: none; }
  .user-meta      { display: none; }
  .topbar-sep     { display: none; }
  .brand-text     { display: none; }

  /* page header stacks */
  .page-head { padding: 8px 10px; flex-direction: column; align-items: stretch; gap: 8px; }
  .page-head h1 { font-size:calc(15px*var(--fs,1)); }
  .crumb { font-size:calc(11px*var(--fs,1)); }
  .page-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 6px;
  }
  .page-actions .btn { width: 100%; justify-content: center; }

  /* transfer sheet (UI-501) on a phone: shrink the columns so the whole row —
     including its Qty field — fits without a horizontal scroll. Cells are never
     hidden: display:none removes a cell from the table model, which silently
     shifts every remaining cell off its <col>. */
  table.xl-table[data-table-id="transfer-lines"] { width: 100%; min-width: 0; }
  table.xl-table[data-table-id="transfer-lines"] colgroup > col:nth-child(1) { width: 26px !important; }
  table.xl-table[data-table-id="transfer-lines"] colgroup > col:nth-child(3) { width: 58px !important; }
  table.xl-table[data-table-id="transfer-lines"] colgroup > col:nth-child(4) { width: 74px !important; }
  table.xl-table[data-table-id="transfer-lines"] colgroup > col:nth-child(5) { width: 56px !important; }
  table.xl-table[data-table-id="transfer-lines"] colgroup > col:nth-child(6) { width: 30px !important; }
  table.xl-table[data-table-id="transfer-lines"] th,
  table.xl-table[data-table-id="transfer-lines"] td { padding-left: 4px; padding-right: 4px; }

  /* fuel sheet on a phone: tighten the columns so the row reads, and let the
     sheet scroll inside its own box — the frozen # column and the pinned header
     keep your place. Crushing the inputs to fit 390px would make them unusable,
     which defeats the point of a sheet. */
  table.xl-table[data-table-id="fuel-sheet"] colgroup > col:nth-child(1) { width: 24px !important; }
  table.xl-table[data-table-id="fuel-sheet"] colgroup > col:nth-child(2) { width: 132px !important; }
  table.xl-table[data-table-id="fuel-sheet"] colgroup > col:nth-child(3) { width: 60px !important; }
  table.xl-table[data-table-id="fuel-sheet"] colgroup > col:nth-child(4) { width: 70px !important; }
  table.xl-table[data-table-id="fuel-sheet"] colgroup > col:nth-child(5) { width: 58px !important; }
  table.xl-table[data-table-id="fuel-sheet"] colgroup > col:nth-child(6) { width: 48px !important; }
  table.xl-table[data-table-id="fuel-sheet"] colgroup > col:nth-child(7) { width: 26px !important; }
  table.xl-table[data-table-id="fuel-sheet"] th,
  table.xl-table[data-table-id="fuel-sheet"] td { padding-left: 3px; padding-right: 3px; }

  /* stats: 2 per row */
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 8px 10px; }
  .stat-value { font-size:calc(16px*var(--fs,1)); }
  .stat-foot { font-size:calc(10.5px*var(--fs,1)); }

  /* a segmented control that does not fit a phone wraps into a grid —
     better than hiding the last tab behind a scroll nobody discovers */
  .seg-tabs { display: flex; flex-wrap: wrap; width: 100%; align-self: stretch; }
  .seg-tab { flex: 1 1 auto; justify-content: center; }
  .seg { display: flex; flex-wrap: wrap; width: 100%; }
  .seg-item { flex: 1 1 auto; text-align: center; }

  /* panel header: the meta drops under the title instead of squeezing it */
  .panel-head { flex-wrap: wrap; row-gap: 2px; }

  /* toolbar: full-width fields */
  .toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .tb-field { width: 100%; }
  .tb-field .form-control,
  .tb-field .form-select { min-width: 0; width: 100%; }
  .tb-actions { width: 100%; }
  .tb-actions .btn { flex: 1; }

  /* table scroll hint */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.xl-table {
    /* tighter cells on phones */
    font-size:calc(12px*var(--fs,1));
  }
  table.xl-table th,
  table.xl-table td { padding: 0 6px; height: 28px; }

  /* first-column sticky stays, but narrower */
  table.xl-table .sticky-col { min-width: 32px; }

  /* modals: nearly full-screen */
  .modal-dialog { margin: 8px; max-width: calc(100% - 16px); }
  .modal-dialog.modal-lg,
  .modal-dialog.modal-sm { max-width: calc(100% - 16px); }
  .modal-content { border-radius: 4px; }
  .modal-body { padding: 10px; }

  /* forms stack */
  .modal .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  /* opt-in: a pseg-body with .pseg-body--pairs keeps its col-6 fields two-up on a phone
     (date + required-by, priority + currency) instead of one per line */
  .modal .row.pseg-body--pairs > .col-6 { flex: 0 0 50%; max-width: 50%; }

  /* sidebar takes more width on phone */
  :root { --sidebar-w: 260px; }

  /* statusbar: drop the least important items. Named, not positional — the
     statusbar gains and loses items, and nth-child silently hides the wrong one
     the first time that happens. */
  .statusbar .sb-sm-hide { display: none; }
  .statusbar .sb-version { margin-left: auto; }
  .statusbar { font-size:calc(11px*var(--fs,1)); }
  .sb-item { padding: 0 6px; }

  /* bulk bar wraps */
  #bulkBar { flex-wrap: wrap; row-gap: 6px; }
  #bulkBar .btn { flex: 1; min-width: 80px; }
}

/* ---------- VERY SMALL (≤380px) ---------- */
@media (max-width: 380px) {
  .stat-row { grid-template-columns: 1fr; }
  .page-actions { grid-template-columns: repeat(2, 1fr); }
  .brand-mark { width: 26px; height: 26px; font-size:calc(11px*var(--fs,1)); }
}


/* =========================================================
   POS — Point of Sale (Sell / Purchase)
   ========================================================= */
.pos-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 12px;
  height: calc(100vh - var(--topbar-h) - var(--status-h) - 24px);
}
.pos-col { display: flex; flex-direction: column; min-height: 0; }
.pos-panel { display: flex; flex-direction: column; min-height: 0; height: 100%; }

/* product panel */
.pos-search-wrap { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pos-search-input { position: relative; }
.pos-search-input > i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size:calc(16px*var(--fs,1)); pointer-events: none;
}
.pos-search-input > input {
  width: 100%; height: 40px; padding: 0 12px 0 38px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--gray-50); font-size:calc(14px*var(--fs,1)); outline: none;
}
.pos-search-input > input:focus { background: #fff; border-color: var(--green); box-shadow: 0 0 0 2px rgba(var(--green-rgb),.15); }

.pos-cat-tabs { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; border-bottom: 1px solid var(--line); background: #fff; }
.pos-cat-tabs::-webkit-scrollbar { height: 0; }
.pos-cat {
  flex-shrink: 0; padding: 5px 12px; font-size:calc(12.5px*var(--fs,1)); font-weight: 600;
  color: var(--ink-2); background: var(--gray-100);
  border: 1px solid var(--line); border-radius: 20px;
  cursor: pointer; transition: all .15s; text-decoration: none;
}
.pos-cat:hover { background: var(--green-soft); color: var(--green-dark); border-color: var(--green-line); }
.pos-cat.active { background: var(--green); color: #fff; border-color: var(--green); }

.pos-grid-scroll { flex: 1; overflow-y: auto; padding: 12px; }
.pos-grid-inner { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pos-empty { grid-column: 1/-1; text-align: center; color: var(--muted); padding: 40px 20px; }
.pos-empty i { font-size:calc(32px*var(--fs,1)); }

/* product card */
.pos-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0;
  text-align: left; cursor: pointer;
  transition: all .12s; overflow: hidden;
}
.pos-card:hover { border-color: var(--green); box-shadow: 0 2px 8px rgba(var(--green-rgb),.15); transform: translateY(-1px); }
.pos-card:active { transform: translateY(0); }
.pos-card-img {
  height: 60px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--green-soft), var(--green-row));
  color: var(--green-dark); font-size:calc(26px*var(--fs,1));
  border-bottom: 1px solid var(--line-soft);
}
.pos-card-body { padding: 8px 10px; }
.pos-card-name {
  font-weight: 600; font-size:calc(13px*var(--fs,1)); line-height: 1.25;
  height: 34px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pos-card-code { font-size:calc(10.5px*var(--fs,1)); color: var(--muted); margin-top: 2px; }
.pos-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.pos-card-price { font-weight: 700; color: var(--green-dark); font-size:calc(13px*var(--fs,1)); }
.pos-card-stock { font-size:calc(10.5px*var(--fs,1)); padding: 1px 6px; border-radius: 8px; background: var(--gray-100); color: var(--muted); border: 1px solid var(--line); }
.pos-card-stock.low { background: #fff4e0; color: #8a5a00; border-color: #f0d9a8; }
.pos-card-stock.out { background: #fdecec; color: #9b1c1c; border-color: #f3c2c2; }

/* cart */
.pos-cart-panel { background: #fff; }
.pos-party { border-bottom: 1px solid var(--line); }
.pos-party-content { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.pos-party-avatar { width: 36px; height: 36px; border-radius: var(--radius); background: var(--green); color: #fff; font-weight: 700; display: grid; place-items: center; font-size:calc(15px*var(--fs,1)); }
.pos-party-info { flex: 1; min-width: 0; }
.pos-party-name { font-weight: 600; font-size:calc(13.5px*var(--fs,1)); }
.pos-party-meta { font-size:calc(11px*var(--fs,1)); color: var(--muted); }
.pos-party-change { padding: 4px 10px; font-size:calc(11.5px*var(--fs,1)); background: transparent; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); cursor: pointer; }
.pos-party-change:hover { background: var(--green-soft); color: var(--green-dark); border-color: var(--green-line); }
.pos-party-empty {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px; margin: 10px 12px; width: calc(100% - 24px);
  background: var(--gray-50); border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--ink-2); cursor: pointer;
}
.pos-party-empty:hover { background: var(--green-soft); border-color: var(--green); }
.pos-party-empty i { font-size:calc(18px*var(--fs,1)); color: var(--green); }
.pos-party-empty span { font-weight: 600; font-size:calc(13px*var(--fs,1)); }
.pos-party-empty small { font-size:calc(11px*var(--fs,1)); color: var(--muted); }

.pos-cart-scroll { flex: 1; overflow-y: auto; padding: 4px 0; }
.pos-cart-empty { text-align: center; color: var(--muted); padding: 40px 20px; }
.pos-cart-empty i { font-size:calc(32px*var(--fs,1)); opacity: .4; }
.pos-cart-empty div { margin-top: 8px; font-weight: 600; }
.pos-cart-empty small { font-size:calc(11px*var(--fs,1)); }

.pos-line { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); }
.pos-line:hover { background: var(--gray-50); }
.pos-line-main { flex: 1; min-width: 0; }
.pos-line-name { font-size:calc(13px*var(--fs,1)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-line-code { font-size:calc(10.5px*var(--fs,1)); color: var(--muted); }
.pos-line-qty { display: flex; align-items: center; }
.pos-qty-btn {
  width: 24px; height: 24px; background: var(--gray-100); border: 1px solid var(--line);
  color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size:calc(14px*var(--fs,1)); padding: 0;
}
.pos-qty-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.pos-qty-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.pos-qty-btn:hover { background: var(--green-soft); border-color: var(--green-line); color: var(--green-dark); }
.pos-qty-val {
  min-width: 32px; height: 24px; display: grid; place-items: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size:calc(12.5px*var(--fs,1)); font-weight: 600; padding: 0 4px;
}
.pos-line-amt { min-width: 70px; font-size:calc(13px*var(--fs,1)); font-weight: 600; }
.pos-line-remove { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 2px 4px; border-radius: 2px; }
.pos-line-remove:hover { color: #9b1c1c; background: #fdecec; }

.pos-totals { padding: 10px 12px; border-top: 1px solid var(--line); background: var(--gray-50); }
.pos-total-row { display: flex; justify-content: space-between; font-size:calc(12.5px*var(--fs,1)); padding: 3px 0; color: var(--ink-2); }
.pos-total-grand { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; font-size:calc(16px*var(--fs,1)); font-weight: 700; color: var(--ink); }

.pos-actions { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); background: #fff; }

/* party rows */
.pos-party-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; background: transparent; border: 0;
  border-bottom: 1px solid var(--line-soft); cursor: pointer; text-align: left;
}
.pos-party-row:hover { background: var(--green-soft); }
.pos-party-row-avatar {
  width: 32px; height: 32px; border-radius: var(--radius);
  background: var(--gray-200); color: var(--ink-2); font-weight: 700;
  display: grid; place-items: center; font-size:calc(13px*var(--fs,1));
}

/* payment modal */
.pos-pay-total { text-align: center; padding: 6px 0; }
.pos-pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pos-pay-method {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; transition: all .12s;
}
.pos-pay-method:hover { border-color: var(--green); background: var(--green-soft); }
.pos-pay-method.active { background: var(--green); border-color: var(--green-dark); color: #fff; }
.pos-pay-method i { font-size:calc(18px*var(--fs,1)); }
.pos-pay-method span { font-size:calc(11.5px*var(--fs,1)); font-weight: 600; }
.pos-change {
  height: 30px; display: flex; align-items: center; padding: 0 10px;
  background: var(--green-soft); border: 1px solid var(--green-line); border-radius: var(--radius);
  font-weight: 700; color: var(--green-dark);
}
.pos-quick-amounts { display: flex; flex-wrap: wrap; gap: 6px; }

/* receipt */
.pos-receipt { padding: 20px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; height: 100%; }
.pos-receipt-check { text-align: center; color: var(--green); font-size:calc(48px*var(--fs,1)); }
.pos-receipt-title { text-align: center; font-size:calc(18px*var(--fs,1)); font-weight: 700; margin: 0; }
.pos-receipt-ref { text-align: center; color: var(--muted); font-size:calc(12px*var(--fs,1)); }
.pos-receipt-party { display: flex; justify-content: space-between; padding: 8px 10px; background: var(--gray-50); border-radius: var(--radius); font-size:calc(12.5px*var(--fs,1)); }
.pos-receipt-lines { border-top: 1px dashed var(--line); padding-top: 8px; }
.pos-receipt-line { display: flex; justify-content: space-between; font-size:calc(12.5px*var(--fs,1)); padding: 3px 0; }
.pos-receipt-total { display: flex; justify-content: space-between; border-top: 2px solid var(--line); margin-top: 6px; padding-top: 8px; font-size:calc(15px*var(--fs,1)); font-weight: 700; }
.pos-receipt-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 16px; }
.pos-receipt-actions .btn { flex: 1; }

/* responsive */
@media (max-width: 992px) {
  .pos-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    height: auto;
    min-height: calc(100vh - var(--topbar-h) - var(--status-h) - 24px);
  }
  .pos-col-products { min-height: 400px; }
  .pos-col-cart { max-height: 400px; }
}

/* equity pill + group rows in CoA */
.pill-equity{background:#efe9f7;color:#5a3d91;border-color:#d6c9ee}
tr.acc-group > td{background:#fbfaf5 !important}
tr.acc-group:hover > td{background:#f5f2e6 !important}

/* journal lines editor */
.journal-lines { width: 100%; border-collapse: collapse; font-size:calc(12.5px*var(--fs,1)); }
.journal-lines th {
  background: var(--gray-50); padding: 6px 8px; text-align: left;
  font-size:calc(10.5px*var(--fs,1)); font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.journal-lines th.num { text-align: right; }
.journal-lines td { padding: 4px 6px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.journal-lines tfoot td { padding: 8px 6px; border-top: 2px solid var(--line); border-bottom: 0; }
.journal-lines .journal-total { background: var(--gray-50); font-weight: 700; }
.journal-lines .journal-total td:first-child { color: var(--ink-2); }
.journal-unbalanced td {
  background: #fdecec; color: #9b1c1c;
  padding: 6px 10px; font-size:calc(12px*var(--fs,1)); text-align: center;
}
.journal-unbalanced .bi { margin-right: 4px; }

/* =========================================================
   DASHBOARD — charts
   ========================================================= */
.dash-grid { display: grid; gap: 12px; }
.dash-grid-2-1 { grid-template-columns: 2fr 1fr; }
.dash-grid-1-1 { grid-template-columns: 1fr 1fr; }

.chart-wrap { position: relative; height: 260px; width: 100%; }
.chart-wrap-sm { height: 200px; }
.chart-wrap-lg { height: 280px; }

.chart-legend { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 0; }
.chart-legend-item { display: flex; align-items: center; gap: 8px; font-size:calc(12px*var(--fs,1)); }
.chart-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.chart-legend-label { flex: 1; color: var(--ink-2); }
.chart-legend-value { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (max-width: 992px) {
  .dash-grid-2-1, .dash-grid-1-1 { grid-template-columns: 1fr; }
  .chart-wrap { height: 220px; }
  .chart-wrap-lg { height: 240px; }
}
/* ── auth ─────────────────────────────────────────────────────────────
   The sign-in screen is the first thing anyone sees, and for a demo it is the
   only screen a visitor is guaranteed to look at. Two panels: what the product
   is on the left, the way in on the right. The `.login-*` classes that follow
   are still used by the SaaS console sign-in, which keeps the plain card. */
.auth{margin:0;min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,620px);
  background:#fff;color:var(--ink);
  /* the app body is overflow:hidden for its fixed-shell layout; a sign-in page
     must scroll, or a short phone clips the form */
  overflow-x:hidden;overflow-y:auto}
@media (max-width:900px){ .auth{grid-template-columns:1fr} }

/* ── left: brand panel ─────────────────────────────────────────────── */
.auth-brand{position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:44px 48px;background:linear-gradient(155deg,var(--green-darker) 0%,var(--dark-1) 58%,var(--dark-2) 100%);
  color:#e8eef0}
.auth-brand::after{content:"";position:absolute;inset:auto -140px -220px auto;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,rgba(var(--green-rgb),.38),transparent 68%);pointer-events:none}
.auth-brand::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:44px 44px}
.auth-brand-top{display:flex;align-items:center;gap:11px;position:relative;z-index:1}
.auth-brand-body{margin:auto 0;max-width:470px;position:relative;z-index:1;padding:32px 0}
.auth-eyebrow{margin:0 0 14px;font-size:calc(10.5px*var(--fs,1));font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--green-light);opacity:.9}
.auth-brand h1{margin:0 0 18px;font-size:calc(34px*var(--fs,1));line-height:1.2;font-weight:700;
  letter-spacing:-.5px;color:#fff;max-width:18ch;text-wrap:balance}
.auth-lede{margin:0 0 28px;font-size:calc(14px*var(--fs,1));line-height:1.7;color:#a9b6bd;max-width:42ch}
.auth-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.auth-points li{display:flex;align-items:center;gap:10px;font-size:calc(12.5px*var(--fs,1));color:#c5d0d6}
.auth-points .bi{width:19px;height:19px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--green-rgb),.18);border:1px solid rgba(var(--green-rgb),.45);
  color:var(--green-light);font-size:calc(11px*var(--fs,1))}

/* ── "Built on" strip (sign-in, dark panel) ───────────────────────────
   Text wordmarks by default; an operator who drops an SVG into
   static/img/partners/ gets the real mark. Neutral treatment on purpose: a
   wall of full-colour logos on a login page reads as a stock template, and
   these are infrastructure, not endorsements. */
.auth-stack{position:relative;z-index:1;margin-top:26px;padding-top:18px;
  border-top:1px solid #2b343b}
.auth-stack-label{margin:0 0 11px;font-size:calc(9.5px*var(--fs,1));font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;color:#5f6d76}
.auth-stack-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:9px 0}
/* Separator dots rather than a gap alone: four short names in a row read as a
   sentence with a rhythm, and a wrapped second line still aligns. */
.auth-stack-item + .auth-stack-item::before{content:"·";color:#46525a;
  margin:0 12px;font-size:calc(13px*var(--fs,1));font-weight:700;line-height:1;
  /* the dot is a flex child of the item, so it must align with the word, not
     with the item box */
  align-self:center}
.auth-stack-item{display:flex;align-items:center;line-height:1}
.auth-stack-word{font-size:calc(11.5px*var(--fs,1));font-weight:600;letter-spacing:.35px;
  color:#8d9aa2;white-space:nowrap;transition:color .15s ease}
.auth-stack-item:hover .auth-stack-word{color:#d3dce1}
.auth-stack-logo{display:block;height:16px;width:auto;max-width:104px;object-fit:contain;
  opacity:.62;transition:opacity .15s ease;
  /* Keep a supplied colour mark from shouting on a dark panel. */
  filter:grayscale(1) brightness(1.55)}
.auth-stack-item:hover .auth-stack-logo{opacity:.95;filter:grayscale(0) brightness(1)}
@media (prefers-reduced-motion:reduce){
  .auth-stack-logo,.auth-stack-word{transition:none}
}

.auth-brand-foot{display:flex;align-items:center;gap:10px;position:relative;z-index:1;
  font-size:calc(11px*var(--fs,1));color:#6d7b84;letter-spacing:.3px}
.auth-brand-rule{width:26px;height:1px;background:#3b454d}
.auth-brand-vendor{position:relative;z-index:1;margin-top:9px;
  font-size:calc(10.5px*var(--fs,1));color:#85939c;letter-spacing:.6px;text-transform:uppercase}

/* ── right: the form ───────────────────────────────────────────────── */
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px;
  background:linear-gradient(180deg,#fff,var(--gray-50))}
.auth-card{width:100%;max-width:400px}
.auth-mobile-brand{display:none;align-items:center;gap:10px;margin-bottom:26px}
@media (max-width:900px){
  .auth-brand{display:none}
  .auth-mobile-brand{display:flex}
  .auth-main{padding:28px 18px;min-height:100vh;align-items:flex-start}
  .auth-card{margin-top:6vh}
}
.auth-head{margin-bottom:26px}
.auth-head h2{margin:0 0 6px;font-size:calc(24px*var(--fs,1));font-weight:700;letter-spacing:-.2px;color:var(--ink)}
.auth-head p{margin:0;font-size:calc(13px*var(--fs,1));color:var(--muted)}

/* demo roles: the fastest path in, so they read as buttons, not links */
.auth-demo{margin-bottom:22px}
.auth-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.auth-section-head > span:first-child{font-size:calc(10.5px*var(--fs,1));font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--ink-2)}
.auth-section-note{display:inline-flex;align-items:center;gap:4px;font-size:calc(10.5px*var(--fs,1));color:var(--muted)}
.auth-section-note .bi{color:var(--green);font-size:calc(10px*var(--fs,1))}
.auth-demo-form{margin:0}
.auth-role{display:flex;align-items:center;gap:11px;width:100%;margin-bottom:8px;padding:10px 12px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);text-align:left;cursor:pointer;
  transition:border-color .16s,box-shadow .16s,transform .16s,background .16s}
.auth-role:hover{border-color:var(--green);background:var(--green-soft);transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(var(--green-rgb),.13)}
.auth-role:focus-visible{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(var(--green-rgb),.22)}
.auth-role:hover .auth-role-go,.auth-role:focus-visible .auth-role-go{background:var(--green);border-color:var(--green);color:#fff}
.auth-avatar{width:32px;height:32px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--green-soft);border:1px solid var(--green-line);color:var(--green-dark);
  font-size:calc(11.5px*var(--fs,1));font-weight:700;letter-spacing:.4px}
.auth-role-body{flex:1 1 auto;min-width:0}
.auth-role-name{display:block;font-size:calc(13px*var(--fs,1));font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-role-meta{display:block;margin-top:1px;font-size:calc(11px*var(--fs,1));color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-role-pill{flex:0 0 auto;letter-spacing:.4px;text-transform:uppercase;
  font-size:calc(9.5px*var(--fs,1));padding:2px 7px}
.auth-role-go{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);font-size:calc(12px*var(--fs,1));
  transition:background .16s,color .16s,border-color .16s}

/* the divider doubles as the "this is the fallback" signal */
.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0 18px;
  font-size:calc(10.5px*var(--fs,1));letter-spacing:.4px;text-transform:uppercase;color:#98a2aa}
.auth-divider::before,.auth-divider::after{content:"";flex:1 1 auto;height:1px;background:var(--line-soft)}

/* the form itself: label above, icon inside, one clear action */
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-field label{display:block;margin-bottom:6px;font-size:calc(11px*var(--fs,1));font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;color:var(--ink-2)}
.auth-input{position:relative;display:flex;align-items:center}
.auth-input > .bi{position:absolute;left:12px;font-size:calc(14px*var(--fs,1));color:#9aa4ab;pointer-events:none}
.auth-input .form-control{height:42px;padding-left:36px;padding-right:40px}
.auth-input .form-control:focus{box-shadow:0 0 0 3px rgba(var(--green-rgb),.16)}
.auth-eye{position:absolute;right:6px;width:30px;height:30px;display:grid;place-items:center;
  background:transparent;border:0;border-radius:var(--radius);color:#9aa4ab;cursor:pointer}
.auth-eye:hover{background:var(--gray-100);color:var(--ink-2)}
.auth-submit{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:4px;
  background:var(--green);border:1px solid var(--green);border-radius:var(--radius);color:#fff;
  font-size:calc(13.5px*var(--fs,1));font-weight:600;cursor:pointer;
  transition:background .16s,border-color .16s,box-shadow .16s}
.auth-submit:hover{background:var(--green-dark);border-color:var(--green-dark);box-shadow:0 6px 18px rgba(var(--green-rgb),.24)}
.auth-submit:active{transform:translateY(1px)}
.auth-submit:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(var(--green-rgb),.3)}
.auth-submit .bi{font-size:calc(13px*var(--fs,1));transition:transform .16s}
.auth-submit:hover .bi{transform:translateX(3px)}

.auth-foot{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:26px;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:calc(11.5px*var(--fs,1));color:var(--muted);text-align:center}
.auth-foot a{color:var(--green-dark);font-weight:600;text-decoration:none}
.auth-foot a:hover{text-decoration:underline}

/* ── plain card: still used by the SaaS console sign-in ─────────────── */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--gray-50,#f4f6f7);margin:0}
.login-card{background:#fff;border:1px solid var(--line,#e3e7ea);border-radius:var(--radius,10px);padding:28px;width:340px;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.login-brand{font-size:calc(18px*var(--fs,1));font-weight:700;margin-bottom:4px}
.login-sub{color:#8b959e;font-size:calc(12.5px*var(--fs,1));margin-bottom:16px}
.login-foot{margin-top:14px;font-size:calc(12px*var(--fs,1));color:#8b959e;text-align:center}
.login-foot a{color:var(--green);text-decoration:none}

/* ── structure tree (My Details) ── */
.tree{list-style:none;margin:0;padding:0}
.tree ul,.tree-children{list-style:none;margin:0;padding-left:20px;border-left:1px dashed var(--line,#e3e7ea)}
.tree-node{margin:1px 0}
.tree-label{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px}
.tree-label:hover{background:var(--gray-50,#f4f6f7)}
.tree-label .bi{color:#8b959e}
.tree-text{font-size:calc(13px*var(--fs,1))}
.tree-meta{color:#8b959e;font-size:calc(11px*var(--fs,1));margin-left:4px}
.tree-group > .tree-label > .tree-text{font-weight:700}
.tree-company > .tree-label > .tree-text{font-weight:600}
.tree-planned > .tree-label .tree-text{color:#9aa4ad;font-style:italic}
.tree-bp > .tree-label > .tree-text{font-weight:600}
.tree-party > .tree-label .bi{color:var(--green)}
.tree-toggle{background:none;border:0;padding:0 2px;line-height:1;color:#8b959e;cursor:pointer}
.tree-toggle .chev{transition:transform .15s;font-size:calc(11px*var(--fs,1))}
.tree-dot{display:inline-block;width:10px}
.tree-coa > .tree-label > .tree-text{font-weight:600}
.tree-account > .tree-label .bi{color:#8b959e}
.tree-account > .tree-label .tree-meta{text-transform:uppercase;letter-spacing:.4px;font-size:calc(10px*var(--fs,1))}

/* document drawer \u2014 right-side, 80vw, full height (partials/ui/_drawer.html) */
.doc-drawer.fade{opacity:1;transition:opacity .42s cubic-bezier(.16,1,.3,1)}
.doc-drawer.fade:not(.show){opacity:1}
.doc-drawer .modal-dialog{position:fixed;top:0;right:0;bottom:0;left:auto;width:80vw;max-width:80vw;height:100vh;min-height:0;margin:0;display:block;will-change:transform}
.doc-drawer.fade .modal-dialog{transform:translateX(100%);transition:transform .42s cubic-bezier(.16,1,.3,1)}
.doc-drawer.show .modal-dialog{transform:translateX(0)}
.doc-drawer .modal-content{height:100vh;border:0;box-shadow:-8px 0 30px rgba(0,0,0,.12)}
.doc-drawer .modal-header{border-radius:0;flex:0 0 auto}
.doc-drawer .modal-content,.doc-drawer .modal-header,.doc-drawer .modal-footer{border-radius:0 !important}
@media (max-width:900px){.doc-drawer .modal-dialog{width:100vw;max-width:100vw}}

/* zebra striping for list rows */
.xl-table tbody tr:nth-child(even) td{background:#f6f8fa}

/* drawer \u2014 pinned footer: scrollable body + fixed action bar */
/* default: the drawer body scrolls (plain forms) */
.doc-drawer .drawer-body{overflow-y:auto;padding:16px 18px}
/* forms that include a .drawer-scroll get the pinned-footer layout */
.doc-drawer .drawer-body:has(.drawer-scroll){display:flex;flex-direction:column;padding:0;overflow:hidden}
.doc-drawer .drawer-body:has(.drawer-scroll)>form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:100%}
.doc-drawer .drawer-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 18px}
.doc-drawer .drawer-actions{flex:0 0 auto;position:static;margin:0;background:#fff;border-top:1px solid var(--line);padding:10px 18px}

/* document header + trace */
.doc-head{border-bottom:1px dashed var(--line);padding-bottom:8px}
.doc-ref{font-size:calc(15px*var(--fs,1));font-weight:700;color:var(--green-dark);letter-spacing:.3px}
.doc-trace thead th{background:var(--gray-50);font-size:calc(11px*var(--fs,1));text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}

/* read-only document view */
.doc-readonly{border:0;padding:0;margin:0;min-width:0}
.doc-readonly input,.doc-readonly select,.doc-readonly textarea{background:#f7f9fa;color:var(--ink,#22303a);opacity:1}
.doc-readonly .row-btn{display:none}

/* save confirmation banner */
.save-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;margin-bottom:14px;border:1px solid var(--green-line);background:var(--green-soft);color:var(--green-dark);border-radius:var(--radius);animation:saveBannerIn .45s ease both}
.save-banner>i{font-size:calc(24px*var(--fs,1));line-height:1;animation:popIn .5s cubic-bezier(.2,1.4,.4,1) .12s both}
.save-banner-title{font-weight:700;font-size:calc(13.5px*var(--fs,1))}
.save-banner-sub{font-size:calc(12px*var(--fs,1));color:var(--muted)}
.drawer-actions-created .btn-brand{animation:popIn .4s ease .5s both}
@keyframes saveBannerIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

/* document print \u2014 print only the drawer card */
@media print{
  body *{visibility:hidden !important}
  .doc-drawer,.doc-drawer *{visibility:visible !important}
  .modal-backdrop{display:none !important}
  .doc-drawer{position:absolute !important;left:0;top:0;width:100%;height:auto !important;overflow:visible !important}
  .doc-drawer .modal-dialog{position:static !important;transform:none !important;width:100% !important;max-width:100% !important;height:auto !important;margin:0 !important;display:block !important}
  .doc-drawer .modal-content{height:auto !important;border:0 !important;box-shadow:none !important}
  .doc-drawer .drawer-body{display:block !important;height:auto !important;overflow:visible !important}
  .doc-drawer .drawer-scroll{overflow:visible !important;height:auto !important;max-height:none !important;padding:0 !important}
  .doc-drawer .drawer-actions,.doc-drawer .modal-header{display:none !important}
  .doc-drawer .doc-readonly input,.doc-drawer .doc-readonly select,.doc-drawer .doc-readonly textarea{
    border:0 !important;background:#fff !important;padding:0 !important;height:auto !important;
    -webkit-appearance:none;appearance:none}
  .doc-drawer .table-responsive{overflow:visible !important}
}

/* multi-select dropdown (partials/ui/_multiselect.html) */
.ms{position:relative}
.ms-control{position:relative}
.ms-field{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:32px;padding:2px 26px 2px 6px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:text}
.ms-control.is-open .ms-field{border-color:var(--green);box-shadow:0 0 0 2px rgba(var(--green-rgb),.18)}
.ms-tag{display:inline-flex;align-items:center;gap:4px;background:var(--green-soft);color:var(--green-dark);border:1px solid var(--green-line);border-radius:12px;padding:1px 6px 1px 8px;font-size:calc(11.5px*var(--fs,1));font-weight:600;max-width:100%}
.ms-tag>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-tag button{border:0;background:transparent;color:inherit;font-size:calc(13px*var(--fs,1));line-height:1;padding:0 2px;cursor:pointer;opacity:.7}
.ms-tag button:hover{opacity:1}
.ms-input{flex:1 1 60px;min-width:60px;border:0;outline:0;padding:4px 2px;font-size:calc(12.5px*var(--fs,1));background:transparent}
.ms-caret{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:calc(11px*var(--fs,1));cursor:pointer}
.ms-menu{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);max-height:260px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(16,24,40,.14)}
.ms-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;font-size:calc(12.5px*var(--fs,1));cursor:pointer}
.ms-option:hover{background:var(--green-soft)}
.ms-option.is-sel{color:var(--green-dark);font-weight:600}
.ms-option .bi{color:var(--green);font-size:calc(12px*var(--fs,1))}
.ms-empty{padding:8px 10px;color:var(--muted);font-size:calc(12px*var(--fs,1))}

/* PO lines — deselected (skipped) rows */
table.xl-table tbody tr.is-skipped td{background:#fbfbfc;color:#a9b2ba}
table.xl-table tbody tr.is-skipped td.sticky-col{background:#fbfbfc}
table.xl-table tbody tr.is-skipped input,table.xl-table tbody tr.is-skipped select{color:#a9b2ba}

/* ── theme switcher: brand palette per data-theme ───────────── */
[data-theme="green"]{--green:#1b7a3d;--green-dark:#14602f;--green-darker:#0f4a24;--green-soft:#e8f3ec;--green-rgb:27,122,61;--green-line:#bfe0cb;--green-line-soft:#cfe3d6;--green-row:#f4f9f6;--green-light:#7ee0a5}
[data-theme="blue"]{--green:#1b6fb5;--green-dark:#155a92;--green-darker:#0f426e;--green-soft:#e8f1f9;--green-rgb:27,111,181;--green-line:#bcd7ee;--green-line-soft:#cfe0f0;--green-row:#f4f8fc;--green-light:#8fc2ee}
[data-theme="sky"]{--green:#0a79a6;--green-dark:#08648b;--green-darker:#06496a;--green-soft:#e6f3f9;--green-rgb:10,121,166;--green-line:#b3d6e6;--green-line-soft:#cbe4ef;--green-row:#f2f9fc;--green-light:#79c4e4}
[data-theme="teal"]{--green:#0f8a7e;--green-dark:#0b6e65;--green-darker:#084f49;--green-soft:#e6f4f2;--green-rgb:15,138,126;--green-line:#b6e0da;--green-line-soft:#cbe8e3;--green-row:#f2faf8;--green-light:#7fd8cc}
[data-theme="indigo"]{--green:#4f46b8;--green-dark:#3d3596;--green-darker:#2c2670;--green-soft:#eeecf9;--green-rgb:79,70,184;--green-line:#cfcbf0;--green-line-soft:#ded9f4;--green-row:#f6f5fc;--green-light:#b3adf0}
[data-theme="slate"]{--green:#475569;--green-dark:#334155;--green-darker:#1e293b;--green-soft:#eef1f5;--green-rgb:71,85,105;--green-line:#cbd3de;--green-line-soft:#dbe1e8;--green-row:#f5f7f9;--green-light:#9fb0c4}
[data-theme="rose"]{--green:#b5325a;--green-dark:#8f2547;--green-darker:#6b1a34;--green-soft:#fbeaf0;--green-rgb:181,50,90;--green-line:#f0c4d3;--green-line-soft:#f5d6e0;--green-row:#fcf4f7;--green-light:#e88aa8}
[data-theme="amber"]{--green:#a8631a;--green-dark:#874e12;--green-darker:#63390b;--green-soft:#f9efe2;--green-rgb:168,99,26;--green-line:#e8d3b0;--green-line-soft:#efe0c6;--green-row:#fbf7f0;--green-light:#e0b072}

/* ── theme switcher: fonts per data-font ────────────────────── */
[data-font="system"] body,[data-font="system"] input,[data-font="system"] select,[data-font="system"] textarea,[data-font="system"] button{font-family:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif}
[data-font="serif"] body,[data-font="serif"] input,[data-font="serif"] select,[data-font="serif"] textarea,[data-font="serif"] button{font-family:Georgia,"Times New Roman",Times,serif}
[data-font="mono"] body,[data-font="mono"] input,[data-font="mono"] select,[data-font="mono"] textarea,[data-font="mono"] button{font-family:"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace}
[data-font="rounded"] body,[data-font="rounded"] input,[data-font="rounded"] select,[data-font="rounded"] textarea,[data-font="rounded"] button{font-family:"Segoe UI","Trebuchet MS",system-ui,sans-serif}

/* ── self-hosted Google families (variable, latin subset, 400–700) ───
   Files live in static/fonts/; see system/fonts.py for the registry.
   A family is only downloaded when its data-font value is on <html>, so
   the other eight cost nothing. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/inter.woff2") format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/roboto.woff2") format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/open_sans.woff2") format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/source_sans.woff2") format('woff2');}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/work_sans.woff2") format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/nunito.woff2") format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/plex.woff2") format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/jetbrains.woff2") format('woff2');}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/merriweather.woff2") format('woff2');}

[data-font="inter"] body,[data-font="inter"] input,[data-font="inter"] select,[data-font="inter"] textarea,[data-font="inter"] button{font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif}
[data-font="roboto"] body,[data-font="roboto"] input,[data-font="roboto"] select,[data-font="roboto"] textarea,[data-font="roboto"] button{font-family:'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif}
[data-font="open_sans"] body,[data-font="open_sans"] input,[data-font="open_sans"] select,[data-font="open_sans"] textarea,[data-font="open_sans"] button{font-family:'Open Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif}
[data-font="source_sans"] body,[data-font="source_sans"] input,[data-font="source_sans"] select,[data-font="source_sans"] textarea,[data-font="source_sans"] button{font-family:'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, sans-serif}
[data-font="work_sans"] body,[data-font="work_sans"] input,[data-font="work_sans"] select,[data-font="work_sans"] textarea,[data-font="work_sans"] button{font-family:'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif}
[data-font="nunito"] body,[data-font="nunito"] input,[data-font="nunito"] select,[data-font="nunito"] textarea,[data-font="nunito"] button{font-family:'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif}
[data-font="plex"] body,[data-font="plex"] input,[data-font="plex"] select,[data-font="plex"] textarea,[data-font="plex"] button{font-family:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif}
[data-font="jetbrains"] body,[data-font="jetbrains"] input,[data-font="jetbrains"] select,[data-font="jetbrains"] textarea,[data-font="jetbrains"] button{font-family:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace}
[data-font="merriweather"] body,[data-font="merriweather"] input,[data-font="merriweather"] select,[data-font="merriweather"] textarea,[data-font="merriweather"] button{font-family:'Merriweather', Georgia, 'Times New Roman', Times, serif}

/* ── appearance settings page ───────────────────────────────── */
.theme-grid{display:flex;flex-wrap:wrap;gap:10px}
.theme-swatch{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;font-size:calc(12.5px*var(--fs,1));font-weight:600;background:#fff}
.theme-swatch input{display:none}
.theme-swatch.active{border-color:var(--green);box-shadow:0 0 0 2px rgba(var(--green-rgb),.15)}
.theme-chip{width:16px;height:16px;border-radius:50%;display:inline-block;flex:0 0 auto}
/* one dot per palette — colour lives here, never in the template */
.theme-chip[data-code="green"]{background:#1b7a3d}
.theme-chip[data-code="blue"]{background:#1b6fb5}
.theme-chip[data-code="sky"]{background:#0a79a6}
.theme-chip[data-code="teal"]{background:#0f8a7e}
.theme-chip[data-code="indigo"]{background:#4f46b8}
.theme-chip[data-code="slate"]{background:#475569}
.theme-chip[data-code="rose"]{background:#b5325a}
.theme-chip[data-code="amber"]{background:#a8631a}

/* ── document drawer: dark header + themed footer ───────────── */
.doc-drawer .modal-header{background:var(--green-darker) !important;color:#fff;border-bottom:1px solid rgba(255,255,255,.15)}
.doc-drawer .modal-header .modal-title{color:#fff}
.doc-drawer .modal-header .btn-close{filter:invert(1) grayscale(1) brightness(1.9);opacity:.9}
.doc-drawer .drawer-actions{background:var(--green-soft);border-top:1px solid var(--green-dark)}

/* ── text size preference: scales TYPE, never the layout ────────
   Every font size in this sheet (and in template inline styles) is written as
   ``calc(<n>px*var(--fs,1))``. One multiplier therefore moves the type scale
   while box sizes, spacing, sticky offsets and fixed-position geometry stay put
   — no CSS ``zoom``, so nothing is scaled behind our back. */
:root{--fs:1}
[data-size="compact"]{--fs:.92}
[data-size="normal"]{--fs:1}
[data-size="large"]{--fs:1.08}
[data-size="xlarge"]{--fs:1.16}

/* segmented control (settings) */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.seg-item{padding:6px 14px;font-size:calc(12.5px*var(--fs,1));font-weight:600;cursor:pointer;border-right:1px solid var(--line);color:var(--muted);white-space:nowrap}
.seg-item:last-child{border-right:0}
.seg-item input{display:none}
.seg-item.active{background:var(--green);color:#fff}

/* ── pagination (standard pager) ────────────────────────── */
.pager{display:flex;justify-content:flex-end;padding:8px 12px;border-top:1px solid var(--line);background:#fff;position:sticky;left:0}
.pager .pagination{gap:4px;margin:0}
.pager .page-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:28px;padding:0 9px;
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink-2);background:#fff;font-size:calc(12.5px*var(--fs,1));line-height:1;
}
.pager .page-link:hover{background:var(--green-soft);border-color:var(--green-line);color:var(--green-dark)}
.pager .page-link:focus{box-shadow:0 0 0 2px rgba(var(--green-rgb),.25);outline:none}
.pager .page-item.active .page-link{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.pager .page-item.disabled .page-link{background:var(--gray-50);border-color:var(--line-soft);color:var(--muted);cursor:not-allowed;pointer-events:none}
.pager .page-item:first-child .page-link,
.pager .page-item:last-child .page-link{border-radius:var(--radius)}

/* ── PO supplier panel ─────────────────────────────────── */
.supplier-panel{border:1px solid var(--green-line);background:var(--green-soft);border-radius:var(--radius);padding:10px 12px}
.supplier-panel .sp-name{font-weight:700;color:var(--green-dark)}
.supplier-panel .sp-sub{font-size:calc(11.5px*var(--fs,1));color:var(--muted)}
.supplier-panel .sp-bal{font-weight:700;font-variant-numeric:tabular-nums}
.supplier-panel .sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 14px;margin-top:8px}
.supplier-panel .sp-grid>div{display:flex;justify-content:space-between;font-size:calc(12px*var(--fs,1));border-top:1px dashed var(--green-line);padding-top:4px}
.supplier-panel .sp-grid span{color:var(--muted)}

/* ── PO header segments (unique class — .seg is taken by the settings control) ── */
.pseg{display:block;border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:12px;box-shadow:0 1px 2px rgba(31,35,40,.04)}
.pseg-head{display:flex;align-items:center;gap:7px;padding:8px 12px;background:var(--gray-50);border-bottom:1px solid var(--line);font-weight:700;font-size:calc(11.5px*var(--fs,1));letter-spacing:.4px;text-transform:uppercase;color:var(--ink-2);border-radius:var(--radius) var(--radius) 0 0}
.pseg-head .bi{color:var(--green-dark);font-size:calc(14px*var(--fs,1))}
.pseg-body{padding:12px}
.pseg--supplier .pseg-head{background:var(--green-soft);border-bottom-color:var(--green-line);color:var(--green-dark)}
.pseg--supplier .pseg-head .bi{color:var(--green-dark)}
.pseg--receive .pseg-head{background:#eef4fb;border-bottom-color:#cfe0f2;color:#205b8a}
.pseg--receive .pseg-head .bi{color:#205b8a}
.pseg--source .pseg-head{background:#fff8ec;border-bottom-color:#f0d9a8;color:#8a5a00}
.pseg--source .pseg-head .bi{color:#8a5a00}
.pseg:last-child{margin-bottom:0}
.pseg-body .form-label-sm{margin-bottom:3px}

/* PO line footer — outside the horizontal scroll; scrolls with the content */
.lines-foot{display:flex;justify-content:flex-end;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;border-top:2px solid #ccd3da;background:#f3f6f8;font-size:calc(12.5px*var(--fs,1));font-weight:600;color:var(--ink-2);border-radius:0 0 var(--radius) var(--radius)}
.lines-foot b{font-weight:700;color:var(--ink)}
.lines-foot .lf-sep{color:var(--line)}

/* purchase drawer: soft grey canvas so the white segment cards read clearly */
.doc-drawer .drawer-body{background:#fff}
.doc-drawer .drawer-scroll{background:var(--gray-100)}
.doc-drawer .modal-content{background:var(--gray-100)}
.doc-drawer .modal-header{background:var(--green-darker)}

/* ── combobox (partials/ui/_combobox.html) ──────────────────────────── */
.combo{position:relative}
.combo-control{position:relative}
.combo-field{display:flex;align-items:center;width:100%;gap:6px;padding:3px 8px;min-height:31px;background:#fff;border:1px solid var(--field-line);border-radius:var(--radius);font-size:calc(12.5px*var(--fs,1));color:var(--ink);text-align:left;cursor:pointer}
.combo-field:hover{border-color:#c3cad1}
.combo-field:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 2px rgba(var(--green-rgb),.18)}
.combo-control.is-open .combo-field{border-color:var(--green);box-shadow:0 0 0 2px rgba(var(--green-rgb),.18)}
.combo-val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combo-ph{flex:1;color:var(--muted)}
.combo-caret{color:var(--muted);font-size:calc(11px*var(--fs,1))}
.combo-menu{position:absolute;z-index:50;top:calc(100% + 4px);left:0;right:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(16,24,40,.14);overflow:hidden}
.combo-search{display:flex;align-items:center;gap:6px;padding:5px 9px;border-bottom:1px solid var(--line-soft);background:var(--gray-50)}
.combo-search .bi{color:var(--muted);font-size:calc(12px*var(--fs,1))}
.combo-search input{border:0;outline:0;width:100%;font-size:calc(12.5px*var(--fs,1));background:transparent}
.combo-options{flex:1 1 auto;min-height:0;max-height:240px;overflow:auto}
.combo-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;cursor:pointer;font-size:calc(12.5px*var(--fs,1))}
.combo-option:hover{background:var(--green-soft)}
.combo-option.is-sel{background:var(--green-soft);color:var(--green-dark);font-weight:600}
.combo-option.is-active{background:var(--green-soft);box-shadow:inset 3px 0 0 var(--green)}
.combo-opt-label{font-weight:600;color:var(--ink)}
.combo-opt-sub{font-size:calc(11px*var(--fs,1));color:var(--muted)}
.combo-option .bi-check-lg{color:var(--green);font-size:calc(12px*var(--fs,1))}
.combo-empty{padding:8px 10px;text-align:center;color:var(--muted);font-size:calc(12px*var(--fs,1))}
.combo-group{padding:7px 10px 3px;font-size:calc(10px*var(--fs,1));font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  border-top:1px solid var(--line-soft);margin-top:2px;cursor:default;user-select:none}
.combo-group:first-child{border-top:0;margin-top:0}
.combo-option--clear{border-bottom:1px solid var(--line-soft)}
.combo-option--clear .combo-opt-label{font-weight:500;color:var(--muted)}

/* ── inline field warning (partials/ui/_field_warn.html) ────────────── */
.field-warn{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:calc(11.5px*var(--fs,1));font-weight:600;color:#8a5a00}
.field-warn .bi{font-size:calc(11px*var(--fs,1))}

/* ── totals block (partials/ui/_totals_list.html) ───────────────────── */
.totals-bar{display:flex;flex-direction:column;gap:4px;margin-left:auto;min-width:280px;max-width:440px;padding:10px 12px}
.totals-row{display:flex;justify-content:space-between;gap:24px;font-size:calc(13px*var(--fs,1));color:var(--ink-2)}
.totals-row.is-warn{color:#8a5a00;font-weight:600}
.totals-grand{border-top:2px solid var(--line);margin-top:2px;padding-top:6px;font-size:calc(15px*var(--fs,1));font-weight:800;color:var(--ink)}
.lines-totals{display:flex;justify-content:flex-end;border-top:1px solid var(--line);background:var(--gray-50);border-radius:0 0 var(--radius) var(--radius)}

/* ── expandable line detail (GRN form) ──────────────────────────────── */
table.xl-table tr.line-detail > td{padding:0;background:var(--gray-50);border-top:1px dashed var(--line)}
.line-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 12px;padding:10px 12px}
.line-detail-grid .form-label-sm{margin-bottom:2px}

/* ── per-cell searchable select (partials/ui/_combo_cell.html) ──────── */
.combo-cell{position:relative}
.combo-field--sm{min-height:26px;padding:2px 6px;font-size:calc(12px*var(--fs,1));border-color:transparent;background:transparent}
.combo-cell .combo-field:hover{border-color:var(--line);background:#fff}
.combo-cell .combo-field.is-disabled{opacity:.45;cursor:not-allowed}
.combo-cell .combo-val{min-height:16px}
.combo-menu--fixed{position:fixed;z-index:3000;right:auto}

/* lines table: selection + expandable detail */
table.xl-table tbody tr.is-unselected > td{background:#fbfcfd;color:#98a2b3}
table.xl-table tbody tr.row-open > td{background:#eef5f1}
table.xl-table tr.line-detail > td{
  padding:0;background:#e4ebef;border-top:1px dashed var(--line);
  box-shadow:inset 3px 0 0 var(--green);
}

/* ── read-only fields: a clear, non-editable affordance ─────────────── */
.form-control.field-ro,.form-select.field-ro{background:var(--gray-100);color:var(--ink-2);border-style:dashed;cursor:default}
.form-control.field-ro:focus{box-shadow:none;border-color:var(--line)}

/* ── expand toggle at the start of a line ───────────────────────────── */
.row-toggle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:6px;padding:0;border:1px solid var(--green-line);border-radius:var(--radius);background:var(--green-soft);color:var(--green-dark);font-size:calc(10px*var(--fs,1));line-height:1;cursor:pointer;vertical-align:-2px}
.row-toggle:hover{background:var(--green);border-color:var(--green);color:#fff}
.row-toggle.is-open{background:var(--green);border-color:var(--green);color:#fff}

/* ── expanded line detail: a white card on a grey band ──────────────── */
.line-detail-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin:8px 10px;padding:10px 12px}
.line-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px}
.line-detail-grid .form-label-sm{margin-bottom:3px}

/* ── GRN lines: no zebra, no row-bg hover (feels broken with editable cells) ── */
table.xl-table[data-table-id="grn-lines"] tbody tr:nth-child(even) td{background:#fff}
table.xl-table[data-table-id="grn-lines"] tbody tr:hover td{background:#fff}
table.xl-table[data-table-id="grn-lines"] tbody tr:hover td.sticky-col{background:#fff}
table.xl-table[data-table-id="grn-lines"] tbody tr.is-unselected td,
table.xl-table[data-table-id="grn-lines"] tbody tr.is-unselected:hover td{background:#fbfcfd}
table.xl-table[data-table-id="grn-lines"] tbody tr.row-open td,
table.xl-table[data-table-id="grn-lines"] tbody tr.row-open:hover td{background:#eef5f1}
table.xl-table[data-table-id="grn-lines"] tbody tr.line-detail td,
table.xl-table[data-table-id="grn-lines"] tbody tr.line-detail:hover td{background:var(--gray-100);box-shadow:none}

@media (max-width:1100px){ .line-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .line-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:380px){ .line-detail-grid{grid-template-columns:1fr} }

/* ── combobox viewport anchor (pins the fixed menu to the real viewport) ── */
.combo-anchor{position:fixed;left:0;top:0;width:1px;height:1px;visibility:hidden;pointer-events:none}

/* ── GRN lines: colour-coded quantity columns ───────────────────────── */
table.xl-table[data-table-id="grn-lines"] thead th.col-received{border-bottom:3px solid #2f7fc1}
table.xl-table[data-table-id="grn-lines"] thead th.col-accepted{border-bottom:3px solid var(--green)}
table.xl-table[data-table-id="grn-lines"] thead th.col-rejected{border-bottom:3px solid #d98324}
table.xl-table[data-table-id="grn-lines"] tbody tr td.col-received{background:#f2f8fd}
table.xl-table[data-table-id="grn-lines"] tbody tr td.col-accepted{background:#f1f8f3}
table.xl-table[data-table-id="grn-lines"] tbody tr td.col-rejected{background:#fdf6ec}
table.xl-table[data-table-id="grn-lines"] tbody tr td.col-received input:focus{background:#eaf4fd}
table.xl-table[data-table-id="grn-lines"] tbody tr td.col-accepted input:focus{background:#e9f5ec}
table.xl-table[data-table-id="grn-lines"] tbody tr td.col-rejected input:focus{background:#fdf1e0}

/* ── GRN lines: make non-writable cells obvious ─────────────────────── */
table.xl-table[data-table-id="grn-lines"] td.editable input:disabled,
table.xl-table[data-table-id="grn-lines"] td input:disabled,
table.xl-table[data-table-id="grn-lines"] td select:disabled{
  background:var(--gray-100);color:#a9b2ba;cursor:not-allowed;
}
table.xl-table[data-table-id="grn-lines"] .combo-field.is-disabled{
  background:var(--gray-100);border-color:var(--line-soft);color:#a9b2ba;opacity:1;cursor:not-allowed;
}
table.xl-table[data-table-id="grn-lines"] tr.is-unselected td.col-received,
table.xl-table[data-table-id="grn-lines"] tr.is-unselected td.col-accepted,
table.xl-table[data-table-id="grn-lines"] tr.is-unselected td.col-rejected{background:#f6f8fa}

/* ── bill lines: tint the editable columns (spreadsheet feel) ───────── */
table.xl-table[data-table-id="bill-lines"] tbody td.cell-txt{background:#fff;padding:6px 8px;font-size:calc(12.5px*var(--fs,1));color:#40505f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.xl-table[data-table-id="bill-lines"] tbody td.editable{background:#f4f9ff}
table.xl-table[data-table-id="bill-lines"] tbody tr:hover td.editable{background:#eef6ff}
table.xl-table[data-table-id="bill-lines"] tbody td.editable input{color:#1d2b3a}
table.xl-table[data-table-id="bill-lines"] tbody td.editable input:focus{background:#e7f2ff;box-shadow:inset 0 0 0 2px rgba(47,127,193,.4)}
table.xl-table[data-table-id="bill-lines"] thead th.col-edit{border-bottom:3px solid #2f7fc1}

/* ── vendor payment request: excel grid, colour-coded editable columns ── */
table.xl-table[data-table-id="pr-vendor-lines"] tbody tr:nth-child(even) td{background:#fff}
table.xl-table[data-table-id="pr-vendor-lines"] tbody tr:hover td{background:var(--green-row)}
/* per-column tint: request amount (blue) · date (green) · bank (amber) · notes (violet) */
table.xl-table[data-table-id="pr-vendor-lines"] thead th.col-req{border-bottom:3px solid #2f7fc1}
table.xl-table[data-table-id="pr-vendor-lines"] thead th.col-date{border-bottom:3px solid var(--green)}
table.xl-table[data-table-id="pr-vendor-lines"] thead th.col-bank{border-bottom:3px solid #d98324}
table.xl-table[data-table-id="pr-vendor-lines"] thead th.col-notes{border-bottom:3px solid #7b61c1}
table.xl-table[data-table-id="pr-vendor-lines"] tbody td.col-req{background:#f2f8fd}
table.xl-table[data-table-id="pr-vendor-lines"] tbody td.col-date{background:#f1f8f3}
table.xl-table[data-table-id="pr-vendor-lines"] tbody td.col-bank{background:#fdf6ec}
table.xl-table[data-table-id="pr-vendor-lines"] tbody td.col-notes{background:#f6f4fd}
table.xl-table[data-table-id="pr-vendor-lines"] tbody tr:hover td.col-req{background:#eaf4fd}
table.xl-table[data-table-id="pr-vendor-lines"] tbody tr:hover td.col-date{background:#e9f5ec}
table.xl-table[data-table-id="pr-vendor-lines"] tbody tr:hover td.col-bank{background:#fdf1e0}
table.xl-table[data-table-id="pr-vendor-lines"] tbody tr:hover td.col-notes{background:#f0ecfb}
table.xl-table[data-table-id="pr-vendor-lines"] tbody td.col-req input:focus{background:#e7f2ff;box-shadow:inset 0 0 0 2px rgba(47,127,193,.4)}
table.xl-table[data-table-id="pr-vendor-lines"] tbody td.col-date input:focus{background:#e4f3e8;box-shadow:inset 0 0 0 2px rgba(var(--green-rgb),.4)}
table.xl-table[data-table-id="pr-vendor-lines"] tbody td.col-bank select:focus{background:#fdf1e0;box-shadow:inset 0 0 0 2px rgba(217,131,36,.4)}
table.xl-table[data-table-id="pr-vendor-lines"] tbody td.col-notes input:focus{background:#f0ecfb;box-shadow:inset 0 0 0 2px rgba(123,97,193,.4)}
/* date / select cells size to the excel row like the plain text inputs */
table.xl-table[data-table-id="pr-vendor-lines"] td.col-date input[type="date"]{padding:0 8px}

/* ── number inputs: hide the spinner arrows (everywhere) ────────────── */
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}

/* ── notifications (partials/ui/_notifications.html) ────────────────── */
.notif-host{position:fixed;top:calc(var(--topbar-h) + 12px);right:16px;z-index:3050;display:flex;flex-direction:column;gap:8px;width:340px;max-width:calc(100vw - 32px);pointer-events:none}
.notif{position:relative;display:flex;gap:10px;align-items:flex-start;padding:10px 12px 12px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:var(--radius);box-shadow:0 8px 24px rgba(16,24,40,.16);transform:translateX(120%);opacity:0;transition:transform .22s ease,opacity .22s ease;pointer-events:auto;overflow:hidden;font-size:calc(13px*var(--fs,1))}
.notif.is-in{transform:none;opacity:1}
.notif-icon{font-size:calc(16px*var(--fs,1));line-height:1.35}
.notif-body{flex:1;min-width:0}
.notif-title{font-weight:700;font-size:calc(11.5px*var(--fs,1));letter-spacing:.4px;text-transform:uppercase;margin-bottom:1px}
.notif-msg{color:var(--ink-2);word-break:break-word}
.notif-close{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:0 2px;line-height:1;font-size:calc(13px*var(--fs,1))}
.notif-close:hover{color:var(--ink)}
.notif-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;background:var(--green);animation-name:notifBar;animation-timing-function:linear;animation-fill-mode:forwards;animation-duration:4000ms}
.notif.is-paused .notif-bar{animation-play-state:paused}
@keyframes notifBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.notif--success{border-left-color:var(--green)}
.notif--success .notif-icon,.notif--success .notif-title{color:var(--green-dark)}
.notif--success .notif-bar{background:var(--green)}
.notif--info{border-left-color:#2f7fc1}
.notif--info .notif-icon,.notif--info .notif-title{color:#205b8a}
.notif--info .notif-bar{background:#2f7fc1}
.notif--warning{border-left-color:#d98324}
.notif--warning .notif-icon,.notif--warning .notif-title{color:#8a5a00}
.notif--warning .notif-bar{background:#d98324}
.notif--error{border-left-color:#c0392b}
.notif--error .notif-icon,.notif--error .notif-title{color:#9b1c1c}
.notif--error .notif-bar{background:#c0392b}
@media (max-width:640px){ .notif-host{left:12px;right:12px;width:auto} }
@media (prefers-reduced-motion:reduce){ .notif{transition:none;transform:none;opacity:1} }

/* ── topbar company switch: require confirmation before switching ───── */
.tb-switch{gap:6px}
.switch-confirm{display:inline-flex;align-items:center;gap:6px;padding:3px 6px;background:var(--dark-3);border:1px solid #3a424a;border-radius:var(--radius)}
.switch-confirm .btn{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;padding:1px 8px;font-size:calc(11.5px*var(--fs,1));line-height:1.5;white-space:nowrap}

/* ── settings hub accordion (templates/system/settings.html) ────────── */
.set-acc{border:1px solid var(--line);border-radius:var(--radius);background:#fff;margin-bottom:12px;box-shadow:0 1px 2px rgba(31,35,40,.04)}
.set-acc>summary{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;list-style:none;font-weight:700;font-size:calc(13px*var(--fs,1));color:var(--ink-2);background:var(--gray-50);border-radius:var(--radius)}
.set-acc>summary::-webkit-details-marker{display:none}
.set-acc>summary .bi{color:var(--green-dark);font-size:calc(15px*var(--fs,1))}
.set-acc>summary::after{content:"\F282";font-family:"bootstrap-icons";margin-left:auto;color:var(--muted);font-size:calc(12px*var(--fs,1));transition:transform .15s ease}
.set-acc[open]>summary::after{transform:rotate(180deg)}
.set-acc[open]>summary{border-bottom:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0}
.set-acc-sub{font-weight:400;font-size:calc(11.5px*var(--fs,1));color:var(--muted);text-transform:none;letter-spacing:0}
/* Settings section number chip — the stable handle used to point at a section ("settings S-05"). */
.set-acc-num{flex:none;min-width:42px;text-align:center;padding:2px 6px;border:1px solid var(--green-dark);border-radius:var(--radius);background:var(--green);color:#fff;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:calc(10.5px*var(--fs,1));font-weight:700;line-height:1.35;letter-spacing:.02em;box-shadow:0 1px 1px rgba(31,35,40,.08)}
.set-acc[open]>summary .set-acc-num{background:var(--green-dark);border-color:var(--green-darker)}
.set-acc-body{padding:14px}
.set-acc-body .form-section:last-child{margin-bottom:0}

/* ── access editor: level colour-coding ─────────────────────────────── */
.form-select.lvl-view{background:#eaf3fd;border-color:#9cc4e8;color:#1c4e80}
.form-select.lvl-change{background:#e9f6ed;border-color:#8fcea2;color:var(--green-dark)}
.form-select.lvl-deny{background:#fdecec;border-color:#f0b4b4;color:#9b1c1c}
.form-select.lvl-none{color:#98a2b3}
tr.acc-view > td{background:#f4f9fe}
tr.acc-change > td{background:#f1f9f3}
tr.acc-deny > td{background:#fdf1f1}
.acc-legend{display:flex;gap:14px;align-items:center;font-size:calc(11.5px*var(--fs,1));color:var(--muted);margin-bottom:6px;flex-wrap:wrap}
.acc-legend .sw{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--line);vertical-align:-2px;margin-right:4px}

/* ── access editor: deeper level colours + status icons ─────────────── */
.form-select.lvl-view{background:#d7e9fb;border-color:#4f93d1;color:#123c66;font-weight:600}
.form-select.lvl-change{background:#d3efdd;border-color:#3a9257;color:#0e4f30;font-weight:600}
.form-select.lvl-deny{background:#fbd6d6;border-color:#c74b41;color:#841d18;font-weight:600}
.form-select.lvl-none{color:#98a2b3}
tr.acc-view > td{background:#e4f1fc}
tr.acc-change > td{background:#ddf2e4}
tr.acc-deny > td{background:#fadede}
tr.acc-view > td:first-child{box-shadow:inset 3px 0 0 #4f93d1}
tr.acc-change > td:first-child{box-shadow:inset 3px 0 0 #3a9257}
tr.acc-deny > td:first-child{box-shadow:inset 3px 0 0 #c74b41}
tr.acc-view td .lvl-ico{color:#2b6ba6}
tr.acc-change td .lvl-ico{color:#0e4f30}
tr.acc-deny td .lvl-ico{color:#9b1c1c}
.lvl-ico{font-size:calc(12.5px*var(--fs,1))}
table[data-table-id="access-matrix"] select.form-select{min-width:0;flex:1 1 auto}
.lvl-ico{flex:0 0 auto}

/* ── segmented tabs (reusable; e.g. inventory item scope) ───────────── */
.seg-tabs{display:inline-flex;align-self:flex-start;max-width:100%;border:1px solid var(--line);border-radius:var(--radius);overflow-x:auto;overflow-y:hidden;background:#fff;box-shadow:0 1px 2px rgba(31,35,40,.04);scrollbar-width:none}
.seg-tabs::-webkit-scrollbar{height:0}
/* works as an <a> (linked filter) and as a <button> (in-place tab switch): the
   border reset is what keeps a button from drawing the UA bevel inside the group */
.seg-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;font-family:inherit;font-size:calc(12.5px*var(--fs,1));font-weight:600;line-height:1.4;color:var(--ink-2);background:#fff;border:0;border-right:1px solid var(--line);white-space:nowrap;cursor:pointer;text-decoration:none}
.seg-tab:last-child{border-right:0}
.seg-tab .bi{font-size:calc(13px*var(--fs,1));color:var(--muted)}
.seg-tab:hover{background:var(--green-soft);color:var(--green-dark)}
.seg-tab:hover .bi{color:var(--green-dark)}
.seg-tab.active{background:var(--green);color:#fff}
.seg-tab.active .bi{color:#fff}

/* nested drawer — 10% narrower, and its own dim layer ABOVE the first drawer */
.doc-drawer--nested{z-index:1080;background:rgba(15,20,25,.45)}

/* a centered modal opened on top of another modal: it carries its own dim layer
   and sits above every drawer, so the overlay lands right under the popup */
.modal-stacked{z-index:1090;background:rgba(15,20,25,.45)}
.doc-drawer--nested .modal-dialog{width:72vw;max-width:72vw}
@media (max-width:900px){.doc-drawer--nested .modal-dialog{width:100vw;max-width:100vw}}

/* ── drawer loading state (base.html hook) ──────────────────────────── */
.drawer-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;min-height:220px;padding:40px;color:var(--muted)}
.dl-spin{width:40px;height:40px;border-radius:50%;border:3px solid var(--green-soft);border-top-color:var(--green);animation:dl-spin .75s linear infinite;box-shadow:0 0 0 6px rgba(var(--green-rgb),.06)}
.dl-text{font-size:calc(12.5px*var(--fs,1));font-weight:600;letter-spacing:.4px}
@keyframes dl-spin{to{transform:rotate(360deg)}}

/* ── global form controls: checkboxes/radios match brand ─────────────── */
input[type="checkbox"],input[type="radio"]{accent-color:var(--green);width:15px;height:15px;cursor:pointer;vertical-align:middle}
input[type="checkbox"]:disabled,input[type="radio"]:disabled{cursor:not-allowed;opacity:.55}

/* clip long single-line cell text (e.g. branch address) with ellipsis */
.cell-clip{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}

/* ── pricing drawer: sticky, full-bleed opaque search bar ────────────── */
.drawer-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:sticky;top:0;z-index:4;
  background:var(--gray-100);margin:0 -18px 10px;padding:10px 18px;
  border-bottom:1px solid var(--line);box-shadow:0 6px 8px -8px rgba(16,24,40,.35)}
.drawer-toolbar .input-group-text{background:#fff;border-color:var(--line);color:var(--muted)}
.doc-drawer .drawer-scroll::-webkit-scrollbar{width:14px;height:14px}
.doc-drawer .drawer-scroll::-webkit-scrollbar-track{background:#e9edf1;border-left:1px solid var(--line-soft)}
.doc-drawer .drawer-scroll::-webkit-scrollbar-thumb{background:#8a97a1;border:3px solid #e9edf1;border-radius:8px;min-height:44px}
.doc-drawer .drawer-scroll::-webkit-scrollbar-thumb:hover{background:var(--green-dark)}
.doc-drawer .drawer-scroll{scrollbar-width:auto;scrollbar-color:#8a97a1 #e9edf1}

/* ── POS: filters, view toggle, held sales, qty input, checkout ─────── */
.pos-view-toggle { display: flex; gap: 2px; flex-shrink: 0; }
.pos-vt {
  width: 38px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--gray-50); color: var(--muted);
  cursor: pointer; font-size:calc(15px*var(--fs,1));
}
.pos-vt:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.pos-vt:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: 0; }
.pos-vt:hover { color: var(--green-dark); background: var(--green-soft); }
.pos-vt.active { background: var(--green); border-color: var(--green); color: #fff; }
.pos-search-wrap { display: flex; gap: 8px; }
.pos-search-wrap .pos-search-input { flex: 1; }

.pos-filters { border-bottom: 1px solid var(--line); }
.pos-filter-row { display: flex; gap: 8px; align-items: center; padding: 8px 12px; }
.pos-filter-row .form-select { max-width: 170px; }
.pos-stock-toggle {
  display: flex; align-items: center; gap: 6px; font-size:calc(12px*var(--fs,1)); color: var(--ink-2);
  margin-left: auto; white-space: nowrap; cursor: pointer;
}
.pos-stock-toggle input { cursor: pointer; }

.pos-card-img img { width: 100%; height: 100%; object-fit: cover; }

.pos-held { border-top: 1px solid var(--line); padding: 6px 12px 8px; background: var(--gray-50); }
.pos-held-title { font-size:calc(11px*var(--fs,1)); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 4px; }
.pos-held-row {
  display: flex; justify-content: space-between; width: 100%; padding: 5px 8px; margin-bottom: 3px;
  font-size:calc(12px*var(--fs,1)); background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; text-align: left;
}
.pos-held-row:hover { border-color: var(--green); background: var(--green-soft); }

.pos-qty-input {
  width: 44px; height: 24px; text-align: center; padding: 0 2px;
  border: 1px solid var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size:calc(12.5px*var(--fs,1)); font-weight: 600; border-radius: 0;
}
.pos-qty-input:focus { outline: none; border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }

/* checkout modal: statement preview + fields */
.pos-pay-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; }
.pos-statement {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; max-height: 340px; display: flex; flex-direction: column;
}
.pos-statement-head { padding: 8px 12px; background: var(--gray-50); border-bottom: 1px solid var(--line);
  font-size:calc(11px*var(--fs,1)); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.pos-statement-lines { overflow-y: auto; flex: 1; }
.pos-statement-line { display: flex; justify-content: space-between; gap: 8px; padding: 5px 12px; font-size:calc(12.5px*var(--fs,1)); border-bottom: 1px dashed var(--line-soft); }
.pos-statement-line .qty { color: var(--muted); }
.pos-statement-foot { border-top: 2px solid var(--line); padding: 8px 12px; }
.pos-statement-row { display: flex; justify-content: space-between; font-size:calc(12.5px*var(--fs,1)); padding: 2px 0; }
.pos-statement-row.grand { font-size:calc(16px*var(--fs,1)); font-weight: 700; color: var(--green-dark); border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.pos-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size:calc(12px*var(--fs,1)); }
.pos-meta-grid .k { color: var(--muted); }
@media (max-width: 900px) { .pos-pay-grid { grid-template-columns: 1fr; } }

/* POS checkout drawer — statement + payment side */
.pos-pay-side { display: flex; flex-direction: column; }
.pos-due { display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 14px; background: var(--green-soft); border: 1px solid var(--green-line); border-radius: var(--radius); }
.pos-due .k { font-size:calc(11px*var(--fs,1)); text-transform: uppercase; letter-spacing: .5px; color: var(--green-dark); font-weight: 700; }
.pos-due .v { font-size:calc(26px*var(--fs,1)); font-weight: 800; color: var(--green-dark); }
.pos-meta { border-top: 1px solid var(--line-soft); padding-top: 10px; }
.pos-meta-row { display: flex; justify-content: space-between; font-size:calc(12px*var(--fs,1)); padding: 2px 0; }
.pos-meta-row .k { color: var(--muted); }
@media (max-width: 900px) {
  .pos-pay-grid { grid-template-columns: 1fr; }
  .pos-statement { max-height: 220px; }
}

/* POS checkout: the statement plank is a compact KOT-style slip (max 600px);
   the drawer keeps the global width. Payment fields sit to its right. */
.pos-pay-grid { grid-template-columns: minmax(0, 600px) minmax(280px, 1fr); align-items: start; }
.pos-statement { max-width: 600px; }
.pos-statement-lines { max-height: 320px; }

/* POS checkout: payment left, statement slip right; editable unit price */
.pos-statement-line { align-items: center; }
.pos-statement-name { flex: 1; min-width: 0; }
.pos-statement-price { display: flex; align-items: center; gap: 8px; }
.pos-price-input {
  width: 76px; height: 24px; text-align: right; padding: 0 4px;
  border: 1px solid transparent; background: transparent;
  font-size:calc(12.5px*var(--fs,1)); color: var(--green-dark); font-weight: 600; border-radius: 3px;
}
.pos-price-input:hover { border-color: var(--line); background: var(--gray-50); }
.pos-price-input:focus { outline: none; border-color: var(--green); background: #fff; box-shadow: 0 0 0 2px rgba(var(--green-rgb),.18); }
.pos-statement-price .line-amt { min-width: 62px; text-align: right; font-weight: 700; }

/* cart line: editable unit price (price/discount belong to the till screen) */
.pos-rate-input {
  width: 72px; height: 26px; text-align: right; padding: 0 4px;
  border: 1px solid transparent; background: transparent; border-radius: 3px;
  font-size:calc(12.5px*var(--fs,1)); font-weight: 600; color: var(--green-dark);
}
.pos-rate-input:hover { border-color: var(--line); background: #fff; }
.pos-rate-input:focus { outline: none; border-color: var(--green); background: #fff; box-shadow: 0 0 0 2px rgba(var(--green-rgb),.18); }
.pos-line-price { display: flex; align-items: center; }

/* POS auto-add-on-match toggle */
.pos-autoadd {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 0 12px; height: 40px; font-size:calc(12px*var(--fs,1)); color: var(--ink-2);
  border: 1px solid var(--line); background: var(--gray-50);
  border-radius: var(--radius); cursor: pointer; white-space: nowrap;
}
.pos-autoadd input { cursor: pointer; margin: 0; }
.pos-autoadd:has(input:checked) { background: var(--green-soft); border-color: var(--green); color: var(--green-dark); font-weight: 600; }

/* branch field: a locked badge when the user's role fixes the branch */
.branch-locked {
  display: flex; align-items: center; gap: 6px; height: 31px; padding: 0 10px;
  font-size:calc(12.5px*var(--fs,1)); color: var(--ink); background: var(--gray-50);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.branch-locked i { color: var(--green); }

/* POS cart: a little wider, and a two-row line with discount controls */
.pos-grid { grid-template-columns: minmax(0, 1fr) 620px; }
.pos-disc-label { color: var(--muted); font-size:calc(11px*var(--fs,1)); }
.pos-disc-pct { display: flex; align-items: center; }
.pos-disc-input {
  width: 56px; height: 24px; text-align: right; padding: 0 4px;
  border: 1px solid var(--line); border-radius: 3px; font-size:calc(12px*var(--fs,1)); color: var(--ink);
}
.pos-disc-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px rgba(var(--green-rgb),.18); }
.pos-disc-suffix { color: var(--muted); margin-left: 2px; }
.pos-line .pos-line-amt { min-width: 84px; margin-left: auto; text-align: right; font-size:calc(13.5px*var(--fs,1)); }

/* POS guest state + remove-customer button */
.pos-party-avatar-guest { background: var(--gray-100); color: var(--muted); }
.pos-party-guest { background: var(--gray-50); }
.pos-party-x { padding: 4px 8px; margin-left: 2px; }
.pos-party-x:hover { color: #9b1c1c; background: #fdecec; border-color: #f3c2c2; }

/* POS cart table header — mirrors the line columns */
.pos-cart-head {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  font-size:calc(10.5px*var(--fs,1)); font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--muted); background: var(--gray-50); border-bottom: 1px solid var(--line);
}
.pos-cart-head span { flex-shrink: 0; }
.pos-ch-main { flex: 1; min-width: 0; }
.pos-ch-rate { width: 72px; text-align: right; }
.pos-ch-qty { width: 92px; text-align: center; }
.pos-ch-discpct { width: 64px; text-align: right; }
.pos-ch-discfix { width: 56px; text-align: right; }
.pos-ch-amt { width: 84px; text-align: right; }
.pos-ch-x { width: 24px; }
.pos-line .pos-rate-input { width: 72px; }
.pos-line .pos-line-qty { width: 92px; justify-content: center; }
.pos-line .pos-disc-pct { width: 64px; }
.pos-line .pos-disc-input { width: 56px; }
.pos-line-remove { width: 24px; }

/* POS cart grid feel: zebra rows + column separators */
.pos-cart-head { border-right: 0; }
.pos-cart-head > span { border-left: 1px solid var(--line-soft); padding: 0 4px; }
.pos-cart-head > span:first-child { border-left: 0; }
.pos-cart-scroll .pos-line { border-bottom: 1px solid var(--line-soft); }
.pos-line:nth-child(even) { background: var(--gray-50); }
.pos-line > * + * { border-left: 1px solid var(--line-soft); padding-left: 6px; }
.pos-line > .pos-line-main { border-left: 0; padding-left: 0; }
.pos-line:hover { background: var(--green-soft); }

/* POS keyboard navigation — the row/card currently targeted by Enter */
.pos-card.is-active {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  background: var(--green-soft);
  box-shadow: 0 0 0 3px rgba(var(--green-rgb), .12);
}
#product-grid tr.is-active > td { background: var(--green-soft) !important; }
#product-grid tr.is-active > td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.pos-kbd-hint { font-size:calc(10.5px*var(--fs,1)); color: var(--muted); padding: 0 12px 8px; }
.pos-kbd-hint kbd {
  font-family: inherit; font-size:calc(10px*var(--fs,1)); padding: 1px 4px; border-radius: 3px;
  border: 1px solid var(--line); background: var(--gray-50); color: var(--ink-2);
}

/* ── POS till bar: branch + pricing mode (sticky till settings) ─────── */
.pos-tillbar {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(31, 35, 40, .04);
}
.pos-till-field { display: flex; flex-direction: column; gap: 3px; }
.pos-till-field > label {
  font-size:calc(10.5px*var(--fs,1)); font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--ink-2); margin: 0;
}
.pos-till-field .form-select { min-width: 220px; }
.pos-till-field .branch-locked { font-size:calc(13px*var(--fs,1)); padding: 5px 2px; }
.pos-pricing-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pos-pricing-opt { display: inline-flex; align-items: center; cursor: pointer; margin: 0; }
.pos-pricing-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pos-pricing-opt > span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; font-size:calc(12.5px*var(--fs,1)); color: var(--ink-2); background: #fff;
  border-right: 1px solid var(--line);
}
.pos-pricing-opt:last-child > span { border-right: 0; }
.pos-pricing-opt:hover > span { background: var(--gray-50); }
.pos-pricing-opt.active > span { background: var(--green-soft); color: var(--green-dark); font-weight: 700; }
.pos-till-note { margin-left: auto; font-size:calc(11.5px*var(--fs,1)); }
.pos-till-warn { color: #8a5a00; background: #fff4e0; border: 1px solid #f0d9a8;
  padding: 4px 8px; border-radius: var(--radius); display: inline-flex; gap: 5px; }

/* POS notice strip (e.g. the purchase counter is browse-only). Its space
   below comes from the page gap — no margin of its own to double it up. */
.pos-notice {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 12px; font-size:calc(12.5px*var(--fs,1));
  background: #eef4fb; border: 1px solid #cfe0f2; border-radius: var(--radius); color: #205b8a;
}
.pos-notice .bi { font-size:calc(15px*var(--fs,1)); line-height: 1.3; }
.pos-notice a { color: #205b8a; font-weight: 700; text-decoration: underline; }

/* ── Structure tree: architecture legend + feature state colours ──── */
.arch-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding: 8px 10px; margin-bottom: 10px;
  background: var(--gray-50); border: 1px solid var(--line); border-radius: var(--radius);
}
.arch-legend-item { display: inline-flex; align-items: center; gap: 6px;
  font-size:calc(11.5px*var(--fs,1)); color: var(--ink-2); }
.arch-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.arch-dot--ok { background: var(--green); }
.arch-dot--muted { background: var(--muted); opacity: .45; }
.arch-dot--bad { background: #b5325a; }

/* feature / module / edition / screen node affordances */
.tree-node.tree-feature > .tree-label .tree-meta,
.tree-node.tree-module > .tree-label .tree-meta,
.tree-node.tree-edition > .tree-label .tree-meta { font-size:calc(10.5px*var(--fs,1)); }
.tree-node .pill.pill-info { text-transform: none; letter-spacing: 0; }
.tree-node.tree-edition > .tree-label .bi { color: var(--green-dark); }
.tree-node.tree-portfolio > .tree-label .bi { color: var(--green-dark); }
.tree-node.tree-screen > .tree-label { opacity: .85; }
.tree-node.tree-screen > .tree-label .tree-meta { font-family: ui-monospace, monospace; }

/* ── SaaS tenant console: feature toggle grid ─────────────────────── */
.saas-cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.saas-cap {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px;
  background: #fff; display: flex; flex-direction: column; gap: 6px;
}
.saas-cap--always { background: var(--green-soft); border-color: var(--green-line); }
.saas-cap--on { border-color: var(--green-line); }
.saas-cap--out { background: #fdf3f5; border-color: #f0ccd5; opacity: .92; }
.saas-cap-head { display: flex; align-items: center; gap: 6px; font-size:calc(13px*var(--fs,1)); font-weight: 600; }
.saas-cap-head .bi { color: var(--green-dark); font-size:calc(14px*var(--fs,1)); }
.saas-cap--out .saas-cap-head .bi { color: #b5325a; }
.saas-cap-name { flex: 1; line-height: 1.25; }
.saas-cap-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.saas-cap-action { margin-top: auto; }
.saas-cap-action .btn { width: 100%; }

/* ── Project System: WBS structure rows ──────────────────────────── */
.ps-wbs-row > td { vertical-align: middle; }
.ps-wbs-label { display: flex; align-items: center; gap: 4px; }
.ps-wbs-row:hover { background: var(--green-soft); }

/* ── physical count sheet ──────────────────────────────────────────── */
/* a line that disagrees with the books is the thing being looked for */
table.xl-table tbody tr.row-variance td{background:#fffaf0}
table.xl-table tbody tr.row-variance td.editable{background:#fff6e5}
table.xl-table tbody tr.row-variance:hover td{background:#fff4e0}
table.xl-table tbody tr.row-variance:hover td.editable{background:#ffefd6}

/* ── estimate grid (Excel-style line sheet) ──────────────────────────
   The estimate drawer is a costing sheet, not a form: wider than the standard
   document drawer, frozen # and WBS columns, and a pinned footer that keeps the
   running total in view while the rows scroll. */
.doc-drawer.doc-drawer--wide .modal-dialog{width:min(96vw,1680px);max-width:96vw}
table.est-grid{table-layout:fixed;min-width:1420px}
table.est-grid td,table.est-grid th{padding:4px 6px}
table.est-grid td .combo-cell{min-width:0}
table.est-grid td .combo-field{padding:2px 4px;min-height:26px;font-size:calc(12px*var(--fs,1))}
table.est-grid td .combo-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.est-grid td.editable input{padding:2px 6px;height:26px;font-size:calc(12.5px*var(--fs,1))}
table.est-grid tbody tr.row-err td{background:#fff6f5}
table.est-grid tbody tr.row-err td.sticky-col{background:#fff6f5}
table.est-grid tbody tr.is-spent td{color:var(--muted)}
table.est-grid input.cell-warn{color:#b54708;font-weight:600;background:#fffaeb}
.est-grid-scroll{max-height:52vh}
.est-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:8px 10px;border-top:2px solid #ccd3da;background:#f3f6f8;font-size:calc(12px*var(--fs,1))}
.est-foot-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.est-foot-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.est-metric{color:var(--ink-2);white-space:nowrap}
.est-metric b{color:var(--ink);font-weight:700}
.est-total b{font-size:calc(13.5px*var(--fs,1));color:var(--green-dark)}
.est-import-btn.disabled{opacity:.55;pointer-events:none}
.wbs-rollup{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px 8px;
  border-top:1px solid var(--line-soft);background:#fafbfc;font-size:calc(11.5px*var(--fs,1))}
.wbs-rollup-title{text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:700}
.wbs-chip{padding:1px 7px;border:1px solid var(--line);border-radius:10px;background:#fff;white-space:nowrap}
.wbs-chip b{color:var(--green-dark)}

/* breakpoints for the sheet — appended section, never inline */
@media (max-width:1100px){
  .doc-drawer.doc-drawer--wide .modal-dialog{width:100vw;max-width:100vw}
  .est-grid-scroll{max-height:46vh}
}
@media (max-width:640px){
  .est-foot{flex-direction:column;align-items:flex-start}
  .est-foot-right{gap:10px}
}

/* ── drawer full screen ─────────────────────────────────────────────
   The header button (or Shift+F) lifts the drawer off the right edge and fills
   the viewport. Declared with two classes so it outranks .doc-drawer--wide,
   which also sets a width. */
.doc-drawer .modal-header .cw-drawer-full{
  background:transparent;border:0;padding:2px 5px;border-radius:4px;line-height:1;
  color:#fff;opacity:.85;font-size:calc(15px*var(--fs,1));cursor:pointer;
}
.doc-drawer .modal-header .cw-drawer-full:hover{opacity:1;background:rgba(255,255,255,.14)}
.doc-drawer .modal-header .cw-drawer-full:focus-visible{outline:2px solid #fff;outline-offset:2px}
.doc-drawer.doc-drawer--full .modal-dialog{width:100vw;max-width:100vw}
.doc-drawer.doc-drawer--full .modal-content{box-shadow:none}
.doc-drawer.doc-drawer--full .drawer-scroll{padding:18px 22px}
/* a sheet that is full screen may use more height before it scrolls */
.doc-drawer.doc-drawer--full .est-grid-scroll{max-height:calc(100vh - 220px)}

/* breakpoints: on a phone the drawer already fills the viewport, so the toggle
   would do nothing — hide it rather than show a dead control */
@media (max-width:900px){
  .doc-drawer .modal-header .cw-drawer-full{display:none}
  .doc-drawer.doc-drawer--full .est-grid-scroll{max-height:52vh}
}

/* ── dropdown over a frozen column ──────────────────────────────────
   A sticky <td> with a z-index is its own stacking context, so the cell editor's
   fixed menu (z-index 3000) is painted *inside* the cell — underneath the sticky
   table header at z-index 4. That is why the WBS picker opened below the column
   instead of over it. While a cell menu is open, lift the cell itself above the
   header; it drops back to 2 as soon as the menu closes. */
table.xl-table td.sticky-col:has(.combo-control.is-open),
table.xl-table th.sticky-col:has(.combo-control.is-open){z-index:4000}

/* ── document interlinks ────────────────────────────────────────────
   A reference is a button, not a link: it opens the other document in the peek
   drawer on top of the current one. It must look like a reference, not a CTA. */
.doc-link{
  background:none;border:0;padding:0;font:inherit;font-weight:600;
  color:var(--green-dark);text-decoration:underline;text-decoration-style:dotted;
  text-underline-offset:2px;cursor:pointer;font-size:inherit;
}
.doc-link:hover{color:var(--green);text-decoration-style:solid}
.doc-link:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:3px}
.doc-link .bi{font-size:calc(10px*var(--fs,1));margin-left:2px;opacity:.7}
.doc-link-sub{color:var(--muted);font-size:calc(11px*var(--fs,1))}
.doc-drawer--nested .modal-header{background:var(--green-dark) !important}

/* ── estimate drawer: the "Request now" column is editable ────────────
   Same affordance as the bill / GRN grids: the header carries a coloured rule
   and the writable cells are tinted, so it is obvious at a glance where you can
   type. Only cells that actually hold an input are tinted — a row with nothing
   left to request keeps its plain background and its "—". */
table.xl-table[data-table-id="estimate-lines-view"] thead th.col-edit{
  border-bottom:3px solid #2f7fc1;
}
table.xl-table[data-table-id="estimate-lines-view"] tbody td.col-edit:has(input){
  background:#f4f9ff;
}
table.xl-table[data-table-id="estimate-lines-view"] tbody tr:hover td.col-edit:has(input){
  background:#eef6ff;
}
table.xl-table[data-table-id="estimate-lines-view"] tbody td.col-edit input{
  height:29px;padding:0 8px;border:0;border-radius:0;background:transparent;
  color:#1d2b3a;box-shadow:none;
}
table.xl-table[data-table-id="estimate-lines-view"] tbody td.col-edit input:focus{
  outline:0;background:#e7f2ff;box-shadow:inset 0 0 0 2px rgba(47,127,193,.45);
}

/* ── requisition line grid: free-text rows and the price unit ─────────
   A line with no item master (a service, a quote) is still a real line. It is
   marked so the eye can tell it apart from a catalogue item, and its unit is
   typed rather than inherited. */
table.xl-table tbody tr.row-free td:nth-child(2){color:var(--muted)}
table.xl-table tbody tr.row-free td:nth-child(2) span::after{content:"";}
table.xl-table td input.cell-uom{padding:0 6px;font-size:calc(12px*var(--fs,1));text-transform:none}
table.xl-table td.col-edit input{background:transparent}
table.xl-table td.col-edit{background:#f7fbff}
table.xl-table tbody tr:hover td.col-edit{background:#eef6ff}
table.xl-table td.col-edit input:focus{background:#fff;box-shadow:inset 0 0 0 2px rgba(47,127,193,.35)}

/* ── PS schedule / Gantt ────────────────────────────────────────────────
   Hand-rolled on purpose: no chart library, no build step. Every bar is a
   div positioned in percent, computed server-side by ps.services.schedule,
   so the geometry is testable in Python and the browser only paints. */
.ps-tab-body{min-height:40px}

.gantt{border-top:1px solid var(--line);padding:0 0 6px}
.gantt-scroll{overflow-x:auto}
.gantt-inner{position:relative;min-width:820px;--gantt-label-w:330px}
.gantt-legend{
  display:flex;align-items:center;gap:16px;font-size:calc(11px*var(--fs,1));color:var(--muted);
  padding:2px 0 8px;
}
.gantt-legend span{display:inline-flex;align-items:center;gap:5px}
.gantt-swatch{width:16px;height:8px;border-radius:2px;display:inline-block}
.gantt-swatch--wbs{background:var(--green)}
.gantt-swatch--task{background:#5a97d6}
.gantt-swatch--late{background:#c0392b}
.gantt-swatch--today{width:2px;height:12px;background:#e0a800}

.gantt-head{display:flex;border-bottom:1px solid var(--line);background:var(--gray-50)}
.gantt-head-label{
  width:var(--gantt-label-w);flex:0 0 var(--gantt-label-w);
  padding:6px 10px;font-size:calc(11px*var(--fs,1));font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;color:var(--ink-2);
  border-right:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
}
.gantt-head-sub{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
.gantt-head-scale{position:relative;flex:1 1 auto;height:30px}
.gantt-tick{
  position:absolute;top:0;height:30px;display:flex;align-items:center;
  padding-left:5px;font-size:calc(10.5px*var(--fs,1));color:var(--muted);
  border-left:1px solid var(--line-soft);overflow:hidden;white-space:nowrap;
}
.gantt-tick.is-month{border-left-color:var(--line);color:var(--ink-2);font-weight:600}

.gantt-body{position:relative}
.gantt-row{display:flex;align-items:stretch;border-bottom:1px solid var(--line-soft);min-height:30px}
.gantt-row:hover{background:var(--green-row)}
.gantt-row.is-task{background:#fbfcfd}
.gantt-row.is-task:hover{background:var(--green-row)}
.gantt-row.is-late .gantt-label-name{color:#a02b1f}
.gantt-label{
  width:var(--gantt-label-w);flex:0 0 var(--gantt-label-w);
  display:flex;align-items:center;gap:6px;padding:4px 10px 4px 0;
  border-right:1px solid var(--line);font-size:calc(12px*var(--fs,1));overflow:hidden;white-space:nowrap;
}
.gantt-label-name{overflow:hidden;text-overflow:ellipsis;max-width:44%}
.gantt-dates{margin-left:auto;font-size:calc(10.5px*var(--fs,1));color:var(--muted);white-space:nowrap}
.gantt-task-dot{width:5px;height:5px;border-radius:50%;background:#5a97d6;flex:0 0 5px}
.gantt-track{position:relative;flex:1 1 auto;min-height:30px}
.gantt-cell{position:absolute;top:0;bottom:0;border-left:1px solid var(--line-soft)}
.gantt-cell.is-month{border-left-color:var(--line)}
.gantt-bar{
  position:absolute;top:7px;height:15px;border-radius:3px;
  background:var(--green-line);box-shadow:inset 0 0 0 1px var(--green);
  min-width:4px;display:flex;align-items:center;overflow:hidden;
}
.gantt-bar.is-task{background:#d8e8f7;box-shadow:inset 0 0 0 1px #5a97d6}
.gantt-bar.is-late{background:#f6d5d1;box-shadow:inset 0 0 0 1px #c0392b}
.gantt-bar.is-milestone{
  width:11px !important;height:11px;top:9px;transform:rotate(45deg);
  border-radius:1px;background:#e0a800;box-shadow:none;
}
.gantt-bar-fill{
  position:absolute;left:0;top:0;bottom:0;background:var(--green);opacity:.85;
}
.gantt-bar.is-task .gantt-bar-fill{background:#5a97d6}
.gantt-bar.is-late .gantt-bar-fill{background:#c0392b}
.gantt-bar-pct{
  position:relative;font-size:calc(9.5px*var(--fs,1));font-weight:700;color:#fff;
  padding:0 4px;z-index:1;text-shadow:0 1px 1px rgba(0,0,0,.35);
}
.gantt-unscheduled{
  position:absolute;left:6px;top:4px;border:1px dashed var(--field-line);
  background:#fff;border-radius:3px;font-size:calc(10px*var(--fs,1));color:var(--muted);
  padding:1px 7px;cursor:pointer;
}
.gantt-unscheduled:hover{color:var(--green-dark);border-color:var(--green)}
.gantt-actions{
  width:64px;flex:0 0 64px;display:flex;align-items:center;gap:2px;
  justify-content:flex-end;padding-right:6px;opacity:0;transition:opacity .12s;
}
.gantt-row:hover .gantt-actions{opacity:1}
/* the line lives in an overlay that starts where the track starts, so its
   position is a plain percentage — no calc() arithmetic across a px + % mix */
.gantt-today-track{
  position:absolute;top:30px;bottom:0;right:0;
  left:var(--gantt-label-w);pointer-events:none;z-index:2;
}
.gantt-today{
  position:absolute;top:0;bottom:0;width:0;border-left:2px solid #e0a800;
}
.gantt-today span{
  position:absolute;top:-24px;left:-1px;transform:translateX(-40%);
  background:#e0a800;color:#fff;font-size:calc(9.5px*var(--fs,1));font-weight:700;
  padding:1px 5px;border-radius:2px;white-space:nowrap;
}

@media (max-width:1100px){
  .gantt-inner{--gantt-label-w:250px}
  .gantt-label-name{max-width:38%}
  .gantt-dates{display:none}
}
@media (max-width:640px){
  .gantt-inner{--gantt-label-w:170px}
  .gantt-legend{flex-wrap:wrap;gap:8px}
}

/* the tree's inline progress meter — same reading as the Gantt bar */
.ps-progress{height:6px;background:var(--gray-200);border-radius:3px;overflow:hidden;margin-top:3px}
.ps-progress span{display:block;height:100%;background:var(--green);border-radius:3px}
.ps-progress-pct{font-size:calc(10px*var(--fs,1));color:var(--muted)}

/* the timeline's money strip: physical vs cost, baseline slip, coverage */
.gantt-signals{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.gantt-signal{
  flex:1 1 130px;min-width:120px;border:1px solid var(--line);border-radius:var(--radius);
  padding:5px 9px;background:var(--gray-50);
}
.gantt-signal-label{display:block;font-size:calc(10px*var(--fs,1));text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.gantt-signal-value{display:block;font-size:calc(15px*var(--fs,1));font-weight:700;color:var(--ink)}
.gantt-signal-foot{display:block;font-size:calc(10px*var(--fs,1));color:var(--muted)}
.gantt-signal.is-bad{border-color:#e7b4ad;background:#fdf1ef}
.gantt-signal.is-bad .gantt-signal-value{color:#a02b1f}
.gantt-signal.is-warn{border-color:#f0d9a8;background:#fff8ec}
.gantt-signal.is-warn .gantt-signal-value{color:#8a5a00}

.gantt-cash{display:flex;align-items:flex-end;gap:4px;margin:2px 0 8px}
.gantt-cash-label{font-size:calc(10.5px*var(--fs,1));color:var(--muted);white-space:nowrap;margin-right:6px}
.gantt-cash-month{position:relative;flex:1 1 0;height:26px;display:flex;align-items:flex-end}
.gantt-cash-month i{display:block;width:100%;background:var(--green-line);border-radius:2px 2px 0 0}
.gantt-cash-month em{
  position:absolute;bottom:-13px;left:0;right:0;text-align:center;
  font-size:calc(8.5px*var(--fs,1));font-style:normal;color:var(--muted);white-space:nowrap;
}

/* ── report cockpit ────────────────────────────────────────────────────────
   Persona-first layout: the same reports are grouped by who reads them, and
   every card states whether it can answer the question today. The page is a
   plain column of blocks — spacing comes from .content / .stack, never from
   margins on the blocks themselves. */
.cov-bar{display:flex;height:10px;border-radius:3px;overflow:hidden;background:var(--gray-200)}
.cov-bar span{display:block;height:100%}
.cov-ready{background:var(--green)}
.cov-partial{background:#e0a800}
.cov-gap{background:#c8ced6}
.cov-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:calc(11px*var(--fs,1));color:var(--muted)}
.cov-legend span{display:inline-flex;align-items:center;gap:5px}
.cov-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.cov-dot--ready{background:var(--green)}
.cov-dot--partial{background:#e0a800}
.cov-dot--gap{background:#c8ced6}

.cockpit-asks{display:flex;gap:14px;font-size:calc(12.5px*var(--fs,1))}
.cockpit-asks-label{
  flex:0 0 auto;font-size:calc(10.5px*var(--fs,1));text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);padding-top:2px;
}
.cockpit-asks ul{margin:0;padding-left:18px;columns:2;column-gap:28px}
.cockpit-asks li{margin-bottom:3px;break-inside:avoid}

.cockpit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.cockpit-card{
  display:flex;flex-direction:column;gap:5px;padding:10px 12px;
  border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--radius);background:#fff;
  box-shadow:0 1px 2px rgba(31,35,40,.04);color:inherit;text-decoration:none;
  transition:border-color .12s, box-shadow .12s, transform .12s;
}
/* every card carries the same 3px left rule, so text in a row stays aligned
   whatever state the card is in — the colour is the signal, not the width */
.cockpit-card.is-ready{border-left-color:var(--green)}
.cockpit-card.is-partial{border-left-color:#e0a800}
/* hover tints the card's outline, never its state rule on the left */
a.cockpit-card:hover{border-top-color:var(--green);border-right-color:var(--green);border-bottom-color:var(--green);box-shadow:0 2px 8px rgba(27,122,61,.12);transform:translateY(-1px)}
.cockpit-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cockpit-card-title{font-weight:700;font-size:calc(13px*var(--fs,1));color:var(--ink)}
.cockpit-card-top .bi{font-size:calc(12px*var(--fs,1));color:var(--muted)}
.cockpit-card-question{font-size:calc(11.5px*var(--fs,1));color:var(--muted);flex:1 1 auto}
.cockpit-card-gap{
  font-size:calc(10.5px*var(--fs,1));color:#8a5a00;background:#fff8ec;border-left:2px solid #e0a800;
  padding:4px 7px;border-radius:0 2px 2px 0;
}
.cockpit-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cockpit-card-foot b{font-size:calc(12.5px*var(--fs,1));font-variant-numeric:tabular-nums}
.cockpit-card-foot .pill{font-size:calc(10px*var(--fs,1));text-transform:none;letter-spacing:0}
.cockpit-card.is-gap{background:var(--gray-50);border-style:dashed;border-left-width:3px;border-left-color:var(--line)}
.cockpit-card.is-gap .cockpit-card-title{color:var(--ink-2)}
.cockpit-card.is-gap .cockpit-card-top .bi{color:#b0b7bf}

@media (max-width:900px){
  .cockpit-asks{flex-direction:column;gap:6px}
  .cockpit-asks ul{columns:1}
}

/* ── data import page ────────────────────────────────────────── */
.imp-group{
  font-size:calc(10.5px*var(--fs,1));text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  margin:10px 0 4px;font-weight:700;
}
.imp-group:first-child{margin-top:0}
.imp-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:5px 8px;border-radius:var(--radius);color:var(--ink-2);
  font-size:calc(12.5px*var(--fs,1));text-decoration:none;border:1px solid transparent;
}
.imp-item:hover{background:var(--green-soft);color:var(--green-dark)}
.imp-item.active{background:var(--green-soft);border-color:var(--green-line);
  color:var(--green-dark);font-weight:600}
.imp-item-key{font-size:calc(10px*var(--fs,1));color:var(--muted)}
.imp-item.active .imp-item-key{color:var(--green-dark);opacity:.7}

.imp-steps{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.imp-step{
  display:inline-flex;align-items:center;gap:6px;font-size:calc(11.5px*var(--fs,1));color:var(--muted);
  background:var(--gray-50);border:1px solid var(--line-soft);border-radius:20px;
  padding:3px 10px;
}
.imp-step b{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:var(--green);color:#fff;
  font-size:calc(9.5px*var(--fs,1));
}
.imp-counts{display:flex;gap:16px;flex-wrap:wrap;font-size:calc(12.5px*var(--fs,1))}
.imp-counts span{display:inline-flex;align-items:baseline;gap:4px;color:var(--muted)}
.imp-counts b{font-size:calc(15px*var(--fs,1));color:var(--ink)}
.imp-counts .is-new b{color:var(--green-dark)}
.imp-counts .is-upd b{color:#205b8a}
.imp-counts .is-skip b{color:var(--muted)}
.imp-counts .is-err b{color:#a02b1f}

/* ── handbook popup ──────────────────────────────────────────────
   The header icon opens a panel that anyone can read — including a field
   worker on a phone. So: one column, big touch targets, no horizontal scroll,
   and the body is fetched only when a page is opened. */
.hb-wrap{padding:2px 0 8px}
.hb-search{
  display:flex;align-items:center;gap:8px;background:var(--gray-50);
  border:1px solid var(--line);border-radius:var(--radius);padding:7px 11px;
  margin-bottom:12px;
}
.hb-search .bi{color:var(--muted);font-size:calc(13px*var(--fs,1))}
.hb-search input{
  border:0;background:transparent;outline:0;flex:1 1 auto;min-width:0;
  font-size:calc(13px*var(--fs,1));color:var(--ink);
}
.hb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.hb-chip{
  border:1px solid var(--line);background:#fff;border-radius:20px;
  padding:5px 12px;font-size:calc(12px*var(--fs,1));color:var(--ink-2);
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
.hb-chip:hover{border-color:var(--green-line);background:var(--green-soft);color:var(--green-dark)}
.hb-chip-n{
  font-size:calc(10.5px*var(--fs,1));color:var(--muted);
  background:var(--gray-50);border-radius:10px;padding:0 6px;
}
.hb-group{margin-bottom:16px}
.hb-group-head{
  font-size:calc(10.5px*var(--fs,1));text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);font-weight:700;margin-bottom:6px;
}
.hb-list{display:flex;flex-direction:column;gap:2px}
.hb-row{
  display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line-soft);
  padding:10px 6px;cursor:pointer;border-radius:0;
}
.hb-row:hover{background:var(--green-soft)}
.hb-row:hover .hb-row-title{color:var(--green-dark)}
.hb-row-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.hb-row-title{font-size:calc(13.5px*var(--fs,1));font-weight:600;color:var(--ink)}
.hb-row-sum{font-size:calc(12px*var(--fs,1));color:var(--muted);line-height:1.35}
.hb-row-meta{font-size:calc(10.5px*var(--fs,1));color:var(--muted);white-space:nowrap;padding-top:2px}
.hb-row-go{color:#c3c9cf;font-size:calc(11px*var(--fs,1));padding-top:3px}
.hb-child{margin-left:14px;border-left:1px solid var(--line);padding-left:8px}
.hb-section-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:calc(11.5px*var(--fs,1));color:var(--muted);margin-bottom:8px;
}
.hb-empty{text-align:center;color:var(--muted);padding:32px 12px}
.hb-empty .bi{font-size:calc(26px*var(--fs,1));display:block;margin-bottom:8px;opacity:.5}

/* one page */
.hb-page-head{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:calc(11.5px*var(--fs,1));color:var(--muted);margin-bottom:10px;
}
.hb-kicker{color:var(--muted)}
.hb-dot{color:#c9ced4}
.hb-parent{
  display:inline-flex;align-items:center;gap:5px;background:var(--gray-50);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:3px 9px;font-size:calc(11.5px*var(--fs,1));color:var(--ink-2);
  cursor:pointer;margin-bottom:12px;
}
.hb-parent:hover{border-color:var(--green-line);color:var(--green-dark)}
.hb-body{max-width:74ch}
.hb-body h1{
  font-size:calc(19px*var(--fs,1));font-weight:700;color:var(--ink);
  margin:0 0 10px;scroll-margin-top:12px;
}
.hb-body h2{
  font-size:calc(15px*var(--fs,1));font-weight:700;color:var(--ink);
  margin:20px 0 7px;scroll-margin-top:12px;
}
.hb-body h3{font-size:calc(13.5px*var(--fs,1));font-weight:700;margin:16px 0 6px}
.hb-body p{font-size:calc(13px*var(--fs,1));line-height:1.6;color:var(--ink-2);margin:0 0 9px}
.hb-body ul,.hb-body ol{margin:0 0 10px;padding-left:20px}
.hb-body li{font-size:calc(13px*var(--fs,1));line-height:1.6;color:var(--ink-2);margin-bottom:3px}
.hb-body strong{color:var(--ink)}
.hb-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:calc(11.5px*var(--fs,1));background:var(--gray-50);
  border:1px solid var(--line-soft);border-radius:3px;padding:1px 4px;
}
.hb-body .dash-code{
  background:var(--gray-50);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:10px 12px;overflow-x:auto;margin:0 0 12px;
}
.hb-body .dash-code code{background:none;border:0;padding:0}
.hb-body blockquote{
  border-left:3px solid var(--green-line);background:var(--green-soft);
  margin:0 0 12px;padding:8px 12px;color:var(--ink-2);
  font-size:calc(12.5px*var(--fs,1));
}
.hb-body hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.hb-body .dash-table{width:100%;margin-bottom:12px}
.hb-body .dash-table th{
  font-size:calc(11px*var(--fs,1));text-transform:uppercase;letter-spacing:.3px;
  color:var(--muted);border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;
}
.hb-body .dash-table td{
  font-size:calc(12.5px*var(--fs,1));padding:6px 8px;
  border-bottom:1px solid var(--line-soft);color:var(--ink-2);
}
.hb-body a{color:var(--green-dark);text-decoration:underline;text-decoration-style:dotted}

.hb-toc{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--gray-50);
  margin-bottom:14px;padding:8px 12px;
}
.hb-toc summary{
  font-size:calc(11.5px*var(--fs,1));color:var(--muted);cursor:pointer;
  text-transform:uppercase;letter-spacing:.4px;font-weight:700;
}
.hb-toc ul{list-style:none;margin:8px 0 0;padding:0}
.hb-toc li{font-size:calc(12px*var(--fs,1));color:var(--ink-2);padding:2px 0}
.hb-toc-l2{padding-left:14px !important}
.hb-toc-l3{padding-left:28px !important;color:var(--muted) !important}

.hb-pager{display:flex;gap:10px;justify-content:space-between;margin-top:20px}
/* a page with only one neighbour keeps its button on its own side */
.hb-pager-next{margin-left:auto}
.hb-pager-btn{
  flex:1 1 0;min-width:0;text-align:left;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:8px 12px;cursor:pointer;
}
.hb-pager-btn:hover{border-color:var(--green-line);background:var(--green-soft)}
.hb-pager-next{text-align:right}
.hb-pager-dir{
  display:block;font-size:calc(10.5px*var(--fs,1));color:var(--muted);
  text-transform:uppercase;letter-spacing:.4px;
}
.hb-pager-title{display:block;font-size:calc(12.5px*var(--fs,1));font-weight:600;color:var(--ink)}

/* ── editable cells in any grid (UI-501) ───────────────────────────────
   The header carries a coloured rule and the writable cells are tinted, so it
   is obvious where you may type. Applies to every `.xl-table`, not one table:
   the same affordance should not have to be re-declared per screen (it was,
   and the next grid silently came out untinted).
   The zebra rule `tr:nth-child(even) td` outranks a bare `td.col-edit`, so the
   even-row selector is repeated here — otherwise the tint vanishes on every
   other row. */
table.xl-table thead th.col-edit{border-bottom:3px solid #2f7fc1}
table.xl-table tbody td.col-edit,
table.xl-table tbody tr:nth-child(even) td.col-edit{background:#f4f9ff}
table.xl-table tbody tr:hover td.col-edit,
table.xl-table tbody tr:nth-child(even):hover td.col-edit{background:#eef6ff}
/* the input itself is transparent, so the cell's tint is what you see —
   a white input inside a tinted cell hides the whole affordance */
table.xl-table tbody td.col-edit input,
table.xl-table tbody td.col-edit select{
  background:transparent;border:0;box-shadow:none;width:100%;text-align:right;
}
table.xl-table tbody td.col-edit input:focus,
table.xl-table tbody td.col-edit select:focus{
  outline:0;background:#fff;box-shadow:inset 0 0 0 2px rgba(47,127,193,.35);
}

/* ── parts picker: the quantity cell answers "can the shelf cover it?" ──
   Green when the quantity sits inside the free stock, amber when it exceeds
   it. The colour lives on the cell so the column reads as a strip, and the
   header keeps the grid's own colours — recolouring a header on a themed
   table makes the label disappear. */
/* Fixed, not themed: this is a status signal, not decoration. `--green-soft`
   follows the company theme (a purple theme turned "green" lavender), and a
   colour that changes meaning with the theme is worse than no colour. */
table.xl-table[data-table-id="parts-picker"] tbody td.qty-cell.qty-ok,
table.xl-table[data-table-id="parts-picker"] tbody tr:nth-child(even) td.qty-cell.qty-ok,
table.xl-table[data-table-id="issue-lines"] tbody td.qty-ok,
table.xl-table[data-table-id="issue-lines"] tbody tr:nth-child(even) td.qty-ok{
  background:#e9f6ed;
  box-shadow:inset 2px 0 0 #68b884;
}
table.xl-table[data-table-id="parts-picker"] tbody td.qty-cell.qty-over,
table.xl-table[data-table-id="parts-picker"] tbody tr:nth-child(even) td.qty-cell.qty-over,
table.xl-table[data-table-id="issue-lines"] tbody td.qty-over,
table.xl-table[data-table-id="issue-lines"] tbody tr:nth-child(even) td.qty-over{
  background:#fff4e0;
  box-shadow:inset 2px 0 0 #f0d9a8;
}
table.xl-table[data-table-id="parts-picker"] tbody td.qty-cell input{
  background:transparent;font-weight:600;
}
table.xl-table[data-table-id="parts-picker"] tbody td.qty-cell.qty-ok input{color:#1a7a3f}
table.xl-table[data-table-id="parts-picker"] tbody td.qty-cell.qty-over input{color:#8a5a00}
table.xl-table[data-table-id="issue-lines"] tbody td.qty-ok input{color:#1a7a3f}
table.xl-table[data-table-id="issue-lines"] tbody td.qty-over input{color:#8a5a00}

/* pseg-sub — a quiet divider heading inside a pseg-body (delivery, notes & files).
   Lighter than .form-section-title, which is a full-width banner for top-level sections. */
.pseg-sub{display:flex;align-items:center;gap:6px;margin-top:6px;padding-top:10px;border-top:1px dashed var(--line);font-weight:700;font-size:calc(11px*var(--fs,1));letter-spacing:.4px;text-transform:uppercase;color:var(--ink-2)}
.pseg-sub .bi{color:var(--green-dark);font-size:calc(13px*var(--fs,1))}

/* a required-by date sooner than the item's usual lead time: flagged on the line, never blocked */
.xl-table td.editable input.cell-warn{background:var(--warn-bg);box-shadow:inset 0 0 0 1px var(--warn)}

/* import page: a shell command to copy, in the opening-balance guide */
.imp-cmd{margin:6px 0 10px;padding:8px 10px;background:var(--gray-50);border:1px solid var(--line-soft);border-radius:var(--radius);font-size:calc(11.5px*var(--fs,1));white-space:pre-wrap;word-break:break-all}
.imp-guide h6{margin:14px 0 4px;font-weight:700;font-size:calc(12.5px*var(--fs,1))}
.imp-guide h6:first-child{margin-top:0}
.imp-guide p,.imp-guide li{font-size:calc(12px*var(--fs,1))}

/* items list — bulk action bar (visible only while rows are selected; Alpine owns it) */
.bulk-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--gray-50);font-size:calc(12.5px*var(--fs,1))}
.bulk-bar .muted{color:var(--ink-2);font-size:calc(11.5px*var(--fs,1))}

/* ── business partners (appended block) ──────────────────────── */
/* Role pills used to carry an inline font-size in the master table; a class
   keeps the sizing in one place and lets the partner list style its own
   badges without touching another master's markup. */
.pill-role { font-size: calc(9.5px * var(--fs, 1)); }

/* stock issues — toolbar field widths (were inline styles; a width is styling, not markup) */
.tb-field .tb-w-search{width:180px}
.tb-field .tb-w-store{width:150px}
.tb-field .tb-w-type{width:150px}
.tb-field .tb-w-status{width:120px}
.tb-field .tb-w-date{width:142px}

/* plant maintenance — the quiet meta line beside a cell (assignee, age unit,
   "worst first"). Replaces the repeated inline font-size the page carried. */
.fs-note{font-size:calc(11px*var(--fs,1))}

/* Equipment QA: one small-text utility instead of repeated inline font-size. */
.small-text { font-size: calc(11.5px * var(--fs, 1)); }

/* ── plant machines (appended block) ──────────────────────────── */
/* Quick filter chips above the register: one tap sets the same filters the
   toolbar sets, and the count says how many you will see. Not tabs — the
   section's tabs already sit above the toolbar. */
.chip-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--line);
  border-radius:999px;background:#fff;color:var(--ink-2);font-size:calc(12px*var(--fs,1));
  font-weight:600;line-height:1.6;white-space:nowrap;text-decoration:none;cursor:pointer}
.chip:hover{background:var(--green-soft);color:var(--green-dark);border-color:var(--green-line)}
.chip.active{background:var(--green);color:#fff;border-color:var(--green)}
.chip-count{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--gray-100);
  color:var(--ink-2);font-size:calc(10.5px*var(--fs,1));text-align:center}
.chip.active .chip-count{background:rgba(255,255,255,.22);color:#fff}
.chip:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* A stale meter: amber after 7 days, red after 30. Not an alarm — a hint that
   the number on the row may be older than the driver thinks. */
.meter-stale-warn{color:var(--warn);font-weight:600}
.meter-stale-bad{color:#9b1c1c;font-weight:600}

/* Phone: the register keeps Code · Machine · Meter · Status. The remaining
   columns are hidden as a *trailing* group, so no cell shifts off its <col>
   (the trap the transfer sheet documents). Everything hidden is in the peek
   drawer, which the code link opens. */
@media (max-width: 640px){
  table.xl-table[data-table-id="plant-machines"] th:nth-child(n+5),
  table.xl-table[data-table-id="plant-machines"] td:nth-child(n+5){display:none}
  table.xl-table[data-table-id="plant-machines"] colgroup > col:nth-child(1){width:82px !important}
  table.xl-table[data-table-id="plant-machines"] colgroup > col:nth-child(3){width:74px !important}
  table.xl-table[data-table-id="plant-machines"] colgroup > col:nth-child(4){width:96px !important}
  table.xl-table[data-table-id="plant-machines"] th,
  table.xl-table[data-table-id="plant-machines"] td{padding-left:5px;padding-right:5px}
}

/* plant rentals — a phone keeps Ref · Machine · Amount/Unbilled · Status and
   moves the rest into the peek drawer. Hidden by matching header *and* cell so
   the table model stays consistent (never hide a cell and leave its header). */
@media (max-width: 640px) {
  table.xl-table tr > .hide-phone { display: none; }
}

/* ── saas console hardening (appended block) ──────────────────────── */
:root{--danger:#9b1c1c}
/* The platform sign-in is a dark shell; the colour comes from :root, not a
   hardcoded hex in the template (S9). */
.login-shell--platform{background:var(--dark-1)}
.login-brand--row{display:flex;align-items:center;gap:8px}
.form-error{color:var(--danger);font-size:calc(11.5px*var(--fs,1));font-weight:600;margin-top:2px}
.saas-meta{font-size:calc(12px*var(--fs,1))}
.saas-meta-sm{font-size:calc(11px*var(--fs,1))}
.saas-hint{font-size:calc(11.5px*var(--fs,1))}
.saas-pill-xs{font-size:calc(9.5px*var(--fs,1))}
.saas-btn-sm{font-size:calc(11.5px*var(--fs,1))}
.saas-w70{width:70px}
.saas-w110{width:110px}
.saas-w120{width:120px}
.saas-w150{width:150px}
.saas-empty-icon{font-size:calc(24px*var(--fs,1))}
.saas-notice{color:var(--warn);font-weight:600}
.saas-kv-label{font-size:calc(11px*var(--fs,1));color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.saas-module-checks{display:flex;flex-wrap:wrap;gap:4px 16px}

/* ── Organisation structure (/system/my-details/) ────────────────────
   Appended block: no rule above it is changed. Colours come from :root. */
:root{--surface:#fff;--danger-bg:#fdecec;--danger-ink:#8a4b5c;--warn-ink:#8a5a00}
.arch-dot--always{background:var(--green-dark)}
.fs-xs{font-size:calc(11.5px*var(--fs,1))}
.fs-xxs{font-size:calc(10.5px*var(--fs,1))}

/* toolbar + tabs */
.org-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:0 0 12px}
.org-scope{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.org-scope-label{font-size:calc(10.5px*var(--fs,1));color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-right:2px}
.org-toolbar-right{display:flex;gap:8px}
.org-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-size:calc(11.5px*var(--fs,1));color:var(--ink-2);text-decoration:none;
  line-height:1.5;transition:background .12s,border-color .12s,color .12s}
.org-chip:hover{border-color:var(--green-line);color:var(--green-dark)}
.org-chip.is-on,.org-chip.is-on:hover{background:var(--green);border-color:var(--green);color:var(--surface)}
.org-chip--sm{font-size:calc(10.5px*var(--fs,1));padding:1px 8px;background:var(--gray-50)}

.org-tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);
  margin:0 0 14px;padding:0 2px;scrollbar-width:thin}
.org-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;
  white-space:nowrap;text-decoration:none;color:var(--muted);
  font-size:calc(12.5px*var(--fs,1));font-weight:500;border-bottom:2px solid transparent;
  margin-bottom:-1px}
.org-tab .bi{font-size:calc(13px*var(--fs,1))}
.org-tab:hover{color:var(--green-dark);background:var(--green-row)}
.org-tab.is-on{color:var(--green-dark);border-bottom-color:var(--green);font-weight:700}
.org-panel{min-height:220px}
.org-note{font-size:calc(11.5px*var(--fs,1));color:var(--muted);margin:0 0 10px}
.org-present-note{background:var(--green-soft);border-left:3px solid var(--green);
  padding:8px 12px;border-radius:var(--radius);color:var(--ink-2);
  font-size:calc(13px*var(--fs,1))}
.org-hint{font-size:calc(11.5px*var(--fs,1));color:var(--muted);margin:0 0 12px;line-height:1.5}
.org-empty{color:var(--muted);font-style:italic;font-size:calc(11.5px*var(--fs,1))}
.org-anchor{display:block;position:relative;top:-70px;visibility:hidden}

/* stat strip */
.org-stat-strip{margin-bottom:14px}
.org-health-card{text-decoration:none;color:inherit;display:block}
.org-health-card:hover .stat-card{border-color:var(--green-line);box-shadow:0 1px 6px rgba(16,24,40,.08)}

/* grids */
.org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.org-grid--cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.org-overview{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(280px,1fr);
  gap:14px;align-items:start}
.org-overview-row2{grid-column:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:14px;align-items:start}
.org-todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.org-todo li{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:calc(12px*var(--fs,1))}
.org-todo li:last-child{border-bottom:0}
.org-todo-text{color:var(--ink-2)}
.org-todo-fix{font-size:calc(11.5px*var(--fs,1));font-weight:600;color:var(--green-dark);
  text-decoration:none;white-space:nowrap}
.org-todo-fix:hover{text-decoration:underline}
.org-running{display:flex;flex-wrap:wrap;gap:6px 8px}
.org-running-item{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;
  border:1px solid var(--line);border-radius:999px;background:var(--gray-50);
  font-size:calc(11.5px*var(--fs,1));color:var(--ink-2)}
.org-running-item .bi{color:var(--green-dark)}
.org-grid--controls{grid-template-columns:repeat(3,minmax(0,1fr))}
.org-c-approvals{grid-column:span 1}
.org-c-audit{grid-column:span 2}
.org-audit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.org-audit li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:5px 0;border-bottom:1px solid var(--line-soft);min-width:0}
.org-audit li:last-child{border-bottom:0}
.org-control-link{margin:8px 0 0}
.org-kpis--links li{justify-content:flex-start}
.org-side{display:flex;flex-direction:column;gap:14px}
.org-legend-row{margin-bottom:10px}

/* hierarchy */
.org-level{display:flex;align-items:baseline;gap:10px;padding:2px 0 12px}
.org-level-label{font-size:calc(10px*var(--fs,1));text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);font-weight:700}
.org-level-name{font-size:calc(15px*var(--fs,1));font-weight:700;color:var(--ink)}
.org-level-code{font-size:calc(11px*var(--fs,1));color:var(--muted);font-weight:500;
  border:1px solid var(--line);border-radius:3px;padding:0 5px;margin-left:4px}
.org-companies{list-style:none;margin:0;padding:0 0 0 14px;
  border-left:2px solid var(--line-soft);display:flex;flex-direction:column;gap:10px}
.org-company-row{position:relative}
.org-company-row::before{content:"";position:absolute;left:-14px;top:22px;width:12px;
  height:2px;background:var(--line-soft)}
.org-company-card{border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:12px 14px}
.org-company-card:hover{border-color:var(--green-line)}
.org-company-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.org-company-ico{width:24px;height:24px;border-radius:4px;background:var(--green-soft);
  color:var(--green-dark);display:inline-flex;align-items:center;justify-content:center;
  font-size:calc(12px*var(--fs,1));flex:none}
.org-company-name{font-size:calc(13.5px*var(--fs,1));font-weight:700}
.org-facts{display:flex;flex-wrap:wrap;gap:6px 22px;margin:10px 0 0;padding:0}
.org-facts>div{display:flex;flex-direction:column;gap:1px}
.org-facts dt{font-size:calc(9.5px*var(--fs,1));text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);font-weight:600;margin:0}
.org-facts dd{margin:0;font-size:calc(13px*var(--fs,1));font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.org-branch-list{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px dashed var(--line);
  display:flex;flex-wrap:wrap;gap:6px}
.org-branch{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;
  border:1px solid var(--line);border-radius:999px;background:var(--gray-50);
  font-size:calc(11.5px*var(--fs,1));color:var(--ink-2);text-decoration:none}
.org-branch:hover{background:var(--green-soft);border-color:var(--green-line);color:var(--green-dark)}
.org-branch.is-locked{opacity:.65}
.org-branch-code{font-size:calc(9.5px*var(--fs,1));color:var(--muted);letter-spacing:.04em}

/* small KPI list */
.org-kpis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.org-kpis li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--line-soft)}
.org-kpis li:last-child{border-bottom:0}
.org-kpi-label{font-size:calc(12.5px*var(--fs,1));color:var(--ink-2)}
.org-kpi-value{font-size:calc(14px*var(--fs,1));font-weight:700;color:var(--green-dark);
  text-decoration:none;font-variant-numeric:tabular-nums}
a.org-kpi-value:hover{text-decoration:underline}

/* add forms behind "Add…" */
.org-add-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  cursor:pointer;list-style:none;padding:9px 12px;background:var(--gray-50);
  border-bottom:1px solid var(--line);font-size:calc(11px*var(--fs,1));font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2)}
.org-add-head::-webkit-details-marker{display:none}
.org-add-head .bi{color:var(--green-dark)}
.org-add-chev{transition:transform .15s}
.org-add[open] .org-add-chev{transform:rotate(180deg)}
.org-add-block+.org-add-block{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.org-add-title{font-size:calc(11px*var(--fs,1));text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin:0 0 6px;font-weight:700}

/* cards (modules, dimensions) */
.org-card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.org-card-head h3{margin:0;font-size:calc(13.5px*var(--fs,1));font-weight:700;letter-spacing:0}
.org-card-ico{width:22px;height:22px;border-radius:4px;background:var(--gray-100);
  color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;
  font-size:calc(11.5px*var(--fs,1));flex:none}
.org-module-card,.org-dim-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;
  gap:8px;min-width:0}
.org-module-card:hover,.org-dim-card:hover{border-color:var(--green-line);
  box-shadow:0 1px 6px rgba(16,24,40,.06)}
.org-state-card--out{background:var(--gray-50)}
.org-state-card--out .org-card-ico{background:var(--gray-200)}
.org-purpose{margin:0;font-size:calc(12.5px*var(--fs,1));color:var(--ink-2);line-height:1.45}
.org-uses{margin:0;padding-left:18px;font-size:calc(11.5px*var(--fs,1));color:var(--muted);
  line-height:1.55}
.org-uses li+li{margin-top:1px}
.org-deps{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0;
  font-size:calc(10.5px*var(--fs,1))}
.org-deps-label{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.org-stats{display:flex;gap:22px;margin:0;padding:8px 0 0;border-top:1px dashed var(--line)}
.org-stats>div{display:flex;flex-direction:column-reverse;gap:0}
.org-stats dt{font-size:calc(9.5px*var(--fs,1));text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:600;margin:0}
.org-stats dd{margin:0;font-size:calc(16px*var(--fs,1));font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.2}
.org-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:auto;padding-top:8px;border-top:1px solid var(--line-soft)}
.org-screens summary{cursor:pointer;font-size:calc(11.5px*var(--fs,1));color:var(--muted);
  list-style:none}
.org-screens summary::-webkit-details-marker{display:none}
.org-screens summary::after{content:" ▾"}
.org-screens[open] summary::after{content:" ▴"}
.org-screens summary:hover{color:var(--green-dark)}
.org-screens ul{margin:6px 0 0;padding-left:16px;font-size:calc(11.5px*var(--fs,1))}

/* links and states */
.org-link{display:inline-flex;align-items:center;gap:5px;font-size:calc(12px*var(--fs,1));
  font-weight:600;color:var(--green-dark);text-decoration:none}
.org-link:hover{text-decoration:underline}
.org-link.is-locked,.org-link.is-planned{color:var(--muted);font-weight:500;text-decoration:none}
.org-tag{font-size:calc(9.5px*var(--fs,1));border:1px solid currentColor;border-radius:3px;
  padding:0 4px;margin-left:4px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.org-state{display:inline-flex;align-items:center;gap:5px;font-size:calc(10px*var(--fs,1));
  font-weight:700;padding:1px 8px;border-radius:999px;border:1px solid currentColor;
  white-space:nowrap;margin-left:auto}
.org-state .bi{font-size:calc(9.5px*var(--fs,1))}
.org-state--always{color:var(--green-dark);background:var(--green-soft)}
.org-state--on{color:var(--green);background:var(--surface)}
.org-state--off{color:var(--muted);background:var(--gray-50)}
.org-state--out{color:var(--danger-ink);background:var(--danger-bg)}
.org-state--mixed{color:var(--warn-ink);background:var(--warn-bg)}

/* flow chains */
.org-chain{list-style:none;display:flex;align-items:stretch;gap:0;margin:0;padding:2px 0 4px;
  overflow-x:auto;scrollbar-width:thin}
.org-chain-step{display:grid;grid-template-columns:1fr auto;gap:2px 10px;
  align-content:start;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);min-width:136px;flex:0 0 auto}
.org-chain-step:hover{border-color:var(--green-line)}
.org-chain-step.is-muted{background:var(--gray-50)}
.org-chain-label{font-size:calc(10px*var(--fs,1));color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;white-space:nowrap;align-self:center}
.org-chain-count{font-size:calc(17px*var(--fs,1));font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;text-align:right}
.org-chain-link{grid-column:1 / -1;font-size:calc(11px*var(--fs,1));font-weight:600;
  color:var(--green-dark);text-decoration:none;display:inline-flex;align-items:center;gap:4px;
  margin-top:4px}
a.org-chain-link:hover{text-decoration:underline}
.org-chain-link.is-locked,.org-chain-link.is-planned{color:var(--muted);font-weight:500}
.org-chain-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 28px;
  color:var(--muted);font-size:calc(12px*var(--fs,1))}
.org-chain-ledger{border-style:dashed;border-color:var(--green);background:var(--green-row)}
.org-chain-arrow--ledger{color:var(--green)}

/* filters */
.org-filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.org-search{position:relative;flex:0 1 300px}
.org-search .bi{position:absolute;left:9px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:calc(12px*var(--fs,1));pointer-events:none}
.org-search input{padding-left:29px}
.org-chips{display:flex;gap:6px;flex-wrap:wrap}

/* dimensions */
.org-dim-count{display:flex;align-items:baseline;gap:6px;margin:0}
.org-dim-value{font-size:calc(24px*var(--fs,1));font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.org-dim-unit{font-size:calc(10.5px*var(--fs,1));color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;font-weight:600}

/* setup health */
.org-setup{max-width:1000px}
.org-health-head{display:flex;align-items:center;gap:18px;margin-bottom:16px;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--green-row),var(--surface))}
.org-health-ring{width:72px;height:72px;border-radius:50%;flex:none;display:grid;
  place-items:center;position:relative;font-weight:700;font-size:calc(18px*var(--fs,1));
  color:var(--green-dark);background:
    conic-gradient(var(--green) calc(var(--pct)*1%), var(--gray-200) 0)}
.org-health-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface)}
.org-health-ring span{position:relative}
.org-health-ring small{font-size:calc(10px*var(--fs,1));font-weight:700}
.org-health-title{margin:0 0 3px;font-size:calc(14px*var(--fs,1));font-weight:700}
.org-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.org-check{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface)}
.org-check:hover{border-color:var(--green-line)}
.org-check-ico{width:22px;height:22px;border-radius:50%;display:inline-flex;flex:none;
  align-items:center;justify-content:center;font-size:calc(11px*var(--fs,1))}
.org-check.is-ok .org-check-ico{background:var(--green-soft);color:var(--green-dark)}
.org-check.is-todo .org-check-ico{background:var(--warn-bg);color:var(--warn-ink)}
.org-check-body{display:flex;flex-direction:column;flex:1;min-width:0}
.org-check-label{font-weight:600;font-size:calc(12.5px*var(--fs,1))}
.org-check-detail{font-size:calc(11px*var(--fs,1));color:var(--muted)}
.org-check-link{font-size:calc(11.5px*var(--fs,1));color:var(--muted);text-decoration:none;
  white-space:nowrap}
.org-check-link:hover{color:var(--green-dark);text-decoration:underline}
.org-check-fix{white-space:nowrap}

/* controls */
.org-list{list-style:none;margin:0;padding:0}
.org-list li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;
  border-bottom:1px solid var(--line-soft);font-size:calc(12px*var(--fs,1))}
.org-list li:last-child{border-bottom:0}
.org-count{font-variant-numeric:tabular-nums;font-weight:700}
.org-audit-repr{font-size:calc(12px*var(--fs,1));font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.org-audit-meta{font-size:calc(10.5px*var(--fs,1));color:var(--muted);white-space:nowrap}

/* tree tab */
.org-tree-wrap .tree-node.is-dim>.tree-label{opacity:.3}
.org-tree-wrap .tree-node.is-match>.tree-label{background:var(--green-soft)}

/* present mode */
.org-present-bar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:1050;
  display:flex;align-items:center;gap:14px;padding:8px 16px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 28px rgba(16,24,40,.16)}
.org-present-count{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink-2)}
.org-page.org-present{--fs:1.22}
.org-page.org-present .org-add{display:none}
/* the sidebar is a sibling of the page, so the page cannot hide it itself */
body:has(.org-page.org-present) .sidebar{transform:translateX(-100%)}
body:has(.org-page.org-present) .main{left:0}
body:has(.org-page.org-present) .page-head{padding-top:16px;padding-bottom:16px}
.org-present .org-tab{font-size:calc(14px*var(--fs,1))}
.org-present .org-module-card,.org-present .org-dim-card{padding:16px 18px}
@media (prefers-reduced-motion:no-preference){.org-panel{transition:opacity .12s}}

@media (max-width:700px){
  /* a tab strip you can read beats one you must scroll sideways */
  .org-tabs{flex-wrap:wrap;overflow:visible;row-gap:2px}
  .org-tab{padding:7px 10px;font-size:calc(11.5px*var(--fs,1))}
  .org-toolbar-right{width:100%}
  .org-toolbar-right .btn{flex:1}
}

@media (max-width:991px){
  .org-overview{grid-template-columns:1fr}
  .org-overview-row2{grid-column:1}
  .org-grid--controls{grid-template-columns:1fr}
  .org-c-approvals,.org-c-audit{grid-column:span 1}
  .org-chain{flex-direction:column;gap:6px;overflow:visible}
  .org-chain-arrow{flex-basis:auto;transform:rotate(90deg);padding:2px 0}
  .org-facts{gap:6px 16px}
}

@media print{
  /* app.css hides the whole document in print unless a document drawer is
     open (it exists to print one invoice). This page has no drawer to print,
     so it takes the page back — and keeps the drawer rule intact. */
  body:not(:has(.doc-drawer.show)) *{visibility:visible!important}
  /* the app shell scrolls inside a fixed-height pane; in print that pane is
     clipped to one screen, so the page must become a normal flowing document */
  .main{position:static!important;overflow:visible!important;height:auto!important;
    left:0!important;right:auto!important;top:auto!important;bottom:auto!important}
  html,body{overflow:visible!important;height:auto!important}
  .sidebar,.topbar,.statusbar,.org-tabs,.org-toolbar,.org-present-bar,
  .org-add,.org-form,.org-filter-bar{display:none!important}
  .page-head{padding:0 0 8px;border-bottom:1px solid var(--muted)}
  .org-panel{min-height:0}
  .org-module-card,.org-dim-card,.org-company-card,.org-flow,.org-check{
    break-inside:avoid;box-shadow:none}
  .org-link,.org-chain-link{color:inherit;text-decoration:none}
  .org-page.org-present{--fs:1}
}

/* ── Roadmap entries in the sidebar (system/roadmap.py): visible, not clickable ── */
.nav-coming { cursor: default; opacity: .55; display: flex; align-items: center; gap: 6px; }
.nav-coming:hover, .nav-coming:focus { background: transparent; opacity: .8; }
.nav-coming-group { opacity: .65; }
.nav-soon {
  margin-left: auto; font-style: normal; font-size: calc(9px*var(--fs,1)); letter-spacing: .04em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 999px;
  border: 1px solid currentColor; opacity: .8;
}
.org-todo-locked{color:var(--muted);font-size:calc(11px*var(--fs,1))}

/* ── tenant settings: provider-owned / setup-once fields ────────────
   Appended block; colours come from :root. */
.locked-field{display:flex;align-items:center;gap:7px;min-height:31px;padding:4px 9px;
  border:1px dashed var(--line);border-radius:var(--radius);background:var(--gray-50);
  color:var(--ink-2);font-size:calc(12.5px*var(--fs,1))}
.locked-field .bi{color:var(--muted);font-size:calc(10.5px*var(--fs,1));flex:none}
.locked-field-value{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.locked-field-sr{display:none}
.locked-field-reason{margin-top:3px;font-size:calc(10.5px*var(--fs,1));color:var(--muted);
  line-height:1.4}
.setup-once-note{margin-top:4px;font-size:calc(10.5px*var(--fs,1));color:var(--warn-ink);
  line-height:1.4;display:flex;gap:5px;align-items:flex-start}
.setup-once-note .bi{flex:none;margin-top:1px}
.provider-note{display:flex;gap:8px;align-items:flex-start;padding:9px 12px;margin-bottom:10px;
  border:1px solid var(--line);border-left:3px solid var(--green);border-radius:var(--radius);
  background:var(--green-row);font-size:calc(12px*var(--fs,1));color:var(--ink-2)}
.provider-note .bi{color:var(--green-dark);flex:none;margin-top:1px}
.cap-state-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:8px}
.cap-state-item{display:flex;align-items:center;gap:8px;padding:7px 10px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.cap-state-id{display:flex;align-items:baseline;gap:7px;min-width:0}
.cap-state-name{font-size:calc(12.5px*var(--fs,1));font-weight:600;line-height:1.3}
.cap-state-code{font-size:calc(10px*var(--fs,1));color:var(--muted);letter-spacing:.03em}
.cap-state-item .org-state{margin-left:auto}

/* ── provider console: company settings panel ───────────────────────
   Appended block; colours come from :root. */
.saas-settings{display:flex;flex-direction:column;gap:6px}
.saas-setting{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.saas-setting[open]{border-color:var(--green-line)}
.saas-setting-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 12px;cursor:pointer;list-style:none}
.saas-setting-head::-webkit-details-marker{display:none}
.saas-setting-name{font-size:calc(12.5px*var(--fs,1));font-weight:600;min-width:170px}
.saas-setting-value{font-size:calc(12px*var(--fs,1));color:var(--ink-2)}
.saas-setting-flag{display:inline-flex;align-items:center;gap:4px;
  font-size:calc(10.5px*var(--fs,1));color:var(--muted)}
.saas-setting-chev{margin-left:auto;color:var(--muted);font-size:calc(11px*var(--fs,1));
  transition:transform .15s}
.saas-setting[open] .saas-setting-chev{transform:rotate(180deg)}
.saas-setting-form{padding:0 12px 12px;border-top:1px solid var(--line-soft);padding-top:10px}

/* handbook language toggle (English / বাংলা) */
.hb-lang{display:flex;gap:6px;margin-bottom:10px}
.hb-chip.active{border-color:var(--green-line);background:var(--green-soft);color:var(--green-dark)}

/* ── register actions never clip ───────────────────────────────────
   A register can be wider than the window (many columns, dense CJK names).
   The actions cell is pinned to the right edge so the last button is always
   reachable without scrolling sideways — the same behaviour on every list. */
table.xl-table thead th.col-act,
table.xl-table tbody td.col-act {
  position: sticky;
  right: 0;
  z-index: 2;
  background: #fff;
}
table.xl-table thead th.col-act { background: var(--green-dark); z-index: 4; }
table.xl-table tbody tr:hover td.col-act { background: var(--green-row); }
table.xl-table tbody tr.selected td.col-act { background: var(--green-soft); }
table.xl-table tfoot td.col-act { background: #f3f6f8; }

/* ── refused input ─────────────────────────────────────────────────
   A refusal marks the input it is about (cw-notify target): red edge, soft ring, the cell tinted.
   It clears when the person touches the cell. One look for every form. */
input.is-invalid, select.is-invalid, textarea.is-invalid, button.is-invalid, .is-invalid > input,
td.has-error input, td.has-error button.combo-btn {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent) !important;
}
td.has-error { background: color-mix(in srgb, var(--danger) 8%, #fff) !important; }
tr.is-invalid td { background: color-mix(in srgb, var(--danger) 8%, #fff) !important; }

/* ── register toolbar: eight filters on one row ─────────────────────
   Every Purchase register (requisitions, orders, receipts) uses the same compact toolbar: short
   selects, fixed-width dates, and a search box that takes whatever width is left. */
.toolbar.tb-compact .tb-field .form-select{min-width:96px;max-width:136px}
.toolbar.tb-compact .tb-field .form-control[type=date]{min-width:0;width:132px}
.toolbar.tb-compact .tb-field.tb-grow{flex:1 1 150px;min-width:140px}
.toolbar.tb-compact .tb-field.tb-grow .form-control{width:100%;min-width:0}
/* a draft is a pill like every other status, in neutral grey */
.pill:not(.pill-ok):not(.pill-warn):not(.pill-bad):not(.pill-info){background:#eef1f4;color:#4b5a66;border-color:#d7dde3}

/* ── Purchase registers fit the window ─────────────────────────────
   Requisitions, orders and receipts use a fixed layout: the columns share the width instead of
   pushing the table wider than the screen (which slid the pinned Actions column over a neighbour).
   A long name is cut with an ellipsis; the full text is in the drawer. */
table.xl-table[data-table-id="requisitions"],
table.xl-table[data-table-id="orders"],
table.xl-table[data-table-id="receipts"] { table-layout: fixed; width: 100%; min-width: 0; }
table.xl-table[data-table-id="requisitions"] td,
table.xl-table[data-table-id="orders"] td,
table.xl-table[data-table-id="receipts"] td { overflow: hidden; text-overflow: ellipsis; }

/* cheque drawer: one labelled step per block */
.chq-step{padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--gray-50)}
.chq-step + .chq-step{margin-top:8px}
.chq-step-title{font-weight:600;margin-bottom:2px}
@media (max-width:576px){ #cheque-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px} }


/* ══════════════════════════════════════════════════════════════════════
   PLATFORM CONSOLE (/saas/)
   A separate product surface with its own chrome: no company, no branch, no
   fiscal year. Every rule below is prefixed `plat-` so it cannot leak into a
   tenant screen, and the two rules that do touch shared classes are scoped to
   the console's own elements (`.plat-topbar`, `.plat-side`, `.plat-statusbar`).
   ══════════════════════════════════════════════════════════════════════ */

/* ── header ─────────────────────────────────────────────────────── */
.plat-topbar{
  background:var(--dark-1);
  border-bottom:3px solid var(--ink-2);
}
.plat-chip{
  display:inline-flex;align-items:center;gap:6px;
  margin-left:2px;padding:3px 10px;border-radius:2px;
  background:var(--green-darker);border:1px solid var(--green-dark);
  color:var(--green-light);font-size:calc(10.5px*var(--fs,1));
  font-weight:800;letter-spacing:.7px;text-transform:uppercase;white-space:nowrap;
}
.plat-build{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px;border-radius:var(--radius);
  background:var(--dark-2);border:1px solid #3a424a;
  color:#c3cad1;font-size:calc(11.5px*var(--fs,1));white-space:nowrap;
}
.plat-build:hover{background:var(--dark-3);color:#fff}
.plat-build i{color:var(--green-light)}
.plat-build-sep{color:#4d565f}
.plat-build-id{color:#98a2ac}
.plat-env{
  font-size:calc(9.5px*var(--fs,1));font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;padding:1px 6px;border-radius:2px;
  background:#2b3138;color:#adb5bd;
}
.plat-env--production{background:var(--green-darker);color:var(--green-light)}
.plat-env--staging{background:#4a3512;color:#f0b45f}
.plat-env--development{background:#333b44;color:#c3cad1}
.plat-spacer{flex:1}
.plat-health{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:2px;font-size:calc(11px*var(--fs,1));font-weight:700;
}
.plat-health--fail{background:#3a1719;border:1px solid #6b262b;color:#f19a9f}
.plat-health--warn{background:#3d2e13;border:1px solid #6b5124;color:#f0c073}
.plat-user{display:flex;align-items:center;gap:8px;padding-left:6px}
.plat-user-avatar{
  width:28px;height:28px;border-radius:3px;display:grid;place-items:center;
  background:var(--green-dark);color:#fff;font-size:calc(11px*var(--fs,1));font-weight:800;
}
.plat-user-meta{display:flex;flex-direction:column;line-height:1.15}
.plat-user-name{font-size:calc(12px*var(--fs,1));font-weight:600;color:#e9edf1}
.plat-user-role{font-size:calc(10px*var(--fs,1));color:#869099;letter-spacing:.3px}

/* ── sidebar ────────────────────────────────────────────────────── */
.plat-side{background:#15191d;border-right:1px solid #0e1114}
.plat-side-head{
  padding:14px 16px 10px;border-bottom:1px solid #22282e;margin-bottom:6px;
}
.plat-side-label{
  display:block;font-size:calc(10px*var(--fs,1));font-weight:800;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--green-light);
}
.plat-side-sub{display:block;font-size:calc(10.5px*var(--fs,1));color:#6d7780;margin-top:2px}
.plat-side .nav-section{color:#5d666e}
.plat-side .nav-link-app{color:#9aa4ad}
.plat-side .nav-link-app.active{
  background:linear-gradient(90deg,rgba(var(--green-rgb),.28),rgba(var(--green-rgb),0));
  color:var(--green-light);border-left-color:var(--green);
}
.plat-side-note{
  margin:6px 16px 18px;padding:9px 10px;border-radius:3px;
  border:1px dashed #2c343c;background:#191e23;
  font-size:calc(10.5px*var(--fs,1));line-height:1.5;color:#6d7780;
}
.plat-dot{width:6px;height:6px;border-radius:50%;margin-left:auto}
.plat-dot--bad{background:#e05a63}
.plat-dot--warn{background:var(--warn)}

/* ── status bar ─────────────────────────────────────────────────── */
.plat-statusbar{background:#111518;border-top:1px solid #0b0e10}

/* ── page furniture ─────────────────────────────────────────────── */
.plat-lede{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding:14px 16px;border-radius:var(--radius);
  background:linear-gradient(180deg,#fff,#f6f8fa);
  border:1px solid var(--line);border-left:3px solid var(--green);
}
.plat-lede-title{font-size:calc(13.5px*var(--fs,1));font-weight:800;color:var(--ink)}
.plat-lede-sub{
  font-size:calc(12px*var(--fs,1));color:var(--muted);line-height:1.55;
  margin-top:3px;max-width:74ch;
}
.plat-lede-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.plat-inline-note{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 12px;border-radius:var(--radius);
  background:var(--gray-50);border:1px solid var(--line);
  font-size:calc(12px*var(--fs,1));color:var(--ink-2);
}
.plat-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
.plat-grid--wide-left{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
@media (max-width:1100px){
  .plat-grid,.plat-grid--wide-left{grid-template-columns:minmax(0,1fr)}
}
.plat-link{
  font-size:calc(11.5px*var(--fs,1));font-weight:600;color:var(--green-dark);
  letter-spacing:.2px;
}
.plat-link:hover{color:var(--green)}
.plat-head-summary{display:flex;gap:6px;flex-wrap:wrap}
/* a path shown in a panel head keeps its own case: the heading is uppercase,
   a filesystem path is not, and SHOUTING a path reads like a different path */
.plat-head-path{
  text-transform:none;letter-spacing:0;font-weight:400;
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:calc(10.5px*var(--fs,1));color:var(--muted);
}
.plat-dim{color:var(--muted);font-size:calc(11.5px*var(--fs,1));font-weight:400}
.plat-mono-sm{font-size:calc(11.5px*var(--fs,1))}
.plat-nowrap{white-space:nowrap}
.plat-warn-text{color:var(--warn);font-weight:600}
.plat-empty{
  margin:0;padding:16px;color:var(--muted);font-size:calc(12px*var(--fs,1));
}
.plat-foot-note{
  margin:2px 0 0;font-size:calc(11px*var(--fs,1));color:var(--muted);line-height:1.6;
}
.plat-note{
  margin:10px 0 0;font-size:calc(11.5px*var(--fs,1));line-height:1.6;color:var(--muted);
}
.plat-bullets{margin:0;padding-left:18px;font-size:calc(12px*var(--fs,1));line-height:1.75;color:var(--ink-2)}
.plat-bullets li{margin-bottom:4px}

/* ── badges ─────────────────────────────────────────────────────── */
.plat-badge{
  display:inline-block;font-size:calc(10px*var(--fs,1));font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:2px;
  border:1px solid var(--line);background:var(--gray-100);color:var(--ink-2);
}
.plat-badge--ok{background:var(--green-soft);border-color:var(--green-line);color:var(--green-dark)}
.plat-badge--warn{background:var(--warn-bg);border-color:var(--warn);color:#8a5a00}
.plat-badge--bad{background:#fdecec;border-color:#f3c2c2;color:#9b1c1c}
.plat-badge--muted{background:var(--gray-100);border-color:var(--line);color:var(--muted)}
.plat-tag{
  font-size:calc(9.5px*var(--fs,1));font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;padding:1px 6px;border-radius:2px;
  background:var(--gray-200);color:var(--ink-2);margin-left:6px;
}
.plat-action{
  display:inline-block;font-size:calc(10px*var(--fs,1));font-weight:800;
  letter-spacing:.4px;text-transform:uppercase;padding:2px 6px;border-radius:2px;
  background:var(--gray-100);color:var(--ink-2);border:1px solid var(--line);
}
.plat-action--create{background:var(--green-soft);border-color:var(--green-line);color:var(--green-dark)}
.plat-action--update{background:#eef4fb;border-color:#cfe0f2;color:#2d5b8a}
.plat-action--delete{background:#fdecec;border-color:#f3c2c2;color:#9b1c1c}
.plat-action--login_failed{background:var(--warn-bg);border-color:var(--warn);color:#8a5a00}
.plat-action--login,.plat-action--logout{background:var(--gray-100);color:var(--muted)}

/* ── fact lists & tables ────────────────────────────────────────── */
.plat-facts{display:grid;grid-template-columns:96px 1fr;gap:0;margin:0}
.plat-facts dt{
  font-size:calc(10.5px*var(--fs,1));font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--muted);padding:7px 0;
  border-bottom:1px solid var(--line-soft);
}
.plat-facts dd{
  margin:0;padding:7px 0;border-bottom:1px solid var(--line-soft);
  font-size:calc(12.5px*var(--fs,1));display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.plat-facts dt:last-of-type,.plat-facts dd:last-of-type{border-bottom:0}
.plat-table{width:100%;border-collapse:collapse;font-size:calc(12px*var(--fs,1))}
.plat-table thead th{
  position:sticky;top:0;z-index:1;
  padding:7px 12px;text-align:left;background:var(--gray-50);
  border-bottom:1px solid var(--line);
  font-size:calc(10px*var(--fs,1));font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.plat-table tbody td{
  padding:7px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top;
}
.plat-table tbody tr:last-child td{border-bottom:0}
.plat-table tbody tr:hover{background:var(--gray-50)}
.plat-table--kv th{
  width:210px;text-align:left;padding:7px 12px;
  background:var(--gray-50);border-bottom:1px solid var(--line-soft);
  font-size:calc(11.5px*var(--fs,1));font-weight:600;color:var(--ink-2);
  position:static;letter-spacing:0;text-transform:none;
}
.plat-table--kv td{border-bottom:1px solid var(--line-soft);padding:7px 12px}
.plat-row--fail{background:#fdf6f6}
.plat-row--warn{background:#fffbf3}
.plat-state{
  display:inline-flex;align-items:center;gap:5px;
  font-size:calc(10px*var(--fs,1));font-weight:800;letter-spacing:.5px;text-transform:uppercase;
}
.plat-state--ok{color:var(--green-dark)}
.plat-state--warn{color:#a3660f}
.plat-state--fail{color:#9b1c1c}
.plat-state--info{color:var(--muted)}

/* ── health ─────────────────────────────────────────────────────── */
.plat-health-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.plat-score{
  font-size:calc(24px*var(--fs,1));font-weight:800;line-height:1;letter-spacing:-.02em;
  color:var(--green-dark);
}
.plat-score--bad{color:#9b1c1c}
.plat-score-total{font-size:calc(13px*var(--fs,1));font-weight:600;color:var(--muted)}
.plat-health-legend{display:flex;gap:6px;flex-wrap:wrap}
.plat-check-list{margin:0;padding:0;list-style:none}
.plat-check{
  display:flex;align-items:baseline;gap:8px;padding:5px 0;
  font-size:calc(11.5px*var(--fs,1));border-bottom:1px solid var(--line-soft);
}
.plat-check:last-child{border-bottom:0}
.plat-check--fail i{color:#c0392b}
.plat-check--warn i{color:var(--warn)}
.plat-check--ok i{color:var(--green)}
.plat-check-label{font-weight:700;white-space:nowrap}
.plat-check-detail{color:var(--muted);overflow:hidden;text-overflow:ellipsis}

/* ── deploy page ────────────────────────────────────────────────── */
.plat-deploy-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;
}
.plat-kpi{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 14px;border-radius:var(--radius);
  background:var(--gray-50);border:1px solid var(--line);
}
.plat-kpi-label{
  font-size:calc(10px*var(--fs,1));font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted);
}
.plat-kpi-value{
  font-size:calc(19px*var(--fs,1));font-weight:800;color:var(--ink);letter-spacing:-.01em;
  word-break:break-all;
}
.plat-kpi-of{font-size:calc(12px*var(--fs,1));font-weight:600;color:var(--muted)}
.plat-kpi-foot{font-size:calc(10.5px*var(--fs,1));color:var(--muted);line-height:1.45}
.plat-flow{margin:0;padding-left:20px;font-size:calc(12.5px*var(--fs,1));line-height:1.8;color:var(--ink-2)}
.plat-flow code{
  font-size:calc(11.5px*var(--fs,1));background:var(--gray-100);
  padding:1px 5px;border-radius:2px;color:var(--ink);
}
.plat-envrow{
  display:flex;flex-wrap:wrap;gap:6px 22px;
  font-size:calc(11.5px*var(--fs,1));color:var(--ink-2);
}
.plat-k{
  font-size:calc(10px*var(--fs,1));font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--muted);margin-right:4px;
}

/* phone: the console is a desktop tool, but it must not fall apart */
@media (max-width:900px){
  .plat-build-id,.plat-build-sep{display:none}
  .plat-user-meta{display:none}
  .plat-chip{display:none}
  .plat-lede-actions{margin-left:0}
}

/* ── onboarding runbook (/saas/runbook/) ────────────────────────────── */
.plat-runbook{display:flex;flex-direction:column;gap:0}
.rb-step{
  display:grid;grid-template-columns:46px minmax(0,1fr);gap:0 16px;
  padding:18px 20px 18px 0;
  border-top:1px solid var(--line);
  background:#fff;
}
.rb-step:first-child{border-top:0;border-radius:var(--radius) var(--radius) 0 0}
.rb-step:last-child{border-radius:0 0 var(--radius) var(--radius)}
/* the connecting rail: numbers sit on a vertical line so the page reads as a
   sequence, not as seven unrelated panels. */
.rb-num{
  position:relative;justify-self:center;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--green);color:#fff;
  font-size:calc(13px*var(--fs,1));font-weight:800;
  box-shadow:0 0 0 4px #fff;
}
.rb-step:not(:last-child) .rb-num::after{
  content:"";position:absolute;top:34px;left:50%;width:2px;
  height:calc(100% + 34px);transform:translateX(-50%);
  background:var(--green-line);
}
.rb-title{
  font-size:calc(15px*var(--fs,1));font-weight:800;letter-spacing:-.01em;
  color:var(--ink);margin:4px 0 6px;
}
.rb-lede{margin:0 0 12px;font-size:calc(12.5px*var(--fs,1));line-height:1.65;color:var(--ink-2);max-width:80ch}
.rb-sub{
  margin:14px 0 6px;font-size:calc(11px*var(--fs,1));font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;color:var(--muted);
}
.rb-note{
  margin:12px 0 0;padding:9px 12px;border-radius:3px;
  background:var(--gray-50);border-left:3px solid var(--line);
  font-size:calc(11.5px*var(--fs,1));line-height:1.6;color:var(--muted);
}
.rb-warn{
  margin:12px 0 0;padding:9px 12px;border-radius:3px;
  background:var(--warn-bg);border-left:3px solid var(--warn);
  font-size:calc(11.5px*var(--fs,1));line-height:1.6;color:#7d4f08;
}
.rb-warn code,.rb-note code{background:#fff;padding:1px 4px;border-radius:2px;font-size:calc(11px*var(--fs,1))}
.rb-table{margin-top:4px;border:1px solid var(--line-soft);border-radius:3px;overflow:hidden}
.rb-table th{width:auto}
.rb-table td{font-size:calc(11.5px*var(--fs,1));line-height:1.55}
.rb-sm{font-size:calc(10.5px*var(--fs,1))}
.rb-ol{padding-left:22px}
.rb-ol li{margin-bottom:6px}
.rb-doors{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.rb-door{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:3px;border:1px solid var(--line);
  background:var(--gray-50);color:var(--ink);
}
.rb-door:hover{border-color:var(--green-line);background:var(--green-soft);color:var(--green-dark)}
.rb-door i{font-size:calc(16px*var(--fs,1));color:var(--green-dark)}
.rb-door span{display:flex;flex-direction:column;line-height:1.25}
.rb-door b{font-size:calc(12px*var(--fs,1))}
.rb-door em{
  font-style:normal;font-size:calc(10.5px*var(--fs,1));color:var(--muted);
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
}
.rb-url{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;margin:0 0 14px;
  border-radius:3px;background:var(--dark-1);border:1px solid var(--dark-3);
}
.rb-url-label{
  font-size:calc(10px*var(--fs,1));font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;color:var(--green-light);
}
.rb-url-value{
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:calc(12.5px*var(--fs,1));color:#fff;word-break:break-all;
}
.rb-url .btn{margin-left:auto;background:var(--dark-2);border-color:#3a424a;color:#e9edf1}
.rb-url .btn:hover{background:var(--dark-3);color:#fff}

@media (max-width:640px){
  .rb-step{grid-template-columns:34px minmax(0,1fr);gap:0 10px;padding-right:12px}
  .rb-num{width:26px;height:26px;font-size:calc(12px*var(--fs,1))}
  .rb-table td,.rb-table th{font-size:calc(11px*var(--fs,1))}
}

/* ── feature checklist editor (/saas/features/) ─────────────────────── */
.fc-stats{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.fc-stat{display:flex;flex-direction:column;gap:2px}
.fc-stat-value{font-size:calc(22px*var(--fs,1));font-weight:800;line-height:1;
  color:var(--green-dark);font-variant-numeric:tabular-nums}
.fc-stat--quiet .fc-stat-value{color:var(--ink-2)}
.fc-stat-label{font-size:calc(10px*var(--fs,1));font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--muted)}
.fc-stat--pct{flex-direction:row;align-items:center;gap:10px;flex:1;min-width:220px}
.fc-bar{flex:1;height:6px;border-radius:3px;background:var(--gray-200);overflow:hidden;min-width:100px}
.fc-bar span{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--green),var(--green-light));
  transition:width .2s ease}
.fc-pct{font-size:calc(12px*var(--fs,1));font-weight:800;color:var(--green-dark);
  font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.fc-hint{margin:12px 0 0;font-size:calc(11.5px*var(--fs,1));color:var(--muted);
  display:flex;align-items:baseline;gap:6px}
.fc-hint i{color:var(--green-dark)}

.panel-head-meta{display:flex;align-items:center;gap:8px}
.panel-head-meta [data-area-count]{font-size:calc(11px*var(--fs,1));font-weight:700;
  color:var(--muted);font-variant-numeric:tabular-nums}
.fc-bulk{padding:0 4px;font-size:calc(11px*var(--fs,1));text-decoration:none;
  color:var(--green-dark);font-weight:600}
.fc-bulk:hover{text-decoration:underline}

.fc-list{list-style:none;margin:0;padding:0}
.fc-item{display:grid;grid-template-columns:minmax(200px,1.1fr) minmax(0,1.6fr) 130px;
  gap:12px;align-items:center;padding:7px 14px;border-bottom:1px solid var(--line-soft)}
.fc-item:last-child{border-bottom:0}
.fc-item:hover{background:var(--gray-50)}
@media (max-width:900px){
  .fc-item{grid-template-columns:1fr;gap:2px;padding:9px 14px}
  .fc-state{justify-self:start}
}
.fc-check{display:flex;align-items:center;gap:9px;cursor:pointer;min-width:0}
.fc-check input{flex:none;width:15px;height:15px;accent-color:var(--green);cursor:pointer}
.fc-name{font-size:calc(12.5px*var(--fs,1));font-weight:600;color:var(--ink-2);line-height:1.35}
.fc-item.is-done .fc-name{color:var(--ink);font-weight:700}
.fc-desc{font-size:calc(11px*var(--fs,1));color:var(--muted);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis}
.fc-state{display:flex;align-items:center;gap:7px;justify-self:end;white-space:nowrap}
.fc-dim{font-size:calc(10px*var(--fs,1));color:var(--muted);font-variant-numeric:tabular-nums}
.fc-pill{display:inline-block;font-size:calc(9.5px*var(--fs,1));font-weight:800;
  letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:2px}
.fc-pill--done{background:var(--green-soft);color:var(--green-dark);border:1px solid var(--green-line)}
.fc-pill--1{background:var(--warn-bg);color:#8a5a00;border:1px solid var(--warn)}
.fc-pill--2{background:var(--gray-100);color:var(--muted);border:1px solid var(--line)}
.fc-pill--3{background:transparent;color:var(--muted);border:1px dashed var(--line)}

/* The save bar follows you down a list that is hundreds of rows long. */
.fc-sticky{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:rgba(255,255,255,.96);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 -2px 10px rgba(16,24,40,.06);backdrop-filter:blur(4px)}
.fc-sticky-text{margin-right:auto;font-size:calc(12px*var(--fs,1));color:var(--muted)}
.fc-sticky-text b{color:var(--green-dark);font-size:calc(13px*var(--fs,1))}

/* ══════════════════════════════════════════════════════════════════════
   PUBLIC PAGES  (/download/, /features/)
   A separate document shell from the product: no topbar, no sidebar, no
   status bar. These rules live here, not inline in one template, because two
   pages share them — the download page and the public feature checklist — and
   an inline block is invisible to the second one (which is exactly how the
   checklist shipped unstyled once).
   ══════════════════════════════════════════════════════════════════════ */

/* app.css sets body{overflow:hidden} for the product's fixed shell; a public
   page is a normal scrolling document. */
body.dl-shell{overflow:auto}

.dl-shell{background:var(--gray-100);color:var(--ink);min-height:100vh;
  display:flex;flex-direction:column;font-size:calc(13.5px*var(--fs,1));margin:0}
.dl-wrap{width:100%;max-width:1000px;margin:0 auto;padding:0 20px}
.dl-head{background:#fff;border-bottom:1px solid var(--line);padding:12px 0}
.dl-head-row{display:flex;align-items:center;gap:12px}
.dl-crumb{font-size:calc(11px*var(--fs,1));font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--muted);border-left:1px solid var(--line);padding-left:12px}
.dl-spacer{flex:1}
.dl-head-link{font-size:calc(12.5px*var(--fs,1));font-weight:600;color:var(--green-dark)}
.dl-main{flex:1;padding-top:26px;padding-bottom:40px}

.dl-hero{padding:0 0 22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.dl-title{font-size:calc(30px*var(--fs,1));font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.dl-lede{font-size:calc(14px*var(--fs,1));line-height:1.6;color:var(--ink-2);max-width:66ch;margin:0 0 14px}
.dl-meta{display:flex;gap:8px;flex-wrap:wrap}
.dl-chip{font-size:calc(11px*var(--fs,1));font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 9px;border-radius:2px;background:var(--green-soft);color:var(--green-dark);
  border:1px solid var(--green-line)}
.dl-chip--quiet{background:var(--gray-100);color:var(--ink-2);border-color:var(--line)}

.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.dl-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  border-top:3px solid var(--green);display:flex;flex-direction:column}
.dl-card-head{display:flex;align-items:center;gap:9px;padding:13px 16px;
  border-bottom:1px solid var(--line-soft);font-weight:800;font-size:calc(13.5px*var(--fs,1))}
.dl-card-head i{font-size:calc(18px*var(--fs,1));color:var(--green-dark)}
.dl-files{list-style:none;margin:0;padding:6px 0}
/* The artifact name gets the full card width and may wrap at a hyphen; the
   size and button sit under it, so a 31-character AppImage name is never
   chopped mid-token to make room for a button. */
.dl-file{display:flex;flex-direction:column;gap:6px;padding:8px 16px;
  border-top:1px solid var(--line-soft)}
.dl-file:first-child{border-top:0}
.dl-file-name{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:calc(11px*var(--fs,1));line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.dl-file-row{display:flex;align-items:center;gap:10px}
.dl-file-row .dl-btn{margin-left:auto}
.dl-file-sub{font-size:calc(11px*var(--fs,1));color:var(--muted)}
.dl-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:calc(12px*var(--fs,1));font-weight:700;padding:6px 12px;border-radius:3px;
  background:var(--green);border:1px solid var(--green);color:#fff}
.dl-btn:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.dl-btn--ghost{background:#fff;color:var(--green-dark);border-color:var(--green-line)}
.dl-btn--ghost:hover{background:var(--green-soft);color:var(--green-dark)}
.dl-how{padding:0 16px 14px;margin-top:auto}
.dl-how p{margin:0;font-size:calc(11.5px*var(--fs,1));line-height:1.55;color:var(--muted)}
.dl-how code{font-size:calc(11px*var(--fs,1));background:var(--gray-100);padding:1px 4px;border-radius:2px;color:var(--ink-2)}

.dl-section{margin-top:26px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px}
.dl-section--quiet{background:transparent;border-style:dashed}
.dl-h2{font-size:calc(12px*var(--fs,1));font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--green-dark);margin:0 0 12px}
.dl-steps{margin:0;padding-left:20px;font-size:calc(13px*var(--fs,1));line-height:1.85;color:var(--ink-2)}
.dl-note{font-size:calc(12px*var(--fs,1));line-height:1.6;color:var(--muted);margin:10px 0 0}
.dl-pre{margin:10px 0 0;padding:10px 12px;background:var(--gray-50);
  border:1px solid var(--line-soft);border-radius:3px;overflow-x:auto}
.dl-pre code{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;
  font-size:calc(11.5px*var(--fs,1));color:var(--ink-2)}
.dl-sums{margin-top:12px}
.dl-sums summary{cursor:pointer;font-size:calc(12px*var(--fs,1));font-weight:600;color:var(--green-dark)}
.dl-table{width:100%;border-collapse:collapse;margin-top:8px}
.dl-table td{padding:5px 8px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.dl-mono{font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:calc(10.5px*var(--fs,1));
  word-break:break-all}
.dl-dim{color:var(--muted)}
.dl-faq{margin:0;display:grid;grid-template-columns:110px 1fr;gap:8px 16px;font-size:calc(12.5px*var(--fs,1))}
.dl-faq dt{font-weight:700;color:var(--ink)}
.dl-faq dd{margin:0;color:var(--muted);line-height:1.55}
.dl-faq code{font-size:calc(11px*var(--fs,1));background:var(--gray-100);padding:1px 4px;border-radius:2px;color:var(--ink-2)}

.dl-empty{background:#fff;border:1px solid var(--line);border-top:3px solid var(--warn);
  border-radius:var(--radius);padding:26px 22px;text-align:center}
.dl-empty i{font-size:calc(30px*var(--fs,1));color:var(--warn)}
.dl-empty h2{font-size:calc(16px*var(--fs,1));font-weight:800;margin:10px 0 6px}
.dl-empty p{font-size:calc(12.5px*var(--fs,1));line-height:1.6;color:var(--muted);
  max-width:52ch;margin:0 auto 16px}

.dl-foot{background:#fff;border-top:1px solid var(--line);padding:14px 0}
.dl-foot-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:calc(11.5px*var(--fs,1));color:var(--muted)}
@media (max-width:640px){
  .dl-title{font-size:calc(24px*var(--fs,1))}
  .dl-faq{grid-template-columns:1fr;gap:2px}
  .dl-faq dd{margin-bottom:8px}
  .dl-foot-row{flex-direction:column;align-items:flex-start}
}
/* BOQ grid: a section heading row inside a line grid */
table.xl-table tbody tr.is-section td,table.xl-table tbody tr.is-section td.sticky-col{background:var(--green-soft);font-weight:600}
table.xl-table tbody tr.is-section td.editable input:read-only{background:transparent}

/* compact toolbar fields — a filter bar with many controls stays on one line */
.tb-field--sm .form-control,.tb-field--sm .form-select{min-width:0;width:118px}
.tb-field--sm input[type=date].form-control{width:132px}

/* ── plant on a phone ──────────────────────────────────────────────
   Five full-width stat cards pushed every list a screen down, the tab strip
   clipped "Machines", and the pinned Actions cell covered the customer column
   of the contracts table. Two compact cards per row, a strip that scrolls, and
   Actions that scroll with their row (the table already scrolls sideways). */
@media (max-width: 640px) {
  .stat-row.stat-row--plant { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .stat-row.stat-row--plant > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat-row.stat-row--plant .stat-card { padding: 8px 10px; }
  .seg-tabs.plant-tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .seg-tabs.plant-tabs .seg-tab { flex: 0 0 auto; padding: 6px 10px; }
  table.xl-table[data-table-id^="plant-"] thead th.col-act,
  table.xl-table[data-table-id^="plant-"] tbody td.col-act { position: static; }
}
@media (max-width: 380px) {
  .stat-row.stat-row--plant { grid-template-columns: repeat(2, 1fr); }
}

/* ── Project System: hover "Add WBS" on a structure row ─────────────── */
.ps-add-wbs { opacity: 0; border: 1px solid var(--line-soft); background: var(--surface, #fff);
  color: var(--green, #0a7d3c); border-radius: 999px; padding: 0 8px; line-height: 18px;
  font-size: calc(10.5px*var(--fs,1)); font-weight: 600; white-space: nowrap; cursor: pointer; }
.ps-wbs-row:hover .ps-add-wbs, .ps-add-wbs:focus-visible { opacity: 1; }
.ps-add-wbs:hover { background: var(--green-soft); }
@media (hover: none) { .ps-add-wbs { opacity: 1; } }
/* ── SAP export import: collapsible change lists ─────────────── */
.imp-det{border:1px solid var(--line-soft);border-radius:var(--radius);padding:6px 10px;background:var(--gray-50)}
.imp-det>summary{cursor:pointer;font-size:calc(12px*var(--fs,1));font-weight:600;color:var(--ink-2)}
.imp-det[open]>summary{margin-bottom:4px}

/* ── Financial statements: the ledger laid out as an audit report ── */
.fs-wrap{max-width:980px;margin:0 auto;padding-bottom:40px}
.fs-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;flex-wrap:wrap}
.fs-toc{display:flex;gap:6px;flex-wrap:wrap}
.fs-toc a{padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-2);font-size:calc(12px*var(--fs,1))}
.fs-toc a:hover{border-color:var(--green);color:var(--green)}
.fs-ok{color:var(--green)}.fs-bad{color:var(--warn)}
.fs-sheet{background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.06);padding:34px 42px 30px;margin-bottom:18px;font-family:Georgia,"Times New Roman",serif;color:var(--ink)}
.fs-head{text-align:center;margin-bottom:16px}
.fs-co{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:calc(15px*var(--fs,1))}
.fs-title{font-weight:700;font-size:calc(15px*var(--fs,1));margin-top:2px}
.fs-sub-title{color:var(--muted);font-size:calc(12.5px*var(--fs,1));margin-top:2px}
.fs-cover{text-align:center;padding:60px 42px}
.fs-cover .fs-title{font-size:calc(26px*var(--fs,1));margin:10px 0 6px}
.fs-meta{max-width:560px;margin:22px auto 0;color:var(--muted);font-size:calc(12.5px*var(--fs,1));line-height:1.5}
.fs-table{width:100%;border-collapse:collapse;font-size:calc(13px*var(--fs,1))}
.fs-table th{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:5px 8px;font-weight:700;text-align:left}
.fs-table th.num{text-align:right}
.fs-table td{padding:3px 8px;vertical-align:top}
.fs-table .fs-n{text-align:center;color:var(--muted);font-size:calc(12px*var(--fs,1))}
.fs-table .fs-n a{color:var(--green-dark)}
.fs-table .fs-prior{color:var(--muted)}
.fs-table .fs-grp td{font-weight:700;padding-top:14px;border-bottom:1px solid var(--line)}
.fs-table .fs-sec td{font-weight:700;font-style:italic;padding-top:8px}
.fs-table .fs-sub td{font-weight:700;border-top:1px solid var(--line)}
.fs-table .fs-total td{font-weight:700;border-top:1px solid var(--ink);border-bottom:3px double var(--ink);padding-top:5px;padding-bottom:5px}
.fs-table .fs-nil{color:var(--muted);font-style:italic}
.fs-table .fs-l{padding-left:18px}
.fs-note{margin-bottom:16px;break-inside:avoid}
.fs-note h3{font-size:calc(13.5px*var(--fs,1));margin:14px 0 4px;font-weight:700}
.fs-nno{display:inline-block;min-width:44px}
.fs-note-table .fs-sub td{border-top:1px solid var(--ink)}
.fs-checks ul{list-style:none;padding:0;margin:0;font-size:calc(13px*var(--fs,1))}
.fs-checks li{padding:4px 0}
@media (max-width:700px){.fs-sheet{padding:18px 12px}.fs-table{font-size:calc(12px*var(--fs,1))}}
@media print{
  body:not(:has(.doc-drawer.show)) *{visibility:visible!important}
  .main{position:static!important;overflow:visible!important;height:auto!important;left:0!important;right:auto!important;top:auto!important;bottom:auto!important}
  html,body{overflow:visible!important;height:auto!important}
  .sidebar,.topbar,.statusbar,.fs-bar,.fs-wrap>form.panel,.page-head{display:none!important}
  .fs-wrap{max-width:none}
  .fs-sheet{border:0;box-shadow:none;margin:0;padding:10mm 4mm;page-break-after:always}
  .fs-checks{page-break-after:auto}
}
.fs-presets{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 0;font-size:calc(12px*var(--fs,1))}
.fs-chip{padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-2)}
.fs-chip:hover{border-color:var(--green);color:var(--green)}
.fs-sep{flex:0 0 1px;height:16px;background:var(--line);margin:0 4px}
.fs-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif}
.fs-kpi{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;background:var(--gray-50)}
.fs-kpi-v{font-size:calc(20px*var(--fs,1));font-weight:700;font-variant-numeric:tabular-nums}
.fs-kpi.is-na .fs-kpi-v{color:var(--muted)}
.fs-kpi-l{font-weight:600;font-size:calc(12.5px*var(--fs,1));margin-top:2px}
.fs-kpi-h{color:var(--muted);font-size:calc(11px*var(--fs,1));margin-top:2px}
.fs-drill{color:var(--green-dark);border-bottom:1px dotted var(--green)}
.fs-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif}
.fs-links a{padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink-2);background:#fff}
.fs-links a:hover{border-color:var(--green);color:var(--green)}
@media print{.fs-presets,.fs-related{display:none!important}}