/* ============================================================
   BACKTEST LAB v2 — Premium CSS Overlay
   Targets existing classes + new bt2- classes
   No HTML restructuring — pure additive styling
   ============================================================ */

/* ── Page background ─────────────────────────────────────── */
[data-view="backtest"] {
  background: #07090f;
}

/* ── Premium topbar ──────────────────────────────────────── */
.bt2-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: linear-gradient(90deg, #0a0f1e 0%, #0c1428 50%, #0a0f1e 100%);
  border-bottom: 1px solid rgba(201,168,76,0.20);
  flex-shrink: 0;
  z-index: 10;
}
.bt2-brand {
  font-size: 1.0rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #b4c3f0;
  text-transform: uppercase;
}
.bt2-brand span { color: #c9a84c; }

.bt2-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(79,140,255,0.10);
  border: 1px solid rgba(79,140,255,0.28);
  color: #7fb3ff;
  text-transform: uppercase;
}
.bt2-badge-lab {
  background: rgba(201,168,76,0.09);
  border-color: rgba(201,168,76,0.32);
  color: #c9a84c;
}

/* ── Animated progress bar ───────────────────────────────── */
.bt2-progress {
  width: 100px;
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
}
.bt2-progress-bar {
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, #c9a84c, #e2c36b, #c9a84c);
  border-radius: 4px;
  animation: bt2-sweep 1.5s ease-in-out infinite;
}
@keyframes bt2-sweep {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(450%); }
}

/* ── Sidebar ─────────────────────────────────────────────── */
#bt-sidebar {
  background: #0a0f1e !important;
  border-right: 1px solid rgba(201,168,76,0.10) !important;
}

.bt-sb-section {
  padding: 10px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.035);
}
.bt-sb-section:last-child { border-bottom: none; }

.bt-sb-label {
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: rgba(201,168,76,0.65) !important;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ── Timeframe pills ─────────────────────────────────────── */
.bt-tf-pill {
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  color: rgba(180,195,240,0.50);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
}
.bt-tf-pill:hover {
  border-color: rgba(201,168,76,0.38);
  color: #c9a84c;
}
.bt-tf-pill.active {
  background: rgba(201,168,76,0.11);
  border-color: #c9a84c;
  color: #e2c36b;
}

/* ── Mini buttons (Recommended / All / Clear / Scalp etc) ── */
.bt-mini-btn {
  padding: 3px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 4px;
  color: rgba(180,195,240,0.55);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
}
.bt-mini-btn:hover {
  background: rgba(79,140,255,0.09);
  border-color: rgba(79,140,255,0.28);
  color: #7fb3ff;
}

/* ── Quick-range date buttons ────────────────────────────── */
.bt-quick-range { transition: all 0.14s !important; }
.bt-quick-range:hover {
  background: rgba(201,168,76,0.08) !important;
  border-color: rgba(201,168,76,0.28) !important;
  color: #c9a84c !important;
}

/* ── Run button ──────────────────────────────────────────── */
#bt-run-btn {
  background: linear-gradient(120deg, #1a3a6a, #2a5a9a) !important;
  border: 1px solid rgba(79,140,255,0.48) !important;
  transition: all 0.18s !important;
}
#bt-run-btn:hover {
  background: linear-gradient(120deg, #1e4480, #3368b0) !important;
  border-color: #6aabff !important;
  box-shadow: 0 0 16px rgba(79,140,255,0.22) !important;
}

/* ── Section cards (main area) ───────────────────────────── */
.bt-section-card {
  background: rgba(12,20,40,0.88);
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: 8px;
  padding: 14px 16px;
}

.bt-section-title {
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: rgba(201,168,76,0.75) !important;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ── Run list table rows ─────────────────────────────────── */
#bt-run-list-body tr { transition: background 0.11s; }
#bt-run-list-body tr:hover { background: rgba(79,140,255,0.055); }
#bt-run-list-body td { color: #b4c3f0; }

/* ── Result KPI grid (btViewRun output) ─────────────────── */
.bt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.bt-kpi-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 8px;
  padding: 10px 12px;
}
.bt-kpi-label {
  font-size: 10px;
  color: rgba(180,195,240,0.45);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}
.bt-kpi-val {
  font-size: 1.25rem;
  font-weight: 700;
  color: #d4deff;
}
.bt-kpi-sub {
  font-size: 10px;
  color: rgba(180,195,240,0.38);
  margin-top: 3px;
}
.bt-res-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.055);
}
.bt-empty {
  color: rgba(180,195,240,0.28);
  font-size: 12px;
  padding: 12px 0;
  text-align: center;
}

/* ── bt2 KPI strip ───────────────────────────────────────── */
.bt2-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) { .bt2-kpis { grid-template-columns: repeat(2,1fr); } }
@media (max-width:  640px) { .bt2-kpis { grid-template-columns: 1fr 1fr; } }

.bt2-kpi {
  background: rgba(12,20,40,0.82);
  border: 1px solid rgba(255,255,255,0.058);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color 0.18s;
}
.bt2-kpi:hover { border-color: rgba(79,140,255,0.20); }
.bt2-kpi.gold  { border-color: rgba(201,168,76,0.20); background: rgba(201,168,76,0.04); }
.bt2-kpi.gold:hover { border-color: rgba(201,168,76,0.40); }

.bt2-kpi-lbl {
  font-size: 10px;
  color: rgba(180,195,240,0.42);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}
.bt2-kpi-val {
  font-size: 1.12rem;
  font-weight: 700;
  color: #b4c3f0;
}
.bt2-kpi-val.pos { color: #86efac; }
.bt2-kpi-val.neg { color: #fca5a5; }
.bt2-kpi-sub {
  font-size: 10px;
  color: rgba(180,195,240,0.32);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tab bar ─────────────────────────────────────────────── */
.bt2-tab-bar {
  display: flex;
  gap: 4px;
}
.bt2-tab-btn {
  padding: 5px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  color: rgba(180,195,240,0.42);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.14s;
}
.bt2-tab-btn:hover {
  background: rgba(79,140,255,0.07);
  border-color: rgba(79,140,255,0.22);
  color: #7fb3ff;
}
.bt2-tab-btn.on {
  background: rgba(79,140,255,0.11);
  border-color: rgba(79,140,255,0.38);
  color: #a5c8ff;
}
.bt2-tab-btn span {
  display: inline-block;
  min-width: 14px;
  padding: 0 4px;
  background: rgba(201,168,76,0.14);
  border-radius: 8px;
  color: #c9a84c;
  font-size: 10px;
  margin-left: 3px;
}

/* ── Validation score badge ──────────────────────────────── */
.bt2-score {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.bt2-score.A  { background: rgba(134,239,172,0.11); color: #86efac; border: 1px solid rgba(134,239,172,0.24); }
.bt2-score.B  { background: rgba(79,140,255,0.11);  color: #7fb3ff; border: 1px solid rgba(79,140,255,0.24); }
.bt2-score.C  { background: rgba(251,191,36,0.09);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.22); }
.bt2-score.D  { background: rgba(252,165,165,0.09); color: #fca5a5; border: 1px solid rgba(252,165,165,0.22); }
.bt2-score.NA { background: rgba(180,195,240,0.04); color: rgba(180,195,240,0.28); border: 1px solid rgba(255,255,255,0.07); }

/* ── Archive action button ───────────────────────────────── */
.bt2-act-btn {
  padding: 2px 7px;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.22);
  border-radius: 4px;
  color: #c9a84c;
  font-size: 10px;
  cursor: pointer;
  margin-left: 4px;
  transition: all 0.14s;
}
.bt2-act-btn:hover { background: rgba(201,168,76,0.17); }
.bt2-act-btn.archived {
  background: rgba(252,165,165,0.07);
  border-color: rgba(252,165,165,0.22);
  color: #fca5a5;
}
.bt2-act-btn.archived:hover { background: rgba(252,165,165,0.14); }

/* ── Archive panel header bar ────────────────────────────── */
.bt2-arch-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: rgba(12,20,40,0.82);
  border: 1px solid rgba(255,255,255,0.058);
  border-radius: 8px 8px 0 0;
}

/* ── Archive table ───────────────────────────────────────── */
.bt2-tbl {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
  background: rgba(12,20,40,0.82);
  border: 1px solid rgba(255,255,255,0.058);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.bt2-tbl th {
  padding: 6px 9px;
  text-align: left;
  color: rgba(180,195,240,0.42);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-weight: 600;
}
.bt2-tbl td {
  padding: 7px 9px;
  color: #b4c3f0;
  border-bottom: 1px solid rgba(255,255,255,0.025);
}
.bt2-tbl tr:last-child td { border-bottom: none; }
.bt2-tbl tr:hover td { background: rgba(79,140,255,0.04); }
.bt2-tbl .c-id  { font-family: monospace; font-size: 10px; color: #4f8cff; }
.bt2-tbl .c-pos { color: #86efac; }
.bt2-tbl .c-neg { color: #fca5a5; }

/* ── SESSION 2 ADDITIONS ─────────────────────────────────── */

/* Scrollable runs table */
#bt2-panel-runs .bt-section-card > div[style*="overflow-x"],
#bt2-panel-runs > div[style*="overflow-x"] {
  max-height: 420px;
  overflow-y: auto !important;
}
#bt2-panel-runs table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  background: #0c1428 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

/* Scrollbar styling */
#bt2-panel-runs .bt-section-card ::-webkit-scrollbar { width: 4px; height: 4px; }
#bt2-panel-runs .bt-section-card ::-webkit-scrollbar-track { background: transparent; }
#bt2-panel-runs .bt-section-card ::-webkit-scrollbar-thumb {
  background: rgba(201,168,76,0.22);
  border-radius: 2px;
}

/* Date column */
td[data-bt2col="date"] {
  font-size: 10px;
  color: rgba(180,195,240,0.38);
  white-space: nowrap;
}

/* Charts row */
#bt2-charts-row canvas { display: block; }

/* Compare charts container */
#bt2-cmp-charts { margin-top: 14px; }

/* Archive table scrollable */
#bt2-arch-body { overflow-x: auto; }
#bt2-arch-body table { min-width: 700px; }