/**
 * Mobile Layout Styles (<768px)
 * Mobile-First UI Redesign - Phase 3
 */

@media screen and (max-width: 767px) {
    /* ========== Side Menu Mobile ========== */
    .side-menu {
        width: 80%;
        transform: translateX(-100%);
    }
    
    .side-menu:not(.hidden) {
        transform: translateX(0);
    }
    
    /* ========== Content Area ========== */
    .container {
        margin-left: 0 !important;
        margin-top: 60px; /* Space for hamburger */
        padding: 15px;
    }
    
    body.menu-visible .container {
        margin-left: 0 !important;
    }
    
    /* ========== Typography ========== */
    body {
        font-size: var(--font-size-mobile-base);
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.3rem;
    }
    
    h3 {
        font-size: 1.1rem;
    }
    
    /* ========== Buttons ========== */
    .btn {
        min-height: var(--touch-target-min);
        padding: 12px 20px;
        font-size: 16px;
    }
    
    /* ========== Tables ========== */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        font-size: 14px;
    }
    
    .table th,
    .table td {
        padding: 8px;
        white-space: nowrap;
    }
    
    /* ========== Cards ========== */
    .card {
        margin-bottom: 15px;
    }
    
    /* Stack cards vertically */
    .card-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    /* ========== Forms ========== */
    input,
    select,
    textarea {
        font-size: 16px; /* Prevent zoom on iOS */
        min-height: var(--touch-target-min);
    }
    
    /* ========== Tab Navigation (Hide) ========== */
    .tab-navigation {
        display: none !important;
    }
    
    /* ========== Fixtures Mobile ========== */
    .fixtures-grid {
        grid-template-columns: 1fr;
    }
    
    .fixture-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* ========== Players List Mobile ========== */
    .players-grid {
        grid-template-columns: 1fr;
    }
    
    /* ========== Standings Mobile ========== */
    .standings-table {
        font-size: 13px;
    }
    
    /* ========== Draft Mobile ========== */
    .draft-grid {
        grid-template-columns: 1fr;
    }
    
    /* ========== Admin Panel Mobile ========== */
    .admin-grid {
        grid-template-columns: 1fr;
    }
    
    /* ========== Sync History Mobile ========== */
    .sync-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .sync-stat-card {
        padding: 12px;
    }
    
    /* ========== Modal Mobile ========== */
    .modal {
        width: 95%;
        margin: 10px;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    /* ========== Spacing Adjustments ========== */
    .section {
        padding: 15px 0;
    }
    
    .section-header {
        margin-bottom: 15px;
    }
    
    /* ========== Touch Target Optimization ========== */
    a,
    button,
    .clickable {
        min-height: var(--touch-target-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* ========== Navigation Adjustments ========== */
    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .action-buttons .btn {
        width: 100%;
    }
}