/* * 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); } .flash--warning { background: var(--warning-muted); color: var(--warning); border-bottom: 1px solid rgba(var(--warning-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; } /* Read-only display field (e.g. the auto-resolved department on the observation form). Looks like a control but is non-editable and visually muted. */ .form-control--readonly { display: flex; align-items: center; background: var(--navy-700); color: var(--text-2); cursor: default; } .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); } /* Responsive grid of clickable card tiles (e.g. the finance reports hub). Direct children become grid items and are blockified, so card links never collapse to inline/overlapping boxes. CSS grid flows start→end, so the layout is correct in both LTR and RTL with no direction-specific rules. */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); } .card--link { display: flex; align-items: center; min-height: 60px; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; } .card--link:hover { border-color: rgba(var(--accent-rgb), 0.4); background: var(--navy-600); } /* ============================================================ 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); width: 100%; 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); /* Stack every child (controls, fields grid, actions) with consistent gap */ display: flex; flex-direction: column; gap: var(--space-4); } .filter-bar__fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); /* was space-3 (12px) → space-4 (16px) */ /* margin-bottom removed — parent flex gap handles spacing to actions row */ } .filter-bar__field { display: flex; flex-direction: column; gap: var(--space-2); /* was space-1 (4px) → space-2 (8px) */ } .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%; height: 44px; /* explicit height — was padding-only (~32px) */ padding: 0 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 removed — parent flex gap handles spacing */ } .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-3); /* was space-2 (8px) → space-3 (12px) */ } /* Old-pattern filter bars: submit button is a direct flex child. Keep it compact (left-aligned, auto width) on desktop; mobile overrides this to full-width. */ .filter-bar > .btn, .filter-bar > [type="submit"] { align-self: flex-start; } /* btn-sm used as a filter submit looks undersized next to 44–48 px controls. Promote it to 44 px on all screen sizes without changing its font or padding. */ .filter-bar .btn-sm, .filter-form .btn-sm { min-height: 44px; padding-block: 0; } /* ── Active filter chips ──────────────────────────────────────────────────── */ .filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); } .filter-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); background: var(--surface-1); border: 1px solid var(--border); border-radius: 999px; color: var(--text-1); white-space: nowrap; } .filter-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: 999px; color: var(--text-2); text-decoration: none; font-weight: 700; line-height: 1; } .filter-chip__remove:hover { background: var(--surface-2, var(--surface-0)); color: var(--text-1); } .filter-chip--clear { color: var(--accent); background: transparent; border-style: dashed; text-decoration: none; } .filter-chip--clear:hover { background: var(--surface-1); } /* ── Searchable select (progressive enhancement over a native