/* Hành chính — tab Chấm KPI trong module lương.
   20/10/2026: 4 bảng chấm (giai đoạn 2). 21/10/2026 (Chủ CRM): dựng lại tối giản — một thanh công cụ,
   4 tab nhóm, không đoạn hướng dẫn, bảng chiếm gần trọn chiều cao; nhân sự lấy từ hồ sơ CRM.
   Nạp sau hanh-chinh-payroll.css; dùng lại .pr-table / .pr-in / .pr-g-* của bảng lương. */

/* Thanh tab con Bảng lương / Chấm KPI / Tham số (đầu module). */
#modulePayroll .pr-tabs { margin: 0 0 8px; padding: 4px; max-width: 460px; }
#modulePayroll .pr-tabs .hc-segmented-tab { padding: 6px 12px; font-size: 13px; }

/* ---- Thanh công cụ một hàng ---- */
.kpix-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0 6px; }
.kpix-bar .month-picker { height: 34px; }
.kpi-tabs { display: flex; gap: 4px; padding: 3px; background: #F1EAE0; border-radius: 10px; }
.kpi-tab { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: #5A4632; cursor: pointer; white-space: nowrap; }
.kpi-tab:hover { background: #FBF7F1; }
.kpi-tab.is-on { background: #fff; color: #1F1C18; box-shadow: 0 1px 3px rgba(33, 27, 18, 0.15); }
.kpi-tab-count { font-size: 11px; font-weight: 700; color: #8A7355; background: #EFE6D8; border-radius: 999px; padding: 1px 7px; }
.kpi-tab.is-on .kpi-tab-count { background: #F2E5D0; color: #AE7C41; }
.kpi-tab-warn { font-size: 11px; font-weight: 800; color: #fff; background: #B42318; border-radius: 999px; padding: 1px 6px; }
.kpix-bar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.kpi-search { min-width: 190px; }
.kpi-search input { height: 32px; }
.kpi-seg { display: inline-flex; border: 1px solid #D9CBB6; border-radius: 8px; overflow: hidden; }
.kpi-seg-btn { border: 0; background: #fff; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 600; color: #5A4632; cursor: pointer; }
.kpi-seg-btn + .kpi-seg-btn { border-left: 1px solid #E8DFD5; }
.kpi-seg-btn small { font-size: 11px; color: #8A7355; font-weight: 700; }
.kpi-seg-btn.is-on { background: #F2E5D0; color: #1F1C18; }
.kpi-seg-btn.kpi-seg-warn.is-on { background: #FDF2F2; color: #B42318; }
.kpi-btn-luu { padding: 6px 16px; }
.kpix-bar .pr-dirty { font-size: 16px; line-height: 1; margin: 0; }
.kpi-btn-menu { padding: 4px 10px; font-size: 18px; line-height: 1; }
.kpi-menu { right: 0; left: auto; min-width: 240px; }
.kpi-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
.kpi-menu .material-icons { font-size: 18px; color: #8A7355; }

/* Dòng trạng thái mảnh dưới thanh công cụ (phiên bản + thông báo nhân sự). */
.kpix-status { display: flex; align-items: center; gap: 14px; min-height: 16px; margin: 0 0 4px; font-size: 11.5px; color: #8A7355; }
.kpix-note { color: #1F6B33; font-weight: 600; }

/* ---- Bảng: một nhóm mỗi lúc, cao gần trọn màn ---- */
.kpi-section { margin: 0; }
.kpi-section-head { display: flex; align-items: center; gap: 10px; padding: 2px 2px 4px; }
.kpi-section-head strong { font-size: 12px; letter-spacing: .05em; color: #5A4632; text-transform: uppercase; }
.kpi-section-head .pr-branch-count { float: none; }
.kpi-section-head .kpi-add { margin-left: auto; padding: 4px 10px; font-size: 12px; }
.kpi-wrap { max-height: calc(100vh - 168px); }
body.hc-module-payroll .kpi-wrap { max-height: calc(100vh - 168px); }
html.embed-mode .kpi-wrap { max-height: calc(100vh - 150px); }

.kpi-table th, .kpi-table td { padding: 3px 6px; font-size: 12px; }
.kpi-table thead th { height: 30px; white-space: nowrap; font-size: 11px; }
.kpi-table thead tr:nth-child(2) th { top: 30px; }
.kpi-table .pr-s2 { width: 200px; min-width: 200px; }
.kpi-table th.kpi-th-nhap { cursor: help; }
.kpi-table th.kpi-th-nhap::after { content: ' ⓘ'; font-weight: 400; color: #B39B7C; font-size: 10px; }

/* Ô Nhân sự: tên đậm, dòng phụ mã · CN · chức vụ. */
.kpi-table .kpi-td-nguoi { line-height: 1.15; }
.kpi-table .kpi-td-nguoi strong { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-table .kpi-td-nguoi small { display: block; font-size: 10.5px; color: #8A7355; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-table .kpi-td-tay { background: #FFFDF6; }
.kpi-table .kpi-td-tay .kpi-in { width: 100%; text-align: left; font-size: 11.5px; padding: 1px 3px; border-bottom: 1px dashed #D9CBB6; border-radius: 0; }
.kpi-table .kpi-tay-row { display: grid; grid-template-columns: 64px 50px 1fr; gap: 3px; margin-top: 2px; }
.kpi-table .kpi-tay-row select { border: 0; border-bottom: 1px dashed #D9CBB6; background: transparent; font: inherit; font-size: 11px; }

/* Ô nhập số thô: cùng kiểu .pr-in. */
.kpi-table .kpi-in { width: 100%; border: 0; background: transparent; font: inherit; padding: 2px 3px; border-radius: 5px; text-align: right; min-width: 48px; }
.kpi-table .kpi-in:focus { outline: 2px solid #C27A34; background: #FFF8EF; }
.kpi-table .kpi-in[readonly], .kpi-table .kpi-in:disabled { color: #3B3128; cursor: default; opacity: 1; }
.kpi-table .kpi-in[readonly]:focus { outline: none; background: transparent; }
.kpi-table .kpi-td-enum select { width: 100%; border: 0; background: transparent; font: inherit; font-size: 11.5px; color: #3B3128; cursor: pointer; }
.kpi-table .kpi-td-enum select:disabled { appearance: none; -webkit-appearance: none; text-align: center; cursor: default; }
.kpi-table .kpi-td-ql select { min-width: 140px; text-align: left; }
.kpi-table .pr-center .kpi-in, .kpi-table .kpi-td-thang .kpi-in, .kpi-table .kpi-td-pct .kpi-in { text-align: center; font-weight: 700; }
.kpi-table .kpi-td-money .kpi-in { min-width: 104px; }
.kpi-table .kpi-td-thang { width: 54px; }
.kpi-table .kpi-td-thang .kpi-in { color: #8A7355; font-weight: 600; }
.kpi-table td.kpi-td-thang.pr-tax-manual .kpi-in { color: #B45309; font-weight: 800; }

/* Cột tính: nền tím nhạt; tỷ lệ hưởng nổi bật kèm nhãn trạng thái. */
.kpi-table td.kpi-td-calc, .kpi-table td.kpi-td-diem { background: #F7F4FB; color: #5B4B7A; white-space: nowrap; }
.kpi-table td.kpi-td-diem { font-weight: 700; }
.kpi-table td.kpi-td-rate { font-weight: 800; color: #15803D; background: #E8F6EF; font-size: 12.5px; white-space: nowrap; }
.kpi-table td.kpi-td-rate.kpi-rate-0 { color: #B42318; background: #FDF2F2; }
.kpi-pill { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 700; vertical-align: middle; }
.kpi-pill-tv { color: #8A7355; background: #F1EAE0; font-style: italic; }
.kpi-pill-0 { color: #fff; background: #B42318; }
.kpi-pill-vuot { color: #fff; background: #B45309; }
.kpi-pill-loi { color: #fff; background: #B42318; }
.kpi-row-thu_viec .kpi-td-calc, .kpi-row-thu_viec .kpi-td-diem { color: #A9967C; }

/* Nút bỏ dòng: hiện rõ khi rê chuột vào dòng. */
.kpi-table .kpi-td-x { width: 24px; }
.kpi-x { border: 0; background: transparent; color: #C4B5A3; cursor: pointer; font-size: 12px; padding: 0 4px; line-height: 1; }
.kpi-row:hover .kpi-x { color: #B42318; }
.kpi-x:focus-visible { outline: 2px solid #af7c39; }
#kpiBang .pr-empty { color: #8A7355; font-size: 12.5px; padding: 14px; }

/* ---- Hộp chọn người / hướng dẫn ---- */
.kpi-picker, .kpi-help { width: min(640px, calc(100vw - 32px)); max-height: 80vh; border: 1px solid #E4D8C6; border-radius: 14px; padding: 0; box-shadow: 0 20px 54px rgba(33, 27, 18, 0.18); font-family: inherit; }
.kpi-picker::backdrop, .kpi-help::backdrop { background: rgba(33, 27, 18, 0.35); }
.kpi-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid #EFE6D8; }
.kpi-picker-head strong { font-size: 14px; }
.kpi-picker-search { width: calc(100% - 32px); margin: 10px 16px 6px; padding: 8px 10px; border: 1px solid #D9CBB6; border-radius: 8px; font: inherit; }
.kpi-picker-body { max-height: 48vh; overflow: auto; padding: 4px 8px; }
.kpi-picker-row { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.kpi-picker-row:hover { background: #F7F2EA; }
.kpi-picker-row input { grid-row: span 2; }
.kpi-picker-name { font-weight: 700; font-size: 13px; }
.kpi-picker-row small { grid-column: 2; font-size: 11px; color: #7A6A58; }
.kpi-picker-foot { display: flex; align-items: center; gap: 10px; padding: 10px 16px 14px; border-top: 1px solid #EFE6D8; }
.kpi-picker-count { margin-left: auto; font-size: 12px; color: #7A6A58; }
.kpi-picker-tay { font-size: 12px; }
.kpi-help-body { padding: 10px 18px 16px; font-size: 13px; line-height: 1.55; color: #3B3128; }
.kpi-help-body ul { padding-left: 18px; margin: 6px 0; }
.kpi-help-body li { margin: 4px 0; }

@media (max-width: 720px) {
    .kpix-bar { gap: 6px; }
    .kpi-tabs { width: 100%; overflow-x: auto; }
    .kpix-bar-right { margin-left: 0; width: 100%; }
    .kpi-search { min-width: 0; flex: 1; }
    .kpi-wrap { max-height: none; }
    .kpi-table .pr-s2 { width: 150px; min-width: 150px; }
}