/* ========================================================================== LYR Workspace — UI SYSTEM (density + consistency layer) -------------------------------------------------------------------------- Loaded LAST on every page, after style.css / warehouse.css / barcode.css / rr.css / reimbursement.css. This is the single place that decides how *data* looks across the whole suite: row height, font size, column padding, panel chrome, margins and gaps. Why it exists: the suite grew page by page, so each screen invented its own table padding, its own list-row treatment (neumorphic pills in some places, flat rows in others), its own modal chrome and its own outer margins. On a program that manages hundreds of thousands of rows that reads as five different products. Everything below collapses that into one grammar: - one table grammar (sticky dark header, 24px rows, hairline grid) - one list grammar (flat 24px rows, zebra, no pills, no shadows) - one control grammar (24px buttons, 22px inputs, mono numerics) - one panel grammar (tab content is a flat full-bleed sheet, NOT a floating dialog — same as the result grid) - one margin scale (8/10/12 — nothing bigger unless it separates two genuinely different regions) !important is used deliberately and often here: style.css's neumorphic pass stamps `!important` background/border/shadow/radius onto .card, .supplier-row, .uploaded-row, input, button etc. A later layer that wants to flatten those has to match that weight. Scoped as tightly as possible so nothing outside the intended surface is caught. ========================================================================== */ :root { /* Readability fix: style.css's --border (#dde1e7, used on cards, panels and dividers suite-wide) was too low-contrast to read against white. Redefined here since this file loads last everywhere. */ --border: #b8bfca; /* The density scale. Every number below comes from these — change one token, the whole suite moves together. */ --ui-row-h: 27px; /* data row height (tables, lists) */ --ui-row-h-lg: 40px; /* interactive rows that hold a control */ --ui-head-h: 25px; /* table header row */ --ui-bar-h: 42px; /* panel / toolbar header */ --ui-ctl-h: 34px; /* buttons */ --ui-input-h: 34px; /* text/number inputs */ --ui-font: 13.5px; /* data text */ --ui-font-sm: 12.5px; /* secondary/meta text */ --ui-font-head: 11.5px; /* column headers, eyebrows */ --ui-font-title: 14.5px; /* panel titles */ --ui-cell-x: 8px; /* horizontal cell padding */ --ui-cell-y: 2px; /* vertical cell padding */ /* One rhythm for every screen: 8 inside a compact control group, 12 between related controls, 16 between separate regions, and 14 on the edge of a surface. */ --ui-gap: 12px; /* default gap between siblings */ --ui-gap-sm: 8px; --ui-gap-lg: 16px; /* gap between two different regions */ --ui-pad: 14px; /* default container padding */ --ui-grid-line: #b8bfca; /* hairline between cells — darkened for visibility (was #dfe3ea, too low-contrast) */ --ui-zebra: rgba(20, 30, 48, 0.022); --ui-hover: rgba(26, 79, 160, 0.07); --ui-sel: rgba(26, 79, 160, 0.12); /* A modest shared radius softens the suite without making dense data surfaces feel decorative. */ --ui-radius: 8px; } /* ========================================================================== 1. OUTER MARGINS Every screen sits in the same rect: flush under the fixed header, flush against the rail, with a single 8px breathing gutter. No centered max-width columns, no 24-40px page padding — on a data program that's thousands of rows of lost real estate. ========================================================================== */ body:has(> .home-wrap.home-neu > .app-side) { padding: 0 !important; } .home-wrap.home-neu:has(> .app-side) { padding-left: calc(var(--nav-w) + 4px) !important; padding-right: 4px; padding-top: var(--header-h) !important; gap: 0 !important; } /* Tool workspaces own a fixed application canvas. Let their list/grid areas scroll independently when they contain data, but never make the browser page itself wider or taller than the window. */ body:has(.dc-shell), body:has(.rd-shell) { overflow: hidden; } .home-wrap.home-neu:has(.dc-shell), .home-wrap.home-neu:has(.rd-shell) { box-sizing: border-box; height: 100vh; height: 100dvh; min-height: 0 !important; overflow: hidden; } .dc-shell, .rd-shell { height: 100%; min-height: 0; overflow: hidden; } .po-shell, .po-shell.po-compact-canvas { max-width: none !important; margin: 0 !important; padding: 0 4px 4px !important; } /* The stateful canvas fills everything left under the strip, exactly. */ .po-canvas { min-height: calc(100vh - var(--header-h) - 8px) !important; } /* Generic page shells used by the other modules (intransit, organizer, barcode, reimbursement, admin) get the same treatment so no module floats in a narrower column than its neighbours. */ .wrap { max-width: none !important; margin: 0 !important; padding: 0 4px 4px !important; gap: var(--ui-gap) !important; } .po-columns { gap: var(--ui-gap) !important; } .card-stack { gap: var(--ui-gap) !important; } /* ========================================================================== 2. TABLE GRAMMAR One look for every table in the program. Excludes .po-grid (the result preview), which is already this grammar and owns its own resize machinery. ========================================================================== */ table:not(.po-grid) { width: 100%; border-collapse: separate !important; border-spacing: 0 !important; margin: 0 !important; font-size: var(--ui-font) !important; font-family: var(--font-body); background: #fff; } table:not(.po-grid) thead th { position: sticky; top: 0; z-index: 2; height: var(--ui-head-h); padding: 0 var(--ui-cell-x) !important; background: var(--brand-black) !important; color: #fff !important; font-family: var(--font-mono); font-size: var(--ui-font-head) !important; font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase; text-align: left; white-space: nowrap; border: none !important; border-right: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: 0 1px 0 var(--ui-grid-line); } table:not(.po-grid) thead th:last-child { border-right: none !important; } table:not(.po-grid) tbody td { height: var(--ui-row-h); padding: var(--ui-cell-y) var(--ui-cell-x) !important; border: none !important; border-bottom: 1px solid var(--ui-grid-line) !important; border-right: 1px solid var(--ui-grid-line) !important; font-variant-numeric: tabular-nums; line-height: 1.25; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: transparent; } table:not(.po-grid) tbody td:last-child { border-right: none !important; } /* First column is the label column on nearly every table in the suite (branch, supplier, part number) — let it breathe, keep the rest tight. */ table:not(.po-grid) tbody td:first-child { font-weight: 600; max-width: 420px; } /* Numbers right-align and go mono, always — comparing a column of figures is the single most common thing anyone does in this program. */ table:not(.po-grid) tbody td.num, table:not(.po-grid) tbody td[data-num] { text-align: right; font-family: var(--font-mono); } table:not(.po-grid) tbody tr:nth-child(even) td { background: var(--ui-zebra); } table:not(.po-grid) tbody tr:hover td { background: var(--ui-hover) !important; } table:not(.po-grid) tbody tr:last-child td { border-bottom: 1px solid var(--ui-grid-line) !important; } /* Any scroll container a table lives in: flat, hairline-bounded, no card shadow, no rounded corners — a data sheet, not a widget. */ .table-scroll, .po-table-wrap { border: 1px solid var(--ui-grid-line) !important; border-radius: var(--ui-radius) !important; box-shadow: none !important; background: #fff !important; overflow: auto; } /* Controls parked inside a cell shrink to fit the row, never grow it. */ table:not(.po-grid) td input[type=text], table:not(.po-grid) td input[type=number], table:not(.po-grid) td select { height: 20px !important; min-height: 0 !important; padding: 0 6px !important; width: 68px !important; min-width: 0 !important; font-size: calc(11px * var(--fs, 1)) !important; font-family: var(--font-mono) !important; border-radius: 2px !important; box-shadow: inset 0 0 0 1px var(--ui-grid-line) !important; background: #fff !important; } table:not(.po-grid) td input[type=text] { width: 100% !important; text-align: left; } table:not(.po-grid) td button { height: 20px !important; padding: 0 8px !important; font-size: calc(10px * var(--fs, 1)) !important; box-shadow: none !important; border: 1px solid var(--ui-grid-line) !important; border-radius: 2px !important; background: #fff !important; } /* Checkbox cells (Branch Settings "include in order form") centre their control instead of leaving it floating at the left of a wide column. */ table:not(.po-grid) td:has(> input[type=checkbox]), table:not(.po-grid) td:has(> label > input[type=checkbox]) { text-align: center; } table:not(.po-grid) input[type=checkbox] { appearance: none; width: 13px; height: 13px; margin: 0; border: 1px solid var(--border-hi) !important; border-radius: 2px !important; background: #fff !important; box-shadow: none !important; cursor: pointer; display: inline-grid; place-content: center; vertical-align: middle; } table:not(.po-grid) input[type=checkbox]:checked { background: var(--brand-blue) !important; border-color: var(--brand-blue) !important; } table:not(.po-grid) input[type=checkbox]:checked::after { content: ""; width: 3px; height: 6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); } /* ========================================================================== 3. TAB CONTENT = FLAT SHEET, NOT A DIALOG The Source Files / Branch / Working Days / Stocking Days / Suppliers tabs dock straight into the canvas. They should look exactly like the result grid that appears in that same rect: a slim toolbar, then content to the edges. Everything that made them read as a floating modal card — rounded corners, drop shadow, brand top-rule, 24px body padding — is stripped here. ========================================================================== */ .po-canvas-dock-slot .po-modal-panel { max-width: none !important; max-height: none !important; height: 100% !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; transform: none !important; font-family: var(--font-body) !important; font-size: var(--ui-font) !important; font-weight: 400 !important; } .po-canvas-dock-slot .po-modal-head { height: var(--ui-bar-h); min-height: var(--ui-bar-h); padding: 0 var(--ui-pad) !important; gap: var(--ui-gap-sm) !important; background: #fff !important; border-bottom: 1px solid var(--ui-grid-line) !important; box-shadow: none !important; } .po-canvas-dock-slot .po-modal-head h2 { font-family: var(--font-display); font-size: var(--ui-font-title) !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* The icon chip in the tab header was a 30px+ rounded tile — at 34px of bar height that's the whole bar. Down to a plain 14px glyph. */ .po-canvas-dock-slot .po-modal-head .po-card-icon { width: 16px !important; height: 16px !important; min-width: 16px !important; padding: 0 !important; background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; color: var(--brand-blue); } .po-canvas-dock-slot .po-modal-head .po-card-icon svg { width: 16px; height: 16px; } .po-canvas-dock-slot .po-modal-submit, .po-canvas-dock-slot .po-modal-save, .po-canvas-dock-slot .po-modal-close { height: var(--ui-ctl-h) !important; min-width: var(--ui-ctl-h); padding: 0 10px !important; font-family: var(--font-mono) !important; font-size: calc(10.5px * var(--fs, 1)) !important; font-weight: 700 !important; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--ui-radius) !important; box-shadow: none !important; background: linear-gradient(180deg, var(--brand-blue-light), var(--brand-blue)) !important; border: 1px solid rgba(15, 50, 110, 0.4) !important; color: #fff !important; transform: none !important; } .po-canvas-dock-slot .po-modal-close { background: #fff !important; border: 1px solid var(--ui-grid-line) !important; color: var(--text-dim) !important; font-size: calc(14px * var(--fs, 1)) !important; padding: 0 !important; line-height: 1; } .po-canvas-dock-slot .po-modal-close:hover { background: var(--err-dim) !important; color: var(--err) !important; } /* Body: no padding at all. Whatever the tab's main surface is (a table, a list) runs to the panel edges, exactly like the result grid does. */ .po-canvas-dock-slot .po-modal-body { padding: 0 !important; gap: 0 !important; background: #fff !important; } .po-canvas-dock-slot .po-modal-body > .card-stack { gap: 0 !important; padding: 0 !important; overflow: visible; } .po-canvas-dock-slot .po-modal-body .section-block { padding: var(--ui-gap-sm) var(--ui-pad) !important; border-bottom: 1px solid var(--ui-grid-line); background: var(--surface-2); } .po-canvas-dock-slot .po-modal-body .section-label { font-family: var(--font-mono); font-size: var(--ui-font-head) !important; font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; } /* The status line ("308 suppliers", "22 branches loaded") was a bordered green pill floating on its own row. It becomes a plain meta line in a thin strip — information, not an object. */ .po-canvas-dock-slot .po-modal-body > .row:has(> .status), .po-canvas-dock-slot .po-modal-body .card-stack > .row:has(> .status) { min-height: 0; padding: 4px var(--ui-pad) !important; margin: 0 !important; border-bottom: 1px solid var(--ui-grid-line); background: var(--surface-2); } .po-canvas-dock-slot .status { font-family: var(--font-mono) !important; font-size: var(--ui-font-head) !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim) !important; background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Tables inside a docked tab: full bleed, header sticks to the toolbar. */ .po-canvas-dock-slot table:not(.po-grid) { border: none !important; border-radius: 0 !important; } .po-canvas-dock-slot .po-modal-body .card-stack, .po-canvas-dock-slot .po-modal-body .po-table-wrap { border: none !important; border-radius: 0 !important; overflow: auto; } /* Bulk-action rows (Select all / Clear selection) become a slim toolbar. */ .po-canvas-dock-slot #supplierBulkActions, .po-canvas-dock-slot #uploadActions { display: flex; align-items: center; gap: var(--ui-gap-sm) !important; padding: 5px var(--ui-pad) !important; margin: 0 !important; border-bottom: 1px solid var(--ui-grid-line); background: var(--surface-2); } /* Search field: full-width, flat, 26px — a filter bar, not a hero input. */ .po-canvas-dock-slot #supplierSearch { height: 26px !important; margin: 0 !important; padding: 0 var(--ui-pad) !important; width: 100% !important; border: none !important; border-bottom: 1px solid var(--ui-grid-line) !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; font-size: var(--ui-font) !important; } .po-canvas-dock-slot #supplierSearch:focus { box-shadow: inset 0 -2px 0 var(--brand-blue) !important; } /* ========================================================================== 4. LIST GRAMMAR (suppliers, uploaded files) These were neumorphic pills — one rounded, shadowed, bordered box per row, 37px tall, with 6px of air between each. At 308 suppliers that's a 3-screen scroll for what is really a 308-row list. Flattened to the same 24px row the tables use, so a list and a table read identically. ========================================================================== */ .supplier-list { max-height: none !important; min-height: 0; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; overflow: auto; } .supplier-row { height: var(--ui-row-h); min-height: var(--ui-row-h); align-items: center; gap: var(--ui-gap-sm) !important; padding: 0 var(--ui-pad) !important; margin: 0 !important; font-size: var(--ui-font) !important; font-weight: 500; background: transparent !important; border: none !important; border-bottom: 1px solid var(--ui-grid-line) !important; border-radius: 0 !important; box-shadow: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .supplier-row:nth-child(even) { background: var(--ui-zebra) !important; } .supplier-row:hover { background: var(--ui-hover) !important; } .supplier-row:has(input:checked) { background: var(--ui-sel) !important; } .supplier-row input[type=checkbox] { width: 13px !important; height: 13px !important; flex: none; border: 1px solid var(--border-hi) !important; border-radius: 2px !important; background: #fff !important; box-shadow: none !important; } .supplier-row input[type=checkbox]:checked { background: var(--brand-blue) !important; border-color: var(--brand-blue) !important; } .supplier-row input[type=checkbox]:checked::after { border-color: #fff !important; } /* Uploaded source files: one row per file, filename + role badge + Remove on a single 28px line instead of a three-line stacked card. */ .uploaded-list, .po-selected-row { max-height: none !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; background: #fff !important; overflow: auto; } .uploaded-row { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: var(--ui-gap) !important; height: var(--ui-row-h-lg); min-height: var(--ui-row-h-lg); padding: 0 var(--ui-pad) !important; margin: 0 !important; font-size: var(--ui-font) !important; background: transparent !important; border: none !important; border-bottom: 1px solid var(--ui-grid-line) !important; border-left: none !important; border-radius: 0 !important; box-shadow: none !important; } .uploaded-row:nth-child(even) { background: var(--ui-zebra) !important; } .uploaded-row:hover { background: var(--ui-hover) !important; } .uploaded-row > :first-child { flex: 1; min-width: 0; width: auto !important; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .uploaded-row .badge, .uploaded-row .role-badge, .uploaded-row .pill { flex: none; height: 16px; padding: 0 6px !important; font-family: var(--font-mono); font-size: calc(9.5px * var(--fs, 1)) !important; letter-spacing: 0.05em; line-height: 16px; border-radius: 2px !important; box-shadow: none !important; } .uploaded-row button { flex: none; height: 20px !important; padding: 0 8px !important; font-size: calc(9.5px * var(--fs, 1)) !important; box-shadow: none !important; border: 1px solid var(--ui-grid-line) !important; border-radius: 2px !important; } /* Dropzone: a 56px strip across the top of the Source Files tab. It was a 220px hero box that pushed the actual file list below the fold. */ .po-shell .dropzone, .po-canvas-dock-slot .dropzone { flex-direction: row !important; align-items: center; justify-content: center; gap: var(--ui-gap) !important; width: 100% !important; height: 56px; min-height: 56px; padding: 0 var(--ui-pad) !important; margin: 0 !important; border: 1px dashed var(--border-hi) !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important; background: var(--surface-2) !important; box-shadow: none !important; } .po-canvas-dock-slot .po-dropzone-icon { width: 22px !important; height: 22px !important; margin: 0 !important; padding: 5px !important; } .po-canvas-dock-slot .po-dropzone-text { margin: 0 !important; font-size: var(--ui-font) !important; } .po-canvas-dock-slot .dropzone .small { margin: 0 !important; font-size: var(--ui-font-sm) !important; } /* ========================================================================== 5. CONTROL GRAMMAR ========================================================================== */ button:not(.po-strip-chip):not(.po-modal-save):not(.po-modal-close):not(.mini-btn):not(.login-form-btn):not(.role-picker-btn):not(.login-pw-toggle):not(.app-nav-item):not(.app-side-sub-toggle):not(.po-seg-btn):not(.po-linkbtn):not(.po-flash-x):not(.po-modal-submit):not(.tk-checklist-rm):not(.home-dash-card-refresh):not(.zone-task-delete):not(.remove-row-btn):not(.icon-bare) { height: var(--ui-ctl-h); padding: 0 10px !important; font-family: var(--font-mono); font-size: calc(10.5px * var(--fs, 1)) !important; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: var(--ui-radius) !important; transform: none !important; } button.primary { height: 26px; padding: 0 14px !important; font-size: calc(11px * var(--fs, 1)) !important; } button:hover { transform: none !important; } /* Auth screens, the home search box and the zone chat composer are not data surfaces — they're the one place a comfortable touch target beats density, so they opt out of the 22px input height. */ input[type=text]:not(.home-search-input), input[type=number], select { height: var(--ui-input-h); padding: 0 8px !important; font-size: var(--ui-font) !important; border-radius: var(--ui-radius) !important; } input[type=number] { font-family: var(--font-mono); } .login-form input, .login-pw-field input, .auth-shell input{ height: 34px !important; padding: 0 12px !important; font-size: calc(13px * var(--fs, 1)) !important; } .login-form-btn, .role-picker-btn { height: 36px !important; padding: 0 16px !important; font-size: calc(12px * var(--fs, 1)) !important; } .small { font-size: var(--ui-font-sm) !important; } .row { gap: var(--ui-gap-sm) !important; } /* ========================================================================== 6. RESULT PREVIEW GRID — aligned to the same scale Already the reference implementation; these nudges just pull its numbers onto the shared tokens so the grid and the tabs match exactly. ========================================================================== */ .po-grid { font-size: var(--ui-font); border-collapse: separate; border-spacing: 0; } .po-grid thead th { height: var(--ui-head-h); padding: 0 var(--ui-cell-x); font-size: var(--ui-font-head); letter-spacing: 0.055em; } .po-grid tbody td { padding: var(--ui-cell-y) var(--ui-cell-x); border-right: 1px solid var(--ui-grid-line); border-bottom: 1px solid var(--ui-grid-line); line-height: 1.25; } .po-grid tbody tr:nth-child(even) td { background: var(--ui-zebra); } .po-grid tbody tr:hover td { background: var(--ui-hover); } .po-grid-toolbar { min-height: var(--ui-bar-h); padding: 0 var(--ui-pad) !important; gap: var(--ui-gap) !important; } .po-grid-foot { min-height: var(--ui-head-h); padding: 0 var(--ui-pad) !important; font-size: var(--ui-font-sm); } .po-done-banner { padding: var(--ui-gap-sm) var(--ui-pad) !important; gap: var(--ui-gap) !important; } .po-canvas-state.is-full { padding: 0 !important; } .po-done-full, .po-progress-full { width: 100%; } .po-progress-full { padding: var(--ui-gap-lg) var(--ui-pad); } /* ========================================================================== 7. WAREHOUSE CLEANUP MONITORING The floor map is rendered in a .map-full block that sits OUTSIDE .home-wrap, so it never picked up the rail offset or the fixed header's height: the left-hand column of crates was drawn underneath the sidebar and the top edge underneath the header. It also stretched with preserveAspectRatio="none", so the crates were the only thing in the suite not drawn at their true proportions. ========================================================================== */ .map-full { box-sizing: border-box; position: fixed; /* pinned to the exact rect left by the fixed rail + header, so it can't be pushed down by the (empty) .home-wrap block above it */ top: var(--header-h); left: var(--nav-w); right: 0; bottom: 0; width: auto !important; height: auto; padding: var(--ui-gap) !important; overflow: auto; } #floor-map { width: 100%; height: 100%; min-width: 940px; /* below this the crate labels collide — scroll instead */ } /* Legend and bulk toolbar: same control scale as everything else, and docked clear of the map's own padding. */ .legend-float { bottom: var(--ui-gap) !important; right: var(--ui-gap) !important; gap: var(--ui-gap-lg) !important; padding: 4px var(--ui-pad) !important; border-radius: var(--ui-radius) !important; font-size: var(--ui-font-sm) !important; box-shadow: none !important; } .legend-title { font-family: var(--font-mono); font-size: var(--ui-font-head) !important; letter-spacing: 0.055em; } .legend-swatch { width: 9px !important; height: 9px !important; } /* Zone chat / task modal: same header scale and same flat sheet body as the order form's docked tabs. */ .modal-header { min-height: var(--ui-bar-h); padding: 0 var(--ui-pad) !important; } .modal-eyebrow { font-family: var(--font-mono); font-size: var(--ui-font-head) !important; letter-spacing: 0.055em; text-transform: uppercase; } .modal-scroll { padding: var(--ui-gap) var(--ui-pad) !important; } .zone-task-list { gap: 4px !important; } .mini-btn { height: var(--ui-ctl-h) !important; min-width: var(--ui-ctl-h); padding: 0 8px !important; } /* ========================================================================== 8. SHARED CHROME — header strip, rail, tabs Kept exactly where they are, only pulled onto the shared type scale so the topbar, the tab headers and the column headers all speak in the same size. This is what makes the whole program read as one product. ========================================================================== */ .po-strip { height: var(--header-h); padding: 0 var(--ui-pad) !important; gap: var(--ui-gap-sm) !important; } .po-strip-chip { height: 28px; padding: 0 10px !important; font-size: var(--ui-font) !important; gap: var(--ui-gap-sm) !important; } .po-strip-chip-badge { font-family: var(--font-mono); font-size: calc(9.5px * var(--fs, 1)) !important; letter-spacing: 0.05em; padding: 1px 5px !important; } .po-strip-actions { gap: var(--ui-gap-sm) !important; } .app-nav-item { font-size: var(--ui-font) !important; } .tab-btn { height: var(--ui-ctl-h); padding: 0 12px !important; font-size: calc(10.5px * var(--fs, 1)) !important; } /* Navigation is primary wayfinding, so its icons should not read smaller than the labels beside them. */ .app-side-group-icon, .app-side-group-icon svg { width: 17px; height: 17px; } .app-side-item-icon, .app-side-item-icon svg { width: 22px; height: 22px; } .app-side-subitem .app-side-item-icon, .app-side-subitem .app-side-item-icon svg { width: 20px; height: 20px; } /* Discrepancy forms are one workflow, so every editable field needs one measured footprint. Browser-specific date, number and select chrome had been giving those controls a different rendered height from text fields. This late, direct-child rule deliberately wins every inherited control rule. 40px keeps the action row visible inside the fixed canvas. */ .dc-form .dc-f > input:not([type=checkbox]):not([type=radio]), .dc-form .dc-f > select, .dc-form .dc-f > .dc-seg, .dc-form .dc-f > .dc-variance, .rd-form .rd-f > input:not([type=checkbox]):not([type=radio]), .rd-form .rd-f > select, .rd-form .rd-f > .rd-seg, .rd-form .rd-f > .rd-variance { box-sizing: border-box !important; flex: 0 0 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; line-height: 38px !important; padding-top: 0 !important; padding-bottom: 0 !important; } .dc-form .dc-f, .rd-form .rd-f { gap: 6px; } /* ========================================================================== 9. MODAL FALLBACK (pages with no canvas to dock into) Same flat sheet grammar, just centred in a backdrop. ========================================================================== */ .po-modal .po-modal-panel { max-width: 900px; border-radius: var(--ui-radius) !important; box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18) !important; } .po-modal .po-modal-head { height: var(--ui-bar-h); min-height: var(--ui-bar-h); padding: 0 var(--ui-pad) !important; } .po-modal .po-modal-head h2 { font-size: var(--ui-font-title) !important; } .po-modal .po-modal-body { padding: 0 !important; } /* ========================================================================== 10. SCROLLBARS Thin, neutral, always the same — a 8px rounded dark thumb on a data grid reads as decoration. ========================================================================== */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(20, 30, 48, 0.22); border: 2px solid transparent; background-clip: content-box; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: rgba(20, 30, 48, 0.38); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ========================================================================== 12. CANVAS LAYERING — HARD FIX -------------------------------------------------------------------------- The progress view and the result grid were being painted UNDERNEATH the docked tab panel. Three things stacked up to cause it: 1. .po-canvas-dock is position:absolute with z-index:6. The three canvas states (.po-canvas-idle / -progress / -done) are in-flow flex children with no position and no z-index, so a positioned element ALWAYS paints over them regardless of DOM order. Whichever state was active lost that fight every time. 2. .po-canvas is a centering flex container (align/justify: center) and the states are sized height:100% against a parent with only a min-height. That resolves to auto, so a tall state (the preview grid, the progress log) was laid out at content height, centred, and then clipped by .po-canvas's own overflow:hidden. 3. .po-canvas-docked fades the states to opacity:0. If the dock was ever left open — or its close was interrupted — that class stayed on and the state underneath stayed invisible even after it switched. Fixed by taking the ambiguity out entirely: the canvas becomes a plain positioned box, every state fills it absolutely with its own z-index, and the dock is only allowed to sit above them while it is actually open. ========================================================================== */ .po-canvas { display: block !important; position: relative !important; overflow: hidden !important; } .po-canvas > .po-canvas-state { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; z-index: 2; /* above the closed dock (3), below an open one */ overflow: auto; } /* Idle sits at the bottom of the stack and stays centred. */ .po-canvas > .po-canvas-idle { z-index: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Progress + done fill the rect top-down and scroll internally. */ .po-canvas > .po-canvas-state.is-full { display: flex; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; padding: 0 !important; } /* .hidden must still beat all of the above. */ .po-canvas > .po-canvas-state.hidden { display: none !important; } /* A closed dock sits UNDER the active state so it can never cover it, even if a stray `is-open`/`po-canvas-docked` class is left behind by an interrupted close animation. It is lifted above only while open. */ .po-canvas-dock { z-index: 3 !important; } .po-canvas-dock.is-open { z-index: 20 !important; } /* The fade-out only applies while a dock is genuinely open. Without the :has() guard a leftover .po-canvas-docked class kept the progress view at opacity:0 — visible in the DOM, invisible on screen, which is exactly what "hidden behind" looked like. */ .po-canvas.po-canvas-docked > .po-canvas-state { opacity: 1; } .po-canvas.po-canvas-docked:has(> .po-canvas-dock.is-open) > .po-canvas-state { opacity: 0; } /* ---- done state fills its rect instead of floating in a 1200px column ---- The result grid is the deliverable; it gets the whole canvas, with the banner and toolbar pinned above it and the grid itself owning all the remaining height. Previously .po-done-full capped at 1200px centred and .po-grid-scroll used a fixed max-height of 100vh-320px, so on any screen the grid stopped short and left dead space below it. */ .po-done-full { max-width: none !important; margin: 0 !important; gap: 0 !important; flex: 1; min-height: 0; } .po-done-full > .po-done-banner, .po-done-full > .po-grid-toolbar { flex: none; } .po-grid-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; border: none !important; border-top: 1px solid var(--ui-grid-line) !important; border-radius: 0 !important; box-shadow: none !important; } .po-grid-scroll { flex: 1; min-height: 0; max-height: none !important; overflow: auto; } .po-grid-foot { flex: none; border-top: 1px solid var(--ui-grid-line); } /* Progress state: same deal -- the step checklist and log columns get the height they need rather than a centred block with air above and below. */ .po-progress-full { width: 100%; max-width: none !important; margin: 0 !important; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--ui-gap-lg); } .po-progress-cols { flex: 1; min-height: 0; } .po-steps, .po-log-body { overflow: auto; } /* Post-merge result summary on the Intransit Merger page -- same headline+sub shape as the other tools' "done" canvas, just living in a compact rail card instead of a big centered canvas since this page has no po-canvas. See intransit-merge.js's renderMergeResults(). */ .merge-result { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ui-grid-line, rgba(0, 0, 0, 0.08)); } .merge-result strong { display: block; margin-bottom: 2px; } /* ========================================================================== MANAGE ACCOUNTS (/admin) & LOGIN — de-neumorphize -------------------------------------------------------------------------- These two screens are still built on the older .panel/.field/.acct-item system (predates .po-card), so style.css's neumorphic pass swept them into its raised/embossed/inset treatment same as everything else that existed at the time. Every newer tool page (Order Form, Intransit, Organizer, Barcode) already reads flat and bordered because .po-card never opted into that pass — that's "the program" look this should match. Not a second reskin, just bringing these two in line. Approach: the neumorphic pass itself is built entirely from --neu-* custom properties (--neu-bg, --neu-edge, --neu-raised, --neu-radius-*), referenced via var() everywhere including inside its own !important declarations. Redefining those properties on a common ancestor here makes every var(--neu-*) lookup underneath resolve to a flat value instead, without having to fight each individual !important rule one by one. A handful of spots hardcode a literal instead of a var (input borders, checkbox/badge radius) — those get an explicit, equally-scoped override below the variable reset. ========================================================================== */ .auth-canvas, .login-neu-wrap { --neu-bg: #ffffff; --neu-edge: #dde1e7; --neu-radius-lg: 6px; --neu-radius: 4px; --neu-radius-sm: 4px; --neu-raised: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.05); --neu-raised-sm: 0 1px 2px rgba(16,24,40,0.04); --neu-inset: none; --neu-inset-sm: none; --neu-accent-raised: 0 1px 3px rgba(15,50,110,0.28); --neu-accent-inset: inset 0 0 0 1px rgba(15,50,110,0.35); } /* Layout wrappers (grid/flex containers, not visual cards) got swept into the "raised container" selector by name only — they shouldn't render as a card at all, let alone a nested one inside the real panel around them. */ .admin-grid, .perm-grid, .field { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } /* Text inputs: the neumorphic pass hardcodes `border: none` on every input/select/textarea (relying on an inset shadow for definition instead), which the variable reset above can't touch since it isn't a var() reference. Restore a plain, flat border here. */ .auth-canvas input[type=text], .auth-canvas input[type=password], .login-neu-wrap input[type=text], .login-neu-wrap input[type=password] { border: 1px solid #b7bec9 !important; } .auth-canvas input[type=text]:focus, .auth-canvas input[type=password]:focus, .login-neu-wrap input[type=text]:focus, .login-neu-wrap input[type=password]:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-dim) !important; outline: none !important; } /* Permission chips: read as a rectangular toggle row, not a pill (the shared badge/pill rule forces a literal 999px radius onto .perm-chip alongside real badges). Checkbox gets its square outline and its checked fill back for the same literal-value reason as the text inputs above. */ .perm-chip { border-radius: 4px !important; } .perm-chip input { border: 1px solid #b7bec9 !important; } .perm-chip input:checked { background: var(--accent) !important; border-color: var(--accent) !important; } /* Text vs. password inputs, same field: browsers use their own font metrics for the password-dot glyph rather than the line-height ours generates from plain text, so a field can render visibly taller with dots in it than with plain text -- and shift size again the instant "Show" swaps its type back to text. Pinning an explicit height (rather than letting it fall out of padding + line-height) removes that dependency entirely: box-sizing is already border-box here, so this is a hard, content-independent size both states share. */ .field input[type=text], .field input[type=password] { height: 40px; padding-top: 0; padding-bottom: 0; } /* Chrome/Edge/Safari paint their own pale-blue "autofill" background on a field once a saved username/password is filled into it, at a higher priority than any background-color rule can reach (it's a native paint, not a CSS cascade thing) -- which is what was actually happening in the login screenshot: not our CSS, the browser overriding it the moment "admin" got autofilled. The only real fix is the inset-box-shadow trick below, which paints a huge white shadow *underneath* the browser's autofill layer so it reads as a normal white field again. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text); /* Chrome runs its autofill background as a delayed transition; a huge duration on that transition (rather than none) is the standard way to stop it ever visibly animating in before our inset shadow paints. */ transition: background-color 600000s ease-in-out 0s; } /* Password show/hide toggle sits inline inside the field, not as its own bordered button — the shared button rule stamps a raised box onto it regardless, since it's named in that selector too. */ .auth-canvas .pw-toggle, .login-neu-wrap .pw-toggle { background: transparent !important; border: none !important; box-shadow: none !important; } /* Danger button keeps its red outline instead of the shared raised-disc button treatment stamping a neutral border/shadow over it. */ .auth-shell button.danger { background: transparent !important; border: 1px solid var(--err) !important; box-shadow: none !important; } .auth-shell button.danger:hover { background: var(--err) !important; color: #fff !important; } /* ========================================================================== 8. PAGE CHROME FOR NON-TOOL SCREENS -------------------------------------------------------------------------- Manage Accounts, My Account, Discrepancy Monitoring, Dashboard and the Warehouse floor map used to be built on the older page grammar (centered .auth-shell card, hero mascot, empty header strip, or -- for Exceptions -- a separate dark top bar with no sidebar at all). They now sit on the same shell as Order Form / Intransit / Organizer / Barcode: _topnav -> .po-shell -> .po-strip (header) -> .po-canvas Everything below is built from the --ui-* tokens at the top of this file, so a change to a token moves these screens together with every other one. ========================================================================== */ /* ---- header strip extras ------------------------------------------------ */ .po-strip-meta { flex: none; font-family: var(--font-mono); font-size: var(--ui-font-sm); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-mute); white-space: nowrap; } .po-strip-meta b { color: var(--text); font-weight: 700; } /* Non-interactive twin of .po-strip-chip: label + count pill (warehouse). */ .po-strip-count { flex: none; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: calc(12.5px * var(--fs, 1)); font-weight: 600; color: var(--text-dim); white-space: nowrap; } .po-strip-count b { font-family: var(--font-mono); font-size: calc(10px * var(--fs, 1)); font-weight: 600; color: var(--text-mute); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; } .po-strip-count .legend-swatch { flex: none; } .po-strip-bar { flex: none; width: 110px; height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--ui-grid-line); overflow: hidden; } .po-strip-bar > i { display: block; height: 100%; width: 0; background: var(--ok); transition: width 0.3s ease; } /* ---- the sheet: a flat, full-bleed data surface in the canvas rect ------ */ .po-canvas-state.po-sheet { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 0 !important; overflow: hidden; background: #fff; text-align: left; font-family: var(--font-body); font-size: var(--ui-font); font-weight: 400; } .po-sheet-bar { flex: none; display: flex; align-items: center; flex-wrap: nowrap; gap: var(--ui-gap); min-height: var(--ui-bar-h); padding: 0 var(--ui-pad); background: #fff; border-bottom: 1px solid var(--ui-grid-line); } .po-sheet-bar .po-grid-hint { margin-left: var(--ui-gap-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .po-sheet-bar .po-grid-search { margin-left: auto; flex: none; height: 22px; min-width: 230px; padding: 0 8px; border: 1px solid var(--ui-grid-line); border-radius: var(--ui-radius); box-shadow: none; background: #fff; } .po-sheet-bar .po-grid-search:focus-within { border-color: var(--brand-blue); box-shadow: 0 0 0 1px var(--brand-blue); } .po-sheet-bar .po-grid-search input { width: 100%; height: 20px !important; padding: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; font-family: var(--font-body); font-size: var(--ui-font) !important; } .po-sheet-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; } .po-sheet .po-table-wrap { flex: 1 1 auto; min-height: 0; border: none !important; border-radius: 0 !important; } .po-sheet .po-grid-foot { flex: none; justify-content: space-between; background: var(--surface-2); border-top: 1px solid var(--ui-grid-line); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; } /* identity line at the top of a sheet (avatar initial, name, @username) */ .po-ident { display: flex; align-items: center; gap: var(--ui-gap); min-width: 0; } .po-ident-mark { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ui-radius); background: var(--brand-black); color: #fff; font-family: var(--font-mono); font-size: calc(10.5px * var(--fs, 1)); font-weight: 700; } .po-ident strong { font-size: calc(12px * var(--fs, 1)); font-weight: 700; color: var(--text); white-space: nowrap; } .po-ident span.po-ident-user { font-family: var(--font-mono); font-size: var(--ui-font-sm); color: var(--text-mute); } /* ---- flash / status banner --------------------------------------------- */ .po-flash { flex: none; display: flex; align-items: center; gap: var(--ui-gap); min-height: 26px; padding: 0 var(--ui-pad); font-family: var(--font-body); font-size: var(--ui-font); font-weight: 600; border-bottom: 1px solid; } .po-flash > span { flex: 1; min-width: 0; } .po-flash-ok { background: var(--ok-dim); color: var(--ok); border-color: rgba(44, 138, 86, 0.28); } .po-flash-error { background: var(--err-dim); color: var(--err); border-color: rgba(179, 65, 58, 0.28); } .po-flash-warn { background: var(--warn-dim); color: var(--warn); border-color: rgba(173, 124, 80, 0.32); } .po-flash-x { flex: none; width: 20px; height: 20px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border: none !important; box-shadow: none !important; background: none !important; color: inherit; font-size: calc(16px * var(--fs, 1)); line-height: 1; cursor: pointer; opacity: 0.7; } .po-flash-x:hover { opacity: 1; } /* ---- segmented filter (All / Active / Pending / ...) -------------------- */ .po-seg { flex: none; display: inline-flex; border: 1px solid var(--ui-grid-line); border-radius: var(--ui-radius); overflow: hidden; background: #fff; } .po-seg .po-seg-btn { height: 22px; padding: 0 9px !important; font-family: var(--font-mono); font-size: calc(10px * var(--fs, 1)); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); background: #fff !important; border: none !important; border-right: 1px solid var(--ui-grid-line) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; cursor: pointer; } .po-seg .po-seg-btn:last-child { border-right: none !important; } .po-seg .po-seg-btn:hover { background: var(--ui-hover) !important; } .po-seg .po-seg-btn b { margin-left: 5px; font-weight: 700; color: var(--text-mute); } .po-seg .po-seg-btn.is-on { background: var(--brand-blue) !important; color: #fff; } .po-seg .po-seg-btn.is-on b { color: rgba(255, 255, 255, 0.78); } /* ---- link-style text button -------------------------------------------- */ .po-linkbtn { padding: 0 !important; font-family: var(--font-mono); font-size: var(--ui-font-head); font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase; color: var(--brand-blue); background: none !important; border: none !important; box-shadow: none !important; cursor: pointer; } .po-linkbtn:hover { text-decoration: underline; } /* ---- tags & badges in cells -------------------------------------------- */ .po-tag { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; margin-right: 4px; font-family: var(--font-mono); font-size: calc(9.5px * var(--fs, 1)); font-weight: 700; letter-spacing: 0.05em; line-height: 16px; text-transform: uppercase; border-radius: 2px; background: var(--accent-dim); color: var(--accent-hi); white-space: nowrap; } .po-tag-all { background: var(--brand-black); color: #fff; } .po-tag-mute { background: var(--surface-2); color: var(--text-mute); } table:not(.po-grid) .badge, .po-sheet .badge { display: inline-block; height: 16px; padding: 0 6px !important; margin-right: 4px; font-size: calc(9.5px * var(--fs, 1)) !important; line-height: 16px !important; letter-spacing: 0.05em; border-radius: 2px !important; box-shadow: none !important; } /* ---- sortable table headers & row states ------------------------------- */ table:not(.po-grid) thead th[data-sort] { cursor: pointer; user-select: none; } table:not(.po-grid) thead th[data-sort]:hover { background: #2b3138 !important; } table:not(.po-grid) thead th[aria-sort="ascending"]::after { content: " \25B2"; font-size: calc(8px * var(--fs, 1)); opacity: 0.85; } table:not(.po-grid) thead th[aria-sort="descending"]::after { content: " \25BC"; font-size: calc(8px * var(--fs, 1)); opacity: 0.85; } table:not(.po-grid) tbody tr[hidden] { display: none; } table:not(.po-grid) tbody tr.po-row-click { cursor: pointer; } table:not(.po-grid) tbody tr.po-row-click:focus-visible td { outline: none; box-shadow: inset 0 0 0 1px var(--brand-blue); } table:not(.po-grid) tbody tr.po-row-pinned td { background: var(--accent-dim); } table:not(.po-grid) tbody td.mono { font-family: var(--font-mono); color: var(--text-dim); } table:not(.po-grid) tbody td.act, table:not(.po-grid) thead th.act { text-align: right; width: 64px; } table:not(.po-grid) tbody tr.po-empty-row td { height: 96px; text-align: center; color: var(--text-mute); font-family: var(--font-body); font-weight: 400; background: #fff !important; } .po-acct-table th:nth-child(2) { width: 190px; } .po-acct-table th:nth-child(3) { width: 210px; } /* ---- forms inside docked panels and sheets ----------------------------- */ .po-form-grid { flex: none; width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; } .po-form-grid > form { display: contents; } .po-form-block { min-width: 0; background: #fff; border-right: 1px solid var(--ui-grid-line); border-bottom: 1px solid var(--ui-grid-line); } .po-form-block-head { display: flex; align-items: center; gap: var(--ui-gap-sm); min-height: 26px; padding: 0 var(--ui-pad); background: var(--surface-2); border-bottom: 1px solid var(--ui-grid-line); font-family: var(--font-mono); font-size: var(--ui-font-head); font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase; color: var(--text-dim); } .po-form-block-head .po-spacer { flex: 1; } .po-form-block-head .po-count { font-weight: 500; color: var(--text-mute); } .po-form-block-head .po-sep { color: var(--border-hi); } .po-form-block-body { display: flex; flex-direction: column; gap: var(--ui-gap); max-width: 560px; padding: var(--ui-pad); } .po-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .po-field > label { font-family: var(--font-mono); font-size: var(--ui-font-head); font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase; color: var(--text-dim); } .po-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-gap); } .po-form-block input[type=text], .po-form-block input[type=password] { width: 100%; height: 26px !important; padding: 0 8px !important; font-family: var(--font-body); font-size: var(--ui-font) !important; font-weight: 400; color: var(--text); border: 1px solid var(--ui-grid-line) !important; border-radius: var(--ui-radius) !important; box-shadow: none !important; background: #fff !important; } .po-form-block input[type=text]:focus, .po-form-block input[type=password]:focus { outline: none; border-color: var(--brand-blue) !important; box-shadow: 0 0 0 1px var(--brand-blue) !important; } .po-form-block .pw-field input { padding-right: 54px !important; } .po-form-block .pw-toggle { right: 4px; height: 20px !important; padding: 0 6px !important; font-size: calc(9.5px * var(--fs, 1)) !important; } .po-pw-row { display: flex; gap: var(--ui-gap-sm); } .po-pw-row input { flex: 1; min-width: 0; } .po-hint, .po-form-block .field-hint, .po-form-block .field-error { font-family: var(--font-body); font-size: var(--ui-font-sm) !important; font-weight: 400; color: var(--text-mute); } .po-form-block .field-error { color: var(--err); } .po-form-block .field-hint.ok { color: var(--ok); } .po-form-block-actions { display: flex; align-items: center; gap: var(--ui-gap); } .po-danger-row { display: flex; flex-wrap: wrap; gap: var(--ui-gap); } .po-danger-row form { margin: 0; } /* tool-access checklist = the same flat list grammar as Suppliers */ .po-perm-list.supplier-list { display: block; border: 1px solid var(--ui-grid-line) !important; border-radius: var(--ui-radius) !important; overflow: hidden; } .po-perm-list .supplier-row { display: flex; } .po-perm-list .supplier-row:last-child { border-bottom: none !important; } /* docked-panel title: "EDIT ACCOUNT @username" */ .po-canvas-dock-slot .po-modal-head h2 small { margin-left: 8px; font-family: var(--font-mono); font-size: var(--ui-font-sm); font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--text-mute); } .po-canvas-dock-slot .po-modal-head .badge { margin-left: 6px; } /* ---- warehouse strip legend dots reuse the map legend colours ---------- */ .po-strip-count .legend-swatch { width: 9px !important; height: 9px !important; } /* ---- fixes found while testing section 8 -------------------------------- */ /* style.css has a global `button:hover { color:#fff }`; our light-background text buttons must keep their own colour on hover/focus. */ .po-linkbtn:hover, .po-linkbtn:focus-visible, .po-linkbtn:active { color: var(--accent-hi) !important; background: none !important; transform: none !important; } .po-seg .po-seg-btn:hover { color: var(--text) !important; } .po-seg .po-seg-btn.is-on:hover { color: #fff !important; background: var(--brand-blue) !important; } .po-flash-x:hover, .po-flash-x:active { color: inherit !important; background: none !important; transform: none !important; } /* Inputs inherit a global `flex: 1 1 0%`, which collapses them to content height inside a column .po-field. Only the inline password row wants to grow. */ .po-field > input, .po-field > .pw-field { flex: none; } .po-pw-row input { flex: 1 1 0%; } /* equal-height blocks so hairlines line up across a row */ .po-form-grid { align-items: stretch; } /* status badge in a docked panel head: same flat 16px chip as in tables */ .po-modal-head .badge { display: inline-block; height: 16px; padding: 0 6px !important; font-size: calc(9.5px * var(--fs, 1)) !important; line-height: 16px !important; letter-spacing: 0.05em; border-radius: 2px !important; box-shadow: none !important; } /* ---- warehouse page background = every other page's background ---------- The floor-map page never had .home-neu-body, so it fell back to the older #e6ebf3 (plus a faint grid) instead of the suite's #eceff4. Only visible in the 8px gutter around the map, but it read as a different app. */ body.wh-shell { background-color: #eceff4; background-image: none; } /* ---- small screens --------------------------------------------------------- Keep the primary action and the search box reachable without swiping. */ @media (max-width: 860px) { .po-sheet-bar { flex-wrap: wrap; padding: 4px var(--ui-pad); row-gap: 4px; } .po-sheet-bar .po-grid-hint { display: none; } .po-sheet-bar .po-grid-search { margin-left: 0; flex: 1 1 100%; min-width: 0; } .po-sheet .po-grid-foot > span:last-child { display: none; } } @media (max-width: 640px) { .po-strip-meta { display: none; } } /* ========================================================================== CONTENT CONSISTENCY PASS (toolbars, filter controls, data tables) -------------------------------------------------------------------------- Every tool had its own idea of a toolbar control: 38px search boxes next to 22px status buttons next to 26px calendar selects, native date pickers and OS-default