/* Mobile Login Modal Fixes */

/* Fix login modal positioning on mobile */
@media screen and (max-width: 768px) {
    /* Override any existing modal positioning */
    .modal, 
    .login-modal,
    .auth-modal,
    [class*="modal"] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 9999 !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
    }
    
    /* Modal content */
    .modal-content,
    .login-container,
    .auth-container,
    [class*="modal-content"] {
        position: relative !important;
        margin: 1rem !important;
        max-width: calc(100vw - 2rem) !important;
        max-height: calc(100vh - 2rem) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background-color: var(--bg-primary, white) !important;
        border-radius: 12px !important;
        padding: 1.5rem !important;
    }
    
    /* Fix close button */
    .modal-close,
    .close-btn,
    [class*="close"] {
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
        z-index: 10000 !important;
        font-size: 1.5rem !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
    }
}

/* iOS specific fixes for modal */
@supports (-webkit-touch-callout: none) {
    /* Prevent body scroll when modal is open */
    body.modal-open {
        position: fixed !important;
        width: 100% !important;
        overflow: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Fix modal backdrop on iOS */
    .modal-backdrop,
    .modal-overlay {
        position: fixed !important;
        -webkit-backdrop-filter: blur(5px) !important;
        backdrop-filter: blur(5px) !important;
    }
    
    /* Fix form inputs in modal on iOS */
    .modal input,
    .modal textarea,
    .modal select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        -webkit-appearance: none !important;
        border-radius: 8px !important;
        background-color: var(--input-bg, white) !important;
        color: var(--text-primary, #333) !important;
    }
}

/* Fix theme colors on mobile */
@media screen and (max-width: 768px) {
    /* Ensure theme colors are applied correctly */
    [data-theme="dark"] .modal,
    [data-theme="dark"] .modal-content {
        background-color: var(--bg-secondary, #1a1a1a) !important;
        color: var(--text-primary, #fff) !important;
    }
    
    [data-theme="light"] .modal-content,
    :root .modal-content {
        background-color: var(--bg-primary, #fff) !important;
        color: var(--text-primary, #333) !important;
    }
    
    /* Fix input colors */
    input, textarea, select {
        background-color: var(--input-bg, white) !important;
        color: var(--text-primary, #333) !important;
        border: 1px solid var(--border-primary, #e5e7eb) !important;
    }
}

/* Auto-close modal after successful login */
.login-success .modal,
.login-success .login-modal {
    animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Hide modal when logged in */
body[data-logged-in="true"] #loginModal,
body.logged-in #loginModal,
body.authenticated #loginModal {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* CRITICAL: Hide all content on mobile when NOT authenticated */
@media screen and (max-width: 768px) {
    /* Hide ALL sensitive content before login */
    body:not(.authenticated) #globalJobStats,
    body:not(.authenticated) #jobBankSection,
    body:not(.authenticated) #analysisSection,
    body:not(.authenticated) .main-container,
    body:not(.authenticated) .analysis-card,
    body:not(.authenticated) .job-stats,
    body:not(.authenticated) .stat-box,
    body:not(.authenticated) [id*="JobCount"],
    body:not(.authenticated) [id*="jobStats"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Only show login modal when not authenticated */
    body:not(.authenticated) {
        overflow: hidden !important;
    }
    
    body:not(.authenticated) #loginModal {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Ensure content is visible when authenticated on mobile */
@media screen and (max-width: 768px) {
    body.authenticated .main-container,
    body.authenticated #jobBankSection,
    body.authenticated #analysisSection,
    body.authenticated .analysis-card,
    body[data-logged-in="true"] .main-container,
    body[data-logged-in="true"] #jobBankSection,
    body[data-logged-in="true"] #analysisSection,
    body[data-logged-in="true"] .analysis-card {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1 !important;
        pointer-events: auto !important;
    }
}

/* Fix z-index issues */
.modal, .login-modal {
    z-index: 999999 !important;
}

.modal-content, .login-container {
    z-index: 1000000 !important;
}

/* Ensure proper viewport on mobile */
@viewport {
    width: device-width;
    zoom: 1.0;
}

/* Fix for iPhone safe areas */
@supports (padding: max(0px)) {
    .modal-content {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
        padding-top: max(1.5rem, env(safe-area-inset-top)) !important;
    }
}

/* Fix Job Statistics Section on Mobile */
@media screen and (max-width: 768px) {
    /* Ensure Job Statistics is hidden by default on mobile */
    #jobStatisticsSection {
        display: none !important;
    }
    
    /* Only show when explicitly set via JavaScript */
    #jobStatisticsSection[style*="display: block"] {
        display: block !important;
    }
    
    /* Fix close button on mobile */
    #jobStatisticsSection button[onclick*="hideJobStatistics"] {
        position: relative !important;
        z-index: 999999 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        min-height: 44px !important; /* iOS minimum touch target */
        min-width: 44px !important;
        padding: 12px 16px !important;
    }
    
    /* Ensure button is clickable on touch devices */
    #jobStatisticsSection .analysis-header button {
        cursor: pointer !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
    }
    
    /* Fix overlapping elements on mobile */
    #jobStatisticsSection .analysis-header {
        position: relative !important;
        z-index: 10 !important;
    }
    
    #jobStatisticsSection .analysis-header > div {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 1rem !important;
        align-items: flex-start !important;
    }
    
    /* Responsive layout for header on mobile */
    #jobStatisticsSection .analysis-header h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    #jobStatisticsSection .analysis-header p {
        font-size: 0.875rem !important;
        margin-bottom: 1rem !important;
    }
}