/* =====================================================================
   Panel admin — suasana SOFT CLARITY (v1.3.3), selaras dengan website customer.
   Hanya mengganti warna/bentuk; struktur & fungsi halaman admin tidak berubah.
   ===================================================================== */
:root{
  --peri-700:#4343B8; --peri-600:#5B5BD6; --peri-500:#6E6AE0; --peri-400:#8B7CF6;
  --peri-200:#CFCBF6; --peri-100:#EEEDFD; --peri-50:#F5F4FE;
  --karang-600:#E0703F; --karang-500:#FF8A55; --karang-400:#FF9A66; --karang-100:#FFF1E8;
  --mint-600:#1E9E78; --mint-100:#E3F6EF;
  --navy:#1E2150; --teks:#2E3163; --teks-2:#6B6F8E; --teks-3:#9A9DB8;
  --garis:#ECEAF6; --garis-2:#F3F1FA;
  --kanvas:#F7F6FD;
  --bayang-1:0 1px 2px rgba(30,33,80,.05);
  --bayang-2:0 2px 6px rgba(30,33,80,.04),0 10px 30px rgba(30,33,80,.06);
  --bayang-3:0 18px 42px rgba(30,33,80,.14);
  --r-xl:22px; --r-lg:20px;
}
body{background:var(--kanvas);font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
::selection{background:#DAD6FB;color:var(--navy)}

/* sidebar navy lembut */
.sidebar{background:#1F2150;border-right:0;color:#DDDDF5}
.sidebar::-webkit-scrollbar{width:8px}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:8px}
.sidebar .brand{padding:20px 16px 12px}
.sidebar .brand .mark{background:#E9E6FB;box-shadow:0 6px 16px rgba(0,0,0,.25);overflow:hidden}
.sidebar .brand .mark .mj,.sidebar .brand .mark .mj img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.sidebar .brand b{color:#fff}
.sidebar .brand span{color:#A9A8D8}
.sidebar .grp{color:#8A89BE}
.sidebar a{color:#DADAF4}
.sidebar a .ico{color:#9D98E8}
.sidebar a:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar a:hover .ico{color:#fff}
.sidebar a.active{background:linear-gradient(90deg,#5B5BD6,#8B7CF6);color:#fff;box-shadow:0 8px 18px rgba(91,91,214,.35)}
.sidebar a.active .ico{color:#fff}
.sidebar .badge-nav{background:var(--karang-400);color:var(--navy);box-shadow:none}
.sidebar .me{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.08)}
.sidebar .me b{color:#fff}.sidebar .me span{color:#A9A8D8}
.sidebar .me .av{background:var(--karang-400);color:var(--navy)}

/* topbar */
.topbar{background:rgba(247,246,253,.88);border-bottom-color:rgba(30,33,80,.06)}
.topbar .burger{border-color:var(--garis)}

/* komponen */
.card{border-color:var(--garis);border-radius:var(--r-lg)}
.btn{background:linear-gradient(90deg,#5B5BD6,#8B7CF6);border-color:transparent}
.btn:hover{box-shadow:0 8px 18px rgba(91,91,214,.28)}
.btn.ghost{background:#fff;color:var(--navy);border-color:var(--garis)}
.btn.ghost:hover{background:var(--peri-50);color:var(--peri-700)}
.btn.karang{background:var(--karang-400);border-color:var(--karang-400);color:var(--navy);box-shadow:0 6px 0 -2px #E0703F}
.btn.karang:hover{color:var(--navy)}
.overlay.on{background:rgba(30,33,80,.45)}

/* login */
.login-wrap,.auth-wrap{background:linear-gradient(180deg,#EEEBFB 0%,#F7F6FD 55%,#FFF1E8 100%)}
body.halaman-kosong{min-height:100vh;background:linear-gradient(180deg,#EEEBFB 0%,#F7F6FD 55%,#FFF1E8 100%)}
.login-box{max-width:400px;margin:6vh auto}
.login-kj{display:flex;justify-content:center;margin:0 auto}.login-kj .mj img{height:150px;width:auto;max-width:none}
.login-box .card{border-radius:24px;box-shadow:0 24px 50px rgba(30,33,80,.12);border:0}
.login-box .btn{min-height:48px}
.hero-trip{background:linear-gradient(125deg,#1E2150 0%,#4343B8 60%,#8B7CF6 100%)!important;box-shadow:0 18px 40px rgba(30,33,80,.18)}
.mj{display:block;line-height:0}.mj img{display:block}

/* ============================================================
   v1.4.0 — TAMPILAN HP & TABLET KECIL (≤ 860px)
   ============================================================ */
@media (max-width:860px){
  /* tabel kecil: muat di layar, teks boleh turun baris */
  table.tbl.tabel-pas{min-width:0!important;width:100%;font-size:.82rem}
  table.tbl.tabel-pas th,table.tbl.tabel-pas td{padding:8px 6px;white-space:normal}
  table.tbl.tabel-pas td.num,table.tbl.tabel-pas th.num{white-space:nowrap}

  /* tabel lebar → kartu per baris */
  .tbl-wrap:has(> table.kartu-hp){overflow:visible}
  table.tbl.kartu-hp{min-width:0!important;width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem}
  table.tbl.kartu-hp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.tbl.kartu-hp tbody,table.tbl.kartu-hp tfoot,table.tbl.kartu-hp tr,table.tbl.kartu-hp td{display:block;width:100%;box-sizing:border-box}
  table.tbl.kartu-hp tr{margin:0 0 12px;padding:6px 14px 8px;background:var(--putih,#fff);border:1px solid var(--garis,#e3e5f1);border-radius:16px;box-shadow:0 2px 8px rgba(40,44,100,.05)}
  table.tbl.kartu-hp tr:hover td{background:transparent}
  table.tbl.kartu-hp td{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 0;border:0;border-bottom:1px dashed var(--garis-2,#eceef7);text-align:right;min-height:34px;overflow-wrap:anywhere}
  table.tbl.kartu-hp td:last-child{border-bottom:0}
  table.tbl.kartu-hp td::before{content:attr(data-label);flex:0 0 36%;max-width:40%;text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--teks-3,#8a8fa8)}
  table.tbl.kartu-hp td:not([data-label])::before,table.tbl.kartu-hp td[data-label=""]::before{display:none}
  table.tbl.kartu-hp td.num,table.tbl.kartu-hp td.mid{text-align:right}
  table.tbl.kartu-hp td.kartu-judul{display:block;text-align:left;font-weight:700;font-size:.98rem;padding:8px 0 9px;border-bottom:1px solid var(--garis,#e3e5f1)}
  table.tbl.kartu-hp td.kartu-judul::before{display:none}
  table.tbl.kartu-hp td.kartu-lebar{display:block;text-align:center;border:0}
  table.tbl.kartu-hp td.kartu-lebar::before{display:none}
  table.tbl.kartu-hp td > .btn-group,table.tbl.kartu-hp td > form{justify-content:flex-end}
  table.tbl.kartu-hp td:has(> .btn,> a.btn,> form,> .btn-group){flex-wrap:wrap}
  table.tbl.kartu-hp tfoot tr{background:var(--peri-50,#f3f4ff)}

  /* Persiapan Packing: baris barang jadi kartu yang ringkas (tombol ADA/KURANG/TIDAK ADA tetap besar) */
  table.tbl.tbl-packing.kartu-hp tr{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:8px;padding:10px 12px 12px}
  table.tbl.tbl-packing.kartu-hp td{display:block;border:0;padding:4px 0;text-align:left;min-height:0;width:auto}
  table.tbl.tbl-packing.kartu-hp td::before{display:block;flex:none;max-width:none;margin-bottom:2px}
  table.tbl.tbl-packing.kartu-hp td:nth-child(1){grid-column:1;grid-row:1}
  table.tbl.tbl-packing.kartu-hp td:nth-child(2){grid-column:2;grid-row:1}
  table.tbl.tbl-packing.kartu-hp td:nth-child(3){grid-column:3 / 7;grid-row:1;font-size:.95rem}
  table.tbl.tbl-packing.kartu-hp td:nth-child(1)::before,table.tbl.tbl-packing.kartu-hp td:nth-child(2)::before,table.tbl.tbl-packing.kartu-hp td:nth-child(3)::before{display:none}
  table.tbl.tbl-packing.kartu-hp td:nth-child(4){grid-column:1 / 3;grid-row:2}
  table.tbl.tbl-packing.kartu-hp td:nth-child(5){grid-column:3;grid-row:2}
  table.tbl.tbl-packing.kartu-hp td:nth-child(6){grid-column:4;grid-row:2}
  table.tbl.tbl-packing.kartu-hp td:nth-child(7){grid-column:5 / 7;grid-row:2;text-align:right}
  table.tbl.tbl-packing.kartu-hp td:nth-child(8){grid-column:1 / 7;grid-row:3;border-top:1px dashed var(--garis-2,#eceef7);margin-top:6px;padding-top:10px}
  table.tbl.tbl-packing.kartu-hp td:nth-child(8)::before{display:none}
  table.tbl.tbl-packing.kartu-hp td.mid{text-align:left}
  table.tbl.tbl-packing.kartu-hp td.num{text-align:left}
  table.tbl.tbl-packing.kartu-hp td:nth-child(7).num{text-align:right}
  table.tbl.tbl-packing.kartu-hp td .cek-grup{display:flex;flex-wrap:wrap;gap:6px}
  table.tbl.tbl-packing.kartu-hp td .cek-grup .cek{flex:1 1 30%;min-height:46px}

  /* kolom filter: dua kolom, bukan satu panjang ke bawah */
  form[method=get] .grid.g3,form[method=get] .grid.g4,form[method=get] .grid.g5,form[method=get] .grid.g6,
  form[data-noguard] .grid.g3,form[data-noguard] .grid.g4,form[data-noguard] .grid.g5,form[data-noguard] .grid.g6{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  form[method=get] .field label,form[data-noguard] .field label{font-size:.74rem}
  form[method=get] .field input,form[method=get] .field select{min-width:0;width:100%}

  /* barisan judul + tombol: boleh turun baris */
  .page-head{flex-wrap:wrap;gap:8px}
  .tabs{overflow-x:visible}
}
.pindah-batch select{flex:1 1 140px;min-width:0}
@media (max-width:860px){
  table.tbl.tbl-packing.kartu-hp td .cek-grup .cek{flex:1 1 26%}
  table.tbl.tbl-packing.kartu-hp td .cek-grup .cek.balik{flex:0 0 52px;min-width:52px}
}
@media (max-width:860px){
  .grid.g4:has(> .stat){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .grid.g4 > .stat{padding:12px 13px}
  .grid.g4 > .stat .val{font-size:1.25rem}
}

/* v1.4.0 — laptop kecil / layar sedang: tabel dirapatkan supaya muat tanpa geser */
@media (min-width:861px) and (max-width:1440px){
  table.tbl{font-size:.84rem}
  table.tbl th,table.tbl td{padding:9px 7px}
  table.tbl td.nowrap,table.tbl td .nowrap{white-space:normal}
  table.tbl td .btn-group{flex-wrap:wrap;gap:4px}
  table.tbl td .btn.sm{padding:6px 9px}
}

table.tbl.tabel-pas{min-width:0!important}
table.tbl{min-width:0}

/* ===== v1.5.0 — halaman Bukti Bayar ===== */
.bukti-grid{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start}
.bukti-foto{display:block;border:1px solid var(--line,#E7E9F3);border-radius:14px;overflow:hidden;background:#F4F5FA}
.bukti-foto img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain}
.bukti-angka{font-size:1.15rem;margin:4px 0}
.bukti-aksi{margin-top:8px;padding-top:10px;border-top:1px dashed var(--line,#E7E9F3)}
.bukti-aksi .chk{display:flex;gap:8px;align-items:center;margin:4px 0;font-size:.88rem}
@media (max-width:860px){.bukti-grid{grid-template-columns:1fr}.bukti-foto img{max-height:260px}}

/* v1.7.0 voucher (admin) */
.vc-bar{height:10px;border-radius:99px;background:#E7E9F5;overflow:hidden;margin:6px 0}
.vc-bar i{display:block;height:100%;background:linear-gradient(90deg,#6C63D9,#E0759A);border-radius:99px}