/* ============================================================================
   graduates.css — تبويب شهادات الخريجين: النموذج، المعاينة، المعايرة، التصدير.
   يعتمد متغيرات السمة الموجودة في base.css (ليلي/نهاري) — لا ألوان مثبتة للواجهة.
   أنماط الشهادة نفسها (mm/pt) تُحقن من graduates-certificate.js لتبقى مطابقة
   تمامًا بين المعاينة والطباعة وملفات ZIP — مصدر واحد لا يتكرر هنا.
   ============================================================================ */

/* ----------------------------- رسائل الحالة ----------------------------- */
.grad-msg { min-height: 20px; margin: 6px 0; font-size: 13px; color: var(--muted); }
.grad-msg-ok   { color: #14a06a; font-weight: 600; }
.grad-msg-err  { color: #d9453d; font-weight: 600; }
.grad-msg-warn { color: #c98a12; font-weight: 600; }

/* ----------------------------- نتائج البحث ----------------------------- */
.grad-results th, .grad-results td { vertical-align: middle; }
.grad-results .grad-nid { font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.grad-results .grad-pick { padding: 4px 12px; font-size: 12px; }
.grad-sel { width: 18px; height: 18px; cursor: pointer; }

/* ----------------------------- بطاقة الطالب ----------------------------- */
.grad-student { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.grad-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.grad-elig { margin: 10px 0; padding: 9px 12px; border-radius: 10px; font-weight: 600; font-size: 13.5px; }
.grad-elig.ok { background: rgba(20, 160, 106, .12); color: #14a06a; border: 1px solid rgba(20, 160, 106, .35); }
.grad-elig.no { background: rgba(217, 69, 61, .12);  color: #d9453d; border: 1px solid rgba(217, 69, 61, .35); }

/* ----------------------------- شريط الأدوات ----------------------------- */
.grad-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.grad-toolbar label { margin: 0; font-size: 12.5px; white-space: nowrap; }
.grad-toolbar select, .grad-toolbar input[type="text"], .grad-toolbar #gradReason { max-width: 260px; }
.grad-toolbar #gradReason { flex: 1 1 200px; min-width: 160px; }
.grad-outputs { border-top: 1px dashed var(--line); padding-top: 10px; }

/* ----------------------------- النموذج (Accordion) ----------------------------- */
.grad-form { margin-top: 8px; }
.grad-sec { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 9px; overflow: hidden; }
.grad-sec > summary {
  cursor: pointer; padding: 10px 13px; font-weight: 700; font-size: 13.5px;
  background: var(--card2, rgba(127, 127, 127, .07)); list-style: none;
}
.grad-sec > summary::-webkit-details-marker { display: none; }
.grad-sec > summary::before { content: '▸ '; display: inline-block; transition: transform .15s; }
.grad-sec[open] > summary::before { content: '▾ '; }
.grad-sec:focus-within { border-color: var(--accent, #2f81f7); }

.grad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 12px 13px; }
.grad-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.grad-field label { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.grad-field input { width: 100%; }
.grad-field input[readonly] { opacity: .72; cursor: not-allowed; }
.grad-req { color: #d9453d; font-weight: 800; }

.grad-badge { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.grad-manual {
  font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: rgba(201, 138, 18, .16); color: #c98a12; border: 1px solid rgba(201, 138, 18, .4);
}
.grad-restore {
  font-size: 10.5px; padding: 1px 8px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--muted);
}
.grad-restore:hover { color: var(--fg); border-color: var(--accent, #2f81f7); }

.grad-fmsg { font-size: 11.5px; min-height: 15px; color: var(--muted); }
.grad-fmsg.ok   { color: #14a06a; }
.grad-fmsg.err  { color: #d9453d; }
.grad-fmsg.warn { color: #c98a12; }

/* ----------------------------- التحقق ----------------------------- */
.grad-vbox { margin: 9px 0; padding: 9px 13px; border-radius: 10px; font-size: 12.5px; border: 1px solid var(--line); }
.grad-vbox ul { margin: 6px 0 0; padding-inline-start: 18px; }
.grad-vbox li { margin: 2px 0; }
.grad-vbox.err  { background: rgba(217, 69, 61, .1);  border-color: rgba(217, 69, 61, .35); }
.grad-vbox.warn { background: rgba(201, 138, 18, .1); border-color: rgba(201, 138, 18, .35); }
.grad-vbox.ok   { background: rgba(20, 160, 106, .1); border-color: rgba(20, 160, 106, .3); }

/* ----------------------------- خيارات المعاينة ----------------------------- */
.grad-viewopts { border: 1px solid var(--line); border-radius: 12px; padding: 8px 13px 11px; margin: 10px 0; }
.grad-viewopts legend { font-size: 12px; font-weight: 700; padding: 0 6px; }
.grad-viewopts label { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 14px; font-size: 12.5px; }

/* ----------------------------- مسرح المعاينة (A4) ----------------------------- */
.grad-preview { margin-top: 10px; }
.grad-preview-stage {
  overflow: auto; max-height: 78vh; padding: 12px; border-radius: 12px;
  background: #6b7280; border: 1px solid var(--line);
}
.grad-preview-stage .grad-page { margin: 0 auto; box-shadow: 0 4px 22px rgba(0, 0, 0, .35); }

/* ----------------------------- المعايرة ----------------------------- */
.grad-calib { margin-top: 14px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; }
.grad-calib h4 { margin: 0 0 9px; font-size: 13.5px; }
.grad-calib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 9px; }
.grad-calib-grid label { font-size: 11.5px; font-weight: 600; display: block; margin-bottom: 3px; }
.grad-calib-grid input { width: 100%; }

.grad-calib fieldset { border: 1px solid var(--line); border-radius: 11px; padding: 9px 12px 12px; margin: 0 0 11px; }
.grad-calib legend { font-size: 12px; font-weight: 700; padding: 0 6px; }

/* مناطق المعايرة المستقلة (تُبنى من GRAD_ZONE_SPEC) */
.grad-zones { display: flex; flex-direction: column; gap: 7px; }
.grad-zone { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.grad-zone > summary {
  cursor: pointer; padding: 8px 12px; font-weight: 700; font-size: 12.5px;
  background: var(--card2, rgba(127, 127, 127, .07)); list-style: none;
}
.grad-zone > summary::-webkit-details-marker { display: none; }
.grad-zone > summary::before { content: '▸ '; }
.grad-zone[open] > summary::before { content: '▾ '; }
.grad-zgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 9px; padding: 10px 12px; }
.grad-zfield { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.grad-zfield label { font-size: 11px; font-weight: 600; line-height: 1.35; }
.grad-zfield input, .grad-zfield select { width: 100%; }

/* ----------------------------- التصدير الجماعي ----------------------------- */
.grad-bulk { margin-top: 14px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; }
.grad-bulk h4 { margin: 0 0 6px; font-size: 13.5px; }
.grad-prog { height: 9px; border-radius: 999px; background: rgba(127, 127, 127, .22); overflow: hidden; }
.grad-prog-bar { height: 100%; background: linear-gradient(90deg, #14a06a, #2f81f7); transition: width .2s; }
.grad-prog-t { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* ----------------------------- Accessibility ----------------------------- */
.grad-field input:focus-visible,
.grad-toolbar button:focus-visible,
.grad-sec > summary:focus-visible {
  outline: 2px solid var(--accent, #2f81f7); outline-offset: 2px;
}

/* ----------------------------- الموبايل ----------------------------- */
@media (max-width: 720px) {
  .grad-grid { grid-template-columns: 1fr; }
  .grad-calib-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .grad-toolbar { gap: 6px; }
  .grad-toolbar #gradReason { flex: 1 1 100%; max-width: none; }
  .grad-outputs button { flex: 1 1 46%; }
  /* المعاينة قابلة للتكبير بالسحب أفقيًا — بلا min-width على body */
  .grad-preview-stage { max-height: 62vh; padding: 6px; }
  .grad-results th:nth-child(4), .grad-results td:nth-child(4) { display: none; }  /* الشعبة */
}

/* الطباعة: لا يظهر شيء من واجهة التطبيق — مستند الطباعة نافذة مستقلة */
@media print {
  #gradCard { display: none !important; }
}