/**
 * Mobile Optimizations for Aordre Subdomain
 * Optimalisert for Android og iPhone
 */

/* =============================================================================
   GLOBAL MOBILE OPTIMIZATIONS
   ============================================================================= */

/* Touch-friendly targets (minimum 44x44px) */
@media (max-width: 768px) {
    /* Buttons */
    .btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
    
    .btn-sm {
        min-height: 40px;
        padding: 0.375rem 0.75rem;
    }
    
    /* Input fields */
    .form-control,
    .form-select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Links */
    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Navbar links */
    .navbar-nav .nav-link {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }
    
    /* Cards */
    .card {
        margin-bottom: 1rem;
    }
    
    /* Modals */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-content {
        border-radius: 0.5rem;
    }
    
    /* Tables */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        font-size: 0.875rem;
    }
    
    .table th,
    .table td {
        padding: 0.5rem;
        white-space: nowrap;
    }
    
    /* Prevent text selection on action cards */
    .action-card {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        user-select: none;
        -webkit-user-select: none;
    }
}

/* =============================================================================
   DASHBOARD SPECIFIC
   ============================================================================= */

@media (max-width: 768px) {
    /* Stat cards - smaller font on mobile */
    .stat-card .stat-number {
        font-size: 1.75rem !important;
    }
    
    .stat-card i {
        font-size: 1.5rem !important;
    }
    
    /* Welcome section */
    .card-body h1 {
        font-size: 1.5rem;
    }
    
    /* Table improvements */
    .table-responsive {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
    }
    
    /* Info section - stack on mobile */
    .info-section .col-md-6 {
        margin-bottom: 1rem;
    }
}

/* =============================================================================
   TASK DETAIL PAGE SPECIFIC
   ============================================================================= */

@media (max-width: 768px) {
    /* Container padding */
    .external-container {
        padding: 10px;
    }
    
    /* Navbar */
    .navbar {
        margin-bottom: 10px;
    }
    
    /* Header with back button - DON'T stack flex items with flex-wrap */
    .row .d-flex.justify-content-between.align-items-center.flex-wrap {
        flex-direction: row;
        align-items: center !important;
    }
    
    /* Assignment info - stack columns */
    .assignment-info .col-md-6 {
        margin-bottom: 1rem;
    }
    
    /* User badges - wrap and allow multi-line on small screens */
    .badge {
        white-space: normal;
        word-break: break-word;
        text-align: left;
        max-width: 100%;
    }
    
    /* User badge email - hide on very small screens */
    .badge span[style*="opacity"] {
        display: none;
    }
    
    /* Map container */
    #map {
        min-height: 300px !important;
        height: 300px !important;
    }
    
    /* Action cards - full width, larger touch target */
    .action-card {
        min-height: 80px;
        padding: 1.25rem !important;
        margin-bottom: 1rem;
    }
    
    .action-card i {
        font-size: 2rem !important;
    }
    
    /* Attachment section */
    .attachment-preview-component .row {
        margin: 0;
    }
    
    .attachment-card {
        margin-bottom: 1rem;
    }
    
    /* Log section */
    #logDisplayContainer {
        max-height: 250px !important;
    }
    
    /* Form inputs in modals */
    .modal-body .form-control,
    .modal-body textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Modal buttons - stack on mobile */
    .modal-footer .btn {
        width: 100%;
        margin: 0.25rem 0;
    }
    
    .modal-footer .btn.flex-fill {
        flex: 1 1 100%;
    }
    
    .modal-footer .me-2 {
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
    }
    
    /* Two-column info layout - full width on mobile */
    .row > .col-md-6 {
        padding-bottom: 1rem;
    }
    
    /* Smaller headings on mobile */
    h2, .h2 {
        font-size: 1.5rem;
    }
    
    h5, .h5 {
        font-size: 1.1rem;
    }
    
    /* Full width buttons on mobile */
    .btn-outline-secondary {
        padding: 0.5rem 1rem;
    }
}

/* Extra small screens (phones in portrait) */
@media (max-width: 576px) {
    /* Even smaller stat numbers */
    .stat-card-professional .stat-number {
        font-size: 1.5rem !important;
    }
    
    /* Compact cards */
    .stat-card-professional {
        padding: 16px !important;
    }
    
    /* Show email in badge on screens >= 400px */
    .badge span[style*="opacity"] {
        display: none;
    }
    
    /* Task card mobile - more compact */
    .task-card-mobile {
        padding: 1rem;
    }
    
    /* Smaller page title */
    h2.text-muted {
        font-size: 1.25rem !important;
    }
}

/* =============================================================================
   LOGIN/MFA SPECIFIC
   ============================================================================= */

@media (max-width: 768px) {
    /* Login container */
    .login-container,
    .mfa-container {
        margin: 1rem;
        padding: 1.5rem;
        max-width: calc(100% - 2rem);
    }
    
    /* MFA code inputs - larger on mobile */
    .code-input {
        width: 50px !important;
        height: 60px !important;
        font-size: 1.75rem !important;
    }
    
    /* MFA buttons - stack on mobile */
    .mfa-container .row.g-2 {
        flex-direction: column;
    }
    
    .mfa-container .col-6 {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* =============================================================================
   TABLET OPTIMIZATIONS (768px - 1024px)
   ============================================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
    /* Stat cards - medium size */
    .stat-card .stat-number {
        font-size: 2rem;
    }
    
    /* Map */
    #map {
        min-height: 400px;
    }
    
    /* Action cards */
    .action-card {
        min-height: 70px;
    }
}

/* =============================================================================
   iOS SPECIFIC FIXES
   ============================================================================= */

@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific */
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on focus */
    }
    
    /* Fix for iOS viewport height */
    body {
        min-height: -webkit-fill-available;
    }
    
    /* Fix for iOS safe area */
    .navbar {
        padding-top: env(safe-area-inset-top);
    }
}

/* =============================================================================
   ANDROID SPECIFIC FIXES
   ============================================================================= */

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Android Chrome specific */
    .form-control:focus,
    .form-select:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
}

/* =============================================================================
   LANDSCAPE ORIENTATION
   ============================================================================= */

@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce padding in landscape */
    .external-container {
        padding: 5px;
    }
    
    /* Smaller navbar */
    .navbar {
        margin-bottom: 5px;
    }
    
    /* Map - use more height in landscape */
    #map {
        min-height: 250px !important;
        height: 250px !important;
    }
    
    /* Stat cards - smaller in landscape */
    .stat-card .stat-number {
        font-size: 1.5rem !important;
    }
}

/* =============================================================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================================================= */

/* Focus states for keyboard navigation */
.btn:focus,
.form-control:focus,
.nav-link:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card {
        border: 2px solid #000;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}