/* =============================================================
   طبقة الامتداد فوق نظام التصميم
   -------------------------------------------------------------
   لا تُعدَّل design-system.css ولا components.css إطلاقًا. هذه الطبقة
   تُحمَّل بعدهما وتحتوي فقط ما يلزم النسخة المُولَّدة من الخادم:
   عناصر التصميم نفسها حين تُطبع روابطَ بدل أزرار.

   Extension layer above the design system.
   The two design files are never edited. This layer loads after them and
   holds only what the server-rendered build needs: the same components when
   they are printed as links instead of buttons.
   ============================================================= */

/* الروابط التي ترتدي مظهر زر: نفس الشكل، بلا خط سفلي.
   Components that a server-rendered screen prints as anchors so each state
   has its own address; they must not pick up the default link underline. */
a.filter-chip,
a.chan,
a.pl-veh,
a.toolbar-btn,
a.btn-secondary,
a.btn-add,
a.rm-item,
a.um-item,
a.tab,
a.mini-btn,
a.nav-item {
  text-decoration: none;
}

/* مكوّنات على هيئة بطاقة تُطبع روابط: تأخذ لون محتواها لا لون الرابط،
   وإلا صار كل نص داخلها بلون الروابط.
   Card-shaped components printed as links take their content's colour, not
   the link colour — otherwise every word inside them turns blue. */
a.attn-num,
a.check-row,
a.dl-row,
a.mini {
  text-decoration: none;
  color: inherit;
}

/* التبويب رابط لا زر، فيحتاج نفس محاذاة النص والحشو.
   A tab is a link here, so it needs the same box behaviour a button had. */
a.tab {
  text-align: center;
  white-space: nowrap;
}

/* عنصر قائمة الصف رابط، ويجب أن يملأ عرض القائمة كما يفعل الزر.
   A row-menu entry printed as a link fills the menu the way the button did. */
.row-menu a.rm-item,
.pop-panel a.um-item {
  width: 100%;
  box-sizing: border-box;
}

/* حاوية عناصر قائمة الصف قبل نقلها إلى اللوحة العائمة.
   Row-menu items live here until the menu opens; the container is never seen. */
.row-menu-src {
  display: none;
}

/* نظام التصميم يعرّف تنبيه شاشة الدخول بحالة الخطأ وحدها، وشاشة استعادة كلمة
   المرور تحتاج التنبيه نفسه بحالة نجاح — نفس البنية بألوان الحالة الموجودة.
   The design system defines the auth alert in its error state only; the
   password-recovery screens need the same block in its success state, built
   from the state colours the system already ships. */
.auth-alert.ok { background: var(--ok-bg); border-color: var(--ok); }
.auth-alert.ok svg { color: var(--ok-ink); }
.auth-alert.ok .t { color: var(--ok-ink); }

/* لوحة التفاصيل حين تُطبع من الخادم: الصفحة خلفها لا تُمرَّر، والزر المغلق
   رابط لا زر فيحتاج نفس مظهر الزر.
   When the detail panel is server-rendered, the page behind it must not
   scroll, and its close control is a link rather than a button.
   clip وليس hidden — hidden يحوّل body إلى حاوية تمرير فيُلغي sticky على
   .sidebar فتتحرك القائمة مع المحتوى (انظر components.css §0).
   السمة وحدها لا تكفي: Esc يزيل .open ويترك data-panel-open، فيبقى
   التمرير مقفولًا حتى يُحذف المعامل من العنوان. القفل مع اللوحة المفتوحة فقط. */
body[data-panel-open]:has(.slide-panel.open),
html.scroll-locked {
  overflow: clip;
}

/* نفس علة السايدبار: min-height:auto تمنع انكماش الجسم فيتعطّل overflow-y
   على نموذج أطول من الشاشة، والصفحة خلفها مقصوصة فلا يُمرَّر شيء. */
.slide-panel .panel-body-wrap {
  min-height: 0;
  overscroll-behavior: contain;
}

.slide-panel a.icon-btn { text-decoration: none; }

/* اسم العنصر داخل صف القائمة يصير رابطًا للتفاصيل — بنفس مظهره لا بمظهر رابط.
   A list row's name becomes a link to its detail screen; it keeps the same
   appearance rather than turning into a browser-styled link. */
.chan-n a,
.cell-name a {
  text-decoration: none;
  color: inherit;
}

.chan-n a:hover,
.cell-name a:hover {
  color: var(--primary);
}

/* الإشعار في القائمة صار زر إرسال داخل نموذج (ليُعلَّم مقروءًا على الخادم).
   النموذج يختفي من التخطيط ليبقى العنصر ابنًا مباشرًا للقائمة كما في التصميم.
   A notification is a submit button inside a form, so opening it marks it read
   on the server. The form is removed from layout so the item stays a direct
   child of the list exactly as the design lays it out. */
.notif-list form,
.pop-head form {
  display: contents;
}

button.notif-item {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  font-family: inherit;
  text-align: start;
}

button.notif-item:last-child {
  border-bottom: none;
}

/* Protection cover list.
   A plan is only honest when what it does NOT cover is as legible as what it
   does, so the two lists share one shape and differ only in colour. Extends the
   .pick component family rather than inventing a second card language. */
.pick-cover { margin: 10px 0 12px; }
.pick-cover-t { font-size: 11px; font-weight: 700; margin-bottom: 5px; }
.pick-cover-t.yes { color: var(--ok-ink); }
.pick-cover-t.no { color: var(--danger-ink); margin-top: 9px; }
.cover-line {
  display: flex; gap: 6px; align-items: flex-start; margin-bottom: 4px;
  font-size: 11.5px; color: var(--ink-soft);
}
.cover-line svg { flex-shrink: 0; margin-top: 2px; color: var(--ok); }
.cover-line.no { color: var(--muted); }
.cover-line.no svg { color: var(--danger); }

/* اسم الصف رابط إلى ملفه: نفس الشكل، بلا خط سفلي.
   A row title that opens a file is a link, and must keep the cell look. */
a.cell-name { text-decoration: none; color: inherit; display: block; }
a.cell-name:hover { color: var(--primary); }

/* الزر الثانوي حين يحمل أيقونة.
   The design system's secondary button was drawn for text alone, but its own
   screens put an icon in one; inline SVG then sits on the text baseline and
   collides. Give it the same box the primary button already has. Text-only
   secondary buttons are unaffected: they were centred already. */
.btn-secondary,
a.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-secondary svg { width: 14px; height: 14px; flex-shrink: 0; }

/* صفّ القناة رابطًا: نفس الشكل، بلا خط سفلي ولا لون رابط.
   A channel row that opens something is a link here, and must keep the row
   look rather than turning into blue underlined text inside a card. */
a.chan {
  text-decoration: none;
  color: inherit;
}
a.chan:hover { background: var(--bg-2); }
a.chan.on { background: var(--primary-soft); }

/* اسم المركبة في لوحة التخطيط رابط إلى ملفها.
   The planner's vehicle cell opens the vehicle file, so it is a link — and
   must keep the cell's layout rather than becoming underlined blue text. */
a.pl-veh {
  text-decoration: none;
  color: inherit;
}
a.pl-veh:hover { background: var(--bg-2); }

/* ───────────────────────────────────────────────────────────────
   عنصر تنقّل لوحدة لم تُبنَ بعد

   يُعرَض ولا يُخفى: القائمة الجانبية خريطة النظام، وخريطة فيها ثقوب
   أصعب على الثقة من خريطة تقول «ليس هنا بعد». ولا يكون رابطًا، لأن
   إرسال المستخدم إلى لوحة القيادة وتركه يتساءل عمّا ضغطه كذبة أسوأ.
   ─────────────────────────────────────────────────────────────── */
.nav-item[data-pending] {
  opacity: 0.42;
  cursor: default;
}
.nav-item[data-pending]:hover {
  background: transparent;
  color: inherit;
}

/* شريط التبويب المقسّم روابط لا أزرار، فكل حالة لها عنوانها.
   The segmented control is printed as links so each state has its own
   address; it must wear exactly what .seg button wears. */
.seg a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: none;
  border-radius: calc(var(--r-md) - 3px);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--t-fast);
}
.seg a:hover:not(.on) { color: var(--ink); }
.seg a.on { background: var(--card); color: var(--ink); box-shadow: var(--sh-card); }
.seg a .n { font-family: var(--font-mono); font-size: 10.5px; font-weight: 800; opacity: 0.75; }

/* مخططات SVG تُرسم على الخادم: ألوانها من متغيرات النظام لا من قيم ثابتة،
   فتبديل اللوحة يعيد طلاءها دون إعادة توليد.
   Server-drawn SVG charts. Colours come from the system tokens rather than
   fixed values, so switching palette repaints them without re-rendering. */
.svg-chart { display: block; width: 100%; height: auto; overflow: visible; }
.svg-chart .ch-grid { stroke: var(--line-soft); stroke-width: 1; }
.svg-chart .ch-bar { fill: var(--primary); transition: fill var(--t-fast); }
.svg-chart .ch-bar.today { fill: var(--accent); }
.svg-chart .ch-lab { fill: var(--muted); font-family: var(--font-mono); font-size: 8.5px; }
.svg-chart .ch-val { fill: var(--ink); font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; }

/* حلقة توزيع الحالات: كل قطاع يحمل لون حالته لا لونًا من دورة ألوان.
   The status donut: each arc carries its own status colour rather than a
   colour taken from a rotating palette, so the chart and the badges agree. */
.donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut-legend { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 7px; }
.donut-legend .dl-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.donut-legend .dl-sq { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.donut-legend .dl-n { margin-inline-start: auto; font-family: var(--font-mono); font-weight: 800; color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════
   إضافات الموجة المركزية — 10 سبتمبر 2026
   مراجعها في docs/design-audit.md
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   ألوان الصورة الرمزية — لون ثابت لكل شخص

   الدليل (ق7 وق11) يطلب حرفين على خلفية لون ثابت لكل مستخدم، ليُعرف
   الصف قبل أن يُقرأ. كل الصور الرمزية في النظام كانت بلون --primary
   نفسه، فصارت كلها شريحة واحدة. الألوان مصرَّحة هنا كرموز في كتلة
   واحدة ولا تتكرّر عند الاستخدام، وهي ثابتة عبر اللوحات عمداً: لون
   الشخص لا يتغيّر حين يبدّل المستخدم الثيم.

   الدالة avatar_class() في helpers.php تشتقّ الصنف من مفتاح السجل.
   ─────────────────────────────────────────────────────────────── */
:root {
  --av-1: #0369a1;
  --av-2: #c2410c;
  --av-3: #0f766e;
  --av-4: #6d28d9;
  --av-5: #b45309;
  --av-6: #15803d;
  --av-7: #9f1239;
  --av-8: #1e40af;
}

.cell-avatar.av-1, .user-avatar.av-1, .hb-av.av-1 { background: var(--av-1); }
.cell-avatar.av-2, .user-avatar.av-2, .hb-av.av-2 { background: var(--av-2); }
.cell-avatar.av-3, .user-avatar.av-3, .hb-av.av-3 { background: var(--av-3); }
.cell-avatar.av-4, .user-avatar.av-4, .hb-av.av-4 { background: var(--av-4); }
.cell-avatar.av-5, .user-avatar.av-5, .hb-av.av-5 { background: var(--av-5); }
.cell-avatar.av-6, .user-avatar.av-6, .hb-av.av-6 { background: var(--av-6); }
.cell-avatar.av-7, .user-avatar.av-7, .hb-av.av-7 { background: var(--av-7); }
.cell-avatar.av-8, .user-avatar.av-8, .hb-av.av-8 { background: var(--av-8); }

/* ───────────────────────────────────────────────────────────────
   محدّد اللوحة: خلاياه أزرار داخل نماذج على الخادم

   التصميم يرسمها <div> ويبدّل اللوحة في المتصفح. هنا كل خلية زر إرسال
   داخل نموذج ليُحفظ الاختيار على الحساب، فيلزم تجريد الزر من مظهره
   الافتراضي، وإخراج النموذج من التخطيط لتبقى الخلية ابناً مباشراً
   للشبكة كما يفترض .theme-grid.
   ─────────────────────────────────────────────────────────────── */
.theme-grid form { display: contents; }

button.theme-cell {
  width: 100%;
  background: transparent;
  border: none;
  font-family: inherit;
  color: inherit;
}

button.theme-cell:hover { background: var(--bg-2); }
button.theme-cell.active { background: var(--primary-soft); }

/* العيّنة <span> هنا لا <div> كما في التصميم، والعنصر السطري يتجاهل
   width:100% فتنهار العيّنة إلى خط رفيع. */
.theme-cell .theme-swatch { display: block; }
.theme-btn .theme-preview { display: block; }

/* ───────────────────────────────────────────────────────────────
   صف مميَّز في جدول

   كان يُستعمل لذلك .diff-new، وهو صنف مقارنة «قبل/بعد» يحمل خلفية
   الخطر وحدّه، فظهر الصف المتأخّر أو المختار أحمر وكأنه عطل. الدليل
   يعرّف tr.is-selected للصف المختار؛ وهذان مُعدِّلان للتأخّر والانتباه
   بلون الحالة الصحيح لا بلون الخطر.
   ─────────────────────────────────────────────────────────────── */
.data-table tbody tr.is-late,
.data-table tbody tr.is-late:hover { background: var(--danger-bg); }

.data-table tbody tr.needs-attention,
.data-table tbody tr.needs-attention:hover { background: var(--warn-bg); }

/* ───────────────────────────────────────────────────────────────
   صف المجاميع في الجداول والتقارير

   نظام التصميم يعرّف .rep-total ولا تستعمله أي صفحة، ولا قاعدة tfoot
   في أي ملف، فصف الإجمالي كان يُبنى بخلفية inline أو يظهر بحشوة صفر.
   ─────────────────────────────────────────────────────────────── */
.data-table tfoot td {
  padding: 12px 14px;
  background: var(--bg-2);
  border-top: 2px solid var(--line);
  font-weight: 800;
  color: var(--ink);
}

.data-table tfoot td.num,
.data-table tfoot td .mono { font-family: var(--font-mono); direction: ltr; }

/* ───────────────────────────────────────────────────────────────
   أنماط تتكرّر بالمئات inline داخل الـviews

   عرض العمود على th يبقى inline لأنه خاصّ بالجدول، أمّا الهوامش
   والأوزان وأحجام النص فتُجمع هنا مرة واحدة.
   ─────────────────────────────────────────────────────────────── */
.mono.strong { font-weight: 800; }
.t-sm { font-size: 12.5px; }
.t-xs { font-size: 11px; }
.t-lead { font-size: 15px; font-weight: 700; }
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 14px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 16px; }
.no-flow { border-bottom: none; }
.kpi.static, .mini.static { cursor: default; }

/* التسمية العربية داخل مكوّن صُمّم لتسمية إنجليزية: المباعدة تفكّك
   الحروف المتصلة، فتُلغى بصنف بدل تكرارها inline في 52 موضعاً. */
.ar-label { letter-spacing: 0; }

/* ───────────────────────────────────────────────────────────────
   الطباعة

   القاعدة الأصلية تخفي .page-title-row كاملاً، فكانت كل ورقة تخرج من
   ميزان المراجعة وكشف الحساب والإقرار الضريبي بلا عنوان وبلا مدى
   زمني — ومستند محاسبي بلا ترويسة لا يصلح للتقديم. وتصحيح الألوان كان
   مقصوراً على حاوية لا تستعملها شاشات التقارير، فتسقط منها كل خلفية
   حالة. هذه الطبقة تعيد الترويسة وتعمّم التصحيح، وتخفي الأدوات التي
   لا معنى لها على الورق.
   ─────────────────────────────────────────────────────────────── */
/* ما يُطبع وحده: ترويسة المستند وتذييله.

   مستندٌ ضريبي يخرج بلا اسم المنشأة ورقمها الضريبي لا يصلح للتقديم، وهي
   الملاحظة نفسها التي كُتبت أعلاه حين أُضيفت الطبقة لشاشات التقارير. والشاشة
   لا تحتاجهما: الاسم في الشريط الجانبي والرقم في الإعدادات. */
.print-only { display: none; }

@media print {
  .page-title-row { display: flex !important; }
  .page-title-row .page-actions { display: none !important; }

  .print-only { display: block !important; }

  .print-head {
    border-bottom: 1.5px solid var(--ink);
    padding-bottom: 8px;
    margin-bottom: 14px;
  }
  .print-head .ph-org { font-size: 15px; font-weight: 700; color: var(--ink); }
  .print-head .ph-meta,
  .print-head .ph-doc { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }

  .print-foot {
    border-top: 1px solid var(--line);
    margin-top: 16px;
    padding-top: 8px;
    font-size: 10.5px;
    color: var(--muted);
    text-align: center;
  }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .filter-toolbar,
  .filter-panel,
  .pager,
  .tabs,
  .seg,
  .row-menu-btn,
  .row-act-btn,
  .wiz-foot { display: none !important; }

  .card,
  .table-shell { border-color: var(--line); break-inside: avoid; }

  .data-table thead { display: table-header-group; }
  .data-table tr { break-inside: avoid; }
}

/* ───────────────────────────────────────────────────────────────
   رمز التحقّق الثنائي

   المولّد يكتب اللون سمةَ عرض على الـSVG (fill="#000000")، ولا سبيل
   لتغييره من الـview. سمة العرض أضعف من أي قاعدة CSS، فقاعدة واحدة
   على الحاوية تكفي لإعادته إلى لون النظام دون لمس المتحكّم.
   ─────────────────────────────────────────────────────────────── */
.qr-wrap svg path { fill: var(--ink); }
.qr-wrap svg rect { fill: var(--card); }

/* ───────────────────────────────────────────────────────────────
   طلبات الوكلاء بعد إعادة المطابقة — أصناف كانت تُكتب inline
   ─────────────────────────────────────────────────────────────── */

/* زر يملأ عرض النموذج داخل لوحة منزلقة. الدليل يعرّف .btn-primary لهذا
   الغرض لكنه زرّ أساسي بلون --ink، ولا نظير خطر له. */
.btn-block,
a.btn-block { width: 100%; }

/* بطاقة معاينة غير قابلة للنقر: .pick تعرّف مؤشّر يد وحركة hover،
   فتبدو المعاينة قابلة للضغط وتتحرّك تحت المؤشّر بلا سبب. */
.pick.static { cursor: default; }
.pick.static:hover { transform: none; border-color: var(--line-soft); }

/* حاوية وسوم خارج لوحة الفلاتر. */
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* الرقم داخل صف التحقّق يرث حجم سطره بدل حجمه الافتراضي،
   وخانة المبلغ تتوسّط الصف ذا السطرين. */
.check-row .cr-s .mono,
.check-row .cr-n .mono { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; font-size: inherit; }
.check-row .cr-v { font-family: var(--font-mono); direction: ltr; font-weight: 800; align-self: center; }

/* التسمية العربية داخل شريط البطل وشبكة المعلومات: هذان المكوّنان يعيدان
   المباعدة الحرفية بأسبقية أعلى من .ar-label، فتُفكَّك الحروف المتصلة. */
.hb-stat .s-l.ar-label,
.info-item .il.ar-label,
.mini .mi-l.ar-label { letter-spacing: 0; }

/* شريط رأس الجدول حين يحمل سطراً وصفياً بجانب العدّاد. */
.table-head-bar { flex-wrap: wrap; gap: 8px; }

/* شريحة فلترة تحمل مربّع اختيار داخل نموذج: حالتها تُرسم على الخادم عند
   التحميل، فلا تُضيء عند التأشير قبل الحفظ. :has يجعل المظهر يتبع المربّع. */
.filter-chip:has(.check:checked) {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.filter-chip .check { margin-inline-end: 6px; }

/* عقدة سلسلة التوثيق حين تكون رابطاً إلى مستندها: نفس الشكل، بلا خط سفلي
   ولا لون رابط — كبقية المكوّنات التي تُطبع روابط في النسخة الخادمية. */
a.chain-node { text-decoration: none; color: inherit; }

/* ───────────────────────────────────────────────────────────────
   تذييل اللوحة المنزلقة: صار يحمل زرّ الإجراء بجانب «إغلاق». سطر الحالة
   يأخذ ما بقي من العرض، فإن طال نصّه ضغط الزرّين وقصّ كلماتهما. النص
   يلتف والزرّان لا يتقلّصان — فيبقى «حفظ» كاملاً بجانب «إغلاق» على أي عرض.
   ─────────────────────────────────────────────────────────────── */
.panel-footer > .btn-add,
.panel-footer > .btn-secondary,
.panel-footer > .btn-danger { flex-shrink: 0; }
.panel-footer-status { min-width: 0; }

/* ───────────────────────────────────────────────────────────────
   قائمة اللغة في الشريط العلوي: مكوّن خاص بالنسخة الخادمية لا نظير له في
   النموذج الثابت، و.um-body لا يحمل عرضًا — فانكمشت على أقصر كلمة فيها
   (مئة بكسل) والتصق العنصران بحافتيها. الحدّ الأدنى هو حدّ .row-menu نفسه،
   فتقف بعرض كل قائمة إجراءات أخرى في النظام بدل رقم مخترع.
   ─────────────────────────────────────────────────────────────── */
.pop-panel.lang-menu { min-width: 190px; }

/* ───────────────────────────────────────────────────────────────
   قوائم الشريط العلوي تتدلّى من زرّها بـ left:0 — أي تنزل يمينًا دائمًا.
   في العربية الأزرار عند الحافة اليسرى فتنزل القائمة إلى داخل الصفحة،
   وفي الإنجليزية ينقلب الشريط فتصير عند الحافة اليمنى وتنزل القائمة خارج
   الشاشة (قائمة المستخدم ٩٦px، والإشعارات ٣١px). الإسناد المنطقي إلى
   inset-inline-end يعني «اليسار» في العربية — أي ما يقع اليوم بلا تغيير —
   و«اليمين» في الإنجليزية، فتتدلّى إلى داخل الصفحة في الاتجاهين.
   و.from-start مستثناة: لها إسنادها الخاص في نظام التصميم.
   ─────────────────────────────────────────────────────────────── */
.hdr-pop > .pop-panel:not(.from-start) { inset-inline-start: auto; inset-inline-end: 0; }
/* ───────────────────────────────────────────────────────────────
   الفاتورة كورقة — نسق فاتورة النظام المحاسبي المرجعي: جداول
   محدودة بإطار، ترويسة منشأة، عنوان ثنائي اللغة، رمز QR. تُطبع
   هذه الوثيقة وحدها من شاشتها؛ الأدوات حولها تحمل no-print.
   ─────────────────────────────────────────────────────────────── */

.inv-doc-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 14px; flex-wrap: wrap; }
.inv-doc-org { flex: 1; min-width: 240px; }
.inv-doc-org-name { font-size: 17px; font-weight: 800; color: var(--ink); }
.inv-doc-org-line { font-size: 12px; color: var(--ink-soft); margin-top: 2px; text-align: right;}
.inv-doc-kind { text-align: center; font-size: 16px; font-weight: 800; color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 8px 18px; }
.inv-doc-kind .en { font-size: 11px; font-weight: 600; color: var(--muted); }
.inv-doc-meta { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.inv-doc-meta > table { flex: 1; min-width: 260px; }
.inv-doc-qr { border: 1px solid var(--line-soft); border-radius: var(--r-sm); padding: 6px; background: var(--card); }
.inv-doc-qr svg { display: block; width: 132px; height: 132px; }
.inv-doc-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.inv-doc-table td, .inv-doc-table th { border: 1px solid var(--line); padding: 6px 9px; font-size: 12.5px; text-align: start; color: var(--ink); }
.inv-doc-table th { background: var(--bg-2); font-weight: 700; }
.inv-doc-table .en { color: var(--muted); font-size: 11px; }
.inv-doc-party td:first-child { width: 32%; color: var(--ink-soft); }
.inv-doc-lines td { vertical-align: top; }
.inv-doc-totals td, .inv-doc-totals th { text-align: center; }
.inv-doc-sec { font-weight: 700; font-size: 13px; margin: 10px 0 6px; color: var(--ink); }
.inv-doc-notes { font-size: 12.5px; color: var(--ink-soft); }
.inv-doc-basis { font-size: 11px; color: var(--ink-soft); margin-top: 3px; }

@media print {
  /* من شاشة الفاتورة تُطبع الورقة وحدها. */
  body:has(#invoiceDocument) .kpi-grid,
  body:has(#invoiceDocument) .split-2,
  body:has(#invoiceDocument) .alert,
  body:has(#invoiceDocument) .print-foot,
  body:has(#creditNoteDocument) .alert { display: none !important; }
  .inv-doc { max-width: none; border: none; box-shadow: none; }
}