/* Commander HRIS — application styles.
Self-hosted, no CDN: the Content-Security-Policy in config/security.php
permits scripts, styles, fonts and images from 'self' only (img-src also
allows data:). Nothing here may become a `style` attribute in a view —
that would force 'unsafe-inline' into style-src for the whole application.
Anything a template needs to vary is a class, at the bottom of this file.
Palette is taken from the company seal: the navy of the shield ring, the
gold of the three stars, the green of the laurel. It is used sparingly —
a payroll register is not a poster. */
:root {
/* Tells the browser this page supplies its own light and dark
palettes (below), so it must not silently re-theme native controls -
inputs, checkboxes, the password dot colour - with ITS OWN internal
dark styling on top of ours. Omitting this is the standard cause of
"the password field shows nothing while typing" on a dark-mode OS:
the browser paints a control using its own light-dark() logic
underneath a transparent author background, and author `color` can
end up matching that internal layer rather than overriding it. */
color-scheme: light;
/* Brand — sampled from the seal. */
--brand: #1b3a7a; /* shield navy */
--brand-2: #2c5aa8; /* lighter royal */
--brand-3: #12294f; /* deepest, sidebar */
--gold: #e0a900; /* the three stars */
/* The call to action, sampled from the sign-in button: a bright cyan
falling into azure. It is the one high-chroma thing on any screen,
which is what makes it read as the action to take. */
--cta: #00d0ff;
--cta-2: #0077f2;
--cta-deep: #0a5ed0;
--gold-soft: #f6c944;
--laurel: #2f7d4f; /* the wreath */
/* Ground and surfaces */
--ground: #eef1f6;
--surface: #ffffff;
--surface-2:#f2f5f9;
--surface-3:#e6ebf2;
/* Ink. Every one of these clears 4.5:1 on --surface; --ink-2 and --ink-3
used to sit at 4.06:1 on white and 3.75:1 on the page ground — below
AA for body text, which is why secondary copy read as washed out. */
--ink: #101a29; /* 17.5:1 on white */
--ink-2: #35455c; /* 9.7:1 */
--ink-3: #55657c; /* 5.9:1, and 5.2:1 on --ground */
--rule: #d8e0ea;
--rule-strong: #b6c3d4;
--accent: var(--brand);
--accent-ink: #ffffff;
--ok: #1f6b4d;
--ok-bg: #e8f5ee;
--warn: #8a5410;
--warn-bg: #fdf3e0;
--fail: #a32a2a;
--fail-bg: #fdecec;
/* Same amber as employee_groups.badge_color for the MANPOWER group
(migration 0036), so the workforce reads as one colour everywhere. */
--manpower: #b45309;
--manpower-bg: #fcefe0;
/* Sidebar keeps its own scale: it is dark in both themes, so it cannot
borrow the page tokens without inverting in one of them. */
--side-bg: #0f4490;
--side-bg-2: #072c62;
--side-ink: #eaf2ff;
--side-ink-2: #a9c4e8;
--side-rule: #1d5aa8;
--side-hover: #14539f;
--shadow-1: 0 1px 2px rgba(16, 26, 41, .06), 0 1px 3px rgba(16, 26, 41, .04);
--shadow-2: 0 2px 4px rgba(16, 26, 41, .06), 0 6px 16px rgba(16, 26, 41, .08);
--shadow-3: 0 12px 32px rgba(16, 26, 41, .14);
--r-sm: 4px;
--r: 8px;
--r-lg: 12px;
--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--ground: #0b1220;
--surface: #131c2b;
--surface-2:#182334;
--surface-3:#1f2c40;
--ink: #e9eef6; /* 14.7:1 on --surface */
--ink-2: #b9c6d8; /* 9.9:1 */
--ink-3: #93a3ba; /* 6.7:1 */
--rule: #253247;
--rule-strong: #37475f;
--brand-2: #6f9be0;
--accent: #7ea8e8;
--accent-ink: #0b1220;
--gold: #f0c14b;
--gold-soft:#f7d67e;
--laurel: #5cae82;
--ok: #5cae82;
--ok-bg: #14291f;
--warn: #d9a860;
--warn-bg: #2a2216;
--fail: #e08484;
--fail-bg: #2c1a1a;
--manpower: #e0a85c;
--manpower-bg: #2b2013;
--side-bg: #0a3068;
--side-bg-2: #051e44;
--side-rule: #14417e;
--side-hover: #0f3d80;
--shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
--shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .35);
--shadow-3: 0 12px 32px rgba(0, 0, 0, .5);
}
}
* { box-sizing: border-box; }
/* The `hidden` attribute has to actually hide.
The browser implements it as `[hidden] { display: none }` in its own
stylesheet, which ANY class rule setting `display` outranks - `.photo-video
{ display: block }` beat it, and the camera block rendered every element and
every button at once no matter what the script hid.
With no JavaScript able to set a style attribute here (style-src is 'self',
no 'unsafe-inline'), toggling `el.hidden` is how this application shows and
hides things. That makes this rule load-bearing rather than a tidy-up. */
[hidden] { display: none !important; }
/* The rem base every component size in this file scales from. Raised from
the 16px default to make the whole app - every nav label, table cell and
button, all of it sized in rem - modestly larger and easier to read
without hand-editing each of those sizes individually. */
html { font-size: 17px; }
body {
margin: 0;
background: var(--ground);
color: var(--ink);
font: 16px/1.6 var(--font);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--brand-2); text-underline-offset: .15em; }
a:hover { color: var(--brand); }
@media (prefers-color-scheme: dark) { a:hover { color: #a8c6f0; } }
::selection { background: var(--gold-soft); color: #101a29; }
/* ─────────────────────────────────────────────────────────────
Pre-authentication shell — installer, login, errors, health
───────────────────────────────────────────────────────────── */
.shell { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem 4rem; }
.masthead {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding: 1.75rem 0 1.25rem;
border-bottom: 1px solid var(--rule);
margin-bottom: 2.25rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .85rem; }
/* The seal is artwork of unknown proportions - the file supplied was a
1200x630 canvas with the shield in the middle. Capping only the height lets
a wide file run off sideways, so both axes are capped and object-fit does
the letterboxing. */
.brand-logo {
display: block; height: 3rem; width: 3rem; max-width: 3rem;
object-fit: contain; flex: none;
}
/* Fallback monogram, shown when no logo file is installed. */
.brand .mark {
display: grid; place-items: center; width: 3rem; height: 3rem;
background: linear-gradient(160deg, var(--brand-2), var(--brand));
color: #fff; border-radius: var(--r);
font-weight: 700; font-size: .95rem; letter-spacing: .04em;
box-shadow: var(--shadow-1); flex: none;
}
.brand strong { display: block; font-size: 1.1rem; letter-spacing: -.01em; }
.brand small { display: block; color: var(--ink-3); font-size: .8rem; }
.version { color: var(--ink-3); font-size: .75rem; font-family: var(--mono); }
/* ── Typography ─────────────────────────────────────────────── */
h1 { font-size: 1.6rem; margin: 0 0 .4rem; letter-spacing: -.02em; font-weight: 700; }
h2 { font-size: 1.08rem; margin: 2rem 0 .8rem; letter-spacing: -.01em; font-weight: 650; }
h3 { font-size: .95rem; margin: 1.6rem 0 .65rem; font-weight: 650; }
.lede { color: var(--ink-2); margin: 0 0 1.75rem; max-width: 48rem; font-size: .98rem; }
/* Section headings earn a gold tick — the one decorative flourish, and it
ties the page to the seal without colouring anything that carries meaning. */
.app main h2 {
display: flex; align-items: center; gap: .6rem;
}
.app main h2::before {
content: ""; width: 3px; height: 1em; flex: none;
background: var(--gold); border-radius: 2px;
}
/* ── Cards ──────────────────────────────────────────────────── */
.card {
background: var(--surface); border: 1px solid var(--rule);
border-radius: var(--r); padding: 1.4rem 1.5rem; margin-bottom: 1.25rem;
box-shadow: var(--shadow-1);
}
.card.narrow { max-width: 28rem; }
/* photo/show.php's Place card - Leaflet needs an explicit height, or it
collapses to zero and renders nothing. */
.place-map { height: 18rem; border-radius: var(--r-sm); margin-top: .9rem; overflow: hidden; }
/* The Coordinates row's two pieces (the raw reading, then the reverse-
geocoded name) each need the full width of the dd, or .kv-list dd's own
flex-wrap treats them as wrapping inline content and a plain , so a click anywhere in a segment selects it and the
* whole thing keeps working with CSS disabled; :checked does the
* highlighting, so nothing here needs a script. */
.segmented {
display: flex; flex-wrap: wrap; border: 1px solid var(--rule-strong);
border-radius: var(--r-sm); overflow: hidden; background: var(--surface);
}
.segmented-option {
flex: 1 1 11rem; display: flex; position: relative; cursor: pointer;
border-left: 1px solid var(--rule-strong);
}
.segmented-option:first-child { border-left: 0; }
/* Visually hidden, never display:none - a hidden-by-display radio drops out
of tab order in some browsers. This keeps it focusable and clickable
while every pixel of what's seen is the label text next to it. */
.segmented-option input {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
opacity: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.segmented-option-body {
flex: 1; display: flex; flex-direction: column; gap: .15rem;
padding: .65rem .9rem; text-align: center;
transition: background .12s ease, color .12s ease;
}
.segmented-option-title { font-weight: 650; font-size: .88rem; color: var(--ink); }
.segmented-option-caption { font-size: .76rem; color: var(--ink-3); }
.segmented-option:hover .segmented-option-body { background: var(--surface-2); }
.segmented-option input:checked ~ .segmented-option-body { background: var(--accent); }
.segmented-option input:checked ~ .segmented-option-body .segmented-option-title,
.segmented-option input:checked ~ .segmented-option-body .segmented-option-caption {
color: var(--accent-ink);
}
.segmented-option input:focus-visible ~ .segmented-option-body {
outline: 2px solid var(--brand-2); outline-offset: -2px;
}
@media (max-width: 30rem) {
.segmented { flex-direction: column; }
.segmented-option { border-left: 0; border-top: 1px solid var(--rule-strong); }
.segmented-option:first-child { border-top: 0; }
}
/* ── Buttons ────────────────────────────────────────────────────
*
* The complaint these sizes answer: buttons sat hard against the text next
* to them. The margin below is on the button itself rather than on every
* toolbar that holds one, so a button dropped into a paragraph, a table cell
* or a form row keeps its distance without the template asking. */
a.btn, button, .btn {
display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
font: inherit; font-weight: 650; font-size: .9rem; line-height: 1.2;
padding: .62rem 1.25rem; border: 1px solid transparent;
background: linear-gradient(90deg, var(--cta-deep), var(--cta-2));
color: #fff; border-radius: var(--r-sm); cursor: pointer;
text-decoration: none; white-space: nowrap;
box-shadow: var(--shadow-1);
transition: transform .1s ease, box-shadow .12s ease, filter .12s ease;
}
a.btn:hover, button:hover, .btn:hover {
filter: brightness(1.08); box-shadow: var(--shadow-2);
transform: translateY(-1px); color: #fff;
}
a.btn:active, button:active, .btn:active { transform: translateY(0); box-shadow: var(--shadow-1); }
button[disabled], .btn[disabled] {
opacity: .5; cursor: not-allowed; transform: none;
box-shadow: none; filter: none;
}
.btn-quiet {
display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
font: inherit; font-size: .87rem; font-weight: 650; line-height: 1.2;
padding: .55rem 1rem; border: 1px solid var(--rule-strong);
background: var(--surface); color: var(--ink-2);
border-radius: var(--r-sm); cursor: pointer; text-decoration: none;
white-space: nowrap; transition: background .12s ease, border-color .12s ease, color .12s ease;
box-shadow: none;
}
.btn-quiet:hover {
border-color: var(--ink-3); color: var(--ink);
background: var(--surface-2); transform: none; filter: none;
}
button.danger, .btn-quiet.danger {
border-color: var(--fail); background: transparent; color: var(--fail);
box-shadow: none; filter: none;
}
button.danger:hover, .btn-quiet.danger:hover { background: var(--fail); color: #fff; filter: none; }
/* Anything holding controls gets real breathing room. */
.toolbar {
display: flex; gap: 1rem; align-items: center; justify-content: space-between;
margin-bottom: 1.25rem; flex-wrap: wrap;
}
.inline { display: inline-flex; gap: .6rem; align-items: center; margin: 0; }
/* A document that needs something typed before it generates (Section L):
the button is the summary, the inputs unfold beneath it. */
.doc-ask { display: inline-block; vertical-align: top; margin: 0 .6rem .6rem 0; }
.doc-ask > summary { list-style: none; cursor: pointer; }
.doc-ask > summary::-webkit-details-marker { display: none; }
.doc-ask[open] { display: block; padding: .75rem; border: 1px solid var(--rule); border-radius: var(--r); }
.doc-ask[open] > summary { margin-bottom: .75rem; }
.toolbar > * + *, .inline > * + * { margin-left: 0; }
/* ── Logs and code ──────────────────────────────────────────── */
pre, .log {
background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--r);
padding: 1rem 1.15rem; overflow-x: auto;
font: 13px/1.6 var(--mono);
margin: 0 0 1.25rem; color: var(--ink);
}
.log ol { margin: 0; padding-left: 1.4rem; }
.log li { margin-bottom: .25rem; }
ol.steps { padding-left: 1.3rem; color: var(--ink-2); }
ol.steps li { margin-bottom: .65rem; }
code {
background: var(--surface-2); border: 1px solid var(--rule);
border-radius: var(--r-sm); padding: .1em .35em;
font: .86em var(--mono);
}
footer {
margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
color: var(--ink-3); font-size: .82rem;
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
a.btn:hover, button:hover, .btn:hover { transform: none; }
}
/* ─────────────────────────────────────────────────────────────
Authenticated application shell
───────────────────────────────────────────────────────────── */
.skip {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--brand); color: #fff; padding: .7rem 1.1rem;
border-radius: 0 0 var(--r-sm) 0; font-weight: 650;
}
.skip:focus { left: 0; }
/* Screen-reader-only labels on the icon-only drawer controls. */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* The icon sprite is defined once and never painted itself. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.app-shell { display: grid; grid-template-columns: 16.5rem 1fr; min-height: 100vh; }
/* ── The drawer ────────────────────────────────────────────────────────
*
* Wide screens: the sidebar is just a grid column, and the checkbox, the
* scrim and both labels are inert. Narrow screens: the column collapses,
* the sidebar becomes a fixed panel parked off the left edge, and :checked
* slides it back. It is a checkbox rather than six lines of JavaScript
* because script-src is 'self' and a control already in the platform does
* not need reimplementing. The input sits off-screen rather than carrying
* `hidden`, so it stays reachable by keyboard.
*/
.nav-toggle { position: absolute; left: -9999px; }
.nav-scrim, .nav-burger, .nav-close { display: none; }
.sidebar {
/* Read by both .sidebar-brand and .nav-group-summary below - defined
once, here, on their common ancestor, so the two stay in step by
construction rather than by two numbers somebody has to keep equal
by hand. */
--sidebar-brand-h: 4.5rem;
background: linear-gradient(180deg, var(--side-bg), var(--side-bg-2));
border-right: 1px solid var(--side-rule);
display: flex; flex-direction: column; padding: 0 0 1.25rem;
position: sticky; top: 0; height: 100vh; overflow-y: auto;
scrollbar-width: thin; scrollbar-color: var(--side-rule) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--side-rule); border-radius: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
/* The brand block stays put while ninety menu rows scroll underneath it.
min-height matches --sidebar-brand-h (declared on .sidebar above), which
every open group's own sticky header (.nav-group-summary) uses to park
itself right below this bar. */
.sidebar-brand {
display: flex; gap: .7rem; align-items: center;
min-height: var(--sidebar-brand-h);
padding: .95rem 1rem .85rem;
border-bottom: 1px solid var(--side-rule);
position: sticky; top: 0; z-index: 3;
background: var(--side-bg);
}
.sidebar-brand .brand-logo {
height: 2.4rem; width: 2.4rem; max-width: 2.4rem;
object-fit: contain; flex: none;
}
/* The badge is a portrait shield, not a square seal, so a square box would
letterbox it into something smaller than the seal it replaced. Given its
own height and a narrower box, it reads at the same optical weight.
No detail survives at this size and none is meant to - the wordmark beside
it does the naming. This is the silhouette people find the sidebar by. */
.sidebar-brand .brand-logo.is-badge {
height: 2.7rem; width: 2.2rem; max-width: 2.2rem;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}
.sidebar-brand .mark {
display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none;
background: linear-gradient(160deg, var(--brand-2), var(--brand));
color: #fff; border-radius: var(--r-sm);
font-weight: 700; font-size: .78rem; letter-spacing: .04em;
}
.brand-text { min-width: 0; flex: 1; }
.brand-text strong {
display: block; font-size: .92rem; color: var(--side-ink); letter-spacing: -.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-text small { display: block; color: var(--side-ink-2); font-size: .67rem; font-family: var(--mono); }
/* One group open at a time - see the comment
in layouts/app.php. The summary IS the group header users read today; it
just also opens and closes its own list now, and stays visible (sticky,
directly under the brand bar) whether its group is open or not, so a
group that has scrolled its items out of view still names itself, and a
collapsed group that holds the active page still shows where you are -
see .has-active. */
summary.nav-group-summary {
display: flex; align-items: center; justify-content: space-between; gap: .5rem;
font-size: .63rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--side-ink-2); padding: 1.1rem 1.35rem .35rem; opacity: .7;
cursor: pointer; list-style: none;
position: sticky; top: var(--sidebar-brand-h); z-index: 1;
background: var(--side-bg);
}
summary.nav-group-summary::-webkit-details-marker { display: none; }
summary.nav-group-summary::marker { content: ""; }
summary.nav-group-summary:hover { opacity: 1; color: var(--side-ink); }
summary.nav-group-summary:focus-visible { outline: 2px solid var(--cta); outline-offset: -2px; opacity: 1; }
summary.nav-group-summary.has-active { color: var(--cta); opacity: 1; }
.nav-chevron {
width: .75rem; height: .75rem; flex: none;
fill: none; stroke: currentColor; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
transition: transform .15s ease;
}
details.nav-group[open] > summary.nav-group-summary .nav-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
.nav-chevron { transition: none; }
}
.nav-group-items { padding-bottom: .3rem; }
.nav-item {
display: flex; align-items: center; gap: .65rem;
padding: .5rem .75rem; margin: .08rem .6rem;
color: var(--side-ink-2); text-decoration: none; font-size: .87rem;
border-radius: var(--r-sm); position: relative;
transition: background .12s ease, color .12s ease;
}
.nav-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-icon {
width: 1.1rem; height: 1.1rem; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round; opacity: .8;
}
.nav-item:hover { background: var(--side-hover); color: var(--side-ink); }
.nav-item:hover .nav-icon { opacity: 1; }
.nav-item:focus-visible { outline: 2px solid var(--cta); outline-offset: -2px; }
.nav-item.is-active {
background: linear-gradient(90deg, rgba(0, 208, 255, .22), var(--side-hover) 65%);
color: #fff; font-weight: 650;
}
.nav-item.is-active .nav-icon { color: var(--cta); opacity: 1; }
.nav-item.is-active::before {
content: ""; position: absolute; left: -.6rem; top: .3rem; bottom: .3rem;
width: 3px; border-radius: 0 3px 3px 0; background: var(--cta);
}
.sidebar-foot { margin-top: auto; padding: 1.5rem 1.35rem 0; }
.sidebar-foot p { font-size: .72rem; color: var(--side-ink-2); margin: 0; line-height: 1.55; opacity: .7; }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
padding: .8rem 1.9rem; border-bottom: 1px solid var(--rule);
background: var(--surface); flex-wrap: wrap;
position: sticky; top: 0; z-index: 20; box-shadow: var(--shadow-1);
}
/* "View as" - on every page while it is on, above the topbar. */
.view-as-bar {
display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap;
padding: .55rem 1.9rem; background: var(--manpower); color: #fff; font-size: .9rem;
}
.view-as-bar .view-as-text { flex: 1 1 18rem; min-width: 0; }
.view-as-bar .view-as-return {
background: #fff; color: var(--manpower); border: 1px solid #fff;
font-weight: 700; padding: .3rem .8rem; border-radius: 6px; cursor: pointer;
}
.view-as-bar .view-as-return:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.view-as-rules { margin: .25rem 0 1rem; padding-left: 1.1rem; line-height: 1.55; }
.btn-view-as { background: var(--manpower); border-color: var(--manpower); color: #fff; }
.btn-view-as-row { color: var(--manpower); border-color: var(--manpower); font-weight: 600; }
.crumbs { font-weight: 650; font-size: .98rem; letter-spacing: -.01em; flex: 1; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: .85rem; }
/* The Help button: opens the user-guide chapter for the page you are on. */
.topbar-help {
display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem;
border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--surface);
color: var(--brand-2); transition: background .12s ease, border-color .12s ease;
}
.topbar-help svg {
width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor;
stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.topbar-help:hover { background: var(--surface-2); border-color: var(--brand-2); color: var(--brand); }
.topbar-help.is-active { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.topbar-help:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }
/* Personnel scope.
Deliberately loud, and colour is not the only signal: the population is
spelled out in words. A superadmin who can edit both workforces has to be
able to tell at a glance which one an edit is about to land on, and roughly
one in twelve men cannot rely on a red/green difference to tell them. */
.scope-badge {
display: flex; align-items: center; gap: .4rem; flex: none;
padding: .3rem .7rem; border-radius: 999px;
border: 1px solid currentColor;
font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.scope-badge .scope-badge-label {
font-weight: 500; letter-spacing: .02em; opacity: .75; text-transform: none;
}
.scope-badge .scope-badge-note {
font-weight: 500; letter-spacing: .02em; opacity: .8; text-transform: none;
}
.scope-badge.is-organic { color: var(--ok); background: var(--ok-bg); }
.scope-badge.is-guard { color: var(--fail); background: var(--fail-bg); }
.scope-badge.is-manpower { color: var(--manpower); background: var(--manpower-bg); }
.scope-badge.is-all { color: var(--warn); background: var(--warn-bg); }
.scope-switch { display: flex; align-items: center; gap: .35rem; flex: none; }
.scope-switch select { padding: .3rem .5rem; font-size: .8rem; }
.avatar {
display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none;
border-radius: 50%; background: linear-gradient(150deg, var(--cta), var(--cta-2));
color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
}
/* A photo thumbnail fills the same circle a plain initials span already
sits in - no structural change to .avatar itself, so the topbar's
text-only usage is unaffected. */
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* The card-grid size, a little larger than a table row's. */
.avatar-md { width: 2.8rem; height: 2.8rem; font-size: .95rem; }
/* An avatar beside a name in a table cell, on any list screen that uses
employees._avatar. */
.name-cell { display: flex; align-items: center; gap: .6rem; }
.nav-burger, .nav-close {
align-items: center; justify-content: center;
width: 2.25rem; height: 2.25rem; flex: none; cursor: pointer;
border-radius: var(--r-sm); color: var(--ink-2);
}
.nav-burger:hover { background: var(--surface-2); color: var(--ink); }
.nav-close { color: var(--side-ink-2); margin-left: auto; }
.nav-close:hover { background: var(--side-hover); color: #fff; }
.nav-burger svg, .nav-close svg {
width: 1.35rem; height: 1.35rem;
fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round;
}
.who { text-align: right; }
.who strong { display: block; font-size: .86rem; line-height: 1.3; }
.who small { display: block; color: var(--ink-3); font-size: .73rem; }
.app main { padding: 1.9rem; max-width: 80rem; width: 100%; }
/* 80rem is a reading width. It suits a form or a page of prose and works
against a page that is one wide register: the table gets a scrollbar while
the screen still has space beside it. A page opts in with
$view->section('layout', 'wide'). */
.app main.is-wide { max-width: none; }
/* The employee photograph.
Square, because a 201 file photo is a portrait and a letterbox crop of one
is nobody's idea of an ID picture. The capture canvas takes a centre square
from the camera for the same reason. */
.photo-card { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.photo-frame { flex: none; width: 12rem; }
.photo-actions { flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
/* ── Employee profile header ─────────────────────────────────────────
*
* Name, photo, employee number and status used to be two unrelated blocks
* (a plain text page-head, then a full-width photo-and-upload card) - the
* one fact a reader actually scans for first, the employee number, sat as
* quiet monospace text inside a run-on sentence. This merges them into one
* card read the way a person is: photo, name, the number and the status
* next to it, everything else quieter underneath. */
.profile-header { display: flex; gap: 1.5rem; align-items: center; }
.profile-header-photo { flex: none; }
.profile-header-photo .photo { width: 6.5rem; height: 6.5rem; }
.profile-header-photo .photo-empty { font-size: 1.7rem; }
.profile-header-body { min-width: 0; }
.profile-header-body h1 { margin: 0 0 .4rem; }
.profile-header-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
margin: 0 0 .35rem;
}
.profile-header-sub { margin: 0; color: var(--ink-3); font-size: .9rem; }
/* The one fact worth a heavier, boxed treatment than an ordinary -
the employee number is how every other system in the building (payroll,
biometrics, the ID card itself) refers to this person, so it reads as a
fact plate, not as incidental text. */
.id-chip {
display: inline-flex; align-items: center; font-family: var(--mono);
font-size: .95rem; font-weight: 650; letter-spacing: .02em; color: var(--ink);
padding: .3rem .65rem; border-radius: var(--r-sm);
border: 1px solid var(--rule-strong); background: var(--surface-2);
}
/* The photo editor (upload + camera) is secondary to seeing the photo that
is already on file, so it is tucked behind a disclosure rather than
permanently occupying a full-width card - which, on this page's wide
layout, used to leave the upload button and a single file input stranded
in acres of empty space to the right of a 12rem photo. `.card.narrow`
keeps its open state from doing the same. */
.photo-editor summary {
cursor: pointer; font-weight: 650; color: var(--brand-2); user-select: none;
}
.photo-editor summary:hover { color: var(--brand); }
.photo-editor[open] summary { margin-bottom: 1.1rem; }
.photo-editor-body { display: flex; flex-direction: column; gap: 1rem; }
.photo-editor-body .toolbar { margin: 0; }
/* ── Document generator ──────────────────────────────────────────────
*
* One button per document kind, from a registry that can grow past what
* fits on one screen comfortably - previously an inline-block flow that
* wrapped ragged rows of wildly different widths. A grid gives every
* button the same footprint regardless of its label's length, so the
* panel reads as one organised list rather than a pile of buttons. */
.doc-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .6rem; margin-bottom: 1rem;
/* Not the default (stretch): stretch forces every grid item, including
an open , to the row's tallest member - which fought the
open state's own natural height and was the cause of the mangled
layout below. Each item sizes to its own content instead. */
align-items: start;
}
/* auto-fill (the first version of this) put as many 15rem columns as a
wide screen had room for - eight, on a typical desktop - which meant
most titles fit one line while a few long ones wrapped to two or three,
and "uniform width" stopped being "uniform height" too. A capped column
count keeps every column wide enough that at most two lines are ever
needed, which the fixed height below then makes literal. */
@media (min-width: 60rem) {
.doc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Two columns at a phone's width still squeezes the longest title past two
lines; one full-width column keeps every title readable instead of
letting the fixed height above clip it. */
@media (max-width: 30rem) {
.doc-grid { grid-template-columns: 1fr; }
}
.doc-grid > form,
.doc-grid > details { margin: 0; }
/* Scoped to DIRECT children only - `.doc-grid .btn-quiet` (no `>`) also
matched the "Generate" submit button nested inside an opened ask-form,
forcing IT to width/height:100% too and mangling the very form this grid
was supposed to leave alone. A fixed height (rather than min-height)
is what actually makes every closed button the same size regardless of
how many lines its own title wraps to - two lines' worth, which the
column cap above keeps sufficient for the longest title this registry
has. */
.doc-grid > form > .btn-quiet,
.doc-grid > details > summary.btn-quiet {
display: flex; align-items: center; gap: .55rem; width: 100%; height: 4rem;
text-align: left; white-space: normal; line-height: 1.3; overflow: hidden;
}
.doc-icon { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
/* Opened: a document that asks for something grows taller in place, inside
its own grid cell - it does not take over the row (that was the earlier,
broken attempt at this). `.doc-ask[open]`'s own border/padding/radius
still apply; this only recolours them for this one context, and turns
the summary from a bordered button into a plain label sitting inside the
now-tinted box it introduces. */
.doc-grid > details[open] {
background: #eaf1fb; border-color: var(--brand-2);
}
.doc-grid > details[open] > summary.btn-quiet {
height: auto; overflow: visible; background: none; border: 0; padding: 0; margin-bottom: .7rem;
color: var(--brand);
}
.doc-ask-fields { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .8rem; }
.doc-ask-actions { display: flex; justify-content: flex-end; gap: 1rem; align-items: center; }
/* ── Info badge: a hover/focus tooltip via the native title attribute,
for the one paragraph of context a panel needs but doesn't need to
spend permanent space on. ── */
.info-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 1.3rem; height: 1.3rem; flex: none; border-radius: 50%;
background: var(--surface-3); color: var(--ink-3);
font-size: .72rem; font-weight: 700; font-style: italic; cursor: help;
}
/* ── Button group: two or three adjacent actions read as one control ──
*
* Wraps existing .btn / .btn-quiet elements without touching either rule -
* both are used everywhere else in the app exactly as they already are.
* This only merges their corners and borders into one pill where they sit
* next to each other, such as Edit/History atop a record. */
.btn-group {
display: inline-flex; border: 1px solid var(--rule-strong);
border-radius: 999px; overflow: hidden;
}
.btn-group > .btn,
.btn-group > .btn-quiet { border-radius: 0; border: 0; box-shadow: none; }
.btn-group > .btn-quiet:not(:first-child) { border-left: 1px solid var(--rule-strong); }
.photo {
display: block; width: 12rem; height: 12rem; object-fit: cover;
/* A 201-file photo is usually taller than it is wide - shoulders up,
more air below the chin than above the head - so centering the crop
(the default 50% 50%) trims the top of the head as often as it trims
the chest. Anchoring near the top instead means a square crop loses
shoulder, never face. */
object-position: 50% 12%;
border-radius: var(--r); border: 1px solid var(--rule); background: var(--surface-2);
}
/* Initials, for the 222 records that arrived without one. */
.photo-empty {
display: grid; place-items: center;
font-size: 3rem; font-weight: 700; letter-spacing: .05em; color: var(--ink-3);
}
.photo-video, .photo-canvas {
display: block; width: 12rem; height: 12rem; object-fit: cover;
border-radius: var(--r); border: 1px solid var(--rule); background: #000;
}
/* The canvas is a scratch surface, never shown; the preview img is what the
person checks before saving. */
.photo-canvas { display: none; }
/* The captured frame, before it is saved. Marked as provisional so it cannot
be mistaken for the photograph already on file. */
.photo-preview { border-color: var(--cta); border-width: 2px; }
/* ── Photo DTR (Phase 4, Section I) ──────────────────────────────────── */
/* I.8's capture prompt: the phrase a guard holds up in frame. Large enough
to be read off a phone held at arm's length, and off the thumbnail the
reviewer sees. */
.capture-prompt {
margin: 0 0 1rem; padding: .85rem 1rem;
border: 1px dashed var(--cta); border-radius: var(--r); background: var(--surface-2);
}
.capture-prompt-lead { margin: 0 0 .35rem; font-size: .9rem; color: var(--ink-2); }
.capture-prompt-phrase {
margin: 0 0 .35rem; font-size: 2rem; font-weight: 700; letter-spacing: .08em;
font-family: var(--mono); color: var(--ink);
}
/* The field-attendance selfie camera (photo/submit.php).
Three states, from photo-capture.js's data-capture-state on .selfie:
idle - a big launch tile, a thumb-sized target on a phone;
live - a full-screen viewfinder like the phone's own camera: black,
mirrored, the whole uncropped frame, and a round shutter
within reach of the thumb;
captured - the photograph large, with Retake on it.
No face guide and no crop: the background is the proof of place HR
reviews, so what the camera sees is what HR sees. */
.selfie { margin: 0 0 1rem; }
.selfie-launch {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: .35rem; width: 100%; max-width: 26rem; min-height: 13rem; margin: 0;
padding: 1.5rem 1rem; white-space: normal; text-align: center;
background: var(--surface-2); color: var(--ink);
border: 2px dashed var(--rule-strong); border-radius: 1.25rem; box-shadow: none;
}
.selfie-launch:hover {
background: var(--surface-3); border-color: var(--cta-2); color: var(--ink);
transform: none; filter: none; box-shadow: none;
}
.selfie-launch:focus-visible { outline: 3px solid var(--cta-2); outline-offset: 3px; }
.selfie-launch-icon {
display: grid; place-items: center; width: 4.25rem; height: 4.25rem; margin-bottom: .4rem;
border-radius: 50%; color: #fff;
background: linear-gradient(135deg, var(--cta-2), var(--cta-deep));
box-shadow: 0 6px 18px rgba(0, 119, 242, .35);
}
.selfie-launch-title { font-size: 1.08rem; font-weight: 700; }
.selfie-launch-sub { font-size: .83rem; font-weight: 500; color: var(--ink-3); }
/* Live: the viewfinder takes the whole screen, over the sidebar and header. */
.selfie-stage { display: none; }
.selfie[data-capture-state="live"] .selfie-stage {
position: fixed; inset: 0; z-index: 1000;
display: flex; flex-direction: column; align-items: center; justify-content: space-between;
background: #000; color: #fff;
padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
body:has(.selfie[data-capture-state="live"]) { overflow: hidden; }
.selfie-bar {
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
width: 100%; max-width: 32rem; padding: .7rem 1rem; flex: none;
}
.selfie-close, .selfie-bar-spacer { flex: none; width: 2.75rem; height: 2.75rem; }
.selfie-close {
margin: 0; padding: 0; border-radius: 50%; border: 0;
background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none;
}
.selfie-close:hover { background: rgba(255, 255, 255, .26); transform: none; box-shadow: none; }
.selfie-slot {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
padding: .35rem .9rem; border-radius: 999px;
background: rgba(255, 255, 255, .14); font-size: .85rem; font-weight: 650; letter-spacing: .02em;
}
.selfie-slot:empty { visibility: hidden; }
/* All the space between the bars. object-fit: contain shows the camera's
WHOLE frame, uncropped - exactly what is kept, background included. */
.selfie-viewport {
position: relative; flex: 1 1 auto; min-height: 0; width: 100%;
display: flex; align-items: center; justify-content: center;
}
.selfie-video {
display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
object-fit: contain;
transform: scaleX(-1); /* a mirror, as every front camera shows it */
}
@media (min-width: 33rem) { .selfie-video { border-radius: 1.25rem; } }
.selfie-phrase, .selfie-tip {
position: absolute; left: 50%; transform: translateX(-50%); margin: 0;
max-width: calc(100% - 1.5rem); text-align: center; pointer-events: none;
border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff;
}
.selfie-phrase { top: .75rem; padding: .4rem .95rem; font-size: .85rem; }
.selfie-phrase strong { font-family: var(--mono); font-size: 1.05rem; letter-spacing: .06em; color: var(--cta); }
.selfie-tip { bottom: .75rem; padding: .3rem .85rem; font-size: .8rem; white-space: nowrap; }
.selfie-controls {
display: flex; align-items: center; justify-content: center;
width: 100%; flex: none; padding: 1rem 0 1.4rem;
}
/* The shutter: the white ring-and-disc every phone camera uses. */
.selfie-shutter {
position: relative; width: 4.6rem; height: 4.6rem; margin: 0; padding: 0;
border-radius: 50%; border: 4px solid #fff; background: transparent; box-shadow: none;
}
.selfie-shutter::after {
content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff;
transition: transform .12s ease;
}
.selfie-shutter:hover { transform: none; filter: none; box-shadow: none; }
.selfie-shutter:active::after { transform: scale(.88); }
.selfie-shutter:focus-visible { outline: 3px solid var(--cta); outline-offset: 4px; }
/* Captured: the photograph, large enough to judge. */
.selfie-result { position: relative; width: 100%; max-width: 26rem; margin: 0; }
.selfie-preview {
display: block; width: 100%; height: auto;
border-radius: 1.25rem; border: 3px solid var(--cta-2); background: var(--surface-2);
box-shadow: var(--shadow-2);
animation: selfie-flash .45s ease-out;
}
@keyframes selfie-flash { from { filter: brightness(2.2); } to { filter: none; } }
.selfie-retake {
position: absolute; right: .8rem; bottom: .8rem; margin: 0;
padding: .55rem 1rem; border-radius: 999px; border: 0;
background: rgba(0, 0, 0, .6); color: #fff; box-shadow: none;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.selfie-retake:hover { background: rgba(0, 0, 0, .75); transform: none; }
.selfie-message { margin: .6rem 0 0; }
/* Submit, sized for a thumb on a phone. */
@media (max-width: 40rem) {
.selfie-submit { width: 100%; padding: .95rem 1.25rem; font-size: 1rem; border-radius: .9rem; }
.selfie-launch, .selfie-result { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.selfie-preview { animation: none; }
.selfie-shutter::after { transition: none; }
}
/* Queue rows. Small enough that fifty fit on a screen, large enough to tell
a person from a wall. */
.photo-thumb {
display: block; width: 3.5rem; height: 3.5rem; object-fit: cover;
border-radius: var(--r); border: 1px solid var(--rule); background: var(--surface-2);
}
/* I.5 wants the submitted photograph SIDE BY SIDE with the enrolled one, so
a reviewer can judge a marginal score by looking rather than by trusting
the number. Wraps on a phone rather than shrinking both to uselessness. */
.photo-compare { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.photo-compare > * { flex: 1 1 18rem; min-width: 0; margin: 0; }
/* The submitted photograph is shown LARGE: this is the evidence, and a
thumbnail of a face is not something anybody can make a decision from. */
.photo-submitted {
display: block; width: 100%; max-width: 26rem; height: auto;
border-radius: var(--r); border: 1px solid var(--rule); background: var(--surface-2);
}
/* Face enrollment coverage: the search sits left and takes the room, the two
filters size to their options; on a phone they stack. */
.coverage-filters { justify-content: flex-start; align-items: flex-end; }
.coverage-search { flex: 1 1 18rem; max-width: 28rem; }
.coverage-filters select { width: auto; min-width: 10rem; }
.coverage-count { margin: -.5rem 0 .75rem; }
.coverage-empty { text-align: center; padding: 1.5rem .9rem; }
tbody[aria-busy="true"] { opacity: .55; transition: opacity .15s ease; }
@media (max-width: 40rem) {
.coverage-filters > .field { flex: 1 1 100%; max-width: none; }
.coverage-filters select { width: 100%; }
}
/* Feedback screenshots: several may be attached, so shown as a row of
thumbnails rather than one large image - the reader opens the one that
matters full-size rather than scrolling past every one at full width. */
.feedback-photos { display: flex; gap: 1rem; flex-wrap: wrap; }
.feedback-photo {
display: block; width: 12rem; height: 8rem; object-fit: cover;
border-radius: var(--r-sm); border: 1px solid var(--rule); background: var(--surface-2);
}
.page-head { margin-bottom: 1.75rem; }
.page-head h1 { margin: 0 0 .35rem; }
.page-head .lede { margin: 0; }
/* ── Checkboxes, roles, details ─────────────────────────────── */
.check { display: flex; gap: .6rem; align-items: start; padding: .4rem 0; font-size: .88rem; cursor: pointer; }
.check input { width: auto; margin-top: .25rem; flex: none; accent-color: var(--brand); }
.check.is-locked { opacity: .5; cursor: not-allowed; }
.role-grid, .perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: .4rem 1.5rem; }
/* ── Pick list: a searchable, contained checklist ────────────────────
*
* The problem this replaces: a bare grid of forty-plus checkboxes just runs
* on for the height of the page, so the single toggle above it ("all
* companies") and the list itself compete for attention and nothing about
* the list says how big it is until you scroll past it. This gives the
* list its own fixed-height, bordered frame with a search box and a live
* count in the header, so the panel's size is the same whether it holds
* five rows or five hundred. */
.pick-list {
border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
background: var(--surface); overflow: hidden;
}
.pick-list-toolbar {
display: flex; align-items: center; gap: .75rem;
padding: .55rem .75rem; border-bottom: 1px solid var(--rule);
background: var(--surface-2);
}
.pick-list-search { flex: 1; min-width: 0; }
.pick-list-count { font-size: .78rem; color: var(--ink-3); white-space: nowrap; }
.pick-list-actions { display: flex; gap: .5rem; }
.pick-list-actions button {
background: none; border: 0; padding: 0; margin: 0; font: inherit;
font-size: .78rem; font-weight: 650; color: var(--brand-2); cursor: pointer;
}
.pick-list-actions button:hover { text-decoration: underline; }
.pick-list-body {
max-height: 16rem; overflow-y: auto; padding: .3rem .9rem;
columns: 15rem; column-gap: 1.5rem;
}
.pick-list-item { break-inside: avoid; }
.pick-list-empty { padding: .75rem 0; }
/* The "nationwide" flag above the list makes every individual tick moot -
OR'd together server-side - so this greys the list out and stops clicks
reaching it rather than leaving forty ticks sitting there implying a
narrower scope than the flag actually grants. */
.pick-list.is-all-selected { opacity: .5; }
.pick-list.is-all-selected .pick-list-body,
.pick-list.is-all-selected .pick-list-toolbar { pointer-events: none; }
/* Quick-add row: bulk-select shortcuts above the list itself (e.g. "every
company with guard staff"), for a pick-list whose items carry more than
a name - see company-access.js. Sits between the toolbar and the body,
so it reads as "narrow the list, or just add a whole group at once". */
.pick-list-quick {
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
padding: .5rem .75rem; border-bottom: 1px solid var(--rule);
background: var(--surface);
}
.pill-button {
display: inline-flex; align-items: center; gap: .3rem;
font: inherit; font-size: .78rem; font-weight: 650;
padding: .25rem .65rem; border-radius: 999px;
border: 1px solid var(--rule-strong); background: var(--surface-2);
color: var(--ink-2); cursor: pointer;
}
.pill-button:hover { border-color: var(--brand); color: var(--brand-2); }
/* Company access rows: one item is now a name-plus-badges line and a
secondary edit/approve line, not the single label pick-list's default
masonry columns were built for - a single scrolling column reads far
better than balanced columns once a row wraps to two lines. */
.company-pick-body { columns: initial; max-height: 22rem; }
.company-row {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: .5rem 1rem; padding: .5rem 0; border-bottom: 1px solid var(--rule);
}
.company-row:last-child { border-bottom: 0; }
.company-row-head { flex: 1; min-width: 14rem; }
.company-row-main { padding: 0; }
.company-row-main .pill { margin-left: .4rem; }
.company-row-verbs { display: flex; gap: 1rem; flex: none; }
.check-quiet { padding: 0; font-size: .8rem; color: var(--ink-3); }
.check-quiet input { accent-color: var(--ink-3); }
.detail-list { margin: 0; display: grid; gap: 0; }
.detail-list > div { display: grid; grid-template-columns: 14rem 1fr; gap: 1.25rem; padding: .65rem 0; border-bottom: 1px solid var(--rule); }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { font-weight: 650; font-size: .85rem; }
.detail-list dd { margin: 0; color: var(--ink-2); font-size: .9rem; }
@media (max-width: 640px) { .detail-list > div { grid-template-columns: 1fr; gap: .2rem; } }
/* Two facts per row (label above value) rather than one per full-width
row - the employee-profile tabs' own list, kept separate from
.detail-list above since that one is shared by thirteen other pages
this was never asked to change. `.u-span-all` (existing utility) still
opts a long field - an address - out of the two-up layout. */
.fact-grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
.fact-grid > div { padding: .75rem 0; border-bottom: 1px solid var(--rule); }
.fact-grid > div:last-child { border-bottom: 0; }
.fact-grid dt {
font-size: .72rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: .3rem;
}
.fact-grid dd { margin: 0; font-size: .95rem; font-weight: 650; color: var(--ink); }
@media (max-width: 640px) { .fact-grid { grid-template-columns: 1fr; } }
.setting { display: grid; grid-template-columns: 1fr 16rem; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); align-items: start; }
.setting:last-child { border-bottom: 0; }
.setting-label code { font-size: .8rem; }
.setting-label p { margin: .35rem 0 0; font-size: .82rem; color: var(--ink-2); }
@media (max-width: 700px) { .setting { grid-template-columns: 1fr; } }
.pill {
display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .07em;
text-transform: uppercase; padding: .22rem .5rem; border-radius: 999px;
border: 1px solid var(--rule-strong); color: var(--ink-3); white-space: nowrap;
background: var(--surface-2);
}
.pill.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.pill.fail { color: var(--fail); border-color: var(--fail); background: var(--fail-bg); }
.pill.part { color: var(--warn); border-color: var(--warn); background: var(--warn-bg); }
.pill.manpower { color: var(--manpower); border-color: var(--manpower); background: var(--manpower-bg); }
/* Employee-group badges (Phase 4, Section G).
A FIXED PALETTE, not a colour picker writing a hex value into a style
attribute. The Content-Security-Policy sets style-src 'self', so an inline
style is dropped by the browser and the badge would silently render
colourless - see T-SEC-05. A named token stored on the group and matched to
a rule here survives the policy, and gives the screens a consistent set of
colours rather than twenty hand-picked blues. */
.badge-slate { color: #334155; border-color: #94a3b8; background: #f1f5f9; }
.badge-blue { color: #1e40af; border-color: #60a5fa; background: #eff6ff; }
.badge-green { color: #166534; border-color: #4ade80; background: #f0fdf4; }
.badge-amber { color: #92400e; border-color: #fbbf24; background: #fffbeb; }
.badge-red { color: #991b1b; border-color: #f87171; background: #fef2f2; }
.badge-violet { color: #5b21b6; border-color: #a78bfa; background: #f5f3ff; }
/*
* Two or more badges sharing one line, as compact chips rather than the
* block-width pill a LONE badge uses.
*
* The base .badge rule fills its container by design - a column that shows
* exactly one badge reads as a small, centred button, which is the right
* look for a status column. That same width:100% is wrong the moment a
* second badge joins it: each one still claims the full width, so instead of
* sitting side by side they force each other onto their own line - three
* flags in a Flags column render as three stacked banners instead of three
* chips. Wrapping the group in this and letting its children size to their
* content is the fix, without touching what a single badge looks like
* anywhere else in the app.
*/
.badge-group { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.badge-group .badge { width: auto; }
/* ── Tables ─────────────────────────────────────────────────── */
.scroll {
overflow-x: auto; border: 1px solid var(--rule); background: var(--surface);
border-radius: var(--r); margin-bottom: 1.25rem; box-shadow: var(--shadow-1);
}
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th {
text-align: left; font-size: .67rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-3); padding: .7rem .9rem; background: var(--surface-2);
border-bottom: 1px solid var(--rule); white-space: nowrap; font-weight: 700;
}
td { padding: .65rem .9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr { transition: background .1s ease; }
tbody tr:hover { background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }
.num-col { text-align: right; font-variant-numeric: tabular-nums; }
/* The action column stays put while the rest of a wide table scrolls.
The employee register carries twelve columns, and the one thing somebody
came to the page to do - open a record - was the first casualty: it sat off
the right edge and had to be scrolled to. Pinning it means the button is
reachable at any width, on any screen, without the table having to lose a
column to make room.
`right: 0` needs a background of its own, or the scrolling cells show
through it. The inset shadow draws the separating rule, because a border on
a sticky cell is painted at the cell's original position rather than where
it comes to rest. */
.scroll th.action-col,
.scroll td.action-col {
position: sticky;
right: 0;
background: var(--surface);
box-shadow: inset 1px 0 0 var(--rule);
white-space: nowrap;
z-index: 2;
}
/* The header cell is sticky in both directions, so it outranks the body. */
.scroll th.action-col { background: var(--surface-2); z-index: 3; }
/* Without this the pinned cell keeps the resting background on hover and
reads as a detached strip rather than part of the row. */
.scroll tbody tr:hover td.action-col { background: var(--surface-2); }
/* The same treatment, without eighty templates each needing a class.
Across this application a table's action column is written as a trailing
`