/* =============================================================================
JobSentry Design System — design tokens + primitives
-----------------------------------------------------------------------------
The single source of truth for color, spacing, radius, elevation and type.
Components read these CSS custom properties; the MudBlazor theme (AppTheme.cs)
mirrors the same values so MudBlazor components and custom markup stay in sync.
The ACCENT is tenant-driven: /tenant-logo + branding already vary per tenant,
and `--js-accent` can be overridden per tenant (VANBIL red / CodeSense green)
by setting it on a wrapper element or via a small inline style at login.
============================================================================= */
:root {
/* --- neutrals (slate) --- */
--js-canvas: #F6F7F9; /* app background behind cards */
--js-surface: #FFFFFF; /* cards, sidebar, topbar */
--js-surface-2: #F1F3F5; /* subtle fills, hovered rows */
--js-border: #E5E8EC; /* hairline dividers / card borders */
--js-border-strong: #CDD3DB;
--js-text: #0F172A; /* primary text (deep slate / navy) */
--js-text-secondary:#51607A; /* ~6.4:1 on white — WCAG AA */
--js-text-muted: #6B7689; /* ~4.6:1 on white — WCAG AA (was #8A96A8 ≈ 3:1, AA fail) */
/* --- accent (tenant default = Van Biljoens red, refined) --- */
--js-accent: #E11D2C; /* ~4.8:1 on white */
--js-accent-hover: #C2161F;
--js-accent-strong: #C2161F; /* accent TEXT on tinted bg (≥4.5:1 on --js-accent-soft) */
--js-accent-soft: #FDECEE; /* tint background for accent surfaces */
--js-accent-contrast:#FFFFFF;
/* --- status --- */
--js-success: #15803D; --js-success-soft: #E7F6EC;
--js-warning: #B45309; --js-warning-soft: #FEF3C7;
--js-info: #1D4ED8; --js-info-soft: #E5EDFF;
--js-danger: #B91C1C; --js-danger-soft: #FCE9E9;
--js-neutral: #51607A; --js-neutral-soft: #EEF1F5;
/* --- radius --- */
--js-r-sm: 8px; --js-r-md: 12px; --js-r-lg: 16px; --js-r-pill: 999px;
/* --- elevation --- */
--js-e1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
--js-e2: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
--js-e3: 0 12px 24px -6px rgba(16,24,40,.12);
/* --- spacing scale (4px base) --- */
--js-s1: 4px; --js-s2: 8px; --js-s3: 12px; --js-s4: 16px;
--js-s5: 20px; --js-s6: 24px; --js-s8: 32px; --js-s10: 40px;
--js-topbar-h: 60px;
}
/* ---------- base ---------- */
html, body { background: var(--js-canvas); color: var(--js-text); }
/* MudBlazor uses Roboto by default; layer Inter on top for a crisper SaaS feel */
body, .mud-typography, .mud-input, .mud-button-root {
font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* =============================================================================
App shell
============================================================================= */
.js-appbar.mud-appbar {
background: var(--js-surface) !important;
color: var(--js-text) !important;
border-bottom: 1px solid var(--js-border);
backdrop-filter: saturate(180%) blur(4px);
}
.js-appbar .mud-icon-button { color: var(--js-text-secondary); }
.js-brand { display: flex; align-items: center; gap: var(--js-s3); }
.js-brand-mark { width: 34px; height: 34px; border-radius: var(--js-r-sm); object-fit: cover;
box-shadow: var(--js-e1); }
.js-brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--js-text); }
.js-tenant-chip { font-size: .72rem; font-weight: 600; color: var(--js-text-secondary);
background: var(--js-surface-2); border: 1px solid var(--js-border);
border-radius: var(--js-r-pill); padding: 2px 10px; }
.js-drawer.mud-drawer { background: var(--js-surface) !important; border-right: 1px solid var(--js-border); }
/* nav links → quiet by default, accent pill when active */
.js-drawer .mud-nav-link {
border-radius: var(--js-r-sm); margin: 1px 8px; padding-top: 9px; padding-bottom: 9px;
color: var(--js-text-secondary); font-weight: 500; font-size: .9rem; min-height: 40px;
}
.js-drawer .mud-nav-link .mud-icon-root { color: var(--js-text-muted); font-size: 1.2rem; }
.js-drawer .mud-nav-link:hover { background: var(--js-surface-2); color: var(--js-text); }
.js-drawer .mud-nav-link.active {
background: var(--js-accent-soft); color: var(--js-accent-strong); font-weight: 600;
box-shadow: inset 3px 0 0 var(--js-accent); /* anchor the active item with an accent rail */
}
.js-drawer .mud-nav-link.active .mud-icon-root { color: var(--js-accent-strong); }
.js-drawer .mud-nav-group .mud-nav-link { font-size: .88rem; }
.js-nav-section { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--js-text-muted); padding: 18px 20px 6px; }
.js-content { padding: var(--js-s6); max-width: 1360px; margin: 0 auto; }
@media (max-width: 600px) { .js-content { padding: var(--js-s4); } }
/* =============================================================================
Page header band (PageHeader component)
============================================================================= */
.js-page-header {
display: flex; align-items: center; gap: var(--js-s4);
background: var(--js-surface); border: 1px solid var(--js-border);
border-radius: var(--js-r-md); box-shadow: var(--js-e1);
padding: var(--js-s5) var(--js-s6); margin-bottom: var(--js-s6);
}
.js-page-header__logo { height: 44px; width: auto; border-radius: var(--js-r-sm); }
.js-page-header__title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--js-text); }
.js-page-header__subtitle { font-size: .9rem; color: var(--js-text-secondary); margin-top: 2px; }
.js-page-header__spacer { flex: 1 1 auto; }
/* =============================================================================
Stat / metric card
============================================================================= */
.js-stat { background: var(--js-surface); border: 1px solid var(--js-border);
border-radius: var(--js-r-md); box-shadow: var(--js-e1);
padding: var(--js-s5); display: flex; flex-direction: column; gap: 6px;
position: relative; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.js-stat--link { cursor: pointer; }
.js-stat--link:hover { box-shadow: var(--js-e2); transform: translateY(-1px); }
.js-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
background: var(--js-accent); opacity: .9; }
.js-stat.js-accent-success::before { background: var(--js-success); }
.js-stat.js-accent-warning::before { background: var(--js-warning); }
.js-stat.js-accent-info::before { background: var(--js-info); }
.js-stat.js-accent-danger::before { background: var(--js-danger); }
.js-stat__label { font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
color: var(--js-text-muted); display: flex; align-items: center; gap: 6px; }
.js-stat__value { font-size: 1.8rem; font-weight: 700; line-height: 1.1; color: var(--js-text); font-variant-numeric: tabular-nums; }
.js-stat__hint { font-size: .8rem; color: var(--js-text-secondary); }
/* =============================================================================
Section card (generic content surface)
============================================================================= */
.js-card { background: var(--js-surface); border: 1px solid var(--js-border);
border-radius: var(--js-r-md); box-shadow: var(--js-e1); }
.js-card__head { display: flex; align-items: center; gap: var(--js-s3);
padding: var(--js-s4) var(--js-s5); border-bottom: 1px solid var(--js-border); }
.js-card__title { font-size: 1rem; font-weight: 650; color: var(--js-text); }
.js-card__body { padding: var(--js-s5); }
/* =============================================================================
Status badge
============================================================================= */
.js-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600;
line-height: 1; padding: 4px 10px; border-radius: var(--js-r-pill); white-space: nowrap; }
.js-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.js-badge--success { color: var(--js-success); background: var(--js-success-soft); }
.js-badge--warning { color: var(--js-warning); background: var(--js-warning-soft); }
.js-badge--info { color: var(--js-info); background: var(--js-info-soft); }
.js-badge--danger { color: var(--js-danger); background: var(--js-danger-soft); }
.js-badge--neutral { color: var(--js-neutral); background: var(--js-neutral-soft); }
/* =============================================================================
Empty state
============================================================================= */
.js-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
padding: var(--js-s10) var(--js-s6); gap: var(--js-s3); }
.js-empty__icon { width: 56px; height: 56px; border-radius: var(--js-r-md);
display: grid; place-items: center; background: var(--js-surface-2); color: var(--js-text-muted); }
.js-empty__title { font-size: 1rem; font-weight: 650; color: var(--js-text); }
.js-empty__text { font-size: .875rem; color: var(--js-text-secondary); max-width: 380px; }
/* =============================================================================
Auth card (login / verify / register)
============================================================================= */
.js-auth-wrap { display: flex; justify-content: center; align-items: flex-start; padding-top: 4vh; }
.js-auth-card { width: 100%; max-width: 420px; background: var(--js-surface);
border: 1px solid var(--js-border); border-radius: var(--js-r-lg);
box-shadow: var(--js-e2); padding: 32px 32px 24px; }
.js-auth-card__brand { display: flex; justify-content: center; margin-bottom: 16px; }
.js-auth-card__brand img { width: 48px; height: 48px; border-radius: var(--js-r-sm); box-shadow: var(--js-e1); }
.js-auth-card__title { font-size: 1.35rem; font-weight: 700; text-align: center; color: var(--js-text); letter-spacing: -.01em; }
.js-auth-card__sub { font-size: .875rem; color: var(--js-text-secondary); text-align: center; margin: 6px 0 22px; line-height: 1.55; }
.js-auth-card__foot { text-align: center; font-size: .85rem; color: var(--js-text-secondary);
margin-top: 18px; border-top: 1px solid var(--js-border); padding-top: 16px; }
.js-auth-card__foot a { color: var(--js-accent); font-weight: 600; text-decoration: none; }
/* split-screen variant: accent brand panel beside the form */
.js-auth-card--split { max-width: 820px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.js-auth-side { background: linear-gradient(150deg, var(--js-accent), var(--js-accent-hover));
color: var(--js-accent-contrast); padding: 36px 32px;
display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.js-auth-side__logo { width: 52px; height: 52px; border-radius: 12px; background: #fff;
padding: 7px; object-fit: contain; box-shadow: var(--js-e1); }
.js-auth-side__name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.js-auth-side__tag { font-size: 1rem; opacity: .92; line-height: 1.5; }
.js-auth-side__points { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 10px; }
.js-auth-side__points li { display: flex; align-items: center; gap: 9px; font-size: .9rem; opacity: .95; }
.js-auth-side__points .mud-icon-root { font-size: 1.1rem; }
.js-auth-side-form { padding: 32px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 720px) {
.js-auth-card--split { grid-template-columns: 1fr; max-width: 420px; }
.js-auth-side { display: none; }
}
/* =============================================================================
Loading skeleton
============================================================================= */
.js-skel { background: linear-gradient(90deg, var(--js-surface-2) 25%, #E9ECF1 37%, var(--js-surface-2) 63%);
background-size: 400% 100%; animation: js-shimmer 1.4s ease infinite; border-radius: var(--js-r-sm); }
@keyframes js-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* =============================================================================
Data toolbar (DataToolbar component)
============================================================================= */
.js-toolbar { display: flex; align-items: center; gap: var(--js-s3); flex-wrap: wrap; }
.js-toolbar__search { flex: 1 1 220px; min-width: 0; }
.js-toolbar__filters { display: flex; gap: var(--js-s2); flex-wrap: wrap; align-items: center; }
.js-toolbar__actions { display: flex; gap: var(--js-s2); margin-left: auto; }
@media (max-width: 600px) { .js-toolbar__actions { margin-left: 0; } }
/* =============================================================================
Stat grid (responsive row of StatCards / at-a-glance panels)
============================================================================= */
.js-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--js-s4); margin-bottom: var(--js-s6); }
/* =============================================================================
Activity timeline (ActivityTimeline component)
============================================================================= */
.js-timeline { position: relative; padding: var(--js-s2) 0; }
.js-timeline__item { position: relative; padding: 0 0 var(--js-s5) var(--js-s6);
border-left: 2px solid var(--js-border); margin-left: 5px; }
.js-timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.js-timeline__marker { position: absolute; left: -7px; top: 2px; width: 12px; height: 12px;
border-radius: 50%; background: var(--js-neutral);
box-shadow: 0 0 0 3px var(--js-surface); }
.js-timeline__marker--success { background: var(--js-success); }
.js-timeline__marker--warning { background: var(--js-warning); }
.js-timeline__marker--info { background: var(--js-info); }
.js-timeline__marker--danger { background: var(--js-danger); }
.js-timeline__meta { display: flex; align-items: center; gap: var(--js-s2); }
.js-timeline__date { font-size: .78rem; font-weight: 600; color: var(--js-text-muted); }
.js-timeline__title { font-size: .92rem; font-weight: 600; color: var(--js-text); margin-top: 2px; }
.js-timeline__desc { font-size: .85rem; color: var(--js-text-secondary); margin-top: 2px; }
/* =============================================================================
Dark mode — token overrides (applied on a .js-dark wrapper in MainLayout).
CSS custom properties cascade, so every .js-* component reads dark values
automatically. MudBlazor components are handled separately by IsDarkMode.
============================================================================= */
.js-dark {
--js-canvas: #0F1115;
--js-surface: #1A1D23;
--js-surface-2: #232730;
--js-border: #2C313B;
--js-border-strong: #3A414E;
--js-text: #E6E9EF;
--js-text-secondary:#A8B0BE;
--js-text-muted: #7A8494;
/* accent kept; status colors brightened for dark surfaces */
--js-accent-soft: rgba(225,29,44,.18);
--js-success: #34D399; --js-success-soft: rgba(52,211,153,.15);
--js-warning: #FBBF24; --js-warning-soft: rgba(251,191,36,.15);
--js-info: #60A5FA; --js-info-soft: rgba(96,165,250,.15);
--js-danger: #F87171; --js-danger-soft: rgba(248,113,113,.15);
--js-neutral: #A8B0BE; --js-neutral-soft: rgba(168,176,190,.15);
--js-e1: 0 1px 2px rgba(0,0,0,.40);
--js-e2: 0 4px 10px rgba(0,0,0,.45);
--js-e3: 0 12px 24px rgba(0,0,0,.50);
}
.js-dark--root { min-height: 100vh; background: var(--js-canvas); }
.js-dark .js-skel { background: linear-gradient(90deg, #232730 25%, #2C313B 37%, #232730 63%); background-size: 400% 100%; }
/* =============================================================================
Professional update (2026-06-15) — accessibility + operational primitives
============================================================================= */
/* Keyboard focus — visible accent ring on interactive surfaces (WCAG 2.4.11/2.4.13).
Pointer users are unaffected (:focus-visible only fires for keyboard/AT focus). */
:where(a, button, .mud-nav-link, .js-stat--link, .js-kpi--link, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
outline: 2px solid var(--js-accent);
outline-offset: 2px;
border-radius: var(--js-r-sm);
}
/* Respect reduced-motion (WCAG 2.3.3): no shimmer/lift for users who opt out. */
@media (prefers-reduced-motion: reduce) {
.js-skel { animation: none; }
.js-stat--link:hover, .js-kpi--link:hover { transform: none; }
* { scroll-behavior: auto; }
}
/* Tabular figures helper — align money/counts in columns. */
.js-num { font-variant-numeric: tabular-nums; }
/* ---------- KPI card — operational "workflow" cockpit metric ----------------
Top accent border + icon + large count + sub-metrics (Jobber-style).
Markup:
…
Jobs
14
3 overdueR12 400
*/
.js-kpi { background: var(--js-surface); border: 1px solid var(--js-border); border-top: 3px solid var(--js-neutral);
border-radius: var(--js-r-md); box-shadow: var(--js-e1); padding: var(--js-s5);
display: flex; flex-direction: column; gap: var(--js-s2);
transition: box-shadow .15s, transform .15s; }
.js-kpi--link { cursor: pointer; }
.js-kpi--link:hover { box-shadow: var(--js-e2); transform: translateY(-1px); }
.js-kpi.js-accent-accent { border-top-color: var(--js-accent); }
.js-kpi.js-accent-success { border-top-color: var(--js-success); }
.js-kpi.js-accent-warning { border-top-color: var(--js-warning); }
.js-kpi.js-accent-info { border-top-color: var(--js-info); }
.js-kpi.js-accent-danger { border-top-color: var(--js-danger); }
.js-kpi__head { display: flex; align-items: center; gap: var(--js-s2); }
.js-kpi__icon { width: 30px; height: 30px; border-radius: var(--js-r-sm); display: grid; place-items: center;
background: var(--js-surface-2); color: var(--js-text-secondary); }
.js-kpi__icon .mud-icon-root { font-size: 1.1rem; }
.js-kpi__label { font-size: .8rem; font-weight: 600; color: var(--js-text-secondary); }
.js-kpi__value { font-size: 1.9rem; font-weight: 750; line-height: 1.05; color: var(--js-text); font-variant-numeric: tabular-nums; }
.js-kpi__sub { display: flex; flex-wrap: wrap; gap: var(--js-s2) var(--js-s4); margin-top: 2px; }
.js-kpi__sub span { font-size: .78rem; color: var(--js-text-muted); }
.js-kpi__sub b { color: var(--js-text-secondary); font-weight: 600; }
/* ---------- Operational data table density --------------------------------
Wrap a MudTable/MudDataGrid or a plain in .js-table for a tighter,
scannable operational look: uppercase muted header (sticky), hairline rows,
hover, right-aligned tabular numerics (add class="num" or data-num on cells). */
.js-table { border: 1px solid var(--js-border); border-radius: var(--js-r-md); overflow: hidden; background: var(--js-surface); }
.js-table table { width: 100%; border-collapse: collapse; }
.js-table th { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: var(--js-text-muted); text-align: left; padding: 10px 14px;
background: var(--js-surface); border-bottom: 1px solid var(--js-border); position: sticky; top: 0; z-index: 1; }
.js-table td { padding: 11px 14px; border-bottom: 1px solid var(--js-border); font-size: .875rem; color: var(--js-text); }
.js-table tbody tr:last-child td { border-bottom: 0; }
.js-table tbody tr:hover td { background: var(--js-surface-2); }
.js-table .num, .js-table [data-num] { text-align: right; font-variant-numeric: tabular-nums; }
/* ---------- Thin, unobtrusive scrollbars (light + dark via tokens) --------- */
* { scrollbar-width: thin; scrollbar-color: var(--js-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--js-border-strong); border-radius: var(--js-r-pill);
border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--js-text-muted); }