/* ========================================================= Sentinel Ledger — theme system Two palettes (dark default, light) switched via [data-theme] on , plus a set of "accent" colors used to give each section of the app its own color identity. ========================================================= */ :root, [data-theme="dark"] { --bg:#10141A; --panel:#1B2127; --panel-alt:#212930; --border:#2B333B; --text:#EDF0F2; --muted:#98A3AD; --brass:#E0BC6C; --brass-dim:#8A7638; --teal:#5FC0B2; --amber:#EBA85E; --red:#EC7267; --green:#68C77F; --blue:#7BA6FF; --purple:#C29AF4; --coral:#F6976F; --rose:#F393BC; /* Textboxes/dropdowns specifically — panel-alt (#212930) sits only a few RGB units from panel (#1B2127), too close to read as "a field" rather than just part of the card, especially on a small mobile screen. Meaningfully lighter, with a matching brighter border. */ --field-bg:#36414F; --field-border:#57697E; --shadow-sm: 0 1px 2px rgba(0,0,0,.28); --shadow: 0 10px 28px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.24); --shadow-lg: 0 22px 48px rgba(0,0,0,.42), 0 6px 16px rgba(0,0,0,.3); --sheen: rgba(255,255,255,.03); } [data-theme="light"] { --bg:#F1F4F7; --panel:#FFFFFF; --panel-alt:#F3F5F8; --border:#E3E7EC; --text:#181F28; --muted:#5B6773; --brass:#9C6F14; --brass-dim:#C9A24B; /* Same reasoning as the dark theme above — panel-alt (#F3F5F8) is too close to a white panel to read as a distinct field. */ --field-bg:#DCE3EC; --field-border:#A8B6C6; --teal:#188577; --amber:#B36A12; --red:#B23A30; --green:#22753F; --blue:#2E52C4; --purple:#7748C9; --coral:#C24A2C; --rose:#C23E80; --shadow-sm: 0 1px 2px rgba(30,40,60,.06); --shadow: 0 10px 26px rgba(30,40,60,.10), 0 2px 6px rgba(30,40,60,.06); --shadow-lg: 0 24px 48px rgba(30,40,60,.14), 0 6px 16px rgba(30,40,60,.08); --sheen: rgba(20,30,45,.025); } /* Section accent colors — pick a hue per page so headings/nav read as distinct "departments" rather than one flat palette. Same variable names in both themes, values tuned per-theme above for contrast. */ :root { --accent-dashboard: var(--brass); --accent-sites: var(--blue); --accent-managers: var(--purple); --accent-supervisors: var(--amber); --accent-guards: var(--teal); --accent-allocate: var(--rose); --accent-attendance: var(--green); --accent-reports: var(--coral); --accent-audit: var(--brass); --accent-approvals: var(--purple); --accent-permissions: var(--brass); --accent-profile: var(--teal); --accent-advances: var(--green); --accent-matrix: var(--blue); --ease: cubic-bezier(.25,.8,.35,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --radius: 10px; --radius-sm: 6px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin:0; padding:0; min-height:100%; background:var(--bg); color:var(--text); font-family:var(--font-body); transition: background .2s var(--ease), color .2s var(--ease); } :root { --font-display:'Arial Narrow','Trebuchet MS',Impact,sans-serif; --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } body{ background-image: radial-gradient(900px 500px at 12% -8%, var(--sheen), transparent), radial-gradient(800px 460px at 100% 0%, var(--sheen), transparent); background-attachment: fixed; } a { color: var(--teal); transition: color .15s var(--ease); } button { cursor:pointer; font-family:inherit; } input, select, textarea { font-family:inherit; } ::selection{ background: var(--teal); color:#08130f; } /* Slim, theme-aware scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar{ width:9px; height:9px; } *::-webkit-scrollbar-track{ background:transparent; } *::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; border:2px solid var(--bg); } *::-webkit-scrollbar-thumb:hover{ background:var(--muted); } /* Consistent, calmer focus ring instead of the browser default */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 3px; } .eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--brass);font-weight:700;} h1,h2,h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-weight:700;margin:0 0 4px;} h1{font-size:27px;} h2{font-size:18px;} h3{font-size:14px;color:var(--muted);letter-spacing:.08em;} p{color:var(--muted);font-size:13.5px;line-height:1.55;margin:4px 0;} .mono{font-family:var(--font-mono);} /* Page heading accent — set per page via .topline-
. A soft gradient wash keeps it from being flat single-color text. */ .topline h1 { color: var(--page-accent, var(--text)); background: linear-gradient(90deg, var(--page-accent, var(--text)), color-mix(in srgb, var(--page-accent, var(--text)) 55%, var(--text))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .topline-dashboard { --page-accent: var(--accent-dashboard); } .topline-sites { --page-accent: var(--accent-sites); } .topline-managers { --page-accent: var(--accent-managers); } .topline-supervisors { --page-accent: var(--accent-supervisors); } .topline-guards { --page-accent: var(--accent-guards); } .topline-allocate { --page-accent: var(--accent-allocate); } .topline-attendance { --page-accent: var(--accent-attendance); } .topline-reports { --page-accent: var(--accent-reports); } .topline-audit { --page-accent: var(--accent-audit); } .topline-approvals { --page-accent: var(--accent-approvals); } .topline-permissions { --page-accent: var(--accent-permissions); } .topline-profile { --page-accent: var(--accent-profile); } .topline-advances { --page-accent: var(--accent-advances); } .topline-matrix { --page-accent: var(--accent-matrix); } @keyframes drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2%, 1.5%); } } .login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background:var(--bg); } .login-wrap::before{ content:''; position:absolute; inset:-10%; z-index:0; animation: drift 22s ease-in-out infinite; background: radial-gradient(1100px 620px at 18% -8%, rgba(95,192,178,.16), transparent 60%), radial-gradient(950px 560px at 102% 8%, rgba(224,188,108,.13), transparent 60%), radial-gradient(800px 520px at 40% 115%, rgba(243,147,188,.10), transparent 60%); } .login-card{ width:420px; max-width:92vw; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:32px; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); z-index:1; animation: fadeInUp .5s var(--ease-spring) both; } .login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--teal),var(--brass),var(--rose),var(--blue));background-size:200% 100%;animation:sheen 6s linear infinite;} @keyframes sheen{ 0%{background-position:0% 0;} 100%{background-position:200% 0;} } .badge-title{display:flex;align-items:center;gap:10px;margin-bottom:22px;} .badge-icon{width:38px;height:38px;border:2px solid var(--brass);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);color:var(--brass);font-weight:700;font-size:16px;flex-shrink:0;} .field{margin-bottom:14px;} /* AJAX search box sitting above its paired