/* =========================================================================
   UI-SAMA — penyeragaman warna & presisi kontrol seluruh dashboard clipper
   Patokan: halaman Dashboard (biru gelap Clypora).
   Dimuat PALING AKHIR. 16 Sep 2026.
   ========================================================================= */

:root{
  /* palet resmi diambil dari Dashboard */
  --uc-bg-1:#000000;          /* atas gradien */
  --uc-bg-2:#050507;          /* tengah */
  --uc-bg-3:#0c0c11;          /* bawah */
  --uc-card:#0c0c11;          /* isi kartu */
  --uc-card-2:#0a0a0e;        /* kartu sekunder / lebih gelap */
  --uc-line:#22222c;          /* garis tepi kartu */
  --uc-line-soft:#1b1b24;     /* garis pemisah halus */
  --uc-accent:#ff2e6a;        /* aksen logo Clypora */
  --uc-text:#f5f8ff;
  --uc-muted:#a09aa8;
}

/* ---------- 1. LATAR HALAMAN: samakan dengan Dashboard ---------- */
body{
  background-image:linear-gradient(var(--uc-bg-1) 0%,var(--uc-bg-2) 45%,var(--uc-bg-3) 100%) !important;
  background-color:var(--uc-bg-1) !important;
  background-attachment:fixed !important;
}
main.app-main{
  background-image:linear-gradient(var(--uc-bg-1) 0%,var(--uc-bg-2) 45%,var(--uc-bg-3) 100%) !important;
  background-color:transparent !important;
}
/* halaman yang sebelumnya memakai latar hitam / cokelat sendiri */
.kt-page,.lb,.rank-page,.rank-hero{background:transparent !important;}
.lb{background-image:none !important;}

/* ---------- 2. KARTU: satu warna, satu radius, satu garis tepi ---------- */
.kt-panel,.kt-card,.kt-notif-card,.kt-notif-bar,.kt-tabbar,
.lb-table-card,.lb-pod-card,.lb-toggle,
.pm-card,.card,.panel,.form-card,
.stat-card,.metric-card,.chart-card,.summary-card{
  background-color:var(--uc-card) !important;
  border:1px solid var(--uc-line) !important;
  border-radius:12px !important;
}
/* baris di dalam kartu jangan ikut jadi kartu */
.kt-notif-item,.lb-row,.pm-item{
  background-color:var(--uc-card-2) !important;
  border-color:var(--uc-line-soft) !important;
}
.kt-notif-item:hover,.lb-row:hover,.pm-item:hover{
  background-color:#17171e !important;
}
/* header tabel & pemisah */
.lb-thead,.kt-thead{
  background-color:#0b0f22 !important;
  border-bottom:1px solid var(--uc-line) !important;
}

/* ---------- 3. SELECT: panah kustom, presisi di tengah ---------- */
main select,
.kt-page select,.lb select,.pmx-form select{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  background-color:var(--uc-card-2) !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a09aa8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
  background-size:16px 16px !important;
  padding:0 38px 0 14px !important;
  height:40px !important;
  line-height:38px !important;
  border:1px solid var(--uc-line) !important;
  border-radius:10px !important;
  color:var(--uc-text) !important;
  font-size:14px !important;
  cursor:pointer;
}
main select:focus{outline:none;border-color:var(--uc-accent) !important;}
/* buang panah ganda di Firefox/IE */
main select::-ms-expand{display:none !important;}
main select option{background:#0b0f22;color:var(--uc-text);}

/* ---------- 4. INPUT NUMBER: buang stepper naik-turun bawaan ---------- */
main input[type=number]{
  -moz-appearance:textfield !important;
  appearance:textfield !important;
}
main input[type=number]::-webkit-outer-spin-button,
main input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none !important;
  appearance:none !important;
  margin:0 !important;
}

/* ---------- 5. INPUT & TEXTAREA: tinggi & radius seragam ---------- */
/* Input DI DALAM kotak cari dikecualikan: bingkainya milik pembungkus
   (.search-field), kalau input ikut diberi border+radius hasilnya
   "kotak di dalam kotak". Dilaporkan Arip 17 Sep di halaman Banding. */
main input[type=text]:not(.search-field input),
main input[type=tel]:not(.search-field input),
main input[type=email]:not(.search-field input),
main input[type=number]:not(.search-field input),
main input[type=password]:not(.search-field input),
main input[type=search]:not(.search-field input){
  height:44px !important;
  padding:0 14px !important;
  background-color:var(--uc-card-2) !important;
  border:1px solid var(--uc-line) !important;
  border-radius:10px !important;
  color:var(--uc-text) !important;
  font-size:14px !important;
  box-sizing:border-box !important;
}
main input:focus,main textarea:focus{
  outline:none !important;border-color:var(--uc-accent) !important;
}
main input::placeholder,main textarea::placeholder{color:#6f7690 !important;}

/* ---------- 6. TOMBOL: tinggi seragam 40px, radius sama ---------- */
main button:not(.dialog-close):not(.pmx-close):not([data-nav-toggle]):not(.reward-info):not(.rank-card):not(.rank-modal-close):not(.pill-tab):not(.ap-tab):not(.ap-pf-btn):not(.ap-view-btn):not(.st-avatar-btn):not(.st-sec-btn),
main .btn,main a.btn{
  min-height:40px !important;
  border-radius:10px !important;
  font-size:14px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  padding:0 16px !important;
  box-sizing:border-box !important;
}
/* tombol kecil di dalam tab/filter tetap boleh lebih pendek tapi seragam */
main .kt-tab,main .lb-toggle button,main .kt-filter{
  min-height:36px !important;
  border-radius:999px !important;
}

/* ---------- 7. DETAILS/SUMMARY: panah kustom presisi ---------- */
main details>summary{
  list-style:none !important;
  cursor:pointer;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px;
}
main details>summary::-webkit-details-marker{display:none !important;}
main details>summary:not(:has(svg)):not(:has(i))::after{
  content:"";
  flex:0 0 16px;width:16px;height:16px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a09aa8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  transition:transform .18s ease;
}
main details[open]>summary:not(:has(svg)):not(:has(i))::after{transform:rotate(180deg);}

/* ---------- 8. POPUP / DIALOG: seragam dengan kartu ---------- */
dialog,.dialog-card,.pmx-card,.notification-popover{
  background-color:var(--uc-card) !important;
  border:1px solid var(--uc-line) !important;
  border-radius:14px !important;
  color:var(--uc-text) !important;
}
dialog::backdrop{background:rgba(3,6,18,.72) !important;}
.notification-popover{box-shadow:0 18px 48px rgba(0,0,0,.55) !important;}
/* tombol tutup selalu bulat presisi */
.dialog-close,.pmx-close{
  width:32px !important;height:32px !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  border-radius:999px !important;
  padding:0 !important;line-height:1 !important;
  background:#1a0d18 !important;border:1px solid var(--uc-line) !important;
  color:var(--uc-muted) !important;
}
.dialog-close:hover,.pmx-close:hover{background:#232a48 !important;color:#fff !important;}

/* ---------- 9. IKON SEJAJAR TEKS ---------- */
main .nav-icon,main svg.icon{vertical-align:middle;flex:0 0 auto;}
main button svg,main .btn svg{flex:0 0 auto;}

/* ---------- 10. KOTAK SISA: seragamkan warna per nama asli ---------- */
/* main tiap halaman jangan punya warna sendiri */
main.app-main,
.kt-page,.lb,.rank-page{background-color:transparent !important;}

/* kartu utama semua halaman */
.rank-role,.rank-card,
.campaign-featured,
.clipper-campaign-card,
.kt-idcard,.kt-notif-list,
.refresh-popover,
.lb-pod-top{
  background-color:var(--uc-card) !important;
  border:1px solid var(--uc-line) !important;
}
/* Kartu campaign clipper SENGAJA 6px meniru kartu /campaigns konten.com
   (diukur live 2x berturut: 175x234, radius 6px). Hanya `.rank-card`
   yang tetap 12px. */
.rank-card{border-radius:12px !important;}
.campaign-featured,.kt-notif-list,.kt-idcard{border-radius:14px !important;}
.lb-pod-top{border-radius:14px 14px 0 0 !important;}
.rank-role{border-radius:20px !important;}

/* isi kartu campaign ikut warna kartu */
.clipper-campaign-card .cbody{background-color:transparent !important;}

/* baris tabel & notifikasi: lebih gelap dari kartu, tetap kontras */
.lb-row,.kt-notif-item{
  background-color:var(--uc-card-2) !important;
}
.lb-row:hover,.kt-notif-item:hover{background-color:#17171e !important;}

/* sudut kotak grafik seragam */
main .chart-wrap,main .chart-box{border-radius:12px !important;}

/* ---------- 12. DETAILS berikon: pakai ikon asli, putar saat terbuka ---------- */
/* jangan tambah panah kedua bila summary sudah punya svg/i sendiri */
main details>summary>svg:last-child,
main details>summary>i:last-child>svg,
main details>summary>i:last-child{
  transition:transform .18s ease;
  flex:0 0 auto;
}
main details[open]>summary>svg:last-child,
main details[open]>summary>i:last-child{
  transform:rotate(180deg);
}

/* dropdown analytics-range: kotak presisi, ikon rapat di kanan */
:is(.analytics-range,.earning-range,.range-picker)>summary{
  height:40px !important;
  padding:0 12px !important;
  border-radius:10px !important;
  background:var(--uc-card-2) !important;
  border:1px solid var(--uc-line) !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  box-sizing:border-box !important;
}
:is(.analytics-range,.earning-range,.range-picker)>summary>i,
:is(.analytics-range,.earning-range,.range-picker)>summary>svg{
  width:18px !important;height:18px !important;
  display:inline-flex !important;
  align-items:center !important;justify-content:center !important;
}
/* panel pilihan yang muncul */
:is(.analytics-range,.earning-range,.range-picker)[open]>summary{border-color:var(--uc-accent) !important;}
:is(.analytics-range,.earning-range,.range-picker)>div,:is(.analytics-range,.earning-range,.range-picker)>ul{
  background:var(--uc-card) !important;
  border:1px solid var(--uc-line) !important;
  border-radius:10px !important;
  margin-top:6px !important;
  overflow:hidden !important;
}

/* tombol Total / Kenaikan sejajar tinggi dengan dropdown */
.analytics-controls{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.analytics-controls>button{
  height:40px !important;min-height:40px !important;
  border-radius:10px !important;
  padding:0 14px !important;
}

/* ---------- 13. FIX dropdown analytics-range: ikon di DALAM kotak ---------- */
/* Masalah: <i> meluber keluar kotak (kotak R=191, ikon R=205) dan ikonnya
   panah naik-turun. Diganti jadi satu panah bawah, presisi di dalam. */
:is(.analytics-range,.earning-range,.range-picker){position:relative;display:inline-block;}
:is(.analytics-range,.earning-range,.range-picker)>summary{
  width:auto !important;
  min-width:180px !important;
  padding:0 38px 0 12px !important;   /* ruang untuk ikon di kanan */
  justify-content:flex-start !important;
  overflow:hidden !important;
}
:is(.analytics-range,.earning-range,.range-picker)>summary>b{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-weight:400 !important;
}
/* ikon panah: dipaku di dalam kotak, tidak ikut mendorong lebar */
:is(.analytics-range,.earning-range,.range-picker)>summary>i{
  position:absolute !important;
  right:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:16px !important;height:16px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  pointer-events:none !important;
}
/* ganti panah naik-turun jadi satu panah bawah */
:is(.analytics-range,.earning-range,.range-picker)>summary>i>svg{display:none !important;}
:is(.analytics-range,.earning-range,.range-picker)>summary>i::after{
  content:"";
  width:16px;height:16px;display:block;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a09aa8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  transition:transform .18s ease;
}
:is(.analytics-range,.earning-range,.range-picker)[open]>summary>i::after{transform:rotate(180deg);}
/* ikon kalender kiri */
:is(.analytics-range,.earning-range,.range-picker)>summary>span{
  flex:0 0 16px !important;width:16px !important;height:16px !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  margin-right:8px !important;
}
:is(.analytics-range,.earning-range,.range-picker)>summary>span>svg{
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
}
/* panel pilihan: melayang, tidak mendorong grafik */
:is(.analytics-range,.earning-range,.range-picker)>div{
  position:absolute !important;
  top:calc(100% + 6px) !important;
  left:0 !important;right:auto !important;
  min-width:100% !important;
  z-index:40 !important;
  display:flex !important;flex-direction:column !important;
  padding:6px !important;gap:2px !important;
  box-shadow:0 14px 34px rgba(0,0,0,.5) !important;
}
:is(.analytics-range,.earning-range,.range-picker)>div>button{
  width:100% !important;
  justify-content:flex-start !important;
  height:36px !important;min-height:36px !important;
  border-radius:8px !important;
  background:transparent !important;border:0 !important;
  color:var(--uc-muted) !important;
  padding:0 10px !important;
}
:is(.analytics-range,.earning-range,.range-picker)>div>button:hover{background:#1a2040 !important;color:#fff !important;}
:is(.analytics-range,.earning-range,.range-picker)>div>button.active{
  background:rgba(255,46,106,.14) !important;color:var(--uc-accent) !important;
}

/* ---------- 14. Dropdown rentang: jangan melar melewati tepi layar ---------- */
:is(.analytics-range,.earning-range,.range-picker){
  max-width:100% !important;
  min-width:0 !important;
}
:is(.analytics-range,.earning-range,.range-picker)>summary{
  max-width:100% !important;
  min-width:0 !important;
  width:100% !important;
}
/* induk yang menampung dropdown: izinkan mengecil */
.analytics-controls,.earning-controls{
  min-width:0 !important;
  max-width:100% !important;
}
.analytics-controls>*,.earning-controls>*{min-width:0 !important;}

@media (max-width:520px){
  :is(.analytics-range,.earning-range,.range-picker)>summary{
    min-width:0 !important;
    padding-right:34px !important;
  }
  :is(.analytics-range,.earning-range,.range-picker)>summary>b{
    font-size:13px !important;
  }
}

/* ---------- 15. Halaman Rank: toggle & badge presisi ---------- */
/* toggle CLIPPER/CREATOR: dua tombol muat penuh, teks tidak terpotong */
.rank-role{
  display:inline-flex !important;
  align-items:center !important;
  padding:4px !important;
  gap:4px !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  background:var(--uc-card-2) !important;
  border:1px solid var(--uc-line) !important;
  border-radius:999px !important;
  box-sizing:border-box !important;
}
.rank-role>button{
  flex:1 1 auto !important;
  min-width:0 !important;
  height:34px !important;min-height:34px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  border:0 !important;
  background:transparent !important;
  color:var(--uc-muted) !important;
  font-size:12px !important;
  letter-spacing:.06em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.rank-role>button.active{
  background:linear-gradient(180deg,#ff6f9e 0%,var(--uc-accent) 52%,#8f04c4 100%) !important;
  color:#ffffff !important;
  font-weight:600 !important;
}
.rank-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  min-width:0 !important;
}
.rank-head>*{min-width:0 !important;}

/* badge "Bonus Base" ikut palet, jangan hitam pekat */
.rank-page span[class=""],
.rank-hero span,
main span[style*="background"]{background-color:var(--uc-card-2) !important;}

/* ---------- 16. Tab bar: bisa digeser, tidak terpotong ---------- */
.kt-tabbar,.kt-notif-bar>.kt-tabbar{
  display:flex !important;
  gap:6px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  padding:6px !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
.kt-tabbar::-webkit-scrollbar{display:none !important;}
.kt-tabbar>*{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
/* beri tanda bisa digeser: fade halus di tepi kanan */
.kt-notif-bar{position:relative !important;min-width:0 !important;}

@media (max-width:520px){
  .kt-tabbar>*{font-size:13px !important;padding:0 12px !important;}
}