/* ============================================================================ opsyte.css — the Opsyte design system ("On the Floor+", October 2026) ---------------------------------------------------------------------------- ONE stylesheet for the whole portal, written from the design canvas (Documentation/UI/README.md explains every section and names the artboards). Anything Bootstrap already has is written with Bootstrap's class names and re-skinned in section 6; the canvas's own names remain for compositions Bootstrap has no equivalent of. A page's one-off layout belongs in its scoped .razor.css, not here. Sections 1. Tokens custom properties + the Bootstrap variable bridge 2. Base html/body, type, links, utilities 3. Shell sidebar (.sb*), top bar (.tb*), page frame (.pg) 4. Primitives buttons, cards, inputs, tags, tables, modals, menus… 5. Compositions KPI tiles, report rail, record modals, chart cards… 6. Re-skin Bootstrap + Havit (Hx*) + Blazored + alertify 7. Responsive phone-width rules then the top-bar menus, the stock kit (sk-*) and smaller shared pieces, each under its own ---- heading (after section 7 because some of them refine rules above) 8. Third-party editors sceditor (contract templates) Rules of the road (see the guide for the long version): - Never add a hex colour to a page: use a token. - Pills are 999px. Cards are 18px. Inputs are 12px. Modals are 22px. - Status colours (ok/warn/bad/info/nu) are tonal: tinted fill + deep text. ============================================================================ */ /* ============================================================================ 1. TOKENS Light values on :root and on anything marked data-bs-theme="light" (the sidebar, legacy pages), dark values under data-bs-theme="dark" (set on by wwwroot/js/theme.js from the user's light / dark / system choice). Everything else in this file reads these tokens, so it follows the theme. ============================================================================ */ :root, [data-bs-theme="light"] { /* brand greens */ --ui-green: #1F6B4A; --ui-green-deep: #164F37; /* deep green as text (on a tint or the page); --ui-green-deep is the fill of bands and heads */ --ui-green-ink: #164F37; /* green and red as a fill behind white text (buttons, badges, avatars); a shade deeper in dark mode */ --ui-green-fill: #1F6B4A; --ui-danger-fill: #B3261E; --ui-green-mid: #2E8B62; --ui-mint: #7DC8A5; --ui-mint-tint: #DDF1E6; --ui-mint-line: #B9E0CB; --ui-mint-line-2: #CFE6D9; --ui-mint-line-3: #BFDFCD; --ui-green-wash: #F1F8F4; --ui-green-wash-2: #F2FAF5; /* sidebar */ --ui-sb-bg: #13231B; --ui-sb-hover: #1D3328; --ui-sb-ai: #1A2E24; --ui-sb-text: #C9D6CF; --ui-sb-muted: #7E9188; --ui-sb-section: #6E8278; --ui-sb-rule: #2A4035; --ui-sb-w: 248px; --ui-sb-mini-w: 72px; /* surfaces */ --ui-bg: #F7F5F0; --ui-surface: #FFFFFF; --ui-surface-2: #FBFAF6; --ui-panel: #F3F0E8; --ui-ghost: #ECE8DF; /* lines */ --ui-line: #E2DED4; --ui-line-2: #ECE8DF; --ui-line-3: #F0ECE3; --ui-line-4: #F3F0E8; --ui-line-5: #E9E5DB; --ui-line-hover: #C9C3B5; --ui-dash: #D8D2C4; --ui-chip: #DDD8CC; /* ink */ --ui-ink: #1B2620; --ui-ink-2: #2D3832; --ui-ink-3: #45504A; --ui-muted: #5E6A63; --ui-muted-2: #8A948E; --ui-muted-3: #9C9585; --ui-muted-4: #7E8A83; /* text on a fill: --ui-on-fill on saturated green / red / blue / the sidebar (white in both themes), --ui-on-ink on an ink fill (selected segments, tooltips, btn-dark), which inverts with the ink */ --ui-on-fill: #FFFFFF; --ui-on-ink: #FFFFFF; /* status (tonal fill / deep text) */ --ui-ok-bg: #DDF1E6; --ui-ok: #164F37; --ui-warn-bg: #FFF1D6; --ui-warn: #7A4D00; --ui-bad-bg: #FCE4E2; --ui-bad: #8C1D18; --ui-nu-bg: #ECE8DF; --ui-nu: #45504A; --ui-info-bg: #DCE7FA; --ui-info: #17306B; --ui-danger: #B3261E; --ui-danger-line: #F2C6C1; --ui-danger-wash: #FFF4F2; --ui-danger-wash-2: #FFF7F6; --ui-warn-wash: #FFF6E0; --ui-info-wash: #EEF3FB; --ui-warn-ring: #F0D9A0; --ui-warn-card: #FFF8E6; --ui-amber: #E39A3B; --ui-gold: #A0782C; --ui-c1-bg: #E6E8FA; --ui-c1: #2F3A8F; --ui-c5-bg: #F3E8FA; --ui-c5: #5B2A7A; /* AI */ --ui-ai-gradient: linear-gradient(90deg, #6FA8F5, #7DC8A5, #E7C66B); /* charts (see guide §Charts) */ --ui-chart-ink: #1B2620; --ui-chart-amber: #E39A3B; --ui-chart-mint: #DDF1E6; --ui-chart-purple: #8B6FC9; --ui-chart-green: #7FB24A; --ui-chart-orange: #F0A35E; --ui-chart-pink: #E77C8E; --ui-chart-blue: #4F8FD8; --ui-chart-grid: #EEEAE1; --ui-chart-axis: #C9C3B5; /* radii */ --ui-r-pill: 999px; --ui-r-modal: 22px; --ui-r-card: 18px; --ui-r-box: 16px; --ui-r-inner: 14px; --ui-r-input: 12px; --ui-r-sm: 10px; --ui-r-xs: 9px; /* shadows */ --ui-shadow-card: 0 1px 0 #E9E5DB; --ui-shadow-dd: 0 20px 50px rgba(0, 0, 0, .18); --ui-shadow-modal: 0 24px 60px rgba(0, 0, 0, .25); --ui-shadow-fab: 0 6px 18px rgba(0, 0, 0, .18); --ui-shadow-sb: 12px 0 32px rgba(0, 0, 0, .22); --ui-scrim: rgba(19, 35, 27, .45); /* report heat (lo → hi) */ --ui-heat-lo: #F2C6C1; --ui-heat-mid: #F3F0E8; --ui-heat-hi: #7DC8A5; --ui-star: #E0A526; /* leave colours (Holiday / My Holiday month grid): the canvas values, data-meaningful */ --ui-leave-pending: #D9D6CE; --ui-leave-holiday: #E3D4F3; --ui-leave-unpaid: #D4E6F7; --ui-leave-lieu: var(--ui-ok-bg); --ui-leave-restricted: #E5484D; --ui-leave-restricted-cell: #F5B5B2; --ui-day-weekend: #F3F1EC; --ui-day-today: #FFF7D6; /* tile tones used by Staff Overview / Manage Staff / Contracts */ --ui-tile-blue: #3F7FC4; --ui-tile-blue-deep: #2D639E; --ui-tile-grey: #6B746F; --ui-tile-grey-deep: #535B56; --ui-tile-purple: #6E55A6; --ui-tile-purple-deep: #563F87; --ui-purple: #5B2A86; --ui-purple-bg: #EFE4FA; --ui-purple-tile: #EAE1F8; --ui-purple-tile-ink: #3F2373; --ui-body: #45504A; /* rota leave chips and rank medals */ --ui-lv-holiday: #8E2F55; --ui-lv-holiday-bg: #FBE0EA; --ui-lv-sick: #8A4A1C; --ui-lv-sick-bg: #FDE6D6; --ui-lv-lieu: #5B3D8C; --ui-lv-lieu-bg: #ECE3F7; --ui-lv-unpaid: #1F4E80; --ui-lv-unpaid-bg: #DCEBFA; --ui-gold-rank: #E0A526; --ui-silver-rank: #A9B0AC; --ui-bronze-rank: #C47A3D; --ui-ai-gold: #E8C36A; /* Global Admin landing section bands (S-GlobalAdmin) */ --ui-ga-staffing: #6FBF92; --ui-ga-companies: #98B9E3; --ui-ga-marketing: #3E4A59; --ui-ga-integrations: #FF6B6B; --ui-ga-reports: #A48AD4; --ui-ga-invoice: #C7B7E4; --ui-ga-dot: #E7A93B; /* rota shift states (artboard Rota-ShiftColours; week grid and day view) and rota accents */ --ui-shift-own-bg: #FFF1BF; --ui-shift-own-bar: #E6B422; --ui-shift-apr-bg: #DDF1E6; --ui-shift-apr-bar: #1F6B4A; --ui-shift-apr-ink: #164F37; --ui-shift-oth-bg: #EFE3CF; --ui-shift-oth-ink: #5A4630; --ui-shift-nw-bg: #ECE8DF; --ui-shift-nw-ink: #45504A; --ui-shift-sd-line: #E2DED4; --ui-shift-hol-bg: #F6E3EF; --ui-shift-hol-bar: #B8508F; --ui-shift-hol-ink: #7A2A5B; --ui-shift-ssl-bg: #FDE3CC; --ui-shift-ssl-bar: #D9731F; --ui-shift-ssl-ink: #7A3E0A; --ui-shift-lieu-bg: #ECE4FA; --ui-shift-lieu-bar: #7A55C7; --ui-shift-lieu-ink: #4B2F8A; --ui-shift-unp-bg: #DCEFF8; --ui-shift-unp-bar: #2F86B5; --ui-shift-unp-ink: #174D6B; --ui-shift-ntd-bg: #FDF0F1; --ui-shift-ntd-cell: #FBEDED; --ui-shift-hover: #1F6B4A; --ui-rota-note: #2F5FC4; --ui-rota-note-line: #9DB8E8; --ui-rota-pie: #C46A1A; --ui-rota-pie-line: #F2B26B; --ui-rota-flex-bg: #FFEBDD; --ui-rota-label: #16736A; /* hover shades of the tonal buttons */ --ui-mint-hover: #CBE9D8; --ui-info-hover: #C9D8F5; --ui-warn-hover: #FBE4B8; --ui-danger-deep: #9E211A; /* type */ --ui-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --ui-ease: cubic-bezier(.2, .7, .2, 1); /* ---- Bootstrap bridge: Havit (Hx*) components render Bootstrap markup; these make them ours ---- */ --bs-body-font-family: var(--ui-font); --bs-body-font-size: 1rem; --bs-body-line-height: 1.5; --bs-body-color: var(--ui-ink); --bs-body-color-rgb: 27, 38, 32; --bs-body-bg: var(--ui-bg); --bs-body-bg-rgb: 247, 245, 240; --bs-emphasis-color: var(--ui-ink); --bs-emphasis-color-rgb: 27, 38, 32; --bs-secondary-color: var(--ui-muted); --bs-secondary-color-rgb: 94, 106, 99; --bs-secondary-bg: var(--ui-surface-2); --bs-tertiary-color: var(--ui-muted-2); --bs-tertiary-bg: var(--ui-panel); --bs-heading-color: var(--ui-ink); --bs-link-color: var(--ui-green); --bs-link-color-rgb: 31, 107, 74; --bs-link-hover-color: var(--ui-green-ink); --bs-link-hover-color-rgb: 22, 79, 55; --bs-border-color: var(--ui-line); --bs-border-color-translucent: rgba(27, 38, 32, .08); --bs-border-radius: var(--ui-r-input); --bs-border-radius-sm: var(--ui-r-sm); --bs-border-radius-lg: var(--ui-r-card); --bs-border-radius-xl: var(--ui-r-modal); --bs-border-radius-pill: var(--ui-r-pill); --bs-primary: var(--ui-green); --bs-primary-rgb: 31, 107, 74; --bs-primary-text-emphasis: var(--ui-green-ink); --bs-primary-bg-subtle: var(--ui-mint-tint); --bs-primary-border-subtle: var(--ui-mint-line); --bs-secondary: var(--ui-muted); --bs-secondary-rgb: 94, 106, 99; --bs-secondary-text-emphasis: var(--ui-ink-3); --bs-secondary-bg-subtle: var(--ui-panel); --bs-secondary-border-subtle: var(--ui-line); --bs-success: var(--ui-green); --bs-success-rgb: 31, 107, 74; --bs-success-text-emphasis: var(--ui-ok); --bs-success-bg-subtle: var(--ui-ok-bg); --bs-success-border-subtle: var(--ui-mint-line); --bs-info: var(--ui-info); --bs-info-rgb: 23, 48, 107; --bs-info-text-emphasis: var(--ui-info); --bs-info-bg-subtle: var(--ui-info-bg); --bs-info-border-subtle: #C5D4F2; --bs-warning: var(--ui-amber); --bs-warning-rgb: 227, 154, 59; --bs-warning-text-emphasis: var(--ui-warn); --bs-warning-bg-subtle: var(--ui-warn-bg); --bs-warning-border-subtle: #F3DDAE; --bs-danger: var(--ui-danger); --bs-danger-rgb: 179, 38, 30; --bs-danger-text-emphasis: var(--ui-bad); --bs-danger-bg-subtle: var(--ui-bad-bg); --bs-danger-border-subtle: var(--ui-danger-line); --bs-light: var(--ui-bg); --bs-light-rgb: 247, 245, 240; --bs-light-bg-subtle: var(--ui-surface); --bs-dark: var(--ui-ink); --bs-dark-rgb: 27, 38, 32; --bs-dark-bg-subtle: var(--ui-ink-3); --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .25); --bs-form-valid-color: var(--ui-green); --bs-form-valid-border-color: var(--ui-green); --bs-form-invalid-color: var(--ui-danger); --bs-form-invalid-border-color: var(--ui-danger); /* Havit calendar (HxInputDate / HxCalendar) */ --hx-calendar-day-selected-background: var(--ui-green-fill); --hx-calendar-day-selected-color: var(--ui-on-fill); --hx-calendar-day-selected-border: 0; --hx-calendar-day-hover-background: var(--ui-mint-tint); /* ---- legacy aliases still referenced by un-migrated pages; remove with the last reference ---- */ --operator-ai-gradient: var(--ui-ai-gradient); --operator-ai-gradient-subtle: var(--ui-ai-gradient); --operator-background: var(--ui-surface); --table-heading-colour: var(--ui-mint-tint); --table-outline-colour: var(--ui-line); --rota-danger: var(--ui-danger); --scrollbar-width: 16px; --holiday-lilac: 200, 127, 182; --holiday-light-blue: 145, 215, 236; --holiday-light-grey: 175, 188, 200; --holiday-light-green: 140, 230, 180; } /* Dark theme. Surfaces and lines take the sidebar's green-black; ink turns light; tonal status pairs become a dark tinted fill with light text; green is a touch brighter so it reads as a fill and as link text. Data colours (tiles, Global Admin bands, chart series, rank medals) keep their light-theme values. */ [data-bs-theme="dark"] { color-scheme: dark; --ui-green: #3A9A6D; --ui-green-deep: #1E5C41; --ui-green-ink: #8FD3B0; --ui-green-fill: #2F8560; --ui-danger-fill: #C0392F; --ui-green-mid: #48A97B; --ui-mint-tint: #1E3A2D; --ui-mint-line: #2E5B45; --ui-mint-line-2: #2A4A3B; --ui-mint-line-3: #2E5444; --ui-green-wash: #16241D; --ui-green-wash-2: #172820; --ui-bg: #101613; --ui-surface: #171F1B; --ui-surface-2: #1B2420; --ui-panel: #212B26; --ui-ghost: #28332D; --ui-line: #344039; --ui-line-2: #2B3631; --ui-line-3: #26302B; --ui-line-4: #222C27; --ui-line-5: #2B3631; --ui-line-hover: #4C5952; --ui-dash: #3D4943; --ui-chip: #3A4640; --ui-ink: #E6ECE8; --ui-ink-2: #D2DAD5; --ui-ink-3: #B5C0BA; --ui-muted: #96A29B; --ui-muted-2: #7F8B85; --ui-muted-3: #8F9890; --ui-muted-4: #8A958F; --ui-on-ink: #101613; --ui-ok-bg: #1C3A2C; --ui-ok: #9ADBB8; --ui-warn-bg: #3B2F15; --ui-warn: #F0C46E; --ui-bad-bg: #3E201E; --ui-bad: #F4A8A0; --ui-nu-bg: #28332D; --ui-nu: #C1CBC5; --ui-info-bg: #1D2B45; --ui-info: #AAC3F3; --ui-danger: #E0625A; --ui-danger-line: #5C2F2B; --ui-danger-wash: #2A1A18; --ui-danger-wash-2: #2D1C1A; --ui-warn-wash: #2B2414; --ui-info-wash: #19223A; --ui-warn-ring: #6A5122; --ui-warn-card: #2E2714; --ui-amber: #E8A54C; --ui-gold: #D8B064; --ui-c1-bg: #252A4D; --ui-c1: #B9C0F6; --ui-c5-bg: #33223F; --ui-c5: #DCB9F2; --ui-chart-ink: #E6ECE8; --ui-chart-mint: #2E5B45; --ui-chart-grid: #2B3631; --ui-chart-axis: #5A6760; --ui-shadow-card: 0 1px 0 rgba(0, 0, 0, .4); --ui-shadow-dd: 0 20px 50px rgba(0, 0, 0, .55); --ui-shadow-modal: 0 24px 60px rgba(0, 0, 0, .65); --ui-shadow-fab: 0 6px 18px rgba(0, 0, 0, .5); --ui-scrim: rgba(0, 0, 0, .6); --ui-heat-lo: #5C2F2B; --ui-heat-mid: #222C27; --ui-heat-hi: #2E7A57; --ui-leave-pending: #3A403C; --ui-leave-holiday: #3A2D4D; --ui-leave-unpaid: #213448; --ui-leave-restricted-cell: #5C2F2B; --ui-day-weekend: #1D2520; --ui-day-today: #3A3418; --ui-purple: #C9A9EE; --ui-purple-bg: #33223F; --ui-purple-tile: #2E2440; --ui-purple-tile-ink: #D6C2F5; --ui-body: #B5C0BA; --ui-lv-holiday: #F0A3C2; --ui-lv-holiday-bg: #3F1F2D; --ui-lv-sick: #F2B68A; --ui-lv-sick-bg: #3D2818; --ui-lv-lieu: #C9B3F0; --ui-lv-lieu-bg: #2E2442; --ui-lv-unpaid: #9EC4EE; --ui-lv-unpaid-bg: #1C2E44; --ui-mint-hover: #264A39; --ui-info-hover: #263759; --ui-warn-hover: #4A3B1A; --ui-danger-deep: #C24A42; --ui-shift-own-bg: #3A3215; --ui-shift-own-bar: #E6B422; --ui-shift-apr-bg: #1C3A2C; --ui-shift-apr-bar: #3A9A6D; --ui-shift-apr-ink: #9ADBB8; --ui-shift-oth-bg: #3A2F22; --ui-shift-oth-ink: #E2C9A6; --ui-shift-nw-bg: #28332D; --ui-shift-nw-ink: #C1CBC5; --ui-shift-sd-line: #3D4943; --ui-shift-hol-bg: #3D2233; --ui-shift-hol-bar: #D46AA9; --ui-shift-hol-ink: #F0A3C9; --ui-shift-ssl-bg: #3D2818; --ui-shift-ssl-bar: #E08A3E; --ui-shift-ssl-ink: #F2B68A; --ui-shift-lieu-bg: #2E2442; --ui-shift-lieu-bar: #9C7BE0; --ui-shift-lieu-ink: #C9B3F0; --ui-shift-unp-bg: #1C2E44; --ui-shift-unp-bar: #4FA3D1; --ui-shift-unp-ink: #9EC4EE; --ui-shift-ntd-bg: #2E1D1F; --ui-shift-ntd-cell: #2B1C1D; --ui-shift-hover: #8FD3B0; --ui-rota-note: #6E95E6; --ui-rota-note-line: #3A5590; --ui-rota-pie: #E8A055; --ui-rota-pie-line: #6B4A22; --ui-rota-flex-bg: #3B2A1C; --ui-rota-label: #6FD0C3; /* Bootstrap's -rgb triplets are literals in the bridge above; these are the dark ones */ --bs-body-color-rgb: 230, 236, 232; --bs-body-bg-rgb: 16, 22, 19; --bs-emphasis-color-rgb: 230, 236, 232; --bs-secondary-color-rgb: 150, 162, 155; --bs-link-color-rgb: 58, 154, 109; --bs-link-hover-color-rgb: 143, 211, 176; --bs-primary-rgb: 58, 154, 109; --bs-success-rgb: 58, 154, 109; --bs-secondary-rgb: 150, 162, 155; --bs-info-rgb: 170, 195, 243; --bs-warning-rgb: 232, 165, 76; --bs-danger-rgb: 224, 98, 90; --bs-light-rgb: 16, 22, 19; --bs-dark-rgb: 230, 236, 232; --bs-border-color-translucent: rgba(230, 236, 232, .1); --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .35); --bs-info-border-subtle: #2C3E66; --bs-warning-border-subtle: #5A4720; } /* ============================================================================ 2. BASE ============================================================================ */ html { font-size: 14px; } body { margin: 0; background: var(--ui-bg); color: var(--ui-ink); font-family: var(--ui-font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--ui-green); text-decoration: none; } a:hover { color: var(--ui-green-ink); } h1, h2, h3, h4, h5, h6 { color: var(--ui-ink); font-weight: 600; } *, *::before, *::after { box-sizing: border-box; } svg, .fa-light { flex: none; } /* Icon sizes in px (icons are Font Awesome Pro light: ). The canvas uses 18 in navigation, 16 in buttons, 14 in pills and tabs, 12 in tags. Without an ico-* class an icon takes the text size. */ .ico-11 { font-size: 11px; } .ico-12 { font-size: 12px; } .ico-13 { font-size: 13px; } .ico-14 { font-size: 14px; } .ico-15 { font-size: 15px; } .ico-16 { font-size: 16px; } .ico-17 { font-size: 17px; } .ico-18 { font-size: 18px; } .ico-20 { font-size: 20px; } .ico-22 { font-size: 22px; } .ico-24 { font-size: 24px; } .ico-26 { font-size: 26px; } .ico-28 { font-size: 28px; } .ico-30 { font-size: 30px; } .ico-34 { font-size: 34px; } .ico-36 { font-size: 36px; } .ico-40 { font-size: 40px; } .ico-46 { font-size: 46px; } .ico-48 { font-size: 48px; } .ico-96 { font-size: 96px; } /* Weather icons (): Font Awesome Pro light shapes with each part in its weather colour. Sized like a Font Awesome icon (1.25em wide, 1em tall, the ico-* class sets the size). */ .wx { --cloud: #7A8C99; --sun: #E0A526; --dark-cloud: #475159; --rain: #5095C7; display: inline-block; width: 1.25em; height: 1em; vertical-align: -.125em; flex: none; overflow: visible; } .wx .wx-cloud { fill: var(--cloud); } .wx .wx-sun { fill: var(--sun); } .wx .wx-dark { fill: var(--dark-cloud); } .wx .wx-rain { fill: var(--rain); } button { font-family: inherit; } ::selection { background: var(--ui-mint-tint); } .tn { font-variant-numeric: tabular-nums; } .dis, .sk-dis { opacity: .45; cursor: not-allowed; } .dk { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-on-ink); } .rowlink { cursor: pointer; } .rowlink:hover { background: var(--ui-surface-2); } .wrap { max-width: 1040px; width: 100%; display: flex; flex-direction: column; gap: 14px; } .nw { max-width: 340px; } .modern-scrollbar { scrollbar-width: thin; scrollbar-color: var(--ui-line-hover) transparent; } .modern-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .modern-scrollbar::-webkit-scrollbar-thumb { background: var(--ui-line-hover); border-radius: 999px; } /* Utilities Bootstrap doesn't have. Our 14px root makes Bootstrap's gap-1/2/3 3.5/7/14px, so gap-3 is the page rhythm and these are the canvas's other gaps. !important like Bootstrap's own utilities. */ .gap-2px { gap: 2px !important; } .gap-4px { gap: 4px !important; } .gap-6px { gap: 6px !important; } .gap-8px { gap: 8px !important; } .gap-10px { gap: 10px !important; } .gap-12px { gap: 12px !important; } .gap-16px { gap: 16px !important; } /* a flex child that may shrink below its content (ellipsis, long words) */ .min-w-0 { min-width: 0 !important; } /* ============================================================================ 3. SHELL — artboards: Shell-Sidebar-Mini, D-* (top bar), every page's frame ============================================================================ */ #page-container.shell { display: block; min-height: 100vh; padding-left: var(--ui-sb-w); background: var(--ui-bg); position: relative; transition: padding-left .22s var(--ui-ease); } #page-container.shell.sb-mini { padding-left: var(--ui-sb-mini-w); } /* ---- sidebar ---- */ .sb { position: fixed; left: 0; top: 0; bottom: 0; z-index: 40; width: var(--ui-sb-w); background: var(--ui-sb-bg); color: var(--ui-sb-text); /* the scrollbar's gutter is always kept, so opening a group that makes the sidebar scroll doesn't narrow its contents (which shrank the logo and nudged everything up); a thin scrollbar's gutter is 10px, so 2px of right padding matches the left's 12px */ padding: 14px 2px 16px 12px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--ui-sb-rule) transparent; scrollbar-gutter: stable; transition: width .22s var(--ui-ease), box-shadow .22s var(--ui-ease), transform .22s var(--ui-ease); } .sbh { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0 14px; } .sbpin { position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: var(--ui-r-sm); border: 0; background: transparent; color: var(--ui-sb-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; } .sbpin:hover { background: var(--ui-sb-hover); color: var(--ui-on-fill); } .sbclose { position: absolute; right: 0; top: 0; display: none; } /* Opsyte word mark: the white text logo, "stock" under it in the Stock workspace */ .sbword { width: 50%; margin-top: 8px; margin-bottom: 16px; display: flex; flex-direction: column; align-items: center; text-decoration: none; transition: transform .25s var(--ui-ease); } .sbword:hover { transform: scale(1.05); } .sbword img { width: 100%; height: auto; display: block; } .sbstock { margin-top: -3px; font: 800 22px/1 var(--ui-font); letter-spacing: -.02em; color: var(--ui-on-fill); } .sbgrp { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-sb-section); text-align: center; } .sbsite { font-size: 13px; font-weight: 600; color: var(--ui-mint); text-align: center; line-height: 1.3; } .sbl { display: flex; flex-direction: column; gap: 2px; } .sbai { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; margin: 0 0 6px; border-radius: var(--ui-r-input); border: 1.5px solid transparent; background: linear-gradient(var(--ui-sb-ai), var(--ui-sb-ai)) padding-box, var(--ui-ai-gradient) border-box; color: var(--ui-on-fill); font: 600 13px var(--ui-font); cursor: pointer; text-align: left; width: 100%; } .sbai:hover { background: linear-gradient(var(--ui-sb-hover), var(--ui-sb-hover)) padding-box, var(--ui-ai-gradient) border-box; } .sbg { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border-radius: var(--ui-r-input); color: var(--ui-sb-text); text-decoration: none; font-size: 13px; font-weight: 500; cursor: pointer; background: transparent; border: 0; width: 100%; text-align: left; font-family: var(--ui-font); white-space: nowrap; } .sbg:hover { background: var(--ui-sb-hover); color: var(--ui-on-fill); } .sbg.on, .sbg.active { background: var(--ui-bg); color: var(--ui-sb-bg); font-weight: 600; } .sbg > span:not(.sbch):not(.badge):not(.sbprev):not(.sblock):not(.stock-nav-alert-count) { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex: 1; } .sbg > .fa-light { font-size: 16px; width: 22px; } .sbai > .fa-light { font-size: 15px; width: 22px; } .sbch { margin-left: auto; opacity: .6; display: flex; transition: transform .18s var(--ui-ease); } .sbch.up { transform: rotate(180deg); } /* an open group: the card starts exactly where the closed row sat (same box, same corners), so its icon and top-left corner stay put; only the sub-items are inset from the card's sides */ .sbcard { background: var(--ui-bg); border-radius: var(--ui-r-input); padding: 0 0 8px; } .sbcard .sbi { margin: 0 4px; } .sbcard .sbg { color: var(--ui-sb-bg); font-weight: 600; } .sbcard .sbg:hover { background: transparent; } .sbi { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 42px; border-radius: var(--ui-r-xs); font-size: 12.5px; color: var(--ui-ink-3); text-decoration: none; } .sbi:hover { background: var(--ui-ghost); color: var(--ui-ink); } .sbi.on, .sbi.active { background: var(--ui-mint-tint); color: var(--ui-sb-bg); font-weight: 600; } .sbprev { margin-left: 6px; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: var(--ui-r-pill); background: var(--ui-warn-bg); color: var(--ui-warn); } .sbsec { display: block; padding: 12px 12px 4px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-sb-section); } /* Collapsible sections (SidebarSectionToggle.razor): the small-caps heading is a button and a closed section shows only this row. Row-sized (36px) so it folds to a tile on the rail without moving. Stock's workspace link (.sblink) shares the look. The .sbmi icon only shows on the rail, standing in for a closed section's modules. */ .sbsec.sbtog { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; margin-top: 4px; padding: 0 12px; border: 0; border-radius: var(--ui-r-input); background: none; cursor: pointer; text-align: left; font-family: var(--ui-font); text-decoration: none; } .sbsec.sbtog > span:first-of-type { flex: 1; } .sbsec.sbtog.open { color: var(--ui-sb-text); } .sbsec.sbtog.on:not(.open) { color: var(--ui-mint); } .sbsec.sbtog:hover { color: var(--ui-on-fill); background: var(--ui-sb-hover); } .sbsec.sbtog:focus-visible { outline: 2px solid var(--ui-mint); outline-offset: 2px; } .sbsec.sbtog .sbch { opacity: .8; } .sbsec.sblink:hover .sbch { transform: translateX(2px); } .sbsec.sbtog .sbmi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 22px; font-size: 16px; color: var(--ui-sb-text); opacity: 0; pointer-events: none; } .sbf { margin-top: auto; padding-top: 18px; text-align: center; font-size: 11px; line-height: 1.5; color: var(--ui-sb-muted); } .sbf .heart { color: #E06C75; display: inline-flex; vertical-align: -2px; } .sb-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 7px; border-radius: var(--ui-r-pill); background: var(--ui-danger-fill); color: var(--ui-on-fill); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .sb-count.info { background: var(--ui-info-bg); color: var(--ui-info); } /* the "Stock" section label at the top of the Stock workspace nav */ .sbl > .sbsec.sbws { margin-top: 2px; } /* Locked sidebar rows: modules the group hasn't switched on, shown to admins; they open a Discover page. */ .sblock { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ui-sb-hover); color: var(--ui-sb-muted); flex: none; } .sbg:hover .sblock, .sbg.active .sblock { color: var(--ui-mint); } /* the group / site name under the logo goes to the dashboard, like the logo */ a.sbhome { text-decoration: none; cursor: pointer; } a.sbhome:hover, a.sbhome:focus-visible { text-decoration: underline; text-underline-offset: 3px; } a.sbsite.sbhome, a.sbsite.sbhome:hover { color: var(--ui-mint); } a.sbgrp.sbhome, a.sbgrp.sbhome:hover { color: var(--ui-sb-section); } /* Collapsed icon rail (sidebar unpinned, desktop). The rail is the full sidebar clipped to 72px: everything keeps its expanded layout, so the icons sit in the same place in both states and hovering only widens the panel and fades the labels in, after a short hover-intent delay. An open section shows one icon per module (the current module highlighted) under a short rule; a closed section is one tile with the section's icon. Artboard "Shell-Sidebar-Mini". */ .sb .sbpin.pin-on { display: none; } .sb-mini .sb .sbpin.pin-off { display: none; } .sb-mini .sb:hover .sbpin.pin-on { display: flex; } .sb-backdrop { display: none; } @media (min-width: 992px) { .sb-mini .sb { width: var(--ui-sb-mini-w); transition: width .2s var(--ui-ease), box-shadow .2s var(--ui-ease); } .sb-mini .sb:hover { width: var(--ui-sb-w); box-shadow: var(--ui-shadow-sb); transition-delay: .12s; } .sb-mini .sb > * { width: calc(var(--ui-sb-w) - 24px); flex: none; } .sb-mini .sb :is(.sbword, .sbgrp, .sbsite, .sbf, .sbg > span, .sbai > span, .sbsec > span, .sbi) { transition: opacity .12s var(--ui-ease); } .sb-mini .sb:hover :is(.sbword, .sbgrp, .sbsite, .sbf, .sbg > span, .sbai > span, .sbsec > span, .sbi) { transition: opacity .16s var(--ui-ease) .22s; } .sb-mini .sb:not(:hover) :is(.sbword, .sbgrp, .sbsite, .sbf, .sbg > span, .sbai > span, .sbsec > span) { opacity: 0; } .sb-mini .sb:not(:hover) .sbsec { color: transparent; } /* rows shrink to a 48px tile, so hover and the current module read as rounded squares */ .sb-mini .sb:not(:hover) :is(.sbg, .sbai) { width: 48px; } /* a group opened while hovering folds to a tile on the rail: light if it holds the current page, as when closed */ .sb-mini .sb:not(:hover) .sbcard { background: transparent; } .sb-mini .sb:not(:hover) .sbcard > .sbg { color: var(--ui-sb-text); background: var(--ui-sb-hover); } .sb-mini .sb:not(:hover) .sbcard > .sbg.on { color: var(--ui-sb-bg); background: var(--ui-bg); } .sb-mini .sb:not(:hover) .sbcard .sbi { display: none; } /* section headings: a closed one folds to its icon tile (light if it holds the current page), an open one to a rule */ .sb-mini .sb:not(:hover) .sbsec.sbtog { width: 48px; } .sb-mini .sb .sbsec.sbtog .sbmi { transition: opacity .12s var(--ui-ease); } .sb-mini .sb:not(:hover) .sbsec.sbtog:not(.open) .sbmi { opacity: 1; } .sb-mini .sb:not(:hover) .sbsec.sbtog.on:not(.open) { background: var(--ui-bg); } .sb-mini .sb:not(:hover) .sbsec.sbtog.on:not(.open) .sbmi { color: var(--ui-sb-bg); } .sb-mini .sb:not(:hover) .sbsec.sbtog.open::after { content: ""; position: absolute; left: 12px; top: 50%; width: 24px; height: 1px; background: var(--ui-sb-rule); } } /* pages not yet on the new system render inside .legacy-ui, pinned to the light theme (MainLayout) */ .legacy-ui { background: var(--ui-bg); color: var(--ui-ink); } /* ---- main column ---- */ .main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; } /* ---- top bar ---- */ .tb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 24px; background: var(--ui-bg); border-bottom: 1px solid var(--ui-line-2); position: sticky; top: 0; z-index: 30; } .tbt { margin: 0; font-size: 15px; font-weight: 600; color: var(--ui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; } /* FocusOnNavigate (Routes.razor) focuses the first h1, which is the top-bar title; Chrome draws a focus ring round it on every navigation. The canvas shows none. Keep a ring for real keyboard focus elsewhere. */ .tbt:focus, .tbt:focus-visible, h1[tabindex="-1"]:focus { outline: none; } /* top-bar menus hang from the bar's bottom edge; Popper's 2px offset left them overlapping it */ .tb .dropdown-menu.show { margin-top: 12px !important; } .tbsp { flex: 1; } .tbclock { height: 38px; padding: 0 14px; border-radius: var(--ui-r-pill); background: var(--ui-surface); box-shadow: 0 0 0 1.5px var(--ui-line) inset; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; } .tbs { display: inline-flex; align-items: center; gap: 8px; height: 38px; width: 240px; padding: 0 14px; border-radius: var(--ui-r-pill); background: var(--ui-surface); box-shadow: 0 0 0 1.5px var(--ui-line) inset; color: var(--ui-muted); cursor: text; } .tbs input { border: 0; outline: 0; font: inherit; font-size: 13px; flex: 1; min-width: 0; background: transparent; color: var(--ui-ink); -webkit-appearance: none; appearance: none; } .tbs input::-webkit-search-cancel-button, .tbs input::-webkit-search-decoration { -webkit-appearance: none; display: none; } .tbs:focus-within { box-shadow: 0 0 0 2px var(--ui-green) inset; } .tbb { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ui-surface); box-shadow: 0 0 0 1.5px var(--ui-line) inset; color: var(--ui-ink-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; position: relative; padding: 0; flex: none; } .tbb:hover { color: var(--ui-ink); box-shadow: 0 0 0 1.5px var(--ui-line-hover) inset; } .tbb.tbon, .tbb.show, .tbb[aria-expanded="true"], .tbon { background: var(--ui-ink); color: var(--ui-on-ink); box-shadow: none; } .tbb.dropdown-toggle::after, .tbav.dropdown-toggle::after { display: none; } .tbbadge { position: absolute; top: -7px; right: -12px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--ui-green-fill); color: var(--ui-on-fill); font-size: 10px; font-weight: 700; display: flex; align-items: center; } /* the avatar is a solid disc, so it reads larger than the outlined 38px buttons at the same size */ .tbav { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ui-green-deep); color: var(--ui-on-fill); font: 600 12px var(--ui-font); cursor: pointer; padding: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex: none; } .tbav img { width: 100%; height: 100%; object-fit: cover; } /* the avatar's .dropdown wrapper is a block, so the button sits on its text baseline; with a photo (no text) that is the button's bottom edge, which lifted it 3px above the round buttons beside it */ .tb .dropdown { display: flex; } .tbav.tbon, .tbav.show, .tbav[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--ui-mint); } .tbback { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; margin-left: 10px; border-radius: var(--ui-r-pill); background: var(--ui-mint-tint); color: var(--ui-green-ink); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; } .tbmenu { display: none; } .ic { position: fixed; left: 18px; bottom: 18px; width: 52px; height: 52px; border-radius: 50%; background: var(--ui-green-fill); color: var(--ui-on-fill); display: flex; align-items: center; justify-content: center; box-shadow: var(--ui-shadow-fab); z-index: 35; } /* top-bar date / week picker (.td family, 52 artboards) */ /* a white pill with round arrow buttons either side of a tappable value */ .td { display: inline-flex; align-items: center; gap: 2px; height: 40px; margin-left: 12px; padding: 3px; border-radius: var(--ui-r-pill); background: var(--ui-surface); border: 1.5px solid var(--ui-line); box-shadow: 0 1px 0 var(--ui-line-2); overflow: visible; } .tdx { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ui-ink-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .tdx:hover { background: var(--ui-mint-tint); color: var(--ui-green-ink); } .tdv { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border: 0; border-radius: var(--ui-r-pill); background: transparent; color: var(--ui-ink); font: 600 13.5px var(--ui-font); cursor: pointer; white-space: nowrap; } .tdv:hover { background: var(--ui-mint-tint); } .tdv:focus-visible, .tdx:focus-visible { outline: 2px solid var(--ui-green); outline-offset: 1px; } .tdi { color: var(--ui-green); flex: none; } .tdl { padding: 2px 7px; border-radius: var(--ui-r-pill); background: var(--ui-mint-tint); color: var(--ui-green-ink); font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .tdn { color: var(--ui-ink); } .td .hx-input-date { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .td .hx-input-date .dropdown-menu { pointer-events: auto; } /* ---- page frame ---- */ .pg { padding: 20px 28px 32px; display: flex; flex-direction: column; gap: 14px; } /* half the frame, for pages that need every pixel (the rota week grid; MainLayout sets it by route) */ .pg.tight { padding: 10px 14px 16px; } .ph { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* line-height: Bootstrap's reboot gives .h1-.h6 1.2; the canvas leaves headings at Poppins' normal (~1.5) */ .h1 { margin: 0 8px 0 0; font-size: 30px; font-weight: 700; letter-spacing: -.03em; line-height: normal; } .h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: normal; } .h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: normal; } .h2.h2-lg { font-size: 20px; } .sub { font-size: 13px; color: var(--ui-muted); } p.sub { margin: 0; } .sub.sm { font-size: 12px; } /* body copy: an intro or explanation paragraph */ p.copy { margin: 0; font-size: 14px; line-height: 1.6; } ul.bullets { margin: 0; padding-left: 18px; } /* a centred "nothing here" line inside a list or panel (with .sub) */ .nil { padding: 22px; text-align: center; } .cap { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-muted); } .cap.lt { font-size: 11px; text-transform: none; color: var(--ui-muted-2); } .lbl { font-size: 12px; font-weight: 600; color: var(--ui-muted); } .eyb { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ui-green); } .ct { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-ink); margin: 0; } .hint { font-size: 12px; color: var(--ui-warn); font-weight: 500; } .lk { font-size: 13px; font-weight: 600; text-decoration: none; } .sep { height: 1px; background: var(--ui-line-3); margin: 6px 0; } .sep-in { color: var(--ui-line-hover); margin: 0 6px; } .tools, .ft, .ctl, .sk-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .acts { display: flex; gap: 6px; justify-content: flex-end; } .sec { display: flex; flex-direction: column; gap: 8px; } /* ============================================================================ 4. PRIMITIVES ============================================================================ */ .splitb { display: inline-flex; } .splitb .btn:first-child { border-radius: 999px 0 0 999px; } /* the second pill, not :last-child: inside a .dropdown the menu is the last child */ .splitb > .btn + .btn { border-radius: 0 999px 999px 0; border-left: 0; padding: 0 10px; } .splitb > .btn:first-child { border-right: 1.5px solid var(--ui-line); } .sk-bug { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--ui-r-pill); border: 1.5px solid var(--ui-danger-line); background: var(--ui-danger-wash-2); color: var(--ui-danger); font: 600 13px var(--ui-font); cursor: pointer; white-space: nowrap; } .ibt { width: 34px; height: 34px; border-radius: var(--ui-r-sm); border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0; } .ib-info { background: var(--ui-info-bg); color: var(--ui-info); } .ib-nu { background: var(--ui-nu-bg); color: var(--ui-nu); } .ib-bad { background: var(--ui-bad-bg); color: var(--ui-bad); } .ib-pri { background: var(--ui-ok-bg); color: var(--ui-ok); } .ibx { width: 32px; height: 32px; border-radius: var(--ui-r-sm); border: 1.5px solid var(--ui-danger-line); background: var(--ui-bad-bg); color: var(--ui-danger); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .iinfo { width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; color: var(--ui-muted-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .qm { display: inline-flex; vertical-align: middle; color: var(--ui-muted); margin-left: 4px; cursor: help; } .mono { width: 38px; height: 38px; border-radius: 11px; background: var(--ui-ink); color: var(--ui-on-ink); display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--ui-font); flex: none; } .av { width: 34px; height: 34px; border-radius: 50%; background: var(--ui-green-fill); color: var(--ui-on-fill); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; } .av img { width: 100%; height: 100%; object-fit: cover; } /* ---- segmented control (.seg, ink selected) and pager ---- */ .seg { display: inline-flex; padding: 3px; border-radius: var(--ui-r-pill); background: var(--ui-panel); gap: 2px; } .seg button, .seg a { height: 32px; padding: 0 14px; border-radius: var(--ui-r-pill); border: 0; background: transparent; font: 500 13px var(--ui-font); color: var(--ui-ink-3); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .seg button.on, .seg a.on { background: var(--ui-ink); color: var(--ui-on-ink); } .seg.gr { background: var(--ui-surface); border: 1.5px solid var(--ui-line); padding: 4px; } .seg.gr button.on, .seg.gr a.on { background: var(--ui-green-fill); color: var(--ui-on-fill); font-weight: 600; } /* theme switch (ThemeSwitch.razor): spans the profile menu with labels; icons only in a header bar */ .dd-theme { display: flex; flex-direction: column; gap: 8px; padding: 6px 18px 10px; } .dropdown-menu .dd-theme .cap { padding: 0; } .dd-theme .theme-seg { display: flex; } .dd-theme .theme-seg button { flex: 1; justify-content: center; } .theme-seg.compact button { padding: 0 10px; } /* ink-track segmented control, cream "on" (Maintenance, Lost property status tabs); scrolls rather than clips */ .pager { display: inline-flex; gap: 4px; } .pager button, .pager a { min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--ui-r-sm); border: 1.5px solid var(--ui-line); background: var(--ui-surface); font: 500 13px var(--ui-font); cursor: pointer; color: var(--ui-ink-3); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .pager button.on, .pager a.on { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ui-on-ink); } .pager.round button, .pager.round a { border-radius: var(--ui-r-pill); } /* Labelled tab groups (InvoicesTabStrip):
holding .tgrp groups split by .tsep. Each group's tabs scroll sideways inside it rather than push a phone-width page wider. */ .nav-tabs.tgroups { border-bottom: 0; } .nav-tabs.tgroups > .tgrp { padding-top: 12px; } .inv-tools + .nav-tabs.tgroups { border-top: 1px solid var(--ui-line-4); margin-top: 2px; } .inv-tools + .nav-tabs.tgroups > .tgrp { padding-top: 10px; } .card > .nav-tabs.tgroups:only-child { padding: 2px 6px 0; } .tsep { width: 1px; align-self: stretch; background: var(--ui-line-2); margin: 18px 0 8px; } .tgrp { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 100%; } .tgrp > span { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ui-muted-2); padding-left: 4px; } .tgrp > div { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .tgrp > div > .nav-link { flex: none; } .stab { display: inline-flex; border: 1.5px solid var(--ui-line); border-radius: var(--ui-r-inner); overflow: hidden; background: var(--ui-surface); } .stab > button, .stab > a { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 0; border-left: 1.5px solid var(--ui-line-2); background: transparent; font: 500 13.5px var(--ui-font); color: var(--ui-ink-3); cursor: pointer; white-space: nowrap; text-decoration: none; } .stab > button:first-child, .stab > a:first-child { border-left: 0; } .stab > button.on, .stab > a.on { background: var(--ui-green-wash-2); color: var(--ui-green-ink); font-weight: 600; box-shadow: inset 0 -3px 0 var(--ui-green); } .stab .n { min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--ui-r-pill); background: var(--ui-ghost); color: var(--ui-ink-3); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .stab > .on .n { background: var(--ui-green-fill); color: var(--ui-on-fill); } /* ---- cards & boxes ---- */ .card { background: var(--ui-surface); border-radius: var(--ui-r-card); padding: 18px; box-shadow: var(--ui-shadow-card); min-width: 0; border: 0; } .cz, .cardp { padding: 0; overflow: hidden; } .cbody { padding: 18px; display: flex; flex-direction: column; gap: 12px; } .cbd { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; } /* inside a padded card: keep the 16px stack, with 2px so focus rings aren't clipped */ .cbd.flush { padding: 2px; } .ch { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .band { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 20px; background: var(--ui-green-deep); color: var(--ui-on-fill); } .band .h2 { color: var(--ui-on-fill); font-size: 17px; } .box { border: 1.5px solid var(--ui-line-2); border-radius: var(--ui-r-box); overflow: hidden; background: var(--ui-surface); } .lines { border: 1.5px solid var(--ui-line-2); border-radius: var(--ui-r-inner); overflow: hidden; } .box .tr:first-child, .lines .tr:first-child { border-top: 0; } /* Havit makes every
a column with a 1.25em gap: a .box that is a form keeps its rows touching, and a .tools that is a form stays a row */ form.box { gap: 0; } form.tools { flex-direction: row; } .pc { border: 1.5px solid var(--ui-line-2); border-radius: var(--ui-r-inner); padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; } .pc b { display: block; color: var(--ui-ink); } .prm { font-size: 12.5px; line-height: 1.5; color: var(--ui-ink-2); } .ro { background: var(--ui-panel); border-color: var(--ui-line-2); } .roh { padding: 12px 18px; background: var(--ui-green-deep); color: var(--ui-on-fill); } .roh :is(h1, h2, h3, .h2) { color: inherit; } .rob { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; } .g2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } .g2.fixed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sk-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } /* ---- lists ---- */ .lst { display: flex; flex-direction: column; } .lr { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--ui-line-4); text-decoration: none; color: var(--ui-ink); font-size: 14px; font-weight: 500; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; font-family: var(--ui-font); cursor: pointer; } .lr:first-child { border-top: 0; } .lr:hover { background: var(--ui-bg); color: var(--ui-ink); } .lr .lic { width: 34px; height: 34px; border-radius: var(--ui-r-sm); background: var(--ui-mint-tint); color: var(--ui-green-ink); display: inline-flex; align-items: center; justify-content: center; flex: none; } .lr .chv { margin-left: auto; color: var(--ui-muted-3); display: flex; } .acc { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--ui-line-4); font-size: 14px; font-weight: 600; cursor: pointer; background: var(--ui-surface); border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; font-family: var(--ui-font); color: var(--ui-ink); } .acc .chv { margin-left: auto; color: var(--ui-muted); display: flex; } .mi { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--ui-r-input); font-size: 14px; font-weight: 500; color: var(--ui-ink); text-decoration: none; border: 0; background: transparent; width: 100%; text-align: left; font-family: var(--ui-font); cursor: pointer; } .mi:hover { background: var(--ui-bg); color: var(--ui-ink); } .mi .fa-light { color: var(--ui-muted); flex: none; } /* ---- tags / status chips ---- */ .smp { background: var(--ui-warn-bg); color: var(--ui-warn); border-radius: var(--ui-r-pill); font-size: 11px; font-weight: 600; padding: 3px 9px; } .sk-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--ui-r-pill); font-size: 12px; font-weight: 600; background: var(--ui-panel); color: var(--ui-ink-3); } .sa { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--ui-r-pill); border: 0; font: 700 10px var(--ui-font); letter-spacing: .04em; cursor: pointer; } .sa-ok { background: var(--ui-ok-bg); color: var(--ui-ok); } .st { display: inline-flex; align-items: center; gap: 6px; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-green-fill); display: inline-block; } .c1 { background: var(--ui-c1-bg); color: var(--ui-c1); } .c2 { background: var(--ui-info-bg); color: var(--ui-info); } .c3 { background: var(--ui-ok-bg); color: var(--ui-ok); } .c4 { background: var(--ui-bad-bg); color: var(--ui-bad); } .c5 { background: var(--ui-c5-bg); color: var(--ui-c5); } .c6 { background: var(--ui-warn-bg); color: var(--ui-warn); } /* ---- forms ---- */ .cbr { width: 18px; height: 18px; accent-color: var(--ui-danger); margin: 0; } .tw { display: inline-flex; width: 40px; height: 24px; border-radius: 12px; background: var(--ui-line-hover); position: relative; flex: none; border: 0; cursor: pointer; padding: 0; transition: background .18s var(--ui-ease); } .tw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ui-on-fill); transition: left .18s var(--ui-ease); } .tw.on, .tw[aria-checked="true"] { background: var(--ui-green-fill); } .tw.on::after, .tw[aria-checked="true"]::after { left: 19px; } .tgl { display: flex; flex-direction: column; } .tg { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--ui-line-4); font-size: 13.5px; line-height: 1.5; color: var(--ui-ink-2); cursor: pointer; } .tg .tw { margin-top: 1px; } .tg b { color: var(--ui-ink); font-weight: 600; } .srch, .sk-srch, .ivs { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--ui-r-pill); border: 1.5px solid var(--ui-line); background: var(--ui-surface-2); color: var(--ui-muted); width: 340px; max-width: 100%; font-size: 13px; } .ivs { width: 230px; background: var(--ui-surface); } .srch input, .sk-srch input, .ivs input { border: 0; outline: 0; background: transparent; font: 500 13px var(--ui-font); flex: 1; min-width: 0; color: var(--ui-ink); } .sk-sel { height: 40px; border: 1.5px solid var(--ui-line); border-radius: var(--ui-r-pill); padding: 0 14px; font: 500 13px var(--ui-font); color: var(--ui-ink); background: var(--ui-surface); } .dpw { position: relative; } .dpw .form-control { padding-right: 46px; } .dt { width: 150px; height: 36px; } .flt { position: relative; display: block; } .flt span { position: absolute; left: 14px; top: 8px; font-size: 11px; font-weight: 500; color: var(--ui-muted); } .flt input { height: 58px; padding: 22px 14px 6px; } /* ---- tables (grid rows; see guide §Tables) ---- */ .tbl { overflow-x: auto; } /* A row reads its columns from --cols, set once on the table (the page's scoped CSS: .x-cols { --cols: 1fr 90px }). */ .tr { display: grid; grid-template-columns: var(--cols, none); gap: 10px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--ui-line-4); font-size: 13px; } .tr.sm { padding: 6px 18px; } .tr.lg { padding: 14px 18px; font-size: 14px; } .th { font-size: 12px; color: var(--ui-muted); background: var(--ui-surface-2); font-weight: 500; } .srt { display: inline-flex; align-items: center; gap: 4px; } .tfoot { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--ui-line-4); font-size: 13px; color: var(--ui-muted); flex-wrap: wrap; } .tfoot select { height: 34px; border: 1.5px solid var(--ui-line); border-radius: var(--ui-r-sm); font: 500 13px var(--ui-font); padding: 0 8px; background: var(--ui-surface); } /* the background shorthand above drops .form-select's chevron: use the native arrow */ .tfoot select.form-select { appearance: auto; -webkit-appearance: auto; padding-right: 6px; } /* ---- alerts & empty states ---- */ .sk-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--ui-r-inner); background: var(--ui-info-bg); color: var(--ui-info); font-size: 13px; line-height: 1.5; } .sk-ok { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--ui-r-inner); background: var(--ui-green-wash); color: var(--ui-ok); font-size: 13px; font-weight: 500; } .empty { padding: 28px; border-radius: var(--ui-r-box); border: 1.5px dashed var(--ui-dash); text-align: center; color: var(--ui-muted); font-size: 13px; } .empty.cta { display: flex; flex-direction: column; align-items: center; gap: 10px; } .emp { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 24px; border-radius: var(--ui-r-box); background: linear-gradient(var(--ui-green-wash), var(--ui-surface) 70%); border: 1.5px solid var(--ui-line-2); text-align: center; } /* a spinner centred in the space the content will take */ .loading { display: flex; justify-content: center; padding: 24px; } .emp .eic { width: 40px; height: 40px; border-radius: 50%; background: var(--ui-mint-tint); color: var(--ui-green-ink); display: flex; align-items: center; justify-content: center; } .emp b { font-size: 15px; color: var(--ui-ink); } .emp p { margin: 0; max-width: 560px; font-size: 13px; line-height: 1.55; color: var(--ui-muted); } /* inside a modal section an empty note is the small dashed one, not the big panel (calendar event editor) */ .mdl .sec .emp { display: block; padding: 12px 14px; background: none; border: 1.5px dashed var(--ui-line); border-radius: var(--ui-r-inner); text-align: left; font-size: 13px; color: var(--ui-muted); } .sk-es { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; border-radius: var(--ui-r-box); border: 1.5px dashed var(--ui-dash); background: var(--ui-surface-2); overflow: hidden; padding: 28px; } .sk-esb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; max-width: 540px; background: rgba(251, 250, 246, .92); padding: 14px 18px; border-radius: var(--ui-r-inner); } .sk-esi { width: 44px; height: 44px; border-radius: 50%; background: var(--ui-mint-tint); color: var(--ui-green-ink); display: flex; align-items: center; justify-content: center; } .sk-est { font-size: 15px; font-weight: 700; color: var(--ui-ink); } .sk-esd { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ui-muted); } .sk-ghost { position: absolute; inset: 18px; display: flex; flex-direction: column; gap: 10px; opacity: .55; } .sk-ghost span { display: block; height: 14px; border-radius: 7px; background: var(--ui-ghost); } .sk-ghost span:first-child { height: 22px; background: var(--ui-line); } .sk-hint { font-size: 12px; color: var(--ui-muted); } .sk-nil { padding: 18px; text-align: center; font-size: 13px; color: var(--ui-muted); } /* ---- modals & menus ---- */ .scrim { position: fixed; inset: 0; background: var(--ui-scrim); display: flex; align-items: flex-start; justify-content: center; padding: 56px 24px; z-index: 1050; overflow: auto; } .mdl { background: var(--ui-surface); border-radius: var(--ui-r-modal); box-shadow: var(--ui-shadow-modal); display: flex; flex-direction: column; max-width: 100%; } /* No overflow: hidden on a modal: it would clip a date picker or menu dropping out of it. Its first and last parts round their own corners instead (Bootstrap's scrollable modal still clips, as its body scrolls). */ :is(.mdl, .modal-content, .blazored-modal) > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; } :is(.mdl, .modal-content, .blazored-modal) > :last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .mh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--ui-line-3); } .mh.gh { background: var(--ui-green-deep); border-bottom: 0; } .mh.gh .mt { color: var(--ui-on-fill); } .mh.gh .mx { background: rgba(255, 255, 255, .12); color: var(--ui-on-fill); } .mh:has(.mhh, .mhs) { align-items: flex-start; } .mhh { display: flex; flex-direction: column; gap: 2px; } .mhs { margin: 2px 0 0; font-size: 13px; color: var(--ui-muted); } .mt { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; } .mx { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ui-bg); color: var(--ui-ink-3); font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; } .mx:hover { background: var(--ui-ghost); color: var(--ui-ink); } .mb { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; } .mf { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--ui-line-3); background: var(--ui-surface-2); flex-wrap: wrap; } /* a footer written inside .mb reaches the modal's edges */ .mf.bleed { margin: 6px -22px -20px; border-radius: 0 0 var(--ui-r-modal) var(--ui-r-modal); } .sk-mh { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 18px 22px; border-bottom: 1px solid var(--ui-line-3); } .sk-mh .mt { margin-top: 2px; } .sk-mh p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ui-muted); } .sk-stack { display: flex; flex-direction: column; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--ui-line-3); background: var(--ui-surface-2); } .sk-stack .btn { width: 100%; justify-content: center; } .dd { position: absolute; z-index: 1040; background: var(--ui-surface); border-radius: var(--ui-r-card); box-shadow: var(--ui-shadow-dd); overflow: hidden; } .dd .mi { padding: 10px 18px; border-radius: 0; font-size: 13.5px; } .dd .mi .fa-light { color: var(--ui-green); } .dd .cap { padding: 16px 18px 8px; display: block; } /* top-bar popovers (D-* artboards) */ .stabs { display: flex; align-items: center; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--ui-line-3); } .stabs .stab { height: 34px; min-width: 38px; padding: 0 10px; border-radius: var(--ui-r-sm); border: 0; background: transparent; color: var(--ui-muted); font: 500 13px var(--ui-font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-bottom: 2.5px solid transparent; overflow: visible; } .stabs .stab:hover { background: var(--ui-bg); color: var(--ui-ink); } .stabs .stab.on { color: var(--ui-ink); font-weight: 700; border-bottom-color: var(--ui-green); border-radius: 10px 10px 0 0; background: transparent; box-shadow: none; } .slist { max-height: 520px; overflow: auto; padding-bottom: 6px; } .srow { display: block; padding: 10px 18px; border-top: 1px solid var(--ui-line-4); font-size: 13.5px; font-weight: 600; color: var(--ui-ink); text-decoration: none; } .srow:hover { background: var(--ui-bg); color: var(--ui-ink); } .rrow { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px 10px; padding: 11px 18px; border-top: 1px solid var(--ui-line-4); text-decoration: none; color: var(--ui-ink); align-items: start; cursor: pointer; } /* Company results use