/* Phòng ban tự quản lý (issue 602, mockup anh Hiệp duyệt 30/10/2026): bộ chuyển Nhân sự | Phòng ban, thẻ phòng ban,
   hộp thoại thêm / sửa / chuyển phòng ban và bảng Quá trình công tác. Nút theo quy tắc chung: chữ nhật bo 8, cao 40. */
.hrm-seg { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; height: 40px; padding: 3px; box-sizing: border-box; border: 1px solid var(--bms-border); border-radius: 8px; background: var(--bms-surface-subtle); }
.hrm-seg > button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--bms-text-muted); font: 600 14px/1 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; white-space: nowrap; cursor: pointer; }
.hrm-seg > button[aria-pressed="true"] { background: var(--bms-surface); color: var(--bms-primary); box-shadow: 0 0 0 1px var(--bms-border); }
.hrm-seg > button b, .hrm-dept-n { min-width: 20px; padding: 0 6px; border-radius: 6px; background: var(--bms-neutral-soft); color: var(--bms-neutral); font-size: 12px; line-height: 20px; text-align: center; }
.hrm-seg > button[aria-pressed="true"] b { background: var(--bms-primary-soft); color: var(--bms-primary); }
.hrm-emp-toolbar > .btn.primary:is(#hrmAddEmployee, .hrm-dept-add) { display: inline-flex; align-items: center; gap: 8px; height: 40px; min-height: 40px; padding: 0 16px; border-radius: 8px; white-space: nowrap; }
.hrm-dept-offbtn { gap: 8px; }
.hrm-dept-offbtn.is-on { border-color: var(--bms-primary); background: var(--bms-primary-soft); color: var(--bms-primary); }
.hrm-dept-fchip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; border-radius: 8px; background: var(--bms-primary-soft); color: var(--bms-primary); font-size: 13px; font-weight: 600; white-space: nowrap; }
.hrm-dept-fchip button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; }

.hrm-dept-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 8px; }
.hrm-dept-grid > .hrm-empty { grid-column: 1 / -1; }
.hrm-dept-card { position: relative; display: grid; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--bms-border); border-radius: 12px; background: var(--bms-surface); cursor: pointer; }
.hrm-dept-card:hover, .hrm-dept-card:focus-visible { border-color: var(--bms-primary); outline: none; }
.hrm-dept-card.is-off { background: var(--bms-surface-subtle); cursor: default; }
.hrm-dept-card.is-off h4, .hrm-dept-card.is-off .hrm-dept-kv dd { color: var(--bms-text-subtle); }
.hrm-dept-corner { position: absolute; top: -8px; right: -8px; min-width: 26px; height: 26px; padding: 0 7px; box-sizing: border-box; border-radius: 13px; background: var(--bms-primary); color: var(--bms-surface); font: 700 13px/26px Roboto, system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--bms-surface); }
.hrm-dept-card.is-off .hrm-dept-corner { background: var(--bms-text-subtle); }
.hrm-dept-card header { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 10px; }
.hrm-dept-card h4 { margin: 0; overflow: hidden; color: var(--bms-text); font: 700 15px/1.3 Roboto, system-ui, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.hrm-dept-code { flex: 0 0 auto; padding: 0 6px; border-radius: 6px; background: var(--bms-neutral-soft); color: var(--bms-neutral); font: 600 11.5px/20px Roboto, system-ui, sans-serif; }
.hrm-dept-card header .hrm-emp-st { flex: 0 0 auto; padding: 1px 8px; font-size: 12px; }
.hrm-dept-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 0; }
.hrm-dept-kv div { display: grid; gap: 1px; min-width: 0; }
.hrm-dept-kv dt { color: var(--bms-text-muted); font-size: 12px; }
.hrm-dept-kv dd { margin: 0; overflow: hidden; font-size: 13.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.hrm-dept-warn { color: var(--bms-warning); }
.hrm-dept-people { display: flex; flex-wrap: wrap; gap: 4px; min-height: 28px; }
.hrm-dept-ini { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bms-info-soft); color: var(--bms-primary); font: 700 12px Roboto, system-ui, sans-serif; }
.hrm-dept-ini.no-acc { background: var(--bms-warning-soft); color: var(--bms-warning); }
.hrm-dept-ini.more { background: var(--bms-neutral-soft); color: var(--bms-neutral); }
.hrm-dept-card footer { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--bms-border-subtle); }
.hrm-dept-card footer .btn { display: inline-flex; align-items: center; gap: 6px; }
.hrm-dept-edit { border-color: transparent !important; background: transparent !important; color: var(--bms-text-muted) !important; }
.hrm-dept-edit:hover { color: var(--bms-primary) !important; }

.hrm-form-dialog.hrm-dept-dlg { width: min(640px, calc(100vw - 24px)); max-width: min(640px, calc(100vw - 24px)); }
.hrm-dept-dlg h3 { font-size: 15px; }
.hrm-dept-dlg-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--bms-surface-subtle); }
.hrm-dept-dlg-meta { color: var(--bms-text-muted); font-size: 13px; }
.hrm-dept-danger { border-color: var(--bms-danger) !important; color: var(--bms-danger) !important; }
.hrm-dept-from[hidden] { display: none !important; }
.hrm-dept-movebtn { display: inline-flex; align-items: center; gap: 6px; }

.hrm-dept-moves { margin-bottom: 14px; }
.hrm-dept-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.hrm-dept-block-head h4 { margin: 0; }
.hrm-dept-block-head .btn { display: inline-flex; align-items: center; gap: 6px; }
.hrm-dept-moves .hrm-table-wrap { border: 0; }
.hrm-dept-moves-table :where(th):is(th, td), .hrm-dept-moves-table :where(td):is(th, td) { padding: 8px 10px !important; font-size: 13px; }
.hrm-dept-moves-table tr.is-cur td { background: var(--bms-surface-selected); }
.hrm-dept-moves-table .hrm-emp-st { padding: 1px 8px; font-size: 12px; }
.hrm-dept-muted { color: var(--bms-text-muted); }

@media (max-width: 1200px) { .hrm-dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Điện thoại: bộ chuyển một hàng chia đều, tìm + nút thêm một hàng; thẻ một cột; thanh dưới giữ nguyên. */
@media (max-width: 900px), (max-width: 950px) and (max-height: 500px) {
  .hrm-dept-grid { grid-template-columns: 1fr; padding: 8px 12px 12px; }
  html.bms-phone-v2 .panel[data-panel="hrm"] .hrm-toolbar.hrm-emp-toolbar { flex-wrap: wrap !important; }
  html.bms-phone-v2 .hrm-emp-toolbar > .hrm-seg { order: 0; flex: 1 1 100%; height: 44px; }
  html.bms-phone-v2 .hrm-emp-toolbar > .hrm-seg > button { flex: 1; justify-content: center; height: 36px; }
  html.bms-phone-v2 .hrm-emp-toolbar > .bms-search { flex: 1 1 0 !important; }
  html.bms-phone-v2 .hrm-dept-toolbar > .bms-search { flex: 1 1 calc(100% - 60px) !important; }
  html.bms-phone-v2 .hrm-emp-toolbar > .hrm-dept-add { order: 2; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  html.bms-phone-v2 .hrm-emp-toolbar > .hrm-dept-add span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  html.bms-phone-v2 .hrm-emp-toolbar > .hrm-dept-offbtn { order: 3; flex: none; height: 36px; min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
  html.bms-phone-v2 .hrm-emp-toolbar > .hrm-dept-fchip { order: 4; }
  html.bms-phone-v2 .hrm-dept-card footer .btn { flex: 1 1 0; min-width: 0; width: auto !important; height: 44px; min-height: 44px; }
  html.bms-phone-v2 .hrm-dept-card footer .hrm-dept-edit { flex: 0 0 44px; padding: 0; justify-content: center; }
  html.bms-phone-v2 .hrm-dept-card footer .hrm-dept-edit span { display: none; }
  html.bms-phone-v2 .hrm-dept-moves .hrm-table-wrap { overflow-x: auto; }
  html.bms-phone-v2 .hrm-dept-dlg .hrm-form { grid-template-columns: 1fr; }
}