/* =====================================================================
   GO DESIGN — طبقة تحسين الموبايل المشتركة (تتحمّل في كل الصفحات)
   - تثبّت لون خلفية الصفحة نفسها (html) عشان مايظهرش شريط أبيض فوق/تحت
   - بتحترم المناطق الآمنة (النوتش وشريط الهوم) على الأيفون والأندرويد
   - بتستخدم dvh بدل vh عشان الارتفاع يتظبط مع شريط المتصفح المتحرك
   ===================================================================== */
:root{
  color-scheme: dark;
  --app-bg: #0f2444;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* 1) خلفية الصفحة الأساسية: أي منطقة بره الـ body (النوتش، الهوم، الـ overscroll) تفضل كحلي */
html{
  background-color: var(--app-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* background-attachment:fixed بيبوّظ الرسم على iOS ويسيب شرايط بيضا، فبنلغيه */
html body{
  background-attachment: scroll;
  min-height: 100vh;
  min-height: 100dvh;
}
img, video, canvas, svg{ max-width: 100%; }

/* 2) قفل تمرير الصفحة اللي ورا أي نافذة منبثقة مفتوحة */
html:has(.modal-overlay:not(.hidden)),
html:has(.fin-ov:not([hidden])),
html:has(.lightbox.open),
html:has(.cert-modal.open),
html:has(.doc-viewer.open){
  overflow: hidden;
}
.modal-overlay, .fin-ov, .order-modal, .fin-modal, .tp-sheet, .doc-viewer, .cert-modal-box{
  overscroll-behavior: contain;
}

/* 3) الموقع الرئيسي: الشريط الذهبي والهيدر والقائمة مع النوتش */
.promo-bar{
  height: calc(48px + var(--sat));
  padding-top: var(--sat);
}
header{ top: calc(48px + var(--sat)); }
.mobile-panel{
  top: calc(126px + var(--sat));
  inset: calc(126px + var(--sat)) 0 0 0;
  padding-bottom: calc(24px + var(--sab));
  overflow-y: auto;
}
html{ scroll-padding-top: calc(126px + var(--sat)); }
.hero{ min-height: 100vh; min-height: 100svh; }
.doc-viewer{ height: 100vh; height: 100dvh; padding-bottom: var(--sab); }
.lightbox{ padding: calc(70px + var(--sat)) 20px calc(40px + var(--sab)); }
.lightbox-stage{ max-height: 78vh; max-height: 78dvh; }
.cert-modal{ padding: calc(80px + var(--sat)) 16px calc(40px + var(--sab)); }

/* 4) النوافذ المنبثقة على الموبايل: Bottom sheet كاملة العرض ومش بتدخل تحت شريط الحالة */
@media (max-width: 700px){
  .modal-overlay, .fin-ov, .fin-ov.fin-det{ padding: 0; align-items: flex-end; }
  .order-modal, .order-modal.om-v2, .fin-modal, .tp-sheet{
    max-width: 100%;
    max-height: calc(100vh - var(--sat) - 12px);
    max-height: calc(100dvh - var(--sat) - 12px);
    -webkit-overflow-scrolling: touch;
  }
  /* هيدر النافذة ثابت بخلفية سادة (مفيش شفافية تبيّن اللي وراه) */
  .order-modal-head{ background: #172f56; }
  .order-modal-body{ padding-bottom: calc(20px + var(--sab)); }
  .om-foot{ padding-bottom: calc(12px + var(--sab)); }
  /* حقول الإدخال 16px عشان iOS مايكبّرش الصفحة لما تضغط عليها */
  input, select, textarea{ font-size: 16px; }
}

/* 5) أزرار وعناصر لمس مريحة */
@media (hover: none) and (pointer: coarse){
  button, [role="button"], a.btn, .btn{ touch-action: manipulation; }
}

/* 6) لوحة التحكم على الموبايل: شريط الأدوات والفلاتر منظّم في شبكة بدل ما الأزرار تتبعثر */
@media (max-width: 700px){
  .section-head .section-tools{
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%;
  }
  .section-head .section-tools > *{ min-width: 0; width: 100%; margin: 0; }
  /* البحث على عرض الصف كله */
  .section-head .section-tools > .search-input{ grid-column: 1 / -1; }
  /* العنصر الفردي الأخير (فلتر أو زر) ياخد الصف كله */
  .section-head .section-tools > .filter-select:last-child:nth-child(odd),
  .section-head .section-tools > .export-btn:last-child:nth-child(odd),
  .section-head .section-tools > #orderMonthFilter{ grid-column: 1 / -1; }
  .section-head .section-tools > .export-btn{ text-align: center; padding: 12px 8px; font-size: 14px; flex: none; }
  /* فلاتر الحالة: "الكل" صف كامل والباقي صفين متساويين */
  div.status-pills{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .status-pills .status-pill{ width: 100%; text-align: center; justify-content: center; padding: 11px 8px; }
  .status-pills .status-pill:first-child{ grid-column: 1 / -1; }
}

/* 7) النوافذ المنبثقة (سفير / عميل / تيم / متعاقد): ثابتة من غير أجزاء جانبية
   السبب القديم: الجدول جواها له عرض أدنى 640px أعرض من الموبايل، وكلاس .wrap العام كان بيحرّك الخلايا */
@media (max-width: 700px){
  .tp-sheet, .fin-modal{
    box-sizing: border-box; max-width: 100%; overflow-x: hidden;
    touch-action: pan-y; animation: none;
  }
  .tp-sheet *, .fin-modal *{ box-sizing: border-box; }
  .tp-sheet table, .fin-modal table{ min-width: 0 !important; width: 100%; }
  .tp-sheet .tp-pane{ overflow: visible; }
  .tp-sheet .tp-tabs{ touch-action: pan-x pan-y; }
}
.tp-sheet .wrap, .fin-modal .wrap{ animation: none !important; margin: 0; max-width: none; }
.fin-ov{ touch-action: none; }

/* 8) جداول لوحة التحكم المتحوّلة لكروت على الموبايل: عرض الصفحة بالظبط، ومحتوى كل خلية قطعة واحدة */
@media (max-width: 700px){
  table.fin-table{ min-width: 0 !important; width: 100% !important; }
  .fin-table td .cv{ min-width: 0; text-align: left; overflow-wrap: anywhere; }
  .fin-table td.wrap{ flex-wrap: nowrap !important; }
  .fin-table td .fin-act{ width: auto; }
  #sec-ambpay, #sec-team, #sec-contracts{ max-width: 100%; overflow-x: hidden; }
  #sec-ambpay .table-wrap, #sec-team .table-wrap, #sec-contracts .table-wrap,
  #sec-ambpay details.tm-log, #sec-team details.tm-log, #sec-contracts details.tm-log{ max-width: 100%; }
}

@media (max-width: 700px){
  /* كروت الأرقام: كارتين جنب بعض بدل كارت في كل صف */
  .fin-grid, .fin-grid.ct-grid4{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fin-grid .fin-card:last-child:nth-child(odd){ grid-column: 1 / -1; }
  .fin-grid .fin-card{ padding: 12px 14px; min-width: 0; }
  .fin-grid .fin-card b{ font-size: 20px; overflow-wrap: anywhere; line-height: 1.5; }
  .fin-grid .fin-card .l{ font-size: 12.5px; }
  .fin-grid .fin-card small{ font-size: 11.5px; line-height: 1.6; }
  /* صف الإجمالي */
  .fin-table tr.tot td{ background: transparent !important; }
  .fin-table tr.tot td:first-child{ justify-content: flex-start; border-top: 0 !important; margin-top: 0; padding-top: 7px !important; font-weight: 800; color: var(--gold-bright); }
}

@media (max-width: 700px){
  .fin-table td{ background: transparent !important; }
  /* نافذة الطلب برضو ثابتة من غير سحب جانبي */
  .order-modal, .order-modal-body{ max-width: 100%; overflow-x: hidden; box-sizing: border-box; }
  .order-modal{ touch-action: pan-y; }
  .order-modal img, .order-modal table{ max-width: 100%; }
}