/* KPI-01 — "KPI nhân sự". Page rules only, in the `hr-kpi-*` namespace; every component is the shared
   `ui-` layer (AGENTS §5.41). Colours and sizes come from tokens.css. One vertical scroll owner (the
   app workspace); tables are fixed-layout with percentage widths and wrapping cells, so nothing
   scrolls sideways at 1366 or at 820 (AGENTS §5.24). No `display:flex` on a `td`: the flex column
   lives in `.hr-kpi-cell` inside it. */

.hr-kpi { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.hr-kpi-tabs { margin-top: calc(var(--space-2) * -1); }
.hr-kpi-message { margin: 0; }
.hr-kpi-lead,
.hr-kpi-hint { margin: 0; color: var(--text-secondary); font-size: var(--fs-secondary); line-height: 1.5; }
.hr-kpi-lead { padding: 0 var(--space-4) var(--space-3); }
.hr-kpi-subtitle { margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.hr-kpi-static { font-size: var(--fs-body); color: var(--text-primary); padding-top: 6px; }
.hr-kpi-filters { padding: 0 var(--space-4) var(--space-3); }

.hr-kpi-table { table-layout: fixed; width: 100%; }
.hr-kpi-table th,
.hr-kpi-table td { white-space: normal; overflow-wrap: break-word; vertical-align: top; }
/* The shared rule sets thead th to nowrap at (0,1,2), and .ui-table-wrap hides horizontal overflow —
   so a header too long for its column is CUT OFF silently while "the table fits its card" still
   holds. The same specificity, loaded later, lets these headers wrap instead (KB-08/09 measure it). */
.hr-kpi-table thead th { white-space: normal; }
.hr-kpi-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hr-kpi-table tr[data-kpi-open] { cursor: pointer; }
.hr-kpi-table tr.is-selected td { background: var(--primary-soft); }

.hr-kpi-col-who { width: 34%; }
.hr-kpi-col-status { width: 18%; }
.hr-kpi-col-score { width: 22%; }
.hr-kpi-col-mult { width: 12%; }
.hr-kpi-col-act { width: 14%; }

.hr-kpi-criteria .hr-kpi-col-crit { width: 24%; }
.hr-kpi-criteria .hr-kpi-col-weight { width: 9%; }
.hr-kpi-criteria .hr-kpi-col-self { width: 15%; }
.hr-kpi-criteria .hr-kpi-col-result { width: 22%; }
.hr-kpi-criteria .hr-kpi-col-evidence { width: 18%; }
.hr-kpi-criteria .hr-kpi-col-act { width: 12%; }

.hr-kpi-policy-criteria .hr-kpi-col-pcode { width: 14%; }
.hr-kpi-policy-criteria .hr-kpi-col-pname { width: 24%; }
.hr-kpi-policy-criteria .hr-kpi-col-weight { width: 10%; }
.hr-kpi-policy-criteria .hr-kpi-col-ptype { width: 17%; }
.hr-kpi-policy-criteria .hr-kpi-col-pbands { width: 15%; }
.hr-kpi-policy-criteria .hr-kpi-col-pflags { width: 13%; }
.hr-kpi-policy-criteria .hr-kpi-col-mult { width: 7%; }
.hr-kpi-policy-grades .hr-kpi-col-pname { width: 50%; }
.hr-kpi-policy-grades .hr-kpi-col-score { width: 25%; }
.hr-kpi-table .ui-input,
.hr-kpi-table .ui-select { width: 100%; min-width: 0; }
.hr-kpi-check { display: flex; align-items: center; gap: 6px; font-size: var(--fs-secondary); }

/* .ui-card__body is a COLUMN flexbox, which would stretch every action button to the card's full width;
   the action row is a row. */
.hr-kpi-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: var(--space-2); justify-content: flex-end; }

.hr-kpi-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2);
  margin: 0; }
.hr-kpi-fact { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-subtle); min-width: 0; }
.hr-kpi-fact dt { font-size: var(--fs-meta); color: var(--text-secondary); }
.hr-kpi-fact dd { margin: 0; font-weight: var(--fw-semibold); overflow-wrap: break-word; }

.hr-kpi-final { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--success-soft); }
.hr-kpi-final__label { font-size: var(--fs-meta); font-weight: var(--fw-semibold); letter-spacing: .04em;
  color: var(--text-secondary); }
.hr-kpi-final__grade { font-size: var(--fs-section); font-weight: var(--fw-semibold); color: var(--text-primary); }
.hr-kpi-final__meta { font-size: var(--fs-secondary); color: var(--text-secondary); overflow-wrap: break-word; }
.hr-kpi-authoritative { margin-top: var(--space-3); }

.hr-kpi-events { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column;
  gap: var(--space-2); }
.hr-kpi-events li { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border); }
.hr-kpi-events__what { font-weight: var(--fw-medium); }
.hr-kpi-events__when { font-size: var(--fs-secondary); color: var(--text-secondary); overflow-wrap: break-word; }

.hr-kpi-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.hr-kpi-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 900px) {
  .hr-kpi-report-grid { grid-template-columns: minmax(0, 1fr); }
  .hr-kpi-criteria .hr-kpi-col-crit { width: 26%; }
  .hr-kpi-criteria .hr-kpi-col-self { width: 13%; }
  .hr-kpi-criteria .hr-kpi-col-act { width: 13%; }
  .hr-kpi-actions { justify-content: flex-start; }
}