/*
 * Skin chung cho widget bên thứ ba: dùng token Velzon và đơn vị rem để tự tăng/giảm
 * cùng #font-size-scaler. File được nạp sau CSS riêng của từng màn hình.
 */

/* bootstrap-daterangepicker ------------------------------------------------ */
.daterangepicker {
    color: var(--vz-body-color, #212529);
    background-color: var(--vz-card-bg, var(--vz-body-bg, #fff));
    border: var(--vz-border-width, 1px) solid var(--vz-border-color, #e9ebec);
    border-radius: var(--vz-border-radius, .25rem);
    box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .14);
    font-family: var(--vz-body-font-family, "Inter", sans-serif);
    font-size: .8125rem;
    line-height: 1.5;
    max-width: calc(100vw - 1rem);
}
.daterangepicker::before { border-bottom-color: var(--vz-border-color, #e9ebec); }
.daterangepicker::after { border-bottom-color: var(--vz-card-bg, var(--vz-body-bg, #fff)); }
.daterangepicker.drop-up::before { border-top-color: var(--vz-border-color, #e9ebec); }
.daterangepicker.drop-up::after { border-top-color: var(--vz-card-bg, var(--vz-body-bg, #fff)); }

.daterangepicker .drp-calendar { max-width: 17rem; }
.daterangepicker .drp-calendar.left { padding: .5rem 0 .5rem .5rem; }
.daterangepicker .drp-calendar.right { padding: .5rem; }
.daterangepicker .calendar-table {
    color: var(--vz-body-color, #212529);
    background-color: var(--vz-card-bg, var(--vz-body-bg, #fff));
    border-color: var(--vz-card-bg, var(--vz-body-bg, #fff));
    border-radius: var(--vz-border-radius, .25rem);
}
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    min-width: 2rem;
    width: 2rem;
    height: 1.75rem;
    line-height: 1.625rem;
    font-size: .75rem;
    border-radius: var(--vz-border-radius-sm, .2rem);
}
.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border-color: var(--vz-body-color, #212529);
    padding: .1875rem;
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover,
.daterangepicker .ranges li:hover {
    color: var(--vz-body-color, #212529);
    background-color: var(--vz-tertiary-bg, #f3f6f9);
}
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    color: var(--vz-secondary-color, #878a99);
    background-color: var(--vz-card-bg, var(--vz-body-bg, #fff));
}
.daterangepicker td.in-range {
    color: var(--vz-body-color, #212529);
    background-color: rgba(var(--vz-primary-rgb, 64, 81, 137), .12);
}
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker .ranges li.active {
    color: #fff;
    background-color: var(--vz-primary, #405189);
}
.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    height: auto;
    padding: .125rem .375rem;
    color: var(--vz-body-color, #212529);
    background-color: var(--vz-input-bg-custom, var(--vz-body-bg, #fff));
    border: var(--vz-border-width, 1px) solid var(--vz-input-border-custom, var(--vz-border-color, #ced4da));
    border-radius: var(--vz-border-radius-sm, .2rem);
    font: inherit;
}
.daterangepicker .ranges ul { width: 9rem; }
.daterangepicker .ranges li { padding: .5rem .75rem; font-size: .75rem; }
.daterangepicker .drp-buttons {
    padding: .5rem;
    border-top-color: var(--vz-border-color, #e9ebec);
    line-height: 1.5;
}
.daterangepicker .drp-selected { padding-right: .5rem; font-size: .75rem; }
.daterangepicker .drp-buttons .btn {
    margin-left: .5rem;
    padding: .25rem .5rem;
    font-size: .75rem;
    border-radius: var(--vz-border-radius-sm, .2rem);
}

/* Khi chữ phóng lớn, hai lịch đặt ngang có thể vượt viewport; chuyển sang xếp dọc. */
@media (max-width: 991.98px) {
    .daterangepicker .ranges,
    .daterangepicker .drp-calendar {
        float: none !important;
    }
    .daterangepicker .ranges ul { width: 100%; }
    .daterangepicker .drp-calendar.left { clear: both !important; }
}