/* STOXGEN chart — TradingView-style theme + docked right panel (added 2026-10-15).
   Loaded after chart-v2.html's inline <style>, so these variables and rules win. */
:root{
  --bg:#131722; --bg2:#131722; --bg3:#1E222D; --border:#2A2E39; --text:#D1D4DC; --muted:#787B86;
  --green:#26A69A; --red:#EF5350; --tv-blue:#2962FF; --tv-hover:#2A2E39;
  --font-d:-apple-system,BlinkMacSystemFont,"Trebuchet MS",Roboto,Ubuntu,sans-serif;
  --font-b:-apple-system,BlinkMacSystemFont,"Trebuchet MS",Roboto,Ubuntu,sans-serif;
  --sg-dock-w:300px;
}
body{font-size:13px;}
#topbar{background:#131722;border-bottom:1px solid #2A2E39;}
#toolbar{background:#131722;border-right:1px solid #2A2E39;}
.tool-btn{border-radius:4px;color:#B2B5BE;}
.tool-btn.active,.tool-btn:hover{background:var(--tv-hover);color:#fff;}
.tool-btn.active{color:var(--tv-blue);}
.tf-row{background:transparent;}
.tf-btn{font-weight:500;font-size:13px;color:#B2B5BE;border-radius:4px;}
.tf-btn:hover:not(.active){background:var(--tv-hover);color:#fff;}
.tf-btn.active{background:transparent;color:var(--tv-blue);font-weight:600;}
#symInput{font-weight:600;border-radius:4px;background:#1E222D;border-color:#2A2E39;}
#symInput:focus{border-color:var(--tv-blue);}
#symDropdown,#indDropdown,#cmpDropdown{background:#1E222D;border-color:#363A45;border-radius:6px;}
.sym-row:hover{background:var(--tv-hover);}
#topbar button:not(.tf-btn){border-radius:4px;}
.pane-label{background:rgba(19,23,34,.7);}
#watchlistPanel,#alertsPanel,#contextPanel,#optionsPanel,#optionChartPanel,#layersPanel{background:#131722;border-left:1px solid #2A2E39;}
#volPane{border-top:1px solid #2A2E39;}

/* ── docked STOXGEN panel (TradingView-watchlist position) ── */
#sgDockBtn.on{color:var(--tv-blue);}
#sgDock{position:fixed;top:var(--topbar-h);right:0;bottom:0;width:var(--sg-dock-w);background:#131722;
  border-left:1px solid #2A2E39;z-index:44;display:none;flex-direction:column;overflow:hidden;}
body.sg-docked #sgDock{display:flex;}
body.sg-docked #chartWrap,body.sg-docked #replayBar{right:var(--sg-dock-w);}
#sgDock .dk-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #2A2E39;}
#sgDock .dk-head b{font-size:13px;font-weight:600;color:#D1D4DC;}
#sgDock .dk-head button{background:none;border:0;color:#787B86;font-size:16px;cursor:pointer;padding:2px 6px;border-radius:4px;}
#sgDock .dk-head button:hover{background:var(--tv-hover);color:#fff;}
#sgDock .dk-body{overflow-y:auto;flex:1;}
#sgDock .dk-body::-webkit-scrollbar{width:8px;} #sgDock .dk-body::-webkit-scrollbar-thumb{background:#2A2E39;border-radius:4px;}
.dk-sec{border-bottom:1px solid #2A2E39;padding:12px;}
.dk-sec h4{font-size:11px;font-weight:700;letter-spacing:.8px;color:#787B86;text-transform:uppercase;margin-bottom:9px;
  display:flex;align-items:center;justify-content:space-between;}
.dk-field{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:8px;margin-bottom:7px;}
.dk-field label{color:#787B86;font-size:12px;}
.dk-sel,.dk-inp{width:100%;height:30px;background:#1E222D;border:1px solid #2A2E39;border-radius:4px;color:#D1D4DC;padding:0 8px;outline:none;font:inherit;font-size:12.5px;}
.dk-sel:focus,.dk-inp:focus{border-color:var(--tv-blue);}
.dk-row2{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.dk-btn{height:31px;border:0;border-radius:4px;background:var(--tv-blue);color:#fff;font-weight:600;cursor:pointer;font:inherit;font-size:12.5px;font-weight:600;}
.dk-btn:hover{filter:brightness(1.12);}
.dk-btn.ghost{background:#1E222D;border:1px solid #363A45;color:#D1D4DC;}
.dk-hint{color:#5D606B;font-size:11px;margin-top:6px;line-height:1.45;}
.dk-err{color:var(--red);font-size:11.5px;margin-top:5px;}
.dk-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
.dk-chip{font-size:11px;padding:3px 8px;border-radius:10px;background:#1E222D;border:1px solid #2A2E39;color:#787B86;cursor:pointer;}
.dk-chip:hover{color:#D1D4DC;border-color:#363A45;}
.dk-dot{width:8px;height:8px;border-radius:50%;background:#5D606B;display:inline-block;margin-right:5px;}
.dk-dot.live{background:var(--green);box-shadow:0 0 6px var(--green);} .dk-dot.stale{background:#F5C842;}
.dk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px;}
.dk-kpi{background:#1E222D;border-radius:4px;padding:5px 7px;}
.dk-kpi div{color:#787B86;font-size:10px;text-transform:uppercase;letter-spacing:.4px;}
.dk-kpi b{font-size:12.5px;font-weight:600;color:#D1D4DC;font-family:var(--font-m);}
.dk-greeks{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:8px;}
.dk-greeks .dk-kpi{text-align:center;padding:7px 2px;}
.dk-greeks .dk-kpi b{font-size:13.5px;}
table.dk-t{width:100%;border-collapse:collapse;font-size:11.5px;font-family:var(--font-m);}
table.dk-t th{color:#787B86;font-weight:500;text-align:right;padding:4px 3px;border-bottom:1px solid #2A2E39;font-family:var(--font-b);}
table.dk-t th:first-child,table.dk-t td:first-child{text-align:left;}
table.dk-t td{text-align:right;padding:5px 3px;border-bottom:1px solid #2A2E39;color:#D1D4DC;}
table.dk-t tr.tot td{color:#F5C842;font-weight:600;}
.dk-pos{color:var(--green)!important;} .dk-neg{color:var(--red)!important;}
.dk-meta{color:#5D606B;font-size:10.5px;margin-top:7px;line-height:1.5;}

@media (max-width:1100px){ :root{--sg-dock-w:270px;} }
@media (max-width:768px), (orientation:landscape) and (max-height:500px){
  /* phones: the panel overlays the chart instead of squeezing it */
  #sgDock{width:100vw;z-index:48;}
  body.sg-docked #chartWrap,body.sg-docked #replayBar{right:0;}
}