/* Исправления для модального окна квот */

/* Убеждаемся что модальное окно скрыто по умолчанию */
#quota-modal-container {
    display: none !important;
}

/* Исправление 1: Позиционирование модального контейнера */
.modal-container {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    overflow-y: auto; /* Позволяем прокрутку всего контейнера */
    overflow-x: hidden;
}

/* Центрирование модального окна */
#quota-modal-container {
    justify-content: center;
    align-items: flex-start;
    padding: 20px 0; /* Отступы сверху и снизу для прокрутки */
}

/* Когда модальное окно должно быть видимо */
#quota-modal-container.show {
    display: flex !important;
}

/* Модальное окно без собственной прокрутки */
#quota-modal-container .modal {
    max-height: none; /* Убираем ограничение высоты */
    overflow: visible; /* Убираем прокрутку */
    margin: 20px auto;
    position: relative;
}

/* Исправление 2: Увеличиваем z-index для выпадающих списков SumoSelect */
.SumoSelect > .optWrapper {
    z-index: 10001 !important; /* Выше чем у модального окна (9999) */
    max-height: 200px !important; /* Ограничиваем высоту списка */
}

/* Убеждаемся что контейнер селекта не обрезает выпадающий список */
#quota-modal-container .select-container {
    overflow: visible !important;
}

/* Фикс для правильного позиционирования выпадающих списков внутри модального окна */
#quota-modal-container .SumoSelect {
    position: relative;
}

#quota-modal-container .SumoSelect > .optWrapper {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 4px;
}

/* Убеждаемся что area-wrapper не обрезает контент */
#quota-modal-container .area-wrapper {
    overflow: visible !important;
}

/* Убираем прокрутку с calendar-body */
#quota-modal-container .calendar-body {
    max-height: none;
    overflow: visible;
}

/* Фикс для календаря чтобы он тоже был выше модального окна */
.ui-datepicker {
    z-index: 10002 !important;
}

/* Кнопка закрытия */
#quota-modal-container .modal .close-button {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10003;
}

/* Дополнительные улучшения для маленьких экранов */
@media (max-height: 768px) {
    #quota-modal-container {
        padding: 10px 0;
    }
    
    #quota-modal-container .modal {
        margin: 10px auto;
    }
    
    /* Уменьшаем высоту выпадающих списков на маленьких экранах */
    .SumoSelect > .optWrapper {
        max-height: 150px !important;
    }
    
    .SumoSelect > .optWrapper > .options {
        max-height: 150px !important;
    }
}

/* Блокируем прокрутку body когда открыто модальное окно */
body.modal-open {
    overflow: hidden !important;
}

/* Убеждаемся что модальный контейнер прокручивается вместе со страницей */
#quota-modal-container.show {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Для плавной прокрутки на iOS */
}

/* Внутреннее содержимое модального окна */
#quota-modal-container .modal > * {
    position: relative;
    z-index: 1;
}