/* Mobile UI Improvements - Complete Mobile Responsive Design */

/* ============================================
   MOBILE VIEW (max-width: 768px)
   ============================================ */

@media screen and (max-width: 768px) {
    
    /* ===== SPACING OPTIMIZATION: Maximize screen real estate ===== */
    
    /* Remove almost all padding from main content on mobile */
    main.desktop-main {
        padding-top: 0.125rem !important;
        padding-bottom: 0.25rem !important;
    }
    
    /* Minimal inner container padding */
    main.desktop-main > div {
        padding-top: 0.125rem !important;
        padding-bottom: 0.25rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* REDUCE space below hamburger significantly */
    .md\\:hidden.mb-4 {
        margin-bottom: 0 !important; /* Remove completely */
    }
    
    /* THE KEY FIX: Use ID selector with negative margin to pull grey box UP */
    #progress-wrapper {
        margin-top: -1rem !important; /* Negative margin pulls it up */
        margin-bottom: 0.25rem !important;
    }
    
    /* Remove all margin above grey box */
    #mobile-progress-container {
        margin-top: 0 !important;
        margin-bottom: 0.25rem !important;
        display: block !important; /* Override inline display:none */
    }
    
    /* DOUBLE the spacing between grey box and stats - from 1rem to 2rem */
    #mobile-progress-container + .grid {
        margin-top: 2rem !important;
        display: block !important;
    }
    
    /* Make sure stats grid shows on mobile */
    .grid.grid-cols-1.gap-2.mt-4 {
        display: grid !important;
        margin-top: 2rem !important;
    }
    
    /* Remove extra margin from progress bar wrapper */
    #mobile-progress-container > div {
        margin-bottom: 0.125rem !important; /* Reduced from 0.25rem */
    }
    
    /* ===== NAVIGATION: Hide desktop tabs, show hamburger menu ===== */
    
    /* Hide the entire desktop tab navigation container on mobile */
    .border-b.border-gray-200 {
        display: none !important;
    }
    
    /* Also target the nav element directly with multiple selectors for maximum specificity */
    nav.-mb-px.flex.space-x-8,
    nav.-mb-px.flex.space-x-8.hidden.md\\:flex,
    .border-b.border-gray-200 nav,
    nav[aria-label="Tabs"] {
        display: none !important;
    }
    
    /* Hide all tab links on mobile */
    .tab-link {
        display: none !important;
    }
    
    /* Show mobile hamburger menu container */
    .md\\:hidden {
        display: block !important;
    }
    
    /* Mobile menu styling */
    #mobile-menu {
        position: fixed !important;
        top: 60px !important;
        left: 1rem !important;
        right: 1rem !important;
        z-index: 9999 !important;
        background: white !important;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    
    /* Mobile menu button - minimal padding */
    #mobile-menu-toggle {
        z-index: 10000 !important;
        position: relative !important;
        display: block !important;
        padding: 0.375rem !important;
        margin: 0 !important;
    }
    
    /* Mobile menu links */
    .mobile-tab-link {
        display: block !important;
        padding: 0.75rem 1rem;
        color: #4b5563;
        text-decoration: none;
        border-bottom: 1px solid #f3f4f6;
        transition: all 0.2s ease;
    }
    
    .mobile-tab-link:last-child {
        border-bottom: none;
    }
    
    .mobile-tab-link:hover {
        background-color: #f9fafb;
        color: #6366f1;
    }
    
    .mobile-tab-link.active {
        background-color: #eef2ff;
        color: #6366f1;
        font-weight: 500;
    }
    
    /* ===== TIMELINE: Hide desktop horizontal, show mobile vertical ===== */
    
    /* Hide desktop progress bar on mobile */
    #progress-container {
        display: none !important;
    }
    
    /* SHOW mobile progress bar on mobile - this is the critical fix! */
    #mobile-progress-container {
        display: block !important;
    }
    
    /* Mobile progress bar styling */
    .mobile-progress-bar {
        display: block !important;
    }
    
    /* Mobile progress bar container styling */
    .mobile-progress-bar-container {
        margin-bottom: 0.125rem !important; /* Reduced from 0.25rem */
    }
    
    /* REDUCE timeline height to fit Legacy on screen - from 28rem to 22rem */
    .mobile-progress-bar .h-80,
    #mobile-progress-container .h-80 {
        height: 22rem !important; /* Reduced from 28rem to fit on screen */
    }
    
    /* Adjust stage labels container to match new height */
    #mobile-progress-container .flex.flex-col.justify-between.h-80 {
        height: 22rem !important;
    }
    
    /* Stage indicators on vertical timeline */
    .mobile-stage-indicator {
        width: 0.75rem !important;
        height: 0.75rem !important;
        border-radius: 50%;
        background: white;
        border: 2px solid #d1d5db;
        transition: all 0.3s ease;
    }
    
    /* Stage indicator states */
    .mobile-stage-indicator.completed {
        background: #10b981 !important;
        border-color: #10b981 !important;
    }
    
    .mobile-stage-indicator.in-progress {
        background: #f59e0b !important;
        border-color: #f59e0b !important;
    }
    
    /* INCREASE heading size on mobile - 4 points larger (1.25rem + 0.25rem = 1.5rem) */
    #mobile-progress-container h2 {
        font-size: 1.5rem !important; /* Increased from 1.25rem by 4 points */
        font-weight: 700 !important;
        margin-bottom: 0.25rem !important; /* Added space below heading */
        margin-top: 0 !important;
    }
    
    /* Reduce spacing in the progress header section */
    #mobile-progress-container .text-center {
        margin-bottom: 0.125rem !important; /* Reduced from 0.25rem */
    }
    
    /* Tighten up the vertical progress layout spacing */
    #mobile-progress-container .flex.items-start {
        margin-bottom: 0.125rem !important; /* Reduced from 0.25rem */
    }
    
    /* Remove any extra bottom padding from text elements */
    #mobile-progress-container .text-xs,
    #mobile-progress-container .text-sm,
    #mobile-progress-container .text-lg {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ============================================
   DESKTOP VIEW (min-width: 769px)
   ============================================ */

@media screen and (min-width: 769px) {
    
    /* SHOW desktop elements - override inline display:none */
    .border-b.border-gray-200 {
        display: block !important;
    }
    
    #progress-container {
        display: block !important;
    }
    
    nav.-mb-px.flex.space-x-8 {
        display: flex !important;
    }
    
    .tab-link {
        display: inline-block !important;
    }
    
    /* Hide mobile progress bar on desktop */
    #mobile-progress-container {
        display: none !important;
    }
    
    /* Hide mobile hamburger menu on desktop */
    #mobile-menu-toggle {
        display: none !important;
    }
    
    /* Hide mobile menu container on desktop */
    .md\\:hidden {
        display: none !important;
    }
    
    /* Hide the mobile stats grid on desktop */
    .grid.grid-cols-1.gap-2.mt-4 {
        display: none !important;
    }
}