/**
 * CariClub MVP - Mobile-First Responsive Optimizations
 * 
 * Purpose: Executive-grade mobile experience for board placement platform
 * Dependencies: core.css (design tokens), components.css (base components), contexts.css (theming)
 * Integration: 430px container optimization, executive usage patterns, touch-first interactions
 * 
 * Target Devices:
 * - iPhone Pro models (430px optimal width)
 * - Executive usage: quick decisions, professional interactions, one-handed operation
 * - Touch-first with exceptional visual polish and performance
 * 
 * Performance Targets:
 * - File size: <5KB
 * - Scroll performance: 60fps with hardware acceleration
 * - Touch responsiveness: immediate visual feedback
 * - Context switching: <200ms on mobile
 * 
 * @version MVP-1.0
 */

/* ===================================================================
   FOUNDATION: MOBILE-FIRST CONTAINER AND VIEWPORT
   Executive-optimized container with safe area integration
   =================================================================== */

/* Primary mobile container optimization */
.app-container {
    max-width: min(430px, 100vw);
    width: 100%;
    margin: 0 auto;
    background: #FFFFFF;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    /* Hardware acceleration for smooth scrolling */
    transform: translateZ(0);
    will-change: scroll-position;
    /* Optimize touch scrolling */
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    /* Prevent text selection during touch interactions */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /* Enable momentum scrolling */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Full-width optimization for devices smaller than 430px */
@media (max-width: 430px) {
    .top-context-bar,
    .executive-header,
    .bottom-nav {
        max-width: 100vw;
        left: 0;
        right: 0;
        margin: 0;
    }
}

/* Prevent horizontal overflow on all screen sizes */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    /* Optimize font rendering for mobile */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ===================================================================
   SAFE AREA INTEGRATION
   Modern iOS device compatibility with notches and dynamic islands
   =================================================================== */

/* Top context bar safe area optimization */
.top-context-bar {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(430px, 100vw);
    width: 100%;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-bottom: 12px;
    height: calc(60px + env(safe-area-inset-top, 0px));
    box-sizing: border-box;
    z-index: 200;
}

/* Executive header safe area integration */
.executive-header {
    position: fixed;
    top: calc(60px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: min(430px, 100vw);
    box-sizing: border-box;
    z-index: 150;
}

/* Bottom navigation safe area optimization */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(430px, 100vw);
    width: 100%;
    padding: 8px 16px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    z-index: 100;
}

/* Content area spacing adjustments for safe areas */
.content-area {
    padding: 20px;
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    background: #FFFFFF;
    transition: all var(--transition-context), margin-top 0.3s ease, padding-bottom 0.3s ease;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    box-sizing: border-box;
    position: relative;
    z-index: var(--z-content);
    
    /* Fallback margin-top in case JavaScript fails */
    margin-top: 190px; /* Will be overridden by JavaScript */
    min-height: calc(100vh - 310px); /* Will be overridden by JavaScript */
    
    /* Support for CSS custom properties set by JavaScript */
    margin-top: var(--calculated-top-margin, 190px);
    padding-bottom: var(--calculated-bottom-padding, calc(120px + env(safe-area-inset-bottom, 0px)));
    min-height: var(--calculated-min-height, calc(100vh - 310px));
    
    /* Optimize scrolling performance */
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* Responsive safe area adjustments */
@media (max-width: 430px) {
    .top-context-bar,
    .executive-header,
    .bottom-nav {
        left: 0;
        transform: none;
        max-width: 100vw;
    }
}

/* ===================================================================
   TOUCH TARGET OPTIMIZATION
   Executive-grade touch interactions with 44px minimum targets
   =================================================================== */

/* Base touch target standards */
.nav-tab,
.context-pill,
.quick-action,
.contact-card,
.connection-btn,
.intro-nav,
.btn {
    min-height: 44px;
    min-width: 44px;
    /* Touch feedback optimization */
    touch-action: manipulation;
    /* Prevent double-tap zoom */
    user-select: none;
    -webkit-user-select: none;
    /* Optimize touch response */
    -webkit-tap-highlight-color: transparent;
}

/* Enhanced touch targets for primary actions */
.btn {
    min-height: 52px;
    padding: 16px 20px;
    /* Larger touch area for executive confidence */
    position: relative;
}

.btn::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    /* Invisible expanded touch area */
    z-index: -1;
}

/* Context pill touch optimization */
.context-pill {
    padding: 10px 16px;
    min-height: 44px;
    min-width: 80px;
    /* Ensure confident selection */
    margin: 2px;
    position: relative;
}

/* Quick action touch enhancement */
.quick-action {
    width: 44px;
    height: 44px;
    /* Increased from 36px for better mobile targeting */
    font-size: 16px;
    border-radius: 12px;
}

/* Organization selector touch optimization */
.org-selector {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 13px;
    /* Improved mobile readability */
    border-radius: 12px;
    width: 200px;
    /* Slightly wider for mobile */
}

/* Contact card touch enhancement */
.contact-card {
    min-height: 56px;
    padding: 16px 12px;
    /* Enhanced padding for mobile comfort */
    border-radius: 12px;
    position: relative;
}

/* ===================================================================
   TYPOGRAPHY AND READABILITY OPTIMIZATION
   Executive-appropriate text sizing and spacing for mobile
   =================================================================== */

/* Base typography scaling for mobile screens */
.name {
    font-size: 20px;
    /* Increased from 18px for mobile prominence */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
}

.title {
    font-size: 14px;
    /* Increased from 12px for mobile readability */
    opacity: 0.9;
    margin-bottom: 6px;
    line-height: 1.3;
}

.location {
    font-size: 12px;
    /* Increased from 10px for mobile legibility */
    opacity: 0.7;
    margin-top: 4px;
    line-height: 1.2;
}

/* Opportunity card typography optimization */
.org-name {
    font-size: 20px;
    /* Increased from 18px for mobile impact */
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 4px;
}

.org-location {
    font-size: 13px;
    /* Increased from 11px for mobile clarity */
    margin-bottom: 6px;
    line-height: 1.3;
}

.org-role {
    font-size: 15px;
    /* Increased from 13px for mobile prominence */
    font-weight: 500;
    line-height: 1.3;
}

/* Description text optimization */
.org-description {
    font-size: 15px;
    /* Increased from 14px for mobile comfort */
    line-height: 1.6;
    /* Enhanced line height for mobile reading */
    margin-bottom: 18px;
}

/* Section title mobile optimization */
.section-title {
    font-size: 18px;
    /* Increased from 16px for mobile hierarchy */
    font-weight: 600;
    line-height: 1.2;
}

/* Form label and input optimization */
.form-label {
    font-size: 15px;
    /* Increased from 14px for mobile clarity */
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.3;
}

.form-input {
    font-size: 16px;
    /* Prevents iOS zoom on focus */
    padding: 14px 16px;
    min-height: 50px;
    /* Enhanced touch target */
    border-radius: 12px;
    line-height: 1.4;
}

/* ===================================================================
   HEADER AND NAVIGATION MOBILE OPTIMIZATION
   Executive header expansion and context switching for mobile
   =================================================================== */

/* Executive header mobile enhancements */
.executive-header {
    padding: 18px 20px;
    /* Increased padding for mobile comfort */
    min-height: 130px;
    /* Slightly increased for mobile prominence */
    border-radius: 0 0 16px 16px;
    /* Subtle bottom rounding for mobile elegance */
}

.executive-header.expanded {
    padding-bottom: 28px;
    /* Enhanced bottom padding for mobile */
}

/* Header main section mobile spacing */
.header-main {
    gap: 16px;
    /* Increased from 12px for mobile spacing */
    margin-bottom: 12px;
}

/* Avatar mobile sizing */
.avatar {
    width: 50px;
    height: 50px;
    /* Increased from 45px for mobile visibility */
    border-radius: 12px;
    border-width: 3px;
    /* Enhanced border for mobile definition */
}

/* Tagline mobile optimization */
.tagline {
    font-size: 13px;
    /* Increased from 11px for mobile readability */
    margin-top: 12px;
    text-align: center;
    line-height: 1.4;
}

/* Expand hint mobile styling */
.expand-hint {
    font-size: 12px;
    /* Increased from 10px for mobile visibility */
    margin-top: 10px;
    opacity: 0.8;
}

/* Context switcher mobile optimization */
.context-switcher {
    gap: 3px;
    /* Increased from 2px for mobile finger spacing */
    padding: 6px;
    /* Increased from 4px for mobile touch area */
    border-radius: 14px;
}

/* Context pill mobile sizing */
.context-pill {
    padding: 12px 18px;
    /* Enhanced from 10px 16px for mobile */
    border-radius: 10px;
    font-size: 13px;
    /* Increased from 12px for mobile legibility */
    font-weight: 600;
    min-width: 85px;
    /* Increased from 80px for mobile confidence */
    min-height: 44px;
}

/* Mobile-specific context pill adjustments */
@media (max-width: 430px) {
    .context-pill {
        min-width: 75px;
        padding: 10px 14px;
        font-size: 12px;
    }
}

/* ===================================================================
   OPPORTUNITY CARD MOBILE LAYOUT
   Optimized card spacing and interactions for mobile scrolling
   =================================================================== */

/* Opportunity card mobile optimization */
.opportunity-card {
    margin-bottom: 20px;
    /* Increased from 16px for mobile thumb scrolling */
    border-radius: 18px;
    /* Enhanced from 16px for mobile elegance */
    padding: 10px;
    /* Increased from 8px for mobile touch comfort */
    /* Hardware acceleration for smooth scrolling */
    transform: translateZ(0);
    will-change: transform;
    /* Optimize touch interactions */
    touch-action: manipulation;
}

/* Card header mobile enhancement */
.card-header {
    padding: 24px;
    /* Increased from 20px for mobile spaciousness */
    border-radius: 14px;
    /* Enhanced border radius for mobile */
}

/* Card content mobile spacing */
.card-content {
    padding: 24px;
    /* Increased from 20px for mobile comfort */
}

/* Card top section mobile layout */
.card-top {
    gap: 20px;
    /* Increased from 16px for mobile breathing room */
    margin-bottom: 4px;
}

/* Organization logo mobile sizing */
.org-logo {
    width: 46px;
    height: 46px;
    /* Increased from 40px for mobile visibility */
    border-radius: 12px;
    margin-bottom: 10px;
}

/* Card badges mobile positioning */
.card-badges {
    gap: 8px;
    /* Increased from 6px for mobile clarity */
}

/* Status badge mobile sizing */
.status-badge {
    padding: 6px 12px;
    /* Increased from 4px 10px for mobile touch */
    border-radius: 14px;
    font-size: 12px;
    /* Increased from 11px for mobile legibility */
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Key info mobile grid optimization */
.key-info {
    grid-template-columns: repeat(2, 1fr);
    /* Simplified from auto-fit for mobile consistency */
    gap: 12px;
    /* Increased from 8px for mobile spacing */
    padding: 16px;
    /* Enhanced padding for mobile */
    margin-bottom: 20px;
}

.key-info-item {
    font-size: 13px;
    /* Increased from 12px for mobile readability */
    gap: 8px;
    /* Enhanced icon spacing */
    padding: 4px 0;
    /* Added padding for mobile touch comfort */
}

/* Match labels mobile layout */
.match-labels {
    gap: 10px;
    /* Increased from 8px for mobile finger spacing */
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.match-label {
    padding: 6px 12px;
    /* Increased from 4px 8px for mobile touch */
    border-radius: 10px;
    font-size: 12px;
    /* Increased from 11px for mobile clarity */
    font-weight: 600;
    white-space: nowrap;
}

/* Card actions mobile optimization */
.card-actions {
    gap: 12px;
    /* Increased from 10px for mobile spacing */
    margin-top: 20px;
    flex-direction: column;
    /* Stack buttons on very small screens */
}

@media (min-width: 360px) {
    .card-actions {
        flex-direction: row;
        /* Side-by-side on larger mobile screens */
    }
}

/* ===================================================================
   MODAL AND BOTTOM SHEET MOBILE OPTIMIZATION
   Executive-appropriate modal sizing and animations for mobile
   =================================================================== */

/* Modal overlay mobile optimization */
.modal-overlay {
    padding: 16px;
    /* Reduced from 20px for mobile screen usage */
    align-items: flex-end;
    /* Bottom-aligned modals for mobile ergonomics */
}

/* Modal mobile sizing and positioning */
.modal {
    max-width: 100%;
    width: 100%;
    max-height: 85vh;
    /* Reduced from 90vh for mobile comfort */
    border-radius: 20px 20px 0 0;
    /* Bottom sheet style for mobile */
    margin: 0;
    transform: translateY(100%);
    /* Start from bottom for mobile slide-up */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.modal-overlay.show .modal {
    transform: translateY(0);
    /* Slide up animation for mobile */
}

/* Modal header mobile optimization */
.modal-header {
    padding: 28px 24px 20px;
    /* Enhanced top padding for mobile */
    border-bottom: 1px solid #E5E7EB;
    position: relative;
}

/* Modal title mobile styling */
.modal-title {
    font-size: 20px;
    /* Increased from 18px for mobile prominence */
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.2;
    padding-right: 40px;
    /* Space for close button */
}

.modal-subtitle {
    font-size: 15px;
    /* Increased from 14px for mobile clarity */
    line-height: 1.4;
}

/* Modal close button mobile enhancement */
.modal-close {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    /* Enhanced touch target */
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
}

/* Modal content mobile spacing */
.modal-content {
    padding: 28px 24px;
    /* Enhanced padding for mobile comfort */
}

/* Modal actions mobile layout */
.modal-actions {
    padding: 20px 24px 28px;
    gap: 16px;
    /* Increased from 12px for mobile spacing */
    flex-direction: column;
    /* Stack buttons vertically on mobile */
}

.modal-actions .btn {
    width: 100%;
    /* Full-width buttons for mobile confidence */
    justify-content: center;
}

/* ===================================================================
   FORM AND INPUT MOBILE OPTIMIZATION
   Mobile keyboard and input optimizations for executive workflows
   =================================================================== */

/* Form group mobile spacing */
.form-group {
    margin-bottom: 24px;
    /* Increased from 20px for mobile breathing room */
}

/* Form input mobile enhancement */
.form-input {
    padding: 16px 18px;
    /* Enhanced from 12px 16px for mobile */
    border-radius: 14px;
    /* Enhanced from 8px for mobile modern feel */
    font-size: 16px;
    /* Prevents iOS zoom */
    line-height: 1.4;
    border-width: 1.5px;
    /* Enhanced border for mobile definition */
    min-height: 52px;
    /* Increased touch target */
}

.form-input:focus {
    border-width: 2px;
    /* Enhanced focus indication for mobile */
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
    /* Enhanced focus ring */
}

/* Textarea mobile optimization */
.form-textarea {
    min-height: 100px;
    /* Increased from 80px for mobile comfort */
    resize: vertical;
    line-height: 1.5;
}

/* Select input mobile enhancement */
.form-select {
    background-size: 20px;
    /* Larger dropdown arrow for mobile */
    padding-right: 48px;
    /* More space for arrow */
}

/* Time slots mobile layout */
.time-slots {
    gap: 16px;
    /* Increased from 12px for mobile spacing */
}

.time-slot {
    gap: 16px;
    /* Enhanced spacing for mobile */
    flex-direction: column;
    /* Stack on very small screens */
}

@media (min-width: 380px) {
    .time-slot {
        flex-direction: row;
        /* Side-by-side on larger mobile screens */
    }
}

/* Contact options mobile grid */
.contact-options {
    grid-template-columns: repeat(3, 1fr);
    /* Ensure 3 columns fit on mobile */
    gap: 16px;
    /* Enhanced from 12px for mobile spacing */
    margin-bottom: 24px;
}

.contact-option {
    padding: 16px 12px;
    /* Enhanced padding for mobile touch */
    border-radius: 14px;
    border-width: 2px;
    /* Enhanced border for mobile definition */
    min-height: 76px;
    /* Ensure adequate touch target */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.contact-option-icon {
    font-size: 24px;
    /* Increased from 20px for mobile visibility */
}

.contact-option-label {
    font-size: 13px;
    /* Increased from 12px for mobile readability */
    font-weight: 500;
    text-align: center;
}

/* ===================================================================
   SECTION AND COLLAPSIBLE MOBILE OPTIMIZATION
   Mobile-friendly section interactions and spacing
   =================================================================== */

/* Collapsible section mobile spacing */
.collapsible-section {
    margin-bottom: 28px;
    /* Increased from 24px for mobile scrolling comfort */
    border-radius: 16px;
    /* Enhanced from 12px for mobile modern feel */
}

/* Section header mobile enhancement */
.section-header {
    padding: 20px 24px;
    /* Enhanced from 16px 20px for mobile */
    min-height: 68px;
    /* Increased from 60px for mobile touch comfort */
    border-radius: 16px 16px 0 0;
}

/* Section content mobile spacing */
.section-content {
    padding: 24px;
    /* Enhanced from 20px for mobile */
}

/* Expand toggle mobile optimization */
.expand-toggle {
    font-size: 13px;
    /* Increased from 12px for mobile clarity */
    gap: 6px;
    /* Enhanced from 4px for mobile spacing */
    padding: 8px 12px;
    /* Added padding for mobile touch area */
    border-radius: 8px;
    min-height: 44px;
    /* Ensure adequate touch target */
    display: flex;
    align-items: center;
}

.expand-arrow {
    font-size: 14px;
    /* Increased from 12px for mobile visibility */
}

/* Section counter mobile styling */
.section-counter {
    padding: 4px 10px;
    /* Enhanced from 2px 6px for mobile */
    border-radius: 10px;
    font-size: 12px;
    /* Increased from 11px for mobile clarity */
    margin-left: 6px;
}

/* ===================================================================
   CONNECTION CARD MOBILE OPTIMIZATION
   Enhanced connection management for mobile workflows
   =================================================================== */

/* Connection card mobile layout */
.connection-card {
    padding: 20px;
    /* Enhanced from 16px for mobile comfort */
    margin-bottom: 16px;
    border-radius: 16px;
    /* Enhanced from 12px for mobile */
}

/* Connection header mobile spacing */
.connection-header {
    margin-bottom: 16px;
    gap: 16px;
    /* Enhanced spacing for mobile */
    flex-direction: column;
    /* Stack on mobile for better readability */
    align-items: flex-start;
}

.connection-info h4 {
    font-size: 18px;
    /* Increased from 16px for mobile prominence */
    margin-bottom: 6px;
    line-height: 1.2;
}

.connection-context {
    font-size: 14px;
    /* Increased from 12px for mobile readability */
    margin-bottom: 3px;
    line-height: 1.3;
}

.connection-date {
    font-size: 13px;
    /* Increased from 11px for mobile clarity */
    line-height: 1.3;
}

/* Connection actions mobile layout */
.connection-actions {
    gap: 12px;
    /* Enhanced from 8px for mobile spacing */
    flex-direction: column;
    /* Stack buttons on mobile */
    width: 100%;
    margin-top: 8px;
}

.connection-btn {
    padding: 12px 16px;
    /* Enhanced padding for mobile */
    font-size: 14px;
    /* Increased from 12px for mobile readability */
    min-height: 48px;
    /* Enhanced from 36px for mobile touch */
    border-radius: 12px;
    font-weight: 500;
    width: 100%;
    /* Full-width on mobile */
    justify-content: center;
}

@media (min-width: 380px) {
    .connection-header {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .connection-actions {
        flex-direction: row;
        width: auto;
        margin-top: 0;
    }
    
    .connection-btn {
        width: auto;
    }
}

/* ===================================================================
   PERFORMANCE OPTIMIZATIONS
   Hardware acceleration and smooth interactions for mobile
   =================================================================== */

/* Hardware acceleration for animated elements */
.opportunity-card,
.context-pill,
.btn,
.modal,
.executive-header,
.connection-card {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Smooth scrolling optimization */
.content-area,
.modal-content {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Touch action optimization for better performance */
.opportunity-card,
.connection-card,
.btn,
.context-pill {
    touch-action: manipulation;
}

/* Optimized transitions for mobile performance */
.context-pill,
.btn,
.quick-action,
.contact-card {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduced motion for mobile performance */
@media (prefers-reduced-motion: reduce) {
    .opportunity-card,
    .context-pill,
    .btn,
    .modal {
        transition: none;
        animation: none;
    }
}

/* ===================================================================
   BOTTOM NAVIGATION MOBILE OPTIMIZATION
   Enhanced mobile navigation with larger touch targets
   =================================================================== */

/* Bottom navigation mobile enhancement */
.bottom-nav {
    padding: 12px 20px;
    /* Enhanced from 8px 16px for mobile */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    /* Enhanced shadow for mobile definition */
}

/* Navigation tab mobile optimization */
.bottom-nav .nav-tab {
    padding: 12px 8px;
    /* Enhanced vertical padding for mobile */
    border-radius: 12px;
    min-height: 52px;
    /* Increased from 44px for mobile confidence */
    flex: 1;
    max-width: none;
    /* Allow full width utilization on mobile */
    gap: 6px;
    /* Enhanced from 4px for mobile spacing */
}

/* Navigation icon mobile sizing */
.bottom-nav .nav-icon {
    font-size: 22px;
    /* Increased from 18px for mobile visibility */
    opacity: 0.7;
}

.bottom-nav .nav-tab.active .nav-icon {
    opacity: 1;
    transform: scale(1.1);
    /* Subtle scale for active state */
}

/* Navigation label mobile styling */
.bottom-nav .nav-label {
    font-size: 11px;
    /* Increased from 10px for mobile readability */
    font-weight: 500;
    line-height: 1.2;
}

.bottom-nav .nav-tab.active .nav-label {
    font-weight: 600;
}

/* ===================================================================
   TOAST AND FEEDBACK MOBILE OPTIMIZATION
   Enhanced user feedback for mobile interactions
   =================================================================== */

/* Toast notification mobile optimization */
.toast {
    top: calc(80px + env(safe-area-inset-top, 0px));
    /* Adjusted positioning for mobile */
    padding: 16px 24px;
    /* Enhanced padding for mobile */
    border-radius: 12px;
    font-size: 15px;
    /* Increased from 14px for mobile readability */
    max-width: calc(100vw - 32px);
    /* Ensure proper mobile sizing */
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    /* Enhanced shadow for mobile prominence */
}

/* Loading overlay mobile optimization */
.loading-overlay {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    /* Enhanced blur for mobile */
}

.loading-spinner {
    width: 40px;
    height: 40px;
    /* Increased from 32px for mobile visibility */
    border-width: 4px;
    /* Enhanced from 3px for mobile definition */
}

/* ===================================================================
   RESPONSIVE BREAKPOINT STRATEGY
   Mobile-first with progressive enhancement
   =================================================================== */

/* Extra small screens (320px - 359px) */
@media (max-width: 359px) {
    .org-selector {
        width: 180px;
        font-size: 12px;
    }
    
    .context-pill {
        min-width: 68px;
        padding: 8px 12px;
        font-size: 11px;
    }
    
    .key-info {
        grid-template-columns: 1fr;
        /* Single column on very small screens */
    }
    
    .contact-options {
        grid-template-columns: repeat(2, 1fr);
        /* Two columns instead of three */
    }
}

/* Small mobile screens (360px - 430px) - Primary target */
@media (min-width: 360px) and (max-width: 430px) {
    .app-container {
        /* Optimal configuration for primary target */
    }
}

/* Large mobile/small tablet (431px - 568px) */
@media (min-width: 431px) and (max-width: 568px) {
    .app-container {
        max-width: 430px;
        /* Maintain optimal width */
        border-radius: 24px;
        /* Restore border radius */
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    }
    
    .top-context-bar,
    .executive-header,
    .bottom-nav {
        left: 50%;
        transform: translateX(-50%);
        max-width: 430px;
    }
}

/* Tablet (569px - 768px) */
@media (min-width: 569px) and (max-width: 768px) {
    .card-actions {
        flex-direction: row;
        /* Side-by-side buttons on tablet */
    }
    
    .modal-actions {
        flex-direction: row;
        /* Side-by-side modal buttons on tablet */
    }
    
    .modal-actions .btn {
        width: auto;
        flex: 1;
    }
}

/* Desktop (769px+) */
@media (min-width: 769px) {
    .app-container {
        max-width: 430px;
        /* Maintain mobile-optimized width */
        margin: 20px auto;
        /* Center with margin on desktop */
        border-radius: 24px;
        min-height: calc(100vh - 40px);
    }
    
    /* Restore hover states for desktop */
    .btn:hover,
    .context-pill:hover,
    .quick-action:hover {
        transform: translateY(-2px);
    }
}

/* ===================================================================
   LANDSCAPE ORIENTATION SUPPORT
   Graceful handling of mobile landscape mode
   =================================================================== */

@media (orientation: landscape) and (max-height: 430px) {
    .executive-header {
        min-height: 100px;
        /* Reduced for landscape */
        padding: 12px 20px 16px;
    }
    
    .executive-header.expanded {
        max-height: 60vh;
        /* Limit expansion in landscape */
        overflow-y: auto;
    }
    
    .modal {
        max-height: 75vh;
        /* Reduced for landscape visibility */
    }
    
    .content-area {
        padding: 16px 20px;
        /* Reduced vertical padding for landscape */
    }
    
    .opportunity-card {
        margin-bottom: 16px;
        /* Reduced spacing for landscape */
    }
}

/* ===================================================================
   HIGH DPI AND RETINA DISPLAY OPTIMIZATION
   Enhanced rendering for executive-grade displays
   =================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Enhanced shadows for high DPI displays */
    .opportunity-card {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    }
    
    .opportunity-card:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.12);
    }
    
    /* Enhanced text rendering */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ===================================================================
   ACCESSIBILITY AND REDUCED MOTION
   Ensuring inclusive mobile experience
   =================================================================== */

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .app-container,
    .context-pill,
    .opportunity-card,
    .btn,
    .modal {
        transition: none;
        animation: none;
        transform: none;
    }
    
    .loading-spinner {
        animation: none;
        border-top-color: currentColor;
    }
}

/* High contrast support */
@media (prefers-contrast: high) {
    .btn,
    .context-pill.active,
    .form-input:focus {
        border: 2px solid currentColor;
    }
    
    .opportunity-card {
        border: 1px solid #333;
    }
}

/* Focus visible support for keyboard navigation */
.btn:focus-visible,
.context-pill:focus-visible,
.nav-tab:focus-visible {
    outline: 3px solid rgba(14, 165, 233, 0.5);
    outline-offset: 2px;
}

/**
 * CariClub MVP - Responsive Layout Fixes for iPad and Desktop
 * 
 * Purpose: Fix header display and sticky navigation on larger screens
 * Target: iPad (768px-1024px) and MacBook Pro (1025px+)
 * 
 * Issues Addressed:
 * 1. Executive header positioning and width on larger screens
 * 2. Context switcher and bottom nav sticky behavior
 * 3. Content area alignment and spacing
 * 
 * Integration: Add this to the end of mobile.css or as a separate file
 */

/* ===================================================================
   LARGER SCREEN CONTAINER OPTIMIZATION
   =================================================================== */

/* iPad and larger screens - maintain 430px centered container */
@media (min-width: 431px) {
    .app-container {
        max-width: 430px;
        margin: 0 auto;
        border-radius: var(--border-radius-large);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), var(--shadow-modal);
    }
    
    /* Ensure all fixed elements are properly centered and constrained */
    .top-context-bar,
    .executive-header,
    .bottom-nav {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        max-width: 430px;
        width: 430px; /* Fixed width instead of 100% */
        margin: 0;
    }
}

/* ===================================================================
   EXECUTIVE HEADER FIXES FOR LARGER SCREENS
   =================================================================== */

@media (min-width: 431px) {
    .executive-header {
        /* Ensure proper width and positioning */
        width: 430px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        /* Maintain proper top positioning */
        top: calc(60px + env(safe-area-inset-top, 0px));
        
        /* Ensure z-index hierarchy */
        z-index: var(--z-header);
        
        /* Box sizing to prevent overflow */
        box-sizing: border-box;
        
        /* Maintain border radius for larger screens */
        border-radius: 0 0 var(--border-radius) var(--border-radius);
    }
    
    /* Header content should not overflow */
    .executive-header .header-main {
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Organization selector sizing for larger screens */
    .executive-header .org-selector {
        max-width: 200px;
        width: auto;
    }
}

/* ===================================================================
   CONTEXT SWITCHER FIXES FOR LARGER SCREENS
   =================================================================== */

@media (min-width: 431px) {
    .top-context-bar {
        /* Ensure proper positioning */
        position: fixed !important;
        top: 0;
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        /* Fixed dimensions */
        width: 430px !important;
        max-width: 430px;
        
        /* Proper padding and height */
        padding: 12px 16px;
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        height: calc(60px + env(safe-area-inset-top, 0px));
        
        /* Ensure backdrop and styling */
        background: rgba(255, 255, 255, 0.95);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        
        /* Z-index for proper layering */
        z-index: 200;
        
        /* Box sizing */
        box-sizing: border-box;
    }
    
    /* Context switcher container optimization */
    .context-switcher {
        display: flex;
        justify-content: center;
        min-width: 300px;
        margin: 0 auto;
    }
    
    /* Context pills sizing for larger screens */
    .context-pill {
        min-width: 90px;
        padding: 12px 18px;
        font-size: 13px;
    }
}

/* ===================================================================
   BOTTOM NAVIGATION FIXES FOR LARGER SCREENS
   =================================================================== */

@media (min-width: 431px) {
    .bottom-nav {
        /* Ensure proper positioning */
        position: fixed !important;
        bottom: 0;
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        /* Fixed dimensions */
        width: 430px !important;
        max-width: 430px;
        
        /* Proper padding */
        padding: 8px 16px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        
        /* Ensure styling */
        background: white;
        border-top: 1px solid var(--slate-200);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
        
        /* Z-index for proper layering */
        z-index: 100;
        
        /* Box sizing */
        box-sizing: border-box;
        
        /* Border radius for larger screens */
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }
    
    /* Navigation tabs optimization */
    .bottom-nav .nav-tab {
        min-height: 52px;
        max-width: 100px;
        padding: 10px 12px;
    }
}

/* ===================================================================
   CONTENT AREA SPACING FIXES
   =================================================================== */

@media (min-width: 431px) {
    .content-area {
        /* Ensure proper top margin to account for fixed header */
        margin-top: 0;
        padding-top: 20px;
        
        /* Proper bottom padding for fixed bottom nav */
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
        
        /* Ensure width constraints */
        max-width: 100%;
        overflow-x: hidden;
        
        /* Minimum height to account for fixed elements */
        min-height: calc(100vh - 180px);
    }
    
    /* Ensure opportunity cards don't overflow */
    .opportunity-card {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ===================================================================
   MODAL POSITIONING FIXES FOR LARGER SCREENS
   =================================================================== */

@media (min-width: 431px) {
    .modal-overlay {
        /* Center modals properly */
        align-items: center;
        justify-content: center;
    }
    
    .modal {
        /* Restore centered modal positioning */
        transform: scale(0.9);
        border-radius: var(--border-radius);
        max-width: 400px;
        width: 90%;
        max-height: 80vh;
        margin: 0;
    }
    
    .modal-overlay.show .modal {
        transform: scale(1);
    }
}

/* ===================================================================
   SPECIFIC IPAD OPTIMIZATIONS
   =================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
    /* iPad specific adjustments */
    .executive-header {
        /* Slightly larger header for iPad comfort */
        min-height: 140px;
    }
    
    .org-selector {
        /* Better sized selector for iPad */
        width: 220px;
        font-size: 14px;
    }
    
    /* Enhanced touch targets for iPad */
    .quick-action {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    /* Better spaced context pills */
    .context-pill {
        min-width: 95px;
        padding: 14px 20px;
        font-size: 14px;
    }
}

/* ===================================================================
   MACBOOK PRO AND DESKTOP OPTIMIZATIONS
   =================================================================== */

@media (min-width: 1025px) {
    /* Desktop specific adjustments */
    .app-container {
        /* Add some margin on very large screens */
        margin: 20px auto;
        min-height: calc(100vh - 40px);
        
        /* Enhanced shadow for desktop */
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 
                    0 20px 25px -5px rgba(0, 0, 0, 0.15),
                    0 40px 60px -20px rgba(0, 0, 0, 0.1);
    }
    
    /* Restore hover effects for desktop */
    .btn:hover,
    .context-pill:hover,
    .opportunity-card:hover {
        transform: translateY(-2px);
    }
    
    .quick-action:hover {
        transform: translateY(-1px) scale(1.05);
    }
    
    /* Enhanced desktop navigation */
    .context-pill:hover:not(.active) {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
}

/* ===================================================================
   DEBUGGING HELPERS FOR DEVELOPMENT
   =================================================================== */

/* Uncomment for debugging positioning issues */
/*
.top-context-bar {
    border: 2px solid red !important;
}

.executive-header {
    border: 2px solid blue !important;
}

.bottom-nav {
    border: 2px solid green !important;
}

.content-area {
    border: 2px solid orange !important;
}
*/

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

@media (min-width: 431px) and (orientation: landscape) {
    .executive-header {
        /* Constrain header height in landscape */
        max-height: 50vh;
        overflow-y: auto;
    }
    
    .executive-header.expanded {
        max-height: 60vh;
    }
    
    .content-area {
        /* Adjust content spacing for landscape */
        padding: 16px 20px;
        padding-bottom: 100px;
    }
}

/* ===================================================================
   PRINT OPTIMIZATIONS
   =================================================================== */

@media print {
    .app-container {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    
    .top-context-bar,
    .bottom-nav {
        display: none !important;
    }
    
    .executive-header {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        left: auto !important;
    }
    
    .content-area {
        margin-top: 0 !important;
        padding: 20px !important;
    }
}