/* General body styling */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 0;
    padding-bottom: 50px; /* Space for footer */
    color: #333;
}

/* Page container */
h1 {
    text-align: center;
    color: #444;
    margin-top: 20px;
}

/* Header styling */
.header-container {
    display: grid;
    text-align: center;
}

/* Navigation Dropdown */
.navigation-dropdown {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.navigation-dropdown label {
    font-size: 16px;
    margin-right: 10px;
}

.navigation-dropdown select {
    font-size: 16px;
    padding: 5px;
}

#navigation-select {
    height: 30px;
    display: inline-block;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Align dropdown and button horizontally */
.dropdown-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

/* Center the admin content directly below the header */
.center-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-top: 20px;
    text-align: center;
    width: 100%;
}

/* Admin team edit row */
.team-edit-row {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.team-edit-row label {
    min-width: 80px;
}

.team-edit-row .team-name-input {
    width: 200px;
    max-width: 200px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Main container layout */
.main-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 columns for layout */
    gap: 20px;
    padding: 10px 20px 20px 20px;
}

#tables-container,
#groups-container {
    grid-column: 2 / 5; /* Groups take up columns 2-5 */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 columns for groups */
    gap: 20px;
    padding: 20px;
    justify-content: center; /* Center the columns horizontally */
}

/* Third Place Teams Container */
#third-place-standings-container {
    grid-column: 2 / 6; /* Match fixtures container alignment - columns 2-6 */
    margin: 30px 0;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#third-place-standings-container h2 {
    text-align: center;
    color: #444;
    margin-bottom: 10px;
}

.third-place-info {
    text-align: center;
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
}

#third-place-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

#third-place-table thead {
    background-color: #4CAF50;
    color: black;
}

#third-place-table th,
#third-place-table td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
}

#third-place-table tbody tr:nth-child(-n+8) {
    background-color: #e8f5e9; /* Highlight top 8 qualified teams */
}

#third-place-table tbody tr:hover {
    background-color: #f5f5f5;
}

/* Highlight assigned team */
.assigned-team-highlight {
    background-color: #fff3cd !important; /* Light yellow highlight */
    border-left: 4px solid #ffc107 !important; /* Yellow left border */
}

.assigned-team-highlight:hover {
    background-color: #ffe69c !important; /* Slightly darker on hover */
}

/* Highlight advancing teams (top 2 in group) */
.advancing-team {
    background-color: #d4edda !important; /* Light green */
    border-left: 4px solid #28a745 !important; /* Green left border */
}

.advancing-team:hover {
    background-color: #c3e6cb !important; /* Slightly darker green on hover */
}

/* Highlight 3rd place team (potential advancement) */
.third-place-team {
    background-color: #ffe0b2 !important; /* Light orange */
    border-left: 4px solid #ff9800 !important; /* Orange left border */
}

.third-place-team:hover {
    background-color: #ffcc80 !important; /* Darker orange on hover */
}

/* Ensure assigned team highlight takes priority */
.assigned-team-highlight.advancing-team {
    background: linear-gradient(to right, #fff3cd 0%, #d4edda 100%) !important;
    border-left: 4px solid #ffc107 !important;
}

.assigned-team-highlight.third-place-team {
    background-color: #fff3cd !important;
    border-left: 4px solid #ffc107 !important;
}

#third-place-table .team-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#third-place-table .fi {
    border: 2px solid #ccc;
    border-radius: 4px;
}

/* Fixtures container layout */
#fixtures-container {
    grid-column: 1 / span 5; /* Fixtures take up columns 2-5 */
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Group container styling */
.group-container {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    background-color: #f9f9f9;
    white-space: nowrap;
}

.group-container h2 {
    margin-top: 10px;
    margin-bottom: 20px;
}

/* Table styling */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
}

/* Score input styling */
.score-input {
    width: 60px;
    text-align: center;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Buttons */
button {
    padding: 8px 12px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.submit-button {
    background-color: #3c83f5;
    color: white;
}

button.submit-button:hover {
    background-color: #357ae8;
}

/* Button group for forms with multiple buttons */
.button-group {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.button-group button {
    flex: 0 1 auto;
}

/* Secondary button styling */
button.submit-button.secondary {
    background-color: #6c757d;
}

button.submit-button.secondary:hover {
    background-color: #5a6268;
}

button#logout-button {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #ff4d4d;
    color: white;
}

button#logout-button:hover {
    background-color: #e60000;
}

.logout-button {
    margin-left: 10px;
    padding: 8px 12px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #ff4d4d;
    color: white;
}

.logout-button:hover {
    background-color: #e60000;
}

.large-flag {
    font-size: 13rem; /* Adjust size as needed */
}

.final-container .score-section {
    height: 70px;
    white-space: nowrap;
}

/* Center the score inputs and the score divider */
.quarter-finals-container .score-section,
.semi-finals-container .score-section,
.round-of-32-container .score-section,
.round-of-16-container .score-section,
.third-place-playoff-container .score-section {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    height: 40px;
}

@media (min-width: 769px) and (max-width: 1170px) {
    #tables-container,
    #groups-container {
        grid-column: 2 / span 4; /* Groups take up columns 2-5 */
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columns for groups */
        gap: 20px;
        padding: 20px;
        justify-content: center; /* Center the columns horizontally */
    }

    #third-place-standings-container {
        grid-column: 2 / span 4; /* Match fixtures width */
    }

    /* Fixtures container layout */
    #fixtures-container {
        grid-column: 2 / span 4; /* Fixtures take up columns 2-5 */
        margin-top: 20px;
        padding: 20px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
}

@media (min-width: 1521px) {
    #tables-container,
    #groups-container {
        grid-column: 2 / span 4; /* Groups take up columns 2-5 */
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 columns for groups */
        gap: 20px;
        padding: 20px;
        justify-content: center; /* Center the columns horizontally */
    }

    #third-place-standings-container {
        grid-column: 2 / span 4; /* Match fixtures width */
    }

    /* Fixtures container layout */
    #fixtures-container {
        grid-column: 2 / span 4; /* Fixtures take up columns 2-5 */
        margin-top: 20px;
        padding: 20px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    h1 {
        font-size: 24px;
        margin: 0;
    }

    button#logout-button {
        position: static;
        margin: 0;
    }

    .main-container {
        padding: 0 10px; /* Minimal side padding for spacing */
    }

    #tables-container {
        grid-column: 1 / span 6; /* Full width for smaller screens */
        grid-template-columns: 1fr; /* Single column - one group per row */
        gap: 15px;
        padding: 0 10px; /* Side padding for spacing */
    }

    .group-container {
        white-space: normal; /* Allow text wrapping on mobile */
        padding: 15px; /* Consistent padding inside containers */
        width: 100%;
        margin: 0 auto; /* Center the container */
        box-sizing: border-box; /* Include padding in width calculation */
    }

    .group-container h2 {
        font-size: 18px;
        margin: 0 0 10px 0;
    }

    .group-container table {
        font-size: 12px;
        width: 100%;
    }

    .group-container th,
    .group-container td {
        padding: 6px 4px;
        font-size: 12px;
    }

    .country-container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    #third-place-standings-container {
        grid-column: 1 / span 6; /* Full width for smaller screens */
        padding: 15px; /* Consistent padding with group containers */
        margin: 20px 10px;
        box-sizing: border-box; /* Include padding in width calculation */
    }

    #third-place-table {
        width: 100%;
        font-size: 10px;
    }

    #third-place-table th,
    #third-place-table td {
        padding: 4px 2px;
        font-size: 10px;
    }

    #third-place-standings-container h2 {
        font-size: 18px;
    }

    .third-place-info {
        font-size: 12px;
    }

    #fixtures-container {
        grid-column: 1 / span 6; /* Full width for fixtures */
        padding: 15px; /* Consistent padding with other containers */
        margin: 0 10px;
        box-sizing: border-box; /* Include padding in width calculation */
    }

    /* Make the fixture table responsive */
    #fixtures-container table {
        width: 100%; /* Ensure the table fits within the container */
        max-width: 100%; /* Prevent stretching beyond the screen */
        overflow-x: auto; /* Enable horizontal scrolling if needed */
        border-collapse: collapse;
    }

    #fixtures-container th,
    #fixtures-container td {
        font-size: 12px; /* Adjust font size for smaller screens */
        padding: 6px; /* Reduce padding for better fit */
    }

    #fixtures-container th {
        text-align: center;
    }

    /* Hide Submit button column on mobile (only present when logged in) */
    #fixtures-container th:last-child:not(:nth-last-child(1)),
    #fixtures-container td:last-child:not(:nth-last-child(1)) {
        display: none;
    }
    
    /* When there are 7 columns (logged in), hide the 7th column (submit button) */
    #fixtures-container tr:has(th:nth-child(7)) th:nth-child(7),
    #fixtures-container tr:has(td:nth-child(7)) td:nth-child(7) {
        display: none;
    }

    .score-input {
        width: 12px; /* Adjust input width for smaller screens */
        font-size: 12px; /* Reduce font size for better fit */
    }

    .final-container .score-section {
        height: 70px;
    }

    /* Increase the size of the score input section */
    .quarter-finals-container .score-section,
    .round-of-32-container .score-section,
    .round-of-16-container .score-section,
    .semi-finals-container .score-section,
    .third-place-playoff-container .score-section {
        height: 49px;
        gap: 10px;
    }

    /* Adjust the score input width for better usability */
    .quarter-finals-container .score-input,
    .round-of-32-container .score-input,
    .round-of-16-container .score-input,
    .semi-finals-container .score-input,
    .final-container .score-input,
    .third-place-playoff-container .score-input {
        width: 50px;
        font-size: 16px;
    }

    .quarter-finals-container .extra-time-label,
    .round-of-32-container .extra-time-label,
    .round-of-16-container .extra-time-label,
    .semi-finals-container .extra-time-label,
    .final-container .extra-time-label,
    .third-place-playoff-container .extra-time-label {
        font-size: 12px;
        white-space: nowrap;
    }
    img {
        grid-column: 2 / span 2;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .large-flag {
        font-size: 3rem; /* Adjust size as needed */
    }

    /* Mobile form styling - stack labels above inputs */
    #registration-form div,
    #login-form div,
    #verification-form div,
    #change-email-form div,
    #email-verification-form div {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        margin-bottom: 15px;
    }

    #registration-form label,
    #login-form label,
    #verification-form label,
    #change-email-form label,
    #email-verification-form label {
        text-align: left !important;
        display: block !important;
        margin-bottom: 5px;
        width: 100% !important;
    }

    #registration-form input,
    #login-form input,
    #verification-form input,
    #change-email-form input,
    #email-verification-form input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        display: block !important;
    }

    #verification-form button,
    #email-verification-form button {
        width: 100% !important;
        margin: 5px 0 !important;
        min-width: auto !important;
    }
}

/* Adjust layout for screens between 768px and 1520px */
@media (min-width: 768px) and (max-width: 1520px) {
    #tables-container,
    .main-container {
        grid-column: 1 / span 6; /* Full width for medium screens */
    }

    #fixtures-container {
        grid-column: 1 / span 6; /* Full width for fixtures */
    }

    img {
        grid-column: 2 / span 2;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
}

/* Fixtures table styling */
.fixtures-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.fixtures-table th,
.fixtures-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.fixtures-table th {
    background-color: #f2f2f2;
}

.score-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.quarter-finals-container,
.semi-finals-container,
.final-container,
.round-of-32-container,
.round-of-16-container,
.third-place-playoff-container {
    grid-column: 1 / span 6; /* Full width for knockout stages */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px auto;
    width: 100%;
    max-width: 700px;
    text-align: center;
    gap: 15px;
}

/* Center the score inputs and the score divider */
.quarter-finals-container td,
.semi-finals-container td,
.round-of-32-container td,
.round-of-16-container td,
.final-container td,
.third-place-playoff-container td {
    text-align: center;
    vertical-align: middle;
}

.quarter-finals-container .team-name,
.semi-finals-container .team-name,
.round-of-32-container .team-name,
.round-of-16-container .team-name,
.final-container .team-name,
.third-place-playoff-container .team-name {
    width: 100px;
}

/* Center the submit button */
.round-of-32-container .submit-button,
.round-of-16-container .submit-button {
    margin: 0 auto;
}

.hidden {
    display: none;
}

td:empty {
    border: none;
}

button.submit-button:disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

button.submit-button:disabled:hover {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

/* Highlight winner */
.winner {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green */
    font-weight: bold;
}

/* Highlight loser */
.loser {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red */
    font-weight: bold;
    text-decoration: line-through;
}

/* Highlight draw */
.draw {
    background-color: #fff3cd; /* Light yellow */
    color: #856404; /* Dark yellow */
    font-weight: bold;
}

/* Make images responsive */
img {
    grid-column: 1 / span 6;
    height: auto;
    display: grid;
    margin: 0 auto;
    max-width: 600px;
    width: 100%;
}

#content-placeholder {
    font-family: Barlow, ui-sans-serif;
    font-size: 20px;
    grid-column: 2 / span 4;
    align-items: center;
    text-align: center;
}

.footer {
    position: fixed; /* Stick to the bottom of the viewport */
    bottom: 0;
    left: 0;
    width: 100%; /* Full width */
    background-color: #f4f4f9; /* Dark background */
    color: #333; /* White text */
    text-align: left; /* Center the text */
    padding: 0 10px 10px 10px; /* Add some padding */
    font-size: 14px; /* Adjust font size */
    z-index: 1000; /* Ensure it stays on top */
    height: 20px; /* Set a fixed height for the footer */
}

.registration-form-container,
.login-form-container {
    margin-top: 20px;
    padding: 20px 20px 20px 10px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.registration-form-container h2,
.login-form-container h2 {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 0;
}

#registration-form div,
#login-form div,
#verification-form div {
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px;
    align-items: center;
}

#registration-form label,
#login-form label,
#verification-form label {
    font-weight: bold;
    text-align: left;
    margin-bottom: 0;
}

#registration-form input,
#login-form input,
#verification-form input {
    max-width: 250px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

#verification-code {
    font-size: 18px;
    text-align: center;
    letter-spacing: 2px;
    font-family: monospace;
}

#verification-form {
    text-align: center;
}

#verification-form p {
    margin-bottom: 15px;
}

#verification-form button {
    margin: 5px;
    padding: 8px 16px;
    min-width: 120px;
}

#users-to-submit-table th,
#users-to-submit-table td,
#registered-users-table th,
#registered-users-table td {
    text-align: center;
    vertical-align: middle;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    text-align: center;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.team-result {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
}

.hidden {
    display: none;
}

#team-discovery-form input {
    margin-bottom: 5px;
}

.country-container {
    position: relative;
    display: inline-block;
}

.country-container .country-name {
    margin-left: 8px;
}

.country-container .fi,
#fixtures-container .fi {
    border: 2px solid #ccc;
    border-radius: 5px;
    display: inline-block;
}

.loser .country-container {
    text-decoration: line-through;
}

.email-input-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between the input and button */
    justify-content: center; /* Center the content horizontally */
    margin-top: 10px; /* Add some spacing above */
}

.email-input-container input[type="email"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.email-input-container button {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.email-input-container button:hover {
    background-color: #0056b3;
}

/* My Account Page Specific Styles */
.team-fixtures-container {
    margin-top: 30px;
    text-align: left;
}

.team-fixtures-container h3 {
    text-align: center;
    color: #444;
    margin-bottom: 20px;
}

.fixture-stage-section {
    margin-bottom: 30px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.fixture-stage-section h4 {
    color: #2c5aa0;
    margin-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 8px;
}

.fixture-stage-section .hidden {
    display: none;
}

.loading-message {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 20px;
}

/* Team name styling in my-account fixtures */
.team-fixtures-container .team-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.team-fixtures-container .team-name.my-team {
    font-weight: bold;
    color: #2c5aa0;
    background-color: #e8f0fe;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Match result styling for my-account fixtures */
.team-fixtures-container .match-result {
    font-weight: bold;
    min-width: 60px;
    text-align: center;
}

.team-fixtures-container .match-result.win {
    color: #28a745;
}

.team-fixtures-container .match-result.loss {
    color: #dc3545;
}

.team-fixtures-container .match-result.draw {
    color: #ffc107;
}

.team-fixtures-container .match-result.pending {
    color: #6c757d;
    font-style: italic;
}

/* Fixtures table styling for my-account */
.team-fixtures-container .fixtures-table {
    width: 100%;
    border-collapse: collapse;
}

.team-fixtures-container .fixtures-table th,
.team-fixtures-container .fixtures-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.team-fixtures-container .fixtures-table th {
    background-color: #f2f2f2;
}

/* Apply existing winner/loser styling to my-account fixture rows */
.team-fixtures-container .fixtures-table tr.winner {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green */
}

.team-fixtures-container .fixtures-table tr.loser {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red */
}

.team-fixtures-container .fixtures-table tr.draw {
    background-color: #fff3cd; /* Light yellow */
    color: #856404; /* Dark yellow */
}

/* Potential match styling for my-account */
.team-fixtures-container .potential-match {
    opacity: 0.7;
    background-color: #f8f9fa;
}

.team-fixtures-container .potential-match td {
    font-style: italic;
    color: #6c757d;
}

.team-fixtures-container .potential-match .team-name {
    color: #6c757d;
}

/* Desktop and general styling for my-account fixtures */
.team-fixtures-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.team-fixtures-container h3 {
    text-align: center;
    color: #2c5aa0;
    font-size: 24px;
    margin-bottom: 30px;
}

.team-fixtures-container .fixture-stage-section {
    margin-bottom: 30px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px;
}

.team-fixtures-container .fixture-stage-section h4 {
    color: #2c5aa0;
    font-size: 20px;
    margin-bottom: 20px;
    margin-top: 0;
    text-align: center;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 10px;
}

.team-fixtures-container .fixtures-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.team-fixtures-container .fixtures-table thead {
    background: linear-gradient(135deg, #2c5aa0, #1e3d72);
}

.team-fixtures-container .fixtures-table thead th {
    padding: 15px 10px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgb(0, 0, 0) !important; /* Only headers should be white */
}

.team-fixtures-container .fixtures-table tbody td {
    padding: 15px 10px;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
    color: #2c3e50 !important; /* Force body text to be dark */
    background: white !important; /* Force white background */
}

.team-fixtures-container .fixtures-table tr:last-child td {
    border-bottom: none;
}

.team-fixtures-container .fixtures-table tbody tr:hover {
    background-color: #f8f9fa !important;
    transition: background-color 0.2s ease;
}

.team-fixtures-container .fixtures-table tbody tr:hover td {
    color: #2c3e50 !important; /* Ensure text stays dark on hover */
}

/* Team name styling - similar to group-stage page */
.team-fixtures-container .team-name {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 500;
    color: #2c3e50 !important; /* Force team names to be dark */
}

.team-fixtures-container .team-name * {
    color: #2c3e50 !important; /* Force all child elements to inherit dark color */
}

.team-fixtures-container .team-name .fi {
    font-size: 20px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.team-fixtures-container .team-name.my-team {
    background-color: #e8f0fe;
    padding: 8px 12px;
    border-radius: 6px;
    border: 2px solid #2c5aa0;
    font-weight: bold;
    color: #1e3d72 !important; /* Force England text to be visible */
}

.team-fixtures-container .team-name.my-team * {
    color: #1e3d72 !important; /* Force all child elements in my-team to be blue */
}

/* Match result styling */
.team-fixtures-container .match-result {
    font-size: 18px;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 6px;
    display: inline-block;
    min-width: 80px;
    color: #2c3e50 !important; /* Force result text to be dark */
}

.team-fixtures-container .match-result.win {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.team-fixtures-container .match-result.loss {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.team-fixtures-container .match-result.draw {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.team-fixtures-container .match-result.pending {
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid #dee2e6;
}

/* Qualification status */
.team-fixtures-container .qualification-status {
    margin: 20px 0;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.team-fixtures-container .qualification-status.qualified {
    background-color: #d4edda;
    color: #155724;
    border: 2px solid #28a745;
}

.team-fixtures-container .qualification-status.eliminated {
    background-color: #f8d7da;
    color: #721c24;
    border: 2px solid #dc3545;
}

/* Loading and error states */
.team-fixtures-container .loading-message {
    text-align: center;
    padding: 40px;
    color: #6c757d;
    font-size: 18px;
}

.team-fixtures-container .hidden {
    display: none;
}

/* Responsive design for narrow desktop windows (tablets/small laptops) */
@media (max-width: 1200px) and (min-width: 769px) {
    .team-fixtures-container {
        padding: 15px;
    }
    
    .team-fixtures-container .fixtures-table {
        font-size: 13px;
    }
    
    .team-fixtures-container .fixtures-table thead th {
        padding: 10px 5px;
        font-size: 12px;
    }
    
    .team-fixtures-container .fixtures-table tbody td {
        padding: 10px 5px;
        font-size: 13px;
    }
    
    .team-fixtures-container .team-name {
        gap: 5px;
        font-size: 12px;
    }
    
    .team-fixtures-container .team-name .fi {
        font-size: 16px;
    }
    
    .team-fixtures-container .team-name.my-team {
        padding: 6px 8px;
    }
    
    .team-fixtures-container .match-result {
        font-size: 14px;
        padding: 6px 10px;
        min-width: 60px;
    }
    
    /* Make table more compact for narrow screens */
    .team-fixtures-container .fixtures-table th:first-child,
    .team-fixtures-container .fixtures-table td:first-child {
        width: 15%;
    }
    
    .team-fixtures-container .fixtures-table th:nth-child(2),
    .team-fixtures-container .fixtures-table td:nth-child(2),
    .team-fixtures-container .fixtures-table th:nth-child(4),
    .team-fixtures-container .fixtures-table td:nth-child(4) {
        width: 30%;
    }
    
    .team-fixtures-container .fixtures-table th:nth-child(3),
    .team-fixtures-container .fixtures-table td:nth-child(3) {
        width: 15%;
    }
    
    .team-fixtures-container .fixtures-table th:last-child,
    .team-fixtures-container .fixtures-table td:last-child {
        width: 10%;
    }
}

/* Responsive design for my-account fixtures */
@media (max-width: 768px) {
    .team-fixtures-container {
        margin: 0;
        padding: 0;
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        box-sizing: border-box;
    }
    
    .team-fixtures-container h3 {
        font-size: 18px;
        margin: 15px 0;
        text-align: center;
        padding: 0 15px;
    }
    
    .team-fixtures-container .fixture-stage-section {
        padding: 0;
        margin: 0 0 15px 0;
        border-radius: 0;
        background: #f8f9fa;
        border: none;
        border-top: 1px solid #e9ecef;
        border-bottom: 1px solid #e9ecef;
        width: 100%;
        overflow-x: hidden;
    }
    
    .team-fixtures-container .fixture-stage-section h4 {
        font-size: 16px;
        margin: 0;
        padding: 15px;
        text-align: center;
        color: #2c5aa0;
        background: #fff;
        border-bottom: 1px solid #e9ecef;
    }
    
    /* Mobile table - card style like Round of 16 */
    .team-fixtures-container .fixtures-table {
        width: 100%;
        font-size: 14px;
        border-collapse: separate;
        border-spacing: 10px;
        padding: 0 10px;
    }
    
    .team-fixtures-container .fixtures-table thead {
        display: none; /* Hide headers on mobile */
    }
    
    .team-fixtures-container .fixtures-table,
    .team-fixtures-container .fixtures-table tbody {
        display: block;
        width: 100%;
    }
    
    .team-fixtures-container .fixtures-table tr {
        display: grid;
        grid-template-columns: 1fr auto 1fr; /* Back to flexible layout */
        grid-template-rows: auto auto auto;
        gap: 15px;
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 10px;
        margin-bottom: 20px;
        padding: 0 20px 20px 20px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        align-items: center;
        text-align: center; /* Center all text content */
    }
    
    /* Matchday header spans full width */
    .team-fixtures-container .fixtures-table td:nth-child(1) {
        grid-column: 1 / -1;
        text-align: center;
        background: #2c5aa0;
        color: white;
        font-weight: bold;
        padding: 12px;
        border-radius: 6px;
        margin-bottom: 15px;
        font-size: 15px;
    }
    
    /* Team 1 - left side */
    .team-fixtures-container .fixtures-table td:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Result - center */
    .team-fixtures-container .fixtures-table td:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        min-width: 80px;
    }
    
    /* Team 2 - right side */
    .team-fixtures-container .fixtures-table td:nth-child(4) {
        grid-column: 3;
        grid-row: 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Date - bottom center */
    .team-fixtures-container .fixtures-table td:nth-child(5) {
        grid-column: 1 / -1;
        grid-row: 3;
        text-align: center;
        color: #333 !important; /* Ensure date text is visible */
        font-size: 20px;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #e9ecef;
        font-weight: 500;
    }
    
    .team-fixtures-container .fixtures-table td {
        border: none;
        padding: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #333; /* Ensure text is visible */
    }
    
    .team-fixtures-container .fixtures-table td:before {
        display: none; /* Remove data labels */
    }
    
    /* Team name styling - like Round of 16 cards */
    .team-fixtures-container .team-name {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        width: 100%;
        min-height: 70px;
        justify-content: center;
        padding: 15px;
        border-radius: 8px;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        color: #333; /* Ensure text visibility */
        font-weight: 500;
    }
    
    .team-fixtures-container .team-name .fi {
        font-size: 28px;
        margin-bottom: 5px;
        border: 1px solid #ddd;
        border-radius: 3px;
    }
    
    .team-fixtures-container .team-name.my-team {
        background-color: #e8f0fe;
        border: 2px solid #2c5aa0;
        font-weight: bold;
        color: #1e3d72 !important; /* Ensure England text is visible */
    }
    
    /* Match result styling - like Round of 16 */
    .team-fixtures-container .match-result {
        font-size: 22px;
        font-weight: bold;
        padding: 15px 20px;
        border-radius: 8px;
        display: inline-block;
        min-width: 80px;
        text-align: center;
        background: white;
        border: 2px solid #e9ecef;
        margin: 0 10px;
        color: #333 !important; /* Ensure result text is visible */
    }
    
    .team-fixtures-container .match-result.win {
        background-color: #d4edda;
        color: #155724;
    }
    
    .team-fixtures-container .match-result.loss {
        background-color: #f8d7da;
        color: #721c24;
    }
    
    .team-fixtures-container .match-result.draw {
        background-color: #fff3cd;
        color: #856404;
    }
    
    .team-fixtures-container .match-result.pending {
        background-color: #f8f9fa;
        color: #6c757d;
    }
    
    /* Qualification status */
    .team-fixtures-container .qualification-status {
        margin: 10px 0;
        padding: 10px;
        border-radius: 6px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
    }
    
    .team-fixtures-container .qualification-status.qualified {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #28a745;
    }
    
    .team-fixtures-container .qualification-status.eliminated {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #dc3545;
    }
    
    /* Loading message */
    .team-fixtures-container .loading-message {
        padding: 20px;
        text-align: center;
        font-size: 14px;
        color: #6c757d;
    }

    /* Email Preferences Section */
    .email-preferences {
        background-color: #ffffff;
        border: 2px solid #003366;
        border-radius: 12px;
        padding: 25px;
        margin: 30px 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .email-preferences h3 {
        color: #003366;
        font-size: 20px;
        margin-bottom: 15px;
        font-weight: bold;
    }

    .preference-option {
        margin-bottom: 10px;
    }

    .checkbox-label {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 16px;
        color: #333;
        user-select: none;
    }

    .checkbox-label input[type="checkbox"] {
        margin-right: 12px;
        transform: scale(1.2);
        cursor: pointer;
    }

    .status-message {
        margin-top: 8px;
        font-size: 14px;
        padding: 8px 12px;
        border-radius: 6px;
        display: none;
    }

    .status-message.success {
        display: block;
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .status-message.error {
        display: block;
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    .status-message.loading {
        display: block;
        background-color: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }

    /* Change Email Section Styling */
    .change-email-section {
        background-color: #ffffff;
        border: 2px solid #003366;
        border-radius: 12px;
        padding: 25px;
        margin: 30px 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .change-email-section h3 {
        color: #003366;
        font-size: 20px;
        margin-bottom: 20px;
        margin-top: 0;
        font-weight: bold;
        text-align: center;
    }

    .change-email-section h4 {
        color: #003366;
        font-size: 18px;
        margin-bottom: 15px;
        font-weight: bold;
        text-align: center;
    }

    #change-email-form div,
    #email-verification-form div {
        margin-bottom: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        grid-template-columns: none !important;
    }

    #change-email-form label,
    #email-verification-form label {
        font-weight: bold;
        text-align: left !important;
        margin-bottom: 0;
        width: 100%;
    }

    #change-email-form input,
    #email-verification-form input {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
        box-sizing: border-box;
    }

    #change-email-form input[readonly] {
        background-color: #f5f5f5;
        color: #666;
    }

    #change-email-form button,
    #email-verification-form button {
        margin-top: 10px !important;
    }

    #email-verification-code {
        font-size: 18px;
        text-align: center;
        letter-spacing: 2px;
        font-family: monospace;
    }

    #email-verification-form {
        text-align: left;
    }

    #email-verification-form p {
        margin-bottom: 20px;
    }

    #email-verification-form button {
        margin: 5px 5px 5px 0;
        padding: 8px 16px;
        min-width: 120px;
    }

    #change-email-status,
    #email-verification-status {
        margin-top: 10px;
    }
}

/* Change Email Section Styling - Desktop (min-width: 769px) */
@media (min-width: 769px) {
    .change-email-section {
        background-color: #ffffff;
        border: 2px solid #003366;
        border-radius: 12px;
        padding: 25px;
        margin: 30px 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .change-email-section h3 {
        color: #003366;
        font-size: 20px;
        margin-bottom: 20px;
        margin-top: 0;
        font-weight: bold;
        text-align: center;
    }

    .change-email-section h4 {
        color: #003366;
        font-size: 18px;
        margin-bottom: 15px;
        font-weight: bold;
        text-align: center;
    }

    #change-email-form div,
    #email-verification-form div {
        margin-bottom: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        grid-template-columns: none !important;
    }

    #change-email-form label,
    #email-verification-form label {
        font-weight: bold !important;
        text-align: left !important;
        margin-bottom: 0 !important;
        display: block !important;
        width: 100% !important;
    }

    #change-email-form input,
    #email-verification-form input {
        width: 100% !important;
        padding: 10px !important;
        border: 1px solid #ccc !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    #change-email-form input[readonly] {
        background-color: #f0f0f0 !important;
        cursor: not-allowed !important;
    }

    #change-email-form button,
    #email-verification-form button {
        background-color: #003366 !important;
        color: white !important;
        padding: 12px 24px !important;
        border: none !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        cursor: pointer !important;
        transition: background-color 0.3s ease !important;
        width: auto !important;
        min-width: 150px !important;
        margin-top: 10px !important;
    }

    #change-email-form button:hover,
    #email-verification-form button:hover {
        background-color: #00509E !important;
    }

    #change-email-form button:disabled,
    #email-verification-form button:disabled {
        background-color: #cccccc !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }
}

/* Prize Pot Table Styling */
.prize-pot-total {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #2c5aa0;
}

.prize-pot-table {
    margin: 0 auto;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    overflow: hidden;
    max-width: 350px;
}

.prize-pot-table thead tr {
    background: linear-gradient(135deg, #2c5aa0, #1e3d72);
}

.prize-pot-table thead th {
    padding: 8px 14px;
    font-weight: 600;
    font-size: 13px;
    color: #333;
}

.prize-pot-table thead th:first-child {
    text-align: left;
}

.prize-pot-table thead th:last-child {
    text-align: right;
}

.prize-pot-table tbody tr {
    border-bottom: 1px solid #e9ecef;
}

.prize-pot-table tbody tr:last-child {
    border-bottom: none;
}

.prize-pot-table tbody td {
    padding: 8px 14px;
    font-size: 13px;
    color: #000000 !important;
}

.prize-pot-table tbody td:first-child {
    text-align: left;
}

.prize-pot-table tbody td:last-child {
    text-align: right;
    font-weight: bold;
    color: #2c5aa0 !important;
}