/* Ground Check Titik Api — mobile-first, dark */
:root{
  --bg:#0d1117; --bg2:#161b22; --bg3:#1f2630; --line:#2d333b;
  --tx:#e6edf3; --tx2:#9da7b3; --acc:#ff6b35; --acc2:#f0a202;
  --ok:#3fb950; --warn:#d29922; --bad:#f85149; --info:#58a6ff;
  --radius:12px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{background:var(--bg);color:var(--tx);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px}
.hidden{display:none!important}
.input{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--tx);font-size:15px}
.input:focus{outline:2px solid var(--acc)}
.select{appearance:none}
.btn{border:none;border-radius:10px;padding:12px 16px;font-size:15px;font-weight:600;cursor:pointer;background:var(--bg3);color:var(--tx)}
.btn-primary{background:var(--acc);color:#fff}
.btn-block{width:100%}
.btn-small{padding:8px 12px;font-size:13px}
.err{color:var(--bad);font-size:13px;margin-top:8px}

/* ── Login ── */
#screen-login{display:flex;align-items:center;justify-content:center;height:100dvh;padding:20px}
.login-box{width:100%;max-width:380px;background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:28px 22px;text-align:center}
.login-logo{font-size:52px}
.login-box h1{font-size:20px;margin:8px 0 2px}
.login-sub{color:var(--tx2);margin:0 0 18px;font-size:13px}
.login-box .input{margin-bottom:10px}

/* ── App layout ── */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));background:var(--bg2);border-bottom:1px solid var(--line);z-index:20}
.header-title{font-weight:700;font-size:17px}
.header-title small{display:block;font-weight:400;font-size:11px;color:var(--tx2)}
.icon-btn{background:none;border:none;color:var(--tx);font-size:22px;cursor:pointer;padding:4px 8px}

/* ── Filter ── */
.filter-bar{padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow-y:auto}
.filter-bar .select{font-size:13px;padding:8px 10px}
.chip-row{display:flex;gap:6px;overflow-x:auto;padding:2px}
.chip{flex-shrink:0;border:1px solid var(--line);background:var(--bg3);color:var(--tx2);border-radius:20px;padding:6px 12px;font-size:12px;cursor:pointer}
.chip.active{background:var(--acc);border-color:var(--acc);color:#fff}

/* ── Views ── */
.view{flex:1;overflow-y:auto;display:none;padding-bottom:64px}
.view.active{display:block}
#view-map{overflow:hidden;padding-bottom:0}
#map{position:absolute;inset:0;margin-top:0}
#map-legend{position:absolute;left:10px;bottom:76px;background:rgba(13,17,23,.85);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:11px;color:var(--tx2);display:flex;flex-direction:column;gap:4px;z-index:5}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
.dot-tinggi{background:#f85149;box-shadow:0 0 6px #f85149}
.dot-sedang{background:#f0a202}
.dot-rendah{background:#3fb950}
.dot-himawari{background:#a371f7}
.dot-dicek{outline:2px solid #3fb950;outline-offset:1px}
#map-actions{position:absolute;right:12px;bottom:76px;display:flex;flex-direction:column;gap:8px;z-index:5}
.fab{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);color:var(--tx);font-size:18px;cursor:pointer}

/* ── List ── */
.list-summary{padding:10px 14px 4px;font-size:13px;color:var(--tx2)}
.cards{padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;cursor:pointer}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-title{font-weight:700;font-size:15px}
.badge{font-size:10.5px;padding:3px 8px;border-radius:20px;font-weight:700;white-space:nowrap}
.b-tinggi{background:rgba(248,81,73,.2);color:var(--bad)}
.b-sedang{background:rgba(242,162,2,.2);color:var(--warn)}
.b-rendah{background:rgba(63,185,80,.2);color:var(--ok)}
.b-himawari{background:rgba(163,113,247,.2);color:#a371f7}
.b-status{background:rgba(88,166,255,.15);color:var(--info)}
.b-ok{background:rgba(63,185,80,.2);color:var(--ok)}
.card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.meta{background:var(--bg3);border-radius:8px;padding:4px 8px;font-size:11.5px;color:var(--tx2)}
.meta b{color:var(--tx)}
.empty{text-align:center;color:var(--tx2);padding:40px 20px}

/* ── Bottom nav ── */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--bg2);border-top:1px solid var(--line);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.nav-btn{flex:1;background:none;border:none;color:var(--tx2);font-size:20px;padding:8px 0 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px}
.nav-btn span{font-size:10px}
.nav-btn.active{color:var(--acc)}

/* ── Bottom sheet ── */
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:78dvh;background:var(--bg2);border-radius:16px 16px 0 0;border-top:1px solid var(--line);z-index:40;overflow-y:auto;padding:10px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(0,0,0,.5)}
.sheet-grab{width:44px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 12px}
.sheet h2{margin:0 0 8px;font-size:17px}
.sheet .meta{display:inline-block;margin:3px 4px 3px 0}
.sheet-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.sheet-actions .btn{flex:1;min-width:120px}
.gmaps-btn{background:#4285f4;color:#fff}
.divider{border:none;border-top:1px solid var(--line);margin:12px 0}

/* ── Form ── */
.form-body{flex:1;overflow-y:auto;padding:14px 16px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.form-body label{font-size:12.5px;color:var(--tx2);margin-top:6px}
.form-hs-info{background:var(--bg3);border-radius:10px;padding:10px;font-size:12.5px;color:var(--tx2);line-height:1.5}
.coord-row{display:flex;gap:8px}
.coord-actions{display:flex;gap:8px;flex-wrap:wrap}
#pick-map-wrap{margin-top:8px}
#pick-map{height:280px;border-radius:10px;border:1px solid var(--line)}
.hint{font-size:11.5px;color:var(--tx2);margin-top:4px}

/* ── Reports / Admin ── */
.reports-head,.admin-stats{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 0;gap:8px}
.reports-head h2,.view h2{font-size:16px;margin:0}
.view h3{font-size:14px;padding:8px 14px 0;margin:0}
.admin-form{display:flex;flex-direction:column;gap:8px;padding:10px 14px}
.admin-stats{flex-wrap:wrap}
.stat-card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;flex:1;min-width:90px;text-align:center}
.stat-card b{display:block;font-size:20px;color:var(--acc)}
.stat-card span{font-size:11px;color:var(--tx2)}
#users-list .card{display:flex;justify-content:space-between;align-items:center}
.user-actions{display:flex;gap:6px}

@media (min-width:768px){
  body{max-width:520px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
  #map{left:0;right:0;margin:0 auto;max-width:520px}
  .bottom-nav{left:auto;right:auto;width:520px}
}