/* ===== الألوان: كل لون في البرنامج يمر من هنا =====
   الوضعان فاتح وداكن يتشاركان أسماء المتغيرات نفسها، فتتبدل
   السمة بتغيير سمة واحدة على <html> لا بإعادة كتابة الأنماط.
   ما يذكر لونه صراحة في ملف أو ورقة (ألوان PDF مثلا) يبقى
   خارج هذه القائمة: تلك ألوان حبر على ورق لا ألوان شاشة. */
:root{
  --ink:#16202a; --ink-soft:#5a6b7b; --line:#d7dee5; --line-soft:#eaeff3;
  --bg:#eef1f4; --panel:#ffffff; --panel-soft:#f7f9fa;
  /* ارتفاع سطر الخانة في كل الجداول: منه يشتق ارتفاع الصف، وعليه
     تضبط خانات الإدخال داخلها - فلا يطول صف فيه خانة إدخال عن
     صف فيه نص. (١٣ بكسل × ١٫٥ - نفس ما كان يورث من body.) */
  --row-line:19.5px;
  /* ارتفاع صدر الصفحة: شريط الطلب واسم البرنامج إلى جانبه. رقم واحد
     لهما فيستقيم خطاهما السفليان على سطر واحد. */
  --topbar-h:51px;
  /* أضيق ما تكون عليه الواجهة على الحاسوب. تحته يمرر الهيكل أفقيا
     ولا ينكمش شيء: كل زر وخانة في موضعه مهما صغرت النافذة.
     والرقم مقيس لا مختار: أعرض صف في البرنامج - قائمة المورد
     وأوامره الثلاثة إلى جانب خانة البحث - والشريط الجانبي مبسوطا
     (١٨٦ بكسلا) - ومعه صفحة الصلاحيات بأعمدتها الثلاثة. */
  --min-w:1100px;
  --accent:#0f3d6b; --accent-soft:#e2e9f0; --on-accent:#ffffff;
  /* الحد الأدنى لتباين WCAG على خلفيته الباهتة: كان ‎#a86612‎ فيقف
     عند ٤٫١٧، وهو نص صغير في شارات التنبيه. */
  --warn:#a06111; --warn-soft:#fdf3e2;
  --danger:#a52a2a; --danger-soft:#fbecec; --danger-line:#e8cccc;
  --radius:5px;

  /* الجدول وما يتلون داخله */
  --th-bg:#eff3f6; --row-alt:#fbfcfd; --row-hover:#f2f4f7; --input-bg:#ffffff;
  /* خط الفصل بين الأعمدة: أغمق من --line-soft عن قصد. الخلايا الملونة
     (الأرخص، المتعادل، غير المعتمد) خلفياتها أغمق من الأبيض، وكان الخط
     الفاتح يذوب فيها فتبدو الأعمدة الملونة بلا حدود بينما جاراتها
     مخططة. ولون واحد يمر على كل الخلفيات أوضح من خط يظهر ويختفي.
     وخط الصفوف أفتح منه بدرجة: الأعمدة أحوج إلى الفصل - العين تتبع
     الصف أفقيا بلا دليل، ولا تتبع العمود. */
  --grid:#c6d1da; --grid-soft:#dde5eb;

  /* ===== ألوان حالات الطلب =====
     مستقلة عن ``--accent`` عن قصد: من اختار السمة الخضراء صار
     لونه المميز أخضر، فلو أخذت "معتمد" لونها منه لاختلط بكل زر
     مضيء في الشاشة - وهي إقرار يقرأ لا زر يضغط. ولكل حال
     ثلاثة: حبر وخلفية وحد. */
  --stat-draft:#5a6b7b; --stat-draft-bg:#eef1f4; --stat-draft-line:#d3dbe3;
  --stat-wait:#a06111;  --stat-wait-bg:#fdf3e2;  --stat-wait-line:#f0dfc2;
  --stat-cmp:#0f3d6b;   --stat-cmp-bg:#e2e9f0;   --stat-cmp-line:#cbd8e4;
  --stat-appr:#15683c;  --stat-appr-bg:#e3f1e8;  --stat-appr-line:#c3e0cd;
  /* و«مكتمل» فوق «معتمد»: أخضر مزرق - قريب منها لأنه درجتها
     التالية، وبين الفرق عنها لأنهما تقعان على طلبين متجاورين في
     السجل فتقرآن معا. */
  --stat-done:#0a6058;  --stat-done-bg:#ddf0ed;  --stat-done-line:#bbdfd9;
  /* ‎#b03a2e‎ كان يقف عند ٣٫٨٠ على ‎--outbid-sel‎ - أي على الصف غير
     المعتمد وهو مختار، وهي الحال التي يقرأ فيها الصف فعلا. */
  --outbid-bg:#fbe3e0; --outbid-ink:#9a3227;
  /* درجة الاختيار على الصف غير المعتمد: أغمق من خلفيته بوضوح */
  --outbid-sel:#f4c2ba;
  /* الصف المستبعد من الشراء: رمادي لا أحمر. الأحمر في هذه الورقة
     معناه "جاء غيره أرخص" - منافسة خسرها المورد - والاستبعاد قرار
     منا لا شأن له به، وقد يكون أرخص الموردين في صنف استبعدناه.
     ولون واحد لمعنيين يجعل القارئ يخلط بينهما. نفس ألوان PDF وإكسل. */
  --excl-bg:#e9ecef;   --excl-ink:#4a5560;  --excl-sel:#d5dadf;
  --sugg-bg:#fff3b0;   --sugg-ink:#c0392b;
  /* الظلال والحجب */
  --backdrop:rgba(15,25,35,.4); --shadow:rgba(0,0,0,.2); --shadow-soft:rgba(0,0,0,.45);
  --toast-bg:#16202a; --toast-ink:#ffffff;
  /* خلفية مساحة عرض المستند في نافذة الطباعة: رمادي محايد تقرأ
     الورقة البيضاء عليه، ولا يتبع السمة الفاتحة فتذوب فيه. */
  --doc-bg:#5b6167;

  /* خط الواجهة ووزنه: يبدلان من تبويب المظهر. قيمة الخط الافتراضية
     الخط IBM Plex Sans Arabic بوزن Medium، وهو مرفق مع البرنامج
     ويحمل من ‎/static/fonts‎ (انظر ‎@font-face‎ أدناه) فلا يعتمد على
     ما هو مثبت في جهاز المستخدم. وما بعده في السلسلة احتياط للحظة
     التي لم يصل فيها الملف بعد.

     ولم يعد خيارا: كان يختار من تبويب المظهر فيختلف شكل البرنامج
     من جهاز إلى جهاز، وتقاس الجداول على خط ثم تقرأ بآخر.

     والوزن يمس النص العادي وحده: ما وصف وزنه صراحة (رؤوس الأعمدة،
     العناوين، الأرقام الفائزة) يبقى على وصفه، وإلا ذابت التفرقة التي
     من أجلها غلظ. */
  --app-font:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --app-weight:500;
}

/* الوضع الداكن: ليس عكسا حسابيا للفاتح. الخلفية رمادية زرقاء لا
   سوداء لأن السواد التام مع النص الأبيض يتعب العين على شاشة كبيرة،
   والأخضر يرفع فاتحا لأن أخضر الفاتح الغامق يختفي على خلفية غامقة. */
[data-theme="dark"]{
  color-scheme:dark;
  --ink:#e2e8ed; --ink-soft:#94a3b0; --line:#33414d; --line-soft:#28333c;
  --bg:#141b21; --panel:#1b242b; --panel-soft:#212b33;
  --accent:#759dc6; --accent-soft:#1e2c3a; --on-accent:#0d141b;
  --warn:#e0aa5f; --warn-soft:#3a2f1c;
  --danger:#e58a83; --danger-soft:#3a2422; --danger-line:#5a3532;

  --th-bg:#26313a; --row-alt:#1f2830; --row-hover:#252b32; --input-bg:#121a20;
  --grid:#41505d; --grid-soft:#313d47;

  /* وفي الداكنة تنقلب: الحبر يضيء والخلفية تغمق. ونسب التباين
     محسوبة على خلفيتها هي لا على لوح الشاشة. */
  --stat-draft:#a7b4c0; --stat-draft-bg:#28323a; --stat-draft-line:#3a4752;
  --stat-wait:#e0aa5f;  --stat-wait-bg:#3a2f1c;  --stat-wait-line:#544325;
  --stat-cmp:#8fb4d8;   --stat-cmp-bg:#1e2c3a;   --stat-cmp-line:#2f4358;
  --stat-appr:#63c98a;  --stat-appr-bg:#18301f;  --stat-appr-line:#2c4a35;
  --stat-done:#5ecfc0;  --stat-done-bg:#122e2b;  --stat-done-line:#264a45;
  --outbid-bg:#452724; --outbid-ink:#f0a49c; --outbid-sel:#6d3a34;
  --excl-bg:#2b3138;   --excl-ink:#b3bdc7;  --excl-sel:#3c454e;
  --sugg-bg:#453a1c;   --sugg-ink:#ffb4a2;

  --backdrop:rgba(0,0,0,.6); --shadow:rgba(0,0,0,.55); --shadow-soft:rgba(0,0,0,.7);
  --toast-bg:#2d3a44; --toast-ink:#ffffff;
  --doc-bg:#0e1418;
}

/* ===== اللون المميز: بعد مستقل عن الفاتح والداكن =====
   السمة تقول كم تضيء الشاشة، واللون يقول بأي لون يشار إلى
   المهم - وهما سؤالان لا سؤال. جمعهما في قائمة واحدة يعني أن كل
   لون جديد يضاعف الخيارات: "فاتح أخضر، فاتح أزرق، داكن أخضر،
   داكن أزرق..." ثم لا يجد صاحب الداكن لونه الأزرق أصلا.

   فاللون يكتب في ‎data-accent‎ على ‎<html>‎ إلى جانب ‎data-theme‎.
   والأزرق هو الأساس - يكتب في ‎:root‎ فلا تومض الصفحة بلون آخر قبل
   أن تعمل السكربتات - ولا يعرف بعده إلا ما كان أخضر، وهو ثلاثة
   متغيرات أو أربعة. وهما درجة واحدة بزاويتين: ١٧٢° للأخضر و٢١٠°
   للأزرق، والإضاءة والتشبع كما هما في كل منهما. */

/* الأخضر على الفاتح. أزرق الأساس ‎#0f3d6b‎ بزاوية ١٧٢° بدل ٢١٠°،
   والإضاءة والتشبع كما هما - فهما درجة واحدة بلونين. */
[data-accent="green"]{
  --accent:#0f6b5f; --accent-soft:#e2f0ed;
  --row-hover:#f2f7f6;
}

/* والأخضر على الداكن. ولا بد أن تلي قاعدتها قاعدة الداكن وقاعدة
   الأخضر معا: هي أخص منهما (محددان لا واحد) فتغلبهما أيا كان
   ترتيب الملف.

   وإضاءته هنا ٥١٪ مقابل ٦٢٪ للأزرق: الأزرق أخفت من الأخضر في عين
   الإنسان عند الإضاءة نفسها - وهذا في حساب السطوع لا في الذوق - فلولا
   الفرق لوقف الأزرق على خلفيته الباهتة عند ٣٫٤٨ بينما الأخضر عند
   ٤٫٩٨. فلكل إضاءته التي تسوي تباينه. */
[data-theme="dark"][data-accent="green"]{
  --accent:#4db6a4; --accent-soft:#1e3a37; --on-accent:#0d1b19;
  --row-hover:#25322f;
}

/* عائلة IBM Plex Sans Arabic كاملة، مرفقة مع البرنامج وتحمل من
   الخادم لا من الجهاز: فتتاح لكل مستخدم دون أن يثبت شيئا، ويرى
   الجدول نفسه على كل شاشة.

   الأوزان السبعة مصرح بها ملفا ملفا لا ملفا واحدا لكلها، ليأخذ
   المتصفح الوزن المرسوم أصلا بدل أن يصطنعه بتغليظ الحروف أو تنحيفها -
   والاصطناع في العربية أسوأ منه في اللاتينية: الحروف موصولة، فيغلظ
   الوصل مع الحرف فتلتصق الكلمة.

   ولا ينزل من السبعة إلا ما يرسم به فعلا: المتصفح لا يجلب ملف وزن
   لا تستعمله الصفحة. فالواجهة تجلب اثنين أو ثلاثة لا 1.6 ميغابايت.
*/
/*: ثلاثة أوزان فقط: ٤٠٠ للنص العادي، و٥٠٠ لجسم البرنامج
    (--app-weight)، و٧٠٠ للعناوين والبارز. كانت سبعة، وأربعة منها
    لا تستعمل في أي قاعدة - ٩٢٥ كيلوبايت ترفع مع كل ترقية بلا
    فائدة. وما طلب من وزن غير موجود يشتقه المتصفح من أقربها. */
@font-face{font-family:"IBM Plex Sans Arabic"; font-style:normal; font-display:swap;
  font-weight:400; src:url("/static/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");}
@font-face{font-family:"IBM Plex Sans Arabic"; font-style:normal; font-display:swap;
  font-weight:500; src:url("/static/fonts/IBMPlexSansArabic-Medium.ttf") format("truetype");}
@font-face{font-family:"IBM Plex Sans Arabic"; font-style:normal; font-display:swap;
  font-weight:700; src:url("/static/fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--app-font); font-weight:var(--app-weight);
  font-size:13.5px; line-height:1.5;
}
button{font-family:inherit; font-weight:inherit; font-size:13px; cursor:pointer}
input,select,textarea{font-family:inherit; font-weight:inherit; font-size:13px}

/* ===== أزرار وحقول ===== */
.btn{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:6px 12px; color:var(--ink); white-space:nowrap;
}
.btn:hover:not(:disabled){border-color:var(--ink-soft)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn.primary:hover:not(:disabled){filter:brightness(1.08)}
.btn.danger{color:var(--danger); border-color:var(--danger-line)}
.btn.danger:hover:not(:disabled){background:var(--danger-soft)}
.btn.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:700}
.field{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:6px 9px; background:var(--panel); color:var(--ink);
}
.field:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.field:disabled{background:var(--panel-soft); color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
.spacer{flex:1}
.pill{display:inline-block; padding:1px 8px; border-radius:99px; font-size:11.5px; background:var(--line-soft); color:var(--ink-soft)}
.pill.ok{background:var(--accent-soft); color:var(--accent)}
.pill.warn{background:var(--warn-soft); color:var(--warn)}
/* وحال لا تمضي بانتظار: مفتاح مرفوض، أو خادم لا يصل إلى جوجل */
.pill.bad{background:var(--danger-soft); color:var(--danger)}