/* Fix for Goals Section, Standings Tables, and Scorers Section Overlap Issues */

/* ============================================
   CRITICAL FIXES - PREVENT TAB OVERLAP
   ============================================ */

/* Fix for main tab containers to prevent overlap */
.Team-Buttons,
.STING-WEB-Event-Toggle,
.nav-tabs-wrapper,
.tabs-container {
    position: relative !important;
    z-index: 100 !important;
    margin-bottom: 30px !important;
    padding-bottom: 10px !important;
    background: transparent !important;
}

/* Ensure tab buttons don't overlap content */
.Team-Button,
.STING-WEB-Toggle-Event-Button,
button[onclick*="showSection"],
button[onclick*="filterEvents"] {
    position: relative !important;
    z-index: 101 !important;
    margin-bottom: 5px !important;
}

/* Fix for content sections below tabs */
.STING-WEB-Hadafin,
.STING-WEB-Feraq,
.STING-WEB-Statistics,
.STING-WEB-Team,
.STING-WEB-H2H,
.STING-WEB-Match-Events,
.fade {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    clear: both !important;
}

/* ============================================
   GENERAL FIXES FOR OVERLAP PREVENTION
   ============================================ */

/* Ensure proper spacing and prevent overlap in goals/scorers section */
.STING-WEB-Hadafin,
.STING-WEB-Feraq,
.scorers-section,
.goals-section,
.standings-section,
.league-standings {
    position: relative;
    z-index: 1;
    clear: both;
    overflow: visible;
    margin-bottom: 20px;
    margin-top: 30px;
    padding-top: 20px;
}

/* ============================================
   SCORERS SECTION FIXES
   ============================================ */

/* Fix for tabs in scorers section */
.STING-WEB-Scorers-Tab-Container {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px;
    background: var(--B-Color);
    border-radius: 12px;
    z-index: 10;
    position: relative;
}

.STING-WEB-Scorers-Tab {
    padding: 10px 20px !important;
    border-radius: 8px !important;
    background: var(--C-Color) !important;
    color: var(--Primary-B-Color) !important;
    border: 1px solid var(--Primary-D-Color) !important;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 700 !important;
    font-size: 14px !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.STING-WEB-Scorers-Tab:hover {
    background: rgba(227, 30, 36, 0.1) !important;
    border-color: var(--Primary-A-Color) !important;
}

.STING-WEB-Scorers-Tab.active {
    background: var(--Primary-A-Color) !important;
    color: #fff !important;
    border-color: var(--Primary-A-Color) !important;
}

/* Fix for scorers table/list */
.scorers-list,
.scorers-table,
.STING-WEB-Scorers-List {
    width: 100%;
    margin-top: 20px;
    clear: both;
    position: relative;
    z-index: 1;
}

/* Ensure proper spacing between elements */
.scorer-item,
.scorer-row,
.STING-WEB-Scorer-Row {
    margin-bottom: 15px;
    padding: 15px;
    background: var(--C-Color);
    border-radius: 12px;
    border: 1px solid var(--Primary-D-Color);
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 1;
}

/* Fix for player images in scorers section */
.scorer-player-image,
.STING-WEB-Player-Image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Fix for player info */
.scorer-player-info,
.STING-WEB-Player-Info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.scorer-player-name,
.STING-WEB-Player-Name {
    font-size: 16px;
    font-weight: 700;
    color: var(--Primary-B-Color);
}

.scorer-player-team,
.STING-WEB-Player-Team {
    font-size: 13px;
    color: var(--Primary-C-Color);
}

/* Fix for stats display */
.scorer-stats,
.STING-WEB-Scorer-Stats {
    display: flex;
    gap: 20px;
    align-items: center;
}

.scorer-stat-item,
.STING-WEB-Stat-Item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.scorer-stat-value,
.STING-WEB-Stat-Value {
    font-size: 20px;
    font-weight: 800;
    color: var(--Primary-A-Color);
}

.scorer-stat-label,
.STING-WEB-Stat-Label {
    font-size: 11px;
    color: var(--Primary-C-Color);
    text-transform: uppercase;
}

/* ============================================
   STANDINGS TABLE FIXES
   ============================================ */

/* Fix for standings tabs */
.standings-tabs,
.STING-WEB-Standings-Tabs {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px;
    background: var(--B-Color);
    border-radius: 12px;
    z-index: 10;
    position: relative;
}

.standings-tab,
.STING-WEB-Standings-Tab {
    padding: 10px 20px !important;
    border-radius: 8px !important;
    background: var(--C-Color) !important;
    color: var(--Primary-B-Color) !important;
    border: 1px solid var(--Primary-D-Color) !important;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 700 !important;
    font-size: 14px !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.standings-tab:hover,
.STING-WEB-Standings-Tab:hover {
    background: rgba(227, 30, 36, 0.1) !important;
    border-color: var(--Primary-A-Color) !important;
}

.standings-tab.active,
.STING-WEB-Standings-Tab.active {
    background: var(--Primary-A-Color) !important;
    color: #fff !important;
    border-color: var(--Primary-A-Color) !important;
}

/* Fix for standings table */
.standings-table,
.STING-WEB-Standings-Table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 20px;
    background: var(--B-Color);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.standings-table thead,
.STING-WEB-Standings-Table thead {
    background: var(--Primary-A-Color);
    color: #fff;
    position: relative;
    z-index: 2;
}

.standings-table th,
.STING-WEB-Standings-Table th {
    padding: 15px 10px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.standings-table tbody tr,
.STING-WEB-Standings-Table tbody tr {
    background: var(--C-Color);
    border-bottom: 1px solid var(--Primary-D-Color);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.standings-table tbody tr:hover,
.STING-WEB-Standings-Table tbody tr:hover {
    background: rgba(227, 30, 36, 0.05);
    transform: translateX(5px);
}

.standings-table td,
.STING-WEB-Standings-Table td {
    padding: 12px 10px;
    text-align: center;
    font-size: 14px;
    color: var(--Primary-B-Color);
}

/* Team logo in standings */
.standings-team-logo,
.STING-WEB-Team-Logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    margin-right: 10px;
    vertical-align: middle;
}

/* Team name in standings */
.standings-team-name,
.STING-WEB-Team-Name {
    font-weight: 700;
    color: var(--Primary-B-Color);
    text-align: right;
    padding-right: 10px;
}

/* Position number */
.standings-position,
.STING-WEB-Position {
    font-weight: 800;
    color: var(--Primary-A-Color);
    font-size: 16px;
}

/* Highlight top positions */
.standings-table tbody tr:nth-child(1) .standings-position,
.standings-table tbody tr:nth-child(2) .standings-position,
.standings-table tbody tr:nth-child(3) .standings-position,
.standings-table tbody tr:nth-child(4) .standings-position {
    color: #27ae60;
}

/* Relegation zone */
.standings-table tbody tr:nth-last-child(1) .standings-position,
.standings-table tbody tr:nth-last-child(2) .standings-position,
.standings-table tbody tr:nth-last-child(3) .standings-position {
    color: #e74c3c;
}

/* ============================================
   MOBILE RESPONSIVE FIXES
   ============================================ */

@media (max-width: 768px) {

    .STING-WEB-Scorers-Tab-Container,
    .standings-tabs,
    .STING-WEB-Standings-Tabs {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .STING-WEB-Scorers-Tab-Container::-webkit-scrollbar,
    .standings-tabs::-webkit-scrollbar,
    .STING-WEB-Standings-Tabs::-webkit-scrollbar {
        display: none;
    }

    .scorer-item,
    .scorer-row,
    .STING-WEB-Scorer-Row {
        flex-direction: column;
        text-align: center;
    }

    .scorer-stats,
    .STING-WEB-Scorer-Stats {
        width: 100%;
        justify-content: space-around;
    }

    /* Make standings table scrollable on mobile */
    .standings-table,
    .STING-WEB-Standings-Table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .standings-table thead,
    .standings-table tbody,
    .standings-table tr,
    .STING-WEB-Standings-Table thead,
    .STING-WEB-Standings-Table tbody,
    .STING-WEB-Standings-Table tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .standings-table th,
    .standings-table td,
    .STING-WEB-Standings-Table th,
    .STING-WEB-Standings-Table td {
        font-size: 12px;
        padding: 8px 5px;
    }

    .standings-team-logo,
    .STING-WEB-Team-Logo {
        width: 20px;
        height: 20px;
    }
}

/* ============================================
   GENERAL OVERLAP PREVENTION
   ============================================ */

/* Fix for any absolute positioned elements that might overlap */
.STING-WEB-Hadafin *,
.STING-WEB-Feraq *,
.scorers-section *,
.standings-section * {
    position: relative;
}

/* Ensure proper stacking context */
.STING-WEB-Hadafin,
.STING-WEB-Feraq,
.scorers-section,
.standings-section {
    isolation: isolate;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

body.dark-mode .scorer-item,
body.dark-mode .scorer-row,
body.dark-mode .STING-WEB-Scorer-Row {
    background: var(--Dark-B-Color);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .STING-WEB-Scorers-Tab,
body.dark-mode .standings-tab,
body.dark-mode .STING-WEB-Standings-Tab {
    background: var(--Dark-B-Color) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .STING-WEB-Scorers-Tab.active,
body.dark-mode .standings-tab.active,
body.dark-mode .STING-WEB-Standings-Tab.active {
    background: var(--Primary-A-Color) !important;
    color: #fff !important;
}

body.dark-mode .standings-table,
body.dark-mode .STING-WEB-Standings-Table {
    background: var(--Dark-B-Color);
}

body.dark-mode .standings-table tbody tr,
body.dark-mode .STING-WEB-Standings-Table tbody tr {
    background: var(--Dark-B-Color);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .standings-table tbody tr:hover,
body.dark-mode .STING-WEB-Standings-Table tbody tr:hover {
    background: rgba(227, 30, 36, 0.1);
}

body.dark-mode .standings-table td,
body.dark-mode .STING-WEB-Standings-Table td,
body.dark-mode .standings-team-name,
body.dark-mode .STING-WEB-Team-Name {
    color: #fff;
}

/* ============================================
   ADDITIONAL FIXES
   ============================================ */

/* Ensure tables don't overflow their containers */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 1;
}

/* Fix for group stages in standings */
.standings-group-header {
    background: var(--Primary-A-Color);
    color: #fff;
    padding: 10px 15px;
    font-weight: 700;
    font-size: 14px;
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Fix for empty states */
.no-data-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--Primary-C-Color);
    font-size: 14px;
}

/* Smooth transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}