/* ============================================================================
   filter-dates.css — CHUẨN DÙNG CHUNG cho hàng lọc "Từ / Đến" của KHỐI LỌC TRÁI
   (khối lọc nằm cùng không gian với hàng đợi/danh sách bệnh nhân).

   Mốc chuẩn = màn Khám bệnh (Bác sĩ):
     · lưới 4 cột  66px | ô ngày | 54px | ô ngày   — gap 8px
       -> HAI ô ngày LUÔN rộng bằng nhau và chiếm trọn bề ngang (full size).
     · nhãn "Đến" thụt 8px để thẳng cột với các dòng lọc khác.
     · XUỐNG DÒNG khi bề rộng khối lọc <= 360px  (container query).
       Trước đây mỗi màn tự đặt mốc riêng (336 / 340 / 360 / 380px) nên màn này
       nhảy dòng sớm, màn kia nhảy muộn — file này gom về MỘT mốc duy nhất.

   Nạp TOÀN CỤC ở _MainLayout, SAU CSS của từng màn -> đè mọi rule lệch chuẩn.
   Màn có <style> viết thẳng trong .cshtml (nằm ở body, thắng file này) thì sửa
   tại chỗ theo đúng con số trên: CĐHA, Nhận bệnh phẩm, Lập KQXN, Lịch hẹn, Đăng ký.

   KHÔNG áp cho: khối Báo cáo và các màn lọc từ/đến nằm trên MỘT HÀNG NGANG
   (Tổng hợp thu chi, Hẹn khám, Quản lý, HĐĐT, Lưu vết...).
   ========================================================================== */

/* 1) Khối lọc tự đo bề rộng của CHÍNH NÓ (cột trái kéo được bằng split mover)
      -> mốc xuống dòng tính trên cùng một loại hộp ở mọi màn. */
.kb-filter,
.kk-filter, .nk-filter, .xk-filter,
.bl-filter, .nv-filter, .th-filter, .tl-filter,
.dtcs-filter, .dt-filter { container-type: inline-size; }

/* 2) Hàng "Từ | Đến" (và hàng 2 cặp nhãn/ô cùng khuôn: Phòng | Đối tượng...) */
.kb-filter .kb-frow-dates,
.kb-filter .kb-frow-pair,
.ws-tc .kb-filter .kb-frow-dates,
.ws-tc .kb-filter .kb-frow-pair,
.kk-frow-dates,
.nk-frow-dates,
.xk-filter .xk-frow-dates,
.bl-frow-dates,
.nv-frow-dates,
.tl-frow-dates,
.dtcs-frow.dates,
.dt-frow.double {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr) 54px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
}
/* Tổng hợp bán lẻ giữ cột nhãn 78px (nhãn dài nhất "NV thu tiền" không đủ chỗ ở
   66px); phần còn lại — ô ngày bằng nhau, nhãn "Đến" 54px, mốc 360px — vẫn chuẩn. */
.th-frow-dates {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 54px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
}

/* 3) Nhãn & ô trong hàng ngày */
.kb-filter .kb-frow-dates > label,
.kb-filter .kb-frow-pair > label,
.kk-frow-dates > label,
.nk-frow-dates > label,
.xk-filter .xk-frow-dates > label,
.bl-frow-dates > label,
.nv-frow-dates > label,
.th-frow-dates > label,
.tl-frow-dates > label,
.dtcs-frow.dates > label,
.dt-frow.double > label { flex: 0 0 auto; min-width: 0; padding-left: 0; white-space: nowrap; }

.kb-filter .kb-frow-dates > label:nth-of-type(2),
.kb-filter .kb-frow-pair > label:nth-of-type(2),
.kk-frow-dates > label:nth-of-type(2),
.nk-frow-dates > label:nth-of-type(2),
.xk-filter .xk-frow-dates > label:nth-of-type(2),
.bl-frow-dates > label:nth-of-type(2),
.nv-frow-dates > label:nth-of-type(2),
.th-frow-dates > label:nth-of-type(2),
.tl-frow-dates > label:nth-of-type(2),
.dtcs-frow.dates > label:nth-of-type(2),
.dt-frow.double > label:nth-of-type(2) { padding-left: 8px; }

/* Ô ngày chiếm TRỌN cột (kể cả khi exComponent bọc flatpickr .date-picker-wrap
   hay TomSelect .ts-wrapper thay cho <select> gốc). */
.kb-filter .kb-frow-dates > input,
.kb-filter .kb-frow-dates > select,
.kb-filter .kb-frow-dates > .date-picker-wrap,
.kb-filter .kb-frow-dates > .ts-wrapper,
.kb-filter .kb-frow-pair > input,
.kb-filter .kb-frow-pair > select,
.kb-filter .kb-frow-pair > .date-picker-wrap,
.kb-filter .kb-frow-pair > .ts-wrapper,
.kk-frow-dates > input, .kk-frow-dates > .date-picker-wrap,
.nk-frow-dates > input, .nk-frow-dates > .date-picker-wrap,
.xk-filter .xk-frow-dates > input, .xk-filter .xk-frow-dates > .date-picker-wrap,
.bl-frow-dates > input, .bl-frow-dates > .date-picker-wrap,
.nv-frow-dates > input, .nv-frow-dates > .date-picker-wrap,
.th-frow-dates > input, .th-frow-dates > .date-picker-wrap,
.tl-frow-dates > input, .tl-frow-dates > .date-picker-wrap,
.dtcs-frow.dates > input, .dtcs-frow.dates > .date-picker-wrap,
.dt-frow.double > input, .dt-frow.double > .date-picker-wrap { width: 100%; min-width: 0; }

/* 4) MỐC XUỐNG DÒNG DÙNG CHUNG — khối lọc <= 360px thì "Từ" và "Đến" tách 2 dòng,
      mỗi ô vẫn chiếm trọn bề ngang. Mọi màn nhảy dòng ở cùng một bề rộng. */
@container (max-width: 360px) {
    .kb-filter .kb-frow-dates,
    .kb-filter .kb-frow-pair,
    .ws-tc .kb-filter .kb-frow-dates,
    .ws-tc .kb-filter .kb-frow-pair,
    .kk-frow-dates,
    .nk-frow-dates,
    .xk-filter .xk-frow-dates,
    .bl-frow-dates,
    .nv-frow-dates,
    .tl-frow-dates,
    .dtcs-frow.dates,
    .dt-frow.double { grid-template-columns: 66px minmax(0, 1fr); row-gap: 6px; }

    .th-frow-dates { grid-template-columns: 78px minmax(0, 1fr); row-gap: 6px; }

    .kb-filter .kb-frow-dates > label,
    .kb-filter .kb-frow-pair > label,
    .kk-frow-dates > label,
    .nk-frow-dates > label,
    .xk-filter .xk-frow-dates > label,
    .bl-frow-dates > label,
    .nv-frow-dates > label,
    .th-frow-dates > label,
    .tl-frow-dates > label,
    .dtcs-frow.dates > label,
    .dt-frow.double > label { grid-column: 1; padding-left: 0 !important; }

    .kb-filter .kb-frow-dates > input,
    .kb-filter .kb-frow-dates > select,
    .kb-filter .kb-frow-dates > .date-picker-wrap,
    .kb-filter .kb-frow-dates > .ts-wrapper,
    .kb-filter .kb-frow-pair > input,
    .kb-filter .kb-frow-pair > select,
    .kb-filter .kb-frow-pair > .date-picker-wrap,
    .kb-filter .kb-frow-pair > .ts-wrapper,
    .kk-frow-dates > input, .kk-frow-dates > .date-picker-wrap,
    .nk-frow-dates > input, .nk-frow-dates > .date-picker-wrap,
    .xk-filter .xk-frow-dates > input, .xk-filter .xk-frow-dates > .date-picker-wrap,
    .bl-frow-dates > input, .bl-frow-dates > .date-picker-wrap,
    .nv-frow-dates > input, .nv-frow-dates > .date-picker-wrap,
    .th-frow-dates > input, .th-frow-dates > .date-picker-wrap,
    .tl-frow-dates > input, .tl-frow-dates > .date-picker-wrap,
    .dtcs-frow.dates > input, .dtcs-frow.dates > .date-picker-wrap,
    .dt-frow.double > input, .dt-frow.double > .date-picker-wrap { grid-column: 2; }
}