/* www/css/calendar.css */
/* Стили для календаря dateRangeInput с поддержкой темной и светлой темы через переменные */

/* Основной контейнер календаря */
.datepicker {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: 12px !important;
    box-shadow: var(--card-shadow-hover) !important;
    padding: 8px !important;
}

/* Заголовок календаря */
.datepicker th {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-weight: 600;
    padding: 8px !important;
}

/* Ячейки дат */
.datepicker td {
    color: var(--text-primary) !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    transition: all 0.15s ease;
}

/* Активная дата при наведении */
.datepicker td:hover {
    background-color: var(--primary-glow) !important;
    color: var(--primary) !important;
}

/* Выбранная дата */
.datepicker td.active,
.datepicker td.active:hover {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Диапазон дат */
.datepicker td.range {
    background-color: var(--primary-glow) !important;
    color: var(--text-primary) !important;
    border-radius: 0 !important;
}

.datepicker td.range:hover {
    background-color: rgba(99, 102, 241, 0.35) !important;
}

/* Начало и конец диапазона */
.datepicker td.range-start,
.datepicker td.range-end {
    background-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 6px !important;
}

/* Неактивные даты (другие месяцы) */
.datepicker td.disabled,
.datepicker td.old,
.datepicker td.new {
    color: var(--text-secondary) !important;
    opacity: 0.4;
    background-color: transparent !important;
}

/* Стрелки навигации */
.datepicker .prev,
.datepicker .next {
    color: var(--text-primary) !important;
    border-radius: 6px !important;
}

.datepicker .prev:hover,
.datepicker .next:hover {
    background-color: var(--primary-glow) !important;
    color: var(--primary) !important;
}

/* Название месяца/года */
.datepicker .datepicker-switch {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
    border-radius: 6px !important;
}

.datepicker .datepicker-switch:hover {
    background-color: var(--primary-glow) !important;
    color: var(--primary) !important;
}

/* Сегодняшняя дата */
.datepicker td.today {
    background-color: var(--warning) !important;
    color: #0f172a !important;
    font-weight: 600;
}

.datepicker td.today:hover {
    background-color: var(--warning-hover) !important;
}

/* Выходные дни */
.datepicker td.weekend {
    color: var(--danger) !important;
}

/* Дополнительные стили для месяцев и годов */
.datepicker table tr td span {
    color: var(--text-primary) !important;
    background-color: transparent !important;
    border-radius: 8px !important;
    transition: all 0.15s ease;
}

.datepicker table tr td span:hover {
    background-color: var(--primary-glow) !important;
    color: var(--primary) !important;
}

.datepicker table tr td span.active {
    background-color: var(--primary) !important;
    color: #ffffff !important;
}

/* Стили для input полей календаря */
.form-control[data-date], .datepicker-input {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-primary) !important;
}

.form-control[data-date]:focus, .datepicker-input:focus {
    background-color: var(--input-bg) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

/* ===== Стили для мобильной адаптации календарей ===== */
@media (max-width: 768px) {
    /* На мобильных полях выбора диапазона дат ставим вертикальное выстраивание */
    .shiny-date-range-input {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .shiny-date-range-input .input-daterange {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .shiny-date-range-input input {
        width: 100% !important;
        text-align: left !important;
        border-radius: 8px !important; /* Обеспечиваем скругление каждому инпуту отдельно */
    }

    /* Убираем элемент-разделитель (обычно "to" или "по") */
    .shiny-date-range-input .input-group-addon {
        display: none !important;
    }
}