/* Clean history shell using index.html header/footer */
body {
  background: #101010 !important;
}

body > main,
main {
  padding-top: 108px !important;
  padding-bottom: 90px !important;
}

body > header,
header {
  z-index: 9999 !important;
}

footer {
  margin-top: 70px !important;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
}

.dropdown.open .dropdown-menu,
.dropdown-menu.show {
  display: block !important;
}

@media (max-width: 768px) {
  body > main,
  main {
    padding-top: 92px !important;
    padding-bottom: 76px !important;
  }
}

/* FBB-HISTORY-INDEX-OPTIMIZATION-BEGIN */
/* Match index.html spacing, desktop width and mobile behavior */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: #101010 !important;
}

body > main,
main {
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 118px !important;
  padding-bottom: 90px !important;
}

/* Hero should behave like the index main cards: wide, centered, no tiny column */
main .hero,
main .history-hero,
main section:first-of-type {
  width: 100% !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  border-radius: 24px !important;
}

/* Better desktop density */
main h1 {
  font-size: clamp(2.4rem, 4vw, 4.4rem) !important;
  line-height: .98 !important;
  letter-spacing: -0.06em !important;
}

main h2 {
  text-align: center !important;
  margin-top: 34px !important;
}

/* KPI cards: index-style responsive grid */
main .kpis,
main .stats-grid,
main .hero-grid,
main [class*="kpi-grid"],
main [class*="stats-grid"] {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}

main .kpi,
main [class*="kpi-card"],
main [class*="stat-card"] {
  min-width: 0 !important;
  border-radius: 16px !important;
}

/* Tables: desktop width, mobile horizontal scroll instead of page overflow */
main table {
  width: 100% !important;
  min-width: 760px !important;
  border-collapse: collapse !important;
}

main .table-wrap,
main .table-shell,
main .league-table,
main .sport-table,
main [class*="table"] {
  max-width: 100% !important;
}

main .table-wrap,
main .table-shell,
main [class*="table-wrap"],
main [class*="table-shell"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* If tables are not wrapped, allow the direct parent to scroll */
main section:has(table),
main div:has(> table) {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Cards/archive responsive like index cards */
main .cards,
main .archive-grid,
main .prediction-grid,
main [class*="cards"],
main [class*="grid"] {
  max-width: 100% !important;
}

main .hist-card,
main .prediction-card,
main article {
  min-width: 0 !important;
}

/* Header from index: keep compact and above content */
body > header,
header {
  width: 100% !important;
  max-width: 100% !important;
  z-index: 99999 !important;
}

/* Footer from index: keep full-width but controlled */
body > footer,
footer {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 72px !important;
}

/* Tablet */
@media (max-width: 1100px) {
  body > main,
  main {
    width: min(1000px, calc(100% - 28px)) !important;
  }

  main .kpis,
  main .stats-grid,
  main .hero-grid,
  main [class*="kpi-grid"],
  main [class*="stats-grid"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  body > main,
  main {
    width: calc(100% - 20px) !important;
    padding-top: 96px !important;
    padding-bottom: 78px !important;
  }

  main .hero,
  main .history-hero,
  main section:first-of-type {
    padding: 22px 14px !important;
    border-radius: 20px !important;
  }

  main h1 {
    font-size: clamp(2rem, 12vw, 3.1rem) !important;
    line-height: .98 !important;
    letter-spacing: -0.055em !important;
  }

  main h2 {
    font-size: 1.25rem !important;
    margin-top: 28px !important;
  }

  main .kpis,
  main .stats-grid,
  main .hero-grid,
  main [class*="kpi-grid"],
  main [class*="stats-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  main .kpi,
  main [class*="kpi-card"],
  main [class*="stat-card"] {
    padding: 14px 10px !important;
  }

  main table {
    min-width: 720px !important;
    font-size: .82rem !important;
  }
}

/* Small mobile */
@media (max-width: 420px) {
  body > main,
  main {
    width: calc(100% - 16px) !important;
    padding-top: 88px !important;
  }

  main .kpis,
  main .stats-grid,
  main .hero-grid,
  main [class*="kpi-grid"],
  main [class*="stats-grid"] {
    grid-template-columns: 1fr !important;
  }

  main h1 {
    font-size: 2.25rem !important;
  }
}
/* FBB-HISTORY-INDEX-OPTIMIZATION-END */

/* FBB-HISTORY-PC-HEADER-TOP-SPACE-BEGIN */
/* Desktop only: give logo/header breathing room like index.html */
@media (min-width: 769px) {
  body > header,
  header {
    min-height: 82px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    box-sizing: border-box !important;
  }

  body > header > *,
  header > * {
    align-items: center !important;
  }

  header img,
  header .logo,
  header [class*="logo"] {
    margin-top: 2px !important;
  }

  body > main,
  main {
    padding-top: 134px !important;
  }
}
/* FBB-HISTORY-PC-HEADER-TOP-SPACE-END */

/* FBB-HISTORY-LOADED-HEADER-NUDGE-BEGIN */
/* The index shell adds body.fbb-global-nav-ready after load. Keep header content from jumping up. */
@media (min-width: 769px) {
  body.fbb-global-nav-ready > header:first-child,
  body.fbb-global-nav-ready header:first-child,
  body > header:first-child,
  header:first-child {
    min-height: 84px !important;
    height: 84px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.fbb-global-nav-ready > header:first-child > *,
  body.fbb-global-nav-ready header:first-child > *,
  body > header:first-child > *,
  header:first-child > * {
    transform: translateY(6px) !important;
  }

  body.fbb-global-nav-ready > main,
  body.fbb-global-nav-ready main,
  body > main,
  main {
    padding-top: 146px !important;
  }
}
/* FBB-HISTORY-LOADED-HEADER-NUDGE-END */

/* FBB-HISTORY-MOBILE-OPTIMIZATION-V2-BEGIN */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Mobile header: keep logo + language + menu inside viewport */
@media (max-width: 768px) {
  body > header,
  header {
    min-height: 72px !important;
    height: auto !important;
    padding: 10px 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body > header > *,
  header > * {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  header img,
  header .logo img,
  header [class*="logo"] img {
    max-width: 132px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  header .logo,
  header [class*="logo"] {
    max-width: 150px !important;
    min-width: 0 !important;
  }

  header .header-actions,
  header [class*="actions"],
  header .lang-switch {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  header .lang-btn,
  header #lang-en,
  header #lang-pt {
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 8px !important;
    font-size: 0.78rem !important;
    border-radius: 10px !important;
  }

  header .dropdown-toggle {
    min-width: 64px !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }

  header .dropdown-menu {
    position: fixed !important;
    top: 76px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    z-index: 100000 !important;
  }

  /* Content spacing under compact mobile header */
  body > main,
  main {
    width: calc(100% - 16px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 88px !important;
    padding-bottom: 72px !important;
  }

  /* Hero mobile: no giant desktop title */
  main .hero,
  main .history-hero,
  main section:first-of-type {
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 20px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  main .eyebrow {
    font-size: 0.76rem !important;
    letter-spacing: 0.08em !important;
  }

  main h1 {
    font-size: clamp(2rem, 10.5vw, 2.85rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
    margin: 8px 0 14px !important;
    max-width: 100% !important;
    overflow-wrap: balance !important;
  }

  main .hero p,
  main section:first-of-type p {
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
  }

  /* KPI cards */
  main .kpis,
  main .stats-grid,
  main .hero-grid,
  main [class*="kpi-grid"],
  main [class*="stats-grid"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }

  main .kpi,
  main [class*="kpi-card"],
  main [class*="stat-card"] {
    min-width: 0 !important;
    padding: 14px 8px !important;
    border-radius: 16px !important;
    text-align: center !important;
  }

  main .kpi span,
  main [class*="kpi-card"] span,
  main [class*="stat-card"] span {
    font-size: 0.66rem !important;
    line-height: 1.1 !important;
  }

  main .kpi strong,
  main [class*="kpi-card"] strong,
  main [class*="stat-card"] strong {
    font-size: 1.3rem !important;
  }

  /* Sections */
  main section {
    max-width: 100% !important;
    overflow: visible !important;
  }

  main h2 {
    font-size: 1.28rem !important;
    line-height: 1.12 !important;
    margin: 30px 0 12px !important;
    text-align: center !important;
  }

  main h3 {
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
  }

  /* Tables: do not break page width */
  main .table-wrap,
  main .table-shell,
  main [class*="table-wrap"],
  main [class*="table-shell"],
  main section:has(table),
  main div:has(> table) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 16px !important;
  }

  main table {
    width: 100% !important;
    min-width: 720px !important;
    font-size: 0.78rem !important;
  }

  main th,
  main td {
    padding: 10px 10px !important;
    white-space: nowrap !important;
  }

  /* Month tabs / archive controls */
  main .month-tabs,
  main [class*="month-tabs"],
  main .tabs,
  main [class*="tabs"] {
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  main .month-tabs button,
  main [class*="month-tabs"] button,
  main .tabs button,
  main [class*="tabs"] button {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    white-space: nowrap !important;
  }

  /* Prediction history cards */
  main .grid,
  main .cards,
  main .archive-grid,
  main .prediction-grid,
  main [class*="grid"],
  main [class*="cards"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  main .hist-card,
  main .prediction-card,
  main article {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  main .hist-card h3,
  main .prediction-card h3,
  main article h3 {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  main .hist-meta,
  main [class*="meta"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  main .hist-card a,
  main .prediction-card a,
  main article a {
    width: 100% !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Footer mobile */
  footer {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 420px) {
  body > main,
  main {
    width: calc(100% - 12px) !important;
    padding-top: 84px !important;
  }

  main h1 {
    font-size: 2.08rem !important;
  }

  main .kpis,
  main .stats-grid,
  main .hero-grid,
  main [class*="kpi-grid"],
  main [class*="stats-grid"] {
    grid-template-columns: 1fr 1fr !important;
  }

  main table {
    min-width: 680px !important;
    font-size: 0.74rem !important;
  }
}
/* FBB-HISTORY-MOBILE-OPTIMIZATION-V2-END */

/* FBB-HISTORY-MOBILE-LANG-BUTTONS-FIX-BEGIN */
@media (max-width: 768px) {
  body > header,
  header {
    min-height: 76px !important;
    padding: 10px 8px !important;
    overflow: visible !important;
  }

  body > header > *,
  header > * {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  header .header-actions,
  header [class*="header-actions"],
  header .lang-switch,
  header [class*="lang-switch"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    position: static !important;
    transform: none !important;
  }

  header .lang-switch,
  header [class*="lang-switch"] {
    order: 1 !important;
  }

  header .dropdown,
  header [class*="dropdown"] {
    order: 2 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    position: relative !important;
  }

  header #lang-en,
  header #lang-pt,
  header .lang-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 36px !important;
    padding: 0 !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    flex: 0 0 34px !important;
  }

  header .dropdown-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 36px !important;
    padding: 0 8px !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    flex: 0 0 62px !important;
  }

  header img,
  header .logo img,
  header [class*="logo"] img {
    max-width: 116px !important;
    height: auto !important;
  }

  header .logo,
  header [class*="logo"],
  header a[href="/"],
  header a[href="/index.html"] {
    max-width: 132px !important;
    min-width: 0 !important;
    flex: 0 1 132px !important;
  }
}

@media (max-width: 380px) {
  header img,
  header .logo img,
  header [class*="logo"] img {
    max-width: 104px !important;
  }

  header .logo,
  header [class*="logo"],
  header a[href="/"],
  header a[href="/index.html"] {
    max-width: 118px !important;
    flex-basis: 118px !important;
  }

  header #lang-en,
  header #lang-pt,
  header .lang-btn {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    flex-basis: 32px !important;
  }

  header .dropdown-toggle {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    flex-basis: 58px !important;
  }
}
/* FBB-HISTORY-MOBILE-LANG-BUTTONS-FIX-END */