/* HorseAI Components — tab buttons, active state, page fade transition. */

/* ---------------------------------------------------------------------------
   Tab button — shared base (bottom nav + side nav)
   ------------------------------------------------------------------------- */

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px 8px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
  font-family: inherit;
  line-height: 1;
  transition: color 100ms ease;
  -webkit-tap-highlight-color: transparent;
}

.tab-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Active state */
.tab-btn.active {
  color: var(--green);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Side nav specifics — icon-only buttons (labels hidden)
   ------------------------------------------------------------------------- */

/* Logo tile at top of side nav */
.side-nav__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 48px;
  font-size: 18px;
  font-weight: 500;
  color: var(--green);
  flex-shrink: 0;
}

/* Side nav tab buttons override the shared .tab-btn base */
#side-nav .tab-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
  font-size: 0;            /* hide label text */
  gap: 0;
  margin-bottom: 4px;
}

#side-nav .tab-btn.active {
  background: var(--green-light);
}

/* ---------------------------------------------------------------------------
   Page fade transition
   See router.js — adds/removes .entering class on the active view
   ------------------------------------------------------------------------- */

@keyframes view-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.view.active {
  animation: view-fade-in 150ms ease forwards;
}

/* ---------------------------------------------------------------------------
   Loading / placeholder text
   ------------------------------------------------------------------------- */

.placeholder-text {
  color: var(--text-muted);
  font-size: 15px;
  padding: 24px 0;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Race count badge (POC today view)
   ------------------------------------------------------------------------- */

.race-count {
  display: inline-block;
  background: var(--green-light);
  color: var(--green-dark);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
  margin-top: 12px;
}

/* ---------------------------------------------------------------------------
   Quinte Card
   ------------------------------------------------------------------------- */

.quinte-card {
  background: var(--bg-surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}

.quinte-card__header {
  margin-bottom: 16px;
}

.quinte-card__badge {
  display: inline-block;
  background: var(--purple-light);
  color: var(--purple-dark);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.quinte-card__title {
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}

.quinte-card__meta {
  font-size: 13px;
  color: var(--text-muted);
}

.quinte-card__sep {
  margin: 0 4px;
  color: var(--text-hint);
}

/* Model prediction block */
.quinte-card__model {
  margin-bottom: 12px;
}

.quinte-card__model-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-hint);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}

.quinte-card__horses {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quinte-card__horse {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--border);
  font-size: 14px;
}

.quinte-card__horse:last-child {
  border-bottom: none;
}

.quinte-card__horse-rank {
  width: 20px;
  text-align: center;
  font-weight: 500;
  color: var(--text-hint);
  font-size: 12px;
}

.quinte-card__horse-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  flex-shrink: 0;
}

.quinte-card__horse-name {
  flex: 1;
  color: var(--text);
  font-weight: 400;
}

.quinte-card__horse-score {
  font-size: 13px;
  font-weight: 500;
  color: var(--green);
}

/* Bet recommendations */
.quinte-card__bets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}

.quinte-card__bet-badge {
  display: inline-block;
  background: var(--amber-light);
  color: var(--amber);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
}

/* Confidence bar */
.quinte-card__confidence {
  margin-top: 12px;
}

.quinte-card__conf-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.quinte-card__conf-track {
  height: 6px;
  background: var(--bg-deep);
  border-radius: 3px;
  overflow: hidden;
}

.quinte-card__conf-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  transition: width 300ms ease;
}

/* ---------------------------------------------------------------------------
   Today view — page header
   ------------------------------------------------------------------------- */

.today-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.today-header__left {
  flex: 1;
  min-width: 0;
}

.today-header__date {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 2px;
  text-transform: capitalize;
}

.today-header__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.today-header__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.today-header__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   KPI strip
   ------------------------------------------------------------------------- */

.kpi-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 20px;
  padding-bottom: 2px;
}

.kpi-strip::-webkit-scrollbar {
  display: none;
}

.today-roi {
  margin-bottom: 24px;
}

.kpi-card {
  flex: 0 0 auto;
  min-width: 130px;
  background: var(--bg-surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

/* Tablet+: 4 cards fill the row without scrolling */
@media (min-width: 640px) {
  .kpi-strip {
    overflow-x: visible;
  }

  .kpi-card {
    flex: 1 1 0;
    min-width: 0;
  }
}

.kpi-card__label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
  white-space: nowrap;
}

.kpi-card__value {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}

.kpi-card__sub {
  font-size: 11px;
  color: var(--text-hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Section label (reusable)
   ------------------------------------------------------------------------- */

.section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------------------
   New Quinte card — replaces old .quinte-card styles for full spec
   ------------------------------------------------------------------------- */

.qcard {
  background: var(--bg-quinte);
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--color-quinte);
  border-radius: var(--radius-md);
  /* No padding here — padding lives on .qcard__front */
  margin-bottom: 20px;
  overflow: hidden;
  /* perspective lives on the flipper transform, not here */
}

.qcard__front {
  padding: 14px;
}

.qcard__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.qcard__race-id {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-quinte);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qcard__header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.qcard__countdown {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}


.qcard__sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* Mini KPI row inside Quinte card */
.qcard__kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 14px;
}

.qcard__kpi-cell {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 4px;
  text-align: center;
}

.qcard__kpi-cell-label {
  font-size: 9px;
  color: var(--text-hint);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.qcard__kpi-cell-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Model predictions grid inside Quinte card */
.qcard__models-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

@media (max-width: 359px) {
  .qcard__models-grid {
    grid-template-columns: 1fr;
  }
}

.qcard__model-block {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
}

.qcard__model-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.qcard__model-empty {
  font-size: 11px;
  color: var(--text-hint);
  font-style: italic;
  padding: 4px 0;
}

.qcard__model-sub {
  font-size: 10px;
  color: var(--text-hint);
  margin-top: 5px;
}

/* Pill selector for Quinte card */
.qcard__pill-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.qcard__pill {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text-hint);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.qcard__pill--active {
  background: var(--color-quinte);
  color: var(--bg);
  border-color: var(--color-quinte);
}

.qcard__pill-panel {
  padding: 4px 0;
}

.qcard__pill-panel--hidden {
  display: none;
}

.qcard__pill-model {
  padding: 4px 0;
}

/* Horse number badge row */
.horse-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.horse-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.horse-badge--filled {
  background: var(--color-quinte);
  color: var(--bg);
}

.horse-badge--outline {
  background: var(--bg);
  border: 0.5px solid var(--border-strong);
  color: var(--text);
}

.horse-badge--filled-green {
  background: var(--color-general);
  color: var(--bg);
}

.horse-badge--orange {
  background: #e07a00;
  color: var(--bg);
}

.badge-sep {
  width: 1px;
  height: 18px;
  background: var(--border-strong);
  margin: 0 3px;
  align-self: center;
  flex-shrink: 0;
}

.horse-badge--result {
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  opacity: 0.75;
}

/* Quinte result -- 1st place */
.horse-badge--gold {
  background: #b8860b;   /* dark gold */
  color: #fff;
  font-weight: 700;
}

/* Quinte result -- positions 2-5 */
.horse-badge--quintet {
  background: var(--accent, #4a90d9);
  color: #fff;
  font-weight: 600;
  opacity: 0.9;
}

/* Hit indicator: predicted horse landed in actual top-5 */
.horse-badge--hit::after {
  content: '\2713';
  font-size: 8px;
  vertical-align: super;
  margin-left: 1px;
  opacity: 0.85;
}

/* Actual result row — race card */
.race-card__result-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.race-card__result-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Actual result row — quinte card */
.qcard__result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.qcard__result-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.horse-badge--plain {
  background: var(--bg-surface);
  border: 0.5px solid var(--border);
  color: var(--text-muted);
}

/* DAI risk — hard skip (Haies, Steeple-chase, Cross-country): greyed out */
.horse-badge--dai-skip {
  opacity: 0.35;
}

/* DAI risk — warning (Attelé, Monté): amber border ring */
.horse-badge--dai-warn {
  box-shadow: 0 0 0 2px #e07a00;
}

/* Tipster section inside Quinte card */
/* Container for the tipster list */
.qcard__tipster-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Force 2 columns */
  gap: 12px;                             /* Space between columns and rows */
  margin-top: 8px;
}

/* Individual Tipster Row styling adjustments */
.qcard__tipster-row {
  display: flex;
  flex-direction: column;   /* Stack Name over Badges for better fit in narrow columns */
  gap: 4px;
  padding: 8px;
  background: var(--bg-subtle, rgba(0,0,0,0.02));
  border-radius: var(--radius-sm);
  border: 0.5px solid var(--border-subtle);
}

.qcard__tipster-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 400px) {
  .qcard__tipster-list {
    grid-template-columns: 1fr;
  }
}
.qcard__tipster-row:last-child {
  border-bottom: none;
}

.qcard__tipster-name a {
  color: var(--text-muted);
  text-decoration: none;
}

.qcard__tipster-name a:hover {
  text-decoration: underline;
}

.qcard__tipster-conf {
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.7;
}

.qcard__tipster-loading,
.qcard__tipster-empty {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 0;
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Consensus section
   ------------------------------------------------------------------------- */

.qcard__consensus-legend {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Compact per-horse breakdown table */
.qcard__consensus-table {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.qcard__consensus-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.qcard__consensus-rank {
  font-weight: 600;
  min-width: 28px;
  color: var(--text-primary);
}

.qcard__consensus-dots {
  display: flex;
  gap: 3px;
  flex: 1;
}

/* dot = one source; filled = that source picked this horse */
.qcard__consensus-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-subtle, #ccc);
}

.qcard__consensus-dot--on {
  background: var(--accent, #E64833);
}

.qcard__consensus-count {
  font-size: 10px;
  color: var(--text-muted);
  min-width: 28px;
  text-align: right;
}

/* ---------------------------------------------------------------------------
   Race card (standard — "TOUTES LES COURSES" reunion sliders)
   ------------------------------------------------------------------------- */

/* .race-grid kept for potential direct use elsewhere but no longer rendered
   by the today view — sliders replace it on all breakpoints. */
.race-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 480px) {
  .race-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

@media (min-width: 1024px) {
  .race-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
  }
}

/* Reunion group — wraps label + slider for one hippodrome */
.reunion-group {
  margin-bottom: 20px;
}

/* Reunion label — same visual weight as .section-label */
.reunion-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Horizontal slider row */
.race-slider {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 4px 0 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.race-slider::-webkit-scrollbar {
  display: none;
}

/* Each card wrapper inside the slider */
.race-slider__item {
  flex: 0 0 min(280px, 80vw);
  scroll-snap-align: start;
}

.race-card {
  background: var(--bg-surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  /* No padding here — padding lives on .race-card__front / .race-card__back */
  box-sizing: border-box;
  width: 100%;      /* fills the .race-slider__item wrapper */
  overflow: hidden; /* prevent child content from blowing out the card */
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* perspective lives on the flipper transform, not here — avoids
     overflow:hidden + perspective creating a fixed background layer */
}

.race-card__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 3px;
}

.race-card__id {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Allow wrapping inside fixed-width slider cells */
  white-space: normal;
  word-break: break-word;
}

.race-card__sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Countdown badge on standard race card — top-right, next to status badge */
.race-card__countdown {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  margin-left: 2px;
}

/* Force-predict: pulsing outline while the API call is in flight */
.race-card--predicting {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  opacity: 0.7;
  pointer-events: none;
}

/* Frozen lock badge — inline in header row */
.race-card__frozen-badge {
  font-size: 12px;
  margin-left: 4px;
  opacity: 0.85;
  cursor: default;
}

/* ⋯ menu button — opens the flip back panel */
.race-card__menu-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: color 0.15s;
}
.race-card__menu-btn:hover { color: var(--text-primary); }

/* ---------------------------------------------------------------------------
   Flip card structure
   ------------------------------------------------------------------------- */

.race-card__flipper {
  display: grid;               /* both faces occupy the same grid cell */
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: perspective(900px) rotateY(0deg);
}

.race-card--flipped .race-card__flipper {
  transform: perspective(900px) rotateY(180deg);
}

.race-card__front,
.race-card__back {
  grid-area: 1 / 1;            /* stack faces on top of each other */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.race-card__front {
  padding: 12px;
}

.race-card__back {
  transform: rotateY(180deg);
  background: var(--bg-surface);
  border-radius: inherit;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* background matches card surface so extra height from front face is invisible */
}

/* Back panel header: ← button + race label */
.race-card__back-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.race-card__back-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px 0 0;
  transition: color 0.15s;
}
.race-card__back-close:hover { color: var(--text); }

.race-card__back-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Action list */
.race-card__back-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.race-card__action-btn {
  width: 100%;
  padding: 9px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.race-card__action-btn:hover {
  background: var(--bg-deep);
}
.race-card__action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.race-card__action-btn--freeze {
  border-color: var(--amber);
  color: var(--amber);
}
.race-card__action-btn--freeze:hover { background: var(--amber-light); }

.race-card__action-btn--unfreeze {
  border-color: var(--green);
  color: var(--green);
}
.race-card__action-btn--unfreeze:hover { background: var(--green-light); }

.race-card__back-info {
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 0;
}

/* Muted "--:--" placeholder when heure is unknown */
.race-card__sub-time--unknown {
  color: var(--text-hint);
}

/* ---------------------------------------------------------------------------
   Timeline separators — "A venir" / "Passees" dividers in today view
   ------------------------------------------------------------------------- */

.timeline-separator {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 4px 0 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.timeline-separator--upcoming {
  color: var(--green-dark, var(--green));
}

.timeline-separator--past {
  color: var(--text-hint);
  margin-top: 12px;
}

/* Refreshing state — spinning indicator while card data is being fetched */
@keyframes card-refresh-spin {
  to { transform: rotate(360deg); }
}

.is-refreshing {
  pointer-events: none;
}

.refresh-spinner {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(128, 128, 128, 0.25);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: card-refresh-spin 0.6s linear infinite;
  z-index: 10;
  pointer-events: none;
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.status-badge--predicted {
  background: var(--green-light);
  color: var(--green-dark);
}

.status-badge--pending {
  background: var(--bg-deep);
  color: var(--text-muted);
}

.status-badge--no-data {
  background: var(--red-light);
  color: var(--red);
}

/* stacked model layout within race card */
.race-card__models {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.race-card__model-col-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-hint);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
}

.race-card__model-placeholder {
  font-size: 11px;
  color: var(--text-hint);
  font-style: italic;
}

/* Confidence bar */
.conf-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.conf-bar-track {
  flex: 1;
  height: 5px;
  background: var(--bg-deep);
  border-radius: 3px;
  overflow: hidden;
}

.conf-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 300ms ease;
}

.conf-bar-fill--green {
  background: var(--green);
}

.conf-bar-fill--amber {
  background: var(--amber);
}

.conf-bar-fill--red {
  background: var(--red);
}

.conf-bar-pct {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 30px;
  text-align: right;
}

/* Bet recommendation badges at bottom of race card */
.race-card__bets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.bet-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--amber-light);
  color: var(--amber);
  font-size: 11px;
  font-weight: 500;
}

/* Model pill switcher (Lite / VR β) */
.race-card__model-pills {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.model-pill {
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid var(--primary, #5c6bc0);
  background: transparent;
  color: var(--primary, #5c6bc0);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.model-pill--active {
  background: var(--primary, #5c6bc0);
  color: var(--surface, #fff);
}

/* Pill switcher for multiple bet strategies */
.race-card__bets-switcher {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.race-card__bet-pills {
  display: flex;
  gap: 4px;
}

.bet-pill {
  padding: 2px 9px;
  border-radius: 12px;
  border: 1px solid var(--amber);
  background: transparent;
  color: var(--amber);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.bet-pill--active {
  background: var(--amber);
  color: var(--surface);
}

.race-card__bets-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---------------------------------------------------------------------------
   Won bets section — race card and quinte card
   ------------------------------------------------------------------------- */

.race-card__won-bets,
.qcard__won-bets {
  margin-top: 8px;
}

.race-card__won-bets-label,
.qcard__won-bets-label {
  font-size: var(--text-xs, 10px);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.race-card__won-bets-empty,
.qcard__won-bets-empty {
  font-size: var(--text-sm, 12px);
  color: var(--text-hint);
  font-style: italic;
  padding: 2px 0;
}

/* Shared bet row — single-line (race card) */
.won-bet-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--green-muted, rgba(34, 197, 94, 0.08));
  margin-bottom: 3px;
  font-size: var(--text-sm, 12px);
  gap: 8px;
}

.won-bet-item__name {
  color: var(--text-primary, var(--text));
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.won-bet-item__payout {
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Quinte variant — two-line layout (label + win_type badge on left, payout + profit on right) */
.won-bet-item--quinte {
  align-items: flex-start;
}

.won-bet-item__left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.won-bet-item__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}

.won-bet-item__win-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.won-bet-item__payout-amount {
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.won-bet-item__profit {
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
}

/* Won-bets model switcher */
.won-bets__tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.won-bets__tab {
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-xs);
  cursor: pointer;
  font-family: inherit;
}
.won-bets__tab--active {
  background: var(--accent, #6366f1);
  border-color: var(--accent, #6366f1);
  color: #fff;
}
.won-bets__panel--hidden { display: none; }
.won-bets__empty {
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: 4px 0;
}

/* ---------------------------------------------------------------------------
   ROI Dashboard
   ------------------------------------------------------------------------- */

/* Period selector pill buttons */
.roi-period-selector {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}

.roi-period-pill {
  padding: 6px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 120ms ease;
}

.roi-period-pill--active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.roi-period-pill:hover:not(.roi-period-pill--active) {
  border-color: var(--green);
  color: var(--green);
}

/* KPI card color overrides for ROI view */
.roi-kpi--positive .kpi-card__value {
  color: var(--green);
}

.roi-kpi--negative .kpi-card__value {
  color: var(--red);
}

/* Investment blocks grid */
.roi-invest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 24px;
}

@media (min-width: 480px) {
  .roi-invest-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .roi-invest-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .roi-invest-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.roi-invest-block {
  background: var(--bg-surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
}

.roi-invest-block__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.roi-invest-block__details {
  margin-bottom: 10px;
}

.roi-invest-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
}

.roi-invest-row__label {
  font-size: 11px;
  color: var(--text-muted);
}

.roi-invest-row__value {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

/* Efficiency bar inside investment block */
.roi-invest-block__bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.roi-invest-block__bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-deep);
  border-radius: 3px;
  overflow: hidden;
}

.roi-invest-block__bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 300ms ease;
}

.roi-invest-block__bar-fill--good {
  background: var(--green);
}

.roi-invest-block__bar-fill--ok {
  background: var(--amber);
}

.roi-invest-block__bar-fill--low {
  background: var(--red);
}

.roi-invest-block__bar-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 30px;
  text-align: right;
}

/* Charts row — two side-by-side chart boxes */
.roi-charts-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

@media (min-width: 640px) {
  .roi-charts-row {
    grid-template-columns: 1fr 1fr;
  }
}

.roi-chart-box {
  background: var(--bg-surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  min-height: 280px;
}

.roi-chart-box--wide {
  margin-bottom: 24px;
  min-height: 320px;
}

.roi-chart-box__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

/* Detail table */
.roi-table-wrapper {
  overflow-x: auto;
  margin-bottom: 24px;
  -webkit-overflow-scrolling: touch;
}

.roi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.roi-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.roi-table td {
  padding: 8px 10px;
  border-bottom: 0.5px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}

.roi-table tbody tr:hover {
  background: var(--bg-surface);
}

/* Mini ROI bar inside table cell */
.roi-table-bar-wrap {
  width: 60px;
  height: 6px;
  background: var(--bg-deep);
  border-radius: 3px;
  overflow: hidden;
}

.roi-table-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 300ms ease;
}

/* ---------------------------------------------------------------------------
   Quinté hit pills — shown on model blocks, tipster rows, and consensus when
   the prediction's top-5 fully overlaps with the official top-5 result.
   ------------------------------------------------------------------------- */

.qcard__quinte-hit {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  margin-top: 4px;
}

.qcard__quinte-hit--ordre {
  background: var(--color-success, #1D9E75);
  color: #fff;
}

.qcard__quinte-hit--desordre {
  background: var(--color-warning, #F59E0B);
  color: #fff;
}

/* ---------------------------------------------------------------------------
   Bets view
   ------------------------------------------------------------------------- */

.bets-relink {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  margin-top: 2px;
}

.bets-relink:hover {
  color: var(--text);
}

/* Connect banner */
.bets-connect-banner {
  background: var(--bg-surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
  max-width: 480px;
}

.bets-connect-banner__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}

.bets-connect-banner__hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.bets-connect-banner__hint--small {
  font-size: 12px;
  margin-top: 16px;
}

.bets-connect-banner__open-btn {
  display: inline-block;
  padding: 9px 18px;
  background: var(--color-primary, #5B6EF5);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.bets-connect-banner__open-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bets-connect-banner__row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.bets-connect-banner__input {
  flex: 1;
  padding: 7px 10px;
  background: var(--bg-input, var(--bg));
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-family: monospace;
}

.bets-connect-banner__save-btn {
  padding: 7px 14px;
  background: var(--bg-surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.bets-connect-banner__save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Bets table */
.bets-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
}

.bets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 520px;
}

.bets-table thead th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 0.5px solid var(--border);
  white-space: nowrap;
  background: var(--bg-surface);
}

.bets-table tbody tr {
  border-bottom: 0.5px solid var(--border);
  transition: background 0.1s;
}

.bets-table tbody tr:last-child {
  border-bottom: none;
}

.bets-table tbody tr:hover {
  background: var(--bg-hover, rgba(255,255,255,0.03));
}

.bets-table tbody td {
  padding: 10px 12px;
  color: var(--text);
  white-space: nowrap;
}

/* Bets header right section */
.bets-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* Date navigation */
.bets-date-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bets-date-nav__arrow {
  background: none;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  padding: 3px 8px;
  cursor: pointer;
}

.bets-date-nav__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.bets-date-nav__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.bets-date-nav__select {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  cursor: pointer;
}

.bets-sync-hint {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Status cell colours */
.bets-table__status--win {
  color: #1D9E75;
  font-weight: 600;
}

.bets-table__status--lose {
  color: #E24B4A;
}

.bets-table__status--pending {
  color: var(--text-muted);
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   Admin view
   ------------------------------------------------------------------------- */

.admin-view {
  padding: 0 0 40px;
}

.admin-card {
  background: var(--bg-surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-top: 20px;
  max-width: 540px;
}

.admin-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
}

.admin-card__status {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.admin-card__status--ok {
  color: #1D9E75;
}

.admin-card__status--warn {
  color: #E24B4A;
}

/* Bets section (embedded in today / history) */
.bets-section {
  margin-top: 24px;
}

.bets-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.bets-section__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.bets-section__sync-btn {
  font-size: 12px;
  padding: 3px 10px;
  background: none;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
}

.bets-section__sync-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bets-section__sync-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 8px;
  display: block;
}

.bets-inline-banner {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bets-inline-banner__hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}