/* ==========================================================================
   UXMOB_V1 — طبقة الجوال العامة (سباق M2)
   تُحمَّل بعد الثيم خلف علم ux_mobile — صفر تعديل على النواة أو الثيم.
   المبادئ: لا تمرير أفقي للصفحة أبدًا، أهداف لمس كافية، خط إدخال 16px،
   خلوص فوق الشريط السفلي، والعناصر العائمة لا تحجب التنقل.
   ========================================================================== */

@media (max-width: 767px) {

  /* ── 1) العناصر العائمة: فوق الشريط السفلي لا فوق بعضها ─────────────── */

  /* زر الوضع الداكن كان يجلس فوق شريط التنقل السفلي نفسه (y=758 والشريط يبدأ 733) */
  #oplx-theme-toggle {
    bottom: calc(90px + env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    padding: 5px 11px !important;
    font-size: 11px !important;
    opacity: .88;
  }

  /* روبوت المساعد: أصغر، وفي عمود واحد فوق زر الداكن */
  #ai-assistant-widget {
    top: auto !important;
    bottom: calc(138px + env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    transform: scale(.82);
    transform-origin: bottom left;
  }

  /* ── 2) خلوص المحتوى: لا شيء يختفي خلف الشريط السفلي ──────────────── */
  #page-content,
  .page-wrapper {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  /* ── 3) لوحة التحكم: التذييل المطلق يعود لتدفّق الصفحة (كان يطبع
         «آخر 12 شهرًا» فوق أرقام الإجمالي في ودجت الفواتير) ───────────── */
  .widget-footer.position-absolute {
    position: static !important;
    padding: 0 12px 12px !important;
  }
  .dashboard-icon-widget .widget-details,
  .clock-in-out-card .widget-details {
    overflow-wrap: anywhere;
  }
  /* بطاقات الأيقونات: التفاصيل كانت position:absolute فلا ترفع ارتفاع البطاقة
     ونصّها يفيض خارجها (بطاقة 84px لمحتوى 99px). تعود للتدفق فتتمدد البطاقة. */
  .dashboard-icon-widget,
  .dashboard-icon-widget .card-body {
    height: auto !important;
    min-height: 0 !important;
  }
  .dashboard-icon-widget .widget-details {
    position: static !important;
    overflow: hidden; /* كتلة مستقلة بجوار الأيقونة العائمة */
    inset: auto !important;
  }

  /* ── 4) الجداول الكبيرة: تتمرر داخل حاويتها هي — الصفحة لا تتمرر أفقيًا،
         والأعمدة لا تنسحق لأعمدة بعرض حرف ─────────────────────────────── */
  /* UI_THEME_S6: opt-ui renders phone tables as card lists (Theme_UI data-label), so the horizontal-scroll
     strategy below applies to the other themes only — under opt-ui a 560px min-width would widen the page */
  body:not(.theme-opt-ui) .dataTables_wrapper,
  body:not(.theme-opt-ui) .table-responsive {
    overflow-x: auto !important;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.theme-opt-ui) table.dataTable {
    min-width: 560px;
  }
  body:not(.theme-opt-ui) table.dataTable td,
  body:not(.theme-opt-ui) table.dataTable th {
    padding: 8px 10px !important;
    white-space: nowrap;
  }
  /* عمود العنوان/الاسم يلتف بدل قصّ كل شيء */
  body:not(.theme-opt-ui) table.dataTable td:first-child,
  body:not(.theme-opt-ui) table.dataTable td:nth-child(2) {
    white-space: normal;
    min-width: 140px;
  }

  /* ── 5) المودالات: انتقلت ملكيتها إلى الثيم opt-ui (03-components.css) — UI_GEO_P0 ── */

  /* ── 6) النماذج: لا تكبير قسري في iOS + أهداف لمس ────────────────────── */
  .form-control,
  input.form-control,
  select.form-control,
  textarea.form-control,
  .select2-container--default .select2-selection--single {
    font-size: 16px !important;
    min-height: 42px;
  }
  .select2-container { max-width: 100% !important; }
  .btn { min-height: 40px; }
  .dropdown-menu { max-width: calc(100vw - 24px); }

  /* ── 7) التبويبات: صفّ واحد يتمرر بدل الالتفاف الفوضوي ──────────────── */
  .nav-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs > li > a,
  .nav-tabs .nav-link { white-space: nowrap; }

  /* ── 8) تكثيف الحشوات العامة قليلًا ─────────────────────────────────── */
  .card-body { padding: 14px !important; }
  .page-title { flex-wrap: wrap; gap: 6px; }
}

/* ══ صفحاتنا (Ops_UX) — إصلاح فوري لانهيار «متابعة الصفقات» ريثما يأتي
      سباق M3 بمعالجتها الكاملة: الصف يلتف والاسم يأخذ سطرًا كاملًا ═══════ */
@media (max-width: 480px) {
  .uxjr .jr-row,
  .uxjr [class*="row"] { flex-wrap: wrap; }
  .uxjr .who,
  .uxjr a[href*="ops_ux/journey"] {
    flex: 1 1 100% !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: normal;
  }
}

/* ==========================================================================
   UXMOB_V2 — سباق M4: لافتة التثبيت بهوية النظام + طيّ معلومات المهمة
   ========================================================================== */

/* لافتة «ثبّت التطبيق»: من تحذير برتقالي فجّ إلى بطاقة هوية هادئة */
#install-pwa-button.alert {
  background: var(--ui-primary-soft, #0F4C810d) !important;
  border: 1px solid var(--ui-primary-soft, #0F4C8138) !important;
  color: var(--ui-primary, #0F4C81) !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}
#install-pwa-button a,
#install-pwa-button #install-pwa {
  color: var(--ui-primary, #0F4C81) !important;
  font-weight: 700;
}
#install-pwa-button .btn-close { filter: none; opacity: .6; }

@media (max-width: 991px) {
  /* صفحة المهمة: الحوار والاستوديو أولًا — المعلومات تحتهما خلف شريط طيّ
     (الصف متداخل في عمق البنية — لا نشترط البنوة المباشرة) */
  .task-view-modal-body .row > .col-lg-4.order-lg-last { order: 2; }

  .uxm-fold-bar {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 46px;
    border: 1px solid var(--ui-primary-soft, #0F4C8130);
    background: var(--ui-primary-soft, #0F4C810d);
    color: var(--ui-primary, #0F4C81);
    font-weight: 700;
    font-size: 13.5px;
    font-family: inherit;
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
  }
  .uxm-ar { transition: transform .15s ease; }
  .col-lg-4.order-lg-last.uxm-open .uxm-ar { transform: rotate(90deg); }
  .col-lg-4.order-lg-last .uxm-fold-body { display: none; margin-top: 10px; }
  .col-lg-4.order-lg-last.uxm-open .uxm-fold-body { display: block; }
}

/* على المكتب: لو رُكّب الطيّ ثم اتسعت الشاشة — الشريط يختفي والمحتوى يظهر */
@media (min-width: 992px) {
  .uxm-fold-bar { display: none !important; }
  .uxm-fold-body { display: block !important; }
}

/* ==========================================================================
   UXTHEME_GUARD_V1 — شاشات Ops_UX جزر فاتحة بهوية plex-light في أي ثيم.
   السبب: الثيم الداكن القديم (tech-blue/executive-dark) يصبغ .card والحقول
   داكنة عالميًا بينما نصوص شاشاتنا مصممة للفاتح — فينكسر التباين في الاتجاهين
   (نص داكن على بطاقة داكنة، وحقول داكنة داخل ألواح بيضاء).
   ========================================================================== */

/* خلفية صفحاتنا نفسها فاتحة — فتكتمل الجزيرة (العناوين خارج البطاقات تُقرأ) */
/* body[class] يرفع التخصيص فوق قاعدة الثيم الداكن ثنائية الأصناف (كُشفت بفحص cssRules) */
html body[class] #page-content.uxpl, html body[class] #page-content.uxday, html body[class] #page-content.uxjr,
html body[class] #page-content.uxjd, html body[class] #page-content.uxhq, html body[class] #page-content.uxdl {
  background: var(--ui-primary-soft, #F0F3FA) !important;
  border-radius: 14px;
  padding-top: 16px;
  padding-inline: 16px;
}

/* البطاقات والنصوص داخل نطاقاتنا: فاتحة دائمًا */
html body[class] #page-content.uxpl .card, html body[class] #page-content.uxday .card, html body[class] #page-content.uxjr .card, html body[class] #page-content.uxjd .card, html body[class] #page-content.uxhq .card, html body[class] #page-content.uxdl .card,
html body[class] #page-content.uxpl .form-card {
  background: var(--ui-surface, #FFFFFF) !important;
  color: var(--ui-text, #16283E) !important;
  border-color: var(--ui-border, #E4E8F2) !important;
  box-shadow: 0 1px 2px rgba(22,40,62,.05) !important;
  backdrop-filter: none !important;
}
html body[class] #page-content.uxpl table.pl th { background: var(--ui-primary-soft, #F6F8FC) !important; color: var(--ui-text-2, #64748B) !important; }
html body[class] #page-content.uxpl table.pl td { color: var(--ui-text, #16283E) !important; }
html body[class] #page-content.uxpl, html body[class] #page-content.uxday, html body[class] #page-content.uxjr, html body[class] #page-content.uxjd, html body[class] #page-content.uxhq, html body[class] #page-content.uxdl { color: var(--ui-text, #16283E); }
html body[class] #page-content.uxpl h1, html body[class] #page-content.uxday h1, html body[class] #page-content.uxjr h1, html body[class] #page-content.uxjd h1, html body[class] #page-content.uxhq h1, html body[class] #page-content.uxdl h1 { color: var(--ui-text, #16283E) !important; }

/* الحقول داخل نطاقاتنا وداخل نافذة القوالب: فاتحة بنص داكن مهما فعل الثيم */
html body[class] #page-content.uxpl input, html body[class] #page-content.uxpl select, html body[class] #page-content.uxpl textarea,
html body[class] #page-content.uxday input, html body[class] #page-content.uxdl input,
#uxt-title, #uxt-client, #uxt-due, .uxt-bf,
#f-client-search {
  background: var(--ui-surface, #FFFFFF) !important;
  color: var(--ui-text, #16283E) !important;
  border-color: var(--ui-primary-soft, #D3DAE8) !important;
}
#uxt-sug { background: var(--ui-surface, #FFFFFF) !important; color: var(--ui-text, #16283E) !important; }
#uxt-sug * { color: var(--ui-text, #16283E); }

/* روابط شاشاتنا بلون الهوية لا أزرق الثيم القديم الصارخ */
html body[class] #page-content.uxday a, html body[class] #page-content.uxjr a, html body[class] #page-content.uxjd a, html body[class] #page-content.uxhq a, html body[class] #page-content.uxdl a, html body[class] #page-content.uxpl a { color: var(--ui-primary, #0F4C81) !important; }
html body[class] #page-content.uxday .ud-open { color: var(--ui-primary, #0F4C81) !important; }

/* منبثقة المنصات وبطاقة الصلاحيات: بيضاء دائمًا */
html body[class] #page-content.uxpl .pp-pop { background: var(--ui-surface, #FFFFFF) !important; color: var(--ui-text, #16283E) !important; }
html body[class] #page-content.uxpl .perm-list { background: var(--ui-surface, #FFFFFF) !important; }
html body[class] #page-content.uxpl .perm-list span { color: var(--ui-text, #16283E); }


/* التسميات والنصوص الثانوية داخل الجزيرة (الثيم الداكن كان يجعلها فاتحة على أبيض = مختفية) */
html body[class] #page-content.uxpl label, html body[class] #page-content.uxpl .fg label,
html body[class] #page-content.uxday label, html body[class] #page-content.uxdl label {
  color: var(--ui-text-2, #64748B) !important;
}
html body[class] #page-content.uxpl .pl-head .sub, html body[class] #page-content.uxday .ud-date,
html body[class] #page-content.uxjr .jr-head .sub, html body[class] #page-content.uxjd .jd-head .sub,
html body[class] #page-content.uxhq .hq-head .sub, html body[class] #page-content.uxdl .dl-head .sub {
  color: var(--ui-text-2, #64748B) !important;
}
html body[class] #page-content.uxpl h1, html body[class] #page-content.uxday h1, html body[class] #page-content.uxjr h1,
html body[class] #page-content.uxjd h1, html body[class] #page-content.uxhq h1, html body[class] #page-content.uxdl h1 {
  color: var(--ui-text, #16283E) !important;
}

/* بطاقات الإنذار: خلفيات صلبة فاتحة (كانت شفافة فتسودّ فوق الثيم الداكن) */
html body[class] #page-content.uxpl .al.crit { background: var(--ui-danger-soft, #FBEAE8) !important; }
html body[class] #page-content.uxpl .al.warn { background: var(--ui-warning-soft, #FBF1DE) !important; }
html body[class] #page-content.uxpl .al.ok { background: var(--ui-surface-2, #E7F5EE) !important; }

/* أزرار الرأس والتبويبات داخل الجزيرة */
html body[class] #page-content.uxpl .tabs button { background: var(--ui-surface, #FFFFFF) !important; color: var(--ui-text-2, #64748B) !important; }
html body[class] #page-content.uxpl .tabs button.on { background: var(--ui-primary-soft, #EAF1F8) !important; color: var(--ui-primary, #0F4C81) !important; }
html body[class] #page-content.uxpl .act { background: var(--ui-surface, #FFFFFF) !important; }

/* ══ UXTPL — استجابة نافذة القوالب لكل الأجهزة ═══════════════════════════ */
#uxt-ov > div { max-height: 90dvh; overflow-y: auto; }
@media (max-width: 640px) {
  #uxt-ov { padding: 10px 10px 0 !important; align-items: flex-start !important; }
  #uxt-ov > div { max-width: 100% !important; border-radius: 14px !important; }
  #uxt-grid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)) !important; gap: 6px !important; padding: 12px 14px 4px !important; }
  .uxt-fgrid, .uxt-bgrid { grid-template-columns: 1fr !important; }   /* التسمية فوق الحقل */
  .uxt-fgrid label, .uxt-bgrid label { margin-bottom: -4px; }
  #uxt-title, #uxt-client, #uxt-due, .uxt-bf { min-height: 42px; font-size: 16px !important; }
  #uxt-go { min-height: 44px; width: 100%; }
}
#uxt-ov label { color: var(--ui-text-2, #64748B) !important; }
#uxt-ov b { color: var(--ui-text, #16283E) !important; }


/* صفوف جدول الباقات: الثيم الداكن كان يصبغ tr/td */
html body[class] #page-content.uxpl table.pl tr,
html body[class] #page-content.uxpl table.pl tbody tr {
  background: var(--ui-surface, #FFFFFF) !important;
}
html body[class] #page-content.uxpl table.pl td {
  background: var(--ui-surface, #FFFFFF) !important;
  color: var(--ui-text, #16283E) !important;
}
html body[class] #page-content.uxpl table.pl tbody tr:hover td {
  background: var(--ui-primary-soft, #F6F8FC) !important;
}
/* صفوف يومي وسجل اليوم والجداول الشقيقة داخل الجزيرة */
html body[class] #page-content.uxday .ud-row,
html body[class] #page-content.uxdl .urow,
html body[class] #page-content.uxjr .jrow,
html body[class] #page-content.uxjd .tl-row,
html body[class] #page-content.uxhq table.hq td,
html body[class] #page-content.uxhq table.hq th {
  background: transparent !important;
  color: var(--ui-text, #16283E) !important;
}


/* ==========================================================================
   UXMOB_V3 (2026-09-05، تدقيق UI/UX) — المودالات والإعدادات على الشاشات الصغيرة
   ========================================================================== */
@media (max-width: 767px) {
  /* المودال كان أطول من الشاشة و.modal بلا تمرير فزر «حفظ» يُقصّ (dialogBottom 838 > 812).
     الحل: المودال كله يتمرر، والرأس والتذييل لاصقان — ولا max-height على الجسم فلا تُقصّ القوائم المنسدلة. */
  /* UI_GEO_P0: كتلة المودال حُذفت — مالكها الوحيد الثيم opt-ui (03-components.css)؛ كانت تفرض overflow:visible
     على جسم يحمل ارتفاعًا مضمّنًا من نواة RISE فينسكب المحتوى ويسافر التذييل اللاصق. */
}

@media (max-width: 991px) {
  /* الإعدادات: قائمة الأقسام كانت عمودًا بطول 940px قبل أي محتوى (55px لكل بند)،
     وعلى 768px تسرق عرض النموذج فتلتف التسميات 4 أسطر. تصير شريط أقسام أفقيًا يتمرر. */
  .settings-page #page-content > .row > .col-sm-3.col-lg-2,
  .settings-page #page-content > .row > .col-sm-9.col-lg-10 {
    flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
  }
  .settings-page .nav-tabs.vertical.settings {
    display: flex !important; flex-wrap: nowrap; align-items: center; overflow-x: auto;
    gap: 6px; padding: 4px 2px 10px; margin-bottom: 8px; border: 0 !important; scrollbar-width: thin;
  }
  .settings-page .nav-tabs.vertical.settings .settings-anchor {
    flex: none; font-size: 12px; color: var(--ui-text-2, #64748B); padding: 0 6px; white-space: nowrap; cursor: default;
  }
  .settings-page .nav-tabs.vertical.settings .collapse { display: flex !important; flex: none; height: auto !important; }
  .settings-page .nav-tabs.vertical.settings .list-group { display: flex; flex-direction: row; gap: 6px; margin: 0; }
  .settings-page .nav-tabs.vertical.settings .list-group-item {
    padding: 8px 12px !important; white-space: nowrap; border-radius: 999px !important;
    border: 1px solid var(--ui-primary-soft, #D3DAE8) !important; font-size: 13px; line-height: 1.4; background: var(--ui-surface, #FFFFFF);
  }
  .settings-page .nav-tabs.vertical.settings .list-group-item.active {
    background: var(--ui-primary, #0F4C81) !important; color: var(--ui-on-solid, #FFFFFF) !important; border-color: var(--ui-primary, #0F4C81) !important;
  }
  /* تسميات النماذج فوق الحقول بدل عمود ضيق */
  .settings-page .form-group > .row > label[class*="col-md-"],
  .settings-page .form-group > .row > [class*="col-md-"] { flex: 0 0 100%; max-width: 100%; }
  .settings-page .form-group > .row > label[class*="col-md-"] { margin-bottom: 6px; }
}

/* UXMOB_V3b — الحالة الفارغة على الجوال: الجدول الفارغ لا يحتاج min-width 560 (كان يمرّر أفقيًا
   ويُزيح الرسالة عن مركز الشاشة)، والتلميح يلتف بدل القصّ */
@media (max-width: 767px) {
  table.dataTable:has(td.dataTables_empty) { min-width: 0 !important; width: 100% !important; }
  table.dataTable td.dataTables_empty { white-space: normal !important; }
  .uxp-empty { max-width: 100%; text-align: center; }
  .uxp-empty .uxp-empty-s { padding: 0 8px; }
}