/* ===================================================================== ١) الملف: C:/Users/hp/Desktop/case-collector-extension/server/app/public/print.css (أُعيدت كتابته على القرص بهذا النصّ — النسخة السابقة استُبدلت) ===================================================================== */ /* ========================================================================== print.css — طبقة الطباعة. تُحمَّل بعد style.css و gate.css و lux.css وتعلوها. الوثيقة تُقرأ ورقًا أو PDF، وثيم العُلا الداكن غير صالح للطباعة: يبتلع الحبر ويخرج رماديًا مغسولًا. هنا تُقلب اللوحة إلى حبر داكن على ورق أبيض، ويبقى الذهب علامةً بنيويةً — خيطًا يجرّه العنوان وحدًّا يعلو اللوح — لا خلفيةً مصمتة تستهلك الحبر بلا أن تحمل معنى. ما يلمسه هذا الملف: الطباعة وحدها. لا يعيد تصميم الشاشة ولا يحسب رقمًا. ========================================================================== */ /* ========================================================================== ٠) نطاق الشاشة — ثلاثة أشياء فقط، ولكلٍّ منها سبب تنفيذي ========================================================================== */ /* عرض الورق الفعّال، معرَّفًا خارج @media print عمدًا. السبب: معالج beforeprint يقرأ هذه القيمة بـ getComputedStyle قبل أن يبدّل المتصفح وسيط الطباعة، فلو عُرِّفت داخل @media print لعادت فارغة عند القراءة. 210mm ناقص هامشَي 16mm = 178mm ≈ 672.7px عند 96dpi. نأخذ 672 بفضلة شعرة. */ :root{ --print-plot-w:672px; } /* عناصر تُكتب للورق ولا تُعرض على الشاشة (ختم التوثيق، سطر التوزيع…). */ .print-only{ display:none !important; } /* الطبقة التي يركّبها معالج beforeprint على قبل إعادة الرسم. وجودها ضروري لأن بعض المحرّكات تطبّق ورقة الطباعة بعد إطلاق beforeprint، فنحتاج أن يكون DOM في هيئته الورقية لحظة إعادة البناء لا بعدها. */ html.rcu-printing .scroll{ max-height:none; overflow:visible; } html.rcu-printing #tip{ display:none; } @media print{ /* ========================================================================== ١) الصفحة ========================================================================== */ @page{ size:A4 portrait; /* السفلي أوسع: التذييل الذي يضيفه المتصفح (رقم الصفحة والمسار) يسكن هناك، فلو ساويناه بالعلوي لالتصق بآخر سطر من المحتوى. */ margin:18mm 16mm 20mm; } /* الغلاف يبدأ أخفض قليلًا — تغييرُ العلوي وحده لا يمسّ عرض المحتوى، فتبقى حسبة 178mm صحيحة على كل الصفحات. */ @page :first{ margin-top:22mm; } /* الألوان تُطبع كما عُرّفت. بدون هذا يُسقط المتصفح كل تعبئة SVG وكل نقطة في مفتاح الألوان، فتخرج الرسوم بلا الفارق الذي بُنيت عليه أصلًا. */ html{ -webkit-print-color-adjust:exact; print-color-adjust:exact; } /* ========================================================================== ٢) قلب اللوحة — نعيد تعريف الرموز وحدها، فينقلب كل ما بُني عليها ========================================================================== */ :root{ --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7F4EE; --surface-3:#EDE7DC; --line:#BFB49F; --line-soft:#DED5C4; /* الذهب على الورق: درجة الشاشة (#C9A227) تخرج شاحبة عند 1px، فنغمّقها لتبقى «ذهبًا» يُرى لا صفرةً تختفي. */ --gold:#A8871F; /* --gold-soft على الشاشة نصٌّ فاتح فوق داكن؛ على الورق يجب أن ينقلب إلى برونز داكن، وإلا اختفى كل نصّ ذهبي (سطر البطل، اسم الحساب، شارة الدور). */ --gold-soft:#6B5518; --gold-dim:#8A7231; --ink:#14110C; --ink-2:#3A3227; --muted:#6A6154; /* رمز lux للنصوص الصغيرة — لو تُرك على قيمته الداكنة لخرجت كل عناوين البطاقات ورؤوس الأعمدة رمادية باهتة على الأبيض. */ --muted-2:#6A6154; /* حالات الحكم: مغمّقة درجةً كي تبقى مقروءة، ومحفوظة النبرة كي لا يتغيّر معناها بين الشاشة والورق. */ --ok:#2F6B41; --warn:#8A5F14; --bad:#8E3A36; /* رموز lux البنيوية: الحجر والظلّ لا معنى لهما على الورق. */ --slab-hi:#FFFFFF; --slab-mid:#FFFFFF; --slab-lo:#FFFFFF; --rail-hi:#FFFFFF; --rail-lo:#FFFFFF; --edge-light:transparent; --lift:none; /* خيط الذهب: .28 صُمّم فوق أسود؛ فوق أبيض يختفي. نرفعه إلى حدٍّ يُرى. */ --hair-gold:rgba(168,135,31,.55); --t:0ms; } /* min-height:100% على body (style.css:16) يُقاس في الوسيط المُصفَّح على صندوق الصفحة، فقد يولّد صفحةً أخيرة فارغة حين ينتهي المحتوى عند حدّ صفحة. */ html, body{ min-height:0; } body{ background:#FFFFFF; /* بركة الضوء الذهبية من lux تُقرأ على الورق بقعةَ حبرٍ لا عمقًا. */ background-image:none; color:var(--ink); font-size:10pt; line-height:1.55; margin:0; } /* ========================================================================== ٣) الهيكل — من عمودين إلى عمود واحد، ومن شبكة إلى تدفّق ========================================================================== */ #app{ display:block; min-height:0; } main{ padding:0; /* overflow:auto على الحاوية الرئيسة يجعل بعض المحرّكات تقصّ المحتوى عند الصفحة الأولى وتتوقّف — أخطر سطر واحد في طباعة هذه الصفحة. */ overflow:visible; min-height:0; } /* الشبكات تصير تدفّقًا كتليًّا. ليس تبسيطًا بصريًّا بل شرطُ صحّة: تجزئةُ عنصر شبكة عبر الصفحات ناقصةُ التنفيذ في كروم وفَيَرفُكس، فبطاقة السجل التفصيلي — وهي عنصر شبكة يحمل جدولًا من مئات الأسطر — تُقصّ عند الصفحة الأولى بدل أن تتدفّق. الكتلة العادية تتجزّأ بلا خلاف بين المحرّكات. الأربعُ الرقمية وحدها تبقى شبكةً: محتواها سطرٌ واحد فلا تُجزَّأ أصلًا. */ .grid{ display:block; } .grid > * + *{ margin-top:10mm; } .grid.g4{ display:grid; grid-template-columns:repeat(4,1fr); gap:6mm; } .grid.g4 > * + *{ margin-top:0; } /* الفواصل بين الأقسام مكتوبة في index.html بأنماط سطرية (margin-bottom:14px)، ولا يُتجاوز النمط السطري إلا بـ !important. 14px = 3.7mm — فاصلٌ يقرأ التصاقًا على ورقة نصّها 10pt. */ main section{ margin-bottom:0 !important; } main section + section{ margin-top:8mm; } /* البطاقة على الورق ليست لوحًا بل قسمًا يعلوه خيط ذهبي. إلغاء الحشو الجانبي مقصود: به يصير عرض حاوية الرسم = 178mm بالضبط، وهو العدد نفسه الذي يقرأه معالج beforeprint من --print-plot-w. */ .card{ background:none; background-image:none; border:0; border-top:1pt solid var(--gold); border-radius:0; box-shadow:none; padding:5mm 0 0; overflow:visible; } .hero{ display:flex; gap:8mm; background:none; background-image:none; border-top:1.6pt solid var(--gold); padding-top:5mm; } /* خيط lux العلوي مكرَّر مع حدّ البطاقة الجديد — واحد منهما يكفي. */ .hero::before{ display:none; } /* ========================================================================== ٤) ما لا يُطبع — كل ما هو أداةُ تفاعل لا محتوى ========================================================================== */ .rail, .gate, .filters, #range, #btn-xlsx, #who-filter, .logbar, .tablebtn, #tip, #log-msg, #usr-msg, .row-actions, .inline-form, .warnbox, .reveal, .build-line, .no-print{ display:none !important; } /* رمز الجهاز يُعرض مرة واحدة ولا يُسترجَع: الخادم يحفظ بصمته لا نصّه. طباعةُ صفحة «ربط الإضافة» بعد إنشاء رمز تضع مفتاح رفعٍ صالحًا على ورقة تخرج من طابعة مشتركة. الحاوية تُمنع من الطباعة نصًّا، لا لونًا. */ #tk-out{ display:none !important; } /* عمود التحديد أداةُ حذف لا بيان — إخفاؤه يعيد عرضه إلى بقية الأعمدة. */ th.cbx, td.cbx{ display:none !important; } /* أي زرّ أو حقل بقي داخل المحتوى: لا يُطبع. الاستثناء صريح بـ .print-only كي يستطيع كاتب التقرير أن يطبع خانة توقيع مطبوعة إن أرادها. */ button:not(.print-only), input:not(.print-only), select:not(.print-only), textarea:not(.print-only){ display:none !important; } .print-only:not([hidden]){ display:block !important; } .print-only.inline:not([hidden]){ display:inline !important; } /* ========================================================================== ٥) منع الانقسام ========================================================================== */ /* ما يُبقى كتلةً واحدة: كتلٌ قصيرة بطبعها، أطولها لا يقارب صفحة. البطاقة نفسها ليست منها — عمدًا. منعُ انقسام .card يعني دفعَ بطاقة السجل التفصيلي (مئات الأسطر) إلى صفحة واحدة فتفيض وتُقصّ صامتة. والاستثناء بـ :has(table) ليس حلًّا: يسقط صامتًا في فَيَرفُكس ما قبل 121 فيعود العطب. القاعدة الآمنة أن يتدفّق الأصل ويُمنع الانقسام حيث يضرّ فقط. */ .tile, .alert, .hero, .keys, figure, .no-break{ break-inside:avoid; page-break-inside:avoid; } /* السطر لا ينقسم أبدًا: نصفُ سطرٍ في أسفل صفحة ونصفُه في أعلى التالية يجعل الجدول غير قابل للقراءة. */ tr, th, td{ break-inside:avoid; page-break-inside:avoid; } /* ترويسة الجدول تُعاد على كل صفحة — بدونها تصير الصفحة الثانية أعمدةً بلا أسماء. */ thead{ display:table-header-group; } tfoot{ display:table-footer-group; } /* عنوانٌ آخرَ سطرٍ في الصفحة وعدٌ بمحتوى في الصفحة التالية — يُمنع. وسطرُ التوضيح (.hint) يلزم العنوانَ: بدونه ينقطع بين العنوان والرسم. */ h1, h2, h3, .card h3, .head h2, .card .hint{ break-after:avoid; page-break-after:avoid; } p, li{ orphans:3; widows:3; } /* مرساة بدء الصفحة. لا تُفرض على كل قسم آليًا: «حيث يلزم» قرارُ كاتب التقرير، والفرض الآلي يولّد صفحاتٍ بيضاء بين قسمين قصيرين. */ .pg-new, [data-print="new-page"]{ break-before:page; page-break-before:always; } /* أول عنصر لا يبدأ بصفحة جديدة، وإلا صدرت الوثيقة بصفحة فارغة أولى. */ .pg-new:first-child, [data-print="new-page"]:first-child{ break-before:auto; page-break-before:auto; } /* الغلاف ينتهي بصفحته. */ .pg-cover{ break-after:page; page-break-after:always; } /* ========================================================================== ٦) التسلسل الطباعي على الورق ========================================================================== */ .head{ display:block; margin-bottom:6mm; } .head h2{ font-size:16pt; font-weight:700; color:var(--ink); gap:6mm; } .head h2::after{ background:var(--hair-gold); } .head p{ color:var(--muted); font-size:9pt; margin-top:1mm; } /* ختم التوثيق: النطاق الزمني والمرشّح والحساب ووقت الطباعة. بدونه تخرج ورقةٌ فيها أرقامٌ لا يُعرف على أي عيّنة حُسبت — «٧ أيام» و«الكل» يطبعان ورقتين متطابقتَي الشكل مختلفتَي المعنى. يملؤه المعالج. */ .doc-stamp{ font-size:8pt; color:var(--muted); line-height:1.6; margin-top:1.5mm; } .card h3{ font-size:9pt; font-weight:700; letter-spacing:.10em; color:var(--ink); gap:5mm; margin-bottom:1mm; } .card h3::after{ background:var(--hair-gold); } .card .hint{ color:var(--muted); font-size:8.5pt; margin-bottom:4mm; } /* الأرقام: 42px من lux ضخمة على A4. نخفضها ونُبقي tabular-nums لأن الأرقام العربية-الهندية (٠١٢) لا تصطفّ في أعمدة بدونها. */ .tile .v{ font-size:20pt; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; } .tile .k{ font-size:8pt; color:var(--muted); letter-spacing:.10em; } .tile .d{ font-size:8pt; color:var(--muted); } .tile.accent{ border-top-color:var(--gold); border-top-width:1.6pt; } .tile.accent .v{ color:var(--gold-soft); } .hero .big{ font-size:14pt; font-weight:700; color:var(--ink); } .hero .big b{ color:var(--gold-soft); } .hero .sub{ font-size:9.5pt; color:var(--ink-2); } .keys{ font-size:8.5pt; color:var(--ink-2); gap:6mm; } .stack{ background:var(--surface-3); height:9px; } /* نقاط مفتاح الألوان تُملأ بأنماط سطرية. إن أوقف المستخدم «طباعة الخلفيات» اختفت النقطة كلها وصار المفتاح أسماءً بلا ما تدلّ عليه؛ الحدّ خطٌّ لا خلفية فينجو، فيبقى موضع النقطة مقروءًا على الأقل. */ .keys .dot{ border:.3pt solid var(--muted); } /* ========================================================================== ٧) الجداول ========================================================================== */ /* الغلاف المقصوص إلى 420px هو ما يجعل الجدول يُطبع منقوصًا بلا أن يشتكي أحد. */ .scroll{ max-height:none; overflow:visible; margin:0; padding:0; } table{ width:100%; border-collapse:collapse; font-size:8pt; font-variant-numeric:tabular-nums; } th{ /* تدرّج lux الداكن يخرج مستطيلًا أسود يبتلع الحبر ويطمس النصّ فوقه. */ background:#F4F0E8; background-image:none; color:var(--ink); font-size:7.5pt; font-weight:700; letter-spacing:.06em; /* اللصق مفهوم شاشة؛ داخل table-header-group يربك بعض المحرّكات. */ position:static; border-bottom:.8pt solid var(--gold); padding:2mm 1.6mm; } td{ border-bottom:.4pt solid var(--line-soft); padding:1.6mm; vertical-align:top; color:var(--ink); } /* تخطيط الصفوف: على ورقة فيها ستون سطرًا، التظليل الخفيف هو ما يمنع القفز بين سطرين عند تتبّع عمود بالعين. */ tbody tr:nth-child(even) td{ background:#FAF7F2; } tbody tr:hover{ background:none; } /* التحديد حالةُ شاشة، لا حكمٌ يُوثَّق. */ tr.picked{ background:none; } /* 0.72 على الورق تخرج رمادًا باهتًا؛ الوسم النصّي يحمل المعنى وحده. */ tr.noact td{ opacity:1; } .noact-tag{ color:var(--muted); font-size:7.5pt; } /* الوسمان يُطبعان حبرًا لا خلفية: الطباعة أحاديّة والخلفيات تُهدر الحبر. */ .rnd,.amd,.rty{ background:none; border:none; color:var(--muted); font-size:7pt; padding:0; margin-inline-start:4px; } .th-sub, .sub-acct{ color:var(--muted); font-size:7pt; } .mono{ font-family:Consolas,"Courier New",monospace; font-size:7.5pt; } td.note .ln{ overflow-wrap:anywhere; } .lines .ln{ min-height:0; padding:1px 0; } .lines .ln + .ln{ border-top:.4pt dashed var(--line-soft); } /* .datatable يحتوي جدولًا دائمًا (يبنيه معالج زرّ «جدول» بـ )، وجدول المقارنة فيه سطر لكل معتمد. منعُ انقسامه يدفعه إلى صفحة واحدة. */ .datatable{ border-top:.4pt solid var(--line-soft); padding-top:3mm; break-inside:auto; page-break-inside:auto; } /* ========================================================================== ٨) الشارات والتنبيهات — حدٌّ لا خلفية مصمتة ========================================================================== */ /* الطابعة الرمادية تُسوّي الخلفيات الملوّنة، فيصير «مؤكَّد» و«غير مؤكَّد» رماديين متطابقين. الحدّ ينجو من التحويل إلى رمادي، فيبقى الفرق مقروءًا. */ .pill{ background:none !important; border:.5pt solid currentColor; padding:0 1.4mm; font-size:7pt; } .p-ok{ color:var(--ok); } .p-wait{ color:var(--warn); } .p-unk{ color:var(--muted); } .p-role{ color:var(--gold-soft); } .alert{ background:none; background-image:none; border:.5pt solid var(--line); border-inline-start:2pt solid var(--bad); border-radius:0; box-shadow:none; padding:4mm; } .alert::before{ display:none; } .alert b{ color:var(--bad); font-size:10pt; } .alert p{ color:var(--ink-2); font-size:9pt; } .err{ background:none; border:.5pt solid var(--bad); color:var(--bad); border-radius:0; } .ok-msg{ background:none; border:.5pt solid var(--ok); color:var(--ok); border-radius:0; } .note-box{ border:.5pt dashed var(--line); border-radius:0; color:var(--ink-2); font-size:8.5pt; } /* ========================================================================== ٩) الرسوم ========================================================================== */ /* حاوية الرسم تُترك بعرضها الطبيعي (= 178mm بعد تصفير حشو البطاقة). العرض الحقيقي للـ SVG يُحسم في JS لا هنا: barsH/barsV تقرآن clientWidth لحظة البناء، فلا تكفي CSS وحدها — انظر معالج beforeprint في التركيب. */ svg{ display:block; overflow:visible; max-width:100%; /* SVG داخل عنصر قابل للانقسام يُقصّ في بعض المحرّكات. */ break-inside:avoid; page-break-inside:avoid; } .axis{ fill:var(--muted); font-size:8pt; } .lbl{ fill:var(--ink-2); font-size:8pt; } .val{ fill:var(--ink); font-size:8pt; font-weight:700; } .grid-line{ stroke:var(--line-soft); } .bar{ transition:none; } .bar:hover{ opacity:1; } .empty{ color:var(--muted); font-size:9pt; } /* ========================================================================== ١٠) الروابط — الورقة لا تُنقر ========================================================================== */ /* روابط التنقّل في index.html بلا href، فهذا المحدِّد لا يمسّها بالبناء. العزل ثنائي الاتجاه لازم: عنوان لاتيني داخل فقرة عربية يقلب الأقواس ويكسر ترتيب المسار بلا هذا السطر. */ main a[href]{ color:var(--ink); text-decoration:underline; overflow-wrap:anywhere; } main a[href]::after{ content:" ‹" attr(href) "›"; font-size:7.5pt; color:var(--muted); direction:ltr; unicode-bidi:isolate; } /* المراسي الداخلية والروابط البرمجية لا وجهة لها على الورق. */ main a[href^="#"]::after, main a[href^="javascript:"]::after, main a.no-url::after, main a.btn::after{ content:""; } /* ========================================================================== ١١) التذييل ========================================================================== */ .foot{ margin-top:8mm; padding-top:2mm; border-top:.5pt solid var(--line); color:var(--muted); font-size:8pt; text-align:center; } } /* @media print */ /* ===================================================================== ٢) وصلة الطباعة في index.html — سطر واحد يُضاف بعد lux.css مباشرة ===================================================================== */ /* ===================================================================== ٣) معالج beforeprint/afterprint — يُلصق داخل IIFE في app.js ===================================================================== */ // ---------- الطباعة: إعادة رسم المخططات بعرض الورق ---------- /* barsH وbarsV تحسبان العرض من host.clientWidth لحظة الاستدعاء، فالرسم المبنيّ على الشاشة يُطبع بعرض الشاشة لا بعرض الورق: أعمدة تفيض خارج الهامش، أو شريط ضيّق في وسط ورقة فارغة. ولا تكفي CSS لإصلاحه لأن العرض عددٌ مخبوز داخل viewBox وقت البناء لا خاصّية تُعاد حسابتها. ولماذا نفرض العرض بنمط سطري بدل الاتّكال على وسيط الطباعة؟ لأن كروم وفَيَرفُكس يطلقان beforeprint قبل تطبيق ورقة الطباعة، فـ clientWidth لحظتها ما زال عرض الشاشة. نأخذ العدد من print.css (‎--print-plot-w‎) كي يبقى مقاس الورق معرَّفًا في ملف واحد لا في ملفين يتباعدان. */ const printW = () => parseFloat(getComputedStyle(document.documentElement) .getPropertyValue('--print-plot-w')) || 672; /* حاويات الرسوم تُستنتج من DOM القائم لا من قائمة معرّفات مكتوبة بيدنا: كل زرّ «جدول» يحمل data-table بمعرّف حاويته (سبعة أزرار)، وكل مخطط متمدّد بناه barsH/barsV له svg بعرض 100٪. فأي رسم يضيفه التقرير التنفيذي لاحقًا يدخل هنا بلا تعديل. المؤشّر الدائري (gauge) يُبنى بمقاس ثابت 148، ففرض عرض الورق عليه يفكّ صفّ البطل — لذلك يُستثنى بشرط العرض لا بذكر معرّفه. */ function chartHosts() { const set = new Set(); document.querySelectorAll('.tablebtn[data-table]').forEach((b) => { const h = $(b.dataset.table); if (h) set.add(h); }); document.querySelectorAll('svg[width="100%"]').forEach((s) => { if (s.parentElement) set.add(s.parentElement); }); return Array.from(set); } /* الصفحات التي لا تُبنى من DATA: render() فيها يطلق نداءً غير متزامن لا ينتظره المتصفح، فقد يُفرَّغ الجدول في اللحظة التي تُلتقط فيها الصفحة. مصفوفة لا كائن حرفي: بحثُ المفتاح في كائن يصيب سلسلة النموذج أيضًا. */ const PRINT_SKIP = ['users', 'audit', 'device']; const printable = () => PRINT_SKIP.indexOf(VIEW) === -1; /* ختم التوثيق. الأرقام المطبوعة محسوبة على عيّنة يحدّدها شريط المرشّحات، والشريط لا يُطبع — فورقةُ «٧ أيام» وورقةُ «الكل» تخرجان متطابقتَي الشكل مختلفتَي المعنى، وتُحفظان في الملفّ نفسه. نقرأ نصّ الأزرار الفعّالة من DOM لا من ثوابت مكرّرة، فلا يمكن أن ينحرف الختم عن الواجهة. الوقت بأرقام لاتينية عمدًا: هو ختمُ سجلّ لا رقمٌ مقروء، ويطابق صيغة أعمدة الوقت في الجدول (YYYY-MM-DD) وختمَ التصدير xlsxStamp، فلا يختلط تقويمان. */ function printStampText() { const p = (x) => String(x).padStart(2, '0'); const d = new Date(); const onOf = (boxId) => { const box = $(boxId), b = box && box.querySelector('button.on'); return b ? b.textContent.trim() : ''; }; const bits = []; if (printable()) { const rng = onOf('range'); if (rng) bits.push('النطاق الزمني: ' + rng); const wf = $('who-filter'); if (wf && !wf.hidden && wf.selectedIndex >= 0) { bits.push('العرض: ' + wf.options[wf.selectedIndex].textContent.trim()); } } if (VIEW === 'log') { const f = onOf('log-filter'); if (f) bits.push('المرشّح: ' + f); const qi = $('log-q'), q = qi ? (qi.value || '').trim() : ''; if (q) bits.push('بحث: ' + q); } if (ME) bits.push('طُبع بحساب: ' + ME.name + ' — ' + ME.roleLabel); bits.push('وقت الطباعة: ' + d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) + ' ' + p(d.getHours()) + ':' + p(d.getMinutes())); return bits.join(' · '); } /* العنصر يُنشأ مرة ويبقى: render() لا يمسّ .head فلا يُمحى، و.print-only تُخفيه على الشاشة. textContent لا innerHTML — الاسم ونصّ البحث من إدخال المستخدم، وesc() هنا التفافٌ حول الحلّ الصحيح لا الحلّ. */ function printStamp() { let el = $('print-stamp'); if (!el) { const sub = $('page-sub'); if (!sub) return null; el = document.createElement('div'); el.id = 'print-stamp'; el.className = 'print-only doc-stamp'; sub.insertAdjacentElement('afterend', el); } return el; } let printing = false; function printPrep() { if (printing) return; printing = true; clearTimeout(rt); // لئلا يُعاد الرسم بعرض الشاشة أثناء الطباعة document.documentElement.classList.add('rcu-printing'); const st = printStamp(); if (st) st.textContent = printStampText(); const w = printW() + 'px'; chartHosts().forEach((h) => { h.dataset.w0 = h.style.width; h.style.width = w; }); if (printable()) render(); } function printDone() { if (!printing) return; printing = false; chartHosts().forEach((h) => { h.style.width = h.dataset.w0 || ''; delete h.dataset.w0; }); document.documentElement.classList.remove('rcu-printing'); if (printable()) render(); } addEventListener('beforeprint', printPrep); addEventListener('afterprint', printDone); /* سفاري القديم لا يطلق الحدثين — matchMedia طريقه الوحيد. الحارس printing يمنع التنفيذ مرتين حيث يعمل المساران معًا. */ if (window.matchMedia) { const mq = window.matchMedia('print'); const onMq = (e) => { if (e.matches) printPrep(); else printDone(); }; if (mq.addEventListener) mq.addEventListener('change', onMq); else if (mq.addListener) mq.addListener(onMq); /* عنوان الجدول يظهر على الورق ويتكرّر مع ترويسته حين ينقسم الجدول على صفحتين — بدونه تبدأ الصفحة الثانية بأرقام بلا هوية. */ #v-report table caption{ position:static; width:auto; height:auto; margin:0 0 2mm; padding:0; overflow:visible; clip-path:none; white-space:normal; caption-side:top; text-align:start; font-size:9pt; font-weight:700; color:var(--ink); } /* position:fixed داخل سياق الطباعة يعيد رسم العنصر على كل صفحة — وهو السبيل الوحيد لتذييل متكرّر في Chrome، إذ لا يدعم صناديق هوامش @page. ورقةٌ تُنتزع من الوثيقة يجب أن تحمل مرجعها ودرجة تداولها. */ .print-only{ display:block; } .rep-running{ position:fixed; inset-inline:0; bottom:0; display:flex; justify-content:space-between; gap:8mm; font-size:7.5pt; color:var(--muted); border-top:.5pt solid var(--line); padding-top:1.5mm; } .rep-class{ color:var(--ink); border-color:var(--ink); font-weight:700; } /* ═══ طبقة البلدة القديمة على الورق ═══ التاج المدرَّج يبقى — لكنه خطٌّ بحبرٍ ذهبي داكن لا شريط مظلم. وهو العنصر الوحيد من الطبقة الذي يُطبع: يُعرّف الوثيقة على الورقة الأولى. أما المداميك والمسمار والأساس الحجري فسطوحٌ داكنة، تبتلع الحبر وتُخرج الصفحة رمادية، فتسقط كلّها. */ .rep-cover::before{ display:block; height:6mm; background-image:var(--crowstep); background-repeat:repeat-x; background-position:center top; background-size:7mm 3mm; -webkit-mask-image:none; mask-image:none; opacity:1; } .rep-cover{ padding-top:8mm; } /* الأساس الحجري: طبقةٌ داكنة تحت كل لوح — تُلغى صراحةً لأن قاعدة .card أعلاه تُصفّر background-image، لكن background-size يبقى فيسحب طبقة وهمية لو أُعيد التعريف لاحقًا. */ .card{ background-size:auto; } /* المسمار النحاسي علامةٌ تفاعلية لا معنى لها على ورقة */ .nav a.on::before{ display:none; } } /* ========================================================================== طبقة «الوثيقة» على الورق -------------------------------------------------------------------------- الزخارف الداكنة التي تُقرأ خامةً على الشاشة تُقرأ اتّساخًا على الورق: طبقاتُ الحجر تصير خطوطًا رمادية تحت النصّ، والمسمار النحاسي نقطةً مبهمة. نُطفئها ونُبقي ما يحمل معنى بنيويًّا: الخيط الذهبي تحت العنوان، والخطّ الذي يُقفل حاشية الغلاف. ========================================================================== */ @media print{ .rep-cover, .rep-kpi-c{ background-image:none !important; } .rep-meta-c::before{ display:none !important; } .rep-sec:not(.rep-cover)::after{ display:none !important; } .rep-cover-brand .mark{ background:none !important; border:.4pt solid var(--gold); } .rep-sec table thead th{ background:none !important; } /* الخيط تحت عنوان الوثيقة يبقى: هو ما يفصل اسمها عن بياناتها. */ .rep-title::after{ background:var(--gold) !important; width:34mm; height:.8pt; } .rep-cover-foot{ border-top:.5pt solid var(--gold); } .rep-no{ background:none !important; border:.4pt solid var(--gold); box-shadow:none !important; } }