/*
 * date-range.css
 * Страница: все, где есть отбор по датам
 * Блок: промежуток дат — поле и календарь (виджет `common\widgets\DateRange`)
 *
 * Календарь по образцу Wildberries, только плотнее: у них между всем
 * воздух, у нас каждая клетка ровно под число.
 *
 * Что внутри:
 * 1. Поле со значком календаря
 * 2. Раскрытая часть: месяцы столбиком слева, панель справа
 * 3. Месяц: заголовок, дни недели, сетка
 * 4. Подсветка выбранного промежутка
 * 5. Телефон: панель над календарём, во всю ширину
 */

/* --- 1. Поле --- */

.wms-dates {
    width: 100%;
}

/* Значок не растягивается и не мигает при наведении, как кнопка:
   он часть поля. */
.wms-dates-open {
    flex: 0 0 auto;
    padding-left: .5rem;
    padding-right: .5rem;
}

/* --- 2. Раскрытая часть --- */

.wms-dates-menu {
    /*
     * Ширина по содержимому, а не по полю: поле в столбце узкое,
     * а календарю нужно семь клеток и панель сбоку. Открывается поверх
     * соседних столбцов — это нормально, так делает и Wildberries.
     */
    width: auto;
    min-width: 0;

    gap: .75rem;
    padding: .5rem;

    /* Окно не должно уезжать за низ экрана: высоту держит прокрутка
       месяцев, а не само окно. */
    max-height: calc(100vh - 6rem);
}

/*
 * Раскладка в строку — только когда открыто.
 *
 * `display` здесь нельзя ставить на само меню: Bootstrap прячет его
 * через `display: none`, и наше правило перебивало бы его — календарь
 * висел бы на странице всегда, обрубком у правого края, без всякого
 * позиционирования. Так и было при первой проверке.
 */
.wms-dates-menu.show {
    display: flex;
}

/*
 * Месяцы столбиком с прокруткой.
 *
 * Высота — под два месяца с небольшим: видно текущий и начало
 * следующего, понятно, что дальше есть куда крутить.
 */
.wms-dates-months {
    width: 15.5rem;
    height: 17rem;
    overflow-y: auto;
    padding-right: .25rem;

    /* Докрутили до конца — страница под окном не едет. */
    overscroll-behavior: contain;
}

/* Панель справа: периоды, поля, кнопки. */
.wms-dates-side {
    width: 14rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

/*
 * Периоды в две колонки.
 *
 * Столбиком шесть кнопок вытягивали панель, и окно целиком не влезало
 * в экран обычного ноутбука — «Применить» оказывалось за нижним краем.
 * В две колонки панель ниже календаря, и окно помещается.
 */
.wms-dates-periods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .25rem;
    margin-bottom: .25rem;
}

.wms-dates-period {
    padding-left: .4rem;
    padding-right: .4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wms-dates-bound {
    display: block;
    font-size: .8rem;
    color: var(--bs-secondary-color, #6c757d);
}

.wms-dates-bound .form-control {
    margin-top: .1rem;
}

/* Кнопки внизу панели, у правого края (правило 6.1). */
.wms-dates-actions {
    margin-top: auto;
    padding-top: .5rem;
    display: flex;
    justify-content: flex-end;
    gap: .35rem;
}

/* --- 3. Месяц --- */

.wms-dates-month + .wms-dates-month {
    margin-top: .5rem;
}

.wms-dates-title {
    font-weight: 600;
    font-size: .9rem;
    text-align: center;
    padding: .25rem 0;
}

/* Семь колонок ровно под клетки — ни шире, ни уже. */
.wms-dates-grid {
    display: grid;
    grid-template-columns: repeat(7, 2.1rem);
    justify-content: center;
}

.wms-dates-weekday {
    font-size: .75rem;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
    padding-bottom: .15rem;
}

/* Суббота и воскресенье выделены — как в любом календаре. */
.wms-dates-weekday.is-weekend {
    color: var(--bs-danger, #dc3545);
}

/*
 * Клетка дня — квадрат. Без рамки и фона, пока не выбрана:
 * рамки у тридцати клеток сливаются в решётку, и числа теряются.
 */
.wms-dates-day {
    width: 2.1rem;
    height: 2.1rem;
    border: 0;
    background: none;
    font-size: .85rem;
    color: var(--bs-body-color, #212529);
    border-radius: .25rem;
    cursor: pointer;
}

.wms-dates-day:hover {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

/* Сегодняшний день — обведён, чтобы находить его взглядом. */
.wms-dates-day.is-today {
    box-shadow: inset 0 0 0 1px var(--bs-primary, #0d6efd);
}

/* --- 4. Выбранный промежуток --- */

/* Середина промежутка — светлая полоса, без скруглений: так видно,
   что дни идут подряд. */
.wms-dates-day.in-range {
    background: var(--bs-primary-bg-subtle, #cfe2ff);
    border-radius: 0;
}

/* Начало и конец — сплошные, со скруглением наружу. */
.wms-dates-day.is-start,
.wms-dates-day.is-end {
    background: var(--bs-primary, #0d6efd);
    color: #fff;
}

.wms-dates-day.is-start {
    border-radius: .25rem 0 0 .25rem;
}

.wms-dates-day.is-end {
    border-radius: 0 .25rem .25rem 0;
}

/* Один день — и начало, и конец разом: скругление со всех сторон. */
.wms-dates-day.is-start.is-end {
    border-radius: .25rem;
}

/*
 * Примерка за мышью — серым.
 *
 * Пока второй щелчок не сделан, промежуток растёт за курсором, и он
 * ещё не решение. Серый говорит об этом без слов; синим он станет,
 * когда конец выбран. Начало при этом остаётся синим: оно уже выбрано.
 */
.wms-dates-months.is-preview .wms-dates-day.in-range {
    background: var(--bs-secondary-bg, #e9ecef);
}

.wms-dates-months.is-preview .wms-dates-day.is-end:not(.is-start) {
    background: var(--bs-secondary, #6c757d);
    color: #fff;
}

/* --- 5. Телефон --- */

@media (max-width: 767.98px) {
    /* Панель над календарём, всё в один столбец на всю ширину. */
    .wms-dates-menu {
        flex-direction: column-reverse;
        width: calc(100vw - 2rem);
    }

    .wms-dates-months,
    .wms-dates-side {
        width: 100%;
    }

    .wms-dates-months {
        height: 50vh;
    }

}