: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 input[type="email"], 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); /* Without this, every one of these fields falls back to the browser's own default text color (effectively black) instead of following the theme — invisible-looking against dark mode's dark --color-surface, since nothing here was ever setting it explicitly. custom-select's own native select already sets this correctly (see .custom-select-native above); this is the same fix for every plain text input, password, email, textarea, and un-enhanced select in the app — Job Maintenance, Customer Maintenance, GL Accounts, login, admin pages, all of it, not just one page's fields. */ color: var(--color-text); } 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); } /* Generic "this field isn't wired up yet" treatment — muted fill, muted text, not-allowed cursor — rather than a page-specific class. First real use is Customer Maintenance's Short Notes/Department/Sales Rep fields (section 50), each blocked on something this build can't safely guess at, but any future "coming soon" field anywhere else in the app gets this for free by just adding the disabled attribute. */ form input:disabled, form select:disabled, form textarea:disabled { background: var(--color-surface-muted); color: var(--color-muted); cursor: not-allowed; } .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); } /* Groups 2-3 short related fields onto one line (city/state/zip, phone/fax) instead of each taking a full-width row on its own — first used by admin/company.php's address block. Each item keeps its own label directly above its input, so this is purely a layout change, not a different label/input pattern from the rest of the form. */ .form-row { display: flex; gap: 1rem; } .form-row .form-row-item { flex: 1; min-width: 0; } .form-row .form-row-item-narrow { flex: 0 0 5.5rem; } .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; } /* Additive sign-in option on login.php — sits below the existing password form, inside the same
(a second submit button with its own formaction, not a separate form), so it shares the company dropdown and csrf_token without duplicating either. Only rendered at all when GoogleAuthService::isConfigured() is true — see login.php. */ .auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--color-muted); font-size: 0.8rem; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } .google-signin-btn { width: 100%; margin-top: 0; padding: 0.65rem; display: flex; align-items: center; justify-content: center; gap: 0.6rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); color: var(--color-text); font-size: 0.95rem; font-weight: 600; font-family: inherit; cursor: pointer; } .google-signin-btn:hover { background: var(--color-surface-muted); } /* --- 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