/* TEST1 -> V71 SAFE UI STEP 1
   Visual bridge only:
   - docks the v71 TradingView-style DRAW rail in the existing TEST1 left column
   - darkens TEST1 surfaces to match V71
   - removes white/grid backgrounds behind the candle chart
   - does not change XAUUSD/Forex feed, candle data, candle series, orderbook, API config or DOM logic
*/

:root {
  --gp-test1-v71-black: #000000;
  --gp-test1-v71-panel: #02040a;
  --gp-test1-v71-chart: #05070d;
  --gp-test1-v71-line: rgba(255,255,255,.11);
  --gp-test1-v71-soft-line: rgba(255,255,255,.07);
  --gp-test1-v71-text: #f4f7ff;
  --gp-test1-v71-muted: rgba(219,229,255,.63);
  --gp-tv-tf-panel: #050505;
  --gp-tv-tf-panel-text: #f4f7ff;
  --gp-tv-tf-panel-muted: rgba(244,247,255,.62);
  --gp-tv-tf-panel-hover: #10151e;
  --gp-tv-tf-panel-active: #111c22;
}

html,
body,
body.terminal-active,
body.gp-terminal-active {
  background: var(--gp-test1-v71-black) !important;
  color: var(--gp-test1-v71-text) !important;
}

/* Keep the terminal black; remove old light/glow images that show as lines behind the chart. */
body.terminal-active #app,
body.gp-terminal-active #app,
body.terminal-active .header,
body.gp-terminal-active .header,
body.terminal-active .gp-terminal-side,
body.gp-terminal-active .gp-terminal-side,
body.terminal-active .gp-market-overview,
body.gp-terminal-active .gp-market-overview,
body.terminal-active .gp-overview-card,
body.gp-terminal-active .gp-overview-card,
body.terminal-active .gp-overview-sentiment,
body.gp-terminal-active .gp-overview-sentiment,
body.terminal-active .chart-container,
body.gp-terminal-active .chart-container,
body.terminal-active .gp-chart-card-head,
body.gp-terminal-active .gp-chart-card-head,
body.terminal-active .timeframes,
body.gp-terminal-active .timeframes,
body.terminal-active .cvd-container,
body.gp-terminal-active .cvd-container,
body.terminal-active .analytics,
body.gp-terminal-active .analytics,
body.terminal-active .tools-panel,
body.gp-terminal-active .tools-panel,
body.terminal-active .sidebar,
body.gp-terminal-active .sidebar,
body.terminal-active .gp-terminal-bottom,
body.gp-terminal-active .gp-terminal-bottom,
body.terminal-active .gp-bottom-card,
body.gp-terminal-active .gp-bottom-card,
body.terminal-active .gp-dashboard-tab-panels,
body.gp-terminal-active .gp-dashboard-tab-panels,
body.terminal-active .gp-dashboard-tab-panel,
body.gp-terminal-active .gp-dashboard-tab-panel,
body.terminal-active .orderbook,
body.gp-terminal-active .orderbook,
body.terminal-active .orderbook__header,
body.gp-terminal-active .orderbook__header,
body.terminal-active .orderbook__depth,
body.gp-terminal-active .orderbook__depth,
body.terminal-active .orderbook__content,
body.gp-terminal-active .orderbook__content {
  background-color: var(--gp-test1-v71-black) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.terminal-active .gp-overview-card,
body.gp-terminal-active .gp-overview-card,
body.terminal-active .gp-overview-sentiment,
body.gp-terminal-active .gp-overview-sentiment,
body.terminal-active .chart-container,
body.gp-terminal-active .chart-container,
body.terminal-active .tools-panel,
body.gp-terminal-active .tools-panel,
body.terminal-active .sidebar,
body.gp-terminal-active .sidebar,
body.terminal-active .gp-terminal-bottom,
body.gp-terminal-active .gp-terminal-bottom,
body.terminal-active .gp-bottom-card,
body.gp-terminal-active .gp-bottom-card {
  border-color: var(--gp-test1-v71-line) !important;
}

/* Absolute chart cleanup: no white background/grid pseudo-lines behind candles. */
body.terminal-active #chart-area,
body.gp-terminal-active #chart-area,
body.terminal-active .chart-area,
body.gp-terminal-active .chart-area,
body.terminal-active .tv-lightweight-charts,
body.gp-terminal-active .tv-lightweight-charts {
  background-color: var(--gp-test1-v71-chart) !important;
  background-image: none !important;
}

/* IMPORTANT: keep every chart canvas transparent. Some chart libraries stack multiple canvases;
   an opaque background on an upper helper canvas hides the candle/volume canvas below it. */
body.terminal-active #chart-area canvas,
body.gp-terminal-active #chart-area canvas,
body.terminal-active .chart-area canvas,
body.gp-terminal-active .chart-area canvas {
  background-color: transparent !important;
  background-image: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.terminal-active #chart-area::before,
body.gp-terminal-active #chart-area::before,
body.terminal-active #chart-area::after,
body.gp-terminal-active #chart-area::after,
body.terminal-active .chart-area::before,
body.gp-terminal-active .chart-area::before,
body.terminal-active .chart-area::after,
body.gp-terminal-active .chart-area::after,
body.terminal-active .chart-container::before,
body.gp-terminal-active .chart-container::before,
body.terminal-active .chart-container::after,
body.gp-terminal-active .chart-container::after {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}

/* Let the V71 draw submenus / timeframe dropdown escape the existing scroll row. */
body.gp-step44-draw-toolbar-ready .timeframes,
body.gp-step44-draw-toolbar-ready #timeframes,
body.gp-step44-draw-toolbar-ready .timeframes__scroll,
body.gp-step44-draw-toolbar-ready #timeframes-tools,
body.gp-step44-draw-toolbar-ready .chart-container,
body.gp-step44-draw-toolbar-ready .main {
  overflow: visible !important;
}

/* Dock V71 DRAW rail into TEST1 four-column chart layout without importing V71 DOM/VP layout. */
:root {
  --gp-step44-draw-col: 64px;
}

body.gp-step44-draw-toolbar-ready.terminal-active,
body.gp-step44-draw-toolbar-ready.gp-terminal-active {
  --gp-step04-side-width: var(--gp-step44-draw-col) !important;
  --gp-terminal-side-width: var(--gp-step44-draw-col) !important;
}

@media (min-width: 1181px) {
  body.gp-step44-draw-toolbar-ready.terminal-active.gp-dashboard-chart-mode #app,
  body.gp-step44-draw-toolbar-ready.gp-terminal-active.gp-dashboard-chart-mode #app {
    grid-template-columns: var(--gp-step44-draw-col) minmax(270px,.78fr) minmax(0,1.68fr) minmax(370px,.96fr) !important;
  }

  body.gp-step44-draw-toolbar-ready.terminal-active .gp-terminal-side,
  body.gp-step44-draw-toolbar-ready.gp-terminal-active .gp-terminal-side {
    grid-column: 1 !important;
    grid-row: 2 / 6 !important;
    width: var(--gp-step44-draw-col) !important;
    min-width: var(--gp-step44-draw-col) !important;
    max-width: var(--gp-step44-draw-col) !important;
    position: relative !important;
    display: block !important;
    padding: 5px 4px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    background: #000 !important;
    border-right: 1px solid var(--gp-test1-v71-line) !important;
    border-color: var(--gp-test1-v71-line) !important;
  }

  body.gp-step44-draw-toolbar-ready.terminal-active .gp-terminal-side > nav,
  body.gp-step44-draw-toolbar-ready.gp-terminal-active .gp-terminal-side > nav,
  body.gp-step44-draw-toolbar-ready.terminal-active .gp-terminal-side > .gp-plan-card,
  body.gp-step44-draw-toolbar-ready.gp-terminal-active .gp-terminal-side > .gp-plan-card {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.gp-step44-draw-toolbar-ready.terminal-active .gp-terminal-side > .gp-draw-tv-rail.gp-step44-docked,
  body.gp-step44-draw-toolbar-ready.gp-terminal-active .gp-terminal-side > .gp-draw-tv-rail.gp-step44-docked {
    position: absolute !important;
    top: 5px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 52px !important;
    max-width: 52px !important;
    max-height: calc(100dvh - 106px) !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 7px 5px !important;
    border-radius: 15px !important;
    z-index: 360 !important;
    background: linear-gradient(180deg, rgba(7,7,8,.98), rgba(0,0,0,.98)) !important;
  }

  body.gp-step44-draw-toolbar-ready.terminal-active:not(.gp-dashboard-chart-mode) .gp-terminal-side > .gp-draw-tv-rail.gp-step44-docked,
  body.gp-step44-draw-toolbar-ready.gp-terminal-active:not(.gp-dashboard-chart-mode) .gp-terminal-side > .gp-draw-tv-rail.gp-step44-docked {
    opacity: .44 !important;
    pointer-events: none !important;
    filter: grayscale(.25) !important;
  }

  body.gp-step44-draw-toolbar-ready.terminal-active.gp-dashboard-chart-mode .gp-terminal-side > .gp-draw-tv-rail.gp-step44-docked,
  body.gp-step44-draw-toolbar-ready.gp-terminal-active.gp-dashboard-chart-mode .gp-terminal-side > .gp-draw-tv-rail.gp-step44-docked {
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
  }

  body.gp-step44-draw-toolbar-ready .gp-terminal-side > .gp-draw-tv-rail.gp-step44-docked .gp-draw-tv-btn {
    width: 39px !important;
    height: 37px !important;
    border-radius: 10px !important;
  }

  body.gp-step44-draw-toolbar-ready .gp-terminal-side > .gp-draw-tv-rail.gp-step44-docked .gp-draw-tv-rail__brand {
    height: 21px !important;
    font-size: 8px !important;
    letter-spacing: .10em !important;
  }

  body.gp-step44-draw-toolbar-ready .gp-terminal-side > .gp-draw-tv-rail.gp-step44-docked .gp-draw-tv-state {
    max-width: 42px !important;
    font-size: 8px !important;
  }

  body.gp-step44-draw-toolbar-ready .gp-terminal-side > .gp-draw-tv-rail.gp-step44-docked .gp-draw-tv-submenu {
    left: calc(100% + 12px) !important;
    z-index: 100330 !important;
  }

  body.gp-step44-draw-toolbar-ready .gp-draw-more-wrap {
    z-index: 410 !important;
  }

  body.gp-step44-draw-toolbar-ready .gp-draw-more-panel {
    z-index: 100360 !important;
  }
}

@media (min-width: 1181px) and (max-width: 1500px) {
  body.gp-step44-draw-toolbar-ready.terminal-active.gp-dashboard-chart-mode #app,
  body.gp-step44-draw-toolbar-ready.gp-terminal-active.gp-dashboard-chart-mode #app {
    grid-template-columns: var(--gp-step44-draw-col) minmax(245px,.78fr) minmax(0,1.55fr) minmax(340px,.94fr) !important;
  }
}

/* On smaller screens keep TEST1's mobile layout; the V71 draw rail remains hidden outside terminal/chart mode. */
body:not(.terminal-active):not(.gp-terminal-active):not(.gp-dashboard-ready) .gp-draw-tv-rail.gp-step44-docked,
body.gp-home-page-active .gp-draw-tv-rail.gp-step44-docked,
body.gp-profile-open .gp-draw-tv-rail.gp-step44-docked,
body.preload-lock .gp-draw-tv-rail.gp-step44-docked,
body:not(.terminal-active):not(.gp-terminal-active):not(.gp-dashboard-ready) .gp-draw-tv-rail,
body.gp-home-page-active .gp-draw-tv-rail,
body.gp-profile-open .gp-draw-tv-rail,
body.preload-lock .gp-draw-tv-rail {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.gp-step44-draw-toolbar-ready .chart-area > .gp-draw-tv-rail:not(.gp-step44-docked) {
  display: none !important;
}

/* Dark V71-style timeframe menu and minimal toolbar. */
.gp-tv-tf-menu,
.gp-tv-tf-popover {
  background: #050505 !important;
  color: var(--gp-test1-v71-text) !important;
  border-color: var(--gp-test1-v71-line) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.62) !important;
}

.gp-tv-tf-group {
  border-top-color: var(--gp-test1-v71-soft-line) !important;
}

.gp-tv-tf-group-title,
.gp-tv-tf-help,
.gp-tv-tf-add {
  color: var(--gp-test1-v71-muted) !important;
}

.gp-tv-tf-item,
.gp-tv-tf-add {
  background: transparent !important;
  color: var(--gp-test1-v71-text) !important;
  border-color: transparent !important;
}

.gp-tv-tf-item:hover,
.gp-tv-tf-add:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(0,224,255,.22) !important;
}

.gp-tv-tf-item.is-active {
  background: linear-gradient(135deg, rgba(0,167,255,.22), rgba(0,239,191,.18)) !important;
  border-color: rgba(0,224,255,.34) !important;
  color: #ffffff !important;
}

#timeframes-tools.gp-minimal-chart-toolbar .tv-top-tool,
#timeframes-tools .tv-top-tool {
  background: #05070d !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #f4f7ff !important;
  box-shadow: none !important;
}

#timeframes-tools.gp-minimal-chart-toolbar .tv-top-tool:hover,
#timeframes-tools .tv-top-tool:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(0,224,255,.30) !important;
}

#timeframes-tools.gp-minimal-chart-toolbar .tv-top-tool.active,
#timeframes-tools .tv-top-tool.active {
  background: linear-gradient(135deg, rgba(0,167,255,.32), rgba(0,239,191,.24)) !important;
  border-color: rgba(0,224,255,.42) !important;
}

/* Keep existing TEST1 orderbook readable; no V71 right-side DOM/VP is imported here. */
.orderbook__row,
.orderbook__price,
.orderbook__amount,
.orderbook__total,
.depth-row,
.depth-price,
.depth-size {
  background-image: none !important;
}