/* Nur was es sonst nirgends gibt: die Balkenreihe „Trade-Verlauf". Jeder Balken ist ein
   Trade in zeitlicher Folge — so sieht man Serien, die eine Tabelle nie zeigt.

   Die Reihe zeigt ALLE Trades des Zeitraums und wird geschoben (Vorgabe Dirk,
   10.08.2026). Vorher standen 24 Balken fest im HTML, während daneben „75 Trades" stand —
   die Reihe zeigte also ein Drittel und behauptete das Ganze. */
/* `min-width: 0` ist hier PFLICHT, nicht Kosmetik: Ein Gitter-/Flex-Element steht auf
   `min-width: auto` und wächst lieber, als seinen Inhalt schrumpfen zu lassen. Ohne diese
   zwei Zeilen scrollt die Leiste nicht, sondern zieht die ganze Karte auf — gemessen bei
   1.885 Trades: 26.387 px breit statt 935, und die Seite lief seitlich über.
   Dieselbe Falle wie beim klebenden Kopf (siehe journal.css). */
.card.verlauf { display: flex; flex-direction: column; min-width: 0; }

.tv-leiste {
  min-width: 0;
  overflow-x: auto; overflow-y: hidden; cursor: grab;
  /* Der Zeiger wandert waagerecht — das Blatt darf dabei nicht mitrutschen. */
  overscroll-behavior-x: contain;

  /* KEIN Scrollbalken (Vorgabe Dirk, 10.08.2026). Dass es weitergeht, sagen die
     ANGESCHNITTENEN Balken an den Rändern — „das muss reichen". Ein Balken quer unter der
     Reihe nimmt Höhe weg, die den Balken fehlt, und zeigt dieselbe Auskunft ein zweites
     Mal. Geschoben wird mit der Maus; das Rad und ein Trackpad wirken weiter. */
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* alte Edge */
}
.tv-leiste::-webkit-scrollbar { width: 0; height: 0; }   /* Chrome, Edge, Safari */
.tv-leiste.zieht { cursor: grabbing; }
.tv-leiste.zieht .tv-balken { pointer-events: none; }   /* beim Schieben nichts anfassen */

.tradebars { display: flex; align-items: flex-end; gap: 3px; height: 88px; margin: 4px 0 10px; }
/* `1 0 11px` = wachsen ja, schrumpfen NEIN.
   Bei elf Trades verteilen sich die Balken über die Breite, statt links zu kleben; bei
   1.885 bleibt jeder 11 px breit und die Reihe wird geschoben. Mit erlaubtem Schrumpfen
   (`flex: 1 1`) würden aus vielen Trades Haarstriche und die Reihe scrollte nie.
   Die Obergrenze verhindert, dass drei Trades zu drei Bohlen werden. */
.tv-balken {
  flex: 1 0 11px; max-width: 26px;
  min-height: 3px; border-radius: 2px 2px 0 0;
  opacity: .85; display: block;
}
.tv-balken.win  { background: var(--green); }
.tv-balken.loss { background: var(--red); }
.tv-balken:hover { opacity: 1; }

/* Zwei Stufen der Hervorhebung, und sie bedeuten Verschiedenes:
   `:hover` = genau dieser Trade, `tag-an` = alle Trades DESSELBEN Tages — auch dann, wenn
   der Zeiger drüben in der Kurve steht. Deshalb ein Rahmen statt nur mehr Deckkraft: Man
   soll die Gruppe auch dann sehen, wenn die Maus ganz woanders ist. */
.tv-balken.tag-an {
  opacity: 1;
  box-shadow: 0 0 0 1.5px var(--accent), 0 0 10px rgba(124,108,245,.45);
}

.tv-leer { color: var(--dim); font-size: 12.5px; align-self: center; margin: auto; }

/* Kennzahlen unter der Reihe. Zwei Spalten, damit die Beschriftungen ganz dastehen —
   bei drei brachen „Grösster Gewinn / Verlust" und „Ø Gewinn / Verlust" um. */
.tv-zahlen {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-2);
}
.tv-zahlen .t {
  color: var(--dim); font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-zahlen .v { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 1px; }

.rev { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 5px; font-size: 11px; }
.rev.ja   { background: var(--green-dim); color: var(--green); }
.rev.nein { background: rgba(255,255,255,.05); color: var(--dim); }