:root{--ink:#061e38;--maroon:#6e0015;--shell:#f7f8fa;--rule:#d3d7dd;--muted:#5d6673;--line:#e8e6e2;
 --ok:#1d7a41;--warn:#b8801a;--bad:#a3253a;--blue:#061e38;--plum:#5b3b78;
 --display:'Archivo',system-ui,sans-serif;--body:'IBM Plex Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);color:var(--ink);background:var(--shell);line-height:1.5}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.15}
a{color:inherit}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--maroon);display:block;margin-bottom:8px}

/* top bar */
header{background:var(--ink);border-bottom:3px solid var(--maroon);position:sticky;top:0;z-index:120}
.bar{padding:9px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;row-gap:8px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo .mk{background:#fff;border-radius:2px;overflow:hidden;width:32px;height:32px;display:grid;place-items:center}
.logo .mk img{height:32px;width:32px;object-fit:cover;display:block}
.logo b{font-family:var(--display);font-weight:700;font-size:15px;color:#fff;letter-spacing:-.02em}
.logo span span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#8b96a5}
.me{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.asWrap{position:relative}
.asBtn{display:flex;align-items:center;gap:6px;background:none;border:1px dashed #3d4f6b;color:#8b96a5;
 font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;padding:6px 10px;border-radius:2px;cursor:pointer}
.asBtn svg{width:11px;height:11px}
.asMenu{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:230px;background:#fff;z-index:130;
 border:1px solid var(--rule);border-radius:2px;padding:4px;box-shadow:0 8px 24px rgba(0,0,0,.28)}
.asMenu.open{display:block}
.asMenu button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 11px;cursor:pointer;
 font-family:var(--body);font-size:13px;border-radius:2px}
.asMenu button:hover{background:var(--shell)}
.asMenu button.on{background:var(--maroon);color:#fff}
.asMenu small{display:block;font-size:11px;color:var(--muted)}
.asMenu button.on small{color:#f0b8c4}
.who{display:flex;align-items:center;gap:9px;background:#1e2b45;border-radius:2px;padding:6px 13px;color:#fff;font-size:13px}
.who .av{width:22px;height:22px;border-radius:50%;background:var(--maroon);display:grid;place-items:center;
 font-family:var(--display);font-weight:700;font-size:10px}
.out{background:none;border:1px solid #2e3d59;color:#c7cdd6;border-radius:2px;padding:7px 12px;font-size:12.5px;cursor:pointer;font-family:var(--body)}
.out:hover{background:#1e2b45;color:#fff}

/* shell: sidebar + main */
.shell{display:grid;grid-template-columns:222px 1fr;min-height:calc(100vh - 58px)}
@media(max-width:900px){.shell{grid-template-columns:1fr}}
nav.side{background:#fff;border-right:1px solid var(--rule);padding:14px 10px}
@media(max-width:900px){nav.side{border-right:0;border-bottom:1px solid var(--rule);display:flex;gap:6px;overflow-x:auto;padding:10px}}
.navgrp{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding:12px 12px 6px}
@media(max-width:900px){.navgrp{display:none}}
.side a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:2px;text-decoration:none;
 font-size:13.5px;color:var(--ink);white-space:nowrap}
.side a:hover{background:var(--shell)}
.side a.on{background:var(--ink);color:#fff;font-weight:600}
.side a svg{width:16px;height:16px;flex:none;opacity:.8}
.side a .cnt{margin-left:auto;font-family:var(--mono);font-size:10px;background:var(--maroon);color:#fff;border-radius:100px;padding:2px 7px}

main{padding:20px clamp(14px,3vw,28px) 60px;min-width:0}
.hd{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.hd h1{font-size:25px}
.hd p{color:var(--muted);font-size:14px;margin-top:4px}
.lastlog{margin-left:auto;background:#fff;border:1px solid var(--rule);border-radius:2px;padding:10px 14px;font-size:12.5px;color:var(--muted)}
.lastlog b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--maroon);margin-bottom:4px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--rule);border-radius:2px;padding:15px 17px;position:relative;overflow:hidden}
a.kpi{text-decoration:none;color:inherit;display:block;cursor:pointer;transition:box-shadow .15s,border-color .15s}
a.kpi:hover{box-shadow:0 2px 10px rgba(0,0,0,.08);border-color:var(--maroon)}
.kpi b{display:block;font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.03em;line-height:1}
.kpi span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.kpi .delta{position:absolute;top:14px;right:15px;font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:100px}
.kpi .up{background:#e9f7ee;color:var(--ok)}
.kpi .down{background:#fbeced;color:var(--bad)}
.kpi.hl b{color:var(--maroon)}

.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:12px;margin-bottom:16px}
@media(max-width:1000px){.grid2{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--rule);border-radius:2px}
.panel .ph{padding:15px 18px 0;display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.panel h2{font-size:16px}
.panel .sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.panel .pb{padding:14px 18px 18px}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}

table{width:100%;border-collapse:collapse;font-size:13px}
.attrow:hover{background:var(--shell)}
th{background:var(--shell);text-align:left;padding:9px 12px;font-family:var(--mono);font-size:9px;
 letter-spacing:.13em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule)}
td{padding:10px 12px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
td.r{text-align:right;font-variant-numeric:tabular-nums}
th.c,td.c{text-align:center;font-variant-numeric:tabular-nums}
.tag{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:100px}
.t-ok{background:#e9f7ee;color:var(--ok)}
.t-warn{background:#fff4e2;color:var(--warn)}
.t-bad{background:#fbeced;color:var(--bad)}
.t-info{background:#eef2f7;color:var(--blue)}

.bars{display:grid;gap:11px}
.brow{display:grid;grid-template-columns:120px 1fr 44px;gap:11px;align-items:center;font-size:13px}
.track{height:9px;background:var(--shell);border-radius:5px;overflow:hidden}
.track i{display:block;height:100%;border-radius:5px;background:var(--maroon)}
.track i.b{background:var(--blue)}.track i.g{background:var(--ok)}.track i.p{background:var(--plum)}
.brow b{text-align:right;font-family:var(--mono);font-size:12px}

.tl{list-style:none;display:grid}
.tl li{display:flex;gap:11px;padding:0;border-bottom:1px solid var(--line);font-size:13px}
.tl li:last-child{border-bottom:0}
.tl li>a{display:flex;gap:11px;padding:10px 0;width:100%;text-decoration:none;color:inherit;cursor:pointer;transition:background .15s}
.tl li>a:hover{background:var(--shell)}
.tl li>span{display:flex;gap:11px;padding:10px 0;width:100%}
.tl i{width:7px;height:7px;border-radius:50%;background:var(--rule);flex:none;margin-top:6px;font-style:normal}
.tl li.a i{background:var(--maroon)}
.tl li.g i{background:var(--ok)}
.tl b{display:block;font-weight:600}
.tl span span{color:var(--muted);font-size:12px}

.perm{width:100%;border-collapse:collapse;font-size:12.5px}
.perm th{white-space:nowrap}
.perm td{text-align:center}
.perm td:first-child,.perm th:first-child{text-align:left}
.perm input{accent-color:var(--maroon);width:15px;height:15px}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--shell);border:1px solid var(--rule);
 border-radius:100px;padding:5px 12px;font-size:12.5px}
.pill .av2{width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
 font-family:var(--display);font-weight:700;font-size:9px}
.btn{border:1px solid var(--rule);background:#fff;border-radius:2px;padding:9px 16px;font-family:var(--body);
 font-size:13px;cursor:pointer}
.btn:hover{border-color:var(--ink)}
.btn.go{background:var(--maroon);border-color:var(--maroon);color:#fff;font-family:var(--display);font-weight:700}
.btn.go:hover{background:var(--ink);border-color:var(--ink)}
.invite{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.invite input,.invite select{border:1px solid var(--rule);border-radius:2px;padding:10px 12px;font-family:var(--body);font-size:13.5px}
.invite input{flex:1;min-width:220px}

/* subtabs (period pickers, month pickers) */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.subtabs button{border:1px solid var(--rule);background:#fff;border-radius:2px;padding:8px 15px;font-family:var(--body);
 font-size:13px;cursor:pointer;color:var(--muted)}
.subtabs button:hover{border-color:var(--ink);color:var(--ink)}
.subtabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* KPI report rows */
.krowhead{padding:9px 16px;background:var(--shell);display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:12px;
 font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule)}
.krow{border-bottom:1px solid var(--line);padding:13px 16px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:12px;align-items:start}
.krow:last-child{border-bottom:0}
.krow .task{font-weight:600;font-size:13.5px}
.krow .desc{color:var(--muted);font-size:12px;margin-top:2px}
.krow em{display:block;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.krow input[type=text]{width:100%;border:1.5px solid var(--rule);border-radius:2px;padding:7px 9px;font-family:var(--body);font-size:13px}
.krow input:disabled{background:var(--shell);color:var(--ink);border-color:var(--line)}
.tagx{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:2px;white-space:nowrap;display:inline-block}
.tagx.auto{background:#eef2f7;color:#3d5170}.tagx.manual{background:#fff4e2;color:var(--warn)}
.tagx.met{background:#e9f7ee;color:var(--ok)}.tagx.missed{background:#fbeced;color:var(--bad)}.tagx.info{background:var(--shell);color:var(--muted)}
.editT{border:0;background:none;color:var(--maroon);font-size:11px;cursor:pointer;text-decoration:underline;padding:0;margin-top:4px}
.proofbtn{border:1.5px dashed var(--rule);background:#fff;color:var(--muted);border-radius:2px;padding:7px 9px;
 font-family:var(--body);font-size:12px;cursor:pointer;width:100%;text-align:left}
.proofbtn:hover{border-color:var(--maroon);color:var(--maroon)}
.proofgot{display:flex;align-items:center;gap:7px;border:1.5px solid var(--rule);border-radius:2px;padding:7px 9px;font-size:12px}
.lockbanner{display:flex;align-items:center;gap:9px;background:#eef2f7;border:1px solid var(--rule);border-radius:2px;
 padding:10px 14px;font-size:12.5px;margin-bottom:12px}
.dhead2{background:#fff;border:1px solid var(--rule);border-radius:2px;padding:16px 18px;margin-bottom:12px;
 display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.dhead2 .right{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.scoreBig{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.03em}
.scoreBig span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;font-weight:400}
.back{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:var(--muted);font-family:var(--body);
 font-size:13px;cursor:pointer;padding:5px 0;margin-bottom:8px}
.back:hover{color:var(--maroon)}

/* attendance */
.attgrid{display:grid;gap:2px;overflow-x:auto;padding-bottom:4px}
.day{width:25px;height:25px;border-radius:2px;display:grid;place-items:center;font-family:var(--mono);font-size:9px;flex:none;cursor:default}
.day.click{cursor:pointer}
.d-sub{background:#1d7a41;color:#fff}
.d-miss{background:var(--bad);color:#fff}
.d-leave{background:#b98a2e;color:#fff}
.d-off{background:var(--shell);color:var(--muted);border:1px solid var(--line)}
.d-future{background:#fff;border:1px dashed var(--rule);color:var(--rule)}
.d-absent{background:#7a1f1f;color:#fff}
.d-nodata{background:#fff;border:1px dashed var(--line);color:var(--line)}
.dow{display:flex;gap:4px;flex-wrap:wrap}
.dow button{width:34px;height:30px;border:1.5px solid var(--rule);background:#fff;border-radius:2px;font-family:var(--mono);
 font-size:9.5px;cursor:pointer;color:var(--muted)}
.dow button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.dow button.off{background:var(--shell);border-color:var(--rule);color:var(--bad)}
.paytbl{width:100%;border-collapse:collapse;font-size:13px}
.paytbl input,.paytbl select{border:1.5px solid var(--rule);border-radius:2px;padding:6px 8px;font-family:var(--body);font-size:13px;width:90px}

/* org chart — CSS-only centered tree with connector lines */
.orgtree,.orgtree ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center}
.orgtree{padding:16px 10px 6px}
.orgtree ul{padding-top:28px;position:relative}
.orgtree li{display:flex;flex-direction:column;align-items:center;padding:28px 10px 0;position:relative}
.orgtree li::before,.orgtree li::after{content:'';position:absolute;top:0;right:50%;border-top:2px solid var(--rule);width:50%;height:28px}
.orgtree li::after{right:auto;left:50%;border-left:2px solid var(--rule)}
.orgtree li:only-child{padding-top:0}
.orgtree li:only-child::before,.orgtree li:only-child::after{display:none}
.orgtree li:first-child::before{border:none}
.orgtree li:last-child::after{border:none}
.orgtree li:last-child::before{border-right:2px solid var(--rule);border-radius:0 4px 0 0}
.orgtree li:first-child::after{border-radius:4px 0 0 0}
.orgtree ul::before{content:'';position:absolute;top:0;left:50%;border-left:2px solid var(--rule);width:0;height:28px}
.orgcard{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--rule);
 border-radius:6px;padding:14px 12px;min-width:132px}
.orgphoto{width:60px;height:60px;border-radius:50%;object-fit:cover}
.orgphoto-fallback{display:grid;place-items:center;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:20px}
.orgname{font-size:13px;text-align:center;font-weight:700}
.orgrole{background:var(--ink);color:#fff;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
 padding:4px 8px;border-radius:2px;text-align:center;white-space:nowrap}
.orgactions{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:6px}
.orgactions .btn{padding:4px 7px;font-size:10px}
.orgroleedit{font-size:10px;padding:3px 5px;border:1px solid var(--rule);border-radius:2px;margin-top:4px;width:100%}

/* ===== Attendance redesign ===== */
.rule-note{background:#eef1f6;border:1px solid var(--rule);border-radius:4px;padding:11px 14px;font-size:12.5px;color:var(--ink);margin-bottom:16px}
.ov-grid{display:grid;grid-template-columns:2.1fr 1fr;gap:20px;align-items:start}
.bulkbar{display:none;align-items:center;gap:10px;background:#fff3e0;border:1.5px solid #f0b155;border-radius:6px;padding:10px 14px;margin-bottom:14px;flex-wrap:wrap}
.bulkbar.show{display:flex}
.bulkbar select,.bulkbar input[type=date]{font-family:var(--body);font-size:12.5px;padding:7px 10px;border:1.5px solid var(--rule);border-radius:4px}
.minical{width:100%;border-collapse:collapse}
.minical th{font-family:var(--mono);font-size:9px;text-align:center;padding:4px;color:var(--muted);border:none;background:none}
.minical td{text-align:center;padding:0;border:none}
.minical .d{width:32px;height:32px;display:flex;align-items:center;justify-content:center;margin:2px auto;border-radius:6px;font-size:12px;cursor:default}
.minical .d.today{border:1.5px solid var(--ink);font-weight:700}
.minical .d.holiday{background:#fdeef1;color:var(--maroon);font-weight:700;cursor:pointer}
.holidaylegend{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);margin-top:10px}
.holidaylegend i{width:11px;height:11px;border-radius:3px;background:#fdeef1;border:1px solid #f0b8c4;display:inline-block}
.addholiday{margin-top:12px;display:flex;gap:6px}
.addholiday input{flex:1;font-size:12px;padding:7px 9px;border:1.5px solid var(--rule);border-radius:4px}
.addholiday button{font-size:12px;padding:7px 12px;border:0;background:var(--ink);color:#fff;border-radius:4px;cursor:pointer}
.legend2{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:16px}
.legend2 span{display:flex;align-items:center;gap:6px}
.legend2 i{width:12px;height:12px;border-radius:3px;display:inline-block}
table.cal{width:100%;border-collapse:separate;border-spacing:6px}
table.cal th{font-family:var(--mono);font-size:10px;color:var(--muted);padding-bottom:6px;text-transform:uppercase}
table.cal td{width:14.2%;height:72px;vertical-align:top;border-radius:8px;padding:8px;position:relative;cursor:pointer;border:1.5px solid var(--line)}
table.cal td.blank{border:none;cursor:default}
table.cal td .num{font-family:var(--display);font-weight:700;font-size:14px}
table.cal td .lbl{font-size:9.5px;font-family:var(--mono);text-transform:uppercase;margin-top:4px;display:block}
table.cal td.present{background:#f0f8f2;border-color:#c7e6cf}
table.cal td.present .num,table.cal td.present .lbl{color:var(--ok)}
table.cal td.missed{background:#fbeef0;border-color:#f0c3c9}
table.cal td.missed .num,table.cal td.missed .lbl{color:var(--bad)}
table.cal td.absent{background:#f3dde0;border-color:#e0a8b0}
table.cal td.absent .num,table.cal td.absent .lbl{color:#7a1f1f}
table.cal td.leave{background:#fdf3e0;border-color:#f0d597}
table.cal td.leave .num,table.cal td.leave .lbl{color:var(--warn)}
table.cal td.holiday{background:#eef1f6;border-color:#c7cfe0;cursor:default}
table.cal td.future{background:#fff;color:#c7ccd3;cursor:default}
table.cal td.future .num{color:#c7ccd3}
table.cal td.off,table.cal td.nodata{background:#fff;color:#c7ccd3;cursor:default}
table.cal td.today{outline:2px solid var(--ink);outline-offset:-2px}
table.cal td:hover:not(.blank):not(.future):not(.off):not(.holiday):not(.nodata){filter:brightness(.96)}
.popover{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid var(--rule);border-radius:6px;
 box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;z-index:50;width:170px;display:none}
.popover.show{display:block}
.popover button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;border-radius:4px;cursor:pointer;font-size:12.5px}
.popover button:hover{background:var(--shell)}
.popover button.present{color:var(--ok)}
.popover button.leave{color:var(--warn)}
.popover button.absent{color:var(--bad)}
.popover button.clear{color:var(--muted)}
@media(max-width:900px){.ov-grid{grid-template-columns:1fr}}