/*
  Module Member (hồ sơ nhân sự) — chỉ module này dùng.
  Component dùng chung (.card, .badge, .btn, .field, .progress-track, .stat-card) lấy từ
  components.css; ở đây chỉ có thứ riêng của module: thẻ người mở/đóng, lưới chấm điểm,
  dòng lịch sử tăng lương. Không hard-code màu — chỉ dùng var(--...) từ tokens.css.
*/

/* --- Thanh % theo 3 phần đánh giá --- */
.mb-groups { margin-bottom: 16px; }
.mb-group-line { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.mb-group-name { font-size: 12.5px; font-weight: 600; width: 120px; flex-shrink: 0; }
/*
  .progress-track/.progress-fill trong components.css viết cho thẻ <div>. Ở đây là <span>
  (inline), mà phần tử inline thì height:100% không có tác dụng — thanh màu ra chiều cao 0,
  nhìn như chưa bao giờ cập nhật. Ép cả hai về display:block là hết.
*/
.mb-group-line .progress-track { display: block; flex: 1; }
.mb-group-line .progress-fill { display: block; }
.mb-group-pct { font-size: 12.5px; font-weight: 700; width: 46px; text-align: right; flex-shrink: 0; }

.mb-fill-blue { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.mb-fill-violet { background: linear-gradient(90deg, var(--violet), var(--accent-2)); }
.mb-fill-sage { background: linear-gradient(90deg, var(--sage), var(--sage-2)); }

/* --- Ô gõ mã mở khóa xem lương --- */
.mb-pin-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mb-pin-row label { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); }
.mb-pin-row input { width: 120px; letter-spacing: 3px; }

/* --- Thẻ một người: đóng lại chỉ còn 1 dòng, mở ra là toàn bộ hồ sơ --- */
.mb-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); margin-bottom: 10px; overflow: hidden;
}
.mb-card[open] { box-shadow: var(--shadow-card); }

.mb-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; cursor: pointer; list-style: none;
}
.mb-sum::-webkit-details-marker { display: none; }
.mb-sum:hover { background: var(--surface-muted); }
.mb-sum-main { min-width: 0; }
.mb-sum-main .row-title,
.mb-sum-main .row-sub { display: block; }
.mb-sum-side { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mb-money { font-variant-numeric: tabular-nums; }

/* Người đã nghỉ: vẫn đọc được, nhưng lùi hẳn về sau — nhìn lướt là biết không phải đội hình hiện tại. */
.mb-card.is-left { background: var(--surface-muted); }
.mb-card.is-left .mb-sum-main .row-title { color: var(--ink-muted); }

.mb-closed { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.mb-closed > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-muted);
  padding: 6px 0; list-style: none;
}
.mb-closed > summary::-webkit-details-marker { display: none; }
.mb-closed > summary::before { content: "▸ "; }
.mb-closed[open] > summary::before { content: "▾ "; }
.mb-closed > summary:hover { color: var(--accent); }
.mb-closed > div { padding-top: 8px; }

.mb-leave { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.mb-leave .notice { margin-bottom: 10px; }

.mb-detail { padding: 4px 14px 14px; border-top: 1px solid var(--line); }
.mb-sub-head { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); margin: 14px 0 8px; }

/* --- Lưới chấm điểm: 1 bấm là xong, không mở form --- */
.mb-scores { margin-top: 12px; }
.mb-score-group { background: var(--surface-muted); border-radius: var(--radius); padding: 11px 12px; }
.mb-score-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12.5px; font-weight: 700; margin: 0 0 8px;
}
.mb-crit { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.mb-crit-name { font-size: 12px; color: var(--ink-muted); flex: 1; min-width: 0; }
.mb-dots { display: flex; gap: 4px; flex-shrink: 0; }
.mb-crit-val { font-size: 12px; font-weight: 700; width: 14px; text-align: right; flex-shrink: 0; }

.mb-dot {
  width: 14px; height: 14px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.mb-dot:hover { border-color: var(--accent); transform: scale(1.15); }
.mb-dot.is-on { background: var(--accent); border-color: var(--accent); }

/* --- Lương & lịch sử tăng lương --- */
.mb-pay { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.mb-label-spacer { display: block; }
.mb-raises { display: flex; flex-direction: column; gap: 6px; }
.mb-raise {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-muted); border-radius: var(--radius); padding: 7px 11px;
  font-size: 12.5px;
}
.mb-raise-date { color: var(--ink-muted); width: 82px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mb-raise-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.mb-raise-note { color: var(--ink-muted); flex: 1; min-width: 0; }
.mb-raise .btn-icon { margin-left: auto; }