/* ============================================================
   DASHBOARD — pusat kendali: ringkasan akun, posisi aktif,
   peluang, P&L harian, aktivitas, lalu chart kecil di bawah.
   Memakai variabel tema (ikut mode gelap/terang).
   ============================================================ */
.dx{ padding:20px clamp(14px,2.5vw,32px) 0; display:flex; flex-direction:column; gap:16px; }
.dx-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.dx-title{ font-size:22px; font-weight:800; letter-spacing:-.01em; color:var(--text-1); }
.dx-sub{ font-size:11px; color:var(--text-3); font-family:var(--font-num); }
.dx-mode, .dx-seg{ display:inline-flex; gap:2px; padding:3px; border-radius:10px; border:1px solid var(--border); background:var(--panel-2); }
.dx-mode{ margin-left:auto; }
.dx-mode button, .dx-seg button{
  min-height:0; height:26px; padding:0 12px; border:0; border-radius:7px; background:transparent;
  color:var(--text-2); font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.dx-mode button:hover, .dx-seg button:hover{ color:var(--text-1); }
.dx-mode button.active, .dx-seg button.active{ background:var(--accent); color:#fff; }

/* ---------- Kartu ringkasan ---------- */
.dx-cards{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.dx-card{
  display:flex; flex-direction:column; gap:3px; min-width:0; padding:13px 15px 14px;
  border:1px solid var(--glass-border, var(--border)); border-radius:var(--radius-m);
  background:var(--glass-panel, var(--panel));
}
.dx-lbl{ font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--text-2); }
.dx-val{ font-size:21px; font-weight:700; letter-spacing:-.01em; color:var(--text-1); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dx-card small{ font-size:11px; color:var(--text-3); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dx-bar{ display:block; height:4px; margin-top:6px; border-radius:99px; background:rgba(128,140,160,.22); overflow:hidden; }
.dx-bar u{ display:block; height:100%; width:0; border-radius:inherit; background:var(--accent); text-decoration:none; transition:width .4s ease, background-color .3s ease; }
.dx-up{ color:var(--buy) !important; }
.dx-down{ color:var(--sell) !important; }
.dx-warn{ color:var(--warn) !important; }
.dx-dot{ display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:50%; background:var(--text-3); vertical-align:1px; }
.dx-dot.on{ background:var(--buy); box-shadow:0 0 8px var(--buy); }

/* ---------- Baris panel ---------- */
.dx-row{ display:grid; gap:16px; align-items:stretch; }
.dx-row > .panel{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.dx-row-a{ grid-template-columns:minmax(0,1fr) 400px; }
.dx-row-b{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) 340px; }
.dx-body{ padding:6px 14px 14px !important; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.dx-n{ font-family:var(--font-num); font-weight:500; color:var(--text-3); margin-left:4px; }
.dx-link{ font-size:12px; font-weight:600; color:var(--accent); text-decoration:none; }
.dx-link:hover{ text-decoration:underline; }
.dx-btn{ min-height:0; height:26px; padding:0 11px; border-radius:8px; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; border:1px solid var(--border); background:transparent; color:var(--text-2); }
.dx-btn.danger{ border-color:var(--sell); background:var(--sell-dim); color:var(--sell); }
.dx-btn[hidden]{ display:none; }
.dx-foot{ margin-top:10px; font-size:10.5px; line-height:1.5; color:var(--text-3); }
.dx-empty{ padding:26px 8px; text-align:center; font-size:12.5px; line-height:1.6; color:var(--text-2); }

/* ---------- Posisi aktif ---------- */
.dx-pos{ display:flex; flex-direction:column; }
.dx-prow{
  display:grid; grid-template-columns:minmax(120px,1.1fr) minmax(110px,1fr) 104px minmax(120px,1.3fr);
  align-items:center; gap:6px 14px; padding:10px 6px; border-bottom:1px solid var(--border-soft);
  cursor:pointer; border-radius:8px; transition:background-color .15s ease;
}
.dx-prow:last-child{ border-bottom:0; }
.dx-prow:hover{ background:var(--accent-dim); }
.dx-prow:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.dx-sym{ font-weight:700; font-size:13px; color:var(--text-1); white-space:nowrap; }
.dx-pill{ display:inline-block; margin-left:6px; padding:2px 7px; border-radius:99px; font-size:10px; font-weight:700; letter-spacing:.04em; vertical-align:1px; }
.dx-pill.long{ color:var(--buy); background:var(--buy-dim); }
.dx-pill.short{ color:var(--sell); background:var(--sell-dim); }
.dx-px{ font-size:12px; color:var(--text-2); font-family:var(--font-num); line-height:1.35; }
.dx-px b{ color:var(--text-1); font-weight:600; }
.dx-pl{ text-align:right; font-family:var(--font-num); font-weight:700; font-size:13px; line-height:1.3; }
.dx-pl small{ display:block; font-size:10.5px; font-weight:500; opacity:.85; }
.dx-prog{ position:relative; height:6px; border-radius:99px; background:linear-gradient(90deg,var(--sell-dim),rgba(128,140,160,.18) 50%,var(--buy-dim)); }
.dx-prog i{ position:absolute; top:-2px; width:2px; height:10px; margin-left:-1px; background:var(--text-3); border-radius:2px; }
.dx-prog b{ position:absolute; top:-3px; width:12px; height:12px; margin-left:-6px; border-radius:50%; border:2px solid var(--bg-raised, #0E1116); box-sizing:border-box; transition:left .5s ease; }
.dx-prog b.up{ background:var(--buy); }
.dx-prog b.down{ background:var(--sell); }
.dx-pmeta{ display:flex; justify-content:space-between; margin-top:5px; font-size:10px; font-family:var(--font-num); color:var(--text-3); }
.dx-more{ display:block; margin:8px auto 0; text-align:center; font-size:12px; font-weight:600; color:var(--accent); text-decoration:none; }

/* ---------- Peluang ---------- */
.dx-cand{ display:flex; flex-direction:column; }
.dx-crow{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; align-items:center;
  padding:9px 6px; border-bottom:1px solid var(--border-soft); cursor:pointer; border-radius:8px;
  transition:background-color .15s ease;
}
.dx-crow:last-child{ border-bottom:0; }
.dx-crow:hover{ background:var(--accent-dim); }
.dx-crow:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.dx-cmeta{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:2px 12px; font-size:11px; color:var(--text-2); font-family:var(--font-num); }
.dx-tag{ font-size:10px; font-weight:700; padding:2px 7px; border-radius:99px; color:var(--text-2); background:var(--panel-2); border:1px solid var(--border-soft); }
.dx-tag.ok{ color:var(--buy); background:var(--buy-dim); border-color:transparent; }

/* ---------- P&L harian ---------- */
.dx-bars{ margin-bottom:22px; position:relative; display:flex; align-items:stretch; gap:6px; flex:1 1 auto; min-height:170px; padding-top:6px; }
.dx-bcol{ position:relative; flex:1 1 0; min-width:0; }
.dx-bar-v{ position:absolute; left:14%; right:14%; border-radius:4px; min-height:2px; transition:height .4s ease; }
.dx-bar-v.up{ background:var(--buy); }
.dx-bar-v.down{ background:var(--sell); }
.dx-bcol:hover .dx-bar-v{ filter:brightness(1.25); }
.dx-bd{ position:absolute; left:0; right:0; bottom:-18px; text-align:center; font-size:9.5px; color:var(--text-3); font-family:var(--font-num); }
.dx-zero{ position:absolute; left:0; right:0; height:1px; background:var(--border); pointer-events:none; }
.dx-bars-wrap{ padding-bottom:20px; }

/* ---------- Aktivitas ---------- */
.dx-act{ display:flex; flex-direction:column; flex:1 1 0; min-height:0; max-height:260px; overflow-y:auto; scrollbar-gutter:stable; overscroll-behavior:contain; }
.dx-arow{ display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 4px; border-bottom:1px solid var(--border-soft); font-size:12px; }
.dx-arow:last-child{ border-bottom:0; }
.dx-adot{ width:8px; height:8px; border-radius:50%; background:var(--text-3); }
.dx-adot.up{ background:var(--buy); } .dx-adot.down{ background:var(--sell); } .dx-adot.open{ background:var(--accent); }
.dx-atxt{ min-width:0; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dx-atxt span{ color:var(--text-3); }
.dx-atime{ font-size:10.5px; color:var(--text-3); font-family:var(--font-num); white-space:nowrap; }

/* ---------- Chart kecil di bawah ---------- */
#page-dashboard .dash-grid{ padding-top:16px; }
@media (min-width:1101px){
  #page-dashboard .tv-chart-wrap{ min-height:380px; }
}

/* ---------- Responsif ---------- */
@media (max-width:1500px){
  .dx-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .dx-row-b{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .dx-row-b > #breakoutPanel{ grid-column:1 / -1; }
}
@media (max-width:1100px){
  .dx-row-a{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px){
  .dx{ padding:12px 10px 0; gap:12px; }
  .dx-title{ font-size:19px; }
  .dx-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .dx-card{ padding:11px 12px 12px; }
  .dx-val{ font-size:18px; }
  .dx-row, .dx-row-b{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .dx-prow{ grid-template-columns:minmax(0,1fr) auto; }
  .dx-prow .dx-px{ grid-column:1; grid-row:2; }
  .dx-prow .dx-pl{ grid-column:2; grid-row:1 / span 2; }
  .dx-prow .dx-pw{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce){
  .dx-bar u, .dx-prog b, .dx-bar-v{ transition:none; }
}

/* ---------- Tata letak sejajar: tinggi panel satu baris disamakan ---------- */
#breakoutPanel{ display:flex; flex-direction:column; }
#breakoutPanel .bo-body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
#breakoutPanel .bo-list{ flex:1 1 0; min-height:0; max-height:none; }
#breakoutPanel .bo-foot{ flex:none; }
.dx-pos, .dx-cand{ flex:1 1 auto; }

/* Layar lebar: baris kedua tingginya tetap, isi panel yang scroll di dalam */
@media (min-width:1501px){
  .dx-row-b{ height:470px; }
  .dx-row-b > .panel{ height:100%; }
  .dx-row-b .dx-act{ max-height:none; }
}
@media (max-width:1500px){
  .dx-act{ max-height:300px; }
  #breakoutPanel .bo-list{ flex:none; max-height:380px; }
}
@media (max-width:760px){
  #breakoutPanel .bo-list{ max-height:320px; }
}

/* ============================================================
   Dashboard: gaya teks disamakan dengan menu Autobot
   (tidak bold, warna lebih redup, font Inter + tabular-nums).
   ============================================================ */
#page-dashboard{
  --text-1:#B3BAC6; --text-2:#868F9D; --text-3:#606875;
  --buy:#52BF8A; --sell:#DB6B7B;
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}
#page-dashboard, #page-dashboard *{
  font-weight:400 !important;
  font-family:var(--font-ui);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"cv11" 1;
  letter-spacing:0;
}
/* nama coin & angka utama sedikit lebih tegas (500), seperti tabel Autobot */
#page-dashboard .dx-sym,
#page-dashboard .dx-px b,
#page-dashboard .dx-pl{ font-weight:500 !important; }
#page-dashboard .dx-title{ font-size:20px; color:#D3D9E3; }
#page-dashboard .dx-val{ font-size:20px; }
#page-dashboard .dx-lbl{ letter-spacing:.02em; }
#page-dashboard .dx-pill{ font-size:9.5px; }
/* warna profit/rugi & tombol ikut versi lembut */
#page-dashboard .dx-pl.up, #page-dashboard .up{ color:#52BF8A; }
#page-dashboard .dx-pl.down, #page-dashboard .down{ color:#DB6B7B; }
#page-dashboard .dx-mode button.active, #page-dashboard .dx-seg button.active{ color:#E6EBF3; }