/**
 * Action Sheet Scrollable Fix
 * Makes action sheets with long lists scrollable
 */

/* Make action sheet modal body scrollable */
.action-sheet .modal-content {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.action-sheet .modal-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: inherit;
}

/* Scrollable body wrapper */
.action-sheet .modal-body,
.action-sheet .modal-content > ul {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(85vh - 60px); /* Account for header height */
    flex: 1;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Custom scrollbar styling */
.action-sheet .modal-body::-webkit-scrollbar,
.action-sheet .modal-content > ul::-webkit-scrollbar {
    width: 6px;
}

.action-sheet .modal-body::-webkit-scrollbar-track,
.action-sheet .modal-content > ul::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.action-sheet .modal-body::-webkit-scrollbar-thumb,
.action-sheet .modal-content > ul::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.action-sheet .modal-body::-webkit-scrollbar-thumb:hover,
.action-sheet .modal-content > ul::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Ensure proper spacing at bottom */
.action-sheet .modal-content > ul {
    padding-bottom: 1rem;
    margin-bottom: 0;
}

/* Fix for iOS safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .action-sheet .modal-content {
        max-height: calc(85vh - env(safe-area-inset-bottom));
    }
}

/* Responsive adjustments */
@media (max-height: 600px) {
    .action-sheet .modal-content {
        max-height: 90vh;
    }
    
    .action-sheet .modal-body,
    .action-sheet .modal-content > ul {
        max-height: calc(90vh - 60px);
    }
}