/* Một điều kiện lọc = .loc-field (nhãn + .loc-input).
   .loc-filter (khối lọc SIDEBAR, cột trái) — CHUẨN DÙNG CHUNG = bộ lọc màn Khám bệnh (Bác sĩ):
     · nhãn CÙNG HÀNG với control, cột nhãn --loc-label-w (60px: đủ chữ "Trạng thái"; nhãn dài hơn thì cột ấy tự nới);
     · mỗi cụm nhãn+control tối thiểu --loc-field-min (190px), tối đa HAI cụm/hàng;
     · hàng cách 4px, cột cách 8px, khối đệm 4px; control cao --h-input (32px);
     · khối ≤ 300px mới đưa nhãn lên trên control.
   .loc-inline: thanh lọc NGANG — giữ lối riêng (nhãn trái khi đủ rộng, nhãn trên khi hẹp).
   Màn có nhãn dài hơn 60px: đặt --loc-label-w trên chính khối lọc (KHÔNG khai lại grid).
   Chỉ áp cho markup đã chuyển đổi; không dò/bọc DOM và không đổi instance control. */
.loc-filter.loc-filter {
    container: loc-filter / inline-size;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--loc-field-min, 190px), calc(50% - var(--sp-1)))), 1fr));
    align-items: end;
    gap: var(--sp-1) var(--sp-2);
    min-width: 0;
    padding: var(--sp-1);
    box-sizing: border-box;
}
.loc-filter .loc-group { display: contents; }
/* Thanh ngang: tận dụng bề rộng còn lại, đệm rộng hơn sidebar. */
.loc-filter.loc-inline {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--loc-field-min, 180px)), 1fr));
    gap: var(--sp-2);
    padding: var(--sp-2);
}
/* Cặp ngày Từ/Đến: cùng khuôn 2 cụm/hàng như các điều kiện khác (nhãn 60px + ô ngày). */
.loc-filter .loc-date-pair {
    display: grid;
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--loc-field-min, 190px)), 1fr));
    grid-column: 1 / -1;
    align-items: end;
    gap: inherit;
    min-width: 0;
}
/* Thanh ngang: cặp ngày co theo 10 ký tự ngày + vùng icon/đệm, độc lập ngưỡng 180px của ô khác. */
.loc-filter.loc-inline .loc-date-pair {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(10ch + var(--sp-2) + var(--h-input) + 2px)), 1fr));
    grid-column: span 2;
}
@container loc-filter (max-width: 367.98px) {
    .loc-filter.loc-inline .loc-date-pair { grid-column: 1 / -1; }
}
.loc-filter .loc-field.loc-field {
    display: grid;
    grid-template-columns: minmax(var(--loc-label-w, 60px), max-content) minmax(0, 1fr);   /* nhãn dài hơn 60px: cột tự nới, không tràn */
    align-content: start;
    align-items: center;
    column-gap: var(--sp-1);
    row-gap: 0;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-sizing: border-box;
}
.loc-filter .loc-field > label,
.loc-filter .loc-field > .loc-label {
    display: block;
    flex: none;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0;
    color: var(--muted);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    overflow-wrap: normal;
}
/* Sidebar quá hẹp (≤ 300px): nhãn lên trên control, control vẫn trọn bề ngang. */
@container loc-filter (max-width: 300px) {
    .loc-filter:not(.loc-inline) .loc-field.loc-field { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-1); }
    .loc-filter:not(.loc-inline) .loc-field > label,
    .loc-filter:not(.loc-inline) .loc-field > .loc-label { white-space: normal; overflow-wrap: anywhere; }
}
.loc-filter .loc-input.loc-input {
    display: flex;
    align-items: center;
    position: relative;
    gap: var(--sp-1);
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.loc-filter .loc-input > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.loc-filter .loc-input > select:not(.tomselected),
.loc-filter .loc-input > .date-picker-wrap,
.loc-filter .loc-input > .flatpickr-wrapper,
.loc-filter .loc-input > .ts-wrapper,
.loc-filter .loc-input > .newDropDownSingle,
.loc-filter .loc-input > .dateTimeStyle {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}
.loc-filter .loc-input input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.loc-filter .loc-input > select:not(.tomselected),
.loc-filter .loc-input .ts-control {
    height: var(--h-input) !important;
    min-height: var(--h-input) !important;
    padding: 0 var(--sp-2);
    box-sizing: border-box;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--surface);
    font-family: var(--font-ui);
    font-size: var(--fs-base);
}
.loc-filter .loc-input .date-picker-wrap > input { width: 100%; padding-right: var(--h-input); }
.loc-filter .loc-input .ts-wrapper { padding: 0; }
.loc-filter .loc-input .ts-control { display: flex; align-items: center; }
.loc-filter .loc-input .ts-wrapper.single .ts-control { flex-wrap: nowrap; padding-right: var(--h-input); }
.loc-filter .loc-input .ts-wrapper.single .item { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* TomSelect tự quản ô tìm trong control; không áp kích thước/viền của textbox ngoài. */
.loc-filter .loc-input .ts-control > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
    height: auto !important;
    min-height: 0 !important;
    width: auto;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.loc-filter .loc-input .ts-wrapper.multi .ts-control {
    height: var(--h-input) !important;
    min-height: var(--h-input) !important;
    overflow: hidden;
    padding-top: var(--sp-1);
    padding-bottom: var(--sp-1);
}
.loc-filter .loc-input input:focus,
.loc-filter .loc-input select:focus,
.loc-filter .loc-input .focus .ts-control { border-color: var(--brand); }
.loc-filter .loc-input > input:disabled { color: var(--muted); background: var(--surface-3); }
.loc-filter .loc-input.loc-search > input { padding-right: var(--h-input); }
.loc-filter .loc-input.loc-search > button {
    position: absolute !important;
    inset: 1px 1px 1px auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--h-input) - 2px) !important;
    min-width: calc(var(--h-input) - 2px) !important;
    height: calc(var(--h-input) - 2px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: calc(var(--radius-sm) - 1px) !important;
    box-shadow: none !important;
    color: var(--muted) !important;
    background: transparent !important;
    z-index: 1;
}
.loc-filter .loc-input.loc-search > button:hover { color: var(--brand) !important; background: var(--brand-soft) !important; }
.loc-filter .loc-input.loc-search > button:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.loc-filter .loc-actions {
    display: flex;
    align-items: center;
    align-self: end;
    flex-wrap: wrap;
    gap: var(--sp-1);
    min-width: 0;
}
.loc-filter .loc-actions > label { display: inline-flex; align-items: center; gap: var(--sp-1); margin: 0; }
.loc-filter .loc-actions input[type="checkbox"],
.loc-filter .loc-actions input[type="radio"] { flex: none; width: auto; height: auto; }
.loc-filter .loc-full { grid-column: 1 / -1; }
/* Thanh ngang: nhãn trái khi đủ rộng, nhãn trên khi container hẹp. */
.loc-filter.loc-inline .loc-field {
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
    column-gap: var(--sp-2);
}
@container loc-filter (max-width: 480px) {
    .loc-filter.loc-inline .loc-field { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}
/* Không làm hiện lại control/nhóm mà nghiệp vụ đã ẩn. */
.loc-filter[hidden], .loc-filter [hidden], .loc-filter.loc-da-thu { display: none !important; }