:root { --ink: #0f1720; --ink-soft: #4b5a6b; --muted: #8592a3; --line: #e2e6ea; --bg: #f6f7f9; --panel: #ffffff; --accent: #3b6ef6; --accent-ink: #1d3fa0; --ok: #1a9c6e; --ok-bg: #e6f7f0; --warn: #b5820c; --warn-bg: #fbf1dc; --danger: #c0392b; --nav-bg: #0f1720; --panel-alt: #f5f6f9; --accent-bg: #eef1ff; --input-bg: #ffffff; --shadow: rgba(0, 0, 0, 0.3); --radius: 8px; --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* ---- dark mode ---- Toggled by adding data-theme="dark" to -- see includes/settings.php's rt_theme_init_script() (sets it before first paint, from localStorage / prefers-color-scheme) and assets/theme.js (flips it when someone clicks the toggle in the nav). Only the variables actually need overriding almost everywhere in this file, since nearly every color already goes through var(--x) -- the handful of hardcoded pastel badge/alert colors below are the exception, since they're deliberately soft-tinted backgrounds with dark text that don't translate to a dark background by just inverting lightness. */ :root[data-theme="dark"] { --ink: #e8ecf1; --ink-soft: #b7c2d0; --muted: #8996a8; --line: #2b3542; --bg: #10151c; --panel: #1a212c; --panel-alt: #212a37; --accent: #6c93ff; --accent-ink: #a9c1ff; --accent-bg: #1c2740; --ok: #3ddb99; --ok-bg: #103526; --warn: #e2b13c; --warn-bg: #3a2c0f; --danger: #ff7a68; --input-bg: #171e27; --shadow: rgba(0, 0, 0, 0.6); } :root[data-theme="dark"] .btn-danger { background: #3a1e1c; color: var(--danger); border-color: #5a2b26; } :root[data-theme="dark"] .badge-role-admin { background: #1c2740; color: var(--accent-ink); } :root[data-theme="dark"] .badge-role-employee { background: #262b36; color: #b9c1cf; } :root[data-theme="dark"] .badge-role-manager { background: #3a2c0f; color: #e6bd6a; } :root[data-theme="dark"] .badge-role-it_staff { background: #103526; color: #4fd39c; } :root[data-theme="dark"] .badge-status-rejected { background: #3a1e1c; color: var(--danger); } :root[data-theme="dark"] .badge-kudos { background: #3a2c0f; color: #e6bd6a; } :root[data-theme="dark"] .badge-ticket-progress { background: #1c2740; color: var(--accent-ink); } :root[data-theme="dark"] .badge-ticket-closed { background: #262b36; color: #b9c1cf; } :root[data-theme="dark"] .badge-priority-low { background: #262b36; color: #b9c1cf; } :root[data-theme="dark"] .badge-priority-normal { background: #1c2740; color: var(--accent-ink); } :root[data-theme="dark"] .badge-priority-urgent { background: #3a1e1c; color: var(--danger); } :root[data-theme="dark"] .badge-expiry-expired { background: #3a1e1c; color: var(--danger); } :root[data-theme="dark"] .alert-error { background: #3a1e1c; color: var(--danger); border-color: #5a2b26; } :root[data-theme="dark"] .alert-success { background: var(--ok-bg); color: var(--ok); border-color: #1c5c42; } :root[data-theme="dark"] .alert-info { background: var(--accent-bg); color: var(--accent-ink); border-color: #34456e; } :root[data-theme="dark"] .row-anomaly { background: rgba(255, 122, 104, 0.12); } :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] input[type="url"], :root[data-theme="dark"] input[type="date"], :root[data-theme="dark"] input[type="time"], :root[data-theme="dark"] input[type="file"], :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--input-bg); color-scheme: dark; } :root[data-theme="dark"] .icon-preview, :root[data-theme="dark"] .qr-image, :root[data-theme="dark"] .link-card-icon { background: #fff; } :root[data-theme="dark"] .login-card { background: var(--panel); } :root[data-theme="dark"] .link-card-admin-actions a { background: var(--panel); } :root[data-theme="dark"] .nav-dropdown-menu, :root[data-theme="dark"] .topnav-links { box-shadow: 0 12px 24px var(--shadow); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; } a { color: var(--accent-ink); text-decoration: none; } a:hover { text-decoration: underline; } /* A