/* Funding Backtester: catalogue Foundation, scoped to this approved tab. */
#backtesterTab { color: var(--text-1); font-family: var(--font-sans); }
#backtesterTab .backtester { gap: var(--space-5); }
#backtesterTab .bt-config-card, #backtesterTab .bt-chart-card, #backtesterTab .bt-side-card,
#backtesterTab .bt-result-empty, #backtesterTab .bt-settlements {
  background: var(--surface-1); border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  padding: var(--space-5); color: var(--text-1); box-shadow: none;
}
#backtesterTab .bt-config-title, #backtesterTab .bt-side-title {
  color: var(--text-2); font-size: var(--fs-12); letter-spacing: var(--tracking-wider);
  font-weight: var(--fw-semibold); margin-bottom: var(--space-4);
}
#backtesterTab .bt-config-grid { gap: var(--space-3); grid-template-columns: repeat(6, minmax(0, 1fr)); }
#backtesterTab .bt-field { gap: var(--space-2); }
#backtesterTab .bt-field label, #backtesterTab .bt-order-type legend {
  color: var(--text-2); font-size: var(--fs-12); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
#backtesterTab .bt-field-hint { color: var(--text-3); font-weight: var(--fw-regular); }
#backtesterTab .bt-input {
  height: var(--space-9); min-width: 0; width: 100%; box-sizing: border-box; padding: 0 var(--space-3);
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm);
  font-size: var(--fs-14); color: var(--text-1);
}
#backtesterTab .bt-input:focus { outline: none; border-color: var(--text-2); box-shadow: var(--input-focus-ring); }
#backtesterTab .bt-input::placeholder { color: var(--text-3); }
#backtesterTab .bt-config-actions { flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); align-items: flex-end; }
#backtesterTab .bt-btn-primary, #backtesterTab .bt-btn-secondary {
  height: var(--space-8); padding: 0 var(--space-4); border: 1px solid var(--secondary-border);
  border-radius: var(--radius-sm); font-size: var(--fs-14); font-weight: var(--fw-semibold);
  background: var(--secondary-bg); color: var(--secondary-text);
}
#backtesterTab .bt-btn-primary { background: var(--primary-bg); color: var(--primary-text); border-color: var(--primary-border); }
#backtesterTab .bt-btn-primary:hover:not(:disabled) { background: var(--primary-bg); border-color: var(--primary-hover-border); box-shadow: var(--primary-glow); }
#backtesterTab .bt-btn-secondary:hover:not(:disabled) { background: var(--secondary-hover-bg); color: var(--secondary-text); border-color: var(--secondary-hover-border); }
#backtesterTab .bt-btn-primary:focus-visible, #backtesterTab .bt-btn-secondary:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
#backtesterTab button:disabled { cursor: not-allowed; opacity: .5; }
#backtesterTab .bt-order-type { padding: 0; margin: 0 var(--space-4) 0 0; border: 0; }
#backtesterTab .bt-order-type legend { padding: 0; margin-bottom: var(--space-2); }
#backtesterTab .bt-order-options { display: flex; background: var(--input-bg); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: var(--space-1); }
#backtesterTab .bt-order-options label { position: relative; cursor: pointer; }
#backtesterTab .bt-order-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#backtesterTab .bt-order-options span { display: block; padding: var(--space-1) var(--space-3); color: var(--text-2); border-radius: var(--radius-sm); font-size: var(--fs-13); }
#backtesterTab .bt-order-options input:checked + span { background: var(--surface-3); color: var(--text-1); font-weight: var(--fw-semibold); }
#backtesterTab .bt-order-options input:focus-visible + span { outline: 2px solid var(--focus-color); outline-offset: 1px; }
#backtesterTab .bt-result { gap: var(--space-5); }
#backtesterTab .bt-layout { gap: var(--space-5); }
#backtesterTab .bt-chart-header { gap: var(--space-4); margin-bottom: var(--space-4); }
#backtesterTab .bt-chart-title { color: var(--text-1); font-size: var(--fs-15); font-weight: var(--fw-semibold); }
#backtesterTab .bt-chart-sub { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-relaxed); }
#backtesterTab .bt-chart-sub-days { color: var(--text-1); }
#backtesterTab .bt-leg-short, #backtesterTab .bt-event-leg.short { color: var(--text-danger); }
#backtesterTab .bt-leg-long, #backtesterTab .bt-event-leg.long { color: var(--text-success); }
#backtesterTab .bt-kpis { gap: var(--space-3); margin-bottom: var(--space-4); }
#backtesterTab .bt-kpi { padding: var(--space-3); background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-md); min-width: 0; }
#backtesterTab .bt-kpi-label { color: var(--text-2); font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); }
#backtesterTab .bt-kpi-value { margin-top: var(--space-2); font-size: var(--fs-24); letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold); }
#backtesterTab .bt-kpi-sub, #backtesterTab .bt-kpi-maker, #backtesterTab .bt-hint-sub { color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-relaxed); }
#backtesterTab .bt-kpi-breakeven { gap: var(--space-1); margin-top: var(--space-2); }
#backtesterTab .bt-kpi-breakeven-row { color: var(--text-2); gap: var(--space-2); font-size: var(--fs-12); }
#backtesterTab .bt-kpi-breakeven-value { color: var(--text-1); font-size: var(--fs-13); white-space: nowrap; }
#backtesterTab .bt-hint-tip { color: var(--text-2); font-size: var(--fs-12); }
#backtesterTab .rate-pos { color: var(--text-success); }
#backtesterTab .rate-neg { color: var(--text-danger); }
#backtesterTab .bt-chart { aspect-ratio: auto; }
#backtesterTab .bt-chart-tooltip { background: var(--surface-2); border-color: var(--border-2); color: var(--text-1); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: var(--space-3); }
#backtesterTab .bt-chart-tooltip .tt-time { color: var(--text-2); font-size: var(--fs-12); }
#backtesterTab .bt-chart-legend { color: var(--text-2); font-size: var(--fs-13); gap: var(--space-4); margin-top: var(--space-3); flex-wrap: wrap; }
#backtesterTab .bt-chart-empty, #backtesterTab .bt-events-empty { color: var(--text-2); }
#backtesterTab .bt-sidebar { gap: var(--space-4); }
#backtesterTab .bt-breakdown-row { color: var(--text-2); gap: var(--space-2); padding: var(--space-2) 0; font-size: var(--fs-13); }
#backtesterTab .bt-breakdown-row.total { border-color: var(--border-2); color: var(--text-1); padding-top: var(--space-3); margin-top: var(--space-2); }
#backtesterTab .bt-breakdown-bar { background: var(--surface-3); border-radius: var(--radius-pill); margin-top: var(--space-1); }
#backtesterTab .bt-events-list { gap: var(--space-1); }
#backtesterTab .bt-events-list--scrollable { scrollbar-color: var(--scrollbar-thumb) var(--surface-1); }
#backtesterTab .bt-event-row { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); gap: var(--space-2); }
#backtesterTab .bt-event-time, #backtesterTab .bt-event-rate { color: var(--text-2); font-size: var(--fs-12); }
#backtesterTab .bt-inline-warning { background: var(--warning-soft); color: var(--text-warning); border-color: var(--warning); border-radius: var(--radius-sm); padding: var(--space-3); font-size: var(--fs-13); }
@media (max-width: 1200px) { #backtesterTab .bt-config-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 750px) {
  #backtesterTab .bt-config-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #backtesterTab .bt-config-card, #backtesterTab .bt-chart-card, #backtesterTab .bt-side-card, #backtesterTab .bt-settlements { padding: var(--space-4); }
  #backtesterTab .bt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #backtesterTab .bt-config-actions { align-items: center; }
  #backtesterTab .bt-order-type { flex: 1 0 100%; margin: 0 0 var(--space-2); }
  #backtesterTab .bt-kpi-value { font-size: var(--fs-20); }
  #backtesterTab .bt-kpi-breakeven-row { flex-wrap: wrap; }
  #backtesterTab .bt-event-row { grid-template-columns: minmax(72px, 1fr) 44px 64px minmax(64px, 1fr); padding: var(--space-2); gap: var(--space-1); }
  #backtesterTab .bt-chart { min-height: 220px; }
}

/* Kompakte Konfiguration (22.09.2026): ohne eigene Überschrift, Felder 34 px
   statt 48 px, weniger Innenabstand — der Backtest steht damit ohne Scrollen
   im Bild. Eine einzige Zeile war zu eng: der Backtester hat eine Maximalbreite,
   und die Börsenfelder überlappten. */
#backtesterTab .backtester { gap: var(--space-4); }
#backtesterTab .bt-config-card { padding: var(--space-3) var(--space-4); }
#backtesterTab .bt-config-title { display: none; }
#backtesterTab .bt-config-grid { gap: var(--space-2) var(--space-3); }
#backtesterTab .bt-field { gap: var(--space-1); }
#backtesterTab .bt-field label,
#backtesterTab .bt-order-type legend { font-size: var(--fs-12); letter-spacing: var(--tracking-wide); }
#backtesterTab .bt-input,
#backtesterTab .bt-config-grid .catalog-trigger,
#backtesterTab .bt-config-grid .catalog-number,
#backtesterTab .bt-config-grid .catalog-date-trigger {
  height: 34px;
  min-height: 34px;
}
#backtesterTab .bt-config-actions { margin-top: var(--space-2); gap: var(--space-2); }
#backtesterTab .bt-btn-primary,
#backtesterTab .bt-btn-secondary { height: 34px; }
#backtesterTab .bt-order-options { height: 34px; box-sizing: border-box; }

/* Filterzeile ohne Überlappung (23.09.2026, „zeilen verschwimmen"). Die
   Feldspalte wuchs auf die volle Textbreite des Auslösers: `.bt-field` ist ein
   Grid mit auto-Spalte, und `.catalog-select` hatte die automatische
   Mindestbreite seines Inhalts. „SPOT-Bestand (bereits vorhanden)" ragte so
   bei 1440 px 55 px, bei 390 px 109 px ins Nachbarfeld. Jetzt hält jede
   Spalte ihre Rasterbreite, der Abstand kommt allein aus dem gap (12 px
   nebeneinander, 8 px zwischen Zeilen). Lange Texte enden mit „…", den
   vollen Text zeigt der title des Auslösers (catalogControls.js). */
#backtesterTab .bt-field { grid-template-columns: minmax(0, 1fr); }
#backtesterTab .bt-field > *,
#backtesterTab .bt-field .catalog-select { min-width: 0; }
/* Block statt inline-flex: nur so greift text-overflow — in einem
   Flex-Container steht der Text in einem anonymen Element ohne Ellipsis. */
#backtesterTab .bt-config-grid .catalog-trigger-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#backtesterTab .bt-config-grid .catalog-trigger-label .ex-icon { margin-right: var(--space-2); vertical-align: -3px; }
#backtesterTab .bt-config-grid .catalog-chevron { flex: 0 0 auto; }


/* Gespeicherter Stand beim Nachrechnen: abgedimmt statt Hinweiskasten. */
#backtesterTab .bt-result.is-refreshing { opacity: 0.55; transition: opacity var(--t-base); pointer-events: none; }
/* „Ausführung" nur für Screenreader: Market/Limit spricht für sich. */
#backtesterTab .bt-order-type legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopfsortierung „Letzte Settlements" (23.09.2026): der Kopf steht im selben
   Raster wie die Zeilen und klebt beim Scrollen der Liste oben. Der Pfeil
   hält Platz für zwei Zeichen (+↓/−↓), damit nichts springt. */
#backtesterTab .bt-event-kopf {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-1);
  border-radius: 0;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}
#backtesterTab .bt-kopf-zelle { display: flex; min-width: 0; }
#backtesterTab .bt-kopf-mitte { justify-self: center; }
#backtesterTab .bt-kopf-ende { justify-self: end; }
#backtesterTab .bt-sort-head {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0 2px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
#backtesterTab .bt-sort-head:hover,
#backtesterTab .bt-sort-head.active { color: var(--text-1); }
#backtesterTab .bt-sort-head:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 1px; }
#backtesterTab .bt-sortpfeil { display: inline-block; min-width: 1.4em; text-align: left; }
@media (max-width: 750px) {
  #backtesterTab .bt-sort-head { letter-spacing: 0; padding: 0; }
  #backtesterTab .bt-sortpfeil { min-width: 1.1em; }
}