/* ============================================================================
operator-xnet.css — Liva Operator Platform · XNet design system (v1)
----------------------------------------------------------------------------
The new operator design language, extracted faithfully from the approved
"XNet Operator Platform" mockup (2026-07-18). Flat, editorial, near-square,
Barlow / Barlow Condensed, slate-blue accent, crosshair registration marks,
master-detail drawers, KPI stat tiles and a command bar.
This layer is ADDITIVE and self-contained: it defines its own `--x-*` token
namespace (so it never fights the legacy `--lv-*` layer) and is scoped under
the `.xnet` root class that inc_header sets on . Legacy pages that do
NOT carry `.xnet` are untouched, so the rollout can proceed page-by-page.
Companion doc: docs/operator-modernization/OP-XNET-design-system.md
========================================================================== */
/* ----- Fonts (loaded via in inc_header; Kanit kept as fallback) ---- */
:root {
/* Surfaces */
--x-bg: #f2f2f3; /* app canvas */
--x-surface: #ffffff; /* cards / panels */
--x-surface-2: #f5f5f8; /* subtle inset panel */
--x-surface-3: #e9e9ea; /* topbar / raised chrome */
--x-tint: #eef6ff; /* primary tint — copilot / selected row */
/* Ink */
--x-ink: #1d1f20; /* primary text */
/* ⭐ TEXT SCALE REBUILT SO ALL THREE TIERS CLEAR AA. Measured against the eight neutral
grounds these tokens actually render on (white, #f5f5f8, #f6f6f6, #f2f2f3 light;
#1e2124, #24282c, #2b3035, #16181a dark).
⛔ THE TERTIARY TIER COULD NOT SURVIVE AA AT ITS OLD VALUE. At .42 its worst ground was
2.54; the AA floor is .63 — which was EXACTLY the secondary's value, so enforcing AA
collapsed the two tiers into one indistinguishable pair. Shifting the whole scale is the
only arrangement where three tiers exist AND all three pass.
light tertiary .64 (4.78-4.99) · secondary .80 (8.06-8.65) · primary 1.0 (14.79-16.55)
dark tertiary .58 (4.79-5.65) · secondary .78 (7.32-9.25) · primary 1.0 (10.95-14.63)
⚠ Secondary text darkens. That is the cost, it is deliberate, and it only ever RAISES
contrast — no consumer of either token can be made worse by it on a neutral ground. */
--x-ink-2: rgba(29,31,32,.80); /* secondary */
/* ⭐ .62 -> .63 on 2026-08-31. At .62 the secondary ink measured 4.49:1 on the footer
ground (#f2f2f3) and 4.54 on the inset panel — short of, and sitting right on, the 4.5
line. At .63 the worst ground is 4.63 and the best 4.83. One alpha point is visually
nil and can only ever RAISE contrast, never lower it. */
--x-ink-3: rgba(29,31,32,.64); /* tertiary */
--x-line: rgba(29,31,32,.16); /* divider */
--x-line-2: rgba(29,31,32,.08); /* hairline */
/* Brand — slate blue */
--x-primary: #5980a6;
--x-primary-600: #4a6b8a;
--x-primary-700: #2c455d; /* deep slate — active nav, strong CTAs */
--x-on-primary: #f6f8fb;
/* Status */
--x-success: #1f5f3f; --x-success-bg: #e7f2ec;
--x-warning: #8a5a00; --x-warning-bg: #f6eeda;
--x-danger: #8a2b2b; --x-danger-bg: #f7e2e2;
/* INK tokens — the FOREGROUND halves of --x-primary-700 / --x-danger.
Those two are used in BOTH roles: as a background (with color:#fff) and as a
text colour. Only the text role can follow the theme — flipping the token
itself would turn .x-btn--strong and .modal-header.bg-primary into white on
white. So the foreground gets its own token, and the background keeps the
original. --x-tint-hover exists for the same reason: the hover was a hardcoded
#e4f0ff, which in dark mode put a light background under light ink. */
--x-primary-ink: #2c455d; /* = --x-primary-700 in light; goes light in dark */
--x-danger-ink: #8a2b2b; /* = --x-danger in light; goes light in dark */
--x-tint-hover: #e4f0ff; /* hover partner for --x-tint, per theme */
--x-success-ink: #1f5f3f; /* = --x-success in light; goes light in dark */
--x-warning-ink: #8a5a00; /* = --x-warning in light; goes light in dark */
--x-primary-ink-hover: #1d3448; /* link hover: darker in light, BRIGHTER in dark */
--x-info: #2c455d; --x-info-bg: #eef6ff;
/* Radius — deliberately near-square */
--x-r-sm: 2px;
--x-r-md: 4px;
--x-r-lg: 7px;
--x-r-pill: 999px;
/* Elevation */
--x-shadow-sm: 0 1px 2px rgba(43,43,45,.14);
--x-shadow-md: 0 3px 10px rgba(43,43,45,.14);
--x-shadow-lg: 0 12px 32px rgba(43,43,45,.20);
/* Type */
--x-font-body: "Barlow", system-ui, -apple-system, sans-serif;
--x-font-head: "Barlow Condensed", system-ui, sans-serif;
/* Layout */
--x-rail-w: 232px;
--x-topbar-h: 64px;
--x-gap: 20px;
}
/* ============================================================================
1. Base / reset (scoped to .xnet so legacy pages are untouched)
========================================================================== */
body.xnet {
margin: 0;
background: var(--x-bg);
color: var(--x-ink);
font-family: var(--x-font-body);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.xnet h1, .xnet h2, .xnet h3, .xnet h4, .xnet .x-head {
font-family: var(--x-font-head);
font-weight: 600;
letter-spacing: -.01em;
color: var(--x-ink);
margin: 0;
}
.xnet a:not(.x-btn) { color: var(--x-primary-ink); text-decoration: none; }
.xnet a:not(.x-btn):hover { color: var(--x-primary-ink-hover); }
.xnet ::selection { background: rgba(89,128,166,.25); }
/* Eyebrow / small-caps label */
.x-eyebrow {
font-family: var(--x-font-body);
font-size: 10.5px;
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--x-ink-2);
}
/* Page head — title block left, primary action right.
15 templates already mark this up as a two-column header (a title
+ an action), but the
class had NO rule anywhere in css/, so it fell back to display:block and every action stacked
UNDER the title at the left edge. On Inventory > Itinerary that also broke the "New route"
dropdown: .dropdown-menu-right makes Popper place the menu 'bottom-end' (right edge on the
button's right edge), so from a left-hand button the 160px menu opened at x=205 while the rail
ends at x=232 — 27px of it behind the rail, which wins on z-index (1030 > 1000) and clipped the
items. Restoring the intended row puts the button back on the right, inside the content column.
:last-child:not(:first-child) — several pageheads gate their action behind a privilege check
(roles/list.php), and a lone title must not be pushed right when the action isn't rendered. */
.x-pagehead {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.x-pagehead > :last-child:not(:first-child) { margin-left: auto; }
/* ============================================================================
2. App shell — rail + topbar + content
========================================================================== */
.x-app { min-height: 100vh; }
/* ---- Left rail ---- */
.x-rail {
position: fixed;
top: 0; left: 0; bottom: 0;
width: var(--x-rail-w);
background: var(--x-surface);
border-right: 1px solid var(--x-line);
display: flex;
flex-direction: column;
z-index: 1030;
}
.x-rail__brand {
display: flex; align-items: center; gap: 10px;
height: var(--x-topbar-h);
padding: 0 20px;
border-bottom: 1px solid var(--x-line-2);
flex: 0 0 auto;
}
.x-rail__logo {
width: 30px; height: 30px; border-radius: var(--x-r-md);
background: var(--x-primary-700); color: #fff;
display: grid; place-items: center;
font-family: var(--x-font-head); font-weight: 600; font-size: 16px;
flex: 0 0 auto;
}
/* The rail brand is the OPERATOR's identity (their logo + company name), not the
platform's. When the vendor has an uploaded logo we show it plain — no coloured
tile behind it, since an operator logo carries its own background. Without one we
fall back to the initial-letter tile above. */
.x-rail__logo--img { background: transparent; overflow: hidden; }
.x-rail__logo--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.x-rail__brand-name {
font-family: var(--x-font-head); font-weight: 600; font-size: 21px;
letter-spacing: -.01em;
/* Operator names are arbitrary length and the rail is ~250px (user-resizable),
so the name truncates instead of wrapping the 56px-tall brand row. */
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.x-rail__nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 12px; }
.x-rail__foot { flex: 0 0 auto; padding: 12px; border-top: 1px solid var(--x-line-2); }
.x-nav-item {
display: flex; align-items: center; gap: 12px;
padding: 9px 12px;
margin-bottom: 2px;
border-radius: var(--x-r-md);
color: var(--x-ink-2);
font-weight: 500;
cursor: pointer;
position: relative;
transition: background .12s, color .12s;
}
.x-nav-item .feather { width: 18px; height: 18px; stroke-width: 2; }
.x-nav-item:hover { background: var(--x-surface-2); color: var(--x-ink); }
.x-nav-item.is-active {
background: var(--x-primary-700);
color: #fff;
}
.x-nav-item.is-active .feather { color: #fff; }
.x-nav-item__badge {
margin-left: auto;
background: var(--x-danger); color: #fff;
font-family: var(--x-font-head); font-weight: 600;
font-size: 11px; line-height: 1;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: var(--x-r-pill);
display: inline-flex; align-items: center; justify-content: center;
}
/* QA F1. White on this badge measured 4.49 against a 4.5 bar - it MISSED, by 0.01, and the
live audit could never see it because .x-nav-item__badge only renders when its counter is
non-zero and no counter was non-zero on the tier. The lighter the veil, the worse the
contrast, so the fix is LESS white, not more. .22 gives 5.27; .26 would have cleared the bar
at 4.75 but a fix sitting a quarter of a point above the line is one token nudge from
failing again, and this one already arrived at 4.49 that way. */
.x-nav-item.is-active .x-nav-item__badge { background: rgba(255,255,255,.22); }
/* Collapsible nav sections (transition: sub-pages until pages consolidate) */
.x-nav-sect { cursor: pointer; }
.x-nav-sect .x-nav-caret { margin-left: auto; width: 16px; height: 16px; transition: transform .15s; color: var(--x-ink-3); }
.x-nav-item__badge + .x-nav-caret { margin-left: 8px; }
.x-nav-sect[aria-expanded="true"] .x-nav-caret, .x-nav-sect.x-open .x-nav-caret { transform: rotate(180deg); }
/* Dashboard section header NAVIGATES (it is the operator home page) while the group still expands,
so its caret lives in a sibling