/*
  المرحلة 1 من docs/UI-UX-Redesign-Plan.md: App Shell (Sidebar + Top Bar) بدل الـNavbar الأفقي القديم،
  + متغيرات التصميم الأساسية (ألوان/مسافات/خط) اللي هتتستخدم في المراحل الجاية (2-5) لباقي الصفحات.
  الألوان والخط مأخوذين من الشاشات المرجعية المعتمدة (الشاشة أ/ب/ج).
  مفيش أي تغيير هنا لمنطق أو تنسيق محتوى الصفحات الحالي - الملف ده بيغطي الـShell بس.
*/

:root {
  --lk-bg: #F3F4F7;
  --lk-surface: #FFFFFF;
  --lk-sidebar-bg: #0F1B33;
  --lk-sidebar-bg-active: #182A4E;
  --lk-sidebar-text: #9AA6C4;
  --lk-sidebar-text-active: #FFFFFF;
  --lk-sidebar-border: #1E2C4D;
  --lk-accent: #3D6BF3;
  --lk-border: #E4E7EC;
  --lk-text: #1D2333;
  --lk-text-muted: #6B7280;
  /* على خلفية --lk-surface (أبيض) بيدي contrast ratio ~2.59:1 بس - أقل بكتير من حد WCAG AA (4.5:1)
     للنص العادي. استخدامه في نص مقروء فعلي (`.lk-kpi-sub`/`.lk-attn-empty`/`.lk-empty-inline` كانوا
     بيستخدموه قبل كده - راجع "WCAG-friendly focus indication and readable color contrast are present"
     في UI-UX-V2-Execution-TODO.md) بيفشل الاختبار - اتحوّلوا لـ`--lk-text-muted` بدالها (~4.83:1 على
     أبيض، عدّى الحد). استخدامه الحالي مقصور على حالتين مستثناتين من متطلب التباين أصلًا: حدود hover
     ثانوية (زرار له خلفية متغيّرة كمان، مش الإشارة الوحيدة)، ونص رقم صفحة معطّل (`.pagination
     .page-item.disabled` - عناصر واجهة معطّلة مستثناة صراحة في WCAG 1.4.3). ماتستخدموش لنص مقروء جديد. */
  --lk-text-faint: #9AA1B0;
  --lk-primary: #2952CC;
  --lk-primary-hover: #1F3FA3;
  --lk-success: #178A4C;
  --lk-success-bg: #E7F7EE;
  --lk-success-border: #C6EAD5;
  --lk-danger: #D3352C;
  --lk-danger-bg: #FCEAE9;
  --lk-danger-border: #F3C6C2;
  --lk-warning: #B4690E;
  --lk-warning-bg: #FCF0DE;
  --lk-warning-border: #F0D9B0;
  /* درجة أغمق من --lk-warning مخصصة للنص المقروء فوق --lk-warning-bg (كانت متكررة حرفيًا 3 مرات
     قبل التوكن ده - .lk-blocking-alert/.lk-final-warning) - تباين أعلى من --lk-warning العادي. */
  --lk-warning-ink: #7A4A0D;
  --lk-info: #2563EB;
  --lk-info-bg: #EAF1FF;
  --lk-info-border: #C9D8EF;
  /* نفس فكرة --lk-warning-ink بس لـ--lk-info-bg (كانت متكررة 3 مرات قبل التوكن ده). */
  --lk-info-ink: #31558F;
  --lk-radius-lg: 12px;
  --lk-radius: 8px;
  --lk-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --lk-sidebar-width: 260px;
  --lk-topbar-height: 52px;
}

body {
  /* Cairo هو خط الواجهة المعتمد (يتحمّل من _Layout.cshtml - راجع التعليق هناك لتفاصيل الـCSP).
     Segoe UI/Tahoma fallback إنتاجي آمن (متوفرين افتراضيًا على Windows وبيدعموا العربي بشكل معقول)
     لو الخط الأساسي فشل، وsans-serif fallback أخير عام. */
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  background: var(--lk-bg);
  color: var(--lk-text);
}

.app-shell {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

/* Sidebar */
.app-sidebar {
  width: var(--lk-sidebar-width);
  flex-shrink: 0;
  background: var(--lk-sidebar-bg);
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.app-sidebar-brand {
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--lk-sidebar-border);
  display: flex;
  flex-direction: column;
  color: #fff;
  text-decoration: none;
}

.app-sidebar-brand .brand-name { font-size: 19px; font-weight: 800; color: #fff; }
.app-sidebar-brand .brand-tagline { font-size: 10.5px; color: #7C89B3; font-weight: 700; letter-spacing: .05em; margin-top: 2px; }
/* أيقونة اللوجو (نسخة فاتحة - الأصلية الكحلي/الدهبي مالهاش تباين كافي فوق خلفية الشريط الجانبي الغامقة
   #0F1B33، نفس اللون تقريبًا - اتأكد منه فعليًا بفحص ألوان الملف نفسه). مقصوصة على العلامة (L + القوس)
   من غير الـwordmark/التاجلاين - دول لسه نص HTML عادي جنبها، مش جزء من الصورة، عشان يفضلوا واضحين
   في أي حجم بدل ما ينضغطوا جوه صورة مربعة صغيرة. */
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-mark { height: 28px; width: auto; flex-shrink: 0; }

.app-nav-group-label {
  padding: 0 20px;
  margin: 20px 0 8px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5C6790;
  font-weight: 700;
}

.app-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  margin: 2px 12px;
  border-radius: 8px;
  color: var(--lk-sidebar-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.app-nav-item:hover { background: var(--lk-sidebar-bg-active); color: var(--lk-sidebar-text-active); }
.app-nav-item.active { background: var(--lk-accent); color: #fff; }
.app-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Top bar */
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.app-topbar {
  height: var(--lk-topbar-height);
  flex-shrink: 0;
  background: var(--lk-surface);
  border-bottom: 1px solid var(--lk-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  gap: 16px;
}

.app-topbar-title { font-size: 16px; font-weight: 800; margin: 0; }

.app-sidebar-toggle {
  display: none;
  border: 1px solid var(--lk-border);
  background: #fff;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--lk-text-muted);
  flex-shrink: 0;
}

.app-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lk-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

.app-user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
}

.app-user-menu-btn:hover { background: #F3F5F9; }

.app-content {
  padding: 28px 32px;
}

.app-sidebar-backdrop { display: none; }

/* Print: الـShell كله (Sidebar + Top Bar) بيختفي وقت الطباعة زي الـheader/footer القديمين بالظبط -
   صفحات الطباعة (document-print-area) لازم تفضل معزولة بصريًا عن الـShell زي ما هو موثّق في خطة التصميم */
@media print {
  .app-sidebar,
  .app-topbar,
  .app-sidebar-toggle {
    display: none !important;
  }

  .app-shell { display: block; }
  .app-content { padding: 0; }

  /* .app-skip-link (position:fixed) بيتخفى بصريًا عادةً بـtransform لحد ما ياخد focus - مفيدة لوحة
     المفاتيح بس، ومفيش لوحة مفاتيح على ورقة مطبوعة. اتأكد فعليًا (لقطة شاشة كاملة الصفحة تحت محاكاة
     الطباعة) إنها كانت بتظهر متراكبة فوق عنوان الصفحة - عناصر position:fixed بتتصرف بشكل غير متوقع في
     محركات الطباعة/PDF المختلفة، فإخفاؤها صراحةً هنا أضمن من الاعتماد على الـtransform بس. */
  .app-skip-link { display: none !important; }
}

/* Mobile: Sidebar تتحول لـDrawer بزرار فتح جوه الـTop Bar */
@media (max-width: 991.98px) {
  .app-sidebar-toggle { display: flex; }

  .app-sidebar {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform .2s ease;
  }

  .app-shell.sidebar-open .app-sidebar { transform: translateX(0); }

  .app-shell.sidebar-open .app-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 35, .45);
    z-index: 1040;
  }

  .app-content { padding: 20px 16px; }
  .app-topbar { padding: 0 16px; }
}

/*
  المرحلة 2 - Dashboard الأدمن: أول مكونات مشتركة فعلية من قسم 19 في الخطة (KPI Card، Panel، Status
  Badge، Attention Row) - هتتستخدم تاني مع كل صفحة بتتصمم في المراحل الجاية بدل ما تتكرر.
*/

.lk-kpi-card {
  background: var(--lk-surface);
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-lg);
  padding: 18px 20px;
  box-shadow: var(--lk-shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

a.lk-kpi-card:hover { box-shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.05); }
.lk-kpi-card.is-danger { border-color: var(--lk-danger-border); }
.lk-kpi-card.is-danger .lk-kpi-value { color: var(--lk-danger); }
.lk-kpi-card.is-warning { border-color: var(--lk-warning-border); }
.lk-kpi-value { font-size: 26px; font-weight: 800; line-height: 1; }
.lk-kpi-label { font-size: 12.5px; color: var(--lk-text-muted); font-weight: 700; }
.lk-kpi-sub { font-size: 11.5px; color: var(--lk-text-muted); font-weight: 600; }

.lk-panel { background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: var(--lk-radius-lg); overflow: hidden; }
.lk-panel-header { padding: 16px 20px; border-bottom: 1px solid var(--lk-border); display: flex; align-items: center; justify-content: space-between; }
.lk-panel-title { font-size: 14.5px; font-weight: 800; }

/* Danger zone (قسم 1 من UI-UX-V2-Execution-TODO.md) - نفس هيكل .lk-panel بالظبط بس بتلوين الخطر،
   للإجراءات شبه اللارجعية زي عكس مستند مرحّل. أول استخدام فعلي: قسم "عكس المستند المرحّل" في
   StockDocuments/Details اللي كان `card border-danger` خام (ألوان Bootstrap مش توكنز التصميم). */
.lk-danger-zone { background: var(--lk-danger-bg); border: 1px solid var(--lk-danger-border); border-radius: var(--lk-radius-lg); overflow: hidden; }
.lk-danger-zone-header { padding: 16px 20px; border-bottom: 1px solid var(--lk-danger-border); font-size: 14.5px; font-weight: 800; color: var(--lk-danger); }
.lk-danger-zone-body { padding: 20px; }

.lk-attn-row { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--lk-border); }
.lk-attn-row:last-child { border-bottom: none; }
.lk-attn-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lk-attn-icon svg { width: 17px; height: 17px; }
.lk-attn-icon.is-danger { background: var(--lk-danger-bg); color: var(--lk-danger); }
.lk-attn-icon.is-warning { background: var(--lk-warning-bg); color: var(--lk-warning); }
.lk-attn-empty { padding: 28px 20px; text-align: center; color: var(--lk-text-muted); font-size: 13px; font-weight: 600; }

.lk-table { width: 100%; border-collapse: collapse; }
.lk-table th { text-align: start; font-size: 11.5px; color: var(--lk-text-muted); font-weight: 700; padding: 11px 20px; border-bottom: 1px solid var(--lk-border); background: #FAFBFC; }
.lk-table td { padding: 12px 20px; border-bottom: 1px solid var(--lk-border); font-size: 13px; }
.lk-table tr:last-child td { border-bottom: none; }

.lk-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.lk-badge-draft { background: #EEF0F4; color: #4B5468; }
/* مسودات المستندات في قوائم المستندات: مظللة بالأصفر عشان تبان فوق المرحّل */
.lk-badge-doc-draft { background: #FFE14D; color: #5C4600; }
.lk-badge-posted { background: var(--lk-success-bg); color: var(--lk-success); }
.lk-badge-danger { background: var(--lk-danger-bg); color: var(--lk-danger); }
/* Issue #307 - مخزن مشتريات الموقع لازم يتميّز بصريًا بشارة تحذيرية (warning/yellow) في عمود "النوع"
   بدل نص "مشتريات موقع" المكرر جنب الاسم - نفس توكنات --lk-warning-bg/--lk-warning-ink المستخدمة بالفعل
   في .alert-warning/.lk-final-warning (النسخة الأغمق من النص عشان التباين يفضل مقبول فوق الخلفية الفاتحة،
   نفس مبدأ .lk-badge-danger/.lk-badge-posted بالحرف). */
.lk-badge-warning { background: var(--lk-warning-bg); color: var(--lk-warning-ink); }

/*
  المرحلة 3 - مساحة المخزن: تبويبات بشكل الـApp Shell (قسم 9 في الخطة) بدل أزرار btn-outline-dark
  متجاورة - نفس التبويبات وروابطها القديمة بالحرف، شكل بصري بس. .lk-tabs كلاس عام مستخدم في 5 صفحات -
  4 منهم تبويبين بس (Protocols/Index, Workspace/Protocols|PartnerDetails, Partners/Details) ومحتاجين
  الشكل البسيط بس (flex+wrap عادي، مش overflow-x). التبويبات الحقيقية اللي بتحتاج scroll أفقي هي
  الثمانية بتاعة _Tabs.cshtml (مساحة المخزن) بس - كلاس إضافي `.lk-tabs-scroll` عشانها بدل ما نأثر على
  الأربع صفحات التانية بالغلط.
*/
.lk-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--lk-border); flex-wrap: wrap; }
.lk-tab { padding: 12px 2px; font-size: 13.5px; font-weight: 700; color: var(--lk-text-muted); text-decoration: none; border-bottom: 2.5px solid transparent; }
.lk-tab:hover { color: var(--lk-text); }
.lk-tab.active { color: var(--lk-primary); border-bottom-color: var(--lk-primary); }

/* كانت .lk-tabs نفسها flex-wrap:wrap - على الموبايل (8 تبويبات) بيعمل "سحابة تبويبات" لغاية 4 صفوف
   بدل شريط واحد (قسم 4 في UI-UX-V2-Execution-TODO.md: "avoid a crowded multi-row tab cloud" - اتأكد
   فعليًا: كان 191px ارتفاع على 390px/320px بدل صف واحد). نفس حل .lk-table-scroll بالحرف: عدم اللف +
   scroll أفقي محلي، مع نفس إصلاح RTL Chromium bug (direction:ltr على الحاوية). عكس الجدول، مفيش عنصر
   ابن واحد يلف كل التبويبات فبنضيف .lk-tabs-inner (flex نفسها) بـdirection:rtl عشان ترتيب التبويبات
   (يمين لشمال) يفضل صح - direction على كل .lk-tab لوحده مكانش كفاية (بيأثر على النص جواه بس، مش ترتيب
   عناصر الـflex نفسها اللي بيتحكم فيه الحاوية). */
.lk-tabs.lk-tabs-scroll { display: block; overflow-x: auto; direction: ltr; flex-wrap: initial; }
.lk-tabs-scroll .lk-tabs-inner { display: flex; gap: 26px; direction: rtl; width: max-content; min-width: 100%; }
.lk-tabs-scroll .lk-tab { white-space: nowrap; }
.lk-tab:hover { color: var(--lk-text); }
.lk-tab.active { color: var(--lk-primary); border-bottom-color: var(--lk-primary); }

/*
  المرحلة 4 - القوائم: قالب صفحة قائمة موحّد (قسم 10 في الخطة) - Page Header + جدول + Pagination بنفس
  الشكل في كل صفحات القوائم (المستندات/الأصناف/الجهات/سجل الحركة/المحاضر/النواقص/المستخدمون).
*/
.lk-page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.lk-page-title { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.lk-page-desc { font-size: 13px; color: var(--lk-text-muted); margin: 0; }
.lk-page-eyebrow { margin: 0 0 4px; color: var(--lk-primary); font-size: 11px; font-weight: 800; letter-spacing: .04em; }

.lk-badge-info { background: var(--lk-info-bg); color: var(--lk-info); }

/* تفاصيل حدث سجل التدقيق (Issue #119 [Y2]) - JSON خام صغير جوه <details> قابل للطي لكل صف */
.lk-audit-details { font-size: 11px; white-space: pre-wrap; word-break: break-word; background: var(--lk-surface-muted, #f6f7f9); border-radius: 6px; padding: 8px; margin: 6px 0 0; max-width: 480px; }

/* قائمة "ماذا تغيّر" المفهومة (Issue #311) - سطر واحد لكل تغيير/معلومة، بدون أي overflow أفقي حتى مع
   قيم طويلة (كود جهاز/اسم مخزن...) - نفس عرض العمود المتاح دايمًا (max-width:480px يفضل مطابق للـ<pre>
   الخام المجاور، كده الاتنين بياخدوا نفس المساحة تقريبًا داخل خلية الجدول). `<details>` "التفاصيل
   التقنية" مطوي افتراضيًا (سلوك <details> القياسي بلا `open`) - العرض المفهوم هو الأساسي، الخام ثانوي. */
.lk-audit-changes { list-style: none; margin: 0; padding: 0; max-width: 480px; font-size: 13px; }
.lk-audit-changes li { padding: 3px 0; word-break: break-word; }
.lk-audit-changes li + li { border-top: 1px dashed var(--lk-border); }
.lk-audit-raw summary { cursor: pointer; font-size: 12px; color: var(--lk-text-muted); margin-top: 6px; }

/* لوجو Laniakea أعلى كارت تسجيل الدخول (طلب صاحب المشروع 2026-09-08) - بديل شارة النص "Laniakea" القديمة
   (Pages/Account/Login.cshtml). logo.png (نسخة كحلي، مصممة لخلفية فاتحة زي .lk-panel هنا بالظبط - عكس
   logo-light.png الفضي المستخدم في الشريط الجانبي الغامق و_Layout.cshtml). */
.lk-login-logo { height: 72px; width: auto; }

/* مكوّنات مستخدمة في صفحات V2 المعاد تصميمها بس متعرّفتش في الـCSS أصلًا - اتلاقت وقت مراجعة PR #44
   (25 استخدام في 21 ملف لـ.lk-empty-state لوحدها) - النص كان بيتلزّق ببعضه من غير مسافة، وكروت الـKPI
   في /Index كانت بتترص عمود واحد بدل شبكة. */
.lk-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 24px;
  text-align: center;
}
.lk-empty-state strong,
.lk-empty-state h2 { margin: 0; font-size: 14.5px; font-weight: 800; color: var(--lk-text); }
.lk-empty-state span,
.lk-empty-state p { margin: 0; font-size: 12.5px; color: var(--lk-text-muted); max-width: 440px; }
.lk-empty-state > .lk-badge { margin-bottom: 2px; }
.lk-empty-state > .btn,
.lk-empty-state > a.btn,
.lk-empty-state > .d-flex { margin-top: 6px; }

.lk-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--lk-space-3, 12px); }

.lk-panel-subtitle { margin: 2px 0 0; color: var(--lk-text-muted); font-size: 12px; }
.lk-panel-body { padding: 20px; }

.lk-choice-card {
  padding: 10px 12px;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius);
  cursor: pointer;
}
.lk-choice-card:hover { border-color: #c9ced8; background: #fafbfc; }
.lk-choice-card:has(input:checked) { border-color: var(--lk-primary); background: var(--lk-info-bg); }

.lk-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 1px 6px;
  margin-inline-start: 4px;
  border-radius: 999px;
  background: var(--lk-border);
  color: var(--lk-text-muted);
  font-size: 11px;
  font-weight: 700;
}
.lk-tab.active .lk-tab-count { background: var(--lk-info-bg); color: var(--lk-primary); }

.lk-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lk-space-4, 16px); margin-bottom: var(--lk-space-3, 12px); flex-wrap: wrap; }
.lk-section-title { margin: 0; font-size: 15px; font-weight: 800; }
.lk-section-desc { margin: 2px 0 0; color: var(--lk-text-muted); font-size: 12px; }
.lk-result-count {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--lk-border);
  color: var(--lk-text-muted);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* لون الزرار الأساسي (إجراء واحد أساسي لكل صفحة - قسم 15 بالخطة) بدل btn-dark الافتراضي القديم */
.btn-primary { background: var(--lk-primary); border-color: var(--lk-primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--lk-primary-hover); border-color: var(--lk-primary-hover); }

/* باقي متغيرات الأزرار (قسم 1 من UI-UX-V2-Execution-TODO.md) - نفس منطق btn-primary فوق بالحرف:
   إعادة تلوين مكوّنات Bootstrap الجاهزة (btn-danger/btn-outline-danger/btn-success/btn-outline-secondary)
   بألوان التوكنز (--lk-danger/--lk-success) بدل ألوان Bootstrap الافتراضية، عشان تطابق ألوان البادچات
   (.lk-badge-danger/.lk-badge-posted...) بدل ما تكون شبه متطابقة بس مش نفس القيمة بالظبط. الاستخدام
   الفعلي منتشر بالفعل في المشروع (btn-outline-secondary للإجراء الثانوي، btn-danger/btn-outline-danger
   للحذف، btn-success للترحيل/الاعتماد) - التعديل هنا لوني بس، بدون تغيير أي `class` في أي صفحة. */
.btn-danger { background: var(--lk-danger); border-color: var(--lk-danger); }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background: #B82A22; border-color: #B82A22; }
.btn-outline-danger { color: var(--lk-danger); border-color: var(--lk-danger); }
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active { background: var(--lk-danger); border-color: var(--lk-danger); color: #fff; }

.btn-success { background: var(--lk-success); border-color: var(--lk-success); }
.btn-success:hover, .btn-success:focus, .btn-success:active { background: #126B3A; border-color: #126B3A; }
.btn-outline-success { color: var(--lk-success); border-color: var(--lk-success); }
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active { background: var(--lk-success); border-color: var(--lk-success); color: #fff; }

.btn-outline-secondary { color: var(--lk-text); border-color: var(--lk-border); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active { background: var(--lk-bg); border-color: var(--lk-text-faint); color: var(--lk-text); }

/* Ghost وIcon-only لسه مالهمش استخدام فعلي في أي صفحة (راجع UI-UX-V2-Execution-TODO.md) - التعريف هنا
   جاهز لأول صفحة/مكوّن هيحتاجهم (زي قائمة إجراءات الصف بثلاث نقاط الموثقة كتحسين مستقبلي في CLAUDE.md)
   بدل ما يتكرر تعريفه من الصفر وقتها. */
.btn-ghost { background: transparent; border-color: transparent; color: var(--lk-text-muted); }
.btn-ghost:hover, .btn-ghost:focus { background: var(--lk-bg); color: var(--lk-text); border-color: transparent; }
.btn-icon { width: var(--lk-control-height); height: var(--lk-control-height); padding: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.btn-icon.btn-sm { width: 34px; height: 34px; }

/* Touch targets are large enough (راجع UI-UX-V2-Execution-TODO.md) - `.btn-sm` بتوكنز Bootstrap
   الافتراضية بيرندر ~27px ارتفاع فعليًا (اتقاس حي) - أقل من حد اللمس المريح (~44px، توصية WCAG 2.5.5
   AAA ومعايير iOS/Android). مطبّقة على `.btn-sm` بكثافة في أزرار "حذف"/"•••" جوه جداول المستندات والقوائم -
   أكتر الإجراءات اتكرارًا على الموبايل. الحل مقصور على الموبايل بس (`max-width: 575.98px`) عشان كثافة
   الجداول على الديسكتوب (فأرة، دقة أعلى) تفضل زي ما هي بالظبط - نفس مبدأ باقي قواعد هذا الـbreakpoint. */
@media (max-width: 575.98px) {
  .btn-sm { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .lk-filter-chip { min-height: 44px; }
}

/* Pagination بنفس نظام الألوان الجديد - تعديل على مكوّن Bootstrap الجاهز بدل استبداله بالكامل */
.pagination .page-link { color: var(--lk-text); border-color: var(--lk-border); }
.pagination .page-item.active .page-link { background: var(--lk-primary); border-color: var(--lk-primary); }
.pagination .page-link:hover { background: #F3F5F9; color: var(--lk-text); }
.pagination .page-item.disabled .page-link { color: var(--lk-text-faint); }


/* UI/UX V2 foundation and application-shell interaction states */
:root {
  --lk-space-1: 4px;
  --lk-space-2: 8px;
  --lk-space-3: 12px;
  --lk-space-4: 16px;
  --lk-space-5: 24px;
  --lk-space-6: 32px;
  --lk-control-height: 42px;
  --lk-focus-ring: 0 0 0 3px rgba(61, 107, 243, .24);
  --lk-sidebar-compact-width: 82px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.sidebar-drawer-open { overflow: hidden; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--lk-accent);
  outline-offset: 2px;
  box-shadow: var(--lk-focus-ring);
}

.app-skip-link {
  position: fixed;
  inset-inline-start: 16px;
  top: 12px;
  z-index: 2000;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: var(--lk-radius);
  background: var(--lk-surface);
  color: var(--lk-text);
  font-weight: 700;
  text-decoration: none;
}
.app-skip-link:focus { transform: translateY(0); }

.app-sidebar,
.app-main,
.app-sidebar-brand,
.app-nav-item,
.app-nav-group-label {
  transition: width .2s ease, padding .2s ease, margin .2s ease, transform .2s ease;
}

.app-nav-group-label {
  width: calc(100% - 24px);
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  background: transparent;
  text-align: start;
  cursor: pointer;
}
.app-nav-group-label svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform .2s ease;
}
.app-nav-group-label[aria-expanded="false"] svg { transform: rotate(90deg); }
.app-nav-item.nav-group-collapsed { display: none; }

.app-topbar-context { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-topbar-title {
  color: var(--lk-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-sidebar-compact-toggle {
  width: 34px;
  height: 34px;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius);
  background: var(--lk-surface);
  color: var(--lk-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.app-sidebar-compact-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.app-user-identity { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.app-user-identity strong { color: var(--lk-text); font-size: 13px; }
.app-user-identity small { color: var(--lk-text-muted); font-size: 10.5px; }

.app-shell.sidebar-compact .app-sidebar { width: var(--lk-sidebar-compact-width); }
.app-shell.sidebar-compact .app-sidebar-brand { align-items: center; padding-inline: 8px; }
/* الشريط المضغوط (82px) - عرض متاح صغير جدًا لأيقونة + نص جنب بعض، فبنكتفي بالأيقونة بس (نفس نمط أغلب
   التطبيقات وقت طي الشريط الجانبي) بدل ما نصغّر النص لحد ما يتلخبط. */
.app-shell.sidebar-compact .brand-name,
.app-shell.sidebar-compact .brand-tagline,
.app-shell.sidebar-compact .app-nav-group-label span,
.app-shell.sidebar-compact .app-nav-group-label svg { display: none; }
.app-shell.sidebar-compact .app-nav-group-label { margin-block: 10px 4px; min-height: 1px; padding: 0; }
.app-shell.sidebar-compact .app-nav-item {
  justify-content: center;
  gap: 0;
  margin-inline: 10px;
  padding-inline: 0;
  font-size: 0;
}
.app-shell.sidebar-compact .app-nav-item svg { width: 20px; height: 20px; }
.app-shell.sidebar-compact .app-sidebar-compact-toggle svg { transform: rotate(180deg); }

@media (max-width: 1199.98px) and (min-width: 992px) {
  .app-shell { --lk-sidebar-width: 230px; }
}

@media (max-width: 991.98px) {
  .app-sidebar-compact-toggle { display: none; }
  .app-shell.sidebar-compact .app-sidebar { width: var(--lk-sidebar-width); }
  .app-user-identity { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* UI/UX V2 document workflow */
.lk-eyebrow {
  margin-bottom: var(--lk-space-1);
  color: var(--lk-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.lk-document-page-header { align-items: flex-end; }
.lk-document-form { padding-bottom: 88px; }
.lk-form-alert:empty { display: none; }
.lk-form-alert {
  margin-bottom: var(--lk-space-4);
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--lk-radius);
  font-size: 13px;
  font-weight: 600;
}
.lk-form-alert-danger { border-color: var(--lk-danger-border); background: var(--lk-danger-bg); color: var(--lk-danger); }

/* رسائل النجاح/الخطأ/التحذير/المعلومات (Bootstrap alert-* الجاهزة، مستخدمة في 20+ صفحة) بنفس صيغة
   الألوان المستخدمة في البادچات بالظبط (خلفية فاتحة + نص بلون التوكن الأساسي) - نفس منطق أزرار
   btn-danger/btn-success فوق، وتيّنت الحدود بنفس القيم المستخدمة بالفعل في .is-success/.is-warning/
   .lk-filter-chip بدل قيم جديدة عشوائية. */
.alert-success { background: var(--lk-success-bg); border-color: var(--lk-success-border); color: var(--lk-success); }
.alert-danger { background: var(--lk-danger-bg); border-color: var(--lk-danger-border); color: var(--lk-danger); }
.alert-warning { background: var(--lk-warning-bg); border-color: var(--lk-warning-border); color: var(--lk-warning); }
.alert-info { background: var(--lk-info-bg); border-color: var(--lk-info-border); color: var(--lk-info); }

.lk-document-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--lk-space-5);
  align-items: start;
  min-width: 0;
}
/* min-width:0 على كل حلقة في السلسلة عشان جدول سطور المستند (min-width:720px داخل
   .lk-document-lines{overflow-x:auto}) ميعملش overflow أفقي على الصفحة كلها بدل ما يتقفل
   جوه الـscroll المحلي بتاعه - افتراضي Grid/Flex items بيرفضوا يصغروا عن حجم المحتوى
   الداخلي إلا لو min-width:0 صريحة (bug حقيقي كان بيسبب overflow 382px على الموبايل). */
.lk-document-main { display: grid; gap: var(--lk-space-4); min-width: 0; }
.lk-form-section {
  overflow: visible;
  min-width: 0;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-lg);
  background: var(--lk-surface);
  box-shadow: var(--lk-shadow-sm);
}
.lk-form-section-header {
  min-height: 74px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--lk-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lk-space-4);
}
.lk-form-section-header > div:first-child {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}
.lk-section-step {
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--lk-info-bg);
  color: var(--lk-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.lk-form-section-header h2 { margin: 0; font-size: 15px; font-weight: 800; }
.lk-form-section-header p {
  grid-column: 2;
  margin: 2px 0 0;
  color: var(--lk-text-muted);
  font-size: 12px;
}
.lk-form-section-body { padding: 20px; min-width: 0; }
/* دي كانت كلها محصورة جوه .lk-form-section بس (الفورمات المُعاد بناؤها زي CreateReceipt) - القواعد
   نفسها توكنز/تحجيم عام مالهاش أي افتراض هيكلي عن .lk-form-section تحديدًا، فبقت عامة (بدون الـscoping)
   عشان أي فورم Bootstrap عادي لسه بتصميمه القديم (Users/Create, Warehouses/Create...) ياخد نفس شكل
   التحكمات الأساسي (ارتفاع، ألوان، focus ring) بدل ما يفضل بألوان Bootstrap الافتراضية لحد ما ييجي
   دوره في إعادة البناء الكاملة (قسم 6/8 في UI-UX-V2-Execution-TODO.md). */
.form-label { margin-bottom: 6px; color: var(--lk-text); font-size: 12.5px; font-weight: 700; }
.form-control,
.form-select {
  min-height: var(--lk-control-height);
  border-color: var(--lk-border);
  border-radius: var(--lk-radius);
  color: var(--lk-text);
  font-size: 13px;
}
textarea.form-control { min-height: auto; }
.form-control:hover,
.form-select:hover { border-color: #c9ced8; }
.form-control:focus,
.form-select:focus {
  border-color: var(--lk-accent);
  box-shadow: var(--lk-focus-ring);
}
.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
  background: #f7f8fa;
  color: var(--lk-text-muted);
}
.form-text { margin-top: 6px; color: var(--lk-text-muted); font-size: 11.5px; }
/* Checkbox/radio بلون التصميم بدل أزرق Bootstrap الافتراضي - accent-color خاصية أصلية بالمتصفح، بتشتغل
   على عناصر Bootstrap الجاهزة من غير أي تعديل markup. */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--lk-primary); }

.lk-line-composer {
  margin-bottom: var(--lk-space-4);
  padding: 16px;
  border: 1px solid #dce3f5;
  border-radius: 10px;
  background: #f8faff;
}
.lk-line-search { margin-bottom: var(--lk-space-4); }
.lk-line-add-cell { padding-top: 27px; }
.lk-search-results { z-index: 1050; max-height: 300px; overflow-y: auto; }
.lk-search-results .list-group-item { font-size: 13px; }

/* قائمة اختيار تصنيفات الصنف (Items/Create, Items/Edit) - شجرة مسطّحة بعمق مفتوح، ممكن تطول */
.lk-category-checklist { max-height: 260px; overflow-y: auto; border: 1px solid var(--lk-border); border-radius: 8px; padding: var(--lk-space-3); }

/* شجرة تصنيفات الأصناف الحقيقية (Issue #242) - ItemCategories/Index. عمود واحد بس فيه الخلية دي
   (lk-tree-cell) بتحمل زر Expand/Collapse + الاسم؛ باقي الأعمدة (عدد الأصناف/الإجراءات) عادية. */
.lk-tree-cell { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.lk-tree-toggle, .lk-tree-toggle-spacer { flex: 0 0 auto; width: 32px; height: 32px; min-width: 32px; }
.lk-tree-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; border-radius: 6px; padding: 0; cursor: pointer; color: var(--lk-text-muted);
}
.lk-tree-toggle:hover, .lk-tree-toggle:focus-visible { background: var(--lk-surface-muted, #f1f3f9); }
.lk-tree-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .15s ease; }
/* نفس اتفاقية .app-nav-group-label بالحرف (نفس مبدأ الطي العمودي، نفس الـSVG) - مطوي = 90deg. */
.lk-tree-toggle[aria-expanded="false"] svg { transform: rotate(90deg); }
/* [hidden] الأصلية بتتغلب عليها .lk-responsive-table tr{display:block} على الموبايل (أي قاعدة Author
   عادية بتكسب على قاعدة الـUA stylesheet بغض النظر عن الـspecificity) - لازم !important صريح هنا عشان
   الصفوف المطوية تفضل مخفية فعليًا على كل المقاسات، مش بس سطح المكتب. */
.lk-tree-row[hidden] { display: none !important; }
.lk-tree-row-highlight { animation: lk-tree-highlight-fade 2.5s ease; }
@keyframes lk-tree-highlight-fade {
  from { background-color: var(--lk-warning-bg); }
  to { background-color: transparent; }
}

/* محدد التصنيفات الشجري المشترك (Issue #242 بند 2/7/8) - Items/Create, Items/Edit، ومودال التعديل
   السريع في Items/Index. صف <div> (مش <tr> - مفيش جدول هنا) بيحمل [toggle] [checkbox+label] بالترتيب
   ده - في RTL أول عنصر بيترندر أقصى اليمين، فالـtoggle (لو موجود) بيبقى أبعد لليمين شوية عن الـcheckbox،
   والـcheckbox يفضل ملاصق مباشرة لاسم التصنيف (المطلوب بالحرف في نص الـIssue) - الاتنين متمايزين بصريًا
   (شكل/حجم مختلف) ووظيفيًا (مستمعين مستقلين تمامًا، راجع lkInitCategoryTreeSelector في site.js). */
.lk-tree-selector-row { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; }
/* بديل عن Bootstrap .form-check عمدًا (راجع تعليق _CategoryTreeSelector.cshtml للسبب الكامل) - checkbox
   أول عنصر في الـDOM هنا (يترندر أقصى اليمين جوه هذا الصف الفرعي في RTL)، label بعده - النتيجة الصف
   الأشمل بالكامل من يمين لشمال: [toggle] [checkbox] [label] بالضبط زي المطلوب. */
.lk-tree-selector-checkbox-group { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.lk-tree-selector-checkbox-group input[type="checkbox"] { flex: 0 0 auto; margin: 0; cursor: pointer; }
.lk-tree-selector-checkbox-group label { margin: 0; cursor: pointer; }
/* نفس احتياط .lk-tree-row[hidden] فوق - مش داخل جدول هنا فمفيش قاعدة UA لصف الجدول تتغلب عليها فعليًا،
   لكن !important صريح تأمين إضافي رخيص بدل الاعتماد على ترتيب القواعد ضمنيًا. */
.lk-tree-selector-row[hidden] { display: none !important; }
.lk-tree-scroll { max-height: 320px; overflow-y: auto; border: 1px solid var(--lk-border); border-radius: 8px; padding: var(--lk-space-3); }

/* عمود التصنيفات في كتالوج الأصناف (Items/Index، Issue #242 بند 7) - Badges مضغوطة مع بعض بلا ما
   الصف يكبر. */
.lk-chip-group { display: flex; flex-wrap: wrap; gap: 4px; }

.lk-document-lines {
  overflow-x: auto;
  border: 1px solid var(--lk-border);
  border-radius: 10px;
  background: var(--lk-surface);
  /* الصفحة RTL بالكامل، وجدول السطور بعرض min-width:720px بيعدّي عرض الشاشة على الموبايل عمدًا
     (عشان يفضل مقروء بدل ما يتلخبط) - المفروض يتقفل ويتعمله scroll محلي جوه هنا بس. لكن Chromium
     عنده bug معروف: overflow-x:auto جوه container اتجاهه rtl بيسرّب عرض المحتوى الحقيقي (720px)
     لـdocument.documentElement.scrollWidth بره الصفحة كلها، فبيعمل scroll أفقي كامل للصفحة بدل
     الجدول بس (اتأكد فعليًا: بدون الإصلاح ده كان بيعمل 382px overflow على 390px viewport).
     الحل القياسي المعروف لنفس الـbug: direction:ltr على الـcontainer نفسه (بيخلي scrollLeft يتصرف
     بالمنطق الموجب العادي بدل السالب اللي RTL بيفرضه)، مع رجوع direction:rtl على الجدول جواه
     عشان ترتيب الأعمدة يفضل صح بصريًا (يمين لشمال) - الاتجاهين اتأكد منهم حيًا. */
  direction: ltr;
}
.lk-document-lines > table { direction: rtl; }
.lk-document-lines:focus-visible { outline-offset: 3px; }
.lk-document-lines .lk-table { min-width: 720px; }
/* سند الصرف (Issue #261 C1): أسماء الحسابات طويلة (كود - اسم) والمبالغ بمنزلتين فالحقول لازم تتسع ما تتقصّش
   - الجدول نفسه بيتمرّر أفقيًا جوه .lk-document-lines على الشاشات الضيقة. */
/* حاوية RTL عشان التمرير الأفقي يبدأ من اليمين (أول عمود ظاهر كامل) بدل ما يبدأ مقصوص من اليمين. */
.lk-document-lines:has(> .lk-table-wide) { direction: rtl; }
@media (min-width: 768px) {
    .lk-document-lines .lk-table-wide { min-width: 840px; }
    .lk-document-lines .lk-table-wide select { min-width: 200px; }
    .lk-document-lines .lk-table-wide .amount { min-width: 120px; }
}
.lk-document-lines tfoot th {
  padding: 13px 20px;
  border-top: 1px solid var(--lk-border);
  background: #fafbfc;
  font-size: 12.5px;
}
.lk-empty-inline {
  padding: 24px 16px;
  color: var(--lk-text-muted);
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
}
.lk-document-lines tbody:has(tr) + tfoot + .lk-empty-inline { display: none; }

.lk-document-summary {
  position: sticky;
  top: calc(var(--lk-topbar-height) + 20px);
}
.lk-document-summary-card {
  overflow: hidden;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-lg);
  background: var(--lk-surface);
  box-shadow: var(--lk-shadow-sm);
}
.lk-document-summary-header {
  padding: 15px 18px;
  border-bottom: 1px solid var(--lk-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 800;
}
.lk-summary-list { margin: 0; padding: 6px 18px; }
.lk-summary-list > div {
  padding: 11px 0;
  border-bottom: 1px solid var(--lk-border);
  display: flex;
  justify-content: space-between;
  gap: var(--lk-space-3);
}
.lk-summary-list > div:last-child { border-bottom: 0; }
.lk-summary-list dt { color: var(--lk-text-muted); font-size: 11.5px; font-weight: 600; }
.lk-summary-list dd { margin: 0; color: var(--lk-text); font-size: 12.5px; font-weight: 800; }
.lk-summary-note {
  margin: 8px 12px 12px;
  padding: 11px 12px;
  border-radius: var(--lk-radius);
  background: var(--lk-info-bg);
  color: var(--lk-info-ink);
  font-size: 11.5px;
  line-height: 1.7;
}

.lk-form-action-bar {
  position: fixed;
  inset-inline: var(--lk-sidebar-width) 0;
  bottom: 0;
  z-index: 1020;
  min-height: 72px;
  padding: 12px 32px;
  border-top: 1px solid var(--lk-border);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -8px 24px rgba(16, 24, 40, .06);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lk-space-4);
}
.lk-form-action-bar > div:first-child { display: flex; flex-direction: column; }
.lk-form-action-bar strong { font-size: 12.5px; }
.lk-form-action-bar span { color: var(--lk-text-muted); font-size: 11px; }
.app-shell.sidebar-compact .lk-form-action-bar { inset-inline-start: var(--lk-sidebar-compact-width); }

@media (max-width: 1199.98px) {
  .lk-document-layout { grid-template-columns: minmax(0, 1fr) 240px; }
}

@media (max-width: 991.98px) {
  .lk-document-layout { grid-template-columns: 1fr; }
  .lk-document-summary { position: static; order: -1; }
  .lk-document-summary-card { display: grid; grid-template-columns: 1fr 2fr; }
  .lk-document-summary-header { border-bottom: 0; border-inline-end: 1px solid var(--lk-border); }
  .lk-summary-list { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
  .lk-summary-list > div { border: 0; gap: 8px; }
  .lk-summary-note { display: none; }
  .lk-form-action-bar,
  .app-shell.sidebar-compact .lk-form-action-bar { inset-inline: 0; padding-inline: 16px; }
}

@media (max-width: 575.98px) {
  .lk-document-form { padding-bottom: 110px; }
  .lk-form-section-header { align-items: flex-start; padding: 14px 16px; }
  .lk-form-section-header > .btn { flex-shrink: 0; }
  .lk-form-section-body { padding: 16px; }
  .lk-line-composer { margin-inline: -4px; padding: 14px; }
  .lk-line-add-cell { padding-top: 0; }
  .lk-document-summary-card { display: block; }
  .lk-document-summary-header { border-inline-end: 0; border-bottom: 1px solid var(--lk-border); }
  .lk-summary-list { display: block; }
  .lk-form-action-bar { align-items: flex-end; }
  .lk-form-action-bar > div:first-child { display: none; }
  .lk-form-action-bar > div:last-child { width: 100%; }
  .lk-form-action-bar .btn-primary { flex: 1; }
}

@media print {
  .lk-form-action-bar { display: none !important; }
  /* .no-print مستخدمة فعليًا في 5 صفحات (أزرار الإجراءات، رسائل النجاح/الخطأ المؤقتة، ترقيم الصفحات،
     مودالات، "منطقة الخطر") لكن الكلاس مالوش أي تعريف CSS فعلي - راجع "Print output is isolated from
     screen-only controls" في UI-UX-V2-Execution-TODO.md. */
  .no-print { display: none !important; }
}


/* Receiving inspection and comparison workflows */
.lk-context-strip {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: var(--lk-space-4);
  align-items: end;
}
.lk-context-strip > div {
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius);
  background: #fafbfc;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lk-context-strip > div:has(.form-control) { padding: 0; border: 0; background: transparent; }
.lk-context-strip span { margin-bottom: 4px; color: var(--lk-text-muted); font-size: 11px; }
.lk-context-strip strong { font-size: 13px; }
.lk-guidance-banner {
  margin-bottom: var(--lk-space-4);
  padding: 11px 14px;
  border-inline-start: 3px solid var(--lk-info);
  border-radius: var(--lk-radius);
  background: var(--lk-info-bg);
  color: var(--lk-info-ink);
  font-size: 11.5px;
  line-height: 1.7;
}
.lk-quantity-input { width: 130px; min-height: 36px !important; }
.lk-difference-value {
  min-width: 70px;
  display: inline-flex;
  justify-content: center;
  font-weight: 800;
}
.lk-difference-value.is-positive { color: var(--lk-success); }
.lk-difference-value.is-negative { color: var(--lk-danger); }
.lk-comparison-table tr.has-difference td { background: #fffbf2; }
.lk-comparison-table tr.has-difference td:first-child { box-shadow: inset -3px 0 0 var(--lk-warning); }
/* بق حقيقي اتكتشف حيًا على الموبايل (390px) وقت مراجعة #156 دفعة 6/N - `.lk-comparison-table` مستخدمة
   في 11 صفحة، لكن نصفها (`StockDocuments/CreateAdjustment|EditAdjustment|AdjustmentReview|Details`،
   `StockTransfers/Details`) بتحطها جوه `<div class="table-responsive">` عادي بتاع Bootstrap بس - بدون
   `min-width` صريحة، فالجدول كان بيتقلّص لعرض الشاشة عن طريق لف نص كل خلية (اسم الصنف بيتقطّع لأربع
   أسطر ضيقة) بدل ما يفيض أفقيًا ويستخدم الـscroll أصلًا (نفس فئة بق RTL Chromium overflow-x الموثّقة
   فوق لـ`.lk-table-scroll`/`.lk-tabs-scroll` بالحرف - هنا بس مفيش `min-width` يجبر الفيضان من الأساس).
   النصف التاني (`ReceivingInspections/*`, `StockCounts/*`, `IssueReview`, `ReturnReview`) محمي بالفعل
   لأنه بيستخدم `.lk-table` جنب `.lk-comparison-table` جوه `.lk-document-lines` اللي أصلًا بتفرض
   `min-width:720px` على أي `.lk-table` جواها (فوق). الحل: نفس القيمة هنا كمان، بمعزل عن أي wrapper -
   بيغطي الاتنين دفعة واحدة من غير أي تعديل markup. */
.lk-comparison-table { min-width: 720px; }

/* لما `tryMergeDocumentItemLine` (site.js) يجمع كمية جديدة على سطر موجود بالفعل بدل إنشاء سطر مكرر -
   بعد تأكيد المستخدم الصريح عبر confirm()، السطر المتأثر يلمع لحظيًا (خلفية صفراء فاتحة بتخبو تدريجيًا)
   عشان عين المستخدم توصله فورًا لو الجدول طويل أو السطر خارج نطاق الرؤية وقت الدمج - راجع "Make
   duplicate-line merge behavior visible to the user" في UI-UX-V2-Execution-TODO.md. الانتقال بيُقفل
   تلقائيًا لصفر تقريبًا تحت prefers-reduced-motion (قاعدة عامة فوق بتغطي كل transition في الموقع). */
.lk-row-merged td { transition: background-color 1.4s ease; background-color: #fff3cd; }

/* أي سطر جديد بيتضاف لجدول أصناف مستند (`.lk-document-lines`) بيتلف بـ`scrollIntoView` فورًا - `scroll-margin-block-end`
   هنا بتضمن إن السطر مايقفش تحت شريط الإجراءات الثابت (`.lk-form-action-bar`, position:fixed, bottom:0) لو
   قرب من آخر الجدول، بنفس مبدأ الـpadding المحجوز أسفل `.lk-document-form` بالظبط - راجع "Sticky elements
   do not cover content or validation" في UI-UX-V2-Execution-TODO.md. */
.lk-document-lines tr, .lk-document-form .table-responsive tr { scroll-margin-block-end: 130px; }

@media (max-width: 767.98px) {
  .lk-context-strip { grid-template-columns: 1fr; }
}


/* Review, approval and irreversible-action presentation */
.lk-blocking-alert {
  margin-bottom: var(--lk-space-4);
  padding: 14px 16px;
  border: 1px solid var(--lk-warning-border);
  border-radius: var(--lk-radius);
  background: var(--lk-warning-bg);
  color: var(--lk-warning-ink);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lk-blocking-alert strong { font-size: 13px; }
.lk-blocking-alert span { font-size: 11.5px; line-height: 1.7; }

.lk-review-summary {
  margin-bottom: var(--lk-space-4);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lk-space-3);
}
.lk-review-summary > div {
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius-lg);
  background: var(--lk-surface);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lk-review-summary span { color: var(--lk-text-muted); font-size: 11.5px; font-weight: 600; }
.lk-review-summary strong { font-size: 21px; }
.lk-review-summary .is-success { border-color: var(--lk-success-border); }
.lk-review-summary .is-success strong { color: var(--lk-success); }
.lk-review-summary .is-danger { border-color: var(--lk-danger-border); }
.lk-review-summary .is-danger strong { color: var(--lk-danger); }

.lk-review-action-zone {
  margin-top: var(--lk-space-4);
  padding: 16px 18px;
  border: 1px solid var(--lk-success-border);
  border-radius: var(--lk-radius-lg);
  background: #f5fcf8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lk-space-4);
}
.lk-review-action-zone > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.lk-review-action-zone strong { font-size: 13px; }
.lk-review-action-zone span { color: var(--lk-text-muted); font-size: 11.5px; }

.lk-final-warning {
  margin-bottom: var(--lk-space-4);
  padding: 12px 14px;
  border-radius: var(--lk-radius);
  background: var(--lk-warning-bg);
  color: var(--lk-warning-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
}
.lk-final-warning.is-danger { background: var(--lk-danger-bg); color: var(--lk-danger); }
.lk-confirmation-summary { margin: 0; }
.lk-confirmation-summary > div {
  padding: 9px 0;
  border-bottom: 1px solid var(--lk-border);
  display: flex;
  justify-content: space-between;
  gap: var(--lk-space-3);
}
.lk-confirmation-summary > div:last-child { border-bottom: 0; }
.lk-confirmation-summary dt { color: var(--lk-text-muted); font-size: 12px; font-weight: 600; }
.lk-confirmation-summary dd { margin: 0; font-size: 12.5px; font-weight: 800; }

@media (max-width: 767.98px) {
  .lk-review-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lk-review-action-zone { align-items: stretch; flex-direction: column; }
}


/* Standard list pages: filters, result metadata and responsive row actions */
.lk-filter-bar { margin-bottom: var(--lk-space-3); padding: var(--lk-space-4); border: 1px solid var(--lk-border); border-radius: var(--lk-radius-lg); background: var(--lk-surface); }
/* فلتر مدمج جوه بانل، مش قسم مستقل (`Items/Details.cshtml`/`Workspace/ItemDetails.cshtml` - "سجل حركة
   الصنف"، طلب صاحب المشروع 2026-09-14: "ممكن تنقل الفلاتر ف شريط فوق حركة الصنف") - بدل `.lk-filter-bar`
   المستقلة (بطاقة كاملة بحدود/زوايا مدوّرة/مسافة تحتها قبل القسم اللي بعدها)، الفلتر هنا شريط رفيع **جوه**
   بانل "سجل حركة الصنف" نفسه، تحت عنوانه مباشرة وفوق الجدول بالظبط - جزء بصري واحد من نفس البانل، مش
  قسم منفصل له وزنه البصري الخاص. بيستخدم نفس `.lk-filter-primary` (فلسفة تكديس صف واحد لكل عنصر على
   الموبايل موروثة تلقائيًا من الإصلاح فوق) - align-items:end بدل center الافتراضية عشان الزرار (بدون
   تسمية فوقه) يتصف مع تحت حقول الإدخال (تسمية+حقل) بدل ما يتمركز رأسيًا معاهم. */
.lk-panel-toolbar { padding: 14px 20px; border-bottom: 1px solid var(--lk-border); background: var(--lk-bg); }
.lk-panel-toolbar .lk-filter-primary { align-items: end; }
.lk-filter-primary { display: flex; align-items: center; gap: var(--lk-space-2); flex-wrap: wrap; }
.lk-filter-search { flex: 1 1 280px; }
.lk-filter-more { margin-top: var(--lk-space-3); padding-top: var(--lk-space-3); border-top: 1px solid var(--lk-border); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--lk-space-3); }
.lk-active-filters { margin-bottom: var(--lk-space-3); display: flex; gap: 8px; flex-wrap: wrap; }
.lk-filter-chip { padding: 6px 10px; border: 1px solid var(--lk-info-border); border-radius: 999px; background: var(--lk-info-bg); color: var(--lk-info-ink); font-size: 11.5px; font-weight: 700; }
/* شرائح قابلة للحذف (`<button data-remove-param>` بدل `<span>` عرض بس - راجع site.js) - نفس شكل
   .lk-filter-chip الأساسي زائد علامة × ومؤشر تفاعل، من غير أي تصميم زرار Bootstrap افتراضي. */
button.lk-filter-chip { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
button.lk-filter-chip:hover, button.lk-filter-chip:focus-visible { background: #dce9fc; }
button.lk-filter-chip .lk-filter-chip-remove { font-size: 13px; line-height: 1; }
.lk-list-meta { margin: 0 2px var(--lk-space-2); display: flex; align-items: baseline; gap: 6px; color: var(--lk-text-muted); font-size: 12px; }
.lk-list-meta strong { color: var(--lk-text); font-size: 15px; }
/* نفس bug الـChromium RTL بتاع overflow-x:auto الموثّق فوق جوه .lk-document-lines بالحرف - أي جدول
   جوّه .lk-table-scroll (11 استخدام قبل التعديل ده) كان معرّض لنفس التسريب لعرض الصفحة كله، مش بس
   الجدول. نفس الحل: direction:ltr على الـcontainer + direction:rtl على الجدول جواه. */
.lk-table-scroll { overflow-x: auto; direction: ltr; }
.lk-table-scroll > table { direction: rtl; }
.lk-row-primary { color: var(--lk-primary); font-weight: 800; text-decoration: none; }
.lk-row-primary:hover { text-decoration: underline; }
.lk-row-actions { text-align: end; white-space: nowrap; }
.lk-row-actions .dropdown-menu form { margin: 0; }
.lk-row-actions .dropdown-item { font-size: 12px; }

@media (max-width: 767.98px) {
  /* بق اتكتشف حي (Issue #156 - مراجعة قابلية استخدام حية على شاشة موبايل، متابعة الملاحظة نفسها اللي
     كشفت بق `Items/Details.cshtml` - راجع CLAUDE.md): `flex: 1 1 auto` (بدون flex-basis صريح) كان بيخلي
     عناصر شريط الفلاتر (`.lk-filter-primary`، مستخدم في 12 صفحة) تتوزّع على الصف حسب المساحة المتبقية
     بس - حقل واحد (زي "المخزن") بياخد الصف كامل بمفرده، لكن حقل تاني أضيق (زي "نوع الحركة") كان بيتشارك
     نفس الصف مع زرار "تطبيق الفلاتر" جنبه بدل ما ياخد صفه المستقل زيه بالظبط. النتيجة (اتأكد منها حيًا
     بقياس `getBoundingClientRect()` فعلي على 390px، مش لقطة شاشة بس): الزرار كان بيظهر بصريًا "محشور"
     بين تسمية الحقل وقائمته المنسدلة (Vertical-center مع صف أطول من ارتفاعه) - مربك للمستخدم رغم إنه مش
     بق هيكلي (العناصر مش متداخلة فعليًا، بس ترتيبها البصري غير متوقع وغير متسق). الحل: `flex-basis: 100%`
     صريحة - كل عنصر (حقل فلتر أو زرار) ياخد صفه المستقل الكامل بالترتيب دايمًا، زي فلسفة التكديس الموحّدة
     المتبعة في كل مكان تاني بالموقع على الموبايل (`.lk-responsive-table`، بطاقات المستندات...). */
  .lk-filter-primary > * { flex: 1 1 100%; }
  .lk-filter-search { flex-basis: 100%; }
  .lk-filter-more { grid-template-columns: 1fr; }
  .lk-responsive-table thead { display: none; }
  .lk-responsive-table, .lk-responsive-table tbody, .lk-responsive-table tr, .lk-responsive-table td { display: block; width: 100%; }
  .lk-responsive-table tr { padding: 14px 16px; border-bottom: 1px solid var(--lk-border); }
  .lk-responsive-table tr:last-child { border-bottom: 0; }
  .lk-responsive-table td { padding: 5px 0; border: 0; display: grid; grid-template-columns: 105px 1fr; gap: 10px; align-items: baseline; }
  .lk-responsive-table td::before { content: attr(data-label); color: var(--lk-text-muted); font-size: 11px; font-weight: 700; }
  .lk-responsive-table .lk-row-actions { margin-top: 8px; display: flex; grid-template-columns: none; justify-content: flex-end; flex-wrap: wrap; gap: 6px; white-space: normal; }
  .lk-responsive-table .lk-row-actions::before { display: none; }

  /* Mobile Line Card Editor - نفس آلية .lk-responsive-table فوق بالحرف (Label:Value مكدّس)، لكن جوه
     .lk-document-lines (سطور مستند بيتضاف/يتشال منها - StockDocuments/CreateReceipt وما يشبهها)
     مطبّقة على جدول قابل للتعديل (حقول input/select جوه الخلايا، مش نص للعرض بس) بدل جدول قراءة فقط.
     .lk-responsive-table كلاس ثابت على العنصر (مش بيتبدّل حسب حجم الشاشة) - فبنلغي min-width:720px
     (المخصص لوضع الـscroll الأفقي على الشاشات الأكبر، وبيفضل شغال زي ما هو هناك) هنا بس جوه الـmedia
     query ده تحديدًا، عشان الجدول يقدر يتقفل صف واحد تحت التاني زي كارت على الموبايل بس. */
  .lk-document-lines .lk-responsive-table { min-width: 0; }
  .lk-document-lines .lk-responsive-table td { align-items: center; }
  .lk-document-lines .lk-responsive-table td.n,
  .lk-document-lines .lk-responsive-table td.line-number {
    /* رقم السطر زايد عن الحاجة لما كل سطر بقى كارت مستقل مرتّب بالفعل - مش موجود أصلًا في
       بعض الجداول (زي CreateReceipt) فالقاعدة دي بتتجاهل بهدوء لو مفيش عنصر مطابق. */
    display: none;
  }
  .lk-document-lines .lk-responsive-table td select,
  .lk-document-lines .lk-responsive-table td input:not([type="hidden"]):not([type="checkbox"]) { width: 100%; }
}


/* UI/UX V2 polish: single page title, compact shell, clear document hierarchy, and print-safe documents. */
.app-topbar-product-context {
  color: var(--lk-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.app-topbar { padding-inline: 20px; }
.app-user-avatar { width: 30px; height: 30px; font-size: 12px; }
.app-user-identity strong { font-size: 12.5px; }
.app-user-identity small { font-size: 10.5px; }
.app-content { padding-block: 22px; }

/* A kicker is supporting context, never a title competing on the same line. */
.lk-form-section-header .lk-section-kicker {
  display: none;
}
.lk-form-section-header .lk-section-kicker + h2,
.lk-form-section-header .lk-section-kicker ~ p {
  grid-column: 1 / -1;
}
.lk-form-section-header:has(.lk-section-kicker) > div:first-child {
  display: block;
}
.lk-form-section-header:has(.lk-section-kicker) h2 {
  margin-top: 2px;
  line-height: 1.5;
}
.lk-form-section-header:has(.lk-section-kicker) p {
  margin-top: 4px;
  line-height: 1.65;
}

/* Keep document regions and their headings visually independent on screen. */
.document-print-area > .lk-form-section,
.document-print-area > form > .lk-form-section {
  margin-block-end: 20px;
}
.document-print-area .lk-form-section-header {
  min-height: auto;
}
.document-print-area .lk-form-section-header h2,
.document-print-area .lk-page-title {
  overflow-wrap: anywhere;
}

/* مفيش قاعدة @page عامة هنا عمدًا - كل صفحة طباعة (الست كلهم) بتجيب size/margin بتاعتها من الـ<style>
   الخاص بيها اللي PrintFooterModel.BuildFooterStyleBlock() بيولّده (راجع الكومنت هناك) - وجود قاعدة
   @page تانية هنا كان بيسبب علة تضارب حقيقية في متصفحات حقيقية وقت الطباعة الفعلية (Windows/طابعة
   حقيقية) - راجع تفاصيل العلة والحل في PrintFooterModel.cs. */

@media print {
  html, body {
    width: 100%;
    min-width: 0 !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 10pt;
  }
  body { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .app-main, .app-content, .document-print-area {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .document-print-area {
    position: relative;
    overflow: visible !important;
  }
  /* lk-page-header/lk-page-title/lk-page-desc/lk-review-summary/lk-form-section وباقي القواعد تحت لغاية
     .print-signatures كلاسات مكوّن مشترك مستخدمة في هيدر/فورمات كل صفحات الموقع (راجع CLAUDE.md - "قالب
     موحّد للقوائم/النماذج/الحالات")، مش حصرية على منطقة الطباعة - مقيّدة بـ.document-print-area كسلف حقيقي
     في الـDOM عشان قواعد الطباعة دي متطبقش على صفحات تانية غير الخمسة بتاعتنا وقت الطباعة. (ملحوظة: كان
     هنا قبل كده اعتماد على مكتبة PagedJS للترقيم الحقيقي للصفحات - اتشال بالكامل لصالح طباعة المتصفح
     العادية (window.print()) بعد ما ثبت إنها بتفقد صفوف من الجداول الطويلة بصمت (علة في المكتبة نفسها،
     راجع تاريخ git) - مفيش رقم صفحة X / Y حقيقي دلوقتي، وده قرار واعي مش عيب). */
  .document-print-area .lk-page-header {
    margin-bottom: 8mm;
    padding-bottom: 4mm;
    border-bottom: 1px solid #777;
    align-items: flex-start;
    /* مكان محجوز للوجو شركة العميل (.lk-client-logo-slot) absolute-positioned في نفس الركن اللي عمود
       العنوان (أول ولد هنا، أول عنصر في تدفق flex) بيحتله (يمين فعليًا في RTL - inline-start). من غير
       الحشو ده العنوان ورقم المستند بيتراكبوا فوق صندوق شعار العميل. 36mm = عرض الصندوق (32mm) + هامش أمان. */
    padding-inline-start: 36mm;
    /* Issue #408 - مكان محجوز مقابل لشعار Laniakea (.lk-print-logo، أعلى الشمال = inline-end في RTL). */
    padding-inline-end: 24mm;
    flex-wrap: nowrap;
  }
  /* Issue #408 - الهيدر بقى أقصر (الشعار مابقاش بيلف لسطر تاني)، فالختم (.document-stamps) محتاج شريط
     فاضي تحت خط الهيدر مباشرة بدل ما يقع فوق الخط نفسه - بيتفعّل بس لما فيه ختم فعلي (:has) عشان باقي
     المستندات بلا ختم تفضل بنفس المسافات القديمة بالظبط. */
  .document-print-area .document-stamps:has(.document-stamp) ~ .lk-page-header {
    margin-bottom: 14mm;
  }
  .document-print-area .lk-page-title {
    margin: 0 0 1.5mm;
    font-size: 17pt;
    line-height: 1.35;
  }
  .document-print-area .lk-page-desc {
    font-size: 9pt;
    line-height: 1.6;
  }
  .document-print-area .lk-review-summary,
  .document-print-area .document-summary-grid {
    margin-bottom: 6mm;
    gap: 2mm;
    break-inside: avoid;
  }
  /* .document-summary-grid (بطاقات رقم المستند/الحالة/عدد الأصناف/الإجمالي في StockDocuments/Details)
     بيانها مكرر بالكامل - رقم المستند في العنوان فوقها، والباقي تفصيليًا جوه "البيانات الأساسية والمراجع"
     تحت - فتتشال من الطباعة عمدًا. .lk-review-summary لوحدها (بدون الكلاس ده) في باقي الصفحات (محضر جرد/
     استلام/تحويل) فيها إحصائيات حقيقية (زيادة/نقص/مطابقة، أو التاريخ/المخزن) مش موجودة في أي مكان تاني
     بالصفحة - فضلت زي ما هي عمدًا، مش نفس فئة التكرار. */
  .document-summary-grid {
    display: none !important;
  }
  /* الوصف الرمادي الصغير تحت عنوان كل قسم (زي "المخزن والجهة والمستندات المرتبطة وحالة الترحيل") - نص
     UI hint بس، مالوش قيمة في مستند مطبوع نهائي. */
  .document-print-area .lk-form-section-header p {
    display: none !important;
  }
  /* "البيانات الأساسية والمراجع" (StockDocuments/Details) بس - كل حقل كان بياخد سطر كامل لوحده تحت
     الطباعة لأن عرض المحتوى الفعلي بعد هوامش A4 الافتراضية أصغر من نقطة Bootstrap md breakpoint
     (768px)، مش قصور في الـmarkup (أصلًا بيستخدم col-md-4/col-md-6 بالفعل) - قيد المتصفح وقت الطباعة بس.
     الحل: فرض 3 أعمدة بـFlexbox (flex-wrap + flex-basis). */
  .document-header-card .row {
    display: flex;
    flex-wrap: wrap;
    gap: 3mm 4mm;
  }
  .document-header-card .row > [class*="col-"] {
    flex: 0 0 calc(33.333% - 4mm);
    max-width: calc(33.333% - 4mm);
  }
  .document-header-card .row > .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .document-print-area .lk-form-section {
    margin: 0 0 6mm !important;
    border: 1px solid #999;
    border-radius: 0;
    box-shadow: none;
    break-inside: auto;
  }
  .document-print-area .lk-form-section-header {
    display: block !important;
    min-height: 0;
    padding: 3mm 4mm;
    background: #f2f2f2 !important;
    border-bottom: 1px solid #999;
    break-after: avoid;
    break-inside: avoid;
  }
  .document-print-area .lk-form-section-header > div:first-child {
    display: block !important;
  }
  .document-print-area .lk-section-kicker,
  .document-print-area .lk-section-step {
    display: none !important;
  }
  .document-print-area .lk-form-section-header h2 {
    display: block;
    margin: 0 !important;
    font-size: 11.5pt;
    line-height: 1.4;
  }
  .document-print-area .lk-form-section-header p {
    display: block;
    margin: 1mm 0 0 !important;
    font-size: 8.5pt;
    line-height: 1.45;
  }
  .document-print-area .lk-form-section-body {
    padding: 4mm;
  }
  .document-print-area .table-responsive,
  .document-print-area .lk-document-lines,
  .document-print-area .lk-table-scroll {
    overflow: visible !important;
    border: 0;
    border-radius: 0;
  }
  .document-print-area table,
  .document-print-area .lk-document-lines .lk-table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto;
    font-size: 8pt;
  }
  .document-print-area thead { display: table-header-group; }
  .document-print-area tfoot { display: table-footer-group; }
  .document-print-area tr { break-inside: avoid; }
  .document-print-area th,
  .document-print-area td {
    padding: 2mm 1.5mm !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    vertical-align: top;
  }
  /* .lk-responsive-table (تقارير StockTransactions/Print وAudit/Print - جدول منسوخ من Index الشاشة
     بتاعتهم) بيتحول لكروت مكدّسة (صف واحد لكل خانة، Label:Value) تحت @media (max-width: 767.98px) عشان
     تجربة الموبايل - قاعدة عرض بحتة مالهاش أي علاقة بالطباعة أصلًا. المشكلة: عرض منطقة الطباعة الفعلي
     ممكن يقل عن 767.98px (Portrait عادي، أو حتى Landscape لو المتصفح رفض تطبيق الـorientation - راجع
     الكومنت في PrintFooterModel.cs) فالقاعدة دي كانت بتتفعّل غلط وقت الطباعة، فبيطلع تقرير كل صف فيه
     على حدة (عشرات الصفحات) بدل جدول واحد مضغوط - اتأكدنا من العلة دي حيًا (PDF حقيقي من متصفح المستخدم).
     الحل: فرض شكل الجدول العادي (thead/tr/td بالعرض الطبيعي) جوه منطقة الطباعة بغض النظر عن العرض. */
  .document-print-area .lk-responsive-table thead {
    display: table-header-group !important;
  }
  .document-print-area .lk-responsive-table,
  .document-print-area .lk-responsive-table tbody,
  .document-print-area .lk-responsive-table tr,
  .document-print-area .lk-responsive-table td {
    display: revert !important;
    width: auto !important;
  }
  .document-print-area .lk-responsive-table tr {
    padding: 0 !important;
    border-bottom: 0 !important;
  }
  .document-print-area .lk-responsive-table td::before {
    content: none !important;
  }
  .document-print-area a {
    color: inherit !important;
    text-decoration: none !important;
  }
  /* .print-signatures هي Bootstrap .row عادية (هوامش سالبة قياسية -0.75rem يمين/شمال لتعويض padding
     أعمدتها) - باقي محتوى .document-print-area بيتصفّر هامشه بالكامل (margin:0!important فوق) لكن
     .row نفسها برّه من القاعدة العامة دي، فهامشها السالب كان بيسرّب overflow أفقي صغير (~10px) وقت
     الطباعة بس - اتأكد فعليًا بقياس أول عنصر متسرّب برّه عرض الصفحة. تصفير مقصور على الكلاس ده تحديدًا
     (مش .row عامة) عشان مايأثرش على صفوف Bootstrap تانية جوه نفس الصفحة. */
  .document-print-area .print-signatures {
    margin-left: 0;
    margin-right: 0;
  }
  /* الأختام متمركزة أفقيًا (نفس منطق الشاشة العادية في site.css بالظبط) عشان يفضل مكان فاضي في الركن
     التاني للوجو شركة العميل (.lk-client-logo-slot تحت). Issue #220: inset-block-start:0 القديمة كانت
     بتحط الختم فوق اسم/رقم المستند مباشرة (.lk-page-header بترندر من نفس نقطة الصفر) - نزّلناها لمنطقة
     "الأربع مربعات" (.lk-review-summary/.document-summary-grid، اللي بترندر بعد الهيدر مباشرة) بدل
     كده - رقم تقريبي اتأكد بصريًا (PDF حقيقي) إنه بيقع فعليًا جوه صفوف المربعات دي من غير أي تراكب مع
     العنوان فوقها، مش حساب نظري بس. */
  .document-stamps, .posted-stamp {
    position: absolute;
    inset-block-start: 26mm;
    inset-inline-start: 50%;
    transform: translateX(-50%) scale(.78);
    transform-origin: top center;
  }
  .document-stamp {
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* لوجو الشركة (Laniakea) - _PrintBrandLogo.cshtml، بيتحط sibling جنب حاوية .no-print جوه .lk-page-header
     (display:flex) فياخد نفس موضعها (شمال في RTL) بمجرد ما الأزرار تختفي وقت الطباعة. ارتفاع ثابت
     بمقاس مناسب لرأس الصفحة - العرض auto عشان النسب الأصلية للوجو (مربع تقريبًا) تفضل زي ما هي. */
  /* Issue #408 - الشعار كان flex sibling جوه .lk-page-header (flex-wrap)، فلما العنوان/التاريخ ياخدوا
     العرض المتاح بعد حشو لوجو العميل كان الشعار بيلف لسطر تاني تحت العنوان. دلوقتي ثابت absolute أعلى
     يسار الصفحة (left physical مقصود - مش inline-*، لأن الاتجاه RTL والمطلوب شمال بصريًا دايمًا) مستقل
     عن طول العنوان أو وجود ختم، وفوق .document-print-area (position:relative) نفسها. */
  .lk-print-logo {
    position: absolute;
    inset-block-start: 0;
    left: 0;
    max-height: 16mm;
    width: auto;
  }
  /* مكان محجوز للوجو شركة العميل - مساحة فاضية تمامًا (بدون حدود/خلفية/نص) عمدًا، يقابل لوجو الشركة
     الجديد على الجانب التاني من رأس المستند. طلب صريح من صاحب المشروع: لو مفيش لوجو عميل مرفوع فعليًا،
     المكان يفضل فاضي بالكامل من غير أي شكل يلفت النظر (مربع متقطع أو نص "شعار العميل") - أنضف من مربع
     placeholder ظاهر لصنف مفيش ليه محتوى بعد. لو اتضاف رفع لوجو عميل فعلي مستقبلًا، الصورة هتتحط هنا
     (زي .lk-print-logo بالظبط) وهتاخد نفس المساحة المحجوزة دي - الأبعاد (32mm×16mm) والموضع مستنيين
     جاهزين. */
  .lk-client-logo-slot {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 32mm;
    height: 16mm;
    /* لو العنصر ده <img> فعلي (لوجو عميل مرفوع - راجع _ClientLogoSlot.cshtml)، object-fit بيحافظ على
       أبعاد الصورة الأصلية جوه الصندوق المحجوز من غير تمطيط؛ ملهوش أي تأثير على <div> الفاضي. */
    object-fit: contain;
  }
  .print-signatures {
    margin-top: 12mm !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* شعار صفحة "About Laniakea" (Pages/About/Index.cshtml، طلب صاحب المشروع 2026-09-08) - "Laniakea" بخط
   كبير و"by UG" صغير تحتها مباشرة، منفصل تمامًا عن brand-name/brand-tagline بتاعة الـSidebar (الشعار
   الرسمي بتاع المشروع) - ده توقيع شخصي بسيط أسفل صفحة المعلومات بس. */
.lk-about-signature { text-align: center; margin-top: 32px; }
.lk-about-signature-name { font-size: 28px; font-weight: 800; color: var(--lk-primary); line-height: 1.2; }
.lk-about-signature-by { font-size: 12px; color: var(--lk-text-muted); letter-spacing: .04em; margin-top: 2px; }

/* Issue #447 - صفحة سلاسل اعتماد المستندات (SiteWorkspace/ApprovalChains): خطوات مرتبة كقائمة أفقية تلتف، وصفوف تحرير. */
.lk-chain-steps { list-style: none; margin: 0; padding: 0.75rem 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.lk-chain-steps li { display: inline-flex; align-items: center; gap: 0.4rem; }
.lk-chain-step-no { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--lk-primary-soft, #e8eefc); color: var(--lk-primary, #2851c8); font-weight: 600; font-size: 0.85rem; }
.lk-chain-form { border-top: 1px solid var(--lk-border, #e3e7ee); }
.lk-chain-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.lk-chain-row { display: flex; align-items: center; gap: 0.5rem; }
.lk-chain-row .form-select { flex: 1 1 auto; min-width: 0; max-width: 22rem; }

/* #446 (الدفعة 1) - جدول كشف البدلات (موظف × 7 أيام): عريض بطبيعته، فبيتمرّر أفقيًا جوه .lk-allowance-scroll بس
   (مش الصفحة كلها) على الموبايل والديسكتوب، وعمود الموظف لاصق على الجهة الأولى (RTL = يمين). كل يوم خلية رأسية فيها
   أوقات البصمة (قراءة) وأربع خانات بدلات مدمجة. الحاوية بترث direction:ltr من .lk-table-scroll (نفس bug Chromium RTL
   الموثّق فوق - direction:rtl عليها كان بيسرّب عرض الجدول لعرض الصفحة كله، اتأكد منه حيًا بـPlaywright)، والسكربت بيبدأ
   التمرير من أقصى اليمين عشان عمود الموظف يظهر أولًا. */
.lk-allowance-scroll { max-width: 100%; }
.lk-allowance-grid { min-width: 1320px; border-collapse: separate; border-spacing: 0; }
.lk-allowance-grid th, .lk-allowance-grid td { padding: 8px 10px; vertical-align: top; }
.lk-allowance-grid .lk-allowance-day { min-width: 150px; }
.lk-allowance-sticky { position: sticky; inset-inline-start: 0; background: var(--lk-surface, #fff); z-index: 2; min-width: 150px; box-shadow: -1px 0 0 var(--lk-border) inset; }
.lk-allowance-grid thead th.lk-allowance-sticky { background: #FAFBFC; z-index: 3; }
.lk-allowance-times { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--lk-text-muted); margin-bottom: 6px; }
.lk-allowance-field { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.lk-allowance-field > span { flex: 0 0 48px; font-size: 11px; color: var(--lk-text-muted); }
.lk-allowance-field .form-control { min-width: 0; }
.lk-allowance-readonly { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.lk-allowance-daytotal { margin-top: 6px; font-size: 11.5px; color: var(--lk-text-muted); }
.lk-kpi-value-sm { font-size: 14px; }
.lk-after-action-bar { margin-bottom: 96px; }
@media (max-width: 767.98px) {
  .lk-allowance-grid { min-width: 1180px; }
  .lk-allowance-grid .lk-allowance-day { min-width: 140px; }
}

/* #446 (الدفعة 3) - طباعة كشف البدلات (A4 أفقي) وسند الصرف بالمستفيدين. الجدول موظف × 7 أيام بيتعرض كامل بلا تمرير
   (table-layout: fixed + خط صغير) عشان الأعمدة العشرة تتوزع على عرض الصفحة وما يتقطعش بشكل مكسور؛ على الشاشة نفس الشكل
   مصغّرًا (الصفحة للطباعة أساسًا). خانات التوقيع نقاط بعرض ثابت. */
.lk-allowance-print-grid { width: 100%; table-layout: fixed; font-size: 11px; }
.lk-allowance-print-grid th, .lk-allowance-print-grid td { padding: 4px 5px; vertical-align: top; border: 1px solid var(--lk-border, #d9dee7); }
.lk-allowance-print-grid th { text-align: center; font-size: 11px; }
.lk-allowance-print-grid .lk-ap-emp { width: 13%; }
.lk-allowance-print-grid .lk-ap-num { width: 7%; text-align: center; white-space: nowrap; }
.lk-allowance-print-grid .lk-ap-day { text-align: center; }
.lk-ap-times { font-size: 10px; color: var(--lk-text-muted, #5b6472); white-space: nowrap; margin-bottom: 2px; }
.lk-ap-allow { display: flex; flex-direction: column; gap: 1px; font-size: 10px; }
.lk-ap-none { color: var(--lk-text-muted, #5b6472); }
.lk-ap-daytotal { margin-top: 2px; font-size: 10.5px; }
.lk-ap-note { font-size: 10.5px; color: var(--lk-text-muted, #5b6472); }
.lk-ap-approval-table { width: 100%; font-size: 12px; }
.lk-ap-approval-table th, .lk-ap-approval-table td { padding: 6px 8px; }
.lk-ap-sign, .lk-vp-sign { white-space: nowrap; min-width: 34mm; letter-spacing: 0.05em; }
.lk-voucher-print-table { width: 100%; font-size: 12px; }
.lk-voucher-print-table th, .lk-voucher-print-table td { padding: 6px 8px; vertical-align: middle; }
.lk-voucher-print-table .lk-vp-amount { text-align: center; white-space: nowrap; font-weight: 600; }
.lk-vp-receiver { padding: 10px 12px; font-size: 12px; border-top: 1px dashed var(--lk-border, #d9dee7); }
@media print {
  .lk-allowance-print .lk-allowance-print-grid { font-size: 8pt; }
  .lk-allowance-print .lk-allowance-print-grid th, .lk-allowance-print .lk-allowance-print-grid td { padding: 1.2mm 1.4mm; border-color: #999; }
  .lk-allowance-print .lk-ap-times, .lk-allowance-print .lk-ap-allow { font-size: 7pt; }
  .lk-allowance-print .lk-ap-daytotal { font-size: 7.5pt; }
  .lk-allowance-print .lk-ap-note { font-size: 7.5pt; }
  .lk-allowance-print .lk-ap-approval { break-inside: avoid; margin-top: 6mm !important; }
  .lk-allowance-print .lk-ap-approval-table, .lk-voucher-print .lk-voucher-print-table { font-size: 9pt; }
  .lk-voucher-print .lk-vp-sign { min-width: 38mm; }
  .lk-voucher-print .lk-voucher-print-table td { height: 9mm; }
  .lk-voucher-print .lk-vp-signatures { break-inside: avoid; }
  .lk-vp-receiver { font-size: 9pt; }
}

/* #434 (D1) - طباعة تسوية العهدة (A4 رأسي): جدول البنود بخط صغير وحدود كاملة وأعمدة لا تتقطع، والشارات بلا خلفية في الطباعة. */
.lk-cs-print-table { width: 100%; font-size: 11px; }
.lk-cs-print-table th, .lk-cs-print-table td { padding: 4px 5px; vertical-align: top; border: 1px solid var(--lk-border, #d9dee7); }
.lk-cs-print-table th { font-size: 11px; white-space: nowrap; }
/* أعمدة المبالغ الثلاثة الأخيرة (وارد/مسدد/رصيد) لا تلتف - قاعدة document-print-area العامة بتفرض white-space: normal !important
   على كل الخلايا وقت الطباعة، فالاستثناء هنا لازم يكون جوه @media print وبنفس القوة. */
.lk-cs-print-table td:nth-last-child(-n+3) { white-space: nowrap; text-align: center; }
@media print {
  .lk-cs-print .lk-cs-print-table td:nth-last-child(-n+3) { white-space: nowrap !important; overflow-wrap: normal; }
  .lk-cs-print .lk-badge { background: transparent !important; color: inherit !important; padding: 0; font-weight: 600; }
  /* #434 (D2) - كتلة الاعتماد من المحرك (بدل خانات التوقيع) لا تتقطع بين صفحتين. */
  .lk-cs-print .lk-ap-approval { break-inside: avoid; margin-top: 6mm !important; }
  .lk-cs-print .lk-ap-approval-table { font-size: 9pt; }
}

/* #469 (L1) - العمالة المؤقتة: التسجيل اليومي كقائمة بطاقات خفيفة (استخدام يومي من موبايل المشرف على 390px، بلا جدول عريض):
   رأس البطاقة = العامل + الساعات، ثم بيان العمل، ثم المسجِّل/الوقت، ونموذج التعديل مطوي بـdetails بلا أي سكربت. */
.lk-labor-daynav .lk-labor-dateinput { width: auto; min-width: 150px; }
.lk-labor-list { padding: 0; margin: 0; }
.lk-labor-card { padding: 10px 14px; border-top: 1px solid var(--lk-border); }
.lk-labor-card:first-child { border-top: 0; }
.lk-labor-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lk-labor-worker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.lk-labor-hours { font-size: 18px; font-weight: 800; white-space: nowrap; color: var(--lk-text); }
.lk-labor-hours small { font-size: 11.5px; font-weight: 600; color: var(--lk-text-muted); }
.lk-labor-desc { margin-top: 2px; font-size: 13px; overflow-wrap: anywhere; }
.lk-labor-meta { margin-top: 2px; }
.lk-labor-edit { margin-top: 6px; }
.lk-labor-edit > summary { display: inline-block; list-style: none; cursor: pointer; }
.lk-labor-edit > summary::-webkit-details-marker { display: none; }
.lk-labor-edit[open] > summary { margin-bottom: 4px; }

/* مجموعات الصلاحيات الدقيقة (عنوان + صلاحياته بـexpand/collapse) في فورم منح صلاحيات الموقع. */
.lk-permission-group > summary.lk-permission-group-title { cursor: pointer; list-style: none; }
.lk-permission-group > summary.lk-permission-group-title::-webkit-details-marker { display: none; }
.lk-permission-group > summary.lk-permission-group-title::before { content: "◂"; margin-inline-end: .5rem; transition: transform .15s; }
.lk-permission-group[open] > summary.lk-permission-group-title::before { transform: rotate(-90deg); }