/* =======================================================
mobile.css — توافق كنز التوجيهي مع الهاتف
اربطه مرة واحدة داخل في includes/header.php:
محايد اللون: لا يغيّر ثيمك الكهرماني، فقط يصلح التخطيط على الجوال.
ملاحظة: يتطلّب وجود تعليمة العرض في الرأس:
======================================================= */
/* منع التمرير الأفقي المزعج على كل الأجهزة */
html,body{overflow-x:hidden;max-width:100%;}
*{-webkit-tap-highlight-color:transparent;}
/* منع أي وسائط عريضة من كسر الصفحة */
img,video,iframe,canvas,svg,embed,object{max-width:100%;height:auto;}
pre,code{white-space:pre-wrap;word-break:break-word;}
@media (max-width:767.98px){
/* --- البطاقات والنماذج تتمدّد لملء عرض الهاتف --- */
.form-card,
.card{
width:100%!important;
max-width:100%!important;
margin-inline:auto;
box-sizing:border-box;
}
/* --- الحقول تملأ العرض لسهولة الإدخال باللمس --- */
.field input,
.field select,
.field textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
select,
textarea{
width:100%!important;
box-sizing:border-box;
font-size:16px; /* يمنع تكبير iOS التلقائي عند التركيز */
}
/* --- الأزرار الممتدة تملأ العرض --- */
.btn-block{width:100%!important;display:block;}
button,.btn{max-width:100%;}
/* --- الجداول العريضة (النتائج، قائمة المعلمين) تصبح قابلة للتمرير أفقياً
بدل أن تكسر الصفحة — من دون تعديل HTML --- */
table:not(.no-scroll){
display:block;
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
/* --- الحاويات ذات العرض الثابت تُضبط لعرض الشاشة --- */
.container,.wrapper,.content,.page,main{
width:100%!important;
max-width:100%!important;
padding-inline:14px;
box-sizing:border-box;
}
/* أي عنصر بعرض ثابت مكتوب داخل style */
[style*="width"]{max-width:100%!important;}
/* --- أحجام خط مريحة للقراءة --- */
body{font-size:16px;}
h1{font-size:1.9rem;line-height:1.25;}
h2{font-size:1.5rem;}
h3{font-size:1.25rem;}
/* --- روابط ومساحات لمس أكبر --- */
a,button{min-height:40px;}
}