/* ===================================================================== Skycentrix — Aviation Operations Platform — Design System Self-contained, no external dependencies. ===================================================================== */ /* The typeface lives in fonts.css, linked before this file by every document that renders text — the app, the airline portal, and each standalone public page. */ :root { /* Tell the browser which side we are on, so the NATIVE bits follow the theme too: scrollbars, the text caret, form controls, and the flash before first paint. Without this the app went dark and the scrollbars stayed light. `data-theme` is the resolved theme (never "system"), so these two rules always match what the CSS variables do. */ color-scheme: dark; /* Brand — platform blue + green accent */ /* THE TENANT COLOUR ARRIVES THROUGH --brand-tenant, NEVER --brand. `App.applyBrand` used to write --brand inline on , which outranks every selector in this file — so `html[data-theme="light"] { --brand: … }` below never applied once a user was signed in, and the light theme silently ran on the dark palette's blue. An inline custom property cannot be beaten by a stylesheet; it can only be read by one. */ --brand: var(--brand-tenant, #1B9FDD); /* brand blue */ --brand-dark: var(--brand-tenant-dark, #1480B5); --brand-soft: var(--brand-tenant-soft, rgba(27, 159, 221, 0.14)); --brand-ink: var(--brand-tenant-ink-dark, #29a5df); /* on --brand-soft: 4.31 -> 4.60 */ --brand-fill: var(--brand-tenant-fill, #157cac); /* white on it: 2.98 -> 4.65 */ --accent: #8CC63F; /* accent green */ --accent-dark: #6fa32f; --accent-soft: rgba(140, 198, 63, 0.16); --accent-ink: #8cc63f; /* 5.65 on --accent-soft */ --accent-fill: #5a7f28; /* white on it: 2.05 -> 4.68 */ /* Surfaces (dark ops console) */ --bg: #0e1320; --bg-2: #141b2d; --surface: #1a2236; --surface-2: #212c44; --surface-3: #283450; --panel-2: var(--surface-3); /* alias used by chips/tracks; follows the theme via --surface-3 */ --border: #2c3a59; --border-soft: #243049; /* The arrivals-wall scope paints SEA and LAND, and neither is a surface token. Reusing --bg / --surface-2 was the obvious thing and it broke light theme outright: there they are #eef2f8 and #f6f9fd, so the land was a quarter-percent LIGHTER than the ocean and the map rendered as a blank disc. A map's figure/ground is its own decision, so it gets its own three values per theme, chosen against each other rather than against a panel. */ --wall-sea: #0b1120; --wall-land: #243052; --wall-land-line: #3c5182; /* Text */ /* ALIASES for names the views actually reached for. `var(--line)` appears bare in ~32 places across eight views and the LIR aircraft diagram, and `var(--surface-1)` in two more — and an undefined custom property makes the WHOLE declaration invalid at computed-value time. Measured: `border: 1px solid var(--line)` computed to width 0 / style none, so every one of those hairlines simply did not render, and the LIR panels had no background. Defining the aliases fixes all 34 sites at once and keeps them theme-aware, which a find-and-replace across eight files would not. */ --line: var(--border); --surface-1: var(--surface); --text: #eef2fb; --text-2: #aeb9d4; /* --text-3 is the muted token behind every sub-line, timestamp, help string and unit label, so it carries a large share of the platform's text. Measured against the real surfaces it failed WCAG AA almost everywhere: 4.33 on --surface and 3.81 on --surface-2 (dark), and 3.14 / 2.79 / 2.97 in light — against a 4.5 floor for body text. On screens the handheld contract itself describes as read "at arm's length, in sunlight, in gloves". Lifted by the SMALLEST step that clears 4.5 on the WORST pairing, so the hierarchy holds: --text-3 is still visibly dimmer than --text-2 (5.14 vs 8.06 on --surface). */ /* 4.01 on --surface-3 was the pairing the earlier pass did not measure — chips, dots and share rows all sit on it. Lifted 9% further; --text-2 is still clearly brighter (8.06 vs 5.80 on --surface), so the three-step hierarchy holds. */ --text-3: #909db9; /* dark: worst pairing 4.01 -> 4.53 */ /* Status palette. THREE ROLES, NOT ONE, and conflating them is what put 94 pairings under AA. --x the identity colour: an icon, a rule, a chart series, a border. Foreground on an ordinary surface, where it already passes. --x-ink the same hue as TEXT ON ITS OWN --x-soft chip. A 15%-alpha wash of a colour barely moves the background, so the hue sitting on it is very nearly the hue on the page — 2.6 to 3.6 across the badge family. --x-fill the same hue as a SOLID BACKGROUND under white text. Every one of these was failing: white on --ok measured 2.28, which is the platform's own handheld success toast. Each value is the SMALLEST step from --x that clears 4.5 against the surface it is actually used on, computed rather than eyeballed, and re-measured by tests/test_contrast.py on every run. */ /* STATUS COLOURS — softened by LIGHTNESS, not by saturation. The old set was Tailwind red-500 / green-500 / amber-500 at full chroma AND high lightness, which is what made them glare on a dark ground: `--ok #22c55e` is a spring green, and the neon in it is its YELLOWNESS, not its intensity. Lowering chroma instead — the obvious move — produced a pastel that read as "disabled" rather than "calmer", which is the thing to know if this is ever revisited. So: chroma is roughly held, lightness comes down, and the hues move off the primaries — red toward carmine (18°), green toward emerald (163°). Validated with the palette validator against this surface; the old set FAILED it twice over, on the dark-mode lightness band and on `#f59e0b ↔ #22c55e` at ΔE 5.7 for protanopia, which is below the floor — amber and green were near-indistinguishable for about one man in twelve. `--danger` sits at 3.82 on --surface (the old one was 4.21, itself already under the 4.5 small-text floor). Both clear the 3.0 large-text threshold, and every element that renders status as SMALL text uses the `-ink` tokens below. Those are tuned to ~4.8 rather than to 4.5 exactly: stopping at the first value that clears the floor lands on 4.50, and tests/test_contrast computes at full precision and rightly calls that a failure. */ --ok: #19af7c; /* The ink that sits ON an --ok fill. A near-black green reads best on the dark theme's brighter green (5.55) and fails on the light theme's darker one (3.47), so the pairing is a token rather than a literal — four rules hard-coded #042a12, and changing --ok for the colour-blind separation quietly broke all four until tests/test_contrast caught it. */ --ok-on: #042a12; --ok-soft: rgba(25, 175, 124, 0.15); --ok-ink: #27b484; /* 4.78 on --ok-soft */ --ok-fill: #008858; /* white on it: 4.50 */ --warn: #eb9f2c; --warn-soft: rgba(235, 159, 44, 0.15); --warn-ink: #eb9f2c; /* 5.49 on --warn-soft */ --warn-fill: #ad6500; /* white on it: 4.53 */ --danger: #dc4658; --danger-soft: rgba(220, 70, 88, 0.15); --danger-ink: #e57683; /* 4.78 on --danger-soft */ --danger-fill: #d24253; /* white on it: 4.52 */ --info: #3b82f6; --info-soft: rgba(59, 130, 246, 0.15); --info-ink: #609af8; /* 3.54 -> 4.63 */ --info-fill: #3371d6; /* 3.68 -> 4.69 */ --purple: #a855f7; --purple-soft: rgba(168, 85, 247, 0.15); --purple-ink: #bb7af9; /* 3.37 -> 4.63 */ --purple-fill: #994de1; /* 3.96 -> 4.66 */ --teal: #14b8a6; --teal-soft: rgba(20, 184, 166, 0.15); --teal-ink: #14b8a6; /* 4.94 */ --teal-fill: #0e8376; /* 2.49 -> 4.66 */ --radius: 14px; --radius-sm: 9px; /* Height of every control that shares a toolbar row — buttons, segmented tabs, selects, the search box. Without an explicit height each one is only as tall as its own content's line box, so a button labelled "⬇ CSV" came out 3px taller than "+ New Case" (emoji have a taller line box) and a native select taller again. Set it once and every toolbar lines up regardless of what's written on it. */ --control-h: 36px; --shadow: 0 8px 30px rgba(0, 0, 0, 0.35); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25); /* Sized so the longest department label ("Commercial & Corporate") fits without truncating — at 256px six of the twelve nav sections rendered with an ellipsis. */ --sidebar-w: 296px; /* Let every device use the interface face it was designed around: SF Pro on macOS and iOS, Segoe UI Variable on Windows 11, Roboto on Android — each one hinted for the renderer actually drawing it. Naming "Segoe UI" first (as this did) meant Apple hardware silently fell through to system-ui anyway, and Windows 11 got legacy Segoe rather than the variable cut. The named faces after system-ui are only there for browsers that don't resolve the generic. */ --font: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Plex Mono for the same reason as the sans, plus one this stack made worse: four candidate faces meant four digit widths and four ideas of what a zero looks like, so an AWB read off one desk did not sit the same as the same AWB on the next. The PDF pipeline and the printed labels have been on Plex Mono all along. */ --mono: "IBM Plex Mono", "Cascadia Code", "SF Mono", Consolas, "Roboto Mono", monospace; } /* ---------------------------------------------------------------- Light theme An airy, high-whitespace palette. Toggled from the topbar (persisted to localStorage as sc_theme). Everything is variable-driven, so overriding the tokens re-themes the whole app; the few hardcoded dark chrome surfaces (sidebar, topbar) get explicit light overrides below. */ html[data-theme="light"] { color-scheme: light; --brand: var(--brand-tenant, #1487c4); --brand-dark: var(--brand-tenant-dark, #0f6699); --brand-soft: var(--brand-tenant-soft, rgba(20, 135, 196, 0.10)); --brand-ink: var(--brand-tenant-ink-light, #1173a7); /* 3.52 -> 4.63 */ --brand-fill: var(--brand-tenant-fill, #127bb2); /* 3.97 -> 4.67 */ --accent: #6fa32f; --accent-dark: #5c8a26; --accent-soft: rgba(111, 163, 47, 0.14); --accent-ink: #507522; /* 2.64 -> 4.67 */ --accent-fill: #577f25; /* 3.02 -> 4.70 */ --bg: #eef2f8; --bg-2: #f5f8fc; --surface: #ffffff; --surface-2: #f6f9fd; --surface-3: #eceff6; --border: #dce3ee; --border-soft: #e8edf5; --wall-sea: #c8daf0; --wall-land: #ffffff; --wall-land-line: #9db6d4; --line: var(--border); --surface-1: var(--surface); /* Light was the worse of the two — 3.14 / 2.79 / 2.97 against --surface / --bg / --surface-2. Same rule: smallest darkening that clears 4.5 on the worst pairing (now 4.56). */ --text: #16233d; --text-2: #4c5a75; --text-3: #626d80; /* 4.40 on --surface-3 -> 4.55 */ /* The dark theme's hues, stepped darker for white. Same three families, so a screenshot from one theme still reads as the same product in the other. */ /* ok and warn are stepped APART in luminance, not just chosen for contrast. On white the space is tight: for warn to separate from ok it has to be lighter, which costs contrast, and the first pass put them at 0.195 and 0.181 — indistinguishable for a deuteranope, the very failure this palette was replacing. Balanced so the WEAKER of the two gaps is as large as possible (0.059 danger/ok, 0.060 ok/warn) rather than one gap being generous and the other barely there. warn lands at 3.59 on white: over the large-text floor it needs, and every small use goes through --warn-ink at 4.55. */ --ok: #008858; --ok-on: #ffffff; --ok-soft: rgba(0, 136, 88, 0.12); --ok-ink: #00754c; --ok-fill: #008854; /* 4.92 on --ok-soft · white on it 4.52 */ --warn: #bf7700; --warn-soft: rgba(191, 119, 0, 0.12); --warn-ink: #955d00; --warn-fill: #ad6500; /* 4.78 · 4.53 */ --danger: #b82c41; --danger-soft: rgba(184, 44, 65, 0.12); --danger-ink: #b82c41; --danger-fill: #b82c41; /* 5.01 · 6.04 */ --info: #2563eb; --info-soft: rgba(37, 99, 235, 0.10); --info-ink: #2461e6; --info-fill: #2563eb; /* 4.50 -> 4.65 · already 5.17 */ --purple: #9333ea; --purple-soft: rgba(147, 51, 234, 0.10); --purple-ink: #9333ea; --purple-fill: #9333ea; /* already 4.64 · 5.38 */ --teal: #0d9488; --teal-soft: rgba(13, 148, 136, 0.12); --teal-ink: #0b786e; --teal-fill: #0b8278; /* 3.25 -> 4.65 · 3.74 -> 4.68 */ --shadow: 0 10px 34px rgba(23, 43, 84, 0.10); --shadow-sm: 0 2px 10px rgba(23, 43, 84, 0.07); } /* The wordmark swaps to its dark-text variant in light mode (default = light-text). */ html[data-theme="light"] .sc-wm-onDark { display: none !important; } html[data-theme="light"] .sc-wm-onLight { display: block !important; } /* …except on surfaces that are ALWAYS dark regardless of the app theme (the auth aside has its own hardcoded dark gradient). There the light-text wordmark must stay — the dark-text one is invisible on the dark panel. Higher specificity than the rules above, so it wins in light mode. */ html[data-theme="light"] .auth-aside .sc-wm-onDark { display: block !important; } html[data-theme="light"] .auth-aside .sc-wm-onLight { display: none !important; } html[data-theme="light"] .sidebar { background: #ffffff; border-right: 1px solid var(--border); } html[data-theme="light"] .nav-item:hover { background: var(--surface-3); } html[data-theme="light"] .nav-item.active { background: var(--brand-soft); color: var(--brand-ink); } html[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.82); } html[data-theme="light"] .mobile-nav { background: rgba(255, 255, 255, 0.96); } /* smooth the flip between themes */ html, body { transition: background-color .25s ease, color .25s ease; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* A NUMBER THAT OPENS WHAT IT COUNTED. Anchors are reset to inherit/none above, so a figure wrapped in one is indistinguishable from the figure beside it that leads nowhere: in the staff-performance table "6" under Open opens six cases and "16" under Handled opens nothing, and until this nothing on screen said which was which. A chevron per cell — the affordance the KPI tiles use — is noise at table density, so: a dotted rule at rest, solid under the cursor, drawn in `currentColor` so an overdue figure keeps the colour that is the reason a supervisor is looking at it. */ .num-link { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; } .num-link:hover { text-decoration-style: solid; } button { font-family: inherit; cursor: pointer; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; } ::-webkit-scrollbar-track { background: transparent; } /* ------------------------------------------------- Numerals & display type Every figure the eye compares down a column gets tabular numerals. By default each digit is a different width — a "1" is narrow, a "0" wide — so a column of costs, minutes or counts never lines up on its decimal and has to be re-found row by row instead of scanned. It also stops values that update in place (clocks, badge counts, live KPIs) twitching sideways as their digits change. Set structurally rather than per-view so a new table or tile inherits it without anyone having to remember. Deliberately NOT global: running prose (notes, telex bodies, descriptions, training content) reads better with proportional digits inside a sentence, and the mono face is already fixed-width. */ .table, table.data, table.tbl, table.matrix, .num, .right, .kpi .value, .kpi .delta, .kpi .foot, .kpi .kpi-val, .kpi .kpi-sub, .dash-val, .dash-bar-top, .dash-li, .dash-foot, .badge, .badge-count, .seg-badge, .bell-badge, .suite-count { font-variant-numeric: tabular-nums; } /* Display-size type sets loose at its default tracking — the bigger the type, the more air every pair carries — so large numbers read as separate digits rather than one value. Pull it back in proportion to size. Body and label text is left alone: tightening small text costs legibility, and these screens get read at arm's length on a ramp tablet. */ .kpi .value, .kpi .kpi-val, .dash-val { letter-spacing: -.02em; } .auth-aside-inner h1 { letter-spacing: -.015em; } .page-head h2 { letter-spacing: -.012em; } .topbar h1 { letter-spacing: -.006em; } /* ---------------------------------------------------------------- Layout */ .app { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); transition: width .2s cubic-bezier(.33,1,.68,1), flex-basis .2s cubic-bezier(.33,1,.68,1); background: linear-gradient(180deg, #0c1322, #0a0f1c); border-right: 1px solid var(--border-soft); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding-top: env(safe-area-inset-top, 0px); z-index: 30; } .brand { display: flex; align-items: center; gap: 12px; padding: 20px 20px 16px; } .brand-logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; box-shadow: 0 4px 14px rgba(27, 159, 221, 0.4); } .brand-logo svg { width: 100%; height: 100%; display: block; } .brand-text { line-height: 1.1; } .brand-text b { font-size: 16px; letter-spacing: .3px; } .brand-text span { display: block; font-size: 10.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 1.5px; } .nav { padding: 8px 12px; overflow-y: auto; flex: 1; } .nav-section { margin: 14px 8px 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--text-3); } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--text-2); font-weight: 500; margin: 2px 0; position: relative; transition: background .15s, color .15s; } .nav-item:hover { background: var(--surface); color: var(--text); } .nav-item.active { background: var(--brand-soft); color: #fff; } .nav-item.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 4px; background: var(--brand); } /* Uniform flat-line icon rendering across the whole app (sidebar, hubs, launcher). */ .ico { stroke-linecap: round; stroke-linejoin: round; } /* A module page title now draws the same flat SVG the sidebar does. `.ico` carries no intrinsic size — every other use sizes it by context — so without this the 24×24 viewBox renders at whatever the browser picks rather than at heading size. */ .page-h2-ico { display: flex; align-items: center; gap: 9px; } .page-h2-ico .ico { width: 22px; height: 22px; flex: 0 0 22px; opacity: .85; } .nav-item .ico { width: 20px; height: 20px; flex: 0 0 20px; opacity: .9; } .nav-item .badge-count { margin-left: auto; background: var(--surface-3); color: var(--text-2); font-size: 11px; padding: 1px 8px; border-radius: 20px; font-weight: 600; } .nav-item.active .badge-count { background: var(--brand-fill); color: #fff; } /* ---- Department accordion (collapsible nav groups + landing hubs) ---- */ .nav-dept { margin: 2px 0; } .nav-dept-head { display: flex; align-items: center; border-radius: 10px; } .nav-dept-head:hover { background: var(--surface); } .nav-dept-head.active { background: color-mix(in srgb, var(--brand), transparent 88%); } .nav-dept-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 10px 12px; color: var(--text-2); font-weight: 600; transition: color .15s; } .nav-dept-link:hover { color: var(--text); } .nav-dept-head.active .nav-dept-link { color: var(--brand); } .nav-dept-ico { width: 20px; flex: 0 0 20px; display: grid; place-items: center; } .nav-dept-ico .ico { width: 19px; height: 19px; opacity: .95; } /* Wrap, never ellipsise: a primary-nav label with letters missing reads broken, and font metrics differ enough per OS that a nowrap label sized to fit here clips there. */ .nav-dept-label { overflow-wrap: break-word; line-height: 1.25; min-width: 0; } .nav-dept-toggle { background: none; border: 0; color: var(--text-3); cursor: pointer; padding: 8px 4px; display: grid; place-items: center; border-radius: 8px; transition: transform .2s, color .15s; } .nav-dept-toggle:hover { color: var(--text); background: var(--surface-2); } .nav-dept.open > .nav-dept-head .nav-dept-toggle { transform: rotate(90deg); } /* Animate open/closed without knowing the child height (grid 0fr → 1fr). */ .nav-dept-kids { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.33,1,.68,1); } .nav-dept.open > .nav-dept-kids { grid-template-rows: 1fr; } .nav-dept-kids-inner { overflow: hidden; margin: 2px 0 4px 24px; padding-left: 8px; border-left: 1px solid var(--border-soft); /* Ride along with the row-track animation: content drifts down and fades in as the track opens, instead of standing fully-formed inside a growing window. */ opacity: 0; transform: translateY(-4px); transition: opacity .22s ease .06s, transform .28s cubic-bezier(.33,1,.68,1); } .nav-dept.open > .nav-dept-kids > .nav-dept-kids-inner { opacity: 1; transform: none; } .nav-item.nav-child { padding: 8px 10px; font-size: 13px; margin: 1px 0; } .nav-item.nav-child.active::before { left: -9px; } /* Nested sub-accordion (e.g. Cargo Reference inside Cargo) — sits in the child list, so it indents relative to its parent's rail rather than starting a new one. */ .nav-subdept { margin: 2px 0; } .nav-subdept > .nav-dept-head { padding-left: 2px; } .nav-subdept > .nav-dept-head .nav-dept-label { font-size: 12.5px; } .nav-subdept > .nav-dept-kids .nav-dept-kids-inner { margin-left: 14px; } /* The whole head row is the accordion control now (open AND close), so it must read clickable. */ .nav-dept-head { cursor: pointer; } /* ---- The rail: the sidebar collapsed to its icons -------------------------------------- */ /* 296px of navigation is a fifth of a 14" laptop, and an operations table is seventeen columns. Which of those matters more is not a property of the screen — it is a property of the shift. Someone learning the product needs the labels; someone who has read this nav four hundred times needs the width. So it is a toggle with a remembered answer, not a breakpoint that decides for them. The width lives in ONE place (`--sidebar-w`), so the rail is a variable override rather than a second set of layout rules to keep in step with the first. */ body.nav-rail { --sidebar-w: 72px; } /* Everything that is words rather than a shape. The child lists go too: there is no width to render them at, and the category icon navigates to the department hub instead — see `toggleDept` in app.js, which stops toggling an accordion nobody can see. */ body.nav-rail .sidebar .brand-text, body.nav-rail .sidebar .nav-item > span:not(.badge-count), body.nav-rail .sidebar .nav-dept-label, body.nav-rail .sidebar .nav-dept-toggle, body.nav-rail .sidebar .nav-dept-kids, body.nav-rail .sidebar .user-hub-who, body.nav-rail .sidebar .user-hub-chev { display: none; } body.nav-rail .sidebar .brand { padding: 20px 0 16px; justify-content: center; } body.nav-rail .sidebar .nav { padding: 8px 10px; } body.nav-rail .sidebar .nav-item, body.nav-rail .sidebar .nav-dept-link { justify-content: center; gap: 0; padding: 11px 0; } body.nav-rail .sidebar .nav-item.active::before { left: -10px; } body.nav-rail .sidebar .user-hub { padding-left: 0; padding-right: 0; } body.nav-rail .sidebar .user-hub-btn { justify-content: center; padding: 10px 0; } /* A POPOVER IS NOT NAVIGATION, so it does not shrink with the rail. `.user-menu` is pinned `left:10px; right:10px` — the sidebar's own width — which is a comfortable card at 296px and about fifty pixels at 72: "Profile & account" wrapped over three lines, the email ellipsed to "j...", and the three appearance buttons ran off the edge. Everything else in this block is hidden because there is genuinely no width to render it at; a menu that floats has its own width and needs to step OUTSIDE the rail rather than be squeezed into it. Anchored to the hub's bottom so it still reads as belonging to the avatar it came from. `.sidebar` sets no `overflow`, which is what lets this leave. */ body.nav-rail .sidebar .user-menu { left: calc(100% + 8px); right: auto; width: 272px; bottom: 8px; } /* A workload count still has to reach the eye, and `margin-left:auto` would push it off a 72px row. Ride it on the icon's corner instead — the same place a phone puts one. */ body.nav-rail .sidebar .nav-item { position: relative; } body.nav-rail .sidebar .nav-item .badge-count { position: absolute; top: 4px; right: 10px; margin-left: 0; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; text-align: center; } /* Styled ONLY here: at full width the child row already carries `.active`, and tinting its parent as well would highlight two rows for one destination. */ body.nav-rail .sidebar .nav-dept-head.holds { background: color-mix(in srgb, var(--brand), transparent 88%); } body.nav-rail .sidebar .nav-dept-head.holds .nav-dept-link { color: var(--brand); } /* THE LABEL THE RAIL TOOK AWAY. Fixed, not absolute: `.nav` scrolls, and a scroll container clips both axes the moment one of them is not `visible` — an `::after` on the row is drawn entirely inside the 72px column and never seen. Positioned from JS off the row's rect. Not `pointer-events: none` alone — the tip is never under the cursor, since it sits 10px clear of the sidebar's right edge; the property is there so a fast diagonal mouse cannot land on it and flicker the row's own mouseout. */ .nav-tip { position: fixed; z-index: 90; left: -9999px; top: -9999px; padding: 7px 11px; border-radius: 9px; background: var(--surface-3); color: var(--text); border: 1px solid var(--border-soft); box-shadow: 0 8px 24px rgba(0, 0, 0, .38); font-size: 12.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .1s ease; } .nav-tip.open { opacity: 1; } @media (prefers-reduced-motion: reduce) { .nav-tip { transition: none; } } /* No flyout on a phone: there is no rail there, and a tip anchored to a drawer row would sit over the content the drawer is covering. */ @media (max-width: 900px) { .nav-tip { display: none; } } @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } } /* ------------------------------------------------------------- Busy overlay */ /* Blocks all interaction while a slow, non-repeatable action runs (e.g. sending an invite via an external SMTP relay). Above the modal layer so it also covers a form. */ .busy-overlay { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; background: rgba(6, 10, 20, .62); backdrop-filter: blur(3px); opacity: 0; transition: opacity .16s ease; cursor: progress; } .busy-overlay.open { opacity: 1; } .busy-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 34px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 18px 50px rgba(0,0,0,.45); min-width: 240px; } .busy-msg { font-size: 14.5px; font-weight: 650; color: var(--text); text-align: center; } .busy-sub { font-size: 12px; color: var(--text-3); text-align: center; max-width: 280px; line-height: 1.5; } @media (prefers-reduced-motion: reduce) { .busy-overlay { transition: none; } } /* ------------------------------------------------ Customisable home dashboard */ /* 12-column block grid with a FIXED row unit, and every block explicitly placed. --x/--y are the block's 1-based column and row; --w/--h its span. Explicit placement is the whole point. Under auto-placement a tile's position was decided by the browser from the sizes of the tiles before it, so two tiles spanning different row counts left holes their owner could not close: measured on a real board, 16% of the grid was empty cells, and neither `grid-auto-flow: dense` nor a fixed row unit moved that number at all. The row unit has to be fixed for --y to mean anything — an auto-sized row is as tall as whatever landed in it, so "row 6" would be a different place on every board. The unit is 132px: one row holds a stat tile's chrome + big number + label + foot without clipping, which is what makes h:1 a usable size rather than a broken one. */ .dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: var(--dash-row, 132px); gap: 14px; align-items: stretch; } .dash-block { grid-column: var(--x, auto) / span var(--w, 3); grid-row: var(--y, auto) / span var(--h, 1); min-width: 0; } .dash-card { height: 100%; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px 15px; min-width: 0; overflow: hidden; } /* min-height matches .dash-tool's 22px: the head reserves room for the edit controls even when it is only showing a title, so entering and leaving edit mode does not change any tile's content height. Without it every tile is 9px shorter in view mode, each auto-sized row shrinks with it, and the board you arranged is not the board you get back. */ .dash-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex: 0 0 auto; min-height: 22px; } .dash-title { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-open { margin-left: auto; font-size: 11.5px; color: var(--brand); text-decoration: none; flex: 0 0 auto; } .dash-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .dash-na { font-size: 12.5px; display: grid; place-items: center; flex: 1; } .dash-foot { font-size: 11px; margin-top: 6px; } /* stat */ .dash-stat { display: flex; flex-direction: column; justify-content: center; flex: 1; } .dash-val { font-size: 30px; font-weight: 800; line-height: 1.1; } .dash-lab { font-size: 12.5px; color: var(--text-2); margin-top: 2px; } /* breakdown (labelled bars) */ .dash-bars { display: flex; flex-direction: column; gap: 9px; overflow: auto; flex: 1; } .dash-bar-row { flex: 0 0 auto; } .dash-bar-top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; } /* list */ .dash-list { display: flex; flex-direction: column; gap: 2px; overflow: auto; flex: 1; } .dash-li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: var(--text-2); font-size: 12.5px; } a.dash-li:hover { background: var(--surface-2); color: var(--text); } .dash-li-main { min-width: 0; display: flex; flex-direction: column; flex: 1; } .dash-li-main b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-li-main span { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* links (quick actions) */ .dash-links { display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start; overflow: auto; flex: 1; } .dash-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border-soft); color: var(--text-2); font-size: 12.5px; text-decoration: none; } .dash-link:hover { background: var(--surface-3); color: var(--text); border-color: var(--border); } .dash-link-ico { display: grid; place-items: center; } /* loading skeleton */ .dash-card.loading { justify-content: center; } .dash-skel { height: 30px; border-radius: 8px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: dashSkel 1.1s linear infinite; } @keyframes dashSkel { from { background-position: 200% 0; } to { background-position: -200% 0; } } .dash-empty { grid-column: span 12; } /* edit mode */ .dash-grid.editing .dash-card { border-style: dashed; border-color: var(--brand); cursor: grab; } .dash-block.dragging { opacity: .45; } /* Where the tile will land. Occupies a real grid cell, so it shows the exact footprint rather than a hint — the point of storing positions is that the drop is aimed, not approximated. */ .dash-ghost { grid-column: var(--x, auto) / span var(--w, 3); grid-row: var(--y, auto) / span var(--h, 1); border: 2px dashed var(--brand); border-radius: 14px; background: color-mix(in srgb, var(--brand) 9%, transparent); pointer-events: none; } .dash-tools { margin-left: auto; display: flex; gap: 2px; flex: 0 0 auto; } .dash-tool { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text-3); font-size: 12px; line-height: 1; cursor: pointer; display: grid; place-items: center; } .dash-tool:hover { background: var(--surface-3); color: var(--text); } .dash-tool.danger:hover { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger); } /* add-tile picker */ .dash-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .dash-pick-item { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; text-align: left; } .dash-pick-item:hover { border-color: var(--brand); background: var(--surface-3); } .dash-pick-item b { font-size: 13px; } .dash-pick-item span.muted { font-size: 11px; } .dash-pick-item.on { border-color: var(--ok); } /* Narrow screens drop back to FLOW and ignore --x/--y: a board arranged for 12 columns has positions that are meaningless at 6, and honouring them would leave a column of holes. Heights stay auto here so nothing is clipped on a phone. */ @media (max-width: 1100px) { .dash-grid { grid-auto-rows: minmax(var(--dash-row, 132px), auto); } .dash-block { grid-column: auto / span min(var(--w, 3), 6); grid-row: auto / span var(--h, 1); } } @media (max-width: 760px) { .dash-grid { grid-template-columns: repeat(6, 1fr); } .dash-block { grid-column: auto / span 6; grid-row: auto / span var(--h, 1); } } /* --------------------------------------------- User hub (bottom-left, Discord-style) */ .user-hub { position: relative; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border-soft); } .user-hub-btn { width: 100%; display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 10px; background: none; border: 1px solid transparent; color: var(--text); cursor: pointer; text-align: left; } .user-hub-btn:hover { background: var(--surface-2); border-color: var(--border-soft); } .user-hub-avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: var(--brand-fill); color: #fff; font-size: 12px; font-weight: 800; overflow: hidden; } .user-hub-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-hub-who { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.2; } .user-hub-who b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-hub-who span { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-hub-chev { color: var(--text-3); display: grid; place-items: center; transform: rotate(-90deg); flex: 0 0 auto; } .user-menu { position: absolute; bottom: calc(100% - 2px); left: 10px; right: 10px; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.34); padding: 6px; animation: umIn .12s ease-out; } @keyframes umIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .user-menu-head { padding: 9px 10px 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 5px; display: flex; flex-direction: column; } .user-menu-head b { font-size: 13px; } .user-menu-head span { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border-radius: 8px; background: none; border: 0; color: var(--text-2); font-size: 13px; cursor: pointer; text-decoration: none; text-align: left; } .user-menu-item:hover { background: var(--surface-2); color: var(--text); } .user-menu-item.danger:hover { background: var(--danger-soft); color: var(--danger-ink); } .user-menu-theme { padding: 8px 10px 4px; border-top: 1px solid var(--border-soft); margin-top: 5px; } .user-menu-theme-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); } .tsegs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 6px; } .tseg { padding: 6px 4px; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text-3); font-size: 11.5px; font-weight: 600; cursor: pointer; } .tseg:hover { color: var(--text); } .tseg.active { background: var(--brand-fill); border-color: var(--brand); color: #fff; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ------------------------------------------------------------- Top bar */ .topbar { min-height: 64px; display: flex; align-items: center; gap: 16px; /* top inset keeps the header clear of the notch / Dynamic Island (viewport-fit=cover) */ padding: calc(env(safe-area-inset-top, 0px) + 6px) 24px 6px; border-bottom: 1px solid var(--border-soft); background: rgba(14, 19, 32, 0.85); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; } /* the title block shrinks + ellipsises instead of wrapping a long module blurb and shoving the search / user pill (which were getting squished) */ .topbar-title { min-width: 0; flex: 0 1 auto; } .topbar h1 { font-size: 18px; margin: 0; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar .sub { color: var(--text-3); font-size: 12.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar .spacer { flex: 1; min-width: 8px; } .scan-btn, .bell-btn, .theme-btn, .agent-pill { flex-shrink: 0; } .global-search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; height: var(--control-h); padding: 0 12px; width: 320px; max-width: 34vw; } .global-search input { background: none; border: none; color: var(--text); outline: none; width: 100%; font-size: 13px; } .global-search input::placeholder { color: var(--text-3); } .agent-pill { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 30px; padding: 5px 14px 5px 5px; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--info), var(--purple)); display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 13px; } .agent-pill .who { line-height: 1.2; display: flex; flex-direction: column; } .agent-pill .who b { font-size: 13px; display: block; } .agent-pill .who span { font-size: 11px; color: var(--text-3); display: block; margin-top: 1px; } /* --------------------------------------------------------------- Content */ .content { padding: 24px; flex: 1; } .page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .page-head h2 { margin: 0; font-size: 22px; font-weight: 680; } .page-head p { margin: 4px 0 0; color: var(--text-3); font-size: 13px; } /* ---------------------------------------------------------------- Cards */ .grid { display: grid; gap: 16px; } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } .cols-5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1200px) { .cols-4 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(2, 1fr); } .cols-5 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .grid[class*="cols"] { grid-template-columns: 1fr; } } .card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); } .card.pad-0 { padding: 0; overflow: hidden; } .card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .card-head h3 { margin: 0; font-size: 15px; font-weight: 640; } .card-head .spacer { flex: 1; } .card-sub { color: var(--text-3); font-size: 12px; } /* pad-0 cards (PRM flights/agents boards) had ZERO head padding on desktop — the title was jammed into the top-left corner and the buttons into the top-right, flush to the card edges. Give the head the same gutter the app's other card headers use. (The ≤640px block below keeps its own tighter mobile gutter.) */ .card.pad-0 > .card-head { padding: 14px 16px 6px; } /* KPI */ .kpi { position: relative; overflow: hidden; } /* A LINKED KPI SAYS SO AT REST. `a.card` further down already lifts on hover, and the comment there is right that a lift means "this does something" — but hover is not an affordance on a tablet, and in a row of six tiles three link and three cannot. A quiet chevron marks the ones that do, in an icon from the registry so it takes `currentColor` and follows the theme. */ .kpi.linked { color: inherit; text-decoration: none; display: block; } .kpi-go { position: absolute; right: 14px; bottom: 12px; color: var(--text-3); opacity: .5; display: grid; place-items: center; transition: opacity .16s var(--ease), transform .16s var(--ease); } .kpi-go .ic-inline { width: 16px; height: 16px; margin-right: 0; } .kpi.linked:hover .kpi-go { opacity: 1; transform: translateX(2px); } .kpi .label { color: var(--text-3); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; } .kpi .value { font-size: 34px; font-weight: 760; margin: 8px 0 2px; line-height: 1; } .kpi .value .unit { font-size: 15px; font-weight: 600; color: var(--text-3); letter-spacing: 0; } .kpi .delta { font-size: 12.5px; font-weight: 600; } .kpi .ico-wrap { position: absolute; right: 16px; top: 16px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; } /* The chip's icon fills the chip, not the 1.05em an inline icon gets in running text. */ .kpi .ico-wrap .ic-inline { width: 22px; height: 22px; margin-right: 0; } .kpi .foot { color: var(--text-3); font-size: 12px; margin-top: 6px; } /* --------------------------------------------------------------- Badges */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 650; white-space: nowrap; text-transform: capitalize; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.ok { background: var(--ok-soft); color: var(--ok-ink); } .badge.warn { background: var(--warn-soft); color: var(--warn-ink); } .badge.danger { background: var(--danger-soft); color: var(--danger-ink); } /* Composer reach line: a measured zero is a refusal to send, not a styling nicety. */ .reach-none { color: var(--danger-ink); font-weight: 600; } .badge.info { background: var(--info-soft); color: var(--info-ink); } .badge.purple { background: var(--purple-soft); color: var(--purple-ink); } .badge.teal { background: var(--teal-soft); color: var(--teal-ink); } .badge.grey { background: var(--surface-3); color: var(--text-2); } .badge.brand { background: var(--brand-soft); color: var(--brand-ink); } .badge.accent { background: var(--accent-soft); color: var(--accent-ink); } /* Case-type tags */ .tag-type { font-family: var(--mono); font-weight: 700; font-size: 11px; padding: 2px 7px; border-radius: 6px; letter-spacing: .5px; white-space: nowrap; } .tag-AHL { background: var(--danger-soft); color: var(--danger-ink); } .tag-OHD { background: var(--info-soft); color: var(--info-ink); } .tag-DPR { background: var(--warn-soft); color: var(--warn-ink); } /* Pilferage reads as theft, not wear — it gets the danger palette rather than DPR's amber so the two are not mistaken for each other at a glance on a mixed queue. */ .tag-PIL { background: var(--danger-soft); color: var(--danger-ink); } .tag-QUICK_RUSH { background: var(--purple-soft); color: var(--purple-ink); } .tag-FP { background: var(--teal-soft); color: var(--teal-ink); } .tag-BDO { background: var(--accent-soft); color: var(--accent-ink); } /* --------------------------------------------------------------- Tables */ .table-wrap { overflow-x: auto; } /* ---- RECORD CARDS — the module list on a phone ------------------------------------ The desktop table is right at desktop density and unusable at 375px: a dozen columns dragged sideways to read. Same rows, same filters, same drawer — a shape you can read with one thumb. See Views.module.drawCards. */ .rec-cards { display: flex; flex-direction: column; gap: 10px; } .rec-card { width: 100%; text-align: left; display: block; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; color: var(--text); -webkit-tap-highlight-color: transparent; } .rec-card:active { transform: scale(.995); } .rc-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; } .rc-id { flex: 1; min-width: 0; } .rc-title { display: block; font-size: 16px; font-weight: 650; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-ref { display: block; font-size: 13px; color: var(--text-3); margin-top: 2px; } /* Two across: a label/value pair needs the width, and three columns truncates every value. */ .rc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-bottom: 10px; } .rc-f { min-width: 0; } .rc-f i { display: block; font-style: normal; font-size: 13px; color: var(--text-3); line-height: 1.2; } .rc-f b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-foot { display: flex; align-items: center; gap: 8px; } .rc-when { margin-left: auto; font-size: 13px; white-space: nowrap; } /* A long single value (a description) gets the full width rather than half of it. */ .rc-fields .rc-f:only-child { grid-column: 1 / -1; } @media (max-width: 760px) { /* The record toolbar is a desktop toolbar: segments, a search box, several dropdowns, bulk-edit and a view toggle, all on one line. Let it stack, give the search the full width it needs, and drop the Table/Board toggle — on a phone the answer is cards either way, so offering the choice is offering a lie. */ .filters .global-search { width: 100% !important; order: -1; } .filters .loc-filter { flex: 1 1 44%; min-width: 0; } .filters .spacer { display: none; } .filters .seg.view-toggle { display: none; } } /* Generic detail table (contract drawer, sub-lists, etc.). Previously unstyled — cells fell back to the browser's ~1px default, which read as cramped. */ .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th { text-align: left; font-weight: 640; color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 11px 15px; border-bottom: 1px solid var(--border); white-space: nowrap; } .table td { padding: 12px 15px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: var(--surface-2); } table.data { width: 100%; border-collapse: collapse; font-size: 13px; } table.data th { text-align: left; padding: 12px 16px; color: var(--text-3); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; background: var(--surface); } /* Sortable column headers. The engine could not sort at all — every module list was newest-first and nothing else was reachable — and clicking a header is the habit every incumbent in this market trains (Cargospot binds Ctrl+S to "sort by the focused field"). Keyboard-reachable, because a header only a mouse can use re-creates the problem one step along. */ table.data th.sortable { cursor: pointer; user-select: none; white-space: nowrap; } table.data th.sortable:hover { color: var(--text); } table.data th.sortable:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } table.data th.sortable.sorted { color: var(--brand-ink); } table.data th .sort-ar { font-size: 9px; margin-left: 4px; vertical-align: 1px; } table.data td { padding: 14px 18px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } /* ONE LINE PER CELL, BECAUSE ONE CELL WAS SETTING THE HEIGHT OF THE WHOLE ROW. A turnaround's IATA delay reason is a sentence — "87 Airport facilities, parking stands, ramp congestion, gate limitations" — and it wrapped to five lines, so seven rows filled a screen that holds twenty. The horizontal scroll on a seventeen-column operations table is the lesser problem; the vertical space was the expensive one. THE CLAMP IS ON A SPAN, NOT ON THE `td`. `max-width` on a table cell is ignored under `table-layout: auto`, which this table uses — the browser sizes columns from content and the declaration does nothing. An inner block-level span is the element the width can actually apply to. NOTHING IS LOST: the renderer puts the full value in the cell's `title`, so it is one hover away, and the record drawer shows it in full. */ table.data td > .cell { display: block; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A cell that is already a control, a badge or a chip sizes itself — clamping those would cut a status pill in half. Only free text is clamped. */ table.data td > .cell.wide { max-width: 44ch; } /* AN ANCHOR WHEN THE TABLE IS SCROLLED SIDEWAYS. Seventeen columns do not fit a 14" screen at a readable size, and shrinking them is the wrong trade for a screen read at a glance in a bright ramp office. What makes the scroll navigable rather than disorienting is keeping the record's identity in view: scrolled right, every row was otherwise an anonymous grid of times. The background is opaque and matches the row, or the scrolled content shows through it. The hover and zebra rules below re-state it for the same reason. */ table.data th.stick, table.data td.stick { position: sticky; left: 0; z-index: 2; background: var(--surface); /* Hairline AND a soft drop: at any scroll offset SOME column is half-covered by this one, and without the depth cue a clipped word ("...ESTONE") reads as corrupt data rather than as content passing underneath. */ box-shadow: 1px 0 0 var(--border-soft), 6px 0 8px -6px rgba(0, 0, 0, .35); } table.data tbody tr:hover td.stick { background: var(--surface-2); } /* THE ACTION IS PINNED TO THE OTHER EDGE, for the same reason and the opposite direction. The Team register runs eight columns; measured at 1280px the "Create account" button — the whole remedy for the gap the screen exists to flag — sat at x=1476, so the reader had to scroll right past every row to reach it and lost the name they were acting on. Its shadow points the other way because the content passes underneath from the left. */ table.data th.stick-r, table.data td.stick-r { position: sticky; right: 0; z-index: 2; background: var(--surface); box-shadow: -1px 0 0 var(--border-soft), -6px 0 8px -6px rgba(0, 0, 0, .35); } table.data tbody tr:hover td.stick-r { background: var(--surface-2); } /* A PERSON WHO CANNOT SIGN IN IS A GAP, NOT A ROW. Staff sign in to the handheld to work their duties, so an account is what makes a roster entry operable — the register marks the ones that are not, quietly enough to scan past twenty of them and clearly enough to act on one. `--warn-fill` rather than `--warn`: every small use goes through the ink/fill pair, because the bare hue does not carry on this surface. */ table.data tbody tr.gap-row td:first-child { box-shadow: inset 3px 0 0 var(--warn-fill); } /* The row hover rule below is unconditional and says "clickable". A login with no person behind it has nothing to open, so it must not claim otherwise. */ table.data tbody tr.not-clickable { cursor: default; } table.data tbody tr { transition: background .12s; } table.data tbody tr:hover { background: var(--surface-2); cursor: pointer; } table.data tbody tr:last-child td { border-bottom: none; } /* Compact in-card table used by module custom widgets (catalogue, ledgers, boards). Fills its card on desktop; wrap it in .table-wrap (overflow-x:auto) so wide tables scroll inside the card on narrow/mobile viewports instead of pushing the whole page sideways. */ table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; } table.tbl th { text-align: left; padding: 8px 12px; color: var(--text-3); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); white-space: nowrap; } table.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } table.tbl tbody tr { transition: background .12s; } table.tbl tbody tr:hover { background: var(--surface-2); } table.tbl tbody tr:last-child td { border-bottom: none; } .mono { font-family: var(--mono); font-size: 12.5px; } /* A reference in a table cell ("QRH-260808-61140") breaks at its hyphens when the browser squeezes the column, splitting an ID a person needs to read as one token. The wrap belongs to .table-wrap's horizontal scroll, not inside the reference. */ td.mono, th.mono { white-space: nowrap; } .muted { color: var(--text-3); } .nowrap { white-space: nowrap; } /* --------------------------------------------------------------- Buttons */ .btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); height: var(--control-h); padding: 0 16px; border-radius: 10px; font-weight: 600; font-size: 13px; transition: background .15s, border-color .15s, transform .05s; } .btn:hover { background: var(--surface-3); } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--brand-fill); border-color: var(--brand); color: #fff; } /* A COUNT INSIDE A FILLED BUTTON CANNOT KEEP ITS OWN INK. `.badge.warn` is amber on a translucent amber wash — right on a card, and on a filled primary the wash goes blue and leaves amber text on blue. The gap chips carry their count that way, so clicking "cannot sign in" made the number it exists to state the least readable thing on it. Any tone badge inside a primary button borrows the button's own colours instead, and keeps its pill shape from a border rather than a fill. THE FILL IS `--brand-fill` AND NOT A TRANSLUCENT WASH, which is what this first shipped as. White on `rgba(255,255,255,.22)` cannot be measured — the answer depends on what is behind it — and `tests/test_contrast.py` scored it 3.20, correctly. White on `--brand-fill` is the button's own pairing, already tuned to clear AA in both themes. */ .btn.primary .badge { background: var(--brand-fill); color: #fff; border: 1px solid rgba(255, 255, 255, .5); } .btn.primary:hover { background: var(--brand-dark); } .btn.ok { background: var(--ok); border-color: var(--ok); color: var(--ok-on); } .btn.ghost { background: transparent; } /* The compact and large variants set their own height rather than inheriting the toolbar one — they exist precisely to break out of that rhythm (inline row actions, primary calls to action). */ .btn.sm { height: 28px; padding: 0 11px; font-size: 12px; } /* One step below `sm`, for a button that lives in a table cell. Written in commercial and PRM fourteen times and defined nowhere, so every one of them rendered at the full 34px default — a row of chunky buttons down the right-hand edge of a data table. */ .btn.xs { height: 24px; padding: 0 9px; font-size: 11.5px; } .btn.lg { height: 44px; padding: 0 22px; font-size: 15px; } .btn:disabled { opacity: .5; pointer-events: none; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; } /* --------------------------------------------------------------- Forms */ /* THE BASE RULE IS ON THE ELEMENT, NOT A CLASS. Only `.field input` was styled, so a control was themed if — and only if — someone remembered to wrap it in a .field. 634 inputs, selects and textareas across the views carry no class at all, and every one of them was rendering as a raw browser control: native border, native height, square corners, ignoring the theme entirely. Two of the six that DID carry `class="input"` were reaching for a class that has never existed. Styling the element fixes all of them at once and makes the next one correct by default. Everything that already styles inputs (.field, .input-affix, .sla-row, body.hh-mode) is a class or descendant selector, so it still outranks this. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea, .input { font: inherit; font-size: 13.5px; font-family: inherit; color: var(--text); background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 12px; height: var(--control-h); outline: none; min-width: 0; max-width: 100%; transition: border-color .15s, box-shadow .15s, background .15s; } /* A textarea is the one control that must NOT be locked to the toolbar height. */ textarea { height: auto; min-height: 76px; padding: 9px 12px; line-height: 1.5; resize: vertical; } input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--text-3); } /* Focus reads as a soft ring in the brand colour rather than the UA's hard outline — the same language the buttons use. */ input:focus, select:focus, textarea:focus, .input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; background: var(--surface-3); } input::placeholder, textarea::placeholder { color: var(--text-3); } /* A value a MACHINE read, which nobody has confirmed yet. The document scanner used to invent a passenger name and passport number and prefill this form with them at 99% confidence — indistinguishable, on screen, from something the agent had typed. A scanned value now looks unconfirmed until the agent touches the field, and the tint is on the CONTROL rather than on a class the markup has to remember, because 600+ inputs across the views carry no class at all. */ input.from-scan, select.from-scan, textarea.from-scan { border-color: var(--warn); background: var(--warn-soft); } input.from-scan:focus, select.from-scan:focus, textarea.from-scan:focus { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); } /* Native chevron differs per OS and ignores the theme; draw our own, as .field select already did, and reserve the room for it. */ select { appearance: none; -webkit-appearance: none; cursor: pointer; /* line-height 1 clipped descenders inside the fixed-height control */ padding: 0 32px 0 12px; line-height: normal; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } select option { background: var(--surface); color: var(--text); } /* THE TOGGLES ARE DRAWN HERE, NOT BY THE OS. `accent-color` paints the CHECKED fill and nothing else, so an unchecked box kept the platform's own chrome: a white square with a grey hairline on a #141b2d surface, at whatever size and corner radius the OS felt like, and a different shape on macOS, Windows and Android. On the Access dialog that is a column of forty of them, none of them ours. Drawing the box is the only way to theme the UNchecked state, which is the state most of them are in. ON THE ELEMENT, not a class: 73 of these across twenty views, in twenty-two different label shapes, and fifteen of them are a bare