/* BYNAI TradingView custom theme overrides */
/* This CSS is injected into TradingView iframe via custom_css_url */
/* Supports both Light and Dark themes */

/* ===== Root Variables - Dark Theme (default) ===== */
/* BYNAI theme with Gold accent */
:root {
  --bynai-bg-primary: #07080c;
  --bynai-bg-secondary: #0d0f15;
  --bynai-border: #12141a;
  --bynai-text-muted: #A0A0A0;
  --bynai-text-bright: #FCFDFF;
  --bynai-brand: #FFE004;
  --bynai-up: #0ECB81;
  --bynai-down: #F6465D;
}

/* ===== Light Theme Variables ===== */
html.theme-light,
html[data-theme="light"],
body.theme-light,
.theme-light {
  --bynai-bg-primary: #ffffff;
  --bynai-bg-secondary: #ffffff;
  --bynai-border: #e5e5e5;
  --bynai-text-muted: #666666;
  --bynai-text-bright: #1a1a1a;
}

/* TradingView uses these classes for light theme */
html[class*="light"],
body[class*="light"] {
  --bynai-bg-primary: #ffffff;
  --bynai-bg-secondary: #ffffff;
  --bynai-border: #e5e5e5;
  --bynai-text-muted: #666666;
  --bynai-text-bright: #1a1a1a;
}

/* ===== Main Layout Areas ===== */
html, body {
  background-color: var(--bynai-bg-secondary) !important;
}

.chart-page,
.chart-container,
.chart-controls-bar,
[class*="layout__area"] {
  background-color: var(--bynai-bg-secondary) !important;
  background: var(--bynai-bg-secondary) !important;
}

/* Center area (chart canvas) - same as card */
.layout__area--center {
  background-color: var(--bynai-bg-secondary) !important;
  background: var(--bynai-bg-secondary) !important;
}

/* ===== Legend Area - FORCE TRANSPARENT ===== */
[class*="legend"],
[class*="Legend"],
[class*="sources"],
[class*="Sources"],
[class*="title"],
[class*="Title"],
[class*="values"],
[class*="Values"],
[class*="wrapper"],
[class*="Wrapper"],
[class*="container"],
[class*="Container"],
[class*="content"],
[class*="Content"],
[class*="inner"],
[class*="Inner"],
[class*="item"],
[class*="Item"],
[class*="group"],
[class*="Group"] {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
}

/* ===== Symbol Name - Brighter ===== */
[class*="symbolTitle"],
[class*="symbol-title"],
[class*="apply-overflow-tooltip"],
[class*="mainTitle"] > *:first-child {
  color: var(--bynai-text-bright) !important;
}

/* ===== IMPORTANT: Legend/OHLC/MA Values ===== */
/* DO NOT override colors for legend values - TradingView uses inline styles */
/* The MA indicators and OHLC values get their colors from inline style="color:..." */
/* We must NOT apply any color rules that would override these inline styles */

/* ===== Toolbar/Header ===== */
[class*="toolbar"],
[class*="Toolbar"],
[class*="header"],
[class*="Header"],
[class*="controls"] {
  background-color: var(--bynai-bg-secondary) !important;
  background: var(--bynai-bg-secondary) !important;
}

/* Left toolbar (drawing tools) */
.layout__area--left,
[class*="drawingToolbar"],
[class*="drawing-toolbar"] {
  background-color: var(--bynai-bg-secondary) !important;
  background: var(--bynai-bg-secondary) !important;
}

/* Top toolbar */
.layout__area--top {
  background-color: var(--bynai-bg-secondary) !important;
  background: var(--bynai-bg-secondary) !important;
}

/* TradingView v29 toolbar wrappers/groups used by the current bundle */
.toolbar-LZaMRgb9,
.overflowWrap-LZaMRgb9,
.group-3uonVBsm,
.separatorWrap-3uonVBsm,
.wrap-1ETeWwz2,
.content-i5o9yNmy,
.inner-i5o9yNmy,
.fake-i5o9yNmy {
  background-color: var(--bynai-bg-secondary) !important;
  background: var(--bynai-bg-secondary) !important;
}

.separator-3uonVBsm {
  background-color: var(--bynai-border) !important;
}

/* Right toolbar (price scale area) */
.layout__area--right {
  background-color: var(--bynai-bg-secondary) !important;
  background: var(--bynai-bg-secondary) !important;
}

/* Bottom toolbar (time scale area) */
.layout__area--bottom {
  background-color: var(--bynai-bg-secondary) !important;
  background: var(--bynai-bg-secondary) !important;
}

/* ===== Buttons ===== */
[class*="button"],
[class*="Button"],
[class*="btn"] {
  color: var(--bynai-text-muted) !important;
  background-color: transparent !important;
}

.item-3SbREAgE,
.button-1SoiPS-f,
.button-yLOygoSG,
.button-2pZNJ24z,
.customButton-LZaMRgb9 {
  color: var(--bynai-text-muted) !important;
}

[class*="button"]:hover,
[class*="Button"]:hover,
[class*="btn"]:hover {
  color: var(--bynai-text-bright) !important;
  background-color: var(--bynai-border) !important;
}

.item-3SbREAgE:hover:before,
.item-3SbREAgE.hover-3SbREAgE:before,
.button-1SoiPS-f:hover:before,
.button-1SoiPS-f.hover-1SoiPS-f:before,
.button-yLOygoSG:hover:before,
.button-yLOygoSG.hover-yLOygoSG:before,
.button-2pZNJ24z:hover:before,
.button-2pZNJ24z.hover-2pZNJ24z:before {
  background-color: var(--bynai-border) !important;
}

[class*="isActive"],
[class*="active"],
[class*="Active"],
[class*="selected"],
[class*="Selected"] {
  color: var(--bynai-brand) !important;
}

.item-3SbREAgE.isActive-3SbREAgE,
.button-1SoiPS-f.isOpened-1SoiPS-f {
  color: var(--bynai-brand) !important;
}

/* ===== Dropdowns/Menus/Popups ===== */
[class*="menu"],
[class*="Menu"],
[class*="dropdown"],
[class*="Dropdown"],
[class*="popup"],
[class*="Popup"],
[class*="context"] {
  background-color: var(--bynai-bg-secondary) !important;
  background: var(--bynai-bg-secondary) !important;
  border-color: var(--bynai-border) !important;
}

[class*="popupDialog"],
[class*="dialog-"],
[class*="menuWrap"],
[class*="menuBox"],
[class*="scrollWrap"],
[class*="dropdown-"] {
  background-color: var(--bynai-bg-secondary) !important;
  background: var(--bynai-bg-secondary) !important;
  border-color: var(--bynai-border) !important;
}

/* ===== Dialogs/Modals ===== */
[class*="dialog"],
[class*="Dialog"],
[class*="modal"],
[class*="Modal"],
[role="dialog"],
[data-dialog-name] {
  background-color: var(--bynai-bg-secondary) !important;
  background: var(--bynai-bg-secondary) !important;
  border-color: var(--bynai-border) !important;
}

[class*="dialogContent"],
[class*="dialogBody"],
[class*="dialogFooter"],
[class*="dialogHeader"] {
  background-color: var(--bynai-bg-secondary) !important;
  background: var(--bynai-bg-secondary) !important;
}

/* ===== Tabs ===== */
[class*="tab"],
[class*="Tab"] {
  background-color: transparent !important;
  color: var(--bynai-text-muted) !important;
}

[class*="tab"][class*="active"],
[class*="Tab"][class*="active"],
[class*="tab"][class*="Active"],
[class*="Tab"][class*="Active"],
[class*="tabActive"],
[class*="TabActive"] {
  background-color: #2962FF !important;
  color: #FFFFFF !important;
}

[class*="tab"][class*="active"] svg,
[class*="Tab"][class*="active"] svg,
[class*="tabActive"] svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* ===== Form Elements ===== */
[class*="input"],
[class*="Input"],
[class*="select"],
[class*="Select"],
input,
select {
  background-color: var(--bynai-bg-secondary) !important;
  border-color: var(--bynai-border) !important;
  color: var(--bynai-text-bright) !important;
}

[class*="label"],
[class*="Label"],
label {
  color: var(--bynai-text-muted) !important;
}

/* ===== Separators ===== */
[class*="separator"],
[class*="Separator"],
[class*="divider"],
[class*="Divider"] {
  background-color: var(--bynai-border) !important;
  border-color: var(--bynai-border) !important;
}

/* ===== Price/Time Axis ===== */
[class*="axis"],
[class*="Axis"],
[class*="scale"],
[class*="Scale"],
[class*="price-axis"],
[class*="priceAxis"],
[class*="time-axis"],
[class*="timeAxis"] {
  color: var(--bynai-text-muted) !important;
  background-color: var(--bynai-bg-secondary) !important;
  background: var(--bynai-bg-secondary) !important;
}

/* ===== TV CSS Variables Override - Dark Theme (default) ===== */
html, body, :root {
  /* Toolbar button colors */
  --tv-color-toolbar-button-text: var(--bynai-text-muted) !important;
  --tv-color-toolbar-button-text-hover: var(--bynai-text-bright) !important;
  --tv-color-toolbar-button-text-active: var(--bynai-brand) !important;
  --tv-color-toolbar-button-background: transparent !important;
  --tv-color-toolbar-button-background-hover: var(--bynai-border) !important;
  --tv-color-toolbar-button-background-expanded: var(--bynai-border) !important;
  --tv-color-toolbar-button-background-active: var(--bynai-border) !important;

  /* Platform/Pane backgrounds */
  --tv-color-platform-background: var(--bynai-bg-secondary) !important;
  --tv-color-pane-background: var(--bynai-bg-secondary) !important;
  --tv-color-toolbar-background: var(--bynai-bg-secondary) !important;

  /* Popup/Menu colors */
  --tv-color-popup-background: var(--bynai-bg-secondary) !important;
  --tv-color-popup-element-text: var(--bynai-text-bright) !important;
  --tv-color-popup-element-text-hover: var(--bynai-text-bright) !important;
  --tv-color-popup-element-background-hover: var(--bynai-border) !important;

  /* Toggle button */
  --tv-color-toolbar-toggle-button-background-active: var(--bynai-brand) !important;
  --tv-color-toolbar-toggle-button-background-active-hover: var(--bynai-brand) !important;
}

/* ===== TV CSS Variables Override - Light Theme ===== */
html.theme-light,
html[data-theme="light"],
body.theme-light,
.theme-light,
html[class*="light"],
body[class*="light"] {
  /* Light theme backgrounds - WHITE */
  --tv-color-platform-background: #ffffff !important;
  --tv-color-pane-background: #ffffff !important;
  --tv-color-toolbar-background: #ffffff !important;
  --tv-color-popup-background: #ffffff !important;

  /* Light theme hover backgrounds - light gray for contrast */
  --tv-color-toolbar-button-background: transparent !important;
  --tv-color-toolbar-button-background-hover: #f0f0f0 !important;
  --tv-color-toolbar-button-background-expanded: #f0f0f0 !important;
  --tv-color-toolbar-button-background-active: #e8e8e8 !important;
  --tv-color-popup-element-background-hover: #f0f0f0 !important;
}

/* ===== Scrollbars ===== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: var(--bynai-bg-primary);
}

::-webkit-scrollbar-thumb {
  background-color: var(--bynai-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--bynai-text-muted);
}

/* ===== Icons - Only for toolbar, NOT for chart/legend ===== */
[class*="toolbar"] [class*="icon"],
[class*="toolbar"] [class*="Icon"],
[class*="Toolbar"] [class*="icon"],
[class*="Toolbar"] [class*="Icon"],
[class*="header"] [class*="icon"],
[class*="header"] [class*="Icon"],
[class*="button"] svg,
[class*="Button"] svg,
[class*="btn"] svg {
  color: var(--bynai-text-muted) !important;
  fill: currentColor !important;
}

/* ===== Order History Execution Markers - Binance Style ===== */
/* Style execution shapes to look like money bag icons */
.tv-chart-execution-wrapper {
  pointer-events: none;
}

/* Execution shape container */
[class*="execution"] {
  border-radius: 4px !important;
}

/* Buy execution marker */
[class*="execution"][class*="buy"],
[class*="execution-buy"],
.tv-chart-execution--buy {
  background-color: var(--bynai-up) !important;
  border-radius: 6px !important;
}

/* Sell execution marker */
[class*="execution"][class*="sell"],
[class*="execution-sell"],
.tv-chart-execution--sell {
  background-color: var(--bynai-down) !important;
  border-radius: 6px !important;
}

/* ===== Exception: elements that SHOULD have background ===== */
[class*="dialog"],
[class*="Dialog"],
[class*="modal"],
[class*="Modal"],
[class*="menu"],
[class*="Menu"],
[class*="popup"],
[class*="Popup"],
[class*="dropdown"],
[class*="Dropdown"],
[role="dialog"] {
  background-color: var(--bynai-bg-secondary) !important;
  background: var(--bynai-bg-secondary) !important;
}