/* =========================================================================
   flatpickr theme "DMST"
   Làm cho flatpickr ở portal (initDatePicker) trông giống component date của
   backoffice (umb-input-dmst-date): ô ngày bo góc, ngày chọn nền xanh, chấm
   "hôm nay", popover bo góc + shadow, header gọn (ẩn spinner năm mặc định).

   CHỈ chỉnh thẩm mỹ (màu / bo góc / header) — KHÔNG đụng width/height của
   calendar, .flatpickr-days, .dayContainer, .flatpickr-day để giữ nguyên lưới
   7 cột gọn của flatpickr (đụng vào là lịch giãn ngang, thưa, rất xấu).
   PHẢI load SAU flatpickr.min.css.
   ========================================================================= */

.flatpickr-calendar {
    --dmst-primary: #3b82f6;
    --dmst-radius: 8px;
    /* content-box: để padding cộng RA NGOÀI, không bóp lưới ngày 307px (portal đặt
       box-sizing:border-box toàn cục khiến padding ăn vào trong -> lẹo bên phải). */
    box-sizing: content-box;
    border: none;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 6px;
    font-family: inherit;
}

/* Bỏ mũi tên tam giác nối input <-> popover cho gọn giống backoffice */
.flatpickr-calendar::before,
.flatpickr-calendar::after {
    display: none !important;
}

/* --- Header: tháng / năm ------------------------------------------------- */
.flatpickr-calendar .flatpickr-months .flatpickr-month {
    color: #060606;
}

.flatpickr-calendar .flatpickr-current-month {
    height: 100%;
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 600;
    font-size: 13px;
    color: #060606;
    border-radius: 6px;
    padding: 2px 4px;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: #f4f4f5;
}

.flatpickr-calendar .flatpickr-current-month input.cur-year {
    font-weight: 600;
    font-size: 13px;
    color: #060606;
}

/* Ẩn spinner tăng/giảm năm (mũi tên nhỏ cũ kỹ) — giống backoffice không có */
.flatpickr-calendar .numInputWrapper span.arrowUp,
.flatpickr-calendar .numInputWrapper span.arrowDown {
    display: none;
}

.flatpickr-calendar .numInputWrapper:hover {
    background: transparent;
}

/* Nút chuyển tháng trước / sau — dạng ghost bo góc */
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month {
    border-radius: var(--dmst-radius);
    fill: #68686a;
    top: 7px;
    margin: 0px 5px;
}

.flatpickr-calendar .flatpickr-prev-month:hover,
.flatpickr-calendar .flatpickr-next-month:hover {
    background: #f4f4f5;
}

.flatpickr-calendar .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-next-month:hover svg {
    fill: #060606;
}

.flatpickr-calendar .flatpickr-prev-month svg path,
.flatpickr-calendar .flatpickr-next-month svg path {
    fill: inherit;
}

/* --- Thứ trong tuần ----------------------------------------------------- */
.flatpickr-calendar span.flatpickr-weekday {
    font-size: 11px;
    font-weight: 700;
    color: #3a424d;
}

/* --- Ô ngày (chỉ đổi bo góc + màu, KHÔNG đổi kích thước) ----------------- */
.flatpickr-calendar .flatpickr-days {
    border: none;
}

.flatpickr-calendar .flatpickr-day {
    border: 1px solid transparent;
    border-radius: var(--dmst-radius);
    font-size: 13px;
    font-weight: 400;
    /* Bậc 1 — ngày trong tháng hiện tại, chọn được: đen bình thường */
    color: #060606;
}

.flatpickr-calendar .flatpickr-day:hover:not(.selected):not(.flatpickr-disabled) {
    background: #f4f4f5;
    border-color: transparent;
}

/* Bậc 2 — ngày thuộc tháng khác (vẫn chọn được): MỜ */
.flatpickr-calendar .flatpickr-day.prevMonthDay,
.flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: #a1a1a1;
}

/* Bậc 3 — ngày bị disable: MỜ HẲN, không gạch ngang. Đặt sau prev/next để
   ngày vừa khác-tháng vừa disable vẫn hiện đúng bậc. */
.flatpickr-calendar .flatpickr-day.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.flatpickr-disabled:hover,
.flatpickr-calendar .flatpickr-day.prevMonthDay.flatpickr-disabled,
.flatpickr-calendar .flatpickr-day.nextMonthDay.flatpickr-disabled {
    color: #d5d5d5;
    background: transparent;
    border-color: transparent;
    text-decoration: none;
    cursor: not-allowed;
}

/* Ngày được chọn (và range endpoints) */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-day.endRange:hover {
    background: var(--dmst-primary);
    border-color: var(--dmst-primary);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
}

/* Hôm nay (chưa chọn): bỏ viền mặc định, thay bằng chấm xanh dưới đáy */
.flatpickr-calendar .flatpickr-day.today:not(.selected) {
    border-color: transparent;
    position: relative;
}

.flatpickr-calendar .flatpickr-day.today:not(.selected)::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--dmst-primary);
}

.flatpickr-calendar .flatpickr-day.today:not(.selected):hover {
    background: #f4f4f5;
    color: #060606;
}

/* --- Chọn nhanh tháng / năm (overlay tự viết, giống backoffice) ---------- */

/* Ẩn dropdown tháng + ô năm mặc định của flatpickr, thay bằng tiêu đề bấm được */
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper {
    display: none;
}

.flatpickr-calendar .dmst-cal-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 10px;
    border-radius: var(--dmst-radius);
    font-size: 13px;
    font-weight: 600;
    color: #060606;
    cursor: pointer;
}

.flatpickr-calendar .dmst-cal-title:hover {
    background: #f4f4f5;
}

.flatpickr-calendar .dmst-my-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    padding: 6px;
    background: #fff;
    border-radius: 10px;
}

.flatpickr-calendar .dmst-my-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 4px;
}

.flatpickr-calendar .dmst-my-nav {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--dmst-radius);
    color: #68686a;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.flatpickr-calendar .dmst-my-nav:hover {
    background: #f4f4f5;
    color: #060606;
}

.flatpickr-calendar .dmst-my-htitle {
    all: unset;
    box-sizing: border-box;
    flex: 1 1 auto;
    text-align: center;
    padding: 6px 8px;
    border-radius: var(--dmst-radius);
    font-size: 13px;
    font-weight: 600;
    color: #060606;
    cursor: pointer;
}

.flatpickr-calendar .dmst-my-htitle:hover {
    background: #f4f4f5;
}

.flatpickr-calendar .dmst-my-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.flatpickr-calendar .dmst-my-cell {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: var(--dmst-radius);
    font-size: 13px;
    color: #060606;
    cursor: pointer;
}

.flatpickr-calendar .dmst-my-cell:hover {
    background: #f4f4f5;
}

.flatpickr-calendar .dmst-my-cell.current {
    border: 1px solid var(--dmst-primary);
}

.flatpickr-calendar .dmst-my-cell.muted {
    color: #a1a1a1;
}

/* --- Footer "Hôm nay" / "Xoá" ------------------------------------------- */
.flatpickr-calendar .dmst-cal-footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e9e8e6;
}

.flatpickr-calendar .dmst-cal-foot-btn {
    all: unset;
    box-sizing: border-box;
    padding: 6px 12px;
    border-radius: var(--dmst-radius);
    font-size: 13px;
    font-weight: 500;
    color: #060606;
    cursor: pointer;
}

.flatpickr-calendar .dmst-cal-foot-btn:hover {
    background: #f4f4f5;
}

.flatpickr-calendar .dmst-cal-foot-btn:disabled {
    color: #a1a1a1;
    cursor: not-allowed;
}

.flatpickr-calendar .dmst-cal-foot-btn:disabled:hover {
    background: transparent;
}
.flatpickr-calendar .flatpickr-day.dmst-keyboard-focus:not(.selected):not(.flatpickr-disabled) {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
    color: var(--dmst-primary);
}