/* ══════════════════════════════════════════════════════════════════════════
   SHARKS — التوكنز · المصدر الوحيد للحقيقة
   ──────────────────────────────────────────────────────────────────────────
   الملف ده هو النقطه اللى كل اللوحات الخمسه بتاخد منها ألوانها ومقاساتها
   ومسافاتها: الأدمن · التاجر · البراند · المخازن · المسوّق.

   ليه اتعمل:
     قبل كده كان فيه ٤ نسخ من نفس القيم مكتوبه بالإيد فى ٤ ملفات
     (sharks-core.css · sharks-unified.css · sharks-wh-core.css ·
      sharks-profile.css)، وكل واحد بأسماء متغيّرات مختلفه. الملف بتاع
     التاجر كان مكتوب فى أوّله حرفيًا: «لو غيّرت حاجه هناك، غيّرها هنا —
     الملفين لازم يمشوا مع بعض». يعنى التوحيد كان مسؤوليّة بنى آدم يفتكر،
     وده بيقع أول مره حد ينسى.

   دلوقتى: القيمه بتتكتب هنا مره واحده. الملفات القديمه بقت تقرا منها
   عن طريق أسماء مستعاره (aliases) — فكل سطر CSS قديم لسه شغّال زى ما هو،
   بس بياخد لونه من هنا.

   الترتيب: الملف ده لازم يتحمّل **قبل** أى ملف sharks-* بتاع لوحه معيّنه.

   الوضع الغامق: `:root[data-theme="dark"]` فى كل اللوحات.
     لوحة المسوّق (قالب Cuba) بتستخدم كمان `body.dark-only` لأن ستايلات
     القالب نفسه معلّقه عليها — فالاتنين مدعومين هنا، والمفتاح بيحطّ
     الاتنين مع بعض.
   ══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════  ١) الخطوط  ═══════════════════════════════════════
   Archivo بيمسك الحروف اللاتينيه، والعربى بيقع تلقائيًا على
   IBM Plex Sans Arabic لإن Archivo مفيهوش حروف عربيه — المتصفح بيختار
   الخط لكل حرف لوحده. JetBrains Mono للأرقام عشان أعمدة الفلوس
   تترص فوق بعضها. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=JetBrains+Mono:wght@400..700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');


:root{

  /* ─── سلّم الخطوط ────────────────────────────────────────────────
     تسع درجات بتغطّى النظام كله. الجذر ١٦px فالنسب دى بالبكسل ثابته. */
  --fs-2xs :0.6875rem;   /* 11px — ليبلات ومايكرو */
  --fs-xs  :0.7500rem;   /* 12px — شارات، نص مساعد */
  --fs-sm  :0.8125rem;   /* 13px — نص الجداول */
  --fs-md  :0.8750rem;   /* 14px — نص الواجهه الأساسى */
  --fs-lg  :1.0000rem;   /* 16px — عناوين الكروت */
  --fs-xl  :1.1250rem;   /* 18px */
  --fs-2xl :1.2500rem;   /* 20px */
  --fs-3xl :1.5000rem;   /* 24px — أرقام الإحصائيات */
  --fs-4xl :1.7500rem;   /* 28px — عنوان الصفحه */

  /* ─── سلّم المسافات ──────────────────────────────────────────────
     كان فيه ١٧ قيمه مسافه مختلفه عبر اللوحات (من 4px لـ34px) من غير
     أى قاعده. تمن درجات بتغطّى كل حاله، والفرق بينهم واضح للعين. */
  --sp-1 :4px;
  --sp-2 :8px;
  --sp-3 :12px;
  --sp-4 :16px;
  --sp-5 :20px;
  --sp-6 :24px;
  --sp-7 :28px;
  --sp-8 :32px;
  --sp-9 :36px;
  --sp-10:40px;

  /* ─── الهندسه ────────────────────────────────────────────────── */
  --r    :4px;   /* الكروت والحقول */
  --r-sm :3px;   /* الأزرار الصغيره */
  --r-xs :2px;   /* الشارات */

  /* ─── الأسطح ─────────────────────────────────────────────────── */
  --paper :#F6F6F7;
  --paper2:#EFEFF1;
  --surf  :#FFFFFF;

  /* ─── النصوص ─────────────────────────────────────────────────────
     --mist عليه رؤوس الجداول وعناوين أقسام الدرج والنص الإرشادى ورساله
     «مفيش بيانات» — يعنى أكتر كلام محتاج يتقرا بسرعه. #6B6B73 أفتح قيمه
     بتعدّى نسبة تباين 4.5 على الأسطح التلاته (أسوأ حاله 4.60). */
  --ink  :#09090B;
  --slate:#52525B;
  --mist :#6B6B73;

  /* ─── الحدود — شعره ──────────────────────────────────────────── */
  --line :#E4E4E7;
  --line2:#D4D4D8;
  --sep  :rgba(106,113,133,.3);   /* الفاصل المتقطّع جوّه الكروت */

  /* ─── اللون النشط — إندجو، للحاله النشطه والبيانات والروابط ──── */
  --ind        :#4F46E5;
  --ind2       :#7C3AED;
  --ind-fill   :#4F46E5;
  --ind-fill-tx:#FFFFFF;
  --soft       :rgba(79,70,229,.06);
  --soft2      :rgba(79,70,229,.14);

  /* ─── الزرار الصلب — أسود فى الفاتح، أبيض فى الغامق ──────────── */
  --solid   :#09090B;
  --solid-tx:#FFFFFF;
  --solid-hv:#27272A;

  /* ─── الظلال — شبه معدومه. الحدود هى اللى بتفصل ──────────────── */
  --sh-sm  :0 1px 2px rgba(9,9,11,.04);
  --sh     :0 8px 24px rgba(9,9,11,.10);
  --sh-card:none;

  /* ─── الخطوط ─────────────────────────────────────────────────── */
  --f-ui :'Archivo','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-num:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ─── ألوان الحالات — نص وخلفيه خفيفه ────────────────────────── */
  --ok  :#16A34A;  --ok-bg  :rgba(22,163,74,.08);  --ok-br  :rgba(22,163,74,.24);  --ok-tx  :#15803D;
  --err :#DC2626;  --err-bg :rgba(220,38,38,.08);  --err-br :rgba(220,38,38,.24);  --err-tx :#B91C1C;
  --warn:#D97706;  --warn-bg:rgba(217,119,6,.08);  --warn-br:rgba(217,119,6,.24);  --warn-tx:#B45309;
  --info:#2563EB;

  /* ─── ألوان الحالات — خلفيه معبّاه بنص أبيض (لازم تفضل غامقه) ── */
  --ok-fill  :#15803D;
  --err-fill :#DC2626;
  --warn-fill:#B45309;
  --info-fill:#2563EB;
  --fill-tx  :#FFFFFF;

  /* ─── قيم الوضع الغامق — متكتوبه هنا **مره واحده** ─────────────────
     التوكنز دى مش بتتستعمل فى الفاتح. هى القيم الخام بتاعة الغامق،
     مرفوعه هنا عشان الوضع الغامق بقى ليه **تلات مداخل**:
         :root[data-theme="dark"]      اختيار صريح من المستخدم
         body.dark-only                هوك قالب Cuba (المسوّق)
         @media (prefers-color-scheme) الافتراضى من غير أى ختم
     التلاته بيقروا من هنا. لو القيمه اتكتبت جوّه كل مدخل كانت
     هتبقى تلات نسخ، وأول تعديل ينسى واحده يخلّى وضع غامق واحد غلط. */
  --d-paper     :#09090B;
  --d-paper2    :#161619;
  --d-surf      :#111113;
  --d-ink       :#FAFAFA;
  --d-slate     :#A1A1AA;
  --d-mist      :#82828C;
  --d-line      :#232326;
  --d-line2     :#34343A;
  --d-sep       :rgba(160,168,190,.28);
  --d-ind       :#8B85FF;
  --d-ind2      :#A78BFA;
  --d-ind-fill  :#4F46E5;
  --d-ind-fill-tx:#FFFFFF;
  --d-soft      :rgba(139,133,255,.10);
  --d-soft2     :rgba(139,133,255,.22);
  --d-solid     :#FAFAFA;
  --d-solid-tx  :#09090B;
  --d-solid-hv  :#E4E4E7;
  --d-sh-sm     :0 1px 2px rgba(0,0,0,.5);
  --d-sh        :0 8px 24px rgba(0,0,0,.6);
  --d-sh-card   :none;
  --d-ok        :#22C55E;
  --d-ok-bg     :rgba(34,197,94,.12);
  --d-ok-br     :rgba(34,197,94,.28);
  --d-ok-tx     :#4ADE80;
  --d-err       :#F87171;
  --d-err-bg    :rgba(248,113,113,.12);
  --d-err-br    :rgba(248,113,113,.28);
  --d-err-tx    :#FCA5A5;
  --d-warn      :#FBBF24;
  --d-warn-bg   :rgba(251,191,36,.12);
  --d-warn-br   :rgba(251,191,36,.28);
  --d-warn-tx   :#FCD34D;
  --d-info      :#60A5FA;
  --d-ok-fill   :#15803D;
  --d-err-fill  :#DC2626;
  --d-warn-fill :#B45309;
  --d-info-fill :#2563EB;
}


/* ═══════════════════  ٢) الوضع الغامق  ═════════════════════════════════
   المسوّق بيحطّ `body.dark-only` كمان لأن ستايلات قالب Cuba معلّقه عليها،
   فالمُحدِّدين الاتنين بيدّوا نفس القيم. */
:root[data-theme="dark"],
body.dark-only{

  --paper:var(--d-paper);
  --paper2:var(--d-paper2);
  --surf:var(--d-surf);

  /* نفس اعتبار التباين فى الغامق: #82828C بيوصّل 4.75 كأسوأ حاله
     وبيفضل أغمق من --slate فالتدرّج البصرى مبيضيعش. */
  --ink:var(--d-ink);
  --slate:var(--d-slate);
  --mist:var(--d-mist);

  --line:var(--d-line);
  --line2:var(--d-line2);
  --sep:var(--d-sep);

  --ind:var(--d-ind);
  --ind2:var(--d-ind2);
  --ind-fill:var(--d-ind-fill);
  --ind-fill-tx:var(--d-ind-fill-tx);
  --soft:var(--d-soft);
  --soft2:var(--d-soft2);

  /* فى الغامق الأبيض هو الأساسى بدل الأسود */
  --solid:var(--d-solid);
  --solid-tx:var(--d-solid-tx);
  --solid-hv:var(--d-solid-hv);

  --sh-sm:var(--d-sh-sm);
  --sh:var(--d-sh);
  --sh-card:var(--d-sh-card);

  --ok:var(--d-ok);  --ok-bg:var(--d-ok-bg);   --ok-br:var(--d-ok-br);   --ok-tx:var(--d-ok-tx);
  --err:var(--d-err);  --err-bg:var(--d-err-bg); --err-br:var(--d-err-br); --err-tx:var(--d-err-tx);
  --warn:var(--d-warn);  --warn-bg:var(--d-warn-bg);  --warn-br:var(--d-warn-br);  --warn-tx:var(--d-warn-tx);
  --info:var(--d-info);

  --ok-fill:var(--d-ok-fill);
  --err-fill:var(--d-err-fill);
  --warn-fill:var(--d-warn-fill);
  --info-fill:var(--d-info-fill);
}


/* ═══════════════════  ٣) الأسماء المستعاره  ════════════════════════════
   كل لوحه كانت بتسمّى نفس الحاجه باسم مختلف. بدل ما نروح نعدّل آلاف
   السطور فى الملفات القديمه، بنعرّف أسماءها هنا وبنخلّيها تشاور على
   التوكن الموحّد. النتيجه: سطر CSS قديم زى `color:var(--sk-ink)` لسه
   شغّال، بس بياخد لونه من `--ink` الموجود فوق.

   ⚠️ ماتحطّش قيمه ثابته فى الجزء ده — كله لازم يفضل var(). */
:root,
:root[data-theme="dark"],
body.dark-only{

  /* أسماء لوحة المسوّق (sharks-profile.css) */
  --sk-ink  :var(--ink);
  --sk-muted:var(--mist);
  --sk-line :var(--line);
  --sk-soft :var(--paper2);
  --sk-ok   :var(--ok-tx);
  --sk-warn :var(--warn-tx);

  /* أسماء لوحة المخازن (sharks-wh-*.css) */
  --bg  :var(--paper);   --bg2 :var(--surf);    --bg3 :var(--paper2);
  --brd :var(--line);    --brd2:var(--line2);
  --t   :var(--mist);    --t2  :var(--slate);   --t3  :var(--slate);
  --w   :var(--ink);
  --c   :var(--ind);     --c2  :var(--ind2);    --cd  :var(--ind);
  --glow:var(--soft);    --glow2:var(--soft2);

  --wh-r   :var(--r);    --wh-r-sm:var(--r-sm);  --wh-r-xs:var(--r-xs);
  --wh-f   :var(--f-ui); --wh-mono:var(--f-num);
  --wh-solid:var(--solid); --wh-solid-tx:var(--solid-tx); --wh-solid-hv:var(--solid-hv);

  --success-bg:var(--ok-bg);   --success-br:var(--ok-br);   --success-t:var(--ok-tx);
  --danger-bg :var(--err-bg);  --danger-br :var(--err-br);  --danger-t :var(--err-tx);
  --warn-t    :var(--warn-tx);
  --danger    :var(--err);
  --shadow-sm :var(--sh-sm);   --shadow-md :var(--sh);

  /* كسوة لوحة المخازن — الشريط العلوى والدرج.
     دى كانت معرّفه فى الوضع الغامق **بس** جوّه sharks-wh-core.css، لأن
     قالب المخازن معرّفهم #FFFFFF فى :root من غير نسخه غامقه. بما إنهم
     هنا بقوا var() فهما بيتبعوا الوضعين لوحدهم من غير تكرار. */
  --sidebar-bg:var(--surf);  --headerbg:var(--surf);  --nav-headbg:var(--surf);

  /* الشريط العلوى (sharks-wh-nav.css) */
  --nc :var(--ink);    --nc2 :var(--ind);
  --nbg:var(--surf);   --nbg2:var(--paper2);
  --nbrd:var(--line);  --nbrd2:var(--line2);
  --nt :var(--mist);   --nt2 :var(--slate);  --nt3:var(--slate);  --nw:var(--ink);

  /* الدرج (sharks-wh-sidebar.css) */
  --sc :var(--ink);    --sc2 :var(--ind);
  --sbg:var(--surf);   --sbg2:var(--paper2); --sbg3:var(--paper2);
  --sbrd:var(--line);  --sbrd2:var(--line2);
  --st :var(--mist);   --st2 :var(--slate);  --st3:var(--slate);  --sw:var(--ink);

  /* شاشة أوردرات المخازن (sharks-wh-orders.css) */
  --ord-bg   :var(--paper);   --ord-card    :var(--surf);   --ord-head:var(--paper2);
  --ord-border:var(--line);   --ord-border-2:var(--line2);
  --ord-text :var(--ink);     --ord-text-2  :var(--slate);  --ord-text-3:var(--mist);
  --ord-accent:var(--solid);  --ord-accent-2:var(--ind);    --ord-hover:var(--paper2);
  --ord-success-bg:var(--ok-bg);   --ord-success-text:var(--ok-tx);   --ord-success-br:var(--ok-br);
  --ord-warn-bg   :var(--warn-bg); --ord-warn-text   :var(--warn-tx); --ord-warn-br   :var(--warn-br);
  --ord-danger-bg :var(--err-bg);  --ord-danger-text :var(--err-tx);  --ord-danger-br :var(--err-br);
  --ord-shadow:var(--sh-sm);  --ord-radius:var(--r);

  /* رأس شاشة الأوردرات (sharks-wh-orders-header.css) */
  --hc  :var(--ind);    --hc2 :var(--ind);
  --hbg :var(--paper);  --hbg2:var(--surf);   --hbg3:var(--paper2);
  --hbrd:var(--line);   --hbrd2:var(--line2); --hglow:var(--soft);
  --ht  :var(--mist);   --ht2 :var(--slate);  --ht3 :var(--slate);  --hw:var(--ink);

  /* أسماء التاجر والبراند (sharks-unified.css) */
  --ind-tx:var(--ind-fill-tx);
  --mut-bg:var(--paper2);  --mut-br:var(--line);  --mut-tx:var(--mist);
  --tertiary:var(--slate);
  --r-btn :var(--r-sm);
  --sh-hover:var(--sh);
  --soft2-alias:var(--soft2);

  /* تدرّجات قديمه — اتشالت من التصميم بس لسه متساميه فى ملفات قديمه.
     بنخلّيها solid عشان الصفحات دى ما تفضلش بنفسجى مدرّج وسط تصميم حاد. */
  --grad    :var(--solid);
  --grad-btn:var(--solid);
  --g1:var(--ind);  --g2:var(--ind);  --g3:var(--ind);
}


/* ═══════════════════  ٤) الأكسنت — لون اللوحه  ═════════════════════════
   ──────────────────────────────────────────────────────────────────────
   كل لوحه ليها لون أساسى بتفتح عليه، وده اللى بيدّى لكل حساب هويّته من
   غير ما يبقى تصميم تانى: نفس المسافات ونفس المقاسات ونفس الكروت،
   اللون بس هو اللى بيفرق.

       المسوّق  إندجو      · الأدمن   برتقالى
       التاجر   تيل        · البراند  بنفسجى
       المخازن  مونوكروم   · المتجر   أزرق

   ─── إزاى بيشتغل ───────────────────────────────────────────────────────
   كل لوحه بتكتب **ستّ** قيم بس على `<html data-panel="...">`:

       --accent-l / --accent-d        اللون فى الفاتح / الغامق
       --accent-rgb-l / --accent-rgb-d   نفسه كـ«ر,خ,ز» عشان الشفافيات
       --accent2-l / --accent2-d      اللون التانى (تدرّجات ورسوم)
       --accent-tx-l / --accent-tx-d  لون النص فوقه لما يبقى معبّى

   وباقى الاشتقاقات (الخفيف · الحد · النص) بتتبنى منهم تحت. مبدّل الثيم
   بيغيّر نفس الستّ قيم دى inline على `<html>` — يعنى لون مخصّص من
   المستخدم بيمشى فى النظام كله بنفس الطريق، مفيش مسار تانى.

   ⚠️ ليه `--accent-rgb` منفصله؟ عشان `rgba()` مابتقبلش hex جوّه var().
      من غيرها كنّا هنحتاج `color-mix()` وهى مش مدعومه فى المتصفحات
      القديمه، والشفافيات دى مستعمله فى كل حاله hover فى النظام.

   ⚠️ الاشتقاقات مكرّره فى الفاتح والغامق **بالقصد**. الـcustom property
      بتتحلّ عند التعريف مش عند الاستعمال — يعنى لو كتبنا
      `--accent-soft:rgba(var(--accent-rgb),.07)` مره واحده فى `:root`،
      هتفضل بقيمة الفاتح حتى جوّه الغامق. لازم تتكتب فى المكانين.

   ⚠️ الألوان كلها من الدرجه ٧٠٠ عشان تعدّى تباين 4.5:1 على الأبيض.
      البرتقالى ٦٠٠ (`#EA580C`) بيدّى 3.66 — مايكفيش لنص صغير.
      ══════════════════════════════════════════════════════════════════ */

html{
  --accent-l:#4F46E5;  --accent-d:#8B85FF;
  --accent-rgb-l:79,70,229;  --accent-rgb-d:139,133,255;
  --accent2-l:#7C3AED;  --accent2-d:#A78BFA;
  --accent-tx-l:#FFFFFF;  --accent-tx-d:#09090B;
}

/* المسوّق — إندجو. ده الأصل اللى الباقى اتبنى عليه */
html[data-panel="marketer"]{
  --accent-l:#4F46E5;  --accent-d:#8B85FF;
  --accent-rgb-l:79,70,229;  --accent-rgb-d:139,133,255;
  --accent2-l:#7C3AED;  --accent2-d:#A78BFA;
  --accent-tx-l:#FFFFFF;  --accent-tx-d:#09090B;
}

/* الأدمن — برتقالى */
html[data-panel="admin"]{
  --accent-l:#C2410C;  --accent-d:#FB923C;
  --accent-rgb-l:194,65,12;  --accent-rgb-d:251,146,60;
  --accent2-l:#B45309;  --accent2-d:#FBBF24;
  --accent-tx-l:#FFFFFF;  --accent-tx-d:#09090B;
}

/* التاجر — تيل */
html[data-panel="merchant"]{
  --accent-l:#0F766E;  --accent-d:#2DD4BF;
  --accent-rgb-l:15,118,110;  --accent-rgb-d:45,212,191;
  --accent2-l:#0E7490;  --accent2-d:#22D3EE;
  --accent-tx-l:#FFFFFF;  --accent-tx-d:#09090B;
}

/* البراند — بنفسجى */
html[data-panel="brand"]{
  --accent-l:#7C3AED;  --accent-d:#C4B5FD;
  --accent-rgb-l:124,58,237;  --accent-rgb-d:196,181,253;
  --accent2-l:#A21CAF;  --accent2-d:#E879F9;
  --accent-tx-l:#FFFFFF;  --accent-tx-d:#09090B;
}

/* المخازن — مونوكروم أبيض/أسود. لوحة تشغيل، أهدى لون فى النظام */
html[data-panel="warehouse"]{
  --accent-l:#18181B;  --accent-d:#FAFAFA;
  --accent-rgb-l:24,24,27;  --accent-rgb-d:250,250,250;
  --accent2-l:#3F3F46;  --accent2-d:#D4D4D8;
  --accent-tx-l:#FFFFFF;  --accent-tx-d:#09090B;
}

/* المتجر — أزرق */
html[data-panel="store"]{
  --accent-l:#1D4ED8;  --accent-d:#60A5FA;
  --accent-rgb-l:29,78,216;  --accent-rgb-d:96,165,250;
  --accent2-l:#0284C7;  --accent2-d:#38BDF8;
  --accent-tx-l:#FFFFFF;  --accent-tx-d:#09090B;
}


/* ─── الاشتقاق: فاتح ─────────────────────────────────────────────────── */
:root{
  --accent      :var(--accent-l);
  --accent-2    :var(--accent2-l);
  --accent-rgb  :var(--accent-rgb-l);
  --accent-tx   :var(--accent-tx-l);
  --accent-soft :rgba(var(--accent-rgb-l),.07);
  --accent-soft2:rgba(var(--accent-rgb-l),.15);
  --accent-line :rgba(var(--accent-rgb-l),.30);
  --accent-ring :rgba(var(--accent-rgb-l),.22);
}

/* ─── الاشتقاق: غامق ─────────────────────────────────────────────────── */
:root[data-theme="dark"],
body.dark-only{
  --accent      :var(--accent-d);
  --accent-2    :var(--accent2-d);
  --accent-rgb  :var(--accent-rgb-d);
  --accent-tx   :var(--accent-tx-d);
  --accent-soft :rgba(var(--accent-rgb-d),.12);
  --accent-soft2:rgba(var(--accent-rgb-d),.22);
  --accent-line :rgba(var(--accent-rgb-d),.34);
  --accent-ring :rgba(var(--accent-rgb-d),.30);
}


/* ─── ربط الأكسنت بالتوكنز اللى النظام كله شغّال بيها ────────────────────
   `--ind` هى اللون النشط فى الملف ده، و`--c` و`--sc2` و`--theme-deafult`
   أسماء مستعاره ليها فى الأربع لوحات. لمّا نخلّى `--ind` نفسها بتقرا من
   `--accent`، كل سطر CSS فى النظام (وهو بالآلاف) بيتبع لون اللوحه من غير
   ما نلمسه. ده هو المكسب الأساسى من التوحيد اللى اتعمل قبل كده.

   الترتيب مهم: البلوك ده لازم يكون **بعد** بلوك الوضع الغامق فوق، لأن
   `:root[data-theme="dark"]` هناك بتكتب `--ind` بقيمه ثابته. */
:root,
:root[data-theme="dark"],
body.dark-only{
  --ind        :var(--accent);
  --ind2       :var(--accent-2);
  --ind-fill   :var(--accent);
  --ind-fill-tx:var(--accent-tx);
  --soft       :var(--accent-soft);
  --soft2      :var(--accent-soft2);

  /* أسماء قالب Cuba (لوحة المسوّق) — كانت مثبّته `#4F46E5 !important`
     جوّه <style> فى الـlayout، فاللوحه كانت بتفضل إندجو مهما اتغيّر. */
  --theme-deafult  :var(--accent);
  --theme-default  :var(--accent);
  --theme-primary  :var(--accent);
  --theme-secondary:var(--accent-2);
}


/* ═══════════════════  ٥) الكثافه والحواف  ══════════════════════════════
   خيارين فى مبدّل الثيم بيتحكموا فى نفس السلالم اللى فوق — مش فى قواعد
   منفصله. يعنى «مضغوط» بيصغّر المسافه فى النظام كله مره واحده.
   ══════════════════════════════════════════════════════════════════════ */

/* مضغوط — للشاشات اللى فيها جداول طويله (المخازن والأدمن) */
:root[data-density="compact"]{
  --sp-1 :3px;   --sp-2 :6px;   --sp-3 :9px;    --sp-4 :12px;
  --sp-5 :15px;  --sp-6 :18px;  --sp-7 :21px;   --sp-8 :24px;
  --sp-9 :27px;  --sp-10:30px;
}

/* مريح — مسافه أوسع، مفيد على الشاشات الكبيره */
:root[data-density="cozy"]{
  --sp-1 :5px;   --sp-2 :10px;  --sp-3 :15px;   --sp-4 :20px;
  --sp-5 :25px;  --sp-6 :30px;  --sp-7 :35px;   --sp-8 :40px;
  --sp-9 :45px;  --sp-10:50px;
}

:root[data-radius="sharp"]{ --r:0px;  --r-sm:0px; --r-xs:0px }
:root[data-radius="soft"] { --r:8px;  --r-sm:6px; --r-xs:4px }
:root[data-radius="round"]{ --r:14px; --r-sm:10px;--r-xs:6px }


/* ═══════════════════  ٦) نغمات الدرج  ══════════════════════════════════
   ──────────────────────────────────────────────────────────────────────
   ليه التوكنز دى موجوده أصلاً؟

   لأن **درج لوحة المسوّق سطحه مختلف عن سطح الصفحه**. قالب Cuba بيرسمه
   كحلى غامق `rgb(42,54,80)` حتى وإحنا فى الوضع الفاتح. باقى الأربع
   لوحات درجها أبيض زى الصفحه.

   يعنى أى لون نص بيتحسب على `--surf` بيبقى غلط جوّه درج المسوّق. جرّبنا:
   ربطنا عناوين أقسام الدرج بـ`--mist` (#6B6B73) — وهو لون سليم تمامًا
   على الأبيض (4.6:1) — فطلعت نسبته على الكحلى **1.84**، يعنى الأربع
   عناوين بقت شبه مختفيه.

   الحل مش إننا نسيب الدرج من غير توحيد، ولا إننا نغيّر خلفيته (ده كسر
   الدرج قبل كده لما قاعده حطّت عليه `--surf` وسابت النص أبيض فاختفى
   ٢١ عنصر). الحل إن الدرج يبقى ليه **نغماته هو**، محسوبه على سطحه هو.

   ⚠️ القاعده اللى مش بتتكسر: كل خلفيه بتتحط، يتحط معاها لون نصّها.
      البلوكات تحت مكتوبه أزواج بالقصد.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* الافتراضى — درج على نفس سطح الصفحه (الأدمن · التاجر · البراند · المخازن) */
  --side-mut    :var(--mist);          /* عناوين الأقسام */
  --side-on-bg  :var(--accent-soft);   /* خلفية البند النشط */
  --side-on-ink :var(--accent);        /* نصّه وأيقونته */
  --side-on-bar :var(--accent);        /* الشريط اللى على الحافه */
}

/* ⚠️ 2026-09-03: درج المسوّق بقى على سطح الصفحه (var(--surf)) زى باقى
   اللوحات — public/profile/css/sharks-mk-shell.css. البلوك اللى كان هنا
   (نغمات محسوبه على الكحلى rgb(42,54,80)) اتشال، والافتراضى فوق بقى
   بيشتغل على الست لوحات. لو حد رجّع الدرج غامق تانى، لازم يرجّع
   النغمات الأربعه معاه — الخلفيه لوحدها بتخفى القايمه. */


/* ═══════════════════  ٧) الوضع الغامق من غير ختم  ══════════════════════
   ──────────────────────────────────────────────────────────────────────
   للوضع الغامق تلات حالات، والتلاته لازم يشتغلوا:

     1. المستخدم اختار غامق   →  <html data-theme="dark">
     2. المستخدم اختار فاتح   →  <html data-theme="light">
     3. المستخدم ماختارش      →  مفيش ختم خالص، والنظام بيمشى ورا
                                 إعداد الجهاز نفسه

   الحاله التالته دى كانت **ناقصه**. الملف كان بيعرف `[data-theme="dark"]`
   بس، يعنى أى صفحه من غير الجافاسكريبت بتاع التمهيد (زى صفحات المعاينه
   والجاليرى) كانت بتفضل فاتحه على جهاز مضبوط غامق.

   المُحدِّد تحت بيستثنى الختمتين بالقصد: لو المستخدم اختار حاجه صريحه،
   اختياره بيغلب إعداد الجهاز فى الاتجاهين — مش بس فى اتجاه واحد.

   ⚠️ القيم هنا كلها var(--d-*) — مفيش ولا قيمه خام. القيم الخام مكتوبه
      مره واحده فى :root فوق. البلوك ده **ربط** مش تعريف.
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){

    --paper :var(--d-paper);   --paper2:var(--d-paper2);  --surf:var(--d-surf);
    --ink   :var(--d-ink);     --slate :var(--d-slate);   --mist:var(--d-mist);
    --line  :var(--d-line);    --line2 :var(--d-line2);   --sep :var(--d-sep);

    --ind        :var(--d-ind);        --ind2       :var(--d-ind2);
    --ind-fill   :var(--d-ind-fill);   --ind-fill-tx:var(--d-ind-fill-tx);
    --soft       :var(--d-soft);       --soft2      :var(--d-soft2);

    --solid   :var(--d-solid);  --solid-tx:var(--d-solid-tx);  --solid-hv:var(--d-solid-hv);
    --sh-sm   :var(--d-sh-sm);  --sh      :var(--d-sh);        --sh-card :var(--d-sh-card);

    --ok  :var(--d-ok);   --ok-bg  :var(--d-ok-bg);   --ok-br  :var(--d-ok-br);   --ok-tx  :var(--d-ok-tx);
    --err :var(--d-err);  --err-bg :var(--d-err-bg);  --err-br :var(--d-err-br);  --err-tx :var(--d-err-tx);
    --warn:var(--d-warn); --warn-bg:var(--d-warn-bg); --warn-br:var(--d-warn-br); --warn-tx:var(--d-warn-tx);
    --info:var(--d-info);

    --ok-fill:var(--d-ok-fill); --err-fill:var(--d-err-fill);
    --warn-fill:var(--d-warn-fill); --info-fill:var(--d-info-fill);

    /* اشتقاق الأكسنت — نفس اللى فى بلوك الغامق الصريح فوق */
    --accent      :var(--accent-d);
    --accent-2    :var(--accent2-d);
    --accent-rgb  :var(--accent-rgb-d);
    --accent-tx   :var(--accent-tx-d);
    --accent-soft :rgba(var(--accent-rgb-d),.12);
    --accent-soft2:rgba(var(--accent-rgb-d),.22);
    --accent-line :rgba(var(--accent-rgb-d),.34);
    --accent-ring :rgba(var(--accent-rgb-d),.30);

    /* وربط الأكسنت بالتوكنز — لازم يتعاد هنا لإن البلوك اللى فوق
       بيربطهم بـ :root وبـ [data-theme="dark"]، والحاله دى لا دى ولا دى */
    --ind        :var(--accent);
    --ind2       :var(--accent-2);
    --ind-fill   :var(--accent);
    --ind-fill-tx:var(--accent-tx);
    --soft       :var(--accent-soft);
    --soft2      :var(--accent-soft2);
    --theme-deafult:var(--accent);  --theme-default:var(--accent);
    --theme-primary:var(--accent);  --theme-secondary:var(--accent-2);
  }
}


/* ═══════════════════  ٨) توكنز ناقصه من المواصفه  ══════════════════════
   الطبقات · أوزان الخط · الظل الكبير. كانت مكتوبه أرقام صريحه جوّه
   الكومبوننتس، فأى مودال جديد كان بيتخانق مع التوست على z-index.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* الطبقات — سلّم واحد، الترتيب بينهم هو اللى مهم مش الرقم */
  --z-base    :0;
  --z-sticky  :100;   /* رأس الجدول المثبّت · العمود المجمّد */
  --z-dropdown:300;
  --z-overlay :400;   /* الطبقه السوده ورا المودال */
  --z-modal   :500;
  --z-toast   :700;   /* فوق المودال بالقصد — التوست بيبلّغ عن نتيجة فعل جوّه المودال */

  /* أوزان الخط */
  --fw-regular :400;
  --fw-medium  :500;
  --fw-semibold:600;
  --fw-bold    :700;

  /* الظل الكبير — للمودال والدروبداون */
  --sh-lg:0 16px 48px rgba(9,9,11,.18);

  /* نصف قطر «كامل» — للشارات الداير والأفاتار */
  --r-full:999px;
}
:root[data-theme="dark"], body.dark-only{ --sh-lg:0 16px 48px rgba(0,0,0,.7) }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){ --sh-lg:0 16px 48px rgba(0,0,0,.7) }
}


/* ═══════════════════  ٩) ألوان حالات الأوردر  ══════════════════════════
   ──────────────────────────────────────────────────────────────────────
   دى الحاجه اللى المواصفه بتقول عليها «توكن واحد لكل حاله، متعرّف مره
   واحده». وهى **مش** كانت موجوده.

   اللى كان موجود: `App\OrderStatus::$map` فيه عمود `color` بيدّى اسم
   كلاس بوتستراب — `success` · `danger` · `primary` · `secondary`.
   والمشكله إن ده مش لون، ده **إحاله** للون. وكل لوحه عندها نسخة بوتستراب
   مختلفه، فنفس الحاله بتطلع بلون مختلف حسب اللوحه اللى انت فيها.

   وأخطر من كده: `primary` فى النظام ده مربوط بلون اللوحه (--accent)،
   واللون ده **بيتغيّر من المستخدم** من مبدّل المظهر. يعنى «تم الشحن»
   كانت بتقلب بنفسجى أو برتقالى أو تيل حسب اللون اللى المستخدم اختاره.
   حالة الأوردر مش ديكور — لازم تفضل ثابته مهما اتلوّنت اللوحه.

   فالتوكنز تحت **مالهاش أى علاقه بـ--accent**. كل حاله ليها تلات قيم
   (خلفيه · حد · نص)، معرّفه هنا وبس، وبتتبع الفاتح والغامق لوحدها.

   ⚠️ اللون لوحده ممنوع يكون الإشاره الوحيده. كومبوننت الشاره بيحطّ
      أيقونه ونص جنب اللون دايمًا — شوف sharks-ui.css.

   ⚠️ الأرقام هى نفسها أرقام App\OrderStatus الثابته للأبد. الحالات
      الحيّه فى الداتا النهارده: 0·1·2·4·6·7·8·10·11·12·13·14 —
      و٣·٥·٩ معرّفين برضه لإن الكود بيقدر يوصلهم.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* المجموعات اللونيه — كل حاله بتتربط بواحده منهم تحت */
  --st-neutral-bg:#F1F1F3;  --st-neutral-br:#D9D9DE;  --st-neutral-tx:#3F3F46;
  --st-blue-bg   :#E6EEFB;  --st-blue-br   :#BFD5F2;  --st-blue-tx   :#1D4ED8;
  --st-violet-bg :#EEE9FD;  --st-violet-br :#D3C5FA;  --st-violet-tx :#6D28D9;
  --st-amber-bg  :#FBF0DC;  --st-amber-br  :#EBD5A4;  --st-amber-tx  :#92400E;
  --st-red-bg    :#FBE9E7;  --st-red-br    :#F0C4BE;  --st-red-tx    :#B91C1C;
  --st-green-bg  :#E4F1E9;  --st-green-br  :#BEDACB;  --st-green-tx  :#15803D;
  --st-teal-bg   :#E0F0EF;  --st-teal-br   :#B7D9D6;  --st-teal-tx   :#0F766E;
}

/* نفس المجموعات فى الغامق — القيم مرفوعه فى --dst-* عشان تتكتب مره واحده */
:root{
  --dst-neutral-bg:#1F1F24;  --dst-neutral-br:#33333A;  --dst-neutral-tx:#C4C4CC;
  --dst-blue-bg   :#101E33;  --dst-blue-br   :#1E3A5F;  --dst-blue-tx   :#8FBAF5;
  --dst-violet-bg :#1B1330;  --dst-violet-br :#372459;  --dst-violet-tx :#BFA6FB;
  --dst-amber-bg  :#2A1F0C;  --dst-amber-br  :#4C3814;  --dst-amber-tx  :#F0C471;
  --dst-red-bg    :#2C1512;  --dst-red-br    :#4E241E;  --dst-red-tx    :#F0998C;
  --dst-green-bg  :#102319;  --dst-green-br  :#1E4331;  --dst-green-tx  :#7ECBA1;
  --dst-teal-bg   :#0D2222;  --dst-teal-br   :#1A4140;  --dst-teal-tx   :#6FC9C2;
}
:root[data-theme="dark"], body.dark-only{
  --st-neutral-bg:var(--dst-neutral-bg); --st-neutral-br:var(--dst-neutral-br); --st-neutral-tx:var(--dst-neutral-tx);
  --st-blue-bg   :var(--dst-blue-bg);    --st-blue-br   :var(--dst-blue-br);    --st-blue-tx   :var(--dst-blue-tx);
  --st-violet-bg :var(--dst-violet-bg);  --st-violet-br :var(--dst-violet-br);  --st-violet-tx :var(--dst-violet-tx);
  --st-amber-bg  :var(--dst-amber-bg);   --st-amber-br  :var(--dst-amber-br);   --st-amber-tx  :var(--dst-amber-tx);
  --st-red-bg    :var(--dst-red-bg);     --st-red-br    :var(--dst-red-br);     --st-red-tx    :var(--dst-red-tx);
  --st-green-bg  :var(--dst-green-bg);   --st-green-br  :var(--dst-green-br);   --st-green-tx  :var(--dst-green-tx);
  --st-teal-bg   :var(--dst-teal-bg);    --st-teal-br   :var(--dst-teal-br);    --st-teal-tx   :var(--dst-teal-tx);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --st-neutral-bg:var(--dst-neutral-bg); --st-neutral-br:var(--dst-neutral-br); --st-neutral-tx:var(--dst-neutral-tx);
    --st-blue-bg   :var(--dst-blue-bg);    --st-blue-br   :var(--dst-blue-br);    --st-blue-tx   :var(--dst-blue-tx);
    --st-violet-bg :var(--dst-violet-bg);  --st-violet-br :var(--dst-violet-br);  --st-violet-tx :var(--dst-violet-tx);
    --st-amber-bg  :var(--dst-amber-bg);   --st-amber-br  :var(--dst-amber-br);   --st-amber-tx  :var(--dst-amber-tx);
    --st-red-bg    :var(--dst-red-bg);     --st-red-br    :var(--dst-red-br);     --st-red-tx    :var(--dst-red-tx);
    --st-green-bg  :var(--dst-green-bg);   --st-green-br  :var(--dst-green-br);   --st-green-tx  :var(--dst-green-tx);
    --st-teal-bg   :var(--dst-teal-bg);    --st-teal-br   :var(--dst-teal-br);    --st-teal-tx   :var(--dst-teal-tx);
  }
}

/* ─── توكن لكل حاله ───────────────────────────────────────────────────
   السطر ده هو المكان الوحيد اللى بيتقرّر فيه لون حاله. تلات قيم لكل
   حاله، بتتبع الفاتح والغامق من نفسها لإنها بتقرا من المجموعات فوق.

   الترجمه من الأرقام (App\OrderStatus — الأرقام ثابته للأبد):
     0  جديد            رمادى    لسه ماتعملش عليه حاجه
     1  مؤكد            أزرق     شغّال
     2  قيد الاختبار    بنفسجى   مش أوردر حقيقى — لازم يتميّز عن الشغل
     3  جارى التعبئة    كهرمانى  شغل فى المخزن
     4  تم الشحن        أزرق     مع الكوريير
     5  فى الانتظار     كهرمانى  متعلّق
     6  لا يرد          أحمر     محتاج تدخّل
     7  ملغى            أحمر     نهايه ميته
     8  تم التوصيل      أخضر     بيعه
     9  توصيل جزئى      تيل      بيعه بس ناقصه — مش نفس لون الكامله
     10 مكتمل           أخضر     بيعه مقفوله
     11 مرتجع           أحمر     نهايه ميته
     12 طلب إرجاع       كهرمانى  متعلّق
     13 قيد التعديل     رمادى    موقوف
     14 استبدال         تيل      شغّال بس مش مسار عادى

   ⚠️ ولا واحد فيهم بيقرا --accent. لون اللوحه بيتغيّر من المستخدم؛
      حالة الأوردر لأ. */
:root{
  --st-0-bg :var(--st-neutral-bg); --st-0-br :var(--st-neutral-br); --st-0-tx :var(--st-neutral-tx);
  --st-1-bg :var(--st-blue-bg);    --st-1-br :var(--st-blue-br);    --st-1-tx :var(--st-blue-tx);
  --st-2-bg :var(--st-violet-bg);  --st-2-br :var(--st-violet-br);  --st-2-tx :var(--st-violet-tx);
  --st-3-bg :var(--st-amber-bg);   --st-3-br :var(--st-amber-br);   --st-3-tx :var(--st-amber-tx);
  --st-4-bg :var(--st-blue-bg);    --st-4-br :var(--st-blue-br);    --st-4-tx :var(--st-blue-tx);
  --st-5-bg :var(--st-amber-bg);   --st-5-br :var(--st-amber-br);   --st-5-tx :var(--st-amber-tx);
  --st-6-bg :var(--st-red-bg);     --st-6-br :var(--st-red-br);     --st-6-tx :var(--st-red-tx);
  --st-7-bg :var(--st-red-bg);     --st-7-br :var(--st-red-br);     --st-7-tx :var(--st-red-tx);
  --st-8-bg :var(--st-green-bg);   --st-8-br :var(--st-green-br);   --st-8-tx :var(--st-green-tx);
  --st-9-bg :var(--st-teal-bg);    --st-9-br :var(--st-teal-br);    --st-9-tx :var(--st-teal-tx);
  --st-10-bg:var(--st-green-bg);   --st-10-br:var(--st-green-br);   --st-10-tx:var(--st-green-tx);
  --st-11-bg:var(--st-red-bg);     --st-11-br:var(--st-red-br);     --st-11-tx:var(--st-red-tx);
  --st-12-bg:var(--st-amber-bg);   --st-12-br:var(--st-amber-br);   --st-12-tx:var(--st-amber-tx);
  --st-13-bg:var(--st-neutral-bg); --st-13-br:var(--st-neutral-br); --st-13-tx:var(--st-neutral-tx);
  --st-14-bg:var(--st-teal-bg);    --st-14-br:var(--st-teal-br);    --st-14-tx:var(--st-teal-tx);
  /* حاله مش معروفه — بتحصل لو رقم غريب دخل الداتا. بتبان رمادى وبتقول كده */
  --st-x-bg :var(--st-neutral-bg); --st-x-br :var(--st-neutral-br); --st-x-tx :var(--st-neutral-tx);
}


/* ═══════════════════  ١٠) هويّة البراند — بتيجى من الإعدادات  ═══════════
   ──────────────────────────────────────────────────────────────────────
   القرار: `config/sharks.php` هو المصدر الوحيد للهويّه. (DEC-UI-001 —
   السبب مكتوب بالكامل فى أول config/sharks.php.)

   الملف ده **مابيقرّرش** لون البراند. بيحطّ قيمه احتياطيه بس، عشان
   الصفحه ما تفضلش من غير لون لو القالب ماحقنش الإعدادات. القيمه اللى
   بتشتغل فعلاً بتتحقن على <html> من
   resources/views/partials/brand-vars.blade.php، وهو بيقراها من
   Sharks::brand('colors.*').

   ⚠️ القيم الاحتياطيه تحت مساويه للمقاس الحالى فى config/sharks.php
      (SHARKS: #09090B · #27272A · #E4E4E7). لو اتغيّرت هناك، الحقن
      بيغلبها هنا — فمفيش حاجه بتتكسر، بس سيبها متطابقه عشان الصفحه
      الساكنه (الجاليرى) تفضل صح.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --brand-primary:var(--brand-primary-cfg, #09090B);
  --brand-hover  :var(--brand-hover-cfg,   #27272A);
  --brand-subtle :var(--brand-subtle-cfg,  #E4E4E7);
}
:root[data-theme="dark"], body.dark-only{
  --brand-primary:var(--brand-primary-dark-cfg, #FAFAFA);
  --brand-hover  :var(--brand-hover-dark-cfg,   #E4E4E7);
  --brand-subtle :var(--brand-subtle-dark-cfg,  #27272A);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --brand-primary:var(--brand-primary-dark-cfg, #FAFAFA);
    --brand-hover  :var(--brand-hover-dark-cfg,   #E4E4E7);
    --brand-subtle :var(--brand-subtle-dark-cfg,  #27272A);
  }
}


/* ═══════════════════  ٨) إيقاع المسافه — علاقه واحده، قيمه واحده  ══════
   ──────────────────────────────────────────────────────────────────────
   السلّم اللى فوق (--sp-1..--sp-10) بيقول **إيه القيم المسموحه**.
   القسم ده بيقول **أنهى قيمه لأنهى علاقه** — وده اللى كان ناقص.

   قبل ده كان فيه ٤٧ قيمه مسافه حرفيه مختلفه فى الـCSS بتاع اللوحات
   (637 استعمال). نفس العلاقه — «من الليبل للحقل» مثلاً — كانت مكتوبه
   4px فى الأدمن و6px فى المسوّق و9px فى المخازن، مش لأن حد قرّر، لكن
   لأن مفيش اسم للعلاقه دى يتكتب.

   القاعده: أى كومبوننت بيكتب `var(--gap-label)` مش `var(--sp-1)`،
   وبالتأكيد مش `4px`. لو العلاقه اتغيّرت، بتتغيّر من هنا فى النظام كله.

   ⚠️ الكثافه — مواصفة sharks-ui-system §4:
      «الأدمن والماليّه كثيفين؛ المخازن واسعه بأهداف لمس كبيره.»
      يعنى **ممنوع** تحطّ كثافه واحده على الاتنين. تلات مستويات هنا:

        مضغوط  html[data-panel="admin"]  +  .sk-dense (شاشات الماليّه)
        مريح   الافتراضى — المسوّق · التاجر · البراند
        واسع   html[data-panel="warehouse"]

   ⚠️ الارتفاعات مش مسافات. --h-control بيتحسب من الحشوه:
      (حشوه فوق + حشوه تحت + سطر واحد). يعنى ارتفاع الزرار والحقل
      بيتبع الإيقاع أوتوماتيك بدل ما يبقى رقم تالت مستقل — وفى المخازن
      الحساب بيطلّع **44px بالظبط**، وهو الحدّ الأدنى لهدف اللمس.
      مش صدفه: --pad-btn-y فى المخازن اتظبط عشان يطلّعه.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* سطر واحد جوّه أى تحكّم — الأساس اللى الارتفاعات بتتحسب عليه */
  --lh-control  :1.25rem;   /* 20px */

  /* ── مريح — الافتراضى: المسوّق · التاجر · البراند ── */
  --pad-page-y  :var(--sp-4);
  --pad-page-x  :var(--sp-4);
  --gap-section :var(--sp-5);
  --pad-card    :var(--sp-4);
  --gap-card    :var(--sp-3);
  --gap-grid    :var(--sp-3);
  --gap-formrow :var(--sp-3);
  --gap-label   :var(--sp-1);
  --gap-icon    :var(--sp-2);
  --gap-inline  :var(--sp-2);   /* بين عناصر مترّصه فى سطر (أزرار، شارات) */
  --pad-cell-y  :var(--sp-2);
  --pad-cell-x  :var(--sp-3);
  --pad-btn-y   :var(--sp-2);
  --pad-btn-x   :var(--sp-4);
  --pad-chip-x  :var(--sp-2);
  --icon        :16px;
  --tap         :36px;

  /* مشتقّه — مش قيم جديده */
  --h-control   :calc(var(--pad-btn-y) * 2 + var(--lh-control) + 2px);
  /* الشاره والشيب — ارتفاع واحد فى النظام كله. مبنى من نفس السلّم:
     سطر صغيّر + درجه واحده حشوه من فوق وتحت. */
  --h-chip      :calc(var(--sp-1) * 2 + var(--fs-xs) * 1.6);

  /* ── مقاسات تخطيط — مش إيقاع ─────────────────────────────────
     دى مش على سلّم الـ4px ولا المفروض تكون: عرض الدرج بيتحدد من أطول
     اسم فى القايمه، مش من إيقاع الصفحه. بس لازم يبقى ليه **اسم واحد**،
     لإنه بيتكرّر فى إزاحة المحتوى وإزاحة الشريط العلوى وإزاحة الفوتر —
     وأى تعديل بينسى واحده فيهم بيسيب فجوه أو تراكب. */
  --w-drawer      :248px;         /* الأدمن · التاجر · البراند */
  --w-drawer-wh   :20.563rem;     /* المخازن — قالب Jobick */
  --w-drawer-mini :174px;         /* الأدمن وهو مطوى */
  --h-topbar      :70px;          /* ارتفاع الشريط العلوى — الأدمن */

  /* لون التظليل ورا الدرج والحواريّات — نفس القيمه فى الوضعين
     بالقصد: التظليل بيعتم اللى تحته، ومابيتلوّنش مع الثيم. */
  --scrim         :rgba(9,9,11,.5);
  --gap-menu    :var(--sp-1);   /* بين بنود نفس المجموعه فى الدرج */
  --gap-menugrp :var(--sp-5);   /* بين مجموعتين — ده اللى بيغنى عن الفواصل */
}

/* ── مضغوط — الأدمن والماليّه، والمسوّق من 2026-09-03 (طلب صريح:
   الشكل يميل للصغر؛ الشاشه بتاعته جداول وكروت كتير وكانت بتلفّ) ── */
html[data-panel="admin"],
html[data-panel="marketer"],
.sk-dense{
  --pad-page-y  :var(--sp-3);
  --gap-section :var(--sp-4);
  --pad-card    :var(--sp-3);
  --gap-card    :var(--sp-2);
  --gap-grid    :var(--sp-2);
  --pad-btn-x   :var(--sp-3);
}

/* ── واسع — المخازن. أهداف لمس ٤٤px، شاشه بتتشغّل بإيد واحده ───────── */
html[data-panel="warehouse"]{
  --pad-page-y  :var(--sp-5);
  --pad-page-x  :var(--sp-5);
  --gap-section :var(--sp-6);
  --pad-card    :var(--sp-5);
  --gap-card    :var(--sp-4);
  --gap-grid    :var(--sp-4);
  --gap-formrow :var(--sp-4);
  --gap-label   :var(--sp-2);
  --gap-icon    :var(--sp-3);
  --gap-inline  :var(--sp-3);
  --pad-cell-y  :var(--sp-3);
  --pad-cell-x  :var(--sp-4);
  --pad-btn-y   :var(--sp-3);   /* 12 → --h-control = 12*2+20+2 = 46 ≥ 44 */
  --pad-btn-x   :var(--sp-5);
  --icon        :20px;
  --tap         :44px;
}

/* أى جهاز باللمس بياخد الحدّ الأدنى، حتى فى اللوحات المضغوطه —
   الماوس بيدوس على ٤px، الصباع لأ. */
@media (pointer:coarse){
  :root{ --tap:44px }
}

/* على الموبايل الصفحه بتضيق فحشوتها بتنزل درجه واحده — مش قيمه جديده،
   نفس السلّم بدرجه أقل. */
@media (max-width:767.98px){
  :root{
    --pad-page-x :var(--sp-3);
    --pad-page-y :var(--sp-3);
    --gap-section:var(--sp-4);
  }
  html[data-panel="warehouse"]{
    --pad-page-x :var(--sp-4);
    --pad-page-y :var(--sp-4);
    --gap-section:var(--sp-5);
  }
}