/* ==========================================================================
   SP GLOBAL INDUSTRIES — ERP THEME
   erp/assets/css/erp-theme.css
   One stylesheet for every screen. Do not put colours, fonts or spacing
   anywhere else: no inline style="", no per-page <style> blocks.
   Source of truth for §S59 notebook-production look.
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root{
  /* ground & surface */
  --paper:#eef2f7;        /* app background */
  --surface:#ffffff;      /* cards, tables, bars */
  --surface-2:#f7f9fc;    /* hover, input, zebra */

  /* ink */
  --ink:#0f1a2b;          /* headings, figures */
  --ink-2:#33445c;        /* body text */
  --muted:#6b7c94;        /* labels, captions */

  /* lines */
  --rule:#d7dfea;         /* normal border */
  --rule-2:#e6ecf3;       /* inner row divider */

  /* state */
  --green:#1b7a42;  --green-bg:#e8f4ea;  --green-line:#bcdcc3;  /* approved / posted */
  --navy:#1d3f8f;   --navy-bg:#eaf0fb;                          /* in hand, links, focus */
  --amber:#8a5d00;  --amber-bg:#fbf1d8;                         /* waiting, parked */
  --red:#a32020;    --red-bg:#fbecec;                           /* rejected, overdue */

  /* left rail */
  --rail:#0f1a2b; --rail-ink:#c3cfdf; --rail-rule:#22304a; --rail-on:#6fd39a;

  /* type */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* metrics */
  --r:3px;                /* the only radius in the system */
  --gap:16px;
  --page-max:1180px;
}

/* 2. BASE ------------------------------------------------------------------ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:600;letter-spacing:-.005em}
p{margin:0 0 10px}
a{color:var(--navy)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--navy);outline-offset:1px}

/* the four type roles — use these, never ad-hoc font-size */
.erp-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.erp-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.erp-meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-2)}
.erp-num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* 3. FRAME ----------------------------------------------------------------- */
.erp-app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.erp-main{min-width:0;display:flex;flex-direction:column}
.erp-page{padding:26px 24px 44px;width:100%;max-width:var(--page-max)}

/* left rail */
.erp-rail{background:var(--rail);color:var(--rail-ink);border-right:1px solid var(--rail-rule);padding-bottom:28px}
.erp-rail-head{display:flex;gap:11px;align-items:flex-start;padding:18px 18px 16px;border-bottom:1px solid var(--rail-rule)}
.erp-rail-mark{width:30px;height:30px;flex:none;border:1px solid var(--rail-on);color:var(--rail-on);border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:11px}
.erp-rail-name{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;line-height:1.35;text-transform:uppercase;color:#fff}
.erp-rail-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.erp-rail nav{padding:14px 10px 0}
.erp-rail-group{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.5;padding:16px 10px 7px}
.erp-rail a{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding:7px 10px;color:inherit;text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;border-left:2px solid transparent;border-radius:0 var(--r) var(--r) 0}
.erp-rail a span{opacity:.45;font-size:10px}
.erp-rail a:hover{background:rgba(127,160,200,.12);color:#fff}
.erp-rail a[aria-current]{background:rgba(127,160,200,.14);border-left-color:var(--rail-on);color:#fff}

/* top bar */
.erp-topbar{display:flex;align-items:center;gap:14px;padding:12px 24px;background:var(--surface);border-bottom:1px solid var(--rule)}
.erp-search{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:7px 11px;background:var(--surface-2);
  border:1px solid var(--rule);border-radius:var(--r);font-family:var(--mono);font-size:12px;color:var(--muted)}
.erp-kbd{margin-left:auto;border:1px solid var(--rule);border-radius:2px;padding:1px 5px;font-size:10px;letter-spacing:.04em}
.erp-fy{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:7px 10px;border:1px solid var(--rule);border-radius:var(--r);color:var(--ink-2);white-space:nowrap}
.erp-who{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-2);white-space:nowrap}

/* breadcrumb + quick links strip */
.erp-strip{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;padding:10px 24px;background:var(--surface);
  border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:11.5px;letter-spacing:.03em}
.erp-strip .crumb{color:var(--muted)}
.erp-strip .crumb b{color:var(--ink);font-weight:500}
.erp-strip a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* 4. MASTHEAD (every document / screen opens with this) -------------------- */
.erp-masthead{border-bottom:2px solid var(--ink);padding-bottom:16px;margin-bottom:26px}
.erp-masthead h1{font-size:32px;margin:8px 0 6px}
.erp-dateline{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-2)}
.erp-dateline em{font-style:normal;color:var(--muted)}
.erp-standfirst{max-width:62ch;color:var(--ink-2);margin-top:12px}

/* section heading with the trailing rule */
.erp-section{display:flex;align-items:baseline;gap:12px;margin:0 0 12px}
.erp-section h2{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.erp-section .rule{flex:1;height:1px;background:var(--rule)}
.erp-section .note{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--muted)}

/* 5. SURFACES -------------------------------------------------------------- */
.erp-panel{border:1px solid var(--rule);background:var(--surface);padding:15px 17px}
.erp-panel > .erp-label{display:block;margin-bottom:11px}
.erp-panel--ok{background:var(--green-bg);border-color:var(--green-line)}
.erp-panel--wait{border-left:3px solid var(--amber)}
.erp-panel--bad{border-left:3px solid var(--red)}

/* hairline grid of equal cards (modules, KPI queue, field pairs) */
.erp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:28px}
.erp-grid > *{background:var(--surface);padding:15px 17px 16px}
.erp-tile{display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit}
.erp-tile:hover{background:var(--surface-2)}
.erp-tile h3{font-size:17px}
.erp-tile p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.erp-tile .meta{margin-top:auto;padding-top:9px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted)}
.erp-tile.is-starred h3::after{content:"\2605";color:var(--amber);font-size:12px;margin-left:7px;vertical-align:2px}

/* counter cell inside .erp-grid (approvals waiting, trucks open, …) */
.erp-kpi{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:26px;line-height:1.2;margin-top:6px}
.erp-kpi--due{color:var(--red)}
.erp-kpi--ok{color:var(--green)}
.erp-kpi-foot{font-size:13px;color:var(--ink-2)}

/* one-line explanation sitting beside buttons in a bar panel */
.erp-panel--bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:26px}
.erp-inline-note{margin:0;font-size:14px;color:var(--ink-2);max-width:58ch}

/* phone-only rail button, lives in the top bar */
.erp-topbar .erp-rail-toggle{display:none}

/* 5b. ICONS — FROZEN -------------------------------------------------------
   The ERP keeps the icons it already has: the same emoji, the same pastel
   square, the same colour, the same shape. These classes only hold them in
   place; nothing here restyles an icon. Do not add, remove or recolour one. */
.erp-tileicon{width:38px;height:38px;flex:none;border-radius:6px;display:grid;place-items:center;font-size:19px;line-height:1}
/* UI-1a, 2026-09-13 — the tones below are the LIVE values, read from views/tiles.php
   (`.tl[data-tile=…] .ic{background:…}`) on the old dashboard, not the kit's placeholders.
   One tone per tile square; two tiles that shared a colour share a tone. */
.erp-t-green{background:#dcfce7}     /* daily_dashboard · guides */
.erp-t-sky{background:#e0f2fe}       /* daily_report */
.erp-t-yellow{background:#fef3c7}    /* purchase */
.erp-t-blue{background:#dbeafe}      /* sales */
.erp-t-pink{background:#ffe4e6}      /* production */
.erp-t-violet{background:#ede9fe}    /* stock */
.erp-t-orange{background:#ffedd5}    /* gatepass */
.erp-t-mint{background:#d1fae5}      /* cashbank */
.erp-t-red{background:#fee2e2}       /* expenses */
.erp-t-indigo{background:#e0e7ff}    /* payroll */
.erp-t-teal{background:#ccfbf1}      /* financial */
.erp-t-fuchsia{background:#fae8ff}   /* masters */
.erp-t-slate{background:#f1f5f9}     /* reports */
.erp-t-stone{background:#e2e8f0}     /* setup */
.erp-t-lemon{background:#fef9c3}     /* usermgmt */
.erp-t-grey{background:#eef2f6}      /* any tile without its own colour (parked) — the old default */
.erp-tilehead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.erp-rail a .nav{display:flex;align-items:center;gap:9px}
.erp-rail a .erp-navemoji{width:17px;display:inline-block;text-align:center;font-size:13px;opacity:1}
.erp-iconset{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.erp-iconset figure{margin:0;background:var(--surface);padding:12px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:7px}
.erp-iconset figcaption{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center}

/* label / value pair — replaces every read-only "form field" */
.erp-pair .erp-label{display:block;margin-bottom:4px}
.erp-pair .val{font-size:16px}

/* 6. TABLES ---------------------------------------------------------------- */
.erp-tablewrap{overflow-x:auto}
.erp-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface)}
.erp-table th{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:500;text-align:left;padding:0 10px 7px;border-bottom:1px solid var(--rule);white-space:nowrap}
.erp-table td{padding:8px 10px;border-bottom:1px solid var(--rule-2);vertical-align:top}
.erp-table tbody tr:hover{background:var(--surface-2)}
.erp-table tfoot td{border-bottom:0;border-top:1px solid var(--ink);font-weight:600}
.erp-table .num,.erp-table th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px}
.erp-table .sub td{background:var(--surface-2);font-size:13px}
.erp-table caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding-bottom:8px}

/* 7. BADGES ---------------------------------------------------------------- */
.erp-badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;border:1px solid}
.erp-badge--ok{background:var(--green-bg);border-color:var(--green-line);color:var(--green)}
.erp-badge--wait{background:var(--amber-bg);border-color:var(--amber);color:var(--amber)}
.erp-badge--bad{background:var(--red-bg);border-color:var(--red);color:var(--red)}
.erp-badge--draft{background:var(--surface-2);border-color:var(--rule);color:var(--muted)}

/* 8. BUTTONS --------------------------------------------------------------- */
.erp-btn{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 13px;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);color:var(--ink);
  cursor:pointer;text-decoration:none;white-space:nowrap}
.erp-btn:hover{border-color:var(--ink-2)}
.erp-btn--primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.erp-btn--approve{background:var(--green-bg);border-color:var(--green);color:var(--green)}
.erp-btn--park{background:var(--amber-bg);border-color:var(--amber);color:var(--amber)}
.erp-btn--danger{background:var(--red-bg);border-color:var(--red);color:var(--red)}
.erp-btn[disabled],.erp-btn--off{opacity:.45;pointer-events:none}
.erp-btnrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* 9. WIZARD STEPS (the §S59 pattern) --------------------------------------- */
.erp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:9px;margin-bottom:24px}
.erp-step{border:1px solid var(--rule);background:var(--surface-2);padding:9px 11px 10px}
.erp-step .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.erp-step .t{font-weight:600;font-size:14px;margin-top:2px}
.erp-step .s{font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--muted)}
.erp-step--done{background:var(--green-bg);border-color:var(--green-line)}
.erp-step--done .s{color:var(--green)}
.erp-step--now{background:var(--surface);border:2px solid var(--navy)}
.erp-step--locked{opacity:.6}

/* 10. FORMS ---------------------------------------------------------------- */
.erp-field{display:block;margin-bottom:14px}
.erp-field > .erp-label{display:block;margin-bottom:5px}
.erp-input,.erp-select,.erp-textarea{width:100%;font-family:var(--mono);font-size:13px;padding:9px 10px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.erp-input[readonly]{background:var(--surface-2);color:var(--muted)}
.erp-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--muted)}
.erp-err{color:var(--red);font-family:var(--mono);font-size:10.5px}
.erp-input--bad{border-color:var(--red);background:var(--red-bg)}

/* ≤3 options = tap buttons; >3 options = scrollable list (mobile rule) */
.erp-choice{display:flex;gap:8px;flex-wrap:wrap}
.erp-choice label{flex:1;min-width:96px;text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  padding:11px 8px;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);cursor:pointer}
.erp-choice input{position:absolute;opacity:0;pointer-events:none}
.erp-choice input:checked + label,.erp-choice label.is-on{border-color:var(--green);background:var(--green-bg);color:var(--green)}
.erp-list{max-height:260px;overflow-y:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.erp-list button{display:block;width:100%;text-align:left;padding:11px 12px;border:0;border-bottom:1px solid var(--rule-2);
  background:none;font-family:var(--mono);font-size:12.5px;color:var(--ink);cursor:pointer}
.erp-list button:hover{background:var(--surface-2)}

/* 11. NOTICES -------------------------------------------------------------- */
.erp-note{border:1px solid var(--rule);border-left:3px solid var(--navy);background:var(--surface);padding:12px 15px;margin-bottom:18px}
.erp-note--ok{border-left-color:var(--green)}
.erp-note--wait{border-left-color:var(--amber)}
.erp-note--bad{border-left-color:var(--red)}
.erp-note p{margin:0;color:var(--ink-2);font-size:14px}

.erp-footnote{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted);
  border-top:1px solid var(--rule);padding-top:12px;margin-top:26px}

/* 12. MOBILE --------------------------------------------------------------- */
@media (max-width:900px){
  .erp-app{grid-template-columns:1fr}
  .erp-rail{display:none}
  .erp-rail.is-open{display:block;position:fixed;inset:0 auto 0 0;width:260px;z-index:50;overflow-y:auto}
  .erp-topbar .erp-rail-toggle{display:inline-block}
  .erp-page{padding:20px 16px 36px}
  .erp-topbar,.erp-strip{padding-left:16px;padding-right:16px}
  .erp-masthead h1{font-size:26px}
  .erp-btn{padding:10px 14px}           /* thumb-sized on phones */
  .erp-choice label{min-width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 13. PRINT (party ledger, costing sheet, gate pass) ----------------------- */
@media print{
  :root{--paper:#fff;--surface:#fff;--surface-2:#fff}
  .erp-rail,.erp-topbar,.erp-strip,.erp-btn,.erp-btnrow,.no-print{display:none!important}
  .erp-app{display:block}
  .erp-page{max-width:none;padding:0}
  body{font-size:11pt}
  .erp-masthead{border-bottom:1.5pt solid #000}
  .erp-table{page-break-inside:auto}
  .erp-table tr{page-break-inside:avoid}
  .erp-table thead{display:table-header-group}
  .erp-table tfoot{display:table-footer-group}
}

/* ==========================================================================
   14. LIVE ERP CHROME — added in UI-1a (2026-09-13), in the kit's own style.
   The kit's layout assumed a flat rail, a text-only search box and no top-bar
   buttons. The live ERP's chrome has more in it, and every piece below is
   something the old layout.php already did that the theme had no class for.
   Listed in PROJECT_STATUS.md under Phase UI-1.
   ========================================================================== */

/* 14.1 rail — one module per <details>; its screens fly out to the right (the H11 flyout) */
.erp-rail-logo{display:flex;align-items:center;flex:none}
.erp-rail-logo img,.erp-rail-logo svg{height:34px;width:auto;max-width:170px;object-fit:contain}
.erp-rail details{margin:0}
.erp-rail summary{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;
  list-style:none;color:inherit;font-family:var(--mono);font-size:12px;letter-spacing:.03em;
  border-left:2px solid transparent;border-radius:0 var(--r) var(--r) 0}
.erp-rail summary::-webkit-details-marker{display:none}
.erp-rail summary .nav{display:flex;align-items:center;gap:9px}
.erp-rail summary .ar{opacity:.45;font-size:10px;transition:transform .12s}
.erp-rail summary:hover{background:rgba(127,160,200,.12);color:#fff}
.erp-rail details[open]>summary{color:#fff}
.erp-rail details[open]>summary .ar{transform:translateX(2px)}
.erp-rail details.is-current>summary{background:rgba(127,160,200,.14);border-left-color:var(--rail-on);color:#fff}
/* the screens fly out to the RIGHT of the rail (owner 2026-09-13: "same as before, horizontally") */
.erp-rail{position:relative}
.erp-rail details{position:relative}
.erp-rail-fly{display:none;position:absolute;left:calc(100% + 10px);top:0;z-index:70;min-width:16rem;max-width:34rem;
  max-height:calc(100vh - 1rem);overflow-y:auto;background:var(--rail);border:1px solid var(--rail-rule);border-left:0;
  border-radius:0 var(--r) var(--r) 0;padding:6px 0 8px}
.erp-rail details[open]>.erp-rail-fly{display:block}
.erp-rail-flyhead{padding:7px 14px 8px;margin-bottom:4px;border-bottom:1px solid var(--rail-rule);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rail-on)}
.erp-rail-fly>a{padding:6px 16px;font-size:11.5px;border-radius:0}
.erp-rail-fly.two{column-count:2;column-gap:0;min-width:30rem}
.erp-rail-fly.two>.erp-rail-flyhead{column-span:all}
.erp-rail-fly>a{break-inside:avoid}
.erp-rail-fly>a[aria-current]{border-left-color:var(--rail-on);background:rgba(127,160,200,.14);color:#fff}
@media (max-width:900px){   /* the drawer has nothing to its right: the list drops below the row */
  .erp-rail-fly{position:static;min-width:0;max-width:none;max-height:none;border:0;border-radius:0;padding:0 0 4px}
  .erp-rail-fly.two{column-count:1;min-width:0}
  .erp-rail-flyhead{display:none}
  .erp-rail-fly>a{padding-left:36px}
}
/* FROZEN: the rail's module icons keep the size the old sidebar drew them at (1.2rem in a 1.5rem slot). */
.erp-rail .erp-navemoji{width:1.5rem;font-size:1.2rem}

/* 14.2 top bar — the search is a real form, the FY selector a real <select> */
.erp-search{padding:0}
.erp-search input{flex:1;min-width:0;border:0;background:transparent;padding:8px 11px;font:inherit;color:var(--ink);outline:0}
.erp-search input::placeholder{color:var(--muted)}
.erp-search .erp-kbd{margin-right:9px}
select.erp-fy{background:var(--surface);cursor:pointer;min-width:11rem}
.erp-topbar .erp-btn{min-height:44px}

/* a menu that opens under its button — favourites, the user chip. Native <details>, no script. */
.erp-menu{position:relative}
.erp-menu>summary{list-style:none;cursor:pointer}
.erp-menu>summary::-webkit-details-marker{display:none}
.erp-menu-panel{position:absolute;right:0;top:calc(100% + 6px);min-width:15rem;z-index:60;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:6px 0}
.erp-menu-panel .hd{padding:6px 14px 4px}
.erp-menu-panel a,.erp-menu-panel button{display:block;width:100%;text-align:left;padding:8px 14px;border:0;background:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink);text-decoration:none;cursor:pointer}
.erp-menu-panel a:hover,.erp-menu-panel button:hover{background:var(--surface-2)}
.erp-menu-panel .empty{display:block;padding:6px 14px 8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.erp-menu-panel hr{border:0;border-top:1px solid var(--rule-2);margin:6px 0}
.erp-menu-panel .danger{color:var(--red)}
.erp-menu-panel form{margin:0}

/* 14.3 top-bar picture buttons — FROZEN (owner 2026-08-25 / §S20 / §S52 / 2026-09-06).
   Same 3.4rem square, same 26% radius, same emoji at .58 of the square, same tint AND border
   as `.tb-ic-*` in the old layout.php. Only the label's face changed. */
.erp-tb-tile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  text-decoration:none;color:var(--ink);line-height:1;padding:.1rem .2rem;border-radius:var(--r);
  font-family:var(--mono);font-size:10px;letter-spacing:.06em}
.erp-tb-ic{position:relative;width:3.4rem;height:3.4rem;font-size:calc(3.4rem * .58);line-height:1;
  border-radius:calc(3.4rem * .26);display:flex;align-items:center;justify-content:center;border:1px solid transparent}
.erp-tb-dash{background:#dcfce7;border-color:#bbf7d0}
.erp-tb-appr{background:#fef3c7;border-color:#fde68a}
.erp-tb-truck{background:#dbeafe;border-color:#bfdbfe}
.erp-tb-cash{background:#e6f4ec;border-color:#bfe0cd}
.erp-tb-park{background:#fff3cd;border-color:#ffe69c}
.erp-tb-badge{position:absolute;top:-7px;right:-9px;font-size:10px;padding:2px 7px}

/* 14.4 module tiles on the home grid — FROZEN icon square (5rem, 16px radius, 3.2rem emoji: the
   unscaled size views/tiles.php drew it at) plus the star, the approvals badge and the §S56 drag
   states tile-drag.js toggles by class name. */
.erp-tile{position:relative;touch-action:none}
.erp-tile .erp-tileicon{width:5rem;height:5rem;border-radius:16px;font-size:3.2rem}
.erp-tile-star{position:absolute;top:8px;right:9px;border:0;background:transparent;font-size:1.05rem;line-height:1;
  cursor:pointer;color:var(--rule);padding:2px 4px;border-radius:var(--r)}
.erp-tile-star:hover{background:var(--surface-2)}
.erp-tile-star.on{color:var(--amber)}
.erp-tile.tl-fav{box-shadow:inset 0 0 0 1px var(--amber)}
.erp-tile-badge{position:absolute;top:10px;left:12px}
.tl-dragging{opacity:.55}
.tl-grid-dragging{user-select:none;-webkit-user-select:none}
.tl-flash{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%) translateY(1rem);z-index:80;
  background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:var(--r);
  font-family:var(--mono);font-size:12px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.tl-flash.on{opacity:1;transform:translateX(-50%) translateY(0)}
.tl-flash.bad{background:var(--red)}

/* 14.5 the approvals-waiting dialog (owner 2026-08-28), a native <dialog> */
.erp-dialog{border:1px solid var(--rule);border-radius:var(--r);padding:0;width:min(560px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);background:var(--surface);color:var(--ink)}
.erp-dialog::backdrop{background:rgba(15,26,43,.45)}
.erp-dialog .hd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule)}
.erp-dialog .hd h2{font-size:17px}
.erp-dialog .bd{overflow-y:auto;max-height:60vh}
.erp-dialog .bd a{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--rule-2);color:inherit;text-decoration:none}
.erp-dialog .bd a:hover{background:var(--surface-2)}
.erp-dialog .bd .t{font-weight:600;font-size:14px}
.erp-dialog .bd .d{font-size:13px;color:var(--ink-2)}
.erp-dialog .bd .r{flex:none;text-align:right;font-family:var(--mono);font-size:11px;color:var(--muted)}
.erp-dialog .ft{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--rule)}

/* 14.6 phone navigation bar (H45) — an installed app has no back button. Emoji FROZEN. */
.erp-mnav{display:none}
@media (max-width:767px){
  body{padding-bottom:4.2rem}
  .erp-mnav{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;background:var(--surface);
    border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom)}
  .erp-mnav a,.erp-mnav button{flex:1;min-height:44px;border:0;background:transparent;text-align:center;padding:.5rem .2rem;
    color:var(--ink-2);font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-decoration:none;line-height:1.15;cursor:pointer}
  .erp-mnav .ni{display:block;font-size:1.15rem}
}

/* 14.7 the top bar and the strip fold on a phone instead of overflowing */
@media (max-width:900px){
  .erp-topbar{flex-wrap:wrap;gap:10px 12px}
  .erp-topbar .erp-search{order:9;flex-basis:100%}
  .erp-strip a{padding:8px 0}                                          /* ≥44px tap height with the line box */
  .erp-tile .erp-tileicon{width:4rem;height:4rem;font-size:2.6rem}    /* the old grid's own phone scale */
}

/* 14.8 the page-favourite star in the strip (the ☆ layout.php puts beside the breadcrumb) */
.erp-fav-star{border:0;background:transparent;font-size:1.05rem;line-height:1;cursor:pointer;color:var(--rule);padding:4px 8px;border-radius:var(--r)}
.erp-fav-star:hover{background:var(--surface-2)}
.erp-fav-star.on{color:var(--amber)}
.erp-menu>summary.erp-star{font-size:16px;line-height:1;padding:12px 14px}

/* 14.9 phone tap targets — every control ≥44px (THEME-MIGRATION §2.6); glyph sizes unchanged */
@media (max-width:900px){
  .erp-tile-star,.erp-fav-star{min-width:44px;min-height:44px}
  .erp-menu-panel a,.erp-menu-panel button{min-height:44px;display:flex;align-items:center}
  .erp-rail summary,.erp-rail-fly>a{min-height:44px;align-items:center}
}

/* 14.10 frame with the rail in the DOM AFTER the top bar and strip (keyboard order: Menu → search
   → FY → rail → tiles) but drawn down the left as before. Replaces the .erp-main wrapper. */
.erp-app{grid-template-rows:auto auto 1fr;align-content:start}
.erp-app>.erp-rail{grid-column:1;grid-row:1/4}
.erp-app>.erp-topbar{grid-column:2;grid-row:1}
.erp-app>.erp-strip{grid-column:2;grid-row:2}
.erp-app>.erp-page{grid-column:2;grid-row:3;min-width:0}
@media (max-width:900px){
  .erp-app>.erp-topbar,.erp-app>.erp-strip,.erp-app>.erp-page{grid-column:1}
  .erp-app>.erp-rail.is-open{grid-column:auto;grid-row:auto}
}
@media print{ .erp-app>.erp-page{grid-column:auto} }

/* ==========================================================================
   15. NOT-YET-MIGRATED SCREENS (UI-1a.2, owner 2026-09-13: "inside all modules, forms … all should
   change as per same dashboard, and it should be permanent"). Every screen now renders through the
   themed chrome (includes/chrome.php); its BODY is still the Bootstrap markup the view produces.
   These rules dress Bootstrap's components in the theme's tokens — same faces, same rules, same
   state colours, one radius — until UI-1b…UI-1g rebuild each screen on the real classes, at which
   point this section shrinks and finally goes. Scoped to body.erp-legacy so migrated pages never
   inherit any of it. Icons untouched: nothing here selects an emoji or a tinted square.
   ========================================================================== */
body.erp-legacy{--bs-body-font-family:var(--serif);--bs-body-bg:var(--paper);--bs-body-color:var(--ink);
  --bs-border-color:var(--rule);--bs-border-radius:var(--r);--bs-border-radius-sm:var(--r);--bs-border-radius-lg:var(--r);
  --bs-link-color:var(--navy);--bs-link-hover-color:var(--navy);--bs-secondary-color:var(--muted);
  --bs-primary:#1d3f8f;--bs-primary-rgb:29,63,143;--bs-success:#1b7a42;--bs-success-rgb:27,122,66;
  --bs-warning:#8a5d00;--bs-warning-rgb:138,93,0;--bs-danger:#a32020;--bs-danger-rgb:163,32,32;
  --bs-font-monospace:var(--mono);--bs-tertiary-bg:var(--surface-2);--bs-secondary-bg:var(--surface-2)}
.erp-page--legacy{max-width:none;overflow-x:auto}        /* wide registers keep their width; a wider one scrolls, never clips */
.erp-page--legacy .container-fluid{padding-left:0;padding-right:0}

/* headings and prose */
:where(body.erp-legacy) h1,:where(body.erp-legacy) .h1{font-size:28px;margin-bottom:6px}
:where(body.erp-legacy) h2,:where(body.erp-legacy) .h2{font-size:22px}
:where(body.erp-legacy) h3,:where(body.erp-legacy) .h3{font-size:18px}
:where(body.erp-legacy) h4,:where(body.erp-legacy) .h4,:where(body.erp-legacy) h5,:where(body.erp-legacy) .h5{font-size:16px}
:where(body.erp-legacy) .text-body-secondary,:where(body.erp-legacy) .text-muted{color:var(--muted)!important}
:where(body.erp-legacy) .breadcrumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em}
:where(body.erp-legacy) .font-monospace,:where(body.erp-legacy) code,:where(body.erp-legacy) kbd{font-family:var(--mono)}

/* surfaces: cards, alerts, list groups */
:where(body.erp-legacy) .card{border:1px solid var(--rule);border-radius:var(--r);box-shadow:none;background:var(--surface)}
:where(body.erp-legacy) .card-header{background:var(--surface);border-bottom:1px solid var(--rule);font-family:var(--mono);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
:where(body.erp-legacy) .alert{border-radius:var(--r);border:1px solid var(--rule);border-left-width:3px;background:var(--surface);color:var(--ink-2)}
:where(body.erp-legacy) .alert-success{border-left-color:var(--green)}
:where(body.erp-legacy) .alert-warning{border-left-color:var(--amber)}
:where(body.erp-legacy) .alert-danger{border-left-color:var(--red)}
:where(body.erp-legacy) .alert-info,:where(body.erp-legacy) .alert-primary,:where(body.erp-legacy) .alert-secondary{border-left-color:var(--navy)}
:where(body.erp-legacy) .list-group-item{border-color:var(--rule-2)}
:where(body.erp-legacy) .shadow-sm,:where(body.erp-legacy) .shadow{box-shadow:none!important}
:where(body.erp-legacy) .rounded,:where(body.erp-legacy) .rounded-2,:where(body.erp-legacy) .rounded-3{border-radius:var(--r)!important}

/* tables: mono uppercase headings, hairline rows, figures right and tabular */
:where(body.erp-legacy) .table{--bs-table-bg:var(--surface);--bs-table-striped-bg:var(--surface-2);--bs-table-hover-bg:var(--surface-2);
  --bs-table-border-color:var(--rule-2)}
:where(body.erp-legacy) .table>thead>tr>th{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  color:var(--muted);font-weight:500;border-bottom:1px solid var(--rule);background:var(--surface)}
:where(body.erp-legacy) .table>tfoot>tr>td,:where(body.erp-legacy) .table>tfoot>tr>th{border-top:1px solid var(--ink);font-weight:600}
:where(body.erp-legacy) .table .text-end,:where(body.erp-legacy) .table td[data-val],:where(body.erp-legacy) .table .num{font-family:var(--mono);
  font-variant-numeric:tabular-nums;font-size:13px}
:where(body.erp-legacy) .table-light,:where(body.erp-legacy) .table>thead.table-light>tr>th{--bs-table-bg:var(--surface-2)}

/* buttons: mono, uppercase, one radius, the four state colours */
:where(body.erp-legacy) .btn{font-family:var(--mono);font-size:12px;letter-spacing:0;border-radius:var(--r);
  --bs-btn-border-color:var(--rule);--bs-btn-bg:var(--surface);--bs-btn-color:var(--ink);--bs-btn-hover-border-color:var(--ink-2);
  --bs-btn-hover-bg:var(--surface);--bs-btn-hover-color:var(--ink)}
:where(body.erp-legacy) .btn-lg{font-size:13px}
:where(body.erp-legacy) .btn-sm{font-size:11px}
:where(body.erp-legacy) .btn-primary{--bs-btn-bg:var(--ink);--bs-btn-border-color:var(--ink);--bs-btn-color:var(--paper);
  --bs-btn-hover-bg:#22304a;--bs-btn-hover-border-color:#22304a;--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--ink);--bs-btn-active-color:#fff}
:where(body.erp-legacy) .btn-success{--bs-btn-bg:var(--green-bg);--bs-btn-border-color:var(--green);--bs-btn-color:var(--green);
  --bs-btn-hover-bg:var(--green);--bs-btn-hover-border-color:var(--green);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--green);--bs-btn-active-color:#fff}
:where(body.erp-legacy) .btn-warning{--bs-btn-bg:var(--amber-bg);--bs-btn-border-color:var(--amber);--bs-btn-color:var(--amber);
  --bs-btn-hover-bg:var(--amber);--bs-btn-hover-border-color:var(--amber);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--amber);--bs-btn-active-color:#fff}
:where(body.erp-legacy) .btn-danger{--bs-btn-bg:var(--red-bg);--bs-btn-border-color:var(--red);--bs-btn-color:var(--red);
  --bs-btn-hover-bg:var(--red);--bs-btn-hover-border-color:var(--red);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--red);--bs-btn-active-color:#fff}
:where(body.erp-legacy) .btn-outline-primary{--bs-btn-color:var(--navy);--bs-btn-border-color:var(--navy);--bs-btn-hover-bg:var(--navy-bg);--bs-btn-hover-color:var(--navy);--bs-btn-hover-border-color:var(--navy)}
:where(body.erp-legacy) .btn-outline-success{--bs-btn-color:var(--green);--bs-btn-border-color:var(--green);--bs-btn-hover-bg:var(--green-bg);--bs-btn-hover-color:var(--green);--bs-btn-hover-border-color:var(--green)}
:where(body.erp-legacy) .btn-outline-warning{--bs-btn-color:var(--amber);--bs-btn-border-color:var(--amber);--bs-btn-hover-bg:var(--amber-bg);--bs-btn-hover-color:var(--amber);--bs-btn-hover-border-color:var(--amber)}
:where(body.erp-legacy) .btn-outline-danger{--bs-btn-color:var(--red);--bs-btn-border-color:var(--red);--bs-btn-hover-bg:var(--red-bg);--bs-btn-hover-color:var(--red);--bs-btn-hover-border-color:var(--red)}
:where(body.erp-legacy) .btn-outline-secondary,:where(body.erp-legacy) .btn-light,:where(body.erp-legacy) .btn-secondary{--bs-btn-color:var(--ink);--bs-btn-border-color:var(--rule);
  --bs-btn-bg:var(--surface);--bs-btn-hover-bg:var(--surface-2);--bs-btn-hover-color:var(--ink);--bs-btn-hover-border-color:var(--ink-2)}
:where(body.erp-legacy) .btn-link{text-transform:none;letter-spacing:0;font-family:var(--serif);font-size:inherit}

/* badges = status pills */
:where(body.erp-legacy) .badge{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  padding:3px 9px;border-radius:999px;border:1px solid}
:where(body.erp-legacy) .badge.text-bg-success{background:var(--green-bg)!important;border-color:var(--green-line);color:var(--green)!important}
:where(body.erp-legacy) .badge.text-bg-warning{background:var(--amber-bg)!important;border-color:var(--amber);color:var(--amber)!important}
:where(body.erp-legacy) .badge.text-bg-danger{background:var(--red-bg)!important;border-color:var(--red);color:var(--red)!important}
:where(body.erp-legacy) .badge.text-bg-primary,:where(body.erp-legacy) .badge.text-bg-info{background:var(--navy-bg)!important;border-color:var(--navy);color:var(--navy)!important}
:where(body.erp-legacy) .badge.text-bg-secondary,:where(body.erp-legacy) .badge.text-bg-light,:where(body.erp-legacy) .badge.text-bg-dark{background:var(--surface-2)!important;border-color:var(--rule);color:var(--muted)!important}

/* forms */
:where(body.erp-legacy) .form-control,:where(body.erp-legacy) .form-select,:where(body.erp-legacy) .input-group-text{font-family:var(--mono);font-size:13px;
  border-color:var(--rule);border-radius:var(--r);color:var(--ink)}
:where(body.erp-legacy) .form-control:focus,:where(body.erp-legacy) .form-select:focus{border-color:var(--navy);box-shadow:none}
:where(body.erp-legacy) .form-control[readonly]{background:var(--surface-2);color:var(--muted)}
:where(body.erp-legacy) .form-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
:where(body.erp-legacy) .form-text{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
:where(body.erp-legacy) .nav-tabs{border-bottom-color:var(--rule)}
:where(body.erp-legacy) .nav-tabs .nav-link{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-radius:var(--r) var(--r) 0 0}
:where(body.erp-legacy) .nav-tabs .nav-link.active{color:var(--ink);border-color:var(--rule) var(--rule) var(--surface);background:var(--surface)}
:where(body.erp-legacy) .dropdown-menu{border-color:var(--rule);border-radius:var(--r);box-shadow:none;font-family:var(--mono);font-size:12px}
:where(body.erp-legacy) .modal-content{border-color:var(--rule);border-radius:var(--r);box-shadow:none}
:where(body.erp-legacy) .pagination{--bs-pagination-border-radius:var(--r);font-family:var(--mono);font-size:12px}

/* ==========================================================================
   16. CONTRAST (owner, 2026-09-13: "make the fonts same fonts but bold, and some areas it should
   be not looking more visible — backside theme should be dark and writing should be white,
   looking good to eye"). Same two faces, heavier: the serif at 600, the mono at 500 (the weights
   that are self-hosted). Greys darkened. The areas that read faint on a light ground — the top
   bar, the strip, every table heading, card headings — are now dark ink with white writing, like
   the rail. Icons untouched. Last in the file so it wins over §1–§15 without editing them.
   ========================================================================== */
:root{--muted:#3d4e66;--ink-2:#1c2a3d;--rail-ink:#dce4ef;--bar:#162238;--bar-2:#1e2d47}
body{font-weight:600}
strong,b,th,.erp-tile h3,.erp-masthead h1,.erp-section h2{font-weight:700}
.erp-eyebrow,.erp-label,.erp-meta,.erp-dateline,.erp-hint,.erp-footnote,.erp-kpi-foot,.erp-tile p,.erp-standfirst,.erp-inline-note,.erp-note p{color:var(--ink-2)}
.erp-label{font-size:10.5px}
.erp-tile .meta,.erp-section .note{color:var(--muted)}

/* rail: brighter rows */
.erp-rail{color:var(--rail-ink)}
.erp-rail a,.erp-rail summary{font-size:12.5px;color:#fff}
.erp-rail-group{opacity:.8}
.erp-rail summary .ar,.erp-rail a span{opacity:.7}

/* top bar — dark, white writing */
.erp-topbar{background:var(--bar);border-bottom-color:var(--rail-rule);color:#fff}
.erp-topbar .erp-search{background:var(--bar-2);border-color:var(--rail-rule);color:var(--rail-ink)}
.erp-topbar .erp-search input{color:#fff}
.erp-topbar .erp-search input::placeholder{color:var(--rail-ink);opacity:.9}
.erp-topbar .erp-kbd{border-color:var(--rail-rule);color:var(--rail-ink)}
.erp-topbar select.erp-fy,.erp-topbar .erp-btn,.erp-topbar .erp-who{background:var(--bar-2);border-color:var(--rail-rule);color:#fff}
.erp-topbar .erp-btn:hover{border-color:var(--rail-ink)}
.erp-topbar .erp-tb-tile{color:#fff}
.erp-topbar .erp-menu-panel{background:var(--surface);color:var(--ink)}

/* strip — dark, white writing */
.erp-strip{background:var(--bar);border-bottom-color:var(--rail-rule);font-size:12px}
.erp-strip .crumb{color:var(--rail-ink)}
.erp-strip .crumb b{color:#fff;font-weight:600}
.erp-strip a{color:#fff}
.erp-strip .erp-fav-star{color:var(--rail-ink)}
.erp-strip .erp-fav-star.on{color:#f3c969}

/* every table heading — dark, white writing; totals rule stays ink */
.erp-table th,.erp-table th.num{background:var(--ink);color:#fff;border-bottom-color:var(--ink);font-size:10.5px;font-weight:600;padding:7px 10px}
.erp-table caption{color:var(--ink-2)}
body.erp-legacy .table>thead>tr>th,
body.erp-legacy .app-main table>thead>tr>th,
body.erp-legacy .app-main table>thead>tr>td,
body.erp-legacy .dp-body table>thead>tr>th{background-color:var(--ink)!important;color:#fff!important;font-size:10.5px;font-weight:600;
  border-color:var(--ink)!important;box-shadow:none!important}
body.erp-legacy .table>thead>tr>th a{color:#fff}

/* card headings on the not-yet-migrated screens — dark, white writing */
body.erp-legacy .card-header{background:var(--ink)!important;color:#fff!important;font-size:11.5px;font-weight:600}
body.erp-legacy .card-header a,body.erp-legacy .card-header .btn-link{color:#fff}
body.erp-legacy .form-label,body.erp-legacy .form-text,body.erp-legacy .breadcrumb{color:var(--ink-2)}
body.erp-legacy .form-label{font-size:10.5px}
body.erp-legacy .text-body-secondary,body.erp-legacy .text-muted{color:var(--ink-2)!important}
body.erp-legacy .btn{font-weight:500}

/* ==========================================================================
   17. GREEN, NOT NAVY (owner, 2026-09-13: "all background should be in dark green … all ERP should
   not [be] navy blue, because when we move between module tiles it did not show which module folder
   we are [in]; so if green, and our selected module should be black, it will show us clearly").
   The dark ground everywhere is the ERP's own green (the old sidebar's #14532d), the accent is its
   gold, links and focus are green, and the module you are inside is BLACK in the rail. Tokens only —
   every rule above reads them. Icons untouched.
   ========================================================================== */
:root{
  --rail:#14532d;--rail-rule:#1b6b3a;--rail-on:#c79a3b;--rail-ink:#e7f1ea;
  --bar:#14532d;--bar-2:#1b6b3a;
  --navy:#14532d;--navy-bg:#e6f4ec;
  --on:#000000;                         /* the selected module */
}
.erp-rail summary:hover,.erp-rail a:hover{background:var(--rail-rule);color:#fff}
.erp-rail details.is-current>summary{background:var(--on);border-left-color:var(--rail-on);color:#fff;font-weight:700}
.erp-rail details[open]>summary{background:var(--rail-rule);color:#fff}
.erp-rail details.is-current[open]>summary{background:var(--on)}
.erp-rail-fly{background:var(--rail);border-color:var(--rail-rule)}
.erp-rail-fly>a[aria-current]{background:var(--on);border-left-color:var(--rail-on);color:#fff}
/* Owner 2026-09-13 (evening): "when we open a module the cursor goes to a sub-tile and its shade
   shows light green — it should be a BLACK shade which clearly says which tile the cursor is on."
   So the screen under the pointer in a flyout, and the module under the pointer in the rail, take
   the same black as the selected module, with the gold edge, and the keyboard focus does the same. */
.erp-rail-fly>a:hover,.erp-rail-fly>a:focus-visible,
.erp-rail summary:hover,.erp-rail summary:focus-visible{background:var(--on);color:#fff;border-left-color:var(--rail-on);outline:0}
.erp-rail-flyhead{color:var(--rail-on);border-bottom-color:var(--rail-rule)}
.erp-rail-mark{border-color:var(--rail-on);color:var(--rail-on)}
.erp-tile.is-starred h3::after{color:var(--rail-on)}
/* the dark headings and the primary buttons follow the bar */
.erp-table th,.erp-table th.num{background:var(--bar);border-bottom-color:var(--bar)}
body.erp-legacy .table>thead>tr>th,
body.erp-legacy .app-main table>thead>tr>th,
body.erp-legacy .app-main table>thead>tr>td,
body.erp-legacy .dp-body table>thead>tr>th{background-color:var(--bar)!important;border-color:var(--bar)!important}
body.erp-legacy .card-header{background:var(--bar)!important}
.erp-btn--primary{background:var(--bar);border-color:var(--bar);color:#fff}
.erp-btn--primary:hover{background:var(--bar-2);border-color:var(--bar-2)}
:where(body.erp-legacy) .btn-primary{--bs-btn-bg:var(--bar);--bs-btn-border-color:var(--bar);--bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--bar-2);--bs-btn-hover-border-color:var(--bar-2);--bs-btn-active-bg:var(--bar)}
.erp-step--now{border-color:var(--bar)}
.erp-dialog .hd{background:var(--bar);color:#fff}
.erp-dialog .hd h2{color:#fff}

/* ==========================================================================
   18. NOTEBOOK FULL PRODUCTION — the §S59 run page (UI-1b, 2026-09-13)
   views/production/chain.php lost its own stylesheet. Its panels, steps, badges, buttons, tables
   and notes are the classes above; these are the structures the theme had no class for, written on
   the tokens, scoped to .nbc so nothing leaks. Class names the page's scripts select on are kept
   (.route .prow .plan-row .plan-del .costlink .working .ss-* .lot-tick .r .doc .say .k .v).
   ========================================================================== */
.nbc{display:flex;flex-direction:column;gap:20px}
.nbc .wrap{display:flex;flex-direction:column;gap:20px}
.nbc .stack{display:flex;flex-direction:column;gap:20px}
.nbc h2{font-size:17px}
.nbc .doc{font-family:var(--mono);font-size:.9em}
.nbc .say{color:var(--ink-2);font-size:14px;max-width:74ch;margin:0}
.nbc .small{font-size:.78rem}
.nbc .sub{display:block;font-size:.78rem;color:var(--ink-2)}
.nbc .row2{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between}
.nbc .erp-dateline b{color:var(--ink)}
.nbc .erp-masthead h1{font-size:28px;margin-top:6px}

/* badge state the kit lacks: "this step" — in hand, on the bar colour */
.erp-badge--now{background:var(--navy-bg);border-color:var(--navy);color:var(--navy)}
/* panel states for a tiered document */
.erp-panel--now{border-color:var(--bar)}
.erp-panel--todo{opacity:.74}
.nbc .erp-panel{padding:0}
.nbc .phead{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;
  padding:11px 16px;border-bottom:1px solid var(--rule);background:var(--surface-2)}
.nbc .phead .ttl{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.nbc .stepno{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nbc .pbody{padding:15px 16px;display:flex;flex-direction:column;gap:13px}
.nbc .stools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto}
.nbc .stools .erp-btn{padding:5px 9px;font-size:10.5px}
.nbc .lockwhy{font-family:var(--mono);font-size:10.5px;color:var(--muted);cursor:help}
.nbc .nbc-editform{display:flex;flex-direction:column;gap:12px;padding:13px}
.nbc .why{font-size:13.5px;color:var(--ink-2)}
.nbc .erp-note{margin-bottom:0}
.nbc .erp-btnrow .erp-btn{min-height:0}

/* route cards — a radio you can read */
.nbc .routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.nbc .route{display:block;position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:14px;cursor:pointer}
.nbc .route:hover{border-color:var(--ink-2)}
.nbc .route input{position:absolute;opacity:0;width:0;height:0}
.nbc .route .rk{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block}
.nbc .route .rl{font-weight:700;font-size:16px;display:block;margin:2px 0 5px}
.nbc .route .rb{font-size:13.5px;color:var(--ink-2);display:block}
.nbc .route.on{border-color:var(--bar);background:var(--navy-bg);box-shadow:inset 3px 0 0 var(--bar)}
.nbc .route.on .rl{color:var(--bar)}

/* label / value cells, with or without a control inside */
.nbc .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px}
.nbc .fld{background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r);padding:7px 10px;min-width:0}
.nbc .k{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.nbc .v{font-size:15px}
.nbc .mono,.nbc .v.mono,.nbc .r{font-family:var(--mono);font-variant-numeric:tabular-nums}
.nbc .fld input,.nbc .fld select{width:100%;border:0;background:transparent;font:inherit;color:inherit;padding:1px 0}
.nbc .fld input:focus,.nbc .fld select:focus{outline:2px solid var(--navy);outline-offset:2px}
.nbc .span2{grid-column:span 2}
.nbc .w3{width:3rem}.nbc .w8{width:8rem}.nbc .w9{width:9rem}.nbc .w10{width:10rem}
.nbc .mt{margin-top:12px}.nbc .mr{margin-right:14px}.nbc .inline{display:inline}
.nbc .tt-none{text-transform:none}.nbc .py5{padding:5px 0}.nbc .p14{padding:14px}
.nbc .sep{border-top:1px solid var(--rule);padding-top:12px;margin-top:4px}
.nbc .ok{color:var(--green)}.nbc .bad{color:var(--red)}

/* the searchable select, kept to one readable line (§S59.6 / §S59.7) */
.nbc .ss-wrap{position:relative}
.nbc .ss-input{width:100%;border:1px solid var(--rule)!important;background:var(--surface)!important;border-radius:var(--r);padding:4px 8px!important;font:inherit;height:auto!important}
.nbc .ss-list{max-height:20rem;min-width:22rem;font-size:13.5px;border-radius:var(--r)}
.nbc .ss-opt{padding:.32rem .55rem;white-space:normal}

/* the plan grid — rows of controls, never a table, so dropdowns are not clipped (§S59.7) */
.nbc .prow{display:grid;gap:9px;align-items:end;margin-bottom:9px;
  grid-template-columns:minmax(12rem,2.2fr) minmax(11rem,2fr) minmax(7rem,1.1fr) minmax(9rem,1.6fr) 5.5rem 5.5rem 2.4rem}   /* §S79: + board */
.nbc .prow--paper{grid-template-columns:minmax(12rem,3fr) 7rem minmax(10rem,2fr) 6rem 6rem 2rem}
.nbc .prow--board{grid-template-columns:minmax(12rem,3fr) 6rem 6rem minmax(10rem,1.8fr) 6.5rem 7rem}
@media (max-width:820px){.nbc .prow,.nbc .prow--paper,.nbc .prow--board{grid-template-columns:1fr 1fr}}
.nbc .pf{display:flex;flex-direction:column;gap:3px;min-width:0}
.nbc .pf select,.nbc .pf input{width:100%;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);font:inherit;color:inherit;padding:4px 7px}
.nbc .pf input.r{text-align:right}
.nbc .prow .plan-del{padding:5px 9px;min-height:0}

/* tables on this page carry inputs and nowrap cells */
.nbc .erp-table{min-width:560px;font-size:13.5px}
.nbc .erp-table th,.nbc .erp-table td{white-space:nowrap}
.nbc .erp-table td.r,.nbc .erp-table th.r{text-align:right}
.nbc .erp-table th.r{font-family:var(--mono)}
.nbc .erp-table tfoot td{background:var(--surface-2)}
.nbc td input,.nbc td select{width:100%;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);font:inherit;color:inherit;padding:3px 6px}
.nbc td input.r{text-align:right}
.nbc td input[type=checkbox]{width:auto}
.nbc .erp-tablewrap{border:1px solid var(--rule);border-radius:var(--r)}

/* the cost grid: every figure belongs to the document above it */
.nbc .nbc-costgrid{margin-bottom:0}
.nbc .cost{background:var(--surface);padding:11px 13px}
.nbc .cost .v{font-family:var(--mono);font-size:17px;font-variant-numeric:tabular-nums}
.nbc .cost.lead,.nbc .lead{background:var(--navy-bg)}
.nbc .cost.lead .v{color:var(--bar);font-weight:600}
.nbc .bopt{font-size:13px;color:var(--ink-2)}
.nbc .bopt b{color:var(--ink)}

/* §S62.3 — a cost you can click, and the working it opens */
.nbc .costlink{background:none;border:0;padding:0;font:inherit;color:var(--navy);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.nbc .costlink:hover{text-decoration:underline solid}
.nbc details.working{border:1px solid var(--rule);border-radius:var(--r);background:var(--surface-2);margin-top:9px;padding:0 12px}
.nbc details.working[open]{padding-bottom:11px;background:var(--surface)}
.nbc details.working>summary{cursor:pointer;padding:9px 0;color:var(--navy);list-style:none}
.nbc details.working>summary::-webkit-details-marker{display:none}
.nbc details.working>summary::before{content:"\25B8";display:inline-block;width:1em;color:var(--muted)}
.nbc details.working[open]>summary::before{content:"\25BE"}
.nbc details.working>summary b{color:var(--ink)}
.nbc details.working>summary .say{margin-left:8px;font-size:.78rem}
.nbc details.costedit{border-color:var(--bar)}

/* 19. FROZEN CHROME (owner, 2026-09-13: "this area should be freeze in all working on ERP") — the top
   bar and the strip stay put while the page scrolls, on every screen; the rail too, scrolling on its
   own when it is taller than the window. --erp-tb is the top bar's measured height (chrome_foot.php),
   so the strip parks under it whatever it wraps to. The flyout panels are fixed to the viewport for
   the same reason (a scrolling rail would clip them). */
.erp-app>.erp-topbar{position:sticky;top:0;z-index:41}
.erp-app>.erp-strip{position:sticky;top:var(--erp-tb,0px);z-index:40}
.erp-app>.erp-rail{position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto;overflow-x:hidden}
.erp-rail-fly{position:fixed;left:auto;top:auto}
@media (max-width:900px){
  .erp-app>.erp-rail{position:static;max-height:none;overflow:visible}
  .erp-app>.erp-rail.is-open{position:fixed}
  .erp-rail-fly{position:static}
}
@media print{.erp-app>.erp-topbar,.erp-app>.erp-strip,.erp-app>.erp-rail{position:static}}

/* ==========================================================================
   20. REGISTERS AND LISTS (UI-1c, 2026-09-13) — the sixteen list screens now build on .erp-table /
   .erp-panel / .erp-btn / .erp-badge / .erp-note / .erp-input. What follows is what those screens
   needed beyond the classes above: tabs, the width and size utilities their inline styles became,
   the two per-page stylesheets they used to carry (gate-pass register, notebook order list) on the
   tokens, and the row states. Bootstrap's grid and spacing utilities (row, col-*, d-flex, mb-3 …)
   are still honoured on these pages because they render through views/layout.php.
   ========================================================================== */
/* tabs (sales/_tabs.php and friends) */
.erp-tabs{display:flex;flex-wrap:wrap;gap:4px;list-style:none;margin:0 0 14px;padding:0;border-bottom:1px solid var(--rule)}
.erp-tabs li{margin:0}
.erp-tab{display:inline-block;padding:8px 13px;margin-bottom:-1px;border:1px solid transparent;border-radius:var(--r) var(--r) 0 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.erp-tab:hover{color:var(--ink);background:var(--surface-2)}
.erp-tab.active{color:var(--ink);background:var(--surface);border-color:var(--rule) var(--rule) var(--surface)}
.erp-tab .erp-badge{margin-left:6px}

/* a panel's foot (was card-footer) */
.erp-panel-foot{margin:12px -17px -15px;padding:9px 17px;border-top:1px solid var(--rule);background:var(--surface-2)}
.erp-panel > .p-0{margin:-15px -17px -16px}          /* a table flush inside a panel (was card-body p-0) */
.erp-panel > .p-0 > .erp-tablewrap{border:0}

/* width and size utilities (what the inline styles said) */
.erp-table th{white-space:nowrap}
.erp-table .mw6{min-width:6rem}.erp-table .mw8{min-width:8rem}.erp-table .mw9{min-width:9rem}.erp-table .mw14{min-width:14rem}
.w3{width:3.4rem}.w6{width:6.5rem;max-width:6.5rem}
.erp-small{font-size:11.5px}
.erp-table .erp-small{color:var(--muted)}
.erp-table td .erp-btn{padding:4px 9px;font-size:10.5px;min-height:0}
.erp-table td .erp-input,.erp-table td .erp-select{padding:4px 7px;font-size:12.5px}
.erp-table .erp-badge{white-space:nowrap}
/* row states */
.erp-table tr.erp-row--wait td{background:var(--amber-bg)}
.erp-table tr.erp-row--bad td{background:var(--red-bg)}
.erp-table tr.sub td{background:var(--surface-2);font-size:13px}
.erp-table td.num,.erp-table th.num{white-space:nowrap}
/* owner 2026-09-13: "no need to make column in 2-3 lines" — a register row is ONE line; a table wider
   than the screen scrolls inside its .erp-tablewrap. Cells that may wrap say so with .wrap. */
.erp-table tbody td{white-space:nowrap}
.erp-table tbody td.wrap,.erp-table tbody td .wrap{white-space:normal}
.erp-input--bad{border-color:var(--red);background:var(--red-bg)}

/* the gate-pass register (was its own <style>): long names and vehicles wrap, figures never */
.gp-register{font-size:13.5px}
.gp-register th,.gp-register td{padding:5px 6px}
.gp-register td.gp-mat,.gp-register .gp-mat-line .nm{white-space:normal}
.gp-register td.num,.gp-register .gp-mkinv{white-space:nowrap}
.gp-register .erp-badge{font-size:9.5px}
.gp-mat{min-width:14rem}
.gp-mat-line{display:flex;justify-content:space-between;gap:.5rem;line-height:1.25}
.gp-mat-line .nm{font-size:12px}
.gp-mat-line .qt{font-size:12px;white-space:nowrap;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600}
.gp-mat-tot{margin-top:.15rem;padding-top:.15rem;border-top:1px dotted var(--rule);font-size:11.5px;color:var(--muted);display:flex;justify-content:space-between;gap:.5rem}
.gp-mat-tot b{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
@media (max-width:991px){.gp-register{font-size:12.5px}}

/* the notebook work-order list (was its own <style>): thirteen columns on one screen */
#nbTable{font-size:13px}
#nbTable th,#nbTable td{padding:5px 6px}
#nbTable th{line-height:1.15;vertical-align:bottom;white-space:normal}
#nbTable td.num,#nbTable th.num{white-space:nowrap}
#nbTable .erp-badge{font-size:9.5px;padding:2px 6px}
#nbTable .erp-input,#nbTable .erp-btn{font-size:12px}
@media (max-width:1500px){#nbTable{font-size:12px}}
/* a heading's sub-label ("set it here", "issued") on the dark heading */
.erp-table th .text-body-secondary,.erp-table th .text-body-tertiary,.erp-table th .small,.erp-table th small{color:rgba(255,255,255,.78)!important;font-weight:400}

/* ==========================================================================
   21. HOME GRID FITS ONE SCREEN (owner, 2026-09-13: "only modules open, with fit into one screen";
   owner, 2026-08-25: "all modules have to fit in one window view, no need to scroll down").
   tiles-fit.js sizes #tlGrid to the room left in the window and sets --tls, the scale every size
   inside a tile follows.
   Owner 2026-09-13 (evening, from a screenshot of cut-off blurbs): "icon name should be with the icon,
   and the detail downside of the icon, showing ALL detail". So a tile is a two-row grid — the icon and
   the name share the top row, the blurb spans the row beneath — and the blurb is never clamped or
   dropped. When the fixed-height grid cannot hold a blurb, tiles-fit.js scales the tile down and, as a
   last resort, lets the page scroll: a scroll beats a sentence cut in half. The blurb has a floor size
   (max()) so the scale never makes it unreadable. .tl-wide / .tl-nobl are no longer set. */
#tlGrid{--tls:1;gap:8px;background:transparent;border:0;margin-bottom:0;padding:0}
#tlGrid.erp-grid{grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))}
#tlGrid .erp-tile{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:calc(var(--tls) * 12px);row-gap:calc(var(--tls) * 7px);align-items:center;align-content:safe center;
  border:1px solid var(--rule);border-radius:var(--r);padding:calc(var(--tls) * 14px);
  min-height:0;min-width:0;overflow:hidden}
#tlGrid .erp-tile:hover{border-color:var(--ink-2)}
#tlGrid .erp-tilehead{grid-column:1;grid-row:1;margin:0;gap:0}
#tlGrid .erp-tilehead .erp-label{display:none}
#tlGrid .erp-tile .erp-tileicon{width:calc(var(--tls) * 4rem);height:calc(var(--tls) * 4rem);border-radius:calc(var(--tls) * 13px);font-size:calc(var(--tls) * 2.6rem)}
#tlGrid .erp-tile h3{grid-column:2;grid-row:1;margin:0;padding-right:1rem;font-size:max(14px, calc(var(--tls) * 17px));line-height:1.2}
#tlGrid .erp-tile p{grid-column:1 / -1;grid-row:2;display:block;overflow:visible;font-size:max(11.5px, calc(var(--tls) * 13px));line-height:1.35}
#tlGrid .erp-tile-badge{position:static;grid-column:1 / -1;grid-row:3;justify-self:start;margin-top:calc(var(--tls) * 2px)}
#tlGrid.tl-nobl .erp-tile p{display:none}   /* tiles-fit.js: only when even the smallest readable scale cannot hold the blurbs */
/* Owner 2026-09-13: "side panel grid disappear back — it should show in front". A sticky rail is a
   stacking context of its own, so its flyout (z 70) was being compared INSIDE the rail, and the page's
   frozen table headings (z 3, root context) painted over it. The rail itself now sits above the page. */
.erp-app>.erp-rail{z-index:60}

/* ==========================================================================
   23. ENTRY FORMS (UI-1e, 2026-09-13) — gate pass (inward, every kind, and outward), the gate
   launcher, internal transfer, purchase and sales invoice, payment, receipt, employee payment,
   journal voucher, expense voucher, and the pickers / grids they share. Controls keep their
   Bootstrap class beside the theme's (the form scripts create .form-control cells, add
   .is-invalid, and look for .card), so both skins must agree — these rules make them.
   ========================================================================== */
.w19{max-width:19rem}.w20{max-width:20rem}.w34{max-width:34rem}.mw16{min-width:16rem}.mw12{min-width:12rem}.mw22{min-width:22rem}
.h70{height:70vh}
.erp-pointer{cursor:pointer}
.erp-scroll16{max-height:16rem;overflow-y:auto}
.erp-table .text-end{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px}
.erp-input.form-control,.erp-select.form-select{font-family:var(--mono);font-size:13px;border:1px solid var(--rule);border-radius:var(--r);color:var(--ink)}
.erp-input.form-control:focus,.erp-select.form-select:focus{border-color:var(--navy);box-shadow:none}
.erp-input.form-control.is-invalid{border-color:var(--red);background-color:var(--red-bg)}
.erp-legacy .form-check-input:checked{background-color:var(--bar);border-color:var(--bar)}
.erp-legacy .form-check-input:focus{box-shadow:none;border-color:var(--navy)}
/* a form's line grid: inputs sit flush in the cells */
.erp-table td .erp-input.form-control,.erp-table td .erp-select.form-select{padding:4px 7px;font-size:12.5px;min-height:0}
/* the searchable select inside a themed table (searchable-select.css keyed on .table before) */
.erp-table .ss-list{min-width:22rem}

/* the row you were sent to (was gatepass/form.php's own <style>) */
.gp-flash,.gp-flash>tr>td{background-color:var(--amber-bg)!important;transition:background-color .4s ease}
.gp-flash{outline:2px solid var(--amber);outline-offset:-2px}

/* the gate launcher — big cards for a phone at the gate (was launcher.php's own <style>) */
.gp-launch{transition:transform .12s ease,box-shadow .12s ease;border-radius:var(--r)}
.gp-launch:hover,.gp-launch:focus-visible{transform:translateY(-2px);box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}
.gp-launch:focus-visible{outline:3px solid currentColor;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.gp-launch{transition:none}.gp-launch:hover{transform:none}}

/* an AI-filled field stays marked until a human touches it (H12 §2; was purchases/new.php's own <style>) */
.ai-filled{background:var(--amber-bg)!important;box-shadow:inset 0 0 0 2px var(--amber)}
.ai-touched{background:var(--surface)!important;box-shadow:none}
.ai-tag{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);
  background:var(--amber-bg);border-radius:var(--r);padding:.05rem .3rem;margin-left:.35rem}
.ai-scan-wrap{position:sticky;top:calc(var(--erp-tb,0px) + 1rem)}
.ai-scan-wrap img,.ai-scan-wrap embed{width:100%;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}

/* ==========================================================================
   24. WRITING ON A DARK GROUND IS ALWAYS LIGHT (owner, 2026-09-13, from a screenshot of the
   Stock-by-brand card whose "— reel → printed → hall" sub-label was dark grey on the dark green
   heading: "colour should be clearly visible to the eyes … if there is green, no colour which hides
   in green; if there is black, no writing which hides in black").
   The Bootstrap muted / small / coloured-text classes carry a dark or a coloured ink meant for a
   white page. Inside any of the theme's dark surfaces — card headings, table headings, the top bar,
   the strip, the dialog head, the rail — that ink vanishes. So on those surfaces every such class
   is re-inked to a light tone that reads on green and on black alike. Nothing changes on a white
   ground. Keep this block LAST: it must win over §16's `!important` ink for the same classes. */
body.erp-legacy .card-header .text-body-secondary,
body.erp-legacy .card-header .text-body-tertiary,
body.erp-legacy .card-header .text-muted,
body.erp-legacy .card-header .text-secondary,
body.erp-legacy .card-header .form-text,
body.erp-legacy .card-header .small,
body.erp-legacy .card-header small,
body.erp-legacy .table>thead>tr>th .text-body-secondary,
body.erp-legacy .table>thead>tr>th .text-muted,
body.erp-legacy .table>thead>tr>th .small,
body.erp-legacy .table>thead>tr>th small,
body.erp-legacy .app-main table>thead>tr>th .text-body-secondary,
body.erp-legacy .app-main table>thead>tr>th .text-muted,
body.erp-legacy .app-main table>thead>tr>th .small,
body.erp-legacy .app-main table>thead>tr>th small,
.erp-table th .text-muted,.erp-table th .text-secondary,
.erp-topbar .text-body-secondary,.erp-topbar .text-muted,.erp-topbar .small,.erp-topbar small,
.erp-strip .text-body-secondary,.erp-strip .text-muted,.erp-strip .small,.erp-strip small,
.erp-dialog .hd .text-body-secondary,.erp-dialog .hd .text-muted,.erp-dialog .hd .small,.erp-dialog .hd small,
.erp-rail .text-body-secondary,.erp-rail .text-muted,.erp-rail .small,.erp-rail small{
  color:rgba(255,255,255,.84)!important;font-weight:400}
/* ink that is dark by name */
body.erp-legacy .card-header .text-dark,body.erp-legacy .card-header .text-body,
body.erp-legacy .card-header .text-black,body.erp-legacy .card-header .text-primary,
body.erp-legacy .table>thead>tr>th .text-dark,body.erp-legacy .table>thead>tr>th .text-primary,
.erp-table th .text-dark,.erp-table th .text-primary,.erp-table th .text-body{color:#fff!important}
/* status colours: the same meaning, in tints that stand off green and black */
body.erp-legacy .card-header .text-success,body.erp-legacy .table>thead>tr>th .text-success,.erp-table th .text-success{color:#a7f0c1!important}
body.erp-legacy .card-header .text-danger, body.erp-legacy .table>thead>tr>th .text-danger, .erp-table th .text-danger {color:#ffb4b4!important}
body.erp-legacy .card-header .text-warning,body.erp-legacy .table>thead>tr>th .text-warning,.erp-table th .text-warning{color:#f5cf7a!important}
body.erp-legacy .card-header .text-info,   body.erp-legacy .table>thead>tr>th .text-info,   .erp-table th .text-info   {color:#bfe6ff!important}
/* links and outline buttons that sit on a dark heading */
body.erp-legacy .card-header a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:2px}
/* outline buttons on a dark heading: the transparent ones go white-on-green; the secondary/light
   ones are already a white chip (§16), so they keep the bar's own green as their ink */
body.erp-legacy .card-header .btn-outline-dark,
body.erp-legacy .card-header .btn-outline-primary,body.erp-legacy .card-header .btn-outline-success{
  --bs-btn-color:#fff;--bs-btn-border-color:rgba(255,255,255,.75);
  --bs-btn-hover-bg:#fff;--bs-btn-hover-color:var(--bar);--bs-btn-hover-border-color:#fff;
  --bs-btn-active-bg:#fff;--bs-btn-active-color:var(--bar);color:var(--bs-btn-color)}
body.erp-legacy .card-header .btn-outline-secondary,body.erp-legacy .card-header .btn-light,body.erp-legacy .card-header .btn-secondary{
  --bs-btn-bg:#fff;--bs-btn-color:var(--bar);--bs-btn-border-color:#fff;
  --bs-btn-hover-bg:#e9f3ec;--bs-btn-hover-color:var(--bar);--bs-btn-hover-border-color:#fff;
  --bs-btn-active-bg:#e9f3ec;--bs-btn-active-color:var(--bar);--bs-btn-active-border-color:#fff;color:var(--bs-btn-color)}
/* §16 inks every <a> in a card heading white, and a .btn is an <a>; the button ink above must win */
body.erp-legacy .card-header a.btn:hover{color:var(--bs-btn-hover-color)}
/* badges on a dark heading: light chip, dark writing — never a dark chip that melts into the bar */
body.erp-legacy .card-header .badge{background:rgba(255,255,255,.92)!important;color:var(--bar)!important;border-color:transparent}

/* ==========================================================================
   25. THE "+ NEW …" ENTRY BUTTON (owner, 2026-09-13 evening: "new voucher entry is a very small icon
   and there is plenty of space — all 17 forms' new-entry icons should be big, yellow background,
   black writing"). Every register's entry button carries .erp-new (bin/zz_newbtn_patch.php marked
   30 of them); whichever button family it belongs to, this is what it looks like. */
.erp-new,.erp-btn.erp-new,body.erp-legacy .btn.erp-new{
  display:inline-flex;align-items:center;gap:.4rem;
  background:#f7c531!important;border:2px solid #d9a51a!important;color:#111!important;
  font-weight:800;font-size:15px;letter-spacing:.01em;line-height:1.2;padding:12px 24px;border-radius:12px;text-transform:none;font-family:var(--mono);
  box-shadow:0 2px 0 #b8860b,0 4px 12px rgba(0,0,0,.12);text-decoration:none;
  --bs-btn-bg:#f7c531;--bs-btn-border-color:#d9a51a;--bs-btn-color:#111;
  --bs-btn-hover-bg:#ffd44d;--bs-btn-hover-border-color:#d9a51a;--bs-btn-hover-color:#000;
  --bs-btn-active-bg:#e6b41f;--bs-btn-active-color:#000}
.erp-new:hover,.erp-btn.erp-new:hover,body.erp-legacy .btn.erp-new:hover{background:#ffd44d!important;color:#000!important;transform:translateY(-1px)}
.erp-new:active{transform:translateY(1px);box-shadow:0 0 0 #b8860b,0 2px 6px rgba(0,0,0,.12)}
.erp-new::before{content:"";}
@media (max-width:575.98px){.erp-new{font-size:14px;padding:11px 18px;width:100%;justify-content:center}}

/* ==========================================================================
   26. QUICK-LAUNCH CHIPS ON THE STRIP (owner, 2026-09-13 evening: "these should all be boxes with
   their icon — there is plenty of space to fill — each box with a different background colour").
   Each launch on the strip is a chip: the icon in its own white square, the name beside it, a light
   tint that stands off the dark green strip, and eight tints cycling so neighbours never match.
   The favourites star and the crumb keep their place before them. */
.erp-strip{align-items:center;gap:8px 10px}
.erp-strip .erp-ql{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:10px;
  text-decoration:none;font-weight:700;color:#111;border:1px solid rgba(0,0,0,.18);box-shadow:0 1px 0 rgba(0,0,0,.25);
  line-height:1;white-space:nowrap}
.erp-strip .erp-ql .ic{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:15px;line-height:1}
.erp-strip .erp-ql:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.25);color:#000}
.erp-ql--1{background:#dbeafe}.erp-ql--2{background:#fde68a}.erp-ql--3{background:#bbf7d0}.erp-ql--4{background:#e9d5ff}
.erp-ql--5{background:#fecdd3}.erp-ql--6{background:#bae6fd}.erp-ql--7{background:#fef08a}.erp-ql--8{background:#99f6e4}
@media (max-width:900px){.erp-strip .erp-ql{padding:8px 12px 8px 6px}}

/* ==========================================================================
   27. RAIL MODULES AND THEIR SCREENS AS COLOURED CHIPS (owner, 2026-09-13 evening: "these modules and
   their sub-modules should have the same boxes and colour scheme — each folder a separate colour
   within one module"). The same eight tints as the strip (§26). A module row is a chip in its tint
   with the icon in a white square; every screen in its flyout is a chip in its own tint. The module
   you are INSIDE stays black with the gold edge (§17), and the pointer still turns a chip black. */
.erp-rail nav{padding:6px 8px;display:flex;flex-direction:column;gap:6px}
.erp-rail-mod>summary{border-radius:10px;padding:6px 10px 6px 6px;color:#111;font-weight:700;border:1px solid rgba(0,0,0,.18);
  box-shadow:0 1px 0 rgba(0,0,0,.25);border-left:2px solid rgba(0,0,0,.18)}
.erp-rail-mod>summary .erp-navemoji{width:28px;height:28px;border-radius:7px;background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:16px;line-height:1}
.erp-rail-mod>summary .ar{color:#111;opacity:.6}
.erp-rail-mod.erp-tone--1>summary{background:#dbeafe}.erp-rail-mod.erp-tone--2>summary{background:#fde68a}
.erp-rail-mod.erp-tone--3>summary{background:#bbf7d0}.erp-rail-mod.erp-tone--4>summary{background:#e9d5ff}
.erp-rail-mod.erp-tone--5>summary{background:#fecdd3}.erp-rail-mod.erp-tone--6>summary{background:#bae6fd}
.erp-rail-mod.erp-tone--7>summary{background:#fef08a}.erp-rail-mod.erp-tone--8>summary{background:#99f6e4}
.erp-rail-mod[open]>summary,.erp-rail-mod>summary:hover,.erp-rail-mod>summary:focus-visible{background:var(--on);color:#fff;border-left-color:var(--rail-on)}
.erp-rail-mod[open]>summary .ar,.erp-rail-mod>summary:hover .ar{color:#fff;opacity:.8}
.erp-rail-mod.is-current>summary{background:var(--on);color:#fff;border-color:var(--on);border-left-color:var(--rail-on)}
/* the screens inside a module */
.erp-rail-fly{padding:8px}
.erp-rail-fly>a{margin:3px 0;border-radius:8px;padding:7px 12px 7px 10px;color:#111;font-weight:700;border:1px solid rgba(0,0,0,.15);
  border-left:3px solid rgba(0,0,0,.18);break-inside:avoid}
.erp-rail-fly.two>a{margin:3px 4px}
.erp-rail-fly>a.erp-tone--1{background:#dbeafe}.erp-rail-fly>a.erp-tone--2{background:#fde68a}
.erp-rail-fly>a.erp-tone--3{background:#bbf7d0}.erp-rail-fly>a.erp-tone--4{background:#e9d5ff}
.erp-rail-fly>a.erp-tone--5{background:#fecdd3}.erp-rail-fly>a.erp-tone--6{background:#bae6fd}
.erp-rail-fly>a.erp-tone--7{background:#fef08a}.erp-rail-fly>a.erp-tone--8{background:#99f6e4}
.erp-rail-fly>a:hover,.erp-rail-fly>a:focus-visible,.erp-rail-fly>a[aria-current]{background:var(--on)!important;color:#fff;border-left-color:var(--rail-on)}
.erp-rail-flyhead{margin:0 0 6px}
/* §26.1 the bar's own editor chip — quiet, at the end of the row */
.erp-strip .erp-ql--edit{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35);box-shadow:none;font-weight:600}
.erp-strip .erp-ql--edit .ic{background:rgba(255,255,255,.2)}
.erp-strip .erp-ql--edit:hover{background:rgba(255,255,255,.28);color:#fff}

/* §S98 (owner, 2026-09-14) — "in the outward and inward gate pass registers squeeze the brand and other
   unnecessary column widths AND fit into the screen horizontally". The register no longer scrolls
   sideways on an ordinary screen: headings may wrap, the narrow columns (brand, belongs-to, vehicle,
   prepared by, status, invoice) are capped and wrap, the pass number and the date stay on one line,
   and the materials column keeps a modest floor instead of the old 14rem. */
.gp-register{table-layout:auto;font-size:12.5px}
.gp-register th{white-space:normal;line-height:1.2;padding:5px 5px;letter-spacing:.08em}
.gp-register th,.gp-register td{padding:4px 5px}
.gp-register td{word-break:break-word;overflow-wrap:anywhere}
.gp-register td.font-monospace,.gp-register td.font-monospace a{white-space:nowrap}
.gp-register td.gp-brand{max-width:6.5rem;white-space:normal}
.gp-register td.gp-brand .erp-badge{white-space:normal;font-size:9px;padding:1px 5px;margin-bottom:2px}
.gp-register td.gp-brand form{flex-wrap:wrap}
.gp-register td.gp-brand form .erp-select,.gp-register td.gp-brand form select{max-width:6rem;font-size:11px;padding:2px 4px}
.gp-register td.gp-who{max-width:5.5rem;font-size:11.5px}
.gp-register .gp-mat,.gp-register .mw14{min-width:10rem}
.gp-register .mw6{min-width:0}
.gp-register td .erp-btn.gp-mkinv{padding:3px 6px;font-size:10px}
.gp-register .erp-badge{font-size:9px;padding:1px 5px}
@media (min-width:1200px){.gp-register{font-size:13px}}

/* §S98.1 — brand ticks: a short coloured code (ID · MSHL · APX) instead of a wide badge; never wraps,
   never grows the row. --bt is the brand's colour (Brand::tick). */
.brand-tick{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;line-height:1;
  padding:3px 5px;border-radius:3px;background:var(--bt,#666);color:#fff;white-space:nowrap;margin:0 3px 2px 0;vertical-align:middle}
.brand-tick i{font-style:normal;font-weight:500;opacity:.85}
.brand-tick--none{background:transparent;color:var(--muted);border:1px dashed var(--rule);font-weight:600}
.gp-register td.gp-brand{max-width:none;white-space:nowrap}
.gp-register td.gp-brand .brand-tick{margin-bottom:0}

/* §S98.2 — the brand column shrinks to its ticks; the spare width goes to the materials column, whose
   item names were wrapping onto three lines while the brand column sat half empty. */
.gp-register td.gp-brand,.gp-register th.gp-brand{width:1%;padding-right:8px}
.gp-register td.font-monospace{width:1%}
.gp-register .gp-mat,.gp-register .mw14{min-width:15rem;width:26%}
.gp-register .gp-mat-line .nm{font-size:12px;white-space:normal}

/* §S98.3 (owner) — "there should be a border line between each OGP and IGP": a clear rule under every
   pass on both registers, so a pass with four material lines reads as one block, not a run of lines. */
.gp-register tbody > tr > td{border-bottom:2px solid #8fa39b}
.gp-register tbody > tr:last-child > td{border-bottom-width:2px}

/* §S98.4 — Belongs-to as ticks: JOB (amber) + the party's initials (slate); full name on hover. */
.gp-register td.gp-owner{width:1%;white-space:nowrap}
.brand-tick--job{background:#b8861d}
.brand-tick--who{background:#4a5568;letter-spacing:.02em}

/* §S110 (owner, 2026-09-16) — "the detail grid on the inward gate pass is very small and shows one
   line, you have to scroll — make it a standard size to see and enter the details, on all inward
   pass types." The entry grids (`table.doclines`: reels, reams, board & card, consumables, and the
   purchase/sales line grids that share the class) get full-size boxes and no clipping box around
   them: the wrapper stops scrolling, the panel keeps its bottom margin, and every row shows whole. */
.erp-tablewrap:has(> table.doclines){overflow:visible}
.erp-panel > .p-0:has(> .erp-tablewrap > table.doclines){margin-bottom:0}
.erp-table.doclines td{padding:8px 8px;vertical-align:middle}
.erp-table.doclines th,.erp-table.doclines th.num{font-size:11.5px;padding:9px 8px}
.erp-table.doclines td .erp-input,.erp-table.doclines td .erp-select,
.erp-table.doclines td .erp-input.form-control,.erp-table.doclines td .erp-select.form-select,
.erp-table.doclines td .ss-input{font-size:14px;padding:7px 10px;min-height:38px;line-height:1.3}
.erp-table.doclines td .erp-btn{padding:6px 11px;font-size:12px;min-height:32px}
.erp-table.doclines td.num,.erp-table.doclines td.small{font-size:13px}