:root{--g9:#0b3a6e;--g8:#0d4f94;--g6:#0a7cc4;--g5:#2bb1e8;--g1:#d6ecfa;--g0:#eef7fd;--bg:#f2f5f9}
html,body{height:100%}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);overflow:hidden;-webkit-font-smoothing:antialiased}
#shell{padding-top:env(safe-area-inset-top,0px)}
.card{background:#fff;border:1px solid rgba(226,232,240,.7);border-radius:1.5rem;box-shadow:0 4px 20px -2px rgba(11,58,110,.07)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.25rem;flex-shrink:0}
.main-wrap{min-height:0}

/* sidebar & navigasi */
.side{width:5rem;margin:.75rem;border-radius:1.5rem;background:var(--g9);flex-direction:column;align-items:center;justify-content:space-between;padding:1.25rem 0;box-shadow:0 20px 40px -14px rgba(11,58,110,.5);flex-shrink:0}
.nav-btn{width:3rem;height:3rem;border-radius:1rem;display:flex;align-items:center;justify-content:center;color:rgba(214,236,250,.65);transition:background .2s,color .2s;cursor:pointer}
.nav-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.nav-btn.active{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 3px 0 0 var(--g5)}
.nav-btn:focus-visible,.btn:focus-visible,.input:focus-visible{outline:2px solid var(--g5);outline-offset:2px}
#bottom-nav{position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));height:4rem;border-radius:1.25rem;background:rgba(11,58,110,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;justify-content:space-around;align-items:center;padding:0 .25rem;z-index:30;box-shadow:0 12px 30px -8px rgba(11,58,110,.6)}
#bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;color:rgba(214,236,250,.65);font-size:.625rem;font-weight:600;padding:.5rem 0;min-height:48px;justify-content:center}
#bottom-nav a i{font-size:1.05rem}
#bottom-nav a.active{color:#fff}
#bottom-nav a.active i{color:var(--g5)}

/* logo */
.logo-wrap{width:5rem;height:5rem;border-radius:9999px;background:#fff;overflow:hidden;box-shadow:0 6px 18px -6px rgba(0,0,0,.35)}
.logo-wrap.sm{width:3rem;height:3rem}.logo-wrap.xs{width:2.25rem;height:2.25rem;box-shadow:none;border:1px solid #e2e8f0}
.logo-wrap img{width:100%;height:100%;object-fit:cover}

/* form */
.lbl{display:block;font-size:.75rem;font-weight:700;color:#475569;margin-bottom:.35rem}
.input{width:100%;min-height:48px;padding:.75rem 1rem;border:1px solid #e2e8f0;border-radius:1rem;background:#f8fafc;font-size:.875rem;font-weight:500}
.input:focus{outline:none;border-color:var(--g5);box-shadow:0 0 0 3px rgba(16,185,129,.2);background:#fff}
.btn{min-height:48px;padding:.75rem 1.25rem;border-radius:1rem;background:var(--g6);color:#fff;font-size:.875rem;font-weight:700;transition:background .2s;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.btn:hover{background:var(--g8)}.btn:disabled{opacity:.6;cursor:wait}
.btn.soft{background:var(--g0);color:var(--g8)}.btn.soft:hover{background:var(--g1)}
.btn.danger{background:#fef2f2;color:#b91c1c}.btn.danger:hover{background:#fee2e2}
.err{background:#fef2f2;color:#b91c1c;border-radius:1rem;padding:.75rem 1rem;font-size:.75rem;font-weight:600}
.note{background:var(--g0);color:var(--g8);border-radius:1rem;padding:.75rem 1rem;font-size:.75rem}

/* komponen */
.login-bg{background:radial-gradient(circle at 20% 10%,#0d4f94,#0b3a6e 45%,#071f3d)}
.login-head{background:linear-gradient(135deg,var(--g9),var(--g8))}
.chip{display:flex;align-items:center;gap:.5rem;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:1rem;padding:.3rem .6rem .3rem .3rem}
.avatar{width:2rem;height:2rem;border-radius:.75rem;background:var(--g6);color:#fff;font-weight:800;font-size:.75rem;display:flex;align-items:center;justify-content:center}
.badge{display:inline-block;padding:.15rem .6rem;border-radius:.5rem;font-size:.65rem;font-weight:700;background:var(--g1);color:var(--g8)}
.kpi-ic{width:3rem;height:3rem;border-radius:1rem;background:var(--g0);color:var(--g6);display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.hero{background:linear-gradient(120deg,var(--g9),var(--g6));color:#fff;border-radius:1.5rem;padding:1.75rem;box-shadow:0 14px 30px -14px rgba(11,58,110,.6)}
.empty-ic{width:3.5rem;height:3.5rem;margin:0 auto .75rem;border-radius:1rem;background:var(--g0);color:var(--g6);display:flex;align-items:center;justify-content:center;font-size:1.4rem}

/* toast */
#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(5.5rem + env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;gap:.5rem;pointer-events:none;width:max-content;max-width:92vw}
.toast{padding:.75rem 1rem;border-radius:1rem;color:#fff;font-size:.75rem;font-weight:700;box-shadow:0 10px 25px -8px rgba(0,0,0,.35);animation:pop .25s ease-out}
.toast.ok{background:var(--g6)}.toast.error{background:#dc2626}
@media(min-width:768px){#toasts{bottom:2rem;left:auto;right:1.5rem;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.anim{animation:pop .3s ease-out}
@media(prefers-reduced-motion:reduce){.anim,.toast{animation:none}}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}

/* Fase 2: modal, tabel, autocomplete */
#modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(2,44,34,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow-y:auto}
#modal.hidden{display:none}
.modal-card{background:#fff;border-radius:1.5rem;padding:1.5rem;width:100%;max-width:34rem;max-height:92vh;overflow-y:auto;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.modal-card.wide{max-width:52rem}
.mh{font-size:1rem;font-weight:800;color:#0f172a;margin-bottom:1rem}
.tbl{width:100%;border-collapse:collapse;font-size:.75rem}
.tbl th{text-align:left;padding:.7rem .9rem;color:#64748b;font-weight:700;border-bottom:1px solid #e2e8f0;white-space:nowrap}
.tbl td{padding:.75rem .9rem;border-bottom:1px solid #f1f5f9;vertical-align:top}
.tbl tbody tr:hover td{background:#f8fafc}
.badge.off{background:#fee2e2;color:#b91c1c}.badge.warn{background:#fef3c7;color:#92400e}
.ibtn{width:2rem;height:2rem;border-radius:.6rem;background:var(--g0);color:var(--g8);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-right:.25rem}
.ibtn:hover{background:var(--g1)}.ibtn.red{background:#fef2f2;color:#b91c1c}.ibtn.red:hover{background:#fee2e2}
.ac-box{position:absolute;left:0;right:0;top:calc(100% + .35rem);background:#fff;border:1px solid #e2e8f0;border-radius:1rem;box-shadow:0 14px 30px -10px rgba(11,58,110,.25);z-index:40;overflow:hidden}
.ac-box.hidden{display:none}
.ac-i{padding:.65rem .9rem;font-size:.75rem;cursor:pointer;border-bottom:1px solid #f1f5f9}.ac-i:hover{background:var(--g0)}.ac-i.muted{color:#64748b;cursor:default}
.drop{border:2px dashed #cbd5e1;border-radius:1rem;padding:1rem;text-align:center;font-size:.75rem}

/* Perbaikan: bar bawah hanya untuk layar HP; tombol demo lebih jelas */
@media(min-width:768px){#bottom-nav{display:none}}
.note .btn.soft{background:#fff;border:1px solid var(--g1)}

/* Fase 3A: jadwal, kalender, laporan, checklist */
.badge.info{background:#e0f2fe;color:#075985}.badge.sub{background:#e0e7ff;color:#3730a3}.badge.mute{background:#f1f5f9;color:#64748b}
.seg{display:inline-flex;background:#f1f5f9;border-radius:1rem;padding:.25rem;gap:.25rem}
.seg button{padding:.5rem 1rem;border-radius:.75rem;font-size:.75rem;font-weight:700;color:#64748b;min-height:40px}
.seg button.on{background:#fff;color:var(--g8);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.chk{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border:1px solid #e2e8f0;border-radius:1rem;font-size:.8rem;cursor:pointer;min-height:44px}
.chk input{width:1.1rem;height:1.1rem;accent-color:var(--g6)}
.cal-h,.cal-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-h span{font-size:.65rem;font-weight:700;color:#64748b;text-align:center;padding:.25rem}
.cal-c{min-height:5.5rem;border:1px solid #f1f5f9;border-radius:.75rem;padding:.3rem;font-size:.7rem;overflow:hidden}
.cal-c.out{background:transparent;border-color:transparent}.cal-c.today{border-color:var(--g5);background:var(--g0)}
.cal-chip{display:block;width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;cursor:pointer;font-size:.6rem}
.info{background:#f8fafc;border-radius:1rem;padding:.65rem .9rem}.info span{display:block;font-size:.65rem;color:#64748b;font-weight:600}.info b{font-size:.8rem;color:#0f172a;word-break:break-word}
.sub{font-size:.8rem;font-weight:800;color:#0f172a;margin-bottom:.6rem}
.bar{height:.5rem;background:#e2e8f0;border-radius:9999px;overflow:hidden}.bar i{display:block;height:100%;background:var(--g5);transition:width .3s}
.mod{display:flex;align-items:center;gap:.65rem;width:100%;text-align:left;padding:.7rem .75rem;border-radius:1rem;font-size:.78rem;font-weight:600;color:#334155;min-height:48px}
.mod i{width:1.1rem;text-align:center;color:var(--g6)}.mod span{flex:1;min-width:0}.mod em{font-style:normal;font-size:.65rem;font-weight:800;color:#94a3b8}.mod em.ok{color:var(--g6)}
.mod:hover{background:#f8fafc}.mod.on{background:var(--g0);color:var(--g8)}.mod[aria-disabled=true]{opacity:.55}
.sav{font-size:.7rem;font-weight:700;color:#64748b;white-space:nowrap}.sav.ok{color:var(--g6)}.sav.err{color:#dc2626}
.cat{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--g8);margin:1.2rem 0 .4rem}
.cl{padding:.8rem;border:1px solid #f1f5f9;border-radius:1rem;margin-bottom:.5rem}.cl.na{background:#f8fafc;opacity:.7}.cl.miss{border-color:#f87171;background:#fef2f2}
.cl .no{min-width:1.5rem;font-size:.75rem;font-weight:800;color:var(--g6)}.cl .q{font-size:.8rem;color:#0f172a;font-weight:500}
.cl .ctl{margin:.6rem 0 0 2.25rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.cl .ctl .input{flex-basis:100%}
.ans{min-height:44px;min-width:5rem;padding:.4rem 1rem;border-radius:.9rem;border:1px solid #e2e8f0;background:#fff;font-size:.8rem;font-weight:700;color:#475569}
.ans.on.pos{background:var(--g6);border-color:var(--g6);color:#fff}.ans.on.neg{background:#dc2626;border-color:#dc2626;color:#fff}.ans:disabled{opacity:.7}
.lnk{font-size:.7rem;font-weight:700;color:var(--g8);text-decoration:underline;min-height:32px}

/* Fase 3B: form modul pengukuran */
.lbl.sm{font-size:.65rem;margin-bottom:.2rem}
.input.bad{border-color:#f87171;background:#fef2f2}
.rowc{border:1px solid #f1f5f9;border-radius:1rem;padding:.7rem;margin-bottom:.5rem}
.rown{font-size:.7rem;font-weight:800;color:var(--g8);margin-bottom:.4rem}
.rowg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
@media(min-width:768px){.rowg{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rowg .input{min-height:42px;padding:.5rem .7rem;font-size:.8rem}
.warn{font-size:.7rem;font-weight:700;color:#b45309;margin-top:.35rem}.warn:empty{display:none}
.unit{border:1px solid #d6ecfa;border-radius:1.25rem;padding:1rem;margin-bottom:1rem;background:#fcfffd}
.unit-h{font-size:.85rem;font-weight:800;color:var(--g8)}

/* Foto */
.ph-g{display:flex;flex-wrap:wrap;gap:.4rem;min-height:.5rem}
.ph-t{position:relative;width:5.5rem;height:5.5rem;border-radius:.8rem;overflow:hidden;background:#f1f5f9}
.ph-t img{width:100%;height:100%;object-fit:cover}.ph-t>button:first-child{display:block;width:100%;height:100%}
.ph-x{position:absolute;top:.2rem;right:.2rem;width:1.5rem;height:1.5rem;border-radius:9999px;background:rgba(220,38,38,.9);color:#fff;font-size:.65rem;display:flex;align-items:center;justify-content:center}
.ph-busy{display:flex;align-items:center;justify-content:center;color:var(--g6)}
.ph-b{flex:1;min-height:44px;cursor:pointer;font-size:.75rem}

/* Fase 3C: dashboard, resume, dokumentasi */
.kpi-ic.warn{background:#fef3c7;color:#b45309}
.hb{display:flex;align-items:center;gap:.6rem;font-size:.75rem;margin:.45rem 0}.hb span{width:9rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#475569}
.hb-t{flex:1;background:#f1f5f9;border-radius:9999px;height:.6rem}.hb-t i{display:block;height:100%;border-radius:9999px;background:var(--g5)}.hb b{width:1.8rem;text-align:right}
.vcols{display:grid;grid-template-columns:repeat(12,1fr);gap:.3rem;height:9rem;align-items:end}.vcols div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;font-size:.6rem;color:#64748b}
.vcols i{display:block;width:100%;background:var(--g5);border-radius:.4rem .4rem 0 0;min-height:2px}.vcols b{font-size:.65rem;color:#0f172a}
.stk{display:flex;height:1rem;border-radius:9999px;overflow:hidden;background:#f1f5f9}.dot{display:inline-block;width:.6rem;height:.6rem;border-radius:9999px;margin-right:.3rem}
.act{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.6rem 0;border-bottom:1px solid #f1f5f9;font-size:.78rem}.act span{flex:1;min-width:8rem;color:#475569}.act em{font-style:normal;font-size:.7rem;color:#94a3b8}
a.act.link:hover{background:#f8fafc}
.prog{list-style:none;margin:.3rem 0 0;padding:0}.prog li{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid #e2e8f0;font-size:.78rem}.prog em{font-style:normal;font-weight:800;color:#b45309}.prog em.ok{color:var(--g6)}
.rowg.one{grid-template-columns:1fr}

/* ===== Perbaikan tampilan: sidebar bisa digulir + berlabel di layar lebar, lencana menu, badge dan tombol seragam ===== */
.side{align-items:stretch;justify-content:flex-start;padding:1rem .6rem;gap:.6rem;overflow:hidden;min-height:0}
.side-top{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-shrink:0;padding-bottom:.4rem}
.side-title{display:none;color:#fff;font-weight:800;font-size:.85rem;line-height:1.2}
.side-nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.2rem 0;scrollbar-width:none}
.side-nav::-webkit-scrollbar{display:none}
.nav-btn{position:relative;flex-shrink:0}.nav-btn i{width:1.25rem;text-align:center}.nav-l{display:none}
.side>.nav-btn{align-self:center}
.nav-b{position:absolute;top:.15rem;right:.15rem;min-width:1.15rem;height:1.15rem;padding:0 .3rem;border-radius:9999px;background:#ef4444;color:#fff;font-size:.62rem;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--g9)}
@media(max-height:780px){.nav-btn{height:2.6rem}}
@media(min-width:1280px){
  .side{width:15rem}.side-title{display:block}.side-nav{align-items:stretch}
  .nav-btn,.side>.nav-btn{width:100%;align-self:stretch;justify-content:flex-start;gap:.8rem;padding:0 1rem;font-size:.82rem;font-weight:600}
  .nav-l{display:inline}.nav-b{position:static;margin-left:auto;box-shadow:none}
}
#bottom-nav a{position:relative}#bottom-nav .nav-b{top:.15rem;right:calc(50% - 1.5rem);box-shadow:0 0 0 2px #0b3a6e}
.badge{display:inline-flex;align-items:center;min-height:1.5rem;padding:.15rem .65rem;font-size:.7rem;line-height:1.1;white-space:nowrap}
.badge-row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:flex-end}
.btn[style*="min-height"]{min-height:40px!important;padding:.45rem 1rem!important;font-size:.8rem!important}

/* ===== Fase 5: submenu Jadwal, tab jenis, lencana di samping label, banner offline ===== */
.seg a{padding:.5rem 1rem;border-radius:.75rem;font-size:.75rem;font-weight:700;color:#64748b;min-height:40px;display:inline-flex;align-items:center}
.seg a.on{background:#fff;color:var(--g8);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.nav-grp{display:none}
.nav-b{min-width:1.3rem;height:1.3rem;font-size:.7rem}
@media(min-width:1280px){
  .nav-grp{display:flex;align-items:center;gap:.8rem;padding:0 1rem;height:2rem;margin-top:.5rem;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:rgba(214,236,250,.55)}
  .nav-grp i{width:1.25rem;text-align:center}
  .nav-sub{padding-left:2.6rem!important;font-size:.8rem!important}
  .nav-b{margin-left:.5rem}
}
#net{position:fixed;top:0;left:0;right:0;z-index:70;background:#b45309;color:#fff;font-size:.75rem;font-weight:700;text-align:center;padding:calc(.35rem + env(safe-area-inset-top,0px)) .75rem .35rem}

/* ===== Menu Jadwal bisa dilipat, tombol lihat password ===== */
button.nav-btn{background:transparent;border:0;font:inherit;cursor:pointer}
.nav-chev{display:none;margin-left:auto;font-size:.65rem;width:auto!important;transition:transform .2s}
.nav-grp-btn[aria-expanded=true] .nav-chev{transform:rotate(180deg)}
.nav-grp-btn .nav-b{margin-left:.5rem}
@media(min-width:1280px){
  .nav-grp-btn .nav-chev{display:inline-block}
  .nav-sub i{display:none}
  .nav-sub{padding-left:3rem!important}
}
.eye{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);width:2.5rem;height:2.5rem;color:#64748b;display:flex;align-items:center;justify-content:center;cursor:pointer}

/* ===== Menu seragam + lencana notifikasi modern ===== */
button.nav-btn{font-family:inherit}
.nav-btn{font-size:.82rem;font-weight:600}
.nav-b{position:absolute;top:.1rem;right:.1rem;min-width:1.45rem;height:1.45rem;padding:0 .45rem;border-radius:9999px;background:linear-gradient(135deg,#fb7185,#e11d48);color:#fff;font-size:.68rem;font-weight:800;line-height:1;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #0b3a6e,0 6px 12px -4px rgba(225,29,72,.7)}
.nav-b::after{content:'';position:absolute;inset:-2px;border-radius:inherit;border:2px solid rgba(251,113,133,.65);animation:navPulse 2.2s ease-out infinite;pointer-events:none}
@keyframes navPulse{0%{transform:scale(.92);opacity:.9}70%,100%{transform:scale(1.45);opacity:0}}
@media(prefers-reduced-motion:reduce){.nav-b::after{animation:none;opacity:0}}
@media(min-width:1280px){.nav-b{position:relative;top:auto;right:auto;margin-left:.6rem}}
#bottom-nav .nav-b{top:.1rem;right:calc(50% - 1.6rem);box-shadow:0 0 0 2px #0b3a6e,0 4px 10px -3px rgba(225,29,72,.7)}

/* Kerangka pemuatan */
.skel{background:linear-gradient(90deg,#eef2f1 25%,#f8fbfa 37%,#eef2f1 63%);background-size:400% 100%;animation:skel 1.4s ease infinite;border-radius:1.25rem}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){.skel{animation:none}}

/* ===== v9: tema korporat PLN Icon Plus (biru), mobile-first ===== */
:root{--g9:#0b3a6e;--g8:#0d4f94;--g6:#0a7cc4;--g5:#2bb1e8;--g1:#d6ecfa;--g0:#eef7fd;--bg:#f2f5f9;--line:#e3e8ef}
.text-emerald-700{color:var(--g8)!important}.bg-emerald-100{background:var(--g1)!important}.bg-emerald-50{background:var(--g0)!important}
.card{border-radius:14px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 16px -8px rgba(11,58,110,.14)}
.topbar{padding:.75rem 1.25rem}#title{letter-spacing:-.01em}
.side{margin:0;border-radius:0;background:linear-gradient(180deg,#0b3a6e,#082c54);box-shadow:none}
.nav-btn{border-radius:10px}.nav-btn.active{background:rgba(43,177,232,.18);box-shadow:inset 3px 0 0 var(--g5)}
.btn{border-radius:10px;min-height:44px;box-shadow:0 1px 2px rgba(11,58,110,.22)}.btn.soft{box-shadow:none;border:1px solid var(--g1)}
.input{border-radius:10px;background:#fff;border-color:#cbd5e1}.input:focus{outline:none;border-color:var(--g6);box-shadow:0 0 0 3px rgba(10,124,196,.16)}
.chip{border-radius:10px;background:#fff}.avatar{border-radius:8px}
.badge{border-radius:6px;letter-spacing:.01em}
.tbl th{background:#f8fafc;text-transform:uppercase;font-size:.65rem;letter-spacing:.06em;color:#475569;border-bottom:1px solid var(--line)}
.tbl td{border-bottom:1px solid #eef2f6}.tbl tbody tr:hover td{background:var(--g0)}
.login-bg{background:linear-gradient(135deg,#0b3a6e,#0a7cc4 70%,#2bb1e8)}
/* navigasi bawah (HP): semua menu tampil, bisa digeser */
#bottom-nav{left:0;right:0;bottom:0;height:calc(3.9rem + env(safe-area-inset-bottom,0px));padding:0 0 env(safe-area-inset-bottom,0px);border-radius:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px -10px rgba(11,58,110,.28);-webkit-backdrop-filter:none;backdrop-filter:none;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
#bottom-nav::-webkit-scrollbar{display:none}
#bottom-nav a,#bottom-nav button{flex:0 0 auto;min-width:4.6rem;min-height:48px;padding:.5rem .4rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;position:relative;scroll-snap-align:center;background:none;color:#64748b;font-size:.62rem;font-weight:700;white-space:nowrap}
#bottom-nav a.active,#bottom-nav a.active i{color:var(--g6)}
#bottom-nav a.active::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--g6)}
#bottom-nav .nav-b{box-shadow:0 0 0 2px #fff}
@media(min-width:768px){#bottom-nav{display:none}}

/* ===== v10: dashboard korporat ===== */
.dh{padding:.25rem .25rem 0}.dh p{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--g6)}
.dh h3{font-size:1.5rem;font-weight:800;color:#0f172a;letter-spacing:-.02em;margin-top:.15rem}.dh span{font-size:.8rem;color:#64748b}
.kpi2{display:flex;align-items:center;gap:.75rem;padding:1rem 1rem 1rem 1.1rem;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(15,23,42,.04);position:relative;overflow:hidden;color:inherit;transition:transform .15s,box-shadow .15s}
.kpi2::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--g6)}.kpi2.warn::before{background:#f59e0b}.kpi2.bad::before{background:#dc2626}
a.kpi2:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(11,58,110,.4)}
.kpi2 b{display:block;font-size:1.6rem;font-weight:800;line-height:1.1;color:#0f172a}.kpi2 span{font-size:.72rem;font-weight:600;color:#64748b;line-height:1.2;display:block}
.kpi2.bad .kpi-ic{background:#fee2e2;color:#b91c1c}
.pct{font-size:2.6rem;font-weight:800;color:var(--g8);line-height:1;letter-spacing:-.03em}
.pbar{height:10px;border-radius:99px;background:var(--g1);margin-top:.75rem;overflow:hidden}.pbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--g6),var(--g5))}

/* ===== v11: halaman Jadwal ===== */
.z-more{display:none}.z-more.open{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;grid-column:span 2}
@media(min-width:768px){.z-more,.z-more.open{display:contents}}
.zc-list{padding:.75rem;display:grid;gap:.6rem}
.zc{border:1px solid var(--line);border-radius:12px;padding:.85rem;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.zc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.zc-id{display:block;font-size:.95rem;font-weight:800;color:var(--g8)}.zc-sub{font-size:.75rem;color:#64748b;margin-top:.1rem}
.zc-meta{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.6rem;font-size:.75rem;color:#475569}.zc-meta i{color:var(--g6);margin-right:.35rem;width:.9rem;text-align:center}
.zc-tek{flex-basis:100%}
.zc-act{display:flex;gap:.4rem;justify-content:flex-end;margin-top:.7rem;padding-top:.6rem;border-top:1px solid #eef2f6}

/* ===== v13: badge notifikasi baru (korporat) ===== */
.nav-b{background:#fff;color:#d6203b;border:0;box-shadow:0 0 0 2px var(--g9),0 4px 10px -4px rgba(43,177,232,.9);font-weight:800;letter-spacing:-.01em}
.nav-b::after{border:2px solid rgba(43,177,232,.7)}
#bottom-nav .nav-b{background:linear-gradient(135deg,#f43f5e,#d6203b);color:#fff;box-shadow:0 0 0 2px #fff,0 4px 10px -3px rgba(214,32,59,.55)}
#bottom-nav .nav-b::after{border-color:rgba(244,63,94,.55)}

/* ===== v14: dashboard lebih tenang + font menu seragam ===== */
button.nav-btn{font-size:.82rem;font-weight:600}
.dh{position:relative;overflow:hidden;background:linear-gradient(120deg,#0b3a6e 0%,#0a6bb0 62%,#2bb1e8 135%);border-radius:18px;padding:1.5rem 1.75rem;box-shadow:0 14px 30px -18px rgba(11,58,110,.6)}
.dh::after{content:"";position:absolute;right:-60px;top:-90px;width:270px;height:270px;border-radius:50%;background:rgba(255,255,255,.08)}
.dh p{color:#9fdcf7}.dh h3{color:#fff;font-size:1.45rem;font-weight:700}.dh span{color:#d6ecfa}
#d-body>*+*{margin-top:1.5rem!important}
.dfil{padding:.75rem!important;gap:.6rem!important;box-shadow:none}.dfil .input,.dfil .btn{min-height:40px;font-size:.8rem}
.att{padding:1.1rem 1.25rem}.att-h{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#64748b;margin-bottom:.5rem}
.att-g{display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem}@media(min-width:1024px){.att-g{grid-template-columns:repeat(4,1fr)}}
.att-i{display:flex;align-items:baseline;gap:.6rem;padding:.65rem .75rem;border-radius:10px;transition:background .15s}.att-i:hover{background:#f8fafc}
.att-i b{font-size:1.5rem;font-weight:700;color:#cbd5e1;min-width:1.6rem}.att-i span{flex:1;font-size:.78rem;font-weight:600;color:#94a3b8}.att-i i{font-size:.62rem;color:#cbd5e1}
.att-i.on b{color:#d97706}.att-i.on.bad b{color:#dc2626}.att-i.on span{color:#0f172a}
.dsum{display:grid;gap:1.25rem;padding:1.5rem}@media(min-width:1024px){.dsum{grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:2.25rem}}
.dsum-g{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem 1rem;align-content:center}@media(min-width:640px){.dsum-g{grid-template-columns:repeat(3,1fr)}}
.dsum-g div{padding-left:.9rem;border-left:2px solid var(--g1)}.dsum-g b{display:block;font-size:1.45rem;font-weight:700;color:#0f172a;line-height:1.1}.dsum-g span{font-size:.75rem;font-weight:600;color:#64748b}
.pct{font-weight:700}

/* ===== v15: brand lockup sidebar ===== */
.side-top{flex-direction:row;justify-content:center;gap:.8rem;padding:.5rem .4rem 1.1rem;margin-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.1)}
@media(min-width:1280px){.side-top{justify-content:flex-start;padding-left:.55rem}}
.brand-mark{display:block;flex:none;width:2.9rem;height:2.9rem;border-radius:50%;background:#fff;overflow:hidden;box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(43,177,232,.4),0 10px 20px -8px rgba(0,0,0,.55)}
.brand-mark img{width:100%;height:100%;object-fit:cover;transform:scale(1.16)}
.side-title{line-height:1}.side-title b{display:block;font-size:.95rem;font-weight:800;letter-spacing:.01em;color:#fff;line-height:1.15}
.side-title small{display:block;margin-top:.3rem;font-size:.56rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7fd3f5}

/* ===== v16: halaman login split-screen ===== */
#login{background:#fff}.lg-grid{min-height:100%;display:grid;grid-template-columns:1fr}
@media(min-width:1024px){.lg-grid{grid-template-columns:minmax(420px,5fr) 7fr}}
.lg-form-pane{display:flex;align-items:center;justify-content:center;padding:2rem 1.5rem;background:#fff;border-top:4px solid var(--g6)}
@media(min-width:1024px){.lg-form-pane{border-top:0}}
.lg-form-in{width:100%;max-width:25rem}
.lg-brand{display:flex;align-items:center;gap:.8rem;margin-bottom:2.25rem}.lg-brand b{display:block;font-weight:800;color:var(--g9);font-size:1rem}
.lg-brand small{display:block;margin-top:.2rem;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--g6)}
.lg-h{font-size:1.75rem;font-weight:800;color:#0f172a;letter-spacing:-.02em}.lg-p{font-size:.85rem;color:#64748b;margin:.35rem 0 1.5rem}
#login .input{min-height:46px;background:#f8fafc}#login .input:focus{background:#fff}#login-btn{min-height:48px;font-size:.9rem}
.lg-foot{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.68rem;color:#94a3b8}.lg-foot img{height:1.8rem;flex:none}
.lg-hero{display:none;position:relative;overflow:hidden;color:#fff;padding:2.5rem 3rem;flex-direction:column;justify-content:center;gap:1.5rem;background:radial-gradient(120% 90% at 80% 5%,#0a7cc4 0,#0b3a6e 55%,#071f3d 100%)}
@media(min-width:1024px){.lg-hero{display:flex}}
.lg-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent)}
.lg-hero>*{position:relative}.lg-art{width:100%;max-width:560px;margin:0 auto}
.lg-copy{max-width:34rem;margin:0 auto;text-align:center}.lg-copy h2{font-size:1.7rem;font-weight:800;line-height:1.25;letter-spacing:-.02em}
.lg-copy p{color:#bfe6fa;margin-top:.6rem;font-size:.92rem}
.lg-chips{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:1.2rem}.lg-chips span{font-size:.72rem;font-weight:700;padding:.4rem .85rem;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.fl{animation:lgf 6s ease-in-out infinite}.f2{animation-delay:-2s}.f3{animation-delay:-4s}.f4{animation-delay:-1s}@keyframes lgf{50%{transform:translateY(-9px)}}
.rip{transform-box:fill-box;transform-origin:center;animation:rip 3.2s ease-out infinite;fill:none;stroke:#7fd3f5}@keyframes rip{0%{transform:scale(.6);opacity:.9}100%{transform:scale(4.4);opacity:0}}
.flow{stroke-dasharray:4 7;animation:flow 1.6s linear infinite}@keyframes flow{to{stroke-dashoffset:-22}}
.bar{transform-box:fill-box;transform-origin:50% 100%;animation:bar 3.4s ease-in-out infinite alternate}@keyframes bar{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
.ringp{animation:ringp 4s ease-in-out infinite alternate}@keyframes ringp{from{stroke-dashoffset:96}to{stroke-dashoffset:11}}
.tw{animation:tw 3s ease-in-out infinite}@keyframes tw{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.fl,.rip,.flow,.bar,.ringp,.tw{animation:none}}

/* ===== v17: login pas satu layar, judul satu baris ===== */
.lg-copy{max-width:none;width:100%}
.lg-copy h2{font-size:clamp(.7rem,1.35vw,1.5rem);font-weight:800;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;line-height:1.3}
.lg-copy p{font-size:.85rem}
@media(min-width:1024px){
  #login{overflow:hidden!important}
  .lg-grid{height:100%;min-height:0}
  .lg-form-pane{overflow-y:auto;scrollbar-width:thin;padding:1.5rem}
  .lg-hero{padding:1.5rem 2.5rem;gap:.75rem;min-height:0}
  .lg-art{flex:1 1 0;min-height:0;max-width:640px}
}

/* ===== Navigasi modul laporan (mobile) ===== */
.rp-back{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem 1rem;border-radius:9999px;background:var(--g0);color:var(--g8);font-size:.8rem;font-weight:800;cursor:pointer}
.rp-back:active{background:var(--g1)}
.rp-back-list{display:none}
.rp-tabs{display:none}
.rp-step{display:none}
.mod-go{font-size:.7rem;color:#94a3b8}
@media(max-width:1023.98px){
  #rp-head.mod .rp-back-main{display:none}
  #rp-head.mod .rp-back-list{display:inline-flex}
  #rp-head.mod .rp-x{display:none!important}
  .rp-tabs:not(.hidden){display:flex;gap:.5rem;position:sticky;top:0;z-index:20;overflow-x:auto;scrollbar-width:none;padding:.55rem .5rem;margin-top:.75rem;background:rgba(242,245,249,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:1rem;box-shadow:0 6px 14px -10px rgba(11,58,110,.45)}
  .rp-tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.5rem .95rem;border-radius:9999px;background:#fff;border:1px solid #e2e8f0;font-size:.78rem;font-weight:700;color:#334155;white-space:nowrap;cursor:pointer}
  .tab i{color:var(--g6)}.tab em{font-style:normal;font-size:.65rem;font-weight:800;opacity:.7}
  .tab.on{background:var(--g6);border-color:var(--g6);color:#fff}.tab.on i{color:#fff}
  .rp-step{display:flex;gap:.6rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e2e8f0}
  .step-b{flex:1;min-width:0;display:flex;align-items:center;gap:.65rem;min-height:58px;padding:.6rem .9rem;border-radius:1rem;background:var(--g0);color:var(--g8);text-align:left;cursor:pointer}
  .step-b.next{background:var(--g6);color:#fff;justify-content:flex-end;text-align:right}
  .step-b span{min-width:0;flex:1}.step-b small{display:block;font-size:.62rem;font-weight:700;opacity:.75}
  .step-b b{display:block;font-size:.78rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .step-b:active{filter:brightness(.92)}
  .mod{min-height:58px;font-size:.85rem;border:1px solid #eef2f7;margin-bottom:.4rem;background:#fff}
}
@media(min-width:1024px){
  .mod-go{display:none}
  .rp-step{display:flex;gap:.6rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #e2e8f0}
  .step-b{flex:1;min-width:0;display:flex;align-items:center;gap:.65rem;min-height:52px;padding:.5rem .9rem;border-radius:1rem;background:var(--g0);color:var(--g8);text-align:left;cursor:pointer}
  .step-b.next{background:var(--g6);color:#fff;justify-content:flex-end;text-align:right}
  .step-b span{min-width:0;flex:1}.step-b small{display:block;font-size:.62rem;font-weight:700;opacity:.75}
  .step-b b{display:block;font-size:.78rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .step-b.only-m{display:none}
}

/* ===== Kolom tanggal dan jam: samakan ukuran dengan kolom lain di HP (terutama iPhone/Safari) ===== */
input[type=date].input,input[type=time].input{-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%;min-width:0;max-width:100%;height:48px;min-height:48px;line-height:1.25;text-align:left;padding:.75rem 2.6rem .75rem 1rem;background-repeat:no-repeat;background-position:right .9rem center;background-size:1.1rem}
input[type=date].input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")}
input[type=time].input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
input[type=date].input::-webkit-date-and-time-value,input[type=time].input::-webkit-date-and-time-value{text-align:left;min-height:1.25em;margin:0;padding:0}
input[type=date].input::-webkit-calendar-picker-indicator,input[type=time].input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

/* ===== Menu bawah HP: bagi rata bila 5 menu atau kurang ===== */
#bottom-nav.fit a{flex:1 1 0;min-width:0;padding-left:0;padding-right:0}
#bottom-nav:not(.fit) a{flex:0 0 4.6rem;width:4.6rem;min-width:4.6rem}

/* ===== Dashboard pelaksana (ringkas) ===== */
.pf{display:block;background:linear-gradient(120deg,var(--g9),var(--g6));color:#fff;border-radius:1.1rem;padding:1.1rem 1.2rem;box-shadow:0 12px 26px -14px rgba(11,58,110,.6)}
.pf small{display:block;font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.pf b{display:block;font-size:1.05rem;font-weight:800;margin:.3rem 0 .15rem;line-height:1.25}
.pf span{display:block;font-size:.78rem;opacity:.9}
.pf em{display:inline-flex;align-items:center;gap:.5rem;margin-top:.85rem;padding:.6rem 1.1rem;min-height:44px;border-radius:9999px;background:#fff;color:var(--g8);font-style:normal;font-size:.82rem;font-weight:800}
.pf.warn{background:linear-gradient(120deg,#9a3412,#ea580c)}
.pf-empty{background:#fff;color:#334155;border:1px solid var(--line);box-shadow:none;text-align:center;padding:1.4rem 1.2rem}
.pf-empty i{font-size:1.6rem;color:var(--g6)}.pf-empty b{color:#0f172a}.pf-empty span{color:#64748b;opacity:1}
.pf-stats{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line);border-radius:1rem;padding:.9rem .4rem}
.pf-stats div{text-align:center}.pf-stats div+div{border-left:1px solid #eef2f7}
.pf-stats b{display:block;font-size:1.4rem;font-weight:800;line-height:1.1;color:#0f172a}.pf-stats span{font-size:.7rem;font-weight:600;color:#64748b}
.pf-alert{display:flex;align-items:center;gap:.6rem;padding:.75rem .95rem;border-radius:.9rem;font-size:.8rem;font-weight:700}
.pf-alert.bad{background:#fee2e2;color:#991b1b}.pf-alert.warn{background:#fef3c7;color:#92400e}
.pf-hi p{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--g6)}.pf-hi h3{font-size:1.15rem;font-weight:800;color:#0f172a;margin-top:.15rem}

/* ===== Halaman verifikasi keaslian laporan ===== */
#verify{background:#f2f5f9}
.vf{max-width:520px;margin:0 auto;padding:1rem 1rem 3rem}
.vf-head{display:flex;align-items:center;gap:.8rem;padding:.8rem 0 1.2rem}
.vf-head img{width:44px;height:44px;border-radius:.8rem;background:#fff;padding:4px;border:1px solid var(--line)}
.vf-head b{display:block;font-size:.95rem;font-weight:800;color:#0f172a}.vf-head small{font-size:.75rem;color:#64748b}
.vf-card{background:#fff;border:1px solid var(--line);border-radius:1.1rem;padding:1.3rem;margin-bottom:1rem;color:#334155;font-size:.9rem}
.vf-card h2{font-size:1.15rem;font-weight:800;color:#0f172a;margin:.5rem 0 .2rem}
.vf-badge{display:inline-block;padding:.35rem .8rem;border-radius:9999px;font-size:.72rem;font-weight:800;letter-spacing:.06em}
.vf-card.ok{border-color:#86efac}.vf-card.ok .vf-badge{background:#dcfce7;color:#166534}
.vf-card.bad{border-color:#fca5a5}.vf-card.bad .vf-badge{background:#fee2e2;color:#991b1b}
.vf-card dl{margin-top:1rem;border-top:1px solid #eef2f7}
.vf-row{display:flex;gap:1rem;justify-content:space-between;padding:.7rem 0;border-bottom:1px solid #eef2f7}
.vf-row dt{font-size:.78rem;color:#64748b;flex:none}.vf-row dd{font-size:.85rem;font-weight:700;color:#0f172a;text-align:right}
.vf-form label{display:block;font-size:.78rem;font-weight:700;color:#475569;margin-bottom:.4rem}
.vf-in{display:flex;gap:.5rem}.vf-in .input{flex:1;min-width:0}
.vf-note{font-size:.75rem;color:#64748b;margin:1rem 0 .6rem;line-height:1.5}
.vf-link{font-size:.8rem;font-weight:700;color:var(--g6)}

/* ===== Mode offline ===== */
#net{cursor:pointer}#net.bad{background:#b91c1c}#net.info{background:#0b6fbf}
.ph-wait{position:absolute;left:.25rem;bottom:.25rem;background:rgba(180,83,9,.92);color:#fff;font-size:.58rem;font-weight:800;border-radius:9999px;padding:.12rem .4rem;pointer-events:none}
.sync-l{margin-bottom:.9rem;border-top:1px solid #eef2f7}.sync-l li{display:flex;justify-content:space-between;padding:.55rem 0;border-bottom:1px solid #eef2f7;font-size:.85rem;color:#334155}
.sync-e{margin-top:.4rem;font-size:.78rem;list-style:disc;padding-left:1.1rem}