/* CLINIC-SCOPE: shared */
/* ============================================================================
   datepicker-skin.css — SKIN cho flatpickr (lịch chọn ngày/giờ dùng chung).
   ----------------------------------------------------------------------------
   Tách khỏi master.css (2026-09-21): ~130 dòng này là một khối độc lập, chỉ
   chỉnh hình lịch của thư viện flatpickr, không liên quan phần nền chung.
   Gộp chung khiến master.css thành hộp tạp và khó biết sửa gì ảnh hưởng đâu.

   NẠP: _MainLayout.cshtml, SAU file flatpickr.min.css của thư viện.
   Component dựng picker: exComponent/02-inputs.js (newDatePicker...).
   ============================================================================ */

/* Date/time picker dùng chung: compact theo giao diện khám bệnh, ưu tiên ít che dữ liệu. */
.flatpickr-calendar {
    width: 248px !important;
    font-size: 12px !important;
    border: 1px solid var(--grid-neutral-line, #d6dde2) !important;
    border-radius: 3px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .13) !important;
}

    .flatpickr-calendar::before,
    .flatpickr-calendar::after {
        display: none !important;
    }

.flatpickr-months .flatpickr-month {
    height: 38px !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    height: 38px !important;
    padding: 12px 10px !important;
}

    .flatpickr-months .flatpickr-prev-month svg,
    .flatpickr-months .flatpickr-next-month svg {
        width: 13px !important;
        height: 13px !important;
    }

.flatpickr-current-month {
    height: 38px !important;
    left: 12% !important;
    padding-top: 8px !important;
    width: 76% !important;
    font-size: var(--fs-lg, 16px) !important;
    line-height: 1 !important;
}

    .flatpickr-current-month .flatpickr-monthDropdown-months,
    .flatpickr-current-month input.cur-year {
        height: 20px !important;
        font-size: var(--fs-lg, 16px) !important;
        font-weight: 500 !important;
    }

.flatpickr-weekdays {
    height: 26px !important;
}

span.flatpickr-weekday {
    font-size: 12px !important;
    color: var(--muted-soft, #667085) !important;
}

.flatpickr-days,
.dayContainer {
    width: 248px !important;
    min-width: 248px !important;
    max-width: 248px !important;
}

.flatpickr-day {
    height: 31px !important;
    line-height: 31px !important;
    max-width: 35.42px !important;
    font-size: 12px !important;
}

    .flatpickr-day.today {
        border-color: #9aa4ad !important;
    }

    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
        background: #5b9deb !important;
        border-color: #5b9deb !important;
        color: var(--btn-on, #fff) !important;
    }

.flatpickr-calendar.hasTime .flatpickr-time {
    height: 40px !important;
    max-height: 40px !important;
    border-top: 1px solid var(--line, #edf1f5) !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator {
    height: 40px !important;
    line-height: 40px !important;
    font-size: 13px !important;
}