/* =================================================================
   1. VARIABLES & BASE SETUP
   ================================================================= */
   :root {
    --wtr-black: #000000;
    --wtr-white: #ffffff;
    --wtr-dark-bg: #1e2124; /* Container Background */
    --wtr-card-bg: #ffffff; /* Match Card Background */
    --wtr-font-main: 'Oswald', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  
  @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;700&display=swap');
  
  .wtr-wrapper {
    font-family: var(--wtr-font-main);
    max-width: 1200px;
    margin: 0 auto;
    color: var(--wtr-white);
  }
  
  /* =================================================================
     2. TOP NAVIGATION TABS
     ================================================================= */
  .wtr-top-menu {
      margin-bottom: 20px;
      padding-top: 10px;
  }
  
  .wtr-tabs {
      display: flex;
      gap: 10px;
  }
  
  /* Inactive Tabs */
  .wtr-tabs a {
      text-decoration: none;
      text-transform: uppercase;
      font-weight: 700;
      color: #ffffff !important;
      font-size: 14px;
      padding: 8px 16px;
      border-radius: 4px;
      opacity: 0.8;
      border: 1px solid rgba(255,255,255,0.3);
      transition: all 0.2s ease;
  }
  
  .wtr-tabs a:hover {
      opacity: 1;
      background-color: rgba(255,255,255,0.1);
  }
  
  /* Active Tab (White Box, Black Text) */
  .wtr-tabs a.active,
  .wtr-tabs a.is-active {
      background-color: #ffffff !important;
      color: #000000 !important;
      border-color: #ffffff;
      opacity: 1;
  }
  
  /* =================================================================
     3. FILTER BAR (Carousel + Dropdowns)
     ================================================================= */
  .fixture-filter-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--wtr-dark-bg);
    padding: 20px 25px;
    border-radius: 8px;
    margin-bottom: 30px;
    color: #ffffff;
    gap: 20px;
    flex-wrap: wrap;
  }
  
  /* --- Month Carousel --- */
  .month-carousel-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 0;
  }
  
  .month-list-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: center;
  }
  .month-list-container::-webkit-scrollbar { display: none; }
  
  /* Month Items (Default White) */
  .month-item {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff !important; /* Force White */
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    transition: all 0.2s ease;
    opacity: 0.7;
  }
  
  .month-item:hover {
    opacity: 1;
    background-color: rgba(255,255,255,0.1);
  }
  
  /* Active Month (White Box, Black Text) */
  .month-item.active {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 700;
    opacity: 1;
  }
  
  /* Arrows */
  .carousel-arrow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    padding: 0 !important;
    flex-shrink: 0;
  }
  .carousel-arrow svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    stroke: #ffffff !important;
    stroke-width: 2px;
    fill: none !important;
  }
  .carousel-arrow:hover {
    background-color: rgba(255,255,255,0.1);
  }
  
  /* --- Dropdowns --- */
  .dropdown-controls {
    display: flex;
    gap: 15px;
  }
  .control-group {
    display: flex;
    flex-direction: column;
  }
  .control-group label {
    font-size: 10px;
    text-transform: uppercase;
    color: #cccccc; /* Light Grey Label */
    margin-bottom: 4px;
  }
  
  /* Select Box (White Bg, Black Text) */
  .styled-select {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ddd;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    min-width: 160px;
    cursor: pointer;
    font-weight: 600;
    outline: none;
    
    /* Remove native arrow & add custom black arrow */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 12px top 50%;
    background-size: 10px auto;
  }
  
  /* =================================================================
     4. HEADERS (White & Bold)
     ================================================================= */
  .wtr-group__date {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 15px;
      margin-top: 40px;
      padding-bottom: 10px;
      color: #ffffff !important; /* Bold White */
      border-bottom: 1px solid #444;
  }
  
  .wtr-competition__header {
      font-size: 16px;
      font-weight: 800 !important;
      text-transform: uppercase;
      color: #ffffff !important; /* Bold White */
      margin-bottom: 15px;
      margin-top: 25px;
      letter-spacing: 1px;
  }
  
  /* =================================================================
     5. MATCH CARDS
     ================================================================= */
  .wtr-match-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--wtr-card-bg);
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px 20px;
    margin-bottom: 12px;
    color: #000000; /* Black text inside card */
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: transform 0.2s;
  }
  
  .wtr-match-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  }
  
  /* Meta (Time/Status) */
  .wtr-match-card__meta {
    flex: 0 0 100px;
    text-align: center;
    border-right: 1px solid #eee;
    margin-right: 20px;
    padding-right: 20px;
  }
  
  .wtr-match-card__time {
    font-size: 1.4rem;
    font-weight: 800;
    color: #000000 !important;
    display: block;
  }
  
  /* Teams */
  .wtr-match-card__teams {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
 /* Update this existing class */
.wtr-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* This pushes the Team Name left and Score right */
  width: 100%;
}

/* Add this NEW class to style the numbers */
.wtr-team-score,
.sp-score { /* Including generic class just in case */
  font-weight: 800;
  font-size: 1.2rem;
  color: #000000 !important; /* Force Black text so it shows on White card */
  margin-left: auto; /* Extra safety to push it right */
}
  
  .wtr-team-info {
      display: flex;
      align-items: center;
      gap: 15px;
  }
  
  .wtr-team-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
  }
  
  .wtr-team-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: #000000 !important;
  }
  
  /* Action Button */
  .wtr-match-card__action {
      padding-left: 15px;
  }
  
  .wtr-btn-outline {
    text-decoration: none;
    color: #000000;
    border: 1px solid #000000;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.2s;
  }
  
  .wtr-btn-outline:hover {
    background: #000000;
    color: #ffffff;
  }
  
  /* =================================================================
   MOBILE RESPONSIVENESS (ADD TO BOTTOM OF FILE)
   ================================================================= */
@media (max-width: 768px) {
  
  /* 1. Stack the Filter Bar (Carousel on top, Dropdowns below) */
  .fixture-filter-container {
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 15px !important;
      padding: 15px !important;
      height: auto !important;
  }

  /* 2. Make Dropdowns Full Width & Side-by-Side */
  .dropdown-controls {
      width: 100% !important;
      justify-content: space-between !important;
      gap: 10px !important;
  }
  
  .control-group {
      width: 48% !important; /* Each dropdown takes half width */
  }
  
  .styled-select {
      width: 100% !important;
      min-width: 0 !important; /* Prevents overflow */
  }

  /* 3. Fix Match Cards (Stack Time & Teams) */
  .wtr-match-card {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 15px !important;
      padding: 15px !important;
  }
  
  .wtr-match-card__meta {
      border-right: none !important;
      border-bottom: 1px solid #eee !important;
      width: 100% !important;
      padding-bottom: 10px !important;
      margin-right: 0 !important;
      padding-right: 0 !important;
      text-align: left !important;
      
      /* Make time and status sit side-by-side on mobile header */
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
  }
  
  .wtr-match-card__time {
      font-size: 1.2rem !important;
  }

  /* 4. Fix Action Button (Full Width) */
  .wtr-match-card__action {
      width: 100% !important;
      padding-left: 0 !important;
      margin-top: 5px !important;
  }
  
  .wtr-btn-outline {
      display: block !important;
      text-align: center !important;
      width: 100% !important;
      padding: 10px !important;
  }

  /* 5. Fix Tables Grid (Stack Vertically) */
  .wtr-standings-grid {
      grid-template-columns: 1fr !important; /* 1 Column instead of 2 */
  }
}
 /* =================================================================
   1. VARIABLES & BASE TYPOGRAPHY
   ================================================================= */
:root {
  /* Brand Palette */
  --wtr-bg-page: #121212;       /* Deepest Black */
  --wtr-bg-card: #1e1e1e;       /* Card Background */
  --wtr-bg-header: #000000;     /* Table Headers */
  --wtr-bg-row-hover: #2a2a2a;  /* Row Hover State */
  
  --wtr-text-primary: #ffffff;
  --wtr-text-secondary: #a0a0a0; /* Muted stats */
  --wtr-border: #333333;
  
  --wtr-accent: #dcb368;        /* Rugby Gold - Change this to your brand color */
  
  /* Spacing */
  --wtr-space-sm: 8px;
  --wtr-space-md: 16px;
  --wtr-space-lg: 24px;
}

/* Ensure consistent box model */
.wtr-standings-grid *, 
.wtr-single-view * {
  box-sizing: border-box;
}

/* =================================================================
   2. OVERVIEW CARDS (The Grid Layout)
   ================================================================= */

/* Container: 2 Columns on Desktop, 1 on Mobile */
.wtr-standings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wtr-space-lg);
  width: 100%;
  margin-bottom: 40px;
}

/* The Card Look */
.wtr-table-card {
  background-color: var(--wtr-bg-card);
  border: 1px solid var(--wtr-border);
  border-radius: 8px; /* Modern rounded corners */
  overflow: hidden;   /* Clips children to corners */
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5); /* Premium depth */
}

/* Card Header (Competition Title) */
.wtr-table-header {
  background-color: var(--wtr-bg-header);
  padding: var(--wtr-space-md) var(--wtr-space-lg);
  border-bottom: 1px solid var(--wtr-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wtr-competition-title {
  color: var(--wtr-text-primary);
  font-family: 'Oswald', sans-serif; /* Broadcast font */
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

/* =================================================================
   1. GLOBAL VARIABLES & RESET
   ================================================================= */
   :root {
    --wtr-bg-body: #121212;       /* Deep Black background */
    --wtr-bg-card: #1a1a1a;       /* Dark Grey Card */
    --wtr-bg-header: #000000;     /* Black Header */
    --wtr-border: #333333;        /* Subtle Border */
    
    --wtr-text-main: #ffffff;
    --wtr-text-muted: #a0a0a0;
    
    --wtr-accent: #dcb368;        /* WeTalkRugby Gold */
    --wtr-hover: #252525;         /* Row Hover Color */
    
    --wtr-max-width: 1200px;      /* Max width for Full Table View */
  }
  
  .wtr-standings-grid *,
  .wtr-single-view *,
  .wtr-table-card * {
    box-sizing: border-box;
  }
  
  /* =================================================================
     2. MODE A: OVERVIEW GRID (Home Page / Side-by-Side)
     ================================================================= */
  
  /* The Container for side-by-side tables */
  .wtr-standings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Columns equal width */
    gap: 20px;
    width: 100%;
    margin-bottom: 40px;
  }
  
  /* =================================================================
     3. MODE B: FULL SINGLE VIEW (The Centered Fix)
     ================================================================= */
  
  /* This targets the card ONLY when it is in the single view wrapper */
  .wtr-single-view .wtr-table-card {
    display: block;
    width: 100%;
    max-width: var(--wtr-max-width); /* Stops it getting too wide on huge screens */
    margin: 0 auto;                  /* CENTERS the table perfectly */
    box-shadow: 0 10px 40px rgba(0,0,0,0.6); /* Premium Broadcast Shadow */
    border-radius: 8px;
    border: 1px solid var(--wtr-border);
  }
  
  /* Ensure the container around the table allows scrolling */
  .wtr-responsive-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--wtr-bg-card);
  }
  
  /* =================================================================
     4. SHARED CARD STYLING (Applies to both modes)
     ================================================================= */
  
  .wtr-table-card {
    background-color: var(--wtr-bg-card);
    border: 1px solid var(--wtr-border);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  /* Header Bar (Competition Name) */
  .wtr-table-header {
    background-color: var(--wtr-bg-header);
    padding: 15px 20px;
    border-bottom: 1px solid var(--wtr-border);
  }
  
  .wtr-competition-title {
    margin: 0;
    color: var(--wtr-text-main);
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  
  /* =================================================================
     5. TABLE INTERNALS (The Premium Look)
     ================================================================= */
  
  .wtr-standings-table,
  .wtr-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    white-space: nowrap; /* Prevents text wrapping */
    color: var(--wtr-text-main);
  }
  
  /* --- HEADER ROWS --- */
  .wtr-standings-table th,
  .wtr-mini-table th {
    background-color: var(--wtr-bg-header);
    color: var(--wtr-text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 12px;
    border-bottom: 2px solid var(--wtr-border);
    
    /* Alignment Defaults */
    text-align: right; /* Numbers align right */
    
    /* Sticky Header */
    position: sticky;
    top: 0;
    z-index: 10;
  }
  
  /* --- BODY ROWS --- */
  .wtr-standings-table td,
  .wtr-mini-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--wtr-border);
    vertical-align: middle;
    text-align: right; /* Numbers align right */
    color: var(--wtr-text-muted);
    
    /* Tabular Nums: Makes "11" and "88" take same width for perfect lines */
    font-variant-numeric: tabular-nums; 
    transition: background 0.2s ease;
  }
  
  /* Hover Effect */
  .wtr-standings-table tr:hover td,
  .wtr-mini-table tr:hover td {
    background-color: var(--wtr-hover);
    color: #fff;
  }
  
  /* =================================================================
     6. COLUMN ALIGNMENT & LOGOS
     ================================================================= */
  
  /* Force TEAM column (2nd column) to align LEFT */
  .wtr-th-team, .wtr-td-team,
  .wtr-standings-table th:nth-child(2),
  .wtr-standings-table td:nth-child(2) {
    text-align: left !important;
    min-width: 200px;
  }
  
  /* Flexbox for the Logo + Name combo */
  .wtr-td-team {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  /* Logo Sizing (Crucial Fix) */
  .wtr-table-logo,
  .wtr-mini-logo {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain;
    flex-shrink: 0;
  }
  
  /* Team Text */
  .wtr-team-text {
    color: var(--wtr-text-main);
    font-weight: 600;
    font-size: 14px;
  }
  
  /* Points Column Highlight */
  .wtr-th-pts, .wtr-td-pts {
    color: var(--wtr-accent);
    font-weight: 800;
    font-size: 15px;
    background-color: rgba(220, 179, 104, 0.05); /* Subtle Gold Tint */
  }
  
  /* Position Column (#) Center */
  .wtr-th-pos, .wtr-td-pos {
    text-align: center !important;
    width: 40px;
  }
  
  /* =================================================================
     7. NAVIGATION & BUTTONS
     ================================================================= */
  
  /* "Back to All Competitions" Link styling */
  a[href*="back"], .wtr-back-link {
    display: inline-flex;
    align-items: center;
    margin: 0 auto 20px auto; /* Centers it above the table */
    max-width: var(--wtr-max-width);
    color: var(--wtr-text-muted);
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  a[href*="back"]:hover, .wtr-back-link:hover {
    color: var(--wtr-accent);
    text-decoration: none;
  }
  
  /* "View Full Table" Button (Footer of cards) */
  .wtr-card-footer {
    padding: 15px;
    background-color: var(--wtr-bg-card);
    text-align: center;
    border-top: 1px solid var(--wtr-border);
    margin-top: auto;
  }
  
  .wtr-view-full-btn {
    display: inline-block;
    color: var(--wtr-text-main);
    border: 1px solid var(--wtr-text-main);
    padding: 10px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    transition: all 0.2s;
  }
  
  .wtr-view-full-btn:hover {
    background-color: var(--wtr-text-main);
    color: #000;
  }
  
  /* =================================================================
     8. RESPONSIVE (Mobile & Tablet)
     ================================================================= */
  
  /* Tablet Portrait & Mobile (Stack the Grid) */
  @media (max-width: 900px) {
    .wtr-standings-grid {
      grid-template-columns: 1fr; /* Stack cards vertically */
    }
  }
  
  /* Mobile Specifics */
  @media (max-width: 767px) {
    /* Let the full view card touch screen edges */
    .wtr-single-view .wtr-table-card {
      border-radius: 0;
      border-left: none;
      border-right: none;
    }
    
    /* Adjust padding for small screens */
    .wtr-standings-table th, 
    .wtr-standings-table td {
      padding: 12px 8px;
      font-size: 13px;
    }
    
    /* Ensure Back Link aligns left on mobile */
    a[href*="back"], .wtr-back-link {
      margin-left: 15px;
    }
  }
  /* =================================================================
   FINAL "BROADCAST STYLE" FULL TABLE CSS
   ================================================================= */

/* 1. The Card Container (Perfectly Centered) */
.wtr-single-view .wtr-table-card {
  /* Width Strategy: 
     Use 90vw (90% of viewport) to leave safe margins on sides.
     Cap it at 1280px so it doesn't get impossible to read on huge screens. */
  width: 90vw; 
  max-width: 1280px; 
  
  /* The "Absolute Centering" Hack that ignores sidebars */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -45vw; /* Half of 90vw */
  margin-right: -45vw;
  
  /* Look & Feel */
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6); /* Deep shadow to make it pop */
  margin-top: 20px;
  margin-bottom: 50px;
  z-index: 100; /* Sit above everything else */
}

/* Fix for large screens (stops the margin calc from breaking layout) */
@media (min-width: 1422px) {
  .wtr-single-view .wtr-table-card {
    margin-left: calc(-1280px / 2); /* Half of max-width */
    margin-right: calc(-1280px / 2);
    width: 1280px;
  }
}

/* 2. Typography & Contrast (High Readability) */
.wtr-single-view .wtr-standings-table {
  font-size: 15px; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #fff;
}

/* Header styling */
.wtr-single-view .wtr-standings-table th {
  background-color: #000; /* Pitch black header */
  color: #a0a0a0;         /* Grey text for headers */
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 18px 12px;
  border-bottom: 1px solid #444;
}

/* Row styling */
.wtr-single-view .wtr-standings-table td {
  padding: 16px 12px;
  border-bottom: 1px solid #2a2a2a; /* Subtle separator */
}

/* 3. Column Alignment Fixes */

/* TEAM NAME (Left Aligned & Wide) */
.wtr-single-view .wtr-td-team,
.wtr-single-view td:nth-child(2) {
  text-align: left !important;
  padding-left: 20px !important;
  min-width: 250px; /* Gives the team name plenty of space */
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
}

/* STATS (Right Aligned for clean columns) */
.wtr-single-view .wtr-td-stat, 
.wtr-single-view .wtr-td-pts,
.wtr-single-view td {
  text-align: right; 
  font-variant-numeric: tabular-nums; /* Aligns numbers vertically */
}

/* FORM GUIDE (Center Aligned) */
.wtr-td-form {
  text-align: center !important;
  letter-spacing: 3px;
  font-family: monospace;
  color: #888;
}

/* 4. "Back to All Competitions" Button Alignment */
/* We align this to the center so it sits nicely above the centered card */
a[href*="back"], .wtr-back-link {
  display: flex;
  justify-content: center; /* Center the text inside */
  width: fit-content;
  margin: 0 auto 20px auto; /* Auto margins center the button itself */
  
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: #a0a0a0;
  text-decoration: none;
  
  border: 1px solid #333;
  padding: 8px 20px;
  border-radius: 30px; /* Pill shape */
  background-color: #1a1a1a;
  transition: all 0.2s;
}

a[href*="back"]:hover, .wtr-back-link:hover {
  border-color: #fff;
  color: #fff;
}

/* 5. Mobile Adjustments */
@media (max-width: 768px) {
  .wtr-single-view .wtr-table-card {
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    border-radius: 0;
    border: none;
    border-top: 1px solid #333;
  }
}

/* =================================================================
   FIX: FORCE SCORES TO SHOW (Black & Right Aligned)
   ================================================================= */

/* 1. Force the row to spread out (Name Left <---> Score Right) */
.wtr-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between !important; /* Pushes score to the far right */
  width: 100%;
}

/* 2. THE "CATCH-ALL" COLOR FIX */
/* This targets typical score tags (Bold, Spans, Links) inside the white card */
.wtr-match-card b,
.wtr-match-card strong,
.wtr-match-card span.sp-score,
.wtr-match-card .sp-result,
.wtr-match-card .score {
  color: #000000 !important; /* Force Pure Black */
  font-weight: 800;
  font-size: 18px;
  opacity: 1 !important; /* Ensure it's not transparent */
  display: block !important; /* Ensure it's not hidden */
}

/* 3. Specific Fix if Score is the last item in the row */
/* If the score doesn't have a class, this targets whatever sits after the team info */
.wtr-team-row > *:not(.wtr-team-info) {
  color: #000000 !important;
  font-weight: 800;
  font-size: 18px;
}
/* =================================================================
   7. MATCH INFO PAGE (Full Template Styles)
   ================================================================= */

/* --- MAIN LAYOUT GRID --- */
.wtr-match-wrapper {
  width: 100%;
  margin: 0 auto;
}

.wtr-match-layout {
  display: flex;
  gap: 30px;
  margin-top: 20px;
}

.wtr-match-main {
  flex: 2; /* Main content takes 2/3 */
}

.wtr-match-sidebar {
  flex: 1; /* Sidebar takes 1/3 */
}

/* --- HERO SECTION (Broadcast Style) --- */
.wtr-match-hero {
  background-color: var(--wtr-dark-bg);
  border: 1px solid var(--wtr-border);
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  margin-bottom: 20px;
}

.wtr-hero-meta {
  color: #888;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.wtr-hero-scoreboard {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.wtr-hero-team {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.wtr-hero-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.wtr-hero-name {
  color: var(--wtr-white);
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}

.wtr-hero-score {
  font-size: 48px;
  font-weight: 800;
  color: var(--wtr-white);
  line-height: 1;
}

.wtr-hero-date, .wtr-hero-time {
  font-size: 16px;
  color: var(--wtr-white);
  font-weight: 700;
}

.wtr-hero-status {
  background: var(--wtr-accent);
  color: var(--wtr-black);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  margin-top: 10px;
  display: inline-block;
  text-transform: uppercase;
}

.wtr-hero-footer {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #333;
  color: #888;
  font-size: 12px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* --- TABS --- */
.wtr-match-tabs {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--wtr-border);
  padding-bottom: 0;
}
.wtr-tab-btn {
  background: none;
  border: none;
  color: #888;
  padding: 10px 20px;
  font-family: var(--wtr-font-main);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.wtr-tab-btn.active {
  color: var(--wtr-accent);
  border-bottom-color: var(--wtr-accent);
}

/* =================================================================
   8. MATCH DETAILS & FORM GUIDE (The Missing Piece)
   ================================================================= */

/* Container for Home vs Away Form */
.wtr-form-container {
  display: flex;
  justify-content: space-between;
  gap: 40px; 
  margin-bottom: 30px;
  background: #111; 
  padding: 25px;
  border-radius: 8px;
  border: 1px solid #333;
}

.wtr-form-side {
  width: 48%;
  text-align: center;
}

.wtr-form-title {
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid #333;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

/* --- THE W/L CIRCLES --- */
.wtr-form-badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.wtr-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%; /* Creates the circle */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #000;
  line-height: 1;
}

/* Specific Badge Colors */
.wtr-badge.win { background-color: #ffffff; color: #000; }
.wtr-badge.draw { background-color: #888888; color: #fff; }
.wtr-badge.loss { 
  background-color: transparent; 
  border: 2px solid #555; 
  color: #fff; 
}

/* --- RECENT MATCH LIST --- */
.wtr-recent-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #222;
  font-size: 13px;
  color: #aaa;
}
.wtr-recent-res {
  font-weight: 700;
  color: #fff;
}

/* --- MATCH STAT BARS --- */
.wtr-section-title {
  background: var(--wtr-black);
  color: var(--wtr-white);
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 15px;
  margin-top: 30px;
}

.wtr-stat-modern {
  margin-bottom: 15px;
}
.wtr-stat-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.wtr-stat-middle { font-size: 11px; color: #888; text-transform: uppercase; }

.wtr-bar-container {
  display: flex;
  height: 8px;
  background: #222;
  border-radius: 4px;
  overflow: hidden;
}
.wtr-bar-home { background-color: #ffffff; height: 100%; }
.wtr-bar-away { background-color: var(--wtr-accent); height: 100%; margin-left: auto; }

/* --- SCORING SUMMARY --- */
.wtr-scoring-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
  background: #111;
  padding: 20px;
  border: 1px solid #333;
}
.wtr-scorer-col { text-align: center; }
.wtr-scorer-type { font-size: 11px; color: var(--wtr-accent); text-transform: uppercase; margin-bottom: 10px; font-weight: 700; }
.wtr-scorer-item { font-size: 13px; color: #fff; margin-bottom: 4px; }

/* --- LINEUPS --- */
.wtr-lineups-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.wtr-lineup-team { color: var(--wtr-accent); border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 10px; }
.wtr-player-list { list-style: none; padding: 0; margin: 0; }
.wtr-player-list li { border-bottom: 1px solid #222; padding: 8px 0; display: flex; align-items: center; color: #fff; font-size: 13px; }
.wtr-jersey { width: 30px; color: #888; font-weight: 700; }

/* --- SIDEBAR WIDGETS --- */
.wtr-widget { margin-bottom: 30px; }
.wtr-widget-title { font-size: 14px; font-weight: 700; color: var(--wtr-white); border-left: 3px solid var(--wtr-accent); padding-left: 10px; margin-bottom: 15px; }
.wtr-mini-card { background: var(--wtr-dark-bg); padding: 10px; border: 1px solid #333; margin-bottom: 8px; border-radius: 4px; }
.wtr-mini-card__date { font-size: 11px; color: #888; display: flex; justify-content: space-between; margin-bottom: 5px; }
.wtr-mini-status { font-weight: bold; color: var(--wtr-white); }
.wtr-mini-status.ft { color: var(--wtr-accent); }
.wtr-mini-team { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; color: #fff; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .wtr-match-layout { flex-direction: column; }
  .wtr-hero-scoreboard { gap: 15px; }
  .wtr-hero-logo { width: 50px; height: 50px; }
  .wtr-hero-name { font-size: 14px; }
  .wtr-hero-score { font-size: 32px; }
  
  .wtr-form-container { flex-direction: column; gap: 30px; }
  .wtr-form-side { width: 100%; }
  
  .wtr-lineups-grid { grid-template-columns: 1fr; }
}
/* =================================================================
   9. FIXES: HEAD-TO-HEAD & SIDEBAR LINKS
   ================================================================= */

/* --- SIDEBAR LINKS --- */
.wtr-mini-card-link {
  text-decoration: none;
  display: block;
}

/* Add a hover effect so users know it's clickable */
.wtr-mini-card-link:hover .wtr-mini-card {
  background-color: #2a2a2a; /* Slightly lighter on hover */
  border-color: var(--wtr-accent); /* Gold border on hover */
  cursor: pointer;
}

/* --- HEAD TO HEAD SUMMARY (The 3 Numbers) --- */
.wtr-h2h-summary {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #111; /* Dark Box */
  padding: 25px;
  border-radius: 8px;
  border: 1px solid #333;
  margin-bottom: 30px;
}

.wtr-h2h-stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wtr-h2h-big {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.wtr-h2h-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  margin-top: 5px;
  letter-spacing: 0.5px;
}

/* --- HEAD TO HEAD LIST (Previous Meetings) --- */
.wtr-match-card-simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  background: #1a1a1a;
  border: 1px solid #333;
  margin-bottom: 10px;
  border-radius: 4px;
}

.wtr-mcs-date {
  font-size: 11px;
  color: #888;
  min-width: 80px; /* Aligns the dates */
}

.wtr-mcs-score {
  flex: 1;
  text-align: right;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  justify-content: flex-end; /* Pushes teams to right */
  align-items: center;
  gap: 10px;
}

/* Make the score pop */
.wtr-mcs-score strong {
  color: var(--wtr-accent);
  font-weight: 700;
  min-width: 50px;
  text-align: center;
  background: rgba(255,255,255,0.05);
  padding: 4px 8px;
  border-radius: 4px;
}
/* =================================================================
   MOBILE FIXES (Results, Headers, Alignment)
   ================================================================= */

/* 1. FIX RESULTS SCORES (Right Alignment) 
   Separates "TeamName48" into "TeamName ... 48"
*/
.wtr-team-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* Pushes items apart */
  width: 100%;
}

.wtr-team-name {
  margin-right: auto !important; /* Pushes everything else to the right */
  padding-right: 10px; /* Safety gap */
}

/* Target the score specifically to ensure it stays right */
.wtr-team-score, 
.sp-score,
.sp-result,
.wtr-match-card strong {
  margin-left: auto !important; 
  text-align: right;
  min-width: 30px; /* Ensures space for digits */
  display: block;
}

/* 2. FIX HEADER & FILTERS ON MOBILE 
 Fixes the "Month" bar overflowing and dropdowns stacking
*/
@media (max-width: 768px) {
  
  /* Allow the Month Filter to scroll smoothly instead of cutting off */
  .fixture-filter-container {
      flex-direction: column;
      padding: 15px; /* Reduce bulky padding */
      gap: 20px;
  }

  .month-carousel-wrapper {
      width: 100%;
      display: flex;
      justify-content: space-between;
  }

  .month-list-container {
      flex: 1;
      overflow-x: auto; /* Enable horizontal scroll */
      margin: 0 10px;
      justify-content: flex-start; /* Align left so scroll works */
  }

  /* Stack the Dropdowns (Competition/Season) so they fit */
  .dropdown-controls {
      width: 100%;
      flex-direction: column;
      gap: 10px;
  }

  .control-group, 
  .styled-select {
      width: 100% !important; /* Full width inputs */
  }
}

/* =================================================================
   CRITICAL FIX: MOBILE FULL TABLE RESET
   ================================================================= */

/* We use 'body' to make this selector stronger than the desktop rules */
@media (max-width: 768px) {

  /* 1. Force the Card to fit the phone screen */
  body .wtr-single-view .wtr-table-card,
  body .wtr-table-card {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      
      /* Reset positioning hacks */
      position: relative !important;
      left: auto !important;
      right: auto !important;
      transform: none !important;
      
      /* Remove negative margins */
      margin-left: 0 !important;
      margin-right: 0 !important;
      margin-top: 10px !important;
      
      /* Visuals */
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
      background: transparent !important; /* Blends better on mobile */
  }

  /* 2. Ensure the Table inside scrolls */
  body .wtr-responsive-table {
      width: 100% !important;
      display: block !important;
      overflow-x: auto !important; /* Enables swiping */
      -webkit-overflow-scrolling: touch;
  }

  /* 3. Fix the "Back" button alignment */
  body a[href*="back"], 
  body .wtr-back-link {
      display: inline-block !important;
      width: auto !important;
      margin: 10px 0 15px 15px !important; /* Align left with padding */
      transform: none !important;
  }

  /* 4. Stop the whole page from shaking/scrolling sideways */
  html, body {
      overflow-x: hidden !important;
      width: 100% !important;
  }
}
/* =================================================================
   FIX: UNBLOCK MOBILE SCROLLING
   ================================================================= */

   @media (max-width: 768px) {

    /* 1. Reset the Card Container so it fits the screen */
    body .wtr-single-view .wtr-table-card,
    body .wtr-table-card {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        border-radius: 0 !important;
        
        /* CRITICAL: Allow inner elements to scroll */
        overflow: visible !important; 
    }

    /* 2. The Scroll Window (The Wrapper) */
    /* This creates the "Swipeable Area" */
    body .wtr-responsive-table {
        display: block !important;
        width: 100% !important;
        
        /* Force the scrollbar to appear */
        overflow-x: scroll !important; 
        overflow-y: hidden !important;
        
        /* Smooth scrolling for iPhone */
        -webkit-overflow-scrolling: touch; 
        
        /* Add padding so the scrollbar isn't invisible at the very bottom */
        padding-bottom: 15px !important; 
        margin-bottom: 20px !important;
    }

    /* 3. The Table Content */
    /* Force it wide so there is something to scroll TO */
    body .wtr-standings-table {
        min-width: 750px !important; /* Forces it off-screen to the right */
        width: 750px !important;     /* Hard set width to ensure stability */
        max-width: none !important;
    }

    /* 4. Fix Sticky Columns (Optional: Remove if it causes glitches) */
    /* Sometimes sticky columns break scrolling on older phones. 
       Let's keep it simple for now and turn sticky OFF to ensure scrolling works. */
    .wtr-td-team, 
    .wtr-standings-table th:nth-child(2) {
        position: static !important; /* un-stick the team name */
        background-color: transparent !important;
    }
}