/* Employee app (installable web app) — mobile first */
:root{
  --bg:#eef3f8;--card:#fff;--ink:#13213a;--ink2:#3a4a63;--muted:#6e7b90;--line:#e2e8f0;
  --brand:#0f2d52;--brand2:#1d5fa8;--teal:#0fa3a3;
  --P:#14894a;--Pbg:#e1f5e9;--L:#a06200;--Lbg:#fff2d4;--HD:#b85400;--HDbg:#ffe6cc;--A:#c8372d;--Abg:#fde4e1;
  --WO:#5a6476;--WObg:#edf0f4;--H:#2463a6;--Hbg:#e0ecf9;--LV:#6b3fa0;--LVbg:#efe6fa;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font:15px/1.5 "Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--brand2);text-decoration:none}
.ic{flex:none;vertical-align:middle}
.wrap{max-width:560px;margin:0 auto;padding:0 16px calc(96px + var(--safe-b))}

/* app bar */
.appbar{position:sticky;top:0;z-index:20;background:linear-gradient(135deg,#0f2d52,#164a83 60%,#0f8f95);color:#fff;padding:14px 16px 16px;border-radius:0 0 22px 22px;box-shadow:0 6px 20px rgba(15,45,82,.25)}
.appbar .row{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:12px}
.appbar .ttl{flex:1;min-width:0}
.appbar .ttl small{display:block;color:#b8cde6;font-size:12px}
.appbar .ttl b{display:block;font-size:18px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.35);display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff;flex:none}
.appbar.tall{padding-bottom:64px}
.lift{margin-top:-50px;position:relative;z-index:21}

/* bottom nav */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 6px calc(6px + var(--safe-b))}
.tabbar .row{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;color:var(--muted);padding:6px 0;border-radius:12px;position:relative;font-weight:600}
.tabbar a.on{color:var(--brand2)}
.tabbar a.on .ic{background:#e3eefb;border-radius:12px;padding:3px 14px;box-sizing:content-box}
.tabbar .dot{position:absolute;top:2px;right:calc(50% - 22px);background:#ff5a4a;color:#fff;font-size:10px;border-radius:9px;padding:0 5px;line-height:16px}

/* cards */
.card{background:var(--card);border-radius:18px;padding:16px;margin-bottom:14px;box-shadow:0 1px 2px rgba(16,40,80,.05),0 6px 18px rgba(16,40,80,.06)}
.card h3{margin:0 0 10px;font-size:15px;display:flex;align-items:center;gap:8px}
.card h3 .sp{flex:1}
.sec{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin:18px 4px 8px}
.muted{color:var(--muted)}.small{font-size:12.5px}

/* today hero */
.today .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.today .date{font-weight:700}
.today .date small{display:block;color:var(--muted);font-weight:500;font-size:12.5px}
.times{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tbox{border-radius:14px;padding:12px;background:#f5f8fc;border:1px solid var(--line)}
.tbox small{display:flex;align-items:center;gap:6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.tbox b{display:block;font-size:24px;letter-spacing:-.02em;margin-top:2px}
.tbox.in small .ic{color:var(--P)}.tbox.out small .ic{color:var(--A)}
.tbox .none{color:#b2bccb;font-size:22px}
.hours{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;background:linear-gradient(90deg,#e7f6f6,#eef4fc)}
.hours b{font-size:17px}
.note{margin-top:10px;padding:9px 12px;border-radius:12px;font-size:13px;display:flex;gap:8px;align-items:center}
.note.warn{background:var(--Lbg);color:#7a4b00}.note.bad{background:var(--Abg);color:#8c2a1f}.note.good{background:var(--Pbg);color:#11633a}.note.info{background:var(--Hbg);color:#1d4f86}

/* status chip */
.chip{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:4px 11px;font-size:12.5px;font-weight:700}
.c-P{background:var(--Pbg);color:var(--P)}.c-L{background:var(--Lbg);color:var(--L)}.c-HD{background:var(--HDbg);color:var(--HD)}
.c-A{background:var(--Abg);color:var(--A)}.c-WO{background:var(--WObg);color:var(--WO)}.c-H{background:var(--Hbg);color:var(--H)}.c-LV{background:var(--LVbg);color:var(--LV)}
.c-none{background:#eef1f5;color:var(--muted)}
.c-pending{background:var(--Lbg);color:var(--L)}.c-approved{background:var(--Pbg);color:var(--P)}.c-rejected{background:var(--Abg);color:var(--A)}

/* summary tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tile{background:var(--card);border-radius:16px;padding:12px 10px;text-align:center;box-shadow:0 1px 2px rgba(16,40,80,.05),0 4px 12px rgba(16,40,80,.05);border-top:3px solid var(--line)}
.tile b{display:block;font-size:22px;letter-spacing:-.02em}
.tile span{font-size:11.5px;color:var(--muted);font-weight:600}
.tile.t-work{border-color:var(--brand2)}.tile.t-P{border-color:var(--P)}.tile.t-P b{color:var(--P)}
.tile.t-L{border-color:#e0a526}.tile.t-L b{color:var(--L)}.tile.t-A{border-color:var(--A)}.tile.t-A b{color:var(--A)}
.tile.t-LV{border-color:var(--LV)}.tile.t-LV b{color:var(--LV)}.tile.t-HD{border-color:#e27a1c}.tile.t-HD b{color:var(--HD)}

/* progress ring */
.ring{--p:0;width:86px;height:86px;border-radius:50%;background:conic-gradient(var(--teal) calc(var(--p)*1%),#e6edf5 0);display:grid;place-items:center;flex:none}
.ring i{width:68px;height:68px;border-radius:50%;background:#fff;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:18px;color:var(--brand)}
.month-sum{display:flex;gap:14px;align-items:center}
.month-sum .lines{flex:1;font-size:13.5px}
.month-sum .lines div{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed var(--line)}
.month-sum .lines div:last-child{border:0}

/* lists */
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid #eef2f7}
.list li:last-child{border-bottom:0}
.list .dt{width:46px;text-align:center;flex:none;border-radius:12px;background:#f3f6fa;padding:5px 0;line-height:1.15}
.list .dt b{display:block;font-size:17px}.list .dt small{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:700}
.list .mid{flex:1;min-width:0}
.list .mid b{font-size:14px}
.list .mid small{display:block;color:var(--muted);font-size:12.5px}

/* calendar */
.monthbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.monthbar b{font-size:17px}
.iconbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal .h{font-size:11px;text-align:center;color:var(--muted);font-weight:700;padding-bottom:4px}
.cal .d{aspect-ratio:1/1.08;border-radius:12px;background:#f5f8fc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-weight:700;font-size:14px;border:2px solid transparent;cursor:pointer;color:var(--ink);padding:0}
.cal .d.e{background:none;cursor:default}
.cal .d i{width:7px;height:7px;border-radius:50%;background:transparent}
.cal .d.s-P i{background:var(--P)}.cal .d.s-L i{background:#e0a526}.cal .d.s-HD i{background:#e27a1c}
.cal .d.s-A{background:#fdeeec;color:var(--A)}.cal .d.s-A i{background:var(--A)}
.cal .d.s-WO,.cal .d.s-H{background:#eef1f5;color:#8a95a8}.cal .d.s-H i{background:var(--H)}
.cal .d.s-LV{background:var(--LVbg)}.cal .d.s-LV i{background:var(--LV)}
.cal .d.fut{color:#b5bfcc;background:#f8fafc}
.cal .d.today{border-color:var(--brand2)}
.cal .d.sel{background:var(--brand2)!important;color:#fff!important}.cal .d.sel i{background:#fff!important}
.legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:12px;font-size:12px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:5px}.legend i{width:9px;height:9px;border-radius:50%;display:inline-block}

/* day detail */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:14px}
.detail div small{display:block;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.detail div b{font-size:16px}
.punchlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.punchlist span{background:#f1f5fa;border-radius:8px;padding:3px 9px;font-size:12.5px;font-weight:600}

/* forms */
.seg{display:grid;grid-template-columns:1fr 1fr;background:#e7edf5;border-radius:14px;padding:4px;margin-bottom:14px}
.seg button{border:0;background:none;padding:10px;border-radius:11px;font:inherit;font-weight:700;color:var(--muted);cursor:pointer}
.seg button.on{background:#fff;color:var(--brand2);box-shadow:0 1px 4px rgba(16,40,80,.12)}
label.f{display:block;margin-bottom:12px;font-size:13px;font-weight:600;color:var(--ink2)}
label.f input,label.f select,label.f textarea{display:block;width:100%;margin-top:5px;font:inherit;font-size:16px;padding:12px 13px;border-radius:12px;border:1px solid #cfd8e5;background:#fff;color:var(--ink)}
label.f input:focus,label.f select:focus,label.f textarea:focus{outline:none;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(29,95,168,.15)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;font:inherit;font-weight:700;font-size:16px;padding:13px;border-radius:14px;border:0;color:#fff;background:linear-gradient(135deg,#1d5fa8,#0f8f95);box-shadow:0 6px 16px rgba(29,95,168,.28);cursor:pointer}
.btn.ghost{background:#fff;color:var(--brand2);border:1px solid #cfd8e5;box-shadow:none}
.btn.small{width:auto;padding:8px 14px;font-size:13.5px;border-radius:11px}
.btn.danger{background:#fff;color:var(--A);border:1px solid #f0c8c2;box-shadow:none}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick a{display:flex;flex-direction:column;gap:6px;background:var(--card);border-radius:16px;padding:14px;color:var(--ink);font-weight:700;font-size:14px;box-shadow:0 1px 2px rgba(16,40,80,.05),0 4px 12px rgba(16,40,80,.05)}
.quick a .ic{width:36px;height:36px;padding:8px;border-radius:11px;box-sizing:border-box}
.quick a small{color:var(--muted);font-weight:500;font-size:12px}
.q1 .ic{background:#e3eefb;color:var(--brand2)}.q2 .ic{background:var(--LVbg);color:var(--LV)}

/* flash */
.flash{display:flex;gap:9px;align-items:center;padding:12px 14px;border-radius:14px;margin:14px 0 0;font-size:14px;font-weight:600}
.flash.ok{background:#e4f6ec;color:#11633a}.flash.error{background:#fde9e6;color:#8c2a1f}.flash.info{background:#e6f0fb;color:#1d4f86}

/* profile */
.prof{display:flex;gap:14px;align-items:center}
.prof .big{width:64px;height:64px;font-size:22px;background:linear-gradient(135deg,var(--brand2),var(--teal));border:0}
.kv{list-style:none;margin:0;padding:0}
.kv li{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #eef2f7}
.kv li:last-child{border:0}
.kv .ic{color:var(--brand2);background:#eaf2fb;border-radius:10px;padding:7px;width:34px;height:34px;box-sizing:border-box}
.kv small{display:block;color:var(--muted);font-size:12px}
.kv b{font-size:14.5px}

/* login */
.login-bg{min-height:100vh;background:linear-gradient(160deg,#0f2d52 0%,#174d86 45%,#0f9a9a 100%);display:flex;flex-direction:column;justify-content:center;padding:24px 18px}
.login-card{max-width:420px;width:100%;margin:0 auto;background:#fff;border-radius:24px;padding:26px 22px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.login-logo{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;margin-bottom:20px}
.login-logo img{width:72px;height:72px;border-radius:20px;box-shadow:0 10px 26px rgba(0,0,0,.25);margin-bottom:12px}
.login-logo b{font-size:20px}.login-logo small{color:#cfe0f3}
.help{font-size:13px;color:var(--muted);background:#f4f7fb;border-radius:12px;padding:11px 12px;margin-top:14px;line-height:1.55}
.install{display:none;margin-top:12px}
.install.show{display:flex}
.foot-link{text-align:center;margin-top:16px;font-size:13px}.foot-link a{color:#d7e6f6}
.offline{position:fixed;top:0;left:0;right:0;z-index:50;background:#b8471f;color:#fff;text-align:center;font-size:13px;padding:6px;display:none}
body.is-offline .offline{display:block}
@media print{.tabbar,.appbar .av,.noprint{display:none!important}.appbar{position:static;box-shadow:none;border-radius:0}.card{box-shadow:none;border:1px solid #ddd}}