@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');
:root{
  --night:#0E1626;--panel:#182338;--panel-2:#20304c;--hi:#F5B301;
  --go:#22C55E;--stop:#EF4444;--datang:#F5B301;--ink:#E8EDF5;--muted:#8A97AD;
  --line:rgba(255,255,255,.09);--radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--night);color:var(--ink);min-height:100vh}
.mono{font-family:'JetBrains Mono',monospace}
a{color:var(--hi)}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:34px;width:100%;max-width:360px;text-align:center}
.login h1{font-family:'Oswald',sans-serif;letter-spacing:.05em;text-transform:uppercase;font-size:1.3rem;margin-bottom:6px}
.login p{color:var(--muted);font-size:.85rem;margin-bottom:20px}
.login input{width:100%;padding:14px;border-radius:12px;background:var(--night);border:1px solid var(--line);color:var(--ink);font-size:1rem;margin-bottom:12px}
.login button{width:100%;padding:14px;border:none;border-radius:12px;background:var(--hi);color:#1a1204;font-family:'Oswald',sans-serif;letter-spacing:.06em;text-transform:uppercase;font-size:1rem;cursor:pointer}

/* shell */
.wrap{display:none;max-width:1200px;margin:0 auto;padding:22px}
.head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.head .logo{width:44px;height:44px;border-radius:11px;background:linear-gradient(160deg,var(--hi),#c98f00);display:grid;place-items:center;font-size:1.3rem}
.head h1{font-family:'Oswald',sans-serif;letter-spacing:.05em;text-transform:uppercase;font-size:1.25rem;line-height:1.1}
.head h1 small{display:block;font-size:.62rem;color:var(--muted);letter-spacing:.2em;font-weight:400}
.head .sp{flex:1}
.head a.app{font-size:.85rem;text-decoration:none;color:var(--muted)}
.head button.out{background:var(--panel);border:1px solid var(--line);color:var(--muted);padding:9px 14px;border-radius:10px;cursor:pointer;font-size:.82rem}

/* summary */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.metric{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.metric .lbl{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.metric .num{font-family:'Oswald',sans-serif;font-size:2rem;margin-top:4px}
.metric.d .num{color:var(--datang)} .metric.k .num{color:var(--go)} .metric.p .num{color:var(--stop)}

/* filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:18px}
.filters .f{display:flex;flex-direction:column;gap:5px}
.filters label{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.filters input,.filters select{padding:9px 11px;border-radius:9px;background:var(--night);border:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:.85rem}
.filters button{padding:10px 16px;border:none;border-radius:9px;background:var(--hi);color:#1a1204;font-weight:600;cursor:pointer;font-size:.85rem}
.filters button.sec{background:var(--panel-2);color:var(--ink);border:1px solid var(--line)}

/* map */
#map{height:340px;border-radius:var(--radius);border:1px solid var(--line);margin-bottom:20px;background:var(--panel)}

/* table */
.tablewrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:auto}
table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:820px}
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);position:sticky;top:0;background:var(--panel-2)}
tbody tr:hover{background:rgba(255,255,255,.03)}
.tag{padding:3px 10px;border-radius:20px;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.tag.datang{background:rgba(245,179,1,.16);color:var(--hi)}
.tag.keliling{background:rgba(34,197,94,.16);color:var(--go)}
.tag.pulang{background:rgba(239,68,68,.16);color:var(--stop)}
td .thumb{width:46px;height:46px;object-fit:cover;border-radius:8px;cursor:pointer;border:1px solid var(--line)}
td a.map{color:var(--muted);text-decoration:none;font-size:.78rem}
.empty{padding:40px;text-align:center;color:var(--muted)}

/* modal foto */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;place-items:center;padding:20px;z-index:100}
.modal.show{display:grid}
.modal img{max-width:92vw;max-height:88vh;border-radius:12px}
.modal .x{position:absolute;top:18px;right:22px;font-size:2rem;color:#fff;cursor:pointer;background:none;border:none}

@media(max-width:720px){.cards{grid-template-columns:repeat(2,1fr)}}

/* ---------- panel lokasi absen (geofence) ---------- */
.panel{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;place-items:center;padding:16px;z-index:120}
.panel.show{display:grid}
.panel-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:100%;max-width:620px;max-height:92vh;overflow:auto}
.panel-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
.panel-head b{font-family:'Oswald',sans-serif;letter-spacing:.03em;font-size:1.05rem}
.panel-head .x{margin-left:auto;background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer}
.panel-body{padding:18px}
.switch{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;cursor:pointer}
.switch input{width:20px;height:20px;margin-top:1px;accent-color:var(--hi)}
.note{color:var(--muted);font-size:.78rem;margin:12px 0 10px}
#geo-map{height:280px;border-radius:12px;border:1px solid var(--line);margin-bottom:12px;background:var(--night)}
.geo-form{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.geo-form .gf{display:flex;flex-direction:column;gap:4px;flex:1;min-width:120px}
.geo-form label{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.geo-form input{padding:9px 11px;border-radius:9px;background:var(--night);border:1px solid var(--line);color:var(--ink);font-size:.85rem}
.geo-form button{padding:10px 14px;border-radius:9px;background:var(--hi);color:#1a1204;font-weight:600;cursor:pointer;font-size:.82rem}
.geo-form button.sec{background:var(--panel-2);color:var(--ink);border:1px solid var(--line)}
.geo-list{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.geo-item{display:flex;align-items:center;gap:10px;background:var(--night);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.85rem}
.geo-item .g-nama{font-weight:600}
.geo-item .g-info{color:var(--muted);font-size:.76rem;margin-left:auto}
.geo-item button{background:none;border:none;cursor:pointer;font-size:.9rem}
.geo-item .edit{color:var(--hi)}.geo-item .del{color:var(--stop)}
.geo-item.off{opacity:.5}

/* ---------- panel kelola pengguna ---------- */
.ugroup{font-family:'Oswald',sans-serif;font-size:.95rem;letter-spacing:.03em;margin:16px 0 8px;color:var(--ink)}
.ulist{display:flex;flex-direction:column;gap:8px}
.urow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--night);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.urow.off{opacity:.55}
.urow .u-nama{font-weight:600;font-size:.88rem;min-width:120px;flex:1}
.urow .u-nama small{display:block;color:var(--muted);font-weight:400;font-size:.72rem}
.urow .u-pin{width:78px;padding:7px 8px;border-radius:8px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:.9rem;text-align:center;letter-spacing:.1em}
.urow button{padding:7px 10px;border-radius:8px;font-size:.74rem;cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--ink)}
.urow .b-save{background:var(--hi);color:#1a1204;border:none;font-weight:600}
.urow .b-reset{color:var(--hi)}
.urow .b-cabut{color:var(--stop)}
.urow .b-aktif{color:var(--go)}
.urow .tag-off{font-size:.62rem;color:var(--stop);border:1px solid rgba(239,68,68,.4);border-radius:20px;padding:2px 8px}