/* Kamatto Hub — app stylesheet.
Extracted from index.html. Block order below is the original cascade order;
moving a block can change which rule wins, so keep them in sequence. */
/* ================= faces =================
Self-hosted from app/static/fonts/, not linked from a font CDN: the CSP in
app/security.py names no external host, so a Google Fonts link is blocked and
falls back to the system stack without telling anybody. See the README in
that folder for licences and for what each face is for.
font-display: swap. The alternative on a slow tablet connection is a screen
of invisible text over data that has already arrived. */
@font-face {
font-family: "Bebas Neue"; font-style: normal; font-weight: 400;
font-display: swap; src: url("/static/fonts/bebas-neue-400.woff2") format("woff2");
}
@font-face {
font-family: "Public Sans"; font-style: normal; font-weight: 400;
font-display: swap; src: url("/static/fonts/public-sans-400.woff2") format("woff2");
}
@font-face {
font-family: "Public Sans"; font-style: normal; font-weight: 600;
font-display: swap; src: url("/static/fonts/public-sans-600.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono"; font-style: normal; font-weight: 400;
font-display: swap; src: url("/static/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
font-family: "JetBrains Mono"; font-style: normal; font-weight: 500;
font-display: swap; src: url("/static/fonts/jetbrains-mono-500.woff2") format("woff2");
}
/* ================= base: variables, layout, sidebar, nav, tables, badges, panels ================= */
:root {
/* ---- Kamatto red -------------------------------------------------------
The brand colour, and the ONE colour that means "this is an action or the
thing you are on". Filled buttons, the active nav marker, focus rings,
the primary chart series. Nothing decorative is red, because red at
volume is what makes a real alert invisible: a console where forty icons
are red has no way left to say "this shipment failed".
--accent is kept as the name every existing rule already calls, so the
whole app repoints by changing these five lines and nothing else. */
--brand: #c8102e; --brand-hover: #a80d26; --brand-press: #8c0b20;
--accent: var(--brand);
/* The tint behind a selected row, an active nav item, an autocomplete
hover. NEUTRAL on purpose, not pink: these surfaces appear dozens of
times per screen and a tinted-red ground on each one turns the whole app
into a warning. The red comes back as the TEXT on top of it.
Now a warmer tint than it was, because the ground it sits on is bone
paper rather than cool grey. A cool selection tint on a warm ground reads
as a rendering artefact rather than a state. */
--accent-soft: #e9e6e0;
/* The launcher chip. Brand red, and the ONE place the tinted-red
ground the note above rules out is right: a 38px chip once per
tile, on a screen that is nothing but tiles, is a brand mark
rather than a warning repeated dozens of times per row. */
--brand-soft: #fbe7ea;
/* ---- neutrals: INSTRUMENT ----------------------------------------------
The palette of a car's instrument binnacle, which is a language Kamatto
already sells into rather than one borrowed from another industry: bone
paper, a black binnacle for the figures, one red needle, and gauge grey
for the ticks and labels.
Light ground, not dark. A cockpit look tempts you into dark mode, and
these screens are read on tablets on a warehouse floor in daylight all
shift. The dark is spent where it earns its keep instead: the panels that
hold the figures.
One warm family throughout. The greys are warm-neutral to sit with the
bone, not the cool slate they were: mixing a warm ground with cool greys
is the single most common way a palette comes apart. */
--bg: #f2f0ec; /* bone paper, the page ground */
--panel: #fbfaf8; /* the working surface, a shade off white */
--binnacle: #0e1116; /* the figure panels, and the rail */
--binnacle-2: #191d24; /* a raised surface inside a dark panel */
--gauge: #8a8f98; /* ticks, labels, everything secondary on dark */
/* A translucent line rather than a flat grey. The technique is off
brex.com, where every border on the page is one low-alpha value: a
translucent line picks up whatever ground is behind it, so a single token
reads correctly on paper, on the white working surface and on a tinted
status row. A flat hex cannot -- on the ground it goes nearly invisible,
and on a green status row it turns muddy.
The HUE is not theirs. Theirs is a cool slate, which was right for a
white page and is wrong on bone: it reads blue against the warm ground.
This is the binnacle black at low alpha, which stays neutral on every
surface in the palette because it is the same ink the type is.
Alpha rather than a solid mix so the two weights stay in proportion: the
strong one is the same colour at twice the opacity, which is what keeps
an input's edge and a card's edge recognisably related. */
--border: rgba(14,17,22,.13); --border-strong: rgba(14,17,22,.26);
/* Ink, and two steps down. Warm-shifted from the old graphite so it belongs
to the bone rather than sitting on it. */
--text: #14171c; --text-2: #43474e; --muted: #666a71;
/* ---- semantic ----------------------------------------------------------
Read with the rule above: since brand red owns the filled buttons,
critical states are never a red fill. They are dark red text on a tinted
ground, and they always carry a word or an icon as well ("Failed",
"Low"), so they survive both a red-heavy screen and colour blindness.
--danger is browner and two stops darker than --brand for that reason;
--red stays as the name ~15 rules already use. */
--green: #0e7a4f; --green-soft: #e6f4ec;
--amber: #96590b; --amber-soft: #fdf3e3;
--danger: #8e1b12; --danger-soft: #fbeae7; --danger-line: #e7c3be;
--red: var(--danger);
/* Alias, for the same reason --red is one: the Driver app was written
against --red-soft before it shared this stylesheet. Two names for one
value beats one name and a hardcoded hex in the other file. */
--red-soft: var(--danger-soft);
--info: #1f4e8c; --info-soft: #eaeff7;
/* ---- channel identity --------------------------------------------------
Data colours, never UI colours. Each one is the marketplace's own, which
is the point: a Shopee row is recognised before it is read. This is also
why the UI accent is not orange. Shopee's orange would stop meaning
Shopee the moment a button was the same colour. */
--shopee: #ee4d2d; --shopee_sg: #f97316; --lazada: #6b21a8; --tiktok: #111827;
--shopify: #5a8f2f; --kamatto_pos: #0d9488;
/* Three of the five fail WCAG AA as TEXT: measured on the review harness,
Shopee is 3.66:1, Shopify 3.89:1 and POS 3.74:1 at the 13px the .pf
column uses, where AA wants 4.5:1.
Darkened to pass on BOTH grounds in this palette, and no further, so a
Shopee row still reads as Shopee. Both grounds is the part worth writing
down: bone paper is darker than white, and the first set of values here
was tuned against white alone and came back under on the paper.
The undarkened values above stay in use for dots, chips and fills, where
the colour is decoration beside a label rather than the label itself. */
--shopee-ink: #c93414; --shopify-ink: #4a7727; --kamatto_pos-ink: #09766d;
/* ---- type -------------------------------------------------------------
Three faces, three jobs, all self-hosted from app/static/fonts/ with the
licences recorded in the README there. Not loaded from a font CDN: the
CSP in app/security.py names no external host, so a Google Fonts link is
blocked and the page falls back to the system stack without saying so.
The system names stay behind each one. A face that has not arrived yet,
or a browser that refuses the woff2, should land on the closest thing the
machine has rather than on Times New Roman. */
--font-sans: "Public Sans", "Segoe UI Variable Text", "Segoe UI",
system-ui, -apple-system, BlinkMacSystemFont, Roboto,
"Helvetica Neue", Arial, sans-serif;
/* Every figure, code and identifier in the app. Not a stylistic choice: a
monospace lines a column of digits up by construction rather than by
remembering font-variant-numeric, and its slashed zero is the difference
between 0 and O in a tracking number read off a label. */
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono",
Menlo, Consolas, monospace;
/* Screen titles, and nothing else. Uppercase-only by design; see the note
in fonts/README.md about why this one face gets positive tracking when
everything else in here is tracked tight. */
--font-display: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
/* ---- shape ------------------------------------------------------------
One radius scale, applied by role: inputs and small controls 6-8px,
cards and panels 10px, overlays 12px. Mixing scales inside one screen is
the thing that reads as unfinished. */
/* Each step up one from where this started, matching what brex.com actually
uses in the page rather than what its token file claims: 6px on small
chrome, 10px on buttons and inputs (the value on every CTA there), 12px
on cards and panels (27 uses, the dominant radius on the page), 14px on
overlays. The old 8px button against a 10px card read as two systems
rounded slightly differently, which is the thing that makes an interface
look assembled rather than designed. */
--r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px;
--radius: var(--r-lg);
/* ---- tracking ---------------------------------------------------------
One value for the whole scale. brex.com sets -0.02em at every size it
uses: -1.44px at 72px, -0.96px at 48px, -0.48px at 24px, -0.32px at 16px,
-0.28px at 14px, -0.24px at 12px. All the same ratio.
This file had grown five different hand-picked values (-0.022em on the
page title, -0.01em on panel titles, -0.03em on figures, -0.006em on
body), which is five people's guesses rather than a scale. A constant
ratio tightens everything by the same proportion, which is what makes a
type scale read as one voice. */
--track: -.02em;
/* Figures only. A monospace sets every digit on the same advance width, so
a large number in it is wider than the same number in the text face and
wants one more step of tightening to sit in the same optical space. Named
rather than written at the call site, for the same reason --track is. */
--track-figure: -.03em;
/* ---- elevation --------------------------------------------------------
Separation comes from hairlines and ground colour, not shadow: a page of
twelve shadowed cards has no hierarchy left to spend. Shadows are tinted
to the ink hue rather than pure black, and reserved for surfaces that
genuinely float above the page. */
--shadow: 0 1px 2px rgba(21,25,30,.05);
--shadow-md: 0 4px 14px rgba(21,25,30,.09);
--shadow-lg: 0 18px 44px rgba(21,25,30,.16);
/* ---- motion -----------------------------------------------------------
One duration for everything. An ops console is used all day by people
who already know where they are going; anything slower than this is felt
as lag, not as polish. */
--dur: 125ms; --ease: ease;
/* Aliases. The later sections of this file (forms, permission boxes, the
tablet cards, the scan inputs) were written against --line/--card and
nothing ever defined them: an undefined var makes the whole declaration
invalid, so those borders fell back to currentColor — near-black, much
heavier than --border — and the backgrounds to transparent. That is what
made every .um-form look unfinished next to the rest of the app. Defined
as aliases rather than renamed at ~20 call sites so the two names cannot
drift apart again. */
--line: var(--border); --card: var(--panel);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-sans);
background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5;
/* Tight tracking is what separates a console from a document. At 13-14px
it buys back the width that dense tables need, and Inter is drawn for
it. One ratio for the whole scale, --track; see the note in :root.
cv05/cv08 give the single-storey l and the straight-tailed y, so
l/1/I stay apart in an SKU column. */
letter-spacing: var(--track);
font-feature-settings: "cv05" 1, "cv08" 1;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.layout { display: flex; min-height: 100vh; }
/* The rail reads as chrome, not as content: it sits on the page ground rather
than on white, so the working surface is unambiguously the panel area to its
right. */
/* A COLUMN, so the rail has a top, a middle that scrolls and a bottom that
stays put. It used to be one scrolling block: the brand, the find box, the
tree and the collapse control all in normal flow, which put the collapse
control wherever the tree happened to end — floating under the last item on
a short nav, below the fold on a long one, and moving as sections opened
and closed. A control that is somewhere different every time you look for
it is one you stop looking for.
Only .nav scrolls now; see its rule below. */
/* No scrollbar-width here any more: this element does not scroll, so the
declaration described a bar that could never appear. .nav owns the
scrolling and its own (absent) bar. */
.sidebar { width: 224px; background: var(--bg); border-right: 1px solid var(--border);
padding: 18px 10px 24px; position: sticky; top: 0; height: 100vh;
display: flex; flex-direction: column; overflow: hidden; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px;
flex: 0 0 auto; }
/* The monogram box. It carries the letter K AND the real mark on top of it —
the route answers 204 when the artwork is missing, and the letter is what
shows through then (see the note in index.html). The red ground and the
centred glyph are therefore the FALLBACK, not the design; k-logo.svg brings
its own black plate and covers both. */
/* 44px square — the same height as .brand-mark, so the brand row is the same
height collapsed or expanded and Home does not jump when the rail toggles. */
.brand .logo { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--brand);
color: #fff; display: grid; place-items: center; font-weight: 700;
font-size: 22px; letter-spacing: var(--track); flex: 0 0 auto;
position: relative; overflow: hidden; }
/* Fills the box and rounds with it. `cover` rather than `contain`: the asset
is square and so is the box, so the two agree — and if art ever supplies a
slightly-off-square export, cropping a hair off the plate is better than
letterboxing the mark inside a red border. */
.brand .logo img { position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block; }
.brand b { font-size: 14.5px; font-weight: 550; letter-spacing: var(--track); }
/* THE ONLY THING IN THE RAIL THAT SCROLLS. The brand and the find box are
pinned above it and the collapse control below it, so thirty-eight nav
entries scroll past a frame that does not move. min-height: 0 is what makes
that true — without it a flex child refuses to shrink below its content and
the whole rail grows instead, which is the state this replaced. */
/* overflow-x pinned to hidden: a scroll container with `auto` on one axis
computes the other to `auto` too, which in a 62px rail is a horizontal
scrollbar under every icon. The only thing that would overflow sideways is
the 5%-alpha shadow on the active row, and clipping that is invisible.
SCROLLS, BUT SHOWS NO SCROLLBAR. Expanding a section is the moment the tree
first overflows, so a bar appeared the instant somebody opened Orders and
took a strip off the right of every nav label — a control appearing as a
side effect of reading the menu. The wheel, a trackpad, a touch drag and
the keyboard all still scroll it; only the painted bar is gone.
Three declarations because three engines: scrollbar-width for Firefox,
-ms-overflow-style for legacy Edge, and the pseudo-element for WebKit and
Blink. Same technique the Driver app's stop chips already use. */
.nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
scrollbar-width: none; -ms-overflow-style: none; }
.nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Nav items carry no ground of their own until hovered. The active one is the
only marked item on screen, and it is marked twice: red label plus a red
edge, so it survives being scanned past at a glance. */
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md);
color: var(--text-2); text-decoration: none; font-weight: 500; cursor: pointer;
font-size: 13.5px; position: relative;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.nav a:hover { background: var(--accent-soft); color: var(--text); }
.nav a.active { background: var(--panel); color: var(--brand); font-weight: 600;
box-shadow: inset 0 0 0 1px var(--border), var(--shadow); }
.nav a.active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px;
width: 2.5px; border-radius: 0 2px 2px 0; background: var(--brand); }
.nav .dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.main { flex: 1; min-width: 0; padding: 24px 28px 48px; max-width: 1440px; }
/* Given a real page header, the h1 does not need to shout. Hierarchy comes
from the hairline under it and the space around it. */
.topbar { display: flex; justify-content: space-between; align-items: center;
gap: 16px; margin-bottom: 20px; padding-bottom: 14px;
border-bottom: 1px solid var(--border); }
.topbar h1 { font-size: 21px; font-weight: 550; letter-spacing: var(--track);
line-height: 1.1; }
.channels { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chip { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px;
background: var(--panel); border: 1px solid var(--border); font-size: 12px; font-weight: 500;
color: var(--text-2); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.connected { background: var(--green); } .disconnected { background: var(--border-strong); }
/* auto-fit rather than four fixed columns: the same .tiles row is reused with
four, five and six figures across the app, and at a fixed four the extras
wrapped into a ragged short row. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px; margin-bottom: 20px; }
.tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
padding: 14px 16px 15px; }
.tile .label { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: .05em; }
/* tabular-nums is the whole reason a column of figures reads as a column: with
proportional digits a 1 is narrower than a 7 and nothing lines up. */
.tile .value { font-size: 25px; font-weight: 550; margin-top: 7px; letter-spacing: var(--track);
line-height: 1.15; font-variant-numeric: tabular-nums; }
.tile .sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
margin-bottom: 18px; }
.panel h2 { font-size: 14px; font-weight: 550; letter-spacing: var(--track);
padding: 14px 18px; border-bottom: 1px solid var(--border); }
.panel .body { padding: 18px; }
.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; }
canvas { max-height: 260px; }
/* ==== THE TABLE ========================================================
Seventy-one tables ship in this app and they are all this one. Two
variants, and the only difference between them is the horizontal inset:
.tbl-wrap > table the data table. Bleeds to the panel's edge, so it
insets by --row-x and shares that left edge with
the panel header, the toolbar and the pager.
table.dr-table the inset table. Lives inside already-padded
content (a drawer, a .body), so it insets by
--row-x-inset instead — a full --row-x on top of
the 18px it already sits in reads as a margin
error.
Everything else — the type, the colours, the hairlines, the alignment,
the empty row — is shared and lives here. A module that wants a
different table wants one of these two.
Standardised 24 Aug 2026. What it replaced: .dr-table carrying its own
scale (6/8, 13px, th 10px) that no longer differed from the default once
compact landed; a dead `padding: 10px 18px` on th and `11px 18px` on td,
both overridden by the token line further down and both misleading
anybody reading for the real value; 22 of the 71 tables with no
horizontal-scroll wrapper at all; and 48 hand-written empty rows, no two
of them alike. */
table { width: 100%; border-collapse: collapse;
/* Every table in here has at least one column of quantities, prices or
dates. Setting tabular figures once on the table is cheaper than
remembering to set it on the right cells. */
font-variant-numeric: tabular-nums; }
/* NOT sticky, and it cannot be. .tbl-wrap sets overflow-x for the sideways
scroll, which promotes overflow-y to auto and makes the wrap the nearest
scrollport; the wrap has no height cap, so it never scrolls vertically and
a `position: sticky` header has nothing to stick inside. It carried
`position: sticky; top: 0; z-index: 2` for months and never once stuck —
measured 24 Aug 2026, on a page-scrolled 80-row table.
A header that genuinely holds needs a height-capped scroller
(.tbl-wrap { max-height; overflow: auto }), which means nested scrolling
on every list screen. That is a decision about how this app scrolls, not
a table detail, so it is not taken here. Opaque ground is kept: it costs
nothing and it is what a sticky header would need on the day one is
added. */
th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
color: var(--muted); border-bottom: 1px solid var(--border);
font-weight: 650; background: var(--panel);
white-space: nowrap; }
td { border-bottom: 1px solid var(--border); color: var(--text-2); }
/* The identifying cell of a row, whatever it happens to be, carries the ink.
Everything else is secondary text, which is what lets the eye run down one
column instead of reading every field. */
td:first-child { color: var(--text); font-weight: 500; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--accent-soft); }
/* The row that says there are no rows. One class, because there were 48 of
these written by hand and no two agreed: some inherited td:first-child and
came out bold ink, some nested a .empty div and got 40px of padding on top
of the cell's own, one set .muted and a 16px inline padding.
It is a cell, not a row, so it goes on the
. Centred and muted
because it is a statement about the table rather than a value in it, and
it overrides td:first-child for the same reason. */
td.tbl-none {
padding: 30px var(--row-x); text-align: center;
color: var(--muted); font-weight: 400; font-size: 13px;
}
td.tbl-none b { display: block; color: var(--text); font-size: 14px;
font-weight: 600; margin-bottom: 4px; }
.badge { display: inline-block; padding: 2.5px 9px; border-radius: 20px; font-size: 11px;
font-weight: 600; letter-spacing: var(--track); white-space: nowrap; }
/* Channel name as text, so the readable variants. See the -ink note in :root. */
.pf { font-weight: 600; }
.pf.shopee { color: var(--shopee-ink); } .pf.lazada { color: var(--lazada); } .pf.tiktok { color: var(--tiktok); }
.pf.shopify { color: var(--shopify-ink); } .pf.kamatto_pos { color: var(--kamatto_pos-ink); }
/* Ready stock is NOT a channel, and this is the one .pf that must not read
as one. A build has no marketplace and no buyer; giving it a channel
colour puts it one glance from being taken for a sale. So it is the only
.pf with a border and a ground — deliberately the shape of a label rather
than the shape of the five channel names beside it — in the muted ink, so
it reads as an annotation on the row and not as a sixth marketplace. */
/* The courier control only appears when something in view genuinely needs a
carrier chosen. When nothing does, the space says WHY rather than going
blank — an absent control reads as a missing feature. */
/* .proc-courier-ask / .proc-courier-none lived here until 1 Sep 2026. The
header no longer carries a courier select at all — the Arrange Shipment
form asks, and only about the orders that need one. */
/* ---- an order on the Processing screen ---------------------------------
An order is TWO
elements — a header carrying the columns, and its
items underneath — but it has to LOOK AND BEHAVE as one row. Two things
make that true, and both are needed:
the header drops its bottom border, so no rule runs between them;
hover and selection are applied to BOTH by data-oid (orders.js), because
the browser hovers one
at a time and would otherwise cut the order
in half under the pointer.
Without the second, the mouse splits every multi-item order visually and it
reads as two rows that happen to be adjacent. */
tr.ord-top > td { border-bottom: none; padding-bottom: 4px; }
tr.ord-items > td { padding-top: 0; }
tbody tr.ord-top.hov > td, tbody tr.ord-items.hov > td { background: var(--accent-soft); }
/* The order number, as a control: clicking it opens the same drawer All
Orders opens. A button rather than a styled span so it is reachable by
keyboard and announces itself. */
.ord-ref-btn { font: inherit; font-weight: 600; font-size: 14px; padding: 0;
border: none; background: none; color: var(--text);
cursor: pointer; text-align: left; }
.ord-ref-btn:hover { text-decoration: underline; }
/* The COID on its own line. Nineteen digits run onto the order number makes
one long string of figures, and somebody reading it out loses their place. */
.ord-coid { font-size: 11px; color: var(--muted);
font-family: ui-monospace, monospace; }
/* A bordered card per item, starting under the ORDER column rather than at
the table edge — the indent is what says these are the order's contents
and not rows of their own. The indent comes from an empty leading cell in
the markup, so it tracks the checkbox column's real width instead of a
magic number here. */
.ord-lines { display: flex; flex-direction: column; gap: 6px; }
.ol { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px;
align-items: start; padding: 8px 12px; font-size: 13px;
border: 1px solid var(--border); border-radius: 8px;
background: var(--panel); }
/* WHICH LINE — 1, 2, 3 down the order — not the quantity. 600, not 700: the
design calibration holds ordinary text at 600, and tabular figures plus the
fixed column are what make it scan, not the weight. */
.ol-no { font-variant-numeric: tabular-nums; font-weight: 600;
color: var(--text-2); text-align: right; }
.ol-name { line-height: 1.35; }
/* The ISKU under the name, in the mono the rest of the app uses for a code.
One identifier printed two ways on one screen reads as two things. */
.ol-sku { display: block; margin-top: 3px; font-size: 12px;
font-family: ui-monospace, monospace; color: var(--muted); }
.ol-right { text-align: right; }
.ol-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ol-rack { font-size: 11px; white-space: nowrap; margin-top: 2px; }
/* ---- Raise a ready stock build ----------------------------------------
The mat picker is a RESULTS LIST, not the .ac-list dropdown the Add Order
line picker uses. That one floats over the form absolutely positioned, and
this list sits above a table the person is building up — a dropdown would
cover the lines they have already added, which is the one thing they are
checking against while they choose the next mat. */
.rsb-row { display: flex; gap: 12px; flex-wrap: wrap; }
.rsb-row .fld { display: flex; flex-direction: column; gap: 5px; flex: 1;
min-width: 160px; }
/* ONE FIELD PER LINE, label above it, everything flush left. The two modal
forms were laid out as pairs across the box (cutter beside sewer, code
beside courier), which reads as a settings panel rather than as a form
somebody fills top to bottom — and it is what made the stray centring rule
so hard to see for what it was. CS asked for "just normal form" against
SiteGiant's own Create Pick List, which stacks. */
.kh-form { display: flex; flex-direction: column; gap: 14px; }
.kh-form .fld { display: flex; flex-direction: column; gap: 5px;
align-items: stretch; }
.kh-form .fld > input, .kh-form .fld > select { width: 100%; }
/* The optional/hint text under a label, not beside it: beside it the label
and the hint compete for the same reading position. */
.kh-form .fld .sk { font-weight: 400; }
.rsb-results { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.rsb-results:empty { margin: 0; }
.rsb-hit { display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
text-align: left; width: 100%; padding: 8px 10px; cursor: pointer;
font: inherit; background: var(--panel); color: var(--text);
border: 1px solid var(--border); border-radius: 6px; }
.rsb-hit:hover { background: var(--accent-soft); }
.rsb-hit .sk { font-size: 11px; color: var(--muted);
font-family: ui-monospace, monospace; }
/* ---- Assign to Wave: split across benches -----------------------------
Was one wide table, a row per pair and a column per mat — fine for a
build with two or three lines, unreadable past that and scrolling
sideways on a tablet. Pairs are now cards stacked one under the other:
"+ Add item" only offers what is still unassigned, so a card is built up
rather than a whole grid divided at once. */
.wsp-pairs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.wsp-pair { border: 1px solid var(--border); border-radius: var(--r-md);
padding: 12px; background: var(--panel);
transition: border-color .15s ease; }
.wsp-pair:focus-within { border-color: var(--accent, var(--red)); }
.wsp-pair-head { display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px; }
/* Cutter beside Sewer, not stacked — one pair's own two names read as a
single line here, and a card repeated per pair multiplies the cost of
stacking them the way an ordinary one-off form does. */
.wsp-fields { display: flex; gap: 12px; }
.wsp-fields .fld { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.wsp-fields .fld > select { width: 100%; }
.wsp-items { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.wsp-item { display: flex; align-items: center; gap: 8px; }
.wsp-item-name { flex: 1; font-size: 13px; }
.wsp-item input[type="number"] { width: 72px; }
.wsp-add { width: 100%; }
#wave-split-totals { display: flex; flex-wrap: wrap; gap: 4px 14px; }
#wave-split-totals .ok { color: var(--green); }
#wave-split-totals .muted { color: var(--muted); }
/* "+ Add Pair" opens this rather than dropping a blank card onto the list —
CS: pairs only appear once composed. Above .modal-overlay's z-index (60):
it sits on top of the Assign to Wave modal that is still open behind it,
not inside its own scroll, so the popover cannot be scrolled out of view. */
.wsp-popover-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45);
z-index: 61; display: flex; align-items: center;
justify-content: center; padding: 16px; }
.wsp-popover { background: var(--panel); border-radius: var(--radius);
width: 100%; max-width: 480px; max-height: 85vh; overflow-y: auto;
padding: 18px 20px; box-shadow: var(--shadow-md); }
.wsp-popover h3 { margin: 0 0 12px; font-size: 15px; }
.wsp-popover-foot { display: flex; justify-content: flex-end; gap: 10px;
margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
/* ---- Assign to Wave: Smart Wave --------------------------------------
Cutters beside Sewers, each a closed control that reads like the "Give it
to" select beside it — same border, radius, padding and chevron — and
opens a menu of checkboxes FLOATING over the form, the way a native
select's list does, rather than pushing the plan and the deadline down
(Ryan, 1 Oct 2026). A , so it opens with a tap and no script;
a click anywhere else closes it (orders.js:waveSmartBind). */
.swv-pick { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.swv-pick > .fld { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 200px; }
.swv-drop { position: relative; }
.swv-drop > summary { list-style: none; cursor: pointer; font-size: 13px;
background: var(--panel); border: 1px solid var(--border-strong);
border-radius: var(--r-md); padding: var(--ctl-y, 7px) 30px var(--ctl-y, 7px) 10px;
line-height: 1.4; position: relative; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; }
.swv-drop > summary::-webkit-details-marker { display: none; }
.swv-drop > summary::after { content: ""; position: absolute; right: 12px; top: 50%;
width: 6px; height: 6px; margin-top: -5px;
border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
transform: rotate(45deg); }
.swv-drop[open] > summary { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(200,16,46,.14); }
.swv-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5;
background: var(--panel); border: 1px solid var(--border-strong);
border-radius: var(--r-md); box-shadow: var(--shadow-md);
max-height: 240px; overflow-y: auto; padding: 4px 0; }
.swv-opt { display: flex; align-items: center; gap: 8px; padding: 5px 10px;
font-size: 13px; cursor: pointer; }
.swv-opt:hover { background: var(--accent-soft); }
.swv-opt input { margin: 0; }
.swv-all { border-bottom: 1px solid var(--border); font-weight: 600; margin-bottom: 2px; }
/* A warehouse's heading inside the menu: EG's people, then NG's. */
.swv-group { padding: 6px 10px 2px; font-size: 11px; font-weight: 600;
letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.swv-pts { font-weight: 600; white-space: nowrap; }
/* One line per order on a pair's card: which order, what is on it, what it
weighs — so the preview shows how each pair got its points. */
.swv-orders { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; }
.swv-orders li { display: flex; gap: 8px; padding: 2px 0; border-top: 1px dashed var(--border); }
.swv-orders li:first-child { border-top: 0; }
.swv-orders .swv-ref { font-family: ui-monospace, monospace; flex: 0 0 auto; }
.swv-orders .swv-what { flex: 1; color: var(--muted); }
.swv-err { color: var(--red); }
.pf.ready_stock { color: var(--muted); border: 1px solid var(--border);
border-radius: 4px; padding: 1px 6px; font-size: 11px;
background: var(--bg); white-space: nowrap; }
/* The remark tag (app/order_remarks.py), on the Order Processing row and in
the order drawer. Tinted ground plus dark text of the same hue, the same
way .st-* below does it and for the same reason: one of these can sit on
a row that already carries a payment badge and a channel name, and a
solid fill would be all anybody sees.
Urgent is the only one in the warning hue. The other two are things to
know before packing, not things to hurry — giving all three amber would
make the colour mean "has a remark", which the badge already says. */
.rmk { display: inline-block; margin-left: 6px; padding: 1px 7px;
border-radius: 4px; font-size: 11px; font-weight: 600;
white-space: nowrap; vertical-align: middle;
/* An unknown key still renders (see remarkTagBadge) and has to be
legible, so the neutral ground is on .rmk itself rather than
arriving only with a per-tag class. */
background: var(--bg); color: var(--muted);
border: 1px solid var(--border); }
.rmk-urgent_order { background: var(--amber-soft); color: var(--amber);
border-color: var(--amber-soft); }
.rmk-customer_confirmation { background: var(--info-soft); color: var(--info);
border-color: var(--info-soft); }
.rmk-affiliate_order { background: var(--green-soft); color: var(--green);
border-color: var(--green-soft); }
/* Order.is_priority — one badge, always reading "Priority" (see
priorityTagBadge in orders.js). Only ever rendered when the SERVER
(app/shipping.py:is_priority_order) has already decided the order
qualifies, so there is exactly one value to colour, unlike .rmk-* which
needs a colour per tag. */
.ship-pri { display: inline-block; margin-left: 6px; padding: 1px 7px;
border-radius: 4px; font-size: 11px; font-weight: 600;
white-space: nowrap; vertical-align: middle;
background: var(--info-soft); color: var(--info);
border: 1px solid var(--info-soft); }
/* Order status. Tinted ground plus dark text of the same hue, never a solid
fill: a solid fill in a table column competes with the brand red on the
buttons above it, and eight solid pills per row is all anybody sees. */
.st-completed { background: var(--green-soft); color: var(--green); }
.st-shipped { background: var(--info-soft); color: var(--info); }
.st-to_ship { background: var(--amber-soft); color: var(--amber); }
.st-unpaid { background: var(--accent-soft); color: var(--muted); }
.st-cancelled { background: var(--danger-soft); color: var(--danger); }
/* nowrap for the same reason as .badge: "Out of stock" broken over two lines
doubles the row height of every out-of-stock line in a stock list, which is
exactly the set of rows somebody is scanning for. */
.flag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-sm);
white-space: nowrap; }
.flag.warn { background: var(--amber-soft); color: var(--amber); }
.flag.low { background: var(--danger-soft); color: var(--danger); }
.flag.ok { background: var(--green-soft); color: var(--green); }
/* A trip package's photos in the Trip detail table. Thumbnails rather than
"Photo 1 · Photo 2" links: settling a damage claim means comparing the
pre-delivery shot with the post-delivery one, which needs both on screen at
once instead of two tabs opened in turn. */
.pod-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.pod-lbl { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase;
letter-spacing: .03em; margin-right: 2px; }
.pod-thumb { display: block; width: 34px; height: 34px; border: 1px solid var(--border);
border-radius: 5px; overflow: hidden; line-height: 0; }
.pod-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Optional accent on a tile's number. The Trip list's own tiles are plain, and
these stay the same card — only the figure is coloured, where the colour is
information (a red Failed count is the one an admin is looking for). */
.tile .value.ok { color: var(--green); } .tile .value.warn { color: var(--amber); }
.tile .value.low { color: var(--danger); }
/* A count tile that is also the filter for what it counts (Equipment
Maintenance, Spare Parts). Only .clickable gets the pointer and the
pressed border: a display-only tile that looked pressable and did nothing
is why filterTiles() and summaryTiles() are two helpers and not one. */
.tiles.clickable .tile { cursor: pointer; }
.tiles.clickable .tile:hover { border-color: var(--border-strong); }
.tiles.clickable .tile.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tiles.clickable .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A driver's trip-record tiles: the same .tile as the Trip list, but seven of
them (two totals plus one per trip status), so auto-fit rather than the
.tiles default of four fixed columns — at four they wrapped into a ragged
second row of three. Tighter padding for the same reason. */
.rec-tiles { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
gap: 12px; margin-bottom: 18px; }
.rec-tiles .tile { padding: 13px 14px; }
/* Heading for a screen whose summary sits outside any panel. */
.rec-hd { font-size: 17px; font-weight: 550; margin: 10px 2px 12px; }
.toolbar { display: flex; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border);
flex-wrap: wrap; align-items: center; }
.toolbar select { cursor: pointer; }
/* A staff code on the Wave Shipment tab. Mono because it IS a code — the
thing people type to sign in — and reading it as a word is how EBPV006 and
EBPV008 stop looking different. */
.wave-who { font-family: ui-monospace, monospace; font-size: 12.5px; }
/* n/m, aligned so a column of them can be scanned down rather than read. */
.wave-count { font-family: ui-monospace, monospace; font-size: 12.5px;
color: var(--muted); }
/* A section heading inside the Arrange Shipment form: it groups the
selection by what each part still needs decided. */
.arr-h { font-size: 12.5px; font-weight: 600; margin: 16px 0 2px; }
.arr-h:first-child { margin-top: 0; }
/* A heading with a count and an (i) after it. As a plain block the three
stacked, giving a three-line heading over a two-field form with the icon
orphaned beneath it. baseline, so the glyph sits on the text's line. */
.arr-h-row { display: flex; align-items: baseline; gap: 6px;
flex-wrap: wrap; }
/* The Shopee courier pickup dates in the Arrange Shipment form.
CARDS, NOT A