/* ==========================================================================
   Mobile Responsive Styles for SOMASUQ
   ========================================================================== */

/* Base Mobile Styles */
@media (max-width: 768px) {
    
    /* General Layout */
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Typography */
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.6rem !important; }
    h3 { font-size: 1.4rem !important; }
    h4 { font-size: 1.2rem !important; }
    h5 { font-size: 1.1rem !important; }
    h6 { font-size: 1rem !important; }
    
    /* Navigation */
    .navbar {
        padding: 0.5rem 1rem !important;
    }
    
    .navbar-brand {
        font-size: 1.2rem !important;
        padding: 0.25rem 0 !important;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    .navbar-toggler {
        padding: 0.25rem 0.5rem !important;
        font-size: 1rem !important;
        border: none !important;
    }
    
    /* Dropdown menus */
    .dropdown-menu {
        border-radius: 8px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
        border: none !important;
        margin-top: 5px !important;
    }
    
    .dropdown-item {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Cards */
    .card {
        margin-bottom: 1rem !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .card-header {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
    }
    
    /* Buttons */
    .btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
    }
    
    .btn-lg {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    .btn-sm {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Forms */
    .form-control {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
    }
    
    .form-select {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
    }
    
    .form-label {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .input-group {
        margin-bottom: 1rem !important;
    }
    
    .input-group-text {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Tables */
    .table-responsive {
        border-radius: 8px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .table {
        font-size: 0.85rem !important;
        margin-bottom: 0 !important;
    }
    
    .table th,
    .table td {
        padding: 0.5rem !important;
        vertical-align: middle !important;
    }
    
    /* Hide some table columns on mobile */
    .table .d-none-mobile {
        display: none !important;
    }
    
    /* Modals */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }
    
    .modal-content {
        border-radius: 12px !important;
    }
    
    .modal-header {
        padding: 1rem !important;
        border-bottom: 1px solid #dee2e6 !important;
    }
    
    .modal-body {
        padding: 1rem !important;
    }
    
    .modal-footer {
        padding: 1rem !important;
        border-top: 1px solid #dee2e6 !important;
    }
    
    /* Alerts */
    .alert {
        padding: 0.75rem 1rem !important;
        margin-bottom: 1rem !important;
        border-radius: 8px !important;
        font-size: 0.9rem !important;
    }
    
    /* Breadcrumbs */
    .breadcrumb {
        padding: 0.5rem 0 !important;
        margin-bottom: 1rem !important;
        font-size: 0.85rem !important;
        background: transparent !important;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        content: "←" !important;
    }
    
    /* Pagination */
    .pagination {
        justify-content: center !important;
        margin-bottom: 1rem !important;
    }
    
    .page-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
        border-radius: 6px !important;
        margin: 0 2px !important;
    }
    
    /* Spacing utilities */
    .mb-mobile-2 { margin-bottom: 0.5rem !important; }
    .mb-mobile-3 { margin-bottom: 1rem !important; }
    .mb-mobile-4 { margin-bottom: 1.5rem !important; }
    .mb-mobile-5 { margin-bottom: 3rem !important; }
    
    .mt-mobile-2 { margin-top: 0.5rem !important; }
    .mt-mobile-3 { margin-top: 1rem !important; }
    .mt-mobile-4 { margin-top: 1.5rem !important; }
    .mt-mobile-5 { margin-top: 3rem !important; }
    
    .p-mobile-2 { padding: 0.5rem !important; }
    .p-mobile-3 { padding: 1rem !important; }
    .p-mobile-4 { padding: 1.5rem !important; }
    
    /* Text utilities */
    .text-mobile-center { text-align: center !important; }
    .text-mobile-left { text-align: left !important; }
    .text-mobile-right { text-align: right !important; }
    
    /* Display utilities */
    .d-mobile-none { display: none !important; }
    .d-mobile-block { display: block !important; }
    .d-mobile-inline { display: inline !important; }
    .d-mobile-inline-block { display: inline-block !important; }
    .d-mobile-flex { display: flex !important; }
    
    /* Flex utilities */
    .flex-mobile-column { flex-direction: column !important; }
    .flex-mobile-row { flex-direction: row !important; }
    .justify-content-mobile-center { justify-content: center !important; }
    .align-items-mobile-center { align-items: center !important; }
    
    /* Width utilities */
    .w-mobile-100 { width: 100% !important; }
    .w-mobile-75 { width: 75% !important; }
    .w-mobile-50 { width: 50% !important; }
    .w-mobile-25 { width: 25% !important; }
}

/* Extra Small Devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    
    /* Even smaller spacing */
    .container {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* Smaller typography */
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1.2rem !important; }
    h4 { font-size: 1.1rem !important; }
    
    /* Smaller buttons */
    .btn {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Smaller forms */
    .form-control,
    .form-select {
        padding: 0.6rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Stack buttons vertically */
    .btn-group-mobile-vertical .btn {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Full width modals */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
    }
    
    .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
    }
    
    /* Smaller table text */
    .table {
        font-size: 0.75rem !important;
    }
    
    .table th,
    .table td {
        padding: 0.25rem !important;
    }
}

/* Landscape orientation adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    
    /* Reduce vertical spacing in landscape */
    .mb-3 { margin-bottom: 0.5rem !important; }
    .mb-4 { margin-bottom: 1rem !important; }
    .mb-5 { margin-bottom: 1.5rem !important; }
    
    .mt-3 { margin-top: 0.5rem !important; }
    .mt-4 { margin-top: 1rem !important; }
    .mt-5 { margin-top: 1.5rem !important; }
    
    .py-3 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
}

/* Touch-friendly improvements */
@media (max-width: 768px) {
    
    /* Larger touch targets */
    .btn,
    .form-control,
    .form-select,
    .nav-link,
    .dropdown-item,
    .page-link {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Better touch scrolling */
    .overflow-auto {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Prevent zoom on input focus */
    .form-control,
    .form-select,
    input,
    textarea,
    select {
        font-size: 16px !important;
    }
    
    /* Sticky elements adjustments */
    .sticky-top {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1020 !important;
    }
    
    /* Better focus states for touch */
    .btn:focus,
    .form-control:focus,
    .form-select:focus {
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
        outline: none !important;
    }
}

/* Print styles */
@media print {
    .d-print-none {
        display: none !important;
    }
    
    .navbar,
    .btn,
    .pagination,
    .modal,
    .alert {
        display: none !important;
    }
    
    .container {
        max-width: none !important;
        padding: 0 !important;
    }
    
    .card {
        border: 1px solid #dee2e6 !important;
        box-shadow: none !important;
    }
}

/* Dark mode support for mobile */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    
    .card {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
        color: #e2e8f0 !important;
    }
    
    .form-control,
    .form-select {
        background-color: #4a5568 !important;
        border-color: #718096 !important;
        color: #e2e8f0 !important;
    }
    
    .form-control:focus,
    .form-select:focus {
        background-color: #4a5568 !important;
        border-color: #63b3ed !important;
        color: #e2e8f0 !important;
    }
    
    .modal-content {
        background-color: #2d3748 !important;
        color: #e2e8f0 !important;
    }
    
    .dropdown-menu {
        background-color: #2d3748 !important;
        border-color: #4a5568 !important;
    }
    
    .dropdown-item {
        color: #e2e8f0 !important;
    }
    
    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: #4a5568 !important;
        color: #e2e8f0 !important;
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    
    /* High contrast mode */
    @media (prefers-contrast: high) {
        .btn {
            border-width: 2px !important;
        }
        
        .form-control,
        .form-select {
            border-width: 2px !important;
        }
        
        .card {
            border-width: 2px !important;
        }
    }
    
    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Focus visible improvements */
    .btn:focus-visible,
    .form-control:focus-visible,
    .form-select:focus-visible,
    .nav-link:focus-visible {
        outline: 2px solid #0066cc !important;
        outline-offset: 2px !important;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        
        /* Fix iOS Safari viewport issues */
        .container {
            min-height: -webkit-fill-available !important;
        }
        
        /* Fix iOS Safari input zoom */
        .form-control,
        .form-select,
        input,
        textarea,
        select {
            font-size: 16px !important;
            transform: translateZ(0) !important;
        }
        
        /* Fix iOS Safari sticky positioning */
        .sticky-top {
            position: -webkit-sticky !important;
            position: sticky !important;
        }
        
        /* Fix iOS Safari overflow scrolling */
        .overflow-auto,
        .table-responsive {
            -webkit-overflow-scrolling: touch !important;
        }
    }
}

/* Android Chrome specific fixes */
@media (max-width: 768px) {
    
    /* Fix Android Chrome viewport height */
    .min-vh-100 {
        min-height: 100vh !important;
        min-height: calc(var(--vh, 1vh) * 100) !important;
    }
    
    /* Fix Android Chrome input styling */
    .form-control,
    .form-select {
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    
    /* Fix Android Chrome button styling */
    .btn {
        -webkit-appearance: none !important;
        appearance: none !important;
        border-radius: 8px !important;
    }
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    
    /* GPU acceleration for smooth scrolling */
    .card,
    .btn,
    .modal-content {
        transform: translateZ(0) !important;
        backface-visibility: hidden !important;
    }
    
    /* Optimize images for mobile */
    img {
        max-width: 100% !important;
        height: auto !important;
        image-rendering: optimizeQuality !important;
    }
    
    /* Lazy loading hint */
    img[loading="lazy"] {
        content-visibility: auto !important;
    }
}