/* ================================================================
   SE2026 BPS Kota Bima — app.css
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --or:#EB891A;--or2:#C97010;--olt:#FFF4E6;--omd:#FFD9A0;--opl:#FFFAF4;
  --gn:#16a34a;--gnl:#dcfce7;
  --bl:#2563eb;--bll:#dbeafe;
  --rd:#dc2626;--rdl:#fee2e2;
  --yw:#d97706;--ywl:#fef3c7;
  --s0:#f8fafc;--s1:#f1f5f9;--s2:#e2e8f0;--s3:#cbd5e1;
  --s4:#94a3b8;--s5:#64748b;--s6:#475569;--s7:#334155;
  --s8:#1e293b;--s9:#0f172a;
  --sbw:256px;--tbh:60px;
  --r:12px;--r2:8px;--r3:18px;
  --sh0:0 1px 4px rgba(0,0,0,.05),0 1px 10px rgba(0,0,0,.04);
  --sh1:0 4px 16px rgba(0,0,0,.08);
  --sh2:0 8px 32px rgba(0,0,0,.12);
  --sh3:0 20px 64px rgba(0,0,0,.18);
  --font:'Plus Jakarta Sans',system-ui,sans-serif
}
html,body{height:100%;font-family:var(--font);font-size:14px;line-height:1.5;color:var(--s9);background:#eef2f7}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer}
input,select,textarea{font-family:var(--font)}

/* ── SIDEBAR ──────────────────────────────────────────────── */
.sb{width:var(--sbw);background:linear-gradient(180deg,#C97010 0%,#EB891A 60%,#F5A04A 100%);position:fixed;top:0;left:0;bottom:0;z-index:300;display:flex;flex-direction:column;overflow:hidden;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.sb:hover{overflow-y:auto}
.sb::-webkit-scrollbar{width:3px}.sb::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}

.sb-top{padding:16px 14px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.sb-brand{display:flex;align-items:center;gap:10px}
.sb-logo{width:42px;height:42px;border-radius:10px;background:#ffffff;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:4px}
.sb-logo img{width:34px;height:auto;display:block}
.sb-logo svg{width:22px;height:22px}
.sb-name{font-size:14.5px;font-weight:800;color:#fff;letter-spacing:-.3px;line-height:1.2}
.sb-city{font-size:10px;color:rgba(255,255,255,.65);font-weight:500}

.sb-body{padding:8px;flex:1;overflow-y:auto}.sb-body::-webkit-scrollbar{width:0}
.sb-sep{font-size:9px;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.55);text-transform:uppercase;padding:12px 9px 4px}
.sb-link{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r2);color:rgba(255,255,255,.85);font-size:13px;font-weight:500;transition:all .13s;margin-bottom:1px}
.sb-link:hover{background:rgba(255,255,255,.2);color:#fff}
.sb-link.active{background:rgba(255,255,255,.25);color:#fff;font-weight:700;box-shadow:0 3px 12px rgba(0,0,0,.15)}
.sb-ic{font-size:15px;width:18px;text-align:center;flex-shrink:0}

.sb-grp{margin-bottom:1px}
.sb-grp-hd{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:var(--r2);cursor:pointer;color:rgba(255,255,255,.9);font-size:12.5px;font-weight:600;transition:all .13s;user-select:none}
.sb-grp-hd:hover{background:rgba(255,255,255,.15);color:#fff}
.sb-grp-hd.open{color:#fff}
.sb-grp-l{display:flex;align-items:center;gap:9px}
.sb-chev{font-size:10px;color:rgba(255,255,255,.6);transition:transform .22s;flex-shrink:0}
.sb-grp-hd.open .sb-chev{transform:rotate(180deg);color:#fff}
.sb-grp-body{display:none;padding:2px 0 2px 14px}
.sb-grp-body.open{display:block}
.sb-sub{display:block;padding:6px 11px;border-radius:6px;color:rgba(255,255,255,.8);font-size:12px;font-weight:500;transition:all .13s;margin-bottom:1px}
.sb-sub:hover{background:rgba(255,255,255,.18);color:#fff}
.sb-sub.active{background:rgba(255,255,255,.28);color:#fff;font-weight:700}
.sb-sub::before{content:'·';margin-right:7px;opacity:.5}
.sb-sub.active::before{opacity:1}

.sb-foot{padding:11px 12px;border-top:1px solid rgba(255,255,255,.2);display:flex;align-items:center;gap:9px;flex-shrink:0}
.sb-av{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.sb-info{flex:1;min-width:0;overflow:hidden}
.sb-uname{font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-role{font-size:10px;color:rgba(255,255,255,.65)}
.sb-out{margin-left:auto;color:rgba(255,255,255,.65);font-size:15px;padding:5px;border-radius:6px;transition:all .13s;flex-shrink:0}
.sb-out:hover{color:var(--rd);background:rgba(220,38,38,.15)}

/* ── APP SHELL ────────────────────────────────────────────── */
.app{margin-left:var(--sbw);min-height:100vh;display:flex;flex-direction:column;transition:margin-left .28s}

/* ── TOPBAR ───────────────────────────────────────────────── */
.tb{height:var(--tbh);background:#fff;border-bottom:1px solid var(--s2);display:flex;align-items:center;padding:0 20px;gap:12px;position:sticky;top:0;z-index:200;box-shadow:var(--sh0)}
.tb-burger{background:none;border:none;padding:7px;border-radius:8px;color:var(--s4);display:flex;align-items:center;transition:all .13s}
.tb-burger:hover{background:var(--s1);color:var(--s7)}
.tb-bc{flex:1;font-size:13px;font-weight:600;color:var(--s5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-r{display:flex;align-items:center;gap:10px;flex-shrink:0}
.tb-date{font-size:11.5px;color:var(--s4);font-weight:500}
.tb-pill{display:flex;align-items:center;gap:7px;background:var(--s0);border:1px solid var(--s2);border-radius:24px;padding:4px 12px 4px 5px}
.tb-av{width:27px;height:27px;border-radius:50%;background:var(--or);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.tb-uname{font-size:12px;font-weight:600;color:var(--s7)}
.tb-out{font-size:11px;font-weight:600;color:var(--s4);border-left:1px solid var(--s2);padding-left:8px;margin-left:4px;transition:color .13s}
.tb-out:hover{color:var(--rd)}

/* ── CONTENT ─────────────────────────────────────────────── */
.pg{flex:1;padding:22px;overflow-x:hidden}

/* ── PAGE HEADER ─────────────────────────────────────────── */
.pg-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:14px}
.pg-ey{font-size:11px;font-weight:700;color:var(--or);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px}
.pg-title{font-size:20px;font-weight:800;color:var(--s9)}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{background:linear-gradient(135deg,#0d1b2a 0%,#142f50 55%,#0d2235 100%);border-radius:var(--r3);padding:30px 36px;display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:20px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-80px;right:-50px;width:240px;height:240px;background:radial-gradient(circle,rgba(235,137,26,.15) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.hero-l{z-index:1;flex:1}
.hero-tag{display:inline-flex;align-items:center;background:rgba(235,137,26,.13);border:1px solid rgba(235,137,26,.22);color:var(--or);font-size:10px;font-weight:700;padding:3px 11px;border-radius:20px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.hero-h1{font-size:24px;font-weight:800;color:#fff;line-height:1.2;margin-bottom:9px}
.hero-or{color:var(--or)}
.hero-p{font-size:13px;color:rgba(255,255,255,.5);line-height:1.75;margin-bottom:16px;max-width:460px}
.hero-tags{display:flex;gap:7px;flex-wrap:wrap}
.hero-tags span{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.65);font-size:11px;font-weight:600;padding:3px 11px;border-radius:20px}
.hero-r{z-index:1;flex-shrink:0}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sc{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:14px;text-align:center;color:#fff;min-width:104px;transition:transform .18s}
.sc:hover{transform:translateY(-2px);background:rgba(255,255,255,.1)}
.sc.g{background:rgba(22,163,74,.17);border-color:rgba(22,163,74,.24)}
.sc.b{background:rgba(37,99,235,.17);border-color:rgba(37,99,235,.24)}
.sc.r{background:rgba(220,38,38,.17);border-color:rgba(220,38,38,.24)}
.sc-i{font-size:18px;margin-bottom:4px}
.sc-n{font-size:26px;font-weight:800;line-height:1}
.sc-l{font-size:9.5px;font-weight:600;opacity:.55;margin-top:3px}

/* ── BERANDA GRID ─────────────────────────────────────────── */
.brd-grid{display:grid;grid-template-columns:1fr 318px;gap:16px;align-items:start}
.brd-side{display:flex;flex-direction:column;gap:13px}

/* ── PANEL ─────────────────────────────────────────────────── */
.panel{background:#fff;border-radius:var(--r);box-shadow:var(--sh0);border:1px solid var(--s2);overflow:hidden}
.ph{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--s1);background:var(--s0)}
.ph-t{font-size:13px;font-weight:700;color:var(--s8)}

/* ── CALENDAR ─────────────────────────────────────────────── */
.cal-nav{display:flex;align-items:center;gap:4px}
.cal-btn{width:26px;height:26px;border-radius:6px;background:var(--s1);border:none;font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--s5);transition:all .13s}
.cal-btn:hover{background:var(--or);color:#fff}
.cal-lbl{font-size:12px;font-weight:700;min-width:110px;text-align:center;color:var(--s8)}
.btn-today{background:var(--olt);color:var(--or);border:1px solid var(--omd);padding:3px 8px;border-radius:6px;font-size:11px;font-weight:700;transition:all .13s}
.btn-today:hover{background:var(--or);color:#fff;border-color:var(--or)}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);padding:9px 10px 3px;gap:2px}
.cal-dow span{text-align:center;font-size:10px;font-weight:700;color:var(--s4)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:3px 8px 11px}
.cal-cell{display:flex;flex-direction:column;align-items:center;border-radius:7px;font-size:11.5px;font-weight:500;color:var(--s6);padding:4px 2px 3px;min-height:36px;transition:background .13s}
.cal-cell.emp{opacity:0}
.cal-cell:not(.emp):hover{background:var(--s1)}
.cal-cell.tod{background:var(--or);color:#fff;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.cal-cell.tod:hover{background:var(--or2)}
.cdots{display:flex;gap:2px;margin-top:2px}
.cdot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.cal-leg{padding:8px 14px 11px;display:flex;gap:12px;flex-wrap:wrap;border-top:1px solid var(--s1)}
.cal-leg span{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--s4);font-weight:500}
.cal-leg i{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}

/* ── JADWAL LIST ─────────────────────────────────────────── */
.btn-add{background:var(--or);color:#fff;border:none;padding:5px 11px;border-radius:6px;font-size:11.5px;font-weight:700;transition:background .13s}
.btn-add:hover{background:var(--or2)}
.jd-list{padding:9px 11px;display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto}
.jd-list::-webkit-scrollbar{width:3px}.jd-list::-webkit-scrollbar-thumb{background:var(--s2);border-radius:2px}
.list-empty{padding:18px;text-align:center;font-size:12px;color:var(--s4)}
.jd-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--s0);border-radius:8px;border-left:3px solid var(--or);transition:all .13s}
.jd-item:hover{background:#fff;box-shadow:var(--sh0)}
.jd-item.pelatihan{border-left-color:var(--gn)}
.jd-item.rapat{border-left-color:var(--bl)}
.jd-item.deadline{border-left-color:var(--rd)}
.jd-dot{width:6px;height:6px;border-radius:50%;background:var(--or);flex-shrink:0}
.jd-item.pelatihan .jd-dot{background:var(--gn)}.jd-item.rapat .jd-dot{background:var(--bl)}.jd-item.deadline .jd-dot{background:var(--rd)}
.jd-bd{flex:1;min-width:0}
.jd-nm{font-size:12px;font-weight:700;color:var(--s8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jd-dt{font-size:10.5px;color:var(--s4);margin-top:1px}
.jd-st{font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:8px;white-space:nowrap;flex-shrink:0}
.jd-st.belum{background:var(--ywl);color:var(--yw)}.jd-st.berjalan{background:var(--bll);color:var(--bl)}.jd-st.selesai{background:var(--gnl);color:var(--gn)}
.ic-btn{background:none;border:1px solid transparent;border-radius:6px;padding:3px 5px;font-size:12px;transition:all .13s;flex-shrink:0}
.ic-btn:hover{background:var(--ywl);border-color:var(--yw)}
.ic-btn.r:hover{background:var(--rdl);border-color:var(--rd)}

/* ── DEADLINE ─────────────────────────────────────────────── */
.bdg-red{background:var(--rd);color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:8px}
.dl-list{padding:9px 11px;display:flex;flex-direction:column;gap:7px}
.dl-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;background:#fff8f5;border:1px solid #ffd9b7;border-radius:9px}
.dl-nm{font-size:12.5px;font-weight:700;color:var(--s8);margin-bottom:2px}
.dl-dt{font-size:11px;color:var(--or);font-weight:600}
.dl-sisa{font-size:10px;font-weight:700;color:#fff;background:var(--rd);padding:3px 8px;border-radius:8px;white-space:nowrap}

/* ── PROGRESS ─────────────────────────────────────────────── */
.pg-list{padding:12px 15px;display:flex;flex-direction:column;gap:13px}
.pg-lbl{font-size:11.5px;font-weight:600;color:var(--s7);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-row{display:flex;align-items:center;gap:8px}
.pg-bar{flex:1;height:5px;background:var(--s2);border-radius:3px;overflow:hidden}
.pg-fill{height:100%;background:linear-gradient(90deg,var(--or),#ff9f45);border-radius:3px;transition:width .6s ease}
.pg-val{font-size:11.5px;font-weight:700;color:var(--or);min-width:36px;text-align:right}
.pg-sub{font-size:10px;color:var(--s4);margin-top:2px}

/* ── TABS ─────────────────────────────────────────────────── */
.tabs{display:flex;gap:3px;background:#fff;border:1px solid var(--s2);border-radius:10px;padding:4px;margin-bottom:18px;width:fit-content;box-shadow:var(--sh0)}
.tab-btn{padding:7px 18px;border-radius:7px;font-size:13px;font-weight:600;color:var(--s4);transition:all .13s}
.tab-btn:hover{color:var(--s8);background:var(--s1)}
.tab-btn.active{background:var(--or);color:#fff;box-shadow:0 2px 8px rgba(235,137,26,.25)}

/* ── DOC CARDS ────────────────────────────────────────────── */
.dc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.empty-st{text-align:center;padding:60px 20px;color:var(--s4);background:#fff;border-radius:var(--r);border:2px dashed var(--s2)}
.empty-ic{font-size:48px;margin-bottom:10px;opacity:.5}
.empty-tt{font-size:16px;font-weight:700;margin-bottom:5px;color:var(--s5)}
.empty-ht{font-size:13px;color:var(--s4)}
.dc{background:#fff;border-radius:var(--r);box-shadow:var(--sh0);border:1px solid var(--s2);overflow:hidden;position:relative;transition:all .18s;cursor:pointer}
.dc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--or)}
.dc.lp::before{background:var(--bl)}.dc.la::before{background:var(--gn)}
.dc:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.dc-top{padding:12px 14px 0;display:flex;align-items:center;justify-content:space-between;gap:8px}
.dc-bdg{font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px;background:var(--olt);color:var(--or)}
.dc-bdg.lp{background:var(--bll);color:var(--bl)}.dc-bdg.la{background:var(--gnl);color:var(--gn)}
.dc-dt{font-size:10.5px;color:var(--s4);font-weight:500}
.dc-body{padding:8px 14px 12px}
.dc-tt{font-size:13.5px;font-weight:800;margin-bottom:4px;color:var(--s9);line-height:1.35}
.dc-sub{font-size:12px;color:var(--s5);line-height:1.6}
.dc-ft{padding:8px 12px;border-top:1px solid var(--s1);display:flex;align-items:center;gap:5px;flex-wrap:wrap;background:var(--s0)}
.dc-acts{margin-left:auto;display:flex;align-items:center;gap:4px}
.dc-view{background:none;border:1px solid var(--s2);border-radius:6px;padding:3px 9px;font-size:11px;font-weight:600;color:var(--s5);transition:all .13s}
.dc-view:hover{background:var(--or);color:#fff;border-color:var(--or)}
.dc-edit{background:none;border:1px solid var(--s2);border-radius:6px;padding:3px 6px;font-size:12px;transition:all .13s}
.dc-edit:hover{background:var(--ywl);border-color:var(--yw)}
.dc-del{background:none;border:1px solid var(--s2);border-radius:6px;padding:3px 6px;font-size:12px;transition:all .13s}
.dc-del:hover{background:var(--rdl);border-color:var(--rd)}

/* ── CHIPS ────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px}
.cfile{background:var(--olt);color:var(--or)}
.clink{background:var(--bll);color:var(--bl)}
.chips-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-primary{background:var(--or);color:#fff;border:none;padding:9px 20px;border-radius:var(--r2);font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:6px;transition:all .15s;cursor:pointer}
.btn-primary:hover{background:var(--or2);transform:translateY(-1px);box-shadow:0 4px 14px rgba(235,137,26,.28)}
.btn-ghost{background:var(--s1);color:var(--s7);border:none;padding:9px 18px;border-radius:var(--r2);font-size:13.5px;font-weight:600;transition:all .13s;cursor:pointer}
.btn-ghost:hover{background:var(--s2)}
.btn-save{background:var(--or);color:#fff;border:none;padding:9px 22px;border-radius:var(--r2);font-size:13.5px;font-weight:700;transition:all .15s;cursor:pointer}
.btn-save:hover{background:var(--or2)}
.btn-save:disabled{opacity:.5;cursor:not-allowed}
.btn-del{background:var(--rd);color:#fff;border:none;padding:9px 18px;border-radius:var(--r2);font-size:13.5px;font-weight:700;transition:all .13s;cursor:pointer}
.btn-del:hover{background:#b91c1c}
.btn-xs{background:var(--s1);color:var(--s7);border:none;padding:5px 9px;border-radius:6px;font-size:11px;font-weight:600;transition:all .13s;margin-right:3px;cursor:pointer}
.btn-xs:hover{background:var(--olt);color:var(--or)}
.btn-xs.d:hover{background:var(--rdl);color:var(--rd)}

/* ── MODAL ────────────────────────────────────────────────── */
/* KRITIS: .md-ov hidden by default, show with class "open" */
.md-ov{
  display:none;             /* hidden default */
  position:fixed;inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(6px);
  z-index:500;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.md-ov.open{
  display:flex;             /* tampil saat open */
}
.md{
  background:#fff;border-radius:var(--r3);width:100%;max-width:520px;max-height:92vh;
  overflow-y:auto;box-shadow:var(--sh3);
  animation:mdIn .22s cubic-bezier(.4,0,.2,1);
}
@keyframes mdIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.md.md-lg{max-width:640px}
.md.md-sm{max-width:390px}
.md::-webkit-scrollbar{width:4px}.md::-webkit-scrollbar-thumb{background:var(--s2);border-radius:2px}
.md-hd{padding:16px 20px;border-bottom:1px solid var(--s1);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1}
.md-hd h3{font-size:15px;font-weight:800;color:var(--s9)}
.md-x{width:28px;height:28px;border-radius:7px;background:var(--s1);border:none;font-size:15px;display:flex;align-items:center;justify-content:center;color:var(--s5);transition:all .13s;cursor:pointer}
.md-x:hover{background:var(--rdl);color:var(--rd)}
.md-bd{padding:20px}
.md-ft{padding:12px 20px;border-top:1px solid var(--s1);display:flex;gap:8px;justify-content:flex-end;position:sticky;bottom:0;background:#fff}

/* ── FORM ─────────────────────────────────────────────────── */
.fld{margin-bottom:14px}
.fld label{display:block;font-size:12px;font-weight:700;color:var(--s7);margin-bottom:5px}
.fi{width:100%;padding:9px 12px;border:1.5px solid var(--s2);border-radius:var(--r2);font-size:13.5px;color:var(--s9);outline:none;transition:all .13s;background:#fff}
.fi:focus{border-color:var(--or);box-shadow:0 0 0 3px rgba(235,137,26,.1)}
textarea.fi{resize:vertical;min-height:84px}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.req{color:var(--rd);margin-left:2px}
.req-note{color:var(--s4);font-size:11px;font-weight:400}
.muted{color:var(--s4);font-weight:400}
.muted-sm{color:var(--s4);font-size:12px}

/* ── UPLOAD ZONE ─────────────────────────────────────────── */
.up-zone{border:2px dashed var(--s3);border-radius:10px;padding:20px;text-align:center;cursor:pointer;transition:all .18s;background:var(--s0);margin-bottom:0}
.up-zone:hover{border-color:var(--or);background:var(--opl)}
.up-ic{font-size:28px;margin-bottom:5px}
.up-txt{font-size:13px;font-weight:600;color:var(--s7);margin-bottom:2px}
.up-hint{font-size:11px;color:var(--s4)}
.or-line{text-align:center;font-size:11px;font-weight:600;color:var(--s3);margin:10px 0;position:relative}
.or-line::before,.or-line::after{content:'';position:absolute;top:50%;width:44%;height:1px;background:var(--s2)}
.or-line::before{left:0}.or-line::after{right:0}

/* ── DETAIL ─────────────────────────────────────────────── */
.det-row{margin-bottom:12px}
.det-lbl{font-size:10px;font-weight:700;color:var(--s4);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}
.det-val{font-size:13.5px;color:var(--s8);line-height:1.65}
.prw{white-space:pre-line;font-size:13.5px;color:var(--s8);line-height:1.65}
.det-hr{border:none;border-top:1px solid var(--s1);margin:13px 0}

/* ── TABLE ────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{background:var(--s0);padding:10px 14px;font-size:10px;font-weight:700;color:var(--s5);text-align:left;text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--s2)}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--s1);font-size:13px}
.tbl tr:hover td{background:var(--opl)}
.tbl code{background:var(--s1);padding:2px 7px;border-radius:4px;font-size:12px;font-weight:600}
.br{font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px}
.br.admin{background:var(--olt);color:var(--or)}.br.bidang{background:var(--bll);color:var(--bl)}
.ba{font-size:10px;font-weight:700;padding:2px 8px;border-radius:8px}
.ba.on{background:var(--gnl);color:var(--gn)}.ba.off{background:var(--s1);color:var(--s4)}

/* ── ALERTS ─────────────────────────────────────────────── */
.al-err{background:var(--rdl);color:var(--rd);border-radius:9px;padding:10px 14px;font-size:13px;font-weight:600;margin-bottom:14px}
.al-ok{background:var(--gnl);color:var(--gn);border-radius:9px;padding:10px 14px;font-size:13px;font-weight:600;margin-bottom:14px}
.del-msg{font-size:14px;line-height:1.65;color:var(--s7)}
.del-msg small{color:var(--s4);font-size:12px}

/* ── TOAST ────────────────────────────────────────────────── */
.toast{position:fixed;bottom:22px;right:22px;background:var(--s9);color:#fff;padding:11px 18px;border-radius:10px;font-size:13.5px;font-weight:600;max-width:320px;opacity:0;transform:translateY(60px);transition:all .3s cubic-bezier(.4,0,.2,1);z-index:9999;pointer-events:none;box-shadow:var(--sh3)}
.toast.show{opacity:1;transform:translateY(0)}
.toast.terr{background:var(--rd)}.toast.tok{background:var(--gn)}

/* ── LOGIN ────────────────────────────────────────────────── */
.login-body{background:linear-gradient(135deg,#0d1b2a 0%,#173050 100%);display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-wrap{width:100%;max-width:400px;padding:20px}
.login-card{background:#fff;border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.28);padding:36px}
.lc-logo{text-align:center;margin-bottom:22px}
.lc-logo-ring{width:70px;height:70px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px;padding:8px}
.lc-logo-ring svg{width:30px;height:30px}
.lc-logo-name{font-size:20px;font-weight:800;color:var(--or)}
.lc-logo-sub{font-size:11.5px;color:var(--s4);font-weight:500}
.lc-heading{font-size:17px;font-weight:800;text-align:center;color:var(--s8);margin-bottom:3px}
.lc-sub{font-size:12.5px;color:var(--s4);text-align:center;margin-bottom:20px}
.lc-err{background:var(--rdl);color:var(--rd);border-radius:8px;padding:9px 12px;font-size:13px;font-weight:600;margin-bottom:14px}
.lc-field{margin-bottom:14px}
.lc-field label{display:block;font-size:12px;font-weight:700;color:var(--s7);margin-bottom:5px}
.lc-input{width:100%;padding:10px 13px;border:1.5px solid var(--s2);border-radius:9px;font-size:14px;outline:none;transition:all .13s;font-family:var(--font)}
.lc-input:focus{border-color:var(--or);box-shadow:0 0 0 3px rgba(235,137,26,.1)}
.lc-submit{width:100%;background:var(--or);color:#fff;border:none;padding:12px;border-radius:9px;font-size:14.5px;font-weight:700;transition:all .15s;margin-top:6px;cursor:pointer;font-family:var(--font)}
.lc-submit:hover{background:var(--or2);box-shadow:0 6px 20px rgba(235,137,26,.32)}
.lc-hint{margin-top:14px;padding:9px 13px;background:var(--s0);border-radius:8px;font-size:11.5px;color:var(--s4);text-align:center;border:1px solid var(--s2)}
.lc-hint strong{color:var(--or)}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:1080px){.brd-grid{grid-template-columns:1fr}}
@media(max-width:960px){
  .sb{transform:translateX(-100%)}
  .sb.open{transform:translateX(0);box-shadow:var(--sh3)}
  .app{margin-left:0}
  .hero-r{display:none}
}
@media(max-width:640px){
  .pg{padding:13px}
  .hero{padding:18px;flex-direction:column}
  .hero-h1{font-size:19px}
  .fld-row{grid-template-columns:1fr}
  .tabs{overflow-x:auto}
  .tab-btn{font-size:11.5px;padding:6px 12px;white-space:nowrap}
}

/* ── FILTER BULAN ──────────────────────────────────────────── */
.filter-bar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap;padding:12px 16px;background:#fff;border-radius:10px;border:1px solid var(--s2);box-shadow:var(--sh0)}
.filter-lbl{font-size:12px;font-weight:700;color:var(--s5);flex-shrink:0}
.filter-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.fc{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;color:var(--s5);background:var(--s1);border:1.5px solid var(--s2);transition:all .13s;cursor:pointer;text-decoration:none}
.fc:hover{background:var(--olt);color:var(--or);border-color:var(--omd)}
.fc.on{background:var(--or);color:#fff;border-color:var(--or);box-shadow:0 2px 8px rgba(244,121,32,.25)}
.fc.on .fc-n{background:rgba(255,255,255,.3);color:#fff}
.fc-n{background:var(--s2);color:var(--s6);font-size:10px;font-weight:800;padding:1px 6px;border-radius:8px;line-height:1.4}
.filter-reset{font-size:11.5px;font-weight:700;color:var(--s4);padding:5px 10px;border-radius:8px;background:var(--rdl);color:var(--rd);transition:all .13s;text-decoration:none;flex-shrink:0}
.filter-reset:hover{background:var(--rd);color:#fff}

/* ── TOMBOL EXCEL ─────────────────────────────────────────── */
.btn-excel{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#217346;border:1.5px solid #217346;padding:8px 16px;border-radius:var(--r2);font-size:13px;font-weight:700;transition:all .15s;text-decoration:none;cursor:pointer}
.btn-excel:hover{background:#217346;color:#fff;box-shadow:0 4px 12px rgba(33,115,70,.22)}