/* Mobile-Optimized Styles for BenchBalancer */

/* Mobile-specific variables */
@media (max-width: 768px) {
    :root {
        --mobile-padding: 10px;
        --mobile-font-small: 11px;
        --mobile-font-normal: 14px;
        --mobile-font-large: 18px;
        --mobile-button-height: 44px; /* iOS minimum touch target */
    }
}

/* Mobile Layout Fixes */
@media (max-width: 768px) {
    /* Fix body scrolling */
    body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Compact header */
    #appHeader {
        padding: 10px;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    #mastheadLogo {
        max-height: 40px;
        max-width: 200px;
    }

    /* Main game container */
    #game-container {
        padding: 10px;
        max-width: 100%;
    }

    /* Game header - compact view */
    #game-header {
        margin-bottom: 15px;
    }

    .info-section {
        gap: 10px;
        margin-bottom: 10px;
    }

    .info-box {
        padding: 8px 12px;
        min-width: auto;
        flex: 1;
    }

    .info-box h3 {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .info-box p {
        font-size: 18px;
    }

    #gameTimer {
        font-size: 24px;
        letter-spacing: 1px;
    }

    #periodTimer {
        font-size: 12px;
        margin: 2px 0 8px 0;
    }

    .timer-box {
        min-width: auto;
    }

    .timer-box-button {
        padding: 8px 12px;
        font-size: 14px;
        min-height: var(--mobile-button-height);
    }

    /* Basketball Court - Mobile Optimized */
    .basketball-court-container {
        padding: 20px 10px;
        margin-bottom: 20px;
        perspective: none; /* Remove 3D effect on mobile */
        background: transparent;
        border-radius: 10px;
    }

    .basketball-court {
        max-width: 100%;
        width: 100%;
        aspect-ratio: 450/180; /* Maintain original aspect ratio */
        transform: none; /* Remove rotation on mobile */
        border: 4px solid #FFFFFF;
        border-radius: 8px;
        position: relative;
        min-height: 200px; /* Ensure minimum size for player icons */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    }

    /* Court SVG for mobile - more visible */
    .court-svg {
        opacity: 0.8; /* More visible on mobile */
    }

    /* Player positions on mobile court */
    .player-position {
        width: 80px !important; /* Larger for mobile */
        padding-bottom: 10px !important;
        position: absolute !important;
    }

    .player-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
        margin-bottom: 6px !important;
        border: 3px solid #333 !important;
        min-width: 44px !important; /* iOS touch target */
        min-height: 44px !important;
    }

    /* Mobile player info - always visible below icon */
    .player-info {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-top: 2px;
        min-width: 60px;
        padding: 4px 6px;
        font-size: 9px;
        background: rgba(0, 0, 0, 0.85);
        border: 1px solid var(--accent-cyan);
        border-radius: 4px;
    }

    .player-info::after {
        display: none !important;
    }

    .player-name {
        font-size: 10px;
        margin-bottom: 2px;
        padding-bottom: 2px;
        text-shadow: none;
    }

    .player-time-display {
        display: none; /* Hide on mobile to save space */
    }

    .position-badge {
        bottom: -15px;
        font-size: 10px;
        padding: 2px 6px;
    }

    .next-out-badge {
        top: -10px;
        left: -10px;
        font-size: 9px;
        padding: 2px 4px;
    }

    /* Adjust player positions for mobile court */
    .pos-c {
        left: 50%;
        top: 20%;
        transform: translateX(-50%);
    }

    .pos-pf {
        left: 20%;
        top: 35%;
        transform: translateX(-50%);
    }

    .pos-sf {
        right: 20%;
        top: 35%;
        transform: translateX(50%);
    }

    .pos-pg {
        left: 30%;
        bottom: 20%;
        transform: translateX(-50%);
    }

    .pos-sg {
        right: 30%;
        bottom: 20%;
        transform: translateX(50%);
    }

    /* Player Lists - Stack vertically */
    #player-lists {
        display: none; /* Hide on mobile, show in tabs instead */
    }

    /* Bottom sections - Tabbed interface */
    .bottom-sections {
        display: none; /* Will be replaced with tabs */
    }

    /* Next Sub Section - Compact Mobile View */
    .next-sub-section {
        background: rgba(45, 45, 53, 0.98) !important;
        border: 2px solid var(--accent-cyan) !important;
        border-radius: 10px !important;
        padding: 8px !important;
        margin-bottom: 10px !important;
        position: static !important; /* Changed from fixed to static */
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 10 !important; /* Reduced z-index */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
        min-height: auto !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    .next-sub-title {
        font-size: 16px;
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #nextSubCountdown {
        font-size: 20px;
        margin-bottom: 8px;
        text-align: center;
    }

    .sub-players-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 10px;
    }

    .sub-player-box {
        flex: 1;
        text-align: center;
        font-size: 12px;
    }

    .sub-player-box h4 {
        font-size: 10px;
        margin-bottom: 4px;
        color: var(--text-secondary);
    }

    .sub-arrows {
        font-size: 20px;
        margin: 0 10px;
    }

    /* Confirm Sub Button - Full Width Mobile */
    #confirmSubButton {
        width: 100%;
        padding: 12px;
        margin-top: 10px;
        font-size: 16px;
        min-height: var(--mobile-button-height);
        background: var(--accent-cyan);
        color: #000;
        border: none;
        border-radius: 8px;
        font-weight: bold;
        text-transform: uppercase;
    }

    /* Mobile Tab Navigation */
    .mobile-tabs {
        display: flex;
        background: var(--bg-secondary);
        border-radius: 10px;
        padding: 5px;
        margin-bottom: 15px;
        position: sticky;
        top: 60px;
        z-index: 800;
    }

    .mobile-tab {
        flex: 1;
        padding: 10px;
        background: transparent;
        border: none;
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        transition: all 0.3s ease;
        border-radius: 8px;
    }

    .mobile-tab.active {
        background: var(--accent-cyan);
        color: #000;
    }

    /* Mobile Tab Content */
    .mobile-tab-content {
        display: none;
        animation: fadeIn 0.3s ease;
    }

    .mobile-tab-content.active {
        display: block;
    }

    /* Game Controls - Bottom Fixed */
    .game-controls {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--bg-secondary) !important;
        padding: 10px !important;
        display: flex !important;
        gap: 8px !important;
        border-top: 2px solid var(--accent-cyan) !important;
        z-index: 9999 !important; /* Highest z-index to ensure always on top */
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.5) !important;
    }

    .control-button {
        padding: 10px 15px;
        font-size: 12px;
        min-height: var(--mobile-button-height);
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Modals - Full screen on mobile */
    .modal-content {
        max-width: 95%;
        width: 95%;
        max-height: 90vh;
        padding: 20px;
    }

    .modal-content h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    /* Scoring Panel - Mobile Optimized */
    #scoringPanel {
        flex-direction: column;
        gap: 8px;
        margin-top: 10px;
    }

    #scoringPanel .team-score,
    #scoringPanel .opp-score {
        padding: 8px 12px;
        min-width: auto;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #scoringPanel .opp-controls {
        display: flex;
        gap: 4px;
    }

    #scoringPanel .opp-controls button {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* Player Scoreboard - Mobile */
    #playerScoreboard {
        margin-top: 10px;
        gap: 4px;
    }

    .player-row {
        padding: 6px 10px;
        font-size: 12px;
    }

    .player-row .tot {
        font-size: 16px;
    }

    .player-row .breakdown {
        font-size: 10px;
    }

    .player-row .controls button {
        padding: 4px 6px;
        font-size: 10px;
    }

    /* Hide elements not needed on mobile */
    .player-time-info,
    .bench-player-times {
        display: none;
    }

    /* Setup section - Mobile */
    #setup {
        margin: 20px auto;
        padding: 0 15px;
    }

    h2 {
        font-size: 24px;
        margin: 20px 0 15px;
    }

    .form-group {
        margin-bottom: 15px;
        padding: 15px;
    }

    .form-group label {
        font-size: 12px;
        margin-bottom: 8px;
    }

    input[type="number"],
    input[type="text"],
    select {
        padding: 10px 12px;
        font-size: 14px;
    }

    .player-input-row {
        gap: 8px;
        margin-bottom: 8px;
    }

    .position-label {
        min-width: 35px;
        font-size: 12px;
        padding: 6px;
    }

    .player-name-input {
        padding: 10px 12px;
        font-size: 14px;
    }

    #confirmSetupButton {
        padding: 14px 30px;
        font-size: 16px;
        margin: 20px auto 15px;
    }

    /* Add bottom padding to account for fixed controls */
    #game-container {
        padding-bottom: 80px !important; /* Space for fixed controls at bottom */
        margin-bottom: 20px !important;
    }
    
    /* Ensure body has proper padding */
    body.mobile-view {
        padding-bottom: 80px !important;
    }
}

/* Landscape mobile adjustments */
@media (max-width: 812px) and (orientation: landscape) {
    #appHeader {
        padding: 5px;
    }

    #mastheadLogo {
        max-height: 30px;
    }

    .basketball-court-container {
        padding: 10px 5px;
    }

    .basketball-court {
        aspect-ratio: 3/1;
    }

    .next-sub-section {
        position: static;
        margin-bottom: 10px;
    }

    .game-controls {
        position: static;
        margin-top: 10px;
    }

    #game-container {
        padding-bottom: 20px;
    }
}

/* Touch-friendly hover states */
@media (hover: none) and (pointer: coarse) {
    .player-icon:hover {
        transform: none;
        animation: none;
    }

    .control-button:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
    input, select, textarea {
        font-size: 16px; /* Prevent zoom on focus */
    }
}