/* ===== الألوان: كل لونٍ في البرنامج يمرّ من هنا ===== الوضعان فاتح وداكن يتشاركان أسماء المتغيّرات نفسها، فتتبدّل السمة بتغيير سمة واحدة على لا بإعادة كتابة الأنماط. ما يُذكر لونه صراحةً في ملف أو ورقة (ألوان PDF مثلاً) يبقى خارج هذه القائمة: تلك ألوان حبرٍ على ورق لا ألوان شاشة. */ :root{ --ink:#16202a; --ink-soft:#5a6b7b; --line:#d7dee5; --line-soft:#eaeff3; --bg:#eef1f4; --panel:#ffffff; --panel-soft:#f7f9fa; --accent:#0f6b5f; --accent-soft:#e2f0ed; --on-accent:#ffffff; --warn:#a86612; --warn-soft:#fdf3e2; --danger:#a52a2a; --danger-soft:#fbecec; --danger-line:#e8cccc; --radius:5px; /* الجدول وما يتلوّن داخله */ --th-bg:#eff3f6; --row-alt:#fbfcfd; --row-hover:#f2f7f6; --input-bg:#ffffff; --outbid-bg:#fbe3e0; --outbid-ink:#b03a2e; --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; /* خط الواجهة ووزنه: يُبدَّلان من تبويب المظهر. قيمة الخط الافتراضية هي نفس ترتيب الخطوط الذي كان مكتوباً في body قبل أن يصير خياراً. والوزن يمسّ النص العادي وحده: ما وُصف وزنه صراحةً (رؤوس الأعمدة، العناوين، الأرقام الفائزة) يبقى على وصفه، وإلا ذابت التفرقة التي من أجلها غُلِّظ. */ --app-font:"SF Arabic","Segoe UI",Tahoma,system-ui,sans-serif; --app-weight:400; } /* الوضع الداكن: ليس عكساً حسابياً للفاتح. الخلفية رماديةٌ زرقاء لا سوداء لأن السواد التام مع النص الأبيض يُتعب العين على شاشةٍ كبيرة، والأخضر يُرفع فاتحاً لأن أخضر الفاتح الغامق يختفي على خلفية غامقة. */ [data-theme="dark"]{ color-scheme:dark; --ink:#e2e8ed; --ink-soft:#94a3b0; --line:#33414d; --line-soft:#28333c; --bg:#141b21; --panel:#1b242b; --panel-soft:#212b33; --accent:#4db6a4; --accent-soft:#1e3a37; --on-accent:#0d1b19; --warn:#e0aa5f; --warn-soft:#3a2f1c; --danger:#e58a83; --danger-soft:#3a2422; --danger-line:#5a3532; --th-bg:#26313a; --row-alt:#1f2830; --row-hover:#25322f; --input-bg:#121a20; --outbid-bg:#452724; --outbid-ink:#f0a49c; --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; } /* عائلة IBM Plex Sans Arabic كاملة، مرفقةٌ مع البرنامج وتُحمَّل من الخادم لا من الجهاز: فتُتاح لكل مستخدم دون أن يُثبِّت شيئاً، ويُرى الجدول نفسَه على كل شاشة. الأوزان السبعة مصرَّحٌ بها ملفاً ملفاً لا ملفاً واحداً لكلها، ليأخذ المتصفح الوزن المرسوم أصلاً بدل أن يصطنعه بتغليظ الحروف أو تنحيفها - والاصطناع في العربية أسوأ منه في اللاتينية: الحروف موصولة، فيغلُظ الوصل مع الحرف فتلتصق الكلمة. ولا يُنزَّل من السبعة إلا ما يُرسم به فعلاً: المتصفح لا يجلب ملف وزنٍ لا تستعمله الصفحة. فالواجهة تجلب اثنين أو ثلاثة لا 1.6 ميغابايت. */ @font-face{font-family:"IBM Plex Sans Arabic"; font-style:normal; font-display:swap; font-weight:100; src:url("/static/fonts/IBMPlexSansArabic-Thin.ttf") format("truetype");} @font-face{font-family:"IBM Plex Sans Arabic"; font-style:normal; font-display:swap; font-weight:200; src:url("/static/fonts/IBMPlexSansArabic-ExtraLight.ttf") format("truetype");} @font-face{font-family:"IBM Plex Sans Arabic"; font-style:normal; font-display:swap; font-weight:300; src:url("/static/fonts/IBMPlexSansArabic-Light.ttf") format("truetype");} @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:600; src:url("/static/fonts/IBMPlexSansArabic-SemiBold.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:600} .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)}