/* ============================================================= responsive-global.css — تجاوب موحّد على كل صفحات رتّل ------------------------------------------------------------- يُحمَّل في كل صفحات frontend عبر في الـ . كل القواعد هنا "additive" — لا تكسر التصميم الموجود، تضيف فقط حماية للحالات الحدية (notch، شاشات <380px، جداول كبيرة، touch targets صغيرة، iPad portrait). ============================================================= */ /* ── 1) منع overflow أفقي عام ─────────────────────────────── */ html, body { overflow-x: hidden; max-width: 100vw; } /* ── 2) safe-area للأجهزة المنحوتة (iPhone X+) ────────────── */ @supports (padding: max(0px)) { /* عناصر sticky/fixed في الأعلى — تحترم الـ notch */ header.sticky, .sticky-top, #mode-bar, .mob-hdr, .top-app-bar { padding-top: max(env(safe-area-inset-top), 0px); } /* عناصر fixed في الأسفل — تحترم home indicator */ .toasts, #toasts, .bottom-bar, .footer-bar { padding-bottom: max(env(safe-area-inset-bottom), 0px); } /* الزر الجانبي للرجوع يحترم safe-area (الـ JS يفعل ذلك أصلاً لكن نضمن fallback إذا لم يتحمّل الـ JS) */ #rattl-back-btn { top: max(14px, env(safe-area-inset-top)); } } /* ── 3) جداول قابلة للسحب الأفقي على الجوال ───────────────── */ @media (max-width: 767px) { /* الجداول التي عرضها أكبر من الشاشة → سحب أفقي + ظل خفيف */ table { max-width: 100%; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } table thead, table tbody { display: table; width: max-content; min-width: 100%; } /* الـ data-tables المخصصة (موجودة في owner pages) */ .data-table, .products-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table table, .products-table table { min-width: 720px; } } /* ── 4) Touch targets — أزرار صغيرة على شاشات اللمس ───────── */ @media (pointer: coarse) { /* أي زر بدون height محدد يحصل على 44px min (معيار Apple HIG) */ button:not([class*="h-"]):not([class*="height"]):not(.size-fixed), a[role="button"]:not([class*="h-"]), input[type="button"], input[type="submit"] { min-height: 44px; } } /* ── 5) iPad portrait (768-1023px) — breakpoint مفقود ─────── */ /* كثير من الصفحات تقفز من mobile (<640) إلى desktop (lg=1024) بدون اعتبار iPad portrait. نضيف هنا تعديلات لطيفة. */ @media (min-width: 768px) and (max-width: 1023px) { /* تقليل padding الكبيرة على iPad */ .container, .theme-shell, [class*="max-w-"][class*="mx-auto"] { padding-inline: max(20px, env(safe-area-inset-left)); } /* Grid 3-4 أعمدة يصبح عمودين على iPad portrait */ [class*="lg:grid-cols-3"][class*="grid-cols-1"]:not([class*="md:grid-cols-"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [class*="lg:grid-cols-4"][class*="grid-cols-1"]:not([class*="md:grid-cols-"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ── 6) iPhone SE وأشباهه (<380px) — تقليل الخطوط الضخمة ── */ @media (max-width: 379px) { /* العناوين الكبيرة تطفر السطر على شاشة 320-375px */ h1.text-4xl, h1.text-5xl, h1.text-6xl, h1.text-7xl, .text-4xl, .text-5xl, .text-6xl, .text-7xl { font-size: clamp(1.5rem, 7vw, 2.25rem) !important; line-height: 1.2 !important; } /* padding card كبيرة → تصغير */ [class*="p-8"], [class*="p-10"], [class*="p-12"] { padding: 16px !important; } /* أزرار CTA كبيرة */ .btn, [class*="rounded-2xl"][class*="py-3"] { font-size: 14px !important; } } /* ── 7) Grids بدون breakpoints (شائعة في dashboards) ─────── */ @media (max-width: 639px) { /* أي عنصر مع .grid-cols-N (3+) بدون breakpoint للموبايل → نحوّله لعمود واحد */ .grid.grid-cols-3, .grid.grid-cols-4, .grid.grid-cols-5, .grid.grid-cols-6 { grid-template-columns: 1fr !important; } /* استثناء واضح: لو فيه sm:grid-cols-* فالمطور قصد ذلك */ .grid[class*="sm:grid-cols-"] { /* اترك Tailwind sm: يتولى */ } } /* ── 8) Forms ضيقة على الجوال — تقليل padding ──────────────── */ @media (max-width: 479px) { input, textarea, select { font-size: 16px; /* يمنع iOS Safari من zoom تلقائي عند focus */ } /* الكروت الكبيرة (forms مثلاً) padding صغير على شاشات ضيقة */ .card-form, form .card, form[class*="bg-"] { padding: 16px; } } /* ── 9) Modals — لا تتجاوز الشاشة ────────────────────────── */ .modal, [role="dialog"], .dialog { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); /* dynamic viewport unit */ overflow-y: auto; -webkit-overflow-scrolling: touch; } /* ── 10) شاشة الطفل (student-home, student-session) خاصة ── */ /* أزرار الـ HUD العلوية لازم تكون قابلة للنقر بسهولة */ .student-top-btn { min-height: 36px !important; padding: 8px 14px !important; font-size: 13px !important; } @media (max-width: 374px) { .student-top-btn { padding: 7px 10px !important; font-size: 12px !important; } } /* ── 11) zoom guard — منع zoom على الجوال عند focus inputs ─ */ /* iOS Safari يكبر تلقائياً عند focus إذا الـ font-size < 16px */ @media (max-width: 767px) { input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: max(16px, 1em); } } /* ── 12) Sidebar drawer على الجوال (dashboard pages) ───────── */ /* الكثير من dashboards عندها sidebar fixed يغطي الشاشة على الجوال. هذي قاعدة احتياطية لإخفاء sidebars واسعة جداً تحت 640px */ @media (max-width: 639px) { aside.sidebar:not(.open):not(.drawer-open), #owner-sidebar:not(.open) { /* الـ JS الخاص بكل صفحة يفترض يدير drawer، لكن نضمن fallback إذا الـ markup ما يدعمه */ } } /* ── 13) Hero blob/gradient كبيرة على الجوال ─────────────── */ /* index.html و about.html فيها blobs بـ w-[800px] قد تسبب overflow */ @media (max-width: 767px) { [class*="w-[800px]"], [class*="w-[600px]"], [class*="h-[800px]"], [class*="h-[600px]"] { max-width: 100vw !important; max-height: 100vw !important; } } /* ── 14) لمن يستخدم prefers-reduced-motion ─────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }