/* THE 3D BACK BUTTON */
.back-btn {
    display: inline-block;
    background: linear-gradient(to bottom, #4a4a4a, #1f1f1f);
    color: #00d4ff; /* A bright cyan/blue to contrast the dark bg */
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 20px;
    letter-spacing: 0.5px;
    
    /* Cyan border and radiating glow */
    border: none; /* Removing the old thin border */
    border-bottom: 2px solid #00d4ff;
    box-shadow: 0px 4px 12px -2px rgba(0, 212, 255, 0.4);
    transition: all 0.2s ease-in-out;
}

.back-btn:hover {
    color: #ffffff; /* Turns white on hover for clarity */
    background: linear-gradient(to bottom, #5a5a5a, #2a2a2a);
    transform: translateY(-2px);
    box-shadow: 0px 6px 18px -2px rgba(0, 212, 255, 0.6);
    text-decoration: none;
}

.back-btn:active {
    transform: translateY(1px);
    box-shadow: 0px 2px 5px rgba(0, 212, 255, 0.4);
}
.match-item {
    background-color: #ffffff;
    transition: all 0.2s ease-in-out;
    border: 1px solid #e9ecef;
    border-radius:8px;
}

.match-item:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}


/* Shrink the logos slightly so they don't stretch the row height */
.team-logo {
    width: 26px; /* Reduced from 40px */
    height: 26px;
    object-fit: contain;
    margin-right: 8px;
}
.team-info{
    display:flex;
    align-items:center;
    gap:6px;
}

.live-indicator{
    color:red;
    font-weight:600;
}

.result-indicator{
    color:#555;
    font-weight:600;
}

.upcoming-indicator{
    color:#888;
    font-weight:600;
}
.league-match{
    display:flex;
    gap:12px;
    padding:8px 0;
}

.match-time{
    min-width:95px;
    font-size:13px;
    color:#555;
}

.status-text{
    font-size:11px;
    font-weight:600;
    color:#777;
}

.match-teams{
    flex:1;
}

.team-inline{
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.score-or-vs { 
    font-weight: bold; 
}

.fixture-line{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
}

.team-logo-large{
width:70px;
height:70px;
object-fit:contain;
}

.score-big{
font-size:48px;
font-weight:700;
}

.goal-line{
font-size:14px;
margin-top:4px;
}

.match-status{
margin-top:5px;
}

.match-tab{
animation:fadein .2s;
}
.see-more-container{
    margin-top:8px;
}

.see-more-btn{
    font-size:13px;
    color:#0d6efd;
    text-decoration:none;
    font-weight:600;
}

.see-more-btn:hover{
    text-decoration:underline;
}

@keyframes fadein{
from{opacity:0}
to{opacity:1}
}

.team-highlight{
background-color:#2365ac !important;
font-weight:600;
}

.team-highlight td{
background-color:#2365ac !important;
}   

.competition-info {
    text-align: center;  /* Centers inline content horizontally */
    margin: 20px 0;       /* Optional spacing above and below */
    font-size: 1.2em;     /* Optional: makes it stand out a bit */
}

/* =========================
   STICKY LEAGUE TABS
   ========================= */

.nav-tabs{
    position:sticky;
    top:0;
    background:white;
    z-index:100;
    padding-top:5px;
}

/* =========================
   MATCH ITEMS MOBILE
   ========================= */

@media (max-width:768px){

    .match-item{
        padding:10px;
    }

    .fixture-line{
        font-size:14px;
        gap:6px;
    }

}

/* =========================
   RESPONSIVE TABLE HELPERS
   ========================= */

/* =========================
   TABLE BASE
   ========================= */

.table-responsive{
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
}

/* force table to be wider than phone */
.table-responsive table{
    min-width:720px;
    white-space:nowrap;
}

/* equal spacing */
table th,
table td{
    padding:8px 10px;
    text-align:center;
}

/* =========================
   STANDINGS STICKY COLUMNS (UPDATED 5-COLUMN LAYOUT)
   ========================= */

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive table {
    min-width: max-content; 
    white-space: nowrap;
}

.sticky-col {
    position: sticky;
    background-color: white; 
    z-index: 2;
}

thead th.sticky-col {
    background-color: #212529; 
    z-index: 3;
}

/* ---------- 5 PINNED COLUMNS ---------- */

.col-pos {
    left: 0;
    min-width: 40px;
    max-width: 40px;
}

.col-team {
    left: 40px;
    min-width: 120px; 
    max-width: 120px;
    text-align: left;
}

.col-played {
    left: 160px; /* 40 (pos) + 120 (team) */
    min-width: 40px;
    max-width: 40px;
    /* Adds shadow here because this is the new edge of the left sticky zone */
    box-shadow: 4px 0 6px -4px rgba(0,0,0,0.1); 
}

.col-pts {
    right: 0;
    min-width: 50px;
    max-width: 50px;
}

.col-gd {
    right: 50px; /* Starts exactly where col-pts ends */
    min-width: 50px;
    max-width: 50px;
    /* Adds shadow here because this is the new edge of the right sticky zone */
    box-shadow: -4px 0 6px -4px rgba(0,0,0,0.1); 
}

table td, table th {
    padding: 8px 12px;
    text-align: center;
}

/* Give the team column more breathing room on laptops/desktops */
@media (min-width: 768px) {
    .col-team {
        min-width: 200px;
        max-width: 200px;
    }
    .col-played {
        left: 240px; /* 40 + 200 */
    }
}
/* MATCH HEADER LAYOUT */

.match-header{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:60px;
    flex-wrap:wrap;
    text-align:center;
}

/* TEAM BLOCK */

.match-team{
    max-width:200px;
}

/* =========================
   MATCH HEADER LAYOUT
   ========================= */

.match-header {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligns items to the top so logos stay level */
    flex-wrap: nowrap;       /* CRITICAL: Forces everything onto one single line */
    gap: 15px;
    text-align: center;
    width: 100%;
}

.match-team {
    flex: 1;       /* Lets both teams take up equal space on the sides */
    min-width: 0;  /* Prevents long names from breaking the flex container */
}

.match-score-block {
    flex: 0 0 auto; /* Tells the score block to only take exactly the space it needs */
}

.team-name {
    font-size: 1.25rem;
    font-weight: normal;   /* Removes the bold formatting */
    margin-top: 10px;
    margin-bottom: 10px;
    word-wrap: break-word; /* Wraps long names naturally without breaking layout */
}

/* =========================
   MOBILE MATCH HEADER
   ========================= */

@media (max-width: 768px) {
    .match-header {
        gap: 8px; /* Tighter spacing for smaller screens */
    }
    
    .score-big {
        font-size: 28px; /* Slightly scaled down so it fits perfectly on mobile */
    }
    
    .team-logo-large {
        width: 45px;
        height: 45px;
    }
    
    .team-name {
        font-size: 0.95rem; /* Smaller, un-bolded text for mobile */
    }
}

.admin-flow-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.admin-flow-buttons .btn{
    flex:1 1 120px;
}
/* MATCH TABS */

#matchTabs{
    flex-wrap:wrap;
}

#matchTabs .nav-link{
    cursor:pointer;
}

@media (max-width:768px){

    #matchTabs .nav-link{
        font-size:13px;
        padding:6px 10px;
    }

}
@media (max-width:768px){

    #tab-lineup .row{
        gap:20px;
    }

    #tab-lineup .col-md-6{
        width:100%;
    }

}
.goal-line{
    font-size:14px;
    margin-top:4px;
}

@media (max-width:768px){

    .goal-line{
        font-size:13px;
    }

}
@media (max-width:768px){

    .card-body{
        padding:12px;
    }

}

/* =========================
   MATCH FIXTURES & RESULTS (UPDATED)
   ========================= */

.fixture-line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap; /* Force everything on a single line */
    gap: 8px;
    width: 100%;
}

.fixture-team {
    flex: 1; /* Both teams take equal width */
    min-width: 0; /* Critical: allows text truncation inside flex */
    display: flex;
    align-items: center;
    font-weight: normal; /* Ensures team names are NOT bolded */
}

.fixture-team.home {
    justify-content: flex-end;
    text-align: right;
}

.fixture-team.away {
    justify-content: flex-start;
    text-align: left;
}

.team-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.score-or-vs { 
    flex: 0 0 auto; /* Prevent the score from shrinking */
    font-weight: bold; /* Ensures score or 'vs' IS bolded */
    font-size: 1.1rem;
    padding: 0 4px;
}

/* =========================
   STANDINGS TABLE HELPERS (UPDATED)
   ========================= */

.table-team-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    overflow: hidden; /* Prevents long names from breaking the 120px sticky width */
}

/* Ensure sticky columns have a solid background when scrolling,
   matching Bootstrap's striped table logic */
tbody tr .sticky-col {
    background-color: #ffffff;
}
.table-striped tbody tr:nth-of-type(odd) .sticky-col {
    background-color: #f8f9fa; /* Matches bootstrap striped row */
}

/* =========================
   LEAGUE LIST NEW DESIGN (DARK & NEON THEME)
   ========================= */

.league-block {
    max-width: 800px; /* Stops it from getting too wide */
    margin: 0 auto 35px auto; /* The 'auto' magically centers it on the screen */
    
    /* Keep your existing styles below: */
    background-color: #2b2b2b; 
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #444; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.league-title {
    background-color: #333333;
    font-size: 20px;
    margin: 0; /* Removed bottom margin to sit flush with the matches */
    padding: 12px 16px;
    border-bottom: 1px solid #444;
}

/* League title link - replace purple with EsportsLive green */
.league-title a {
    text-decoration: none;
    color: #8bdc1f;
    font-weight: 800;
}

.league-title a:hover {
    color: #b6ff3b;
    text-decoration: none;
}
/* MATCH ROW */
/* Reduce padding on the overall row */
.league-match {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px; /* Reduced top/bottom padding from 16px to 8px */
    border-bottom: 1px solid #444; 
    text-decoration: none;
    color: #ffffff; 
    background: linear-gradient(to right, #16261a 0%, #2b2b2b 40%); 
    transition: all 0.2s ease-in-out;
}

.league-match:hover {
    background: linear-gradient(to right, #1d3323 0%, #363636 40%);
    color: #ffffff;
}

/* TIME / STATUS COLUMN */
.match-time {
    min-width: 95px;
    font-size: 13px;
    color: #d1d5db; /* Light grey for the date/time text */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* THE GLOWING UPCOMING PILL */
.upcoming-indicator .status-text {
    /* 3D dark pill effect */
    background: linear-gradient(to bottom, #4a4a4a, #1f1f1f);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 20px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    /* The neon green border and glowing shadow */
    border-bottom: 2px solid #00ff00;
    box-shadow: 0px 4px 12px -2px rgba(0, 255, 0, 0.6);
    display: inline-block;
    text-transform: capitalize;
}

/* TEAM BLOCK */
.match-teams {
    flex: 1;
}

.team-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px; /* Slightly smaller font looks cleaner */
    padding: 3px 0; /* Reduced padding from 6px to 3px */
    color: #ffffff; 
}

.score {
    font-weight: bold;
    color: #ffffff;
}

/* LIVE MATCH (Bonus: Added a red glow for live matches to match the vibe!) */
.league-match.live .match-time {
    color: #ffffff;
}

.live-indicator {
    background: linear-gradient(to bottom, #4a4a4a, #1f1f1f);
    padding: 6px 20px;
    border-radius: 20px;
    border-bottom: 2px solid #ff3b30;
    box-shadow: 0px 4px 12px -2px rgba(255, 59, 48, 0.6);
    font-weight: 700;
    font-size: 12px;
    display: inline-block;
}

/* RESULTS STYLING */
/* THE GLOWING FULL-TIME (FT) PILL */
.result-indicator .status-text {
    background: linear-gradient(to bottom, #4a4a4a, #1f1f1f);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 16px; /* Slightly tighter padding since 'FT' is a short word */
    border-radius: 20px;
    letter-spacing: 0.5px;
    /* Sleek silver/grey border and shadow for finished games */
    border-bottom: 2px solid #a0a0a0;
    box-shadow: 0px 4px 12px -2px rgba(160, 160, 160, 0.6);
    display: inline-block;
    margin-top: 4px; /* Gives a little breathing room from the date */
}

/* Dimmer text for the date sitting above the FT pill */
.result-indicator {
    color: #888888; 
    font-size: 12px;
    font-weight: 600;
}

/* SEE MORE BUTTON CONTAINER */
.see-more-container {
    margin-top: 0;
    padding: 16px 12px; /* Slightly more padding for a better bottom finish */
    background-color: #2b2b2b;
    text-align: center;
    border-top: 1px solid #444; /* Separates the button from the last match row */
}

/* See More button - replace magenta with green */
.see-more-btn {
    display: inline-block;
    background: linear-gradient(to bottom, #202a24, #0b0f12);
    color: #8bdc1f;
    font-size: 13px;
    font-weight: 800;
    padding: 8px 24px;
    border-radius: 20px;
    text-decoration: none;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid rgba(139, 220, 31, 0.7);
    border-bottom: 2px solid #8bdc1f;
    box-shadow: 0px 4px 15px -3px rgba(139, 220, 31, 0.45);
    transition: all 0.2s ease-in-out;
}

.see-more-btn:hover {
    color: #b6ff3b;
    transform: translateY(-2px);
    box-shadow: 0px 6px 20px -2px rgba(139, 220, 31, 0.65);
    text-decoration: none;
}
.see-more-btn:active {
    transform: translateY(1px); /* Sinks down when clicked */
    box-shadow: 0px 2px 5px rgba(255, 0, 255, 0.4);
}

/* THE 3D SCORE / VS CENTERPIECE */
.score-or-vs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #4a4a4a, #1f1f1f);
    color: #ffcc00; /* Vibrant Gold/Yellow */
    font-weight: 800;
    font-size: 14px;
    padding: 4px 12px;
    min-width: 60px; /* Ensures the box doesn't jump size between 'vs' and '0-0' */
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Golden radiating glow */
    border-bottom: 2px solid #ffcc00;
    box-shadow: 0px 4px 10px -2px rgba(255, 204, 0, 0.5);
    
    /* Keeps it perfectly centered in the row */
    margin: 0 10px; 
}

/* Optional: Make the score slightly bigger than the 'vs' text */
.score-or-vs {
    font-family: 'Courier New', Courier, monospace; /* Optional: gives it a scoreboard feel */
}

/* Target team names specifically inside table rows */
.table .team-name-text {
    font-size: 0.85rem;          /* Slightly smaller than standard (1rem) */
    font-weight: 500;            /* Keeps it readable at smaller sizes */
    letter-spacing: -0.3px;      /* Tighter spacing to fit more letters */
    white-space: nowrap;         /* Prevents name from breaking into two lines */
    overflow: hidden;            /* Ensures it doesn't bleed into next cell */
    text-overflow: ellipsis;     /* Adds "..." if the name is still too long */
    display: inline-block;
    vertical-align: middle;
    max-width: 120px;            /* Limits width so it doesn't push the 'P' column away */
}

/* Adjust for very small screens */
@media (max-width: 480px) {
    .table .team-name-text {
        font-size: 0.75rem;      /* Even smaller for mobile phones */
        max-width: 90px;         /* Shorter limit for small screens */
    }
    
    /* Optional: Reduce padding in the table cells to save more horizontal space */
    .table td, .table th {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* =========================
   MATCH DETAIL STANDINGS FIX ONLY
   ========================= */

.match-standings-wrap {
    width: 100%;
    max-width: 720px;
    margin: 24px auto 0 auto;
}

.standings-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
    white-space: nowrap;
    border-collapse: separate;
    border-spacing: 0;
}

.standings-table th,
.standings-table td {
    padding: 6px 7px;
    text-align: center;
    vertical-align: middle;
}

.standings-table .sticky-col {
    position: sticky;
    z-index: 2;
    background: inherit;
}

.standings-table thead .sticky-col {
    background-color: #212529 !important;
    z-index: 4;
}

.standings-table .col-pos {
    left: 0;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
}

.standings-table .col-team {
    left: 40px;
    width: auto;
    min-width: 170px;
    text-align: left;
    box-shadow: 4px 0 6px -4px rgba(0,0,0,0.12);
}

.standings-table .col-pts {
    right: 0;
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    box-shadow: -4px 0 6px -4px rgba(0,0,0,0.12);
}

.standings-table th:not(.col-pos):not(.col-team):not(.col-pts),
.standings-table td:not(.col-pos):not(.col-team):not(.col-pts) {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
}

.standings-table .table-team-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.standings-table .team-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 18px;
    margin: 0;
}

.standings-table .team-name-text {
    display: block;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standings-table tbody tr .sticky-col {
    background-color: #ffffff;
}

.standings-table.table-striped tbody tr:nth-of-type(odd) .sticky-col {
    background-color: #f8f9fa;
}

.standings-table .team-highlight td {
    background-color: #2365ac !important;
    font-weight: 600;
}

.standings-table .team-highlight .sticky-col {
    background-color: #2365ac !important;
}

@media (max-width: 768px) {
    .match-standings-wrap {
        max-width: 100%;
        margin-top: 18px;
    }

    .standings-table {
        width: max-content !important;
        min-width: 0 !important;
        table-layout: auto;
    }

    .standings-table th,
    .standings-table td {
        padding: 5px 5px;
        font-size: 11px;
    }

    .standings-table .col-pos {
        width: 32px;
        min-width: 32px;
        max-width: 32px;
    }

    .standings-table .col-team {
        left: 32px;
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }

    .standings-table .col-pts {
        width: 40px;
        min-width: 40px;
        max-width: 40px;
    }

    .standings-table .team-logo {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
    }

    .standings-table .team-name-text {
        font-size: 10px;
    }

    .standings-table th:not(.col-pos):not(.col-team):not(.col-pts),
    .standings-table td:not(.col-pos):not(.col-team):not(.col-pts) {
        width: 34px;
        min-width: 34px;
        max-width: 34px;
    }
}

/* =========================
   FORCE EQUAL COLUMN SPACING (LEAGUE STANDINGS)
   ========================= */

.league-block table td:not(.col-pos):not(.col-team):not(.col-pts):not(.col-gd),
.league-block table th:not(.col-pos):not(.col-team):not(.col-pts):not(.col-gd) {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
}

/* Increase horizontal spacing between columns */
.league-block table td,
.league-block table th {
    padding: 8px 16px;
}

/* =========================
   HOMEPAGE HERO BANNER
   ========================= */

.homepage-hero-banner {
    position: relative;
    max-width: 1100px;
    margin: 0 auto 28px auto;
    min-height: 320px;
    border-radius: 18px;
    overflow: hidden;
    background: #111;
    border: 1px solid #333;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.homepage-hero-image {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

.homepage-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.80) 0%,
        rgba(0, 0, 0, 0.55) 45%,
        rgba(0, 0, 0, 0.25) 100%
    );
    z-index: 1;
}

.homepage-hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #ffffff;
}

.homepage-hero-sponsored {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.homepage-hero-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 12px;
    max-width: 650px;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.homepage-hero-subtitle {
    font-size: 1rem;
    max-width: 620px;
    margin-bottom: 18px;
    color: #f0f0f0;
    line-height: 1.5;
}

.homepage-hero-btn {
    display: inline-block;
    background: linear-gradient(to bottom, #4a4a4a, #1f1f1f);
    color: #00ff66;
    font-size: 14px;
    font-weight: 800;
    padding: 10px 22px;
    border-radius: 999px;
    text-decoration: none;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #00ff66;
    box-shadow: 0px 4px 15px -3px rgba(0, 255, 102, 0.45);
    transition: all 0.2s ease-in-out;
}

.homepage-hero-btn:hover {
    color: #66ff99;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0px 6px 20px -2px rgba(0, 255, 102, 0.60);
}

.homepage-hero-logo-wrap {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 14px;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.20);
}

.homepage-hero-logo {
    display: block;
    max-width: 120px;
    max-height: 52px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .homepage-hero-banner {
        min-height: 260px;
        border-radius: 14px;
    }

    .homepage-hero-image {
        height: 260px;
    }

    .homepage-hero-content {
        padding: 22px 18px;
    }

    .homepage-hero-title {
        font-size: 1.55rem;
        max-width: 100%;
    }

    .homepage-hero-subtitle {
        font-size: 0.92rem;
        max-width: 100%;
        margin-bottom: 14px;
    }

    .homepage-hero-btn {
        font-size: 13px;
        padding: 9px 18px;
    }

    .homepage-hero-logo-wrap {
        right: 14px;
        bottom: 14px;
        padding: 8px 10px;
    }

    .homepage-hero-logo {
        max-width: 90px;
        max-height: 40px;
    }
}

/* =========================
   LEAGUE LIST LIGHT/DARK FIX
   ========================= */

/* Light mode */
[data-bs-theme="light"] .league-block,
body:not([data-bs-theme="dark"]) .league-block {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

[data-bs-theme="light"] .league-title,
body:not([data-bs-theme="dark"]) .league-title {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e5e7eb;
}

[data-bs-theme="light"] .league-match,
body:not([data-bs-theme="dark"]) .league-match {
    background: #ffffff;
    color: #212529;
    border-bottom: 1px solid #e9ecef;
}

[data-bs-theme="light"] .league-match:hover,
body:not([data-bs-theme="dark"]) .league-match:hover {
    background: #f8f9fa;
    color: #000000;
}

[data-bs-theme="light"] .see-more-container,
body:not([data-bs-theme="dark"]) .see-more-container {
    background-color: #ffffff;
    border-top: 1px solid #e9ecef;
}

/* Dark mode */
[data-bs-theme="dark"] .league-block {
    background-color: #2b2b2b;
    border: 1px solid #444;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

[data-bs-theme="dark"] .league-title {
    background-color: #333333;
    border-bottom: 1px solid #444;
}

[data-bs-theme="dark"] .league-match {
    background: linear-gradient(to right, #16261a 0%, #2b2b2b 40%);
    color: #ffffff;
    border-bottom: 1px solid #444;
}

[data-bs-theme="dark"] .league-match:hover {
    background: linear-gradient(to right, #1d3323 0%, #363636 40%);
    color: #ffffff;
}

[data-bs-theme="dark"] .see-more-container {
    background-color: #2b2b2b;
    border-top: 1px solid #444;
}

.team-line,
.score {
    color: inherit;
}

/* =========================
   LEAGUE LIST DARK MODE FIX
   ========================= */

body.dark-theme .league-block {
    background-color: #2b2b2b !important;
    border-color: #444 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3) !important;
}

body.dark-theme .league-title {
    background-color: #333333 !important;
    border-bottom-color: #444 !important;
}

body.dark-theme .league-match {
    background: linear-gradient(to right, #16261a 0%, #2b2b2b 40%) !important;
    color: #ffffff !important;
    border-bottom-color: #444 !important;
}

body.dark-theme .league-match:hover {
    background: linear-gradient(to right, #1d3323 0%, #363636 40%) !important;
    color: #ffffff !important;
}

body.dark-theme .team-line,
body.dark-theme .score {
    color: #ffffff !important;
}

body.dark-theme .see-more-container {
    background-color: #2b2b2b !important;
    border-top-color: #444 !important;
}

.esports-brand {
    display: flex;
    align-items: center;
    padding: 0;
}

.esports-brand img {
    height: 46px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .esports-brand img {
        height: 38px;
    }
}
/* =========================
   ESPORTSLIVE MOBILE NAVBAR
   ========================= */

.esports-mobile-navbar {
    background: #071018;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 8px 0;
}

.esports-nav-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
}

.esports-brand-centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    text-decoration: none;
}

.esports-brand-centered img {
    height: 30px;
    width: auto;
    object-fit: contain;
}

.esports-brand-centered .brand-text {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
}

.esports-menu-btn {
    position: absolute;
    left: 0;
    border: none;
    padding: 4px 6px;
    box-shadow: none !important;
}

.esports-menu-btn .navbar-toggler-icon {
    width: 24px;
    height: 24px;
}

.theme-toggle-btn {
    position: absolute;
    right: 0;
}

.esports-collapse {
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    background: #071018;
    padding: 10px 14px;
    border-radius: 0 0 12px 12px;
    z-index: 999;
}

/* Desktop adjustment */
@media (min-width: 992px) {
    .esports-brand-centered img {
        height: 42px;
    }

    .esports-brand-centered .brand-text {
        font-size: 1.2rem;
    }
}
.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 800;
    margin: 22px 0 14px;
}

.section-icon {
    color: #8bdc1f;
    font-size: 1.4rem;
    filter: drop-shadow(0 0 6px rgba(139, 220, 31, 0.7));
}

body:not(.dark-theme) .section-title {
    color: #111827;
}
/* ===============================
   LEAGUE TITLE + PREDICTION BUTTON
   =============================== */

.league-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.league-header-row .league-title {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.league-header-row .league-title a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Fancy prediction button beside league name */
.prediction-title-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    padding: 7px 13px;
    border-radius: 999px;

    background: linear-gradient(135deg, #ff9800, #ff3d00);
    color: #ffffff !important;

    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.4px;

    box-shadow: 0 0 14px rgba(255, 112, 67, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.35);

    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    animation: predictionTitlePulse 1.8s infinite;
}

.prediction-title-btn:hover {
    color: #ffffff !important;
    text-decoration: none;
    transform: translateY(-1px) scale(1.04);
    filter: brightness(1.08);
    box-shadow: 0 0 22px rgba(255, 112, 67, 0.85);
}

@keyframes predictionTitlePulse {
    0% {
        box-shadow: 0 0 9px rgba(255, 112, 67, 0.45);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 112, 67, 0.9);
    }

    100% {
        box-shadow: 0 0 9px rgba(255, 112, 67, 0.45);
    }
}

/* Mobile: keep it neat */
@media (max-width: 600px) {
    .league-header-row {
        padding: 12px 12px 9px;
        gap: 8px;
    }

    .prediction-title-btn {
        padding: 6px 10px;
        font-size: 0.68rem;
    }
}
/* =========================
   LEAGUE DETAIL PAGE FIXES
   Tabs, headings, dark mode text
   ========================= */

:root {
    --esports-green: #8bdc1f;
    --esports-green-bright: #b6ff3b;
    --esports-dark-card: #1d1d1d;
    --esports-dark-border: #343434;
    --esports-muted-dark: #b7c0cc;
}

/* League season text */
.league-season {
    color: #6c757d;
    font-size: 0.95rem;
}

body.dark-theme .league-season,
[data-bs-theme="dark"] .league-season {
    color: var(--esports-muted-dark) !important;
}

/* Replace purple section headings */
.league-section-heading,
.league-tab-content > h4 {
    color: var(--esports-green);
    text-align: center;
    font-weight: 800;
    text-shadow: 0 0 8px rgba(139, 220, 31, 0.25);
}

/* Match links should inherit theme color instead of forcing text-dark */
.league-match-link {
    color: inherit;
}

.league-match-link:hover {
    color: inherit;
}

/* Make Bootstrap muted text visible in dark mode on league detail */
body.dark-theme .league-tab-content .text-muted,
[data-bs-theme="dark"] .league-tab-content .text-muted {
    color: var(--esports-muted-dark) !important;
}

/* Card text in dark mode */
body.dark-theme .league-tab-content .card,
[data-bs-theme="dark"] .league-tab-content .card {
    background-color: var(--esports-dark-card);
    border-color: var(--esports-dark-border);
    color: #ffffff;
}

body.dark-theme .league-tab-content .card-body,
[data-bs-theme="dark"] .league-tab-content .card-body {
    color: #ffffff;
}

body.dark-theme .league-tab-content p,
[data-bs-theme="dark"] .league-tab-content p {
    color: #ffffff;
}

/* Match item dark mode */
body.dark-theme .match-item,
[data-bs-theme="dark"] .match-item {
    background-color: #1f1f1f;
    border-color: #383838;
    color: #ffffff;
}

body.dark-theme .match-item:hover,
[data-bs-theme="dark"] .match-item:hover {
    background-color: #262626;
    border-color: #4a4a4a;
}

body.dark-theme .team-name-text,
[data-bs-theme="dark"] .team-name-text {
    color: #ffffff;
}

/* =========================
   LEAGUE DETAIL TABS
   ========================= */

/* Override the old global .nav-tabs background:white */
#leagueTabs.nav-tabs {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 6px;
    background: #ffffff;
    border-bottom: 1px solid #dee2e6;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#leagueTabs .nav-item {
    flex: 0 0 auto;
}

#leagueTabs .nav-link {
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0d6efd;
    background: transparent;
    white-space: nowrap;
}

#leagueTabs .nav-link:hover {
    color: #0a58ca;
    background: rgba(13, 110, 253, 0.08);
}

#leagueTabs .nav-link.active {
    color: #111827;
    background: #ffffff;
    border-color: #dee2e6;
    border-bottom: 3px solid var(--esports-green);
}

/* Dark mode tabs */
body.dark-theme #leagueTabs.nav-tabs,
[data-bs-theme="dark"] #leagueTabs.nav-tabs {
    background: #111111 !important;
    border: 1px solid #2f2f2f;
    border-radius: 8px;
}

body.dark-theme #leagueTabs .nav-link,
[data-bs-theme="dark"] #leagueTabs .nav-link {
    color: #e5e7eb;
    background: #1b1b1b;
    border-color: #333333;
}

body.dark-theme #leagueTabs .nav-link:hover,
[data-bs-theme="dark"] #leagueTabs .nav-link:hover {
    color: var(--esports-green-bright);
    background: #242424;
    border-color: rgba(139, 220, 31, 0.45);
}

body.dark-theme #leagueTabs .nav-link.active,
[data-bs-theme="dark"] #leagueTabs .nav-link.active {
    color: var(--esports-green-bright);
    background: #202a24;
    border-color: rgba(139, 220, 31, 0.75);
    border-bottom: 3px solid var(--esports-green);
    box-shadow: 0 0 12px rgba(139, 220, 31, 0.18);
}

/* Mobile tab polish */
@media (max-width: 768px) {
    #leagueTabs.nav-tabs {
        gap: 5px;
        padding: 6px;
    }

    #leagueTabs .nav-link {
        font-size: 0.78rem;
        padding: 7px 10px;
    }
}
/* =========================
   LEAGUE DETAIL STANDINGS DARK MODE FIX
   Applies to overview standings + standings tab
   ========================= */

body.dark-theme .league-block .table,
[data-bs-theme="dark"] .league-block .table {
    --bs-table-bg: #161616;
    --bs-table-color: #f8fafc;
    --bs-table-striped-bg: #202020;
    --bs-table-striped-color: #f8fafc;
    --bs-table-hover-bg: #26321f;
    --bs-table-hover-color: #ffffff;

    background-color: #161616 !important;
    color: #f8fafc !important;
}

body.dark-theme .league-block .table tbody tr,
[data-bs-theme="dark"] .league-block .table tbody tr {
    background-color: #161616 !important;
    color: #f8fafc !important;
}

body.dark-theme .league-block .table-striped tbody tr:nth-of-type(odd),
[data-bs-theme="dark"] .league-block .table-striped tbody tr:nth-of-type(odd) {
    background-color: #202020 !important;
    color: #f8fafc !important;
}

body.dark-theme .league-block .table td,
body.dark-theme .league-block .table th,
[data-bs-theme="dark"] .league-block .table td,
[data-bs-theme="dark"] .league-block .table th {
    color: #f8fafc !important;
    border-color: #333333 !important;
}

/* Fix sticky columns that were staying white */
body.dark-theme .league-block .table tbody tr .sticky-col,
[data-bs-theme="dark"] .league-block .table tbody tr .sticky-col {
    background-color: #161616 !important;
    color: #f8fafc !important;
}

body.dark-theme .league-block .table-striped tbody tr:nth-of-type(odd) .sticky-col,
[data-bs-theme="dark"] .league-block .table-striped tbody tr:nth-of-type(odd) .sticky-col {
    background-color: #202020 !important;
    color: #f8fafc !important;
}

/* Keep table header dark */
body.dark-theme .league-block .table thead th,
body.dark-theme .league-block .table thead .sticky-col,
[data-bs-theme="dark"] .league-block .table thead th,
[data-bs-theme="dark"] .league-block .table thead .sticky-col {
    background-color: #111827 !important;
    color: #ffffff !important;
}

/* Team names inside standings */
body.dark-theme .league-block .table .team-name-text,
[data-bs-theme="dark"] .league-block .table .team-name-text {
    color: #ffffff !important;
}

/* Points column should stay clear and strong */
body.dark-theme .league-block .table .col-pts,
[data-bs-theme="dark"] .league-block .table .col-pts {
    color: #ffffff !important;
    font-weight: 800;
}

/* See more buttons for overview sections */
.league-see-more-btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(to bottom, #4a4a4a, #1f1f1f);
    color: #8bdc1f !important;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    border: none;
    border-bottom: 2px solid #8bdc1f;
    box-shadow: 0 4px 14px rgba(139, 220, 31, 0.35);
    transition: all 0.2s ease-in-out;
}

.league-see-more-btn:hover {
    color: #b6ff3b !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(139, 220, 31, 0.55);
    text-decoration: none;
}
/* =========================
   OVERVIEW STATS TABLE DARK MODE FIX
   ========================= */

.league-stats-block {
    max-width: 800px;
    margin: 0 auto 35px auto;
}

.league-stats-table {
    margin-bottom: 0;
}

/* Light mode */
.league-stats-table td,
.league-stats-table th {
    color: #111827;
}

/* Dark mode */
body.dark-theme .league-stats-table,
[data-bs-theme="dark"] .league-stats-table {
    --bs-table-bg: #161616;
    --bs-table-color: #f8fafc;
    --bs-table-striped-bg: #202020;
    --bs-table-striped-color: #f8fafc;
    --bs-table-hover-bg: #26321f;
    --bs-table-hover-color: #ffffff;

    background-color: #161616 !important;
    color: #f8fafc !important;
}

body.dark-theme .league-stats-table tbody tr,
[data-bs-theme="dark"] .league-stats-table tbody tr {
    background-color: #161616 !important;
    color: #f8fafc !important;
}

body.dark-theme .league-stats-table.table-striped tbody tr:nth-of-type(odd),
[data-bs-theme="dark"] .league-stats-table.table-striped tbody tr:nth-of-type(odd) {
    background-color: #202020 !important;
    color: #f8fafc !important;
}

body.dark-theme .league-stats-table td,
body.dark-theme .league-stats-table th,
[data-bs-theme="dark"] .league-stats-table td,
[data-bs-theme="dark"] .league-stats-table th {
    color: #f8fafc !important;
    border-color: #333333 !important;
}

body.dark-theme .league-stats-table thead th,
[data-bs-theme="dark"] .league-stats-table thead th {
    background-color: #111827 !important;
    color: #ffffff !important;
}

body.dark-theme .league-stats-table .team-name-text,
[data-bs-theme="dark"] .league-stats-table .team-name-text {
    color: #ffffff !important;
}

/* Make empty message visible in both modes */
.league-stats-table td.text-center {
    font-weight: 600;
}

body.dark-theme .league-stats-table td.text-center,
[data-bs-theme="dark"] .league-stats-table td.text-center {
    color: #d1d5db !important;
}

/* =========================
   MOBILE-FRIENDLY TOP SCORERS TABLE
   ========================= */

.mobile-player-stats-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed;
}

.mobile-player-stats-table th,
.mobile-player-stats-table td {
    vertical-align: middle;
}

.mobile-player-stats-table .stats-rank-col {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    text-align: center;
}

.mobile-player-stats-table .stats-goals-col {
    width: 58px;
    min-width: 58px;
    max-width: 58px;
    text-align: center;
    font-weight: 800;
}

.mobile-player-stats-table .stats-player-col {
    width: auto;
    text-align: left;
    overflow: hidden;
}

.player-stat-info {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    width: 100%;
}

.player-stat-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex: 0 0 30px;
}

.player-stat-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    width: 100%;
    line-height: 1.15;
}

.player-stat-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 0.95rem;
    font-weight: 800;
    color: #111827;
}

.player-stat-team {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 0.72rem;
    font-weight: 500;
    color: #6b7280;
}

/* Dark mode */
body.dark-theme .player-stat-name,
[data-bs-theme="dark"] .player-stat-name {
    color: #ffffff !important;
}

body.dark-theme .player-stat-team,
[data-bs-theme="dark"] .player-stat-team {
    color: #b7c0cc !important;
}

/* Make rows feel closer to LiveScore style */
.mobile-player-stats-table tbody tr {
    height: 52px;
}

body.dark-theme .mobile-player-stats-table tbody tr,
[data-bs-theme="dark"] .mobile-player-stats-table tbody tr {
    border-bottom: 1px solid #2f2f2f;
}

/* Mobile tightening */
@media (max-width: 480px) {
    .mobile-player-stats-table th,
    .mobile-player-stats-table td {
        padding: 8px 6px !important;
    }

    .mobile-player-stats-table .stats-rank-col {
        width: 34px;
        min-width: 34px;
        max-width: 34px;
        font-size: 0.78rem;
    }

    .mobile-player-stats-table .stats-goals-col {
        width: 48px;
        min-width: 48px;
        max-width: 48px;
        font-size: 0.78rem;
    }

    .player-stat-info {
        gap: 7px;
    }

    .player-stat-logo {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }

    .player-stat-name {
        font-size: 0.82rem;
    }

    .player-stat-team {
        font-size: 0.66rem;
    }
}
.league-section-label {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 10px 0 8px;
    color: #f8f9fa;
}

body.light-mode .league-section-label {
    color: #333;
}
/* League list section label: Today's Matches / Upcoming Fixtures / Latest Results */
.league-section-label {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 10px 0 8px;
    color: #111827; /* black-ish for light mode */
}

/* Dark mode */
body.dark-mode .league-section-label,
html.dark-mode .league-section-label {
    color: #f8fafc;
}
/* Match date/time text in light mode */
.match-time {
    color: #111827;
    font-weight: 600;
}

/* Slightly softer but still readable in dark mode */
body.dark-mode .match-time,
html.dark-mode .match-time {
    color: #cbd5e1;
}

/* Keep status badges readable */
.status-text {
    font-weight: 700;
}
body:not(.dark-mode) .result-indicator,
body:not(.dark-mode) .upcoming-indicator,
body:not(.dark-mode) .match-time {
    color: #111827 !important;
}
/* ==============================
   League list light/dark fixes
   ============================== */

.league-section-label {
    font-size: 0.85rem;
    font-weight: 700;
    margin: 10px 0 8px;
    color: #111827;
}

.match-time {
    color: #111827;
    font-weight: 600;
}

.status-text {
    font-weight: 700;
}

/* Dark mode support */
html.dark-mode,
html.dark-mode body,
body.dark-mode {
    background-color: #121212;
    color: #f8fafc;
}

html.dark-mode .league-section-label,
body.dark-mode .league-section-label {
    color: #f8fafc;
}

html.dark-mode .match-time,
body.dark-mode .match-time {
    color: #cbd5e1;
}

/* Strong light-mode override */
body:not(.dark-mode) .league-section-label,
html:not(.dark-mode) .league-section-label {
    color: #111827 !important;
}

body:not(.dark-mode) .match-time,
html:not(.dark-mode) .match-time,
body:not(.dark-mode) .result-indicator,
body:not(.dark-mode) .upcoming-indicator {
    color: #111827 !important;
}
/* ==============================
   League list light mode fixes
   ============================== */

html.light-theme .league-block,
body.light-theme .league-block {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

html.light-theme .league-header-row,
body.light-theme .league-header-row {
    background-color: #f8f9fa !important;
    color: #111827 !important;
}

html.light-theme .league-match,
body.light-theme .league-match {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

html.light-theme .league-section-label,
body.light-theme .league-section-label {
    color: #111827 !important;
}

html.light-theme .match-time,
body.light-theme .match-time,
html.light-theme .result-indicator,
body.light-theme .result-indicator,
html.light-theme .upcoming-indicator,
body.light-theme .upcoming-indicator {
    color: #111827 !important;
}

html.light-theme .team-info span,
body.light-theme .team-info span,
html.light-theme .score,
body.light-theme .score {
    color: #111827 !important;
}
/* ==============================
   League list dark mode fixes
   ============================== */

html.dark-theme .league-block,
body.dark-theme .league-block {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #333 !important;
}

html.dark-theme .league-header-row,
body.dark-theme .league-header-row {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}

html.dark-theme .league-match,
body.dark-theme .league-match {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border-color: #333 !important;
}

html.dark-theme .league-section-label,
body.dark-theme .league-section-label {
    color: #f8fafc !important;
}

html.dark-theme .match-time,
body.dark-theme .match-time {
    color: #cbd5e1 !important;
}

html.dark-theme .team-info span,
body.dark-theme .team-info span,
html.dark-theme .score,
body.dark-theme .score {
    color: #ffffff !important;
}