/* ============================================================ ثيم نظام المحاسبة — الهوية الكحلية (Slate/Navy) RTL منقول ومحسّن من قشرة النظام القديم (templates_base.py / ui_kit.py). ============================================================ */ /* ═══ الخطّان — استضافةٌ ذاتيّةٌ: لا طلبَ شبكةٍ لأيّ مستأجر ═══ Readex Pro (عربيّ) و Inter (أرقام) — كلاهما SIL Open Font License 1.1، والاستعمالُ التجاريُّ والتضمينُ مسموحان. الملفّاتُ في static/fonts/. `font-display:swap` كي يُقرأ النصُّ بخطٍّ بديلٍ قبل وصول الخطّ لا أن يختفي. */ /* هوية «شُرفة»: IBM Plex Sans Arabic للمتن والجداول — هندسيٌّ بارد يقطع مع استدارة Readex Pro، وأرقامه اللاتينيّة من عائلة IBM Plex تدعم tnum. اللاتينيّ منه يُحمَّل أيضاً كي لا يهبط الرقمُ والحرفُ اللاتينيّ إلى خطّ النظام. */ @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;} /* Alexandria: خطُّ العناوين والأرقام البطلة — حضورٌ معماريٌّ يطابق روح الهوية */ @font-face{font-family:'Alexandria';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/alexandria-arabic-600-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;} @font-face{font-family:'Alexandria';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/alexandria-arabic-700-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF;} @font-face{font-family:'Alexandria';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/alexandria-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;} @font-face{font-family:'Alexandria';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/alexandria-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F;} /* Readex Pro يبقى محمَّلاً لشاشة الكاشير المجمَّدة فقط (pos_theme_lock.css) */ @font-face{font-family:'Readex Pro';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/readex-pro-arabic-400-normal.woff2') format('woff2');} @font-face{font-family:'Readex Pro';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/readex-pro-arabic-500-normal.woff2') format('woff2');} @font-face{font-family:'Readex Pro';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/readex-pro-arabic-600-normal.woff2') format('woff2');} @font-face{font-family:'Readex Pro';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/readex-pro-arabic-700-normal.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/inter-latin-400-normal.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/inter-latin-500-normal.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/inter-latin-600-normal.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/inter-latin-700-normal.woff2') format('woff2');} /* خط الهوية المعتمد (قرار المالك ٢ أغسطس): Almarai — من fontsource محلياً */ @font-face{font-family:'Almarai';font-style:normal;font-weight:300;font-display:swap; src:url('../fonts/almarai-arabic-300-normal.woff2') format('woff2');} @font-face{font-family:'Almarai';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/almarai-arabic-400-normal.woff2') format('woff2');} @font-face{font-family:'Almarai';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/almarai-arabic-700-normal.woff2') format('woff2');} @font-face{font-family:'Almarai';font-style:normal;font-weight:800;font-display:swap; src:url('../fonts/almarai-arabic-800-normal.woff2') format('woff2');} :root{ /* ═══ هوية «شُرفة» — بترولي عميق على أبيض، حدودٌ لا ظلال ═══ اعتمدها المالك بعد لجنة تحكيم (99/120): تجريدٌ نجديٌّ بلا فلكلور، مع التسطير المزدوج المحاسبي تحت المجاميع وهندسة الأرقام الجدولية. */ --brand-1:#0E5F63; --brand-2:#0B4D50; --brand-deep:#093F42; /* «بلا أيّ تدرّج» — الرمزان يبقيان لأنّ القوالب تستهلكهما، وقيمتهما لونٌ صلب */ --grad-main:linear-gradient(135deg,#0E5F63,#17877B); --grad-deep:linear-gradient(160deg,#0B3F42,#0B4D50); /* نصوص ومسطّحات */ /* الخط المعتمد للنظام كله — مصدر الحقيقة الوحيد */ --font:"Almarai","IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif; /* خطُّ العناوين والأرقام البطلة (عناوين الصفحات والبطاقات الكبرى) */ --font-display:"Almarai","IBM Plex Sans Arabic",system-ui,sans-serif; /* الأرقامُ عائلةٌ مستقلّة: لا خطَّ عربيٍّ واحدٍ يملك أرقاماً لاتينيّةً جدوليّةً بجودةٍ كافيةٍ لعمودٍ ماليّ، فتتراقص عروضُها ولا تقف فواصلُها في عمود. */ --font-num:"Inter","IBM Plex Sans Arabic",system-ui,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,monospace; /* حبرٌ محايدٌ لا مُزرَقّ: ‎#0f1a2c‎ على أبيضَ خالصٍ يُحدث تلوّناً بارداً يُفقد الأبيضَ بياضَه. و‎#101114‎ يقرأ 18.9:1 على الأبيض. */ --ink:#172226; --muted:#5B6B6E; --muted-2:#65757a; /* ═══ الأسطح: أبيضٌ خالص ═══ كانت ‎--bg:#e2e8f1‎ رماديّاً **مُزرَقّاً** — وهو سببُ أنّ النظامَ لا يُحسّ أبيضَ ولو كانت بطاقاتُه بيضاء. الآن الصفحةُ بيضاء، و‎--soft‎ هو السطحُ الملوَّنُ **الوحيد** (ترويسةُ جدولٍ · حقلُ إدخالٍ · تمريرُ صفّ)، والبنيةُ من الشعرة والفراغ لا من صناديقَ رماديّة. */ /* «شُرفة»: الأسطحُ بيضاء والملوَّنُ الوحيدُ مخضرٌّ باردٌ خفيف */ --line:#EAEDF0; --soft:#F4F6F8; --card:#ffffff; --bg:#F4F6F8; --sunk:#eef3f3; /* غائرٌ: الحقلُ المعطَّلُ وخلفيّةُ الشريط */ /* --line = فاصل داخلي بين الصفوف (خفيف عمداً). --edge = الإطار الخارجي للبطاقة والجدول. كان الإطار يستعمل --line فيقيس 1.06:1 على خلفية الصفحة ⇒ غير مرئي عملياً، فتُحسّ ألوان الصفوف وكأنها «طالعة عن الجدول». --edge يقيس 1.38:1 على الخلفية و1.57:1 على البطاقة البيضاء — وكلاهما دون عتبة العناصر غير النصّية 3.0:1 (WCAG 2.1 §1.4.11). و‎--edge‎ ليس زينةً فقط: هو حدُّ حقول الإدخال وأزرار الأيقونات وحوافّ الجدول، أي ما يُعرَّف به الحقلُ نفسه. مسحٌ شامل قاس 166 حقلاً فرسب منها 154. رُقّي إلى #748092 = 4.00:1 على البطاقة و3.45:1 على الخلفية و3.71:1 على --soft: يعبر العتبة على كلّ سطحٍ يلامسه وهو أخفُّ من الحبر بكثير. الترقية في الرمز لا في المواضع: 353 استعمالاً تُصلَح دفعةً واحدة، وكلُّ كودٍ لاحقٍ يرث القيمة الصحيحة تلقائياً. */ /* ‎--edge‎ كان ‎#748092‎ مضبوطاً على خلفيّةٍ ملوّنة؛ على الأبيض الخالص صار قاسياً يُثقل كلَّ بطاقةٍ وجدول. ‎#d7dade‎ يقرأ 1.7:1 على الأبيض — حدٌّ يُرى ولا يصرخ — و‎--edge-2‎ للحقول والأزرار حيث تلزم عتبةُ 3.0:1. */ --edge:#E3E7EB; --edge-2:#868C96; /* حلقة التركيز — مستقلة عن لون التمييز عمداً. كانت outline:var(--accent) فوق زرّ خلفيته var(--accent) نفسه ⇒ تباين 1.00:1 (رسوب WCAG 1.4.11). هذا اللون يقيس 14.27:1 على البطاقة و12.61:1 على خلفية الصفحة، ويصمد مع أي لون تمييز. */ --focus:#0B4D50; /* «شُرفة»: زاويةٌ واحدةٌ 6px في الأزرار والحقول والقوائم — لا كبسولات */ --radius:13px; --radius-md:13px; --radius-lg:18px; /* سلّم الطباعة */ --fs-2xs:.6875rem; --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.25rem; --fs-2xl:1.5rem; --fs-3xl:1.75rem; --fs-4xl:2rem; /* سلّم المسافات (شبكة 8px) */ --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-10:40px; --sp-12:48px; /* الحالة */ /* ألوان الحالة في الوضع الفاتح: مُغمَّقة لتصلح نصاً على الأبيض (AA 4.5:1) — النسخ الفاتحة الأصلية تبقى في -soft للخلفيات */ --ok:#178A50; --warn:#B45708; --bad:#D43A2F; --on-status:#fff; /* نصّ فوق لون حالة — النهاري غامق فالأبيض يمرّ */ --ok-soft:#ecfdf5; --ok-ink:#065f46; --warn-soft:#fffbeb; --warn-ink:#92400e; --bad-soft:#fef2f2; --bad-ink:#991b1b; --info-soft:#E6F2F2; --info-ink:#0B4D50; /* محرّك اللون (قابل للتبديل) */ --accent:#0E5F63; --accent-2:#137076; --accent-deep:#0B4D50; --on-accent:#fff; /* لون النص فوق سطح accent */ --accent-ink:var(--accent-deep); --accent-soft:#E6F2F2; --accent-soft-2:#CFE5E5; /* أسماء بديلة كانت مستعملة في القوالب بلا تعريف — فكان الاحتياطي الفاتح يفوز في الوضع الليلي (صفوف إجماليات بيضاء · نصّ بتباين 1.00). تُشتقّ الآن من الثيم. */ --acbg:var(--accent-soft); --surface-2:var(--soft); --line2:var(--line); /* أسطح بلون مثبَّت (بطاقة بيضاء فوق تدرّج) تحتاج نصّاً مثبّتاً — لا يتبع الثيم، وإلا صار الرمادي الفاتح على الأبيض 1.46. لا تستعمل --muted فوق سطح مثبَّت. */ --on-fixed:#123335; --on-fixed-muted:#4d6265; /* تدرّجُ الهوية داكنٌ في كلّ الثيمات (لا يُعاد تعريفه في الليليّ)، فالنصُّ فوقه أبيضُ دائماً. و‎--on-accent‎ لا يصلح له: في الليليّ يصير داكناً لأنّ ‎--accent‎ المسطّح يصير فاتحاً — فيلبس الزرُّ الرئيسيُّ نصّاً داكناً على تدرّجٍ داكن. رمزٌ ثابتٌ منفصلٌ يمنع هذا الخلط. */ --on-brand:#fff; --accent2:var(--accent-2); --ac-deep:var(--accent-deep); --ink-2:var(--muted); /* «بلا أيّ تدرّج» — قيمة الرمز لونٌ صلبٌ والاسم باقٍ لأن القوالب تستهلكه */ --accent-grad:linear-gradient(135deg,#0E5F63,#17877B); /* حجابُ النوافذ — رمزٌ واحدٌ لا ستّ قيم. كان في النظام ستُّ قيمِ حجابٍ مختلفةٍ لنفسِ العنصر: rgba(20,30,50,.5) وrgba(15,20,35,.5) وrgba(18,26,55,.55) وrgba(15,18,35,.55) وrgba(15,20,30,.45) وrgba(20,30,50,.45). ولا أحدَ اختارها مختلفة — كلٌّ منها كُتبت في يومٍ ونُسخت في آخر. والعينُ تلتقط الفرق حين تنتقل من نافذةٍ إلى نافذة: هذه أثقلُ قليلاً وتلك أخفّ، بلا سبب. */ --scrim:rgba(23,34,38,.45); /* ظلال */ /* «شُرفة»: البطاقاتُ مسطّحةٌ بحدٍّ لا بظلّ — الظلُّ محجوزٌ للطبقات العائمة (قوائم ونوافذ) حصراً، فرمز البطاقات صفر ورمزا الطفوّ يعملان. */ --shadow-sm:0 1px 2px rgba(16,19,24,.04),0 12px 30px -22px rgba(16,19,24,.13); --shadow:0 8px 24px rgba(23,34,38,.10); --shadow-lg:0 16px 48px rgba(23,34,38,.18); --shadow-em:0 8px 24px rgba(23,34,38,.14); /* ‏هالةُ السطوح المميّزة: تُشتقّ من ‎--accent‎ فتتبدّل مع كل لونٍ يختاره المستأجر. كانت هالاتُ الأزرار زرقاءَ مثبّتةً (‎#6b8fd6‎ و‎#4f46e5‎) فتُطلّ نيلياً من تحت زرٍّ نحاسيّ — خللٌ في الهويّة لا في التباين. */ --shadow-accent:color-mix(in srgb, var(--accent) 52%, transparent); } /* الوضع الداكن */ [data-theme="dark"]{ /* «شُرفة» ليلاً: فحميٌّ مخضرٌّ لا أسود، والبتروليُّ يرتفع إلى #4AAFA4 ليحفظ التباين */ --ink:#E8EDEC; --muted:#93A2A0; --muted-2:#86999c; --line:#263033; --soft:#131A1C; --card:#161D20; --bg:#0F1517; --edge:#3A484C; --edge-2:#516266; --focus:#DFF1EF; /* الليلي يقلب الحلقة: تباينٌ عالٍ على البطاقة والخلفية */ --accent:#4AAFA4; --accent-2:#5FBFB4; --accent-deep:#2E8A80; --on-accent:#0F1517; /* على سطح فاتح ⇒ نص داكن */ --accent-ink:color-mix(in srgb, var(--accent) 55%, #fff); --accent-soft:rgba(74,175,164,.14); --accent-soft-2:rgba(74,175,164,.28); --grad-main:linear-gradient(135deg,#2E8A80,#4AAFA4); --grad-deep:linear-gradient(160deg,#123B3E,#2E8A80); --accent-grad:linear-gradient(135deg,#2E8A80,#4AAFA4); /* ألوان الحالة معاد تعريفها لتباين كافٍ على الخلفية الداكنة */ --scrim:rgba(5,10,11,.66); /* داكنٌ على داكنٍ يحتاج حجاباً أثقل */ --ok:#34B375; --warn:#E0912F; --bad:#F0655A; --on-status:#0e1420; /* الليلي: ألوان الحالة فاتحة — الأبيض فوقها 2.77 (رسوب) */ --ok-soft:rgba(16,185,129,.15); --ok-ink:#6ee7b7; --warn-soft:rgba(245,158,11,.15); --warn-ink:#fcd34d; --bad-soft:rgba(248,113,113,.15); --bad-ink:#fca5a5; --info-soft:rgba(91,134,189,.16); --info-ink:#9dc0ea; /* الظلُّ لا يُقرأ على الداكن — البطاقاتُ مسطّحةٌ والطبقاتُ العائمةُ تظلّل */ --shadow-sm:0 0 0 0 rgba(0,0,0,0); --shadow:0 8px 24px rgba(0,0,0,.5); --shadow-lg:0 16px 48px rgba(0,0,0,.6); --shadow-em:0 8px 24px rgba(0,0,0,.5); } /* ═══ ثيم شفقي زجاجي (Aurora) ═══ */ [data-theme="aurora"]{ --ink:#e8edf7; --muted:#9fb0cc; --muted-2:#93a4bd; /* توحيد مع الليلي — 7.2:1 */ --line:rgba(255,255,255,.12); --soft:rgba(255,255,255,.05); --card:rgba(255,255,255,.06); --bg:#0b0f1f; --edge:rgba(255,255,255,.36); /* الزجاجي: الإطار طبقة ضوء لا لون صلب — .26 كانت 2.33:1، و.36 تعطي 3.27:1 (§1.4.11) */ --focus:#e8f0fb; --ok:#34d399; --warn:#fbbf24; --bad:#fb7185; --on-status:#0b0f1f; --ok-soft:rgba(16,185,129,.16); --ok-ink:#6ee7b7; --warn-soft:rgba(245,158,11,.16); --warn-ink:#fcd34d; --bad-soft:rgba(244,63,94,.16); --bad-ink:#fca5a5; --info-soft:rgba(124,92,246,.16); --info-ink:#c4b5fd; --shadow-sm:0 1px 3px rgba(0,0,0,.4); --shadow:0 8px 24px -8px rgba(0,0,0,.55); --shadow-lg:0 30px 70px -24px rgba(0,0,0,.7); --shadow-em:0 12px 30px -8px rgba(0,0,0,.6); --on-accent:#0e1420; } [data-theme="aurora"] body{background:transparent;} /* العناصر الأصلية (قوائم select / منتقي التاريخ / أشرطة التمرير) تتبع الثيم الداكن — عام لكل الشاشات */ [data-theme="aurora"],[data-theme="dark"]{color-scheme:dark; /* التمييز حين يُستخدم نصاً: يُفتَّح على الخلفية الداكنة (تباين AA) */ --accent-ink:color-mix(in srgb, var(--accent) 55%, #fff);} [data-theme="aurora"] option,[data-theme="dark"] option{background:var(--bg);color:var(--ink);} [data-theme="aurora"] optgroup,[data-theme="dark"] optgroup{background:var(--bg);color:var(--muted);} [data-theme="aurora"] .card,[data-theme="aurora"] .tile,[data-theme="aurora"] .stat,[data-theme="aurora"] .hcard{ backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%); border-color:rgba(255,255,255,.12);} /* طبقة الشفق المتحرّكة (تظهر بثيم aurora فقط) */ .bg-aurora{display:none;} [data-theme="aurora"] .bg-aurora{display:block;position:fixed;inset:0;z-index:-2;pointer-events:none; background:radial-gradient(1100px 600px at 85% -10%,#1d2a55 0,transparent 60%), radial-gradient(900px 500px at 0% 110%,#2a1c55 0,transparent 55%), linear-gradient(160deg,#0a0f1f,#0d1226 60%,#0a0f1f);} [data-theme="aurora"] .bg-aurora b{position:absolute;border-radius:50%;filter:blur(75px);opacity:.42;mix-blend-mode:screen;animation:bgdrift 22s ease-in-out infinite;} [data-theme="aurora"] .bg-aurora b:nth-child(1){width:42vw;height:42vw;background:#4f6bff;top:-10%;inset-inline-end:-6%;} [data-theme="aurora"] .bg-aurora b:nth-child(2){width:36vw;height:36vw;background:#9b5cff;bottom:-12%;inset-inline-start:-5%;animation-delay:-8s;} [data-theme="aurora"] .bg-aurora b:nth-child(3){width:26vw;height:26vw;background:#22d3ee;top:40%;inset-inline-start:36%;animation-delay:-14s;} @keyframes bgdrift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(3%,5%) scale(1.08);}} @media (prefers-reduced-motion: reduce){[data-theme="aurora"] .bg-aurora b{animation:none;}} /* ═══ ألوان التمييز (طبقة فوق أي ثيم) ═══ */ /* الهادئ (الافتراضي) — نيليّ منخفض الإشباع يريح العين */ /* «شُرفة» (هوية أوفى المعتمدة) — الافتراضي: بتروليٌّ عميقٌ صلب */ [data-accent="shurfa"]{--accent:#0E5F63;--accent-2:#137076;--accent-deep:#0B4D50;--accent-grad:linear-gradient(135deg,#0E5F63,#17877B);--on-accent:#fff;--accent-ink:#0B4D50;} [data-theme="dark"][data-accent="shurfa"]{--accent:#4AAFA4;--accent-2:#5FBFB4;--accent-deep:#2E8A80;--accent-grad:linear-gradient(135deg,#2E8A80,#4AAFA4);--on-accent:#0F1517;--accent-ink:color-mix(in srgb,#4AAFA4 55%,#fff);} /* النحاسي — الهوية السابقة، يبقى خياراً للمستأجر */ /* ‏نحاسٌ فاتحٌ بطبعه: حبره ‎#8a6428‎ كان يقرأ ٤٫٢٥:١ فوق تظليله ‎--accent-soft‎ على ‎--bg‎ — دون ٤٫٥. غُمِّق إلى ‎#7e5a24‎ فارتفع إلى ٤٫٩٦:١ وعلى الأبيض ٦٫٢٢:١، وبقيت النبرة نحاسيّةً لا بنيّةً غامضة. بقيّة الألوان محسوبة وآمنة. */ [data-accent="copper"]{--accent:#C89B5A;--accent-2:#d9af6c;--accent-deep:#a97e3f;--accent-grad:linear-gradient(135deg,#d9af6c,#a97e3f);--on-accent:#221503;--accent-ink:#7e5a24;} [data-accent="calm"]{--accent:#6b8fd6;--accent-2:#7e7fd0;--accent-deep:#5f7fc4;--accent-grad:linear-gradient(135deg,#6b8fd6,#7e7fd0);--on-accent:#0e1420;--accent-ink:#3f5fa8;} [data-accent="violet"]{--accent:#6d4ae0;--accent-2:#5b86f7;--accent-deep:#6d28d9;--accent-grad:linear-gradient(135deg,#5b86f7,#8b5cf6);--on-accent:#fff;--accent-ink:#5b32c9;} [data-accent="blue"]{--accent:#2f6bd6;--accent-2:#4f8bff;--accent-deep:#1e4ea3;--accent-grad:linear-gradient(135deg,#4f8bff,#22d3ee);--on-accent:#fff;--accent-ink:#1e4ea3;} [data-accent="green"]{--accent:#0f9d6e;--accent-2:#10b981;--accent-deep:#0b6e4f;--accent-grad:linear-gradient(135deg,#10b981,#34d399);--on-accent:#0e1420;--accent-ink:#0b6e4f;} [data-accent="rose"]{--accent:#e11d63;--accent-2:#f43f5e;--accent-deep:#9f1239;--accent-grad:linear-gradient(135deg,#f43f5e,#fb7185);--on-accent:#fff;--accent-ink:#9f1239;} /* لون التمييز الناعم يُشتقّ تلقائياً من اللون المختار (يناسب الفاتح والداكن) */ [data-accent]{--accent-soft:color-mix(in srgb,var(--accent) 14%,transparent);--accent-soft-2:color-mix(in srgb,var(--accent) 26%,transparent);} *{box-sizing:border-box;} html{font-size:87.5%;} /* ≈14px — كثافة أقرب للأنظمة العالمية (أودو)، يحترم تفضيل المتصفح للوصول */ body{ margin:0; font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.6; /* الاتجاهُ يُورَث من ولا يُثبَّت هنا: تثبيتُه كان يُبقي الصفحةَ يمينيّةً حتى بعد اختيار الإنجليزيّة، فتظهر كلماتٌ إنجليزيّةٌ في تخطيطٍ عربيّ. القوالبُ المستقلّة تضع dir على فيصل الميراثُ إليها. */ direction:inherit; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none;} /* ‏`.num` كان يطلب خصائصَ الأرقام من خطٍّ عربيٍّ لا يملكها. الآن يحمل **عائلةَ الأرقام** أيضاً — وهو الفرقُ بين عمودٍ يُقرأ بالنظر وعمودٍ يُقرأ بالعدّ. */ .num{font-family:var(--font-num);direction:ltr;unicode-bidi:plaintext; font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1;} /* مؤشّر تركيز موحّد للوحة المفاتيح (إمكانية الوصول WCAG 2.4.7) */ /* الحلقة لا تلمس العنصر: outline-offset يترك فجوة بلون السطح، فتُقرأ الحلقة فوق الزرّ النحاسي وفوق البطاقة البيضاء معاً. اخترنا outline لا box-shadow لأنّ outline لا يُقصّ بـ overflow:hidden للحاويات (البطاقات والجداول تستعمله لقصّ الزوايا) — box-shadow يُقصّ. و2.5px كانت تُقرّب إلى 2px في كروم أصلاً، فصُرّح بالقيمة الفعلية. */ :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px;} /* الحقول لها مفردةُ تركيزٍ ناعمةٌ خاصّة (حلقة لون تمييز) — لا الإطار الداكن العام */ input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;} /* توحيدُ تركيز الحقول على مستوى النظام كلّه: حلقةٌ ناعمةٌ بلون التمييز في أيّ input/select/textarea، ما لم يكن حقلاً بلا حدودٍ داخل صندوقٍ له إطارُه (البحث وشريط العميل يتكفّل بهما الصندوق). */ input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus, select:focus, textarea:focus{outline:none;border-color:var(--accent);box-shadow:none;} .srch input:focus, .nfield input:focus, input[type=search]:focus{box-shadow:none;border-color:transparent;} .topbar :focus-visible{outline-color:var(--focus);} /* رابط التخطّي للمحتوى */ .skip-link{position:absolute;inset-inline-start:-9999px;top:8px;z-index:100;background:var(--accent); color:var(--on-accent);padding:10px 16px;border-radius:8px;font-weight:700;} .skip-link:focus{inset-inline-start:12px;} /* ─────────── الترويسة العلوية (داكنة متدرّجة) ─────────── */ .topbar{ background:color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); color:var(--ink); padding:0 24px; height:58px; display:flex; align-items:center; gap:18px; position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line); } .topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:var(--fs-lg);} .topbar .brand .logo{width:34px;height:34px;border-radius:11px;background:var(--accent-grad);color:#fff; display:grid;place-items:center;font-size:var(--fs-md);box-shadow:0 6px 14px -6px var(--shadow-accent);} .topbar .sp{flex:1;} .topbar .tb-act{display:flex;align-items:center;gap:6px;} .topbar .ic-btn{width:42px;height:42px;border:1px solid var(--edge);border-radius:12px;background:var(--card); color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:var(--fs-md);transition:background .18s;} .topbar .ic-btn:hover{background:var(--soft);color:var(--ink);} .topbar .user{display:flex;align-items:center;gap:9px;padding-inline-start:10px; border-inline-start:1px solid var(--line);margin-inline-start:6px;} .topbar .user .av{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink); display:grid;place-items:center;font-weight:700;} .topbar .user .nm{font-size:var(--fs-base);font-weight:700;line-height:1.1;max-width:140px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .topbar .user .rl{font-size:var(--fs-2xs);opacity:.75;} @media(max-width:640px){ .topbar{padding:0 14px;gap:10px;} .topbar .brand span:not(.logo){display:none;} .topbar .user .nm,.topbar .user .rl{display:none;} .topbar .user{padding-inline-start:6px;} } /* ─────────── شريط الأقسام الأفقي ─────────── */ .sectionbar{background:var(--card);border-bottom:1px solid var(--line);padding:0 16px; display:flex;gap:2px;overflow-x:auto;position:sticky;top:58px;z-index:30; scrollbar-width:none;-webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(to left,transparent,#000 24px); mask-image:linear-gradient(to left,transparent,#000 24px);} .sectionbar::-webkit-scrollbar{display:none;} .sectionbar a{display:flex;align-items:center;gap:var(--sp-2);padding:13px 16px;font-size:var(--fs-base); font-weight:600;color:var(--muted);white-space:nowrap;border-bottom:2.5px solid transparent;transition:all .15s;} .sectionbar a:hover{color:var(--accent-ink);background:var(--accent-soft);} .sectionbar a.on{color:var(--accent-ink);border-bottom-color:var(--accent-ink);} .sectionbar a i{font-size:var(--fs-md);} /* ─────────── تخطيط القشرة: شريط جانبي رأسي + محتوى ─────────── */ .shell{display:flex;align-items:flex-start;} .shell > main{flex:1 1 auto;min-width:0;} .sidebar{display:none;} @media(min-width:901px){ .sectionbar{display:none;} .sidebar{display:flex;flex-direction:column;gap:3px;width:216px;flex-shrink:0; position:sticky;top:58px;max-height:calc(100vh - 58px);overflow-y:auto; background:var(--card);border-inline-start:1px solid var(--line);padding:14px 10px;z-index:20;} .sidebar a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px; color:var(--muted);font-weight:600;font-size:var(--fs-base);white-space:nowrap;transition:all .14s;} .sidebar a i{font-size:var(--fs-md);width:22px;text-align:center;color:var(--muted-2);transition:color .14s;} .sidebar a:hover{background:var(--accent-soft);color:var(--accent-ink);} .sidebar a:hover i{color:var(--accent-ink);} .sidebar a.on{background:var(--grad-main);color:#fff;box-shadow:var(--shadow-sm);} .sidebar a.on i{color:#fff;} } /* ─────────── منطقة المحتوى ─────────── */ .wrap{max-width:1180px;margin:0 auto;padding:26px 24px 60px;} .co-switch{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:5px 11px;color:#fff;} .co-switch i{font-size:var(--fs-sm);opacity:.9;} .co-switch select{background:transparent;border:none;color:#fff;font-family:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer;outline:none;max-width:160px;} .co-switch select option{color:#1f2430;} .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);margin-bottom:22px;flex-wrap:wrap;} .page-head h1{font-size:var(--fs-2xl);font-weight:800;margin:0;letter-spacing:-.4px;} .page-head .sub{color:var(--muted);font-size:var(--fs-base);margin-top:3px;} /* ─────────── شبكة بطاقات الهَب ─────────── */ .hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:1.1rem;} .hcard{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--edge); border-radius:1.3rem;padding:1.6rem 1rem 1.4rem;text-align:center;display:block; box-shadow:var(--shadow-sm);cursor:pointer;transition:all .26s cubic-bezier(.4,0,.2,1);} .hcard:hover{border-color:var(--accent);} .hcard:active{border-color:var(--accent-deep);} .hicon{width:60px;height:60px;border-radius:1.1rem;margin:0 auto .85rem;display:grid;place-items:center; font-size:var(--fs-2xl);background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent-soft-2); transition:all .26s cubic-bezier(.4,0,.2,1);} .hcard:hover .hicon{background:var(--accent);color:var(--on-accent);border-color:transparent;} .hlabel{font-size:var(--fs-md);font-weight:700;color:var(--ink);} .hcard .soon{position:absolute;top:11px;inset-inline-start:11px;background:var(--soft);color:var(--muted); font-size:var(--fs-2xs);font-weight:700;padding:2px 8px;border-radius:999px;} /* بطاقة غير متاحة (قريباً): بلا حركة ولا مؤشّر نقر مضلِّل */ .hcard.disabled{opacity:.62;cursor:default;} .hcard.disabled:hover{border-color:var(--line);} .hcard.disabled:hover .hicon{transform:none;background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-soft-2);box-shadow:none;} @media(max-width:580px){.hub{grid-template-columns:repeat(2,1fr);gap:.8rem;}} /* ─────────── بطاقات إحصائية ─────────── */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:var(--sp-6);} .stat{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:16px 18px; display:flex;align-items:center;gap:13px;box-shadow:var(--shadow-sm);} .stat .ic{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink); display:grid;place-items:center;font-size:var(--fs-lg);flex-shrink:0;} .stat .ic.ok{background:var(--ok-soft);color:var(--ok-ink);} .stat .ic.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);} .stat .ic.info{background:var(--info-soft);color:var(--info-ink);} .stat .ic.bad{background:var(--bad-soft);color:var(--bad-ink);} .stat .l{font-size:var(--fs-xs);color:var(--muted);font-weight:600;} .stat .v{font-size:var(--fs-2xl);font-weight:800;color:var(--ink);line-height:1.1;margin-top:2px;} /* ─────────── الأزرار ─────────── */ .btn{border:1px solid transparent;cursor:pointer;font-family:inherit;font-weight:600;border-radius:var(--radius); padding:10px 18px;font-size:var(--fs-base);display:inline-flex;align-items:center;gap:var(--sp-2); transition:background .15s,border-color .15s,color .15s;} .btn-p{background:var(--accent);color:var(--on-accent);} .btn-p:hover{background:var(--accent-deep);} .btn-g{background:var(--card);border-color:var(--edge);color:var(--ink);} .btn-g:hover{border-color:var(--edge-2);background:var(--soft);} .btn-d{background:var(--bad);color:var(--on-status);} /* ── زرّ شريط الأدوات (.swb) — المفردة الغالبة في النظام (240 استعمالاً). كان معرَّفاً داخل كل قالب على حدة بصيَغ متفاوتة؛ هنا مصدره الوحيد. .btn = زرّ النموذج الكبير (44px) · .swb = زرّ الشريط (32px) — حجمان بوظيفتين. */ .swb{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 13px;border-radius:8px; border:1px solid var(--edge);background:var(--card);color:var(--ink);font-family:inherit; font-size:var(--fs-sm);font-weight:700;cursor:pointer;text-decoration:none;transition:.14s;white-space:nowrap;} .swb:hover{border-color:var(--muted);} .swb.pri{background:var(--accent);border-color:transparent;color:var(--on-accent);} .swb.pri:hover{background:var(--accent-deep);} .swb.sm{height:28px;font-size:var(--fs-xs);padding:0 11px;} .swb.ic{padding:0 9px;} .swb.on{background:var(--accent-soft);border-color:var(--accent-ink);color:var(--accent-ink);} .swb:disabled{background:var(--soft);border-color:var(--line);color:var(--muted);cursor:not-allowed;} .btn-d:hover{filter:brightness(.92);} /* ‏لا شفافيّة على الأزرار المعطّلة: الشفافيّة تمزج الحبر بأرضيّته فتُسقط التباين. سطحٌ محايدٌ صريح يُلغي أيضاً تدرّج ‎.btn-p‎ لأن الاختصار ‎background‎ يمسح الصورة. */ .btn:disabled{background:var(--soft);border-color:var(--line);color:var(--muted);cursor:not-allowed;box-shadow:none;} /* ─────────── نافذة التأكيد المصمّمة ─────────── */ .ac-overlay{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(2px); display:none;align-items:center;justify-content:center;z-index:1000;padding:var(--sp-5);} .ac-overlay.show{display:flex;animation:acFade .15s ease;} @keyframes acFade{from{opacity:0}to{opacity:1}} .ac-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:380px; padding:26px 24px;text-align:center;animation:acPop .18s cubic-bezier(.3,.7,.3,1);} @keyframes acPop{from{transform:scale(.96);opacity:.5}to{transform:scale(1);opacity:1}} .ac-icon{width:56px;height:56px;border-radius:50%;background:var(--warn-soft);color:var(--warn-ink);display:grid;place-items:center; font-size:var(--fs-2xl);margin:0 auto 14px;} .ac-title{font-family:var(--font-display,var(--font));font-size:var(--fs-lg);font-weight:600;color:var(--ink);margin-bottom:6px;} /* توقيع «ماس» تحت عنوان النافذة: خيط تدرج ناعم */ .ac-title::after{content:"";display:block;width:44px;height:4px;margin:8px auto 0; border-radius:4px;background:var(--accent-grad);} .ac-msg{color:var(--muted);font-size:var(--fs-base);line-height:1.6;margin-bottom:var(--sp-5);} .ac-actions{display:flex;gap:10px;justify-content:center;} .ac-actions .btn{min-width:110px;justify-content:center;} /* ─────────── قائمة «مزيد» (أرشفة/حذف) ─────────── */ .more-wrap{position:relative;display:inline-block;} .more-menu{position:absolute;top:calc(100% + 6px);inset-inline-start:0;background:var(--card); border:1px solid var(--edge);border-radius:12px;box-shadow:var(--shadow-lg);min-width:180px; padding:6px;z-index:50;display:none;} .more-menu.open{display:block;} .more-menu.mm-end{inset-inline-start:auto;inset-inline-end:0;} /* عنوان نافذة منبثقة (يُعطى لرأس أي نافذة): خط العناوين + توقيع ماس */ .mo-title{font-family:var(--font-display,var(--font));font-size:var(--fs-md);font-weight:700;color:var(--ink);} .mo-title::after{content:"";display:block;width:44px;height:4px;margin-top:7px; border-radius:4px;background:var(--accent-grad);} .more-menu form{margin:0;} .more-item{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;text-decoration:none; font-family:inherit;font-size:var(--fs-base);color:var(--ink);padding:10px 12px;border-radius:8px;cursor:pointer;text-align:start;} .more-item:hover{background:var(--soft);} .more-item i{color:var(--muted);width:16px;} .more-item.danger{color:var(--bad);} .more-item.danger:hover{background:var(--bad-soft);} /* أزرار صف الجدول (إجراءات) */ .row-actions{display:flex;gap:6px;justify-content:flex-end;} .row-actions form{margin:0;} .ic-act{width:30px;height:30px;border:1px solid var(--edge);border-radius:8px;background:var(--card); cursor:pointer;color:var(--muted);display:grid;place-items:center;font-size:var(--fs-sm);} .ic-act:hover{background:var(--soft);color:var(--ink);} .ic-act.danger:hover{background:var(--bad-soft);color:var(--bad);border-color:var(--bad);} /* ─────────── رسائل ─────────── */ .msgs{margin-bottom:18px;display:flex;flex-direction:column;gap:var(--sp-2);} .msg{padding:11px 16px;border-radius:10px;font-size:var(--fs-base);font-weight:600;border:1px solid transparent;border-inline-start-width:4px;box-shadow:var(--shadow-sm);} .msg.error{background:var(--bad-soft);color:var(--bad-ink);border-color:var(--bad);} .msg.success{background:var(--ok-soft);color:var(--ok-ink);border-color:var(--ok);} .msg.info{background:var(--info-soft);color:var(--info-ink);border-color:var(--accent-soft-2);} .msg.warning{background:var(--warn-soft);color:var(--warn-ink);border-color:var(--warn);} /* ─────────── صفحة الدخول ─────────── */ .auth-bg{min-height:100vh;display:grid;place-items:center;padding:var(--sp-6); background:var(--grad-deep);} .auth-card{background:var(--card);border-radius:22px;box-shadow:var(--shadow-lg); width:100%;max-width:400px;padding:38px 34px;} .auth-card .logo{width:62px;height:62px;border-radius:18px;background:var(--accent-grad);color:var(--on-accent); display:grid;place-items:center;font-size:var(--fs-3xl);margin:0 auto 18px;box-shadow:var(--shadow-em);} .auth-card h1{text-align:center;font-size:var(--fs-xl);font-weight:800;margin:0 0 4px;} .auth-card .tag{text-align:center;color:var(--muted);font-size:var(--fs-base);margin-bottom:26px;} .fld{margin-bottom:var(--sp-4);} .fld label{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--muted);margin-bottom:6px;} .fld input{width:100%;border:1.5px solid transparent;border-radius:11px;padding:12px 14px; font-family:inherit;font-size:var(--fs-md);background:var(--soft);color:var(--ink);transition:all .18s;} .fld input:hover{border-color:var(--edge);} /* التركيز في الحقول = مفردة الأزرار نفسها (انظر :focus-visible أعلاه): حدّ داكن ثم فجوة بلون السطح ثم حلقة داكنة. كانت هالة نحاسية بشفافية 14% ⇒ 1.06:1 على البطاقة البيضاء، أي غير مرئية كمؤشّر تركيز ومع ذلك تُقرأ «تحديداً نحاسياً» لا يليق. الحلقة الآن 14.27:1 ومستقلّة عن لون التمييز فتصمد مع أي سمة. */ .fld input:focus{outline:none;border-color:var(--accent);background:var(--card);box-shadow:0 0 0 4px var(--accent-soft);} .auth-card .btn-p{width:100%;justify-content:center;padding:13px;font-size:var(--fs-md);margin-top:var(--sp-1);} .auth-foot{text-align:center;color:var(--muted-2);font-size:var(--fs-xs);margin-top:22px;} /* ─────────── جداول القوائم ─────────── */ .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:var(--sp-4);} .toolbar .search{flex:1;min-width:200px;display:flex;align-items:center;gap:var(--sp-2);background:var(--card); border:1px solid var(--edge);border-radius:10px;padding:9px 13px;} .toolbar .search input{border:none;outline:none;background:none;font-family:inherit;font-size:var(--fs-base);width:100%;color:var(--ink);} .toolbar .search i{color:var(--muted-2);} .chips{display:flex;gap:6px;flex-wrap:wrap;} .chip{padding:7px 14px;border-radius:999px;border:1px solid var(--edge);background:var(--card); color:var(--muted);font-size:var(--fs-sm);font-weight:600;cursor:pointer;} .chip.on{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent);font-weight:700;} /* ══ لغة الجداول الواحدة ══ كانت خمس مفردات (tbl · stbl · ltbl · ctbl · invdoc) بقواعد متباينة: رأس عمود 9.6px بوزن 800 في المحاسبة، و12px بوزن 500 في المبيعات — جدولان من نظامين. هنا مصدر واحد يخدمها كلها. */ .tbl,.stbl,.ltbl,.ctbl{width:100%;border-collapse:collapse;background:var(--card); font-size:var(--fs-sm);} /* إطار الجدول عبر box-shadow لا border: مع border-collapse:collapse لا يرسم كروم حدّ الجدول نفسه إطلاقاً (أُثبت بالبكسل: حدّ أحمر 1px لا يظهر منه شيء)، فكان السطر السابق شفرة ميتة ونصف قطره 12px لم يُرسم قط. وتحويل الجدول إلى border-collapse:separate يُصلح الإطار لكنّه يضاعف كل فاصل يلتقي فيه border-bottom لصفّ مع border-top للصفّ التالي — وهذا واقع في ١٥ جدولاً على الأقل (صفوف المجاميع وtfoot) فيصير الفاصل 2px. box-shadow لا يشترك في الطيّ فيرسم دائماً. */ .tbl{border:0;border-radius:0;overflow:hidden;box-shadow:0 0 0 1px var(--edge);} /* ‏حوافُّ الجداول حادّة — قرارُ المالك: «خلها حواف كانّها حادة». القياس الذي سبقه: كانت أربعةُ أنصافِ أقطارٍ تتعايش في النظام الواحد — ‎.tbl‎ 10px داخل ‎.card‎ 10px، و‎.stbl‎ صفر داخل ‎.dcard‎ 12px، و‎.ctbl‎ صفر داخل ‎.ctwrap‎ 14px — فيقصُّ قوسُ الحاوية زوايا صفوف المجاميع الملوّنة (شريط «صافي الربح» الأخضر، وشريط الرأس الرمادي) ويقطع الفاصلَ قبل حافّته. هذا هو السببُ المقيس لملاحظة «حوافها مو مضبوطة». ولأنّ تصفيرَ الجدول وحده لا يكفي — الحاويةُ هي التي تقصّ — تُصفَّر معه الحاويةُ المباشرةُ لأيّ جدولٍ عبر ‎:has(> table)‎. ونطاقُ الانفجار مقيسٌ لا مُقدَّر: في ١٢ صفحةً مسحوبة طابَقَ المحدِّدُ حاويةَ الجدول وحدها، وصفرَ عناصرَ في الصفحات التي لا جدولَ فيها (اللوحة، الفروع). فالبطاقاتُ التي لا تحضن جدولاً تحتفظ بانحنائها كما هو. */ /* «ماس»: الحواف عادت ناعمة بقرار المالك — البطاقة الحاوية تقصّ الجدول بقوسها (overflow:hidden قائم في البطاقات الملتصقة) فلا حاجة لتصفير الأقواس. */ /* كان هنا: .card .tbl,.panel .tbl{box-shadow:none;border-radius:0;} القاعدة كانت تفترض أن كل بطاقة حاوية «ملتصقة» (padding:0;overflow:hidden) فتقصّ الجدولَ بحوافّها. وهذا صحيح في ٥٤ بطاقة — لكن ٦٧ بطاقة أخرى ذات حشو افتراضي (padding:24px 26px; overflow:visible) فيبقى جدولها بلا نصف قطر ولا حلقة ولا قصّ، فتُرسم صفوف المجاميع الملوّنة مستطيلاتٍ حادّة الزوايا داخل بطاقة مستديرة. وهذا هو السبب المقيس لملاحظة «حواف البطاقة». الحلّ ليس تعديل ١٢١ قالباً بل حذف القاعدة: في البطاقة الملتصقة يقع ظلّ الجدول (0 0 0 1px، للخارج) خارج صندوق الحشو تماماً فيقصّه overflow، ونصف قطره 10px مطابق لنصف قطر البطاقة — فلا فرق بكسل واحد. وفي البطاقة المحشوّة يستعيد الجدول حلقته وحوافّه. تحقّق: لا بطاقة flush بلا overflow (صفر)، ولا عنصر .panel في النظام يحوي .tbl (فالشقّ الثاني شفرة ميتة). */ .tbl thead th,.stbl thead th,.ltbl thead th,.ctbl thead th{ background:var(--soft);color:var(--muted);text-align:start; font-size:var(--fs-2xs);font-weight:700;letter-spacing:.01em; height:34px;padding:0 14px;white-space:nowrap; border-bottom:1px solid var(--line);} /* لا رأس ملتصق: البطاقات الحاوية تستعمل overflow:hidden (لقصّ الزوايا)، وهي تُبطل position:sticky. الالتصاق يحتاج حاوية تمرير لكل جدول — لا يُفرض عالمياً. */ .tbl tbody td,.stbl tbody td,.ltbl tbody td,.ctbl tbody td{ height:40px;padding:5px 14px;border-bottom:1px solid var(--line); color:var(--ink);vertical-align:middle;} .tbl tbody tr:last-child td,.stbl tbody tr:last-child td{border-bottom:none;} .tbl tbody tr,.stbl tbody tr{transition:background .12s;} .tbl tbody tr:hover td,.stbl tbody tr:hover td{background:var(--soft);} .tbl tbody tr[onclick],.stbl tbody tr[onclick]{cursor:pointer;} /* الأرقام: خانات ثابتة العرض وتصطفّ تحت بعضها — لكل عائلات الجداول (tbl·stbl·ltbl·ctbl·rtbl). القيمة ورأسها الرقمي (num/n) يأخذان direction:ltr معاً كي يستقرّا على الحافّة نفسها، ويُصحّح ذلك أيضاً انعكاس المدى اللاتيني في الرؤوس (مثل «31–60» كان يظهر «60–31»). قبلها: th.num بلا direction، و.rtbl غير مشمول أصلاً ⇒ اختلال محاذاة/انعكاس في جداول التقارير. */ .tbl .num,.stbl .num,.ltbl .num,.ctbl .num,.rtbl .num, .tbl .amt,.stbl .amt,.rtbl .amt, .tbl td.n,.stbl td.n,.ltbl td.n,.ctbl td.n,.rtbl td.n, .tbl th.n,.stbl th.n,.ltbl th.n,.ctbl th.n,.rtbl th.n, .tbl thead th.num,.stbl thead th.num,.ltbl thead th.num,.ctbl thead th.num,.rtbl thead th.num{ direction:ltr;unicode-bidi:plaintext;text-align:end;white-space:nowrap; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;} /* رأس العمود الرقمي نصّه عربي («الرصيد»): مع unicode-bidi:plaintext يُحاذى العربي لليسار بينما الأرقام أسفله لليمين ⇒ اختلال ظاهر. نُجبر الرأس على محاذاة يمين فيزيائية (بلا plaintext) فيقف نصّ الرأس فوق الأرقام تماماً. (الرقم يبقى LTR بقاعدته أعلاه). */ /* بعض القوائم المالية تبني رأسها بـ داخل لا (قائمة الدخل والميزانية)، فكانت تفوتها هذه القاعدة ⇒ رأس «الفترة الحالية» يُحاذى بقاعدة plaintext بينما أرقامه أسفله بقاعدة أخرى = اختلال ظاهر. thead td.num مشمول الآن. */ .tbl thead th.num,.stbl thead th.num,.ltbl thead th.num,.ctbl thead th.num,.rtbl thead th.num, .tbl thead th.n,.stbl thead th.n,.ltbl thead th.n,.ctbl thead th.n,.rtbl thead th.n, .tbl thead td.num,.stbl thead td.num,.ltbl thead td.num,.ctbl thead td.num,.rtbl thead td.num, .tbl thead td.n,.stbl thead td.n,.ltbl thead td.n,.ctbl thead td.n,.rtbl thead td.n{ unicode-bidi:normal;direction:inherit;text-align:right;} .tbl a.row-link,.stbl a.row-link,.stbl .ref{color:var(--accent-ink);font-weight:700;text-decoration:none;} .tbl a.row-link:hover,.stbl a.row-link:hover{text-decoration:underline;} .tbl .row-actions,.stbl .row-actions{white-space:nowrap;text-align:end;} /* تحديد الصف (بعد نقر زر داخله = focus-within): تظليل صفّ واحد نظيف متّصل — خلفية + خطّ علوي/سفلي بلون مميّز عبر box-shadow (يمتدّ عبر الصف كلّه بلا صناديق مؤطّرة لكل خلية ولا قفزة تخطيط). قبلها كان outline لكل td يقسّم الصف إلى صناديق منفصلة (شكل غير احترافي). */ .tbl tbody tr:focus-within td{background:var(--accent-soft);} .tbl tbody tr:focus-within td:first-child{box-shadow:inset -3px 0 0 var(--accent);} html[dir="ltr"] .tbl tbody tr:focus-within td:first-child{box-shadow:inset 3px 0 0 var(--accent);} .emptyrow{text-align:center;color:var(--muted);padding:26px 12px!important;} .badge{font-size:var(--fs-xs);font-weight:700;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);} .badge.stock{background:var(--ok-soft);color:var(--ok-ink);} .badge.service{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);} .badge.subscription{background:var(--info-soft);color:var(--info-ink);} /* .empty معرّف أدناه مرة واحدة — كان مكرّراً هنا بقيم متعارضة. */ /* ═══ شريط الحالات الملوّن (فلتر دلالي) — مكوّن عام لكل القوائم ═══ */ .sfbar{display:inline-flex;flex-wrap:wrap;gap:7px;background:transparent;border:0; border-radius:0;padding:0;margin-bottom:18px;max-width:100%;} .sfltr{--t:var(--accent);position:relative;display:inline-flex;align-items:center;gap:var(--sp-2);padding:5px 13px;border-radius:999px; font-size:var(--fs-sm);font-weight:700;color:var(--muted);text-decoration:none;white-space:nowrap;border:1px solid var(--edge); font-family:inherit;cursor:pointer;background:var(--card); transition:background .15s,color .15s,border-color .15s;} .sfltr .dot{width:8px;height:8px;border-radius:50%;background:var(--t);flex-shrink:0;} .sfltr .cnt{font-size:var(--fs-2xs);font-weight:700;padding:1px 8px;border-radius:99px;direction:ltr; background:color-mix(in srgb,var(--t) 14%,transparent);color:var(--t);} .sfltr:hover:not(.on){color:var(--ink);border-color:color-mix(in srgb,var(--t) 45%,var(--edge));} .sfltr.on{color:var(--t);background:color-mix(in srgb,var(--t) 10%,transparent);border-color:var(--t);} .sfltr.on .cnt{background:color-mix(in srgb,var(--t) 16%,transparent);color:var(--t);} .tone-gray{--t:var(--muted-2);}.tone-green{--t:var(--ok);}.tone-amber{--t:var(--warn);} .tone-rose{--t:var(--bad);}.tone-blue{--t:#4f8bff;}.tone-teal{--t:#22d3ee;}.tone-violet{--t:var(--accent);} /* ═══ مبدّل الشركة العام في الهيدر (تبديل فوري من أي شاشة) ═══ */ .co-switch{position:relative;} .co-switch .co-chip{cursor:pointer;} .co-drop{position:absolute;top:calc(100% + 8px);inset-inline-start:0;z-index:60;width:276px;max-width:86vw;background:var(--bg); border:1px solid var(--accent-soft-2);border-radius:14px;box-shadow:var(--shadow-lg);padding:7px;display:none;max-height:70vh;overflow-y:auto;} .co-drop.show{display:block;} .co-drop-h{font-size:var(--fs-2xs);font-weight:800;color:var(--muted);padding:7px 10px 6px;} .co-sr{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;color:var(--ink);} .co-sr:hover{background:var(--accent-soft);} .co-sr.cur{background:var(--accent-soft);} .co-sr-av{width:30px;height:30px;border-radius:9px;background:var(--accent-grad);display:grid;place-items:center;color:var(--on-accent);font-weight:900;font-size:var(--fs-sm);flex-shrink:0;} .co-sr-nm{flex:1;font-weight:700;font-size:var(--fs-base);min-width:0;} .co-sr-nm small{display:block;color:var(--muted);font-weight:500;font-size:var(--fs-2xs);} .co-sr-chk{color:var(--accent-ink);font-size:var(--fs-sm);flex-shrink:0;} .co-drop-f{display:flex;align-items:center;gap:var(--sp-2);border-top:1px solid var(--line);margin-top:5px;padding:10px;text-decoration:none;color:var(--accent-ink);font-weight:800;font-size:var(--fs-sm);} .co-drop-f:hover{background:var(--accent-soft);border-radius:0 0 10px 10px;} /* ─────────── النماذج ─────────── */ /* الحافّة: 18px كانت طريّة أكثر ممّا يليق بنظام محاسبي — 10px (var(--radius)) أحدّ وأقرب للأنظمة العالمية. والحدّ صار var(--edge) بدل var(--line) ليُرى فعلاً. */ .card{background:var(--card);border:1px solid var(--edge);border-radius:var(--radius);padding:24px 26px;margin-bottom:18px;box-shadow:var(--shadow-sm);} .card h2{font-size:var(--fs-md);font-weight:800;margin:0 0 18px;color:var(--accent-ink);padding-inline-start:12px;border-inline-start:3px solid var(--accent);line-height:1.15;letter-spacing:-.01em;} .fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px;} .frow{display:flex;flex-direction:column;gap:6px;} .frow.full{grid-column:1/-1;} .frow label{font-size:var(--fs-sm);font-weight:700;color:var(--muted);letter-spacing:.01em;} /* علامة «!» توضيحية موحّدة لكل النظام: شرح مخفيّ يظهر بالتمرير عليها (title). للتلميحات المساعدة فقط — لا للتحذيرات أو رسائل الحالة التي يجب أن تبقى ظاهرة. */ .hlp{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%; background:var(--accent-soft);color:var(--accent-ink);font-size:11px;font-weight:800;line-height:1; cursor:help;vertical-align:middle;margin-inline-start:5px;user-select:none;transition:.12s;} .hlp:hover{background:var(--accent);color:var(--on-accent);} /* حقول هادئة (قرار المالك): بلا حدٍّ بارز في السكون — الخلفية الرمادية تكفي شكلاً، والحدُّ يظهر عند التأشير ويكتمل بالتركيز. */ .frow input,.frow select,.frow textarea{border:1.5px solid transparent;border-radius:12px;padding:11px 14px; font-family:inherit;font-size:var(--fs-base);background:var(--soft);color:var(--ink);width:100%;box-sizing:border-box; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;} .frow input::placeholder,.frow textarea::placeholder{color:var(--muted-2);} .frow input:hover,.frow select:hover,.frow textarea:hover{border-color:var(--edge);} .frow input:focus,.frow select:focus,.frow textarea:focus{outline:none;border-color:var(--accent);background:var(--card);box-shadow:0 0 0 4px var(--accent-soft);} .frow select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-start:40px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:left 14px center;background-size:13px;} .frow.check{flex-direction:row;align-items:center;gap:9px;} .frow.check input{width:auto;} /* ══ شريط الأدوات: مفردة قياس واحدة ══ كان الشريط يجمع في ٤٠px: أربعة أنصاف أقطار (12 · 10 · 8 · 5 والبطاقة 18)، وثلاثة أحجام خطّ (12.25 · 11.375 · 10.08)، وسطحين (الحقل --soft والزرّ أبيض)، وارتفاعين (الحقل 42 والزرّ 32) — فرؤوس العناصر مسنّنة وصندوق تاريخ عرضه 297px لعشرة محارف. هنا يهبط الحقل إلى قياس .swb نفسه: 32px · نصف قطر 8 · سطح البطاقة · حجم fs-sm. ملاحظة: لا نلمس align-items في القوالب — حين تتساوى الارتفاعات يستوي end وcenter. */ .tbar .frow,.page-head .frow{flex-direction:row;align-items:center;gap:var(--sp-2);margin:0;} .tbar .frow>label,.page-head .frow>label{font-size:var(--fs-xs);font-weight:700;color:var(--muted);white-space:nowrap;} .tbar .frow input,.tbar .frow select,.tbar .frow .dwrap, .page-head .frow input,.page-head .frow select,.page-head .frow .dwrap{ height:32px;width:auto;padding:0 11px;border:1px solid var(--edge);border-radius:8px; background:var(--card);font-size:var(--fs-sm);font-weight:600;} .tbar .frow .dwrap,.page-head .frow .dwrap{padding:0;border:0;background:transparent;} .tbar .frow .dwrap input.jdate,.page-head .frow .dwrap input.jdate{width:132px;} .tbar .frow select,.page-head .frow select{padding-inline-start:34px;background-position:left 11px center;} /* كتلة الشريط أعلاه بنفس أولوية `.frow input:focus` (0,2,1) وتأتي بعدها، فكانت تُعيد لون الحدّ إلى --edge عند التركيز فتضيع الحلقة المزدوجة. هذه (0,3,1) فتُرجعها. */ .tbar .frow input:focus,.tbar .frow select:focus, .page-head .frow input:focus,.page-head .frow select:focus{border-color:var(--focus);} .form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;} @media(max-width:680px){.fgrid{grid-template-columns:1fr;}} /* ═══════════ قسم المنتجات بمستوى Odoo ═══════════ */ /* شريط التحكّم */ .cpanel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px; background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:9px 12px;box-shadow:var(--shadow-sm);} .cpanel .search{flex:1;min-width:180px;display:flex;align-items:center;gap:var(--sp-2);} .cpanel .search input{border:none;outline:none;background:none;font-family:inherit;font-size:var(--fs-base);width:100%;color:var(--ink);} .cpanel .search i{color:var(--muted-2);} .cp-select{border:1px solid var(--edge);border-radius:9px;padding:8px 12px;font-family:inherit; font-size:var(--fs-base);background:var(--soft);color:var(--ink);font-weight:600;cursor:pointer;} .vtoggle{display:flex;border:1px solid var(--edge);border-radius:9px;overflow:hidden;} .vtoggle button{border:none;background:var(--card);color:var(--muted);padding:8px 13px;cursor:pointer;font-size:var(--fs-base);} .vtoggle button.on{background:var(--accent);color:var(--on-accent);} /* رؤوس التجميع */ .group-head{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--accent-ink); font-size:var(--fs-md);margin:18px 0 12px;padding-bottom:var(--sp-2);border-bottom:2px solid var(--accent-soft-2);} .group-head i{color:var(--accent-ink);} .group-count{background:var(--accent-soft);color:var(--accent-ink);font-size:var(--fs-xs);font-weight:700; padding:2px 10px;border-radius:999px;} /* شبكة بطاقات المنتجات (كانبان) */ .pk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px;margin-bottom:var(--sp-2);} .pk-card{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:14px; display:flex;flex-direction:column;gap:var(--sp-3);box-shadow:var(--shadow-sm);transition:all .2s cubic-bezier(.3,.7,.3,1);color:var(--ink);} .pk-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--accent-soft-2);} .pk-top{display:flex;align-items:flex-start;gap:11px;} .pk-thumb{width:48px;height:48px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink); display:grid;place-items:center;font-size:var(--fs-xl);flex-shrink:0;overflow:hidden;border:1px solid var(--accent-soft-2);} .pk-thumb img{width:100%;height:100%;object-fit:cover;} .pk-head{flex:1;min-width:0;} .pk-name{font-weight:700;font-size:var(--fs-md);line-height:1.3;overflow:hidden;text-overflow:ellipsis; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .pk-ref{font-size:var(--fs-2xs);color:var(--muted-2);margin-top:2px;} .pk-body{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-2);} .pk-price{font-size:var(--fs-xl);font-weight:800;color:var(--ink);line-height:1;} .pk-price small{font-size:var(--fs-2xs);color:var(--muted-2);font-weight:600;} .pk-metrics{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-1);} .pk-metrics .m{font-size:var(--fs-xs);color:var(--muted);} .pk-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding-top:10px;border-top:1px solid var(--soft);} .pk-tags{display:flex;gap:5px;flex-wrap:wrap;min-width:0;} /* وسم حالة (لا يُنقر) — كان مسمّى .chip في ٦ قوالب بصيَغ متضاربة، والاسم محجوز لرقاقة التصفية التفاعلية أدناه. الوسم هنا هو المصدر الوحيد. */ /* لغة أخطاء واحدة لكل نماذج النظام (templates/_form_errors.html). كانت ثلاث لغات: مفتاح إنجليزي بالمورد والمنتج · حقل واحد بالعميل · لا شيء بالقيد. */ .form-errors{background:var(--bad-soft);border:1px solid var(--bad);border-radius:12px; padding:12px 15px;margin-bottom:14px;} .form-errors .fe-h{font-weight:800;color:var(--bad-ink,var(--bad));margin-bottom:6px;font-size:var(--fs-base);} .form-errors ul{margin:0;padding-inline-start:20px;} .form-errors li{font-size:var(--fs-sm);color:var(--ink);line-height:1.9;} .form-errors li b{font-weight:700;} .ferr-field{border-color:var(--bad)!important;box-shadow:0 0 0 3px var(--bad-soft)!important;} .tag{display:inline-block;font-size:var(--fs-2xs);font-weight:600;padding:2px 9px;border-radius:999px; background:var(--soft);color:var(--muted);border:1px solid var(--edge);white-space:nowrap;} .tag.stk{background:var(--ok-soft);color:var(--ok-ink);border-color:transparent;} .tag.srv{background:var(--warn-soft);color:var(--warn-ink);border-color:transparent;} .tag.sub,.tag.acc{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent;} .tag.up{background:var(--ok-soft);color:var(--ok-ink);border-color:transparent;font-weight:800;} .tag.down{background:var(--bad-soft);color:var(--bad-ink);border-color:transparent;font-weight:800;} .tag.num{direction:ltr;font-variant-numeric:tabular-nums;} .pk-dot{width:9px;height:9px;border-radius:50%;background:var(--muted-2);flex-shrink:0;} .pk-dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(16,185,129,.18);} /* نموذج المنتج: رأس + تبويبات */ .pform-head{display:flex;gap:18px;align-items:flex-start;} .pform-img{width:88px;height:88px;border-radius:12px;background:var(--soft);border:1px dashed var(--line); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);color:var(--muted-2); font-size:var(--fs-xl);cursor:pointer;flex-shrink:0;} .pform-img span{font-size:var(--fs-2xs);} .pform-title{flex:1;min-width:0;} .pform-title .frow input{font-size:var(--fs-lg);font-weight:700;} .pform-flags{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-3);} .pform-flags .flag{display:flex;align-items:center;gap:7px;font-size:var(--fs-base);color:var(--ink);cursor:pointer;} .ftabs{display:flex;gap:3px;border-bottom:1px solid var(--line);margin:18px 0 16px;overflow-x:auto;} .ftabs button{border:none;background:none;cursor:pointer;font-family:inherit;font-weight:700;font-size:var(--fs-base); color:var(--muted);padding:11px 18px;border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap;} .ftabs button.on{color:var(--accent-ink);border-bottom-color:var(--accent-ink);} .fpane{display:none;}.fpane.on{display:block;} .margin-box{background:var(--accent-soft);border:1px solid var(--accent-soft-2);border-radius:10px; padding:11px 15px;font-size:var(--fs-base);color:var(--accent-ink);font-weight:600;} .margin-box b{font-size:var(--fs-md);} .econ{display:flex;gap:26px;flex-wrap:wrap;align-items:center;} .econ span{font-size:var(--fs-base);color:var(--muted);} .econ b{font-size:var(--fs-md);color:var(--ink);} /* أزرار ذكية (Smart Buttons) أعلى النموذج */ .smartbar{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4);} .smartbar .sbtn{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--edge); border-radius:12px;padding:11px 16px;min-width:150px;box-shadow:var(--shadow-sm);color:var(--ink);text-decoration:none;transition:all .15s;} .smartbar .sbtn:hover{border-color:var(--accent-soft-2);box-shadow:var(--shadow);} .smartbar .sbtn i{font-size:var(--fs-xl);color:var(--accent-ink);} .smartbar .sbtn .v{font-size:var(--fs-xl);font-weight:800;line-height:1;} .smartbar .sbtn .l{font-size:var(--fs-xs);color:var(--muted);font-weight:600;margin-top:2px;} .smartbar .sbtn.soon{opacity:.6;cursor:default;} /* رأس كشف الحساب + فلتر التاريخ + الترقيم */ .stmt-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:18px 0 12px;} .stmt-head h2{font-size:var(--fs-md);font-weight:800;margin:0;color:var(--accent-ink);} .datefilter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--edge);border-radius:10px;padding:7px 12px;} .datefilter label{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--muted);font-weight:600;} .datefilter input[type=date]{border:1px solid var(--edge);border-radius:8px;padding:6px 10px;font-family:inherit;font-size:var(--fs-base);background:var(--soft);color:var(--ink);} .pager{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;flex-wrap:wrap;gap:10px;} /* صيغة الأغلبية: الطرفان لا التوسيط */ /* بطاقات المحافظ */ .wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp-4);} .wcard{background:var(--card);border:1px solid var(--edge);border-radius:16px;padding:18px;display:block; box-shadow:var(--shadow-sm);color:var(--ink);transition:all .2s cubic-bezier(.3,.7,.3,1);position:relative;overflow:hidden;} .wcard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--accent-grad);opacity:0;transition:opacity .2s;} .wcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--accent-soft-2);} .wcard:hover::before{opacity:1;} .wcard-top{display:flex;align-items:center;gap:11px;margin-bottom:var(--sp-3);} .wicon{width:44px;height:44px;border-radius:12px;background:var(--accent-grad);color:var(--on-accent);display:grid;place-items:center;font-size:var(--fs-lg);box-shadow:var(--shadow-em);overflow:hidden;} .wicon img{width:100%;height:100%;object-fit:contain;background:#fff;} .wname{font-weight:800;font-size:var(--fs-md);} .wmain{font-size:var(--fs-3xl);font-weight:800;color:var(--ink);line-height:1;margin-bottom:14px;} .wmain small{font-size:var(--fs-xs);color:var(--muted-2);font-weight:600;} .wrows{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--soft);padding-top:var(--sp-3);} .wrows div{display:flex;justify-content:space-between;font-size:var(--fs-sm);} .wrows div span{color:var(--muted);} .wrows .wtotal{font-weight:800;color:var(--accent-ink);border-top:1px dashed var(--line);padding-top:7px;margin-top:1px;} /* الإجراءات الجماعية */ .bulkbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--accent-soft); border:1px solid var(--accent-soft-2);border-radius:12px;padding:10px 14px;margin-bottom:14px;} .bulkbar .bcount{font-weight:700;color:var(--accent-ink);font-size:var(--fs-base);} .bulkbar .bsep{width:1px;height:22px;background:var(--accent-soft-2);} .bulkbar .binput{width:110px;border:1px solid var(--edge);border-radius:8px;padding:7px 10px;font-family:inherit;font-size:var(--fs-base);background:var(--card);color:var(--ink);} .btn-sm{padding:7px 13px;font-size:var(--fs-sm);border-radius:8px;} /* خانة تحديد بطاقة الكانبان */ .pk-card{position:relative;} .pk-check{position:absolute;top:10px;inset-inline-end:10px;width:20px;height:20px;z-index:3;cursor:pointer; accent-color:var(--accent-ink);background:var(--card);border-radius:5px;box-shadow:0 0 0 2px var(--card);} /* ═══════════ إصلاح المحاذاة (RTL) ═══════════ */ /* الأعمدة الرقمية: الرأس والقيمة كلاهما يُحاذى لليمين (بداية RTL) فيتطابقان */ .tbl th.num,.tbl td.num{text-align:right;} /* رؤوس الجداول النصية تبدأ من اليمين */ .tbl th{text-align:right;} /* فلاتر شريط التحكّم تأخذ شكلاً موحّداً */ .cpanel select{border:1px solid var(--edge);border-radius:9px;padding:8px 12px;font-family:inherit; font-size:var(--fs-base);background:var(--soft);color:var(--ink);font-weight:600;cursor:pointer;} /* ═══════════ مستند العملية متعدد الأسطر ═══════════ */ /* شارة العدّاد على بطاقة الهَب */ .hbadge{position:absolute;top:11px;inset-inline-end:12px;min-width:22px;height:22px;padding:0 6px; background:var(--accent);color:var(--on-accent);font-size:var(--fs-xs);font-weight:800;border-radius:999px; display:grid;place-items:center;box-shadow:var(--shadow-sm);z-index:2;} /* شارات الحالة */ .badge.ok{background:var(--ok-soft);color:var(--ok-ink);} .badge.warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);} .badge.bad{background:var(--bad-soft);color:var(--bad-ink);} .badge.info{background:var(--info-soft);color:var(--info-ink);} /* خط مراحل المستند */ .pipe{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:2px 0 18px;} .pstep{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:60px;} .pstep .pdot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--info-soft);color:var(--muted);border:2px solid var(--line);font-size:var(--fs-xs);transition:.2s;} .pstep .plbl{font-size:var(--fs-2xs);color:var(--muted);white-space:nowrap;} .pstep.done .pdot{background:var(--ok-soft);color:var(--ok-ink);border-color:var(--ok);} .pstep.done .plbl{color:var(--ok-ink);} .pstep.current .pdot{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-ink);box-shadow:0 0 0 3px var(--accent-soft);} .pstep.current .plbl{color:var(--accent-ink);font-weight:700;} .pstep.skip{opacity:.4;} .pstep.cancel .pdot{background:var(--bad-soft);color:var(--bad-ink);border-color:var(--bad);} .pstep.cancel .plbl{color:var(--bad-ink);} /* ‏كان اسمُه ‎.pbar‎ — وهو اسمٌ عامٌّ في ورقةٍ عامّة، فاصطدم بثلاث صفحاتٍ تسمّي شريطَ أزرارها ‎.pbar‎ أيضاً (تقرير Z، مدفوعات الشبكة، نموذج الحملة). النتيجة: ‎height:2px‎ يهبط على شريط الأزرار فينهار إلى سطرين، وتتراكب الأزرار مع الورقة تحتها، وتُطلى بخلفية ‎--line‎ الرمادية. قِيس: ‎.pbar‎ ارتفاعُه 2px وأبناؤه 22px. رُبِط الاسم بعائلته ‎.pstep‎ فاستحال التصادم. */ .pstep-bar{flex:1;height:2px;min-width:20px;background:var(--line);} .pstep-bar.on{background:var(--ok);} /* جدول الأسطر */ /* جدول الأسطر: overflow مرئي حتى لا تُقصّ قائمة الإكمال المنسدلة تحت الصف */ .lines-tbl{overflow:visible;} .lines-tbl td{padding:7px 10px;vertical-align:middle;overflow:visible;} .lines-tbl input[type=text],.lines-tbl input[type=number]{width:100%;border:1.5px solid var(--edge); border-radius:8px;padding:8px 10px;font-family:inherit;font-size:var(--fs-base);background:var(--soft);color:var(--ink);} /* حشوة الخلية 7px×10px تستوعب حلقة 2px بفجوة 2px دون تلامس مع خلية الجوار */ .lines-tbl input:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus);background:var(--card);box-shadow:none;} .line-row .line-qty,.lines-tbl input[inputmode=decimal]{text-align:right;direction:ltr;} .btn-x{width:30px;height:30px;border:1px solid var(--edge);background:var(--card);color:var(--bad); border-radius:8px;cursor:pointer;font-size:var(--fs-lg);line-height:1;display:grid;place-items:center;} .btn-x:hover{background:var(--bad-soft);border-color:var(--bad);} /* الإكمال التلقائي (اسم مستقل تفادياً لتضارب .ac-box الخاص بنافذة التأكيد) */ .ac-wrap{position:relative;} .ac-pop{position:absolute;top:calc(100% + 4px);inset-inline-start:0;inset-inline-end:0;z-index:50; background:var(--card);border:1px solid var(--edge);border-radius:10px;box-shadow:var(--shadow-lg); max-height:260px;overflow:auto;animation:acPop .14s cubic-bezier(.3,.7,.3,1);text-align:start;} .ac-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px; font-size:var(--fs-base);cursor:pointer;border-bottom:1px solid var(--soft);} .ac-item:last-child{border-bottom:none;} .ac-item.on,.ac-item:hover{background:var(--accent-soft);} .ac-bar{font-size:var(--fs-xs);color:var(--muted-2);direction:ltr;font-variant-numeric:tabular-nums;} /* ═══════════ صندوق بحث/إضافة (combobox) ═══════════ */ .combo{position:relative;} .combo-input{width:100%;} .combo-pop{position:absolute;top:38px;inset-inline:0;z-index:40;background:var(--card);border:1px solid var(--edge);border-radius:9px;box-shadow:var(--shadow-lg);max-height:240px;overflow:hidden auto;display:none;} /* صيغة الاستوديوهات (اتفقت عليها المبيعات والمشتريات والمنتجات) */ .combo-item{padding:9px 12px;font-size:var(--fs-base);cursor:pointer;border-bottom:1px solid var(--soft);} .combo-item:hover,.combo-item.on{background:var(--accent-soft);} .combo-add{padding:8px 12px;font-size:13px;color:var(--accent-ink);font-weight:500;cursor:pointer;border-top:1px solid var(--line);} /* موحّد */ .combo-add:hover{background:var(--accent-soft);} /* نافذة الإضافة السريعة */ .qc-ov{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);} .qc-box{background:var(--card);border-radius:16px;box-shadow:var(--shadow-lg);padding:var(--sp-6);width:100%;max-width:420px; animation:acPop .16s cubic-bezier(.3,.7,.3,1);} /* ═══════════ لوحة جانبية للمعاينة (peek drawer) ═══════════ */ .peek-ov{position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:150;display:none;} .peek-ov.open{display:block;} .peek-panel{position:fixed;top:0;inset-inline-start:0;height:100%;width:min(560px,92vw);background:var(--bg); box-shadow:var(--shadow-lg);transform:translateX(-104%);transition:transform .22s cubic-bezier(.3,.7,.3,1); overflow:auto;padding:22px;} html[dir=rtl] .peek-panel{inset-inline-start:auto;inset-inline-end:0;transform:translateX(104%);} .peek-ov.open .peek-panel{transform:translateX(0);} .peek-close{position:absolute;top:14px;inset-inline-start:14px;width:34px;height:34px;border-radius:9px;border:1px solid var(--edge); background:var(--card);color:var(--ink);cursor:pointer;font-size:var(--fs-lg);} .peek-loading{padding:var(--sp-10);text-align:center;color:var(--muted);} /* ═══════════ محور أمر الشراء (PO hub) ═══════════ */ .po-steps{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4);} .po-step{flex:1;min-width:120px;text-align:center;padding:10px 8px;border-radius:10px;font-size:var(--fs-sm);font-weight:700; background:var(--soft);color:var(--muted);border:1px solid var(--edge);} .po-step.done{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-soft-2);} .po-step i{margin-inline-end:5px;} .smart-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:var(--sp-5);} .smart-card{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-sm);} .smart-card .sc-n{font-size:var(--fs-3xl);font-weight:800;line-height:1;color:var(--accent-ink);} .smart-card .sc-l{font-size:var(--fs-base);font-weight:700;color:var(--ink);margin:4px 0 10px;} .smart-card .sc-l i{color:var(--accent-ink);margin-inline-end:5px;} .smart-card .sc-bar{height:7px;border-radius:99px;background:var(--soft);overflow:hidden;} .smart-card .sc-bar span{display:block;height:100%;background:var(--accent-grad);border-radius:99px;} .smart-card .sc-sub{font-size:var(--fs-xs);color:var(--muted-2);margin-top:5px;} .dpane{display:none;} .dpane.on{display:block;animation:acPop .14s cubic-bezier(.3,.7,.3,1);} /* ═══════════ مستند محاسبي: شبكة الأسطر المحسّنة (doc_lines) ═══════════ */ .doc-grid{border:1px solid var(--edge);border-radius:14px;overflow:visible;box-shadow:var(--shadow-sm);} .doc-grid table{width:100%;border-collapse:collapse;background:var(--card);border-radius:14px;} .doc-grid thead th{background:var(--accent);color:var(--on-accent);font-size:var(--fs-xs);font-weight:700;padding:12px 13px; text-align:right;white-space:nowrap;letter-spacing:.02em;text-transform:none;} .doc-grid thead th:first-child{border-top-right-radius:11px;} .doc-grid thead th:last-child{border-top-left-radius:11px;} .doc-grid thead th.num{text-align:center;} .doc-grid tbody td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle;} .doc-grid tbody tr:last-child td{border-bottom:none;} .doc-grid tbody tr:hover td{background:var(--accent-soft);} .doc-grid .line-row.warn-row td{background:color-mix(in srgb,var(--warn) 14%,transparent);} .doc-grid input{width:100%;border:1.5px solid var(--edge);border-radius:10px;padding:9px 11px; font-family:inherit;font-size:var(--fs-base);background:var(--soft);color:var(--ink);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;} .doc-grid input:hover{border-color:var(--accent-soft-2);} .doc-grid input::placeholder{color:var(--muted-2);} .doc-grid input:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus);background:var(--card);box-shadow:none;} .doc-grid td.num input{text-align:center;direction:ltr;font-variant-numeric:tabular-nums;} .doc-grid td.num{text-align:center;} .doc-grid .cell-item{min-width:240px;} .doc-grid .cell-x{width:44px;text-align:center;} .doc-grid .l-total{font-weight:800;color:var(--accent-ink);direction:ltr;font-variant-numeric:tabular-nums;white-space:nowrap;} .doc-grid col.c-qty,.doc-grid col.c-cost{width:120px;} .doc-grid col.c-disc,.doc-grid col.c-tax{width:84px;} .doc-grid col.c-total{width:120px;} /* خلية ناقصة (تحقّق) */ .doc-grid td.cell-bad input{border-color:var(--bad);background:var(--bad-soft);box-shadow:0 0 0 3px rgba(220,38,38,.12);} /* مصدر التكلفة (شارة صغيرة تحت اسم الصنف) */ .cost-src{display:none;font-size:var(--fs-2xs);font-weight:700;margin-top:var(--sp-1);padding:1px 8px;border-radius:999px;width:fit-content;} .cost-src.ok{background:var(--ok-soft);color:var(--ok-ink);} .cost-src.warn{background:var(--warn-soft);color:var(--warn-ink);} .cost-src.bad{background:var(--bad-soft);color:var(--bad-ink);} /* عناصر قائمة الإكمال: السعر + الباركود */ .ac-item .ac-nm{font-weight:600;} .ac-item .ac-meta{display:flex;align-items:center;gap:var(--sp-3);} .ac-item .ac-cost{font-size:var(--fs-xs);font-weight:700;color:var(--accent-ink);direction:ltr;font-variant-numeric:tabular-nums;} /* لوحة الإجماليات (أسلوب مستند) */ .doc-totals{display:flex;justify-content:flex-start;margin-top:14px;} .doc-totals .tt{min-width:330px;background:var(--soft);border:1px solid var(--edge);border-radius:14px;padding:14px 18px;} [data-theme="aurora"] .doc-totals .tt{background:rgba(255,255,255,.05);} .doc-totals .r{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:var(--fs-base);color:var(--muted);} .doc-totals .r b,.doc-totals .r .num{color:var(--ink);font-weight:700;direction:ltr;font-variant-numeric:tabular-nums;} .doc-totals .r.disc .num{color:var(--bad);} .doc-totals .r.grand{border-top:1.5px solid var(--line);margin-top:6px;padding-top:var(--sp-3);} .doc-totals .r.grand span{font-weight:800;color:var(--ink);} .doc-totals .r.grand .num{color:var(--accent-ink);font-weight:900;font-size:var(--fs-lg);} /* ============================================================ المرحلة ٢ — التنقّل العام: Dock + شارة الموقع + عنقود الأدوات (يعمل بكل الثيمات عبر متغيّرات الثيم) ============================================================ */ /* عرض المحتوى كاملاً (لا شريط جانبي) مع مساحة للشارة (أعلى) والـDock (أسفل) */ main.wrap{max-width:none;margin:0;padding:26px clamp(16px,2vw,30px) 96px;} main.wrap-wide{max-width:none;margin:0;padding:26px clamp(16px,2vw,30px) 96px;} /* ---- شارة الموقع/الرجوع (أعلى الوسط) ---- */ .navpill{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:70; display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:99px; background:var(--card);border:1px solid var(--edge);box-shadow:var(--shadow,0 14px 36px -16px rgba(0,0,0,.4)); font-size:var(--fs-sm);font-weight:700;max-width:min(86vw,520px);} [data-theme="aurora"] .navpill{background:rgba(255,255,255,.08);backdrop-filter:blur(18px) saturate(140%);} .navpill .bk{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:none;cursor:pointer; background:var(--accent-grad);color:var(--on-accent);display:grid;place-items:center;font-size:var(--fs-sm); transition:transform .15s ease,filter .15s ease;} .navpill .bk:hover{transform:scale(1.08);filter:brightness(1.08);} .navpill .loc{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:7px;} .navpill .loc a{color:var(--muted);text-decoration:none;display:grid;place-items:center;} .navpill .loc a:hover{color:var(--accent-ink);} .navpill .loc b{color:var(--ink);} .navpill .loc .sep{color:var(--muted-2);font-weight:400;} /* ---- عنقود الأدوات (أعلى — جهة البداية) ---- */ .utilcluster{position:fixed;top:14px;inset-inline-start:18px;z-index:70; display:flex;align-items:center;gap:7px;padding:6px;border-radius:99px; background:var(--card);border:1px solid var(--edge);box-shadow:var(--shadow,0 14px 36px -16px rgba(0,0,0,.4));} [data-theme="aurora"] .utilcluster{background:rgba(255,255,255,.08);backdrop-filter:blur(18px) saturate(140%);} .utilcluster .ic-btn{width:36px;height:36px;border-radius:50%;border:none;cursor:pointer; background:var(--soft);color:var(--ink);display:grid;place-items:center;font-size:var(--fs-base);text-decoration:none; transition:background .15s ease,transform .15s ease,color .15s ease;} .utilcluster .ic-btn:hover{background:var(--accent-soft);color:var(--accent-ink);transform:translateY(-1px);} [data-theme="aurora"] .utilcluster .ic-btn{background:rgba(255,255,255,.06);color:var(--ink);} .utilcluster .av-sm{width:30px;height:30px;border-radius:50%;background:var(--accent-grad);color:var(--on-accent); display:grid;place-items:center;font-weight:800;font-size:var(--fs-sm);} .utilcluster .ndot{position:absolute;top:-2px;inset-inline-start:-2px;min-width:16px;height:16px;padding:0 4px; border-radius:9px;background:var(--bad);color:var(--on-status);font-size:var(--fs-2xs);font-weight:800;display:grid;place-items:center;} .co-chip{display:flex;align-items:center;gap:7px;padding:0 13px;height:36px;border-radius:99px;text-decoration:none; background:var(--accent-soft);color:var(--accent-ink);font-weight:800;font-size:var(--fs-xs); transition:filter .15s ease,transform .15s ease;} .co-chip:hover{filter:brightness(1.04);transform:translateY(-1px);} .co-chip span{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} [data-theme="aurora"] .co-chip{color:#fff;} /* ---- منطقة الدوك السيري (أسفل الوسط) ---- */ .dock-zone{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:70;} /* المدار (الدائرة) — الحالة الافتراضية */ .dock-orb{position:relative;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;padding:0;display:grid;place-items:center; background:var(--accent-grad);box-shadow:0 0 0 6px var(--accent-soft),0 14px 34px -10px var(--accent); transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1);animation:orbPulse 3s ease-in-out infinite;} .dock-orb .orb-core{display:grid;place-items:center;color:#fff;font-size:var(--fs-2xl);} .dock-orb::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent-soft-2);opacity:.6;} @keyframes orbPulse{0%,100%{box-shadow:0 0 0 6px var(--accent-soft),0 14px 34px -10px var(--accent);} 50%{box-shadow:0 0 0 12px transparent,0 16px 40px -8px var(--accent);}} .dock-zone.open .dock-orb{opacity:0;transform:scale(.5);pointer-events:none;} /* الدوك المتمدّد */ .dock{position:absolute;bottom:0;left:50%;transform:translateX(-50%) translateY(20px) scale(.92);opacity:0;pointer-events:none; display:flex;align-items:flex-end;gap:11px;padding:10px 15px;border-radius:22px;max-width:94vw; background:var(--card);border:1px solid var(--edge);box-shadow:0 22px 60px -22px rgba(0,0,0,.45); transition:opacity .28s ease,transform .3s cubic-bezier(.2,.7,.2,1);} .dock-zone.open .dock{opacity:1;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto;} [data-theme="aurora"] .dock{background:rgba(255,255,255,.09);backdrop-filter:blur(26px) saturate(150%); box-shadow:0 30px 70px -24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14);} .dock-i{position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:14px; display:grid;place-items:center;color:#fff;font-size:var(--fs-lg);text-decoration:none; box-shadow:0 10px 22px -10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.28); transition:transform .18s cubic-bezier(.2,.7,.2,1);transform-origin:bottom center;} .dock-i:hover{transform:translateY(-13px) scale(1.4);z-index:3;} .dock-i:hover+.dock-i,.dock-i:has(+.dock-i:hover){transform:translateY(-5px) scale(1.14);z-index:2;} .dock-i.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent),0 10px 22px -10px rgba(0,0,0,.5);} .dock-i.on::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%); width:5px;height:5px;border-radius:50%;background:var(--accent);} .dock-i .tip{position:absolute;bottom:130%;left:50%;transform:translateX(-50%) translateY(4px); background:#0f172a;color:#fff;font-size:var(--fs-xs);font-weight:800;padding:5px 10px;border-radius:9px; white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease; box-shadow:0 8px 20px -6px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12);} .dock-i .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%); border:5px solid transparent;border-top-color:#0f172a;} .dock-i:hover .tip{opacity:1;transform:translateX(-50%) translateY(0);} /* زر الرئيسية في منتصف الـDock — مميّز */ .dock-i.dock-home{background:var(--accent-grad);width:50px;height:50px;border-radius:16px;font-size:var(--fs-xl); box-shadow:0 0 0 4px var(--accent-soft),0 12px 26px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.3);} .dock-i.dock-home.on{box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--accent),0 12px 26px -10px rgba(0,0,0,.55);} /* تدرّجات � */ /* ============================================================ تدرّجات الـDock (مستعادة) + لوحة البِنتو الرئيسية (متغيّرات الثيم) ============================================================ */ .dg1{background:linear-gradient(135deg,#5b86f7,#22d3ee);} .dg2{background:linear-gradient(135deg,#7c5cf6,#b15cff);} .dg3{background:linear-gradient(135deg,#10b981,#34d399);} .dg4{background:linear-gradient(135deg,#f59e0b,#fbbf24);} .dg5{background:linear-gradient(135deg,#f43f5e,#fb7185);} .dg6{background:linear-gradient(135deg,#3b82f6,#6366f1);} @media(max-width:720px){ .dock{gap:5px;padding:7px 9px;overflow-x:auto;overflow-y:visible;justify-content:flex-start;} .dock-i{width:38px;height:38px;font-size:var(--fs-md);} .dock-i.dock-home{width:44px;height:44px;} .dock-i:hover{transform:translateY(-6px) scale(1.16);} .navpill{max-width:62vw;} main.wrap,main.wrap-wide{padding:70px 14px 104px;} } /* تدرّجات أيقونات البطاقات */ .g-violet{background:linear-gradient(135deg,#7c5cf6,#b15cff);} .g-blue{background:linear-gradient(135deg,#4f8bff,#22d3ee);} .g-green{background:linear-gradient(135deg,#10b981,#34d399);} .g-amber{background:linear-gradient(135deg,#f59e0b,#fbbf24);} .g-rose{background:linear-gradient(135deg,#f43f5e,#fb7185);} .g-cyan{background:linear-gradient(135deg,#06b6d4,#22d3ee);} /* رأس اللوحة */ .d2-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:18px;} .d2-hi{font-size:var(--fs-2xl);font-weight:900;color:var(--ink);letter-spacing:-.5px;} .d2-hi small{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--muted);margin-top:3px;} .d2-right{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;} .d2-edit{width:38px;height:38px;border-radius:11px;border:1px solid var(--edge);background:var(--card);color:var(--muted); cursor:pointer;font-size:var(--fs-md);transition:all .15s ease;} .d2-edit:hover{color:var(--accent-ink);border-color:var(--accent-soft-2);} .d2-edit.on{background:var(--accent-grad);color:var(--on-accent);border-color:transparent;} [data-theme="aurora"] .d2-edit{background:rgba(255,255,255,.06);} /* وضع تحرير اللوحة */ .bento.editing .tile{cursor:grab;} .bento.editing .tile{animation:jiggle .4s ease-in-out infinite;} .bento.editing .tile:nth-child(even){animation-delay:.1s;} @keyframes jiggle{0%,100%{transform:rotate(-.5deg);}50%{transform:rotate(.5deg);}} .bento .tile-hide{display:none;position:absolute;top:8px;inset-inline-start:8px;width:26px;height:26px;border-radius:50%; border:none;cursor:pointer;background:var(--bad);color:var(--on-status);font-size:var(--fs-xs);z-index:5;box-shadow:0 4px 10px -3px rgba(0,0,0,.4);} .bento.editing .tile-hide{display:grid;place-items:center;} .tile.dragging{opacity:.4;} .tile.drag-over{outline:2px dashed var(--accent);outline-offset:2px;} .dash-hidden-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0;padding:12px 14px; border:1px dashed var(--line);border-radius:14px;background:var(--soft);} [data-theme="aurora"] .dash-hidden-bar{background:rgba(255,255,255,.04);} .dash-hidden-bar .hh-t{font-weight:800;font-size:var(--fs-sm);color:var(--muted);} .dash-hidden-bar button{border:1px solid var(--edge);background:var(--card);color:var(--ink);border-radius:99px; padding:5px 12px;font-size:var(--fs-xs);font-weight:700;cursor:pointer;} .dash-hidden-bar button:hover{border-color:var(--accent-ink);color:var(--accent-ink);} .seg{display:flex;gap:var(--sp-1);background:var(--soft);border:1px solid var(--edge);border-radius:12px;padding:var(--sp-1);} [data-theme="aurora"] .seg{background:rgba(255,255,255,.06);} .seg a,.seg>button{padding:7px 15px;border-radius:9px;font-size:var(--fs-sm);font-weight:800;color:var(--muted);text-decoration:none;transition:background .15s ease,color .15s ease;background:transparent;border:0;cursor:pointer;} .seg a:hover,.seg>button:hover{color:var(--ink);} .seg a.on,.seg>button.on,.seg>button.active{background:var(--accent-grad);color:var(--on-accent);box-shadow:0 6px 14px -6px var(--accent);} .d2-actions{display:flex;gap:9px;flex-wrap:wrap;} .d2-qa{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;border-radius:13px;text-decoration:none; background:var(--card);border:1px solid var(--edge);color:var(--ink);font-weight:800;font-size:var(--fs-sm);transition:transform .15s ease,box-shadow .15s ease;} .d2-qa:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(0,0,0,.4);} [data-theme="aurora"] .d2-qa{background:rgba(255,255,255,.06);backdrop-filter:blur(12px);} .d2-qa .t-ic{width:32px;height:32px;font-size:var(--fs-base);border-radius:10px;} /* شريط الرؤى الذكية */ .insights{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:14px;} .ins-tag{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:var(--fs-xs);color:var(--on-accent); background:var(--accent-grad);padding:7px 13px;border-radius:99px;box-shadow:0 8px 18px -8px var(--accent);} .ins-track{display:flex;gap:9px;overflow-x:auto;padding:2px;scrollbar-width:thin;} .ins-track::-webkit-scrollbar{height:5px;} .ins-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px;} .ins{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:var(--fs-sm); padding:8px 14px;border-radius:99px;background:var(--card);border:1px solid var(--edge);color:var(--ink);white-space:nowrap;} [data-theme="aurora"] .ins{background:rgba(255,255,255,.06);backdrop-filter:blur(12px);} .ins i{font-size:var(--fs-base);} .ins.ok i{color:var(--ok);}.ins.warn i{color:var(--warn);}.ins.bad i{color:var(--bad);} /* بطاقة البدء السريع */ .quickstart{border:1.5px solid var(--accent-soft-2);} .qs-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;} .qs-head h2{margin:0;font-size:var(--fs-md);}.qs-head h2 i{color:var(--accent-ink);} .qs-right{display:flex;align-items:center;gap:10px;} .qs-bar{height:8px;background:var(--soft);border-radius:6px;margin:12px 0 16px;overflow:hidden;} .qs-bar>div{height:100%;background:var(--accent-grad);} .qs-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;} .qs-step{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--edge);border-radius:12px;text-decoration:none;color:inherit;} .qs-step.done{background:var(--ok-soft);} .qs-ic{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;background:var(--accent-soft);color:var(--accent-ink);} .qs-step.done .qs-ic{background:var(--ok);color:var(--on-status);} .qs-lb{flex:1;font-weight:800;font-size:var(--fs-base);} .qs-step.done .qs-lb{color:var(--ok-ink);} /* شبكة البِنتو */ .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(118px,auto);gap:var(--sp-3);grid-auto-flow:row dense;} .tile{position:relative;border-radius:18px;padding:14px 16px;background:var(--card);border:1px solid var(--edge); box-shadow:0 18px 50px -32px rgba(0,0,0,.5);transition:transform .2s ease,box-shadow .2s ease;} .tile:hover{border-color:var(--edge-2);} [data-theme="aurora"] .tile{background:rgba(255,255,255,.06);backdrop-filter:blur(20px) saturate(140%); box-shadow:0 24px 60px -34px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.1);} .t-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:var(--fs-md);color:#fff; box-shadow:0 10px 22px -8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.3);} .t-lbl{font-size:var(--fs-sm);color:var(--muted);font-weight:700;} .t-val{font-weight:900;direction:ltr;text-align:right;color:var(--ink);font-size:var(--fs-xl);margin-top:var(--sp-2);font-variant-numeric:tabular-nums;} .t-sub{font-size:var(--fs-xs);color:var(--muted-2);margin-top:var(--sp-1);display:block;} .t-sub.link{color:var(--accent-ink);text-decoration:none;font-weight:700;} .trend{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:800;padding:3px 10px;border-radius:99px;} .trend.up{background:var(--ok-soft);color:var(--ok-ink,var(--ok));} .trend.down{background:var(--bad-soft);color:var(--bad-ink,var(--bad));} .trend.flat{background:var(--soft);color:var(--muted);} .htitle{font-size:var(--fs-base);font-weight:800;margin-bottom:9px;display:flex;align-items:center;gap:9px;color:var(--ink);} .ht-total{margin-inline-start:auto;color:var(--accent-ink);direction:ltr;font-variant-numeric:tabular-nums;font-weight:900;} /* أحجام البطاقات (تموضع تلقائي يحفظ المظهر) */ .bento .hero{grid-column:span 2;grid-row:span 2;background:linear-gradient(140deg,var(--accent-soft-2),var(--accent-soft));} [data-theme="aurora"] .bento .hero{background:linear-gradient(140deg,rgba(124,92,246,.4),rgba(79,139,255,.16));} .bento .chart{grid-column:span 2;grid-row:span 2;} .bento .alerts{grid-row:span 2;} .bento .top-t{grid-column:span 2;} .bento .recent{grid-column:span 2;} /* البطل */ .hero .hero-row{display:flex;justify-content:space-between;align-items:flex-start;} .hero .t-ic{width:48px;height:48px;font-size:var(--fs-xl);} .hero .big{font-size:var(--fs-4xl);font-weight:900;direction:ltr;text-align:right;margin:6px 0 2px;line-height:1;color:var(--ink);} .hero .big.neg{color:var(--bad);} .hero .big .cur{font-size:var(--fs-md);color:var(--muted);font-weight:700;} .spark{width:100%;height:46px;margin-top:10px;display:block;} .mini{display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);} .mini .l{font-size:var(--fs-xs);color:var(--muted);} .mini .n{font-weight:800;direction:ltr;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:2px;} /* محور الرسم */ .chart-x{display:flex;justify-content:space-between;margin-top:6px;font-size:var(--fs-2xs);color:var(--muted-2);direction:ltr;} /* التنبيهات */ .bento .alert{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);} .bento .alert:last-child{border:none;} .alert .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--muted-2);} .alert.warn .dot{background:var(--warn);}.alert.bad .dot{background:var(--bad);}.alert.ok .dot{background:var(--ok);} .alert .al-bd{flex:1;}.alert .t{font-size:var(--fs-sm);font-weight:700;} .alert .go{width:28px;height:28px;border-radius:9px;background:var(--soft);display:grid;place-items:center;color:var(--muted);font-size:var(--fs-xs);flex-shrink:0;} /* الدونت */ .donut{text-align:center;} .ring{width:104px;height:104px;border-radius:50%;margin:8px auto 0;position:relative;display:grid;place-items:center;} .ring::after{content:"";width:64px;height:64px;border-radius:50%;background:var(--bg);} .leg{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;margin-top:14px;font-size:var(--fs-xs);color:var(--muted);} .leg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-inline-end:5px;} /* أعلى المنتجات */ .prod{display:flex;align-items:center;gap:11px;margin-bottom:13px;} .prod:last-child{margin-bottom:0;} .rank{width:25px;height:25px;border-radius:8px;background:var(--soft);display:grid;place-items:center;font-weight:900;font-size:var(--fs-xs);color:var(--muted);flex-shrink:0;} .prod .nm{flex:1;font-size:var(--fs-sm);font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .barbg{flex:1.1;height:6px;border-radius:99px;background:var(--soft);overflow:hidden;} .t-bar{height:6px;border-radius:99px;background:var(--accent-grad);display:block;} .prod .pv{font-weight:800;direction:ltr;font-size:var(--fs-xs);color:var(--ink);font-variant-numeric:tabular-nums;} /* أحدث الحركات */ .bento .act{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);} .bento .act:last-child{border:none;} .act .ai{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:var(--fs-sm);flex-shrink:0;color:#fff;} .act .nm{flex:1;font-size:var(--fs-sm);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .act .nm small{display:block;color:var(--muted-2);font-weight:500;font-size:var(--fs-2xs);} .act .amt{font-weight:800;direction:ltr;color:var(--accent-ink);font-variant-numeric:tabular-nums;} /* حالات فارغة */ .empty{text-align:center;padding:30px 18px;color:var(--muted);} /* الأيقونة الكبيرة = الابن المباشر فقط. كان `.empty i` يصيب أيقونة الزرّ داخلها فتصير ضخمة وكتلية وتركب النصّ. */ .empty > i{font-size:var(--fs-3xl);color:var(--muted-2);margin-bottom:10px;display:block;} .empty p{margin:0;font-weight:700;font-size:var(--fs-base);color:var(--ink);} .empty .btn{margin-top:14px;} .empty.sm{padding:18px 12px;}.empty.sm > i{font-size:var(--fs-xl);} @media(max-width:980px){ .bento{grid-template-columns:repeat(2,1fr);} .bento .hero,.bento .chart,.bento .top-t,.bento .recent{grid-column:span 2;} .bento .alerts{grid-row:span 1;} } @media(max-width:560px){ .bento{grid-template-columns:1fr;} .bento .hero,.bento .chart,.bento .top-t,.bento .recent{grid-column:span 1;grid-row:span 1;} .d2-hi{font-size:var(--fs-xl);} .hero .big{font-size:var(--fs-4xl);} } /* ═══ جداول احترافية موحّدة (نمط مؤسسي) ═══ */ .stbl,.ctbl,.rtbl{box-shadow:none;} .stbl thead th,.ctbl thead th,.rtbl thead th{letter-spacing:.2px;font-size:var(--fs-2xs);font-weight:800;color:var(--muted); border-bottom:2px solid var(--accent-soft-2,#dde5ef);white-space:nowrap;} .stbl td,.stbl th,.ctbl td,.ctbl th,.rtbl td,.rtbl th{padding:5px 14px;vertical-align:middle;} .stbl tbody tr:hover td,.ctbl tbody tr:hover td,.rtbl tbody tr:hover td{background:var(--accent-soft);} .stbl td.num,.ctbl td.num,.rtbl td.num,.stbl .amt,.ctbl .amt{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;direction:ltr;unicode-bidi:plaintext;} .tbl thead th{letter-spacing:.2px;font-size:var(--fs-2xs);font-weight:800;color:var(--muted); border-bottom:2px solid var(--accent-soft-2,#dde5ef);white-space:nowrap;} .tbl td,.tbl th{padding:5px 14px;vertical-align:middle;} .tbl tbody tr:hover td{background:var(--accent-soft);} .tbl td.num,.tbl th.num,.tbl .amt,.tbl .money{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;direction:ltr;unicode-bidi:plaintext;} .tbl tfoot td,.tbl tr.total td,.tbl tr.tbl-total td{background:var(--accent-soft);font-weight:800;border-top:2px solid var(--accent-soft-2,#dde5ef);} .tbl-wrap{overflow-x:auto;border-radius:12px;-webkit-overflow-scrolling:touch;} .tbl-wrap .tbl thead th{position:sticky;top:0;z-index:2;background:var(--soft);} /* المبلغ بالحروف (تفقيط) */ .words{margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);font-size:var(--fs-sm);font-weight:700;color:var(--muted);line-height:1.7;} /* ═══ مكوّن القائمة الموحّد (تصفية + أعمدة + تصدير) ═══ */ .lk-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 10px;} /* يضيفها list_kit.js حين يكون الحاوي بطاقة ملتصقة بلا حشو — انظر تعليقه */ .lk-bar.lk-inset{padding:12px 14px 0;} .lk-count{font-size:var(--fs-2xs);font-weight:800;color:var(--muted);background:var(--soft);border:1px solid var(--edge);border-radius:999px;padding:4px 11px;} .lk-sp{flex:1;} /* هذا الشريط يحقنه list_kit.js فوق كل جدول قائمة، بينما report_kit.js يحقن أزراره بمفردة .swb في شريط الصفحة — فكان في الشاشة الواحدة مقاسان للزرّ (٣٤px/٩px مقابل ٣٢px/٨px) ولونان. وُحِّد هنا على مفردة .swb نفسها. */ .lk-find{display:flex;align-items:center;gap:6px;height:32px;padding:0 11px;border:1px solid var(--edge);border-radius:8px;background:var(--card);transition:.14s;} /* الحقل يلغي حلقته الخاصة (outline:none) فتُحمل الحلقة على الغلاف — وإلا فحقل بلا أي أثر تركيز */ .lk-find:focus-within{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus);} .lk-find i{color:var(--muted);font-size:var(--fs-2xs);} .lk-find input{border:none;outline:none;background:none;font-family:inherit;font-size:var(--fs-sm);color:var(--ink);width:150px;} .lk-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border:1px solid var(--edge);border-radius:8px;background:var(--card);color:var(--ink);font-family:inherit;font-weight:700;font-size:var(--fs-sm);cursor:pointer;transition:.14s;white-space:nowrap;} .lk-btn:hover{border-color:var(--muted);} .lk-wrap{position:relative;} .lk-menu{position:absolute;top:36px;inset-inline-end:0;z-index:60;min-width:190px;max-height:260px;overflow:auto;background:var(--card);border:1px solid var(--edge);border-radius:11px;box-shadow:var(--shadow-lg);padding:7px;display:none;} .lk-menu.show{display:block;} .lk-menu label{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;font-size:var(--fs-sm);font-weight:700;color:var(--ink);cursor:pointer;} .lk-menu label:hover{background:var(--accent-soft);} @media print{.lk-bar{display:none;}} /* ═══ حقول التاريخ: كروم يفرض لغته على نصّ المنتقي فيُعرض معكوساً — نُخفيه وهو فارغ ═══ */ input[type="date"]{direction:ltr;text-align:start;font-family:inherit;} input[type="date"]::-webkit-datetime-edit{direction:ltr;} input[type="date"].dt-empty:not(:focus)::-webkit-datetime-edit{color:transparent;} input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.55;} input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1;} /* ═══ قوائم القسم (حبّات + منسدلات) — إيقاع بوابة هرمز ═══ */ .inv-nav{display:flex;align-items:center;gap:7px;margin:0 0 18px;flex-wrap:wrap;} .inv-nav .in{position:relative;} .inv-nav .in > a{display:flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:11px;color:var(--muted); text-decoration:none;font-weight:800;font-size:var(--fs-sm);border:1px solid transparent;transition:.14s;white-space:nowrap;} .inv-nav .in > a:hover{background:var(--card);border-color:var(--line);color:var(--ink);} .inv-nav .in.on > a{background:linear-gradient(140deg,var(--accent-2),var(--accent));color:var(--on-accent);box-shadow:var(--shadow);} .inv-nav .in > a .cv{font-size:var(--fs-2xs);opacity:.8;} .inv-nav .in > a em{font-style:normal;font-size:var(--fs-2xs);background:var(--soft);border-radius:999px;padding:1px 7px;color:var(--muted);} .inv-nav .in.on > a em{background:rgba(255,255,255,.22);color:#fff;} .inv-nav .dd{position:absolute;top:44px;inset-inline-start:0;min-width:236px;background:var(--card);border:1px solid var(--edge); border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;display:none;z-index:60;} .inv-nav .in:hover .dd{display:block;} .inv-nav .dd a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--ink); text-decoration:none;font-weight:700;font-size:var(--fs-sm);} .inv-nav .dd a:hover{background:var(--accent-soft);color:var(--accent-ink);} .inv-nav .dd a i{width:18px;text-align:center;color:var(--accent-ink);} .inv-nav .dd .sep{height:1px;background:var(--line);margin:6px 4px;} /* سجل النشاط (templates/_activity.html) — من أنشأ ومن عدّل ومتى. */ .actlog ul{list-style:none;margin:0;padding:0;} .actlog li{display:flex;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);} .actlog li:last-child{border-bottom:none;} .al-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:7px;flex:0 0 auto;} .al-t{font-size:var(--fs-sm);font-weight:600;color:var(--ink);} .al-m{font-size:var(--fs-2xs);color:var(--muted);margin-top:2px;} /* خيط الملاحظات والمرفقات (templates/_docnotes.html) — ملاحظة داخلية لا تُطبع. */ .dnote{margin-top:16px;} .dnote .dnn{background:var(--soft);border-radius:99px;padding:1px 8px;font-size:var(--fs-2xs);color:var(--muted);} .dnf textarea{width:100%;resize:vertical;min-height:56px;background:var(--soft);border:1px solid var(--edge); border-radius:9px;padding:9px 11px;font-family:inherit;font-size:var(--fs-sm);color:var(--ink);outline:none;} .dnf textarea:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--focus);box-shadow:none;} .dnfa{display:flex;align-items:center;gap:10px;margin-top:8px;} .dnclip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;max-width:60%; font-size:var(--fs-xs);font-weight:700;color:var(--muted);} .dnclip:hover{color:var(--accent-ink);} .dnclip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .dnclip input{display:none;} .dnfa .swb{margin-inline-start:auto;} .dnl{list-style:none;margin:14px 0 0;padding:0;} .dnl li{padding:10px 0;border-top:1px solid var(--line);} .dnh{display:flex;align-items:center;gap:9px;font-size:var(--fs-xs);} .dnh b{font-weight:700;color:var(--ink);} .dnt{color:var(--muted);font-size:var(--fs-2xs);} .dnh form{margin-inline-start:auto;} .dnx{border:none;background:none;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:0 2px;} .dnx:hover{color:var(--bad);} .dnb{margin-top:4px;font-size:var(--fs-sm);color:var(--ink);line-height:1.85;white-space:pre-wrap;word-break:break-word;} .dna{display:inline-flex;align-items:center;gap:7px;margin-top:6px;background:var(--accent-soft); border:1px solid var(--accent-soft-2);border-radius:9px;padding:5px 11px; font-size:var(--fs-xs);font-weight:700;color:var(--accent-ink);text-decoration:none;max-width:100%;} .dna:hover{border-color:var(--accent);} .dnsz{opacity:.7;font-weight:500;} .dnempty{color:var(--muted);font-size:var(--fs-sm);} /* ── الطيّ (Disclosure) — دستور التصميم: الشرح الطويل يُطوى لا يُبسَط ── .xnote «أثر القيد»: ما سيُسجَّل في الدفتر — يهمّ المحاسب ولا يعني البائع، فيبقى في متناول اليد ولا يزاحم النموذج. .adv: حقول متقدّمة اختيارية. مطويّ افتراضياً، ولا يُطبع لأنه شرحُ شاشةٍ لا محتوى مستند. */ details.xnote,details.adv{margin-top:10px;border:1px solid var(--edge);border-radius:var(--radius-md); background:var(--soft);overflow:hidden;} details.xnote>summary,details.adv>summary{list-style:none;cursor:pointer;user-select:none; display:flex;align-items:center;gap:7px;padding:7px 11px; font-size:var(--fs-xs);font-weight:700;color:var(--muted);} details.xnote>summary::-webkit-details-marker, details.adv>summary::-webkit-details-marker{display:none;} details.xnote>summary::after,details.adv>summary::after{content:"";margin-inline-start:auto; width:6px;height:6px;border-inline-end:1.5px solid currentColor;border-block-end:1.5px solid currentColor; transform:rotate(45deg);transition:transform .15s;} details[open].xnote>summary::after,details[open].adv>summary::after{transform:rotate(-135deg);} details.xnote>summary:hover,details.adv>summary:hover{color:var(--accent-ink);} details.xnote>summary i,details.adv>summary i{color:var(--accent-ink);} details.adv>*:not(summary){padding:0 11px 11px;} .xnb{padding:0 11px 10px;font-size:var(--fs-xs);color:var(--muted);line-height:1.9;} .xnb b{color:var(--ink);font-weight:700;} @media print{details.xnote{display:none!important;}} /* ── قائمة المستخدم (الأفاتار) ── كان «خروج» أيقونةً عاريةً في أقصى حافّة الشريط، بوزن «الثيم» نفسه وبلا تأكيد: أسهل زرّ يُضغط بالخطأ وأغلاها ثمناً. صار داخل قائمة الأفاتار ومعه تأكيد. */ .ab-user{position:relative;} .umenu{position:absolute;top:46px;inset-inline-end:0;min-width:230px;display:none;z-index:400; background:var(--card);border:1px solid var(--edge);border-radius:14px;box-shadow:var(--shadow-lg); padding:6px;overflow:hidden;} .umenu.show{display:block;} .umenu .um-h{padding:10px 12px 8px;border-bottom:1px solid var(--line);margin-bottom:5px;line-height:1.5;} .umenu .um-h b{display:block;font-size:var(--fs-base);color:var(--ink);} .umenu .um-h span{font-size:var(--fs-2xs);color:var(--muted);} .umenu a,.umenu .um-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px; color:var(--ink);text-decoration:none;font-size:var(--fs-sm);font-weight:600; width:100%;background:none;border:none;font-family:inherit;cursor:pointer;text-align:start;} .umenu a:hover,.umenu .um-row:hover{background:var(--accent-soft);color:var(--accent-ink);} .umenu a i,.umenu .um-row i{width:16px;text-align:center;color:var(--muted);} .umenu .um-sep{height:1px;background:var(--line);margin:5px 0;} .umenu .um-out,.umenu .um-out i{color:var(--bad);} .umenu .um-out:hover{background:var(--bad-soft);color:var(--bad);} .cmenu-sep{height:1px;background:var(--line);margin:6px 4px;} /* شريط النجاح يحمل الفعل التالي — لا يكتفي بالإخبار. «حُفظ المنتج» ثم ماذا؟ العالمية تعرض «+ إضافة آخر» فوراً. */ .msg{display:flex;align-items:center;justify-content:space-between;gap:12px;} .msg-again{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px; background:var(--card);border:1px solid var(--edge);color:var(--accent-ink); font-size:var(--fs-xs);font-weight:800;text-decoration:none;white-space:nowrap;} .msg-again:hover{border-color:var(--accent-ink);background:var(--accent-soft);} /* ومضة الصفّ الجديد بعد الإنشاء */ .row-new{animation:rowNew 3s ease;} @keyframes rowNew{0%,55%{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent);}100%{background:transparent;}} /* ══ نافذة السجل (dialog) — مكوّن الإنشاء/التعديل الموحّد ══ العلّة: شاشات كانت تفرش نموذج الإضافة **دائماً** بجانب القائمة، فيسرق نصف الشاشة حتى وأنت تتصفّح، ولا يُعلم أتُنشئ أم تعدّل، ولا زرّ يفتحه. القانون: القائمة هي الشاشة · «+ الكيان» يفتح نافذة مركزية · «تعديل» يفتحها ممتلئة. مركزية لا على الحافّة: العين تقرأ من المنتصف، والحافّة تُشعر أن النافذة «ملحقة» لا مقصودة. */ .drawer{position:fixed;inset:0;z-index:600;display:none;} .drawer.on{display:grid;place-items:center;padding:24px;} .drawer .dr-back{position:absolute;inset:0;background:rgba(8,13,24,.58);backdrop-filter:blur(3px); animation:drFade .16s ease;} .drawer .dr-panel{position:relative;width:min(580px,100%);max-height:min(86vh,760px); background:var(--card);border:1px solid var(--edge);border-radius:18px; box-shadow:0 32px 64px -18px rgba(8,13,24,.42),0 0 0 1px rgba(255,255,255,.03); display:flex;flex-direction:column;overflow:hidden; animation:drIn .2s cubic-bezier(.22,1,.36,1);} @keyframes drFade{from{opacity:0}to{opacity:1}} @keyframes drIn{from{transform:translateY(14px) scale(.975);opacity:0}to{transform:none;opacity:1}} .drawer .dr-head{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:18px 22px 15px;border-bottom:1px solid var(--line);} .drawer .dr-head h2{margin:0;font-size:var(--fs-md);font-weight:800;color:var(--ink); border:none;padding:0;display:flex;align-items:center;gap:10px;line-height:1.3;} .drawer .dr-head h2 i{width:34px;height:34px;border-radius:10px;background:var(--accent-soft); color:var(--accent-ink);display:grid;place-items:center;font-size:var(--fs-sm);flex:0 0 auto;} .drawer .dr-x{width:32px;height:32px;border-radius:9px;border:1px solid var(--edge);background:var(--soft); color:var(--muted);cursor:pointer;display:grid;place-items:center;flex:0 0 auto;transition:.14s;} .drawer .dr-x:hover{border-color:var(--bad);color:var(--bad);background:var(--bad-soft);} .drawer form{display:flex;flex-direction:column;min-height:0;flex:1;} .drawer .dr-body{flex:1;overflow-y:auto;padding:20px 22px;} .drawer .dr-foot{display:flex;align-items:center;gap:9px;padding:14px 22px; border-top:1px solid var(--line);background:var(--soft);} .drawer .dr-hint{font-size:var(--fs-2xs);color:var(--muted-2);margin-inline-start:auto;white-space:nowrap;} @media(max-width:620px){ .drawer.on{padding:0;place-items:end stretch;} .drawer .dr-panel{width:100%;max-height:92vh;border-radius:20px 20px 0 0;} .drawer .dr-hint{display:none;} } /* حبر accent يعتمد على الثيم لا على اللوحة وحدها: اللوحات أعلاه تُثبّت حبراً داكناً (صحيح للنهاري: 6.15:1 على الأبيض)، لكن في الليلي يجب أن يكون الحبر فاتحاً فوق البطاقة الداكنة. هذه القاعدة تأتي أخيراً فتغلب. */ [data-theme="dark"], [data-theme="aurora"]{--accent-ink:color-mix(in srgb, var(--accent) 55%, #fff);} /* قائمة الإجراءات الثانوية «⋮» — قانون: إجراء رئيس واحد ظاهر، والباقي هنا. شريط بستّة أزرار متساوية الوزن يعني: لا أولوية، فالعين تحتار. */ .omenu{position:relative;display:inline-flex;} .omenu > .swb{padding:0 10px;} .omenu-pop{position:absolute;top:38px;inset-inline-end:0;min-width:190px;display:none;z-index:60; background:var(--card);border:1px solid var(--edge);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;} .omenu.on .omenu-pop{display:block;} .omenu-pop a,.omenu-pop button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 11px; border:none;background:none;border-radius:8px;color:var(--ink);text-decoration:none;cursor:pointer; font-family:inherit;font-size:var(--fs-sm);font-weight:600;text-align:start;} .omenu-pop a:hover,.omenu-pop button:hover{background:var(--accent-soft);color:var(--accent-ink);} .omenu-pop i{width:15px;text-align:center;color:var(--muted);} .omenu-pop .sep{height:1px;background:var(--line);margin:5px 2px;} .omenu-pop .danger,.omenu-pop .danger i{color:var(--bad);} .omenu-pop .danger:hover{background:var(--bad-soft);} /* ═══ الطباعة تُطبع نهاراً دائماً ═══ الورق أبيض. لو بقي الثيم الليلي فاعلاً عند الطباعة صار الحبر ‎#eaeff7‎ — أبيضَ على أبيض — والمتصفّح يُسقط الخلفيات افتراضياً فلا يبقى شيء مقروء: فاتورة أو تقرير Z أو كشف مطابقة يخرج ورقةً فارغة. تُعاد هنا قيم ‎:root‎ النهارية للرموز التي يقلبها الليلي والشفقي وحدها؛ لون التمييز لا يُمسّ لأنه هويّة تُطبع كما هي، ويُغمَّق حبره فقط ليصلح على الأبيض. تُوضع في آخر الملف: التخصيص متساوٍ (0,1,0) فترتيب المصدر هو الحَكَم. */ @media print{ [data-theme="dark"],[data-theme="aurora"]{ color-scheme:light; --ink:#0f1a2c; --muted:#586475; --muted-2:#5f6d83; --line:#e7ebf1; --soft:#f6f8fb; --card:#ffffff; --bg:#ffffff; /* ‎--edge‎ كان ‎#748092‎ مضبوطاً على خلفيّةٍ ملوّنة؛ على الأبيض الخالص صار قاسياً يُثقل كلَّ بطاقةٍ وجدول. ‎#d7dade‎ يقرأ 1.7:1 على الأبيض — حدٌّ يُرى ولا يصرخ — و‎--edge-2‎ للحقول والأزرار حيث تلزم عتبةُ 3.0:1. */ --edge:#d7dade; --edge-2:#b9bec5; --focus:#1f2b3d; --ok:#0a7f5c; --warn:#a85c05; --bad:#c81e1e; --on-status:#fff; --ok-soft:#ecfdf5; --ok-ink:#065f46; --warn-soft:#fffbeb; --warn-ink:#92400e; --bad-soft:#fef2f2; --bad-ink:#991b1b; --info-soft:#eef2f8; --info-ink:#243b56; --on-fixed:#243b56; --on-fixed-muted:#5b6878; --shadow-sm:none; --shadow:none; --shadow-lg:none; --shadow-em:none; } /* حبر التمييز: الليلي يمزجه بالأبيض ليُقرأ على الأسود؛ على الورق يُمزج بالأسود. */ [data-theme="dark"][data-accent],[data-theme="aurora"][data-accent]{ --accent-ink:color-mix(in srgb,var(--accent) 68%,#000);} [data-theme="aurora"] .bg-aurora{display:none;} }