/*
 * TradeFly9 palette. Linked only by the tradefly9 build (clients.config.js ->
 * brandCss) and only active in light mode, which is that build's default.
 *
 * Selectors are prefixed with `html` / `body` so they outrank the generic
 * [data-theme="light"] rules in style.css, which also use !important.
 */

html[data-theme="light"],
body[data-theme="light"] {
  --tf-header: #0c2720;
  --tf-ticker: #091c16;
  --tf-header-line: #4e615d;
  --tf-on-header: #ffffff;
  --tf-nav-active: #7c967b;
  --tf-card-head: #eaeaea;
  --tf-text: #1b1b1b;
  --tf-muted: #777777;
  --tf-line: #e3e3e3;
  --tf-loss: #f40b36;
  --tf-loss-badge: #fe1930;
  --tf-gain: #019348;

  /* app-wide tokens from style.css */
  --b: #ffffff;
  --f: #1b1b1b;
  --f1: #777777;
  --t: #1b1b1b;
  --bg1: #ffffff;
  --bg2: #ffffff;
  --br: #4e615d;
  --br1: #e3e3e3;
  --br2: #e3e3e3;
  --btn-primary-bg: #0c2720;
  --toggle-bg: #d5dcda;
  --buy: #e6f4ec;
  --sell: #fde8eb;
  --buy1: #e6f4ec;
  --sell1: #fde8eb;
}

/* ---- Top bar (all classic screens) ---- */
html[data-theme="light"] .top-bar {
  background: var(--tf-header) !important;
  color: var(--tf-on-header) !important;
  border-color: var(--tf-header-line) !important;
}

html[data-theme="light"] .top-bar .title,
html[data-theme="light"] .top-bar .top-actions {
  color: var(--tf-on-header) !important;
}

html[data-theme="light"] .top-bar .icon-btn {
  background: transparent !important;
  color: var(--tf-on-header) !important;
  border-color: var(--tf-header-line) !important;
}

/* ---- Market watch header block: indices, ticker, exchange chips ---- */
html[data-theme="light"] .sticky-stack,
html[data-theme="light"] .sticky-stack .segmented-inner {
  background: var(--tf-header) !important;
  color: var(--tf-on-header) !important;
  border-color: var(--tf-header-line) !important;
}

html[data-theme="light"] .sticky-stack .topbar {
  border-color: var(--tf-header-line) !important;
  color: var(--tf-on-header) !important;
}

html[data-theme="light"] .sticky-stack .red-color {
  color: #ff4d6a !important;
}

html[data-theme="light"] .sticky-stack .green-color {
  color: #3ddc84 !important;
}

html[data-theme="light"] .marquee {
  background: var(--tf-ticker);
  color: var(--tf-on-header);
}

html[data-theme="light"] .market-tabs {
  background: var(--tf-header) !important;
  border-color: var(--tf-header-line) !important;
}

html[data-theme="light"] .market-tab {
  background: transparent !important;
  color: var(--tf-on-header) !important;
  border: 1px solid var(--tf-on-header) !important;
  font-weight: 700;
}

html[data-theme="light"] .market-tab.active {
  background: #ffffff !important;
  color: #0c1512 !important;
}

html[data-theme="light"] .table-head {
  background: var(--tf-card-head) !important;
  border-color: var(--tf-line) !important;
}

html[data-theme="light"] .table-head span {
  color: var(--tf-text) !important;
  font-weight: 700;
}

/* ---- Lists and cards ---- */
html[data-theme="light"] .market,
html[data-theme="light"] .settings,
html[data-theme="light"] .orders,
html[data-theme="light"] .trades,
html[data-theme="light"] .positions,
html[data-theme="light"] .position-trades,
html[data-theme="light"] .backgroud-new {
  background: #ffffff !important;
  color: var(--tf-text) !important;
}

html[data-theme="light"] .ticker-card {
  border-top-color: var(--tf-line) !important;
}

html[data-theme="light"] .symbol {
  color: var(--tf-text) !important;
}

html[data-theme="light"] .qty,
html[data-theme="light"] .ltp,
html[data-theme="light"] .label,
html[data-theme="light"] .prices,
html[data-theme="light"] .time,
html[data-theme="light"] .value,
html[data-theme="light"] .expiry {
  color: var(--tf-muted) !important;
}

html[data-theme="light"] .red-color {
  color: var(--tf-loss) !important;
}

html[data-theme="light"] .green-color {
  color: var(--tf-gain) !important;
}

html[data-theme="light"] .switch-tab {
  background: #ffffff !important;
  color: var(--tf-header) !important;
  border-color: var(--tf-header) !important;
}

html[data-theme="light"] .switch-tab.active {
  background: var(--tf-header) !important;
  color: var(--tf-on-header) !important;
}

/* ---- Bottom navigation ---- */
html[data-theme="light"] .bottom-nav {
  background: var(--tf-header) !important;
  color: var(--tf-on-header) !important;
  border-color: var(--tf-header-line) !important;
  border-radius: 18px 18px 0 0;
}

html[data-theme="light"] .bottom-nav .nav-item {
  color: var(--tf-on-header) !important;
}

html[data-theme="light"] .bottom-nav .nav-item.active {
  color: var(--tf-nav-active) !important;
}

html[data-theme="light"] .fab {
  background: var(--tf-header) !important;
  color: var(--tf-on-header) !important;
  border-color: var(--tf-header-line) !important;
}

/* ---- Drawer and popups ---- */
html[data-theme="light"] .drawer-card {
  background: var(--tf-header) !important;
  color: var(--tf-on-header) !important;
}

html[data-theme="light"] .drawer-card .drawer-user h2,
html[data-theme="light"] .drawer-card .points div,
html[data-theme="light"] .drawer-card .drawer-user h2 span {
  color: var(--tf-on-header) !important;
}

html[data-theme="light"] .trade-mode-btn.active {
  background: var(--tf-header) !important;
  color: var(--tf-on-header) !important;
}

html[data-theme="light"] .yes-btn,
html[data-theme="light"] .continue-btn,
html[data-theme="light"] .toggle.on {
  background: var(--tf-header) !important;
  border-color: var(--tf-header) !important;
  color: var(--tf-on-header) !important;
}

html[data-theme="light"] .sell-btn {
  background: var(--tf-loss-badge) !important;
}

html[data-theme="light"] .buy-btn {
  background: var(--tf-gain) !important;
}