/* ============================================================
   mobile-fix.css — إصلاحات الجوال
   يُحمَّل آخر ملف في كل صفحة ليطغى على الأنماط المضمّنة القديمة
   التي تفرض هامشاً ثابتاً للقائمة الجانبية.
   ============================================================ */

@media screen and (max-width: 992px) {
  /* إلغاء هامش القائمة بكل أسمائه — القائمة أصبحت منزلقة */
  .main-content,
  #main-content,
  .app-main,
  .wrap,
  main,
  body > div[id="main-content"] {
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    padding-top: 68px !important;
    box-sizing: border-box !important;
  }

  /* منع الكسر الأفقي */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  /* البطاقات والحاويات */
  .card, .info-card, .form-card, .table-card, .fin-card {
    padding: 16px !important;
    margin-inline: 0 !important;
    max-width: 100% !important;
    border-radius: 12px !important;
  }

  /* العناوين تلتف بدل القطع */
  h1, h2, h3, .card__title, .card-title, .info-title, .page-header {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }

  /* الجداول تمرّر أفقياً */
  .table__scroll, .rpt-table__scroll, .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  table { min-width: max-content; }

  /* الشبكات عمود أو عمودان */
  /* ‼ `.rpt-kpis` مستثناة: لها في reports.css شبكةٌ تتكيّف بذاتها في كلِّ
     المقاسات (auto-fit بأساسٍ نسبيّ). وقاعدةُ نقطةِ كسرٍ بـ!important
     تسحقها فتعود إلى عددٍ ثابتٍ لا يناسب إلا جهازاً واحداً. */
  .summary-grid, .stats-row, .hr-stats,
  .emp-kpis, .svc-grid, .doc-grid, .age-bars {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .form-grid, .filter-grid, .widgets-row, .fs-grid,
  .cs-grid, .as-grid, .ct-grid, .lc-grid, .edit-grid {
    grid-template-columns: 1fr !important;
  }

  /* أشرطة الأدوات عمودية.
     ‼ `.rpt-toolbar` مستثناة: لها في reports.css قاعدةُ جوالٍ مقصودة
     تضع الحقولَ عمودين (flex: 1 1 46%). وهذا الملفُّ يُحمَّل بعده
     بـ!important فكان يسحقها إلى عمودٍ واحد — فشريطُ كشف الفواتير
     ثمانيةُ حقولٍ فوق بعضها يملأ الشاشة قبل أن يُرى رقمٌ واحد. */
  .ov-toolbar, .acc-toolbar, .unified-filter, .filter-form {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .rpt-actions, .acc-filters { margin-inline-start: 0 !important; }
  .rpt-btn, .btn { justify-content: center; }

  /* الحقول بعرض كامل وحجم يمنع تكبير iOS
     ملاحظة: نستثني checkbox و radio صراحةً — لولا ذلك يتضخّمان
     ويسحقان النص المجاور لهما (ظهر في شاشة الفواتير). */
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea, .form-control {
    width: 100% !important;
    font-size: 16px !important;
    max-width: 100% !important;
  }

  input[type="checkbox"], input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    flex-shrink: 0;
    margin: 0;
  }

  /* حقل التاريخ: الحقل والزر متجاوران — الزر بحجم يناسب اللمس */
  .date-combo { display: flex !important; gap: 6px; align-items: stretch; }
  .date-combo > input[type="text"] {
    flex: 1; min-width: 0;
    padding-inline-end: 13px !important;
    width: auto !important;
  }
  .date-combo__btn {
    flex-shrink: 0;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: auto !important;
    font-size: 1rem !important;
  }
  .date-combo__native {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    min-width: 0 !important; opacity: 0 !important;
  }

  /* زر تثبيت التاريخ: لا يتمدّد ولا يزاحم التسمية */
  .pin-chip {
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0;
    font-size: .7rem !important;
    padding: 3px 10px !important;
  }
  .pin-chip span { display: inline; }

  /* تسمية الحقل مع الزر: سطر واحد مرن */
  .form-group label {
    display: flex !important;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: .82rem !important;
  }


  /* بطاقات الخيارات: عمود واحد مع إظهار النص كاملاً */
  .option-toggles { grid-template-columns: 1fr !important; }
  .option-card {
    padding: 14px 16px !important;
    min-height: 62px;
    align-items: center !important;
  }
  .option-card .opt-text { flex: 1; min-width: 0; }
  .option-card .opt-title {
    white-space: normal !important;
    font-size: .88rem !important;
  }
  .option-card .opt-desc {
    white-space: normal !important;
    font-size: .73rem !important;
  }

  /* النماذج داخل الجداول */
  form { max-width: 100%; }

  /* اللوحات المتقدمة تبقى مخفية حتى يُفعّلها المستخدم
     (احترام style="display:none" المضمّن) */
  .advanced-panel[style*="display:none"],
  .advanced-panel[style*="display: none"] { display: none !important; }

  /* الصفوف الديناميكية داخل اللوحات: عمود واحد.
     `:not(tr)` شرطٌ لازم: `alloc-row` اسمٌ يستعمله نموذجُ توزيع الفروع
     في شاشة الفواتير **وصفُّ التجزئة في كشف الفواتير** معاً. وبلا هذا
     الشرط يصير `<tr>` شبكةً بعمودٍ واحد، فتنفرط خلاياه التسعُ تحت بعضها
     في وسط جدولٍ سليم — سطرٌ واحدٌ منفجرٌ بين مئاتٍ منتظمة. */
  .payment-row:not(tr), .alloc-row:not(tr), .split-row:not(tr) {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 9px !important;
  }
  .payment-row:not(tr) > *, .alloc-row:not(tr) > * { width: 100% !important; }
  .payment-row:not(tr) button, .alloc-row:not(tr) button { width: auto !important; justify-self: start; }

}

@media screen and (max-width: 560px) {
  /* ‼ `.rpt-kpis` مستثناة: لها في reports.css شبكةٌ تتكيّف بذاتها في كلِّ
     المقاسات (auto-fit بأساسٍ نسبيّ). وقاعدةُ نقطةِ كسرٍ بـ!important
     تسحقها فتعود إلى عددٍ ثابتٍ لا يناسب إلا جهازاً واحداً. */
  .summary-grid, .stats-row, .hr-stats,
  .svc-grid, .doc-grid, .age-bars {
    grid-template-columns: 1fr !important;
  }
  /* .emp-kpis مستثناة: أربع بطاقات محتواها رقم وكلمتان، وعمودٌ واحد كان
     يجعلها أربعة صفوف شبه فارغة تدفع «مهامي اليوم» خارج الشاشة الأولى.
     عمودان عند 370px يعطيان ~165px لكل بطاقة وهو كافٍ. */
  .emp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .card, .info-card { padding: 14px !important; }
  h1, .card__title { font-size: .95rem !important; }
}

/* ============================================================
   تحسينات الجوال المتقدمة
   ============================================================ */
@media screen and (max-width: 768px) {
  /* أهداف اللمس: 44px حد أدنى (معيار الوصولية) */
  .btn, button, .rpt-btn, a.btn, .eye-btn, .privacy-all {
    min-height: 44px !important;
  }
  .eye-btn { min-width: 44px !important; }

  /* الجداول: بطاقات بدل صفوف مضغوطة */
  .rpt-table thead { display: none; }
  .rpt-table, .rpt-table tbody, .rpt-table tr, .rpt-table td { display: block; width: 100%; }
  .rpt-table tr {
    background: #fff; border: 1px solid #e8edf3; border-radius: 11px;
    padding: 12px 14px; margin-bottom: 9px;
  }
  .rpt-table td {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 6px 0 !important; border: none !important;
    font-size: .82rem;
  }
  .rpt-table td::before {
    content: attr(data-label);
    font-weight: 600; color: #94a3b8; font-size: .74rem;
    flex-shrink: 0;
  }
  .rpt-table tfoot tr { background: #f8fafc; font-weight: 700; }

  /* شريط سفلي للإجراءات السريعة */
  .mobile-fab {
    position: fixed; bottom: 18px; inset-inline-end: 18px; z-index: 800;
    width: 56px; height: 56px; border-radius: 50%;
    background: #2563eb; color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; box-shadow: 0 6px 20px rgba(37,99,235,.4);
    cursor: pointer;
  }
  .mobile-fab:active { transform: scale(.93); }

  .fab-menu {
    position: fixed; bottom: 84px; inset-inline-end: 18px; z-index: 800;
    display: flex; flex-direction: column; gap: 9px;
    opacity: 0; pointer-events: none; transform: translateY(10px);
    transition: all .22s ease;
  }
  .fab-menu.is-open { opacity: 1; pointer-events: auto; transform: none; }
  .fab-item {
    display: flex; align-items: center; gap: 10px;
    background: #fff; color: #334155; text-decoration: none;
    padding: 11px 17px; border-radius: 26px;
    box-shadow: 0 4px 14px rgba(15,23,42,.16);
    font-size: .84rem; font-weight: 600; white-space: nowrap;
  }
  .fab-item i { color: #2563eb; }

  /* منع التكبير التلقائي في iOS */
  input, select, textarea { font-size: 16px !important; }

  /* البطاقات: حشو أقل وحواف أنعم */
  .dash-card { padding: 14px 15px 12px !important; }
  .dash-num { font-size: 1.35rem !important; }
}

@media screen and (max-width: 480px) {
  .dash-grid { grid-template-columns: 1fr !important; }
  .hr-actions { grid-template-columns: 1fr !important; }
  .compare-bar { flex-direction: column; }
}

/* ============================================================
   الجدول المكدّس للجوال — يعمل في كل شاشات النظام
   على الشاشات الضيقة يتحوّل كل صف إلى بطاقة عمودية: عنوان العمود
   بجانب قيمته (من data-label الذي يزرعه assets/report-mobile.js من
   رأس الجدول) — فلا سحب أفقي ولا أعمدة خارج الشاشة.
   لإبقاء جدول بالسحب الأفقي عمداً أضف له class="tbl-flat".
   ============================================================ */
@media screen and (max-width: 640px) {
  .tbl-stack:not(.tbl-flat) { border: none; width: 100% !important; }
  .tbl-stack:not(.tbl-flat) thead { display: none; }
  .tbl-stack:not(.tbl-flat),
  .tbl-stack:not(.tbl-flat) tbody,
  .tbl-stack:not(.tbl-flat) tfoot,
  .tbl-stack:not(.tbl-flat) tr,
  .tbl-stack:not(.tbl-flat) td { display: block; width: 100%; }
  .tbl-stack:not(.tbl-flat) tbody tr {
    background: #fff; border: 1px solid #e8edf3; border-radius: 12px;
    padding: 5px 14px; margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  }
  .tbl-stack:not(.tbl-flat) td {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 8px 0 !important;
    border: none; border-bottom: 1px dashed #f1f5f9;
    text-align: end; white-space: normal !important;
  }
  .tbl-stack:not(.tbl-flat) td:last-child { border-bottom: none; }
  .tbl-stack:not(.tbl-flat) td::before {
    content: attr(data-label);
    color: #94a3b8; font-size: .73rem; font-weight: 700;
    flex-shrink: 0; text-align: start;
  }
  .tbl-stack:not(.tbl-flat) td[data-label=""]::before { content: none; }
  .tbl-stack:not(.tbl-flat) td:empty { display: none; }

  /* صف الإجمالي: بطاقة مميّزة */
  .tbl-stack:not(.tbl-flat) tfoot tr,
  .tbl-stack:not(.tbl-flat) tr.total-row,
  .tbl-stack:not(.tbl-flat) tr.final-row {
    background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 12px;
    padding: 5px 14px; margin-top: 2px;
  }
  .tbl-stack:not(.tbl-flat) tfoot td { border-top: none !important; }

  /* حاويات السحب لم تعد لازمة في الوضع المكدّس — **بشرط أن يكون
     جدولُها مكدَّساً فعلاً**. كانت القاعدةُ تُلغي السحبَ عن كلِّ حاوٍ
     على الجوّال، ومنها حاوياتٌ فيها جداولُ لم تتكدّس (لا تحمل
     `tbl-stack`): فتبقى عريضةً ويُلغى سحبُها فتُقصّ. قِيس ذلك على
     شاشتين عند ٣٩٠ بكسلاً: جدولٌ عرضُه ١٤١٢ بلا سحب.
     و`:has` يحصر الإلغاءَ في المكدَّس وحدَه؛ ومتصفّحٌ لا يعرفها
     يُسقط القاعدةَ فيبقى السحبُ — وهو الأسلم من الطرفين. */
  .rpt-table__scroll:has(> table.tbl-stack),
  .table__scroll:has(> table.tbl-stack),
  .table-responsive:has(> table.tbl-stack),
  .table-scroll-area:has(> table.tbl-stack) {
    overflow-x: visible !important; max-height: none !important;
  }
}

/* ============================================================
   14. أحجام أهداف اللمس (قياس فعلي على ١٣ شاشة)
   ------------------------------------------------------------
   المرجع ٤٠×٤٠ تقريباً — دون ذلك تُخطئ الإصبع فيتكرّر الضغط أو
   يقع على العنصر المجاور. القيَم !important لأن الشاشات تعرّف
   أحجاماً أصغر بمحدّدات أخصّ (‎.gridt input‎ مثلاً).
   ============================================================ */
@media screen and (max-width: 768px) {

  /* مربّعات الاختيار: كانت ٢٠×٢٠ في شبكة الورديات وبطاقات الأجهزة
     وكشف بدل المعيشة */
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
  }

  /* المساحة القابلة للّمس هي الملصق لا المربّع: يوسّعها بلا تكبير
     المربّع نفسه فيبقى شكله مألوفاً */
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]),
  .dev-chk, .qs-day, .da-check-wrap {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* خلية الشبكة الأسبوعية: الخانة كلّها هدف لا المربّع وحده */
  .gridt td { min-height: 44px; }
  .gridt input[type="checkbox"] { width: 22px !important; height: 22px !important; }

  /* أزرار الأيقونات (تعديل/حذف) — كانت ٣٣ عرضاً */
  .act, .btn-sm, .dv-del, .toggle-btn, .btn-row-del {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* ملخّص قابل للطيّ — كان ١٩ ارتفاعاً */
  summary {
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  /* القوائم المنسدلة: ٣٤ ارتفاعاً في بعض الشاشات */
  select, input[type="date"], input[type="time"] { min-height: 40px; }
}

/* ============================================================
   15. جداول الشاشات المتوسطة (٦٤٠–٩٠٠)
   ------------------------------------------------------------
   تحويل الجدول إلى بطاقات يبدأ عند ٦٤٠px، فبين ٦٤٠ و٩٠٠ يبقى
   جدولاً أعرض من الشاشة. الغلاف يُضاف بجافاسكربت (report-mobile)
   لأن CSS لا يستطيع تغليف عنصر؛ وهذه القاعدة تكمّله.
   ============================================================ */
/* ═══ الغلاف يحتوي عند **كلِّ** عرض ═══
   كان محبوساً في `max-width: 900px`، فوقها يُضاف الغلافُ بجافاسكربت
   ولا يُعطى `overflow` — فيُقصُّ الجدولُ بلا إمكان سحب. وهذا يقع في
   نطاقٍ ضيّقٍ بين ٩٠٠ ونحو ٩٩٠ بكسلاً، حيث لا القائمةُ الجانبية ثبتت
   فضيّقت البطاقة، ولا قواعدُ الجوّال عملت. قِيس على عرض ٩٠٥: جدولٌ
   عرضُه ١٤١٦ داخل حاوٍ ٨٤٧ و`overflow: visible` — يُقصُّ عمودان ولا
   يُسحب. وهو ما رآه المستخدم على جهازه.

   وحاوٍ غايتُه احتواءُ الفيضان لا يُشترَط بمدًى: إن لم يفض لم يظهر
   له شريطُ تمريرٍ أصلاً، فالقاعدةُ بلا ضررٍ حيث لا حاجة. */
.tbl-scroll-x,
.rpt-table__scroll, .table__scroll, .table-responsive, .table-scroll-area {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

@media screen and (max-width: 900px) {
  /* الجدول المكدّس يملأ العرض ولا يُفرَض عليه عرضُ محتواه: فرضُه
     يُبطل التكديس فيبقى جدولاً عريضاً يُسحب، وهو ما وُضع التكديس
     ليُغني عنه. القاعدة لغير المكدَّس وحده. */
  .tbl-scroll-x > table:not(.tbl-stack) { min-width: max-content; }
  .tbl-scroll-x > table.tbl-stack { min-width: 0; width: 100%; }
}
/* ============================================================
   دلالةُ السحب الأفقيّ
   ============================================================
   الجدولُ داخل `.tbl-scroll-x` يُمرَّر بالإصبع، لكن لا شيء يقول ذلك:
   فيرى المستخدمُ عموداً مقصوصاً عند الحافّة ويظنُّ التنسيقَ معطوباً
   — وقد وقع ذلك فعلاً في تقرير الصندوق.

   والحلُّ ظلٌّ عند الحافّة التي وراءها محتوًى مخفيّ، يزول من تلقائه
   حين يبلغ السحبُ طرفَه. وهو CSS خالصٌ بلا جافاسكربت: الطبقتان
   البيضاوان `local` تتحرّكان مع المحتوى فتغطّيان الظلَّ عند الطرف،
   والظلّان `scroll` يثبتان على الحافّتين.
   ============================================================ */
.tbl-scroll-x,
.rpt-table__scroll, .table__scroll, .table-responsive, .table-scroll-area {
  background:
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,   rgba(15,23,42,.14), rgba(15,23,42,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.14), rgba(15,23,42,0)) right center;
  background-repeat: no-repeat;
  background-size: 30px 100%, 30px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* الطباعةُ لا ظلَّ فيها ولا سحب. */
@media print {
  .tbl-scroll-x, .rpt-table__scroll, .table__scroll,
  .table-responsive, .table-scroll-area { background: none; }
}