/* The fixture and statistics tables on the dashboards: django-tables2 and DataTables, on the tokens. */
.table-wrap .table { margin: 0; font-size: 0.875rem; --bs-table-bg: transparent; }
.table-wrap .table > thead > tr > th { color: var(--muted); font-weight: 500; font-size: 0.8125rem; line-height: 1.25; vertical-align: bottom; border-bottom: 1px solid var(--hairline); padding: 10px 8px; }
.table-wrap .table > tbody > tr > td { color: var(--text); padding: 10px 8px; border-bottom: 1px solid var(--hairline); line-height: 1.4; }
.table-wrap .table > tbody > tr:hover > td { background: var(--accent-tint); }
.in-app { color: var(--muted); font-size: 0.8125rem; }
.table-wrap table.dataTable { border-collapse: collapse !important; }
div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter { margin-bottom: 12px; color: var(--muted); font-size: 0.875rem; }
div.dataTables_wrapper div.dataTables_filter input { background: var(--page); color: var(--heading); border: 1px solid var(--edge); border-radius: var(--radius-small); padding: 6px 10px; min-height: 36px; margin-left: 8px; }
div.dataTables_wrapper div.dataTables_length select { background-color: var(--page); color: var(--heading); border: 1px solid var(--edge); border-radius: var(--radius-small); padding: 4px 24px 4px 8px; margin-inline: 6px; }
div.dataTables_wrapper div.dataTables_info { color: var(--muted); font-size: 0.875rem; padding-top: 14px; }
div.dataTables_wrapper div.dataTables_paginate { padding-top: 10px; }
.page-link, main li a.page-link { border-radius: 999px !important; margin-inline: 2px; min-width: 36px; text-align: center; text-decoration: none; }
.dataTables_scrollBody { border-bottom: 0 !important; }
.dataTables_empty { color: var(--muted); padding: 24px !important; }
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 8px 24px; margin: 16px 0 20px; }
.legend dt { color: var(--heading); font-size: 0.875rem; font-weight: 600; }
.legend dd { color: var(--muted); font-size: 0.8125rem; margin: 0; }
.league-group { scroll-margin-top: calc(var(--bar-height) + 16px); }
.league-group + .league-group { margin-top: 48px; }
/* A wide table takes the window's width, so every column is seen at once. */
@media (min-width: 1200px) {
  .table-wrap .stats-by-bet, .table-wrap .stats-by-ou { font-size: 0.8125rem; }
  .table-wrap .stats-by-bet > thead > tr > th, .table-wrap .stats-by-ou > thead > tr > th { font-size: 0.75rem; padding: 8px 12px 8px 2px !important; }
  .table-wrap .stats-by-bet > tbody > tr > td, .table-wrap .stats-by-ou > tbody > tr > td { padding: 8px 2px; }
  .table-wrap { --table-width: min(100vw - 64px, 112rem); width: var(--table-width); margin-left: calc((100% - var(--table-width)) / 2); }
  div.dataTables_wrapper div.dataTables_length { float: left; }
  div.dataTables_wrapper div.dataTables_filter { float: right; }
  div.dataTables_wrapper div.dataTables_info { float: left; }
  div.dataTables_wrapper div.dataTables_paginate { float: right; }
  table.dataTable { clear: both; }
  div.dataTables_wrapper::after { content: ""; display: block; clear: both; }
}

/* Below that, each row is a card: the match first, then every figure under its own heading. */
@media (max-width: 1199.98px) {
  /* Each card names its own figures, so the key to the columns has nothing left to explain. */
  .legend { display: none; }
  div.dataTables_wrapper div.dataTables_filter label { display: flex; align-items: center; gap: 8px; width: 100%; }
  div.dataTables_wrapper div.dataTables_filter input { flex: 1 1 auto; min-width: 0; width: 100%; margin-left: 0; }
  .table-wrap .table, .table-wrap .table > tbody { display: block; width: 100% !important; }
  .table-wrap .table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-wrap .table > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px; margin-bottom: 12px; background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--radius); }
  .table-wrap .table > tbody > tr > td, .table-wrap .table > tbody > tr:hover > td { display: block; padding: 0; border: 0; background: transparent; text-align: left !important; line-height: 1.35; }
  .table-wrap .table > tbody > tr > td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 0.75rem; line-height: 1.25; margin-bottom: 2px; }
  .table-wrap .table > tbody > tr > td[data-label="Home / Away"] { order: -3; grid-column: 1 / -1; color: var(--heading); font-size: 1.0625rem; font-weight: 600; }
  .table-wrap .table > tbody > tr > td[data-label="Home / Away"]::before { content: none; }
  .table-wrap .table > tbody > tr > td[data-label="Country / League"] { order: -2; }
  .table-wrap .table > tbody > tr > td[data-label="Date / Time"] { order: -1; }
  /* Predictions that are in the app are said once, not once a column. */
  .table-wrap .table > tbody > tr > td:has(.in-app) { grid-column: 1 / -1; }
  .table-wrap .table > tbody > tr > td:has(.in-app)::before { content: "Predictions"; }
  .table-wrap .table > tbody > tr > td:has(.in-app) ~ td:has(.in-app) { display: none; }
  .table-wrap .table > tbody > tr > td:empty { display: none; }
  .table-wrap .table > tbody > tr > td.dataTables_empty { grid-column: 1 / -1; }
  .table-wrap .table > tbody > tr > td.dataTables_empty::before { content: none; }
  /* A statistics card reads across: one row for each measure, one column for each bet or line. */
  .table-wrap .stats-by-bet > tbody > tr, .table-wrap .stats-by-ou > tbody > tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .table-wrap .table > tbody > tr > td[data-label="Country"], .table-wrap .table > tbody > tr > td[data-label="League"] { order: -2; color: var(--heading); font-weight: 600; }
  .table-wrap .stats-by-bet > tbody > tr > td[data-label="League"], .table-wrap .stats-by-ou > tbody > tr > td[data-label="League"] { grid-column: span 2; }
  .table-wrap .stats-by-bet > tbody > tr > td[data-label="Confidence"], .table-wrap .stats-by-ou > tbody > tr > td[data-label="Confidence"] { order: -2; grid-column: 1 / -1; color: var(--heading); font-weight: 600; }
  .table-wrap .stats-by-bet > tbody > tr > td[data-label$="Preds"] { order: 1; }
  .table-wrap .stats-by-bet > tbody > tr > td[data-label$="Correct"] { order: 2; }
  .table-wrap .stats-by-bet > tbody > tr > td[data-label$="DC Correct"] { order: 3; }
  .table-wrap .stats-by-bet > tbody > tr > td[data-label$="Accuracy"] { order: 4; }
  .table-wrap .stats-by-bet > tbody > tr > td[data-label$="DC Accuracy"] { order: 5; }
  .dataTables_paginate .pagination { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
}