/* =============================================================
   betting-sheet.css – Interactive Betting Sheet Erweiterungen
   WHY: Neue Klassen für Markt-Switcher, Confidence-Bar und
   Live-Kombi-Ticker. Nutzt ausschließlich bestehende Tokens
   aus variables.css — KEINE neuen Farb-Variablen nötig.
   ============================================================= */

/* ─── 1. MARKT-SWITCHER ──────────────────────────────────── */
/* Einsatz: innerhalb jeder .match-card unter den Team-Namen  */

.mkt-switcher {
  display: flex;
  gap: 3px;
  background: var(--color-surface-3);
  border-radius: var(--radius-sm);
  padding: 3px;
  margin-top: var(--space-3);
}

.mkt-btn {
  flex: 1;
  padding: 5px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.mkt-btn:hover:not(.mkt-btn--active) {
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

/* WHY: --active statt :active damit JS die Klasse setzt,
   nicht der Browser. Verhindert Flicker beim Tab-Switch. */
.mkt-btn--active {
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Markt-Panel: das angezeigte Pick-Grid */
.mkt-panel { display: none; }
.mkt-panel--visible { display: grid; }
.mkt-panel--flex { display: flex; }

/* Pick-Buttons (1X2, O/U, BTTS) */
.mkt-picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: var(--space-3) 0;
}

.mkt-picks--two { grid-template-columns: repeat(2, 1fr); }

.mkt-pick {
  padding: 8px 6px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.mkt-pick:hover { border-color: var(--color-border-hover); }

.mkt-pick--selected {
  border-color: var(--color-accent);
  background: var(--color-accent-glow);
}

.mkt-pick__label {
  font-size: 0.58rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mkt-pick__value {
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin: 2px 0;
}

.mkt-pick--selected .mkt-pick__value { color: var(--color-accent); }

.mkt-pick__pct {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--color-text-muted);
}

.mkt-pick--selected .mkt-pick__pct {
  color: var(--color-accent);
  opacity: 0.7;
}

/* HT/FT 3x3 Grid (eigene Klassen wegen anderem Layout) */
.htft-picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: var(--space-3) 0;
}

.htft-pick {
  padding: 5px 4px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.htft-pick:hover { border-color: var(--color-border-hover); }

/* WHY: HT/FT nutzt --accent-3 (Blau) statt Grün —
   visuell unterscheidbar von Standard-1X2-Picks. */
.htft-pick--selected {
  border-color: var(--color-accent-3);
  background: rgba(64, 196, 255, 0.08);
}

.htft-pick__label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--color-text-muted);
}

.htft-pick__prob {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.htft-pick--selected .htft-pick__prob { color: var(--color-accent-3); }

.htft-pick__odds {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--color-text-muted);
}

/* ─── 2. KI-CONFIDENCE-BAR ──────────────────────────────── */
/* Zeigt wie einig sich Poisson, LLaMA und Claude sind.
   Drei überlappende Schichten = Konsens-Visualisierung.   */

.conf-bar {
  margin-top: var(--space-2);
}

.conf-bar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.conf-bar__title {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* WHY: 3 Schichten übereinander statt 3 Segmente nebeneinander.
   Konsens = alle 3 Balken enden an derselben Stelle.
   Divergenz = Balken enden unterschiedlich weit. */
.conf-bar__track {
  position: relative;
  height: 6px;
  background: var(--color-surface-3);
  border-radius: 3px;
  overflow: hidden;
}

.conf-bar__segment {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Poisson = Grün (Primär, höchste Deckkraft) */
.conf-bar__segment--poisson {
  background: var(--color-accent);
  opacity: 0.9;
  z-index: 3;
}

/* LLaMA = Blau (zweite Schicht) */
.conf-bar__segment--groq {
  background: var(--color-accent-3);
  opacity: 0.5;
  z-index: 2;
}

/* Claude = Gold (unterste Schicht, breiteste Fläche) */
.conf-bar__segment--claude {
  background: var(--color-accent-2);
  opacity: 0.35;
  z-index: 1;
}

/* Trennstrich zeigt den Median/Mittelwert */
.conf-bar__median {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 10px;
  background: var(--color-surface);
  border-radius: 1px;
  z-index: 4;
}

.conf-bar__legend {
  display: flex;
  gap: 10px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.conf-bar__model {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--color-text-muted);
}

.conf-bar__model::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 2px;
  flex-shrink: 0;
}

.conf-bar__model--poisson::before { background: var(--color-accent); }
.conf-bar__model--groq::before    { background: var(--color-accent-3); }
.conf-bar__model--claude::before  { background: var(--color-accent-2); }

/* Konsens-Badge: zeigt Übereinstimmungsgrad */
.conf-consensus {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  padding: 2px 7px;
  border-radius: 10px;
}

.conf-consensus--high {
  background: rgba(0, 230, 118, 0.1);
  color: var(--color-win);
  border: 1px solid rgba(0, 230, 118, 0.2);
}

.conf-consensus--medium {
  background: rgba(255, 215, 64, 0.1);
  color: var(--color-accent-2);
  border: 1px solid rgba(255, 215, 64, 0.2);
}

/* WHY: --split signalisiert: KI-Modelle uneinig →
   Vorsicht beim Bet! Rot = Warnung, nicht Fehler. */
.conf-consensus--split {
  background: rgba(255, 82, 82, 0.1);
  color: var(--color-lose);
  border: 1px solid rgba(255, 82, 82, 0.2);
}

/* ─── 3. LIVE KOMBI TICKER ───────────────────────────────── */
/* Betslip-Panel Erweiterung: Quote ändert sich in Echtzeit   */

.kombi-ticker {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--space-3);
}

.kombi-ticker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.kombi-ticker__title {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.kombi-ticker__odds-wrap {
  text-align: right;
}

.kombi-ticker__odds-label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.kombi-ticker__odds-row {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

/* WHY: Große Zahl + Animations-Klassen als separate Concerns.
   JS fügt .is-up/.is-down/.is-neutral hinzu → CSS reagiert. */
.kombi-ticker__odds {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

.kombi-ticker__odds.is-up    { color: var(--color-win); }
.kombi-ticker__odds.is-down  { color: var(--color-lose); }

.kombi-ticker__delta {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 3px;
  transition: all var(--transition-fast);
}

.kombi-ticker__delta.is-up {
  background: rgba(0, 230, 118, 0.12);
  color: var(--color-win);
}

.kombi-ticker__delta.is-down {
  background: rgba(255, 82, 82, 0.12);
  color: var(--color-lose);
}

/* Leg-Liste */
.kombi-ticker__legs {
  list-style: none;
  padding: 0 var(--space-3) var(--space-2);
}

.kombi-ticker__leg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--color-border);
  animation: legSlideIn 0.25s ease forwards;
}

.kombi-ticker__leg:last-child { border-bottom: none; }

.kombi-ticker__leg-name {
  font-size: 0.65rem;
  color: var(--color-text-secondary);
}

.kombi-ticker__leg-pick {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-accent);
}

/* WHY: HT/FT-Legs in Blau um sie sofort von 1X2-Picks
   zu unterscheiden. Visuell andere Kategorie. */
.kombi-ticker__leg--htft .kombi-ticker__leg-pick {
  color: var(--color-accent-3);
}

.kombi-ticker__leg--htft .kombi-ticker__leg-odds {
  color: var(--color-accent-3);
}

.kombi-ticker__leg-odds {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.kombi-ticker__leg-pct {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  color: var(--color-text-muted);
  text-align: right;
}

/* Add-Button */
.kombi-ticker__add {
  width: 100%;
  padding: 7px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  transition: all var(--transition-fast);
}

.kombi-ticker__add:hover {
  background: rgba(0, 230, 118, 0.08);
  color: var(--color-accent);
  border-color: rgba(0, 230, 118, 0.2);
}

/* Footer: EV + Kelly */
.kombi-ticker__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: rgba(0, 230, 118, 0.04);
  border-top: 1px solid rgba(0, 230, 118, 0.1);
}

.kombi-ticker__ev,
.kombi-ticker__kelly {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-muted);
}

.kombi-ticker__ev-val { font-weight: 700; }
.kombi-ticker__ev-val--positive { color: var(--color-win); }
.kombi-ticker__ev-val--negative { color: var(--color-lose); }

/* ─── 4. ANIMATIONS ──────────────────────────────────────── */

@keyframes legSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* WHY: oddsFlash zeigt dem Nutzer dass die Quote sich
   gerade geändert hat. Kurz, nicht ablenkend (0.3s). */
@keyframes oddsFlash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.kombi-ticker__odds--flash {
  animation: oddsFlash 0.3s ease;
}

/* ─── 5. JS-HOOKS (data-Attribute Konventionen) ──────────── */
/*
  [data-market="1x2|ou|btts|htft"] → auf .mkt-panel Elementen
  [data-pick-odds]                  → auf .mkt-pick Elementen
  [data-pick-pct]                   → auf .mkt-pick Elementen
  [data-leg-id]                     → auf .kombi-ticker__leg Elementen

  Beispiel HTML-Struktur:
  <div class="mkt-panel mkt-panel--visible" data-market="1x2">
    <div class="mkt-picks">
      <button class="mkt-pick mkt-pick--selected"
              data-pick-odds="1.65"
              data-pick-pct="62"
              data-pick-label="Heimsieg">
        ...
      </button>
    </div>
  </div>
*/