/* ══════════════════════════════════════════════════════════════
 *  صفحة الهدف
 * ══════════════════════════════════════════════════════════════
 *
 * ‏ثلاث كتل بترتيب ما يقرأ: الرقم والهدف، ثم ما يمنع، ثم ما على
 * الطاولة. والموانع قبل الفرص لأن من لا يستطيع التسليم لا ينفعه
 * استرجاع سلة — يجر عميلا إلى باب مغلق.
 *
 * ‏ولا لون مكتوب بيد هنا: كله من `tokens.css`، فالسمتان الفاتحة
 * والداكنة تبدلان من مكان واحد. ولون مكتوب بالسداسي هنا يبقى
 * على حاله في الاثنتين — فيقرأ في إحداهما ويختفي في الأخرى.
 */

/* ─────────────── الرأس: ما دخل، وما الهدف ─────────────── */

.goal-head {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.goal-head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
}

.goal-earned { display: flex; flex-direction: column; gap: var(--sp-1); }

.goal-earned-num {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text-strong);
  /* ‏والأرقام ثابتة العرض: الرقم يتغير مع كل طلب ولا يجوز أن يرقص */
  font-variant-numeric: tabular-nums;
}

.goal-earned-label { font-size: var(--fs-sm); color: var(--text-muted); }

.goal-target-box { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 190px; }
.goal-target-label { font-size: var(--fs-sm); color: var(--text-muted); }
.goal-target-row { display: flex; align-items: center; gap: var(--sp-2); }
.goal-target-row .form-input { width: 130px; font-variant-numeric: tabular-nums; }
.goal-target-cur { font-size: var(--fs-sm); color: var(--text-muted); }

/* ─────────────── شريط التقدم ───────────────
 *
 * ‏طبقتان: ما بلغناه فعلا، وما يتوقع خلفه أبهت منه. والمحصل فوق
 * المتوقع في ترتيب الرسم — فيقرأ الفرق بينهما بلا أن يغطي أحدهما
 * الآخر.
 */

.goal-bar {
  position: relative;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--surface-inset);
  border: 1px solid var(--border-hairline);
  overflow: hidden;
  margin-top: var(--sp-4);
}

.goal-bar-proj {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--accent);
  opacity: 0.3;
}

.goal-bar-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--accent);
  z-index: 1;
}

.goal-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.goal-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
  margin-inline-end: var(--sp-1);
}
.goal-dot.is-proj { opacity: 0.3; }

.goal-gap { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }
.goal-gap strong { color: var(--text-strong); font-variant-numeric: tabular-nums; }
.goal-gap.is-done { color: var(--success-text); }

/* ─────────────── اللوحات ─────────────── */

.goal-panel {
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.goal-panel > h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
}

.goal-panel > h3 i,
.goal-panel > h3 svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }

/* ‏ومجموع الفرص في رأس اللوحة: هو الخبر لا الزينة */
.goal-panel-sum {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: var(--fw-bold);
}

/* ‏واللوحة المانعة تعرف بحافتها لا بخلفية صارخة: الكتلة الحمراء
 * كلها تقرأ مرة ثم يتعلم القارئ تجاوزها — وفيها ما يجب أن يقرأ. */
.goal-panel.is-blocking { border-inline-start: 3px solid var(--danger); }

.goal-caveat { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }

/* ─────────────── الصفوف ─────────────── */

.goal-rows { display: flex; flex-direction: column; gap: var(--sp-2); }

.goal-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.goal-row-amount {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  min-width: 120px;
}

.goal-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.goal-row-title { font-weight: var(--fw-semibold); color: var(--text-primary); }
.goal-row-why { font-size: var(--fs-sm); color: var(--text-muted); }

.goal-row-block,
.goal-row-ok {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  margin-top: 2px;
}

.goal-row-block { color: var(--danger-text); }
.goal-row-ok { color: var(--success-text); }

.goal-row-block i, .goal-row-block svg,
.goal-row-ok i, .goal-row-ok svg { width: 14px; height: 14px; flex: none; }

.goal-row.is-urgent { border-color: var(--danger); }
.goal-row.is-blocker { border-inline-start: 3px solid var(--danger); }
.goal-row.is-high { border-inline-start: 3px solid var(--warning); }

.goal-row .btn { flex: none; }

/* ─────────────── الضيق ───────────────
 *
 * ‏والصف ينكسر رأسيا ولا يضغط: المبلغ والزر في سطر متقابلين،
 * والنص تحتهما — فلا يقص سبب المنع، وهو أهم ما في الصف.
 */
@media (max-width: 700px) {
  .goal-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .goal-row-amount { min-width: 0; order: 1; }
  .goal-row .btn { order: 2; margin-inline-start: auto; }
  .goal-row-main { order: 3; flex-basis: 100%; }

  .goal-head-main { align-items: stretch; }
  .goal-target-box { min-width: 0; }
}