/* admin.css — panel admin (desktop-first, responsif) */
.adm{display:grid; grid-template-columns:264px 1fr; min-height:100vh; background:var(--bg)}
.adm-side{background:linear-gradient(180deg,#0B5631 0%,#7A2E02 55%,#08411F 100%); color:#fff; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:50}
.as-brand{padding:20px 18px 16px; display:flex; flex-direction:column; gap:9px; border-bottom:1px solid rgba(255,255,255,.1)}
.as-logo{background:#fff; border-radius:13px; padding:9px 11px; align-self:flex-start; box-shadow:0 6px 16px rgba(0,0,0,.18)}
.as-logo img{height:32px; width:auto; object-fit:contain}
.as-brand small{font-size:11px; color:#9FD3B6; letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.as-nav{flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:4px}
.as-item{display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px; color:#D3EBDD; font-size:13.5px; font-weight:550; text-align:left; transition:.15s}
.as-item:hover{background:rgba(255,255,255,.1); color:#fff}
.as-item.on{background:#fff; color:var(--hijau-tua); font-weight:700; box-shadow:0 6px 16px rgba(0,0,0,.18)}
.as-foot{padding:14px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; gap:10px}
.as-user{display:flex; align-items:center; gap:10px; font-size:12.5px}
.as-user .av{background:rgba(255,255,255,.16)}
.as-user b{display:block; font-size:13px}
.as-user i{font-style:normal; color:#9FD3B6; font-size:11.5px}
.as-out{display:flex; align-items:center; justify-content:center; gap:8px; padding:10px; border-radius:11px; background:rgba(255,255,255,.12); color:#fff; font-size:13px; font-weight:600}
.as-out:hover{background:rgba(220,38,38,.85)}
.adm-main{display:flex; flex-direction:column; min-width:0}
.adm-top{display:flex; align-items:center; gap:14px; padding:14px 22px; background:#fff; border-bottom:1px solid var(--garis); position:sticky; top:0; z-index:30}
.at-menu{display:none; width:40px; height:40px; border-radius:11px; background:var(--hijau-soft); color:var(--hijau); align-items:center; justify-content:center}
.at-cari{display:flex; align-items:center; gap:9px; background:#F5F9F6; border:1.3px solid var(--garis); border-radius:12px; padding:9px 13px; flex:1; max-width:420px}
.at-cari input{border:0; background:none; outline:none; width:100%; font-size:13.5px}
.at-cari span{color:var(--abu)}
.at-kanan{margin-left:auto; display:flex; align-items:center; gap:12px}
.at-bell{width:40px; height:40px; border-radius:12px; background:#F5F9F6; color:var(--tinta2); display:flex; align-items:center; justify-content:center; position:relative}
.at-bell.on::after{content:""; position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:99px; background:var(--emas); border:2px solid #fff}
.at-user{display:flex; align-items:center; gap:10px; padding-left:12px; border-left:1px solid var(--garis)}
.at-un{display:flex; flex-direction:column}
.at-un b{font-size:13.5px}
.at-un i{font-style:normal; font-size:11.5px; color:var(--abu)}
.adm-body{padding:22px; display:flex; flex-direction:column; gap:18px}
.adm-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.adm-head h2{font-size:22px; letter-spacing:-.02em}
.adm-head p{font-size:13px; color:var(--abu); margin-top:3px}
.head-aksi{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.prev-img{display:block; width:100%; max-width:280px; height:96px; object-fit:cover; border-radius:10px;
  border:1px solid var(--garis); margin-top:7px}
.pr-wrap{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px}
.pr-slide{min-height:132px; padding:0; position:relative; overflow:hidden; border-radius:16px}
.pr-slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45}
.pr-slide-in{position:relative; z-index:2; padding:14px; display:flex; flex-direction:column; gap:5px; height:100%; justify-content:flex-end}
.pr-slide-in b{font-size:13.5px; font-weight:750; line-height:1.3}
.pr-slide-in small{font-size:11px; opacity:.92; line-height:1.35}
.pr-cta{align-self:flex-start; margin-top:6px; background:#fff; color:#0E4D2C; border-radius:999px; padding:6px 11px; font-size:11px; font-weight:700}
.pill.emas{background:var(--emas-soft,#FFF8F0); color:#A65A02}
.pill.hijau{background:var(--hijau-soft); color:var(--hijau-tua)}
.pill.biru{background:#E7EFFB; color:#1B4F8B}
.pill.teal{background:#E3F6F4; color:#0A6B75}
.pill.ungu{background:#F0E9FB; color:#5A2E9E}


/* KPI */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.kpi-grid.tiga{grid-template-columns:repeat(3,1fr)}
.kpi{background:#fff; border:1px solid var(--garis); border-radius:var(--r); padding:16px; box-shadow:var(--sh); position:relative; overflow:hidden}
.kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grad)}
.kpi-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.kpi-top span{font-size:12.5px; color:var(--abu); font-weight:600}
.kpi-top i{width:30px; height:30px; border-radius:10px; background:var(--hijau-soft); color:var(--hijau); display:flex; align-items:center; justify-content:center; font-style:normal}
.kpi>b{display:block; font-size:21px; margin:9px 0 5px; letter-spacing:-.02em}
.kpi-d{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:650; padding:3px 8px; border-radius:99px}
.kpi-d.up{background:var(--hijau-soft); color:var(--hijau)}
.kpi-d.dn{background:var(--merah-soft); color:#B21D1D}
.kpi-d.fl{background:#EEF2F0; color:var(--abu)}

/* baris kartu */
.card-row{display:grid; gap:16px}
.card-row .card{min-width:0}
.card .sec-head{margin-bottom:12px}
.card .sec-head .muted{font-size:12.5px}
.grafik-card{padding:18px}

/* program & konfirmasi */
.prog-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.pr{display:flex; flex-direction:column; gap:9px}
.pr-top{display:flex; align-items:flex-start; gap:12px}
.pr-ik{width:42px; height:42px; border-radius:12px; background:var(--hijau-soft); color:var(--hijau); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.pr-top>b,.pr-top>div>b{font-size:14.5px}
.pr-top i{font-style:normal; font-size:11.5px; color:var(--abu); display:block; margin-top:2px; text-transform:capitalize}
.pr-top .btn{margin-left:auto}
.pr-top>div{flex:1; min-width:0}
.pr-desk{font-size:13px; color:var(--abu); line-height:1.5}
.pr-foot{display:flex; align-items:center; gap:12px; font-size:12.5px; color:var(--abu)}
.pr-foot b{color:var(--tinta2)}
.pr-pct{margin-left:auto; background:var(--hijau-soft); color:var(--hijau); padding:3px 9px; border-radius:99px; font-size:12px}
.pr-target{font-size:12px; color:var(--abu2); border-top:1px dashed var(--garis); padding-top:8px}
.kf-list{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.kf{display:flex; flex-direction:column; gap:11px}
.kf-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.kf-head b{font-size:14.5px; display:block}
.kf-head i{font-style:normal; display:block; margin-top:3px}
.kf-num{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:5px}
.kf-num b{font-size:16px; color:var(--hijau-tua)}
.kf-meta{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--abu)}
.kf-meta span{display:inline-flex; align-items:center; gap:6px}
.kf-bukti{width:100%; max-height:220px; object-fit:cover; border-radius:var(--r-sm); border:1px solid var(--garis)}
.kf-aksi{display:flex; gap:10px}
.kf-aksi .btn{flex:1}
.amb-head{display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,#EAF6EF,#fff)}
.amb-ik{width:64px; height:64px; border-radius:18px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.amb-tx h3{font-size:17px}
.amb-tx p{font-size:13px; color:var(--abu); margin-top:3px}
.head-aksi .inp{width:auto; min-width:150px}
.tabel .btn.kecil{white-space:nowrap}
.tabel td small.kode{margin-top:4px}
.tabel td>small{display:block; margin-top:3px; color:var(--abu); font-size:12px}
.tabel td>.kode{display:block; width:fit-content; margin-top:5px}
.adm-ovl{display:none}

/* responsif */
@media (min-width:1400px){
  .card-row{grid-template-columns:1.45fr 1fr}
  .kpi-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1399px){
  .card-row{grid-template-columns:1fr}
}
@media (max-width:1100px){
  .kpi-grid,.kpi-grid.tiga{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .adm{grid-template-columns:1fr}
  .adm-side{position:fixed; left:0; top:0; bottom:0; width:270px; height:100vh; transform:translateX(-102%); transition:transform .26s ease}
  .adm-side.buka{transform:none; box-shadow:0 0 40px rgba(0,0,0,.35)}
  .adm-ovl{display:block; position:fixed; inset:0; background:rgba(11,36,24,.45); opacity:0; pointer-events:none; transition:opacity .26s; z-index:45}
  .adm-ovl.on{opacity:1; pointer-events:auto}
  .at-menu{display:flex}
  .at-un{display:none}
}
@media (max-width:760px){
  .adm-top{padding:12px 14px; gap:10px}
  .adm-body{padding:14px; gap:14px}
  .kpi-grid,.kpi-grid.tiga{grid-template-columns:1fr}
  .mini-grid,.mini-grid.tiga{grid-template-columns:1fr 1fr}
  .at-cari{display:none}
  .adm-head h2{font-size:19px}
  .tabel thead{display:none}
  .tabel tr{display:block; border-bottom:1px solid var(--garis); padding:10px 0}
  .tabel td{display:flex; justify-content:space-between; gap:12px; padding:6px 10px; border:0}
  .tabel td::before{content:attr(data-l); color:var(--abu); font-size:12px; font-weight:600}
  .tabel td.ka{text-align:right}
}

/* ====== MOBILE APP: grid menu kotak + navbar bawah ====== */
.adm-menu-app{display:none}
.adm-bnav{display:none}
@media (max-width:1024px){
  .adm-menu-app{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:560px;
    background:#fff;border:1px solid var(--garis);border-radius:16px;padding:13px 11px;box-shadow:var(--sh)}
  .ma-item{min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 3px;border-radius:12px;background:transparent}
  .ma-item:active{background:var(--hijau-soft)}
  .ma-item.on .ma-ik{background:var(--grad);color:#fff}
  .ma-ik{width:38px;height:38px;border-radius:12px;background:var(--hijau-soft);color:var(--hijau);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .ma-tx{overflow-wrap:anywhere;min-width:0;font-size:10.5px;font-weight:650;color:var(--tinta2);text-align:center;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:26px}
  .adm-bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:2px;
    background:rgba(255,255,255,.97);border-top:1px solid var(--garis);box-shadow:0 -6px 22px rgba(122,46,2,.10);
    padding:7px 6px calc(7px + env(safe-area-inset-bottom))}
  .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;border-radius:12px;color:var(--abu);position:relative}
  .bn-item span{font-size:10px;font-weight:650}
  .bn-item.on{color:var(--hijau);background:var(--hijau-soft)}
  .bn-badge{position:absolute;top:1px;left:50%;margin-left:7px;background:#D93025;color:#fff;font-size:9px;font-weight:700;
    min-width:16px;height:16px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 4px}
  .adm-body{padding-bottom:84px}
}