/* Mobile Category Modal Improvements */

/* Ensure modal takes optimal space without unnecessary scrolling */
#mobile-category-modal #category-modal-panel {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

/* Make categories list flexible and scrollable only when needed */
#mobile-category-modal .max-h-\[70vh\] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Improve category item spacing for better touch targets */
#mobile-category-modal .space-y-2 > * + * {
    margin-top: 0.75rem;
}

/* Ensure category items have adequate touch targets */
#mobile-category-modal a {
    min-height: 60px;
    display: flex;
    align-items: center;
    padding: 1rem;
}

/* Smooth scrolling for better UX */
#mobile-category-modal .max-h-\[70vh\] {
    scroll-behavior: smooth;
}

/* Add subtle fade at top/bottom when scrolling */
#mobile-category-modal .max-h-\[70vh\]::before,
#mobile-category-modal .max-h-\[70vh\]::after {
    content: '';
    position: sticky;
    display: block;
    height: 10px;
    z-index: 1;
    pointer-events: none;
}

#mobile-category-modal .max-h-\[70vh\]::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    margin-bottom: -10px;
}

#mobile-category-modal .max-h-\[70vh\]::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    margin-top: -10px;
}

/* Responsive adjustments */
@media (max-height: 600px) {
    #mobile-category-modal #category-modal-panel {
        max-height: 90vh;
    }
    
    #mobile-category-modal .max-h-\[70vh\] {
        max-height: calc(90vh - 80px);
    }
}

@media (max-height: 500px) {
    #mobile-category-modal #category-modal-panel {
        max-height: 95vh;
    }
    
    #mobile-category-modal .max-h-\[70vh\] {
        max-height: calc(95vh - 80px);
    }
}