/* =====================================================================
   ADMIN DASHBOARD — 20 Sep 2026 (kode 248)
   Dimuat paling akhir. Semua gaya khusus halaman /admin* ada di sini
   supaya rollback cukup hapus file ini dari base.html.
   Palet dikunci ke identitas: latar #050507, gradien ikon
   biru #319ef1 -> ungu #965ada -> magenta #c93acb.
   ===================================================================== */

/* --- 1. ANTREAN KERJA (kartu angka besar) --- */
.admin-queue{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  gap:12px !important;
  margin-top:4px !important;
}
.admin-queue-item{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  padding:16px 18px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  text-decoration:none !important;
  transition:border-color .16s ease, background .16s ease !important;
}
a.admin-queue-item:hover{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(150,90,218,.55) !important;
}
.admin-queue-item span{
  font-size:26px !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  letter-spacing:-.02em !important;
  background:linear-gradient(135deg,#319ef1,#965ada 52%,#c93acb) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.admin-queue-item b{
  font-size:12px !important;
  font-weight:500 !important;
  color:rgba(255,255,255,.62) !important;
  line-height:1.35 !important;
}

/* --- 2. BARIS FILTER / PENCARIAN --- */
.admin-filter{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-bottom:14px !important;
}
.admin-filter input[type="search"]{ flex:1 1 200px !important; min-width:0 !important; }
.admin-filter select{ flex:0 1 auto !important; }
.admin-filter input[type="search"],
.admin-filter select{
  height:38px !important;
  padding:0 12px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#f2f0f5 !important;
  font-size:13px !important;
  font-family:inherit !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
.admin-filter select{ padding-right:28px !important; }
.admin-filter input[type="search"]::placeholder{ color:rgba(255,255,255,.34) !important; }
.admin-filter input[type="search"]:focus,
.admin-filter select:focus{
  outline:none !important;
  border-color:rgba(150,90,218,.75) !important;
  background:rgba(255,255,255,.06) !important;
}
/* daftar pilihan dropdown ikut gelap, kalau tidak jadi putih di sebagian browser */
.admin-filter select option{ background:#121016 !important; color:#f2f0f5 !important; }

.admin-count{
  margin:0 0 10px !important;
  font-size:12px !important;
  color:rgba(255,255,255,.45) !important;
}
.admin-more{ margin:12px 0 0 !important; font-size:13px !important; }
.admin-more a{ color:#c9a2f0 !important; text-decoration:none !important; }
.admin-more a:hover{ text-decoration:underline !important; }

/* --- 3. TABEL: kolom aksi & email --- */
.admin-act{ white-space:nowrap !important; }
.admin-act form.inline{ display:inline-block !important; margin:0 4px 0 0 !important; }
.admin-act small{ color:rgba(255,255,255,.35) !important; font-size:11px !important; }
.admin-mail{
  font-size:12px !important;
  color:rgba(255,255,255,.58) !important;
  word-break:break-all !important;
}

/* --- 4. BADGE PERAN --- */
.badge.role-clipper{ background:rgba(49,158,241,.16) !important; color:#7ec2ff !important; }
.badge.role-brand{   background:rgba(201,58,203,.16) !important; color:#e88ce9 !important; }
.badge.role-admin{   background:rgba(150,90,218,.20) !important; color:#c9a2f0 !important; }

/* --- 5. FORM ADMIN (tambah tim, ganti sandi) --- */
.admin-form{
  display:grid !important;
  gap:12px !important;
  max-width:420px !important;
}
.admin-form label{
  display:grid !important;
  gap:6px !important;
  font-size:12px !important;
  color:rgba(255,255,255,.62) !important;
}
.admin-form input{
  height:42px !important;
  padding:0 13px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#f2f0f5 !important;
  font-size:14px !important;
  font-family:inherit !important;
}
.admin-form input::placeholder{ color:rgba(255,255,255,.3) !important; }
.admin-form input:focus{
  outline:none !important;
  border-color:rgba(150,90,218,.75) !important;
  background:rgba(255,255,255,.06) !important;
}
.admin-form .btn{ justify-self:start !important; margin-top:2px !important; }

/* --- 6. PESAN HASIL TINDAKAN --- */
.admin-flash{
  margin:0 0 16px !important;
  padding:12px 15px !important;
  border-radius:11px !important;
  font-size:13px !important;
  line-height:1.45 !important;
  border:1px solid transparent !important;
}
.admin-flash.ok{
  background:rgba(52,199,123,.10) !important;
  border-color:rgba(52,199,123,.35) !important;
  color:#7ee0ab !important;
}
.admin-flash.err{
  background:rgba(255,72,96,.10) !important;
  border-color:rgba(255,72,96,.38) !important;
  color:#ff9aa8 !important;
}

/* --- 7. TAB STATUS CAMPAIGN (pakai <a>, bukan <button>) --- */
.submission-tabs a{
  display:inline-block !important;
  padding:7px 14px !important;
  border-radius:9px !important;
  font-size:13px !important;
  text-decoration:none !important;
  color:rgba(255,255,255,.55) !important;
  background:transparent !important;
  border:1px solid transparent !important;
}
.submission-tabs a:hover{ color:#f2f0f5 !important; }
.submission-tabs a.active{
  color:#f2f0f5 !important;
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(150,90,218,.5) !important;
}

/* --- 8. KARTU ANGKA RINGKASAN: link 'Lihat' --- */
.admin-metrics article a{
  font-size:11px !important;
  color:#c9a2f0 !important;
  text-decoration:none !important;
}
.admin-metrics article a:hover{ text-decoration:underline !important; }

/* --- 9. LAYAR SEMPIT --- */
@media (max-width:560px){
  .admin-filter input[type="search"]{ flex:1 1 100% !important; }
  .admin-filter select{ flex:1 1 calc(50% - 4px) !important; }
  .admin-queue-item span{ font-size:22px !important; }
  .admin-act form.inline{ margin-bottom:4px !important; }
}

/* --- 10. NAPAS BAWAH: kartu terakhir jangan mepet tepi layar --- */
.admin-queue{ margin-bottom:4px !important; }
main .content-block:last-of-type{ margin-bottom:26px !important; }

/* =====================================================================
   RINCIAN TOP-UP BRAND — fee 15% (20 Sep 2026, kode 248)
   Muncul begitu brand mengetik nominal >= 25 juta, supaya dia tahu
   saldo bersihnya SEBELUM transfer, bukan sesudah.
   ===================================================================== */
.topup-rincian{
  margin:14px 0 4px; padding:14px 16px;
  border:1px solid rgba(255,255,255,.1); border-radius:14px;
  background:rgba(255,255,255,.03); font-size:13px;
}
.topup-rincian > div{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; padding:5px 0;
}
.topup-rincian span{ color:rgba(255,255,255,.62); }
.topup-rincian b{
  color:#e9e9ee; font-weight:600; font-variant-numeric:tabular-nums;
  white-space:nowrap; flex-shrink:0;   /* nominal miliaran jangan pecah baris */
}
.topup-rincian span{ min-width:0; }
.topup-rincian [data-rp-fee]{ color:#ff7a9c; }
.topup-rincian-total{
  margin-top:6px; padding-top:10px !important;
  border-top:1px solid rgba(255,255,255,.12);
}
.topup-rincian-total span{ color:#e9e9ee !important; font-weight:600; }
.topup-rincian-total b{ font-size:16px; color:#fff; }

/* =====================================================================
   UNGGAH BUKTI TRANSFER + KODE UNIK (20 Sep 2026, kode 248)
   ===================================================================== */
.topup-upload{ margin:12px 0 4px; }
.upload-drop{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:16px 12px; border:1px dashed rgba(255,255,255,.22);
  border-radius:12px; background:rgba(255,255,255,.02); cursor:pointer;
  text-align:center; transition:border-color .15s, background .15s;
}
.upload-drop:hover{ border-color:rgba(224,16,122,.55); background:rgba(224,16,122,.05); }
.upload-ico{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,#319ef1,#965ada,#c93acb);
  color:#fff; font-size:17px; font-weight:600; line-height:1;
}
.upload-drop b{ color:#e9e9ee; font-size:13px; font-weight:600;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.upload-drop small{ color:rgba(255,255,255,.44); font-size:11px; }
.upload-status{ margin:8px 0 0; font-size:12px; }
.upload-status.ok{ color:#4ade80; }
.upload-status.gagal{ color:#f87171; }
/* tombol kirim yang masih terkunci */
.topup-actions .btn[disabled]{
  opacity:.4; cursor:not-allowed; filter:grayscale(.5);
}
.kode-unik{ color:#c93acb; font-size:11px; }
.tf-nominal{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* =====================================================================
   LAYAR TINJAUAN VIDEO (Admin Operasional) — 20 Sep 2026
   Tab laporan/banding + kolom alasan yang panjang.
   ===================================================================== */
.admin-tabs{display:flex;gap:8px;margin:0 0 16px;flex-wrap:wrap}
.admin-tab{padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  color:#b9b3c4;font-size:13px;font-weight:600;text-decoration:none;transition:.16s}
.admin-tab:hover{border-color:rgba(255,255,255,.3);color:#efeaf5}
.admin-tab.on{background:linear-gradient(135deg,#a04dd2,#c843b6);border-color:transparent;color:#fff}
.alasan-sel{max-width:320px;white-space:normal;line-height:1.45;color:#c9c3d4;font-size:13px}
.admin-act .inline{display:inline-flex;gap:6px;align-items:center;margin:0 6px 6px 0}
.admin-act .inline input[type=text]{width:150px;padding:6px 10px;border-radius:8px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#efeaf5;font-size:12px}
.btn.danger{background:linear-gradient(135deg,#e0107a,#ff043e)}
.dialog-sub{color:#a9a2b6;font-size:13px;margin:-4px 0 14px}
#lapor-dialog textarea,#banding-dialog textarea{width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#efeaf5;
  font-family:inherit;font-size:14px;resize:vertical}


/* =====================================================================
   LAYAR TINJAUAN - perbaikan terukur (20 Sep)
   Temuan: tabel meluber 558px, tombol "Video aman" terpotong 24px,
   kolom Alasan terpotong di tengah kata tanpa ellipsis.
   ===================================================================== */

/* Alasan: potong rapi + tooltip (title) supaya teks penuh tetap bisa dibaca */
.alasan-sel{
  max-width:320px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:help;
}

/* Kolom Tindakan menempel di kanan: tombol tidak pernah terpotong
   walau tabel digeser. */
.content-block .table-wrap{ position:relative; }
.content-block table th:last-child,
.content-block table td.admin-act{
  position:sticky;
  right:0;
  background:#0c0c11;
  box-shadow:-10px 0 12px -8px rgba(0,0,0,.85);
  z-index:2;
}
.content-block table th:last-child{ background:#0e0e14; }

/* Pil angka di tab: jelas ini "perlu tindakan", bukan jumlah baris */
.tab-pil{
  display:inline-block;
  margin-left:6px;
  padding:1px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  background:rgba(224,16,122,.18);
  color:#ff8ec2;
  vertical-align:middle;
}
.admin-tab.on .tab-pil{ background:rgba(255,255,255,.22); color:#fff; }

/* =====================================================================
   ONBOARDING 2 LANGKAH (20 Sep) - meniru bentuk konten.com, warna kita
   ===================================================================== */
.mulai-card{ max-width:460px; }
.mulai-balik{ display:inline-block; margin-bottom:14px; color:#8a8490; font-size:13px; text-decoration:none; }
.mulai-balik:hover{ color:#fff; }

.mulai-step{ display:flex; align-items:center; gap:8px; margin-bottom:22px; }
.mulai-bulat{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  font-size:13px; font-weight:600;
  border:1.5px solid rgba(255,255,255,.18); color:#8a8490; background:transparent;
}
.mulai-bulat.on{
  border-color:transparent; color:#fff;
  background:linear-gradient(135deg,#319ef1,#965ada 55%,#c93acb);
}
.mulai-bulat.beres{ border-color:#965ada; color:#c9a7f0; }
.mulai-garis{ flex:1; height:1px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 5px,transparent 5px 10px); }

.mulai-card h1{ font-size:23px; line-height:1.28; margin:0 0 6px; }
.mulai-sub{ color:#8a8490; font-size:13px; margin:0 0 18px; }
.mulai-form{ margin-top:16px; }

.mulai-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.mulai-opsi{ position:relative; display:block; cursor:pointer; }
.mulai-opsi input{ position:absolute; opacity:0; pointer-events:none; }
.mulai-opsi span{
  display:block; padding:13px 14px; border-radius:12px;
  background:#121218; border:1.5px solid rgba(255,255,255,.10);
  font-size:14px; color:#e8e6ec; transition:border-color .15s, background .15s;
}
.mulai-opsi input:checked + span{
  border-color:#965ada; background:rgba(150,90,218,.14); color:#fff;
}
.mulai-opsi input:focus-visible + span{ outline:2px solid #319ef1; outline-offset:2px; }

.mulai-lainnya, .mulai-kode{
  width:100%; box-sizing:border-box; margin-bottom:14px;
  padding:13px 14px; border-radius:12px;
  background:#121218; border:1.5px solid rgba(255,255,255,.10);
  color:#fff; font-size:14px; font-family:inherit;
}
.mulai-lainnya::placeholder, .mulai-kode::placeholder{ color:#6d6776; }
.mulai-lainnya:focus, .mulai-kode:focus{ outline:none; border-color:#965ada; }

.mulai-label{ display:block; margin-bottom:8px; font-size:14px; font-weight:600; }
.mulai-label small{ color:#8a8490; font-weight:400; }
.mulai-lewat{ margin-top:10px; }

@media (max-width:360px){ .mulai-grid{ grid-template-columns:1fr; } }

/* =====================================================================
   VIEWS OTOMATIS + STOP CAMPAIGN (20 Sep 2026, kode 248)
   ===================================================================== */
.btn-stop-camp{margin-top:10px;width:100%;padding:9px 12px;border-radius:10px;
  background:transparent;border:1px solid rgba(255,255,255,.16);
  color:#8a8490;font:600 12px/1 Poppins,system-ui,sans-serif;cursor:pointer;
  transition:border-color .16s,color .16s}
.btn-stop-camp:hover{border-color:#e0107a;color:#e0107a}
.camp-stopped{display:block;margin-top:10px;color:#8a8490;font-size:11px;font-style:italic}

.views-tanda{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:999px;
  font-size:10px;font-weight:600;letter-spacing:.02em;vertical-align:middle}
.views-tanda.ok{background:rgba(52,199,89,.12);color:#34c759;border:1px solid rgba(52,199,89,.25)}
.views-tanda.gagal{background:rgba(255,255,255,.05);color:#8a8490;border:1px solid rgba(255,255,255,.12)}
.views-tanda.anomali{background:rgba(255,159,10,.14);color:#ff9f0a;border:1px solid rgba(255,159,10,.3)}

/* Perkiraan hasil campaign + petunjuk platform (20 Sep 2026) */
.rate-hitung{margin:10px 0 4px;padding:10px 12px;border-radius:10px;font-size:13px;
  line-height:1.5;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  color:#8a8490}
.rate-hitung.aman{border-color:rgba(224,16,122,.35);color:#e6e1ea}
.rate-hitung.bahaya{border-color:rgba(255,4,62,.5);color:#ff6b8a}
.hint-platform{display:block;margin-top:6px;font-size:12px;color:#8a8490;line-height:1.45}