/* Mobile Optimizations */
@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    /* Typography */
    h1 {
        font-size: 24px;
    }
    
    h2 {
        font-size: 20px;
    }
    
    /* Header */
    .header .container {
        height: 60px;
    }
    
    .logo img {
        height: 40px;
    }
    
    .contact-info .phone span {
        display: none;
    }
    
    /* Hero Section */
    .hero {
        padding: 60px 15px;
    }
    
    .hero h1 {
        font-size: 28px;
    }
    
    .hero p {
        font-size: 16px;
    }
    
    .cta-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .btn {
        width: 100%;
        text-align: center;
    }
    
    /* Services Grid */
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .service-card {
        padding: 20px;
    }
    
    /* Booking Form */
    .booking-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .tables-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .table-checkbox {
        padding: 10px;
    }
    
    .time-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Tournament Cards */
    .tournament-card {
        flex-direction: column;
        text-align: center;
    }
    
    .tournament-date {
        margin: 0 auto;
    }
    
    .tournament-meta {
        flex-direction: column;
        gap: 5px;
    }
    
    /* Dashboard */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-sidebar {
        position: static;
        width: 100%;
        margin-bottom: 20px;
    }
    
    .quick-actions {
        grid-template-columns: 1fr;
    }
    
    .booking-item {
        flex-direction: column;
        text-align: center;
    }
    
    .booking-date {
        margin: 0 auto;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-logo img {
        margin: 0 auto;
    }
    
    .social-icons {
        justify-content: center;
    }
}

/* Touch-friendly improvements */
@media (max-width: 768px) {
    /* Larger touch targets */
    button, 
    .btn,
    .nav-link,
    .table-checkbox {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better form inputs on mobile */
    input, 
    select, 
    textarea {
        font-size: 16px !important; /* Prevents zoom on focus in iOS */
        padding: 12px !important;
    }
    
    /* Modal improvements */
    .modal-content {
        width: 90%;
        margin: 20px auto;
        padding: 20px;
    }
    
    /* Table improvements */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better spacing */
    .section {
        padding: 40px 0;
    }
    
    .card {
        margin-bottom: 15px;
    }
}

/* PWA specific */
@media (display-mode: standalone) {
    /* Hide browser UI elements when in PWA mode */
    .header {
        padding-top: env(safe-area-inset-top);
    }
    
    .footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* Add pull-to-refresh indicator */
    .pull-to-refresh {
        display: none;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #f5f5f5;
        --card-bg: #2d2d2d;
    }
    
    body {
        background: var(--bg-color);
        color: var(--text-color);
    }
    
    .card,
    .service-card,
    .booking-card {
        background: var(--card-bg);
    }
}

/* Print styles */
@media print {
    .header,
    .footer,
    .btn,
    .no-print {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .container {
        max-width: 100%;
        padding: 0;
    }
}