/**
 * Modal Components
 * Bootstrap Modal enhancements and customizations
 */

/* Modal Content Styling */
.modal-content {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.modal-header {
    border-bottom: 1px solid #dee2e6;
    background-color: var(--light-color);
}

.modal-footer {
    border-top: 1px solid #dee2e6;
    background-color: var(--light-color);
}

/* Mobile Modal Adjustments */
@media (max-width: 767.98px) {
    .modal-dialog {
        margin: var(--spacing-sm);
        max-width: calc(100vw - 1rem);
    }
    
    .modal-header {
        padding: var(--spacing-md);
    }
    
    .modal-body {
        padding: var(--spacing-md);
        max-height: 60vh;
        overflow-y: auto;
    }
    
    .modal-footer {
        padding: var(--spacing-md);
        flex-direction: column;
    }
    
    .modal-footer .btn {
        width: 100%;
        margin: var(--spacing-xs) 0;
        min-height: 48px;
        border-radius: var(--border-radius);
    }
    
    /* Mobile Select Modal - Fullscreen on mobile */
    #mobile-select-modal .modal-dialog {
        margin: 0;
        max-width: 100%;
    }
    
    #mobile-select-modal .modal-body {
        max-height: none;
        padding: 1rem;
    }
    
    #mobile-select-modal .list-group-item {
        min-height: 48px;
        display: flex;
        align-items: center;
        font-size: 1rem;
        border-left: none;
        border-right: none;
    }
    
    #mobile-select-modal .list-group-item:first-child {
        border-top: none;
    }
    
    #mobile-select-modal .form-control-lg {
        font-size: 1.1rem;
        padding: 0.75rem 1rem;
    }
}