/*
* WorkPulse Design System
* Pure CSS — no build step required, works with Propshaft.
*
* Structure:
* 1. Design Tokens
* 2. Reset & Base
* 3. Typography
* 4. Layout
* 5. Navbar
* 6. Flash Messages
* 7. Buttons
* 8. Forms
* 9. Cards
* 10. Badges
* 11. Tables
* 12. Auth Pages (login / password)
* 13. Dashboard (employee home)
* 14. Admin Pages
* 15. Utilities
*/
/* ============================================================
1. DESIGN TOKENS
============================================================ */
:root {
/* ----------------------------------------------------------------
THEME — this :root is the LIGHT theme; dark overrides live in
`:root.dark` (toggled by a `dark` class on ). Structural
tokens (type, spacing, radius…) below are theme-agnostic. The
legacy --navy-* names are the palette ladder: in light mode they
map to light neutrals (page bg → white cards → grey borders); in
dark mode they map back to navy. Components reference these plus
the semantic aliases, so re-mapping the ladder flips the whole UI.
RGB-channel tokens (--*-rgb) let tints adapt: rgba(var(--x-rgb), α).
---------------------------------------------------------------- */
/* Brand / surface ladder (light neutrals) */
--navy-900: #EEF2F8; /* body background */
--navy-800: #FFFFFF; /* navbar / sidebar surface */
--navy-700: #FFFFFF; /* cards / surfaces */
--navy-600: #F6F9FC; /* elevated cards / subtle fill */
--navy-500: #E2E8F0; /* borders / dividers */
--navy-400: #CBD5E1; /* strong border / hover */
/* Semantic surface aliases used throughout components */
--surface-1: var(--navy-700);
--surface-2: var(--navy-600);
--surface-3: var(--navy-500);
--border-strong: var(--navy-400);
/* Accent — channel drives adaptive tints */
--accent-rgb: 2, 118, 174;
--accent: #0276AE; /* AA (4.99:1) on white as text + as a fill */
--accent-hover: #0369A1;
--accent-muted: rgba(var(--accent-rgb), 0.12);
--accent-ring: rgba(var(--accent-rgb), 0.35);
--primary: #0276AE; /* alias → accent */
/* Text — ink on light */
--text-1: #0F2540; /* headings / primary */
--text-2: #4B5A70; /* body / secondary */
--text-3: #6B7687; /* placeholders/disabled (AA 4.60:1 on white) */
/* Status — solids AA-legible as text on light; channels drive tints */
--success-rgb: 16, 185, 129;
--danger-rgb: 239, 68, 68;
--warning-rgb: 245, 158, 11;
--success: #047857;
--success-muted: rgba(var(--success-rgb), 0.12);
--danger: #DC2626;
--danger-muted: rgba(var(--danger-rgb), 0.10);
--warning: #B45309;
--warning-muted: rgba(var(--warning-rgb), 0.14);
/* Foreground on filled elements */
--on-accent: #FFFFFF; /* text / icon on an accent fill */
--on-solid: #FFFFFF; /* text / icon on saturated fills */
/* Compositing channels (overlays + shadows) for adaptive rgba() tints */
--overlay-rgb: 15, 37, 64; /* hover wash / scrims on surfaces */
--shadow-rgb: 15, 37, 64; /* drop-shadow tint */
/* Decorative accents (theme-neutral; same in both modes) */
--indigo: #6366F1;
--indigo-rgb: 99, 102, 241;
--neutral-rgb: 148, 163, 184; /* slate tints */
--marker-neutral: #64748B; /* map marker fill */
/* Soft alert palette (pastel boxes; theme-neutral by design) */
--color-success: #166534; --color-success-bg: #F0FDF4;
--color-warning: #92400E; --color-warning-bg: #FFFBEB;
--color-danger: #991B1B; --color-danger-bg: #FEF2F2; --color-danger-border: #FCA5A5;
--primary-100: #E0F2FE; --primary-700: #0369A1;
/* Surfaces */
--bg: var(--navy-900);
--surface: var(--navy-700);
--border: var(--navy-500);
/* Typography */
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: "SF Mono", "Fira Code", Consolas, monospace;
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
/* Spacing (4px base) */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
/* Borders & Shadows */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(var(--shadow-rgb), 0.06), 0 1px 3px rgba(var(--shadow-rgb), 0.08);
--shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.10);
--shadow-lg: 0 12px 40px rgba(var(--shadow-rgb), 0.16);
--shadow-accent: 0 4px 20px rgba(var(--accent-rgb), 0.20);
/* Transitions */
--transition: 150ms ease;
/* Layout */
--navbar-h: 60px;
--container: 1100px;
/* ----------------------------------------------------------------
Compatibility aliases — these names are referenced by components
but were never defined (they previously fell back to inherited
colors). Pointing them at the canonical tokens fixes those latent
bugs and makes them theme-adaptive for free (no .dark overrides
needed, since the targets are already themed).
---------------------------------------------------------------- */
--text-primary: var(--text-1);
--text-secondary: var(--text-2);
--text-muted: var(--text-2);
--surface-0: var(--navy-800);
--surface-dim: var(--navy-600);
--surface-alt: var(--navy-600);
--navy-50: var(--navy-600);
--border-subtle: var(--border);
--border-focus: var(--accent);
--radius-md: var(--radius);
--space-7: 1.75rem;
}
/* ============================================================
1b. DARK THEME
============================================================
Toggled by a `dark` class on (Tailwind-style class
strategy), applied before first paint by the bootstrap script in
the layout . Only the color tokens that differ are overridden
here; the semantic aliases (--surface-1, --accent-muted, --shadow*)
and tint channels resolve lazily, so they pick up these values
automatically. Status tint channels (--*-rgb) are intentionally
NOT overridden — the same hue composites correctly over either
background. This block restores the app's original navy palette.
------------------------------------------------------------ */
:root.dark {
/* Brand / surface ladder (navy) */
--navy-900: #0A192F; /* body background */
--navy-800: #0D2137; /* navbar / sidebar */
--navy-700: #112240; /* cards / surfaces */
--navy-600: #163357; /* elevated cards */
--navy-500: #1E3A5F; /* borders */
--navy-400: #2A4D70; /* strong / hover */
/* Accent (bright cyan) */
--accent-rgb: 84, 198, 249;
--accent: #54C6F9;
--accent-hover: #29B6F6;
--primary: #54C6F9;
/* Text (light on navy) */
--text-1: #E8EDF4;
--text-2: #8BA3BF;
--text-3: #4F6A80;
/* Status solids (bright on dark) */
--success: #10B981;
--danger: #EF4444;
--warning: #F59E0B;
/* Foreground on filled elements: dark ink reads best on bright cyan */
--on-accent: #0A192F;
/* Compositing channels: white hover wash + black drop shadows */
--overlay-rgb: 255, 255, 255;
--shadow-rgb: 0, 0, 0;
/* Restore the original heavier dark-theme shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
--shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
color-scheme: dark;
}
:root { color-scheme: light; }
/* ============================================================
2. RESET & BASE
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
font-family: var(--font);
font-size: var(--text-base);
line-height: 1.6;
color: var(--text-1);
background-color: var(--bg);
min-height: 100dvh;
-webkit-font-smoothing: antialiased;
max-width: 100vw;
}
a {
color: var(--accent);
text-decoration: none;
transition: color var(--transition);
}
a:hover { color: var(--accent-hover); }
img, svg { display: block; }
button, input, select, textarea {
font: inherit;
}
ul, ol { list-style: none; }
/* ============================================================
3. TYPOGRAPHY
============================================================ */
h1, h2, h3, h4, h5, h6 {
color: var(--text-1);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p { color: var(--text-2); line-height: 1.7; }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-1 { color: var(--text-1); }
.text-2 { color: var(--text-2); }
.text-accent { color: var(--accent); }
.text-white { color: var(--text-1); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
/* ============================================================
4. LAYOUT
============================================================ */
body.is-authenticated {
padding-top: var(--navbar-h);
}
.main-content {
min-height: calc(100dvh - var(--navbar-h));
}
body.is-guest {
position: relative;
}
body.is-guest .main-content {
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--space-4);
}
.page {
padding: var(--space-6) var(--space-4);
}
@media (min-width: 768px) {
.page { padding: var(--space-8) var(--space-6); }
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-6);
flex-wrap: wrap;
}
.page-title {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--text-1);
}
/* ============================================================
5. NAVBAR
============================================================ */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--navbar-h);
background: var(--navy-800);
border-bottom: 1px solid var(--border);
z-index: 100;
}
.navbar__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
padding-inline: var(--space-4);
max-width: var(--container);
margin-inline: auto;
}
.navbar__brand {
display: flex;
align-items: center;
gap: var(--space-2);
text-decoration: none;
flex-shrink: 0;
}
.navbar__logo {
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
}
.navbar__name {
font-size: var(--text-lg);
font-weight: 800;
letter-spacing: -0.03em;
}
.navbar__name .text-white { color: var(--text-1); }
.navbar__name .text-accent { color: var(--accent); }
.navbar__actions {
display: flex;
align-items: center;
gap: var(--space-3);
}
.navbar__link {
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
transition: color var(--transition), background var(--transition);
}
.navbar__link:hover {
color: var(--text-1);
background: var(--navy-600);
}
.navbar__user {
font-size: var(--text-sm);
color: var(--text-2);
font-weight: 500;
display: none;
}
@media (min-width: 480px) { .navbar__user { display: block; } }
/* ============================================================
6. FLASH MESSAGES
============================================================ */
.flash {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
font-size: var(--text-sm);
font-weight: 500;
position: relative;
z-index: 90;
}
.flash--notice {
background: var(--success-muted);
color: var(--success);
border-bottom: 1px solid rgba(var(--success-rgb), 0.2);
}
.flash--alert {
background: var(--danger-muted);
color: var(--danger);
border-bottom: 1px solid rgba(var(--danger-rgb), 0.2);
}
/* ============================================================
7. BUTTONS
============================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0.6875rem var(--space-5); /* 11px 20px — 44px height */
font-size: var(--text-sm);
font-weight: 600;
line-height: 1;
border: 1.5px solid transparent;
border-radius: var(--radius);
cursor: pointer;
transition: background var(--transition), color var(--transition),
border-color var(--transition), box-shadow var(--transition),
opacity var(--transition);
white-space: nowrap;
text-decoration: none;
-webkit-user-select: none;
user-select: none;
}
.btn:disabled, .btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
}
/* Primary */
.btn-primary {
background: var(--accent);
color: var(--on-accent);
border-color: var(--accent);
}
.btn-primary:hover:not(:disabled) {
background: var(--accent-hover);
border-color: var(--accent-hover);
box-shadow: var(--shadow-accent);
color: var(--on-accent);
}
.btn-primary:active:not(:disabled) {
opacity: 0.85;
}
/* Secondary (outline) */
.btn-secondary {
background: transparent;
color: var(--accent);
border-color: var(--accent);
}
.btn-secondary:hover:not(:disabled) {
background: var(--accent-muted);
color: var(--accent);
}
/* Danger */
.btn-danger {
background: var(--danger-muted);
color: var(--danger);
border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) {
background: var(--danger);
color: var(--on-solid);
}
/* Ghost (navbar, subtle) */
.btn-ghost {
background: transparent;
color: var(--text-2);
border-color: var(--border);
}
.btn-ghost:hover:not(:disabled) {
background: var(--navy-600);
color: var(--text-1);
border-color: var(--navy-400);
}
/* Sizes */
.btn-sm {
padding: 0.4375rem var(--space-3); /* 7px 12px — 36px height */
font-size: var(--text-xs);
}
.btn-lg {
padding: 1rem var(--space-8); /* 16px 32px — 52px height */
font-size: var(--text-base);
border-radius: var(--radius-lg);
}
.btn-xl {
padding: 1.25rem var(--space-10); /* 20px 40px */
font-size: var(--text-lg);
border-radius: var(--radius-lg);
letter-spacing: 0.01em;
}
.btn-block { width: 100%; }
/* Icon-only button — square, compact (e.g. quick-call in tables) */
.btn-icon {
padding: 0.4375rem;
aspect-ratio: 1;
line-height: 0;
}
/* ============================================================
8. FORMS
============================================================ */
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-5);
}
.form-label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-2);
letter-spacing: 0.01em;
display: flex;
align-items: center;
gap: var(--space-2);
}
.form-label__optional {
font-size: var(--text-xs);
font-weight: 400;
color: var(--text-3);
letter-spacing: 0;
}
.text-muted {
color: var(--text-3);
}
.form-control {
width: 100%;
height: 48px;
padding: 0 var(--space-4);
font-size: var(--text-base);
color: var(--text-1);
background: var(--navy-600);
border: 1.5px solid var(--border);
border-radius: var(--radius);
outline: none;
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
-webkit-appearance: none;
appearance: none;
}
.form-control::placeholder { color: var(--text-3); }
.form-control:hover {
border-color: var(--navy-400);
}
.form-control:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-ring);
background: var(--navy-700);
}
.form-control.is-error {
border-color: var(--danger);
box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.2);
}
/* Textarea */
textarea.form-control {
height: auto;
min-height: 96px;
padding-top: var(--space-3);
padding-bottom: var(--space-3);
resize: vertical;
}
/* Select */
select.form-control {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238BA3BF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 40px;
cursor: pointer;
}
/* Date / time inputs — respect the active theme so the native picker
(used as a fallback when JS is unavailable) renders correctly in both modes. */
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control {
color-scheme: light;
}
html.dark input[type="date"].form-control,
html.dark input[type="time"].form-control,
html.dark input[type="datetime-local"].form-control {
color-scheme: dark;
}
/* ── Flatpickr calendar — match form controls + dark theme + RTL ───────────── */
.flatpickr-input.form-control[readonly] { background: var(--surface, #fff); cursor: pointer; }
html.dark .flatpickr-calendar {
background: var(--navy-600, #1b2738);
color: var(--text-1, #e6edf5);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
html.dark .flatpickr-calendar.arrowTop:before,
html.dark .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--navy-600, #1b2738); }
html.dark .flatpickr-calendar.arrowBottom:before,
html.dark .flatpickr-calendar.arrowBottom:after { border-top-color: var(--navy-600, #1b2738); }
html.dark .flatpickr-months .flatpickr-month,
html.dark .flatpickr-current-month,
html.dark .flatpickr-weekday,
html.dark .flatpickr-day { color: var(--text-1, #e6edf5); fill: var(--text-1, #e6edf5); }
html.dark .flatpickr-day { background: transparent; border-color: transparent; }
html.dark .flatpickr-day:hover,
html.dark .flatpickr-day.prevMonthDay:hover,
html.dark .flatpickr-day.nextMonthDay:hover { background: var(--navy-500, #28384d); border-color: var(--navy-500, #28384d); }
html.dark .flatpickr-day.selected { background: var(--accent, #3b82f6); border-color: var(--accent, #3b82f6); color: #fff; }
html.dark .flatpickr-day.flatpickr-disabled,
html.dark .flatpickr-day.prevMonthDay,
html.dark .flatpickr-day.nextMonthDay { color: var(--text-3, #6b7d93); }
html.dark .flatpickr-months .flatpickr-prev-month svg,
html.dark .flatpickr-months .flatpickr-next-month svg { fill: var(--text-1, #e6edf5); }
html.dark .numInputWrapper span { border-color: var(--border, #2c3a4f); }
html[dir="rtl"] .flatpickr-calendar { direction: rtl; }
/* Input with inline suffix label (e.g. "minutes", "days") */
.input-with-suffix {
display: flex;
align-items: stretch;
gap: 0;
}
.input-with-suffix .form-control {
border-start-end-radius: 0;
border-end-end-radius: 0;
flex: 1;
}
.input-suffix {
display: flex;
align-items: center;
padding: 0 var(--space-3);
background: var(--navy-500);
border: 1px solid var(--border);
border-inline-start: none;
border-start-end-radius: var(--radius);
border-end-end-radius: var(--radius);
font-size: var(--text-sm);
color: var(--text-2);
white-space: nowrap;
user-select: none;
}
[dir="rtl"] .input-with-suffix .form-control {
border-start-end-radius: var(--radius);
border-end-end-radius: var(--radius);
border-start-start-radius: 0;
border-end-start-radius: 0;
}
[dir="rtl"] .input-suffix {
border-inline-start: 1px solid var(--border);
border-inline-end: none;
border-start-start-radius: var(--radius);
border-end-start-radius: var(--radius);
border-start-end-radius: 0;
border-end-end-radius: 0;
}
/* Checkbox / Remember me */
.form-check {
display: flex;
align-items: center;
gap: var(--space-2);
cursor: pointer;
}
.form-check input[type="checkbox"] {
width: 18px;
height: 18px;
border: 1.5px solid var(--border);
border-radius: 4px;
background: var(--navy-600);
cursor: pointer;
accent-color: var(--accent);
}
.form-check-label,
.form-check__label {
font-size: var(--text-sm);
color: var(--text-2);
cursor: pointer;
}
/* Form errors */
.form-error {
background: var(--danger-muted);
border: 1px solid rgba(var(--danger-rgb), 0.3);
border-radius: var(--radius);
padding: var(--space-4);
margin-bottom: var(--space-5);
}
.form-error__title {
font-size: var(--text-sm);
font-weight: 600;
color: var(--danger);
margin-bottom: var(--space-2);
}
.form-error ul {
list-style: disc;
padding-left: var(--space-4);
}
.form-error li {
font-size: var(--text-sm);
color: var(--danger);
line-height: 1.6;
}
/* ============================================================
9. CARDS
============================================================ */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.card--elevated {
background: var(--navy-600);
box-shadow: var(--shadow);
}
.card--accent {
border-color: rgba(var(--accent-rgb), 0.3);
background: linear-gradient(135deg, var(--navy-700), var(--navy-600));
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border);
}
.card-title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-1);
}
/* ============================================================
10. BADGES
============================================================ */
.badge {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
font-size: var(--text-xs);
font-weight: 600;
border-radius: var(--radius-full);
letter-spacing: 0.03em;
text-transform: uppercase;
}
.badge-success {
background: var(--success-muted);
color: var(--success);
}
.badge-danger {
background: var(--danger-muted);
color: var(--danger);
}
.badge-warning {
background: var(--warning-muted);
color: var(--warning);
}
.badge-accent {
background: var(--accent-muted);
color: var(--accent);
}
.badge-neutral {
background: var(--navy-500);
color: var(--text-2);
}
.badge-template {
background: transparent;
color: var(--accent);
outline: 1px solid var(--accent);
outline-offset: -1px;
}
.badge-template svg {
display: inline-block;
vertical-align: middle;
margin-inline-end: 2px;
}
/* Small helper used below template badge in assignment table cells */
.sa-template-origin {
margin-top: 3px;
}
/* Temporary assignment badges */
.badge-temporary {
background: var(--warning-muted);
color: var(--warning);
}
.badge-expiring {
background: var(--danger-muted);
color: var(--danger);
font-weight: 700;
}
/* Indicator wrapper below the status badge in the assignment table */
.temp-indicator {
margin-top: 4px;
display: flex;
flex-direction: column;
gap: 2px;
}
.temp-expiry-text {
font-size: 11px;
color: var(--warning);
line-height: 1.3;
}
.temp-expiry-text--urgent {
color: var(--danger);
font-weight: 600;
}
/* ── Timeline: temporary expiry notice ───────────────────────────────── */
.temp-expiry-notice {
display: flex;
align-items: center;
gap: var(--space-1);
margin-bottom: var(--space-3);
padding: var(--space-2) var(--space-3);
background: color-mix(in srgb, var(--warning) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
color: var(--warning);
}
.temp-expiry-notice--urgent {
background: color-mix(in srgb, var(--danger) 8%, transparent);
border-color: color-mix(in srgb, var(--danger) 25%, transparent);
color: var(--danger);
}
.temp-resumes-hint {
color: var(--text-3);
font-style: italic;
}
/* ── Quick type filter chips ─────────────────────────────────────────────── */
.sa-quick-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin: var(--space-3) 0 var(--space-1);
}
.sa-quick-filters__sep {
display: inline-block;
width: 1px;
height: 20px;
background: var(--border);
margin: 0 var(--space-1);
}
.sa-quick-filter {
display: inline-flex;
align-items: center;
padding: 3px 12px;
border-radius: 9999px;
font-size: var(--text-xs);
font-weight: 500;
background: var(--surface-1);
color: var(--text-muted);
border: 1px solid var(--border);
text-decoration: none;
transition: background 0.1s, color 0.1s, border-color 0.1s;
white-space: nowrap;
}
.sa-quick-filter:hover {
background: var(--surface-2, var(--navy-50));
color: var(--text-primary);
}
.sa-quick-filter--active {
background: var(--navy-800);
color: var(--text-1);
border-color: var(--navy-800);
}
.sa-quick-filter--amber {
border-color: color-mix(in srgb, var(--warning) 40%, transparent);
color: var(--warning);
}
.sa-quick-filter--amber:hover,
.sa-quick-filter--amber.sa-quick-filter--active {
background: var(--warning);
color: var(--on-accent);
border-color: var(--warning);
}
.sa-quick-filter--named {
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
color: var(--accent);
}
.sa-quick-filter--named:hover,
.sa-quick-filter--named.sa-quick-filter--active {
background: var(--accent);
color: var(--on-accent);
border-color: var(--accent);
}
/* ── Temporary assignment row (amber left border + tint) ─────────────────── */
tr.sa-row--temporary > td {
background: color-mix(in srgb, var(--warning) 4%, transparent);
}
tr.sa-row--temporary > td:first-child {
box-shadow: inset 4px 0 0 0 var(--warning);
}
/* ── Shift cell template sub-line ────────────────────────────────────────── */
.sa-shift-template-name {
font-size: var(--text-xs);
color: var(--warning);
font-weight: 500;
margin-top: 2px;
}
/* ── Assignment type cell ────────────────────────────────────────────────── */
.sa-type-cell {
display: flex;
flex-direction: column;
gap: 3px;
}
.sa-type-expiry {
font-size: var(--text-xs);
color: var(--text-muted);
margin-top: 2px;
}
.sa-type-expiry--urgent {
color: var(--danger);
font-weight: 600;
}
/* ── Assignment type badges ──────────────────────────────────────────────── */
.badge-type-permanent {
background: color-mix(in srgb, var(--success) 12%, transparent);
color: var(--success);
font-size: var(--text-xs);
padding: 2px 7px;
border-radius: 9999px;
font-weight: 500;
white-space: nowrap;
display: inline-block;
}
.badge-type-temporary {
background: color-mix(in srgb, var(--warning) 15%, transparent);
color: var(--warning);
font-size: var(--text-xs);
padding: 2px 7px;
border-radius: 9999px;
font-weight: 600;
white-space: nowrap;
display: inline-block;
}
.badge-type-named {
background: color-mix(in srgb, var(--warning) 18%, transparent);
color: var(--warning);
font-size: var(--text-xs);
padding: 2px 7px;
border-radius: 9999px;
font-weight: 700;
white-space: nowrap;
display: inline-block;
border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
}
/* ── Improved temp expiry notice (timeline) ──────────────────────────────── */
.temp-expiry-notice__row {
display: flex;
align-items: center;
gap: var(--space-1);
}
.temp-revert-note {
display: flex;
align-items: center;
gap: 4px;
margin-top: var(--space-1);
font-size: var(--text-xs);
color: var(--text-muted);
font-style: italic;
}
/* RTL mirrors */
[dir="rtl"] tr.sa-row--temporary > td:first-child {
box-shadow: inset -4px 0 0 0 var(--warning);
}
[dir="rtl"] .sa-quick-filters { flex-direction: row-reverse; }
[dir="rtl"] .sa-shift-template-name { text-align: right; }
/* ============================================================
11. TABLES
============================================================ */
.table-wrap {
width: 100%;
overflow-x: auto;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
thead {
background: var(--navy-800);
}
thead th {
padding: var(--space-3) var(--space-4);
text-align: left;
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-2);
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
border-bottom: 1px solid var(--border);
}
tbody tr {
border-bottom: 1px solid var(--border);
transition: background var(--transition);
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--navy-600); }
tfoot tr.totals-row {
border-top: 2px solid var(--border);
background: var(--surface-2, rgba(var(--shadow-rgb),0.03));
}
tfoot tr.totals-row td {
padding: var(--space-3) var(--space-4);
vertical-align: middle;
font-size: var(--text-sm);
}
tbody td {
padding: var(--space-3) var(--space-4);
color: var(--text-1);
vertical-align: middle;
}
.td-secondary {
color: var(--text-2);
font-size: var(--text-sm);
}
.td-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
/* ── Avatar & logo components ─────────────────────────────────────── */
/* Unified avatar wrapper — used for both photo and initials */
.avatar {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
background: var(--accent-muted);
border: 1.5px solid var(--accent-ring);
color: var(--accent);
font-size: var(--text-xs);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
letter-spacing: 0.03em;
user-select: none;
overflow: hidden; /* clips photo img to the circular border */
}
/* Small variant — 40 px, used in lists and sidebar */
.avatar--sm {
width: 40px;
height: 40px;
}
/* Large variant — 80 px, used on profile pages */
.avatar--lg {
width: 80px;
height: 80px;
font-size: var(--text-base);
}
/* Extra-large variant — 160 px */
.avatar--xl {
width: 160px;
height: 160px;
font-size: var(--text-2xl);
}
/* Photo img fills the .avatar wrapper — width/height/border-radius come from the wrapper */
.avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Initials modifier — same wrapper, accent colours */
.avatar-placeholder {
background: var(--accent-muted);
border: 1.5px solid var(--accent-ring);
color: var(--accent);
}
/* ── Business logo ─────────────────────────────────────────────────── */
.logo-img {
display: block;
object-fit: contain;
border-radius: var(--radius);
}
.logo-img--thumb {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
}
/* ── File upload field ────────────────────────────────────────────── */
.upload-field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.upload-field__label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-2);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.upload-field__preview {
display: flex;
align-items: center;
gap: var(--space-3);
}
.upload-field__hint {
font-size: var(--text-xs);
color: var(--text-3);
}
/* Controls row: choose button + optional remove button */
.upload-field__controls {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
/* Hides the native file input while keeping it keyboard-accessible */
.upload-field__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.upload-field__choose {
cursor: pointer;
}
/* Filename label shown for non-image attachments (PDFs, etc.) */
.upload-field__filename {
font-size: var(--text-xs);
color: var(--text-2);
font-weight: 500;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Placeholder block shown for documents before a file is chosen */
.upload-field__doc-placeholder {
width: 48px;
height: 48px;
border-radius: var(--radius);
background: var(--surface-2);
border: 1.5px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--text-3);
font-size: 1.25rem;
}
/* Thumbnail shown for image-type ID documents */
.upload-field__doc-thumb {
width: 80px;
height: 52px;
object-fit: cover;
border-radius: var(--radius);
border: 1.5px solid var(--border);
flex-shrink: 0;
}
/* RTL: upload field text aligns naturally via direction inherit */
[dir="rtl"] .upload-field__preview {
flex-direction: row-reverse;
}
[dir="rtl"] .upload-field__controls {
flex-direction: row-reverse;
}
/* ── Document attachment viewer (show pages) ─────────────────────────── */
.attachment-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-4);
padding: var(--space-4);
}
.attachment-item__label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-2);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 var(--space-2);
}
.attachment-viewer {
border: 1.5px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--surface-2);
}
/* Image variant */
.attachment-viewer--image .attachment-viewer__link {
display: block;
line-height: 0; /* remove inline gap below img */
}
.attachment-viewer__img {
display: block;
width: 100%;
height: 160px;
object-fit: cover;
transition: opacity 0.15s;
}
.attachment-viewer--image .attachment-viewer__link:hover .attachment-viewer__img {
opacity: 0.85;
}
/* PDF variant */
.attachment-viewer--pdf {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
}
.attachment-viewer__pdf-icon {
width: 44px;
height: 44px;
border-radius: var(--radius);
background: var(--danger-muted);
color: var(--danger);
font-size: var(--text-xs);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.attachment-viewer__pdf-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.attachment-viewer__pdf-name {
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
[dir="rtl"] .attachment-viewer--pdf {
flex-direction: row-reverse;
}
@media (max-width: 640px) {
.attachment-grid {
grid-template-columns: 1fr;
}
}
.employee-cell {
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
}
.employee-cell__name {
font-weight: 600;
color: var(--text-1);
}
.employee-cell__sub {
font-size: var(--text-xs);
color: var(--text-2);
}
/* Data list (show page) */
.data-list {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.data-list__item {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--border);
}
.data-list__item:last-child { border-bottom: none; }
.data-list__item--section-header {
padding-bottom: 0;
border-bottom: none;
}
.data-list__label--section {
font-size: var(--text-sm);
font-weight: 700;
color: var(--text-2);
text-transform: none;
letter-spacing: 0;
padding-top: var(--space-2);
}
.data-list__label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.data-list__value {
font-size: var(--text-base);
color: var(--text-1);
font-weight: 500;
}
@media (min-width: 640px) {
.data-list {
grid-template-columns: 1fr 1fr;
}
}
/* ============================================================
12. AUTH PAGES
============================================================ */
.auth-lang {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-2);
margin: var(--space-4) 0 var(--space-5);
}
.auth-wrapper {
width: 100%;
max-width: 420px;
}
.auth-logo {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-8);
text-align: center;
}
.auth-logo__icon {
width: 64px;
height: 64px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-accent);
}
.auth-logo__wordmark {
font-size: var(--text-2xl);
font-weight: 800;
letter-spacing: -0.04em;
}
.auth-logo__wordmark .work { color: var(--text-1); }
.auth-logo__wordmark .pulse { color: var(--accent); }
.auth-logo__tagline {
font-size: var(--text-sm);
color: var(--text-3);
}
.auth-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
}
.auth-card__title {
font-size: var(--text-xl);
font-weight: 700;
color: var(--text-1);
margin-bottom: var(--space-2);
}
.auth-card__subtitle {
font-size: var(--text-sm);
color: var(--text-2);
margin-bottom: var(--space-6);
}
.auth-links {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid var(--border);
}
.auth-links a {
font-size: var(--text-sm);
color: var(--text-2);
transition: color var(--transition);
text-align: center;
}
.auth-links a:hover { color: var(--accent); }
/* ============================================================
13. DASHBOARD (Employee Home)
============================================================ */
.dashboard {
padding: var(--space-6) var(--space-4);
max-width: 600px;
margin: 0 auto;
}
.dashboard__greeting {
margin-bottom: var(--space-6);
}
.dashboard__greeting-time {
font-size: var(--text-xs);
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--space-1);
}
.dashboard__greeting-name {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--text-1);
}
.dashboard__greeting-name span {
color: var(--accent);
}
/* Status card */
.status-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-6);
margin-bottom: var(--space-6);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.status-card--in {
border-color: rgba(var(--success-rgb), 0.35);
background: linear-gradient(135deg, var(--navy-700), rgba(var(--success-rgb), 0.06));
}
.status-card--out {
border-color: var(--border);
}
.status-card__info { flex: 1; }
.status-card__label {
font-size: var(--text-xs);
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--space-1);
}
.status-card__status {
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-1);
}
.status-card__time {
font-size: var(--text-sm);
color: var(--text-2);
margin-top: var(--space-1);
}
.status-indicator {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.status-indicator--in { background: var(--success-muted); color: var(--success); }
.status-indicator--out { background: var(--navy-500); color: var(--text-2); }
/* Check-in / Check-out CTA */
.checkin-cta {
margin-bottom: var(--space-6);
}
/* Admin quick-link */
.admin-quick-link {
background: var(--accent-muted);
border: 1px solid var(--accent-ring);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
transition: background var(--transition);
}
.admin-quick-link:hover {
background: rgba(var(--accent-rgb), 0.18);
text-decoration: none;
}
.admin-quick-link__label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--accent);
}
.admin-quick-link__sub {
font-size: var(--text-xs);
color: var(--text-3);
margin-top: 2px;
}
/* ============================================================
14. ADMIN PAGES
============================================================ */
.admin-page {
padding: var(--space-6) var(--space-4);
max-width: var(--container);
margin: 0 auto;
}
@media (min-width: 768px) {
.admin-page { padding: var(--space-8) var(--space-6); }
}
/* ── Page actions bar (desktop: inline row; mobile: fixed bottom strip) ──── */
.page-actions {
display: flex;
gap: var(--space-2);
align-items: center;
flex-wrap: wrap;
margin-bottom: var(--space-5);
}
/* No actions → no extra space */
.page-actions:empty { display: none; }
@media (max-width: 1023px) {
.page-actions--sticky {
position: fixed;
bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
inset-inline: 0;
padding: var(--space-3) var(--space-4);
background: color-mix(in srgb, var(--surface-1) 96%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--border);
z-index: 40;
margin: 0;
overflow-x: auto;
gap: var(--space-2);
/* Ensure buttons don't wrap awkwardly — allow horizontal scroll */
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.page-actions--sticky::-webkit-scrollbar { display: none; }
/* Page body: add bottom padding so sticky bar doesn't cover last content */
.admin-page.has-sticky-actions {
padding-bottom: calc(4.5rem + var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}
}
@media (min-width: 1024px) {
/* On desktop, sticky bar renders as a normal inline action bar rather than
a fixed bottom overlay. The mobile-only positioning is scoped to max-width:1023px above. */
.page-actions--sticky {
position: static;
padding: 0;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-top: none;
z-index: auto;
margin-bottom: var(--space-5);
overflow-x: visible;
flex-wrap: wrap;
}
}
/* ── Inactive user row dimming ────────────────────────────────────────────── */
tr.user-row--inactive {
opacity: 0.55;
}
tr.user-row--inactive:hover {
opacity: 0.85;
}
.inactive-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 700;
color: var(--text-3);
background: var(--surface-2);
border-radius: var(--radius-full);
padding: 2px 6px;
letter-spacing: 0.04em;
margin-inline-start: var(--space-1);
vertical-align: middle;
}
/* ── Filter tabs (active/inactive quick filter) ───────────────────────────── */
.filter-tabs {
display: flex;
gap: var(--space-1);
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 3px;
width: fit-content;
flex-shrink: 0;
}
.filter-tab {
padding: var(--space-1) var(--space-3);
border-radius: calc(var(--radius) - 2px);
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-3);
text-decoration: none;
transition: background 0.1s, color 0.1s;
white-space: nowrap;
}
.filter-tab:hover { color: var(--text-1); }
.filter-tab--active {
background: var(--surface-2);
color: var(--text-1);
font-weight: 600;
}
/* ── Import page helpers ──────────────────────────────────────────────────── */
.import-description {
color: var(--text-2);
font-size: var(--text-sm);
margin-bottom: var(--space-5);
}
.import-upload-icon {
margin-bottom: var(--space-3);
opacity: 0.45;
}
.import-browse-label {
margin-top: var(--space-3);
cursor: pointer;
}
.import-info-card {
margin: var(--space-4) 0 var(--space-5);
}
.import-confirm-actions {
display: flex;
gap: var(--space-3);
align-items: center;
margin-bottom: var(--space-8);
flex-wrap: wrap;
}
.import-download-wrap {
margin-bottom: var(--space-8);
}
.import-table-wrap {
margin-bottom: var(--space-8);
}
/* Form page */
.form-page {
max-width: 640px;
margin: 0 auto;
padding: var(--space-6) var(--space-4);
}
@media (min-width: 768px) {
.form-page { padding: var(--space-8) var(--space-6); }
}
.form-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-8);
}
.form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0 var(--space-5);
}
@media (min-width: 560px) {
.form-grid { grid-template-columns: 1fr 1fr; }
}
.form-actions {
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid var(--border);
flex-wrap: wrap;
}
.form-actions--sticky {
position: sticky;
bottom: 0;
margin-top: var(--space-4);
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--border);
background: var(--surface);
box-shadow: 0 -2px 10px rgba(var(--shadow-rgb),0.06);
z-index: 20;
}
/* ============================================================
15. UTILITIES
============================================================ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.w-full { width: 100%; }
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
/* Divider */
.divider {
height: 1px;
background: var(--border);
margin: var(--space-6) 0;
}
/* Empty state */
.empty-state {
text-align: center;
padding: var(--space-16) var(--space-4);
color: var(--text-3);
}
.empty-state__icon {
font-size: 2.5rem;
margin-bottom: var(--space-4);
opacity: 0.4;
}
.empty-state__title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-2);
margin-bottom: var(--space-2);
}
.empty-state__text {
font-size: var(--text-sm);
}
/* Back link */
.back-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-2);
margin-bottom: var(--space-5);
transition: color var(--transition);
}
.back-link:hover { color: var(--accent); }
/* ============================================================
16. APP SHELL & SIDEBAR
============================================================ */
:root {
--sidebar-w: 204px;
--bottom-nav-h: 64px;
--mobile-header-h: 56px;
}
/* Override old navbar padding — shell handles layout now */
body.is-authenticated {
padding-top: 0;
}
.app-shell {
display: flex;
flex-direction: column; /* column so mobile-header stacks above app-main */
min-height: 100dvh;
width: 100%;
overflow-x: hidden;
}
/* --- Sidebar --------------------------------------------------------- */
.sidebar {
position: fixed;
inset: 0 auto 0 0;
width: var(--sidebar-w);
background: var(--navy-800);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
z-index: 300;
overflow-y: auto;
transform: translateX(-100%);
transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar.is-open {
transform: translateX(0);
box-shadow: var(--shadow-lg);
}
@media (min-width: 1024px) {
.sidebar {
transform: translateX(0);
box-shadow: none;
}
}
.sidebar__header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-5);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.sidebar__logo-img {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
}
.sidebar__brand {
font-size: var(--text-lg);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--text-1);
}
.sidebar__brand .text-white { color: var(--text-1); }
.sidebar__brand .text-accent { color: var(--accent); }
.sidebar__nav {
flex: 1;
padding: var(--space-4) var(--space-3);
display: flex;
flex-direction: column;
gap: var(--space-1);
overflow-y: auto;
}
.sidebar__section-label {
font-size: 10px;
font-weight: 700;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.09em;
padding: var(--space-3) var(--space-3) var(--space-1);
display: block;
}
.sidebar__nav-item {
display: flex;
align-items: center;
gap: var(--space-2);
padding: 7px var(--space-3);
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
color: var(--text-2);
text-decoration: none;
transition: background var(--transition), color var(--transition), box-shadow var(--transition);
position: relative;
}
.sidebar__nav-item:hover {
background: rgba(var(--overlay-rgb),0.05);
color: var(--text-1);
text-decoration: none;
}
.sidebar__nav-item.is-active {
color: var(--accent);
background: rgba(var(--accent-rgb), 0.09);
box-shadow: inset 2px 0 0 var(--accent);
}
.sidebar__nav-item--sub {
padding-inline-start: calc(var(--space-3) + var(--space-2));
}
.sidebar__nav-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: currentColor;
opacity: 0.7;
}
.sidebar__nav-item:hover .sidebar__nav-icon,
.sidebar__nav-item.is-active .sidebar__nav-icon {
opacity: 1;
}
/* Collapsible admin group */
.sidebar__group {
margin-top: 0;
}
.sidebar__group > summary {
list-style: none;
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar__group > summary::-webkit-details-marker {
display: none;
}
.sidebar__group-toggle {
padding: var(--space-3) var(--space-3) var(--space-1);
}
.sidebar__group-chevron {
width: 11px;
height: 11px;
flex-shrink: 0;
transition: transform 160ms ease;
opacity: 0.5;
}
.sidebar__group[open] .sidebar__group-chevron {
transform: rotate(180deg);
}
.sidebar__group > summary:hover .sidebar__group-chevron {
opacity: 0.8;
}
.sidebar__footer {
border-top: 1px solid var(--border);
padding: var(--space-4);
flex-shrink: 0;
}
.sidebar__user {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.sidebar__user-info { min-width: 0; }
.sidebar__user-name {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-1);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar__user-role {
font-size: var(--text-xs);
color: var(--text-3);
text-transform: capitalize;
letter-spacing: 0.02em;
}
/* Overlay behind mobile sidebar */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(var(--shadow-rgb), 0.55);
z-index: 250;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.sidebar-overlay.is-visible { display: block; }
/* --- App main area --------------------------------------------------- */
.app-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
/* Compensate for fixed mobile-header height (including safe-area inset) */
padding-top: var(--mobile-header-h);
padding-top: calc(var(--mobile-header-h) + env(safe-area-inset-top, 0px));
padding-bottom: var(--bottom-nav-h);
}
@media (min-width: 1024px) {
.app-main {
margin-left: var(--sidebar-w);
padding-top: 0;
padding-bottom: 0;
}
}
/* --- Mobile header --------------------------------------------------- */
/* position:fixed removes it from flow — .app-main gets padding-top to compensate.
sticky was broken: overflow-x:hidden on .app-shell made it a new scroll container,
so sticky anchored to the shell (which doesn't scroll) instead of the viewport. */
.mobile-header {
display: flex;
align-items: center;
justify-content: space-between;
/* Height + top grow to cover iPhone notch / Dynamic Island */
height: calc(var(--mobile-header-h) + env(safe-area-inset-top, 0px));
padding-top: env(safe-area-inset-top, 0px);
padding-inline-start: max(var(--space-4), env(safe-area-inset-left, 0px));
padding-inline-end: max(var(--space-4), env(safe-area-inset-right, 0px));
background: var(--navy-800);
border-bottom: 1px solid var(--border);
position: fixed;
top: 0;
inset-inline: 0;
z-index: 100;
flex-shrink: 0;
}
@media (min-width: 1024px) {
.mobile-header { display: none; }
}
.mobile-header__brand {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-base);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--text-1);
text-decoration: none;
}
.mobile-header__brand img {
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
}
.mobile-header__brand .text-white { color: var(--text-1); }
.mobile-header__brand .text-accent { color: var(--accent); }
.mobile-header__right {
display: flex;
align-items: center;
gap: var(--space-2);
}
.sidebar-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius);
color: var(--text-2);
background: transparent;
border: none;
cursor: pointer;
transition: background var(--transition), color var(--transition);
}
.sidebar-toggle:hover {
background: var(--navy-600);
color: var(--text-1);
}
/* --- Bottom navigation (mobile only) --------------------------------- */
.bottom-nav { display: none; }
@media (max-width: 1023px) {
.bottom-nav {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--bottom-nav-h);
background: var(--navy-800);
border-top: 1px solid var(--border);
z-index: 200;
}
}
.bottom-nav__item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: var(--text-3);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.03em;
text-decoration: none;
transition: color var(--transition);
padding: var(--space-2) 0;
}
.bottom-nav__item:hover,
.bottom-nav__item.active {
color: var(--accent);
text-decoration: none;
}
.bottom-nav__icon {
width: 22px;
height: 22px;
}
/* ============================================================
17. DASHBOARD WIDGETS
============================================================ */
/* Page wrapper used by all role dashboards */
.dashboard-page {
padding: var(--space-6) var(--space-4);
max-width: var(--container);
margin: 0 auto;
}
@media (min-width: 768px) {
.dashboard-page { padding: var(--space-8) var(--space-6); }
}
/* Stat cards grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
margin-bottom: var(--space-8);
}
@media (min-width: 640px) {
.stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
}
.stat-card--accent { border-color: rgba(var(--accent-rgb),0.3); }
.stat-card--success { border-color: rgba(var(--success-rgb),0.3); }
.stat-card--warning { border-color: rgba(var(--warning-rgb),0.3); }
.stat-card--danger { border-color: rgba(var(--danger-rgb),0.3); }
.stat-card__label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--space-2);
}
.stat-card__value {
font-size: var(--text-3xl);
font-weight: 700;
color: var(--text-1);
line-height: 1;
}
.stat-card__sub {
font-size: var(--text-xs);
color: var(--text-3);
margin-top: var(--space-2);
}
/* Dashboard section */
.dashboard-section { margin-bottom: var(--space-8); }
.dashboard-section__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-4);
flex-wrap: wrap;
}
.dashboard-section__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-1);
}
/* Two-column layout for wide dashboards */
.dashboard-cols {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 900px) {
.dashboard-cols { grid-template-columns: 1fr 1fr; }
}
/* Info card */
.info-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
}
.info-card__primary {
font-size: var(--text-base);
font-weight: 600;
color: var(--text-1);
}
.info-card__sub {
font-size: var(--text-sm);
color: var(--text-2);
margin-top: var(--space-1);
}
/* Quick links grid */
.quick-links {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3);
}
@media (min-width: 560px) {
.quick-links { grid-template-columns: 1fr 1fr; }
}
/* Greeting sub-text */
.dashboard__greeting-sub {
font-size: var(--text-sm);
color: var(--text-2);
margin-top: var(--space-2);
}
/* Employee narrow dashboard still centered */
.dashboard {
max-width: 600px;
margin-inline: auto;
padding: var(--space-6) var(--space-4);
}
@media (min-width: 768px) {
.dashboard { padding: var(--space-8) var(--space-6); }
}
/* ─── 18. Sidebar extras ─────────────────────────────────────────── */
.sidebar__user-avatar {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--accent);
color: var(--on-accent);
font-size: var(--text-sm);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Photo fills the circular sidebar avatar */
.sidebar__user-avatar__img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.sidebar__nav-item--sign-out {
color: var(--text-2);
margin-top: var(--space-2);
}
.sidebar__nav-item--sign-out:hover {
color: var(--danger);
background: color-mix(in srgb, var(--danger) 10%, transparent);
}
/* Mobile header spacer keeps brand centered */
.mobile-header__spacer {
width: 40px;
}
/* ─── 19. Admin page helpers ─────────────────────────────────────── */
.page-subtitle {
font-size: var(--text-sm);
color: var(--text-2);
margin-top: var(--space-2);
margin-bottom: 0;
}
.page-header__actions {
display: flex;
gap: var(--space-3);
align-items: center;
flex-shrink: 0;
}
.filter-bar {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
margin-bottom: var(--space-5);
}
.filter-bar__fields {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.filter-bar__field {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.filter-bar__label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-2);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.filter-bar__input,
.filter-bar__select {
width: 100%;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-0);
font-size: var(--text-sm);
color: var(--text-1);
}
.filter-bar__input:focus,
.filter-bar__select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.filter-bar__toggles {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-bottom: var(--space-3);
}
.filter-toggle {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
cursor: pointer;
user-select: none;
}
.filter-bar__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.table-meta {
font-size: var(--text-sm);
color: var(--text-2);
margin-bottom: var(--space-2);
}
.th-sort-link {
color: inherit;
text-decoration: none;
white-space: nowrap;
}
.th-sort-link:hover { color: var(--accent); }
/* ─── Pagination ─────────────────────────────────────────────────── */
.pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-1);
margin-top: var(--space-5);
}
.pagination__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
height: 2rem;
padding: 0 var(--space-2);
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface-0);
font-size: var(--text-sm);
color: var(--text-1);
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
}
.pagination__btn:hover { background: var(--surface-1); border-color: var(--accent); }
.pagination__btn--active {
background: var(--accent);
color: var(--on-accent);
border-color: var(--accent);
font-weight: 600;
}
.pagination__ellipsis {
color: var(--text-2);
padding: 0 var(--space-1);
}
.badge-xs {
font-size: 0.65rem;
padding: 0.1em 0.4em;
}
.filter-form {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
align-items: center;
}
.filter-form .form-control--sm {
max-width: 200px;
}
/* Inline text links */
.link {
color: var(--accent);
text-decoration: none;
font-weight: 500;
}
.link:hover { text-decoration: underline; }
.link-muted {
color: var(--text-2);
text-decoration: none;
font-size: var(--text-sm);
}
.link-muted:hover { color: var(--text-1); }
.td-actions {
white-space: nowrap;
text-align: right;
}
/* ─── 20. Misc helpers ───────────────────────────────────────────── */
.td-empty {
text-align: center;
color: var(--text-2);
padding: var(--space-8) var(--space-4);
font-size: var(--text-sm);
}
.info-card__row {
display: flex;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border);
font-size: var(--text-sm);
}
.info-card__row:last-child { border-bottom: none; }
.info-card__label {
color: var(--text-2);
flex-shrink: 0;
}
/* ============================================================
§ 21 — Employee Dashboard
============================================================ */
.emp-dashboard {
max-width: 480px;
margin: 0 auto;
padding: var(--space-4) var(--space-4) var(--space-8);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
/* Greeting */
.emp-dashboard__greeting {
padding-top: var(--space-2);
}
.emp-dashboard__greeting-time {
font-size: var(--text-sm);
color: var(--text-2);
margin: 0 0 var(--space-1);
}
.emp-dashboard__greeting-name {
font-size: var(--text-2xl);
font-weight: 700;
margin: 0 0 var(--space-1);
color: var(--text-1);
}
.emp-dashboard__greeting-sub {
font-size: var(--text-sm);
color: var(--text-2);
margin: 0;
}
/* Attendance hero card */
.attendance-hero {
border-radius: var(--radius-lg);
padding: var(--space-5);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.attendance-hero--idle {
background: var(--surface-2);
border: 1px solid var(--border);
}
.attendance-hero--active {
background: rgba(var(--accent-rgb), 0.08);
border: 1px solid rgba(var(--accent-rgb), 0.28);
}
.attendance-hero--done {
background: rgba(var(--success-rgb), 0.10);
border: 1px solid rgba(var(--success-rgb), 0.28);
}
.attendance-hero__label {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-2);
margin: 0 0 var(--space-1);
}
.attendance-hero__status {
font-size: var(--text-xl);
font-weight: 700;
color: var(--text-1);
margin: 0 0 var(--space-1);
}
.attendance-hero__times {
font-size: var(--text-sm);
color: var(--text-2);
margin: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1);
}
.attendance-hero__sep { color: var(--border-strong); }
.attendance-hero__worked { color: var(--text-3, var(--text-2)); font-size: var(--text-xs); }
.attendance-hero__icon {
flex-shrink: 0;
color: var(--text-2);
}
.attendance-hero--active .attendance-hero__icon { color: var(--accent); }
.attendance-hero--done .attendance-hero__icon { color: var(--success); }
/* Check-in / check-out CTA */
.emp-dashboard__cta { display: flex; flex-direction: column; gap: var(--space-3); }
.emp-dashboard__branch-label {
font-size: var(--text-sm);
color: var(--text-2);
margin: 0;
}
.emp-dashboard__no-branch {
font-size: var(--text-sm);
color: var(--text-2);
text-align: center;
padding: var(--space-4);
background: var(--surface-2);
border-radius: var(--radius);
}
.btn-checkin {
background: var(--accent);
color: var(--on-accent);
gap: var(--space-2);
}
.btn-checkin:hover { filter: brightness(0.93); }
.btn-checkout {
background: var(--surface-2);
color: var(--text-1);
border: 1px solid var(--border-strong);
gap: var(--space-2);
}
.btn-checkout:hover { background: var(--surface-3, var(--surface-2)); }
/* Branch picker (multiple branches) */
.branch-picker {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.branch-picker__btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--space-4) var(--space-4);
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
font-size: var(--text-base);
color: var(--text-1);
transition: background 0.15s, border-color 0.15s;
}
.branch-picker__btn:hover {
background: var(--surface-2);
border-color: var(--accent);
}
.branch-picker__name { font-weight: 500; }
/* Quick actions row */
.emp-dashboard__quick-actions {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
}
.quick-action {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-2);
background: var(--surface-2);
border-radius: var(--radius);
text-decoration: none;
color: var(--text-1);
font-size: var(--text-xs);
font-weight: 500;
text-align: center;
transition: background 0.15s;
}
.quick-action:hover { background: var(--surface-3, var(--surface-2)); color: var(--accent); }
.quick-action__icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: var(--radius);
background: var(--surface-1);
}
.quick-action__label { line-height: 1.2; }
/* Sections */
.emp-dashboard__section { display: flex; flex-direction: column; gap: var(--space-3); }
.emp-dashboard__section-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.emp-dashboard__section-title {
font-size: var(--text-base);
font-weight: 600;
margin: 0;
color: var(--text-1);
}
.emp-dashboard__section-link {
font-size: var(--text-sm);
color: var(--accent);
text-decoration: none;
}
.emp-dashboard__section-link:hover { text-decoration: underline; }
/* Request list rows */
.request-list { display: flex; flex-direction: column; gap: 0; }
.request-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-1);
border-bottom: 1px solid var(--border);
text-decoration: none;
color: var(--text-1);
transition: background 0.12s;
}
.request-row:first-child { border-top: 1px solid var(--border); }
.request-row:hover { background: var(--surface-2); }
.request-row__main { display: flex; flex-direction: column; gap: var(--space-1); }
.request-row__type { font-size: var(--text-sm); font-weight: 500; }
.request-row__date { font-size: var(--text-xs); color: var(--text-2); }
/* Payroll summary card */
.payroll-summary-card {
background: var(--surface-2);
border-radius: var(--radius);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: 0;
}
.payroll-summary-card__period {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-1);
margin-bottom: var(--space-3);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
}
.payroll-summary-card__row {
display: flex;
justify-content: space-between;
padding: var(--space-2) 0;
font-size: var(--text-sm);
border-bottom: 1px solid var(--border);
}
.payroll-summary-card__row:last-child { border-bottom: none; }
.payroll-summary-card__row--deduction { color: var(--danger); }
.payroll-summary-card__row--net { font-weight: 700; font-size: var(--text-base); }
.payroll-summary-card__label { color: var(--text-2); }
.payroll-summary-card__row--addition { color: var(--success); }
/* ── Missing punch-out alert ─────────────────────────────── */
.missing-punch-alert {
display: flex;
gap: var(--space-3);
padding: var(--space-4);
background: rgba(var(--danger-rgb), 0.10);
border: 1px solid rgba(var(--danger-rgb), 0.35);
border-radius: var(--radius);
border-inline-start-width: 4px;
}
.missing-punch-alert__icon {
flex-shrink: 0;
color: var(--danger);
padding-top: 2px;
}
.missing-punch-alert__body {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.missing-punch-alert__title {
font-weight: 700;
font-size: var(--text-sm);
color: var(--danger);
margin: 0;
}
.missing-punch-alert__text {
font-size: var(--text-sm);
color: var(--text-1);
margin: 0;
}
.missing-punch-alert__contact {
font-size: var(--text-xs);
color: var(--text-2);
margin: 0;
}
.missing-punch-alert__cta { align-self: flex-end; flex-shrink: 0; }
.missing-punch-alert__btn {
font-size: var(--text-xs);
font-weight: 600;
color: var(--danger);
text-decoration: underline;
white-space: nowrap;
}
/* ── Greeting row (with shift-status pill) ───────────────── */
.emp-dashboard__greeting-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.emp-dashboard__greeting-date {
font-size: var(--text-sm);
color: var(--text-2);
margin: var(--space-1) 0 0;
}
.emp-dashboard__shift-pill { flex-shrink: 0; padding-top: var(--space-1); }
.emp-shift-status-pill {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
font-weight: 600;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-full);
}
.emp-shift-status-pill--on {
background: rgba(var(--success-rgb), 0.15);
color: var(--success);
}
.emp-shift-status-pill__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.emp-shift-status-pill--upcoming {
background: var(--accent-muted);
color: var(--accent);
}
.emp-shift-status-pill--off {
background: var(--surface-2);
color: var(--text-2);
}
/* ── Temporary shift banner ──────────────────────────────── */
.emp-temp-shift-banner {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: rgba(var(--warning-rgb), 0.10);
border: 1px solid rgba(var(--warning-rgb), 0.30);
border-radius: var(--radius);
border-inline-start: 4px solid var(--warning);
}
.emp-temp-shift-banner__icon { color: var(--warning); flex-shrink: 0; }
.emp-temp-shift-banner__body {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.emp-temp-shift-banner__label {
font-size: var(--text-sm);
color: var(--warning);
}
.emp-temp-shift-banner__meta {
font-size: var(--text-xs);
color: var(--text-2);
}
/* ── Shift progress bar ──────────────────────────────────── */
.shift-progress {
margin-top: var(--space-3);
height: 4px;
background: var(--surface-3, var(--border));
border-radius: var(--radius-full);
overflow: hidden;
}
.shift-progress__bar {
height: 100%;
background: var(--accent);
border-radius: var(--radius-full);
transition: width 0.3s ease;
max-width: 100%;
}
.shift-progress__label {
font-size: var(--text-xs);
color: var(--text-2);
margin: var(--space-1) 0 0;
}
.shift-progress__flexible {
font-size: var(--text-xs);
color: var(--text-2);
margin: var(--space-3) 0 0;
font-style: italic;
}
/* ── Late indicator badge ────────────────────────────────── */
.emp-late-badge {
display: inline-block;
font-size: var(--text-xs);
font-weight: 600;
padding: 1px var(--space-2);
background: rgba(var(--danger-rgb), 0.15);
color: var(--danger);
border-radius: var(--radius-full);
margin-inline-start: var(--space-2);
vertical-align: middle;
}
/* ── Upcoming shifts list ────────────────────────────────── */
.emp-upcoming-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.emp-upcoming-item {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-3) var(--space-4);
background: var(--surface-2);
border-radius: var(--radius);
border: 1px solid var(--border);
}
.emp-upcoming-item--temp {
border-color: rgba(var(--warning-rgb), 0.30);
background: rgba(var(--warning-rgb), 0.06);
}
.emp-upcoming-item__main {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.emp-upcoming-item__shift {
font-weight: 600;
font-size: var(--text-sm);
color: var(--text-1);
}
.emp-upcoming-item__meta {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--text-2);
}
.emp-upcoming-item__sep { color: var(--border-strong); }
/* ── Month stats grid ────────────────────────────────────── */
.emp-month-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
.emp-month-stat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-1);
padding: var(--space-4) var(--space-2);
background: var(--surface-2);
border-radius: var(--radius);
border: 1px solid var(--border);
text-align: center;
}
.emp-month-stat--warn { border-color: rgba(var(--warning-rgb), 0.25); }
.emp-month-stat--danger { border-color: rgba(var(--danger-rgb), 0.20); }
.emp-month-stat__value {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--text-1);
line-height: 1;
}
.emp-month-stat--warn .emp-month-stat__value { color: var(--warning); }
.emp-month-stat--danger .emp-month-stat__value { color: var(--danger); }
.emp-month-stat__label {
font-size: var(--text-xs);
color: var(--text-2);
line-height: 1.3;
}
/* ── Notification feed ───────────────────────────────────── */
.emp-notif-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.emp-notif-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--surface-2);
border-radius: var(--radius);
border: 1px solid var(--border);
}
.emp-notif-item__dot {
flex-shrink: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
margin-top: 5px;
}
.emp-notif-item--warning .emp-notif-item__dot { background: var(--warning); }
.emp-notif-item--danger .emp-notif-item__dot { background: var(--danger); }
.emp-notif-item--success .emp-notif-item__dot { background: var(--success); }
.emp-notif-item__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.emp-notif-item__title {
font-size: var(--text-sm);
color: var(--text-1);
}
.emp-notif-item__time {
font-size: var(--text-xs);
color: var(--text-2);
}
/* ============================================================
§ 22 — Branch Manager Dashboard
============================================================ */
.mgr-dashboard {
max-width: 800px;
margin: 0 auto;
padding: var(--space-4) var(--space-4) var(--space-16);
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* Greeting */
.mgr-dashboard__greeting {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
}
.mgr-dashboard__greeting-time {
font-size: var(--text-sm);
color: var(--text-2);
margin: 0 0 var(--space-1);
}
.mgr-dashboard__greeting-name {
font-size: var(--text-2xl);
font-weight: 700;
margin: 0 0 var(--space-1);
color: var(--text-1);
}
.mgr-dashboard__greeting-sub {
font-size: var(--text-sm);
color: var(--text-2);
margin: 0;
}
.mgr-dashboard__date {
font-size: var(--text-sm);
color: var(--text-2);
white-space: nowrap;
padding-top: var(--space-1);
}
/* Alert bar */
.alert-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius);
font-size: var(--text-sm);
}
.alert-bar--info {
background: var(--accent-muted);
border: 1px solid rgba(var(--accent-rgb), 0.25);
color: var(--accent);
}
.alert-bar--warning {
background: var(--warning-muted);
border: 1px solid rgba(var(--warning-rgb), 0.3);
color: var(--warning);
}
.alert-bar svg { flex-shrink: 0; }
.alert-bar__link {
color: var(--warning);
font-weight: 600;
text-decoration: underline;
}
/* Stat cards */
.mgr-dashboard__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
.stat-card--alert .stat-card__value { color: var(--warning); }
/* Sections */
.mgr-dashboard__section { display: flex; flex-direction: column; gap: var(--space-3); }
.mgr-dashboard__section-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.mgr-dashboard__section-title {
font-size: var(--text-base);
font-weight: 600;
margin: 0;
color: var(--text-1);
}
.mgr-dashboard__section-link {
font-size: var(--text-sm);
color: var(--accent);
text-decoration: none;
}
.mgr-dashboard__section-link:hover { text-decoration: underline; }
.mgr-dashboard__show-more {
padding: var(--space-3) var(--space-1);
font-size: var(--text-sm);
}
.mgr-dashboard__empty {
text-align: center;
padding: var(--space-10) var(--space-4);
color: var(--text-2);
font-size: var(--text-sm);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
background: var(--surface-2);
border-radius: var(--radius);
}
/* Pending request review rows */
.request-review-list {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.request-review-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4);
border-bottom: 1px solid var(--border);
}
.request-review-row:last-child { border-bottom: none; }
.request-review-row__info { flex: 1; min-width: 0; }
.request-review-row__name { font-weight: 600; font-size: var(--text-sm); margin: 0 0 var(--space-1); }
.request-review-row__meta {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-1);
}
.request-review-row__date { font-size: var(--text-xs); color: var(--text-2); }
.request-review-row__reason { font-size: var(--text-xs); color: var(--text-2); margin: 0; }
.request-review-row__actions {
display: flex;
flex-direction: column;
gap: var(--space-2);
flex-shrink: 0;
}
@media (min-width: 480px) {
.request-review-row__actions { flex-direction: row; align-items: center; }
}
/* Today's attendance review rows */
.attendance-review-list {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.attendance-review-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border);
}
.attendance-review-row:last-child { border-bottom: none; }
.attendance-review-row__avatar {
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--surface-3, var(--surface-2));
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-sm);
font-weight: 700;
color: var(--text-2);
flex-shrink: 0;
}
.attendance-review-row__info { flex: 1; min-width: 0; }
.attendance-review-row__name { font-size: var(--text-sm); font-weight: 500; margin: 0; }
.attendance-review-row__times { font-size: var(--text-xs); color: var(--text-2); margin: 0; }
.attendance-review-row__right {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.attendance-review-row__edit-link {
font-size: var(--text-xs);
color: var(--accent);
text-decoration: none;
white-space: nowrap;
}
.attendance-review-row__edit-link:hover { text-decoration: underline; }
/* Manager quick actions */
.mgr-dashboard__quick-actions {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
@media (min-width: 640px) {
.mgr-dashboard__quick-actions { flex-direction: row; }
}
.mgr-quick-action {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: var(--surface-2);
border-radius: var(--radius);
text-decoration: none;
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-1);
transition: background 0.15s;
}
.mgr-quick-action:hover { background: var(--surface-3, var(--surface-2)); color: var(--accent); }
/* Utility */
.text-warning { color: var(--warning); }
.ml-2 { margin-left: var(--space-2); }
/* ============================================================
§ 23 — Attendance Edit & Audit Trail
============================================================ */
/* Audit notice banner */
.audit-notice {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: var(--accent-muted);
border: 1px solid rgba(var(--accent-rgb), 0.22);
border-radius: var(--radius);
font-size: var(--text-sm);
color: var(--accent);
}
/* Form enhancements */
.form-label--required::after {
content: " *";
color: var(--danger);
}
.form-hint {
font-size: var(--text-xs);
color: var(--text-2);
margin: var(--space-1) 0 0;
}
.form-hint--info { color: var(--accent); }
.form-hint--advance { color: var(--text-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-6 { margin-bottom: var(--space-6); }
.section-title {
font-size: var(--text-base);
font-weight: 600;
color: var(--text-1);
margin: 0 0 var(--space-3);
}
/* Audit log list */
.audit-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.audit-entry {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.audit-entry__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.audit-entry__editor { font-size: var(--text-sm); font-weight: 600; color: var(--text-1); }
.audit-entry__time { font-size: var(--text-xs); color: var(--text-2); }
.audit-entry__change {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
}
.audit-entry__field { font-weight: 500; color: var(--text-1); margin-right: var(--space-1); }
.audit-entry__old { color: var(--danger); text-decoration: line-through; font-size: var(--text-xs); }
.audit-entry__new { color: var(--success); font-weight: 500; font-size: var(--text-xs); }
.audit-entry__reason {
font-size: var(--text-xs);
color: var(--text-2);
font-style: italic;
margin: 0;
}
/* Compact hero variant for manager's personal card */
.attendance-hero--compact {
padding: var(--space-3) var(--space-4);
}
.attendance-hero--compact .attendance-hero__status { font-size: var(--text-base); }
/* Manager personal check-in area */
.mgr-dashboard__personal { display: flex; flex-direction: column; gap: var(--space-3); }
.mgr-checkin-form { width: 100%; }
/* Unassigned manager indicator */
.td-unassigned {
font-size: var(--text-xs);
color: var(--text-3, var(--text-2));
font-style: italic;
}
/* ── §24 Team Employee Cards ─────────────────────────────────────────────── */
.team-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.team-member {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--surface-2, var(--surface));
border: 1px solid var(--border);
border-radius: var(--radius-lg);
border-left-width: 3px;
}
.team-member--present { border-left-color: var(--success); }
.team-member--late { border-left-color: var(--warning); }
.team-member--early_leave { border-left-color: var(--accent); }
.team-member--incomplete { border-left-color: var(--warning); }
.team-member--absent { border-left-color: var(--border); }
.team-member__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--primary);
color: var(--on-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--text-sm);
font-weight: 700;
flex-shrink: 0;
overflow: hidden;
}
/* Photo fills the circular team-member avatar */
.team-member__avatar__img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.team-member--absent .team-member__avatar {
background: var(--text-3, var(--text-2));
}
.team-member__info {
flex: 1;
min-width: 0;
}
.team-member__name {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-1);
margin: 0 0 var(--space-1) 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.team-member__times {
font-size: var(--text-xs);
color: var(--text-2);
margin: 0;
}
.team-member__times--absent {
color: var(--text-3, var(--text-2));
font-style: italic;
}
.team-member__no-out {
color: var(--warning);
}
.team-member__right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-2);
flex-shrink: 0;
}
.team-status-badge {
display: inline-block;
padding: 2px var(--space-2);
border-radius: var(--radius);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
.team-status-badge--present { background: rgba(var(--success-rgb), 0.15); color: var(--success); }
.team-status-badge--late { background: rgba(var(--warning-rgb), 0.15); color: var(--warning); }
.team-status-badge--early_leave { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.team-status-badge--incomplete { background: rgba(var(--warning-rgb), 0.15); color: var(--warning); }
.team-status-badge--absent,
.team-status-badge--neutral { background: var(--navy-500); color: var(--text-2); }
.team-member__actions {
display: flex;
gap: var(--space-2);
}
.team-action-link {
font-size: var(--text-xs);
font-weight: 500;
color: var(--text-2);
text-decoration: none;
padding: 2px var(--space-2);
border-radius: var(--radius);
border: 1px solid var(--border);
white-space: nowrap;
transition: background 0.15s, color 0.15s;
}
.team-action-link:hover {
background: var(--surface-2, var(--surface));
color: var(--text-1);
}
.team-action-link--edit {
color: var(--accent);
border-color: rgba(var(--accent-rgb), 0.4);
}
.team-action-link--edit:hover {
background: var(--accent-muted);
color: var(--accent);
}
/* ── §25 For-whom bar (new request form) ─────────────────────────────────── */
.for-whom-bar {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--surface-2, var(--surface));
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
flex-wrap: wrap;
}
.for-whom-bar--selected {
background: rgba(var(--accent-rgb), 0.08);
border-color: rgba(var(--accent-rgb), 0.28);
color: var(--text-1);
font-size: var(--text-sm);
align-items: center;
}
.for-whom-bar__label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-2);
white-space: nowrap;
margin: 0;
padding-top: 2px;
}
.for-whom-bar__options {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.for-whom-chip {
display: inline-block;
padding: var(--space-1) var(--space-3);
border-radius: 100px;
border: 1px solid var(--border);
background: var(--surface);
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-2);
text-decoration: none;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
white-space: nowrap;
}
.for-whom-chip:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-muted);
}
.for-whom-chip--active {
background: var(--accent);
color: var(--navy-900);
border-color: var(--accent);
}
.for-whom-bar__change {
font-size: var(--text-sm);
color: var(--accent);
text-decoration: underline;
white-space: nowrap;
}
/* ── §26 Table action links + filter banner ───────────────────────────────── */
.td-actions {
white-space: nowrap;
text-align: right;
}
.table-link {
font-size: var(--text-xs);
font-weight: 500;
color: var(--text-2);
text-decoration: none;
padding: 2px var(--space-2);
border-radius: var(--radius);
transition: color 0.15s;
}
.table-link:hover { color: var(--text-1); }
.table-link--primary { color: var(--primary); }
.table-link--primary:hover { color: var(--primary); text-decoration: underline; }
.table-link + .table-link { margin-left: var(--space-2); }
/* ============================================================
§ 25 — Branch Map Picker
============================================================ */
/* Map canvas inside the branch form */
.branch-map {
width: 100%;
height: 300px;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
overflow: hidden;
position: relative;
z-index: 0; /* keep below dropdowns / flash messages */
}
@media (min-width: 640px) {
.branch-map { height: 380px; }
}
/* Leaflet tile layer inherits the dark theme gracefully;
apply a subtle brightness filter so OSM tiles blend better */
.branch-map .leaflet-tile {
filter: brightness(0.9) saturate(0.85);
}
/* Keep Leaflet popups and controls above the map canvas */
.branch-map .leaflet-pane,
.branch-map .leaflet-control {
z-index: 1;
}
/* ── Map search bar ──────────────────────────────────────────────────────── */
.map-search-bar {
display: flex;
gap: var(--space-2);
align-items: center;
margin-bottom: var(--space-3);
flex-wrap: wrap;
}
.map-search-bar__input {
flex: 1 1 0;
min-width: 0;
}
.map-search-bar__btn {
flex-shrink: 0;
white-space: nowrap;
}
.map-search-bar__locate {
display: flex;
align-items: center;
gap: var(--space-1);
}
@media (max-width: 480px) {
.map-search-bar__locate-label { display: none; }
}
/* Status / error message below the search bar */
.map-search-status {
font-size: var(--text-sm);
color: var(--text-muted);
margin: 0 0 var(--space-3);
line-height: 1.4;
}
.map-search-status--error {
color: var(--danger);
}
/* ============================================================
§ 26 — Attendance Geolocation UI
============================================================ */
/* Status message shown while GPS is being requested */
.geo-capture-status {
font-size: var(--text-sm);
color: var(--text-muted);
margin: var(--space-2) 0 0;
line-height: 1.4;
}
.geo-capture-status--error {
color: var(--danger);
}
/* ── Location map markers (divIcon) ────────────────────────────────────── */
.loc-marker {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
border: 2px solid rgba(var(--overlay-rgb),0.8);
box-shadow: 0 1px 4px rgba(var(--shadow-rgb),0.35);
}
.loc-marker--branch {
width: 28px;
height: 28px;
background: var(--marker-neutral);
color: var(--on-solid);
}
.loc-marker--checkin {
width: 14px;
height: 14px;
background: var(--accent);
}
.loc-marker--checkout {
width: 14px;
height: 14px;
background: var(--success);
}
.loc-marker--sm {
width: 18px;
height: 18px;
font-size: 9px;
border-width: 1.5px;
}
/* ── Legend below the map ──────────────────────────────────────────────── */
.location-map-legend {
display: flex;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-2);
flex-wrap: wrap;
}
.loc-legend-item {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
color: var(--text-muted);
}
.loc-dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.loc-dot--checkin { background: var(--accent); }
.loc-dot--checkout { background: var(--success); }
/* ============================================================
PWA — Safe area insets (iPhone notch / Dynamic Island / home bar)
============================================================ */
@supports (padding: env(safe-area-inset-top)) {
@media (display-mode: standalone) {
/* Push the sticky header below the iOS status bar */
.mobile-header {
padding-top: env(safe-area-inset-top);
height: calc(var(--mobile-header-h) + env(safe-area-inset-top));
}
/* Extend the bottom nav to clear the home indicator */
.bottom-nav {
padding-bottom: env(safe-area-inset-bottom);
height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}
/* Keep page content above the taller bottom nav */
.app-main {
padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
}
}
}
/* ============================================================
PWA — Install banner
============================================================ */
.pwa-banner {
position: fixed;
bottom: calc(var(--bottom-nav-h) + var(--space-3));
left: var(--space-4);
right: var(--space-4);
z-index: 400;
display: flex;
align-items: center;
gap: var(--space-3);
background: var(--navy-700);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-4);
box-shadow: var(--shadow-lg);
animation: pwa-banner-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes pwa-banner-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.pwa-banner[hidden] { display: none; }
.pwa-banner__icon {
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.pwa-banner__text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.pwa-banner__text strong {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-1);
}
.pwa-banner__text span {
font-size: var(--text-xs);
color: var(--text-2);
}
.pwa-banner__actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.pwa-banner__close {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: transparent;
border: none;
color: var(--text-3);
cursor: pointer;
border-radius: var(--radius-sm);
transition: background var(--transition), color var(--transition);
flex-shrink: 0;
}
.pwa-banner__close:hover {
background: var(--navy-600);
color: var(--text-1);
}
/* iOS variant — single-line instruction row */
.pwa-banner--ios { gap: var(--space-2); }
.pwa-banner__ios-icon {
color: var(--accent);
flex-shrink: 0;
}
.pwa-banner__ios-text {
flex: 1;
font-size: var(--text-sm);
color: var(--text-2);
line-height: 1.5;
}
.pwa-banner__ios-text strong { color: var(--text-1); }
/* Adjust bottom offset when home indicator adds extra space */
@supports (padding: env(safe-area-inset-bottom)) {
@media (display-mode: standalone) {
.pwa-banner {
bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + var(--space-3));
}
}
}
/* On desktop, center the banner and cap its width */
@media (min-width: 1024px) {
.pwa-banner {
left: 50%;
right: auto;
bottom: var(--space-8);
width: 420px;
margin-left: -210px;
}
[dir="rtl"] .pwa-banner {
left: auto;
right: 50%;
margin-left: 0;
margin-right: -210px;
}
}
/* ============================================================
SHIFT FORM — conditional field transitions
============================================================ */
@keyframes shift-field-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.shift-field--entering {
animation: shift-field-in 200ms ease both;
}
/* ============================================================
NESTED PENALTY RULES (shift form)
============================================================ */
.penalty-rules-section {
margin-top: var(--space-8);
border-top: 1px solid var(--border);
padding-top: var(--space-6);
}
.penalty-rules-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.penalty-rules-title {
font-size: var(--text-base);
font-weight: 600;
color: var(--text-1);
margin: 0 0 var(--space-1);
}
/* Column header labels — desktop only */
.penalty-rule-headers {
display: none;
}
@media (min-width: 640px) {
.penalty-rule-headers {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 2rem;
gap: var(--space-3);
padding: 0 var(--space-1);
margin-bottom: var(--space-2);
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-3);
}
}
/* Individual rule row */
.penalty-rule-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
align-items: end;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-4);
margin-bottom: var(--space-3);
position: relative;
}
@media (min-width: 640px) {
.penalty-rule-row {
grid-template-columns: 1fr 1fr 1fr 1fr 2rem;
padding: var(--space-3);
align-items: center;
background: transparent;
border: none;
border-radius: 0;
border-bottom: 1px solid var(--border);
margin-bottom: 0;
}
}
/* Mobile: labels visible inside each row */
.form-label--mobile-only {
display: block;
}
@media (min-width: 640px) {
.form-label--mobile-only {
display: none;
}
}
/* Remove button */
.btn-rule-remove {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
background: none;
border: none;
border-radius: var(--radius-sm);
color: var(--text-3);
cursor: pointer;
transition: color 0.15s, background 0.15s;
padding: 0;
/* On mobile: position in top-right corner of the card */
position: absolute;
top: var(--space-3);
right: var(--space-3);
}
@media (min-width: 640px) {
.btn-rule-remove {
position: static;
}
}
.btn-rule-remove:hover {
color: var(--danger);
background: var(--danger-muted, rgba(var(--danger-rgb), 0.1));
}
/* Empty state message */
.penalty-rules-empty {
color: var(--text-3);
font-size: var(--text-sm);
padding: var(--space-4) 0;
text-align: center;
}
.penalty-rules-empty strong {
color: var(--text-2);
}
/* mb-0 utility for form-groups inside rule rows */
.mb-0 { margin-bottom: 0 !important; }
/* =========================================================
LANGUAGE SWITCHER
========================================================= */
/* ── Unified language dropdown ───────────────────────────── */
.lang-switcher {
position: relative;
display: inline-flex;
font-size: var(--text-sm);
}
.lang-switcher__trigger {
display: inline-flex;
align-items: center;
gap: var(--space-2);
background: rgba(var(--overlay-rgb),0.06);
border: 1px solid rgba(var(--overlay-rgb),0.14);
color: rgba(var(--overlay-rgb),0.9);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-3);
cursor: pointer;
font-size: var(--text-sm);
line-height: 1;
transition: border-color var(--transition), background var(--transition), color var(--transition);
font-family: inherit;
}
.lang-switcher__trigger:hover { background: rgba(var(--overlay-rgb),0.1); border-color: rgba(var(--overlay-rgb),0.28); }
.lang-switcher__trigger:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18);
}
.lang-switcher__globe { flex-shrink: 0; opacity: 0.85; }
.lang-switcher__label { flex: 1; font-weight: 500; }
.lang-switcher__chevron { flex-shrink: 0; opacity: 0.7; transition: transform var(--transition); }
.lang-switcher.is-open .lang-switcher__chevron { transform: rotate(180deg); }
.lang-switcher__menu {
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
min-width: 160px;
margin: 0;
padding: var(--space-1);
list-style: none;
background: var(--surface-1);
border: 1px solid rgba(var(--overlay-rgb),0.14);
border-radius: var(--radius-md);
box-shadow: 0 10px 30px rgba(var(--shadow-rgb),0.4);
z-index: 50;
}
.lang-switcher__menu li { margin: 0; padding: 0; }
.lang-switcher__option {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
width: 100%;
background: transparent;
border: 0;
color: rgba(var(--overlay-rgb),0.85);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--text-sm);
font-family: inherit;
text-align: start;
transition: background var(--transition), color var(--transition);
}
.lang-switcher__option:hover { background: rgba(var(--overlay-rgb),0.08); color: var(--text-1); }
.lang-switcher__option.is-active {
background: rgba(var(--accent-rgb),0.12);
color: var(--accent);
font-weight: 600;
}
.lang-switcher__option-label { display: inline-block; }
.lang-switcher__check { color: var(--accent); flex-shrink: 0; }
/* ── Variants ────────────────────────────────────────────── */
/* Auth (login page): compact pill, opens downward */
.lang-switcher--auth .lang-switcher__trigger {
background: rgba(var(--overlay-rgb),0.04);
border-color: rgba(var(--overlay-rgb),0.18);
color: rgba(var(--overlay-rgb),0.88);
border-radius: 999px;
padding: var(--space-2) var(--space-4);
}
.lang-switcher--auth .lang-switcher__menu {
inset-inline-start: 50%;
inset-inline-end: auto;
transform: translateX(-50%);
margin-top: var(--space-2);
}
[dir="rtl"] .lang-switcher--auth .lang-switcher__menu { transform: translateX(50%); }
/* Sidebar: full-width inside the user profile section */
.lang-switcher--sidebar {
display: flex;
margin: var(--space-3) var(--space-4) 0;
padding-top: var(--space-3);
border-top: 1px solid rgba(var(--overlay-rgb),0.08);
}
.lang-switcher--sidebar .lang-switcher__trigger {
width: 100%;
background: rgba(var(--overlay-rgb),0.05);
justify-content: space-between;
}
/* Open-upward variant for dropdowns near the bottom of the viewport (sidebar). */
.lang-switcher--up .lang-switcher__menu {
bottom: 100%;
margin-bottom: var(--space-2);
}
.lang-switcher--up.is-open .lang-switcher__chevron { transform: rotate(0deg); }
.lang-switcher--up .lang-switcher__chevron { transform: rotate(180deg); }
/* RTL: chevron rotates correctly regardless of writing direction. */
[dir="rtl"] .lang-switcher__option { text-align: right; }
/* =========================================================
RTL LAYOUT OVERRIDES — applied when dir="rtl" on
========================================================= */
[dir="rtl"] {
font-family: "Segoe UI", "Tahoma", "Arial", -apple-system, sans-serif;
}
/* Sidebar: flip from left to right */
[dir="rtl"] .sidebar {
inset: 0 0 0 auto;
border-right: none;
border-left: 1px solid var(--border);
transform: translateX(100%);
}
[dir="rtl"] .sidebar.is-open {
transform: translateX(0);
}
@media (min-width: 1024px) {
[dir="rtl"] .sidebar {
transform: translateX(0);
}
/* Main content: margin on right instead of left */
[dir="rtl"] .app-main {
margin-left: 0;
margin-right: var(--sidebar-w);
}
}
/* Nav items: icon on the right (start side in RTL), row right-aligned */
[dir="rtl"] .sidebar__nav-item {
flex-direction: row-reverse;
justify-content: flex-start; /* flex-start in row-reverse = right edge */
}
/* Tables: right-align text */
[dir="rtl"] table {
direction: rtl;
}
[dir="rtl"] th,
[dir="rtl"] td {
text-align: right;
}
/* Forms */
[dir="rtl"] .form-label,
[dir="rtl"] .form-hint {
text-align: right;
}
/* Page headers: html[dir="rtl"] makes direction:rtl inherited by
all children, which naturally reverses flex-row start/end.
No flex-direction override needed — adding row-reverse here
would double-flip back to LTR. */
[dir="rtl"] .page-title,
[dir="rtl"] .page-subtitle {
text-align: start;
}
/* Flash messages */
[dir="rtl"] .flash {
flex-direction: row-reverse;
text-align: right;
}
/* Stats grid */
[dir="rtl"] .stat-card {
text-align: right;
}
/* Auth card */
[dir="rtl"] .auth-card {
text-align: right;
direction: rtl;
}
/* Badges and inline items */
[dir="rtl"] .badge {
direction: rtl;
}
[dir="rtl"] .filter-bar__fields {
direction: rtl;
}
[dir="rtl"] .filter-form {
direction: rtl;
}
[dir="rtl"] .payslip-card__arrow {
transform: scaleX(-1);
}
[dir="rtl"] .pagination__btn--prev,
[dir="rtl"] .pagination__btn--next {
transform: scaleX(-1);
}
/* Bottom nav: icons + labels unchanged (centered, so no flip needed) */
/* Chevron arrow in branch picker: flip */
[dir="rtl"] .branch-picker__btn svg:last-child {
transform: scaleX(-1);
}
/* Employee dashboard section headers */
[dir="rtl"] .emp-dashboard__section-header,
[dir="rtl"] .dashboard__greeting,
[dir="rtl"] .emp-dashboard__greeting {
text-align: right;
direction: rtl;
}
[dir="rtl"] .emp-dashboard__greeting-row { flex-direction: row-reverse; }
[dir="rtl"] .missing-punch-alert { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .missing-punch-alert__cta { align-self: flex-start; }
[dir="rtl"] .emp-temp-shift-banner { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .emp-upcoming-item { text-align: right; }
[dir="rtl"] .emp-upcoming-item__main { flex-direction: row-reverse; }
[dir="rtl"] .emp-upcoming-item__meta { flex-direction: row-reverse; }
[dir="rtl"] .emp-notif-item { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .emp-month-stats { direction: rtl; }
/* Sidebar user block */
[dir="rtl"] .sidebar__user {
flex-direction: row-reverse;
}
[dir="rtl"] .sidebar__user-info {
text-align: right;
}
/* Sidebar footer */
[dir="rtl"] .sidebar__footer {
direction: rtl;
}
/* Sign-out item */
[dir="rtl"] .sidebar__nav-item--sign-out {
flex-direction: row-reverse;
justify-content: flex-start;
}
/* Form card sections */
[dir="rtl"] .form-card,
[dir="rtl"] .section-title {
text-align: right;
}
/* Quick actions */
[dir="rtl"] .emp-dashboard__quick-actions {
direction: rtl;
}
/* Select dropdown: flip arrow to left side in RTL */
[dir="rtl"] select.form-control {
background-position: left 12px center;
padding-right: var(--space-3);
padding-left: 40px;
}
/* Form error bullet list: indent from right in RTL */
[dir="rtl"] .form-error ul {
padding-left: 0;
padding-right: var(--space-4);
}
/* Table headers: already covered by th override, but be explicit */
[dir="rtl"] thead th {
text-align: right;
}
/* ml-2 utility: flip margin direction */
[dir="rtl"] .ml-2 {
margin-left: 0;
margin-right: var(--space-2);
}
/* Audit entry field label: flip margin */
[dir="rtl"] .audit-entry__field {
margin-right: 0;
margin-left: var(--space-1);
}
/* Team member status border: flip from left to right */
[dir="rtl"] .team-member {
border-left-width: 0;
border-right-width: 3px;
border-right-style: solid;
border-right-color: var(--border);
}
[dir="rtl"] .team-member--present { border-right-color: var(--success); }
[dir="rtl"] .team-member--late { border-right-color: var(--warning); }
[dir="rtl"] .team-member--early_leave { border-right-color: var(--accent); }
[dir="rtl"] .team-member--incomplete { border-right-color: var(--warning); }
[dir="rtl"] .team-member--absent { border-right-color: var(--border); }
/* TD-actions: logical alignment in RTL */
[dir="rtl"] .td-actions {
text-align: start;
justify-content: flex-end;
}
/* Table links: flip spacing direction */
[dir="rtl"] .table-link + .table-link {
margin-left: 0;
margin-right: var(--space-2);
}
/* Btn-rule-remove: flip corner position */
[dir="rtl"] .btn-rule-remove {
right: auto;
left: var(--space-3);
}
/* Mgr-dashboard headings */
[dir="rtl"] .mgr-dashboard__greeting,
[dir="rtl"] .mgr-dashboard__section-header,
[dir="rtl"] .mgr-dashboard__section-title,
[dir="rtl"] .dashboard-section__title,
[dir="rtl"] .dashboard__greeting-name,
[dir="rtl"] .dashboard__greeting-time {
text-align: right;
}
/* Owner dashboard: right-align text blocks */
[dir="rtl"] .owner-dashboard__greeting,
[dir="rtl"] .owner-section__title,
[dir="rtl"] .owner-section__header,
[dir="rtl"] .owner-dashboard__greeting-time,
[dir="rtl"] .owner-dashboard__greeting-name,
[dir="rtl"] .owner-dashboard__greeting-sub {
text-align: right;
}
[dir="rtl"] .who-here-card__body,
[dir="rtl"] .who-here-card__name,
[dir="rtl"] .who-here-card__branch {
text-align: right;
}
[dir="rtl"] .owner-quick-action__text,
[dir="rtl"] .owner-quick-action__label,
[dir="rtl"] .owner-quick-action__sub {
text-align: right;
}
[dir="rtl"] .summary-stat-row__label { text-align: right; }
[dir="rtl"] .branch-snapshot__name { text-align: right; }
[dir="rtl"] .trend-chip__label { direction: rtl; }
/* Branch picker: flip layout */
[dir="rtl"] .branch-picker {
direction: rtl;
}
/* Attendance hero: right-align labels */
[dir="rtl"] .attendance-hero__label,
[dir="rtl"] .attendance-hero__time {
text-align: right;
}
/* Payslip summary numbers: keep right in RTL (numerals read same direction) */
[dir="rtl"] .payroll-summary-card {
direction: rtl;
}
/* text-right utility: flip in RTL */
[dir="rtl"] .text-right {
text-align: left;
}
/* text-left utility: flip in RTL */
[dir="rtl"] .text-left {
text-align: right;
}
/* Form label optional tag: keep start-aligned in RTL */
[dir="rtl"] .form-label {
direction: rtl;
}
/* Legacy 600px block removed — superseded by the comprehensive 640px card-table
block below. Keeping a single definition avoids ::before pseudo-element
conflicts that caused invisible content on mobile. */
/* Back-link chevron: flip from left-pointing to right-pointing in RTL */
[dir="rtl"] .back-link svg {
transform: scaleX(-1);
}
/* =========================================================
MOBILE RESPONSIVE IMPROVEMENTS
========================================================= */
/* Ensure all table wrappers allow horizontal scroll */
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
}
/* Tables scroll horizontally inside .table-wrap; 300px prevents total collapse */
table {
min-width: 300px;
width: 100%;
}
/* On small screens, stack form grids to single column */
@media (max-width: 640px) {
.form-grid {
grid-template-columns: 1fr !important;
}
.form-group[style*="grid-column"] {
grid-column: 1 / -1 !important;
}
/* Page header: stack on mobile */
.page-header {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.page-header .btn,
.page-header .page-actions {
width: 100%;
}
.page-header__actions {
width: 100%;
justify-content: flex-start;
}
/* Admin page padding reduction */
.admin-page {
padding: var(--space-4);
}
/* Stats grid: 2 columns on mobile */
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Form card */
.form-card {
padding: var(--space-4);
}
/* Payroll summary */
.payroll-summary-card {
font-size: var(--text-sm);
}
/* Employee dashboard CTA */
.emp-dashboard__cta {
padding: 0 var(--space-2);
}
/* Branch picker */
.branch-picker {
gap: var(--space-2);
}
/* Quick actions: 2x2 grid on mobile */
.emp-dashboard__quick-actions {
grid-template-columns: repeat(2, 1fr);
}
/* Manager dashboard stat cards: 2 columns on mobile */
.mgr-dashboard__stats {
grid-template-columns: repeat(2, 1fr);
}
/* Area manager dashboard stat cards: 2 columns on mobile */
.area-mgr-stats {
grid-template-columns: repeat(2, 1fr);
}
/* Accountant dashboard: stack on mobile */
.accountant-dashboard__stats {
grid-template-columns: repeat(2, 1fr);
}
/* Filter bar: single column on narrow screens */
.filter-bar__fields {
grid-template-columns: 1fr;
}
/* Full-width action row on mobile */
.filter-bar__actions {
flex-direction: column;
align-items: stretch;
}
.filter-bar__actions .btn {
width: 100%;
justify-content: center;
text-align: center;
}
/* iOS/Android: normalise select appearance so our border/bg styling shows */
.filter-bar__select {
-webkit-appearance: none;
appearance: none;
}
/* Toggles: tighten spacing so they wrap cleanly in 2 columns */
.filter-bar__toggles {
gap: var(--space-3) var(--space-5);
}
}
@media (max-width: 480px) {
/* Even smaller screens: compact tables */
table {
font-size: var(--text-sm);
}
th, td {
padding: var(--space-2) var(--space-3);
}
}
/* RTL mobile header: flip hamburger/brand order */
[dir="rtl"] .mobile-header {
flex-direction: row-reverse;
}
/* Sidebar header: right-align brand in RTL */
[dir="rtl"] .sidebar__header {
justify-content: flex-end;
}
/* Sidebar nav: ensure correct text alignment for all items */
[dir="rtl"] .sidebar__nav {
direction: rtl;
}
/* Sidebar section label: right-align the uppercase heading */
[dir="rtl"] .sidebar__section-label {
text-align: right;
padding-right: var(--space-3);
padding-left: 0;
}
/* Active indicator flips to inline-start (right edge) in RTL */
[dir="rtl"] .sidebar__nav-item.is-active {
box-shadow: inset -2px 0 0 var(--accent);
}
/* Admin group summary: icon on the right in RTL */
[dir="rtl"] .sidebar__group > summary {
flex-direction: row-reverse;
}
/* Sub-items: logical padding is already correct via padding-inline-start */
/* Attendance hero: keep time row readable on mobile */
@media (max-width: 480px) {
.attendance-hero__times {
flex-wrap: wrap;
gap: var(--space-1);
}
}
/* RTL + mobile: ensure quick actions grid mirrors correctly */
@media (max-width: 640px) {
[dir="rtl"] .emp-dashboard__quick-actions {
direction: rtl;
grid-template-columns: repeat(2, 1fr);
}
/* Manager RTL stats */
[dir="rtl"] .mgr-dashboard__stats {
direction: rtl;
grid-template-columns: repeat(2, 1fr);
}
/* Table cell alignment in RTL on mobile */
[dir="rtl"] th,
[dir="rtl"] td {
text-align: right;
}
/* Branch picker buttons in RTL */
[dir="rtl"] .branch-picker__btn {
flex-direction: row-reverse;
}
/* Filter bar RTL: fields already direction:rtl from base rule; ensure select arrow flips */
[dir="rtl"] .filter-bar__select {
background-position: left 12px center;
padding-right: var(--space-3);
padding-left: 40px;
}
}
/* ============================================================
CARD TABLE LAYOUT — mobile transformation
Add class "table-wrap--cards" alongside "table-wrap".
JavaScript in application.js reads | text and sets
data-label attributes on | elements automatically.
============================================================ */
@media (max-width: 768px) {
/* Disable the scroll container; cards stack vertically instead */
.table-wrap--cards {
border: none;
border-radius: 0;
overflow: visible;
-webkit-overflow-scrolling: auto;
}
/* Hide column headers — labels come from ::before pseudo-elements */
.table-wrap--cards thead {
display: none;
}
/* Table itself collapses to full width, no enforced min-width */
.table-wrap--cards table {
min-width: 0;
width: 100%;
}
/* Rows become individual cards */
.table-wrap--cards tbody {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.table-wrap--cards tbody tr {
display: block;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-3) var(--space-4);
}
.table-wrap--cards tbody tr:hover {
background: var(--navy-600);
}
/* Cells become label–value rows */
.table-wrap--cards tbody td {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-2) 0;
border-bottom: 1px solid rgba(var(--overlay-rgb), 0.04);
gap: var(--space-3);
min-height: 2rem;
white-space: normal;
}
.table-wrap--cards tbody td:first-child {
padding-top: 0;
}
.table-wrap--cards tbody td:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* The column label (injected via JS data-label attribute) */
.table-wrap--cards tbody td[data-label]::before {
content: attr(data-label);
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-2);
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
flex-shrink: 0;
min-width: 5.5rem;
}
/* Actions cell: no label, buttons flush right, separated from data rows */
.table-wrap--cards tbody td.td-actions {
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--border);
border-bottom: none;
margin-top: var(--space-1);
}
.table-wrap--cards tbody td.td-actions::before {
display: none;
}
/* Deduction note sub-rows (payroll entry page) */
.table-wrap--cards tbody tr.deduction-note-row {
padding: 0;
border: none;
background: transparent;
margin-top: calc(-1 * var(--space-3));
border-radius: 0;
}
.table-wrap--cards tbody tr.deduction-note-row td {
display: block;
border: none;
padding: var(--space-1) var(--space-4);
}
.table-wrap--cards tbody tr.deduction-note-row td::before {
display: none;
}
/* RTL: direction:rtl inherited from already reverses flex-row
order — ::before label sits at inline-start (right), value at inline-end (left).
Explicit row-reverse would double-flip back to LTR. */
[dir="rtl"] .table-wrap--cards tbody td {
text-align: end;
}
[dir="rtl"] .table-wrap--cards tbody td::before {
text-align: start;
}
[dir="rtl"] .table-wrap--cards tbody td.td-actions {
justify-content: flex-end;
}
/* Empty state cell: full-width block, suppress the ::before label */
.table-wrap--cards tbody td.td-empty {
display: block;
text-align: center;
justify-content: center;
}
.table-wrap--cards tbody td.td-empty::before {
display: none;
}
/* Totals footer: collapse the table-footer-group so it participates
in the flex card stack, not a dangling raw table fragment */
.table-wrap--cards tfoot {
display: block;
margin-top: var(--space-2);
}
.table-wrap--cards tfoot tr.totals-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
justify-content: flex-end;
align-items: baseline;
background: var(--surface-2);
border-radius: var(--radius);
padding: var(--space-3) var(--space-4);
}
/* Hide the colspan label cell and the trailing empty spacer cell */
.table-wrap--cards tfoot tr.totals-row td[colspan] {
display: none;
}
/* Value cells: stack label above value, no table borders */
.table-wrap--cards tfoot tr.totals-row td:not([colspan]) {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 0;
border: none;
text-align: end;
gap: var(--space-1);
min-height: 0;
white-space: nowrap;
}
.table-wrap--cards tfoot tr.totals-row td:not([colspan])[data-label]::before {
content: attr(data-label);
font-size: var(--text-xs);
color: var(--text-2);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
[dir="rtl"] .table-wrap--cards tfoot tr.totals-row {
justify-content: flex-start;
}
[dir="rtl"] .table-wrap--cards tfoot tr.totals-row td:not([colspan]) {
align-items: flex-start;
text-align: start;
}
}
/* ============================================================
16. PERMISSION ROLES
============================================================ */
/* Index grid */
.permission-roles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-4);
}
.permission-role-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-4);
transition: border-color var(--transition);
}
.permission-role-card:hover {
border-color: var(--accent);
}
.permission-role-card__header {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.permission-role-card__title-row {
display: flex;
align-items: center;
gap: var(--space-2);
}
.permission-role-card__name {
font-size: var(--text-base);
font-weight: 600;
color: var(--text-1);
margin: 0;
}
.permission-role-card__desc {
font-size: var(--text-sm);
color: var(--text-3);
margin: 0;
}
.permission-role-card__stats {
display: flex;
gap: var(--space-4);
}
.permission-role-card__stat {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
color: var(--text-3);
}
.permission-role-card__preview {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.permission-role-card__actions {
display: flex;
gap: var(--space-2);
margin-top: auto;
}
/* Permission tags (card preview) */
.permission-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 500;
white-space: nowrap;
}
.permission-tag--more {
background: var(--surface-2);
color: var(--text-3);
}
/* Permission groups (form + show) */
/* ── Permission Role form ──────────────────────────────────────────────────── */
.permission-groups-header {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
flex-wrap: wrap;
}
.permission-groups-header__actions {
display: flex;
gap: var(--space-2);
margin-inline-start: auto;
}
.form-section-title {
font-size: var(--text-base);
font-weight: 600;
color: var(--text-1);
margin: 0;
}
/* Search box */
.permission-search {
position: relative;
margin-bottom: var(--space-4);
}
.permission-search__input {
padding-left: var(--space-8);
width: 100%;
}
.permission-search__icon {
position: absolute;
left: var(--space-3);
top: 50%;
transform: translateY(-50%);
color: var(--text-3);
pointer-events: none;
}
[dir="rtl"] .permission-search__input {
padding-left: var(--space-3);
padding-right: var(--space-8);
}
[dir="rtl"] .permission-search__icon {
left: auto;
right: var(--space-3);
}
.permission-no-results {
text-align: center;
padding: var(--space-8) var(--space-4);
color: var(--text-3);
font-size: var(--text-sm);
}
/* Groups layout — responsive grid: 3-col desktop, 2-col tablet, 1-col mobile */
.permission-groups {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
align-items: start;
}
@media (max-width: 1100px) {
.permission-groups { grid-template-columns: repeat(2, 1fr); }
}
/* Collapsible group (uses /) */
.permission-group {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.permission-group__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
background: var(--surface-2);
list-style: none;
cursor: pointer;
user-select: none;
gap: var(--space-3);
}
.permission-group__header::-webkit-details-marker { display: none; }
.permission-group__header-left {
display: flex;
align-items: center;
gap: var(--space-2);
flex: 1;
min-width: 0;
}
.permission-group__chevron {
color: var(--text-3);
flex-shrink: 0;
transition: transform 0.15s;
}
details[open] .permission-group__chevron {
transform: rotate(0deg);
}
details:not([open]) .permission-group__chevron {
transform: rotate(-90deg);
}
.permission-group__title {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-1);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.permission-group__count {
font-size: var(--text-xs);
color: var(--text-3);
}
.permission-group__select-all {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--text-3);
cursor: pointer;
flex-shrink: 0;
}
.permission-group__select-all:hover {
color: var(--text-2);
}
/* Cards stack vertically within each group column */
.permission-group__perms {
display: flex;
flex-direction: column;
border-top: 1px solid var(--border);
}
/* Individual permission card */
.permission-card {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-subtle, color-mix(in srgb, var(--border) 50%, transparent));
transition: background var(--transition);
}
.permission-card:hover {
background: var(--surface-2);
}
.permission-card__top {
display: flex;
}
.permission-card__toggle {
display: flex;
align-items: flex-start;
gap: var(--space-3);
cursor: pointer;
width: 100%;
}
.permission-card__info {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.permission-toggle__input {
width: 15px;
height: 15px;
margin-top: 2px;
accent-color: var(--accent);
flex-shrink: 0;
cursor: pointer;
}
.permission-toggle__name {
font-size: var(--text-sm);
color: var(--text-1);
font-weight: 500;
}
.permission-toggle__desc {
font-size: var(--text-xs);
color: var(--text-3);
line-height: 1.4;
}
/* Dependency hint */
.permission-deps {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1);
margin-top: var(--space-2);
padding-left: calc(15px + var(--space-3));
font-size: 11px;
color: var(--text-3);
}
.permission-deps svg {
flex-shrink: 0;
opacity: 0.6;
}
.permission-dep-tag {
display: inline-flex;
align-items: center;
padding: 1px 6px;
background: var(--surface-3);
border-radius: var(--radius-sm);
font-size: 11px;
color: var(--text-2);
font-weight: 500;
}
[dir="rtl"] .permission-deps {
padding-left: 0;
padding-right: calc(15px + var(--space-3));
}
/* Pulse animations when dependencies are auto-enabled or auto-disabled */
@keyframes dep-enable-pulse {
0% { background: rgba(var(--accent-rgb),0.0); }
30% { background: rgba(var(--accent-rgb),0.14); }
100% { background: transparent; }
}
@keyframes dep-disable-pulse {
0% { background: rgba(var(--warning-rgb),0.0); }
30% { background: rgba(var(--warning-rgb),0.12); }
100% { background: transparent; }
}
.permission-card--auto-enabled {
animation: dep-enable-pulse 1.4s ease-out forwards;
}
.permission-card--auto-disabled {
animation: dep-disable-pulse 1.4s ease-out forwards;
}
/* Scope selector row */
.permission-scope-row {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-2);
padding-left: calc(15px + var(--space-3));
}
.permission-scope-row__label {
font-size: var(--text-xs);
color: var(--text-3);
white-space: nowrap;
flex-shrink: 0;
}
.permission-scope-select {
font-size: var(--text-xs);
padding: 2px var(--space-2);
height: auto;
min-height: unset;
flex: 1;
}
.form-control--xs {
padding: 3px var(--space-2);
font-size: var(--text-xs);
height: auto;
min-height: unset;
}
[dir="rtl"] .permission-scope-row {
padding-left: 0;
padding-right: calc(15px + var(--space-3));
}
/* ── Permission badges (show page) ─────────────────────────────────────────── */
.permission-groups--readonly .permission-group__perms {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
}
.permission-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 3px 10px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 500;
}
.permission-badge--granted {
background: color-mix(in srgb, var(--success) 15%, transparent);
color: var(--success);
}
.permission-badge--denied {
background: var(--surface-2);
color: var(--text-3);
}
/* Scope chip inside a permission badge */
.permission-scope-chip {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: var(--radius-sm);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
margin-left: var(--space-1);
}
.permission-scope-chip--self,
.permission-scope-chip--self_only {
background: rgba(var(--neutral-rgb), 0.15);
color: var(--text-3);
}
.permission-scope-chip--branch,
.permission-scope-chip--branch_only {
background: rgba(var(--warning-rgb), 0.15);
color: var(--warning);
}
.permission-scope-chip--area {
background: rgba(var(--accent-rgb), 0.15);
color: var(--accent);
}
.permission-scope-chip--business,
.permission-scope-chip--business_wide {
background: rgba(var(--success-rgb), 0.15);
color: var(--success);
}
/* User assign inline form */
.permission-role-assign-form {
padding: var(--space-4);
border-bottom: 1px solid var(--border);
}
.inline-form {
display: flex;
gap: var(--space-3);
align-items: center;
flex-wrap: wrap;
}
.inline-form .form-control--sm {
flex: 1;
min-width: 200px;
}
/* Card header layout */
.card__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border);
}
.card__title {
font-size: var(--text-base);
font-weight: 600;
color: var(--text-1);
margin: 0;
}
.mb-6 { margin-bottom: var(--space-6); }
/* Page header with actions */
.page-header__actions {
display: flex;
gap: var(--space-2);
align-items: center;
}
.page-header__title-row {
display: flex;
align-items: center;
gap: var(--space-3);
}
.btn-danger-ghost {
color: var(--danger);
}
.btn-danger-ghost:hover {
background: color-mix(in srgb, var(--danger) 10%, transparent);
}
/* Empty state compact variant */
.empty-state--compact {
padding: var(--space-6) var(--space-4);
}
/* Section card — collapsible content sections within a page */
.section-card {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin-bottom: var(--space-5);
}
.section-card .section-title {
margin-top: 0;
margin-bottom: var(--space-4);
}
/* Employee payslip cards (payroll index — employee view) */
.payslip-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.payslip-card {
display: block;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
text-decoration: none;
color: inherit;
transition: box-shadow 0.15s, border-color 0.15s;
}
.payslip-card:hover {
border-color: var(--primary);
box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.08);
}
.payslip-card__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-3);
}
.payslip-card__month {
font-weight: 600;
font-size: var(--text-base);
}
.payslip-card__arrow {
font-size: 1.4rem;
color: var(--text-2);
line-height: 1;
}
.payslip-card__body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--space-2) var(--space-4);
border-top: 1px solid var(--border);
padding-top: var(--space-3);
}
.payslip-card__stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.payslip-card__stat-label {
font-size: 0.72rem;
color: var(--text-2);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.payslip-card__stat-value {
font-size: var(--text-sm);
font-weight: 500;
}
.payslip-card__net {
grid-column: 1 / -1;
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--border);
font-size: var(--text-sm);
color: var(--text-2);
}
.payslip-card__net strong {
font-size: var(--text-base);
color: var(--text-1);
}
/* RTL: direction:rtl from naturally reverses flex row order; no
row-reverse override needed. margin-inline-start: auto on the base rule
already handles the push-to-end spacing in both directions. */
[dir="rtl"] .permission-scope-chip {
margin-left: 0;
margin-right: var(--space-1);
}
@media (max-width: 640px) {
.permission-roles-grid {
grid-template-columns: 1fr;
}
.permission-groups {
grid-template-columns: 1fr;
}
.permission-role-card__actions {
flex-wrap: wrap;
}
.permission-role-card__actions .btn {
flex: 1;
justify-content: center;
}
.inline-form {
flex-direction: column;
align-items: stretch;
}
.page-header__actions {
flex-wrap: wrap;
}
/* Mobile: smaller page title to avoid overflow in narrow headers */
.page-title {
font-size: var(--text-xl);
}
/* Mobile: allow long subtitles to wrap */
.page-subtitle {
overflow-wrap: break-word;
word-break: break-word;
}
/* Mobile: allow long values (coords, branch names) in info-card rows to wrap */
.info-card__row {
flex-wrap: wrap;
gap: var(--space-1);
}
.info-card__row > *:last-child {
overflow-wrap: break-word;
word-break: break-word;
min-width: 0;
}
/* Mobile: form-page already has side padding, reduce top padding slightly */
.form-page {
padding-top: var(--space-4);
}
/* Mobile: section title margins */
.section-title {
font-size: var(--text-base);
}
}
/* ============================================================
§30 — MOBILE DASHBOARD (375–430px)
Targets all team cards, stat cards, hero, action buttons
============================================================ */
@media (max-width: 640px) {
/* ── Dashboard container padding: tighter on phones ── */
.mgr-dashboard,
.emp-dashboard {
padding-inline: var(--space-3);
gap: var(--space-4);
}
/* ── Stat cards: reduce padding so numbers breathe ── */
.stat-card {
padding: var(--space-3) var(--space-3);
}
.stat-card__value {
font-size: var(--text-2xl);
}
.stat-card__label {
font-size: 10px;
}
/* ── Team member card: 2-row layout ─────────────────────
Row 1: [avatar] [name + times]
Row 2: [status badge] ················ [action links]
── */
.team-member {
flex-wrap: wrap;
padding: var(--space-3);
gap: var(--space-2);
align-items: flex-start;
}
/* Row 1: avatar + info fill the row */
.team-member__info {
flex: 1;
min-width: 0;
}
/* Row 2: full-width footer with badge ↔ actions */
.team-member__right {
width: 100%;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--border);
padding-top: var(--space-2);
}
/* Ensure actions wrap if still squeezed */
.team-member__actions {
flex-wrap: wrap;
gap: var(--space-1);
justify-content: flex-end;
}
/* Bigger touch targets on mobile */
.team-action-link {
padding: var(--space-1) var(--space-2);
min-height: 28px;
display: inline-flex;
align-items: center;
}
/* ── Mgr greeting: allow branch sub-text to wrap ── */
.mgr-dashboard__greeting {
flex-wrap: wrap;
gap: var(--space-2);
}
.mgr-dashboard__greeting-sub,
.emp-dashboard__greeting-sub {
overflow-wrap: break-word;
word-break: break-word;
}
/* ── Attendance hero: trim padding on mobile ── */
.attendance-hero {
padding: var(--space-4);
gap: var(--space-3);
}
/* ── Section header: prevent "view all" link from overflowing ── */
.mgr-dashboard__section-header,
.emp-dashboard__section-header {
flex-wrap: wrap;
gap: var(--space-1);
}
/* ── Quick actions grid: 2 columns on mobile (mgr) ── */
.mgr-dashboard__quick-actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-2);
}
.mgr-quick-action {
justify-content: flex-start;
}
}
/* ── Extra-narrow (< 480px): final squeeze fixes ── */
@media (max-width: 480px) {
/* Reduce btn-xl padding for check-in CTA */
.btn-xl {
padding: var(--space-4) var(--space-6);
font-size: var(--text-base);
}
/* Greeting name: scale down on very narrow screens */
.mgr-dashboard__greeting-name,
.emp-dashboard__greeting-name {
font-size: var(--text-xl);
}
/* Date: allow to sit below greeting on very small screens */
.mgr-dashboard__date {
flex-basis: 100%;
padding-top: 0;
}
/* Stat card value: compact on tiny screens */
.stat-card__value {
font-size: var(--text-xl);
}
/* Attendance hero status: slightly smaller */
.attendance-hero__status {
font-size: var(--text-lg);
}
}
/* ── RTL mobile: direction:rtl from already reverses flex-row items.
Only override what direction alone can't handle (justify-content). ── */
@media (max-width: 640px) {
[dir="rtl"] .team-member__actions {
justify-content: flex-start;
}
}
/* ── Already-paid section (shared: payroll_adjustments + adjustments forms) ── */
.cash-incentive-paid-section {
background: var(--navy-600);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-4);
}
/* Cover both naming conventions: form-check__label (BEM) and form-check-label */
.cash-incentive-paid-section .form-check__label,
.cash-incentive-paid-section .form-check-label {
color: var(--text-1);
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
}
/* Checkbox tick colour inside the section */
.cash-incentive-paid-section .form-check input[type="checkbox"] {
border-color: var(--navy-400);
background: var(--navy-700);
}
.cash-incentive-paid-section .form-check input[type="checkbox"]:hover {
border-color: var(--accent);
}
.cash-incentive-paid-section .form-check input[type="checkbox"]:focus-visible {
outline: 2px solid var(--accent-ring);
outline-offset: 2px;
}
.already-paid-accounting-note {
font-size: var(--text-sm);
color: var(--text-2);
margin: var(--space-2) 0 0;
line-height: 1.6;
}
.already-paid-card {
background: var(--warning-muted);
border: 1px solid rgba(var(--warning-rgb), 0.3);
border-radius: var(--radius-sm);
padding: var(--space-4);
margin-top: var(--space-3);
}
.already-paid-card__heading {
font-size: var(--text-sm);
font-weight: 600;
color: var(--warning);
margin-bottom: var(--space-3);
}
/* Inside the amber card, form labels and hints stay readable */
.already-paid-card .form-label {
color: var(--text-1);
}
.already-paid-card .form-hint {
color: var(--text-2);
}
[dir="rtl"] .already-paid-accounting-note {
text-align: right;
}
/* ── Alert boxes ────────────────────────────────────────────────────────────── */
.alert {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius);
font-size: var(--text-sm);
line-height: 1.5;
margin-block-end: var(--space-4);
}
.alert-info {
background: var(--accent-muted);
border: 1px solid rgba(var(--accent-rgb), 0.25);
color: var(--accent);
}
.alert-warning {
background: var(--warning-muted);
border: 1px solid rgba(var(--warning-rgb), 0.3);
color: var(--warning);
}
.alert-success {
background: var(--success-muted);
border: 1px solid rgba(var(--success-rgb), 0.25);
color: var(--success);
}
.alert-danger {
background: var(--danger-muted, rgba(var(--danger-rgb), 0.08));
border: 1px solid rgba(var(--danger-rgb), 0.25);
color: var(--danger);
}
/* ── File upload area ───────────────────────────────────────────────────────── */
.file-upload-area {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-8) var(--space-6);
border: 2px dashed var(--border);
border-radius: var(--radius);
background: var(--surface-1);
text-align: center;
transition: border-color 0.15s, background 0.15s;
cursor: default;
}
.file-upload-area--active,
.file-upload-area:has(input:focus-visible) {
border-color: var(--accent);
background: var(--accent-muted);
}
.file-upload-area__hint {
font-size: var(--text-sm);
color: var(--text-2);
margin: 0 0 0.25rem;
}
.file-upload-area__filename {
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-2);
}
.file-upload-area__filename--selected {
color: var(--accent);
}
/* ── Payroll-specific layout helpers ────────────────────────────────────────── */
/* Month label + status badge row inside payslip card header */
.payslip-card__month-row {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
/* Branch manager review notice: list of branch/status pairs */
.branch-review-list {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.branch-review-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
}
/* Table cell containing multiple stacked badges (status + review badge) */
.td-badges {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
/* Section card with extra top separation (e.g. audit log below entries table) */
.section-card--top {
margin-top: var(--space-6);
}
/* Spacing between a table wrap and a following section card */
.table-wrap + .section-card {
margin-top: var(--space-6);
}
/* ── Owner (Super-Admin) Dashboard ─────────────────────────────────────────── */
/* Page wrapper: provides padding, max-width and scroll clearance */
.owner-dashboard {
max-width: 1200px;
margin: 0 auto;
padding: var(--space-5) var(--space-4) var(--space-16);
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* ── Header ─────────────────────────────────────────────────────────────── */
.owner-dashboard__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-3);
}
.owner-dashboard__greeting-time {
font-size: var(--text-sm);
color: var(--text-3);
margin: 0 0 var(--space-1);
}
.owner-dashboard__greeting-name {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--text-1);
margin: 0;
line-height: 1.15;
}
.owner-dashboard__greeting-sub {
font-size: var(--text-sm);
color: var(--accent);
font-weight: 500;
margin: var(--space-1) 0 0;
}
.owner-dashboard__date-block {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
padding: var(--space-3) var(--space-4);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.owner-dashboard__date {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-1);
}
.owner-dashboard__today-label {
font-size: var(--text-xs);
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.07em;
}
/* ── Stats grid: 2-col mobile → 3-col tablet → 6-col desktop ─────────────── */
.owner-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
@media (min-width: 640px) {
.owner-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.owner-stats-grid { grid-template-columns: repeat(6, 1fr); }
}
/* Icon row inside stat cards */
.stat-card__icon-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: var(--space-2);
}
.stat-card__icon { color: var(--text-3); flex-shrink: 0; }
/* Per-variant icon colors */
.stat-card--success .stat-card__icon { color: var(--success); }
.stat-card--accent .stat-card__icon { color: var(--accent); }
.stat-card--warning .stat-card__icon { color: var(--warning); }
.stat-card--danger .stat-card__icon { color: var(--danger); }
/* Subtle inner background per variant */
.stat-card--success { background: rgba(var(--success-rgb),0.04); }
.stat-card--accent { background: rgba(var(--accent-rgb),0.04); }
.stat-card--warning { background: rgba(var(--warning-rgb),0.04); }
.stat-card--danger { background: rgba(var(--danger-rgb),0.04); }
/* ── Trend badges (δ vs yesterday) ──────────────────────────────────────── */
.trend-bar {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
padding: var(--space-3) var(--space-4);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.trend-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: var(--text-xs);
font-weight: 600;
padding: 3px 9px;
border-radius: var(--radius-full);
font-variant-numeric: tabular-nums;
}
.trend-chip--up { background: rgba(var(--success-rgb),0.14); color: var(--success); }
.trend-chip--down { background: rgba(var(--danger-rgb),0.14); color: var(--danger); }
.trend-chip--same { background: var(--surface-2); color: var(--text-3); }
.trend-chip--warn { background: rgba(var(--warning-rgb),0.14); color: var(--warning); }
.trend-chip__label { font-weight: 400; color: var(--text-3); }
.trend-bar__divider {
width: 1px;
height: 18px;
background: var(--border);
flex-shrink: 0;
}
.trend-bar__avg {
font-size: var(--text-xs);
color: var(--text-3);
margin-inline-start: auto;
white-space: nowrap;
}
.trend-bar__avg strong { color: var(--text-2); font-variant-numeric: tabular-nums; }
/* ── Reusable section container ─────────────────────────────────────────── */
.owner-section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
}
.owner-section__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
flex-wrap: wrap;
gap: var(--space-2);
}
.owner-section__title {
font-size: var(--text-base);
font-weight: 700;
color: var(--text-1);
margin: 0;
}
.owner-section__link {
font-size: var(--text-sm);
color: var(--accent);
text-decoration: none;
white-space: nowrap;
}
.owner-section__link:hover { text-decoration: underline; }
/* Empty state inside a section */
.owner-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-8) var(--space-4);
color: var(--text-3);
text-align: center;
font-size: var(--text-sm);
}
.owner-empty svg { opacity: 0.35; }
/* ── Two-column layout ───────────────────────────────────────────────────── */
.owner-two-col {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
@media (min-width: 900px) {
.owner-two-col { grid-template-columns: 5fr 4fr; }
}
/* ── Who is Here Now ─────────────────────────────────────────────────────── */
.who-here-grid {
display: grid;
/* safe minmax: never forces horizontal scroll on narrow screens */
grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
gap: var(--space-3);
}
.who-here-card {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-3) var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
transition: border-color 0.15s, box-shadow 0.15s;
min-width: 0;
}
.who-here-card:hover { box-shadow: 0 2px 12px rgba(var(--shadow-rgb),0.25); }
.who-here-card--active {
border-color: rgba(var(--success-rgb),0.35);
background: rgba(var(--success-rgb),0.03);
}
.who-here-card--late {
border-color: rgba(var(--warning-rgb),0.35);
background: rgba(var(--warning-rgb),0.03);
}
.who-here-card--out {
border-color: var(--border);
opacity: 0.65;
}
.who-here-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.who-here-card__avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--accent-muted);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.who-here-card__avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.who-here-card__initials {
font-size: 0.8125rem;
font-weight: 700;
color: var(--accent);
line-height: 1;
}
.who-here-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
padding: 2px 7px;
border-radius: var(--radius-full);
white-space: nowrap;
}
.who-here-badge--active {
background: rgba(var(--success-rgb),0.15);
color: var(--success);
}
.who-here-badge--late {
background: rgba(var(--warning-rgb),0.15);
color: var(--warning);
}
.who-here-badge--out {
background: var(--surface-2);
color: var(--text-3);
}
.who-here-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.who-here-card__name {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.who-here-card__branch {
font-size: var(--text-xs);
color: var(--text-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.who-here-card__times {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
margin-top: var(--space-1);
}
.who-here-card__checkin {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.who-here-card__duration {
font-size: var(--text-xs);
color: var(--text-3);
font-variant-numeric: tabular-nums;
}
.who-here-card__late-note {
font-size: 10px;
color: var(--warning);
font-weight: 600;
margin: 0;
}
/* ── Attendance summary (ring + stat list) ───────────────────────────────── */
.summary-stats {
display: flex;
gap: var(--space-5);
align-items: flex-start;
flex-wrap: wrap;
}
.summary-stat--large {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.summary-stat__ring {
position: relative;
width: 96px;
height: 96px;
border-radius: 50%;
background: conic-gradient(
var(--accent) calc(var(--pct) * 1%),
var(--surface-2) 0
);
display: flex;
align-items: center;
justify-content: center;
}
.summary-stat__ring::before {
content: "";
position: absolute;
inset: 12px;
border-radius: 50%;
background: var(--surface);
}
.summary-stat__ring-value {
position: relative;
font-size: var(--text-sm);
font-weight: 700;
color: var(--text-1);
z-index: 1;
}
.summary-stat__label {
font-size: var(--text-xs);
color: var(--text-3);
text-align: center;
max-width: 96px;
}
.summary-stat-list {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.summary-stat-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--border);
}
.summary-stat-row:last-child { border-bottom: none; }
.summary-stat-row__label {
font-size: var(--text-xs);
color: var(--text-3);
}
.summary-stat-row__value {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-1);
font-variant-numeric: tabular-nums;
}
/* ── Branch performance snapshots ────────────────────────────────────────── */
.branch-snapshots {
display: flex;
flex-direction: column;
gap: var(--space-3);
max-height: 380px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.branch-snapshot {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: var(--surface-1);
border-radius: var(--radius);
border: 1px solid var(--border);
transition: border-color 0.15s;
}
.branch-snapshot:hover { border-color: var(--border-strong); }
.branch-snapshot__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.branch-snapshot__name {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.branch-snapshot__pct {
font-size: var(--text-sm);
font-weight: 700;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.branch-snapshot__bar {
height: 4px;
background: var(--surface-2);
border-radius: var(--radius-full);
overflow: hidden;
}
.branch-snapshot__bar-fill {
height: 100%;
border-radius: var(--radius-full);
transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.branch-snapshot__bar-fill--success { background: var(--success); }
.branch-snapshot__bar-fill--warning { background: var(--warning); }
.branch-snapshot__bar-fill--danger { background: var(--danger); }
.branch-snapshot__stats {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.branch-snapshot__stat {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
color: var(--text-3);
font-variant-numeric: tabular-nums;
}
.branch-snapshot__stat--success { color: var(--success); }
.branch-snapshot__stat--warning { color: var(--warning); }
.branch-snapshot__stat--danger { color: var(--danger); }
.branch-snapshot__stat--accent { color: var(--accent); }
/* ── Quick actions ───────────────────────────────────────────────────────── */
.owner-quick-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
}
@media (min-width: 640px) {
.owner-quick-actions { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 1024px) {
.owner-quick-actions { grid-template-columns: repeat(4, 1fr); }
}
.owner-quick-action {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-4);
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
text-decoration: none;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
min-width: 0;
}
.owner-quick-action:hover {
background: var(--surface-2);
border-color: var(--accent);
box-shadow: 0 2px 12px rgba(var(--accent-rgb),0.08);
}
.owner-quick-action__icon {
width: 38px;
height: 38px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.owner-quick-action__icon--accent { background: var(--accent-muted); color: var(--accent); }
.owner-quick-action__icon--success { background: rgba(var(--success-rgb),0.12); color: var(--success); }
.owner-quick-action__icon--warning { background: rgba(var(--warning-rgb),0.12); color: var(--warning); }
.owner-quick-action__icon--danger { background: rgba(var(--danger-rgb),0.12); color: var(--danger); }
.owner-quick-action__icon--neutral { background: var(--surface-2); color: var(--text-2); }
.owner-quick-action__text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.owner-quick-action__label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-1);
margin: 0;
display: flex;
align-items: center;
gap: var(--space-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.owner-quick-action__sub {
font-size: var(--text-xs);
color: var(--text-3);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.owner-quick-action__badge {
background: var(--warning);
color: var(--on-accent);
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: var(--radius-full);
line-height: 1.5;
flex-shrink: 0;
}
/* ── RTL overrides ───────────────────────────────────────────────────────── */
[dir="rtl"] .owner-dashboard__date-block { align-items: flex-start; }
[dir="rtl"] .summary-stat__ring {
background: conic-gradient(
var(--surface-2) calc((100 - var(--pct)) * 1%),
var(--accent) 0
);
}
[dir="rtl"] .trend-bar__avg { margin-inline-start: auto; }
/* ── Mobile adjustments ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
.owner-dashboard { padding: var(--space-4) var(--space-3) var(--space-16); gap: var(--space-4); }
.owner-section { padding: var(--space-4); }
.owner-dashboard__header { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.owner-dashboard__date-block { align-items: flex-start; width: 100%; flex-direction: row; justify-content: space-between; }
.who-here-grid { grid-template-columns: 1fr 1fr; }
.summary-stats { flex-direction: column; align-items: stretch; }
.summary-stat--large { flex-direction: row; align-items: center; gap: var(--space-4); }
.summary-stat__label { text-align: start; }
.trend-bar { gap: var(--space-2); }
.trend-bar__avg { margin-inline-start: 0; width: 100%; padding-top: var(--space-1); border-top: 1px solid var(--border); }
}
@media (max-width: 380px) {
.owner-stats-grid { gap: var(--space-2); }
.who-here-grid { grid-template-columns: 1fr; }
.owner-quick-actions { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════════════════
ADJUSTMENTS PAGE
════════════════════════════════════════════════════════════════════════════ */
/* Page wrapper */
.adj-page {
max-width: 1200px;
margin: 0 auto;
padding: var(--space-5) var(--space-4) var(--space-16);
display: flex;
flex-direction: column;
gap: var(--space-5);
}
/* ── Period form in header ────────────────────────────────────────────────── */
.adj-period-form {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.adj-period-select { width: auto; min-width: 0; }
/* ── Pending banner ───────────────────────────────────────────────────────── */
.adj-pending-banner {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* ── Summary stats strip ──────────────────────────────────────────────────── */
.adj-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
@media (min-width: 640px) { .adj-stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .adj-stats { grid-template-columns: repeat(5, 1fr); } }
.adj-stat-card {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
display: flex;
align-items: flex-start;
gap: var(--space-3);
position: relative;
overflow: hidden;
transition: border-color 0.15s;
}
.adj-stat-card::before {
content: "";
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.15s;
}
.adj-stat-card:hover { border-color: var(--border-focus); }
.adj-stat-card__icon {
width: 36px;
height: 36px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--surface-2);
color: var(--text-3);
}
.adj-stat-card__icon--total { background: rgba(var(--indigo-rgb), 0.12); color: var(--indigo); }
.adj-stat-card__icon--bonus { background: rgba(var(--success-rgb), 0.12); color: var(--success); }
.adj-stat-card__icon--deduction { background: rgba(var(--danger-rgb), 0.12); color: var(--danger); }
.adj-stat-card__icon--employees { background: rgba(var(--warning-rgb), 0.12); color: var(--warning); }
.adj-stat-card__icon--pending { background: var(--surface-2); color: var(--text-3); }
.adj-stat-card--pending-active .adj-stat-card__icon--pending {
background: rgba(var(--warning-rgb), 0.15);
color: var(--warning);
}
.adj-stat-card--bonus { border-color: rgba(var(--success-rgb), 0.2); }
.adj-stat-card--deduction { border-color: rgba(var(--danger-rgb), 0.2); }
.adj-stat-card__body { flex: 1; min-width: 0; }
.adj-stat-card__value {
font-size: var(--text-xl);
font-weight: 700;
color: var(--text-1);
line-height: 1.1;
}
.adj-stat-card__value--positive { color: var(--success); }
.adj-stat-card__value--negative { color: var(--danger); }
.adj-stat-card__label {
font-size: var(--text-xs);
color: var(--text-3);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 2px;
}
.adj-stat-card__trend {
position: absolute;
top: var(--space-2);
inset-inline-end: var(--space-3);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
padding: 2px 5px;
border-radius: var(--radius-full);
}
.adj-stat-card__trend--up { color: var(--warning); background: rgba(var(--warning-rgb), 0.12); }
.adj-stat-card__trend--down { color: var(--success); background: rgba(var(--success-rgb), 0.12); }
/* ── Meta row: quick actions + insights ──────────────────────────────────── */
.adj-meta-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
}
@media (min-width: 768px) {
.adj-meta-row { grid-template-columns: 1fr 1fr; }
}
.adj-section-title {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-3);
margin-bottom: var(--space-3);
}
/* Quick action grid */
.adj-quick-actions {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
}
.adj-qa-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
}
.adj-qa-btn {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text-2);
font-size: var(--text-sm);
font-weight: 500;
text-decoration: none;
transition: background 0.12s, border-color 0.12s, color 0.12s;
white-space: nowrap;
}
.adj-qa-btn:hover { background: var(--surface-3); color: var(--text-1); border-color: var(--border-focus); }
.adj-qa-btn__icon {
width: 26px;
height: 26px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.adj-qa-btn--bonus .adj-qa-btn__icon { background: rgba(var(--success-rgb),0.15); color: var(--success); }
.adj-qa-btn--deduction .adj-qa-btn__icon { background: rgba(var(--danger-rgb),0.15); color: var(--danger); }
.adj-qa-btn--commission .adj-qa-btn__icon { background: rgba(var(--indigo-rgb),0.15); color: var(--indigo); }
.adj-qa-btn--penalty .adj-qa-btn__icon { background: rgba(var(--warning-rgb),0.15); color: var(--warning); }
.adj-qa-btn--bulk .adj-qa-btn__icon { background: rgba(var(--neutral-rgb),0.15); color: var(--text-secondary); }
.adj-qa-btn--import .adj-qa-btn__icon { background: rgba(var(--neutral-rgb),0.15); color: var(--text-secondary); }
.adj-qa-btn__label { font-size: var(--text-sm); }
/* Insights panel */
.adj-insights {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
}
.adj-insights-list { display: flex; flex-direction: column; gap: var(--space-2); }
.adj-insight-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-2) 0;
border-bottom: 1px solid var(--border);
}
.adj-insight-row:last-child { border-bottom: none; }
.adj-insight-row__label {
font-size: var(--text-xs);
color: var(--text-3);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.adj-insight-row__value {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-1);
text-align: end;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.adj-insight-row__value--positive { color: var(--success); }
.adj-insight-row__value--negative { color: var(--danger); }
.adj-insight-row__sub {
font-size: var(--text-xs);
color: var(--text-3);
font-weight: 400;
}
/* ── Filter section ───────────────────────────────────────────────────────── */
.adj-filter-section {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.adj-filter-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
cursor: pointer;
user-select: none;
}
.adj-filter-header__title {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-2);
}
.adj-filter-header__active-dot {
width: 7px;
height: 7px;
border-radius: var(--radius-full);
background: var(--accent);
flex-shrink: 0;
}
.adj-filter-toggle { padding: var(--space-1) var(--space-2); }
.adj-filter-toggle__chevron {
transition: transform 0.2s;
}
.collapsible--open .adj-filter-toggle__chevron { transform: rotate(180deg); }
.adj-filter-body {
padding: var(--space-4);
border-top: 1px solid var(--border);
}
.adj-filter-body[hidden] { display: none; }
.adj-filter-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
@media (min-width: 768px) { .adj-filter-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .adj-filter-grid { grid-template-columns: repeat(5, 1fr); } }
.adj-filter-search { grid-column: 1 / -1; }
@media (min-width: 640px) { .adj-filter-search { grid-column: auto; } }
.adj-filter-actions {
display: flex;
gap: var(--space-2);
align-items: center;
margin-top: var(--space-3);
}
/* Search input wrapper */
.search-input-wrap {
position: relative;
}
.search-input-wrap__icon {
position: absolute;
inset-block: 0;
inset-inline-start: var(--space-3);
margin: auto;
color: var(--text-3);
pointer-events: none;
}
.search-input-wrap__input {
padding-inline-start: calc(var(--space-3) + 14px + var(--space-2));
}
/* ── Adjustment type badge (pill with icon) ───────────────────────────────── */
.adj-type-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
.adj-type-badge--cash-incentive {
background: rgba(var(--success-rgb), 0.12);
color: var(--success);
}
.adj-type-badge--commission {
background: rgba(var(--indigo-rgb), 0.12);
color: var(--indigo);
}
.adj-type-badge--penalty {
background: rgba(var(--warning-rgb), 0.12);
color: var(--warning);
}
.adj-type-badge--manual-deduction {
background: rgba(var(--danger-rgb), 0.12);
color: var(--danger);
}
/* ── Amount cell ──────────────────────────────────────────────────────────── */
.adj-amount {
font-size: var(--text-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.adj-amount--positive { color: var(--success); }
.adj-amount--negative { color: var(--danger); }
.adj-already-paid-note {
display: flex;
align-items: center;
gap: 3px;
font-size: 10px;
color: var(--text-3);
margin-top: 2px;
}
/* ── Table row extras ─────────────────────────────────────────────────────── */
.adj-reason { max-width: 220px; }
.adj-creator__name { font-size: var(--text-sm); color: var(--text-1); }
.adj-reviewer { font-size: var(--text-xs); margin-top: 2px; }
.adj-date { white-space: nowrap; font-size: var(--text-sm); }
/* ── Empty state ──────────────────────────────────────────────────────────── */
.adj-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--space-12) var(--space-6);
gap: var(--space-3);
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.adj-empty__icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--surface-2);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-3);
opacity: 0.7;
margin-bottom: var(--space-1);
}
.adj-empty__title {
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-1);
}
.adj-empty__hint {
font-size: var(--text-sm);
color: var(--text-3);
max-width: 320px;
}
/* ── RTL overrides ────────────────────────────────────────────────────────── */
[dir="rtl"] .adj-stat-card__trend { inset-inline-end: var(--space-3); }
[dir="rtl"] .adj-filter-header__title { flex-direction: row-reverse; }
[dir="rtl"] .adj-insight-row__value { align-items: flex-start; text-align: start; }
[dir="rtl"] .adj-amount { direction: ltr; unicode-bidi: embed; }
[dir="rtl"] .adj-section-title,
[dir="rtl"] .adj-stat-card__label,
[dir="rtl"] .adj-stat-card__value,
[dir="rtl"] .adj-empty__title,
[dir="rtl"] .adj-empty__hint,
[dir="rtl"] .adj-qa-btn__label,
[dir="rtl"] .adj-insight-row__label { text-align: right; }
/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
.adj-page { padding: var(--space-4) var(--space-3) var(--space-16); gap: var(--space-4); }
.adj-stat-card__value { font-size: var(--text-lg); }
.adj-qa-grid { grid-template-columns: 1fr 1fr; }
.adj-meta-row { gap: var(--space-3); }
.adj-period-form { gap: var(--space-1); }
.adj-reason { max-width: 140px; }
.adj-filter-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 380px) {
.adj-stats { grid-template-columns: 1fr 1fr; }
.adj-qa-grid { grid-template-columns: 1fr; }
}
/* ════════════════════════════════════════════════════════════════════════════
BULK ADJUSTMENTS PAGE
════════════════════════════════════════════════════════════════════════════ */
.bulk-adj-page { max-width: 1200px; margin: 0 auto; }
/* ── Toolbar (period + mass-set controls) ─────────────────────────────────── */
.bulk-adj-toolbar {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
align-items: flex-end;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
}
.bulk-adj-toolbar__period,
.bulk-adj-toolbar__mass { display: flex; flex-direction: column; gap: var(--space-1); }
.bulk-adj-toolbar__actions {
display: flex;
gap: var(--space-2);
align-items: flex-end;
flex-wrap: wrap;
margin-inline-start: auto;
}
.bulk-adj-period-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
/* ── Spreadsheet grid ─────────────────────────────────────────────────────── */
.bulk-adj-sheet {
padding: 0;
overflow: hidden;
}
.bulk-adj-sheet__scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.bulk-adj-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.bulk-adj-table thead th {
background: var(--surface-2);
padding: var(--space-2) var(--space-3);
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-3);
white-space: nowrap;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 1;
}
.bulk-adj-table tbody tr {
border-bottom: 1px solid var(--border);
transition: background 0.1s;
}
.bulk-adj-table tbody tr:last-child { border-bottom: none; }
.bulk-adj-table tbody tr:hover { background: var(--surface-2); }
.bulk-adj-table td { padding: var(--space-2) var(--space-3); vertical-align: middle; }
/* Column widths */
.bulk-adj-th--employee, .bulk-adj-td--employee { min-width: 200px; }
.bulk-adj-th--type, .bulk-adj-td--type { min-width: 150px; }
.bulk-adj-th--amount, .bulk-adj-td--amount { min-width: 110px; }
.bulk-adj-th--reason, .bulk-adj-td--reason { min-width: 220px; width: 100%; }
.bulk-adj-th--actions, .bulk-adj-td--actions { min-width: 70px; text-align: center; }
/* Amount input: right-align numbers, monospace */
.bulk-adj-amount-input { text-align: end; font-family: var(--font-mono, ui-monospace, monospace); }
/* Row action buttons */
.bulk-adj-td--actions { display: flex; align-items: center; justify-content: center; gap: var(--space-1); }
.bulk-adj-row-btn {
width: 28px;
height: 28px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--text-3);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.bulk-adj-row-btn:hover { background: var(--surface-3); color: var(--text-1); border-color: var(--border-focus); }
.bulk-adj-row-btn--remove:hover { background: rgba(var(--danger-rgb),0.1); color: var(--danger); border-color: var(--danger); }
/* Sheet footer: "Add row" button */
.bulk-adj-sheet__footer {
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--border);
}
.bulk-adj-add-btn {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* Empty state inside sheet */
.bulk-adj-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-10) var(--space-6);
color: var(--text-3);
font-size: var(--text-sm);
}
/* ── Live totals bar ──────────────────────────────────────────────────────── */
.bulk-adj-totals {
display: flex;
align-items: center;
gap: var(--space-4);
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-5);
flex-wrap: wrap;
}
.bulk-adj-totals__item { display: flex; flex-direction: column; gap: 2px; }
.bulk-adj-totals__label {
font-size: var(--text-xs);
color: var(--text-3);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.bulk-adj-totals__value {
font-size: var(--text-lg);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text-1);
}
.bulk-adj-totals__value--positive { color: var(--success); }
.bulk-adj-totals__value--negative { color: var(--danger); }
.bulk-adj-totals__divider {
width: 1px;
height: 36px;
background: var(--border);
flex-shrink: 0;
}
/* ── Review section ───────────────────────────────────────────────────────── */
.bulk-adj-review { border: 1px solid var(--accent); }
.bulk-adj-review .section-title { color: var(--accent); }
.bulk-adj-review__actions {
display: flex;
gap: var(--space-3);
margin-top: var(--space-4);
flex-wrap: wrap;
}
/* ── Error list ───────────────────────────────────────────────────────────── */
.bulk-adj-error-list {
margin: var(--space-2) 0 0 var(--space-4);
padding: 0;
list-style: disc;
font-size: var(--text-sm);
}
.bulk-adj-error-list li { margin-bottom: 2px; }
/* ── Desktop submit (hidden on mobile via sticky bar override) ────────────── */
.bulk-adj-desktop-actions { display: none; }
@media (min-width: 1024px) {
.bulk-adj-desktop-actions { display: flex; }
}
/* ── RTL ──────────────────────────────────────────────────────────────────── */
[dir="rtl"] .bulk-adj-toolbar__actions { margin-inline-start: auto; margin-inline-end: 0; }
[dir="rtl"] .bulk-adj-amount-input { text-align: start; direction: ltr; unicode-bidi: embed; }
[dir="rtl"] .bulk-adj-totals__label { text-align: right; }
/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
.bulk-adj-toolbar { gap: var(--space-3); }
.bulk-adj-toolbar__actions { margin-inline-start: 0; width: 100%; }
/* On mobile, convert table rows to cards */
.bulk-adj-table thead { display: none; }
.bulk-adj-table, .bulk-adj-table tbody, .bulk-adj-table tr { display: block; }
.bulk-adj-table tr {
padding: var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: var(--space-2);
position: relative;
}
.bulk-adj-table td { display: flex; flex-direction: column; padding: var(--space-1) 0; border: none; }
.bulk-adj-table td::before {
content: attr(data-label);
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-3);
margin-bottom: 2px;
}
.bulk-adj-td--actions {
flex-direction: row;
justify-content: flex-end;
position: absolute;
top: var(--space-2);
inset-inline-end: var(--space-2);
}
.bulk-adj-td--employee::before { content: attr(data-label, "Employee"); }
.bulk-adj-th--employee::before { content: "Employee"; }
.bulk-adj-amount-input { text-align: start; }
.bulk-adj-totals { gap: var(--space-3); }
.bulk-adj-totals__divider { display: none; }
.bulk-adj-totals__value { font-size: var(--text-base); }
}
/* ============================================================
ATTENDANCE RECORDS PAGE
============================================================ */
/* ── KPI strip ─────────────────────────────────────────────────────────────── */
.attn-kpi-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
margin-bottom: var(--space-6);
}
@media (min-width: 480px) { .attn-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .attn-kpi-grid { grid-template-columns: repeat(6, 1fr); } }
/* Smaller value text on narrow KPI cells */
@media (max-width: 959px) {
.attn-kpi-grid .stat-card__value { font-size: var(--text-2xl); }
}
/* "h" / "m" unit suffix */
.attn-kpi-unit {
font-size: var(--text-base);
font-weight: 500;
color: var(--text-2);
margin-inline-start: 1px;
}
/* Live pulsing dot */
.attn-live-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: var(--radius-full);
background: var(--accent);
margin-inline-end: var(--space-1);
animation: attn-pulse 2s ease-in-out infinite;
}
@keyframes attn-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
/* ── Filter active count badge ─────────────────────────────────────────────── */
.attn-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 var(--space-1);
border-radius: var(--radius-full);
background: var(--accent);
color: var(--navy-900);
font-size: var(--text-xs);
font-weight: 700;
}
/* ── Status badges ─────────────────────────────────────────────────────────── */
.attn-status-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.2rem 0.6rem;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: nowrap;
}
.attn-status-badge--present { background: var(--success-muted); color: var(--success); }
.attn-status-badge--late { background: var(--warning-muted); color: var(--warning); }
.attn-status-badge--early_leave { background: var(--accent-muted); color: var(--accent); }
.attn-status-badge--incomplete { background: var(--navy-500); color: var(--text-2); }
.attn-status-badge--absent { background: var(--danger-muted); color: var(--danger); }
/* ── Time cells ────────────────────────────────────────────────────────────── */
.attn-time-cell {
font-variant-numeric: tabular-nums;
}
.attn-time {
font-weight: 500;
color: var(--text-1);
display: block;
}
.attn-time-date {
font-size: var(--text-xs);
display: block;
}
/* ── Worked hours ──────────────────────────────────────────────────────────── */
.attn-worked {
font-weight: 600;
color: var(--text-1);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* ── Late pill ─────────────────────────────────────────────────────────────── */
.attn-late-pill {
display: inline-flex;
align-items: center;
padding: 0.1em 0.55em;
border-radius: var(--radius-full);
background: var(--warning-muted);
color: var(--warning);
font-size: var(--text-xs);
font-weight: 700;
white-space: nowrap;
}
/* ── No-shift placeholder ──────────────────────────────────────────────────── */
.attn-no-shift { color: var(--text-3); }
/* ── Employee cell (extends existing .employee-cell) ──────────────────────── */
.employee-cell__info {
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
/* ── Empty state ───────────────────────────────────────────────────────────── */
.attn-empty {
text-align: center;
padding: var(--space-16) var(--space-6);
}
.attn-empty__icon {
color: var(--text-3);
margin-bottom: var(--space-4);
display: flex;
justify-content: center;
}
.attn-empty__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-2);
margin-bottom: var(--space-2);
}
.attn-empty__hint {
font-size: var(--text-sm);
color: var(--text-3);
margin-bottom: var(--space-4);
}
.attn-empty__action { margin-top: var(--space-2); }
/* ── Filter form ───────────────────────────────────────────────────────────── */
.attn-filter-form .filter-bar__toggles { margin-top: var(--space-3); }
/* ── Mobile overrides ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.attn-kpi-grid { gap: var(--space-2); }
.attn-kpi-grid .stat-card { padding: var(--space-3); }
.attn-kpi-grid .stat-card__value { font-size: var(--text-xl); }
/* Stack time + date vertically inside cards */
.table-wrap--cards .attn-time-cell {
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
}
/* ── RTL ──────────────────────────────────────────────────────────────────── */
[dir="rtl"] .attn-live-dot { margin-inline-start: var(--space-1); margin-inline-end: 0; }
[dir="rtl"] .attn-kpi-unit { margin-inline-end: 1px; margin-inline-start: 0; }
/* ── Utility ────────────────────────────────────────────────────────────────── */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.td-mono {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.8125rem;
}
/* ============================================================
§32 — PAYROLL MODULE v2 ENHANCEMENTS
============================================================ */
/* ── Semantic button variants (used across payroll views) ─── */
.btn-accent {
background: var(--accent);
color: var(--on-accent);
border-color: var(--accent);
}
.btn-accent:hover:not(:disabled) {
background: var(--accent-hover);
border-color: var(--accent-hover);
box-shadow: var(--shadow-accent);
color: var(--on-accent);
}
.btn-success {
background: var(--success-muted);
color: var(--success);
border-color: rgba(var(--success-rgb), 0.4);
}
.btn-success:hover:not(:disabled) {
background: var(--success);
color: var(--on-accent);
border-color: var(--success);
}
.btn-warning {
background: var(--warning-muted);
color: var(--warning);
border-color: rgba(var(--warning-rgb), 0.4);
}
.btn-warning:hover:not(:disabled) {
background: var(--warning);
color: var(--on-accent);
border-color: var(--warning);
}
.btn-neutral {
background: var(--navy-500);
color: var(--text-2);
border-color: var(--border);
}
.btn-neutral:hover:not(:disabled) {
background: var(--navy-400);
color: var(--text-1);
border-color: var(--navy-400);
}
/* ── Payroll index: KPI summary cards ────────────────────── */
.payroll-kpi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
margin-bottom: var(--space-5);
}
@media (min-width: 860px) {
.payroll-kpi-grid { grid-template-columns: repeat(6, 1fr); }
}
.payroll-kpi-card {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
cursor: default;
}
.payroll-kpi-card--review { border-color: rgba(var(--warning-rgb), 0.35); }
.payroll-kpi-card--active { border-color: rgba(var(--accent-rgb), 0.35); }
.payroll-kpi-card--paid { border-color: rgba(var(--success-rgb), 0.35); }
.payroll-kpi-card--danger { border-color: rgba(var(--danger-rgb), 0.35); }
.payroll-kpi-card__label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--space-2);
}
.payroll-kpi-card__value {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--text-1);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.payroll-kpi-card__value--accent { color: var(--accent); }
.payroll-kpi-card__value--success { color: var(--success); }
.payroll-kpi-card__value--warning { color: var(--warning); }
.payroll-kpi-card__sub {
font-size: var(--text-xs);
color: var(--text-3);
margin-top: var(--space-1);
}
/* ── Payroll index: filter row ───────────────────────────── */
.payroll-filters {
display: flex;
align-items: flex-end;
gap: var(--space-3);
margin-bottom: var(--space-4);
flex-wrap: wrap;
}
.payroll-filter-group {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 110px;
}
.payroll-filter-label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.payroll-filter-select {
height: 38px;
padding-inline: var(--space-3);
padding-inline-end: 28px;
font-size: var(--text-sm);
color: var(--text-1);
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius);
outline: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238BA3BF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
transition: border-color var(--transition), box-shadow var(--transition);
}
.payroll-filter-select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-ring);
}
.payroll-filter-actions {
display: flex;
gap: var(--space-2);
align-items: flex-end;
padding-bottom: 0;
}
/* ── Payroll index: period card (management, mobile) ──────── */
.payroll-period-cards {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.payroll-period-card {
display: block;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
text-decoration: none;
color: inherit;
transition: border-color var(--transition), box-shadow var(--transition);
}
.payroll-period-card:hover {
border-color: var(--accent-ring);
box-shadow: 0 2px 12px rgba(var(--shadow-rgb), 0.12);
text-decoration: none;
}
.payroll-period-card__header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.payroll-period-card__title {
font-weight: 700;
font-size: var(--text-base);
color: var(--text-1);
}
.payroll-period-card__meta {
font-size: var(--text-xs);
color: var(--text-3);
margin-top: 2px;
}
.payroll-period-card__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-2);
border-top: 1px solid var(--border);
padding-top: var(--space-3);
}
.payroll-period-card__stat-label {
font-size: 0.7rem;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.04em;
display: block;
margin-bottom: 2px;
}
.payroll-period-card__stat-value {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-1);
font-variant-numeric: tabular-nums;
}
/* ── Payroll show: overview section ──────────────────────── */
.payroll-overview {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin-bottom: var(--space-5);
}
.payroll-overview__label {
font-size: var(--text-xs);
font-weight: 700;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--space-4);
}
.payroll-overview__metrics {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4) var(--space-5);
}
@media (min-width: 600px) {
.payroll-overview__metrics { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
.payroll-overview__metrics { grid-template-columns: repeat(6, 1fr); }
}
.payroll-overview__metric {
display: flex;
flex-direction: column;
gap: 3px;
}
.payroll-overview__metric-label {
font-size: var(--text-xs);
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.payroll-overview__metric-value {
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-1);
font-variant-numeric: tabular-nums;
}
.payroll-overview__metric-value--danger { color: var(--danger); }
.payroll-overview__metric-value--success { color: var(--success); }
.payroll-overview__divider {
height: 1px;
background: var(--border);
margin: var(--space-4) 0 var(--space-3);
}
.payroll-overview__net-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.payroll-overview__net-label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-2);
}
.payroll-overview__net-value {
font-size: var(--text-2xl);
font-weight: 800;
color: var(--accent);
font-variant-numeric: tabular-nums;
}
/* ── Payroll show: alerts section ────────────────────────── */
.payroll-alerts {
margin-bottom: var(--space-5);
}
.payroll-alerts__header {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-2);
}
.payroll-alerts__title {
font-size: var(--text-xs);
font-weight: 700;
color: var(--warning);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.payroll-alert-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
background: var(--warning-muted);
border: 1px solid rgba(var(--warning-rgb), 0.3);
border-radius: var(--radius);
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-2);
}
.payroll-alert-item:last-child { margin-bottom: 0; }
.payroll-alert-item--danger {
background: var(--danger-muted);
border-color: rgba(var(--danger-rgb), 0.3);
}
.payroll-alert-item__icon {
flex-shrink: 0;
font-size: 1rem;
line-height: 1.5;
}
.payroll-alert-item__body { flex: 1; min-width: 0; }
.payroll-alert-item__msg { font-size: var(--text-sm); font-weight: 500; color: var(--text-1); }
.payroll-alert-item__names {
font-size: var(--text-xs);
color: var(--text-2);
margin-top: 2px;
}
/* ── Payroll show: enhanced days cell ────────────────────── */
.payroll-days-cell {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 3px;
}
.payroll-days-cell__ratio {
font-size: var(--text-sm);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.payroll-days-cell__bar {
width: 44px;
height: 3px;
background: var(--navy-500);
border-radius: var(--radius-full);
overflow: hidden;
}
.payroll-days-cell__fill {
height: 100%;
border-radius: var(--radius-full);
background: var(--accent);
}
.payroll-days-cell__fill--warn { background: var(--warning); }
.payroll-days-cell__fill--danger { background: var(--danger); }
/* ── Payroll show: status timeline (replaces audit table) ─── */
.payroll-timeline {
padding-inline-start: var(--space-7);
position: relative;
}
.payroll-timeline::before {
content: "";
position: absolute;
inset-inline-start: calc(var(--space-3) + 1px);
top: 8px;
bottom: 8px;
width: 2px;
background: var(--border);
}
.payroll-timeline__entry {
position: relative;
padding-bottom: var(--space-4);
}
.payroll-timeline__entry:last-child { padding-bottom: 0; }
.payroll-timeline__dot {
position: absolute;
inset-inline-start: calc(-1 * var(--space-7) + var(--space-3));
top: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--navy-500);
border: 2px solid var(--bg);
}
.payroll-timeline__dot--done { background: var(--success); }
.payroll-timeline__dot--live { background: var(--accent); }
.payroll-timeline__dot--warn { background: var(--warning); }
.payroll-timeline__action {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-1);
line-height: 1.3;
}
.payroll-timeline__meta {
font-size: var(--text-xs);
color: var(--text-3);
margin-top: 2px;
}
/* ── Payroll show: insights grid ─────────────────────────── */
.payroll-insights {
margin-bottom: var(--space-6);
}
.payroll-insights__header {
margin-bottom: var(--space-4);
}
.payroll-insights__title {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-3);
}
.payroll-insights-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-4);
}
.payroll-insight-card {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.payroll-insight-card--warn {
border-color: rgba(var(--warning-rgb),0.35);
background: rgba(var(--warning-rgb),0.06);
}
.payroll-insight-card__heading {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-3);
}
.payroll-insight-card__main {
display: flex;
align-items: center;
gap: var(--space-3);
}
.payroll-insight-card__big-value {
font-size: var(--text-3xl);
font-weight: 700;
color: var(--warning);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.payroll-insight-card__footnote {
margin-top: var(--space-1);
}
.payroll-insight-card__hint {
font-size: var(--text-xs);
color: var(--text-3);
margin: 0;
}
/* Mini bar chart for net trend */
.payroll-trend-chart {
display: flex;
align-items: flex-end;
gap: 4px;
height: 60px;
padding-bottom: 16px; /* room for month labels */
position: relative;
}
.payroll-trend-bar-wrap {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
flex: 1;
height: 100%;
gap: 3px;
position: relative;
}
.payroll-trend-bar {
width: 100%;
max-width: 28px;
background: var(--navy-500);
border-radius: 2px 2px 0 0;
min-height: 3px;
position: absolute;
bottom: 16px; /* align above labels */
}
.payroll-trend-bar--current { background: var(--accent); }
.payroll-trend-bar__month {
font-size: 9px;
color: var(--text-3);
text-align: center;
white-space: nowrap;
position: absolute;
bottom: 0;
width: 100%;
}
/* ── RTL: payroll module ─────────────────────────────────── */
[dir="rtl"] .payroll-filter-select {
background-position: left 8px center;
padding-inline-start: 28px;
padding-inline-end: var(--space-3);
}
[dir="rtl"] .payroll-days-cell { align-items: flex-start; }
[dir="rtl"] .payroll-timeline::before {
inset-inline-start: calc(var(--space-3) + 1px);
}
/* ── Mobile: payroll module ──────────────────────────────── */
@media (max-width: 640px) {
.payroll-kpi-card__value { font-size: var(--text-xl); }
.payroll-overview__net-value { font-size: var(--text-xl); }
.payroll-overview__metric-value { font-size: var(--text-base); }
.payroll-filters {
flex-direction: column;
align-items: stretch;
}
.payroll-filter-group { min-width: auto; }
.payroll-filter-select { width: 100%; }
.payroll-filter-actions { flex-direction: row; flex-wrap: wrap; }
}
/* ── Page actions: separator + regenerate lock hint ─────────── */
.page-actions__sep {
width: 1px;
height: 20px;
background: var(--border);
flex-shrink: 0;
align-self: center;
}
.page-actions__sep--danger { background: rgba(var(--danger-rgb),0.25); }
/* Auto-hide separators that end up at the start or end of the bar */
.page-actions__sep:first-child,
.page-actions__sep:last-child { display: none; }
/* Explanatory hint text next to locked regenerate button */
.page-actions__lock-hint {
font-size: var(--text-xs);
color: var(--warning);
opacity: 0.85;
flex-shrink: 0;
}
/* On mobile the sticky bar is narrow — hide the text hint there */
@media (max-width: 1023px) {
.page-actions__lock-hint { display: none; }
}
/* Lock icon inside disabled btn — align vertically */
.btn .btn-lock-icon {
display: inline-flex;
align-items: center;
vertical-align: middle;
margin-inline-end: 4px;
opacity: 0.75;
}
/* ── Payroll show: generated-by metadata strip ───────────────── */
.payroll-meta-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
font-size: var(--text-xs);
color: var(--text-3);
margin-bottom: var(--space-5);
padding: var(--space-2) var(--space-3);
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.payroll-meta-strip__item {
display: flex;
align-items: center;
gap: var(--space-1);
}
.payroll-meta-strip__item strong {
color: var(--text-2);
font-weight: 600;
}
.payroll-meta-strip__dot {
color: var(--border);
}
/* ── Payroll show: comparison vs previous month ──────────── */
.payroll-comparison {
margin-bottom: var(--space-6);
}
.payroll-comparison__header {
margin-bottom: var(--space-3);
}
.payroll-comparison__title {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-3);
}
.payroll-comparison-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--space-3);
}
.payroll-comparison-card {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-3) var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.payroll-comparison-card__label {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-3);
}
.payroll-comparison-card__current {
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-1);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.payroll-comparison-card__footer {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.payroll-comparison-card__prev {
font-size: var(--text-xs);
color: var(--text-3);
}
/* ── Delta trend chips ────────────────────────────────────── */
.payroll-delta-chip {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 700;
padding: 2px 6px;
border-radius: var(--radius-sm);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
line-height: 1.4;
}
.payroll-delta-chip--good { background: rgba(var(--success-rgb),0.15); color: var(--success); }
.payroll-delta-chip--bad { background: rgba(var(--danger-rgb),0.15); color: var(--danger); }
.payroll-delta-chip--neutral { background: var(--surface-2); color: var(--text-3); }
/* ── Per-entry warning badges (employee cell) ────────────── */
.payroll-entry-badges {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-top: 4px;
}
.payroll-entry-badge {
display: inline-flex;
align-items: center;
font-size: 10px;
font-weight: 600;
padding: 1px 5px;
border-radius: 3px;
white-space: nowrap;
line-height: 1.5;
}
.payroll-entry-badge--danger { background: rgba(var(--danger-rgb),0.15); color: var(--danger); }
.payroll-entry-badge--warning { background: rgba(var(--warning-rgb),0.15); color: var(--warning); }
.payroll-entry-badge--neutral { background: var(--surface-2); color: var(--text-3); }
.payroll-entry-badge--info { background: rgba(var(--info-rgb, 59,130,246),0.15); color: var(--info, #3b82f6); }
.payroll-entry-badge--stale { background: rgba(var(--warning-rgb),0.20); color: var(--warning); }
/* ── Overtime bulk action (payroll period page) ──────────── */
.ot-bulk-cell { width: 2.25rem; text-align: center; }
.ot-bulk-bar {
position: sticky;
bottom: 0;
display: flex;
align-items: center;
gap: 1rem;
margin-top: 0.75rem;
padding: 0.75rem 1rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 0.5rem;
box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}
.ot-bulk-bar__count { color: var(--text-2); font-size: var(--text-sm); }
/* ── Activity timeline: inline actor avatar ──────────────── */
.payroll-timeline__actor {
display: inline-flex;
align-items: center;
gap: 5px;
vertical-align: middle;
}
.payroll-timeline__actor-avatar {
width: 18px !important;
height: 18px !important;
font-size: 8px !important;
flex-shrink: 0;
}
.payroll-timeline__count-badge {
display: inline-flex;
align-items: center;
background: var(--surface-2);
color: var(--text-3);
font-size: 10px;
font-weight: 700;
padding: 0 5px;
border-radius: 3px;
margin-inline-start: var(--space-1);
line-height: 1.6;
}
/* ── Anomaly alert severity variants ─────────────────────── */
.payroll-alert-item--danger { border-inline-start: 3px solid var(--danger); }
.payroll-alert-item--warning { border-inline-start: 3px solid var(--warning); }
.payroll-alert-item--info {
border-inline-start: 3px solid var(--accent);
opacity: 0.85;
}
/* ── Period lock banner ───────────────────────────────────── */
.payroll-lock-banner {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: rgba(var(--danger-rgb),0.08);
border: 1px solid rgba(var(--danger-rgb),0.25);
border-radius: var(--radius);
color: var(--danger);
font-size: var(--text-sm);
font-weight: 500;
margin-bottom: var(--space-5);
}
.payroll-lock-banner svg { flex-shrink: 0; }
/* ── Payroll dashboard ───────────────────────────────────── */
.pdash-kpi-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-bottom: var(--space-6);
align-items: stretch;
}
/* Health score card */
.pdash-health {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-4) var(--space-6);
background: var(--surface-1);
border: 2px solid var(--border);
border-radius: var(--radius-lg);
min-width: 120px;
gap: var(--space-1);
}
.pdash-health--excellent { border-color: var(--success); }
.pdash-health--good { border-color: var(--accent); }
.pdash-health--fair { border-color: var(--warning); }
.pdash-health--poor { border-color: var(--danger); }
.pdash-health__score {
font-size: var(--text-4xl);
font-weight: 800;
line-height: 1;
color: var(--text-1);
font-variant-numeric: tabular-nums;
}
.pdash-health--excellent .pdash-health__score { color: var(--success); }
.pdash-health--good .pdash-health__score { color: var(--accent); }
.pdash-health--fair .pdash-health__score { color: var(--warning); }
.pdash-health--poor .pdash-health__score { color: var(--danger); }
.pdash-health__label {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-3);
}
.pdash-health__sub {
font-size: var(--text-xs);
color: var(--text-3);
}
/* KPI cards */
.pdash-kpi-card {
flex: 1 1 150px;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.pdash-kpi-card__label {
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-3);
}
.pdash-kpi-card__value {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--text-1);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.pdash-kpi-card__value--success { color: var(--success); }
.pdash-kpi-card__value--danger { color: var(--danger); }
.pdash-kpi-card__value--muted { color: var(--text-3); }
.pdash-kpi-card__sub {
font-size: var(--text-xs);
color: var(--text-3);
}
/* Charts row */
.pdash-charts-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
@media (max-width: 768px) {
.pdash-charts-row { grid-template-columns: 1fr; }
}
.pdash-chart-card { margin-bottom: 0 !important; }
/* Mini bar chart */
.pdash-bar-chart {
display: flex;
align-items: flex-end;
gap: 6px;
height: 80px;
padding-bottom: 20px;
position: relative;
}
.pdash-bar-wrap {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: 100%;
position: relative;
}
.pdash-bar {
width: 100%;
max-width: 32px;
background: var(--navy-500);
border-radius: 3px 3px 0 0;
position: absolute;
bottom: 20px;
transition: background 0.2s;
}
.pdash-bar:hover { background: var(--accent); }
.pdash-bar--peak { background: var(--accent); }
.pdash-bar--overtime { background: rgba(var(--warning-rgb),0.6); }
.pdash-bar--overtime:hover { background: var(--warning); }
.pdash-bar--empty { background: var(--navy-600); opacity: 0.4; }
.pdash-bar__label {
font-size: 9px;
color: var(--text-3);
position: absolute;
bottom: 2px;
text-align: center;
width: 100%;
}
/* Branch cost list */
.pdash-branch-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-2) 0;
}
.pdash-branch-row {
display: grid;
grid-template-columns: 140px 1fr 120px;
align-items: center;
gap: var(--space-3);
}
.pdash-branch-row__name {
font-size: var(--text-sm);
color: var(--text-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pdash-branch-row__bar-wrap {
height: 8px;
background: var(--navy-600);
border-radius: var(--radius-full);
overflow: hidden;
}
.pdash-branch-row__bar {
height: 100%;
background: var(--accent);
border-radius: var(--radius-full);
min-width: 2px;
transition: width 0.3s ease;
}
.pdash-branch-row__value {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-1);
text-align: end;
font-variant-numeric: tabular-nums;
}
/* Pending periods list */
.pdash-pending-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.pdash-pending-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-2) 0;
border-bottom: 1px solid var(--border);
}
.pdash-pending-row:last-child { border-bottom: none; }
.pdash-pending-row__period {
font-size: var(--text-sm);
font-weight: 500;
}
/* ── Print styles (export) ───────────────────────────────── */
@media print {
/* Hide navigation, action bars, interactive chrome */
.navbar,
.sidebar,
.page-actions,
.page-actions--sticky,
.back-link,
.btn,
button,
.payroll-alerts,
.payroll-insights,
.payroll-comparison,
.section-card--top,
.payroll-lock-banner,
.pdash-kpi-row,
.pdash-charts-row { display: none !important; }
/* Base print typography */
body { background: #fff !important; color: #000 !important; }
.admin-page { padding: 0 !important; max-width: none !important; }
/* Make tables print-friendly */
table { width: 100%; border-collapse: collapse; }
th, td {
border: 1px solid #ccc;
padding: 6px 8px;
font-size: 11px;
color: #000 !important;
}
th { background: #f5f5f5 !important; font-weight: 700; }
tfoot td { background: #eee !important; font-weight: 700; }
/* Page header in print */
.page-header { margin-bottom: 12px; }
.page-title { font-size: 18px; color: #000 !important; }
.page-subtitle { font-size: 11px; color: #555 !important; }
/* Overview stays visible */
.payroll-overview {
background: #f5f5f5 !important;
border: 1px solid #ccc !important;
color: #000 !important;
margin-bottom: 12px;
}
.payroll-overview__metric-label { color: #555 !important; }
.payroll-overview__metric-value { color: #000 !important; }
/* Badges in print */
.badge {
border: 1px solid #999 !important;
background: none !important;
color: #000 !important;
padding: 1px 4px;
font-size: 9px;
}
/* Avoid page breaks inside rows */
tr { page-break-inside: avoid; }
/* Print footer with metadata strip */
.payroll-meta-strip {
background: none !important;
border: none !important;
border-top: 1px solid #ccc !important;
padding-top: 6px;
font-size: 10px;
color: #555 !important;
}
}
/* ── RTL: dashboard adjustments ──────────────────────────── */
[dir="rtl"] .pdash-branch-row__value { text-align: start; }
[dir="rtl"] .pdash-branch-row {
grid-template-columns: 120px 1fr 140px;
}
/* ── Mobile: dashboard ───────────────────────────────────── */
@media (max-width: 640px) {
.pdash-kpi-row { flex-direction: column; }
.pdash-health { flex-direction: row; gap: var(--space-4); justify-content: flex-start; min-width: auto; }
.pdash-kpi-card { flex: none; width: 100%; }
.pdash-branch-row {
grid-template-columns: 100px 1fr 90px;
gap: var(--space-2);
}
.pdash-health__score { font-size: var(--text-2xl); }
}
/* ═══════════════════════════════════════════════════════════════════════════
PHASE 4 — Operations Dashboard, Notifications, Recommendations
═══════════════════════════════════════════════════════════════════════════ */
/* ── Notification badge (sidebar + mobile header) ────────────────────────── */
.sidebar-notif-badge,
.notif-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
background: var(--danger);
color: var(--on-solid);
font-size: 10px;
font-weight: 700;
border-radius: 9px;
line-height: 1;
}
.sidebar-notif-badge { margin-inline-start: auto; }
.mobile-header__notif-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
color: var(--text-2);
text-decoration: none;
flex-shrink: 0;
}
.mobile-header__notif-btn .notif-badge {
position: absolute;
top: 2px;
inset-inline-end: 2px;
}
/* ── Notification center page ─────────────────────────────────────────────── */
.notif-filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.notif-filter-btn {
padding: var(--space-1) var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-full);
background: var(--surface-2);
color: var(--text-2);
font-size: var(--text-sm);
cursor: pointer;
text-decoration: none;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.notif-filter-btn:hover { background: var(--surface-3); color: var(--text-1); }
.notif-filter-btn.is-active { background: var(--navy-600); color: var(--text-1); border-color: transparent; }
.notif-filter-btn--warning { border-color: var(--warning); }
.notif-filter-btn--danger { border-color: var(--danger); }
.notif-filter-btn--success { border-color: var(--success); }
.notif-list { display: flex; flex-direction: column; gap: var(--space-2); }
.notif-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--surface-2);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
transition: background 0.15s;
}
.notif-item--unread { background: var(--navy-800); border-color: var(--navy-600); }
.notif-item:hover { background: var(--surface-3); }
.notif-indicator--info { width: 4px; align-self: stretch; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
.notif-indicator--warning { width: 4px; align-self: stretch; border-radius: 2px; background: var(--warning); flex-shrink: 0; }
.notif-indicator--danger { width: 4px; align-self: stretch; border-radius: 2px; background: var(--danger); flex-shrink: 0; }
.notif-indicator--success { width: 4px; align-self: stretch; border-radius: 2px; background: var(--success); flex-shrink: 0; }
.notif-item__body { flex: 1; min-width: 0; }
.notif-item__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: 4px; }
.notif-item__title { font-weight: 600; color: var(--text-1); font-size: var(--text-sm); }
.notif-item__time { color: var(--text-3); font-size: var(--text-xs); white-space: nowrap; flex-shrink: 0; }
.notif-item__text { color: var(--text-2); font-size: var(--text-sm); margin: 0 0 6px; line-height: 1.5; }
.notif-item__meta { display: flex; align-items: center; gap: var(--space-2); }
.notif-item__event { color: var(--text-3); font-size: var(--text-xs); }
.notif-item__read-btn {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: transparent;
color: var(--text-3);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.notif-item__read-btn:hover { background: var(--success); color: var(--on-accent); border-color: transparent; }
/* ── Settings info box ────────────────────────────────────────────────────── */
.settings-info-box {
padding: var(--space-3) var(--space-4);
background: var(--navy-800);
border: 1px solid var(--navy-600);
border-radius: var(--radius);
margin-bottom: var(--space-4);
}
/* ── Operations dashboard ─────────────────────────────────────────────────── */
.ops-recommendations {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.ops-rec {
display: flex;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
border-inline-start: 3px solid var(--border);
background: var(--surface-2);
}
.ops-rec--danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface-2)); }
.ops-rec--warning { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, var(--surface-2)); }
.ops-rec--info { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.ops-rec__icon { flex-shrink: 0; margin-top: 2px; color: var(--text-3); }
.ops-rec__title { font-weight: 600; font-size: var(--text-sm); color: var(--text-1); margin: 0 0 4px; }
.ops-rec__body { font-size: var(--text-sm); color: var(--text-2); margin: 0; line-height: 1.5; }
.ops-kpi-strip {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.ops-kpi {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: var(--space-4);
background: var(--surface-2);
border-radius: var(--radius-lg);
border: 1px solid var(--border);
text-align: center;
}
.ops-kpi__value { font-size: var(--text-2xl); font-weight: 700; line-height: 1; }
.ops-kpi__label { font-size: var(--text-xs); color: var(--text-3); }
.ops-kpi--success .ops-kpi__value { color: var(--success); }
.ops-kpi--warning .ops-kpi__value { color: var(--warning); }
.ops-kpi--danger .ops-kpi__value { color: var(--danger); }
.ops-kpi--info .ops-kpi__value { color: var(--accent); }
.ops-kpi--neutral .ops-kpi__value { color: var(--text-1); }
.ops-dash__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.ops-panel {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.ops-panel--wide { grid-column: 1 / -1; }
.ops-panel__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ops-panel__title { font-size: var(--text-base); font-weight: 600; color: var(--text-1); margin: 0; }
.ops-panel__link { font-size: var(--text-sm); color: var(--accent); text-decoration: none; }
.ops-panel__empty { color: var(--text-3); font-size: var(--text-sm); margin: 0; }
.ops-employee-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ops-employee-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
background: var(--surface-3);
border-radius: var(--radius);
}
.ops-employee-item__avatar { flex-shrink: 0; }
.ops-employee-item__info { flex: 1; min-width: 0; }
.ops-employee-item__name { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--text-1); }
.ops-employee-item__sub { display: block; font-size: var(--text-xs); color: var(--text-3); }
/* Branch health grid */
.ops-branch-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--space-3);
}
.ops-branch-card {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-3);
background: var(--surface-3);
border-radius: var(--radius);
border-inline-start: 3px solid var(--border);
}
.ops-branch-card--excellent { border-color: var(--success); }
.ops-branch-card--good { border-color: var(--accent); }
.ops-branch-card--fair { border-color: var(--warning); }
.ops-branch-card--poor { border-color: var(--danger); }
.ops-branch-card__name { font-size: var(--text-sm); font-weight: 600; color: var(--text-1); }
.ops-branch-card__score { display: flex; align-items: baseline; gap: 2px; }
.ops-branch-card__score-val { font-size: var(--text-xl); font-weight: 700; color: var(--text-1); }
.ops-branch-card__score-unit { font-size: var(--text-xs); color: var(--text-3); }
.ops-branch-card__stats { display: flex; flex-direction: column; gap: 2px; }
.ops-branch-card__stats span { font-size: var(--text-xs); color: var(--text-3); }
/* Payroll list in ops panel */
.ops-payroll-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ops-payroll-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ops-payroll-item__label { font-size: var(--text-sm); color: var(--accent); text-decoration: none; font-weight: 500; }
.ops-payroll-item__label:hover { text-decoration: underline; }
/* Performance section */
.ops-perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.ops-perf-section__title { font-size: var(--text-sm); font-weight: 600; color: var(--text-2); margin: 0 0 var(--space-3); }
.ops-perf-section__title--top { color: var(--success); }
.ops-perf-section__title--risk { color: var(--warning); }
.ops-rank-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
background: var(--navy-700);
border-radius: var(--radius);
font-size: var(--text-xs);
font-weight: 700;
color: var(--text-2);
flex-shrink: 0;
}
.ops-score-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 24px;
border-radius: var(--radius);
font-size: var(--text-xs);
font-weight: 700;
padding: 0 6px;
flex-shrink: 0;
}
.ops-score-badge--excellent { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.ops-score-badge--good { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.ops-score-badge--fair { background: color-mix(in srgb, var(--warning) 15%, transparent); color: var(--warning); }
.ops-score-badge--poor { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
/* Payroll dashboard recommendations */
.pdash-recommendations {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.pdash-rec {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
border-inline-start: 3px solid var(--border);
background: var(--surface-2);
}
.pdash-rec--warning { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 6%, var(--surface-2)); }
.pdash-rec--info { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }
.pdash-rec--danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--surface-2)); }
.pdash-rec__title { font-weight: 600; font-size: var(--text-sm); color: var(--text-1); margin: 0 0 4px; }
.pdash-rec__body { font-size: var(--text-sm); color: var(--text-2); margin: 0; line-height: 1.5; }
/* ── RTL adjustments for ops dash ────────────────────────────────────────── */
[dir="rtl"] .ops-rec,
[dir="rtl"] .ops-branch-card,
[dir="rtl"] .pdash-rec {
border-inline-start: none;
border-inline-end: 3px solid currentColor;
}
/* ── Mobile responsiveness ────────────────────────────────────────────────── */
@media (max-width: 900px) {
.ops-kpi-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
.ops-kpi-strip { grid-template-columns: repeat(2, 1fr); }
.ops-dash__grid { grid-template-columns: 1fr; }
.ops-panel--wide { grid-column: 1; }
.ops-perf-grid { grid-template-columns: 1fr; }
.ops-branch-grid { grid-template-columns: repeat(2, 1fr); }
.pdash-recommendations,
.ops-recommendations { grid-template-columns: 1fr; }
.notif-filters { gap: var(--space-1); }
}
/* ── Profile completion bar ───────────────────────────────────────────────── */
.profile-completion {
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--border);
}
.profile-completion__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-1);
}
.profile-completion__label {
font-size: var(--text-xs);
color: var(--text-3);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.profile-completion__pct {
font-size: var(--text-sm);
font-weight: 600;
}
.profile-completion__pct--complete { color: var(--success); }
.profile-completion__pct--partial { color: var(--warning); }
.profile-completion__pct--incomplete { color: var(--danger); }
.profile-completion__bar {
height: 4px;
border-radius: 2px;
background: var(--surface-2, rgba(var(--overlay-rgb),0.08));
overflow: hidden;
}
.profile-completion__fill {
height: 100%;
border-radius: 2px;
transition: width 0.3s ease;
}
.profile-completion__fill--complete { background: var(--success); }
.profile-completion__fill--partial { background: var(--warning); }
.profile-completion__fill--incomplete { background: var(--danger); }
/* ── Attendance source badges ─────────────────────────────────────────────── */
.attn-source-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: var(--text-xs);
font-weight: 500;
padding: 1px 6px;
border-radius: 4px;
white-space: nowrap;
background: var(--surface-2, rgba(var(--overlay-rgb),0.06));
color: var(--text-2);
border: 1px solid var(--border);
}
.attn-source-badge--xs {
font-size: 10px;
padding: 0 4px;
margin-top: 2px;
}
.attn-source-badge--mobile { color: var(--accent); border-color: var(--accent); }
.attn-source-badge--biometric-device { color: var(--success); border-color: var(--success); }
.attn-source-badge--import { color: var(--warning); border-color: var(--warning); }
.attn-source-badge--admin-manual { color: var(--text-2); border-color: var(--border); }
.attn-source-badge--api { color: var(--text-3); border-color: var(--border); }
[dir="rtl"] .attn-source-badge { direction: rtl; }
/* ============================================================
SHIFT ASSIGNMENT BULK ACTIONS
============================================================ */
/* Narrow checkbox column */
.td-check {
width: 36px;
padding-inline: var(--space-2) !important;
vertical-align: middle;
}
.td-check input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--accent);
}
/* Extra-small badge modifier (overnight label) */
.badge--xs {
font-size: 10px;
padding: 1px 5px;
margin-inline-start: var(--space-1);
vertical-align: middle;
}
/* ── Bulk action bar ─────────────────────────────────────────────────────── */
/* Sticky bar that slides up from the page bottom whenever rows are checked. */
.bulk-action-bar {
position: sticky;
bottom: var(--space-4);
z-index: 50;
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
padding: var(--space-3) var(--space-4);
margin-block: var(--space-3);
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.35);
}
.bulk-action-bar__badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px 10px;
background: var(--accent-muted, rgba(var(--accent-rgb),0.15));
color: var(--accent);
border-radius: 99px;
font-size: var(--text-sm);
font-weight: 600;
white-space: nowrap;
}
.bulk-action-bar__sep {
flex: 1;
}
.bulk-action-bar .btn[aria-disabled="true"],
.bulk-action-bar .btn:disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
[dir="rtl"] .bulk-action-bar { direction: rtl; }
/* ── Modal overlay ───────────────────────────────────────────────────────── */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
background: rgba(var(--shadow-rgb), 0.55);
backdrop-filter: blur(2px);
}
.modal-card {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: 0 24px 64px rgba(var(--shadow-rgb), 0.5);
padding: var(--space-6);
width: 100%;
max-width: 480px;
max-height: 90vh;
overflow-y: auto;
}
.modal-card__title {
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-1);
margin-bottom: var(--space-5);
}
[dir="rtl"] .modal-overlay { direction: rtl; }
/* ── Bulk-pay confirmation summary (employee-requests index) ─────────────── */
.bulk-pay-summary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.bulk-pay-summary__item {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--space-3) var(--space-4);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.bulk-pay-summary__label {
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-2);
}
.bulk-pay-summary__value {
font-size: var(--text-lg);
font-weight: 700;
color: var(--text-1);
}
[dir="rtl"] .bulk-pay-summary__item { text-align: start; }
@media (max-width: 480px) {
.bulk-pay-summary { grid-template-columns: 1fr; }
}
/* ── Detail list (used in confirm_delete view) ───────────────────────────── */
.detail-list {
display: grid;
gap: 0;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--space-5);
}
.detail-list__row {
display: grid;
grid-template-columns: 10rem 1fr;
gap: var(--space-4);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border);
align-items: start;
}
.detail-list__row:last-child { border-bottom: none; }
.detail-list__row dt {
font-size: var(--text-sm);
font-weight: 600;
color: var(--text-2);
padding-top: 2px;
}
.detail-list__row dd {
font-size: var(--text-sm);
color: var(--text-1);
margin: 0;
}
[dir="rtl"] .detail-list__row { direction: rtl; }
[dir="rtl"] .detail-list__row dt { text-align: start; }
@media (max-width: 480px) {
.detail-list__row { grid-template-columns: 1fr; gap: var(--space-1); }
.modal-card { padding: var(--space-4); }
.bulk-action-bar { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
}
/* ============================================================
SHIFT ASSIGNMENTS — POLISH PASS
Mobile card layout, timeline bar, empty states, preview panel
============================================================ */
/* ── Assignment timeline bar ─────────────────────────────────────────────── */
/*
A thin horizontal bar that visualises the assignment window as a fraction
of a reference period (fixed at 365 days). Rendered inside a | in the
index table and also shown in the confirm_delete detail list.
*/
.sa-timeline {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 80px;
}
.sa-timeline__track {
position: relative;
height: 6px;
background: var(--surface-3);
border-radius: 99px;
overflow: hidden;
}
.sa-timeline__fill {
position: absolute;
top: 0;
inset-inline-start: 0;
height: 100%;
border-radius: 99px;
transition: width 0.3s ease;
}
.sa-timeline__fill--active { background: var(--success); }
.sa-timeline__fill--upcoming { background: var(--accent); }
.sa-timeline__fill--ended { background: var(--text-3); }
.sa-timeline__fill--open { background: var(--success); } /* no end date = open */
.sa-timeline__label {
font-size: 10px;
color: var(--text-3);
line-height: 1.2;
white-space: nowrap;
}
/* ── Conflict preview panel (inside bulk-assign modal) ───────────────────── */
.conflict-preview {
margin: var(--space-4) 0;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
font-size: var(--text-sm);
}
.conflict-preview__header {
display: flex;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--surface-2);
border-bottom: 1px solid var(--border);
font-weight: 600;
}
.conflict-preview__stat { display: flex; align-items: center; gap: var(--space-1); }
.conflict-preview__stat--ok { color: var(--success); }
.conflict-preview__stat--warn { color: var(--warning); }
.conflict-preview__list {
max-height: 160px;
overflow-y: auto;
}
.conflict-preview__row {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-2) var(--space-4);
border-bottom: 1px solid var(--border);
line-height: 1.4;
}
.conflict-preview__row:last-child { border-bottom: none; }
.conflict-preview__row--ok { color: var(--text-2); }
.conflict-preview__row--warn { color: var(--warning); }
.conflict-preview__dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 5px;
}
.conflict-preview__dot--ok { background: var(--success); }
.conflict-preview__dot--warn { background: var(--warning); }
.conflict-preview__reason {
color: var(--text-3);
font-size: 11px;
display: block;
}
/* Loading skeleton inside preview panel */
.conflict-preview__loading {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
color: var(--text-3);
font-size: var(--text-sm);
}
.conflict-preview__spinner {
width: 14px;
height: 14px;
border: 2px solid var(--surface-3);
border-top-color: var(--accent);
border-radius: 50%;
animation: spin 0.7s linear infinite;
flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Empty states (three variants) ──────────────────────────────────────── */
/*
.sa-empty-state — generic wrapper
.sa-empty-state--no-results — filter produced nothing
.sa-empty-state--all-expired — tab = expired and everything is ended
*/
.sa-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-12) var(--space-6);
text-align: center;
gap: var(--space-3);
}
.sa-empty-state__icon {
width: 48px;
height: 48px;
color: var(--text-3);
margin-bottom: var(--space-2);
opacity: 0.6;
}
.sa-empty-state__title {
font-size: var(--text-base);
font-weight: 600;
color: var(--text-2);
}
.sa-empty-state__sub {
font-size: var(--text-sm);
color: var(--text-3);
max-width: 360px;
line-height: 1.55;
}
.sa-empty-state__actions {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
justify-content: center;
margin-top: var(--space-2);
}
/* ── Mobile responsive: card mode ────────────────────────────────────────── */
/*
Below 768 px the table collapses into vertical "cards", one per row.
Each | renders its column label via the data-label attribute.
The employee cell gets sticky positioning so it's always visible when
the user scrolls horizontally on intermediate widths (480-768).
*/
@media (max-width: 768px) {
/* Hide standard table header — labels come from data-label on each cell */
.table-wrap--cards thead {
display: none;
}
.table-wrap--cards tbody tr {
display: block;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
margin-bottom: var(--space-3);
padding: var(--space-1) 0;
overflow: hidden;
}
.table-wrap--cards tbody td {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-2) var(--space-4);
border-bottom: 1px solid var(--border);
font-size: var(--text-sm);
}
.table-wrap--cards tbody td:last-child {
border-bottom: none;
}
/* data-label pseudo-element: column name on the left */
.table-wrap--cards tbody td[data-label]::before {
content: attr(data-label);
display: block;
min-width: 100px;
font-size: 11px;
font-weight: 600;
color: var(--text-3);
text-transform: uppercase;
letter-spacing: 0.04em;
padding-top: 2px;
flex-shrink: 0;
}
/* Checkbox cell: no label, full-width tap target */
.table-wrap--cards tbody td.td-check {
justify-content: flex-start;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border);
}
.table-wrap--cards tbody td.td-check::before {
display: none;
}
/* Actions row — stack links vertically */
.table-wrap--cards tbody td.td-actions {
flex-wrap: wrap;
gap: var(--space-2);
}
.table-wrap--cards tbody td.td-actions::before {
display: none;
}
/* Bulk action bar: stack vertically on small screens */
.bulk-action-bar {
flex-wrap: wrap;
gap: var(--space-2);
padding: var(--space-3);
}
.bulk-action-bar__sep {
display: none; /* no spacer; buttons wrap naturally */
}
/* KPI grid: 2 columns on mobile */
.attn-kpi-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Filter grid: single column */
.adj-filter-grid {
grid-template-columns: 1fr;
}
/* Timeline: hide on very small rows (still shown in card mode via data-label) */
.sa-timeline__track { min-width: 60px; }
}
@media (max-width: 480px) {
.attn-kpi-grid { grid-template-columns: 1fr 1fr; }
/* Modal takes full screen height on phones */
.modal-card {
max-height: 95vh;
border-radius: var(--radius-lg);
}
/* Bulk bar fills the full width */
.bulk-action-bar {
left: 0;
right: 0;
border-radius: 0;
}
}
/* RTL mobile overrides */
[dir="rtl"] .table-wrap--cards tbody td[data-label]::before {
text-align: start;
}
[dir="rtl"] .conflict-preview { direction: rtl; }
[dir="rtl"] .sa-timeline { direction: rtl; }
/* ============================================================
EMPLOYEE SHIFT TIMELINE
Vertical timeline inside the admin user profile.
Classes: .shift-timeline, .timeline-item, .timeline-marker,
.timeline-card, .timeline-period, .timeline-overnight
============================================================ */
/* ── Outer wrapper ───────────────────────────────────────────────────────── */
.shift-timeline {
/* lives inside a .card; no extra card chrome needed */
}
/* ── Filter toolbar ──────────────────────────────────────────────────────── */
.timeline-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-3);
padding: var(--space-4) var(--space-4) 0;
margin-bottom: var(--space-4);
}
.timeline-tabs {
display: flex;
gap: var(--space-1);
background: var(--surface-2);
border-radius: var(--radius);
padding: 3px;
}
.timeline-tab {
padding: 5px var(--space-3);
border-radius: calc(var(--radius) - 2px);
font-size: var(--text-sm);
font-weight: 500;
color: var(--text-2);
text-decoration: none;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.timeline-tab:hover { color: var(--text-1); background: var(--surface-3); }
.timeline-tab--active {
background: var(--surface-1);
color: var(--text-1);
font-weight: 600;
box-shadow: 0 1px 3px rgba(var(--shadow-rgb),0.25);
}
/* ── Collapsible filter bar ──────────────────────────────────────────────── */
.timeline-filter-row {
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--border);
background: var(--surface-2);
}
.timeline-filter-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--space-3);
}
.timeline-filter-actions {
display: flex;
gap: var(--space-2);
margin-top: var(--space-3);
flex-wrap: wrap;
}
/* ── Rail and item list ──────────────────────────────────────────────────── */
.shift-timeline__list {
position: relative;
padding: var(--space-4) var(--space-4) var(--space-2) var(--space-8);
}
/* Vertical connector line running through all items */
.shift-timeline__list::before {
content: "";
position: absolute;
inset-inline-start: calc(var(--space-4) + 6px); /* 16+6 = 22px from edge */
top: calc(var(--space-4) + 14px); /* below first dot */
bottom: var(--space-8);
width: 2px;
background: var(--surface-3);
border-radius: 2px;
}
/* Empty state: no line needed */
.shift-timeline__list--empty::before { display: none; }
.timeline-item {
position: relative;
padding-bottom: var(--space-5);
}
.timeline-item:last-child { padding-bottom: 0; }
/* ── Timeline dot ───────────────────────────────────────────────────────── */
.timeline-marker {
position: absolute;
inset-inline-start: calc(-1 * var(--space-8) + var(--space-4)); /* = -32+16 = -16px from item = 32-16=16px from list edge; center on line at 22px */
/* Adjusted to actually center: line at 22px → dot left edge at 22-6=16px from list → -32+16 = -16 from item */
top: 12px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid var(--bg);
background: var(--text-3);
z-index: 1;
flex-shrink: 0;
}
.timeline-marker--active { background: var(--success); box-shadow: 0 0 0 3px var(--success-muted); }
.timeline-marker--upcoming { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-muted); }
.timeline-marker--ended { background: var(--text-3); }
/* ── Timeline card ──────────────────────────────────────────────────────── */
.timeline-card {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.timeline-card:hover {
border-color: var(--border-strong);
box-shadow: 0 4px 16px rgba(var(--shadow-rgb),0.15);
}
/* Accent left-border tint per status */
.timeline-card--active {
border-inline-start: 3px solid var(--success);
}
.timeline-card--upcoming {
border-inline-start: 3px solid var(--accent);
}
/* Temporary assignments get an amber left border that overrides the status
color and a warm background tint — unmissable even at a glance */
.timeline-card.timeline-card--temporary {
border-inline-start: 4px solid var(--warning);
background: color-mix(in srgb, var(--warning) 6%, var(--surface-1));
}
/* Card header: shift name + badges row */
.timeline-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
flex-wrap: wrap;
}
.timeline-card__title {
font-size: var(--text-base);
font-weight: 700;
color: var(--text-1);
line-height: 1.3;
}
.timeline-card__title a {
color: inherit;
text-decoration: none;
}
.timeline-card__title a:hover { color: var(--accent); }
.timeline-card__badges {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
align-items: center;
flex-shrink: 0;
}
/* Meta row: branch | hours | relative date */
.timeline-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
margin-bottom: var(--space-3);
}
.timeline-meta-item {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-sm);
color: var(--text-2);
}
.timeline-meta-item__icon {
width: 13px;
height: 13px;
color: var(--text-3);
flex-shrink: 0;
}
/* ── Period progress bar ────────────────────────────────────────────────── */
.timeline-period {
margin-bottom: var(--space-3);
}
.timeline-period__label {
font-size: var(--text-sm);
color: var(--text-2);
margin-bottom: var(--space-1);
display: flex;
justify-content: space-between;
align-items: center;
}
.timeline-period__pct {
font-size: 11px;
color: var(--text-3);
}
.timeline-period__bar {
height: 4px;
background: var(--surface-3);
border-radius: 99px;
overflow: hidden;
}
.timeline-period__fill {
height: 100%;
border-radius: 99px;
transition: width 0.4s ease;
}
.timeline-period__fill--active { background: var(--success); }
.timeline-period__fill--upcoming { background: var(--accent); }
.timeline-period__fill--open { background: var(--success); }
.timeline-period__fill--ended { background: var(--text-3); }
/* ── Overnight badge ───────────────────────────────────────────────────── */
.timeline-overnight {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
font-weight: 600;
color: var(--warning);
background: var(--warning-muted);
border-radius: var(--radius-full);
padding: 1px 8px;
letter-spacing: 0.02em;
}
/* ── Audit footer ───────────────────────────────────────────────────────── */
.timeline-card__audit {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
padding-top: var(--space-3);
border-top: 1px solid var(--border);
font-size: 11px;
color: var(--text-3);
line-height: 1.5;
}
.timeline-audit-item {
display: flex;
align-items: center;
gap: var(--space-1);
}
.timeline-audit-item--template {
color: var(--accent);
}
.timeline-audit-item--template a {
color: var(--accent);
font-weight: 600;
}
/* ── Timeline pagination ───────────────────────────────────────────────── */
.timeline-pagination {
display: flex;
justify-content: center;
padding: var(--space-4);
border-top: 1px solid var(--border);
}
/* ── Empty states ──────────────────────────────────────────────────────── */
.timeline-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-12) var(--space-6);
text-align: center;
gap: var(--space-3);
}
.timeline-empty__icon {
width: 44px;
height: 44px;
color: var(--text-3);
opacity: 0.5;
}
.timeline-empty__title {
font-size: var(--text-base);
font-weight: 600;
color: var(--text-2);
}
.timeline-empty__sub {
font-size: var(--text-sm);
color: var(--text-3);
max-width: 320px;
line-height: 1.55;
}
.timeline-empty__actions {
display: flex;
gap: var(--space-3);
justify-content: center;
flex-wrap: wrap;
margin-top: var(--space-2);
}
/* ── RTL ────────────────────────────────────────────────────────────────── */
[dir="rtl"] .shift-timeline__list {
padding-inline-start: var(--space-8);
padding-inline-end: var(--space-4);
}
[dir="rtl"] .timeline-card--active { border-inline-start: 3px solid var(--success); }
[dir="rtl"] .timeline-card--upcoming { border-inline-start: 3px solid var(--accent); }
[dir="rtl"] .timeline-card.timeline-card--temporary { border-inline-start: 4px solid var(--warning); background: color-mix(in srgb, var(--warning) 6%, var(--surface-1)); }
[dir="rtl"] .temp-expiry-notice { flex-direction: row-reverse; }
[dir="rtl"] .temp-indicator { align-items: flex-end; }
[dir="rtl"] .timeline-marker {
inset-inline-start: calc(-1 * var(--space-8) + var(--space-4));
}
[dir="rtl"] .timeline-card__header { flex-direction: row-reverse; }
[dir="rtl"] .timeline-card__meta { flex-direction: row-reverse; }
[dir="rtl"] .timeline-card__audit { flex-direction: row-reverse; }
[dir="rtl"] .timeline-tabs { flex-direction: row-reverse; }
/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.shift-timeline__list {
padding-inline-start: var(--space-6);
padding-inline-end: var(--space-2);
}
.shift-timeline__list::before {
inset-inline-start: calc(var(--space-3) + 4px);
}
.timeline-marker {
inset-inline-start: calc(-1 * var(--space-6) + var(--space-3));
width: 12px;
height: 12px;
top: 14px;
}
.timeline-card {
padding: var(--space-3);
}
.timeline-card__header {
flex-direction: column;
gap: var(--space-2);
}
.timeline-card__meta {
flex-direction: column;
gap: var(--space-1);
}
.timeline-card__audit {
flex-direction: column;
gap: var(--space-1);
}
.timeline-tabs {
overflow-x: auto;
max-width: 100%;
}
.timeline-filter-grid {
grid-template-columns: 1fr;
}
.timeline-toolbar {
flex-direction: column;
align-items: stretch;
}
}
@media (max-width: 480px) {
.timeline-card__badges { justify-content: flex-start; }
}
/* ─── Shift Templates ────────────────────────────────────────────────────── */
/* Template cards grid */
.template-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--space-4);
margin-top: var(--space-4);
}
.template-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
transition: box-shadow 0.15s ease;
}
.template-card:hover {
box-shadow: var(--shadow-sm);
}
.template-card__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.template-card__meta {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.template-card__name {
font-size: var(--text-base);
font-weight: 600;
margin: 0;
}
.template-card__actions {
display: flex;
align-items: center;
gap: var(--space-3);
flex-shrink: 0;
}
.template-card__desc {
color: var(--text-muted);
font-size: var(--text-sm);
margin: 0;
}
.template-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: var(--space-3);
border-top: 1px solid var(--border);
}
.template-card__count {
font-size: var(--text-sm);
color: var(--text-muted);
}
/* Weekday coverage grid */
.weekday-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--space-2);
margin-top: var(--space-3);
}
.weekday-col {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-height: 80px;
}
.weekday-col--empty .weekday-chip {
background: var(--surface-dim);
color: var(--text-muted);
}
.weekday-chip {
background: var(--primary-100);
color: var(--primary-700);
border-radius: var(--radius-sm);
padding: 0.25rem 0.5rem;
font-size: var(--text-xs);
font-weight: 600;
text-align: center;
white-space: nowrap;
}
.weekday-chip--sm {
padding: 0.15rem 0.4rem;
font-size: 0.65rem;
}
.weekday-empty-day {
color: var(--text-muted);
text-align: center;
font-size: var(--text-sm);
padding: var(--space-2);
}
.entry-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: var(--space-2);
}
.entry-card__shift {
font-size: var(--text-sm);
font-weight: 500;
}
.entry-card__branch {
margin-top: 0.125rem;
}
.entry-card__offset {
margin-top: 0.125rem;
}
/* Coverage summary stats */
.summary-stats {
display: flex;
gap: var(--space-6);
flex-wrap: wrap;
padding: var(--space-4) 0;
}
.summary-stat__value {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--primary);
}
.summary-stat__label {
font-size: var(--text-sm);
color: var(--text-muted);
margin-top: 0.25rem;
}
/* Template entries form */
.entries-section {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.entries-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.entry-row-headers {
display: grid;
grid-template-columns: 120px 120px 1fr 1fr 36px;
gap: var(--space-2);
padding: 0 0.5rem;
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.entry-row {
display: grid;
grid-template-columns: 120px 120px 1fr 1fr 36px;
gap: var(--space-2);
align-items: start;
padding: var(--space-2) var(--space-2);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
/* Rule profile cards */
.rule-profile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-4);
}
.rule-profile-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.rule-profile-card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-2);
}
.rule-profile-card__name {
font-weight: 600;
font-size: var(--text-base);
}
.rule-profile-card__desc {
margin-top: var(--space-1);
}
.rule-profile-card__specs {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.rule-spec {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-1) 0;
border-bottom: 1px solid var(--border);
font-size: var(--text-sm);
}
.rule-spec:last-child {
border-bottom: none;
}
.rule-spec__label {
color: var(--text-muted);
}
.rule-spec__value {
font-weight: 500;
}
.rule-profile-card__actions {
margin-top: auto;
padding-top: var(--space-2);
border-top: 1px solid var(--border);
}
/* Rule profile show detail grid */
.rule-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
margin-top: var(--space-3);
}
.rule-detail-item__label {
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: var(--space-1);
}
.rule-detail-item__value {
font-size: var(--text-base);
font-weight: 500;
margin-bottom: var(--space-1);
}
.form-section {
margin-bottom: var(--space-4);
}
/* Template entries list (show + apply views) */
.template-entries-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-3);
}
.template-entries-list--compact {
margin-top: var(--space-2);
}
.template-entry-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.template-entry-item--sm {
padding: var(--space-1) var(--space-2);
}
.template-entry-item__dates {
display: flex;
align-items: center;
gap: var(--space-1);
min-width: 160px;
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
}
.template-entry-item__from,
.template-entry-item__to {
font-weight: 500;
}
.template-entry-item__arrow {
color: var(--text-muted);
}
.template-entry-item__shift {
font-weight: 500;
flex: 1;
}
.template-entry-item__branch {
min-width: 100px;
}
.template-entry-item__span {
white-space: nowrap;
}
/* Apply flow */
.employee-checklist {
display: flex;
flex-direction: column;
gap: var(--space-1);
max-height: 400px;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-3);
}
.employee-check-row {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-2);
border-radius: var(--radius-sm);
cursor: pointer;
}
.employee-check-row:hover {
background: var(--surface-dim);
}
.employee-check-name {
font-size: var(--text-sm);
font-weight: 500;
flex: 1;
}
.employee-check-code {
font-size: var(--text-xs);
}
/* Preview table */
.preview-summary {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
margin-bottom: var(--space-4);
}
.preview-stat {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-sm);
font-weight: 500;
}
.preview-stat__num {
font-size: var(--text-xl);
font-weight: 700;
}
.preview-stat--valid {
background: var(--color-success-bg);
color: var(--color-success);
}
.preview-stat--warning {
background: var(--color-warning-bg);
color: var(--color-warning);
}
.preview-stat--blocked {
background: var(--color-danger-bg);
color: var(--color-danger);
}
.preview-row--blocked td {
opacity: 0.55;
}
.preview-row--warning td {
background: var(--color-warning-bg);
}
/* ── Preview employee cards ─────────────────────────────────────────────── */
.preview-employee-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.preview-employee-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.preview-employee-card--issues {
border-color: var(--color-warning);
}
.preview-employee-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--surface-2);
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.preview-employee-card__name {
font-size: var(--text-base);
font-weight: 700;
color: var(--text-1);
}
.preview-employee-card__badges {
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
}
.preview-assignment-list {
padding: var(--space-2) var(--space-3);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.preview-assignment {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-2) var(--space-1);
border-radius: var(--radius);
font-size: var(--text-sm);
flex-wrap: wrap;
}
.preview-assignment + .preview-assignment {
border-top: 1px solid var(--border);
padding-top: var(--space-2);
}
.preview-assignment--blocked {
opacity: 0.55;
}
.preview-assignment--warning {
background: var(--color-warning-bg);
margin-inline: calc(-1 * var(--space-1));
padding-inline: var(--space-1);
border-radius: var(--radius);
}
.preview-assignment__period,
.preview-assignment__shift,
.preview-assignment__rule {
display: flex;
align-items: center;
gap: var(--space-1);
color: var(--text-1);
white-space: nowrap;
}
.preview-assignment__rule {
color: var(--text-2);
}
.preview-assignment__icon {
width: 13px;
height: 13px;
flex-shrink: 0;
color: var(--text-3);
}
.preview-assignment__status {
margin-inline-start: auto;
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.preview-assignment__conflict-reason {
font-size: 11px;
color: var(--text-3);
}
/* ── Concept trio (scheduling rules index) ──────────────────────────────── */
.concept-trio {
display: flex;
align-items: flex-start;
gap: var(--space-3);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4);
margin-bottom: var(--space-5);
flex-wrap: wrap;
}
.concept-trio__item {
display: flex;
gap: var(--space-3);
flex: 1;
min-width: 160px;
padding: var(--space-3);
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--border);
}
.concept-trio__item--active {
border-color: var(--accent);
background: var(--surface-1);
box-shadow: 0 0 0 2px var(--accent-muted);
}
.concept-trio__icon {
color: var(--text-3);
margin-top: 2px;
flex-shrink: 0;
}
.concept-trio__item--active .concept-trio__icon {
color: var(--accent);
}
.concept-trio__label {
font-size: var(--text-sm);
font-weight: 700;
color: var(--text-1);
margin-bottom: 2px;
}
.concept-trio__desc {
font-size: var(--text-xs);
color: var(--text-2);
line-height: 1.5;
}
.concept-trio__sep {
align-self: center;
color: var(--text-3);
font-size: var(--text-lg);
flex-shrink: 0;
}
/* ── Concept hint box (form context note) ───────────────────────────────── */
.concept-hint-box {
background: var(--surface-2);
border-inline-start: 3px solid var(--accent);
border-radius: var(--radius);
padding: var(--space-3) var(--space-4);
font-size: var(--text-sm);
color: var(--text-2);
line-height: 1.6;
}
.concept-hint-box__list {
margin: var(--space-2) 0 0 var(--space-4);
padding: 0;
list-style: disc;
}
.concept-hint-box__list li {
margin-bottom: var(--space-1);
}
/* Section card */
.section-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-5);
margin-bottom: var(--space-4);
}
.section-card__title {
font-size: var(--text-base);
font-weight: 600;
margin: 0 0 var(--space-3);
}
.section-card--danger {
border-color: var(--color-danger-border);
}
/* Detail meta */
.detail-meta {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-4);
flex-wrap: wrap;
}
/* btn-inline: button that looks like a link */
.btn-inline {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: inherit;
color: inherit;
font-family: inherit;
}
/* RTL adjustments */
[dir="rtl"] .template-card__header { flex-direction: row-reverse; }
[dir="rtl"] .template-card__footer { flex-direction: row-reverse; }
[dir="rtl"] .entries-header { flex-direction: row-reverse; }
[dir="rtl"] .preview-summary { flex-direction: row-reverse; }
[dir="rtl"] .concept-trio { flex-direction: row-reverse; }
[dir="rtl"] .concept-trio__sep { transform: scaleX(-1); }
[dir="rtl"] .concept-hint-box { border-inline-start: none; border-inline-end: 3px solid var(--accent); }
[dir="rtl"] .preview-employee-card__header { flex-direction: row-reverse; }
[dir="rtl"] .preview-assignment { flex-direction: row-reverse; }
[dir="rtl"] .preview-assignment__status { margin-inline-start: 0; margin-inline-end: auto; }
@media (max-width: 768px) {
.template-cards {
grid-template-columns: 1fr;
}
.weekday-grid {
grid-template-columns: repeat(4, 1fr);
}
.entry-row-headers {
display: none;
}
.entry-row {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
}
}
/* ── Area Manager Operational Dashboard ─────────────────────────────────── */
/* Alert panel */
.am-alert-count {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--danger);
color: var(--on-solid);
font-size: 11px;
font-weight: 700;
margin-inline-start: 6px;
vertical-align: middle;
}
.am-alerts-list { display: flex; flex-direction: column; gap: var(--space-2); }
.am-alert-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius);
border: 1px solid transparent;
}
.am-alert-item--danger { background: rgba(var(--danger-rgb),0.06); border-color: rgba(var(--danger-rgb),0.2); }
.am-alert-item--warning { background: rgba(var(--warning-rgb),0.06); border-color: rgba(var(--warning-rgb),0.2); }
.am-alert-item__icon { flex-shrink: 0; margin-top: 2px; color: var(--text-2); }
.am-alert-item--danger .am-alert-item__icon { color: var(--danger); }
.am-alert-item--warning .am-alert-item__icon { color: var(--warning); }
.am-alert-item__body { flex: 1; min-width: 0; }
.am-alert-item__title { font-weight: 600; font-size: var(--text-sm); margin: 0 0 2px; color: var(--text-1); }
.am-alert-item__names { font-size: var(--text-xs); color: var(--text-2); margin: 0; }
.am-alert-item__action {
flex-shrink: 0;
font-size: var(--text-xs);
color: var(--accent);
text-decoration: none;
white-space: nowrap;
align-self: center;
}
.am-alert-item__action:hover { text-decoration: underline; }
/* Branch health grid */
.branch-health-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--space-3);
}
.branch-health-card {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
border-inline-start-width: 3px;
}
.branch-health-card--green { border-inline-start-color: var(--success); }
.branch-health-card--yellow { border-inline-start-color: var(--warning); }
.branch-health-card--red { border-inline-start-color: var(--danger); }
.branch-health-card__header { display: flex; flex-direction: column; gap: 2px; }
.branch-health-card__name-row { display: flex; align-items: center; gap: var(--space-2); }
.branch-health-card__name { font-weight: 600; font-size: var(--text-sm); flex: 1; }
.branch-health-card__manager { font-size: var(--text-xs); color: var(--text-2); }
.branch-health-card__health-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.branch-health-card__health-dot--green { background: var(--success); }
.branch-health-card__health-dot--yellow { background: var(--warning); }
.branch-health-card__health-dot--red { background: var(--danger); }
.branch-health-card__stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-2);
text-align: center;
}
.branch-health-card__stat { display: flex; flex-direction: column; gap: 2px; }
.branch-health-card__stat-value {
font-size: var(--text-base);
font-weight: 700;
color: var(--text-1);
line-height: 1;
}
.branch-health-card__stat-denom {
font-size: var(--text-xs);
font-weight: 400;
color: var(--text-2);
}
.branch-health-card__stat-label { font-size: 10px; color: var(--text-3); }
.branch-health-card__bar-row {
display: flex;
align-items: center;
gap: var(--space-2);
}
.branch-health-card__bar-row .branch-snapshot__bar { flex: 1; }
.branch-health-card__pct { font-size: var(--text-xs); font-weight: 600; flex-shrink: 0; min-width: 32px; text-align: end; }
.branch-health-card__footer {
display: flex;
gap: var(--space-3);
border-top: 1px solid var(--border);
padding-top: var(--space-2);
margin-top: auto;
}
.branch-health-card__link {
font-size: var(--text-xs);
color: var(--accent);
text-decoration: none;
}
.branch-health-card__link:hover { text-decoration: underline; }
/* Pending approvals pills */
.am-approvals-breakdown {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-2);
}
.am-approvals-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: var(--text-xs);
background: var(--surface-2);
color: var(--text-2);
border: 1px solid var(--border);
}
.am-approvals-pill--warning { background: rgba(var(--warning-rgb),0.1); color: var(--warning); border-color: rgba(var(--warning-rgb),0.3); }
.am-badge-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 999px;
background: var(--warning);
color: var(--on-accent);
font-size: 11px;
font-weight: 700;
margin-inline-start: 6px;
vertical-align: middle;
}
/* Inline progress bar for ranking table */
.am-inline-bar {
display: inline-block;
width: 60px;
height: 6px;
background: var(--surface-2);
border-radius: 3px;
overflow: hidden;
vertical-align: middle;
margin-inline-end: 4px;
}
.am-inline-bar__fill { height: 100%; border-radius: 3px; }
.am-inline-bar__fill--success { background: var(--success); }
.am-inline-bar__fill--warning { background: var(--warning); }
.am-inline-bar__fill--danger { background: var(--danger); }
/* Health badge */
.am-health-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: var(--text-xs);
font-weight: 600;
}
.am-health-badge--green { background: rgba(var(--success-rgb),0.12); color: var(--success); }
.am-health-badge--yellow { background: rgba(var(--warning-rgb),0.12); color: var(--warning); }
.am-health-badge--red { background: rgba(var(--danger-rgb),0.12); color: var(--danger); }
/* 7-day trend chart */
.am-trend-chart {
display: flex;
align-items: flex-end;
gap: var(--space-2);
height: 120px;
padding-bottom: 36px; /* room for labels */
position: relative;
}
.am-trend-day {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
flex: 1;
height: 100%;
position: relative;
}
.am-trend-day__pct {
font-size: 10px;
font-weight: 600;
color: var(--text-2);
position: absolute;
top: 0;
}
.am-trend-day__bar-wrap {
flex: 1;
width: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
padding-top: 16px; /* space for pct label */
}
.am-trend-day__bar {
width: 80%;
max-width: 36px;
border-radius: 3px 3px 0 0;
min-height: 3px;
transition: height 0.3s ease;
}
.am-trend-day__bar--success { background: var(--success); }
.am-trend-day__bar--warning { background: var(--warning); }
.am-trend-day__bar--danger { background: var(--danger); }
.am-trend-day__bar--empty { background: var(--surface-2); }
.am-trend-day__label {
position: absolute;
bottom: 16px;
font-size: var(--text-xs);
color: var(--text-2);
font-weight: 500;
}
.am-trend-day__sub {
position: absolute;
bottom: 0;
font-size: 10px;
color: var(--text-3);
white-space: nowrap;
}
/* Quick actions */
.am-quick-actions {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--space-3);
}
.am-quick-action {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius);
text-decoration: none;
transition: box-shadow 0.15s, border-color 0.15s;
}
.am-quick-action:hover { box-shadow: 0 2px 8px rgba(var(--shadow-rgb),0.12); border-color: var(--accent); }
.am-quick-action--alert { border-color: var(--warning); }
.am-quick-action__icon {
width: 36px; height: 36px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.am-quick-action__icon--primary { background: rgba(var(--accent-rgb),0.12); color: var(--accent); }
.am-quick-action__icon--accent { background: rgba(var(--indigo-rgb),0.12); color: #6366f1; }
.am-quick-action__icon--success { background: rgba(var(--success-rgb),0.12); color: var(--success); }
.am-quick-action__icon--warning { background: rgba(var(--warning-rgb),0.12); color: var(--warning); }
.am-quick-action__icon--neutral { background: var(--surface-2); color: var(--text-2); }
.am-quick-action__icon--danger { background: rgba(var(--danger-rgb),0.12); color: var(--danger); }
.am-quick-action__text { min-width: 0; }
.am-quick-action__label {
font-weight: 600;
font-size: var(--text-sm);
color: var(--text-1);
margin: 0;
display: flex;
align-items: center;
gap: 4px;
}
.am-quick-action__sub {
font-size: var(--text-xs);
color: var(--text-2);
margin: 0;
}
.am-quick-action__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 999px;
background: var(--warning);
color: var(--on-accent);
font-size: 10px;
font-weight: 700;
}
/* RTL support */
[dir="rtl"] .branch-health-card { border-inline-start-width: 3px; }
[dir="rtl"] .am-alert-item__body { text-align: right; }
[dir="rtl"] .am-quick-action__text { text-align: right; }
/* Responsive */
@media (max-width: 768px) {
.branch-health-grid { grid-template-columns: 1fr; }
.am-quick-actions { grid-template-columns: 1fr 1fr; }
.am-trend-chart { height: 100px; }
}
/* ============================================================
DASHBOARD — Phase C composition (compose wrapper, quick-actions
bar, current-shift summary, section banners)
============================================================ */
/* Single content container for the whole composed dashboard. Centers and
constrains content to a comfortable desktop width with consistent padding,
so the greeting, quick actions, personal widgets and management sections all
share one alignment instead of each partial's legacy width. */
.dashboard-compose {
max-width: 1280px;
margin: 0 auto;
width: 100%;
padding: var(--space-5) var(--space-4) var(--space-10);
display: flex;
flex-direction: column;
gap: var(--space-6);
}
@media (min-width: 768px) {
.dashboard-compose {
padding: var(--space-7) var(--space-6) var(--space-12);
gap: var(--space-7);
}
}
@media (min-width: 1280px) {
.dashboard-compose { padding-inline: var(--space-8); }
}
/* Composed partials drop their standalone width/margin/padding and fill the
shared container; their internal flex/grid layouts (and gaps) are preserved,
so management grids now expand to the full available width. */
.dashboard-compose .emp-dashboard,
.dashboard-compose .mgr-dashboard,
.dashboard-compose .owner-dashboard,
.dashboard-compose .admin-page {
max-width: none;
width: 100%;
margin: 0;
padding: 0;
}
/* Header band: greeting + quick actions as a single first-class row. */
.dashboard-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.dashboard-header .emp-dashboard__greeting { padding-top: 0; }
/* Personal widgets tile responsively instead of a single narrow column. */
.dashboard-personal {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-4);
align-items: start;
}
.dash-widget {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
}
/* Full-bleed widgets (alerts) span the whole personal grid. */
.dash-widget--full { grid-column: 1 / -1; }
/* Compact, horizontally-scrollable permission-driven shortcut bar */
.dashboard-quick-bar {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.dashboard-quick-bar__action {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-full);
color: var(--text-1);
font-size: var(--text-sm);
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: background var(--transition), border-color var(--transition);
}
.dashboard-quick-bar__action:hover {
background: var(--accent-muted);
border-color: var(--accent-ring);
color: var(--accent);
}
.dashboard-quick-bar__action svg { flex-shrink: 0; }
/* Current-shift summary inside the My Schedule widget */
.emp-current-shift {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.emp-current-shift__main {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
}
.emp-current-shift__name { font-weight: 600; color: var(--text-1); }
.emp-current-shift__branch,
.emp-current-shift__sep { color: var(--text-2); }
.emp-current-shift__expiry { color: var(--text-2); font-size: var(--text-sm); }
/* Section banners for stacked management/payroll/analytics sections */
.mgr-dashboard__section-banner,
.owner-section__banner,
.dashboard-section__banner {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--space-3);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--border);
margin-bottom: var(--space-2);
}
.mgr-dashboard__section-sub,
.owner-section__sub {
color: var(--text-2);
font-size: var(--text-sm);
}
[dir="rtl"] .emp-current-shift,
[dir="rtl"] .dashboard-quick-bar { flex-direction: row-reverse; }
[dir="rtl"] .dashboard-quick-bar { justify-content: flex-end; }
/* ============================================================
20. THEME TOGGLE (light / dark)
============================================================
The themes themselves live in the :root (light) and :root.dark
(dark) token blocks near the top of this file — every component
draws from those semantic variables, so the UI flips wholesale
with no per-component overrides. This section only styles the
toggle control and the cross-fade.
Strategy mirrors Tailwind's `class` strategy: a single `dark`
class on selects the dark theme (absence = light). An
inline script applies it before first paint (no flash),
reading localStorage first, then the OS `prefers-color-scheme`.
------------------------------------------------------------ */
/* Smooth cross-fade applied only while the user actively toggles
(the controller adds `.theme-transition` for ~260ms). Page loads
and Turbo navigations are NOT animated, so nothing janks. */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
transition: background-color 220ms ease,
border-color 220ms ease,
color 220ms ease,
fill 220ms ease,
box-shadow 220ms ease !important;
}
/* ── Theme toggle button ──────────────────────────────────────────── */
/* Icon swap shows the icon for the action the click performs.
Light (default) → moon (click darkens to dark).
Dark → sun (click brightens to light). */
.theme-toggle__icon--sun { display: none; }
.theme-toggle__icon--moon { display: block; }
:root.dark .theme-toggle__icon--moon { display: none; }
:root.dark .theme-toggle__icon--sun { display: block; }
/* Sidebar-variant label swaps the same way (matches the icon's action) */
.theme-toggle__label--dark { display: inline; }
.theme-toggle__label--light { display: none; }
:root.dark .theme-toggle__label--dark { display: none; }
:root.dark .theme-toggle__label--light { display: inline; }
/* Sidebar variant reuses .sidebar__nav-item look; it's a | |