/* CLINIC-SCOPE: shared */
/* ============================================================================
   screen-shell.css — KHUÔN MÀN NGHIỆP VỤ dùng chung (.ws)

   Tách khỏi lamviec.css: khuôn này trước đây nằm lẫn trong file 64K của riêng màn
   Khám bệnh, nên mỗi màn mới muốn dùng phải nạp cả đống rule riêng của màn đó
   (.kb-… và .pt-…) không liên quan, hoặc chép lại khuôn.

   CẤU TRÚC:
     .ws                      khung toàn màn (cột dọc, cao trọn khung nhìn)
       .ws-top                header xanh + .ws-title + .ws-filters + .ws-hdr-actions
       .ws-body               thân ngang
         .ws-left             panel trái (lọc + danh sách), kéo rộng được
           .ws-left-head      tiêu đề panel trái
           .ws-list-row       một dòng danh sách gọn (ngày | tên | mã | meta)
         .resizer             thanh kéo giữa hai cột (ws-split.js chèn)
         .ws-main             vùng nội dung chính
       .ft-bar                dải nút cuối màn (gốc ở cuối file này; màu/cỡ nút do button.css)

   THỨ TỰ NẠP: _MainLayout nạp file này TRƯỚC khi view nạp CSS riêng của nó
   (@section Styles), nên màn cứ override thoải mái mà không cần !important.

   LƯU Ý: win8.css có `.ws > .ws-top { display:none !important }` — ẩn header xanh
   toàn hệ thống vì tên màn đã hiện ở tab desktop. Rule .ws-top dưới đây vẫn giữ để
   màn nào cần bật lại (hoặc .ws-top không phải con trực tiếp của .ws) dùng được.
   ============================================================================ */

.ws { display: flex; height: calc(100vh - 0px); flex-direction: column; background: var(--surface-3); }

/* ---- Header xanh ---- */
.ws-top {
    display: flex; height: 50px; flex: 0 0 auto; align-items: center; justify-content: flex-start;
    padding: 0 14px; background: var(--brand); color: var(--btn-on); gap: var(--sp-3, 12px);
}
.ws-title { font-size: var(--fs-lg, 16px); font-weight: var(--fw-semibold, 600); white-space: nowrap; }

/* Nút hành động đặt TRÊN header xanh: viền nhẹ + chữ trắng.
   !important ở đây để thắng .btn-* (button.css) và .ws-btn nền xanh đậm bên dưới —
   trên nền brand thì nút nền-đậm sẽ chìm. */
.ws-top .ws-hdr-actions { display: flex; align-items: center; margin-left: auto; gap: var(--sp-2, 8px); }
.ws-top .ws-hdr-actions #lblMaKCB,
.ws-top .ws-hdr-actions #lblMaLH,
.ws-top .ws-hdr-actions .muted { color: rgb(255 255 255 / 88%) !important; font-size: var(--fs-sm, 12px); white-space: nowrap; }
.ws-top .ws-hdr-actions .ws-btn {
    display: inline-flex; height: 30px; align-items: center; padding: 0 12px; gap: 6px;
    border: 1px solid rgb(255 255 255 / 55%) !important; background: rgb(255 255 255 / 12%) !important;
    color: var(--btn-on) !important; font-weight: var(--fw-semibold, 600); white-space: nowrap;
}
.ws-top .ws-hdr-actions .ws-btn:hover { background: rgb(255 255 255 / 24%) !important; }
.ws-top .ws-hdr-actions .mode-chip { background: rgb(255 255 255 / 16%) !important; color: var(--btn-on) !important; }
.ws-top .ws-hdr-actions .rp-main-btn,
.ws-top .ws-hdr-actions .rp-arrow-btn {
    border: 1px solid rgb(255 255 255 / 55%) !important; background: rgb(255 255 255 / 12%) !important; color: var(--btn-on) !important;
}
.ws-top .ws-hdr-actions .rp-main-btn:hover,
.ws-top .ws-hdr-actions .rp-arrow-btn:hover { background: rgb(255 255 255 / 24%) !important; }

/* ---- Bộ lọc trên header ---- */
.ws-filters { display: flex; align-items: center; gap: var(--sp-2, 8px); }
.ws-filters select,
.ws-filters input { height: 30px; min-width: 120px; padding: 0 8px; border: 0; border-radius: var(--radius, 2px); }
.ws-filters .ws-flabel { color: var(--btn-on); font-size: var(--fs-md, 14px); font-weight: var(--fw-semibold, 600); white-space: nowrap; }
/* Ô chọn phòng/khoa là TomSelect: <select> gốc bị ẩn, phần hiển thị là .ts-wrapper
   -> phải nới width TRÊN .ts-wrapper, đặt trên <select> vô tác dụng. */
.ws-filters .ts-wrapper.single { width: 320px; min-width: 320px; flex: 0 0 320px; }

/* ---- Nút khuôn ---- */
.ws-btn { height: 30px; min-width: 34px; border: 0; border-radius: var(--radius, 2px); background: var(--brand-dark); color: var(--btn-on); cursor: pointer; }
.ws-btn:hover { background: var(--act-default-hover, #0e3f31); }

/* Nút in (split-button từ _ReportPrintButton): đồng bộ màu với .ws-btn thay vì
   rơi về fallback .button nền trắng. */
.ws-filters .rp-wrap { align-self: center; }
.ws-filters .rp-main-btn,
.ws-filters .rp-arrow-btn {
    display: flex; height: 30px; align-items: center; justify-content: center;
    border: 0; background: var(--brand-dark); color: var(--btn-on); cursor: pointer;
}
.ws-filters .rp-main-btn { padding: 0 12px; border-radius: var(--radius, 2px) 0 0 var(--radius, 2px); font-size: var(--fs-md, 14px); gap: 6px; white-space: nowrap; }
.ws-filters .rp-arrow-btn { min-width: 24px; border-left: 1px solid rgb(255 255 255 / 30%); border-radius: 0 var(--radius, 2px) var(--radius, 2px) 0; }
.ws-filters .rp-main-btn:hover,
.ws-filters .rp-arrow-btn:hover { background: var(--act-default-hover, #0e3f31); }

/* ---- Thân: panel trái + nội dung ---- */
.ws-body { display: flex; min-height: 0; flex: 1 1 auto; }
.ws-left { display: flex; width: 300px; flex: 0 0 300px; flex-direction: column; border-right: 1px solid var(--line); background: var(--surface); }
.ws-left-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--surface-3); font-weight: var(--fw-semibold, 600); }
/* Nội dung filter dùng lề trong 8px, tiêu đề danh sách kế tiếp canh cùng trục. */
.kb-filter + .ws-left-head { padding-right: 8px; padding-left: 8px; }
/* wrapper sát viền cửa sổ (nội dung tự lo lề trong); màn cần lề riêng tự override. */
.ws-main { flex: 1 1 auto; padding: 0; overflow: auto; }

/* ---- Dòng danh sách gọn: ngày | họ tên | mã | meta ----
   Không khai thì hàng bung thành block và chữ chồng nhau.
   Trạng thái CHỌN do partCss/selection.css lo, đừng khai lại ở đây. */
.ws-list-row {
    display: grid; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm); cursor: pointer; gap: 0 8px;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.ws-list-row:hover { background: var(--row-hover); }
.ws-list-row .ws-list-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Thanh kéo-resize giữa .ws-left và .ws-main (SplitMove chèn, ws-split.js gắn) ---- */
.ws-body > .resizer { position: relative; width: 6px; flex: 0 0 auto; background: var(--line); cursor: col-resize; transition: background .15s; }
.ws-body > .resizer:hover,
.ws-body.resizing > .resizer { background: var(--brand-dark); }
.ws-body > .resizer::before {
    position: absolute; top: 50%; left: 50%; width: 2px; height: 28px; border-radius: 2px;
    background: var(--muted-2); content: ""; opacity: .75; transform: translate(-50%, -50%);
}
.ws-body > .resizer:hover::before,
.ws-body.resizing > .resizer::before { background: var(--surface); opacity: .9; }

/* ---- Dải nút cuối màn .ft-bar (chuyển từ lamviec.css về đây 30/09/2026) ----
   Trước đó gốc .ft-bar nằm trong lamviec.css (CSS của màn Khám bệnh) và bị chép lại ở nhiều module,
   màn không nạp lamviec.css thì không có footer chuẩn. Nay là khuôn dùng chung, nạp TRƯỚC CSS màn:
   màn cần khác thì đè bằng selector có phạm vi (#man .ft-bar), không chép lại rule gốc.
   Cách dùng: <div class="ft-bar"><div class="ft-grp left">…</div><div class="ft-grp right">…</div></div>
   nút: <button class="ft-btn add|edit|delete|print|save|cancel"><i class="fa-solid fa-…"></i> Nhãn</button>
   — màu/cỡ nút do partCss/button.css lo. Nằm TRONG LUỒNG, không position:fixed (màn chạy trong iframe).
   z-index:11 (>10 của .resizer): footer là stacking context, giữ popover con (menu mẫu in .rp-menu,
   Xử trí .xt-menu) phủ trên thanh kéo split (fb-20260921-092413-139). */
.ft-bar {
    flex: 0 0 auto; min-height: var(--ft-bar-h, 34px); display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-2, 8px); padding: 0 12px; margin: 0; background: var(--ft-bar-bg); border-top: 1px solid var(--ft-bar-line);
    box-shadow: 0 -6px 12px rgba(15,23,42,.06); box-sizing: border-box; position: relative; z-index: 11;
}
.ft-grp { display: flex; align-items: center; gap: var(--sp-2, 8px); min-width: 0; flex-wrap: nowrap; }