/* CLINIC-SCOPE: shared */
/*
   Responsive shell dùng chung cho màn nghiệp vụ.
   Footer luôn một hàng; nhãn nút thu gọn theo bề rộng thực tế của panel.
   Bảng số liệu được cuộn ngang thay vì mất dữ liệu.
*/

.resp-secondary { }
/* Tiêu đề cửa sổ dùng chung, kể cả dialog chứa iframe. Thắng padding/height
   riêng của module; không áp vào header bệnh nhân hoặc thanh lọc nghiệp vụ. */
.modal .modal-content > .modal-header {
    box-sizing: border-box;
    flex: 0 0 var(--h-window-header) !important;
    height: var(--h-window-header) !important;
    min-height: var(--h-window-header) !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--sp-2);
    padding: 0 var(--sp-2) !important;
}
.modal .modal-header > .modal-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    overflow: hidden;
    font-size: var(--fs-base) !important;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.modal .modal-header > .close {
    display: inline-flex;
    flex: 0 0 var(--h-window-header) !important;
    align-items: center;
    justify-content: center;
    width: var(--h-window-header) !important;
    height: calc(var(--h-window-header) - 2px) !important;
    min-height: 0 !important;
    margin: 0 calc(0px - var(--sp-2)) 0 auto !important;
    padding: 0 !important;
    font-size: var(--fs-xl);
    line-height: 1 !important;
}
/* Các popup tự dựng không dùng Bootstrap. Chỉ nhắm thanh tiêu đề trực tiếp của
   khung cửa sổ; các header nghiệp vụ bên trong (form, bệnh nhân, bộ lọc) giữ nguyên. */
:is(
    .mk-ov .mk-box > .mk-h,
    .dmg-modal > .dmg-mhead,
    .dmc-modal-box > header,
    .dmh-folder-dialog > .dmh-folder-head,
    .dmh-fpanel > .dmh-fphead,
    .chc-hop > .chc-hophead,
    #nbpBcModal .modal-h,
    #nbpOverlay .modal-h,
    #cdhaRoot .modal-h,
    .dt-dialog > header,
    .wd-chat-help > .hd
) {
    box-sizing: border-box;
    flex: 0 0 var(--h-window-header) !important;
    height: var(--h-window-header) !important;
    min-height: var(--h-window-header) !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--sp-2);
    padding: 0 var(--sp-2) !important;
    font-size: var(--fs-base);
    white-space: nowrap;
}
.dmh-fpanel > .dmh-fphead .ic {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
}
.dt-dialog > header button {
    height: calc(var(--h-window-header) - 1px);
}
/* Dialog KSK có nút thao tác cao 30px ngay trên thanh tiêu đề. Chừa thêm 4px
   để nút không chạm viền, vẫn chỉ chiếm một hàng. */
.blv-help-box > .blv-help-h {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 calc(var(--h-window-header) + var(--sp-1)) !important;
    height: calc(var(--h-window-header) + var(--sp-1)) !important;
    min-height: calc(var(--h-window-header) + var(--sp-1)) !important;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-2) !important;
    white-space: nowrap;
}
.blv-help-box > .blv-help-h .t {
    font-size: var(--fs-base);
}
/* .ft-label là chữ trong nút footer, KHÔNG phải nhãn form. Rule nhãn form
   trong win8.css ([class*="-label"]) vô tình khớp .ft-label và ép
   margin-bottom:4px + min-height/line-height của nhãn, khiến chữ bị đẩy
   lệch LÊN TRÊN khi nút .ft-btn căn giữa theo flex (gap trên/dưới không đều).
   Trả .ft-label về chữ nút bình thường để căn giữa cân đối. */
.ft-btn .ft-label {
  margin: 0 !important;
  min-height: 0 !important;
  line-height: normal !important;
}

@media (max-width: 1280px) {
  .ft-bar.resp-compact { gap:4px; padding-left:6px; padding-right:6px; }
  .ft-bar.resp-compact .ft-grp { gap:4px; }
  .ft-bar.resp-compact .ft-btn { --b-px:9px; padding-left:9px; padding-right:9px; }
  .ft-bar.resp-compact .ft-label { font-size:12px; }
}

@media (max-width: 1100px) {
    .ws-top { min-width: 0; height: auto; min-height: 42px; flex-wrap: wrap; gap: 6px; padding-top: 5px; padding-bottom: 5px; }
    .ws-top .ws-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ws-top .ws-filters { min-width: 0; flex: 1 1 360px; justify-content: flex-end; flex-wrap: wrap; }
    .ws-hdr-actions { margin-left: auto; }
}

@media (max-width: 900px) {
    .ws-body { flex-direction: column; overflow: auto; }
    .ws-body > .ws-left {
        width: 100% !important;
        min-width: 0 !important;
        max-height: 42vh;
        flex: 0 0 auto;
        border-right: 0;
        border-bottom: 1px solid var(--line, #e5e7eb);
    }
    .ws-body > .ws-main { width: 100%; min-width: 0; flex: 1 0 auto; }
    .ws-left-head { position: sticky; top: 0; z-index: 2; }
    .ft-bar { height: auto; min-height: 34px; padding-top: 4px; padding-bottom: 4px; }
    .ft-grp { gap: 5px; }
}

@media (max-width: 700px) {
    .ws-top .ws-filters { flex-basis: 100%; justify-content: flex-start; }
    .ws-top .ws-filters .ws-flabel,
    .ws-top .ws-filters label.resp-secondary,
    .resp-secondary { display: none !important; }
    .ws .card-b, .ws .card-h { min-width: 0; }
    .ws .table-responsive, .ws .table-wrap, .ws .grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 520px) {
    .ws-top { padding-left: 8px; padding-right: 8px; }
    .ws-top .ws-title { font-size: var(--fs-md, 14px); }
    .ft-btn { --b-px: 9px; padding: 0 9px; }
}

/* Áp dụng cả footer cũ và footer tạo động; các menu/popover không được gắn class này.
   Lặp class để thắng layout module, nhưng vẫn tôn trọng display:none inline của màn. */
.wd-footer-row.wd-footer-row.wd-footer-row,
.wd-footer-flow.wd-footer-flow.wd-footer-flow {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap;
}
.wd-footer-row.wd-footer-row { min-width: 0; max-width: 100%; }
.wd-footer-row[hidden], .wd-footer-flow[hidden], .wd-footer-action[hidden] { display: none !important; }
.wd-footer-flow.wd-footer-flow {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
}
.wd-footer-action.wd-footer-action {
    flex: 0 0 auto !important;
    width: auto !important;
    white-space: nowrap !important;
}
.wd-footer-compact.wd-footer-row,
.wd-footer-compact .wd-footer-flow { gap: 4px !important; }
.wd-footer-compact.wd-footer-row { padding-left: 6px; padding-right: 6px; }
.wd-footer-compact .wd-footer-icon-action {
    /* button.css ép lề/gap trong @layer (thắng !important ở đây) -> đặt thêm biến --b-* */
    --b-px: 8px;
    --b-gap: 0px;
    min-width: var(--control-h, 30px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 0 !important;
}
.wd-footer-compact .wd-footer-icon-action .wd-footer-label { display: none !important; }
/* Hộp xác nhận (data-wd-footer-giu-chu): không bao giờ thu còn icon — thiếu chỗ thì nút xuống hàng. */
.wd-footer-row.wd-footer-row.wd-footer-row.wd-footer-giu-chu { flex-wrap: wrap !important; justify-content: flex-end !important; row-gap: 6px; }
/* In + chọn mẫu là một cụm liền: không nhận gap/min-width của hai nút độc lập. */
.wd-footer-row .rp-wrap.wd-footer-flow { gap: 0 !important; }
.wd-footer-row .rp-wrap > .rp-main-btn,
.wd-footer-row .rp-wrap > .rp-arrow-btn { margin: 0 !important; }
.wd-footer-row .rp-wrap:has(> .rp-arrow-btn) > .rp-main-btn {
    border-right-width: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.wd-footer-row .rp-wrap > .rp-arrow-btn {
    width: 20px !important;
    min-width: 20px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.wd-footer-row.wd-footer-scroll { overflow-x: auto !important; justify-content: flex-start !important; }
.wd-footer-row :is(.rp-menu, .xt-menu, .tn-tt-menu, .dropdown-menu, [role="menu"]) { white-space: normal; }
.wd-action-button[hidden] { display: none !important; }

/* Một nút chính và tối đa một nút nhấn phụ trong vùng làm việc. Áp dụng cả toolbar.
   Các biến !important thắng
   vai trò màu tĩnh trong button.css, vẫn tái dùng palette/hover của hệ nút. */
@layer clinic-buttons {
    /* Nút ĐANG CHỌN (segmented "Kiểu nhập", chip lọc, nút toggle…) phải giữ nền đặc của
       partCss/selection.css. Khối này nằm trong @layer nên !important của nó thắng !important
       KHÔNG layer bên selection.css -> nút .on bị nhuộm trắng lại, mất hẳn hiệu ứng active.
       Vì thế loại trừ luôn 5 tên class trạng thái mà selection.css dùng. */
    .wd-action-button:not([aria-pressed], [aria-selected], [role="tab"], [id="globalConfirmCancel"],
                          .active, .on, .sel, .selected, .is-active, .is-selected) {
        --action-bg: var(--button-bg) !important;
        --action-hover: var(--button-hover) !important;
        --action-active: var(--button-active) !important;
        --action-text: var(--button-text) !important;
        --action-border: var(--button-border) !important;
        background: var(--action-bg) !important;
        color: var(--action-text) !important;
        border-color: var(--action-border) !important;
    }
    .wd-action-button:is(.wd-footer-primary, .wd-footer-primary-part) {
        --action-bg: var(--btn-primary) !important;
        --action-hover: var(--btn-primary-hover) !important;
        --action-active: var(--btn-primary-hover) !important;
        --action-text: var(--btn-on) !important;
        --action-border: var(--btn-primary) !important;
    }
    .wd-action-button.wd-footer-accent {
        --action-bg: color-mix(in srgb, var(--btn-primary) 10%, var(--button-bg)) !important;
        --action-hover: color-mix(in srgb, var(--btn-primary) 18%, var(--button-bg)) !important;
        --action-active: color-mix(in srgb, var(--btn-primary) 24%, var(--button-bg)) !important;
        --action-text: var(--btn-primary) !important;
        --action-border: var(--btn-primary) !important;
    }
    #btnXoaLuotKham.wd-action-button { --action-text: var(--btn-danger) !important; }
}
.wd-footer-row .tn-tt-split.wd-footer-flow { gap: 0 !important; }
.wd-footer-row .tn-tt-split > .tn-tt-caret {
    width: 20px !important;
    min-width: 20px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
}

/* Tooltip chỉ xuất hiện khi nút responsive không còn phần chữ nhìn thấy. */
.wd-btn-tip {
    position: fixed;
    z-index: 100300;
    max-width: min(240px, calc(100vw - 16px));
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius-sm, 2px);
    background: rgba(31, 41, 55, .94);
    color: var(--surface);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
    font-size: var(--fs-xs, 11px);
    font-weight: var(--fw-medium, 500);
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(2px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.wd-btn-tip.open { opacity: 1; visibility: visible; transform: translateY(0); }