/* ---------------------------------------------------------------
   ANALYTICS — samakan dengan konten.com (Arip 17 Sep 2026, 248)
   Semua nilai diambil dari pengukuran live /brand/analytic.
   --------------------------------------------------------------- */

/* Batang isi di Status Submission: ada aturan lain yang memaksa <i>
   jadi kotak 14x14 transparan (dipakai sebagai ikon), sehingga batang
   100% tampil KOSONG — menyesatkan brand. Dikembalikan ke batang
   sungguhan. Terbukti live: style="width:100%" tapi isiW=14 transparan. */
.st-sub .dist-bar{overflow:hidden;border-radius:999px}
.st-sub .dist-bar > i{display:block !important;height:100% !important;
  min-width:0 !important;border-radius:999px;font-size:0 !important;
  background:#ff2e6a !important}
.st-sub .st-pending .dist-bar > i{background:#ff9ec2 !important}
.st-sub .st-rejected .dist-bar > i{background:#9b93a6 !important}

/* Panel Distribusi Video & Efisiensi Budget memakai batang yang sama,
   jadi ikut diamankan supaya isinya tidak ikut ditipiskan aturan lain.
   SUMBER BENTROK (dibuktikan lewat penelusuran styleSheets, bukan
   tebakan): wordmark.css memasang ikon info lewat selektor
   `main div > i:not([class])` 14x14 — <i> batang tidak punya kelas,
   jadi ikut kena dan batang 100% menciut jadi kotak 14px. */
body:has(.app-main) .dist-bar{overflow:hidden;border-radius:999px}
main .dist-bar > i:not([class]),
body:has(.app-main) .dist-bar > i{display:block !important;
  height:100% !important;min-width:0 !important;
  max-width:100% !important;border-radius:999px;font-size:0 !important;
  background:linear-gradient(90deg,#a3059b,#ff7fb0)}
/* wordmark.css:194-199 memakai `width:14px !important`, jadi style
   inline style="width:NN%" KALAH. Cara yang benar: kecualikan <i>
   yang ada di dalam .dist-bar dari aturan ikon itu — dilakukan di
   wordmark.css sendiri (lihat :not(.dist-bar > i) di sana). */

/* Kolom dibuat lebar tetap supaya SEMUA track batang sama panjang.
   Tanpa ini, baris "100%" punya track lebih pendek daripada baris
   "0%" (teks lebih panjang memakan ruang) — batang 100% malah tampak
   lebih pendek dari batang 0%. Terbukti live: 229px vs 252px. */
.st-sub .dist-row{display:flex;align-items:center;gap:10px}
.st-sub .dist-row > span:first-child{flex:0 0 78px}
.st-sub .dist-row > .dist-bar{flex:1 1 auto;min-width:0}
.st-sub .dist-row > b{flex:0 0 96px;text-align:right;white-space:nowrap}
/* Distribusi Video & Efisiensi Budget punya masalah yang sama. */
body:has(.app-main) .content-block .dist-row{display:flex;align-items:center;gap:10px}
body:has(.app-main) .content-block .dist-row > span:first-child{flex:0 0 78px}
body:has(.app-main) .content-block .dist-row > .dist-bar{flex:1 1 auto;min-width:0}
body:has(.app-main) .content-block .dist-row > b{flex:0 0 96px;text-align:right;white-space:nowrap}

/* Persentase di Status Submission: abu kecil di sebelah jumlah video,
   persis pola konten.com "0 video  0%". */
.dist-pct{font-style:normal;font-weight:600;font-size:.72rem;
  color:#9b93a6;margin-left:6px}

/* Tautan "Lihat" di kolom Link — konten.com memakai biru cyan tebal. */
.tautan-lihat{color:#ff2e6a;font-weight:650;text-decoration:none}
.tautan-lihat:hover{text-decoration:underline}

/* Baris filter di panel List Approved Video (analytics) menumpuk di
   layar HP; samakan jaraknya dengan panel dashboard. */
body:has(.app-main) .content-block > .select-row{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
/* Di layar lebar konten.com menaruh dropdown BERJAJAR sebaris.
   Melebar penuh hanya masuk akal di layar HP, jadi dibatasi. */
body:has(.app-main) .content-block > .select-row .field-select{
  flex:0 0 auto;min-width:0}
@media (max-width:900px){
  body:has(.app-main) .content-block > .select-row .field-select{
    flex:1 1 100%}
}

/* Baris dropdown atas (periode + campaign + platform + Terapkan):
   3 dropdown tidak muat sebaris di 393px -> biarkan turun rapi. */
body:has(.app-main) .select-row.wide{
  display:flex;flex-wrap:wrap;gap:8px}
body:has(.app-main) .select-row.wide .field-select{flex:1 1 100%;min-width:0}
body:has(.app-main) .select-row.wide .btn{flex:1 1 100%}