:root { --color-bg: #0f172a; --color-surface: #ffffff; --color-surface-muted: #f1f5f9; --color-page-bg: #f1f5f9; --color-text: #1e293b; --color-muted: #64748b; --color-accent: #0ea5e9; --color-accent-dark: #0284c7; --color-error-bg: #fef2f2; --color-error-text: #b91c1c; --color-border: #e2e8f0; --color-border-strong: #94a3b8; --radius: 10px; --topbar-height: 60px; --sidebar-width: 240px; } /* --- Dark theme --- * * Toggled by adding data-theme="dark" to (see theme.js and the * anti-flash inline script in header.php's , which sets this * attribute before first paint so there's no flash of the light theme on * load). Persisted in localStorage, so it's remembered per-device across * sessions, same pattern as the sidebar-collapsed state in shell.js. * * --color-bg (the topbar/sidebar's own background) is deliberately left * unchanged here — it's already a dark navy in the light theme, so the * shell's top/side chrome looks the same in both themes; only the page * body and cards actually flip. This is why colors chosen specifically to * read against --color-bg (the topbar clock-status colors, sidebar link * colors, etc. — see their own comments elsewhere in this file) don't need * a dark-theme override: their background never changes. * * A handful of colors elsewhere in this file are literal hex values * rather than variables — chosen deliberately where they're printed on a * solid, non-theme-dependent fill (white text on an accent/green/red * button reads fine regardless of theme) and given explicit dark-theme * overrides below where they're printed directly on a card/page * background instead (the GL Accounts delete-X red, the Employee * Verification active/inactive status text). */ html[data-theme="dark"] { --color-surface: #1e293b; --color-surface-muted: #334155; --color-page-bg: #0b1220; --color-text: #e2e8f0; --color-muted: #94a3b8; --color-accent: #38bdf8; --color-accent-dark: #0ea5e9; --color-error-bg: rgba(185, 28, 28, 0.25); --color-error-text: #fca5a5; --color-border: #334155; --color-border-strong: #64748b; } html[data-theme="dark"] .icon-btn-delete { color: #f87171; } html[data-theme="dark"] .icon-btn-delete:hover, html[data-theme="dark"] .icon-btn-delete:focus-visible { color: #fca5a5; } html[data-theme="dark"] .empverify-status-active { color: #4ade80; } html[data-theme="dark"] .empverify-status-inactive { color: #f87171; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--color-text); background: var(--color-page-bg); } /* --- Login page --- */ body.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--color-bg) 0%, #1e293b 100%); padding: 1.5rem; } .auth-card { background: var(--color-surface); border-radius: var(--radius); padding: 2.5rem 2rem; width: 100%; max-width: 360px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); } /* Stacked cards on the shell (not the standalone login page) get breathing room between them — e.g. Roles' role list above its page-tree editor, or Permissions' search above its selected-user editor. */ body.shell .auth-card + .auth-card { margin-top: 1.5rem; } /* Desktop-first: most heavy-duty work happens on office desktops, and a 360px-wide card on a wide monitor reads as anemic. On screens wide enough that the sidebar stays permanently open (same breakpoint as the sidebar itself, see the media query near the bottom of this file), shell cards grow to about half the content area instead of staying pinned narrow. The standalone login page is untouched — body.auth-page, not body.shell. */ @media (min-width: 861px) { body.shell .auth-card { max-width: 50%; } } .auth-title { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 700; } .auth-subtitle { margin: 0 0 1.5rem; color: var(--color-muted); font-size: 0.9rem; } .auth-error { background: var(--color-error-bg); color: var(--color-error-text); padding: 0.65rem 0.85rem; border-radius: 8px; font-size: 0.85rem; margin: 0 0 1.25rem; } .auth-notice { background: #fffbeb; color: #92400e; padding: 0.65rem 0.85rem; border-radius: 8px; font-size: 0.85rem; } form label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--color-muted); margin: 1rem 0 0.35rem; } form input[type="text"], form input[type="password"], form textarea, form select { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; font-size: 1rem; font-family: inherit; background: var(--color-surface); } form textarea { resize: vertical; min-height: 4.5rem; } form input:focus, form textarea:focus, form select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); } .form-check { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; } .form-check input[type="checkbox"] { width: 1rem; height: 1rem; } .form-check label { margin: 0; font-size: 0.9rem; font-weight: 400; color: var(--color-text); } .password-field { position: relative; display: flex; } .password-field input { flex: 1; } .toggle-password { margin-left: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-muted); color: var(--color-muted); font-size: 0.8rem; cursor: pointer; } form button[type="submit"] { width: 100%; margin-top: 1.5rem; padding: 0.7rem; border: none; border-radius: 8px; background: var(--color-accent); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } form button[type="submit"]:hover { background: var(--color-accent-dark); } form button[type="submit"]:disabled { opacity: 0.7; cursor: default; } /* --- Placeholder shell (post-login) --- */ .shell-placeholder { max-width: 640px; margin: 3rem auto; padding: 0 1.5rem; } .placeholder-note { color: var(--color-muted); font-size: 0.9rem; line-height: 1.5; } .logout-link { display: inline-block; margin-top: 1.5rem; color: var(--color-accent-dark); font-weight: 600; text-decoration: none; } .logout-link:hover { text-decoration: underline; } /* --- Dashboard (index.php) --- */ .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } /* --color-border-strong instead of --color-border: the default border is deliberately subtle (barely-there hairline), which disappears entirely on washed-out or low-contrast screens. Cards specifically need to read as distinct, clickable regions at a glance, so they get the more visible border variant plus a slightly stronger shadow — everything else that uses --color-border for a quieter division (table rows, input fields) keeps the subtler default. */ .dashboard-card { background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } .dashboard-card-title { margin: 0 0 0.75rem; font-size: 1.05rem; font-weight: 700; color: var(--color-text); } .dashboard-card-body { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--color-text); } .dashboard-card-link { display: inline-block; font-size: 0.85rem; font-weight: 600; color: var(--color-accent-dark); text-decoration: none; } .dashboard-card-link:hover { text-decoration: underline; } .dashboard-card-disabled { background: var(--color-page-bg); box-shadow: none; } .dashboard-card-disabled .dashboard-card-title { color: var(--color-muted); } .dashboard-link-list { list-style: none; margin: 0; padding: 0; } .dashboard-link-list li + li { margin-top: 0.5rem; } .dashboard-link-list a { font-size: 0.9rem; color: var(--color-accent-dark); text-decoration: none; } .dashboard-link-list a:hover { text-decoration: underline; } /* Used on the Roles page to mark which role in the list is currently being edited below — semantic aria-current rather than a one-off class. */ .dashboard-link-list a[aria-current="page"] { font-weight: 700; color: var(--color-text); } .todo-list { list-style: none; margin: 0 0 0.5rem; padding: 0; } .todo-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); } .todo-item form { display: contents; } .todo-text { flex: 1; font-size: 0.95rem; color: var(--color-text); } .todo-check { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--color-border); background: var(--color-surface); color: transparent; font-size: 0.8rem; line-height: 1; cursor: pointer; transition: all 0.15s ease; } .todo-check:hover { border-color: #16a34a; color: #16a34a; } .todo-delete { flex: none; width: 1.5rem; height: 1.5rem; border: none; background: none; color: var(--color-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; } .todo-delete:hover { color: var(--color-error-text); } .todo-add-form { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .todo-add-form input[type="text"] { flex: 1; margin: 0; } .todo-add-form button[type="submit"] { width: auto; margin-top: 0; padding: 0.65rem 1rem; } /* --- Timeclock --- */ .timeclock-status { margin: 0 0 1.25rem; font-size: 1.05rem; font-weight: 600; color: var(--color-text); } .timeclock-status-muted { font-weight: 400; color: var(--color-muted); } .timeclock-actions { display: flex; gap: 0.75rem; margin-bottom: 0.5rem; } .timeclock-actions .btn-clock { flex: 1; width: auto; margin-top: 0; padding: 1rem; border: none; border-radius: 8px; font-size: 1.05rem; font-weight: 700; color: #fff; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background 0.15s ease, opacity 0.15s ease; } .timeclock-actions .btn-clock-in { background: #16a34a; } .timeclock-actions .btn-clock-in:hover:not(:disabled) { background: #15803d; } .timeclock-actions .btn-clock-out { background: #dc2626; } .timeclock-actions .btn-clock-out:hover:not(:disabled) { background: #b91c1c; } .timeclock-actions .btn-clock:disabled { background: #cbd5e1; color: #94a3b8; cursor: default; } /* Matches .custom-select-native's look (same border/radius/padding/focus ring) so the notes field reads as part of the same design language as the login page's company dropdown. Width matches .timeclock-actions above it since both are full-width within .auth-card. */ .timeclock-notes { display: block; width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; font-size: 1rem; font-family: inherit; color: var(--color-text); background: var(--color-surface); resize: vertical; } .timeclock-notes:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); } /* --- Search-and-select (e.g. admin password reset, permissions) --- */ .search-results-list { list-style: none; margin: 0.75rem 0 0; padding: 0; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; } .search-results-list li + li { border-top: 1px solid var(--color-border); } /* Shared by