/* Palette */
:root{
  --whl-bg: #011a39;
  --whl-card: #FFFFFF;
  --whl-text: #011a39;
  --whl-accent: #B99C63;
  --whl-muted: #c9d2e3;
  --whl-up: #16a34a;
  --whl-down: #dc2626;
}

.whl-container { display:flex; flex-direction:column; gap:12px; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--whl-text); background: var(--whl-bg); padding: 50px; border-radius: 14px; }
.whl-header-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.whl-tab { padding:8px 12px; border:1px solid var(--whl-accent); background:transparent; color:var(--whl-accent); border-radius:999px; cursor:pointer; }
.whl-tab.active { background:var(--whl-accent); color:var(--whl-bg); border-color:var(--whl-accent); }
.whl-subtabs { display:flex; gap:8px; margin-left:inherit; }
.whl-sub { padding:6px 10px; background:transparent; color:var(--whl-accent); border:1px solid var(--whl-accent); border-radius:999px; cursor:pointer; }
.whl-sub.active { background:var(--whl-accent); color:var(--whl-bg); }
.whl-two-pane { display:grid; grid-template-columns:minmax(260px,1.2fr) minmax(300px,1fr); gap:12px; }
#whl-fixtures { display:flex; flex-direction:column; gap:10px; }
.whl-card { border:1px solid var(--whl-accent); background:var(--whl-card); border-radius:12px; padding:12px; cursor:pointer; }
.whl-card.selected { outline:2px solid var(--whl-accent); }
.whl-league { font-size:12px; color:var(--whl-accent); margin-bottom:6px; font-weight:600; }
.whl-card-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.whl-card-main { display:flex; flex-direction:column; gap:6px; }
.whl-card-title { font-weight:700; color:var(--whl-text); }
.whl-card-meta { font-size:12px; color:var(--whl-text); opacity:.8; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.whl-card-score { font-weight:800; font-size:18px; color:var(--whl-text); }
.whl-card-odds { margin-top:4px; display:flex; flex-wrap:wrap; gap:6px; }
.whl-chip { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border:1px solid var(--whl-accent); border-radius:999px; font-size:12px; background:transparent; color:var(--whl-text); }
.whl-chip em { font-style:normal; font-weight:700; color:var(--whl-text); }
.whl-chip.whl-manual { background:rgba(185,156,99,0.08); }
.whl-blur { filter:blur(4px); }

.whl-arrow { font-size:12px; line-height:1; }
.whl-up { color: var(--whl-up); }
.whl-down { color: var(--whl-down); }
.whl-arrow-stale, .whl-arrow-eq { color: var(--whl-accent); }

.whl-badge { display:inline-flex; align-items:center; padding:2px 6px; border-radius:6px; font-size:11px; background:rgba(185,156,99,0.15); color:var(--whl-accent); }

.whl-detail { border:1px solid var(--whl-accent); background:var(--whl-card); border-radius:12px; padding:12px; min-height:300px; display:flex; flex-direction:column; gap:10px; }
.whl-tabs { display:flex; gap:8px; }
.whl-dtab { padding:6px 10px; border:1px solid var(--whl-accent); background:transparent; color:var(--whl-accent); border-radius:999px; cursor:pointer; }
.whl-dtab.active { background:var(--whl-accent); color:var(--whl-bg); }
.whl-pane { display:none; }
.whl-pane.active { display:block; }

.whl-odds-box { border:1px solid var(--whl-accent); border-radius:12px; padding:12px; background:var(--whl-card); margin-bottom:10px; }
.whl-odds-title { font-weight:800; margin-bottom:8px; font-size:14px; color:var(--whl-accent); }
.whl-odds-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:6px 0; border-top:1px dashed var(--whl-accent); }
.whl-odds-row:first-child { border-top:none; }
.whl-market { font-weight:700; color:var(--whl-text); }
.whl-outcomes { display:flex; flex-wrap:wrap; gap:6px; }
.whl-outcome { display:inline-flex; gap:6px; padding:2px 8px; border:1px solid var(--whl-accent); border-radius:999px; background:transparent; font-size:12px; color:var(--whl-text); }
.whl-outcome em { font-style:normal; font-weight:700; }

.whl-ov-header { display:flex; flex-direction:column; gap:8px; }
.whl-ov-league { color:var(--whl-accent); font-weight:700; font-size:12px; }
.whl-ov-title { font-size:18px; font-weight:800; color:var(--whl-text); }
.whl-ov-title span { color:var(--whl-accent); font-weight:700; }
.whl-ov-score { display:flex; gap:6px; align-items:center; font-size:28px; font-weight:900; color:var(--whl-text); }
.whl-ov-meta { font-size:12px; color:var(--whl-text); opacity:.8; }

.whl-empty, .whl-error, .whl-loading { padding:16px; border-radius:8px; font-size:14px; }
.whl-loading { background:rgba(185,156,99,0.12); color:var(--whl-accent); }
.whl-error { background:#fee2e2; color:#991b1b; }
.whl-empty { background:#f3f4f6; color:#374151; }

/* Match ID badge inside card */
.whl-card-id { font-size: 11px; color: var(--whl-text); opacity:.7; cursor:pointer; user-select:all; margin-top:4px; }
.whl-card-id:hover { opacity:1; text-decoration:underline; }
/* Manual odds row beneath API odds on cards */

/* Manual odds row spacing fix (only this row) */
.whl-odds-row--manual {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* avoid space-between pushing cells away */
}

.whl-odds-row--manual .whl-odds-label {
  min-width: unset;  /* override any fixed width from base styles */
  width: auto;
  flex: 0 0 auto;
  margin: 0 6px 0 0; /* small, tight gap */
}

.whl-odds-row--manual .whl-odds-cells {
  display: flex;
  gap: 6px;          /* chip-to-chip spacing only */
  margin-left: 0 !important; /* kills any inherited auto margin */
  flex: 0 1 auto;
}

/* optional: ensure chips themselves don't add extra left margin */
.whl-odds-row--manual .whl-odds-cells .whl-chip {
  margin-left: 0;
}

/* Overview header with logos + inline scores */
.whl-ov-teams {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 2px;
}
.whl-ov-teams .team {
  display: inline-flex; align-items: center; gap: 6px;
}
.whl-ov-teams .sep { opacity: .6; } 

/* Inline small score after each team name */
.whl-ov-score-num {
  display: inline-block; font-weight: 700;
  margin-left: 4px;
}

/* Details box with border around important data */
.whl-ov-details {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
  background: rgba(0,0,0,.02);
}

/* Label: Value formatting with proper colon and spacing */
.whl-ov-item {
  display: flex; align-items: baseline; gap: 8px; padding: 3px 0;
}
.whl-ov-item .k::after { content: ":"; margin: 0 4px 0 2px; opacity: .8; }
.whl-ov-item .k { font-weight: 600; min-width: 110px; }
.whl-ov-item .v { flex: 1; }

/* Ensure both team logos render consistently */
.whl-ov-teams .team .whl-ov-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: inline-block;
  flex: 0 0 22px;
}

/* Finished result box (Overview) */
.whl-result-box{
  border:1px solid rgba(0,0,0,.12);
  border-radius:8px;
  padding:8px 10px;
  margin-top:10px;
  background:#f6fff2;
}
.whl-res-team{ display:flex; align-items:center; gap:8px; font-weight:600; }
.whl-res-team .score{ margin-left:6px; opacity:.9; }
.whl-res-team .badge{
  margin-left:auto; font-size:12px; padding:2px 6px; border-radius:999px;
  border:1px solid rgba(0,0,0,.12); background:#e9ffe2;
}
.whl-res-note{ margin-top:6px; font-size:13px; opacity:.9; }

.whl-manual-heading {
    font-weight: 700;
}


@media (max-width: 900px) {
  .whl-two-pane { grid-template-columns: 1fr; }
}