/* ============================================================================
   win8.css — LỚP GLOBAL OVERRIDE phong cách Windows 8 "Lai vừa phải"
   ----------------------------------------------------------------------------
   MỤC ĐÍCH: ép TOÀN HỆ THỐNG về gần vuông (radius ~2px) + phẳng bóng + header
   phẳng đặc, kể cả các màn HARDCODE radius (không dùng var(--radius)).

   NẠP CUỐI trong _MainLayout.cshtml (sau bootStrapCustom.css) để thắng specificity.

   NGUYÊN TẮC:
   - Giữ nguyên màu brand teal-lá, bố cục, nghiệp vụ. CHỈ đổi bo góc/bóng/header.
   - CHỪA border-radius:50% (avatar/icon/spinner tròn) — KHÔNG dùng '* { }'.
   - Dễ revert: gỡ 1 dòng <link> này + trả token radius/shadow ở tokens.css.

   Tài liệu: docs/design.md · Spec: docs/superpowers/specs/2026-07-04-win8-lai-vua-phai-design.md
   ============================================================================ */

/* ---- Biến radius (phòng khi màn nào tham chiếu) đã về 2px ở tokens.css ---- */

/* ---- Tối ưu không gian workspace: bỏ thanh tiêu đề chung của từng màn ----
   Tên màn đã có ở tab desktop; giữ lại toàn bộ header nghiệp vụ nằm trong nội dung. */
.ws > .ws-top { display:none !important; }

/* ============================================================================
   1) ÉP BO GÓC ~2px cho MỌI khối chữ nhật phổ biến
   Liệt kê selector tường minh (KHÔNG dùng '*') để chừa avatar/icon/spinner tròn.
   ============================================================================ */
.btn, .button,
.card, .card-header, .card-footer, .card-body,
.panel, .panel-heading, .panel-body,
.modal-content, .modal-header, .modal-footer,
.dropdown-menu, .dropdown-item,
.alert, .toast, .popover, .tooltip-inner,
.badge, .pill, .chip, .tag,
.list-group, .list-group-item,
.nav-tabs, .nav-pills, .nav-link, .tab,
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select, textarea,
.form-control, .form-select, .input-group, .input-group-text,
.ts-wrapper, .ts-control, .ts-dropdown,
.flatpickr-calendar, .flatpickr-day,
.tabulator, .tabulator .tabulator-header, .tabulator .tabulator-col,
table, thead th, tbody td,
.ws-btn, .ws-collapse-btn,
.rp-main-btn, .rp-arrow-btn,
.filt, .pcard,
.divTitle, .ct-form, .ct-wrap, .ss-body, .ss-filter,
.dm-detail, .dm-list, .dm-page, .qdt-pane, .ktd-card,
.kb-ident, .kb-card, .kb-box {
    border-radius: 2px !important;
}

/* Ô đầu/cuối trong nhóm bo góc kép (input-group, split-button) — giữ mép 2px 2 đầu */
.input-group > :first-child, .rp-main-btn { border-top-left-radius: 2px !important; border-bottom-left-radius: 2px !important; }
.input-group > :last-child,  .rp-arrow-btn { border-top-right-radius: 2px !important; border-bottom-right-radius: 2px !important; }

/* ---- CHỪA TRÒN: KHÔNG ép các phần cố ý tròn ---- */
.rounded-circle, .avatar, .kb-ava, .spinner-border, .ws-body::after,
[style*="border-radius:50%"], [style*="border-radius: 50%"] {
    border-radius: 50% !important;
}

/* ============================================================================
   1b) PHỦ RỘNG — quét mọi khối chữ nhật hardcode radius ở CÁC MODULE
   (314 chỗ rải rác 30+ file). Dùng [class*=] cho từ khóa KHỐI phổ biến, kèm
   :not(...) CHỪA phần tròn cố ý (avatar/dot/badge-pill/switch/scrollbar).

   AN TOÀN: chỉ ÉP VUÔNG (2px), KHÔNG ép ngược 50% (ép 50% lên khối chữ nhật →
   elip méo). Phần vốn tròn nằm trong :not() nên rule này không đụng tới, các
   khai báo 50%/999px trong CSS module giữ nguyên hiệu lực. Không nhắm scrollbar,
   avatar, dot, switch, toggle, count/cnt (badge viên thuốc).
   ============================================================================ */
:where(
  [class*="card"], [class*="box"], [class*="panel"], [class*="wrap"],
  [class*="tile"], [class*="head"], [class*="filter"], [class*="detail"],
  [class*="-list"], [class*="pane"], [class*="-form"], [class*="-cell"],
  [class*="-item"], [class*="-btn"], [class*="-tab"], [class*="chip"],
  [class*="thumb"], [class*="field"], [class*="input"], [class*="select"],
  [class*="modal"], [class*="menu"], [class*="alert"], [class*="note"],
  [class*="section"],
  /* Tiền tố phân hệ (class tên riêng, không chứa từ khóa chung) */
  [class^="kb-"], [class^="kedv-"], [class^="pt-"], [class^="td-"],
  [class^="tn-"], [class^="tt-"], [class^="duoc-"], [class^="nt-"],
  [class^="pq-"], [class^="pqm-"], [class^="tkai-"], [class^="lh-"],
  [class^="dm-"], [class^="ct-"], [class^="ss-"], [class^="qdt-"],
  [class^="ktd-"], [class^="xn-"], [class^="cls-"], [class^="db-"],
  [class^="rp-"], [class^="vp-"]
):not(
  .rounded-circle, .rounded-pill, .avatar, [class*="ava"], [class*="dot"],
  [class*="switch"], [class*="toggle"], [class*="cdel"], [class*="scrollbar"],
  [class*="cnt"], [class*="count"], [class*="spinner"], [class*="online"],
  [class*="circle"], [class*="badge-pill"]
) {
    border-radius: 2px !important;
}

/* ============================================================================
   2) LÀM PHẲNG — giảm/bỏ bóng đổ mềm (giữ bóng modal cho tách lớp)
   ============================================================================ */
.card, .panel, .pcard, .kb-ident, .kb-card,
.divTitle, .ct-form, .ct-wrap, .ss-body, .ss-filter,
.dm-detail, .dm-list, .qdt-pane, .ktd-card,
.dropdown-menu, .btn, .button, .ws-btn {
    box-shadow: none !important;
}
/* Modal vẫn cần bóng nhẹ để nổi trên overlay (không phẳng hẳn) */
.modal-content { box-shadow: 0 12px 40px rgba(0,0,0,.24) !important; }

/* ============================================================================
   3) HEADER PHẲNG ĐẶC — bỏ gradient teal→dark, dùng 1 màu brand đặc
   (.ws-top trong lamviec.css đã đặc sẵn; rule này bao các header còn gradient)
   ============================================================================ */
.ws-top, .bar, .app-bar, .page-header, .head-bar, .divTitle {
    background-image: none !important;
}

/* ============================================================================
   4) TINH CHỈNH nhỏ theo chất Metro (đường viền sắc, đầu bảng cứng cáp)
   ============================================================================ */
/* Card viền mảnh sắc thay vì mờ */
.card, .panel, .pcard {
    border: 1px solid var(--line, #e5e7eb) !important;
}
/* Đầu bảng: gạch chân brand mảnh cho cảm giác Metro (không đổi màu nền có sẵn) */
.tabulator .tabulator-header { border-bottom: 2px solid var(--brand, #1d6f5c) !important; }

/* ============================================================================
   5) CONTROL RHYTHM - dong bo chieu cao label/input/button/row tren cac man HIS
   Chi chuan hoa height/line-height, khong can thiep width de giu bo cuc hien tai.
   ============================================================================ */
:root {
    --cs-label-h: 18px;
    --cs-control-h: var(--h-input, 32px);
    --cs-control-line: calc(var(--cs-control-h) - 2px);
    --cs-table-row-h: 34px;
    --cs-list-row-h: 40px;
}

textarea {
    resize: none !important;
}

:where(
  .ws, .rxk, .dc-ws, .nk-ws, .xk-ws, .tk-ws, .bl-ws, .nv-ws,
  .pqm-root, #nbpRoot, #lkqRoot, #cdhaRoot, #divFormDK,
  [class^="kb-"], [class^="kedv-"], [class^="pt-"], [class^="td-"],
  [class^="tn-"], [class^="tt-"], [class^="duoc-"], [class^="nt-"],
  [class^="pq-"], [class^="pqm-"], [class^="tkai-"], [class^="lh-"],
  [class^="dm-"], [class^="ct-"], [class^="ss-"], [class^="qdt-"],
  [class^="ktd-"], [class^="xn-"], [class^="cls-"], [class^="db-"],
  [class^="rp-"], [class^="vp-"]
) :where(
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
  select,
  .form-control,
  .form-select,
  .ts-wrapper,
  .ts-control
) {
    height: var(--cs-control-h) !important;
    min-height: var(--cs-control-h) !important;
    line-height: var(--cs-control-line) !important;
    box-sizing: border-box !important;
}

:where(
  .ws, .rxk, .dc-ws, .nk-ws, .xk-ws, .tk-ws, .bl-ws, .nv-ws,
  .pqm-root, #nbpRoot, #lkqRoot, #cdhaRoot, #divFormDK
) :where(textarea) {
    min-height: calc(var(--cs-control-h) * 2 + 6px) !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
}

:where(.ts-control) > input {
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
}

:where(
  .ws, .rxk, .dc-ws, .nk-ws, .xk-ws, .tk-ws, .bl-ws, .nv-ws,
  .pqm-root, #nbpRoot, #lkqRoot, #cdhaRoot, #divFormDK,
  [class^="kb-"], [class^="pt-"], [class^="td-"], [class^="tn-"],
  [class^="tt-"], [class^="duoc-"], [class^="nt-"], [class^="pq-"],
  [class^="pqm-"], [class^="lh-"], [class^="dm-"], [class^="ct-"],
  [class^="ss-"], [class^="qdt-"], [class^="ktd-"], [class^="xn-"],
  [class^="cls-"], [class^="db-"], [class^="rp-"], [class^="vp-"]
) :where(
  button,
  input[type=button],
  input[type=submit],
  input[type=reset],
  .btn,
  .button,
  .ws-btn,
  .rp-main-btn,
  .rp-arrow-btn,
  [class*="-btn"]
):not(
  .card-toggle-btn,
  .x,
  [class$="-x"],
  [class*="close"],
  [class*="toggle"],
  [class*="switch"],
  [style*="display:none"],
  [style*="display: none"]
) {
    height: var(--cs-control-h) !important;
    min-height: var(--cs-control-h) !important;
    line-height: var(--cs-control-line) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

:where(
  .ws, .rxk, .dc-ws, .nk-ws, .xk-ws, .tk-ws, .bl-ws, .nv-ws,
  .pqm-root, #nbpRoot, #lkqRoot, #cdhaRoot, #divFormDK
) :where(
  label,
  .ws-flabel,
  .form-label,
  [class*="-label"],
  [class*="-lbl"]
) {
    min-height: var(--cs-label-h) !important;
    line-height: var(--cs-label-h) !important;
    display: flex !important;
    align-items: center !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    box-sizing: border-box !important;
}

:where(
  .ws, .rxk, .dc-ws, .nk-ws, .xk-ws, .tk-ws, .bl-ws, .nv-ws,
  .pqm-root, #nbpRoot, #lkqRoot, #cdhaRoot, #divFormDK
) :where(
  table th,
  table td,
  .tabulator-row,
  .tabulator-cell
) {
    min-height: var(--cs-table-row-h) !important;
    height: var(--cs-table-row-h) !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

:where(
  .ws, .rxk, .dc-ws, .nk-ws, .xk-ws, .tk-ws, .bl-ws, .nv-ws,
  .pqm-root, #nbpRoot, #lkqRoot, #cdhaRoot, #divFormDK
) :where(
  .cho-item,
  .rxk-wrow,
  .dc-row,
  .nk-row,
  .xk-row,
  .tk-row,
  .bl-row,
  .nv-row,
  .pqm-role
) {
    min-height: var(--cs-list-row-h) !important;
    box-sizing: border-box !important;
}