/* brandfix.css — Dashboard BRAND Clypora
   Arip 17 Sep 2026, kode 248.
   Dimuat PALING AKHIR (setelah wordmark.css) sesuai metode paten
   "CSS bersih dimuat paling akhir".

   Memperbaiki 5 temuan audit + 303 elemen keluar layar.
   Palet WAJIB: kartu #0c0c11 · panel-2 #0a0a0e · garis #22222c
                garis lembut #1b1b24 · hover #17171e · aksen #ff2e6a
*/

/* ============================================================
   1. LABEL SKEMA PUTIH MENYALA -> gelap beraksen biru
   42 span putih di .campaign-cover (teks "CLIPPING"/"PER VIDEO")
   ============================================================ */
.campaign-cover > span,
.campaign-cover span:not([class]) {
  background: rgba(10, 12, 30, .82) !important;
  color: #ff2e6a !important;
  border: 1px solid rgba(255,46,106, .35) !important;
  border-radius: 6px !important;
  backdrop-filter: blur(4px);
  font-weight: 700;
  letter-spacing: .02em;
}

/* ============================================================
   2. AKSEN HIJAU/KUNING NYELENEH -> biru Clypora
   .badge.active & .badge.approved (74 kemunculan)
   ============================================================ */
.badge.active,
.badge.approved,
.badge.ok,
.badge.success {
  background: rgba(255,46,106, .14) !important;
  color: #ff2e6a !important;
  border-color: rgba(255,46,106, .32) !important;
}

.badge.warn,
.badge.pending,
.badge.review {
  background: rgba(255, 158, 194, .14) !important;
  color: #ff9ec2 !important;
  border-color: rgba(255, 158, 194, .32) !important;
}

/* bar/indikator yang ikut memakai hijau-kuning */
body:has(.app-main) [style*="39d8a0"],
body:has(.app-main) [style*="57, 216, 160"] {
  background: rgba(255,46,106, .14) !important;
  color: #ff2e6a !important;
}

/* ============================================================
   3. WARNA DI LUAR PALET -> palet resmi
   #121218 -> #17171e (hover resmi) · #08080c -> #0a0a0e (panel-2)
   ============================================================ */
body:has(.app-main) {
  --surface2: #0a0a0e !important;
  --ok: #ff2e6a !important;
  --ok2: #ff2e6a !important;
  --warn: #ff9ec2 !important;
  --warn2: #ff9ec2 !important;
}

body:has(.app-main) .btn.secondary,
body:has(.app-main) .segmented,
body:has(.app-main) .pill,
body:has(.app-main) .tabs,
body:has(.app-main) .rank-tabs,
body:has(.app-main) .tabs button,
body:has(.app-main) .rank-tabs button,
body:has(.app-main) .brand-mode button,
body:has(.app-main) .brand-mode a {
  background: #17171e !important;
  border-color: #22222c !important;
}

body:has(.app-main) .tabs button.active,
body:has(.app-main) .rank-tabs button.active,
body:has(.app-main) .brand-mode .active {
  background: linear-gradient(105deg, #a3059b, #ff2e6a) !important;
  color: #fff !important;
}

/* ============================================================
   4. TABEL KELUAR LAYAR
   TABLE kanan 727px di layar 393px; 148 td + 38 tr ikut terseret.
   Solusi: pembungkus bisa digeser mendatar, bukan memaksa mengecil.
   ============================================================ */
.table-wrap,
.table-scroll,
.block > table,
.card > table,
.panel > table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* bungkus tabel telanjang */
body:has(.app-main) table {
  min-width: 100%;
}

@media (max-width: 760px) {
  body:has(.app-main) .block:has(> table),
  body:has(.app-main) .card:has(> table),
  body:has(.app-main) .panel:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* tautan panjang di dalam tabel jangan memaksa lebar */
  body:has(.app-main) table a.text-link {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }

  body:has(.app-main) table td,
  body:has(.app-main) table th {
    white-space: nowrap;
  }
}

/* ============================================================
   5. HALAMAN KEPANJANGAN — 17.809px (21 layar HP)
   42 kartu campaign satu kolom, .campaign-grid setinggi 14.987px.
   Solusi: tampilkan 6 kartu pertama, sisanya disembunyikan sampai
   tombol "Muat lagi" ditekan (dipasang lewat brandfix.js).
   ============================================================ */
.campaign-grid > .campaign-card.cly-sembunyi {
  display: none !important;
}

.cly-muat-lagi {
  display: block;
  width: 100%;
  margin: 14px 0 4px;
  padding: 13px 18px;
  border-radius: 12px;
  background: #0a0a0e;
  border: 1px solid #22222c;
  color: #ff2e6a;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.cly-muat-lagi:hover {
  background: #17171e;
  border-color: #ff2e6a;
}

.cly-muat-lagi:active {
  transform: translateY(1px);
}

/* ============================================================
   6. KARTU CAMPAIGN — seragamkan dengan palet dashboard clipper
   ============================================================ */
.campaign-card {
  background: #0c0c11;
  border: 1px solid #22222c;
  border-radius: 12px;
  overflow: hidden;
}

.campaign-card:hover {
  border-color: #ff2e6a;
  background: #17171e;
}

/* ---------------------------------------------------------------
   9. IKON PLATFORM di kolom Social Media
   Ikon SVG disalin apa adanya dari konten.com (tiktok, instagram,
   youtube, threads). Di layar sempit hanya ikon; nama platform
   muncul lagi mulai 640px agar tetap terbaca di layar lebar.
   --------------------------------------------------------------- */
.pf-cell{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.pf-ico{width:18px;height:18px;flex:0 0 18px;color:#9b93a6;display:block}
.pf-cell:hover .pf-ico{color:#ff2e6a}
.pf-name{display:none}
@media (min-width:640px){.pf-name{display:inline}}

/* keterangan "Menampilkan 3 dari N" di bawah tabel */
.approved-more{margin:10px 0 0;font-size:.78rem;color:#9b93a6}

/* ---------------------------------------------------------------
   10. PIL FILTER PLATFORM = LOGO SAJA (persis konten.com)
   konten.com: "Semua" pakai teks, 4 platform HANYA logo tanpa teks.
   Diukur live: pil ikon 36x28, radius 4px, padding 4px 8px.
   --------------------------------------------------------------- */
.pill-ico{display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:28px;padding:4px 8px;border-radius:4px;flex:0 0 auto}
.pill-ico .pf-ico{width:18px;height:18px;flex:0 0 18px;color:#9b93a6}
.pill-ico:hover .pf-ico{color:#d7dcea}
.pill-ico.active .pf-ico{color:#ff2e6a}

/* Distribusi Video: logo DAN nama tetap tampil (baris lebar, muat) */
.dist-row .pf-name{display:inline}
.dist-row .pf-cell{min-width:104px}