/**
 * BigPlay — Theme Parity Layer (WP05)
 * Load AFTER theme.bundle + exchange-theme (+ type/space/radius).
 * Ensures light/dark share roles; Back/Lay immutable; flags not color-only.
 */

/* ── Odds aliases stay theme-driven (never theme-wash Back/Lay) ──────────── */
.exchange-app {
  --ex-back: var(--theme-odds-back, var(--bp-back));
  --ex-back-hover: var(--theme-odds-back-hover, var(--bp-back-hover));
  --ex-back-text: var(--theme-odds-back-text, var(--bp-odds-ink));
  --ex-lay: var(--theme-odds-lay, var(--bp-lay));
  --ex-lay-hover: var(--theme-odds-lay-hover, var(--bp-lay-hover));
  --ex-lay-text: var(--theme-odds-lay-text, var(--bp-odds-ink));
  --ex-draw: var(--theme-odds-draw, var(--bp-draw));
  --ex-draw-hover: var(--theme-odds-draw-hover, var(--bp-draw-hover));
  --ex-draw-text: var(--theme-odds-draw-text, var(--bp-odds-ink));
}

/* ── Global keyboard focus (auth + chrome) ──────────────────────────────── */
.exchange-app a:focus-visible,
.exchange-app button:focus-visible,
.exchange-app [role="button"]:focus-visible,
.exchange-app input:focus-visible,
.exchange-app select:focus-visible,
.exchange-app textarea:focus-visible,
.exchange-app .ex-price:focus-visible,
.exchange-app .nav-link:focus-visible {
  outline: var(--theme-focus-ring-width, 2px) solid var(--theme-focus-ring, var(--bp-orange-400));
  outline-offset: var(--theme-focus-offset, 2px);
}

/* ── Account / shell surfaces — always semantic (dark parity) ───────────── */
html.theme-dark .exchange-account-layout .ex-shell__main > .ex-user-panel,
html.theme-dark .exchange-account-layout .ex-shell__main > .ex-money-section,
html.theme-dark .exchange-account-layout .ex-shell__main > .ex-account-section,
html.theme-dark .exchange-account-layout .ex-shell__main > .ex-dashboard-page,
html.theme-dark .exchange-account-layout .ex-shell__main > .ex-trading-page,
.theme-dark .exchange-account-layout .ex-shell__main > .ex-user-panel,
.theme-dark .exchange-account-layout .ex-shell__main > .ex-money-section,
.theme-dark .exchange-account-layout .ex-shell__main > .ex-account-section,
.theme-dark .exchange-account-layout .ex-shell__main > .ex-dashboard-page,
.theme-dark .exchange-account-layout .ex-shell__main > .ex-trading-page {
  background: var(--theme-bg-market, var(--ex-market-bg));
  border-color: var(--theme-border-default, var(--ex-border));
  color: var(--theme-text-body, var(--ex-text));
}

html.theme-dark .exchange-account-layout .ex-table thead th,
.theme-dark .exchange-account-layout .ex-table thead th {
  background: var(--theme-table-head-bg);
  color: var(--theme-text-strong);
  border-color: var(--theme-table-border);
}

html.theme-dark .exchange-account-layout .form-control,
html.theme-dark .exchange-account-layout .form-select,
.theme-dark .exchange-account-layout .form-control,
.theme-dark .exchange-account-layout .form-select {
  background: var(--theme-input-bg);
  color: var(--theme-input-text);
  border-color: var(--theme-input-border);
}

html.theme-dark .exchange-account-layout .form-control:focus,
html.theme-dark .exchange-account-layout .form-select:focus,
.theme-dark .exchange-account-layout .form-control:focus,
.theme-dark .exchange-account-layout .form-select:focus {
  border-color: var(--theme-input-focus-border, var(--theme-primary, #DD3E42));
  outline: none;
  box-shadow: 0 0 0 1px var(--theme-primary, #DD3E42);
}

/* ── BM / F / GL flags — label text already present; add pattern cues ────── */
.exchange-app .ex-indibet-row__flag--bm.is-on,
.exchange-app .ex-indibet-row__flag--fancy.is-on,
.exchange-app .ex-indibet-row__flag--gl.is-on {
  background: var(--theme-flag-on-bg, #006400);
  color: var(--theme-flag-on-text, #FFFFFF);
  opacity: 1;
  filter: none;
}

.exchange-app .ex-indibet-row__flag--bm.is-off,
.exchange-app .ex-indibet-row__flag--fancy.is-off,
.exchange-app .ex-indibet-row__flag--gl.is-off {
  background: var(--theme-flag-off-bg);
  color: var(--theme-flag-off-text);
}

/* Distinct non-color cues when ON (color-blind safe) — BM stays regular weight */
.exchange-app .ex-indibet-row__flag--bm.is-on {
  box-shadow: var(--theme-flag-bm-accent, none);
  font-weight: var(--theme-weight-regular, 400);
}

.exchange-app .ex-indibet-row__flag--fancy.is-on {
  box-shadow: var(--theme-flag-fancy-accent, none);
}

.exchange-app .ex-indibet-row__flag--gl.is-on {
  box-shadow: var(--theme-flag-gl-accent);
}

/* Ensure glyph/label never relies on fill alone */
.exchange-app .ex-indibet-row__flag--bm,
.exchange-app .ex-indibet-row__flag--fancy,
.exchange-app .ex-indibet-row__flag--gl {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ── Section / page canvas parity ───────────────────────────────────────── */
html.theme-dark .exchange-app,
.theme-dark .exchange-app {
  background: var(--theme-bg-page);
  color: var(--theme-text-body);
}

html.theme-light .exchange-app,
.theme-light .exchange-app {
  background: var(--theme-bg-page);
  color: var(--theme-text-body);
}