/* ================================================================
   KAYANAC DESIGN SYSTEM  ·  v1  ·  design-system.css
   ----------------------------------------------------------------
   هوية موحّدة: أحمر (هوية) + كحلي (هيكل) + رمادي دافئ (محتوى).
   خلفية بيضا. الوضع: Light فقط حالياً — مُهيّأ للـ Dark مستقبلاً.

   طريقة التطبيق (opt-in آمن):
     1) ضع الكلاس  ks-scope  على <body> في الصفحة المطلوبة فقط:
          <script>document.body.classList.add('ks-scope')</script>
        (يفعّل سكين الحقول و select2 والجداول على هذه الصفحة فقط)
     2) استخدم مكوّنات  .ks-*  في الماركب.
   باقي النظام لا يتأثر إطلاقاً (كل شيء إمّا متغيّر، إمّا بادئة ks-،
   إمّا مقيّد داخل body.ks-scope).

   الوضع الليلي مستقبلاً = بلوك واحد فقط، دون لمس أي مكوّن:
     :root[data-theme="dark"]{ --bg:#1a1717; --ink:#f2efed; --surface:#232020; ... }
   لا تضف @media(prefers-color-scheme:dark) قبل أن يصبح النظام جاهزاً.
   ================================================================ */

:root{
  /* ---- Brand (من شعار كيانك) ---- */
  --ks-brand:#ed1c24;
  --ks-brand-strong:#c1121f;
  --ks-brand-deep:#791c24;
  --ks-brand-soft:#fdecec;
  --ks-brand-grad:linear-gradient(120deg,#791c24 0%,#c1121f 48%,#ed1c24 100%);

  /* ---- Navy chrome (الهيكل: سايدبار/توبار/فوتر) ---- */
  --ks-navy:#1b2233;
  --ks-navy-2:#232c40;
  --ks-navy-3:#2a344c;
  --ks-navy-line:#2f3a56;
  --ks-navy-ink:#eef1f8;
  --ks-navy-muted:#98a2bd;

  /* ---- Neutrals (رمادي دافئ) — الخلفية بيضا ---- */
  --ks-bg:#ffffff;
  --ks-surface:#ffffff;
  --ks-surface-2:#f7f6f5;   /* لمسة خفيفة: حقول ورؤوس جداول */
  --ks-ink:#2d2d2d;
  --ks-ink-2:#514d49;
  --ks-muted:#6f6a66;
  --ks-faint:#a5a09b;
  --ks-line:#e8e4e1;
  --ks-line-2:#f1eeeb;

  /* ---- Semantic ---- */
  --ks-ok:#16a34a;      --ks-ok-soft:#e6f6ec;
  --ks-warn:#d97706;    --ks-warn-soft:#fdf1dd;
  --ks-danger:#dc2626;  --ks-danger-soft:#fdeaea;
  --ks-info:#2563eb;    --ks-info-soft:#e8effd;

  /* ---- Elevation ---- */
  --ks-shadow-sm:0 1px 2px rgba(40,30,28,.06),0 1px 3px rgba(40,30,28,.05);
  --ks-shadow:0 2px 6px rgba(40,30,28,.06),0 10px 26px rgba(40,30,28,.08);
  --ks-shadow-lg:0 14px 44px rgba(40,30,28,.16);
  --ks-ring:0 0 0 3px rgba(237,28,36,.18);
  --ks-ring-navy:0 0 0 3px rgba(27,34,51,.18);

  /* ---- Shape ---- */
  --ks-r:14px; --ks-r-sm:10px; --ks-r-xs:8px; --ks-r-pill:999px;

  /* ---- Spacing scale (4px) ---- */
  --ks-1:4px; --ks-2:8px; --ks-3:12px; --ks-4:16px; --ks-5:20px; --ks-6:24px; --ks-8:32px;

  /* ---- Type ---- */
  --ks-font:"Tajawal","Cairo",system-ui,"Segoe UI",Tahoma,sans-serif;
  --ks-mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,monospace;

  /* ---- Motion / z ---- */
  --ks-t:.16s cubic-bezier(.4,0,.2,1);
  --ks-z-side:1030; --ks-z-top:1020; --ks-z-modal:1060; --ks-z-toast:1080;
}

/* ================================================================
   BASE (مقيّد على الصفحات المفعّلة فقط)
   ================================================================ */
body.ks-scope{ background:var(--ks-bg); }
.ks-scope .ks-num,
.ks-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.ks-mono{ font-family:var(--ks-mono); font-variant-numeric:tabular-nums; }

/* حاوية الصفحة */
.ks-page{ padding:var(--ks-5); }
@media(max-width:768px){ .ks-page{ padding:var(--ks-4) var(--ks-3); } }

/* ================================================================
   PAGE HEADER + BREADCRUMB
   ================================================================ */
.ks-crumbs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ks-muted); font-weight:600; margin-bottom:var(--ks-3); }
.ks-crumbs a{ color:var(--ks-muted); text-decoration:none; transition:color var(--ks-t); }
.ks-crumbs a:hover{ color:var(--ks-brand); }
.ks-crumbs .sep{ color:var(--ks-faint); }
.ks-crumbs .cur{ color:var(--ks-ink); font-weight:700; }

/* كسوة breadcrumb الخاص بـ Bootstrap داخل الصفحات المفعّلة */
body.ks-scope .breadcrumb{ background:transparent; padding:0; margin-bottom:10px; font-size:12.5px; font-weight:600; }
body.ks-scope .breadcrumb-item a{ color:var(--ks-muted); text-decoration:none; transition:color var(--ks-t); }
body.ks-scope .breadcrumb-item a:hover{ color:var(--ks-brand); }
body.ks-scope .breadcrumb-item.active{ color:var(--ks-ink); font-weight:700; }

.ks-page-head{ display:flex; align-items:flex-start; gap:var(--ks-4); flex-wrap:wrap; margin-bottom:var(--ks-5); }
.ks-page-head .ks-ph-ic{ width:52px; height:52px; border-radius:var(--ks-r-sm); flex:none;
  display:grid; place-items:center; color:#fff; font-size:22px; background:var(--ks-brand-grad);
  box-shadow:0 6px 16px rgba(237,28,36,.28); }
.ks-page-head h1{ font-size:22px; font-weight:800; letter-spacing:-.01em; margin:0; color:var(--ks-ink); }
.ks-page-head p{ color:var(--ks-muted); font-size:13px; margin:3px 0 0; max-width:60ch; }
.ks-page-head .ks-ph-actions{ margin-inline-start:auto; display:flex; gap:var(--ks-2); flex-wrap:wrap; }

/* ================================================================
   CARD / PANEL / SECTION
   ================================================================ */
.ks-card{ background:var(--ks-surface); border:1px solid var(--ks-line);
  border-radius:var(--ks-r); box-shadow:var(--ks-shadow-sm); }
.ks-card--flat{ box-shadow:none; }
.ks-card__head{ display:flex; align-items:center; gap:var(--ks-3);
  padding:var(--ks-4) var(--ks-5); border-bottom:1px solid var(--ks-line-2); }
.ks-card__head h3{ font-size:15px; font-weight:800; margin:0; color:var(--ks-ink); }
.ks-card__head .sub{ font-size:12px; color:var(--ks-faint); font-weight:500; }
.ks-card__head .actions{ margin-inline-start:auto; display:flex; gap:var(--ks-2); }
.ks-card__body{ padding:var(--ks-5); }

/* عنوان قسم داخلي بشريط أحمر */
.ks-section-title{ display:flex; align-items:center; gap:var(--ks-2);
  font-size:14px; font-weight:800; color:var(--ks-ink); margin:0 0 var(--ks-4);
  padding-inline-start:var(--ks-3); border-inline-start:3px solid var(--ks-brand);
  line-height:1.3; }
.ks-section-title i,.ks-section-title .ico{ color:var(--ks-brand); font-size:15px; }
.ks-section-title .sub{ font-size:12px; font-weight:500; color:var(--ks-faint); margin-inline-start:auto; }

/* بانر رأس (بديل invoice-header القديم) */
.ks-banner{ position:relative; overflow:hidden; border-radius:var(--ks-r);
  background:var(--ks-brand-grad); color:#fff; padding:var(--ks-6);
  box-shadow:0 10px 30px rgba(121,28,36,.25); display:flex; align-items:center; gap:var(--ks-4); }
.ks-banner::after{ content:""; position:absolute; inset-inline-start:-40px; bottom:-70px;
  width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.08); }
.ks-banner .ks-banner-ic{ width:56px; height:56px; border-radius:16px; flex:none; position:relative;
  display:grid; place-items:center; font-size:26px; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22); }
.ks-banner h1{ font-size:22px; font-weight:800; margin:0; position:relative; }
.ks-banner p{ margin:3px 0 0; opacity:.9; font-size:13px; position:relative; }

/* ================================================================
   BUTTONS
   ================================================================ */
.ks-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--ks-2);
  border:1px solid transparent; border-radius:var(--ks-r-xs); padding:9px 16px;
  font-family:inherit; font-weight:700; font-size:13.5px; line-height:1; cursor:pointer;
  transition:background var(--ks-t),border-color var(--ks-t),color var(--ks-t),box-shadow var(--ks-t),transform var(--ks-t);
  white-space:nowrap; text-decoration:none; }
.ks-btn:active{ transform:translateY(1px); }
.ks-btn:focus-visible{ outline:none; box-shadow:var(--ks-ring); }
.ks-btn i,.ks-btn svg{ font-size:15px; }
.ks-btn svg{ width:16px; height:16px; }

.ks-btn--primary{ background:var(--ks-brand); color:#fff; box-shadow:0 4px 12px rgba(237,28,36,.24); }
.ks-btn--primary:hover{ background:var(--ks-brand-strong); color:#fff; }
.ks-btn--soft{ background:var(--ks-brand-soft); color:var(--ks-brand-strong); }
.ks-btn--soft:hover{ background:var(--ks-brand); color:#fff; }
.ks-btn--ghost{ background:var(--ks-surface); border-color:var(--ks-line); color:var(--ks-ink); }
.ks-btn--ghost:hover{ border-color:var(--ks-brand); color:var(--ks-brand); background:var(--ks-brand-soft); }
.ks-btn--ok{ background:var(--ks-ok); color:#fff; }
.ks-btn--ok:hover{ filter:brightness(.94); color:#fff; }
.ks-btn--ok-soft{ background:var(--ks-ok-soft); color:var(--ks-ok); }
.ks-btn--danger{ background:var(--ks-danger); color:#fff; }
.ks-btn--danger:hover{ filter:brightness(.94); color:#fff; }
.ks-btn--danger-soft{ background:var(--ks-danger-soft); color:var(--ks-danger); }
.ks-btn--danger-soft:hover{ background:var(--ks-danger); color:#fff; }
.ks-btn--navy{ background:var(--ks-navy); color:#fff; }
.ks-btn--navy:hover{ background:var(--ks-navy-2); color:#fff; }
.ks-btn--warn{ background:var(--ks-warn); color:#fff; }
.ks-btn--warn:hover{ filter:brightness(.94); color:#fff; }
.ks-btn--warn-soft{ background:var(--ks-warn-soft); color:var(--ks-warn); }
.ks-btn--warn-soft:hover{ background:var(--ks-warn); color:#fff; }
.ks-btn--info{ background:var(--ks-info); color:#fff; }
.ks-btn--info:hover{ filter:brightness(.94); color:#fff; }
.ks-btn--info-soft{ background:var(--ks-info-soft); color:var(--ks-info); }
.ks-btn--info-soft:hover{ background:var(--ks-info); color:#fff; }

.ks-btn--lg{ padding:12px 22px; font-size:14.5px; }
.ks-btn--sm{ padding:7px 12px; font-size:12.5px; }
.ks-btn--block{ width:100%; }
.ks-btn--icon{ padding:0; width:36px; height:36px; }
.ks-btn:disabled,.ks-btn.is-disabled{ opacity:.55; cursor:not-allowed; }

/* زر أيقونة صغير محايد (تعديل/حذف داخل الجداول) */
.ks-icon-btn{ width:32px; height:32px; border-radius:var(--ks-r-xs); border:1px solid var(--ks-line);
  background:var(--ks-surface); display:inline-grid; place-items:center; color:var(--ks-muted);
  cursor:pointer; transition:all var(--ks-t); }
.ks-icon-btn:hover{ border-color:var(--ks-brand); color:var(--ks-brand); background:var(--ks-brand-soft); }
.ks-icon-btn--danger:hover{ border-color:var(--ks-danger); color:var(--ks-danger); background:var(--ks-danger-soft); }

/* ================================================================
   FORM FIELDS
   ----------------------------------------------------------------
   نُقدّم مكوّن .ks-field الجديد، ونُعيد كسوة عناصر Bootstrap
   الموجودة (.form-control/.form-select/textarea) داخل body.ks-scope
   حتى تتبنّى الشكل الجديد دون تغيير الماركب.
   ================================================================ */
.ks-field{ display:block; margin-bottom:var(--ks-3); }
.ks-field > label,.ks-label{ display:block; font-size:12.5px; font-weight:700;
  color:var(--ks-ink); margin-bottom:6px; }
.ks-field .req,.ks-label .req{ color:var(--ks-danger); margin-inline-start:2px; }
.ks-field .ks-hint{ font-size:11.5px; color:var(--ks-faint); margin-top:5px; }

.ks-control,
body.ks-scope .form-control,
body.ks-scope .form-select,
body.ks-scope textarea.form-control{
  width:100%; border:1px solid var(--ks-line); background-color:var(--ks-surface-2);
  color:var(--ks-ink); border-radius:var(--ks-r-xs); padding:9px 12px;
  font-family:inherit; font-size:13.5px; line-height:1.5; outline:none;
  transition:border-color var(--ks-t),background var(--ks-t),box-shadow var(--ks-t); }
/* 🔴 بطلب صريح (٧ سبتمبر ٢٠٢٦): **أي `input` أو `select` عليه `.form-control`
      يبقى بلا `padding` — في السيستم كله.**

   🪤 القاعدة دي **مش محصورة في `body.ks-scope`** عن قصد: الطلب «كل السيستم»،
      والشاشات القديمة (اللي مافيهاش `ks-scope`) بتاخد `padding` من بوتستراب
      نفسه (`.form-control{padding:.375rem .75rem}`) — فالحصر كان هيسيبها زي ما هي.
      ده استثناء واعي من قاعدة «كل سيليكتور جديد يتسبق بـ`.ks-` أو ينحصر في
      `body.ks-scope`». مقصور على `input`/`select` بالاسم عشان ما يزحفش لحاجة تانية.

   🪤 `!important` مطلوب: فيه قواعد **بعد** دي بتحط padding على نفس العناصر
      (`.ks-filterbar .form-control` بـ`0 12px` · قواعد كروت الموبايل)، ومن غيره
      كانت هتفضل غالبة في الشاشات دي.

   🛑 مقصود إنها `input` و`select` **بس** — `textarea` و`.form-select` (من غير
      `.form-control`) ما اتلمسوش، لأن الطلب اتحدّد بالاتنين دول بالاسم.

   🔴🔴🔴 **تحديث ١٢ سبتمبر ٢٠٢٦ (بلاغ المستخدم): الحشو الأفقي رجع 8px.**
      `padding:0` كانت بتلزق النص في **حافة الخانة** بالظبط (اتصوّرت على حقل
      «المبلغ») — والمستخدم قال «عايز الكتابة تتزق شوية بس مش لازقة أوي».
      🔑 **الصفر الرأسي زي ما هو** ⇒ ارتفاع الحقول مايتغيرش ولا مليمتر،
         واللي اتغيّر هو الخلوص الجانبي بس. */
input.form-control,
select.form-control{ padding:0 8px !important; }

.ks-control::placeholder,
body.ks-scope .form-control::placeholder{ color:var(--ks-faint); }
.ks-control:focus,
body.ks-scope .form-control:focus,
body.ks-scope .form-select:focus,
body.ks-scope textarea.form-control:focus{
  border-color:var(--ks-brand); background-color:var(--ks-surface); box-shadow:var(--ks-ring); }
body.ks-scope .form-control:disabled,
body.ks-scope .form-select:disabled,
body.ks-scope .form-control[readonly]{ background-color:var(--ks-line-2); color:var(--ks-muted); cursor:not-allowed; }
/* داخل input-group: يجب أن يتمدّد الإنبت كـ flex لا أن يأخذ 100% (وإلا تلتفّ العناصر) */
body.ks-scope .input-group > .form-control,
body.ks-scope .input-group > .form-select{ width:1%; flex:1 1 auto; }

/* سهم للـ select الأصلي (native) */
body.ks-scope select.form-select,
.ks-control.ks-select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236f6a66' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 12px center; padding-left:36px; padding-right:12px; }

/* checkbox / radio */
.ks-check{ display:inline-flex; align-items:center; gap:var(--ks-2); cursor:pointer; font-size:13px; font-weight:600; color:var(--ks-ink); }
body.ks-scope .form-check-input:checked,
.ks-check input:checked{ background-color:var(--ks-brand); border-color:var(--ks-brand); }
body.ks-scope .form-check-input:focus,
.ks-check input:focus{ box-shadow:var(--ks-ring); border-color:var(--ks-brand); }

/* toggle switch — keep the switch and its label on one inline row in BOTH
   directions. The bundled Bootstrap is the LTR build, so .form-check-input
   floats left with a negative margin; inside an RTL page that floats the
   switch away and wraps the label underneath it. Flex layout is
   direction-agnostic and drops the float that caused the wrap.

   🔴🔴🔴 `position:static` هو المفتاح، ومن غيره الفليكس مالوش لازمة.
      `backend/css/sb-admin-2.min.css` باندل **بوتستراب ٤**، وفيه:
          .form-check-input{ position:absolute; margin-top:.3rem; margin-left:-1.25rem }
      وبوتستراب ٥ (`boot5/bootstrap.min.css`) **مابيصرّحش بـ`position`** للكلاس ده
      خالص ⇒ مفيش حاجة بتنازع السطر، فـ`absolute` بتسود على كل تشيك-بوكس/توجل
      في السيستم. العنصر بيخرج من التدفق ⇒ الفليكس بيرصّ الليبل لوحده، والتوجل
      بيترسم في وضعه الساكن = **الحافة اليمنى في RTL** = بالظبط مكان أول الكلام.
      📏 مقيس: sales-settings ١٨/١٨ و purchase-settings ١٢/١٢ توجل متراكب ٤٨px،
         وبقوا صفر بعد `position:static`.

   🪤 و`padding-inline-start` لوحده مابيلغيش `padding-left` بتاعة بوتستراب:
      البيلد LTR بيكتبها **فيزيائية**، والمنطقية في RTL بتروح على اليمين ⇒
      لازم `padding-left:0` صريحة كمان، وإلا بيفضل ٤٠px فراغ ميت على الشمال. */
body.ks-scope .form-check.form-switch{
  display:flex; align-items:center; gap:10px;
  padding-inline-start:0; padding-left:0; }
body.ks-scope .form-check.form-switch .form-check-input{
  position:static; float:none; margin:0; flex-shrink:0; cursor:pointer; }
body.ks-scope .form-check.form-switch .form-check-label{ margin:0; cursor:pointer; }

/* ────────────────────────────────────────────────────────────────
   تشيك-بوكس عادي (مش توجل) — نفس علّة التوجل فوق بالظبط.

   بوتستراب ٥ المحمّل هنا **بيلد LTR**:
       .form-check{ padding-left:1.5em }
       .form-check .form-check-input{ float:left; margin-left:-1.5em }
   الاتنين **فيزيائيين على الشمال**. في صفحة RTL الكلام بيبدأ من اليمين
   والمربع بيعوم على الشمال بهامش سالب ⇒ في حاوية ضيّقة (عمود بوتستراب صغير)
   المربع بيقع **فوق** الكلام. العلاج هو نفس اللي اتعمل للتوجل ومقيس:
   فليكس (محايد للاتجاه) + `position:static` عشان العنصر يفضل في التدفق.

   🪤 `padding-left:0` صريحة لازم مع `padding-inline-start:0` — البيلد LTR
      بيكتبها فيزيائية والمنطقية في RTL بتروح على اليمين (نفس ملحوظة التوجل).
   🛑 محصور بـ`:not(.form-switch)` عشان قاعدة التوجل الأخص تفضل هي الحاكمة. */
body.ks-scope .form-check:not(.form-switch){
  display:flex; align-items:flex-start; gap:8px;
  padding-inline-start:0; padding-left:0; }
body.ks-scope .form-check:not(.form-switch) > .form-check-input{
  position:static; float:none; margin:.2em 0 0; flex-shrink:0; cursor:pointer; }
body.ks-scope .form-check:not(.form-switch) > .form-check-label{ margin:0; cursor:pointer; }

/* ────────────────────────────────────────────────────────────────
   توجل **بوتستراب ٤** (`custom-control custom-switch`) — علّة تانية غير اللي فوق.

   `boot5` بيسمّي التوجل `.form-check.form-switch`، لكن ٤٥ شاشة في السيستم لسه
   بتستعمل تسمية بوتستراب ٤ (`custom-control custom-switch`) اللي ستايلها جاي من
   `backend/css/sb-admin-2.min.css` — وكل إحداثياته **فيزيائية على الشمال**:
       .custom-control{ padding-left:1.5rem }
       .custom-switch{ padding-left:2.25rem }
       .custom-switch .custom-control-label::before{ left:-2.25rem }
       .custom-switch .custom-control-label::after { left:calc(-2.25rem + 2px) }
       …:checked ~ …::after{ transform:translateX(.75rem) }
   في صفحة RTL الكلام بيبدأ من اليمين، والحشو المحجوز على الشمال، ورسمة التوجل
   بتتحط على شمال صندوق الليبل = **بالظبط مكان آخر حرف** ⇒ الزرار بيغطّي الكلام.

   ✅ العلاج: خصائص منطقية (`padding-inline-start` / `inset-inline-start`) بتشتغل
      صح في الاتجاهين، و**استبدال `translateX` بإزاحة منطقية** لأن `translateX`
      مالهاش نظير منطقي وبتتحرك ناحية غلط في RTL.
   🔑 `design-system.css` بيتحمّل **بعد** `sb-admin-2` في الهيد ⇒ نفس الأخصية
      والترتيب كفاية، من غير `!important`. */
/* 📏 مقيس في متصفح المستخدم (إعدادات إدارة الإنتاج · تاب الباتش والصلاحية):
      label 498→739 · labelPos:relative · ::before width **40px** · right:-36px
      ⇒ الرسمة بتبدأ من 735 والليبل بينتهي 739 = **تراكب 4px**.

   🔑🔑🔑 العلّة مش الاتجاه ولا مرجع التموضع — الاتنين طلعوا صح في القياس
      (`dir:rtl` · `matches:true` · `padStart:36px`). العلّة إن **التيمة بتوسّع
      رسمة التوجل لـ40px من غير ما توسّع الفجوة المحجوزة لها (2.25rem = 36px)**.

   ✅ الفجوة والإزاحة بقوا **رقم واحد** في متغيّر — لو احتاج ضبط، سطر واحد يتغيّر.
      3rem = 48px ⇒ 8px خلوص فوق الـ40. */
body.ks-scope .custom-control{
  --ks-cc-gutter:2rem;
  padding-left:0; padding-inline-start:var(--ks-cc-gutter); }
body.ks-scope .custom-control .custom-control-label::before,
body.ks-scope .custom-control .custom-control-label::after{
  left:auto; right:auto; inset-inline-start:calc(-1 * var(--ks-cc-gutter)); }

body.ks-scope .custom-switch{
  --ks-cc-gutter:3rem; }
body.ks-scope .custom-switch .custom-control-label::before{
  left:auto; right:auto; inset-inline-start:calc(-1 * var(--ks-cc-gutter)); }
body.ks-scope .custom-switch .custom-control-label::after{
  left:auto; right:auto; inset-inline-start:calc(-1 * var(--ks-cc-gutter) + 2px); }
body.ks-scope .custom-switch .custom-control-input:checked ~ .custom-control-label::after{
  transform:none; inset-inline-start:calc(-1 * var(--ks-cc-gutter) + 2px + 0.75rem); }

/* ────────────────────────────────────────────────────────────────
   `form-floating` — الليبل العايم كان بيتراكب على مكان الكتابة.

   السبب: القاعدة العامة فوق
       input.form-control, select.form-control{ padding:0 8px !important }
   (كانت `padding:0` لحد ١٢ سبتمبر ٢٠٢٦ — الحشو الرأسي لسه صفر في الحالتين)
   بتلغي حشو بوتستراب (`padding:1rem .75rem` + `height:calc(3.5rem + 2px)`)
   اللي الليبل العايم **بيعتمد عليه** عشان يقعد في الجزء العلوي من الحقل.
   من غير الحشو، النص بيبدأ من أول الحقل والليبل بيقعد عليه.

   ⚠️ بنرجّع قيم بوتستراب نفسها للحقول **اللي جوّه `.form-floating` بس** —
      الأخصية أعلى (كلاسين + عنصر) فبتغلب القاعدة العامة، وباقي السيستم
      ما اتلمسش.
   🛑 `select` مفعّل عليه select2 جوّه `form-floating` **مش بيتصلح بالحشو** —
      select2 بيخفي الـ`select` الأصلي ويرسم ودجت، فالليبل بيقعد على الودجت.
      الحل هناك تخطيط «ليبل فوق» (زي ما اتعمل في شاشة إضافة قيد). */
.form-floating > input.form-control,
.form-floating > select.form-control{
  padding:1rem .75rem !important; height:calc(3.5rem + 2px); }
.form-floating > input.form-control:focus,
.form-floating > input.form-control:not(:placeholder-shown){
  padding-top:1.625rem !important; padding-bottom:.625rem !important; }
.form-floating > textarea.form-control{ padding:1rem .75rem !important; }

/* حالات تحقق (JS يبدّلها) */
body.ks-scope .border-success{ border-color:var(--ks-ok)!important; box-shadow:0 0 0 3px var(--ks-ok-soft)!important; }
body.ks-scope .border-danger{ border-color:var(--ks-danger)!important; box-shadow:0 0 0 3px var(--ks-danger-soft)!important; }

/* ================================================================
   SELECT2 SKIN (v4.x)  — مقيّد على body.ks-scope
   يُحسّن شكل select2 السيئ الحالي دون لمس أي JS.

   🔴🔴🔴 ليه `:is(--default, --bootstrap-5)` في كل سيلكتور هنا:
      select2 بيسمّي حاوية الحقل على اسم التيمة — `select2-container--<theme>`.
      **٢٠ بليد في السيستم بتهيّئ بـ`theme:'bootstrap-5'`** (CRM · تقارير ·
      صلاحيات الموردين · قايمة الأسعار · اعدادات المبيعات …) فبتاخد
      `select2-container--bootstrap-5`، و**مفيش ولا ملف CSS في `public/`
      بيعرّف الكلاس ده** — التيمة اتطلبت من الـJS وستايلها مش موجود أصلاً.
      ⇒ السكين كله كان بيتخطّاهم، والحقل بيطلع نص عريان بلا إطار.

   🔑🔑🔑 والأخطر إن **`max-height` بتاعة select2 نفسه مربوطة بالتيمة**:
          `.select2-container--default .select2-results > .select2-results__options{max-height:200px}`
      ⇒ على تيمة تانية **مفيش قاعدة تطابق** ⇒ `max-height:none` ⇒ القايمة
      بترسم كل خياراتها. 📏 مقيس: `sales-settings` ١٢٨ خيار = **٤٬٩٩٤px**
      والشاشة ٩١٧px ⇒ بتغطّي التوب بار. نفس الحقل على `--default` = ٢٥٥px.
      🔑 **العطل مش قاعدة متنازَع عليها — العطل إن مفيش قاعدة بتطابق أصلاً**
         (نفس عيلة عطل `position` بتاع `.form-check-input` فوق).
   ================================================================ */

/* الارتفاع الأقصى الناقص لأي تيمة غير `--default`/`--classic`.
   مقصور على كلاس التيمة نفسه ⇒ مستحيل يمس `--default` أو أي شاشة تانية. */
.select2-container--bootstrap-5 .select2-results > .select2-results__options{
  max-height:200px; overflow-y:auto; }

body.ks-scope :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single{
  height:40px; border:1px solid var(--ks-line); background:var(--ks-surface-2);
  border-radius:var(--ks-r-xs); display:flex; align-items:center; padding:0 12px;
  transition:border-color var(--ks-t),box-shadow var(--ks-t),background var(--ks-t); }
body.ks-scope :is(.select2-container--default,.select2-container--bootstrap-5):not(.select2-container--disabled):not(.select2-container--open) .select2-selection--single:hover{
  border-color:var(--ks-faint); background:var(--ks-surface); }
body.ks-scope :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__rendered{
  color:var(--ks-ink); line-height:38px; padding:0; font-size:13.5px; font-weight:600; }
body.ks-scope :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__placeholder{
  color:var(--ks-faint); font-weight:500; }
body.ks-scope :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__arrow{
  height:100%; top:0; inset-inline-start:auto; inset-inline-end:10px; }
body.ks-scope :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__arrow b{
  border-color:var(--ks-muted) transparent transparent; }
body.ks-scope :is(.select2-container--default,.select2-container--bootstrap-5).select2-container--open .select2-selection__arrow b{
  border-color:transparent transparent var(--ks-brand); }
body.ks-scope :is(.select2-container--default,.select2-container--bootstrap-5).select2-container--open .select2-selection--single,
body.ks-scope :is(.select2-container--default,.select2-container--bootstrap-5).select2-container--focus .select2-selection--single{
  border-color:var(--ks-brand); background:var(--ks-surface); box-shadow:var(--ks-ring); }
body.ks-scope :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__clear{
  color:var(--ks-faint); font-weight:400; font-size:17px; line-height:1; margin-inline-start:6px; }
body.ks-scope :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--single .select2-selection__clear:hover{ color:var(--ks-danger); }

/* multiple */
body.ks-scope :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--multiple{
  min-height:40px; border:1px solid var(--ks-line); background:var(--ks-surface-2); border-radius:var(--ks-r-xs); }
body.ks-scope :is(.select2-container--default,.select2-container--bootstrap-5) .select2-selection--multiple .select2-selection__choice{
  background:var(--ks-brand-soft); border:1px solid transparent; color:var(--ks-brand-strong);
  border-radius:var(--ks-r-xs); padding:2px 8px; font-size:12px; font-weight:700; }

/* dropdown (يُلحق بالـ body — لذلك يُقيّد بـ body.ks-scope) */
body.ks-scope .select2-dropdown,
body.ks-scope.select2-dropdown{ border:1px solid var(--ks-line); border-radius:var(--ks-r-sm);
  box-shadow:var(--ks-shadow); background:var(--ks-surface); overflow:hidden; }
body.ks-scope .select2-search--dropdown{ padding:8px; }
body.ks-scope .select2-search--dropdown .select2-search__field{
  border:1px solid var(--ks-line); border-radius:var(--ks-r-xs); padding:8px 10px;
  background:var(--ks-surface-2); color:var(--ks-ink); font-family:inherit; font-size:13px; outline:none; }
body.ks-scope .select2-search--dropdown .select2-search__field:focus{
  border-color:var(--ks-brand); box-shadow:var(--ks-ring); background:var(--ks-surface); }
body.ks-scope .select2-results > .select2-results__options{ padding:5px; }
body.ks-scope .select2-results__option{ padding:9px 11px; margin:1px 0; border-radius:var(--ks-r-xs);
  font-size:13px; color:var(--ks-ink); transition:background var(--ks-t),color var(--ks-t); }
body.ks-scope .select2-results__option--highlighted[aria-selected],
body.ks-scope :is(.select2-container--default,.select2-container--bootstrap-5) .select2-results__option--highlighted[aria-selected]{
  background:var(--ks-brand-soft); color:var(--ks-brand-strong); }
body.ks-scope :is(.select2-container--default,.select2-container--bootstrap-5) .select2-results__option[aria-selected=true]{
  background:var(--ks-brand); color:#fff; }
body.ks-scope .select2-results__message{ color:var(--ks-muted); padding:10px 12px; font-size:13px; }
body.ks-scope .select2-results__option .select2-results__group{ color:var(--ks-faint); font-weight:700; font-size:12px; }

/* ────────────────────────────────────────────────────────────────
   قاعدة السيستم: **قايمة select2 بتترسم جوّه حاوية متموضعة جنب الحقل — مش في الـbody.**

   في كلاسين، والفرق بينهم مين بيحطّه:
     · `.ks-s2-cell`  ← **بتكتبه أنت في الماركب**: `<div class="ks-s2-cell">` حوالين
                          الـ`<select>`. لازم في الجداول تحديدًا (تحت).
     · `.ks-s2-host`  ← **بيحطّه `ksSelect2` وقت التشغيل** على الحاوية اللي اختارها.
   الاتنين بياخدوا نفس الستايل، فالشاشة بتشتغل صح سواء لفّيت بإيدك أو سبتها للجافاسكربت.

   🪤 **في الجداول لفّ الحقل في `<div class="ks-s2-cell">` — متعتمدش على الخلية.**
      CSS 2.1 §9.4.3: أثر `position:relative` على `table-cell` **غير معرَّف**،
      وبـ`border-collapse:collapse` المتصفح مابيعملش containing block للخلية ⇒
      القايمة بتتحسب نسبة لأب أبعد وتفتح بعيد عن الحقل. الـ`<div>` عنصر عادي
      فالسلوك مضمون. (اتقاس على شاشة الأصناف — الوحدات.)

   🩸 العطل ده اتصلّح مرتين بحلّين متعاكسين قبل كده، والاتنين رجعوا:
      · الحاوية المباشرة دايمًا  ⇒ الموضع مظبوط، والقايمة **بتتقص** جوّه
        `.table-responsive` (كوميت 99102d5a — «إذن استلام جديد»).
      · `body` لما فيه قص       ⇒ مفيش قص، والموضع **بيبعد** لأن select2 بيحسب
        من `offset()` بإحداثيات صفحة كبيرة (شاشة الأصناف).
      ✅ الحل المعتمد: `resolveHost()` في `x-ks.select2-init` بتطلع **بالظبط فوق
         آخر حاوية بتقص** — لا أقل (فتتقص) ولا لحد الـbody (فتبعد).

   🔴 ليه `position:relative` بالذات — من كود select2 4.0.8:
       var p = this.$dropdownParent;
       if ("static" === p.css("position")) p = p.offsetParent();
       var h = p.offset(); d.top -= h.top; d.left -= h.left;
   `jQuery.offsetParent()` بيمشي على `position` بس، لكن المتصفح بيعتبر أي أب فيه
   `transform`/`filter`/`backdrop-filter`/`perspective` حاوية حتى لو `static`. لما
   الاتنين يختلفوا بتتطرح إزاحة عنصر غير اللي المتصفح بيحسب منه ⇒ القايمة تتزاح
   بمقدار إزاحة الأب المتحوَّل. خلّي الحاوية `relative` فالاتنين يتطابقوا.

   🔴 وليه هنا مش جوّه `<style>` في `x-ks.select2-init`: الكلاس ده بتضيفه كمان شاشات
   بتهيّئ select2 بنفسها (صفوف بتتولد بعد التحميل) وماعندهاش الوسم — فكانت بتاخد
   الكلاس بلا ستايل والعطل يرجع صامت. الستايل المشترك مكانه هنا.
   ──────────────────────────────────────────────────────────────── */
body.ks-scope .ks-s2-cell,
body.ks-scope .ks-s2-host{ position:relative; }

/* 🪤 `.select2` بتتحط على **ودجت الحقل** بس؛ حاوية القايمة المفتوحة كلاسها
      `.select2-container` من غيرها. من غير التخصيص ده، لما الحاوية تبقى عنصر كبير
      (كارت فوق جدول بيقص) القايمة كانت هتاخد عرض الكارت كله.
      عرض القايمة نفسها select2 بيحسبه من الحقل — مانلمسوش. */
body.ks-scope .ks-s2-cell > .select2-container.select2,
body.ks-scope .ks-s2-host > .select2-container.select2{ width:100% !important; }

body.ks-scope .ks-s2-cell .select2-dropdown,
body.ks-scope .ks-s2-host .select2-dropdown{ z-index:1060; }

/* ================================================================
   TABLE
   ================================================================ */
.ks-table-wrap{ overflow-x:auto; border:1px solid var(--ks-line); border-radius:var(--ks-r-sm); }
.ks-table{ width:100%; border-collapse:collapse; font-size:13px; }
.ks-table thead th{ background:var(--ks-surface-2); color:var(--ks-muted); font-weight:700;
  text-align:start; padding:11px 14px; border-bottom:1px solid var(--ks-line); font-size:12px;
  white-space:nowrap; position:sticky; top:0; z-index:1; }
.ks-table tbody td{ padding:10px 14px; border-bottom:1px solid var(--ks-line-2); color:var(--ks-ink); vertical-align:middle; }
.ks-table tbody tr{ transition:background var(--ks-t); }
.ks-table tbody tr:hover{ background:var(--ks-brand-soft); }
.ks-table tbody tr:last-child td{ border-bottom:none; }
.ks-table tfoot td{ background:var(--ks-surface-2); font-weight:800; border-top:2px solid var(--ks-line); padding:11px 14px; }
.ks-table .ks-num,.ks-table td.num{ font-variant-numeric:tabular-nums; font-family:var(--ks-mono); }

/* ================================================================
   PAGINATION  (مكوّن + كسوة DataTables داخل body.ks-scope)
   ================================================================ */
.ks-pager{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.ks-pager a,.ks-pager button,.ks-pager span{ min-width:34px; height:34px; padding:0 11px;
  display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--ks-line);
  border-radius:var(--ks-r-xs); color:var(--ks-muted); font-weight:700; font-size:13px; cursor:pointer;
  background:var(--ks-surface); transition:all var(--ks-t); text-decoration:none; }
.ks-pager a:hover{ border-color:var(--ks-brand); color:var(--ks-brand); background:var(--ks-brand-soft); }
.ks-pager .active,.ks-pager .current{ background:var(--ks-brand); border-color:var(--ks-brand); color:#fff;
  box-shadow:0 4px 10px rgba(237,28,36,.28); }
.ks-pager .disabled{ opacity:.45; pointer-events:none; }

/* DataTables paginate (للصفحات المفعّلة) */
body.ks-scope .dataTables_wrapper .dataTables_paginate .paginate_button{
  border:1px solid var(--ks-line)!important; border-radius:var(--ks-r-xs)!important;
  background:var(--ks-surface)!important; color:var(--ks-muted)!important; padding:6px 12px!important;
  margin:0 2px!important; transition:all var(--ks-t); }
body.ks-scope .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  border-color:var(--ks-brand)!important; color:var(--ks-brand)!important;
  background:var(--ks-brand-soft)!important; }
body.ks-scope .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.ks-scope .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:var(--ks-brand)!important; border-color:var(--ks-brand)!important; color:#fff!important; }
body.ks-scope .dataTables_wrapper .dataTables_length select,
body.ks-scope .dataTables_wrapper .dataTables_filter input{
  border:1px solid var(--ks-line); border-radius:var(--ks-r-xs); padding:6px 10px; outline:none; }
body.ks-scope .dataTables_wrapper .dataTables_filter input:focus{ border-color:var(--ks-brand); box-shadow:var(--ks-ring); }

/* ---- كسوة جدول DataTables كامل (نفس مظهر ثيم Tabulator) ----
   يخلّي أي DataTable على صفحة .ks-scope يبان عصري: رأس هادي بلا فواصل رأسية،
   صفوف واسعة بـhover وردي خفيف، بلا zebra، أسهم ترتيب بلون البراند. */
body.ks-scope .dataTables_wrapper{ color:var(--ks-ink); }
body.ks-scope .dataTables_wrapper .dataTables_info,
body.ks-scope .dataTables_wrapper .dataTables_length,
body.ks-scope .dataTables_wrapper .dataTables_length label,
body.ks-scope .dataTables_wrapper .dataTables_filter label{ color:var(--ks-muted); font-weight:600; font-size:13px; }
body.ks-scope table.dataTable{ border-collapse:collapse!important; width:100%!important;
  background:var(--ks-surface); color:var(--ks-ink); border:none; margin:0!important; }
/* رأس الجدول */
body.ks-scope table.dataTable thead th,
body.ks-scope table.dataTable thead td{
  background:var(--ks-surface); color:var(--ks-muted)!important; font-weight:700; font-size:12.5px;
  padding:13px 12px!important; text-align:center; white-space:nowrap;
  border:none!important; border-bottom:1px solid var(--ks-line)!important; }
/* خلايا */
body.ks-scope table.dataTable tbody td{
  padding:12px 12px!important; font-size:13.5px; color:var(--ks-ink); vertical-align:middle;
  text-align:center; border:none!important; border-bottom:1px solid #f1efec!important; }
/* بلا zebra + hover وردي خفيف */
body.ks-scope table.dataTable tbody tr{ background:var(--ks-surface)!important; }
body.ks-scope table.dataTable tbody tr:hover td{ background:var(--ks-brand-soft)!important; }
body.ks-scope table.dataTable.stripe tbody tr.odd td,
body.ks-scope table.dataTable.display tbody tr.odd td{ background:transparent!important; }
/* أسهم الترتيب: خافتة، وبلون البراند لما تكون فعّالة */
body.ks-scope table.dataTable thead .sorting::before,
body.ks-scope table.dataTable thead .sorting::after,
body.ks-scope table.dataTable thead .sorting_asc::before,
body.ks-scope table.dataTable thead .sorting_asc::after,
body.ks-scope table.dataTable thead .sorting_desc::before,
body.ks-scope table.dataTable thead .sorting_desc::after{ opacity:.35; color:var(--ks-muted); }
body.ks-scope table.dataTable thead .sorting_asc::before,
body.ks-scope table.dataTable thead .sorting_desc::after{ opacity:1; color:var(--ks-brand); }
/* شيل بوردر Bootstrap-bordered لو الجدول لابسه */
body.ks-scope table.dataTable.table-bordered th,
body.ks-scope table.dataTable.table-bordered td{ border-inline:none!important; }

/* ================================================================
   PILLS / BADGES
   ================================================================ */
/* white-space:nowrap مقصود — الـ pill غالبًا جوّه خلية جدول، ومن غيره النص
   بيتلف أو يتقصّ (زي «مقفلة بالكامل» اللي كانت بتبان «مقفلة بالكاد»). */
.ks-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 11px;
  border-radius:var(--ks-r-pill); font-size:11.5px; font-weight:700; line-height:1.5;
  white-space:nowrap; }
.ks-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.ks-pill--dot-none::before{ display:none; }
.ks-pill--ok{ background:var(--ks-ok-soft); color:var(--ks-ok); }
.ks-pill--warn{ background:var(--ks-warn-soft); color:var(--ks-warn); }
.ks-pill--danger{ background:var(--ks-danger-soft); color:var(--ks-danger); }
.ks-pill--info{ background:var(--ks-info-soft); color:var(--ks-info); }
.ks-pill--brand{ background:var(--ks-brand-soft); color:var(--ks-brand-strong); }
.ks-pill--muted{ background:var(--ks-line-2); color:var(--ks-muted); }

.ks-tag{ display:inline-block; background:var(--ks-surface-2); border:1px solid var(--ks-line);
  border-radius:var(--ks-r-xs); padding:2px 9px; font-size:11.5px; font-weight:600; color:var(--ks-muted); }

/* ================================================================
   KPI / STAT
   ================================================================ */
.ks-kpi{ background:var(--ks-surface); border:1px solid var(--ks-line); border-radius:var(--ks-r);
  padding:16px 17px; box-shadow:var(--ks-shadow-sm); transition:transform var(--ks-t),box-shadow var(--ks-t); }
.ks-kpi:hover{ transform:translateY(-3px); box-shadow:var(--ks-shadow); }
.ks-kpi .ks-kpi-ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; margin-bottom:11px; font-size:19px; }
.ks-kpi .ks-kpi-v{ font-size:25px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--ks-ink); }
.ks-kpi .ks-kpi-l{ color:var(--ks-muted); font-size:12.5px; font-weight:600; margin-top:1px; }
.ks-i-brand{ background:var(--ks-brand-soft); color:var(--ks-brand); }
.ks-i-ok{ background:var(--ks-ok-soft); color:var(--ks-ok); }
.ks-i-warn{ background:var(--ks-warn-soft); color:var(--ks-warn); }
.ks-i-info{ background:var(--ks-info-soft); color:var(--ks-info); }

/* ================================================================
   NOTE / ALERT INLINE
   ================================================================ */
.ks-note{ display:flex; gap:11px; align-items:flex-start; border:1px solid var(--ks-line);
  border-radius:var(--ks-r-sm); padding:12px 14px; font-size:13px; line-height:1.7; color:var(--ks-ink); background:var(--ks-surface-2); }
.ks-note .ks-note-k{ flex:none; }
.ks-note--ok{ background:var(--ks-ok-soft); border-color:transparent; }
.ks-note--warn{ background:var(--ks-warn-soft); border-color:transparent; }
.ks-note--danger{ background:var(--ks-danger-soft); border-color:transparent; }
.ks-note--info{ background:var(--ks-info-soft); border-color:transparent; }
.ks-note + .ks-note{ margin-top:var(--ks-2); }
.ks-note-list{ margin:6px 0 0; padding-inline-start:18px; font-size:12.5px; }
.ks-note-list li{ margin-top:2px; }

/* ================================================================
   TOTALS SUMMARY CHIPS
   ================================================================ */
.ks-totchips{ display:flex; flex-wrap:wrap; gap:var(--ks-3); }
.ks-totchip{ flex:1; min-width:150px; background:var(--ks-surface); border:1px solid var(--ks-line);
  border-radius:var(--ks-r-sm); padding:13px 15px; }
.ks-totchip .l{ font-size:11.5px; color:var(--ks-muted); font-weight:600; }
.ks-totchip .v{ font-size:19px; font-weight:800; margin-top:3px; font-variant-numeric:tabular-nums; color:var(--ks-ink); }
.ks-totchip--brand{ background:var(--ks-brand-grad); border-color:transparent; color:#fff; }
.ks-totchip--brand .l{ color:rgba(255,255,255,.85); }
.ks-totchip--brand .v{ color:#fff; }

/* ================================================================
   NAVY CHROME (سايدبار/توبار/فوتر) — للاستخدام في تخطيط الداشبورد
   ================================================================ */
.ks-sidebar{ background:var(--ks-navy); color:var(--ks-navy-ink); display:flex; flex-direction:column; }
.ks-sidebar .ks-brand{ display:flex; align-items:center; gap:10px; padding:16px 16px 12px; }
.ks-sidebar .ks-brand img{ height:34px; width:auto; }
.ks-nav-group > .ks-nav-h{ font-size:10px; font-weight:700; color:var(--ks-navy-muted);
  text-transform:uppercase; letter-spacing:.09em; padding:14px 16px 6px; }
.ks-nav-item{ display:flex; align-items:center; gap:11px; padding:9px 14px; margin:1px 8px;
  border-radius:var(--ks-r-xs); color:#c3cadd; font-weight:600; font-size:13.5px; text-decoration:none;
  position:relative; transition:background var(--ks-t),color var(--ks-t); }
.ks-nav-item .ks-nav-ic{ width:18px; text-align:center; opacity:.85; flex:none; }
.ks-nav-item:hover{ background:var(--ks-navy-2); color:#fff; }
.ks-nav-item.active{ background:linear-gradient(90deg,rgba(237,28,36,.20),rgba(237,28,36,.04)); color:#fff; }
.ks-nav-item.active .ks-nav-ic{ opacity:1; color:var(--ks-brand); }
.ks-nav-item.active::before{ content:""; position:absolute; inset-inline-start:0; top:7px; bottom:7px;
  width:3px; border-radius:3px; background:var(--ks-brand); }
.ks-nav-item .ks-nav-badge{ margin-inline-start:auto; background:var(--ks-brand); color:#fff;
  font-size:10px; font-weight:700; padding:1px 7px; border-radius:var(--ks-r-pill); }

.ks-topbar{ background:var(--ks-navy); color:#fff; display:flex; align-items:center; gap:14px;
  padding:12px 20px; border-bottom:1px solid var(--ks-navy-line); }
.ks-topbar .ks-tb-crumbs{ font-size:12.5px; color:var(--ks-navy-muted); font-weight:600; }
.ks-topbar .ks-tb-crumbs b{ color:#fff; }
.ks-topbar .spacer{ flex:1; }
.ks-topbar .ks-avatar{ width:34px; height:34px; border-radius:50%; background:var(--ks-brand-grad);
  display:grid; place-items:center; color:#fff; font-weight:700; }

.ks-footer{ background:var(--ks-navy); color:var(--ks-navy-muted); font-size:11.5px;
  padding:12px 20px; text-align:center; border-top:1px solid var(--ks-navy-line); }
.ks-footer b{ color:#fff; }

/* ================================================================
   GRID + UTILITIES (خفيفة، بادئة ks-)
   ================================================================ */
.ks-grid{ display:grid; gap:var(--ks-4); }
.ks-cols-2{ grid-template-columns:repeat(2,1fr); }
.ks-cols-3{ grid-template-columns:repeat(3,1fr); }
.ks-cols-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:1100px){ .ks-cols-4{ grid-template-columns:repeat(2,1fr); } .ks-cols-3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .ks-cols-2,.ks-cols-3,.ks-cols-4{ grid-template-columns:1fr; } }

.ks-flex{ display:flex; } .ks-ac{ align-items:center; } .ks-jb{ justify-content:space-between; }
.ks-wrap{ flex-wrap:wrap; } .ks-gap{ gap:var(--ks-3); } .ks-gap-sm{ gap:var(--ks-2); }
.ks-mt{ margin-top:var(--ks-4); } .ks-mt-sm{ margin-top:var(--ks-2); } .ks-mb{ margin-bottom:var(--ks-4); }
.ks-muted{ color:var(--ks-muted); } .ks-faint{ color:var(--ks-faint); } .ks-brand-c{ color:var(--ks-brand); }
.ks-b{ font-weight:700; } .ks-sm{ font-size:12px; }
.ks-start{ text-align:start; } .ks-end{ text-align:end; } .ks-center{ text-align:center; }
.ks-divider{ height:1px; background:var(--ks-line); margin:var(--ks-4) 0; border:0; }
/* فقرة نص طويل (وصف أعمال / ملاحظات / شروط دفع) — بتحافظ على أسطر المستخدم */
.ks-prose{ margin:0; font-size:14px; line-height:1.9; color:var(--ks-ink);
  white-space:pre-line; overflow-wrap:anywhere; }

/* علامة المطلوب (*) موحّدة */
.req,.ks-scope .req{ color:var(--ks-danger); font-weight:700; margin-inline-start:2px; }

/* width utilities — بديل inline width للأبعاد المتكررة */
.ks-w-50{width:50px!important} .ks-w-60{width:60px!important} .ks-w-70{width:70px!important}
.ks-w-80{width:80px!important} .ks-w-90{width:90px!important} .ks-w-100{width:100px!important}
.ks-w-120{width:120px!important} .ks-w-130{width:130px!important} .ks-w-150{width:150px!important} .ks-w-180{width:180px!important}

/* عرض عمود بالنسبة المئوية — للـ<th>/<col> في جداول الإدخال (بنود/مصروفات).
   بديل style="width:NN%". سلّم ثابت: اختار أقرب درجة، ماتزوّدش درجات فردية. */
.ks-w-pct-3{width:3%!important}   .ks-w-pct-4{width:4%!important}   .ks-w-pct-5{width:5%!important}
.ks-w-pct-8{width:8%!important}   .ks-w-pct-10{width:10%!important} .ks-w-pct-12{width:12%!important}
.ks-w-pct-14{width:14%!important} .ks-w-pct-16{width:16%!important} .ks-w-pct-18{width:18%!important}
.ks-w-pct-20{width:20%!important} .ks-w-pct-22{width:22%!important} .ks-w-pct-24{width:24%!important}
.ks-w-pct-26{width:26%!important} .ks-w-pct-28{width:28%!important} .ks-w-pct-30{width:30%!important}
.ks-w-pct-32{width:32%!important}

/* ارتفاع صندوق الرسم البياني (Chart.js بـmaintainAspectRatio:false بياخد ارتفاع الأب) */
.ks-h-260{position:relative; height:260px!important} .ks-h-280{position:relative; height:280px!important}

/* دفع العنصر لآخر السطر (منطقي — يمين في LTR وشمال في RTL) */
.ks-ms-auto{margin-inline-start:auto!important}
/* سطور متباعدة لقوائم الشرح/الخطوات */
.ks-lh-loose{line-height:1.9}

/* 🔴 الشريط ده ماكانش بيثبت فعليًا في أي شاشة: sb-admin-2 فيها
   `#wrapper #content-wrapper{overflow-x:hidden}` ⇒ الـwrapper بيبقى scroll container
   والـsticky بيترّبط بيه هو (وهو مابيتمررش — الصفحة اللي بتتمرر). `clip` بيقصّ الأفقي
   زي hidden بالظبط من غير ما يعمل scroll container.
   🔑 محصور بـ:has — بس الصفحات اللي فيها الشريط؛ باقي السيستم ما اتلمسش.
   الأخصية (2 ID + كلاس) أعلى من قاعدة sb-admin (2 ID). اتقاس في المتصفح ٢٨/٩. */
#wrapper #content-wrapper:has(.ks-actionbar){ overflow-x:clip; }

/* شريط أزرار الحفظ الثابت أسفل الفورم (يفضل ظاهر أثناء التمرير) */
.ks-actionbar{ position:sticky; bottom:0; z-index:20;
  /* 🔴 كان `rgba(255,255,255,.94)` ثابت — شريط أبيض في نص صفحة غامقة. والشفافية مقصودة
     (بيبان اللي تحته وهو بيتمرّر)، فالمتغيّر ده بيحمل اللون **بشفافيته** ويتقلب مع الوضع. */
  background:var(--ks-surface-a, rgba(255,255,255,.94)); backdrop-filter:blur(6px);
  border-top:1px solid var(--ks-line);
  margin:0 -16px -16px; padding:14px 16px; }

/* ================================================================
   FORM PRIMITIVES  (مضافة لسويب إدارة المشاريع — عامّة لكل الموديولات)
   ----------------------------------------------------------------
   الصفحات القديمة كانت بتكتب .form-group/.invalid-feedback/.custom-switch
   بستايل محلي مختلف في كل صفحة وبألوان بره الهوية. دي البدائل الموحّدة.
   ================================================================ */

/* عمود يمتد على عرض الشبكة كلها جوّه .ks-grid */
.ks-span-all{ grid-column:1/-1; }

/* رسالة خطأ تحت الحقل (بديل .invalid-feedback البوتستراب) */
.ks-err{ display:flex; align-items:center; gap:6px; margin-top:5px;
  font-size:11.5px; font-weight:600; color:var(--ks-danger); }
.ks-err svg{ width:14px; height:14px; flex:none; }
/* الحقل نفسه لما يبقى غلط — بيشتغل مع .is-invalid اللي الجافاسكربت القديم بيحطها */
body.ks-scope .form-control.is-invalid,
body.ks-scope .form-select.is-invalid,
body.ks-scope textarea.form-control.is-invalid,
.ks-control.is-invalid{ border-color:var(--ks-danger); box-shadow:0 0 0 3px var(--ks-danger-soft); }

/* ==================== SWITCH (مفتاح تشغيل/إيقاف) ====================
   مستقل عن نسخة البوتستراب المحمّلة (المشروع بيحمّل 4 و 5 مع بعض)،
   وخصائصه منطقية عشان يشتغل RTL و LTR. */
.ks-switch{ display:flex; align-items:center; gap:var(--ks-3); cursor:pointer;
  border:1px solid var(--ks-line); background:var(--ks-surface-2);
  border-radius:var(--ks-r-sm); padding:12px 14px; transition:border-color var(--ks-t),background var(--ks-t); }
.ks-switch:hover{ border-color:var(--ks-brand); background:var(--ks-brand-soft); }
.ks-switch > input[type=checkbox]{ position:absolute; opacity:0; width:0; height:0; }
.ks-switch__track{ flex:none; position:relative; width:46px; height:26px; border-radius:var(--ks-r-pill);
  background:var(--ks-faint); transition:background var(--ks-t); }
.ks-switch__track::before{ content:""; position:absolute; top:3px; inset-inline-start:3px;
  width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--ks-shadow-sm);
  transition:inset-inline-start var(--ks-t); pointer-events:none; }
.ks-switch > input:checked + .ks-switch__track{ background:var(--ks-ok); }
/* 🔴 الحركة بـinset-inline-start مش translateX — عشان تشتغل صح في الاتجاهين
   من غير قاعدة [dir=rtl] منفصلة. */
.ks-switch > input:checked + .ks-switch__track::before{ inset-inline-start:23px; }
.ks-switch > input:focus-visible + .ks-switch__track{ box-shadow:var(--ks-ring); }
.ks-switch > input:disabled + .ks-switch__track{ opacity:.5; }
/* 🩸🩸🩸 **`.ks-field > label` كانت بتكسر المفتاح** (بلاغ المستخدم · ٥ سبتمبر ٢٠٢٦):
   المكوّن بيرندر `<label class="ks-switch">`، ولو اتحط **ابن مباشر** لـ`.ks-field`
   (وده الشكل الطبيعي: عنوان الحقل ثم المفتاح) فقاعدة `.ks-field > label{display:block}`
   **تخصيصها أعلى** (0,1,1 مقابل 0,1,0) وبتغلب ⇒ اللابل بيبقى `block` بدل `flex`،
   والـ`track` (span) بيفضل `inline` فـ**عرضه وارتفاعه بيتجاهلوا** ⇒ الصندوق بيختفي
   والمقبض الأبيض (`::before` المطلق) بيطفح فوق النص.
   🔑 القياس هو اللي حسمها: `display` المحسوب كان `block`/`inline` مش `flex`/`block`.
   🔑 العلاج **رفع تخصيص** لا `!important` — التعارض بيتمنع مش بيتزايد عليه. */
.ks-field > label.ks-switch, .ks-switch{ display:flex; }
/* 🔑 وتحصين مستقل: الـtrack مايعتمدش على `flex` الأب عشان ياخد صندوق. */
.ks-switch__track{ display:block; }
.ks-switch__txt{ display:block; font-size:13px; font-weight:700; color:var(--ks-ink); }
.ks-switch__sub{ display:block; font-size:11.5px; font-weight:500; color:var(--ks-muted); margin-top:2px; }

/* ==================== DOC CARDS (شبكة بطاقات مستندات) ====================
   بديل شبكات الكروت اللي كل شاشة كانت بتنسّقها بشكل مختلف
   (حصر الكميات · المقايسات · العقود …). */
.ks-cardgrid{ display:grid; gap:var(--ks-4);
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }
.ks-doccard{ display:flex; flex-direction:column; background:var(--ks-surface);
  border:1px solid var(--ks-line); border-radius:var(--ks-r); overflow:hidden;
  box-shadow:var(--ks-shadow-sm); transition:box-shadow var(--ks-t),transform var(--ks-t); }
.ks-doccard:hover{ box-shadow:var(--ks-shadow); transform:translateY(-2px); }
.ks-doccard__hd{ padding:12px 14px; background:var(--ks-surface-2);
  border-bottom:1px solid var(--ks-line); display:flex; flex-direction:column; gap:6px; }
.ks-doccard__row{ display:flex; align-items:center; gap:var(--ks-2); justify-content:space-between; }
.ks-doccard__no{ font-family:var(--ks-mono); font-size:13px; font-weight:800; color:var(--ks-ink); }
.ks-doccard__bd{ padding:14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.ks-doccard__title{ font-size:14px; font-weight:800; color:var(--ks-ink); margin:0 0 2px; }
.ks-doccard__meta{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ks-muted); }
.ks-doccard__meta svg{ width:14px; height:14px; flex:none; }
.ks-doccard__amount{ margin-top:auto; text-align:center; padding:10px;
  background:var(--ks-brand-soft); color:var(--ks-brand-strong); border-radius:var(--ks-r-sm);
  font-size:17px; font-weight:800; font-variant-numeric:tabular-nums; }
.ks-doccard__ft{ display:flex; gap:6px; padding:0 14px 14px; flex-wrap:wrap; }

/* ==================== RADIO CARDS (اختيار من مجموعة بلاطات) ====================
   بديل مجموعات الراديو اللي كل صفحة كانت بتنسّقها بشكل مختلف. */
.ks-radios{ display:grid; gap:var(--ks-2); grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.ks-radio{ position:relative; display:block; margin:0; }
.ks-radio > input{ position:absolute; opacity:0; width:0; height:0; }
.ks-radio > span{ display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center;
  border:1px solid var(--ks-line); border-radius:var(--ks-r-sm); padding:12px 10px; cursor:pointer;
  background:var(--ks-surface-2); height:100%;
  transition:border-color var(--ks-t),background var(--ks-t),box-shadow var(--ks-t); }
.ks-radio:hover > span{ border-color:var(--ks-brand); }
.ks-radio > input:checked + span{ border-color:var(--ks-brand); background:var(--ks-brand-soft);
  box-shadow:inset 0 0 0 1px var(--ks-brand); }
.ks-radio > input:focus-visible + span{ box-shadow:var(--ks-ring); }
.ks-radio > input:disabled + span{ opacity:.55; cursor:not-allowed; }
.ks-radio svg{ color:var(--ks-muted); }
.ks-radio > input:checked + span svg{ color:var(--ks-brand); }
.ks-radio__t{ font-size:13px; font-weight:700; color:var(--ks-ink); }
.ks-radio__s{ font-size:11px; color:var(--ks-muted); }
.ks-radio > input:checked + span .ks-radio__t{ color:var(--ks-brand-strong); }

/* بلاطة قسم اختياري بيتفتح بمفتاح (زي «تسجيل إضافي/خصم») */
.ks-optbox{ border:1px solid var(--ks-line); border-radius:var(--ks-r-sm);
  background:var(--ks-surface); overflow:hidden; }
.ks-optbox__hd{ padding:12px 14px; background:var(--ks-surface-2); border-bottom:1px solid var(--ks-line); }
.ks-optbox__bd{ padding:14px; }

/* ==================== CHOICE CARDS (كروت اختيار) ====================
   كارت اختيار واحد من مجموعة (نوع مستخلص / نوع دفع / طريقة تسعير…).
   كان كل شاشة بتعمل نسخة محلية منه بألوان مكتوبة بالإيد.
   `.active` هوك جافاسكربت — الشاشات بتحطّه وتشيله بنفسها. */
.ks-choice-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.ks-choice{ display:grid; gap:4px; padding:14px; cursor:pointer; text-align:start;
  border:1px solid var(--ks-line); border-radius:var(--ks-r-sm); background:var(--ks-surface);
  transition:border-color var(--ks-t),background var(--ks-t),box-shadow var(--ks-t); }
.ks-choice:hover{ border-color:var(--ks-brand); background:var(--ks-brand-soft); }
.ks-choice.active{ border-color:var(--ks-brand); background:var(--ks-brand-soft); box-shadow:var(--ks-ring); }
.ks-choice__ic{ color:var(--ks-muted); }
.ks-choice.active .ks-choice__ic{ color:var(--ks-brand); }
.ks-choice__t{ font-size:13.5px; font-weight:800; color:var(--ks-ink); }
.ks-choice.active .ks-choice__t{ color:var(--ks-brand-strong); }
.ks-choice__d{ font-size:11.5px; color:var(--ks-muted); line-height:1.6; }

/* ==================== PROGRESS (شريط نسبة إنجاز) ====================
   بيتكرّر في المشاريع والخطط وتقارير الإنجاز. العرض بيتحط inline
   (style="width:NN%") — ده مش لون، فمسموح بقاعدة ٧. */
.ks-progress-wrap{ display:flex; align-items:center; gap:var(--ks-2); min-width:90px; }
.ks-progress{ flex:1; height:8px; min-width:56px; border-radius:var(--ks-r-pill);
  background:var(--ks-line-2); overflow:hidden; }
.ks-progress__fill{ display:block; height:100%; border-radius:inherit;
  background:var(--ks-brand); transition:width var(--ks-t); }
.ks-progress--ok   .ks-progress__fill{ background:var(--ks-ok); }
.ks-progress--warn .ks-progress__fill{ background:var(--ks-warn); }
.ks-progress--info .ks-progress__fill{ background:var(--ks-info); }
.ks-progress--danger .ks-progress__fill{ background:var(--ks-danger); }
.ks-progress__val{ flex:none; font-size:11.5px; font-weight:700; color:var(--ks-muted);
  font-variant-numeric:tabular-nums; }

/* ==================== BAR ROW (توزيع أفقي: اسم + شريط + رقم) ====================
   الشريط نسبته من أكبر قيمة في المجموعة — لتوزيعات زي «الطلبات في كل مرحلة» أو
   «طرق الدفع». المكوّن: x-ks.bar-row (بيستخدم x-ks.progress جوّاه). */
.ks-bar-row{ display:grid; grid-template-columns:minmax(120px,36%) 1fr auto; align-items:center;
  gap:var(--ks-3); padding-block:6px; }
.ks-bar-row .ks-progress-wrap{ min-width:0; }
.ks-bar-row__label{ font-size:13px; color:var(--ks-ink); }
.ks-bar-row__value{ font-size:13px; color:var(--ks-ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ks-bar-row__value small{ color:var(--ks-muted); font-weight:600; }
@media (max-width:767.98px){ .ks-bar-row{ grid-template-columns:minmax(90px,40%) 1fr auto; gap:var(--ks-2); } }


/* ==================== DEFINITION LIST (شاشات العرض/التفاصيل) ==================== */
.ks-dl{ display:grid; gap:var(--ks-3) var(--ks-5);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.ks-dl__i{ min-width:0; }
.ks-dl__k{ display:block; font-size:11.5px; font-weight:700; color:var(--ks-muted); margin-bottom:3px; }
.ks-dl__v{ display:block; font-size:13.5px; font-weight:600; color:var(--ks-ink);
  word-break:break-word; line-height:1.7; }
.ks-dl__v.ks-num{ font-family:var(--ks-mono); }
.ks-dl__i--wide{ grid-column:1/-1; }

/* ==================== TABS (تبويبات داخل الصفحة) ==================== */
.ks-tabs{ display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--ks-line);
  margin-bottom:var(--ks-5); }
.ks-tab{ display:inline-flex; align-items:center; gap:7px; padding:10px 16px; cursor:pointer;
  border:0; background:none; font-family:inherit; font-size:13.5px; font-weight:700;
  color:var(--ks-muted); border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--ks-t),border-color var(--ks-t); text-decoration:none; }
.ks-tab:hover{ color:var(--ks-brand); }
.ks-tab.active,.ks-tab[aria-selected=true]{ color:var(--ks-brand); border-bottom-color:var(--ks-brand); }
.ks-tab svg{ width:16px; height:16px; }

/* ==================== شريط أدوات الصفوف داخل الجداول ==================== */
.ks-rowacts{ display:flex; align-items:center; gap:6px; justify-content:center; flex-wrap:nowrap; }
.ks-rowacts form{ display:inline-block; margin:0; }

@media (max-width:767.98px){
  .ks-dl{ grid-template-columns:1fr; }
  .ks-actionbar{ margin-inline:-14px; padding-inline:14px; }
  .ks-actionbar .ks-btn{ flex:1 1 auto; }
}

@media(prefers-reduced-motion:reduce){ .ks-scope *{ transition:none!important; } }

/* ==================== PAGE HEADER (بانر رأس الصفحة الأحمر) ==================== */
.ks-page-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--ks-brand-grad, linear-gradient(120deg,#ed1c24,#791c24));
  color:#fff; border-radius:var(--ks-r, 14px); padding:20px 24px; margin-bottom:18px;
  position:relative; overflow:hidden; box-shadow:0 10px 30px rgba(121,28,36,.22);
}
.ks-page-header::before{ content:""; position:absolute; top:-55%; inset-inline-end:-4%;
  width:300px; height:300px; background:rgba(255,255,255,.10); border-radius:50%; pointer-events:none; }
.ks-page-header > *{ position:relative; z-index:1; }
.ks-page-header__main{ display:flex; align-items:center; gap:16px; min-width:0; }
.ks-page-header__ic{ width:54px; height:54px; border-radius:14px; background:rgba(255,255,255,.16);
  display:inline-flex; align-items:center; justify-content:center; color:#fff; flex:0 0 auto; }
.ks-page-header__ic svg{ width:26px; height:26px; }
.ks-page-header__txt h1{ margin:0; font-size:23px; font-weight:800; letter-spacing:-.01em; text-wrap:balance; }
.ks-page-header__txt p{ margin:3px 0 0; font-size:13.5px; opacity:.85; }
.ks-page-header__actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* أزرار داخل البانر الأحمر: شفافة بيضا + زر رئيسي أبيض مصمت */
.ks-page-header .ks-hbtn{ display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.34);
  border-radius:var(--ks-r-xs,9px); padding:9px 15px; font-size:14px; font-weight:600;
  text-decoration:none; transition:background .15s,transform .1s; }
.ks-page-header .ks-hbtn:hover{ background:rgba(255,255,255,.28); color:#fff; }
.ks-page-header .ks-hbtn:active{ transform:translateY(1px); }
.ks-page-header .ks-hbtn svg{ width:17px; height:17px; }
/* dark-ok: الزرار ده قاعد **فوق** شريط الهيدر الأحمر، فتباينه مع الأحمر مش مع الصفحة —
   تغميقه بيخلّيه غير مقروء في الوضعين. */
/* 🔴🔴🔴 كان `background:var(--ks-surface)` — والتعليق فوق بيقول «أبيض مصمت».
   الوعد اتكسر لما المظهر الزجاجي شفّف `--ks-surface`: الزرار قاعد **فوق البانر
   الأحمر**، فالأحمر بقى بيبان من وراه ⇒ بمبي باهت بنص أحمر = تباين واطي، والمستخدم
   بلّغ إنه «مش زي الاتنين اللي جنبه». وهوفره كان أسوأ: `--ks-surface-2` = تِنت
   ٧٪ يعني الزرار بيختفي تقريبًا وقت الهوفر.
   🔑🔑🔑 **الزرار ده استثناء مقصود من الزجاج**: تباينه مع الأحمر اللي تحته، مش مع
   الصفحة. فقيمته لازم تكون **حرفية مصمتة** — أي توكن سطح هيتشفّف معاه.
   (نفس درس «الاستثناء من سكين = نطاق توكنز مش خاصية» — بس هنا السطح مش من الصفحة.) */
.ks-page-header .ks-hbtn--solid{ background:#fff; color:var(--ks-brand,#ed1c24); border-color:#fff; }
.ks-page-header .ks-hbtn--solid:hover{ background:#f3f4f6; color:var(--ks-brand-strong,#c1121f); border-color:#f3f4f6; }
/* dark-ok: زرار حذف فوق البانر الأحمر — أبيض مصمت بنص أحمر غامق عشان يفضل مقروء
   في الوضعين، مش أحمر على أحمر. */
.ks-page-header .ks-hbtn--danger{ background:rgba(255,255,255,.16); color:#fff;
  border-color:rgba(255,255,255,.55); font-weight:700; }
.ks-page-header .ks-hbtn--danger:hover{ background:#fff; color:var(--ks-danger,#dc2626); border-color:#fff; }

/* ==================== STAT CARDS (كروت الإحصائيات) ==================== */
.ks-stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:18px; }
.ks-stat{ background:var(--ks-surface); border:1px solid var(--ks-line,#e8e4e1); border-radius:var(--ks-r-md, 12px);
  padding:15px 17px; box-shadow:var(--ks-shadow, 0 1px 3px rgba(20,20,30,.06)); position:relative; overflow:hidden; }
.ks-stat::before{ content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:4px; background:var(--tone,#ed1c24); }
.ks-stat__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ks-stat__label{ font-size:13px; color:var(--ks-muted,#6b7280); font-weight:600; }
.ks-stat__ic{ width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--tone-soft,#fdecec); color:var(--tone,#ed1c24); flex:0 0 auto; }
.ks-stat__ic svg{ width:20px; height:20px; }
.ks-stat__value{ font-size:25px; font-weight:800; color:var(--ks-ink,#2d2d2d); margin-top:9px;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1.1; }
.ks-stat__sub{ font-size:12px; color:var(--ks-muted,#6b7280); margin-top:3px; }
.ks-stat__delta{ margin-top:6px; }
.ks-stat--brand{ --tone:#ed1c24; --tone-soft:#fdecec; }
.ks-stat--ok{    --tone:#16a34a; --tone-soft:#e9f7ef; }
.ks-stat--warn{  --tone:#d97706; --tone-soft:#fdf3e7; }
.ks-stat--info{  --tone:#2563eb; --tone-soft:#eaf1fe; }
.ks-stat--muted{ --tone:#6b7280; --tone-soft:#f1f2f4; }
.ks-stat--danger{ --tone:#dc2626; --tone-soft:#fdeaea; }  /* = --ks-danger / --ks-danger-soft */

/* ==================== EMPTY STATE (حالة فاضية) ==================== */
.ks-empty{ text-align:center; padding:44px 20px; }
.ks-empty__ic{ width:76px; height:76px; margin:0 auto var(--ks-4); border-radius:50%;
  display:grid; place-items:center; background:var(--ks-brand-soft); color:var(--ks-brand); }
.ks-empty__ic svg{ width:34px; height:34px; }
.ks-empty__title{ font-size:16px; font-weight:800; color:var(--ks-ink); margin:0 0 6px; }
.ks-empty__text{ font-size:13px; color:var(--ks-muted); margin:0 auto; max-width:420px; line-height:1.7; }
.ks-empty__actions{ margin-top:var(--ks-5); display:flex; justify-content:center; gap:var(--ks-2); flex-wrap:wrap; }

/* ==================== FILTER BAR (شريط الفلاتر) ==================== */
.ks-filterbar{ background:var(--ks-surface); border:1px solid var(--ks-line,#e8e4e1); border-radius:var(--ks-r-md,12px);
  padding:16px 18px; box-shadow:var(--ks-shadow,0 1px 3px rgba(20,20,30,.06)); margin-bottom:18px; }
.ks-filterbar__head{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px;
  color:var(--ks-ink,#2d2d2d); margin-bottom:14px; }
.ks-filterbar__head svg{ color:var(--ks-brand,#ed1c24); }
.ks-filterbar__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; align-items:end; }
.ks-ff{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ks-ff__label{ font-size:12.5px; font-weight:600; color:var(--ks-muted,#6b7280); }
.ks-filterbar .form-control, .ks-filterbar .form-select,
.ks-ff > input, .ks-ff > select, .ks-ff .select2-container .select2-selection{
  width:100% !important; min-height:40px; height:40px; padding:0 12px; font-size:13.5px; color:var(--ks-ink,#2d2d2d);
  background:var(--ks-surface); border:1px solid var(--ks-line,#e8e4e1); border-radius:var(--ks-r-xs,9px);
  transition:border-color .15s, box-shadow .15s; outline:none; box-shadow:none; }
.ks-filterbar .form-control:focus, .ks-filterbar .form-select:focus,
.ks-ff > input:focus, .ks-ff > select:focus{
  border-color:var(--ks-brand,#ed1c24); box-shadow:0 0 0 3px var(--ks-brand-soft,#fdecec); }

/* 🔴🔴🔴 **الاستثناء الحاكم للقايمة المتعدّدة.**
   القاعدة فوق بتحط `height:40px` **ثابت** على `.select2-selection` جوّه حقل
   الفلتر — وده صح للقايمة المفردة وغلط تمامًا للمتعدّدة: شرايح الاختيارات
   (`__choice`) بتتراكم في سطور والحاوية مقفولة على 40px ⇒ **الشرايح بتطلع
   برّه الخانة** وتركب على اللي تحتها. (بلاغ المستخدم: قائمة الأسعار في
   المخازن · تعديل التكلفة · تقرير تفاصيل الأصناف — والمقياس: 16 شاشة فيها
   `multiple` جوّه `x-ks.filter-field`.)
   🔑 نفس الأخصية (0,3,0) ⇒ **لازم تفضل بعدها في الملف** عشان تغلب.
   🔑 و`__rendered` بقت `flex-wrap` بدل الـfloat بتاع select2: الفلوت مابيكبّرش
      الأب أصلاً، فحتى مع `height:auto` كان ممكن يفضل يفيض. */
.ks-ff .select2-container .select2-selection--multiple{
  height:auto; min-height:40px; padding:4px 8px; }
.ks-ff .select2-container .select2-selection--multiple .select2-selection__rendered{
  display:flex; flex-wrap:wrap; gap:4px; align-items:center;
  padding:0; margin:0; width:100%; }
.ks-ff .select2-container .select2-selection--multiple .select2-selection__rendered > li{
  float:none; margin:0; }
/* 🔴 `min-width:0` لازم هنا زي `.ks-ff` بالظبط — وهي كانت ناقصة.
   ده عنصر جريد جوّه `repeat(auto-fit,minmax(180px,1fr))`، و`min-width:auto`
   الافتراضي بيمنعه ينكمش تحت عرض محتواه ⇒ الترَك بيتمدّ على قد أعرض زرار،
   والصف كله يفيض عن الكارت وأطرافه تتقص. بان على «معايير التسوية» في
   `StockValuation/create` (٨ حقول + زرار «تحميل كل الأصناف»).
   و`flex-wrap` عشان الأزرار تنزل سطر تحت بدل ما تتقص جوّه الترَك. */
.ks-filterbar__actions{ display:flex; align-items:flex-end; gap:8px; min-width:0; flex-wrap:wrap; }
/* 🩸🩸 **الأزرار كانت بتنزل سطر لكل واحد** (بلاغ المستخدم · ٥ سبتمبر ٢٠٢٦):
   `.ks-filterbar__actions` **خلية واحدة** في شبكة `auto-fit,minmax(180px,1fr)`
   ⇒ عرضها = عرض عمود واحد (١٩٦px مقاسة على يومية الخزينة)، ومجموع تلات أزرار
   ٣٦٧px ⇒ `flex-wrap` بيوزّعهم على تلات سطور.
   🔑 زرار واحد بيسع الخلية عادي ⇒ الشرط `:has(> :nth-child(2))`: **من زرارين
      وفوق بس** الخلية تاخد السطر كامل. كده الشريط اللي فيه زرار بحث واحد
      بيفضل جنب آخر حقل زي ما هو. */
.ks-filterbar__actions:has(> :nth-child(2)){ grid-column:1 / -1; justify-content:flex-start; }
.ks-filterbar__actions .ks-btn{ height:40px; }

/* ==================== TOOLBAR فوق الجدول (عنوان + بحث + تصدير) ==================== */
.ks-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.ks-toolbar__title{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:var(--ks-ink,#2d2d2d); }
.ks-toolbar__title svg{ color:var(--ks-brand,#ed1c24); }
.ks-toolbar__tools{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ks-searchbox{ position:relative; display:inline-flex; align-items:center; }
.ks-searchbox svg{ position:absolute; inset-inline-start:11px; color:var(--ks-muted,#6b7280); pointer-events:none; }
.ks-searchbox input{ height:40px; padding-inline-start:34px; padding-inline-end:14px; min-width:240px;
  border:1px solid var(--ks-line,#e8e4e1); border-radius:var(--ks-r-xs,9px); font-size:13.5px; background:var(--ks-surface); outline:none; }
.ks-searchbox input:focus{ border-color:var(--ks-brand,#ed1c24); box-shadow:0 0 0 3px var(--ks-brand-soft,#fdecec); }

/* ==================== MODAL (reusable · يدعم المكوّن والمودالز القديمة) ==================== */
.ks-modal .modal-content{ border:none; border-radius:16px; overflow:hidden; box-shadow:0 24px 60px rgba(20,20,30,.28); }
.ks-modal__header,
.ks-modal .modal-header{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 20px !important; background:var(--ks-brand-grad, linear-gradient(120deg,#ed1c24,#791c24)) !important;
  color:#fff !important; border:none !important; }
.ks-modal__header h3, .ks-modal .modal-header .modal-title,
.ks-modal .modal-header h3, .ks-modal .modal-header h4,
.ks-modal .modal-header h5, .ks-modal .modal-header h6{
  margin:0; font-size:16px; font-weight:800; display:flex; align-items:center; gap:9px; color:#fff; }
.ks-modal__header svg, .ks-modal .modal-header svg, .ks-modal .modal-header i{ color:#fff; flex:0 0 auto; }
.ks-modal__close{ width:32px; height:32px; border:none; border-radius:9px; background:rgba(255,255,255,.16);
  color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; flex:0 0 auto; }
.ks-modal__close:hover{ background:rgba(255,255,255,.3); }
/* زر الإغلاق: Bootstrap 5 (btn-close) و Bootstrap 4 (.close) */
.ks-modal .modal-header .btn-close{ filter:brightness(0) invert(1); opacity:.9; box-shadow:none; }
.ks-modal .modal-header .close,
.ks-modal .modal-header .close span{ color:#fff; opacity:.9; text-shadow:none; font-weight:700; }
.ks-modal .modal-header .close:hover{ opacity:1; color:#fff; }
.ks-modal__body, .ks-modal .modal-body{ padding:20px; color:var(--ks-ink,#2d2d2d); }
.ks-modal__footer, .ks-modal .modal-footer{ padding:13px 20px !important; border-top:1px solid var(--ks-line,#e8e4e1) !important;
  display:flex; justify-content:flex-end; gap:10px; background:var(--ks-surface); margin:0; }

/* ==================== BULK ACTION BUTTONS (اعتماد/إذن جماعي) ==================== */
.bulk-approve-btn, .bulk-permit-btn{
  display:none; align-items:center; gap:8px; border:none; cursor:pointer;
  padding:10px 18px; border-radius:var(--ks-r-xs,9px); font-size:14px; font-weight:700; color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.12); transition:transform .1s, box-shadow .15s, filter .15s; }
.bulk-approve-btn{ background:linear-gradient(135deg,#16a34a,#12833d); }
.bulk-permit-btn{ background:linear-gradient(135deg,#2563eb,#1d4ed8); }
.bulk-approve-btn.show, .bulk-permit-btn.show{ display:inline-flex; }
.bulk-approve-btn:hover, .bulk-permit-btn:hover{ filter:brightness(1.06); box-shadow:0 6px 16px rgba(0,0,0,.18); }
.bulk-approve-btn:active, .bulk-permit-btn:active{ transform:translateY(1px); }

/* ================================================================
   MOBILE POLISH  ·  responsive overrides (phones + tablets)
   ----------------------------------------------------------------
   RTL-safe: <body> has no dir — كل القواعد بخصائص منطقية.
   لا تلمس تخطيط الديسكتوب: كل شيء داخل @media للجوال/التابلت فقط.
   ================================================================ */

/* ---------- Tablets (≤ 991.98px): تكثيف الأعمدة والحشوات ---------- */
@media (max-width: 991.98px){
  /* كروت الإحصائيات: عمودان على التابلت */
  .ks-stats-grid{ grid-template-columns:repeat(2,1fr); }
  /* الفلاتر: صفوف أضيق حتى لا تتمدد الحقول أكثر من اللازم */
  .ks-filterbar__grid{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
  /* بانر رأس الصفحة: حشوة أقل قليلاً */
  .ks-page-header{ padding:18px 20px; }
  .ks-page-head{ gap:var(--ks-3); }
}

/* ---------- Phones (≤ 767.98px) ---------- */
@media (max-width: 767.98px){

  /* حاوية الصفحة: حشوة جانبية مريحة + منع تمرير أفقي */
  .ks-page{ padding:var(--ks-4) var(--ks-3); max-width:100%; overflow-x:hidden; }

  /* breadcrumb: يلتفّ ولا يتجاوز العرض */
  .ks-crumbs,
  body.ks-scope .breadcrumb{ font-size:12px; max-width:100%; }

  /* ===== PAGE HEADER (البانر الأحمر) — يكدّس العنوان فوق الأزرار ===== */
  .ks-page-header{
    flex-direction:column; align-items:stretch; gap:14px;
    padding:16px; margin-bottom:14px; border-radius:var(--ks-r-sm,10px);
    max-width:100%;
  }
  .ks-page-header__main{ gap:12px; }
  .ks-page-header__ic{ width:42px; height:42px; border-radius:11px; }
  .ks-page-header__ic svg{ width:21px; height:21px; }
  .ks-page-header__txt{ min-width:0; }
  .ks-page-header__txt h1{ font-size:19px; overflow-wrap:anywhere; }
  .ks-page-header__txt p{ font-size:12.5px; }
  /* الأزرار: تلتفّ وتملأ العرض وتصبح قابلة للنقر */
  .ks-page-header__actions{ width:100%; gap:8px; }
  .ks-page-header .ks-hbtn{
    flex:1 1 auto; justify-content:center; min-height:42px;
    padding:10px 14px; font-size:13.5px;
  }

  /* نفس المنطق لبانر ks-page-head القديم */
  .ks-page-head{ margin-bottom:var(--ks-4); }
  .ks-page-head .ks-ph-ic{ width:44px; height:44px; font-size:19px; }
  .ks-page-head h1{ font-size:19px; }
  .ks-page-head .ks-ph-actions{ margin-inline-start:0; width:100%; }
  .ks-page-head .ks-ph-actions > *{ flex:1 1 auto; }

  /* بانر ks-banner */
  .ks-banner{ padding:var(--ks-4); gap:var(--ks-3); }
  .ks-banner .ks-banner-ic{ width:46px; height:46px; font-size:22px; }
  .ks-banner h1{ font-size:19px; }

  /* ===== STAT CARDS — عمودان على الموبايل (قرار المستخدم ٥ سبتمبر) =====
     العمود الواحد كان بينزّل الجدول تحت الشاشة خالص. */
  .ks-stats-grid{ grid-template-columns:repeat(2,1fr); gap:9px; margin-bottom:12px; }
  .ks-stat{ padding:11px 12px; min-width:0; }
  .ks-stat__value{ font-size:18px; overflow-wrap:anywhere; }
  .ks-stat__label{ font-size:11.5px; }

  /* ===== FILTER BAR — عمودان كمان ===== */
  .ks-filterbar{ padding:12px; margin-bottom:12px; }
  .ks-filterbar__grid{ grid-template-columns:repeat(2,1fr); gap:9px; }
  .ks-filterbar__grid > *{ min-width:0; }
  /* الحقل الطويل (بحث/نص حر) بياخد السطر كامل */
  .ks-filterbar__grid > .ks-ff--wide{ grid-column:1 / -1; }
  /* أزرار شريط الفلاتر: **اتنين في السطر**. `flex:1 1 auto` كانت بتدّي كل
     زرار سطر كامل لما يكونوا كتير (٥ أزرار في تبويب شجرة الأصناف) ⇒ الشريط
     بياخد نص الشاشة على الفاضي. */
  .ks-filterbar__actions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    width:100%;
    /* 🪤 `width:100%` **مابتخليش عنصر الشبكة يمتد على الأعمدة** — بيفضل جوّه
       خليته (نص العرض في شبكة العمودين) والزرار التالت بينزل تحت مزنوق.
       الامتداد بيتعمل بـ`grid-column` مش بالعرض. */
    grid-column:1 / -1;
  }
  .ks-filterbar__actions > .ks-btn,
  .ks-filterbar__actions > button{
    flex:1 1 calc(50% - 3px);
    min-width:0;
    min-height:38px;
    padding:7px 8px;
    font-size:12px;
    white-space:normal;
    line-height:1.25;
  }
  /* حقول الفلاتر: ارتفاع مريح للمس */
  .ks-filterbar .form-control, .ks-filterbar .form-select,
  .ks-ff > input, .ks-ff > select, .ks-ff .select2-container .select2-selection{
    min-height:44px; height:44px; font-size:14px;
  }
  /* 🔴 نفس استثناء القايمة المتعدّدة — الارتفاع الثابت هنا كمان بيطلّع
     الشرايح برّه الخانة على الموبايل. */
  .ks-ff .select2-container .select2-selection--multiple{
    height:auto; min-height:44px;
  }

  /* ===== TOOLBAR + SEARCHBOX =====
     البحث سطر كامل، وكل الأزرار بعده في **سطر واحد بيلفّ** — قبل كده كان
     العمود بيدّي كل زرار سطر لوحده (بلاغ المستخدم ٥ سبتمبر). */
  .ks-toolbar{ flex-direction:column; align-items:stretch; gap:8px; }
  .ks-toolbar__tools{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;
  }
  .ks-toolbar__tools > *{ flex:0 0 auto; margin:0; }
  .ks-searchbox{ display:flex; flex:1 1 100%; width:100%; }
  .ks-searchbox input{ width:100%; min-width:0; height:42px; }

  /* ===== BUTTONS — حجم لمس كافٍ + التفاف الصفوف ===== */
  .ks-btn{ min-height:42px; }
  .ks-btn--sm{ min-height:38px; }
  /* صفوف أزرار الكارد تلتفّ بدل الفيض */
  .ks-card__head{ flex-wrap:wrap; }
  .ks-card__head .actions{ margin-inline-start:0; width:100%; flex-wrap:wrap; }
  .ks-card__head .actions > *{ flex:1 1 auto; }

  /* أزرار الإجراء الجماعي: بعرض كامل عند الظهور */
  .bulk-approve-btn.show, .bulk-permit-btn.show{ width:100%; justify-content:center; min-height:44px; }

  /* ===== MODAL — شبه كامل العرض بهوامش صغيرة + جسم قابل للتمرير ===== */
  .modal-dialog{ margin:10px auto; max-width:calc(100% - 20px); }
  .ks-modal .modal-content{ border-radius:12px; }
  .ks-modal .modal-body,
  .ks-modal__body{ max-height:70vh; overflow-y:auto; padding:16px; }
  .ks-modal .modal-header,
  .ks-modal__header{ padding:13px 16px !important; flex-wrap:wrap; }
  /* الفوتر: الأزرار تلتفّ وتملأ العرض */
  .ks-modal .modal-footer,
  .ks-modal__footer{ padding:12px 16px !important; flex-wrap:wrap; justify-content:stretch; }
  .ks-modal .modal-footer > .ks-btn,
  .ks-modal .modal-footer > .btn,
  .ks-modal__footer > .ks-btn,
  .ks-modal__footer > .btn{ flex:1 1 auto; min-height:44px; }

  /* الكارد + القسم: منع الفيض الأفقي + حشوة أخف */
  .ks-card__body{ padding:var(--ks-4); }
  .ks-card, .ks-section{ max-width:100%; }

  /* شريط الحفظ الثابت أسفل الفورم: أزرار قابلة للنقر */
  .ks-actionbar{ display:flex; flex-wrap:wrap; gap:8px; }
  .ks-actionbar > .ks-btn{ flex:1 1 auto; min-height:44px; }

  /* 🔑 أزرار «حفظ» و«اعتماد» أسفل الفورم: **سطر واحد** بدل واحد تحت التاني.
     حاوياتهم غالبًا utility classes بلا اسم مميز (`<div class="mt-5 text-center">`)،
     فالكشف **بنيوي**: حاوية فيها زرارين متتاليين مباشرين **وكل أولادها زراير**
     (غير المخفي/hidden inputs). الشرط ده مهم: النسخة القديمة («أي حاوية فيها زرارين ورا بعض»)
     كانت بتمسك لوحات فيها حقول/عناوين/زراير بعرض كامل وتفرشها صفوف متوسّطة
     (لوحة العميل في صندوق المحادثات، بحث الهيدر، فلاتر التقارير…).
     زراير بعرض كامل (`ks-btn--block`/`btn-block`/`w-100`) = مقصود إنها تحت بعض ⇒ مستثناة. */
  body.ks-scope div:has(> :is(.btn, .ks-btn) + :is(.btn, .ks-btn)):not(:has(> :not(.btn, .ks-btn, input[type=hidden], script, template, style, br, [hidden], .d-none))):not(:has(> .ks-btn--block, > .btn-block, > .w-100)){
    display:flex !important;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
  }
  body.ks-scope div:has(> :is(.btn, .ks-btn) + :is(.btn, .ks-btn)):not(:has(> :not(.btn, .ks-btn, input[type=hidden], script, template, style, br, [hidden], .d-none))):not(:has(> .ks-btn--block, > .btn-block, > .w-100)) > :is(.btn, .ks-btn){
    flex:1 1 calc(50% - 4px);
    min-width:0 !important;
    margin:0 !important;
    white-space:normal;
  }

  /* ===== FLOATING HELP FAB — يبقى ظاهراً وبعيداً عن الفوتر ===== */
  .floating-help{
    position:fixed;
    inset-inline-end:16px; inset-inline-start:auto;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    width:52px; height:52px;
    z-index:var(--ks-z-toast, 1080);
  }
  .floating-help svg, .floating-help i{ font-size:22px; }
}

/* ---------- Global safety: منع أي تمرير أفقي على الجوال ---------- */
@media (max-width: 767.98px){
  .ks-totchips{ gap:var(--ks-2); }
  .ks-totchip{ min-width:0; flex:1 1 140px; }
  /* الجداول تبقى قابلة للتمرير داخل غلافها فقط */
  .ks-table-wrap{ max-width:100%; }
}

/* ============================================================
   ks.barcode — الماسح الضوئي (reusable): أنماط عامة حتى يشتغل
   الكومبوننت على أي صفحة ks-scope، لا في فاتورة المبيعات فقط.
   حواف المجموعة تُدار بخصائص منطقية فتنعكس تلقائيًا مع اللغة.
   ============================================================ */
body.ks-scope .barcode-scanner-section{
  background:var(--ks-surface-2);
  border:1px solid var(--ks-line);
  border-inline-start:3px solid var(--ks-brand);
  border-radius:var(--ks-r-sm);
  padding:16px 18px;
}
body.ks-scope .barcode-scanner-section .input-group{
  box-shadow:var(--ks-shadow-sm);
  border-radius:var(--ks-r-xs);
}
body.ks-scope .barcode-scanner-section .input-group-text.barcode-ic{
  background:var(--ks-brand);
  color:#fff;
  border:none;
  padding:0 16px;
  font-size:1.1rem;
}
body.ks-scope .barcode-scanner-input{
  font-size:1.05rem !important;
  padding:12px 14px !important;
  background:var(--ks-surface) !important;
  border-color:var(--ks-line) !important;
}
body.ks-scope .barcode-scanner-input:focus{
  border-color:var(--ks-brand) !important;
  box-shadow:var(--ks-ring) !important;
}
body.ks-scope .barcode-search{
  background:var(--ks-brand-soft);
  border:1px solid transparent;
  color:var(--ks-brand-strong);
  font-weight:700;
  padding:0 22px !important;
  transition:all var(--ks-t);
}
body.ks-scope .barcode-search:hover,
body.ks-scope .barcode-search:focus{
  background:var(--ks-brand);
  color:#fff;
  box-shadow:0 4px 12px rgba(237,28,36,.22);
}
/* حواف المجموعة بخصائص منطقية: تنعكس مع اتجاه اللغة دون [dir].
   !important لتجاوز قواعد Bootstrap للـ input-group (فيزيائية، أعلى تخصيصًا). */
body.ks-scope .barcode-scanner-section .input-group > .barcode-ic{
  border-start-start-radius:var(--ks-r-xs) !important;
  border-end-start-radius:var(--ks-r-xs) !important;
  border-start-end-radius:0 !important;
  border-end-end-radius:0 !important;
}
body.ks-scope .barcode-scanner-section .input-group > .barcode-scanner-input{
  border-radius:0 !important;
}
body.ks-scope .barcode-scanner-section .input-group > .barcode-search{
  border-start-end-radius:var(--ks-r-xs) !important;
  border-end-end-radius:var(--ks-r-xs) !important;
  border-start-start-radius:0 !important;
  border-end-start-radius:0 !important;
}

/* ============================================================
   ks.installments — خطة الدفعات/الأقساط (reusable)
   ============================================================ */
body.ks-scope .ks-installments{
  background:var(--ks-surface-2);
  border:1px solid var(--ks-line);
  border-inline-start:3px solid var(--ks-brand);
  border-radius:var(--ks-r-sm);
  padding:var(--ks-4);
  margin-top:var(--ks-2);
}
body.ks-scope .ks-installments__head{
  display:flex; align-items:center; gap:var(--ks-2);
  font-size:14px; font-weight:800; color:var(--ks-ink); margin-bottom:var(--ks-3);
}
body.ks-scope .ks-installments__head svg,
body.ks-scope .ks-installments__head i{ color:var(--ks-brand); }
body.ks-scope .ks-installments__controls .form-label{
  font-size:12px; font-weight:700; color:var(--ks-ink-2); margin-bottom:4px;
}
body.ks-scope .ks-installments__table{ margin-top:var(--ks-3); max-height:240px; overflow-y:auto; }
body.ks-scope .ks-installments-tbl thead th{
  background:var(--ks-surface); color:var(--ks-muted); font-weight:700; font-size:12.5px;
  border-bottom:1px solid var(--ks-line); text-align:start; white-space:nowrap;
}
body.ks-scope .ks-installments-tbl tbody td{
  font-size:13px; color:var(--ks-ink); vertical-align:middle;
}
body.ks-scope .ks-installments-tbl tbody:empty::after{
  content:none;
}

/* ══════════════════════════════════════════════════════════════
   ks-subtabs — تابات فرعية بالعرض (تُستخدم جوّه تاب في صفحة إعدادات)
   غير مربوطة بـ ks-scope عشان تشتغل في الصفحات القديمة اللي لسه متحوّلتش.
   ══════════════════════════════════════════════════════════════ */
.ks-subtabs{
  display:flex; flex-wrap:wrap; gap:var(--ks-2);
  border-bottom:1px solid var(--ks-line);
  margin-bottom:var(--ks-5);
  padding-inline-start:0; list-style:none;
}
.ks-subtabs .nav-link{
  display:flex; align-items:center; gap:var(--ks-2);
  padding:var(--ks-3) var(--ks-4);
  color:var(--ks-muted);
  font-family:var(--ks-font); font-size:.9rem; font-weight:500;
  border:0; border-bottom:2px solid transparent;
  border-radius:var(--ks-r-xs) var(--ks-r-xs) 0 0;
  margin-bottom:-1px;
  transition:all var(--ks-t);
}
.ks-subtabs .nav-link:hover{ color:var(--ks-ink); background:var(--ks-surface-2); }
.ks-subtabs .nav-link.active{
  color:var(--ks-brand); background:transparent;
  border-bottom-color:var(--ks-brand);
}
.ks-subtabs .nav-link:focus-visible{ outline:0; box-shadow:var(--ks-ring); }
.ks-subtabs .nav-link i{ font-size:.95rem; }

@media (max-width:767.98px){
  .ks-subtabs{ flex-wrap:nowrap; overflow-x:auto; }
  .ks-subtabs .nav-link{ white-space:nowrap; padding:var(--ks-2) var(--ks-3); }
}

/* ================================================================
   AUDIT TRAIL — مين ضاف · مين عدّل · مين اعتمد
   بيتستخدم من كومبوننت <x-ks.audit-trail> **و** من فورماتر Tabulator
   اللي بيرسم نفس الماركب بجافاسكربت، عشان كده الستايل هنا مش في الكومبوننت.
   ================================================================ */
.ks-audit{ font-size:12.5px; color:var(--ks-muted); }
.ks-audit__row{ display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.ks-audit__row i{ color:var(--ks-brand); width:14px; }
.ks-audit__at{ margin-inline-start:auto; font-size:11.5px; opacity:.8; font-variant-numeric:tabular-nums; }
.ks-audit--compact{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.ks-audit--compact .ks-audit__item{ display:inline-flex; align-items:center; gap:4px; padding:1px 7px;
  border:1px solid var(--ks-line); border-radius:999px; font-size:11.5px; white-space:nowrap; }
.ks-audit--compact .ks-audit__item i{ color:var(--ks-brand); font-size:10px; }

/* ================================================================
   SPLIT CREATE SCREEN — الفورم في عمود والسجل في عمود جنبه
   الانقسام بالطول (عمودين) مش بالعرض. من xl وطالع؛ تحت كده بيتراصّوا.
   ================================================================ */
.ks-split{ align-items:flex-start; }
.ks-split .ks-card{ height:100%; }
.ks-split__list .ks-table-wrap,
.ks-split__list .table-responsive{ max-height:70vh; overflow:auto; }
@media (min-width:1200px){
  .ks-split__form{ position:sticky; top:12px; }
}

/* ================================================================
   الشجرة الهرمية  ·  <x-ks.tree>
   ----------------------------------------------------------------
   بتترندر باستدعاء ذاتي فبتشيل أي عمق. الإزاحة منطقية
   (padding-inline-start) عشان تنعكس صح في العربي والإنجليزي —
   مفيش padding-left/right فيزيائي هنا.
   ================================================================ */
.ks-tree{ list-style:none; margin:0; padding:0; }
.ks-tree--child{ padding-inline-start:var(--ks-5); position:relative; }
.ks-tree--child::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:calc(var(--ks-3));
  border-inline-start:1px dashed var(--ks-line-2);
}
.ks-tree__item{ margin:2px 0; }
.ks-tree__row{
  display:flex; align-items:center; gap:var(--ks-2);
  padding:var(--ks-2) var(--ks-3);
  border:1px solid var(--ks-line); border-radius:8px; background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.ks-tree__row:hover{ border-color:var(--ks-brand); box-shadow:var(--ks-shadow-sm); }
.ks-tree__item.is-active > .ks-tree__row{ border-color:var(--ks-brand); background:var(--ks-brand-soft); }
.ks-tree__icon{ display:inline-flex; color:var(--ks-brand); flex:0 0 auto; }
.ks-tree__label{ flex:1 1 auto; min-width:0; font-weight:600; color:var(--ks-ink); }
.ks-tree__sub{ display:block; font-weight:400; font-size:12px; color:var(--ks-muted); }
.ks-tree__badge{
  flex:0 0 auto; font-size:12px; font-weight:600;
  padding:1px 9px; border-radius:999px; white-space:nowrap;
}
.ks-tree__badge--muted{ background:var(--ks-faint); color:var(--ks-ink-2); }
.ks-tree__badge--info { background:var(--ks-info-soft);  color:var(--ks-info); }
.ks-tree__badge--ok   { background:var(--ks-ok-soft);    color:var(--ks-ok); }
.ks-tree__badge--warn { background:var(--ks-warn-soft);  color:var(--ks-warn); }
.ks-tree__badge--brand{ background:var(--ks-brand-soft); color:var(--ks-brand-deep); }
.ks-tree__actions{ flex:0 0 auto; display:flex; gap:4px; }
.ks-tree__empty{
  display:flex; align-items:center; gap:var(--ks-2);
  padding:var(--ks-5); color:var(--ks-muted);
  border:1px dashed var(--ks-line-2); border-radius:10px; background:var(--ks-bg);
}
@media (max-width:575.98px){
  .ks-tree--child{ padding-inline-start:var(--ks-4); }
  .ks-tree__sub{ display:none; }
}

/* ================================================================
   خريطة توافر الوحدات  ·  <x-ks.unit-grid>
   ----------------------------------------------------------------
   ألوان الحالة دلالية ومتقيّدة بالبراند: الأحمر للمباع (نهائي)،
   الأخضر للمتاح، الكهرماني للمحجوز. مفيش أزرق/بنفسجي.
   ================================================================ */
.ks-ugrid{ display:flex; flex-direction:column; gap:var(--ks-5); }
.ks-ugrid__group{ border:1px solid var(--ks-line); border-radius:10px; overflow:hidden; background:#fff; }
.ks-ugrid__group-title{
  display:flex; align-items:center; gap:var(--ks-2);
  padding:var(--ks-2) var(--ks-3);
  background:var(--ks-faint); border-bottom:1px solid var(--ks-line);
  font-weight:700; color:var(--ks-ink);
}
.ks-ugrid__row{
  display:flex; align-items:flex-start; gap:var(--ks-3);
  padding:var(--ks-2) var(--ks-3); border-bottom:1px dashed var(--ks-line-2);
}
.ks-ugrid__row:last-child{ border-bottom:0; }
.ks-ugrid__row-label{
  flex:0 0 110px; min-width:0; padding-top:6px;
  font-size:13px; font-weight:600; color:var(--ks-ink-2);
}
.ks-ugrid__cells{ flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; gap:6px; }
.ks-ugrid__none{ color:var(--ks-muted); font-size:13px; padding:6px 0; }

.ks-ucell{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:74px; padding:6px 8px; border-radius:8px;
  border:1px solid transparent; text-decoration:none; line-height:1.25;
  transition:transform .1s, box-shadow .15s;
}
a.ks-ucell:hover{ transform:translateY(-1px); box-shadow:var(--ks-shadow-sm); text-decoration:none; }
.ks-ucell__code{ font-weight:700; font-size:13px; }
.ks-ucell__meta{ font-size:11px; opacity:.85; }

.ks-ucell--available  { background:var(--ks-ok-soft);    color:var(--ks-ok);         border-color:var(--ks-ok); }
.ks-ucell--reserved   { background:var(--ks-warn-soft);  color:var(--ks-warn);       border-color:var(--ks-warn); }
.ks-ucell--contracted { background:var(--ks-info-soft);  color:var(--ks-info);       border-color:var(--ks-info); }
.ks-ucell--sold       { background:var(--ks-brand-soft); color:var(--ks-brand-deep); border-color:var(--ks-brand); }
.ks-ucell--handed_over{ background:var(--ks-brand-deep); color:#fff;                 border-color:var(--ks-brand-deep); }
.ks-ucell--cancelled,
.ks-ucell--blocked    { background:var(--ks-faint);      color:var(--ks-muted);      border-color:var(--ks-line-2); }

.ks-ulegend{ display:flex; flex-wrap:wrap; gap:var(--ks-3); margin-bottom:var(--ks-3); }
.ks-ulegend__item{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ks-ink-2); }
.ks-ulegend__dot{ width:12px; height:12px; border-radius:3px; border:1px solid transparent; }

@media (max-width:575.98px){
  .ks-ugrid__row{ flex-direction:column; gap:4px; }
  .ks-ugrid__row-label{ flex:0 0 auto; padding-top:0; }
  .ks-ucell{ min-width:64px; }
}

/* ================================================================
   MOBILE CARDS · الجداول تبقى كروت على الموبايل
   ----------------------------------------------------------------
   بُعد متعامد: **كل حاجة هنا جوّه `@media (max-width:767.98px)`** فالديسكتوب
   مالوش أي علاقة. الجافاسكربت (`ks-mobile-cards.js`) بيحقن سمات بس
   (`data-ks-cell` / `data-ks-label` / `data-ks-field`) والتخطيط كله هنا.

   🔴🔴🔴 ليه `!important` في كل حتة؟ سببان مقيسان:
     ١) Tabulator بيكتب `style.width` و`style.height` **سطريًا** على كل صف
        وخلية (`layout:'fitColumns'`). السمة السطرية بتغلب أي قاعدة عادية.
     ٢) تنسيق قايمة الإجراءات (`.action-dropdown-menu`) مكتوب **جوّه البليد**
        بتاع كل صفحة، يعني بيتحمّل **بعد** الملف ده ⇒ بيغلبه عند تساوي
        التخصيص.
   ================================================================ */
@media (max-width: 767.98px){

  /* ---------- ١) جداول Tabulator (ksTable) ---------- */

  /* الرأس مالوش لزوم — العنوان بقى جوّه كل خلية بـ`data-ks-label` */
  .ks-table.ks-cards .tabulator-header,
  .ks-table.ks-cards .tabulator-col-resize-handle{ display:none !important; }

  /* التمرير الأفقي بيتلغي: الكارت بيكدّس، فمفيش حاجة تفيض */
  .ks-table.ks-cards,
  .ks-table.ks-cards .tabulator-tableholder{
    overflow-x:hidden !important;
    border:0 !important;
    background:transparent !important;
    /* 🔴 Tabulator بيحجز ارتفاع ثابت للجدول (بيكتبه سطريًا على الحاوية
       والـholder). في وضع الكارت الصفوف أطول والعدد أقل، فالارتفاع المحجوز
       بيسيب **فراغ ميّت بعد آخر كارت** والمستخدم بيسكرول في بياض (بلاغ
       المستخدم ٥ سبتمبر). الارتفاع هنا بيتحدد بالمحتوى. */
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
  .ks-table.ks-cards .tabulator-table{ position:static !important; }
  .ks-table.ks-cards .tabulator-table{
    display:block !important;
    width:100% !important;
    background:transparent !important;
  }

  /* ===== الكارت نفسه =====
     grid بعمودين: بيقصّ ارتفاع الكارت للنص مقارنة بسطر لكل حقل — وده
     شرط تحقيق «٥ كروت ظاهرة على الأقل» على أصغر شاشة. */
  .ks-table.ks-cards .tabulator-row{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    column-gap:9px;
    row-gap:0;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-width:100% !important;
    padding:7px 10px !important;
    margin:0 0 7px 0 !important;
    border:1px solid var(--ks-line) !important;
    border-radius:11px !important;
    background:var(--ks-surface) !important;
    box-shadow:var(--ks-shadow-sm);
    /* 🪤 Tabulator بيحط `transform` على الصف في وضع virtual — وده بيعمل
       containing block فبيكسر أي `position:fixed` جوّه الصف (قايمة
       الإجراءات). `renderVertical:'basic'` على الموبايل بيمنعه، والسطر ده
       حزام أمان لو الوضع اتغيّر. */
    transform:none !important;
    position:relative !important;
  }
  .ks-table.ks-cards .tabulator-row.tabulator-selectable:hover{
    background:var(--ks-surface) !important;
  }

  /* ===== الخلية = بلوك «عنوان فوق · قيمة تحت» =====
     🔑 كانت `عنوان : قيمة` على سطر واحد بمحاذاة `baseline`، والنتيجة إن كل
        قيمة بتبدأ من مكان مختلف حسب طول عنوانها ⇒ «البيانات سايحة على بعض»
        (بلاغ المستخدم ٥ سبتمبر). البلوك بيدّي عمود محاذاة واحد ثابت. */
  .ks-table.ks-cards .tabulator-cell{
    /* عمودان **ثابتان**: العنوان في عمود والقيمة في عمود ⇒ كل العناوين
       بتبدأ من نفس المكان وكل القيم كمان. ده اللي بيمنع «السيحان»، والخلية
       بتفضل **سطر واحد** فالكارت مايكبرش (العنوان-فوق-القيمة كان بيوصّله ١٥٠px
       ⇒ ٥ كروت مستحيلة). */
    display:grid !important;
    grid-template-columns:45% 1fr;
    align-items:baseline;
    column-gap:5px;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:0 !important;
    padding:2px 0 !important;
    border:0 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    font-size:12px;
    font-weight:600;
    line-height:1.3;
    color:var(--ks-ink);
    overflow-wrap:anywhere;
  }
  .ks-table.ks-cards .tabulator-cell::before{
    content:attr(data-ks-label);
    color:var(--ks-muted);
    font-size:10.5px;
    font-weight:600;
    overflow-wrap:anywhere;
  }
  /* الخلايا بلا عنوان (الرأس · الشارة · الأزرار) بتاخد العرض كله */
  .ks-table.ks-cards .tabulator-cell:not([data-ks-label]){
    display:flex !important;
    align-items:center;
  }
  /* خلايا بلا عنوان (العنوان الرئيسي · الشارة · الأزرار · الاختيار) */
  .ks-table.ks-cards .tabulator-cell:not([data-ks-label])::before{ content:none; }
  /* الخلية الفاضية بتاخد مساحة وبتوسّخ الكارت */
  .ks-table.ks-cards .tabulator-cell[data-ks-empty]{ display:none !important; }

  /* 🔴🔴 نفس فخّ `.d-none` بتاع الجداول العادية، بس هنا مصدره Tabulator:
     `display:flex !important` فوق كان بيدوس على الإخفاء اللي بيكتبه
     `column.hide()` سطريًا ⇒ أي عمود المستخدم أخفاه من زرار «الأعمدة» على
     الديسكتوب (والحالة محفوظة في localStorage وبتتطبق على الموبايل كمان)
     كان بيرجع يظهر في الكارت. */
  .ks-table.ks-cards .tabulator-cell[style*="display: none"],
  .ks-table.ks-cards .tabulator-cell[style*="display:none"]{ display:none !important; }

  /* ===== رتبة العناصر جوّه الكارت ===== */
  /* العنوان: أول خلية بيانات — بارز وفي أول سطر */
  /* الرأس: «مسلسل : 44» — بياخد السطر كله عشان الرقم مايبقاش عائم */
  .ks-table.ks-cards .tabulator-cell[data-ks-cell="lead"]{
    order:-2;
    grid-column:1;
    grid-template-columns:auto 1fr;
    column-gap:4px;
    font-size:13px;
    font-weight:800;
    color:var(--ks-ink);
    padding:0 0 4px 0 !important;
  }
  .ks-table.ks-cards .tabulator-cell[data-ks-cell="lead"]::before{
    font-size:11px;
    font-weight:700;
  }
  /* الحالة: شارة — جنب العنوان في نفس السطر، على الحافة المقابلة */
  .ks-table.ks-cards .tabulator-cell[data-ks-cell="badge"]{
    order:-1;
    grid-column:2;
    justify-content:flex-end;
    padding:0 0 4px 0 !important;
  }
  /* الاختيار الجماعي: مربع صغير في ركن الكارت */
  .ks-table.ks-cards .tabulator-cell[data-ks-cell="check"]{
    order:-3;
    grid-column:1 / -1;
    justify-content:flex-start;
    padding:0 !important;
  }

  /* ===== شريط الإجراءات: سطر كامل تحت، بحد فاصل ===== */
  .ks-table.ks-cards .tabulator-cell[data-ks-cell="actions"]{
    order:90;
    grid-column:1 / -1;
    display:flex !important;
    flex-wrap:wrap;
    align-items:center;
    gap:5px;
    margin-top:5px;
    padding-top:6px !important;
    border-top:1px solid var(--ks-line) !important;
  }

  /* 🔑 فكّ قايمة الـ٣ نقط: الأزرار كلها تبان في الكارت — ده جوهر الطلب.
     الماركب موحّد في ١٥ شاشة: .actions-group > .action-dropdown >
     (.btn-action-toggle + .action-dropdown-menu > .action-item*) */
  /* 🔑 اصطلاح تاني للأزرار (شاشة السندات): `.actions-dropdown` /
     `.dropdown-toggle` / `.dropdown-menu` / `.dropdown-item` بدل
     `.action-dropdown` / `.btn-action-toggle` / `.action-item`.
     رابع اصطلاح مختلف لنفس الوظيفة — فالفكّ بيغطّي الاتنين.
     🪤 مقيّد بخلية الإجراءات عشان مايتعارضش مع قاعدة «الورقة السفلية» اللي
        بتطبّق على `.dropdown-menu.show` في باقي الصفحة. */
  .ks-table.ks-cards .tabulator-cell[data-ks-cell="actions"] .dropdown-toggle,
  table.ks-cards td[data-ks-cell="actions"] .dropdown-toggle{ display:none !important; }
  .ks-table.ks-cards .tabulator-cell[data-ks-cell="actions"] .actions-dropdown,
  table.ks-cards td[data-ks-cell="actions"] .actions-dropdown{ display:contents !important; }
  .ks-table.ks-cards .tabulator-cell[data-ks-cell="actions"] .dropdown-menu,
  table.ks-cards td[data-ks-cell="actions"] .dropdown-menu{
    display:flex !important;
    position:static !important;
    inset:auto !important;
    flex-wrap:wrap;
    gap:5px;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    max-height:none !important;
    overflow:visible !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:none !important;
  }
  .ks-table.ks-cards .tabulator-cell[data-ks-cell="actions"] .dropdown-menu form,
  table.ks-cards td[data-ks-cell="actions"] .dropdown-menu form{ display:contents !important; }
  .ks-table.ks-cards .tabulator-cell[data-ks-cell="actions"] .dropdown-item,
  table.ks-cards td[data-ks-cell="actions"] .dropdown-item{
    width:auto !important;
    flex:0 0 auto;
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-width:34px;
    min-height:30px;
    padding:5px 9px !important;
    font-size:0 !important;                 /* أيقونة بس — النص في title */
    border:1px solid var(--ks-line) !important;
    border-radius:8px !important;
    background:var(--ks-surface-2) !important;
  }
  .ks-table.ks-cards .tabulator-cell[data-ks-cell="actions"] .dropdown-item i,
  table.ks-cards td[data-ks-cell="actions"] .dropdown-item i{
    font-size:14px !important;
    width:auto !important;
    margin:0 !important;
  }

  .ks-table.ks-cards .btn-action-toggle{ display:none !important; }
  .ks-table.ks-cards .actions-group,
  .ks-table.ks-cards .action-dropdown{
    display:contents !important;          /* الأزرار تورث flex بتاع الخلية */
  }
  .ks-table.ks-cards .action-dropdown-menu{
    display:flex !important;
    position:static !important;
    flex-wrap:wrap;
    gap:6px;
    min-width:0 !important;
    width:100% !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    z-index:auto !important;
  }
  .ks-table.ks-cards .action-dropdown-menu form{ display:contents !important; }

  /* كل إجراء = زرار **أيقونة بس** (قرار المستخدم ٥ سبتمبر: الكلام كان بياخد
     سطرين ويكبّر الكارت).
     🔴 النص مش عنصر — هو text node جنب `<i>` — فمينفعش `display:none`.
        الحيلة: `font-size:0` على الزرار وحجم صريح على الأيقونة.
     🔑 و`ks-mobile-cards.js` بينقل النص لـ`title`+`aria-label` **قبل** ما
        يتخفي، فالمعنى مابيضيعش لا للمستخدم ولا لقارئ الشاشة. */
  .ks-table.ks-cards .action-dropdown-menu .action-item{
    width:auto !important;
    flex:0 0 auto;
    justify-content:center;
    align-items:center;
    gap:0;
    min-width:0;
    min-height:28px;
    padding:4px 7px !important;
    font-size:0 !important;
    border:1px solid var(--ks-line) !important;
    border-radius:8px !important;
    background:var(--ks-surface-2) !important;
  }
  .ks-table.ks-cards .action-dropdown-menu .action-item i,
  .ks-table.ks-cards .action-dropdown-menu .action-item svg{
    width:auto !important;
    font-size:14px !important;
    line-height:1;
  }

  /* شريط الترقيم: مريح للمس */
  .ks-table.ks-cards .tabulator-footer{
    border:0 !important;
    background:transparent !important;
  }
  .ks-table.ks-cards .tabulator-page{ min-height:36px; }

  /* ---------- ٢) `<table>` عادي (ليستات الإدخال + أي جدول بيانات) ---------- */
  /* 🔴🔴🔴 `width:100%` مش `auto` للجدول والجسم والصف.
     📏 القياس اللي كشفها: `hostW=320` بينما `rowW=700` و
        `tpl=[333.7px 333.7px]` — يعني الشبكة عمودين **صح**، بس بتوزّع عرض
        ٧٠٠px. السبب: `width:auto` على الصف معناها «اتمدد حسب محتواك»، فالـ
        grid بيحسب `max-content` بتاع الحقول ويمدّد الجدول معاه.
     🔑 **`minmax(0,1fr)` بيوزّع عرض محدد — مش بيفرضه.** من غير عرض صريح على
        الحاوية مفيش حاجة تمنع التمدد. */
  table.ks-cards, table.ks-cards > tbody, table.ks-cards > tbody > tr,
  table[data-ks-empty-head]{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    /* 🔴 `min-width` **بيغلب `width` و`max-width`** مهما كانوا `!important`.
       والمقاس على الحيّ طلّع `min-width:700px` على جدول الفاتورة (محسوب من
       عرض الأعمدة المسمّرة في رأسه) ⇒ الجدول ٧٠٠px جوّه حاوية ٣٢٠ مهما
       عملنا في الـwidth. تصفيرها هو الحارس الحقيقي. */
    min-width:0 !important;
    box-sizing:border-box;
  }
  table.ks-cards > tbody > tr > td{ display:block !important; width:auto !important; }
  table.ks-cards > thead{ display:none !important; }
  table.ks-cards{ border:0 !important; }

  /* 🔴🔴 الأعمدة المخفية عمدًا لازم تفضل مخفية.
     `display:block !important` فوق كان بيدوس على `.d-none` بتاع بوتستراب
     ويرجّع أعمدة الصفحة مخفياها بإعداد (ضريبة · خصم مستقطع · تكلفة الصنف …).
     فاتورة المبيعات لوحدها فيها ٨ أعمدة من دول. */
  table.ks-cards > tbody > tr > td.d-none,
  table.ks-cards > tbody > tr > td[hidden],
  table.ks-cards > tbody > tr > td[style*="display: none"],
  table.ks-cards > tbody > tr > td[style*="display:none"]{ display:none !important; }

  /* 🔴🔴🔴 شبكة مرنة — **مش عمود واحد**.
     العمود الواحد كان بيدّي بلوك لكل حقل ⇒ بند فاتورة بـ٧ حقول = ≈٣٨٥px،
     يعني فاتورة ٢٠ بند = سكرول بلا نهاية (بلاغ المستخدم ٥ سبتمبر).
     `auto-fit` بيحط ٣ أعمدة على شاشة ٣٦٠px و٤ على الأوسع ⇒ ٧ حقول تبقى
     **٣ سطور** بدل ٧. البند بقى ≈١٠٠px. */
  table.ks-cards > tbody > tr{
    display:grid !important;
    grid-template-columns:repeat(auto-fit, minmax(84px, 1fr));
    gap:5px 9px;
    align-items:start;
    padding:9px 11px !important;
    margin:0 0 8px 0 !important;
    border:1px solid var(--ks-line) !important;
    border-radius:11px !important;
    background:var(--ks-surface) !important;
    box-shadow:var(--ks-shadow-sm);
  }
  /* العنوان فوق القيمة — العمود هنا ضيّق (~٩٠px) فالصف مايسعش الاتنين */
  table.ks-cards > tbody > tr > td{
    padding:0 !important;
    border:0 !important;
    /* 🪤 لازم نصفّر خلفية الجدول المخطط (`table-striped`) وإلا كل خلية بتبان
       بلوك رمادي مستقل — ده اللي كان بيوحّش المنظر في الصورة. */
    background:none !important;
    text-align:start !important;
    min-width:0;
    font-size:12.5px;
    font-weight:700;
    line-height:1.3;
    overflow-wrap:anywhere;
  }
  table.ks-cards > tbody > tr > td[data-ks-label]::before{
    content:attr(data-ks-label);
    display:block;
    color:var(--ks-muted);
    font-size:10px;
    font-weight:600;
    line-height:1.2;
  }
  /* الحقل النصي الطويل (اسم الصنف · اسم الحساب) بياخد السطر كله — الثلث
     بيقطّعه، والعمودين برضه بيقصّوا القيم الطويلة زي «مصروفات ادارية». */
  table.ks-cards > tbody > tr > td[data-ks-wide]{ grid-column:1 / -1; }
  table.ks-cards > tbody > tr > td[data-ks-cell="lead"]{
    grid-column:span 1;
    font-weight:800;
  }
  /* الخلية الفاضية بتاخد عمود في الشبكة على الفاضي */
  table.ks-cards > tbody > tr > td[data-ks-empty]{ display:none !important; }

  /* صف **إدخال** (فيه حقول): أعمدة أوسع — الـ٨٤px بتزنق الـselect.
     🛡️ `:has()` مش مدعوم ⇒ بنرجع للشبكة الضيّقة، مش كسر. */
  /* 🔴🔴🔴 `minmax(132px, 1fr)` **بتسمح بالفيض**: الـ`1fr` سقف مرن، لكن الحد
     الأدنى `132px` بيمنع العمود إنه يضيق أكتر من كده، ولو المحتوى (select2
     أو رقم طويل) أوسع، العمود بيتمدد والصف بيفيض ⇒ كارت البند بيسكرول أفقي
     والحقول بتتقطع (بلاغ المستخدم ٥ سبتمبر · صورة).
     ✅ `repeat(2, minmax(0, 1fr))` = عمودان **ثابتان** والحد الأدنى صفر ⇒
        العمود بيضيق مع الحاوية ومستحيل يفيض. */
  table.ks-cards > tbody > tr:has(input, select, textarea){
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px 9px;
  }
  /* ونفس المنطق لصفوف العرض.
     🪤 الحد الأدنى ١١٠px مش ٨٤: على ٨٤ الشبكة بتحط ٣–٤ أعمدة وبتضيق لدرجة
        إن الكلمة تتكسر **حرف تحت حرف**. ١١٠ بتدّي عمودين مريحين على ٣٢٠px. */
  table.ks-cards > tbody > tr{
    grid-template-columns:repeat(auto-fit, minmax(min(110px, 100%), 1fr));
  }
  /* وحماية أخيرة: الكلمة ماتتكسرش حرف حرف مهما ضاق العمود */
  table.ks-cards > tbody > tr > td{ word-break:normal !important; }

  /* 🔴🔴🔴 مصدر السكرول الأفقي في كارت الإدخال: صفحات الفواتير بتسمّر عرض
     حقول بالبكسل وبـ`!important` — مثال من `sales-invoice/styles`:
       select[id^="batches-"]{ width:120px !important; min-width:120px !important }
       .select2-container[id*="batches-"]{ width:120px !important; … }
       .invoice-table th{ width:100px !important }
     العرض الثابت ده منطقي في جدول أفقي وكارثة في شبكة عرضها ~٩٠px ⇒ الصف
     بيفيض والمستخدم بيعمل سكرول أفقي عشان يوصل لزرار الحذف (بلاغ المستخدم).
     التخصيص هنا أعلى (`table.ks-cards > tbody > tr > td …`) فبيغلبهم. */
  table.ks-cards > tbody > tr > td input,
  table.ks-cards > tbody > tr > td select,
  table.ks-cards > tbody > tr > td textarea,
  table.ks-cards > tbody > tr > td .select2-container,
  table.ks-cards > tbody > tr > td .select2-selection{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box;
  }
  /* والجدول نفسه مايفيضش غلافه مهما كان المسمّر جوّاه */
  table.ks-cards{ max-width:100% !important; table-layout:auto !important; }
  /* 🪤 كان `overflow:hidden` — والصف بقى `display:grid` وكارت بـ`border-radius`،
     فالقص كان بيقطع أي حاجة بتخرج منه: أوضحها **قايمة select2** اللي بتنزل من
     حقل جوّه الكارت (بتتقص عند حدّ الكارت على الموبايل).
     `inherit` بياخد قيمة `tbody` (`visible` افتراضيًا) ⇒ الكارت مابيقصّش،
     والحواف الدايرية شكلها زي ما هو لأن مفيش خلفية بتفيض عليها. */
  table.ks-cards > tbody > tr{ overflow:inherit; }
  /* 🪤 الغلاف مكتوب فيه `style="overflow-x: auto"` **سطريًا** في البليد —
     السمة السطرية بتخسر قدّام `!important` بس. بعد ما الجدول بقى كروت
     مفيش حاجة تفيض، فالسكرول ده بيبقى فخّ بيخبّي زرار الحذف. */
  body.ks-scope div:has(> table.ks-cards){ overflow-x:visible !important; }

  /* ===== الجداول اللي **مش** بتتحوّل لكارت =====
     العتبة ٤ أعمدة، فجداول البند/القيمة (الإجماليات · المصاريف الإضافية)
     بتفضل جداول — وده مقصود، شكلها كده مقروء أصلاً. بس مفيش حاجة كانت بتمنعها
     من الفيض: عرض مسمّر على خلية أو حقل بيخلّي الجدول أعرض من الشاشة والقيم
     تتقطع برّه الحافة (بلاغ المستخدم ٥ سبتمبر).
     🪤 و`.table-responsive` مابتنفعش هنا: `master.blade.php` مخلّيها
        `overflow-x:hidden` فوق ٧٦٧px، فالمحتوى بيتقص مش بيسكرول. */
  body.ks-scope table:not(.ks-cards){
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    table-layout:auto;
  }
  body.ks-scope table:not(.ks-cards) > * > tr > td,
  body.ks-scope table:not(.ks-cards) > * > tr > th{
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  body.ks-scope table:not(.ks-cards) input,
  body.ks-scope table:not(.ks-cards) select,
  body.ks-scope table:not(.ks-cards) .select2-container{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  /* عمود الترقيم مالوش لازمة في الكارت — الترتيب باين من ترتيب الكروت */
  table.ks-cards > tbody > tr > td[data-ks-seq]{ display:none !important; }

  /* 🔴 `.btn-group` بتاع بوتستراب **nowrap بطبيعته** — فالأزرار الزيادة
     بتتقص برّه الخلية والمستخدم يشوف اتنين من خمسة (بلاغ المستخدم ٥ سبتمبر
     · شاشة الأصناف). الـ`flex-wrap` كان على الخلية مش على المجموعة جوّاها. */
  table.ks-cards td[data-ks-cell="actions"] .btn-group,
  table.ks-cards td[data-ks-cell="actions"] .actions-group,
  .ks-table.ks-cards .tabulator-cell[data-ks-cell="actions"] .btn-group{
    display:flex !important;
    flex-direction:row !important;   /* `btn-group-vertical` وغيره ممكن يقلبها */
    flex-wrap:wrap !important;
    gap:5px;
    width:100%;
    justify-content:flex-start;
  }

  /* الصف اللي كل زرار فيه في `<td>` لوحده: الخلايا تتراص جنب بعض بدل ما
     كل واحدة تاخد سطر كامل */
  table.ks-cards > tbody > tr[data-ks-actions-multi] > td[data-ks-cell="actions"]{
    grid-column:auto !important;
    border-top:0 !important;
    margin-top:0 !important;
    padding-top:2px !important;
    justify-content:flex-start;
  }
  table.ks-cards td[data-ks-cell="actions"] .btn-group > *,
  .ks-table.ks-cards .tabulator-cell[data-ks-cell="actions"] .btn-group > *{
    flex:0 0 auto;
    margin:0 !important;
    border-radius:8px !important;
  }

  /* ===== القوايم المنسدلة: ورقة سفلية بدل قايمة بتخرج برّه الشاشة =====
     `#columnControlMenu` مثلًا `min-width:280px` ومحاذية لحافة الزرار، فعلى
     شاشة ٣٧٥px بتتقص نصها (بلاغ المستخدم: «تحكم الأعمدة خارج لبرة»).
     الورقة السفلية هي النمط المعتاد على الموبايل وبتحل المشكلة لأي قايمة. */
  body.ks-scope .dropdown-menu.show,
  body.ks-scope .dropdown.show > .dropdown-menu{
    position:fixed !important;
    inset-inline:10px !important;
    inset-block-start:auto !important;
    bottom:10px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    max-height:72vh;
    overflow-y:auto;
    z-index:var(--ks-z-modal, 1050);
    border-radius:14px;
    box-shadow:0 -8px 30px rgba(30,25,25,.22);
  }

  /* ===== زرار الإضافة: تحت الليست وبعرض السطر =====
     🔑 الزرار مكتوب جوّه آخر `<th>` في الرأس (`addRow()`)، والرأس فوق الجدول.
        المستخدم عايزه **تحت** الليست وبعرض السطر عشان يكون أسهل في الاستخدام.
        الحل بلا لمس DOM: الجدول يبقى `flex column` والرأس ياخد `order` أكبر
        من الجسم ⇒ ينزل تحته. والعناوين تتخفي (هي سبب السكرول الأفقي). */
  table.ks-cards:has(> thead button),
  table[data-ks-empty-head]:has(> thead button){
    display:flex !important;
    flex-direction:column;
  }
  table.ks-cards:has(> thead button) > tbody,
  table[data-ks-empty-head]:has(> thead button) > tbody{ order:1; display:block !important; }
  table.ks-cards:has(> thead button) > thead,
  table[data-ks-empty-head]:has(> thead button) > thead{
    order:9;
    display:block !important;
    border:0 !important;
  }
  table.ks-cards:has(> thead button) > thead > tr,
  table[data-ks-empty-head]:has(> thead button) > thead > tr{ display:block !important; }
  table.ks-cards:has(> thead button) > thead th,
  table[data-ks-empty-head]:has(> thead button) > thead th{ display:none !important; }
  table.ks-cards:has(> thead button) > thead th:has(button),
  table[data-ks-empty-head]:has(> thead button) > thead th:has(button){
    display:block !important;
    width:auto !important;
    padding:0 !important;
    border:0 !important;
  }
  table.ks-cards:has(> thead button) > thead th button,
  table[data-ks-empty-head]:has(> thead button) > thead th button{
    width:100% !important;
    min-height:40px;
    border-radius:10px;
    font-size:16px;
  }

  /* ===== (قديم) الجدول الفاضي: رأسه بيتضغط لزرار الإضافة بس =====
     🔴 **ممنوع نخفي الجدول**: زرار «إضافة صف» (`addRow()`) مكتوب جوّه آخر
        `<th>` في الرأس، فإخفاؤه بيمنع المستخدم من إضافة أصناف.
     ⇒ بنخفي العناوين (اللي بتعمل سكرول أفقي على الفاضي) ونسيب الخانة اللي
       فيها زرار. النتيجة: زرار إضافة واضح + رسالة «لا توجد أصناف» تحته.
     🛡️ ولو الرأس مالوش زرار خالص، القاعدة مابتنطبقش والرأس يفضل زي ما هو. */
  table[data-ks-empty-head] > thead:has(button){
    display:block !important;
    border:0 !important;
  }
  table[data-ks-empty-head] > thead:has(button) > tr{ display:block !important; }
  table[data-ks-empty-head] > thead:has(button) th{ display:none !important; }
  table[data-ks-empty-head] > thead:has(button) th:has(button){
    display:block !important;
    width:auto !important;
    padding:6px 0 !important;
    border:0 !important;
    text-align:center;
  }
  /* الزرار بقدر معقول — مش شريط بعرض الشاشة (بلاغ المستخدم: «عامله كبير») */
  table[data-ks-empty-head] > thead:has(button) th button{
    min-width:44px;
    min-height:34px;
    padding:0 14px;
    border-radius:9px;
  }

  /* أزرار «إضافة صنف سريع» + «إضافة هدية» تحت ليست الأصناف: سطر واحد */
  .ks-items-actions{
    display:flex;
    gap:6px;
    margin:8px 0 0 !important;
    padding:0 !important;
  }
  .ks-items-actions > .ks-btn{
    flex:1 1 0;
    min-width:0;
    justify-content:center;
    font-size:11px;
    padding:7px 5px;
    min-height:34px;
    white-space:normal;
    line-height:1.2;
  }
  table.ks-cards > tbody > tr > td[data-ks-cell="actions"]{
    /* 🔴 السطر ده كان **ناقص هنا** وموجود في قاعدة Tabulator بس ⇒ خلية
       الإجراءات كانت بتاخد خانة واحدة من خانات الشبكة (١٠٩px مقيسة) وتلات
       أزرار عرضهم ٢٠١px بيلفّوا فوق بعض (بلاغ المستخدم: «ما جمب بعض أحسن»).
       🔑 المحركان لهم قواعد منفصلة — أي تعديل في واحد لازم يتراجع في التاني. */
    grid-column:1 / -1;
    display:flex !important;
    flex-wrap:wrap;
    gap:6px;
    margin-top:2px;
    padding-top:8px !important;
    border-top:1px solid var(--ks-line) !important;
  }
  /* الحقول جوّه كارت الإدخال بعرض كامل وارتفاع مريح للمس */
  table.ks-cards > tbody > tr > td .form-control,
  table.ks-cards > tbody > tr > td .form-select,
  table.ks-cards > tbody > tr > td .select2-container{
    width:100% !important;
    min-width:0 !important;
  }
  /* حقول كارت الإدخال مضغوطة — الافتراضي (٤٠px+) بيطوّل كارت البند بلا داعي */
  table.ks-cards > tbody > tr > td .form-control,
  table.ks-cards > tbody > tr > td .form-select,
  table.ks-cards > tbody > tr > td input,
  table.ks-cards > tbody > tr > td select,
  table.ks-cards > tbody > tr > td .select2-selection{
    min-height:32px !important;
    height:auto !important;
    padding:4px 8px !important;
    font-size:12px !important;
  }

  /* ---------- ٢) بانر رأس الصفحة: مضغوط ----------
     البانر كان بياخد ≈٢١٠px من أول الشاشة على الفاضي (بلاغ المستخدم).
     الوصف تحت العنوان **بيتخفي**: هو شرح لمرة واحدة، والمستخدم اللي فاتح
     الشاشة عارف هو فين — ده السلوك المعتاد في تطبيقات الموبايل. */
  .ks-page-header,
  .ks-banner,
  .invoice-header{
    padding:12px 14px !important;
    margin-bottom:10px !important;
    gap:10px !important;
  }
  .ks-page-header__txt p,
  .ks-banner p,
  .invoice-header p{ display:none !important; }
  .ks-page-header__txt h1,
  .ks-banner h1,
  .invoice-header h1{ font-size:17px !important; margin:0 !important; }
  .ks-page-header__ic,
  .ks-banner .ks-banner-ic,
  .invoice-header .invoice-image{
    width:36px !important; height:36px !important;
    font-size:16px !important; border-radius:10px !important;
    flex:0 0 auto;
  }
  .ks-page-header__ic svg{ width:18px !important; height:18px !important; }

  /* ---------- ٢-١) عناوين الأقسام والكروت: مضغوطة ----------
     رأس القسم كان بياخد ارتفاع كبير على الفاضي في كل شاشة فيها أقسام
     (بلاغ المستخدم: «كارت العنوان كبير»). الأسماء مختلفة بين الشاشات
     (`section-header` · `section-title` · `ks-card__head`) فبنغطّيها كلها. */
  body.ks-scope .section-header,
  body.ks-scope .section-title,
  body.ks-scope .ks-card__head{
    padding:8px 11px !important;
    margin-bottom:8px !important;
    gap:7px !important;
    min-height:0 !important;
  }
  body.ks-scope .section-header h5,
  body.ks-scope .section-header h3,
  body.ks-scope .section-title h5,
  body.ks-scope .ks-card__head h3{
    font-size:13.5px !important;
    margin:0 !important;
  }
  body.ks-scope .section-header i,
  body.ks-scope .section-title i{ font-size:14px !important; }
  body.ks-scope .form-section{ padding:9px !important; margin-bottom:9px !important; }

  /* ---------- ٢أ) حقول الفورم: **مربعين في السطر** ----------
     بوتستراب بيرجّع أي عمود لعرض كامل تحت نقطة الكسر بتاعته، فحقول
     الفواتير (`col-lg-2 col-md-4 col-sm-6`) كانت بتاخد سطر لكل حقل ⇒
     الفورم بيطول جدًا (بلاغ المستخدم ٥ سبتمبر: «كل مربعين في سطر»).

     🔴🔴🔴 النسخة الأولى طبّقت ٥٠٪ على **أي** `col-*` وده كسر حاجات:
        كومبوننت الباركود ماركبه `.row > .col-md-7 > .input-group` ⇒ اتزنق
        في نص العرض واتفكّ لسطور (بلاغ المستخدم)، ونفس الحكاية في المودالات.
     ✅ فالقاعدة بقت مربوطة بـ`:has(> .form-group)` / `:has(> .ks-field)` —
        يعني **الأعمدة اللي جوّاها حقل فورم بسيط بس**. أي عمود فيه
        `input-group` أو جدول أو ماركب مركّب مابيتلمسش.
     🛡️ ولو المتصفح مايعرفش `:has()` القاعدة كلها بتتجاهل ⇒ نرجع لسطر لكل
        حقل. **فشل آمن** — مفيش كسر. */
  /* 🔴 `:not([data-ks-grid])` **إجبارية**: القاعدة دي للحاويات الـflex بس.
     لو `relaxGrids` حوّل الحاوية لشبكة، الخلية أصلاً نص الصف ⇒ لازم تتعطّل
     هنا، مش تتغلب بقاعدة تانية (جرّبت الغلبة وفشلت: تخصيص `:has()` أعلى). */
  /* 🔑🔑🔑 الكشف **بالمحتوى مش بالاسم** — نفس درس عمود الإجراءات وزرار
     التصدير. النسخة اللي قبل كده كانت بتدوّر على `.form-group` بالاسم،
     وشاشة مرتجع المبيعات كاتباها **`form-group-modern`**، وCSS بيطابق الكلاس
     **كامل** مش جزء منه ⇒ القاعدة مامتشتش خالص وكل الحقول فضلت سطر لكل واحد.
     أي عمود جوّاه حقل إدخال (في أي عمق) = عمود حقل، مهما كان اسم الغلاف. */
  body.ks-scope .row:not([data-ks-grid]) > [class*="col-"]:has(input),
  body.ks-scope .row:not([data-ks-grid]) > [class*="col-"]:has(select),
  body.ks-scope .row:not([data-ks-grid]) > [class*="col-"]:has(.form-control),
  body.ks-scope .row:not([data-ks-grid]) > [class*="col-"]:has(label){
    flex:0 0 50% !important;
    max-width:50% !important;
    width:50% !important;
  }

  /* 🔴🔴🔴 والإلغاء ده **إجباري**: القاعدة فوق متصمّمة لحاوية **flex** —
     `width:50%` معناها «نص الصف». لكن `relaxGrids` بيحوّل الحاويات لـ**grid
     بعمودين**، وساعتها الخلية أصلاً نص الصف، فـ`width:50%` بتبقى «نص
     **الخلية**» ⇒ **العرض بيتقسم مرتين**.
     📏 مقاس فعلي من الكرييت (٣٧٥px): الشبكة `[140.5px 140.5px]` والعمود
        جوّاها طلع **٧٠px**، وselect2 قاس العمود وكتب `width:70.25px` سطريًا
        — فبان كأن select2 هو السبب وهو كان الضحية.
     ⇒ في أي حاوية لمسها `relaxGrids`، العمود بياخد خليته كاملة.
     🪤 وتكرار السيليكتور مقصود لرفع التخصيص: أي قاعدة عرض تانية على العمود
        (بتاعتنا أو بتاعة الصفحة) لازم تخسر هنا. */
  body.ks-scope [data-ks-grid][data-ks-grid] > [class*="col-"][class*="col-"],
  body.ks-scope [data-ks-grid][data-ks-grid] > [class*="col-"]:has(.form-group){
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    flex:none !important;
  }
  /* 🔑 `min-width:0` على **كل** أبناء الشبكة: الافتراضي `auto` معناه «ماتضيقش
     تحت عرض محتواك» ⇒ أي حقل أوسع بيمدّد عموده والشبكة تفيض برّه الشاشة. */
  body.ks-scope [data-ks-grid] > *{ min-width:0 !important; }
  /* 🔴 حقل معاه زرار جنبه (العميل + زرار «إضافة عميل») بياخد **السطر كله**.
     الماركب `.form-group > .d-flex > (select[flex:1] + button)`، وفي عمود
     عرضه ~١٢٨px الاتنين مايسعوش ⇒ الزرار كان بيطلع **برّه الكارت**
     (بلاغ المستخدم ٥ سبتمبر). بسطر كامل الاتنين بيسعوا مرتاحين. */
  body.ks-scope [data-ks-grid="2col"] > *:has(.d-flex > button),
  body.ks-scope [data-ks-grid="2col"] > *:has(.d-flex > .ks-btn),
  body.ks-scope [data-ks-grid="2col"] > *:has([class*="input-group"]),
  /* 🔴 الجدول والنص الحر محتاجين السطر كله. الاستثناء ده كان موجود لحاويات
     **flex** بس (`flex:0 0 100%`) ومالوش مقابل في حاويات **grid**، فالعمود
     اللي فيه جدول الإجماليات فضل نص عرض والجدول مزنوق ونصه بيتكسر
     (بلاغ المستخدم ٥ سبتمبر: «متخليه يملا الصفحة»). */
  body.ks-scope [data-ks-grid] > *:has(table),
  body.ks-scope [data-ks-grid] > *:has(textarea){
    grid-column:1 / -1 !important;
  }
  /* 🔴🔴🔴 الحقل لازم يملأ عموده.
     select2 بيحسب عرض الحقل **وقت التهيئة** ويكتبه **سطريًا** على
     `.select2-container` (`style="width:210px"`). العرض ده اتقاس على تخطيط
     الديسكتوب، فبعد ما العمود بقى ~١٤٠px الحقل بيفضل بعرضه القديم أو أصغر
     ⇒ «الديب …» و«الفرع ا…» مقطوعين والمساحة جنبهم فاضية (بلاغ المستخدم).
     السمة السطرية بتخسر قدّام `!important` بس. */
  body.ks-scope .form-control,
  body.ks-scope .form-select,
  body.ks-scope .ks-field > select,
  body.ks-scope .form-group > select,
  body.ks-scope .select2-container{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  /* 🪤 استثناء: جوّه `input-group` بوتستراب بيعتمد على `width:1%` + flex —
     لو حطينا 100% الحقل بيدفع الأيقونة والزرار برّه. */
  body.ks-scope .input-group > .form-control,
  body.ks-scope .input-group > .form-select{
    width:1% !important;
    flex:1 1 auto;
  }

  /* 🪤 و`min-width:0` لازمة: عنصر flex مابيتقلصش تحت عرض محتواه من غيرها،
     فالـselect بيدفع الزرار برّه بدل ما يضيق. */
  body.ks-scope .d-flex > select,
  body.ks-scope .d-flex > input,
  body.ks-scope .d-flex > .select2-container{ min-width:0 !important; flex:1 1 auto; }
  /* الزرار الملحق بحقل: بقدر محتواه بس — مياخدش نص العمود */
  body.ks-scope .d-flex > .ks-btn,
  body.ks-scope .d-flex > button{
    flex:0 0 auto;
    width:auto !important;
    min-width:40px;
    padding:0 12px;
  }

  /* الحقل المركّب أو النص الحر محتاج العرض كله.
     🔴🔴 تكرار `[class*="col-"]` **مقصود لرفع التخصيص**: قاعدة الـ٥٠٪ فوق
     بقت `(0,4,2)` بسبب `:not()` + `:has(input)`، والاستثناء كان `(0,4,1)`
     فاتغلب ⇒ **كومبوننت الباركود اتكسر تاني** بعد ما كان اتصلّح (بلاغ
     المستخدم ٥ سبتمبر · تاني مرة لنفس العنصر).
     🔑 أي توسيع للقاعدة الأساسية لازم يتبعه مراجعة تخصيص الاستثناءات. */
  /* 🪤 `[class*="input-group"]` مش `.input-group`: شاشة مشتريات النادي كاتباها
     **`input-group-custom`** وجوّاها زرار `position:absolute` فوق الحقل —
     في نص عمود الزرار بيغطّي الحقل كله (بلاغ المستخدم ٥ سبتمبر). */
  body.ks-scope .row > [class*="col-"][class*="col-"]:has([class*="input-group"]),
  body.ks-scope .row > [class*="col-"][class*="col-"]:has(textarea),
  body.ks-scope .row > [class*="col-"][class*="col-"]:has(table),
  /* التوجل/الشيك بوكس: النص جنبه بيلفّ ويتراكب عليه في نص عمود */
  body.ks-scope .row > [class*="col-"][class*="col-"]:has(.form-switch),
  body.ks-scope .row > [class*="col-"][class*="col-"]:has(.form-check),
  body.ks-scope .row > [class*="col-"][class*="col-"]:has(input[type="checkbox"]),
  body.ks-scope .row > [class*="col-"][class*="col-"]:has(input[type="radio"]),
  body.ks-scope .row > .ks-col-full,
  /* 🔑 `col-md-12` وإخوته = «سطر كامل **حتى على الديسكتوب**» ⇒ نيّة صريحة
     مايصحّش نكسرها (كانت بتزنّق مودال «إضافة صنف سريع»).
     ملاحظة: `col-12` **لوحده** مقصود منه «كامل على الموبايل بس» فبيتأثر
     عادي — وده اللي المستخدم طلبه. */
  body.ks-scope .row > [class*="col-sm-12"][class*="col-"],
  body.ks-scope .row > [class*="col-md-12"][class*="col-"],
  body.ks-scope .row > [class*="col-lg-12"][class*="col-"],
  body.ks-scope .row > [class*="col-xl-12"][class*="col-"]{
    flex:0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
  }

  /* ---------- ٢ب) شاشات العرض (`x-ks.doc-view` · `x-ks.dl`) ----------
     ١٦ شاشة `doc-view` و٥١ شاشة بتستخدم `ks-dl`. كانت **عمود واحد + عنوان
     فوق قيمة** ⇒ سطرين لكل بند ⇒ ٦ بنود = ٢٤٠px من فراغ (بلاغ المستخدم).
     بقت **صف واحد: العنوان على حافة والقيمة على التانية**، بخط فاصل خفيف —
     نفس شكل صفوف الإعدادات في تطبيقات الموبايل. ٦ بنود ≈ ١٤٤px. */
  .ks-dl{ grid-template-columns:1fr; gap:0 !important; }
  .ks-dl__i{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    padding:7px 0;
    border-bottom:1px solid var(--ks-line);
  }
  .ks-dl__i:last-child{ border-bottom:0; }
  .ks-dl__k{
    margin-bottom:0 !important;
    flex:0 0 auto;
    font-size:11.5px;
  }
  .ks-dl__v{
    text-align:end;
    font-size:12.5px;
    line-height:1.35 !important;
    min-width:0;
    overflow-wrap:anywhere;
  }
  /* الوصف/العنوان الطويل يفضل عمودي — الصف بيزنقه */
  .ks-dl__i--wide{ display:block; }
  .ks-dl__i--wide .ks-dl__k{ margin-bottom:3px !important; }
  .ks-dl__i--wide .ks-dl__v{ text-align:start; }

  /* الكروت المتتالية في شاشة العرض: حشوة وفواصل أقل */
  .ks-doc-view .ks-card{ margin-bottom:8px !important; }
  .ks-doc-view .ks-card__body{ padding:9px 11px; }
  .ks-doc-view .ks-card__head{ padding:8px 11px; }
  .ks-doc-view .ks-card__head h3{ font-size:13px; }

  /* 🪤 غلاف الجدول بيضيف حشوة وسكرول مالوش لزوم بعد ما الجدول بقى كروت */
  .ks-doc-view .table-responsive,
  .ks-doc-view .ks-table-wrap{
    overflow:visible !important;
    margin:0 !important;
    padding:0 !important;
  }
  /* كروت البنود جوّه شاشة العرض: آخر واحد بلا هامش سفلي ميّت */
  .ks-doc-view table.ks-cards > tbody > tr:last-child{ margin-bottom:0 !important; }
  .ks-doc-view table.ks-cards{ margin:0 !important; }

  /* الحاوية نفسها: حشوة جانبية أقل عشان الكروت تاخد عرض أكبر */
  .ks-doc-view.ks-page{ padding:10px !important; }

  /* ---------- ٣) زرار «البيانات الظاهرة» + ورقته السفلية ---------- */
  /* زرار «الأعمدة» بتاع ks-table.js بيتخفي — «البيانات الظاهرة» بيعمل نفس
     شغله والاتنين كانوا ظاهرين مع بعض. */
  .ks-tbl-ctl--cols{ display:none !important; }

  /* 🔴 `.ks-tbl-toolbar` (الشريط اللي `ks-table.js` بيعمله لوحده لما الصفحة
     مالهاش شريط) **مالهاش أي CSS** — فأبناؤها كانوا بيتراصوا عشوائي وكل زرار
     ياخد سطر (بلاغ المستخدم: «في المشتريات مش في سطر واحد»). */
  .ks-tbl-toolbar,
  .ks-tbl-actions{
    display:flex !important;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    margin-bottom:8px;
  }
  .ks-tbl-toolbar > *,
  .ks-tbl-actions > *{ flex:0 0 auto; margin:0 !important; }

  /* 🔴 قايمة select2 بتتقص جوّه الكارت: حاويات الفورم عندها `overflow:hidden`
     (للـborder-radius)، والقايمة بتترسم جوّه الحاوية فبتختفي عند الحافة
     (بلاغ المستخدم: «لما باجي أختار مورد المنيو بتختفي جوّه الكارت»).
     حاويات الفورم مالهاش محتوى بيفيض أصلاً، فـ`visible` آمنة عليها. */
  body.ks-scope .ks-card,
  body.ks-scope .ks-section,
  body.ks-scope .form-section,
  body.ks-scope .invoice-card,
  body.ks-scope .ks-filterbar{ overflow:visible !important; }

  /* 🔑 التصدير المكرر: اللي بيتخفي هو زرار **الصفحة** مش زرار ks-table —
     بتاع ks-table هو المربوط بالجدول وبيتعمّم (قرار المستخدم). الكشف
     والتعليم في ks-mobile-cards.js لأن مفيش اصطلاح لاسم زرار الصفحة. */
  [data-ks-dup-export]{ display:none !important; }

  .ks-mcols{ display:inline-flex; margin:0; }
  .ks-mcols__btn{
    display:inline-flex; align-items:center; gap:6px;
    min-height:38px; padding:8px 13px;
    border:1px solid var(--ks-line); border-radius:9px;
    background:var(--ks-surface); color:var(--ks-ink);
    font-size:12.5px; font-weight:700; cursor:pointer;
  }
  .ks-mcols__btn:active{ transform:translateY(1px); }

  .ks-mcols__backdrop{
    position:fixed; inset:0; z-index:var(--ks-z-modal, 1050);
    background:rgba(20,16,16,.45);
  }
  .ks-mcols__sheet{
    position:fixed; inset-inline:0; bottom:0;
    z-index:calc(var(--ks-z-modal, 1050) + 1);
    max-height:72vh; display:flex; flex-direction:column;
    border-start-start-radius:16px; border-start-end-radius:16px;
    /* 🔴 قيمة حرفية مصمتة مقصودة: الورقة بتطلع فوق محتوى الصفحة، وتوكن
       السطح ممكن يبقى شفّاف تحت المظهر الزجاجي ⇒ النص يتقرا من ورا. */
    background:#ffffff;
    box-shadow:0 -10px 34px rgba(30,25,25,.24);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .ks-mcols__head{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid var(--ks-line);
    font-size:14px;
  }
  .ks-mcols__x{
    border:0; background:none; font-size:18px; line-height:1;
    padding:6px 8px; cursor:pointer; color:var(--ks-muted);
  }
  .ks-mcols__list{ overflow-y:auto; padding:6px 8px; }
  .ks-mcols__row{
    display:flex; align-items:center; gap:10px;
    padding:11px 10px; margin:0; border-radius:8px;
    font-size:13.5px; cursor:pointer;
  }
  .ks-mcols__row:active{ background:var(--ks-surface-2); }
  .ks-mcols__row input{ width:18px; height:18px; flex:0 0 auto; }
  .ks-mcols__foot{ padding:12px 16px; border-top:1px solid var(--ks-line); }
  .ks-mcols__save{
    width:100%; min-height:44px;
    border:0; border-radius:10px;
    background:var(--ks-brand); color:#fff;
    font-size:13.5px; font-weight:800; cursor:pointer;
  }

  /* ================================================================
     🛡️ حارس نهائي: العمود اللي فيه جدول ياخد السطر كله
     ----------------------------------------------------------------
     الاستثناء الأصلي فوق تخصيصه **مساوي** لقاعدة الـ٥٠٪ (0,4,2) ومكتوب
     بعدها، فنظريًا المفروض يغلب — وقياس على الحيّ طلّع العكس:
       `colCls=[col-md-4] flex=0 0 50% maxW=50% rowDisp=flex rowGrid=null`
     يعني الحاوية flex والمحرك مالمسهاش، ومع ذلك قاعدة الـ٥٠٪ هي الغالبة.
     بدل المراهنة على حساب التخصيص، الحارس ده تخصيصه **(0,5,2)** — أعلى
     بوضوح — ومكتوب في آخر الكتلة، وبيغطّي مساري التخطيط (flex و grid).
     🔑 جدول الإجماليات وكارت المصاريف الإضافية كانوا بيتزنقوا في نص الشاشة
        والنص جوّاهم يتكسر حرف تحت حرف.
     ================================================================ */
  body.ks-scope .row > [class*="col-"][class*="col-"][class*="col-"]:has(table),
  body.ks-scope .row > [class*="col-"][class*="col-"][class*="col-"]:has(textarea),
  body.ks-scope [data-ks-grid] > *:has(table),
  body.ks-scope [data-ks-grid] > *:has(textarea){
    flex:0 0 100% !important;
    max-width:100% !important;
    width:100% !important;
    grid-column:1 / -1 !important;
  }
}

/* الزرار ده للموبايل بس — على الديسكتوب فيه زرار «الأعمدة» بتاع ks-table.js */
@media (min-width: 768px){
  .ks-mcols, .ks-mcols__sheet, .ks-mcols__backdrop{ display:none !important; }
}

/* ================================================================
   MAP MARKERS — ks-map.js (Leaflet + OpenStreetMap · ٤-١٠)
   الخرايط مجانية من غير مفتاح ولا فوترة. علامة برقم + نقطة ملوّنة.
   ================================================================ */
.ks-map-num-wrap{ background:transparent; border:0; }
.ks-map-num{ display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:13px;
  color:var(--ks-surface); font-weight:700; font-size:12px; line-height:1; border:2px solid var(--ks-surface); box-shadow:var(--ks-shadow-sm); }
.ks-map-dot{ display:block; width:16px; height:16px; border-radius:8px; border:2px solid var(--ks-surface); box-shadow:var(--ks-shadow-sm); }
.leaflet-container{ font-family:inherit; }