/* THE TOKEN FILE (colour-token sweep, operator 2026-10-01). Every colour in Aegis.Web is defined once,
here, in the two theme blocks below: :root (dark, and the default for both themes) and
:root[data-theme="light"]. Pages, components and C#-emitted styles use var(--aegis-...).
Aegis.Tests ColourLiteralGuardTests fails on a colour literal anywhere else, including app.css rules
outside these two blocks. */
/* Global typography standards */
:root {
--aegis-font-family: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
/* AEGIS DESIGN STANDARD v2.1 §3 (operator 2026-10-15): FIVE font sizes only, and one token per text role.
Size-only (no colour), shared by both themes. Every size below and every role token points at one of the
five sizes; the older operator-settable tokens further down point at their role. */
--aegis-font-family-mono: "Cascadia Mono", Consolas, "Courier New", monospace;
--aegis-font-size-14: 14px;
--aegis-font-size-16: 16px;
--aegis-font-size-22: 22px;
--aegis-font-size-24: 24px;
--aegis-font-size-28: 28px;
--aegis-app-name-size: var(--aegis-font-size-24);
--aegis-app-name-weight: 600;
--aegis-topbar-page-name-size: var(--aegis-font-size-16);
--aegis-topbar-page-name-weight: 700;
--aegis-page-title-size: var(--aegis-font-size-22);
/* v2.2 §3 (Phase 1B-FIX): the page heading is BOLD, 700 (it was 500). */
--aegis-page-title-weight: 700;
--aegis-page-title-letter-spacing: .06em;
--aegis-panel-heading-size: var(--aegis-font-size-16);
--aegis-panel-heading-weight: 700;
--aegis-panel-heading-letter-spacing: .08em;
--aegis-sub-heading-size: var(--aegis-font-size-14);
--aegis-sub-heading-weight: 700;
--aegis-table-heading-size: var(--aegis-font-size-14);
--aegis-table-heading-weight: 700;
--aegis-field-label-size: var(--aegis-font-size-14);
--aegis-field-label-weight: 600;
--aegis-body-text-size: var(--aegis-font-size-14);
--aegis-body-text-weight: 400;
--aegis-help-text-size: var(--aegis-font-size-14);
--aegis-help-text-weight: 400;
--aegis-kpi-number-size: var(--aegis-font-size-28);
--aegis-kpi-number-weight: 700;
--aegis-monospace-size: var(--aegis-font-size-14);
--aegis-monospace-weight: 400;
/* v2.1 §3: the six typography names that were used but never defined, each pointing at its §3 role. */
--aegis-small-text-size: var(--aegis-help-text-size);
--aegis-section-title-size: var(--aegis-panel-heading-size);
--aegis-section-title-weight: var(--aegis-panel-heading-weight);
--aegis-body-title-size: var(--aegis-sub-heading-size);
--aegis-body-title-weight: var(--aegis-sub-heading-weight);
--aegis-label-text-weight: var(--aegis-field-label-weight);
--aegis-topbar-title-size: var(--aegis-app-name-size);
--aegis-topbar-title-weight: var(--aegis-app-name-weight);
--aegis-topbar-title-color: #e7edf0;
--aegis-topbar-primary-size: var(--aegis-topbar-page-name-size);
--aegis-topbar-primary-weight: var(--aegis-topbar-page-name-weight);
--aegis-topbar-primary-color: var(--aegis-status-good-color);
--aegis-panel-title-size: var(--aegis-panel-heading-size);
--aegis-panel-title-weight: var(--aegis-panel-heading-weight);
--aegis-panel-title-color: #e7edf0;
/* LOGO job (operator 2026-10-17 21:18 Q2): the title and subtitle of the sign-in and two-factor pages: white in
dark, the title colour in light. */
--aegis-sign-in-text-color: #ffffff;
--aegis-regular-text-size: var(--aegis-body-text-size);
--aegis-regular-text-weight: var(--aegis-body-text-weight);
--aegis-regular-text-color: #e7edf0;
/* v2.1 §3: chart titles, legends and axis labels use the 14 px size. */
--aegis-graph-title-size: var(--aegis-font-size-14);
--aegis-graph-title-weight: 600;
--aegis-graph-legend-size: var(--aegis-font-size-14);
--aegis-graph-legend-weight: 400;
--aegis-graph-axis-size: var(--aegis-font-size-14);
--aegis-graph-axis-weight: 400;
--aegis-graph-axis-unit-weight: 600;
--aegis-button-background: var(--aegis-status-good-color);
--aegis-button-text-color: #ffffff;
--aegis-button-border-color: var(--aegis-status-good-color);
--aegis-accent-color: var(--aegis-status-good-color);
--aegis-accent-hover-color: color-mix(in srgb, var(--aegis-status-good-color) 82%, white);
--aegis-page-background: #0b0f11;
--aegis-topbar-background: #0b0f11;
--aegis-surface-background: #131a1e;
--aegis-surface-hover-background: #202b30;
--aegis-panel-background: var(--aegis-surface-background);
--aegis-panel-border-color: #202b30;
/* WEB-FIX-01 item 2: the ONE input background IS the field background (the Tenant and Site / Branch dropdowns' own). */
--aegis-input-background: var(--aegis-field-background);
--aegis-input-border-color: #202b30;
--aegis-focus-color: var(--aegis-status-good-color);
--aegis-on-accent-color: #ffffff;
--aegis-muted-text-color: #93a3ab;
--aegis-hover-border-color: #6c7c84;
--aegis-table-border-color: #202b30;
--aegis-overlay-background: rgba(0, 0, 0, 0.75);
--aegis-topbar-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
--aegis-dropdown-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
--aegis-modal-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
--aegis-scan-idle-background: #10161a;
--aegis-health-ring-track-color: color-mix(in srgb, var(--aegis-regular-text-color) 38%, var(--aegis-surface-background));
/* v2.1 §2 and §5: the other seven names that were used but never defined, each pointing at an existing token
(no new colour): field text and body text = regular text; a control's hover = surface hover; the
.audit-action-button hover = the ONE shared neutral button hover; a section heading inside a panel = the
sub-heading colour of §3, the system colour. */
--aegis-input-text-color: var(--aegis-regular-text-color);
--aegis-body-text-color: var(--aegis-regular-text-color);
--aegis-control-hover-background: var(--aegis-surface-hover-background);
--aegis-section-heading-color: var(--aegis-status-good-color);
--aegis-button-hover-background: var(--aegis-btn-neutral-hover-background);
--aegis-button-hover-border-color: var(--aegis-btn-neutral-hover-border-color);
--aegis-button-hover-text-color: var(--aegis-btn-neutral-text-color);
--aegis-danger-text-color: #ff9999;
--aegis-danger-border-color: #5a1a1a;
--aegis-danger-row-border-color: #3a0a0a;
--aegis-warning-border-color: #4a3a1a;
--aegis-modal-control-color: #e7edf0;
--aegis-modal-control-hover-background: #202b30;
--aegis-row-surface-background: #10161a;
--aegis-row-border-color: #202b30;
/* v2.1 §2 (operator decision 3, Phase 1B): disabled and paused are the standard status grey (hover-border). */
--aegis-disabled-status-color: var(--aegis-hover-border-color);
--aegis-status-paused-color: var(--aegis-hover-border-color);
--aegis-status-paused-background: #29313a;
--aegis-status-paused-section-background: #313b46;
--aegis-status-good-color: #389F54;
/* AEGIS DESIGN STANDARD v2.1 §2 (operator 2026-10-15): ONE status set, the --aegis-status-* tokens.
Warning / information = amber, critical / error / failure = red, and red TEXT uses the lighter red text
token (--aegis-status-critical-text-color = the danger-text value of the theme) so it reads on dark.
Suspended / unknown / not reporting / disabled = grey, the hover-border token.
The older --aegis-health-* names are ALIASES of the status set (no colour of their own) until every page
uses the status set. Phase 1B (operator decision 3): health-agent-offline and health-muted are the standard
grey too. */
--aegis-status-critical-text-color: var(--aegis-danger-text-color);
/* v2.1 §2 (operator decision 1(c), Phase 1B): the READABLE status TEXT variants, one per status and theme, each
drawn from the status set, each at least 4.5:1 on the page, top bar, surface and surface-hover backgrounds of
its theme (test: DesignStandardV21RenderTests). Dark: green and grey a step lighter, amber and red text as
the status set. */
--aegis-status-good-text-color: color-mix(in srgb, var(--aegis-status-good-color) 85%, #ffffff);
--aegis-status-warning-text-color: var(--aegis-status-warning-color);
--aegis-status-grey-text-color: color-mix(in srgb, var(--aegis-hover-border-color) 80%, #ffffff);
--aegis-health-healthy: var(--aegis-status-good-color);
--aegis-health-warning: var(--aegis-status-warning-color);
--aegis-health-critical: var(--aegis-status-critical-color);
--aegis-health-suspended: var(--aegis-hover-border-color);
--aegis-health-agent-offline: var(--aegis-hover-border-color);
--aegis-health-unknown: var(--aegis-hover-border-color);
--aegis-health-muted: var(--aegis-hover-border-color);
--aegis-status-snmp-color: #42BD63;
/* v2.1 §1: the pulse glow follows the pulse colour (it was a fixed cyan). */
--aegis-status-snmp-glow: color-mix(in srgb, var(--aegis-status-snmp-color) 50%, transparent);
--aegis-status-warning-color: #f0a30a;
--aegis-status-warning-glow: rgba(240, 163, 10, 0.5);
--aegis-status-warning-tint-background: rgba(240, 163, 10, 0.15);
--aegis-status-critical-color: #C50212;
--aegis-status-warning-background: #2a1a0a;
--aegis-status-critical-background: #2a0a0a;
--aegis-status-on-demand-color: var(--aegis-status-good-text-color);
--aegis-status-critical-strong-text-color: #FF5252;
--aegis-switch-off-color: #6c757d;
--aegis-lighten-mix-color: #ffffff;
--aegis-shadow-color: #000000;
--aegis-on-accent-dark-text-color: #04231b;
/* UiFix4 (operator 2026-10-09 22:06): the TEXT colour of the NOC status counters (outline boxes, no fill),
per status and per theme, so every count reads at least 4.5:1 on the strip (--aegis-topbar-background).
Dark theme: a brighter red and a brighter grey; the other three status colours already pass
(Failure 5.9, Healthy 5.7, Suspended 6.1, Warning 9.1, Not Reporting 5.5). Defined in both theme blocks.
AEGIS DESIGN STANDARD v2.1 §2 (operator decision 1(c), Phase 1B): every counter name points at the readable
status TEXT variant of the ONE status set; the UiFix4 typed values are gone. */
--aegis-counter-text-critical-color: var(--aegis-status-critical-text-color);
--aegis-counter-text-good-color: var(--aegis-status-good-text-color);
--aegis-counter-text-warning-color: var(--aegis-status-warning-text-color);
--aegis-counter-text-paused-color: var(--aegis-status-grey-text-color);
--aegis-counter-text-disabled-color: var(--aegis-status-grey-text-color);
--aegis-ha-badge-background: #ffffff;
--aegis-ha-badge-text-color: #000000;
--aegis-card-full-height: 250px;
--aegis-card-compact-height: 74px;
/* UI standard pass 1 (2026-10-03, AEGIS-Interface-Standard.md rules 4 and 5). Size-only
variables (no colour), shared by both themes. */
--aegis-btn-height: 2.25rem;
/* AEGIS UI STANDARD v1.1 (operator 2026-10-11 16:09, rule C): there is NO single button width any more (it was
200px). A button is as wide as its label plus this ONE side padding; buttons of the same kind in one group
share the width of the longest label of THAT group (the shared group rule further down, by CSS alone).
--aegis-btn-char-width is the width of one character of button text (one digit at the standard button text
size, 0.875rem): the action column of a table is sized from its own button labels with it
(AegisTableColumn.Actions), so no page writes a pixel width. */
--aegis-btn-padding-x: 1.25rem;
--aegis-btn-border-width: 1px;
--aegis-btn-char-width: 0.5rem;
--aegis-statusbox-height: 24px;
--aegis-statusbox-width: 180px;
/* Corrected 2026-10-03 09:42 (operator): button rows are right-aligned, with one shared gap
variable so buttons never touch. */
--aegis-btn-gap: 10px;
/* Agent Configuration polish (operator, pasted 2026-10-03 ~18:45 CST), item 1: one shared
colgroup, used by both the Your Agents and Agent Cluster tables (.agent-fleet-table), so
the six shared columns (plus the actions column, reserved even on a row with no buttons)
line up vertically between the two tables.
AgentConfig-Cols (operator, pasted 2026-10-03 ~21:1x CST, AEGIS-Interface-Standard.md rule
13): the actions column is sized from the maximum number of standard buttons any row in
either table holds - 4 (Make Active, Remove, Settings, Retire) - not a plain percentage,
so the buttons never shrink below 120x36 or wrap. --aegis-table-cell-padding is the same
8px this table's
/
padding already uses (AgentConfigurationStyles.razor), reused
here rather than a second literal. The six data-column percentages below sum to 100% and
are sized to their content (Agent only needs to fit the agent name + agent id); the actions
column's calc() is added on top, which is how table-layout:fixed is actually implemented in
Chromium/Edge when fixed-width and percentage
widths are mixed (percentages resolve
against the width remaining after the fixed columns) - confirmed empirically by this pass's
own Playwright measurement, not assumed. */
--aegis-table-cell-padding: 8px;
--agent-fleet-col-agent-width: 22%;
--agent-fleet-col-client-width: 26%;
--agent-fleet-col-status-width: 12%;
--agent-fleet-col-role-width: 12%;
--agent-fleet-col-version-width: 10%;
--agent-fleet-col-lastseen-width: 18%;
/* UI STANDARD v1.1 (rule C): the actions column of the agent tables is no longer a theme variable built on one
button width. It is sized from the tables' own button labels (AgentFleetColumns, AegisTableColumn.Actions). */
/* AgentConfig-Align r2 (operator, pasted 2026-10-03 ~20:1x CST): both .agent-fleet-table
headers (Your Agents and Agent Cluster) are bold, from this one shared size token - not
--aegis-panel-title-weight (600), a different token with a different meaning (panel
section titles). Size-only, theme-independent like the other --agent-fleet-* tokens above,
so it is defined once here and not duplicated into the light theme block below. */
--aegis-table-header-weight: var(--aegis-table-heading-weight);
/* Button style system (operator 2026-10-09 20:00, AEGIS-Interface-Standard.md rule 5): ONE shared
set of button variables, used only by the shared .btn rules further down. Every value is a reference
to a theme token, so the light block's tokens apply automatically (light + dark, defined once).
- neutral: navigation and secondary/page buttons, a grey outline;
- selected: the current page / selected toggle, filled system teal only (operator 2026-10-09 21:32:
no indicator bar or underline under a selected button);
- danger: destructive actions (Reject, Retire, Remove, Delete), a red outline;
- focus ring: only while using the keyboard (:focus-visible), never a permanent line;
- compact size: the ONE smaller button size (the NOC "Only" button beside a menu switch), because a
36 x 120 button does not fit beside a switch in the 240 px menu column. */
--aegis-btn-neutral-border-color: var(--aegis-hover-border-color);
--aegis-btn-neutral-text-color: var(--aegis-regular-text-color);
--aegis-btn-neutral-hover-background: var(--aegis-surface-hover-background);
/* v2.1 §5 (Phase 1B): hover = the surface-hover background and a system-colour outline. */
--aegis-btn-neutral-hover-border-color: var(--aegis-status-good-color);
--aegis-btn-selected-background: var(--aegis-status-good-color);
/* AEGIS UI STANDARD v1 (part A item 3): a SELECTED button is filled system green with BLACK text, in both
themes (defined once here; the light block does not change it). */
--aegis-btn-selected-text-color: #000000;
--aegis-btn-danger-border-color: var(--aegis-health-critical);
--aegis-btn-danger-text-color: var(--aegis-danger-text-color);
--aegis-btn-danger-hover-background: var(--aegis-status-critical-background);
--aegis-btn-focus-ring-width: 2px;
--aegis-btn-compact-height: 1.75rem;
--aegis-btn-compact-width: 64px;
/* UiFix5 (operator 2026-10-09 22:35): scroll bars follow the active AEGIS theme. Names only, each pointing to an
existing theme token (no new colour), so the light block's values apply automatically (light + dark, defined
once). Used only by the shared scroll-bar rules after the body rule below. */
--aegis-scrollbar-thumb-color: var(--aegis-hover-border-color);
--aegis-scrollbar-track-color: var(--aegis-surface-background);
--aegis-scrollbar-size: 12px;
/* AEGIS DESIGN STANDARD v2.1, Phase 1B (§4, §6, §7, §9): the page frame and the shared components. Size-only
names are defined once here; the colour names are in both theme blocks.
- one left edge for the frame (§4): 40 px, 16 px on a phone (the narrow-window rule further down); the
layout gutter is the Bootstrap px-4 of the page column (pages move onto the edge in Phase 3);
- three corner radii only (§9): 4 px, 10 px and round. */
--aegis-page-edge: 40px;
/* AEGIS DESIGN STANDARD v2.2 §4 (Phase 1B-FIX, operator 2026-10-15 22:37-22:44): the spacing standard of the frame,
ONE value per gap, the same on every page: the pulse line -> the page-tab row (Full Screen sits this far below
the pulse line, never touching it), and the page-tab row -> the page header section. */
--aegis-frame-pulse-tabs-gap: 8px;
--aegis-frame-tabs-header-gap: 16px;
/* AEGIS DESIGN STANDARD v2.2 §4 item 1 (Phase 1B-FIX r2, operator Q2, 2026-10-15 ~23:4x): the top-bar logo. The
width kept for it in the middle of the top bar, and the clear space on each side of it (it never touches the
left or the right block). */
--aegis-topbar-logo-slot: 120px;
--aegis-topbar-logo-clearance: 16px;
/* OVERVIEW PHASE 2 (operator 2026-10-17, item 5, option B): the ring of the ONE share donut in the top bar (AegisDonut
Size TopBar): it fits inside the top bar (about 115 px high), so the top bar keeps its height. */
--aegis-topbar-donut-size: 114px;
--aegis-layout-gutter: 1.5rem;
--aegis-radius-card: 4px;
/* Overview r2 (operator answer Q3, 2026-10-16 19:17; approved exception to the Design Standard's 10 px): every
field (select, search box, text box) and the dialog take almost square corners, 4 px, app-wide. Token only. */
--aegis-radius-field: 4px;
--aegis-radius-round: 999px;
--aegis-field-height: 44px;
--aegis-field-padding-x: 14px;
/* Overview r3 (operator 2026-10-16 20:52, item 4): the compact field (AegisField Compact) has the top-bar View
dropdown's size: Bootstrap's small select (form-select-sm: 0.25rem top and bottom padding, 0.5rem left padding,
line height 1.5, 1 px border) at the regular text size, and the View dropdown's least width (TopBarHeader,
.tenant-view-select). */
--aegis-field-compact-height: calc((var(--aegis-regular-text-size) * 1.5) + 0.5rem + 2px);
--aegis-field-compact-padding-x: 0.5rem;
--aegis-field-compact-min-width: 260px;
/* Overview r3 (item 2): the KPI card's share pill has ONE size whatever its number ("0%" to "100%"). */
--aegis-kpi-share-width: calc(5ch + 22px);
--aegis-kpi-share-height: 24px;
--aegis-panel-padding: 20px;
--aegis-card-gap: 16px;
--aegis-panel-gap: 24px;
--aegis-dot-size: 10px;
--aegis-timeline-height: 24px;
/* §6: the shared field is one step lighter than the surface, with a clearly visible border; §7: the toggle
knob. Colour names, so the light block gives its own values. */
--aegis-field-background: #1a2328;
--aegis-field-border-color: #3d4c54;
--aegis-placeholder-color: #6c7c84;
--aegis-toggle-knob-color: #ffffff;
/* B-320 r2: Bootstrap's own knob (an SVG circle, r=3 in a -4 -4 8 8 box = 75% of the height) in the knob colour above (the
colour is typed here because a data URI cannot read a custom property). */
--aegis-toggle-knob-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
/* Overview r2 (operator order 2026-10-16 item 1): the KPI card stands out from the page (a clearly visible border,
the field border), and a status card is tinted in its status (the ONE status set; Healthy = the selected colour
pair's system colour). Mixed from the status set and the surface: no new colour. */
--aegis-kpi-card-border-color: var(--aegis-field-border-color);
--aegis-kpi-tint-healthy-background: color-mix(in srgb, var(--aegis-status-good-color) 16%, var(--aegis-surface-background));
--aegis-kpi-tint-healthy-border: color-mix(in srgb, var(--aegis-status-good-color) 55%, var(--aegis-surface-background));
--aegis-kpi-tint-warning-background: color-mix(in srgb, var(--aegis-status-warning-color) 16%, var(--aegis-surface-background));
--aegis-kpi-tint-warning-border: color-mix(in srgb, var(--aegis-status-warning-color) 55%, var(--aegis-surface-background));
--aegis-kpi-tint-failure-background: color-mix(in srgb, var(--aegis-status-critical-color) 18%, var(--aegis-surface-background));
--aegis-kpi-tint-failure-border: color-mix(in srgb, var(--aegis-status-critical-color) 60%, var(--aegis-surface-background));
--aegis-kpi-tint-grey-background: color-mix(in srgb, var(--aegis-hover-border-color) 12%, var(--aegis-surface-background));
--aegis-kpi-tint-grey-border: color-mix(in srgb, var(--aegis-hover-border-color) 55%, var(--aegis-surface-background));
/* Overview r2 (item 6): the series colours of the ONE share donut (AegisDonut), drawn ONLY from the selected colour
pair (system and pulse colour) and the theme's neutrals: no new colour. */
--aegis-series-1: var(--aegis-status-good-color);
--aegis-series-2: var(--aegis-status-snmp-color);
--aegis-series-3: color-mix(in srgb, var(--aegis-status-good-color) 50%, var(--aegis-regular-text-color));
--aegis-series-4: color-mix(in srgb, var(--aegis-status-snmp-color) 55%, var(--aegis-page-background));
--aegis-series-5: color-mix(in srgb, var(--aegis-status-good-color) 55%, var(--aegis-page-background));
--aegis-series-6: color-mix(in srgb, var(--aegis-status-snmp-color) 50%, var(--aegis-regular-text-color));
--aegis-series-7: var(--aegis-muted-text-color);
--aegis-series-8: var(--aegis-hover-border-color);
}
:root[data-theme="light"] {
/* LIGHT THEME OPTION C (operator decision 2026-10-27 07:11, B-225). The operator is light-sensitive: NO white or
near-white surface anywhere in the light theme. This is the ONE palette of the light theme: every light value
below points at one of these names, so another option (A, B) or a tweak is swapped HERE, in one place. The dark
theme (the :root block above) is not touched. Contrast (WCAG AA) of every pair: Aegis.Tests LightThemeOptionCTests.
- page, cards and panels, hover rows: Blue Grey 200, Blue Grey 100 and the shade between them;
- top bar: Blue Grey 700, white text, light teal labels (page name, AEGIS OVERSIGHT), a lighter muted line;
- frozen and sticky rows (page tabs, tenant switch, filter and control rows, frozen table headings): Blue Grey 300
with dark text;
- text #263238, muted text Blue Grey 800, titles as before;
- borders: the UI border (fields, buttons, the switch's off track, the grey status) Blue Grey 800, at least 3:1 on
the page, the card and the sticky rows; the dividers (panel, table and row lines) Blue Grey 300;
- the readable status TEXT (below, v2.1 §2) dark enough to read at least 4.5:1 on the page, the card, the hover
rows AND the sticky rows, for both colour pairs.
The light-only context rules right after this block point existing names at these values inside the top bar and
the sticky rows; they type no colour. The browser draws its own parts (scroll bars, form controls) in light. */
color-scheme: light;
--aegis-light-page-background: #B0BEC5;
--aegis-light-card-background: #CFD8DC;
--aegis-light-card-hover-background: #C0CBD1;
--aegis-light-topbar-background: #455A64;
--aegis-light-topbar-text-color: #FFFFFF;
--aegis-light-topbar-label-color: #80DEEA;
--aegis-light-topbar-muted-text-color: #CFD8DC;
--aegis-light-topbar-idle-color: #607D8B;
--aegis-light-sticky-background: #90A4AE;
--aegis-light-text-color: #263238;
--aegis-light-muted-text-color: #37474F;
--aegis-light-title-color: #111827;
--aegis-light-border-color: #37474F;
--aegis-light-divider-color: #90A4AE;
/* LIGHT-C r2 (job step 3, every light TEXT pair AA): readable TEXT shades of the fixed hues where a shared rule paints
a fill colour as text (the text rules after this block). The fills themselves (system colour, pulse, amber, red)
are not changed. On the light page, card, hover and sticky rows the system colour, amber and red as text are the
readable status text below; the pulse colour as text and, in the dark top bar, amber and the system colour as text
are these. */
--aegis-light-pulse-text-color: color-mix(in srgb, var(--aegis-status-snmp-color) 25%, #000000);
--aegis-light-topbar-warning-text-color: color-mix(in srgb, var(--aegis-status-warning-color) 60%, #ffffff);
--aegis-light-topbar-system-text-color: color-mix(in srgb, var(--aegis-status-good-color) 35%, #ffffff);
/* LIGHT-C r3 (operator 09:08, choice 2): the "On" toggle track and the SELECTED button take a darker fill of the
same hue in light (at least 3:1 on the card and the sticky row, both colour pairs); the selected button's text
on it is the card shade (black would not reach 4.5:1 on the darker fill). Not an outline; one size. */
--aegis-light-selected-fill-color: color-mix(in srgb, var(--aegis-status-good-color) 55%, #000000);
--aegis-light-selected-text-color: var(--aegis-light-card-background);
/* LIGHT-C r3 (choice 1): SNMP Monitor's traffic graph on the light card: the In and Out lines a darker shade of
their own colour, the Total line the text colour (it was white). */
--aegis-light-graph-in-color: color-mix(in srgb, #4FC3F7 50%, #000000);
--aegis-light-graph-out-color: color-mix(in srgb, #F06292 60%, #000000);
--aegis-light-graph-total-color: var(--aegis-light-text-color);
--aegis-topbar-title-color: var(--aegis-light-title-color);
--aegis-topbar-primary-color: var(--aegis-status-good-color);
--aegis-panel-title-color: var(--aegis-light-title-color);
--aegis-sign-in-text-color: var(--aegis-panel-title-color);
--aegis-regular-text-color: var(--aegis-light-text-color);
/* LIGHT-C r2: the text on a filled system-colour button is black in light (white was 3.36:1 on Green), as the
selected button's text already is. */
--aegis-button-text-color: #000000;
--aegis-page-background: var(--aegis-light-page-background);
--aegis-topbar-background: var(--aegis-light-topbar-background);
--aegis-surface-background: var(--aegis-light-card-background);
--aegis-surface-hover-background: var(--aegis-light-card-hover-background);
--aegis-panel-border-color: var(--aegis-light-divider-color);
--aegis-input-background: var(--aegis-field-background);
--aegis-input-border-color: var(--aegis-light-border-color);
--aegis-focus-color: var(--aegis-status-good-color);
--aegis-on-accent-color: #000000;
--aegis-muted-text-color: var(--aegis-light-muted-text-color);
--aegis-hover-border-color: var(--aegis-light-border-color);
--aegis-table-border-color: var(--aegis-light-divider-color);
--aegis-overlay-background: rgba(15, 23, 42, 0.45);
--aegis-topbar-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
--aegis-dropdown-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
--aegis-modal-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
--aegis-scan-idle-background: var(--aegis-light-divider-color);
--aegis-health-ring-track-color: color-mix(in srgb, var(--aegis-regular-text-color) 42%, var(--aegis-surface-background));
--aegis-danger-text-color: #6b0f0f;
--aegis-danger-border-color: #c98d95;
--aegis-danger-row-border-color: #d7a9af;
--aegis-warning-border-color: #b8932f;
--aegis-modal-control-color: #374151;
--aegis-modal-control-hover-background: var(--aegis-light-card-hover-background);
--aegis-row-surface-background: var(--aegis-light-card-hover-background);
--aegis-row-border-color: var(--aegis-light-divider-color);
--aegis-disabled-status-color: var(--aegis-hover-border-color);
--aegis-status-paused-color: var(--aegis-hover-border-color);
--aegis-status-paused-background: color-mix(in srgb, var(--aegis-hover-border-color) 14%, var(--aegis-surface-background));
--aegis-status-paused-section-background: color-mix(in srgb, var(--aegis-hover-border-color) 22%, var(--aegis-surface-background));
--aegis-status-good-color: #389F54;
/* v2.1 §2: the same ONE status set and the same aliases as the dark block (each resolves to the light
value of the token it points at). */
--aegis-status-critical-text-color: var(--aegis-danger-text-color);
/* v2.1 §2 (operator decision 1(c), Phase 1B): light theme, the status set made darker until it reads at least
4.5:1 on the light page, surface and surface-hover backgrounds, and (Option C) on the Blue Grey 300 sticky rows.
The dark top bar shows no status text variant; its text is the context rule's after this block. */
--aegis-status-good-text-color: color-mix(in srgb, var(--aegis-status-good-color) 35%, #000000);
--aegis-status-warning-text-color: color-mix(in srgb, var(--aegis-status-warning-color) 30%, #000000);
--aegis-status-grey-text-color: color-mix(in srgb, var(--aegis-hover-border-color) 60%, #000000);
--aegis-health-healthy: var(--aegis-status-good-color);
--aegis-health-warning: var(--aegis-status-warning-color);
--aegis-health-critical: var(--aegis-status-critical-color);
--aegis-health-suspended: var(--aegis-hover-border-color);
--aegis-health-agent-offline: var(--aegis-hover-border-color);
--aegis-health-unknown: var(--aegis-hover-border-color);
--aegis-health-muted: var(--aegis-hover-border-color);
--aegis-status-snmp-color: #42BD63;
--aegis-status-snmp-glow: color-mix(in srgb, var(--aegis-status-snmp-color) 35%, transparent);
--aegis-status-warning-color: #f0a30a;
--aegis-status-warning-glow: rgba(240, 163, 10, 0.35);
--aegis-status-critical-color: #C50212;
--aegis-status-warning-tint-background: rgba(240, 163, 10, 0.18);
/* Option C: the alert banners' pale tints toned down to sit on the card. */
--aegis-status-warning-background: color-mix(in srgb, var(--aegis-status-warning-color) 22%, var(--aegis-surface-background));
--aegis-status-critical-background: color-mix(in srgb, var(--aegis-status-critical-color) 16%, var(--aegis-surface-background));
--aegis-status-on-demand-color: var(--aegis-status-good-text-color);
--aegis-status-critical-strong-text-color: #9D0000;
--aegis-switch-off-color: var(--aegis-light-border-color);
--aegis-lighten-mix-color: var(--aegis-light-card-background);
--aegis-shadow-color: #0f172a;
--aegis-on-accent-dark-text-color: #04231b;
/* UiFix4, light theme: the NOC counter text on the strip, at least 4.5:1 (Option C: the strip is Blue Grey 300).
v2.1 §2 (operator decision 1(c),
Phase 1B): every counter name points at the readable status TEXT variant; the UiFix4 typed values are gone. */
--aegis-counter-text-critical-color: var(--aegis-status-critical-text-color);
--aegis-counter-text-good-color: var(--aegis-status-good-text-color);
--aegis-counter-text-warning-color: var(--aegis-status-warning-text-color);
--aegis-counter-text-paused-color: var(--aegis-status-grey-text-color);
--aegis-counter-text-disabled-color: var(--aegis-status-grey-text-color);
--aegis-ha-badge-background: var(--aegis-light-sticky-background);
--aegis-ha-badge-text-color: #000000;
/* v2.1 Phase 1B (§6, §7): the shared field and the toggle knob, light theme. Option C: the field is the card
shade (no white) with the UI border. */
--aegis-field-background: var(--aegis-light-card-background);
--aegis-field-border-color: var(--aegis-light-border-color);
--aegis-placeholder-color: var(--aegis-light-muted-text-color);
--aegis-toggle-knob-color: var(--aegis-light-card-background);
/* B-320 r2: the same Bootstrap knob in the light card shade (#CFD8DC, the value of --aegis-light-card-background). */
--aegis-toggle-knob-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23CFD8DC'/%3e%3c/svg%3e");
/* Overview r2 (item 1), light theme: the same KPI card border and status tints, mixed with the card surface. */
--aegis-kpi-card-border-color: var(--aegis-field-border-color);
--aegis-kpi-tint-healthy-background: color-mix(in srgb, var(--aegis-status-good-color) 10%, var(--aegis-surface-background));
--aegis-kpi-tint-healthy-border: color-mix(in srgb, var(--aegis-status-good-color) 50%, var(--aegis-surface-background));
--aegis-kpi-tint-warning-background: color-mix(in srgb, var(--aegis-status-warning-color) 12%, var(--aegis-surface-background));
--aegis-kpi-tint-warning-border: color-mix(in srgb, var(--aegis-status-warning-color) 55%, var(--aegis-surface-background));
--aegis-kpi-tint-failure-background: color-mix(in srgb, var(--aegis-status-critical-color) 9%, var(--aegis-surface-background));
--aegis-kpi-tint-failure-border: color-mix(in srgb, var(--aegis-status-critical-color) 50%, var(--aegis-surface-background));
--aegis-kpi-tint-grey-background: color-mix(in srgb, var(--aegis-hover-border-color) 12%, var(--aegis-surface-background));
--aegis-kpi-tint-grey-border: color-mix(in srgb, var(--aegis-hover-border-color) 60%, var(--aegis-surface-background));
/* Overview r2 (item 6), light theme: the same series colours, from the colour pair and the light neutrals. */
--aegis-series-1: var(--aegis-status-good-color);
--aegis-series-2: var(--aegis-status-snmp-color);
--aegis-series-3: color-mix(in srgb, var(--aegis-status-good-color) 50%, var(--aegis-regular-text-color));
--aegis-series-4: color-mix(in srgb, var(--aegis-status-snmp-color) 55%, var(--aegis-regular-text-color));
--aegis-series-5: color-mix(in srgb, var(--aegis-status-good-color) 55%, var(--aegis-surface-background));
--aegis-series-6: color-mix(in srgb, var(--aegis-status-snmp-color) 50%, var(--aegis-regular-text-color));
--aegis-series-7: var(--aegis-muted-text-color);
--aegis-series-8: var(--aegis-hover-border-color);
/* Option C: Bootstrap's own surfaces (dialogs, drop-down menus, cards, input-group labels, the alert banners) are
white or near-white by default; in the light theme they take the card, the hover shade and the toned banner tints. */
--bs-body-bg: var(--aegis-surface-background);
--bs-secondary-bg: var(--aegis-surface-hover-background);
--bs-tertiary-bg: var(--aegis-surface-hover-background);
--bs-warning-bg-subtle: var(--aegis-status-warning-background);
--bs-danger-bg-subtle: var(--aegis-status-critical-background);
--bs-success-bg-subtle: var(--aegis-kpi-tint-healthy-background);
--bs-info-bg-subtle: var(--aegis-surface-hover-background);
/* LIGHT-C r2: Bootstrap's grey text (.text-secondary, .text-muted) is the light muted text (it was #6c757d, 3.24:1 on
the card). The channels are Blue Grey 800 (#37474F). */
--bs-secondary-rgb: 55, 71, 79;
--bs-secondary-color: var(--aegis-muted-text-color);
/* LIGHT-C r3 (L1): Bootstrap's "light" surface (.bg-light, the Device Management HA badge; the only use) is the
Blue Grey 300 of the HA badges (#90A4AE), and Bootstrap's own border lines are the divider. */
--bs-light-rgb: 144, 164, 174;
--bs-border-color: var(--aegis-light-divider-color);
}
/* LIGHT THEME OPTION C (operator 2026-10-27, B-225): the light theme's two other surfaces. The top bar is dark (Blue
Grey 700) and the sticky rows are mid (Blue Grey 300), so inside them the text names point at the light palette's
values for that surface, and the system colour as TEXT (the current page tab, the frozen table headings) at the
readable status text. A custom property is resolved where it is declared, so the names the rules read are pointed
here directly. Only var() of the light block's names: no colour is typed here, and no rule below applies to the dark
theme (data-theme="dark", also when the theme follows a dark system setting). */
:root[data-theme="light"] .top-bar-fixed {
--aegis-regular-text-color: var(--aegis-light-topbar-text-color);
--aegis-panel-title-color: var(--aegis-light-topbar-text-color);
--aegis-topbar-title-color: var(--aegis-light-topbar-text-color);
--aegis-muted-text-color: var(--aegis-light-topbar-muted-text-color);
--aegis-topbar-primary-color: var(--aegis-light-topbar-label-color);
--aegis-scan-idle-background: var(--aegis-light-topbar-idle-color);
}
/* The menu opens inside the top bar, on the card: it keeps the card's text. */
:root[data-theme="light"] .top-bar-fixed .nav-dropdown {
--aegis-regular-text-color: var(--aegis-light-text-color);
--aegis-panel-title-color: var(--aegis-light-title-color);
--aegis-muted-text-color: var(--aegis-light-muted-text-color);
}
/* The ONE sticky strip (page tabs, tenant switch, page header, filter and control rows). */
:root[data-theme="light"] .aegis-sticky-strip {
--aegis-topbar-background: var(--aegis-light-sticky-background);
--aegis-panel-border-color: var(--aegis-light-border-color);
--aegis-muted-text-color: var(--aegis-light-text-color);
--bs-secondary-color: var(--aegis-light-text-color);
}
/* The frozen table headings (the shared table's sticky head: Tickets, Alert Audit). */
:root[data-theme="light"] .audit-table-head {
--aegis-surface-background: var(--aegis-light-sticky-background);
}
/* LIGHT-C r2 TEXT RULES (job step 3: every light text pair at least 4.5:1). Where a shared rule paints a FILL colour
(the system colour, the pulse colour, amber, red) as TEXT, the light theme draws that text in the readable shade of
the same hue. Only the text colour changes: no fill, border, size or layout. Each selector is the shared rule's own
(or the element that carries the inline colour); none of these rules applies to the dark theme. */
:root[data-theme="light"] .burger-btn:hover,
:root[data-theme="light"] .nav-dropdown .aegis-nav-group-heading,
:root[data-theme="light"] .system-online-text,
:root[data-theme="light"] .aegis-topbar-primary,
:root[data-theme="light"] .aegis-status-box:not(.warning):not(.danger):not(.muted),
:root[data-theme="light"] .aegis-status-text:not(.warning):not(.danger):not(.muted),
:root[data-theme="light"] .aegis-page-tab.is-current,
:root[data-theme="light"] .aegis-safe-error__brand,
:root[data-theme="light"] .device-details-metric.healthy,
:root[data-theme="light"] .device-details-metric .healthy,
:root[data-theme="light"] .aegis-page-scope,
:root[data-theme="light"] .aegis-panel-subheading,
:root[data-theme="light"] .help-topic-chevron,
:root[data-theme="light"] .help-section-title,
:root[data-theme="light"] .import-status-ready,
:root[data-theme="light"] .sort-icon,
:root[data-theme="light"] .status-enabled,
:root[data-theme="light"] strong.healthy,
:root[data-theme="light"] .audit-ok,
:root[data-theme="light"] .internet-isp-chevron,
:root[data-theme="light"] .internet-isp-card.online .internet-isp-status,
:root[data-theme="light"] .application-stack-status.healthy,
:root[data-theme="light"] .application-stack-eyebrow,
:root[data-theme="light"] .application-stack-dependency-path span,
:root[data-theme="light"] .application-stack-form-message.success,
:root[data-theme="light"] .client-isolation-metric.is-good .client-isolation-metric-value,
:root[data-theme="light"] .client-isolation-owner,
:root[data-theme="light"] .client-isolation-coverage-row.is-assigned span:last-child,
:root[data-theme="light"] .home-device-section-chevron,
:root[data-theme="light"] .monitoring-state.enabled,
:root[data-theme="light"] .settings-toggle-status-success,
:root[data-theme="light"] .settings-stepper-input,
:root[data-theme="light"] .audit-device-link,
:root[data-theme="light"] .audit-event-recovery,
:root[data-theme="light"] .firewall-wan-chevron,
:root[data-theme="light"] .firewall-wan-card.online .firewall-wan-status,
:root[data-theme="light"] .device-details-traffic-status.normal,
:root[data-theme="light"] .agent-config-pill:not(.warning):not(.danger):not(.muted),
:root[data-theme="light"] .snmp-kicker,
:root[data-theme="light"] .snmp-location-chevron,
:root[data-theme="light"] .snmp-status.healthy,
:root[data-theme="light"] .device-category-column-title,
:root[data-theme="light"] .device-category-count,
:root[data-theme="light"] .device-category-edit-label,
:root[data-theme="light"] .device-discovered-value-synced,
:root[data-theme="light"] .reports-uptime-excellent,
:root[data-theme="light"] .service-monitor-category-title,
:root[data-theme="light"] .service-monitor-selection,
:root[data-theme="light"] .security-users-metric.is-good .security-users-metric-value,
:root[data-theme="light"] .security-users-status.is-active,
:root[data-theme="light"] .noc-filter-menu-button:hover,
:root[data-theme="light"] .noc-view-subtitle,
:root[data-theme="light"] .noc-monitoring-section-header:hover,
:root[data-theme="light"] .noc-monitoring-section-header:focus-visible,
:root[data-theme="light"] .noc-monitoring-section-chevron,
:root[data-theme="light"] .netflow-row-link {
color: var(--aegis-status-good-text-color);
}
:root[data-theme="light"] .health-healthy,
:root[data-theme="light"] .text-success,
:root[data-theme="light"] [style^="color: var(--aegis-status-good-color)"],
:root[data-theme="light"] [style^="color:var(--aegis-status-good-color)"],
:root[data-theme="light"] [style*=" color: var(--aegis-status-good-color)"],
:root[data-theme="light"] [style*=";color:var(--aegis-status-good-color)"] {
color: var(--aegis-status-good-text-color) !important;
}
:root[data-theme="light"] .aegis-status-box.warning,
:root[data-theme="light"] .aegis-status-text.warning,
:root[data-theme="light"] .aegis-discovered-identity-notice,
:root[data-theme="light"] .aegis-refresh-status.is-failing,
:root[data-theme="light"] .storage-warning-line,
:root[data-theme="light"] .import-status-skipped,
:root[data-theme="light"] .audit-event-suppressed,
:root[data-theme="light"] .audit-event-state,
:root[data-theme="light"] .monitoring-state.paused,
:root[data-theme="light"] .agent-config-pill.warning,
:root[data-theme="light"] .internet-isp-card.degraded .internet-isp-status,
:root[data-theme="light"] .application-stack-readonly strong,
:root[data-theme="light"] .application-stack-status.warning,
:root[data-theme="light"] .application-stack-status.degraded,
:root[data-theme="light"] .device-details-traffic-status.unusual,
:root[data-theme="light"] .snmp-status.warning,
:root[data-theme="light"] .reports-uptime-warning {
color: var(--aegis-status-warning-text-color);
}
:root[data-theme="light"] .health-warning,
:root[data-theme="light"] .text-warning,
:root[data-theme="light"] [style^="color: var(--aegis-status-warning-color)"],
:root[data-theme="light"] [style^="color:var(--aegis-status-warning-color)"],
:root[data-theme="light"] [style*=" color: var(--aegis-status-warning-color)"],
:root[data-theme="light"] [style*=";color:var(--aegis-status-warning-color)"] {
color: var(--aegis-status-warning-text-color) !important;
}
:root[data-theme="light"] .aegis-status-box.danger,
:root[data-theme="light"] .aegis-status-text.danger,
:root[data-theme="light"] .login-message,
:root[data-theme="light"] .aegis-stepup-heading,
:root[data-theme="light"] .aegis-stepup-kind,
:root[data-theme="light"] .aegis-stepup-refusal,
:root[data-theme="light"] .import-status-error,
:root[data-theme="light"] .status-disabled,
:root[data-theme="light"] strong.offline,
:root[data-theme="light"] .audit-failed,
:root[data-theme="light"] .internet-isp-card.offline .internet-isp-status,
:root[data-theme="light"] .application-stack-status.critical,
:root[data-theme="light"] .application-stack-form-message.error,
:root[data-theme="light"] .client-isolation-metric.is-warning .client-isolation-metric-value,
:root[data-theme="light"] .client-isolation-unassigned,
:root[data-theme="light"] .client-isolation-coverage-row.is-unassigned span:last-child,
:root[data-theme="light"] .agent-warning-title,
:root[data-theme="light"] .settings-toggle-status-danger,
:root[data-theme="light"] .audit-event-failure,
:root[data-theme="light"] .firewall-wan-card.offline .firewall-wan-status,
:root[data-theme="light"] .device-details-traffic-status.saturated,
:root[data-theme="light"] .agent-config-pill.danger,
:root[data-theme="light"] .snmp-status.failing,
:root[data-theme="light"] .snmp-status.offline,
:root[data-theme="light"] .reports-uptime-critical,
:root[data-theme="light"] .security-users-metric.is-warning .security-users-metric-value,
:root[data-theme="light"] .security-users-status.is-disabled {
color: var(--aegis-status-critical-text-color);
}
:root[data-theme="light"] .row-down,
:root[data-theme="light"] .text-crit,
:root[data-theme="light"] [style^="color: var(--aegis-status-critical-color)"],
:root[data-theme="light"] [style^="color:var(--aegis-status-critical-color)"],
:root[data-theme="light"] [style*=" color: var(--aegis-status-critical-color)"],
:root[data-theme="light"] [style*=";color:var(--aegis-status-critical-color)"] {
color: var(--aegis-status-critical-text-color) !important;
}
:root[data-theme="light"] .text-snmp {
color: var(--aegis-light-pulse-text-color) !important;
}
/* The ONE table heading rule (.aegis-table th, UI Standard v1.1 rule E) keeps its look; in light its system colour
is read as the readable status text (the heading text is its only use of the system colour). */
:root[data-theme="light"] .aegis-table:not(.aegis-table-alert-head) > thead > tr > th {
--aegis-status-good-color: var(--aegis-status-good-text-color);
}
/* The amber heading of the warning banners (CanonicalStatusBanner sets it inline from the amber fill). */
:root[data-theme="light"] [style*="--aegis-banner-heading-color: var(--aegis-health-warning)"] {
--aegis-banner-heading-color: var(--aegis-status-warning-text-color) !important;
}
/* The dark top bar: its labels stay light teal, and amber, the system colour and Bootstrap's grey as text take the top
bar's own light shades. */
:root[data-theme="light"] .top-bar-fixed .aegis-topbar-primary,
:root[data-theme="light"] .top-bar-fixed .system-online-text {
color: var(--aegis-topbar-primary-color);
}
:root[data-theme="light"] .top-bar-fixed .burger-btn:hover {
color: var(--aegis-light-topbar-system-text-color);
}
:root[data-theme="light"] .top-bar-fixed .aegis-refresh-status.is-failing,
:root[data-theme="light"] .top-bar-fixed .text-warning {
color: var(--aegis-light-topbar-warning-text-color) !important;
}
:root[data-theme="light"] .top-bar-fixed .text-secondary,
:root[data-theme="light"] .top-bar-fixed .text-muted {
color: var(--aegis-light-topbar-muted-text-color) !important;
}
/* LIGHT-C r3 SNMP MONITOR (operator 09:08, choice 1). SNMP Monitor keeps its own dark-only palette in its style block
(SnmpMonitorStyles.razor, unchanged, so the dark theme renders exactly as before). In light its panels, headers, rows,
lines and controls take the light palette here: the card, the hover shade, the page shade for the selected row, Blue
Grey 300 for the frozen interface heading, the dividers, the field, the toggle and the readable text; its pills and
+/- use the readable status text (the text rules above). No size, spacing or layout property. */
:root[data-theme="light"] .snmp-alert,
:root[data-theme="light"] .snmp-warning {
background: var(--aegis-status-warning-background);
border-color: var(--aegis-warning-border-color);
color: var(--aegis-status-warning-text-color);
}
:root[data-theme="light"] .snmp-summary-card,
:root[data-theme="light"] .snmp-panel,
:root[data-theme="light"] .snmp-type-header,
:root[data-theme="light"] .snmp-location-header,
:root[data-theme="light"] .snmp-graph-card {
background: var(--aegis-surface-background);
}
:root[data-theme="light"] .snmp-type-header:hover,
:root[data-theme="light"] .snmp-location-header:hover,
:root[data-theme="light"] .snmp-table tbody tr:hover,
:root[data-theme="light"] .snmp-status.muted {
background: var(--aegis-surface-hover-background);
}
:root[data-theme="light"] .snmp-type-list {
background: var(--aegis-surface-hover-background);
border-top-color: var(--aegis-panel-border-color);
}
:root[data-theme="light"] .snmp-type-section,
:root[data-theme="light"] .snmp-location-group,
:root[data-theme="light"] .snmp-interface-scroll,
:root[data-theme="light"] .snmp-graph-card {
border-color: var(--aegis-panel-border-color);
}
:root[data-theme="light"] .snmp-table td {
border-bottom-color: var(--aegis-table-border-color);
}
:root[data-theme="light"] .snmp-table tbody tr.selected,
:root[data-theme="light"] .snmp-table tbody tr.snmp-interface-selected {
background: var(--aegis-page-background);
}
:root[data-theme="light"] .snmp-interface-scroll .snmp-table th {
background: var(--aegis-light-sticky-background);
}
:root[data-theme="light"] .snmp-select {
background: var(--aegis-field-background);
border-color: var(--aegis-field-border-color);
}
:root[data-theme="light"] .snmp-detail-grid div {
background: var(--aegis-surface-hover-background);
border-color: var(--aegis-panel-border-color);
}
:root[data-theme="light"] .snmp-graph-axis,
:root[data-theme="light"] .snmp-graph-grid-line,
:root[data-theme="light"] .snmp-graph-grid-line.vertical {
stroke: var(--aegis-table-border-color);
}
:root[data-theme="light"] .snmp-graph-unit {
fill: var(--aegis-status-good-text-color);
}
:root[data-theme="light"] .snmp-graph-line.in {
stroke: var(--aegis-light-graph-in-color);
}
:root[data-theme="light"] .snmp-graph-line.out {
stroke: var(--aegis-light-graph-out-color);
}
:root[data-theme="light"] .snmp-graph-line.total {
stroke: var(--aegis-light-graph-total-color);
}
:root[data-theme="light"] .legend-in {
background-color: var(--aegis-light-graph-in-color);
}
:root[data-theme="light"] .legend-out {
background-color: var(--aegis-light-graph-out-color);
}
:root[data-theme="light"] .legend-total {
background-color: var(--aegis-light-graph-total-color);
}
:root[data-theme="light"] .snmp-graph-legend-switch {
background: var(--aegis-switch-off-color);
}
:root[data-theme="light"] .snmp-graph-legend-switch::after {
background: var(--aegis-toggle-knob-color);
}
/* LIGHT-C r3 FILLS (operator 09:08, choice 2): the "On" toggle track and the SELECTED button in the darker fill of the
same hue (--aegis-light-selected-fill-color), at least 3:1 on the card and the sticky row; the selected button's text
is the card shade on it. Fill colour only: no outline, border width, size or layout change. */
:root[data-theme="light"] .form-check-input:checked,
:root[data-theme="light"] .form-switch .form-check-input:checked,
:root[data-theme="light"] .snmp-graph-legend-switch:checked {
background-color: var(--aegis-light-selected-fill-color);
border-color: var(--aegis-light-selected-fill-color);
}
:root[data-theme="light"] .btn.is-selected,
:root[data-theme="light"] .btn.active {
--bs-btn-bg: var(--aegis-light-selected-fill-color);
--bs-btn-color: var(--aegis-light-selected-text-color);
--bs-btn-border-color: var(--aegis-light-selected-fill-color);
--bs-btn-active-bg: var(--aegis-light-selected-fill-color);
--bs-btn-active-color: var(--aegis-light-selected-text-color);
--bs-btn-active-border-color: var(--aegis-light-selected-fill-color);
}
body,
.page,
main,
article.content {
background-color: var(--aegis-page-background);
}
body {
font-family: var(--aegis-font-family);
font-size: var(--aegis-regular-text-size);
font-weight: var(--aegis-regular-text-weight);
color: var(--aegis-regular-text-color);
}
/* UiFix5 (operator 2026-10-09 22:35): ONE shared scroll-bar style for every AEGIS scroll area (the page, menus, lists,
tables, panels). scrollbar-color is inherited, so setting it on html reaches every scroll container; the
::-webkit-scrollbar rules cover browsers without scrollbar-color. Colours come only from the theme tokens above, so
the bars follow the active theme: data-theme on is "dark" or "light", and when the theme follows the system
setting App.razor's aegisTheme resolves it from prefers-color-scheme (and on every change). No page-local copies. */
html {
scrollbar-color: var(--aegis-scrollbar-thumb-color) var(--aegis-scrollbar-track-color);
}
::-webkit-scrollbar {
width: var(--aegis-scrollbar-size);
height: var(--aegis-scrollbar-size);
background-color: var(--aegis-scrollbar-track-color);
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
background-color: var(--aegis-scrollbar-track-color);
}
::-webkit-scrollbar-thumb {
background-color: var(--aegis-scrollbar-thumb-color);
}
/* Global topbar standard */
.top-bar-fixed {
position: sticky;
top: 0;
z-index: 1000;
background-color: var(--aegis-topbar-background);
margin: 0 0 20px 0;
/* v2.1 §4 (Phase 1B): the top bar and its pulse line start at the ONE left edge of the frame. */
padding: 15px var(--aegis-page-edge) 0 var(--aegis-page-edge);
border-bottom: 1px solid var(--aegis-panel-border-color);
box-shadow: var(--aegis-topbar-shadow);
display: flex;
flex-direction: column;
}
.burger-btn {
background: none;
border: none;
color: var(--aegis-panel-title-color);
cursor: pointer;
font-size: 1.8rem;
line-height: 1;
outline: none;
padding: 0 15px 0 0;
}
.burger-btn:hover {
color: var(--aegis-accent-color);
}
.nav-dropdown {
background-color: var(--aegis-surface-background);
border: 1px solid var(--aegis-input-border-color);
border-radius: 4px;
box-shadow: var(--aegis-dropdown-shadow);
display: block;
left: 10px;
/* v2.1 §14 (Phase 1B): the menu is grouped by category and holds more entries, so it is never taller than the
window below it; it scrolls inside (the theme's scroll bars). */
max-height: calc(100dvh - 60px);
min-width: 250px;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 45px;
z-index: 2000;
}
/* v2.1 §14 (Phase 1B): the heading of a menu group (MONITORING, ALERTS & REPORTS, TENANT MANAGEMENT, PLATFORM,
ACCOUNT): the sub-heading style of §3 (14 px, 700, ALL CAPS, the system colour). */
.nav-dropdown .aegis-nav-group-heading {
border-bottom: 1px solid var(--aegis-panel-border-color);
color: var(--aegis-status-good-color);
font-family: var(--aegis-font-family);
font-size: var(--aegis-sub-heading-size);
font-weight: var(--aegis-sub-heading-weight);
margin: 0;
padding: 12px 20px 6px 20px;
text-transform: uppercase;
}
.nav-dropdown .nav-item,
.nav-item {
color: var(--aegis-regular-text-color);
display: block;
font-family: var(--aegis-font-family);
font-size: var(--aegis-regular-text-size);
font-weight: var(--aegis-regular-text-weight);
padding: 12px 20px;
text-decoration: none;
transition: background-color 0.2s, color 0.2s;
white-space: nowrap;
width: 100%;
}
.nav-dropdown .nav-item {
border-bottom: 1px solid var(--aegis-panel-border-color);
}
.nav-dropdown .nav-item:last-child {
border-bottom: none;
}
.nav-dropdown .nav-item:hover,
.nav-item:hover {
background-color: var(--aegis-surface-hover-background);
color: var(--aegis-panel-title-color);
}
.nav-dropdown .nav-item.active,
.nav-item.active {
background-color: var(--aegis-surface-hover-background);
border-left: 4px solid var(--aegis-accent-color);
}
.scan-line-container {
display: flex;
gap: 2px;
height: 4px;
margin-top: 10px;
width: 100%;
}
.scan-segment {
background-color: var(--aegis-scan-idle-background);
border-radius: 1px;
flex-grow: 1;
transition: background-color 0.2s;
}
.scan-segment.active {
background-color: var(--aegis-status-snmp-color);
box-shadow: 0 0 5px var(--aegis-status-snmp-glow);
}
.scan-segment.overdue {
background-color: var(--aegis-status-warning-color);
box-shadow: 0 0 5px var(--aegis-status-warning-glow);
}
/* v2.2 §4 item 2 (Phase 1B-FIX r2, operator Q1 (b), 2026-10-15 ~23:4x): with reduced motion the pulse line keeps
stepping 1-30 exactly as without it; only the fade between steps is removed. It replaces the Phase 1B rule that
showed the line full and still. */
@media (prefers-reduced-motion: reduce) {
.scan-segment {
transition: none;
}
}
.system-online-text {
color: var(--aegis-topbar-primary-color);
}
.aegis-topbar-title {
font-family: var(--aegis-font-family);
font-size: var(--aegis-topbar-title-size);
font-weight: var(--aegis-topbar-title-weight);
color: var(--aegis-topbar-title-color);
text-transform: uppercase;
}
/* v2.1 §3 (Phase 1B): the top-bar page name and AEGIS OVERSIGHT / the tenant context are ONE style: 16 px, 700,
ALL CAPS, the system colour.
v2.2 §3 and §4 item 1 (Phase 1B-FIX): "clearly BOLD (700)". The size and weight come from the fixed §3 role tokens.
The older names (--aegis-topbar-primary-size / -weight) are rewritten at run time from the saved typography
settings (aegisTypography.apply, App.razor), which could make the page name and AEGIS OVERSIGHT lighter than 700. */
.aegis-topbar-primary {
font-family: var(--aegis-font-family);
font-size: var(--aegis-topbar-page-name-size);
font-weight: var(--aegis-topbar-page-name-weight);
color: var(--aegis-topbar-primary-color);
text-transform: uppercase;
}
.aegis-panel-title {
font-family: var(--aegis-font-family);
font-size: var(--aegis-panel-title-size);
font-weight: var(--aegis-panel-title-weight);
color: var(--aegis-panel-title-color);
}
.aegis-regular-text {
font-family: var(--aegis-font-family);
font-size: var(--aegis-regular-text-size);
font-weight: var(--aegis-regular-text-weight);
color: var(--aegis-regular-text-color);
}
/* The ONE in-page title rule (Alert Audit fix, operator 2026-10-12 05:56, item 6; RULE 1): the title of NOC View
("NOC View"), of Reports ("Reports", the same shared toolbar) and of Alert Audit ("ALERT AUDIT"). Big, bold, in
the title colour of the theme (light and dark). Moved here word for word from the NOC View style block
(NocViewStyles.razor), which the Alert Audit page does not draw; its declarations are unchanged, so NOC View and
Reports look as they did. The rule sets no letter case: a page writes its title as it is to read. */
.noc-view-title {
color: var(--aegis-panel-title-color);
font-size: 1.45rem;
font-weight: 700;
line-height: 1.1;
}
.aegis-themed-control {
background-color: var(--aegis-input-background);
border-color: var(--aegis-input-border-color);
color: var(--aegis-regular-text-color);
font-family: var(--aegis-font-family);
font-size: var(--aegis-regular-text-size);
font-weight: var(--aegis-regular-text-weight);
}
.aegis-themed-control:focus {
background-color: var(--aegis-input-background);
border-color: var(--aegis-focus-color);
color: var(--aegis-regular-text-color);
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--aegis-focus-color) 25%, transparent);
}
.aegis-themed-control::placeholder {
color: var(--aegis-regular-text-color);
opacity: 0.75;
}
.aegis-themed-control:disabled,
.aegis-themed-control[readonly] {
background-color: var(--aegis-input-background);
border-color: var(--aegis-input-border-color);
color: var(--aegis-muted-text-color);
opacity: 0.72;
}
/* Global dark-mode field and table standard (UI standard pass 1, 2026-10-03,
AEGIS-Interface-Standard.md rule 2: "No input, select or table may be white-only in dark
mode"). Covers every bare Bootstrap .form-control / .form-select / .table that does not already
opt into .aegis-themed-control or a page-specific override, in both theme blocks above, using
only the existing tokens. .aegis-themed-control keeps its own extra focus/placeholder/disabled
styling for pages that already use it; this rule is the floor every plain Bootstrap field and
table now gets automatically. */
.form-control,
.form-select,
.table {
background-color: var(--aegis-input-background);
border-color: var(--aegis-input-border-color);
color: var(--aegis-regular-text-color);
}
.form-control:focus,
.form-select:focus {
background-color: var(--aegis-input-background);
border-color: var(--aegis-focus-color);
color: var(--aegis-regular-text-color);
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--aegis-focus-color) 25%, transparent);
}
.form-control::placeholder {
color: var(--aegis-regular-text-color);
opacity: 0.75;
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
background-color: var(--aegis-input-background);
border-color: var(--aegis-input-border-color);
color: var(--aegis-muted-text-color);
opacity: 0.72;
}
.table {
--bs-table-bg: transparent;
--bs-table-color: var(--aegis-regular-text-color);
border-color: var(--aegis-table-border-color);
}
.table > :not(caption) > * > * {
background-color: transparent;
border-bottom-color: var(--aegis-table-border-color);
color: var(--aegis-regular-text-color);
}
.table thead th {
color: var(--aegis-panel-title-color);
border-color: var(--aegis-table-border-color);
}
/* AEGIS UI STANDARD v1, part B (operator 2026-10-11 07:56, items 5 and 6): the ONE shared table
(Components/Shared/AegisTable.razor). Only that component writes these classes; a page gives its table's
existing look through the component's Class / WrapClass.
- .aegis-table-wrap: the scroll wrapper. A table wider than its place scrolls sideways inside it; the scroll
bar is the theme's (the shared scroll-bar rules above: light, dark and system).
- text is left-aligned; a number column (.aegis-table-num-N, N = the column's place) is right-aligned, heading
and cells alike. A cell that spans columns (an empty-list line, a group heading) is not a column cell.
- .aegis-table-fixed: a table kind whose every column has a fixed width; text that does not fit its column
wraps inside it, so copies of the same kind have their columns at the same places. */
.aegis-table-wrap {
overflow-x: auto;
}
.aegis-table {
text-align: left;
}
.aegis-table-fixed {
table-layout: fixed;
width: 100%;
}
.aegis-table-fixed th,
.aegis-table-fixed td {
overflow-wrap: anywhere;
}
/* AEGIS UI STANDARD v1.1 (operator 2026-10-11 16:09, rule E): the ONE heading rule of every table in AEGIS.
Column headings are ALL UPPERCASE (by this rule; the source text is unchanged), BOLD and SYSTEM GREEN (the one
system-green theme variable, the same in light and dark). No page sets a heading case, weight or colour.
The one exception (operator, word for word: "keep the NOC alert panel headings in their alert colour"): a
table drawn with AlertHeadings (class aegis-table-alert-head: the Failure / Warning / Suspended / Not Reporting
alert panels of NOC View and the Main Dashboard) keeps its own alert colour; it is still uppercase and bold. */
.aegis-table > thead > tr > th {
font-weight: var(--aegis-table-header-weight);
text-transform: uppercase;
}
.aegis-table:not(.aegis-table-alert-head) > thead > tr > th {
color: var(--aegis-status-good-color);
}
.aegis-table.aegis-table-num-1 > * > tr > :nth-child(1):not([colspan]),
.aegis-table.aegis-table-num-2 > * > tr > :nth-child(2):not([colspan]),
.aegis-table.aegis-table-num-3 > * > tr > :nth-child(3):not([colspan]),
.aegis-table.aegis-table-num-4 > * > tr > :nth-child(4):not([colspan]),
.aegis-table.aegis-table-num-5 > * > tr > :nth-child(5):not([colspan]),
.aegis-table.aegis-table-num-6 > * > tr > :nth-child(6):not([colspan]),
.aegis-table.aegis-table-num-7 > * > tr > :nth-child(7):not([colspan]),
.aegis-table.aegis-table-num-8 > * > tr > :nth-child(8):not([colspan]),
.aegis-table.aegis-table-num-9 > * > tr > :nth-child(9):not([colspan]),
.aegis-table.aegis-table-num-10 > * > tr > :nth-child(10):not([colspan]),
.aegis-table.aegis-table-num-11 > * > tr > :nth-child(11):not([colspan]),
.aegis-table.aegis-table-num-12 > * > tr > :nth-child(12):not([colspan]),
.aegis-table.aegis-table-num-13 > * > tr > :nth-child(13):not([colspan]),
.aegis-table.aegis-table-num-14 > * > tr > :nth-child(14):not([colspan]),
.aegis-table.aegis-table-num-15 > * > tr > :nth-child(15):not([colspan]),
.aegis-table.aegis-table-num-16 > * > tr > :nth-child(16):not([colspan]) {
text-align: right;
}
.aegis-graph-title {
font-family: var(--aegis-font-family);
font-size: var(--aegis-graph-title-size);
font-weight: var(--aegis-graph-title-weight);
color: var(--aegis-panel-title-color);
}
.aegis-graph-legend {
font-family: var(--aegis-font-family);
font-size: var(--aegis-graph-legend-size);
font-weight: var(--aegis-graph-legend-weight);
color: var(--aegis-regular-text-color);
}
.aegis-graph-axis {
font-family: var(--aegis-font-family);
font-size: var(--aegis-graph-axis-size);
font-weight: var(--aegis-graph-axis-weight);
color: var(--aegis-regular-text-color);
}
.aegis-graph-axis-unit {
font-family: var(--aegis-font-family);
font-size: var(--aegis-graph-axis-size);
font-weight: var(--aegis-graph-axis-unit-weight);
color: var(--aegis-regular-text-color);
}
/* Demo pack B, item 3 (operator 2026-10-09 23:00): the ONE shared history chart (Components/Shared/
AegisAreaChart.razor), a solid filled area. Device Details (CPU, memory) and Website Details (response
time) use it. Colours are the existing theme tokens, so light and dark mode both follow. */
.aegis-area-chart {
background: var(--aegis-page-background);
border: 1px solid var(--aegis-panel-border-color);
border-radius: 5px;
min-width: 0;
padding: 12px;
}
.aegis-area-chart-heading,
.aegis-area-chart-range {
display: flex;
justify-content: space-between;
gap: 12px;
}
.aegis-area-chart-heading strong {
color: var(--aegis-panel-title-color);
}
.aegis-area-chart-heading span,
.aegis-area-chart-range {
color: var(--aegis-muted-text-color);
}
/* UiFix7 (operator 2026-10-10 05:45): the plot row. The Y-axis labels are an HTML column beside the svg
(never inside it), so only the svg stretches with the window and the labels stay normal page text. */
.aegis-area-chart-plot {
display: flex;
gap: 10px;
margin-top: 10px;
}
/* The labels run bottom (0) to top (the axis maximum), evenly spaced like the ticks; each is a zero-height
line centred on its tick. The column is as wide as its widest label. */
.aegis-area-chart-y-axis {
display: flex;
flex: none;
flex-direction: column-reverse;
justify-content: space-between;
}
.aegis-area-chart-y-axis .aegis-area-chart-axis-label {
align-items: center;
display: flex;
height: 0;
justify-content: flex-end;
}
.aegis-area-chart svg {
background: var(--aegis-surface-background);
border: 1px solid var(--aegis-panel-border-color);
border-radius: 4px;
flex: 1 1 0;
height: 230px;
min-width: 0;
}
.aegis-area-chart-area {
stroke: none;
}
.aegis-area-chart-area.good {
fill: var(--aegis-status-good-color);
}
.aegis-area-chart-area.primary {
fill: var(--aegis-topbar-primary-color);
}
.aegis-area-chart-axis,
.aegis-area-chart-grid-line {
stroke: var(--aegis-panel-border-color);
stroke-width: 1;
}
.aegis-area-chart-grid-line {
opacity: .75;
}
/* UiFix6 A1 (operator 2026-10-10 04:26): the Y-axis labels ("2000 ms", "100%") use the standard page text
size, here once for every chart. UiFix7 (05:45): they and the X-axis date labels are HTML text (not svg
text), so this is exactly the page text size and letter shape at every window width. */
.aegis-area-chart-axis-label {
color: var(--aegis-muted-text-color);
font-family: var(--aegis-font-family);
font-size: var(--aegis-regular-text-size);
}
.aegis-area-chart-range {
font-size: var(--aegis-graph-axis-size);
margin-top: 7px;
}
.aegis-area-chart-empty {
color: var(--aegis-muted-text-color);
padding: 30px 10px;
text-align: center;
}
/* Button style system (operator 2026-10-09 20:00, AEGIS-Interface-Standard.md rule 5): the ONE shared
button style, used everywhere through Bootstrap's own .btn variables (so hover, active, focus and disabled
all follow it).
AEGIS UI STANDARD v1 (operator 2026-10-11 07:56, part A): every button is drawn by the ONE shared component
Components/Shared/AegisButton.razor, which emits these classes; pages never write them. The states:
- UNSELECTED (the default, every .btn): neutral outline; hover = a subtle outline highlight;
- SELECTED (.is-selected: the current page, the chosen period, an active filter): filled system green with
the Selected text colour (--aegis-btn-selected-text-color), no indicator bar or underline;
- DESTRUCTIVE (.aegis-btn-danger: Reject, Retire, Remove, Delete): red outline;
- DISABLED: dimmed outline;
- keyboard focus: a visible ring only while using the keyboard (:focus-visible), never after a mouse click.
No other fill exists. Colours come only from the theme variables above, so light and dark mode both follow. */
.btn {
--bs-btn-bg: transparent;
--bs-btn-color: var(--aegis-btn-neutral-text-color);
--bs-btn-border-color: var(--aegis-btn-neutral-border-color);
--bs-btn-hover-bg: var(--aegis-btn-neutral-hover-background);
--bs-btn-hover-color: var(--aegis-btn-neutral-text-color);
--bs-btn-hover-border-color: var(--aegis-btn-neutral-hover-border-color);
--bs-btn-active-bg: var(--aegis-btn-neutral-hover-background);
--bs-btn-active-color: var(--aegis-btn-neutral-text-color);
--bs-btn-active-border-color: var(--aegis-btn-neutral-hover-border-color);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-color: var(--aegis-muted-text-color);
--bs-btn-disabled-border-color: var(--aegis-btn-neutral-border-color);
/* v2.1 §5 (Phase 1B): a disabled button is shown at 50% opacity. */
--bs-btn-disabled-opacity: 0.5;
--bs-btn-focus-box-shadow: none;
/* UI STANDARD v1.1 (operator 2026-10-11 16:09, rule B): button text is normal case, never ALL CAPS. A button
(also a button-shaped link) never takes capitals from the page around it. */
text-transform: none;
}
/* AEGIS UI STANDARD v1 (operator 2026-10-11 07:56, part A item 3): the only filled button is a SELECTED one.
The earlier "primary action" fill (.btn-primary / .btn-success / .aegis-btn-fill) is removed: those buttons
are outlined like every other unselected button. */
.btn.btn-danger,
.btn.btn-outline-danger,
.btn.aegis-btn-danger {
--bs-btn-bg: transparent;
--bs-btn-color: var(--aegis-btn-danger-text-color);
--bs-btn-border-color: var(--aegis-btn-danger-border-color);
--bs-btn-hover-bg: var(--aegis-btn-danger-hover-background);
--bs-btn-hover-color: var(--aegis-btn-danger-text-color);
--bs-btn-hover-border-color: var(--aegis-btn-danger-border-color);
--bs-btn-active-bg: var(--aegis-btn-danger-hover-background);
--bs-btn-active-color: var(--aegis-btn-danger-text-color);
--bs-btn-active-border-color: var(--aegis-btn-danger-border-color);
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-color: var(--aegis-btn-danger-text-color);
--bs-btn-disabled-border-color: var(--aegis-btn-danger-border-color);
}
.btn.is-current,
.btn.is-selected,
.btn.active {
--bs-btn-bg: var(--aegis-btn-selected-background);
--bs-btn-color: var(--aegis-btn-selected-text-color);
--bs-btn-border-color: var(--aegis-btn-selected-background);
--bs-btn-hover-bg: var(--aegis-accent-hover-color);
--bs-btn-hover-color: var(--aegis-btn-selected-text-color);
--bs-btn-hover-border-color: var(--aegis-accent-hover-color);
--bs-btn-active-bg: var(--aegis-btn-selected-background);
--bs-btn-active-color: var(--aegis-btn-selected-text-color);
--bs-btn-active-border-color: var(--aegis-btn-selected-background);
}
.btn:focus-visible {
outline: var(--aegis-btn-focus-ring-width) solid var(--aegis-focus-color);
outline-offset: var(--aegis-btn-focus-ring-width);
}
/* The ONE compact button size (button style system, operator 2026-10-09 20:00): the NOC "Only" button
beside each Display Options switch. Same shared colours as every .btn; only the size differs. */
.aegis-btn-compact {
align-items: center;
box-sizing: border-box;
display: inline-flex;
flex-shrink: 0;
height: var(--aegis-btn-compact-height);
justify-content: center;
padding: 0;
white-space: nowrap;
width: var(--aegis-btn-compact-width);
}
/* Shared button size standard (UI standard pass 1, 2026-10-03, AEGIS-Interface-Standard.md rule 4;
AEGIS UI STANDARD v1, 2026-10-11; v1.1, operator 2026-10-11 16:09, rule C): ONE height (--aegis-btn-height) and
ONE side padding (--aegis-btn-padding-x), from variables, everywhere. There is no single width: a button alone
is as wide as its label plus the padding; buttons in a group share one width (the group rule below).
.aegis-btn is the class the shared AegisButton emits. The four older page-local sizing classes
(.home-dashboard-action-button, .noc-view-action-button, .agent-config-btn,
.device-category-actions .btn) are listed on this same rule instead of each keeping its own
separate declaration elsewhere, so there is exactly one sizing rule, not five. Colour is
unchanged - it still comes from the "Global button standard" block above. */
/* AgentConfig-Cols (operator, pasted 2026-10-03 ~21:1x CST, AEGIS-Interface-Standard.md rule 13):
buttons never shrink or wrap - flex-shrink:0 so a flex row (e.g. .agent-config-action-row) never
shrinks a button below its standard 120x36 size, white-space:nowrap so a button's own label
never wraps onto a second line. Added to the one shared sizing rule, not a new class. */
.aegis-btn,
.home-dashboard-action-button,
.noc-view-action-button,
.agent-config-btn,
.device-category-actions .btn {
align-items: center;
box-sizing: border-box;
display: inline-flex;
flex-shrink: 0;
height: var(--aegis-btn-height);
justify-content: center;
padding: 0 var(--aegis-btn-padding-x);
white-space: nowrap;
/* UI STANDARD v1.1 (rule C): as wide as its label. Only inside a table that has an action column
(AegisTableColumn.Actions) does the table give ONE width, worked out from the longest label of that
table's own buttons, so the column fits them and the same buttons line up on every row. */
width: var(--aegis-table-action-btn-width, auto);
}
/* AEGIS UI STANDARD v1 (2026-10-11): the Auto size of the shared AegisButton - the standard height, the width of
its label - for a label that does not fit the standard width (listed in the UI standard for the operator).
It is the rule the earlier "Create Install Command" exception used (.agent-config-wide-btn); that button is a
standard button now, so only the shared name remains. */
.aegis-btn-auto {
align-items: center;
box-sizing: border-box;
display: inline-flex;
flex-shrink: 0;
height: var(--aegis-btn-height);
justify-content: center;
padding: 0 var(--aegis-btn-padding-x);
white-space: nowrap;
width: auto;
}
/* AEGIS UI STANDARD v1 (part A item 2): the ONE button row. Buttons in a row are separated by the one gap
variable. Rows are right-aligned (.agent-config-action-row below is the same rule under its first name);
.aegis-btn-row-start is the same row for buttons that follow a form field on the left. */
.aegis-btn-row,
.aegis-btn-row-start {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--aegis-btn-gap);
justify-content: flex-end;
}
.aegis-btn-row-start {
justify-content: flex-start;
}
/* AEGIS UI STANDARD v1.1 (operator 2026-10-11 16:09, rule C): the ONE button group. Buttons of the same kind
(the top menu strip, the NOC counters, a page's action row, a set of tabs) share ONE width, set by the longest
label of THAT group, by CSS alone: equal columns, each as wide as the widest button. No page writes a width,
and a changed label needs no changed number.
- .aegis-btn-group: a group a page marks itself (it holds buttons only);
- a button row (.aegis-btn-row, .aegis-btn-row-start, .agent-config-action-row) that holds only standard
buttons (or forms with one) is a group by itself; a row that also holds text, a field or a switch stays a
plain row, and its buttons are as wide as their labels;
(v2.1 Phase 1B: the quick-jump buttons of the strip are page TABS now, .aegis-page-tabs; tabs are not buttons
and are not a button group.)
A group does not wrap inside itself; on a narrow window (below 768px) its buttons stack, one per line.
S6 (check L2): a browser that does not know :has() drops a whole rule whose selector list holds it. So the
marked group has its OWN rule, and each :has() selector list has its own rule with the SAME declarations: such
a browser still gives .aegis-btn-group its equal widths and gap. */
.aegis-btn-group {
align-items: center;
display: grid;
gap: var(--aegis-btn-gap);
grid-auto-columns: 1fr;
grid-auto-flow: column;
width: max-content;
}
:is(.aegis-btn-row, .aegis-btn-row-start, .agent-config-action-row):not(:has(> :not(.aegis-btn, form))) {
align-items: center;
display: grid;
gap: var(--aegis-btn-gap);
grid-auto-columns: 1fr;
grid-auto-flow: column;
width: max-content;
}
:is(.aegis-btn-row, .agent-config-action-row):not(:has(> :not(.aegis-btn, form))) {
margin-left: auto;
}
/* NOC-FIX (operator order 2026-10-16 ~06:3x, item 1; AEGIS DESIGN STANDARD v2.2 §5): the group's SLOT. A wrapper that
holds buttons placed by someone else (the strip's page-button place, StickyActionStrip) draws no box of its own, so
its buttons are buttons of the group around it: the same equal columns, the same one width. */
.aegis-btn-group-slot {
display: contents;
}
/* Each button fills its equal column. Inside a table's action column the table gives the one width instead. */
.aegis-btn-group > .aegis-btn,
.aegis-btn-group > form > .aegis-btn,
.aegis-btn-group > .aegis-btn-group-slot > .aegis-btn {
width: var(--aegis-table-action-btn-width, 100%);
}
:is(.aegis-btn-row, .aegis-btn-row-start, .agent-config-action-row):not(:has(> :not(.aegis-btn, form))) > .aegis-btn,
:is(.aegis-btn-row, .aegis-btn-row-start, .agent-config-action-row):not(:has(> :not(.aegis-btn, form))) > form > .aegis-btn {
width: var(--aegis-table-action-btn-width, 100%);
}
/* W1DC-FIX2 (operator 2026-11-03 10:54): the FIXED standard button (AegisButton Fixed): ONE width for every such button, whatever its text, centred text, the standard 36 px height.
Written once. The class is repeated so this rule is at least as specific as the group and row width rules above (their :is(...):not(:has(...)) selectors) and, coming after them,
wins inside a button group, a button row and a table cell alike. Colours, states and themes stay the shared button's (RULE 6). */
.aegis-btn.aegis-btn-fixed.aegis-btn-fixed {
/* THE ONE fixed width, whatever the text: wide enough for the longest Overview label ("View Details"). Declared here, not in the theme blocks, so no theme block changes. */
--aegis-btn-fixed-width: 10rem;
justify-content: center;
text-align: center;
width: var(--aegis-btn-fixed-width);
}
@media (max-width: 767.98px) {
.aegis-btn-group {
grid-auto-flow: row;
max-width: 100%;
}
:is(.aegis-btn-row, .aegis-btn-row-start, .agent-config-action-row):not(:has(> :not(.aegis-btn, form))) {
grid-auto-flow: row;
max-width: 100%;
}
}
/* Alert Audit fix (operator 2026-10-12 05:56, item 5: "Refresh button gets the same width as the other buttons on
the page"): a standard button that must be as wide as the quick-jump buttons of the strip above it. The button
names their labels (data-aegis-width-as, one label per line; the page takes them from the ONE quick-navigation
list). An unseen stand-in of no height inside the button holds those labels in the button's own text style, so
the button's content is as wide as the longest of them; with its own padding and border the button is then as
wide as a quick-jump button. No width is written anywhere, and a changed label needs no changed number.
Overview r6 (item 3; Design Standard v2.3 item: equal-width status pills): the ONE shared pill (AegisPill WidthAs)
uses this SAME rule, so every pill of a list is as wide as its widest word. */
:is(.aegis-btn, .aegis-pill)[data-aegis-width-as] {
align-content: center;
display: inline-grid;
justify-items: center;
}
:is(.aegis-btn, .aegis-pill)[data-aegis-width-as]::after {
content: attr(data-aegis-width-as);
height: 0;
overflow: hidden;
visibility: hidden;
white-space: pre;
}
/* A button-shaped link that is switched off (AegisButton with Href and Disabled). */
a.btn.disabled {
pointer-events: none;
}
/* Shared status-box standard (UI standard pass 1, 2026-10-03, AEGIS-Interface-Standard.md rule 5):
one rectangular box (not a pill), fixed width and height from variables, centred text, colour
from the existing status variables. No background fill by default, matching the NOC View
counter look (NocViewStyles.razor .noc-summary-pill) this class is modelled on. Default (no
modifier) colour is the good/green status, matching the previous default .agent-config-pill
colour it replaces on its first page (Agent Configuration). */
.aegis-status-box {
align-items: center;
border: 1px solid var(--aegis-panel-border-color);
border-radius: var(--bs-border-radius-sm, 0.25rem);
box-sizing: border-box;
color: var(--aegis-status-good-color);
display: inline-flex;
font-family: var(--aegis-font-family);
font-size: var(--aegis-graph-axis-size);
font-weight: var(--aegis-graph-axis-unit-weight);
height: var(--aegis-statusbox-height);
justify-content: center;
line-height: 1;
padding: 0 10px;
text-align: center;
white-space: nowrap;
width: var(--aegis-statusbox-width);
}
.aegis-status-box.warning {
color: var(--aegis-status-warning-color);
}
.aegis-status-box.danger {
color: var(--aegis-status-critical-color);
}
.aegis-status-box.muted {
color: var(--aegis-muted-text-color);
}
/* Shared plain-text status standard (Interface Standard rule 5, corrected 2026-10-03 ~10:42: tables use plain
coloured status text, no box, left-aligned under the column heading; rectangular boxes are reserved for
counters, NOC View style). Same colour variables and modifier names as .aegis-status-box, no border, no fixed
size, no centring - a plain inline run of text. First use: Agent Configuration (Your agents' Status/Role
columns, the agent cluster members table's Role/State columns). */
.aegis-status-text {
color: var(--aegis-status-good-color);
font-family: var(--aegis-font-family);
font-size: var(--aegis-graph-axis-size);
font-weight: var(--aegis-graph-axis-unit-weight);
text-align: left;
white-space: nowrap;
}
.aegis-status-text.warning {
color: var(--aegis-status-warning-color);
}
.aegis-status-text.danger {
color: var(--aegis-status-critical-color);
}
.aegis-status-text.muted {
color: var(--aegis-muted-text-color);
}
/* Shared bright-value-text standard (Agent Configuration uniformity, operator 2026-10-03 16:21,
item 4): a plain read-only value that must stay bright and readable in both themes, where the
surrounding Bootstrap class would otherwise leave it un-themed. Regression this fixes: commit
de5414b (2026-09-29, "Work-order piece 2: header-tenant pages") replaced the Client field's
themed