/* ═══════════════════════════════════════════════════════════════════════
   rounded.css — Global rounded corners override
   Applies var(--radius) tokens to all cards, panels, inputs, buttons,
   tags, modals, and interactive elements across every tab.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Cards & Panels ──────────────────────────────────────────────────── */
.ex-card, .cres-block, .calc-form, .calc-empty-state,
.chart-panel, .ob-panel, .tape-panel,
.bot-card, .buc-card, .bes-section,
.sig-wrap, #signal-wrap, .liq-bar-wrap,
.cluster-block, .liq-range-bar,
.calc-results, .score-block,
.cres-levels, .cres-insight,
.bot-render-error, .bot-empty-state,
.mm-wrap, .mm-track,
.cscore-circle,
[class*="-block"], [class*="-panel"], [class*="-card"] {
  border-radius: var(--radius);
}

/* ── Small elements: tags, badges, pills ─────────────────────────────── */
.tag, .tag-long, .tag-short, .tag-notrade,
.ex-status, .buc-mode-badge, .bes-badge,
.ob-side-badge, .tick-btn,
.toggle-on, .toggle-off, .toggle-all, .toggle-none,
.ex-toggle,
.cluster-row, .levels-grid .cell,
.ctp-legend, .ctp-row,
#ob-spoof,
[class*="-badge"], [class*="-tag"], [class*="-pill"] {
  border-radius: var(--radius-sm);
}

/* ── Inputs & Selects ────────────────────────────────────────────────── */
input[type="text"], input[type="number"], input[type="password"],
input[type="date"], select, textarea,
.cff-input, .cff-select, .bm-input, .bm-select,
#calc-btc-override, #symbol-select, .login-input {
  border-radius: var(--radius-sm);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
button, .calc-btn-primary, .calc-btn-secondary,
.bw-btn-next, .bw-btn-back, .bw-btn-cancel,
.login-btn, .bes-dl-btn,
.cdir-btn, #theme-toggle,
[class*="-btn"], [class*="btn-"] {
  border-radius: var(--radius-sm);
}

/* ── Direction toggle (override to keep pair joined) ─────────────────── */
.cff-dir-toggle { border-radius: var(--radius-sm); overflow: hidden; }
.cdir-btn { border-radius: 0; }
.cdir-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.cdir-btn:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ── Grid cells (position sizing, signal levels) ─────────────────────── */
.cres-grid4 { border-radius: var(--radius); overflow: hidden; }
.cres-cell  { border-radius: 0; }  /* cells inside grid stay flush */
.cell-grid, .levels-grid { border-radius: var(--radius); overflow: hidden; }

/* ── Tables ──────────────────────────────────────────────────────────── */
.factor-table, .factor-table thead tr:first-child th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.factor-table thead tr:first-child th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }

/* ── Modals & overlays ───────────────────────────────────────────────── */
.modal-box, .bot-wizard, .bw-panel { border-radius: var(--radius-lg); }

/* ── Progress bars & fills ───────────────────────────────────────────── */
.score-bar, .ctp-bar-wrap, .cscore-bar-wrap,
.liq-bar-track, .mm-baseline {
  border-radius: 99px;
}
.score-fill, .ctp-bar-fill, .cscore-bar { border-radius: 99px; }

/* ── Skeleton loaders ────────────────────────────────────────────────── */
.skeleton { border-radius: var(--radius-sm); }

/* ── Exchange status dot + signal dot ───────────────────────────────── */
.pulse-dot, .sb-dot, .ex-dot { border-radius: 50%; }

/* ── Topbar — subtle bottom radius ───────────────────────────────────── */
.ct-topbar { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

/* ── Symbol bar chips ────────────────────────────────────────────────── */
.sym-btn, #symbol-select { border-radius: var(--radius-sm); }

/* ── Insight / alert strips ──────────────────────────────────────────── */
.cres-insight { border-radius: var(--radius-sm); }
.cres-insight.pos, .cres-insight.neg { border-left-width: 3px; }

/* ── No-data states ──────────────────────────────────────────────────── */
.no-data { border-radius: var(--radius); }

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE BACKGROUND OVERRIDES
   main.css loads before this file, so these rules win the cascade.
   Every `background: #fff` and solid green panel in main.css is
   overridden here for [data-theme="night"].
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="night"] .avg-section,
[data-theme="night"] .ex-card,
[data-theme="night"] .cell,
[data-theme="night"] #signal-wrap,
[data-theme="night"] .liq-bar-wrap,
[data-theme="night"] .cluster-row,
[data-theme="night"] .cres-cell,
[data-theme="night"] .cres-block,
[data-theme="night"] .calc-form,
[data-theme="night"] .calc-empty-state,
[data-theme="night"] .calc-card,
[data-theme="night"] .cscore-circle,
[data-theme="night"] #chart-right,
[data-theme="night"] #chart-tape,
[data-theme="night"] #chart-main,
[data-theme="night"] .tick-btn,
[data-theme="night"] .pill,
[data-theme="night"] #symbol-select {
  background: var(--surface);
}

/* Inputs that focus-flash to #fff in main.css */
[data-theme="night"] .cff-input:focus {
  background: var(--bg2);
  color: var(--white);
}

/* Secondary/outline buttons */
[data-theme="night"] .calc-btn-secondary,
[data-theme="night"] .btn.secondary {
  background: transparent;
  color: var(--green);
}

/* avg-section arb-bar — subtle green tint is fine, but soften it */
[data-theme="night"] .arb-bar {
  background: rgba(0, 230, 118, 0.05);
  border-color: var(--border);
  border-left-color: var(--green);
}

/* ── Chart page: main.css redefines these after chart.css ────────────── */
[data-theme="night"] #ob-header {
  background: var(--bg2);
  border-bottom: 2px solid var(--green);
  color: var(--white);
}
[data-theme="night"] #ob-symbol { color: var(--white); }
[data-theme="night"] .ob-sub,
[data-theme="night"] .ob-key  { color: var(--dim); }
[data-theme="night"] .ob-val  { color: var(--white); }

[data-theme="night"] #tape-header {
  background: var(--bg2);
  border-bottom: 2px solid var(--green);
  color: var(--white);
}

/* Bid depth bar — main.css has hardcoded Pakistan Green #01411C */
[data-theme="night"] .bid-bg  { background: var(--green); }
[data-theme="night"] .bid-cum { background: rgba(0, 230, 118, 0.06); }

/* Tick buttons and order book background */
[data-theme="night"] #chart-right,
[data-theme="night"] #chart-tape { background: var(--surface); }

/* ── Exchange grid spacing ───────────────────────────────────────────── */
/* main.css uses gap:1px + background:var(--border) as a divider trick.
   Override to proper card spacing instead. */
#exchange-grid {
  gap: 16px;
  background: transparent;
  border: none;
  padding: 4px;           /* tiny outer breathing room */
}
.ex-card {
  border: 1px solid var(--border);
  padding: 18px 20px;
  margin: 5px;
}