/* ============================================================
   Ajrly OS — Employee Performance styles (WS-D)
   Theme-aware (CSS vars only), RTL-aware. Complements shared
   classes (.card,.toolbar,.grid,.table-wrap,.input,.btn).
   ============================================================ */

/* Toolbar / filters */
.pf-toolbar { flex-wrap: wrap; gap: 10px; }
.pf-toolbar .toolbar__left,
.pf-toolbar .toolbar__right { flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.pf-date .input { min-width: 0; }
.pf-stamp { font-size: 12px; }

.pf-note {
  margin: 0 0 14px; padding: 8px 12px; font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px;
}

/* Employee card */
.pf-grid { align-items: start; }
.pf-card { display: flex; flex-direction: column; gap: 14px; }
.pf-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.pf-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-id__txt { display: flex; flex-direction: column; min-width: 0; }
.pf-id__name {
  font-weight: 700; color: var(--text); font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Score gauge */
.pf-gauge { flex: 0 0 auto; }
.pf-gauge__num { font-size: 26px; font-weight: 800; }
.pf-gauge__cap { font-size: 10px; fill: var(--muted); }

/* Metrics list */
.pf-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
}
.pf-metric {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; font-size: 12.5px; padding: 4px 0;
  border-bottom: 1px dashed var(--border);
}
.pf-metric__lbl { color: var(--muted); }
.pf-metric__val { font-weight: 700; color: var(--text); }

/* Heatmap */
.pf-heat-wrap { display: flex; flex-direction: column; gap: 6px; }
.pf-heat-cap { font-size: 11.5px; }
.pf-heat { max-width: 220px; }

/* Leaderboard */
.pf-rank { font-weight: 800; color: var(--muted); width: 42px; }

.pf-loading { display: flex; align-items: center; justify-content: center; min-height: 120px; }

@media (max-width: 720px) {
  .pf-metrics { grid-template-columns: 1fr; }
}