/* ============================================================================
   mobile.css — تنسيق الجوال (طلب المالك 2026-09-13)
   ----------------------------------------------------------------------------
   يُحمَّل من layout.php و login.php بالشرط media="(max-width: 767px)":
   على أي شاشة أعرض من ذلك لا يُطبَّق هذا الملف إطلاقاً، فالموقع على الكمبيوتر
   واللوحي يبقى كما هو حرفياً. style.css لا يُعدَّل لأجل الجوال — كل تعديل
   جوّال مكانه هنا فقط.

   العناصر الخاصة بالجوال في الصفحات (زر ☰ وتنبيه «للكمبيوتر») تحمل الخاصية
   hidden فلا تظهر على الكمبيوتر، وهذا الملف وحده يُظهرها.
   ========================================================================= */

/* ---------------------------------------------------------------- الترويسة */
.site-header { position: static; }          /* لا ترويسة لاصقة تحجب الشاشة الصغيرة */
.site-nav {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand toggle" "links links" "user user";
  align-items: center;
  height: auto;
  max-width: none;
  margin: 0;
  padding: .55rem var(--container-padding);
  gap: 0;
}
.brand { grid-area: brand; }
.brand img { height: 40px; }

.nav-toggle-wrap { grid-area: toggle; display: block; }
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;                 /* هدف لمس مريح */
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.nav-toggle:hover { background: var(--primary-light); }
.site-nav.nav-open .nav-toggle { background: var(--primary); color: #fff; }

/* القائمة مطويّة حتى الضغط على ☰ */
.site-nav-links, .site-nav-user { display: none; }
.site-nav.nav-open .site-nav-links {
  grid-area: links;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  height: auto;
  margin-top: .6rem;
  border-top: 1px solid var(--border);
}
.site-nav.nav-open .site-nav-user {
  grid-area: user;
  display: flex;
  justify-content: space-between;
  padding: .7rem 0 .2rem;
  border-top: 1px solid var(--border);
}

/* روابط القائمة: صفوف كاملة العرض قابلة للمس. حالات :hover/:active مذكورة
   صراحةً لأن style.css يصفّر حشوة الزر وحدوده فيها بمحدِّد أقوى — فينكمش الزر
   لحظة اللمس ويضيع النقر */
.site-nav-links > a,
.site-nav-links .nav-group-btn,
.site-nav-links .nav-group-btn:hover,
.site-nav-links .nav-group-btn:active {
  height: auto;
  width: 100%;
  padding: .8rem .25rem;
  font-size: 1rem;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.site-nav-links a.active::after,
.nav-group-btn.active::after { display: none; }   /* شرطة الذهب للكمبيوتر فقط */
.site-nav-links > a.active { color: var(--primary); background: var(--primary-light); }

/* المجموعات أكورديون: نفس سكربت الفتح/الإغلاق الموجود يضيف .open */
.nav-group { flex-direction: column; align-items: stretch; height: auto; }
.nav-caret { display: inline; }
.nav-menu {
  display: none;
  position: static;
  min-width: 0;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: .2rem 0 .4rem;
  background: var(--bg, transparent);
}
.nav-group.open .nav-menu { display: flex; }
.nav-menu a { padding: .7rem 1.25rem; font-size: .95rem; }

/* ------------------------------------------------------------ التخطيط العام */
:root { --container-padding: 14px; }
main { max-width: none; margin: 1rem 0 2rem; padding: 0 var(--container-padding); }
.page-hero { margin-bottom: 1.1rem; padding-inline-start: .85rem; }
.page-hero h1 { font-size: 1.45rem; line-height: 1.35; }
.card { padding: 1rem; margin-bottom: 1rem; border-radius: var(--radius-md); }

/* الشبكات المكدّسة في عمود واحد: العمود لا يتقلّص تحت أعرض محتوى فيه
   (السبب الرئيسي لخروج الصفحات عن عرض الشاشة) — minmax(0,1fr) + min-width:0 */
.stagger-grid, .two-col-wide, .cols-2, .cols-2-1, .form-grid, .scope-grid, .stat-grid {
  grid-template-columns: minmax(0, 1fr);
}
.stagger-grid > *, .two-col-wide > *, .cols-2 > *, .cols-2-1 > *,
.form-grid > *, .scope-grid > *, .stat-grid > * { min-width: 0; }

/* أي محتوى أعرض من البطاقة (جداول، شبكات أوقات) يُمرَّر أفقياً داخلها
   بدل أن يدفع الصفحة كلها خارج الشاشة */
.card { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------------ النماذج */
.formrow { gap: .5rem; }
.formrow > label:first-child { min-width: 100%; }
.flex-header { gap: .6rem; }
.flex-row { gap: .6rem; }
input, select, textarea { max-width: 100%; }
.export-dl { flex-wrap: wrap; justify-content: flex-start; }
.export-dl select { min-width: 0; flex: 1 1 10rem; }
.filter-row { flex-wrap: wrap; }

/* الأزرار الرئيسية في رأس الصفحة تلتف ولا تخرج عن الشاشة */
.page-hero .flex-row .btn, .page-hero .flex-row button { flex: 1 1 auto; }

/* ------------------------------------------------------------------ الجداول */
table.grid th, table.grid td { padding: .5rem .55rem; }

/* جداول التمرير الأفقي (التوزيع وغيره): عمود العنوان الأول يبقى ظاهراً أثناء
   التمرير — ما عدا جدول الوزارة الذي عموده الأول «رقم» لا يفيد تثبيته */
.scroll-x table.grid:not(.ministry) tr > :first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
}
.scroll-x table.grid:not(.ministry) tr > td:first-child { background: var(--surface); }

/* -------------------------------------------------------------- النوافذ */
.modal-overlay { padding: .5rem; align-items: flex-start; }
.modal-box, .modal-box.modal-wide, .modal-box.modal-form {
  max-width: 100%;
  padding: 1rem;
  margin-top: .5rem;
}
.modal-form .modal-scroll { max-height: calc(100vh - 9rem); }

/* ------------------------------------------- صفحات «للكمبيوتر فقط» (layout.php) */
.mobile-block-notice {
  display: block;
  text-align: center;
  padding: 2rem 1.25rem;
  margin: 1.5rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius-lg);
}
.mobile-block-notice h2 { color: var(--primary); font-size: 1.2rem; margin: 0 0 .6rem; }
.mobile-block-notice p { color: var(--text-muted); margin: 0 0 1.2rem; }
body.mobile-desktop-only:not(.mobile-continue) main > :not(.mobile-block-notice) { display: none; }
body.mobile-continue .mobile-block-notice { display: none; }

/* ------------------------------------------------------- إخفاء على الجوال فقط */
/* صنف تضعه الصفحة على عمود/زر لا لزوم له على الشاشة الصغيرة (مثال: سجل
   الإنشاءات في generate.php يُبقي #، الاسم، الحالة، العرض والحذف فقط).
   style.css لا يعرف هذا الصنف، فلا أثر له على الكمبيوتر */
.mobile-hide { display: none !important; }

/* ------------------------------------------------ مشاركة ملف التصدير (ttShare) */
/* نافذة «الملف جاهز» تُنشأ بالـ JS على الجوال فقط (layout.php) — تعيد استخدام
   مظهر طبقة الانتظار، بلا دوران للشعار وبزر مشاركة بعرض كامل */
.ttshare-overlay .ttwait-seal-wrap,
.ttshare-overlay .ttwait-seal { animation: none; }
.ttshare-overlay .ttshare-name { word-break: break-word; margin-bottom: 1rem; }
.ttshare-overlay .ttshare-btn { display: block; width: 100%; }