/* ============================================================
   SHELL — sidebar kiri + halaman (Dashboard, Autobot, Signal,
   Analytic, Setting) + Panel Breakout 4H.
   Memakai variabel warna dari style.css supaya ikut tema.
   ============================================================ */
:root{ --sidebar-w:208px; }

.app-shell{
  display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  min-height:100vh;
}
.app-content{min-width:0;}

/* ---------- Sidebar ---------- */
.app-sidebar{
  position:sticky; top:0; align-self:start; height:100vh;
  display:flex; flex-direction:column; gap:22px;
  padding:16px 12px; z-index:60;
  background:var(--bg-raised); border-right:1px solid var(--border);
}
.side-brand{display:flex; align-items:center; gap:10px; padding:2px 8px 0;}
.side-brand-mark{
  width:30px; height:30px; flex:none; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:#14102a;
  background:linear-gradient(135deg,#F97316,#F97316);
}
.side-brand-name{font-weight:700; font-size:14px; letter-spacing:.01em; color:var(--text-1); white-space:nowrap;}

.side-nav{display:flex; flex-direction:column; gap:4px;}
.side-link{
  position:relative; display:flex; align-items:center; gap:12px;
  width:100%; padding:10px 12px; border:0; border-radius:10px;
  background:transparent; color:var(--text-2);
  font:inherit; font-size:13.5px; font-weight:500; text-align:left; cursor:pointer;
  transition:background-color .15s, color .15s;
}
.side-link:hover{background:var(--panel-2); color:var(--text-1);}
.side-link:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.side-link.active{background:var(--accent-dim); color:var(--text-1); font-weight:600;}
.side-link.active::before{
  content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:var(--accent);
}
.side-ico{width:20px; height:20px; flex:none; display:inline-flex;}
.side-ico svg{width:100%; height:100%;}
.side-link.active .side-ico{color:var(--accent);}

/* Badge jumlah posisi aktif (Autobot) */
.side-badge{
  margin-left:auto; flex:none; min-width:20px; height:20px; padding:0 6px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--accent); color:#fff;
  font-family:var(--font-num); font-size:11px; font-weight:700; line-height:1;
}
.side-badge[hidden]{display:none;}

/* Brand pindah ke sidebar -> sembunyikan brand lama di topbar (desktop) */
.app-content header.topbar .brand{display:none;}
footer.status-bar{left:var(--sidebar-w);}

/* ---------- Halaman ---------- */
.pages{min-width:0;}
.page[hidden]{display:none;}
.legacy-panels[hidden]{display:none !important;}

.page-empty{
  max-width:520px; margin:12vh auto 0; padding:0 20px; text-align:center;
}
.page-empty h2{font-size:20px; font-weight:700; color:var(--text-1); margin-bottom:8px;}
.page-empty p{font-size:13.5px; line-height:1.6; color:var(--text-2);}

/* ---------- Dashboard ---------- */
.dash-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px;
  padding:20px clamp(14px,2.5vw,32px) 30px; align-items:start;
}
.dash-main, .dash-side{display:flex; flex-direction:column; gap:18px; min-width:0;}
#page-dashboard .tv-chart-wrap{height:clamp(440px,64vh,780px);}

/* ---------- Desktop: tinggi chart mengikuti tinggi kolom kanan ----------
   Kolom kiri (chart) di-stretch setinggi kolom kanan (Skor + Breakout),
   lalu area chart mengisi sisa tinggi setelah toolbar. Ukuran inline dari
   fitur tarik-tinggi (JS) sengaja dikalahkan dengan !important di sini. */
@media (min-width:1101px){
  .dash-grid{align-items:stretch;}
  .dash-main > .panel{flex:1 1 auto; display:flex; flex-direction:column; min-height:0;}
  #page-dashboard .tv-chart-wrap{
    display:flex; flex-direction:column;
    flex:1 1 0; height:auto !important; min-height:440px;
    contain:size;            /* tinggi chart tidak ikut menentukan tinggi baris grid */
  }
  #page-dashboard #lwMainChart{flex:1 1 0; height:auto !important; min-height:120px; min-width:0;}
  #page-dashboard #lwRsiChart, #page-dashboard #lwMacdChart{flex:none;}
  #page-dashboard .chart-resize-handle{display:none;}
  .dash-main > .panel > .chart-toolbar{flex:none;}
}

/* ---------- Panel Breakout ---------- */
.bo-body{padding:12px 14px 14px;}
.bo-refresh{
  width:26px; height:26px; border-radius:8px; border:1px solid var(--border);
  background:transparent; color:var(--text-2); font-size:14px; line-height:1; cursor:pointer;
}
.bo-refresh:hover{color:var(--text-1); border-color:var(--accent);}
.bo-refresh:focus-visible, .bo-tab:focus-visible, .bo-row:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.bo-refresh.spin{animation:bo-spin .8s linear infinite;}
@keyframes bo-spin{to{transform:rotate(360deg);}}

.bo-tabs{display:flex; gap:6px; margin-bottom:10px;}
.bo-tab{
  flex:1; padding:7px 8px; border-radius:8px; border:1px solid var(--border);
  background:transparent; color:var(--text-2); font:inherit; font-size:12px; font-weight:600; cursor:pointer;
}
.bo-tab:hover{color:var(--text-1);}
.bo-tab.active{background:var(--accent-dim); color:var(--text-1); border-color:var(--accent);}
.bo-n{font-family:var(--font-num); font-weight:500; margin-left:3px; color:var(--text-3);}
.bo-tab.active .bo-n{color:var(--text-2);}

.bo-list{display:flex; flex-direction:column; gap:6px; max-height:380px; overflow-y:auto; overflow-x:hidden; padding-right:4px; scrollbar-gutter:stable;}
.bo-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-auto-rows:auto; gap:4px 10px; align-items:center;
  width:100%; padding:9px 11px; border-radius:10px; text-align:left;
  flex:0 0 auto; height:auto; min-height:0; /* jangan diperas oleh max-height .bo-list */
  box-sizing:border-box; overflow:hidden;
  border:1px solid var(--border-soft); background:var(--panel-2);
  color:var(--text-1); font:inherit; cursor:pointer;
  transition:border-color .15s, background-color .15s;
}
.bo-row:hover{border-color:var(--accent);}
.bo-row.current{border-color:var(--accent); background:var(--accent-dim);}
.bo-row.lost{opacity:.6;}
.bo-sym{font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bo-pill{
  flex:none; line-height:1.2;
  font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:3px 8px; border-radius:999px;
}
.bo-pill.long{color:var(--buy); background:var(--buy-dim);}
.bo-pill.short{color:var(--sell); background:var(--sell-dim);}
.bo-meta{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:2px 12px;
  font-size:11px; line-height:1.4; color:var(--text-2); font-family:var(--font-num);
  min-width:0;
}
.bo-meta > span{white-space:nowrap;}
.bo-meta .warn{color:var(--warn);}
.bo-empty{padding:18px 6px; text-align:center; font-size:12.5px; line-height:1.55; color:var(--text-2);}
.bo-foot{margin-top:10px; font-size:10.5px; line-height:1.5; color:var(--text-3);}

/* ---------- Tablet: sidebar jadi ikon saja ---------- */
@media (max-width:1100px){
  :root{ --sidebar-w:64px; }
  .side-brand-name, .side-label{display:none;}
  .side-brand{justify-content:center; padding:2px 0 0;}
  .side-link{justify-content:center; padding:11px 0;}
  .side-link.active::before{left:-12px;}
  .side-badge{position:absolute; top:3px; right:5px; margin-left:0; min-width:17px; height:17px; padding:0 4px; font-size:10px;}
  .dash-grid{grid-template-columns:minmax(0,1fr);}
  .dash-side{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start;}
}

/* ---------- HP: sidebar jadi bar bawah ---------- */
@media (max-width:760px){
  .app-shell{display:block;}
  .app-sidebar{
    position:fixed; top:auto; bottom:0; left:0; right:0; height:auto;
    flex-direction:row; gap:0; padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));
    border-right:0; border-top:1px solid var(--border);
  }
  .side-brand{display:none;}
  .side-nav{flex-direction:row; width:100%; gap:2px;}
  .side-link{flex-direction:column; gap:3px; padding:7px 2px; font-size:10.5px; min-height:48px; justify-content:center;}
  .side-label{display:block;}
  .side-badge{top:2px; right:calc(50% - 22px); right:max(2px, calc(50% - 24px));}
  .side-link.active::before{display:none;}
  .app-content header.topbar .brand{display:flex;}
  footer.status-bar{left:0;}
  .mobile-nav{display:none !important;}
  body{padding-bottom:82px;}
  .dash-grid{padding:12px 10px 18px; gap:12px;}
  .dash-main, .dash-side{gap:12px;}
  .dash-side{display:flex;}
  #page-dashboard .tv-chart-wrap{height:330px;}
  .bo-list{max-height:320px;}
}

@media (prefers-reduced-motion:reduce){
  .side-link, .bo-row{transition:none;}
  .bo-refresh.spin{animation:none;}
}

/* ---------- Topbar + Market Pulse satu baris (desktop >= 1100px) ---------- */
@media (min-width:1100px){
  header.topbar.topbar-merged{ height:56px; gap:14px; }
  header.topbar.topbar-merged .search-box{ height:38px; width:170px; flex:0 1 170px; min-width:120px; }
  header.topbar.topbar-merged .ticker-strip{
    flex:1 1 auto; min-width:0; margin:0; padding:0 0 0 14px;
    gap:14px; flex-wrap:nowrap; background:none; border:0; border-left:1px solid var(--border);
    height:32px; overflow:visible;
  }
  header.topbar.topbar-merged .ticker-strip::before{ display:none; }
  header.topbar.topbar-merged .pair-name{ font-size:14px; white-space:nowrap; }
  header.topbar.topbar-merged .pair-icon{ width:24px; height:24px; box-shadow:none; }
  header.topbar.topbar-merged .ticker-price{ font-size:19px; letter-spacing:-.4px; white-space:nowrap; }
  header.topbar.topbar-merged .ticker-change{ font-size:12px; white-space:nowrap; }
  header.topbar.topbar-merged .badge-strongbuy{ padding:4px 10px; font-size:11px; white-space:nowrap; }
  header.topbar.topbar-merged .ticker-mini{ gap:16px; margin-left:auto; flex-wrap:nowrap; }
  header.topbar.topbar-merged .hstat{ white-space:nowrap; }
  header.topbar.topbar-merged .header-stats{ gap:14px; margin-left:0; padding-left:14px; border-left:1px solid var(--border); }
  header.topbar.topbar-merged .pair-dropdown{ top:calc(100% + 14px); }
}
/* Ruang makin sempit -> sembunyikan info yang paling tidak penting */
@media (min-width:1100px) and (max-width:1699px){
  header.topbar.topbar-merged .market-status{ display:none; }
  header.topbar.topbar-merged .ticker-mini .hstat:nth-child(2){ display:none; }
}
@media (min-width:1100px) and (max-width:1499px){
  header.topbar.topbar-merged .header-stats{ display:none; }
  header.topbar.topbar-merged .ticker-mini .hstat:nth-child(4){ display:none; }
}
@media (min-width:1100px) and (max-width:1299px){
  header.topbar.topbar-merged .ticker-mini{ display:none; }
  header.topbar.topbar-merged .badge-strongbuy .conf{ display:none; }
}

/* Warna per menu sidebar (ikon selalu berwarna; menu aktif: latar + garis + label ikut warna menunya) */
.side-link[data-page-link="dashboard"]{--lc:#60a5fa;}  /* biru */
.side-link[data-page-link="market"]{--lc:#34d399;}     /* hijau */
.side-link[data-page-link="autobot"]{--lc:#F97316;}    /* ungu */
.side-link[data-page-link="signal"]{--lc:#f472b6;}     /* pink */
.side-link[data-page-link="analytic"]{--lc:#22d3ee;}   /* cyan */
.side-link[data-page-link="setting"]{--lc:#94a3b8;}    /* abu kebiruan */
.side-link[data-page-link] .side-ico{color:var(--lc);}
.side-link[data-page-link]:hover{background:rgba(255,255,255,.04); background:color-mix(in srgb, var(--lc) 10%, transparent);}
.side-link[data-page-link].active{background:rgba(255,255,255,.06); background:color-mix(in srgb, var(--lc) 18%, transparent);}
.side-link[data-page-link].active::before{background:var(--lc);}
.side-link[data-page-link].active .side-ico{color:var(--lc); filter:drop-shadow(0 0 6px var(--lc));}

/* Badge jumlah posisi aktif: oranye */
.side-badge{background:#f97316; color:#fff; box-shadow:0 0 8px rgba(249,115,22,.45);}

/* ============================================================
   HALAMAN SETTING — tampil seperti halaman lain (bukan popup).
   Kartu modal lama diratakan: tanpa latar/border kartu besar,
   judul seperti judul halaman Autobot, tiap bagian jadi panel.
   ============================================================ */
#page-setting > .setting-page-body{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important; max-width:none !important; width:100% !important;
  padding:22px clamp(14px,2.5vw,32px) 34px !important; margin:0 !important;
}
#page-setting .setting-page-body > div:first-child{margin-bottom:18px !important;}
#page-setting .setting-page-body > div:first-child h3{
  font-size:28px !important; font-weight:800 !important; letter-spacing:-.01em;
  color:var(--text-1) !important;
}
#page-setting .settings-grid{gap:18px !important; align-items:start;}
#page-setting .settings-col{display:flex; flex-direction:column; gap:18px;}
#page-setting .settings-col > *{
  margin:0 !important; padding:18px !important;
  border:1px solid var(--border) !important; border-radius:var(--radius-m) !important;
  background:var(--panel) !important;
}
#page-setting .settings-col > [style*="display:none"]{display:none !important;}
#page-setting .settings-col > *:first-child{padding:18px !important; border:1px solid var(--border) !important;}
#page-setting label{color:var(--text-1);}