/* ========================================================= raed-mobile.css — طبقة الجوال واللوحي تُحمَّل آخر بعد كل الأنماط، وتعالج ما يكسر الصفحات على الشاشات الصغيرة: الطفح الأفقي · الجداول العريضة · أهداف اللمس · النصّ الصغير · مكوّناتنا الثابتة. لا قيمة لون حرفية — رموز الهوية فقط. ========================================================= */ /* ══ 1. لا تمرير أفقي. أبداً ═══════════════════════════════ السبب الأول لانخراب الصفحات: عنصر واحد أعرض من الشاشة يجرّ المستند كله فيصير كل شيء مزاحاً. */ @media (max-width: 1099px) { html, body { max-width: 100%; overflow-x: hidden; } /* الوسائط والحقول لا تتجاوز حاويتها */ img, video, canvas, svg, iframe, embed, object { max-width: 100%; height: auto; } input, select, textarea, .search-input, .mini-search { max-width: 100%; box-sizing: border-box; } /* عرض ثابت بالبكسل على الحقول = طفح مؤكّد على 390px */ input[style*="width"], select[style*="width"], textarea[style*="width"] { max-width: 100% !important; } /* الشبكات الثابتة تنهار لعمود واحد */ [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } [style*="min-width:"][style*="px"]:not(input):not(select):not(button) { min-width: 0 !important; } /* كلمات طويلة (روابط · معرّفات) تكسر السطر بدل أن تمدّه */ body { overflow-wrap: break-word; word-break: normal; } } /* ══ 2. الجداول: تمرير داخل حاويتها لا داخل الصفحة ═══════ جدول 1349px داخل شاشة 390px يكسر التخطيط كله. نجعله يمرّر أفقياً داخل صندوقه، فيبقى المستند ثابتاً. */ @media (max-width: 1099px) { .raed-tablewrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .raed-tablewrap > table { min-width: max-content; } .table-responsive, .table-wrap, .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* رأس الجدول اللاصق يُربك التمرير الأفقي على اللمس */ table thead th { position: static !important; } } /* ══ 3. أهداف اللمس ═══════════════════════════════════════ إرشاد اللمس: 44×44 كحدّ أدنى. نطبّقه على الأجهزة اللمسية وحدها حتى لا نُضخّم واجهة الفأرة. */ /* الشرط بالعرض إلى جانب pointer: اللوحي بعرض 1024 لمسيّ فعلاً، والاعتماد على pointer وحده تركه بأهداف صغيرة. */ @media (pointer: coarse), (max-width: 1099px) { button, [role="button"], [onclick]:not(div):not(span):not(td):not(tr), input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"], select, .action-btn, .tri-chip, .chip, .pill, .hqs-pill, .toolbar-btn, .raed-tool, .raed-nav-link, .raed-af-chip, .btn-action, .btn, .icon-btn, .modal-close { min-height: 40px; min-width: 40px; } /* أزرار الأيقونات داخل صفوف الجداول: كانت 36px استثناءً مقصوداً لكن هنا تعيش أغلب إجراءات الصفوف على الجوال. نرفعها للقاعدة العامة ونعوّض الارتفاع بحشوة الخليّة. الفاصل بينها أهمّ من الحجم نفسه: أزرار متلاصقة = لمسة على الزرّ الخطأ. */ td .action-btn, td button, td .btn-action { min-height: 40px; min-width: 40px; padding: 4px 6px !important; } td .action-btn + .action-btn, td button + button, td .btn-action + .btn-action { margin-inline-start: 6px; } td { padding-block: 4px; } /* مربّعات الاختيار داخل الجداول: مساحة لمس بلا تضخيم بصري */ input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; padding: 10px; background-clip: content-box; } a:not(.raed-nav-link):not([class*="btn"]) { padding-block: 2px; } } /* ══ 4. الطباعة: حدّ أدنى مقروء ═══════════════════════════ */ @media (max-width: 1099px) { body { font-size: max(1rem, 15px); } small, .small, .caption, .hint, .muted, [style*="font-size:0.6"], [style*="font-size:0.7"] { font-size: max(0.8125rem, 13px) !important; } h1 { font-size: clamp(1.5rem, 6vw, 2rem); } h2 { font-size: clamp(1.25rem, 5vw, 1.6rem); } h3 { font-size: clamp(1.1rem, 4.4vw, 1.35rem); } } /* ══ 5. مكوّناتنا على الشاشات الصغيرة ═════════════════════ */ @media (max-width: 1099px) { /* زرّ التنقّل لا يغطّي شعار الصفحة أو أزرارها */ .raed-side-toggle { inset-block-start: auto; inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); inset-inline-start: var(--space-4); z-index: 96; box-shadow: var(--shadow-md); } /* شريط العمل يتنفّس عمودياً بدل أن يُزاحم */ .raed-workbar { gap: var(--space-2); padding: var(--space-3) var(--space-3); } .raed-workbar .search-box-container { flex: 1 1 100%; order: -1; } .raed-workbar-actions { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; } /* شريط الحصيلة يمرّر أفقياً بدل أن يلتفّ لأربعة أسطر */ .raed-stats-strip { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .raed-stats-strip::-webkit-scrollbar { display: none; } .raed-stats-strip .stat-card { flex: 0 0 auto; } .raed-kpis { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .raed-kpis::-webkit-scrollbar { display: none; } /* الأدراج بعرض الشاشة كاملاً على الجوال */ .raed-drawer { width: min(100vw, 420px); } /* شريط محطات المقابلات */ .raed-station-bar { padding-inline: var(--space-3); } } /* ══ 6. النوافذ المنبثقة على الجوال ═══════════════════════ نافذة مصمَّمة لسطح المكتب تصير أطول من الشاشة ولا تُمرَّر. */ @media (max-width: 1099px) { .modal-overlay, .exp-overlay, [id$="Modal"][style*="position:fixed"], #advancedFiltersModal { padding: var(--space-2) !important; align-items: flex-start !important; } .modal-box, .modal-content, #advancedFiltersModal > div { width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - var(--space-8)) !important; margin: var(--space-3) 0 !important; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* أزرار النافذة السفلية تبقى في المتناول */ .modal-footer, #advancedFiltersModal [style*="border-top"] { position: sticky; inset-block-end: 0; background: var(--surface); z-index: 2; } } /* ══ 7. الجوال الضيّق ═════════════════════════════════════ */ @media (max-width: 480px) { .raed-workbar, .raed-stats-strip, .raed-active-filters, .raed-bulkbar { padding-inline: var(--space-3); } .raed-stats-strip .stat-card { padding: 8px 12px !important; } .raed-stats-strip .stat-card .value { font-size: 1.25rem !important; } /* الهيدر: الشعار والأزرار تلتفّ بدل أن تُقصّ */ header, .main-header { height: auto !important; min-height: 56px; } .header-content { flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-2); } } /* ══ 8. احترام تقليل الحركة والمساحة الآمنة ══════════════ */ @supports (padding: env(safe-area-inset-bottom)) { @media (max-width: 1099px) { body { padding-inline: 0; } .raed-station-bar { padding-block-start: max(var(--space-2), env(safe-area-inset-top, 0px)); } } } /* ══ 9. حدّ أدنى مقروء للنصّ الصغير ═══════════════════════ 29 مُحدِّداً في أوراق المقابلات و style.css تُعلن أحجاماً بين 0.55rem و11px. على شاشة 390px هذا غير مقروء عملياً. نرفعها إلى 12px على اللمس والشاشات الصغيرة دون المساس بسطح المكتب — والقائمة مستخرَجة من الملفات لا مخترعة. */ @media (max-width: 1099px) { #counterTypeBadge, .admin-sidebar .group-label, .admin-sidebar .group-label i, .admin-sidebar .tab-btn span[id$="CountBadge"], .admin-sidebar a.tab-btn::after, .auto-refresh-badge, .btn-action, .cand-status i, .check-item .check-icon, .data-table, .filter-count, .group-label, .info-cell .info-label, .last-update, .logout-btn, .no-photo-text, .optional-badge, .q-badge, .q-badge i, .qi-code-pill, .qi-status-tag, .queue-table, .required-badge, .status-badge, .step-dot small, .sv-field label, .sv-q-num, .sync-badge, .tb-stat .stat-label { font-size: max(0.75rem, 12px) !important; } /* أحجام مضمَّنة في سمة style — لا يطالها مُحدِّد صنف */ [style*="font-size:10px"], [style*="font-size: 10px"], [style*="font-size:11px"], [style*="font-size: 11px"], [style*="font-size:0.6"], [style*="font-size: 0.6"], [style*="font-size:0.7"], [style*="font-size: 0.7"] { font-size: max(0.75rem, 12px) !important; } } /* ══ 10. أهداف لمس بعينها ═════════════════════════════════ */ @media (pointer: coarse), (max-width: 1099px) { /* التقويم: رقم اليوم 14×32 — الإصلاح أن تكون خليّة اليوم هي الهدف، لا أن نُضخّم الرقم فينهار تخطيط الشبكة. */ .fc-daygrid-day-top { justify-content: center; } .fc-daygrid-day-number { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 38px; padding: 0 !important; border-radius: var(--radius-full); } .fc-daygrid-day-frame { min-height: 44px; } .fc-col-header-cell-cushion { padding: 8px 4px; } /* روابط نصّية رفيعة — مساحة لمس رأسية كافية (الهدف 40px) */ .site-footer a, .site-footer__nav a, footer a, nav a:not(.raed-nav-link), p > a, li > a, .forgot-pass-link, .forgot-password, .back-link, .back-btn, [class*="back-"] { display: inline-block; min-height: 40px; line-height: 40px; padding-inline: 4px; } /* شارات ومقتطفات نصّية صغيرة */ .raed-today-line .kpi-pill { min-height: 32px; align-items: center; } .sel-badge, .code, code, kbd, samp, .badge-sm, .mini { font-size: max(0.75rem, 12px) !important; } } /* ══ 11. ما يظهر بالمرور فقط ══════════════════════════════ على اللمس لا وجود لـ:hover — فعنصر يُكشف بالمرور وحده يصير غير قابل للوصول نهائياً. رصد التدقيق أربعة، منها زرّ «فقط» في نافذة الفلاتر المتقدمة. نُظهرها دائماً على اللمس. */ @media (hover: none), (pointer: coarse) { .advfm-only-btn, .drag-hint, .thumb-overlay, .advfm-row .advfm-only-btn { opacity: 1 !important; visibility: visible !important; } .thumb-overlay { display: flex !important; } } /* ══ 12. نوافذ وشرائط بعينها ═══════════════════════════════ مواضع رصدها التدقيق واحدة واحدة. الإصلاح هنا لا في الصفحات حتى يبقى سطح المكتب كما هو. حيث كان الأسلوب المنافس داخل استُعمل !important لأن التخصيص متعادل والترتيب يخسر. */ @media (max-width: 1099px) { /* تبويبات المرفقات (data_entry): استعلام الصفحة يفرض nowrap بلا تمرير، فالتبويبات تُهرَس. شريط منزلق بدل الهرس. */ .files-tabs { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; } .files-tabs::-webkit-scrollbar { display: none; } .files-tabs > * { flex: 0 0 auto !important; } /* شريط أدوات نافذة القصّ: 7 عناصر في صفّ بلا التفاف */ #cropModalOverlay > div > div > div[style*="display:flex"] { flex-wrap: wrap !important; row-gap: 6px !important; } #cropModalOverlay > div > div > div[style*="width:1px"] { display: none !important; } /* عارض المرفقات (admin_users_review): عمود 220px بـflex-shrink:0 داخل صفّ عرضه ~294px — عمودان بعرض إصبع. نكدّسهما. */ #attachModalBody > div[style*="display: flex"] { flex-wrap: wrap !important; min-height: 0 !important; gap: var(--space-3) !important; } #attachModalBody > div[style*="width: 220px"], #attachModalBody > div > div[style*="width: 220px"] { width: 100% !important; flex: 1 1 100% !important; border-left: 0 !important; padding-left: 0 !important; order: -1; } #attachModalBody [style*="min-height: 520px"] { min-height: 0 !important; } #attachModalBody #filePreviewArea { min-height: 260px !important; } /* قوائم الفلاتر المنسدلة: 400px مطلقة تتجاوز شاشة أفقية 390px */ .filter-dropdown { max-height: calc(100dvh - 24px) !important; max-width: min(300px, calc(100vw - 20px)) !important; } .filter-actions { position: sticky; inset-block-end: 0; z-index: 2; } /* نافذة الطابور (dashboard): بلا سقف ولا تمرير — يخرج المحتوى خارج الإطار بلا طريقة للوصول إليه. dvh لا vh. */ .q-modal-box { display: flex; flex-direction: column; max-height: calc(100dvh - var(--space-6)) !important; max-width: 100% !important; overflow-y: auto; } /* شريط العمليات الجماعية والتبويبات (contracts) */ .bulk-bar.active { flex-wrap: wrap !important; row-gap: 8px; } .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; } .tabs::-webkit-scrollbar { display: none; } .tabs > .tab { flex: 0 0 auto; } } /* ══ 13. صفوف وشبكات لا تلتفّ ══════════════════════════════ السبب الجذري في كلٍّ منها min-width:auto على عنصر flex — الالتفاف وحده لا يكفي بلا min-width:0. */ @media (max-width: 1099px) { .permissions-grid, .rating-input, .user-area, .scan-input-wrapper, .tb-right, .row { flex-wrap: wrap !important; row-gap: 8px; } .permissions-grid > *, .user-area > *, .scan-input-wrapper > *, .tb-right > *, .row > input, .row > select { min-width: 0 !important; } .scan-input-wrapper .id-input { flex: 1 1 100% !important; } .tb-right { width: 100%; justify-content: flex-start; } /* خريطة الحرارة (analytics): 25 عموداً ثابتة وبطاقة overflow:hidden. تمرير داخلي مع حدّ أدنى مقروء للعمود — لا طيّ إلى عمود واحد لأن ذلك يفقد الخريطة معناها. */ #heatmap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; grid-template-columns: 44px repeat(24, minmax(20px, 1fr)) !important; } } @media (max-width: 640px) { /* نافذة التوليد الجماعي (calendar): ثلاثة أعمدة ثابتة */ .row2, .row3 { grid-template-columns: 1fr !important; } } /* ══ 14. الإشعارات ═════════════════════════════════════════ nowrap على عنصر fixed = نصّ أعرض من الشاشة يُقصّ من الطرفين. */ @media (max-width: 1099px) { .toast { white-space: normal !important; max-width: min(92vw, 420px) !important; word-break: break-word; } .toast-container { max-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* ══ 15. الروابط كأهداف لمس ════════════════════════════════ §3 غطّت الأزرار وتركت المجرَّد — ورصد القياس روابط بارتفاع 18px. min-height على عنصر inline يُتجاهل تلقائياً، فروابط النصّ الجاري لا تتأثر؛ والقاعدة الثانية تحصّنها. */ @media (pointer: coarse), (max-width: 1099px) { a { min-height: 40px; } p a, li a, td a, span a, label a, h1 a, h2 a, h3 a, .desc a, small a { min-height: 0; } /* رابط أيقونة وحدها داخل صفّ flex يُهرَس إلى 21px مهما بلغت حشوته. الحدّ الأدنى وحده لا يكفي — لا بدّ من منع الانكماش. */ a[class*="btn"], a[class*="back"], .back-btn { min-width: 40px; flex-shrink: 0; justify-content: center; } .close-x, .share a, .logo-section, .raed-nav-back { min-height: 40px; min-width: 40px; } } /* ══ 16. تلميح اللمس ═══════════════════════════════════════ السمة title لا تظهر إطلاقاً على اللمس. رصد التدقيق معلومات لا سبيل إليها بغيرها (خلايا خريطة الحرارة، شارات العقود، أزرار الجدولة). نعرضها بلمسة بدل إخفائها. */ .raed-tip { position: fixed; z-index: 99999; max-width: min(86vw, 320px); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--text); color: var(--surface); font-size: 13px; line-height: 1.5; box-shadow: var(--shadow-md); pointer-events: none; opacity: 0; transition: opacity var(--dur-fast, 120ms) var(--ease, ease); } .raed-tip.on { opacity: 1; } /* ══ 17. مخطّطات مرمِيد ════════════════════════════════════ §1 تفرض svg { max-width: 100% } وهو صحيح للصور، لكنه يضغط مخطّطاً عرضه 1200px إلى 350px فتصير العُقد غير مقروءة. الاستثناء هنا مع تمرير حقيقي — والتوسيط يمنع التمرير. */ @media (max-width: 1099px) { .flow-area .mermaid svg { max-width: none !important; height: auto; } .flow-area { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .flow-area .mermaid { justify-content: flex-start !important; } } /* ══ 18. بقيّة ما رصده التدقيق ═════════════════════════════ */ @media (max-width: 1099px) { /* شريط العقود اللاصق يلتهم ثلث الشاشة بأربعة صفوف أزرار */ .topbar { position: static !important; padding-block: var(--space-2); } /* حقول الإدخال دون 16px تجعل iOS يكبّر الصفحة ولا يعيدها */ input, select, textarea { font-size: max(16px, 1em); } /* JSON مُسلسَل في

 = سطر واحد بلا نقطة كسر */
  pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: auto;
    max-width: 100%;
  }

  /* شريط FullCalendar: ثلاث كتل + 7 أزرار في صفّ واحد */
  .fc .fc-header-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .fc .fc-toolbar-chunk { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-1); }
  .fc .fc-toolbar-title { font-size: 1.05rem; text-align: center; }
}

@media (pointer: coarse), (max-width: 1099px) {
  /* مؤشّرا تمرير الجدول: كاشفهما الوحيد :hover — ومع ذلك يلتقطان
     اللمس وهما شفافان، فيبتلعان لمسة على ما تحتهما. */
  .table-container .scroll-indicator { opacity: 1 !important; }
  .scroll-indicator:not(.visible) { pointer-events: none; }

  /* الوزن (0,2,0) يهزم أي محدِّد مفرد، فنساويه */
  .card-actions .raed-more { min-width: 40px; min-height: 40px; }
  /* .modal-content .close تخصيصه (0,2,0) ويفرض 32px — نساويه */
  .modal-content .close { min-width: 40px; min-height: 40px; }
}

/* ══ 19. النطاق اللوحي 769–1099 ════════════════════════════
   نقطة انكسار الصفحة الوحيدة عند 768، فيبقى النطاق اللوحي
   على تخطيط الديسكتوب: ست أعمدة على عرض 800px. */
@media (min-width: 769px) and (max-width: 1099px) {
  .info-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ══ 20. ما كشفه القياس بعد الجولة الأولى ══════════════════ */
@media (pointer: coarse), (max-width: 1099px) {
  /* §3 غطّت select وتركت حقول النصّ — ورُصد حقل بحث بارتفاع 18px */
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea { min-height: 40px; }
}
@media (max-width: 1099px) {
  /* رأس شاشة العرض: صفّ بلا التفاف وحشوة 52px يدفع الكتلة
     الأخيرة خارج الحافة على أي شاشة أضيق من 700px */
  .tv-header {
    flex-wrap: wrap;
    height: auto;
    padding: var(--space-3);
    gap: var(--space-3);
    row-gap: var(--space-2);
  }
  .tv-header .brand-divider { display: none; }
}