/* Mobile-First Responsive Design */

/* Base mobile styles */
@media (max-width: 768px) {
    /* Container and layout */
    .container {
        padding: 10px;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        min-height: 100vh;
    }
    
    body {
        margin: 0;
        padding: 0;
        background: #f8f9fa;
    }
    
    /* Typography */
    h1 {
        font-size: 1.8rem;
        margin-bottom: 20px;
        text-align: center;
    }
    
    h2 {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }
    
    h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }
    
    /* Touch-friendly buttons */
    .btn {
        padding: 12px 20px;
        font-size: 16px;
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
        border-radius: 8px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-small {
        padding: 10px 16px;
        font-size: 14px;
        min-height: 40px;
        min-width: 40px;
    }
    
    /* Old Mobile menu button - REMOVED - using new side menu instead */
    .mobile-menu-btn {
        display: none !important;
    }
    
    /* Old Mobile menu button styles - REMOVED - using new side menu instead */
    
    /* Old Mobile side menu - REMOVED - using new side menu instead */
    .mobile-side-menu {
        display: none !important;
    }
    
    .side-menu-header {
        padding: 20px;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #3498db;
        color: white;
    }
    
    .side-menu-header h3 {
        margin: 0;
        font-size: 18px;
    }
    
    .close-btn {
        background: none;
        border: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
    }
    
    .side-menu-content {
        padding: 20px 0;
    }
    
    .side-menu-item {
        width: 100%;
        padding: 15px 20px;
        border: none;
        background: none;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 15px;
        font-size: 16px;
        color: #333;
        cursor: pointer;
        transition: background 0.2s ease;
    }
    
    .side-menu-item:hover,
    .side-menu-item.active {
        background: #f8f9fa;
        color: #3498db;
    }
    
    .menu-icon {
        font-size: 20px;
        width: 24px;
        text-align: center;
    }
    
    .menu-text {
        font-weight: 500;
    }
    
    /* Old Mobile menu overlay - REMOVED - using new side menu instead */
    .mobile-menu-overlay {
        display: none !important;
    }
    
    /* Tab navigation - hide on mobile, show side menu instead */
    .tab-navigation {
        display: none !important;
    }
    
    /* Also hide the main app content header on mobile */
    #main-app-content > .tab-navigation {
        display: none !important;
    }
    
    .tab-button {
        padding: 12px 16px;
        font-size: 14px;
        flex: 1;
        text-align: center;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Tables - Mobile optimized with fewer columns */
    .table-mobile-cards {
        display: block;
    }
    
    .table-mobile-cards table {
        display: none;
    }
    
    .table-mobile-cards .table-row {
        display: block;
        margin-bottom: 12px;
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 16px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .table-mobile-cards .table-cell {
        display: block;
        padding: 6px 0;
        border: none;
        position: relative;
        padding-left: 100px;
    }
    
    .table-mobile-cards .table-cell:before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: #666;
        position: absolute;
        left: 0;
        width: 90px;
        text-align: left;
        font-size: 14px;
    }
    
    .table-mobile-cards .table-cell.team-cell {
        padding-left: 0;
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .table-mobile-cards .table-cell.team-cell:before {
        display: none;
    }
    
    /* Hide less important columns on mobile */
    .table-mobile-cards .table-cell.hide-mobile {
        display: none;
    }
    
    /* Show only essential columns for mobile */
    .table-mobile-cards .table-cell.essential {
        display: block;
    }
    
    /* Mobile table headers - show only essential info */
    .table-mobile-cards .table-header {
        display: none;
    }
    
    /* Mobile standings specific */
    .standings-mobile .table-cell[data-label="Position"] {
        display: none;
    }
    
    .standings-mobile .table-cell[data-label="Played"] {
        display: none;
    }
    
    .standings-mobile .table-cell[data-label="Won"] {
        display: none;
    }
    
    .standings-mobile .table-cell[data-label="Drawn"] {
        display: none;
    }
    
    .standings-mobile .table-cell[data-label="Lost"] {
        display: none;
    }
    
    .standings-mobile .table-cell[data-label="Goals For"] {
        display: none;
    }
    
    .standings-mobile .table-cell[data-label="Goals Against"] {
        display: none;
    }
    
    /* Mobile players table specific */
    .players-mobile .table-cell[data-label="Used Teams"] {
        display: none;
    }
    
    
    .players-mobile .table-cell[data-label="Strikes"] {
        display: none;
    }
    
    /* Standings table specific */
    #standings-table {
        font-size: 14px;
    }
    
    #standings-table th,
    #standings-table td {
        padding: 8px 4px;
    }
    
    .club-cell {
        gap: 8px;
        align-items: center;
    }
    
    .team-logo {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }
    
    /* Forms */
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 12px;
        min-height: 44px;
        border-radius: 8px;
        border: 2px solid #e0e0e0;
        width: 100%;
        box-sizing: border-box;
    }
    
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        border-color: #3498db;
        outline: none;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    }
    
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    /* Players section */
    .players-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
        margin-bottom: 20px;
    }
    
    .players-controls {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .players-table {
        font-size: 14px;
        overflow-x: auto;
    }
    
    .players-table th,
    .players-table td {
        padding: 8px 6px;
        white-space: nowrap;
    }
    
    .used-teams-cell {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Month selector */
    .month-selector {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .month-selector select {
        width: 100%;
        font-size: 16px;
    }
    
    .selection-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    
    .selection-controls .month-selector {
        width: 100%;
    }
    
    /* Teams grid */
    .teams-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .team-card {
        padding: 12px;
        border-radius: 8px;
        text-align: center;
        min-height: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }
    
    .team-card.selected {
        background: #3498db;
        color: white;
        transform: scale(0.95);
    }
    
    /* Draft interface */
    .picker-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    
    .picker-stats {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    
    .draft-order-list {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .draft-order-item {
        min-width: 120px;
        padding: 8px 12px;
        font-size: 14px;
    }
    
    /* Modals */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        margin: 0;
        max-height: 100vh;
        overflow-y: auto;
    }
    
    .modal-content {
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    .modal-header {
        padding: 15px 20px;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
    }
    
    .modal-body {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
    }
    
    .modal-footer {
        padding: 15px 20px;
        border-top: 1px solid #e0e0e0;
        position: sticky;
        bottom: 0;
        background: white;
        z-index: 10;
    }
    
    /* Bottom navigation - REMOVED - using side menu instead */
    #bottom-navigation {
        display: none !important;
    }
    
    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }
    
    /* Show mobile-only elements */
    .mobile-only {
        display: block !important;
    }
    
    /* Old mobile menu elements - REMOVED - using new side menu instead */
    
    /* Touch feedback */
    .touch-feedback {
        transition: transform 0.1s ease;
    }
    
    .touch-feedback:active {
        transform: scale(0.95);
    }
    
    /* Loading states */
    .loading {
        position: relative;
        pointer-events: none;
    }
    
    .loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
        border: 2px solid #f3f3f3;
        border-top: 2px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 20px;
    }
    
    .teams-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Show normal tab navigation on tablet */
    .tab-navigation {
        display: flex !important;
    }
    
    /* Old mobile elements - REMOVED - using new side menu instead */
    
    #bottom-navigation {
        display: none !important;
    }
    
    .table-mobile-cards {
        display: table;
    }
    
    .table-mobile-cards table {
        display: table;
    }
    
    .table-mobile-cards .table-row {
        display: table-row;
    }
    
    .table-mobile-cards .table-cell {
        display: table-cell;
        padding: 8px 12px;
    }
    
    .table-mobile-cards .table-cell:before {
        display: none;
    }
}

/* Desktop styles - hide mobile elements */
@media (min-width: 1025px) {
    #bottom-navigation {
        display: none !important;
    }
    
    .mobile-only {
        display: none !important;
    }
    
    .desktop-only {
        display: block !important;
    }
    
    /* Show normal tab navigation on desktop */
    .tab-navigation {
        display: flex !important;
    }
    
    /* Old mobile menu elements - REMOVED - using new side menu instead */
}
/* Force Railway deployment refresh */