/* =============================================================
   review-improvements.css — Phase 4 UX-Verbesserungen
   WHY: Neue Komponenten aus dem Review: Mobile, Progress,
   Error Boundary, Confidence-Viz, Grading, Drill-Down, Historie.
   Dieser File enthält NUR die neuen Styles — bestehendes bleibt
   unverändert damit keine Regression entsteht.
   ============================================================= */

/* ─── Progress Indicator während Pipeline ──────────────────── */
.tm-progress{
  position:fixed;top:82px;left:0;right:0;z-index:999;
  height:3px;background:transparent;overflow:hidden;
  pointer-events:none;
}
.tm-progress__bar{
  height:100%;width:30%;
  background:linear-gradient(90deg,transparent,var(--a),transparent);
  animation:tmProgressSlide 1.4s ease-in-out infinite;
}
@keyframes tmProgressSlide{
  0%  { transform:translateX(-100%) }
  100%{ transform:translateX(400%) }
}
.tm-progress__label{
  position:fixed;top:88px;left:50%;transform:translateX(-50%);
  background:rgba(15,20,25,.92);backdrop-filter:blur(8px);
  border:1px solid var(--b1);border-radius:20px;
  padding:5px 14px;font-size:.7rem;color:var(--t2);
  font-family:var(--fm);z-index:999;
  animation:fadeInDown .3s ease both;
}
@keyframes fadeInDown{
  from{opacity:0;transform:translate(-50%,-8px)}
  to  {opacity:1;transform:translate(-50%,0)}
}

/* ─── Error Boundary Fallback ─────────────────────────────── */
.tm-error-boundary{
  background:rgba(255,82,82,.06);
  border:1px solid rgba(255,82,82,.25);
  border-radius:10px;padding:14px 16px;margin:8px 0;
  display:flex;flex-direction:column;gap:8px;
}
.tm-error-boundary__title{
  font-size:.72rem;font-weight:700;color:var(--lose);
  text-transform:uppercase;letter-spacing:.1em;
}
.tm-error-boundary__msg{
  font-size:.75rem;color:var(--t2);line-height:1.5;
  font-family:var(--fm);
}
.tm-error-boundary__retry{
  align-self:flex-start;padding:6px 14px;font-size:.7rem;
  background:var(--s3);border:1px solid var(--b2);border-radius:6px;
  color:var(--t1);cursor:pointer;
}
.tm-error-boundary__retry:hover{border-color:var(--a);color:var(--a)}

/* ─── Confidence Sparkline ────────────────────────────────── */
.tm-agent-bars{
  display:flex;align-items:flex-end;gap:3px;height:22px;
  padding:2px 0;
}
.tm-agent-bar{
  flex:1;min-width:6px;background:var(--s3);border-radius:2px 2px 0 0;
  position:relative;transition:height .3s ease;
}
.tm-agent-bar__fill{
  position:absolute;bottom:0;left:0;right:0;border-radius:2px 2px 0 0;
}
.tm-agent-bar--poisson .tm-agent-bar__fill{background:#00e676}
.tm-agent-bar--groq    .tm-agent-bar__fill{background:#40c4ff}
.tm-agent-bar--grok    .tm-agent-bar__fill{background:#ffd740}
.tm-agent-bar--claude  .tm-agent-bar__fill{background:#b388ff}
.tm-agent-bar--perso   .tm-agent-bar__fill{background:#ff80ab}

/* ─── Recommendation Grading (statt bool) ───────────────── */
.tm-grade{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.62rem;font-weight:700;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;letter-spacing:.08em;
}
.tm-grade--strong{background:rgba(0,230,118,.14);color:#00e676;border:1px solid rgba(0,230,118,.35)}
.tm-grade--ok    {background:rgba(255,215,64,.12);color:#ffd740;border:1px solid rgba(255,215,64,.35)}
.tm-grade--weak  {background:rgba(255,128,64,.12);color:#ff8040;border:1px solid rgba(255,128,64,.35)}
.tm-grade--avoid {background:rgba(255,82,82,.12); color:#ff5252;border:1px solid rgba(255,82,82,.35)}

/* ─── Why-Pick Drill-Down ─────────────────────────────────── */
.tm-drilldown{
  background:var(--s2);border:1px solid var(--b1);border-radius:8px;
  padding:10px 12px;margin-top:8px;font-size:.72rem;
}
.tm-drilldown__title{
  font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--t3);font-weight:700;margin-bottom:6px;
}
.tm-drilldown__row{
  display:flex;align-items:center;justify-content:space-between;
  padding:3px 0;border-bottom:1px dashed var(--b1);
}
.tm-drilldown__row:last-child{border-bottom:none}
.tm-drilldown__agent{color:var(--t2);font-family:var(--fm);font-size:.66rem}
.tm-drilldown__pick{color:var(--t1);font-weight:600;font-size:.68rem}
.tm-drilldown__conf{color:var(--a);font-family:var(--fm);font-size:.68rem}

/* ─── Kombi-Historie (7 Tage) — lesbarer ──────────────────── */
.tm-history__row{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;
  align-items:center;padding:8px 0;
  border-bottom:1px dashed var(--b1);font-size:.8rem;
}
.tm-history__row:last-child{border-bottom:none}
.tm-history__date{font-family:var(--fm);color:var(--t2);font-size:.76rem;font-weight:500}
.tm-history__legs{color:var(--t1);font-size:.8rem;font-weight:500}
.tm-history__result{font-weight:700;font-family:var(--fm);font-size:.82rem}
.tm-history__result--won {color:#00e676}
.tm-history__result--lost{color:#ff5252}
.tm-history__result--open{color:#ffd740}

/* Bankroll-System entfernt auf User-Wunsch */

/* ─── Re-Analyse Button auf Match-Card ────────────────── */
.tm-reanalyze{
  position:absolute;top:8px;right:8px;
  background:var(--s3);border:1px solid var(--b1);border-radius:50%;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  color:var(--t3);font-size:.7rem;cursor:pointer;z-index:2;
  transition:all .2s;
}
.tm-reanalyze:hover{border-color:var(--a);color:var(--a);transform:rotate(120deg)}

/* ─── Mobile Responsiveness Boost ────────────────────────── */
@media(max-width:600px){
  /* Terminal soll auf Mobile nicht die ganze Höhe verschlingen */
  #agent-terminal{ height:120px !important }
  .match-card__time{ font-size:.7rem }
  .match-card__team-name{ font-size:.78rem }
  /* Touch-Targets mindestens 44px (Apple HIG / WCAG) */
  .bkey,.db_,.filter-arr,.tb{ min-height:36px }
  /* Modal nicht unter der Taskbar verschwinden */
  .mod{ align-items:flex-start;padding-top:10vh }
  /* Drill-Down kompakter */
  .tm-drilldown{ padding:8px 10px }
  .tm-history__row{ grid-template-columns:auto 1fr auto }
}

/* Small tablets */
@media(max-width:900px) and (min-width:601px){
  .cg{ grid-template-columns:1fr }
  .aside{ display:block;margin-top:16px }
  #agent-terminal{ height:140px !important }
}

/* A11y: Focus-States sichtbar */
button:focus-visible,
[data-action]:focus-visible,
[data-fixture-id]:focus-visible,
input:focus-visible{
  outline:2px solid var(--a);outline-offset:2px;border-radius:4px;
}
/* Reduce Motion Support */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}