/* ==========================================================================
   مقام | MAQAAM — ملف الرموز (Design Tokens)
   الإصدار 3.0 — لوحة واحدة معتمدة: الحبر البروسي على ورق
   ==========================================================================
   قاعدة ملزمة: لا يُكتب لون ولا مسافة ولا حجم خط داخل أي مكوّن أو شاشة.
   الخطوط:
   https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;700
   &family=IBM+Plex+Sans:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500
   ========================================================================== */

/* ══ الجزء الأول: اللوحة المعتمدة — الحبر البروسي ══════════════════════════
   المرجع: الرسم الهندسي على الورق — حبر داكن وملاحظات مراجعة بالأحمر.
   قاعدة: لا درجة زرقاء ساطعة ولا مشبعة في هذه اللوحة إطلاقاً. */
:root {
  --color-primary:     #16264F;   /* حبر بروسي — 13.7:1 على الخلفية ✓
                                     داكن ومكتوم عمداً: يُقرأ حبراً على ورق لا أزرق علامة تجارية.
                                     ممنوع رفع سطوعه أو تشبّعه في أي مكوّن. */
  --color-surface:     #F3EEE6;   /* ورق كتّاني — الحبر عليه 13.4:1 ✓
                                     دافئ عن قصد: الورق البارد كان يقرأ كلوحة تحكّم لا كوثيقة. */
  --color-accent:      #B3261E;   /* أحمر التصحيح — 6.1:1 ✓ إشاري فقط */

  --color-primary-rgb: 22 38 79;
  --color-surface-rgb: 243 238 230;
  --color-accent-rgb:  179 38 30;

  /* الأحمر يجتاز 4.5:1 نصّاً على هذه الخلفية ⇐ لا حاجة لدرجة مظللة */
  --color-accent-text: var(--color-accent);          /* 6.1:1 ✓ */

  /* ألوان الدلالة — ثلاث، في مؤشر السعر وحده */
  --signal-under:  var(--color-primary);             /* أقل من السوق — حبر بروسي 13.7:1 ✓ */
  --signal-within: var(--color-primary-48);          /* ضمن السوق — نقطة محايدة */
  --signal-over:   var(--color-accent);              /* أعلى من السوق — أحمر التصحيح 6.1:1 ✓ */
  --signal-none:   var(--color-primary-48);          /* بيانات غير كافية */
}

/* ══ الجزء الثاني: بقية النظام ════════════════════════════════════════════ */
:root {

  /* ── المحايدات — مشتقة من اللون الأساسي بالشفافية فقط ──────────────── */
  /* النص الثانوي من الحبر نفسه — يبقى بارداً لأنه نص، وتباينه أهم من دفئه. */
  --color-primary-72: rgb(var(--color-primary-rgb) / 72%);  /* نص ثانوي — 6.0:1 ✓ */

  /* الحدود والأيقونات والتظليل من بنّي رمادي لا من الحبر:
     الحدّ الشعري يظهر مئات المرات في الشاشة، فبرودته هي برود الموقع كله.
     المصدر 74 59 42 — ظلّ الحبر على ورق كتّاني، لا لون رابع في اللوحة. */
  --color-neutral-rgb: 74 59 42;
  --color-primary-48: rgb(var(--color-neutral-rgb) / 54%);  /* أيقونات ومعطّل — لا نص */
  --color-primary-24: rgb(var(--color-neutral-rgb) / 26%);  /* حد بارز · مسار المقياس */
  --color-primary-12: rgb(var(--color-neutral-rgb) / 14%);  /* الحد الشعري · الفواصل · هيكل التحميل */
  --color-primary-06: rgb(var(--color-neutral-rgb) / 7%);   /* تظليل التمرير */

  /* ── الأسطح ────────────────────────────────────────────────────────── */
  --surface-page:     var(--color-surface);
  --surface-raised:   rgb(255 255 255 / 46%);        /* بطاقة مرفوعة — إشراق الخلفية نفسها */
  --surface-sunken:   var(--color-primary-06);       /* حقل إدخال · خانة صورة */
  --surface-inverse:  var(--color-primary);          /* الترويسة · التذييل · الزر الأساسي */
  --on-inverse:       var(--color-surface);          /* أ 9.5:1 · ب 15.0:1 ✓ */
  --on-inverse-muted: rgb(var(--color-surface-rgb) / 76%);
  --on-accent:        var(--color-surface);          /* أ 6.1:1 · ب 5.4:1 ✓ */

  /* حقل إدخال على سطح عكسي: لا يُبنى على --surface-page لأن هذا اللون
     ينقلب في الليل إلى حبرٍ عميق فيختفي الحقل داخل الترويسة الداكنة.
     يُبنى على الكتّاني نفسه بشفافية، فيبقى مضيئاً في الوضعين. */
  --field-on-inverse:      var(--color-surface);
  --field-on-inverse-text: var(--color-primary-48);

  /* ── النص ──────────────────────────────────────────────────────────── */
  --text-primary:   var(--color-primary);
  --text-secondary: var(--color-primary-72);
  --text-disabled:  var(--color-primary-48);
  --text-accent:    var(--color-accent-text);
  --text-on-accent: var(--on-accent);

  /* قاعدة: لون التمييز إشارة بمساحة صغيرة — ولا يُستعمل في زر أساسي إطلاقاً.
     الزر الأساسي = --surface-inverse دائماً. */

  /* ── الخطوط ────────────────────────────────────────────────────────── */
  --font-ar:   "IBM Plex Sans Arabic", "Almarai", system-ui, sans-serif;
  --font-num:  "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   28px;
  --text-2xl:  40px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  --leading-tight: 1.25;
  --leading-snug:  1.45;
  --leading-body:  1.7;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-label:  0.02em;

  --numeric-tabular: tabular-nums lining-nums;
  --numeric-slashed: tabular-nums lining-nums slashed-zero;

  --measure-prose: 68ch;

  /* ── المسافات ──────────────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* ── الأشكال والحدود والظل ─────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-full: 999px;

  --border-hairline: 1px solid var(--color-primary-12);
  --border-strong:   1px solid var(--color-primary-24);
  --border-accent:   1px solid var(--color-accent);
  /* خلفية إشارية للأحمر — للرقاقات والشارات وحدها، لا للمساحات.
     12% تكفي لتمييز الرقاقة ويبقى نصّها الأحمر عليها فوق 4.5:1. */
  --accent-tint:     rgb(var(--color-accent-rgb) / 12%);
  --rule-width: 1px;

  /* طبقة الطفو فوق الخريطة والحوارات: أقوى من البطاقة لأن ما تحتها
     صورة لا ورق — الظلّ هو ما يفصل الطبقتين حين لا يفصلهما لون. */
  --shadow-overlay: 0 4px 16px rgb(var(--color-primary-rgb) / 18%);
  --shadow-raised: 0 1px 2px rgb(var(--color-primary-rgb) / 8%);

  /* ── التركيز ───────────────────────────────────────────────────────── */
  --focus-color:  var(--color-accent);
  --focus-width:  2px;
  --focus-offset: 2px;
  --focus-ring:   var(--focus-width) solid var(--focus-color);

  /* ── الحالات ───────────────────────────────────────────────────────── */
  --state-hover-tint:   var(--color-primary-06);
  --state-pressed-tint: var(--color-primary-12);
  --primary-hover:   color-mix(in srgb, var(--color-primary) 88%, var(--color-surface));
  --primary-pressed: color-mix(in srgb, var(--color-primary) 76%, var(--color-surface));
  --accent-hover:    color-mix(in srgb, var(--color-accent) 88%, var(--color-primary));
  --accent-pressed:  color-mix(in srgb, var(--color-accent) 76%, var(--color-primary));
  --disabled-fg: var(--color-primary-48);
  --disabled-bg: var(--color-primary-12);
  --skeleton-bg: var(--color-primary-12);

  /* ── المقاسات والتخطيط ─────────────────────────────────────────────── */
  --tap-min:        48px;
  /* مربّع سهم المعرض: المرئي 29px والملموس 48px حوله شفافاً — الحجم
     البصري ينزل إلى 60% دون أن ينزل هدف اللمس تحت الحد. */
  --gallery-nav-size: 29px;
  --control-height: 48px;
  --control-height-sm: 32px;
  /* إزاحات بصرية دقيقة: محاذاة أيقونة على خطّ الأساس وما شابه. ليست
     مسافات تخطيط — لا تُستعمل في padding ولا gap بين عناصر. */
  --nudge-1:        2px;
  --nudge-2:        3px;
  --nudge-3:        4px;
  --nudge-4:        6px;

  /* أصغر من xs: للرمز المصنَّف والشارة داخل شارة وحدها. */
  --text-2xs:       11px;

  /* طبقة تمييز على السطح المعكوس: الحبر لا يقبل tint الورق. */
  --state-hover-inverse: rgb(255 255 255 / 10%);

  --header-height:  56px;
  --gutter:         var(--space-3);
  --gutter-lg:      var(--space-5);
  --page-max:       1200px;
  --card-max:       360px;

  /* ثلاث نقاط كسر لا غيرها: 360 (الهاتف، العرض المرجعي) · 768 (اللوحي)
     · 1200 (سطح المكتب). كل نقطة رابعة تُنشئ حالة لا تُختبر.
     ملاحظة: لا يمكن استعمال متغيّر CSS داخل @media، فالأرقام تُكتب
     صراحةً في الاستعلامات — وهذه المتغيّرات مرجع القيمة لا مصدرها. */
  --bp-sm:          360px;
  --bp-md:          768px;
  --bp-lg:          1200px;

  /* حدود العرض المقابلة لكل نقطة */
  --screen-md:      768px;
  --screen-lg:      1200px;

  /* سطر النص لا يتجاوز 65 حرفاً مهما اتسعت الشاشة: العين تفقد بداية
     السطر التالي بعد ذلك. القيمة بوحدة ch فتتبع الخط لا الشاشة. */
  --prose-max:      65ch;
  --form-max:       520px;

  /* ── شريط الانحراف عن السوق — العنصر المميز ────────────────────────── */
  --deviation-track-height: 2px;
  --deviation-tick-height:  8px;
  --deviation-median-height: 16px;
  --deviation-marker-size:  12px;
  --deviation-track-color:  var(--color-primary-24);
  --deviation-median-color: var(--color-primary);
  --deviation-label-size:   var(--text-xs);

  /* ── الأيقونات — Lucide، المستخدَم منها فقط ─────────────────────────── */
  /* سماكة واحدة في الموقع كله، ومقاسان لا ثالث لهما.
     اللون: الحبر البروسي دائماً (currentColor من النص المجاور).
     لون التمييز على أيقونة = تنبيه فعلي فقط، لا زخرفة.
     ولا أيقونة بلا تسمية نصية في أي عنصر تنقل. */
  --icon-stroke: 1.75;
  --icon-sm: 16px;   /* داخل الصفوف والبيانات الوصفية */
  --icon-md: 20px;   /* التنقل والأزرار */

  /* ── عناصر التحكّم المركّبة — مقاساتها رموز لا أرقام داخل مكوّن ────── */
  --switch-w:    44px;
  --switch-h:    26px;
  --switch-pad:   3px;
  --switch-knob: 20px;   /* المقبض يُدفع بـ margin auto لا بمقدار محسوب */
  --check-size:  20px;   /* صندوق الاختيار */
  --check-glyph: 16px;   /* علامة الصح داخله — بسماكة --icon-stroke نفسها */
  --rule-active-width: 2px;   /* الحدّ السفلي للتبويب الفعّال */

  /* ── الحركة ────────────────────────────────────────────────────────── */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);

  /* ── الطبقات ───────────────────────────────────────────────────────── */
  --z-base: 0;
  --z-sticky: 10;
  --z-overlay: 20;
  --z-drawer: 30;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
}

/* ══ الجزء الثالث: عزل الاتجاه — قاعدة عامة لا حيلة موضعية ════════════════
   كل نص لاتيني أو رقم داخل فقرة عربية يجب أن يُعزل، وإلا انتقلت الرموز
   المحايدة (# و -- و + و , و :) إلى الطرف الخطأ.
   الاستعمال: <span class="num">7,850,000</span> — في كل سعر ومساحة وتاريخ
   ورقم هاتف وكود ورابط. */

.ltr,
[dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* أرقام: عزل + خط الأرقام + عرض ثابت. إلزامية في كل سعر ومساحة.
   تحذير: تُلفّ بها الأرقام وحدها — لا رمز عربي داخلها.
   الرمز المختلط عربي+رقم (مثل «الدور 4») ليس رقماً: استعمل .level له،
   وإلا انقلب ترتيبه. ومراتب التحقق كلمات فلا تحتاج شيئاً من ذلك.
   والهامش الجانبي ضروري لأن المسافة المجاورة لحدّ العزل تُستهلك،
   فيلتصق الرقم بوحدته (`160م²`) بلا هذا الهامش. */
.num {
  direction: ltr;
  unicode-bidi: isolate;
  margin-inline: 0.25ch;
  font-family: var(--font-num);
  font-variant-numeric: var(--numeric-tabular);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.num:first-child { margin-inline-start: 0; }
.num:last-child  { margin-inline-end: 0; }

/* حرز عام: لو صار .num أو .code ابناً مباشراً لحاوية flex/grid فإنه يتحوّل
   إلى صندوق ممتد، و direction: ltr يجعل بدايته اليسار — فيقفز الرقم إلى
   الطرف المقابل من الصف. هذان السطران يُلغيان الفخ في كل الموقع:
   المحتوى يحدّد العرض، والصندوق يلتصق ببداية السطر العربية.
   (لا أثر لهما على الاستعمال السطري العادي.) */
/* الحرز للمدى النصّي وحده (span): لو صار ابناً مباشراً لحاوية flex/grid
   تحوّل إلى صندوق ممتد، و direction: ltr يجعل بدايته اليسار فيقفز الرقم. */
span.num, span.code {
  width: fit-content;
  align-self: start;
}

/* وعناصر الإدخال مستثناة: الحقل يملأ صفّه ويتوسّطه، والرقم فيه يلتصق
   ببداية السطر العربية لا بطرف مداه اللاتيني — وإلا انفصل الرقم عن
   وحدته وقُرئت الخانة سطرين. */
input.num, input.code, textarea.num, textarea.code {
  width: auto;
  align-self: auto;
  text-align: right;
}

/* رموز مختلطة عربي+رقم (مثل «الدور 4» أو رمز قيد) — تُعزل عن سياقها
   لكن تبقى بالاتجاه العربي، فيبقى الحرف قبل الرقم لا بعده.
   ملاحظة: مستويات التحقق صارت كلمات (معلَنة · موثَّقة · معايَنة · مفحوصة)
   فلا تحتاج هذه الفئة. */
.level {
  direction: rtl;
  unicode-bidi: isolate;
  font-variant-numeric: var(--numeric-tabular);
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* الأكواد وأسماء الرموز والروابط ورقم القيد.
   قاعدة ملزمة: لاتيني وأرقام فقط داخل .code — لا كلمة عربية واحدة.
   الفئة تفرض direction: ltr، فأي نص عربي داخلها ينقلب ترتيبه وتنتقل
   فواصله إلى الطرف الخطأ. الشرح العربي يوضع في عنصر مجاور. */
.code {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-mono);
  font-variant-numeric: var(--numeric-tabular);
  font-size: var(--text-xs);
}

/* مركّب الرقم + الوحدة — لا يُكسر أبداً.
   قاعدة عامة: كل رقم يليه وحدة قياس أو عملة يُلفّ معها في .qty
   (جنيه · م² · جنيه/م² · غرف · يوماً · صور · % · عارضين).
   بدونها ينزل «م²» أو «جنيه» وحده إلى سطر جديد في الأعمدة الضيقة. */
.qty {
  white-space: nowrap;
}

/* الحرز الفعلي للمركّب: `white-space: nowrap` لا يمنع الكسر بين عناصر
   flex — فأي .qty صارت حاوية flex (أو صار .num ابناً لها) تنفصل وحدتها
   عن رقمها وتُقرأ الخانة سطرين. القاعدة تُثبّت الصفّ الذي تَعِد به:
   لا التفاف، والرقم داخلها سطري لا كتلة، وقيود span.num تُلغى هنا
   لأن حدّ العزل داخل .qty محسوم أصلاً باتجاه الصفّ. */
.qty {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
}

/* حرز: qty تحوي qty أخرى ليست مركّباً بل جملةً تضمّ مركّبات — والعقد
   يخصّ المركّب وحده. فرض nowrap على جملة يمنع التفافها فتفيض أفقياً على
   360px، والحرز يُعيد لها الالتفاف بلا كسر مركّباتها. */
.qty:has(.qty) {
  white-space: normal;
}
.qty > .num, .qty > .code,
.qty > * > .num, .qty > * > .code {
  display: inline;
  width: auto;
  align-self: auto;
  flex: none;
}

/* أي عنصر مختلط (نص عربي يحوي أرقاماً متتابعة) — عزل داخلي فقط */
.bidi-plain {
  unicode-bidi: plaintext;
}

/* ══ الجزء الرابع: الطباعة ════════════════════════════════════════════════ */
@media print {
  :root { --surface-page: #FFFFFF; }
  html, body { background: #FFFFFF; }
  section, .card, figure, table { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  [data-print-hide] { display: none !important; }
}

/* ══ الوضع الليلي: «ورق ليلي» لا أسود ═════════════════════════════════════
   الاستعارة تنقلب رأسياً ولا تُلغى: الحبر يصبح الورقة، والورق يصبح الحبر.
   ثلاثة قرارات:
   1) لا أسود صافياً (#000): الأسود يقرأ لوحة تحكّم، والحبر العميق يبقى ورقاً
      في الليل — وهي هوية مقام كلها.
   2) الأحمر يفتح قليلاً (#E8635A): الأحمر المشبع على داكن يهتزّ بصرياً
      (chromatic aberration) ويُتعب العين في نصّ صغير.
   3) المحايدات تنقلب إلى كتّاني شفّاف لا إلى أبيض: الحدّ الأبيض على داكن
      يقطع كالسلك، والكتّاني الشفّاف يبقى ظلّاً.
   المصدر واحد: تُعاد ثلاثة ألوان أساسية فقط، وبقية النظام مشتقٌّ منها. */
:root[data-theme="night"] {
  --color-primary:     #E7E1D6;   /* الكتّاني صار الحبر — 12.1:1 على السطح ✓ */
  --color-surface:     #0B1424;   /* حبر بروسي عميق صار الورقة */
  --color-accent:      #E8635A;   /* أحمر التصحيح مفتوحاً — 5.9:1 ✓ */

  --color-primary-rgb: 231 225 214;
  --color-surface-rgb: 11 20 36;
  --color-accent-rgb:  232 99 90;

  --color-neutral-rgb: 231 225 214;  /* الظلّ من الكتّاني لا من الأسود */

  /* الأسطح: المرفوع يُشرق والغائر يُعتم — عكس النهار، فالضوء يأتي من الورق */
  --surface-raised:   rgb(231 225 214 / 7%);
  --surface-sunken:   rgb(0 0 0 / 22%);

  /* الترويسة والتذييل: لا تُقلب إلى كتّاني — تبقى داكنة وتُفصَل بحدّ.
     قلبها يجعل أفتح مساحة في الشاشة هي الترويسة، فتسحب البصر عن المحتوى. */
  --surface-inverse:  rgb(231 225 214 / 10%);
  --on-inverse:       var(--color-primary);
  --on-inverse-muted: rgb(var(--color-primary-rgb) / 72%);
  --on-accent:        #0B1424;
  --field-on-inverse:      rgb(231 225 214 / 12%);
  --field-on-inverse-text: rgb(231 225 214 / 62%);

  /* أسطح المحايدات تحتاج شفافية أعلى على داكن: العين تفقد الفروق الخفيفة */
  --color-primary-48: rgb(var(--color-neutral-rgb) / 58%);
  --color-primary-24: rgb(var(--color-neutral-rgb) / 30%);
  --color-primary-12: rgb(var(--color-neutral-rgb) / 16%);
  --color-primary-06: rgb(var(--color-neutral-rgb) / 8%);

  /* الظلال لا تعمل على داكن: تُستبدل بحدود */
  --shadow-raised: none;
  --shadow-overlay: none;

  color-scheme: dark;
}

/* الوضع الليلي بلا اختيار صريح: احترام إعداد النظام دون فرضه.
   وأي اختيار من المستخدم (data-theme) يتغلّب على النظام. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]) {
    --color-primary:     #E7E1D6;
    --color-surface:     #0B1424;
    --color-accent:      #E8635A;
    --color-primary-rgb: 231 225 214;
    --color-surface-rgb: 11 20 36;
    --color-accent-rgb:  232 99 90;
    --color-neutral-rgb: 231 225 214;
    --surface-raised:   rgb(231 225 214 / 7%);
    --surface-sunken:   rgb(0 0 0 / 22%);
    --surface-inverse:  rgb(231 225 214 / 10%);
    --on-inverse:       #E7E1D6;
    --on-inverse-muted: rgb(231 225 214 / 72%);
    --on-accent:        #0B1424;
    --color-primary-48: rgb(231 225 214 / 58%);
    --color-primary-24: rgb(231 225 214 / 30%);
    --color-primary-12: rgb(231 225 214 / 16%);
    --color-primary-06: rgb(231 225 214 / 8%);
    --shadow-raised: none;
    --shadow-overlay: none;
    --field-on-inverse:      rgb(231 225 214 / 12%);
    --field-on-inverse-text: rgb(231 225 214 / 62%);
    color-scheme: dark;
  }
}