/* ============================================================
   SMOOTH — dimuat PALING AKHIR (setelah theme-blue-glass.css).
   Tujuan: perpindahan menu / tab / scroll halus & tanpa kedipan.
   Hapus link file ini di index.html untuk kembali ke semula.

   Penyebab kasar yang diperbaiki:
   1. html{scroll-behavior:smooth} bentrok dengan window.scrollTo()
      saat ganti halaman -> halaman baru "melayang" naik dari posisi lama.
   2. backdrop-filter dipasang di hampir semua .panel, .bo-row, input,
      tombol -> puluhan layer blur dihitung ulang tiap pindah halaman/scroll
      (berat + blur "pop" muncul belakangan = kedipan).
   3. Halaman/tab berganti instan (display:none <-> block) tanpa transisi.
   4. Tile sidebar aktif melebar mendadak (width:auto) dan label di-animasi ulang.
   ============================================================ */

/* ---------- 1. Scroll: jangan pernah "meluncur" otomatis ---------- */
html{ scroll-behavior:auto !important; }
.bo-list, .ab-table-wrap, .pair-dropdown, .tab-content{ overscroll-behavior:contain; }

/* ---------- 2. Kurangi beban blur di konten halaman ----------
   Blur hanya dipertahankan di topbar, dropdown, toast & modal (elemen
   yang memang menimpa konten). Panel/baris/input di dalam halaman memakai
   latar kaca semi-transparan tanpa blur: tampilan hampir sama, jauh lebih ringan. */
.pages *,
.pages *::before,
.pages *::after{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body.glass-on:not([data-theme="light"]) .panel,
html[data-theme="light"] .panel{ will-change:auto; }

/* Sidebar desktop sudah transparan; sidebar HP tetap blur (bar bawah) */
@media (min-width:761px){
  .app-sidebar{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}

/* ---------- 3. Transisi halaman & tab (fade + naik sedikit) ----------
   Animasi CSS otomatis berjalan setiap elemen berubah dari hidden -> tampil,
   jadi tidak perlu JS. Hanya opacity+transform (di-composite GPU, tanpa reflow). */
@keyframes qtPageIn{
  from{ opacity:0; transform:translate3d(0,8px,0); }
  to{ opacity:1; transform:none; }
}
/* Tab: fade murni (tanpa geser) supaya tidak "loncat" bersama perubahan tinggi kartu */
@keyframes qtPaneIn{
  from{ opacity:.25; }
  to{ opacity:1; }
}
.page:not([hidden]){
  animation:qtPageIn .26s cubic-bezier(.22,.8,.3,1) both;
}
.ab-tabpane:not([hidden]),
#mainTabsPanel .tab-content.active{
  animation:qtPaneIn .18s ease-out both;
}

/* ---------- 4. Tab / tombol: transisi warna lembut, tanpa "all" ---------- */
.bo-tab, .chart-tf, .tf-btn, .tab-btn, .vol-tab-btn, .ab-seg button,
.bot-mode-btn, .mobile-nav-btn{
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.bo-tab:active, .chart-tf:active, .tf-btn:active, .tab-btn:active, .side-link:active{ transform:scale(.96); }
.bo-row{ transition:border-color .18s ease, background-color .18s ease, opacity .18s ease; }
button, select, input{ -webkit-tap-highlight-color:transparent; }

/* ---------- 5. Sidebar: tile aktif melebar HALUS (tanpa lompat) ---------- */
.side-link[data-page-link]{
  width:auto; min-width:48px; max-width:100%; padding:0 9px; gap:0;
  justify-content:center; overflow:visible;
  transition:
    background-color .22s ease, border-color .22s ease,
    padding .28s cubic-bezier(.22,.8,.3,1), transform .12s ease;
}
.side-link[data-page-link] .side-ico{ transition:filter .22s ease, transform .22s ease; }
.side-link[data-page-link].active .side-ico{ transform:scale(1.04); }

/* Label selalu ada di DOM tapi tertutup (lebar 0); transisi max-width membuka-nya */
.side-link[data-page-link] .side-label{
  display:inline-block !important;
  max-width:0; margin-left:0; opacity:0; overflow:hidden; white-space:nowrap;
  font-size:13.5px; font-weight:500; color:var(--text-1);
  pointer-events:none; animation:none !important;
  transition:
    max-width .3s cubic-bezier(.22,.8,.3,1),
    margin-left .3s cubic-bezier(.22,.8,.3,1),
    opacity .2s ease;
}
.side-link[data-page-link].active{
  padding:0 16px 0 9px; justify-content:flex-start; gap:0;
}
.side-link[data-page-link].active .side-label{
  max-width:140px; margin-left:8px; opacity:1; transition-delay:0s, 0s, .05s;
}

@media (max-width:760px){
  .side-link[data-page-link]{ width:auto; min-width:42px; padding:0 6px; }
  .side-link[data-page-link].active{ padding:0 12px 0 7px; }
  .side-link[data-page-link].active .side-label{ font-size:12.5px; margin-left:6px; max-width:110px; }
}

/* ---------- 6. Hormati preferensi "kurangi gerak" ---------- */
@media (prefers-reduced-motion:reduce){
  .page:not([hidden]), .ab-tabpane:not([hidden]), #mainTabsPanel .tab-content.active{ animation:none !important; }
  .side-link[data-page-link], .side-link[data-page-link] .side-label{ transition:none !important; }
}

/* ---------- 7. Tab Autobot: garis bawah & warna berpindah halus ---------- */
.ab-tabbar > button:not(.ab-closeall){
  transition:color .2s ease, border-bottom-color .2s ease;
}
.ab-tabs-panel{ overflow-anchor:none; }
.ab-table tbody tr{ transition:background-color .15s ease; }
.ab-table td, .ab-table th{ transition:none; }

/* ---------- 8. Topbar: jangan tembus pandang saat konten di-scroll ----------
   Tema glass membuat topbar transparan penuh, sehingga isi halaman tampak
   menimpa topbar. Beri latar hampir solid + blur ringan (hanya 1 elemen). */
:root:not([data-theme="light"]) header.topbar,
:root:not([data-theme="light"]) body.glass-on header.topbar{
  background:rgba(11,13,18,.9) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
html[data-theme="light"] header.topbar{
  background:rgba(246,249,255,.92) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}

/* ============================================================
   9. Samakan kehalusan menu lain dengan Autobot
      (Dashboard, Market, Signal, Analytic, Setting)
   Hanya opacity / transform / warna -> di-composite GPU, tanpa reflow.
   ============================================================ */

/* 9a. Kartu/panel tiap halaman muncul berurutan (fade + naik sedikit).
   Animasi otomatis diputar ulang tiap halaman berpindah hidden -> tampil. */
@keyframes qtCardIn{
  from{ opacity:0; transform:translate3d(0,10px,0); }
  to{ opacity:1; transform:none; }
}
#page-dashboard:not([hidden]) .panel:not(.panel .panel),
#page-market:not([hidden])    .panel:not(.panel .panel),
#page-signal:not([hidden])    .panel:not(.panel .panel),
#page-analytic:not([hidden])  .panel:not(.panel .panel),
#page-analytic:not([hidden])  .an-card,
#page-dashboard:not([hidden]) .dx-card,
#page-setting:not([hidden])   .settings-col > *{
  animation:qtCardIn .34s cubic-bezier(.22,.8,.3,1) both;
}
/* jeda bertahap supaya terasa mengalir, bukan muncul sekaligus */
:is(#page-dashboard,#page-market,#page-signal,#page-analytic,#page-setting):not([hidden]) :is(.panel,.an-card,.dx-card,.settings-col > *):nth-child(2){ animation-delay:.04s; }
:is(#page-dashboard,#page-market,#page-signal,#page-analytic,#page-setting):not([hidden]) :is(.panel,.an-card,.dx-card,.settings-col > *):nth-child(3){ animation-delay:.08s; }
:is(#page-dashboard,#page-market,#page-signal,#page-analytic,#page-setting):not([hidden]) :is(.panel,.an-card,.dx-card,.settings-col > *):nth-child(4){ animation-delay:.12s; }
:is(#page-dashboard,#page-market,#page-signal,#page-analytic,#page-setting):not([hidden]) :is(.panel,.an-card,.dx-card,.settings-col > *):nth-child(n+5){ animation-delay:.16s; }

/* 9b. Tab / pill / segmen / tombol: warna berpindah lembut (bukan "klik" mendadak) */
.sg-tabs button, .sg-pills button, .sg-side-filter button, .sg-pager button, .sg-btn,
.mk-tabs button, .mk-seg button, .mk-pills button, .mk-btn, .mk-signal-btn,
.an-seg button, .an-refresh, .an-pager button,
.dx-mode button, .dx-seg button, .dx-btn,
#page-setting button, #page-setting select, #page-setting input{
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease, transform .12s ease;
}
.sg-tabs button:active, .sg-pills button:active, .sg-side-filter button:active,
.mk-tabs button:active, .an-seg button:active, .dx-seg button:active, .dx-mode button:active,
.sg-btn:active, .an-refresh:active, .dx-btn:active{ transform:scale(.96); }

/* 9c. Baris tabel/list: hover & baris terpilih berubah halus */
.sg-table td, .sg-m-row, .sg-pill, .sg-chip-stat,
.mk-row, .an-table td, .an-lab-table td, .an-card, .dx-prow, .dx-crow{
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

/* 9d. Tab Signal (TA/TREND/MOM/...): isi panel ringkasan berganti dengan fade lembut */
.sg-verdict, .sg-levels, .sg-cons, .sg-methods{ animation:qtPaneIn .2s ease-out both; }
.sg-levels[hidden]{ animation:none; }

/* 9e. Scroll: tidak "tembus" ke halaman & tidak melompat saat data diperbarui */
.sg-table-wrap, .sg-methods, .an-tablewrap, .mk-rows, #page-setting .setting-page-body{
  overscroll-behavior:contain; overflow-anchor:none;
}
.sg-table, .an-table, .an-lab-table{ overflow-anchor:none; }

/* 9f. Sorot fokus keyboard tetap halus */
.sg-tabs button:focus-visible, .an-seg button:focus-visible, .dx-seg button:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px;
}

/* 9g. Hormati "kurangi gerak" */
@media (prefers-reduced-motion:reduce){
  #page-dashboard *, #page-market *, #page-signal *, #page-analytic *, #page-setting *{
    animation:none !important; transition:none !important;
  }
}

/* ============================================================
   10. HP (<=760px): hilangkan blok putih di bawah & patah-patah
   Penyebab:
   - html.glass-on memakai 4 radial-gradient + background-attachment:fixed.
     Di Chrome Android ini membuat seluruh halaman digambar ulang tiap frame
     scroll (patah-patah) dan area saat toolbar browser naik/turun tidak
     sempat terlukis -> tampak BLOK PUTIH di bawah bar menu.
   - backdrop-filter blur pada bar bawah & topbar (berat di HP).
   - Animasi tak berujung (glow/scan/breathe) yang menggambar ulang box-shadow.
   - Tile menu yang animasi padding/max-width (memicu layout ulang tiap tap).
   ============================================================ */
html{ color-scheme:dark; }
html[data-theme="light"]{ color-scheme:light; }

@media (max-width:760px){
  /* 10a. Latar solid (tanpa fixed-attachment) -> tidak ada celah putih & scroll ringan */
  html, html.glass-on, html.glass-on[data-theme="light"],
  :root:not([data-theme="light"]), body, body.glass-on{
    background-attachment:scroll !important;
  }
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) html.glass-on{
    background:#0B0D12 !important;
  }
  html[data-theme="light"], html.glass-on[data-theme="light"]{
    background:#EEF3FB !important;
  }
  html{ min-height:100%; overscroll-behavior-y:contain; touch-action:manipulation; }
  /* min-height memakai vh statis: dvh berubah tiap frame saat toolbar browser naik-turun -> relayout */
  body, .app-shell{ min-height:100vh; }

  /* Aurora tipis sebagai 1 layer tetap (dikomposit GPU, tidak repaint saat scroll) */
  body::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(ellipse 70% 40% at 0% 0%, rgba(249,115,22,.10), transparent 65%),
      radial-gradient(ellipse 70% 40% at 100% 100%, rgba(91,155,255,.08), transparent 65%);
    transform:translateZ(0);
  }
  html[data-theme="light"] body::before{ display:none; }

  /* 10b. Tanpa blur di bar bawah & topbar: solid saja */
  :root:not([data-theme="light"]) .app-sidebar,
  :root:not([data-theme="light"]) body.glass-on .app-sidebar,
  html[data-theme="light"] .app-sidebar,
  :root:not([data-theme="light"]) header.topbar,
  :root:not([data-theme="light"]) body.glass-on header.topbar,
  html[data-theme="light"] header.topbar{
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  :root:not([data-theme="light"]) header.topbar,
  :root:not([data-theme="light"]) body.glass-on header.topbar{ background:#0B0D12 !important; }
  html[data-theme="light"] header.topbar{ background:#F6F9FF !important; }
  .app-sidebar{
    transform:translateZ(0); will-change:transform;
    padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px));
  }
  body{ padding-bottom:calc(82px + env(safe-area-inset-bottom, 0px)); }
  .qt-modal{ -webkit-backdrop-filter:none; backdrop-filter:none; }

  /* 10c. Tile menu: tanpa animasi lebar/padding (itu yang bikin patah saat ganti menu) */
  .side-link[data-page-link],
  .side-link[data-page-link] .side-label{
    transition:background-color .18s ease, color .18s ease, opacity .18s ease !important;
  }

  /* 10d. Transisi halaman ringan: fade saja, tanpa geser & tanpa animasi kartu bertahap */
  .page:not([hidden]){ animation:qtPaneIn .16s ease-out both; }
  #page-dashboard:not([hidden]) .panel:not(.panel .panel),
  #page-market:not([hidden])    .panel:not(.panel .panel),
  #page-signal:not([hidden])    .panel:not(.panel .panel),
  #page-analytic:not([hidden])  .panel:not(.panel .panel),
  #page-analytic:not([hidden])  .an-card,
  #page-dashboard:not([hidden]) .dx-card,
  #page-setting:not([hidden])   .settings-col > *,
  :is(#page-dashboard,#page-market,#page-signal,#page-analytic,#page-setting):not([hidden]) :is(.panel,.an-card,.dx-card,.settings-col > *){
    animation:none !important;
  }

  /* 10e. Matikan animasi tak berujung yang menggambar ulang box-shadow/posisi */
  .ab-engine.running, .ab-engine.running::before,
  #abRunBtn.on, .ab-engine.running .ab-engine-state::before{ animation:none !important; }
  .side-link[data-page-link] .side-badge{ animation:none !important; }

  /* 10f. Scroll tabel horizontal ikut jari dengan mulus */
  .ab-table-wrap, .sg-table-wrap, .an-tablewrap, .tab-content{
    -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  }
  /* hover tidak ada di layar sentuh: jangan buang tenaga untuk transisinya */
  .sg-table td, .mk-row, .an-table td, .dx-prow, .dx-crow, .ab-table tbody tr{ transition:none !important; }
}