/* ===================================================================
   SOCCER LINEUP MOBILE STYLES
   Dedicated mobile stylesheet for Soccer Daily lineup component

   Following /senior guidelines:
   - Consistency: Matches existing mobile patterns
   - Clarity: Clear visual hierarchy
   - Clean Design: Good contrast, no yellow
   - Great UX: Touch-friendly (44px+ targets), reduced scrolling
   - Accessibility: Semantic structure, proper focus states
   - DRY: Reusable patterns
   =================================================================== */

/* === SOCCER DAILY LINEUP COMPONENT MOBILE OPTIMIZATIONS === */
@media (max-width: 768px) {
    /* Stack home/away lineup columns vertically on mobile */
    .lineup-card {
        margin-bottom: 1.5rem !important;
    }

    /* Lineup card headers - make them more prominent on mobile */
    .lineup-header {
        padding: 1rem !important;
        font-size: 1.1rem !important;
    }

    /* Filter button groups - wrap and make touch-friendly */
    .lineup-card .btn-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .lineup-card .btn-group .btn {
        flex: 1 1 calc(50% - 0.25rem) !important; /* 2 buttons per row */
        min-height: 44px !important; /* Apple's recommended touch target */
        font-size: 0.9rem !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 0.375rem !important;
        margin: 0 !important;
    }

    /* Player cards - optimize for mobile */
    .lineup-player {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important; /* Prevent double-tap zoom */
    }

    .lineup-player:active {
        transform: scale(0.98) !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    }

    /* Player card row - use CSS Grid for clean 2-row layout */
    .lineup-player .row {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 0.75rem 0.5rem !important;
        align-items: center !important;
    }

    /* Jersey number - Row 1, Column 1 */
    .lineup-player .row > .col:nth-child(1) {
        grid-row: 1 !important;
        grid-column: 1 !important;
    }

    /* Player name - Row 1, Column 2 */
    .lineup-player .row > .col:nth-child(2) {
        grid-row: 1 !important;
        grid-column: 2 !important;
    }

    /* Inside player name column - use flex to control layout */
    .lineup-player .row > .col:nth-child(2) > div {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Player name text - single line, no wrapping */
    .lineup-player .row > .col:nth-child(2) .fw-bold {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    /* NUCLEAR OPTION - Hide everything except player name from column 2 */
    .lineup-player .row > .col:nth-child(2) > div > *:not(.fw-bold) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -99999px !important;
        pointer-events: none !important;
    }

    /* Position column - Row 2, spans both columns, contains FG + Position + Caret */
    .lineup-player .row > .col:nth-child(3) {
        grid-row: 2 !important;
        grid-column: 1 / -1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
    }

    /* Jersey number badge - good size on mobile */
    .lineup-player .row > .col:nth-child(1) .badge {
        width: 35px !important;
        font-size: 0.9rem !important;
    }

    /* Player badges - compact and touch-friendly */
    .lineup-player .badge {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
        margin: 0.125rem !important;
    }

    /* Player caret icon - make more prominent on mobile */
    .lineup-player .player-caret {
        font-size: 1rem !important;
        transition: transform 0.3s ease !important;
    }

    /* Stat badges - larger and more readable on mobile */
    .stat-badge-clickable {
        min-height: 36px !important;
        min-width: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.85rem !important;
        padding: 0.5rem 0.65rem !important;
        margin: 0.25rem !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        touch-action: manipulation !important;
    }

    .stat-badge-clickable:active {
        transform: scale(0.95) !important;
    }

    /* Game log area - mobile optimized */
    .game-log-area {
        padding: 0.75rem !important;
        margin-top: 0.75rem !important;
        font-size: 0.85rem !important;
        border-radius: 0.5rem !important;
    }

    /* Substitutes section - compact on mobile */
    .lineup-card hr {
        margin: 1rem 0 !important;
    }

    .lineup-card h6 {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Formation info badges - readable on mobile */
    .lineup-header .badge {
        font-size: 0.8rem !important;
        padding: 0.35rem 0.6rem !important;
    }

    /* Lineup card body - proper spacing */
    .lineup-card .card-body {
        padding: 1rem !important;
    }

    /* Captain badge - ensure visibility */
    .captain-gold {
        font-size: 1.1rem !important;
    }

    /* Position badges - ensure proper sizing */
    .lineup-player .badge-sm {
        min-width: 80px !important;
        text-align: center !important;
    }
}

/* === EXTRA SMALL SCREENS (PHONES IN PORTRAIT) === */
@media (max-width: 576px) {
    /* More compact on very small screens */
    .lineup-header {
        padding: 0.75rem !important;
        font-size: 1rem !important;
    }

    .lineup-card .btn-group .btn {
        font-size: 0.85rem !important;
        min-height: 42px !important;
        padding: 0.4rem 0.6rem !important;
    }

    .lineup-player {
        padding: 0.6rem !important;
    }

    .stat-badge-clickable {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.55rem !important;
        min-height: 32px !important;
        min-width: 32px !important;
    }

    .lineup-card .card-body {
        padding: 0.75rem !important;
    }
}

/* === LANDSCAPE MODE OPTIMIZATIONS === */
@media (max-width: 812px) and (orientation: landscape) {
    .lineup-card .btn-group .btn {
        flex: 1 1 calc(25% - 0.5rem) !important; /* 4 buttons per row in landscape */
        font-size: 0.8rem !important;
        min-height: 40px !important;
    }
}

/* === PREVENT HORIZONTAL OVERFLOW ON SOCCER LINEUP === */
@media (max-width: 768px) {
    /* Ensure no overflow on lineup page */
    .lineup-section-container,
    .lineup-card,
    .lineup-card *,
    .lineup-player,
    .lineup-player * {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Ensure rows don't cause overflow */
    .lineup-card .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Ensure columns fit */
    .lineup-card [class*="col-"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ===================================================================
   TOP 3 PLAYERS MOBILE OPTIMIZATIONS
   =================================================================== */

@media (max-width: 768px) {
    /* Top players card - proper mobile spacing */
    #soccer_daily_top_players_home_badges,
    #soccer_daily_top_players_away_badges {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* Top player card containers - full width on mobile */
    .top-player-card-wrapper {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 0.75rem !important;
    }

    /* Top player cards - make tappable with visual feedback */
    #soccer_daily_top_players_home_badges .card,
    #soccer_daily_top_players_away_badges .card {
        cursor: pointer !important;
        touch-action: manipulation !important; /* Prevents double-tap zoom */
        transition: all 0.2s ease !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        position: relative !important; /* For ::after positioning */
    }

    #soccer_daily_top_players_home_badges .card:active,
    #soccer_daily_top_players_away_badges .card:active {
        transform: scale(0.98) !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    }

    /* Hide tooltips on mobile since they don't work with touch */
    #soccer_daily_top_players_home_badges .tooltip,
    #soccer_daily_top_players_away_badges .tooltip,
    #soccer_daily_top_players_home_badges .bs-tooltip-auto,
    #soccer_daily_top_players_away_badges .bs-tooltip-auto,
    #soccer_daily_top_players_home_badges [role="tooltip"],
    #soccer_daily_top_players_away_badges [role="tooltip"] {
        display: none !important;
        pointer-events: none !important;
    }

    /* Make player names more prominent on mobile */
    #soccer_daily_top_players_home_badges .card-body strong,
    #soccer_daily_top_players_away_badges .card-body strong {
        font-size: 0.85rem !important;
    }

    /* Ensure stat badges wrap properly on mobile */
    #soccer_daily_top_players_home_badges .card-body > div,
    #soccer_daily_top_players_away_badges .card-body > div {
        flex-wrap: wrap !important;
    }

    /* Make stat badges slightly larger for readability */
    #soccer_daily_top_players_home_badges .card-body span,
    #soccer_daily_top_players_away_badges .card-body span {
        font-size: 0.5rem !important;
        padding: 0.25rem 0.4rem !important;
        margin: 0.125rem !important;
    }

    /* Add visual tap indicator to cards */
    #soccer_daily_top_players_home_badges .card::after,
    #soccer_daily_top_players_away_badges .card::after {
        content: "Tap for details" !important;
        position: absolute !important;
        bottom: 0.5rem !important;
        right: 0.75rem !important;
        font-size: 0.65rem !important;
        color: #6c757d !important;
        opacity: 0.7 !important;
        font-style: italic !important;
    }

    /* Ensure card bodies have proper padding on mobile */
    #soccer_daily_top_players_home_badges .card-body,
    #soccer_daily_top_players_away_badges .card-body {
        padding: 0.75rem !important;
        padding-bottom: 1.75rem !important; /* Extra space for "Tap for details" text */
    }

    /* Top players info icon - larger touch target */
    #soccer_daily_top_players_info_icon {
        font-size: 1.1rem !important;
        padding: 0.5rem !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Team name headers in top players */
    #soccer_daily_top_players_home_team_name,
    #soccer_daily_top_players_away_team_name {
        font-size: 1.1rem !important;
    }

    /* Row spacing for mobile */
    #soccer_daily_top_players_home_badges .row,
    #soccer_daily_top_players_away_badges .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 0.75rem !important;
    }
}

/* === EXTRA SMALL SCREENS - TOP PLAYERS === */
@media (max-width: 576px) {
    /* More compact top players on small screens */
    #soccer_daily_top_players_home_badges .card-body,
    #soccer_daily_top_players_away_badges .card-body {
        padding: 0.6rem !important;
        padding-bottom: 1.5rem !important;
    }

    #soccer_daily_top_players_home_badges .card-body strong,
    #soccer_daily_top_players_away_badges .card-body strong {
        font-size: 0.8rem !important;
    }

    #soccer_daily_top_players_home_badges .card-body span,
    #soccer_daily_top_players_away_badges .card-body span {
        font-size: 0.45rem !important;
        padding: 0.2rem 0.35rem !important;
    }

    #soccer_daily_top_players_home_badges .card::after,
    #soccer_daily_top_players_away_badges .card::after {
        font-size: 0.6rem !important;
        bottom: 0.4rem !important;
        right: 0.6rem !important;
    }
}