/**
 * KIUAE Mobile Optimizations
 * Addresses Pain Point 2b: Mobile Experience Enhancement
 * 
 * Features:
 * - Mobile-first responsive design
 * - Touch-friendly interactions
 * - Optimized form layouts
 * - Swipe gestures support
 * - Enhanced mobile navigation
 */

/* ===== Mobile-First Base Styles ===== */
@media screen and (max-width: 768px) {
    
    /* Container and Layout Improvements */
    .container,
    .modern-container {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    /* Enhanced Touch Targets */
    button,
    .btn,
    .modern-btn,
    a[role="button"],
    input[type="submit"],
    input[type="button"] {
        min-height: 48px !important; /* Increased for better touch */
        min-width: 48px;
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-base);
    }

    /* Form Optimizations */
    .modern-form-input,
    input,
    select,
    textarea {
        min-height: 48px;
        padding: var(--space-4);
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: var(--radius-lg);
    }

    textarea.modern-form-input {
        min-height: 120px;
        resize: vertical;
    }

    /* Enhanced Form Groups */
    .modern-form-group,
    .form-group {
        margin-bottom: var(--space-6);
    }

    .modern-form-label {
        font-size: var(--text-base);
        margin-bottom: var(--space-3);
        display: block;
        font-weight: var(--font-semibold);
    }

    /* Card Optimizations */
    .modern-card,
    .card {
        margin-bottom: var(--space-4);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-md);
    }

    .modern-card-body,
    .card-body {
        padding: var(--space-5);
    }

    .modern-card-header,
    .card-header {
        padding: var(--space-4) var(--space-5);
    }

    /* Grid System Mobile Override */
    .modern-grid,
    .row {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-4) !important;
    }

    .modern-grid > *,
    .col,
    .col-md-4,
    .col-md-6,
    .col-lg-4,
    .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    /* Dashboard Mobile Layout */
    .dashboard,
    .department-dashboard {
        padding: var(--space-4) 0;
    }

    .dashboard-title,
    .modern-dashboard-title {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-4);
        text-align: center;
    }

    .dashboard-subtitle,
    .modern-dashboard-subtitle {
        font-size: var(--text-lg);
        text-align: center;
        margin-bottom: var(--space-6);
    }

    /* Quick Actions Mobile Layout */
    .modern-quick-actions {
        flex-direction: column !important;
        gap: var(--space-4) !important;
    }

    .modern-quick-action {
        min-width: auto !important;
        padding: var(--space-5) !important;
        border-radius: var(--radius-xl) !important;
        box-shadow: var(--shadow-md) !important;
    }

    .modern-quick-action:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    .modern-quick-action-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: var(--text-2xl) !important;
    }

    .modern-quick-action-title {
        font-size: var(--text-xl) !important;
        margin-bottom: var(--space-3) !important;
    }

    .modern-quick-action-description {
        font-size: var(--text-base) !important;
        line-height: 1.6 !important;
    }

    /* Workflow Cards Mobile Enhancement */
    .workflow-card,
    .card.workflow-item {
        margin-bottom: var(--space-4);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-md);
        transition: all var(--transition-fast);
    }

    .workflow-card:active {
        transform: scale(0.98);
        box-shadow: var(--shadow-lg);
    }

    .workflow-card .card-title {
        font-size: var(--text-xl);
        margin-bottom: var(--space-3);
    }

    .workflow-card .card-text {
        font-size: var(--text-base);
        line-height: 1.6;
    }

    /* Status Badges Mobile */
    .modern-status-badge,
    .status-badge {
        font-size: var(--text-sm) !important;
        padding: var(--space-2) var(--space-4) !important;
        border-radius: var(--radius-full) !important;
    }

    /* Progress Tracker Mobile */
    .progress-tracker-enhanced {
        border-radius: var(--radius-xl);
        margin: var(--space-4) 0;
        box-shadow: var(--shadow-md);
    }

    .progress-steps {
        flex-direction: column !important;
        gap: var(--space-4) !important;
        align-items: stretch !important;
    }

    .progress-step {
        flex-direction: row !important;
        padding: var(--space-4) !important;
        border-radius: var(--radius-lg) !important;
        border: 1px solid var(--gray-200) !important;
        background: white !important;
        align-items: center !important;
        text-align: left !important;
    }

    .step-icon {
        margin-right: var(--space-4) !important;
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }

    .step-content {
        flex: 1;
    }

    .step-connector {
        display: none !important;
    }

    /* Collapsible Sections Mobile */
    .modern-collapsible-header {
        padding: var(--space-4) var(--space-5) !important;
        font-size: var(--text-lg) !important;
    }

    .modern-collapsible-content {
        padding: var(--space-5) !important;
    }

    /* Filter Bar Mobile */
    .workflow-filter-bar {
        flex-direction: column !important;
        gap: var(--space-3) !important;
        margin-bottom: var(--space-6) !important;
    }

    .workflow-filter-bar input,
    .workflow-filter-bar select {
        width: 100% !important;
        min-width: auto !important;
    }

    /* Recommendations Mobile */
    .recommendations-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4) !important;
    }

    .recommendation-item {
        padding: var(--space-5) !important;
        border-radius: var(--radius-xl) !important;
        box-shadow: var(--shadow-md) !important;
    }

    /* Navigation Mobile Enhancements */
    .navbar,
    .header {
        padding: var(--space-3) var(--space-4);
    }

    .navbar-brand {
        font-size: var(--text-xl);
    }

    .nav-links {
        flex-direction: column;
        gap: var(--space-2);
    }

    /* Button Groups Mobile */
    .btn-group,
    .button-group {
        flex-direction: column !important;
        width: 100%;
    }

    .btn-group .btn,
    .btn-group .modern-btn {
        width: 100% !important;
        margin-bottom: var(--space-2);
        border-radius: var(--radius-lg) !important;
    }

    /* Table Mobile Optimizations */
    .table-responsive {
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        margin-bottom: var(--space-6);
    }

    table {
        font-size: var(--text-sm);
    }

    th,
    td {
        padding: var(--space-3) var(--space-2);
        vertical-align: middle;
    }

    /* Hide less important columns on mobile */
    .table .d-none-mobile,
    .table .hide-mobile {
        display: none !important;
    }

    /* Toast Notifications Mobile */
    #toast-container {
        top: var(--space-4) !important;
        left: var(--space-3) !important;
        right: var(--space-3) !important;
        width: auto !important;
    }

    .toast-enhanced {
        margin-bottom: var(--space-2);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }
}

/* ===== Touch and Gesture Enhancements ===== */
@media (hover: none) and (pointer: coarse) {
    
    /* Remove hover effects on touch devices */
    .modern-card:hover,
    .card:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }

    .modern-btn:hover,
    .btn:hover {
        transform: none;
    }

    .modern-quick-action:hover {
        transform: none;
    }

    /* Add touch feedback */
    .modern-card:active,
    .card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }

    .modern-btn:active,
    .btn:active {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }

    /* Enhanced tap targets for small elements */
    .status-badge,
    .badge,
    small,
    .small {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        padding: var(--space-2) var(--space-3);
    }
}

/* ===== Landscape Mobile Optimizations ===== */
@media screen and (max-width: 768px) and (orientation: landscape) {
    
    /* Optimize for landscape mobile */
    .modern-quick-actions {
        flex-direction: row !important;
        flex-wrap: wrap;
    }

    .modern-quick-action {
        flex: 1;
        min-width: 240px;
    }

    .recommendations-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .progress-steps {
        flex-direction: row !important;
        flex-wrap: wrap;
    }

    .progress-step {
        flex: 1;
        min-width: 200px;
    }
}

/* ===== Large Mobile / Small Tablet (481px - 768px) ===== */
@media screen and (min-width: 481px) and (max-width: 768px) {
    
    /* Slightly larger touch targets */
    .modern-btn,
    .btn {
        min-height: 52px;
        padding: var(--space-4) var(--space-6);
    }

    /* Two-column layout for some sections */
    .modern-grid.grid-cols-2-mobile {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-4) !important;
    }

    .recommendations-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Larger cards for better readability */
    .modern-card-body {
        padding: var(--space-6);
    }
}

/* ===== Small Mobile (max-width: 480px) ===== */
@media screen and (max-width: 480px) {
    
    /* Extra small device optimizations */
    .container,
    .modern-container {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .modern-card-body,
    .card-body {
        padding: var(--space-4);
    }

    .modern-card-header,
    .card-header {
        padding: var(--space-3) var(--space-4);
    }

    .dashboard-title,
    .modern-dashboard-title {
        font-size: var(--text-xl);
    }

    .modern-quick-action-title {
        font-size: var(--text-lg) !important;
    }

    .modern-quick-action-icon {
        width: 48px !important;
        height: 48px !important;
    }

    /* Simplified layouts */
    .modern-collapsible-header {
        padding: var(--space-3) var(--space-4) !important;
    }

    .modern-collapsible-content {
        padding: var(--space-4) !important;
    }
}

/* ===== Swipe Gesture Indicators ===== */
.swipe-indicator {
    position: absolute;
    right: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: var(--text-sm);
    opacity: 0.7;
    pointer-events: none;
}

.swipe-indicator::after {
    content: '← Swipe for actions';
    display: inline-block;
    animation: swipeHint 2s ease-in-out infinite;
}

@keyframes swipeHint {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(-5px);
        opacity: 1;
    }
}

/* ===== Mobile Modal Optimizations ===== */
@media screen and (max-width: 768px) {
    
    .modal,
    .modal-dialog {
        margin: var(--space-4);
        max-width: calc(100vw - var(--space-8));
    }

    .modal-content {
        border-radius: var(--radius-xl);
        border: none;
        box-shadow: var(--shadow-xl);
    }

    .modal-header {
        padding: var(--space-5);
        border-bottom: 1px solid var(--gray-200);
    }

    .modal-body {
        padding: var(--space-5);
        max-height: 60vh;
        overflow-y: auto;
    }

    .modal-footer {
        padding: var(--space-4) var(--space-5);
        border-top: 1px solid var(--gray-200);
    }

    .modal-footer .btn {
        width: 100%;
        margin-bottom: var(--space-2);
    }
}

/* ===== Accessibility on Mobile ===== */
@media screen and (max-width: 768px) {
    
    /* Enhanced focus indicators for mobile */
    .modern-btn:focus-visible,
    .btn:focus-visible,
    .modern-form-input:focus-visible {
        outline: 3px solid var(--primary-500);
        outline-offset: 2px;
    }

    /* Ensure readable text sizes */
    body {
        font-size: var(--text-base);
        line-height: 1.6;
    }

    /* Better contrast for mobile screens */
    .text-muted,
    .text-secondary {
        color: var(--gray-600) !important;
    }
}

/* ===== Loading States for Mobile ===== */
.mobile-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
}

.mobile-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--gray-200);
    border-top-color: var(--primary-500);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--space-4);
}

.mobile-loading-text {
    font-size: var(--text-lg);
    color: var(--gray-600);
    font-weight: var(--font-medium);
}

/* ===== Pull-to-Refresh Indicator ===== */
.pull-to-refresh {
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-600);
    color: white;
    padding: var(--space-3) var(--space-6);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    box-shadow: var(--shadow-lg);
    transition: top var(--transition-fast);
    z-index: 1000;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.pull-to-refresh.visible {
    top: 0;
}

/* ===== Mobile-Specific Animations ===== */
@media screen and (max-width: 768px) {
    
    .modern-fade-in,
    .fade-in {
        animation: mobileFadeIn 0.3s ease-out;
    }

    .modern-slide-up,
    .slide-up {
        animation: mobileSlideUp 0.3s ease-out;
    }
}

@keyframes mobileFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mobileSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ===== Safe Area Handling for iOS ===== */
@supports (padding-top: env(safe-area-inset-top)) {
    .mobile-safe-area {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ===== High DPI / Retina Display Optimizations ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .modern-card,
    .card {
        border: 0.5px solid var(--gray-200);
    }

    .modern-btn,
    .btn {
        border-width: 0.5px;
    }
}