/* طبقة صقل بصري فوق site.min.css — لا تغيّر وظائف. حذف هذا الملف يعيد الشكل السابق كما هو. */

/* A1 — شريط التنقل السفلي على الجوال والأجهزة اللوحية:
   العناصر تتقاسم العرض بالتساوي بدل عرض أدنى ثابت يدفع آخر عنصر خارج الشاشة. */
@media screen and (max-width:1024px) {
 .sidebar .nav-list:not(:has(> :nth-child(9))) { grid-auto-columns:minmax(0, 1fr); overflow-x:visible; }
 .sidebar .nav-list:not(:has(> :nth-child(9))) .nav-link { min-width:0; padding-inline:2px; }
 /* الكلمة لا تنكسر من منتصفها؛ النص الطويل ينزل لسطر ثانٍ عند المسافة فقط */
 .sidebar .nav-label::after { overflow-wrap:normal; word-break:keep-all; text-wrap:balance; }
 @media (max-width:380px) {
  .sidebar .nav-list:not(:has(> :nth-child(9))) { gap:2px; }
  .sidebar .nav-list:not(:has(> :nth-child(9))) .nav-link { padding-inline:0; }
  .sidebar .nav-list:not(:has(> :nth-child(9))) .nav-label::after { font-size:9px; letter-spacing:-.2px; }
  .sidebar .nav-list:has(> :nth-child(8)):not(:has(> :nth-child(9))) .nav-label::after { font-size:8.5px; }
 }
 /* 4 بطاقات أقسام: صفّان متوازنان (2×2) بدل 3 + 1 يتيمة */
 .admin-center-cards:has(> :nth-child(4):last-child) { grid-template-columns:repeat(2, minmax(0, 1fr)); }
 /* حتى 8 عناصر (الإدارية 7، المعلمة 8) تظهر كلها. 9 فأكثر (الصيانة): يبقى التمرير مع تلاشٍ عند الحافة */
 .sidebar .nav-list:has(> :nth-child(9)) { -webkit-mask-image:linear-gradient(to left, #000 88%, transparent); mask-image:linear-gradient(to left, #000 88%, transparent); }
}

/* A3 — الزر الثانوي على الشاشات الواسعة: حدّ أوضح حتى لا يبدو كزر معطّل.
   (على الجوال site.min.css يعطيه حدًّا أوضح أصلًا؛ والمعطّل الحقيقي يبقى بشفافيته المعتادة.) */
@media screen and (min-width:1025px) {
 .btn-secondary { border-color:#9ccab8; }
 /* نفس استجابة المرور الموجودة للجوال في site.min.css، كانت غائبة على سطح المكتب */
 .btn-secondary:not(:disabled):hover { color:#fff; background:#14725f; border-color:#14725f; }
}
/* إطار تركيز واضح عند التنقل بلوحة المفاتيح فقط (لا يظهر عند النقر بالفأرة) */
@media screen {
 .btn:focus-visible { outline:3px solid rgba(31, 107, 87, .45); outline-offset:2px; }
}

/* A4 — بطاقات الإحصاء: الصف مبني على 4 أعمدة ثابتة، فالبطاقتان أو الثلاث تتكدس يمينًا ويبقى فراغ.
   عند أقل من 4 بطاقات تتقاسم البطاقات العرض بالتساوي (الجوال له قواعده الخاصة ولا يتغير). */
@media screen and (min-width:861px) {
 .metric-row:has(> :nth-child(3):last-child) { grid-template-columns:repeat(3, minmax(0, 1fr)); }
 .metric-row:has(> :nth-child(2):last-child) { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* A5 — 4 بطاقات أقسام على سطح المكتب: صف واحد من 4 إن اتسع العرض، وإلا 2×2؛ بدل 3 + 1 يتيمة. */
@media screen and (min-width:861px) {
 .admin-center-cards:has(> :nth-child(4):last-child) { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width:1280px) {
 .admin-center-cards:has(> :nth-child(4):last-child) { grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

/* A6 — صف الفلاتر على سطح المكتب: الحقل والقائمة والزر بارتفاع واحد، وزر البحث بعرض مريح لا يلتصق بالقائمة. */
@media screen and (min-width:861px) {
 .filter-bar .input, .filter-bar .btn { min-height:48px; }
 .filter-bar > .btn, .filter-bar > * > .btn { min-width:96px; }
}

/* ===== صقل خاص بالصفحات ===== */
@media screen {
 /* حقول التاريخ الهجري: الأرقام تبقى بترتيب ltr لكن محاذاتها يمينًا كبقية حقول النموذج */
 .hijri-date-input { text-align:right; }
 /* الملاحظات: تباعد أسطر مريح للعربية وثابت في كل الصفحات */
 .notice { line-height:1.8; }
 /* أزرار صف الحلقة (حفظ / حذف): مسافة تفصل الإجراء الخطِر عن الحفظ */
 .halaqah-grid .row-actions { gap:8px; }
}
/* الحلقات على الجوال: عمود العناوين كان بعرض ثابت 104px فينقطع اسم المعلمة داخل القائمة */
@media screen and (max-width:860px) {
 .halaqah-grid td { grid-template-columns:76px minmax(0, 1fr); }
}
/* شريط التمرير داخل الشريط الجانبي على سطح المكتب: رفيع وبلون الشريط بدل الرمادي الافتراضي (التمرير نفسه كما هو) */
@media screen and (min-width:1025px) {
 .sidebar { scrollbar-width:thin; scrollbar-color:rgba(255, 255, 255, .28) transparent; }
}
