/* هوية "مدرستي" المشتركة لصفحات الويب — نفس ألوان وخط التطبيق.
 * بتنحمّل بعد تنسيق كل صفحة، فبتغيّر المتغيرات وشكل العناصر العامة بدون ما تلمس المنطق. */
:root {
  --primary: #1D4ED8;
  --primary-dark: #1E40AF;
  --primary-deep: #1E3A8A;
  --primary-tint: #EFF6FF;
  --primary-soft: #DBEAFE;
  --ink: #14213D;
  --success: #16A34A;
  --success-dark: #15803D;
  --success-tint: #DCFCE7;
  --warning: #B45309;
  --warning-tint: #FEF3E0;
  --danger: #DC2626;
  --danger-dark: #B91C1C;
  --danger-tint: #FEE2E2;
  --bg: #F4F6F9;
  --card: #FFFFFF;
  --surface: #FFFFFF;
  --border: #E3E7EE;
  --text: #14213D;
  --text-muted: #5B6475;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(20,33,61,.06);
  --shadow-hover: 0 6px 20px rgba(20,33,61,.10);
}
body { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; background: var(--bg); color: var(--text); }

/* أيقونات مرسومة (icons.svg) ونقاط الحالة */
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex-shrink: 0; display: inline-block; }
.ic-red { color: var(--danger); }
.ic-green { color: var(--success); }
.ic-amber { color: var(--warning); }
.dot { display: inline-block; width: .62em; height: .62em; border-radius: 50%; vertical-align: .05em; margin-inline-end: 2px; }
button .ic, a .ic { margin-inline-end: 2px; }

/* كروت ونماذج وأزرار */
section.card, .card {
  border-radius: var(--radius-lg); border: 1px solid #EEF1F5; box-shadow: var(--shadow);
}
h3 { color: var(--ink); }
input, select, textarea {
  border-radius: var(--radius-sm); border-color: #D5DBE4;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); outline: none; }
button { border-radius: var(--radius-sm); font-weight: 600; }
button:disabled { background: #DDE2EA; color: #4B5563; }
button.secondary { background: #fff; color: var(--ink); border: 1px solid var(--border); }
button.secondary:hover { background: var(--primary-tint); border-color: var(--primary-soft); color: var(--primary-dark); }
button.danger { color: var(--danger-dark); border-color: #FCA5A5; }

/* جداول */
thead tr { background: #F7F8FA; }
th { color: var(--text-muted); font-weight: 600; font-size: 12px; border-bottom-color: #E8ECF2; }
td { border-bottom-color: #EEF1F5; }
tbody tr:hover { background: #FAFBFD; }

/* شارات */
.badge { border-radius: 999px; font-weight: 600; }
.badge.on { background: var(--success-tint); color: #166534; }
.badge.late { background: var(--danger-tint); color: #991B1B; }
.badge.early { background: var(--primary-soft); color: var(--primary-dark); }
.badge.overtime { background: var(--warning-tint); color: var(--warning); }
.ok { color: var(--success-dark); }
.err { color: var(--danger-dark); }
.muted { color: var(--text-muted); }

/* شعار "مدرستي": مربع أزرق بطبقة سفلية أغمق وباص أزرق فاتح */
.brandLogo { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(to bottom, #1D4ED8 72%, #1E40AF 72%); color: #DBEAFE; flex-shrink: 0; }
.brandLogo .ic { width: 21px; height: 21px; }

/* نموذج الكرت الصحي (health-form.js) — صفحة الأهل ولوحة الإدارة */
.hfGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .hfGrid { grid-template-columns: 1fr; } }
.hfPair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hfChecks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.hfCheck { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 999px; background: #fff; color: var(--text) !important; font-size: 13.5px; cursor: pointer; }
.hfCheck input { width: auto !important; margin: 0; }
.hfMeta { margin-top: 10px; font-size: 12.5px; color: var(--text-muted); }
.healthCardForm select, .healthCardForm textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit; color: var(--text); background: #fff; resize: vertical; }
.healthCardForm select:focus, .healthCardForm textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }