/**
 * MOBILE LAYOUT MASTER - THE ONLY MOBILE/PWA LAYOUT CSS YOU NEED
 * This replaces ALL other mobile/responsive fix files
 * 
 * RULES:
 * 1. Mobile-first approach (base styles for mobile)
 * 2. No sidebar on mobile - full width content
 * 3. Touch-optimized spacing and sizing
 * 4. PWA compatible
 */

/* ===============================================
   MOBILE BASE LAYOUT (<1024px)
   =============================================== */

@media (max-width: 1023px) {
    /* Reset everything for mobile */
    .app-container {
        display: block !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    /* Hide sidebar completely on mobile */
    .bankdash-sidebar,
    .talentsync-navbar {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 85vw !important;
        max-width: 320px !important;
        min-width: 260px !important;
        height: 100vh !important;
        background: var(--sidebar-bg, #ffffff) !important;
        z-index: 9999 !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    /* Sidebar open state (when menu is toggled) */
    .bankdash-sidebar.open,
    .bankdash-sidebar.active,
    body.sidebar-open .bankdash-sidebar {
        left: 0 !important;
    }
    
    /* Main content - full width on mobile */
    .main-content {
        width: 100vw !important;
        height: auto !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* Main container padding for mobile */
    .main-content .main-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: calc(100vh - 120px) !important;
        overflow: visible !important;
    }
    
    /* Mobile navigation bar */
    .mobile-nav,
    .nav-framer {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        height: 56px !important;
        background: var(--nav-bg, #ffffff) !important;
        border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
        z-index: 1000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 15px !important;
    }
    
    /* Sidebar overlay */
    .sidebar-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9998 !important;
    }
    
    /* Show overlay when sidebar is open */
    body.sidebar-open .sidebar-overlay,
    .sidebar-overlay.active {
        display: block !important;
    }
}

/* ===============================================
   TOUCH OPTIMIZATIONS
   =============================================== */

@media (max-width: 1023px) {
    /* Larger touch targets */
    button,
    .btn,
    a,
    input,
    select,
    textarea {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Spacing for touch */
    .form-group {
        margin-bottom: 20px !important;
    }
    
    /* Prevent horizontal scroll - enhanced fix */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Specific fix for navigation overflow */
    .talentsync-navbar {
        max-width: 85vw !important;
        overflow-x: hidden !important;
        contain: layout style !important;
    }

    /* Ensure main content never overflows horizontally */
    .main-content {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* Disable hover effects on touch devices */
    @media (hover: none) {
        *:hover {
            all: initial !important;
        }
    }
}

/* ===============================================
   PHONE SPECIFIC (< 768px)
   =============================================== */

@media (max-width: 767px) {
    /* Even smaller padding on phones */
    .main-content .main-container {
        padding: 10px !important;
    }

    /* Extra safe navigation width for very small phones */
    .talentsync-navbar {
        width: 80vw !important;
        max-width: 280px !important;
        min-width: 240px !important;
    }
    
    /* Stack elements vertically */
    .row {
        display: block !important;
    }
    
    .col,
    [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        display: block !important;
        margin-bottom: 15px !important;
    }
    
    /* Full width buttons on mobile */
    .btn,
    button {
        width: 100% !important;
        display: block !important;
        margin-bottom: 10px !important;
    }
}

/* ===============================================
   TABLET SPECIFIC (768px - 1023px)
   =============================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    /* Slightly larger padding on tablets */
    .main-content .main-container {
        padding: 20px !important;
    }
    
    /* Allow some horizontal layouts on tablet */
    .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    .col-md-6 {
        width: 50% !important;
    }
    
    .col-md-4 {
        width: 33.333% !important;
    }
}

/* ===============================================
   PWA SPECIFIC STYLES
   =============================================== */

/* PWA safe areas for notched devices */
@supports (padding: env(safe-area-inset-left)) {
    .app-container {
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
    }
    
    .mobile-nav,
    .nav-framer {
        padding-top: env(safe-area-inset-top) !important;
    }
    
    .main-content .main-container {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
}

/* PWA viewport meta adjustments */
@viewport {
    width: device-width;
    initial-scale: 1;
    maximum-scale: 1;
    user-scalable: no;
}

/* ===============================================
   UTILITIES
   =============================================== */

/* Hide on mobile */
@media (max-width: 1023px) {
    .desktop-only,
    .d-none-mobile {
        display: none !important;
    }
}

/* Show only on mobile */
.mobile-only {
    display: none !important;
}

@media (max-width: 1023px) {
    .mobile-only {
        display: block !important;
    }
}

/* ===============================================
   OVERRIDE ALL OTHER MOBILE CSS
   =============================================== */

@media (max-width: 1023px) {
    body .app-container,
    html body .app-container,
    html body div.app-container {
        /* Use !important to override all other mobile rules */
    }
}

/* ===============================================
   PROFILER IMPORT WIZARD MOBILE FIX (2024-09-15)
   Mobile-optimized Import Wizard fixes
   =============================================== */

@media (max-width: 1023px) {
    /* Mobile Import Wizard container */
    body[class*="profiler"] .wizard-container,
    .wizard-container {
        margin: 10px !important;
        padding: 15px !important;
        max-width: none !important;
        width: calc(100vw - 20px) !important;
        box-sizing: border-box !important;
    }
    
    /* Mobile wizard content area */
    body[class*="profiler"] .wizard-content,
    .wizard-content {
        min-height: 300px !important;
        height: auto !important;
        max-height: none !important;
        padding: 15px !important;
        margin-bottom: 20px !important;
        overflow: visible !important;
    }
    
    /* Mobile navigation buttons - stack vertically */
    body[class*="profiler"] .wizard-buttons,
    .wizard-buttons {
        position: sticky !important;
        bottom: 10px !important;
        background: #2a2a2a !important;
        padding: 15px !important;
        margin: 20px -15px -15px -15px !important;
        border-top: 1px solid #444 !important;
        border-radius: 0 0 8px 8px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        z-index: 100 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Mobile button styling */
    body[class*="profiler"] .wizard-buttons .btn,
    .wizard-buttons .btn {
        width: 100% !important;
        min-width: auto !important;
        padding: 15px 20px !important;
        font-size: 1rem !important;
        text-align: center !important;
        border: none !important;
        border-radius: 6px !important;
        font-weight: bold !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        z-index: 101 !important;
    }
    
    /* Mobile wizard steps - horizontal scroll if needed */
    body[class*="profiler"] .wizard-steps,
    .wizard-steps {
        display: flex !important;
        justify-content: space-between !important;
        margin-bottom: 30px !important;
        overflow-x: auto !important;
        padding: 0 10px !important;
        position: relative !important;
    }
    
    body[class*="profiler"] .wizard-step,
    .wizard-step {
        min-width: 60px !important;
        flex-shrink: 0 !important;
        text-align: center !important;
        font-size: 0.8rem !important;
    }
    
    body[class*="profiler"] .step-circle,
    .step-circle {
        width: 35px !important;
        height: 35px !important;
        margin: 0 auto 8px !important;
        font-size: 0.9rem !important;
    }
    
    /* Mobile consultants preview - better scrolling */
    body[class*="profiler"] #consultantPreviewArea,
    #consultantPreviewArea {
        max-height: 400px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 5px !important;
        margin-bottom: 15px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Mobile consultant cards - better touch targets */
    body[class*="profiler"] .item-card,
    .item-card {
        padding: 15px !important;
        margin-bottom: 10px !important;
        cursor: pointer !important;
        min-height: 60px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    /* Mobile tab system - horizontal scroll */
    body[class*="profiler"] .tab-container,
    .tab-container {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 10px !important;
    }
    
    body[class*="profiler"] .tab,
    .tab {
        display: inline-block !important;
        white-space: nowrap !important;
        min-width: 120px !important;
        text-align: center !important;
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
    }
    
    /* Mobile content area - full height with proper scrolling */
    body[class*="profiler"] .content-area,
    .content-area {
        height: calc(100vh - 120px) !important;
        min-height: calc(100vh - 120px) !important;
        max-height: none !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 10px !important;
        padding-bottom: 100px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Mobile modal adjustments */
    body[class*="profiler"] .modal-content,
    .modal-content {
        max-width: 95vw !important;
        max-height: 90vh !important;
        margin: 5vh auto !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    body[class*="profiler"] .modal-body,
    .modal-body {
        max-height: 70vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 15px !important;
    }
    
    /* Override body overflow for mobile Import Wizard */
    body {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Mobile progress bar */
    body[class*="profiler"] .progress-bar,
    .progress-bar {
        height: 35px !important;
        margin: 20px 0 !important;
        font-size: 1rem !important;
    }
    
    /* Mobile dual panel - stack vertically */
    body[class*="profiler"] .dual-panel,
    .dual-panel {
        display: block !important;
        height: auto !important;
        gap: 0 !important;
    }
    
    body[class*="profiler"] .panel,
    .panel {
        margin-bottom: 15px !important;
        height: auto !important;
        min-height: 200px !important;
    }
    
    body[class*="profiler"] .panel-content,
    .panel-content {
        max-height: 300px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Mobile action bar - stack buttons */
    body[class*="profiler"] .action-bar,
    .action-bar {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 15px !important;
        position: relative !important;
        bottom: auto !important;
    }
    
    body[class*="profiler"] .action-bar button,
    .action-bar button {
        width: 100% !important;
        padding: 15px !important;
        font-size: 1rem !important;
    }
}

/* ===============================================
   END OF MOBILE LAYOUT MASTER
   =============================================== */