/* =========================================================================
   TEMAHITAM.CSS — Dashboard (clipper/brand/admin): latar HITAM + aksen LOGO
   Perintah Arip 18 Sep 2026 (kode 248).

   Palet diambil LANGSUNG dari piksel file logo baru:
     paling merah   #FF043E   (ujung kiri-atas gradien)
     magenta tengah #B40589
     ungu-biru      #7202FF   (ujung kanan-bawah gradien)
   Sudut gradien logo: diagonal kiri-atas -> kanan-bawah (135deg).

   File ini dimuat PALING AKHIR di base.html supaya menang atas tema biru
   lama (#35c8f4 / #0879c9) di app.css & ui-sama.css.
   ========================================================================= */

body:has(.app-main){
  --lg1:#ff043e;   /* merah logo   */
  --lg2:#d70656;   /* merah-magenta */
  --lg3:#b40589;   /* magenta      */
  --lg4:#8f04c4;   /* ungu         */
  --lg5:#7202ff;   /* ungu-biru    */
  --lg-grad:linear-gradient(135deg,#ff043e 0%,#d70656 26%,#b40589 55%,#8f04c4 78%,#7202ff 100%);
  --lg-grad-90:linear-gradient(90deg,#ff043e 0%,#b40589 55%,#7202ff 100%);
  --lg-soft:rgba(180,5,137,.16);

  /* ---- variabel tema inti: latar jadi HITAM ---- */
  --bg:#000 !important;
  --card:#0c0c11 !important;
  --surface:#0c0c11 !important;
  --surface2:#08080c !important;
  --line:#22222c !important;
  --edge:#22222c !important;
  --ink:#f6f6fa !important;
  --muted:#8e8fa3 !important;
  --primary:#b40589 !important;
  --primary2:#7202ff !important;
  --coral:#ff043e !important;
  --acc:#e0107a !important;
  --acc2:#7202ff !important;
  --shadow:0 18px 50px rgba(0,0,0,.55) !important;

  background:
    radial-gradient(circle at 88% -4%,rgba(114,2,255,.16),transparent 34%),
    radial-gradient(circle at 4% 100%,rgba(255,4,62,.10),transparent 32%),
    #000 !important;
  color:var(--ink);
  color-scheme:dark;
}

/* sidebar + topbar ikut hitam */
body:has(.app-main) .sidebar{
  background:#050507 !important;
  border-right:1px solid #1d1d27 !important;
}
body:has(.app-main) .topbar{
  background:#050507 !important;
  border-bottom:1px solid #1d1d27 !important;
}
body:has(.app-main) .app-main{background:transparent !important}
body:has(.app-main) .sidebar hr,
body:has(.app-main) .sidebar-user{border-color:#1d1d27 !important}

/* item nav aktif: garis + kilau warna logo (bukan biru lagi) */
body:has(.app-main) .sidebar nav a:hover,
body:has(.app-main) .sidebar nav a.active{
  background:linear-gradient(105deg,rgba(255,4,62,.22),rgba(114,2,255,.12)) !important;
  box-shadow:inset 3px 0 0 #ff043e !important;
  color:#fff !important;
}

/* ---- KARTU / PANEL ---- */
body:has(.app-main) .content-block,
body:has(.app-main) .metrics article,
body:has(.app-main) .campaign-card,
body:has(.app-main) .budget-summary article,
body:has(.app-main) .form-card,
body:has(.app-main) .panel,
body:has(.app-main) .stat-trio article,
body:has(.app-main) .stat-duo article,
body:has(.app-main) dialog,
body:has(.app-main) .notification-popover{
  background:#0c0c11 !important;
  border-color:#22222c !important;
  color:var(--ink) !important;
}
body:has(.app-main) .metrics article,
body:has(.app-main) .budget-summary article{
  background:linear-gradient(145deg,#111117,#08080c) !important;
}
body:has(.app-main) .stat-hero{
  background:linear-gradient(150deg,#12101c,#08080c 62%) !important;
  border-color:#22222c !important;
}
body:has(.app-main) .stat-hero:after{
  background:radial-gradient(circle,rgba(180,5,137,.30),transparent 68%) !important;
}
body:has(.app-main) .status-card,
body:has(.app-main) .rank-grid article,
body:has(.app-main) .bank-account,
body:has(.app-main) .steps li{
  background:#08080c !important;border-color:#22222c !important;
}
body:has(.app-main) .rank-grid article.current{
  background:rgba(180,5,137,.16) !important;border-color:#ff043e !important;
}

/* ---- TOMBOL: identik warna logo ---- */
body:has(.app-main) .btn,
body:has(.app-main) button[type=submit]:not(.link-btn):not(.dialog-close),
body:has(.app-main) .btn.primary{
  background:var(--lg-grad) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 9px 24px rgba(180,5,137,.32) !important;
}
body:has(.app-main) .btn:hover,
body:has(.app-main) button[type=submit]:not(.link-btn):not(.dialog-close):hover{
  background:linear-gradient(135deg,#ff2a5c 0%,#c81570 30%,#9c19d6 70%,#8524ff 100%) !important;
  box-shadow:0 11px 28px rgba(180,5,137,.42) !important;
}
body:has(.app-main) .btn.secondary{
  background:#121218 !important;
  color:#ff5c86 !important;
  border:1px solid #3a2036 !important;
  box-shadow:none !important;
}
body:has(.app-main) .btn.secondary:hover{
  border-color:#ff043e !important;color:#ff85a5 !important;background:#17111a !important;
}
body:has(.app-main) .link-btn{color:#ff5c86 !important;background:none !important}

/* tab / pill / segmented */
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,
body:has(.app-main) .pill,
body:has(.app-main) .segmented{
  background:#121218 !important;color:#9b9cb0 !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,
body:has(.app-main) .pill.active,
body:has(.app-main) .segmented a.active,
body:has(.app-main) .segmented button.active{
  background:var(--lg-grad) !important;color:#fff !important;border-color:transparent !important;
}

/* input */
body:has(.app-main) input,
body:has(.app-main) select,
body:has(.app-main) textarea,
body:has(.app-main) .field-select select,
body:has(.app-main) .search-field{
  background:#08080c !important;border-color:#26262f !important;color:var(--ink) !important;
}
body:has(.app-main) input:focus,
body:has(.app-main) select:focus,
body:has(.app-main) textarea:focus{
  border-color:#b40589 !important;box-shadow:0 0 0 3px rgba(180,5,137,.20) !important;
}

/* progress / chart / avatar / pill angka */
body:has(.app-main) .progress,
body:has(.app-main) .budget-line{background:#1b1b24 !important}
body:has(.app-main) .progress i,
body:has(.app-main) .budget-line i,
body:has(.app-main) .chart i,
body:has(.app-main) .mini-chart i{
  background:var(--lg-grad-90) !important;
}
body:has(.app-main) .avatar,
body:has(.app-main) .count-pill,
body:has(.app-main) .notification-list article>span,
body:has(.app-main) .notification-preview-icon,
body:has(.app-main) .stat-ico{
  background:rgba(180,5,137,.18) !important;color:#ff7fb0 !important;
}
body:has(.app-main) .notification-list article.unread{background:rgba(180,5,137,.09) !important}
body:has(.app-main) .notification-count{background:#ff043e !important;color:#fff !important}

/* hero / kartu profil / cover campaign ikut gradien logo */
body:has(.app-main) .brand-profile-card,
body:has(.app-main) .detail-hero{
  background:linear-gradient(145deg,#12101c,#3d0640 55%,#24085c) !important;
}
body:has(.app-main) .campaign-cover{background:var(--lg-grad) !important}
body:has(.app-main) .campaign-cover.c1{background:linear-gradient(135deg,#ff043e,#b40589) !important}
body:has(.app-main) .campaign-cover.c2{background:linear-gradient(135deg,#b40589,#7202ff) !important}
body:has(.app-main) .campaign-cover.c3{background:linear-gradient(135deg,#8f04c4,#ff043e) !important}
body:has(.app-main) .campaign-cover.c0{background:linear-gradient(135deg,#1a0a2e,#7202ff) !important}
body:has(.app-main) .campaign-meta b,
body:has(.app-main) .text-link,
body:has(.app-main) .back,
body:has(.app-main) .eyebrow,
body:has(.app-main) .wa-link{color:#ff5c86 !important}

/* wizard / scheme / role picker */
body:has(.app-main) .wizard-steps b{border-color:#22222c !important}
body:has(.app-main) .wizard-steps b:first-child{border-color:#ff043e !important;color:#ff7fb0 !important}
body:has(.app-main) .scheme-switch a{background:#0c0c11 !important;border-color:#22222c !important}
body:has(.app-main) .scheme-switch a.active{background:rgba(180,5,137,.14) !important;border-color:#ff043e !important}
body:has(.app-main) .role-picker input:checked+span{
  border-color:#ff043e !important;background:rgba(180,5,137,.16) !important;color:#ff7fb0 !important;
}

/* badge tetap semantik (hijau/kuning/merah), cuma dasarnya digelapkan */
body:has(.app-main) .badge{background:#1b1b24 !important;color:#c9cad8 !important}

/* mobile header bar */
@media(max-width:900px){
  body:has(.app-main):before{background:#050507 !important;border-color:#1d1d27 !important}
  body:has(.app-main) .mobile-toggle{background:#15101c !important;border:1px solid #3a2036 !important;color:#ff7fb0 !important}
}

/* undang & cuan */
body:has(.app-main) .invite-earn{
  background:var(--lg-grad) !important;color:#fff !important;border:0 !important;
}
body:has(.app-main) .invite-mascot{background:rgba(0,0,0,.28) !important;color:#fff !important}

/* logo di sidebar: tanpa kotak/latar, biar ikon gradien yang bicara */
body:has(.app-main) .sidebar .brand .brand-mark{
  background:none !important;border-radius:0 !important;box-shadow:none !important;
  width:23px !important;height:23px !important;flex:0 0 23px !important;object-fit:contain !important;
}
body:has(.app-main) .sidebar .brand .brand-word{color:#fff !important}