/* "Console" — the default night theme: the foiler lock-screen / fleet-map aesthetic (warm
near-black, copper accents). One block on `body.theme-console` carries the whole theme —
the --fl-* palette, the Bootstrap token remap and the Bootstrap component skin — so
portal-rendered content (FileBrowser modals, dropdown and select menus under
document.body) inherits it, and the whole set swaps with the body theme class.
This file is a stylance module (bins/cloud/styles/ is scanned like src/): Bootstrap
classes go through :global(), and a :global() must contain no parenthesis — pseudo-classes
sit outside it (`&:global(.x):focus`, `&:not(:global(.y))`). Element and attribute
selectors and custom properties pass untouched. Day.css is this file with the day palette:
keep the two donut blocks identical.
Token-first: prefer remapping --bs-* variables over restyling properties, so Bootstrap's
own hover/active/disabled machinery keeps working; property rules only where Bootstrap
hardcodes a value (`.btn-outline-*`, `.btn-warning`, the focus blue). */
body.theme-console {
color-scheme: dark;
--fl-bg: #0a0907;
--fl-bg-2: #15120d;
--fl-text: #f8f2ea;
--fl-dim: #dcd3c7;
--fl-faint: #aba193;
--fl-copper: #e6ae86;
--fl-copper-bright: #f7cdb0;
--fl-green: #46e2a6;
--fl-red: #ff7a68;
--fl-line: rgba(255, 240, 228, 0.26);
--fl-hair: rgba(255, 240, 228, 0.1);
--fl-panel: rgba(22, 18, 13, 0.62);
--fl-panel-bd: rgba(255, 238, 224, 0.2);
--fl-key-bg: rgba(255, 238, 224, 0.1);
--fl-key-bg-hover: rgba(255, 238, 224, 0.18);
--fl-key-bd: rgba(255, 238, 224, 0.26);
/* Channel triplets for rgba() composition (Bootstrap *-rgb remaps, focus
rings, accent washes) — keep in step with the solid values above. */
--fl-copper-rgb: 230, 174, 134;
--fl-green-rgb: 70, 226, 166;
--fl-red-rgb: 255, 122, 104;
/* Base of the --fl-line/hair/key-* overlay family. */
--fl-key-rgb: 255, 238, 224;
/* Over-map glass (fleet dock, HUD keys, map popup) — more opaque than
--fl-panel because it floats on the map raster; sites keep their own
deliberate alphas. */
--fl-glass-rgb: 16, 13, 10;
/* Text on solid copper/red fills (btn-primary/btn-danger). */
--fl-on-copper: #1a0f08;
/* Hover shift for solid red fills — brightens at night, deepens by day. */
--fl-red-bright: #ff9585;
/* In-flight / awaiting-outcome amber: the third state beside green and red, on the fleet
rollout tags. Distinct from --fl-copper, which means "the active accent", not "pending". */
--fl-amber: #c99a5b;
--fl-amber-rgb: 201, 154, 91;
/* Bootstrap token remap, composed from the palette. Custom properties on `body` beat
Bootstrap's `:root`/`[data-bs-theme]` values by plain inheritance; this alone retints
the styled drop zone (dashed border / tertiary fill / copper drag-over) and
FileBrowser's hover + selected states. main.css resets the few that would otherwise
leak into the embedded dashboards. */
--bs-body-color: var(--fl-text);
--bs-body-bg: var(--fl-bg-2);
--bs-emphasis-color: var(--fl-text);
--bs-secondary-color: var(--fl-dim);
--bs-tertiary-color: var(--fl-faint);
--bs-border-color: var(--fl-panel-bd);
--bs-tertiary-bg: var(--fl-key-bg);
--bs-secondary-bg: var(--fl-key-bg-hover);
--bs-border-radius: 0.6rem;
--bs-primary: var(--fl-copper);
--bs-primary-rgb: var(--fl-copper-rgb);
--bs-primary-bg-subtle: rgba(var(--fl-copper-rgb), 0.14);
--bs-primary-border-subtle: rgba(var(--fl-copper-rgb), 0.4);
--bs-danger: var(--fl-red);
--bs-danger-rgb: var(--fl-red-rgb);
--bs-success: var(--fl-green);
--bs-success-rgb: var(--fl-green-rgb);
--bs-link-color: var(--fl-copper);
--bs-link-hover-color: var(--fl-copper-bright);
--bs-font-monospace: var(--fl-mono);
--bs-form-valid-color: var(--fl-green);
--bs-form-valid-border-color: var(--fl-green);
--bs-form-invalid-color: var(--fl-red);
--bs-form-invalid-border-color: var(--fl-red);
/* The subtle families. Bootstrap derives every `.alert-*` and the `bg-*-subtle` /
`text-*-emphasis` / `border-*-subtle` utilities from these three tokens per variant, so
remapping them skins status tags and notices at once. Secondary is the neutral key
surface, the others their palette accent on a 10%/40% wash. */
--bs-secondary-text-emphasis: var(--fl-dim);
--bs-secondary-bg-subtle: var(--fl-key-bg);
--bs-secondary-border-subtle: var(--fl-key-bd);
--bs-success-text-emphasis: var(--fl-green);
--bs-success-bg-subtle: rgba(var(--fl-green-rgb), 0.1);
--bs-success-border-subtle: rgba(var(--fl-green-rgb), 0.4);
--bs-danger-text-emphasis: var(--fl-red);
--bs-danger-bg-subtle: rgba(var(--fl-red-rgb), 0.1);
--bs-danger-border-subtle: rgba(var(--fl-red-rgb), 0.45);
--bs-warning-text-emphasis: var(--fl-amber);
--bs-warning-bg-subtle: rgba(var(--fl-amber-rgb), 0.1);
--bs-warning-border-subtle: rgba(var(--fl-amber-rgb), 0.4);
--bs-info-text-emphasis: var(--fl-copper);
--bs-info-bg-subtle: rgba(var(--fl-copper-rgb), 0.1);
--bs-info-border-subtle: rgba(var(--fl-copper-rgb), 0.4);
/* Donut: nothing below matches inside a subtree that pins its own `data-bs-theme` — the
embedded Wingman / vessel dashboards are authored against STOCK Bootstrap and keep it
(they render no portals, so their whole DOM stays in the hole). `` carries the
attribute too, hence the `body` anchor. */
:not(body [data-bs-theme] *) {
/* Buttons: the console "key" look (mono, tracked, all-caps) on every `.btn` — page
markup, ActionButton, FileBrowser, the development views. Two destructive tiers,
deliberately: `.btn-danger` is the solid primary destructive action (ActionButton's
safe delete); `.btn-outline-danger` the quieter secondary one (delete a photo, deny
a registration). */
&.btn {
--bs-btn-padding-y: 0.55rem;
--bs-btn-padding-x: 1rem;
--bs-btn-font-family: var(--fl-mono);
--bs-btn-font-size: 0.75rem;
--bs-btn-font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
transition:
color var(--fl-dur) var(--fl-ease),
background-color var(--fl-dur) var(--fl-ease),
border-color var(--fl-dur) var(--fl-ease),
box-shadow var(--fl-dur) var(--fl-ease),
transform var(--fl-press) var(--fl-ease);
}
&.btn:active {
transform: translateY(1px);
}
&.btn-sm {
--bs-btn-padding-y: 0.4rem;
--bs-btn-padding-x: 0.6rem;
--bs-btn-font-size: 0.68rem;
--bs-btn-border-radius: 0.55rem;
letter-spacing: 0.14em;
}
&.btn-primary {
--bs-btn-color: var(--fl-on-copper);
--bs-btn-bg: var(--fl-copper);
--bs-btn-border-color: var(--fl-copper);
--bs-btn-hover-color: var(--fl-on-copper);
--bs-btn-hover-bg: var(--fl-copper-bright);
--bs-btn-hover-border-color: var(--fl-copper-bright);
--bs-btn-active-color: var(--fl-on-copper);
--bs-btn-active-bg: var(--fl-copper-bright);
--bs-btn-active-border-color: var(--fl-copper-bright);
--bs-btn-disabled-color: var(--fl-on-copper);
--bs-btn-disabled-bg: var(--fl-copper);
--bs-btn-disabled-border-color: var(--fl-copper);
--bs-btn-focus-shadow-rgb: var(--fl-copper-rgb);
}
/* Ghost keys: dim text on the key surface, copper edge on hover. */
&.btn-secondary,
&.btn-outline-secondary {
--bs-btn-color: var(--fl-dim);
--bs-btn-bg: var(--fl-key-bg);
--bs-btn-border-color: var(--fl-key-bd);
--bs-btn-hover-color: var(--fl-text);
--bs-btn-hover-bg: var(--fl-key-bg-hover);
--bs-btn-hover-border-color: var(--fl-copper);
--bs-btn-active-color: var(--fl-text);
--bs-btn-active-bg: var(--fl-key-bg-hover);
--bs-btn-active-border-color: var(--fl-copper);
--bs-btn-disabled-color: var(--fl-faint);
--bs-btn-disabled-bg: var(--fl-key-bg);
--bs-btn-disabled-border-color: var(--fl-key-bd);
--bs-btn-focus-shadow-rgb: var(--fl-copper-rgb);
}
/* Bare ghost: transparent until hovered — inline refresh keys, and FileBrowser's
per-row three-dots button (stock btn-light is a light-gray blob on our rows). */
&.btn-light {
--bs-btn-color: var(--fl-dim);
--bs-btn-bg: transparent;
--bs-btn-border-color: transparent;
--bs-btn-hover-color: var(--fl-text);
--bs-btn-hover-bg: var(--fl-key-bg-hover);
--bs-btn-hover-border-color: transparent;
--bs-btn-active-color: var(--fl-text);
--bs-btn-active-bg: var(--fl-key-bg-hover);
--bs-btn-active-border-color: transparent;
--bs-btn-disabled-color: var(--fl-faint);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: transparent;
--bs-btn-focus-shadow-rgb: var(--fl-copper-rgb);
}
&.btn-danger {
--bs-btn-color: var(--fl-on-copper);
--bs-btn-bg: var(--fl-red);
--bs-btn-border-color: var(--fl-red);
--bs-btn-hover-color: var(--fl-on-copper);
--bs-btn-hover-bg: var(--fl-red-bright);
--bs-btn-hover-border-color: var(--fl-red-bright);
--bs-btn-active-color: var(--fl-on-copper);
--bs-btn-active-bg: var(--fl-red-bright);
--bs-btn-active-border-color: var(--fl-red-bright);
--bs-btn-disabled-color: var(--fl-on-copper);
--bs-btn-disabled-bg: var(--fl-red);
--bs-btn-disabled-border-color: var(--fl-red);
--bs-btn-focus-shadow-rgb: var(--fl-red-rgb);
}
&.btn-outline-danger {
--bs-btn-color: var(--fl-red);
--bs-btn-bg: transparent;
--bs-btn-border-color: rgba(var(--fl-red-rgb), 0.5);
--bs-btn-hover-color: var(--fl-red);
--bs-btn-hover-bg: rgba(var(--fl-red-rgb), 0.12);
--bs-btn-hover-border-color: var(--fl-red);
--bs-btn-active-color: var(--fl-red);
--bs-btn-active-bg: rgba(var(--fl-red-rgb), 0.12);
--bs-btn-active-border-color: var(--fl-red);
--bs-btn-disabled-color: var(--fl-red);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: rgba(var(--fl-red-rgb), 0.5);
--bs-btn-focus-shadow-rgb: var(--fl-red-rgb);
}
/* ActionButton's armed safe-delete toggle, and the development views' Warning
actions: copper on the key surface instead of stock yellow. */
&.btn-warning {
--bs-btn-color: var(--fl-copper);
--bs-btn-bg: var(--fl-key-bg);
--bs-btn-border-color: var(--fl-key-bd);
--bs-btn-hover-color: var(--fl-copper-bright);
--bs-btn-hover-bg: var(--fl-key-bg-hover);
--bs-btn-hover-border-color: var(--fl-copper);
--bs-btn-active-color: var(--fl-copper-bright);
--bs-btn-active-bg: var(--fl-key-bg-hover);
--bs-btn-active-border-color: var(--fl-copper);
--bs-btn-disabled-color: var(--fl-faint);
--bs-btn-disabled-bg: var(--fl-key-bg);
--bs-btn-disabled-border-color: var(--fl-key-bd);
--bs-btn-focus-shadow-rgb: var(--fl-copper-rgb);
}
&.btn-close {
--bs-btn-close-focus-shadow: 0 0 0 0.2rem rgba(var(--fl-copper-rgb), 0.25);
}
/* Modals (FileBrowser's rename/delete/new-folder — portal-rendered under ). */
&.modal-content {
--bs-modal-bg: var(--fl-bg-2);
--bs-modal-color: var(--fl-text);
--bs-modal-border-color: var(--fl-panel-bd);
--bs-modal-border-radius: 0.85rem;
--bs-modal-header-border-color: var(--fl-hair);
--bs-modal-footer-border-color: var(--fl-hair);
background-color: var(--fl-bg-2);
color: var(--fl-text);
border: 1px solid var(--fl-panel-bd);
border-radius: 0.85rem;
}
&.modal-header,
&.modal-footer {
border-color: var(--fl-hair);
}
/* Panels (the edit and profile surfaces, the development views' cards): a blurred
glass pane floating over the page grid. `.card-body` carries the padding, so a
panel is a `.card` wrapping one. */
&.card {
--bs-card-spacer-y: 1.4rem;
--bs-card-spacer-x: 1.5rem;
--bs-card-title-spacer-y: 1.1rem;
--bs-card-title-color: var(--fl-copper);
--bs-card-color: var(--fl-text);
--bs-card-bg: var(--fl-panel);
--bs-card-border-color: var(--fl-panel-bd);
--bs-card-border-radius: 0.95rem;
/* Bootstrap derives the inner radius — the header's top corners — from
--bs-border-radius rather than from the card's own radius. */
--bs-card-inner-border-radius: calc(0.95rem - 1px);
--bs-card-cap-padding-x: 1.5rem;
--bs-card-cap-bg: var(--fl-key-bg);
--bs-card-cap-color: var(--fl-dim);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
/* A hairline inside the panel, quieter than its own edge. */
&.card-header {
border-bottom-color: var(--fl-hair);
}
/* Panel title: the tracked mono eyebrow, with the entity's own name beside it in the
reading face. */
&.card-title {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-family: var(--fl-mono);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
}
&.card-title small {
font-family: "Hanken Grotesk", system-ui, sans-serif;
font-size: 0.95rem;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--fl-dim);
}
/* Form fields: the console field look (tracked mono eyebrow label, dark well, copper
focus, copper checks) on every Bootstrap form control — the edit pages, the profile,
FileBrowser's modal inputs, the development views. Bootstrap hardcodes its focus blue
on `.form-control:focus` / `.form-check-input:focus` and its primary blue on
`.form-check-input:checked` — no token to remap, hence property rules. */
&.form-label {
/* Block, so inline-flex triggers (the device type SingleSelect) sit under their
label, not beside it. */
display: block;
margin-bottom: 0.4rem;
font-family: var(--fl-mono);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--fl-faint);
}
&.form-text {
font-size: 0.72rem;
letter-spacing: 0.02em;
color: var(--fl-faint);
}
&.form-control,
&.form-select {
background-color: var(--fl-bg);
color: var(--fl-text);
border-color: var(--fl-key-bd);
}
&.form-control::placeholder {
color: var(--fl-faint);
}
&.form-control:focus,
&.form-select:focus {
background-color: var(--fl-bg);
color: var(--fl-text);
border-color: var(--fl-copper);
box-shadow: 0 0 0 0.2rem rgba(var(--fl-copper-rgb), 0.25);
}
/* Bootstrap's `.is-invalid` rules lose to the field rules above on specificity —
restate the red border for an invalid field, at rest and focused. */
&.form-control.is-invalid,
&.form-select.is-invalid {
border-color: var(--bs-form-invalid-border-color);
}
&.form-control.is-invalid:focus,
&.form-select.is-invalid:focus {
border-color: var(--bs-form-invalid-border-color);
box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.25);
}
/* Native option lists don't inherit the control's colours in every engine. */
&.form-select option {
background-color: var(--fl-bg-2);
color: var(--fl-text);
}
&.form-check-input {
--bs-form-check-bg: var(--fl-bg);
border-color: var(--fl-key-bd);
}
&.form-check-input:focus {
border-color: var(--fl-copper);
box-shadow: 0 0 0 0.2rem rgba(var(--fl-copper-rgb), 0.25);
}
&.form-check-input:checked {
background-color: var(--fl-copper);
border-color: var(--fl-copper);
}
/* Bootstrap paints a light-blue knob on a focused, unchecked switch (a data-URL SVG,
so no token and no var() inside it) — a mid grey reads on both themes' tracks. */
&.form-switch .form-check-input:focus:not(:checked) {
--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28128, 128, 128, 0.6%29'/%3e%3c/svg%3e");
}
&.form-check-label {
font-size: 0.9rem;
color: var(--fl-dim);
cursor: pointer;
}
/* Input-group addons (the sidebar search glyph, the auth pages' field icons, the
select menus' counts): the field's own edge, quieter text. */
&.input-group-text {
color: var(--fl-faint);
border-color: var(--fl-key-bd);
}
/* Tables (FileBrowser tree/list views, the select menus' choice rows, the fleet and
API-key tables, the development views). */
&.table {
--bs-table-bg: transparent;
--bs-table-color: var(--fl-text);
--bs-table-border-color: var(--fl-hair);
--bs-table-hover-bg: var(--fl-key-bg);
--bs-table-hover-color: var(--fl-text);
--bs-table-striped-bg: var(--fl-key-bg);
--bs-table-striped-color: var(--fl-text);
--bs-table-active-bg: rgba(var(--fl-copper-rgb), 0.14);
--bs-table-active-color: var(--fl-copper-bright);
}
/* Column heads: the tracked mono eyebrow, over a firmer rule than the row hairlines.
Cell padding stays Bootstrap's: it has no token, and a rule here would also
override `.table-sm`. */
&.table > thead th {
font-family: var(--fl-mono);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fl-faint);
border-bottom-color: var(--fl-line);
}
/* The last row ends on its container's edge, not on a hairline of its own. */
&.table > tbody > tr:last-child > * {
border-bottom-width: 0;
}
/* The select menus mark their keyboard-focused row with `.table-primary`, which
hardcodes a light-blue row palette — no token to remap. */
&.table-primary {
--bs-table-color: var(--fl-copper-bright);
--bs-table-bg: rgba(var(--fl-copper-rgb), 0.14);
--bs-table-border-color: var(--fl-hair);
--bs-table-striped-bg: rgba(var(--fl-copper-rgb), 0.14);
--bs-table-striped-color: var(--fl-copper-bright);
--bs-table-active-bg: rgba(var(--fl-copper-rgb), 0.2);
--bs-table-active-color: var(--fl-copper-bright);
--bs-table-hover-bg: rgba(var(--fl-copper-rgb), 0.2);
--bs-table-hover-color: var(--fl-copper-bright);
}
/* Tabs: mono tracked keys on a hairline, the active one underlined in copper.
Bootstrap zeroes an underline link's inline padding; the key keeps its own, so the
underline spans the whole key. */
&.nav-underline {
--bs-nav-underline-gap: 0.4rem;
--bs-nav-underline-link-active-color: var(--fl-copper);
--bs-nav-link-color: var(--fl-faint);
--bs-nav-link-hover-color: var(--fl-dim);
--bs-nav-link-font-size: 0.7rem;
--bs-nav-link-font-weight: 600;
border-bottom: 1px solid var(--fl-hair);
}
&.nav-underline .nav-link {
padding-inline: 0.85rem;
font-family: var(--fl-mono);
letter-spacing: 0.16em;
text-transform: uppercase;
transition:
color var(--fl-dur) var(--fl-ease),
border-color var(--fl-dur) var(--fl-ease);
}
/* Bootstrap hardcodes its focus blue on `.nav-link:focus-visible` and its active
pill blue on `.nav-pills` — no token to remap for the first. */
&.nav-link:focus-visible {
box-shadow: 0 0 0 0.2rem rgba(var(--fl-copper-rgb), 0.25);
}
&.nav-pills {
--bs-nav-pills-link-active-color: var(--fl-on-copper);
--bs-nav-pills-link-active-bg: var(--fl-copper);
}
/* Dropdown menus (FileBrowser row-action menus — also portal/absolute content). */
&.dropdown-menu {
--bs-dropdown-bg: var(--fl-bg-2);
--bs-dropdown-color: var(--fl-text);
--bs-dropdown-link-color: var(--fl-text);
--bs-dropdown-link-hover-color: var(--fl-text);
--bs-dropdown-link-hover-bg: var(--fl-key-bg-hover);
--bs-dropdown-link-active-bg: var(--fl-key-bg-hover);
--bs-dropdown-link-active-color: var(--fl-text);
--bs-dropdown-border-color: var(--fl-panel-bd);
--bs-dropdown-divider-bg: var(--fl-hair);
}
/* Upload progress (drop zone / FileBrowser upload panel). */
&.progress {
background-color: var(--fl-key-bg);
}
&.progress-bar {
background-color: var(--fl-copper);
}
/* Status tags: mono, tracked, all-caps, on whichever subtle family the markup picks
(secondary for a neutral tag, success/warning/danger for an outcome). */
&.badge {
--bs-badge-padding-x: 0.45rem;
--bs-badge-padding-y: 0.12rem;
--bs-badge-font-size: 0.6rem;
--bs-badge-font-weight: 600;
--bs-badge-border-radius: 0.4rem;
font-family: var(--fl-mono);
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* The sidebar counts: digits, so no tracking and no caps, and roomier than a tag. */
&.badge.rounded-pill {
--bs-badge-padding-x: 0.5rem;
--bs-badge-padding-y: 0.08rem;
--bs-badge-font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: none;
}
/* Notices: the empty/loading well, the save outcomes, the corner toasts. Bootstrap
derives every variant's colour from the subtle families remapped above. */
&.alert {
--bs-alert-padding-y: 0.85rem;
--bs-alert-padding-x: 1rem;
--bs-alert-border-radius: 0.7rem;
font-size: 0.9rem;
}
/* The empty/loading notice reads as an outline waiting to be filled, not as a filled
status banner — hence dashed, and a row so an icon sits beside the text. */
&.alert-secondary {
border-style: dashed;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Outcome banners keep body text in the reading colour and spend the accent on the
leading `strong`, which is what carries the outcome. */
&.alert-danger,
&.alert-success {
--bs-alert-color: var(--fl-text);
}
&.alert-danger strong,
&.alert-success strong {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
&.alert-danger strong {
color: var(--fl-red);
}
&.alert-success strong {
color: var(--fl-green);
}
}
}
/* "Day" — the light counterpart of Console: same warm hue family with the lightness
inverted (warm paper ground, deepened copper so the accent keeps contrast on light
surfaces). --fl-bg-2 stays the brighter of the bg pair so pageWrap's radial gradient still
reads "center brighter". Same shape as Console.css — palette, Bootstrap token remap, then
the component skin inside the `:not(body [data-bs-theme] *)` donut (see Console.css for
the writing rules); keep the two donut blocks identical. */
body.theme-day {
color-scheme: light;
--fl-bg: #ece5d8;
--fl-bg-2: #f7f3ea;
--fl-text: #251d12;
--fl-dim: #574a36;
--fl-faint: #857459;
--fl-copper: #a45f28;
--fl-copper-bright: #8a4c1d;
--fl-green: #0f7d55;
--fl-red: #c0371f;
--fl-line: rgba(58, 42, 20, 0.3);
--fl-hair: rgba(58, 42, 20, 0.12);
--fl-panel: rgba(255, 253, 248, 0.66);
--fl-panel-bd: rgba(58, 42, 20, 0.2);
--fl-key-bg: rgba(58, 42, 20, 0.06);
--fl-key-bg-hover: rgba(58, 42, 20, 0.12);
--fl-key-bd: rgba(58, 42, 20, 0.28);
/* Channel triplets for rgba() composition (Bootstrap *-rgb remaps, focus
rings, accent washes) — keep in step with the solid values above. */
--fl-copper-rgb: 164, 95, 40;
--fl-green-rgb: 15, 125, 85;
--fl-red-rgb: 192, 55, 31;
/* Base of the --fl-line/hair/key-* overlay family. */
--fl-key-rgb: 58, 42, 20;
/* Over-map glass (fleet dock, HUD keys, map popup) — more opaque than
--fl-panel because it floats on the map raster; sites keep their own
deliberate alphas. */
--fl-glass-rgb: 255, 253, 248;
/* Text on solid copper/red fills (btn-primary/btn-danger). */
--fl-on-copper: #fff6ec;
/* Hover shift for solid red fills — brightens at night, deepens by day. */
--fl-red-bright: #a52c16;
/* In-flight / awaiting-outcome amber: the third state beside green and red, on the fleet
rollout tags. Pushed yellower than --fl-copper, which by day is a burnt orange the eye
would otherwise read as the same colour. */
--fl-amber: #8b6a1d;
--fl-amber-rgb: 139, 106, 29;
/* Bootstrap token remap, composed from the palette. Custom properties on `body` beat
Bootstrap's `:root`/`[data-bs-theme]` values by plain inheritance; this alone retints
the styled drop zone (dashed border / tertiary fill / copper drag-over) and
FileBrowser's hover + selected states. main.css resets the few that would otherwise
leak into the embedded dashboards. */
--bs-body-color: var(--fl-text);
--bs-body-bg: var(--fl-bg-2);
--bs-emphasis-color: var(--fl-text);
--bs-secondary-color: var(--fl-dim);
--bs-tertiary-color: var(--fl-faint);
--bs-border-color: var(--fl-panel-bd);
--bs-tertiary-bg: var(--fl-key-bg);
--bs-secondary-bg: var(--fl-key-bg-hover);
--bs-border-radius: 0.6rem;
--bs-primary: var(--fl-copper);
--bs-primary-rgb: var(--fl-copper-rgb);
--bs-primary-bg-subtle: rgba(var(--fl-copper-rgb), 0.14);
--bs-primary-border-subtle: rgba(var(--fl-copper-rgb), 0.4);
--bs-danger: var(--fl-red);
--bs-danger-rgb: var(--fl-red-rgb);
--bs-success: var(--fl-green);
--bs-success-rgb: var(--fl-green-rgb);
--bs-link-color: var(--fl-copper);
--bs-link-hover-color: var(--fl-copper-bright);
--bs-font-monospace: var(--fl-mono);
--bs-form-valid-color: var(--fl-green);
--bs-form-valid-border-color: var(--fl-green);
--bs-form-invalid-color: var(--fl-red);
--bs-form-invalid-border-color: var(--fl-red);
/* The subtle families. Bootstrap derives every `.alert-*` and the `bg-*-subtle` /
`text-*-emphasis` / `border-*-subtle` utilities from these three tokens per variant, so
remapping them skins status tags and notices at once. Secondary is the neutral key
surface, the others their palette accent on a 10%/40% wash. */
--bs-secondary-text-emphasis: var(--fl-dim);
--bs-secondary-bg-subtle: var(--fl-key-bg);
--bs-secondary-border-subtle: var(--fl-key-bd);
--bs-success-text-emphasis: var(--fl-green);
--bs-success-bg-subtle: rgba(var(--fl-green-rgb), 0.1);
--bs-success-border-subtle: rgba(var(--fl-green-rgb), 0.4);
--bs-danger-text-emphasis: var(--fl-red);
--bs-danger-bg-subtle: rgba(var(--fl-red-rgb), 0.1);
--bs-danger-border-subtle: rgba(var(--fl-red-rgb), 0.45);
--bs-warning-text-emphasis: var(--fl-amber);
--bs-warning-bg-subtle: rgba(var(--fl-amber-rgb), 0.1);
--bs-warning-border-subtle: rgba(var(--fl-amber-rgb), 0.4);
--bs-info-text-emphasis: var(--fl-copper);
--bs-info-bg-subtle: rgba(var(--fl-copper-rgb), 0.1);
--bs-info-border-subtle: rgba(var(--fl-copper-rgb), 0.4);
/* Donut: nothing below matches inside a subtree that pins its own `data-bs-theme` — the
embedded Wingman / vessel dashboards are authored against STOCK Bootstrap and keep it
(they render no portals, so their whole DOM stays in the hole). `` carries the
attribute too, hence the `body` anchor. */
:not(body [data-bs-theme] *) {
/* Buttons: the console "key" look (mono, tracked, all-caps) on every `.btn` — page
markup, ActionButton, FileBrowser, the development views. Two destructive tiers,
deliberately: `.btn-danger` is the solid primary destructive action (ActionButton's
safe delete); `.btn-outline-danger` the quieter secondary one (delete a photo, deny
a registration). */
&.btn {
--bs-btn-padding-y: 0.55rem;
--bs-btn-padding-x: 1rem;
--bs-btn-font-family: var(--fl-mono);
--bs-btn-font-size: 0.75rem;
--bs-btn-font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
transition:
color var(--fl-dur) var(--fl-ease),
background-color var(--fl-dur) var(--fl-ease),
border-color var(--fl-dur) var(--fl-ease),
box-shadow var(--fl-dur) var(--fl-ease),
transform var(--fl-press) var(--fl-ease);
}
&.btn:active {
transform: translateY(1px);
}
&.btn-sm {
--bs-btn-padding-y: 0.4rem;
--bs-btn-padding-x: 0.6rem;
--bs-btn-font-size: 0.68rem;
--bs-btn-border-radius: 0.55rem;
letter-spacing: 0.14em;
}
&.btn-primary {
--bs-btn-color: var(--fl-on-copper);
--bs-btn-bg: var(--fl-copper);
--bs-btn-border-color: var(--fl-copper);
--bs-btn-hover-color: var(--fl-on-copper);
--bs-btn-hover-bg: var(--fl-copper-bright);
--bs-btn-hover-border-color: var(--fl-copper-bright);
--bs-btn-active-color: var(--fl-on-copper);
--bs-btn-active-bg: var(--fl-copper-bright);
--bs-btn-active-border-color: var(--fl-copper-bright);
--bs-btn-disabled-color: var(--fl-on-copper);
--bs-btn-disabled-bg: var(--fl-copper);
--bs-btn-disabled-border-color: var(--fl-copper);
--bs-btn-focus-shadow-rgb: var(--fl-copper-rgb);
}
/* Ghost keys: dim text on the key surface, copper edge on hover. */
&.btn-secondary,
&.btn-outline-secondary {
--bs-btn-color: var(--fl-dim);
--bs-btn-bg: var(--fl-key-bg);
--bs-btn-border-color: var(--fl-key-bd);
--bs-btn-hover-color: var(--fl-text);
--bs-btn-hover-bg: var(--fl-key-bg-hover);
--bs-btn-hover-border-color: var(--fl-copper);
--bs-btn-active-color: var(--fl-text);
--bs-btn-active-bg: var(--fl-key-bg-hover);
--bs-btn-active-border-color: var(--fl-copper);
--bs-btn-disabled-color: var(--fl-faint);
--bs-btn-disabled-bg: var(--fl-key-bg);
--bs-btn-disabled-border-color: var(--fl-key-bd);
--bs-btn-focus-shadow-rgb: var(--fl-copper-rgb);
}
/* Bare ghost: transparent until hovered — inline refresh keys, and FileBrowser's
per-row three-dots button (stock btn-light is a light-gray blob on our rows). */
&.btn-light {
--bs-btn-color: var(--fl-dim);
--bs-btn-bg: transparent;
--bs-btn-border-color: transparent;
--bs-btn-hover-color: var(--fl-text);
--bs-btn-hover-bg: var(--fl-key-bg-hover);
--bs-btn-hover-border-color: transparent;
--bs-btn-active-color: var(--fl-text);
--bs-btn-active-bg: var(--fl-key-bg-hover);
--bs-btn-active-border-color: transparent;
--bs-btn-disabled-color: var(--fl-faint);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: transparent;
--bs-btn-focus-shadow-rgb: var(--fl-copper-rgb);
}
&.btn-danger {
--bs-btn-color: var(--fl-on-copper);
--bs-btn-bg: var(--fl-red);
--bs-btn-border-color: var(--fl-red);
--bs-btn-hover-color: var(--fl-on-copper);
--bs-btn-hover-bg: var(--fl-red-bright);
--bs-btn-hover-border-color: var(--fl-red-bright);
--bs-btn-active-color: var(--fl-on-copper);
--bs-btn-active-bg: var(--fl-red-bright);
--bs-btn-active-border-color: var(--fl-red-bright);
--bs-btn-disabled-color: var(--fl-on-copper);
--bs-btn-disabled-bg: var(--fl-red);
--bs-btn-disabled-border-color: var(--fl-red);
--bs-btn-focus-shadow-rgb: var(--fl-red-rgb);
}
&.btn-outline-danger {
--bs-btn-color: var(--fl-red);
--bs-btn-bg: transparent;
--bs-btn-border-color: rgba(var(--fl-red-rgb), 0.5);
--bs-btn-hover-color: var(--fl-red);
--bs-btn-hover-bg: rgba(var(--fl-red-rgb), 0.12);
--bs-btn-hover-border-color: var(--fl-red);
--bs-btn-active-color: var(--fl-red);
--bs-btn-active-bg: rgba(var(--fl-red-rgb), 0.12);
--bs-btn-active-border-color: var(--fl-red);
--bs-btn-disabled-color: var(--fl-red);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: rgba(var(--fl-red-rgb), 0.5);
--bs-btn-focus-shadow-rgb: var(--fl-red-rgb);
}
/* ActionButton's armed safe-delete toggle, and the development views' Warning
actions: copper on the key surface instead of stock yellow. */
&.btn-warning {
--bs-btn-color: var(--fl-copper);
--bs-btn-bg: var(--fl-key-bg);
--bs-btn-border-color: var(--fl-key-bd);
--bs-btn-hover-color: var(--fl-copper-bright);
--bs-btn-hover-bg: var(--fl-key-bg-hover);
--bs-btn-hover-border-color: var(--fl-copper);
--bs-btn-active-color: var(--fl-copper-bright);
--bs-btn-active-bg: var(--fl-key-bg-hover);
--bs-btn-active-border-color: var(--fl-copper);
--bs-btn-disabled-color: var(--fl-faint);
--bs-btn-disabled-bg: var(--fl-key-bg);
--bs-btn-disabled-border-color: var(--fl-key-bd);
--bs-btn-focus-shadow-rgb: var(--fl-copper-rgb);
}
&.btn-close {
--bs-btn-close-focus-shadow: 0 0 0 0.2rem rgba(var(--fl-copper-rgb), 0.25);
}
/* Modals (FileBrowser's rename/delete/new-folder — portal-rendered under ). */
&.modal-content {
--bs-modal-bg: var(--fl-bg-2);
--bs-modal-color: var(--fl-text);
--bs-modal-border-color: var(--fl-panel-bd);
--bs-modal-border-radius: 0.85rem;
--bs-modal-header-border-color: var(--fl-hair);
--bs-modal-footer-border-color: var(--fl-hair);
background-color: var(--fl-bg-2);
color: var(--fl-text);
border: 1px solid var(--fl-panel-bd);
border-radius: 0.85rem;
}
&.modal-header,
&.modal-footer {
border-color: var(--fl-hair);
}
/* Panels (the edit and profile surfaces, the development views' cards): a blurred
glass pane floating over the page grid. `.card-body` carries the padding, so a
panel is a `.card` wrapping one. */
&.card {
--bs-card-spacer-y: 1.4rem;
--bs-card-spacer-x: 1.5rem;
--bs-card-title-spacer-y: 1.1rem;
--bs-card-title-color: var(--fl-copper);
--bs-card-color: var(--fl-text);
--bs-card-bg: var(--fl-panel);
--bs-card-border-color: var(--fl-panel-bd);
--bs-card-border-radius: 0.95rem;
/* Bootstrap derives the inner radius — the header's top corners — from
--bs-border-radius rather than from the card's own radius. */
--bs-card-inner-border-radius: calc(0.95rem - 1px);
--bs-card-cap-padding-x: 1.5rem;
--bs-card-cap-bg: var(--fl-key-bg);
--bs-card-cap-color: var(--fl-dim);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
/* A hairline inside the panel, quieter than its own edge. */
&.card-header {
border-bottom-color: var(--fl-hair);
}
/* Panel title: the tracked mono eyebrow, with the entity's own name beside it in the
reading face. */
&.card-title {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-family: var(--fl-mono);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
}
&.card-title small {
font-family: "Hanken Grotesk", system-ui, sans-serif;
font-size: 0.95rem;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--fl-dim);
}
/* Form fields: the console field look (tracked mono eyebrow label, dark well, copper
focus, copper checks) on every Bootstrap form control — the edit pages, the profile,
FileBrowser's modal inputs, the development views. Bootstrap hardcodes its focus blue
on `.form-control:focus` / `.form-check-input:focus` and its primary blue on
`.form-check-input:checked` — no token to remap, hence property rules. */
&.form-label {
/* Block, so inline-flex triggers (the device type SingleSelect) sit under their
label, not beside it. */
display: block;
margin-bottom: 0.4rem;
font-family: var(--fl-mono);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--fl-faint);
}
&.form-text {
font-size: 0.72rem;
letter-spacing: 0.02em;
color: var(--fl-faint);
}
&.form-control,
&.form-select {
background-color: var(--fl-bg);
color: var(--fl-text);
border-color: var(--fl-key-bd);
}
&.form-control::placeholder {
color: var(--fl-faint);
}
&.form-control:focus,
&.form-select:focus {
background-color: var(--fl-bg);
color: var(--fl-text);
border-color: var(--fl-copper);
box-shadow: 0 0 0 0.2rem rgba(var(--fl-copper-rgb), 0.25);
}
/* Bootstrap's `.is-invalid` rules lose to the field rules above on specificity —
restate the red border for an invalid field, at rest and focused. */
&.form-control.is-invalid,
&.form-select.is-invalid {
border-color: var(--bs-form-invalid-border-color);
}
&.form-control.is-invalid:focus,
&.form-select.is-invalid:focus {
border-color: var(--bs-form-invalid-border-color);
box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.25);
}
/* Native option lists don't inherit the control's colours in every engine. */
&.form-select option {
background-color: var(--fl-bg-2);
color: var(--fl-text);
}
&.form-check-input {
--bs-form-check-bg: var(--fl-bg);
border-color: var(--fl-key-bd);
}
&.form-check-input:focus {
border-color: var(--fl-copper);
box-shadow: 0 0 0 0.2rem rgba(var(--fl-copper-rgb), 0.25);
}
&.form-check-input:checked {
background-color: var(--fl-copper);
border-color: var(--fl-copper);
}
/* Bootstrap paints a light-blue knob on a focused, unchecked switch (a data-URL SVG,
so no token and no var() inside it) — a mid grey reads on both themes' tracks. */
&.form-switch .form-check-input:focus:not(:checked) {
--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28128, 128, 128, 0.6%29'/%3e%3c/svg%3e");
}
&.form-check-label {
font-size: 0.9rem;
color: var(--fl-dim);
cursor: pointer;
}
/* Input-group addons (the sidebar search glyph, the auth pages' field icons, the
select menus' counts): the field's own edge, quieter text. */
&.input-group-text {
color: var(--fl-faint);
border-color: var(--fl-key-bd);
}
/* Tables (FileBrowser tree/list views, the select menus' choice rows, the fleet and
API-key tables, the development views). */
&.table {
--bs-table-bg: transparent;
--bs-table-color: var(--fl-text);
--bs-table-border-color: var(--fl-hair);
--bs-table-hover-bg: var(--fl-key-bg);
--bs-table-hover-color: var(--fl-text);
--bs-table-striped-bg: var(--fl-key-bg);
--bs-table-striped-color: var(--fl-text);
--bs-table-active-bg: rgba(var(--fl-copper-rgb), 0.14);
--bs-table-active-color: var(--fl-copper-bright);
}
/* Column heads: the tracked mono eyebrow, over a firmer rule than the row hairlines.
Cell padding stays Bootstrap's: it has no token, and a rule here would also
override `.table-sm`. */
&.table > thead th {
font-family: var(--fl-mono);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fl-faint);
border-bottom-color: var(--fl-line);
}
/* The last row ends on its container's edge, not on a hairline of its own. */
&.table > tbody > tr:last-child > * {
border-bottom-width: 0;
}
/* The select menus mark their keyboard-focused row with `.table-primary`, which
hardcodes a light-blue row palette — no token to remap. */
&.table-primary {
--bs-table-color: var(--fl-copper-bright);
--bs-table-bg: rgba(var(--fl-copper-rgb), 0.14);
--bs-table-border-color: var(--fl-hair);
--bs-table-striped-bg: rgba(var(--fl-copper-rgb), 0.14);
--bs-table-striped-color: var(--fl-copper-bright);
--bs-table-active-bg: rgba(var(--fl-copper-rgb), 0.2);
--bs-table-active-color: var(--fl-copper-bright);
--bs-table-hover-bg: rgba(var(--fl-copper-rgb), 0.2);
--bs-table-hover-color: var(--fl-copper-bright);
}
/* Tabs: mono tracked keys on a hairline, the active one underlined in copper.
Bootstrap zeroes an underline link's inline padding; the key keeps its own, so the
underline spans the whole key. */
&.nav-underline {
--bs-nav-underline-gap: 0.4rem;
--bs-nav-underline-link-active-color: var(--fl-copper);
--bs-nav-link-color: var(--fl-faint);
--bs-nav-link-hover-color: var(--fl-dim);
--bs-nav-link-font-size: 0.7rem;
--bs-nav-link-font-weight: 600;
border-bottom: 1px solid var(--fl-hair);
}
&.nav-underline .nav-link {
padding-inline: 0.85rem;
font-family: var(--fl-mono);
letter-spacing: 0.16em;
text-transform: uppercase;
transition:
color var(--fl-dur) var(--fl-ease),
border-color var(--fl-dur) var(--fl-ease);
}
/* Bootstrap hardcodes its focus blue on `.nav-link:focus-visible` and its active
pill blue on `.nav-pills` — no token to remap for the first. */
&.nav-link:focus-visible {
box-shadow: 0 0 0 0.2rem rgba(var(--fl-copper-rgb), 0.25);
}
&.nav-pills {
--bs-nav-pills-link-active-color: var(--fl-on-copper);
--bs-nav-pills-link-active-bg: var(--fl-copper);
}
/* Dropdown menus (FileBrowser row-action menus — also portal/absolute content). */
&.dropdown-menu {
--bs-dropdown-bg: var(--fl-bg-2);
--bs-dropdown-color: var(--fl-text);
--bs-dropdown-link-color: var(--fl-text);
--bs-dropdown-link-hover-color: var(--fl-text);
--bs-dropdown-link-hover-bg: var(--fl-key-bg-hover);
--bs-dropdown-link-active-bg: var(--fl-key-bg-hover);
--bs-dropdown-link-active-color: var(--fl-text);
--bs-dropdown-border-color: var(--fl-panel-bd);
--bs-dropdown-divider-bg: var(--fl-hair);
}
/* Upload progress (drop zone / FileBrowser upload panel). */
&.progress {
background-color: var(--fl-key-bg);
}
&.progress-bar {
background-color: var(--fl-copper);
}
/* Status tags: mono, tracked, all-caps, on whichever subtle family the markup picks
(secondary for a neutral tag, success/warning/danger for an outcome). */
&.badge {
--bs-badge-padding-x: 0.45rem;
--bs-badge-padding-y: 0.12rem;
--bs-badge-font-size: 0.6rem;
--bs-badge-font-weight: 600;
--bs-badge-border-radius: 0.4rem;
font-family: var(--fl-mono);
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* The sidebar counts: digits, so no tracking and no caps, and roomier than a tag. */
&.badge.rounded-pill {
--bs-badge-padding-x: 0.5rem;
--bs-badge-padding-y: 0.08rem;
--bs-badge-font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: none;
}
/* Notices: the empty/loading well, the save outcomes, the corner toasts. Bootstrap
derives every variant's colour from the subtle families remapped above. */
&.alert {
--bs-alert-padding-y: 0.85rem;
--bs-alert-padding-x: 1rem;
--bs-alert-border-radius: 0.7rem;
font-size: 0.9rem;
}
/* The empty/loading notice reads as an outline waiting to be filled, not as a filled
status banner — hence dashed, and a row so an icon sits beside the text. */
&.alert-secondary {
border-style: dashed;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Outcome banners keep body text in the reading colour and spend the accent on the
leading `strong`, which is what carries the outcome. */
&.alert-danger,
&.alert-success {
--bs-alert-color: var(--fl-text);
}
&.alert-danger strong,
&.alert-success strong {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
&.alert-danger strong {
color: var(--fl-red);
}
&.alert-success strong {
color: var(--fl-green);
}
}
}
.wc-routingProgress-6d0dc03 {
position: fixed;
top: 0;
inset-inline-start: 0;
width: 100%;
z-index: 2000;
}
.wc-routingProgress-6d0dc03 progress {
display: block;
height: 6px;
width: 100%;
background: none;
border: none;
}
/* Fixed full-viewport app frame: a *definite* height (not min-height) so the
flex chain below resolves to real pixels. The sticky header keeps its natural
height above .main (no magic margin to desync). A definite height is required
by the Cesium map: with only min-height the flex chain sizes to content, and
Cesium sizing its canvas to that container feeds an unbounded canvas-growth
loop (the canvas climbed to ~58000px tall, re-deriving the 2D frustum every
frame → the map appeared to drift/zoom on its own). */
.wc-appShell-6d0dc03 {
display: flex;
flex-direction: column;
height: 100dvh;
overflow: hidden;
}
.wc-main-6d0dc03 {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
position: relative;
border-top: 1px solid transparent;
/* Frame no longer scrolls — tall pages (user/device lists) scroll in here.
The map page's .dashboard is overflow:hidden and fills exactly, so it
never scrolls. */
overflow-y: auto;
}
.theme-aware-logo {
fill: currentColor;
}
[data-bs-theme="dark"] .theme-aware-logo {
filter: invert(1);
}
/* Theme-invariant globals. The per-theme palettes and the Bootstrap skin live in
theme/Console.css and theme/Day.css, the erp-style spacing/radius scale in tokens.css.
This folder is scanned by stylance like src/: Bootstrap classes go through :global(),
element and attribute selectors and custom properties pass untouched. */
body {
/* Theme-invariant tokens, on `body` so portal-rendered content inherits them too. */
--fl-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
/* Motion scale. `--fl-dur` is the house micro-transition that was previously
spelled out by hand in every module; `--fl-press` is the tactile
button/row depress. Everything animated should pick from these four, so a
single edit retunes the whole console — and so the reduced-motion override
below has one set of names to neutralise. */
--fl-press: 80ms;
--fl-dur-fast: 120ms;
--fl-dur: 160ms;
--fl-dur-slow: 320ms;
/* Decelerating: fast to leave, slow to settle. Reads as physical, not linear. */
--fl-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
/* Ambient (looping, decorative) motion — the map's live-vessel sonar ping and the
poll heartbeat. Kept as its own pair so reduced-motion can stop the loops dead
while still allowing the short state transitions above. */
--fl-ping-dur: 2400ms;
--fl-ping-iter: infinite;
/* Per-item delay for staggered list entrances. */
--fl-stagger: 45ms;
}
/* Reduced motion, done through the tokens rather than a blanket `* { animation: none }`.
A global sweep would also hit the embedded foiler_ui dashboard, whose gauges animate to
convey state; neutralising the tokens reaches exactly the surfaces authored against this
design system, because custom properties inherit through every hashed module below.
The map's marker interpolation is disabled separately, in Rust — see fleet_map/motion.rs. */
@media (prefers-reduced-motion: reduce) {
body {
--fl-press: 1ms;
--fl-dur-fast: 1ms;
--fl-dur: 1ms;
--fl-dur-slow: 1ms;
--fl-ping-dur: 1ms;
--fl-ping-iter: 1;
--fl-stagger: 0ms;
}
}
/* Embedded-dashboard boundary: the themes remap Bootstrap tokens on `body`, and custom
properties inherit into the stock-Bootstrap Wingman / vessel dashboards (roots carrying
their own `data-bs-theme`) regardless of the selector donut. Only the tokens Bootstrap
5.3.8's `[data-bs-theme=dark]` block does NOT re-declare there need resetting; the rest
(body-color/bg, emphasis/secondary/tertiary, border-color, link colors, *-bg-subtle/
*-border-subtle, form-valid/invalid colors) are element-level there and beat inheritance
anyway. Values = Bootstrap's stock `:root` ones. */
body [data-bs-theme] {
--bs-border-radius: 0.375rem;
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-primary: #0d6efd;
--bs-primary-rgb: 13, 110, 253;
--bs-danger: #dc3545;
--bs-danger-rgb: 220, 53, 69;
--bs-success: #198754;
--bs-success-rgb: 25, 135, 84;
}
svg.fa {
overflow: visible;
box-sizing: content-box;
vertical-align: -0.125em;
}
.scrollable-list {
overflow-y: auto;
width: 100%;
}
svg[role="graphics-symbol"] {
display: inline-block;
overflow: visible;
vertical-align: -0.125em;
}
/* Console top bar: glass strip with a copper hairline, mono tracked-out links.
Keeps Bootstrap's `.navbar`/collapse layout + JS; overrides the chrome. Inherits
the --fl-* palette from the body theme class (see styles/theme/). */
.wc-bar-2ff1bbb {
background: var(--fl-panel);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--fl-panel-bd);
padding: 0.5rem 1rem;
}
/* The wordmark's dark/light flip rides the global `.theme-aware-logo` rule
(app.css), keyed on the theme-driven `data-bs-theme`. */
.wc-brand-2ff1bbb img {
opacity: 0.92;
}
.wc-toggler-2ff1bbb {
border-color: var(--fl-key-bd);
}
.wc-link-2ff1bbb {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--fl-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fl-faint);
transition: color var(--fl-dur) var(--fl-ease);
}
.wc-link-2ff1bbb:hover,
.wc-link-2ff1bbb:focus {
color: var(--fl-text);
}
/* leptos_router marks the active route with aria-current="page". */
.wc-link-2ff1bbb[aria-current] {
color: var(--fl-copper);
}
.wc-link-2ff1bbb svg {
font-size: 0.95rem;
}
.wc-icon-b0a6c08 {
font-size: 8em;
margin: var(--space-8);
}
/**
* Design tokens — local ERP design system.
*
* Loaded as part of bins/erp/public/erp/bundle.css (last in the cascade), so
* these :root declarations are visible to every prior stylesheet (Bootstrap,
* shared_component, every component CSS bundled in views_bundle.css).
*
* Convention:
* --space-N spacing scale, 4px base, integer step = step * 4px
* (matches the Bootstrap spacer ladder: var(--space-2) <-> p-2, etc.)
* --radius-* border radius scale
* --shadow-* box-shadow tiers (migrate case-by-case -- alphas can differ)
* --transition-* transition timings
* --font-size-* font-size scale
*/
:root {
/* ---------- Spacing scale (4px base) ---------- */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
/* ---------- Border radius ---------- */
--radius-sm: 0.25rem; /* 4px — replaces "4px" and "0.25rem" radii */
--radius-md: 0.5rem; /* 8px */
--radius-lg: 0.625rem; /* 10px — consolidates the 0.65rem near-duplicate */
--radius-xl: 0.75rem; /* 12px */
--radius-2xl: 1rem; /* 16px */
--radius-pill: 50rem; /* matches Bootstrap .rounded-pill */
--radius-circle: 50%;
/* ---------- Shadow ----------
*
* Values calibrated to the most-used shadows in the codebase. Other
* variants (alphas like 0.12 / 0.15 / 0.20 / 0.30, blurs of 6px or
* 8px) are intentional one-offs and stay raw -- the depth is part of
* the component's identity (popups, modals, drag-overs, etc.). The
* lint rule (prefer-shadow-token) only fires on the exact patterns
* mapped here.
*/
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
--shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.2);
--shadow-glow-primary: 0 0 8px rgba(13, 110, 253, 0.5);
/* ---------- Transition ---------- */
--transition-fast: 0.15s ease-in-out;
--transition-base: 0.2s ease;
--transition-slow: 0.3s ease;
--transition-snap: 160ms ease; /* deliberately faster than --transition-base */
/* ---------- Font sizes ---------- */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px — Bootstrap "small" */
--font-size-base: 1rem;
--font-size-lg: 1.05rem;
--font-size-xl: 1.15rem;
--font-size-2xl: 1.3rem;
--font-size-3xl: 1.5rem;
}
/* Reusable page primitives shared by the cloud views: the console page frame and its
columns, the page header, the sidebar list, the status dot, the hints and the toasts.
Global classes, written as plain strings in the markup like Bootstrap's; the per-theme
--fl-* palette comes from theme/, the theme-invariant tokens from main.css. This folder
is scanned by stylance like src/, so every class goes through :global(). */
/* --- Page frame: fills .main, paints the console background + instrument grid. -- */
.page-wrap {
position: relative;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
overflow: hidden;
color: var(--fl-text);
font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
background: radial-gradient(140% 110% at 80% 50%, var(--fl-bg-2), var(--fl-bg) 70%);
}
.page-wrap::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.5;
background-image: linear-gradient(var(--fl-hair) 1px, transparent 1px), linear-gradient(90deg, var(--fl-hair) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(85% 85% at 50% 50%, #000, transparent 92%);
mask-image: radial-gradient(85% 85% at 50% 50%, #000, transparent 92%);
}
/* Two-column body: a list rail + the detail/outlet pane. Children sit above the grid.
No gap: the two-column pages put the drag handle between the columns and it carries
the separation itself, so a gap here would double it. The single-column pages have
no gap to draw either way. */
.page-body {
position: relative;
z-index: 1;
flex: 1 1 auto;
min-height: 0;
display: flex;
}
.list-col {
/* The drag handle publishes the width the user chose here; with nothing
stored the clamp below is what applies, as it did before the handle. */
flex: 0 0 var(--resize-bar-size, clamp(240px, 24%, 360px));
/* A dragged width is remembered per browser and outlives the window it was
chosen in, so cap it against the page body: the detail pane has to stay
usable when the same browser later opens a narrower window. */
max-inline-size: 60%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
.detail-col {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
overflow-y: auto;
padding-inline-end: 0.25rem;
}
/* --- Page / section header (mono tracked copper title + count badge). ---------- */
.page-header {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.1rem 0.2rem 0.75rem;
}
.page-title {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-family: var(--fl-mono);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--fl-copper);
}
.page-title svg {
font-size: 1rem;
}
/* --- Selectable glass list (the management sidebars). -------------------------
`.sidebar-list` is a sidebar's scrolling column and also carries Bootstrap's
`.list-group`; each row is a `.list-group-item-action` link inside an .
Separated, individually rounded glass rows are this column's look, so they stay
scoped to it: in the theme files they would reshape every list-group, whose
items Bootstrap joins into one bordered block. */
.sidebar-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 0.1rem 0.25rem 0.6rem 0.1rem;
margin: 0;
list-style: none;
}
.sidebar-list.list-group {
--bs-list-group-bg: var(--fl-panel);
--bs-list-group-border-radius: 0.85rem;
--bs-list-group-item-padding-x: 0.85rem;
--bs-list-group-item-padding-y: 0.7rem;
--bs-list-group-action-color: var(--fl-text);
--bs-list-group-action-hover-color: var(--fl-text);
--bs-list-group-action-hover-bg: var(--fl-key-bg-hover);
--bs-list-group-action-active-color: var(--fl-text);
--bs-list-group-action-active-bg: var(--fl-key-bg-hover);
}
/* Bootstrap rounds only a list's first and last item, by inheriting the list's
radius; the between them breaks that inheritance, so each row states it. */
.sidebar-list .list-group-item {
border-radius: var(--bs-list-group-border-radius);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
overflow: hidden;
transition: border-color var(--fl-dur) var(--fl-ease), background-color var(--fl-dur) var(--fl-ease), box-shadow var(--fl-dur) var(--fl-ease), transform var(--fl-press) var(--fl-ease);
}
/* Copper status spine, lit on hover / selection. */
.sidebar-list .list-group-item-action::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--fl-copper);
opacity: 0;
transition: opacity var(--fl-dur) var(--fl-ease);
}
.sidebar-list .list-group-item-action:hover {
border-color: var(--fl-key-bd);
}
.sidebar-list .list-group-item-action:hover::before {
opacity: 0.5;
}
.sidebar-list .list-group-item-action:active {
transform: translateY(1px);
}
/* The router's marks the active row link with aria-current="page", so the
selected style is pure CSS — no selection signal mirrored from the edit route. */
.sidebar-list .list-group-item-action[aria-current="page"] {
border-color: var(--fl-copper);
background-color: var(--fl-key-bg-hover);
box-shadow: 0 0 0 1px var(--fl-copper), 0 10px 30px rgba(0, 0, 0, 0.45);
}
.sidebar-list .list-group-item-action[aria-current="page"]::before {
opacity: 1;
}
.row-meta {
display: flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.28rem;
font-family: var(--fl-mono);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--fl-faint);
}
/* --- Status primitives. --------------------------------------------------------
Status *words* are Bootstrap badges on the subtle families (see
bins/cloud/styles/theme/); what remains here is the wordless presence dot, which
has no Bootstrap counterpart. */
.status-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
flex: 0 0 auto;
}
.status-dot-offline {
background: var(--fl-faint);
opacity: 0.5;
}
/* Centered hint filling the detail pane ("Select a device / user"). */
.select-hint {
display: flex;
align-items: center;
justify-content: center;
min-height: 60%;
padding: 2rem;
font-family: var(--fl-mono);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--fl-faint);
text-align: center;
}
/* Icon + label row inside select triggers and menu entries. */
.select-menu-row {
display: flex;
align-items: center;
gap: 0.55rem;
color: var(--fl-text);
svg {
flex: 0 0 auto;
width: 1rem;
color: var(--fl-copper);
}
}
/* Bottom-inline-end toast stack (client errors + notification popups). */
.toast-corner {
position: fixed;
bottom: 20px;
inset-inline-end: 20px;
}
/* Single-column card pages (profile) — a readable measure, centred under the navbar. */
.narrow-panel {
max-width: 520px;
width: 100%;
margin: 1.5rem auto 0;
}