/**
 * Mobile Premium Optimization
 * Complete mobile-first responsive design for all components
 */

/* ========================================
   MOBILE VIEWPORT & TOUCH OPTIMIZATION
   ======================================== */

/* Prevent horizontal scroll on mobile */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
}

/* Optimize tap targets for mobile */
button, 
.btn,
.sffc-export-btn,
.card-action,
.nav-item,
.filter-btn {
    min-height: 44px !important; /* Apple's recommended touch target size */
    min-width: 44px !important;
}

/* ========================================
   SHORTLIST FLOATING - MOBILE OPTIMIZED
   ======================================== */

@media (max-width: 768px) {
    .sffc-shortlist-floating {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        transform: translateY(calc(100% - 60px));
        width: 100%;
        max-height: 85vh;
        border-radius: 24px 24px 0 0;
        transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        box-shadow: 
            0 -10px 30px rgba(26, 48, 40, 0.15),
            0 -5px 15px rgba(26, 48, 40, 0.1);
    }
    
    .sffc-shortlist-floating.expanded {
        transform: translateY(0);
    }
    
    /* Swipe handle for mobile */
    .sffc-shortlist-floating::before {
        content: '';
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(26, 48, 40, 0.2);
        border-radius: 2px;
    }
    
    .sffc-shortlist-header {
        padding: 20px 20px !important;
        cursor: grab;
        -webkit-user-select: none;
        user-select: none;
    }
    
    .sffc-shortlist-title {
        font-size: 20px !important;
    }
    
    .sffc-shortlist-subtitle {
        font-size: 10px !important;
    }
    
    .sffc-shortlist-content {
        max-height: calc(85vh - 200px) !important;
        padding: 12px !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .sffc-shortlist-item {
        padding: 10px !important;
        margin-bottom: 8px !important;
        touch-action: pan-y;
    }
    
    .sffc-shortlist-item h4 {
        font-size: 13px !important;
    }
    
    .sffc-shortlist-item p {
        font-size: 11px !important;
    }
    
    .sffc-shortlist-actions {
        padding: 12px !important;
        position: sticky;
        bottom: 0;
        background: linear-gradient(180deg,
            transparent 0%,
            rgba(248, 244, 237, 0.95) 20%,
            #F8F4ED 40%);
    }
    
    .sffc-export-controls {
        flex-direction: row !important;
        gap: 8px !important;
    }
    
    .sffc-export-btn {
        padding: 12px 8px !important;
        font-size: 9px !important;
        flex: 1;
    }
    
    .sffc-analyze-btn {
        padding: 14px !important;
        font-size: 10px !important;
        width: 100% !important;
    }
    
    .sffc-compare-btn,
    .sffc-strategy-btn {
        padding: 12px !important;
        font-size: 10px !important;
    }
}

/* Small phones (iPhone SE, etc) */
@media (max-width: 375px) {
    .sffc-shortlist-floating {
        max-height: 75vh;
    }
    
    .sffc-shortlist-title {
        font-size: 18px !important;
    }
    
    .sffc-export-btn {
        font-size: 8px !important;
        padding: 10px 6px !important;
    }
}

/* ========================================
   JOB COMPARISON - MOBILE OPTIMIZED
   ======================================== */

@media (max-width: 768px) {
    .sffc-comparison-modal .comparison-container {
        width: 100%;
        height: 100vh;
        border-radius: 0;
    }
    
    .comparison-header {
        padding: 20px !important;
        position: sticky;
        top: 0;
        z-index: 10;
        background: linear-gradient(180deg,
            #F8F4ED 0%,
            rgba(248, 244, 237, 0.95) 100%);
    }
    
    .comparison-header h2 {
        font-size: 24px !important;
        margin-bottom: 4px !important;
    }
    
    .comparison-subtitle {
        font-size: 10px !important;
    }
    
    .comparison-close {
        width: 40px !important;
        height: 40px !important;
        top: 20px !important;
        right: 20px !important;
        font-size: 20px !important;
    }
    
    /* Mobile-optimized steps */
    .comparison-steps {
        padding: 12px 20px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background: rgba(255, 255, 255, 0.8);
    }
    
    .comparison-step {
        padding: 8px 12px !important;
        font-size: 10px !important;
        white-space: nowrap;
    }
    
    .comparison-step .step-number {
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: #1A3028;
        color: #F8F4ED;
        border-radius: 50%;
        margin-right: 6px;
        font-size: 10px;
    }
    
    .comparison-step.active .step-number {
        background: #D4AF37;
        color: #1A3028;
    }
    
    /* Mobile job selector */
    .comparison-selector {
        padding: 20px !important;
    }
    
    .selector-instructions {
        font-size: 12px !important;
        margin-bottom: 16px !important;
    }
    
    .job-selector-grid {
        flex-direction: column !important;
        gap: 12px !important;
        max-height: calc(100vh - 300px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .job-selector-item {
        min-width: 100% !important;
        padding: 16px !important;
    }
    
    .job-selector-item .job-title {
        font-size: 14px !important;
    }
    
    .job-selector-item .job-company {
        font-size: 11px !important;
    }
    
    .job-selector-item .job-match {
        font-size: 10px !important;
        padding: 4px 10px !important;
    }
    
    .job-selector-item input[type="checkbox"] {
        width: 24px !important;
        height: 24px !important;
        top: 16px !important;
        right: 16px !important;
    }
    
    /* Mobile comparison content */
    .comparison-content {
        padding: 20px !important;
    }
    
    .comparison-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .comparison-column {
        border-radius: 16px !important;
    }
    
    .comparison-job-header {
        padding: 24px 20px !important;
    }
    
    .comparison-job-header h3 {
        font-size: 20px !important;
    }
    
    .comparison-job-header p {
        font-size: 12px !important;
    }
    
    .match-score-bar {
        height: 36px !important;
    }
    
    .match-text {
        font-size: 12px !important;
    }
    
    .comparison-metrics {
        padding: 20px !important;
    }
    
    .metric-row {
        padding: 12px 0 !important;
        grid-template-columns: 1fr 1fr !important;
    }
    
    .metric-label {
        font-size: 10px !important;
    }
    
    .metric-value {
        font-size: 13px !important;
        text-align: right;
    }
    
    .comparison-highlights {
        padding: 20px !important;
    }
    
    .comparison-highlights h4 {
        font-size: 11px !important;
        margin-bottom: 16px !important;
    }
    
    .comparison-highlights li {
        font-size: 12px !important;
        padding: 12px 0 12px 28px !important;
    }
    
    /* Mobile navigation buttons */
    .comparison-navigation {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 16px 20px !important;
        background: linear-gradient(180deg,
            transparent 0%,
            rgba(248, 244, 237, 0.95) 20%,
            #F8F4ED 40%);
        display: flex;
        gap: 12px !important;
        z-index: 10;
    }
    
    .btn-comparison-next,
    .btn-comparison-prev {
        flex: 1;
        padding: 14px 20px !important;
        font-size: 11px !important;
        border-radius: 20px !important;
    }
    
    /* Mobile export options */
    .comparison-export {
        padding: 20px !important;
    }
    
    .export-options h3 {
        font-size: 20px !important;
        margin-bottom: 20px !important;
        text-align: center;
    }
    
    .export-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px !important;
    }
    
    .export-buttons button {
        width: 100% !important;
        padding: 16px !important;
        font-size: 12px !important;
    }
    
    /* Mobile comparison actions */
    .comparison-actions {
        padding: 20px !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .comparison-actions button {
        width: 100% !important;
        padding: 16px !important;
        font-size: 11px !important;
    }
}

/* ========================================
   STRATEGY DASHBOARD - MOBILE OPTIMIZED
   ======================================== */

@media (max-width: 768px) {
    .sffc-strategy-dashboard .strategy-container {
        width: 100%;
        height: 100vh;
    }
    
    /* Mobile header */
    .strategy-header {
        padding: 16px 20px !important;
        max-height: auto !important;
    }
    
    .strategy-branding {
        margin-bottom: 0 !important;
    }
    
    .strategy-logo {
        font-size: 24px !important;
        letter-spacing: 4px !important;
        margin-bottom: 4px !important;
    }
    
    .strategy-tagline {
        font-size: 9px !important;
        letter-spacing: 2px !important;
    }
    
    /* Hide desktop nav on mobile */
    .strategy-nav {
        display: none !important;
    }
    
    /* Add mobile nav menu */
    .strategy-header::after {
        content: '☰';
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 20px;
        color: #1A3028;
        cursor: pointer;
    }
    
    .strategy-close {
        width: 40px !important;
        height: 40px !important;
        top: 16px !important;
        right: 16px !important;
        font-size: 20px !important;
    }
    
    /* Mobile content */
    .strategy-content {
        padding-bottom: 80px !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .editorial-grid {
        padding: 20px !important;
    }
    
    .editorial-feature {
        padding: 32px 20px !important;
        border-radius: 20px !important;
        margin-bottom: 32px !important;
    }
    
    .feature-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
    }
    
    .feature-category {
        font-size: 10px !important;
        letter-spacing: 2px !important;
    }
    
    .feature-date {
        font-size: 10px !important;
    }
    
    .feature-headline {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }
    
    .feature-lead {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 24px !important;
    }
    
    /* Mobile metrics */
    .feature-metrics {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .metric-card {
        padding: 24px 20px !important;
        border-radius: 16px !important;
    }
    
    .metric-value {
        font-size: 32px !important;
    }
    
    .metric-label {
        font-size: 9px !important;
    }
    
    /* Mobile strategy cards */
    .strategy-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-bottom: 32px !important;
    }
    
    .strategy-card {
        padding: 28px 20px !important;
        border-radius: 16px !important;
    }
    
    .card-title {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }
    
    .card-description {
        font-size: 12px !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }
    
    .card-insights {
        margin-bottom: 20px !important;
    }
    
    .insight-item {
        padding: 10px !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
    }
    
    .insight-icon {
        font-size: 16px !important;
    }
    
    .insight-text {
        font-size: 11px !important;
    }
    
    .card-action {
        padding: 14px !important;
        font-size: 10px !important;
        border-radius: 20px !important;
    }
    
    /* Mobile pipeline */
    .opportunity-pipeline {
        padding: 24px 16px !important;
        border-radius: 20px !important;
    }
    
    .pipeline-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        margin-bottom: 24px !important;
        padding-bottom: 16px !important;
    }
    
    .pipeline-title {
        font-size: 24px !important;
    }
    
    .pipeline-filters {
        display: flex;
        gap: 8px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    
    .filter-btn {
        padding: 10px 16px !important;
        font-size: 10px !important;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .pipeline-stages {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        min-height: auto !important;
    }
    
    .stage {
        padding: 16px !important;
        min-height: 150px !important;
        border-radius: 12px !important;
    }
    
    .stage-title {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }
    
    .stage-count {
        font-size: 10px !important;
        padding: 3px 8px !important;
        margin-bottom: 12px !important;
    }
    
    .pipeline-item {
        padding: 12px !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
    }
    
    .item-title {
        font-size: 12px !important;
    }
    
    .item-company {
        font-size: 10px !important;
    }
    
    .item-meta {
        font-size: 9px !important;
        padding: 6px 0 !important;
    }
    
    /* Mobile footer */
    .strategy-footer {
        padding: 16px 20px !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
    
    .footer-actions {
        flex-direction: row !important;
        gap: 8px !important;
    }
    
    .footer-actions button {
        flex: 1;
        padding: 12px 8px !important;
        font-size: 9px !important;
        border-radius: 20px !important;
    }
    
    .footer-actions button .btn-icon {
        display: none !important; /* Hide icons on mobile to save space */
    }
    
    .footer-branding {
        display: none !important;
    }
}

/* ========================================
   TOUCH GESTURES & INTERACTIONS
   ======================================== */

/* Swipe to close/open gestures */
.touch-enabled {
    touch-action: pan-y;
}

/* Improved scrolling performance */
.sffc-shortlist-content,
.comparison-content,
.strategy-content,
.job-selector-grid,
.pipeline-stages {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
}

/* Tap feedback */
button:active,
.btn:active,
.card-action:active,
.nav-item:active {
    transform: scale(0.95) !important;
    opacity: 0.8 !important;
}

/* Disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    button:hover,
    .btn:hover,
    .card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

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

@media (max-width: 896px) and (orientation: landscape) {
    .sffc-shortlist-floating {
        max-height: 90vh !important;
    }
    
    .comparison-header,
    .strategy-header {
        padding: 12px 20px !important;
    }
    
    .strategy-logo {
        font-size: 20px !important;
    }
    
    .feature-headline {
        font-size: 24px !important;
    }
    
    .comparison-header h2 {
        font-size: 20px !important;
    }
}

/* ========================================
   IPHONE NOTCH SAFE AREAS
   ======================================== */

@supports (padding: max(0px)) {
    .comparison-header,
    .strategy-header {
        padding-top: max(20px, env(safe-area-inset-top)) !important;
    }
    
    .comparison-navigation,
    .strategy-footer,
    .sffc-shortlist-actions {
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }
    
    .comparison-container,
    .strategy-container {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Reduce shadows on mobile for better performance */
@media (max-width: 768px) {
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    /* Add back essential shadows only */
    .sffc-shortlist-floating,
    .comparison-navigation,
    .strategy-footer {
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Reduce animation complexity on mobile */
@media (max-width: 768px) {
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
}

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

/* Larger touch targets for accessibility */
@media (max-width: 768px) {
    a, button, input, select, textarea {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better contrast for mobile */
    .metric-label,
    .insight-text,
    .item-meta {
        color: #333 !important;
    }
    
    /* Increase line height for readability */
    p, li, .card-description {
        line-height: 1.6 !important;
    }
}