/* ==========================================================================
   أداء المشرفين — ما يخص الوحدة فقط (docs/supervisor-performance.md · docs/ui-system.md).
   كل شيء آخر من المكوّنات العامة: .hero .identity .sec .rows/.item .tiles .pill .progress .panel .cta .chips .filters.
   نبرة هادئة تحليلية: لا أحمر للأداء المنخفض (الألوان مساعدة بصرية فقط)، tokens فقط.
   ========================================================================== */

/* ---- النتيجة الإجمالية: رقم كبير + /100 + المستوى + التغيّر ---- */
.sp-score {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.sp-score__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  direction: ltr; /* «82 / 100» لا «100 / 82» في السياق العربي */
  color: var(--color-primary-deep);
  font-variant-numeric: tabular-nums lining-nums;
}

.sp-score__num {
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.sp-score__of {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.sp-score__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.sp-score__na {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

/* ---- التغيّر عن الفترة السابقة (نص + سهم، بلا لون صارخ) ---- */
.sp-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-meta);
  color: var(--color-text-muted);
}

.sp-delta--up { color: var(--color-success-strong); }
.sp-delta--down { color: var(--color-warning-strong); }
.sp-delta--down svg { transform: scaleY(-1); }

/* ---- المحاور: صف لكل محور بشريط أفقي ---- */
.sp-dims {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sp-dim__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 6px;
  font-size: var(--font-size-sm);
}

.sp-dim__label { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.sp-dim__value { color: var(--color-primary-deep); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.sp-dim__value--na { color: var(--color-text-faint); font-weight: var(--font-weight-normal); }

.sp-dim .progress__fill--muted { background: var(--color-sage-strong); }

/* ---- الاتجاه: خط بسيط (SVG يتمدد بعرض الحاوية) ---- */
.sp-trend {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  color: var(--color-primary);
}

.sp-trend__grid { stroke: var(--color-divider); stroke-width: 1; }
.sp-trend__line { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sp-trend__area { fill: currentColor; opacity: .08; }
.sp-trend__dot { fill: var(--color-surface); stroke: currentColor; stroke-width: 2.2; }
.sp-trend__value { fill: var(--color-text); font-size: 12px; font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; }
.sp-trend__label { fill: var(--color-text-muted); font-size: 12px; text-anchor: middle; }

.sp-trend-list {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--font-size-meta);
  color: var(--color-text-muted);
}

/* ---- صف مؤشر: قيمة + هدف + سابق + وزن ---- */
.sp-kpi__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-3);
  margin-top: 4px;
  font-size: var(--font-size-meta);
  color: var(--color-text-muted);
}

.sp-kpi__facts strong { color: var(--color-text); font-weight: var(--font-weight-semibold); }

.sp-how {
  flex: 1 0 100%;
  margin-top: var(--space-2);
  font-size: var(--font-size-meta);
  color: var(--color-text-muted);
}

.sp-how summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  list-style: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sp-how summary::-webkit-details-marker { display: none; }
.sp-how p, .sp-how ul { margin: var(--space-2) 0 0; }
.sp-how ul { padding-inline-start: var(--space-4); }

/* ---- التقدير اليدوي 1..5 (segmented-control بخمسة أعمدة) ---- */
.segmented-control--5 { grid-template-columns: repeat(5, 1fr); }
/* «—» (بلا تقدير) + 1..5 */
.segmented-control--6 { grid-template-columns: repeat(6, 1fr); }
.segmented-control--6 .segmented-control__label { min-height: 44px; font-size: var(--font-size-md); }

.sp-rating-row {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-divider);
}

.sp-rating-row:first-child { border-top: 0; padding-top: 0; }

.sp-rating-row__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.sp-rating-row__title { font-weight: var(--font-weight-semibold); }
.sp-rating-row__desc { font-size: var(--font-size-meta); color: var(--color-text-muted); }
.sp-rating-row__hint { font-size: var(--font-size-meta); color: var(--color-text-muted); white-space: nowrap; }

/* ---- معاينة النتيجة في شريط الحفظ الثابت ---- */
.sp-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.sp-preview strong {
  font-size: var(--font-size-lg);
  color: var(--color-primary-deep);
  font-variant-numeric: tabular-nums;
}

/* ---- مجموع الأوزان (شاشة الأوزان) ---- */
.sp-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-weight: var(--font-weight-semibold);
}

.sp-sum__value { font-variant-numeric: tabular-nums; }
.sp-sum.is-ok .sp-sum__value { color: var(--color-success-strong); }
.sp-sum.is-off .sp-sum__value { color: var(--color-warning-strong); }

.sp-weight-input {
  width: 84px;
  min-height: 44px;
  text-align: center;
}

.sp-weight-row__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
}

.sp-weight-row__controls label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: var(--font-size-sm);
}

.sp-weight-row__controls input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
}

/* ---- الحدود (صفوف قيمة ← نتيجة) ---- */
.sp-thresholds {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sp-thresholds__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
}

.sp-thresholds__arrow { color: var(--color-text-muted); }

/* ---- ملاحظة سياق المقارنة ---- */
.sp-context-note {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  .sp-score__num { font-size: calc(var(--font-size-hero) * 1.15); }
}