/* ===================================================================
   ANALYTICS v2 — disamakan PERSIS dengan konten.com (Arip, 248)
   Semua nilai hasil bedah live https://konten.com/brand/analytic
   =================================================================== */

/* --- 1. Judul + tanggal sebaris (konten.com: "Analitik  17 September 2026") */
.an-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.an-head .screen-title{margin:0}
.an-date{font-size:.82rem;color:#9b93a6}

/* --- 2. Baris budget + progress bar (Clypora belum punya sama sekali) ----- */
.an-budget{margin:10px 0 14px}
.an-budget-top{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  font-size:.82rem;color:#9b93a6;margin-bottom:8px}
.an-budget-top b{color:#f5f8ff;font-weight:700}
.an-budget-top .an-remain{margin-left:auto;white-space:nowrap}
.an-budget-bar{height:8px;border-radius:999px;background:#1b1b24;
  overflow:hidden}
/* JEBAKAN SAMA seperti .dist-bar: wordmark.css memaksa
   `main div > i:not([class])` jadi 14x14 !important, sehingga bar ini
   terisi 4% padahal seharusnya 100%. Dikecualikan juga di wordmark.css. */
.an-budget-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)}

/* --- 3. Empat kartu metrik sebaris (konten.com: 4 kartu, tinggi 192px) ---- */
.an-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-bottom:14px}
.an-cards > article{background:#0c0c11;border:1px solid #22222c;
  border-radius:12px;padding:14px;display:flex;flex-direction:column;
  gap:8px;min-width:0}
.an-cards header{display:flex;align-items:center;gap:8px}
.an-cards header small{font-size:.78rem;color:#9b93a6;font-weight:600}
.an-cards > article > b{font-size:1.5rem;font-weight:800;line-height:1.1;
  color:#f5f8ff;word-break:break-word}
.an-cards .unit{font-size:.78rem;font-weight:600;color:#9b93a6}
.an-cards > article > em{font-style:normal;font-size:.72rem;color:#8a8490;
  margin-top:auto}
/* kartu CPM dibagi dua kolom, persis konten.com */
.an-cards .cpm-split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.an-cards .cpm-split span{display:block;font-size:.68rem;color:#9b93a6;
  margin-bottom:2px}
.an-cards .cpm-split strong{font-size:1rem;font-weight:800;color:#ff2e6a}
.an-cards .cpm-split strong.alt{color:#ff7fb0}

/* --- 4. Toggle segmen (Total/Kenaikan, Video/Views) ---------------------- */
.seg-toggle{display:inline-flex;gap:2px;padding:2px;background:#17171e;
  border:1px solid #22222c;border-radius:999px}
.seg-toggle .seg{border:0;background:transparent;color:#9b93a6;
  font:inherit;font-size:.74rem;font-weight:600;padding:4px 12px;
  border-radius:999px;cursor:pointer;white-space:nowrap}
.seg-toggle .seg.active{background:#24202b;color:#fff}
/* versi mini di dalam kartu Views (konten.com menaruhnya di header kartu) */
.seg-toggle.mini{margin-left:auto;padding:1px}
.seg-toggle.mini .seg{font-size:.64rem;padding:2px 8px}

/* --- 5. Donut Distribusi Video (konten.com pakai donut, Clypora belum) --- */
.donut-wrap{display:flex;justify-content:center;padding:6px 0 12px}
.donut{--gap:0;width:150px;height:150px;border-radius:50%;position:relative;
  background:conic-gradient(
    #f5f8ff 0 calc(var(--tiktok) * 1%),
    #ff5fa2 calc(var(--tiktok) * 1%) calc((var(--tiktok) + var(--instagram)) * 1%),
    #ff4d4d calc((var(--tiktok) + var(--instagram)) * 1%) calc((var(--tiktok) + var(--instagram) + var(--youtube)) * 1%),
    #9b93a6 calc((var(--tiktok) + var(--instagram) + var(--youtube)) * 1%) 100%)}
/* lubang tengah */
.donut::after{content:"";position:absolute;inset:26px;border-radius:50%;
  background:#0c0c11}
.donut-mid{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;z-index:1;gap:2px}
.donut-mid b{font-size:1.25rem;font-weight:800;color:#f5f8ff}
.donut-mid small{font-size:.7rem;color:#9b93a6}

/* --- 6. Legenda platform (dot warna + logo + nama + video + views) ------- */
.dist-legend{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:8px}
.dist-legend li{display:flex;align-items:center;gap:8px;font-size:.8rem}
.lg-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.lg-tiktok{background:#f5f8ff}
.lg-instagram{background:#ff5fa2}
.lg-youtube{background:#ff4d4d}
.lg-threads{background:#9b93a6}
.dist-legend .pf-cell{flex:1 1 auto;min-width:0}
.dist-legend b{font-weight:600;color:#9b93a6;white-space:nowrap}
.dist-legend em{font-style:normal;font-weight:700;color:#f5f8ff;
  min-width:52px;text-align:right}

/* --- 7. Footer "Total video dan views" ---------------------------------- */
.dist-total{display:flex;justify-content:space-between;align-items:center;
  gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid #1b1b24;
  font-size:.78rem;color:#9b93a6}
.dist-total b{color:#f5f8ff;font-weight:700;text-align:right}

/* --- 8. Footer Efisiensi Budget "Budget kamu bekerja Nx." --------------- */
.eff-foot{display:flex;justify-content:space-between;align-items:center;
  gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid #1b1b24;
  font-size:.76rem;color:#9b93a6;flex-wrap:wrap}
.eff-foot b{color:#f5f8ff;font-weight:700}

/* --- 12. Kontrol List Approved Video sebaris (konten.com: 2 dropdown
   + kotak cari berjajar, bukan menumpuk selebar panel) ------------------- */
.content-block .select-row{display:flex;gap:8px;flex-wrap:wrap;
  align-items:center}
.content-block .select-row .field-select{flex:0 0 auto;margin:0}
.content-block .select-row .search-field{flex:1 1 220px;min-width:0}
@media (max-width:900px){
  .content-block .select-row .field-select{flex:1 1 100%}
}

/* --- 13. Kartu CPM: konten.com TIDAK memberi footer "Semua waktu"
   pada kartu ini, jadi isinya dirapatkan supaya tingginya tetap sama
   dengan tiga kartu lain (bukan menyisakan ruang kosong). ---------------- */
.an-cards .tone-cpm{justify-content:center}

/* --- 14. Panah dropdown DOBEL (dilaporkan Arip, 17 Sep) -----------------
   Dua panah digambar dari dua sumber berbeda pada select yang sama:
     a. app.css:121  -> `.field-select:after` (segitiga CSS 7px)
     b. ui-sama.css:66 -> `background-image` chevron SVG 16px di dalam
                          `main select` (pakai !important)
   konten.com hanya punya SATU panah, berupa SVG di dalam tombol
   (dicek live: BUTTON 208x44, `:after` = none, bgImage = none, 1 svg).
   Jadi yang dipertahankan adalah chevron SVG ui-sama (paling mirip),
   dan segitiga CSS app.css dimatikan — TAPI hanya di dalam `main`,
   supaya select di luar `main` (yang tidak kena aturan ui-sama)
   tetap punya panahnya sendiri dan tidak jadi polos. */
main .field-select:after{display:none !important}

/* --- 10. Tata letak 2 kolom (konten.com: Distribusi | Efesiensi+Status) -- */
.an-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  align-items:start;margin-bottom:14px}
.an-col{display:flex;flex-direction:column;gap:12px;min-width:0}
.an-col > section{margin-bottom:0}

/* --- 11. Judul + filter sebaris (konten.com menaruh filter di kanan) ----- */
.an-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:12px}
.an-top .an-head{margin:0}
.an-top .an-filter{margin:0 0 0 auto;display:flex;gap:8px;flex-wrap:wrap;
  align-items:center;width:auto}
.an-top .an-filter .field-select{margin:0}
.an-top .an-filter .btn{white-space:nowrap}

@media (max-width:900px){
  .an-grid{grid-template-columns:1fr}
  .an-top .an-filter{margin-left:0;width:100%}
}

/* --- 9. Layar sempit: kartu metrik menumpuk ----------------------------- */
@media (max-width:900px){
  .an-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .an-cards{grid-template-columns:1fr}
  .an-budget-top .an-remain{margin-left:0;width:100%}
  .donut{width:130px;height:130px}
  .donut::after{inset:22px}
}