/* Mobile Responsiveness Enhancements for Royal Hospital Feedback System */

/* ===== MOBILE-FIRST APPROACH ===== */

/* Touch-Friendly Controls - Minimum 44x44px touch targets */
@media (max-width: 767.98px) {
    /* Buttons & Interactive Elements */
    .btn, 
    .form-control, 
    .form-select, 
    input[type="radio"] + label,
    input[type="checkbox"] + label {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Feedback Type Buttons - Stack vertically on mobile */
    .col-md-3 {
        width: 100% !important;
        margin-bottom: 12px;
    }

    .btn-check + label {
        padding: 1.2rem !important;
        font-size: 1.1rem;
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Form Inputs - Larger touch targets */
    input.form-control,
    textarea.form-control,
    select.form-select {
        padding: 12px 16px;
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: 8px;
    }

    textarea.form-control {
        min-height: 120px;
    }

    /* Radio/Checkbox - Larger clickable area */
    .form-check-input {
        width: 1.5em;
        height: 1.5em;
        margin-top: 0.15em;
        border-width: 2px;
    }

    .form-check-label {
        padding-left: 8px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Star Rating - Touch-friendly */
    .star-rating label {
        font-size: 2rem !important;
        padding: 8px;
        margin: 0 4px;
    }

    /* Progress Bar - More prominent */
    .progress {
        height: 25px !important;
        border-radius: 12px !important;
        margin-bottom: 24px;
    }

    .progress-bar {
        font-size: 14px;
        font-weight: 600;
    }

    /* Card Padding - Optimize for small screens */
    .card-body {
        padding: 1.5rem !important;
    }

    .card-header {
        padding: 1.5rem 1rem !important;
    }

    .card-header h2 {
        font-size: 1.5rem !important;
    }

    /* Form Labels - More readable */
    .form-label {
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    /* Alert Messages - Full width */
    .alert {
        border-radius: 10px;
        padding: 1rem;
        font-size: 0.95rem;
    }

    /* Submit Button - Fixed at bottom on mobile */
    #feedbackForm button[type="submit"] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        border-radius: 0;
        padding: 16px;
        font-size: 1.1rem;
        font-weight: 600;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
        margin: 0;
        width: 100%;
    }

    /* Add padding to form to prevent content hidden behind fixed button */
    #feedbackForm {
        padding-bottom: 80px;
    }

    /* File Upload - Camera-friendly */
    input[type="file"] {
        padding: 12px;
        font-size: 16px;
        border: 2px dashed #dee2e6;
        border-radius: 10px;
        background: #f8f9fa;
    }

    input[type="file"]::file-selector-button {
        padding: 10px 20px;
        border-radius: 6px;
        border: none;
        background: #0d6efd;
        color: white;
        font-weight: 600;
        margin-right: 12px;
        cursor: pointer;
    }

    /* Collapsible Sections - Mobile optimized */
    .collapse-header {
        font-size: 1rem;
        padding: 12px 16px;
        background: #f8f9fa;
        border-radius: 8px;
        cursor: pointer;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .collapse-header:hover {
        background: #e9ecef;
    }

    /* Table Scrolling - Horizontal scroll for admin tables */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        border-radius: 10px;
    }

    table {
        font-size: 0.85rem;
    }

    /* Spacing between form groups */
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }

    /* Icon sizing */
    .bi, .fas, .far {
        font-size: 1.2rem;
    }

    /* Privacy Policy Link - More prominent */
    .privacy-link {
        display: block;
        padding: 12px;
        background: #e7f3ff;
        border-radius: 8px;
        text-align: center;
        margin: 16px 0;
        font-weight: 500;
    }
}

/* ===== LANDSCAPE MOBILE (568px+) ===== */
@media (min-width: 568px) and (max-width: 767.98px) {
    .col-md-3 {
        width: 50% !important;
    }
}

/* ===== TABLET (768px - 991.98px) ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .btn-check + label {
        padding: 1rem;
        min-height: 52px;
    }

    .card-body {
        padding: 2rem !important;
    }
}

/* ===== SMALL SCREENS OPTIMIZATION ===== */
@media (max-width: 374.98px) {
    /* Extra small devices (iPhone SE, etc.) */
    .card-header h2 {
        font-size: 1.25rem !important;
    }

    .btn {
        font-size: 0.9rem;
        padding: 10px 16px;
    }

    .form-label {
        font-size: 1rem;
    }
}

/* ===== TOUCH DEVICE ENHANCEMENTS (ALL SIZES) ===== */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .btn:hover,
    .form-control:hover {
        transform: none;
    }

    /* Increase tap area for small clickable items */
    a, button {
        padding: 8px;
    }

    /* Prevent double-tap zoom */
    input, textarea, select {
        touch-action: manipulation;
    }

    /* Improve scrolling performance */
    * {
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== DESKTOP ENHANCEMENTS (992px+) ===== */
@media (min-width: 992px) {
    /* Smooth transitions on desktop */
    .btn, .form-control, .card {
        transition: all 0.3s ease;
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    /* Sticky sidebar on large screens */
    .sticky-sidebar {
        position: sticky;
        top: 20px;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .btn, .progress, .card-header, nav, footer {
        display: none !important;
    }

    .card {
        border: 1px solid #dee2e6 !important;
        box-shadow: none !important;
    }

    .card-body {
        padding: 0 !important;
    }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
/* Focus indicators for keyboard navigation */
*:focus {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

/* Skip to content link for screen readers */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #0d6efd;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn {
        border-width: 2px;
    }
    
    .form-control {
        border-width: 2px;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Dark mode support (if enabled in future) */
@media (prefers-color-scheme: dark) {
    :root {
        --bs-body-bg: #1a1a1a;
        --bs-body-color: #e9ecef;
        --bs-card-bg: #2d2d2d;
    }
}