/* ═══════════════════════════════════════════════════════════════════════════ Hayley Dexis Asset Manager — site.css Brand: Hayley Dexis (Hayley Group Limited) Guide: HAYLEY DEXIS UI Design Guide v1.0 ═══════════════════════════════════════════════════════════════════════════ */ /* ── Self-hosted display font ─────────────────────────────────────────────── */ /* Bebas Neue ships at weight 400 only — any `font-weight: 700` elsewhere causes the browser to *synthesize* bold, which renders thicker on Windows than mac/Linux and diverges from the source designs. Always use 400 with this font. */ @font-face { font-family: 'Bebas Neue'; src: url('../fonts/BebasNeue-Regular.woff2') format('woff2'), url('../fonts/BebasNeue-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* ── CSS Custom Properties — Brand Design Tokens ─────────────────────────── */ :root { /* Primary brand */ --hd-red: #E83E30; --hd-red-dark: #C42E22; --hd-red-light: #F04E42; /* Dark palette */ --hd-dark: #1D1D1B; --hd-dark-mid: #232323; --hd-dark-light: #494949; /* Neutrals */ --hd-white: #FFFFFF; --hd-off-white: #F9F9F9; --hd-bg-section: #F4F4F4; --hd-border: #D8D8D8; --hd-border-light: #EBEBEB; /* Text */ --hd-slate: #494949; --hd-slate-light: #6B6B6B; /* Semantic */ --hd-success: #2D9E4F; --hd-warning: #494949; --hd-error: #E83E30; --hd-info: #1D1D1B; /* Typography */ --hd-font-display: 'Bebas Neue', 'Arial Narrow', sans-serif; --hd-font-body: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Semantic text tokens — separate from the dark-palette tokens above so theme switching can flip TEXT color without flipping ACCENT-SURFACE color. The original --hd-dark / --hd-dark-mid / --hd-dark-light are used for both purposes throughout this file (table headers, KPI tile stripes, dark badges); keeping them stable in dark mode and switching only --hd-text-* avoids the "white-text on white-surface" trap. */ --hd-text-primary: var(--hd-dark); --hd-text-secondary: var(--hd-slate); --hd-text-muted: var(--hd-slate-light); /* --hd-fg-1/2/3 aliases — referenced in 30+ places in the lower section of this file (col-* / hd-* component selectors) with a hardcoded fallback hex. These were never defined as variables, so until now they always resolved to the literal fallback (dark text), making those selectors invisible in dark mode. Aliasing them to the new text-* tokens makes them theme-aware automatically — kept verbatim with the same fallbacks so the existing selectors continue to work if any rule order issue prevents resolution. */ --hd-fg-1: var(--hd-text-primary); --hd-fg-2: var(--hd-text-secondary); --hd-fg-3: var(--hd-text-muted); /* Brand amber — promoted from a literal that recurs 6+ times across views. --hd-amber-dark is the deep brown used historically on collection badges; in dark mode --hd-tree-collection-fg flips to bright amber for legibility. */ --hd-amber: #E8A120; --hd-amber-dark: #7B4D00; /* KPI icon-tile backgrounds — replace the inline rgba() literals stamped by _KpiCard.cshtml. Phase B1 swaps to .kpi-icon--* classes that reference these tokens; dark-theme block below brightens the tints so the icon stays visible against a dark surface. */ --hd-kpi-bg-red: rgba(232, 62, 48, 0.10); --hd-kpi-bg-warn: rgba(232, 161, 32, 0.12); --hd-kpi-bg-success: rgba( 45, 158, 79, 0.10); --hd-kpi-bg-default: rgba( 29, 29, 27, 0.08); /* Status pill surfaces — used by Customers tree status pills and any other Active/Deleted indicator. Pastel light + readable dark; dark-theme block below flips to dim variants so the pill stays legible. */ --hd-status-active-bg: #E8F5EA; --hd-status-active-fg: #1C6132; --hd-status-deleted-bg: #FDECEC; --hd-status-deleted-fg: var(--hd-red-dark); /* Tree node-type accent foregrounds — used by tree-node-badge-* and tree-type-tile-* (Customers/Index). Light: deep brand hues; dark: brighter tints to read against the dark page surface. */ --hd-tree-collection-fg: var(--hd-amber-dark); --hd-tree-site-fg: #2E5D8C; /* Soft accent surfaces — used by reports nav active state and any muted-tinted surface. The -border-soft is a slightly stronger tint for borders only. */ --hd-red-bg-soft: rgba(232, 62, 48, 0.08); --hd-red-border-soft: rgba(232, 62, 48, 0.25); --hd-amber-bg-soft: rgba(232, 161, 32, 0.15); --hd-red-surface: rgba(232, 62, 48, 0.10); } /* ── Dark theme — semantic-token overrides ──────────────────────────────────── Activated by [data-bs-theme="dark"] on (set by theme-toggle.js from localStorage on first paint). The split is deliberate: • PAGE / CARD / SECTION surfaces flip (--hd-off-white, --hd-white, --hd-bg-section) — pages and cards become dark. • TEXT colors flip via the new --hd-text-* tokens — body / headings become light. • The DARK-PALETTE tokens (--hd-dark, --hd-dark-mid, --hd-dark-light) intentionally do NOT flip — they're used for accent surfaces (table headers, KPI stripes, dark badges) that must stay dark in BOTH themes to preserve the brand's industrial contrast. • Brand red (--hd-red) is the accent on both themes per the HD guide. • The navbar (.navbar-dark.bg-dark) stays dark in both themes by design. Hardcoded-hex audit spawned separately — see chip in session timeline. */ [data-bs-theme="dark"] { /* Surfaces flip — page matches card bg (#212529); --hd-white kept slightly darker for custom .bg-light-like surfaces */ --hd-white: #1F1F1D; --hd-off-white: #212529; /* match Bootstrap card bg (rgb(33,37,41)) */ --hd-bg-section: #1A1A18; /* Borders: light grey → dim grey on dark */ --hd-border: #3A3A38; --hd-border-light: #2A2A28; /* Text tokens flip light — three tiers for hierarchy */ --hd-text-primary: #F2F2F0; --hd-text-secondary: #C8C8C6; --hd-text-muted: #9A9A98; /* Slate is used almost exclusively as a text colour throughout the file (29 of 30 occurrences) — flipping it light keeps existing selectors working without a rename pass. The 1-2 background uses are addressed by explicit overrides below. */ --hd-slate: #C8C8C6; --hd-slate-light: #9A9A98; /* KPI icon-tile backgrounds — brightened on dark so the SVG icon stays visible against the dark page surface. Brand and accent foregrounds (red/amber/success) keep their literal hue because they're chosen to read on both themes; only the surrounding tint changes. */ --hd-kpi-bg-red: rgba(232, 62, 48, 0.18); --hd-kpi-bg-warn: rgba(232, 161, 32, 0.20); --hd-kpi-bg-success: rgba( 45, 158, 79, 0.18); --hd-kpi-bg-default: rgba(255, 255, 255, 0.06); /* Status pill surfaces flip to dim variants — same colour family, dark enough to read on the dark page. Mirrors the explicit overrides previously kept inline in Customers/Index.cshtml. */ --hd-status-active-bg: #14361F; --hd-status-active-fg: #A8E0B5; --hd-status-deleted-bg: #3A1414; --hd-status-deleted-fg: #F2A8A2; /* Tree node-type foregrounds brighten on dark so the navy/brown tints used in light mode (which would disappear on a dark page) read clearly. */ --hd-tree-collection-fg: #E8A120; --hd-tree-site-fg: #6FA8DC; /* Soft accent surfaces brighten on dark so the tinted accent stays perceptible against the dark page bg. */ --hd-red-bg-soft: rgba(232, 62, 48, 0.18); --hd-red-border-soft: rgba(232, 62, 48, 0.40); --hd-amber-bg-soft: rgba(232, 161, 32, 0.22); --hd-red-surface: rgba(232, 62, 48, 0.20); } /* ── Dark theme — explicit element overrides ────────────────────────────────── Spots where the variable-flip approach can't reach: hardcoded hex values in alerts and a handful of legacy surfaces. Kept compact so the audit pass can replace them with proper tokens later. */ [data-bs-theme="dark"] .alert-success { background: #14361F; color: #A8E0B5; } [data-bs-theme="dark"] .alert-warning { background: #3A2E08; color: #F1D27A; border-left-color: #B07A1F; } [data-bs-theme="dark"] .alert-danger { background: #3A1414; color: #F2A8A2; } [data-bs-theme="dark"] .alert-info { background: #1F1F1D; color: var(--hd-text-primary); } /* Dashboard / KPI day-tiles — pastel backgrounds replaced with darker variants so the colored text remains readable on a dark page. */ [data-bs-theme="dark"] .dash-day-tile.critical, [data-bs-theme="dark"] .dash-bucket.critical { background: #3A1414; border-color: #5A1F1F; } [data-bs-theme="dark"] .dash-day-tile.warn, [data-bs-theme="dark"] .dash-bucket.warn { background: #3A2E08; border-color: #5A4612; color: #F1D27A; } [data-bs-theme="dark"] .hd-sev-critical { background: #3A1414; color: #F2A8A2; } [data-bs-theme="dark"] .hd-sev-warning { background: #3A2E08; color: #F1D27A; } /* KPI footer in light mode uses rgba(0,0,0,.02) — flips to a faint white tint on dark for the same subtle "footer band" effect. */ [data-bs-theme="dark"] .kpi-footer { background: rgba(255,255,255,0.04); } /* (KPI icon-stroke workaround removed in Phase B2: _KpiCard.cshtml + dashboard widgets now use `.kpi-icon` with `currentColor` driven by `.kpi-icon--` classes, so the stroke attribute is no longer hardcoded.) */ /* Collections / Sections — zebra striping uses a 3% red tint in light mode; on dark mode the red on near-black reads as harsh. Swap both the zebra stripe AND the hover state to a faint white tint for the same rhythm without the colour clash. */ [data-bs-theme="dark"] .col-asset-row:nth-child(odd) { background: rgba(255,255,255,0.04); } [data-bs-theme="dark"] .col-asset-row:hover { background: rgba(255,255,255,0.06); } /* MyCallouts / OnSite / Dashboard widget — shared callout summary card chrome. The card body is clickable (data-details-url is wired by JS on each page) so it gets a subtle hover lift. Inner site/collection links inherit the muted underline-on-hover treatment from .callout-card-link. */ .callout-card { transition: box-shadow 0.15s, transform 0.15s; cursor: pointer; } .callout-card:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.15) !important; transform: translateY(-1px); } .callout-card-link { text-decoration: none; } .callout-card-link:hover { text-decoration: underline; color: var(--hd-red) !important; } /* MyCallouts / OnSite — site & collection name links use Bootstrap's `text-dark` utility (hardcoded #212529) which is unreadable on the dark page. Scoped override only inside .callout-card so we don't fight every `text-dark` use on the site. */ [data-bs-theme="dark"] .callout-card .text-dark, [data-bs-theme="dark"] .callout-card a.text-dark { color: var(--hd-text-primary) !important; } /* MyCallouts / OnSite cards — prominent "next action" date line. Holds either the ScheduledDate (engineer's confirmed visit) or, when unscheduled, the TargetDate (SLA deadline). Sits between the title row and the muted sub- meta line so the engineer's eye lands on it first. Brand red mirrors the accent already used by `.col-asset-name` on the Collection Dashboard, so the visual language stays consistent. */ .callout-card-primary-date { font-weight: 600; font-size: 1rem; color: var(--hd-red); margin-bottom: 2px; } /* Bootstrap utility classes .bg-white and .bg-light are LITERAL hex colours (Bootstrap intentionally does not switch them with data-bs-theme) — used on a few card-headers and hint panels. Override here so they pick up the dark surface in dark mode. The .bg-light hint panel in Settings → AI Features (`Views/Settings/_TabAiFeatures.cshtml:120`) is the most visible place this matters. */ [data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .bg-light { background-color: var(--hd-white) !important; color: var(--hd-text-primary); } /* (KPI value-colour workarounds removed in Phase B2: _KpiCard.cshtml + dashboard widgets now emit `.kpi-value--` classes that resolve through Phase A tokens, so no inline `style="color:..."` to defeat.) */ /* (Customers tree-view dark mirrors removed in Phase B2: rules are owned by wwwroot/css/customers-tree.css — light values use Phase A tokens (--hd-status-*, --hd-tree-collection-fg) that auto-flip in dark mode, plus two surviving overrides (tree-*-site → #6FA8DC, tree-contact-initial bg bump) that the page-scoped file carries directly. Some rules were genuine no-ops because the corresponding light rules already use auto-flipping tokens like var(--hd-text-primary) / var(--hd-white).) */ /* Theme picker now lives inside the user dropdown (see _Layout.cshtml) — two plain dropdown-item buttons with the Bootstrap-default look, so no extra styling is needed here. The previous standalone navbar button + sun/moon icon-swap CSS was removed in the same change. */ /* ── Global Reset & Base ──────────────────────────────────────────────────── */ body { font-family: var(--hd-font-body); background: var(--hd-off-white); color: var(--hd-text-primary); font-size: 15px; line-height: 1.6; } /* Report designer pages (`Views/Reports/Designer.cshtml`, `Views/ReportTemplate/JobSheet.cshtml`) use `_ReportingLayout` which does NOT load this stylesheet — so everything below can assume the main app pages only. The former reporting-surface scoping/overrides have been removed; see reporting-page.css for the minimal chrome those pages need. */ /* ══════════════════════════════════════════════════════════════════════════ NAVBAR — Hayley Dexis top-bar ══════════════════════════════════════════════════════════════════════════ */ .navbar { border-bottom: 3px solid var(--hd-red) !important; box-shadow: 0 2px 12px rgba(0,0,0,.35); } /* Brand lockup */ .navbar-brand { font-family: var(--hd-font-display) !important; font-size: 22px !important; font-weight: 400 !important; /* another rule sets 700 site-wide — match !important of siblings */ letter-spacing: 2px; text-transform: uppercase; line-height: 1.1; padding-top: 0.4rem; padding-bottom: 0.4rem; } .navbar-brand-icon { height: 36px; width: auto; margin-right: 12px; flex-shrink: 0; } .navbar-brand .brand-sub { display: block; font-family: var(--hd-font-body); font-size: 9px; letter-spacing: 3px; color: rgba(255,255,255,.45); text-transform: uppercase; font-weight: 600; line-height: 1.2; margin-top: 1px; } /* Brand DEXIS accent — the red word in the HAYLEY DEXIS lockup. Applied to the inner inside .navbar-brand and on Login / AccessDenied / the reporting layout's brand row. Replaces hardcoded inline `style="color:#E83E30"` so the brand red can be retuned from one place. */ .brand-dexis-accent { color: var(--hd-red); } /* Nav links — body font, uppercase, semibold for readability at small size */ .navbar-dark .navbar-nav .nav-link { font-family: var(--hd-font-body); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.65); padding: 0.75rem 1rem; border-bottom: 3px solid transparent; margin-bottom: -3px; transition: color .2s, border-color .2s; } .navbar-dark .navbar-nav .nav-link:hover { /* Same fix as the .active sibling rule below — navbar stays dark in both themes, so var(--hd-white) flips to near-black and makes hover text invisible. Literal #fff keeps the hover always-readable. */ color: #fff; border-bottom-color: var(--hd-red); } .navbar-dark .navbar-nav .nav-link.active { /* The navbar is .bg-dark in BOTH themes by design (see the dark-theme block at the top of this file). Active text must therefore stay literal white — using var(--hd-white) flips to a near-black colour in dark mode and the active link becomes invisible against the dark navbar. */ color: #fff !important; border-bottom-color: var(--hd-red); } /* Dropdown menus — dark mid background */ .dropdown-menu-dark { background-color: var(--hd-dark-mid) !important; border: 1px solid rgba(255,255,255,.08); } .dropdown-menu-dark .dropdown-item { font-family: var(--hd-font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255,255,255,.65); } .dropdown-menu-dark .dropdown-item:hover, .dropdown-menu-dark .dropdown-item:focus { background-color: rgba(232,62,48,.12); /* .dropdown-menu-dark stays dark in BOTH themes by design — using var(--hd-white) flipped to near-black in dark mode, making hover text invisible. Same fix as the .navbar-dark .nav-link:hover sibling. */ color: #fff; } .dropdown-menu-dark .dropdown-item.active { background-color: var(--hd-red); color: #fff; /* same reason as :hover above — never flip on a dark menu */ } .dropdown-menu-dark .dropdown-divider { border-color: rgba(255,255,255,.1); } /* Callout badge */ .navbar .badge.bg-danger { background-color: var(--hd-red) !important; font-family: var(--hd-font-body); font-size: 10px; letter-spacing: 0.5px; } /* ══════════════════════════════════════════════════════════════════════════ CARDS — Red top accent, industrial corners ══════════════════════════════════════════════════════════════════════════ */ .card { border-radius: 4px; border: 1px solid var(--hd-border); overflow: hidden; position: relative; } /* Cards flat at rest — shadow only on hover per brand guide */ .card.shadow-sm { box-shadow: none !important; } .card.shadow-sm:hover { box-shadow: 0 6px 24px rgba(29,29,27,.12) !important; transform: translateY(-2px); } /* Suppress the hover lift while any Bootstrap modal is open — a non-none transform on the card creates a new containing block for its position:fixed descendants (per CSS spec), which re-anchors the modal-dialog & backdrop to the card instead of the viewport. The result was severe flicker as the mouse hovered a card behind the backdrop. See /Callouts/Details dispute modal. */ body.modal-open .card.shadow-sm:hover { transform: none; box-shadow: none !important; } /* Subtle top accent — light border at rest, red on hover for visual calm. Pages with many cards (dashboards, edit views) stay clean. */ .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hd-border); z-index: 1; transition: background .2s ease; } .card:hover::before { background: var(--hd-red); } .card-header { border-bottom: 1px solid var(--hd-border-light); font-family: var(--hd-font-display); font-size: 18px; font-weight: 400; /* Bebas Neue is 400-only — avoid synthesized bold */ letter-spacing: 1px; text-transform: uppercase; color: var(--hd-text-primary); padding-top: calc(0.75rem + 4px); /* account for red accent */ } .card-body { padding-top: calc(1rem + 4px) !important; /* account for red accent — !important to override Bootstrap p-* utilities */ } .card-header + .card-body { padding-top: 1rem !important; /* normal when header present */ } /* ══════════════════════════════════════════════════════════════════════════ BOOTSTRAP TABLE OVERRIDES ══════════════════════════════════════════════════════════════════════════ */ .table th { font-family: var(--hd-font-body); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,.7); font-weight: 700; background: var(--hd-dark); white-space: nowrap; padding: 12px 16px; } .table th:first-child { box-shadow: inset 4px 0 0 0 var(--hd-red); } .table tbody tr { border-bottom: 1px solid var(--hd-border-light); transition: background .1s; } .table tbody tr:hover { background: rgba(232,62,48,.04); } .table td { color: var(--hd-slate); padding: 12px 16px; vertical-align: middle; } .table td strong { color: var(--hd-text-primary); font-weight: 600; } /* ══════════════════════════════════════════════════════════════════════════ NAV TABS — Brand-styled tab navigation ══════════════════════════════════════════════════════════════════════════ */ .nav-tabs { border-bottom: 2px solid var(--hd-border); } .nav-tabs .nav-link { font-family: var(--hd-font-body); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--hd-slate-light); border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 12px 20px; transition: color .15s; } .nav-tabs .nav-link:hover:not(.active) { color: var(--hd-text-primary); border-color: transparent; } .nav-tabs .nav-link.active { font-weight: 700; color: var(--hd-red) !important; border-bottom-color: var(--hd-red) !important; background: transparent; } /* ══════════════════════════════════════════════════════════════════════════ BADGES — Display font, uppercase, brand variants ══════════════════════════════════════════════════════════════════════════ */ .badge { font-family: var(--hd-font-body); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; border-radius: 2px; } /* Override Bootstrap badge colours to brand palette — explicit white text because !important backgrounds strip Bootstrap's automatic text pairing */ .badge.bg-primary { background-color: var(--hd-red) !important; color: #fff !important; } .badge.bg-danger { background-color: var(--hd-red) !important; color: #fff !important; } .badge.bg-success { background-color: var(--hd-success) !important; color: #fff !important; } .badge.bg-warning { background-color: var(--hd-warning) !important; color: #fff !important; } .badge.bg-info { background-color: var(--hd-dark) !important; color: #fff !important; } .badge.bg-dark { background-color: var(--hd-dark) !important; color: #fff !important; } .badge.bg-secondary { background-color: var(--hd-dark-light) !important; color: #fff !important; } /* Bootstrap text utility overrides — match brand warning to mid grey */ .text-warning { color: var(--hd-warning) !important; } /* Bootstrap "primary" utility overrides — Bootstrap's blue default leaks through on non-badge elements (borders, backgrounds, text). Force brand red everywhere so any stray `bg-primary` / `border-primary` / `text-primary` in views stays on-brand. */ .bg-primary { background-color: var(--hd-red) !important; color: #fff !important; } .border-primary { border-color: var(--hd-red) !important; } .text-primary { color: var(--hd-red) !important; } /* Bootstrap "info" utility overrides — Bootstrap's cyan default (#0dcaf0) shows through on `border-info` and `btn-outline-info`, which are otherwise unscoped. Pin them to the brand's neutral dark so any stray "info" utility stays on-brand. */ .border-info { border-color: var(--hd-dark) !important; } .btn-outline-info { border-color: var(--hd-dark); color: var(--hd-dark); } .btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active { background-color: var(--hd-dark); border-color: var(--hd-dark); color: #fff; } /* Soft-deleted admin rows — muted + strikethrough. Applied via the shared adminGridRowPrepared() helper, which adds the class on rows whose data carries a DeletedAt / Deleted / IsDeleted marker. Kept here (not in each admin view) so the six admin grids don't each repeat the same two rules. */ .dx-datagrid .dx-data-row.admin-row-deleted > td { color: #8a8a8a; text-decoration: line-through; } .dx-datagrid .dx-data-row.admin-row-deleted .dx-link { text-decoration: line-through; } /* ══════════════════════════════════════════════════════════════════════════ BREADCRUMBS — Brand styling ══════════════════════════════════════════════════════════════════════════ */ .breadcrumb { font-size: 12px; background: transparent; padding: 0; margin-bottom: 0.5rem; } /* Keep the breadcrumb trail visible when the user scrolls deep into a long edit / dashboard page. Falls back gracefully on browsers without sticky support (the crumb simply scrolls with the page as before). */ .breadcrumb-sticky { position: sticky; top: 0; /* Below Bootstrap's dropdown layer (1000) so the navbar's ADMIN / user menus aren't clipped when they drop past the breadcrumb. */ z-index: 100; background: var(--hd-white); padding: 0.4rem 0 0.25rem; margin-left: -0.75rem; margin-right: -0.75rem; padding-left: 0.75rem; padding-right: 0.75rem; border-bottom: 1px solid var(--hd-border); } .breadcrumb-item a { color: var(--hd-slate-light); text-decoration: none; font-weight: 500; } .breadcrumb-item a:hover { color: var(--hd-red); } .breadcrumb-item.active { color: var(--hd-text-primary); font-weight: 600; } .breadcrumb-item + .breadcrumb-item::before { color: var(--hd-border); } /* ══════════════════════════════════════════════════════════════════════════ ALERTS — Left-border style per brand guide ══════════════════════════════════════════════════════════════════════════ */ .alert { border-radius: 2px; border: none; border-left: 4px solid; font-size: 13px; } .alert-success { background: #E8F5EA; border-left-color: var(--hd-success); color: #1C6132; } .alert-warning { background: #FEF3CD; border-left-color: #E8A120; color: #7B4D00; } .alert-danger { background: #FDECEC; border-left-color: var(--hd-red); color: var(--hd-red-dark); } .alert-info { background: #EBEBEB; border-left-color: var(--hd-text-primary); color: var(--hd-text-primary); } /* Alert auto-show */ .alert:empty { display: none; } /* ══════════════════════════════════════════════════════════════════════════ MODAL — stable header layout ══════════════════════════════════════════════════════════════════════════ The close button's focus-ring expansion on hover was pushing the flex modal-header just enough to re-wrap medium-length titles across two lines, causing a "jumping" reflow loop as the cursor moved in and out of the title area. Pinning the close button's size and letting the title own the flex growth stops the oscillation. */ .modal-title { flex: 1 1 auto; min-width: 0; } .modal-header .btn-close { flex: 0 0 auto; } /* ══════════════════════════════════════════════════════════════════════════ AI Dispatch — recommendation card fade-in ══════════════════════════════════════════════════════════════════════════ The card starts with a spinner + "Finding best engineer" status, swaps to real content when the AJAX response lands. A short fade makes the transition feel deliberate rather than an abrupt pop. Kept subtle (180ms) so it doesn't delay the interaction — the point is to signal "AI just finished thinking", not to showcase the animation. */ .recommended-fade-in { animation: recommendedFadeIn 180ms ease-out; } @keyframes recommendedFadeIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } } /* ══════════════════════════════════════════════════════════════════════════ FORM INPUTS — Brand styling ══════════════════════════════════════════════════════════════════════════ */ .form-label { font-family: var(--hd-font-body); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--hd-text-primary); margin-bottom: 0.25rem; } /* Override the more specific selector too */ .form-label.fw-semibold { font-family: var(--hd-font-body); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 0.25rem; } .form-control { border: 1.5px solid var(--hd-border); border-radius: 2px; font-size: 14px; color: var(--hd-text-primary); } .form-control:focus { border-color: var(--hd-red); box-shadow: 0 0 0 3px rgba(232,62,48,.12); } .form-control::placeholder { color: var(--hd-slate-light); } .form-select { border: 1.5px solid var(--hd-border); border-radius: 2px; font-size: 14px; color: var(--hd-text-primary); } .form-select:focus { border-color: var(--hd-red); box-shadow: 0 0 0 3px rgba(232,62,48,.12); } /* ══════════════════════════════════════════════════════════════════════════ BUTTONS — Bootstrap overrides (pill shape, display font) ══════════════════════════════════════════════════════════════════════════ */ .btn { font-family: var(--hd-font-body); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border-radius: 999px; } .btn-primary { background-color: var(--hd-red); border-color: var(--hd-red); } .btn-primary:hover { background-color: var(--hd-red-dark); border-color: var(--hd-red-dark); } .btn-dark { background-color: var(--hd-dark); border-color: var(--hd-text-primary); } .btn-dark:hover { background-color: var(--hd-dark-mid); border-color: var(--hd-dark-mid); } .btn-outline-dark { border-color: var(--hd-text-primary); color: var(--hd-text-primary); } .btn-outline-dark:hover { background-color: var(--hd-dark); color: var(--hd-white); } .btn-outline-primary { border-color: var(--hd-red); color: var(--hd-red); } .btn-outline-primary:hover { background-color: var(--hd-red); border-color: var(--hd-red); color: var(--hd-white); } .btn-outline-danger { border-color: var(--hd-red); color: var(--hd-red); } .btn-outline-danger:hover { background-color: var(--hd-red); color: var(--hd-white); } /* Preserve pill shape on size variants — Bootstrap resets border-radius */ .btn-sm, .btn-lg { border-radius: 999px; } .btn-xs { font-size: 10px; padding: 0.15rem 0.6rem; letter-spacing: 1px; border-radius: 999px; } /* ══════════════════════════════════════════════════════════════════════════ DEVEXTREME BUTTON OVERRIDES — Pill shape + brand colours NOTE: !important required because dx.light.css loads AFTER site.css (via @section Styles in individual views). Without it, theme defaults win. SCOPE: all rules are prefixed `body:not(.reporting-surface)` so the DevExpress Report Designer (which renders DX buttons inside its own wizards + dialogs) keeps the stock styling — our pill/brand treatment breaks the designer's cramped in-popup layout. Designer views opt out by setting `ViewData["BodyClass"] = "reporting-surface"`. ══════════════════════════════════════════════════════════════════════════ */ /* Global pill shape for ALL DX buttons */ .dx-button { border-radius: 999px !important; } .dx-button .dx-button-content { font-family: var(--hd-font-body); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } /* ── Default + Contained (solid brand red) ── */ .dx-button-mode-contained.dx-button-default { background-color: var(--hd-red) !important; border-color: var(--hd-red) !important; box-shadow: 0 2px 8px rgba(232,62,48,.35); } .dx-button-mode-contained.dx-button-default .dx-button-content { color: #fff !important; } .dx-button-mode-contained.dx-button-default .dx-icon { color: #fff !important; } .dx-button-mode-contained.dx-button-default.dx-state-hover { background-color: var(--hd-red-dark) !important; border-color: var(--hd-red-dark) !important; box-shadow: 0 4px 14px rgba(232,62,48,.45); transform: translateY(-1px); } .dx-button-mode-contained.dx-button-default.dx-state-focused { background-color: var(--hd-red-dark) !important; border-color: var(--hd-red-dark) !important; } .dx-button-mode-contained.dx-button-default.dx-state-active { background-color: var(--hd-red-dark) !important; border-color: var(--hd-red-dark) !important; } /* ── Normal + Contained (solid dark) ── */ .dx-button-mode-contained.dx-button-normal { background-color: var(--hd-dark) !important; border-color: var(--hd-text-primary) !important; box-shadow: 0 2px 8px rgba(29,29,27,.25); } .dx-button-mode-contained.dx-button-normal .dx-button-content { color: #fff !important; } .dx-button-mode-contained.dx-button-normal .dx-icon { color: #D8D8D8 !important; } .dx-button-mode-contained.dx-button-normal.dx-state-hover { background-color: var(--hd-dark-mid) !important; border-color: var(--hd-dark-mid) !important; transform: translateY(-1px); } .dx-button-mode-contained.dx-button-normal.dx-state-hover .dx-icon { color: var(--hd-red) !important; } /* ── Default + Outlined (red border + text) ── */ .dx-button-mode-outlined.dx-button-default { border-color: var(--hd-red) !important; background-color: transparent !important; } .dx-button-mode-outlined.dx-button-default .dx-button-content { color: var(--hd-red) !important; } .dx-button-mode-outlined.dx-button-default .dx-icon { color: var(--hd-red) !important; } .dx-button-mode-outlined.dx-button-default.dx-state-hover { background-color: var(--hd-red) !important; border-color: var(--hd-red) !important; } .dx-button-mode-outlined.dx-button-default.dx-state-hover .dx-button-content { color: var(--hd-white) !important; } .dx-button-mode-outlined.dx-button-default.dx-state-hover .dx-icon { color: var(--hd-white) !important; } /* ── Normal + Outlined (dark border + text) ── */ .dx-button-mode-outlined.dx-button-normal { border-color: var(--hd-text-primary) !important; background-color: transparent !important; } .dx-button-mode-outlined.dx-button-normal .dx-button-content { color: var(--hd-text-primary) !important; } .dx-button-mode-outlined.dx-button-normal .dx-icon { color: var(--hd-text-primary) !important; } .dx-button-mode-outlined.dx-button-normal.dx-state-hover { background-color: var(--hd-dark) !important; border-color: var(--hd-text-primary) !important; } .dx-button-mode-outlined.dx-button-normal.dx-state-hover .dx-button-content { color: var(--hd-white) !important; } .dx-button-mode-outlined.dx-button-normal.dx-state-hover .dx-icon { color: var(--hd-white) !important; } /* ── Default + Text (red text, no border) ── */ .dx-button-mode-text.dx-button-default .dx-button-content { color: var(--hd-red) !important; } .dx-button-mode-text.dx-button-default .dx-icon { color: var(--hd-red) !important; } .dx-button-mode-text.dx-button-default.dx-state-hover { background-color: rgba(232, 62, 48, 0.08) !important; } /* ── Normal + Text (dark text, no border) ── */ .dx-button-mode-text.dx-button-normal .dx-button-content { color: var(--hd-text-primary) !important; } .dx-button-mode-text.dx-button-normal .dx-icon { color: var(--hd-text-primary) !important; } .dx-button-mode-text.dx-button-normal.dx-state-hover { background-color: rgba(29,29,27,0.08) !important; } /* ── Danger buttons ── */ .dx-button-mode-contained.dx-button-danger { background-color: var(--hd-red) !important; border-color: var(--hd-red) !important; } .dx-button-mode-contained.dx-button-danger .dx-button-content { color: #fff !important; } .dx-button-mode-contained.dx-button-danger .dx-icon { color: #fff !important; } .dx-button-mode-contained.dx-button-danger.dx-state-hover { background-color: var(--hd-red-dark) !important; border-color: var(--hd-red-dark) !important; } /* ══════════════════════════════════════════════════════════════════════════ DEVEXTREME DATAGRID ACTION LINKS — Brand colours instead of blue ══════════════════════════════════════════════════════════════════════════ */ /* Grid command column action links (edit, delete, add, etc.) */ .dx-datagrid .dx-link, .dx-treelist .dx-link { color: var(--hd-text-primary) !important; } .dx-datagrid .dx-link:hover, .dx-treelist .dx-link:hover { color: var(--hd-red) !important; } /* Grid command column icon buttons */ .dx-datagrid .dx-command-edit .dx-link .dx-icon, .dx-treelist .dx-command-edit .dx-link .dx-icon, .dx-datagrid .dx-datagrid-action-icon, .dx-treelist .dx-treelist-action-icon { color: var(--hd-text-primary) !important; } .dx-datagrid .dx-command-edit .dx-link:hover .dx-icon, .dx-treelist .dx-command-edit .dx-link:hover .dx-icon { color: var(--hd-red) !important; } /* Toolbar text/icon-only buttons (filter, column chooser) — dark, NOT contained buttons */ .dx-datagrid .dx-toolbar .dx-button-mode-text .dx-icon, .dx-treelist .dx-toolbar .dx-button-mode-text .dx-icon { color: var(--hd-text-primary) !important; } .dx-datagrid .dx-toolbar .dx-button-mode-text.dx-state-hover .dx-icon, .dx-treelist .dx-toolbar .dx-button-mode-text.dx-state-hover .dx-icon { color: var(--hd-red) !important; } /* Contained buttons in toolbars — icons match the button bg context */ /* Dark contained: light grey icons at rest, red on hover */ .dx-datagrid .dx-toolbar .dx-button-mode-contained.dx-button-normal .dx-icon, .dx-treelist .dx-toolbar .dx-button-mode-contained.dx-button-normal .dx-icon { color: #D8D8D8 !important; } .dx-datagrid .dx-toolbar .dx-button-mode-contained.dx-button-normal.dx-state-hover .dx-icon, .dx-treelist .dx-toolbar .dx-button-mode-contained.dx-button-normal.dx-state-hover .dx-icon { color: var(--hd-red) !important; } /* Red contained: white icons always */ .dx-datagrid .dx-toolbar .dx-button-mode-contained.dx-button-default .dx-icon, .dx-treelist .dx-toolbar .dx-button-mode-contained.dx-button-default .dx-icon { color: #fff !important; } /* ══════════════════════════════════════════════════════════════════════════ DEVEXTREME DATAGRID — Dark headers, red accent ══════════════════════════════════════════════════════════════════════════ */ .dx-datagrid { font-size: 0.875rem; font-family: var(--hd-font-body); } /* Header row — dark background, body font for legibility at small size */ .dx-datagrid .dx-header-row > td { background: var(--hd-dark) !important; color: rgba(255,255,255,.7) !important; font-family: var(--hd-font-body); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; padding: 12px 16px; border: none !important; white-space: nowrap; } /* Boolean columns in DevExtreme default to Center alignment; the header caption then picks up a `dx-text-content-alignment-left dx-text-content-alignment-right` class combo that hides the text in our narrow columns. We fix that by forcing the column's alignment to Left (see `_AssetTypeFieldsGrid.cshtml`) and then re-centring the checkbox glyphs here via the `vepo-bool-center` CSS hook. */ .dx-datagrid .dx-data-row > td.vepo-bool-center { text-align: center !important; } /* Red left accent on first column header — box-shadow instead of border to avoid shifting column widths vs data rows */ .dx-datagrid .dx-header-row > td:first-child { box-shadow: inset 4px 0 0 0 var(--hd-red); } /* Header border override */ .dx-datagrid-headers { border-bottom: none !important; } .dx-datagrid-headers .dx-datagrid-table .dx-row > td { border-bottom: none !important; } /* Data rows */ .dx-datagrid-rowsview .dx-row > td { color: var(--hd-slate); border-bottom: 1px solid var(--hd-border-light); } /* Row hover — subtle red tint */ .dx-datagrid-rowsview .dx-data-row.dx-state-hover > td { background-color: rgba(232, 62, 48, 0.04) !important; } /* Focused / selected rows — subtle red tint */ .dx-datagrid-rowsview .dx-selection.dx-row > td, .dx-datagrid-rowsview .dx-row-focused.dx-data-row > td { background-color: rgba(232, 62, 48, 0.08) !important; color: inherit !important; } /* Search & filter editors — red focus border */ .dx-datagrid .dx-texteditor.dx-state-focused { border-color: var(--hd-red); } /* Pager — active page button */ .dx-pager .dx-page.dx-selection { background-color: var(--hd-red); color: #fff; border-radius: 2px; } /* Sort indicator arrow — red */ .dx-datagrid .dx-header-row .dx-sort-up, .dx-datagrid .dx-header-row .dx-sort-down { color: var(--hd-red); } /* Filter row — brand styling */ .dx-datagrid .dx-datagrid-filter-row .dx-texteditor { border-radius: 2px; } .dx-datagrid .dx-datagrid-filter-row .dx-texteditor.dx-state-focused { border-color: var(--hd-red); box-shadow: 0 0 0 2px rgba(232,62,48,.1); } /* Column chooser */ .dx-datagrid .dx-datagrid-column-chooser .dx-popup-title { font-family: var(--hd-font-display); text-transform: uppercase; letter-spacing: 1px; } /* ══════════════════════════════════════════════════════════════════════════ DEVEXTREME TREELIST — Same header style as DataGrid ══════════════════════════════════════════════════════════════════════════ */ .dx-treelist .dx-header-row > td { background: var(--hd-dark) !important; color: rgba(255,255,255,.7) !important; font-family: var(--hd-font-body); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; padding: 12px 16px; border: none !important; } .dx-treelist .dx-header-row > td:first-child { box-shadow: inset 4px 0 0 0 var(--hd-red); } .dx-treelist-headers { border-bottom: none !important; } .dx-treelist-rowsview .dx-data-row.dx-state-hover > td { background-color: rgba(232, 62, 48, 0.04) !important; } .dx-treelist-rowsview .dx-selection.dx-row > td { background-color: rgba(232, 62, 48, 0.08) !important; color: inherit !important; } /* ══════════════════════════════════════════════════════════════════════════ DEVEXTREME INPUTS — Brand focus styling Scoped out of .reporting-surface — the report-designer wizards use these same widgets internally and our brand radius/focus ring breaks their cramped in-popup layout. ══════════════════════════════════════════════════════════════════════════ */ .dx-texteditor { border-radius: 2px !important; } .dx-texteditor.dx-state-focused { border-color: var(--hd-red) !important; box-shadow: 0 0 0 3px rgba(232,62,48,.12); } .dx-selectbox.dx-state-focused .dx-texteditor-input-container { border-color: var(--hd-red); } /* ══════════════════════════════════════════════════════════════════════════ DEVEXTREME POPUP — Brand styling Scoped out of .reporting-surface so the Data Source Wizard's title stays readable at its native size (Bebas Neue 18px compresses the title and throws off the action-bar stacking below it). ══════════════════════════════════════════════════════════════════════════ */ .dx-popup-title { font-family: var(--hd-font-display) !important; font-size: 18px !important; font-weight: 400; /* Bebas Neue 400-only — avoids synthesized bold */ letter-spacing: 1px; text-transform: uppercase; color: var(--hd-text-primary); } /* ══════════════════════════════════════════════════════════════════════════ DEVEXTREME TOOLBAR — Brand dropdown buttons ══════════════════════════════════════════════════════════════════════════ */ .dx-toolbar .dx-dropdownbutton .dx-button-content { font-family: var(--hd-font-body); letter-spacing: 0.5px; text-transform: uppercase; } /* ══════════════════════════════════════════════════════════════════════════ DASHBOARD — KPI Cards ══════════════════════════════════════════════════════════════════════════ */ .kpi-card { border: none; border-radius: 4px; transition: transform 0.15s ease, box-shadow 0.15s ease; overflow: hidden; } /* Override the generic card red stripe with a thicker one for KPI */ .kpi-card::before { height: 4px; } .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(29,29,27,.12) !important; } .kpi-icon { width: 56px; height: 56px; border-radius: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; /* `color` drives both the inline SVG stroke (via `currentColor` below) and any text content. Default to primary-text so the neutral icon flips with theme. */ color: var(--hd-text-primary); } /* SVGs inside the icon tile pull their stroke from the parent .kpi-icon `color`, which means accent modifiers (.kpi-icon--red etc.) only need to set `color` and the stroke follows automatically. */ .kpi-icon svg { stroke: currentColor; } /* Accent modifiers — surface tint flips with theme via the dark-theme overrides of --hd-kpi-bg-* further up; foreground hue stays literal for brand red / amber / success because they read on both themes. The `--default` variant is what `Accent="dark"` and any unrecognised value resolve to in the partial. */ .kpi-icon--red { background: var(--hd-kpi-bg-red); color: var(--hd-red); } .kpi-icon--warn { background: var(--hd-kpi-bg-warn); color: var(--hd-amber); } .kpi-icon--success { background: var(--hd-kpi-bg-success); color: var(--hd-success); } .kpi-icon--default { background: var(--hd-kpi-bg-default); color: var(--hd-text-primary); } .kpi-value { font-family: var(--hd-font-display); font-size: 36px; /* matches design's KPI value size */ font-weight: 400; /* Bebas Neue 400-only */ letter-spacing: 1px; line-height: 1; } /* Value-colour modifiers — same accent grammar as .kpi-icon--*; `--default` flips with theme via --hd-text-primary so the number isn't dark-on-dark. */ .kpi-value--red { color: var(--hd-red); } .kpi-value--warn { color: var(--hd-amber); } .kpi-value--success { color: var(--hd-success); } .kpi-value--default { color: var(--hd-text-primary); } .kpi-label { font-family: var(--hd-font-body); font-size: 10px; color: var(--hd-slate-light); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } /* Optional caption under the KPI value — used on detail pages (Customers/Edit, Sites/Edit, EndUsers/Edit) to explain the number. Dashboard KPIs skip this. */ .kpi-desc { font-family: var(--hd-font-body); font-size: 11px; color: var(--hd-slate-light); margin-top: 4px; line-height: 1.3; } .kpi-footer { background: rgba(0,0,0,0.02); padding: 0.5rem 1.25rem; font-size: 12px; border-top: 1px solid var(--hd-border-light); } .kpi-footer a { color: var(--hd-slate-light); text-decoration: none; font-weight: 600; font-family: var(--hd-font-body); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; } .kpi-footer a:hover { color: var(--hd-red); } /* Chart cards */ .chart-card { border: none; border-radius: 4px; } .chart-card .card-header { background: var(--hd-white); border-bottom: 1px solid var(--hd-border-light); font-family: var(--hd-font-display); font-weight: 400; /* Bebas Neue is 400-only */ font-size: 18px; letter-spacing: 1px; text-transform: uppercase; padding: 1rem 1.25rem; padding-top: calc(1rem + 4px); } /* Bootstrap's .fw-semibold and .fw-bold utilities use `font-weight: XXX !important`, which beats the base .card-header weight and forces the browser to *synthesize* bold on a 400-only Bebas Neue — the headers then look thick and blurred. Pin the weight back to 400 !important on any fw-* utility that lands on a card-header, whether as a direct class or on a descendant element. Covers 20+ legacy usages site-wide without touching each view. */ .card-header.fw-semibold, .card-header.fw-bold, .card-header .fw-semibold, .card-header .fw-bold { font-weight: 400 !important; } /* Stacked title + sub-line inside a card-header. The title inherits everything from .card-header (Bebas Neue, 18px, 400, uppercase). The sub-line resets to body font in normal case at 11px so it reads as a caption, not an eyebrow — matches the design's `subtitle` from DashModules.jsx. */ .hd-card-title { /* intentionally empty — inherits from .card-header */ } .hd-card-sub { font-family: var(--hd-font-body); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--hd-slate-light); margin-top: 2px; } /* Section titles */ .section-title { font-family: var(--hd-font-body); font-size: 10px; text-transform: uppercase; letter-spacing: 2.5px; color: var(--hd-slate-light); font-weight: 700; margin-bottom: 0.75rem; } /* Recent items list */ .recent-item { display: flex; align-items: center; padding: 0.65rem 0; border-bottom: 1px solid var(--hd-border-light); } .recent-item:last-child { border-bottom: none; } .recent-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-right: 0.75rem; } /* Severity modifiers for the recent-item dots — replaces JS-emitted inline `style="background:#E83E30"` / `#E8A120` so the dashboard list dots draw from the same brand tokens as everything else. */ .recent-dot--error { background: var(--hd-red); } .recent-dot--warning { background: var(--hd-amber); } /* .stat-card was superseded by the _KpiCard shared partial (Views/Shared/_KpiCard.cshtml). .stat-card-link survives only as a JS selector (delegated click handler for tab-focus / grid-filter) — no CSS rules needed for the class name itself. */ /* ══════════════════════════════════════════════════════════════════════════ ASSET FILE THUMBNAILS ══════════════════════════════════════════════════════════════════════════ */ .asset-thumb-gallery { display: flex; flex-wrap: wrap; gap: 0.5rem; } .asset-thumb { height: 90px; width: 90px; object-fit: cover; border-radius: 2px; border: 1px solid var(--hd-border); cursor: pointer; transition: opacity 0.15s; } .asset-thumb:hover { opacity: 0.8; } /* ══════════════════════════════════════════════════════════════════════════ CARD FOOTER LINKS ══════════════════════════════════════════════════════════════════════════ */ .card-footer a { font-size: 12px; font-family: var(--hd-font-body); letter-spacing: 0.5px; text-transform: uppercase; } /* ══════════════════════════════════════════════════════════════════════════ FOCUS FLASH — Transient highlight animation ══════════════════════════════════════════════════════════════════════════ */ @keyframes focusFlashKeyframes { 0% { outline: 3px solid rgba(232, 62, 48, 0.7); outline-offset: 2px; } 100% { outline: 3px solid rgba(232, 62, 48, 0); outline-offset: 6px; } } .focus-flash { animation: focusFlashKeyframes 1.4s ease-out; border-radius: 4px; scroll-margin-top: 1rem; } /* Deleted row dimming */ .table-secondary td { opacity: 0.65; } /* ══════════════════════════════════════════════════════════════════════════ LOADING OVERLAY — Brand spinner ══════════════════════════════════════════════════════════════════════════ */ .vepo-loading-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(29, 29, 27, 0.55); backdrop-filter: blur(2px); opacity: 0; animation: vepo-fade-in 0.15s ease-out forwards; } @keyframes vepo-fade-in { to { opacity: 1; } } .vepo-loading-spinner { width: 44px; height: 44px; border: 4px solid rgba(255,255,255,0.25); border-top-color: var(--hd-red); border-radius: 50%; animation: vepo-spin 0.7s linear infinite; } @keyframes vepo-spin { to { transform: rotate(360deg); } } .vepo-loading-text { margin-top: 14px; color: #ffffff; font-family: var(--hd-font-body); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } /* ══════════════════════════════════════════════════════════════════════════ LIST GROUP — Brand hover styling ══════════════════════════════════════════════════════════════════════════ */ .list-group-item-action:hover { background-color: rgba(232,62,48,.04); } /* ══════════════════════════════════════════════════════════════════════════ HEADINGS — Display font for all heading levels ══════════════════════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { font-family: var(--hd-font-display); font-weight: 400; /* Bebas Neue 400-only — browser defaults would synth-bold */ text-transform: uppercase; letter-spacing: 0.5px; color: var(--hd-text-primary); } /* ══════════════════════════════════════════════════════════════════════════ DEVEXTREME NOTIFY / TOAST — Brand styling ══════════════════════════════════════════════════════════════════════════ */ .dx-toast-message { font-family: var(--hd-font-body); } .dx-toast-info { background-color: var(--hd-dark) !important; } .dx-toast-success { background-color: var(--hd-success) !important; } .dx-toast-warning { background-color: var(--hd-warning) !important; } .dx-toast-error { background-color: var(--hd-red) !important; } /* ══════════════════════════════════════════════════════════════════════════ DEVEXTREME SEARCH PANEL — Brand styling ══════════════════════════════════════════════════════════════════════════ */ .dx-datagrid-search-panel.dx-state-focused { border-color: var(--hd-red) !important; } /* ══════════════════════════════════════════════════════════════════════════ MISCELLANEOUS ══════════════════════════════════════════════════════════════════════════ */ /* Links */ a { color: var(--hd-red); } a:hover { color: var(--hd-red-dark); } /* Pagination */ .page-item.active .page-link { background-color: var(--hd-red); border-color: var(--hd-red); } .page-link { color: var(--hd-text-primary); } .page-link:hover { color: var(--hd-red); } /* Spinner brand color */ .spinner-border { color: var(--hd-red); } /* Bootstrap accordion — brand accent */ .accordion-button:not(.collapsed) { background-color: rgba(232,62,48,.04); color: var(--hd-text-primary); box-shadow: inset 0 -1px 0 var(--hd-border-light); } .accordion-button:focus { border-color: var(--hd-red); box-shadow: 0 0 0 3px rgba(232,62,48,.12); } /* Progress bars — muted dark fill on light track for visual calm */ .progress { background-color: var(--hd-border-light); border-radius: 2px; height: 6px; } .progress-bar { background-color: var(--hd-dark-light); border-radius: 2px; } /* Full capacity — subtle success tint */ .progress-bar[aria-valuenow][style*="100%"], .progress-bar.bg-success { background-color: var(--hd-success) !important; } /* Warning state for near-full */ .progress-bar.bg-warning { background-color: var(--hd-warning) !important; } /* Danger/over-capacity */ .progress-bar.bg-danger { background-color: var(--hd-red) !important; } /* ══════════════════════════════════════════════════════════════════════════ Help Button — inline help link throughout the application ══════════════════════════════════════════════════════════════════════════ */ .help-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 4px 8px; color: var(--hd-red); border: 1px solid transparent; border-radius: 3px; text-decoration: none; cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; } .help-button:hover, .help-button:focus { background: rgba(232, 62, 48, 0.08); border-color: rgba(232, 62, 48, 0.25); outline: none; } .help-button:focus-visible { outline: 2px solid #E83E30; outline-offset: 2px; } .help-button .dx-icon { font-size: 1rem; } /* Mobile: ensure button stays touchable (min 44px) */ @media (max-width: 576px) { .help-button { width: 44px; height: 44px; } } /* ══════════════════════════════════════════════════════════════════════════ DASHBOARD 2026-04 REDESIGN Role-aware greeting header, system activity strip, improved KPI stripes, renewal day tile, warranty bucket bar, quick-action tile grid. Reuses the existing .card / .kpi-card hover-lift so the "bounce-out" feel is inherited. ══════════════════════════════════════════════════════════════════════════ */ /* — Greeting header — */ .dash-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.25rem; } .dash-greeting-eyebrow { font-family: var(--hd-font-body); font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--hd-red); margin-bottom: 4px; } .dash-greeting-title { font-family: var(--hd-font-display); font-size: 44px; line-height: 1; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 400; color: var(--hd-text-primary); margin: 0; } .dash-greeting-sub { margin-top: 6px; color: var(--hd-slate-light); font-size: 13px; } .dash-header-actions { display: flex; align-items: center; gap: 10px; } .dash-cta { font-family: var(--hd-font-body); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 9px 18px; border: none; background: var(--hd-red); color: #fff; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(232, 62, 48, 0.35); transition: background .15s ease, box-shadow .15s ease, transform .15s ease; text-decoration: none; } .dash-cta:hover { background: var(--hd-red-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(232, 62, 48, 0.45); } .dash-cta svg { stroke-width: 2; } .dash-cta-disabled, .dash-cta-disabled:hover { background: var(--hd-slate-light, #888); color: #fff; cursor: not-allowed; box-shadow: none; transform: none; opacity: 0.65; } /* — System activity strip (SuperAdmin) — */ .dash-system-strip { background: var(--hd-dark); color: #fff; border-radius: 4px; padding: 10px 14px; display: flex; align-items: stretch; gap: 0; overflow: hidden; margin-bottom: 1rem; } .dash-system-strip-label { font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.55); padding: 6px 16px 6px 4px; margin-right: 8px; border-right: 1px solid rgba(255,255,255,0.15); flex-shrink: 0; line-height: 1.2; align-self: center; } .dash-system-strip-items { display: flex; flex: 1; gap: 0; flex-wrap: wrap; } .dash-system-strip-item { flex: 1 1 160px; padding: 4px 14px; border-right: 1px solid rgba(255,255,255,0.08); } .dash-system-strip-item:last-child { border-right: none; } /* Anchor form — every strip item is now a link to its underlying admin page, so users can drill from the live count straight to the list. Hover lifts the item subtly against the dark background without breaking the strip's horizontal rhythm. */ a.dash-system-strip-item { text-decoration: none; color: inherit; transition: background .15s var(--hd-easing, ease); } a.dash-system-strip-item:hover { background: rgba(255,255,255,0.06); color: inherit; } a.dash-system-strip-item:hover .value { color: var(--hd-red-light); } .dash-system-strip-item .label { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 2px; } .dash-system-strip-item .value { font-family: var(--hd-font-display); font-size: 24px; letter-spacing: 1px; line-height: 1; color: #fff; } .dash-system-strip-item .value.accent { color: var(--hd-red-light); } /* — KPI card: coloured left stripe (accent by status) — Replaces the generic top bar from .card::before with a vertical severity stripe, so the card reads status at a glance rather than uniformly red on hover. The .card-body padding-top override drops the 4px the base card reserves for its (now-hidden) top accent bar. */ .kpi-card::before { display: none; } .kpi-card .card-body { padding-top: 1rem !important; } .kpi-card .kpi-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hd-dark); z-index: 2; } .kpi-card .kpi-stripe.red { background: var(--hd-red); } .kpi-card .kpi-stripe.warn { background: #E8A120; } .kpi-card .kpi-stripe.success { background: var(--hd-success); } .kpi-card .kpi-value { font-size: 36px; letter-spacing: 1px; } /* — Renewal row: day tile + inline Renew — */ .dash-renewal-row { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--hd-border-light); text-decoration: none; color: inherit; transition: background .12s ease; } .dash-renewal-row:hover { background: rgba(232,62,48,0.04); color: inherit; } .dash-renewal-row:first-child { border-top: none; } .dash-day-tile { width: 48px; height: 48px; border-radius: 2px; background: var(--hd-bg-section); color: var(--hd-slate-light); display: flex; flex-direction: column; align-items: center; justify-content: center; } .dash-day-tile.critical { background: #FDECEC; color: var(--hd-red-dark); } .dash-day-tile.warn { background: #FEF3CD; color: #7B4D00; } .dash-day-tile .n { font-family: var(--hd-font-display); font-size: 20px; line-height: 1; } .dash-day-tile .d { font-size: 8px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-top: 1px; } .dash-renewal-title { font-size: 13px; font-weight: 700; color: var(--hd-text-primary); line-height: 1.25; } .dash-renewal-sub { font-size: 11px; color: var(--hd-slate-light); margin-top: 1px; } .dash-renewal-value { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 11px; color: var(--hd-slate); text-align: right; white-space: nowrap; } .dash-btn-renew { font-family: var(--hd-font-body); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 7px 14px; border: none; background: var(--hd-dark); color: #fff; cursor: pointer; border-radius: 999px; text-decoration: none; display: inline-block; } .dash-btn-renew:hover { background: #000; color: #fff; } /* — Warranty bucket bar (30/60/90) — */ .dash-bucket-bar { padding: 14px 18px 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .dash-bucket { border: 1px solid var(--hd-border-light); border-radius: 2px; padding: 10px 12px; background: var(--hd-white); position: relative; } .dash-bucket .label { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--hd-slate-light); } .dash-bucket .count { font-family: var(--hd-font-display); font-size: 28px; line-height: 1; margin-top: 4px; color: var(--hd-text-primary); } .dash-bucket .sub { font-size: 10px; color: var(--hd-slate-light); margin-top: 2px; } .dash-bucket.critical { background: #FDECEC; border-color: #F5C6C3; } .dash-bucket.critical .count { color: var(--hd-red); } .dash-bucket.warn { background: #FEF3CD; border-color: #F2DFA6; } .dash-bucket.warn .count { color: #7B4D00; } /* — Quick actions: icon tile grid — */ .dash-qa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 16px 18px; } @media (max-width: 768px) { .dash-qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .dash-qa-tile { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--hd-white); color: var(--hd-text-primary); border: 1px solid var(--hd-border); border-radius: 2px; cursor: pointer; font-family: var(--hd-font-body); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; text-align: left; text-decoration: none; transition: all .12s ease; } .dash-qa-tile:hover { border-color: var(--hd-text-primary); color: var(--hd-text-primary); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(29,29,27,0.08); } .dash-qa-tile.primary { background: var(--hd-dark); color: #fff; border-color: var(--hd-text-primary); } .dash-qa-tile.primary:hover { background: #000; color: #fff; border-color: #000; } .dash-qa-ico { width: 28px; height: 28px; border-radius: 2px; background: var(--hd-bg-section); color: var(--hd-text-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-qa-tile.primary .dash-qa-ico { background: var(--hd-red); color: #fff; } /* — Card heading with title + subtitle stack — */ .dash-card-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 8px; gap: 12px; } .dash-card-head .title-group .title { font-family: var(--hd-font-display); font-size: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--hd-text-primary); margin: 0; font-weight: 400; } .dash-card-head .title-group .subtitle { font-size: 11px; color: var(--hd-slate-light); margin-top: 2px; } .dash-view-all { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--hd-red); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .dash-view-all:hover { color: var(--hd-red-dark); } /* — Financials mini-stats row — */ .dash-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hd-border-light); } .dash-mini-stat { padding: 12px 18px; border-left: 1px solid var(--hd-border-light); text-decoration: none; color: inherit; display: block; transition: background .15s var(--hd-easing, ease); } .dash-mini-stat:first-child { border-left: none; } a.dash-mini-stat:hover { background: rgba(232,62,48,0.03); color: inherit; } a.dash-mini-stat:hover .label { color: var(--hd-red); } .dash-mini-stat .label { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--hd-slate-light); margin-bottom: 2px; } .dash-mini-stat .value { font-family: var(--hd-font-display); font-size: 22px; line-height: 1.1; letter-spacing: 0.5px; color: var(--hd-text-primary); } .dash-mini-stat .value.accent { color: var(--hd-red); } /* — AI Dispatch band — reuses .dash-mini-stats, overrides to 4 columns and adds a caption sub-line under each metric value. Full-width horizontal strip that follows the same pattern as the Financials card below. */ .hd-ai-band .hd-ai-stats { grid-template-columns: repeat(4, 1fr); } .hd-ai-band .hd-ai-stat-sub { font-size: 11px; color: var(--hd-slate-light); margin-top: 4px; line-height: 1.3; } @media (max-width: 768px) { .hd-ai-band .hd-ai-stats { grid-template-columns: repeat(2, 1fr); } } /* — Responsive greeting — */ @media (max-width: 768px) { .dash-greeting-title { font-size: 32px; } .dash-header { gap: 12px; } } /* ══════════════════════════════════════════════════════════════════════════ NEEDS ATTENTION HERO FEED Blended-source urgent list (callouts, licences, service plans, warranty). Filter chips at top-right toggle visibility via data-urgent-filter on the card root — a tiny inline script wired in the partial flips the attribute. ══════════════════════════════════════════════════════════════════════════ */ .hd-urgent { /* uses .chart-card base */ } .hd-urgent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px 8px; } .hd-urgent-title { font-family: var(--hd-font-display); font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--hd-text-primary); margin: 0; font-weight: 400; /* Bebas Neue 400-only */ line-height: 1.2; } .hd-urgent-count { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 11px; font-weight: 700; background: var(--hd-red); color: #fff; padding: 2px 7px; border-radius: 2px; } .pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hd-red); animation: hd-pulse 2s cubic-bezier(.2,.8,.2,1) infinite; display: inline-block; } @keyframes hd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232,62,48,0.4); } 50% { box-shadow: 0 0 0 6px rgba(232,62,48,0); } } /* ── Callout Priority chip ───────────────────────────────────────────────── Used everywhere a callout's priority surfaces in the dispatcher / engineer UI: the grid column, the Details header, the calendar tooltip, dashboard cards. Low is rendered as a subtle muted chip so it doesn't compete with Open/Assigned status colours; Urgent reuses the existing hd-pulse keyframe for the CTA glow. See CalloutPriorities for the source-of-truth string constants. */ .priority-chip { display: inline-block; padding: 3px 9px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.4; color: #fff; white-space: nowrap; vertical-align: middle; } .priority-chip.priority-urgent { background-color: var(--hd-red); } .priority-chip.priority-high { background-color: var(--hd-amber); } .priority-chip.priority-medium { background-color: var(--hd-warning); } .priority-chip.priority-low { background-color: #E0E0DE; color: var(--hd-dark, #1D1D1B); } .priority-chip.priority-pulse { animation: hd-pulse 2s cubic-bezier(.2,.8,.2,1) infinite; } .hd-urgent-filters { display: inline-flex; gap: 6px; } .hd-chip { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--hd-border); background: var(--hd-white); color: var(--hd-slate); cursor: pointer; border-radius: 999px; transition: all .12s ease; } .hd-chip:hover { border-color: var(--hd-text-primary); } .hd-chip.active { background: var(--hd-dark); color: #fff; border-color: var(--hd-text-primary); } .hd-urgent-rows { display: flex; flex-direction: column; } .hd-urgent-row { display: grid; grid-template-columns: 90px 28px 1fr 110px 140px; gap: 12px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--hd-border-light); text-decoration: none; color: inherit; transition: background .12s ease; } .hd-urgent-row:hover { background: rgba(232,62,48,0.03); color: inherit; } .hd-urgent-row:last-child { border-bottom: 1px solid var(--hd-border-light); } /* Filter-driven visibility — toggled by the chip scripts in the partial. */ .hd-urgent[data-urgent-filter="critical"] .hd-urgent-row:not([data-sev="critical"]) { display: none; } .hd-urgent[data-urgent-filter="warning"] .hd-urgent-row:not([data-sev="warning"]) { display: none; } .hd-urgent[data-urgent-filter="info"] .hd-urgent-row:not([data-sev="info"]) { display: none; } .hd-sev-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 2px; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; } .hd-sev-pill .dot { width: 6px; height: 6px; border-radius: 50%; } .hd-sev-critical { background: #FDECEC; color: var(--hd-red-dark); } .hd-sev-critical .dot { background: var(--hd-red); } .hd-sev-warning { background: #FEF3CD; color: #7B4D00; } .hd-sev-warning .dot { background: #E8A120; } .hd-sev-info { background: var(--hd-bg-section); color: var(--hd-slate); } .hd-sev-info .dot { background: var(--hd-slate-light); } .hd-urgent-ico { width: 28px; height: 28px; border-radius: 2px; background: var(--hd-bg-section); color: var(--hd-slate); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hd-urgent-body { min-width: 0; } .hd-urgent-title-txt { font-size: 13px; font-weight: 700; color: var(--hd-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .hd-urgent-meta { font-size: 11px; color: var(--hd-slate-light); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hd-urgent-time { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 11px; font-weight: 700; color: var(--hd-slate); text-align: right; } .hd-urgent-time.accent { color: var(--hd-red); } .hd-urgent-action { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 7px 14px; border: none; background: var(--hd-red); color: #fff; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; box-shadow: 0 1px 4px rgba(232,62,48,0.3); justify-self: end; transition: background .12s ease; } .hd-urgent-row:hover .hd-urgent-action { background: var(--hd-red-dark); } @media (max-width: 992px) { .hd-urgent-row { grid-template-columns: 80px 1fr 110px; grid-template-areas: "sev ico time" "body body body" "action action action"; } .hd-urgent-row > :nth-child(1) { grid-area: sev; } .hd-urgent-row > :nth-child(2) { grid-area: ico; justify-self: start; } .hd-urgent-row > :nth-child(3) { grid-area: body; } .hd-urgent-row > :nth-child(4) { grid-area: time; } .hd-urgent-row > :nth-child(5) { grid-area: action; justify-self: stretch; text-align: center; } } /* ══════════════════════════════════════════════════════════════════════════ WARRANTY SEGMENTED BAR (replaces the three-tile bucket bar) ══════════════════════════════════════════════════════════════════════════ */ .hd-wbar-wrap { padding: 14px 18px 8px; } .hd-wbar { display: flex; width: 100%; height: 28px; border-radius: 2px; overflow: hidden; background: var(--hd-bg-section); } .hd-wbar .seg { display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--hd-font-display); font-size: 16px; letter-spacing: 0.5px; min-width: 32px; } .hd-wbar .seg.critical { background: var(--hd-red); } .hd-wbar .seg.warn { background: #E8A120; } .hd-wbar .seg.dark { background: var(--hd-dark); } .hd-wbar-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 11px; color: var(--hd-slate); } .hd-wbar-legend .item { display: inline-flex; align-items: center; gap: 6px; } .hd-wbar-legend .item strong { color: var(--hd-text-primary); font-weight: 700; } .hd-wbar-legend .sw { width: 10px; height: 10px; border-radius: 1px; display: inline-block; } .hd-wbar-legend .sw.critical { background: var(--hd-red); } .hd-wbar-legend .sw.warn { background: #E8A120; } .hd-wbar-legend .sw.dark { background: var(--hd-dark); } /* Warranty row — cleaner than the old .list-group approach */ .hd-warranty-row { display: grid; grid-template-columns: 90px 1fr 110px 70px; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--hd-border-light); text-decoration: none; color: inherit; transition: background .12s ease; } .hd-warranty-row:hover { background: rgba(232,62,48,0.03); color: inherit; } .hd-code-chip { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 10px; font-weight: 700; background: var(--hd-dark); color: #fff; padding: 3px 7px; border-radius: 2px; text-align: center; justify-self: start; } .hd-warranty-name { font-size: 12px; font-weight: 700; color: var(--hd-text-primary); } .hd-warranty-sub { font-size: 11px; color: var(--hd-slate-light); } .hd-warranty-date { font-size: 11px; color: var(--hd-slate); text-align: right; } .hd-warranty-days { font-family: 'JetBrains Mono', 'Courier New', monospace; font-size: 12px; font-weight: 700; color: var(--hd-text-primary); text-align: right; } .hd-warranty-days.critical { color: var(--hd-red); } .hd-warranty-days.warn { color: #7B4D00; } /* ══════════════════════════════════════════════════════════════════════════ ROLE SWITCHER PILL (Super Admin only) ══════════════════════════════════════════════════════════════════════════ */ .hd-role-switch { display: inline-flex; align-items: center; gap: 0; background: var(--hd-white); border: 1px solid var(--hd-border); border-radius: 999px; padding: 3px; } .hd-role-pill { font-family: var(--hd-font-body); font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; padding: 6px 12px; border: none; cursor: pointer; background: transparent; color: var(--hd-slate-light); border-radius: 999px; text-decoration: none; transition: all .12s cubic-bezier(.2,.8,.2,1); } .hd-role-pill:hover { color: var(--hd-text-primary); } .hd-role-pill.active { background: var(--hd-dark); color: #fff; } .hd-viewas-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--hd-dark); color: #fff; padding: 10px 16px; border-radius: 4px; margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.3px; } .hd-viewas-banner a { color: var(--hd-red-light); text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; } .hd-viewas-banner a:hover { color: #fff; } /* ══════════════════════════════════════════════════════════════════════════ SEGMENTED TOGGLE (used on License Expiry Timeline header) ══════════════════════════════════════════════════════════════════════════ */ .hd-seg-toggle { display: inline-flex; border: 1px solid var(--hd-border); border-radius: 999px; padding: 2px; background: var(--hd-white); } .hd-seg { font-family: var(--hd-font-body); font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 4px 10px; border: none; cursor: pointer; border-radius: 999px; background: transparent; color: var(--hd-slate-light); } .hd-seg.active { background: var(--hd-dark); color: #fff; } /* ══════════════════════════════════════════════════════════════════════════ COLLECTION DASHBOARD — header, KPI strip, Assets card, tabs, validity rail. Scoped under col-* prefixes so nothing leaks outside Views/Collections/Dashboard. Matches the Hayley Dexis design system — light hero, flex-wrap custom field chips, red pulse accent on urgent items. ══════════════════════════════════════════════════════════════════════════ */ /* ─── Header ─────────────────────────────────────────────────────────── */ .col-hdr { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; } .col-hdr-lead { display: flex; align-items: flex-end; gap: 14px; min-width: 0; } .col-hdr-qr { padding: 4px; background: var(--hd-white); border: 1px solid var(--hd-border); border-radius: 4px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: border-color .2s var(--hd-easing, ease), box-shadow .2s var(--hd-easing, ease); } .col-hdr-qr:hover { border-color: var(--hd-red); box-shadow: 0 2px 8px rgba(232, 62, 48, 0.15); } .col-hdr-qr img { width: 60px; height: 60px; display: block; } .col-hdr-titles { min-width: 0; } .col-hdr-badges { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .col-hdr-id { font-family: var(--hd-font-mono); font-size: 11px; color: var(--hd-fg-3); } .col-hdr-title { font-family: var(--hd-font-display); font-size: 34px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 400; margin: 0; line-height: 1; color: var(--hd-fg-1); } .col-hdr-meta { font-size: 11px; color: var(--hd-fg-3); margin-top: 6px; } .col-hdr-meta a { color: var(--hd-red); text-decoration: none; font-weight: 700; } .col-hdr-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ─── Pills (shared across header, asset rows, tabs, validity) ────────── */ .col-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 2px; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; } .col-pill--neutral { background: var(--hd-bg-section, #F4F4F4); color: var(--hd-fg-2); } .col-pill--dark { background: var(--hd-dark, #1D1D1B); color: #fff; } .col-pill--red { background: var(--hd-red, #E83E30); color: #fff; } .col-pill--success { background: var(--hd-success-bg, #E8F5EA); color: var(--hd-success-fg, #1C6132); } .col-pill--warning { background: var(--hd-warning-bg, #FEF3CD); color: var(--hd-warning-fg, #7B4D00); } .col-pill--error { background: var(--hd-error-bg, #FDECEC); color: var(--hd-error-fg, #C42E22); } /* ─── Buttons (pill-shaped, matching the design) ─────────────────────── */ .col-btn-ghost { font-family: var(--hd-font-body); font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; } .col-btn-primary { font-family: var(--hd-font-body); font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; padding: 8px 14px; border: none; background: var(--hd-red); color: #fff; cursor: pointer; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 2px 8px rgba(232, 62, 48, 0.3); text-decoration: none; transition: background .15s ease; } .col-btn-primary:hover { background: var(--hd-red-dark, #C42E22); color: #fff; } /* ─── KPI strip spacing ─────────────────────────────────────────────── */ .col-kpi-row { margin-top: 4px; } /* ─── Assets card ──────────────────────────────────────────────────── */ .col-assets-card .card-header { padding: 10px 18px 8px; } .col-assets-hdr { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .col-assets-hdr-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; } .col-assets-hdr-right { display: flex; gap: 8px; flex-wrap: wrap; } .col-type-filter { display: flex; gap: 6px; flex-wrap: wrap; } .col-chip { font-family: var(--hd-font-body); font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; padding: 5px 11px; border: 1px solid var(--hd-border); background: var(--hd-white); color: var(--hd-fg-2); cursor: pointer; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s, border-color .15s; } .col-chip:hover { border-color: var(--hd-fg-2); } .col-chip.active { background: var(--hd-dark); color: #fff; border-color: var(--hd-text-primary); } .col-chip-n { font-family: var(--hd-font-mono); font-size: 10px; background: var(--hd-bg-section, #F4F4F4); color: var(--hd-fg-3); padding: 1px 6px; border-radius: 999px; } .col-chip.active .col-chip-n { background: rgba(255, 255, 255, 0.18); color: #fff; } .col-assets-empty { padding: 48px 18px; text-align: center; } /* ─── Asset group subsection ─────────────────────────────────────────── */ .col-asset-group { border-bottom: 1px solid var(--hd-border-light, #EBEBEB); } .col-asset-group:last-child { border-bottom: none; } .col-asset-group-hdr { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; background: var(--hd-bg-section, #F4F4F4); border-bottom: 1px solid var(--hd-border-light, #EBEBEB); gap: 10px; flex-wrap: wrap; } .col-asset-group-hdr-left { display: flex; align-items: center; gap: 8px; min-width: 0; } .col-asset-group-title { font-family: var(--hd-font-body); font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--hd-fg-2); } .col-asset-group-count { font-family: var(--hd-font-mono); font-size: 11px; color: var(--hd-fg-3); } /* ─── Asset row — flex-wrap custom field chips ───────────────────────── */ .col-asset-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--hd-border-light, #EBEBEB); transition: background .12s var(--hd-easing, ease); } .col-asset-row:last-child { border-bottom: none; } .col-asset-row:hover { background: rgba(232, 62, 48, 0.02); } /* Zebra striping for visual rhythm on long asset lists. The parent partial emits a hidden `data-cap-count` span as the first child, so :nth-child(odd) selects the 2nd, 4th, 6th asset rows — producing a proper alternating plain/tinted/plain pattern instead of clustering tint on adjacent rows. */ .col-asset-row:nth-child(odd) { background: rgba(232, 62, 48, 0.03); } .col-asset-row-main { min-width: 0; display: grid; gap: 8px; } .col-asset-row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .col-asset-num { font-family: var(--hd-font-mono); font-size: 10px; font-weight: 700; background: var(--hd-dark, #1D1D1B); color: #fff; padding: 3px 7px; border-radius: 2px; } .col-asset-type { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 2px; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; background: var(--hd-bg-section, #F4F4F4); color: var(--hd-fg-2); } .col-asset-name { color: var(--hd-red); text-decoration: none; font-weight: 700; font-size: 14px; } .col-asset-name:hover { color: var(--hd-red-dark, #C42E22); text-decoration: underline; } .col-asset-fields { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; align-content: flex-start; } .col-asset-field { display: inline-flex; gap: 6px; min-width: 0; max-width: 100%; align-items: center; } .col-asset-field-label { font-size: 9px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--hd-fg-3); white-space: nowrap; } .col-asset-field-value { color: var(--hd-fg-1); font-family: var(--hd-font-mono); font-size: 11px; font-weight: 600; background: var(--hd-bg-section, #F4F4F4); padding: 2px 7px; border-radius: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; display: inline-block; } .col-asset-field-value a { color: inherit; text-decoration: none; } .col-asset-field-value a:hover { text-decoration: underline; } .col-asset-row-actions { display: flex; gap: 4px; } .col-asset-iconbtn { width: 28px; height: 28px; border: 1px solid var(--hd-border); background: var(--hd-white); color: var(--hd-fg-2); border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: all .12s var(--hd-easing, ease); } .col-asset-iconbtn:hover { background: var(--hd-red); color: #fff; border-color: var(--hd-red); } /* ─── Tabs card ───────────────────────────────────────────────────── */ .col-tabs-card { padding-top: 0; } /* Drop the generic card top-accent on the tabs card so the tab strip sits flush. */ .col-tabs-card::before { display: none; } .col-tabs-card .card-header { display: none; } .col-tabs { border-bottom: 1px solid var(--hd-border, #D8D8D8); background: var(--hd-white); padding: 0 8px; margin-bottom: 0; } .col-tabs .nav-link { font-family: var(--hd-font-body); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--hd-fg-3); padding: 14px 18px; border: none; border-bottom: 2px solid transparent; background: transparent; display: inline-flex; align-items: center; gap: 8px; position: relative; margin-bottom: -1px; transition: color .12s; } .col-tabs .nav-link:hover { color: var(--hd-fg-1); background: transparent; } .col-tabs .nav-link.active { color: var(--hd-fg-1); background: transparent; border-bottom-color: var(--hd-red); } .col-tab-badge { font-family: var(--hd-font-mono); font-size: 10px; background: var(--hd-bg-section, #F4F4F4); color: var(--hd-fg-2); padding: 1px 7px; border-radius: 999px; } .col-tab-badge--red { background: var(--hd-red); color: #fff; } .col-tab-content { background: var(--hd-white); } .col-tab-hdr { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 10px; border-bottom: 1px solid var(--hd-border-light, #EBEBEB); gap: 12px; } .col-tab-title { font-family: var(--hd-font-display); font-size: 16px; letter-spacing: 1px; text-transform: uppercase; font-weight: 400; margin: 0; color: var(--hd-fg-1); } .col-tab-sub { font-size: 11px; color: var(--hd-fg-3); margin-top: 2px; } .col-tab-empty { padding: 40px 18px; text-align: center; color: var(--hd-fg-3); font-size: 12px; } .col-tab-activity { padding: 0; } /* Audit timeline card is already a full card; drop its outer card chrome when it's rendered inside a tab-pane so we don't get card-in-card stacking. */ .col-tab-activity > .card { border: none; box-shadow: none !important; margin: 0 !important; border-radius: 0; } .col-tab-activity > .card::before { display: none; } .col-tab-activity > .card:hover { transform: none; } .col-tab-activity > .card .card-header { background: var(--hd-white); } /* ─── Callout rows inside the Callouts tab ────────────────────────── */ .col-callout-list { padding: 0; } .col-callout-row { display: grid; grid-template-columns: auto auto 1fr auto auto auto; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--hd-border-light, #EBEBEB); text-decoration: none; color: inherit; transition: background .12s var(--hd-easing, ease); } .col-callout-row:last-child { border-bottom: none; } .col-callout-row:hover { background: rgba(232, 62, 48, 0.02); color: inherit; } .col-callout-kind { font-family: var(--hd-font-mono); font-size: 10px; font-weight: 700; background: var(--hd-bg-section, #F4F4F4); color: var(--hd-fg-2); padding: 3px 7px; border-radius: 2px; } .col-callout-meta { font-size: 11px; color: var(--hd-fg-3); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .col-callout-meta strong { color: var(--hd-fg-1); font-family: var(--hd-font-mono); font-weight: 700; } .col-callout-id { font-family: var(--hd-font-mono); font-weight: 700; color: var(--hd-fg-1); } .col-callout-engineer { font-size: 12px; color: var(--hd-fg-1); white-space: nowrap; } .col-callout-chev { color: var(--hd-fg-3); } .col-callout-meta .dx-icon-product { vertical-align: middle; position: relative; top: -1px; } .col-callout-notes { padding: 10px 18px 14px 18px; background: var(--hd-bg-section, #F9F9F9); border-bottom: 1px solid var(--hd-border-light, #EBEBEB); display: flex; flex-direction: column; gap: 10px; } .col-callout-notes-row { display: flex; flex-direction: column; gap: 4px; } .col-callout-notes-row--completion { padding-top: 10px; border-top: 1px dashed var(--hd-border-light, #D8D8D8); } .col-callout-notes-label { font-size: 10px; font-weight: 700; font-family: var(--hd-font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--hd-fg-3); } .col-callout-notes-body { font-size: 13px; line-height: 1.55; color: var(--hd-fg-1); white-space: pre-wrap; word-break: break-word; padding: 0 2px; } /* ─── Licenses tab rows ───────────────────────────────────────────── */ .col-lic-list { padding: 0; } .col-lic-list .list-group-item { padding: 12px 18px; border: none; border-bottom: 1px solid var(--hd-border-light, #EBEBEB); } .col-lic-list .list-group-item:last-child { border-bottom: none; } .col-lic-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; } .col-lic-name { font-weight: 700; color: var(--hd-red); text-decoration: none; } .col-lic-name:hover { text-decoration: underline; } .col-lic-asset { font-family: var(--hd-font-mono); font-size: 11px; color: var(--hd-fg-3); } .col-lic-date { font-family: var(--hd-font-mono); font-size: 12px; white-space: nowrap; } .col-files-list .list-group-item { padding: 8px 18px; border: none; border-bottom: 1px solid var(--hd-border-light, #EBEBEB); } .col-files-list .list-group-item:last-child { border-bottom: none; } /* ─── Validity rail card ───────────────────────────────────────────── */ .col-validity-card .card-header, .col-related-card .card-header { padding: 12px 16px 8px; } .col-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--hd-fg-3); margin-bottom: 2px; } .col-validity-row { padding: 12px 16px; border-bottom: 1px solid var(--hd-border-light, #EBEBEB); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .col-validity-row:last-child { border-bottom: none; } .col-validity-msg { font-size: 12px; color: var(--hd-fg-1); line-height: 1.4; } .col-validity-action { font-size: 10px !important; padding: 5px 10px !important; text-decoration: none !important; } /* ─── Related rail card ────────────────────────────────────────────── */ .col-related-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; gap: 10px; border-bottom: 1px solid var(--hd-border-light, #EBEBEB); text-decoration: none; color: inherit; transition: background .12s var(--hd-easing, ease); } .col-related-row:last-child { border-bottom: none; } .col-related-row:hover { background: rgba(232, 62, 48, 0.03); color: inherit; } .col-related-label { font-size: 9px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--hd-fg-3); } .col-related-value { font-size: 12px; font-weight: 700; color: var(--hd-fg-1); margin-top: 2px; } /* ─── QR modal content ─────────────────────────────────────────────── */ .col-qr-large { max-width: 320px; width: 100%; height: auto; image-rendering: pixelated; } /* ─── Responsive tweaks ────────────────────────────────────────────── */ @media (max-width: 767px) { .col-hdr-title { font-size: 26px; letter-spacing: 1px; } .col-callout-row { grid-template-columns: auto 1fr; grid-row-gap: 6px; } .col-callout-row .col-callout-engineer, .col-callout-row .col-callout-chev { display: none; } .col-lic-row { grid-template-columns: 1fr auto; } .col-lic-asset { grid-column: 1 / -1; } } /* ── Markdown / Help page chrome ───────────────────────────────────────────── Used by Views/Home/Help.cshtml and any future markdown rendering surface (release notes, in-app docs). All colours/backgrounds resolve to tokens that already flip with --bs-theme, so no per-theme block is needed. */ .markdown-body { line-height: 1.55; } .markdown-body h1 { font-size: 1.75rem; margin-top: 0; padding-top: 1rem; scroll-margin-top: 1rem; } .markdown-body h2 { font-size: 1.35rem; margin-top: 2rem; padding-top: 0.5rem; border-top: 1px solid var(--hd-border-light); scroll-margin-top: 1rem; } .markdown-body h3 { font-size: 1.1rem; margin-top: 1.5rem; scroll-margin-top: 1rem; } .markdown-body h4 { font-size: 1rem; margin-top: 1rem; scroll-margin-top: 1rem; } .markdown-body code { background: var(--hd-bg-section); padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.85rem; } .markdown-body pre { background: var(--hd-bg-section); padding: 0.75rem; border-radius: 4px; overflow-x: auto; } .markdown-body pre code { background: transparent; padding: 0; } .markdown-body table { border-collapse: collapse; margin-bottom: 1rem; } .markdown-body th, .markdown-body td { border: 1px solid var(--hd-border); padding: 0.3rem 0.6rem; font-size: 0.9rem; } .markdown-body th { background: var(--hd-bg-section); } .markdown-body blockquote { border-left: 3px solid var(--hd-red); padding-left: 1rem; color: var(--hd-text-muted); margin: 1rem 0; } .markdown-body ul, .markdown-body ol { padding-left: 1.5rem; } #helpToc a { display: block; padding: 0.2rem 0.4rem; color: var(--hd-text-secondary); text-decoration: none; border-radius: 3px; } #helpToc a:hover { background: var(--hd-bg-section); } #helpToc a.toc-h2 { padding-left: 0.8rem; color: var(--hd-text-secondary); } #helpToc a.toc-h3 { padding-left: 1.6rem; font-size: 0.85rem; color: var(--hd-text-muted); } #helpToc a.toc-h4 { padding-left: 2.4rem; font-size: 0.8rem; color: var(--hd-text-muted); } #helpToc a.toc-active { background: var(--hd-red-surface); color: var(--hd-red); font-weight: 600; } .help-match-hit { background: var(--hd-amber-bg-soft); } /* ── Global search (top nav widget + dropdown) ─────────────────────────────── Sits between the main nav and the right-aligned user menu. Dark-mode aware via the same --hd-* tokens used elsewhere. The dropdown is rendered inside the wrapper so it inherits z-index from the navbar; its absolute position anchors against the wrapper, not the page. Layout: the wrapper hugs the user-menu cluster (no auto margins), so the sequence reads [main-nav me-auto][search ms-auto][user-nav]. Width adapts from 320px on tight desktops to 380px when there's plenty of space. */ .gs-wrapper { position: relative; flex: 0 1 380px; margin-left: auto; margin-right: 0.5rem; min-width: 220px; } .gs-input-wrap { position: relative; display: flex; align-items: center; } /* Match the site's input convention (2px radius, see .dx-texteditor at ~line 1136). The navbar input still sits on a dark background so the colours are translucent-white. */ .gs-input { width: 100%; height: 36px; padding: 0 70px 0 36px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 2px; color: #f2f2f0; font-size: 0.9rem; transition: background-color 120ms, border-color 120ms, box-shadow 120ms; outline: none; } .gs-input::placeholder { color: rgba(255, 255, 255, 0.55); } .gs-input:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); } .gs-input:focus { background: rgba(255, 255, 255, 0.18); border-color: var(--hd-red-light); box-shadow: 0 0 0 3px rgba(232, 62, 48, 0.12); /* match .dx-texteditor.dx-state-focused */ } .gs-input::-webkit-search-cancel-button { display: none; } /* native X — we use Esc */ .gs-input-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: rgba(255, 255, 255, 0.6); pointer-events: none; } .gs-input-wrap:focus-within .gs-input-icon { color: rgba(255, 255, 255, 0.85); } .gs-input-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; padding: 2px 6px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.20); border-radius: 2px; color: rgba(255, 255, 255, 0.7); font-size: 0.7rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1; pointer-events: none; user-select: none; } .gs-input:focus ~ .gs-input-kbd, .gs-input-wrap:focus-within .gs-input-kbd { opacity: 0; } .gs-kbd-plus { opacity: 0.5; } /* Dropdown — matches the input width by default (left:0; right:0 on the wrapper). On narrow inputs (tight desktops, mobile collapsed-nav) we widen below the input via a min-width so result rows stay readable. Right-anchored so it never spills off the right edge of a wide viewport. */ .gs-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 360px; width: max(100%, 360px); max-width: min(480px, calc(100vw - 1rem)); max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--hd-border); border-radius: 4px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10); color: var(--hd-text-primary); z-index: 1050; animation: gs-dropdown-in 120ms ease-out; } [data-bs-theme="dark"] .gs-dropdown { background: #1F1F1D; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30); } @keyframes gs-dropdown-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Empty / loading / no-results state cards */ .gs-state { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.25rem; color: var(--hd-text-muted); font-size: 0.9rem; } .gs-state-icon { flex: 0 0 auto; width: 18px; height: 18px; opacity: 0.65; } .gs-spinner { width: 16px; height: 16px; border: 2px solid var(--hd-border); border-top-color: var(--hd-red); border-radius: 50%; animation: gs-spin 700ms linear infinite; } @keyframes gs-spin { to { transform: rotate(360deg); } } /* Result groups */ .gs-results { padding: 0.25rem 0; } .gs-group { padding: 0.25rem 0; } .gs-group + .gs-group { border-top: 1px solid var(--hd-border-light); } .gs-group-header { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem 0.3rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hd-text-muted); } .gs-group-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; } .gs-group-icon .gs-entity-icon { width: 14px; height: 14px; } .gs-group-label { flex: 1; } .gs-group-count { background: var(--hd-bg-section); padding: 1px 6px; border-radius: 8px; font-weight: 500; font-size: 0.65rem; color: var(--hd-text-secondary); } /* Each result row */ .gs-result { display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.85rem; color: var(--hd-text-primary); text-decoration: none; cursor: pointer; border-left: 2px solid transparent; transition: background-color 80ms, border-color 80ms; } .gs-result:hover, .gs-result-active { background: var(--hd-red-bg-soft); border-left-color: var(--hd-red); text-decoration: none; color: var(--hd-text-primary); } .gs-result-icon { flex: 0 0 auto; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--hd-text-muted); } .gs-result-icon .gs-entity-icon { width: 16px; height: 16px; } .gs-result-active .gs-result-icon { color: var(--hd-red); } /* Generic entity icon — used inside group headers, result rows, and the full-page /Search view. Inherits colour from the surrounding text via currentColor. */ .gs-entity-icon { display: block; color: currentColor; } .gs-entity-icon-lg { width: 18px; height: 18px; } .gs-page-group-header .gs-entity-icon { color: var(--hd-red); } .gs-result-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .gs-result-title-row { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; } .gs-result-title { font-weight: 500; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; } .gs-result-subtitle { font-size: 0.75rem; color: var(--hd-text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; flex: 0 0 auto; } .gs-result-context { font-size: 0.75rem; color: var(--hd-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gs-mark { background: var(--hd-amber-bg-soft); color: inherit; padding: 0; border-radius: 2px; font-weight: 600; } .gs-overflow { display: block; padding: 0.3rem 0.85rem 0.5rem 2.45rem; font-size: 0.75rem; color: var(--hd-red); text-decoration: none; font-weight: 500; } .gs-overflow:hover { text-decoration: underline; color: var(--hd-red-dark); } .gs-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.85rem; border-top: 1px solid var(--hd-border-light); background: var(--hd-bg-section); font-size: 0.75rem; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .gs-see-all { color: var(--hd-red); font-weight: 500; text-decoration: none; } .gs-see-all:hover { text-decoration: underline; } .gs-elapsed { color: var(--hd-text-muted); font-family: ui-monospace, monospace; font-size: 0.7rem; } /* Mobile: search input drops below the main nav rows when the navbar collapses. The dropdown spans the available width with the same min-width safety. */ @media (max-width: 991.98px) { .gs-wrapper { flex: 1 1 auto; margin: 0.5rem 0; order: 99; width: 100%; min-width: 0; } .gs-dropdown { width: 100%; max-width: calc(100vw - 1rem); min-width: 0; left: 0; right: auto; } .gs-input-kbd { display: none; } /* no physical keyboard expectation */ } /* Tight desktops (lg breakpoint, ≥992px but ≤1199px): there isn't enough room for brand + main nav + a full-width search + the right-side cluster. Collapse the search to a 36×36 icon button; clicking it opens the dropdown (the input lives inside the dropdown in this mode so the user can still type). At xl+ the full input is back. */ @media (min-width: 992px) and (max-width: 1199.98px) { .gs-wrapper { flex: 0 0 36px; min-width: 0; margin-right: 0.5rem; } .gs-wrapper .gs-input, .gs-wrapper .gs-input-kbd { display: none; } .gs-wrapper .gs-input-icon { position: static; transform: none; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.85); } .gs-input-wrap { width: 36px; height: 36px; border-radius: 2px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 120ms; } .gs-input-wrap:hover { background: rgba(255, 255, 255, 0.18); } /* When in compact mode and the dropdown is open, the dropdown itself shows an inline input at the top so the user can type. Position it as a wider panel (right-anchored) since the trigger is just a 36px button. */ .gs-wrapper.gs-compact-open .gs-input-wrap { background: rgba(255, 255, 255, 0.22); border-color: var(--hd-red-light); } .gs-dropdown { width: 420px; min-width: 420px; } .gs-compact-input-wrap { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--hd-border-light); } .gs-compact-input-wrap .gs-input-icon-inline { width: 16px; height: 16px; color: var(--hd-text-muted); flex: 0 0 auto; } .gs-compact-input { flex: 1; border: none; outline: none; background: transparent; color: var(--hd-text-primary); font-size: 0.9rem; padding: 4px 0; } .gs-compact-input:focus-visible { outline: 2px solid var(--hd-red); outline-offset: 2px; border-radius: 2px; } } /* The compact-mode inline input is hidden at xl+ (the navbar input is the canonical typing surface there). */ @media (min-width: 1200px) { .gs-compact-input-wrap { display: none; } } /* And it's also hidden at < lg (mobile collapsed nav already shows the full input). */ @media (max-width: 991.98px) { .gs-compact-input-wrap { display: none; } } /* Full-page results view */ .gs-page-header { margin-bottom: 1.25rem; } /* Match the site convention (.dx-texteditor: 2px radius, white in light mode, dark in dark mode). Plain HTML input, no DevExtreme — explicit dark-mode override below. */ .gs-page-input { width: 100%; max-width: 600px; height: 38px; padding: 0 1rem 0 40px; background: #fff; border: 1px solid var(--hd-border); border-radius: 2px; color: var(--hd-text-primary); font-size: 0.95rem; outline: none; } .gs-page-input:focus { border-color: var(--hd-red); box-shadow: 0 0 0 3px rgba(232, 62, 48, 0.12); } [data-bs-theme="dark"] .gs-page-input { background: #1F1F1D; color: var(--hd-text-primary); border-color: var(--hd-border); } [data-bs-theme="dark"] .gs-page-input::placeholder { color: var(--hd-text-muted); } .gs-page-input-wrap { position: relative; max-width: 600px; } .gs-page-input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--hd-text-muted); pointer-events: none; } .gs-page-summary { margin: 0.5rem 0 1rem; color: var(--hd-text-muted); font-size: 0.85rem; } .gs-page-group { margin-bottom: 1.5rem; } .gs-page-group-header { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--hd-red); margin-bottom: 0.5rem; } .gs-page-group-header h4 { margin: 0; font-size: 1rem; flex: 1; } .gs-page-group-count { background: var(--hd-red-bg-soft); color: var(--hd-red); padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; } .gs-page-result-list { list-style: none; padding: 0; margin: 0; } .gs-page-result-list li { border-bottom: 1px solid var(--hd-border-light); } .gs-page-result-list li:last-child { border-bottom: none; } .gs-page-result { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.5rem; color: var(--hd-text-primary); text-decoration: none; } .gs-page-result:hover { background: var(--hd-red-bg-soft); color: var(--hd-text-primary); } .gs-page-result .gs-result-icon { width: 24px; } .gs-page-result .gs-result-icon .gs-entity-icon { width: 18px; height: 18px; } .gs-page-empty { padding: 3rem 1rem; text-align: center; color: var(--hd-text-muted); } .gs-page-empty-icon { display: block; width: 48px; height: 48px; margin: 0 auto 0.75rem; opacity: 0.4; }