/* Backtest research view. It intentionally shares the dashboard variables and
   vendor chart with the live monitor, but keeps its own layout and controls. */

:root {
  --bt-panel: #101622;
  --bt-panel-raised: #151d2b;
  --bt-line: #263147;
  --bt-line-soft: #1b2536;
  --bt-blue-soft: rgba(79, 140, 255, .13);
}

html { min-height: 100%; }

body.backtests-body {
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(20, 29, 45, .42), transparent 220px),
    var(--bg);
}

.backtests-body button,
.backtests-body input,
.backtests-body select { font: inherit; }

.backtests-body button:focus-visible,
.backtests-body a:focus-visible,
.backtests-body input:focus-visible,
.backtests-body select:focus-visible,
.backtests-body [tabindex="0"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.backtests-body .btn-ghost:disabled { cursor: not-allowed; opacity: .45; }

.bt-login-view {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(900px 480px at 50% -10%, #141b2c 0%, var(--bg) 65%);
}

.bt-login-card { width: min(360px, calc(100vw - 32px)); }

.bt-app {
  min-height: 100dvh;
  color: var(--text);
}

.bt-topbar {
  min-height: 48px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(17, 21, 31, .96);
  border-bottom: 1px solid var(--border);
}

.bt-topbar-left,
.bt-topbar-nav,
.bt-brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bt-brand-link {
  color: var(--text);
  text-decoration: none;
}

.bt-brand-link:hover { color: #fff; }

.bt-topbar-nav { color: var(--text-dim); font-size: 12px; }
.bt-topbar-nav a { color: var(--text-dim); text-decoration: none; }
.bt-topbar-nav a:hover { color: var(--text); }
.bt-topbar-nav > span { color: var(--text); }

.bt-readonly {
  color: var(--up);
  font: 10px var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
}

.bt-readonly span { font-size: 9px; }

.bt-shell {
  width: min(1800px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 56px;
}

.bt-page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 22px;
}

.bt-eyebrow,
.bt-section-kicker {
  color: var(--accent);
  font: 10px var(--mono);
  letter-spacing: .14em;
}

.bt-page-intro h1 {
  margin-top: 5px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -.03em;
}

.bt-lede {
  max-width: 700px;
  margin-top: 9px;
  color: var(--text-dim);
  font-size: 13px;
}

.bt-source-state {
  max-width: 360px;
  padding: 9px 12px;
  border: 1px solid var(--bt-line);
  border-radius: 6px;
  color: var(--text-dim);
  font: 11px/1.45 var(--mono);
  text-align: right;
}

.bt-source-state.ready { border-color: rgba(38, 166, 154, .45); color: var(--up); }
.bt-source-state.warn { border-color: rgba(242, 177, 52, .5); color: var(--warn); }
.bt-source-state.error { border-color: rgba(239, 83, 80, .55); color: var(--down); }

.bt-filter-panel,
.bt-catalog-panel,
.bt-detail-panel {
  background: var(--bt-panel);
  border: 1px solid var(--bt-line);
  border-radius: 8px;
}

.bt-filter-panel { padding: 15px 16px 13px; margin-bottom: 14px; }

.bt-filter-heading,
.bt-panel-heading,
.bt-catalog-toolbar,
.bt-detail-header,
.bt-chart-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.bt-filter-heading h2,
.bt-panel-heading h2 {
  margin-top: 2px;
  color: var(--text);
  font-size: 15px;
  letter-spacing: -.01em;
}

.bt-filter-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bt-apply-button { padding: 6px 13px; letter-spacing: 0; font-size: 12px; }

.bt-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(135px, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.bt-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bt-field-wide { grid-column: span 2; }
.bt-field > span { color: var(--text-faint); font-size: 11px; }

.bt-field input,
.bt-field select {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--bt-line);
  border-radius: 5px;
  background: var(--bt-panel-raised);
  color: var(--text);
  outline: none;
}

.bt-field input::placeholder { color: var(--text-faint); }
.bt-field input:focus,
.bt-field select:focus { border-color: var(--accent); }
.bt-field input[type="date"] { color-scheme: dark; font-family: var(--mono); }
.bt-field input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1); }

.bt-metric-filter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(135px, 1fr));
  gap: 10px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--bt-line-soft);
}
.bt-range-field { min-width: 0; }
.bt-range-field > span { display: block; margin-bottom: 5px; color: var(--text-faint); font-size: 11px; }
.bt-range-inputs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 5px; }
.bt-range-inputs input {
  width: 100%;
  min-height: 34px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--bt-line);
  border-radius: 5px;
  background: var(--bt-panel-raised);
  color: var(--text);
  outline: none;
  font-family: var(--mono);
}
.bt-range-inputs input::placeholder { color: var(--text-faint); }
.bt-range-inputs input:focus { border-color: var(--accent); }
.bt-range-inputs i { color: var(--text-faint); font-style: normal; }
.bt-filter-help { margin-top: 8px; color: var(--text-faint); font-size: 10px; }

.bt-filter-note {
  min-height: 17px;
  margin-top: 9px;
  color: var(--text-faint);
  font-size: 11px;
}
.bt-filter-note.error { color: var(--down); }

.bt-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--bt-line);
  border: 1px solid var(--bt-line);
  border-radius: 7px;
}

.bt-summary-card {
  min-height: 74px;
  padding: 11px 14px;
  background: var(--bt-panel);
}
.bt-summary-card .label { color: var(--text-faint); font-size: 11px; }
.bt-summary-card .value { margin-top: 2px; font: 20px var(--mono); }
.bt-summary-card .hint { margin-top: 2px; color: var(--text-dim); font-size: 10px; }

.bt-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.bt-catalog-panel { min-width: 0; overflow: hidden; }
.bt-panel-heading { padding: 15px 15px 12px; border-bottom: 1px solid var(--bt-line-soft); }
.bt-count,
.bt-selection-count { color: var(--text-faint); font: 11px var(--mono); white-space: nowrap; }

.bt-catalog-toolbar {
  justify-content: flex-start;
  padding: 8px 11px;
  border-bottom: 1px solid var(--bt-line-soft);
  flex-wrap: wrap;
}
.bt-catalog-toolbar .btn-ghost { padding: 4px 8px; font-size: 11px; }
.bt-selection-count { margin-left: auto; }
.bt-sort-control { display: flex; align-items: center; gap: 6px; color: var(--text-faint); font-size: 11px; white-space: nowrap; }
.bt-catalog-toolbar .bt-sort-control {
  min-height: 33px;
  padding: 3px 5px 3px 8px;
  border: 1px solid rgba(79, 140, 255, .42);
  border-radius: 5px;
  background: var(--bt-blue-soft);
}
.bt-catalog-toolbar .bt-sort-control > span { color: var(--text); font-weight: 600; }
.bt-sort-control select {
  min-height: 27px;
  max-width: 190px;
  padding: 4px 6px;
  border: 1px solid var(--bt-line);
  border-radius: 4px;
  background: var(--bt-panel-raised);
  color: var(--text);
  font: 11px var(--mono);
  outline: none;
}
.bt-sort-control select:focus { border-color: var(--accent); }
.bt-sort-summary {
  flex: 1 1 170px;
  min-width: 145px;
  color: var(--text-faint);
  font: 10px/1.4 var(--mono);
  overflow-wrap: anywhere;
}

.bt-catalog {
  max-height: calc(100dvh - 310px);
  min-height: 110px;
  overflow: auto;
}

.bt-catalog-row {
  position: relative;
  display: block;
  padding: 12px 13px 12px 39px;
  border-bottom: 1px solid var(--bt-line-soft);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.bt-catalog-row:last-child { border-bottom: 0; }
.bt-catalog-row:hover,
.bt-catalog-row:focus-within { background: rgba(79, 140, 255, .055); }
.bt-catalog-row.active { background: var(--bt-blue-soft); box-shadow: inset 2px 0 0 var(--accent); }
.bt-catalog-row input { position: absolute; top: 14px; left: 14px; accent-color: var(--accent); }
.bt-catalog-select {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.bt-catalog-top,
.bt-catalog-meta,
.bt-badge-row,
.bt-metric-line,
.bt-trade-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.bt-catalog-top { justify-content: space-between; gap: 10px; }
.bt-catalog-variant { color: var(--text); font-weight: 650; overflow-wrap: anywhere; }
.bt-catalog-run { color: var(--text-faint); font: 10px var(--mono); overflow-wrap: anywhere; }
.bt-catalog-meta { margin-top: 5px; color: var(--text-dim); font-size: 11px; }
.bt-catalog-meta .date { font-family: var(--mono); }
.bt-metric-line { margin-top: 8px; gap: 14px; color: var(--text-dim); font: 11px var(--mono); }
.bt-metric-line b { color: var(--text); font-weight: 500; }

.bt-badge,
.bt-status-badge,
.bt-session-chip,
.bt-symbol-chip {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 1px 6px;
  border: 1px solid var(--bt-line);
  border-radius: 4px;
  color: var(--text-dim);
  font: 10px var(--mono);
  white-space: nowrap;
}
.bt-status-badge.ready { color: var(--up); border-color: rgba(38, 166, 154, .5); }
.bt-status-badge.partial,
.bt-status-badge.missing { color: var(--warn); border-color: rgba(242, 177, 52, .5); }
.bt-status-badge.corrupt { color: var(--down); border-color: rgba(239, 83, 80, .55); }
.bt-missing-indicator { color: var(--warn); font: 10px var(--mono); white-space: nowrap; }
.bt-badge.warn { color: var(--warn); border-color: rgba(242, 177, 52, .45); }
.bt-badge.error { color: var(--down); border-color: rgba(239, 83, 80, .45); }
.bt-badge.info { color: var(--accent); border-color: rgba(79, 140, 255, .42); }

.bt-status-region { padding: 10px 13px; }
.bt-status-region:empty { display: none; }
.bt-status-box,
.bt-empty-state,
.bt-error-state {
  padding: 24px 20px;
  color: var(--text-dim);
  text-align: center;
}
.bt-status-box { border-bottom: 1px solid var(--bt-line-soft); font-size: 12px; }
.bt-status-box.empty { display: grid; gap: 4px; justify-items: center; }
.bt-status-box.empty .bt-inline-action { margin-top: 4px; }
.bt-status-box.error,
.bt-error-state { color: var(--down); }
.bt-status-box.loading { color: var(--accent); }
.bt-empty-state { min-height: 330px; display: grid; place-content: center; justify-items: center; }
.bt-empty-state h2 { color: var(--text); font-size: 18px; }
.bt-empty-state p { max-width: 420px; margin-top: 8px; line-height: 1.7; }
.bt-empty-mark {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 13px;
  place-items: center;
  border: 1px solid var(--bt-line);
  border-radius: 50%;
  color: var(--accent);
  font-size: 22px;
}
.bt-inline-action { margin-top: 14px; }

.bt-detail-panel { min-width: 0; padding: 17px; }
.bt-detail-header { align-items: flex-start; }
.bt-detail-title { min-width: 0; }
.bt-detail-title h2 { color: var(--text); font-size: 20px; overflow-wrap: anywhere; }
.bt-detail-title .run { margin-top: 3px; color: var(--text-faint); font: 11px var(--mono); overflow-wrap: anywhere; }
.bt-detail-title .description { max-width: 760px; margin-top: 6px; color: var(--text-dim); }
.bt-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.bt-detail-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  gap: 1px;
  margin-top: 16px;
  overflow: hidden;
  background: var(--bt-line);
  border: 1px solid var(--bt-line);
  border-radius: 6px;
}
.bt-detail-metric { min-height: 64px; padding: 9px 10px; background: var(--bt-panel-raised); }
.bt-detail-metric .label { color: var(--text-faint); font-size: 10px; }
.bt-detail-metric .value { margin-top: 3px; color: var(--text); font: 15px var(--mono); white-space: nowrap; }

.bt-comparison { margin-top: 16px; }
.bt-comparison:empty { display: none; }
.bt-subheading { margin-bottom: 7px; color: var(--text-faint); font-size: 11px; letter-spacing: .08em; }
.bt-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--bt-line-soft); border-radius: 5px; }
.bt-table { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; }
.bt-table th,
.bt-table td { padding: 8px 9px; border-bottom: 1px solid var(--bt-line-soft); vertical-align: top; }
.bt-table th { color: var(--text-faint); background: rgba(21, 29, 43, .72); font-size: 10px; font-weight: 500; white-space: nowrap; }
.bt-table td { color: var(--text-dim); font-size: 11px; }
.bt-table tr:last-child td { border-bottom: 0; }
.bt-table .num { color: var(--text); font-family: var(--mono); white-space: nowrap; }
.bt-table .clickable { cursor: pointer; }
.bt-table .clickable:hover { background: rgba(79, 140, 255, .06); }

.bt-detail-tabs {
  display: flex;
  gap: 4px;
  margin-top: 18px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--bt-line);
  overflow-x: auto;
}
.bt-detail-tab {
  padding: 7px 12px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  white-space: nowrap;
}
.bt-detail-tab:hover { color: var(--text); background: var(--bt-panel-raised); }
.bt-detail-tab.active { background: var(--bt-blue-soft); color: var(--accent); }
.bt-detail-tabpanel { padding-top: 16px; }

.bt-summary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr);
  gap: 16px;
}
.bt-summary-block { min-width: 0; }
.bt-summary-block + .bt-summary-block { border-left: 1px solid var(--bt-line-soft); padding-left: 16px; }
.bt-kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--bt-line-soft); border: 1px solid var(--bt-line-soft); }
.bt-kv { min-width: 0; padding: 8px 9px; background: var(--bt-panel-raised); }
.bt-kv dt { color: var(--text-faint); font-size: 10px; }
.bt-kv dd { margin-top: 2px; color: var(--text); font: 11px var(--mono); overflow-wrap: anywhere; }
.bt-config {
  max-height: 290px;
  margin: 0;
  padding: 11px;
  overflow: auto;
  background: #0b111b;
  border: 1px solid var(--bt-line-soft);
  color: #b9c8e4;
  font: 11px/1.6 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bt-file-list { display: grid; gap: 6px; }
.bt-file-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-dim); font-size: 11px; }
.bt-file-row code { color: var(--text); font: 11px var(--mono); }
.bt-warning { margin-top: 10px; padding: 8px 10px; border-left: 2px solid var(--warn); background: rgba(242, 177, 52, .07); color: var(--warn); font-size: 11px; }
.bt-invalid-note { margin-bottom: 9px; color: var(--warn); font-size: 11px; }

.bt-trade-summary { margin-bottom: 10px; color: var(--text-dim); font-size: 11px; }
.bt-trade-summary strong { color: var(--text); font-family: var(--mono); font-weight: 500; }
.bt-trade-table .direction-long { color: var(--up); }
.bt-trade-table .direction-short { color: var(--down); }

.bt-chart-heading { align-items: flex-start; margin-bottom: 12px; }
.bt-chart-heading h3 { color: var(--text); font-size: 14px; }
.bt-chart-heading p { margin-top: 3px; color: var(--text-faint); font-size: 11px; }
.bt-chart-controls { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.bt-chart-controls label { display: flex; flex-direction: column; gap: 3px; color: var(--text-faint); font-size: 10px; }
.bt-chart-controls select { min-width: 120px; max-width: 210px; padding: 6px 7px; border: 1px solid var(--bt-line); border-radius: 4px; background: var(--bt-panel-raised); color: var(--text); font: 11px var(--mono); }
.bt-chart-strategies { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; color: var(--text-dim); font: 10px var(--mono); }
.bt-chart-strategy { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid var(--bt-line-soft); border-radius: 999px; }
.bt-chart-strategy i { width: 7px; height: 7px; border-radius: 50%; background: var(--bt-strategy-color); }
.bt-chart-wrap { position: relative; min-height: 390px; border: 1px solid var(--bt-line-soft); border-radius: 5px; background: #0c111a; }
.bt-price-chart { width: 100%; height: 390px; }
.bt-chart-state { display: grid; min-height: 390px; place-content: center; padding: 24px; color: var(--text-dim); text-align: center; }
.bt-chart-state.error { color: var(--down); }
.bt-chart-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; color: var(--text-faint); font-size: 10px; }
.bt-legend-dot { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--accent); }
.bt-legend-dot.long { background: var(--up); }
.bt-legend-dot.short { background: var(--down); }
.bt-legend-dot.close { background: var(--accent); }
.bt-chart-source { margin-top: 9px; color: var(--text-faint); font: 10px var(--mono); }

.bt-skeleton {
  height: 78px;
  margin: 1px 0;
  background: linear-gradient(90deg, var(--bt-panel) 20%, var(--bt-panel-raised) 50%, var(--bt-panel) 80%);
  background-size: 240% 100%;
  animation: bt-shimmer 1.4s linear infinite;
}
@keyframes bt-shimmer { to { background-position: -240% 0; } }

@media (prefers-reduced-motion: reduce) {
  .bt-catalog-row { transition: none; }
  .bt-skeleton { animation: none; }
}

@media (max-width: 1050px) {
  .bt-filter-grid { grid-template-columns: repeat(3, minmax(135px, 1fr)); }
  .bt-metric-filter-grid { grid-template-columns: repeat(3, minmax(135px, 1fr)); }
  .bt-field-wide { grid-column: span 1; }
  .bt-detail-metrics { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
  .bt-summary-layout { grid-template-columns: 1fr; }
  .bt-summary-block + .bt-summary-block { padding-left: 0; border-left: 0; border-top: 1px solid var(--bt-line-soft); padding-top: 16px; }
}

@media (max-width: 780px) {
  .bt-topbar { padding: 8px 14px; align-items: flex-start; }
  .bt-topbar-left, .bt-topbar-nav { gap: 8px; flex-wrap: wrap; }
  .bt-topbar-nav { justify-content: flex-end; }
  .bt-shell { width: min(100% - 20px, 680px); padding-top: 20px; }
  .bt-page-intro { grid-template-columns: 1fr; gap: 12px; }
  .bt-source-state { max-width: none; text-align: left; }
  .bt-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-metric-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-field-wide { grid-column: span 2; }
  .bt-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-workspace { grid-template-columns: 1fr; }
  .bt-catalog { max-height: 430px; }
  .bt-detail-panel { padding: 13px; }
  .bt-detail-header { display: block; }
  .bt-detail-actions { justify-content: flex-start; margin-top: 10px; }
  .bt-sort-summary { flex-basis: 100%; }
  .bt-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-chart-heading { display: block; }
  .bt-chart-controls { justify-content: flex-start; margin-top: 10px; }
  .bt-chart-wrap, .bt-price-chart, .bt-chart-state { min-height: 320px; height: 320px; }
}

@media (max-width: 460px) {
  .bt-topbar { display: block; }
  .bt-topbar-nav { margin-top: 7px; justify-content: flex-start; }
  .bt-filter-heading { display: block; }
  .bt-filter-actions { margin-top: 10px; }
  .bt-filter-grid { grid-template-columns: 1fr; }
  .bt-metric-filter-grid { grid-template-columns: 1fr; }
  .bt-field-wide { grid-column: auto; }
  .bt-summary-grid { grid-template-columns: 1fr 1fr; }
  .bt-summary-card { padding-left: 10px; padding-right: 10px; }
  .bt-summary-card .value { font-size: 16px; }
  .bt-kv-grid { grid-template-columns: 1fr; }
  .bt-selection-count { margin-left: 0; }
  .bt-sort-control { width: 100%; justify-content: space-between; }
  .bt-sort-control select { flex: 1; max-width: none; }
  .bt-chart-controls label,
  .bt-chart-controls select { width: 100%; max-width: none; }
}