:root { --navy:#12345a; --blue:#2864dc; --soft:#edf4ff; --ink:#10233d; --muted:#718096; --line:#e7edf5; --white:#fff; --success:#177c58; --warning:#c77a12; --shadow:0 12px 30px rgba(23,54,93,.08); }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:#f7f9fc; font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button,input,select,textarea { font:inherit; } button { cursor:pointer; } .login { min-height:100vh; display:grid; grid-template-columns:1.2fr .8fr; background:linear-gradient(135deg,#10325a,#1c5fc4); }
.login-aside { color:white; padding:clamp(36px,8vw,110px); display:flex; flex-direction:column; justify-content:space-between; background:radial-gradient(circle at 15% 15%,#3d82ee 0,transparent 32%),linear-gradient(145deg,#0b2444,#164f9d); }
.brand { display:flex; align-items:center; gap:10px; font-weight:750; letter-spacing:-.02em; }.brand-mark { width:35px;height:35px;border-radius:11px;background:#fff;color:#1d5ed4;display:grid;place-items:center;font-weight:900; }.login-aside h1 { font-size:clamp(40px,5vw,68px); line-height:1.04; letter-spacing:-.06em; max-width:650px; margin:64px 0 20px; }.login-aside p { font-size:18px; line-height:1.55; max-width:530px; opacity:.83; }.login-features { display:flex; gap:24px; flex-wrap:wrap; font-size:14px; opacity:.8; }.login-card { align-self:center; background:white; border-radius:24px; padding:42px; width:min(440px,calc(100% - 40px)); box-shadow:0 22px 70px rgba(0,0,0,.23); }.login-card h2 { font-size:29px; letter-spacing:-.04em; margin:0 0 7px; }.login-card p { color:var(--muted); margin:0 0 26px; }.field { display:grid; gap:8px; margin:14px 0; font-size:14px; font-weight:650; }.field input,.field select,.field textarea { border:1px solid #d7e0ec; border-radius:11px; padding:13px 14px; color:var(--ink); background:#fff; }.field textarea { min-height:86px; resize:vertical; }.primary { background:var(--blue); color:#fff; border:0; border-radius:11px; padding:13px 18px; font-weight:720; width:100%; margin-top:12px; }.demo-hint { font-size:12px; line-height:1.5; color:var(--muted); margin-top:18px!important; }.app-shell { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }.sidebar { background:var(--navy); color:#dce8fa; padding:24px 14px; display:flex; flex-direction:column; }.sidebar .brand { color:#fff; padding:0 8px 30px; }.nav { display:grid; gap:4px; }.nav button { color:#ccdcf4; background:transparent; border:0; display:flex; align-items:center; gap:12px; padding:12px 14px; text-align:left; border-radius:10px; font-weight:620; }.nav button.active,.nav button:hover { background:rgba(255,255,255,.11); color:white; }.sidebar-bottom { margin-top:auto; border-top:1px solid rgba(255,255,255,.14); padding:17px 8px 0; font-size:12px; color:#a9bedf; }.main { padding:26px clamp(20px,4vw,58px) 48px; max-width:1500px; width:100%; margin:auto; }.topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:30px; }.mobile-brand { display:none; }.topbar h1 { margin:0; font-size:28px; letter-spacing:-.045em; }.topbar p { color:var(--muted); margin:5px 0 0; }.user-area { display:flex; align-items:center; gap:12px; }.icon-button { background:#fff; border:1px solid var(--line); width:42px; height:42px; border-radius:12px; position:relative; }.unread { width:8px;height:8px;border-radius:100%;background:#ee4d55;position:absolute;right:10px;top:9px; }.avatar { width:40px;height:40px;border-radius:13px;background:#d9e7ff;color:var(--blue);display:grid;place-items:center;font-weight:800; }.grid { display:grid; gap:18px; }.dashboard-top { grid-template-columns:1.4fr 1fr; }.card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:var(--shadow); }.eyebrow { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.09em; font-weight:750; }.amount { font-size:42px; letter-spacing:-.055em; margin:8px 0; font-weight:760; }.pay-card { color:#fff; background:linear-gradient(135deg,#1e64da,#144592); border:0; }.pay-card .eyebrow,.pay-card .card-detail { color:#d9e8ff; }.card-link { background:transparent;border:0;padding:0;color:inherit;font-weight:750; margin-top:15px; }.vacation-card { display:flex; flex-direction:column; justify-content:space-between; }.stat-line { display:flex; justify-content:space-between; align-items:end; margin:10px 0; }.stat-line strong { font-size:30px; letter-spacing:-.05em; }.progress { height:8px;background:#e6edf7;border-radius:30px;overflow:hidden; }.progress span { display:block;height:100%;width:60%;border-radius:inherit;background:#44a67b; }.section-heading { display:flex; align-items:center; justify-content:space-between; margin:32px 0 13px; }.section-heading h2 { font-size:18px; letter-spacing:-.025em; margin:0; }.text-button { color:var(--blue); border:0;background:transparent;font-weight:700; }.quick-actions { grid-template-columns:repeat(4,1fr); }.quick { border:1px solid var(--line); background:#fff; border-radius:15px; padding:17px; text-align:left; min-height:102px; color:var(--ink); }.quick .symbol { font-size:22px; display:block; margin-bottom:13px; }.quick span:last-child { font-weight:700; }.activity { display:grid; gap:0; }.activity-row { display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); }.activity-row:last-child { border-bottom:0; }.activity-icon { background:var(--soft); color:var(--blue); width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto; }.activity-row strong { display:block;font-size:14px; }.activity-row small { display:block;color:var(--muted);margin-top:3px; }.list-card { padding:5px 22px; }.list-row { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:16px 0; border-bottom:1px solid var(--line); }.list-row:last-child { border:0; }.list-title { font-weight:720; }.list-meta { font-size:13px;color:var(--muted);margin-top:4px; }.pill { font-size:12px; padding:6px 9px; border-radius:100px; font-weight:700; background:#edf2f8; color:#526578; white-space:nowrap; }.pill.success { background:#e6f6ee; color:var(--success); }.pill.pending { background:#fff4df;color:var(--warning); }.two-column { grid-template-columns:1.35fr .8fr; }.summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.mini-stat { background:#f7faff;border:1px solid #e8effa;border-radius:12px;padding:14px; }.mini-stat span { color:var(--muted);font-size:12px;display:block; }.mini-stat strong { font-size:20px;display:block;margin-top:7px;letter-spacing:-.04em; }.detail-table { width:100%; border-collapse:collapse; margin-top:12px; }.detail-table th,.detail-table td { text-align:left;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px; }.detail-table th { font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted); }.detail-table td:last-child,.detail-table th:last-child{text-align:right;}.total-row td { font-weight:800;border-bottom:0;padding-top:18px;font-size:16px; }.profile-head { display:flex;align-items:center;gap:16px;margin-bottom:20px; }.profile-avatar { width:60px;height:60px;border-radius:19px;background:#d9e7ff;color:var(--blue);display:grid;place-items:center;font-size:20px;font-weight:800; }.profile-head h2{margin:0;font-size:21px;}.profile-head p{margin:4px 0 0;color:var(--muted);}.profile-menu button { width:100%; background:transparent;border:0;padding:15px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;color:var(--ink);font-weight:650;text-align:left; }.notification-card { display:flex;gap:14px;padding:17px 0;border-bottom:1px solid var(--line);}.notification-card:last-child{border:0}.notification-card.unread-card { background:linear-gradient(90deg,#f4f8ff,transparent); margin:0 -22px;padding-left:22px;padding-right:22px; }.modal-backdrop { position:fixed;inset:0;background:rgba(10,25,45,.48);display:grid;place-items:center;padding:20px;z-index:10; }.modal { background:#fff;max-width:520px;width:100%;border-radius:20px;padding:26px;box-shadow:0 24px 70px rgba(0,0,0,.2); }.modal h2 { margin:0 0 5px;letter-spacing:-.04em; }.modal p { color:var(--muted);margin:0 0 18px; }.modal-actions { display:flex;gap:10px;justify-content:flex-end;margin-top:20px; }.secondary { padding:11px 15px;border:1px solid #dbe4f0;background:#fff;color:var(--ink);border-radius:10px;font-weight:700; }.primary.compact { width:auto;margin:0;padding:11px 15px; }.empty { color:var(--muted);text-align:center;padding:40px; }.admin-banner { background:#fff6e5;color:#80530c;border-radius:13px;padding:13px 16px;font-size:14px;margin-bottom:18px; }.admin-grid { grid-template-columns:repeat(3,1fr); }.admin-metric { background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px; }.admin-metric strong { display:block;font-size:28px;margin-top:8px; }.hidden { display:none!important; }
@media (max-width:900px){.login{grid-template-columns:1fr}.login-aside{display:none}.login-card{margin:40px auto}.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;bottom:0;left:0;right:0;height:70px;z-index:5;padding:8px;background:var(--navy);}.sidebar .brand,.sidebar-bottom{display:none}.nav{grid-template-columns:repeat(5,1fr);gap:2px}.nav button{justify-content:center;padding:9px 4px;font-size:0}.nav button span{font-size:19px}.main{padding:20px 18px 94px}.mobile-brand{display:flex}.topbar h1{font-size:24px}.dashboard-top,.two-column{grid-template-columns:1fr}.quick-actions{grid-template-columns:repeat(2,1fr)}.admin-grid{grid-template-columns:1fr}.user-area .user-name{display:none}.summary{grid-template-columns:1fr}.amount{font-size:36px}}
.admin-shell{min-height:100vh;display:grid;grid-template-columns:260px 1fr;background:#f6f8fb}.admin-sidebar{background:#132b4a;color:#d9e6fa;padding:22px 14px;display:flex;flex-direction:column}.admin-sidebar .brand{color:#fff;padding:3px 10px 25px}.workspace{margin:0 8px 25px;padding:13px 14px;border:1px solid rgba(255,255,255,.13);border-radius:12px;color:#fff;font-weight:700;font-size:14px}.workspace small{display:block;font-weight:500;color:#abc0dc;margin-top:4px}.admin-nav{display:grid;gap:5px}.admin-nav button{background:transparent;border:0;color:#bed0e8;padding:12px 13px;border-radius:9px;text-align:left;font-weight:650;display:flex;gap:12px;align-items:center}.admin-nav button span{width:17px;text-align:center}.admin-nav button:hover,.admin-nav button.active{background:#245286;color:#fff}.admin-sidebar-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.14);padding:17px 9px 2px;display:grid;gap:12px}.admin-sidebar-bottom button{background:transparent;border:0;color:#dbe9fa;text-align:left;padding:0;font-weight:650}.admin-sidebar-bottom small{color:#91a9c7}.admin-main{padding:30px clamp(22px,4vw,62px) 55px;max-width:1600px;width:100%;margin:auto}.admin-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:30px}.admin-topbar h1{font-size:31px;letter-spacing:-.055em;margin:3px 0}.admin-topbar p:not(.eyebrow){margin:5px 0 0;color:var(--muted)}.admin-hero{border-radius:19px;padding:25px 28px;background:linear-gradient(125deg,#10335e,#1e68b8);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px}.admin-hero .eyebrow{color:#afc9ed}.admin-hero h2{font-size:25px;letter-spacing:-.04em;margin:6px 0}.admin-hero p{margin:0;color:#d5e6ff}.admin-hero .primary{background:#fff;color:#15529f}.admin-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.admin-kpis>div{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px}.admin-kpis span,.admin-kpis small{display:block;color:var(--muted);font-size:12px}.admin-kpis strong{display:block;font-size:27px;letter-spacing:-.05em;margin:9px 0 5px}.admin-kpis .positive{color:var(--success)}.admin-layout{display:grid;grid-template-columns:1.45fr .8fr;gap:20px}.person{display:flex;align-items:center;gap:10px}.small-avatar{width:36px;height:36px;border-radius:11px;background:#dce9fc;color:#2864dc;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto}.toolbar{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-bottom:20px}.toolbar>p{color:var(--muted);margin:0 auto 0 0}.search{width:min(460px,100%);border:1px solid #dbe4f0;background:#fff;border-radius:11px;padding:0 12px;display:flex;align-items:center;gap:8px;color:#6f8199}.search input{width:100%;border:0;outline:0;padding:12px 0}.table-card{overflow:auto;padding:0}.data-table{width:100%;border-collapse:collapse;min-width:760px}.data-table th{text-align:left;padding:14px 20px;background:#f8fafc;color:#718096;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.data-table td{padding:15px 20px;border-top:1px solid var(--line);font-size:14px}.data-table small,.setting-row small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.filter-row{display:flex;gap:9px;margin-bottom:18px}.filter{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 13px;color:#657790;font-weight:650}.filter.active{background:#eaf2ff;color:#1c5ec0;border-color:#bcd3fa}.filter b{margin-left:5px}.approval-stack{display:grid;gap:13px}.approval-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:grid;grid-template-columns:1.1fr 1fr auto;align-items:center;gap:22px}.approval-card h3{margin:0;font-size:15px}.approval-card p,.approval-info span,.approval-info small{margin:4px 0 0;color:var(--muted);font-size:13px;display:block}.approval-info strong{font-size:14px}.approval-actions{display:flex;gap:8px;align-items:center}.payroll-summary{padding:23px 27px;border-radius:17px;border:1px solid #dce8f8;background:#fff;display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.payroll-summary h2{font-size:22px;margin:7px 0}.payroll-summary p{margin:0;color:var(--muted)}.payroll-summary strong{display:block;font-size:30px;letter-spacing:-.05em;margin:5px 0}.document-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.document-admin-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:19px;position:relative}.document-admin-card>.pill{position:absolute;right:15px;top:15px}.document-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#e8f1ff;color:#2864dc;font-size:20px}.document-admin-card h3{font-size:16px;margin:17px 0 5px}.document-admin-card p,.document-admin-card small{margin:0;color:var(--muted);font-size:13px}.document-admin-card .text-button{margin-top:20px;padding:0}.policy-layout{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}.policy-layout h2{font-size:19px;margin:0 0 6px}.muted-copy{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 18px}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-top:1px solid var(--line);font-size:14px}.toggle{border:0;width:42px;height:24px;border-radius:20px;background:#c9d4e2;position:relative}.toggle:after{content:"";position:absolute;background:#fff;border-radius:50%;width:18px;height:18px;top:3px;left:3px;transition:.2s}.toggle.on{background:#2864dc}.toggle.on:after{left:21px}.admin-main .user-name small{color:var(--muted)}
@media(max-width:900px){.admin-shell{grid-template-columns:1fr}.admin-sidebar{position:fixed;bottom:0;left:0;right:0;height:68px;z-index:5;padding:8px;background:#132b4a}.admin-sidebar .brand,.workspace,.admin-sidebar-bottom{display:none}.admin-nav{grid-template-columns:repeat(6,1fr);gap:1px}.admin-nav button{padding:7px 2px;justify-content:center;font-size:0}.admin-nav button span{font-size:17px}.admin-main{padding:20px 17px 90px}.admin-topbar h1{font-size:25px}.admin-kpis{grid-template-columns:repeat(2,1fr)}.admin-layout,.policy-layout{grid-template-columns:1fr}.admin-hero,.payroll-summary{align-items:flex-start;flex-direction:column}.document-grid{grid-template-columns:1fr}.approval-card{grid-template-columns:1fr;gap:12px}.approval-actions{justify-content:flex-end}.toolbar{flex-wrap:wrap}.toolbar .search{order:-1;width:100%}.toolbar>p{width:100%}.filter-row{overflow:auto}.admin-topbar .user-name{display:none}}