/* * 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__icon--brand { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-muted); color: var(--accent); opacity: 1; } .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); } /* When .back-link wraps a small breadcrumb trail (multiple segments) rather than being the link itself, nested links inherit the same muted color and only pick up accent on their own hover — same visual language as the single-link case, just extended to more than one segment. */ .back-link a { color: inherit; } .back-link a:hover { color: var(--accent); } .back-link span[aria-hidden] { color: var(--border-strong); } /* ============================================================ 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)); /* The extra 100px, on top of the bottom-nav height already reserved, keeps page content (e.g. a form's primary action button) clear of the fixed PWA install banner, which floats just above the bottom nav. */ padding-bottom: calc(var(--bottom-nav-h) + 100px); } @media (min-width: 1024px) { .app-main { margin-left: var(--sidebar-w); padding-top: 0; /* No bottom nav on desktop, but the PWA install banner still floats near the bottom of the viewport — reserve room so it never sits on top of a page's primary action buttons (e.g. a form's Save button). */ padding-bottom: 140px; } } /* --- 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; } } /* Daily Reconciliation's POS Verification / Audit Timeline grid must keep a fixed PHYSICAL column order (POS Verification always visually left, Audit Timeline always visually right) regardless of page language — a plain CSS grid's first child renders on the *right* in RTL, which would silently flip these two columns for Arabic. Forcing the grid itself to ltr pins the track positions; resetting direction back to rtl on each column's content keeps Arabic text reading correctly within it. */ [dir="rtl"] .dr-sales-timeline-grid { direction: ltr; } [dir="rtl"] .dr-sales-timeline-grid > * { direction: rtl; } /* The right-hand Audit Timeline doesn't need equal billing with the left column's data tables (Session Totals, Cash Reconciliation, etc.) — giving it a capped width instead of a 1fr/1fr split frees up the room those wide tables need to fit without an internal horizontal scrollbar. min-width: 0 on both children lets each shrink below its content's intrinsic size, which a grid item won't do by default. */ @media (min-width: 900px) { .dr-sales-timeline-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); } } .dr-sales-timeline-grid__main, .dr-sales-timeline-grid__aside { min-width: 0; } /* ── Daily Reconciliation redesigned sections ─────────────────────────────── */ /* Density tokens for the DR show page (Session Totals, Sales Verification Summary, Cash Reconciliation, Bank Deposits, POS Transactions, Approvals). Defaults match the original spacing exactly (no change on mobile/tablet); the min-width: 1024px override below is the ONLY place these tighten, so the compact rhythm applies to desktop/laptop only, per design. Every section/table/row in these partials reads its vertical padding and margins from these variables instead of a hardcoded --space-*, so the density can be tuned in one place without touching markup again. */ :root { --dr-section-gap: var(--space-6); /* gap between sections */ --dr-header-gap: var(--space-4); /* section header → body */ --dr-card-title-py: var(--space-3); /* card title bar (e.g. "Session Totals") */ --dr-header-row-py: var(--space-2); /* table column-header row */ --dr-row-py: var(--space-3); /* data row (payment method, deposit, etc.) */ --dr-formula-row-py: var(--space-2); /* +/− formula line (Cash Reconciliation, etc.) */ --dr-total-row-py: var(--space-4); /* grand total / footer row */ --dr-panel-py: var(--space-4); /* expanded disclosure panel content */ } @media (min-width: 1024px) { :root { --dr-section-gap: var(--space-4); --dr-header-gap: var(--space-3); --dr-card-title-py: var(--space-2); --dr-header-row-py: 3px; --dr-row-py: var(--space-1); --dr-formula-row-py: var(--space-1); --dr-total-row-py: var(--space-2); --dr-panel-py: var(--space-3); } } .recon-section { display: block; margin-bottom: var(--dr-section-gap); } /* Wraps fixed-column comparison grids (POS/electronic payments tables) so they scroll horizontally on narrow screens instead of overflowing the page. */ .recon-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── Session Totals table (Sales Verification) ──────────────────────────── Every row — header, each payment-method disclosure trigger, and the grand total — shares this row class so column widths stay identical without a hard min-width. minmax(0, 1fr) lets the value columns shrink to fit whatever width the parent grid column actually has (see .dr-sales-timeline-grid) instead of forcing horizontal scroll. */ .session-totals-table__row { display: grid; grid-template-columns: minmax(96px, 1.3fr) repeat(5, minmax(0, 1fr)); column-gap: var(--space-2); width: 100%; } .session-totals-table__row > span { min-width: 0; } /* Amounts must stay on one line and never clip — but this only applies to actual VALUE rows. The header row's labels are prose ("صافي المبيعات (WorkPulse)"), not amounts; forcing nowrap+ellipsis on those just hides the column name, so they're left free to wrap onto a second line instead. */ .session-totals-table__row:not(.session-totals-table__row--header) > span:not(:first-child) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .session-totals-table__row--header > span { white-space: normal; line-height: 1.3; } @media (max-width: 1024px) { .session-totals-table__row { column-gap: var(--space-1); } .session-totals-table__row > span { font-size: var(--text-xs) !important; } } /* Mobile: the six columns no longer fit side by side at a readable size, so each row becomes a stacked label/value card instead of scrolling. The header row (which named the columns) is redundant here — each value grows its own data-label. */ @media (max-width: 640px) { .session-totals-table__row { display: flex; flex-direction: column; gap: var(--space-1); } .session-totals-table__row.session-totals-table__row--header { display: none; } .session-totals-table__row > span:not(:first-child) { display: flex; justify-content: space-between; white-space: normal; overflow: visible; text-overflow: unset; } .session-totals-table__row > span:not(:first-child)::before { content: attr(data-label); font-size: var(--text-xs) !important; font-weight: 600; color: var(--text-3); } } /* +/− formula lines used in Cash Reconciliation / Electronic / Bank sections */ .recon-formula-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--dr-formula-row-py) 0; font-size: var(--text-sm); color: var(--text-2); border-bottom: 1px solid var(--border); } .recon-formula-row:last-child { border-bottom: 0; } .recon-formula-row__value { font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; } .recon-formula-row--total { border-top: 1px solid var(--border); border-bottom: 0; margin-top: var(--space-1); padding-top: var(--dr-row-py); font-weight: 700; color: var(--text-1); } .recon-formula-row--total .recon-formula-row__value { font-size: var(--text-base); } /* Expand/collapse disclosure wrapper (uses collapsible_controller.js) */ .recon-disclosure__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--dr-row-py) var(--space-5); background: none; border: 0; cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--accent); text-align: start; } .recon-disclosure__chevron { transition: transform 0.15s ease; flex-shrink: 0; } /* .recon-disclosure__trigger sets display: flex for disclosure rows that aren't tables; the Session Totals row needs display: grid instead, so this combined selector wins over the single-class rule above regardless of source order. */ .recon-disclosure__trigger.session-totals-table__row { display: grid; justify-content: normal; column-gap: var(--space-2); } @media (max-width: 640px) { .recon-disclosure__trigger.session-totals-table__row { display: flex; } } .collapsible--open > .recon-disclosure__trigger .recon-disclosure__chevron { transform: rotate(180deg); } /* Top-level page-section accordion (uses accordion_controller.js) — Daily Reconciliation show page: Audit Log, Sales Verification, Sales Verification Summary, Cash Reconciliation, Bank Deposits, POS Transactions. Distinct from .recon-disclosure above (nested, smaller disclosures within these sections). Animates via the grid-template-rows 0fr/1fr trick — works for arbitrary/dynamic content height without any JS height measurement, and can't collapse to `display:none` mid-transition the way toggling `hidden` would. */ .recon-accordion__header { cursor: default; margin-bottom: var(--dr-header-gap); } .recon-accordion__trigger { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: start; } .recon-accordion__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } .recon-accordion__chevron { flex-shrink: 0; display: inline-block; width: 1em; margin-top: 2px; font-size: 11px; line-height: 1; color: var(--text-3); } .recon-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.22s ease; } .recon-accordion__panel--open { grid-template-rows: 1fr; } .recon-accordion__panel-inner { overflow: hidden; } /* Exceptions list rows */ .exception-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); flex-wrap: wrap; } .exception-row:last-child { border-bottom: 0; } .exception-row__main { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .exception-row__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--warning); } .exception-row__dot--danger { background: var(--danger); } .exception-row__dot--warning { background: var(--warning); } .exception-row__title { font-size: var(--text-sm); font-weight: 600; color: var(--text-1); margin: 0; } .exception-row__sub { font-size: var(--text-xs); color: var(--text-2); margin: 2px 0 0; } .exception-row__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; } /* 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-4); /* Stack every child (controls, fields grid, actions) with consistent gap */ display: flex; flex-direction: column; gap: var(--space-4); } /* When the active-filter chips (.filter-chips) are nested inside a .filter-bar — Finance Dashboard puts them at the bottom of the same card instead of as a separate floating section — drop their own external margin so it doesn't stack on top of the card's own bottom padding. */ .filter-bar .filter-chips { margin-bottom: 0; } .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