/**
 * Desktop Layout Styles (>1024px)
 * Mobile-First UI Redesign - Phase 3
 */

@media screen and (min-width: 1025px) {
    /* ========== Side Menu Desktop (Full Width) ========== */
    .side-menu {
        width: var(--menu-width-desktop); /* 250px */
        display: flex !important; /* Always visible */
        transform: translateX(0) !important;
    }
    
    .side-menu.hidden {
        transform: translateX(0) !important; /* Never hide on desktop */
    }
    
    /* ========== Content Area ========== */
    .container {
        margin-left: var(--menu-width-desktop);
        padding: 30px;
        transition: margin-left var(--transition-normal) var(--transition-easing);
    }
    
    body.menu-visible .container {
        margin-left: var(--menu-width-desktop);
    }
    
    /* ========== Hamburger Hidden ========== */
    .hamburger-btn {
        display: none !important;
    }
    
    /* ========== Overlay Hidden ========== */
    .menu-overlay {
        display: none !important;
    }
    
    /* ========== Typography ========== */
    body {
        font-size: var(--font-size-desktop-base);
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    /* ========== Grid Layouts ========== */
    .card-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
    
    .admin-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
    
    /* ========== Wide Grids (4 columns) ========== */
    .card-grid.wide {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* ========== Tables ========== */
    .table {
        font-size: 14px;
    }
    
    .table th,
    .table td {
        padding: 12px 15px;
    }
    
    /* ========== Tab Navigation (Hide) ========== */
    .tab-navigation {
        display: none !important;
    }
    
    /* ========== Fixtures Desktop ========== */
    .fixtures-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* ========== Players Desktop ========== */
    .players-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* ========== Sync Stats Desktop ========== */
    .sync-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    
    /* ========== Modal Desktop ========== */
    .modal {
        max-width: 800px;
        margin: 50px auto;
    }
    
    /* ========== Hover Effects ========== */
    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: all var(--transition-fast);
    }
    
    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    /* ========== Larger Displays (>1440px) ========== */
    @media screen and (min-width: 1440px) {
        .container {
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
            padding-left: calc(var(--menu-width-desktop) + 30px);
        }
        
        .card-grid {
            grid-template-columns: repeat(4, 1fr);
        }
        
        .sync-stats {
            grid-template-columns: repeat(4, 1fr);
        }
    }
}