.
Style it red + slightly muted so it sits comfortably under each input
without competing with the input itself. The same class is used for
both client-side DataAnnotations errors and server-side errors piped
through ServerValidationBridge — no need to distinguish in the UI. */
.validation-message,
.cv__field-error {
display: block;
color: var(--jb-color-status-error, #b91c1c);
font-size: 0.85em;
margin-top: 4px;
line-height: 1.3;
}
/* When an input is in an error state, give it a red border + ring so
the field stands out before the user reads the message text. The
.modified.invalid pair is what Blazor toggles on bound inputs. */
input.invalid,
input.modified.invalid,
textarea.invalid,
textarea.modified.invalid,
select.invalid,
select.modified.invalid {
border-color: var(--jb-color-status-error, #b91c1c) !important;
box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15);
}
/* ───────── Public-page chrome (shared by WASM + SSR) ─────────
The WASM PublicLayout has a scoped-CSS twin in
JobBoardAdmin/Layout/PublicLayout.razor.css that ONLY matches
elements with the page-component's scope-hash attribute. Static SSR
renders the same markup from JobBoardAdmin.Public, where the scope
hash is different — the scoped rules don't match. Defining the
chrome rules globally here means both projects share one source
of truth, and the SSR public surface no longer renders as plain
default-browser HTML. */
.public {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--jb-color-surface-canvas);
}
.public__skip {
position: fixed; top: -200px; left: -200px;
width: 1px; height: 1px; padding: 0; margin: 0; border: 0;
background: transparent;
clip: rect(0,0,0,0); clip-path: inset(50%);
overflow: hidden; white-space: nowrap;
}
.public__skip:focus, .public__skip:focus-visible {
top: 0; left: 0;
width: auto; height: auto;
padding: 12px 18px;
clip: auto; clip-path: none; overflow: visible; white-space: normal;
z-index: 9999;
background: var(--jb-color-brand-primary, #0E7C7B);
color: #fff; font-weight: 600;
border-radius: 0 0 8px 0;
outline: 3px solid var(--jb-color-focus, #FFD23F);
outline-offset: 2px;
}
.public__header {
display: flex; align-items: center;
gap: var(--jb-space-xl);
padding: 0 var(--jb-space-xl);
height: 72px;
background: var(--jb-color-surface-card);
border-bottom: 1px solid var(--jb-color-border-subtle);
position: sticky; top: 0;
z-index: var(--jb-z-sticky, 10);
}
.public__brand {
display: inline-flex; align-items: center; gap: var(--jb-space-sm);
color: var(--jb-color-text-primary);
text-decoration: none;
font-size: var(--jb-text-heading-sm);
font-weight: var(--jb-text-weight-bold);
}
.public__brand:hover { text-decoration: none; }
.public__brand-mark {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: var(--jb-radius-md);
background: var(--jb-color-brand-primary);
color: var(--jb-color-text-inverse);
font-weight: var(--jb-text-weight-bold);
}
.public__nav {
display: flex; gap: var(--jb-space-lg);
flex: 1;
margin-left: var(--jb-space-xl);
}
.public__nav a {
color: var(--jb-color-text-secondary);
text-decoration: none;
font-size: var(--jb-text-body-sm);
font-weight: var(--jb-text-weight-medium);
padding: var(--jb-space-xs) 0;
border-bottom: 2px solid transparent;
transition: border-color 120ms;
}
.public__nav a:hover {
color: var(--jb-color-text-primary);
border-bottom-color: var(--jb-color-brand-primary);
text-decoration: none;
}
.public__actions {
display: flex; align-items: center; gap: var(--jb-space-md);
}
.public__theme {
display: inline-flex; gap: 2px; padding: 2px;
background: var(--jb-color-surface-sunken);
border: 1px solid var(--jb-color-border-subtle);
border-radius: var(--jb-radius-pill);
}
.public__theme-btn {
background: transparent; border: 0; padding: 4px 8px;
border-radius: var(--jb-radius-pill); cursor: pointer;
font-size: 14px; line-height: 1;
color: var(--jb-color-text-secondary);
}
.public__theme-btn:hover { color: var(--jb-color-text-primary); }
@media (max-width: 700px) { .public__theme { display: none; } }
.public__signin, .public__create {
color: var(--jb-color-text-primary);
font-size: var(--jb-text-body-sm);
font-weight: var(--jb-text-weight-medium);
text-decoration: none;
}
.public__signin:hover, .public__create:hover {
color: var(--jb-color-brand-primary);
text-decoration: none;
}
.public__cta {
display: inline-flex; align-items: center;
padding: 8px 14px;
border-radius: var(--jb-radius-md);
background: var(--jb-color-brand-primary);
color: var(--jb-color-text-inverse);
font-size: var(--jb-text-body-sm);
font-weight: var(--jb-text-weight-semibold);
text-decoration: none;
border: 1px solid transparent;
transition: background 120ms, transform 120ms, box-shadow 120ms;
}
.public__cta:hover {
background: var(--jb-color-brand-primary-hover);
color: var(--jb-color-text-inverse);
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(15, 118, 110, 0.28);
}
.public__main { flex: 1; }
.public__main:focus { outline: none; }
.public__footer {
background: var(--jb-color-neutral-900);
color: var(--jb-color-neutral-200);
padding: var(--jb-space-2xl) var(--jb-space-xl) var(--jb-space-lg);
margin-top: var(--jb-space-3xl);
}
.public__footer-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--jb-space-xl);
padding-bottom: var(--jb-space-xl);
border-bottom: 1px solid var(--jb-color-neutral-800);
}
.public__footer-brand {
font-size: var(--jb-text-heading-md);
font-weight: var(--jb-text-weight-bold);
color: var(--jb-color-text-inverse);
margin-bottom: var(--jb-space-xs);
}
.public__footer-grid h4 {
font-size: var(--jb-text-body-sm);
font-weight: var(--jb-text-weight-semibold);
color: var(--jb-color-text-inverse);
margin-bottom: var(--jb-space-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.public__footer-grid a {
display: block;
color: var(--jb-color-neutral-300);
font-size: var(--jb-text-body-sm);
padding: var(--jb-space-3xs, 4px) 0;
text-decoration: none;
}
.public__footer-grid a:hover {
color: var(--jb-color-text-inverse);
text-decoration: underline;
}
/* `.jb-muted` defaults to neutral-500 — fine on white, grey-on-black on
the dark footer. Lift to neutral-300 in this scope so muted descriptive
text stays WCAG AA against the neutral-900 footer background. */
.public__footer .jb-muted { color: var(--jb-color-neutral-300); }
.public__footer .jb-muted a { color: inherit; text-decoration: underline; }
.public__footer-meta {
max-width: 1200px;
margin: var(--jb-space-md) auto 0;
display: flex; justify-content: space-between;
font-size: var(--jb-text-body-xs);
color: var(--jb-color-neutral-300);
}
/* Sawmill Software link inside the meta strip inherits neutral-300 so
contrast clears WCAG AA against neutral-900; underlined so it's
distinguishable from surrounding copyright text. */
.public__footer-meta a { color: var(--jb-color-neutral-200); text-decoration: underline; }
/* ───────── Mobile hamburger menu (public surface) ─────────
/ gives a CSS-only click-to-toggle drawer so SSR
pages without a Blazor runtime can still expose nav + login on
mobile. Three-stripe icon via spans on ; the default
browser triangle is removed below. Hidden on desktop (≥900px). */
.public__mobile-menu { display: none; position: relative; }
.public__mobile-menu > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 40px;
height: 40px;
padding: 8px;
background: transparent;
border: 0;
border-radius: 6px;
}
.public__mobile-menu > summary::-webkit-details-marker { display: none; }
.public__mobile-menu > summary::marker { display: none; content: ""; }
.public__mobile-menu > summary:hover { background: var(--jb-color-surface-sunken, #f3f4f6); }
.public__hamburger span {
display: block;
height: 2px;
width: 22px;
background: var(--jb-color-text-primary, #111);
border-radius: 1px;
}
.public__mobile-drawer {
position: absolute;
top: calc(100% + 4px);
right: 0;
min-width: 220px;
background: var(--jb-color-surface-card, #fff);
border: 1px solid var(--jb-color-border-subtle, #e5e7eb);
border-radius: 8px;
box-shadow: var(--jb-shadow-md, 0 4px 12px rgba(0,0,0,0.08));
padding: var(--jb-space-sm, 8px);
display: flex;
flex-direction: column;
gap: 2px;
z-index: 100;
}
.public__mobile-drawer a {
display: block;
padding: 10px 12px;
border-radius: 6px;
color: var(--jb-color-text-primary, #111);
text-decoration: none;
}
.public__mobile-drawer a:hover { background: var(--jb-color-surface-sunken, #f3f4f6); }
.public__mobile-drawer .public__mobile-cta {
background: var(--jb-color-brand-primary, #0E7C7B);
color: var(--jb-color-text-inverse, #fff);
text-align: center;
font-weight: 600;
}
.public__mobile-drawer .public__mobile-cta:hover {
background: var(--jb-color-brand-primary-hover, #0B6362);
}
.public__mobile-divider {
border: 0;
border-top: 1px solid var(--jb-color-border-subtle, #e5e7eb);
margin: 6px 0;
}
@media (max-width: 900px) {
.public__footer-grid { grid-template-columns: 1fr 1fr; }
.public__nav { display: none; }
/* Show hamburger on the same breakpoint where the desktop nav
hides — visitors otherwise lose access to the nav links. */
.public__mobile-menu { display: inline-block; }
}
@media (max-width: 600px) {
.public__cta { display: none; }
.public__signin, .public__create { display: none; }
/* On the narrowest viewports the action buttons in the header
also hide; the drawer below carries them so login/signup
stay reachable. */
}
/* ───────── Buttons (shared by WASM + SSR) ─────────
The Blazor