/* ============================================================================
kit.css - the UI Template Kit stylesheet
This is DCM Industries ERP's app.css with every colour literal retired into a
var() role. Structurally it is the same file, section for section, so a fix
found in one is portable to the other by hand.
IT DEFINES NO COLOURS. Load a theme ahead of it:
The only literals left in here are #fff and #000, which are not theme colours
but the ends of the range - and the rgba() shadows and scrims, which are
deliberately colourless.
Light mode only, as the source is. The token layer is built dark-ready
(see README) but no dark theme ships.
⚠ HAND-PATCHED SINCE GENERATION — 2026-09-08, 2026-09-09 and 2026-09-10. A regeneration
DISCARDS these unless they are re-applied. Each is marked with
`HAND-PATCH ` at the rule itself.
2026-09-09 — Shree Radhe Creation:
§15g .cell-age / .act-pick — the days-in-stock badge that rides on the
date column, and the row checkbox that feeds a bulk price change.
§15h .sb-totals / .sb-total-row / .sb-cam — the till's totals block,
sticky to the bottom on a phone, and the QR camera preview.
§15i .seg-tabs / .seg-tab — the Sale screen's All / Open / Completed /
Returns strip, scrolling sideways inside itself at 375px.
§15j .os-* / .hb-* / .dash-donut / .dk-* — the dashboard's Old Stock
card, the horizontal category bars and the stock donut.
§15k .bottom-nav / .bnav-item — the phone's primary navigation (D6),
and .table-app.as-cards, which turns a wide grid into one card per
row below 768px using the column labels the server already sends.
§5 .empty-in — the empty / error / loading message inside a grid was
centred across a colspan wider than a phone, so it rendered
OFF-SCREEN. kit.js's three renderTable* helpers now wrap their text
in it. Also a kit.js hand-patch of the same date.
2026-09-10 — Shree Radhe Creation:
§15l .cfg-bands / .cfg-band / .cfg-band-sep / .cfg-bands-lbl — the
Configuration screen's four old-stock band boxes, one stored value
entered as four inputs. The only place in the kit where two inputs
deliberately share a row at 375px.
§15m .modal-warn — one amber strip for a rule a dialog must state before
its primary button is pressed. First use: the return window.
§10 .opt-list-page — the curated list used as a screen rather than
inside a dialog, so it is not capped at 300px.
§15g .cell-money / .cell-money-cr — a right-aligned, tabular money
column, and the "Cr" suffix that carries a negative balance's
meaning without colouring it. Driven off the registry's `money`
type, so every later screen with an amount in it gets this free.
2026-09-08:
§12 .auth-brand-inner / .auth-logo — the sign-in identity block is
CENTRED. It was left-aligned inside a centred box, which read as
off-centre. .auth-points stays left.
§9 .card-header-custom h6 i — the gap that was missing when a card
header carried an icon. Card headers are iconless as a rule; the
reference DASHBOARD is the one documented exception, so this rule
is live and load-bearing again.
§9 .modal-hd-title — accepts an
as well as a , so views and
confirmDialog() emit the same element.
§7 .fl-hint.fl-hint-note — the icon + emphasis hint variant.
§12a .pf-* — the My Profile Account card: avatar, identity, stat pair.
§5 .muted-note — the small grey "(you)" beside a name in a list.
§10 .role-row — the selectable row in Role Management's master-detail
pair, now that choosing a role loads the matrix beside it.
§10 .perm-mod-hd — every matrix row carries its own checkbox on the
left, module rows included, so a whole row is granted in one click.
§2 .user-avatar img — the sidebar pill may carry a photo, not only an
initial.
§17 .kpi-8 — an eighth KPI tone, off the new --series-8 token.
§16 .dc-pct — the per-bar percentage now drops below 992px, not 768px.
§16 .dc-plot.dc-nopct — the same rule measured per COLUMN, for the many-
columns-on-a-wide-screen case no viewport query can see.
§15g .cell-actions — the actions column had NO WIDTH; it is now derived
from --act-n, the button count the markup declares.
§15g .supplier-bar / .tag-* / .fl-switch / .imp-plan — the Supplier master.
At 768 a month of days gives each column 19.7px and a "126%" needs
24: sixteen captions in twenty-six were clipped to a stump.
§16 .dash-chart.dc-thin .dc-lbl — the thinned bar chart's day labels
may overflow their own 9px column, or every two-digit day is cut in
half at 375px beside a blank neighbour.
§0 [hidden] { display: none !important } — the ONE rule that makes
`el.hidden = true` work on an element carrying any author display.
It retires a trap this file had already patched locally six times.
Breakpoints: <576 phone . 576-767 large phone . 768-991 tablet
992-1199 small laptop . >=1200 desktop
========================================================================== */
/* The :root block that lived here is now assets/css/tokens.css.
Every role name it declared survives, so the rules below are unchanged. */
/* ==========================================================================
0. Base
========================================================================== */
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background: var(--page-bg);
color: var(--body);
margin: 0;
overflow-x: hidden; /* the page body never scrolls sideways */
}
/* ⚠ DO NOT PUT `overflow-x: hidden` OR `clip` ON `html`. It was tried on
2026-08-25 to stop a phone panning sideways, and it BROKE VERTICAL SCROLLING
ON EVERY PAGE - measured: a 1520px document in a 667px viewport with
`window.scrollY` stuck at 0 and `scrollingElement.scrollTop` refusing to move.
The mechanism: `body` already carries `overflow-x: hidden`, which is what the
viewport's scrolling is propagated FROM while the root stays fully `visible`.
Give the root an overflow of its own and that propagation stops - the root
becomes the scroll container, and Chrome resolves its `overflow-y: visible`
against the clipped x axis as clipped too. The page then scrolls in neither
direction, on every screen in the app, and nothing looks broken enough to
investigate.
The horizontal pan is dealt with where it actually starts - see
`overscroll-behavior-x` on .table-wrap. */
html { -webkit-text-size-adjust: 100%; }
button, .btn, [onclick] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.min-w-0 { min-width: 0; }
/* HAND-PATCH 2026-09-08 — [hidden] ACTUALLY HIDES, EVERYWHERE.
The browser's own rule for [hidden] is `display: none` in the USER-AGENT
sheet, and ANY author declaration of `display` outranks it. So the instant an
element carries `.d-flex`, `.btn`, `.form-check` or any other Bootstrap class
that sets a display, `el.hidden = true` becomes a no-op — the attribute is
set, the element stays on screen, and nothing anywhere reports a fault.
This file had already paid for that SIX separate times, each patched locally:
.f-count · .opt-ref · .perm-matrix tr · .calc-nav-empty · .calc-tab ·
.calc-panel · .calc-msg · .calc-stack · .rp-fcount · .rp-chips. It was about
to be paid for a seventh, eighth, ninth and tenth — #pmTools (.d-flex),
#uStatusWrap and #rStatusWrap (.form-check), and the profile's Remove button
(.btn) are all toggled with el.hidden and all carry an author display.
One rule ends the whole class of bug. `!important` is what makes it beat an
author display; the local rules above and below are left in place, harmless
and now redundant.
⚠ THE COROLLARY: toggle visibility with `el.hidden`, never with
`el.style.display` — an inline style loses to this rule and the element
stays hidden. modalError() is the one place that uses style.display, and it
never sets the hidden attribute, so the two do not meet. */
[hidden] { display: none !important; }
/* ==========================================================================
1. Sidebar - overlays the page at EVERY width; never reserves space
========================================================================== */
.sidebar {
width: var(--sidebar-w);
height: 100vh;
height: 100dvh; /* accounts for mobile browser chrome */
position: fixed; top: 0; left: 0; z-index: 300;
background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-700) 60%, var(--ink-600) 100%);
display: flex; flex-direction: column;
transform: translateX(-100%); transition: transform .25s ease;
-webkit-overflow-scrolling: touch;
}
.sidebar.open { transform: translateX(0); }
.sidebar-overlay {
display: none; position: fixed; inset: 0; z-index: 299;
background: rgba(0,0,0,.35); cursor: pointer;
}
.sidebar-overlay.show { display: block; }
.sidebar-brand {
display: flex; align-items: center; gap: .6rem;
padding: 1.5rem 1.25rem 1rem;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.logo-box {
width: 40px; height: 40px;
border-radius: 5px; padding: 5px;
background: #fff; object-fit: cover; flex-shrink: 0;
box-shadow: 0 0 24px var(--accent-glow);
}
.brand-name { color: #fff; font-weight: 700; font-size: .9rem; margin: 0; line-height: 1.2; }
.brand-sub { color: rgba(255,255,255,.45); font-size: .72rem; }
.nav-section {
padding: 1rem 0 0; flex: 1; overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.22) transparent;
-webkit-overflow-scrolling: touch;
}
.nav-section:hover { scrollbar-color: rgba(255,255,255,.35) transparent; }
.nav-section::-webkit-scrollbar { width: 5px; }
.nav-section::-webkit-scrollbar-track { background: transparent; }
.nav-section::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }
.nav-section::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); }
.nav-label {
font-size: .65rem; letter-spacing: 1.2px;
color: rgba(255,255,255,.35); font-weight: 600;
padding: .5rem 1.25rem .25rem; text-transform: uppercase;
}
.nav-item {
display: flex; align-items: center; gap: .6rem;
padding: .55rem 1.25rem;
color: rgba(255,255,255,.65); text-decoration: none;
font-size: .875rem; font-weight: 500;
border-left: 3px solid transparent; transition: all .15s;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-item.active { color: #fff; background: rgba(255,255,255,.12); border-left-color: var(--accent-soft); }
.nav-item i { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Collapsible sub-menu */
.nav-group-hd {
display: flex; align-items: center; gap: .6rem;
padding: .55rem 1.25rem;
color: rgba(255,255,255,.65); font-size: .875rem; font-weight: 500;
border-left: 3px solid transparent; cursor: pointer;
transition: all .15s; user-select: none;
}
.nav-group-hd:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-group-hd i:first-child { font-size: 1rem; width: 20px; text-align: center; }
.nav-group-arr { margin-left: auto; font-size: .7rem; transition: transform .2s; opacity: .5; }
.nav-group.open .nav-group-arr { transform: rotate(180deg); opacity: 1; }
.nav-group-body { display: none; background: rgba(0,0,0,.15); }
.nav-group.open .nav-group-body { display: block; }
.nav-child a {
display: flex; align-items: center; gap: .6rem;
padding: .48rem 1.25rem .48rem 2.35rem;
color: rgba(255,255,255,.55); text-decoration: none;
font-size: .82rem; font-weight: 500;
border-left: 3px solid transparent; transition: all .15s;
}
.nav-child a:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-child a.active { color: #fff; background: rgba(255,255,255,.10); border-left-color: var(--accent-soft); }
.nav-child a i { font-size: .9rem; width: 18px; text-align: center; }
.sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); }
.user-pill {
display: flex; align-items: center; gap: .6rem;
padding: .5rem; background: rgba(255,255,255,.06); border-radius: 10px;
}
.user-avatar {
width: 32px; height: 32px;
background: linear-gradient(135deg, var(--accent), var(--purple));
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: .75rem; font-weight: 700; flex-shrink: 0;
}
/* HAND-PATCH 2026-09-08 — the pill's avatar may be a photo, not only an initial.
⚠ overflow: hidden on the tile plus object-fit: cover on the image. Without
the cover a portrait photo letterboxes inside a square and the gradient
shows through two edges of it, which looks like a rendering fault rather
than a photograph. */
.user-avatar { overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-pill .u-name { color: #fff; font-size: .8rem; font-weight: 600; line-height: 1.25; }
.user-pill .u-role { color: rgba(255,255,255,.45); font-size: .7rem; }
.signout-btn {
display: block; width: 100%; margin-top: .5rem; text-align: center;
background: rgba(255,255,255,.1); color: rgba(255,255,255,.8);
border: 1px solid rgba(255,255,255,.15); border-radius: 8px;
font-size: .82rem; font-weight: 600; padding: .28rem .5rem; cursor: pointer;
text-decoration: none;
}
.signout-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
/* ==========================================================================
2. Layout, topbar & page body
========================================================================== */
/* Overlay at EVERY width - the sidebar slides over the page and never reserves
space, so the content width is identical whether the menu is open or shut.
Pinning it on desktop would reflow every table and chart on each toggle. */
.main { margin-left: 0; min-height: 100vh; }
/* The sticky offset for a column that has to sit clear of the sticky topbar -
the calculator rail is the only user (app.css §15d). Measured off the shipped
shell: the topbar is 65px from 1200px up. It is a token rather than a literal
so the two cannot drift apart in different files. */
:root { --calc-rail-top: calc(var(--seed-topbar-h) + 1rem); }
.topbar {
background: #fff; border-bottom: 1px solid var(--card-border);
padding: .75rem 1.5rem;
display: flex; align-items: center; justify-content: space-between; gap: .6rem;
position: sticky; top: 0; z-index: 50;
}
.topbar h5, .page-title {
margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink-900); line-height: 1.25;
}
.page-sub { margin: 0; font-size: .75rem; color: var(--muted); }
.page-body { padding: 1rem; }
/* ⚠ THE MASTER PICKER IS GONE (2026-08-31). `.master-pick`, `.master-pick-btn`,
the `.mo-tick` rules and the whole `.topbar:has(.master-pick)` media block
went with it - the master is chosen from a rail on the screen itself now
(`.mnav-*`, section 15f), because the masters are grouped and a dropdown
cannot show a heading.
⚠ THAT MEDIA BLOCK IS WHY MASTERS WAS THE ONE SCREEN WITH A TWO-ROW TOPBAR ON
A PHONE: it gave the right-hand cluster `width: 100%`, which wrapped the row
whatever the left half was doing. With it gone that bar is one row like every
other screen's. Do not reintroduce a `:has()` topbar rule for a control that
is no longer in the topbar.
Bulk Upload is all that is left up there. It acts on whichever master the rail
has selected, which is exactly why it must not sit inside the control that
selects one. Its label drops below 768px so the icon still fits beside the
page title. */
.master-menu { min-width: 210px; padding: .3rem; }
.master-menu .dropdown-item {
display: flex; align-items: center; gap: .55rem;
border-radius: 8px; font-size: .85rem; padding: .45rem .55rem;
}
.master-menu .dropdown-item i:first-child { font-size: .95rem; color: var(--muted); width: 1.1em; }
.master-menu .mo-label { flex: 1 1 auto; }
.master-bulk-btn { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.master-bulk-btn .mp-caret { font-size: .7rem; opacity: .75; }
.master-bulk-btn[aria-expanded="true"] .mp-caret { transform: rotate(180deg); }
/* ==========================================================================
3. Cards
========================================================================== */
.section-card {
background: var(--card-bg); border-radius: var(--radius);
border: 1px solid var(--card-border); box-shadow: var(--shadow-card);
}
.section-card + .section-card { /* margin-top: 1rem; */ }
.card-header-custom {
padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between;
gap: .6rem; flex-wrap: wrap;
}
.card-header-custom h6 { margin: 0; font-weight: 700; color: var(--ink-900); font-size: .9rem; }
/* HAND-PATCH 2026-09-08 — the gap a card-header icon never had.
⚠ CARD HEADERS ARE ICONLESS AS A RULE (2026-09-08, the user's instruction: a
section glyph has to be invented for every new card, most business sections
have no obvious one, and a wrong-but-present icon is worse than none). The
rule fixes a real defect: `
Change Password
` rendered as
`⚭Change Password`, flush, with no space at all.
⚠ AND IT IS LIVE AGAIN — the reference dashboard is the ONE documented
exception (2026-09-08, the user's call), so seven card headers now depend on
this rule. Do not delete it as dead.
⚠ margin-right, NOT a flex `gap`, and that is deliberate. `.dash-head` makes
the `h6` ITSELF `display: flex`, which blockifies the into a flex item —
a margin still applies there, and it also survives the ordinary non-flex
header. A `gap` would work in one context and not the other. (The opposite
call to T10, where the label can vanish and a margin would be left behind.) */
.card-header-custom h6 i { margin-right: .45rem; color: var(--accent); }
.card-header-custom .head-sub { font-size: .72rem; color: var(--muted); font-weight: 400; }
/* ⚠ THE KPI TILES WERE REMOVED ON 2026-08-30, ON THE USER'S INSTRUCTION.
`.kpi-card` / `-label` / `-value` / `-sub` / `-link` / `.kpi-row-7` are all
gone with them, and nothing outside the dashboard ever used them.
Why, so it is not rebuilt by reflex: three of the seven tiles were figures the
"This Period Vs Previous" table already carried as rows (Efficiency, Entries)
or now does (Working Days, moved there as the first row), and the other four
were the ACTIVE column of Master Data Usage - literally the same
`COUNT(*) WHERE status='active'` query, printed twice on one screen.
⚠ DO NOT WRITE MARKUP AGAINST THEM. If a headline strip is ever wanted again,
the thing to check first is whether the figure is already a row somewhere on
this screen - that is what made these duplicates rather than a summary. */
/* ==========================================================================
4. Buttons & badges
IMS applied these inline on every page; same values, named once.
========================================================================== */
.btn-soft { /* topbar / secondary primary action */
background: var(--accent-tint); color: var(--violet-ink); border: none;
font-weight: 600; border-radius: var(--radius-field);
}
.btn-soft:hover, .btn-soft:focus { background: var(--purple-200); color: var(--violet-ink); }
.btn-save { /* dialog confirm */
background: var(--violet-ink); color: #fff; border: none;
border-radius: 8px; padding: .35rem 1.2rem; font-weight: 600;
}
.btn-save:hover, .btn-save:focus { background: var(--purple-900); color: #fff; }
.btn-del {
background: var(--danger); color: #fff; border: none; border-radius: 8px;
padding: .375rem .75rem; font-size: .875rem; cursor: pointer;
display: inline-flex; align-items: center; gap: .3rem;
}
.btn-del:hover { background: var(--danger-ink); color: #fff; }
/* ⚠ EVERY EXPORT / DOWNLOAD CONTROL IN THE APP, AND THE ONLY GREEN BUTTON.
One look, one icon, one word: `bi-download` + the label `Export`, never a
format name. "Export Excel" named the library that wrote the file, which is
the one thing nobody opening it needs to know, and it made Export the widest
control in a card header on a phone.
⚠ THE WASH, NOT A SOLID FILL. Solid --ok (var(--ok)) under white text measures
3.30:1 and fails AA at this size; --ok-bg under --ok-ink measures 4.57:1 and
passes, and the hover pair 7.52:1. It is also the shape .btn-soft already
uses - a tint behind its own dark ink - so Export reads as a sibling of Add
rather than as a foreign control. This green is the app's only one, already
shipping as .st-active and .act-ok.
⚠ INLINE-FLEX + gap, AND THE ICON CARRIES NO me-1. Below 576 the label span
is display:none, and a gap collapses with it where a margin does not - with
me-1 the glyph sat 4px left of its own centre on every phone.
⚠ THE LABEL IS HIDDEN BELOW 576, SO title + aria-label ARE MANDATORY. The
icon is then the whole affordance and nothing else announces the button -
the rule .action-btn carries directly below, which export buttons never got.
⚠ NO `display` IS SET ON A NARROWER SELECTOR. masters.js hides and shows its
button with an inline style.display, and an inline none must keep beating
this rule; clearing it back to '' is what falls through to inline-flex. */
.btn-export {
background: var(--ok-bg); color: var(--ok-ink); border: none;
font-weight: 600; border-radius: var(--radius-field);
display: inline-flex; align-items: center; gap: .35rem;
}
.btn-export:hover, .btn-export:focus { background: var(--ok-200); color: var(--ok-900); }
/* Icon-only, fixed square. Row actions carry no label: one icon + one tint per
action, identical on every screen, so the Actions column stays narrow and the
row height is set by the text, not by the buttons. Every one must still carry
title + aria-label - the icon is the whole affordance. */
.action-btn {
width: 28px; height: 28px; padding: 0; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border: none; border-radius: 8px;
font-size: .8rem; cursor: pointer; line-height: 1;
}
.action-btn:disabled { opacity: .45; cursor: not-allowed; }
.act-edit { background: var(--info-bg); color: var(--info-700); }
.act-edit:hover { background: var(--info-200); }
.act-del { background: var(--danger-bg); color: var(--danger); }
.act-del:hover { background: var(--danger-100); }
/* Print opens a controlled document, not an edit - grey rather than a colour, so
the two coloured buttons beside it stay the ones that change something. */
.act-print { background: var(--n-100); color: var(--n-600); }
.act-print:hover { background: var(--n-250); }
.act-perm { background: var(--info-bg); color: var(--info-ink); }
.act-perm:hover { background: var(--info-200); }
.act-ok { background: var(--ok-bg); color: var(--ok-ink); }
.act-warn { background: var(--warn-bg); color: var(--warn-ink); }
.status-badge {
border-radius: 20px; padding: 2px 10px;
font-size: .72rem; font-weight: 600; display: inline-block; white-space: nowrap;
}
/* IMS lifecycle set - kept for the stock report and future operational screens */
.st-store { background: var(--accent-tint); color: var(--violet-ink); }
.st-floor { background: var(--info-bg); color: var(--info-ink); }
.st-issued { background: var(--ok-bg); color: var(--ok-ink); }
.st-scrapped { background: var(--purple-50); color: var(--purple-700); }
.st-direct-scrap { background: var(--amber-100); color: var(--amber-700); }
.st-lost { background: var(--danger-bg); color: var(--danger-ink); }
.st-direct-lost { background: var(--series-pink-bg); color: var(--series-pink-ink); }
.st-broken { background: var(--warn-bg); color: var(--warn-ink); }
/* Account/role set - the ERP admin screens */
.st-active { background: var(--ok-bg); color: var(--ok-ink); }
.st-inactive { background: var(--n-100); color: var(--muted); }
.st-role { background: var(--accent-tint); color: var(--violet-ink); }
.st-info { background: var(--info-bg); color: var(--info-ink); }
.st-warn { background: var(--warn-bg); color: var(--warn-ink); }
.st-danger { background: var(--danger-bg); color: var(--danger-ink); }
/* HAND-PATCH 2026-09-08 — the "(you)" beside your own name in a list.
⚠ NOT a .status-badge, deliberately. Beside a role badge a second pill reads
as a second STATUS — something about the account — when all it says is
which row is yours. Plain small grey text says that and nothing more. */
.muted-note { font-size: .72rem; color: var(--faint); font-weight: 400; }
.perm-key {
font-family: Consolas, 'Courier New', monospace; font-size: .7rem;
background: var(--n-100); border: 1px solid var(--card-border);
color: var(--n-600); border-radius: 6px; padding: 1px 6px; white-space: nowrap;
}
.avatar-sm {
width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
font-size: .72rem; font-weight: 700; color: #fff;
}
.group-label {
font-size: .68rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .8px;
margin-bottom: .4rem; display: flex; align-items: center; gap: .3rem;
}
/* ==========================================================================
5. Tables - IMS look; cards below 768 so nothing scrolls sideways
========================================================================== */
.table-app { font-size: .83rem; margin-bottom: 0; width: 100%; }
.table-app thead th {
background: var(--n-50); color: var(--muted); font-weight: 600; font-size: .78rem;
border-bottom: 1px solid var(--card-border); white-space: nowrap;
padding: .75rem 1rem;
}
/* Sortable header. The icon is always present, so the row never reflows on
click and a sortable column is discoverable before you hover it. */
.table-app thead th.th-sort { cursor: pointer; user-select: none; }
.table-app thead th.th-sort:hover { background: var(--n-150); color: var(--body); } /* was var(--text) - undefined in app.css */
/* --accent, not --primary: there has never been a --primary in :root, so both
of these rules resolved to nothing and a sorted column looked exactly like an
unsorted one apart from its arrow. Found 2026-08-04 building the Production
grid, which sorts on every column. */
.table-app thead th.th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.table-app thead th.th-sort i { opacity: .35; font-size: .7rem; }
.table-app thead th.th-sort:hover i { opacity: .7; }
.table-app thead th.th-sort-on { color: var(--accent); }
.table-app thead th.th-sort-on i { opacity: 1; }
.table-app tbody td { vertical-align: middle; padding: .3rem 1rem; border-bottom: 1px solid var(--line); }
.table-app tbody tr:last-child td { border-bottom: none; }
.table-app tbody tr:hover { background: var(--n-25); }
/* The grid is the one place in this app where a horizontal scrollbar is normal
rather than a fault, so it is made to look deliberate instead of borrowed:
thin, tinted to the field border, and matching the sidebar's treatment. */
.table-wrap {
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: thin; scrollbar-color: var(--field-border) transparent;
/* ⚠ THE GESTURE STOPS AT THE TABLE - it does not chain on to the page
(2026-08-25, the user's report: "header is able to scroll slightly
horizontal where as it must be fix only table should scroll").
Without this, a sideways swipe that reaches the end of the table carries on
into the viewport, and on a touch device the whole page pans a little way -
taking the sticky topbar and the filter bar with it, which is exactly what
the user photographed. It is a SCROLL-CHAINING effect, not an overflowing
element: nothing on the page is too wide (measured, docScrollWidth === 375
at 375), which is why it never showed on a desktop where the wheel does not
chain.
⚠ `-x` ONLY, AND `contain` RATHER THAN `none`. Vertical chaining is what
lets a swipe that starts over the grid go on to scroll the PAGE, which is
the ordinary way anybody reads a long report on a phone - taking that away
would trap the finger inside the table. `contain` stops the chain without
disabling the grid's own overscroll effects.
⚠ AND NOT `overflow-x: hidden/clip` ON `html`, which was the first attempt.
See the note beside the `html` rule at the top of this file: it stops the
pan and breaks vertical scrolling on every page in the app. */
overscroll-behavior-x: contain;
}
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--field-border); border-radius: 4px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--faint); }
.row-count { font-size: .78rem; color: var(--muted); }
/* HAND-PATCH 2026-09-09 — LEFT, not centre, and the message sticks.
⚠ IT WAS CENTRED, AND THAT PUT IT OFF-SCREEN. The cell spans every column,
so on a 10-column grid it is ~890px wide while a phone is 375. Centring
placed "No customers yet" at x≈445 — inside .table-wrap's horizontal
scroll but outside its visible area — so the screen showed an empty white
box and a pager reading "Showing 0-0 Of 0", with the one sentence that
explains it hidden until you scrolled sideways.
⚠ STICKY ALONE DOES NOT FIX IT, which is the trap worth remembering:
position:sticky stops an element scrolling OUT to the left, it never pulls
one back from the right. Measured after trying it — the span stayed at
x=402. Left-aligning is what puts it at x=0; the sticky then KEEPS it there
once the grid is scrolled sideways.
⚠ Centring is given up deliberately. A message aligned with the first
column reads perfectly well on a wide screen, and being visible on a narrow
one is not a trade. */
.empty-row {
text-align: left; color: var(--muted);
padding: 2rem 1rem !important; font-size: .83rem;
}
.empty-in { position: sticky; left: 1rem; display: inline-block; max-width: 100%; }
/* Row actions. A hook on five screens since 2026-07-30 with no rule behind it -
the buttons only ever sat on one line because the cell happened to be wide
enough. Below, .table-pin makes that cell the fixed anchor the whole grid
scrolls under, and a fixed anchor that can reflow is not fixed. */
/* The width now comes from the count of buttons — see §15g. */
/* ── Grid modifiers - both opt-in ─────────────────────────────────────────────
.table-nowrap every cell on one line at EVERY width, not just below 768.
A wrapped cell makes its row two or three lines tall while its
neighbours stay one, and the eye loses the row it was reading;
the table grows past the card instead and .table-wrap scrolls
it. Opt-in, because a column of prose - the Activity Log's
Description - would push the table several screens wide and
turn its own scrollbar into a thing nobody can aim.
.table-pin from 768px up, holds the LAST cell of every row (the Actions
cell) against the right edge of .table-wrap while the data
scrolls underneath it. Ten columns of real machine and part
names do not fit a laptop, and Edit and Delete are what the
register is opened to reach - scrolling right to find them,
then left to read which row you are on, is the failure this
prevents.
BELOW 768 the pin is switched off and the whole table moves as
one piece, on the user's instruction (2026-08-05). It is the
right call: 125px of pinned column out of a 375px screen leaves
the data 250px, and a machine name needs more than that on its
own. A phone scrolls the table; a desktop scrolls the data.
Both are set on the
, so a screen opts in by class and the engine
behind it never has to know. */
.table-nowrap thead th,
.table-nowrap tbody td { white-space: nowrap; }
@media (min-width: 768px) {
/* .cell-actions, never :last-child. The empty state is one td with a colspan
and it IS the last child - pinning it right would park "No production
entries match these filters" against the edge of a table it is supposed to
be centred across. */
.table-pin .cell-actions {
position: sticky; right: 0; z-index: 2;
background: var(--card-bg);
}
.table-pin thead .cell-actions { background: var(--n-50); }
/* The row highlight has to reach the pinned cell too: the cell paints its own
opaque background over tr:hover, and a row that lights up everywhere except
the column your cursor is heading for looks broken. */
.table-pin tbody tr:hover .cell-actions { background: var(--n-25); }
/* Hairline first, so the column reads as a column even on a table that fits
and never scrolls. */
.table-pin .cell-actions::before {
content: ''; position: absolute; top: 0; bottom: 0; left: 0;
width: 1px; background: var(--card-border);
}
/* The shadow is the only part JS owns: CSS cannot know whether anything is
currently hidden underneath. .is-pinned is set by syncPin() in app.js while
there is more table to the left of the pin, and removed at the far right, so
the depth appears exactly when there is depth. */
.table-wrap.is-pinned .table-pin .cell-actions {
box-shadow: -9px 0 12px -8px var(--shadow-ink);
}
}
/* Every table stays a TABLE at every width and scrolls sideways inside
.table-wrap. The phone card layout (each row a stacked label/value list) was
removed on 2026-08-02 at the user's instruction: a record is far easier to
read as one line you scan across than as a tall list you scroll down, and the
two layouts meant every screen had to be checked twice.
Cells must NOT wrap - a wrapped cell makes the row two or three lines tall and
the grid stops reading as a grid.
The PAGE still never scrolls sideways (R9): the overflow belongs to
.table-wrap, which is the only element allowed to scroll horizontally. */
@media (max-width: 767px) {
.table-app { font-size: .78rem; }
.table-app tbody td,
.table-app thead th { white-space: nowrap; }
.table-app tbody td { padding: .45rem .6rem; }
.table-app thead th { padding: .55rem .6rem; }
}
/* ==========================================================================
6. Filter bar & pagination
========================================================================== */
.filter-bar { padding: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filter-bar .form-control, .filter-bar .form-select { font-size: .82rem; }
/* Opt-in modifier: below 576 every control in the bar takes a full row.
Two 170px selects DO fit side by side on a 375px screen, but only by leaving
each too narrow to read "Notification Settings" in - and a filter whose
options you cannot read is not a filter. The date trigger stretches with them
so the bar reads as a stack rather than one wide control and two ragged ones.
A modifier rather than a rule on .filter-bar itself: the masters and users
bars mix fields with buttons, and a full-width button is not an improvement.
Applied on the Activity Log, whose bar is three fields and nothing else. */
@media (max-width: 575px) {
.filter-stack > * { flex: 1 1 100%; max-width: 100% !important; }
.filter-stack .dr-wrap { display: block; }
.filter-stack .dr-trigger { width: 100%; justify-content: space-between; }
/* Not part of .filter-stack: any bar holding a date trigger wants this,
including the ones that mix fields with buttons and so must not stack
wholesale. The rule above stays for .filter-stack's own use; this one
applies to every bar and is harmless where both match. */
.filter-bar .dr-wrap { flex: 1 1 100%; }
.filter-bar .dr-trigger { width: 100%; justify-content: space-between; }
}
/* ── Filter side panel ────────────────────────────────────────────────────────
A screen with eight filters cannot put all eight in the bar: the bar wraps to
three rows and the four that matter stop being findable. The ones used on
every visit stay on screen; the rest live here, one click away, behind a
trigger that CARRIES A COUNT - a filter you cannot see is a filter that makes
the grid look empty for no reason.
Bootstrap's offcanvas, which is already in the vendored bundle, plus the
.modal-hd / .modal-footer this app already uses - both of which are
standalone and do not require a .modal-content around them. Building a
drawer from scratch would have been a third dialog idiom to maintain.
Nothing inside commits until Apply, same as the date range picker. */
.filter-panel { width: 340px; }
.filter-panel-body {
display: flex; flex-direction: column; gap: 1rem;
padding: 1.15rem; background: #fff;
}
/* .fl-field carries a bottom margin for form rows; in a flex column with its own
gap that reads as uneven spacing. */
.filter-panel-body .fl-field { margin-bottom: 0; }
.filter-panel-note {
margin: 0; font-size: .74rem; color: var(--faint); line-height: 1.5;
padding-top: .35rem; border-top: 1px dashed var(--line);
}
/* Reset sits hard left, Apply hard right: they are opposite intentions and
should not read as a pair of adjacent buttons you might hit either of. */
.filter-panel-ft { flex-shrink: 0; }
/* [hidden] MUST come with the display rule. The browser hides [hidden] with
`display:none` from its own stylesheet, and ANY author `display` beats it -
so without this line the badge would sit there reading "0" forever. */
.f-count[hidden] { display: none; }
.f-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 17px; height: 17px; margin-left: .4rem; padding: 0 .3rem;
border-radius: 9px; background: var(--accent); color: #fff;
font-size: .66rem; font-weight: 700; line-height: 1;
}
.btn-soft .f-count { background: var(--violet-ink); }
@media (max-width: 575px) {
/* Full width on a phone: 340px of a 375px screen leaves a 35px strip of page
behind it, which looks like a rendering fault rather than a backdrop. */
.filter-panel { width: 100%; }
}
.pager {
display: flex; align-items: center; justify-content: space-between;
gap: .6rem; flex-wrap: wrap; padding: .75rem 1rem; border-top: 1px solid var(--line);
}
.pager-btns { display: flex; gap: .25rem; flex-wrap: wrap; }
.page-btn {
border: 1px solid var(--card-border); background: #fff; border-radius: 7px;
padding: 3px 10px; font-size: .78rem; cursor: pointer; color: var(--n-600);
}
.page-btn:hover:not(:disabled) { background: var(--accent-wash); border-color: var(--accent-soft); color: var(--accent); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.page-btn:disabled { opacity: .4; cursor: default; }
.page-size { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); }
.page-size select { width: auto; padding: .15rem 1.6rem .15rem .5rem; font-size: .78rem; }
/* ==========================================================================
7. (was: Tabs - master data)
Removed 2026-08-02 with the tab bar. `.tab-bar`, `.tab-btn` and `.tab-panel`
had no remaining markup anywhere. The master selector became a topbar dropdown
then, and on 2026-08-31 it became the left rail in section 15f - so the tab
bar this section is a tombstone for has now been replaced twice. See
docs/DESIGN_SYSTEM.md.
========================================================================== */
/* ==========================================================================
8. Forms - stock Bootstrap, lightly tuned
========================================================================== */
.form-label.small { font-size: .8rem; margin-bottom: .25rem; color: var(--n-700); }
.form-control:focus, .form-select:focus {
border-color: var(--accent-soft);
box-shadow: 0 0 0 .2rem var(--accent-ring-soft);
}
.is-invalid, .form-control.is-invalid, .form-select.is-invalid {
border-color: var(--danger) !important;
box-shadow: 0 0 0 .2rem var(--danger-ring) !important;
}
/* ── Floating-label field - THE standard text input ───────────────────────────
Empty + unfocused: the label sits inside the box like a placeholder.
Focused: the border turns accent and the label rises onto it.
Filled: the label stays up, muted.
The label carries a white background and side padding so it notches the
border cleanly rather than overlapping it.
Markup:
<- placeholder=" " is required
Textareas add .fl-textarea so the label sits at the top, not centred. */
.fl-field {
position: relative; background: #fff;
border: 1.5px solid var(--field-border); border-radius: var(--radius-field);
transition: border-color .15s;
}
.fl-field input, .fl-field textarea, .fl-field select {
display: block; width: 100%; border: none; outline: none; background: transparent;
padding: 6px 10px; font-size: .9rem; color: var(--body); line-height: 1.4;
border-radius: var(--radius-field);
}
.fl-field textarea { resize: none; padding-top: 6px; }
.fl-field select { appearance: none; cursor: pointer; padding-right: 34px; }
.fl-field.fl-select::after {
content: ''; position: absolute; right: 14px; top: 50%; pointer-events: none;
width: 7px; height: 7px; margin-top: -5px;
border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
transform: rotate(45deg);
}
.fl-field label {
position: absolute; left: 12px; top: 47%; transform: translateY(-50%);
font-size: .9rem; color: var(--faint); pointer-events: none;
transition: all .15s ease; background: #fff; padding: 0 4px; line-height: 1.2;
white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
}
.fl-field label .req { color: var(--danger); }
.fl-field.fl-textarea label { top: 17px; transform: none; }
.fl-field:focus-within { border-color: var(--accent); }
.fl-field:focus-within label,
.fl-field.has-value:not(:focus-within) label,
.fl-field.fl-select label { /* a select always shows a value */
top: 0; transform: translateY(-50%);
font-size: .72rem; font-weight: 600;
}
.fl-field:focus-within label { color: var(--accent); }
.fl-field.has-value:not(:focus-within) label,
.fl-field.fl-select:not(:focus-within) label { color: var(--muted); }
/* .fl-date - a native date input paints "dd-mm-yyyy" whether it holds a value
or not, so the label can never sit down over it without landing on top of the
format hint. Exactly the problem a select has, and the same fix. */
.fl-field.fl-date label {
top: 0; transform: translateY(-50%);
font-size: .72rem; font-weight: 600;
}
.fl-field.fl-date:not(:focus-within) label { color: var(--muted); }
.fl-field.fl-date input { cursor: pointer; }
/* .fl-ro - filled in by something other than this field. Read-only and NOT
disabled: a disabled input is skipped by tab and by the screen reader, and
this is a value the operator is meant to read. The label carries its own white
background to notch the border, so it has to be re-tinted or it sits in a
white slot cut out of a grey field. */
.fl-field.fl-ro { background: var(--n-50); border-color: var(--card-border); }
.fl-field.fl-ro label { background: var(--n-50); }
.fl-field.fl-ro input { color: var(--muted); cursor: not-allowed; }
/* .fl-suffix - the unit, inside the field. Set beside the input instead, it
wraps under it at 375px and reads as a caption for the NEXT field. */
.fl-field .fl-suffix {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
font-size: .72rem; color: var(--faint);
pointer-events: none; white-space: nowrap;
}
.fl-field:has(.fl-suffix) input { padding-right: 68px; }
/* The number spinner would sit underneath the unit. Nothing on this form is
stepped one at a time anyway - a cycle time is read off a gauge and typed. */
.fl-field:has(.fl-suffix) input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.fl-field:has(.fl-suffix) input[type=number]::-webkit-outer-spin-button,
.fl-field:has(.fl-suffix) input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Padding for a card that is a form rather than a grid. .card-header-custom
sets the header's; this sets the body's, and matches it. */
.form-pad { padding: 1.25rem; }
@media (max-width: 575px) { .form-pad { padding: .9rem; } }
.fl-field.fl-invalid { border-color: var(--danger) !important; border-width: 2px !important; }
.fl-field.fl-invalid label { color: var(--danger) !important; }
.fl-hint { font-size: .7rem; color: var(--faint); margin-top: .25rem; }
/* HAND-PATCH 2026-09-08 — a hint that WARNS rather than merely explains.
An ⓘ icon in the accent, and inside it is allowed to carry weight.
⚠ SPEC'D ONCE, ON PURPOSE. The first use was the Add Role dialog's "a new
role starts with zero permissions" warning; without a named variant the
next screen needing an emphasised hint invents a second one, and then there
are two field-hint styles nobody chose between.
⚠ `align-items: flex-start` and the icon's own line-height: a two-line hint
must not centre its icon against the block — it belongs beside the FIRST
line, where the reading starts. */
.fl-hint-note { display: flex; align-items: flex-start; gap: .35rem; }
.fl-hint-note > i { color: var(--accent); flex: 0 0 auto; line-height: 1.45; }
.fl-hint-note strong { color: var(--muted); font-weight: 700; }
/* A boolean field. Boxed to the same height as a text field so a row mixing the
two does not look ragged. */
.sw-field {
display: flex; align-items: center; min-height: 44px;
padding: .35rem .75rem;
border: 1px solid var(--field-border); border-radius: var(--radius-field);
background: #fff;
}
.sw-field .form-check { padding-left: 2.4em; }
.sw-field .form-check-input { margin-left: -2.4em; cursor: pointer; }
.sw-field .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.sw-field .form-check-label { font-size: .85rem; color: var(--body); cursor: pointer; user-select: none; }
/* Multi-select: a filterable checkbox list. A native