/* ==========================================================================
Trident Care Staff Portal — stylesheet
Brand variables aligned to public site (index.html lines 15-35)
========================================================================== */
:root {
/* Brand palette — matches public site */
--navy: #0f1e33;
--navy-light: #1a2e4a;
--teal: #2a7d8c;
--teal-dark: #1f5d68;
--teal-light: #3a9aad;
--gold: #c8a96e;
--gold-soft: rgba(200, 169, 110, 0.15);
--gold-deep: #8b6914; /* deep gold for warning chips, expiring pills, "remind me later" */
/* Surfaces */
--bg: #f7f8fa;
--card: #ffffff;
--ink: #1a2e4a;
--muted: #6b7280;
--border: #e5e7eb;
/* Status */
--danger: #c44536;
--success: #2a7d8c;
/* Typography — matches public site */
--font-display: 'Outfit', sans-serif;
--font-body: 'DM Sans', sans-serif;
/* Elevation — three standard shadow levels. Anything else is a one-off. */
--shadow-sm: 0 1px 2px rgba(15, 30, 51, 0.06);
--shadow-md: 0 2px 6px rgba(15, 30, 51, 0.10);
--shadow-lg: 0 6px 16px rgba(15, 30, 51, 0.16);
/* Corner radii — four standard sizes covering 95% of surfaces. */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 999px;
/* Motion — three standard transition speeds. */
--transition-fast: 150ms ease;
--transition-normal: 220ms ease;
--transition-slow: 320ms ease;
/* Z-index scale — see comment block immediately below. */
--z-base: 1;
--z-fixed-ui: 80;
--z-fab: 90;
--z-bell: 95;
--z-modal: 1000;
--z-modal-child: 1100;
--z-confirm: 1200;
}
/* ==========================================================================
Z-INDEX SCALE — single source of truth for stacking order.
Use the tokens above instead of literal numbers when adding new rules.
--z-base 1 normal flow content
--z-fixed-ui 80 mobile topbar
--z-fab 90 ShiftCare FAB (bottom-left external link)
--z-bell 95 notifications bell (top-right of every screen)
--z-modal 1000 overlays / generic modals / userdetail modal
--z-modal-child 1100 sf-form modal, sd-ack-sign modal (over wizard)
--z-confirm 1200 confirm/alert dialogs (above EVERYTHING)
Anything above 1200 is a bug — fix the architecture, don't bump the number.
========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-body);
background: var(--bg);
color: var(--ink);
font-size: 14px;
line-height: 1.5;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
.display { font-family: var(--font-display); letter-spacing: -0.01em; font-weight: 600; }
/* Focus styles for accessibility — visible keyboard-focus ring on every
interactive element. Uses :where() to keep specificity at (0,0,0) so
component-specific rules don't need !important to win; the only place
this is overridden is where the focus is visually replaced by something
clearer (e.g. an input border-color change). */
:where(*):focus-visible {
outline: 2px solid var(--teal);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Screen routing */
.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }
/* ============ LOGIN SCREEN ============ */
#login {
display: none;
align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
min-height: 100vh; padding: 40px 20px;
}
#login.active { display: flex; }
.login-card {
background: var(--card);
border-radius: var(--radius-md); padding: 48px 40px;
width: 100%; max-width: 420px;
box-shadow: var(--shadow-lg);
}
.login-logo { text-align: center; margin-bottom: 32px; }
.login-logo .mark {
width: 96px; height: 96px;
background: var(--navy);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 18px; border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 12px;
}
.login-logo .mark img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
.login-logo h1 {
font-family: var(--font-display); font-weight: 700;
font-size: 22px; color: var(--navy); letter-spacing: 0.05em;
}
.login-logo p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.field { margin-bottom: 18px; }
.field label {
display: block; font-size: 12px; font-weight: 600;
color: var(--navy); margin-bottom: 6px;
text-transform: uppercase; letter-spacing: 0.05em;
}
.field input,
.field textarea,
.field select {
width: 100%; padding: 10px 12px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: 14px;
background: #fff; color: var(--ink);
transition: border-color var(--transition-fast);
-webkit-appearance: none; appearance: none;
}
/* Checkboxes + radios should render with native browser UI — without this
reset they inherit the text-input styling above (padding, border-radius,
appearance:none) and silently render as blank squares that never show a
tick, so the user thinks the control is broken. */
.field input[type="checkbox"],
.field input[type="radio"] {
width: auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
-webkit-appearance: auto;
appearance: auto;
}
.field textarea { resize: vertical; min-height: 80px; line-height: 1.45; }
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-color: var(--teal); }
/* Password fields — relative wrapper hosts a Show/Hide peek button pinned
to the right edge of the input. Reserves enough right padding on the
input itself so the masked dots don't render behind the button. */
.password-field {
position: relative;
}
.password-field input {
padding-right: 68px;
}
.password-peek {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
background: transparent;
border: 0;
padding: 6px 10px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
color: var(--teal);
cursor: pointer;
border-radius: var(--radius-sm);
letter-spacing: 0.02em;
}
.password-peek:hover { background: rgba(19, 163, 163, 0.08); }
.password-peek:active { transform: translateY(calc(-50% + 1px)); }
.password-peek:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
/* Security guidance shown above the password inputs on the 3 creation
forms (activation, recovery, settings change). Tinted info row — same
visual weight as a soft notice, not a hard warning. */
.password-help {
background: #eef6f6;
border-left: 3px solid var(--teal);
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 12px;
line-height: 1.5;
color: var(--ink);
margin: 0 0 14px;
}
.password-help strong { color: var(--navy); }
/* iOS Safari renders empty as a flat grey block with no
visible inner text. Force the same look as a normal text input so DOB +
start-date fields don't look broken on phones. */
.field input[type="date"] { min-height: 42px; line-height: 1.2; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.field input[type="date"]::-webkit-datetime-edit-text,
.field input[type="date"]::-webkit-datetime-edit-day-field,
.field input[type="date"]::-webkit-datetime-edit-month-field,
.field input[type="date"]::-webkit-datetime-edit-year-field { color: var(--ink); }
.field input[type="date"]:not(:focus):not(:valid)::-webkit-datetime-edit { color: var(--muted); }
.btn {
background: var(--navy); color: #fff;
padding: 10px 20px; border: none; border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: 13px; font-weight: 600;
cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast);
text-transform: uppercase; letter-spacing: 0.05em;
}
.btn:hover { background: var(--navy-light); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--teal); }
.btn-primary:hover { background: var(--teal-dark); }
.btn-block { width: 100%; padding: 12px; }
.btn-ghost { background: transparent; color: var(--navy); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg); }
.btn-danger { background: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: 11px; }
.login-links {
text-align: center; margin-top: 16px;
font-size: 12px; color: var(--muted);
}
.login-links a { color: var(--teal); text-decoration: none; }
.login-links a:hover { text-decoration: underline; }
/* ============ APP SHELL ============ */
.app { display: flex; min-height: 100vh; }
.sidebar {
width: 240px; background: var(--navy); color: #fff;
flex-shrink: 0; padding: 24px 0;
display: flex; flex-direction: column;
}
.sidebar-brand {
padding: 0 24px 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 16px;
}
.sidebar-brand h2 {
font-family: var(--font-display); font-weight: 700;
font-size: 18px; letter-spacing: 0.05em;
color: var(--gold);
}
.sidebar-brand .role {
font-size: 11px; color: rgba(255, 255, 255, 0.6);
text-transform: uppercase; letter-spacing: 0.1em;
margin-top: 4px;
}
.nav-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 24px; cursor: pointer;
color: rgba(255, 255, 255, 0.8); font-size: 13px;
border-left: 3px solid transparent;
transition: all var(--transition-fast);
}
.nav-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.nav-item.active {
background: rgba(42, 125, 140, 0.18); color: #fff;
border-left-color: var(--teal);
}
.nav-section {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.4); padding: 16px 24px 8px;
font-weight: 600;
}
/* ShiftCare external link — slim row matching .nav-item proportions, with
a gold accent + redirect arrow so it reads as "an external destination"
rather than another in-app screen. The verbose label/desc divs from the
markup are hidden; only the name + arrow appear. */
.shiftcare-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 24px;
text-decoration: none;
color: var(--gold);
font-size: 13px;
font-weight: 600;
border-left: 3px solid transparent;
transition: background var(--transition-fast), border-color var(--transition-fast);
margin: 0;
}
.shiftcare-link:hover {
background: rgba(201, 165, 90, 0.08);
border-left-color: var(--gold);
}
.shiftcare-link .label,
.shiftcare-link .desc { display: none; }
.shiftcare-link .name {
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
color: var(--gold);
margin: 0;
flex: 1;
}
.shiftcare-link .arrow {
color: var(--gold);
font-size: 13px;
opacity: 0.9;
margin-left: auto;
}
/* Floating ShiftCare shortcut — pinned to the bottom-left of the viewport,
visible from every screen on desktop. Hidden on mobile because the sidebar
drawer already includes a ShiftCare card AND the bottom-nav would clash. */
.shiftcare-fab {
position: fixed;
left: 20px;
bottom: 20px;
z-index: var(--z-fab); /* ShiftCare FAB */
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px 10px 14px;
background: var(--navy);
color: #fff;
border: 1px solid rgba(201, 165, 90, 0.5);
border-left: 3px solid var(--gold);
border-radius: var(--radius-pill);
text-decoration: none;
font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
font-size: 13px;
font-weight: 600;
box-shadow: var(--shadow-md);
transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease, background var(--transition-fast) ease;
/* Safe-area for iPhone notches / home indicators if anyone uses it on mobile landscape */
margin-bottom: env(safe-area-inset-bottom, 0);
}
.shiftcare-fab:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
background: #102f59;
}
.shiftcare-fab-icon {
font-size: 16px;
color: var(--gold);
line-height: 1;
}
.shiftcare-fab-text {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.15;
}
.shiftcare-fab-name {
font-size: 13px;
color: #fff;
letter-spacing: 0.01em;
}
.shiftcare-fab-sub {
font-size: 10px;
color: var(--gold);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-top: 1px;
}
.shiftcare-fab-arrow {
font-size: 13px;
color: var(--gold);
opacity: 0.9;
margin-left: 2px;
}
/* Hide on phones — the sidebar drawer already has the ShiftCare card, and
a fixed-position FAB would collide with the bottom-nav. */
@media (max-width: 768px) {
.shiftcare-fab { display: none; }
}
/* Hidden during print + when the wizard takeover is open. */
@media print {
.shiftcare-fab { display: none; }
}
body.print-mode .shiftcare-fab,
body.sidebar-open .shiftcare-fab { display: none; }
/* =============================================================================
Notifications bell (Wave 9) — fixed-position top-right shortcut + dropdown.
Single element appended to body by portal/js/notifications.js. Hidden on
the login screen + while sign-in/recovery overlays are active.
============================================================================= */
.notif-bell-wrap {
position: fixed;
top: 14px;
right: 24px;
z-index: var(--z-bell); /* notifications bell — above FAB, below modals */
}
.notif-bell {
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
box-shadow: var(--shadow-sm);
transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease, border-color var(--transition-fast) ease;
}
.notif-bell:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
border-color: var(--teal);
}
.notif-bell-icon {
font-size: 18px;
line-height: 1;
}
.notif-bell-wrap.has-unread .notif-bell { border-color: var(--gold); }
.notif-bell-count {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--radius-md);
background: var(--danger, #c44536);
color: #fff;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.notif-dropdown {
position: absolute;
top: 48px;
right: 0;
width: 360px;
max-width: calc(100vw - 32px);
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.notif-dropdown-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: var(--bg-soft, #f7f9fc);
font-size: 13px;
color: var(--navy);
}
.notif-mark-all {
background: none;
border: 0;
color: var(--teal);
font-size: 12px;
cursor: pointer;
font-weight: 600;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-dropdown-list {
max-height: 60vh;
overflow-y: auto;
}
.notif-empty {
padding: 24px 16px;
text-align: center;
color: var(--muted);
font-size: 12px;
}
.notif-item {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
text-align: left;
padding: 12px 14px;
background: none;
border: 0;
border-bottom: 1px solid var(--border);
cursor: pointer;
position: relative;
font-family: inherit;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-soft, #f7f9fc); }
.notif-item-unread { background: rgba(201, 165, 90, 0.04); }
.notif-item-icon {
font-size: 18px;
line-height: 1.2;
flex-shrink: 0;
}
.notif-item-body {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.notif-item-title {
font-size: 13px;
font-weight: 600;
color: var(--navy);
line-height: 1.35;
word-break: break-word;
}
.notif-item-unread .notif-item-title { font-weight: 700; }
.notif-item-sub {
font-size: 12px;
color: var(--muted);
line-height: 1.4;
word-break: break-word;
}
.notif-item-time {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
}
.notif-item-dot {
position: absolute;
top: 16px;
right: 14px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
}
/* Hide on login / onboarding / recovery and during print, same pattern as
the ShiftCare FAB. */
body.is-login #notificationsBell,
body.print-mode #notificationsBell { display: none !important; }
@media print {
#notificationsBell { display: none !important; }
}
/* Mobile — the bell is hidden entirely. It used to sit fixed at top:10px
right:12px, which sat right on top of the mobile topbar's search icon
(.mobile-topbar-search lives at the right edge of the navy topbar).
Tapping the search button hit the bell instead.
The Inbox tab in the bottom nav already aggregates every actionable
item the bell deep-links to (contracts awaiting countersign, warnings,
announcement acks, agreement handovers, training due, doc acks), so
removing the bell on phones is a genuine simplification — the user
still gets to all the same actions via Inbox, just without the
duplicate trigger covering search. */
@media (max-width: 768px) {
.notif-bell-wrap { display: none !important; }
}
/* =============================================================================
Payroll tab (user-detail modal) — unredacted TFN / Super / Bank / Emergency
Contact values for the accountant. Admin/coord-gated via RLS.
============================================================================= */
.payroll-card {
margin-bottom: 14px;
padding: 14px 16px;
border: 1px solid var(--border);
border-left: 3px solid var(--navy);
border-radius: var(--radius-md);
background: #fff;
}
.payroll-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.payroll-card-title {
font-family: var(--font-display, sans-serif);
font-weight: 700;
font-size: 14px;
color: var(--navy);
}
.payroll-card-meta {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
}
.payroll-group {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gold);
margin: 10px 0 4px;
}
.payroll-group:first-child { margin-top: 0; }
.payroll-fields {
display: grid;
grid-template-columns: 160px 1fr;
gap: 4px 14px;
margin: 0 0 10px;
font-size: 13px;
color: var(--ink);
}
.payroll-fields dt {
color: var(--muted);
font-size: 12px;
font-weight: 500;
padding: 3px 0;
word-break: break-word;
}
.payroll-fields dd {
margin: 0;
padding: 3px 0;
word-break: break-word;
}
.payroll-fields dd code {
font-size: 13px;
color: var(--navy);
background: var(--bg-soft, #f5f7fa);
padding: 2px 6px;
border-radius: var(--radius-sm);
letter-spacing: 0.05em;
}
@media (max-width: 600px) {
.payroll-fields { grid-template-columns: 1fr; gap: 2px 0; }
.payroll-fields dt { padding-bottom: 0; }
.payroll-fields dd { padding-top: 0; margin-bottom: 4px; }
.payroll-card-header { flex-direction: column; }
}
.main {
flex: 1; padding: 32px 40px;
overflow-y: auto;
}
.page-header {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 28px;
border-bottom: 1px solid var(--border);
padding-bottom: 16px;
}
.page-header h1 {
font-family: var(--font-display); font-weight: 700;
font-size: 28px; color: var(--navy);
letter-spacing: -0.01em;
}
.page-header p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.user-chip {
display: flex; align-items: center; gap: 10px;
padding: 6px 12px; background: var(--card);
border: 1px solid var(--border); border-radius: 24px;
font-size: 12px;
}
.avatar {
width: 28px; height: 28px; border-radius: 50%;
background: var(--teal); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 11px;
}
/* ============ DASHBOARD CARDS ============ */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px;
}
.card-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 16px;
}
.card-title {
font-family: var(--font-display); font-weight: 600;
font-size: 15px; color: var(--navy);
letter-spacing: 0.01em;
}
.card-link {
font-size: 11px; color: var(--teal); text-decoration: none;
text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;
}
/* Flex column with vertical centering — keeps the big number anchored at
the same y across all three stat cards regardless of whether a label
wraps to two lines (e.g. "Acknowledgements Due" at small viewports).
min-height stops the cards collapsing to different heights when their
labels differ. */
.stat-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px 16px;
min-height: 130px;
}
/* Clickable variant — used on dashboard stat cards that route to their
section. Inherits .stat-card layout; adds affordance + hover/active
feedback so it doesn't read as a static read-only tile. */
.stat-card-clickable {
cursor: pointer;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.stat-card-clickable:hover {
border-color: var(--teal);
box-shadow: 0 2px 8px rgba(11, 37, 69, 0.06);
}
.stat-card-clickable:active { transform: translateY(1px); }
.stat-card-clickable:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 2px;
}
.stat-card-arrow {
display: inline-block;
margin-left: 4px;
color: var(--teal);
opacity: 0;
transform: translateX(-2px);
transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.stat-card-clickable:hover .stat-card-arrow,
.stat-card-clickable:focus-visible .stat-card-arrow {
opacity: 1;
transform: translateX(0);
}
.stat-value {
font-family: var(--font-display); font-weight: 700;
font-size: 36px; color: var(--navy);
line-height: 1;
margin: 0;
}
.stat-label {
font-size: 11px; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.1em;
margin: 10px 0 0;
/* Reserve space for a 2-line label so the value above sits at the same
y across all three cards. */
min-height: 2.6em;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.3;
}
/* ShiftCare callout card */
.shiftcare-card {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
color: #fff; padding: 24px;
border-radius: var(--radius-md);
display: flex; align-items: center; gap: 20px;
cursor: pointer;
transition: transform var(--transition-fast);
}
.shiftcare-card:hover { transform: translateY(-2px); }
.shiftcare-card .sc-icon {
width: 56px; height: 56px;
background: var(--teal); border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 28px; flex-shrink: 0;
}
.shiftcare-card .sc-content { flex: 1; }
.shiftcare-card h3 {
font-family: var(--font-display); font-weight: 700;
font-size: 18px; color: var(--gold);
margin-bottom: 4px;
}
.shiftcare-card p { font-size: 12px; opacity: 0.85; }
.shiftcare-card .sc-arrow {
font-size: 24px; color: var(--teal);
}
/* WorkZone payslip link — inline call-to-action inside the My Pay card.
Mirrors the ShiftCare FAB's navy/gold pill treatment so the two external
destinations read as a matched pair, but sits inline in the card flow
rather than floating. Opens WorkZone's login in a new tab. */
.workzone-link {
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 14px;
padding: 11px 18px 11px 14px;
background: var(--navy);
color: #fff;
border: 1px solid rgba(201, 165, 90, 0.5);
border-left: 3px solid var(--gold);
border-radius: var(--radius-pill);
text-decoration: none;
font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
font-weight: 600;
transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease, background var(--transition-fast) ease;
}
.workzone-link:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
background: #102f59;
}
.workzone-link-text {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.15;
}
.workzone-link-name {
font-size: 13px;
color: #fff;
letter-spacing: 0.01em;
}
.workzone-link-sub {
font-size: 10px;
color: var(--gold);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-top: 1px;
}
.workzone-link-arrow {
color: var(--gold);
opacity: 0.9;
margin-left: 2px;
flex-shrink: 0;
}
/* Intro line above the WorkZone link in the always-visible "Your payslips"
card on My Profile. */
.profile-payslips-intro {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
margin: 0;
}
/* Announcements */
.announcement {
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.announcement:last-child { border-bottom: none; }
.announcement-meta {
display: flex; gap: 8px; align-items: center;
font-size: 11px; color: var(--muted);
margin-bottom: 4px;
}
.badge {
padding: 2px 8px; border-radius: var(--radius-lg);
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
}
.badge-urgent { background: #fce8e6; color: var(--danger); }
.badge-info { background: #e3f2f1; color: var(--teal-dark); }
.badge-policy { background: var(--gold-soft); color: var(--gold-deep); }
.announcement h4 { font-size: 14px; color: var(--ink); margin-bottom: 4px; font-family: var(--font-display); font-weight: 600; }
.announcement p { font-size: 12px; color: var(--muted); }
/* Quick links */
.quicklinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.quicklink {
padding: 16px; text-align: center;
background: var(--bg); border-radius: var(--radius-sm);
cursor: pointer; transition: all var(--transition-fast);
text-decoration: none; color: var(--ink);
border: 1px solid transparent;
}
.quicklink:hover { background: var(--card); border-color: var(--teal); transform: translateY(-2px); }
.quicklink .icon { font-size: 24px; margin-bottom: 8px; }
.quicklink .label { font-size: 12px; font-weight: 600; }
/* Document library */
.doc-toolbar {
display: flex; gap: 12px; margin-bottom: 20px;
align-items: center; flex-wrap: wrap;
}
.doc-toolbar input {
flex: 1; min-width: 240px; padding: 8px 12px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: 13px;
}
.filter-pill {
padding: 6px 12px; background: var(--card);
border: 1px solid var(--border); border-radius: 16px;
font-size: 12px; cursor: pointer;
}
.filter-pill.active { background: var(--navy); color: #fff; border-color: var(--navy); }
table {
width: 100%; border-collapse: collapse;
background: var(--card); border-radius: var(--radius-md); overflow: hidden;
border: 1px solid var(--border);
}
th {
text-align: left; padding: 12px 16px;
background: var(--navy); color: #fff;
font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
font-weight: 600;
}
td { padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13px; }
tr:hover { background: var(--bg); }
.doc-name { font-weight: 600; color: var(--navy); }
.doc-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
/* Admin panel */
.role-tag {
display: inline-block;
padding: 2px 10px; border-radius: var(--radius-lg);
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
}
.role-developer { background: var(--gold); color: var(--navy); }
.role-admin { background: var(--navy); color: var(--gold); }
.role-coordinator { background: var(--teal); color: #fff; }
.role-staff { background: var(--border); color: var(--ink); }
/* -------------------------------------------------------------------------
* Roles & permissions reference (User Management screen)
* ----------------------------------------------------------------------- */
.permissions-reference > summary::-webkit-details-marker { display: none; }
.permissions-reference > summary { list-style: none; padding: 4px 0; }
.permissions-reference > summary::before {
content: '▸';
color: var(--teal);
font-size: 13px;
margin-right: 8px;
display: inline-block;
transition: transform var(--transition-fast);
}
.permissions-reference[open] > summary::before { transform: rotate(90deg); }
.perm-table-wrap { overflow-x: auto; }
.perm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.perm-table th, .perm-table td {
padding: 6px 10px;
text-align: left;
border-bottom: 1px solid var(--border);
}
.perm-table thead th { background: var(--bg); font-weight: 600; color: var(--navy); }
.perm-table .perm-col { text-align: center; width: 90px; white-space: nowrap; }
.perm-table tbody td.perm-col,
.perm-table tbody tr td:nth-child(n+2) { text-align: center; color: var(--ink); }
.perm-table tbody tr td:nth-child(n+2):not(.perm-section) { width: 90px; }
.perm-table .perm-section td {
background: var(--bg);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
color: var(--muted);
padding: 8px 10px;
}
@media (max-width: 768px) {
.perm-table th, .perm-table td { padding: 4px 6px; font-size: 11px; }
.perm-table .perm-col { width: 56px; }
.perm-table .role-tag { font-size: 9px; padding: 2px 4px; }
}
.status-dot {
display: inline-block; width: 8px; height: 8px;
border-radius: 50%; margin-right: 6px;
}
.dot-active { background: var(--success); }
.dot-inactive { background: var(--muted); }
.modal-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.5);
align-items: center; justify-content: center;
z-index: 100; padding: 20px;
overflow-y: auto; /* let the OVERLAY scroll if a modal is taller than the viewport,
so the close button at the top stays reachable */
}
.modal-overlay.active { display: flex; }
.modal {
background: var(--card); border-radius: var(--radius-md);
width: 100%; max-width: 480px; padding: 28px;
box-shadow: var(--shadow-lg);
max-height: calc(100dvh - 40px); /* dvh = dynamic viewport, ignores browser chrome */
overflow-y: auto; /* internal scroll for tall content */
margin: auto; /* keeps centring inside the scrollable overlay */
}
/* Modal size classes — Pass 5 of the UI polish wave. Three standard widths
replace the dozen-plus inline max-width values previously used. Each
class targets a content density:
.modal-sm small forms, confirm-style dialogs, single-field prompts
.modal-md most flows (add user, send-contract config, ack signature)
.modal-lg bulk invite, contract templates browser, larger settings
Review modals (.ct-review-modal, .wn-review-modal, .rv-review-modal,
.pd-library-modal) keep their own dedicated sizing rules. Placed AFTER
the base .modal rule so source-order specificity wins without !important. */
.modal.modal-sm { max-width: 560px; }
.modal.modal-md { max-width: 640px; }
.modal.modal-lg { max-width: 720px; }
/* The User Management user-detail modal carries a multi-tab strip + data-dense
panels (Payroll, Documents). On desktop give it a wider, viewport-responsive
frame so the tab bar has room and the tables aren't cramped — min() keeps it
from overflowing on smaller laptops/tablets. The ID selector outranks
.modal-md, and mobile keeps the base full-width + horizontal-scroll tabs. */
@media (min-width: 769px) {
#userDetailModal > .modal {
max-width: min(980px, 94vw);
}
}
/* Loading + empty states — Pass 6 utility classes. Module-scoped variants
like .sd-loading, .notif-empty stay where they already exist; new sites
should use these. Both render centered, muted text inside whatever
container they're dropped into (a table cell, a card body, a div).
.state-loading "Loading…" while a fetch is in flight
.state-empty "Nothing here yet" + optional CTA
Use the -compact modifier when the container is tight (e.g. dropdown). */
.state-loading,
.state-empty {
text-align: center;
color: var(--muted);
padding: 24px 16px;
font-size: 13px;
line-height: 1.5;
}
.state-loading-compact,
.state-empty-compact {
text-align: center;
color: var(--muted);
padding: 12px 8px;
font-size: 12px;
}
.state-empty-title {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--ink);
margin-bottom: 4px;
}
.state-empty-cta {
display: inline-block;
margin-top: 8px;
color: var(--teal);
text-decoration: none;
font-weight: 600;
font-size: 13px;
}
.state-empty-cta:hover { text-decoration: underline; }
.modal h3 {
font-family: var(--font-display); font-weight: 700;
font-size: 20px; color: var(--navy);
margin-bottom: 16px;
}
.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.modal-header h2 {
font-family: var(--font-display); font-weight: 700;
font-size: 20px; color: var(--navy);
letter-spacing: -0.01em;
margin: 0;
flex: 1;
min-width: 0;
}
.modal-close {
background: transparent;
border: none;
color: var(--muted);
font-size: 26px;
line-height: 1;
cursor: pointer;
width: 32px; height: 32px;
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.modal-close:hover { background: var(--bg); color: var(--navy); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
/* Document table row title cell — tappable to open the detail modal */
td[data-action="open-doc-detail"] { cursor: pointer; transition: background var(--transition-fast); }
td[data-action="open-doc-detail"]:hover { background: var(--bg); }
/* Training screen status sections (Due / Available / Completed) */
.training-section { margin-bottom: 24px; }
.training-section-header {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.training-section-header h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
color: var(--navy);
margin: 0;
letter-spacing: -0.01em;
}
.training-section-count {
font-size: 11px;
color: var(--muted);
font-weight: 400;
}
.training-section-body { display: grid; gap: 12px; }
select {
width: 100%; padding: 10px 12px;
border: 1px solid var(--border); border-radius: var(--radius-sm);
font-family: var(--font-body); font-size: 14px;
background: #fff;
}
.audit-row {
display: grid; grid-template-columns: 80px 1fr 140px;
gap: 16px; padding: 10px 0;
border-bottom: 1px solid var(--border); font-size: 12px;
}
.audit-row.audit-row-4col {
grid-template-columns: 170px 90px 1fr 200px;
}
.audit-row:last-child { border-bottom: none; }
.audit-time { color: var(--muted); font-family: monospace; }
.audit-action { color: var(--ink); }
.audit-user { color: var(--teal-dark); text-align: right; }
/* Notice banner */
.notice {
background: var(--gold-soft); border-left: 4px solid var(--gold);
padding: 12px 16px; border-radius: var(--radius-sm);
font-size: 13px; margin-bottom: 20px;
}
.notice strong { color: var(--navy); }
/* Training cards */
.training-card {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 20px;
display: flex; gap: 16px; align-items: center;
}
.training-thumb {
width: 80px; height: 80px; flex-shrink: 0;
background: var(--navy); color: var(--gold);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 32px;
}
.training-info { flex: 1; }
.training-info h4 { font-size: 14px; color: var(--navy); margin-bottom: 4px; font-family: var(--font-display); font-weight: 600; }
.training-info p { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.progress-bar {
height: 6px; background: var(--border); border-radius: var(--radius-sm);
overflow: hidden; margin-top: 6px;
}
.progress-fill { height: 100%; background: var(--teal); }
/* Directory */
.person-card {
background: var(--card); border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 16px;
display: flex; gap: 12px; align-items: center;
}
.person-avatar {
width: 48px; height: 48px; border-radius: 50%;
background: var(--navy); color: var(--gold);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 16px;
font-family: var(--font-display);
}
.person-info { flex: 1; }
.person-name { font-weight: 600; color: var(--navy); font-size: 14px; }
.person-role { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.person-contact { font-size: 11px; color: var(--teal-dark); }
/* ============ NEWS CARDS ============ */
.news-card {
display: flex;
gap: 16px;
padding: 14px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: 12px;
}
.news-card .news-image {
flex-shrink: 0;
width: 140px; height: 90px;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--bg);
display: block;
}
.news-card .news-image img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.news-card .news-body { flex: 1; min-width: 0; }
.news-card .news-meta {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 6px;
}
.news-card .news-title {
font-family: var(--font-display);
font-weight: 600;
font-size: 15px;
margin: 0 0 6px;
line-height: 1.3;
}
.news-card .news-title a {
color: var(--navy);
text-decoration: none;
}
.news-card .news-title a:hover { color: var(--teal); }
.news-card .news-snippet {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
margin: 0;
}
@media (max-width: 600px) {
.news-card { flex-direction: column; }
.news-card .news-image { width: 100%; height: 160px; }
}
/* ============ RESOURCE CARDS ============ */
.resource-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
}
.resource-card {
display: flex;
gap: 12px;
padding: 14px 16px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
text-decoration: none;
color: var(--ink);
transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
align-items: center;
}
.resource-card:hover {
transform: translateY(-2px);
border-color: var(--teal);
box-shadow: var(--shadow-md);
}
.resource-card .resource-icon {
width: 38px; height: 38px;
background: var(--bg);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.resource-card .resource-title {
font-weight: 600;
color: var(--navy);
font-size: 13px;
font-family: var(--font-display);
}
.resource-card .resource-desc {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
line-height: 1.4;
}
.resource-card .resource-domain {
font-size: 10px;
color: var(--teal-dark);
margin-top: 4px;
font-family: monospace;
}
/* ============ ICON SYSTEM ============ */
.icon {
width: 16px; height: 16px;
display: inline-block;
vertical-align: -2px;
flex-shrink: 0;
color: currentColor;
}
.icon-lg { width: 20px; height: 20px; vertical-align: -3px; }
.icon-xl { width: 28px; height: 28px; vertical-align: -6px; }
.icon-sm { width: 14px; height: 14px; vertical-align: -2px; }
/* Sidebar nav icons — inline Lucide SVG rendered by sidebar.js (no emoji).
Single source of truth for nav icon sizing. */
.nav-item .icon { width: 16px; height: 16px; margin-right: 2px; }
/* ============ INBOX BADGE on sidebar ============ */
.inbox-badge {
display: inline-block;
margin-left: auto;
background: var(--gold);
color: var(--navy);
font-size: 10px;
font-weight: 700;
padding: 1px 7px;
border-radius: var(--radius-lg);
min-width: 18px;
text-align: center;
}
/* ============ DASHBOARD: 2-COLUMN WITH RIGHT RAIL ============ */
.dashboard-grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 24px;
align-items: start;
}
@media (max-width: 1024px) {
.dashboard-grid { grid-template-columns: 1fr; }
}
.right-rail { display: flex; flex-direction: column; gap: 16px; }
.right-rail .card { padding: 18px; }
.right-rail .card-title { font-size: 13px; }
/* Dashboard right-rail user chip — body routes to My Profile, ⚙ to Settings.
Subtle hover lift so the affordance reads as "click me". */
.user-chip-card { transition: box-shadow 0.15s ease; }
.user-chip-card:hover { box-shadow: var(--shadow-md); }
.user-chip-link:hover .avatar { box-shadow: 0 0 0 3px rgba(42, 125, 140, 0.15); }
.user-chip-link:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
/* ============ WELCOME / GREETING CARD ============ */
.welcome-card {
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 70%, var(--teal-dark) 100%);
color: #fff;
border-radius: var(--radius-md);
padding: 28px 32px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
.welcome-card::after {
content: '';
position: absolute;
right: -40px; top: -40px;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(200,169,110,0.15) 0%, transparent 70%);
pointer-events: none;
}
.welcome-card h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: 26px;
color: #fff;
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.welcome-card .subline {
color: rgba(255,255,255,0.65);
font-size: 13px;
margin-bottom: 16px;
}
.welcome-card .pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(200,169,110,0.4);
color: var(--gold);
font-size: 12px;
padding: 6px 12px;
border-radius: 20px;
margin-top: 4px;
font-weight: 500;
}
/* ============ DASHBOARD "HIDE REMINDERS" PILL ============
* Single-click control to collapse the dashboard banner stack (MFA nudge,
* overdue acks, expiring clearances, wizard resume, onboarding gaps,
* review nudge). 24h expiry stored per-user in localStorage.
*/
.banner-control-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: inherit;
font-size: 11px;
font-weight: 600;
color: var(--muted);
background: var(--card);
border: 1px solid var(--border);
border-radius: 999px;
padding: 4px 11px;
margin-bottom: 12px;
cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.banner-control-pill:hover {
color: var(--navy);
border-color: var(--navy);
background: var(--bg);
}
.banner-control-show {
color: var(--teal);
border-color: rgba(42, 125, 140, 0.3);
}
.banner-control-show:hover {
color: var(--teal);
border-color: var(--teal);
background: rgba(42, 125, 140, 0.08);
}
/* ============ ON-CALL CARD (Wave 11) ============
* Compact card painted by portal/js/on-call.js. Sits below the welcome
* hero and above the stats row. Primary + secondary contacts with tap-
* to-call phone links. Designed to be informative but not overwhelming
* — "not in your face" per the brief.
*/
.oncall-card {
padding: 14px 16px 12px;
border-left: 3px solid var(--teal);
margin-bottom: 20px;
background: var(--card);
}
.oncall-card.oncall-card-empty {
border-left-color: var(--muted);
color: var(--ink);
}
.oncall-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.oncall-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--teal);
margin-bottom: 1px;
}
.oncall-date {
font-size: 12px;
color: var(--muted);
}
.oncall-edit-link {
font-size: 12px;
color: var(--teal);
text-decoration: none;
font-weight: 600;
white-space: nowrap;
}
.oncall-edit-link:hover { text-decoration: underline; }
.oncall-row {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 0;
}
.oncall-row + .oncall-row {
border-top: 1px dashed var(--border);
}
.oncall-row-secondary {
opacity: 0.85;
}
.oncall-avatar {
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--navy);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
}
.oncall-row-secondary .oncall-avatar { width: 30px; height: 30px; font-size: 12px; }
.oncall-avatar-img { width: 100%; height: 100%; object-fit: cover; }
.oncall-meta {
flex: 1;
min-width: 0;
}
.oncall-role {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
}
.oncall-name {
font-size: 14px;
font-weight: 600;
color: var(--navy);
line-height: 1.3;
}
.oncall-row-secondary .oncall-name { font-size: 13px; }
.oncall-phone {
font-size: 15px;
font-weight: 700;
color: var(--teal);
text-decoration: none;
white-space: nowrap;
padding: 8px 12px;
border-radius: 6px;
border: 1px solid transparent;
min-width: 44px;
min-height: 32px;
display: inline-flex;
align-items: center;
}
.oncall-phone:hover { background: rgba(42, 125, 140, 0.08); border-color: rgba(42, 125, 140, 0.2); }
.oncall-phone:active { background: rgba(42, 125, 140, 0.16); }
/* Telephone glyph prefix on desktop only — on mobile the number is the tap
target and the emoji adds visual noise without earning its keep. */
@media (min-width: 769px) {
.oncall-phone::before {
content: '☎ ';
margin-right: 4px;
font-size: 14px;
}
}
.oncall-phone-missing {
font-size: 12px;
color: var(--muted);
font-style: italic;
padding: 6px 10px;
}
.oncall-row-secondary .oncall-phone { font-size: 13px; padding: 6px 10px; }
.oncall-notes {
font-size: 12px;
color: var(--muted);
font-style: italic;
margin-top: 8px;
padding-top: 6px;
border-top: 1px dashed var(--border);
}
.oncall-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--border);
}
.oncall-hours {
font-size: 11px;
color: var(--muted);
}
.oncall-manual-link {
font-size: 12px;
color: var(--teal);
text-decoration: none;
font-weight: 600;
}
.oncall-manual-link:hover { text-decoration: underline; }
.oncall-loading {
padding: 14px 16px;
font-size: 12px;
color: var(--muted);
text-align: center;
background: var(--card);
border-left: 3px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: 20px;
}
.oncall-empty {
font-size: 13px;
color: var(--muted);
margin: 6px 0 8px;
}
.oncall-empty a {
color: var(--teal);
text-decoration: none;
font-weight: 600;
}
/* Mobile: stack the phone under the name on narrow screens so the tap
* target is still big enough but doesn't get squished. */
@media (max-width: 480px) {
.oncall-row {
flex-wrap: wrap;
}
.oncall-phone {
margin-left: 48px;
font-size: 16px;
flex: 1 0 auto;
}
.oncall-row-secondary .oncall-phone { font-size: 14px; }
.oncall-footer { flex-direction: column; align-items: flex-start; }
}
/* ============ COLORED CATEGORY BUTTONS ============ */
.category-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.category-button {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 18px 22px;
border-radius: var(--radius-md);
cursor: pointer;
color: #fff;
text-decoration: none;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
overflow: hidden;
min-height: 76px;
}
.category-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.category-button .cat-icon {
font-size: 26px;
width: 44px; height: 44px;
background: rgba(255,255,255,0.15);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
/* Wrap the cat-label + cat-sub stack in a flex column with explicit vertical
centering so the text optically lines up with the icon's centre. */
.category-button .cat-text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.category-button .cat-label {
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.01em;
line-height: 1.25;
}
.category-button .cat-sub {
font-size: 11px;
opacity: 0.78;
margin-top: 2px;
line-height: 1.3;
}
.category-button.navy { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); }
.category-button.teal { background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%); }
.category-button.gold { background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 100%); }
.category-button .cat-arrow { margin-left: auto; font-size: 18px; opacity: 0.7; }
/* ============ SIDEBAR USER BLOCK ============ */
.sidebar-user {
margin: 12px 16px 20px;
padding: 14px 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: 12px;
}
.sidebar-user .avatar {
width: 36px; height: 36px;
background: var(--gold);
color: var(--navy);
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.sidebar-user .who { min-width: 0; flex: 1; }
.sidebar-user .name {
color: #fff;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-user .role-tag {
font-size: 10px;
color: var(--gold);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 2px;
}
/* ============ "COMING UP" LIST in right rail ============ */
.coming-up-item {
display: flex;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border);
font-size: 13px;
cursor: pointer;
}
.coming-up-item:last-child { border-bottom: none; }
.coming-up-item:hover { background: var(--bg); }
.coming-up-item .cu-icon {
width: 32px; height: 32px;
background: var(--bg);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.coming-up-item .cu-title { font-weight: 600; color: var(--navy); font-size: 12px; }
.coming-up-item .cu-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
/* ============ ONBOARDING OVERLAY (blocking, full-screen) ============ */
.onboarding-overlay {
display: none;
position: fixed; inset: 0; z-index: var(--z-modal);
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
align-items: center; justify-content: center;
padding: 24px; overflow-y: auto;
}
.onboarding-overlay.active { display: flex; }
.onboarding-card {
background: var(--card); border-radius: var(--radius-md);
padding: 40px 36px; width: 100%; max-width: 520px;
box-shadow: var(--shadow-lg);
}
.onboarding-card h1 {
font-family: var(--font-display); font-weight: 700;
font-size: 24px; color: var(--navy);
margin-bottom: 6px;
}
.onboarding-card .lede { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.onboarding-card .role-pill {
display: inline-block; background: var(--gold-soft);
color: var(--gold-deep); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
padding: 3px 10px; border-radius: var(--radius-lg); margin-left: 6px;
}
.onboarding-card .privacy {
background: var(--bg); border-left: 3px solid var(--teal);
padding: 12px 14px; border-radius: var(--radius-sm);
font-size: 12px; color: var(--ink);
margin: 16px 0;
}
.onboarding-card .err {
color: var(--danger); font-size: 12px; min-height: 16px; margin-top: 6px;
}
/* ============ SETTINGS MODAL TABS ============ */
.settings-section {
border-top: 1px solid var(--border);
padding-top: 16px; margin-top: 16px;
}
.settings-section:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.settings-section h4 {
font-family: var(--font-display); font-weight: 600;
font-size: 14px; color: var(--navy); margin-bottom: 12px;
}
.settings-readonly {
background: var(--bg); padding: 10px 12px; border-radius: var(--radius-sm);
font-size: 12px; color: var(--muted);
display: flex; gap: 16px; flex-wrap: wrap;
}
.settings-readonly span strong { color: var(--ink); }
.settings-msg {
font-size: 12px; min-height: 16px; margin-top: 6px;
}
/* -------------------------------------------------------------------------
* Mobile sidebar drawer (≤768px)
*
* Below the breakpoint the sidebar slides in/out from the left as a drawer.
* A hamburger button (injected by app.js) toggles it. Tap on a nav item or
* on the dark backdrop closes the drawer.
*
* Above 768px nothing changes — the sidebar is the normal docked column.
* ----------------------------------------------------------------------- */
.mobile-topbar { display: none; } /* hidden by default; the media query below shows it on phones */
.mobile-bottom-nav { display: none; } /* same — shown only inside the mobile media query */
@media (max-width: 768px) {
/* Pin the sidebar as an off-canvas drawer */
.sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 260px;
z-index: 110;
transform: translateX(-100%);
transition: transform var(--transition-normal) ease;
overflow-y: auto;
}
body.sidebar-open .sidebar { transform: translateX(0); }
/* Backdrop behind the open drawer */
body.sidebar-open::before {
content: '';
position: fixed; inset: 0;
background: rgba(11, 37, 69, 0.45);
z-index: 100;
}
/* Main content takes the full width since sidebar floats above it.
Top padding clears the topbar (56px) + iPhone notch / status bar.
Bottom padding clears the bottom-nav (60px + buffer) + home indicator. */
.app .main {
margin-left: 0 !important;
padding-top: calc(72px + env(safe-area-inset-top, 0));
padding-right: 16px;
padding-bottom: calc(80px + env(safe-area-inset-bottom, 0));
padding-left: 16px;
}
/* Mobile bottom navigation — fixed at viewport bottom, 5 equal tabs.
Tab tap calls showScreen(); active tab is highlighted gold. */
.mobile-bottom-nav {
display: flex;
position: fixed;
bottom: 0; left: 0; right: 0;
/* min-height (not height) — `box-sizing: border-box` is global, so a fixed
60px height + padding for the iPhone home-indicator inset would *eat into*
the icon area and crop the icons. min-height keeps the icon area at 60px
and the safe-area padding adds *below* it. */
min-height: calc(60px + env(safe-area-inset-bottom, 0));
background: var(--navy);
border-top: 1px solid rgba(255, 255, 255, 0.1);
z-index: 90;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.mb-tab {
flex: 1;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.6);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 8px 4px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
transition: color var(--transition-fast);
position: relative;
}
.mb-tab svg { opacity: 0.85; transition: opacity var(--transition-fast); }
.mb-tab:hover { color: rgba(255, 255, 255, 0.9); }
.mb-tab.active { color: var(--gold); }
.mb-tab.active svg { opacity: 1; }
.mb-tab.active::before {
content: '';
position: absolute;
top: 0; left: 25%; right: 25%;
height: 2px;
background: var(--gold);
border-radius: 0 0 2px 2px;
}
/* Inbox badge sitting on top-right of the inbox tab icon */
.mb-tab-icon-wrap { position: relative; display: inline-flex; }
.mb-tab-badge {
position: absolute;
top: -2px; right: -8px;
background: var(--danger);
color: #fff;
font-size: 9px;
font-weight: 700;
min-width: 16px; height: 16px;
border-radius: var(--radius-md);
padding: 0 4px;
display: flex; align-items: center; justify-content: center;
}
/* Hide bottom-nav on login / onboarding / recovery so users aren't
looking at portal chrome before they're authenticated. */
body:has(#login.screen.active) .mobile-bottom-nav,
body:has(.onboarding-overlay.active) .mobile-bottom-nav,
body:has(#recoveryOverlay.active) .mobile-bottom-nav,
body:has(#signAgreement.screen.active) .mobile-bottom-nav { display: none; }
/* Floating Action Button — bottom-right above the bottom-nav. Visibility
is JS-driven (only on screens with a primary "create" action and only
for users with permission). Same hide-on-login rules as bottom-nav. */
.mobile-fab {
position: fixed;
right: 16px;
bottom: calc(76px + env(safe-area-inset-bottom, 0));
width: 56px; height: 56px;
border-radius: 50%;
background: var(--teal);
color: #fff;
border: none;
box-shadow: 0 6px 20px rgba(19, 163, 163, 0.45);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
z-index: 88;
transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.mobile-fab:hover { background: var(--teal-dark); }
.mobile-fab:active { transform: scale(0.94); }
body:has(#login.screen.active) .mobile-fab,
body:has(.onboarding-overlay.active) .mobile-fab,
body:has(#recoveryOverlay.active) .mobile-fab,
body:has(#signAgreement.screen.active) .mobile-fab { display: none !important; }
}
/* Hide FAB on desktop entirely — primary action lives in the page header */
@media (min-width: 769px) {
.mobile-fab { display: none !important; }
}
@media (max-width: 768px) {
/* Top mobile bar: hamburger + portal title.
min-height (not height) keeps the icon strip at 56px regardless of how
much padding-top the iPhone notch / status bar adds. */
.mobile-topbar {
display: flex;
align-items: center;
gap: 12px;
position: fixed;
top: 0; left: 0; right: 0;
min-height: calc(56px + env(safe-area-inset-top, 0));
padding: env(safe-area-inset-top, 0) 12px 0;
background: var(--navy);
color: #fff;
z-index: var(--z-fixed-ui);
box-shadow: var(--shadow-md);
}
.mobile-topbar-toggle,
.mobile-topbar-search {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
width: 44px; height: 44px; /* WCAG 2.1 AA min tap target */
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.mobile-topbar-toggle:hover,
.mobile-topbar-search:hover { background: rgba(255, 255, 255, 0.08); }
.mobile-topbar-search { margin-left: auto; }
.mobile-topbar-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.08em;
color: var(--gold);
}
/* Disable body scroll when drawer is open */
body.sidebar-open { overflow: hidden; }
/* On mobile the floating search bar is gone — replaced by a search button
in the topbar that slides down a docked search panel below it. The
`top` value tracks the topbar's true bottom edge — including the iPhone
notch / status-bar inset that the topbar adds via padding-top. */
#globalSearchBar {
display: block; /* override desktop's display:none */
top: calc(56px + env(safe-area-inset-top, 0));
left: 0; right: 0;
width: 100%;
padding: 8px 12px;
background: var(--navy);
box-shadow: var(--shadow-lg);
transform: translateY(-110%);
transition: transform var(--transition-normal) ease;
pointer-events: none;
border-radius: 0;
z-index: 85;
}
body.search-open #globalSearchBar {
/* !important guards against the inline style="display:none" that the
bar carries until syncVisibility() in search.js runs. If something
races and the inline style is still present when search-open is
toggled, this rule forces it visible anyway. */
display: block !important;
transform: translateY(0);
pointer-events: auto;
}
/* Make the input fill the docked panel and look at-home on dark navy */
#globalSearchBar .global-search-wrap {
border-radius: var(--radius-md);
width: 100%;
padding: 8px 12px;
}
#globalSearchInput { width: 100%; min-width: 0; }
/* Tighter dashboard / cards / table layout */
.page-header h1 { font-size: 20px; }
.page-header p { font-size: 12px; }
.card { padding: 16px; }
.grid.grid-2,
.grid.grid-3,
.grid.grid-4 { grid-template-columns: 1fr; }
table { font-size: 12px; }
.doc-name { font-size: 13px; }
.doc-meta { font-size: 11px; }
/* Make modal dialogs use the full viewport on phones */
.modal { max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); margin: 12px; }
/* Bulk action toolbar drops to bottom-center, tap-friendly height */
.bulk-bar { bottom: 12px; padding: 12px 18px; }
/* Cards that contain a table get horizontal scroll on small screens so
wide tables (User Management, Audit Log) don't blow out the layout.
:has() works in all modern mobile browsers. */
.card:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { min-width: 460px; } /* keeps columns readable when scrolled */
/* Sticky section headers when scrolling Documents on mobile — the
category label (Policies / Procedures / etc.) sticks below the topbar
so the user always knows which section they're scrolling through. */
.doc-section-header,
.training-section-header {
position: sticky;
top: calc(56px + env(safe-area-inset-top, 0));
background: var(--card);
margin: 0 -16px 12px !important;
padding: 10px 16px;
z-index: 5;
border-bottom: 1px solid var(--border);
}
.doc-section-desc { display: none; }
/* Empty document categories are hidden on mobile to reduce noise — most
orgs only have docs in 1-2 of the 7 categories. Desktop still shows
all so coord+admin can see what categories exist when uploading. */
.doc-section-empty { display: none; }
/* Documents library: snap to viewport. The wide columns (version, updated,
ack, actions) are hidden — users tap the row title to open the detail
modal which shows acknowledgement status + every action button stacked.
Only the title cell remains. */
.docs-table { min-width: 0 !important; width: 100%; table-layout: fixed; }
.docs-table .col-version,
.docs-table .col-updated,
.docs-table .col-ack,
.docs-table .col-actions { display: none; }
.card:has(.docs-table) { overflow-x: visible; }
.docs-table td[data-action="open-doc-detail"] { width: 100%; padding-right: 8px; }
.docs-table .doc-name { word-break: break-word; }
/* User Management on mobile — drop the table semantics entirely and
render each row as a self-contained card. The previous approach
(table-layout: fixed with hidden columns + 70px status + 40px
actions) was fighting iOS Safari's column-width inference and
leaving large dead space between status and the ⋯ trigger. Card
layout has zero layout ambiguity and gives status + actions room
to sit cleanly on the right of each row. */
.users-table,
.users-table thead,
.users-table tbody,
.users-table tr,
.users-table td {
display: block;
width: auto;
}
.users-table { min-width: 0 !important; width: 100%; }
.users-table thead { display: none; }
.card:has(.users-table) { overflow-x: visible; }
/* Section header rows ("Pending invites · 1", "Active staff · 9")
remain full-width banners. They use td[colspan="6"] in markup;
in card mode that just becomes a block-level row, which is fine. */
.users-table .um-section-row { padding: 0; }
.users-table .um-section-row td { padding: 14px 12px 10px; }
/* Each user row becomes a flex card. */
.users-table tr:not(.um-section-row) {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border-top: 1px solid var(--border);
}
.users-table tr:not(.um-section-row):first-child { border-top: none; }
/* Hidden-on-mobile columns. We don't display:none the cell itself
because the click-to-open-detail handler reads data-action from
that td; instead we make it visually empty but keep it in the DOM.
Simpler: just hide outright — the row is clickable everywhere. */
.users-table .col-email,
.users-table .col-role,
.users-table .col-lastsignin { display: none; }
/* Name cell takes the remaining width. Padding zeroed out because
the row's flex gap handles spacing now. */
.users-table td[data-action="open-user-detail"] {
flex: 1;
min-width: 0; /* allow the name to truncate / wrap rather
than push the status+actions off-screen */
padding: 0;
cursor: pointer;
word-break: normal;
overflow-wrap: break-word;
}
.users-table .doc-name { font-size: 13px; }
.users-table .doc-meta { font-size: 11px; }
/* Stack the progress bar (or Migrated chip) UNDER the name rather
than beside it. */
.users-table .user-name-row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.users-table .user-progress-bar { width: 110px; }
.user-progress-migrated,
.badge { white-space: nowrap; }
/* Status pill — tight column on the right, before the ⋯ trigger. */
.users-table .col-status {
flex: 0 0 auto;
white-space: nowrap;
font-size: 10px;
text-align: right;
padding: 0;
line-height: 1.4;
}
.users-table .col-status .status-dot { margin-right: 4px; }
/* Actions ⋯ — sits to the right of status. Sized exactly to the
glyph so it never bleeds into the status pill. */
.users-table .col-actions {
flex: 0 0 auto;
padding: 0;
text-align: right;
}
.users-table .col-actions .rv-actions-menu-btn {
position: relative;
width: 32px;
height: 28px;
min-width: 0;
padding: 0;
color: transparent;
line-height: 1;
}
.users-table .col-actions .rv-actions-menu-btn::before {
content: "⋯";
position: absolute;
inset: 0;
color: var(--ink, #1a2540);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
letter-spacing: -1px;
}
/* Anchor the dropdown panel to the RIGHT edge so it stays inside
the viewport even though the trigger sits at the row's edge. */
.users-table .col-actions .rv-actions-menu-items {
right: 0;
left: auto;
min-width: 200px;
}
/* Compliance: hide role/sign-in/decision columns. Show Name + Last Review
summary + Review button. Last review badge already includes the "overdue"
indicator so an admin can see at a glance who needs reviewing. */
.compliance-table { min-width: 0 !important; width: 100%; }
.compliance-table .col-rolestatus,
.compliance-table .col-lastsignin,
.compliance-table .col-decision { display: none; }
.card:has(.compliance-table) { overflow-x: visible; }
.compliance-table .col-review { font-size: 10px; padding-right: 4px; }
.compliance-table .col-action .btn { padding: 6px 10px; font-size: 11px; }
/* Audit Log: each entry stacks vertically — time on top, badge + ID
inline beneath, then the action description. No horizontal grid means
no overflow on narrow phones. */
.audit-row.audit-row-4col {
display: block !important;
grid-template-columns: none !important;
padding: 12px 0;
line-height: 1.45;
}
.audit-row .audit-time { font-size: 11px; display: block; margin-bottom: 4px; }
.audit-row .audit-badge { display: inline-block; margin-right: 8px; }
.audit-row .audit-user { display: inline-block; font-size: 10px; text-align: left !important; }
.audit-row .audit-action { display: block; margin-top: 6px; font-size: 13px; }
/* Audit filter row stacks too (auto-fit minmax already does most of this,
but the apply/clear buttons should sit full-width side-by-side) */
#auditFilters > div > div:last-child { grid-column: 1 / -1; }
#auditFilters > div > div:last-child .btn { flex: 1; }
/* Bigger tap targets for buttons inside tables */
td .btn-sm { padding: 8px 12px; min-height: 36px; }
/* Default button size bumps so thumbs aren't fighting tiny targets */
.btn { padding: 12px 18px; min-height: 42px; font-size: 13px; }
.btn-sm { padding: 8px 12px; min-height: 36px; font-size: 12px; }
/* Notice / banner text wraps cleanly on narrow screens */
.notice { font-size: 13px; padding: 12px; }
/* Page header wraps so the title and any action buttons stack vertically
instead of getting squashed side-by-side. */
.page-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-bottom: 18px;
padding-bottom: 12px;
}
.page-header h1 { font-size: 20px; }
.page-header p { font-size: 12px; }
/* Any header action buttons (Upload, Add User, etc.) get full width */
.page-header > div + div,
.page-header .btn { width: 100%; }
.page-header .btn { justify-content: center; }
/* Welcome card slimmer + smaller corner glow that doesn't dominate */
.welcome-card { padding: 18px 18px; margin-bottom: 14px; }
.welcome-card h1 { font-size: 20px; }
.welcome-card .subline { font-size: 12px; margin-bottom: 10px; }
.welcome-card::after { width: 140px; height: 140px; right: -28px; top: -28px; }
/* Dashboard stat cards: keep them in one row instead of stacking — three
thin cards across the top of the dashboard read better than three big
cards each filling the screen. */
.grid.grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.grid.grid-4 { grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-card { padding: 12px 6px; min-height: 92px; }
.stat-card .stat-value { font-size: 18px; line-height: 1.1; }
.stat-card .stat-label { font-size: 9px; line-height: 1.3; letter-spacing: 0.02em; min-height: 2.4em; }
/* Dashboard "Action Required" table → stacked cards on mobile.
Each item (an outstanding ack / training / announcement) becomes one
card with the title on top, type + due date inline beneath, and a
full-width primary action button at the bottom. Columns are absent
since they don't make sense without their headers. */
#dashboardActionTbody,
#dashboardActionTbody tr,
#dashboardActionTbody td { display: block; }
#dashboardActionTbody tr {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px;
margin-bottom: 8px;
}
#dashboardActionTbody td { padding: 0; border: none; }
#dashboardActionTbody td:first-child {
font-weight: 600; color: var(--navy); font-size: 14px;
margin-bottom: 8px;
}
#dashboardActionTbody td:nth-child(2) {
display: inline-block; margin-right: 10px;
}
#dashboardActionTbody td:nth-child(3) {
display: inline-block; font-size: 12px; color: var(--muted);
}
#dashboardActionTbody td:last-child {
margin-top: 10px;
}
#dashboardActionTbody td:last-child .btn { width: 100%; }
/* Hide the (now-pointless) table column headers and stop the parent card
from forcing horizontal scroll — there's no wide table any more. */
.card:has(#dashboardActionTbody) thead { display: none; }
.card:has(#dashboardActionTbody) { overflow-x: visible; }
.card:has(#dashboardActionTbody) table { min-width: 0; }
/* Modal sizing + actions stack instead of right-align.
Anchor to top + safe-area padding so iPhone notch / browser chrome
never crops the modal. align-items: flex-start prevents the modal
"jiggling" up and down when the iOS keyboard / address bar shifts. */
.modal-overlay {
align-items: flex-start;
padding: calc(env(safe-area-inset-top, 0) + 12px) 8px
calc(env(safe-area-inset-bottom, 0) + 12px);
}
.modal {
padding: 18px;
max-width: calc(100vw - 16px);
max-height: calc(100dvh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - 24px);
overflow-y: auto;
margin: 0 auto;
}
.modal h2, .modal h3 { font-size: 18px; }
.modal-actions { flex-direction: column-reverse; gap: 8px; }
.modal-actions .btn { width: 100%; }
/* Settings modal: same generous treatment */
#settingsModal .modal { padding: 16px; max-height: calc(100dvh - 16px); }
.settings-section { padding: 12px 0; }
.settings-section h4 { font-size: 14px; }
/* Login + onboarding cards — reduce heavy desktop padding for phones */
.login-card { padding: 28px 22px; box-shadow: none; }
.login-logo .mark { width: 80px; height: 80px; padding: 10px; }
.login-logo h1 { font-size: 18px; }
.onboarding-card { padding: 24px 20px; }
.onboarding-card h1 { font-size: 20px; }
.onboarding-card .lede { font-size: 13px; margin-bottom: 16px; }
/* Every form input gets 16px font on mobile so iOS Safari doesn't zoom
on focus. Also a touch more padding for finger-friendly tap targets. */
.field input,
.field select,
.field textarea,
input[type="email"],
input[type="password"],
input[type="text"],
input[type="date"],
input[type="search"],
textarea,
select {
font-size: 16px;
padding: 12px;
background: #fff;
color: var(--ink);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
/* Date inputs in particular — iOS Safari renders them as grey blocks with
no visible text when empty. Force a white bg, dark text, and a visible
placeholder via the WebKit pseudo-element so the field looks like a
real input even before the user picks a date. */
input[type="date"] {
-webkit-appearance: none;
appearance: none;
min-height: 44px;
line-height: 1.2;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field { color: var(--ink); }
input[type="date"]:not(:focus):not(:valid)::-webkit-datetime-edit { color: var(--muted); }
/* Filter pills sit on their own row, scrollable if many */
.filter-row { overflow-x: auto; padding-bottom: 6px; }
.filter-pill { font-size: 12px; padding: 6px 10px; }
/* Coming up widget: clamp long titles so they don't push the meta off-screen */
.coming-up-item { padding: 10px 8px; }
.coming-up-item .cu-icon { width: 28px; height: 28px; font-size: 14px; }
/* Resource + news cards need to breathe in their card */
.resource-grid { grid-template-columns: 1fr; gap: 8px; }
.resource-card { padding: 12px; }
/* Inbox rows tighter */
.inbox-row { padding: 12px; }
/* MFA QR-code section inside settings shouldn't crowd */
#mfaEnrollArea > div { flex-direction: column; align-items: stretch !important; }
#mfaQr { width: 180px !important; height: 180px !important; margin: 0 auto; }
}
/* -------------------------------------------------------------------------
* Calendar screen — month grid (desktop) + 14-day list (mobile)
* ----------------------------------------------------------------------- */
.cal-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-month { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy); min-width: 180px; text-align: center; }
.cal-scope { display: flex; gap: 6px; }
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 8px;
}
.cal-hdr { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; text-align: center; padding: 4px 0; }
.cal-day {
background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
min-height: 78px; padding: 6px; cursor: pointer;
display: flex; flex-direction: column; align-items: stretch; justify-content: space-between;
font: inherit; color: var(--ink); text-align: left;
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.cal-day:hover { border-color: var(--teal); }
.cal-day-other { background: var(--bg); color: var(--muted); }
.cal-day-today { border-color: var(--navy); border-width: 2px; }
.cal-day-has-items { background: rgba(19, 163, 163, 0.04); }
.cal-daynum { font-size: 13px; font-weight: 600; color: var(--navy); }
.cal-day-other .cal-daynum { color: var(--muted); font-weight: 400; }
.cal-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.cal-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cal-dot-doc-due { background: var(--danger); }
.cal-dot-training-due { background: var(--teal); }
.cal-dot-doc-acked { background: var(--success); }
.cal-dot-cert-expiring { background: var(--gold); }
.cal-dot-cert-expired { background: var(--danger); outline: 2px solid #fff; outline-offset: -3px; }
.cal-dot-interview { background: var(--navy); }
.cal-legend {
display: flex; gap: 14px; flex-wrap: wrap;
margin-top: 12px; font-size: 12px; color: var(--muted);
align-items: center;
}
.cal-legend > span { display: inline-flex; align-items: center; gap: 6px; }
/* Mobile list view (replaces grid below 768px) */
.cal-mobile-wrap { display: none; }
.cal-list-day { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin-bottom: 8px; }
.cal-list-date { font-size: 12px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.cal-list-item, .cal-day-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 8px; border-bottom: 1px dashed var(--border);
font-size: 13px; color: var(--ink);
background: transparent; border-left: none; border-right: none; border-top: none;
width: 100%; text-align: left; cursor: pointer; font-family: inherit;
}
.cal-list-item:last-child, .cal-day-item:last-child { border-bottom: none; }
.cal-list-item:hover, .cal-day-item:hover { background: var(--bg); }
.cal-list-title { flex: 1; min-width: 0; font-weight: 500; }
.cal-list-meta { font-size: 11px; color: var(--muted); }
.cal-list-empty { text-align: center; color: var(--muted); padding: 32px; font-size: 13px; }
@media (max-width: 768px) {
.cal-grid-wrap { display: none; } /* hide month grid */
.cal-mobile-wrap { display: block; } /* show 14-day list */
.cal-toolbar { flex-direction: column; align-items: stretch; }
.cal-nav { justify-content: space-between; }
}
/* -------------------------------------------------------------------------
* PWA install banner — fixed below the mobile topbar (above content but
* below the topbar/sidebar). Mobile only; desktop has its own browser
* install UI. JS-driven visibility (only when actually installable).
* ----------------------------------------------------------------------- */
.pwa-install-banner {
position: fixed;
top: calc(56px + env(safe-area-inset-top, 0));
left: 8px; right: 8px;
z-index: 78; /* under topbar (80), above page content */
background: var(--navy);
color: #fff;
padding: 10px 12px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
gap: 10px;
box-shadow: var(--shadow-lg);
animation: pwa-slide-in 0.25s ease-out;
}
@keyframes pwa-slide-in {
from { transform: translateY(-12px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.pwa-banner-icon { color: var(--gold); flex-shrink: 0; display: inline-flex; }
.pwa-banner-body { flex: 1; min-width: 0; }
.pwa-banner-title { font-weight: 600; font-size: 13px; color: #fff; line-height: 1.2; }
.pwa-banner-sub { font-size: 11px; color: rgba(255, 255, 255, 0.7); margin-top: 2px; line-height: 1.3; }
.pwa-banner-dismiss {
color: rgba(255, 255, 255, 0.7);
border-color: rgba(255, 255, 255, 0.2);
background: transparent;
}
.pwa-banner-dismiss:hover { background: rgba(255, 255, 255, 0.08); }
@media (min-width: 769px) {
.pwa-install-banner { display: none !important; }
}
/* -------------------------------------------------------------------------
* Dashboard banners — overdue acks (red) and stale access reviews (yellow).
* Sit above the welcome card. Hidden when their JS-loader returns 0 items.
* ----------------------------------------------------------------------- */
.dashboard-overdue-banner,
.dashboard-review-banner {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 18px;
border-radius: var(--radius-md);
margin-bottom: 16px;
background: #fff;
border-left: 4px solid var(--danger);
}
.dashboard-review-banner {
border-left-color: var(--gold);
background: var(--gold-soft);
}
.db-banner-icon { font-size: 22px; line-height: 1.1; flex-shrink: 0; }
.dashboard-overdue-banner .db-banner-icon { color: var(--danger); }
.db-banner-body { flex: 1; min-width: 200px; }
.db-banner-title { font-weight: 700; color: var(--navy); font-size: 14px; margin-bottom: 2px; }
.db-banner-sub { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.db-banner-list { font-size: 12px; color: var(--ink); margin: 6px 0 0; padding-left: 20px; }
.db-banner-list li { margin: 2px 0; }
.db-banner-action { flex-shrink: 0; align-self: center; }
/* Urgent variant — used by the staff-side expiring-clearances banner when any
item is already expired or expires within 7 days. Red treatment, ⚠ icon. */
.dashboard-review-banner.banner-urgent {
border-left-color: var(--danger);
background: rgba(196, 69, 54, 0.06);
}
.dashboard-review-banner.banner-urgent .db-banner-icon { color: var(--danger); }
.dashboard-review-banner.banner-urgent .db-banner-title { color: var(--danger); }
/* Per-line action cluster inside .db-banner-list (Remind me later / Upload renewal) */
.db-banner-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
margin: 4px 0 !important;
}
.db-banner-line-actions {
display: inline-flex;
gap: 6px;
flex-shrink: 0;
}
.btn-xs {
font-size: 11px;
padding: 3px 8px;
border-radius: var(--radius-sm);
line-height: 1.35;
}
@media (max-width: 768px) {
.dashboard-overdue-banner,
.dashboard-review-banner { flex-wrap: wrap; padding: 12px; }
.db-banner-action { width: 100%; align-self: stretch; margin-top: 4px; }
.db-banner-line { flex-direction: column; align-items: flex-start; }
.db-banner-line-actions { width: 100%; justify-content: flex-end; }
}
/* -------------------------------------------------------------------------
* Skeleton loading states
*
* Drop these inline anywhere a list / card is loading. Renders a shimmering
* grey placeholder block that respects width / height / border-radius set
* on the element. Replaces the generic "Loading…" text.
*
* Usage in JS:
* container.innerHTML = `
*
* `.repeat(4);
* ----------------------------------------------------------------------- */
.skeleton {
display: block;
background: linear-gradient(
90deg,
var(--bg) 0%,
rgba(0, 0, 0, 0.06) 50%,
var(--bg) 100%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s infinite;
border-radius: var(--radius-sm);
height: 14px;
}
.skeleton-row {
padding: 12px 0;
border-bottom: 1px dashed var(--border);
}
.skeleton-row:last-child { border-bottom: none; }
.skeleton-card {
padding: 14px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: 8px;
background: #fff;
}
@keyframes skeleton-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.skeleton { animation: none; background: var(--bg); }
}
/* -------------------------------------------------------------------------
* Styled confirmation dialog (replaces native confirm() prompts).
* ----------------------------------------------------------------------- */
.confirm-dialog { max-width: 420px; padding: 24px; }
.confirm-dialog .confirm-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
color: var(--navy);
margin: 0 0 12px;
letter-spacing: -0.01em;
}
.confirm-dialog .confirm-body { font-size: 13px; line-height: 1.55; color: var(--ink); margin: 0 0 18px; }
.confirm-dialog .confirm-body p { margin: 0 0 6px; }
.confirm-dialog .confirm-body p:last-child { margin-bottom: 0; }
.confirm-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.confirm-actions .btn { min-width: 88px; }
@media (max-width: 768px) {
.confirm-actions { flex-direction: column-reverse; }
.confirm-actions .btn { width: 100%; }
}
/* -------------------------------------------------------------------------
* Toast notifications — replaces native alert(). Pinned top-right on
* desktop, bottom-center on mobile (above the bottom-nav). Stack up to
* a few. Click to dismiss; auto-dismiss after 4s (errors 6s).
* ----------------------------------------------------------------------- */
.toast-container {
position: fixed;
top: 20px; right: 20px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 9999;
pointer-events: none; /* container ignores clicks; individual toasts opt back in */
max-width: 380px;
}
.toast {
background: #fff;
border: 1px solid var(--border);
border-left: 4px solid var(--teal);
border-radius: var(--radius-md);
padding: 12px 16px;
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.45;
color: var(--ink);
box-shadow: var(--shadow-lg);
pointer-events: auto;
cursor: pointer;
opacity: 0;
transform: translateX(20px);
transition: opacity var(--transition-normal) ease, transform var(--transition-normal) ease;
}
.toast.toast-in { opacity: 1; transform: translateX(0); }
.toast.toast-out { opacity: 0; transform: translateX(20px); }
.toast .toast-icon { flex-shrink: 0; display: inline-flex; margin-top: 1px; }
.toast .toast-msg { flex: 1; min-width: 0; word-wrap: break-word; }
.toast-success { border-left-color: var(--success); }
.toast-success .toast-icon { color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-error .toast-icon { color: var(--danger); }
.toast-warn { border-left-color: #c9a55a; }
.toast-warn .toast-icon { color: var(--gold-deep); }
.toast-info { border-left-color: var(--teal); }
.toast-info .toast-icon { color: var(--teal); }
@media (max-width: 768px) {
.toast-container {
top: auto;
right: 12px;
left: 12px;
bottom: 76px; /* clears the 60px bottom-nav + safe-area inset */
max-width: none;
align-items: stretch;
}
.toast {
transform: translateY(20px);
}
.toast.toast-in { transform: translateY(0); }
.toast.toast-out { transform: translateY(20px); }
}
/* -------------------------------------------------------------------------
* Bulk-action floating toolbar (used on Documents library for admin bulk
* delete; can be reused on any list screen with checkboxes).
* ----------------------------------------------------------------------- */
.bulk-bar {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(120%);
display: flex;
align-items: center;
gap: 12px;
background: var(--navy);
color: #fff;
padding: 10px 16px;
border-radius: var(--radius-pill);
box-shadow: var(--shadow-lg);
z-index: 60;
pointer-events: none;
opacity: 0;
transition: transform var(--transition-normal) ease, opacity var(--transition-normal) ease;
}
.bulk-bar.active {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}
.bulk-bar-label {
font-size: 13px;
color: rgba(255,255,255,0.85);
}
.bulk-bar-label strong { color: var(--gold); }
.bulk-bar .btn-ghost {
color: rgba(255,255,255,0.85);
border: 1px solid rgba(255,255,255,0.3);
background: transparent;
}
.bulk-bar .btn-ghost:hover { background: rgba(255,255,255,0.1); }
/* -------------------------------------------------------------------------
* FAQ / Knowledge Base
* ----------------------------------------------------------------------- */
.faq-section { margin-bottom: 24px; }
.faq-section-title {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
margin: 4px 0 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.faq-article {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: 8px;
overflow: hidden;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.faq-article[open] { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.faq-article > summary {
padding: 14px 16px;
cursor: pointer;
list-style: none;
user-select: none;
}
.faq-article > summary::-webkit-details-marker { display: none; }
.faq-article > summary::before {
content: '+';
display: inline-block;
margin-right: 10px;
font-weight: 600;
color: var(--teal);
font-size: 16px;
width: 14px;
}
.faq-article[open] > summary::before { content: '−'; }
.faq-q { display: inline; font-weight: 600; color: var(--navy); font-size: 14px; }
.faq-q-meta { margin-left: 24px; font-size: 11px; color: var(--muted); margin-top: 2px; }
.faq-a { padding: 0 16px 14px 16px; border-top: 1px solid var(--border); }
.faq-a-body { font-size: 13px; line-height: 1.65; color: var(--ink); padding: 14px 0 8px; }
.faq-a-body h2 { font-size: 16px; margin: 14px 0 6px; color: var(--navy); }
.faq-a-body h3 { font-size: 14px; margin: 12px 0 4px; color: var(--navy); }
.faq-a-body h4 { font-size: 13px; margin: 10px 0 4px; color: var(--navy); }
.faq-a-body p { margin: 0 0 10px; }
.faq-a-body ul, .faq-a-body ol { margin: 0 0 10px; padding-left: 22px; }
.faq-a-body li { margin: 4px 0; }
.faq-a-body code {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 1px 5px;
font-size: 12px;
font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
}
.faq-a-body pre {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 10px 12px;
overflow-x: auto;
font-size: 12px;
margin: 0 0 10px;
}
.faq-a-body pre code { border: none; padding: 0; background: transparent; }
.faq-a-body blockquote {
border-left: 3px solid var(--gold);
padding: 4px 12px;
margin: 0 0 10px;
color: var(--muted);
font-style: italic;
}
.faq-a-body a { color: var(--teal); text-decoration: underline; }
.faq-a-body hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.faq-a-foot {
display: flex;
align-items: center;
gap: 10px;
padding-top: 10px;
border-top: 1px dashed var(--border);
flex-wrap: wrap;
}
.faq-submission {
padding: 12px 14px;
border: 1px solid var(--border);
border-left: 3px solid var(--gold);
border-radius: var(--radius-md);
margin-bottom: 8px;
background: #fffdf8;
}
.faq-submission-q { font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.faq-submission-meta { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.faq-submission-actions { display: flex; gap: 8px; }
/* -------------------------------------------------------------------------
* Global search bar (top-right floating input, visible on every screen
* once signed in). Keyboard shortcut: press "/" anywhere to focus it.
* ----------------------------------------------------------------------- */
#globalSearchBar {
position: fixed;
top: 16px;
right: 24px;
z-index: 50;
pointer-events: none; /* the wrap below opts back in */
/* Search input is now docked inside the sidebar on desktop. Hide the
floating top-right bar there. Mobile keeps the slide-down panel
pattern (overridden inside the @media block above). */
display: none;
}
/* -------------------------------------------------------------------------
* Sidebar search input (desktop) — docked at the top of the sidebar above
* the Dashboard nav item. Same handlers as #globalSearchInput; typing here
* routes to /search just like the floating input used to.
* ----------------------------------------------------------------------- */
.sidebar-search {
display: flex;
align-items: center;
gap: 8px;
margin: 4px 16px 12px;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.sidebar-search:focus-within {
background: rgba(255, 255, 255, 0.10);
border-color: var(--teal);
}
.sidebar-search-icon {
display: inline-flex;
color: rgba(255, 255, 255, 0.55);
flex-shrink: 0;
}
.sidebar-search-input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
color: #fff;
font-size: 12px;
font-family: var(--font-body);
}
.sidebar-search-input::placeholder { color: rgba(255, 255, 255, 0.45); }
@media (max-width: 768px) {
/* Mobile uses the topbar search button → docked panel; sidebar search
would be redundant in the drawer. */
.sidebar-search { display: none; }
}
.global-search-wrap {
display: flex;
align-items: center;
gap: 6px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 6px 10px 6px 14px;
box-shadow: var(--shadow-sm);
pointer-events: auto;
transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.global-search-wrap:focus-within {
border-color: var(--teal);
box-shadow: 0 2px 12px rgba(19, 163, 163, 0.15);
}
.global-search-icon { font-size: 13px; color: var(--muted); }
#globalSearchInput {
border: none;
outline: none;
background: transparent;
font-size: 13px;
min-width: 220px;
color: var(--ink);
}
#globalSearchInput::placeholder { color: var(--muted); }
.global-search-kbd {
font-family: inherit;
font-size: 11px;
color: var(--muted);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 1px 6px;
}
@media (max-width: 768px) {
/* Search bar position is set in the mobile-sidebar block above (bottom-right
so it doesn't fight the new mobile topbar). Just slim down the input. */
#globalSearchInput { min-width: 140px; }
.global-search-kbd { display: none; }
}
/* Search results screen */
.search-group-header {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
margin: 22px 0 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.search-hit {
display: block;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: 8px;
background: #fff;
text-decoration: none;
color: inherit;
cursor: pointer;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-hit:hover { border-color: var(--teal); box-shadow: var(--shadow-sm); }
.search-hit .title { font-size: 14px; font-weight: 600; color: var(--navy); margin-bottom: 2px; }
.search-hit .meta { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.search-hit .snippet { font-size: 12px; color: var(--ink); line-height: 1.5; }
.search-hit mark {
background: rgba(201, 165, 90, 0.25);
color: inherit;
padding: 0 2px;
border-radius: 2px;
}
/* -------------------------------------------------------------------------
* Tab bar — used inside Compliance (Access / Reports). Generic enough to
* reuse for any in-screen tab strip.
* ----------------------------------------------------------------------- */
.tab-bar {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border);
}
.tab-btn {
background: transparent;
border: none;
padding: 10px 18px;
font-size: 13px;
font-weight: 600;
color: var(--muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active {
color: var(--teal);
border-bottom-color: var(--teal);
}
/* Report card action row */
.report-actions {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.report-actions .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* -------------------------------------------------------------------------
* Printable audit-report frame
*
* The frame is rendered into the DOM but hidden on screen. When the user
* clicks "Printable view" on a report card, reports.js (a) renders the
* branded HTML into #reportPrintBody, (b) adds `printing-report` to ,
* then (c) calls window.print(). The print stylesheet hides everything
* EXCEPT the frame so the browser's print dialog only sees the branded
* report — no sidebar, no portal chrome, no other cards.
* ----------------------------------------------------------------------- */
.report-print-frame { display: none; }
@media print {
/* On-screen everything → hidden during print */
body.printing-report > *:not(#reportPrintFrame),
body.printing-report .sidebar,
body.printing-report .modal-overlay,
body.printing-report #idleWarning { display: none !important; }
body.printing-report { background: #fff !important; padding: 0 !important; margin: 0 !important; }
body.printing-report .report-print-frame {
display: block !important;
padding: 18px 24px;
color: #1a2540;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.report-print-header {
border-bottom: 3px solid #0b2545;
padding-bottom: 10px;
margin-bottom: 18px;
}
.report-print-brand {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #c9a55a;
font-weight: 600;
}
.report-print-subtitle {
font-size: 14px;
color: #0b2545;
font-weight: 600;
margin-top: 2px;
}
.report-print-footer {
border-top: 1px solid #e3e8f0;
margin-top: 18px;
padding-top: 8px;
font-size: 9px;
color: #6b778c;
text-align: center;
}
/* Sensible page settings */
@page { size: A4 landscape; margin: 12mm; }
/* Prevent column splitting where avoidable */
table { page-break-inside: auto; }
tr { page-break-inside: avoid; page-break-after: auto; }
thead { display: table-header-group; }
}
/* -------------------------------------------------------------------------
* Wave 5A — Staff documents (onboarding checklist + repository)
*
* Used by both surfaces that surface a staffer's onboarding checklist:
* 1) #profileDocuments on the My Profile screen
* 2) [data-bind="userdetail.documents"] inside the User Management modal
* Layout is the same; only the surrounding chrome differs.
* ----------------------------------------------------------------------- */
.sd-container { font-size: 13px; }
.sd-loading,
.sd-empty {
text-align: center;
color: var(--muted);
padding: 18px;
font-size: 13px;
}
/* Progress bar at the top */
.sd-progress { margin: 0 0 16px; }
.sd-progress-bar {
height: 8px;
background: var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
margin-bottom: 6px;
}
.sd-progress-fill {
height: 100%;
background: var(--success);
transition: width var(--transition-normal) ease-out;
}
.sd-progress-text {
font-size: 11px;
color: var(--muted);
text-align: right;
}
/* Sections */
.sd-section { margin-bottom: 18px; }
.sd-section-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--navy);
font-weight: 700;
margin: 0 0 8px;
}
.sd-section-sub {
font-weight: 400;
color: var(--muted);
text-transform: none;
letter-spacing: 0;
font-size: 11px;
margin-left: 4px;
}
.sd-section-custom { border-top: 1px dashed var(--border); padding-top: 14px; }
.sd-rows { display: flex; flex-direction: column; gap: 6px; }
.sd-row {
display: grid;
/* Main column gets priority — `minmax(0, 1fr)` lets it shrink to 0 instead
of growing the row, AND prevents long labels from pushing the row wider.
Actions column uses `minmax(0, max-content)` so it shrinks rather than
bullying the main column when there are many/wide buttons — the actions
cluster wraps to multiple rows when it can't fit. */
grid-template-columns: minmax(0, 1fr) auto minmax(0, max-content);
gap: 12px;
align-items: center;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.sd-row-main {
/* min-width on the grid item raises the floor of the `minmax(0, 1fr)`
track — without it the 1fr column happily shrinks to 0 and actions
bully the row. 200px keeps labels readable on at most 2 lines even
when the actions column carries 3-4 buttons. */
min-width: 200px;
overflow-wrap: anywhere;
}
.sd-row-label {
font-weight: 600;
color: var(--navy);
font-size: 13px;
margin-bottom: 1px;
overflow-wrap: anywhere;
}
.sd-row-desc {
font-size: 11px;
color: var(--muted);
line-height: 1.4;
overflow-wrap: anywhere;
}
.sd-submitted {
font-size: 11px;
color: var(--muted);
margin-top: 3px;
}
.sd-row-status {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.sd-row-actions {
display: flex;
gap: 6px;
/* Wrap to multiple lines when there are many or wide buttons (e.g. the
handbook ack row: Read handbook + View signature + Re-sign). The old
nowrap was the cause of the "vertical char-by-char label" bug — actions
grew unbounded and squashed the main column. */
flex-wrap: wrap;
white-space: normal;
justify-content: flex-end;
max-width: 100%;
}
.sd-hint {
font-size: 11px;
color: var(--muted);
font-style: italic;
}
.sd-add-custom {
margin-top: 8px;
}
/* Status badges */
.sd-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 3px 8px;
border-radius: var(--radius-pill);
line-height: 1.4;
}
.sd-badge.badge-pending { background: var(--bg); color: var(--muted); }
.sd-badge.badge-done { background: rgba(0, 120, 84, 0.12); color: var(--success); }
.sd-badge.badge-na { background: var(--border); color: var(--muted); }
.sd-badge.badge-expiring { background: rgba(139, 105, 20, 0.12); color: var(--gold-deep); }
.sd-badge.badge-expired { background: rgba(218, 30, 40, 0.12); color: var(--danger); }
.sd-expiry-chip {
font-size: 10px;
color: var(--muted);
background: var(--bg);
padding: 2px 6px;
border-radius: var(--radius-sm);
}
/* Mobile: stack the row into a single column */
@media (max-width: 768px) {
.sd-row {
grid-template-columns: 1fr;
gap: 6px;
padding: 12px;
}
.sd-row-status { flex-direction: row; gap: 8px; flex-wrap: wrap; }
/* On mobile the actions row gets the full row width, so let them wrap. */
.sd-row-actions { justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
}
/* -------------------------------------------------------------------------
* Wave 5A — User detail modal tabs (Profile / Documents)
* ----------------------------------------------------------------------- */
.userdetail-tabs {
display: flex;
/* Wrap to a second row on desktop rather than overflowing/cropping when the
strip carries many tabs (Profile, Documents, Medical, Contracts, Warnings,
Performance ▾, Payroll). The mobile block below overrides this with
nowrap + horizontal scroll. */
flex-wrap: wrap;
gap: 4px;
border-bottom: 1px solid var(--border);
margin-bottom: 16px;
/* Stay pinned while scrolling through a long contracts / warnings list.
The modal itself is the scroll container (max-height: calc(100dvh - 40px)
+ overflow-y:auto), so sticky scopes correctly against it. The negative
margin-x pulls the tabs row to the modal frame edges so the box-shadow
covers any content peeking out behind. */
position: sticky;
top: 0;
z-index: 5;
background: var(--card, #fff);
margin-left: -28px;
margin-right: -28px;
padding-left: 28px;
padding-right: 28px;
padding-top: 4px;
box-shadow: 0 6px 12px -10px rgba(11, 37, 69, 0.15);
}
.userdetail-tab {
background: transparent;
border: none;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
color: var(--muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 150ms ease, border-color var(--transition-fast) ease;
}
.userdetail-tab:hover { color: var(--ink); }
.userdetail-tab.active {
color: var(--navy);
border-bottom-color: var(--teal, #1f8a8a);
}
/* Wave 6.5 follow-up — consolidated "Performance ▾" tab on desktop.
Hides Reviews / 1:1s / Goals as separate tabs above the 768px breakpoint
(the same boundary where the mobile horizontal-scroll rule turns off) and
surfaces a single tab with a dropdown so the strip doesn't bleed past
the .modal-md 640px width. Base styles come FIRST so the media-query
overrides below win on source-order parity. */
.userdetail-tab-perf-wrap {
position: relative;
display: inline-flex;
align-items: stretch;
}
.userdetail-tab-perf-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
}
@media (min-width: 769px) {
.userdetail-tab-perf { display: none; }
}
@media (max-width: 768px) {
/* On mobile the existing horizontal-scroll handles overflow, so hide
the consolidator and let all 8 tabs show. */
.userdetail-tab-perf-wrap { display: none; }
}
.userdetail-tab-perf-icon {
display: inline-flex;
align-items: center;
}
.userdetail-tab-perf-caret {
margin-left: 2px;
font-size: 10px;
line-height: 1;
color: var(--muted);
transition: transform var(--transition-fast);
}
.userdetail-tab-perf-wrap.open .userdetail-tab-perf-caret {
transform: rotate(180deg);
}
.userdetail-tab-perf-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 200px;
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(11, 37, 69, 0.10);
padding: 6px;
/* Sticky tabs row sits at z-index:5 — the menu needs to clear it plus any
panel content scrolling beneath. */
z-index: 20;
display: flex;
flex-direction: column;
gap: 2px;
}
.userdetail-tab-perf-menu[hidden] { display: none; }
.userdetail-tab-perf-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
background: transparent;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: var(--navy);
cursor: pointer;
text-align: left;
font-family: inherit;
}
.userdetail-tab-perf-item:hover,
.userdetail-tab-perf-item:focus-visible {
background: rgba(19, 163, 163, 0.08);
outline: none;
}
/* The upload modal's date input needs the same iOS Safari fix the rest of
* the app uses — without these, the input renders grey on iPhones. */
#sdUploadModal input[type="date"],
#sfWizardModal input[type="date"] {
-webkit-appearance: none;
appearance: none;
background: #fff;
color: var(--ink);
}
#sdUploadModal input[type="date"]::-webkit-date-and-time-value,
#sfWizardModal input[type="date"]::-webkit-date-and-time-value {
text-align: left;
color: var(--ink);
}
#sdUploadModal input[type="date"]::-webkit-calendar-picker-indicator,
#sfWizardModal input[type="date"]::-webkit-calendar-picker-indicator {
filter: none;
}
/* -------------------------------------------------------------------------
* Wave 5C — Digital form wizard (TFN, Super, Bank, Emergency Contact)
* ----------------------------------------------------------------------- */
.sf-wizard-modal {
max-height: 90vh;
display: flex;
flex-direction: column;
}
.sf-wizard-modal > form {
overflow-y: auto;
flex: 1;
-webkit-overflow-scrolling: touch;
}
.sf-intro {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.sf-group {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--navy);
font-weight: 700;
margin: 18px 0 8px;
padding-top: 10px;
border-top: 1px dashed var(--border);
}
.sf-group:first-of-type {
border-top: none;
margin-top: 0;
padding-top: 0;
}
.sf-field {
margin-bottom: 12px;
}
.sf-hint {
font-size: 11px;
color: var(--muted);
margin-top: 4px;
line-height: 1.4;
}
.sf-error {
font-size: 12px;
color: var(--danger);
margin-top: 4px;
min-height: 0;
}
.sf-error:empty { display: none; }
.sf-field-invalid input,
.sf-field-invalid textarea,
.sf-field-invalid select {
border-color: var(--danger) !important;
}
.sf-radio-group {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 4px;
}
.sf-radio-group.sf-radio-inline {
flex-direction: row;
gap: 16px;
}
.sf-radio-row {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--ink);
cursor: pointer;
line-height: 1.4;
}
.sf-radio-row input[type="radio"] {
width: auto;
margin-top: 2px;
flex-shrink: 0;
}
.sf-checkbox-row {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--ink);
cursor: pointer;
line-height: 1.5;
}
.sf-checkbox-row input[type="checkbox"] {
width: auto;
margin-top: 3px;
flex-shrink: 0;
}
.sf-declaration {
background: var(--gold-soft);
padding: 10px 12px;
border-radius: var(--radius-sm);
border-left: 3px solid var(--gold);
}
.sf-signature-wrap {
position: relative;
margin-top: 6px;
}
.sf-signature-canvas {
display: block;
width: 100%;
height: 160px;
background: #fff;
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
touch-action: none;
cursor: crosshair;
}
.sf-signature-clear {
position: absolute;
top: 6px;
right: 6px;
}
@media (max-width: 768px) {
.sf-wizard-modal { max-width: 100% !important; max-height: 100dvh; }
.sf-radio-group.sf-radio-inline { gap: 24px; }
.sf-signature-canvas { height: 140px; }
}
/* My Profile quick-nav chips — sit at the top of the My Profile screen and
jump to the matching card below. Mirrors the admin user-detail tabbed
navigation so staff have an obvious entry point to their contracts,
warnings, and reviews without scrolling. */
.profile-quicknav {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 20px;
padding: 4px 0;
}
.profile-quicknav-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
border: 1px solid var(--border);
border-radius: 999px;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
color: var(--navy);
cursor: pointer;
transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
font-family: inherit;
}
.profile-quicknav-chip:hover { border-color: var(--teal); background: rgba(19, 163, 163, 0.06); }
.profile-quicknav-chip:active { transform: translateY(1px); }
.profile-quicknav-icon { font-size: 15px; }
.profile-quicknav-label { white-space: nowrap; }
.profile-quicknav-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 6px;
font-size: 11px;
font-weight: 700;
color: var(--muted);
background: var(--bg);
border-radius: 999px;
line-height: 1;
}
.profile-quicknav-count.has-items {
color: #fff;
background: var(--teal);
}
/* Wave 6.5 follow-up — consolidated "Performance ▾" chip on desktop.
Hides Reviews/1:1s/Goals as separate chips above the 600px breakpoint and
surfaces a single chip with a dropdown so the quicknav doesn't bleed past
the page edge. Base styles come FIRST so the media-query overrides below
win on source-order parity (otherwise the mobile `display: none` loses to
this `display: inline-flex` and the chip leaks onto mobile alongside the
three child chips). */
.profile-quicknav-perf-wrap {
position: relative;
display: inline-flex;
}
@media (max-width: 600px) {
.profile-quicknav {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 6px;
margin-left: -4px;
margin-right: -4px;
padding-left: 4px;
padding-right: 4px;
-webkit-overflow-scrolling: touch;
}
.profile-quicknav-chip { flex: 0 0 auto; padding: 8px 12px; }
/* On mobile we keep the original three chips visible (horizontal scroll
handles overflow) and hide the desktop "Performance ▾" consolidator. */
.profile-quicknav-perf-wrap { display: none; }
}
@media (min-width: 601px) {
.profile-quicknav-chip-perf { display: none; }
}
.profile-quicknav-perf-caret {
margin-left: 2px;
font-size: 10px;
line-height: 1;
color: var(--muted);
transition: transform var(--transition-fast);
}
.profile-quicknav-perf-wrap.open .profile-quicknav-perf-caret {
transform: rotate(180deg);
}
.profile-quicknav-perf-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 220px;
background: #fff;
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(11, 37, 69, 0.10);
padding: 6px;
z-index: 30;
display: flex;
flex-direction: column;
gap: 2px;
}
.profile-quicknav-perf-menu[hidden] { display: none; }
.profile-quicknav-perf-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 10px;
background: transparent;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: var(--navy);
cursor: pointer;
text-align: left;
font-family: inherit;
}
.profile-quicknav-perf-item:hover,
.profile-quicknav-perf-item:focus-visible {
background: rgba(19, 163, 163, 0.08);
outline: none;
}
.profile-quicknav-perf-item-label {
flex: 1;
}
.profile-resume-wizard {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
background: var(--gold-soft);
border-left: 3px solid var(--gold);
padding: 14px 18px;
border-radius: var(--radius-sm);
flex-wrap: wrap;
}
.profile-resume-wizard > div {
flex: 1;
min-width: 200px;
font-size: 13px;
color: var(--ink);
line-height: 1.5;
}
.profile-resume-wizard strong {
color: var(--navy);
display: block;
font-size: 14px;
margin-bottom: 2px;
}
@media (max-width: 600px) {
.profile-resume-wizard button { width: 100%; }
}
.sf-draft-resumed {
background: var(--gold-soft);
border-left: 3px solid var(--gold);
padding: 8px 12px;
font-size: 12px;
color: #6b5418;
border-radius: var(--radius-sm);
margin: 0 0 12px;
}
/* -------------------------------------------------------------------------
* Wave 5D — New-hire onboarding wizard (multi-step overlay).
*
* Z-index stack (top to bottom):
* #confirmDialog — 1200 (must sit above everything)
* #sfWizardModal — 1100 (form wizard opened FROM a wizard step)
* #onboardingOverlay — 1000 (password set; blocking)
* #wizardOverlay — 950 (the new-hire wizard)
* other .modal-overlay — 100 (default)
* ----------------------------------------------------------------------- */
.wiz-overlay {
z-index: 950;
align-items: flex-start;
padding: 24px;
}
/* Confirm + form wizard + ack-signature child modals must layer ABOVE the
wizard so the user can actually interact with them while the wizard is
open. */
#confirmDialog { z-index: var(--z-confirm); }
#sfWizardModal { z-index: var(--z-modal-child); }
#sdAckSignModal { z-index: var(--z-modal-child); }
.wiz-overlay.active {
display: flex;
}
.wiz-overlay > .wiz-modal {
max-width: 920px; /* room for sidebar + body side-by-side on desktop */
width: 100%;
max-height: calc(100dvh - 48px);
display: flex;
flex-direction: column;
padding: 0; /* the wiz-header/body/footer manage their own padding */
overflow: hidden;
}
.wiz-header {
padding: 20px 24px 16px;
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}
.wiz-header-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
}
.wiz-eyebrow {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--teal);
font-weight: 700;
margin-bottom: 2px;
}
.wiz-title {
font-family: var(--font-display);
font-size: 20px;
color: var(--navy);
margin: 0;
font-weight: 700;
}
.wiz-close {
background: transparent;
border: none;
font-size: 28px;
line-height: 1;
color: var(--muted);
cursor: pointer;
padding: 0 4px;
margin: -4px -4px 0 0;
}
.wiz-close:hover { color: var(--ink); }
.wiz-progress {
margin-bottom: 10px;
}
.wiz-progress-bar {
height: 8px;
background: var(--border);
border-radius: var(--radius-pill);
overflow: hidden;
}
.wiz-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--teal), var(--gold));
border-radius: var(--radius-pill);
transition: width var(--transition-slow) ease;
}
.wiz-progress-meta {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(--muted);
margin-top: 4px;
font-weight: 600;
}
.wiz-step-counter-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.wiz-section-pill {
display: inline-block;
background: var(--gold-soft);
color: var(--gold-deep);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 3px 10px;
border-radius: var(--radius-lg);
}
.wiz-step-counter {
font-size: 11px;
color: var(--muted);
font-weight: 600;
}
/* .wiz-main is a flex row containing the sidebar + the body. On desktop both
are visible side-by-side; on mobile the sidebar is hidden by default and
slides in as a drawer when .wiz-sidebar-open is added to #wizardOverlay. */
.wiz-main {
display: flex;
flex-direction: row;
flex: 1;
min-height: 0;
position: relative;
}
.wiz-body {
padding: 20px 24px;
overflow-y: auto;
flex: 1;
-webkit-overflow-scrolling: touch;
min-width: 0;
}
/* --- Sidebar (Wave polish v2) ----------------------------------------- */
.wiz-sidebar {
width: 260px;
flex-shrink: 0;
border-right: 1px solid var(--border);
background: var(--bg);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.wiz-sidebar-inner { padding: 16px 0; }
.wiz-sidebar-section { margin-bottom: 14px; }
.wiz-sidebar-section-title {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
font-weight: 700;
padding: 0 18px 6px;
}
.wiz-sidebar-rows {
list-style: none;
margin: 0;
padding: 0;
}
.wiz-sidebar-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 18px;
font-size: 13px;
color: var(--ink);
cursor: pointer;
line-height: 1.35;
border-left: 3px solid transparent;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.wiz-sidebar-row:hover { background: #fff; }
.wiz-sidebar-row:focus { outline: 2px solid var(--teal); outline-offset: -2px; }
.wiz-sidebar-row-current { background: #fff; border-left-color: var(--gold); font-weight: 600; }
.wiz-sidebar-row-done { color: var(--muted); }
.wiz-sidebar-row-done .wiz-sidebar-label { text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.15); }
.wiz-sidebar-icon {
flex-shrink: 0;
width: 18px; height: 18px;
border-radius: 50%;
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.wiz-sidebar-icon-done { background: #d4f4e8; color: #0a5f3a; }
.wiz-sidebar-icon-current { background: var(--gold-soft); color: var(--gold-deep); }
.wiz-sidebar-icon-pending { background: var(--border); color: var(--muted); }
.wiz-sidebar-icon-review { background: var(--teal); color: #fff; }
.wiz-sidebar-label { flex: 1; min-width: 0; word-break: break-word; }
.wiz-sidebar-meta {
font-size: 10px;
color: var(--muted);
font-weight: 500;
white-space: nowrap;
margin-left: 4px;
}
.wiz-sidebar-section-review {
border-top: 1px solid var(--border);
padding-top: 10px;
margin-top: 6px;
}
.wiz-sidebar-row-review { font-weight: 600; }
.wiz-sidebar-toggle {
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.wiz-sidebar-toggle:hover { background: #fff; }
.wiz-sidebar-toggle svg { color: var(--muted); }
.wiz-sidebar-backdrop {
display: none;
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35);
z-index: 1;
cursor: pointer;
}
/* Drawer behaviour: hidden on mobile by default. Tap the step counter
toggle button → wiz-sidebar-open class on #wizardOverlay slides the
sidebar in and shows the backdrop. */
@media (max-width: 768px) {
.wiz-sidebar {
position: absolute;
inset: 0 auto 0 0;
width: 280px;
max-width: 85vw;
transform: translateX(-100%);
transition: transform var(--transition-normal) ease;
z-index: 2;
box-shadow: 4px 0 16px rgba(0,0,0,0.18);
}
#wizardOverlay.wiz-sidebar-open .wiz-sidebar { transform: translateX(0); }
#wizardOverlay.wiz-sidebar-open .wiz-sidebar-backdrop { display: block; }
}
@media (min-width: 769px) {
/* On desktop the toggle is hidden — sidebar is always visible. */
.wiz-sidebar-toggle svg { display: none; }
.wiz-sidebar-toggle { border: none; padding: 0; pointer-events: none; }
}
/* --- Review screen ---------------------------------------------------- */
.wiz-review-section { margin-bottom: 18px; }
.wiz-review-section-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--teal);
font-weight: 700;
padding: 0 0 6px;
border-bottom: 2px solid var(--teal-soft, var(--bg));
margin-bottom: 8px;
}
.wiz-review-rows { display: flex; flex-direction: column; gap: 6px; }
.wiz-review-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.wiz-review-info { flex: 1; min-width: 0; }
.wiz-review-label { font-weight: 600; color: var(--navy); font-size: 13px; line-height: 1.35; }
.wiz-review-meta { font-size: 11px; color: var(--muted); margin-top: 2px; display: block; }
.wiz-review-action { flex-shrink: 0; }
/* --- Just-completed checkmark pulse ---------------------------------- */
.wiz-step.wiz-just-done,
.wiz-multi-item.wiz-just-done {
position: relative;
}
.wiz-step.wiz-just-done::after,
.wiz-multi-item.wiz-just-done::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at center, rgba(42,157,143,0.18) 0%, rgba(42,157,143,0) 60%);
animation: wizJustDoneFade 600ms ease-out forwards;
}
.wiz-step.wiz-just-done::before,
.wiz-multi-item.wiz-just-done::before {
content: '✓';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.5);
font-size: 64px;
font-weight: 800;
color: var(--teal);
pointer-events: none;
animation: wizJustDoneCheck 600ms ease-out forwards;
z-index: 1;
}
@keyframes wizJustDoneCheck {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
30% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes wizJustDoneFade {
0% { opacity: 0; }
30% { opacity: 1; }
100% { opacity: 0; }
}
.wiz-step-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
margin-bottom: 6px;
}
.wiz-step-title {
font-family: var(--font-display);
font-size: 17px;
color: var(--navy);
margin: 0;
font-weight: 700;
}
.wiz-step-desc {
color: var(--muted);
font-size: 13px;
line-height: 1.55;
margin: 0 0 12px;
}
.wiz-expiry {
font-size: 11px;
color: var(--muted);
margin-bottom: 12px;
font-style: italic;
}
.wiz-step-action {
margin-top: 14px;
}
.wiz-status {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
padding: 3px 8px;
border-radius: var(--radius-sm);
flex-shrink: 0;
align-self: flex-start;
}
.wiz-status-done { background: #d4f4e8; color: #0a5f3a; }
.wiz-status-na { background: #e3e8f0; color: #6b778c; }
.wiz-status-pending { background: var(--gold-soft); color: var(--gold-deep); }
.wiz-already-done {
background: #f1f8f4;
border-left: 3px solid #0a5f3a;
padding: 10px 12px;
border-radius: var(--radius-sm);
font-size: 13px;
color: #0a5f3a;
margin: 0 0 10px;
}
.wiz-admin-note {
background: var(--bg);
border-left: 3px solid var(--teal);
padding: 10px 12px;
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--ink);
margin: 0;
}
.wiz-ack-blurb {
background: var(--bg);
border-left: 3px solid var(--gold);
padding: 10px 12px;
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--ink);
margin: 0 0 12px;
line-height: 1.5;
}
.wiz-draft-badge {
background: var(--gold-soft);
border: 1px solid var(--gold);
color: #6b5418;
padding: 8px 12px;
border-radius: var(--radius-sm);
font-size: 12px;
margin-bottom: 12px;
line-height: 1.4;
}
.wiz-step-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-top: 8px;
}
/* Grouped step (Wave 5D follow-up) — multiple items rendered inside a
single wizard step. Currently used for the 4 NDIS Commission modules. */
.wiz-multi-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.wiz-multi-item {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 14px 16px;
background: #fff;
}
.wiz-multi-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
}
.wiz-multi-label {
font-weight: 700;
color: var(--navy);
font-size: 14px;
line-height: 1.4;
}
.wiz-multi-desc {
font-size: 12px;
color: var(--muted);
margin-top: 2px;
line-height: 1.45;
}
.wiz-multi-done {
background: #f1f8f4;
border-left: 3px solid #0a5f3a;
padding: 6px 10px;
border-radius: var(--radius-sm);
font-size: 12px;
color: #0a5f3a;
margin: 0 0 10px;
}
.wiz-multi-item .wiz-field { margin-bottom: 10px; }
.wiz-multi-item .wiz-step-buttons { margin-top: 4px; }
/* NDIS Commission "Start this module" CTA on each module card. Styled as a
tinted info row (not a button) so it doesn't compete with the primary
Upload action — staff click the link to take the course, then come back
and upload their certificate. */
.wiz-multi-start {
background: #eef6f6;
border-left: 3px solid var(--teal);
padding: 8px 12px;
border-radius: var(--radius-sm);
font-size: 12px;
margin: 0 0 10px;
line-height: 1.45;
}
.wiz-multi-start a {
color: var(--teal);
font-weight: 600;
text-decoration: none;
}
.wiz-multi-start a:hover { text-decoration: underline; }
/* -------------------------------------------------------------------------
* Welcome step (Wave 15) — virtual first step that opens the wizard with a
* Trident Care orientation card before the document collection begins.
* Pure read-only content; no signature, no upload, doesn't count toward
* percent_complete. Sidebar entry sits above the first section.
* ----------------------------------------------------------------------- */
/* On the welcome screen, hide the sidebar so the welcome card centers in
the FULL modal width. The sidebar reappears the moment the user hits
"Let's get started" and lands on a real step. Selector hooks off a body
class set by renderWelcomeStep so we only suppress on welcome, not on
the other virtual sentinels. */
#wizardOverlay.wiz-welcome-active .wiz-sidebar { display: none; }
#wizardOverlay.wiz-welcome-active .wiz-sidebar-toggle { display: none; }
.wiz-welcome { padding-top: 4px; }
/* Constrain the welcome content to a comfortable reading width and center it
in the body pane. The wizard body itself doesn't constrain width (it has
to host wide tables on later steps), so we cap it locally. */
.wiz-welcome-inner {
max-width: 720px;
margin: 0 auto;
}
/* Hero is now a clean cream card with a gold accent rail + navy title.
The previous navy-gradient hero made the white title hard to read on
some monitors / outdoor light. Cream + navy text is bombproof for
contrast. */
.wiz-welcome-hero {
background: #fbf6ec;
border: 1px solid var(--border);
border-left: 4px solid var(--gold);
color: var(--ink);
border-radius: var(--radius-md);
padding: 22px 22px 20px;
margin: 0 0 18px;
}
.wiz-welcome-eyebrow {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--gold-deep);
font-weight: 700;
margin-bottom: 6px;
}
/* Specificity-bumped: .modal h3 (0,1,1) was beating .wiz-welcome-title (0,1,0)
and forcing the hero title to render in --navy on a navy background. */
.wiz-welcome-hero .wiz-welcome-title {
font-size: 22px;
line-height: 1.25;
margin: 0 0 10px;
font-weight: 700;
color: var(--navy);
}
.wiz-welcome-lede {
font-size: 13.5px;
line-height: 1.55;
margin: 0;
color: var(--ink);
}
.wiz-welcome-section { margin: 0 0 20px; }
.wiz-welcome-section-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
font-weight: 700;
margin: 0 0 10px;
}
.wiz-welcome-body {
font-size: 13px;
line-height: 1.5;
color: var(--ink);
margin: 0;
}
.wiz-welcome-fineprint {
font-size: 11px;
line-height: 1.45;
color: var(--muted);
margin: 10px 0 0;
}
.wiz-welcome-values {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.wiz-welcome-value {
background: var(--bg);
border: 1px solid var(--border);
border-left: 3px solid var(--gold);
border-radius: var(--radius-sm);
padding: 10px 12px;
}
.wiz-welcome-value-title {
font-size: 12.5px;
font-weight: 700;
color: var(--navy);
margin-bottom: 3px;
}
.wiz-welcome-value-summary {
font-size: 11.5px;
line-height: 1.4;
color: var(--ink);
}
.wiz-welcome-checklist {
margin: 0;
padding: 0 0 0 18px;
font-size: 13px;
line-height: 1.55;
color: var(--ink);
}
.wiz-welcome-checklist li { margin-bottom: 4px; }
.wiz-welcome-contact {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 14px 16px;
}
.wiz-welcome-contact .wiz-welcome-section-title { margin-bottom: 12px; }
/* Single-column stack on every viewport: on-call card on top, email
beneath. The earlier side-by-side / pinned-right layouts felt awkward
because the on-call card is multi-row while email is a single line —
they didn't share a baseline. Stacked, the email reads as a fallback
contact below the live roster, which matches the mental model. */
.wiz-welcome-contact-grid {
display: flex;
flex-direction: column;
gap: 14px;
}
.wiz-welcome-contact-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
font-weight: 700;
margin-bottom: 3px;
}
.wiz-welcome-contact-value {
font-size: 12.5px;
line-height: 1.45;
color: var(--ink);
font-weight: 500;
}
.wiz-welcome-contact-value a {
color: var(--teal);
text-decoration: none;
font-weight: 600;
}
.wiz-welcome-contact-value a:hover { text-decoration: underline; }
.wiz-welcome-contact-muted {
color: var(--muted);
font-style: italic;
font-weight: 500;
}
/* On-call row: tag chip + name + tap-to-call phone in a single line per
primary/secondary entry. Stacks on mobile. */
.wiz-welcome-oncall-row {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: baseline;
padding: 4px 0;
}
.wiz-welcome-oncall-row + .wiz-welcome-oncall-row {
border-top: 1px dashed var(--border);
margin-top: 4px;
padding-top: 8px;
}
.wiz-welcome-oncall-tag {
display: inline-block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
background: var(--gold-soft);
color: var(--gold-deep);
padding: 2px 6px;
border-radius: 3px;
}
.wiz-welcome-oncall-name {
font-size: 12.5px;
font-weight: 600;
color: var(--navy);
min-width: 0;
word-break: break-word;
}
.wiz-welcome-oncall-phone a {
font-size: 12.5px;
font-weight: 700;
color: var(--teal);
text-decoration: none;
}
.wiz-welcome-oncall-phone a:hover { text-decoration: underline; }
/* Sidebar entry for the welcome step. Sits above the first section,
mirrors the review entry's "special" treatment so the user can always
jump back. */
.wiz-sidebar-section-welcome {
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.wiz-sidebar-row-welcome { font-weight: 600; }
.wiz-sidebar-icon-welcome { background: var(--gold); color: var(--navy); }
@media (max-width: 768px) {
.wiz-welcome-values { grid-template-columns: 1fr; }
.wiz-welcome-hero { padding: 18px; }
.wiz-welcome-hero .wiz-welcome-title { font-size: 19px; }
/* Contact card already stacks on every viewport — just tighten the gap
slightly on mobile so the section doesn't grow too tall. */
.wiz-welcome-contact-grid { gap: 12px; }
.wiz-welcome-oncall-row {
grid-template-columns: 1fr;
gap: 2px;
}
.wiz-welcome-oncall-row + .wiz-welcome-oncall-row {
margin-top: 8px;
padding-top: 10px;
}
}
/* -------------------------------------------------------------------------
* Pay & SCHADS award step (Wave 15a) — dynamic acknowledgement step that
* fetches my_pay_summary() and renders a plain-English breakdown of the
* staffer's pay deal. Card stack inside the normal wizard body pane.
* ----------------------------------------------------------------------- */
.wiz-pay-loading {
padding: 24px 0;
text-align: center;
color: var(--muted);
font-size: 13px;
}
.wiz-pay-hero {
background: var(--navy);
color: #fff;
border-radius: var(--radius-md);
padding: 18px 20px;
margin: 14px 0 18px;
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
gap: 20px;
align-items: stretch;
}
.wiz-pay-hero-eyebrow {
grid-column: 1 / -1;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--gold);
font-weight: 700;
margin-bottom: 4px;
}
.wiz-pay-hero-banner {
font-size: 13.5px;
line-height: 1.55;
color: rgba(255,255,255,0.95);
align-self: center;
}
.wiz-pay-hero-banner strong { color: #fff; }
.wiz-pay-hero-rate {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius-sm);
padding: 12px 14px;
text-align: center;
}
.wiz-pay-hero-rate-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
color: var(--gold);
margin-bottom: 4px;
}
.wiz-pay-hero-rate-value {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
line-height: 1.1;
color: #fff;
}
.wiz-pay-hero-rate-unit {
font-size: 14px;
font-weight: 600;
color: rgba(255,255,255,0.7);
margin-left: 2px;
}
.wiz-pay-hero-rate-foot {
font-size: 11px;
line-height: 1.4;
color: rgba(255,255,255,0.78);
margin-top: 8px;
}
.wiz-pay-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 14px 16px;
margin-bottom: 12px;
}
.wiz-pay-card-info {
background: #eef6f6;
border-color: #cfe2e3;
border-left: 3px solid var(--teal);
}
.wiz-pay-card-loading {
background: #fbf6ec;
border-color: var(--border);
border-left: 3px solid var(--gold);
}
.wiz-pay-card-rights {
background: #fff;
border-left: 3px solid var(--navy);
}
.wiz-pay-card-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
color: var(--navy);
margin-bottom: 8px;
}
.wiz-pay-card-body {
font-size: 13px;
line-height: 1.5;
color: var(--ink);
margin: 0 0 8px;
}
.wiz-pay-list {
margin: 4px 0 0;
padding-left: 18px;
font-size: 13px;
line-height: 1.5;
color: var(--ink);
}
.wiz-pay-list li { margin-bottom: 4px; }
.wiz-pay-loading-math {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
color: var(--ink);
margin-top: 8px;
padding: 8px 10px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.wiz-pay-math-op { color: var(--muted); font-weight: 600; }
.wiz-pay-math-result {
font-weight: 700;
color: var(--gold-deep);
margin-left: auto;
}
.wiz-pay-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
margin-top: 4px;
}
.wiz-pay-table th,
.wiz-pay-table td {
padding: 8px 10px;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: top;
}
.wiz-pay-table th {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
color: var(--muted);
background: #fff;
}
.wiz-pay-table tbody tr:last-child td { border-bottom: none; }
.wiz-pay-num { text-align: right; white-space: nowrap; }
.wiz-pay-allow-label { font-weight: 600; color: var(--navy); }
.wiz-pay-allow-note {
font-size: 11px;
color: var(--muted);
margin-top: 2px;
line-height: 1.4;
}
.wiz-pay-override {
font-size: 11px;
color: var(--gold-deep);
margin-top: 4px;
padding: 4px 8px;
background: var(--gold-soft);
border-radius: 3px;
line-height: 1.4;
}
.wiz-pay-override-note { color: var(--muted); font-weight: 500; }
/* -------------------------------------------------------------------------
* WHS safety induction quiz (Wave 15b)
* ----------------------------------------------------------------------- */
.wiz-whs-topics {
margin: 6px 0 0;
padding-left: 20px;
font-size: 13px;
line-height: 1.55;
color: var(--ink);
columns: 2;
column-gap: 20px;
}
.wiz-whs-topics li { margin-bottom: 4px; break-inside: avoid; }
@media (max-width: 768px) { .wiz-whs-topics { columns: 1; } }
.wiz-whs-history { margin: 14px 0 10px; }
.wiz-whs-history-list {
list-style: none;
margin: 0;
padding: 0;
font-size: 12.5px;
line-height: 1.6;
color: var(--ink);
}
.wiz-whs-history-list li {
padding: 6px 10px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: 4px;
}
.wiz-whs-pass { color: #0a5f3a; font-weight: 700; }
.wiz-whs-fail { color: var(--gold-deep); font-weight: 700; }
.wiz-whs-progress { margin: 12px 0 16px; }
.wiz-whs-progress-bar {
height: 6px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
}
.wiz-whs-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 100%);
transition: width 200ms ease-out;
}
.wiz-whs-progress-meta {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
color: var(--muted);
margin-top: 6px;
}
.wiz-whs-question { margin: 8px 0; }
.wiz-whs-question-text {
font-size: 15px;
line-height: 1.5;
color: var(--ink);
font-weight: 600;
margin: 0 0 14px;
}
.wiz-whs-options {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 14px;
}
.wiz-whs-option {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 10px;
align-items: start;
padding: 10px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 13px;
line-height: 1.45;
color: var(--ink);
transition: background 120ms, border-color 120ms;
}
.wiz-whs-option:hover:not(.wiz-whs-option-locked) {
background: #fff;
border-color: var(--gold);
}
.wiz-whs-option input { margin-top: 3px; cursor: pointer; }
.wiz-whs-option-letter {
font-size: 11px;
font-weight: 700;
color: var(--muted);
background: #fff;
border: 1px solid var(--border);
width: 22px;
text-align: center;
border-radius: 3px;
padding: 2px 0;
line-height: 1.2;
}
.wiz-whs-option-chosen {
background: #fff;
border-color: var(--gold);
box-shadow: 0 0 0 1px var(--gold) inset;
}
.wiz-whs-option-locked { cursor: default; }
.wiz-whs-option-correct {
background: #ecf9f1;
border-color: #69c08a;
}
.wiz-whs-option-correct .wiz-whs-option-letter {
background: #69c08a;
color: #fff;
border-color: #69c08a;
}
.wiz-whs-option-wrong {
background: #fbeceb;
border-color: #d96a64;
}
.wiz-whs-option-wrong .wiz-whs-option-letter {
background: #d96a64;
color: #fff;
border-color: #d96a64;
}
.wiz-whs-feedback {
margin: 6px 0 0;
padding: 12px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
line-height: 1.5;
}
.wiz-whs-feedback-correct {
background: #ecf9f1;
border-left: 3px solid #2f8f5d;
color: #0a5f3a;
}
.wiz-whs-feedback-wrong {
background: #fbeceb;
border-left: 3px solid #b04a44;
color: #6b2a26;
}
.wiz-whs-feedback-head { font-weight: 700; margin-bottom: 4px; }
.wiz-whs-feedback-body { color: var(--ink); }
.wiz-whs-feedback-ref {
margin-top: 6px;
font-size: 11px;
color: var(--muted);
font-style: italic;
}
.wiz-whs-scorecard {
background: var(--navy);
color: #fff;
border-radius: var(--radius-md);
padding: 22px 24px;
margin: 14px 0 18px;
text-align: center;
}
.wiz-whs-scorecard-pass {
background: linear-gradient(135deg, #0a5f3a 0%, #2f8f5d 100%);
}
.wiz-whs-scorecard-fail {
background: linear-gradient(135deg, #8b6914 0%, #b88c1c 100%);
}
.wiz-whs-score {
font-family: var(--font-display);
font-size: 56px;
font-weight: 700;
line-height: 1;
color: #fff;
}
.wiz-whs-score-total {
font-size: 26px;
color: rgba(255,255,255,0.6);
font-weight: 600;
}
.wiz-whs-score-meta {
font-size: 12px;
color: rgba(255,255,255,0.85);
margin-top: 8px;
}
.wiz-whs-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* My Profile pay card — ack-pending caption (no signed PDF link yet). */
.profile-pay-ack-pending {
font-size: 11.5px;
color: var(--muted);
font-style: italic;
}
/* Collapsible My Pay card — the is the always-visible header row;
the SCHADS breakdown below it stays hidden until the staffer expands it
(the card renders collapsed by default). Styled to match the title weight
of a normal .card-header while carrying the native disclosure triangle. */
.pay-profile-card > summary,
.profile-pay-summary {
cursor: pointer;
font-family: var(--font-display);
font-weight: 600;
font-size: 15px;
color: var(--navy);
letter-spacing: 0.01em;
padding: 4px 0;
}
.profile-pay-summary:hover { color: var(--teal); }
/* Ack control (signed-PDF button / "not yet acknowledged" hint) sits just
under the summary once expanded — it used to live in the card header. */
.profile-pay-actions {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
margin: 10px 0 16px;
}
/* "Example only" banner rendered above the pay breakdown when there's no
signed contract yet. Amber so it reads as a "heads-up" without competing
with the data underneath. */
.wiz-pay-example-banner {
background: #fff6d8;
border: 1px solid #e8d27a;
border-left: 3px solid #b88a14;
border-radius: var(--radius-sm);
padding: 10px 14px;
margin: 8px 0 16px;
font-size: 12.5px;
line-height: 1.5;
color: #5b4708;
}
.wiz-pay-example-banner strong { color: #3d2f04; }
.wiz-pay-sign {
margin-top: 18px;
padding: 16px;
background: #fff;
border: 2px solid var(--gold);
border-radius: var(--radius-md);
}
.wiz-pay-sign-blurb {
font-size: 13px;
line-height: 1.5;
color: var(--ink);
margin-bottom: 12px;
}
@media (max-width: 768px) {
.wiz-pay-hero { grid-template-columns: 1fr; padding: 16px; gap: 12px; }
.wiz-pay-hero-rate-value { font-size: 24px; }
.wiz-pay-table { font-size: 12px; }
.wiz-pay-table th, .wiz-pay-table td { padding: 6px 8px; }
}
.wiz-field {
margin-bottom: 12px;
}
.wiz-hint {
font-size: 11px;
color: var(--muted);
margin-top: 4px;
line-height: 1.4;
}
.wiz-optional {
color: var(--muted);
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.wiz-msg {
font-size: 12px;
margin-top: 10px;
min-height: 16px;
font-weight: 600;
}
/* =========================================================================
* Wizard polish (Wave 15 polish pass) — consistency, file inputs, success
* states, collapsible replace, focus states. Moderate refinement: same
* visual identity, more finished feel.
* ========================================================================= */
/* Cap step content to a comfortable reading measure and centre it so wide
screens don't stretch single-column text/cards edge to edge. The rich
steps (welcome / pay / WHS / review) keep their own inner widths. */
.wiz-step { max-width: 720px; margin-left: auto; margin-right: auto; }
.wiz-step.wiz-welcome,
.wiz-step.wiz-pay,
.wiz-step.wiz-whs,
.wiz-step.wiz-review { max-width: none; }
/* Success "already done" state — now a proper card with a check medallion
so a completed item reads as an accomplishment, not a flat line of text.
Shared by uploads, forms, acks, contracts. */
.wiz-already-done {
display: flex;
align-items: flex-start;
gap: 10px;
background: #f1f8f4;
border: 1px solid #cde9da;
border-left: 3px solid #0a5f3a;
padding: 12px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
line-height: 1.45;
color: #0a5f3a;
margin: 0 0 12px;
}
.wiz-already-done::before {
content: "";
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 1px;
border-radius: 50%;
background: #0a5f3a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}
/* Styled native file input — the browser default "Choose File / no file
chosen" looked unfinished next to the rest of the wizard. Box it and turn
the picker button into a proper secondary button. */
#wizardOverlay input[type="file"] {
display: block;
width: 100%;
font-size: 12.5px;
color: var(--ink);
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 7px 10px;
cursor: pointer;
}
#wizardOverlay input[type="file"]::file-selector-button {
font: inherit;
font-weight: 600;
font-size: 12px;
color: var(--navy);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 5px 12px;
margin-right: 12px;
cursor: pointer;
transition: background 120ms, border-color 120ms;
}
#wizardOverlay input[type="file"]::-webkit-file-upload-button {
font: inherit;
font-weight: 600;
font-size: 12px;
color: var(--navy);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 5px 12px;
margin-right: 12px;
cursor: pointer;
}
#wizardOverlay input[type="file"]:hover::file-selector-button { background: #fff; border-color: var(--gold); }
#wizardOverlay input[type="file"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
/* Collapsible "Replace file" — a done upload tucks its file picker behind a
disclosure so the done state stays clean, and the picker is actually there
when the staffer wants to swap the file (previously the single-upload
replace had no input at all). */
.wiz-replace { margin: 0 0 6px; }
.wiz-replace > summary {
display: inline-flex;
align-items: center;
gap: 6px;
list-style: none;
cursor: pointer;
font-size: 12px;
font-weight: 600;
color: var(--teal);
padding: 4px 0;
user-select: none;
width: fit-content;
}
.wiz-replace > summary::-webkit-details-marker { display: none; }
.wiz-replace > summary::before {
content: "+";
font-weight: 700;
font-size: 13px;
line-height: 1;
}
.wiz-replace[open] > summary::before { content: "\2212"; } /* minus */
.wiz-replace > summary:hover { text-decoration: underline; }
.wiz-replace-body { padding-top: 8px; }
/* Keyboard-focus visibility across the wizard's interactive bits (a11y). */
#wizardOverlay .btn:focus-visible,
#wizardOverlay [data-wiz-action]:focus-visible,
#wizardOverlay [data-sd-action]:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 2px;
}
.wiz-footer {
padding: 14px 24px;
border-top: 1px solid var(--border);
background: var(--bg);
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.wiz-footer-left,
.wiz-footer-right {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
/* iOS date input contrast fix (matches existing .sf-* / .sd-* modals). */
#wizardOverlay input[type="date"] {
-webkit-appearance: none;
appearance: none;
background: #fff;
color: var(--ink);
}
#wizardOverlay input[type="date"]::-webkit-date-and-time-value {
text-align: left;
color: var(--ink);
}
/* When the wizard is open, the mobile bottom nav and FAB shouldn't poke
through. Mirror the existing rules for #onboardingOverlay.active. */
body.wizard-open .mobile-bottom-nav,
body.wizard-open .mobile-fab {
display: none !important;
}
@media (max-width: 768px) {
.wiz-overlay { padding: 0; }
.wiz-overlay > .wiz-modal {
max-width: 100% !important;
max-height: 100dvh;
border-radius: 0;
height: 100dvh;
}
.wiz-header { padding: 16px 18px 12px; }
.wiz-body { padding: 16px 18px; }
.wiz-footer { padding: 12px 18px; }
.wiz-title { font-size: 18px; }
.wiz-step-title { font-size: 16px; }
.wiz-footer-left,
.wiz-footer-right { width: 100%; justify-content: space-between; }
.wiz-footer-right { order: -1; }
/* Comfortable touch targets + full-width primary actions on phones. */
.wiz-step-buttons .btn { min-height: 44px; }
.wiz-step-buttons .btn-primary { flex: 1 1 100%; }
#wizardOverlay input[type="file"] { padding: 9px 10px; }
}
/* -------------------------------------------------------------------------
* User Management — 4-section list (Wave 5D follow-up)
* Imported (staged from CSV) / Pending / Active / Inactive collapsed.
* Each section is rendered into its own inside the existing
* .users-table; section headers are full-width `` rows.
* ----------------------------------------------------------------------- */
.users-table .um-section-row td {
background: var(--bg);
border-top: 2px solid var(--border);
padding: 14px 12px 10px;
}
.users-table tbody:first-of-type .um-section-row td { border-top: none; }
.um-section-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
}
.um-section-titlebar { flex: 1; min-width: 0; }
.um-section-title {
font-family: var(--font-display);
font-size: 16px;
color: var(--navy);
font-weight: 700;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.um-section-count {
font-size: 11px;
font-weight: 700;
color: var(--muted);
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2px 10px;
}
.um-section-sub {
font-size: 12px;
color: var(--muted);
margin: 4px 0 0;
}
.um-section-tools {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
font-size: 12px;
color: var(--ink);
}
.um-tools-checkbox {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
.um-tools-checkbox input { width: auto; margin: 0; }
.um-collapse-toggle {
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
color: var(--ink);
cursor: pointer;
}
.um-collapse-toggle:hover { background: #fff; }
/* Imported rows are visibly less prominent — muted text, dashed border,
smaller font for meta. */
.user-row-imported td {
background: rgba(0, 0, 0, 0.015);
color: var(--muted);
}
.user-row-imported td .doc-name { color: var(--ink); font-weight: 600; }
.user-row-imported td .badge { font-size: 10px; }
.badge-imported {
display: inline-block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
background: var(--border);
color: var(--muted);
padding: 2px 8px;
border-radius: var(--radius-sm);
}
/* Bulk Invite (CSV) modal — 3-stage flow */
/* #bulkInviteModal sizing now via .modal-lg class on the modal element. */
.bi-summary {
background: var(--bg);
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--ink);
margin-bottom: 14px;
border-left: 3px solid var(--teal);
}
.bi-preview-rows {
max-height: 360px;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: #fff;
}
.bi-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
}
.bi-row:last-child { border-bottom: none; }
.bi-row-invalid { background: #fff5f5; }
.bi-row-icon {
width: 22px; height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
}
.bi-row-ok { background: #d4f4e8; color: #0a5f3a; }
.bi-row-err { background: #ffd6d6; color: #a01818; }
.bi-row-main { flex: 1; min-width: 0; }
.bi-row-name { font-size: 13px; font-weight: 600; color: var(--navy); }
.bi-row-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.bi-row-errors { font-size: 12px; color: var(--danger); margin-top: 4px; line-height: 1.4; }
.bi-row-rowidx { font-size: 10px; color: var(--muted); font-family: monospace; align-self: center; flex-shrink: 0; }
.bi-result-summary {
font-size: 14px;
margin-bottom: 12px;
padding: 10px 14px;
border-radius: var(--radius-sm);
background: var(--bg);
border-left: 3px solid var(--success);
}
.bi-result-fail {
font-size: 14px;
padding: 10px 14px;
border-radius: var(--radius-sm);
background: #fff5f5;
border-left: 3px solid var(--danger);
color: var(--danger);
}
.bi-result-errors {
max-height: 240px;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.bi-result-errors-title {
padding: 8px 14px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
color: var(--muted);
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.bi-result-err-row {
padding: 8px 14px;
font-size: 12px;
border-bottom: 1px solid var(--border);
line-height: 1.45;
}
.bi-result-err-row:last-child { border-bottom: none; }
/* -------------------------------------------------------------------------
* Print stylesheet — Trident-branded paper output.
*
* Triggered by adding `body.print-mode` + `body.print-scope-profile` (My
* Profile) or `body.print-scope-userdetail` (admin viewing a staffer).
* The relevant screen/modal stays visible; everything else is hidden.
* ----------------------------------------------------------------------- */
@media print {
@page {
margin: 14mm 14mm 18mm;
color-scheme: light;
}
html, body {
background: #fff !important;
color: #1a2540 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* Hide chrome that never makes sense on paper. */
body.print-mode .sidebar,
body.print-mode .mobile-topbar,
body.print-mode .mobile-bottom-nav,
body.print-mode .mobile-fab,
body.print-mode #globalSearchBar,
body.print-mode .toast-container,
body.print-mode .wiz-overlay,
body.print-mode .modal-overlay:not(#userDetailModal),
body.print-mode .skip-link,
body.print-mode [data-action="signOut"],
body.print-mode [data-action="open-settings"],
body.print-mode #profileToolbar,
body.print-mode #profileResumeWizard,
body.print-mode .sd-row-actions,
body.print-mode .userdetail-tabs,
body.print-mode [data-userdetail-panel="profile"],
body.print-mode [data-bind="userdetail.actions"],
body.print-mode .modal-close,
body.print-mode #userDetailModal button {
display: none !important;
}
/* Profile screen takes the full page. */
body.print-mode.print-scope-profile .screen:not(#profile),
body.print-mode.print-scope-userdetail .screen { display: none !important; }
body.print-mode #profile.screen,
body.print-mode #profile .app,
body.print-mode #profile .main {
display: block !important;
padding: 0 !important;
background: #fff !important;
box-shadow: none !important;
}
/* User-detail modal is repurposed as a printable page when scope=userdetail. */
body.print-mode.print-scope-userdetail #userDetailModal {
position: static !important;
background: transparent !important;
display: block !important;
z-index: auto !important;
}
body.print-mode.print-scope-userdetail #userDetailModal > .modal {
box-shadow: none !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* Trident-branded header inserted via ::before on body. Navy bg + gold
underline matches the form-generated PDFs + staff-profile.html. */
body.print-mode::before {
content: 'TRIDENT CARE\\A NDIS Disability Support Services';
white-space: pre;
display: block;
background: #0b2545 !important;
color: #ffffff !important;
border-bottom: 5px solid #c9a55a !important;
padding: 18px 22px;
margin: 0 0 18px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.07em;
line-height: 1.4;
}
body.print-mode::after {
content: 'Trident Care · Confidential · Printed for the named staff member';
display: block;
margin-top: 24px;
padding-top: 10px;
border-top: 1px solid #c9a55a;
font-size: 10px;
color: #6b778c;
text-align: center;
}
/* Cards lay flat — no shadows, hard borders only. */
body.print-mode .card {
box-shadow: none !important;
border: 1px solid #d8d8de !important;
page-break-inside: avoid;
}
body.print-mode .card-header { border-bottom: 1px solid #d8d8de !important; }
/* Status badges: print as outlined chips (no background colour). */
body.print-mode .sd-badge,
body.print-mode .badge,
body.print-mode .role-tag {
background: transparent !important;
color: #1a2540 !important;
border: 1px solid #d8d8de !important;
}
/* Per-row breaks so sections don't split awkwardly. */
body.print-mode .sd-section,
body.print-mode .sd-row { page-break-inside: avoid; }
body.print-mode .sd-section-title {
border-top: 2px solid #c9a55a !important;
padding-top: 8px;
margin-top: 14px;
}
/* Links: show URL after the text on print. Skipped for inline icon links. */
body.print-mode a[href^="http"]::after {
content: ' (' attr(href) ')';
font-size: 10px;
color: #6b778c;
}
}
/* ---------------------------------------------------------------------------
* Wave 5E — Online contracts + pigeonhole inbox
* ------------------------------------------------------------------------ */
/* Send Contract modal: two-column layout (form left, live preview right). */
.ct-send-body {
display: grid;
grid-template-columns: minmax(280px, 360px) 1fr;
gap: 18px;
padding: 4px 0;
max-height: 70vh;
overflow: hidden;
}
.ct-send-form {
overflow-y: auto;
max-height: 70vh;
padding-right: 6px;
}
.ct-send-preview {
overflow-y: auto;
max-height: 70vh;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px 24px;
}
.ct-preview-empty {
color: var(--muted);
font-size: 13px;
text-align: center;
padding: 48px 16px;
}
.ct-send-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.ct-vars .field { margin-bottom: 10px; }
@media (max-width: 768px) {
.ct-send-body {
grid-template-columns: 1fr;
max-height: 80vh;
}
.ct-send-form, .ct-send-preview { max-height: 35vh; }
}
/* Review modal: contract body scrolls inside the modal so we can detect
scroll-to-bottom and only enable the Sign button once they've reached it. */
.ct-review-modal { padding: 0; }
.ct-review-modal .modal-header {
border-bottom: 1px solid var(--border);
}
.ct-review-body {
flex: 1;
overflow-y: auto;
padding: 24px 32px;
background: #fff;
}
.ct-review-footer {
border-top: 1px solid var(--border);
padding: 16px 24px;
background: var(--bg);
}
.ct-review-sig {
border: 1px dashed var(--border);
border-radius: var(--radius-md);
padding: 12px;
background: #fff;
margin-bottom: 12px;
}
.ct-sig-label {
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
}
.ct-review-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
/* Countersign modal */
.ct-countersign-modal .ct-cs-body { padding: 4px 0; }
.ct-cs-summary {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 14px;
}
/* The contract document itself — used in both the live preview pane and the
staff review modal. Optimised for readability + close visual match to the
PDF the system will eventually generate. */
.ct-doc {
font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
color: var(--ink);
font-size: 13px;
line-height: 1.55;
}
.ct-doc .ct-header {
background: var(--navy);
color: #fff;
padding: 18px 24px;
border-top: 4px solid var(--gold);
margin: -20px -24px 20px;
border-radius: 6px 6px 0 0;
}
.ct-doc .ct-header h1 {
font-family: var(--font-display, 'Outfit', sans-serif);
font-size: 16px;
letter-spacing: 0.18em;
text-transform: uppercase;
margin: 0 0 6px;
color: var(--gold);
font-weight: 600;
}
.ct-doc .ct-header h2 {
font-family: var(--font-display, 'Outfit', sans-serif);
font-size: 22px;
margin: 0;
color: #fff;
font-weight: 600;
}
.ct-doc h3 {
font-family: var(--font-display, 'Outfit', sans-serif);
color: var(--navy);
font-size: 16px;
font-weight: 700;
margin: 20px 0 10px;
border-bottom: 1px solid var(--gold);
padding-bottom: 4px;
}
.ct-doc h4 {
color: var(--navy);
font-size: 13px;
font-weight: 700;
margin: 14px 0 6px;
}
.ct-doc p {
margin: 0 0 10px;
}
.ct-doc ul, .ct-doc ol {
margin: 0 0 12px;
padding-left: 26px;
}
.ct-doc li {
margin-bottom: 4px;
}
.ct-doc table {
width: 100%;
border-collapse: collapse;
margin: 8px 0 16px;
font-size: 12px;
}
.ct-doc table th,
.ct-doc table td {
border: 1px solid var(--border);
padding: 6px 10px;
vertical-align: top;
text-align: left;
}
.ct-doc table th {
background: #f7f9fc;
color: var(--navy);
font-weight: 600;
width: 35%;
}
.ct-doc .ct-parties table,
.ct-doc .ct-schedule table {
margin-top: 0;
}
.ct-doc .ct-intro p {
font-size: 12px;
color: var(--muted);
font-style: italic;
}
/* In-document signature block (staff review modal) */
.ct-doc .ct-signature-block {
margin-top: 24px;
padding-top: 16px;
border-top: 2px solid var(--gold);
}
.ct-doc .ct-sig-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.ct-doc .ct-sig-cell {
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px;
background: #fafbfd;
}
.ct-doc .ct-sig-role {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-bottom: 6px;
}
.ct-doc .ct-sig-stamp {
font-size: 12px;
}
.ct-doc .ct-sig-stamp-empty {
color: var(--muted);
font-style: italic;
}
.ct-doc .ct-sig-name {
display: block;
font-weight: 600;
color: var(--navy);
}
.ct-doc .ct-sig-time {
display: block;
font-size: 11px;
color: var(--muted);
margin-top: 2px;
}
/* Print-friendly contract preview (admin clicks "Print" on a signed PDF — but
for now this is just so the in-portal preview prints cleanly if needed) */
@media print {
.ct-send-body { display: block; max-height: none; }
.ct-send-form { display: none; }
}
/* Wave 5F — Warning documents UI.
Severity pills (compact, used inline next to the warning label) +
row styling shared with .sd-row + response block styling. */
.wn-sev-pill {
display: inline-block;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
padding: 2px 7px;
border-radius: var(--radius-sm);
line-height: 1.4;
vertical-align: 1px;
color: #fff;
}
.wn-sev-pill.wn-sev-verbal { background: #6c7a8c; }
.wn-sev-pill.wn-sev-first { background: #c98a2a; }
.wn-sev-pill.wn-sev-final { background: #c44536; }
.wn-sev-pill.wn-sev-pip { background: var(--navy, #0f1e33); }
.wn-sev-pill.wn-sev-other { background: var(--muted, #6c7a8c); }
.wn-row .sd-row-label { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
/* Warning review modal — extends ct-review-modal but with a few warning-
specific tweaks (response block, refuse button positioning).
The footer holds signature + response + actions. When the optional
response opens, the footer's natural height grows beyond the
modal frame on smaller screens and the Acknowledge/Refuse buttons get
pushed off-screen. Cap the footer height + scroll its content, with the
actions sticky-pinned to the visible bottom so they're always reachable. */
.wn-review-modal .wn-review-footer {
padding: 14px 24px 0;
/* Keep the footer from being squeezed to zero by the flex body. Without
flex-shrink:0 the body's flex:1 grows to fill the modal and the footer
(with overflow:auto setting min-content to 0) shrinks to just its
padding — making the action buttons disappear. */
flex-shrink: 0;
/* Cap the footer's growth so the body still has room to scroll the
letter, and let the footer scroll its own overflow when the optional
response box is opened. */
max-height: 70vh;
overflow-y: auto;
}
.wn-review-actions {
display: flex;
gap: 8px;
justify-content: space-between;
align-items: center;
position: sticky;
bottom: 0;
background: var(--bg);
padding: 10px 0 14px;
margin-top: 10px;
/* Light top border so the sticky bar visually detaches from scrolled
content above (signature canvas + open response box). */
border-top: 1px solid var(--border);
z-index: 2;
}
.wn-review-actions .btn-ghost { color: var(--danger, #c44536); border-color: var(--danger, #c44536); }
.wn-review-actions .btn-ghost:hover { background: rgba(196, 69, 54, 0.06); }
.wn-response-block {
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 10px 12px;
margin: 10px 0;
background: #fff;
}
.wn-response-block > summary {
cursor: pointer;
font-weight: 600;
color: var(--navy);
font-size: 13px;
}
.wn-response-block textarea {
width: 100%;
font-family: inherit;
font-size: 13px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
/* Issue-warning modal field grid (incident date + review date side by side) */
.field-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 600px) {
.field-grid { grid-template-columns: 1fr; }
}
.wn-staff-display {
font-weight: 600;
color: var(--navy);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 8px 10px;
font-size: 13px;
}
/* Two-column issue modal — form on the left, live letter preview on the
right. Mirrors the contract Send-Contract modal layout. */
.wn-issue-body {
display: grid;
grid-template-columns: minmax(320px, 420px) 1fr;
gap: 18px;
padding: 4px 0;
max-height: 78vh;
overflow: hidden;
}
.wn-issue-form {
overflow-y: auto;
max-height: 78vh;
padding-right: 6px;
}
/* Keep all incident/improvement/consequence/notes textareas consistently
roomy so admins have space to type substantive content. The rows attr
gets us most of the way; this guarantees the floor across browsers. */
.wn-issue-form textarea {
min-height: 110px;
resize: vertical;
}
.wn-issue-preview {
overflow-y: auto;
max-height: 78vh;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px 24px;
}
.wn-preview-empty {
color: var(--muted);
font-size: 13px;
text-align: center;
padding: 48px 16px;
}
.wn-issue-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
@media (max-width: 768px) {
.wn-issue-body {
grid-template-columns: 1fr;
max-height: 82vh;
}
.wn-issue-form, .wn-issue-preview { max-height: 38vh; }
}
/* Letter-body niceties — used in both the issue preview and the staff
review modal. */
.wn-doc .wn-salutation p,
.wn-doc .wn-closing p {
margin-bottom: 6px;
}
.wn-doc .wn-salutation { margin-top: 4px; }
.wn-doc .wn-closing { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.wn-doc .wn-quoteblock {
margin: 8px 0 12px;
padding: 10px 14px;
background: #fff;
border-left: 3px solid var(--gold, #c8a96e);
font-size: 12.5px;
line-height: 1.6;
white-space: pre-wrap;
}
/* "This conduct constitutes a breach of:" — mid-section lead between two
blockquotes. Bumped up + bolded + navy so it visually separates the
incident description blockquote from the policy citations blockquote
instead of looking like a continuation paragraph. */
.wn-doc .wn-breach-lead {
margin: 18px 0 8px;
font-size: 15px;
font-weight: 600;
color: var(--navy, #0b2545);
}
/* Placeholder pills inline in the letter prose — show admins where each
form field lands. Updates to filled text the moment they type. */
.wn-doc .wn-placeholder {
display: inline;
background: rgba(201, 169, 110, 0.20);
border-bottom: 1px dashed var(--gold, #c8a96e);
color: #8a5a14;
font-family: var(--font-mono, 'Menlo', monospace);
font-size: 11px;
padding: 0 4px;
border-radius: var(--radius-sm);
font-style: italic;
}
/* Filed staff response on the rendered letter (review modal + PDF source) */
.wn-doc .wn-response-filed {
background: rgba(42, 125, 140, 0.05);
border: 1px solid rgba(42, 125, 140, 0.2);
border-radius: var(--radius-md);
padding: 12px 14px;
margin-top: 18px;
}
.wn-doc .wn-response-filed h3 {
margin-top: 0;
border-bottom: 0;
padding-bottom: 0;
}
/* Staff My Profile warnings card */
.wn-profile-card { padding: 14px 18px; }
.wn-profile-card > summary { padding: 4px 0; }
/* Templates & Libraries grouped section (admin User Management).
Houses Position Descriptions tile + Coming-Soon tiles + the inline
Contract Templates grid. */
.templates-libraries-card { padding: 18px 20px 20px; }
.templates-tile-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-top: 4px;
}
.templates-tile {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
text-align: left;
padding: 14px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: #fff;
font: inherit;
color: inherit;
cursor: pointer;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.templates-tile:hover:not(:disabled) {
border-color: var(--teal);
box-shadow: 0 2px 8px rgba(11, 37, 69, 0.06);
}
.templates-tile:active:not(:disabled) { transform: translateY(1px); }
.templates-tile-title {
font-family: var(--font-display, 'Outfit', sans-serif);
font-weight: 600;
font-size: 14px;
color: var(--navy);
line-height: 1.3;
}
.templates-tile-desc {
font-size: 12px;
color: var(--muted);
line-height: 1.5;
flex: 1;
}
.templates-tile-status {
font-size: 11px;
font-weight: 600;
color: var(--teal);
letter-spacing: 0.02em;
margin-top: 2px;
}
.templates-tile-disabled {
cursor: not-allowed;
opacity: 0.7;
background: var(--bg);
}
.templates-tile-status-soon {
color: var(--muted);
background: var(--border);
padding: 2px 8px;
border-radius: var(--radius-pill);
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.06em;
}
/* Contract Templates browser (admin screen). A small grid of cards
— one per active template — with Preview + Send-to-staff buttons. */
.contract-templates-card[open] { padding: 16px 20px 20px; }
.contract-templates-card > summary { padding: 4px 0; }
.ct-template-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
}
.ct-template-card {
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: #fff;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.ct-template-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
}
.ct-template-title {
font-family: var(--font-display, 'Outfit', sans-serif);
font-weight: 600;
font-size: 14px;
color: var(--navy);
line-height: 1.3;
}
.ct-template-sub {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
font-size: 11px;
}
.ct-template-version {
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.ct-type-pill {
display: inline-block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 8px;
border-radius: var(--radius-pill);
line-height: 1.4;
background: var(--bg);
color: var(--navy);
border: 1px solid var(--border);
}
.ct-type-pill.ct-type-pt { background: rgba(42, 125, 140, 0.12); color: var(--teal, #2a7d8c); border-color: transparent; }
.ct-type-pill.ct-type-ft { background: rgba(31, 139, 91, 0.12); color: #1f8b5b; border-color: transparent; }
.ct-type-pill.ct-type-cas { background: rgba(201, 138, 42, 0.14); color: #8a5a14; border-color: transparent; }
.ct-type-pill.ct-type-con { background: rgba(15, 30, 51, 0.10); color: var(--navy); border-color: transparent; }
.ct-type-pill.ct-type-cus { background: var(--bg); color: var(--muted); border-color: var(--border); }
.ct-template-stats {
display: flex;
gap: 14px;
font-size: 11px;
color: var(--muted);
}
.ct-template-stats strong {
color: var(--navy);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.ct-template-actions {
display: flex;
gap: 6px;
margin-top: auto;
}
.ct-template-actions .btn { flex: 1; }
/* Placeholder pills shown in template preview so admins can scan which
variables a contract will need filled in. */
.ct-placeholder-pill {
display: inline-block;
background: rgba(201, 169, 110, 0.22);
border: 1px dashed var(--gold, #c8a96e);
color: #8a5a14;
font-family: var(--font-mono, 'Menlo', monospace);
font-size: 11px;
padding: 1px 6px;
border-radius: var(--radius-sm);
letter-spacing: 0.02em;
white-space: nowrap;
}
/* Onboarding progress bar shown inline to the right of each user's name
in the User Management table. Small + unobtrusive so it doesn't fight
the table's existing density. Sits on the same line as the name to
keep rows tight. */
.user-name-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.user-progress {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--muted);
}
.user-progress-bar {
width: 90px;
height: 5px;
background: var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.user-progress-fill {
height: 100%;
transition: width var(--transition-normal) ease;
background: var(--teal, #2a7d8c);
}
.user-progress-fill.is-full {
/* Brand --success is aliased to teal, which is also the mid colour, so
100% complete wouldn't visually pop. Hardcode a green so the row reads
"done" at a glance. */
background: #1f8b5b;
}
.user-progress-fill.is-mid {
background: var(--teal, #2a7d8c);
}
.user-progress-fill.is-low {
background: #c98a2a;
}
.user-progress-text {
font-variant-numeric: tabular-nums;
min-width: 30px;
color: var(--muted);
}
.user-progress-migrated {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
color: var(--muted);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
padding: 2px 8px;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
/* ---------------------------------------------------------------------------
Service Agreements (Wave 12) — admin-side list inside clientDetailModal,
plus the build/preview/sign modals.
--------------------------------------------------------------------------- */
.ag-row {
display: grid;
/* Same shrinking rule as .sd-row — main column floors at 200px so the
title doesn't get squished into single-letter-per-line when the
actions column is wide. Actions column wraps inside its track. */
grid-template-columns: minmax(0, 1fr) auto minmax(0, max-content);
gap: 12px;
align-items: center;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: 6px;
}
.ag-row-main { min-width: 200px; overflow-wrap: anywhere; }
.ag-row-title { font-weight: 600; color: var(--navy); font-size: 13px; }
.ag-row-meta { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.ag-row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 768px) {
.ag-row { grid-template-columns: 1fr; }
.ag-row-status, .ag-row-actions { justify-self: start; }
}
/* Grouped sections in the per-client agreements list (Active / Signed / Past) */
.ag-list-section { margin-bottom: 14px; }
.ag-list-section:last-child { margin-bottom: 0; }
.ag-list-section-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
margin: 4px 0 6px;
display: flex;
align-items: center;
gap: 6px;
}
.ag-list-section-count {
background: var(--bg);
color: var(--muted);
padding: 1px 7px;
border-radius: 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
}
/* Branded footer on the rendered agreement (preview + PDF source) */
.ag-footer {
margin-top: 28px;
padding-top: 12px;
border-top: 1px solid #e3e8f0;
font-size: 10px;
color: var(--muted);
text-align: center;
line-height: 1.5;
}
/* Line-item editor inside the builder modal */
.ag-li-table { table-layout: auto; }
.ag-li-table th, .ag-li-table td { padding: 4px 4px; vertical-align: middle; }
.ag-li-table input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; width: 100%; box-sizing: border-box; min-width: 0; }
/* Builder split — draggable divider between editor (left) + preview (right).
Default 56% editor / 44% preview gives line items room to breathe but
keeps a meaningful preview visible. Admin can drag the divider to any
ratio; localStorage persists their choice. */
.ag-builder-editor { border-right: 1px solid var(--border); }
.ag-builder-divider {
flex: 0 0 6px;
background: var(--border);
cursor: col-resize;
position: relative;
user-select: none;
transition: background var(--transition-fast);
}
.ag-builder-divider:hover,
.ag-builder-divider.dragging { background: var(--teal); }
/* Visible grip dots in the middle of the divider */
.ag-builder-divider::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 2px;
height: 32px;
background: #fff;
box-shadow: 0 -8px 0 #fff, 0 8px 0 #fff;
border-radius: 1px;
opacity: 0.7;
pointer-events: none;
}
.ag-builder-divider:focus-visible { outline: 2px solid var(--teal); outline-offset: -1px; }
/* Mobile / narrow viewports — stack vertically, hide the divider, give
each pane half the viewport with independent scroll. */
@media (max-width: 960px) {
.ag-builder-split {
flex-direction: column !important;
}
.ag-builder-editor {
flex: 1 1 auto !important;
width: 100% !important;
max-height: 50vh;
border-right: 0;
border-bottom: 1px solid var(--border);
}
.ag-builder-divider { display: none; }
.ag-builder-preview { max-height: 50vh; }
}
/* Preview render (admin preview AND PDF source) */
.ag-render { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; color: #1a2540; line-height: 1.55; }
/* Header bar — visually matches the contracts/warnings/reviews `.ct-header`
pattern (navy block, gold top border, gold "TRIDENT CARE" eyebrow text,
white document-type label). Uses 0 outer margin so it works in all 3
render contexts (builder live preview, read-only preview modal, PDF
generation wrap) regardless of parent padding. */
.ag-render .ag-header {
background: var(--navy);
color: #fff;
padding: 18px 24px;
border-top: 4px solid var(--gold);
margin: 0 0 20px;
border-radius: 6px;
}
.ag-render .ag-header h1 {
font-family: var(--font-display, 'Outfit', sans-serif);
font-size: 13px;
letter-spacing: 0.22em;
text-transform: uppercase;
margin: 0 0 6px;
color: var(--gold);
font-weight: 700;
}
.ag-render .ag-header h2 {
font-family: var(--font-display, 'Outfit', sans-serif);
font-size: 22px;
margin: 0;
color: #fff;
font-weight: 600;
border: none;
padding: 0;
}
.ag-render .ag-header .ag-subtitle {
font-size: 12px;
color: rgba(255, 255, 255, 0.78);
margin: 6px 0 0;
}
/* Generic h1/h2/h3 inside the body (not in the header bar) keep the
pre-existing typography. */
.ag-render > h2 { font-size: 16px; color: var(--navy); margin: 22px 0 8px; border-bottom: 2px solid var(--gold); padding-bottom: 4px; }
.ag-render h3 { font-size: 13px; color: var(--navy); margin: 14px 0 6px; }
.ag-render p, .ag-render li { font-size: 13px; }
.ag-cover { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0 0; }
.ag-cover td { padding: 5px 8px; border-bottom: 1px solid #e3e8f0; vertical-align: top; }
.ag-cover td:nth-child(odd) { color: var(--muted); width: 22%; }
.ag-schedule { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0; border: 1px solid #e3e8f0; }
.ag-schedule th { background: #f4f6fa; padding: 8px; text-align: left; color: var(--navy); font-weight: 600; }
.ag-schedule td { padding: 8px; border-top: 1px solid #e3e8f0; vertical-align: top; }
.ag-schedule tbody tr:nth-child(even) td { background: #fbfcfe; }
.ag-schedule tfoot td { border-top: 2px solid var(--navy); background: #f4f6fa; padding: 10px 8px; }
.ag-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 12px; }
.ag-sigs h4 { font-size: 12px; color: var(--navy); margin: 0 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.ag-sig-placeholder {
border: 1.5px dashed var(--border);
border-radius: var(--radius-sm);
padding: 28px 16px;
text-align: center;
color: var(--muted);
font-size: 12px;
font-style: italic;
background: #fbfcfe;
min-height: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.ag-sig-filled {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px;
background: #fff;
}
.ag-sig-filled img {
display: block;
max-height: 60px;
max-width: 100%;
margin: 0 auto;
}
.ag-sig-caption {
font-size: 11px;
color: var(--muted);
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--border);
text-align: center;
}
.ag-sig-caption strong { color: var(--ink); }
/* Agreement status pills — semantic per-state colour. Self-contained
(no .sd-badge dependency) so the pill shape stays consistent even if
the staff-documents palette evolves. */
.ag-status {
display: inline-block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 3px 10px;
border-radius: var(--radius-pill);
line-height: 1.5;
white-space: nowrap;
}
.ag-status-draft { background: var(--bg); color: var(--muted); }
.ag-status-sent { background: rgba(42, 125, 140, 0.10); color: var(--teal, #2a7d8c); }
.ag-status-viewed { background: rgba(42, 125, 140, 0.18); color: var(--teal, #2a7d8c); }
.ag-status-await-cs { background: rgba(201, 165, 90, 0.18); color: var(--gold-deep, #8b6914); }
.ag-status-final { background: rgba(0, 120, 84, 0.14); color: var(--success, #007854); }
.ag-status-killed { background: var(--border); color: var(--muted); text-decoration: line-through; }
.ag-status-expired { background: rgba(218, 30, 40, 0.12); color: var(--danger, #da1e28); }
/* Policy/handbook ack steps — primary "Open the PDF" CTA + a smaller
download link, stacked on mobile and inline on desktop. The inline