/**
 * Illusia — Controle de Staff (v1.63.0, rebuild multidimensional)
 *
 * Estilo do card de colaborador na Conta + chip de nota.
 *
 * Em v1.69.0 o emblema do badge migrou pra `illusia-conquest-badges.css`
 * com sistema completo (3 trilhas, 11 famílias, escada estrutural T1→T5).
 * Aqui sobrou só o que NÃO é badge: o painel multidimensional do staff.
 *
 * Componentes:
 *  - Card multidimensional do colaborador na Conta (.illusia-staff-card)
 *  - Chip de nota 0–10 (.illusia-staff-grade) — usado no admin e no controle
 */

/* =========================================
   GRADE CHIP (nota 0–10, ramo vermelho→verde)
   O matiz É o dado: --ist-score-hue (0=vermelho … 120=verde).
   ========================================= */
.illusia-staff-grade {
  display: inline-block;
  padding: 0 var(--space-2xs);
  border-radius: var(--r-sm);
  font-weight: 600;
  background: hsl(var(--ist-score-hue, 0) 60% 85%);
  color: hsl(var(--ist-score-hue, 0) 50% 25%);
}

/* =========================================
   PROFILE CARD (Conta)
   ========================================= */
.illusia-staff-card {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  background: var(--bg-600);
  border: 1px solid var(--bg-400);
  border-radius: var(--r-md);
}

.illusia-staff-card__title {
  margin: 0 0 var(--space-sm);
  color: var(--fg-400);
  font-weight: 700;
}

.illusia-staff-card__trilha {
  margin-bottom: var(--space-md);
}

.illusia-staff-card__trilha-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: 0 0 var(--space-xs);
  color: var(--fg-500);
  font-weight: 600;
}

.illusia-staff-card__score {
  padding: 0 var(--space-xs);
  border-radius: var(--r-sm);
  background: var(--amber);
  color: var(--fg-inverted);
  font-size: var(--text-sm);
}

.illusia-staff-card__dims {
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
}

.illusia-staff-card__dim {
  display: grid;
  grid-template-columns: 8rem 1fr 2.5rem;
  align-items: center;
  gap: var(--space-sm);
}

.illusia-staff-card__dim-label {
  color: var(--fg-600);
  font-size: var(--text-sm);
}

.illusia-staff-card__bar {
  display: block;
  height: 8px;
  border-radius: var(--r-sm);
  background: var(--bg-400);
  overflow: hidden;
}

.illusia-staff-card__bar-fill {
  display: block;
  height: 100%;
  background: var(--amber);
}

.illusia-staff-card__dim-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--fg-500);
}

.illusia-staff-card__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  color: var(--fg-700);
  font-size: var(--text-sm);
}

/* Badge-list e chooser do "Minhas Badges" migraram pra
   illusia-conquest-badges.css (v1.69.0) — usam classes
   .illusia-badges-card* novas, não conflitam com este arquivo. */

/* Light mode */
:root[data-mode="light"] .illusia-staff-card {
  background: var(--bg-100);
  border-color: var(--bg-300);
}

:root[data-mode="light"] .illusia-staff-card__bar {
  background: var(--bg-200);
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 600px) {
  .illusia-staff-card__dim {
    grid-template-columns: 6rem 1fr 2rem;
    gap: var(--space-xs);
  }
}