/* ============================================================
   التحفيز والإنجازات — يعتمد على tokens.css/components.css نفسها.
   الاستثناء الوحيد المقصود: ألوان الشارات نفسها (أزرق/برتقالي/بنفسجي) ليست ضمن لوحة المنصة
   الاثنتي عشرة، وتُعرَّف هنا كمتغيرات مسمّاة فقط — لا ألوان ثابتة داخل القوالب.
   ============================================================ */

:root {
  --bdg-emerald-a: var(--palette-forest-light);
  --bdg-emerald-b: var(--palette-forest-mid);
  --bdg-gold-a: var(--palette-wheat-mid);
  --bdg-gold-b: var(--palette-wheat-dark);
  --bdg-blue-a: #4b86bb;
  --bdg-blue-b: #24537f;
  --bdg-orange-a: #dd8a3a;
  --bdg-orange-b: #a9581d;
  --bdg-purple-a: #8461b3;
  --bdg-purple-b: #523581;

  --bdg-metal-bronze: #b9804f;
  --bdg-metal-silver: #b8c0c9;
  --bdg-metal-gold: #e2bd54;
}

/* ---------------------------------------------------------- الشارة (Sticker) */

.bdg {
  --bdg-size: 72px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: var(--bdg-size);
  height: var(--bdg-size);
  color: #fff;
  line-height: 0;
}

.bdg--xs { --bdg-size: 26px; }
.bdg--sm { --bdg-size: 44px; }
.bdg--md { --bdg-size: 72px; }
.bdg--lg { --bdg-size: 104px; }
.bdg--xl { --bdg-size: 132px; }

.bdg--emerald { --bdg-a: var(--bdg-emerald-a); --bdg-b: var(--bdg-emerald-b); }
.bdg--gold { --bdg-a: var(--bdg-gold-a); --bdg-b: var(--bdg-gold-b); }
.bdg--blue { --bdg-a: var(--bdg-blue-a); --bdg-b: var(--bdg-blue-b); }
.bdg--orange { --bdg-a: var(--bdg-orange-a); --bdg-b: var(--bdg-orange-b); }
.bdg--purple { --bdg-a: var(--bdg-purple-a); --bdg-b: var(--bdg-purple-b); }

/* الحافة تحمل المستوى (معدن) — وبلا مستوى تكون درجة فاتحة من لون الفئة. */
.bdg--tier-none { --bdg-ring: color-mix(in srgb, var(--bdg-a) 42%, #fff); }
.bdg--tier-bronze { --bdg-ring: var(--bdg-metal-bronze); }
.bdg--tier-silver { --bdg-ring: var(--bdg-metal-silver); }
.bdg--tier-gold { --bdg-ring: var(--bdg-metal-gold); }

.bdg__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bdg__edge { fill: var(--bdg-ring); }
/* القرص يُلوَّن بتدرّج معرَّف في defs (fill كسمة داخل الـSVG نفسه، فلا يعتمد على مسار ملف CSS). */
.bdg__rim { fill: none; stroke: color-mix(in srgb, #fff 48%, transparent); stroke-width: 1.4; }
.bdg__shine { fill: none; stroke: color-mix(in srgb, #fff 34%, transparent); stroke-width: 3; stroke-linecap: round; }

.bdg__glyph {
  position: absolute;
  inset: 27%;
  width: 46%;
  height: 46%;
}

.bdg__img {
  position: absolute;
  inset: 18%;
  width: 64%;
  height: 64%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface);
}

/* غير منجزة: رمادية هادئة + قفل صغير (والنص يوضّح الحالة، فلا اعتماد على اللون وحده). */
.bdg.is-locked .bdg__frame,
.bdg.is-locked .bdg__glyph,
.bdg.is-locked .bdg__img {
  filter: grayscale(1);
  opacity: 0.5;
}

.bdg__lock {
  position: absolute;
  inset-block-end: 2%;
  inset-inline-end: 2%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26%;
  height: 26%;
  min-width: 18px;
  min-height: 18px;
  border-radius: 50%;
  background: var(--color-text-muted);
  color: #fff;
}

/* ---------------------------------------------------------- مستوى الشارة (نص + لون) */

.pill--tier-bronze { background: color-mix(in srgb, var(--bdg-metal-bronze) 20%, #fff); color: color-mix(in srgb, var(--bdg-metal-bronze) 55%, #000); }
.pill--tier-silver { background: color-mix(in srgb, var(--bdg-metal-silver) 28%, #fff); color: color-mix(in srgb, var(--bdg-metal-silver) 30%, #000); }
.pill--tier-gold { background: color-mix(in srgb, var(--bdg-metal-gold) 26%, #fff); color: color-mix(in srgb, var(--bdg-metal-gold) 42%, #000); }

/* ---------------------------------------------------------- شبكة الشارات */

.bdg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 768px) {
  .bdg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}

@media (min-width: 1024px) {
  .bdg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.bdg-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-surface);
  color: inherit;
  text-align: center;
  text-decoration: none;
}

a.bdg-tile:active { background: var(--color-surface-secondary); }

.bdg-tile.is-locked { background: var(--color-surface-secondary); }

.bdg-tile__name {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}

.bdg-tile.is-locked .bdg-tile__name { color: var(--color-text-muted); }

.bdg-tile__desc {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.bdg-tile__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
}

.bdg-tile__progress { width: 100%; }

/* ---------------------------------------------------------- شريط التقدّم (يرافقه نص دائمًا) */

.progress {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-fill);
  overflow: hidden;
}

.progress__fill {
  display: block;
  width: calc(var(--p, 0) * 1%);
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
  transition: width var(--transition-base);
}

.progress-note {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.progress-note .num { font-weight: var(--font-weight-semibold); color: var(--color-text); }

/* ---------------------------------------------------------- رأس ألبوم الإنجازات */

.album-hero {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* آخر الإنجازات: صفّ أفقي قابل للتمرير على الهاتف. */
.bdg-strip {
  display: flex;
  gap: var(--space-4);
  margin: 0 calc(var(--gutter) * -1);
  padding: var(--space-1) var(--gutter) var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.bdg-strip::-webkit-scrollbar { display: none; }

.bdg-strip__item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 92px;
  text-align: center;
  scroll-snap-align: start;
}

.bdg-strip__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------- حالة النجاح بعد المنح (بلا حركة ثقيلة) */

.award-success {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-surface);
  background: var(--color-success-soft);
  color: var(--color-success-strong);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
}

.award-success .bdg { animation: gm-pop 200ms var(--ease-out) both; }

@keyframes gm-pop {
  from { transform: scale(0.85); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .award-success .bdg { animation: none; }
}

/* ---------------------------------------------------------- نقاط الحركة (علامة + رمز، لا لون فقط) */

.points-delta {
  flex-shrink: 0;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

.points-delta--plus { color: var(--color-success-strong); }
.points-delta--minus { color: var(--color-danger-strong); }

/* ---------------------------------------------------------- تحديات */

.challenge-card {
  display: block;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-surface);
}

.challenge-card + .challenge-card { margin-top: var(--space-3); }

.challenge-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.challenge-card__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.challenge-card.is-done { background: var(--color-success-soft); border-color: transparent; }
.challenge-card.is-done .progress { background: color-mix(in srgb, var(--color-success) 22%, #fff); }
.challenge-card.is-done .progress__fill { background: var(--color-success-strong); }

/* ---------------------------------------------------------- منتقي الأيقونات (CSS فقط) */

.icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: var(--space-2);
}

.icon-picker__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.icon-picker__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  height: 50px;
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-field-border);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.icon-picker__input:checked + .icon-picker__label {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.icon-picker__input:focus-visible + .icon-picker__label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- خيارات مختارة بشكل بطاقات (شارة/مبلغ) */

.pick-list {
  display: grid;
  gap: var(--space-2);
}

.pick-list--badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .pick-list--badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pick-list--amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pick__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.pick__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--touch-target-min);
  height: 100%;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-field-border);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.pick__label small {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.pick__input:checked + .pick__label {
  background: var(--tint-soft, var(--color-primary-soft));
  box-shadow: inset 0 0 0 2px var(--tint, var(--color-primary));
  color: var(--tint-ink, var(--color-primary-dark));
}

/* معاينة ما سيُمنح قبل الإرسال (بدل نافذة تأكيد). */
.award-preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--tint-soft);
  border: 1px solid var(--tint-line);
  border-radius: var(--radius-card);
}

.award-preview[hidden] { display: none; }
.award-preview__text { display: flex; flex-direction: column; min-width: 0; }
.award-preview__title { font-weight: var(--font-weight-bold); color: var(--tint-ink); line-height: 1.4; }
.award-preview__sub { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.pick__input:focus-visible + .pick__label {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pick__label--amount { font-size: var(--font-size-lg); font-variant-numeric: tabular-nums lining-nums; }

/* ---------------------------------------------------------- حقول الشرط: تظهر حسب النوع (بلا JS تظهر كلها) */

.js .criteria-block[hidden] { display: none; }

.criteria-block {
  padding: var(--space-4);
  border-radius: var(--radius-surface);
  background: var(--color-surface-secondary);
}

/* ---------------------------------------------------------- ورقة المكافأة السريعة */

.reward-sheet { padding-bottom: calc(var(--space-6) + var(--safe-bottom)); }

.reward-sheet__body { padding: 0 var(--gutter); }

.reward-sheet__title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.reward-panel[hidden] { display: none; }

/* ---------------------------------------------------------- ملخّص في ملف الطالب / بوابة ولي الأمر */

/* مؤشر صغير بجوار اسم الطالب في القوائم */
.gm-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------- أدوات مساعدة */

.gm-section-note { margin: 0 0 var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* ---------------------------------------------------------- تفاصيل صغيرة */

/* أزرار تبويب الورقة (نفس شكل choice-pills لكنها button لا radio). */
button.choice-pill__label {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: var(--font-weight-semibold);
}

button.choice-pill__label[aria-selected="true"] {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}

button.choice-pill__label:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}