/* =====================================================
   gpa.css — خاص بصفحة حساب المعدل (gpa.html) فقط
   بيتحمّل بعد style.css
   بيعتمد على ملف style.css المشترك: .container-narrow و .btn-icon
   ===================================================== */


/* ========== التلميح (لو ما في مواد) ========== */
.gpa-hint {
  margin-bottom: 16px;                  /* مسافة تحت التلميح */
  padding: 12px 16px;                   /* مسافة داخلية */
  border-radius: 8px;                   /* زوايا دائرية */
  background: var(--bg-light);          /* أزرق فاتح */
  color: var(--navy);                   /* كحلي */
  font-size: 0.95rem;                   /* حجم الخط */
}

.gpa-hint a {
  color: var(--link);              /* الرابط أزرق */
  font-weight: 700;                     /* عريض */
  text-decoration: underline;           /* خط تحته عشان يبين إنه رابط */
}


/* ========== كرت الجدول ========== */
.gpa-card {
  padding: 20px;                        /* مسافة داخلية */
  background: var(--surface);             /* خلفية بيضا */
  border: 1px solid #D7E2EB;            /* إطار خفيف */
  border-radius: 12px;                  /* زوايا دائرية */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* ظل خفيف */
}

.gpa-table {
  width: 100%;                          /* الجدول بعرض الكرت */
  border-collapse: collapse;            /* بنلغي الفراغ بين حدود الخلايا */
}

.gpa-table th {
  padding: 10px 12px;                   /* مسافة داخلية */
  background: var(--bg-light);          /* خلفية زرقا فاتحة للعناوين */
  color: var(--navy);                   /* كحلي */
  font-family: var(--font-heading);     /* خط Cairo */
  font-size: 0.95rem;                   /* حجم الخط */
  text-align: start;                    /* بداية السطر (يمين بالـ RTL) */
}

.gpa-table th:nth-child(2),
.gpa-table th:nth-child(3) {
  width: 130px;                         /* عمودي العلامة والساعات بعرض ثابت، والمادة ياخد الباقي */
}

.gpa-table td {
  padding: 8px 6px;                     /* مسافة داخل الخلية */
}

.gpa-table td:last-child {
  width: 48px;                          /* عمود زر الحذف ضيق */
}

.gpa-table input {
  width: 100%;                          /* الحقل بعرض الخلية */
  padding: 9px 12px;                    /* مسافة داخلية */
  border: 1px solid #C5D3DF;            /* إطار رمادي */
  border-radius: 8px;                   /* زوايا دائرية */
  background: var(--surface);             /* خلفية بيضا */
  font-family: var(--font-body);        /* خط الموقع */
  font-size: 1rem;                      /* 16px (يمنع الزوم على آيفون) */
}

.gpa-table input[type="number"] {
  text-align: center;                   /* الأرقام بنص الحقل */
}

.gpa-table input:focus {
  outline: none;                        /* بنشيل الإطار الافتراضي */
  border-color: var(--primary);       /* إطار أزرق */
  box-shadow: 0 0 0 3px rgba(29, 114, 170, 0.25); /* هالة زرقا خفيفة */
}


/* ========== الأزرار ========== */
.gpa-actions {
  display: flex;                        /* الأزرار بسطر */
  flex-wrap: wrap;                      /* تنزل لسطر جديد لو ما اتسعت */
  gap: 10px;                            /* مسافة بينهم */
  margin-top: 16px;                     /* مسافة فوق */
}

.btn-light {
  background: var(--surface);             /* زر أبيض */
  border-color: #C5D3DF;                /* إطار رمادي */
  color: var(--primary);                /* نص بلون الأساسي */
}

.btn-light:hover {
  background: var(--primary-soft);      /* تظليل خفيف عند المرور */
  border-color: var(--primary);         /* إطار بلون الأساسي */
}


/* ========== رسالة الخطأ ========== */
.gpa-message {
  margin-top: 14px;                     /* مسافة فوق */
  padding: 10px 14px;                   /* مسافة داخلية */
  border-radius: 8px;                   /* زوايا دائرية */
  background: #FDECEA;                  /* أحمر فاتح */
  color: #C62828;                       /* أحمر غامق */
  font-size: 0.95rem;                   /* حجم الخط */
}


/* ========== النتيجة ========== */
.gpa-result {
  margin-top: 20px;                     /* مسافة فوق */
  padding: 22px 16px;                   /* مسافة داخلية */
  border: 1px solid #C8E6C9;            /* إطار أخضر فاتح */
  border-radius: 12px;                  /* زوايا دائرية */
  background: #E8F5E9;                  /* خلفية خضرا فاتحة */
  text-align: center;                   /* كل شي بالنص */
}

.gpa-result i {
  font-size: 2rem;                      /* حجم الكأس */
  color: var(--success);                /* أخضر */
}

.gpa-result-label {
  font-weight: 700;                     /* عريض */
  color: #2E7D32;                       /* أخضر غامق */
}

.gpa-result-value {
  font-family: var(--font-heading);     /* خط Cairo */
  font-size: 3rem;                      /* رقم كبير */
  font-weight: 700;                     /* عريض */
  line-height: 1.2;                     /* مسافة أضيق */
  color: #2E7D32;                       /* أخضر غامق */
}

.gpa-result-note {
  font-size: 0.9rem;                    /* خط أصغر */
  color: var(--text-muted);             /* رمادي */
}


/* ========== سلم العلامات ========== */
.scale-box {
  margin-top: 20px;                     /* مسافة فوق */
  border: 1px solid #D7E2EB;            /* إطار خفيف */
  border-radius: 10px;                  /* زوايا دائرية */
  background: var(--surface);             /* خلفية بيضا */
}

.scale-box summary {
  padding: 12px 16px;                   /* مسافة داخلية */
  font-weight: 700;                     /* عريض */
  color: var(--navy);                   /* كحلي */
  cursor: pointer;                      /* شكل اليد */
}

.scale-box ul {
  padding: 0 16px 12px;                 /* مسافة داخلية (بدون فوق لأن summary فوقها) */
}

.scale-box li {
  display: flex;                        /* الوصف والقيمة بسطر */
  justify-content: space-between;       /* واحد بطرف والثاني بالطرف الآخر */
  padding: 6px 0;                       /* مسافة فوق وتحت */
  border-bottom: 1px dashed #D7E2EB;    /* خط متقطع */
  font-size: 0.92rem;                   /* حجم الخط */
}

.scale-box li:last-child {
  border-bottom: none;                  /* آخر سطر بدون خط */
}

.scale-box li strong {
  color: var(--link);              /* النقاط بالأزرق */
}


/* =====================================================
   التجاوب (لازم بعد القواعد الأساسية فوق)
   ===================================================== */

/* ===== جوال: كل صف يصير كرت ===== */
@media (max-width: 600px) {
  .gpa-table thead {
    display: none;                      /* بنخفي صف العناوين (العنوان رح يظهر جنب كل حقل) */
  }

  .gpa-table,
  .gpa-table tbody,
  .gpa-table tr {
    display: block;                     /* بنلغي سلوك الجدول: كل عنصر كتلة */
    width: 100%;                        /* بعرض الكرت */
  }

  .gpa-table tr {
    margin-bottom: 12px;                /* مسافة بين الصفوف */
    padding: 10px 12px;                 /* مسافة داخلية */
    border: 1px solid #D7E2EB;          /* إطار */
    border-radius: 10px;                /* زوايا دائرية */
  }

  .gpa-table td {
    display: flex;                      /* العنوان والحقل بسطر واحد */
    align-items: center;                /* توسيط عمودي */
    justify-content: space-between;     /* العنوان بطرف والحقل بالطرف التاني */
    gap: 12px;                          /* مسافة بينهم */
    padding: 6px 0;                     /* مسافة فوق وتحت */
  }

  .gpa-table td::before {
    content: attr(data-label);          /* بيكتب قيمة data-label قبل الحقل (المادة، العلامة...) */
    flex-shrink: 0;                     /* العنوان ما بيصغر */
    font-weight: 700;                   /* عريض */
    color: var(--navy);                 /* كحلي */
  }

  .gpa-table td input {
    width: 60%;                         /* الحقل ياخد 60% من عرض السطر */
  }

  .gpa-table td:last-child {
    width: auto;                        /* بنلغي العرض الثابت تبع الديسكتوب */
    justify-content: flex-end;          /* زر الحذف بنهاية السطر */
  }

  .gpa-actions .btn {
    flex: 1 1 100%;                     /* الأزرار بعرض الشاشة (أسهل بالضغط) */
  }
}


/* =====================================================
   إضافات: فورمين (فصلي + تراكمي) وسلم علامات قابل للتعديل
   ===================================================== */
.gpa-block + .gpa-block {
  margin-top: 48px;                     /* مسافة بين الحاسبتين */
  padding-top: 32px;
  border-top: 2px dashed #D7E2EB;       /* فاصل خفيف */
}
.gpa-block-title {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--navy);
}
.gpa-block-title i { color: var(--primary); }
.gpa-block-sub {
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* سطر السلم: حقل أدنى علامة + حقل نقاط + زر حذف */
.scale-box li {
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}
.scale-field {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 0;
}
.scale-field input {
  width: 100%; min-width: 0; max-width: 110px;
  padding: 7px 10px;
  border: 1px solid #C5D3DF;
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 1rem;
  text-align: center;
}
.scale-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29, 114, 170, 0.25);
}
.scale-box li .scale-delete { flex-shrink: 0; }
.scale-box li.scale-empty { color: var(--text-muted); justify-content: center; }
.scale-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 4px 16px 16px;
}

body.dark-mode .gpa-block + .gpa-block { border-top-color: #284459; }
body.dark-mode .gpa-block-title { color: #E3EDF5; }
body.dark-mode .gpa-block-sub { color: #bbc7d7; }
body.dark-mode .scale-field input { background: #0F1A26; color: #E3EDF5; border-color: #2C4A62; }

@media (max-width: 600px) {
  .scale-actions .btn { flex: 1 1 100%; }
  .scale-field input { max-width: none; }
}

/* ===== حاسبة معدل المادة (5 أعمدة) ===== */
.gpa-course-name { margin-bottom: 14px; }
.gpa-course-name label { display: block; margin-bottom: 6px; font-weight: 700; color: var(--navy); }
.gpa-course-name input {
  width: 100%; padding: 9px 12px;
  border: 1px solid #C5D3DF; border-radius: 8px;
  background: var(--surface); font-family: var(--font-body); font-size: 1rem;
}
.gpa-course-name input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29, 114, 170, 0.25); }
.gpa-table-course th:nth-child(2),
.gpa-table-course th:nth-child(3),
.gpa-table-course th:nth-child(4) { width: 100px; }
body.dark-mode .gpa-course-name label { color: #E3EDF5; }
body.dark-mode .gpa-course-name input { background: #0F1A26; color: #E3EDF5; border-color: #2C4A62; }

.gpa-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.gpa-quick > span { font-weight: 700; color: var(--navy); }
body.dark-mode .gpa-quick > span { color: #E3EDF5; }


/* ===== حاسبة "كم لازم أجيب بالنهائي؟" ===== */
.tgt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
.tgt-table { margin-top: 14px; font-size: 0.92rem; }
.tgt-table td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--border); }
.tgt-table tr.tgt-current td { background: var(--primary-soft); font-weight: 700; }
.tgt-st-ok { color: var(--success); font-weight: 700; }
.tgt-st-mid { color: var(--warning); font-weight: 700; }
.tgt-st-hard, .tgt-st-bad { color: var(--danger); font-weight: 700; }
.gpa-result.tgt-mid .gpa-result-value, .gpa-result.tgt-mid .gpa-result-label, .gpa-result.tgt-mid i { color: var(--warning); }
.gpa-result.tgt-hard .gpa-result-value, .gpa-result.tgt-hard .gpa-result-label, .gpa-result.tgt-hard i,
.gpa-result.tgt-bad .gpa-result-value, .gpa-result.tgt-bad .gpa-result-label, .gpa-result.tgt-bad i { color: var(--danger); }
.gpa-result .gpa-result-value { overflow-wrap: anywhere; }
body.dark-mode .tgt-table td { border-color: #284459; }
body.dark-mode .tgt-table tr.tgt-current td { background: #162C3F; }
@media (max-width: 560px) { .tgt-grid { grid-template-columns: 1fr; } }


/* شرح تعبئة حاسبة "كم لازم أجيب بالنهائي" */
.tgt-help{margin:0 0 14px;padding:12px 16px;border:1px dashed var(--primary);border-radius:12px;background:var(--primary-soft);color:var(--text)}
.tgt-help summary{cursor:pointer;font-weight:700;color:var(--heading);list-style:none}
.tgt-help summary::-webkit-details-marker{display:none}
.tgt-help summary i{margin-inline-end:6px;color:var(--primary)}
.tgt-help ol{margin:10px 0 0;padding-inline-start:22px;display:grid;gap:6px;font-size:.93rem;line-height:1.8}
.tgt-help-ex{margin:10px 0 0;padding:8px 12px;border-radius:8px;background:rgba(29,114,170,.12);font-size:.93rem}
body.dark-mode .tgt-help{background:#13212F;border-color:#2C4A62;color:#E3EDF5}
body.dark-mode .tgt-help-ex{background:#1A2C3E}