/* Dashboard web (responsif + mode gelap). Komponen dasar ada di components.css */
html{background:#f1f5f9}
body.web{margin:0;font:15px/1.4 Inter,"Segoe UI","Noto Sans",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--ink);
  background:#f4f8fb url(background.png) right bottom/cover fixed no-repeat;-webkit-text-size-adjust:100%}
@media (prefers-color-scheme: dark){
  html{background:#0b1622}
  body.web{--ink:#e8f0f7;--mute:#9db0c3;--line:#233a52;--teal:#3cc4d4;--teal2:rgba(60,196,212,.16);--blue:#6db0ea;--pos:#46d487;--neg:#ff7a70;
    --surf:rgba(20,36,52,.9);--card:#17293b;--head:#1f3c5a;--headink:#e8f0f7;--track:#27415c;--posbg:rgba(70,212,135,.16);--negbg:rgba(255,122,112,.16);
    --totbg:rgba(60,196,212,.13);--pin:#ff5147;background:#0b1622}
  .web .brand .logo{background:#fff;border-radius:10px;padding:5px 9px}
  .web .lines line{stroke:#5d7690}
}
.web .page{max-width:1760px;margin:0 auto;padding:18px clamp(12px,2vw,28px) 26px}

/* header */
.wtop{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:16px;flex:1 1 380px;min-width:0}
.brand .logo{height:46px;width:auto;flex:none}
.web h1{margin:0;font-size:clamp(20px,2.1vw,32px);font-weight:300;letter-spacing:.2px;line-height:1.15}
.web h1 b{font-weight:800}
.brand p{margin:3px 0 0;color:var(--mute);font-size:13px}
.datepill{background:#0f2742;color:#fff;border-radius:14px;padding:8px 20px;display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.datepill small{font-size:10px;letter-spacing:2.2px;color:#8fd6df;font-weight:700}
.datepill b{font-size:clamp(18px,1.8vw,24px);font-weight:700}
@media (prefers-color-scheme: dark){.datepill{background:#1f3c5a}}
.tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:0}
.fld{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:700;color:var(--mute);letter-spacing:.4px;text-transform:uppercase}
.fld select,.fld input{font:inherit;font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-height:40px;min-width:0}
.fld select option:disabled{color:#9aa8b6}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:10px;background:#0f2742;color:#fff;
  text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--blue);border:1px solid var(--line)}
@media (prefers-color-scheme: dark){.btn{background:var(--teal);color:#06202a}}
.btn:hover{opacity:.9}
.alert{background:#fff4d6;color:#6b4b00;border:1px solid #f0d58a;border-radius:10px;padding:9px 14px;margin-bottom:14px;font-size:14px}
.alert.err{background:#fde8e6;color:#8a1b13;border-color:#f3b3ad}
.src{margin:14px 0 0;color:var(--mute);font-size:12px}

/* grid utama */
.wgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start}
.web .panel{padding:14px 18px;border-radius:16px}
.web .mapcol{padding:12px 14px}
.web .panel h2{font-size:13px;margin-bottom:10px}
.web .panel h2 span{font-size:12px}
.web .rightcol{gap:14px}
.web .kpis,.web .two{gap:14px}
.web .kpi{padding:16px 18px;border-radius:16px;gap:14px}
.web .kpi small{font-size:11px}
.web .kpi b{font-size:clamp(26px,2.4vw,36px)}
.web .kpi.gauge b{font-size:clamp(22px,1.9vw,30px)}
.web .ic{width:50px;height:50px;border-radius:14px}.web .ic svg{width:26px;height:26px}
.web .ring{width:62px;height:62px}
.web .pill{font-size:12px;padding:3px 10px}
.web .vs{display:block;font-size:11px;color:var(--mute);margin-top:3px}
.web .tbl{font-size:clamp(11.5px,.9vw,14px)}
.web .tbl thead th{font-size:11px;padding:6px 0}
.web .tbl td,.web .tbl tbody th{padding:10px 3px}
.web .tbl td.p{padding-right:5px}
.web .tbl tbody th{position:sticky;left:0;z-index:1}
.web .tbl tr.tot th{background:var(--card);background-image:linear-gradient(var(--totbg),var(--totbg))}
.web .accmain b{font-size:clamp(24px,2vw,32px)}
.web .mini{font-size:12px}
.web .refs small{font-size:11px}.web .refs b{font-size:clamp(13px,1.1vw,16px)}
.web .trio small{font-size:11px}.web .trio b{font-size:clamp(22px,2vw,30px)}
.web .facts{gap:10px 14px;padding-top:12px;margin-top:14px}
.web .facts span{font-size:12px}.web .facts b{font-size:14px}
.web .facts svg{width:26px;height:26px}
.web .card.air{font-size:1.95cqw}.web .card.air small{font-size:1.8cqw}

/* tablet */
@media (max-width:1100px){
  .wgrid{grid-template-columns:1fr}
  .web .mapcol{max-width:640px;width:100%;margin:0 auto}
  .datepill{order:2}.tools{order:3;width:100%}
}
@media (max-width:1560px){.web .kpis{grid-template-columns:1fr 1fr}}

/* mobile: peta hanya pin, kartu fasilitas jadi daftar */
@media (max-width:700px){
  .web .page{padding:12px 12px 22px}
  .wtop{gap:12px}
  .brand{flex-direction:column;align-items:flex-start;gap:10px;flex-basis:100%}
  .brand .logo{height:38px}
  .datepill{width:100%;flex-direction:row;align-items:baseline;justify-content:space-between;padding:10px 16px}
  .tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
  .fld{min-width:0}.fld select,.fld input{width:100%}
  .web .panel{padding:12px 14px}
  .web .mapcol{padding:10px}
  .mapblock{margin-bottom:calc(var(--crop) * -1)}
  .mapblock .card.air,.mapblock .lines{display:none}
  .web .pin{width:10cqw;height:13cqw}.web .pin i{font-size:3cqw}
  .airlist{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
  .airlist .ac{border:1px solid var(--line);border-radius:12px;padding:8px 10px;background:var(--card);display:flex;flex-direction:column;gap:1px;min-width:0}
  .airlist b{color:var(--teal);font-size:14px;font-weight:800}
  .airlist small{color:var(--mute);font-size:11px;margin-bottom:3px}
  .airlist span{font-size:11.5px;line-height:1.3}
  .web .facts{grid-template-columns:1fr 1fr}
  .web .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .web .kpi{padding:12px;gap:10px;flex-direction:column;align-items:flex-start}
  .web .kpi.gauge{flex-direction:row;align-items:center}
  .web .ic{width:40px;height:40px}.web .ic svg{width:21px;height:21px}
  .web .kpi b{font-size:26px}
  .web .ring{width:50px;height:50px}
  .web .two{grid-template-columns:1fr}
  .web .tbl{min-width:760px;font-size:12px}
  .scroll{margin:0 -4px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .web .refs{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .web .trio b{font-size:22px}
}
@media (max-width:380px){.web .facts{grid-template-columns:1fr}.web .kpis{grid-template-columns:1fr}.airlist{grid-template-columns:1fr}}

/* halaman login */
body.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.logbox{width:100%;max-width:400px;background:var(--surf);border:1px solid var(--line);border-radius:20px;padding:30px 28px;box-shadow:0 20px 50px -20px rgba(15,39,66,.35)}
.logbox .logo{height:48px;width:auto;display:block;margin-bottom:18px}
.logbox h1{font-size:24px}
.logbox .sub{margin:6px 0 18px;color:var(--mute);font-size:14px}
.logbox form{display:flex;flex-direction:column;gap:14px}
.logbox .fld input{width:100%;min-height:44px;font-size:16px}
.logbox .pw{position:relative;display:block;text-transform:none;letter-spacing:0}
.logbox .pw input{padding-right:84px}
.logbox .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--blue);font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:8px}
.btn.full{width:100%;min-height:46px;border:0;font:inherit;font-weight:800;font-size:15px;cursor:pointer;margin-top:4px}
.alert.ok{background:#e2f5ea;color:#0b6b3a;border-color:#b6e2c8}
@media (prefers-color-scheme: dark){.logbox .logo{background:#fff;border-radius:10px;padding:5px 9px}}

@media (max-width:700px){.tools .btn.out{grid-column:1 / -1}}