/*
 * Public Betting Trends — responsive table design
 * Desktop: semantic <table> with grouped super-headers.
 * Mobile: same DOM, @container transforms rows into per-team cards.
 */

/* ── Widget wrapper ───────────────────────────────────────── */
.sbt-widget {
  font-family: Arial, Helvetica, sans-serif;
  color: #1a1d24;
  margin: 32px 0 24px;
}

.sbt-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.sbt-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  color: #1a1d24;
}

.sbt-updated {
  font-size: 0.78rem;
  color: #888;
}

.sbt-intro {
  font-size: 0.9rem;
  color: #555;
  margin: 0 0 16px;
  line-height: 1.5;
}

/* ── Games list — ALSO the container for @container queries ──
   Must wrap .rt-wrap so that @container can style .rt-wrap itself
   (a container cannot be styled by its own container query). ── */
.sbt-rt-games {
  display: flex;
  flex-direction: column;
  gap: 16px;
  container-type: inline-size;
}

/* ── Design tokens (scoped to each game table) ───────────── */
.rt-wrap {
  --bg:            #ffffff;
  --surface:       #faf9f7;
  --surface-2:     #f3f1ed;
  --border:        #e7e4dd;
  --border-strong: #d6d2c8;
  --text:          #1a1d24;
  --text-muted:    #6b6f78;
  --text-faint:    #9aa0aa;
  /* Original design accent — blue, matching the design file */
  --accent:        oklch(55% 0.16 252);
  --accent-strong: oklch(45% 0.18 252);
  --accent-soft:   oklch(95% 0.03 252);
  --bar-bets:      oklch(72% 0.02 252);   /* slate */
  --bar-money:     oklch(55% 0.16 252);   /* blue — same as accent */
  --radius:        10px;
  --font-sans:     -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* overflow-x: auto lets the table scroll horizontally on narrow desktop;
     border-radius still applies to the outer box */
  overflow-x: auto;
  font-family: var(--font-sans);
  color: var(--text);
}

/* ── Table base ───────────────────────────────────────────── */
.rt {
  width: 100%;
  /* Fixed layout: table never exceeds container width.
     Column widths set on .grp row; remaining 9 sub-cols share equally. */
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

/* Team column: fixed pixels so team name doesn't get squeezed */
.rt thead .grp th:first-child { width: 160px; }
/* Action column: fixed pixels for button */
.rt thead .grp th:last-child  { width: 110px; }
/* Remaining 9 sub-columns share the rest equally (auto via fixed layout) */

/* Caption (matchup + date) */
.rt caption {
  caption-side: top;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.rt caption .cap-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  text-align: left;
  flex-wrap: nowrap;
}
/* Desktop: single row — [logo] Team A vs [logo] Team B */
.rt caption .title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}
.rt caption .title .t1,
.rt caption .title .t2  { overflow: hidden; text-overflow: ellipsis; }
.rt caption .title .vs  { color: var(--text-muted); font-weight: 500; flex-shrink: 0; }
.rt caption .meta { flex-shrink: 0; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Super-header row */
.rt thead .grp th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  text-align: center;
  padding: 10px 10px 4px;
  background: var(--surface);
}

/* Sub-header row */
.rt thead .sub th {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: right;
  padding: 4px 10px 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.rt thead .sub th.left { text-align: left; }
.rt thead .grp th.sep,
.rt thead .sub th.sep  { border-left: 1px solid var(--border); }

/* Team header cell */
.rt tbody th[scope="row"] {
  text-align: left;
  font-weight: 500;
  padding: 12px 8px 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  overflow: hidden;
}

/* Data cells */
.rt tbody td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: right;
  overflow: hidden;
}
.rt tbody tr:last-child th[scope="row"],
.rt tbody tr:last-child td { border-bottom: 0; }
/* Prevent line values from wrapping to a second line */
.rt tbody td.line   { text-align: left; font-family: var(--font-mono); font-weight: 500; white-space: nowrap; overflow: visible; }
.rt tbody td.sep    { border-left: 1px solid var(--border); }
.rt tbody td.action { text-align: right; padding-right: 12px; }

/* Percentage: single flex row — [bar flex:1] [value] — in both desktop and mobile */
.rt .pct {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
/* Bar goes first visually (DOM order is .v then .bt-bar, so order:-1 reverses) */
.rt .pct .bt-bar { order: -1; flex: 1; min-width: 0; }
.rt .pct .v      { order: 0;  flex: 0 0 auto; font-weight: 500; font-size: 13px; white-space: nowrap; }

/* Desktop label after the %: full word "Bets" / "Money" */
.rt tbody td.bets,
.rt tbody td.money { text-align: right; }
.rt tbody td.bets  .pct .v::after { content: " Bets";  font-weight: 400; font-size: 10px; color: var(--text-muted); }
.rt tbody td.money .pct .v::after { content: " Money"; font-weight: 400; font-size: 10px; color: var(--text-muted); }
.rt-wrap.is-de .rt tbody td.bets  .pct .v::after { content: " Wetten"; }
.rt-wrap.is-de .rt tbody td.money .pct .v::after { content: " Geld"; }

/* Bar fill */
.bt-bar {
  position: relative;
  height: 4px;
  width: 100%;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.bt-bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 2px;
}
.bt-bar.bets  > i { background: var(--bar-bets); }
.bt-bar.money > i { background: var(--bar-money); }

/* Team name + logo row */
.bt-team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bt-team-name { font-weight: 500; white-space: nowrap; }

/* Logo: img or abbr placeholder */
.bt-logo {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  overflow: hidden;
  object-fit: contain;
}
.bt-logo.lg { width: 28px; height: 28px; font-size: 10px; }

/* CTA button */
.btn-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  background: var(--accent);
  color: #fff !important;
  border: 0;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.12s;
}
.btn-copy:hover,
.btn-copy:focus {
  background: var(--accent-strong);
  color: #fff !important;
  text-decoration: none;
}

/* Visually hidden — stays in DOM for screen readers + bots */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Mobile: @container transforms rows into per-team cards ──
   Fires at ≤1000px so pages with a sidebar (content ~750px) show cards,
   not a cramped desktop table. Desktop table only at >1000px.
── */
@container (max-width: 1000px) {
  /* rt-wrap keeps its desktop border+radius; overflow:hidden clips inner corners */
  .rt-wrap { overflow: hidden; }

  /* Caption connects directly to team cards — no separate card, no gap */
  .rt caption {
    display: block;
    width: 100%;
    margin-bottom: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .rt caption .cap-row { flex-wrap: nowrap; align-items: center; gap: 12px; }
  .rt caption .title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow: visible;
  }
  /* Hide logos inside caption on mobile — they appear in each team's card header */
  .rt caption .title .bt-logo { display: none; }
  .rt caption .title .vs { font-size: 13px; }
  .rt caption .meta { flex: 0 0 auto; align-self: center; margin-left: auto; text-align: right; }

  /* Keep thead in DOM for screen readers + bots; hide visually */
  .rt thead {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  .rt         { display: block; min-width: 0; table-layout: auto; }
  .rt tbody   { display: block; }

  /* Each <tr> = one team card, no individual border/radius — rt-wrap is the outer shell */
  .rt tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
    background: var(--bg);
    overflow: hidden;
  }
  /* Divider between team 1 and team 2 */
  .rt tbody tr + tr { border-top: 1px solid var(--border); }

  /* Team header — spans all columns */
  .rt tbody th[scope="row"] {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    font-weight: 600;
    font-size: 15px;
    text-align: left;
  }

  .rt tbody td {
    border: 0;
    padding: 6px 14px;
    text-align: left;
    font-variant-numeric: tabular-nums;
  }

  /* Column placement: td #2–4 = Spread, #5–7 = Moneyline, #8–10 = Total */
  .rt tbody td:nth-child(2),
  .rt tbody td:nth-child(3),
  .rt tbody td:nth-child(4) { grid-column: 1; }
  .rt tbody td:nth-child(5),
  .rt tbody td:nth-child(6),
  .rt tbody td:nth-child(7) { grid-column: 2; border-left: 1px solid var(--border); }
  .rt tbody td:nth-child(8),
  .rt tbody td:nth-child(9),
  .rt tbody td:nth-child(10){ grid-column: 3; border-left: 1px solid var(--border); }

  /* Row placement: line=row2, bets=row3, money=row4 */
  .rt tbody td.line  { grid-row: 2; padding-top: 14px; }
  .rt tbody td.bets  { grid-row: 3; }
  .rt tbody td.money { grid-row: 4; padding-bottom: 14px; }

  /* Line cell: market label from data-label + mono line value */
  .rt tbody td.line {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-align: left;
  }
  .rt tbody td.line::before {
    content: attr(data-label);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* Bets / Money cells: single flex row [bar flex:1][value][B/$] */
  .rt tbody td.bets,
  .rt tbody td.money {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  /* .pct becomes a flex row filling available space */
  .rt tbody td.bets .pct,
  .rt tbody td.money .pct {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }
  /* Bar fills remaining space; value stays fixed-size */
  .rt tbody td.bets .pct .bt-bar,
  .rt tbody td.money .pct .bt-bar {
    flex: 1;
    min-width: 0;
    height: 6px;
    order: -1;
  }
  .rt tbody td.bets .pct .v,
  .rt tbody td.money .pct .v {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
  }
  /* Short label after the pct block: B / $ */
  .rt tbody td.bets::after  { content: "B"; font-size: 9px; font-weight: 700; color: var(--text-muted); flex: 0 0 auto; }
  .rt tbody td.money::after { content: "$"; font-size: 9px; font-weight: 700; color: var(--text-muted); flex: 0 0 auto; }
  .rt-wrap.is-de .rt tbody td.bets::after  { content: "W"; }
  .rt-wrap.is-de .rt tbody td.money::after { content: "€"; }
  /* Suppress ::before leftovers and desktop ::after label */
  .rt tbody td.bets::before,
  .rt tbody td.money::before { content: none; }
  .rt tbody td.bets  .pct .v::after,
  .rt tbody td.money .pct .v::after { content: none; }

  /* Action cell — full-width footer */
  .rt tbody td.action {
    grid-column: 1 / -1;
    grid-row: 5;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--border);
    display: block;
    text-align: left;
  }
  .rt tbody td.action::before { content: none; }
  .rt tbody td.action .btn-copy { width: 100%; justify-content: center; }
}

/* ── Other Public Bets sidebar block ─────────────────────── */
.slotimo-other-bets { margin-top: 1.75rem; }

/* Betting-trends link list in sidebar */
.slotimo-widget-list--bets li { position: relative; padding-left: 14px; }
.slotimo-widget-list--bets li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent, oklch(55% 0.16 252));
  font-size: 0.8rem;
  line-height: inherit;
}
.slotimo-widget-list--bets a {
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}
.slotimo-widget-list--bets a:hover { color: oklch(55% 0.16 252); text-decoration: none; }

/* ── Sidebar spacing: extra gap between the Popular-Articles and next section */
#secondary.slotimo-sidebar .slotimo-widget-stream + h2.slotimo-widget__title,
#secondary.slotimo-sidebar .slotimo-widget-stream + .slotimo-other-bets { margin-top: 1.75rem; }

/* ── Hub page separator ───────────────────────────────────── */
.sbt-hub .sbt-widget {
  border-bottom: 2px solid #e7e4dd;
  padding-bottom: 28px;
  margin-bottom: 28px;
}
.sbt-hub .sbt-widget:last-child { border-bottom: none; }

/* ── Hub footer link ──────────────────────────────────────── */
.sbt-hub-footer {
  margin: 14px 0 4px;
  text-align: right;
}
.sbt-all-link {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a6b3c;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.sbt-all-link:hover { opacity: 0.75; text-decoration: none; }

/* ── Disclaimer ───────────────────────────────────────────── */
.sbt-disclaimer {
  font-size: 0.72rem;
  color: #999;
  margin: 10px 0 0;
}

/* ── Empty state ──────────────────────────────────────────── */
.sbt-empty {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 24px 20px;
  margin: 8px 0 16px;
}
.sbt-empty--page { padding: 32px 24px; }
.sbt-empty-msg {
  margin: 0;
  color: #555;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ── Standalone page — "Updated X min ago" label ─────────── */
.sbt-page-updated {
  font-size: 0.78rem;
  color: #888;
  margin: -8px 0 16px;
}

/* ── Props hub card (Betting Trends Hub page) ─────────────── */
.sbt-widget--props-hub {
  margin-top: 2rem;
  border-top: 2px solid oklch(55% 0.16 252);
}

/* ── Sidebar props teaser ─────────────────────────────────── */
.slotimo-props-teaser {
  margin-top: 1.75rem;
  background: #f4f8ff;
  border: 1px solid #d0e0f7;
  border-radius: 8px;
  padding: 14px 16px 16px;
}
.slotimo-props-teaser .slotimo-widget__title {
  margin-bottom: 0.5rem;
}
.slotimo-props-teaser__desc {
  font-size: 0.85rem;
  color: #4a5568;
  line-height: 1.55;
  margin: 0 0 10px;
}
.slotimo-props-teaser__cta {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: oklch(45% 0.18 252);
  text-decoration: none;
}
.slotimo-props-teaser__cta:hover {
  text-decoration: underline;
  color: oklch(35% 0.18 252);
}