:root{--ink:#15261f;--muted:#67746e;--paper:#f5f7f3;--card:#fff;--green:#276b4a;--green-dark:#173d2e;--green-soft:#e6f2eb;--line:#dfe6e1;--amber:#9a6414;--amber-soft:#fff5dc;--red:#a64040;--red-soft:#fff0ef;--blue:#376a8b;--blue-soft:#eaf3f8;--shadow:0 10px 30px #18352912}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.appShell{grid-template-columns:245px 1fr;min-height:100vh;display:grid}.sidebar{background:var(--green-dark);color:#fff;flex-direction:column;height:100vh;padding:25px 18px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;padding:0 8px 25px;display:flex}.brandMark{width:42px;height:42px;color:var(--green-dark);background:#f1b655;border-radius:13px;place-items:center;font-weight:900;display:grid}.brand strong,.brand small,.account strong,.account small{display:block}.brand small{color:#b6c9c0;margin-top:2px;font-size:12px}.sidebar nav{gap:6px;display:grid}.sidebar nav button{color:#c5d6ce;text-align:left;background:0 0;border:0;border-radius:9px;padding:11px 13px;font-weight:650}.sidebar nav button:hover,.sidebar nav .navActive{color:#fff;background:#285744}.sidebarBottom{border-top:1px solid #315a49;gap:12px;margin-top:auto;padding:18px 5px 0;display:grid}.sidebarBottom label{text-transform:uppercase;color:#9eb9ac;font-size:10px;font-weight:800}.sidebarBottom select{color:#fff;background:#214c3a;border:1px solid #557866;border-radius:8px;width:100%;margin-top:6px;padding:9px;display:block}.account{align-items:center;gap:10px;margin-top:3px;display:flex}.account>span{color:#24543d;background:#d9eadf;border-radius:50%;place-items:center;width:35px;height:35px;font-size:12px;font-weight:800;display:grid}.account strong,.account small{text-overflow:ellipsis;max-width:165px;font-size:11px;overflow:hidden}.account small{color:#a9c1b6;margin-top:2px}.main{min-width:0}.topbar{justify-content:space-between;align-items:center;padding:27px 34px 20px;display:flex}.topbar h1{margin:0;font-size:25px}.topbar p{color:var(--muted);margin:5px 0 0;font-size:14px}.datePill{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 13px;font-size:13px}.content{padding:0 34px 40px}.flash{background:var(--green-soft);color:var(--green);border:1px solid #bcd6c6;border-radius:9px;margin:0 34px 14px;padding:12px 15px;font-size:13px}.stack{gap:18px;display:grid}.card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px}.hero{color:#fff;background:linear-gradient(125deg,#214d39,#327052);justify-content:space-between;align-items:center;padding:25px;display:flex}.hero h2{margin:4px 0 8px;font-size:23px}.hero p{color:#d5e6dd;margin:0;font-size:14px}.eyebrow{letter-spacing:.12em;color:#9fc5b1;font-size:10px;font-weight:850}.actions,.rowActions,.modalActions{flex-wrap:wrap;gap:9px;display:flex}.actions{margin-top:17px}.button,.rowActions button,.modalActions button,.tableCard button{border:0;border-radius:9px;padding:9px 13px;font-weight:750}.primary,.approve{color:var(--green-dark)!important;background:#f1b655!important}.ghost{color:#fff;background:#ffffff1f;border:1px solid #fff3}.clock{text-align:right}.clock strong,.clock span{display:block}.clock strong{font-size:22px}.clock span{color:#d5e6dd;font-size:12px}.metricGrid{grid-template-columns:repeat(4,1fr);gap:18px;display:grid}.metric{padding:18px}.metric span,.metric small{color:var(--muted);font-size:12px;display:block}.metric strong{margin:8px 0;font-size:27px;display:block}.twoColumn{grid-template-columns:1.3fr 1fr;gap:18px;display:grid}.panel{padding:20px}.panel h3{margin:0;font-size:16px}.panelHead{justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px;display:flex}.panelHead>button,.panelHead div+button{color:var(--green);background:0 0;border:0;font-weight:750}.quickActions{grid-template-columns:1fr 1fr;gap:10px;margin-top:15px;display:grid}.quickActions button{border:1px solid var(--line);text-align:left;background:#fbfcfb;border-radius:10px;padding:16px;font-weight:750}.quickActions small{color:var(--muted);margin-top:5px;font-size:11px;display:block}.list{gap:9px;display:grid}.listRow{border:1px solid var(--line);border-radius:10px;justify-content:space-between;align-items:center;gap:12px;padding:12px;display:flex}.listRow strong,.listRow small,td small{display:block}.listRow small,td small{color:var(--muted);margin-top:3px;font-size:11px}.badge{white-space:nowrap;border-radius:99px;padding:5px 8px;font-size:10px;font-weight:800;display:inline-flex}.badge-pending{background:var(--amber-soft);color:var(--amber)}.badge-approved,.badge-present{background:var(--green-soft);color:var(--green)}.badge-rejected,.badge-missing,.badge-absent{background:var(--red-soft);color:var(--red)}.badge-wfh{background:var(--blue-soft);color:var(--blue)}.badge-weekly-off,.badge-holiday,.badge-leave{color:#5c6460;background:#f0f1f0}.alert{border-left:4px solid #d75e4c;padding:18px}.alert h3{margin:0 0 5px}.alert>p{color:var(--muted);margin:0 0 13px;font-size:12px}.muted{color:var(--muted);margin:4px 0;font-size:12px}.empty{text-align:center;color:var(--muted);padding:25px}.tableWrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px}th{text-align:left;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);white-space:nowrap;padding:11px;font-size:10px}td{white-space:nowrap;border-bottom:1px solid #edf0ee;padding:12px 11px}tr:last-child td{border-bottom:0}.tableCard select{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px}.tabs{gap:7px;margin-bottom:14px;display:flex}.tabs button{border:1px solid var(--line);color:var(--muted);background:#fff}.tabs .tabActive{background:var(--green-dark);color:#fff}.modalBackdrop{z-index:50;background:#12241d94;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.modal{width:min(520px,100%);padding:23px}.modal h2{margin:0}.modal label{gap:6px;margin:12px 0;font-size:12px;font-weight:750;display:grid}.modal input,.modal select,.modal textarea{background:#fff;border:1px solid #ccd6d0;border-radius:8px;width:100%;padding:10px}.modal textarea{resize:vertical;min-height:80px}.formGrid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.formNote{color:var(--muted);background:#f2f6f3;border-radius:8px;padding:11px;font-size:11px;line-height:1.6}.modalActions{justify-content:flex-end;margin-top:18px}.modalActions button{color:#284438;background:#eef2ef}@media (max-width:980px){.metricGrid{grid-template-columns:1fr 1fr}.twoColumn{grid-template-columns:1fr}}@media (max-width:720px){.appShell{display:block}.sidebar{width:100%;height:auto;position:relative}.sidebar nav{grid-template-columns:repeat(2,1fr)}.sidebarBottom{margin-top:18px}.topbar{padding:20px}.datePill{display:none}.content{padding:0 18px 30px}.flash{margin:0 18px 12px}.hero{display:block}.clock{text-align:left;margin-top:18px}.metricGrid{grid-template-columns:1fr 1fr}.formGrid{grid-template-columns:1fr}}.accessPage{place-items:center;min-height:100vh;padding:24px;display:grid}.accessCard{text-align:center;width:min(520px,100%);padding:38px}.accessCard .brandMark{margin:0 auto 22px}.accessCard h1{margin:8px 0 12px;font-size:30px}.accessCard p:not(.eyebrow){color:var(--muted);margin-bottom:24px;line-height:1.6}.accessCard a{text-decoration:none;display:inline-block}.loginPage{background:linear-gradient(145deg,#eef4ef,#f8f4e8);place-items:center;min-height:100vh;padding:24px;display:grid}.loginCard{width:min(430px,100%);padding:36px}.loginCard .brandMark{margin-bottom:22px}.loginCard h1{margin:8px 0;font-size:28px}.loginCard label{gap:6px;margin:16px 0;font-size:12px;font-weight:750;display:grid}.loginCard input{border:1px solid #ccd6d0;border-radius:8px;width:100%;padding:11px}.loginCard>button{width:100%;margin-top:8px;padding:12px}.loginError{background:var(--red-soft);color:var(--red);border-radius:8px;padding:10px;font-size:12px}.signOut{color:#c5d6ce;background:0 0;border:1px solid #557866;border-radius:8px;width:100%;padding:9px;font-weight:700}