:root{
  --primary:#1a3a5c;--primary-light:#5776ad;--accent:#8b1a1a;--accent-light:#b22222;
  --perm-hover:rgba(26,58,92,.075);--perm-group-bg:rgba(26,58,92,.05);
  --success:#1aab5c;--danger:#e84040;--warning:#f4c430;--info:#1a8fa8;
  --bg:#f0f4f8;--card:#ffffff;--sidebar:#0f2540;--text:#1a2535;--text-muted:#6b7c93;
  --border:#dde3ea;--shadow:0 4px 24px rgba(26,58,92,.10);--radius:14px;--radius-sm:8px;
}
body.dark{
  --bg:#0f1923;--card:#172030;--text:#cfddef;--text-muted:#7d97b3;
  --border:#1f3347;--shadow:0 4px 24px rgba(0,0,0,.45);
  --perm-hover:rgba(87,118,173,.16);--perm-group-bg:rgba(87,118,173,.09);
}
/* ── Dark mode: نصوص تحتاج لون فاتح (بدون المساس بالخلفيات) ── */
body.dark #menu-toggle{color:#fff;}
body.dark .topbar-title{color:#fff;}
body.dark .code-cell{color:#cfddef;}
body.dark .section-title{color:#cfddef!important;border-bottom-color:rgba(207,221,239,.25)!important;}
body.dark .badge-scheduled{color:#cfddef;}
body.dark .stat-card.blue .stat-icon{color:#cfddef;}
body.dark .btn-outline:hover{color:#cfddef;}
body.dark .search-box:focus-within{border-color:rgba(207,221,239,.3);}
body.dark .filter-select:focus,.date-wrap:focus-within{border-color:rgba(207,221,239,.3);}
body.dark .login-box{background:var(--card);}
body.dark input,body.dark select,body.dark textarea{color:var(--text);border-color:var(--border);}
body.dark input::placeholder,body.dark textarea::placeholder{color:var(--text-muted);}
body.dark .user-btn{background:var(--bg);border-color:var(--border);}
body.dark .user-btn:hover{background:var(--card);}
body.dark .user-dropdown{background:var(--card);border-color:var(--border);}
body.dark .user-dropdown-item:hover{background:rgba(255,255,255,.05);}
/*  ⚠️ لون الشريط عبر متغيّر مع سقوطٍ للقيمة نفسها: كان مثبَّتاً نصّياً
    فلا يتبع السمة — والسقوط يجعل الافتراضي مطابقاً للسابق بالبكسل. */
body.dark .topbar{background:var(--topbar,#021838);}
body.dark #sidebar{background:var(--card);}
body.dark .modal .modal-inner{background:var(--card);}
body.dark .modal .modal-body{background:var(--card);}
body.dark .modal .modal-footer{background:var(--card);border-color:var(--border);}
body.dark .modal .modal-header{border-color:var(--border);}
body.dark .ss-display{background:var(--bg);border-color:var(--border);color:var(--text);}
body.dark .ss-dropdown{background:var(--card);border-color:var(--border);}
body.dark .ss-option:hover{background:rgba(255,255,255,.06);}
body.dark .ss-search input{background:var(--bg);color:var(--text);border-color:var(--border);}
body.dark .filter-select{background:var(--bg);color:var(--text);border-color:var(--border);}
body.dark .perm-item{background:var(--bg);}
body.dark .table-wrap table tbody tr:hover{background:rgba(255,255,255,.03);}
body.dark .phone-chip{border-color:var(--border);color:var(--text);}
body.dark .modal-header h2{color:var(--text);}
body.dark .schedule-card-time{color: var(--primary-light);}
body.dark .schedule-card-detail .dval{color: var(--primary-light);}
body.dark .upcoming-time .time{color:var(--primary-light);}
body.dark #page-settings .card h3{color:var(--primary-light)!important;}
body.dark .autocomplete-list{background: var(--bg);}
body.dark .log-expand-btn{background: var(--primary-bg, rgba(42, 82, 152, .07)); color: var(--primary-light);}
body.dark .login-input{color: #000000;}

/* زر تبديل الثيم */
.btn-theme-toggle{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border);background:var(--bg);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;transition:all .2s;flex-shrink:0;}
.btn-theme-toggle:hover{border-color:var(--primary-light);color:var(--primary-light);transform:rotate(20deg);}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Tajawal',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;}

/* ── LOGIN ─────────────────────────────────────── */
/* ⚠️ خلفيةُ شاشة الدخول: **حاجبٌ داكنٌ فوق الصورة** لا الصورةَ وحدها — بطاقةُ
   الدخول بيضاءُ فوقها، وبلا الحاجب يذوب نصُّها في الأجزاء الفاتحة من الصورة.
   والحاجبُ متدرّجٌ بنفس ألوان التدرّج القديم فيبقى المظهرُ متّسقاً.
   ⚠️⚠️ **وغيابُ الملف لا يُحدث انحداراً**: `background-color` يبقى الأساس
   والحاجبُ يُرسم فوقه، فتُعرض الشاشةُ بتدرّجها الداكن كما كانت تماماً — فلا
   شاشةَ دخولٍ بيضاء إن لم تُنشر الصورةُ بعد (نافذةُ النشر بين git pull وpm2). */
#login-screen{position:fixed;inset:0;background-color:#0a1628;
  background-image:linear-gradient(135deg,rgba(10,22,40,.86) 0%,rgba(26,58,92,.72) 50%,rgba(15,37,64,.88) 100%),url('/shared/login-bg.png');
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat;
  display:flex;align-items:center;justify-content:center;z-index:9999;}
.login-card{background:#fff;border-radius:24px;padding:48px 44px;width:100%;max-width:440px;box-shadow:0 30px 80px rgba(0,0,0,.35);}
.login-logo{text-align:center;margin-bottom:32px;}
.login-logo img{width:110px;height:auto;margin-bottom:16px;}
.login-logo h1{font-size:20px;font-weight:900;color:#1a3a5c;line-height:1.3;}
.login-logo p{font-size:12px;color:#6b7c93;margin-top:6px;}
.login-field{margin-bottom:18px;}
.login-field label{font-size:12px;font-weight:700;color:#6b7c93;display:block;margin-bottom:6px;letter-spacing:.3px;}
.login-input{width:100%;padding:12px 16px;border:1.5px solid #dde3ea;border-radius:10px;font-family:'Tajawal',sans-serif;font-size:15px;outline:none;transition:all .2s;background:#f8fafc;}
.login-input:focus{border-color:#2a5298;background:#fff;box-shadow:0 0 0 3px rgba(42,82,152,.1);}
.login-input-wrap{position:relative;}
.login-input-wrap .toggle-pw{position:absolute;left:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#6b7c93;font-size:14px;}
/* زر إظهار/إخفاء كلمة المرور لخانات النماذج (تغيير كلمة المرور) */
.pw-wrap{position:relative;}
.pw-wrap .pw-toggle{position:absolute;left:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:14px;padding:0;line-height:1;}
.btn-login{width:100%;padding:14px;background:linear-gradient(135deg,#8b1a1a,#b22222);color:#fff;border:none;border-radius:10px;font-family:'Tajawal',sans-serif;font-size:16px;font-weight:800;cursor:pointer;transition:all .2s;margin-top:8px;}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,26,26,.35);}
.login-error{background:rgba(232,64,64,.1);color:#e84040;border:1px solid rgba(232,64,64,.2);border-radius:8px;padding:10px 14px;font-size:13px;font-weight:600;display:none;margin-top:12px;text-align:center;}


/* ── SIDEBAR ────────────────────────────────────── */
#sidebar{width:220px;min-width:220px;background:var(--sidebar);display:flex;flex-direction:column;height:100vh;position:sticky;top:0;box-shadow:4px 0 28px rgba(0,0,0,.2);z-index:100;transition:width .22s ease,min-width .22s ease;overflow:hidden;}
.sidebar-logo{padding:20px 20px 18px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:14px;}
.sidebar-logo img{width:44px;height:44px;object-fit:contain;border-radius:10px;background:#fff;padding:3px;flex-shrink:0;}
.logo-text h2{color:#fff;font-size:13px;font-weight:800;line-height:1.3;}
.logo-text span{color:rgba(255,255,255,.45);font-size:10px;}
.sidebar-nav{flex:1;padding:14px 10px;overflow-y:auto;}
.nav-section-title{color:rgba(255,255,255,.3);font-size:9px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;padding:12px 12px 5px;}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;color:rgba(255,255,255,.6);cursor:pointer;transition:all .2s;font-size:13.5px;font-weight:500;margin-bottom:2px;text-decoration:none;}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav-item.active{background:linear-gradient(90deg,#8b1a1a,#b22222);color:#fff;box-shadow:0 4px 14px rgba(139,26,26,.35);}
.nav-sub{overflow:hidden;max-height:0;transition:max-height .3s ease;}
.nav-sub.open{max-height:300px;}
.nav-sub-item{display:flex;align-items:center;gap:10px;padding:8px 13px 8px 24px;border-radius:8px;color:rgba(255,255,255,.5);cursor:pointer;font-size:12.5px;font-weight:500;margin-bottom:1px;text-decoration:none;}
.nav-sub-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-sub-item.active{background:rgba(139,26,26,.5);color:#fff;}
.nav-parent{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;color:rgba(255,255,255,.6);cursor:pointer;transition:all .2s;font-size:13.5px;font-weight:500;margin-bottom:2px;justify-content:space-between;}
.nav-parent:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav-parent.open{background:rgba(255,255,255,.05);color:#fff;}
.nav-parent-left{display:flex;align-items:center;gap:11px;}
.nav-chevron{font-size:10px;transition:transform .3s;}
.nav-parent.open .nav-chevron{transform:rotate(180deg);}
.perm-role-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);padding:20px;margin-bottom:16px;}
.perm-role-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--border);}
.perm-role-title{font-size:16px;font-weight:800;color:var(--text);}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.perm-item{display:flex;align-items:center;justify-content:space-between;background:var(--bg);border-radius:8px;padding:10px 14px;border:1px solid var(--border);
  transition:background .15s,border-color .15s;}
/* لون الصف عند التمرير — يوضّح للمستخدم أي صف يعمل عليه.
   ⚠️ `body.dark .perm-item` (0,2,1) تقهر `.perm-item:hover` (0,2,0) فلا بد من
   نظير داكن صريح، وإلا لم يظهر التمرير بالوضع الداكن إطلاقاً */
.perm-item:hover{background:var(--perm-hover);border-color:var(--primary-light);}
body.dark .perm-item:hover{background:var(--perm-hover);border-color:var(--primary-light);}
/* كل الصف/الكارد قابل للنقر للطيّ (الاستثناءات في `_permHostClick`) */
.perm-clickable{cursor:pointer;}
/* رأس كارد البرنامج صف قابل للنقر كذلك (يطوي/يفتح) */
.perm-role-card > .perm-role-header{border-radius:8px;padding-inline:8px;margin-inline:-8px;
  transition:background .15s;}
.perm-role-card > .perm-role-header:hover{background:var(--perm-hover);}
/* صف مجموعة داخلية (سير اعتماد العمليات) — كان `var(--bg-hover)` وهو متغيّر
   غير معرَّف فلم يُطبَّق أي لون */
.perm-group{background:var(--perm-group-bg);}
/* «تحديد الكل» — رقاقة على كل صف قابل للطي تفعّل/تُطفئ كل ما تحته دفعة واحدة */
.perm-bulk{flex-shrink:0;margin-inline-end:8px;padding:2px 8px;border-radius:20px;
  font-size:10.5px;font-weight:800;cursor:pointer;white-space:nowrap;
  border:1.5px solid var(--primary-light);color:var(--primary-light);background:transparent;}
.perm-bulk:hover{background:var(--primary-light);color:#fff;}
.perm-bulk:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px;}
.perm-bulk[data-all="1"]{border-color:#c0392b;color:#c0392b;}
.perm-bulk[data-all="1"]:hover{background:#c0392b;color:#fff;}
/* ردوب ليست نطاق البيانات (الكل/سجلاته) — بجانب توغل الشاشة */
.perm-scope-sel{flex-shrink:0;height:26px;padding:0 6px;margin-inline-end:8px;font-family:inherit;
  font-size:11px;font-weight:700;border-radius:6px;border:1.5px solid var(--border);
  background:var(--bg-card);color:var(--text);cursor:pointer;max-width:130px;}
.perm-scope-sel:focus{outline:none;border-color:var(--accent);}
.perm-scope-sel[data-own]{border-color:#d4a017;color:#d4a017;}
/* 🔒 زر القفل (قراءة فقط) — **رقاقة مرئية بحدود** على كل صف بما فيها الخانات
   (كان أيقونة بشفافية 55% بلا إطار فتكاد تختفي — طلب المستخدم 2026-08-04).
   الفردي أيقونة وحدها، والجماعي (قفل الفرع كله) **مميَّز** برقاقة أعرض تحمل
   وسم «الكل» — والاثنان متجاوران يسار perm-scope-sel بترتيب صف الشجرة */
.perm-lock{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-width:24px;height:22px;padding:0 5px;margin-inline-end:6px;
  border:1.5px solid var(--border);border-radius:6px;background:var(--bg-card);
  font-size:11px;cursor:pointer;color:var(--text-muted);
  transition:color .15s,background .15s,border-color .15s;}
.perm-lock:hover{color:var(--text);border-color:var(--text-muted);background:var(--perm-hover);}
.perm-lock:focus-visible{outline:2px solid var(--primary-light);outline-offset:1px;}
.perm-lock.locked{color:#c0392b;border-color:#c0392b;background:rgba(192,57,43,.12);}
.perm-lock-bulk b{font-size:9.5px;font-weight:800;letter-spacing:0;}
.perm-lock-bulk{border-style:dashed;margin-inline-end:2px;}
/* ⚠️ نظير داكن صريح (فخ الترتيب/التخصيص الموثَّق): خلفية الرقاقة ولونها
   بمتغيرات تتبدّل، لكن hover الأبيض الخافت يحتاج قيمته الداكنة */
body.dark .perm-lock{background:rgba(255,255,255,.04);}
body.dark .perm-lock:hover{background:var(--perm-hover);}
body.dark .perm-lock.locked{background:rgba(231,112,101,.16);color:#e77065;border-color:#e77065;}
/* سكشنات صفحة الصلاحيات (الاعدادات الأساسية · التطبيقات) — نمط سكشن المصنع.
   ⚠️ **المحدد مركّب إلزاماً** (`.section-title.perm-sec-title` = 0,2,0): قاعدة
   `.section-title` (0,1,0) معرَّفة **لاحقاً** بهذا الملف وتستخدم **الاختصار**
   `border-bottom: 2px solid var(--accent)` — فالاختصار المتأخر بنفس التخصيص
   يقهر `border-bottom-color` المفردة، وكان لون السكشن يبقى أحمر `--accent`
   ولونُ نصّه `--primary-light`. المحدد المركّب يحسم بلا اعتماد على ترتيب الملف.
   ⚠️ **ولا نظير داكن هنا**: `body.dark .section-title` تستخدم `!important` على
   اللون والحدّ (تنسيق موحّد لكل سكشنات التطبيق)، فأي نظير داكن نضيفه يكون كوداً
   ميتاً لا يُطبَّق — والمطلوب أصلاً أن يطابق السكشن بقية السكشنات بالوضع الداكن */
.section-title.perm-sec-title{cursor:pointer;margin-top:22px;margin-bottom:12px;
  border-bottom-color:#1a3a5c;color:#1a3a5c;}
.section-title.perm-sec-title:first-child{margin-top:4px;}
.perm-sec-meta{font-size:11px;font-weight:600;color:var(--text-muted);}
.perm-sec-note{font-size:11.5px;color:var(--text-muted);line-height:1.6;margin-bottom:8px;}
/* وسم «موجَّه» بأحداث الإشعارات التي تصل مُخاطَبها دائماً */
.perm-ntf-tag{display:inline-block;margin-inline-start:6px;padding:1px 7px;border-radius:20px;
  font-size:9.5px;font-weight:800;background:rgba(26,171,92,.14);color:#1aab5c;
  border:1px solid rgba(26,171,92,.35);}
.perm-label{font-size:12.5px;font-weight:600;color:var(--text);}
.perm-sublabel{font-size:10px;color:var(--text-muted);margin-top:2px;}
.toggle-switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:22px;transition:.3s;}
.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;right:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;}
/* المُفعَّل أخضر (طلب المستخدم 2026-08-08): «مشغّل» دلالةٌ عامة لا لون هوية،
   ولذلك **لون ثابت لا `var(--primary)`** — الأخير يتبدّل مع السمات الثماني
   (بحري/زمردي/عنبري…) فيصير معنى «مفعّل» مختلفاً بكل سمة */
input:checked + .toggle-slider{background:#1aab5c;}
input:checked + .toggle-slider:before{transform:translateX(-18px);}
.fields-select{width:100%;margin-top:8px;font-size:12px;}
.nav-item i{width:19px;text-align:center;font-size:14px;}
.nav-badge{margin-right:auto;background:rgba(255,255,255,.15);color:#fff;border-radius:20px;padding:1px 8px;font-size:11px;font-weight:700;}
.nav-item.active .nav-badge{background:rgba(255,255,255,.25);}
.sidebar-footer{padding:12px 10px;border-top:1px solid rgba(255,255,255,.08);}

/* ── TOPBAR ─────────────────────────────────────── */
/*  ⚠️⚠️ **لا `overflow` على `#main` أبداً** (شكوى المستخدم 2026-08-19: «الشريطُ
    العلويُّ يختفي بالتمرير»): كان `overflow-x:hidden`، و**أيُّ قيمةِ `overflow`
    غيرِ `visible` تجعل العنصرَ منفذَ تمريرٍ لذرّيته**، فيحلّ `position:sticky`
    بالشريطِ مقابلَ `#main` — وهو لا يُمرَّر أصلاً (المستندُ هو من يُمرَّر) فلا
    يلتصق الشريطُ بشيء. **مقيسٌ ومُعادٌ إنتاجُه**: بتمريرِ 1200px كان
    `topbar.top = -1200` ومخفياً تماماً، وبإسقاطِ الخاصيةِ صار **0 وظاهراً**
    وبصفرِ تمريرٍ أفقيّ. والقصُّ الأفقيُّ على الهاتفِ يتولاه
    `body{overflow-x:hidden}` بكتلةِ 1024px أصلاً؛ وقصُّ سطحِ المكتبِ كان
    **يُخفي عيوباً** (عنصرٌ أعرضُ من الشاشةِ يُقتطع بلا شريطِ تمريرٍ يبلغه).   */
#main{flex:1;display:flex;flex-direction:column;min-width:0;}
/* ── الـtopbar الموحّد (تصميم CRM الكحلي — 2026-07-28): نفس المظهر بكل التطبيقات والبورتال ── */
.topbar{background:var(--topbar,#021838);padding:0 14px;height:48px;display:flex;align-items:center;gap:8px;border-bottom:none;box-shadow:none;position:sticky;top:0;z-index:50;}
/* ── منطقتا الطرفينِ بوزنٍ واحد ⇒ خانةُ البحثِ بالمنتصفِ تماماً ─────
   ⚠⚠ شكوى المستخدم (‏2026-08-20): «الخانةُ لا تظهر بالمنتصفِ بعملياتِ
   المصنعِ والبورتالِ والاعدادات». والسببُ مقيسٌ: العنوانُ كان `flex:1`
   فيبتلع كلَّ المساحةِ الفاضلةِ ويدفعُ الخانةَ — **انحرافٌ 60px على 1280px**
   (وأكبرُ بالبورتالِ حيث العنوانُ «التطبيقات» وحدَه). الطرفانِ الآن
   `flex-grow:1` بـ`flex-basis:0` فيقتسمانِ الفاضلَ بالتساوي.
   ⚠ و`flex-shrink:0` مع إبقاءِ `min-width:auto` على المغلّفينِ: لا يُسحَقانِ
   دونَ محتواهما (درسُ سحقِ علامةِ المالية)، والتقلّصُ داخلَ المغلّف
   بـ`min-width:0` على العنوانِ وحدَه فيبقى قطعُ النقاطِ الثلاثِ عاملاً. */
.topbar-start,.topbar-end{display:flex;align-items:center;gap:inherit;}
.topbar-end{justify-content:flex-end;}
/*  ⚠⚠ الوزنُ المتساوي محصورٌ بحيث تكونُ الخانةُ مرئيةً (‏البحثُ مخفيٌّ
    تحت 821px). **مقيسٌ**: `flex-shrink:0` يمنع تقليصَ المغلّفينِ ومجموعُ
    محتواهما الأدنى 436px، فعلى 375px ينتج **تجاوزٌ أفقيٌّ 76px بالمستند**
    يقصُّه `body{overflow-x:hidden}` فلا يُرى — وهو نوعُ العيبِ الذي يُخفيه القصّ.  */
@media (min-width:821px){
  .topbar-start,.topbar-end{flex:1 0 0;}
}
/*  ⚠⚠ **وتحت 821px يعودُ الشريطُ مسطّحاً حرفياً** (‏`display:contents` يرفعُ
    صندوقَ المغلّفِ فيصير أبناءُه عناصرَ flex مباشرةً كما كانوا تماماً).
    السببُ مقيسٌ: منطقةٌ مغلّفةٌ تأخذ **عرضَ محتواها الأدنى كتلةً واحدةً**
    (‏106px للبدايةِ و316 للنهاية) ولا تتقلّص دونَه ولو كان العنوانُ `flex:1 1 0`
    بـ`min-width:0` — **جُرّب فأنتج تجاوزاً 61px على 375px**، بينما المسطّحُ صفر.
    والتوسيطُ لا معنى له هنا، فالخانةُ مخفيّةٌ والعدسةُ هي المدخل.               */
@media (max-width:820px){
  .topbar-start,.topbar-end{display:contents;}
}
.topbar-title{font-size:15px;font-weight:700;color:#fff;flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-title span{color:#9ccaff;}
.topbar .btn-theme-toggle{width:40px;height:40px;border-radius:4px;border:none;background:transparent;color:#fff;}
.topbar .btn-theme-toggle:hover{background:rgba(255,255,255,.12);color:#fff;transform:none;}
.topbar .user-btn{background:transparent;border:none;padding:4px 10px 4px 6px;border-radius:4px;}
.topbar .user-btn:hover{background:rgba(255,255,255,.12);border:none;}
.topbar .user-name-sm{color:#fff;}
.topbar .user-role-sm{color:rgba(255,255,255,.65);}
.topbar .user-btn .fa-chevron-down{color:rgba(255,255,255,.65) !important;}
body.dark .topbar .user-btn{background:transparent;border:none;}
body.dark .topbar .user-btn:hover{background:rgba(255,255,255,.12);}
/* البحث الشامل: منتصف الشريط تماماً (absolute — لا يتأثر بعرض الجانبين) */
/*  ⚠️ **`flex` لا `absolute`** — نفسُ إصلاحِ الشلِّ الموثَّق: التوسيطُ المطلقُ
    «لا يتأثّر بعرضِ الجانبين» وهو نفسُه العطل، فمجموعةُ النهايةِ تنمو باسمِ
    المستخدمِ وعنوانُ الصفحةِ ينمو بطولِه فيزحفان تحت الخانة. الآن تأخذ ما يفضل
    من مساحةٍ حقيقيةٍ بحدٍّ أعلى 430px و`margin-inline:auto` يوسّطها.
    ⚠️ و`position:relative` لازمة: قائمةُ النتائجِ `absolute` بداخلها.        */
.gs-wrap{position:relative;flex:0 1 430px;min-width:0;max-width:430px;display:flex;align-items:center;}
.gs-wrap>i{position:absolute;inset-inline-start:11px;font-size:12.5px;color:rgba(255,255,255,.75);pointer-events:none;}
#gs-input{width:100%;height:32px;border:none;border-radius:4px;background:rgba(255,255,255,.16);color:#fff;padding:0 34px 0 12px;font-family:inherit;font-size:13px;outline:none;transition:background .15s;}
#gs-input::placeholder{color:rgba(255,255,255,.65);}
#gs-input:focus{background:#fff;color:#111;}
#gs-input:focus::placeholder{color:#888;}
.gs-wrap:has(#gs-input:focus)>i{color:#666;}
.gs-results{position:absolute;top:40px;left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 34px rgba(0,0,0,.18);max-height:min(430px,60vh);overflow-y:auto;padding:6px;z-index:90;color:var(--text);}
.gs-group{font-size:10.5px;font-weight:800;color:var(--text-muted);padding:8px 10px 4px;display:flex;align-items:center;gap:6px;}
.gs-app{font-size:9px;font-weight:800;padding:1px 7px;border-radius:9px;background:rgba(42,82,152,.12);color:#2a5298;}
.gs-app.crm{background:rgba(15,108,189,.12);color:#0f6cbd;}
.gs-app.fleet{background:rgba(16,124,16,.12);color:#107c10;}
.gs-app.dispatch{background:rgba(200,127,10,.14);color:#a86408;}
.gs-app.finance{background:rgba(154,52,18,.12);color:#9a3412;}
.gs-app.settings{background:rgba(61,61,70,.14);color:#3d3d46;}
/* الوضعُ الداكن: نظيرُ `html.*-dark .sh-app` بالشل — بلاها كان بادجُ التطبيق
   بنتيجةِ البحثِ يختلف شكلاً بين عمليات المصنع وبقيةِ البرامج بالداكن */
body.dark .gs-app{background:rgba(255,255,255,.12);color:#cfe4ff;}
body.dark .gs-app.crm{background:rgba(108,184,246,.18);color:#9ccaff;}
.gs-item{display:block;width:100%;text-align:start;border:none;background:none;font-family:inherit;padding:7px 10px;border-radius:8px;cursor:pointer;color:var(--text);}
.gs-item:hover{background:var(--hover-bg);}
.gs-item .t{font-size:12.5px;font-weight:700;}
.gs-item .s{font-size:11px;color:var(--text-muted);margin-top:1px;}
.gs-empty{padding:16px;text-align:center;font-size:12px;color:var(--text-muted);}
/* جرس الإشعارات الموحّد */
.ntf-badge{position:absolute;top:3px;inset-inline-end:2px;background:#c50f1f;color:#fff;font-size:9.5px;font-weight:700;border-radius:9px;min-width:15px;height:15px;line-height:15px;padding:0 3px;text-align:center;pointer-events:none;}
/* لوحة الإشعارات — **بنفس تصميم لوحة الـCRM بالضبط** (طلب المستخدم 2026-08-01):
   نفس المقاسات والأوزان (قائمة 8px بظل منبثق، بنود 4px بخط 13px/600، نقطة 8px) */
.ntf-menu{position:absolute;top:44px;inset-inline-end:0;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 6.4px 14.4px rgba(0,0,0,.13),0 1.2px 3.6px rgba(0,0,0,.10);width:min(360px,92vw);max-height:460px;display:none;z-index:90;color:var(--text);flex-direction:column;overflow:hidden;}
.ntf-menu.open{display:flex;}
.ntf-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600;}
.ntf-clear{border:none;background:none;color:var(--primary-light);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;}
.ntf-list{overflow-y:auto;padding:4px 6px;}
.ntf-item{display:flex;gap:8px;padding:9px 8px;border-radius:4px;cursor:pointer;align-items:flex-start;position:relative;}
.ntf-item:hover{background:var(--hover-bg);}
.ntf-item>i{color:var(--primary-light);font-size:13px;margin-top:3px;flex:0 0 auto;}
.ntf-dot{width:8px;height:8px;border-radius:50%;background:transparent;margin-top:8px;flex:0 0 auto;}
.ntf-item.unread .ntf-dot{background:#0f6cbd;}
.ntf-item.unread .ntf-t{font-weight:600;}
.ntf-t{font-size:13px;line-height:1.45;word-break:break-word;}
.ntf-b{font-size:11.5px;color:var(--text-muted);margin-top:1px;}
.ntf-time{font-size:10.5px;color:var(--text-muted);margin-top:2px;}
/*  🎭 إخفاءُ عناصرِ الصلاحيات — **بصنفٍ لا بـ`style.display`**: إسنادُ
    `display = ''` **يمحو قيمةَ العنصرِ المضمَّنة** — فصار `#col-stats` بلوكاً
    وتراصَّت بطاقاتُه الأربعُ رأسياً (عيبٌ رصده المستخدمُ بصورة 2026-08-19).
    `!important` لأنّ المحجوبَ محجوبٌ بلا استثناء، وما يمرُّ به يحمل
    `display` مضمَّناً يقهر أيَّ محدّدٍ بلا ذلك.                             */
.perm-hide{display:none !important;}

/*  🔔 أزرارُ الإشعار: ✓ تعيين كمقروء + ✕ حذف — **تظهر بالتمرير**
    (طلبُ المستخدم 2026-08-19: «اعتمد طريقةَ الـhover لتظهر علامةُ الصحِ
    وعلامةُ الـX») — وكان ✓ **غيرَ موجودٍ أصلاً** بجرسِ عملياتِ المصنع
    (الشلُ المشتركُ يحمله فظهر بالـCRM ولم يظهر هنا — شكوى المستخدم).
    ⚠️ **حاويةٌ بتدفّقٍ لا `position:absolute`**: المطلقُ يدع النصَ يمرُّ تحت
    الزرِّ فيغطّيه (عيبٌ رصده المستخدمُ بالشلِ وأُصلح هناك)، وزرّانِ
    مطلقانِ كانا سيتراكبانِ بنفسِ الموضع.
    ⚠️ و`focus-visible` يُظهرهما للوحةِ المفاتيح: `opacity:0` لا يُخرج الزرَّ
    من مسارِ `Tab` — فزرٌّ مُركّزٌ عليه وغيرُ مرئيٍ فخٌ لمن لا يستعمل الفأرة.  */
.ntf-acts{display:flex;flex-direction:column;gap:2px;flex:0 0 auto;width:22px;align-items:center;}
.ntf-abtn{border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:11px;
  padding:3px;border-radius:4px;line-height:1;opacity:0;transition:opacity .15s,background .15s;}
.ntf-item:hover .ntf-abtn{opacity:1;}
.ntf-abtn:hover{background:var(--hover-bg);color:var(--text);}
.ntf-abtn:focus-visible{opacity:1;outline:2px solid var(--primary-light);outline-offset:-2px;}
.ntf-empty{padding:22px;text-align:center;font-size:12px;color:var(--text-muted);}
/* ── 🔎 بحثُ الهاتف: عدسةٌ تتوسّع فتملك الشريطَ وحدَها ─────────────────────
   ⚠️⚠️ **مرآةُ `sh-search-on` بالشلِّ المشترك** (شكوى المستخدم 2026-08-19:
   «بعضُ البرامجِ لا يظهر زرُّ البحثِ إطلاقاً ويظهر عنوانُ الصفحة»): كانت الخانةُ
   **مخفيةً كلياً** تحت 820px بلا أيِّ مدخلٍ للبحث. وعملياتُ المصنعِ **لا تحمّل
   `shell.css`** (شريطُها بأصنافِه الخاصة `gs-*` بقرارٍ موثَّق) فالمرآةُ هنا
   إلزامية — **يُعدَّلان معاً**، ويحرسُ التكافؤَ فحصٌ آليّ.                    */
/*  ⚠️ **`[data-on]` لا `!important`**: الموظفُ الميدانيُّ بلا بحثٍ شامل
    (‏`_gsInit` يعود مبكراً له)، فقاعدةٌ مُهمَّةٌ بكتلةِ الهاتفِ كانت ستُظهر له
    عدسةً تفتح خانةً معطَّلة. الوسمُ يضعه `_gsInit` لمن يملكه فقط.            */
#gs-btn{display:none;}
@media (max-width:820px){
  .gs-wrap{display:none !important;}
  #gs-btn[data-on]{display:inline-flex;}
  /*  الوضعُ المفتوح: الخانةُ عنصرُ flex ينمو، وكلُّ ما عداها يُخفى إلا العدسة
      (تبقى زرَّ إغلاق). ⚠️ **بلا `position:absolute`**: المطلقُ يجعل الخانةَ
      والعدسةَ تتراكبان متى تغيّر ترتيبُ عناصرِ الشريط.                        */
  body.gs-search-on .gs-wrap{
    display:flex !important;position:relative;left:auto;top:auto;transform:none;
    flex:1 1 auto;max-width:none;margin-inline:0;
  }
  /*  ⚠ المغلّفُ يُخفى كذلك: إخفاءُ أبنائِه يتركُه عنصرَ flex ينمو بـ`flex-grow:1`
        فيأخذ نصفَ الشريطِ فارغاً ويدفعُ الخانةَ — والنهايةُ تبقى للعدسةِ
        لكن بـ`flex:0 0 auto` فلا تزاحمُها على المساحة.                       */
  body.gs-search-on .topbar-end{flex:0 0 auto;}
  body.gs-search-on .topbar-start,
  body.gs-search-on .topbar-title,
  body.gs-search-on #menu-toggle,
  body.gs-search-on #topbar-actions,
  body.gs-search-on #btn-apps,
  body.gs-search-on #ntf-wrap,
  body.gs-search-on #theme-toggle,
  body.gs-search-on .lang-menu-wrap,
  body.gs-search-on .user-menu-wrap{display:none !important;}
  /*  الخانةُ بيضاءُ دائماً بهذا الوضع (لا تنتظر التركيز) لأنها المحتوى الوحيد */
  body.gs-search-on #gs-input{background:#fff;color:#111;}
  body.gs-search-on #gs-input::placeholder{color:#888;}
  body.gs-search-on .gs-wrap>i{color:#666;}
}

/* User menu */
.user-menu-wrap{position:relative;}
.user-btn{display:flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:10px;cursor:pointer;border:1.5px solid var(--border);background:var(--bg);transition:all .2s;}
.user-btn:hover{border-color:var(--primary-light);background:#fff;}
.user-avatar-sm{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0;}
.user-name-sm{font-size:13px;font-weight:700;color:var(--text);}
.user-role-sm{font-size:10px;color:var(--text-muted);}
.user-dropdown{position:absolute;top:calc(100% + 8px);inset-inline-end:0;inset-inline-start:auto;background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.15);border:1px solid var(--border);min-width:180px;display:none;z-index:200;overflow:hidden;}
.user-dropdown.open{display:block;animation:dropIn .15s ease;}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
.user-dropdown-item{display:flex;align-items:center;gap:10px;padding:11px 16px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;transition:background .15s;}
.user-dropdown-item:hover{background:var(--bg);}
.user-dropdown-item.danger{color:var(--danger);}
.user-dropdown-item.danger:hover{background:rgba(232,64,64,.06);}
.user-dropdown-divider{height:1px;background:var(--border);margin:4px 0;}

/* ── BUTTONS ────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--radius-sm);font-family:'Tajawal',sans-serif;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .2s;white-space:nowrap;}
.btn-primary{background:linear-gradient(135deg,var(--primary-light),var(--primary));color:#fff;box-shadow:0 4px 12px rgba(26,58,92,.2);}
.btn-primary:hover{box-shadow:0 6px 18px rgba(26,58,92,.3);transform:translateY(-1px);}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#fff;box-shadow:0 4px 12px rgba(139,26,26,.25);}
.btn-accent:hover{box-shadow:0 6px 18px rgba(139,26,26,.35);transform:translateY(-1px);}
.btn-success{background:var(--success);color:#fff;}
.btn-danger{background:var(--danger);color:#fff;}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text-muted);}
.btn-outline:hover{box-shadow:0 6px 18px rgba(26,58,92,.3);transform:translateY(-1px);}
.btn-today{background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#fff;box-shadow:0 4px 12px rgba(139,26,26,.25);}
.btn-today:hover{box-shadow:0 6px 18px rgba(139,26,26,.35);transform:translateY(-1px);}
.btn-icon{padding:7px 9px;}
.btn-icon:hover{box-shadow:0 6px 18px rgba(26,58,92,.3);transform:translateY(-1px);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;}

.content{padding:22px 26px;flex:1;}
.page-section{display:none;}.page-section.active{display:block;}

/* ── STATS ──────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px;}
.stat-card{background:var(--card);border-radius:var(--radius);padding:20px 18px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow);border:1px solid var(--border);transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;}
.stat-card::before{content:'';position:absolute;top:0;right:0;width:4px;height:100%;border-radius:0 var(--radius) var(--radius) 0;}
.stat-card.blue::before{background:var(--primary-light);}
.stat-card.red::before{background:var(--accent);}
.stat-card.green::before{background:var(--success);}
.stat-card.orange::before{background:#e8871a;}
.stat-card.teal::before{background:var(--info);}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(26,58,92,.12);}
.stat-icon{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.stat-card.blue .stat-icon{background:rgba(42,82,152,.1);color:var(--primary-light);}
.stat-card.red .stat-icon{background:rgba(139,26,26,.1);color:var(--accent);}
.stat-card.green .stat-icon{background:rgba(26,171,92,.1);color:var(--success);}
.stat-card.orange .stat-icon{background:rgba(232,135,26,.1);color:#e8871a;}
.stat-card.teal .stat-icon{background:rgba(26,143,168,.1);color:var(--info);}
.stat-info h3{font-size:24px;font-weight:800;color:var(--text);line-height:1;}
.stat-info p{font-size:12px;color:var(--text-muted);margin-top:3px;font-weight:500;}
.stat-info small{font-size:11px;color:var(--success);font-weight:600;}

/* ── CHARTS ─────────────────────────────────────── */
.charts-row{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:22px;}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden;}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.card-header h3{font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;}
.card-header h3 i{color:var(--accent);}
.card-body{padding:18px 20px;}
.bar-chart{display:flex;align-items:flex-end;gap:8px;height:150px;}
.bar-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;}
.bar{width:100%;border-radius:5px 5px 0 0;transition:height .5s cubic-bezier(.4,2,.6,1);min-height:3px;cursor:pointer;position:relative;}
.bar:hover::after{content:attr(data-val);position:absolute;top:-24px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:2px 7px;border-radius:5px;font-size:10px;white-space:nowrap;}
.bar-label{font-size:10px;color:var(--text-muted);font-weight:500;}
.donut-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;}
.donut-svg{width:150px;height:150px;}
.legend-item{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:12.5px;}
.legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.legend-label{flex:1;color:var(--text-muted);}
.legend-val{font-weight:700;color:var(--text);}

/* ── TABLE ──────────────────────────────────────── */
.table-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.search-box{display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:8px 13px;flex:1;min-width:180px;transition:border-color .2s;}
.search-box:focus-within{border-color:var(--primary-light);}
.search-box i{color:var(--text-muted);font-size:13px;}
.search-box input{border:none;outline:none;font-family:'Tajawal',sans-serif;font-size:13px;background:transparent;color:var(--text);width:100%;}
.filter-select{padding:8px 13px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:'Tajawal',sans-serif;font-size:13px;color:var(--text);background:var(--card);cursor:pointer;outline:none;transition:border-color .2s;}
.filter-select:focus{border-color:var(--primary-light);}
input[type="date"].filter-select,input[type="date"].form-control,
input[type="datetime-local"].filter-select,input[type="datetime-local"].form-control{direction:ltr;text-align:left;}
/* Date picker wrapper */
.date-wrap{display:inline-flex;align-items:center;gap:0;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);overflow:hidden;transition:border-color .2s;cursor:pointer;}
.date-wrap:hover,.date-wrap:focus-within{border-color:var(--primary-light);}
.date-wrap .date-icon{padding:0 9px;color:var(--text-muted);font-size:13px;pointer-events:none;flex-shrink:0;}
.date-wrap input[type="date"]{border:none!important;outline:none!important;background:transparent!important;font-family:'Tajawal',sans-serif;font-size:13px;color:var(--text);padding:8px 10px 8px 0;cursor:pointer;width:100%;box-shadow:none!important;text-align:center;}
.date-wrap input[type="date"]::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer;}
body.dark .date-wrap{background:var(--bg);}
body.dark .date-wrap input[type="date"]{color:var(--text);}
body.dark .date-wrap input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);}
/* Range Picker */
.range-picker{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);overflow:hidden;transition:border-color .2s;cursor:pointer;}
.range-picker:hover,.range-picker:focus-within{border-color:var(--primary-light);}
.range-picker .rp-icon{padding:0 9px;color:var(--text-muted);font-size:13px;pointer-events:none;flex-shrink:0;}
.range-picker .rp-sep{padding:0 5px;color:var(--text-muted);font-size:12px;pointer-events:none;flex-shrink:0;}
.range-picker input[type="date"]{border:none!important;outline:none!important;background:transparent!important;font-family:'Tajawal',sans-serif;font-size:13px;color:var(--text);padding:7px 4px 7px 0;cursor:pointer;width:116px;box-shadow:none!important;text-align:center;}
.range-picker input[type="date"]::-webkit-calendar-picker-indicator{opacity:.6;cursor:pointer;}
body.dark .range-picker{background:var(--bg);}
body.dark .range-picker input[type="date"]{color:var(--text);}
body.dark .range-picker input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);}
/* ── Date Range Picker Popup (DRP) ── */
.drp-trigger{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--card);color:var(--text);font-family:'Tajawal',sans-serif;font-size:13px;cursor:pointer;transition:border-color .2s;white-space:nowrap;height:36px;overflow:hidden;padding:0;}
.drp-trigger:hover,.drp-trigger.drp-active{border-color:var(--primary-light);}
.drp-field{display:inline-flex;align-items:center;gap:6px;padding:0 10px;height:100%;}
.drp-date-text{font-size:13px;color:var(--text);min-width:72px;letter-spacing:.3px;}
.drp-date-text.drp-ph{color:var(--text-muted);}
.drp-field i{color:var(--text-muted);font-size:12px;flex-shrink:0;}
.drp-dash{color:var(--text-muted);font-size:13px;padding:0 2px;flex-shrink:0;}
#drp-popup{position:fixed;z-index:9999;background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px rgba(0,0,0,.2);padding:16px;width:280px;direction:rtl;}
.drp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;direction:ltr;}
.drp-month-label{font-size:14px;font-weight:700;color:var(--text);direction:rtl;}
.drp-nav{background:none;border:1.5px solid var(--border);border-radius:50%;width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .15s;font-size:11px;flex-shrink:0;}
.drp-nav:hover{border-color:var(--primary-light);color:var(--primary-light);}
.drp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px;direction:ltr;}
.drp-weekdays span{text-align:center;font-size:10px;font-weight:700;color:var(--text-muted);padding:3px 0;}
.drp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;direction:ltr;}
.drp-day{display:flex;align-items:center;justify-content:center;height:34px;border-radius:50%;font-size:12px;cursor:pointer;color:var(--text);position:relative;transition:background .12s,color .12s;user-select:none;}
.drp-day:hover:not(.drp-empty){background:rgba(87,118,173,.12);}
.drp-day.drp-empty{cursor:default;}
.drp-day.drp-future{color:var(--text-muted);opacity:.65;}
.drp-day.drp-today::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--accent);}
.drp-day.drp-start,.drp-day.drp-end{background:var(--primary)!important;color:#fff!important;border-radius:50%!important;z-index:1;}
.drp-day.drp-in-range{background:rgba(87,118,173,.15);border-radius:0;color:var(--text);}
.drp-day.drp-start.drp-in-range{border-radius:50% 0 0 50%!important;}
.drp-day.drp-end.drp-in-range{border-radius:0 50% 50% 0!important;}
.drp-day.drp-start.drp-same-day,.drp-day.drp-end.drp-same-day{border-radius:50%!important;}
.drp-footer{display:flex;gap:8px;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);}
body.dark #drp-popup{background:var(--card);border-color:var(--border);}
body.dark .drp-day.drp-start,body.dark .drp-day.drp-end{background:var(--primary-light)!important;}
body.dark .drp-trigger{background:var(--bg);}
body.dark .drp-date-text{color:var(--text);}
body.dark .drp-date-text.drp-ph{color:var(--text-muted);}
.table-wrap{overflow-x:auto;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead{background:var(--primary);color:#fff;}
thead th{padding:12px 11px;text-align:center;font-weight:700;font-size:11.5px;white-space:nowrap;cursor:pointer;user-select:none;transition:background .15s;position:relative;background:var(--primary);}
thead th:hover{background:#1e4a7a;}
thead th .sort-icon{font-size:9px;opacity:.5;margin-right:3px;}
thead th.sort-asc .sort-icon::before{content:'\f0de';}
thead th.sort-desc .sort-icon::before{content:'\f0dd';}
tbody tr{border-bottom:1px solid var(--border);transition:background .15s;}
tbody tr:hover{background:rgba(42,82,152,.03);}
tbody tr:last-child{border-bottom:none;}
tbody td{padding:10px 11px;vertical-align:middle;}
td.wrap-cell{white-space:normal;max-width:200px;word-break:break-word;font-size:12px;}
td.nowrap{white-space:nowrap;}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;}
.badge-scheduled{background:rgba(42,82,152,.12);color:var(--primary-light);}
.badge-inprogress{background:rgba(244,196,48,.15);color:#9a7100;}
.badge-completed{background:rgba(26,171,92,.12);color:var(--success);}
.badge-delayed{background:rgba(26,143,168,.12);color:var(--info);}
.badge-cancelled{background:rgba(232,64,64,.12);color:var(--danger);}
.badge-withdrawn{background:rgba(141,110,99,.14);color:#8d6e63;}
.badge-exec-withdrawn{background:rgba(23,201,110,.13);color:#17c96e;}
.badge-new-client{background:rgba(232,135,26,.12);color:#c06800;font-size:10px;padding:2px 6px;}
.action-btns{display:flex;gap:3px;white-space:nowrap;}
.code-cell{font-family:monospace;background:rgba(26,58,92,.07);padding:2px 6px;border-radius:4px;font-size:11.5px;font-weight:700;color:var(--primary-light);}
.row-num{font-size:12px;font-weight:700;color:var(--text-muted);}
.pagination{display:flex;align-items:center;gap:5px;padding:14px 18px;border-top:1px solid var(--border);justify-content:space-between;flex-wrap:wrap;}
.pagination-info{font-size:12px;color:var(--text-muted);}
.page-btns{display:flex;gap:4px;}
.page-btn{width:32px;height:32px;border-radius:7px;border:1.5px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;font-weight:600;color:var(--text-muted);transition:all .15s;font-family:'Tajawal',sans-serif;}
.page-btn:hover,.page-btn.active{background:var(--primary);border-color:var(--primary-light);color:#fff;}

/* ── MODAL ──────────────────────────────────────── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(5,15,35,.6);backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center;padding:14px;}
.modal-overlay.open{display:flex;}
#confirm-modal{z-index:1100;}
.modal{background:var(--card);border-radius:var(--radius);box-shadow:0 24px 70px rgba(0,0,0,.28);width:100%;max-width:920px;max-height:93vh;overflow-y:auto;animation:modalIn .22s cubic-bezier(.4,1.3,.6,1);}
.modal.sm{max-width:480px;}
.modal.md{max-width:600px; overflow: visible;}
@keyframes modalIn{from{opacity:0;transform:scale(.92) translateY(18px);}to{opacity:1;transform:none;}}
.modal-header{padding:20px 24px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;position:sticky;top:0;background:var(--card);z-index:2;}
.modal-header h2{font-size:16px;font-weight:800;color:var(--primary-light);flex:1;}
.modal-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;flex-shrink:0;}
.modal-close{width:32px;height:32px;border-radius:7px;border:1.5px solid var(--border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text-muted);transition:all .15s;}
.modal-close:hover{background:var(--danger);border-color:var(--danger);color:#fff;}
.modal-body{padding:22px 24px;}
.modal-footer{padding:14px 24px;border-top:1px solid var(--border);display:flex;gap:9px;justify-content:flex-end;position:sticky;bottom:0;background:var(--card);}

/* ── FORM ───────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.form-grid.g2{grid-template-columns:repeat(2,1fr);}
.form-grid.g4{grid-template-columns:repeat(4,1fr);}
.form-grid.g1{grid-template-columns:1fr!important;}
.span2{grid-column:span 2;}
.span3{grid-column:span 3;}
.span4{grid-column:span 4;}
.form-group{display:flex;flex-direction:column;gap:5px;}
.form-group label{font-size:11.5px;font-weight:700;color:var(--text-muted);display:flex;align-items:center;gap:4px;}
.form-group label i{color:var(--accent);font-size:10px;}
.req::after{content:' *';color:var(--danger);}
.form-control{padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:'Tajawal',sans-serif;font-size:13.5px;color:var(--text);background:var(--bg);outline:none;transition:all .2s;width:100%;}
.form-control:focus{border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(42,82,152,.09);}
.form-control.error{border-color:var(--danger);}
.field-error{border:2px solid #e84040 !important;}
.ss-display.field-error{border:2px solid #e84040 !important;}
textarea.form-control{min-height:70px;resize:vertical;}
.section-title{grid-column:1/-1;font-size:12px;font-weight:800;color:var(--primary-light);padding-bottom:7px;border-bottom:2px solid var(--accent);margin-top:6px;display:flex;align-items:center;gap:6px;letter-spacing:.3px;}

/* Smart dropdown */
.autocomplete-wrap{position:relative;}
.autocomplete-list{position:absolute;top:calc(100% + 4px);right:0;left:0;background:#fff;border:1.5px solid var(--primary-light);border-radius:var(--radius-sm);box-shadow:0 8px 28px rgba(0,0,0,.13);max-height:220px;overflow-y:auto;z-index:500;display:none;}
.autocomplete-list.open{display:block;}
.ac-item{padding:9px 13px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--border);transition:background .12s;}
.ac-item:hover,.ac-item.selected{background:rgba(42,82,152,.07);}
.ac-item:last-child{border-bottom:none;}
.ac-item .ac-code{font-size:11px;color:var(--text-muted);margin-top:1px;}
.ac-new{color:var(--accent);font-weight:700;}

/* Client indicator */
.client-indicator{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;margin-top:3px;}
.ci-existing{background:rgba(26,171,92,.1);color:var(--success);}
.ci-new{background:rgba(232,135,26,.12);color:#c06800;}
/* Phone suggestions */
#phone-suggestions,#date-suggestions,#location-suggestions,#supervisor-suggestions,#concrete-type-suggestions,#pour-type-suggestions,#equipment-suggestions,#cars-suggestions{display:none;flex-wrap:wrap;gap:6px;margin-top:5px;}
.phone-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 4px;border-radius:20px;border:1.5px solid var(--border);background:var(--bg);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;font-family:'Tajawal',sans-serif;transition:all .15s;direction:ltr;}
.phone-chip:hover{border-color:var(--primary-light);background:rgba(42,82,152,.07);}
.phone-chip.active{border-color:var(--primary-light);background:var(--primary);color:#fff;}
/* Locked SS delegate */
.ss-display.locked{pointer-events:none;background:#f5f7fa;cursor:not-allowed;}

/* Searchable select */
.ss-wrap{position:relative;}
.ss-display{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);cursor:pointer;transition:all .2s;min-height:40px;font-size:13.5px;color:var(--text);}
.ss-display:hover,.ss-display.open{border-color:var(--primary-light);background:#fff;}
.ss-display .placeholder{color:var(--text-muted);}
.ss-dropdown{position:absolute;top:calc(100% + 4px);right:0;left:0;background:#fff;border:1.5px solid var(--primary-light);border-radius:var(--radius-sm);box-shadow:0 8px 28px rgba(0,0,0,.13);z-index:500;display:none;overflow:hidden;}
.ss-dropdown.open{display:block;}
/* 🎭 لافتةُ رفضِ الدورِ الأساسيّ — لونان **مقيسان** لا واحد: `--danger` يعطي
   4.01 على الأبيضِ و4.07 على بطاقةِ الداكن، والحدُّ 4.5 لنصّ. ولا لونَ واحداً
   يجتاز الطرفين (الأبيضُ يطلب سطوعاً أدنى والداكنُ أعلى) — فالفصلُ حسابيٌّ. */
.u-roles-hint{font-size:11px;margin-top:4px;color:#c62828;}        /* 5.62 على الأبيض */
body.dark .u-roles-hint{color:#f28b82;}                            /* 6.84 على #172030 */
.ss-search{padding:8px 10px;border-bottom:1px solid var(--border);}
.ss-search input{width:100%;border:1.5px solid var(--border);border-radius:6px;padding:6px 10px;font-family:'Tajawal',sans-serif;font-size:13px;outline:none;}
.ss-search input:focus{border-color:var(--primary-light);}
.ss-options{max-height:200px;overflow-y:auto;}
/* Multi-select tags */
.ss-tags{display:flex;flex-wrap:wrap;gap:4px;flex:1;}
.ss-tag{display:inline-flex;align-items:center;gap:4px;background:var(--primary);color:#fff;border-radius:5px;padding:2px 8px;font-size:12px;font-weight:600;}
.ss-tag .ss-tag-x{cursor:pointer;font-size:11px;opacity:.8;margin-right:2px;}
.ss-tag .ss-tag-x:hover{opacity:1;}
.ss-option.checked{background:rgba(42,82,152,.08);font-weight:700;}
.ss-option.checked::before{content:'✓ ';color:var(--primary-light);}
.ss-option{padding:9px 13px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--border);transition:background .12s;}
.ss-option:hover,.ss-option.active{background:rgba(42,82,152,.07);}
.ss-option:last-child{border-bottom:none;}
.ss-option.selected{color:var(--primary-light);font-weight:700;}
.ss-empty{padding:12px;text-align:center;color:var(--text-muted);font-size:12px;}

/* ── USERS ──────────────────────────────────────── */
.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.user-card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid var(--border);display:flex;flex-direction:column;gap:12px;transition:transform .2s,box-shadow .2s;}
.user-card:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(26,58,92,.12);}
.user-card-header{display:flex;align-items:center;gap:12px;}
.user-avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;flex-shrink:0;}
.user-info h4{font-size:14px;font-weight:700;}
.user-info span{font-size:11px;color:var(--text-muted);}
.role-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.role-sm{background:rgba(42,82,152,.12);color:var(--primary-light);}
.role-admin{background:rgba(139,26,26,.12);color:var(--accent);}
.role-user{background:rgba(26,143,168,.12);color:var(--info);}
.role-booking{background:rgba(26,143,168,.12);color:var(--info);}
.role-viewer{background:rgba(100,100,100,.12);color:#6b7c93;}
.role-executor{background:rgba(230,126,34,.12);color:#e67e22;}
body.no-select *{user-select:none;-webkit-user-select:none;}
body.no-select input,body.no-select textarea,body.no-select select{user-select:text;-webkit-user-select:text;}
.user-card-footer{display:flex;gap:7px;border-top:1px solid var(--border);padding-top:12px;}

/* ── UPCOMING ────────────────────────────────────── */
.upcoming-list{display:flex;flex-direction:column;gap:9px;}
.upcoming-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:10px;border:1px solid var(--border);transition:background .15s;}
.upcoming-item:hover{background:var(--bg);}
.upcoming-time{text-align:center;min-width:54px;background:var(--bg);border-radius:8px;padding:6px;}
.upcoming-time .time{font-size:13px;font-weight:800;color:var(--primary-light);}
.upcoming-time .date{font-size:9px;color:var(--text-muted);}
.upcoming-info{flex:1;min-width:0;}
.upcoming-info h4{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.upcoming-info p{font-size:11px;color:var(--text-muted);margin-top:2px;}

/* ── SCHEDULE ────────────────────────────────────── */
.schedule-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.schedule-card{position:relative;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);overflow:hidden;transition:box-shadow .2s,transform .15s,border-color .2s;display:flex;flex-direction:column;cursor:pointer;}
.schedule-card:hover{box-shadow:0 8px 24px rgba(26,58,92,.18);transform:translateY(-2px);border-color:var(--primary-light);}
/* ═══ وضع «عرض التفاصيل» لكارد الجدول اليومي (sc-hoverable فقط) ═══
   عند التمرير يظهر نفس الكارد مكبَّراً (sc-full) فوق الأصلي بعرض --sc-hover-width
   ويعرض كل بيانات الحجز. عدّل العرض من السطر التالي فقط: */
:root{--sc-hover-width:400px;}
.schedule-card.sc-hoverable:hover{overflow:visible;z-index:60;}
.sc-full{display:none;}
.schedule-card.sc-hoverable:hover .sc-full{display:flex;flex-direction:column;position:absolute;top:-4px;left:50%;transform:translateX(calc(-50% + var(--sc-shift,0px)));width:var(--sc-hover-width);max-width:calc(100vw - 24px);min-height:calc(100% + 8px);background:var(--card);border:1.5px solid var(--primary-light);border-radius:var(--radius);box-shadow:0 18px 46px rgba(26,58,92,.32);overflow:hidden;z-index:61;animation:scFullIn .13s ease;cursor:pointer;}
@keyframes scFullIn{from{opacity:0;}to{opacity:1;}}
.sc-full-body{padding:13px 16px 12px;flex:1;display:flex;flex-direction:column;gap:9px;text-align:center;}
.sc-f-times{display:flex;justify-content:center;gap:26px;align-items:flex-start;position:relative;min-height:34px;}
.sc-f-time .t{font-size:19px;font-weight:800;color:var(--primary-light);line-height:1.1;unicode-bidi:isolate;}
.sc-f-time .l{font-size:10px;font-weight:700;color:var(--text-muted);margin-top:3px;}
.sc-f-col{position:absolute;left:0;top:2px;}
.sc-f-client{font-size:14.5px;font-weight:800;white-space:normal;line-height:1.55;}
.sc-f-code{color:var(--primary-light);font-weight:800;}
.sc-f-loc{font-size:11.5px;color:var(--text-muted);white-space:normal;line-height:2;}
.sc-f-grid{display:grid;gap:5px;}
.sc-f-status{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;}
.sc-f-reason{font-size:10.5px;font-weight:600;color:var(--text-muted);line-height:1.5;text-align:right;white-space:normal;}
body.dark .sc-f-time .t{color:var(--primary-light);}
/* ── كارد معاينة الحجز (زر 👁 في bk-actions-pop): نفس sc-full لكن كطبقة وسط
   الشاشة — التموضع absolute/hover يُلغى داخل الغلاف، والنقر على الحاجب يغلق ── */
#bk-preview-ov{position:fixed;inset:0;z-index:1200;background:rgba(10,22,40,.5);display:flex;align-items:center;justify-content:center;padding:20px;animation:scFullIn .13s ease;}
#bk-preview-ov .bk-preview-card{width:min(var(--sc-hover-width),92vw);max-height:92vh;overflow-y:auto;border-radius:var(--radius);}
#bk-preview-ov .sc-full{display:flex;flex-direction:column;position:static;transform:none;width:100%;min-height:0;background:var(--card);border:1.5px solid var(--primary-light);border-radius:var(--radius);box-shadow:0 18px 46px rgba(26,58,92,.4);overflow:hidden;cursor:default;}
.schedule-card-bar{height:4px;flex-shrink:0;}
.schedule-card-body{padding:11px 13px;flex:1;display:flex;flex-direction:column;gap:7px;}
.schedule-card-time{font-size:18px;font-weight:800;color:var(--primary-light);line-height:1;unicode-bidi:isolate;}
.schedule-card-sub{font-size:10px;color:var(--text-muted);margin-top:1px;}
.schedule-card-client{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.schedule-card-loc{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.schedule-card-details{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.schedule-card-detail{background:var(--bg);border-radius:6px;padding:4px 6px;text-align:center;min-width:0;}
.schedule-card-detail .dval{font-size:11px;font-weight:800;color:var(--primary-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.schedule-card-detail .dlbl{font-size:9px;color:var(--text-muted);margin-top:1px;}
.schedule-card-footer{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px;border-top:1px solid var(--border);}
.schedule-card-notes{font-size:10px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── LOGS ───────────────────────────────────────── */
.log-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.log-item:last-child{border-bottom:none;}
.log-dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;flex-shrink:0;margin-top:2px;}
.log-info{flex:1;}
.log-action{font-size:13px;font-weight:700;}
.log-meta{font-size:11px;color:var(--text-muted);margin-top:3px;display:flex;gap:12px;flex-wrap:wrap;}
.log-time{font-size:11px;color:var(--text-muted);text-align:left;white-space:nowrap;}
/* Collapse group */
.log-group-wrap{border-bottom:1px solid var(--border);padding: 5px 0 5px 0;}
.log-group-wrap .log-item{border-bottom:none;}
.log-group-rest .log-item{border-top:1px dashed var(--border);padding-top:10px;}
.log-expand-btn{display:inline-flex;align-items:center;gap:6px;margin:4px 0 8px 46px;padding:3px 10px;font-size:11px;font-weight:700;color:var(--primary-light);background:var(--primary-bg,rgba(42,82,152,.07));border:1px solid rgba(42,82,152,.18);border-radius:20px;cursor:pointer;transition:background .15s;}
.log-expand-btn:hover{background:rgba(42,82,152,.14);}
.log-expand-btn i{font-size:9px;}
.log-item-important{background:rgba(244,196,48,.06);border-radius:8px;padding-right:8px;border-right:3px solid #f4c430;}

/* ── ALERTS / TOASTS ────────────────────────────── */
.alert{padding:11px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;display:flex;align-items:center;gap:9px;margin-bottom:11px;}
.alert-danger{background:rgba(232,64,64,.08);color:var(--danger);border:1px solid rgba(232,64,64,.18);}
.alert-warning{background:rgba(244,196,48,.1);color:#9a7100;border:1px solid rgba(244,196,48,.25);}
/* ── LOADING SCREEN ─────────────────────────────────── */
#loading-screen{position:fixed;inset:0;background:rgba(15,37,64,.88);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:99998;flex-direction:column;gap:16px;}
#loading-screen.hidden{display:none;}
.spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.15);border-top-color:#8b1a1a;border-radius:50%;animation:spin .7s linear infinite;}
.loading-text{color:#fff;font-size:15px;font-weight:600;letter-spacing:.5px;}
@keyframes spin{to{transform:rotate(360deg);}}
#toast-container{position:fixed;bottom:22px;left:22px;z-index:9999;display:flex;flex-direction:column;gap:9px;}
.toast{background:var(--primary);color:#fff;padding:12px 16px;border-radius:10px;font-size:13.5px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.2);display:flex;align-items:center;gap:9px;animation:toastIn .28s cubic-bezier(.4,1.3,.6,1);min-width:240px;max-width:340px;}
.toast.success{background:var(--success);}
.toast.error{background:var(--danger);}
.toast.warning{background:#c07800;}
@keyframes toastIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

/* ── CONFIRM MODAL ──────────────────────────────── */
.confirm-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px;}
.confirm-title{font-size:18px;font-weight:800;text-align:center;color:var(--text);margin-bottom:8px;}
.confirm-msg{font-size:13.5px;text-align:center;color:var(--text-muted);line-height:1.6;}

/* ── EMPTY STATE ────────────────────────────────── */
.empty-state{text-align:center;padding:50px 20px;color:var(--text-muted);}
.empty-state i{font-size:52px;opacity:.15;margin-bottom:14px;display:block;}
.empty-state h3{font-size:17px;font-weight:700;margin-bottom:6px;}
.empty-state p{font-size:13px;}

/* ── REPORTS ────────────────────────────────────── */
.report-filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px;background:var(--card);padding:14px 18px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);}

/* ── MISC ───────────────────────────────────────── */
/* Two-column block in modals (large screens only) */
.stats-detail-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.stats-detail-two-col > div{min-width:0;overflow:hidden;}
.highlight{background:rgba(255,220,0,.3);border-radius:2px;}
@media print{#sidebar,.topbar,.table-controls,.action-btns,.pagination,#login-screen{display:none!important;}body{background:#fff;}.content{padding:0;}}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — Mobile & Tablet
   ═══════════════════════════════════════════════════ */

/* ── Hamburger button ── */
#menu-toggle{display:flex;background:none;border:none;cursor:pointer;padding:6px;border-radius:4px;color:#fff;font-size:18px;line-height:1;transition:background .15s;}
#menu-toggle:hover{background:rgba(255,255,255,.12);}

/* ── Sidebar overlay (mobile only) ── */
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99;backdrop-filter:blur(2px);}
#sidebar-overlay.active{display:block;}

/* ── Mini sidebar (desktop — icons only) ── */
#sidebar.mini{width:62px;min-width:62px;}
#sidebar.mini .logo-text{display:none;}
#sidebar.mini .sidebar-logo{justify-content:center;padding:16px 8px;}
#sidebar.mini .nav-section-title{display:none;}
#sidebar.mini .nav-item{justify-content:center;padding:10px 8px;}
#sidebar.mini .nav-item span{display:none;}
#sidebar.mini .nav-item i{width:auto;font-size:16px;}
#sidebar.mini .nav-badge{display:none;}
#sidebar.mini .sidebar-footer{padding:8px;}
#sidebar.mini .sidebar-footer .btn span{display:none;}
#sidebar.mini .nav-parent{justify-content:center;padding:10px 8px;}
#sidebar.mini .nav-parent span{display:none;}
#sidebar.mini .nav-parent .nav-chevron{display:none;}
#sidebar.mini .nav-sub{display:none !important;}

/* ═══════ TABLET (max 1024px) ═══════ */
@media (max-width:1024px){
  #sidebar{width:230px;min-width:230px;}
  .content{padding:16px 18px;}
  .stats-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
  .form-grid.g2{grid-template-columns:1fr 1fr;}
  .modal .modal-body{padding:16px 18px;}
}

/* ═══════ MOBILE (max 768px) ═══════ */
@media (max-width:768px){

  /* Layout */
  body{flex-direction:column;overflow-x:hidden;}
  #menu-toggle{display:flex;}
  #main{width:100%;min-width:0;}

  /* Sidebar — drawer */
  #sidebar{
    position:fixed;top:0;right:0;height:100vh;
    width:220px;min-width:220px;
    z-index:100;
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
  }
  #sidebar.open{transform:translateX(0);}

  /* Topbar */
  .topbar{padding:0 10px;gap:6px;}
  .topbar-title{font-size:14px;}
  .user-name-sm{display:none;}
  .user-role-sm{display:none;}
  .user-btn{padding:6px 8px;}
  .user-dropdown{inset-inline-end:0;inset-inline-start:auto;min-width:200px;max-width:calc(100vw - 24px);}

  /* Content */
  .content{padding:12px 10px;}

  /* Stats */
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
  .stat-card{padding:14px 12px;gap:10px;}
  .stat-icon{width:38px;height:38px;font-size:15px;}
  .stat-info h3{font-size:18px;}

  /* Tables */
  table{min-width:900px;}

  /* Table controls */
  .table-controls{flex-wrap:wrap;gap:6px;padding:10px;}
  .table-controls .search-box{width:100%;order:-1;}
  .filter-select{font-size:12px;padding:6px 8px;}

  /* Forms */
  .form-grid.g2,.form-grid,.form-grid.g4{grid-template-columns:1fr 1fr!important;}
  .form-grid .span4{grid-column:span 2!important;}
  .form-grid .span3{grid-column:span 2!important;}
  .form-grid .span2{grid-column:span 2!important;}
  .form-grid .section-title{grid-column:1/-1!important;}
  .form-grid.g2{grid-template-columns:1fr 1fr!important;}
  /* الحالة + السبب على نفس الصف بالجوال */
  .form-grid .bk-half{grid-column:span 1!important;}
  /* زر "أضف الخلاطات" لوحده بصف كامل */
  .form-grid .bk-mixer-group{grid-column:span 2!important;}

  /* Modals */
  .modal-overlay{align-items:flex-end;padding:0;}
  .modal,.modal.sm,.modal.md{
    width:100%!important;max-width:100%!important;
    border-radius:20px 20px 0 0;
    max-height:90vh;
    overflow-y:auto;
    margin:0;
  }
  .modal-header{padding:16px 18px 14px;}
  .modal-body{padding:14px 18px;}
  .modal-footer{padding:12px 18px 20px;flex-direction:column;gap:8px;}
  .modal-footer .btn{width:100%;justify-content:center;}

  /* Buttons */
  .btn{font-size:13px;padding:8px 14px;}
  .btn-sm{padding:5px 10px;font-size:11px;}

  /* Charts */
  .charts-row{flex-direction:column;gap:14px;}
  .chart-card{width:100%!important;}

  /* Schedule cards */
  .schedule-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}

  /* Users grid */
  .users-grid,.grid-2{grid-template-columns:1fr!important;}

  /* Log items */
  .log-item{flex-wrap:wrap;}
  .log-time{font-size:10px;}

  /* Login */
  .login-card{padding:28px 20px;border-radius:16px;max-width:100%;}
  #login-screen{padding:12px;}

  /* Page title on mobile */
  .page-section > h2{font-size:15px;}

  /* Pagination */
  .pagination{flex-direction:column;gap:8px;align-items:center;}
  .pagination-info{text-align:center;}

  /* Nav badge */
  .nav-badge{font-size:10px;padding:1px 6px;}

  /* Booking table action buttons */
  .action-btns{flex-direction:column;gap:3px;}

  /* Report filter bar */
  .report-filter-bar{flex-direction:column;align-items:stretch;gap:8px;}
  .report-filter-bar .btn{justify-content:center;}
  .stats-detail-two-col{grid-template-columns:1fr;}
}

/* ═══════ SMALL MOBILE (max 480px) ═══════ */
@media (max-width:480px){
  .user-dropdown{position:fixed!important;top:54px!important;left:6px!important;right:auto!important;max-width:calc(100vw - 12px);min-width:180px;}
  .stats-grid{grid-template-columns:repeat(6,1fr);gap:8px;}
  .stats-grid .stat-card:nth-child(-n+4){grid-column:span 3;}
  .stats-grid .stat-card:nth-child(n+5){grid-column:span 2;}
  .charts-row{grid-template-columns:1fr !important;}
  #page-stats .stats-grid{grid-template-columns:1fr !important;}
  #page-stats .stats-grid .stat-card{grid-column:auto !important;}
  #page-bookings .table-controls{flex-wrap:wrap;gap:6px;}
  #page-bookings .table-controls .search-box{width:100%;order:-1;}
  #page-bookings .table-controls #filter-status,
  #page-bookings .table-controls #filter-type,
  #page-bookings .table-controls .date-wrap,
  #page-bookings .table-controls .btn.btn-outline.btn-sm{flex:1 1 auto;min-width:0;}
  #page-bookings .table-controls #btn-add-booking{order:10;margin-top:4px;}
  .upcoming-item{padding:6px 8px;gap:7px;}
  .upcoming-time{min-width:40px;padding:4px;}
  .upcoming-time .time{font-size:11px;}
  .upcoming-info h4{font-size:11px;}
  .upcoming-info p{font-size:9px;}
  #schedule-cards{grid-template-columns:repeat(6,1fr)!important;gap:6px;}
  #schedule-cards>div:nth-child(-n+4){grid-column:span 3;}
  #schedule-cards>div:nth-child(n+5){grid-column:span 2;}
  .form-grid,.form-grid.g2,.form-grid.g4{grid-template-columns:1fr 1fr!important;gap:8px;}
  .form-grid .section-title{grid-column:1/-1!important;}
  .form-grid .span4{grid-column:span 2!important;}
  .form-grid .span3{grid-column:span 2!important;}
  .form-grid .span2{grid-column:span 1!important;}
  .form-grid .bk-mixer-group{grid-column:span 2!important;}
  .form-grid .form-group:has(textarea){grid-column:span 2!important;}
  /* الموعد والكميات في مودال الحجز — موبايل صغير */
  #booking-date-qty-row{flex-wrap:wrap;gap:8px!important;}
  #booking-date-qty-row>.form-group:nth-child(1),
  #booking-date-qty-row>.form-group:nth-child(2){flex:0 0 calc(50% - 4px)!important;min-width:0;}
  #booking-date-qty-row>.form-group:nth-child(n+3){flex:1 1 calc(25% - 6px)!important;min-width:60px;}
  #booking-date-qty-row>.form-group:nth-child(n+3) input{width:100%!important;}
  .stat-card{padding:12px;}
  .content{padding:8px 6px;}
  .topbar{padding:0 8px;}
  .modal,.modal.sm,.modal.md{max-height:95vh;}
  table{min-width:800px;}
}
/* ── Schedule card: time row + collection indicator ── */
.sc-time-row{display:flex;align-items:center;justify-content:space-between;gap:4px;}
.sc-col-badge{display:inline-flex;align-items:center;gap:3px;font-size:17px;font-weight:700;flex-shrink:0;}
.sc-col-ok{color:var(--success);}
.sc-col-stop{color:var(--danger);}
.sc-col-num{font-weight: 800;background: rgba(232, 135, 26, .12);color: #b88a00;font-size: 15px;padding: 2px 6px;border-radius: 20px;}
body.dark .sc-col-num{color:var(--warning);}
/* ── Collection Modal Radio Buttons ── */
.col-radio-group{display:flex;flex-direction:column;gap:8px;}
.col-radio-opt{display:flex;cursor:pointer;}
.col-radio-opt input[type="radio"]{position:absolute;opacity:0;width:0;height:0;}
.col-radio-box{display:flex;align-items:center;gap:8px;padding:10px 14px;border:2px solid var(--border);border-radius:var(--radius-sm);font-size:13px;font-weight:600;width:100%;transition:all .15s;color:var(--text);background:var(--bg);}
.col-radio-opt input:checked + .col-radio-box{border-width:2px;}
.col-radio-opt input:checked + .col-ok{border-color:var(--success);background:rgba(26,171,92,.08);color:var(--success);}
.col-radio-opt input:checked + .col-stop{border-color:var(--danger);background:rgba(232,64,64,.08);color:var(--danger);}
.col-radio-opt input:checked + .col-qty{border-color:var(--warning);background:rgba(244,196,48,.1);color:#9a7100;}
.col-radio-box:hover{border-color:var(--primary-light);}
body.dark .col-radio-box{background:var(--card);}

/* ══════════════════════════════════════════════════════════════
   FIELD TESTS — مراقبو المواقع
══════════════════════════════════════════════════════════════ */

/* صفحة الاختبارات — نفس grid الجدول اليومي */
#fieldtest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.ft-locked-card{pointer-events:none;}

/* ── المودال — أزرار وحقول ──────────────────────────────────── */
.ft-add-btn{
  border-style:dashed !important;
  color:var(--text-muted) !important;
  border-color:var(--border) !important;
}
.ft-add-btn:hover{border-color:var(--accent) !important;color:var(--accent) !important;}
.ft-del-btn{
  background:rgba(232,64,64,.08) !important;
  color:var(--danger) !important;
  border:1px solid rgba(232,64,64,.2) !important;
  width:32px;height:32px;padding:0 !important;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ft-del-btn:hover{background:rgba(232,64,64,.18) !important;}
.ft-inp{
  height:36px;font-size:10px;padding:0 10px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--border);
  background:var(--bg);color:var(--text);
  transition:border-color .2s;width:90%;box-sizing:border-box;
}
.ft-inp:focus{outline:none;border-color:var(--primary-light);background:var(--card);}
body.dark .ft-inp{background:var(--bg);color:var(--text);}
/* رقم السيارة كـ SS داخل أقسام الاختبارات */
.ft-ss-truck{width:100%;}
.ft-ss-truck .ss-display{min-height:36px;font-size:11px;padding:0 10px;}
/* الخانة المدمجة لقسم الخلاطات (رقم + نوع + كمية) */
.ft-mixer-combo{min-height:36px;font-size:11px;padding:0 10px;}
/* مربع "مرفوضة" في أقسام الاختبارات */
.ft-reject-chk{display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:700;color:#b91c1c;cursor:pointer;white-space:nowrap;user-select:none;}
.ft-reject-chk input{width:16px;height:16px;accent-color:#e84040;cursor:pointer;margin:0;flex-shrink:0;}
/* صف الخلاطة المرفوضة — أحمر فاتح */
.ft-row-rejected{background:rgba(232,64,64,.10);border:1px solid rgba(232,64,64,.30);border-radius:8px;padding:3px 5px;}
/* مراقب عام: مودال اختبارات الميدان للقراءة فقط — تعطيل التفاعل مع المدخلات وإخفاء أزرار الإضافة */
#fieldtest-modal.ft-readonly .modal-body input,
#fieldtest-modal.ft-readonly .modal-body textarea,
#fieldtest-modal.ft-readonly .modal-body .ss-display,
#fieldtest-modal.ft-readonly .modal-body .ft-reject-chk{pointer-events:none;}
#fieldtest-modal.ft-readonly .ft-add-btn{display:none !important;}
/* شارة "صبة متصلة" على كارد اختبارات الميدان (صبّة عبرت لليوم التالي ولم تنتهِ) */
.ft-carried-badge{display:inline-flex;align-items:center;gap:5px;margin:4px 0 2px;font-size:10px;font-weight:700;color:#c2410c;background:rgba(230,126,34,.12);border:1px solid rgba(230,126,34,.3);padding:3px 9px;border-radius:20px;}

/* ft-stats-wrap — desktop: 8 أعمدة، موبايل: 2 أعمدة */
#ft-stats-wrap{display:grid;grid-template-columns:repeat(8,minmax(130px,1fr));gap:8px;margin-bottom:14px;}

/* ── responsive mobile ────────────────────────────────────────── */
@media(max-width:600px){
  #fieldtest-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
  /* الأقسام ذات الحقلين (سلمب/حرارة/مكعبات): الخانتان + مربع مرفوضة + حذف بنفس الصف */
  .ft-row:not(.ft-row-mixers){grid-template-columns:1fr 1fr auto auto !important;}
  .ft-reject-chk{font-size:10px;gap:3px;}
  .ft-reject-chk input{width:15px;height:15px;}
  /* قسم الخلاطات: نفس عرض الخانات كالحاسوب مع تمرير أفقي عند الحاجة */
  #ft-mixers-list{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #ft-mixers-list>div{min-width:max-content;}
  #ft-stats-wrap{grid-template-columns:repeat(2,1fr);}
}

/* ══════════════════════════════════════════════════════════════
   DRIVER TRACKING — تتبّع السائقين
══════════════════════════════════════════════════════════════ */
.driver-wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:18px;}

/* ── بطاقة الحالة الحالية ── */
.driver-status-card{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:18px;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.18);transition:background .25s;}
.driver-status-icon{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;}
.driver-status-text{min-width:0;}
.driver-status-label{font-size:20px;font-weight:800;line-height:1.2;}
.driver-status-sub{font-size:13px;opacity:.9;margin-top:3px;}
/* علامة تغيّر اليوم — السائق ما زال في دوام مستمر من أمس */
.driver-carried-badge{margin-top:8px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.35);padding:5px 10px;border-radius:20px;}

/* ── أزرار الحالات (كبيرة وواضحة) ── */
.driver-actions{display:flex;flex-direction:column;gap:14px;}
.driver-btn{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:20px 20px;border:none;border-radius:16px;cursor:pointer;
  background:var(--db,#2563eb);color:#fff;text-align:right;
  box-shadow:0 4px 16px color-mix(in srgb,var(--db,#2563eb) 38%,transparent);
  transition:transform .12s ease,filter .15s,box-shadow .15s;
}
.driver-btn:hover{filter:brightness(1.07);}
.driver-btn:active{transform:scale(.97);}
.driver-btn:disabled{opacity:.55;cursor:default;filter:grayscale(.3);}
.driver-btn-icon{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;}
.driver-btn-label{flex:1;font-size:21px;font-weight:800;line-height:1.25;}
.driver-btn-arrow{font-size:18px;opacity:.8;flex-shrink:0;}

/* ── سجل اليوم (Timeline) ── */
.driver-timeline-wrap{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;}
.driver-timeline-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.driver-timeline-title i{color:var(--accent);}
.driver-timeline{display:flex;flex-direction:column;gap:2px;}
.driver-timeline-empty{font-size:13px;color:var(--text-muted);text-align:center;padding:14px 0;}
.driver-tl-item{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px dashed var(--border);}
.driver-tl-item:last-child{border-bottom:none;}
.driver-tl-dot{width:30px;height:30px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.driver-tl-label{flex:1;font-size:14px;font-weight:600;color:var(--text);}
.driver-tl-time{font-size:13px;font-weight:700;color:var(--text-muted);direction:ltr;}
/* دورات سجل السائق (قابلة للطي مثل أقسام اختبارات الميدان) */
.drv-cycle{border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden;}
.drv-cycle-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:var(--hover-bg,rgba(0,0,0,.04));cursor:pointer;user-select:none;}
.drv-cycle-title{font-size:13px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.drv-cycle-chevron{color:var(--text-muted);font-size:11px;transition:transform .25s;flex-shrink:0;}
.drv-cycle-body{padding:4px 12px;}
/* تاريخ الحدث (للأحداث العابرة لتاريخ المودال) — بنفس حجم نص الوقت */
.driver-tl-date{font-size:13px;font-weight:700;color:var(--accent);direction:ltr;}
/* شارة "صبة متصلة" (دورة عبرت منتصف الليل) */
.drv-cycle-badge{font-size:11px;font-weight:700;color:var(--accent);background:rgba(230,126,34,.12);border:1px solid rgba(230,126,34,.3);padding:2px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.drv-cycle-badge-row{margin-bottom:10px;}

/* ── لوحة متابعة السائقين (أدمن/تنفيذ) ── */
.driver-monitor-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.driver-monitor-title{font-size:17px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;}
.driver-monitor-title i{color:var(--accent);}
.driver-monitor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.driver-monitor-card{background:var(--card);border:1px solid var(--border);border-right:4px solid var(--dc,#888);border-radius:12px;padding:14px 16px;}
.dm-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
.dm-name{font-size:15px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:6px;}
.dm-name i{color:var(--text-muted);font-size:13px;}
.dm-badge{color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;flex-shrink:0;}
.dm-last{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text);}
.dm-last-dot{width:26px;height:26px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;}
.dm-time{margin-right:auto;font-size:13px;font-weight:700;color:var(--text-muted);direction:ltr;}
/* تفاصيل حمولة السائق المحمّل داخل بطاقة المتابعة */
.dm-load{margin-top:10px;padding:9px 11px;background:rgba(217,119,6,.07);border:1px solid rgba(217,119,6,.18);border-radius:9px;}
.dm-load-client{font-size:13px;font-weight:800;color:var(--text);margin-bottom:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dm-load-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:12px;font-weight:600;color:var(--text-muted);}
.dm-load-grid span{display:flex;align-items:center;gap:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* شارة "صبة متصلة" على بطاقة المتابعة (دوام عابر لمنتصف الليل) */
.dm-carried{margin-bottom:8px;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#c2410c;background:rgba(230,126,34,.12);border:1px solid rgba(230,126,34,.3);padding:3px 9px;border-radius:20px;}

/* ── موبايل ── */
@media(max-width:600px){
  .driver-wrap{gap:14px;}
  .driver-status-card{padding:16px 18px;border-radius:16px;}
  .driver-status-icon{width:50px;height:50px;font-size:22px;}
  .driver-status-label{font-size:18px;}
  .driver-btn{padding:22px 18px;border-radius:16px;}
  .driver-btn-icon{width:56px;height:56px;font-size:27px;}
  .driver-btn-label{font-size:22px;}
  .driver-monitor-grid{grid-template-columns:1fr;}
  #drv-stats{grid-template-columns:repeat(2,1fr)!important;}
  /* المختبر على الجوال: الإحصائيات صفّان، البحث صفّ مستقل، الكروت عمود واحد */
  .lab-stats-grid{grid-template-columns:repeat(2,1fr)!important;}
  .lab-cards-grid{grid-template-columns:1fr!important;}
  .lab-tab-pane .table-controls .search-box{flex:1 1 100%;width:100%;order:-1;}
}

/* ── هياكل عظمية (skeleton) بشكل المحتوى الفعلي — تُعرض فوراً ريثما تصل البيانات ──
   بطاقة إحصائية: مربع أيقونة + سطران؛ بطاقة قائمة: أفاتار + رأس + أسطر — مع لمعة عابرة */
.stat-skel{height:56px;border-radius:12px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;gap:10px;padding:0 12px;position:relative;overflow:hidden;}
.card-skel{border-radius:12px;background:var(--card);border:1px solid var(--border);padding:12px 14px;display:flex;flex-direction:column;gap:10px;justify-content:center;position:relative;overflow:hidden;}
.card-skel-head{display:flex;align-items:center;gap:10px;}
.sk-ic{width:32px;height:32px;border-radius:9px;background:var(--hover-bg);flex-shrink:0;}
.sk-av{width:38px;height:38px;border-radius:50%;background:var(--hover-bg);flex-shrink:0;}
.sk-lines{display:flex;flex-direction:column;gap:7px;min-width:0;}
.sk-line{height:9px;border-radius:5px;background:var(--hover-bg);}
.stat-skel::after,.card-skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:skShimmer 1.3s ease-in-out infinite;}
body.dark .stat-skel::after,body.dark .card-skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);}
@keyframes skShimmer{100%{transform:translateX(100%);}}

/* ── المختبر: شبكة الإحصائيات + كروت السجل ── */
.lab-stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px;}
.lab-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;}
.lab-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:0 1px 8px rgba(0,0,0,.05);transition:box-shadow .15s,transform .12s;}
.lab-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.12);transform:translateY(-1px);}
.driver-monitor-card{cursor:pointer;transition:box-shadow .15s,transform .12s;}
.driver-monitor-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.12);transform:translateY(-1px);}

/* ── كارد الصبّة في صفحة السائق ── */
.driver-load-cards{margin-top:4px;}
.driver-load-title{font-size:15px;font-weight:800;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.driver-load-title i{color:var(--accent);}
.driver-load-card{cursor:pointer;}
.driver-load-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.14);}
.driver-big-card{width:100%;border-radius:18px;}
.driver-load-hint{margin-top:8px;text-align:center;font-size:12px;font-weight:700;color:var(--accent);background:rgba(139,26,26,.07);border:1px dashed rgba(139,26,26,.25);border-radius:8px;padding:7px;display:flex;align-items:center;justify-content:center;gap:6px;}

/* ── صور الحجز: زر الرفع ── */
.photo-upload-row{display:flex;gap:10px;}
.photo-upload-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 10px;border:2px dashed var(--border);border-radius:14px;cursor:pointer;color:var(--primary-light);font-size:13px;font-weight:700;transition:border-color .15s,background .15s;background:var(--bg);text-align:center;}
.photo-upload-btn:hover{border-color:var(--accent);background:var(--hover-bg);}
.photo-upload-btn i{font-size:26px;}
#photo-upload-area.uploading{opacity:.6;pointer-events:none;}

/* ── شبكة الصور المصغّرة ── */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;}
.photo-thumb{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--bg);}
.photo-thumb img{width:100%;height:96px;object-fit:cover;display:block;cursor:zoom-in;}
.photo-del{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;border:none;background:rgba(232,64,64,.92);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;box-shadow:0 1px 4px rgba(0,0,0,.3);z-index:2;}
.photo-del:hover{background:#e84040;}
.photo-uploader{font-size:10px;color:var(--text-muted);padding:3px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--card);}

/* ── زر فتح رابط الدفع (تاب التحصيل) ── */
.col-open-link{flex-shrink:0;width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;text-decoration:none;background:linear-gradient(135deg,#2a5298,#1a3a5c);color:#fff;box-shadow:0 2px 6px rgba(42,82,152,.35);transition:transform .12s ease,box-shadow .12s ease;}
.col-open-link:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(42,82,152,.45);color:#fff;}
.col-open-link:active{transform:translateY(0);}
.col-open-disabled{background:var(--bg);color:var(--text-muted);box-shadow:none;cursor:not-allowed;border:1px solid var(--border);}
.col-open-disabled:hover{transform:none;box-shadow:none;}
/* أكثر من رابط في الخانة: الزر يفتحها كلها بتابات منفصلة + شارة العدد */
.col-open-multi{position:relative;border:none;cursor:pointer;font-family:inherit;}
.col-open-cnt{position:absolute;top:-4px;inset-inline-end:-4px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--accent,#e8871a);color:#fff;font-size:9px;font-weight:800;line-height:15px;text-align:center;}
/* خانات نصّية متعددة الأسطر بتاب التحصيل (الرابط/الملاحظات): توسّع بالعرض والارتفاع + Enter = سطر جديد */
textarea.col-ta{resize:both;min-height:32px;max-height:220px;max-width:520px;line-height:1.5;overflow:auto;white-space:pre-wrap;word-break:break-all;}
/* سحب صفوف التحصيل (نمط Kanban — 2026-08-01): مقبض ☰ + أنيميشن أثناء التحريك */
.col-drag{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;color:var(--text-muted);cursor:grab;vertical-align:middle;margin-inline-end:5px;background:var(--bg);border:1px solid var(--border);font-size:10px;transition:background .15s,color .15s;}
.col-drag:hover{background:var(--hover-bg);color:var(--primary-light);}
.col-drag:active{cursor:grabbing;}
tr.col-dragging{opacity:.45;transition:opacity .15s;}
tr.col-drop-above>td{border-top:2.5px solid var(--accent) !important;}
tr.col-drop-below>td{border-bottom:2.5px solid var(--accent) !important;}
#collection-body tr{transition:background .18s;}


/* ── 🔒 خانةٌ مقفولةٌ بتاب التحصيل (‏`lock:field:operations:collection:*`) ──
   مقروءةٌ بوضوح، ومؤشرُ الفأرةِ يقول إنّها غيرُ قابلةٍ للتحرير.
   ⚠️ والقفلُ **بصريٌ وحده هنا**: الحارسُ الحقيقيُ بالخادم لأنّ الحفظَ
   يرسل السجلَ كاملاً بكلِّ مرّة (راجع `PUT /collections/:id`).                */
.col-inp.is-locked,.col-tp.is-locked,.col-disc.is-locked,
input.is-locked,textarea.is-locked,select.is-locked{
  background:var(--bg) !important; color:var(--text-muted) !important;
  border-style:dashed !important; cursor:not-allowed; opacity:.85;
}
textarea.is-locked{resize:none !important;}

/* ── 🧾 روابطُ الأمتارِ الزائدة تحت خانةِ الرابط ──
   رقاقةٌ لكلِّ رابطٍ بكميتِه ونوعِه ومبلغِه وحالتِه — فالرابطُ المُنشأُ
   لا يضيع (أُنشئ عندَ المزوّدِ ولا مسارَ إلغاءٍ له).
   وكلُّ الألوانِ بمتغيّراتِ اللوحةِ فتتبع الوضعَ الداكنَ بلا نظير.        */
.col-xl{display:flex;flex-direction:column;gap:3px;margin-top:5px;}
.col-xl-row{
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap;
  font-size:11px;padding:3px 6px;border-radius:6px;
  background:var(--bg);border:1px solid var(--border);color:var(--text);
}
/*  ⚠️ زرّا الواتسابِ والحذفِ **بنفسِ مربّعِ `.col-open-link`** المجاورِ لهما
    (‏30×30 — طلبُ المستخدم 2026-08-20). كانا **مقيسينِ 16.5×16** أي نصفَ
    جارِهما لأنَّ المربّعَ كان **محكوماً بالحشوةِ وحدها** (‏`padding:2px 3px`) بلا
    أيِّ أبعادٍ صريحة، فكان يتبع حجمَ الخطِّ لا أخاهُ بالصفّ.
    ⚙️ ويسري على **الصفَّينِ معاً** (قيمةُ الصبّةِ وأمتارُ الزيادة) لأنَّ
    الصنفَ واحدٌ بالمواضعِ الثلاثة — فلا موضعٌ يُنسى.                        */
.col-xl-btn{
  border:none;background:none;cursor:pointer;flex-shrink:0;
  width:30px;height:30px;padding:0;font-size:13px;border-radius:8px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:filter .15s,background .15s;
}
.col-xl-btn:hover{filter:brightness(1.25);background:var(--hover-bg);}
.col-xl-btn:disabled{cursor:not-allowed;filter:none;opacity:.55;background:none;}
/*  ⏱️ الوقتُ الفعليُّ تحتَ تاريخِ الصبّ — `var(--success)` فيتبعُ الوضعَ
    الداكنَ بلا نطيرٍ مستقلٍّ، والأخضرُ هو لونُ «الموعدِ الفعليّ»
    بكاردِ الجدولِ اليوميّ (‏`.sc-f-time`) فتبقى الدلالةُ واحدةً.        */
/*  ⚠⚠ **التباينُ مقيسٌ لا مُقدّر**: `var(--success)` على الأبيضِ = **2.99:1**
    والحدُّ 4.5 لنصٍّ بـ‏10.5px — فالفاتحُ يأخذُ أخضرَ أغمقَ (‏#0d7a3e ≈ 5.4:1)
    والداكنُ يبقى على `--success` (مقيسٌ 5.46:1 على بطاقةِ الداكن). وهو نفسُ
    الفصلِ القائمِ بالمشروعِ للروابط (‏`html.f-dark a{color:#6cb8f6}`).                */
.col-actual{font-size:10.5px;color:#0d7a3e;margin-top:2px;font-weight:600;}
body.dark .col-actual{color:var(--success);}
.col-actual i{font-size:9px;}
/*  وزرُ ⚡ بنفسِ المربّع (كان 30.3×28 لأنَّ حجمَه محكومٌ بحشوةِ
    `.btn-icon` المشتركة) — **بصنفِه الخاصِّ لا بتعديلِ `.btn-icon`** التي
    يستهلكُها البرنامجُ كلُّه، فتصيرُ الأزرارُ الأربعةُ متطابقةً.        */
.col-upay-btn{width:30px;height:30px;padding:0;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;}

/*  ⛔ مستخدمٌ موقوف (‏`is_active = 0`) — البطاقةُ تُعلن ذلك بلا فتحِ المودال.  */
.user-card.is-off{opacity:.62;border-style:dashed;}
.user-card.is-off:hover{opacity:.85;}

/* ── lightbox عرض الصورة بوضوح ── */
#photo-lightbox{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.9);align-items:center;justify-content:center;padding:20px;cursor:zoom-out;}
#photo-lightbox.open{display:flex;}
#photo-lightbox img{max-width:96vw;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.6);}
.photo-lightbox-close{position:absolute;top:16px;left:16px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;}
.photo-lightbox-close:hover{background:rgba(255,255,255,.28);}

/* ── i18n: الخط حسب اللغة + مبدّل اللغة ───────────────────────────── */
/* العربية (الافتراضي) تبقى Tajawal؛ الإنجليزية Inter؛ الهندية Noto Sans Devanagari */
body.lang-en, body.lang-en .btn, body.lang-en .login-input, body.lang-en input,
body.lang-en select, body.lang-en button, body.lang-en textarea,
body.lang-en .search-box input, body.lang-en .filter-select{font-family:'Inter','Tajawal',sans-serif;}
body.lang-hi, body.lang-hi .btn, body.lang-hi .login-input, body.lang-hi input,
body.lang-hi select, body.lang-hi button, body.lang-hi textarea,
body.lang-hi .search-box input, body.lang-hi .filter-select{font-family:'Noto Sans Devanagari','Tajawal',sans-serif;}

/* direction:ltr يثبّت ترتيب أزرار اللغة (ع|EN|हि) في كل اللغات فلا يتنقّل مكانها */
.lang-switch{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--card);direction:ltr;}
.lang-switch button{border:none;background:transparent;color:var(--text-muted);font-weight:700;font-size:12px;padding:5px 11px;cursor:pointer;min-width:36px;transition:background .15s,color .15s;line-height:1;}
.lang-switch button.active{background:var(--accent,#2a5298);color:#fff;}
.lang-switch button:not(.active):hover{background:var(--hover-bg,rgba(0,0,0,.05));}
/* مبدّل اللغة في شاشة الدخول — أكبر حجماً */
.login-lang .lang-switch button{font-size:15px;padding:10px 20px;min-width:54px;}

/* شاشة الدخول: اتجاه ثابت (RTL دائماً) — تبديل اللغة لا يقلب التخطيط */
#login-screen{direction:rtl;}

/* قائمة اللغة داخل البرنامج (زر الكرة الأرضية) */
.lang-menu-wrap{position:relative;}
.lang-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.18);min-width:140px;padding:6px;display:none;z-index:1200;}
.lang-dropdown.open{display:block;}
.lang-dropdown-item{padding:9px 12px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;}
.lang-dropdown-item:hover{background:var(--hover-bg,rgba(0,0,0,.05));}
.lang-dropdown-item.active{background:var(--accent,#2a5298);color:#fff;}

.daily-action-btns{overflow: auto;}

/* ══════════════════════════════════════════════════════════════════
   WRMC CRM + منصّة التطبيقات (App Launcher)
   ══════════════════════════════════════════════════════════════════ */

/* ── شاشة التطبيقات ── */
/* 🖼️ خلفيةُ البورتال = خلفيةُ شاشة الدخول نفسُها (طلب المستخدم 2026-08-15) —
   فتتصل الشاشتان بصرياً: يدخل المستخدمُ فوق الصورة ويصل البورتالَ فوقها.
   ⚠️ **حاجبٌ داكنٌ فوقها إلزاماً** بنفس علّة شاشة الدخول: البطاقاتُ فاتحةٌ
   والعناوينُ فوقها، وبلا الحاجب تذوب على الأجزاء الفاتحة من الصورة.
   ⚠️ **وغيابُ الملف لا يُحدث انحداراً**: `background-color` هو الأساس تحت
   الطبقتين، فبلا الصورة يُعرض البورتالُ بتدرّجه الداكن (يغطّي نافذةَ النشر).
   ⚠️ و`min-height` بارتفاع ما بعد الـtopbar كي تغطّي الخلفيةُ الشاشةَ كلها
   لا صندوقَ المحتوى وحده. */
#page-portal.active{background-color:#0a1628;
  background-image:linear-gradient(135deg,rgba(10,22,40,.88) 0%,rgba(26,58,92,.74) 50%,rgba(15,37,64,.90) 100%),url('/shared/login-bg.png');
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat;
  background-attachment:scroll,fixed;
  min-height:calc(100vh - 48px);margin:-22px -26px;padding:22px 26px;}
/*  ⚠️⚠️ هامشٌ سالبٌ لكلِّ نقطةِ تضييقٍ لحشو `.content` — بنفس القيمة تماماً
    وبنفس الاتجاه المعكوس. **قِيست الحاجةُ لا افتُرضت**: بلا هذه الكتلة كان
    عرضُ 390px (جوال) يفيض 20px أفقياً فعلياً (`scrollWidth>clientWidth`) —
    لأن حشو `.content` يضيق بثلاث نقاطِ توقّفٍ (1024‏·768‏·480px) بينما هامشُ
    البورتال السالب يبقى ثابتاً `-22px -26px`، فيتجاوز إلغاءُه الحشوَ الجديدَ.
    ⚠️⚠️ **الموضعُ هنا لا داخل كتل `@media` البعيدة إلزاميّ**: نسخةٌ أُولى
    وُضعت هناك (بجانب كلِّ سطرِ `.content{padding:...}` مباشرةً) **فبقيت
    بلا أثرٍ بأيِّ عرضٍ** — القاعدةُ الأساسيةُ هنا أدنى بالملفِّ فتكسبُ التعادلَ
    في التخصيص أياً كان ترتيب كتل `@media` قبلها، والمُدرَك فعلاً بقياس
    `getComputedStyle(...).marginLeft` قبل وبعد النقل، لا بالقراءة. */
@media (max-width:1024px){ #page-portal.active{margin:-16px -18px;padding:16px 18px;} }
@media (max-width:768px){  #page-portal.active{margin:-12px -10px;padding:12px 10px;} }
@media (max-width:480px){  #page-portal.active{margin:-8px -6px;padding:8px 6px;} }

/* ══════════════════════════════════════════════════════════════════════
   بطاقاتُ البورتال — إعادةُ تصميمٍ حديثة (2026-08-18، طلبُ المستخدم)
   ⚠️ كلُّ لونٍ غيرِ زخرفيٍّ (النصوصُ · الشاراتُ) يقرأ متغيّرَ اللوحة
      (‏`--card`/`--border`/`--text`/`--text-muted`/`--primary*`) لا قيمةً
      ثابتة — فتتبع البطاقاتُ الوضعَ الداكنَ **والسماتِ الثمانيةَ** معاً
      بلا قاعدةٍ إضافيةٍ (عمليّاتُ المصنع بلا بادئةٍ فمتغيّراتُها الأساسيةُ
      هي ما يحقنه `theme.js`). لون التمييز `--acc` وحدَه ثابتٌ per-card —
      هويةُ تطبيقٍ لا سمةَ واجهة، كلونِ أيقونتِه تماماً، ولا يمسّ نصاً فيخضع
      لفحص تباين (مقيسٌ: شارةُ «نشط» تبقى بيضاءَ على رقاقةٍ داكنةٍ ثابتة،
      لا بلون `--acc`، فتُقرأ فوق أيِّ تدرّج تطبيقٍ بتباين ≥8.6 مقيساً).
   ══════════════════════════════════════════════════════════════════════ */
.portal-wrap{max-width:1020px;margin:0 auto;padding:36px 16px 52px;}
.portal-head{text-align:center;margin-bottom:38px;}
/* العناوين فوق الصورة الداكنة: بيضاء صراحةً لا بمتغيّر النص (وهو داكنٌ بالوضع الفاتح) */
.portal-head h1{font-size:31px;font-weight:900;color:#fff;margin:0 0 10px;letter-spacing:-.5px;text-shadow:0 2px 12px rgba(0,0,0,.45);}
.portal-head p{font-size:15px;color:rgba(255,255,255,.82);margin:0;text-shadow:0 1px 8px rgba(0,0,0,.4);}
/* خطٌّ زخرفيٌّ قصيرٌ تحت العنوان — لمسةٌ حديثةٌ بلا نصٍّ إضافي */
.portal-head::after{content:'';display:block;width:52px;height:3px;margin:16px auto 0;border-radius:3px;
  background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(255,255,255,.75),rgba(255,255,255,.15));}

.portal-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,300px));justify-content:center;gap:20px;}
.portal-card{
  --acc:var(--primary-light);
  position:relative;display:flex;flex-direction:column;text-align:center;
  background:var(--card);border:1.5px solid var(--border);border-radius:20px;
  box-shadow:var(--shadow);overflow:hidden;cursor:pointer;padding:0 0 15px;
  font-family:inherit;isolation:isolate; /* يمنع سرب z-index لعناصرَ خارجَ البطاقة */
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,border-color .18s ease;
}
/* حلقةُ توهّجٍ بلون هوية التطبيق — عنصرٌ ثابتٌ تظهر شفافيّتُه عند التحويم فقط،
   فلا حاجة لمزج ألوانٍ (`color-mix`) ولا لضمان دعمه؛ الشفافيةُ مدعومةٌ عالمياً. */
.portal-card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  box-shadow:0 0 0 2px var(--acc),0 22px 44px -14px var(--acc);opacity:0;transition:opacity .18s ease;}
/* شريطُ هويةٍ سفليٌّ رفيع بلون التطبيق — تمييزٌ بصريٌّ دائمٌ لا يعتمد على التحويم */
.portal-card::after{content:'';position:absolute;bottom:0;inset-inline:16px;height:3px;border-radius:3px 3px 0 0;background:var(--acc);opacity:.85;}
/* الرفعُ والتوهّجُ لمؤشرِ الفأرة الحقيقيّ فقط — لا للمس، وإلا بقيت البطاقةُ
   «مرفوعةً» بعد النقرة على الجوّال حتى نقرةٍ أخرى خارجها. */
@media(hover:hover) and (pointer:fine){
  .portal-card:not(:disabled):hover{transform:translateY(-7px);box-shadow:0 20px 46px rgba(10,22,40,.22);border-color:var(--acc);}
  .portal-card:not(:disabled):hover::before{opacity:.5;}
  .portal-card:not(:disabled):hover .portal-pic svg{transform:scale(1.045);}
  .portal-card:not(:disabled):hover .portal-card-name{color:var(--acc);}
}
.portal-card:not(:disabled):active{transform:scale(.975);}
.portal-card:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px;}
.portal-card:disabled{cursor:not-allowed;opacity:.8;}
.portal-card:disabled::after{opacity:.35;}

.portal-pic{position:relative;height:134px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
/* سطحُ لمعانٍ زجاجيٌّ خفيفٌ أعلى يسار البلاطة — زخرفةٌ بلا نصٍّ فلا تخضع لفحص تباين */
.portal-pic::after{content:'';position:absolute;inset:0;
  background:radial-gradient(120px 90px at 18% -10%,rgba(255,255,255,.30),transparent 65%);pointer-events:none;}
.portal-pic svg{position:relative;width:132px;height:auto;max-height:96px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));
  transition:transform .22s cubic-bezier(.2,.8,.2,1);}
.portal-card:disabled .portal-pic svg{filter:drop-shadow(0 6px 14px rgba(0,0,0,.18)) grayscale(.35);opacity:.82;}
.portal-pic.res{background:linear-gradient(135deg,#2a5298,#14315e);}
.portal-pic.crm{background:linear-gradient(135deg,#7c3aed,#4c1d95);}

/* الشارةُ: رقاقةٌ زجاجيةٌ داكنةٌ ثابتة اللون (لا لون التطبيق) — تبقى مقروءةً
   فوق أيِّ تدرّجِ أيقونةٍ من الستّة (مقيسٌ WCAG على أفتحِ لونَي كلِّ تدرّج). */
.portal-badge{position:absolute;top:11px;inset-inline-end:11px;z-index:1;
  display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.2px;
  padding:5px 10px 5px 9px;border-radius:999px;color:#fff;
  background:rgba(9,15,26,.4);backdrop-filter:blur(7px) saturate(150%);-webkit-backdrop-filter:blur(7px) saturate(150%);
  border:1px solid rgba(255,255,255,.2);box-shadow:0 2px 8px rgba(0,0,0,.18);}
.portal-badge::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;}
.portal-badge.active::before{background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.3);}
.portal-badge.beta::before{background:#ffd15c;box-shadow:0 0 0 3px rgba(255,209,92,.3);}
@media(prefers-reduced-motion:no-preference){
  .portal-badge.active::before{animation:portalPulse 2.2s ease-in-out infinite;}
}
@keyframes portalPulse{0%,100%{box-shadow:0 0 0 3px rgba(61,220,132,.3);}50%{box-shadow:0 0 0 5px rgba(61,220,132,.12);}}

/* البطاقة = صورة + اسم + شارة + أكواد فقط (portal-card-body حُذف — 2026-07-28) */
.portal-card-name{font-size:17px;font-weight:900;color:var(--text);margin:15px 18px 4px;transition:color .18s ease;}
/* أكوادُ أقسام التطبيق — صفٌّ أفقيٌّ ملتفٌّ لا كتلةٌ مرصوصةٌ عمودياً (كانت
   أربعةُ أكوادٍ بالمالية تُطيل البطاقةَ بلا داعٍ؛ صفٌّ يلتف يبقيها مدمجة). */
.portal-card-codes{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;padding:6px 16px 2px;}
.portal-card-code{white-space:nowrap;padding:2px 9px;border-radius:20px;
  font-family:"Consolas","SF Mono",monospace;font-size:9.5px;font-weight:700;letter-spacing:.3px;
  color:var(--primary-light);background:rgba(42,82,152,.10);border:1px solid rgba(42,82,152,.22);}
body.dark .portal-card-code{color:#9dc0ff;background:rgba(157,192,255,.12);border-color:rgba(157,192,255,.26);}

@media(max-width:560px){
  .portal-wrap{padding:26px 12px 40px;}
  /* عمودٌ واحدٌ ملءَ العرض — بلا `max-width`/`margin-inline:auto` على البطاقة:
     هوامشُ أفقيةٌ تلقائيةٌ على عنصر Grid تُلغي التمدد الافتراضي (stretch)
     وتُحجّم البطاقةَ بمحتواها (shrink-to-fit)، فكانت عناوينُ الأسماءِ وعددُ
     أكواد كلِّ برنامجٍ يُنتجان عرضاً مختلفاً لكلِّ بطاقة — عيبٌ حقيقيٌّ قِيس
     بقراءة `getBoundingClientRect` لا افتراضاً (‏134px إلى 354px بنفس الصف).
     التمدّدُ الافتراضيُّ لعناصر Grid يكفي وحده لعرضٍ موحَّد. */
  .portal-apps{grid-template-columns:1fr;gap:16px;}
}

/* ── عام CRM ── */
.crm-loading{display:flex;align-items:center;justify-content:center;min-height:200px;font-size:30px;color:var(--primary-light);}
.crm-page-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px;}
.crm-page-title{font-size:19px;font-weight:900;color:var(--text);display:flex;align-items:center;gap:10px;}
.crm-page-title i{color:var(--primary-light);}
.crm-count{background:var(--bg);border:1px solid var(--border);color:var(--text-muted);font-size:12px;font-weight:800;padding:2px 10px;border-radius:20px;}
.crm-page-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.crm-search{display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;min-width:220px;}
.crm-search i{color:var(--text-muted);font-size:13px;}
.crm-search input{border:0;background:transparent;outline:0;padding:9px 0;font-size:13px;color:var(--text);flex:1;font-family:inherit;}

/* ── جدول CRM ── */
.crm-table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);}
.crm-table{width:100%;border-collapse:collapse;font-size:13px;min-width:760px;}
.crm-table thead th{text-align:start;font-size:11.5px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;padding:13px 14px;border-bottom:2px solid var(--border);white-space:nowrap;}
.crm-table tbody td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;}
.crm-table tbody tr:last-child td{border-bottom:0;}
.crm-table tbody tr:hover{background:var(--bg);}
.crm-name{font-weight:700;}
.crm-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;}
.crm-mono{font-variant-numeric:tabular-nums;color:var(--text-muted);white-space:nowrap;}
.crm-badge{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 11px;border-radius:20px;white-space:nowrap;}
.crm-row-actions{display:flex;gap:6px;}
.crm-ic-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px;transition:all .14s;}
.crm-ic-btn:hover{background:var(--primary-light);color:#fff;border-color:var(--primary-light);}
.crm-ic-btn.danger:hover{background:var(--danger);border-color:var(--danger);}

/* ── حالة فارغة ── */
.crm-empty{text-align:center;padding:60px 20px;color:var(--text-muted);background:var(--card);border:1px dashed var(--border);border-radius:var(--radius);}
.crm-empty i{font-size:44px;opacity:.4;margin-bottom:14px;display:block;}
.crm-empty p{font-size:15px;margin:0 0 18px;}
.crm-empty-sm{text-align:center;padding:28px 10px;color:var(--text-muted);font-size:13px;}

/* ── لوحة CRM: أعمدة + رسوم ── */
.crm-dash-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;}
.crm-dash-row .card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.crm-bar-row{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:10px;margin-bottom:11px;}
.crm-bar-row:last-child{margin-bottom:0;}
.crm-bar-lbl{font-size:12.5px;font-weight:700;color:var(--text);}
.crm-bar-track{height:9px;background:var(--bg);border-radius:20px;overflow:hidden;}
.crm-bar-fill{height:100%;border-radius:20px;min-width:2px;transition:width .4s ease;}
.crm-bar-val{font-size:12.5px;font-weight:800;color:var(--text-muted);text-align:end;font-variant-numeric:tabular-nums;min-width:36px;white-space:nowrap;}
.crm-recent-list{display:flex;flex-direction:column;gap:4px;}
.crm-recent-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 8px;border-radius:8px;transition:background .14s;}
.crm-recent-item:hover{background:var(--bg);}
.crm-recent-name{font-weight:700;font-size:13.5px;color:var(--text);}

/* ── مودال العميل المحتمل ── */
.crm-form-sec{font-size:12px;font-weight:800;color:var(--primary-light);text-transform:uppercase;letter-spacing:.4px;margin:6px 0 10px;padding-bottom:6px;border-bottom:1px dashed var(--border);}
.crm-form-sec:not(:first-child){margin-top:18px;}

/* ── وحدات قيد التطوير ── */
.crm-soon{max-width:520px;margin:24px auto;text-align:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:44px 26px;}
.crm-soon-icon{width:78px;height:78px;margin:0 auto 18px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:34px;color:#fff;background:linear-gradient(135deg,#7c3aed,#4c1d95);}
.crm-soon-badge{display:inline-block;font-size:11px;font-weight:800;color:#5a3d00;background:rgba(255,209,92,.95);padding:4px 12px;border-radius:20px;margin-bottom:12px;}
.crm-soon h2{font-size:22px;font-weight:900;color:var(--text);margin:0 0 8px;}
.crm-soon-desc{font-size:14px;color:var(--text);line-height:1.7;margin:0 0 14px;}
.crm-soon-note{font-size:12.5px;color:var(--text-muted);line-height:1.7;margin:0 0 22px;}

/* مودالات الـCRM طويلة الحقول — تمرير عمودي داخلها بدل الفيض خارج الشاشة
   (تتجاوز `overflow:visible` المضروبة على `.modal.md`؛ خصوصية معرّف > خصوصية class) */
#account-modal>.modal,#opp-modal>.modal,#quote-modal>.modal,#order-modal>.modal,
#invoice-modal>.modal,#contact-modal>.modal,#project-modal>.modal,#request-modal>.modal,#erp-modal>.modal,
#activity-modal>.modal,#product-modal>.modal,#case-modal>.modal,#campaign-modal>.modal,#goal-modal>.modal,
#workflow-modal>.modal{overflow-y:auto;}

/* تلميح رموز القوالب في مودال سير العمليات */
.wf-hint{display:block;margin-top:4px;font-size:.72rem;color:var(--text-muted);}

/* لوحة BI */
.bi-donut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.bi-legend{display:flex;flex-direction:column;gap:5px;}
.bi-legend-item{font-size:.82rem;color:var(--text);display:flex;align-items:center;gap:6px;}
.bi-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0;}
.bi-conv{text-align:center;font-size:.72rem;font-weight:700;color:var(--text-muted);margin:2px 0 6px;}
.bi-outcome{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;border-top:1px solid var(--border);padding-top:10px;font-size:.85rem;}

/* بنود المنتجات في عرض السعر (line items) */
.qi-head{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 34px;gap:8px;font-size:.75rem;font-weight:700;color:var(--text-muted);margin-bottom:4px;}
.qi-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 34px;gap:8px;align-items:center;margin-bottom:6px;}
.qi-line{background:var(--bg);}
/* شريط تقدم أهداف المبيعات */
.gl-bar{height:8px;background:var(--bg);border-radius:999px;overflow:hidden;margin-bottom:3px;border:1px solid var(--border);}
.gl-fill{height:100%;border-radius:999px;transition:width .3s;}

/* شريط مراحل الفرصة (Business Process Flow بنمط Dynamics 365) */
.crm-bpf{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:14px;padding:10px 12px;background:var(--bg);border-radius:10px;}
.bpf-step{padding:6px 14px;border:1.5px solid var(--border);border-radius:999px;font-size:.82rem;font-weight:700;color:var(--text-muted);cursor:pointer;user-select:none;transition:all .15s;white-space:nowrap;}
.bpf-step:hover{border-color:var(--primary-light);}
.bpf-step.final{cursor:default;}
.bpf-sep{font-size:.6rem;color:var(--text-muted);opacity:.5;}
html[dir="ltr"] .bpf-sep{transform:scaleX(-1);}

@media(max-width:720px){
  .crm-dash-row{grid-template-columns:1fr;}
  .crm-page-tools{width:100%;}
  .crm-search{flex:1;min-width:0;}
  .portal-head h1{font-size:24px;}
}


/* ── شبكة كاردات التكامل (صفحة «تكامل ERP») ────────────────────────
   كانت كاردات المزوّدين عموداً واحداً بعرض 640px؛ صارت متجاورة
   (auto-fill بحد أدنى 380px) فتتراصف بحسب عرض الشاشة وتنزل لعمود
   واحد على الموبايل تلقائياً بلا media query. */
.int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
  align-items: start;
}
.int-grid .int-card { padding: 20px; margin: 0; }
/* الكارد عمود مرن: شريط الأزرار يلتصق بالأسفل فتتساوى ارتفاعات الصف */
.int-grid .int-card { display: flex; flex-direction: column; }
.int-grid .int-card > div:last-child { margin-top: auto; }
@media (max-width: 430px) { .int-grid { grid-template-columns: 1fr; } }

/* ── تاب «CRM» بصفحة الاعدادات (crm14): رقائق اختيار المناطق ────────
   المنطقة المصنَّفة بمجموعة أخرى تُعرض مقفلةً باسم مجموعتها (tooltip) —
   منطقةٌ بمجموعتين تعني سعرين زائدين لنفس الموقع، وهو تناقض لا خطأ إدخال. */
.crmset-areas { display: flex; flex-wrap: wrap; gap: 6px; }
.crmset-area {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 20px;
  padding: 5px 11px; font-size: 12px; color: var(--text); background: transparent;
}
.crmset-area:hover { background: rgba(127, 127, 127, .1); }
.crmset-area.on { border-color: var(--accent); background: rgba(212, 160, 23, .14); font-weight: 700; }
.crmset-area.taken { opacity: .45; cursor: not-allowed; }
.crmset-area input { accent-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════
   🏭 شاشةُ مشغّلِ مصانعِ الخلط — **أُعيد تصميمُها 2026-09-02** (طلبُ المستخدم:
   «بسيطٌ وresponsive على شاشاتِ التلفونِ والتابلِتِ واللابتوبِ والكمبيوتر»).
   ⚠️ كلُّ لونٍ بنيويٍّ **بمتغيّراتِ اللوحة** فيتبع الوضعَ الداكنَ بلا نظير؛
      ولونُ حالةِ الدورِ يصل بـ`--pc` من الجافاسكربت (مصدرٌ واحد).
   ⚠️⚠️ **والاستجابةُ بـ`clamp` لا باستفساراتِ وسائطَ متعددة**: الزرُّ والكاردُ
      عنصرانِ يملآنِ العرضَ، فالمقاسُ وحدَه يتغيّر — و`clamp` يمنحه تدرّجاً
      متصلاً بين 375px و1920px بلا حدودٍ قافزةٍ عند كلِّ نقطةِ كسر.
   ══════════════════════════════════════════════════════════════════ */
.po-wrap{max-width:640px;margin:0 auto;--po-ink:#2a5298;
  --po-muted:#67778d;--po-muted-pg:#617186;}
body.dark .po-wrap{--po-ink:#6cb8f6;
  --po-muted:var(--text-muted);--po-muted-pg:var(--text-muted);}
/*  ⚠️⚠️ **حبرٌ باهتٌ مقيسٌ لا `--text-muted` خاماً**: الأخيرُ `#6b7c93` وقِيس
    **4.26** على البطاقةِ البيضاءِ لنصٍّ 13px (الحدُّ 4.5) — أي أن تسميةَ الحقلِ
    وسطرَ الطابورِ وسطرَ العميلِ **كلَّها دون الحدِّ بالوضعِ الفاتح**، والمشغّلُ
    يقرؤها بعينِه من بعيدٍ داخلَ المصنع.
    والقيمةُ **محسوبةٌ بالتغميقِ خطوةً خطوةً حتى أولِ خطوةٍ تجتاز** فتبقى أقربَ
    ما يمكن للأصل: **4% ⇒ `#67778d` ⇒ 4.57**. والداكنُ يجتاز سلفاً (**5.41**)
    فيبقى على `--text-muted` — تغييرُه انحدارٌ بلا سبب.
    ⚠️ ورمزٌ **مُنطَّقٌ بالشاشة** لا تعديلُ `--text-muted` العامِّ: يستهلكه
    البرنامجُ كلُّه، وتغييرُه دفعةٌ مستقلةٌ تُقاس على كلِّ مستهلكيه.
    ⚠️⚠️ **ورمزانِ لا واحدٌ لأن الأرضيتَينِ مختلفتان — مقيسٌ لا مُقدَّر**: تسميةُ
    الحقلِ وسطرُ العميلِ على **البطاقةِ البيضاء** (‏`#67778d` ⇒ 4.57)، وسطرُ
    الطابورِ على **خلفيةِ الصفحةِ** `#f0f4f8` فيحتاج أغمقَ (‏`#617186` ⇒ 4.51).
    ولونٌ واحدٌ للاثنين يترك أحدَهما تحت الحدّ.                               */

/*  شريطُ الوقتِ والتاريخِ — بديلُ الاسمِ والأيقونةِ (نصُّ الطلب) بنفسِ رقاقاتِ
    شاشةِ السائق: `flex-wrap` كي ينزل الوقتُ سطراً بالهاتفِ بلا تمريرٍ أفقيّ.   */
.po-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;
  justify-content:center;}
.po-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:20px;
  font-size:14px;font-weight:600;background:var(--card);border:1px solid var(--border);
  color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.07);}
.po-chip i{color:var(--po-ink);}
.po-chip #po-clock{direction:ltr;}

.po-stage{display:flex;flex-direction:column;gap:14px;}

/*  🔘 الزرُّ الرئيسيُّ — عنصرٌ واحدٌ يملأ العرضَ ويكبر بكبرِ الشاشة.
    ⚠️ و`min-height` لا `height`: النصُّ العربيُّ قد يلتفّ سطرين بالهاتفِ فيُقتطع
       بارتفاعٍ ثابت.
    ⚠️ **وأبيضُ على كلِّ لونٍ محسوبٌ لا مُختار**: نداء `#b35c00` = 4.51 ·
       صرف `#14803f` = 4.62 (الحدُّ 4.5 لنصٍّ عريض).                          */
.po-main{width:100%;border:0;border-radius:16px;cursor:pointer;font-family:inherit;
  min-height:clamp(84px,17vw,120px);padding:16px 20px;
  font-size:clamp(19px,4.4vw,27px);font-weight:900;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:14px;text-align:center;
  box-shadow:0 3px 12px rgba(0,0,0,.16);transition:filter .15s,transform .08s;}
.po-main i{font-size:clamp(22px,5vw,32px);}
.po-main.call{background:#b35c00;}
.po-main.release{background:#14803f;}
button.po-main:hover:not(:disabled){filter:brightness(1.08);}
button.po-main:active:not(:disabled){transform:translateY(2px);}
button.po-main:disabled{opacity:.55;cursor:not-allowed;}
/*  حالتانِ **لوحتانِ لا زرّان** (لا فعلَ لهما): «بانتظار الاستلام» و«لا صلاحية».
    ⚠️ والنصُّ بحبرِ اللوحةِ لا أبيضَ — الأرضيةُ باهتةٌ فالأبيضُ عليها لا يُقرأ. */
.po-main.is-waiting,.po-main.is-off{cursor:default;box-shadow:none;
  background:var(--card);border:2px dashed var(--border);color:var(--text-muted);}
.po-main.is-waiting{border-color:#e8871a;color:#8a4b00;}
body.dark .po-main.is-waiting{color:#ffb866;}
/*  نبضةٌ لطيفةٌ تقول «ننتظر» — وتُوقَف لمن طلب تقليلَ الحركة (إتاحة) */
.po-main.is-waiting{animation:poPulse 1.6s ease-in-out infinite;}
@keyframes poPulse{0%,100%{opacity:1}50%{opacity:.62}}
@media (prefers-reduced-motion:reduce){.po-main.is-waiting{animation:none}}

/*  📋 كاردُ معلوماتِ التحميلِ — أربعةُ صفوفٍ بتسميةٍ وقيمةٍ واضحةٍ (نصُّ الطلب:
    «اسمُ السائق - رقمُ الخلاطة - نوعُ الخرسانة - الكمية، بشكلٍ واضح»)          */
.po-load{background:var(--card);border:1px solid var(--border);
  border-inline-start:5px solid var(--pc);border-radius:14px;
  padding:clamp(12px,3vw,18px);display:flex;flex-direction:column;gap:12px;
  box-shadow:0 1px 6px rgba(0,0,0,.08);}
.po-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:800;color:#fff;background:var(--pc);
  border-radius:20px;padding:4px 13px;}
.po-rows{display:flex;flex-direction:column;gap:2px;}
.po-row{display:flex;align-items:baseline;gap:10px;padding:9px 2px;
  border-bottom:1px solid var(--border);}
.po-row:last-child{border-bottom:0;}
.po-lbl{flex:0 0 auto;min-width:clamp(84px,22vw,120px);font-size:13px;font-weight:700;
  color:var(--po-muted);}
.po-val{flex:1 1 auto;min-width:0;font-size:clamp(17px,3.6vw,22px);font-weight:900;
  color:var(--text);word-break:break-word;}
.po-val.ltr{direction:ltr;text-align:start;}
.po-val small{font-size:12px;font-weight:700;color:var(--text-muted);margin-inline-start:4px;}
.po-meta{display:flex;flex-wrap:wrap;gap:5px 14px;font-size:12.5px;color:var(--po-muted);}
.po-meta i{margin-inline-end:4px;opacity:.75;}

/*  أزرارٌ ثانويةٌ — تنزل عموداً بالهاتفِ (`flex-wrap`) فلا يضيق أيٌّ منها  */
.po-subs{display:flex;gap:10px;flex-wrap:wrap;}
.po-sub{flex:1 1 150px;border:0;border-radius:11px;padding:13px 16px;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:800;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:filter .15s,transform .08s;}
.po-sub:hover:not(:disabled){filter:brightness(1.08);}
.po-sub:active:not(:disabled){transform:translateY(1px);}
.po-sub:disabled{opacity:.55;cursor:not-allowed;}
/*  محسوبةٌ: سحبُ النداء `#c62828` = 5.62 · التخطّي `#5a5f6a` = 5.83  */
.po-sub.cancel{background:#c62828;}
.po-sub.skip{background:#5a5f6a;}

.po-queue-line{text-align:center;font-size:13px;color:var(--po-muted-pg);padding:2px;}
.po-queue-line i{margin-inline-end:5px;opacity:.75;}
.po-queue-line b{color:var(--text);}

/* ══════════════════════════════════════════════════════════════════
   🎫 تابا لوحةِ المتابعة + جدولُ الطابورِ القابلِ للسحب (2026-09-02)
   ⚠️ كلُّ لونٍ بمتغيّراتِ اللوحةِ فيتبع الوضعَ الداكنَ بلا نظير؛ ولونُ حالةِ
      الصفِّ يصل بـ`--pc` من الجافاسكربت (مصدرٌ واحدٌ مع شاشةِ المشغّل).
   ══════════════════════════════════════════════════════════════════ */
.drv-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;
  border-bottom:2px solid var(--border);}
.drv-tab{border:0;background:transparent;font-family:inherit;font-size:14px;font-weight:700;
  color:var(--text-muted);padding:10px 16px;cursor:pointer;display:flex;align-items:center;gap:7px;
  border-bottom:3px solid transparent;margin-bottom:-2px;transition:color .15s;}
.drv-tab:hover{color:var(--text);}
.drv-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
/*  ⚠️ لونُ التابِ النشطِ بالوضعِ الداكن: `--accent` يُفتَّح للروابطِ فيبقى مقروءاً
    على أرضيةٍ داكنة — ولا أبيضَ فوقه (لا خلفيةَ له أصلاً).                     */
body.dark .drv-tab.active{color:#6cb8f6;border-bottom-color:#6cb8f6;}

.dq-wrap{background:var(--card);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;box-shadow:0 1px 5px rgba(0,0,0,.07);}
/*  شريطُ «ترتيبٌ غير محفوظ» — أرضيةٌ كهرمانيةٌ وحبرٌ محسوبٌ لكلِّ وضع  */
.dq-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;
  background:rgba(232,135,26,.13);border-bottom:1px solid var(--border);
  font-size:13.5px;font-weight:800;color:#8a4b00;}
body.dark .dq-bar{color:#ffb866;}
.dq-bar i{margin-inline-end:4px;}
.dq-bar button{margin-inline-start:auto;}
.dq-bar button + button{margin-inline-start:0;}

/*  ⚠️⚠️ **شبكةٌ بأعمدةٍ مُعلَنةٍ مرةً واحدةً لِلرأسِ والصفوفِ معاً**: عمودانِ
    يختلفانِ بينهما = رأسٌ لا يحاذي خليتَه (عطبٌ موثَّقٌ بهذا المستودع).      */
.dq-head,.dq-row{display:grid;align-items:center;gap:10px;padding:10px 14px;
  grid-template-columns:var(--dq-cols);}
.dq-wrap{--dq-cols:26px 34px minmax(110px,1.4fr) 74px minmax(84px,1fr) 74px minmax(110px,1.3fr) minmax(104px,1fr);}
/*  بلا صلاحيةِ سحبٍ لا عمودَ مقبض — الأعمدةُ سبعةٌ لا ثمانية  */
.dq-wrap:has(.dq-note){--dq-cols:34px minmax(110px,1.4fr) 74px minmax(84px,1fr) 74px minmax(110px,1.3fr) minmax(104px,1fr);}
.dq-head{background:var(--bg);font-size:11.5px;font-weight:800;color:var(--text-muted);
  border-bottom:1px solid var(--border);text-transform:none;}
.dq-row{border-bottom:1px solid var(--border);font-size:13px;color:var(--text);
  border-inline-start:4px solid var(--pc);background:var(--card);}
.dq-row:last-child{border-bottom:0;}
.dq-row.is-drag{opacity:.45;}
.dq-row.is-over{background:rgba(42,82,152,.10);}
body.dark .dq-row.is-over{background:rgba(108,184,246,.14);}
.dq-grip{color:var(--text-muted);cursor:grab;text-align:center;}
.dq-grip:active{cursor:grabbing;}
.dq-pos{font-weight:900;color:var(--pc);text-align:center;}
.dq-drv{font-weight:800;}
.dq-truck,.dq-vol{font-weight:800;direction:ltr;}
.dq-vol small{font-size:10.5px;font-weight:700;color:var(--text-muted);margin-inline-start:3px;}
.dq-type{font-weight:700;}
.dq-client,.dq-st{color:var(--text-muted);font-size:12px;}
.dq-st i{margin-inline-end:4px;color:var(--pc);}
.dq-note{padding:9px 14px;font-size:12px;color:var(--text-muted);background:var(--bg);
  border-top:1px solid var(--border);}
.dq-note i{margin-inline-end:5px;opacity:.75;}

/*  📱 الهاتف: الشبكةُ تصير بطاقاتٍ — الرأسُ يُخفى والتسمياتُ تأتي من
    `::before` بمحتوىً من `data-*`؟ لا: الأعمدةُ سبعةٌ بمعانٍ واضحةٍ بذاتها،
    فالبطاقةُ تعرضها متلاصقةً بلا تسمياتٍ تضاعف الطول.
    ⚠️ **ولا تمريرٌ أفقيٌّ بقصد**: جدولٌ يُمرَّر أفقياً على هاتفٍ لا يُقرأ.    */
@media (max-width:760px){
  .dq-head{display:none;}
  .dq-wrap,.dq-wrap:has(.dq-note){--dq-cols:26px 34px 1fr;}
  .dq-row{grid-template-areas:'g p d' '. . t' '. . y' '. . v' '. . c' '. . s';
    row-gap:2px;padding:11px 12px;}
  .dq-wrap:has(.dq-note) .dq-row{grid-template-areas:'p d d' '. t t' '. y y' '. v v' '. c c' '. s s';}
  .dq-grip{grid-area:g;} .dq-pos{grid-area:p;} .dq-drv{grid-area:d;font-size:14.5px;}
  .dq-truck{grid-area:t;} .dq-type{grid-area:y;} .dq-vol{grid-area:v;}
  .dq-client{grid-area:c;} .dq-st{grid-area:s;}
}

/*  🎫 رقاقةُ رقمِ الدورِ بلافتةِ انتظارِ السائق — رقمٌ كبيرٌ يُقرأ من بعيدٍ
    وهو واقفٌ خارجَ مركبتِه (نفسُ حُجّةِ نبضِ لافتةِ النداء).
    ⚠️ ولونُ الحبرِ **يورَث من اللافتةِ** (`is-wait` تضبطه لكلِّ وضع) فلا لونٌ
       ثانٍ يتباعد عنها.                                                       */
.drv-qpos{margin-inline-start:auto;flex:0 0 auto;display:flex;align-items:baseline;gap:2px;
  font-size:14px;font-weight:700;opacity:.9;}
.drv-qpos b{font-size:clamp(24px,6vw,34px);font-weight:900;line-height:1;}

/* ── لافتةُ نداءِ التحميلِ بشاشةِ السائق ─────────────────────────── */
.drv-call{display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:14px;
  margin-bottom:14px;border:2px solid transparent;}
.drv-call-ic{width:48px;height:48px;flex:0 0 auto;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:21px;}
.drv-call-tx{display:flex;flex-direction:column;gap:3px;min-width:0;}
.drv-call-tx b{font-size:17px;font-weight:900;}
.drv-call-tx small{font-size:12.5px;opacity:.9;}

/*  ⚠️⚠️ **النداءُ نابضٌ بلونين** (نصُّ الطلب: «effects بألوان حتى ينتبه»):
    الخلفيةُ والحدُّ والأيقونةُ تتبدّل بين الكهرمانيِّ والأحمرِ كلَّ 1.2ث،
    فالانتباهُ لا يعتمد على قراءةِ نصٍّ صغير.
    ⚠️ والنصُّ **ثابتُ اللون** (`#3b1f00`) لا يدخل النبض: لونٌ متحرّكٌ تحت
       نصٍّ يجعل التباينَ يهبط بنصفِ الدورةِ. **مقيسٌ بإيقافِ الحركةِ عند خمسِ
       نقاطٍ من الجدولِ الزمنيّ** (لوحةُ المعاينةِ لا تُركّبُ إطاراً فيُقرأ المحسوبُ
       متجمّداً عند المفتاحِ الأول): 11.98 · 11.40 · 10.79 · 11.40 · 11.98 —
       فأدنى نسبةٍ **10.79** والحدُّ 4.5، والنصُّ مقروءٌ طولَ الدورة.
    ⚠️ و`prefers-reduced-motion` يوقف النبضَ ويُبقي اللونَ الثابت — الحركةُ
       المستمرّةُ تؤذي من يتأثّر بها، والرسالةُ تصل بالتباينِ والاهتزازِ.     */
@keyframes drvCallPulse{
  0%,100%{background:#ffe0b2;border-color:#e8871a;box-shadow:0 0 0 0 rgba(232,135,26,.55);}
  50%    {background:#ffcdd2;border-color:#c62828;box-shadow:0 0 0 12px rgba(198,40,40,0);}
}
.drv-call.is-called{animation:drvCallPulse 1.2s ease-in-out infinite;color:#3b1f00;}
.drv-call.is-called .drv-call-ic{background:#fff;color:#c62828;
  animation:drvCallPulse 1.2s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){
  .drv-call.is-called,.drv-call.is-called .drv-call-ic{animation:none;background:#ffe0b2;border-color:#c62828;}
  .drv-call.is-called .drv-call-ic{background:#fff;}
}
.drv-call-ack{margin-inline-start:auto;flex:0 0 auto;border:0;border-radius:11px;cursor:pointer;
  background:#14803f;color:#fff;font-family:inherit;font-size:16px;font-weight:900;
  padding:14px 22px;display:flex;align-items:center;gap:8px;box-shadow:0 3px 10px rgba(0,0,0,.22);}
.drv-call-ack:active:not(:disabled){transform:translateY(1px);}
.drv-call-ack:disabled{opacity:.6;cursor:not-allowed;}

/*  الحالتانِ الساكنتان — بلا حركةٍ (لا شيءَ ينتظر فعلاً من السائق)          */
.drv-call.is-acked{background:color-mix(in srgb, #1aab5c 12%, var(--card));
  border-color:#1aab5c;color:var(--text);}
.drv-call.is-acked .drv-call-ic{background:#1aab5c;color:#fff;}
.drv-call.is-wait{background:var(--card);border-color:var(--border);color:var(--text);}
.drv-call.is-wait .drv-call-ic{background:var(--bg);color:var(--text-muted);}