/* ==========================================================================
   gharas-responsive.css — الطبقة المشتركة للتصميم المتجاوب في منصة غراس
   --------------------------------------------------------------------------
   • تُحمَّل في كل قالب نشط (لا يوجد base.html في المشروع).
   • لا تغيّر الهوية البصرية: لا ألوان جديدة ولا خطوط ولا محتوى.
   • تعمل مع اتجاه RTL أصلاً.
   • لا تستخدم overflow:hidden على <body> كبديل عن إصلاح السبب.
   • تُحمَّل بعد Bootstrap لتفوز في التتالي عند الحاجة.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) توحيد الهوية البصرية (الخطوط) لكافة المنصة
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Almarai-Regular';
  src: url('../fonts/Almarai-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body, html, p, h1, h2, h3, h4, h5, h6, span, a, div, button, input, textarea, select {
  font-family: 'Almarai-Regular', system-ui, -apple-system, Tajawal, Cairo, sans-serif !important;
}

/* --------------------------------------------------------------------------
   1) الأساسيات: منع تجاوز العرض من جذوره
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;   /* منع تكبير الخط تلقائيًا في iOS الأفقي */
}

/* ملاحظة مقصودة: هذه الطبقة لا تضع overflow:hidden/clip على <body>.
   إخفاء التمرير الأفقي يخفي العَرَض لا السبب، والاختبار الآلي يقيس التجاوز
   بعد تحييد أي overflow-x على body/html تحديدًا لكشف الأسباب الحقيقية. */
body {
  min-width: 0;
}

/* أطفال الـ flex/grid يرفضون الانكماش افتراضيًا (min-width:auto) — هذا سبب
   جذري لأغلب حالات التجاوز الأفقي في هذا المشروع. */
.row > *,
.d-flex > *,
[class*="col-"],
.card,
.card-body,
.stat-card,
.nav,
.navbar,
.tab-content,
.tab-pane,
.modal-body,
.accordion-body {
  min-width: 0;
}

/* الوسائط لا تتجاوز حاويتها أبدًا */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
img { object-fit: cover; }
canvas { max-width: 100% !important; }

/* الأطر المضمّنة (خرائط/فيديو) */
iframe { max-width: 100%; border: 0; }

/* --------------------------------------------------------------------------
   2) النصوص الطويلة: عربي، روابط، بريد، أسماء ملفات
   -------------------------------------------------------------------------- */
body,
p, li, td, th, dd, dt,
h1, h2, h3, h4, h5, h6,
.card-title, .card-text, .badge, .alert,
.list-group-item, .form-text, .invalid-feedback {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* الروابط والبريد وأسماء الملفات: كسر داخل الكلمة عند الضرورة فقط */
a[href^="mailto:"], a[href^="http"], code, kbd, samp,
.text-break, .gharas-breakable {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* قص أنيق بثلاث نقاط لعناصر السطر الواحد المعروفة */
.gharas-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   3) الجداول: التمرير الأفقي داخل حاوية الجدول فقط
   -------------------------------------------------------------------------- */
.table-responsive,
.gharas-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  scrollbar-width: thin;
}

/* الجدول نفسه يحتفظ بحد أدنى معقول للقراءة، والتمرير داخل الحاوية لا الصفحة */
.table-responsive > .table,
.gharas-table-scroll > .table,
.gharas-table-scroll > table {
  min-width: 560px;
  margin-bottom: 0;
}

/* مؤشر بصري صغير يخبر المستخدم أن الجدول قابل للسحب */
.gharas-table-scroll { position: relative; }

@media (max-width: 575.98px) {
  .table-responsive > .table,
  .gharas-table-scroll > .table,
  .gharas-table-scroll > table {
    min-width: 480px;
    font-size: 0.86rem;
  }
  .table > :not(caption) > * > * { padding: 0.55rem 0.5rem; }
}

/* --------------------------------------------------------------------------
   4) القائمة الجانبية → درج جانبي (Off-canvas) على الجوال واللوحي
   --------------------------------------------------------------------------
   المشروع يستخدم نمطين للقائمة:
     أ) شبكي:  .col-md-3.col-lg-2.sidebar.d-none.d-md-block  + .col-md-9
     ب) ثابت: .sidebar{position:fixed;right:0;width:260px} + .main-content{margin-right:260px}
   الطبقة التالية توحّدهما في درج واحد يفتح بزر، ويعيد المحتوى لكامل العرض.
   -------------------------------------------------------------------------- */

/* شريط علوي للجوال يحقنه gharas-responsive.js */
.gharas-mobile-topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 1035;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--primary-deep, #0f3d3e);
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.gharas-mobile-topbar .gharas-topbar-title {
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.gharas-mobile-topbar img { height: 32px; width: auto; flex: 0 0 auto; }

/* زر الهامبرغر — هدف لمس 44×44 */
.gharas-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font-size: 1.15rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.gharas-nav-toggle:focus-visible {
  outline: 3px solid #ffd166;
  outline-offset: 2px;
}

/* الطبقة المعتمة خلف الدرج */
.gharas-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  border: 0;
  padding: 0;
}
body.gharas-nav-open .gharas-nav-overlay { opacity: 1; visibility: visible; }

@media (max-width: 991.98px) {
  .gharas-mobile-topbar { display: flex; }

  /* الدرج: يظهر رغم d-none الموروثة من Bootstrap */
  .sidebar,
  aside.sidebar,
  div.sidebar {
    display: block !important;
    position: fixed !important;
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
    width: min(84vw, 300px) !important;
    max-width: 300px;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding-top: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1045;
    border-radius: 0 !important;
    transform: translateX(105%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-overflow-scrolling: touch;
  }

  body.gharas-nav-open .sidebar { transform: translateX(0); }

  /* المحتوى الرئيسي يستعيد كامل العرض في كلا النمطين */
  .main-content,
  main.main-content,
  .col-md-9,
  .col-lg-10,
  .row > .col-md-9,
  .row > .col-lg-10 {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* الحاويات لا تفرض عرضًا أكبر من الشاشة */
  .container, .container-fluid, .container-lg, .container-md, .container-xl {
    padding-left: 12px;
    padding-right: 12px;
    max-width: 100%;
  }

  /* زر إغلاق داخل الدرج */
  .gharas-nav-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0 8px 10px auto;
    border: 0;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.12);
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
  }
}

/* على الشاشات الكبيرة يبقى كل شيء كما صممه المشروع أصلاً */
@media (min-width: 992px) {
  .gharas-nav-overlay,
  .gharas-nav-close,
  .gharas-mobile-topbar { display: none !important; }
}

/* منع تمرير الخلفية أثناء فتح الدرج */
body.gharas-nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   5) البطاقات وإحصائيات اللوحات
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .stat-card, .card { border-radius: 16px; }
}

@media (max-width: 575.98px) {
  .stat-card, .card { border-radius: 14px; }
  .card-body { padding: 1rem; }

  /* أرقام الإحصائيات الضخمة تُقلَّص بدل أن تُقص */
  .stat-card h1, .stat-card h2, .stat-card .display-4,
  .display-1, .display-2, .display-3, .display-4 {
    font-size: clamp(1.6rem, 9vw, 2.4rem) !important;
    line-height: 1.15;
  }
}

/* الشبكات المرنة المكتوبة يدويًا يجب أن تلتف */
.d-flex:not(.flex-nowrap):not(.gharas-keep-row) { flex-wrap: wrap; }

/* استثناء: الصفوف التي يجب أن تبقى في سطر واحد (أيقونة + نص) */
.gharas-keep-row { flex-wrap: nowrap; }

/* شبكات CSS Grid المكتوبة بأعمدة ثابتة */
@media (max-width: 767.98px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .info-grid { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   6) العناوين والنصوص الكبيرة (Hero / Headers)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  h1 { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  h2 { font-size: clamp(1.3rem, 5.5vw, 1.7rem); }
  h3 { font-size: clamp(1.15rem, 5vw, 1.45rem); }
  h4 { font-size: clamp(1.05rem, 4.5vw, 1.25rem); }
  .lead { font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   7) النماذج، الحقول، الأزرار — أهداف لمس ≥ 44px
   -------------------------------------------------------------------------- */
.form-control, .form-select, .btn, .input-group-text,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="tel"],
input[type="search"], input[type="file"], select, textarea {
  max-width: 100%;
}

@media (max-width: 991.98px) {
  .form-control, .form-select, .btn,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="date"], input[type="tel"],
  input[type="search"], select {
    min-height: 44px;
  }

  /* 16px يمنع تكبير iOS التلقائي عند التركيز على الحقل */
  .form-control, .form-select, input, select, textarea {
    font-size: 16px;
  }

  textarea.form-control, textarea { min-height: 96px; }

  .btn { padding-inline: 0.9rem; }

  /* مجموعات الأزرار تلتف بدل أن تتجاوز */
  .btn-group, .btn-toolbar, .d-flex.gap-2, .action-buttons {
    flex-wrap: wrap;
  }

  /* الأزرار داخل خلايا الجداول */
  td .btn, th .btn { white-space: nowrap; }
}

/* الأزرار الأيقونية الصغيرة تحصل على هدف لمس كافٍ دون تغيير شكلها.
   يشمل أصناف الإجراءات المخصّصة في المشروع (.btn-action*) التي كانت 35×35. */
@media (max-width: 991.98px) {
  .btn-sm, .btn-icon,
  a.btn.rounded-circle, button.rounded-circle,
  [class*="btn-action"],
  .btn-view, .btn-edit, .btn-delete, .btn-approve, .btn-reject,
  td button, td a.btn, th button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* أزرار عامة: هدف لمس قياسي */
  button, .btn, a.btn, [role="button"], input[type="submit"], input[type="button"] {
    min-height: 44px;
  }

  /* زر إغلاق النافذة المنبثقة */
  .btn-close {
    min-width: 44px;
    min-height: 44px;
    background-position: center;
  }

  /* مسافة بين أزرار الإجراءات المتلاصقة داخل الجداول */
  td .btn + .btn, td button + button { margin-inline-start: 6px; }
}

/* input-group لا يجب أن يجبر الصف على تجاوز العرض */
.input-group { flex-wrap: wrap; }
.input-group > .form-control,
.input-group > .form-select { min-width: 0; }

/* --------------------------------------------------------------------------
   8) النوافذ المنبثقة (Modals)
   -------------------------------------------------------------------------- */
.modal-dialog { max-width: calc(100% - 1rem); }

@media (max-width: 767.98px) {
  .modal-dialog {
    margin: 0.5rem auto;
    max-width: calc(100% - 1rem);
  }
  .modal-body { padding: 1rem; max-height: 74vh; overflow-y: auto; }
  .modal-content { border-radius: 16px; }
  .modal-header, .modal-footer { padding: 0.85rem 1rem; flex-wrap: wrap; gap: 8px; }
  .modal-footer > .btn { flex: 1 1 auto; }
}

/* أي جدول داخل نافذة منبثقة يمرَّر داخل نفسه */
.modal-body .table-responsive,
.modal-body .gharas-table-scroll { max-width: 100%; }

/* --------------------------------------------------------------------------
   9) الترقيم (Pagination) — أهداف لمس 44px رغم الأنماط المضمّنة (inline)
   -------------------------------------------------------------------------- */
.pagination { flex-wrap: wrap; row-gap: 8px; }

@media (max-width: 991.98px) {
  .pagination .page-link {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* --------------------------------------------------------------------------
   10) العناصر ذات الموضع الثابت/المطلق
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  /* أي عنصر ثابت لا يتجاوز عرض الشاشة */
  .floating-action, .fab, .toast-container, .alert-fixed {
    max-width: calc(100vw - 24px);
    right: 12px !important;
    left: auto !important;
  }

  /* عناصر الزينة المطلقة الكبيرة لا تصنع تمريرًا أفقيًا */
  .decor, .blob, .shape, .bg-decoration { max-width: 100vw; }
}

/* --------------------------------------------------------------------------
   11) الرسوم البيانية (Chart.js)
   -------------------------------------------------------------------------- */
.chart-container,
.chart-wrapper {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .chart-container, .chart-wrapper { min-height: 240px; }
  canvas { max-height: 320px; }
}

/* --------------------------------------------------------------------------
   12) الصور الرمزية والمعاينات
   -------------------------------------------------------------------------- */
.avatar, .coach-avatar, .player-avatar, .profile-pic, .rounded-circle.img-thumbnail {
  flex: 0 0 auto;
  object-fit: cover;
}

@media (max-width: 575.98px) {
  .coach-avatar, .player-avatar { width: 72px !important; height: 72px !important; }
  .upload-preview img, .preview-box img { max-height: 200px; width: auto; }
}

/* معرض الصور/الفيديو */
.gallery, .video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 16px;
}

/* --------------------------------------------------------------------------
   13) الوضع الأفقي للجوال (landscape)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 520px) {
  .sidebar { padding-top: 8px; }
  .gharas-mobile-topbar { padding: 6px 12px; }
  .modal-body { max-height: 62vh; }
  .chart-container, .chart-wrapper { min-height: 200px; }
}

/* --------------------------------------------------------------------------
   14) إتاحة الوصول: حالات التركيز، الحركة المخفّضة
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.page-link:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #ffd166;
  outline-offset: 2px;
  border-radius: 6px;
}

/* رابط تخطي إلى المحتوى (يحقنه الـ JS).
   يُخفى بتقنية clip لا بـ right:-9999px — الإزاحة خارج الشاشة تُنشئ
   تجاوزًا أفقيًا حقيقيًا للمستند. */
.gharas-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.gharas-skip-link:focus,
.gharas-skip-link:focus-visible {
  position: fixed;
  top: 8px;
  right: 12px;
  left: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 18px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  z-index: 2000;
  background: #0f3d3e;
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  outline: 3px solid #ffd166;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   15) معالجات عامة لأنماط ثابتة مكتوبة داخل القوالب
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* أي عرض ثابت بالبكسل مكتوب inline يُقيَّد بعرض الحاوية */
  [style*="width: 260px"], [style*="width:260px"],
  [style*="width: 280px"], [style*="width:280px"],
  [style*="width: 300px"], [style*="width:300px"],
  [style*="width: 320px"], [style*="width:320px"],
  [style*="width: 500px"], [style*="width:500px"],
  [style*="width: 560px"], [style*="width:560px"],
  [style*="width: 600px"], [style*="width:600px"],
  [style*="width: 980px"], [style*="width:980px"],
  [style*="width: 992px"], [style*="width:992px"] {
    max-width: 100% !important;
  }

  [style*="min-width"] { min-width: 0 !important; }

  /* استثناء: الجداول تحتفظ بحدها الأدنى لأنها تُمرَّر داخل حاويتها */
  .table-responsive > table, .gharas-table-scroll > table { min-width: 480px !important; }

  /* حشوات كبيرة مكتوبة inline */
  [style*="padding: 40px"], [style*="padding:40px"] { padding: 18px !important; }
  [style*="padding: 60px"], [style*="padding:60px"] { padding: 24px !important; }
}

/* الشاشات الكبيرة جدًا: منع تمدد النص بلا حدود */
@media (min-width: 1600px) {
  .main-content > .container,
  .main-content > .container-fluid { max-width: 1560px; margin-inline: auto; }
}

/* ==========================================================================
   16) إصلاحات موجّهة لحالات رصدها الفحص الآلي
   ========================================================================== */

/* 16.1 — عنصر واحد يحمل صنف عمود الشبكة و.main-content معًا، **وشقيقه
   الشريط الجانبي عمود شبكي حقيقي** (مثال: admin_dashboard.html حيث
   `.sidebar` نفسه `col-md-3 col-lg-2`). في هذه الحالة فقط الشبكة تتكفّل
   بموضع المحتوى، فلا هامش إضافي.
   ⚠️ لا تُطبَّق هذه القاعدة عندما يكون `.sidebar` في الصف `position:fixed`
   (بلا صنف عمود) — تلك الصفحات (admin/academies.html, admin/consultants.html,
   admin/admin_inbox.html, admin/admin_outbox.html, admin/quality-control,
   academy/reports.html, consultant/library, consultant/samples, ...) تعتمد
   على margin-right المكتوب في القالب لتعويض الشريط الثابت؛ إزالته بـ!important
   كانت تُسقط المحتوى بالكامل تحت الشريط الجانبي (تراكب حقيقي مؤكد آليًا). */
.row:has(> [class*="col-"].sidebar) > .main-content,
.row:has(> [class*="col-"].sidebar) > main.main-content,
.row:has(> [class*="col-"].sidebar) > div.main-content {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* 16.1.1 — صف Bootstrap داخل عمود بلا حشو أفقي: هوامشه السالبة (‎-12px)
   تخرج من حدود العمود على الجانبين ⇒ تجاوز أفقي للمستند (‎+12px). */
.p-0 > .row,
.px-0 > .row,
[class*="col-"].p-0 > .row,
[class*="col-"].px-0 > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 16.1.2 — أيقونات زخرفية مطلقة داخل بطاقات الإحصائيات */
.stat-card, .card, .glass-card, .table-card { overflow-x: clip; }
.stat-icon-bg { max-width: 100%; pointer-events: none; }

/* 16.2 — القوائم المنسدلة والحقول المخصّصة خارج أصناف Bootstrap */
select, input, textarea,
.filter-select, .form-select-dark, .search-input, .custom-select {
  max-width: 100%;
}

@media (max-width: 991.98px) {
  .filter-select, .form-select-dark, .search-input, .custom-select {
    width: 100% !important;
    min-height: 44px;
  }
  /* أشرطة الفلاتر تلتف بدل أن تتمدد */
  .filters-bar, .filter-row, .toolbar { flex-wrap: wrap; gap: 10px; }
}

/* 16.3 — عناصر الزينة المطلقة (إضاءة الملعب) تُقصّ داخل قسمها لا الصفحة */
.cta-section,
.home-hero,
.hero-section,
section:has(> .stadium-lights) {
  overflow-x: clip;   /* قصّ زخرفي موضعي — ليس بديلاً عن إصلاح المحتوى */
}
.stadium-lights { max-width: 100vw; pointer-events: none; }

/* 16.3.1 — عناصر زخرفية زائفة (::before/::after) بعرض ثابت أكبر من الشاشة.
   مثال: .howitworks-wrapper::before عرضه 580px مع left:50%;translateX(-50%)
   فيمتد من -130px إلى 450px على شاشة 320px ⇒ تجاوز أفقي حقيقي للمستند. */
.howitworks-wrapper::before {
  width: min(580px, 92vw) !important;
  max-width: 100%;
}
.howitworks-wrapper { overflow-x: clip; }

@media (max-width: 767.98px) {
  .howitworks-wrapper { padding: 28px 18px !important; margin: 24px auto !important; }
  .work-box { padding: 48px 16px 20px !important; }
}

/* 16.4 — المدار الدائري في الصفحة الرئيسية (تصميم بأبعاد ثابتة 450px) */
@media (max-width: 991.98px) {
  .orbit-container {
    width: min(450px, 86vw) !important;
    height: min(450px, 86vw) !important;
    margin-top: 24px !important;
  }
  .orbit-container .player-box {
    width: min(380px, 72vw) !important;
    height: min(380px, 72vw) !important;
  }
  .orbit {
    width: min(450px, 86vw) !important;
    height: min(450px, 86vw) !important;
  }
  .hero-small-ball { width: 26px; }
  .hero-small-ball:nth-child(1) { transform: rotate(0deg)   translateY(min(-244px, -42vw)); }
  .hero-small-ball:nth-child(2) { transform: rotate(90deg)  translateY(min(-205px, -36vw)); }
  .hero-small-ball:nth-child(3) { transform: rotate(180deg) translateY(min(-205px, -36vw)); }
  .hero-small-ball:nth-child(4) { transform: rotate(270deg) translateY(min(-244px, -42vw)); }
}

/* 16.5 — رؤوس الصفحات ذات الصفّين (عنوان + أزرار) */
@media (max-width: 767.98px) {
  .top-header,
  .page-header,
  .d-flex.justify-content-between.align-items-center {
    flex-wrap: wrap;
    gap: 12px;
  }
  .top-header > *, .page-header > * { min-width: 0; }
}

/* 16.6 — شرائط التمرير الأفقي المقصودة (أيام الخطة) تبقى تمريرًا لا التفافًا */
.overflow-auto.d-flex,
.d-flex.overflow-auto {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.overflow-auto.d-flex > *,
.d-flex.overflow-auto > * { flex: 0 0 auto; }

/* 16.7 — البطاقات ذات الحد الأدنى الثابت داخل شرائط التمرير */
@media (max-width: 575.98px) {
  .day-card { min-width: 84px !important; padding: 12px 10px !important; }
}

/* 16.8 — صفوف الإحصائيات: عمودان على الجوال بدل عمود واحد ممتد */
@media (min-width: 400px) and (max-width: 767.98px) {
  .row.g-4 > .col-md-6.col-lg-3,
  .row.g-3 > .col-md-6.col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* 16.9 — الصفحات ذات الخلفية الثابتة (صفحة الدخول) */
@media (max-width: 767.98px) {
  .stadium-bg, .login-bg, .bg-fixed {
    background-attachment: scroll !important;
    max-width: 100vw;
  }
}

/* 16.10 — منع أي عنصر من تجاوز عرض الشاشة بسبب vw كبير مكتوب inline */
@media (max-width: 991.98px) {
  [style*="vw"]:not(html):not(body) { max-width: 100%; }
}

/* ==========================================================================
   17) صفحة تسجيل الدخول / استعادة كلمة المرور
   --------------------------------------------------------------------------
   style.css يضع body{overflow:hidden} و .login-card{width:380px} — أي أن
   البطاقة أعرض من شاشة 320px، والزر يصبح غير قابل للوصول لأن التمرير معطّل.
   ========================================================================== */
body:has(.login-container),
body:has(.login-card) {
  overflow-x: hidden;
  overflow-y: auto;          /* استعادة التمرير الرأسي المفقود */
  min-height: 100vh;
}

.login-container {
  padding: 24px 16px 40px !important;
  width: 100%;
  align-items: flex-start;
}

.login-card {
  width: 100% !important;
  max-width: 380px;
}

@media (max-width: 575.98px) {
  .login-container { padding-top: 18px !important; }
  .login-card { padding: 24px 18px !important; border-radius: 16px; }
  .card-header h1 { font-size: clamp(1.25rem, 6vw, 1.6rem); }
  .card-header p { font-size: 0.9rem; }
  .logo-circle { width: 64px; height: 64px; }
  .logo-circle img { width: 72px; }

  /* الخيارات (تذكرني / نسيت كلمة المرور) تلتف بدل أن تتزاحم */
  .options { flex-wrap: wrap; gap: 10px; }
  .options label, .options a { font-size: 0.85rem; }

  /* الكرات الزخرفية المتحركة تصغر ولا تصنع تمريرًا */
  .ball { width: 42px !important; height: 42px !important; }
}

/* أهداف لمس في صفحة الدخول */
.input-group input, .login-btn {
  min-height: 46px;
}
.options a, .options label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* الخلفية الثابتة لا تتجاوز العرض */
.stadium-bg { max-width: 100vw; }
.ball { max-width: 100vw; }