/* ============================================
   NextSlot - Mobile Specific Enhancements
   ============================================ */

/* ===== Touch-Friendly Sizing ===== */
@media (max-width: 768px) {
    /* Larger touch targets for mobile */
    .btn,
    .btn-sm,
    .form-control,
    .form-select,
    a.nav-link,
    .dropdown-item {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better spacing for mobile cards */
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1.25rem;
    }
    
    /* Mobile-friendly navigation */
    .navbar-toggler {
        padding: 0.5rem;
        font-size: 1.25rem;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 0.5rem;
    }
    
    .navbar-toggler:focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    }
    
    /* Mobile dropdown improvements */
    .dropdown-menu {
        max-height: 300px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Better mobile forms */
    .form-control,
    .form-select,
    textarea.form-control {
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 0.875rem;
    }
    
    .form-label {
        font-size: 0.875rem;
        font-weight: 600;
    }
    
    /* Mobile table improvements */
    .table-responsive {
        border-radius: 0.75rem;
        margin-bottom: 1rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .table {
        font-size: 0.875rem;
        margin-bottom: 0;
    }
    
    .table th {
        font-size: 0.75rem;
        padding: 0.75rem 0.5rem;
        white-space: nowrap;
    }
    
    .table td {
        padding: 0.75rem 0.5rem;
    }
    
    /* Stack action buttons on mobile */
    .table .btn-group {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .table .btn-sm {
        width: 100%;
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }
    
    /* Mobile alert improvements */
    .alert {
        font-size: 0.875rem;
        padding: 1rem;
    }
    
    .alert i {
        font-size: 1.25rem;
    }
    
    /* Mobile badge sizing */
    .badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
    
    /* Mobile hero section */
    .hero-section {
        padding: 2.5rem 1rem;
    }
    
    .hero-section h1 {
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    .hero-section p {
        font-size: 0.95rem;
    }
    
    /* Mobile container padding */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Mobile modal improvements */
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .modal-content {
        border-radius: 1rem;
    }
    
    /* Better mobile calendar */
    .fc-toolbar {
        flex-direction: column !important;
        gap: 0.5rem;
    }
    
    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    
    .fc .fc-button {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Mobile stat cards */
    .stat-card {
        margin-bottom: 1rem;
    }
    
    .stat-card h2 {
        font-size: 2.25rem;
    }
    
    .stat-card p {
        font-size: 1rem;
    }
    
    /* Mobile grid adjustments */
    .row > * {
        margin-bottom: 1rem;
    }
    
    /* Bottom spacing for fixed elements */
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ===== Extra Small Devices (< 576px) ===== */
@media (max-width: 575px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }
    
    .btn {
        padding: 0.625rem 1rem;
        font-size: 0.9rem;
    }
    
    .btn-lg {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
    }
    
    .card-header {
        padding: 1rem;
        font-size: 1rem;
    }
    
    /* Full width buttons on very small screens */
    .btn-group {
        width: 100%;
    }
    
    .btn-group .btn {
        flex: 1;
    }
}

/* ===== Landscape Mode Adjustments ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        padding: 2rem 0;
    }
    
    .navbar {
        padding: 0.5rem 0;
    }
    
    .my-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
}

/* ===== iOS Specific Fixes ===== */
@supports (-webkit-touch-callout: none) {
    /* Fix iOS input zoom */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
    
    /* Fix iOS safe area */
    body {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* Fix iOS bounce scroll */
    body {
        overscroll-behavior-y: none;
    }
}

/* ===== Android Specific Fixes ===== */
@media (max-width: 768px) {
    /* Better tap highlighting */
    * {
        -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
    }
    
    /* Smooth scrolling on Android */
    * {
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== Tablet Landscape (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        max-width: 720px;
    }
    
    .card-columns {
        column-count: 2;
    }
    
    /* Better use of tablet space */
    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ===== Prevent Zoom on Focus (Mobile) ===== */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ===== Touch Device Hover Removal ===== */
@media (hover: none) and (pointer: coarse) {
    .card:hover,
    .btn:hover,
    .nav-link:hover {
        transform: none;
    }
    
    /* But keep active states */
    .btn:active {
        transform: scale(0.98);
    }
    
    .card:active {
        transform: scale(0.99);
    }
}

/* ===== PWA Safe Areas ===== */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .navbar {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    footer {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}

/* ===== Accessibility on Mobile ===== */
@media (max-width: 768px) {
    /* Larger focus indicators on mobile */
    *:focus {
        outline: 3px solid #667eea;
        outline-offset: 3px;
    }
    
    /* Better skip link */
    .skip-link {
        position: absolute;
        top: -40px;
        left: 0;
        background: #667eea;
        color: white;
        padding: 8px;
        text-decoration: none;
        z-index: 100;
    }
    
    .skip-link:focus {
        top: 0;
    }
}

/* ===== Performance Optimizations for Mobile ===== */
@media (max-width: 768px) {
    /* Disable animations on low-end devices */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Optimize will-change */
    .card img {
        will-change: auto;
    }
    
    /* Lazy load images */
    img[loading="lazy"] {
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    img[loading="lazy"].loaded {
        opacity: 1;
    }
}

/* ===== Mobile Utility Classes ===== */
@media (max-width: 768px) {
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
    }
    
    .mobile-text-center {
        text-align: center !important;
    }
    
    .mobile-stack {
        flex-direction: column !important;
    }
    
    .mobile-no-padding {
        padding: 0 !important;
    }
    
    .mobile-small-gap {
        gap: 0.5rem !important;
    }
}

/* ===== Print Styles for Mobile ===== */
@media print {
    @page {
        margin: 1cm;
    }
    
    body {
        font-size: 12pt;
    }
    
    .navbar,
    .btn,
    footer,
    .no-print {
        display: none !important;
    }
    
    .card {
        page-break-inside: avoid;
    }
}

/* ===== End of Mobile CSS ===== */