/* =========================================================================
   theme.css — Sistem 4 tema dinamis untuk Moonbot user app
   -------------------------------------------------------------------------
   Dimuat SETELAH style.css. Tema dipilih lewat <body data-theme="...">.
   JS membaca `type` dari endpoint profile lalu set data-theme.

   Tema:
     default  -> tampilan & icon sekarang (TIDAK di-override di sini)
     galaxy   -> cream + emas
     black    -> navy/hitam + cyan
     elite    -> ungu (purple galaxy)

   Catatan:
   - Semua warna/aksen/background/aset brand diatur di sini lewat CSS variables.
   - `default` sengaja TIDAK punya blok override: nilai dari style.css yang dipakai,
     sehingga skin lama tetap utuh. Variabel di :root hanya nilai fallback.
   - Setiap kali file ini diubah: naikkan ?v= di index.html & bump APP_VER di
     _service-worker.js (konvensi cache-busting repo ini).

   Path aset relatif terhadap theme-engine/css/theme.css:
     ../../images/background/   -> images/background/ di root
     ../assets/                 -> theme-engine/assets/
   ========================================================================= */
/* -------------------------------------------------------------------------
   1) TOKEN DEFAULT (fallback). Tidak meng-override style.css secara paksa —
   nilai di sini hanya dipakai komponen baru yang memang membaca var(--th-*).
   ------------------------------------------------------------------------- */
:root,
body[data-theme="default"] {
  --th-bg:          #fdfdfe;
  --th-surface:     #ffffff;
  --th-surface-2:   #f5f6f8;
  --th-text:        #0f1117;
  --th-text-muted:  #898989;
  --th-accent:      #f5a623;            /* aksen brand emas saat ini */
  --th-accent-2:    #ffcf6b;
  --th-accent-grad: linear-gradient(to bottom, #ffcf6b, #f5a623);
  --th-border:      #e9ecef;
  --th-header-bg:   #ffffff;
  --th-logo:        none;               /* none = jangan swap, pakai <img> asli */
  --th-icon-filter: none;
  --th-header-bg-img: url("../../images/background/bg-purple.jpg");
  --th-bg-api-ip:   none;
  --th-bg-api-status: none;
  --th-btn-primary-shadow: none;
}
/* Header background image — hanya default yang pakai image bawaan */
body[data-theme="default"] .gradient-purple {
  background-image: var(--th-header-bg-img) !important;
}
/* Control visibility of additional video tags */
.elite-video-bg {
  display: none !important;
}
/* Android Chrome memindah <video> buram ke overlay plane. Saat modal (mis.
   kalender filter) muncul di atasnya, video dikembalikan ke compositing biasa
   dan layar kedip sesaat. Opacity < 1 membuatnya tidak pernah di-overlay. */
.elite-video-bg {
  opacity: 0.999;
}
/* KEDIP MODAL DI ANDROID — langkah kedua; tanpa mengubah desain apa pun.
   Transisi `fade` Bootstrap + munculnya .modal-backdrop memaksa Chrome
   membangun ulang compositing layer di tengah animasi; layer video yang
   sedang berjalan sempat di-reparent dan layar kedip satu frame.
   1. `translateZ(0)` + `backface-visibility` di video — layer video dipatok
      permanen di GPU sehingga tidak di-reparent saat layer modal muncul.
   2. `will-change: opacity` di modal & backdrop — browser menyiapkan layer
      overlay lebih awal, jadi saat modal dibuka tidak ada layer baru yang
      dibangun di tengah transisi fade. */
#elite-bg-video,
.elite-video-bg,
#elite-bg-video-saving {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.modal,
.modal-backdrop {
  will-change: opacity;
}
@media (max-width: 767.98px) {
  body[data-theme="black"].panel-covered:not(.nav-open) #tab-group-2 > .collapse,
  body[data-theme="black"].panel-covered:not(.nav-open) #footer-bar,
  body[data-theme="black"].panel-covered:not(.nav-open) #menu,
  body[data-theme="galaxy"].panel-covered:not(.nav-open) #tab-group-2 > .collapse,
  body[data-theme="galaxy"].panel-covered:not(.nav-open) #footer-bar,
  body[data-theme="galaxy"].panel-covered:not(.nav-open) #menu {
    visibility: hidden !important;
  }
}
/* Elemen milik tema tertentu: disembunyikan di tema lain. */
body:not([data-theme="elite"]):not([data-theme="black"]) .moonbot-bg-secondary-wrapper {
  display: none !important;
}
body:not([data-theme="black"]) .black-card-glitter,
body:not([data-theme="black"]) .black-btn-menu-video {
  display: none !important;
}
/* Asset & Profit (default): latar di belakang kartu = gradient ungu.
   Pakai `:not([data-theme])` (default melepas atributnya), bukan
   `:not([data-theme="x"])` yang ikut match di tema lain. */
body:not([data-theme]) #asset-page .top-offset,
body:not([data-theme]) #profit-page .top-offset {
  background: rgb(115, 88, 180) !important;
  background: linear-gradient(
    180deg,
    rgba(115, 88, 180, 1) 25%,
    rgba(154, 44, 181, 1) 50%
  ) !important;
}
#coin-details #elite-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  border: 0;
}
@property --glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes spin-border-pulse {
  0% { --glow-angle: 0deg; }
  100% { --glow-angle: 360deg; }
}
/* Tema default: tombol ungu/abu standar (bukan emas) sesuai desain */
body[data-theme="default"] .swal2-popup .swal2-confirm {
    background: #7066e0 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
}
body[data-theme="default"] .swal2-popup .swal2-cancel {
    background: #757b86 !important;
    color: #fff !important;
    border: none !important;
}
/* =========================================================
   BADGE SHINE ANIMATION (Elite, Galaxy, Black only)
   ========================================================= */
.badge-shine-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    margin-top: 10px;
    height: 26px;
    border-radius: 13px; /* Pill shape matches the badge */
    overflow: hidden;
}
.welcome-badge-img {
    height: 100%;
    object-fit: contain;
}
/* Kilau badge. Dulu menganimasikan `left`, yang memaksa LAYOUT + paint ulang
   tiap frame — kelas animasi paling mahal, dan ini berjalan `infinite` di
   badge yang selalu terlihat di Home. `transform: translateX()` menghasilkan
   gerakan yang sama persis tapi dijalankan compositor tanpa layout.

   `left: -100%` diukur terhadap LEBAR PARENT, sedangkan `translateX(-100%)`
   terhadap lebar elemennya sendiri (30% dari parent). Jadi angkanya dikali
   100/30 ≈ 3,333 supaya jarak tempuhnya identik. Rule ::after di tiap tema
   tetap memakai `left: -100%` sebagai titik awal, plus `skewX(-20deg)` yang
   ikut ditulis ulang di sini agar tidak tertimpa. */
@keyframes shine-sweep {
    0%   { transform: translateX(0)        skewX(-20deg); }
    20%  { transform: translateX(666.67%)  skewX(-20deg); }
    40%  { transform: translateX(1000%)    skewX(-20deg); }
    100% { transform: translateX(1000%)    skewX(-20deg); }
}
/* =========================================
   START / STOP TRADE BUTTONS — DYNAMIC TOGGLE
   ========================================= */
/* By default (no theme) hide the themed buttons, show the default ones. */
.btn-start-theme,
.btn-stop-theme {
  display: none !important;
}
/* =========================================
   THEMED START / STOP BUTTON LOOK (button-start / button-stop)
   ========================================= */
.btn-trade-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  color: #fff !important;
  font-weight: 600;
  padding: 8px 15px;
  border-radius: 6px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: filter 0.15s ease, transform 0.05s ease;
}
.btn-trade-img:hover {
  filter: brightness(1.08);
}
.btn-trade-img:active {
  transform: translateY(1px);
}
.btn-trade-img:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
/* Glow border sesuai warna gambar: border tipis senada + blur luar/dalam */
.btn-trade-start {
  background-image: var(--th-btn-start-img, linear-gradient(135deg, #24c48d, #1a9e6f)) !important;
  border: 1px solid rgba(78, 230, 175, 0.75) !important;
  box-shadow: 0 0 16px rgba(36, 196, 141, 0.65),
              inset 0 3px 5px rgba(255, 255, 255, 0.4),
              inset 0 -3px 5px rgba(0, 0, 0, 0.25),
              inset 0 0 8px rgba(120, 255, 205, 0.25);
}
.btn-trade-stop {
  background-image: var(--th-btn-stop-img, linear-gradient(135deg, #d84558, #a5303f)) !important;
  border: 1px solid rgba(255, 110, 130, 0.75) !important;
  box-shadow: 0 0 16px rgba(216, 69, 88, 0.65),
              inset 0 3px 5px rgba(255, 255, 255, 0.4),
              inset 0 -3px 5px rgba(0, 0, 0, 0.25),
              inset 0 0 8px rgba(255, 150, 165, 0.25) !important;
}
.btn-trade-pause {
  background-image: var(--th-btn-pause-img, linear-gradient(135deg, #f7b733, #d98e04)) !important;
  border: 1px solid rgba(255, 190, 90, 0.75) !important;
  box-shadow: 0 0 16px rgba(247, 160, 30, 0.65),
              inset 0 3px 5px rgba(255, 255, 255, 0.4),
              inset 0 -3px 5px rgba(0, 0, 0, 0.25),
              inset 0 0 8px rgba(255, 210, 130, 0.25) !important;
}
/* =========================================
   POWERED BY MOONBOT FOOTER
   ========================================= */
.roi-powered-by {
  background-color: #3100aa; /* Default background */
}
#saving-page #elite-bg-video-saving {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  border: 0;
}
/* =========================================================================
   POPUP INSTALL APP (info-app-ready) — di layar pendek gambar preview
   menyusut supaya footer link "Tidak dapat menemukan..." tidak terpotong
   ========================================================================= */
@media (max-height: 800px) {
.announcement-download-modal img[alt="App Preview"] {
    max-height: 36vh;
    object-fit: cover;
    object-position: center top;
  }

}
/* =========================================================================
   HEADER HOME — layar sempit: kecilkan username & badge supaya blok
   exchanger di kanan tidak terpotong
   ========================================================================= */
@media (max-width: 450px) {
.page-title .logged-in h3 {
    font-size: 13px !important;
  }

.page-title .logged-in .badge-shine-wrapper {
    height: 20px !important;
  }

}

/* =========================================================================
   MONTHLY SUMMARY SEPARATOR (Default Theme & Global Fallback)
   Pemisah bulan ber-highlight seperti di Profit
   ========================================================================= */
.month-summary-separator,
body:not([data-theme]) .month-summary-separator {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border: none !important;
  border-radius: 6px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  box-shadow: none !important;
}

.month-summary-separator h5.color-theme,
body:not([data-theme]) .month-summary-separator h5.color-theme {
  color: #1b1d21 !important;
  -webkit-text-fill-color: #1b1d21 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* =========================================================================
   PROFIT LIST TABLE WIDTH (Samakan dengan Credit Default — margin 8px)
   ========================================================================= */
#profit-page .pt-1.mt-2 > .card.card-style,
body:not([data-theme]) #profit-page .pt-1.mt-2 > .card.card-style {
  margin: 0px !important;
  border-radius: 12px 12px 0 0 !important;
}
#profit-page .pt-1.mt-2 > .card.card-style > .content,
body:not([data-theme]) #profit-page .pt-1.mt-2 > .card.card-style > .content {
  margin: 0 8px 8px 8px !important;
}
#profit-page .pt-1.mt-2 > .card.card-style > .d-flex,
body:not([data-theme]) #profit-page .pt-1.mt-2 > .card.card-style > .d-flex {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
#profit-page .pt-1.mt-2 > .card.card-style > .d-flex > a.font-500,
body:not([data-theme]) #profit-page .pt-1.mt-2 > .card.card-style > .d-flex > a.font-500 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#profit-page .pt-1.mt-2 > .card.card-style > .d-flex > .filter-box,
body:not([data-theme]) #profit-page .pt-1.mt-2 > .card.card-style > .d-flex > .filter-box {
  margin-right: 0 !important;
}




/* =========================================================================
   LOADING SATU HALAMAN selama video latar tema belum siap
   Dipasang/dilepas lewat window.showThemeBgLoading / hideThemeBgLoading di
   theme-engine.js. Menutupi seluruh viewport supaya halaman tidak terlihat
   gelap polos sementara video latar masih diunduh saat login / ganti tema.
   ========================================================================= */
#theme-bg-loading {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: #07090f;
}
#theme-bg-loading.show {
  display: flex;
}
#theme-bg-loading .theme-bg-loading-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: #f2c14e;
  animation: themeBgLoadingSpin 0.8s linear infinite;
}
@keyframes themeBgLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Efek header bergiliran: kilau badge --------------------------------
   Penjadwalnya di theme-engine.js (HEADER_FX_STEPS) lewat atribut
   <body data-header-fx>. Selama atribut ada, kilau badge hanya menyapu SATU
   kali saat gilirannya ("shine") dan diam di luar itu. Tanpa atribut, rule
   `infinite` asli di tiap tema yang berlaku.
   ------------------------------------------------------------------------ */
body[data-header-fx]:not([data-header-fx="shine"]) .badge-shine-wrapper.shine-active::after {
  animation: none;
}
/* [data-theme] ikut ditulis supaya spesifisitasnya mengalahkan rule tiap tema
   (berkas tema dimuat SESUDAH theme.css). */
body[data-theme][data-header-fx="shine"] .badge-shine-wrapper.shine-active::after {
  animation: shine-sweep 5s cubic-bezier(0.4, 0, 0.2, 1) 1;
}