/* css/grades.css — درجاتي الجامعية وإدارتها (Step 57). يبني على مكوّن .tt في timetable.css (اللوحة، الأزرار، الحقول، الجدول)
   ويضيف فقط ما يخص الدرجات. الألوان من متغيرات --tt-* والمسافات من نظام style.css. */

.gr .tt-panel + .tt-panel { margin-top: var(--space-4); }
.gr .tt-status:empty { display: none; }

/* ربط الحساب */
.gr-claim { max-width: 520px; margin-top: var(--space-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.gr-claim > * { min-width: 0; }
.gr-claim input { width: 100%; min-width: 0; box-sizing: border-box; font-size: var(--text-lg); }
.gr-claim #grPassport { letter-spacing: 0.08em; text-transform: uppercase; }
.gr-notes { margin: 0; padding-inline-start: var(--space-5); color: var(--tt-muted); font-size: var(--text-sm); display: grid; gap: var(--space-1); }

/* درجات الطالب */
.gr-who { margin-top: var(--space-4); color: var(--tt-muted); font-size: var(--text-sm); }
.gr-who b { color: var(--tt-ink); }
.gr-batch { margin-top: var(--space-4); border: 1px solid var(--tt-surface-line); border-radius: var(--radius-md); background: var(--tt-surface); overflow: hidden; }
.gr-batch-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--tt-surface-line); }
.gr-batch-head h3 { margin: 0; font-size: var(--text-base); color: var(--tt-ink); }
.gr-batch-head small { color: var(--tt-muted); }
.gr-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.gr-table th { text-align: start; padding: var(--space-2) var(--space-4); color: var(--tt-muted); font-weight: 600; }
.gr-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--tt-surface-line); color: var(--tt-card-ink); }
.gr-table td.gr-grade { width: 1%; white-space: nowrap; font-weight: 700; font-size: var(--text-base); text-align: end; font-variant-numeric: tabular-nums; }

/* الإدارة */
.gr-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gr-prev { min-width: 560px; }
.gr-prev td { padding: var(--space-2); }
.gr-list { margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.gr-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border: 1px solid var(--tt-surface-line); border-radius: var(--radius-md); background: var(--tt-surface); }
.gr-item-main { min-width: 0; display: grid; gap: 2px; }
.gr-item-main strong { color: var(--tt-ink); overflow-wrap: anywhere; }
.gr-item-main small { color: var(--tt-muted); overflow-wrap: anywhere; }
.gr-item .tt-btn { min-height: 38px; padding: var(--space-1) var(--space-3); }
.gr-badge { font-size: var(--text-xs); font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius-pill); border: 1px solid var(--tt-day-line); color: var(--tt-muted); }
.gr-badge.is-on { color: var(--tt-green-ico); border-color: var(--tt-green-line); background: var(--tt-green-bg); }

@media (max-width: 720px) {
  .gr-map { grid-template-columns: 1fr 1fr; }
  .gr-table th, .gr-table td { padding-inline: var(--space-3); }
}
.gr-mismatch { display: block; color: var(--tt-amber-ico); }
/* Step 61: الملف الشخصي */
.pf-account { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; padding: var(--space-4); border: 1px solid var(--tt-day-line); border-radius: var(--radius-lg); }
.pf-account dt { color: var(--tt-muted); font-size: var(--text-sm); }
.pf-account dd { margin: 0; color: var(--tt-ink); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pf-grades { margin-top: var(--space-4); }
.gr-profile { margin-top: var(--space-5); }
.gr-done { margin: 0; color: var(--tt-green-ico); font-weight: 600; }
.gr-edit { display: inline-block; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--tt-accent); }