/* Funding Backtester: catalogue Foundation, scoped to this approved tab. */
#backtesterTab { color: var(--text-1); font-family: var(--font-sans); }
/* Full width (27.10.2026, user: „funding backtester darf ruhig die seite nutzen also breiter werden“): no 1500 px cap from
   style.css; the sidebar keeps its 320 px, only the chart column grows (.bt-layout). */
#backtesterTab .backtester { gap: var(--space-5); max-width: none; }
#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)); }
  /* Narrow KPI cards: a long break-even value ("1 044,69 Tage") moves under
     its label instead of running into the next card (responsive pass 25.10.2026). */
  #backtesterTab .bt-kpi-breakeven-row { flex-wrap: wrap; }
}
/* Tablet: four KPI cards of ~165 px are too narrow at 768 px; two per row
   (responsive pass 25.10.2026). */
@media (max-width: 960px) { #backtesterTab .bt-kpis { grid-template-columns: repeat(2, 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; }
}