/* ============================================================================ BRAINWEBER THEME — CORE. Two complete design generations, one switch. ⚠ THIS FILE IS THE PRODUCT. It styles only markup that is NOT owned by the host application: Serenity's own widgets (grids, dialogs, forms, select2, flatpickr, pager, toolbar, toasts), the shell and auth views the theme package ships, and the UX modules it ships (list-page chrome, filter pills, validation banner, density switch, grid states, stacked dialogs, export/print sheet). It carries no knowledge of any particular application's screens, so it drops into any Serene app unmodified. Styles for markup the HOST owns live in theme-app.css, which loads after this. ⚠ Keep that order. This file must also load AFTER Serenity.Extensions' common-theme.css and Bootstrap — it wins by source order, never by !important. ⚠ Token prefix is --bw-*. It was --m-* until 2026-08-19; renamed because a theme shipped to another company must not squat on a two-letter namespace in their app. HOW THIS FILE IS ORGANISED 1. Font 2. Token block for v1 (:root[data-theme-version="v1"]) 3. Token block for v2 (:root[data-theme-version="v2"]) 3b. Dark overrides ([data-theme-version="vN"][data-theme="dark"]) 4. Framework bridge (--bs-* and --s-* remapped onto --bw-*) 5. Component layer (reads --bw-* only, never a literal colour) 6. Structural shell (rail vs sidebar, dialog vs drawer) 7. Auth screens 8. Dashboard 9. Print The active version is stamped on by the layouts from Common/Theming/ThemeVersion.cs, driven by AppSettings:ThemeVersion. TWO INDEPENDENT AXES data-theme-version picks the design generation (v1 or v2); data-theme picks light or dark within it, from Common/Theming/ThemeMode.cs. All four combinations are real, so section 3b overrides only the COLOUR tokens and never geometry — a dark v1 is still 32px rows and 4px corners. WHY THIS FILE IS LAST IN THE "Base" CSS BUNDLE theme.css restyles components that common-theme.css and site.css have already styled, so it is listed last in appsettings.bundles.json and wins on source order rather than by escalating to !important. Keep it there. (That note lives here and not in the bundles file because @serenity-is/tsbuild JSON.parses appsettings.bundles.json strictly — a // comment in it fails the whole TS build.) WHY BOTH VERSIONS LIVE IN ONE FILE, ALWAYS LOADED The obvious alternative — emit a to tokens-v1.css or tokens-v2.css depending on the setting — means the browser cache, the asset-version hash and the bundler all have to agree about which file is current, and a stale hash silently serves the wrong theme. Attribute-scoped blocks in one file cannot desync: the served CSS is identical for both versions and only the attribute differs. The cost is a few KB of unused custom properties, which compress to almost nothing. It also means a future per-user or preview switch is a one-attribute DOM change with no network round trip. THE ONE RULE FOR THE COMPONENT LAYER No literal colours, radii or fonts below section 4 — every value comes from a --bw-* token. If a component needs something the tokens do not express, add the token to BOTH blocks rather than hardcoding it in the component. That is what keeps the two versions genuinely switchable instead of v1-with-patches. WHY SECTION 4 EXISTS Serenity and Bootstrap both style hundreds of elements this file never names, through their own custom properties (--bs-primary, --s-card-bg, --s-tabs-text and so on). Restyling those elements one selector at a time would be endless and would still leave stock colours showing in components nobody thought to list. Re-pointing the framework variables at the BWDesignSystem tokens fixes the whole surface at once, and the component layer below then only has to correct SHAPE and DENSITY — the things a variable cannot express. ============================================================================ */ /* ---- 1. FONT ---- Both designs specify IBM Plex Sans (with Plex Mono for figures and counts). The faces are SELF-HOSTED and no longer @imported from fonts.googleapis.com: see ~/Content/fonts/ibm-plex/ibm-plex.css, which is listed immediately before this file in the Base bundle. That file's header explains the subsetting and how to regenerate it. Nothing is declared here on purpose. An @import is only valid at the TOP of a stylesheet, so a font pulled in from this file would have to sit above the token blocks and would block their parse on a network round trip; a separate bundle entry loads in parallel instead. The stacks in the token blocks below still end in system-ui, so the app stays legible if the woff2 files are missing or blocked. */ /* ============================================================================ 2. VERSION 1 — navy chrome, orange accent, dense Accent discipline: #F7941D is an ACCENT ONLY. It marks state and focus; it is never a surface and never a primary button. Primary actions are navy. Using the orange as a fill is the single fastest way to make this design look wrong. ============================================================================ */ :root[data-theme-version="v1"] { --bw-primary: #0F2A5F; --bw-primary-rgb: 15, 42, 95; --bw-primary-hover: #16386F; --bw-primary-active: #0A1F49; --bw-primary-soft: #EEF2F8; --bw-primary-softer: #F3F7FE; /* The rule that pairs with --bw-primary-soft. The soft fill had no matching line, and a neutral --bw-border beside a tinted fill reads as a mistake. */ --bw-primary-soft-line: #D5DCE7; --bw-on-primary: #FFFFFF; /* ⚠ THE PRIMARY COLOUR WHEN IT IS TEXT OR AN ICON, not a fill. In light mode it is the primary itself, so this token changes nothing here — it exists for dark, where the same navy that works as a button fill is unreadable AS TEXT on a dark surface (2.0:1 for the grid's own edit links, measured). Every foreground use of the primary in the component layer reads this instead. Fills keep --bw-primary. */ --bw-link: #0F2A5F; /* A chart bar is the primary used as a MARK: nothing sits on top of it, so it has to stand off the surface the way ink does rather than the way a button fill does. ⚠ In light mode that is the primary itself; in dark it is NOT — v1 dark --bw-primary #2E4C93 measures 2.08:1 against the dark surface, below the 3:1 a data mark needs, so the dark blocks take the --bw-link value instead. Measured, not guessed: 13.85 / 6.23 / 8.36 / 9.25:1 across v1-light, v2-light, v1-dark, v2-dark. */ --bw-chart-mark: #0F2A5F; --bw-chart-track: #EEF1F6; /* Categorical slots — segment identity for the donut and stacked-bar forms ONLY. Bar and Column stay one hue (--bw-chart-mark): bar length already carries magnitude, and colouring nominal bars by value would re-encode it and spend the identity channel for nothing. ⚠ These are the dataviz reference palette's validated slots, adopted wholesale because BWDesignSystem's own tokens have no categorical ramp — five hues plus a green, in a FIXED order that is itself the colourblind-safety mechanism. Do not reorder them and do not add a seventh: a generated hue is indistinguishable from an existing one under CVD, so a longer tail folds into "Other" instead (DashboardChartResolver.CategoricalSlotCount). Validated with the skill's own script — light on #FFFFFF: worst adjacent CVD ΔE 9.1, normal-vision ΔE 19.6, all six inside the lightness band and over the chroma floor. ⚠ Three of them (aqua 2.82, yellow 2.17, magenta 2.69) sit BELOW 3:1 on white. That is a WARN, not a pass, and it is discharged by the always-visible labelled legend on those two forms — never by dismissing it. If the legend ever goes, these have to be re-stepped. */ --bw-cat-1: #2a78d6; --bw-cat-2: #eb6834; --bw-cat-3: #1baf7a; --bw-cat-4: #eda100; --bw-cat-5: #e87ba4; --bw-cat-6: #008300; --bw-link-rgb: 15, 42, 95; --bw-link-hover: #16386F; --bw-chrome: #0A1B3D; /* sidebar / rail */ --bw-chrome-text: #FFFFFF; --bw-chrome-muted: #8494B4; --bw-chrome-hover: #16386F; --bw-chrome-rule: rgba(255, 255, 255, .08); --bw-nav-active-bg: #16386F; --bw-nav-active-fg: #FFFFFF; /* Lifted from the handoff's #63769B, which is 3.73:1 on the navy rail — it carries the brand tagline and the nav group captions, both small text. #7C8FB5 is 5.22:1. */ --bw-nav-group: #7C8FB5; --bw-nav-count: #8494B4; --bw-accent: #F7941D; --bw-accent-soft: #FFF1DC; --bw-accent-ink: #8A4A00; --bw-accent-line: #F7CE9B; --bw-canvas: #F4F6F9; /* page background */ --bw-surface: #FFFFFF; /* cards, grids, dialogs */ --bw-field: #F7F9FC; /* toolbars, table heads, footers */ --bw-input-bg: #FFFFFF; /* v1 inputs are white, not tinted */ --bw-readonly-bg: #F0F3F8; --bw-text: #2B3A52; --bw-text-strong: #0F1B2D; --bw-muted: #5B6880; /* ⚠ Darkened from the handoff's #7A8699, which measures 3.69:1 on white — under the 4.5:1 WCAG AA needs for text below 18.66px. This token carries every KPI note, module subtitle, queue meta line and hint chip in the app, so it was the single largest legibility problem in the theme. #6B7789 keeps the same hue and reads as the same grey, at 4.54:1. Deliberate deviation from the doc; revert both --bw-faint values together if exact fidelity is ever needed over legibility. */ --bw-faint: #6B7789; /* ⚠ Was #8A94A6 (3.06:1). Placeholder text is still text, and on a select2 the placeholder IS the control's only visible content — unreadable placeholder means the user cannot tell what the control is for. Clearing 4.5:1 on white takes roughly this value, so placeholder lands on the same grey as --bw-faint; there is no lighter shade that passes. */ --bw-placeholder: #6B7789; --bw-disabled: #A3ADBD; --bw-border: #DDE3EC; --bw-border-strong: #C6CFDD; --bw-border-field: #C6CFDD; --bw-rule: #EEF1F6; /* hairlines inside a surface */ --bw-row-line: #F1F4F9; --bw-success: #0B6B45; --bw-success-bg: #E7F3EC; --bw-success-line: #C7E2D2; --bw-warning: #8A4A00; --bw-warning-bg: #FFF1DC; --bw-warning-line: #F7CE9B; --bw-danger: #C0392B; --bw-danger-ink: #8E241A; --bw-danger-bg: #FDECEA; --bw-danger-line: #F2BDB6; /* Destructive text ON the dark chrome — v1's bulk bar is a navy strip, and --bw-danger at #C0392B is far too dark to read against it. */ --bw-danger-on-chrome: #F2BDB6; --bw-info: #1B3A75; --bw-info-bg: #EEF2F8; --bw-info-line: #D5DEEF; --bw-hover-bg: #F7F9FC; --bw-selected-bg: #F3F7FE; --bw-alt-row: #FCFDFE; --bw-focus-ring: 0 0 0 3px rgba(15, 42, 95, .12); --bw-focus-ring-error: 0 0 0 3px rgba(192, 57, 43, .10); --bw-overlay: rgba(10, 27, 61, .42); /* The scrim a SECOND dialog level lays over the first. Lighter than --bw-overlay on purpose: the parent is already dimmed once, and dimming it again at full strength turns it into a dark slab instead of a dialog you can still read. */ --bw-overlay-2: rgba(10, 27, 61, .30); /* Loading-skeleton bars: -a is the resting bar, -b the sweep highlight. Both sit between the canvas and the border so the bars read as absent content, not as data. */ --bw-skeleton-a: #E4EAF3; --bw-skeleton-b: #F2F5FA; --bw-radius: 4px; --bw-radius-sm: 3px; --bw-radius-lg: 6px; --bw-radius-xl: 6px; --bw-pill: 3px; /* v1 status chips are square-ish, not pills */ --bw-chip: 13px; /* filter chips are the one rounded thing */ --bw-font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --bw-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --bw-text-base: 13px; --bw-text-sm: 12px; --bw-text-xs: 11px; --bw-h1-size: 20px; --bw-h2-size: 15px; --bw-h3-size: 13px; /* Form labels are SENTENCE case in both designs — the uppercase belongs to column heads and section eyebrows, which have their own tokens below. */ --bw-label-size: 12px; --bw-label-weight: 600; --bw-label-color: #2B3A52; --bw-label-spacing: .02em; --bw-eyebrow-size: 11px; --bw-eyebrow-spacing: .09em; --bw-eyebrow-transform: uppercase; --bw-eyebrow-color: #54637C; --bw-eyebrow-weight: 600; --bw-colhead-size: 11px; --bw-colhead-spacing: .06em; --bw-colhead-color: #54637C; --bw-form-cols: 3; /* create dialog is 3 fields across */ --bw-control-h: 32px; /* dense: 20-row grids are the point */ --bw-control-h-sm: 26px; /* ⚠ The handoff draws a form control TALLER than a list control: every field and every footer button in section 04's create dialog is 34px, while the tools row, top-bar search and toolbar buttons in section 03 are 32px. One --bw-control-h for both left dialog fields 2px short of spec. Applied by a contextual override inside the dialog body (section 5, "dialog form density"), not by a second set of selectors. */ --bw-form-h: 34px; /* v1 squares its avatar off like the rest of its chrome; v2 makes it a disc. */ --bw-avatar-radius: 4px; --bw-checkbox: 14px; /* the handoff's grid checkbox */ /* Its own radius: --bw-radius-sm is tuned for controls and on a 15px box reads as a CIRCLE, which is a radio button, not a checkbox. */ --bw-checkbox-radius: 3px; --bw-btn-h: 32px; --bw-row-h: 32px; --bw-head-h: 32px; --bw-gap: 12px; --bw-pad: 16px; --bw-pad-lg: 20px; --bw-nav-w: 56px; /* icon rail, collapsed */ --bw-nav-w-open: 236px; /* rail expanded on hover */ --bw-nav-item-h: 38px; --bw-topbar-h: 52px; --bw-topbar-bg: #FFFFFF; --bw-topbar-border: #DDE3EC; --bw-shadow: 0 1px 2px rgba(10, 27, 61, .06); --bw-shadow-lg: 0 8px 24px rgba(10, 27, 61, .12); --bw-shadow-pop: 0 24px 60px rgba(10, 27, 61, .35); --bw-toast-w: 380px; /* the prototype's notification width */ /* dialogs: v1 is a centred modal with navy chrome */ --bw-dialog-w: 1000px; /* Section 06 draws a stacked pair, and the two levels are NOT the same sheet: the parent recedes to 960px at 74px from the top, and the child sits at 820px / 190px over a second scrim. Level 1 alone keeps --bw-dialog-w / 60px. */ --bw-dialog-w-back: 960px; --bw-dialog-top-back: 74px; --bw-dialog-w-2: 820px; --bw-dialog-top-2: 190px; --bw-dialog-head-bg: #0A1B3D; --bw-dialog-head-fg: #FFFFFF; --bw-dialog-head-h: 52px; --bw-dialog-foot-bg: #F7F9FC; /* auth split screen — the doc fixes the brand column at 588px of 1440 */ --bw-auth-cols: 588fr 852fr; --bw-auth-brand-pad: 56px 52px; --bw-auth-brand-bg: #0A1B3D; --bw-auth-brand-fg: #FFFFFF; --bw-auth-brand-lede: #8494B4; --bw-auth-brand-item: #C7D3E6; --bw-auth-brand-foot: #63769B; --bw-auth-brand-rule: rgba(255, 255, 255, .12); --bw-auth-num: #F7941D; /* the accent's one job on this screen */ --bw-auth-mark-bg: #F7941D; --bw-auth-mark-fg: #0A1B3D; --bw-auth-mark-size: 30px; --bw-auth-mark-radius: 5px; --bw-auth-title-size: 40px; --bw-auth-title-spacing: -.02em; --bw-auth-form-w: 396px; --bw-auth-form-gap: 26px; --bw-auth-control-h: 40px; --bw-auth-btn-h: 44px; } /* ============================================================================ 3. VERSION 2 — green, warm-grey canvas, softer and roomier Not a hue swap of v1: corners roughly double, controls and rows grow, chips become true pills, and the accent role disappears entirely because the green carries emphasis on its own. ============================================================================ */ :root[data-theme-version="v2"] { --bw-primary: #0F6E52; --bw-primary-rgb: 15, 110, 82; --bw-primary-hover: #0C5B44; --bw-primary-active: #073E2F; --bw-primary-soft: #F2F8F5; --bw-primary-softer: #F7FBF9; /* see the v1 block; this is the handoff's own #CFE3DA against the #F2F8F5 fill */ --bw-primary-soft-line: #CFE3DA; --bw-on-primary: #FFFFFF; --bw-link: #0F6E52; /* see the v1 block */ --bw-chart-mark: #0F6E52; --bw-chart-track: #EDF2EF; /* Categorical slots — segment identity for the donut and stacked-bar forms ONLY. Bar and Column stay one hue (--bw-chart-mark): bar length already carries magnitude, and colouring nominal bars by value would re-encode it and spend the identity channel for nothing. ⚠ These are the dataviz reference palette's validated slots, adopted wholesale because BWDesignSystem's own tokens have no categorical ramp — five hues plus a green, in a FIXED order that is itself the colourblind-safety mechanism. Do not reorder them and do not add a seventh: a generated hue is indistinguishable from an existing one under CVD, so a longer tail folds into "Other" instead (DashboardChartResolver.CategoricalSlotCount). Validated with the skill's own script — light on #FFFFFF: worst adjacent CVD ΔE 9.1, normal-vision ΔE 19.6, all six inside the lightness band and over the chroma floor. ⚠ Three of them (aqua 2.82, yellow 2.17, magenta 2.69) sit BELOW 3:1 on white. That is a WARN, not a pass, and it is discharged by the always-visible labelled legend on those two forms — never by dismissing it. If the legend ever goes, these have to be re-stepped. */ --bw-cat-1: #2a78d6; --bw-cat-2: #eb6834; --bw-cat-3: #1baf7a; --bw-cat-4: #eda100; --bw-cat-5: #e87ba4; --bw-cat-6: #008300; --bw-link-rgb: 15, 110, 82; --bw-link-hover: #0B5741; --bw-chrome: #0C2A22; --bw-chrome-text: #EAF2EE; --bw-chrome-muted: #A8C4B9; --bw-chrome-hover: rgba(255, 255, 255, .07); --bw-chrome-rule: rgba(255, 255, 255, .10); --bw-nav-active-bg: rgba(255, 255, 255, .11); --bw-nav-active-fg: #FFFFFF; /* Same correction as v1: the handoff's #5E8578 is 3.72:1 on the dark sidebar. */ --bw-nav-group: #6F998B; --bw-nav-count: #6F998B; --bw-accent: #0F6E52; /* same as primary: v2 has no separate accent */ --bw-accent-soft: #FEF6E7; --bw-accent-ink: #94620A; --bw-accent-line: #F7E3B5; --bw-canvas: #F5F7F6; --bw-surface: #FFFFFF; --bw-field: #FAFBFA; --bw-input-bg: #FFFFFF; --bw-readonly-bg: #F5F7F6; --bw-text: #16211D; --bw-text-strong: #0C3B2E; --bw-muted: #3C4A45; /* Same correction as v1: the handoff's #6E7A75 measures 4.47:1 on white, a hair under AA for small text. #697570 reads identically at 4.79:1. */ --bw-faint: #697570; /* Same correction as v1: the handoff's #98A29E is well under AA for placeholder text. */ --bw-placeholder: #697570; --bw-disabled: #A9B2AE; --bw-border: #E4E7E5; --bw-border-strong: #D9DEDB; --bw-border-field: #D9DEDB; --bw-rule: #EDF0EE; --bw-row-line: #F1F4F2; --bw-success: #0A6C4E; --bw-success-bg: #EAF6F0; --bw-success-line: #CFE3DA; --bw-warning: #94620A; --bw-warning-bg: #FEF6E7; --bw-warning-line: #F7E3B5; --bw-danger: #B42318; --bw-danger-ink: #B42318; --bw-danger-bg: #FEF3F2; --bw-danger-line: #F3C9C4; /* v2's bulk bar is light, so this is unused there — defined to keep both blocks in step, as the token rule requires. */ --bw-danger-on-chrome: #F3C9C4; --bw-info: #0C3B2E; --bw-info-bg: #F2F8F5; --bw-info-line: #CFE3DA; --bw-hover-bg: #FAFBFA; --bw-selected-bg: #F2F8F5; --bw-alt-row: #FFFFFF; /* v2 has no zebra striping */ --bw-focus-ring: 0 0 0 3px rgba(15, 110, 82, .13); --bw-focus-ring-error: 0 0 0 3px rgba(180, 35, 24, .12); --bw-overlay: rgba(12, 42, 34, .32); --bw-overlay-2: rgba(12, 42, 34, .28); /* see the v1 block */ /* see the v1 block for what these two are */ --bw-skeleton-a: #E4EAE7; --bw-skeleton-b: #F3F7F5; --bw-radius: 8px; --bw-radius-sm: 7px; --bw-radius-lg: 10px; --bw-radius-xl: 11px; --bw-pill: 999px; /* v2 uses true pills for badges/chips */ --bw-chip: 999px; --bw-font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --bw-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --bw-text-base: 13.5px; --bw-text-sm: 12.5px; --bw-text-xs: 11.5px; --bw-h1-size: 24px; --bw-h2-size: 14.5px; --bw-h3-size: 13px; --bw-label-size: 12.5px; --bw-label-weight: 500; --bw-label-color: #3C4A45; --bw-label-spacing: 0; /* v2's section headings are sentence case at body weight, not shouted caps — one of the clearest tells between the two generations in a form. */ --bw-eyebrow-size: 13px; --bw-eyebrow-spacing: .02em; --bw-eyebrow-transform: none; --bw-eyebrow-color: #16211D; --bw-eyebrow-weight: 600; --bw-colhead-size: 11px; --bw-colhead-spacing: .05em; /* Darkened from the handoff's #6E7A75 (4.30:1 on the header fill) to clear AA. */ --bw-colhead-color: #64706B; --bw-form-cols: 2; /* the drawer is narrower — 2 across */ /* v2 splits the same way v1 does, in the same direction: the doc's list controls — the tools-row search, the Filters toggle, the filter-panel selects — are 34px, and the drawer's own fields and footer buttons are 36px. This token is the LIST height; the 36px belongs to --bw-form-h. (Was 36px here, which made every tools-row control 2px taller than the design.) */ --bw-control-h: 34px; --bw-control-h-sm: 30px; --bw-form-h: 36px; --bw-avatar-radius: 50%; /* see the v1 block */ --bw-checkbox: 15px; /* v2 draws it a touch larger than v1 */ --bw-checkbox-radius: 4px; /* see the v1 block */ --bw-btn-h: 36px; --bw-row-h: 44px; --bw-head-h: 38px; --bw-gap: 14px; --bw-pad: 17px; --bw-pad-lg: 22px; --bw-nav-w: 248px; /* always-labelled sidebar */ --bw-nav-w-open: 248px; /* v2 does not collapse — no hover state */ --bw-nav-item-h: 33px; --bw-topbar-h: 56px; --bw-topbar-bg: #FFFFFF; --bw-topbar-border: #E4E7E5; --bw-shadow: 0 1px 2px rgba(12, 59, 46, .05); --bw-shadow-lg: 0 16px 40px rgba(12, 42, 34, .14); --bw-shadow-pop: -16px 0 48px rgba(12, 42, 34, .18); --bw-toast-w: 380px; /* see the v1 block */ /* dialogs: v2 is a right-hand drawer with a light header */ --bw-dialog-w: min(760px, 90vw); /* The child drawer is narrower — the doc says min(560px, 80vw) — which is what lets the level-1 drawer stay visible behind it. v2 keeps the parent where it is; the depth is conveyed by the child being inset, not by moving the parent. */ --bw-dialog-w-back: min(760px, 90vw); --bw-dialog-w-2: min(560px, 80vw); --bw-dialog-head-bg: #FFFFFF; --bw-dialog-head-fg: #16211D; --bw-dialog-head-h: auto; --bw-dialog-foot-bg: #FAFBFA; /* auth split screen — v2 sizes the brand column in fractions, not pixels */ --bw-auth-cols: 1.05fr 1fr; --bw-auth-brand-pad: 56px 64px; --bw-auth-brand-bg: #0C2A22; --bw-auth-brand-fg: #EAF2EE; --bw-auth-brand-lede: #A8C4B9; --bw-auth-brand-item: #C7DCD4; --bw-auth-brand-foot: #6F9488; --bw-auth-brand-rule: rgba(255, 255, 255, .12); --bw-auth-num: #35C79A; --bw-auth-mark-bg: #12855F; --bw-auth-mark-fg: #FFFFFF; --bw-auth-mark-size: 38px; --bw-auth-mark-radius: 9px; --bw-auth-title-size: 40px; --bw-auth-title-spacing: -.025em; --bw-auth-form-w: 388px; --bw-auth-form-gap: 28px; --bw-auth-control-h: 42px; --bw-auth-btn-h: 44px; } /* ============================================================================ 3b. DARK — one override block per generation. Added 2026-08-17 from the interactive prototype's Light / Dark / Auto control. These blocks re-point COLOUR tokens only: radius, control heights, row heights, spacing and type all stay exactly as the generation defines them, because dark is not a third design — it is the same design on a dark ground. ⚠ The chrome deliberately does NOT change. v1's navy rail (#0A1B3D) and v2's deep green sidebar are already dark surfaces, and the prototype hardcodes that navy in both its light and dark states rather than tokenising it. Inventing a "darker dark" for them would only wash out the one part of the app that already worked, so --bw-chrome, the nav tokens, the auth brand panel and v1's dialog header keep their light-mode values. ⚠ `color-scheme: dark` is not decoration. It is what makes the browser render native furniture — scrollbars, the date input's own controls, autofill, form control defaults — dark. Without it a perfectly dark page grows white scrollbars the CSS cannot reach. Only v1's palette is specified: it comes from the prototype's own html[data-theme="dark"] block (--bg #0C1322, --surface #141C2E, --primary #2E4C93 …). ⚠ THE v2 DARK PALETTE IS DERIVED — no handoff or prototype specifies a dark green generation, so those values are this project's invention, built to the same relationships as v1's: canvas below surface, surface below field, borders two steps up from the canvas, and a primary lightened until it carries text on a dark ground. Treat them as a proposal to review, not as spec. ============================================================================ */ :root[data-theme-version="v1"][data-theme="dark"] { color-scheme: dark; /* Primary lifts from #0F2A5F to the prototype's #2E4C93: the light navy is nearly invisible against a dark canvas, and a fill has to read as a fill. */ --bw-primary: #2E4C93; --bw-primary-rgb: 46, 76, 147; --bw-primary-hover: #3B5DB0; --bw-primary-active: #24407F; --bw-primary-soft: #1B2A4A; --bw-primary-softer: #16233D; --bw-primary-soft-line: #384663; --bw-on-primary: #FFFFFF; /* The prototype's own --link. This is the token that fixes the grid's edit links, which measured 2.01:1 rendered in --bw-primary on the dark row. #9FB6E8 is 7.4:1 there. */ --bw-link: #9FB6E8; --bw-chart-mark: #9FB6E8; /* the primary is only 2.08:1 here — see the v1 light block */ --bw-chart-track: #1D2740; /* The same six hues stepped for a dark surface — not a different palette. Validated against BOTH BWDesignSystem dark surfaces (#141C2E and #13201C): all six clear 3:1 there, so unlike light mode there is no contrast WARN to discharge. Worst adjacent CVD ΔE 8.4, normal-vision 19.3. */ --bw-cat-1: #3987e5; --bw-cat-2: #d95926; --bw-cat-3: #199e70; --bw-cat-4: #c98500; --bw-cat-5: #d55181; --bw-cat-6: #008300; --bw-link-rgb: 159, 182, 232; --bw-link-hover: #C0D0F2; --bw-canvas: #0C1322; --bw-surface: #141C2E; --bw-field: #111827; --bw-input-bg: #111827; /* light v1 inputs are white; dark ones are the field */ --bw-readonly-bg: #0E1523; --bw-text: #E6ECF7; --bw-text-strong: #EAF0FA; --bw-muted: #A6B3C9; /* lifted from the prototype's #93A0B8 — 4.5:1 on --bw-surface */ --bw-faint: #93A0B8; --bw-placeholder: #93A0B8; --bw-disabled: #64708A; --bw-border: #273350; --bw-border-strong: #384663; --bw-border-field: #384663; --bw-rule: #1E2A44; --bw-row-line: #1A2438; --bw-hover-bg: #1A2338; --bw-selected-bg: #1B2A4A; --bw-alt-row: #161F33; /* Semantic tones are re-picked, not darkened: #0B6B45 on #141C2E is unreadable. Each is a light tint for the text/icon with a deep tint behind it. */ --bw-success: #4FC08D; --bw-success-bg: #10281F; --bw-success-line: #235141; --bw-warning: #E3A93F; --bw-warning-bg: #2A2110; --bw-warning-line: #4E3C1B; --bw-danger: #F0857B; --bw-danger-ink: #F5A79F; --bw-danger-bg: #2A1614; --bw-danger-line: #522722; --bw-info: #9FB6E8; --bw-info-bg: #16233D; --bw-info-line: #2C3C63; --bw-focus-ring: 0 0 0 3px rgba(159, 182, 232, .22); --bw-focus-ring-error: 0 0 0 3px rgba(240, 133, 123, .20); --bw-overlay: rgba(3, 7, 16, .64); --bw-overlay-2: rgba(3, 7, 16, .46); --bw-skeleton-a: #1B2338; --bw-skeleton-b: #26314A; /* Elevation cannot be a darker shadow on a dark ground — there is nothing darker to cast onto. It is carried by a deeper, wider shadow plus the border. */ --bw-shadow: 0 1px 2px rgba(0, 0, 0, .40); --bw-shadow-lg: 0 10px 28px rgba(0, 0, 0, .52); --bw-shadow-pop: 0 24px 60px rgba(0, 0, 0, .62); --bw-label-color: #C7D1E3; --bw-eyebrow-color: #A6B3C9; --bw-colhead-color: #A6B3C9; --bw-topbar-bg: #141C2E; --bw-topbar-border: #273350; /* v1's dialog header is the navy chrome in both modes; only the footer moves. */ --bw-dialog-foot-bg: #111827; } :root[data-theme-version="v2"][data-theme="dark"] { color-scheme: dark; /* ⚠ Derived, not specified. v2's #0F6E52 is too dark to carry a fill here, so the primary lightens and its text goes DARK — a light-green button with near-black ink, which is the only pairing that clears 4.5:1 at this lightness. v1 keeps white on navy because its navy stays dark enough for that to work. */ --bw-primary: #2FA97F; --bw-primary-rgb: 47, 169, 127; --bw-primary-hover: #3CBB8E; --bw-primary-active: #268C68; --bw-primary-soft: #16302A; --bw-primary-softer: #12241F; --bw-primary-soft-line: #2A4A3F; --bw-on-primary: #04140F; /* Derived to match v1 dark's relationship: lighter than the fill, so it carries text on both the surface and the soft fill. */ --bw-link: #6FD3AA; --bw-chart-mark: #6FD3AA; --bw-chart-track: #1B2A25; /* The same six hues stepped for a dark surface — not a different palette. Validated against BOTH BWDesignSystem dark surfaces (#141C2E and #13201C): all six clear 3:1 there, so unlike light mode there is no contrast WARN to discharge. Worst adjacent CVD ΔE 8.4, normal-vision 19.3. */ --bw-cat-1: #3987e5; --bw-cat-2: #d95926; --bw-cat-3: #199e70; --bw-cat-4: #c98500; --bw-cat-5: #d55181; --bw-cat-6: #008300; --bw-link-rgb: 111, 211, 170; --bw-link-hover: #8FE0BF; --bw-canvas: #0B1512; --bw-surface: #13201C; --bw-field: #101A17; --bw-input-bg: #101A17; --bw-readonly-bg: #0E1714; --bw-text: #E4EFE9; --bw-text-strong: #F0F6F3; --bw-muted: #A3B5AC; --bw-faint: #91A49B; --bw-placeholder: #91A49B; --bw-disabled: #63756C; --bw-border: #223A32; --bw-border-strong: #2E4A40; --bw-border-field: #2E4A40; --bw-rule: #1B2E28; --bw-row-line: #182924; --bw-hover-bg: #17251F; --bw-selected-bg: #16302A; --bw-alt-row: #14211D; --bw-success: #45C393; --bw-success-bg: #0F2A20; --bw-success-line: #21503F; --bw-warning: #E0B057; --bw-warning-bg: #2A2211; --bw-warning-line: #4C3D1C; --bw-danger: #F0897E; --bw-danger-ink: #F5ADA5; --bw-danger-bg: #2B1715; --bw-danger-line: #532924; --bw-info: #8FC2AE; --bw-info-bg: #14251F; --bw-info-line: #2A4438; --bw-focus-ring: 0 0 0 3px rgba(47, 169, 127, .24); --bw-focus-ring-error: 0 0 0 3px rgba(240, 137, 126, .20); --bw-overlay: rgba(2, 10, 8, .64); --bw-overlay-2: rgba(2, 10, 8, .46); --bw-skeleton-a: #1A2A24; --bw-skeleton-b: #24382F; --bw-shadow: 0 1px 2px rgba(0, 0, 0, .40); --bw-shadow-lg: 0 10px 28px rgba(0, 0, 0, .52); --bw-shadow-pop: -16px 0 48px rgba(0, 0, 0, .58); --bw-label-color: #C9DAD2; --bw-eyebrow-color: #A3B5AC; --bw-colhead-color: #A3B5AC; --bw-topbar-bg: #13201C; --bw-topbar-border: #223A32; /* v2's dialog header is a light surface in light mode; in dark it becomes the dark surface, so its text has to flip with it. */ --bw-dialog-head-bg: #13201C; --bw-dialog-head-fg: #F0F6F3; --bw-dialog-foot-bg: #101A17; } /* ============================================================================ 4. FRAMEWORK BRIDGE — Bootstrap and Serenity variables, re-pointed. Everything below reads --bw-* only. Nothing here is a literal. This is what stops stock Serene colours leaking through components this file never names: Bootstrap derives buttons, alerts, tables, dropdowns, form controls, popovers and modals from --bs-*, and Serenity derives grids, dialogs, tabs, pagers, select2 and toolbars from --s-*. Point those at the BWDesignSystem tokens once and the whole surface moves together, in both versions. ============================================================================ */ :root[data-theme-version] { /* --- Bootstrap --- */ --bs-primary: var(--bw-primary); --bs-primary-rgb: var(--bw-primary-rgb); --bs-primary-text-emphasis: var(--bw-link); --bs-primary-bg-subtle: var(--bw-primary-soft); --bs-primary-border-subtle: var(--bw-border-strong); /* --bw-link, not --bw-primary: see the token's note. In light mode they are the same value, so this changes nothing there; in dark it is the difference between a readable link and navy text on a navy row. */ --bs-link-color: var(--bw-link); --bs-link-color-rgb: var(--bw-link-rgb); --bs-link-hover-color: var(--bw-link-hover); --bs-secondary: var(--bw-muted); --bs-secondary-color: var(--bw-muted); --bs-tertiary-color: var(--bw-faint); --bs-emphasis-color: var(--bw-text-strong); --bs-body-bg: var(--bw-surface); --bs-body-color: var(--bw-text); --bs-body-font-family: var(--bw-font); --bs-body-font-size: var(--bw-text-base); --bs-secondary-bg: var(--bw-field); --bs-tertiary-bg: var(--bw-canvas); --bs-border-color: var(--bw-border); --bs-border-color-translucent: var(--bw-border); --bs-border-radius: var(--bw-radius); --bs-border-radius-sm: var(--bw-radius-sm); --bs-border-radius-lg: var(--bw-radius-lg); --bs-border-radius-xl: var(--bw-radius-xl); --bs-border-radius-pill: var(--bw-pill); --bs-success: var(--bw-success); --bs-success-text-emphasis: var(--bw-success); --bs-success-bg-subtle: var(--bw-success-bg); --bs-success-border-subtle: var(--bw-success-line); --bs-danger: var(--bw-danger); --bs-red: var(--bw-danger); --bs-danger-text-emphasis: var(--bw-danger-ink); --bs-danger-bg-subtle: var(--bw-danger-bg); --bs-danger-border-subtle: var(--bw-danger-line); --bs-warning: var(--bw-warning); --bs-warning-text-emphasis: var(--bw-warning); --bs-warning-bg-subtle: var(--bw-warning-bg); --bs-warning-border-subtle: var(--bw-warning-line); --bs-info: var(--bw-info); --bs-info-text-emphasis: var(--bw-info); --bs-info-bg-subtle: var(--bw-info-bg); --bs-info-border-subtle: var(--bw-info-line); --bs-form-invalid-color: var(--bw-danger); --bs-form-invalid-border-color: var(--bw-danger); --bs-form-valid-color: var(--bw-success); --bs-form-valid-border-color: var(--bw-success); --bs-modal-bg: var(--bw-surface); --bs-modal-border-color: var(--bw-border); --bs-modal-border-radius: var(--bw-radius-lg); --bs-modal-header-border-color: var(--bw-border); --bs-modal-footer-border-color: var(--bw-border); --bs-modal-padding: var(--bw-pad-lg); --bs-dropdown-bg: var(--bw-surface); --bs-dropdown-border-color: var(--bw-border); --bs-dropdown-border-radius: var(--bw-radius); --bs-dropdown-link-color: var(--bw-text); --bs-dropdown-link-hover-bg: var(--bw-hover-bg); --bs-dropdown-link-hover-color: var(--bw-text-strong); --bs-dropdown-link-active-bg: var(--bw-primary); --bs-dropdown-link-active-color: var(--bw-on-primary); --bs-dropdown-font-size: var(--bw-text-sm); --bs-nav-link-color: var(--bw-muted); --bs-nav-link-hover-color: var(--bw-text-strong); --bs-nav-tabs-border-color: var(--bw-border); --bs-nav-tabs-link-active-color: var(--bw-text-strong); --bs-nav-tabs-link-active-bg: var(--bw-surface); --bs-table-bg: var(--bw-surface); --bs-table-color: var(--bw-text); --bs-table-border-color: var(--bw-border); --bs-table-striped-bg: var(--bw-alt-row); --bs-table-hover-bg: var(--bw-hover-bg); --bs-heading-color: var(--bw-text-strong); --bs-code-color: var(--bw-primary); --bs-highlight-bg: var(--bw-accent-soft); --bs-focus-ring-color: transparent; /* --- Serenity --- */ --s-card-bg: var(--bw-surface); --s-card-border: var(--bw-border); --s-alt-row-bg: var(--bw-alt-row); --s-category-title: var(--bw-eyebrow-color); --s-sidebar-band-bg: var(--bw-primary); --s-input-bg: var(--bw-input-bg); --s-input-text: var(--bw-text); --s-input-readonly-bg: var(--bw-readonly-bg); --s-input-outline: transparent; --s-input-outline-error: transparent; --s-input-inner-height: calc(var(--bw-control-h) - 2px); --s-input-line-height: calc(var(--bw-control-h) - 2px); /* ⚠ MUST carry a unit. common-theme.css consumes this inside calc() twice — `calc(var(--s-input-padding-v) - 3px)` on .select2-search-choice and `- 2px` on .select2-choices .select2-input. A UNITLESS 0 makes both calcs invalid, which drops the WHOLE padding shorthand to its 0 initial value and silently takes the chip's 18px close-button gutter with it. Written as `0` it looked identical in devtools and broke only those two declarations. */ --s-input-padding-v: 0px; --s-placeholder: var(--bw-placeholder); --s-disabled: var(--bw-disabled); --s-inactive: var(--bw-faint); --s-deleted: var(--bw-faint); --s-modal-shadow: var(--bw-shadow-lg); --s-cell-border: var(--bw-row-line); --s-cell-input-border: var(--bw-border-field); --s-column-header: var(--bw-colhead-color); --s-column-header-border: var(--bw-border); --s-column-header-hover-bg: var(--bw-hover-bg); --s-column-footer: var(--bw-muted); --s-table-title: var(--bw-text-strong); --s-tabs-border: var(--bw-border); --s-tabs-border-active: var(--bw-primary); --s-tabs-text: var(--bw-muted); --s-tabs-text-active: var(--bw-text-strong); --s-tool-icon: var(--bw-muted); --s-tool-icon-size: 1.1rem; --s-pager-icon: var(--bw-muted); --s-pager-text: var(--bw-muted); --pager-btn: var(--bw-muted); --s-col-gap: 8px; --s-row-gap: var(--bw-gap); --s-tabular-font: var(--bw-font); /* Row height is deliberately NOT set here. SleekGrid writes --sg-row-height and --sg-cell-height inline on the grid container from gridDefaults.rowHeight, so a value at :root would be outranked, and if it did win the paint would disagree with the scroll maths. Modules/Common/ScriptInit.ts sets gridDefaults.rowHeight per version instead; --bw-row-h below is the token that must stay in step with it. */ } /* ============================================================================ 5. COMPONENT LAYER — tokens only below this line. ============================================================================ */ /* ---- foundation ---- */ :root[data-theme-version] body { background-color: var(--bw-canvas); color: var(--bw-text); font-family: var(--bw-font); font-size: var(--bw-text-base); -webkit-font-smoothing: antialiased; } :root[data-theme-version] a { color: var(--bw-link); text-decoration: none; } :root[data-theme-version] a:hover { color: var(--bw-primary-hover); } :root[data-theme-version] h1, :root[data-theme-version] h2, :root[data-theme-version] h3, :root[data-theme-version] h4 { color: var(--bw-text-strong); font-weight: 600; letter-spacing: -.01em; } :root[data-theme-version] ::placeholder { color: var(--bw-placeholder); opacity: 1; } :root[data-theme-version] ::selection { background-color: var(--bw-primary-soft); color: var(--bw-text-strong); } /* Scrollbars are part of a dense enterprise UI's texture; the stock chunky grey ones read as "unstyled admin template" more than almost anything else. */ /* ⚠ THE TWO SCROLLBAR SYSTEMS ARE MUTUALLY EXCLUSIVE — do not set both. Specifying `scrollbar-width` or `scrollbar-color` makes Chromium ignore every ::-webkit-scrollbar rule on the page. So having both meant the custom bar below was never actually used in Chrome: what rendered was the platform scrollbar, complete with the stepper arrow buttons that the standard properties give no way to remove. It looked deliberate enough to miss, because `scrollbar-color` still tinted it. The feature query splits them cleanly — Chromium supports the legacy pseudo-elements and takes the branch below; Firefox does not, and gets the standard properties. */ @supports not selector(::-webkit-scrollbar) { :root[data-theme-version] * { scrollbar-color: var(--bw-border-strong) transparent; scrollbar-width: thin; } } :root[data-theme-version] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-theme-version] ::-webkit-scrollbar-track { background: transparent; } :root[data-theme-version] ::-webkit-scrollbar-button { display: none; } :root[data-theme-version] ::-webkit-scrollbar-corner { background: transparent; } :root[data-theme-version] ::-webkit-scrollbar-thumb { background-color: var(--bw-border-strong); border: 3px solid transparent; background-clip: content-box; border-radius: 99px; } :root[data-theme-version] ::-webkit-scrollbar-thumb:hover { background-color: var(--bw-faint); } /* Figures read as data, not prose, in both designs. */ :root[data-theme-version] .m-mono, :root[data-theme-version] .slick-cell.align-right, :root[data-theme-version] .m-num { font-family: var(--bw-font-mono); font-variant-numeric: tabular-nums; } /* ---- shared micro-typography ---- */ :root[data-theme-version] .m-eyebrow { color: var(--bw-eyebrow-color); font-size: var(--bw-eyebrow-size); font-weight: var(--bw-eyebrow-weight); letter-spacing: var(--bw-eyebrow-spacing); text-transform: var(--bw-eyebrow-transform); } :root[data-theme-version] .m-kbd { background-color: var(--bw-surface); border: 1px solid var(--bw-border-field); border-radius: var(--bw-radius-sm); color: var(--bw-faint); font-family: var(--bw-font-mono); font-size: var(--bw-text-xs); line-height: 1.4; padding: 1px 5px; } /* ---- chrome: sidebar ---- */ :root[data-theme-version] .s-sidebar, :root[data-theme-version] .s-sidebar-pane { background-color: var(--bw-chrome); border: 0; color: var(--bw-chrome-text); } :root[data-theme-version] .s-sidebar-pane { overflow-x: hidden; overflow-y: auto; padding-bottom: var(--bw-gap); } /* The brand lockup at the top of the pane (Views/Shared/_Sidebar.cshtml). Both designs put identity in the sidebar, not the top bar — the top bar belongs to the page you are on. */ :root[data-theme-version] .m-brand { align-items: center; color: var(--bw-chrome-text); display: flex; flex-shrink: 0; gap: 11px; height: var(--bw-topbar-h); overflow: hidden; padding: 0 12px; white-space: nowrap; } :root[data-theme-version] .m-brand:hover { color: var(--bw-chrome-text); } /* ---- the brand mark as an image ---- ⚠ The coloured tile has to GO when an image is used. The tile exists to give a two-letter monogram a background; behind the four-colour hexagon it would frame the logo in an unrelated orange (v1) or green (v2) square. The classes are additive (.m-brand-mark-img on top of .m-brand-mark) so the monogram treatment survives untouched for anything still using it. */ :root[data-theme-version] .m-brand-mark.m-brand-mark-img, :root[data-theme-version] .m-auth-mark.m-auth-mark-img { /* ⚠ COMPOUND selector — both classes on the one element — so this is (0,4,0) and beats the base .m-brand-mark rule at (0,3,0) whatever the order. Written as two separate class selectors first it TIED at (0,3,0) and lost on source order, because this block sits above the base rule: the logo rendered inside the orange tile it was meant to replace. */ background-color: transparent; border-radius: 0; overflow: visible; padding: 0; } :root[data-theme-version] .m-brand-mark.m-brand-mark-img img, :root[data-theme-version] .m-auth-mark.m-auth-mark-img img { display: block; height: 100%; object-fit: contain; width: 100%; } :root[data-theme-version] .m-brand-mark { align-items: center; background-color: var(--bw-auth-mark-bg); border-radius: var(--bw-auth-mark-radius); color: var(--bw-auth-mark-fg); display: flex; flex: 0 0 auto; font-family: var(--bw-font-mono); font-size: 13px; font-weight: 500; height: 32px; justify-content: center; width: 32px; } :root[data-theme-version] .m-brand-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; } :root[data-theme-version] .m-brand-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; } :root[data-theme-version] .m-brand-tag { color: var(--bw-nav-group); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; } :root[data-theme-version] .s-sidebar-menu { padding: 4px 9px; } :root[data-theme-version] .s-sidebar-link { align-items: center; border-radius: var(--bw-radius-sm); color: var(--bw-chrome-muted); display: flex; font-size: var(--bw-text-sm); font-weight: 400; gap: 10px; margin: 2px 0; min-height: var(--bw-nav-item-h); padding: 0 10px; white-space: nowrap; } :root[data-theme-version] .s-sidebar-link:hover { background-color: var(--bw-chrome-hover); color: var(--bw-chrome-text); } :root[data-theme-version] .s-sidebar-link:hover .s-sidebar-icon { color: inherit; } :root[data-theme-version] .s-sidebar-item.active > .s-sidebar-link, :root[data-theme-version] .s-sidebar-pane .active > .s-sidebar-link { background-color: var(--bw-nav-active-bg); color: var(--bw-nav-active-fg); font-weight: 600; } :root[data-theme-version] .active > .s-sidebar-link > .s-sidebar-icon { color: inherit; } :root[data-theme-version] .s-sidebar-icon { color: inherit; flex: 0 0 18px; /* fixed basis keeps icons on one axis whether or not a label follows them */ font-size: 15px; margin: 0; text-align: center; } :root[data-theme-version] .s-sidebar-menu-toggle { color: var(--bw-nav-count); font-size: 11px; } :root[data-theme-version] .s-sidebar-menu .s-sidebar-menu { margin-left: 0; padding: 0 0 0 14px; } :root[data-theme-version] .s-sidebar-menu .s-sidebar-menu .s-sidebar-link { font-size: var(--bw-text-xs); min-height: 30px; } :root[data-theme-version] .s-sidebar-group, :root[data-theme-version] .s-sidebar-section { color: var(--bw-nav-group); font-size: 10px; font-weight: 500; letter-spacing: .13em; padding: 12px 10px 4px; text-transform: uppercase; } /* ---- chrome: top bar ---- Both designs specify a WHITE top bar sitting beside the dark nav, carrying the page you are on plus global actions. Serenity ships it as a full-width blue navbar with a 48px !important height, so both have to be overridden. */ :root[data-theme-version] .s-sidebar-header { align-items: center; background-color: var(--bw-topbar-bg); border: 0; border-bottom: 1px solid var(--bw-topbar-border); color: var(--bw-text); gap: var(--bw-gap); height: var(--bw-topbar-h) !important; min-height: var(--bw-topbar-h); padding: 0 var(--bw-pad-lg); } :root[data-theme-version] .s-sidebar-toggler { color: var(--bw-muted); font-size: 20px; line-height: 1; } :root[data-theme-version] .m-topbar-heading { align-items: center; display: flex; gap: 7px; font-size: var(--bw-text-base); min-width: 0; } :root[data-theme-version] .m-topbar-crumb { color: var(--bw-muted); white-space: nowrap; } /* The breadcrumb chevron is decorative, so it is exempt from the text contrast rules — but at --bw-border-strong it measured 1.57:1 and read as barely there. --bw-disabled is close to the #AAB4C4 the handoff draws it in. */ :root[data-theme-version] .m-topbar-sep { color: var(--bw-disabled); font-size: 11px; } :root[data-theme-version] .m-topbar-page { color: var(--bw-text-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root[data-theme-version] .m-topbar-rule { background-color: var(--bw-topbar-border); flex: 0 0 1px; height: 20px; } :root[data-theme-version] .m-topbar-spacer { flex: 1 1 auto; } /* The nav search moves into the top bar, where both designs draw it. It keeps its Serenity id and classes, so the menu-filtering script in common-theme.js — which binds by class and filters by document query — is untouched. */ :root[data-theme-version] .s-sidebar-search { align-items: center; background-color: var(--bw-field); border: 1px solid var(--bw-border-field); border-radius: var(--bw-radius); display: flex; flex: 1 1 auto; gap: 8px; height: var(--bw-control-h); margin: 0 !important; max-width: 420px; padding: 0 10px; position: relative; } :root[data-theme-version] .s-sidebar-search:focus-within { background-color: var(--bw-surface); border-color: var(--bw-primary); } :root[data-theme-version] .s-sidebar-search-icon { color: var(--bw-faint); font-size: 13px; position: static; } :root[data-theme-version] .s-sidebar-search-input { background: none; border: 0; color: var(--bw-text); flex: 1 1 auto; font-size: var(--bw-text-base); line-height: 1.4; min-width: 0; padding: 0; } :root[data-theme-version] .s-sidebar-search-input:focus { box-shadow: none; outline: 0; } /* The V1 | V2 design-generation switch was styled here (.m-theme-switch / .m-theme-btn). Removed 2026-08-18 with the control itself — the generation is now set only by AppSettings:ThemeVersion. Not to be confused with .m-profile-theme, the Light/Dark/Auto segmented control in the profile menu, which is a different axis and is still here. */ :root[data-theme-version] .s-sidebar-header-actions { align-items: center; gap: 8px; } :root[data-theme-version] .s-sidebar-header-link { align-items: center; border: 1px solid var(--bw-border); border-radius: var(--bw-radius); color: var(--bw-muted); display: flex; font-size: 15px; gap: 8px; height: var(--bw-control-h); margin: 0; padding: 0 10px; } :root[data-theme-version] .s-sidebar-header-link:hover { background-color: var(--bw-hover-bg); border-color: var(--bw-border-strong); color: var(--bw-text-strong); } /* ---- the profile card ---- Replaces Serene's stock dropdown (a generic fa-user glyph over the username and two plain rows). One markup in _Sidebar.cshtml; each generation styles it its own way — v1 puts a navy identity band with the orange accent hairline over a dense fact list, v2 a soft green band with a pill avatar and roomier rows. ⚠ Bootstrap positions `.dropdown-menu` and toggles `.show` on it, so this must not be given `display` or `position` of its own — overriding either stops the menu opening, or detaches it from the chip it belongs to. Only the inside is styled. */ :root[data-theme-version] .s-user-profile-menu.m-profile { border: 1px solid var(--bw-border); border-radius: var(--bw-radius-lg); box-shadow: var(--bw-shadow-lg); min-width: 268px; overflow: hidden; padding: 0; } :root[data-theme-version] .m-profile-head { align-items: center; display: flex; gap: 10px; padding: 14px var(--bw-pad); } :root[data-theme-version] .m-profile-avatar { align-items: center; background-color: var(--bw-primary); border-radius: var(--bw-avatar-radius); color: var(--bw-on-primary); display: flex; flex: none; font-size: 15px; font-weight: 600; height: 42px; justify-content: center; letter-spacing: .02em; width: 42px; } :root[data-theme-version] .m-profile-id { display: flex; flex-direction: column; min-width: 0; } :root[data-theme-version] .m-profile-name { color: var(--bw-text-strong); font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root[data-theme-version] .m-profile-sub { color: var(--bw-faint); font-size: var(--bw-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Facts read as data — same treatment as the dashboard's installation panel. */ :root[data-theme-version] .m-profile-facts { border-top: 1px solid var(--bw-border); display: flex; flex-direction: column; gap: 6px; padding: 10px var(--bw-pad); } :root[data-theme-version] .m-profile-fact { display: flex; gap: 10px; justify-content: space-between; } :root[data-theme-version] .m-profile-fact-key { color: var(--bw-muted); font-size: var(--bw-text-sm); } :root[data-theme-version] .m-profile-fact-val { color: var(--bw-text); font-family: var(--bw-font-mono); font-size: var(--bw-text-sm); } /* ---- the Theme control inside the profile card ---- The prototype's layout: an uppercase eyebrow, a three-segment control whose active segment is filled with the primary, and a hint line under it. The segments are joined into one box (hairlines between, radius on the outer corners only) so they read as one choice rather than three buttons. */ :root[data-theme-version] .m-profile-theme { border-top: 1px solid var(--bw-border); display: flex; flex-direction: column; gap: 7px; padding: 11px var(--bw-pad); } :root[data-theme-version] .m-profile-theme-label { color: var(--bw-eyebrow-color); font-size: var(--bw-eyebrow-size); font-weight: var(--bw-eyebrow-weight); letter-spacing: var(--bw-eyebrow-spacing); text-transform: var(--bw-eyebrow-transform); } :root[data-theme-version] .m-mode-switch { border: 1px solid var(--bw-border-strong); border-radius: var(--bw-radius); display: flex; overflow: hidden; } :root[data-theme-version] .m-mode-btn { align-items: center; background: none; border: 0; border-right: 1px solid var(--bw-border-strong); color: var(--bw-text); cursor: pointer; display: flex; flex: 1 1 0; font-family: var(--bw-font); font-size: var(--bw-text-sm); gap: 6px; justify-content: center; min-height: 30px; padding: 0 6px; } :root[data-theme-version] .m-mode-btn:last-child { border-right: 0; } :root[data-theme-version] .m-mode-btn:hover { background-color: var(--bw-hover-bg); } :root[data-theme-version] .m-mode-btn > i { font-size: 13px; } :root[data-theme-version] .m-mode-btn.is-on { background-color: var(--bw-primary); color: var(--bw-on-primary); font-weight: 600; } :root[data-theme-version] .m-mode-btn.is-on:hover { background-color: var(--bw-primary-hover); } :root[data-theme-version] .m-profile-theme-hint { color: var(--bw-faint); font-size: var(--bw-text-xs); line-height: 1.4; } :root[data-theme-version] .m-profile-actions { border-top: 1px solid var(--bw-border); display: flex; flex-direction: column; padding: 6px; } :root[data-theme-version] .m-profile-action { align-items: center; border-radius: var(--bw-radius-sm); color: var(--bw-text); display: flex; font-size: var(--bw-text-base); gap: 10px; padding: 8px 10px; text-decoration: none; } :root[data-theme-version] .m-profile-action i { color: var(--bw-faint); width: 15px; } :root[data-theme-version] .m-profile-action:hover { background-color: var(--bw-hover-bg); color: var(--bw-link); text-decoration: none; } :root[data-theme-version] .m-profile-action:hover i { color: var(--bw-link); } :root[data-theme-version] .m-profile-action.is-signout:hover { background-color: var(--bw-danger-bg); color: var(--bw-danger); } :root[data-theme-version] .m-profile-action.is-signout:hover i { color: var(--bw-danger); } /* v1 — the identity band is chrome-dark, with the orange accent as a hairline. That is the one thing v1 uses accent for: marking, never filling. */ :root[data-theme-version="v1"] .m-profile-head { background-color: var(--bw-chrome); border-bottom: 2px solid var(--bw-accent); } :root[data-theme-version="v1"] .m-profile-name { color: var(--bw-chrome-text); } :root[data-theme-version="v1"] .m-profile-sub { color: var(--bw-chrome-muted); } :root[data-theme-version="v1"] .m-profile-avatar { background-color: var(--bw-accent); color: var(--bw-chrome); } /* v2 — a soft tinted band instead of a dark one, matching its lighter chrome. */ :root[data-theme-version="v2"] .m-profile-head { background-color: var(--bw-primary-soft); border-bottom: 1px solid var(--bw-primary-soft-line); } /* The user chip: avatar plus name, as both designs draw it. */ :root[data-theme-version] .s-user-profile-link { border-radius: var(--bw-pill); padding-left: 3px; } :root[data-theme-version] .m-user-avatar { align-items: center; background-color: var(--bw-primary); border-radius: 50%; color: var(--bw-on-primary); display: flex; flex: 0 0 auto; font-size: 11px; font-weight: 600; height: 26px; justify-content: center; width: 26px; } :root[data-theme-version] .m-user-name { font-size: var(--bw-text-sm); font-weight: 500; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root[data-theme-version] .s-user-card { border-color: var(--bw-border) !important; } :root[data-theme-version] .s-user-avatar { color: var(--bw-link); } /* ---- page frame ---- */ :root[data-theme-version] section.content { padding: var(--bw-pad-lg); } :root[data-theme-version] section.content-header { padding-bottom: var(--bw-gap); } :root[data-theme-version] section.content-header > h1, :root[data-theme-version] .page-title { font-size: var(--bw-h1-size); font-weight: 600; letter-spacing: -.02em; margin: 0; } :root[data-theme-version] .grid-title, :root[data-theme-version] .panel-titlebar { color: var(--bw-text-strong); font-family: var(--bw-font); font-size: var(--bw-h1-size); font-weight: 600; letter-spacing: -.02em; margin-bottom: var(--bw-gap); } /* ---- cards / panels ---- */ :root[data-theme-version] .card, :root[data-theme-version] .s-Panel { background-color: var(--bw-surface); border: 1px solid var(--bw-border); border-radius: var(--bw-radius-xl); box-shadow: var(--bw-shadow); padding: 0; } :root[data-theme-version] .card-header { background-color: transparent; border-bottom: 1px solid var(--bw-rule); color: var(--bw-text-strong); font-size: var(--bw-h2-size); font-weight: 600; padding: 15px var(--bw-pad); } :root[data-theme-version] .card-body { padding: var(--bw-pad); } :root[data-theme-version] .card-footer { background-color: var(--bw-field); border-top: 1px solid var(--bw-rule); padding: 11px var(--bw-pad); } /* ---- buttons ---- One shape for every button in the app; only the fill changes. Both designs use a flat button with no gradient and no text shadow, so the Bootstrap defaults have to be flattened rather than recoloured. */ :root[data-theme-version] .btn { --bs-btn-focus-box-shadow: none; border-radius: var(--bw-radius); border-width: 1px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: var(--bw-text-base); font-weight: 500; line-height: 1; min-height: var(--bw-btn-h); padding: 0 13px; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } :root[data-theme-version] .btn:focus, :root[data-theme-version] .btn:focus-visible { box-shadow: var(--bw-focus-ring); outline: 0; } :root[data-theme-version] .btn-sm { font-size: var(--bw-text-sm); min-height: var(--bw-control-h-sm); padding: 0 10px; } :root[data-theme-version] .btn-lg { font-size: 14px; min-height: 44px; padding: 0 18px; } :root[data-theme-version] .btn-primary { background-color: var(--bw-primary); border-color: var(--bw-primary); color: var(--bw-on-primary); font-weight: 600; } :root[data-theme-version] .btn-primary:hover, :root[data-theme-version] .btn-primary:focus { background-color: var(--bw-primary-hover); border-color: var(--bw-primary-hover); color: var(--bw-on-primary); } :root[data-theme-version] .btn-primary:active, :root[data-theme-version] .btn-primary.active { background-color: var(--bw-primary-active) !important; border-color: var(--bw-primary-active) !important; color: var(--bw-on-primary) !important; } :root[data-theme-version] .btn-secondary, :root[data-theme-version] .btn-default, :root[data-theme-version] .btn-light, :root[data-theme-version] .btn-outline-secondary { background-color: var(--bw-surface); border-color: var(--bw-border-strong); color: var(--bw-muted); } :root[data-theme-version] .btn-secondary:hover, :root[data-theme-version] .btn-default:hover, :root[data-theme-version] .btn-light:hover, :root[data-theme-version] .btn-outline-secondary:hover { background-color: var(--bw-hover-bg); border-color: var(--bw-border-strong); color: var(--bw-text-strong); } :root[data-theme-version] .btn-outline-primary { background-color: var(--bw-surface); border-color: var(--bw-primary); color: var(--bw-link); font-weight: 600; } :root[data-theme-version] .btn-outline-primary:hover { background-color: var(--bw-primary-soft); border-color: var(--bw-primary); color: var(--bw-link); } :root[data-theme-version] .btn-danger { background-color: var(--bw-danger); border-color: var(--bw-danger); color: var(--bw-on-primary); } :root[data-theme-version] .btn-danger:hover { background-color: var(--bw-danger-ink); border-color: var(--bw-danger-ink); } :root[data-theme-version] .btn-success { background-color: var(--bw-success); border-color: var(--bw-success); } :root[data-theme-version] .btn-warning { background-color: var(--bw-warning); border-color: var(--bw-warning); color: var(--bw-on-primary); } :root[data-theme-version] .btn-info { background-color: var(--bw-info); border-color: var(--bw-info); color: var(--bw-on-primary); } :root[data-theme-version] .btn-link { color: var(--bw-link); font-weight: 500; text-decoration: none; } /* ---- outline variants ---- ⚠ Bootstrap compiles LITERAL hex values into each variant's own `--bs-btn-*` custom properties, so the `--bs-danger` / `--bs-success` bridge in section 4 never reaches them. Any variant the app can render therefore has to be pointed at the tokens by hand, or stock Bootstrap colours surface — the column picker's "Restore Defaults" button was rendering #DC3545 against a theme whose danger is #C0392B. Setting the custom properties rather than `color`/`border-color` means hover and active follow too. */ :root[data-theme-version] .btn-outline-danger { --bs-btn-color: var(--bw-danger); --bs-btn-border-color: var(--bw-danger); --bs-btn-hover-color: var(--bw-on-primary); --bs-btn-hover-bg: var(--bw-danger); --bs-btn-hover-border-color: var(--bw-danger); --bs-btn-active-color: var(--bw-on-primary); --bs-btn-active-bg: var(--bw-danger-ink); --bs-btn-active-border-color: var(--bw-danger-ink); } :root[data-theme-version] .btn-outline-success { --bs-btn-color: var(--bw-success); --bs-btn-border-color: var(--bw-success); --bs-btn-hover-color: var(--bw-on-primary); --bs-btn-hover-bg: var(--bw-success); --bs-btn-hover-border-color: var(--bw-success); } :root[data-theme-version] .btn-outline-warning { --bs-btn-color: var(--bw-warning); --bs-btn-border-color: var(--bw-warning); --bs-btn-hover-color: var(--bw-on-primary); --bs-btn-hover-bg: var(--bw-warning); --bs-btn-hover-border-color: var(--bw-warning); } :root[data-theme-version] .btn-outline-info, :root[data-theme-version] .btn-outline-dark { --bs-btn-color: var(--bw-text-strong); --bs-btn-border-color: var(--bw-border-strong); --bs-btn-hover-color: var(--bw-text-strong); --bs-btn-hover-bg: var(--bw-hover-bg); --bs-btn-hover-border-color: var(--bw-border-strong); } /* ---- form controls ---- */ /* ⚠ The `[class*="Editor"]` selectors are not belt-and-braces. Serenity marks editors inside a property grid with `.editor`, but editors created anywhere ELSE — quick filters above all — carry only their type class (`s-StringEditor`, `s-SelectEditor`). Without these, a quick filter input inherits nothing from this file and renders as a bare 20px-tall browser input next to a 36px select2, which is exactly how the filter panel looked wrong. Both select2 helper inputs must be excluded: `.select2-offscreen` is a hidden 1px field and `.select2-input` is its internal search box, and styling either breaks the control. */ :root[data-theme-version] .form-control, :root[data-theme-version] .form-select, /* ⚠ Checkboxes and radios must be excluded. They are `input.editor` too, so without this they were handed the whole text-field treatment — border, padding, background and `min-height: var(--bw-control-h)`. The min-height in particular stretched a checkbox to 36px, which is why it would not line up with the text input beside it however its own height was set: `min-height` always wins over `height`. */ :root[data-theme-version] input.editor:not([type="checkbox"]):not([type="radio"]), :root[data-theme-version] select.editor, :root[data-theme-version] textarea.editor, :root[data-theme-version] input[class*="Editor"]:not(.select2-offscreen):not(.select2-input):not([type="checkbox"]):not([type="radio"]), :root[data-theme-version] select[class*="Editor"], :root[data-theme-version] textarea[class*="Editor"], :root[data-theme-version] .field input[type="text"], :root[data-theme-version] .field input[type="email"], :root[data-theme-version] .field input[type="password"], :root[data-theme-version] .field input[type="number"], :root[data-theme-version] .field input[type="date"] { background-color: var(--bw-input-bg); border: 1px solid var(--bw-border-field); border-radius: var(--bw-radius-sm); box-shadow: none; color: var(--bw-text); font-family: var(--bw-font); font-size: var(--bw-text-base); line-height: 1.4; min-height: var(--bw-control-h); padding: 0 10px; } :root[data-theme-version] textarea.editor, :root[data-theme-version] textarea.form-control { padding: 8px 10px; } /* Focus is a border colour change plus a soft ring — both designs are flat, so the Bootstrap glow is replaced rather than recoloured. */ :root[data-theme-version] .form-control:focus, :root[data-theme-version] .form-select:focus, :root[data-theme-version] input.editor:not([type="checkbox"]):not([type="radio"]):focus, :root[data-theme-version] select.editor:focus, :root[data-theme-version] textarea.editor:focus, :root[data-theme-version] input[class*="Editor"]:not(.select2-offscreen):not(.select2-input):not([type="checkbox"]):not([type="radio"]):focus, :root[data-theme-version] select[class*="Editor"]:focus, :root[data-theme-version] textarea[class*="Editor"]:focus, :root[data-theme-version] input:focus-visible, :root[data-theme-version] select:focus-visible, :root[data-theme-version] textarea:focus-visible { background-color: var(--bw-surface); border-color: var(--bw-primary); box-shadow: var(--bw-focus-ring); outline: 0; } :root[data-theme-version] input.error, :root[data-theme-version] select.error, :root[data-theme-version] textarea.error, :root[data-theme-version] .error .select2-choice { border-color: var(--bw-danger); } :root[data-theme-version] input.error:focus, :root[data-theme-version] select.error:focus, :root[data-theme-version] textarea.error:focus { box-shadow: var(--bw-focus-ring-error); } /* ⚠ A read-only field must LOOK read-only, and this rule silently did nothing. Two specificity facts, both counter-intuitive, and it took mirroring the base rule exactly to beat it: 1. `:not()` contributes the specificity of its most specific ARGUMENT. So the base control rule's `input[class*="Editor"]:not(.select2-offscreen):not(.select2-input) :not([type="checkbox"]):not([type="radio"])` is **(0,7,1)** — :root, the version attribute, the class-substring match and FOUR :not()s, not the (0,2,1) it reads as. 2. In a selector LIST each selector carries its own specificity, and a Serenity editor matches the `[class*="Editor"]` branch through `s-StringEditor` — so that is the branch that wins, not the `.editor` one. `.editor.readonly` (0,4,0), `.field input[readonly]` (0,4,1) and even `.field input.editor[readonly]:not(...)` (0,6,1) all lost at any position in the file. The symptom: a field with the editable background, the editable border and a caret — click it, type, and nothing happens. Found on the Features dialog's Key field; the navigation forms' Path field had it too. Adding `.readonly` to the base rule's own branch puts this at (0,8,1), which wins outright rather than by source order. */ :root[data-theme-version] input.readonly[class*="Editor"]:not(.select2-offscreen):not(.select2-input):not([type="checkbox"]):not([type="radio"]), :root[data-theme-version] textarea.readonly[class*="Editor"], :root[data-theme-version] input.editor.readonly:not([type="checkbox"]):not([type="radio"]), :root[data-theme-version] textarea.editor.readonly, :root[data-theme-version] .field input.readonly, :root[data-theme-version] .field textarea.readonly { background-color: var(--bw-readonly-bg); border-color: var(--bw-border); color: var(--bw-muted); cursor: default; } /* No focus ring either — a ring says "type here". */ :root[data-theme-version] input.readonly[class*="Editor"]:not(.select2-offscreen):not(.select2-input):not([type="checkbox"]):not([type="radio"]):focus, :root[data-theme-version] textarea.readonly[class*="Editor"]:focus { border-color: var(--bw-border); box-shadow: none; } :root[data-theme-version] input[type="checkbox"], :root[data-theme-version] input[type="radio"] { accent-color: var(--bw-primary); border-color: var(--bw-border-field); } :root[data-theme-version] .form-check-input:checked { background-color: var(--bw-primary); border-color: var(--bw-primary); } /* Labels are sentence case in BOTH designs (v1 login and v1 create dialog both draw them that way). Uppercase is reserved for column heads and eyebrows. */ :root[data-theme-version] label, :root[data-theme-version] .caption, :root[data-theme-version] .quick-filter-label { color: var(--bw-label-color); font-size: var(--bw-label-size); font-weight: var(--bw-label-weight); letter-spacing: var(--bw-label-spacing); text-transform: none; } :root[data-theme-version] .caption sup { color: var(--bw-danger); } /* ---- field validation ---- ⚠ ROW ALIGNMENT. A `.field` is a wrapping flex container, and `align-content` defaults to `stretch`, so its free space is shared out between the wrapped lines. The moment one field in a row gains a validation message it has less free space than its neighbours — and its input lifts ~16px while theirs stay put, breaking the row. Packing the lines to the top makes a field's input sit under its label at the same height whether or not an error is showing. ⚠ MESSAGE TEXT. Serenity collapses the message into an 18x18 `overflow: hidden` box and leaves the sentence only in the `title` — so the error reads as a bare red dot and the reason is a tooltip away. Both handoffs print it as red text beneath the field, which is also the only version a keyboard or screen-reader user gets without hovering. */ :root[data-theme-version] .field { align-content: flex-start; } :root[data-theme-version] .field > .vx { flex: 0 0 100%; height: auto; overflow: visible; width: 100%; } :root[data-theme-version] .field > .vx > label.error { color: var(--bw-danger-ink); display: block; font-size: var(--bw-text-xs); font-weight: 400; height: auto; line-height: 1.4; overflow: visible; padding-top: 4px; text-transform: none; white-space: normal; width: auto; } /* The glyph Serenity puts in front of the collapsed marker is redundant once the sentence itself is visible, and neither handoff draws one per field. */ :root[data-theme-version] .field > .vx > label.error::before { content: none; } /* The errored control itself, per the handoff: danger border plus a soft danger ring. ⚠ The `[class*="Editor"]:not(…):not(…)` chain is not decoration — the base control rule above is (0,5,1), so a plain `input.error` at (0,4,1) loses to it and the errored field kept its ordinary grey border. Matching the same pattern and adding `:not(.select2-input)` puts this at (0,6,1), which wins outright rather than by source order. */ :root[data-theme-version] .field input.error[class*="Editor"]:not(.select2-input), :root[data-theme-version] .field select.error[class*="Editor"]:not(.select2-input), :root[data-theme-version] .field textarea.error[class*="Editor"]:not(.select2-input), :root[data-theme-version] .field .select2-container.error { border-color: var(--bw-danger); } :root[data-theme-version] .field input.error[class*="Editor"]:not(.select2-input):focus, :root[data-theme-version] .field select.error[class*="Editor"]:not(.select2-input):focus, :root[data-theme-version] .field textarea.error[class*="Editor"]:not(.select2-input):focus { border-color: var(--bw-danger); box-shadow: var(--bw-focus-ring-error); } /* ---- property grid: fields and categories ---- */ :root[data-theme-version] .field { padding: 7px 8px; } :root[data-theme-version] .field .caption { line-height: var(--bw-control-h); margin-right: var(--bw-gap); } :root[data-theme-version] .s-vertical-form .field .caption { line-height: 1.4; padding-bottom: 5px; } :root[data-theme-version] .category-title { color: var(--bw-eyebrow-color); font-size: var(--bw-eyebrow-size); font-weight: var(--bw-eyebrow-weight); letter-spacing: var(--bw-eyebrow-spacing); padding: 0 0 0 8px; text-transform: var(--bw-eyebrow-transform); } :root[data-theme-version] .category-title a { color: inherit; font-weight: inherit; } /* The section rule beside the heading is in both docs; Serenity draws it dashed and grey, both designs draw it solid and faint. */ :root[data-theme-version] .category-title::before { border-bottom: 0; margin-right: 0; width: 0; } :root[data-theme-version] .category-title::after { border-bottom: 1px solid var(--bw-rule); margin-left: 10px; } :root[data-theme-version] .categories > .category:not(:first-child) { margin-top: var(--bw-pad-lg); } /* ---- select2 (lookup editors, quick filters, dropdowns) ---- */ /* ⚠ min-height, NOT height. Pinning the container to the control height while its inner .select2-choices computed to 34px let the child overflow the rounded border by a couple of pixels — which, once the focus ring was drawn around the parent, read as two mismatched boxes stacked on each other rather than one focused field. A multi select also has to be free to grow as chosen values wrap onto a second line. */ :root[data-theme-version] .select2-container { background-color: var(--bw-input-bg); border: 1px solid var(--bw-border-field); border-radius: var(--bw-radius-sm); min-height: var(--bw-control-h); position: relative; } :root[data-theme-version] .select2-container.select2-container-active, :root[data-theme-version] .select2-container.select2-dropdown-open { border-color: var(--bw-primary); box-shadow: var(--bw-focus-ring); } /* Single-value control keeps a fixed height; the multi-value list grows. Both leave a gutter on the right for the chevron. */ :root[data-theme-version] .select2-choice { background-color: transparent; border: 0; color: var(--bw-text); font-size: var(--bw-text-base); height: calc(var(--bw-control-h) - 2px); line-height: calc(var(--bw-control-h) - 2px); padding: 0 26px 0 10px; } :root[data-theme-version] .select2-choices { align-items: center; background-color: transparent; border: 0; color: var(--bw-text); display: flex; flex-wrap: wrap; font-size: var(--bw-text-base); gap: 4px; height: auto; min-height: calc(var(--bw-control-h) - 2px); padding: 2px 26px 2px 8px; } /* select2's own search input sits inside the control and must be invisible as a field — any border, ring or fill of its own is a second box inside the first. */ :root[data-theme-version] .select2-container .select2-search-field, :root[data-theme-version] .select2-container input.select2-input { background: transparent; border: 0; box-shadow: none; margin: 0; min-height: 0; outline: 0; padding: 0; } /* ---- the dropdown affordance ---- ⚠ select2 renders `.select2-arrow` for SINGLE-value controls only. A multi-value lookup — which is what most quick filters are — gets no indicator at all, so it reads as a plain empty text box with no sign it opens a list. This draws the same chevron on the container itself, and flips it to the primary colour while open so the control says what it is doing. */ :root[data-theme-version] .select2-arrow { border-left: 0; color: var(--bw-muted); width: 26px; } :root[data-theme-version] .select2-container-multi::after { color: var(--bw-muted); content: "\f107"; font-family: var(--s-icon-font); font-weight: var(--s-icon-solid); font-size: 13px; line-height: 1; pointer-events: none; /* the chevron must not eat the click */ position: absolute; right: 9px; top: 50%; transform: translateY(-50%); } :root[data-theme-version] .select2-container-multi.select2-dropdown-open::after { content: "\f106"; } :root[data-theme-version] .select2-dropdown-open .select2-arrow, :root[data-theme-version] .select2-container-multi.select2-dropdown-open::after { color: var(--bw-link); } :root[data-theme-version] .select2-drop { background-color: var(--bw-surface); border: 1px solid var(--bw-border); border-radius: var(--bw-radius); box-shadow: var(--bw-shadow-lg); color: var(--bw-text); margin-top: 4px; overflow: hidden; padding: 4px; } :root[data-theme-version] .select2-drop.select2-drop-above { margin-top: -4px; } :root[data-theme-version] .select2-results { font-size: var(--bw-text-base); padding: 0; } :root[data-theme-version] .select2-results .select2-result-label { border-radius: var(--bw-radius-sm); padding: 7px 9px; } :root[data-theme-version] .select2-results .select2-highlighted { background-color: var(--bw-primary-soft); color: var(--bw-text-strong); } :root[data-theme-version] .select2-results .select2-highlighted .select2-result-label { background: none; } :root[data-theme-version] .select2-search input { background-color: var(--bw-field); border: 1px solid var(--bw-border-field); border-radius: var(--bw-radius-sm); color: var(--bw-text); min-height: var(--bw-control-h-sm); padding: 0 8px; } /* A chosen value in a multi-value lookup ("Roles" on the user dialog). This rule used to set only colour, radius and font size and let common-theme.css supply the LAYOUT — which meant it inherited `display: list-item` and, once the --s-input-padding-v calc above died, `padding: 0`. The chip then shrank to roughly the width of its own text while the pill radius kept rounding it, so a selected value read as a small round blob sitting behind the word rather than a chip around it, with the ✕ printed on top of the first letter. Layout is declared here now so the chip does not depend on a framework value that can silently evaluate to nothing. */ :root[data-theme-version] .select2-search-choice { align-items: center; background-color: var(--bw-primary-soft); border: 1px solid var(--bw-border); border-radius: var(--bw-chip); color: var(--bw-text-strong); display: inline-flex; font-size: var(--bw-text-sm); line-height: 1; /* .select2-choices already spaces its children with gap: 4px; common-theme's `margin: 2px 0 2px 5px` would add a second, uneven gap on top of it. */ margin: 0; max-width: 100%; min-height: calc(var(--bw-control-h) - 12px); /* right gutter is the ✕'s hit area — see the close rule below */ padding: 0 20px 0 9px; position: relative; } /* select2 wraps the label in a bare

, so a long role name would otherwise push the ✕ out of the chip instead of truncating. */ :root[data-theme-version] .select2-search-choice > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ⚠ Stock select2 pins the ✕ on the LEFT (`.select2-choices .select2-search-choice-close { left: 3px }`) and reserves room for it with the chip's 18px left padding. Every other removable chip in BWDesignSystem — the filter chips on the list page — puts the ✕ on the right, so it is moved to match. `left` must be reset to auto explicitly: with left, right and width all set the declaration is over-constrained and LTR keeps `left`, so setting `right` alone moves nothing. */ :root[data-theme-version] .select2-search-choice .select2-search-choice-close { align-items: center; color: var(--bw-muted); display: flex; height: 100%; justify-content: center; left: auto; right: 0; top: 0; width: 20px; } :root[data-theme-version] .select2-search-choice .select2-search-choice-close:hover, :root[data-theme-version] .select2-search-choice .select2-search-choice-close:focus-visible { color: var(--bw-danger); } :root[data-theme-version] .select2-no-results, :root[data-theme-version] .select2-searching, :root[data-theme-version] .select2-more-results { color: var(--bw-faint); font-size: var(--bw-text-sm); padding: 8px 9px; } /* ---- date editors: the calendar trigger belongs INSIDE the control ---- ⚠ Serenity appends the picker as a `