/* ==========================================================================
   TFDF Tables (Standings / Entrants / Rounds) – responsive, Astra-safe
   ========================================================================== */

/* ---- Shared wrappers ---- */
.tfdf-table-wrap,
.tfdf-scroll-x {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}


/* Prevent “mystery overflow” from theme styles */
.tfdf-block {
  max-width: 100%;
}

/* ---- Shared table base ---- */
.tfdf-block .tfdf-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 14px;
}

.tfdf-block .tfdf-table th,
.tfdf-block .tfdf-table td {
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.12);
  vertical-align: middle;
}

.tfdf-block .tfdf-table thead th {
  font-weight: 700;
  text-align: left;
  background: #0b79b7;       /* your blue header */
  color: #fff;
}

/* Zebra rows */
.tfdf-block .tfdf-table tbody tr:nth-child(even) {
  background: rgba(11,121,183,.18);
}

/* Links */
.tfdf-block .tfdf-table a {
  color: #0b79b7;
  text-decoration: underline;
}

/* ==========================================================================
   Standings table: allow horizontal scroll instead of breaking layout
   ========================================================================== */

.tfdf-series-standings .tfdf-standings-table {
  min-width: 720px; /* forces scroll on mobile instead of squishing */
}

.tfdf-series-standings .tfdf-standings-table th,
.tfdf-series-standings .tfdf-standings-table td {
  white-space: nowrap;
}

/* Make the Driver column a bit wider */
.tfdf-series-standings .tfdf-standings-table th:nth-child(2),
.tfdf-series-standings .tfdf-standings-table td:nth-child(2) {
  min-width: 220px;
}

/* ==========================================================================
   Entrants & Rounds tables: same behaviour, different minimum widths
   ========================================================================== */

.tfdf-series-entrants .tfdf-entrants-table {
  min-width: 860px;
}

.tfdf-series-rounds .tfdf-entrants-table {
  min-width: 720px;
}

.tfdf-series-entrants .tfdf-entrants-table th,
.tfdf-series-entrants .tfdf-entrants-table td,
.tfdf-series-rounds .tfdf-entrants-table th,
.tfdf-series-rounds .tfdf-entrants-table td {
  white-space: nowrap;
}

/* =========================================================
   HARD STOP: prevent TFDF tables causing page-wide overflow
   Add this at the VERY END of the CSS file
   ========================================================= */

/* 1) Make sure the TFDF blocks can’t exceed the viewport */
.tfdf-block,
.tfdf-series-standings,
.tfdf-series-entrants,
.tfdf-series-rounds {
  max-width: 100%;
}

/* 2) The wrapper is what scrolls (not the page) */
.tfdf-table-wrap,
.tfdf-scroll-x {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}


/* 3) Let the table be as wide as it needs, but keep it contained */
.tfdf-table-wrap > table,
.tfdf-scroll-x > table {
  width: 100%;
  max-width: none;
}


/* =========================================================
   TFDF tooltips above sticky headers/columns (FINAL OVERRIDE)
   Put this at the VERY END of the CSS file
   ========================================================= */

.tfdf-series-standings .tfdf-table-wrap,
.tfdf-series-standings .tfdf-scroll-x{
  position: relative;
  overflow-x: auto;
  overflow-y: visible; /* allow tooltip bubble to escape vertically */
  -webkit-overflow-scrolling: touch;
}

.tfdf-series-standings .tfdf-standings-table{
  position: relative;
  z-index: 0;
}

/* Sticky header + sticky cols should NOT be above tooltips */
.tfdf-series-standings .tfdf-standings-table thead th{
  position: sticky;
  top: 0;
  z-index: 2; /* keep header above rows, but below tooltip */
}

.tfdf-series-standings .tfdf-standings-table th:first-child,
.tfdf-series-standings .tfdf-standings-table td:first-child{
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
}

.tfdf-series-standings .tfdf-standings-table th:nth-child(2),
.tfdf-series-standings .tfdf-standings-table td:nth-child(2){
  position: sticky;
  left: 48px; /* adjust to match your # column width */
  z-index: 2;
  background: #fff;
}

/* Tooltip trigger */
.tfdf-points-tooltip{
  position: relative;
  z-index: 9999;
  cursor: help;
  border-bottom: 1px dotted rgba(0,0,0,.35);
}

/* Bubble */
.tfdf-points-tooltip:hover::after,
.tfdf-points-tooltip:focus::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 10px); /* show below (safer for sticky header) */
  white-space: pre-line;

  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.2);
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);

  z-index: 99999; /* must beat sticky z-index */
  min-width: 180px;
  max-width: 85vw;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Arrow */
.tfdf-points-tooltip:hover::before,
.tfdf-points-tooltip:focus::before{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 3px);

  border: 7px solid transparent;
  border-bottom-color: rgba(0,0,0,.2);

  z-index: 99999;
}



/* Promote the hovered row above siblings so nothing paints over tooltips */
.tfdf-series-standings .tfdf-standings-table tbody tr:hover {
  position: relative;
  z-index: 50;
}

/* Make sure sticky cells don't cover the tooltip bubble */
.tfdf-series-standings .tfdf-standings-table tbody tr:hover td,
.tfdf-series-standings .tfdf-standings-table tbody tr:hover th {
  position: relative;
  z-index: 50;
}

/* ============================
   DESKTOP: tooltip must beat sticky cells
   ============================ */
@media (min-width: 641px) {

  /* Keep sticky stuff working, but not on top of tooltips */
  .tfdf-series-standings .tfdf-standings-table thead th{
    z-index: 5 !important;
  }

  .tfdf-series-standings .tfdf-standings-table th:first-child,
  .tfdf-series-standings .tfdf-standings-table td:first-child,
  .tfdf-series-standings .tfdf-standings-table th:nth-child(2),
  .tfdf-series-standings .tfdf-standings-table td:nth-child(2){
    z-index: 5 !important;
  }

  /* Raise hovered row */
  .tfdf-series-standings .tfdf-standings-table tbody tr:hover{
    z-index: 20 !important;
  }

  /* Tooltip must be above everything */
  .tfdf-series-standings .tfdf-points-tooltip{
    z-index: 99990 !important;
  }
  .tfdf-series-standings .tfdf-points-tooltip:hover::after,
  .tfdf-series-standings .tfdf-points-tooltip:focus::after,
  .tfdf-series-standings .tfdf-points-tooltip:hover::before,
  .tfdf-series-standings .tfdf-points-tooltip:focus::before{
    z-index: 99999 !important;
  }
}
/* =========================================
   TOOLTIP MUST ALWAYS SIT ABOVE TABLE TEXT
   (Astra/Sticky stacking-context fix)
   Put LAST in file
   ========================================= */

/* Give the scroll wrapper its own stacking context */
.tfdf-series-standings .tfdf-table-wrap,
.tfdf-series-standings .tfdf-scroll-x{
  position: relative;
  isolation: isolate;           /* key */
  overflow-x: auto;
  overflow-y: visible;
}

/* Make cells allow the tooltip to escape */
.tfdf-series-standings .tfdf-standings-table td,
.tfdf-series-standings .tfdf-standings-table th{
  position: relative;
  overflow: visible;
}

/* Keep sticky header/cols working, but low */
.tfdf-series-standings .tfdf-standings-table thead th{ z-index: 5 !important; }
.tfdf-series-standings .tfdf-standings-table th:first-child,
.tfdf-series-standings .tfdf-standings-table td:first-child,
.tfdf-series-standings .tfdf-standings-table th:nth-child(2),
.tfdf-series-standings .tfdf-standings-table td:nth-child(2){ z-index: 5 !important; }

/* Tooltip trigger becomes its own isolated stacking context */
.tfdf-series-standings .tfdf-points-tooltip{
  display: inline-block;
  position: relative;
  isolation: isolate;           /* key */
  z-index: 999999 !important;
}

/* Tooltip bubble/arrow on top of everything */
.tfdf-series-standings .tfdf-points-tooltip:hover::after,
.tfdf-series-standings .tfdf-points-tooltip:focus::after,
.tfdf-series-standings .tfdf-points-tooltip:hover::before,
.tfdf-series-standings .tfdf-points-tooltip:focus::before{
  z-index: 2147483647 !important; /* max-ish */
}

/* ===== FINAL DESKTOP FIX: tooltips must sit above table text ===== */

/* The scroll wrapper becomes the clipping + stacking root */
.tfdf-series-standings .tfdf-table-wrap,
.tfdf-series-standings .tfdf-scroll-x{
  position: relative !important;
  isolation: isolate !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Force cells to NOT paint above their children */
.tfdf-series-standings .tfdf-standings-table td,
.tfdf-series-standings .tfdf-standings-table th{
  position: relative !important;
  z-index: 0 !important;
}

/* Tooltip trigger + bubble: absolute top of this stacking root */
.tfdf-series-standings .tfdf-points-tooltip{
  position: relative !important;
  display: inline-block !important;
  z-index: 999999 !important;
  isolation: isolate !important;
}

.tfdf-series-standings .tfdf-points-tooltip:hover::after,
.tfdf-series-standings .tfdf-points-tooltip:focus::after,
.tfdf-series-standings .tfdf-points-tooltip:hover::before,
.tfdf-series-standings .tfdf-points-tooltip:focus::before{
  z-index: 2147483647 !important;
}

/* IMPORTANT: ensure tooltip bubble is fully opaque */
.tfdf-series-standings .tfdf-points-tooltip:hover::after,
.tfdf-series-standings .tfdf-points-tooltip:focus::after{
  background: #fff !important;
  opacity: 1 !important;
}
/* ===== FIX: sticky header cells (# + Driver) must stay blue ===== */

/* Keep ALL header cells blue */
.tfdf-series-standings .tfdf-standings-table thead th{
  background: #0b79b7 !important;
  color: #fff !important;
}

/* Specifically override the sticky ones (# and Driver) */
.tfdf-series-standings .tfdf-standings-table thead th:first-child,
.tfdf-series-standings .tfdf-standings-table thead th:nth-child(2){
  background: #0b79b7 !important;
  color: #fff !important;
}
/* =========================================================
   FIX: Standings is now 4 columns (#, Driver, Points, Gap)
   Correct sticky widths + remove the “white gap”
   Put this at the VERY END of the CSS file
   ========================================================= */

.tfdf-series-standings .tfdf-standings-table{
  --tfdf-col1: 64px; /* width of the # column */
}

/* Lock the # column width so our sticky offset is correct */
.tfdf-series-standings .tfdf-standings-table th:first-child,
.tfdf-series-standings .tfdf-standings-table td:first-child{
  width: var(--tfdf-col1) !important;
  min-width: var(--tfdf-col1) !important;
  max-width: var(--tfdf-col1) !important;
}

/* Driver sticky column must start exactly after the # column */
.tfdf-series-standings .tfdf-standings-table th:nth-child(2),
.tfdf-series-standings .tfdf-standings-table td:nth-child(2){
  left: var(--tfdf-col1) !important; /* replaces left:48px */
  min-width: 220px !important;
}

/* Keep sticky body cells matching zebra rows (so no white blocks) */
.tfdf-series-standings .tfdf-standings-table tbody tr:nth-child(even) td:first-child,
.tfdf-series-standings .tfdf-standings-table tbody tr:nth-child(even) td:nth-child(2){
  background: rgba(11,121,183,.18) !important;
}

.tfdf-series-standings .tfdf-standings-table tbody tr:nth-child(odd) td:first-child,
.tfdf-series-standings .tfdf-standings-table tbody tr:nth-child(odd) td:nth-child(2){
  background: #fff !important;
}

/* Safety: make sure Points/Gaps text always renders */
.tfdf-series-standings .tfdf-standings-table tbody td{
  color: #111 !important;
}
.tfdf-series-standings .tfdf-standings-table tbody td a{
  color: #0b79b7 !important;
}
/* =========================================================
   DESKTOP FIX (Astra-safe)
   - Removes sticky columns on desktop (fixes white gap + missing points)
   - Forces tooltip above table content
   Paste at VERY END of your TFDF CSS
   ========================================================= */

@media (min-width: 768px) {

  /* 1) Disable sticky columns on desktop (they’re causing the white gap) */
  .tfdf-series-standings .tfdf-standings-table th,
  .tfdf-series-standings .tfdf-standings-table td{
    position: static !important;
    left: auto !important;
  }

  /* 2) Ensure header stays blue everywhere */
  .tfdf-series-standings .tfdf-standings-table thead th{
    background: #0b79b7 !important;
    color: #fff !important;
  }

  /* 3) Put hovered cell above its neighbours so tooltip can't be hidden */
  .tfdf-series-standings .tfdf-standings-table td{
    position: relative; /* creates z-index context for the cell */
  }
  .tfdf-series-standings .tfdf-standings-table td:has(.tfdf-points-tooltip:hover),
  .tfdf-series-standings .tfdf-standings-table td:has(.tfdf-points-tooltip:focus){
    z-index: 99999;
  }

  /* Fallback for browsers without :has() (still helps a lot) */
  .tfdf-series-standings .tfdf-standings-table tr:hover td{
    z-index: 2;
  }
  .tfdf-series-standings .tfdf-standings-table tr:hover td .tfdf-points-tooltip:hover::after,
  .tfdf-series-standings .tfdf-standings-table tr:hover td .tfdf-points-tooltip:focus::after{
    z-index: 999999;
  }

  /* 4) Make tooltip fully opaque and always on top */
  .tfdf-points-tooltip:hover::after,
  .tfdf-points-tooltip:focus::after{
    background: #fff !important;
    opacity: 1 !important;
    z-index: 999999 !important;
  }
}

/* =========================================================
   DESKTOP: force tooltip above all table cells/rows
   Paste at VERY END of TFDF CSS
   ========================================================= */

@media (min-width: 768px){

  /* Give every row a baseline stacking context */
  .tfdf-series-standings .tfdf-standings-table tbody tr{
    position: relative;
    z-index: 0;
  }

  /* When hovering a row, lift it above other rows */
  .tfdf-series-standings .tfdf-standings-table tbody tr:hover{
    z-index: 9998;
  }

  /* Lift the specific cell containing the tooltip even higher */
  .tfdf-series-standings .tfdf-standings-table td{
    position: relative;
    z-index: 0;
  }
  .tfdf-series-standings .tfdf-standings-table td:hover{
    z-index: 9999;
  }

  /* Force the tooltip bubble to be on top of everything */
  .tfdf-points-tooltip:hover::after,
  .tfdf-points-tooltip:focus::after{
    z-index: 999999 !important;
    background: #fff !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }

  .tfdf-points-tooltip:hover::before,
  .tfdf-points-tooltip:focus::before{
    z-index: 999999 !important;
  }
}