/* Custom CSS fixes for Pickleball Matches Display */

/* Fix for team standings table layout */
/* Remove flex display to ensure proper column alignment */
.standings-table thead tr,
.standings-table tbody tr {
    display: table-row;
}

/* Reset any order properties */
.standings-table th,
.standings-table td {
    order: initial;
}

/* Rank column - first column */
.standings-table th:nth-child(1),
.standings-table td:nth-child(1) {
    width: 60px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

/* Team column - second column */
.standings-table th:nth-child(2) {
    text-align: left;
    padding-left: 10px;
}

.standings-table td:nth-child(2) {
    text-align: left;
    padding-left: 10px;
    width: auto;
}

/* Wins column - third column */
.standings-table th:nth-child(3),
.standings-table td:nth-child(3) {
    width: 60px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bold;
}

/* Ensure proper spacing between columns */
.standings-table th,
.standings-table td {
    padding: 8px 12px;
}

/* SINGLE .vs rule for regular matches */
.vs {
    position: relative;
    width: 30px !important;
    text-align: center;
    font-weight: bold;
    z-index: 10;
    padding: 0;
    background: transparent;
    vertical-align: middle;
}

/* SINGLE .vs::before rule - SVG only */
.vs::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('v-graphic.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Match table styling */
.match-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: var(--base-font-size, 16px);
    border-spacing: 0;
}

/* Team cell styling for regular matches - CLEAN APPROACH */
.match-table .team-cell {
    width: 45%;
    position: relative;
    padding: 10px 5px;
    border-radius: 0;
    cursor: pointer;
}

.match-table .team-cell.team-left {
    text-align: left !important;
    padding-right: 0;
}

.match-table .team-cell.team-right {
    text-align: right !important;
    padding-left: 0;
}

/* Extend colors to center - remove white gap */
.match-table .team-left.winner:after {
    content: '';
    position: absolute;
    top: 0;
    right: -20px;
    bottom: 0;
    width: 20px;
    background-color: var(--win-background-color, #90EE90);
    z-index: 1;
}

.match-table .team-left.loser:after {
    content: '';
    position: absolute;
    top: 0;
    right: -20px;
    bottom: 0;
    width: 20px;
    background-color: var(--loss-background-color, #FFB6C1);
    z-index: 1;
}

.match-table .team-right.winner:after {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    bottom: 0;
    width: 20px;
    background-color: var(--win-background-color, #90EE90);
    z-index: 1;
}

.match-table .team-right.loser:after {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    bottom: 0;
    width: 20px;
    background-color: var(--loss-background-color, #FFB6C1);
    z-index: 1;
}

/* Winner and Loser styling */
.match-table .team-cell.winner {
    background-color: var(--win-background-color, #90EE90) !important;
    font-weight: bold;
}

.match-table .team-cell.loser {
    background-color: var(--loss-background-color, #FFB6C1) !important;
}

/* Player name styling - FIXED to match admin page */
.match-table .player-name {
    display: inline-block;
    padding: 3px 5px;
    background-color: var(--player-name-background-color, #f0f0f0);
    color: var(--player-name-text-color, #333333);
    margin: 0;
    margin-bottom: 5px;
    border-radius: 3px;
    width: auto;
    max-width: 100%;
}

.match-table .team-cell.winner .player-name,
.match-table .team-cell.loser .player-name {
    background-color: rgba(255, 255, 255, 0.7);
}

/* Table cell styling */
.match-table td {
    padding: 10px 5px;
    vertical-align: middle;
    border: none;
}

.match-table tr {
    border-bottom: 1px solid var(--table-border-color, #dddddd);
}

/* FIXED: Purple highlight ONLY for player name rectangles */
.match-table .player-name.highlight {
    background-color: var(--highlight-color, #AE308F) !important;
    color: var(--highlight-text-color, white) !important;
    z-index: 20 !important;
    position: relative !important;
    opacity: 1 !important;
}

/* Ensure highlight overrides winner/loser styles for player names only */
.match-table .team-cell.winner .player-name.highlight,
.match-table .team-cell.loser .player-name.highlight {
    background-color: var(--highlight-color, #AE308F) !important;
    color: var(--highlight-text-color, white) !important;
    z-index: 20 !important;
    opacity: 1 !important;
}

/* FIXED: Purple highlight with maximum priority - no white override */
.match-table .player-name.highlight {
    background-color: var(--highlight-color, #AE308F) !important;
    color: var(--highlight-text-color, white) !important;
    z-index: 100 !important;
    position: relative !important;
    opacity: 1 !important;
}

/* CRITICAL: Ensure highlight completely overrides ALL other backgrounds */
.match-table .team-cell.winner .player-name.highlight,
.match-table .team-cell.loser .player-name.highlight {
    background-color: var(--highlight-color, #AE308F) !important;
    color: var(--highlight-text-color, white) !important;
    z-index: 100 !important;
    opacity: 1 !important;
}

/* CRITICAL: Remove the white semi-transparent background for highlighted players */
.match-table .team-cell.winner .player-name.highlight,
.match-table .team-cell.loser .player-name.highlight {
    background-color: var(--highlight-color, #AE308F) !important; /* Solid purple, override the rgba(255, 255, 255, 0.7) */
}

/* Remove any cell-level highlighting */
.match-table td.highlight,
.match-table .team-cell.highlight {
    background-color: inherit !important;
}

/* Player menu styling */
.player-menu-button {
    background-color: var(--button-color, #20B599);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: var(--button-font-size, 16px);
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px;
    font-weight: bold;
}

.player-menu-button:hover {
    background-color: var(--button-hover-color, #1a9d85);
}

#playerMenu {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.8) !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

.player-menu-content {
    background-color: white !important;
    background: white !important;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    border-radius: 10px;
    position: relative;
    color: #333333 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.player-menu-content h2 {
    color: #333333 !important;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
}

.player-group h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #333333 !important;
}

.player-name-button {
    display: inline-block;
    margin: 5px;
    padding: 8px 12px;
    background-color: #f0f0f0 !important;
    background: #f0f0f0 !important;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: #333333 !important;
}

.player-name-button:hover {
    background-color: #e0e0e0;
}

.player-name-button.selected {
    background-color: #AE308F !important;
    color: white !important;
}

.close-menu {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 20px;
}

.player-group h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: var(--menu-header-font-size, 18px);
    font-weight: bold;
    color: #333333 !important;
}

.player-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Enhanced mobile Safari and mobile browser fixes */
/* Force dark overlay on all mobile browsers */
@media screen and (max-width: 768px) {
    #playerMenu {
        background: rgba(0, 0, 0, 0.9) !important;
        background-color: rgba(0, 0, 0, 0.9) !important;
    }
}

/* Specific targeting for WebKit mobile browsers */
@media screen and (-webkit-min-device-pixel-ratio: 1) {
    #playerMenu {
        background: rgba(0, 0, 0, 0.9) !important;
        background-color: rgba(0, 0, 0, 0.9) !important;
    }
    
    .player-menu-content {
        background-color: white !important;
        background: white !important;
    }
    
    .player-name-button {
        background-color: #f0f0f0 !important;
        background: #f0f0f0 !important;
    }
}

/* Additional mobile browser targeting */
@media screen and (max-device-width: 812px) {
    #playerMenu {
        background: rgba(0, 0, 0, 0.95) !important;
        background-color: rgba(0, 0, 0, 0.95) !important;
    }
}

/* Chrome mobile specific */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    #playerMenu {
        background: rgba(0, 0, 0, 0.95) !important;
        background-color: rgba(0, 0, 0, 0.95) !important;
    }
}

/* Touch device targeting */
@media (hover: none) and (pointer: coarse) {
    #playerMenu {
        background: rgba(0, 0, 0, 0.95) !important;
        background-color: rgba(0, 0, 0, 0.95) !important;
    }
}

/* Mobile responsive */
@media screen and (max-width: 600px) {
    .match-table td {
        padding: 6px;
        font-size: 0.9em;
    }
    
    .match-table .player-name {
        padding: 3px;
        margin-bottom: 3px;
    }
    
    .match-table td.team-cell.team-left {
        text-align: left !important;
    }
    
    .match-table td.team-cell.team-right {
        text-align: right !important;
    }
}