/* Đợt 9 — Hiệu suất NV: tab trang, chọn kỳ Tùy chọn, bảng so sánh (mobile thành thẻ), xếp hạng, hồ sơ, Thưởng năm. */

/* ---------- Tab trang Hiệu suất / Thưởng năm ---------- */
.perf-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: -4px 0 14px; }
.perf-tab { padding: 8px 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.perf-tab:hover { color: var(--ink); }
.perf-tab.is-active { color: var(--ink); border-bottom-color: var(--accent-strong); }

/* ---------- Kỳ ---------- */
.perf-custom { align-items: center; }
.perf-custom input[type=date] { width: auto; padding: 5px 8px; }
.perf-custom .form-error { flex-basis: 100%; margin: 0; }
.perf-data-note { margin: 0; color: var(--warn); }
.perf-kpis { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ---------- Bảng so sánh ---------- */
.perf-compare .perf-table th { white-space: nowrap; }
.perf-table td.perf-who { min-width: 200px; }
.perf-who-link { color: inherit; text-decoration: none; }
.perf-who-link:hover .strong { text-decoration: underline; }
.perf-clickable { cursor: pointer; }
.perf-clickable:hover td { background: var(--bg); }
.perf-table td.is-best { background: var(--warn-bg); }

/* ---------- Xếp hạng & doanh thu đến từ đâu ---------- */
.perf-rank-info { margin: 8px 0 4px; }
a.list-row { color: inherit; text-decoration: none; }
a.list-row:hover { background: var(--bg); }
.perf-rank-row { gap: 10px; }
.perf-rank-no { flex: 0 0 24px; font-weight: 700; color: var(--muted); }
.perf-rank-row .perf-track .bar { width: 100%; }
.perf-source { flex-wrap: wrap; row-gap: 2px; }
.perf-source > .num { flex: 0 0 auto; min-width: 96px; }
.perf-source-sub { flex-basis: 100%; padding-left: 120px; }
.perf-empty-chart { padding: 24px 0; text-align: center; }

/* ---------- Cách tính / quy tắc (details) ---------- */
.perf-how { padding: 0; margin-bottom: 14px; }
.perf-how > summary { cursor: pointer; padding: 13px 16px; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.perf-how > summary::-webkit-details-marker { display: none; }
.perf-how > summary::before { content: '›'; display: inline-block; transition: transform .15s; font-size: 16px; color: var(--muted); }
.perf-how[open] > summary::before { transform: rotate(90deg); }
.perf-how[open] > summary { border-bottom: 1px solid var(--line); }
.perf-how > ul { margin: 12px 16px 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: 13px; }

/* ---------- Hồ sơ ---------- */
.perf-profile-head h1 { margin-bottom: 2px; }
.perf-assess { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.perf-assess li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.perf-assess .badge { flex: none; min-width: 110px; justify-content: center; }
.perf-care { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.perf-care-item { padding: 9px 0; border-bottom: 1px solid var(--line); }
.perf-care-item:last-child { border-bottom: 0; }
.perf-care-item p { margin: 4px 0 0; color: var(--ink-2); }

/* ---------- Thưởng năm ---------- */
.bonus-rules form { padding: 12px 16px 16px; gap: 14px; }
.bonus-rules fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bonus-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.bonus-rules input[type=number] { width: 140px; padding: 6px 8px; }
.bonus-tier { align-items: center; font-size: 13px; }
.bonus-tier input[type=number] { width: 110px; }
.bonus-table td { white-space: nowrap; }

/* ---------- Mobile: bảng thành thẻ, ẩn bớt cột ---------- */
@media (max-width: 860px) {
  .perf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perf-source-sub { padding-left: 0; }
  .perf-compare .table-wrap, .bonus-table, .perf-orders { overflow: visible; }
  .perf-table, .perf-table tbody, .perf-table tr, .perf-table td,
  .perf-orders, .perf-orders tbody, .perf-orders tr, .perf-orders td { display: block; width: 100%; }
  .perf-table thead, .perf-orders thead { display: none; }
  .perf-table tr, .perf-orders tr { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 10px; background: var(--surface); }
  .perf-table td, .perf-orders td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; min-width: 0; }
  .perf-table td::before, .perf-orders td::before { content: attr(data-label); font-size: 12px; color: var(--muted); font-weight: 600; text-align: left; flex: none; }
  .perf-table td.perf-who { min-width: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; text-align: left; justify-content: flex-start; }
  .perf-table td.perf-who::before { content: none; }
  .perf-table td.perf-desk, .perf-orders td.perf-desk { display: none; }
  .bonus-table td { white-space: normal; }
  .bonus-rules input[type=number] { width: 120px; }
}