/* ============================================================================
   mobile.css — طبقة الجوال المشتركة لبوابة الفريق (RTL) وبوابة المكتب (LTR)
   Mobile-first: نقاط التوقف 480 / 768 / 1024. لا تغيّر معرّفات العناصر ولا مسارات الـ API.
   الأساسيات (كل الأحجام) → الجوال (≤767) → التابلت (768–1023) → الدرج (≤1024) → اللمس
   ============================================================================ */

/* ---------- الأساسيات: iOS / Samsung ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light}
html,body{background:var(--bg,#F4F7FA)}
body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
main,.mbox,.tw,.tk-al,#nav{-webkit-overflow-scrolling:touch}
input,select,textarea{font-size:16px!important;-webkit-appearance:none;appearance:none;border-radius:10px}
select{background-image:linear-gradient(45deg,transparent 50%,#6B7A88 50%),linear-gradient(135deg,#6B7A88 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:30px}
[dir="rtl"] select{background-position:18px 50%,13px 50%;padding-inline-end:11px;padding-inline-start:30px}
input[type="checkbox"],input[type="radio"]{-webkit-appearance:auto;appearance:auto;width:22px;height:22px;font-size:inherit!important}
input[type="file"]{padding:8px}
button,.hbtn,.sm,.btn,.chip,.tab,.dc,.it,.odc{touch-action:manipulation}
header{position:-webkit-sticky;position:sticky;padding-top:calc(10px + env(safe-area-inset-top));padding-left:calc(18px + env(safe-area-inset-left));padding-right:calc(18px + env(safe-area-inset-right))}
.toast{bottom:calc(18px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);text-align:center}
img{max-width:100%;height:auto}

/* شريط التقدم لأي طلب شبكة + شريط انقطاع الاتصال */
#mProg{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#1D5FB4,#93C5FD,#1D5FB4);background-size:200% 100%;z-index:60;display:none;animation:mProg 1s linear infinite}
body.m-busy #mProg{display:block}
@keyframes mProg{from{background-position:200% 0}to{background-position:0 0}}
#mOff{position:fixed;left:0;right:0;bottom:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#B91C1C;color:#fff;font-weight:700;font-size:.9rem;text-align:center;z-index:55;display:none}
body.m-offline #mOff{display:block}
#mUpd{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#0B2B4E;color:#fff;border:2px solid #93C5FD;border-radius:16px;padding:18px 26px;font:inherit;font-size:1.15rem;font-weight:800;line-height:1.6;z-index:56;display:none;box-shadow:0 14px 40px rgba(0,0,0,.35);max-width:calc(100vw - 32px);text-align:center;cursor:pointer}
#mUpd.on{display:block}

/* ---------- التابلت والشاشات المتوسطة (≤1024): القائمة تصبح درجاً بزر ☰ ---------- */
/* زر إغلاق الدرج ✕: لا يظهر إلا داخل الدرج على الشاشات الصغيرة */
#nav .m-close{display:none}
#mNavBtn{display:none;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:10px;width:44px;height:44px;font-size:1.3rem;cursor:pointer;flex:none;touch-action:manipulation}
#mNavBack{display:none;position:fixed;inset:0;background:rgba(11,43,78,.55);z-index:4}   /* تحت الهيدر (z 5) الذي يحوي الدرج، وفوق المحتوى */
@media(max-width:1024px){
 body.m-drawer #mNavBtn{display:inline-flex;align-items:center;justify-content:center}
 body.m-drawer.m-open #mNavBack{display:block}
 body.m-drawer #nav:not(.hide){display:flex;position:fixed;top:0;bottom:0;width:min(84vw,330px);background:var(--chrome,#0B2B4E);flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:2px;padding:calc(14px + env(safe-area-inset-top)) 10px calc(14px + env(safe-area-inset-bottom));overflow-y:auto;z-index:50;box-shadow:0 0 40px rgba(0,0,0,.35);transition:transform .22s ease}
 [dir="rtl"] body.m-drawer #nav:not(.hide){right:0;transform:translateX(105%)}
 [dir="ltr"] body.m-drawer #nav:not(.hide){left:0;transform:translateX(-105%)}
 body.m-drawer.m-open #nav:not(.hide){transform:none!important}
 body.m-drawer #nav .hbtn,body.m-drawer #nav .side-help{display:flex;align-items:center;gap:8px;text-align:start;background:none;border:0;color:#DCE7F3;font-weight:600;font-size:1rem;padding:12px 12px;min-height:46px;border-radius:10px;width:100%}
 body.m-drawer #nav .hbtn.on{background:#1F6FB2;color:#fff}
 body.m-drawer #nav .hbtn .bn{position:static;margin-inline-start:auto}
 body.m-drawer #nav .hbtn.off{opacity:.42}
 body.m-drawer #nav #whoName{padding:10px 12px;border-top:1px solid rgba(255,255,255,.14);margin-top:auto;font-size:.85rem;color:#B8C7D8}
 body.m-drawer #nav .ng{display:contents}body.m-drawer #nav .ngh,body.m-drawer #nav .nav-q,body.m-drawer #navFav,body.m-drawer #navMini{display:none!important}
 body.m-drawer #nav .hbtn .ic{display:inline-block;width:24px;text-align:center}
 body.m-drawer #nav:not(.hide){padding-top:calc(60px + env(safe-area-inset-top))}
 body.m-drawer .m-close{display:block;position:absolute;top:calc(10px + env(safe-area-inset-top));inset-inline-start:10px;padding:0;margin:0}
 body.m-drawer .m-close button{background:none;border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:10px;width:44px;height:44px;font-size:1.2rem;cursor:pointer;touch-action:manipulation}
 body.m-drawer header>div:first-child{display:flex;align-items:center;gap:8px;min-width:0}
 main{padding:12px}
 .dtwo{grid-template-columns:1fr}
}

/* ---------- الجوال (≤767): بطاقات بدل الجداول، نماذج بحقل واحد في الصف، نوافذ كأوراق سفلية ---------- */
@media(max-width:767px){
 main{padding:10px 10px calc(84px + env(safe-area-inset-bottom))}
 header{padding-bottom:8px}header b{font-size:.95rem}
 .ph{margin:0 0 8px}.ph .pi{width:38px;height:38px;font-size:1.1rem}.ph h1{font-size:1.1rem}.ph .ps{font-size:.78rem}
 .card{padding:12px;border-radius:12px;margin-bottom:10px}
 .grid,.grid2,.g2,.wcards,.dsm,.dg,.grid4,.res{grid-template-columns:1fr!important}
 .kpis{grid-template-columns:1fr 1fr!important}.kpi{flex-direction:column;align-items:flex-start;gap:4px}.kpi b{font-size:1.2rem}
 .grid>div{padding:2px 0}
 .dc .n,.kpi b{font-size:1.35rem}.ar-cards,.dc-mini{grid-template-columns:repeat(2,1fr)}
 .dpipe{gap:4px}.dp{min-width:84px;padding:6px 4px}.dp b{font-size:1.05rem}
 .chips,.tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.chips::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
 .chip,.tab{white-space:nowrap;flex:none}
 .rowact{gap:6px}.rowact .sm{flex:1 1 auto;justify-content:center;text-align:center}
 .fbar{flex-direction:column;align-items:stretch}.fbar label{min-width:0}
 /* الجداول التي وسمها mobile.js (data-label من رأس الجدول) تُعرض بطاقات */
 table.mt{display:block;border:0;background:none}
 table.mt tbody,table.mt thead{display:block}
 table.mt tr.mth{display:none}
 table.mt tr{display:block;background:#fff;border:1px solid var(--line,#E1E7EE);border-radius:12px;padding:8px 10px;margin-bottom:8px;box-shadow:0 1px 2px rgba(11,43,78,.04)}
 table.mt td{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;border:0;padding:5px 0;border-bottom:1px dashed #EEF2F6;text-align:start}
 table.mt td:last-child{border-bottom:0}
 table.mt td::before{content:attr(data-label);color:#6B7A88;font-size:.76rem;font-weight:700;flex:0 0 38%;max-width:38%}
 table.mt td>.mv{flex:1 1 auto;min-width:0;text-align:end;overflow-wrap:anywhere}
 table.mt td.m-act>.mv{display:flex;flex-wrap:wrap;gap:6px;width:100%;text-align:start}
 table.mt td[data-label="#"]{display:none}
 table.mt td[data-label=""]::before,table.mt td.m-act::before,table.mt td[colspan]::before{display:none}
 table.mt td.m-act{display:block;padding-top:8px}
 table.mt td.m-act .rowact,table.mt td.m-act{display:flex;flex-wrap:wrap;gap:6px}
 table.mt td.m-act .sm,table.mt td.m-act button,table.mt td.m-act a.sm{flex:1 1 46%;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem}
 table.mt td>b:first-child{font-size:1rem}
 table.mt td.m-num{direction:ltr}
 table.mt td[colspan]{display:block;text-align:center}
 /* الجدول الأفقي عندما لا يُحوَّل (mno) يبقى قابلاً للتمرير */
 .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -12px;padding:0 12px}
 /* النوافذ: ورقة سفلية بأزرار ثابتة أسفلها */
 .modal{align-items:flex-end;padding:0}
 .mbox{max-width:none;width:100%;max-height:92vh;max-height:92dvh;border-radius:18px 18px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom));overflow:auto}
 .mbox h3{position:-webkit-sticky;position:sticky;top:-14px;background:#fff;margin-top:-14px;padding-top:14px;z-index:1}
 .mbox .rowact,.mbox>.btn,.mbox>button.btn{position:-webkit-sticky;position:sticky;bottom:calc(-14px - env(safe-area-inset-bottom));background:#fff;padding:10px 0 calc(6px + env(safe-area-inset-bottom));margin-top:8px;z-index:1}
 .mbox .rowact .btn{margin-top:0;flex:1}
 .mbox .grid,.mbox .g2{grid-template-columns:1fr!important}
 .btn{min-height:48px}
 /* شريط الإرسال والرد */
 .sendbar{position:-webkit-sticky;position:sticky;bottom:calc(-10px - env(safe-area-inset-bottom));flex-direction:column;align-items:stretch}.sendbar input{width:100%}
 /* الخط الزمني: مطوي مع «عرض المزيد» */
 .ev.m-hid{display:none}
 .m-more{display:block;width:100%;margin:6px 0;padding:10px;border:1px dashed var(--line,#E1E7EE);background:#fff;border-radius:10px;font:inherit;font-size:.86rem;font-weight:700;color:#1D5FB4;cursor:pointer}
 /* الفلاتر الطويلة (.fbar) داخل ورقة سفلية */
 .fbar.m-sheet{display:none}
 .fbar.m-sheet.open{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:52;background:#fff;border-radius:18px 18px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom));max-height:80vh;max-height:80dvh;overflow:auto;box-shadow:0 -10px 40px rgba(11,43,78,.25)}
 #mFilt{position:fixed;inset-inline-end:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:51;background:#0B2B4E;color:#fff;border:0;border-radius:999px;padding:12px 18px;font:inherit;font-weight:800;box-shadow:0 8px 24px rgba(11,43,78,.3);display:none;min-height:48px}
 body.m-hasfilt #mFilt{display:inline-flex;align-items:center;gap:6px}
 /* شاشة الدخول */
 .login{margin:24px auto}
 /* عناصر تُخفى على الجوال لأنها للشاشات الواسعة فقط */
 .took,#navMini{display:none!important}
 .dfu{font-size:.76rem}
 .pipe{overflow-x:auto}
 .tl{padding-bottom:6px}
 .kpi{padding:10px}
}

/* ---------- الشاشات الصغيرة جداً (≤480) ---------- */
@media(max-width:480px){
 header b{font-size:.9rem}header small{display:none}
 .ar-cards,.dc-mini,.cards{grid-template-columns:1fr 1fr}
 .ph .crumb{display:none}
 table.mt td::before{flex-basis:42%;max-width:42%}
 #langBtn,#logoutTop{padding:6px 10px!important}
}

/* ---------- اللمس (أي حجم): أهداف 44px ولا اعتماد على hover ---------- */
@media(pointer:coarse){
 .sm{min-height:44px;padding:8px 12px;display:inline-flex;align-items:center;gap:4px}
 .hbtn{min-height:44px}
 .chip,.tab{min-height:42px;display:inline-flex;align-items:center}
 .t tr.lnk td,.dc,.it,.odc{padding-top:12px;padding-bottom:12px}
 .dfu-btn,.pager button{min-height:40px;min-width:40px}
 .hbtn:hover,.sm:hover,.chip:hover,.tab:hover,.dc:hover,.it:hover{box-shadow:none;filter:none}
 a{padding:2px 0}
}

/* ---------- وضع التطبيق المثبّت (standalone) ---------- */
@media(display-mode:standalone){
 header{padding-top:calc(12px + env(safe-area-inset-top))}
 body{min-height:100vh;min-height:100dvh}
}
/* الشاشات التي تملأ الارتفاع */
.m-full{height:100vh;height:100dvh}
/* عناوين الجداول العائمة أسفل الشريط العلوي (mobile.js 2ب) */
#mStick{position:fixed;z-index:4;overflow:hidden;display:none;box-shadow:0 3px 6px -2px rgba(15,23,42,.18)}
#mStick.on{display:block}
#mStick table{position:absolute;top:0;margin:0;table-layout:fixed}
@media print{#mStick{display:none!important}}
/* زر «بحث وفلاتر» مخفي خارج الجوال وفي صفحة الدخول — يظهر فقط حين تضيف mobile.js الصنف m-hasfilt على الجوال */
#mFilt{display:none}