/* ============================================================
   THEME BITGET GLASS (v1) — dimuat PALING AKHIR setelah
   theme-black.css. Menerapkan:
     1. Palette Bitget Original (cyan #5B9BFF + dark navy)
     2. Glassmorphism: panel/topbar/sidebar semi-transparan
        dengan backdrop-filter blur + saturate
     3. Aurora background gradient supaya efek glass terlihat
     4. Toggle: hapus class "glass-on" dari <body>/<html> untuk
        mematikan efek glass (palette Bitget tetap).
   ============================================================ */

/* ============================================================
   PALETTE BITGET — Override variabel warna dasar
   ============================================================ */
:root:not([data-theme="light"]){
  /* Surface (Bitget Original dark navy) */
  --bg:            #001220;
  --bg-raised:     #001627;
  --panel:         #0A1F33;
  --panel-2:       #0F2638;
  --border:        #1A3046;
  --border-soft:   #15293D;

  /* Text */
  --text-1:        #E8F4FA;
  --text-2:        #8FA5B8;
  --text-3:        #5A6E80;

  /* Action colors — tetap hijau/merah biar signal terbaca */
  --buy:           #00E5A0;
  --buy-dim:       rgba(0,229,160,.10);
  --buy-glow:      rgba(0,229,160,.20);
  --sell:          #FF5C6C;
  --sell-dim:      rgba(255,92,108,.10);
  --sell-glow:     rgba(255,92,108,.20);
  --warn:          #FFB547;
  --warn-dim:      rgba(255,181,71,.10);
  --neutral:       #6B7C8C;
  --neutral-dim:   rgba(107,124,140,.10);

  /* Accent (Bitget cyan electric) */
  --accent:       #5B9BFF;
  --accent-dim:   rgba(91,155,255,.12);
  --accent-glow:  rgba(91,155,255,.40);
  --accent-fg:    #001220;

  /* Radius */
  --radius-s: 8px;
  --radius-m: 12px;

  /* Brand mark */
  --brand-bg:     linear-gradient(135deg, #5B9BFF, #3B6FE0);
  --brand-fg:     #001220;
  --brand-shadow: 0 4px 16px rgba(91,155,255,.35);

  /* Glass variables (diaktifkan oleh body.glass-on) */
  --glass-blur:        18px;
  --glass-saturate:     1.4;
  --glass-panel:        rgba(10,31,51,.55);
  --glass-panel-2:      rgba(15,38,56,.55);
  --glass-border:       rgba(91,155,255,.18);
  --glass-border-soft:  rgba(91,155,255,.10);
  --glass-bg-sidebar:   rgba(0,12,24,.55);
  --glass-bg-topbar:    rgba(0,16,32,.55);
  --glass-bg-page:      rgba(0,12,24,.65);

  /* Aurora gradient (4 titik di sudut layar) */
  --aurora-1: rgba(91,155,255,.16);
  --aurora-2: rgba(0,180,220,.10);
  --aurora-3: rgba(255,77,157,.05);
  --aurora-4: rgba(0,229,160,.08);
}

/* ============================================================
   GLOW & TEXT-SHADOW — efek khas Bitget
   ============================================================ */
:root:not([data-theme="light"]) .ticker-price{
  text-shadow:0 0 12px rgba(91,155,255,.15);
}
:root:not([data-theme="light"]) .pair-name{
  letter-spacing:-.2px;
}

/* Side-link active: glow bar + soft tint */
:root:not([data-theme="light"]) .side-link[data-page-link].active,
:root:not([data-theme="light"]) .side-link.active{
  background:rgba(91,155,255,.08) !important;
  box-shadow:inset 0 0 0 1px rgba(91,155,255,.20);
}
:root:not([data-theme="light"]) .side-link.active::before{
  background:#5B9BFF !important;
  box-shadow:0 0 12px rgba(91,155,255,.7);
}

/* Brand mark / badge */
:root:not([data-theme="light"]) .side-brand-mark{
  background:linear-gradient(135deg,#5B9BFF,#3B6FE0) !important;
  color:#001220 !important;
  box-shadow:0 4px 16px rgba(91,155,255,.35) !important;
}
:root:not([data-theme="light"]) .side-badge{
  background:#5B9BFF !important;
  color:#001220 !important;
  box-shadow:0 0 10px rgba(91,155,255,.5) !important;
}

/* TF button active = cyan */
:root:not([data-theme="light"]) .tf-btn.active,
:root:not([data-theme="light"]) .chart-tf.active{
  background:#5B9BFF !important;
  color:#001220 !important;
}

/* Pair-icon glow halus */
:root:not([data-theme="light"]) .pair-icon{
  box-shadow:0 0 10px rgba(91,155,255,.10);
}

/* ============================================================
   PANEL — base (non-glass): gradient halus di atas
   ============================================================ */
:root:not([data-theme="light"]) .panel{
  background:var(--panel) !important;
  background-image:linear-gradient(180deg, rgba(91,155,255,.025), transparent 60%) !important;
  border-color:var(--border) !important;
  box-shadow:
    0 1px 0 rgba(91,155,255,.04) inset,
    0 4px 14px rgba(0,0,0,.3) !important;
}

/* ============================================================
   GLASS ON — efek transparansi + blur
   Class bisa ada di <html> (saat load awal, sebelum body) ATAU
   di <body> (saat sudah ready).
   ============================================================ */
html.glass-on,
body.glass-on{
  background:
    radial-gradient(ellipse 50% 40% at 0% 0%, var(--aurora-1), transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 0%, var(--aurora-2), transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 100%, var(--aurora-3), transparent 60%),
    radial-gradient(ellipse 40% 30% at 0% 100%, var(--aurora-4), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
html.glass-on body,
body.glass-on{
  background:transparent;
}
html.glass-on .app-shell,
body.glass-on .app-shell{
  background:transparent;
}

/* Glass panel */
body.glass-on:not([data-theme="light"]) .panel{
  background:var(--glass-panel) !important;
  background-image:linear-gradient(180deg, rgba(91,155,255,.08), transparent 30%) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color:var(--glass-border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 8px 32px rgba(0,0,0,.4) !important;
}
body.glass-on:not([data-theme="light"]) .panel-2,
body.glass-on:not([data-theme="light"]) .bo-row{
  background:var(--glass-panel-2) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* Glass sidebar */
body.glass-on:not([data-theme="light"]) .app-sidebar{
  background:var(--glass-bg-sidebar) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-right-color:var(--glass-border) !important;
}

/* Glass topbar */
body.glass-on:not([data-theme="light"]) header.topbar{
  background:var(--glass-bg-topbar) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom-color:var(--glass-border) !important;
}

/* Glass ticker-strip */
body.glass-on:not([data-theme="light"]) .ticker-strip{
  background:transparent !important;
}

/* Glass search-box, badge, side-foot */
body.glass-on:not([data-theme="light"]) .search-box,
body.glass-on:not([data-theme="light"]) .tf-group,
body.glass-on:not([data-theme="light"]) .icon-btn,
body.glass-on:not([data-theme="light"]) .icon-btn-mini,
body.glass-on:not([data-theme="light"]) .badge-strongbuy,
body.glass-on:not([data-theme="light"]) .bo-refresh,
body.glass-on:not([data-theme="light"]) .bo-tab,
body.glass-on:not([data-theme="light"]) .bo-row,
body.glass-on:not([data-theme="light"]) select,
body.glass-on:not([data-theme="light"]) input,
body.glass-on:not([data-theme="light"]) textarea,
body.glass-on:not([data-theme="light"]) select.pill{
  backdrop-filter:blur(8px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(8px) saturate(var(--glass-saturate));
}

/* Glass qt-toast & dropdowns */
body.glass-on:not([data-theme="light"]) .qt-toast,
body.glass-on:not([data-theme="light"]) .pair-dropdown,
body.glass-on:not([data-theme="light"]) .notif-bell-dropdown,
body.glass-on:not([data-theme="light"]) .chart-ctx-menu{
  background:var(--glass-panel) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color:var(--glass-border) !important;
  box-shadow:0 8px 32px rgba(0,0,0,.4) !important;
}

/* Glass modal/settings cards */
body.glass-on:not([data-theme="light"]) #page-setting .settings-col > *,
body.glass-on:not([data-theme="light"]) #botInfoModalBox,
body.glass-on:not([data-theme="light"]) .bot-runner-card,
body.glass-on:not([data-theme="light"]) .bot-runner-shell{
  background:var(--glass-panel) !important;
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-color:var(--glass-border) !important;
}

/* Chart wrap: transparan supaya blur background kelihatan */
body.glass-on:not([data-theme="light"]) .tv-chart-wrap,
body.glass-on:not([data-theme="light"]) #lwMainChart,
body.glass-on:not([data-theme="light"]) #lwRsiChart,
body.glass-on:not([data-theme="light"]) #lwMacdChart,
body.glass-on:not([data-theme="light"]) #abChart{
  background:transparent !important;
}

/* Autofill: pastikan gelap biar tidak bocor putih di glass input */
body.glass-on:not([data-theme="light"]) input:-webkit-autofill,
body.glass-on:not([data-theme="light"]) input:-webkit-autofill:hover,
body.glass-on:not([data-theme="light"]) input:-webkit-autofill:focus,
body.glass-on:not([data-theme="light"]) input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px var(--glass-panel) inset !important;
  box-shadow:0 0 0 1000px var(--glass-panel) inset !important;
  -webkit-text-fill-color:var(--text-1) !important;
  caret-color:var(--text-1);
  transition:background-color 99999s ease-out 0s;
}

/* ============================================================
   LIGHT THEME — versi terang Bitget (toggle data-theme="light")
   Glass tetap bisa dipakai; warna disesuaikan.
   ============================================================ */
:root[data-theme="light"]{
  --bg:            #F4F7FA;
  --bg-raised:     #FFFFFF;
  --panel:         #FFFFFF;
  --panel-2:       #F0F4F8;
  --border:        #DCE3EA;
  --border-soft:   #E6EBF0;
  --text-1:        #0E1A2B;
  --text-2:        #4A5A70;
  --text-3:        #8A99AD;
  --accent:        #00B8D4;
  --accent-dim:    rgba(0,184,212,.10);
  --accent-glow:   rgba(0,184,212,.25);
  --brand-bg:      linear-gradient(135deg, #00B8D4, #0080A8);
  --brand-fg:      #FFFFFF;
  --brand-shadow:  0 4px 14px rgba(0,184,212,.30);
  --aurora-1: rgba(0,184,212,.10);
  --aurora-2: rgba(120,200,220,.08);
  --aurora-3: rgba(255,77,109,.05);
  --aurora-4: rgba(22,199,132,.05);
  --glass-panel:        rgba(255,255,255,.65);
  --glass-panel-2:      rgba(240,244,248,.65);
  --glass-border:       rgba(0,184,212,.20);
  --glass-bg-sidebar:   rgba(255,255,255,.55);
  --glass-bg-topbar:    rgba(255,255,255,.55);
  --glass-bg-page:      rgba(244,247,250,.70);
}

/* ============================================================
   Status indicator (glass state badge — top-right optional)
   ============================================================ */
.ws-status-dot{
  position:fixed; bottom:8px; right:10px; z-index:80;
  width:8px; height:8px; border-radius:50%;
  background:var(--text-3);
  box-shadow:0 0 0 2px var(--bg);
  transition:background .3s, box-shadow .3s;
  pointer-events:none;
}
.ws-status-dot.live{
  background:#00E5A0;
  box-shadow:0 0 0 2px var(--bg), 0 0 8px rgba(0,229,160,.6);
}
.ws-status-dot.off{
  background:var(--text-3);
}

/* ============================================================
   GLASS FALLBACK — bila backdrop-filter tidak didukung,
   panel tetap solid (var(--panel)) supaya teks terbaca.
   ============================================================ */
@supports not (backdrop-filter:blur(1px)){
  body.glass-on:not([data-theme="light"]) .panel,
  body.glass-on:not([data-theme="light"]) .app-sidebar,
  body.glass-on:not([data-theme="light"]) header.topbar,
  body.glass-on:not([data-theme="light"]) .qt-toast,
  body.glass-on:not([data-theme="light"]) .pair-dropdown,
  body.glass-on:not([data-theme="light"]) .notif-bell-dropdown,
  body.glass-on:not([data-theme="light"]) .chart-ctx-menu{
    background:var(--panel) !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* ============================================================
   REDUCED MOTION — matikan glow animation
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ws-status-dot.live{box-shadow:0 0 0 2px var(--bg);}
}