/* For screens up to 768px wide (typical tablets in portrait, large phones) */
@media screen and (max-width: 650px) {
    /* TOP BAR */
    .top-bar {
        padding: 5px 0;
        gap: 5px;
    }
    .top-bar a img {
        max-height: 35px;
        margin: 0 3px;
    }
    /* HEADER SECTION */
    .header-container {
        flex-direction: row; /* Revert to row layout */
        align-items: center; /* Vertically align items */
        text-align: left; /* Align text to left */
        padding: 10px;
        background-color: white; /* Solid background for header content on mobile */
        background-image: url('/static/icons/fc-26-logo.png');
        background-repeat: repeat;
        background-size: 30px; /* Slightly smaller pattern tiles */
        background-position: center top; /* Center pattern, aligned to top */
    }
    .header-logo {
        height: 70px; /* Adjust logo size */
        margin-right: 15px; /* Space between logo and text */
        margin-bottom: 0; /* No bottom margin when side-by-side */
    }
    .header-text h1 {
        font-size: 28px;
        line-height: 1.2;
    }
    .header-text p {
        font-size: 0.9em;
        margin-top: 5px;
    }

    /* NAVIGATION BAR */
    .nav {
        padding: 8px;
        gap: 8px;
        justify-content: center;
    }
    .nav a {
        font-size: 12px;
        padding: 4px 10px;
        margin: 0;
    }

    /* MAIN CONTENT AREA */
    .content {
        margin: 15px auto;
        padding: 15px;
    }

    /* TEAM DETAIL HEADER (Mobile) */
    .team-detail-header {
        flex-direction: column; /* Stack logo and info vertically */
        align-items: center; /* Center items horizontally */
        text-align: center; /* Center text */
        padding: 10px; /* Smaller padding */
        gap: 15px; /* Smaller gap */
    }
    .team-detail-header > img {
        max-height: 100px; /* Smaller logo on mobile */
        margin-bottom: 0; /* Remove bottom margin if any */
    }
    .team-info-stack {
        margin-left: 0; /* Reset margin */
        align-items: center; /* Center info boxes */
        width: 100%; /* Take full width */
    }
    .info-box {
        text-align: center; /* Center text within info boxes */
        width: 90%; /* Constrain width of info boxes */
        max-width: 300px; /* Prevent them from getting too wide */
    }
    .roster-block-wrapper {
        padding: 10px;
        margin-bottom: 15px;
    }
    .roster-block-wrapper h4 {
        font-size: 1.3em;
    }
    .next-fixtures-section h3 {
        font-size: 1.3em;
        margin-top: 20px;
        margin-bottom: 10px;
    }

    /* --- home.html specific styles --- */
    /* Next Round Card */
    .next-round {
        max-width: 90%;
        margin: 15px auto;
        padding: 15px;
    }
    .round-name {
        font-size: 20px;
    }


    /* Countdown Digits */
    .countdown {
        gap: 10px;
    }
    .time-group {
        flex: none;
        max-width: none;
    }
    .time-group small {
        font-size: 10px;
        margin-top: 5px;
    }
    .flip-group {
        gap: 4px;
    }
    .flip-card {
        font-size: 20px;
        width: 28px;
        height: 38px;
    }

    /* Suspended Players Section (home.html) */
    .suspended-players-section {
        max-width: 90%;
        margin: 15px auto;
        padding: 15px;
    }
    /* Suspended Players TABLE - NOT SCROLLABLE */
    /* Force this table to behave as a normal table (no scrolling)
       and allow content to wrap. */
    .suspended-players-table {
        display: table;
        table-layout: auto;
        width: 100%;
        white-space: normal; /* Allow content to wrap */
        overflow-x: hidden; /* Ensure no horizontal scrollbar */
        margin-top: 10px;
    }
    .suspended-players-table th,
    .suspended-players-table td {
        white-space: normal;
        padding: 5px;
        font-size: 12px;
        border-right: 1px solid #1f2f3f; /* Redefine border for mobile */
    }
    .suspended-players-table td:last-child, .suspended-players-table th:last-child {
        border-right: none;
    }
    .suspended-players-section h2 { /* Targeting the h2 specific to this section */
        font-size: 18px;
    }


    /* Image Size Overrides for Mobile */
    .player-icon {
        height: 40px;
        margin-right: 5px;
    }
    .team-player-image {
        height: 35px;
        width: 35px;
        margin-right: 8px;
    }
    .team-badge-small {
        height: 35px;
        margin-right: 5px;
    }
    .card-icon {
        height: 16px;
        margin-right: 2px;
    }
    .event-icon {
        height: 18px;
        margin-right: 3px;
    }

    /* Suspended Players Table (mobile) - ensure image sizes also reduce */
    .suspended-players-table .player-icon {
        height: 40px; /* Re-affirm for consistency */
        margin-right: 5px;
    }
    .suspended-players-table .team-badge-small {
        height: 30px; /* Re-affirm for consistency */
    }
    .suspended-players-table .card-icon {
        height: 14px; /* Re-affirm for consistency */
        margin-right: 2px;
    }


    /* TEAMS PAGE MOBILE */
    .team-grid-container {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Smaller cards on tablets */
        gap: 15px;
        padding: 0;
        margin: 15px auto;
    }
    .team-card-link {
        margin-bottom: 15px; /* Space between cards in the same column */
    }
    .team-card img {
        width: 80px;
        height: 80px;
    }
    .team-card-name {
        font-size: 16px;
    }

    /* Round Selector Pagination Styling (Mobile) */
    .round-selector-pagination {
        max-width: 90%; /* Adjust width for mobile */
        padding: 8px 12px;
        margin: 15px auto;
        gap: 8px;
    }
    .round-selector-pagination h3 {
        font-size: 16px;
    }
    .round-selector-pagination a {
        padding: 4px 8px;
        font-size: 14px;
    }
    /* Match Row Styling - Specific for Mobile */
    .match {
        flex-direction: row; /* Ensure match row is still horizontal */
        align-items: center; /* Vertically align items in the main match row */
        padding: 12px; /* Slightly less padding on mobile */
    }
    

    .team {
        flex-direction: column; /* Stack logo and name vertically */
        align-items: center;    /* Center logo and name horizontally within the team column */
        width: 33%;             /* Adjust width to give more space, or auto */
        gap: 2px;               /* Reduce gap between logo and name */
        text-align: center;     /* Ensure team name is centered */
    }

    .team.right {
        justify-content: center; /* Also center for the right team */
    }

    .team img {
        height: 40px; /* Slightly smaller logos on mobile */
        margin-right: 0; /* Remove side margin from logos */
        margin-bottom: 5px; /* Add some space below the logo */
    }

    .team-name {
        font-size: 14px; /* Smaller font for team names on mobile */
        white-space: normal; /* Allow team names to wrap if they are very long */
        overflow: visible;    /* Allow full text to be visible */
        text-overflow: clip;  /* No ellipsis needed if wrapping */
        max-width: 100%;      /* Ensure name doesn't overflow its column */
    }

    .score {
        width: 34%; /* Adjust width to balance with teams */
        font-size: 24px; /* Smaller score font */
    }

    .status {
        font-size: 15px; /* Smaller status text */
    }

    .event-icon {
        height: 15px;
    }
    .event-entry .player-name {
        font-size: small;
    }

    /* EDIT MATCH PAGE MOBILE OVERRIDES */
    .edit-match-teams-wrapper {
        flex-direction: column; /* Stack teams vertically on mobile */
        gap: 20px; /* Smaller gap when stacked */
        margin: 15px 10px;
    }
    .edit-match-page .team {
        width: 90%; /* Teams take more width when stacked */
        padding: 15px; /* Slightly less padding */
        margin: 0 auto; /* Center the team blocks */
    }
    .edit-match-page .team > img {
        height: 80px; /* Smaller logo on mobile edit page */
    }
    .edit-match-page .team-name {
        font-size: 18px;
        margin-bottom: 15px;
    }
    .edit-match-page h4 {
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 1em;
    }
    .edit-match-page .event-row input[type="number"] {
        width: 40px;
        padding: 5px;
        font-size: 13px;
    }
    .edit-match-page select[name*="player"],
    .edit-match-page select[name*="card_type"] {
        width: 120px;
        height: 32px;
        font-size: 13px;
    }
    .edit-match-page .add-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
    .save-btn, .cancel-btn {
        padding: 8px 15px;
        font-size: 14px;
    }


    /* ==========================================================================
       LEAGUE TABLE MOBILE-SPECIFIC OVERRIDES
       ========================================================================== */

    /* Hide specific columns on smaller screens (up to 768px) */
    /* Hide Played, Wins, Draws, Losses, Goals For, Goals Against, Goal Difference */
    .league-table th:nth-child(3), .league-table td:nth-child(3), /* P */
    .league-table th:nth-child(4), .league-table td:nth-child(4), /* W */
    .league-table th:nth-child(5), .league-table td:nth-child(5), /* D */
    .league-table th:nth-child(6), .league-table td:nth-child(6), /* L */
    .league-table th:nth-child(7), .league-table td:nth-child(7), /* F */
    .league-table th:nth-child(8), .league-table td:nth-child(8), /* A */
    .league-table th:nth-child(9), .league-table td:nth-child(9)  /* +/- */
    {
        display: none;
    }

    /* Adjust remaining column widths to fill space */
    .league-table th.pos, .league-table td.pos {
        width: 15%; /* Give more space to position */
        min-width: 30px;
    }

    .league-table th:nth-child(2), .league-table td.team-cell {
        width: 65%; /* Make team column wider */
        text-align: left; /* Ensure team name remains left-aligned */
        padding-left: 5px; /* Adjust padding if needed */
    }

    .league-table th:nth-child(10), .league-table td:nth-child(10) {
        width: 20%; /* Give points column enough space */
        text-align: center;
    }

    .league-table th, .league-table td {
        padding: 8px 5px; /* Adjust padding for smaller screens */
        font-size: 14px; /* Slightly smaller font size */
    }

    /* Ensure the team badge and name are well-aligned */
    .league-table td.team-cell a {
        justify-content: flex-start; /* Align contents to the start */
        gap: 5px; /* Reduce gap */
    }
    .league-table td.team-cell img {
        height: 30px; /* Smaller badge size for mobile */
        width: 30px;
        margin-right: 0;
    }
    .league-table td.team-cell span {
        font-size: 14px; /* Ensure team name is readable */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-grow: 1; /* Allow name to take available space */
    }

    /* ==========================================================================
       ROSTER TABLE MOBILE-SPECIFIC OVERRIDES (REFINED)
       ========================================================================== */

    /* Hide the player number column (first column) */
    .roster-table th:nth-child(1),
    .roster-table td.num-cell {
        display: none;
    }

    /* Hide the player image within the name cell */
    .roster-table td.name-cell .team-player-image {
        display: none;
    }

    /* Hide full text, show abbreviated text for specific columns */
    .roster-table th.roster-pos-col .full-text,
    .roster-table th.roster-rating-col .full-text,
    .roster-table th.roster-potential-col .full-text {
        display: none;
    }

    .roster-table th.roster-pos-col .abbr-text,
    .roster-table th.roster-rating-col .abbr-text,
    .roster-table th.roster-potential-col .abbr-text {
        display: inline;
    }

    /* GENERAL CELL STYLING FOR MOBILE */
    .roster-table th,
    .roster-table td {
        padding: 5px 4px; /* Slightly reduce padding for all cells */
        font-size: 13px; /* Set a consistent base font size for cells */
        white-space: nowrap; /* Ensure cells respect nowrap default */
    }

    /* HEADER SPECIFIC STYLING FOR MOBILE */
    .roster-table th {
        font-size: 11px; /* Smaller font for headers, consistent with other tables */
        padding: 8px 4px; /* Adjust header padding */
        white-space: nowrap; /* Keep headers on one line */
    }


    /* Adjust remaining column widths */
    .roster-table th:nth-child(2), .roster-table td.name-cell {
        width: 40%; /* Give player name more space now that image is gone */
        min-width: 120px;
        text-align: left; /* Ensure name is left-aligned */
        padding-left: 8px; /* Adjust padding */
    }

    .roster-table th.roster-pos-col, .roster-table td.pos-cell { /* Target by the new class */
        width: 20%; /* Keep position at a reasonable width */
        min-width: 70px;
        white-space: normal; /* Allow positions to wrap if needed */
    }

    /* Adjust the remaining icon/stat columns */
    /* Starting from 4th child because 1st is hidden, 2nd is name, 3rd is pos */
    .roster-table th:nth-child(4), .roster-table td:nth-child(4), /* Goals (football icon) */
    .roster-table th:nth-child(5), .roster-table td:nth-child(5), /* Yellow Cards */
    .roster-table th:nth-child(6), .roster-table td:nth-child(6), /* Red Cards */
    .roster-table th.roster-rating-col, .roster-table td:nth-child(7), /* Rating (using new class for th) */
    .roster-table th.roster-potential-col, .roster-table td:nth-child(8) { /* Potential (using new class for th) */
        width: calc(40% / 5); /* Distribute remaining 40% among 5 columns */
        min-width: 30px; /* Smallest sensible min-width */
        font-size: 11px; /* Even smaller font for these very narrow columns */
    }

    /* Ensure player name text within the link can truncate if necessary */
    .roster-table td.name-cell a {
        justify-content: flex-start; /* Ensure text starts at the beginning */
        align-items: center; /* Center vertically */
    }
    .roster-table td.name-cell a span {
        flex-grow: 1; /* Allow the name to grow */
        max-width: 100%; /* Important to allow truncation */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px; /* Explicitly set font size for the player name */
    }
    .roster-table td.pos-cell {
         font-size: 13px; /* Explicitly set font size for the position */
    }

    .page-center h3 {
        font-size: 15px;
    }

    .stats-header-wrapper {
        gap: 0px;
    }
}


/* ==========================================================================
   VERY SMALL MOBILE SCREENS (e.g., iPhone SE, Galaxy S25 - up to 380px)
   ========================================================================== */
@media screen and (max-width: 380px) {
    /* TOP BAR */
    .top-bar {
        padding: 3px 0;
        gap: 5px;
    }
    .top-bar a img {
        max-height: 30px;
        margin: 0 3px;
    }

    /* HEADER SECTION */
    .header-container {
        flex-direction: row; /* Keep row layout */
        align-items: center;
        text-align: left;
        background-color: white;
        background-image: url('/static/icons/fc-26-logo.png');
        background-repeat: repeat;
        background-size: 30px; /* Smaller pattern tiles */
        background-position: center top;
    }
    .header-logo {
        height: 80px;
        margin-right: 10px;
    }
    .header-text h1 {
        font-size: 24px;
    }
    .header-text p {
        font-size: 0.6em;
        letter-spacing: 0;
    }


    /* NAVIGATION BAR */
    .nav {
        padding: 5px;
        gap: 0; /* Remove gap to maximize space */
    }
    .nav a {
        font-size: 10px; /* Even smaller font size */
        padding: 3px 5px;
        margin: 0 1px;
    }

    /* MAIN CONTENT AREA */
    .content {
        margin: 8px auto;
        padding: 10px;
    }

    /* TEAM DETAIL HEADER (Very Small Mobile) */
    .team-detail-header {
        gap: 10px;
    }
    .team-detail-header > img {
        max-height: 80px;
    }
    .info-box {
        font-size: 13px;
        padding: 8px;
    }
    .info-box.quote {
        font-size: 12px;
    }
    .roster-block-wrapper {
        padding: 8px;
        margin-bottom: 10px;
    }
    .roster-block-wrapper h4 {
        font-size: 1.1em;
    }
    .next-fixtures-section h3 {
        font-size: 1.2em;
    }


    /* TEAMS PAGE MOBILE */
    .team-grid-container {
        columns: 2; /* 2 columns on small phones */
        column-gap: 10px;
        padding: 10px 0;
        margin: 10px auto;
    }
    .team-card-link {
        margin-bottom: 10px; /* Space between cards in the same column */
    }
    .team-card img {
        width: 70px;
        height: 70px;
        margin-bottom: 5px;
    }
    .team-card-name {
        font-size: 14px;
    }

    /* Round Selector Pagination Styling (Very Small Mobile) */
    .round-selector-pagination {
        max-width: 90%; /* Adjust width for mobile */
        padding: 5px 10px;
        margin: 10px auto;
        gap: 5px;
        font-size: 14px;
    }
    .round-selector-pagination h3 {
        font-size: 14px;
    }
    .round-selector-pagination a {
        padding: 3px 6px;
        font-size: 12px;
    }

    /* Match Row Styling */
    .match {
        padding: 8px;
    }

    .team img {
        height: 35px; /* Even smaller logos */
        margin-bottom: 3px;
    }

    .team-name {
        font-size: 12px; /* Even smaller team name font */
    }

    .score {
        font-size: 22px; /* Even smaller score font */
    }

    .status {
        font-size: 12px;
    }

    /* EDIT MATCH PAGE VERY SMALL MOBILE OVERRIDES */
    .edit-match-page .team {
        width: 95%; /* Make teams almost full width */
        padding: 10px;
    }
    .edit-match-page .team > img {
        height: 60px;
        margin-bottom: 10px;
    }
    .edit-match-page .team-name {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .edit-match-page h4 {
        margin-top: 15px;
        margin-bottom: 8px;
        font-size: 0.95em;
    }
    .edit-match-page .event-row input[type="number"] {
        width: 35px;
        padding: 4px;
        font-size: 12px;
    }
    .edit-match-page select[name*="player"],
    .edit-match-page select[name*="card_type"] {
        width: 100px;
        height: 30px;
        font-size: 12px;
    }
    .edit-match-page .add-btn {
        padding: 5px 10px;
        font-size: 12px;
    }
    .save-btn, .cancel-btn {
        padding: 7px 12px;
        font-size: 13px;
    }
}