/* Bootstrap Icons is loaded from jsDelivr in the layouts, not bundled. The webfont was the one asset that broke on every deployment: it is referenced by url() from inside the compiled CSS, so it 404s the moment the build's base path does not match where the site is served from. From a CDN there is no path to get wrong, and the class names are unchanged — all 484 `bi bi-*` usages across 175 views keep working. */ /* Imported AFTER the vendor sheets, not before them. It used to be the first import, which quietly defeated half of its purpose: its token *definitions* still worked (custom properties resolve where they are used, and the rules below consume them), but every actual rule in it collided with a Bootstrap rule of equal specificity and lost the cascade. That is why `.card` kept Bootstrap's background — the page ground — while the file's own header claimed it loaded last. */ @import "./design-system.css"; /* ========================================================================== Design tokens — CIMS Single source of truth for color / type / space / radius / shadow. Overrides Bootstrap 5.3's CSS custom properties (no Sass build needed) so existing Bootstrap components (btn, badge, alert, form-*, pagination…) pick up the palette automatically. ========================================================================== */ :root { /* Brand / semantic color — "Site & Steel" Deep teal reads as engineered rather than generic-admin-blue, and is the one hue not already spoken for by the semantic set below (success green, warning/accent amber, danger red, info cyan), so a primary button is never mistaken for a status. Amber is the accent because it is civil infrastructure's own vernacular — hi-vis, survey markers, plant. Contrast on white: primary 6.2:1 (AA for body text), accent 3.0:1 (large text / UI only, which is all it is used for). */ /* Enterprise Blue, adopted from the reference system (bnd/design/.../structure_erp/DESIGN.md and the ConstructPro screens). This replaces the "Site & Steel" teal by explicit request on 2026-08-29, reversing the 2026-08-28 decision to keep it. Measured before the swap rather than after, because the previous teal was chosen for its contrast and that protection had to survive: link/text on page ground #f1f4f9 : 6.19:1 (teal was 5.56:1) link/text on card #ffffff : 6.82:1 (teal was 6.13:1) white label on a primary button : 6.82:1 (teal was 6.13:1) Better than the teal on every pair, not merely acceptable. The hover tone is the reference's deeper primary at 8.90:1 on the page ground. */ --cims-color-primary: #0052cc; --cims-color-primary-rgb: 0, 82, 204; --cims-color-primary-dark: #003d9b; --cims-color-primary-light: #3b82f6; /* The text colour painted ON the accent — white or near-black, whichever reads against it. Overridden per installation by partials/branding.blade.php, which picks it from the admin's chosen colour instead of assuming white. Assuming white is what made a pale brand colour unusable: the button rendered, the label did not. These defaults are the values ColourContrastService picks for the shipped palette, so an install that never sets a colour looks exactly as it did. */ --cims-color-primary-ink: #ffffff; --cims-color-primary-dark-ink: #ffffff; /* The light variant is used where a shape has to read against the DARK chrome — the notification count on the navbar. It is pale by design, so its label is near-black, not white. */ --cims-color-primary-light-ink: #111827; --cims-color-secondary: #5a6472; --cims-color-secondary-rgb: 90, 100, 114; --cims-color-secondary-dark: #444c57; --cims-color-secondary-ink: #ffffff; --cims-color-secondary-dark-ink: #ffffff; --cims-color-accent: #e07b18; --cims-color-accent-rgb: 224, 123, 24; /* #166534 not #15803d: the status badge draws this text on a 14% tint of itself over white, where #15803d measured 4.15:1. #166534 gives 5.75:1. These three corrections (success, warning, info) are mirrored by bnd/mobile/lib/design/cims_tokens.dart, which had drifted back to the lighter hues and shipped three badges below 4.5:1. That file is now pinned by its own contrast_test.dart. This block is the source of truth: change it here first, then there. */ --cims-color-success: #166534; --cims-color-success-rgb: 22, 101, 52; /* #9a4404 not #b45309: 4.14:1 -> 5.29:1 on its own badge tint. */ --cims-color-warning: #9a4404; --cims-color-warning-rgb: 154, 68, 4; --cims-color-danger: #b91c1c; --cims-color-danger-rgb: 185, 28, 28; /* #155e75 not #0e7490: 4.41:1 -> 5.85:1 on its own badge tint. */ --cims-color-info: #155e75; --cims-color-info-rgb: 21, 94, 117; /* Neutrals */ --cims-color-bg: #f1f4f9; --cims-color-surface: #ffffff; --cims-color-border: #e1e6ef; --cims-color-text: #131b2e; --cims-color-text-muted: #5b6478; /* Muted text is fine on a plain ground, but a row-action button adds its own 10% self-tint on top of a striped row, and the label landed at 4.43:1 in that state (4.72:1 on a plain row). This is the same hue with enough headroom to clear 4.5:1 whichever row it lands on: 5.96:1 measured. */ --cims-color-text-muted-strong: #4d5566; --cims-color-text-muted-rgb: 91, 100, 120; /* Sidebar (dark surface, kept for wayfinding contrast against light content) */ --cims-sidebar-bg: #0b1220; --cims-sidebar-bg-elevated: #101a2e; --cims-sidebar-bg-active: rgba(255, 255, 255, .07); --cims-sidebar-text: rgba(226, 232, 245, .72); --cims-sidebar-text-active: #ffffff; /* .80, not .55. At 55% alpha over the #0b1220 rail this composited to 3.05:1 — measured in-browser and confirmed by hand from the WCAG luminance formula — and it colours the 16 GROUP HEADER labels ("Project Management", "Cost Estimation", …), which are primary navigation, not decoration. AA wants 4.5:1 for text that size. .72 reaches only 4.37:1; .80 gives 5.12:1. Reported 2026-08-26. */ --cims-sidebar-heading: rgba(148, 163, 195, .8); --cims-sidebar-border: rgba(255, 255, 255, .06); /* Type */ --cims-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --cims-text-xs: .75rem; --cims-text-sm: .8125rem; --cims-text-base: .9375rem; --cims-text-md: 1.125rem; --cims-text-lg: 1.5rem; --cims-text-xl: 1.875rem; /* `label-md` from the reference system: 12px / 600 / .05em. It is the one type role the scale above had no slot for, and it is the role that does the most work in an ERP — it marks every field label, table header and metadata caption as chrome rather than as content, so the user's own data stays the most prominent text on screen. */ --cims-text-label: .75rem; --cims-tracking-label: .05em; /* Spacing (4px rhythm — matches Bootstrap's g- and p- utility scale) */ --cims-space-1: .25rem; --cims-space-2: .5rem; --cims-space-3: 1rem; --cims-space-4: 1.5rem; --cims-space-5: 2rem; --cims-space-6: 3rem; /* Radius / shadow — aligned to the Structure ERP reference system (bnd/design/.../structure_erp/DESIGN.md). 12px is that system's signature radius for "all major containers, cards and input fields"; 4px is reserved for micro-elements (checkboxes, tags) and the pill for status badges. The previous 10px card radius was close enough to read as an accident rather than a decision — the whole point of a signature radius is that it is used consistently and recognisably. */ --cims-radius-xs: .25rem; --cims-radius-sm: .5rem; --cims-radius-md: .75rem; --cims-radius-lg: 1rem; --cims-radius-xl: 1.5rem; --cims-radius-pill: 9999px; /* Three elevation levels, per the reference system's depth model: Level 1 (cards) Y2 blur 8 @ 4% Level 2 (overlay) Y4 blur 12 @ 8% Each carries a 1-2% tint of the brand hue rather than neutral black, so shadows read as belonging to the palette instead of greying the page. The teal is dark enough (#0b6e63) that the tint reads as depth, not colour — it is the difference between a shadow and a smudge. */ --cims-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(var(--cims-color-primary-rgb), .04); --cims-shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 6px rgba(var(--cims-color-primary-rgb), .04); --cims-shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, .24), 0 8px 16px rgba(var(--cims-color-primary-rgb), .04); /* ---------------------------------------------------------------------- Neutral surfaces that the rest of this file was ALREADY referencing without ever defining. Every one of them was written as `var(--cims-color-surface-muted, )`, so it silently resolved to a hard-coded LIGHT-THEME literal — correct by accident in light mode and wrong in dark, where a 4% black wash over #141c2e is invisible and a light-theme border hex is a bright line. Defining them here (and again in the dark block) is what makes those fallbacks dead code. ---------------------------------------------------------------------- */ /* A recessed surface: inset panels, zebra rows, `.bg-light`. One step off the card, never off the page ground. */ --cims-color-surface-alt: #f7f9fc; /* A translucent recess, for a wash that has to sit on an unknown ground (a hovered tree row, a progress track inside a tinted card). */ --cims-color-surface-muted: rgba(19, 27, 46, .045); /* A hairline quieter than --cims-color-border, for divisions INSIDE a component where the component's own edge is already drawn. */ --cims-color-border-subtle: rgba(19, 27, 46, .08); --cims-color-bg-rgb: 241, 244, 249; --cims-color-text-rgb: 19, 27, 46; /* ---------------------------------------------------------------------- TYPE SCALE The sizes above are the scale; these are the other three axes a scale needs before it is one. The rule they encode: as type gets larger it gets tighter and its leading gets shorter, because tracking and leading that read as comfortable at 13px read as loose at 40px. role size tracking leading label xs wide / label snug body base base base title md/lg snug snug display xl tight tight figure 2xl tightest tight ---------------------------------------------------------------------- */ --cims-text-2xl: 2.5rem; --cims-tracking-tightest: -.03em; --cims-tracking-tight: -.02em; --cims-tracking-snug: -.01em; --cims-tracking-base: -.005em; --cims-tracking-wide: .04em; --cims-leading-tight: 1.1; --cims-leading-snug: 1.3; --cims-leading-base: 1.5; --cims-weight-regular: 400; --cims-weight-medium: 550; --cims-weight-semibold: 650; --cims-weight-bold: 700; /* The two steps the 4px spacing scale above was missing. Component padding kept reaching for 12px and 20px and, finding no token, hard-coded them — which is how a card header ended up 16px from the edge while the body beneath it was 20px. */ --cims-space-2-5: .75rem; --cims-space-3-5: 1.25rem; /* ---------------------------------------------------------------------- MOTION Restated from design-system.css so every custom property this file USES is also DEFINED in it. The values are identical, and the reduced-motion override there is written `:root:root` (0,2,0) precisely so it still outranks a plain `:root` — collapsing these to 0ms as it always did. ---------------------------------------------------------------------- */ --cims-motion-fast: 120ms; --cims-ease-standard: cubic-bezier(.2, 0, 0, 1); --cims-ease-decelerate: cubic-bezier(0, 0, 0, 1); /* ---------------------------------------------------------------------- CATEGORICAL DATA PALETTE Five series colours, in fixed order — slot 1 is always the most important series, and a chart with three series uses 1, 2, 3, never a cycled hue. Chosen against the light surface (#ffffff) and validated, not eyeballed: OKLCH lightness band, chroma floor, WCAG contrast, and OKLab ΔE between every pair under simulated protanopia/deuteranopia. The set clears the ALL-PAIRS gates, so it holds for a doughnut or a scatter as well as for bars and lines (worst pair ΔE 8.5 CVD / 17.2 normal vision; all five ≥ 3:1 on white). Deliberately NOT the semantic palette: success-green and danger-red are reserved for state, and a series painted in them would read as a verdict. That is also why slots 1 and 2 are blue and orange rather than a red/green pair — blue↔orange is the one opposition that survives every common colour-vision deficiency. ---------------------------------------------------------------------- */ /* 1 — the primary series. The brand blue itself, so the most important line on a board is the same colour as the product. */ --cims-chart-1: #0052cc; /* 2 — the comparison series (last period, budget vs actual). Orange: the farthest hue from slot 1 that a protanope still separates. */ --cims-chart-2: #d9600a; /* 3 — the third category. Green, but a data green, darker and bluer than --cims-color-success so it is not read as "good". */ --cims-chart-3: #0e9f6e; /* 4 — the fourth category. Violet, separated from slot 1 by chroma and lightness as well as hue, which is what keeps it off the blue. */ --cims-chart-4: #8b5cf6; /* 5 — the fifth and last. Magenta; past five, series fold into "Other". */ --cims-chart-5: #be185d; /* Gridlines: ~8% of the muted ink. Present enough to read a value off, recessive enough that the data stays the darkest thing in the frame. */ --cims-chart-grid: rgba(var(--cims-color-text-muted-rgb), .08); /* Axis ticks and series labels. Text wears an ink token, never the series colour — the mark beside the label already carries the identity. */ --cims-chart-label: var(--cims-color-text-muted); /* Layout */ --cims-sidebar-width: 272px; --cims-sidebar-width-collapsed: 76px; --cims-navbar-height: 64px; /* Bootstrap theme overrides — keeps Bootstrap component behavior, swaps only the palette. */ --bs-primary: var(--cims-color-primary); --bs-primary-rgb: var(--cims-color-primary-rgb); --bs-link-color: var(--cims-color-primary); --bs-link-color-rgb: var(--cims-color-primary-rgb); --bs-link-hover-color: var(--cims-color-primary-dark); --bs-success: var(--cims-color-success); --bs-success-rgb: var(--cims-color-success-rgb); --bs-warning: var(--cims-color-warning); --bs-warning-rgb: var(--cims-color-warning-rgb); --bs-danger: var(--cims-color-danger); --bs-danger-rgb: var(--cims-color-danger-rgb); --bs-info: var(--cims-color-info); --bs-info-rgb: var(--cims-color-info-rgb); --bs-body-bg: var(--cims-color-bg); --bs-body-color: var(--cims-color-text); --bs-body-font-family: var(--cims-font-sans); --bs-border-color: var(--cims-color-border); --bs-border-radius: var(--cims-radius-sm); --bs-border-radius-lg: var(--cims-radius-md); --bs-border-radius-sm: .375rem; --bs-box-shadow-sm: var(--cims-shadow-sm); --bs-box-shadow: var(--cims-shadow-md); --bs-heading-color: var(--cims-color-text); } /* ========================================================================== Dark theme — activated by data-theme="dark" on , set before first paint by the inline script in layouts/app.blade.php (either from a saved preference or, on a first-ever visit, from prefers-color-scheme). Every component in this file is built on the CIMS and Bootstrap custom properties above, so redefining them here is sufficient — no component needs its own dark variant. Status/KPI tints are written as an rgba() of a semantic -rgb token at some alpha rather than as a fixed hex, specifically so this block doesn't have to also override every tint color individually. ========================================================================== */ :root[data-theme="dark"] { /* The dark theme lightens the brand rather than reusing #0052cc, which on a #0c1220 ground measures under 3:1. #93b4ff gives 9.09:1 on the page and 8.27:1 on a card — the same treatment the teal had, in blue. */ --cims-color-primary: #93b4ff; --cims-color-primary-rgb: 147, 180, 255; --cims-color-primary-dark: #b2c5ff; --cims-color-primary-light: #b2c5ff; /* Dark mode lifts the accent to a pale blue, so its ink flips to near-black — the same rule applied to a different background, not a special case. */ --cims-color-primary-ink: #111827; --cims-color-primary-dark-ink: #111827; --cims-color-success: #22c55e; --cims-color-success-rgb: 34, 197, 94; --cims-color-warning: #f59e0b; --cims-color-warning-rgb: 245, 158, 11; --cims-color-danger: #f87171; --cims-color-danger-rgb: 248, 113, 113; --cims-color-info: #22d3ee; --cims-color-info-rgb: 34, 211, 238; --cims-color-bg: #0c1220; --cims-color-surface: #141c2e; --cims-color-border: #283148; --cims-color-text: #e8ecf7; --cims-color-text-muted: #93a0bf; /* Lighter, not darker, on a dark ground — same reasoning inverted. */ --cims-color-text-muted-strong: #b6c0d8; --cims-color-text-muted-rgb: 147, 160, 191; --cims-sidebar-bg: #0a0f1c; --cims-sidebar-bg-elevated: #101a2e; --cims-sidebar-border: rgba(255, 255, 255, .08); --cims-color-surface-alt: #1a2338; --cims-color-surface-muted: rgba(255, 255, 255, .055); --cims-color-border-subtle: rgba(255, 255, 255, .09); --cims-color-bg-rgb: 12, 18, 32; --cims-color-text-rgb: 232, 236, 247; /* The same five hues, re-stepped for the dark surface rather than flipped: #0052cc on #141c2e measures 2.49:1, so the light steps are not merely dimmer here, they are unreadable. These sit in the dark lightness band (OKLCH L .48–.67) and clear ≥ 3:1 on #141c2e, with worst adjacent-pair ΔE 11.0 under deuteranopia and 18.0 under normal vision. */ --cims-chart-1: #4a90e8; --cims-chart-2: #db6a15; --cims-chart-3: #12a476; --cims-chart-4: #9b7cf0; --cims-chart-5: #e05c92; /* A 8% ink wash that reads on white disappears on #141c2e; the gridline needs the extra alpha to stay a gridline. --cims-chart-label needs no dark step of its own — it resolves through --cims-color-text-muted, which is overridden above. */ --cims-chart-grid: rgba(var(--cims-color-text-muted-rgb), .14); --cims-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 1px rgba(0, 0, 0, .2); --cims-shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3); --cims-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .65); color-scheme: dark; } /* ========================================================================== Base ========================================================================== */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100vh; background-color: var(--cims-color-bg); color: var(--cims-color-text); font-family: var(--cims-font-sans); font-size: var(--cims-text-base); letter-spacing: -.005em; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--cims-font-sans); letter-spacing: -.015em; } .text-tabular { font-variant-numeric: tabular-nums; } /* Accessible focus ring — never remove, only restyle */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 2px solid var(--cims-color-primary); outline-offset: 2px; } /* The two navbar icon buttons are the one place the ring above does not land. ------------------------------------------------------------------------- `button:focus-visible` is specificity (0,1,1); Bootstrap ships `.btn:focus-visible { outline: 0 }` at (0,2,0), which wins on specificity regardless of source order. For most buttons that is harmless — Bootstrap substitutes its own box-shadow ring, which does appear. But `.cims-navbar-icon-btn` overrides only `color` and `background-color` on focus, so the collapse and theme toggles end up with NO outline and NO shadow: their sole focus feedback is a background shift from rgba(255,255,255,.06) to .12, which on the near-black navbar is close to invisible. WCAG 2.1 AA 2.4.7. Measured 2026-08-25 by tabbing four screens with a real keyboard, allowing the 150ms focus transition to settle before sampling: 166 focus stops, 8 with no indicator — `cimsSidebarCollapseToggle` and `cimsThemeToggle`, twice per page across the four. Every other control was fine once settled. White rather than the teal primary, which the dark navbar swallows. Matching Bootstrap's (0,2,0) suffices here because Bootstrap is @imported at the top of this file, so an equal-specificity rule wins on order. */ .cims-navbar .btn:focus-visible, .cims-navbar-icon-btn:focus-visible, .cims-navbar #userMenuButton:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Native HTML5 :invalid styling (red ring on empty `required` fields) must never render before the user has actually interacted with the form or the server has round-tripped a real validation error — Bootstrap already gates its OWN invalid styles behind `.is-invalid`/`.was-validated`, but the bare `:invalid` pseudo-class still paints on pristine, untouched fields the instant the page loads. Only show it once the field has been touched (`:not(:focus):not(:placeholder-shown)`) or the field carries the server-validated `.is-invalid` class. */ .form-control:invalid, .form-select:invalid { border-color: var(--cims-color-border); box-shadow: none; background-image: none; } .form-control:user-invalid, .form-select:user-invalid, .form-control.is-invalid, .form-select.is-invalid { border-color: var(--cims-color-danger); } .form-control, .form-select { font-size: var(--cims-text-base); padding-block: .5625rem; border-color: var(--cims-color-border); transition: border-color .15s ease-out, box-shadow .15s ease-out; } .form-control:focus, .form-select:focus { border-color: var(--cims-color-primary-light); box-shadow: 0 0 0 3px rgba(var(--cims-color-primary-rgb), .15); } .form-label { font-weight: 600; font-size: var(--cims-text-sm); color: var(--cims-color-text); margin-bottom: .375rem; } .btn { font-weight: 600; font-size: var(--cims-text-sm); padding-block: .5rem; letter-spacing: -.005em; } /* `` shipped Bootstrap's pink `--bs-code-color: #d63384`, unmapped, at 4.08:1 on the page ground — and it is used for real identifiers (org slugs, project codes, device UUIDs, language codes), not decoration. */ :root, :root[data-theme="dark"], :root[data-theme="light"] { --bs-code-color: var(--cims-color-text); } code { background: rgba(var(--cims-color-text-muted-rgb), .1); padding: .1rem .3rem; border-radius: var(--cims-radius-sm, .375rem); } /* `.bg-light` is `#f8f9fa` with no theme awareness — the same defect class as the `bg-white` card footers. In dark mode the audit log's JSON blocks were near-white panels carrying near-white text: 1.12:1. */ :root, :root[data-theme="dark"], :root[data-theme="light"] { --bs-light: var(--cims-color-surface-alt, var(--cims-color-bg)); --bs-light-rgb: var(--cims-color-bg-rgb, 241, 244, 249); /* The BACKGROUND half of the same omission. Bootstrap's neutral grounds were unmapped, so anything reading them stayed light in dark mode while its text followed the theme. The settings screen's logo preview does exactly that from an inline style: style="background: var(--bs-tertiary-bg, #f8f9fa)" With the token undefined the hardcoded #f8f9fa fallback won, giving dark-theme muted text on a near-white panel at 2.48:1. Mapping the token fixes it without touching the inline style — and covers every other consumer of these grounds at the same time. */ --bs-tertiary-bg: var(--cims-color-bg); --bs-secondary-bg: var(--cims-color-bg); --bs-body-tertiary-bg: var(--cims-color-bg); --bs-body-secondary-bg: var(--cims-color-bg); } .bg-light { background-color: var(--cims-color-bg) !important; color: var(--cims-color-text); } /* Solid semantic badges. Bootstrap picks its ink assuming ITS palette — dark text on a light yellow `.bg-warning`. The CIMS warning token is a dark brown (#9a4404), so Bootstrap's #212529 ink landed at 2.35:1. The semantic tokens are dark in light mode and bright in dark mode, so the ink has to flip with the theme rather than be chosen once. */ :root:not([data-theme="dark"]) .badge.bg-primary, :root:not([data-theme="dark"]) .badge.bg-success, :root:not([data-theme="dark"]) .badge.bg-warning, :root:not([data-theme="dark"]) .badge.bg-info, :root:not([data-theme="dark"]) .badge.bg-danger { color: #fff !important; } /* Dark mode brightens the semantic tokens, so the same chips need dark ink. An earlier blanket `color: #fff` here was wrong for exactly that reason and put `.badge.bg-primary` back to 2.47:1. */ :root[data-theme="dark"] .badge.bg-primary, :root[data-theme="dark"] .badge.bg-success, :root[data-theme="dark"] .badge.bg-warning, :root[data-theme="dark"] .badge.bg-info, :root[data-theme="dark"] .badge.bg-danger { color: #0b1220 !important; } .badge.bg-light { color: var(--cims-color-text) !important; } /* Bootstrap compiles LITERAL hexes into every `.btn-outline-*` variant, so mapping `--bs-primary` / `--bs-warning` (lines 97-108) never reaches them. `.btn-outline-primary` rendered Bootstrap blue at 4.08:1; `.btn-outline- warning` rendered Bootstrap's #ffc107 at **1.48:1** — "Expiring Documents" and "Expiring Warranty / DLP" were effectively unreadable. Off-brand and below the floor at the same time. */ /* `color` is set EXPLICITLY here, not only through `--bs-btn-color`. Setting the custom property alone was verified insufficient: with my rule winning the cascade (rule 3589 vs Bootstrap's 351 in the same sheet) the property computed to #9a4404, yet `color` still resolved to Bootstrap's #ffc107 — reproducibly, and even when `color: var(--bs-btn-color)` was forced inline. I could not account for that through the cascade, so the colour is declared directly: it guarantees the rendered result regardless of the mechanism, and the custom properties are kept so hover/active states stay consistent. */ .btn-outline-secondary { --bs-btn-color: var(--cims-color-text-muted-strong); --bs-btn-border-color: var(--cims-color-border); --bs-btn-hover-bg: var(--cims-color-text-muted); --bs-btn-hover-border-color: var(--cims-color-text-muted); color: var(--cims-color-text-muted-strong); } .btn-outline-success { color: var(--cims-color-success); --bs-btn-color: var(--cims-color-success); --bs-btn-border-color: var(--cims-color-success); --bs-btn-hover-bg: var(--cims-color-success); --bs-btn-hover-border-color: var(--cims-color-success); --bs-btn-active-bg: var(--cims-color-success); --bs-btn-active-border-color: var(--cims-color-success); } .btn-outline-warning { color: var(--cims-color-warning); --bs-btn-color: var(--cims-color-warning); --bs-btn-border-color: var(--cims-color-warning); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--cims-color-warning); --bs-btn-hover-border-color: var(--cims-color-warning); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--cims-color-warning); --bs-btn-active-border-color: var(--cims-color-warning); } .btn-outline-info { color: var(--cims-color-info); --bs-btn-color: var(--cims-color-info); --bs-btn-border-color: var(--cims-color-info); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--cims-color-info); --bs-btn-hover-border-color: var(--cims-color-info); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--cims-color-info); --bs-btn-active-border-color: var(--cims-color-info); } .btn-outline-danger { color: var(--cims-color-danger); --bs-btn-color: var(--cims-color-danger); --bs-btn-border-color: var(--cims-color-danger); --bs-btn-hover-bg: var(--cims-color-danger); --bs-btn-hover-border-color: var(--cims-color-danger); --bs-btn-active-bg: var(--cims-color-danger); --bs-btn-active-border-color: var(--cims-color-danger); } /* Bootstrap compiles a LITERAL #0d6efd into `.btn-outline-primary`, so mapping `--bs-primary` (line 93) never reaches it: the outline buttons rendered in Bootstrap blue rather than the brand accent, and measured 4.08:1 on the page ground — off-brand AND below the 4.5:1 floor. The brand teal is 5.56:1. */ .btn-outline-primary { color: var(--cims-color-primary); --bs-btn-color: var(--cims-color-primary); --bs-btn-border-color: var(--cims-color-primary); --bs-btn-hover-bg: var(--cims-color-primary); --bs-btn-hover-border-color: var(--cims-color-primary); --bs-btn-active-bg: var(--cims-color-primary-dark); --bs-btn-active-border-color: var(--cims-color-primary-dark); --bs-btn-focus-shadow-rgb: var(--cims-color-primary-rgb); } .btn-primary { --bs-btn-bg: var(--cims-color-primary); --bs-btn-border-color: var(--cims-color-primary); --bs-btn-hover-bg: var(--cims-color-primary-dark); --bs-btn-hover-border-color: var(--cims-color-primary-dark); /* The pressed state was left at Bootstrap's own #0a58ca, so every primary button in the product flashed stock blue for as long as it was held down — including on an install that had never set a brand colour, where the palette is teal. `.btn-outline-primary` directly above already derives this; `.btn-primary` simply never did. */ --bs-btn-active-bg: var(--cims-color-primary-dark); --bs-btn-active-border-color: var(--cims-color-primary-dark); --bs-btn-focus-shadow-rgb: var(--cims-color-primary-rgb); /* The label follows the background instead of being fixed at white. Hover and active get their own ink because they sit on the DARKER shade, which on a pale accent can want a different answer. */ --bs-btn-color: var(--cims-color-primary-ink); --bs-btn-hover-color: var(--cims-color-primary-dark-ink); --bs-btn-active-color: var(--cims-color-primary-dark-ink); --bs-btn-disabled-color: var(--cims-color-primary-ink); box-shadow: 0 1px 2px rgba(var(--cims-color-primary-rgb), .25); } /* Dark mode lightens the accent 45% toward white so it reads against a near-black page (see ColourContrastService::darkVariant). That makes it a LIGHT button, and white text on it fails: the shipped #0b6e63 lightens to #79afa9, where white is 2.47:1. Dark ink on the same swatch is 7.59:1. ColourContrastService now assesses this pairing when an admin picks a colour, so a brand whose lightened variant fails dark ink is refused at the source. */ /* Same problem as the primary button, one component over. The dark theme brightens the semantic colours so they read against a near-black page (--cims-color-success goes #166534 -> #22c55e), which makes a solid `.badge.bg-success` a LIGHT chip — and Bootstrap keeps white text on it. Measured 2.28:1. Dark ink on the same chip clears AA comfortably. */ :root[data-theme="dark"] .badge.bg-success, :root[data-theme="dark"] .badge.bg-warning, :root[data-theme="dark"] .badge.bg-info { color: #0b1220 !important; /* Bootstrap sets badge colour with !important */ } /* Dark mode needs no button-ink rule of its own any more: `.btn-primary` reads `--cims-color-primary-ink`, and the dark block above redefines that token. One mechanism, both themes — the #0b1220 hardcoded here was right for the shipped palette and wrong for every other. */ /* --- Phase 4: surfaces, controls, chrome ---------------------------------- */ .card { border-color: var(--cims-color-border); box-shadow: var(--cims-shadow-sm); border-radius: var(--cims-radius-md); } .card-header { background-color: var(--cims-color-surface); border-bottom: 1px solid var(--cims-color-border); font-size: var(--cims-text-sm); font-weight: 600; letter-spacing: -.005em; padding-block: 1rem; } /* Buttons: a touch more presence and a consistent optical height across sizes, so a toolbar of mixed btn / btn-sm does not look ragged. */ .btn { font-weight: 500; border-radius: var(--cims-radius-sm); letter-spacing: -.005em; --bs-btn-padding-y: .4375rem; --bs-btn-padding-x: .875rem; } .btn-sm { --bs-btn-padding-y: .3125rem; --bs-btn-padding-x: .625rem; --bs-btn-font-size: var(--cims-text-sm); } .btn-lg { --bs-btn-padding-y: .625rem; --bs-btn-padding-x: 1.25rem; } /* Outline buttons carry most of the secondary actions in this product; the Bootstrap default border is heavy enough to compete with primaries. */ .btn-outline-secondary { --bs-btn-color: var(--cims-color-text); --bs-btn-border-color: var(--cims-color-border); --bs-btn-hover-bg: var(--cims-color-bg); --bs-btn-hover-color: var(--cims-color-text); --bs-btn-hover-border-color: var(--cims-color-text-muted); } /* Form controls: match the 4px rhythm and give focus a brand ring rather than Bootstrap's default blue glow. */ .form-control, .form-select { border-color: var(--cims-color-border); border-radius: var(--cims-radius-sm); padding-block: .4375rem; } .form-control:focus, .form-select:focus { border-color: var(--cims-color-primary-light); box-shadow: 0 0 0 3px rgba(var(--cims-color-primary-rgb), .15); } .form-label { font-size: var(--cims-text-sm); font-weight: 500; margin-bottom: .375rem; } /* Badges read as labels, not buttons: lighter weight, wider tracking, and a tint rather than a solid fill wherever Bootstrap's semantic classes are used directly. */ .badge { font-weight: 600; letter-spacing: .01em; padding: .3125rem .5rem; border-radius: .375rem; } /* Modals: match the card language so a popup form reads as the same system. */ .modal-content { border: 1px solid var(--cims-color-border); border-radius: var(--cims-radius-lg); box-shadow: var(--cims-shadow-lg); } .modal-header, .modal-footer { border-color: var(--cims-color-border); padding-inline: var(--cims-space-4); } .modal-header { padding-block: var(--cims-space-3); } .modal-title { font-size: var(--cims-text-md); font-weight: 600; letter-spacing: -.015em; } .modal-body { padding: var(--cims-space-4); } /* Detail/show-page title row — record name + one or more pills, identically hand-rolled as

across 24 show pages (indents, purchase-orders, tenders, projects, budgets, vendors, and 18 more — confirmed no other h1 in the app uses d-flex, so this selector can't catch anything unintended). With no flex-wrap, a long record name plus badge text forced real horizontal page scroll and clipped the badge on narrow screens. One rule here fixes every instance at once instead of migrating 24 files to a shared component. overflow-wrap: anywhere lets the record-name text itself shrink below its single-line width — flex items default to a min-width based on their unwrapped content, which is what was blocking the wrap in the first place. */ h1.d-flex { flex-wrap: wrap; overflow-wrap: anywhere; row-gap: .25rem; } /* GIS map — was a fixed inline height: 640px, not viewport-relative; on a short mobile screen that leaves the filter/legend panel below it pushed far down, and on a very short landscape view the map itself can exceed the viewport. clamp() keeps it usable across phone/tablet/desktop without a media query per breakpoint. */ .cims-gis-map { width: 100%; height: clamp(320px, 70dvh, 640px); } /* Wide tables already scroll correctly *inside* .table-responsive on narrow screens (Bootstrap default) rather than blowing out the page — but nothing hints that a table can be swiped sideways. A static edge-fade is a simpler, safer cue than a scroll-position-aware gradient (no JS, no risk of a stale mask after scrolling to the end — a minor imperfection worth the lower complexity here). */ .table-responsive { -webkit-overflow-scrolling: touch; position: relative; } /* The right-edge gradient that used to live here was removed on 2026-08-23. It was static — painted on every table whether or not it actually overflowed — so on the majority of screens it read as a stray inner shadow against the card edge rather than a scroll affordance. A scroll-position aware cue would need JS per table; the horizontal scrollbar plus the clipped column already signal scrollability well enough to not be worth that. */ .skip-link { position: absolute; top: -48px; left: var(--cims-space-2); z-index: 1100; background: var(--cims-color-primary); color: #fff; padding: var(--cims-space-2) var(--cims-space-3); border-radius: var(--cims-radius-sm); transition: top .15s ease-out; } .skip-link:focus { top: var(--cims-space-2); color: #fff; } /* ========================================================================== App shell — navbar ========================================================================== */ .cims-navbar { height: var(--cims-navbar-height); background-color: var(--cims-sidebar-bg) !important; border-bottom: 1px solid var(--cims-sidebar-border); /* No drop shadow: the sidebar below is the same colour, so a shadow only draws a seam across two surfaces that should read as one chrome. */ box-shadow: none; } .cims-navbar .navbar-brand { letter-spacing: -.01em; font-size: 1.0625rem; } .cims-navbar .navbar-brand .cims-logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.125rem; height: 2.125rem; border-radius: .625rem; background: linear-gradient(155deg, var(--cims-color-primary-light), var(--cims-color-primary-dark)); color: #fff; font-size: 1.0625rem; box-shadow: 0 2px 8px rgba(var(--cims-color-primary-rgb), .4); } .cims-navbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: rgba(255, 255, 255, .8); background-color: rgba(255, 255, 255, .06); border: 1px solid var(--cims-sidebar-border); border-radius: var(--cims-radius-sm); transition: background-color .12s ease-out, color .12s ease-out; } .cims-navbar-icon-btn i { font-size: 1.05rem; } .cims-navbar-icon-btn:hover, .cims-navbar-icon-btn:focus-visible { color: #fff; background-color: rgba(255, 255, 255, .12); } .cims-navbar-icon-btn[aria-pressed="true"] { color: var(--cims-color-primary-light); background-color: rgba(var(--cims-color-primary-rgb), .22); border-color: rgba(var(--cims-color-primary-rgb), .4); } .cims-navbar #userMenuButton { background-color: rgba(255, 255, 255, .06); border: 1px solid var(--cims-sidebar-border); border-radius: var(--cims-radius-sm); font-size: var(--cims-text-sm); font-weight: 500; } /* Bounded at every width so a long display name can never push the topbar (and therefore its dropdown-menu-end, anchored to the trigger's own right edge) past the viewport. The full name is still available via the button's [title] attribute. */ .cims-username { max-width: 12rem; } /* Below 400px the brand, three icon buttons and the user name no longer fit the bar: measured 9px of overflow at 360px on every page. The name is the only expendable element — the avatar icon and the dropdown still identify the account, and the name is the first thing inside the menu. */ @media (max-width: 399.98px) { .cims-username { display: none; } /* min-width, not just padding: with the name and caret hidden the button collapsed to 18px wide — narrower than the 44px touch minimum, which is worse than the 9px overflow it was fixing. */ .cims-navbar #userMenuButton { padding-inline: .625rem; min-width: 2.75rem; justify-content: center; } .cims-navbar #userMenuButton::after { display: none; } } /* The DataTables toolbar and pager render at Bootstrap's -sm sizes: search 34px, length select 30px, page buttons 32-34px. Fine with a mouse, all under the 44px touch minimum. Keyed to pointer, not width. The first version of this used max-width:768px, which silently excluded every tablet — an iPad Air in landscape is 1180px wide and still operated with a finger, so it kept the 30px select. A coarse primary pointer is the actual condition; a hybrid reverts to the compact toolbar when its keyboard is attached, which is correct. */ @media (pointer: coarse) { .dt-container .dt-search input[type="search"], .dt-container .dt-length select { min-height: 2.75rem; } /* Bootstrap's .page-link is display:block, so min-height alone would pin the label to the top of a 44px box. */ .dt-container .dt-paging .page-link { min-width: 2.75rem; min-height: 2.75rem; display: flex; align-items: center; justify-content: center; } /* Touch-target minimum (WCAG 2.5.5 / Apple HIG / Material: 44x44px). These lived under max-width:991.98px, next to the sidebar-drawer rules, which tied "is this a finger?" to "is the sidebar docked?". Those are unrelated questions: a docked sidebar starts at 992px, but an iPad Pro in portrait is 1024px and still a finger, so every row action button in the app measured 38px there. Width stays for layout below; touch sizing belongs on the pointer. */ .btn { min-height: 44px; } .cims-navbar-icon-btn, #cimsSidebarToggle { min-width: 44px; min-height: 44px; } .cims-sidebar .nav-link { min-height: 44px; } /* iOS Safari auto-zooms the viewport when a field under 16px takes focus. Also pointer-driven, not width-driven — an iPad zooms at 1024px too. min-height for the same reason as .btn: a text field is a tap target, and Bootstrap's default lands at 40px. Excludes textarea, which sizes from its rows attribute and is already well over the minimum. */ .form-control:not(textarea), .form-select { font-size: 1rem; min-height: 2.75rem; } } /* Layout, not touch: below 768px the search field has no room to sit beside the length menu, so it takes the full row. */ @media (max-width: 767.98px) { .dt-container .dt-search input[type="search"] { min-width: 0; width: 100%; } .dt-container .dt-search { width: 100%; } } .cims-navbar #userMenuButton:hover, .cims-navbar #userMenuButton:focus { background-color: rgba(255, 255, 255, .1); } /* ========================================================================== App shell — sidebar ========================================================================== */ .cims-sidebar { position: fixed; top: var(--cims-navbar-height); bottom: 0; left: 0; width: var(--cims-sidebar-width); overflow-y: auto; background-color: var(--cims-sidebar-bg); padding: var(--cims-space-2) 0 var(--cims-space-4); z-index: 1020; box-shadow: 1px 0 0 rgba(0, 0, 0, .18); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; } .cims-sidebar::-webkit-scrollbar { width: 6px; } .cims-sidebar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .14); border-radius: 999px; } /* --- Phase 2: app shell ---------------------------------------------------- A 19-module sidebar is the densest surface in the product. The changes are about scanning, not decoration: a taller row, a wider icon gutter so labels align on a single axis, and an active state that reads at a glance. */ .cims-sidebar .nav-link { display: flex; align-items: center; gap: .75rem; color: var(--cims-sidebar-text); border-radius: var(--cims-radius-sm); margin: .125rem var(--cims-space-2); padding: .5625rem .75rem; font-size: var(--cims-text-sm); font-weight: 500; position: relative; letter-spacing: -.005em; } .cims-sidebar .nav-link i { font-size: 1.0625rem; width: 1.375rem; flex: none; text-align: center; opacity: .9; } .cims-sidebar .nav-link { transition: background-color .12s ease-out, color .12s ease-out; } .cims-sidebar .nav-link:hover { color: var(--cims-sidebar-text-active); background-color: var(--cims-sidebar-bg-active); } .cims-sidebar .nav-link.active { color: var(--cims-sidebar-text-active); background-color: rgba(var(--cims-color-primary-rgb), .22); font-weight: 600; } /* The rail sits flush to the sidebar edge rather than floating half-outside the link, so a scanning eye gets one continuous vertical reference for "you are here" instead of a detached tick. */ .cims-sidebar .nav-link.active::before { content: ""; position: absolute; left: calc(var(--cims-space-2) * -1); top: .1875rem; bottom: .1875rem; width: 3px; border-start-end-radius: 3px; border-end-end-radius: 3px; background-color: var(--cims-color-primary-light); } /* Icons carry the active state too — colour alone is not enough at 13px on a dark ground. */ .cims-sidebar .nav-link.active i { color: var(--cims-color-primary-light); } .cims-sidebar .nav-link.disabled { color: rgba(255, 255, 255, .3); pointer-events: none; } .cims-sidebar .nav-link .badge-soon { margin-left: auto; font-size: .625rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .08); border-radius: 999px; padding: .125rem .5rem; } /* Section band ("Modules", "Administration") — a non-interactive divider that splits the sidebar's 16 groups into scannable bands. Distinct from .nav-header, which is a clickable for a real group. */ .cims-sidebar .cims-nav-section { display: flex; align-items: center; gap: var(--cims-space-2); padding: 0 var(--cims-space-3); margin: var(--cims-space-4) 0 var(--cims-space-1); } .cims-sidebar .cims-nav-section > span { color: var(--cims-sidebar-heading); text-transform: uppercase; font-size: .6875rem; letter-spacing: .08em; font-weight: 700; white-space: nowrap; } .cims-sidebar .cims-nav-section::after { content: ""; flex: 1; height: 1px; background-color: var(--cims-sidebar-border); } /* A sub-band inside one group's list (Masters > Registers). Sits within the group's own indent guide, so it stays quieter than a top-level band and carries no rule of its own. */ .cims-sidebar .cims-nav-subsection { padding: var(--cims-space-3) var(--cims-space-3) .25rem 1.75rem; } .cims-sidebar .cims-nav-subsection > span { color: var(--cims-sidebar-heading); text-transform: uppercase; font-size: .625rem; letter-spacing: .07em; font-weight: 700; } .cims-sidebar .nav-header { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; color: var(--cims-sidebar-heading); text-transform: uppercase; font-size: var(--cims-text-xs); letter-spacing: .06em; font-weight: 600; padding: var(--cims-space-2) var(--cims-space-3) .375rem; margin-top: var(--cims-space-2); cursor: pointer; } .cims-sidebar .nav-header:hover { color: rgba(255, 255, 255, .6); } /* --------------------------------------------------------------------------- Sidebar group presentation. The headers were styled as passive section captions — small, uppercase, low contrast — while actually being the primary controls for a 16-group, ~90-link menu. At that size they read as decoration rather than something clickable, which is why the nav felt like an undifferentiated list. These rules make a group header look like the control it is, and make the section owning the current page visible without expanding anything. --------------------------------------------------------------------------- */ .cims-sidebar .nav-header { /* Sentence case at a readable size: these are navigation controls, not captions. Uppercase micro-type is harder to scan at 16 repetitions. */ text-transform: none; font-size: var(--cims-text-sm); letter-spacing: 0; border-radius: var(--cims-radius-sm, .375rem); transition: background-color .15s ease-out, color .15s ease-out; } .cims-sidebar .nav-header:hover, .cims-sidebar .nav-header:focus-visible { background-color: rgba(255, 255, 255, .06); color: #fff; } /* The open group is the user's current context — give it a quiet ground so the expanded links read as belonging to it rather than floating in the rail. */ .cims-sidebar details[open] > .nav-header { color: #fff; background-color: rgba(255, 255, 255, .05); } /* The section owning the current page, marked by sidebar-nav.js. Distinct from :open, because a user can expand a different section while still being ON a page — losing that cue is how people get lost in a deep menu. */ .cims-sidebar details.is-current-section > .nav-header { color: #fff; box-shadow: inset 2px 0 0 var(--cims-color-primary); } /* Only one group is open at a time, so its links can afford a little more room without lengthening the rail. */ html:not(.cims-sidebar-collapsed) .cims-sidebar details[open] > ul.nav > li > .nav-link { padding-top: .3rem; padding-bottom: .3rem; } /* Respect a user who has asked for less motion. */ @media (prefers-reduced-motion: reduce) { .cims-sidebar .nav-header, .cims-sidebar .nav-header .bi-chevron-down { transition: none; } } /* --------------------------------------------------------------------------- One icon column for the whole rail. Group headers were laid out `justify-content: space-between` over THREE children (icon, label, chevron), which pushes the label into the middle of whatever space the chevron leaves. The label's x-position therefore depended on its own text width, so "Budgets" started 39px further right than "Project Management" — the labels stepped in and out down the rail. That raggedness, not the grouping itself, is what read as unfinished. Left-align the row and let only the chevron claim the free space, so every icon and every label starts on the same vertical line. --------------------- */ .cims-sidebar .nav-header { justify-content: flex-start; gap: .75rem; /* matches .nav-link, so both tiers share a column */ } .cims-sidebar .nav-header > .bi:first-child { font-size: 1.0625rem; /* identical metrics to .nav-link i */ width: 1.375rem; flex: none; text-align: center; opacity: .9; } .cims-sidebar .nav-header .bi-chevron-down { margin-left: auto; /* the only thing that pushes right */ font-size: .75rem; opacity: .55; } /* The seven top-level links (Dashboard, Budgets, Vendors, Tenders, Contracts, BIM Models, Audit Logs). Each owns exactly one module-level page: their other routes are record-scoped, and every index page already carries its own "New …" button. Wrapping them in a dropdown would therefore add a chevron that expands to a copy of the row it hangs from, plus a "New X" entry duplicating a button already on the page it links to. So they stay single rows and instead take the group headers' box metrics — one baseline, one icon column, one hover ground across the whole rail. The absent chevron then means what it should: this row has no sub-menu. */ html:not(.cims-sidebar-collapsed) .cims-sidebar > ul.nav > li.nav-item > .nav-link { margin: var(--cims-space-2) 0 0; padding: var(--cims-space-2) var(--cims-space-3) .375rem; font-weight: 600; } .cims-sidebar .nav-header .bi-chevron-down { transition: transform .15s ease-out; } .cims-sidebar details[open] > .nav-header .bi-chevron-down { transform: rotate(180deg); } html:not(.cims-sidebar-collapsed) .cims-sidebar details > ul.nav { position: relative; margin: .25rem 0 .5rem; padding-left: var(--cims-space-3); } html:not(.cims-sidebar-collapsed) .cims-sidebar details > ul.nav::before { content: ""; position: absolute; left: 1.375rem; top: 0; bottom: .375rem; width: 1px; background-color: var(--cims-sidebar-border); } html:not(.cims-sidebar-collapsed) .cims-sidebar details > ul.nav .nav-link { padding-left: 1.75rem; } html:not(.cims-sidebar-collapsed) .cims-sidebar details > ul.nav .nav-link.active::before { left: -.25rem; } .cims-sidebar summary::-webkit-details-marker { display: none; } /* ========================================================================== App shell — content ========================================================================== */ .cims-content { margin-left: var(--cims-sidebar-width); padding-top: calc(var(--cims-navbar-height) + var(--cims-space-4)); min-height: 100vh; transition: margin-left .18s ease-out; } /* Breadcrumb. Bootstrap's default renders the trail as underlined body links separated by a "/" — visually it competes with the page heading it sits above, when its whole job is to be quiet chrome you read only when you are lost. Muted, chevron-separated, uppercase-free, and only the clickable crumbs react to the pointer; the current page is stated, not offered. */ .cims-breadcrumb { font-size: var(--cims-text-sm); line-height: 1.2; } .cims-breadcrumb .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; row-gap: .25rem; } .cims-breadcrumb .breadcrumb-item + .breadcrumb-item { padding-inline-start: var(--cims-space-2); } /* The divider is set here rather than through --bs-breadcrumb-divider because that variable takes a quoted string only: a font glyph needs its own font-family, which the ::before below can carry. */ .cims-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\f285"; /* bi-chevron-right */ font-family: "bootstrap-icons"; font-size: .625rem; color: var(--cims-color-text-muted); opacity: .6; padding-inline-end: var(--cims-space-2); line-height: 1; float: none; } [dir="rtl"] .cims-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\f284"; /* bi-chevron-left — the trail runs the other way */ } .cims-breadcrumb .breadcrumb-item a { color: var(--cims-color-text-muted); font-weight: 500; text-decoration: none; transition: color .15s ease-out; } .cims-breadcrumb .breadcrumb-item a:hover, .cims-breadcrumb .breadcrumb-item a:focus-visible { color: var(--cims-color-primary); text-decoration: underline; text-underline-offset: .1875rem; } /* Where the reader is now: the only crumb at full text colour. */ .cims-breadcrumb .breadcrumb-item.active { color: var(--cims-color-text); font-weight: 600; } @media (max-width: 991.98px) { .cims-sidebar { left: -100%; transition: left .2s ease-in-out; } .cims-sidebar.show { left: 0; } .cims-content { margin-left: 0; } .cims-username { max-width: 6.25rem; } /* The username text already identifies the account — the icon is redundant chrome competing with it for the topbar's tightest space. */ #userMenuButton .bi-person-circle { display: none; } } /* ========================================================================== Sidebar collapse (desktop icon rail) — toggled via #cimsSidebarCollapseToggle, state lives as a class on (not the sidebar itself) so the pre-paint script in the layout can apply it before first render with zero flash. ========================================================================== */ @media (min-width: 992px) { .cims-sidebar { transition: width .18s ease-out; } /* Scrolls, like the expanded rail does. This was `overflow: visible`, so that the CSS hover fly-out (an ::after positioned past the right edge) would not be clipped. The side effect was that the rail stopped scrolling entirely: the nav is ~1300px of content in a ~900px column, so the last eight modules — Administration, Masters, Settings, Audit Logs — could not be reached at all while collapsed. A label that cannot be clipped is worth less than a menu that can be scrolled, so the fly-out moved to a fixed-position element (see .cims-rail-tip) and the overflow came back. */ html.cims-sidebar-collapsed .cims-sidebar { width: var(--cims-sidebar-width-collapsed); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; } html.cims-sidebar-collapsed .cims-content { margin-left: var(--cims-sidebar-width-collapsed); } html.cims-sidebar-collapsed .cims-navbar .navbar-brand span:not(.cims-logo-mark) { display: none; } html.cims-sidebar-collapsed .cims-sidebar .cims-nav-label, html.cims-sidebar-collapsed .cims-sidebar .nav-header .bi-chevron-down, html.cims-sidebar-collapsed .cims-sidebar .badge-soon { display: none; } html.cims-sidebar-collapsed .cims-sidebar .nav-link, html.cims-sidebar-collapsed .cims-sidebar .nav-header { justify-content: center; padding-inline: 0; margin-inline: var(--cims-space-2); /* `.nav-header` carries `width: 100%` for the expanded rail. Left in place here it stayed 76px wide *and* took the 8px inline margin, so it overflowed the rail and its centred icon landed 8px right of every link's — a rail of icons on two axes. Measured before the fix: link centre 38px, group centre 46px. */ width: auto; /* One row height for both tiers. They were 44px and 40px, which read as uneven spacing down a column of otherwise identical squares. */ min-height: 2.75rem; padding-block: 0; margin-block: .125rem; } html.cims-sidebar-collapsed .cims-sidebar .nav-link.active::before { left: -.5rem; } html.cims-sidebar-collapsed .cims-sidebar ul.nav.flex-column ul.nav.flex-column { padding-left: 0; } /* The collapsed rail is icon-only, so a text band has nothing to show and would only add dead vertical space between groups — it degrades to a plain separator rule, and the in-group sub-band disappears entirely. */ html.cims-sidebar-collapsed .cims-sidebar .cims-nav-section { margin: var(--cims-space-3) var(--cims-space-2); padding: 0; border-top: 1px solid var(--cims-sidebar-border); } html.cims-sidebar-collapsed .cims-sidebar .cims-nav-section > span, html.cims-sidebar-collapsed .cims-sidebar .cims-nav-section::after, html.cims-sidebar-collapsed .cims-sidebar .cims-nav-subsection { display: none; } /* The hover label is a single fixed-position element positioned by sidebar-nav.js, not an ::after on the item. An ::after lives inside the scroll container, so showing it required `overflow: visible` on the rail, which cost the rail its scrollbar. A fixed element is positioned against the viewport instead, so the rail can scroll and the label still escapes it. It also appears on keyboard focus, which a :hover rule never did. */ html.cims-sidebar-collapsed .cims-sidebar .nav-link, html.cims-sidebar-collapsed .cims-sidebar .nav-header { position: relative; } } .cims-rail-tip { position: fixed; z-index: 1060; background: var(--cims-sidebar-bg-elevated); color: var(--cims-sidebar-text-active); font-size: var(--cims-text-sm); font-weight: 500; white-space: nowrap; padding: .375rem .75rem; border-radius: var(--cims-radius-sm); box-shadow: var(--cims-shadow-md); border: 1px solid var(--cims-sidebar-border); pointer-events: none; opacity: 0; transform: translateX(-.25rem); transition: opacity .12s ease-out, transform .12s ease-out; } .cims-rail-tip[data-shown] { opacity: 1; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .cims-rail-tip { transition: none; } } /* ========================================================================== Shared components ========================================================================== */ /* Page header */ .cims-page-header { display: flex; flex-wrap: wrap; gap: var(--cims-space-3); align-items: flex-start; justify-content: space-between; margin-bottom: var(--cims-space-4); } .cims-page-header h1, .cims-page-header h2 { /* The page title is the only type on a list screen with no competition — giving it real size is what separates a product from a CRUD scaffold. Tighter tracking keeps it from feeling inflated at this weight. */ font-size: 1.625rem; font-weight: 700; letter-spacing: -.025em; margin-bottom: 0; text-wrap: balance; } .cims-page-header .cims-page-subtitle { color: var(--cims-color-text-muted); font-size: var(--cims-text-sm); margin-top: .25rem; max-width: 68ch; line-height: 1.5; } /* A hairline under the header groups the title with the content beneath it and stops the actions row floating free of the page. */ .cims-page-header { padding-bottom: var(--cims-space-3); border-bottom: 1px solid var(--cims-color-border); } /* KPI stat card */ .cims-kpi-card { background: var(--cims-color-surface); border: 1px solid var(--cims-color-border); border-radius: var(--cims-radius-md); box-shadow: var(--cims-shadow-sm); padding: var(--cims-space-4); display: flex; align-items: flex-start; gap: var(--cims-space-3); transition: box-shadow .15s ease-out, transform .15s ease-out; } .cims-kpi-card:hover { box-shadow: var(--cims-shadow-md); transform: translateY(-1px); } .cims-kpi-card .cims-kpi-icon { width: 2.75rem; height: 2.75rem; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--cims-radius-md); font-size: 1.25rem; } /* KPI / stat icon color variants — token-driven (rgba over a CSS custom property) rather than fixed hex, so they stay legible in dark mode instead of rendering as a bright, washed-out tint on a dark surface. */ .cims-kpi-icon--primary { color: var(--cims-color-primary); background: rgba(var(--cims-color-primary-rgb), .12); } .cims-kpi-icon--warning { color: var(--cims-color-warning); background: rgba(var(--cims-color-warning-rgb), .14); } .cims-kpi-icon--success { color: var(--cims-color-success); background: rgba(var(--cims-color-success-rgb), .14); } .cims-kpi-icon--danger { color: var(--cims-color-danger); background: rgba(var(--cims-color-danger-rgb), .14); } .cims-kpi-icon--info { color: var(--cims-color-info); background: rgba(var(--cims-color-info-rgb), .14); } .cims-kpi-icon--neutral { color: var(--cims-color-text-muted); background: rgba(var(--cims-color-primary-rgb), .06); } .cims-kpi-card .cims-kpi-label { font-size: var(--cims-text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--cims-color-text-muted); font-weight: 600; } .cims-kpi-card .cims-kpi-value { font-size: var(--cims-text-xl); font-weight: 700; line-height: 1.2; } /* Dashboard hero greeting */ .cims-dashboard-hero h1 { font-size: var(--cims-text-xl); font-weight: 800; letter-spacing: -.02em; } .cims-dashboard-greeting { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--cims-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cims-color-primary); margin-bottom: .375rem; } .cims-live-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--cims-color-success); box-shadow: 0 0 0 rgba(21, 128, 61, .5); animation: cims-pulse 2s infinite; } @keyframes cims-pulse { 0% { box-shadow: 0 0 0 0 rgba(21, 128, 61, .45); } 70% { box-shadow: 0 0 0 6px rgba(21, 128, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); } } @media (prefers-reduced-motion: reduce) { .cims-live-dot { animation: none; } } /* Dashboard chart card — fills the card's actual height instead of a fixed pixel size, so it doesn't leave a dead gap when a taller sibling card (e.g. "Getting Started") stretches the row via h-100. */ .cims-chart-container { position: relative; min-height: 280px; width: 100%; } .cims-chart-container canvas { position: absolute; inset: 0; } /* Tab navigation (module sub-views, e.g. Master Data register types) */ .nav-tabs { border-bottom-color: var(--cims-color-border); gap: .25rem; } .nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--cims-color-text-muted); font-weight: 600; font-size: var(--cims-text-sm); padding: .625rem .25rem; margin-right: 1.25rem; transition: color .12s ease-out, border-color .12s ease-out; } .nav-tabs .nav-link:hover { color: var(--cims-color-primary); border-color: transparent; } .nav-tabs .nav-link.active { color: var(--cims-color-primary); background: none; border-bottom-color: var(--cims-color-primary); } /* Pagination — used by every ->links() list page */ .pagination { --bs-pagination-color: var(--cims-color-text-muted); --bs-pagination-hover-color: var(--cims-color-primary); --bs-pagination-hover-bg: var(--cims-color-bg); --bs-pagination-active-bg: var(--cims-color-primary); --bs-pagination-active-border-color: var(--cims-color-primary); --bs-pagination-border-color: var(--cims-color-border); --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(var(--cims-color-primary-rgb), .15); gap: .1875rem; } .pagination .page-link { border-radius: var(--cims-radius-sm) !important; font-size: var(--cims-text-sm); font-weight: 500; margin: 0; } /* Dropdown menus (user menu, row action menus, "More" menus) */ .dropdown-menu { border-color: var(--cims-color-border); box-shadow: var(--cims-shadow-md); border-radius: var(--cims-radius-md); padding: .375rem; } .dropdown-item { border-radius: var(--cims-radius-sm); font-size: var(--cims-text-sm); padding: .5rem .625rem; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--cims-color-bg); } .dropdown-item.text-danger:hover, .dropdown-item.text-danger:focus { background-color: rgba(var(--cims-color-danger-rgb), .12); } /* Modals */ .modal-content { border: none; border-radius: var(--cims-radius-lg); box-shadow: var(--cims-shadow-lg); } .modal-header { border-bottom-color: var(--cims-color-border); padding: 1.25rem 1.5rem; } .modal-body { padding: 1.5rem; } .modal-footer { border-top-color: var(--cims-color-border); padding: 1rem 1.5rem; } /* Avatar initials chip (user lists) */ .cims-avatar { width: 2.25rem; height: 2.25rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; /* Runs from --primary rather than --primary-light: white 12px initials on the light end measured 3.14:1 against the configured brand colour and 3.68:1 against the shipped default, both under 1.4.3's 4.5:1 for small text (34-2 finding F4). The dark end was already 9.46:1, so only the light stop needed to move, and starting at --primary keeps the avatar visibly a gradient rather than flattening it. */ background: linear-gradient(155deg, var(--cims-color-primary), var(--cims-color-primary-dark)); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; } /* Role chip — distinct from status badges (identity, not workflow state) */ .cims-role-chip { display: inline-flex; align-items: center; font-size: var(--cims-text-xs); font-weight: 600; color: var(--cims-color-text-muted); background: var(--cims-color-bg); border: 1px solid var(--cims-color-border); padding: .1875rem .5625rem; border-radius: 999px; margin: .0625rem .25rem .0625rem 0; } /* Quick link row (dashboard "Getting Started" style panels) */ .cims-quicklink { display: flex; align-items: center; gap: var(--cims-space-3); padding: .625rem .75rem; border-radius: var(--cims-radius-sm); text-decoration: none; color: inherit; transition: background-color .12s ease-out; } .cims-quicklink:hover { background-color: var(--cims-color-bg); } .cims-quicklink:hover .cims-quicklink-title { color: var(--cims-color-primary); } .cims-quicklink-icon { width: 2.25rem; height: 2.25rem; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--cims-radius-sm); background: rgba(var(--cims-color-primary-rgb), .1); color: var(--cims-color-primary); font-size: 1.0625rem; } .cims-quicklink-title { display: block; font-weight: 600; font-size: var(--cims-text-sm); color: var(--cims-color-text); transition: color .12s ease-out; } .cims-quicklink-desc { display: block; font-size: var(--cims-text-xs); color: var(--cims-color-text-muted); margin-top: .0625rem; } .cims-quicklink-arrow { margin-left: auto; color: var(--cims-color-text-muted); font-size: .8125rem; flex: none; } /* Empty state */ .cims-empty-state { text-align: center; padding: var(--cims-space-6) var(--cims-space-3); color: var(--cims-color-text-muted); } .cims-empty-state .bi { font-size: 2rem; color: var(--cims-color-border); margin-bottom: var(--cims-space-2); display: block; } .cims-empty-state p { margin-bottom: var(--cims-space-2); } /* Filter bar — a lighter-weight panel than a full .card, since it's a utility strip (search/filter), not primary content. */ .cims-filter-bar { background: var(--cims-color-surface); border: 1px solid var(--cims-color-border); border-radius: var(--cims-radius-md); padding: var(--cims-space-3) var(--cims-space-4); box-shadow: var(--cims-shadow-sm); } .cims-filter-bar .form-label { font-size: var(--cims-text-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--cims-color-text-muted); font-weight: 600; } /* Status badges — color + text, never color alone */ .cims-status-badge { display: inline-flex; align-items: center; gap: .3125rem; font-size: var(--cims-text-xs); font-weight: 600; padding: .25rem .625rem; border-radius: 999px; white-space: nowrap; } .cims-status-badge .bi { font-size: .75rem; } .cims-status-badge--neutral { color: var(--cims-color-text-muted); background: rgba(var(--cims-color-primary-rgb), .07); } .cims-status-badge--warning { color: var(--cims-color-warning); background: rgba(var(--cims-color-warning-rgb), .14); } .cims-status-badge--success { color: var(--cims-color-success); background: rgba(var(--cims-color-success-rgb), .14); } .cims-status-badge--danger { color: var(--cims-color-danger); background: rgba(var(--cims-color-danger-rgb), .14); } .cims-status-badge--info { color: var(--cims-color-info); background: rgba(var(--cims-color-info-rgb), .14); } .card { border-color: var(--cims-color-border); } /* --- Phase 3: data-table rhythm ------------------------------------------- A 131-view ERP lives or dies on how a table reads. Three changes carry it: a header that anchors without shouting, a row rhythm loose enough to scan, and separators light enough that the DATA is the darkest thing on screen. */ .table thead th { font-size: var(--cims-text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--cims-color-text-muted); font-weight: 600; /* A solid 1px rule under the header separates it from the body far more cleanly than Bootstrap's default 2px double border. */ border-bottom: 1px solid var(--cims-color-border); /* Bootstrap paints every cell from --bs-table-bg in a rule that outranks a plain background-color here, so the token is what must be set -- otherwise a sticky header stays translucent and rows scroll through it. Surface, not the page tint: the header sits on the same plane as the card and the 1px rule below does the separating. */ --bs-table-bg: var(--cims-color-surface); background-color: var(--cims-color-surface); white-space: nowrap; padding-block: .6875rem; } /* The header stays put while a long list scrolls. Applied only inside a scroll container so it cannot stick to the viewport on a short table. */ .table-responsive .table thead th { position: sticky; top: 0; z-index: 2; } /* Hairline separators instead of Bootstrap's full-strength border: at 131 views the grid lines were competing with the values for attention. */ .table > tbody > tr > * { border-bottom-color: color-mix(in srgb, var(--cims-color-border) 65%, transparent); } .table > tbody > tr:last-child > * { border-bottom-color: transparent; } /* Row actions stay quiet until the row is engaged — an ERP list with a row of coloured buttons on every line reads as noise. Kept visible on touch and for keyboard users, where hover does not exist. */ /* Row actions are NOT dimmed until hover. That was tried and reverted on 2026-08-23: combined with Bootstrap's outline buttons (white fill on a white card) it left the primary action on every row effectively invisible, and it hides the only affordance a touch user has. They are quietened with a tint instead — see the .table .btn-outline-* rules below. */ .table > :not(caption) > * > *, .table-sm > :not(caption) > * > * { padding-block: .8125rem; /* Horizontal padding is set explicitly because Bootstrap's `.table-sm` shorthand (`padding: .25rem`) would otherwise leave 4px of breathing room on either side of every cell -- 58 of the list views use table-sm, and at full card width that reads as content jammed against the edge. Only the vertical rhythm should differ between sm and regular tables. */ padding-inline: .75rem; vertical-align: middle; } /* First and last cells align the table's content with the card's own content edge (16px card-body padding), so a column heading sits on the same vertical line as the page text above it rather than 12px inboard of it. */ .table > :not(caption) > * > *:first-child, .table-sm > :not(caption) > * > *:first-child { padding-inline-start: 1rem; } .table > :not(caption) > * > *:last-child, .table-sm > :not(caption) > * > *:last-child { padding-inline-end: 1rem; } /* A table that is the whole card body sits flush; its own cell padding then supplies the inset, so the two do not compound into a 32px gutter. */ .card-body.p-0 > .dt-container .table > :not(caption) > * > *:first-child, .card-body.p-0 > .table > :not(caption) > * > *:first-child { padding-inline-start: 1.25rem; } .card-body.p-0 > .dt-container .table > :not(caption) > * > *:last-child, .card-body.p-0 > .table > :not(caption) > * > *:last-child { padding-inline-end: 1.25rem; } .table tbody tr { transition: background-color .1s ease-out; } .table-hover > tbody > tr:hover > * { background-color: rgba(var(--cims-color-primary-rgb), .05); --bs-table-accent-bg: transparent; } /* ========================================================================== Auth screens (login / register / password reset) Split shell: a dark brand panel carrying the product story on the inline- start side, a light form panel on the inline-end. Below `lg` the brand panel is dropped entirely and replaced by a compact lockup above the form, so a phone gets the form first instead of scrolling past a marketing wall. Everything is built on the CIMS custom properties, so the white-label primary colour injected by partials/branding.blade.php and the dark theme both re-skin these screens without a single extra override. Inline-logical properties (padding-inline, inset-inline-*) are used throughout so the RTL locales served by SetLocale mirror correctly. ========================================================================== */ /* ONE CENTRED COLUMN ON ONE STAGE. This was `1.25fr / 1fr`: a brand panel beside the form. With the panel's copy removed, the larger half of the screen held a logo and a line drawing and nothing else, and the form sat off to one side of it. The drawing is now the backdrop for the whole page and the form is in the middle of it. */ .cims-auth-layout { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; padding: var(--cims-space-4); /* The stage carries what the aside used to: the ground, the wash of brand colour, and the blueprint grid below. Centred now rather than weighted to one side, because the content it sits behind is centred. */ background-color: var(--cims-sidebar-bg); background-image: radial-gradient(circle at 50% 0%, rgba(var(--cims-color-primary-rgb), .38), transparent 58%), radial-gradient(circle at 92% 94%, rgba(var(--cims-color-accent-rgb), .14), transparent 40%), linear-gradient(165deg, #0b1220 0%, #101a2e 55%, #0b1220 100%); } /* The blueprint grid, masked to a soft ellipse behind the card so it never competes with the form it sits under. */ .cims-auth-layout::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 78% 68% at 50% 44%, #000 6%, transparent 82%); -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 44%, #000 6%, transparent 82%); pointer-events: none; } /* A POOL OF LIGHT BEHIND THE CARD, instead of a picture. The bridge that stood here was line-art scaled to 1280px across: at that size the arch was wider than the screen, so what a reader saw was two curves and a rule, not a bridge. Nothing is drawn now — the depth comes from the grid above and this soft bloom of the brand colour, which cannot crop badly because it has no edges. */ .cims-auth-layout::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(ellipse 46% 40% at 50% 44%, rgba(var(--cims-color-primary-rgb), .22), transparent 70%), radial-gradient(ellipse 80% 50% at 50% 100%, rgba(var(--cims-color-primary-rgb), .10), transparent 72%); pointer-events: none; } /* --- Auth field ergonomics ------------------------------------------------ The login form is the product's only single-purpose screen, so its controls are sized for confidence rather than density: 3.125rem fields (vs the 44px accessibility floor) and a heavier label. */ .cims-auth-card .form-control, .cims-auth-card .form-select { min-height: 3.125rem; font-size: var(--cims-text-base); border-radius: var(--cims-radius-md); } .cims-auth-card .form-label { font-size: var(--cims-text-sm); font-weight: 600; color: var(--cims-color-text); margin-bottom: var(--cims-space-2); } .cims-auth-card .btn-primary { min-height: 3.125rem; font-size: var(--cims-text-base); font-weight: 600; border-radius: var(--cims-radius-md); letter-spacing: -.01em; } /* The field icon and reveal button are absolutely positioned from the top of .cims-field and centred with translateY(-50%), so `top` must equal half the input height: 3.125rem / 2 = 1.5625rem. Measured, not guessed -- the base rule's 1.5rem is calibrated for the 3rem fields used elsewhere. */ .cims-auth-card .cims-field-icon, .cims-auth-card .cims-field-action { top: 1.5625rem; } .cims-auth-card h1 { font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--cims-space-2); } /* --- Brand panel ---------------------------------------------------------- */ .cims-auth-aside { display: none; position: relative; flex-direction: column; justify-content: space-between; gap: var(--cims-space-5); padding: var(--cims-space-6); overflow: hidden; color: #fff; background-color: var(--cims-sidebar-bg); background-image: radial-gradient(circle at 10% 12%, rgba(var(--cims-color-primary-rgb), .42), transparent 44%), radial-gradient(circle at 96% 96%, rgba(var(--cims-color-accent-rgb), .16), transparent 34%), linear-gradient(155deg, #0b1220 0%, #101a2e 55%, #0b1220 100%); } @media (min-width: 992px) { .cims-auth-aside { display: flex; } } /* Faint blueprint grid — deliberate nod to the drawing sets this product manages. Masked to a soft ellipse so it never competes with the copy. */ .cims-auth-aside::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 10%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 10%, transparent 78%); pointer-events: none; } .cims-auth-aside > * { position: relative; z-index: 1; } .cims-auth-brand { display: flex; align-items: center; gap: .75rem; } .cims-auth-brand .cims-logo-mark { width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(155deg, var(--cims-color-primary-light), var(--cims-color-primary-dark)); color: #fff; font-size: 1.375rem; box-shadow: 0 6px 18px rgba(var(--cims-color-primary-rgb), .45); } .cims-auth-brand-text { display: block; color: #fff; font-weight: 700; font-size: 1.1875rem; letter-spacing: -.015em; line-height: 1.2; } /* Light variant of the lockup, used above the form on small screens. */ .cims-auth-brand--light .cims-auth-brand-text { color: var(--cims-color-text); } /* --- The drawing ---------------------------------------------------------- */ /* * What used to be here: a headline, a lede, three feature bullets and three * statistics, with the rules to lay them out. All of it was sales copy on a * screen nobody reaches until after they have bought the product — and it * published our own build (module count, architecture, capability list) on the * one page exposed to the open internet. * * The panel now carries a drawing instead, and these few rules replace roughly * a hundred. The stroke widths are vector-fixed rather than scaled, so the line * weight stays a drawing's weight at every panel size. */ .cims-auth-figure { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 0; /* lets the flex child shrink on a short viewport */ padding: var(--cims-space-4) 0; } .cims-auth-figure svg { width: 100%; max-width: 30rem; height: auto; max-height: 100%; overflow: visible; } .cims-auth-figure path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; } .cims-auth-figure-ground { stroke: rgba(255, 255, 255, .22); stroke-width: 1.5; } .cims-auth-figure-line { stroke: rgba(255, 255, 255, .3); stroke-width: 2; } .cims-auth-figure-arch { stroke: rgba(255, 255, 255, .45); stroke-width: 2.25; } .cims-auth-figure-hanger { stroke: rgba(255, 255, 255, .2); stroke-width: 1.25; } /* * The deck is the one element in the brand colour, so a client's own colour * runs through the drawing rather than sitting only behind it. `-light` because * the panel ground is near-black and a mid-tone primary disappears on it. */ .cims-auth-figure-deck { stroke: var(--cims-color-primary-light); stroke-width: 3; } .cims-auth-figure-tick { stroke: rgba(255, 255, 255, .16); stroke-width: 1.25; } /* --- Form panel ----------------------------------------------------------- */ /* The centred column: brand, card, footnote. Sits ON the stage, so it carries no ground of its own — the card below supplies the surface, which is what gives the form an edge and a shadow instead of bleeding into the viewport. */ .cims-auth-main { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--cims-space-4); width: 100%; padding: var(--cims-space-4) 0; } /* The brand, above the card and centred with it. */ .cims-auth-brand--stacked { justify-content: center; color: #fff; } .cims-auth-brand--stacked .cims-auth-brand-text { color: #fff; } .cims-auth-topbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--cims-space-3); min-height: 2.5rem; } /* The switcher sits ON THE DARK STAGE now, not on a pale panel. Styled for the old light ground it was muted grey on a near-black field — present, and unreadable. Light ink on a translucent well instead. */ /* The theme toggle, sized and coloured to sit beside the language switcher. */ .cims-auth-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: var(--cims-radius-sm); background-color: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .92); line-height: 1; } .cims-auth-theme-toggle:hover, .cims-auth-theme-toggle:focus-visible { background-color: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .34); color: #fff; } .cims-auth-topbar .dropdown > .btn { background-color: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .92); font-size: var(--cims-text-sm); font-weight: 500; border-radius: var(--cims-radius-sm); padding: .375rem .75rem; } .cims-auth-topbar .dropdown > .btn:hover, .cims-auth-topbar .dropdown > .btn:focus-visible { background-color: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .34); } /* A plain wrapper now. It used to grow to fill the form half and centre the card inside itself; .cims-auth-main does the centring for the whole column. */ .cims-auth-panel { display: flex; justify-content: center; width: 100%; } .cims-auth-card { width: 100%; max-width: 27rem; background-color: var(--cims-color-surface); border: 1px solid var(--cims-color-border); border-radius: var(--cims-radius-lg); box-shadow: var(--cims-shadow-md); padding: var(--cims-space-5); position: relative; } /* Hairline brand rule along the card's top edge — the one piece of colour on an otherwise neutral form, tying it back to the panel beside it. */ .cims-auth-card::before { content: ""; position: absolute; inset-inline: var(--cims-space-5); top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--cims-color-primary), var(--cims-color-accent)); } @media (max-width: 575.98px) { /* THE SURFACE STAYS ON A PHONE. This dropped the background, border and shadow so the form read as part of the page — correct while the page behind it was the pale page ground. The stage is dark now, and a transparent card put near-black labels and a near-black heading onto a near-black field: on a phone the whole form but its two inputs was invisible. Only the padding tightens. */ .cims-auth-card { padding: var(--cims-space-4); } } .cims-auth-mobile-brand { margin-bottom: var(--cims-space-5); } @media (min-width: 992px) { .cims-auth-mobile-brand { display: none; } } .cims-auth-card h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--cims-color-text); margin-bottom: .375rem; } .cims-auth-card .cims-auth-subtitle { color: var(--cims-color-text-muted); font-size: var(--cims-text-base); line-height: 1.55; margin-bottom: var(--cims-space-5); } .cims-auth-card .form-label { font-size: var(--cims-text-sm); font-weight: 600; color: var(--cims-color-text); margin-bottom: .375rem; } /* --- Fields --------------------------------------------------------------- */ .cims-field { position: relative; } /* Scoped to the card rather than to .cims-field, so the pages that do not use an icon-prefixed field (register, reset password) get the same control height and focus ring instead of falling back to Bootstrap's default. */ .cims-auth-card .form-control { height: 3rem; font-size: var(--cims-text-base); border-radius: var(--cims-radius-md); background-color: var(--cims-color-bg); border-color: var(--cims-color-border); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .cims-auth-card .form-control::placeholder { color: var(--cims-color-text-muted); opacity: .75; } .cims-auth-card .form-control:focus { background-color: var(--cims-color-surface); border-color: var(--cims-color-primary); box-shadow: 0 0 0 4px rgba(var(--cims-color-primary-rgb), .14); } .cims-field .form-control { padding-inline-start: 2.75rem; } /* Icon is rendered *after* the input so this sibling selector can tint it on focus without any JavaScript; it is absolutely positioned either way. */ .cims-field-icon { position: absolute; inset-inline-start: .9375rem; top: 1.5rem; transform: translateY(-50%); font-size: 1rem; line-height: 1; color: var(--cims-color-text-muted); pointer-events: none; transition: color .15s ease; } .cims-field .form-control:focus ~ .cims-field-icon { color: var(--cims-color-primary); } .cims-field .form-control.is-invalid ~ .cims-field-icon { color: var(--cims-color-danger); } /* Reveal button sits inside the field, so the input reserves room for it. */ .cims-field--action .form-control { padding-inline-end: 3rem; } /* Bootstrap's invalid glyph would collide with the reveal button. */ .cims-field--action .form-control.is-invalid { background-image: none; } .cims-field-action { position: absolute; inset-inline-end: .5rem; top: 1.5rem; transform: translateY(-50%); /* 44px minimum touch target (WCAG 2.5.8 / Apple HIG). The visual chip stays 2rem via the smaller icon and transparent background; only the hit area grows. */ width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: .375rem; background: transparent; color: var(--cims-color-text-muted); transition: color .15s ease, background-color .15s ease; } .cims-field-action:hover, .cims-field-action:focus-visible { color: var(--cims-color-text); background-color: rgba(var(--cims-color-primary-rgb), .08); } .cims-auth-hint { display: none; align-items: center; gap: .375rem; margin-top: .5rem; font-size: var(--cims-text-xs); font-weight: 500; color: var(--cims-color-warning); } .cims-auth-hint.is-visible { display: flex; } .cims-auth-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--cims-space-2) var(--cims-space-3); margin-block: var(--cims-space-3) var(--cims-space-4); } .cims-auth-options .form-check { margin: 0; min-height: auto; } .cims-auth-options .form-check-input { width: 1.0625rem; height: 1.0625rem; margin-top: .1rem; } .cims-auth-options .form-check-label { font-size: var(--cims-text-sm); color: var(--cims-color-text-muted); cursor: pointer; } .cims-auth-link { font-size: var(--cims-text-sm); font-weight: 600; color: var(--cims-color-primary); text-decoration: none; } .cims-auth-link:hover { color: var(--cims-color-primary-dark); text-decoration: underline; } /* --- Submit --------------------------------------------------------------- */ .cims-auth-card .btn-primary { height: 3rem; font-size: var(--cims-text-base); font-weight: 600; border-radius: var(--cims-radius-md); box-shadow: 0 8px 18px -8px rgba(var(--cims-color-primary-rgb), .7); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; } .cims-auth-card .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(var(--cims-color-primary-rgb), .75); } .cims-auth-card .btn-primary:active:not(:disabled) { transform: translateY(0); } .cims-auth-card .btn-primary:disabled { opacity: .75; } .cims-auth-divider { display: flex; align-items: center; gap: .75rem; margin-block: var(--cims-space-4); color: var(--cims-color-text-muted); font-size: var(--cims-text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .07em; } .cims-auth-divider::before, .cims-auth-divider::after { content: ""; flex: 1; height: 1px; background-color: var(--cims-color-border); } .cims-auth-meta { text-align: center; font-size: var(--cims-text-sm); color: var(--cims-color-text-muted); margin: 0; } /* On the dark stage, so it takes its own light ink rather than the muted grey that was calibrated for the pale form panel this used to sit in. */ .cims-auth-footnote { text-align: center; padding-top: var(--cims-space-3); color: rgba(255, 255, 255, .62); font-size: var(--cims-text-xs); position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .cims-auth-card .btn-primary, .cims-auth-card .form-control, .cims-field-icon, .cims-field-action { transition: none; } .cims-auth-card .btn-primary:hover:not(:disabled) { transform: none; } } /* ========================================================================== DataTables — search / paging / Excel-PDF-Print export on every data table ========================================================================== */ .cims-dt-toolbar .dt-buttons { display: flex; flex-wrap: wrap; gap: .375rem; } .cims-dt-toolbar .dt-buttons .btn { font-weight: 500; } /* DataTables 3.x renamed every wrapper class: `.dataTables_wrapper`, `.dataTables_filter`, `.dataTables_length`, `.dataTables_info` and `.dataTables_paginate` are 1.x names and appear nowhere in the 3.x build. Styling written against them silently does nothing, which is why these controls used to render as raw browser defaults inside an otherwise themed page. The 3.x DOM is: .dt-container > .dt-layout-row > .dt-layout-cell.dt-layout-{start|end|full} .dt-search > label + input.dt-input .dt-length > label + select.dt-input .dt-info .dt-paging > ul.pagination > li.page-item > button.page-link Keep these selectors in sync with the installed major version. */ .dt-container .dt-search { position: relative; display: flex; align-items: center; gap: var(--cims-space-2); } /* The Bootstrap 5 renderer emits an EMPTY label after the input and puts the affordance in the placeholder instead. Collapsed so it cannot introduce a stray gap in the flex row; the input keeps its own accessible name via the placeholder and aria-controls. */ .dt-container .dt-search > label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* The Bootstrap 5 renderer stamps `form-control form-control-sm` on this input (NOT `dt-input`, which is the vanilla renderer's class), so it already carries Bootstrap's theming. These rules add only what Bootstrap does not: room for the search glyph, a sensible minimum width, and the brand focus ring. */ .dt-container .dt-search input[type="search"] { /* Not --cims-color-border: 1.14:1, and this is a text input whose border is its only boundary (WCAG 1.4.11 wants 3:1). This rule OWNS the border at (0,2,2), so the general .form-control fix could not reach it -- the search box was the last field in the app still drawn with the invisible hairline. Same neutral as every other field: 3.23:1. */ border: 1px solid rgba(var(--cims-color-text-muted-rgb), .75); border-radius: var(--bs-border-radius); /* Left padding leaves room for the search glyph drawn below. */ padding: .375rem .75rem .375rem 2rem; font-size: var(--cims-text-sm); min-width: 240px; margin: 0; background-color: var(--cims-color-surface); color: var(--cims-color-text); } .dt-container .dt-search input[type="search"]::placeholder { color: var(--cims-color-text-muted); } .dt-container .dt-search input[type="search"]:focus { outline: none; border-color: var(--cims-color-primary-light); box-shadow: 0 0 0 3px rgba(var(--cims-color-primary-rgb), .15); } /* Search glyph as an inline SVG on the input rather than a ::before with an icon-font codepoint. The bundler rewrites a CSS escape like "\f52a" into the JS form "\uf52a", which is not valid CSS, so the character silently resolved to empty. An SVG data URI has no escape to mangle and no dependency on bootstrap-icons having loaded. */ .dt-container .dt-search input[type="search"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b6478' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5 14 14'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left .625rem center; background-size: 14px 14px; } /* Native clear affordance overlaps nothing, but Chrome renders it dark on a dark surface — hide it and let Escape / clearing the field do the work. */ .dt-container .dt-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } :root[data-theme="dark"] .dt-container .dt-search input[type="search"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2393a0bf' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5 14 14'/%3E%3C/svg%3E"); } .dt-container .dt-length { display: flex; align-items: center; gap: var(--cims-space-2); color: var(--cims-color-text-muted); font-size: var(--cims-text-sm); } .dt-container .dt-length select { border: 1px solid var(--cims-color-border); border-radius: var(--bs-border-radius); padding: .25rem 1.75rem .25rem .5rem; font-size: var(--cims-text-sm); background-color: var(--cims-color-surface); color: var(--cims-color-text); width: auto; } .dt-container .dt-info { color: var(--cims-color-text-muted); font-size: var(--cims-text-sm); padding-top: 0; } .dt-container .dt-paging .page-link { border-radius: var(--cims-radius-sm); font-size: var(--cims-text-sm); font-weight: 500; margin: 0 .125rem; border-color: var(--cims-color-border); color: var(--cims-color-text-muted); min-width: 2rem; text-align: center; } .dt-container .dt-paging .page-link:hover { background-color: var(--cims-color-bg); color: var(--cims-color-text); } .dt-container .dt-paging .page-item.active .page-link { background-color: var(--cims-color-primary); border-color: var(--cims-color-primary); color: #fff; } .dt-container .dt-paging .page-item.disabled .page-link { color: var(--cims-color-text-muted); opacity: .45; } /* Breathing room between the toolbar rows and the table itself. */ .dt-container .dt-layout-row { align-items: center; margin-bottom: var(--cims-space-3); } .dt-container .dt-layout-row:last-child { margin-bottom: 0; margin-top: var(--cims-space-3); } .dt-container .dt-empty { color: var(--cims-color-text-muted); text-align: center; padding: var(--cims-space-5) var(--cims-space-3); } /* Digits in a data table must line up column-wise. Proportional figures make quantities, rates and amounts ragged and hard to compare down a column. Applied to all cells rather than a per-column class: tabular-nums only affects digits, so text columns are unchanged. */ .table > :not(caption) > * > * { font-variant-numeric: tabular-nums; } table.dataTable > thead > tr > th { position: relative; } table.dataTable > thead > tr > th.dt-orderable-asc:hover, table.dataTable > thead > tr > th.dt-orderable-desc:hover { color: var(--cims-color-primary); } /* ========================================================================== Phase 6 — dark-theme parity for the Phase 3/4 changes. Everything above is token-driven and inherits automatically; these are the places where a light-mode value does not simply invert. ========================================================================== */ /* A sticky header must be opaque or rows scroll through it. --cims-color-surface is already opaque in both themes, but the sticky header also needs to sit on the CARD surface in dark mode, which differs from the page ground. */ :root[data-theme="dark"] .table thead th { --bs-table-bg: var(--cims-color-surface); background-color: var(--cims-color-surface); } /* Hairline separators computed from a dark border token come out too faint to read as a grid at all; lift them slightly rather than reuse the 65% mix. */ :root[data-theme="dark"] .table > tbody > tr > * { border-bottom-color: color-mix(in srgb, var(--cims-color-border) 85%, transparent); } /* The hover tint is a lightening on dark, not the same low-alpha wash: at .05 over #141c2e the row barely moves. */ :root[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(var(--cims-color-primary-rgb), .1); } /* Bootstrap's .btn-outline-secondary hover fill uses the page ground, which on dark is darker than the surface it sits on — inverting the intended direction of the state change. */ :root[data-theme="dark"] .btn-outline-secondary { --bs-btn-hover-bg: rgba(255, 255, 255, .06); } /* Card and modal edges need more than a 1px border to separate from the page on a dark ground, where shadows do almost no work. */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .modal-content { border-color: var(--cims-color-border); background-color: var(--cims-color-surface); } /* The auth card's brand rule is the one gradient in the product; on dark it needs the lifted primary or it reads as a muddy stripe. */ :root[data-theme="dark"] .cims-auth-card { background-color: var(--cims-color-surface); border-color: var(--cims-color-border); } /* NO GROUND OF ITS OWN, in either theme. This painted the near-black page colour onto .cims-auth-main so the card stayed elevated above it — right while that element was the pale form half of a split screen. It is now the centred column standing ON the stage, so an opaque ground here covered the whole backdrop: in dark mode the drawing was painted and then hidden, which is why it showed in light and vanished in dark on identical markup. The card keeps its own surface (above), which is what elevates it. */ /* ========================================================================== Row action buttons Bootstrap's .btn-outline-* is a transparent fill with a coloured border. On a white card that reads as a white button — the action on every row was the least visible thing in it. These give each variant a soft tint of its own colour: visible at a glance, still quiet enough that 10 rows of them do not compete with the data. Scoped to table cells so page-level and modal buttons keep the standard Bootstrap treatment. ========================================================================== */ .table .btn-outline-primary, .table .btn-outline-secondary, .table .btn-outline-danger { --bs-btn-bg: rgba(var(--cims-color-primary-rgb), .09); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; font-weight: 500; } .table .btn-outline-primary { --bs-btn-color: var(--cims-color-primary); --bs-btn-bg: rgba(var(--cims-color-primary-rgb), .1); --bs-btn-hover-bg: rgba(var(--cims-color-primary-rgb), .18); --bs-btn-hover-color: var(--cims-color-primary-dark); --bs-btn-active-bg: rgba(var(--cims-color-primary-rgb), .24); --bs-btn-active-color: var(--cims-color-primary-dark); } .table .btn-outline-secondary { --bs-btn-color: var(--cims-color-text); --bs-btn-bg: rgba(var(--cims-color-text-muted-rgb, 91, 100, 120), .1); --bs-btn-hover-bg: rgba(var(--cims-color-text-muted-rgb, 91, 100, 120), .18); --bs-btn-hover-color: var(--cims-color-text); --bs-btn-active-bg: rgba(var(--cims-color-text-muted-rgb, 91, 100, 120), .24); --bs-btn-active-color: var(--cims-color-text); } .table .btn-outline-danger { --bs-btn-color: var(--cims-color-danger); --bs-btn-bg: rgba(var(--cims-color-danger-rgb), .1); --bs-btn-hover-bg: rgba(var(--cims-color-danger-rgb), .18); --bs-btn-hover-color: var(--cims-color-danger); --bs-btn-active-bg: rgba(var(--cims-color-danger-rgb), .24); --bs-btn-active-color: #fff; } /* Buttons sitting side by side in an actions cell get real separation rather than Bootstrap's shared-edge .btn-group seam, which looked wrong once the borders were gone. */ .table td .btn + .btn, .table td form + .btn, .table td .btn + form { margin-inline-start: .25rem; } .table td .btn-group > .btn { border-radius: var(--cims-radius-sm) !important; margin-inline-start: .25rem; } .table td .btn-group > .btn:first-child { margin-inline-start: 0; } /* Dark mode: a 10% tint of the lifted primary is too faint on #141c2e, and the neutral tint has to lighten rather than darken. */ :root[data-theme="dark"] .table .btn-outline-primary { --bs-btn-bg: rgba(var(--cims-color-primary-rgb), .16); --bs-btn-hover-bg: rgba(var(--cims-color-primary-rgb), .26); } :root[data-theme="dark"] .table .btn-outline-secondary { --bs-btn-bg: rgba(255, 255, 255, .08); --bs-btn-hover-bg: rgba(255, 255, 255, .14); --bs-btn-color: var(--cims-color-text); --bs-btn-hover-color: var(--cims-color-text); } :root[data-theme="dark"] .table .btn-outline-danger { --bs-btn-bg: rgba(var(--cims-color-danger-rgb), .18); --bs-btn-hover-bg: rgba(var(--cims-color-danger-rgb), .28); } /* --- Profile identity card ------------------------------------------------ */ .cims-profile-avatar { width: 5rem; height: 5rem; margin-inline: auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 600; color: #fff; background: linear-gradient(155deg, var(--cims-color-primary-light), var(--cims-color-primary-dark)); box-shadow: 0 6px 18px rgba(var(--cims-color-primary-rgb), .35); letter-spacing: -.02em; } /* The meta list is a definition list in spirit — label left, value right — so the rows are flush with the card edge and separated by hairlines rather than boxed like a nav list. */ .cims-profile-meta .list-group-item { background-color: transparent; border-color: var(--cims-color-border); padding-block: .6875rem; font-size: var(--cims-text-sm); } .cims-profile-meta .list-group-item:last-child { border-bottom: 0; } .cims-profile-tip .bi { color: var(--cims-color-primary); } /* The summary column follows the forms on a long page rather than scrolling away — the account being edited should stay visible while the user works through three stacked forms. Only above lg, where the two columns actually sit side by side; below that it is a normal stacked card. */ @media (min-width: 992px) { .cims-profile-aside { position: sticky; top: calc(var(--cims-navbar-height) + var(--cims-space-3)); } } /* Danger zone reads as a warning without shouting: a tinted surface and a left rule rather than a red header bar, which at card width was the loudest thing on a settings page whose primary job is routine edits. */ .cims-danger-zone { border-color: rgba(var(--cims-color-danger-rgb), .3); background-color: rgba(var(--cims-color-danger-rgb), .03); } .cims-danger-zone .card-header { background-color: transparent; border-bottom-color: rgba(var(--cims-color-danger-rgb), .2); } /* Section headers carry an icon chip so the three stacked cards are distinguishable at a glance when scanning rather than reading. */ .cims-section-icon { width: 1.75rem; height: 1.75rem; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; font-size: .875rem; background-color: rgba(var(--cims-color-primary-rgb), .1); color: var(--cims-color-primary); flex: none; } .cims-section-icon--danger { background-color: rgba(var(--cims-color-danger-rgb), .1); color: var(--cims-color-danger); } /* --------------------------------------------------------------------------- Searchable select (resources/js/searchable-select.js) The real is still in the DOM underneath, hidden with .visually-hidden, still submitting. These rules only dress what sits in front of it. --------------------------------------------------------------------------- */ .cims-select-search { position: relative; } /* A