/* LCH Datepicker — chủ yếu tùy chỉnh popup lịch (.flatpickr-calendar).
   Ô nhập ngày (altInput) không style ở đây để trùng theme hệ thống (assets/style.css, .input, v.v.). */

/* Chỉ đảm bảo không tràn layout; width theo form/cột */
input.flatpickr-input.flatpickr-alt-display.lch-flatpickr-input {
    box-sizing: border-box;
    max-width: 100%;
}

/* Không ép ẩn ô backing bằng position/clip — để Flatpickr tự xử lý. */

/* Cảm ứng: ô chỉ chọn ngày (readonly) — hạn chế ô chọn/copy gợy bàn phím */
@media (pointer: coarse), (max-width: 768px) {
    .lch-flatpickr-input[readonly],
    input.lch-flatpickr-input.flatpickr-input[readonly],
    input.flatpickr-alt-display.lch-flatpickr-input[readonly] {
        caret-color: transparent;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
}

/*
 * Gọn lịch: max-width trên .flatpickr-calendar nhưng mặc định Flatpickr cố định
 * .flatpickr-days / .dayContainer ≈ 307px + overflow:hidden → cắt mép phải (cột CN lệch).
 * Đồng bộ chiều ngang 100% + bỏ max-width 39px của ô ngày để 7 cột đều.
 */
/*
 * Trang phiếu ra lò — dải ô filter: khớp viền/padding với khối “Chuyến lò” / “Phân loại” cùng hàng
 * (style.css cho input[type=text] dùng viền xanh + height 30px — lệch context này).
 */
.kiln-slip-global-fields input.flatpickr-input.flatpickr-alt-display.lch-flatpickr-input {
    padding: 8px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    min-height: 38px !important;
    height: auto !important;
    width: 100%;
    background: #fff !important;
    font-size: inherit;
    line-height: 1.25;
}

.kiln-slip-global-fields input.flatpickr-input.flatpickr-alt-display.lch-flatpickr-input:focus {
    outline: none;
    border-color: #0077b6 !important;
    background: #fdfff3 !important;
}

body.dark .kiln-slip-global-fields input.flatpickr-input.flatpickr-alt-display.lch-flatpickr-input {
    border-color: #4a4d51 !important;
    background: #202124 !important;
    color: #e8eaed !important;
}

body.dark .kiln-slip-global-fields input.flatpickr-input.flatpickr-alt-display.lch-flatpickr-input:focus {
    border-color: #5a90c2 !important;
    background: #2a2d31 !important;
}

.flatpickr-calendar {
    z-index: 110000 !important;
    box-sizing: border-box;
    max-width: min(307.875px, calc(100vw - 16px));
    width: min(307.875px, calc(100vw - 16px)) !important;
    font-size: 13px;
}

.flatpickr-calendar .flatpickr-rContainer {
    width: 100%;
    box-sizing: border-box;
}

.flatpickr-calendar .flatpickr-innerContainer {
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
}

.flatpickr-calendar .flatpickr-days {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
}

.flatpickr-calendar .dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
    justify-content: flex-start !important;
}

.flatpickr-calendar .flatpickr-day {
    max-width: none !important;
    font-size: 12px;
}

.flatpickr-calendar .flatpickr-weekdays {
    width: 100%;
    box-sizing: border-box;
    padding: 2px 0 4px;
}

.flatpickr-calendar span.flatpickr-weekday {
    font-size: 11px;
    max-width: none;
}

.flatpickr-months {
    padding: 6px 10px 4px;
}

.flatpickr-current-month {
    font-size: 14px;
}

/* datetime: chỉ padding ô giờ — không ép chiều cao */
.flatpickr-time {
    padding: 6px 10px 10px;
}

.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
    font-size: 13px;
}

body.dark .flatpickr-calendar {
    background: #2d2d2d;
    color: #e8e8e8;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    border: 1px solid #444;
}

body.dark .flatpickr-months .flatpickr-month,
body.dark .flatpickr-current-month .flatpickr-monthDropdown-months,
body.dark .flatpickr-current-month input.cur-year {
    background: transparent;
    color: #e8e8e8;
}

body.dark .flatpickr-weekdays {
    background: #2d2d2d;
}

body.dark span.flatpickr-weekday {
    color: #aaa;
}

/* Ngày: bỏ lưới/viền ô tròn mặc định — gọn hơn trên dark */
body.dark .flatpickr-calendar .flatpickr-day {
    color: #e0e0e0;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 50%;
}

body.dark .flatpickr-calendar .flatpickr-day.prevMonthDay,
body.dark .flatpickr-calendar .flatpickr-day.nextMonthDay,
body.dark .flatpickr-calendar .flatpickr-day.flatpickr-disabled {
    color: #666 !important;
}

body.dark .flatpickr-calendar .flatpickr-day:hover:not(.selected):not(.startRange):not(.endRange):not(.today) {
    background: rgba(255, 255, 255, 0.07) !important;
    border: none !important;
    color: #fff !important;
}

body.dark .flatpickr-calendar .flatpickr-day.today:not(.selected):not(.startRange):not(.endRange) {
    color: #90caf9 !important;
    font-weight: 600;
    background: transparent !important;
    border: 2px solid #1e88e5 !important;
    box-sizing: border-box;
    box-shadow: none !important;
}

body.dark .flatpickr-calendar .flatpickr-day.today:not(.selected):not(.startRange):not(.endRange):hover {
    background: rgba(30, 136, 229, 0.12) !important;
    border-color: #42a5f5 !important;
    color: #e3f2fd !important;
}

/* Ngày trùng với ô input (selected): blob xanh đặc — gồm cả today khi today = ngày đang chọn */
body.dark .flatpickr-calendar .flatpickr-day.selected,
body.dark .flatpickr-calendar .flatpickr-day.startRange,
body.dark .flatpickr-calendar .flatpickr-day.endRange,
body.dark .flatpickr-calendar .flatpickr-day.today.selected {
    background: #1e88e5 !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-weight: 600;
}

body.dark .flatpickr-calendar .flatpickr-day:focus {
    outline: none;
}

/* Mũi tên tháng: màu sáng để nhìn thấy trên nền tối */
body.dark .flatpickr-calendar .flatpickr-prev-month,
body.dark .flatpickr-calendar .flatpickr-next-month {
    color: #eceff1 !important;
    fill: #eceff1 !important;
}

body.dark .flatpickr-calendar .flatpickr-prev-month svg,
body.dark .flatpickr-calendar .flatpickr-next-month svg,
body.dark .flatpickr-calendar .flatpickr-prev-month svg path,
body.dark .flatpickr-calendar .flatpickr-next-month svg path {
    fill: #eceff1 !important;
}

body.dark .flatpickr-calendar .flatpickr-prev-month:hover svg,
body.dark .flatpickr-calendar .flatpickr-next-month:hover svg,
body.dark .flatpickr-calendar .flatpickr-prev-month:hover svg path,
body.dark .flatpickr-calendar .flatpickr-next-month:hover svg path {
    fill: #ffffff !important;
}

body.dark .flatpickr-calendar .flatpickr-prev-month.flatpickr-disabled svg path,
body.dark .flatpickr-calendar .flatpickr-next-month.flatpickr-disabled svg path {
    fill: #555 !important;
}

body.dark .flatpickr-time input {
    background: #3a3a3a;
    color: #eee;
    border-color: #555;
}