/* =============================================================
DEBESMSCAT HR ADMIN — DESIGN SYSTEM
components.css (single source of truth)
============================================================= */
/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
/* Brand — unchanged. 1,500+ var() references across templates depend on
these exact values. */
--primary-green: #00b894;
--dark-green: #00896c;
--forest-green: #006a52;
--green-light: #e8f8f5;
/* Page ground = the surface: one #f9f9f9 field, with cards, panels and
inputs separated by their borders rather than by a lighter fill.
Nothing in the light theme is pure white. Insets (table headers,
wells) sit one step darker on --surface-2. */
--off-white: #f9f9f9;
--border-color: #dcdfdd;
--text-primary: #101814;
/* Darkened with the ground: 7.4:1 on the #f9f9f9 surface, 6.8:1 on the
page. */
--text-secondary: #4a5550;
--shadow-sm: 0 2px 8px rgba(0,0,0,.06);
--shadow-md: 0 8px 24px rgba(0,0,0,.12);
--shadow-green: rgba(0,184,148,.3);
--light-gray: #ebedec;
/* ── Neutrals ──────────────────────────────────────────────
Tokenized from the ~2,000 hardcoded values already in the templates.
Same hex values, so nothing changes visually today — these exist so
inline styles have somewhere to land as pages are converted. */
/* The low steps sit under the #f9f9f9 surface so hovers and wells still
read against it; the high steps are text and darken with it. */
--n-50: #f1f2f2;
--n-100: #e9eaeb;
--n-200: #dcdee1;
--n-300: #c7cad0;
--n-400: #868d99;
--n-500: #5b6270;
--n-600: #414855;
--n-700: #2f3541;
--n-800: #1c222c;
--n-900: #0e131b;
/* Semantic — also lifted verbatim from existing template usage */
--danger: #dc2626;
--danger-soft: #fef2f2;
--danger-strong: #991b1b;
--success: #16a34a;
--success-soft: #f0fdf4;
--success-strong:#166534;
--warning: #d97706;
--warning-soft: #fffbeb;
--warning-strong:#92400e;
--info: #2563eb;
--info-soft: #eff6ff;
--info-strong: #1e40af;
/* Used only as the Resources accent on My Workspace. */
--violet: #7c3aed;
--violet-soft: #f5f3ff;
/* Sampled from static/images/logo.png -- the college seal.
seal green is within a hair of --forest-green, which is why the brand
already looks right; the gold and flame are the seal's own accents. */
--logo-green: #08614e;
--logo-gold: #996515;
--logo-flame: #ffb000;
--logo-cream: #fff4c0;
--logo-brown: #5f412b;
--logo-green-deep: #04443a;
/* Hero ground. Fixed in both themes: it is a brand panel, not an
accent on a surface. Lightening it for dark mode put gold text on
a mint ground at 2.42:1. White, cream and flame all read on this. */
--hero-ground: #08614e;
--hero-ground-deep: #04443a;
/* ── Type scale ────────────────────────────────────────────
Seven steps replacing the 25 ad-hoc sizes currently in use.
Values are rem, so the root scale below drives all of them. */
--text-2xs: 0.68rem;
--text-xs: 0.75rem;
--text-sm: 0.82rem;
--text-md: 0.9rem;
--text-lg: 1.05rem;
--text-xl: 1.35rem;
--text-2xl: 1.75rem;
--text-3xl: 2.25rem;
/* One family for the whole system. Headings get their weight from 700,
not from a second typeface. The three names stay so every existing
var(--font-*) keeps resolving; they all point at the same stack. */
--font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-display: var(--font-sans);
--font-body: var(--font-sans);
--font-accent: var(--font-sans);
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* ── Surfaces ──────────────────────────────────────────────
Card and panel backgrounds. These exist so nothing has to say the
literal "white" — that is what makes the dark theme possible. */
--surface: #f9f9f9; /* cards, tables, modals, topbar, sidebar */
--surface-2: #f2f3f2; /* insets: table headers, footers, wells */
/* ── Interactive pairs ─────────────────────────────────────
A fill and the label that sits on it have to move together, so they
are declared as a pair. The primary button previously took its fill
from --dark-green and hardcoded a white label: that is 4.38:1 in
light, and in dark --primary-green lightens to #00b894 and the same
white label collapses to 2.54:1. Pairing them lets dark mode do the
correct thing — a bright fill carrying a dark label. */
--btn-primary-bg: #006a52;
--btn-primary-bg-hover: #00553f;
--btn-primary-fg: #ffffff;
/* Brand green sitting on a pale green wash (.btn-edit, .btn-view:hover).
--dark-green on --green-light is 4.00:1: the tint eats the contrast
that the same green has on white. This is that pairing's own value. */
--accent-on-soft: #007f64;
/* Veil for a count pill sitting on a brand fill. Light carries white ink
on a dark fill so the pill darkens; dark carries near-black ink on a
bright fill, where the same veil would wash it out. */
--chip-count-veil: rgba(0,0,0,.20);
/* Breadcrumb separators and other structural glyphs. --n-300 is a border
value; used as text it measured 1.41:1 — invisible. Held at ~3:1
rather than 4.5:1 deliberately: a separator is decorative under WCAG
1.4.3 (the crumbs carry the meaning), and taking it to AA makes it as
loud as the links it separates. */
--separator: #8791a1;
/* ── Status chips ──────────────────────────────────────────
Status is the primary signal in this system, and it was carried by
29 rules that hardcoded a pale wash and a dark ink — so every badge
stayed a bright card in dark mode. Eight pairs cover all of them.
Light keeps the exact values that were there; dark swaps the wash
for a translucent overlay of the same hue, which tints the surface
instead of punching a hole in it. */
--chip-green-bg: #dcfce7; --chip-green-fg: #166534;
--chip-yellow-bg: #fef9c3; --chip-yellow-fg: #854d0e;
--chip-violet-bg: #f3e8ff; --chip-violet-fg: #7c3aed;
--chip-amber-bg: #fff3e0; --chip-amber-fg: #c2410c;
--chip-red-bg: #fee2e2; --chip-red-fg: #991b1b;
--chip-grape-bg: #ede9fe; --chip-grape-fg: #6d28d9;
--chip-sky-bg: #e0f2fe; --chip-sky-fg: #0369a1;
--chip-indigo-bg: #e0e7ff; --chip-indigo-fg: #4338ca;
/* Alerts, banners and callouts outline the chip. */
--chip-green-br: #bbf7d0;
--chip-amber-br: #fed7aa;
--chip-red-br: #fecaca;
--chip-sky-br: #bae6fd;
--chip-yellow-br: #fde68a;
--chip-violet-br: #ddd6fe;
/* Editorial chrome */
--rule: 1px solid var(--border-color);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
/* ── Legacy aliases ────────────────────────────────────────
These names are referenced ~59 times across 15 templates but were never
defined anywhere, so those declarations silently dropped (a background
or colour simply didn't apply). Defining them here repairs all of the
call sites at once; the names are kept rather than rewritten so the
templates stay diff-clean. Prefer the canonical token in new code. */
--bg-card: var(--surface);
--card-bg: var(--surface);
--border: var(--border-color);
--card-radius: var(--radius-sm);
--input-bg: var(--off-white);
--sidebar-bg: var(--off-white);
/* Sidebar width, and the width it shrinks to when minimised. A variable
because .main-content's margin has to track it exactly -- these were two
hard-coded 280s that could only ever be changed together. Flipping the
one token below moves both. */
--sidebar-w: 280px;
--sidebar-w-rail: 76px;
/* Mode colours. The brand tokens above (--primary-green and friends)
ARE the theme: on office and role pages
redefines them in blue, so every button, link, title and highlight
follows without a rule of its own. The names stay green for the 700+
call sites; read them as "brand".
--accent-personal-* / --accent-office-* are the two modes' fixed
values, for the few places that must show both at once (the mode
switch). --ws-* is the current mode's, an alias of the brand. */
--accent-personal: #00b894;
--accent-personal-soft: #e8f8f5;
--accent-personal-strong: #006a52;
--accent-office: #2563eb;
--accent-office-soft: #e8effd;
--accent-office-strong: #1e40af;
--ws-accent: var(--primary-green);
--ws-accent-soft: var(--green-light);
--ws-accent-strong: var(--forest-green);
--surface-secondary: var(--off-white);
--text-main: var(--text-primary);
--text-muted: var(--text-secondary);
/* Undefined, and its only call site falls back to a literal pale green
that cannot flip. The other undefined names in the templates all fall
back to real tokens, so they theme correctly already. */
--primary-green-light: var(--green-light);
}
/* Bootstrap components follow the #f9f9f9 base in light mode. */
:root[data-bs-theme="light"] {
--bs-body-bg: #f9f9f9;
--bs-body-bg-rgb: 249, 249, 249;
--bs-tertiary-bg: #f2f3f2;
}
/* ── ROOT SCALE ────────────────────────────────────────────────
15px root (93.75% of the 16px browser default). Because ~94% of this
system's font sizes AND spacing are expressed in rem — including the
inline styles throughout the templates — this single rule tightens
type and density together, uniformly, across every page.
The mobile override lives in the responsive section near the bottom. */
html { font-size: 93.75%; }
/* ── DARK THEME ────────────────────────────────────────────────
Applied by an inline script in base.html before first paint, so there
is never a white flash.
Almost all of this works by redefinition alone: the neutral ramp is
used consistently (low numbers as backgrounds, high numbers as text),
so inverting it flips thousands of var() references at once without
touching a single rule.
Two things need care rather than inversion:
- the brand greens fail contrast on a dark field, so they lighten
- soft tints (--*-soft, --green-light) become translucent overlays
instead of pale washes, which would otherwise glow
────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
/* Surfaces */
--surface: #161d29;
--surface-2: #1c2533;
--off-white: #0f1520; /* page background */
--light-gray: #1c2533;
--border-color: #2a3646;
/* Text */
--text-primary: #e6eaf0;
--text-secondary: #9aa7b6;
/* Neutral ramp, inverted. 50 stays the lightest *surface* and 900 the
strongest *text*, so the semantics of every existing usage hold. */
--n-50: #1a2230;
--n-100: #212b3b;
--n-200: #2a3646;
--n-300: #3a4859;
/* 400 is the lowest step still used as body text on a dark surface;
#6b7a8d measured 3.52:1 there. Lifted to clear 4.5:1. */
--n-400: #7e8c9d;
--n-500: #93a1b2;
--n-600: #b3becc;
--n-700: #ccd4de;
--n-800: #dde3ea;
--n-900: #f0f3f7;
/* Brand — lightened, then mixed ~30% toward white: the pure mints read
as neon on this ground. Still 9:1+ on the surface. */
--forest-green: #4de0c1;
--dark-green: #4dcdb4;
--primary-green: #4dcdb4;
--green-light: rgba(77, 205, 180, .14);
--shadow-green: rgba(77, 205, 180, .25);
/* Semantic text colours lift; their soft fills become overlays */
--danger: #f87171;
--danger-soft: rgba(248, 113, 113, .14);
--danger-strong: #fca5a5;
--success: #4ade80;
--success-soft: rgba(74, 222, 128, .14);
--success-strong: #86efac;
--warning: #fbbf24;
--warning-soft: rgba(251, 191, 36, .14);
--warning-strong: #fcd34d;
--info: #60a5fa;
--info-soft: rgba(96, 165, 250, .14);
--info-strong: #93c5fd;
--violet: #a78bfa;
--violet-soft: rgba(167, 139, 250, .14);
--logo-green: #12a883;
--logo-gold: #d4a24c;
--logo-flame: #ffc233;
--logo-cream: #fff8d8;
--logo-brown: #a9805f;
/* The primary fill brightens and the label inverts to near-black.
White on a bright mint is 2.54:1; near-black on it is 7.2:1, and a
luminous accent carrying dark text is the established dark-theme
pattern rather than a compromise. */
--btn-primary-bg: #26cfac;
--btn-primary-bg-hover: #4dd9bb;
--btn-primary-fg: #08121b;
/* On dark, --green-light is already a translucent overlay rather than a
pale wash, so the brand green keeps its contrast and needs no shift. */
--accent-on-soft: #4dcdb4;
--chip-count-veil: rgba(255,255,255,.28);
--separator: #5a708a;
/* Status chips. Overlays rather than washes, so a chip reads as the
surface tinted by its hue. Every pair measured 6.0:1 or better. */
--chip-green-bg: rgba(74, 222, 128, .16); --chip-green-fg: #86efac;
--chip-yellow-bg: rgba(250, 204, 21, .16); --chip-yellow-fg: #fde047;
--chip-violet-bg: rgba(167, 139, 250, .16); --chip-violet-fg: #c4b5fd;
--chip-amber-bg: rgba(251, 146, 60, .16); --chip-amber-fg: #fdba74;
--chip-red-bg: rgba(248, 113, 113, .16); --chip-red-fg: #fca5a5;
--chip-grape-bg: rgba(167, 139, 250, .18); --chip-grape-fg: #ddd6fe;
--chip-sky-bg: rgba(56, 189, 248, .16); --chip-sky-fg: #7dd3fc;
--chip-indigo-bg: rgba(129, 140, 248, .16); --chip-indigo-fg: #a5b4fc;
--chip-green-br: rgba(74, 222, 128, .35);
--chip-amber-br: rgba(251, 146, 60, .35);
--chip-red-br: rgba(248, 113, 113, .35);
--chip-sky-br: rgba(56, 189, 248, .35);
--chip-yellow-br: rgba(250, 204, 21, .35);
--chip-violet-br: rgba(167, 139, 250, .35);
/* Shadows read as depth only against light; on dark they must darken */
--shadow-sm: 0 2px 8px rgba(0,0,0,.4);
--shadow-md: 0 8px 24px rgba(0,0,0,.55);
/* Legacy aliases follow their canonical tokens */
--bg-card: var(--surface);
--card-bg: var(--surface);
--input-bg: var(--surface-2);
--sidebar-bg: var(--surface-2);
--surface-secondary: var(--surface-2);
/* Mode colours, lifted for a dark surface and softened toward white */
--accent-personal: #4dcdb4;
--accent-personal-soft: rgba(77, 205, 180, .14);
--accent-personal-strong: #4de0c1;
--accent-office: #99b9ff;
--accent-office-soft: rgba(153, 185, 255, .14);
--accent-office-strong: #b8d0ff;
color-scheme: dark; /* native scrollbars, form controls, date pickers */
}
/* The sidebar masthead stays forest green in both themes — white on
#006a52 passes contrast, and it gives dark mode a fixed brand anchor.
It is written literally so the lightened --forest-green cannot reach it. */
:root[data-theme="dark"] .sidebar-header { background: var(--surface); }
/* ── OFFICE MODE ───────────────────────────────────────────────
Office and role pages carry . The brand
tokens turn blue; semantic colours (--success, chips, danger, warning)
are untouched, so an "Approved" chip stays green in either mode.
Two blocks because :root[data-theme="dark"] outranks a single-attribute
selector -- the dark one has to name both attributes to win. */
:root[data-ws-mode="office"] {
--primary-green: #2563eb;
--dark-green: #1d4ed8;
--forest-green: #1e40af;
--green-light: #e8effd;
--shadow-green: rgba(37, 99, 235, .28);
--accent-on-soft: #1d4ed8;
--btn-primary-bg: #1e40af;
--btn-primary-bg-hover: #1e3a8a;
--btn-primary-fg: #ffffff;
/* Hero panels (the Home banners) -- navy instead of seal green. Fixed in
both themes, like the green one: a brand panel, not an accent. */
--hero-ground: #1e3a8a;
--hero-ground-deep: #172554;
}
:root[data-theme="dark"][data-ws-mode="office"] {
--primary-green: #99b9ff;
--dark-green: #99b9ff;
--forest-green: #b8d0ff;
--green-light: rgba(153, 185, 255, .14);
--shadow-green: rgba(153, 185, 255, .25);
--accent-on-soft: #99b9ff;
--btn-primary-bg: #8fb2ff;
--btn-primary-bg-hover: #a9c4ff;
--btn-primary-fg: #08121b;
}
/* ── RESET / BASE ───────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
font-size: 0.95rem;
color: var(--text-primary);
background: var(--off-white);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* ── ANIMATIONS (defined once globally) ────────────────────── */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(.95) } to { opacity: 1; transform: scale(1) } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(20px) } to { opacity: 1; transform: translateX(0) } }
@keyframes modalIn { from { opacity: 0; transform: translateY(-40px) scale(.96) } to { opacity: 1; transform: translateY(0) scale(1) } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } }
@keyframes slideIn { from { transform: translateX(-100%) } to { transform: translateX(0) } }
@keyframes slideOut { from { transform: translateX(0) } to { transform: translateX(-100%) } }
/* ════════════════════════════════════════════════════════════
1. LAYOUT
════════════════════════════════════════════════════════════ */
/* Page shell: sidebar + main-content */
.d-flex { display: flex; }
/* ── Sidebar ────────────────────────────────────────────────── */
/* White surface, green accents. No gradient, no photograph — the hierarchy
is carried by indentation and weight instead of by decoration. */
.sidebar {
position: fixed;
top: 0; left: 0;
height: 100vh;
width: var(--sidebar-w);
background: var(--surface);
border-right: var(--rule);
z-index: 1000;
overflow: hidden;
transition: transform .3s ease, width .2s ease;
/* rail | panel. Without a rail the panel is the whole sidebar. */
display: flex;
flex-direction: row;
}
/* The panel scrolls; the rail beside it stays put. */
.ws-panel {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
/* no top padding — the header band runs flush to the top edge */
padding: 0 0 1.25rem;
}
/* Muted scrollbar so a long nav does not draw a hard line down the edge */
.ws-panel::-webkit-scrollbar { width: 8px; }
.ws-panel::-webkit-scrollbar-thumb {
background: var(--n-200);
border-radius: 999px;
border: 2px solid var(--surface);
}
.ws-panel::-webkit-scrollbar-thumb:hover { background: var(--n-300); }
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
z-index: 999;
}
/* Green masthead against the white nav below it — anchors the brand and
marks where navigation begins. */
/* White masthead, separated from the nav by a green rule rather than by a
block of colour. The seal carries the brand here; a green panel behind a
green-and-gold seal was fighting it. */
.sidebar-header {
background: var(--surface);
padding: 1.15rem 1.25rem;
margin-bottom: 1rem;
border-bottom: 2px solid var(--ws-accent);
flex-shrink: 0;
transition: border-color .2s ease;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: .75rem;
color: var(--forest-green);
text-decoration: none;
}
.sidebar-logo {
width: 40px; height: 40px;
border-radius: 10px;
object-fit: cover;
}
.sidebar-logo-placeholder {
width: 40px; height: 40px;
border-radius: 10px;
/* translucent white so the mark reads on the green field */
background: rgba(255,255,255,.15);
object-fit: contain;
padding: 4px;
}
.sidebar-brand-text {
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 700;
letter-spacing: -.01em;
color: var(--forest-green);
line-height: 1.2;
}
.sidebar-brand-text small {
display: block;
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--logo-gold);
font-family: var(--font-body);
}
.sidebar-nav { padding: 0 1rem; }
.sidebar-footer {
padding: .75rem 1rem 1rem;
border-top: var(--rule);
margin-top: auto;
}
.sidebar-logout-btn {
width: 100%;
display: flex;
align-items: center;
gap: .65rem;
padding: .48rem .8rem;
color: var(--text-secondary);
background: none;
border: none;
border-radius: var(--radius-sm);
margin-bottom: .1rem;
font-weight: 500;
font-size: var(--text-sm);
font-family: var(--font-body);
cursor: pointer;
transition: background .15s, color .15s;
text-align: left;
}
.sidebar-logout-btn:hover {
background: var(--danger-soft);
color: var(--danger);
}
.sidebar-logout-btn i {
font-size: 1rem;
width: 1.2rem;
flex-shrink: 0;
color: var(--n-400);
transition: color .15s;
}
.sidebar-logout-btn:hover i { color: var(--danger); }
/* ── Sections ─────────────────────────────────────────────────────────
Personal has one untitled section. Office has the user's office first,
then one per role area, each collapsible behind its heading. */
.ws-pane[hidden] { display: none; }
.ws-sec + .ws-sec { margin-top: .15rem; }
.ws-sec-title {
width: 100%;
display: flex;
align-items: center;
gap: .55rem;
padding: .6rem .8rem .45rem;
border: none;
border-radius: var(--radius-sm);
background: none;
font-family: var(--font-body);
font-size: var(--text-2xs);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--text-secondary);
text-align: left;
}
button.ws-sec-title { cursor: pointer; transition: color .15s, background .15s; }
button.ws-sec-title:hover { color: var(--ws-accent-strong); background: var(--n-50); }
.ws-sec-title > i:first-child {
font-size: .95rem;
letter-spacing: 0;
color: var(--ws-accent);
}
.ws-sec-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-sec-title small {
font-size: var(--text-2xs);
font-weight: 700;
letter-spacing: .06em;
color: var(--logo-gold);
}
.ws-sec-chev { font-size: .6rem; opacity: .6; transition: transform .2s ease; }
.ws-sec.is-collapsed .ws-sec-chev { transform: rotate(-90deg); }
.ws-sec.is-collapsed .ws-sec-body { display: none; }
/* Items hang off a hairline under their heading. */
.ws-sec--collapsible .ws-sec-body {
margin: 0 0 .35rem .95rem;
padding-left: .55rem;
border-left: 1px solid var(--border-color);
}
/* A group inside a pane, e.g. "Assigned to me". A label, not a control. */
.nav-group-title {
display: flex;
align-items: center;
gap: .55rem;
margin: 1rem .8rem .35rem;
font-size: var(--text-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--text-secondary);
}
.nav-group-title::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-color);
}
.nav-maint { font-size: var(--text-2xs) !important; color: var(--warning) !important; margin-left: auto; width: auto !important; }
.nav-badge {
margin-left: auto;
background: var(--danger);
color: #fff;
border-radius: 99px;
padding: 0 .4rem;
font-size: var(--text-2xs);
font-weight: 700;
min-width: 1.25rem;
text-align: center;
line-height: 1.6;
}
.nav-badge[hidden] { display: none; }
/* ── Shared item shell ──────────────────────────────────────────────── */
.nav-link-item {
display: flex;
align-items: center;
gap: .65rem;
padding: .48rem .8rem;
color: var(--text-secondary);
text-decoration: none;
border-radius: var(--radius-sm);
margin-bottom: .1rem;
font-weight: 500;
font-size: var(--text-sm);
transition: background .15s, color .15s;
}
.nav-link-item:hover {
background: var(--n-50);
color: var(--text-primary);
}
.nav-link-item i {
font-size: 1rem;
width: 1.2rem;
flex-shrink: 0;
color: var(--n-400);
transition: color .15s;
}
.nav-link-item:hover i { color: var(--ws-accent-strong); }
/* ── Active ─────────────────────────────────────────────────────────── */
.nav-link-item.active {
background: var(--ws-accent-soft);
color: var(--ws-accent-strong);
font-weight: 600;
box-shadow: inset 2px 0 0 var(--ws-accent);
}
.nav-link-item.active i { color: var(--ws-accent-strong); }
/* ── Sidebar: minimised panel ─────────────────────────────────────────
Desktop only. Below 768px the sidebar is an off-canvas drawer that is
either fully open or fully off-screen, and a 76px rail there would be a
third state nobody asked for -- so the whole block is gated behind the
breakpoint and the drawer keeps its full width.
The state lives on , set by the pre-paint script in
base.html for the same reason the theme is: read after first paint, the
sidebar would visibly jump from 280px to 76px on every page load.
Minimising shrinks the panel to icons; the workspace rail, when there is
one, stays as it is beside it.
Labels are hidden with font-size:0 on the row and restored on the icon,
so the rows need no extra markup. ui.js copies each label into a title
attribute while minimised, so hovering still names it. */
@media (min-width: 768px) {
html[data-sidebar="collapsed"] { --sidebar-w: var(--sidebar-w-rail); }
html[data-sidebar="collapsed"] .sidebar-nav { padding: 0 .5rem; }
html[data-sidebar="collapsed"] .nav-group-title { display: none; }
/* Section headings carry only an icon's worth of meaning here, so they
go, and every section is forced open -- with the heading gone there
would be no way to expand one. A hairline keeps them apart. */
html[data-sidebar="collapsed"] .ws-sec-title { display: none; }
html[data-sidebar="collapsed"] .ws-sec.is-collapsed .ws-sec-body,
html[data-sidebar="collapsed"] .ws-sec-body { display: block; }
html[data-sidebar="collapsed"] .ws-sec--collapsible .ws-sec-body {
margin: 0; padding-left: 0; border-left: none;
}
html[data-sidebar="collapsed"] .ws-sec + .ws-sec {
border-top: 1px solid var(--border-color);
margin-top: .3rem; padding-top: .3rem;
}
/* Masthead: seal only, centred. */
html[data-sidebar="collapsed"] .sidebar-header { padding: 1.15rem .5rem; }
html[data-sidebar="collapsed"] .sidebar-brand { justify-content: center; gap: 0; }
html[data-sidebar="collapsed"] .sidebar-brand-text { display: none; }
/* Rows: icon centred, label suppressed. */
html[data-sidebar="collapsed"] .sidebar .nav-link-item,
html[data-sidebar="collapsed"] .sidebar .sidebar-logout-btn {
font-size: 0;
gap: 0;
justify-content: center;
padding-left: 0;
padding-right: 0;
}
html[data-sidebar="collapsed"] .sidebar .nav-link-item > i,
html[data-sidebar="collapsed"] .sidebar .sidebar-logout-btn > i {
font-size: 1.15rem;
width: auto;
}
/* The maintenance mark would crowd a centred icon; the tooltip carries it. */
html[data-sidebar="collapsed"] .nav-maint { display: none; }
html[data-sidebar="collapsed"] .nav-link-item.active { box-shadow: none; }
/* The inbox count still has to be visible, but margin-left:auto in a
centred row would shove it into the edge. Pinned to the icon instead,
the way an unread badge normally reads. */
html[data-sidebar="collapsed"] #navForApproval { position: relative; }
html[data-sidebar="collapsed"] #navForApprovalBadge {
position: absolute;
top: .1rem;
right: .5rem;
margin-left: 0;
line-height: 1.4;
}
html[data-sidebar="collapsed"] .sidebar-footer { padding: .75rem .5rem 1rem; }
}
/* ── Main Content ───────────────────────────────────────────── */
.main-content {
margin-left: var(--sidebar-w);
min-height: 100vh;
width: calc(100% - var(--sidebar-w));
display: flex;
flex-direction: column;
transition: margin-left .2s ease, width .2s ease;
}
.content-wrapper {
padding: 24px 20px;
animation: fadeIn .4s ease;
flex: 1;
}
.page-container {
max-width: 1400px;
margin: 0 auto;
padding: 8px 4px;
}
.page-container-narrow {
max-width: 1000px;
margin: 0 auto;
padding: 8px 4px;
}
/* ── My Workspace ───────────────────────────────────────────── */
/* The landing page. It is a launcher, not a report: no counts, no prose
under every tile, and one colour per group so a group can be found by
hue before the label is read. */
/* Hero -------------------------------------------------------- */
/* Built from the seal's own palette: deep seal green ground, the book and
ring gold as the accent, the torch flame as the highlight. The seal
itself appears twice -- once at reading size, once oversized and clipped
as a watermark. */
.ws-hero {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.6rem 1.9rem;
margin-bottom: 2.25rem;
border-radius: var(--radius-lg);
background:
radial-gradient(120% 140% at 100% 50%, rgba(255, 176, 0, .16) 0%, transparent 55%),
linear-gradient(135deg, var(--hero-ground) 0%, var(--hero-ground-deep) 100%);
color: #fff;
overflow: hidden;
position: relative;
/* the gold rule ties the hero to the seal's outer ring */
border-bottom: 3px solid var(--logo-gold);
}
.ws-hero-seal {
flex: none;
width: 4.5rem;
height: 4.5rem;
object-fit: contain;
border-radius: 50%;
background: #f9f9f9;
padding: .2rem;
box-shadow: 0 0 0 2px var(--logo-gold);
}
.ws-hero-text { min-width: 0; flex: 1; }
.ws-hero-eyebrow {
margin: 0 0 .35rem;
font-family: var(--font-body);
font-size: var(--text-2xs);
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: #ffb000; /* fixed: sits on the fixed hero ground */
}
.ws-hero-title {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 700;
line-height: 1.15;
margin: 0 0 .3rem;
text-wrap: balance;
color: #fff;
}
.ws-hero-sub {
margin: 0;
font-size: var(--text-md);
color: #fff4c0; /* fixed, as above */
max-width: 46ch;
}
/* A small label under the greeting -- the office on the Office home. */
.ws-hero-tag {
display: inline-flex;
align-items: center;
margin-top: .6rem;
padding: .2rem .65rem;
border-radius: 999px;
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .28);
color: #ffffff;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
/* Oversized seal, clipped by the hero. Decorative: the readable copy never
sits on top of it. */
.ws-hero-watermark {
position: absolute;
right: -2.5rem;
top: 50%;
width: 15rem;
height: 15rem;
transform: translateY(-50%);
opacity: .1;
pointer-events: none;
object-fit: contain;
}
@media (max-width: 900px) {
.ws-hero-watermark { display: none; }
}
@media (max-width: 720px) {
.ws-hero { padding: 1.25rem 1.35rem; gap: 1rem; }
.ws-hero-seal { width: 3.25rem; height: 3.25rem; }
}
/* Groups ------------------------------------------------------ */
/* Each group sets its own accent; everything below reads it. */
.ws-accent--amber { --ws-accent: var(--warning); --ws-accent-soft: var(--warning-soft); }
.ws-accent--blue { --ws-accent: var(--info); --ws-accent-soft: var(--info-soft); }
/* forest, not primary: #00b894 on the pale green wash is only 2.31:1,
which is too faint for an icon carrying the group's identity. The dark
theme remaps --forest-green to a light mint, so it stays legible there. */
.ws-accent--green { --ws-accent: var(--forest-green); --ws-accent-soft: var(--green-light); }
.ws-accent--violet { --ws-accent: var(--violet); --ws-accent-soft: var(--violet-soft); }
.ws-group { margin-bottom: 2.25rem; }
.ws-group-title {
display: flex;
align-items: center;
gap: .6rem;
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0 0 1rem;
}
.ws-group-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.85rem;
height: 1.85rem;
flex: none;
border-radius: 8px;
background: var(--ws-accent-soft);
color: var(--ws-accent);
font-size: .95rem;
}
/* At-a-glance stats ------------------------------------------- */
.ws-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
gap: 1rem;
margin-bottom: 2.25rem;
}
.ws-stat {
display: flex;
align-items: flex-start;
gap: .85rem;
padding: 1rem 1.15rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text-primary);
transition: border-color .16s ease, box-shadow .16s ease;
}
a.ws-stat:hover, a.ws-stat:focus-visible {
border-color: var(--primary-green);
box-shadow: var(--shadow-sm);
color: var(--text-primary);
}
.ws-stat--attn { border-color: var(--warning); background: var(--warning-soft); }
.ws-stat-icon {
width: 2.4rem; height: 2.4rem;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-size: 1.1rem;
}
.ws-stat-icon--amber { background: var(--warning-soft); color: var(--warning-strong); }
/* The mode's own colour: green on the Personal home, blue on the Office one. */
.ws-stat-icon--brand { background: var(--green-light); color: var(--accent-on-soft); }
.ws-stat-icon--green { background: var(--green-light); color: var(--forest-green); }
.ws-stat-icon--blue { background: var(--info-soft); color: var(--info); }
.ws-stat-icon--violet { background: var(--violet-soft); color: var(--violet); }
.ws-stat-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ws-stat-label {
font-size: var(--text-2xs);
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--text-secondary);
}
.ws-stat-value {
font-family: var(--font-display);
font-size: var(--text-xl, 1.35rem);
font-weight: 700;
font-variant-numeric: tabular-nums;
margin: .15rem 0 .1rem;
}
.ws-stat-value small { font-size: .6em; font-weight: 700; color: var(--text-secondary); }
.ws-stat-value--text { font-size: var(--text-md); }
.ws-stat-sub { font-size: var(--text-xs); color: var(--text-secondary); }
/* Tiles ------------------------------------------------------- */
/* 21rem lands on three columns at a normal desktop width and four on a
very wide one. 19rem gave four everywhere, which was the density this
redesign set out to loosen. */
.ws-tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
gap: 1rem;
}
.ws-tile {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.15rem 1.25rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text-primary);
text-decoration: none;
transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ws-tile:hover,
.ws-tile:focus-visible {
border-color: var(--ws-accent);
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
color: var(--text-primary);
}
.ws-tile:focus-visible {
outline: 2px solid var(--ws-accent);
outline-offset: 2px;
}
.ws-tile-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.85rem;
height: 2.85rem;
flex: none;
border-radius: 11px;
background: var(--ws-accent-soft);
color: var(--ws-accent);
font-size: 1.25rem;
transition: background-color .16s ease;
}
.ws-tile:hover .ws-tile-icon {
background: var(--ws-accent);
color: #fff;
}
.ws-tile-label {
font-size: var(--text-md);
font-weight: 600;
line-height: 1.3;
min-width: 0;
}
.ws-tile-go {
margin-left: auto;
flex: none;
font-size: var(--text-sm);
color: var(--text-secondary);
opacity: 0;
transform: translateX(-4px);
transition: opacity .16s ease, transform .16s ease;
}
.ws-tile:hover .ws-tile-go {
opacity: 1;
transform: translateX(0);
color: var(--ws-accent);
}
@media (prefers-reduced-motion: reduce) {
.ws-tile, .ws-tile-icon, .ws-tile-go { transition: none; }
.ws-tile:hover { transform: none; }
.ws-tile-go { opacity: 1; transform: none; }
}
/* ── Dashboard quick links ──────────────────────────────────── */
/* A section dashboard is a landing pad: the numbers say what is going on,
these say where to go next. Built from tokens so both themes work. */
.dash-links {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
gap: .75rem;
margin-top: 1.5rem;
}
.dash-link {
display: flex;
align-items: center;
gap: .75rem;
padding: .85rem 1rem;
background: var(--surface);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
text-decoration: none;
color: var(--text-primary);
transition: border-color .15s ease, background-color .15s ease;
}
.dash-link:hover {
border-color: var(--primary-green);
background: var(--green-light);
}
.dash-link > i:first-child {
font-size: var(--text-lg);
color: var(--forest-green);
flex: none;
}
.dash-link-text {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.35;
}
.dash-link-text strong {
font-size: var(--text-sm);
font-weight: 600;
}
.dash-link-text small {
font-size: var(--text-2xs);
color: var(--text-secondary);
}
.dash-link-go {
margin-left: auto;
color: var(--text-secondary);
font-size: var(--text-xs);
flex: none;
}
/* Something actually needs attention here. */
.dash-link--alert {
border-color: var(--warning);
background: var(--warning-soft);
}
.dash-link--alert > i:first-child,
.dash-link--alert .dash-link-go { color: var(--warning); }
.dash-link--alert:hover {
border-color: var(--warning);
background: var(--warning-soft);
filter: brightness(.97);
}
@media (prefers-reduced-motion: reduce) {
.dash-link { transition: none; }
}
/* ── Page Header ────────────────────────────────────────────── */
/* Editorial page header: no card, no shadow — the title sits on the page
and a single rule separates it from the content beneath. */
.page-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
background: transparent;
border: none;
border-bottom: var(--rule);
border-radius: 0;
box-shadow: none;
padding: .25rem 0 1rem;
margin-bottom: 1.5rem;
gap: 1rem;
}
.page-header-left { flex: 1; min-width: 0; }
.page-header-right { display: flex; gap: 0.75rem; flex-shrink: 0; }
/* ════════════════════════════════════════════════════════════
2. TYPOGRAPHY
════════════════════════════════════════════════════════════ */
/* Eyebrow — small tracked caps above a page title, giving each page a
sense of place ("Human Resources / Daily Time Records"). */
.page-eyebrow {
font-family: var(--font-body);
font-size: var(--text-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--text-secondary);
margin-bottom: .4rem;
display: block;
}
.page-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: 600;
color: var(--forest-green);
margin: 0;
line-height: 1.15;
letter-spacing: -.011em;
}
.page-subtitle {
font-size: var(--text-sm);
color: var(--text-secondary);
margin-top: 0.3rem;
line-height: 1.5;
}
.form-section-title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-primary);
padding-bottom: 0.6rem;
border-bottom: var(--rule);
margin-bottom: 1.25rem;
}
.form-card-title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 600;
color: var(--forest-green);
margin: 0 0 0.35rem;
letter-spacing: -.01em;
}
.form-card-description {
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 0;
}
/* Numerals stay in the sans — lining figures read better at a glance in
dashboards than the serif's text figures. */
.stat-value {
font-family: var(--font-body);
font-size: var(--text-2xl);
font-weight: 700;
color: var(--forest-green);
line-height: 1;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
.form-label {
display: block;
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.3rem;
letter-spacing: .01em;
}
.form-label.required::after {
content: " *";
color: #c33;
}
.modal-label {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-primary);
}
.form-help {
display: block;
font-size: 0.85rem;
color: var(--text-secondary);
margin-top: 0.5rem;
}
.text-secondary { color: var(--text-secondary) !important; }
/* ── Utilities ─────────────────────────────────────────────────
Conversion targets for the inline styles still scattered through the
templates. Each replaces a pattern that recurs dozens of times. */
/* Heading above a card/table section, one step below the page title. */
.section-heading {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-primary);
margin: 0;
display: flex;
align-items: center;
gap: .45rem;
letter-spacing: -.005em;
}
.section-heading i { font-size: .9em; color: var(--dark-green); }
/* Row holding a section heading and its actions. */
.section-bar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: .7rem;
gap: .75rem;
flex-wrap: wrap;
}
/* Small tracked caps — form group labels, stat captions, table eyebrows. */
.overline {
font-size: var(--text-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--text-secondary);
}
/* Muted supporting copy. */
.text-muted-sm { font-size: var(--text-xs); color: var(--text-secondary); }
/* Type scale escape hatches. */
.t-2xs { font-size: var(--text-2xs); }
.t-xs { font-size: var(--text-xs); }
.t-sm { font-size: var(--text-sm); }
.t-md { font-size: var(--text-md); }
.t-lg { font-size: var(--text-lg); }
.t-serif { font-family: var(--font-display); font-weight: 600; }
/* ════════════════════════════════════════════════════════════
3. TABLE COMPONENT
════════════════════════════════════════════════════════════ */
.table-container {
background: var(--surface);
border-radius: var(--radius-sm);
border: var(--rule);
box-shadow: none;
overflow: hidden;
margin-bottom: 1.25rem;
}
.data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
white-space: nowrap;
}
/* Header: a tinted band with tracked caps in brand green, rather than a
saturated gradient fill. Keeps the green identity but stops the header
from out-shouting the data it labels. */
.data-table thead tr {
background: var(--green-light);
}
.data-table thead th {
padding: .55rem 1.1rem;
text-align: left;
font-weight: 700;
color: var(--forest-green);
text-transform: uppercase;
letter-spacing: .09em;
font-size: var(--text-2xs);
border-bottom: 1px solid var(--border-color);
white-space: nowrap;
}
.data-table tbody tr {
border-bottom: var(--rule);
transition: background .15s;
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--green-light); }
.data-table tbody td {
padding: .5rem 1.1rem;
font-size: var(--text-sm);
color: var(--text-primary);
vertical-align: middle;
}
/* Figures align in columns so totals and times scan vertically. */
.data-table tbody td { font-variant-numeric: tabular-nums; }
/* Compact variant — opt-in, for dense working tables such as the PCM
checklists where a screenful of rows matters more than breathing room.
Scoped rather than applied to .data-table itself, which every table in
the app uses. Row height there is driven as much by the controls inside
the cells as by the padding, so both are tightened. */
.data-table--compact thead th { padding: .4rem .8rem; }
.data-table--compact tbody td { padding: .25rem .8rem; }
.data-table--compact tbody td .form-control {
padding: .3rem .55rem;
min-height: 0;
font-size: var(--text-sm);
}
.data-table--compact tbody td .pass-fail-btn { padding: .28rem .6rem; }
.data-table--compact tbody td .filter-select {
padding: .3rem 1.6rem .3rem .55rem;
min-height: 0;
}
/* Cell variants */
.form-name-cell { font-weight: 600; color: var(--forest-green); }
.description-cell { color: var(--text-secondary); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-cell { font-size: var(--text-xs); color: var(--text-secondary); }
.actions-cell { text-align: center; white-space: nowrap; }
.equipment-code { font-family: var(--font-sans); font-weight: 700; color: var(--forest-green); }
/* Responsive wrapper */
.table-scroll-wrapper { overflow-x: auto; }
/* ════════════════════════════════════════════════════════════
4. FORMS
════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: .9rem; }
/* Override Bootstrap form-control */
.form-control {
display: block;
width: 100%;
padding: 0.5rem 0.7rem;
font-size: var(--text-sm);
font-family: var(--font-body);
font-weight: 400;
color: var(--text-primary);
background: var(--off-white);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
outline: none;
transition: border-color .2s, box-shadow .2s, background .2s;
appearance: none;
-webkit-appearance: none;
line-height: 1.5;
}
.form-control:focus {
border-color: var(--primary-green);
background: var(--surface);
box-shadow: 0 0 0 3px var(--green-light);
/* Bootstrap's .form-control:focus also sets colour, from its own
--bs-body-color. Matching specificity means whichever loads last
wins, so state this explicitly rather than rely on load order.
-webkit-text-fill-color is what actually paints input glyphs in
WebKit and overrides `color` when both are set. */
color: var(--text-primary);
-webkit-text-fill-color: var(--text-primary);
}
/* Chrome paints autofilled fields with its own light background and ink,
and ignores `background`. The inset shadow is the only way to cover it;
text-fill-color is the only way to recolour the text. Without this an
autofilled login field renders as a pale block in a dark page. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: var(--text-primary);
-webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
box-shadow: 0 0 0 1000px var(--surface) inset;
caret-color: var(--text-primary);
transition: background-color 5000s ease-in-out 0s;
}
/* Placeholders are hints, not content, but they still have to be legible.
--n-400 clears 4.5:1 on every surface in both themes. */
.form-control::placeholder,
.search-input::placeholder,
textarea::placeholder { color: var(--n-400); opacity: 1; }
.form-control:disabled,
.form-control[readonly] {
opacity: .6;
cursor: not-allowed;
background: var(--border-color);
}
.form-control.is-error {
border-color: var(--danger);
background: var(--danger-soft);
}
textarea.form-control {
min-height: 120px;
resize: vertical;
}
/* Select */
select.form-control {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7c75' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
padding-right: 2.75rem;
cursor: pointer;
}
.filter-select {
padding: 0.65rem 2.25rem 0.65rem 1rem;
font-size: 0.875rem;
font-family: var(--font-sans);
font-weight: 500;
color: var(--text-primary);
background: var(--off-white);
border: 2px solid var(--border-color);
border-radius: 10px;
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7c75' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.875rem center;
transition: border-color .2s, box-shadow .2s;
}
.filter-select:focus {
border-color: var(--primary-green);
background-color: var(--surface);
box-shadow: 0 0 0 4px var(--green-light);
}
/* Search box */
.search-box {
position: relative;
display: inline-block;
}
.search-box .search-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
font-size: 0.95rem;
pointer-events: none;
}
.search-input {
padding: 0.75rem 1rem 0.75rem 2.75rem;
font-size: 0.9rem;
font-family: var(--font-sans);
color: var(--text-primary);
background: var(--off-white);
border: 2px solid var(--border-color);
border-radius: 12px;
outline: none;
transition: border-color .2s, box-shadow .2s;
width: 280px;
}
.search-input:focus {
border-color: var(--primary-green);
background: var(--surface);
box-shadow: 0 0 0 4px var(--green-light);
}
/* File upload */
.file-upload-container {
border: 2px dashed var(--border-color);
background: var(--off-white);
border-radius: 16px;
text-align: center;
padding: 2.5rem;
cursor: pointer;
transition: all .2s;
}
.file-upload-container:hover,
.file-upload-container.dragover {
border-color: var(--primary-green);
background: var(--green-light);
}
.file-upload-container.has-file {
border-style: solid;
background: var(--surface);
}
.file-upload-icon {
font-size: 2.5rem;
color: var(--text-secondary);
margin-bottom: 0.75rem;
}
.file-preview { display: none; margin-top: 1rem; }
.file-preview.active { display: block; }
.file-preview-card {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--surface);
border: 1px solid var(--border-color);
border-radius: 8px;
font-size: 0.875rem;
}
/* ════════════════════════════════════════════════════════════
5. BUTTONS
════════════════════════════════════════════════════════════ */
/* Base button reset */
.btn-primary,
.btn-secondary,
.btn-edit,
.btn-danger,
.btn-report,
.btn-icon {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-body);
font-weight: 600;
cursor: pointer;
border: none;
transition: background .18s, border-color .18s, color .18s;
text-decoration: none;
white-space: nowrap;
letter-spacing: .005em;
}
/* Primary — flat brand green. The gradient and lift-on-hover read as
consumer-app; a solid fill is quieter and more institutional. */
.btn-primary {
background: var(--btn-primary-bg);
color: var(--btn-primary-fg);
box-shadow: none;
border: 1px solid var(--btn-primary-bg);
border-radius: var(--radius-sm);
}
.btn-primary:hover {
background: var(--btn-primary-bg-hover);
border-color: var(--btn-primary-bg-hover);
color: var(--btn-primary-fg);
}
/* Secondary */
.btn-secondary {
background: var(--surface);
color: var(--text-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
.btn-secondary:hover {
background: var(--off-white);
border-color: var(--text-secondary);
color: var(--text-primary);
}
/* Edit */
.btn-edit {
background: var(--green-light);
color: var(--accent-on-soft);
border: 1px solid var(--primary-green);
border-radius: var(--radius-sm);
}
.btn-edit:hover {
background: var(--primary-green);
color: white;
}
/* Danger */
.btn-danger {
background: var(--chip-red-bg);
color: var(--chip-red-fg);
border: 1px solid var(--danger);
border-radius: var(--radius-sm);
}
.btn-danger:hover {
background: var(--danger);
color: white;
}
/* View — the neutral read-only counterpart to .btn-edit. Deliberately
quieter than Edit: opening a record is the safe, common action and
should not compete with the one that changes it. Was used in eight
places with no rule at all, so it rendered as bare text. */
.btn-view {
background: var(--surface);
color: var(--text-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
.btn-view:hover {
background: var(--green-light);
border-color: var(--primary-green);
color: var(--accent-on-soft);
}
/* Success */
.btn-success {
background: var(--success-soft);
color: var(--success);
border: 1px solid var(--success);
border-radius: var(--radius-sm);
}
.btn-success:hover {
background: var(--success);
color: white;
}
/* Warning */
.btn-warning {
background: var(--warning-soft);
color: var(--warning);
border: 1px solid var(--warning);
border-radius: var(--radius-sm);
}
.btn-warning:hover {
background: var(--warning);
color: white;
}
/* Report */
.btn-report {
background: var(--surface);
color: var(--danger);
border: 1px solid var(--danger);
border-radius: var(--radius-sm);
}
.btn-report:hover {
background: var(--chip-red-bg);
}
/* Icon button */
.btn-icon {
width: 42px;
height: 42px;
border-radius: 10px;
background: var(--off-white);
border: none;
justify-content: center;
font-size: 1.1rem;
color: var(--text-secondary);
position: relative;
flex-shrink: 0;
}
.btn-icon:hover {
background: var(--green-light);
color: var(--primary-green);
}
/* Sizes */
.btn--xs {
padding: 0.2rem 0.5rem;
border-radius: var(--radius-sm);
font-size: var(--text-2xs);
}
.btn--sm {
padding: 0.32rem 0.7rem;
border-radius: var(--radius-sm);
font-size: var(--text-xs);
}
.btn--md {
padding: 0.5rem 1.1rem;
border-radius: var(--radius-sm);
font-size: var(--text-sm);
}
.btn--lg {
padding: 0.62rem 1.35rem;
border-radius: var(--radius-sm);
font-size: var(--text-sm);
}
/* ── Toggle switch ───────────────────────────────────────── */
.toggle-switch {
position: relative;
display: inline-block;
width: 42px;
height: 24px;
flex-shrink: 0;
cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
position: absolute;
inset: 0;
background: var(--n-300);
border-radius: 24px;
transition: background .2s;
}
.toggle-slider::before {
content: '';
position: absolute;
width: 18px;
height: 18px;
left: 3px;
top: 3px;
background: var(--surface);
border-radius: 50%;
transition: transform .2s;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--forest-green, #2d6a4f); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
/* ════════════════════════════════════════════════════════════
6. MODAL
════════════════════════════════════════════════════════════ */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.55);
backdrop-filter: blur(4px);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 1rem;
}
.modal-overlay.active { display: flex; }
.modal-box {
background: var(--surface);
border-radius: 18px;
width: 90%;
max-width: 520px;
box-shadow: 0 24px 64px rgba(0,0,0,.25);
overflow: hidden;
animation: modalIn .3s cubic-bezier(.34,1.56,.64,1);
max-height: 90vh;
display: flex;
flex-direction: column;
}
.modal-head {
padding: 1.5rem 2rem;
border-bottom: 2px solid var(--border-color);
background: var(--off-white);
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.modal-head-left {
display: flex;
align-items: center;
gap: 0.875rem;
}
.modal-icon {
width: 38px; height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
font-size: 1rem;
flex-shrink: 0;
}
.modal-icon.danger {
background: linear-gradient(135deg, #ef5350, #c62828);
}
.modal-close-btn {
width: 34px; height: 34px;
border-radius: 8px;
background: none;
border: none;
font-size: 1.4rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
transition: all .2s;
line-height: 1;
flex-shrink: 0;
}
.modal-close-btn:hover {
background: var(--chip-red-bg);
color: var(--danger);
}
.modal-body {
padding: 2rem;
overflow-y: auto;
flex: 1;
}
.modal-foot {
padding: 1.25rem 2rem;
border-top: 2px solid var(--border-color);
background: var(--off-white);
display: flex;
justify-content: flex-end;
gap: 0.75rem;
flex-shrink: 0;
}
@media (max-width: 767.98px) {
.modal-foot {
flex-direction: column;
padding: 1rem 1.25rem;
}
.modal-foot .btn-primary,
.modal-foot .btn-secondary,
.modal-foot .btn-danger {
width: 100%;
justify-content: center;
}
}
/* ════════════════════════════════════════════════════════════
7. ALERTS & TOASTS
════════════════════════════════════════════════════════════ */
.alert {
padding: 1rem 1.25rem;
border-radius: 12px;
margin-bottom: 1.5rem;
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.9rem;
font-weight: 500;
}
.alert-info { background: var(--green-light); color: var(--accent-on-soft); border: 1px solid rgba(0,184,148,.2); }
.alert-success { background: var(--chip-green-bg); color: var(--chip-green-fg); border: 1px solid var(--chip-green-br); }
.alert-warning { background: var(--chip-amber-bg); color: var(--chip-amber-fg); border: 1px solid var(--chip-amber-br); }
.alert-error { background: var(--chip-red-bg); color: var(--chip-red-fg); border: 1px solid var(--chip-red-br); }
/* Toast */
.toast-item {
padding: 1rem 1.5rem;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,.15);
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 600;
font-size: 0.9rem;
min-width: 280px;
animation: fadeInRight .3s ease;
}
.toast-success { background: linear-gradient(135deg, #00b894, #00896c); color: white; }
.toast-error { background: linear-gradient(135deg, #ef5350, #c62828); color: white; }
.toast-hide {
animation: fadeIn .3s ease reverse forwards;
}
/* Download progress overlay */
.dl-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .5);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn .2s ease;
}
.dl-overlay-box {
background: var(--card-bg, #fff);
border-radius: 16px;
padding: 2rem 2.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
min-width: 220px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
animation: fadeInScale .2s ease;
}
.dl-overlay-label {
margin: 0;
font-weight: 600;
font-size: .95rem;
color: var(--text-primary, #111827);
}
/* ════════════════════════════════════════════════════════════
8. NAVIGATION — TOPBAR
════════════════════════════════════════════════════════════ */
.topbar {
background: var(--surface);
border-bottom: var(--rule);
border-radius: 0;
padding: 0.6rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 999;
gap: 1rem;
box-shadow: none;
/* The accent stripe: green on personal pages, blue on office/role ones. */
border-top: 3px solid var(--ws-accent);
transition: border-color .2s ease;
}
.topbar-left {
display: flex;
align-items: center;
gap: 1rem;
min-width: 0;
}
.topbar-right {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
.topbar-search {
position: relative;
display: flex;
align-items: center;
}
/* On desktop this minimises the sidebar to an icon rail; below 768px, where
the sidebar is an off-canvas drawer, it opens the drawer instead. One
button, one meaning: it controls the sidebar. */
.menu-toggle {
display: flex;
align-items: center;
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-primary);
cursor: pointer;
flex-shrink: 0;
}
/* ── Topbar: greeting ────────────────────────────────────────────── */
.topbar-greeting { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.topbar-greeting-line {
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar-greeting-sub {
font-size: var(--text-2xs);
color: var(--text-secondary);
letter-spacing: .03em;
white-space: nowrap;
}
/* ── Topbar: clock ───────────────────────────────────────────────── */
.topbar-clock {
flex-direction: column;
align-items: flex-end;
line-height: 1.2;
user-select: none;
}
.topbar-clock-time {
font-size: var(--text-md);
font-weight: 700;
color: var(--text-primary);
/* fixed-width figures: proportional digits make the clock jitter */
font-variant-numeric: tabular-nums;
letter-spacing: .01em;
}
.topbar-clock-date {
font-size: var(--text-2xs);
color: var(--text-secondary);
letter-spacing: .04em;
text-transform: uppercase;
}
.topbar-divider {
width: 1px;
height: 26px;
background: var(--border-color);
flex-shrink: 0;
}
/* ── Topbar: mode switch Personal | Office ─────────────────────────
The biggest control in the top bar, on purpose: it says which hat the
user has on. Each segment carries its OWN colour whatever page is open
-- Personal is always green, Office always blue -- so the two can be
told apart before either is clicked:
current solid fill in its colour, white label, lifted
other its colour as a pale tint and coloured label, flat
Two lines per segment: the mode, and what it holds ("My records",
"HRMO + 3 areas"). */
.tb-modes {
display: inline-flex;
gap: .3rem;
padding: .25rem;
border-radius: 14px;
background: var(--n-100);
border: 1px solid var(--border-color);
flex-shrink: 0;
}
.tb-mode {
/* Each segment's own colours, set once per mode below. */
--m: var(--accent-personal-strong);
--m-soft: var(--accent-personal-soft);
--m-ink: #ffffff;
position: relative;
display: inline-flex;
align-items: center;
gap: .6rem;
min-width: 10.5rem;
padding: .4rem 1.05rem .4rem .45rem;
border-radius: 11px;
color: var(--m);
line-height: 1.15;
white-space: nowrap;
transition: background .18s, color .18s, box-shadow .18s, transform .18s;
}
.tb-mode--office {
--m: var(--accent-office-strong);
--m-soft: var(--accent-office-soft);
}
/* Icon in a disc, so the colour reads even at a glance. */
.tb-mode-icon {
width: 2.1rem; height: 2.1rem;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: var(--m-soft);
color: var(--m);
font-size: 1.1rem;
transition: background .18s, color .18s;
}
.tb-mode-text { display: flex; flex-direction: column; min-width: 0; }
.tb-mode-label {
font-size: var(--text-md);
font-weight: 700;
letter-spacing: .01em;
}
.tb-mode-sub {
font-size: var(--text-2xs);
font-weight: 600;
opacity: .8;
overflow: hidden;
text-overflow: ellipsis;
max-width: 11rem;
}
/* The other mode: tinted, clearly a place you could go. */
.tb-mode:not(.is-current):hover {
background: var(--m-soft);
color: var(--m);
}
.tb-mode:not(.is-current):hover .tb-mode-icon { background: var(--m); color: var(--m-ink); }
/* The current mode: a solid block of its colour. */
.tb-mode.is-current {
background: var(--m);
color: var(--m-ink);
box-shadow: 0 2px 8px color-mix(in srgb, var(--m) 35%, transparent);
}
.tb-mode.is-current .tb-mode-icon {
background: rgba(255, 255, 255, .18);
color: var(--m-ink);
}
.tb-mode.is-current .tb-mode-sub { opacity: .85; }
.tb-mode:focus-visible { outline: 2px solid var(--m); outline-offset: 2px; }
/* Dark: the mode colours are light, so the current label goes dark. */
:root[data-theme="dark"] .tb-mode { --m-ink: #08121b; }
:root[data-theme="dark"] .tb-mode.is-current .tb-mode-icon { background: rgba(8, 18, 27, .14); }
.tb-mode-dot {
position: absolute;
top: .35rem; left: 2.05rem;
width: .55rem; height: .55rem;
border-radius: 50%;
background: var(--danger);
box-shadow: 0 0 0 2px var(--surface);
}
.tb-mode-dot[hidden] { display: none; }
/* The switch keeps its size as the bar narrows; everything else gives way
around it, in order: search collapses to an icon, then the clock and the
profile name go, then the switch's second line and the Inbox label. */
@media (min-width: 768px) and (max-width: 1439.98px) {
.topbar .tb-search { width: 36px; padding: 0; justify-content: center; }
.topbar .tb-search-text, .topbar .tb-search-kbd { display: none; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.topbar .topbar-clock, .topbar .topbar-divider { display: none !important; }
.topbar .user-profile-text, .topbar .user-profile-caret { display: none !important; }
}
@media (min-width: 768px) and (max-width: 999.98px) {
.tb-mode { min-width: 0; padding-right: .8rem; }
.tb-mode-sub { display: none; }
.topbar .tb-inbox-text { display: none; }
.topbar .tb-inbox { padding: 0 .7rem; }
}
/* ── Topbar: "Go to…" search button ──────────────────────────────── */
.tb-search {
display: inline-flex;
align-items: center;
gap: .5rem;
width: clamp(220px, 24vw, 340px);
height: 36px;
padding: 0 .5rem 0 .85rem;
border: 1px solid var(--border-color);
border-radius: 999px;
background: var(--off-white);
color: var(--text-secondary);
font-family: var(--font-body);
font-size: var(--text-sm);
cursor: pointer;
transition: border-color .15s, color .15s;
}
.tb-search:hover { border-color: var(--ws-accent); color: var(--text-primary); }
.tb-search-text { flex: 1; text-align: left; }
.tb-search-kbd {
font-family: var(--font-body);
font-size: var(--text-2xs);
font-weight: 700;
padding: .05rem .4rem;
border-radius: 6px;
background: var(--surface);
border: 1px solid var(--border-color);
color: var(--text-secondary);
}
/* ── Topbar: inbox ───────────────────────────────────────────────── */
.tb-inbox {
display: inline-flex;
align-items: center;
gap: .45rem;
height: 36px;
padding: 0 .85rem;
border: 1px solid var(--border-color);
border-radius: 999px;
background: var(--surface);
color: var(--text-primary);
font-size: var(--text-sm);
font-weight: 600;
transition: border-color .15s, color .15s;
}
.tb-inbox i { color: var(--ws-accent-strong); }
.tb-inbox:hover { border-color: var(--ws-accent); color: var(--ws-accent-strong); }
.tb-inbox-badge {
min-width: 1.25rem;
padding: 0 .35rem;
border-radius: 99px;
background: var(--danger);
color: #fff;
font-size: .68rem;
font-weight: 700;
line-height: 1.55;
text-align: center;
}
.tb-inbox-badge[hidden] { display: none; }
/* ── Profile menu: roles held ────────────────────────────────────── */
.tb-menu-roles { padding: .35rem .85rem .5rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.tb-menu-roles-title {
width: 100%;
font-size: var(--text-2xs);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: .1rem;
}
.tb-role-chip {
font-size: var(--text-2xs);
font-weight: 600;
padding: .1rem .5rem;
border-radius: 999px;
background: var(--green-light);
color: var(--forest-green);
}
/* ── Ctrl+K palette ──────────────────────────────────────────────── */
.cmdk-overlay {
position: fixed;
inset: 0;
z-index: 10050;
background: rgba(0,0,0,.45);
display: flex;
justify-content: center;
align-items: flex-start;
padding: 12vh 16px 16px;
animation: fadeIn .12s ease;
}
.cmdk-overlay[hidden] { display: none; }
.cmdk-box {
width: min(560px, 100%);
max-height: 70vh;
display: flex;
flex-direction: column;
background: var(--surface);
border: var(--rule);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.cmdk-head {
display: flex;
align-items: center;
gap: .65rem;
padding: .8rem 1rem;
border-bottom: var(--rule);
color: var(--text-secondary);
}
.cmdk-input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: none;
color: var(--text-primary);
font-family: var(--font-body);
font-size: var(--text-md);
}
.cmdk-overlay kbd {
font-family: var(--font-body);
font-size: var(--text-2xs);
font-weight: 700;
padding: .05rem .35rem;
margin-right: .15rem;
border-radius: 5px;
border: 1px solid var(--border-color);
background: var(--off-white);
color: var(--text-secondary);
}
.cmdk-list { list-style: none; margin: 0; padding: .4rem; overflow-y: auto; }
.cmdk-item {
display: flex;
align-items: center;
gap: .7rem;
padding: .55rem .7rem;
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--text-primary);
font-size: var(--text-sm);
}
.cmdk-item i { color: var(--n-400); width: 1.2rem; flex-shrink: 0; }
.cmdk-item.is-sel { background: var(--ws-accent-soft); color: var(--ws-accent-strong); }
.cmdk-item.is-sel i { color: var(--ws-accent-strong); }
.cmdk-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cmdk-ws { font-size: var(--text-2xs); color: var(--text-secondary); white-space: nowrap; }
.cmdk-empty { padding: 1.5rem; text-align: center; color: var(--text-secondary); font-size: var(--text-sm); }
.cmdk-empty[hidden] { display: none; }
.cmdk-foot {
display: flex;
gap: 1rem;
padding: .5rem 1rem;
border-top: var(--rule);
font-size: var(--text-2xs);
color: var(--text-secondary);
}
/* ── Mobile bottom tab bar ───────────────────────────────────────── */
.mtabbar { display: none; }
@media (max-width: 767.98px) {
.mtabbar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 998; /* under the drawer (1000) and its overlay */
display: flex;
background: var(--surface);
border-top: var(--rule);
padding-bottom: env(safe-area-inset-bottom);
}
.mtab {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: .1rem;
padding: .45rem 0 .4rem;
background: none;
border: none;
color: var(--text-secondary);
font-family: var(--font-body);
font-size: .72rem;
font-weight: 600;
}
.mtab i { font-size: 1.25rem; line-height: 1; }
.mtab.is-current { color: var(--forest-green); }
.mtab-badge {
position: absolute;
top: .2rem;
left: calc(50% + .4rem);
min-width: 1rem;
padding: 0 .25rem;
border-radius: 99px;
background: var(--danger);
color: #fff;
font-size: .6rem;
font-weight: 700;
line-height: 1.5;
text-align: center;
}
.mtab-badge[hidden] { display: none; }
/* Room for the bar under the page, and the Rate button lifted above it. */
body.has-mtabbar .main-content { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
body.has-mtabbar #ratingFab { bottom: 76px !important; }
/* Phone topbar: the breadcrumb keeps only the section, the search
button only its icon. */
/* Phone: icon discs only, still filled/tinted in each mode's colour. */
.tb-mode { min-width: 0; padding: .3rem; gap: 0; }
.tb-mode-text { display: none; }
.tb-mode-icon { width: 2rem; height: 2rem; }
.tb-mode-dot { left: auto; right: .15rem; top: .15rem; }
.tb-search { width: 36px; padding: 0; justify-content: center; }
.tb-search-text, .tb-search-kbd { display: none; }
.tb-inbox { padding: 0 .7rem; }
.tb-inbox-text { display: none; }
}
/* ── Topbar: icon button ─────────────────────────────────────────── */
.tb-icon-btn {
width: 34px; height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--border-color);
background: var(--surface);
color: var(--text-secondary);
cursor: pointer;
font-size: var(--text-md);
transition: background .15s, color .15s, border-color .15s;
flex-shrink: 0;
}
.tb-icon-btn:hover {
background: var(--green-light);
color: var(--dark-green);
border-color: var(--primary-green);
}
/* ── Topbar: dropdown ────────────────────────────────────────────── */
.tb-menu-wrap { position: relative; }
.tb-menu {
display: none;
position: absolute;
right: 0;
top: calc(100% + .5rem);
min-width: 180px;
background: var(--surface);
border: var(--rule);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
padding: .3rem;
z-index: 1200;
animation: fadeInScale .13s ease;
}
.tb-menu.show { display: block; }
.tb-menu--wide { min-width: 232px; }
.tb-menu-item {
width: 100%;
display: flex;
align-items: center;
gap: .55rem;
padding: .45rem .6rem;
border: none;
background: none;
border-radius: 6px;
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--text-primary);
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background .12s, color .12s;
}
.tb-menu-item:hover { background: var(--n-50); }
.tb-menu-item i:first-child { color: var(--text-secondary); width: 1.1rem; flex-shrink: 0; }
.tb-menu-item:hover i:first-child { color: var(--dark-green); }
.tb-menu-item.is-active { color: var(--forest-green); font-weight: 600; }
.tb-menu-item.is-active i:first-child { color: var(--forest-green); }
.tb-menu-check { margin-left: auto; opacity: 0; color: var(--forest-green); }
.tb-menu-item.is-active .tb-menu-check { opacity: 1; }
.tb-menu-item--danger { color: var(--danger); }
.tb-menu-item--danger i:first-child { color: var(--danger); }
.tb-menu-item--danger:hover { background: var(--danger-soft); }
.tb-menu-item--danger:hover i:first-child { color: var(--danger); }
.tb-menu-sep { height: 1px; background: var(--border-color); margin: .3rem .2rem; }
.tb-menu-head {
display: flex;
align-items: center;
gap: .6rem;
padding: .6rem;
margin-bottom: .2rem;
border-bottom: var(--rule);
}
.tb-menu-name {
font-size: var(--text-sm); font-weight: 600; color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-menu-role { font-size: var(--text-2xs); color: var(--forest-green); font-weight: 600; }
.tb-menu-email {
font-size: var(--text-2xs); color: var(--text-secondary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ── Topbar: profile button ──────────────────────────────────────── */
.user-profile {
display: flex;
align-items: center;
gap: .55rem;
padding: .28rem .6rem .28rem .3rem;
background: var(--surface);
border: 1px solid var(--border-color);
border-radius: 50px;
cursor: pointer;
transition: background .15s, border-color .15s;
font-family: var(--font-body);
}
.user-profile:hover {
background: var(--green-light);
border-color: var(--primary-green);
}
.user-profile-text { min-width: 0; text-align: left; }
.user-profile-caret {
font-size: .7rem;
color: var(--text-secondary);
transition: transform .15s;
}
.user-profile[aria-expanded="true"] .user-profile-caret { transform: rotate(180deg); }
.user-avatar {
width: 30px; height: 30px;
border-radius: 50%;
/* White initials on the old --primary-green stop measured 3.47:1 in
light and 2.43:1 in dark, where that token lightens further. Like the
hero, this is a brand disc rather than an accent on a surface, so it
takes the fixed seal greens and reads the same in both themes. */
background: linear-gradient(135deg, var(--hero-ground), var(--hero-ground-deep));
color: #fff;
font-weight: 700;
font-size: var(--text-2xs);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
letter-spacing: .02em;
flex-shrink: 0;
}
.user-avatar--lg { width: 38px; height: 38px; font-size: var(--text-xs); }
.user-name {
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
line-height: 1.25;
}
.user-role {
font-size: var(--text-2xs);
color: var(--text-secondary);
white-space: nowrap;
line-height: 1.25;
}
.notification-badge {
position: absolute;
top: -4px; right: -4px;
width: 20px; height: 20px;
background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
border-radius: 50%;
border: 2px solid white;
font-size: .7rem;
color: white;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* ════════════════════════════════════════════════════════════
9. CARDS
════════════════════════════════════════════════════════════ */
.card-custom {
background: var(--surface);
border-radius: var(--radius-sm);
border: var(--rule);
box-shadow: none;
transition: border-color .2s;
}
.card-custom:hover {
border-color: var(--primary-green);
}
/* Form card */
.form-card {
background: var(--surface);
border-radius: var(--radius-sm);
border: var(--rule);
box-shadow: none;
overflow: hidden;
margin-bottom: 1.25rem;
}
.form-card-header {
padding: 1.35rem 1.75rem;
border-bottom: var(--rule);
}
.form-card-header.gradient {
background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
color: white;
}
.form-card-header.gradient .form-card-title,
.form-card-header.gradient .form-card-description {
color: white;
}
.form-card-body { padding: 1.75rem; }
.form-card-footer {
padding: 1.35rem 1.75rem;
border-top: var(--rule);
background: var(--off-white);
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
/* Stat card */
.stat-card {
background: var(--surface);
border-radius: var(--radius-sm);
border: var(--rule);
padding: .9rem 1.15rem;
display: flex;
align-items: center;
gap: .85rem;
box-shadow: none;
position: relative;
overflow: hidden;
transition: border-color .2s;
}
.stat-card:hover { border-color: var(--primary-green); }
.stat-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
}
.stat-card.total::before { background: linear-gradient(to bottom, var(--primary-green), var(--dark-green)); }
.stat-card.available::before { background: linear-gradient(to bottom, var(--primary-green), var(--dark-green)); }
.stat-card.warning::before { background: linear-gradient(to bottom, #f59e0b, #d97706); }
.stat-card.danger::before { background: linear-gradient(to bottom, #ef5350, #c62828); }
.stat-icon {
width: 44px; height: 44px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1.2rem;
}
/* These four chips were literal pale washes, so they stayed bright while
the card around them went dark. The semantic tokens already carry the
right value for each theme — in dark the soft fills are translucent
overlays rather than washes. */
.stat-card.total .stat-icon { background: var(--green-light); color: var(--accent-on-soft); }
.stat-card.available .stat-icon { background: var(--green-light); color: var(--accent-on-soft); }
.stat-card.warning .stat-icon { background: var(--warning-soft); color: var(--warning-strong); }
.stat-card.danger .stat-icon { background: var(--danger-soft); color: var(--danger-strong); }
.stat-info { flex: 1; min-width: 0; }
.stat-label {
font-size: var(--text-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--text-secondary);
display: block;
margin-bottom: 0.2rem;
}
/* ════════════════════════════════════════════════════════════
10. BADGES
════════════════════════════════════════════════════════════ */
.status-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.375rem 0.875rem;
border-radius: 7px;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .03em;
white-space: nowrap;
}
.status-badge.available { background: var(--chip-green-bg); color: var(--chip-green-fg); }
.status-badge.deployed { background: var(--chip-amber-bg); color: var(--chip-amber-fg); }
.status-badge.maintenance { background: var(--chip-violet-bg); color: var(--chip-violet-fg); }
.status-badge.condemned { background: var(--chip-red-bg); color: var(--chip-red-fg); }
.status-badge.pending { background: var(--chip-yellow-bg); color: var(--chip-yellow-fg); }
.status-badge.approved { background: var(--chip-green-bg); color: var(--chip-green-fg); }
.status-badge.rejected { background: var(--chip-red-bg); color: var(--chip-red-fg); }
.status-badge.for-review { background: var(--chip-sky-bg); color: var(--chip-sky-fg); }
.status-badge.for-supervisor-approval { background: var(--chip-yellow-bg); color: var(--chip-yellow-fg); }
.status-badge.for-recommending-approval { background: var(--chip-yellow-bg); color: var(--chip-yellow-fg); }
.status-badge.for-vp-approval { background: var(--chip-grape-bg); color: var(--chip-grape-fg); }
.status-badge.for-final-approval { background: var(--chip-grape-bg); color: var(--chip-grape-fg); }
.status-badge.for-suc-approval { background: var(--chip-indigo-bg); color: var(--chip-indigo-fg); }
.status-badge.in-transit { background: var(--chip-amber-bg); color: var(--chip-amber-fg); }
.status-badge.servicing { background: var(--chip-violet-bg); color: var(--chip-violet-fg); }
.status-badge.returned { background: var(--chip-green-bg); color: var(--chip-green-fg); }
.status-badge.on-travel { background: var(--chip-amber-bg); color: var(--chip-amber-fg); }
.status-badge.on-leave { background: var(--chip-violet-bg); color: var(--chip-violet-fg); }
/* Payroll and Production. A payroll month and a deduction run each move
through their own states, and reusing 'approved' for a posted run would
have made the markup lie about what it was showing. */
.status-badge.draft { background: var(--chip-yellow-bg); color: var(--chip-yellow-fg); }
.status-badge.finalized { background: var(--chip-sky-bg); color: var(--chip-sky-fg); }
.status-badge.released { background: var(--chip-green-bg); color: var(--chip-green-fg); }
.status-badge.open { background: var(--chip-yellow-bg); color: var(--chip-yellow-fg); }
.status-badge.posted { background: var(--chip-green-bg); color: var(--chip-green-fg); }
.status-badge.active { background: var(--chip-green-bg); color: var(--chip-green-fg); }
.status-badge.stopped { background: var(--chip-red-bg); color: var(--chip-red-fg); }
.status-badge.retired { background: var(--chip-red-bg); color: var(--chip-red-fg); }
.status-badge.held { background: var(--chip-violet-bg); color: var(--chip-violet-fg); }
.status-badge.complete { background: var(--chip-sky-bg); color: var(--chip-sky-fg); }
/* Neutral: switched off, expired, or simply a different kind. */
.status-badge.inactive { background: var(--n-100); color: var(--n-700); }
.type-badge {
display: inline-block;
padding: 0.3rem 0.75rem;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
background: var(--green-light);
color: var(--accent-on-soft);
border: 1px solid color-mix(in srgb, var(--primary-green) 28%, transparent);
}
/* ════════════════════════════════════════════════════════════
11. LOADING STATES
════════════════════════════════════════════════════════════ */
.loading-container {
text-align: center;
padding: 4rem 2rem;
}
.loading-spinner {
width: 60px; height: 60px;
border: 4px solid var(--border-color);
border-top-color: var(--primary-green);
border-radius: 50%;
animation: spin .8s linear infinite;
margin: 0 auto 1rem;
}
.loading-text {
color: var(--text-secondary);
font-weight: 500;
}
/* ════════════════════════════════════════════════════════════
12. PAGINATION
════════════════════════════════════════════════════════════ */
.pagination-container {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--surface);
border-radius: var(--radius-sm);
padding: .75rem 1.1rem;
box-shadow: none;
border: var(--rule);
gap: 1rem;
flex-wrap: wrap;
}
.pagination-info {
font-size: 0.9rem;
color: var(--text-secondary);
font-weight: 500;
}
.pagination-info strong {
color: var(--text-primary);
font-weight: 600;
}
.pagination-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.page-numbers {
display: flex;
gap: 0.375rem;
}
.pagination-btn {
padding: 0.5rem 1rem;
border: 2px solid var(--border-color);
border-radius: 8px;
background: var(--surface);
color: var(--text-secondary);
font-weight: 600;
font-size: 0.875rem;
font-family: var(--font-sans);
display: flex;
align-items: center;
gap: 0.375rem;
cursor: pointer;
transition: all .2s;
}
.pagination-btn:hover:not(:disabled) {
background: var(--primary-green);
color: white;
border-color: var(--primary-green);
}
.pagination-btn:disabled {
opacity: .4;
cursor: not-allowed;
}
.page-number {
width: 36px; height: 36px;
border: 2px solid var(--border-color);
border-radius: 8px;
background: var(--surface);
font-weight: 600;
font-size: 0.875rem;
font-family: var(--font-sans);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .2s;
}
.page-number:hover { background: var(--border-color); }
.page-number.active { background: var(--primary-green); color: white; border-color: var(--primary-green); }
/* ════════════════════════════════════════════════════════════
13. BREADCRUMB
════════════════════════════════════════════════════════════ */
/* Doubles as the page eyebrow — small tracked caps sitting above the title,
so the breadcrumb locates the page without competing with it. */
.breadcrumb-nav {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.45rem;
font-family: var(--font-body);
font-size: var(--text-2xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
flex-wrap: wrap;
}
.breadcrumb-nav a { color: var(--text-secondary); transition: color .15s; }
.breadcrumb-nav a:hover { color: var(--dark-green); }
.breadcrumb-nav .separator { color: var(--separator); font-weight: 400; }
.breadcrumb-nav .current { color: var(--text-secondary); font-weight: 700; }
/* ════════════════════════════════════════════════════════════
14. EMPTY STATE
════════════════════════════════════════════════════════════ */
.empty-state {
text-align: center;
padding: 2.5rem 1.5rem;
background: var(--surface);
border-radius: var(--radius-sm);
border: var(--rule);
}
/* Empty state sitting inside a .table-container, which already draws the
border — replaces the repeated inline
"border-radius:0;border:none;box-shadow:none". */
.empty-state--flush {
border: none;
border-radius: 0;
box-shadow: none;
}
.empty-icon {
width: 100px; height: 100px;
border-radius: 50%;
background: var(--light-gray);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2.5rem;
color: var(--text-secondary);
}
.empty-title {
font-family: var(--font-sans);
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.empty-text {
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
/* ════════════════════════════════════════════════════════════
15. FILTER BAR
════════════════════════════════════════════════════════════ */
.filter-bar {
background: var(--surface);
border-radius: var(--radius-sm);
border: var(--rule);
padding: .8rem 1.1rem;
display: flex;
align-items: center;
gap: .85rem;
margin-bottom: 1.25rem;
box-shadow: none;
flex-wrap: wrap;
}
.filter-bar-left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; flex: 1; }
.filter-bar-right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
/* ════════════════════════════════════════════════════════════
16. ERROR PAGES
════════════════════════════════════════════════════════════ */
.error-page-body {
min-height: 100vh;
background: linear-gradient(135deg, var(--forest-green), var(--dark-green));
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
font-family: var(--font-sans);
}
.error-container {
background: var(--surface);
border-radius: 20px;
padding: 3rem;
max-width: 600px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,.2);
position: relative;
z-index: 1;
}
.error-icon {
width: 120px; height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-green), var(--dark-green));
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 3rem;
color: white;
animation: pulse 2s ease-in-out infinite;
}
.error-code {
font-family: var(--font-sans);
font-size: 5rem;
font-weight: 800;
color: var(--forest-green);
line-height: 1;
margin-bottom: 0.5rem;
}
.error-title {
font-family: var(--font-sans);
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.75rem;
}
.error-message {
color: var(--text-secondary);
font-size: 1.05rem;
margin-bottom: 2rem;
}
.error-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.error-help {
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--text-secondary);
}
/* ════════════════════════════════════════════════════════════
17. LOGIN PAGE
════════════════════════════════════════════════════════════ */
/* Mobile-first base (≤479px) */
.auth-page-body {
min-height: 100vh;
background-color: var(--dark-green);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1.25rem;
font-family: var(--font-sans);
}
.auth-card {
background: var(--surface);
border-radius: 14px;
width: 100%;
max-width: 440px;
box-shadow: 0 16px 48px rgba(0,0,0,.25);
overflow: hidden;
animation: fadeInScale .5s ease;
}
.auth-card-header {
padding: 1.75rem 1.5rem 1.4rem;
background: linear-gradient(135deg, rgba(0,184,148,.55), rgba(0,90,70,.55));
backdrop-filter: blur(2px);
text-align: center;
color: white;
}
.auth-logo {
width: 56px; height: 56px;
border-radius: 10px;
object-fit: contain;
display: block;
margin: 0 auto .75rem;
background: rgba(255,255,255,.15);
padding: 5px;
}
.auth-card-title {
font-family: var(--font-sans);
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 0.2rem;
}
.auth-card-subtitle {
font-size: 0.82rem;
opacity: .85;
}
.auth-card-body { padding: 1.25rem; }
/* Tablet and up (≥480px) */
@media (min-width: 480px) {
.auth-page-body { padding: 1.5rem; }
.auth-card { border-radius: 20px; box-shadow: 0 24px 64px rgba(0,0,0,.2); }
.auth-card-header { padding: 2.5rem 2.5rem 2rem; }
.auth-logo { width: 72px; height: 72px; border-radius: 12px; margin-bottom: 1rem; padding: 6px; }
.auth-card-title { font-size: 1.5rem; margin-bottom: .25rem; }
.auth-card-subtitle { font-size: 0.9rem; }
.auth-card-body { padding: 2.5rem; }
}
.auth-error {
display: none;
padding: 0.875rem 1.25rem;
background: var(--chip-red-bg); color: var(--chip-red-fg);
border: 1px solid var(--chip-red-br);
border-radius: 10px;
margin-bottom: 1.25rem;
font-size: 0.875rem;
font-weight: 500;
}
.auth-error.visible { display: flex; align-items: center; gap: 0.5rem; }
/* ════════════════════════════════════════════════════════════
18. MAINTENANCE PAGE
════════════════════════════════════════════════════════════ */
.maintenance-page { min-height: 100vh; background: var(--off-white); display: flex; align-items: center; justify-content: center; padding: 2rem; }
/* ════════════════════════════════════════════════════════════
19. DASHBOARD
════════════════════════════════════════════════════════════ */
.stats-row {
display: grid;
gap: 1rem;
margin-bottom: 2rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* ════════════════════════════════════════════════════════════
19b. APP FOOTER
════════════════════════════════════════════════════════════ */
.app-footer {
background: var(--surface);
border-top: none;
box-shadow: 0 -1px 0 var(--border-color), 0 -4px 16px rgba(0, 104, 82, 0.05);
padding: 20px 24px;
margin-top: auto;
}
.footer-inner {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.footer-brand {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.footer-logo {
width: 32px;
height: 32px;
object-fit: contain;
border-radius: 6px;
opacity: 0.85;
}
.footer-brand-name {
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 700;
color: var(--forest-green);
line-height: 1.2;
}
.footer-brand-sub {
font-size: 0.7rem;
color: var(--text-secondary);
font-weight: 500;
}
.footer-meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
flex-shrink: 0;
text-align: right;
}
.footer-office {
font-size: 0.75rem;
font-weight: 600;
color: var(--forest-green);
display: flex;
align-items: center;
gap: 0.3rem;
}
.footer-copy {
font-size: 0.7rem;
color: var(--text-secondary);
}
/* ════════════════════════════════════════════════════════════
21. ePDS FACSIMILE — CS Form No. 212 (Revised 2026)
════════════════════════════════════════════════════════════
The editor is a replica of the printed form: you fill in the document
itself rather than a web form that happens to collect the same fields.
The layout is deliberately the same structure as templates/employees/
pds_pdf.html, which is the faithful print replica. Where that template
writes {{ value }}, this one puts an input in
the same cell. Building it that way is what keeps the screen and the
printout from drifting apart -- they are one layout expressed twice.
Print is 6.8pt on A4. On screen the same grid is scaled to a readable size
and the sheet is capped near A4 proportion so it still reads as a document.
──────────────────────────────────────────────────────────── */
/* ── ePDS page navigation ──────────────────────────────────────────────
The PDS is four physical pages and the editor follows them, so navigation
is: which page am I on, and how do I get to the next one.
The tab strip carried three lines per tab — a page number, a long name, and
a list of the sections inside it — and the buttons beneath each page named
their destination a second time. Between them they restated on screen what
the grey section bars already say inside the document. One line per tab
now, and the buttons below only move.
These rules also went missing when the two editors were merged: they lived
in a