/* ========================================
   MOBILE RESPONSIVENESS
   ======================================== */

@media (max-width: 768px) {
    /* Header optimization */
    .screen-header {
        padding: 0.75rem 1rem;
        height: 60px;
        min-height: 60px;
        --header-height: 60px;
    }
    
    .screen-header h1,
    .screen-header h2,
    .screen-header h3 {
        font-size: 1.125rem;
        padding: 0 0.5rem;
    }
    
    .screen-content {
        padding: 0.75rem;
        padding-bottom: calc(2rem + var(--safe-bottom));
    }
    
    /* Mobile hamburger menu positioning */
    .mobile-menu-btn {
        top: max(12px, calc(0.75rem + var(--safe-top))) !important;
        left: max(12px, calc(0.75rem + var(--safe-left))) !important;
        min-height: 44px !important;
        min-width: 44px !important;
        --nav-button-size: 44px;
    }
    
    /* Mobile navigation buttons */
    .back-btn,
    .edit-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.5rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Mobile quick actions */
    .quick-actions button {
        min-width: 32px;
        min-height: 32px;
        padding: 0.5rem;
        font-size: 12px;
    }
    
    /* Mobile cards */
    .content-card {
        padding: 1rem !important;
        margin: 0 0.5rem 1.5rem 0.5rem !important;
    }
    
    /* Mobile search interface */
    .tab-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.75rem !important;
    }
    
    /* Mobile grid adjustments */
    .grid.grid-cols-2,
    .grid.grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    .grid.grid-cols-1.md\\:grid-cols-2.gap-4 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* Mobile section spacing adjustments */
    .section .mb-8:first-child {
        margin-top: calc(60px + 44px + 1.5rem) !important;
        padding-top: 0.75rem !important;
    }
}

/* Mobile Bottom Navigation */
@media (max-width: 1023px) {
    /* Hide hamburger menu on mobile */
    .mobile-menu-btn {
        display: none !important;
    }
    
    /* Add bottom padding to body for mobile nav - reduced to prevent covering PWA prompts */
    body {
        padding-bottom: calc(55px + env(safe-area-inset-bottom, 0));
    }
}

/* Mobile nav basic styling - reduced height */
.mobile-bottom-nav {
    height: 55px;
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    background-color: rgb(204 251 241) !important; /* teal-100 */
}

.mobile-nav-item.active i,
.mobile-nav-item.active span {
    color: rgb(13 148 136) !important; /* teal-600 */
}

/* Enhanced More Menu Styling */
#mobile-more-panel {
    margin: auto;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 10rem);
}

#mobile-more-panel.scale-0 {
    transform: scale(0);
    opacity: 0;
}

#mobile-more-panel.scale-100 {
    transform: scale(1);
    opacity: 1;
}

/* Grid responsiveness for smaller screens */
@media (max-width: 480px) {
    #mobile-more-panel .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    #mobile-more-panel .more-menu-item {
        padding: 1rem;
    }
    
    #mobile-more-panel .w-16.h-16 {
        width: 3rem;
        height: 3rem;
    }
    
    .tab-btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.625rem !important;
    }
}

/* For very tall screens, allow scrolling */
@media (min-height: 800px) {
    #mobile-more-panel {
        max-height: 70vh;
    }
}

/* Desktop: hide mobile navigation */
@media (min-width: 1024px) {
    .mobile-bottom-nav,
    #mobile-more-overlay,
    #mobile-more-panel {
        display: none !important;
    }
    
    body {
        padding-bottom: 0;
    }
    
    .sidebar {
        padding-top: 0;
    }
}

@media (max-width: 1024px) {
    .sidebar {
        padding-top: 3rem;
    }
}

/* Responsive text truncation */
@media (max-width: 640px) {
    .max-w-20 {
        max-width: 5rem;
    }
    
    .tab-btn span:not(.tab-count) {
        display: none;
    }
}

/* ========================================
   DESKTOP/WEB RESPONSIVENESS  
   ======================================== */

/* Ensure sufficient bottom spacing on larger screens */
@media (min-width: 768px) {
    .screen-content,
    .main-content,
    [class*="px-4"][class*="py-6"],
    [class*="px-6"][class*="py-8"] {
        padding-bottom: 4rem !important; /* More bottom space on desktop */
    }
    
    /* Specific containers that need more bottom spacing on web */
    .max-w-7xl,
    .max-w-6xl,
    .max-w-4xl,
    .max-w-2xl {
        padding-bottom: 4rem !important;
    }
}

@media (min-width: 1024px) {
    .screen-content,
    .main-content,
    [class*="px-4"][class*="py-6"],
    [class*="px-6"][class*="py-8"] {
        padding-bottom: 5rem !important; /* Even more space on large screens */
    }
    
    .max-w-7xl,
    .max-w-6xl,
    .max-w-4xl,
    .max-w-2xl {
        padding-bottom: 5rem !important;
    }
}

/* ========================================
   PWA-SPECIFIC OVERRIDES
   ======================================== */

/* PWA body spacing override - used in projects app and other PWA-enabled apps */
.pwa-body-spacing body,
body.pwa-body-spacing {
    padding-bottom: calc(55px + env(safe-area-inset-bottom, 0)) !important;
}

/* ========================================
   MOBILE SUBTASK FORM FIXES
   ======================================== */

@media (max-width: 768px) {
    /* Mobile form button layouts */
    .flex.gap-2, .flex.gap-3 {
        flex-wrap: wrap;
        align-items: center;
    }
    
    /* Ensure buttons don't overflow on mobile */
    .flex.gap-2 button, .flex.gap-3 button {
        min-width: auto;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* Mobile subtask form styling */
    #newSubtaskForm {
        width: 100%;
        overflow-x: hidden;
    }
    
    #newSubtaskForm .flex {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }
    
    #newSubtaskForm .flex input[type="text"] {
        width: 100%;
        flex: none;
        box-sizing: border-box;
    }
    
    #newSubtaskForm .flex select {
        width: 100%;
        flex: none;
        box-sizing: border-box;
    }
    
    /* Mobile subtask button group */
    #newSubtaskForm .flex button {
        width: 100%;
        flex: none;
        text-align: center;
        box-sizing: border-box;
        min-height: 44px; /* Touch-friendly size */
    }
}

/* Alternative horizontal layout for larger mobile screens */
@media (min-width: 480px) and (max-width: 768px) {
    #newSubtaskForm .flex {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 0.75rem;
        width: 100%;
    }
    
    #newSubtaskForm .flex input[type="text"] {
        grid-column: 1 / -1;
        width: 100%;
    }
    
    #newSubtaskForm .flex select {
        grid-column: 1;
        width: 100%;
    }
    
    #newSubtaskForm .flex button:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        width: auto;
        min-width: 80px;
    }
    
    #newSubtaskForm .flex button:nth-child(4) {
        grid-column: 1 / -1;
        grid-row: 3;
        width: 100%;
    }
}