/* ═══════════════════════════════════════════════════════════════════════
   ARTTOP — Companies Management System
   Stylesheet (RTL/LTR bilingual)
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --primary: #014034;
  --primary-dark: #013229;
  --primary-light: #0d6e5c;
  --accent: #f59e0b;
  --accent-dark: #d97706;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --sidebar-bg: linear-gradient(180deg, #014034 0%, #013229 50%, #0a1f1c 100%);
  --header-h: 60px;
  /* v0.37.9.603 — top copyright bar removed (moved into the bottom status bar).
     --copyright-h now 0 (no top strip); --statusbar-h drives the bottom bar. */
  --copyright-h: 0px;
  --statusbar-h: 32px;
  --sidebar-w: 280px;
  --radius: 10px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
  --text: #1f2937;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --bg: #f3f4f6;
  --bg-card: #ffffff;

  /* ═══ 🎨 v0.37.9.808 — Emerald Ledger tokens: أساس هوية البرنامج اللونية ═══
     المصدر الموازي في JS: window.BRAND (assets/brand.js) · المرجع: ARTTOP_BRAND_COLORS.md
     الهوية = هذه الدرجات حصراً. الدلالي (danger/warning/info أعلاه) يبقى ولا يُطلى. */
  --el-teal-950: #0a1f1c;
  --el-teal-900: #013229;
  --el-teal-800: #014034;   /* ⭐ اللون الأم */
  --el-teal-600: #0d6e5c;
  --el-em-950: #022c22;
  --el-em-900: #064e3b;
  --el-em-800: #065f46;
  --el-em-700: #047857;     /* ⭐ الزمردي الرسمي */
  --el-em-600: #059669;
  --el-em-500: #10b981;
  --el-em-400: #34d399;
  --el-em-300: #6ee7b7;
  --el-em-200: #a7f3d0;
  --el-em-100: #d1fae5;
  --el-em-50:  #ecfdf5;
  --el-ta-900: #134e4a;
  --el-ta-800: #115e59;
  --el-ta-700: #0f766e;
  --el-ta-500: #14b8a6;
  --el-grad-hero: linear-gradient(135deg, #014034, #047857);
  --el-grad-deep: linear-gradient(135deg, #013229, #014034);
  --el-grad-btn:  linear-gradient(135deg, #047857, #059669);

  /* 🌳 v813 — سلّم مستويات الأشجار الموحّد (طلب المالك): خلفية السطر تتبع
     عمقه — الجذر L0 أغمق مسحةً ثم يفتح درجةً كل مستوى. تستهلكه شجرة
     الحسابات ومراكز التكلفة وفئات الأصول وأشجار التعريفات كلها. */
  --el-tree-l0: #d1fae5;  --el-tree-l0-edge: #047857;
  --el-tree-l1: #ecfdf5;  --el-tree-l1-edge: #34d399;
  --el-tree-l2: #f0fdf7;  --el-tree-l2-edge: #6ee7b7;
  --el-tree-l3: #f8fefb;  --el-tree-l3-edge: #a7f3d0;
  --el-tree-l4: #ffffff;  --el-tree-l4-edge: #d1fae5;
  --el-tree-ink: #04231d;
}

/* Base */
* {
  font-family: 'Tajawal', 'Inter', sans-serif;
  font-feature-settings: "lnum" 1, "tnum" 1;
  box-sizing: border-box;
}
html[lang="en"] * {
  font-family: 'Inter', 'Tajawal', sans-serif;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  padding-top: var(--copyright-h);
  min-height: 100vh;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
.hidden { display: none !important; }
.hidden-mobile { display: inline; }
@media (max-width: 768px) {
  .hidden-mobile { display: none !important; }
}

/* Numeric / date fields stay LTR even in RTL */
input[type="date"], input[type="time"], input[type="number"],
input[type="tel"], input[type="email"], input[type="url"],
input[data-amt] {
  direction: ltr; unicode-bidi: plaintext;
}
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="time"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[data-amt] { text-align: right; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"], input[data-amt] { -moz-appearance: textfield; appearance: textfield; }

/* ═════════════════════════════════════════════════════════════════════════
   Copyright Bar (Fixed Top)
   ═════════════════════════════════════════════════════════════════════════ */
.copyright-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--copyright-h);
  /* v0.37.9.600 — Emerald Ledger identity (was navy + gold ministerial) */
  background: linear-gradient(90deg, #013229 0%, #014034 40%, #047857 60%, #014034 100%);
  color: #d1fae5;
  font-size: 12px; font-weight: 800; line-height: 28px;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(1,32,26,0.28), inset 0 -1px 0 rgba(16,185,129,0.5);
  border-bottom: 2px solid #10b981;
  user-select: none;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  white-space: nowrap; overflow: hidden; padding: 0 12px;
  background-size: 200% 100%;
  animation: copyrightShine 14s ease-in-out infinite;
}
@keyframes copyrightShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.copyright-bar .cr-icon { color: #6ee7b7; font-size: 14px; }
.copyright-bar .cr-company { color: #a7f3d0; font-weight: 900; }
.copyright-bar .cr-sep { color: #10b981; opacity: 0.8; font-weight: 900; font-size: 14px; }
@media (max-width: 900px) {
  .copyright-bar { font-size:10.5px; gap: 6px; }
}
@media print {
  .copyright-bar { display: none !important; }
  body { padding-top: 0 !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   الأزرار الأساسية — قاعدة عامّة للبرنامج كلّه (لا لشاشة الدخول)
   ─────────────────────────────────────────────────────────────────────────
   🚨 كانت هذه القاعدة تعيش **داخل** كتلة شاشة الدخول، فبدت كأنها تخصّها،
   وهي في الحقيقة تنسيق **١٨١ زرّاً في المشروع** (و١٧٩ إشارة في JS). أُخرِجت
   إلى كتلة مستقلّة كي لا يظنّها أحدٌ — ولا أنا — جزءاً من الدخول فيحذفها
   مع إعادة تصميمه. وزرّ الدخول يُعاد تنسيقه بمُحدِّد مقصور لا بتعديل هنا.
   ═════════════════════════════════════════════════════════════════════════ */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white; border: none;
  padding: 12px 20px; border-radius: var(--radius);
  font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(1,64,52,0.3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(1,64,52,0.4); }
.btn-primary:active { transform: translateY(0); }
.btn-block { width: 100%; }

/* ═════════════════════════════════════════════════════════════════════════
   🏛️ v832 — «المطلع الرسمي» لمودال الموظف: شريط السجلّ (Registry Strip)
   ─────────────────────────────────────────────────────────────────────────
   فهرس مرقّم بخطّ سفلي زمردي متحرّك + سجلّ الإلزامي ٧ خانات قابلة للنقر +
   خيط تقدّم 2px + تكثّف المطلع عند التمرير. خصائص منطقية فيصحّ RTL/LTR.
   الأحمر هنا دلالي (نقص) والزمردي هوية — لا لون ثالث.
   ═════════════════════════════════════════════════════════════════════════ */
.emp-registry {
  /* v833 — سطران بطلب المالك: الفهرس كان سطراً متمرّراً يُخفي نصف الأقسام؛
     صار يلتفّ فتظهر الأقسام كلها، وسجلّ الإلزامي سطر ثانٍ هادئ */
  position: relative; flex: 0 0 auto; display: block;
  padding: 4px 14px 0; background: #f8faf9; border-bottom: 1px solid #e2e8f0;
}
.emp-reg-index {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
}
.emp-reg-entry {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 9px 10px; cursor: pointer; white-space: nowrap;
  font-size: 13px; font-weight: 800; color: #64748b; font-family: inherit;
  transition: color .15s, border-color .15s;
}
.emp-reg-entry:hover { color: #014034; }
.emp-reg-entry.active { color: #014034; border-bottom-color: #10b981; }
.emp-reg-entry .n { font-weight: 900; font-size: 11px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.emp-reg-entry.active .n { color: #047857; }
.emp-reg-entry .dot { width: 6px; height: 6px; border-radius: 50%; background: #dc2626; display: none; }
.emp-reg-entry .dot.on { display: inline-block; }
.emp-reg-sep { flex: 0 0 auto; width: 1px; height: 16px; background: #e2e8f0; margin: 0 5px; }
.emp-reg-ledger {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0 7px; margin-top: 2px;
  border-top: 1px dashed #e5e7eb;
}
.emp-reg-count { font-size: 12px; font-weight: 900; color: #475569; font-variant-numeric: tabular-nums; white-space: nowrap; }
.emp-reg-count.done { color: #047857; }
.emp-reg-count.done::before { content: '✓ '; }
.emp-reg-slots { display: inline-flex; align-items: center; gap: 2px; }
.emp-reg-slot {
  background: none; border: 0; padding: 0; cursor: pointer;
  width: 18px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
}
.emp-reg-slot i { width: 12px; height: 6px; border-radius: 3px; background: #047857; transition: background .15s, box-shadow .15s; }
.emp-reg-slot.is-empty i { background: #fff; box-shadow: inset 0 0 0 1.5px #dc2626; }
.emp-reg-slot:hover i { box-shadow: 0 0 0 2px rgba(4,120,87,.25); }
.emp-reg-slot.is-empty:hover i { box-shadow: inset 0 0 0 1.5px #dc2626, 0 0 0 2px rgba(220,38,38,.2); }
.emp-reg-progress {
  position: absolute; inset-inline-start: 0; bottom: -1px; height: 2px;
  background: #10b981; width: 0; transition: width .25s ease; pointer-events: none;
}
/* نبضة واحدة على مواضع النقص لحظة فشل الحفظ */
@keyframes empRegBlink { 0%, 100% { transform: none; } 40% { transform: scale(1.35); } }
.emp-reg-blink { animation: empRegBlink .45s ease-in-out 2; }
/* رقم القسم داخل رأس بطاقته — يربط الفهرس بالبطاقة */
.emp-sec-no {
  flex: 0 0 auto; min-width: 20px; height: 20px; border-radius: 6px;
  background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
  font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}
/* تكثّف المطلع أثناء التمرير — يستعيد ~20px للنموذج ويبقى الاسم والإغلاق */
.emp-modal-head.is-condensed #empMastRow { padding: 6px 20px; }
.emp-modal-head.is-condensed #empMastPlate { width: 30px; height: 30px; font-size: 13px !important; }
.emp-modal-head.is-condensed #empMastKicker { display: none; }
@media (prefers-reduced-motion: reduce) {
  .emp-reg-blink { animation: none; }
  .emp-reg-progress { transition: none; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Login Screen — v0.37.9.794 · «طيّة الدفتر»
   ─────────────────────────────────────────────────────────────────────────
   كل قاعدة هنا **مقصورة** على `.login-screen` أو `.login-card`. السبب ليس
   الأناقة: `.btn-primary` وحده مستعمَل ٤٠٨ مرّات في ٥٥ ملفاً، فتعديل قاعدته
   الأساسية يُعيد طلاء البرنامج كلّه. والأصناف العامّة (`.form-group`
   `.input-with-icon` `.form-row` `.checkbox-inline` `.link-muted`) تعيش اليوم
   في هذه الشاشة وحدها، لكن اسمها عامّ — فقصْرُها يمنع أي شاشة قادمة من أن
   ترث تنسيق شاشة دخول بالخطأ.
   ⚠️ `[data-when-mode]` يُخفى بخاصيّة `hidden` من app.js لا بـCSS، فكل قاعدة
      عرض هنا تستثني `[hidden]` صراحةً وإلا عاد المخفيّ للظهور.
   ═════════════════════════════════════════════════════════════════════════ */

.login-screen {
  --lg-ink:      #04231d;   /* حبر الجناح الفاتح */
  --lg-ink-soft: #5b6f68;
  --lg-teal:     #014034;
  --lg-teal-d:   #01271f;
  --lg-emerald:  #10b981;
  --lg-mint:     #d1fae5;
  --lg-paper:    #ffffff;
  --lg-paper-2:  #f4f7f5;   /* حوض الحقل — الحقول مملوءة لا مسطّرة */
  --lg-line:     #e3e9e6;
  --lg-radius:   20px;

  min-height: calc(100vh - var(--copyright-h));
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  background: radial-gradient(120% 120% at 70% 10%, #0d6e5c 0%, #014034 45%, #01271f 100%);
  position: relative;
  /* 🐛 كان `overflow:hidden` فيقصّ البطاقة على شاشة 13" أفقية بلا مخرج */
  overflow-x: hidden; overflow-y: auto;
}
.login-screen .lg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ضوء الخلفية: زمردي هادئ يتنفّس. البقعة الكهرمانية القديمة كانت بقيّةَ
   الهوية الوزارية المتقاعدة — لونٌ لم يعد من لوحة البرنامج. */
.login-screen .login-bg-anim {
  position: absolute; inset: -20%;
  background:
    radial-gradient(closest-side circle at 22% 28%, rgba(16,185,129,.22), transparent 70%),
    radial-gradient(closest-side circle at 78% 74%, rgba(13,110,92,.28), transparent 70%);
  animation: lgBreathe 26s ease-in-out infinite;
  will-change: transform, opacity; pointer-events: none;
}
@keyframes lgBreathe {
  0%, 100% { transform: scale(1)    translate3d(0, 0, 0);      opacity: .9; }
  50%      { transform: scale(1.06) translate3d(0, -1.5%, 0);  opacity: .65; }
}

/* ── الطيّة ───────────────────────────────────────────────────────────── */
.login-screen .login-card {
  position: relative; z-index: 1;
  /* ✨ v827 — الجناح الحيّ: الركائز الأربع تحتاج صدراً أوسع قليلاً */
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  width: 100%; max-width: 1040px;
  background: var(--lg-paper);
  border-radius: var(--lg-radius);
  overflow: hidden;
  box-shadow: 0 32px 80px -20px rgba(1,26,21,.55), 0 8px 24px -8px rgba(1,26,21,.35);
  animation: lgSheet .52s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes lgSheet { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

/* لمعة الحافّة المتأخّرة: الورقة تستقرّ أولاً، ثم يمسك الضوءُ حرفها العلوي
   بعد ٩٠٠ms — أدقّ لمسة في المقترح المنافس، وأُخذت منه. */
.login-screen .login-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px rgba(1,64,52,.07);
  opacity: 0; animation: lgEdge .9s ease-out .9s forwards;
}
@keyframes lgEdge { to { opacity: 1; } }

/* ── جناح الهوية ─────────────────────────────────────────────────────── */
.login-screen .lg-brand {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding: clamp(28px, 3.4vw, 44px);
  background: linear-gradient(155deg, #014034 0%, #013229 58%, #01271f 100%);
  color: #eaf5f1; position: relative;
}
.login-screen .lg-brand::after {          /* خيط زمردي يفصل الجناحين */
  content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(16,185,129,.55), transparent);
}
.login-screen .lg-logo {
  width: clamp(150px, 15vw, 196px); height: auto; display: block; margin-bottom: 22px;
  filter: brightness(0) invert(1);       /* الشعار ملفّ أحادي — يُبيَّض كما في القائمة والهيدر */
}
.login-screen .login-brand {
  margin: 0 0 8px; font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1.25; color: #ffffff;
}
.login-screen .login-sub {
  margin: 0; font-size: clamp(12.5px, 1.15vw, 14px); line-height: 1.85;
  color: rgba(209,250,229,.78); font-weight: 400; max-width: 30ch;
}
html[dir="ltr"] .login-screen .login-brand { letter-spacing: -.02em; }
.login-screen .lg-brand-foot { display: flex; flex-direction: column; gap: 14px; }
.login-screen .lg-rule { display: block; height: 1px; background: rgba(255,255,255,.16); }

/* ── ✨ v827 «الجناح الحيّ» — نبض الدفتر: يُرسم مرّة عند الفتح ثم يسكن ──
   الإخفاء الابتدائي يعيش في keyframes (fill-mode both) لا في القاعدة، فإذا
   قُتلت الحركة بتفضيل المستخدم ظهر الخطّ مكتملاً بدل أن يختفي للأبد. */
.login-screen .lg-pulse { display: block; width: 100%; max-width: 250px; height: 38px; margin-top: 24px; }
.login-screen .lg-pulse polyline {
  fill: none; stroke: #34d399; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1;
  animation: lgDraw 1.5s cubic-bezier(.4,0,.2,1) .55s both;
}
.login-screen .lg-pulse-dot { fill: #6ee7b7; animation: lgDotIn .45s ease-out 1.9s both; }
@keyframes lgDraw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lgDotIn { from { opacity: 0; }           to { opacity: 1; } }

/* ركائز المنتج الأربع — ظهور متدرّج بعد استقرار الورقة */
.login-screen .lg-feats { list-style: none; display: flex; flex-direction: column; gap: 15px; margin: 26px 0 0; padding: 0; }
.login-screen .lg-feat { display: flex; gap: 12px; align-items: flex-start; animation: lgFeatIn .5s ease-out both; }
.login-screen .lg-feat:nth-child(1) { animation-delay: .35s; }
.login-screen .lg-feat:nth-child(2) { animation-delay: .5s; }
.login-screen .lg-feat:nth-child(3) { animation-delay: .65s; }
.login-screen .lg-feat:nth-child(4) { animation-delay: .8s; }
@keyframes lgFeatIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.login-screen .lg-feat-ico {
  width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: rgba(16,185,129,.10); border: 1px solid rgba(16,185,129,.30);
  color: #6ee7b7; box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.login-screen .lg-feat-ico .lg-ico { width: 17px; height: 17px; }
.login-screen .lg-feat-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.login-screen .lg-feat-t { font-size: 13px; font-weight: 800; color: #f0fdf9; line-height: 1.5; }
.login-screen .lg-feat-d { font-size: 11.5px; line-height: 1.7; color: rgba(209,250,229,.62); }

/* شرائح الثقة الثلاث — سطر lg-secure القديم صار أولها */
.login-screen .lg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.login-screen .lg-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border-radius: 999px; background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14); color: rgba(209,250,229,.82);
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
}
.login-screen .lg-chip .lg-ico { width: 13px; height: 13px; color: var(--lg-emerald); }

/* ── الأيقونات ───────────────────────────────────────────────────────── */
.login-screen .lg-ico {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── جناح النموذج ────────────────────────────────────────────────────── */
.login-screen .lg-pane {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(26px, 3.2vw, 44px);
  background: var(--lg-paper); color: var(--lg-ink);
}
.login-screen .lang-toggle-btn {
  position: absolute; inset-block-start: 18px; inset-inline-end: 18px;
  background: var(--lg-paper-2); border: 1px solid var(--lg-line); color: var(--lg-ink-soft);
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.login-screen .lang-toggle-btn:hover { background: var(--lg-teal); border-color: var(--lg-teal); color: #fff; }
/* ✨ v827 — تحية اليوم: سطر صغير فوق التحية يملؤه JS بحسب الساعة */
.login-screen .lg-day {
  margin: 0 0 3px; min-height: 1.2em;
  font-size: 12px; font-weight: 800; color: #0d6e5c; letter-spacing: .02em;
}
.login-screen .lg-greet {
  margin: 0 0 20px; font-size: clamp(17px, 1.7vw, 21px); font-weight: 700;
  color: var(--lg-ink); letter-spacing: -.01em;
}

/* التبويبان — شريط مقسوم بمؤشّر ممتلئ */
.login-screen .login-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 22px;
  background: var(--lg-paper-2); border: 1px solid var(--lg-line);
  border-radius: 12px; padding: 4px;
}
.login-screen .login-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 8px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--lg-ink-soft);
  font-size: 13px; font-weight: 700; font-family: inherit;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.login-screen .login-tab:hover { color: var(--lg-ink); }
.login-screen .login-tab.active {
  background: var(--lg-teal); color: #fff;
  box-shadow: 0 2px 8px -2px rgba(1,64,52,.5);
}
.login-screen .login-tab.active .lg-ico { color: var(--lg-mint); }
.login-screen .login-tab-label { unicode-bidi: isolate; }

/* ── الحقول: مملوءة لا مسطّرة ────────────────────────────────────────── */
.login-screen .login-form { display: flex; flex-direction: column; gap: 15px; }
.login-screen .form-group { display: flex; flex-direction: column; gap: 7px; }
.login-screen .form-group > label {
  font-size: 12px; font-weight: 700; color: var(--lg-ink-soft); letter-spacing: .01em;
}
.login-screen .form-group > label > [hidden] { display: none; }
.login-screen .input-with-icon {
  display: flex; align-items: center; gap: 10px;
  background: var(--lg-paper-2);
  border: 1.5px solid var(--lg-line); border-radius: 12px;
  padding-inline: 13px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.login-screen .input-with-icon:focus-within {
  background: #fff; border-color: var(--lg-emerald);
  box-shadow: 0 0 0 3.5px rgba(16,185,129,.16);
}
.login-screen .input-with-icon .input-icon { color: #9aada6; transition: color .18s ease; }
.login-screen .input-with-icon:focus-within .input-icon { color: var(--lg-teal); }
.login-screen .input-with-icon input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
  padding: 13px 0; color: var(--lg-ink); font-family: inherit;
  /* 🐛 كان 14px — وأي حقل دون 16px يُجبر iOS Safari على تكبير الصفحة عند كل دخول */
  font-size: 16px; line-height: 1.4;
  /* البريد وكلمة المرور بيانات لاتينية: تبدأ من جهة قراءتها لا من حافّة الصفحة */
  text-align: start;
}
.login-screen .input-with-icon input::placeholder { color: #a9b8b2; opacity: 1; }
.login-screen .pwd-toggle {
  background: none; border: 0; padding: 6px; cursor: pointer; color: #9aada6;
  display: inline-flex; border-radius: 8px; transition: color .18s ease, background .18s ease;
}
.login-screen .pwd-toggle:hover { color: var(--lg-teal); background: rgba(1,64,52,.06); }

/* ✨ v827 — إنذار Caps Lock: قاعدة العرض لا تهزم `hidden` (درس v819) */
.login-screen .lg-caps { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 11.5px; font-weight: 700; color: #b45309; }
.login-screen .lg-caps[hidden] { display: none; }
.login-screen .lg-caps .lg-ico { width: 14px; height: 14px; flex: 0 0 auto; }

.login-screen .form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.login-screen .checkbox-inline { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--lg-ink-soft); cursor: pointer; }
.login-screen .checkbox-inline input { width: 15px; height: 15px; accent-color: var(--lg-teal); cursor: pointer; }
.login-screen .link-muted { color: var(--lg-ink-soft); font-size: 12.5px; text-decoration: none; }
.login-screen .link-muted:hover { color: var(--lg-teal); text-decoration: underline; }

/* ── زرّ الدخول — مقصور على البطاقة، والقاعدة العامّة لم تُمَسّ ───────── */
.login-screen .login-card .btn-primary {
  background: linear-gradient(135deg, #014034 0%, #0d6e5c 100%);
  color: #fff; border: 0; border-radius: 12px;
  padding: 15px 20px; font-size: 14.5px; font-weight: 800; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; position: relative;
  box-shadow: 0 8px 20px -8px rgba(1,64,52,.7);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.login-screen .login-card .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(1,64,52,.75); }
.login-screen .login-card .btn-primary:active { transform: translateY(0); }
/* ✨ v827 — لمعة تعبر الزرّ عند المرور (تُقصّ داخل حوافه وتُقتل مع تقليل الحركة) */
.login-screen .login-card .btn-primary { overflow: hidden; }
.login-screen .login-card .btn-primary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.20) 50%, transparent 58%);
  transform: translateX(-130%); transition: transform .55s ease;
}
.login-screen .login-card .btn-primary:hover::after { transform: translateX(130%); }
.login-screen .lg-submit-label > [hidden] { display: none; }
/* السهم يُرسم لا يُكتب: الحرف «←» كان يُقلَب بـscaleX فيصطدم باتجاه النصّ */
.login-screen .btn-arrow {
  width: 16px; height: 16px; flex: 0 0 auto;
  background: currentColor; transition: transform .2s ease;
  -webkit-mask: no-repeat center / 16px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15"/><path d="m13 6 6 6-6 6"/></svg>');
          mask: no-repeat center / 16px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15"/><path d="m13 6 6 6-6 6"/></svg>');
}
html[dir="rtl"] .login-screen .btn-arrow { transform: scaleX(-1); }
.login-screen .login-card .btn-primary:hover .btn-arrow { transform: translateX(3px); }
html[dir="rtl"] .login-screen .login-card .btn-primary:hover .btn-arrow { transform: scaleX(-1) translateX(3px); }

/* حالة الإرسال: الدخول يذهب إلى فرانكفورت. بلا إشارة كان المستخدم ينقر مرّتين. */
.login-screen .lg-spin { display: none; width: 16px; height: 16px; flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
  animation: lgSpin .7s linear infinite; }
@keyframes lgSpin { to { transform: rotate(360deg); } }
.login-screen .btn-primary.is-loading { pointer-events: none; filter: saturate(.85); }
.login-screen .btn-primary.is-loading .btn-arrow { display: none; }
.login-screen .btn-primary.is-loading .lg-spin { display: block; }
.login-screen .btn-primary[disabled] { opacity: .75; cursor: default; }

/* ── ملاحظات وأسفل الجناح ────────────────────────────────────────────── */
.login-screen .lg-note {
  margin: 2px 0 0; font-size: 11.5px; line-height: 1.75;
  color: #859891; text-align: center;
}
.login-screen .login-helper {
  font-size: 12.5px; color: var(--lg-ink-soft); text-align: center;
  padding: 11px 12px; background: var(--lg-paper-2);
  border: 1px dashed var(--lg-line); border-radius: 10px;
}
.login-screen .login-helper a {
  color: var(--lg-teal); font-weight: 800; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 6px;
}
.login-screen .login-helper a:hover { text-decoration: underline; }

.login-screen .lg-colophon { margin-top: auto; padding-top: 22px; text-align: center; }
.login-screen .lg-side-door {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--lg-line); color: var(--lg-ink-soft);
  padding: 9px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700; font-family: inherit;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.login-screen .lg-side-door:hover { border-color: var(--lg-teal); color: var(--lg-teal); background: rgba(1,64,52,.04); }
.login-screen .lg-side-hint { margin: 8px 0 0; font-size: 10.5px; line-height: 1.7; color: #9aada6; }
.login-screen .login-footer { margin: 16px 0 0; font-size: 10.5px; color: #a9b8b2; letter-spacing: .04em; }

/* ── تركيز مرئي (لم يكن موجوداً إطلاقاً) ─────────────────────────────── */
.login-screen :focus-visible { outline: 2.5px solid var(--lg-emerald); outline-offset: 2px; border-radius: 8px; }
.login-screen .lg-brand :focus-visible { outline-color: #6ee7b7; }

/* ── الجوّال: مُصمَّم لا مُتدهور ───────────────────────────────────────── */
@media (max-width: 900px) {
  .login-screen { align-items: flex-start; padding: 0; }
  .login-screen .login-card {
    grid-template-columns: 1fr; max-width: 560px; border-radius: 0; min-height: 100vh;
    box-shadow: none;
  }
  .login-screen .lg-brand {
    /* شريط هوية مضغوط: الشعار ثم سطر التعريف — لا نصف شاشة فارغة */
    padding: 22px 20px 18px; gap: 10px;
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
  }
  .login-screen .lg-brand::after { inset: auto 0 0 0; width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16,185,129,.5), transparent); }
  .login-screen .lg-logo { width: 132px; margin: 0; }
  .login-screen .login-brand { display: none; }
  .login-screen .login-sub { font-size: 11.5px; line-height: 1.6; max-width: 40ch; margin: 0; }
  .login-screen .lg-brand-foot { display: none; }
  /* ✨ v827 — الجوّال يبقى مضغوطاً: الركائز والمخطط لا يدفعان النموذج تحت الطيّة
     (شريط الهوية يبقى شريطاً؛ تحية اليوم تبقى — سطر واحد لا يكلّف شيئاً) */
  .login-screen .lg-feats, .login-screen .lg-pulse { display: none; }
  .login-screen .lg-pane { padding: 24px 20px 30px; }
  .login-screen .lang-toggle-btn { inset-block-start: 14px; inset-inline-end: 14px; }
  .login-screen .lg-greet { margin-bottom: 16px; padding-inline-end: 64px; }
}
@media (max-width: 340px) {
  .login-screen .lg-logo { width: 108px; }
  /* دون 340px لا يتّسع السطر لجملة مفيدة، فيُطوى بدل أن يُكسر على ثلاثة أسطر */
  .login-screen .login-sub { display: none; }
  .login-screen .login-tab { font-size: 12px; gap: 6px; padding: 9px 6px; }
}
/* شاشة قصيرة (١٣ بوصة أفقية) — البطاقة تُمرَّر ولا تُقصّ */
@media (max-height: 700px) and (min-width: 901px) {
  .login-screen { align-items: flex-start; padding-block: 24px; }
  .login-screen .lg-pane, .login-screen .lg-brand { padding-block: 28px; }
  /* ✨ v827 — على الشاشة القصيرة تُطوى أوصاف الركائز وتبقى عناوينها */
  .login-screen .lg-feat-d { display: none; }
  .login-screen .lg-feats { gap: 10px; margin-top: 18px; }
  .login-screen .lg-pulse { margin-top: 14px; }
}

/* ── ما لا مكان له على باب الدخول ────────────────────────────────────── */
/*  شريط الحالة السفلي كان يظهر على شاشة الدخول فيقرأ «الشركة: لا شركة» —
    وهو صادق ولا معنى له قبل الدخول، ويأكل 32px من ارتفاع الطيّة. يُخفى ما
    دامت شاشة الدخول ظاهرة. المُحدِّد `:has()` مستعمَل أصلاً في هذا الملفّ
    (sidebar_collapse_pro) وإن لم يدعمه متصفّح عاد الشريط كما كان — فشلٌ آمن. */
body:has(#loginScreen:not(.hidden)) #pspStatusBar { display: none !important; }
/*  الشعار يحمل كلمة «Arttop» مرسومة، فتكرارها عنواناً تحته حشوٌ في الإنجليزية.
    وفي العربية ليس تكراراً: الشعار لاتيني والعنوان «آرت توب» — فيبقى. */
html[dir="ltr"] .login-screen .login-brand { display: none; }
html[dir="ltr"] .login-screen .login-sub { margin-top: 14px; }

/* ── احترام تفضيل تقليل الحركة (لم يكن محترماً في أي موضع) ───────────── */
@media (prefers-reduced-motion: reduce) {
  .login-screen .login-bg-anim { animation: none; }
  .login-screen .login-card { animation: none; }
  .login-screen .login-card::before { animation: none; opacity: 1; }
  .login-screen .lg-spin { animation-duration: 1.6s; }
  /* ✨ v827 — الإخفاء الابتدائي يعيش في keyframes، فقتل الحركة = ظهور مكتمل فوراً */
  .login-screen .lg-feat, .login-screen .lg-pulse polyline, .login-screen .lg-pulse-dot { animation: none; }
  .login-screen .login-card .btn-primary::after { display: none; }
  .login-screen * { transition-duration: .01ms !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   App Shell
   ═════════════════════════════════════════════════════════════════════════ */
.app-shell {
  min-height: calc(100vh - var(--copyright-h));
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
}
html[dir="ltr"] .app-shell {
  grid-template-columns: var(--sidebar-w) 1fr;
}
@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
  }
}

/* Header */
.app-header {
  grid-area: header;
  background: white;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  position: sticky;
  top: var(--copyright-h);
  z-index: 50;
  box-shadow: var(--shadow-sm);
}
.icon-btn {
  background: none; border: none;
  width: 40px; height: 40px;
  border-radius: 8px; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.icon-btn:hover { background: #f3f4f6; }

.brand-mini { display: flex; align-items: center; gap: 10px; }
.brand-mini-logo {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border-radius: 10px;
  color: white; font-weight: 900; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
}
.brand-mini-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-mini-title { font-weight: 900; font-size: 14px; color: var(--primary); font-family: 'Inter', sans-serif; }
.brand-mini-sub { font-size:10.5px; color: var(--text-muted); }
@media (min-width: 1025px) {
  .brand-mini { display: none; }
}

.page-title {
  flex: 1;
  font-size: 16px; font-weight: 700; color: var(--text);
  margin: 0; padding: 0 12px;
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.page-title #pageTitleIcon { font-size: 24px; flex-shrink: 0; }

.header-actions { display: flex; align-items: center; gap: 6px; }

/* 🟢 Pill-style header badges (status, date) */
.header-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px; font-weight: 800;
  white-space: nowrap;
  user-select: none;
}

/* 🚪 Header Logout button — bright red, always visible */
.hdr-logout-btn {
  display: inline-flex; align-items: center; gap: 6px;
  /* v0.37.9.600 — calm by default (was loud red); turns red only on hover */
  background: #fff;
  color: #64748b; border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12.5px; font-weight: 800;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.hdr-logout-btn:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 8px rgba(220,38,38,0.28);
}

/* 🔔 Notification badge (number) */
.notif-badge {
  position: absolute;
  top: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #dc2626; color: #fff;
  border-radius: 9px;
  border: 2px solid #fff;
  font-size: 10.5px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
html[dir="rtl"] .notif-badge { left: 0; }
html[dir="ltr"] .notif-badge { right: 0; }

/* 🔔 Notification dropdown panel */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  min-width: 360px;
  max-width: 420px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(15,23,42,0.18);
  z-index: 1200;
  overflow: hidden;
}
html[dir="rtl"] .notif-dropdown { left: 0; }
html[dir="ltr"] .notif-dropdown { right: 0; }
.notif-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid #e2e8f0;
  font-size: 13px; color: #0f172a;
}
.notif-mark-read {
  background: #fff; border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px; font-weight: 700;
  color: #475569; cursor: pointer;
}
.notif-mark-read:hover { background: #f1f5f9; }
.notif-list {
  max-height: 380px;
  overflow-y: auto;
}
.notif-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.12s;
}
.notif-item:hover { background: #f8fafc; }
.notif-item.unread { background: #eff6ff; }
.notif-item.unread:hover { background: #dbeafe; }
.notif-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.notif-icon.task { background: #fef3c7; }
.notif-icon.note { background: #ede9fe; }
.notif-icon.alert { background: #fee2e2; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 12.5px; font-weight: 800; color: #0f172a; line-height: 1.4; }
.notif-meta { font-size: 11px; color: #64748b; margin-top: 2px; }
.notif-empty {
  text-align: center; padding: 40px 20px;
  color: #94a3b8; font-size: 13px; font-weight: 600;
}
.notif-footer {
  display: flex; justify-content: space-around; gap: 8px;
  padding: 8px 12px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}
.notif-footer-link {
  font-size: 11.5px; font-weight: 700;
  color: #1d4ed8;
  text-decoration: none;
  padding: 4px 10px; border-radius: 6px;
}
.notif-footer-link:hover { background: #dbeafe; }

/* User card — flip avatar to end for RTL/LTR */
html[dir="rtl"] .user-menu-btn { flex-direction: row; }
html[dir="ltr"] .user-menu-btn { flex-direction: row; }

/* Make header on smaller widths still readable */
@media (max-width: 1100px) {
  .header-pill .hidden-mobile,
  .hdr-logout-btn .hidden-mobile { display: none !important; }
}
.header-action-btn {
  position: relative;
  background: none; border: none;
  padding: 8px 12px;
  border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600;
  transition: background 0.2s;
}
.header-action-btn:hover { background: #f3f4f6; }
.badge-dot {
  position: absolute; top: 6px;
  width: 8px; height: 8px;
  background: var(--danger); border-radius: 50%;
  border: 2px solid white;
}
html[dir="rtl"] .badge-dot { left: 6px; }
html[dir="ltr"] .badge-dot { right: 6px; }

.user-menu { position: relative; }
.user-menu-btn {
  background: none; border: none;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 10px;
  transition: background 0.2s;
}
.user-menu-btn:hover { background: #f3f4f6; }
.user-avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-radius: 50%;
  color: white; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif;
}
.user-info { text-align: start; line-height: 1.2; }
.user-name { font-size: 13px; font-weight: 700; color: var(--text); }
.user-role { font-size: 11px; color: var(--text-muted); }
.user-dropdown {
  position: absolute; top: 100%; margin-top: 8px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: 6px;
  z-index: 60;
}
html[dir="rtl"] .user-dropdown { left: 0; }
html[dir="ltr"] .user-dropdown { right: 0; }
.user-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  text-decoration: none; color: var(--text);
  font-size: 13px; font-weight: 600;
  border-radius: 6px;
  transition: background 0.15s;
}
.user-dropdown a:hover { background: #f3f4f6; }
.user-dropdown hr { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* ═════════════════════════════════════════════════════════════════════════
   Sidebar
   ═════════════════════════════════════════════════════════════════════════ */
.sidebar {
  grid-area: sidebar;
  background: var(--sidebar-bg);
  color: white;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: sticky;
  top: var(--copyright-h);
  /* v0.37.9.696 — تطرح ارتفاع الشريط السفلي بعد أن صار يعبر الشاشة كاملة،
     وإلا اختفى آخر بند في القائمة تحته. */
  height: calc(100vh - var(--copyright-h) - var(--statusbar-h, 32px));
  z-index: 40;
  box-shadow: -2px 0 12px rgba(0,0,0,0.05);
}
html[dir="ltr"] .sidebar { box-shadow: 2px 0 12px rgba(0,0,0,0.05); }

@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    top: var(--copyright-h);
    height: calc(100vh - var(--copyright-h));
    width: var(--sidebar-w);
    transform: translateX(100%);
    transition: transform 0.3s;
  }
  html[dir="ltr"] .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
}

.sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* 🎯 v0.37.9.697 — الشعار في منتصف أعلى القائمة، بالعربية والإنجليزية معاً.
   كان محاذياً لبداية السطر، فيلتصق بالحافة اليمنى في RTL واليسرى في LTR —
   ويقفز من جهة إلى أخرى مع قلب اللغة. التوسيط يثبّته في الحالتين، ويوحّده مع
   الشريط المصغّر الذي كان يوسّطه وحده باستثناء خاصّ (حُذف أدناه). */
.sidebar-brand { display: flex; align-items: center; justify-content: center; gap: 12px; }
.sidebar-brand-img { margin-inline: auto; }
/* الاحتياط (حين يتعذّر تحميل الصورة) يُوسَّط كذلك — وإلا انزاح الشعار البديل
   إلى الحافة بينما الأصلي في المنتصف. لا قاعدة له كانت موجودة أصلاً. */
.sidebar-brand-fallback { align-items: center; justify-content: center; gap: 12px; text-align: center; }
/* v0.37.9.597 — real Arttop logo (whitened for the dark sidebar) */
.sidebar-brand-img { height: 30px; width: auto; max-width: 190px; display: block; filter: brightness(0) invert(1); }
.brand-mini-img { height: 26px; width: auto; max-width: 150px; display: block; }
.sidebar-brand-logo {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-radius: 12px;
  color: white; font-weight: 900; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(245,158,11,0.4);
  font-family: 'Inter', sans-serif;
}
.sidebar-brand-name { font-weight: 900; font-size: 18px; color: white; font-family: 'Inter', sans-serif; }
.sidebar-brand-sub { font-size: 11px; color: rgba(255,255,255,0.7); }

.sidebar-nav {
  flex: 1; overflow-y: auto;
  padding: 12px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }

.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  margin: 2px 8px;
  border-radius: 10px;
  color: rgba(255,255,255,0.9);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
/* v0.37.9.605 — align every item: fixed-width icon slot (emojis vary in width)
   so ALL labels start at the same x; label fills the rest and wraps tidily. */
.sidebar-item > span:first-child {
  flex: 0 0 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
}
.sidebar-item > span:first-child + span {
  flex: 1 1 auto; min-width: 0; line-height: 1.35;
}
/* v0.37.9.614 — unified SVG icon set (sidebar_icons.js). Icons inherit the
   item's currentColor, so hover/active/collapsed states tint them for free. */
.sidebar-item .sb-ico { width: 19px; height: 19px; flex: 0 0 auto; display: block; opacity: .92; }
.sidebar-item:hover .sb-ico,
.sidebar-item.active .sb-ico { opacity: 1; }
body.sidebar-collapsed .sidebar-item .sb-ico { width: 21px; height: 21px; }
.sidebar-item:hover {
  background: rgba(255,255,255,0.12);
  color: white;
}
html[dir="rtl"] .sidebar-item:hover { transform: translateX(-3px); }
html[dir="ltr"] .sidebar-item:hover { transform: translateX(3px); }

.sidebar-item.active {
  background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.10));
  box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
  color: white;
}
.sidebar-item.active::before {
  content: '';
  position: absolute; top: 6px; bottom: 6px;
  width: 3px;
  background: linear-gradient(180deg, #34d399, #10b981);
  box-shadow: 0 0 12px rgba(52,211,153,0.6);
  border-radius: 3px;
}
html[dir="rtl"] .sidebar-item.active::before { right: 0; border-radius: 3px 0 0 3px; }
html[dir="ltr"] .sidebar-item.active::before { left: 0; border-radius: 0 3px 3px 0; }

/* Sidebar section header */
.sidebar-section {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  font-weight: 800;
  padding: 6px 14px;
  margin: 14px 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.sidebar-section:hover { background: rgba(255,255,255,0.08); }
.sidebar-section::before {
  content: ''; width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  flex-shrink: 0;
}
.sidebar-section::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.20), transparent);
}
html[dir="ltr"] .sidebar-section::after { background: linear-gradient(-90deg, rgba(255,255,255,0.20), transparent); }
.sidebar-arrow {
  color: rgba(255,255,255,0.85);
  font-size:10.5px;
  transition: transform 0.2s;
}
.sidebar-section.collapsed .sidebar-arrow { transform: rotate(-90deg); }
.sidebar-group { transition: all 0.3s; overflow: hidden; }
.sidebar-group.collapsed { max-height: 0 !important; opacity: 0; margin: 0; padding: 0; }

/* Group color coding */
.sidebar-item[data-group="main"] { background: linear-gradient(90deg, rgba(20,184,166,0.25), rgba(20,184,166,0.10)); border-inline-end: 3px solid rgba(20,184,166,0.6); }
.sidebar-item[data-group="main"]:hover { background: linear-gradient(90deg, rgba(20,184,166,0.45), rgba(20,184,166,0.20)); }
.sidebar-item.active[data-group="main"] { background: linear-gradient(90deg, rgba(20,184,166,0.70), rgba(20,184,166,0.40)); }

.sidebar-section[data-group="org"] { background: linear-gradient(90deg, rgba(245,158,11,0.55), rgba(245,158,11,0.25)); border-inline-end: 4px solid #f59e0b; color: white; }
.sidebar-item[data-group="org"] { background: linear-gradient(90deg, rgba(245,158,11,0.22), rgba(245,158,11,0.10)); border-inline-end: 3px solid rgba(245,158,11,0.6); }
.sidebar-item[data-group="org"]:hover { background: linear-gradient(90deg, rgba(245,158,11,0.42), rgba(245,158,11,0.20)); }
.sidebar-item.active[data-group="org"] { background: linear-gradient(90deg, rgba(245,158,11,0.70), rgba(245,158,11,0.40)); }

.sidebar-section[data-group="defs"] { background: linear-gradient(90deg, rgba(14,165,233,0.55), rgba(14,165,233,0.25)); border-inline-end: 4px solid #0ea5e9; color: white; }
.sidebar-item[data-group="defs"] { background: linear-gradient(90deg, rgba(14,165,233,0.22), rgba(14,165,233,0.10)); border-inline-end: 3px solid rgba(14,165,233,0.6); }
.sidebar-item[data-group="defs"]:hover { background: linear-gradient(90deg, rgba(14,165,233,0.42), rgba(14,165,233,0.20)); }
.sidebar-item.active[data-group="defs"] { background: linear-gradient(90deg, rgba(14,165,233,0.70), rgba(14,165,233,0.40)); }

.sidebar-section[data-group="rel"] { background: linear-gradient(90deg, rgba(99,102,241,0.55), rgba(99,102,241,0.25)); border-inline-end: 4px solid #6366f1; color: white; }
.sidebar-item[data-group="rel"] { background: linear-gradient(90deg, rgba(99,102,241,0.22), rgba(99,102,241,0.10)); border-inline-end: 3px solid rgba(99,102,241,0.6); }
.sidebar-item[data-group="rel"]:hover { background: linear-gradient(90deg, rgba(99,102,241,0.42), rgba(99,102,241,0.20)); }
.sidebar-item.active[data-group="rel"] { background: linear-gradient(90deg, rgba(99,102,241,0.70), rgba(99,102,241,0.40)); }

.sidebar-section[data-group="fin"] { background: linear-gradient(90deg, rgba(16,185,129,0.55), rgba(16,185,129,0.25)); border-inline-end: 4px solid #10b981; color: white; }
.sidebar-item[data-group="fin"] { background: linear-gradient(90deg, rgba(16,185,129,0.22), rgba(16,185,129,0.10)); border-inline-end: 3px solid rgba(16,185,129,0.6); }
.sidebar-item[data-group="fin"]:hover { background: linear-gradient(90deg, rgba(16,185,129,0.42), rgba(16,185,129,0.20)); }
.sidebar-item.active[data-group="fin"] { background: linear-gradient(90deg, rgba(16,185,129,0.70), rgba(16,185,129,0.40)); }

.sidebar-section[data-group="hr"] { background: linear-gradient(90deg, rgba(236,72,153,0.55), rgba(236,72,153,0.25)); border-inline-end: 4px solid #ec4899; color: white; }
.sidebar-item[data-group="hr"] { background: linear-gradient(90deg, rgba(236,72,153,0.22), rgba(236,72,153,0.10)); border-inline-end: 3px solid rgba(236,72,153,0.6); }
.sidebar-item[data-group="hr"]:hover { background: linear-gradient(90deg, rgba(236,72,153,0.42), rgba(236,72,153,0.20)); }
.sidebar-item.active[data-group="hr"] { background: linear-gradient(90deg, rgba(236,72,153,0.70), rgba(236,72,153,0.40)); }

.sidebar-section[data-group="rpt"] { background: linear-gradient(90deg, rgba(139,92,246,0.55), rgba(139,92,246,0.25)); border-inline-end: 4px solid #8b5cf6; color: white; }
.sidebar-item[data-group="rpt"] { background: linear-gradient(90deg, rgba(139,92,246,0.22), rgba(139,92,246,0.10)); border-inline-end: 3px solid rgba(139,92,246,0.6); }
.sidebar-item[data-group="rpt"]:hover { background: linear-gradient(90deg, rgba(139,92,246,0.42), rgba(139,92,246,0.20)); }
.sidebar-item.active[data-group="rpt"] { background: linear-gradient(90deg, rgba(139,92,246,0.70), rgba(139,92,246,0.40)); }

/* ───── v0.37.9.453 — Unified navy + gold sidebar (calm, ministerial) ─────
   Overrides the loud per-group rainbow above. Group identity now comes from a
   single refined GOLD hairline accent — not heavy colored fills. These generic
   [data-group] rules sit AFTER the per-group ones, so they win on equal
   specificity without needing !important. */
.sidebar-section[data-group] {
  background: rgba(255,255,255,0.05);
  border-inline-end: 3px solid rgba(16,185,129,0.55);   /* v597 — emerald hairline (was gold) */
  color: rgba(255,255,255,0.92);
}
.sidebar-section[data-group]:hover { background: rgba(255,255,255,0.10); }
.sidebar-item[data-group] {
  background: transparent;
  border-inline-end: 0;
}
.sidebar-item[data-group]:hover { background: rgba(255,255,255,0.10); }
.sidebar-item.active[data-group],
.sidebar-item.active {
  background: linear-gradient(90deg, rgba(16,185,129,0.30), rgba(16,185,129,0.08));  /* v597 — emerald (was gold) */
  box-shadow: 0 2px 10px rgba(1,64,52,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
  color: #fff;
}
/* Active accent bar → emerald (Emerald Ledger identity; was royal gold) */
.sidebar-item.active::before {
  background: linear-gradient(180deg, #6ee7b7, #10b981);
  box-shadow: 0 0 12px rgba(16,185,129,0.6);
}

/* ───── Smoother show/hide dynamics ───── */
.sidebar-group {
  max-height: 1600px;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease,
              padding 0.3s ease, margin 0.3s ease;
}
.sidebar-group.collapsed { max-height: 0 !important; opacity: 0; }
.sidebar-item {
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.sidebar-arrow { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
/* Full collapse — fade + slide instead of an abrupt cut */
.sidebar { transition: width 0.28s ease, transform 0.28s ease, opacity 0.28s ease; }
body.sidebar-collapsed #sidebar { opacity: 0; }

/* v0.37.9.696 — .sidebar-footer حُذف: عنصره أُزيل مع نقل كتلة الإصدار إلى
   الشريط السفلي (v694)، فبقيت القاعدة يتيمة لا تطابق شيئاً. */

.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 39;
}

/* ═════════════════════════════════════════════════════════════════════════
   Main Content
   ═════════════════════════════════════════════════════════════════════════ */
.main-content {
  grid-area: main;
  overflow-y: auto;
  padding: 20px;
  /* v0.37.9.603 — reserve the bottom status bar (was the top copyright bar) so
     scrolled content ends above it. Top is now flush (no top strip). */
  height: calc(100vh - var(--header-h) - var(--statusbar-h));
}
@media (max-width: 640px) { .main-content { padding: 12px; } }
.screen-container { max-width: 1400px; margin: 0 auto; }

/* ═════════════════════════════════════════════════════════════════════════
   Screen Common Components
   ═════════════════════════════════════════════════════════════════════════ */
.screen-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  padding: 18px 22px;
  border-radius: 14px;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow);
}
.screen-header.amber { background: linear-gradient(135deg, #d97706, #f59e0b); }
.screen-header.sky { background: linear-gradient(135deg, #0369a1, #0ea5e9); }
.screen-header.indigo { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.screen-header.emerald { background: linear-gradient(135deg, #047857, #10b981); }
.screen-header.pink { background: linear-gradient(135deg, #be185d, #ec4899); }
.screen-header.violet { background: linear-gradient(135deg, #6d28d9, #8b5cf6); }
.screen-header.slate { background: linear-gradient(135deg, #334155, #64748b); }

.screen-header-icon {
  width: 52px; height: 52px;
  background: rgba(255,255,255,0.2);
  border-radius: 12px;
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.screen-header-text h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; }
.screen-header-text p { margin: 4px 0 0; font-size: 13px; opacity: 0.9; }
.screen-header-actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* Card */
.card {
  background: var(--bg-card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(180deg, #fafafa, #f3f4f6);
}
.card-title { font-weight: 800; font-size: 15px; color: var(--text); margin: 0; }
.card-body { padding: 18px; }
.card-toolbar {
  padding: 12px 18px;
  background: #f9fafb;
  border-bottom: 1px solid var(--border);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  border: 1px solid transparent;
  background: white; color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn.btn-lg { padding: 10px 18px; font-size: 14px; }
.btn-primary-action { background: var(--primary); color: white; border-color: var(--primary); }
.btn-primary-action:hover { background: var(--primary-light); border-color: var(--primary-light); }
/* v0.37.9.605 — dashboard quick-actions: equal-size cells in a tidy grid */
.dash-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.dash-actions .btn {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
}
.btn-success { background: var(--success); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-warning { background: var(--warning); color: white; }
.btn-info { background: var(--info); color: white; }
.btn-outline { background: white; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost { background: transparent; }
.btn-icon { padding: 6px 8px; min-width: 32px; justify-content: center; }

/* Stat Cards */
.stats-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 20px;
}
.stat-card {
  background: white;
  border-radius: 14px;
  padding: 18px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow);
  border-inline-start: 4px solid var(--primary);
  transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
/* v0.37.9.598 — unified "Emerald Ledger" palette: a cohesive ramp of greens
   (was a loud rainbow), so the dashboard reads as one brand system. */
.stat-card.teal    { border-color: #0f766e; }
.stat-card.amber   { border-color: #047857; }
.stat-card.sky     { border-color: #0d9488; }
.stat-card.emerald { border-color: #10b981; }
.stat-card.indigo  { border-color: #059669; }
.stat-card.pink    { border-color: #14b8a6; }
.stat-card.violet  { border-color: #065f46; }
.stat-card.rose    { border-color: #14b8a6; }
.stat-card.slate   { border-color: #0f766e; }
.stat-icon {
  width: 50px; height: 50px;
  background: #ecfdf5; border-radius: 12px;
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-content { flex: 1; line-height: 1.2; }
/* v0.37.9.607 — honest financial KPI accents */
.dash-cap { font-size: 12px; font-weight: 800; color: var(--text-muted); letter-spacing: .02em; margin: 6px 2px 8px; }
/* v0.37.9.616 — dashboard period selector (month / quarter / year / all) */
.dash-cap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dash-period { display: inline-flex; gap: 3px; background: var(--bg-hover, #eef2f0); border-radius: 10px; padding: 3px; }
.dash-per-btn { border: 0; background: transparent; padding: 5px 13px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--text-muted); cursor: pointer; transition: background .14s, color .14s; }
.dash-per-btn:hover { color: var(--text); }
.dash-per-btn.active { background: var(--primary, #014034); color: #fff; box-shadow: 0 1px 4px rgba(1,64,52,.25); }
.stat-cur { font-size: 12px; color: var(--text-muted); font-weight: 700; }
.kdelta { font-size: 11px; font-weight: 800; }
.kdelta-good { color: #047857; }
.kdelta-bad  { color: #dc2626; }
.kdelta-flat { color: #94a3b8; font-weight: 600; }
/* v0.37.9.608 — "Needs your attention" panel */
.attn-list { display: flex; flex-direction: column; gap: 8px; }
.attn-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
  background: var(--bg-card, #fff); border: 1px solid var(--border);
  border-inline-start-width: 4px; border-radius: 10px; padding: 11px 14px;
  cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--text);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.attn-item:hover { background: #f9fafb; box-shadow: var(--shadow-sm); }
.attn-red   { border-inline-start-color: #dc2626; }
.attn-amber { border-inline-start-color: #f59e0b; }
.attn-flat  { border-inline-start-color: #94a3b8; }
.attn-ico   { font-size: 18px; flex: 0 0 auto; }
.attn-label { flex: 1 1 auto; min-width: 0; }
.attn-meta  { font-size: 12px; font-weight: 800; color: var(--text-muted); background: #f1f5f9; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.attn-go    { color: var(--text-muted); font-weight: 900; flex: 0 0 auto; }
html[dir="rtl"] .attn-go { display: inline-block; transform: scaleX(-1); }
.attn-clear { text-align: center; padding: 18px; color: #047857; font-weight: 700; font-size: 13px; }
/* v0.37.9.610 — first-run onboarding checklist */
.onb-card .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onb-pct { font-size: 12px; font-weight: 800; color: #047857; }
.onb-bar { height: 8px; background: #eef2f0; border-radius: 999px; overflow: hidden; margin-bottom: 14px; }
.onb-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-light)); border-radius: 999px; transition: width .4s ease; }
/* v0.37.9.619 — onboarding steps as a compact single-row stepper (reclaims
   vertical space): equal tiles that fit on one line, wrapping only when narrow. */
.onb-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.onb-step {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  background: var(--bg-card, #fff); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 8px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700;
  color: var(--text); transition: background .15s, box-shadow .15s, transform .12s;
}
.onb-step:hover { background: #f6faf8; box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.onb-step.done { color: var(--text-muted); }
.onb-check {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #cbd5e1; background: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #94a3b8; flex: 0 0 auto;
}
.onb-step.done .onb-check { background: #10b981; border-color: #10b981; color: #fff; }
.onb-label { line-height: 1.3; min-width: 0; }
/* v0.37.9.611 — dashboard charts (pure SVG) */
.spark { width: 78px; height: 20px; vertical-align: middle; margin-inline-start: 8px; opacity: .95; }
.trend-card .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.trend-legend { display: flex; gap: 14px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.trend-legend .tl { display: inline-flex; align-items: center; gap: 6px; }
.trend-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.trend-svg { width: 100%; height: auto; display: block; }
/* v0.37.9.612 — expense-breakdown donut */
.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut { width: 160px; height: 160px; border-radius: 50%; flex: 0 0 auto; position: relative; }
.donut-hole { position: absolute; inset: 26px; background: var(--bg-card, #fff); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut-total { font-size: 20px; font-weight: 900; color: var(--text); line-height: 1.1; }
.donut-cap { font-size: 11px; color: var(--text-muted); font-weight: 700; }
.donut-legend { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dl-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.dl-row i { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.dl-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600; }
.dl-amt { color: var(--text-muted); font-weight: 800; white-space: nowrap; }
/* v0.37.9.613 — aging analysis (receivables & payables by overdue age) */
.aging-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.aging-col-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.aging-col-tot { color: var(--text-muted); font-weight: 800; white-space: nowrap; }
.aging-row { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; padding: 5px 4px; cursor: pointer; text-align: start; border-radius: 8px; transition: background .12s; }
.aging-row:hover:not([disabled]) { background: var(--bg-hover, #f1f5f4); }
.aging-row[disabled] { cursor: default; opacity: .55; }
.aging-lbl { flex: 0 0 62px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.aging-track { flex: 1 1 auto; height: 12px; background: var(--bg-hover, #eef2f0); border-radius: 6px; overflow: hidden; min-width: 0; }
.aging-fill { display: block; height: 100%; border-radius: 6px; min-width: 2px; transition: width .3s ease; }
.aging-amt { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--text); white-space: nowrap; min-width: 56px; text-align: end; }
/* v0.37.9.617 — top customers/suppliers (period-scoped horizontal bars) */
.top-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.top-col-head { font-size: 13.5px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.top-row { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; padding: 5px 4px; cursor: pointer; text-align: start; border-radius: 8px; transition: background .12s; }
.top-row:hover { background: var(--bg-hover, #f1f5f4); }
.top-name { flex: 0 0 34%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--text); }
.top-track { flex: 1 1 auto; height: 12px; background: var(--bg-hover, #eef2f0); border-radius: 6px; overflow: hidden; min-width: 0; }
.top-fill { display: block; height: 100%; border-radius: 6px; min-width: 2px; }
.top-amt { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--text); white-space: nowrap; min-width: 56px; text-align: end; }
/* v0.37.9.617 — next VAT return deadline card */
.vatdue-body { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vatdue-ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: #ecfdf5; }
.vatdue-main { flex: 1 1 auto; min-width: 0; }
.vatdue-title { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.vatdue-date { font-size: 18px; font-weight: 900; color: var(--text); margin-top: 2px; }
.vatdue-side { flex: 0 0 auto; text-align: end; }
.vatdue-left { font-size: 12.5px; font-weight: 800; }
.vatdue-amt { font-size: 15px; font-weight: 900; color: var(--text); margin-top: 2px; }
.vatdue-cap { font-size: 10.5px; color: var(--text-muted); font-weight: 600; }
.vatdue-ok    { border-inline-start: 4px solid #10b981; }
.vatdue-amber { border-inline-start: 4px solid #f59e0b; } .vatdue-amber .vatdue-left { color: #b45309; } .vatdue-amber .vatdue-ico { background: #fffbeb; }
.vatdue-red   { border-inline-start: 4px solid #ef4444; } .vatdue-red .vatdue-left { color: #b91c1c; } .vatdue-red .vatdue-ico { background: #fef2f2; }
.vatdue-ok .vatdue-left { color: #047857; }
/* v0.37.9.617 — recent activity (Emerald Ledger restyle) */
.act-list { display: flex; flex-direction: column; gap: 6px; }
.act-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--bg-hover, #f6faf8); font-size: 13px; }
.act-dot { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.act-dot.act-add { background: #ecfdf5; } .act-dot.act-edit { background: #eff6ff; } .act-dot.act-del { background: #fef2f2; }
.act-txt { flex: 1 1 auto; min-width: 0; color: var(--text); font-weight: 600; }
.act-when { flex: 0 0 auto; color: var(--text-muted); font-size: 11px; white-space: nowrap; }
.act-empty { padding: 18px; text-align: center; color: var(--text-muted); font-size: 12.5px; }
.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.stat-value { font-size: 24px; font-weight: 900; color: var(--text); margin: 4px 0; font-feature-settings: "tnum" 1; }
.stat-trend { font-size: 11px; font-weight: 600; }
.stat-trend.up { color: var(--success); }
.stat-trend.down { color: var(--danger); }

/* Tables */
/* v0.37.9.601 — GLOBAL POLICY: the table HEAD stays pinned at the top while the
   stats/content above scroll away. For that, .main-content must be the sticky
   scroll context, so .table-wrapper must NOT create its own vertical scroll box.
   overflow-x:auto silently forces overflow-y to a scroll value (CSS quirk) and
   breaks the sticky head → we use overflow:visible. Tables that opt into an
   INTERNAL scroll set inline `overflow:auto;max-height:…` which overrides this
   class and still gets a sticky head (relative to their own box). */
.table-wrapper {
  overflow: visible;
  border-radius: 12px;
  background: white;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead th {
  background: linear-gradient(180deg, #f3f4f6, #e5e7eb);
  color: var(--text);
  font-weight: 800;
  padding: 12px 10px;
  text-align: start;
  border-bottom: 2px solid var(--border);
  font-size: 12px;
  white-space: nowrap;
  /* v0.37.9.601 — sticky table head (pins under the app header while scrolling) */
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: inset 0 -2px 0 var(--border);   /* keep the separator visible while pinned */
}
.data-table thead th:first-child { border-start-start-radius: 12px; }
.data-table thead th:last-child  { border-start-end-radius: 12px; }
.data-table tbody td {
  padding: 11px 10px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}
/* 🦓 v813 — زيبرا هوية خفيفة لكل الجداول + حومان بالهوية (audited/inactive
   تاليان فيغلبان بالترتيب) */
.data-table tbody tr:nth-child(even) { background: #fbfefc; }
.data-table tbody tr:hover { background: #ecfdf5; }
.data-table tbody tr.audited { background: #f0fdf4; }
/* 💳 Payment Methods tree — visual audit lock (root + child) */
.pm-tree-root.audited { background: linear-gradient(135deg,#f0fdf4,#dcfce7) !important; border-color: #22c55e !important; }
.pm-tree-root.audited > div:first-child::after,
.pm-tree-child.audited::after {
  content: '🔒'; margin-inline-start: 6px; font-size: 12px;
}
.pm-tree-child.audited { background: #f0fdf4 !important; }
/* 📑 Document Types tree — visual audit lock (root + child) */
.doc-tree-root.audited { background: linear-gradient(135deg,#f0fdf4,#dcfce7) !important; border-color: #22c55e !important; }
.doc-tree-root.audited > div:first-child::after,
.doc-tree-child.audited::after {
  content: '🔒'; margin-inline-start: 6px; font-size: 12px;
}
.doc-tree-child.audited { background: #f0fdf4 !important; }
/* 🌳 v813 — سلّم موحّد: فروع شجرتَي المستندات وطرق الدفع L3 وحومانها L1
   (المرفوض/الشاذ الملوَّن inline يبقى غالباً بطبيعته) */
.doc-tree-child, .pm-tree-child { background: var(--el-tree-l3); }
.doc-tree-child:hover, .pm-tree-child:hover { background: var(--el-tree-l1); }
.data-table tbody tr.inactive { opacity: 0.55; background: #fafafa; }

/* ─────────────────────────────────────────────────────────────────────
 * 🔒 Audited-record lock — central enforcement
 *
 * Applies to ANY container marked .audited (table rows, company cards,
 * COA / cost-center tree rows, future custom containers via
 * [data-audit-container]).
 *
 * Inside an audited container every interactive element is disabled
 * EXCEPT:
 *   • Buttons inside .rec-actions (RECORD_ACTIONS already filters
 *     view / history / print / note as the only ones shown after audit)
 *   • The audit checkbox itself (marked with [data-audit-self])
 *   • Read-only navigation pills (e.g. "open journal entry")
 * ─────────────────────────────────────────────────────────────────────*/
.audited button:not(.rec-actions button):not([data-audit-allow]):not([data-audit-self]):not([data-rec-audit-btn]):not(.modal-close):not([data-modal-close]):not(.pill-info):not([data-jv]):not([data-tpl-pick]):not(.co-attach-btn):not(.emp-attach-btn.view):not([data-co-view-attachments]):not([data-fa-view-attachments]):not([data-jv-view-attachments]):not([data-pv-view-attachments]):not([data-rv-view-attachments]):not([data-pi-view-attachments]):not([data-cli-view-attachments]):not([data-sup-view-attachments]):not([data-att-view]):not([data-co-att-view]):not([data-attach-view]):not([data-jv-att]):not([data-tr-view-attachments]):not([data-si-view-attachments]):not([data-attach-act="view"]):not([data-attach-act="download"]):not([data-co-att-download]):not([data-co-att-open]):not([data-co-att-down]),
.audited input:not([data-audit-self]):not([type="hidden"]),
.audited select:not([data-audit-self]),
.audited textarea:not([data-audit-self]),
.audited [role="button"]:not(.rec-actions [role="button"]):not([data-audit-allow]):not([data-audit-self]):not(.modal-close):not(.co-attach-btn):not(.emp-attach-btn) {
  opacity: 0.45 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  user-select: none;
}
/* 📎 GLOBAL Attachment-view exemption — applies to ALL screens. Attachment
 *    viewing is a read-only side action so it stays clickable even when the
 *    row is audited. The buttons live in tables with various data-* prefixes
 *    (co-/fa-/jv-/pv-/rv-/pi-/cli-/sup-/si-/tr-) and inside modals
 *    (.emp-attach-btn.view with data-attach-act="view"). */
.audited .co-attach-btn,
.audited .emp-attach-btn.view,
.audited .emp-attach-btn.down,
.audited [data-attach-act="view"],
/* v0.37.9.646 — downloading is as read-only as viewing: an audited record
   must still hand its files over, under their original names. */
.audited [data-attach-act="download"],
.audited [data-co-att-download],
.audited [data-co-att-open],
.audited [data-co-att-down],
.audited [data-co-view-attachments],
.audited [data-co-att-view],
.audited [data-fa-view-attachments],
.audited [data-jv-view-attachments],
.audited [data-jv-att],
.audited [data-pv-view-attachments],
.audited [data-rv-view-attachments],
.audited [data-pi-view-attachments],
.audited [data-si-view-attachments],
.audited [data-tr-view-attachments],
.audited [data-cli-view-attachments],
.audited [data-sup-view-attachments],
.audited [data-attach-view],
.audited [data-att-view] {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: auto !important;
}
/* Block the DELETE button on attachments when audited — only viewing is OK */
.audited .emp-attach-btn.delete,
.audited [data-attach-act="delete"] {
  opacity: 0.45 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* 🆕 v0.37.9.356 — UNIVERSAL SAFE-ZONE EXEMPTION
 *
 * Any element marked [data-rec-allow] (or any descendant of such an element)
 * is fully interactive even when its modal carries the .audited / .view-only
 * lock. This lets screen authors carve out a "safe zone" — e.g. an extra
 * attachments uploader on an approved receipt — without having to remember
 * every CSS exemption attribute (data-audit-self / data-audit-allow / etc).
 *
 * The JS layer in record_actions.js already exempts [data-rec-allow] from
 * the click filter, keyboard guard, and hard-lock; this CSS rule closes the
 * matching visual gap so the elements don't appear dimmed/disabled. */
.audited [data-rec-allow],
.audited [data-rec-allow] *,
.modal-backdrop.view-only [data-rec-allow],
.modal-backdrop.view-only [data-rec-allow] * {
  opacity: 1 !important;
  pointer-events: auto !important;
  user-select: auto !important;
}
.audited [data-rec-allow] input,
.audited [data-rec-allow] textarea,
.audited [data-rec-allow] select,
.modal-backdrop.view-only [data-rec-allow] input,
.modal-backdrop.view-only [data-rec-allow] textarea,
.modal-backdrop.view-only [data-rec-allow] select {
  cursor: text !important;
}
.audited [data-rec-allow] button,
.audited [data-rec-allow] label,
.audited [data-rec-allow] [role="button"],
.modal-backdrop.view-only [data-rec-allow] button,
.modal-backdrop.view-only [data-rec-allow] label,
.modal-backdrop.view-only [data-rec-allow] [role="button"] {
  cursor: pointer !important;
}

/* 🆕 Modal-wide Read-Only Mode — strong visual distinction
 *    Applied when modal opens with __viewOnly or for audited records.
 *    All inputs/selects/textareas are visually locked + native attribute-locked. */
.modal-readonly form[data-viewonly] input:not([type="hidden"]),
.modal-readonly form[data-viewonly] select,
.modal-readonly form[data-viewonly] textarea {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  user-select: text !important;
}
.modal-readonly form[data-viewonly] input[type="checkbox"],
.modal-readonly form[data-viewonly] input[type="radio"] {
  opacity: 0.6;
  pointer-events: none !important;
}
.modal-readonly form[data-viewonly] label {
  color: #475569 !important;
}
.modal-readonly form[data-viewonly] button:not([data-audit-allow]):not(.modal-close):not(.co-attach-btn):not(.emp-attach-btn.view):not([data-attach-act="view"]) {
  opacity: 0.45 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}
.modal-readonly form[data-viewonly] *[data-attach-act="delete"],
.modal-readonly form[data-viewonly] .emp-attach-btn.delete {
  display: none !important;
}
/* Visual top-bar accent strip on the modal */
.modal-readonly { position: relative; }
.modal-readonly::before {
  content: ''; position: absolute; top: 0; inset-inline: 0; height: 4px;
  background: linear-gradient(90deg, #dc2626, #f97316, #eab308, #f97316, #dc2626);
  background-size: 200% 100%;
  animation: ro-pulse 3s linear infinite;
  z-index: 10; border-radius: 12px 12px 0 0;
}
@keyframes ro-pulse {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* 🆕 Customer 360° audit-lock badge */
.cli-audit-lock-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #dc2626, #f87171);
  color: #fff; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
  box-shadow: 0 2px 6px rgba(220,38,38,0.25);
}

/* 🔓 Close (✕) and Cancel buttons stay interactive in view-only mode.
 *
 * ⚠️ The `.audited button:not(…):not(…):not(…)…` rule above has 8 :not()
 *    clauses → effective specificity ~ 0,9,1. To override it via CSS
 *    we need an equal-or-higher specificity. We use compound selectors
 *    on the same backdrop (.modal-backdrop.audited.view-only) plus the
 *    fully-qualified button selector to reach roughly 0,10,1 — winning
 *    by a hair. The JS in `_forceEnableClose` is the bulletproof
 *    fallback (inline-style !important).
 */
.modal-backdrop.view-only button.modal-close,
.modal-backdrop.audited.view-only button.modal-close,
.modal-backdrop.audited.view-only .modal-header button.modal-close,
.modal-backdrop.audited.view-only .modal-footer button.btn.btn-outline,
.modal-backdrop.audited.view-only [data-modal-cancel],
.audited .modal-header button.modal-close,
.audited .modal-footer button.btn.btn-outline {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  filter: none !important;
  user-select: auto !important;
}
/* Pills that are pure navigation (e.g., "📖 القيد", attachments viewer)
 * should remain clickable so the user can still NAVIGATE from an audited
 * record — they don't modify the record. */
.audited .pill.pill-info,
.audited .pill.pill-purple,
.audited .co-attach-btn,
.audited [data-audit-allow="nav"] {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* The audit checkbox itself must remain interactive (so the user can
 * un-audit later if they hold the permission — gating to be enforced by
 * the future Settings → Roles screen). */
.audited [data-audit-self],
.audited [data-rec-audit-btn] {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* Visual cue for audited company cards (soft yellow tint) */
.co-card.audited { background: #fffbeb; box-shadow: inset 0 0 0 2px #fcd34d; }

/* 🚀 INSTANT lock for RECORD_ACTIONS buttons — when the audit checkbox
 * is toggled, these buttons swap IMMEDIATELY without re-rendering the row.
 * Three lock modes:
 *   data-rec-lock="hide"               → visible by default, hidden when audited
 *   data-rec-lock="show-when-audited"  → hidden by default, visible when audited
 *   data-rec-always                    → always visible (used for navigation extras)
 *
 * The View ↔ Edit swap is implemented this way: the Edit button carries
 * "hide" and the View button carries "show-when-audited", so they occupy
 * the SAME slot in the action grid — one disappears the moment the other
 * appears, with no re-render. They are mutually exclusive by design. */
.audited [data-rec-lock="hide"] {
  display: none !important;
}
[data-rec-lock="show-when-audited"] {
  display: none !important;
}
.audited [data-rec-lock="show-when-audited"] {
  display: inline-flex !important;
}

/* 🆕 v0.37.9.20 — UNCONDITIONAL Duplicate visibility (defense-in-depth).
 *   Any action button whose title contains "Duplicate" / "تكرار" / "نسخ"
 *   stays visible even when the row is audited. This is a CSS-level safety
 *   net in case a screen forgets the `alwaysShow` flag or uses a mutating
 *   cls (e.g. cls:'edit') for visual styling. Duplicate creates a NEW
 *   draft record and never mutates the source. */
.audited [title*="تكرار"],
.audited [title*="نسخ"],
.audited [title*="Duplicate" i],
.audited [title*="Copy" i] {
  display: inline-flex !important;
}

/* ─── 🔒 View-only modal — opened when clicking 👁️ on an audited record ─
 *
 * The modal backdrop carries `.audited.view-only` so existing audit-lock
 * rules disable the inputs. We also need to:
 *   1) Hide the save / submit buttons (the user is just viewing)
 *   2) Hide DELETE buttons inside the modal
 *   3) Show a clear "Read-only" badge in the header
 *
 * Save-button detection rules — covers all primary actions across screens:
 *   - button[type="submit"]
 *   - .btn-primary-action
 *   - [data-action="save"] / [data-action="save-settings"]
 *   - Buttons whose explicit attribute marks them as save / submit
 * Buttons explicitly marked safe with [data-rec-allow] are kept visible
 * (so screens can opt-in: e.g., a "📋 Copy" action, a tab switch button).
 * ──────────────────────────────────────────────────────────────────── */
.modal-backdrop.view-only button[type="submit"],
.modal-backdrop.view-only .btn-primary-action,
.modal-backdrop.view-only [data-action="save"],
.modal-backdrop.view-only [data-action="save-settings"],
.modal-backdrop.view-only .btn-primary[type="submit"],
.modal-backdrop.view-only .btn-success[type="submit"] {
  display: none !important;
}
.modal-backdrop.view-only [data-rec-allow] {
  display: inline-flex !important;
}

/* 🔒 Visual cue for fields that were programmatically locked when the
 * modal opened in view-only mode. They look frozen (light gray fill,
 * dashed border) so the user immediately sees they're not editable. */
.modal-backdrop.view-only [data-arttop-locked],
.modal-backdrop.view-only [data-arttop-locked-ce] {
  /* 🎨 v1207 — `background-color` لا `background`: الاختصارُ يُصفّر صورةَ الخلفية
     فيمحو سهمَ القائمة المنسدلة المرسوم (طبقةُ الموارد البشرية). اللونُ هو المقصود. */
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
  cursor: not-allowed !important;
  user-select: text;
}
.modal-backdrop.view-only [data-arttop-locked]:focus,
.modal-backdrop.view-only [data-arttop-locked-ce]:focus {
  outline: 2px dashed #94a3b8 !important;
  outline-offset: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════
   NOTES — Card-style conversation view (matches reference design)
   ═══════════════════════════════════════════════════════════════════════ */
/* Smart stats dashboard grid */
.nt-stats-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1.4fr 1.3fr;
  gap: 10px;
  margin-bottom: 14px;
}
.nt-stats-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.nt-stats-title {
  font-size: 12px; font-weight: 800; color: #475569;
  margin-bottom: 10px; letter-spacing: 0.2px;
}
.nt-mini-stat {
  display: flex; align-items: center; gap: 6px;
  border: 1.5px solid;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 11px;
}
.nt-mini-stat .ic { font-size: 18px; }
.nt-mini-stat .v { font-size: 14px; font-weight: 900; color: #0f172a; line-height: 1.05; font-family: 'SF Mono', Menlo, monospace; }
.nt-mini-stat .l { font-size:10.5px; color: #475569; font-weight: 700; margin-top: 1px; }

/* Smart subtab bar */
.nt-subtabs-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.nt-subtab {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f8fafc;
  border: 1.5px solid transparent;
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 800;
  color: #475569; cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
}
.nt-subtab:hover { background: #e2e8f0; color: #0f172a; transform: translateY(-1px); }
.nt-subtab.active { background: linear-gradient(135deg, #014034, #047857); color: #fff; box-shadow: 0 4px 12px rgba(1,64,52,0.25); }
.nt-subtab-count {
  background: rgba(255,255,255,0.85);
  color: inherit;
  font-size: 10.5px; font-weight: 900;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 20px; text-align: center;
  font-family: 'SF Mono', Menlo, monospace;
}
.nt-subtab:not(.active) .nt-subtab-count {
  background: #e2e8f0; color: #475569;
}

/* View switch */
.nt-view-switch {
  display: inline-flex; background: #f1f5f9;
  border: 1.5px solid #cbd5e1; border-radius: 8px;
  padding: 2px;
}
.nt-view-switch button {
  background: transparent; border: 0;
  padding: 6px 12px; border-radius: 6px;
  font-size: 14px; cursor: pointer; color: #64748b;
}
.nt-view-switch button.active { background: #fff; color: #0f172a; box-shadow: 0 2px 6px rgba(15,23,42,0.1); }

/* Avatars */
.nt-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: #fff; font-weight: 900; font-size: 12px;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  font-family: 'Inter', sans-serif;
}
.nt-avatar-more { background: #94a3b8; font-size:10.5px; }
.nt-avatar-group { display: inline-flex; }
.nt-avatar-group .nt-avatar:not(:first-child) {
  margin-inline-start: -8px;
}

/* 👁 View (full viewer) button */
.nt-view-btn {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: 0;
  border-radius: 50%;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  color: #fff;
  box-shadow: 0 2px 6px rgba(245,158,11,0.3);
}
.nt-view-btn:hover { transform: scale(1.08); box-shadow: 0 4px 10px rgba(245,158,11,0.45); }

/* Full Note Viewer Modal */
.nt-view-route {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.nt-view-content {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 14.5px; line-height: 1.75;
  color: #0f172a;
  white-space: pre-wrap;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.nt-view-section { margin-top: 16px; }
.nt-view-section-title {
  font-size: 12.5px; font-weight: 800; color: #475569;
  text-transform: uppercase; letter-spacing: 0.3px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid #e2e8f0;
}
.nt-view-att-list { display: flex; flex-direction: column; gap: 6px; }
.nt-view-att {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  text-decoration: none;
  transition: all 0.15s;
}
.nt-view-att:hover { border-color: #3b82f6; background: #eff6ff; transform: translateY(-1px); }

.nt-view-thread {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.nt-view-reply {
  background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
  border-inline-start: 4px solid #14b8a6;
  border-radius: 8px;
  padding: 10px 14px;
}
.nt-view-reply.nt-reply-system {
  background: #f1f5f9;
  border-inline-start-color: #94a3b8;
  font-style: italic;
  opacity: 0.85;
}
.nt-view-reply-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px; flex-wrap: wrap; gap: 6px;
}
.nt-view-reply-body {
  font-size: 13px; color: #134e4a; line-height: 1.7;
  white-space: pre-wrap;
}

.nt-view-meta { background: #f8fafc; border-radius: 10px; padding: 12px 14px; }
.nt-view-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.nt-view-meta-grid > div {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11.5px;
}
.nt-view-meta-grid span { color: #64748b; font-weight: 700; }
.nt-view-meta-grid strong { color: #0f172a; font-weight: 800; }

/* Pin button */
.nt-pin-btn {
  background: #f1f5f9; border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  opacity: 0.5;
  filter: grayscale(0.6);
}
.nt-pin-btn:hover { opacity: 0.95; transform: scale(1.08); }
.nt-pin-btn.active {
  background: linear-gradient(135deg, #fde68a, #fcd34d);
  border-color: #d97706;
  opacity: 1;
  filter: none;
  transform: rotate(-12deg);
}

/* Flag strip (Pinned / Needs reply / Stale) */
.nt-card-flags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.nt-flag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
}
.nt-flag-pin   { background: linear-gradient(135deg, #fde68a, #fcd34d); color: #92400e; }
.nt-flag-needs { background: linear-gradient(135deg, #fee2e2, #fca5a5); color: #991b1b; animation: nt-pulse 2s infinite; }
.nt-flag-stale { background: linear-gradient(135deg, #fed7aa, #fdba74); color: #9a3412; }
@keyframes nt-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Pinned card highlight */
.nt-card.nt-pinned {
  border-color: #fcd34d;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  box-shadow: 0 4px 12px rgba(217,119,6,0.15);
}
/* Stale card highlight */
.nt-card.nt-stale:not(.nt-closed) {
  border-inline-start-color: #047857;
}
.nt-card.nt-needs-reply:not(.nt-closed) {
  border-inline-start-color: #dc2626;
  box-shadow: 0 0 0 1px #fca5a5;
}

/* Compact view */
.nt-card.nt-compact { padding: 10px 14px; }
.nt-card.nt-compact .nt-card-body { display: none; }
.nt-card.nt-compact .nt-replies { display: none; }
.nt-card.nt-compact .nt-card-attach { display: none; }
.nt-card.nt-compact .nt-card-actions { padding-top: 6px; margin-top: 4px; }

/* Stats responsive */
@media (max-width: 1100px) {
  .nt-stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .nt-stats-grid { grid-template-columns: 1fr; }
}

/* 🔍 Search highlight */
.nt-mark {
  background: #fef08a;
  color: #713f12;
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 800;
}

/* 🗺️ Conversation network graph */
.nt-node:hover circle { stroke-width: 4; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)); }
.nt-node:hover text { font-size: 14px; }

/* 🗺️ Ownership network nodes */
.co-net-node { cursor: pointer; }
.co-net-node:hover circle,
.co-net-node:hover rect { stroke-width: 4; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)); }

/* 🌡️ Activity heatmap grid */
.nt-heat-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(7, 12px);
  gap: 1px;
}
.nt-heat-cell { border-radius: 2px; transition: transform 0.15s; }
.nt-heat-cell:hover { transform: scale(1.4); z-index: 2; outline: 1px solid #fff; }
.nt-heat-day {
  height: 12px; display: flex; align-items: center;
  font-size: 10.5px; font-weight: 700; color: #94a3b8;
}

/* 🔔 Read receipts row */
.nt-read-receipts {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: #f0f9ff;
  border: 1px dashed #bae6fd;
  border-radius: 8px;
  font-size: 11px;
  color: #075985;
  margin-top: 8px;
  flex-wrap: wrap;
}
.nt-read-receipts .nt-avatar { width: 22px; height: 22px; font-size:10.5px; border-width: 1.5px; }
.nt-read-receipts .nt-avatar:not(:first-of-type) { margin-inline-start: -7px; }
.nt-seen-label { font-weight: 700; margin-inline-end: 2px; }

/* 📩 Quick reply inline */
.nt-quick-reply {
  margin-top: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  padding: 4px 10px;
  transition: all 0.15s;
}
.nt-quick-reply details[open] { padding: 10px 12px; background: #fff; border-color: #93c5fd; border-style: solid; box-shadow: 0 4px 12px rgba(15,23,42,0.06); }
.nt-quick-reply summary {
  font-size: 12px;
  font-weight: 800;
  color: #1d4ed8;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  user-select: none;
}
.nt-quick-reply summary::-webkit-details-marker { display: none; }
.nt-quick-reply summary:hover { color: #1e3a8a; }
.nt-quick-text {
  width: 100%;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-family: inherit;
  resize: vertical;
  min-height: 56px;
  margin-top: 6px;
}
.nt-quick-text:focus { outline: 2px solid #93c5fd; outline-offset: 1px; border-color: #3b82f6; }

/* 🎯 Smart template chips */
.nt-quick-templates {
  display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 4px;
}
.nt-template-chip {
  background: #fff;
  border: 1.5px solid #cbd5e1;
  color: #475569;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.nt-template-chip:hover { background: #dbeafe; border-color: #3b82f6; color: #1e40af; transform: translateY(-1px); }

/* @ Mention dropdown */
.nt-mention-wrap { position: relative; }
.nt-mention-dropdown {
  position: absolute;
  inset-block-start: 100%; inset-inline-start: 0;
  background: #fff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.15);
  z-index: 1100;
  min-width: 240px;
  max-height: 260px;
  overflow-y: auto;
  margin-top: 4px;
}
.nt-mention-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 12.5px;
  border-bottom: 1px solid #f1f5f9;
}
.nt-mention-item:hover { background: #eff6ff; }
.nt-mention-item .nt-avatar { width: 22px; height: 22px; font-size:10.5px; border-width: 0; }

/* ☁️ Tag cloud */
.nt-tag-cloud {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  padding: 6px 0;
  line-height: 1.6;
}
.nt-cloud-word {
  color: #1d4ed8;
  font-weight: 700;
  cursor: default;
  transition: all 0.15s;
}
.nt-cloud-word:hover { color: #047857; transform: scale(1.1); }

/* 🤖 Smart AI summary */
.nt-ai-summary {
  background: linear-gradient(135deg, #ede9fe, #f3e8ff);
  border: 1px dashed #c4b5fd;
  border-radius: 8px;
  padding: 6px 12px;
  margin: 8px 0;
}
.nt-ai-summary summary {
  font-weight: 800; color: #5b21b6;
  cursor: pointer; font-size: 11.5px;
  list-style: none;
}
.nt-ai-summary summary::-webkit-details-marker { display: none; }
.nt-ai-pill {
  background: rgba(139,92,246,0.18); color: #5b21b6;
  padding: 1px 7px; border-radius: 999px;
  font-size:10.5px; font-weight: 800;
  margin-inline-start: 6px;
}
.nt-ai-body {
  margin-top: 6px;
  font-size: 11.5px; color: #312e81;
  line-height: 1.6;
  display: flex; flex-direction: column; gap: 6px;
}
.nt-ai-bullet {
  display: flex; gap: 8px; align-items: flex-start;
  background: rgba(255,255,255,0.55);
  border-radius: 6px;
  padding: 6px 10px;
}
.nt-ai-bullet .nt-ai-ic { font-size: 16px; flex-shrink: 0; }
.nt-ai-bullet strong { color: #065f46; }

/* 🎯 Active filter chips bar */
.nt-active-filters {
  display: flex; align-items: center; gap: 10px;
  background: #fff7ed;
  border: 1.5px solid #fdba74;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.nt-filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff;
  border: 1.5px solid #fcd34d;
  color: #9a3412;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.nt-filter-chip:hover { background: #fef3c7; }
.nt-filter-chip .x { color: #dc2626; font-weight: 900; font-size: 14px; margin-inline-start: 2px; }
.nt-clear-all {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff; border: 0;
  padding: 4px 10px; border-radius: 8px;
  font-size: 11px; font-weight: 800;
  cursor: pointer;
}
.nt-stats-mode {
  background: transparent; border: 0;
  padding: 4px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 800; color: #64748b;
  cursor: pointer;
}
.nt-stats-mode.active { background: linear-gradient(135deg, #014034, #047857); color: #fff; }
/* 📊 v810 — شريط لوحة التحليلات القابل للطي بشاشة الملاحظات */
.nt-analytics-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.nt-analytics-toggle{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1.5px solid var(--el-em-200,#a7f3d0);color:var(--el-teal-800,#014034);
  border-radius:10px;padding:8px 14px;font-weight:800;font-size:12.5px;font-family:inherit;
  cursor:pointer;transition:border-color .15s, background .15s}
.nt-analytics-toggle:hover{background:var(--el-em-50,#ecfdf5);border-color:var(--el-em-400,#34d399)}
.nt-analytics-count{background:var(--el-em-50,#ecfdf5);color:var(--el-em-800,#065f46);
  border-radius:999px;padding:1px 9px;font-size:10.5px;font-weight:800}
.nt-analytics-hint{font-size:11px;color:#94a3b8;font-weight:700}
.nt-analytics[hidden]{display:none}
/* مؤشّرات خاملة بذيل شريط التبويبات — ليست أزراراً (v638/v661) */
.nt-ind{display:inline-flex;align-items:center;gap:5px;background:#f8fafc;border:1px dashed #cbd5e1;
  color:#475569;border-radius:999px;padding:5px 11px;font-size:11px;font-weight:800;
  cursor:default;user-select:none;margin-inline-start:auto}
.nt-ind ~ .nt-ind{margin-inline-start:0}
/* 👁/📌 v810 — مصفوفة أيقونات موحّدة برأس البطاقة: مقاس وحدود وحوم واحدة */
.nt-view-btn, .nt-pin-btn{width:30px;height:30px;border-radius:8px;display:inline-flex;
  align-items:center;justify-content:center;font-size:14px;border:1.5px solid #e2e8f0;
  background:#fff;cursor:pointer;transition:border-color .15s, background .15s, transform .12s;
  box-shadow:none}
.nt-view-btn:hover, .nt-pin-btn:hover{border-color:var(--el-em-400,#34d399);
  background:var(--el-em-50,#ecfdf5);transform:none;box-shadow:none}
.nt-pin-btn.active{background:var(--el-em-50,#ecfdf5);border-color:var(--el-em-700,#047857)}


/* Date range filter */
.nt-date-range {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; border: 1.5px solid #cbd5e1;
  border-radius: 8px; padding: 4px 8px;
  font-size: 11px; color: #475569; font-weight: 700;
}
.nt-date-range input { border: 0; font-size: 12px; font-family: inherit; outline: 0; }

/* 📊 Poll widget on a note card */
.nt-poll {
  background: linear-gradient(135deg, #faf5ff, #f3e8ff);
  border: 1.5px solid #c4b5fd;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0;
}
.nt-poll-q {
  font-size: 12.5px; font-weight: 800; color: #5b21b6;
  margin-bottom: 8px;
}
.nt-poll-opt {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff;
  border: 1.5px solid #ddd6fe;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 4px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  font-size: 12px;
  color: #312e81;
  transition: all 0.15s;
  overflow: hidden;
}
.nt-poll-opt:hover { border-color: #8b5cf6; }
.nt-poll-opt.voted {
  border-color: #7c3aed; background: #ede9fe;
  font-weight: 800;
}
.nt-poll-bar {
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  background: rgba(139,92,246,0.18);
  transition: width 0.4s;
}
.nt-poll-opt.voted .nt-poll-bar { background: rgba(124,58,237,0.32); }
.nt-poll-label { position: relative; z-index: 1; flex: 1; text-align: start; }
.nt-poll-meta { position: relative; z-index: 1; color: #5b21b6; font-weight: 800; }
.nt-poll-foot { font-size: 10.5px; color: #6d28d9; margin-top: 6px; text-align: center; }

/* Voice button when active */
.nt-voice-btn { transition: all 0.15s; }
.nt-voice-btn:hover { background: #fecaca !important; }

/* 🎤 Voice wave animation for the reply modal */
@keyframes ntpulse {
  0%,100% { transform: scaleY(1); opacity: 0.6; }
  50% { transform: scaleY(0.5); opacity: 1; }
}

.nt-list { display: flex; flex-direction: column; gap: 12px; }
.nt-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
  transition: all 0.18s;
  position: relative;
}
.nt-card:hover { box-shadow: 0 6px 18px rgba(15,23,42,0.08); border-color: #cbd5e1; }
.nt-card.nt-open {
  border-inline-start: 4px solid #16a34a;
}
.nt-card.nt-closed {
  border-inline-start: 4px solid #64748b;
  opacity: 0.85;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}
.nt-card.audited { background: #fffbeb; box-shadow: inset 0 0 0 2px #fcd34d; }

.nt-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.nt-card-route {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #334155;
  flex-wrap: wrap;
}
.nt-card-route .nt-label { color: #64748b; font-weight: 600; font-size: 12px; }
.nt-card-route strong { color: #0f172a; font-weight: 800; }
.nt-card-route .nt-arrow { color: #94a3b8; margin: 0 4px; font-weight: 800; }

.nt-status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800;
  white-space: nowrap;
}
.nt-status-pill.open { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.nt-status-pill.closed { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }

.nt-card-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: #64748b;
  margin-bottom: 8px; flex-wrap: wrap;
}
.nt-pin { font-size: 14px; }
.nt-type { font-weight: 700; color: #475569; }
.nt-date { margin-inline-start: auto; font-family: 'SF Mono', Menlo, monospace; color: #64748b; }
.nt-prio { font-weight: 800; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; }
.nt-prio-high { background: #fee2e2; color: #991b1b; }
.nt-prio-low  { background: #dbeafe; color: #1e40af; }
.nt-replies-badge {
  background: #ede9fe; color: #5b21b6;
  font-weight: 800; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px;
}

.nt-card-title { font-size: 14.5px; color: #0f172a; margin-bottom: 4px; }
.nt-card-body {
  font-size: 13.5px; color: #1e293b;
  line-height: 1.65; white-space: pre-wrap;
  margin-bottom: 8px;
}
.nt-card-attach {
  display: inline-block; background: #ede9fe; color: #5b21b6;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  margin-bottom: 8px;
}

/* Replies thread */
.nt-replies {
  margin: 12px 0 6px;
  display: flex; flex-direction: column; gap: 8px;
}
.nt-reply {
  background: #f0fdfa;
  border-inline-start: 3px solid #14b8a6;
  border-radius: 8px;
  padding: 10px 12px;
}
.nt-reply-meta {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: #0f766e; font-weight: 700;
  margin-bottom: 4px;
}
.nt-reply-body { font-size: 12.5px; color: #134e4a; white-space: pre-wrap; line-height: 1.55; }
.nt-reply-att { font-size: 10.5px; color: #0f766e; margin-top: 4px; font-weight: 700; }

/* Action buttons row */
.nt-card-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}
.nt-act {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  border: 1.5px solid transparent;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.nt-act:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,0.12); }
.nt-act:disabled { opacity: 0.45; cursor: not-allowed; }
.nt-act-reply  { background: linear-gradient(135deg, #0d9488, #14b8a6); color: #fff; }
.nt-act-close  { background: linear-gradient(135deg, #15803d, #16a34a); color: #fff; }
.nt-act-assign { background: linear-gradient(135deg, #115e59, #0f766e); color: #fff; }
.nt-act-delete { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; }
.nt-act-reopen {
  background: linear-gradient(135deg, #b45309, #f59e0b);
  color: #fff;
  position: relative;
}
.nt-act-reopen.perm-locked {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  cursor: not-allowed;
}
.nt-act-reopen.perm-locked:hover { transform: none; box-shadow: none; filter: brightness(1.04); }
.nt-perm-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 11px; font-weight: 800;
  margin-inline-start: 4px;
}

/* Choice cards in the reply modal */
.nt-choice-card:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* "🔒 Read-only" badge inserted into the modal header */
.rec-view-badge {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.22);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.32);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.2px;
  margin-inline-start: auto;
  margin-inline-end: 12px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.data-table .col-actions { white-space: nowrap; text-align: center; }
.data-table .col-num { font-feature-settings: "tnum" 1; text-align: center; width: 50px; color: var(--text-muted); font-weight: 700; }
.data-table .col-check { text-align: center; width: 40px; }

/* Status Pills */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
.pill-success { background: #d1fae5; color: #065f46; }
.pill-warning { background: #fef3c7; color: #92400e; }
.pill-danger { background: #fee2e2; color: #991b1b; }
.pill-info { background: #dbeafe; color: #1e40af; }
.pill-gray { background: #f3f4f6; color: #374151; }
.pill-purple { background: #ede9fe; color: #5b21b6; }

/* ────────────────────────────────────────────────────────────────────
   Work-locations modal — interactive Leaflet/OSM map with draggable pin
   ──────────────────────────────────────────────────────────────────── */
.loc-map {
  height: 360px;
  width: 100%;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  background: #e5f2f5;
  margin-top: 4px;
}
.loc-map-hint {
  margin-top: 8px;
  padding: 8px 12px;
  background: #ecfeff;
  border: 1px dashed #67e8f9;
  border-radius: 8px;
  font-size: 12px;
  color: #155e75;
  font-weight: 600;
  line-height: 1.5;
}
/* Leaflet's marker shadow looks slightly broken in RTL flow — clip it cleanly */
.loc-map .leaflet-marker-shadow { opacity: 0.55; }
.loc-map .leaflet-control-attribution { font-size: 10.5px; }

/* ────────────────────────────────────────────────────────────────────
   Currency Symbol — new official Saudi Riyal symbol (2025 SAMA design)
   For SAR, CURRENCY_SYMBOL_HTML emits an inline SVG using this class.
   For other ISOs, the helper emits plain 3-letter text in English.
   ──────────────────────────────────────────────────────────────────── */
.sar-sym {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.16em;
  fill: currentColor;
  margin-inline: 1px;
}
.cur-sym {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.cur-sym .sar-sym { color: inherit; }
/* In print: keep currency a bit smaller / aligned with numbers */
@media print {
  .sar-sym { width: 0.9em; height: 0.9em; vertical-align: -0.14em; }
}

/* 🆕 v0.37.9.157 — Action Buttons: single-line elegant inline-flex layout */
.action-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  border-radius: 6px;
  transition: all 0.15s ease;
  margin: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.action-btn:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.10);
  border-color: #cbd5e1;
}
.action-btn.edit:hover     { background: #dbeafe; border-color: #93c5fd; }
.action-btn.delete:hover   { background: #fee2e2; border-color: #fca5a5; }
.action-btn.print:hover    { background: #f3e8ff; border-color: #d8b4fe; }
.action-btn.note:hover     { background: #fef3c7; border-color: #fcd34d; }
.action-btn.toggle:hover   { background: #d1fae5; border-color: #6ee7b7; }
.action-btn.history:hover  { background: #e0e7ff; border-color: #a5b4fc; }
.action-btn.view:hover     { background: #cffafe; border-color: #67e8f9; }

/* 🆕 v0.37.9.158 — 3-icons-per-ROW grid (back to multi-row).
   Keeps the actions column narrow so the table fits the viewport. */
.rec-actions,
.row-actions,
td > div:has(> .action-btn) {
  display: inline-grid !important;
  grid-template-columns: repeat(3, 28px) !important;
  gap: 3px;
  align-items: center;
  justify-items: center;
  justify-content: center;
  vertical-align: middle;
  white-space: normal !important;
  width: max-content;
  margin: 0 auto;
}
/* 📐 v1045 — عنقود الإجراءات هو **أطول خانة في الصفّ** فهو الذي يفرض ارتفاعه:
   سبع أيقونات في ثلاثة أعمدة = ثلاثة صفوف (106px) بينما جارُها بستّ = صفّان (76px)،
   فيخرج الجدول متفاوت الارتفاع «غير منسّق» (بلاغ المالك). العنقود ذو السبع فأكثر يأخذ
   **أربعة أعمدة** فيستقرّ على صفّين كجاره — وما دونه لا يتغيّر فلا يتّسع عمودٌ بلا سبب. */
.rec-actions:has(> :nth-child(7)),
.row-actions:has(> :nth-child(7)),
td > div:has(> .action-btn):has(> :nth-child(7)) {
  grid-template-columns: repeat(4, 28px) !important;
}
/* 📏 v1045 — الحاوية التي لا يسعها جدولها تُمرَّر أفقياً فلا يُقَصّ عمود بلا مخرج
   (يضع الوسمَ `table_polish` بالقياس لا بالتخمين — والحاوية التي تسع جدولها تبقى كما هي). */
.table-wrapper[data-tp-x]{overflow-x:auto;overflow-y:visible}
/* Table column hint — narrow actions column */
td:has(> .rec-actions),
td:has(> .row-actions),
td:has(> div > .action-btn) {
  width: 1%;
  white-space: nowrap;
  padding-inline: 6px !important;
}

/* Forms */
.form-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field label { font-size: 12px; font-weight: 700; color: var(--text); }
/* v0.37.9.515 — required-field marker + invalid highlight */
.defs-req { color: #dc2626; font-weight: 900; margin-inline-start: 2px; }
.field-invalid { outline: 2px solid #dc2626 !important; outline-offset: 1px; border-color: #dc2626 !important; background: #fef2f2 !important; }
/* v0.37.9.518 — live duplicate-finder suggestion box under the Name field */
.dup-suggest { margin-top: 4px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.07); max-height: 220px; overflow-y: auto; background: #fff; }
.dup-suggest-head { font-size: 11px; font-weight: 800; padding: 5px 9px; }
.dup-suggest-head.warn { background: #fef2f2; color: #991b1b; }
.dup-suggest-head.info { background: #eff6ff; color: #1d4ed8; }
.dup-suggest-item { display: flex; align-items: center; gap: 6px; width: 100%; text-align: start; border: none; border-top: 1px solid #f1f5f9; background: #fff; padding: 7px 9px; font-size: 12px; color: #334155; cursor: pointer; }
.dup-suggest-item:hover { background: #f8fafc; }
.dup-open-hint { margin-inline-start: auto; font-size:10.5px; font-weight: 800; color: #0369a1; white-space: nowrap; }
/* v0.37.9.525 — professional modal section quick-nav (sticky chip bar) */
.defs-secnav { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 8px 14px; background: #f8fafc; border-bottom: 1px solid #e5e7eb; flex: 0 0 auto; }
.defs-secnav::-webkit-scrollbar { height: 5px; }
.defs-secnav::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
.defs-secnav-chip { flex: 0 0 auto; border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: 999px; padding: 5px 13px; font-size: 11.5px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: all .15s; }
.defs-secnav-chip:hover { border-color: #94a3b8; color: #1e293b; }
.defs-secnav-chip.active { background: var(--primary, #0d6e5c); color: #fff; border-color: var(--primary, #0d6e5c); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.form-field input,
.form-field select,
.form-field textarea {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  background: white;
  outline: none;
  transition: border-color 0.2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(1,64,52,0.1);
}
.form-field.full { grid-column: 1 / -1; }
.form-help { font-size: 11px; color: var(--text-muted); }

/* Modals */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 20px;
  animation: fadeIn 0.2s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: white;
  border-radius: 16px;
  max-width: 700px; width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 25px 80px rgba(0,0,0,0.3);
  animation: modalIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.modal-lg { max-width: 900px; }
.modal.modal-xl { max-width: 1100px; }
.modal.modal-sm { max-width: 460px; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  display: flex; align-items: center; gap: 12px;
}
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 800; flex: 1; }
.modal-close {
  background: rgba(255,255,255,0.2);
  border: none; color: white;
  width: 32px; height: 32px;
  border-radius: 8px;
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.modal-close:hover { background: rgba(255,255,255,0.3); }
.modal-body {
  padding: 22px;
  overflow-y: auto;
  flex: 1;
  /* Soft neutral canvas with subtle radial highlight so white section cards pop */
  background:
    radial-gradient(circle at 20% 0%, #f8fafc 0%, transparent 55%),
    radial-gradient(circle at 80% 100%, #eff6ff 0%, transparent 55%),
    #ffffff !important;
}
/* ─────────────────────────────────────────────────────────────────────────
   Add-modal section cards — uniform crisp-white "card" look across:
   Chart of Accounts, Journals, Treasury Transfer, Receipts, Payments,
   Sales Invoices, Credit Notes, Fixed Assets, Companies, Employees, etc.
   The original modules apply inline coloured backgrounds — these rules
   override them with !important so users always see a clean white card.
   ─────────────────────────────────────────────────────────────────────── */
.modal .modal-body,
.modal form.modal-body { background: transparent; }

/* 🩹 v849 — نموذج **يلفّ** الجسم والقدم معاً يكسر عمود المرن.
   `.modal` عمود مرن ارتفاعه 90vh، و`.modal-body` يتقلّص ويُمرَّر لأنه ابنه
   المباشر. فإذا لفّهما `<form>` صار هو الابن الوحيد بلا تخطيط، فلا يتقلّص
   الجسم و**تهرب القدم تحت الطيّة ومعها زرّ الحفظ** على شاشة قصيرة.
   القاعدة محصورة بـ`:not(.modal-body)` فلا تمسّ النمط السائد في البرنامج
   (نموذجٌ **هو** الجسم ويحمل صنفه) — تُصلح الحالة المكسورة وحدها. */
.modal > form:not(.modal-body) {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; overflow: hidden;
}

.modal-body .form-section,
.modal-body .form-section-body,
.modal-body .emp-section,
.modal-body section,
.modal-body fieldset {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 14px 16px 12px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
  position: relative;
  overflow: visible;
}
/* Accent left bar — a thin gradient strip differentiates each card without
   tinting the whole background (keeps body crisp white per user request). */
.modal-body .form-section::before,
.modal-body .emp-section::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
  background: linear-gradient(180deg, var(--section-accent, var(--primary, #0d6e5c)), var(--section-accent2, #3b82f6));
}
.modal-body .form-section > h4,
.modal-body .emp-section > h4 {
  margin: 0 0 12px !important;
  padding: 0 0 10px 8px !important;
  border-bottom: 1px dashed #e2e8f0 !important;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Inputs inside white cards — light grey so they stand out on white */
.modal-body .form-field input[type="text"],
.modal-body .form-field input[type="number"],
.modal-body .form-field input[type="date"],
.modal-body .form-field input[type="email"],
.modal-body .form-field input[type="tel"],
.modal-body .form-field select,
.modal-body .form-field textarea,
.modal-body .form-field input[data-amt] {
  background-color: #f8fafc !important;   /* v1207 — لا يُصفَّر سهمُ القائمة */
  border: 1px solid #e2e8f0 !important;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.modal-body .form-field input:focus,
.modal-body .form-field select:focus,
.modal-body .form-field textarea:focus {
  background: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
  outline: none;
}
/* Read-only / disabled inputs keep a clear "computed" tint */
.modal-body .form-field input[readonly],
.modal-body .form-field input:disabled,
.modal-body .form-field select:disabled,
.modal-body .form-field textarea:disabled {
  background: #f1f5f9 !important;
  color: #475569 !important;
  cursor: not-allowed;
}
/* Form section body wrapper (used by some modules) — fully transparent so it
   inherits the white card from .form-section/.emp-section above */
.modal-body .form-section-body { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: #f9fafb;
  display: flex; justify-content: flex-end; gap: 8px;
}

/* Toasts */
.toast-container {
  position: fixed;
  top: calc(var(--copyright-h) + 80px);
  /* v1203 — كانت 300 فتختبئ خلف كل مودال (مودالُ المشاريع 1500 · المودالاتُ العامّة حتى 12000): تنبيهُ قصّ الكمية ظهر خلف
     مودال المستخلص (لقطة المالك). الطبقةُ فوق كل خلفيات المودالات وتحت طبقات الطباعة والتحميل الكاملة. */
  z-index: 20000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
html[dir="rtl"] .toast-container { left: 20px; }
html[dir="ltr"] .toast-container { right: 20px; }
.toast {
  background: white;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: var(--shadow-lg);
  border-inline-start: 4px solid var(--info);
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  min-width: 280px; max-width: 400px;
  pointer-events: all;
  animation: toastIn 0.3s;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--danger); }
.toast.warning { border-color: var(--warning); }
.toast .toast-icon { font-size: 20px; }
.toast .toast-msg { flex: 1; }

/* Tabs */
.tabs {
  display: flex; gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tab {
  padding: 10px 16px;
  font-size: 13px; font-weight: 700;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  margin-bottom: -2px;
}
.tab:hover { color: var(--primary); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.empty-state .empty-icon { font-size: 50px; margin-bottom: 12px; }
.empty-state .empty-text { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.empty-state .empty-sub { font-size: 12px; }

/* Misc */
.search-box {
  position: relative;
  display: flex; align-items: center;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  flex: 1; min-width: 200px; max-width: 400px;
}
.search-box:focus-within { border-color: var(--primary); }
.search-box input {
  flex: 1;
  border: none; background: transparent;
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
}
.search-box .search-icon { padding: 0 10px; color: var(--text-muted); }

.checkbox-cell {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #2563eb;   /* Bold blue ✓ (Companies-screen match) */
  vertical-align: middle;
  /* 🆕 v0.37.9.201 — Keep full opacity even when row is .audited
     (data-audit-self also exempts it from the disable rule). */
  opacity: 1 !important;
}
/* Force the checkbox to stay fully clickable and colored even inside
   .audited rows (defense-in-depth alongside data-audit-self). */
.audited .checkbox-cell,
tr.audited .checkbox-cell {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  accent-color: #2563eb !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   📅 v0.37.9.190 — Force English (dd/mm/yyyy) display on all date inputs
   ───────────────────────────────────────────────────────────────────────
   The page is lang="ar", which makes browsers render <input type="date">
   placeholders as "يوم/شهر/سنة". We want clean "dd/mm/yyyy" everywhere.
   The JS in app.js adds lang="en-GB" on every such input; these CSS rules
   provide the LTR alignment so the field reads naturally.
   ═══════════════════════════════════════════════════════════════════════ */
/* v0.37.9.213 — Hardened: force LTR on attribute + element + every webkit
   datetime sub-field. This breaks the inherited dir="rtl" cascade. */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="date"][dir="ltr"],
input[type="datetime-local"][dir="ltr"],
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="datetime-local"],
html[dir="rtl"] input[type="month"],
html[dir="rtl"] input[type="time"],
html[dir="rtl"] input[type="week"] {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
}
/* Force LTR on every webkit datetime sub-field so segments order as dd/mm/yyyy */
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit,
input[type="week"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="datetime-local"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="datetime-local"]::-webkit-datetime-edit-day-field,
input[type="datetime-local"]::-webkit-datetime-edit-month-field,
input[type="datetime-local"]::-webkit-datetime-edit-year-field {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: left !important;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════
   🛠️ v0.37.9.186 — RED PULSING "Quick Edit" — attention-grabbing
   ───────────────────────────────────────────────────────────────────────
   Hot-red gradient + continuous pulse animation so the user can't miss
   it on an audited row. Distinct from blue (regular edit) and yellow
   (warnings) — only appears on locked records and grabs the eye.
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes qeRedPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.85),
                0 3px 10px rgba(220, 38, 38, 0.55);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0),
                0 5px 14px rgba(220, 38, 38, 0.75);
    transform: scale(1.06);
  }
}
.action-btn.qe-red-pulse {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 45%, #ef4444 100%) !important;
  color: #fff !important;
  border: 1.5px solid #fca5a5 !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(220, 38, 38, 0.55) !important;
  animation: qeRedPulse 1.6s ease-in-out infinite !important;
  position: relative;
}
.action-btn.qe-red-pulse:hover {
  background: linear-gradient(135deg, #991b1b, #dc2626) !important;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.85) !important;
  animation-play-state: paused !important;
  transform: scale(1.12) !important;
}
/* Critical: keep it interactive on audit-locked rows */
.audited .action-btn.qe-red-pulse,
.row-auditable.audited .action-btn.qe-red-pulse {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   🔵 v0.37.9.184 — Central-lock checkbox: NATIVE browser checkbox styled
   ───────────────────────────────────────────────────────────────────────
   The OLD rec-lock-check rules were REMOVED — they applied appearance:none
   which killed accent-color and prevented the browser from rendering the
   default ✓ check inside the box. Now we let the browser render natively
   with accent-color (set inline in record_actions.js), exactly like the
   Companies screen does. This guarantees the blue ✓ matches everywhere.
   ═══════════════════════════════════════════════════════════════════════ */

.print-area { padding: 16px; }

/* RTL/LTR specific tweaks */
html[dir="ltr"] body { text-align: left; }
html[dir="ltr"] .copyright-bar { flex-direction: row-reverse; }

/* ═══════════════════════════════════════════════════════════════════════
   EMPLOYEES SCREEN — Specific styles
   ═══════════════════════════════════════════════════════════════════════ */
.emp-hero {
  background: linear-gradient(90deg, #014034, #047857 55%, #10b981);
  border-radius: 16px;
  color: white;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.emp-hero-row {
  padding: 16px 20px;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 12px;
}
.emp-hero-title { display: flex; align-items: center; gap: 12px; }
.emp-hero-icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.2);
  border-radius: 12px;
  font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.emp-hero-title h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; }
.emp-hero-title p { margin: 4px 0 0; font-size: 12px; opacity: 0.9; }
.emp-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-emp-action {
  background: rgba(255,255,255,0.15);
  border: none; color: white;
  padding: 8px 14px; border-radius: 8px;
  font-weight: 600; font-size: 13px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 0.2s;
}
.btn-emp-action:hover { background: rgba(255,255,255,0.25); }
.btn-emp-add {
  background: white; color: #014034;   /* v833 — كان برتقالياً */
  border: none; padding: 9px 16px;
  border-radius: 8px; font-weight: 800; font-size: 13px;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.2s;
}
.btn-emp-add:hover { background: #ecfdf5; transform: translateY(-1px); }

.emp-kpi-bar {
  background: rgba(0,0,0,0.15);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 10px 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  text-align: center;
}
@media (min-width: 640px) { .emp-kpi-bar { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .emp-kpi-bar { grid-template-columns: repeat(8, 1fr); } }
.emp-kpi { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.emp-kpi-icon { font-size: 16px; }
.emp-kpi-label { font-size:10.5px; opacity: 0.85; }
.emp-kpi-value { font-size: 14px; font-weight: 800; }

/* Pill tabs */
.emp-tabs-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 6px;
  margin-bottom: 14px;
}
.emp-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
@media (min-width: 640px) { .emp-tabs { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .emp-tabs { grid-template-columns: repeat(8, 1fr); } }
.emp-tab-btn {
  background: transparent;
  border: none; color: #6b7280;
  padding: 9px 8px; border-radius: 8px;
  font-weight: 700; font-size: 11px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: all 0.2s;
  white-space: nowrap;
}
.emp-tab-btn:hover { background: #f3f4f6; color: var(--text); }
.emp-tab-btn.active {
  /* v833 — كان كهرمانياً (لوحة متقاعدة) */
  background: linear-gradient(90deg, #014034, #047857);
  color: white;
  box-shadow: 0 2px 8px rgba(1,64,52,0.3);
}
@media (max-width: 480px) {
  .emp-tab-btn .hidden-xs { display: none; }
}

/* Filters card */
.emp-filters-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 14px;
  margin-bottom: 14px;
}
.emp-filters-row {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 0; flex-wrap: wrap;
}
.emp-filters-grid {
  display: grid;
  gap: 10px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.emp-filters-grid.hidden { display: none; }
.emp-filter-field { display: flex; flex-direction: column; gap: 4px; }
.emp-filter-field label { font-size: 11px; color: #6b7280; font-weight: 700; }
.emp-filter-field select {
  padding: 7px 10px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 6px;
  background: #fff; outline: none;
}
.emp-filter-field select:focus { border-color: #f59e0b; }

/* Employees data table */
.emp-table { font-size: 12px; }
.emp-table thead th { font-size: 11px; padding: 9px 8px; }
.emp-table tbody td { padding: 9px 8px; }
.emp-table .mono { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; }
.emp-table .small { font-size: 11px; }
.emp-table .num { font-feature-settings: "tnum" 1; text-align: end; }

/* Column highlights matching reference */
.emp-table .hl-blue { background: #eff6ff; }
.emp-table .hl-rose { background: #fff1f2; }
.emp-table .hl-amber { background: #fffbeb; }
.emp-table .hl-indigo { background: #eef2ff; }
.emp-table .hl-emerald { background: #ecfdf5; }
.emp-table .hl-purple { background: #faf5ff; }
.emp-table .hl-cyan { background: #ecfeff; }
.emp-table .hl-pink { background: #fdf2f8; }
.emp-table .hl-teal { background: #f0fdfa; }
.emp-table .hl-orange { background: #fff7ed; }

.emp-table-footer td {
  background: #f0fdfa !important;
  color: #0d6e5c !important;
  font-weight: 800;
  padding: 11px 8px;
  border-top: 2px solid #5eead4;
}

/* Modal form sections */
.emp-section {
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
}
.emp-section h4 {
  margin: 0 0 12px;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; gap: 6px;
}
.emp-section .form-grid {
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.emp-section .form-field label { font-size: 11px; }
.emp-section .form-field input,
.emp-section .form-field select,
.emp-section .form-field textarea {
  padding: 7px 10px; font-size: 12px;
}
.emp-section .form-help { font-size:10.5px; line-height: 1.4; }

/* Summary grid */
.emp-summary-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .emp-summary-grid { grid-template-columns: 1fr 1fr; } }
.emp-summary-grid .data-table { font-size: 12px; }
.emp-summary-grid .num { font-feature-settings: "tnum" 1; text-align: end; }

/* ───── Delegation Box (inside Org Structure) ───── */
.emp-delegation-box {
  background: #fffbeb;
  border: 1.5px solid #fcd34d;
  border-radius: 10px;
  padding: 12px;
  margin-top: 12px;
}
.emp-delegation-title {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 800;
  color: #92400e;
  display: flex; align-items: center; gap: 6px;
}
.emp-check-row {
  display: flex; align-items: center; gap: 8px;
  background: white;
  border: 2px solid #fcd34d;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 12px;
  color: #78350f;
  transition: background 0.15s;
}
.emp-check-row:hover { background: #fef3c7; }
.emp-delegation-hint {
  margin: 10px 0 0;
  font-size: 11px;
  color: #92400e;
  line-height: 1.4;
}

/* ───── Attachments ───── */
.emp-attach-uploader { margin-bottom: 12px; }
.emp-attach-drop {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  padding: 22px 16px;
  border: 2.5px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.emp-attach-drop:hover {
  border-color: #6366f1;
  background: #eef2ff;
  transform: translateY(-1px);
}
.emp-attach-drop.dragging {
  border-color: #10b981;
  background: #ecfdf5;
  transform: scale(1.02);
}
.emp-attach-drop-icon {
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.emp-attach-drop-text {
  display: flex; flex-direction: column; gap: 2px;
}
.emp-attach-drop-text strong {
  font-size: 13px; color: #334155;
}
.emp-attach-drop-text span {
  font-size: 11px; color: #64748b;
}
.emp-attach-drop-meta {
  font-size:10.5px;
  color: #94a3b8;
  background: white;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
}

.emp-attach-empty {
  padding: 14px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px dashed #cbd5e1;
}

.emp-attach-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.emp-attach-item {
  display: flex; align-items: center; gap: 10px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  transition: all 0.15s;
}
.emp-attach-item:hover {
  border-color: #6366f1;
  box-shadow: 0 2px 8px rgba(99,102,241,0.1);
}
.emp-attach-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: #f3f4f6;
  border-radius: 8px;
}
.emp-attach-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.emp-attach-name {
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emp-attach-size {
  font-size:10.5px;
  color: #6b7280;
}
.emp-attach-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.emp-attach-btn {
  background: none;
  border: none;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.emp-attach-btn:hover { background: #f3f4f6; transform: scale(1.1); }
.emp-attach-btn.view:hover { background: #dbeafe; }
.emp-attach-btn.down:hover { background: #d1fae5; }   /* v0.37.9.646 */
.emp-attach-btn.delete:hover { background: #fee2e2; }

/* ═══════════════════════════════════════════════════════════════════════
   v0.37.9.370 — Compact inline attachment chip
   Used for "Additional Attachments" rows in JV + Receipts + Payments
   modals. Replaces the tall card layout — multiple files fit on one
   elegant horizontal line, wrap to next line if needed.
   ═══════════════════════════════════════════════════════════════════════ */
.att-chip-row { line-height: 1.5; }
.att-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 3px 4px 3px 10px;
  font-size: 11.5px;
  max-width: 100%;
  transition: all 0.15s;
}
.att-chip:hover {
  border-color: #a78bfa;
  box-shadow: 0 1px 4px rgba(124,58,237,0.15);
}
.att-chip-icon { font-size: 14px; flex-shrink: 0; }
.att-chip-name {
  font-weight: 700;
  color: #1f2937;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.att-chip-size {
  color: #6b7280;
  font-size:10.5px;
  background: #f3f4f6;
  padding: 1px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.att-chip-btn {
  background: transparent;
  border: 0;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}
.att-chip-btn:hover { background: #ede9fe; transform: scale(1.12); }
.att-chip-btn.att-chip-del:hover { background: #fee2e2; }
.att-chip-btn.att-chip-arch:hover { background: #fde68a; }
.att-chip-btn.att-chip-view { background: #dbeafe; color: #1e40af; }
.att-chip-btn.att-chip-view:hover { background: #bfdbfe; }
[dir="rtl"] .att-chip { padding: 3px 10px 3px 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   v0.37.9.372 — Smart Completion Bar (Receipts + Journal modals)
   ───────────────────────────────────────────────────────────────────────
   A compact, elegant header that shows the user how complete their
   record is, lists missing required fields as clickable chips, and
   marks each empty required field with a pulsing red dot.
   ═══════════════════════════════════════════════════════════════════════ */
.smart-completion {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 14px 10px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}
.smart-completion.is-complete {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-color: #10b981;
  box-shadow: 0 2px 12px rgba(16,185,129,0.15);
}
.smart-completion.is-warning {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-color: #f59e0b;
}
.smart-completion-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.smart-completion-title {
  display: flex; align-items: center; gap: 7px;
  font-weight: 800; font-size: 13.5px; color: #0f172a;
}
.smart-completion-title .sc-icon { font-size: 18px; }
.smart-completion-percent {
  margin-inline-start: auto;
  background: #fff; border: 1.5px solid #cbd5e1;
  border-radius: 999px; padding: 3px 11px;
  font-family: monospace; font-weight: 800; font-size: 12.5px;
  color: #0f172a; min-width: 56px; text-align: center;
}
.smart-completion.is-complete .smart-completion-percent {
  background: #10b981; color: #fff; border-color: #059669;
}
.smart-completion.is-warning .smart-completion-percent {
  background: #f59e0b; color: #fff; border-color: #d97706;
}
.smart-completion-progress {
  height: 6px; background: #e2e8f0; border-radius: 999px;
  overflow: hidden; margin-bottom: 10px;
}
.smart-completion-progress-fill {
  height: 100%; background: linear-gradient(90deg, #f59e0b, #10b981);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(16,185,129,0.4);
}
.smart-completion.is-complete .smart-completion-progress-fill {
  background: linear-gradient(90deg, #10b981, #34d399);
}
.smart-completion-missing {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.smart-completion-missing-label {
  font-size: 11.5px; font-weight: 700; color: #92400e;
  display: inline-flex; align-items: center; gap: 5px;
  margin-inline-end: 4px;
}
.smart-completion-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff;
  border: 1.5px solid #fbbf24;
  color: #92400e;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.smart-completion-chip::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ef4444;
  animation: scPulse 1.8s ease-in-out infinite;
}
@keyframes scPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  50% { opacity: 0.8; transform: scale(1.15); box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}
.smart-completion-chip:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(245,158,11,0.25);
}
.smart-completion-complete-msg {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: #065f46;
}
.smart-completion-complete-msg .check {
  font-size: 18px;
}
.smart-completion-tip {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.6);
  border-radius: 8px;
  font-size: 11px;
  color: #475569;
  font-weight: 500;
  border-inline-start: 3px solid #f59e0b;
}
.smart-completion.is-complete .smart-completion-tip {
  border-inline-start-color: #10b981;
  color: #065f46;
}

/* ═══════════════════════════════════════════════════════════════════════
   v0.37.9.376 — Journal Entry Modal: Smart Completion Bar + Pro View
   ───────────────────────────────────────────────────────────────────────
   The smart completion bar lives at the top of the journal modal in
   edit/create mode. It surfaces: header field completeness, line stats
   (valid / total), debit/credit balance, and smart warnings (lines
   without note, lines with missing party where required, duplicate
   accounts, missing CC distribution).
   ═══════════════════════════════════════════════════════════════════════ */
.jv-smart-bar {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 14px 10px;
  margin-bottom: 14px;
  transition: all 0.3s;
}
.jv-smart-bar.is-balanced { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: #10b981; }
.jv-smart-bar.is-warning  { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #f59e0b; }
.jv-smart-bar.is-error    { background: linear-gradient(135deg, #fef2f2, #fee2e2); border-color: #ef4444; }

.jv-smart-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.jv-smart-title {
  display: flex; align-items: center; gap: 7px;
  font-weight: 800; font-size: 13.5px; color: #0f172a;
}
.jv-smart-stats {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-inline-start: auto;
  align-items: center;
}
.jv-smart-stat {
  background: #fff; border: 1.5px solid #cbd5e1;
  border-radius: 999px; padding: 3px 11px;
  font-family: monospace; font-weight: 700; font-size: 11.5px;
  color: #0f172a;
  display: inline-flex; align-items: center; gap: 4px;
}
.jv-smart-stat strong { font-weight: 800; color: #1e40af; }
.jv-smart-stat.stat-debit { border-color: #93c5fd; background: #eff6ff; }
.jv-smart-stat.stat-debit strong { color: #1d4ed8; }
.jv-smart-stat.stat-credit { border-color: #c4b5fd; background: #f5f3ff; }
.jv-smart-stat.stat-credit strong { color: #6d28d9; }
.jv-smart-stat.stat-balanced { background: #10b981; color: #fff; border-color: #059669; }
.jv-smart-stat.stat-diff-bad { background: #ef4444; color: #fff; border-color: #dc2626; animation: jvDiffPulse 1.6s ease-in-out infinite; }
@keyframes jvDiffPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}

.jv-smart-progress {
  height: 6px; background: #e2e8f0; border-radius: 999px;
  overflow: hidden; margin-bottom: 10px;
}
.jv-smart-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #10b981);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.jv-smart-bar.is-balanced .jv-smart-progress-fill {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.jv-smart-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.jv-smart-chips-label {
  font-size: 11px; font-weight: 700; color: #475569;
  margin-inline-end: 4px;
}
.jv-smart-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff;
  border: 1.5px solid #fbbf24;
  color: #92400e;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.jv-smart-chip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ef4444;
  animation: jvDiffPulse 1.6s ease-in-out infinite;
}
.jv-smart-chip:hover {
  background: #fef3c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(245,158,11,0.25);
}
.jv-smart-chip.chip-info {
  border-color: #93c5fd; color: #1d4ed8;
}
.jv-smart-chip.chip-info::before { background: #3b82f6; }
.jv-smart-chip.chip-cc {
  border-color: #c4b5fd; color: #6d28d9;
}
.jv-smart-chip.chip-cc::before { background: #8b5cf6; }

.jv-smart-tip {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.6);
  border-radius: 8px;
  font-size: 11px;
  color: #475569;
  font-weight: 500;
  border-inline-start: 3px solid #f59e0b;
}
.jv-smart-bar.is-balanced .jv-smart-tip {
  border-inline-start-color: #10b981;
  color: #065f46;
}

/* ═══════════════════════════════════════════════════════════════════════
   Journal Entry — Form View is now the universal style across screens.
   🆕 v0.37.9.400 — Summary card is no longer rendered. Form-edit-zone
       stays visible in view mode (fields are disabled via openJournalModal
       wireModalReadOnly + form[data-readonly] semantics).
   ═══════════════════════════════════════════════════════════════════════ */
.jv-view-summary { display: none !important; }
/* Form-edit-zone is ALWAYS shown — no hiding in view-only mode anymore. */

.jv-view-hero {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: #fff;
  border-radius: 14px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  margin-bottom: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}
.jv-view-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.jv-view-hero-left { display: flex; flex-direction: column; gap: 8px; z-index: 1; min-width: 0; }
.jv-view-source-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  width: fit-content;
}
.jv-view-doc-no {
  font-family: monospace;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
.jv-view-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px;
  opacity: 0.95;
}
.jv-view-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.jv-view-hero-right { text-align: end; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.jv-view-totals { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.jv-view-total-block {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 6px 12px;
  text-align: end;
  min-width: 120px;
}
.jv-view-total-label {
  font-size:10.5px;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.jv-view-total-value {
  font-family: monospace;
  font-size: 18px;
  font-weight: 800;
  direction: ltr;
}
.jv-view-balance-badge {
  background: #10b981; color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  margin-top: 4px;
  align-self: flex-end;
}
.jv-view-balance-badge.is-bad { background: #ef4444; }
.jv-view-status-line {
  display: flex; gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  justify-content: flex-end;
}
.jv-view-status-badge {
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.4);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.jv-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.jv-view-tile {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 11px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.jv-view-tile-label {
  font-size: 10.5px; font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.jv-view-tile-value {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}
.jv-view-tile-sub {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  font-family: monospace;
}

.jv-view-desc {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid #93c5fd;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.jv-view-desc-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #1e40af;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.jv-view-desc-value {
  font-size: 14px;
  color: #0f172a;
  line-height: 1.6;
  font-weight: 600;
}

.jv-view-lines-wrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}
.jv-view-lines-head {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: #fff;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jv-view-lines-table {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px;
}
.jv-view-lines-table thead {
  background: #f8fafc;
}
.jv-view-lines-table th {
  padding: 8px 10px;
  text-align: start;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 2px solid #e2e8f0;
}
.jv-view-lines-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}
.jv-view-lines-table tr:last-child td { border-bottom: none; }
.jv-view-lines-table .col-acct { width: 30%; }
.jv-view-lines-table .col-party { width: 18%; }
.jv-view-lines-table .col-debit, .jv-view-lines-table .col-credit { width: 12%; text-align: end; font-family: monospace; }
.jv-view-lines-table .col-note { width: 28%; color: #475569; }
.jv-view-lines-table .acct-code { font-family: monospace; font-weight: 800; color: #1e40af; font-size: 11px; display: block; }
.jv-view-lines-table .acct-name { font-weight: 700; color: #0f172a; }
.jv-view-lines-table .party-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}
.jv-view-lines-table .party-pill.party-customer { background: #dbeafe; color: #1e40af; }
.jv-view-lines-table .party-pill.party-supplier { background: #fef3c7; color: #92400e; }
.jv-view-lines-table .party-pill.party-treasury { background: #d1fae5; color: #065f46; }
.jv-view-lines-table .party-pill.party-tax { background: #ede9fe; color: #6d28d9; }
.jv-view-lines-table .debit-val { color: #1d4ed8; font-weight: 800; }
.jv-view-lines-table .credit-val { color: #6d28d9; font-weight: 800; }
.jv-view-lines-table tfoot td {
  background: #f8fafc;
  font-weight: 800;
  padding: 10px;
  border-top: 2px solid #cbd5e1;
}
.jv-view-lines-table tfoot .grand-total { font-size: 14px; font-family: monospace; }

/* CC distribution chips below each line */
.jv-view-cc-row {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #e2e8f0;
}
.jv-view-cc-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f5f3ff;
  border: 1px solid #c4b5fd;
  color: #5b21b6;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
}
.jv-view-cc-chip .cc-pct {
  background: #6d28d9; color: #fff;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-family: monospace;
}
.jv-view-cc-chip.is-ok { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
.jv-view-cc-chip.is-ok .cc-pct { background: #059669; }
.jv-view-cc-chip.is-partial { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.jv-view-cc-chip.is-partial .cc-pct { background: #b45309; }
.jv-view-cc-chip .cc-code-mono {
  font-family: monospace; font-weight: 800;
  background: rgba(0,0,0,0.06);
  padding: 0 4px; border-radius: 3px;
  margin-inline-end: 2px;
}
.jv-view-cc-warn {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: #fee2e2;
  color: #991b1b;
  font-size:10.5px;
  font-weight: 700;
}
.jv-view-cc-missing {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border: 1px dashed #fca5a5;
  color: #991b1b;
  font-size: 10.5px;
  font-weight: 700;
}

/* v0.37.9.389 — Account column layout + Cost-Center edit button (view mode) */
.jv-view-lines-table .acct-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
}
.jv-view-lines-table .acct-text { flex: 1; min-width: 0; }
.jv-view-cc-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border: 1.5px solid #c4b5fd;
  color: #6d28d9;
  width: 26px; height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s;
}
.jv-view-cc-btn:hover {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  border-color: #8b5cf6;
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════════
   v0.37.9.377 — CC % badge on the 🎯 button in journal line table.
   Shows allocation status at a glance:
     • pct-zero    → light grey   (no distribution)
     • pct-partial → amber        (some distribution but < 100%)
     • pct-full    → green        (100% allocated)
     • pct-over    → red          (over-distributed, error)
   ═══════════════════════════════════════════════════════════════════════ */
.cc-jv-dist {
  position: relative;
}
.cc-pct-badge {
  position: absolute;
  bottom: -4px;
  inset-inline-end: -6px;
  background: #fff;
  color: #475569;
  border: 1.5px solid #cbd5e1;
  border-radius: 999px;
  padding: 0 4px;
  font-size: 10.5px;
  font-family: monospace;
  font-weight: 800;
  line-height: 13px;
  min-width: 22px;
  text-align: center;
  pointer-events: none;
}
.cc-pct-badge.pct-full {
  background: #10b981; color: #fff; border-color: #059669;
}
.cc-pct-badge.pct-partial {
  background: #f59e0b; color: #fff; border-color: #d97706;
}
.cc-pct-badge.pct-over {
  background: #ef4444; color: #fff; border-color: #dc2626;
  animation: jvDiffPulse 1.6s ease-in-out infinite;
}
.cc-pct-badge.pct-zero {
  background: #f1f5f9; color: #94a3b8; border-color: #cbd5e1;
}

/* v0.37.9.394 — Force 🎯 cost-center button to stay visible + clickable
   in ALL audit/view-only states. The user explicitly wants to edit CC
   distribution even when the JV is locked (CC is analytical, not GL). */
.modal-backdrop.audited .cc-jv-dist,
.modal-backdrop.view-only .cc-jv-dist,
.modal-backdrop[data-readonly] .cc-jv-dist,
button.cc-jv-dist[data-audit-allow],
button.cc-jv-dist[data-rec-allow] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  filter: none !important;
}
.modal-backdrop.audited .cc-pct-badge,
.modal-backdrop.view-only .cc-pct-badge {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v0.37.9.375 — Receipt Modal: Professional View-Only Document Layout
   ───────────────────────────────────────────────────────────────────────
   In view/approval mode we hide the form sections (which are visually
   disabled greyscale inputs) and show a beautiful read-only document
   card instead. The JV preview + attachments + notes remain visible
   because they're useful side-info even in view-mode.
   ═══════════════════════════════════════════════════════════════════════ */
.rv-view-summary { display: none; }
.modal-backdrop.view-only .rv-view-summary { display: block; }
.modal-backdrop.view-only .rv-form-edit-zone { display: none !important; }

.rv-view-hero {
  background: linear-gradient(135deg, var(--rv-color, #15803d), var(--rv-color-2, #22c55e));
  color: #fff;
  border-radius: 14px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  margin-bottom: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}
.rv-view-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.rv-view-hero-left { display: flex; flex-direction: column; gap: 8px; z-index: 1; min-width: 0; }
.rv-view-doc-no {
  font-family: monospace;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
.rv-view-type-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  width: fit-content;
}
.rv-view-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px;
  opacity: 0.95;
}
.rv-view-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.rv-view-hero-right { text-align: end; z-index: 1; }
.rv-view-amount-label {
  font-size: 11px; opacity: 0.85;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.rv-view-amount {
  font-family: monospace;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  direction: ltr;
}
.rv-view-amount-currency {
  font-size: 14px;
  opacity: 0.9;
  margin-inline-start: 4px;
}
.rv-view-status-line {
  display: flex; justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.rv-view-status-badge {
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.4);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.rv-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.rv-view-tile {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 11px 14px;
  display: flex; flex-direction: column; gap: 4px;
  transition: all .15s;
}
.rv-view-tile:hover {
  border-color: #94a3b8;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.rv-view-tile-label {
  font-size: 10.5px; font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: inline-flex; align-items: center; gap: 4px;
}
.rv-view-tile-value {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
  word-break: break-word;
}
.rv-view-tile-sub {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  font-family: monospace;
}
.rv-view-tile.tile-empty .rv-view-tile-value {
  color: #94a3b8;
  font-weight: 500;
  font-style: italic;
}
.rv-view-desc {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.rv-view-desc-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #92400e;
  margin-bottom: 4px;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 4px;
}
.rv-view-desc-value {
  font-size: 14px;
  color: #0f172a;
  line-height: 1.6;
  font-weight: 600;
}
.rv-view-reference {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: #475569;
  margin-bottom: 14px;
}
.rv-view-reference strong { color: #0f172a; font-family: monospace; }

/* Field-level required indicator: red pulsing dot on the label */
.form-field.field-missing > label::after {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  margin-inline-start: 6px;
  vertical-align: middle;
  animation: scPulse 1.8s ease-in-out infinite;
}
.form-field.field-missing > label {
  color: #b91c1c;
}
.form-field.field-missing input,
.form-field.field-missing select,
.form-field.field-missing textarea {
  border-color: #fca5a5 !important;
  background: #fffbfb;
  box-shadow: 0 0 0 1px #fecaca inset;
}
.form-field.field-ok > label::after {
  content: '✓';
  display: inline-block;
  color: #10b981;
  font-weight: 800;
  margin-inline-start: 6px;
  font-size: 13px;
  animation: scFadeCheck 0.6s ease-out;
}
@keyframes scFadeCheck {
  0% { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}
.form-field.field-ok input,
.form-field.field-ok select,
.form-field.field-ok textarea {
  border-color: #86efac !important;
}

/* 🆕 v0.37.9.371 — Hard-override the .audited dimming for attachment chips.
 * The high-specificity `.audited button:not(...)` rule dims any non-listed
 * button. Even with [data-audit-allow] on each chip button, we want a belt-
 * and-suspenders rule that's both specific AND tagged !important so the
 * chip buttons stay fully bright + interactive in view-mode. */
.audited .att-chip-btn,
.audited .att-chip-btn[data-rec-allow],
.audited .att-chip-btn[data-audit-allow],
.modal-backdrop.view-only .att-chip-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPANIES — Owners table (dynamic)
   ═══════════════════════════════════════════════════════════════════════ */
.co-owners-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: white;
  border: 1.5px solid #c4b5fd;
  border-radius: 10px;
  padding: 10px 12px;
}
.co-share-summary {
  margin-inline-start: auto;
  background: #f3f4f6;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px; font-weight: 700;
  color: #374151;
  transition: all 0.2s;
}
.co-share-summary.ok { background: #d1fae5; color: #065f46; }
.co-share-summary.under { background: #fef3c7; color: #92400e; }
.co-share-summary.over { background: #fee2e2; color: #991b1b; }
.co-share-summary strong { font-feature-settings: "tnum" 1; }

.co-owners-table { font-size: 12px; }
.co-owners-table thead th {
  background: #f5f3ff; color: #5b21b6;
  padding: 8px 6px; font-size: 11px;
}
.co-owners-table tbody td { padding: 5px 6px; vertical-align: middle; }
.owner-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  background: white;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.owner-input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139,92,246,0.15); }
.owner-share {
  text-align: end;
  font-weight: 700;
  background: #faf5ff;
}
.co-owners-hint {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* Owner ID hint below the field */
.owner-id-hint {
  display: block;
  font-size: 10.5px;
  color: #94a3b8;
  margin-top: 2px;
  text-align: center;
}

/* Owner row visual cue for individual vs entity */
.owner-row.is-individual td:nth-child(3) { background: linear-gradient(90deg, rgba(99,102,241,0.06), transparent); }
.owner-row.is-entity td:nth-child(3) { background: linear-gradient(90deg, rgba(217,119,6,0.10), transparent); }
.owner-type-select { font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════
   COMPANIES — Hero banner & KPI bar
   ═══════════════════════════════════════════════════════════════════════ */
.co-hero {
  background: linear-gradient(135deg, #b45309 0%, #d97706 40%, #f59e0b 80%, #fbbf24 100%);
  border-radius: 18px;
  color: white;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(217,119,6,0.25);
  position: relative;
}
.co-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.10), transparent 40%);
  pointer-events: none;
}
.co-hero-row {
  position: relative;
  padding: 18px 22px;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 14px;
}
.co-hero-title { display: flex; align-items: center; gap: 14px; }
.co-hero-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.22);
  border-radius: 14px;
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.co-hero-title h2 { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.2; }
.co-hero-title p { margin: 4px 0 0; font-size: 13px; opacity: 0.92; }

.co-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-co-action {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  padding: 9px 16px; border-radius: 10px;
  font-weight: 700; font-size: 13px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-co-action:hover { background: rgba(255,255,255,0.28); transform: translateY(-1px); }
.btn-co-add {
  background: white; color: #9a3412;
  border: none; padding: 10px 20px;
  border-radius: 10px; font-weight: 900; font-size: 14px;
  cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,0.20);
  transition: all 0.2s;
}
.btn-co-add:hover { background: #fff7ed; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.25); }

.co-kpi-bar {
  position: relative;
  background: rgba(0,0,0,0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,0.18);
  padding: 12px 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  text-align: center;
}
@media (min-width: 640px) { .co-kpi-bar { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .co-kpi-bar { grid-template-columns: repeat(8, 1fr); } }
.co-kpi {
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  padding: 6px 4px;
  border-radius: 8px;
  transition: background 0.15s;
}
.co-kpi:hover { background: rgba(255,255,255,0.08); }
.co-kpi-icon { font-size: 18px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.co-kpi-label { font-size:10.5px; opacity: 0.88; font-weight: 600; }
.co-kpi-value {
  font-size: 16px; font-weight: 900;
  font-feature-settings: "tnum" 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Companies list table — refined */
.co-list-table { font-size: 12px; }
/* v1034 — رأس الجدول بهوية Emerald Ledger (سياسة المالك): كان تدرّجاً برتقالياً خارج اللوحة */
.co-list-table thead th {
  background: linear-gradient(180deg, var(--el-teal-800), var(--el-teal-900));
  color: #fff;
  font-size: 11px;
  padding: 10px 8px;
  border-bottom: 2px solid var(--el-em-500);
  white-space: nowrap;
}
.co-list-table thead th.tbx-th[data-tbx-sort]:hover { background: linear-gradient(180deg, var(--el-teal-900), var(--el-teal-950)); }
.co-list-table thead th .tbx-arw { color: #fff; }
.co-list-table thead th input[type="checkbox"] { accent-color: var(--el-em-500); }
.co-list-table tbody td { padding: 10px 8px; }
.co-list-table tbody tr.audited { background: #fffbeb; }
.co-list-table tbody tr.audited:hover { background: #fef3c7; }
.co-list-table .mono { font-family: 'SF Mono', Menlo, Consolas, monospace; }
.co-list-table .small { font-size: 11px; }

/* Company name cell with avatar */
.co-name-cell {
  display: flex; align-items: center; gap: 10px;
}
.co-name-avatar {
  width: 36px; height: 36px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #d97706, #f59e0b);
  color: white;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 16px;
  box-shadow: 0 3px 8px rgba(217,119,6,0.3);
  font-family: 'Inter', sans-serif;
}
.co-name-en {
  font-size:10.5px; color: #6b7280;
  margin-top: 2px;
}
.co-name-avatar.has-logo {
  background: white;
  border: 1.5px solid #fed7aa;
  padding: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.co-name-avatar.has-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* ─── Logo Uploader (in modal) ─── */
.co-logo-row {
  display: flex; gap: 16px;
  align-items: center; justify-content: center;
  background: white;
  border: 1.5px dashed #5eead4;
  border-radius: 12px;
  padding: 14px;
  flex-wrap: wrap;
}
.co-logo-preview {
  width: 100px; height: 100px;
  border-radius: 16px;
  border: 2px solid #cbd5e1;
  background: #f8fafc;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  transition: all 0.2s;
}
.co-logo-preview:hover { border-color: #0d6e5c; }
.co-logo-preview img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.co-logo-placeholder {
  font-size: 48px;
  opacity: 0.4;
}
.co-logo-controls {
  display: flex; flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  min-width: 200px;
}
.co-logo-help {
  font-size:10.5px;
  color: #6b7280;
  line-height: 1.4;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   DEFS module (Clients, Suppliers, Shareholders, Holidays) hero
   ═══════════════════════════════════════════════════════════════════════ */
.defs-hero {
  border-radius: 18px;
  color: white;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  position: relative;
}
.defs-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.10), transparent 40%);
  pointer-events: none;
}
.defs-hero-row {
  position: relative;
  padding: 18px 22px;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 14px;
}
.defs-hero-title { display: flex; align-items: center; gap: 14px; }
.defs-hero-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.22);
  border-radius: 14px;
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.defs-hero-title h2 { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.2; }
.defs-hero-title p { margin: 4px 0 0; font-size: 13px; opacity: 0.92; }
.defs-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ─────────────────────────────────────────────────────────────────────────
   Primary "New X" buttons on every screen hero (Receipts, Payments,
   Transfers, Sales Invoices, Credit Notes, Fixed Assets, etc.)
   Clean white pill that stands out crisp against the colored hero strip.
   The bilingual icon (+) is tinted to match the hero theme automatically
   via currentColor on a small gradient chip — works for any hero gradient.
   ─────────────────────────────────────────────────────────────────────── */
.defs-hero-btn,
.tr-hero-actions .defs-hero-btn,
.fa-hero-actions .defs-hero-btn {
  background: #ffffff;
  color: #0f172a;
  border: 1.5px solid rgba(255,255,255,0.55);
  padding: 9px 16px 9px 14px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.16), inset 0 -2px 0 rgba(0,0,0,0.03);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.defs-hero-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.22), inset 0 -2px 0 rgba(0,0,0,0.03);
  background: #f8fafc;
}
.defs-hero-btn:active { transform: translateY(0); }
/* The PRIMARY variant — the "main" CTA on each screen. Coloured chip on
   the leading "+" + subtle gradient ring around the button to make it pop. */
.defs-hero-btn-primary {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 70%, #f0fdf4 100%);
  color: #0f172a;
  border: 0;
  position: relative;
  padding-inline-start: 12px;
  font-weight: 900;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.85),
    0 8px 22px rgba(0,0,0,0.22),
    inset 0 -2px 0 rgba(0,0,0,0.04);
}
/* Replace the leading "+" character (if present in label) with a custom
   coloured pill so it stays vibrant against the white background.
   The button label still reads naturally; we just style the first char. */
.defs-hero-btn-primary::first-letter,
.defs-hero-btn-primary::first-line { color: inherit; }
.defs-hero-btn-primary:hover {
  background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px rgba(255,255,255,1),
    0 12px 28px rgba(0,0,0,0.28),
    inset 0 -2px 0 rgba(0,0,0,0.04);
}
.defs-hero-btn-primary:active { transform: translateY(0); }
/* Secondary (non-primary) hero buttons — slightly translucent so they read
   as supporting actions next to the bright primary. Keep them readable. */
.defs-hero-btn:not(.defs-hero-btn-primary) {
  background: rgba(255,255,255,0.92);
  color: #0f172a;
}
.defs-hero-btn:not(.defs-hero-btn-primary):hover {
  background: #ffffff;
}

.defs-kpi-bar {
  position: relative;
  background: rgba(0,0,0,0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,0.18);
  padding: 12px 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  text-align: center;
}
@media (min-width: 640px) { .defs-kpi-bar { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .defs-kpi-bar { grid-template-columns: repeat(8, 1fr); } }
.defs-kpi {
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  padding: 6px 4px;
  border-radius: 8px;
}
.defs-kpi:hover { background: rgba(255,255,255,0.08); }
.defs-kpi-icon { font-size: 18px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.defs-kpi-label { font-size:10.5px; opacity: 0.88; font-weight: 600; }
.defs-kpi-value {
  font-size: 16px; font-weight: 900;
  font-feature-settings: "tnum" 1;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ─── Recipients list (used by Notes & Tasks) ─── */
.nt-recipients-list {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
@media (min-width: 640px) { .nt-recipients-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .nt-recipients-list { grid-template-columns: 1fr 1fr 1fr; } }
.nt-recipient-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.12s;
}
.nt-recipient-row:hover { background: #f5f3ff; }
.nt-recipient-row input { width: 16px; height: 16px; accent-color: #8b5cf6; cursor: pointer; }
.nt-recipient-name { font-weight: 700; color: #1f2937; }
.nt-recipient-meta { color: #6b7280; font-size:10.5px; margin-inline-start: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   HOLIDAYS — Tabs, Calendar, Stats, Circular cards
   ═══════════════════════════════════════════════════════════════════════ */
.h-tabs-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 6px;
  margin-bottom: 14px;
}
.h-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
@media (min-width: 768px) { .h-tabs { grid-template-columns: repeat(4, 1fr); } }
.h-tab-btn {
  background: transparent;
  border: none; color: #6b7280;
  padding: 11px 10px; border-radius: 8px;
  font-weight: 700; font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s;
}
.h-tab-btn:hover { background: #ecfdf5; color: #047857; }
.h-tab-btn.active {
  background: linear-gradient(90deg, #047857, #10b981);
  color: white;
  box-shadow: 0 4px 12px rgba(4,120,87,0.3);
}

.h-filters-toolbar { gap: 8px; flex-wrap: wrap; }
.h-filter-select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  background: white;
  cursor: pointer;
}
/* 🔒 v1329 — فلتر «المنشئ» مجمّداً لمن لا يملك «فلتر شامل» (assets/creator_filter.js · قاعدة 177):
   بارتفاع `.h-filter-select` المقيس (30px: حشوة 7 + سطر + إطار)، وسببُه مكتوبٌ فيه — لا قائمةٌ تُفتح ولا اختيار */
.cf-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--el-em-100);
  border-radius: 8px;
  background-color: var(--el-em-50);
  color: var(--el-teal-800);
  font-size: 12px;
  white-space: nowrap;
  cursor: default;
}
.cf-lock .cf-lock-k { color: var(--el-teal-600); font-weight: 700; }
.cf-lock .cf-lock-v { font-weight: 800; }
.cf-lock .cf-lock-n { font-size: 11px; color: var(--el-em-800); border-inline-start: 1px solid var(--el-em-100); padding-inline-start: 6px; }

/* Year selector */
.h-year-btn {
  background: white;
  border: 1.5px solid var(--border);
  color: var(--text);
  padding: 7px 16px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  font-family: 'Inter', monospace;
  transition: all 0.15s;
}
.h-year-btn:hover { border-color: #e11d48; color: #be123c; }
.h-year-btn.active {
  background: linear-gradient(135deg, #be123c, #e11d48);
  color: white;
  border-color: #be123c;
  box-shadow: 0 4px 12px rgba(225,29,72,0.3);
}

/* Yearly calendar grid */
.h-calendar-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
  margin-bottom: 16px;
}
@media (min-width: 640px) { .h-calendar-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .h-calendar-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1280px) { .h-calendar-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

.h-month-card {
  background: white;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  overflow: hidden;
  transition: all 0.2s;
}
.h-month-card.has-holiday {
  border-color: #fda4af;
  box-shadow: 0 4px 14px rgba(244,63,94,0.10);
}
.h-month-header {
  background: linear-gradient(90deg, #f3f4f6, #e5e7eb);
  padding: 8px 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.h-month-card.has-holiday .h-month-header {
  background: linear-gradient(90deg, #fff1f2, #ffe4e6);
}
.h-month-name {
  font-weight: 800; font-size: 13px;
  color: var(--text);
}
.h-month-card.has-holiday .h-month-name { color: #9f1239; }
.h-month-num {
  background: rgba(0,0,0,0.05);
  color: var(--text-muted);
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  font-family: 'Inter', monospace;
}
.h-month-card.has-holiday .h-month-num {
  background: #fda4af; color: white;
}

.h-month-body {
  padding: 10px;
  min-height: 80px;
  display: flex; flex-direction: column; gap: 6px;
}
.h-month-empty {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  color: #cbd5e1;
  font-size: 11px;
  text-align: center;
}
.h-month-holiday {
  background: #fef2f2;
  border: 1px solid #fda4af;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.h-month-holiday:hover { transform: translateX(-2px); box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.h-month-holiday.past { opacity: 0.55; background: #f3f4f6; border-color: #d1d5db; }
.h-month-holiday.ongoing { background: linear-gradient(90deg, #dcfce7, #bbf7d0); border-color: #4ade80; box-shadow: 0 0 0 2px rgba(74,222,128,0.2); }
.h-month-holiday.upcoming { background: #fef2f2; border-color: #fda4af; }
.h-mh-name { font-weight: 800; color: #9f1239; margin-bottom: 3px; }
.h-month-holiday.past .h-mh-name { color: #6b7280; }
.h-month-holiday.ongoing .h-mh-name { color: #065f46; }
.h-mh-meta {
  display: flex; justify-content: space-between;
  font-size:10.5px; color: #7c2d12;
}
.h-month-holiday.past .h-mh-meta { color: #94a3b8; }
.h-month-holiday.ongoing .h-mh-meta { color: #065f46; }
.h-mh-days {
  background: rgba(255,255,255,0.7);
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 800;
  font-family: 'Inter', monospace;
}

/* Stats — month bars */
.h-month-bars {
  display: flex; flex-direction: column;
  gap: 8px;
}
.h-month-bar-row {
  display: flex; align-items: center; gap: 12px;
}
.h-month-bar-label {
  width: 80px;
  font-size: 12px; font-weight: 700;
  color: var(--text);
}
.h-month-bar-wrap {
  flex: 1;
  height: 24px;
  background: #f3f4f6;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.h-month-bar {
  height: 100%;
  background: linear-gradient(90deg, #be123c, #e11d48);
  border-radius: 6px;
  transition: width 0.5s ease;
}
.h-month-bar-val {
  position: absolute;
  inset: 0;
  display: flex; align-items: center;
  padding: 0 10px;
  font-size: 11px; font-weight: 800;
  color: #1f2937;
  font-family: 'Inter', monospace;
}

/* Circular cards (selectable) */
.h-circular-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .h-circular-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .h-circular-grid { grid-template-columns: 1fr 1fr 1fr; } }

.h-circular-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.h-circular-card:hover { border-color: #fda4af; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.h-circular-card.checked {
  border-color: #e11d48;
  background: linear-gradient(135deg, #fff1f2, #ffe4e6);
  box-shadow: 0 4px 14px rgba(225,29,72,0.18);
}
.h-circular-card input[type="checkbox"] {
  width: 20px; height: 20px;
  accent-color: #e11d48;
  cursor: pointer;
  flex-shrink: 0;
}
.h-circ-content { flex: 1; min-width: 0; }
.h-circ-emoji {
  font-size: 22px;
  position: absolute;
  margin-top: -4px;
}
.h-circ-name {
  font-size: 14px; font-weight: 800;
  color: #9f1239;
  padding-inline-start: 30px;
  margin-bottom: 4px;
}
.h-circ-dates {
  font-size: 11px;
  color: #6b7280;
  padding-inline-start: 30px;
}
.h-circ-days {
  display: inline-block;
  background: #be123c;
  color: white;
  padding: 1px 8px;
  border-radius: 999px;
  font-size:10.5px;
  font-weight: 800;
  margin-top: 4px;
  margin-inline-start: 30px;
}
.h-circ-status {
  font-size:10.5px;
  color: #92400e;
  font-weight: 700;
  margin-top: 4px;
  padding-inline-start: 30px;
}

/* Greeting cards */
.h-greeting-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .h-greeting-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .h-greeting-grid { grid-template-columns: 1fr 1fr 1fr; } }

.h-greeting-card {
  background: white;
  border: none;
  border-radius: 14px;
  padding: 20px;
  cursor: pointer;
  color: white;
  text-align: center;
  transition: all 0.25s;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
  position: relative;
  overflow: hidden;
}
.h-greeting-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 60%);
  pointer-events: none;
}
.h-greeting-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}
.h-grt-emoji { font-size: 40px; margin-bottom: 8px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); }
.h-grt-name { font-size: 18px; font-weight: 900; margin-bottom: 6px; text-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.h-grt-date { font-size: 11px; opacity: 0.9; margin-bottom: 10px; font-family: 'Inter', monospace; }
.h-grt-cta {
  font-size: 12px; font-weight: 800;
  background: rgba(255,255,255,0.25);
  padding: 6px 14px;
  border-radius: 999px;
  display: inline-block;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.3);
}

/* ───── Auto-Generate Year Picker (single year, grid radios) ───── */
.hg-year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 640px) { .hg-year-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .hg-year-grid { grid-template-columns: repeat(6, 1fr); } }

.hg-year-option {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  background: white;
  border: 2px solid #fdba74;
  border-radius: 12px;
  padding: 14px 8px;
  cursor: pointer;
  transition: all 0.18s;
  font-family: 'Inter', sans-serif;
  user-select: none;
}
.hg-year-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(217,119,6,0.20);
  border-color: #f59e0b;
}
.hg-year-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.hg-year-option:has(input:checked) {
  background: linear-gradient(135deg, #d97706, #f59e0b);
  border-color: #b45309;
  box-shadow: 0 8px 20px rgba(217,119,6,0.35);
  transform: translateY(-2px);
}
.hg-year-option:has(input:checked) .hg-year-label {
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.hg-year-option:has(input:checked) .hg-year-tag {
  background: rgba(255,255,255,0.3);
  color: white;
  border-color: rgba(255,255,255,0.4);
}
.hg-year-label {
  font-size: 18px;
  font-weight: 900;
  color: #9a3412;
  letter-spacing: -0.5px;
  font-feature-settings: "tnum" 1;
}
.hg-year-tag {
  font-size: 10.5px;
  font-weight: 700;
  background: #fef3c7;
  color: #92400e;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #fcd34d;
}
.hg-year-option.is-current {
  border-color: #d97706;
  background: linear-gradient(135deg, #fff7ed, #fed7aa);
}
.hg-year-option.is-current:hover {
  background: linear-gradient(135deg, #ffedd5, #fdba74);
}

/* ═══════════════════════════════════════════════════════════════════════
   HR — Punch Clock (Check-In/Out) & Tab Badges
   ═══════════════════════════════════════════════════════════════════════ */
.h-punch-clock {
  background: linear-gradient(135deg, #0d9488 0%, #059669 60%, #10b981 100%);
  color: white;
  border-radius: 16px;
  padding: 26px 20px;
  margin: 0 auto 24px;
  max-width: 480px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(13,148,136,0.25);
  position: relative;
  overflow: hidden;
}
.h-punch-clock::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 60%);
  pointer-events: none;
}
.h-punch-time {
  font-family: 'Inter', 'SF Mono', monospace;
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.3);
  margin-bottom: 6px;
}
.h-punch-date {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.95;
}

.h-punch-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 600px;
  margin: 0 auto;
}
.h-punch-btn {
  flex: 1;
  min-width: 180px;
  background: white;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  padding: 22px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 800;
  color: #1f2937;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.h-punch-btn:not(:disabled):hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
.h-punch-btn span:first-child { font-size: 36px; }
.h-punch-btn.checkin:not(.done):not(:disabled):hover {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  border-color: #10b981;
  color: #065f46;
}
.h-punch-btn.checkout:not(.done):not(:disabled):hover {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border-color: #ef4444;
  color: #991b1b;
}
.h-punch-btn.done {
  opacity: 0.55;
  background: #f3f4f6;
}
.h-punch-btn.done.checkin { background: linear-gradient(135deg, #d1fae5, #ecfdf5); color: #065f46; border-color: #6ee7b7; }
.h-punch-btn.done.checkout { background: linear-gradient(135deg, #fee2e2, #fef2f2); color: #991b1b; border-color: #fda4af; }
.h-punch-btn:disabled { cursor: not-allowed; }

.h-punch-summary {
  margin-top: 22px;
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  background: linear-gradient(135deg, #f0fdfa, #ecfdf5);
  border: 1.5px solid #5eead4;
  border-radius: 12px;
  padding: 14px 18px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Badge inside tab button */
.h-tab-badge {
  background: #ef4444;
  color: white;
  font-size:10.5px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
  font-family: 'Inter', monospace;
}
.h-tab-btn.active .h-tab-badge { background: white; color: #be123c; }

/* ═══════════════════════════════════════════════════════════════════════
   GENERAL DEFINITIONS — Custom tab design matching original program
   ═══════════════════════════════════════════════════════════════════════ */

/* Outer Hero (violet/indigo/blue gradient) */
.gd-outer-hero {
  background: linear-gradient(135deg, #6d28d9 0%, #4f46e5 50%, #1d4ed8 100%);
  border-radius: 16px;
  color: white;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(79,70,229,0.18);
  position: relative;
}
.gd-outer-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,0.08), transparent 40%);
  pointer-events: none;
}
.gd-outer-hero-row {
  position: relative;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.gd-outer-hero-title { display: flex; align-items: center; gap: 14px; }
.gd-outer-hero-icon {
  width: 50px; height: 50px;
  background: rgba(255,255,255,0.20);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
}
.gd-outer-hero-title h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; }
.gd-outer-hero-title p { margin: 4px 0 0; font-size: 12px; opacity: 0.92; }
.gd-outer-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gd-outer-btn {
  background: rgba(255,255,255,0.15);
  border: none; color: white;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600; font-size: 13px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background 0.2s;
}
.gd-outer-btn:hover { background: rgba(255,255,255,0.25); }
.gd-outer-btn-primary {
  background: white !important;
  color: #6d28d9 !important;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.gd-outer-btn-primary:hover { background: #f5f3ff !important; transform: translateY(-1px); }

/* Flat Tab Bar (white card with border-bottom indicator) */
.gd-flat-tabs-bar {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  margin-bottom: 16px;
  overflow: hidden;
}
.gd-flat-tabs-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border-bottom: 1px solid #e5e7eb;
  background: #f3f4f6;
}
.gd-flat-tab-btn {
  background: white;
  border: none;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 12.5px;
  color: #4b5563;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.18s;
  font-family: inherit;
  position: relative;
  min-height: 50px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gd-flat-tab-btn:hover {
  background: #f9fafb;
  color: #374151;
}
.gd-flat-tab-btn.active {
  color: #7c3aed;
  border-bottom-color: #7c3aed;
  background: linear-gradient(180deg, transparent 70%, rgba(124,58,237,0.06) 100%);
}
.gd-flat-tab-count {
  background: #e5e7eb;
  color: #4b5563;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 9px;
  border-radius: 999px;
  font-family: 'Inter', monospace;
}
.gd-flat-tab-btn.active .gd-flat-tab-count {
  background: #7c3aed;
  color: white;
  box-shadow: 0 2px 4px rgba(124,58,237,0.3);
}

/* Two-rows layout: 8 tabs split into 4×2 */
@media (max-width: 1100px) {
  .gd-flat-tabs-inner { grid-template-columns: repeat(3, 1fr); }
  .gd-flat-tab-btn { font-size: 12px; padding: 11px 10px; }
}
@media (max-width: 720px) {
  .gd-flat-tabs-inner { grid-template-columns: repeat(2, 1fr); }
  .gd-flat-tab-btn { font-size: 11.5px; padding: 10px 8px; }
}
@media (max-width: 420px) {
  .gd-flat-tabs-inner { grid-template-columns: 1fr; }
}

/* Inner Hero per tab (matches original program) */
.gd-inner-hero {
  border-radius: 16px;
  color: white;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  position: relative;
}
.gd-inner-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.16), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(0,0,0,0.08), transparent 40%);
  pointer-events: none;
}
.gd-inner-hero-row {
  position: relative;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.gd-inner-hero-title { display: flex; align-items: center; gap: 14px; }
.gd-inner-hero-icon {
  width: 50px; height: 50px;
  background: rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  font-size: 24px;
  display: flex; align-items: center; justify-content: center;
}
.gd-inner-hero-title h2 { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.2; }
.gd-inner-hero-title p { margin: 4px 0 0; font-size: 12px; opacity: 0.94; max-width: 600px; }

/* "+ Add" button (white pill with colored text) */
.gd-inner-add-btn {
  background: white;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: all 0.18s;
  white-space: nowrap;
}
.gd-inner-add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.20);
  background: #fafafa;
}

/* Per-tab colored table headers (matches reference) */
.gd-tab-table thead tr {
  font-size: 12.5px;
  font-weight: 700;
}
.gd-tab-table thead th {
  padding: 12px 14px !important;
}
.gd-tab-table tbody td {
  padding: 12px 14px;
}
/* Color variants */
.gd-sky-table thead tr     { background: #f0f9ff; color: #075985; }
.gd-emerald-table thead tr { background: #ecfdf5; color: #064e3b; }
.gd-teal-table thead tr    { background: #f0fdfa; color: #134e4a; }
/* 🎨 v1175 — صنفان كانا مكتوبَين في الـmarkup بلا أي قاعدة (قاعدة 11): تبويبا
   العملات والدول وحدهما كانا يفقدان تلوينَ رأس الجدول الذي يناله أشقّاؤهما. */
.gd-violet-table thead tr  { background: #f5f3ff; color: #4c1d95; }
.gd-indigo-table thead tr  { background: #eef2ff; color: #312e81; }
/* حاويةُ شجرة فئات الأصول — كانت بلا قاعدة (المعرَّف `.ac-tree-node` وحده) */
.ac-tree { display: block; }
/* تفاصيلُ المرجع في تبويب ربط الرواتب */
.pyl-ref { margin-top: 10px; font-size: 12px; color: #475569; }
.pyl-ref > summary { cursor: pointer; font-weight: 800; color: #334155; padding: 4px 0; }
/* هيرو تبويب بنود الرواتب — تنسيقُه مضمَّنٌ اليوم، والقاعدة تُبقيه متماسكاً */
.pyi-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.gd-green-table thead tr   { background: #f0fdf4; color: #14532d; }
.gd-rose-table thead tr    { background: #fff1f2; color: #881337; }
.gd-orange-table thead tr  { background: #fff7ed; color: #7c2d12; }
.gd-lime-table thead tr    { background: #ecfdf5; color: #065f46; }
.gd-amber-table thead tr   { background: #fffbeb; color: #78350f; }

/* ─── Company Multi-Picker (used in GD modals + CoA) ─── */
.co-multi-picker {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px;
}
.co-multi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px dashed #cbd5e1;
  margin-bottom: 10px;
}
.co-multi-all {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #0f172a;
}
.co-multi-all input { width: 18px; height: 18px; cursor: pointer; }
.co-multi-count {
  background: #1e40af;
  color: white;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
}
.co-multi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
}
.co-multi-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1.5px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  transition: all 0.15s;
}
.co-multi-chip:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.co-multi-chip input {
  width: 16px; height: 16px; cursor: pointer;
}
.co-multi-chip:has(input:checked) {
  background: #dbeafe;
  border-color: #1e40af;
  color: #1e3a8a;
}

.co-picker-section {
  margin-top: 12px;
}

/* ─── Per-tab KPI strip in General Definitions ─── */
.gd-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
.gd-kpi-strip.sky     { background: linear-gradient(135deg, #f0f9ff, white); border-color: #bae6fd; }
.gd-kpi-strip.emerald { background: linear-gradient(135deg, #ecfdf5, white); border-color: #a7f3d0; }
.gd-kpi-strip.teal    { background: linear-gradient(135deg, #f0fdfa, white); border-color: #99f6e4; }
.gd-kpi-strip.green   { background: linear-gradient(135deg, #f0fdf4, white); border-color: #bbf7d0; }
.gd-kpi-strip.amber   { background: linear-gradient(135deg, #fffbeb, white); border-color: #fde68a; }
.gd-kpi-strip.orange  { background: linear-gradient(135deg, #fff7ed, white); border-color: #fed7aa; }

.gd-kpi {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  transition: all 0.15s;
}
.gd-kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
  border-color: #cbd5e1;
}
.gd-kpi-ic {
  font-size: 22px;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #f8fafc;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gd-kpi-num {
  font-size: 18px;
  font-weight: 900;
  font-family: 'SF Mono', Menlo, monospace;
  color: #0f172a;
  line-height: 1.1;
}
.gd-kpi-lbl {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd-kpi.success { background: linear-gradient(135deg, #f0fdf4, white); border-color: #bbf7d0; }
.gd-kpi.success .gd-kpi-ic { background: #dcfce7; }
.gd-kpi.success .gd-kpi-num { color: #166534; }
.gd-kpi.warning { background: linear-gradient(135deg, #fef3c7, white); border-color: #fde68a; }
.gd-kpi.warning .gd-kpi-ic { background: #fef3c7; }
.gd-kpi.warning .gd-kpi-num { color: #92400e; }
.gd-kpi.gray    { background: #f8fafc; border-color: #e2e8f0; }
.gd-kpi.gray .gd-kpi-num { color: #64748b; }

@media (max-width: 720px) {
  .gd-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Revenue Tree (شجرة الإيرادات) ─── */
.rv-summary-pill {
  background: #ecfdf5; border: 1px solid #a7f3d0;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; color: #065f46; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.rv-summary-pill strong { color: #065f46; font-family: 'SF Mono', Menlo, monospace; }

.rv-tree {
  padding: 8px 14px;
  background: #fafafa;
  background-image:
    linear-gradient(rgba(101, 163, 13, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 163, 13, 0.02) 1px, transparent 1px);
  background-size: 30px 30px;
}
.rv-tree-node {
  margin-bottom: 4px;
}
.rv-tree-node.main {
  background: white;
  border: 1.5px solid #a7f3d0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(4, 120, 87, 0.05);
  transition: all 0.2s;
}
.rv-tree-node.main:hover {
  border-color: #34d399;
  box-shadow: 0 4px 10px rgba(4, 120, 87, 0.12);
}
.rv-tree-node.main.inactive { opacity: 0.55; }
.rv-tree-node.main.orphan {
  border-color: #fecaca; background: #fef2f2;
}
.rv-tree-node.sub {
  background: var(--el-tree-l3);
  border: 1px solid rgba(4,120,87,0.10);
  border-inline-start: 3px solid var(--el-tree-l3-edge);
  border-radius: 8px;
  margin-bottom: 4px;
  transition: all 0.15s;
}
.rv-tree-node.sub:hover {
  border-color: rgba(4,120,87,0.28);
  background: var(--el-tree-l1);
}
.rv-tree-node.sub.inactive { opacity: 0.55; }

.rv-tree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.rv-tree-node.main > .rv-tree-row {
  /* 🌳 v813 — سطر الجذر = L0 من السلّم الموحّد */
  background: linear-gradient(90deg, var(--el-tree-l0) 0%, var(--el-tree-l1) 100%);
  border-inline-start: 3px solid var(--el-tree-l0-edge);
}
.rv-tree-node.main.orphan > .rv-tree-row {
  background: linear-gradient(90deg, #fef2f2 0%, white 60%);
}
.rv-tree-toggle {
  background: linear-gradient(135deg, #047857, #10b981);
  color: white;
  border: none;
  width: 24px; height: 24px;
  border-radius: 6px;
  cursor: pointer;
  font-size:10.5px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.rv-tree-toggle.open { background: linear-gradient(135deg, #014034, #047857); }
.rv-tree-toggle:hover { transform: scale(1.1); }
.rv-tree-leaf {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: #cbd5e1; font-size: 14px;
  flex-shrink: 0;
}
.rv-tree-leaf-line {
  width: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
  flex-shrink: 0;
}
.rv-tree-icon {
  font-size: 20px;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rv-tree-icon.main { background: #d1fae5; }
.rv-tree-icon.sub.product { background: #ecfdf5; }
.rv-tree-icon.sub.service { background: #e0f2fe; }
.rv-tree-icon.orphan { background: #fee2e2; }
.rv-tree-info { flex: 1; min-width: 0; }
.rv-tree-name {
  font-weight: 700;
  color: #0f172a;
  font-size: 13.5px;
  line-height: 1.3;
}
.rv-tree-node.main .rv-tree-name {
  font-size: 14.5px;
  color: var(--el-tree-ink);
  font-weight: 800;
}
.rv-tree-name-en {
  color: #64748b;
  font-weight: 500;
  font-size: 11px;
}
.rv-tree-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 11px;
  color: #64748b;
}
.rv-pill-meta {
  background: #f1f5f9;
  color: #475569;
  padding: 2px 8px;
  border-radius: 6px;
  font-size:10.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.rv-pill-meta.price {
  background: #fef3c7;
  color: #78350f;
}
.rv-tree-stats {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.rv-tree-stat {
  background: white;
  border: 1px solid #e2e8f0;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}
.rv-tree-stat.empty { background: transparent; border-style: dashed; color: #94a3b8; }
.rv-tree-actions {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.rv-tree-children {
  padding: 6px 22px 12px 56px;
  border-inline-start: 2px dashed #a7f3d0;   /* v813 — كانت خاصية مكسورة حرفياً */
  margin-inline-start: 32px;
  margin-top: 0;
  background: #fcfefd;
}
[dir="rtl"] .rv-tree-children {
  border-left: 0;
  border-right: 2px dashed #a7f3d0;
  padding-left: 22px;
  padding-right: 56px;
  margin-left: 0;
  margin-right: 32px;
}
.rv-tree-child-add {
  margin-top: 6px;
  padding: 6px;
  text-align: center;
}

@media (max-width: 900px) {
  .rv-tree-children { padding-${"inline-start"}: 24px; margin-${"inline-start"}: 16px; }
  .rv-tree-stats { display: none; }
  .rv-tree-icon { width: 28px; height: 28px; font-size: 16px; }
}

/* ─── Expense Tree (شجرة المصروفات) — same skeleton — v803: identity palette (was rose) ─── */
.ex-summary-pill {
  background: #f0fdf4; border: 1px solid #a7f3d0;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; color: #065f46; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.ex-summary-pill strong { color: #047857; font-family: 'SF Mono', Menlo, monospace; }
.ex-summary-pill.warn { background: #fef3c7; border-color: #fbbf24; color: #78350f; }
.ex-summary-pill.warn strong { color: #92400e; }

.ex-tree {
  padding: 8px 14px;
  background: #fafafa;
  background-image:
    linear-gradient(rgba(1, 64, 52, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 64, 52, 0.02) 1px, transparent 1px);
  background-size: 30px 30px;
}
.ex-tree-node { margin-bottom: 4px; }
.ex-tree-node.main {
  /* 🎨 v804 — قاعدة المالك: الرئيسي أخضر داكن قليلاً، والفرعي أخضر فاتح.
     كانت الصفوف **بيضاء** والحدّ وحده ملوَّناً، فلا يُميَّز الرئيسي من الفرعي. */
  background: var(--el-tree-l1);
  border: 1.5px solid rgba(4,120,87,0.20);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(1, 64, 52, 0.05);
  transition: all 0.2s;
}
.ex-tree-node.main:hover {
  border-color: #059669;
  box-shadow: 0 4px 10px rgba(1, 64, 52, 0.12);
}
.ex-tree-node.main.inactive { opacity: 0.55; }
.ex-tree-node.main.orphan {
  border-color: #fecaca; background: #fef2f2;
}
.ex-tree-node.sub {
  background: var(--el-tree-l3);       /* v813 — سلّم المستويات الموحّد */
  border: 1px solid rgba(4,120,87,0.10);
  border-inline-start: 3px solid var(--el-tree-l3-edge);
  border-radius: 8px;
  margin-bottom: 4px;
  transition: all 0.15s;
}
.ex-tree-node.sub:hover { border-color: rgba(4,120,87,0.28); background: var(--el-tree-l1); }
.ex-tree-node.sub.inactive { opacity: 0.55; }

.ex-tree-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
.ex-tree-node.main > .ex-tree-row {
  /* 🌳 v813 — سطر الجذر = L0 من السلّم الموحّد */
  background: linear-gradient(90deg, var(--el-tree-l0) 0%, var(--el-tree-l1) 100%);
  border-inline-start: 3px solid var(--el-tree-l0-edge);
}
.ex-tree-node.main.orphan > .ex-tree-row {
  background: linear-gradient(90deg, #fef2f2 0%, white 60%);
}
.ex-tree-toggle {
  background: linear-gradient(135deg, #047857, #059669);
  color: white; border: none;
  width: 24px; height: 24px; border-radius: 6px;
  cursor: pointer; font-size:10.5px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; transition: transform 0.15s;
  flex-shrink: 0;
}
.ex-tree-toggle.open { background: linear-gradient(135deg, #065f46, #047857); }
.ex-tree-toggle:hover { transform: scale(1.1); }
.ex-tree-leaf {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: #cbd5e1; font-size: 14px;
  flex-shrink: 0;
}
.ex-tree-leaf-line {
  width: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
  flex-shrink: 0;
}
.ex-tree-icon {
  font-size: 20px;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ex-tree-icon.main { background: #d1fae5; }
.ex-tree-icon.sub { background: #fff7ed; }
.ex-tree-icon.orphan { background: #fee2e2; }
.ex-tree-info { flex: 1; min-width: 0; }
.ex-tree-name {
  font-weight: 700; color: #0f172a;
  font-size: 13.5px; line-height: 1.3;
}
.ex-tree-node.main .ex-tree-name {
  font-size: 14.5px; color: #04231d; font-weight: 800;
}
.ex-tree-name-en {
  color: #64748b; font-weight: 500; font-size: 11px;
}
.ex-tree-meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 4px; font-size: 11px; color: #64748b;
}
.ex-tree-stats {
  display: flex; gap: 6px; align-items: center; flex-shrink: 0;
}
.ex-tree-stat {
  background: white; border: 1px solid #e2e8f0;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #475569;
}
.ex-tree-stat.empty {
  background: transparent; border-style: dashed; color: #94a3b8;
}
.ex-tree-actions {
  display: flex; gap: 3px; flex-shrink: 0;
}
.ex-tree-children {
  padding: 6px 22px 12px 56px;
  border-${"inline-start"}: 2px dashed #a7f3d0;
  margin-${"inline-start"}: 32px;
  background: #fdf9f9;
}
[dir="rtl"] .ex-tree-children {
  border-left: 0;
  border-right: 2px dashed #a7f3d0;
  padding-left: 22px;
  padding-right: 56px;
  margin-left: 0;
  margin-right: 32px;
}
.ex-tree-child-add {
  margin-top: 6px; padding: 6px; text-align: center;
}

@media (max-width: 900px) {
  .ex-tree-children { padding-${"inline-start"}: 24px; margin-${"inline-start"}: 16px; }
  .ex-tree-stats { display: none; }
  .ex-tree-icon { width: 28px; height: 28px; font-size: 16px; }
}

/* Export toolbar (used in general_defs.js between tabs and content) */
.gd-export-toolbar {
  background: white;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}
.gd-export-toolbar-label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin-inline-end: 6px;
}

/* Clickable 📎 attachments pill in tables */
.co-attach-btn {
  transition: all 0.15s;
  position: relative;
}
.co-attach-btn:hover {
  background: #6d28d9 !important;
  color: white !important;
  transform: scale(1.08);
  box-shadow: 0 3px 8px rgba(124,58,237,0.35);
}
.co-attach-btn:active { transform: scale(0.96); }

/* Attachments viewer modal */
.co-att-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(135deg, #faf5ff, #fff7ed);
  border: 1.5px solid #e9d5ff;
  border-radius: 12px;
  margin-bottom: 16px;
}

.co-att-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
}

.co-att-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  transition: all 0.18s;
}
.co-att-item:hover {
  border-color: #a855f7;
  box-shadow: 0 4px 12px rgba(168,85,247,0.10);
  transform: translateY(-1px);
}

.co-att-icon {
  font-size: 32px;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #faf5ff, #fef3c7);
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.co-att-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.co-att-name {
  font-size: 13px;
  font-weight: 800;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.co-att-meta {
  font-size: 11px;
  color: #6b7280;
  font-feature-settings: "tnum" 1;
}

.co-att-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Chart of Accounts (CoA) — Tree & Modal
   ═══════════════════════════════════════════════════════════════════════ */

/* View mode toggle */
.coa-view-toggle {
  display: flex;
  gap: 4px;
  background: #f3f4f6;
  border-radius: 8px;
  padding: 3px;
}

/* Tree container */
.coa-tree {
  background: white;
  padding: 8px;
  margin: 0;
  border-radius: 0 0 14px 14px;
  font-size: 13px;
}

.coa-tree-node { margin: 0; }

.coa-tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  /* 🌳 v813 — الخلفية من سلّم المستويات الموحّد: العمق يقودها لا الحالة.
     الأساس = المستويات العميقة (L4)، والمستويات 0-3 تتظلّل بالسمة أدناه. */
  background: var(--el-tree-l4);
  border: 1px solid rgba(4,120,87,0.10);
  border-inline-start: 3px solid var(--el-tree-l4-edge);
  margin-bottom: 2px;
  transition: background .15s, border-color .15s, filter .12s;
  cursor: default;
}
.coa-tree-node[data-depth="0"] > .coa-tree-row { background: var(--el-tree-l0); border-inline-start-color: var(--el-tree-l0-edge); }
.coa-tree-node[data-depth="1"] > .coa-tree-row { background: var(--el-tree-l1); border-inline-start-color: var(--el-tree-l1-edge); }
.coa-tree-node[data-depth="2"] > .coa-tree-row { background: var(--el-tree-l2); border-inline-start-color: var(--el-tree-l2-edge); }
.coa-tree-node[data-depth="3"] > .coa-tree-row { background: var(--el-tree-l3); border-inline-start-color: var(--el-tree-l3-edge); }
/* الحومان يُعتِّم درجةً واحدة فيبقى التدرّج النسبي محفوظاً على كل مستوى */
.coa-tree-row:hover { filter: brightness(0.96); border-color: rgba(4,120,87,0.32); }
/* الوزن يتبع الأبوّة (لا العمق): مَن تحته فروع يُقرأ عنواناً */
.coa-tree-node.has-children > .coa-tree-row,
.coa-tree-row.is-parent { font-weight: 800; }
.coa-tree-node.has-children > .coa-tree-row .coa-tree-name,
.coa-tree-row.is-parent .coa-tree-name { color: var(--el-tree-ink); }

.coa-tree-indent { flex-shrink: 0; }

.coa-tree-toggle {
  background: white;
  /* v803 — الرمادي الافتراضي صار زمردي الهوية؛ ولون النوع يبقى إن وُجد
     لأنه **يحمل معنى** (أصل · خصم · إيراد · مصروف) لا هوية. */
  border: 1.5px solid var(--type-color, #a7f3d0);
  color: var(--type-color, #047857);
  width: 22px; height: 22px;
  border-radius: 6px;
  font-size:10.5px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.coa-tree-toggle:hover {
  background: var(--type-color, #cbd5e1);
  color: white;
}

.coa-tree-leaf {
  width: 22px;
  text-align: center;
  color: #d1d5db;
  font-size:10.5px;
  flex-shrink: 0;
}

.coa-tree-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.coa-tree-code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 800;
  color: #374151;
  background: #f3f4f6;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 12px;
  flex-shrink: 0;
  min-width: 60px;
  text-align: center;
}

.coa-tree-name {
  flex: 1;
  font-weight: 700;
  color: #1f2937;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coa-tree-type {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1.5px solid;
  flex-shrink: 0;
}

.coa-tree-count {
  background: #6366f1;
  color: white;
  font-size:10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: 'Inter', monospace;
  flex-shrink: 0;
}

.coa-tree-company {
  font-size: 11px;
  color: #6b7280;
  flex-shrink: 0;
  background: #f9fafb;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.coa-tree-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.coa-tree-children {
  position: relative;
  margin-inline-start: 16px;
  border-inline-start: 2px dashed #e5e7eb;
  padding-inline-start: 8px;
  margin-top: 2px;
}

/* Account Level Picker (in modal) */
.coa-level-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) { .coa-level-picker { grid-template-columns: 1fr; } }

.coa-level-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.coa-level-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.coa-level-option:hover {
  border-color: #10b981;
  background: #f0fdfa;
  transform: translateY(-2px);
}
.coa-level-option.selected {
  background: linear-gradient(135deg, #d1fae5, #ecfdf5);
  border-color: #10b981;
  box-shadow: 0 6px 16px rgba(16,185,129,0.20);
}
.coa-level-icon {
  font-size: 36px;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.coa-level-option.selected .coa-level-icon {
  background: linear-gradient(135deg, #10b981, #047857);
  border-color: #047857;
  filter: grayscale(0);
}
.coa-level-info {
  flex: 1;
}
.coa-level-title {
  font-size: 14px;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 3px;
}
.coa-level-option.selected .coa-level-title { color: #047857; }
.coa-level-desc {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}

/* Parent select (with hierarchical indented options) */
#coa_parentId {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Journal Entries — Multi-line entry table
   ═══════════════════════════════════════════════════════════════════════ */
.jv-lines-container {
  background: white;
  border: 1.5px solid #93c5fd;
  border-radius: 12px;
  overflow: hidden;
}

.jv-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.jv-lines-table thead th {
  background: linear-gradient(180deg, #dbeafe, #bfdbfe);
  color: #1e40af;
  padding: 10px 8px;
  text-align: start;
  font-size: 12px;
  font-weight: 800;
  border-bottom: 2px solid #93c5fd;
  white-space: nowrap;
}

.jv-lines-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid #eff6ff;
  vertical-align: middle;
}

.jv-lines-table tbody tr:hover {
  background: #f0f9ff;
}

.jv-lines-table input[type="text"],
.jv-lines-table input[type="number"],
.jv-lines-table input[data-amt] {
  width: 100%;
  padding: 6px 10px;
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  outline: none;
  transition: border-color 0.15s;
}
.jv-lines-table input[type="number"], .jv-lines-table input[data-amt] {
  font-family: 'SF Mono', Menlo, monospace;
  text-align: end;
  font-weight: 700;
}
.jv-lines-table input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.jv-lines-table .jv-debit-input { background: #fef2f2; }
.jv-lines-table .jv-credit-input { background: #f0fdf4; }
.jv-lines-table .jv-debit-input:focus { background: white; border-color: #ef4444; }
.jv-lines-table .jv-credit-input:focus { background: white; border-color: #10b981; }

/* Customer / Supplier dropdowns inside each journal line */
.jv-lines-table .jv-party-cell {
  padding: 4px 6px;
}
.jv-lines-table .jv-client-input,
.jv-lines-table .jv-supplier-input {
  width: 100%;
  font-size: 11px;
  padding: 5px 4px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #f8fafc;
}
.jv-lines-table .jv-client-input { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }
.jv-lines-table .jv-supplier-input { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.jv-lines-table .jv-client-input:focus,
.jv-lines-table .jv-supplier-input:focus { background: white; outline: none; }
.jv-lines-table .jv-party-na {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: #cbd5e1;
  cursor: help;
}

/* Account search dropdown */
.jv-account-cell {
  position: relative;
}
.jv-account-dropdown {
  /* Positioning is set by JS (position:fixed) so the dropdown is never
     clipped by the modal's scrollable container. CSS only handles visuals. */
  z-index: 10100;
  background: white;
  border: 1.5px solid #3b82f6;
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.22), 0 2px 6px rgba(0,0,0,0.06);
}
.jv-account-dropdown.hidden { display: none; }
.jv-account-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: white;
  border: none;
  border-bottom: 1px solid #f3f4f6;
  text-align: start;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: background 0.12s;
}
.jv-account-option:hover {
  background: #eff6ff;
}
.jv-account-option:last-child { border-bottom: none; }
.jv-account-no-match {
  padding: 14px;
  text-align: center;
  color: #9ca3af;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Purchase Invoices — Hero / Toolbar / Table / Type picker
   ═══════════════════════════════════════════════════════════════════════ */
.pi-hero { background: linear-gradient(135deg, #012b23 0%, #014034 55%, #047857 100%); color: #fff; padding: 16px 20px; border-radius: 14px; margin-bottom: 14px; box-shadow: 0 4px 12px rgba(1,64,52,0.18); } /* v828 — كان بنفسجياً */
.pi-hero-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pi-hero-title { display: flex; align-items: center; gap: 12px; flex: 1; }
.pi-hero-icon { font-size: 38px; background: rgba(255,255,255,0.18); border-radius: 14px; padding: 8px 12px; }
.pi-hero-title h1 { margin: 0; font-size: 22px; font-weight: 900; }
.pi-hero-title p { margin: 2px 0 0; font-size: 12px; opacity: 0.92; }
.pi-hero-actions { display: flex; gap: 8px; }
.pi-hero-btn { background: rgba(255,255,255,0.16); color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 800; cursor: pointer; }
.pi-hero-btn:hover { background: rgba(255,255,255,0.28); }
.pi-hero-btn.primary { background: #10b981; border-color: transparent; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.pi-hero-btn.primary:hover { background: #34d399; }
.pi-hero-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 10px; }
.pi-hero-kpi { background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.pi-hero-kpi-ic { font-size: 22px; }
.pi-hero-kpi-val { font-size: 16px; font-weight: 900; font-family: 'Inter', monospace; }
.pi-hero-kpi-lbl { font-size: 11px; opacity: 0.88; font-weight: 700; }

.pi-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 12px; }
.pi-input { padding: 8px 12px; border: 1.5px solid #cbd5e1; border-radius: 8px; font-size: 12.5px; background: #fff; min-width: 150px; flex: 1; }
.pi-reset { cursor: pointer; background: #f1f5f9; font-weight: 700; flex: 0; }

/* 📌 v1178 — قاعدة 601: `overflow-x:auto` الثابت يُجبر `overflow-y` على قيمة تمرير
   فيكسر الرأسَ اللاصق — وهذه أطولُ قائمةٍ مالية عند المالك، يمرّر فيها فيفقد أسماء
   الأعمدة. التمريرُ الأفقي يضعه `table_polish` بـ`data-tp-x` **بالقياس** متى لم يسع
   الجدولُ حاويته، ويرفعه فور أن يسع. والحاويةُ تعلن `table-wrapper` في الـmarkup
   لأن `table_polish.fitWide` يشترط الصنفَ صراحةً — فقاعدةٌ خاصّةٌ هنا كانت ستبقى
   ميتةً (قاعدة 14)، والمركزيةُ `.table-wrapper[data-tp-x]` هي العاملة. */
.pi-table-wrap { background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; overflow: visible; }
.pi-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pi-table th { background: #014034; color: #fff; padding: 10px 8px; font-weight: 800; font-size: 11.5px; white-space: nowrap; }
.pi-table td { padding: 9px 8px; border-bottom: 1px solid #e2e8f0; }
.pi-table td.num { font-family: monospace; font-weight: 700; text-align: end; }
.pi-table tr:hover { background: #f0fdf4; }
.pi-table .mono { font-family: monospace; }
.pi-empty { text-align: center; padding: 60px 20px; color: #94a3b8; font-size: 14px; }

.pi-type-badge { padding: 3px 9px; border-radius: 6px; font-size: 10.5px; font-weight: 800; }
.pi-type-badge.goods { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
.pi-type-badge.fa { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* Lines table inside modal */
.pi-lines-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pi-lines-table th { background: #f3e8ff; color: #5b21b6; padding: 8px 6px; font-weight: 800; }
.pi-lines-table td { padding: 6px 4px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.pi-lines-table td.num { font-family: monospace; font-weight: 700; text-align: end; }
.pi-lines-table input, .pi-lines-table select { padding: 5px 8px; border: 1.5px solid #cbd5e1; border-radius: 6px; font-size: 12px; background: #fff; }

.pi-mode-pill { background: rgba(255,255,255,0.18); padding: 2px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; margin-inline-start: 8px; }

/* Type picker grid */
.pi-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .pi-type-grid { grid-template-columns: 1fr; } }
.pi-type-card { position: relative; text-align: start; padding: 18px; border: 2px solid #cbd5e1; border-radius: 14px; background: linear-gradient(135deg, #faf5ff, #ffffff); cursor: pointer; transition: all 0.18s; display: flex; flex-direction: column; gap: 8px; }
.pi-type-card:hover { border-color: #7c3aed; background: linear-gradient(135deg, #f5f3ff, #ede9fe); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(124,58,237,0.18); }
.pi-type-card-asset { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fcd34d; }
.pi-type-card-asset:hover { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #f59e0b; }
.pi-type-ic { font-size: 36px; }
.pi-type-title { font-size: 15px; font-weight: 800; color: #0f172a; }
.pi-type-sub { font-size: 12px; color: #64748b; line-height: 1.5; }
.pi-type-arrow { position: absolute; top: 14px; inset-inline-end: 14px; font-size: 20px; color: #7c3aed; }
.pi-type-card-asset .pi-type-arrow { color: #b45309; }

/* ═══════════════════════════════════════════════════════════════════════
   Sales Invoice — Invoice Type Picker (goods vs. fixed-asset)
   ═══════════════════════════════════════════════════════════════════════ */
.si-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .si-type-grid { grid-template-columns: 1fr; } }
.si-type-card {
  position: relative;
  text-align: start;
  padding: 18px;
  border: 2px solid #cbd5e1;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.si-type-card:hover {
  border-color: #0e7490;
  background: linear-gradient(135deg, #f0f9ff, #ecfeff);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(14,116,144,0.18);
}
.si-type-card-soon { background: linear-gradient(135deg, #fffbeb, #fef3c7); border-color: #fcd34d; }
.si-type-card-soon:hover { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #f59e0b; box-shadow: 0 8px 22px rgba(245,158,11,0.18); }
.si-type-ic { font-size: 36px; }
.si-type-title { font-size: 15px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.si-type-sub { font-size: 12px; color: #64748b; line-height: 1.5; }
.si-type-arrow { position: absolute; top: 14px; inset-inline-end: 14px; font-size: 20px; color: #0e7490; }
.si-type-card-soon .si-type-arrow { color: #b45309; }
.si-type-soon-badge { background: #f59e0b; color: #fff; font-size: 10.5px; padding: 2px 8px; border-radius: 8px; font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════════════
   Sales Invoice — Prepaid (unused receipts) section
   ═══════════════════════════════════════════════════════════════════════ */
.si-prepaid-empty {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1.5px dashed #fdba74;
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #9a3412;
}
.si-prepaid-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #1e3a8a;
  margin-bottom: 12px;
}
.si-prepaid-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #ecfeff, #cffafe);
  border: 1.5px solid #67e8f9;
  border-radius: 10px 10px 0 0;
  border-bottom: 0;
  font-size: 13px;
  color: #155e75;
  flex-wrap: wrap;
}
.si-prepaid-toolbar .si-prepaid-hint {
  font-size: 11.5px;
  color: #075985;
  font-style: italic;
  margin-inline-start: auto;
}
.si-prepaid-info .mono { font-family: 'Inter', monospace; font-weight: 800; }
.si-prepaid-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; font-size: 12.5px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.si-prepaid-table th { background: linear-gradient(135deg, #0e7490, #0891b2); color: #fff; padding: 10px 8px; font-weight: 800; font-size: 11.5px; white-space: nowrap; }
.si-prepaid-table td { padding: 8px 8px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
.si-prepaid-table td.num { font-family: monospace; font-weight: 700; text-align: end; }
.si-prepaid-table tr:hover { background: #f8fafc; }
.si-prepaid-table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #0891b2; }
.si-prepaid-table input[type="number"], .si-prepaid-table input[data-amt] { width: 110px; padding: 6px 8px; border: 1.5px solid #cbd5e1; border-radius: 6px; font-family: monospace; font-weight: 700; text-align: end; }
.si-prepaid-table input[type="number"]:disabled, .si-prepaid-table input[data-amt]:disabled { background: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
.si-prepaid-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════
   Auto-generated codes (doc numbers, asset codes, etc.) — visual lock
   ═══════════════════════════════════════════════════════════════════════ */
.auto-code-lock {
  display: inline-block;
  font-size: 11px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  padding: 1px 7px;
  border-radius: 6px;
  margin-inline-start: 6px;
  font-weight: 800;
  vertical-align: middle;
}
input.auto-code-locked {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
  color: #0f172a !important;
  cursor: not-allowed !important;
  border-color: #cbd5e1 !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px;
}
input.auto-code-locked:focus {
  outline: none;
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 2px rgba(148,163,184,0.18) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   JV Account Picker — TREE-style dropdown
   ═══════════════════════════════════════════════════════════════════════ */
.jv-account-dropdown { max-height: 360px; }
.jv-account-tree-hint {
  padding: 7px 12px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-bottom: 1.5px solid #93c5fd;
  font-size: 11px;
  color: #1e3a8a;
  font-weight: 700;
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.jv-acc-scope-chip {
  margin-inline-start: auto;
  background: #0891b2;
  color: #fff;
  padding: 2px 9px;
  border-radius: 8px;
  font-size:10.5px;
  font-weight: 800;
  white-space: nowrap;
}
.jv-acc-scope-chip.warn { background: #f59e0b; color: #422006; }
.jv-account-tree-body {
  padding: 4px 0;
}
.jv-account-tree-empty {
  padding: 18px;
  text-align: center;
  color: #94a3b8;
  font-size: 12.5px;
  font-style: italic;
}
.jv-account-tree-trunc {
  padding: 7px 12px;
  background: #fff7ed;
  border-top: 1px dashed #fdba74;
  font-size: 11px;
  color: #9a3412;
  text-align: center;
  font-weight: 700;
  position: sticky; bottom: 0;
}
/* Parent rows — display-only, not clickable */
.jv-account-tree-parent {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: linear-gradient(90deg, #f8fafc, #f1f5f9);
  border-bottom: 1px dashed #cbd5e1;
  font-size: 11.5px;
  color: #475569;
  cursor: default;
  user-select: none;
  opacity: 0.85;
}
.jv-account-tree-parent .jv-acc-name {
  font-weight: 800;
  color: #334155;
}
.jv-account-tree-parent .jv-acc-parent-pill {
  margin-inline-start: auto;
  background: #e0e7ff;
  color: #3730a3;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
}
/* Leaf rows — clickable buttons */
.jv-account-tree-leaf {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 8px 10px;
  background: white;
  border: none;
  border-bottom: 1px solid #f1f5f9;
  text-align: start;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s;
  color: #1e293b;
}
.jv-account-tree-leaf:hover {
  background: linear-gradient(90deg, #ecfdf5, #d1fae5);
  transform: translateX(2px);
  box-shadow: inset 3px 0 0 #10b981;
}
[dir="rtl"] .jv-account-tree-leaf:hover {
  transform: translateX(-2px);
  box-shadow: inset -3px 0 0 #10b981;
}
.jv-account-tree-leaf.is-match {
  background: linear-gradient(90deg, #fef3c7, #fde68a);
}
.jv-account-tree-leaf.is-match:hover {
  background: linear-gradient(90deg, #fde68a, #fcd34d);
}
.jv-acc-bullet {
  width: 18px;
  text-align: center;
  font-size: 12px;
  flex-shrink: 0;
}
.jv-acc-typeic {
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 10.5px;
  flex-shrink: 0;
}
.jv-acc-code {
  font-weight: 800;
  color: #374151;
  font-size: 11px;
  flex-shrink: 0;
}
.jv-acc-name {
  flex: 1;
  font-weight: 600;
}
.jv-acc-type-pill {
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Totals row */
.jv-line-totals td {
  background: linear-gradient(180deg, #fef3c7, #fde68a) !important;
  color: #78350f !important;
  font-weight: 800 !important;
  padding: 10px 8px !important;
  border-top: 2px solid #fcd34d !important;
}
.jv-total-value {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 14px;
  font-weight: 900;
  color: #78350f;
}
.jv-balance-status {
  text-align: center;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 14px !important;
  border-radius: 8px;
}
.jv-balance-status.balanced {
  background: linear-gradient(135deg, #10b981, #047857) !important;
  color: white !important;
}
.jv-balance-status.unbalanced {
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  color: white !important;
  animation: pulse-warn 2s ease-in-out infinite;
}
@keyframes pulse-warn {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* Status picker option cards */
.jv-status-opt {
  user-select: none;
}
.jv-status-opt:not(.is-current):hover {
  border-color: #93c5fd !important;
  background: #f0f9ff !important;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════
   Treasury Transfers — Pro Dashboard
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero */
.tr-hero {
  /* v828 — كان سيان (#0e7490→#06b6d4): آخر جزر ما-قبل-Emerald Ledger */
  background: linear-gradient(135deg, #012b23 0%, #014034 55%, #047857 100%);
  border-radius: 20px;
  padding: 22px 26px;
  color: white;
  margin-bottom: 14px;
  box-shadow: 0 10px 30px rgba(1, 64, 52, 0.25);
}
.tr-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tr-hero-title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tr-hero-title h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}
.tr-hero-title p {
  margin: 2px 0 0;
  font-size: 13px;
  opacity: 0.92;
}
.tr-hero-icon {
  font-size: 36px;
  background: rgba(255, 255, 255, 0.18);
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.tr-hero-actions {
  display: flex;
  gap: 8px;
}

/* Period chips */
.tr-period-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tr-period-label {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.85;
  margin-inline-end: 4px;
}
.tr-period-chip {
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: white;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.tr-period-chip:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}
.tr-period-chip.active {
  background: white;
  color: #0891b2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: white;
}

/* 4 big headline KPIs */
.tr-hero-headline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.tr-kpi-big {
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: all 0.2s;
}
.tr-kpi-big:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.tr-kpi-big-icon {
  font-size: 28px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tr-kpi-big-body { flex: 1; min-width: 0; }
.tr-kpi-big-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.88;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}
.tr-kpi-big-value {
  font-size: 22px;
  font-weight: 900;
  font-family: 'SF Mono', Menlo, monospace;
  line-height: 1.1;
  margin-bottom: 2px;
}
.tr-kpi-big-sub {
  font-size: 11px;
  opacity: 0.85;
  font-weight: 500;
}
.tr-kpi-big.primary  { border-color: rgba(167, 243, 208, 0.4); }
.tr-kpi-big.success  { border-color: rgba(110, 231, 183, 0.5); background: rgba(16, 185, 129, 0.18); }
.tr-kpi-big.info     { border-color: rgba(147, 197, 253, 0.5); background: rgba(59, 130, 246, 0.18); }
.tr-kpi-big.warning  { border-color: rgba(252, 211, 77, 0.5); background: rgba(245, 158, 11, 0.18); }

/* Mini KPIs */
.tr-hero-mini {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.tr-mini-kpi {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.tr-mini-icon { font-size: 22px; opacity: 0.95; }
.tr-mini-num {
  font-size: 16px;
  font-weight: 800;
  font-family: 'SF Mono', Menlo, monospace;
  line-height: 1;
}
.tr-mini-lbl {
  font-size:10.5px;
  font-weight: 600;
  opacity: 0.85;
  margin-top: 2px;
}
/* 🎨 v1178 — مُعدِّلات بطاقات الهيرو المصغّرة (سندات القبض · قاعدة 11).
   كانت تُكتب في receipts.js بلا تعريف هنا فتخرج الخمس متطابقةَ الشكل ولا يميّز
   المُرحَّلَ من الملغى شيء. النسق نفسه المستعمل في .tr-kpi-big أعلاه (خلفية
   شفّافة فوق تدرّج الهيرو + حدّ)، والدلالة كما في البرنامج: أخضر مُرحَّل ·
   كهرماني قيد الاعتماد · أحمر ملغى · أزرق معلومة · تيل الهوية للإيراد. */
.tr-mini-kpi.posted    { background: rgba(16, 185, 129, 0.18); border-color: rgba(110, 231, 183, 0.5); }
.tr-mini-kpi.drafts    { background: rgba(245, 158, 11, 0.18); border-color: rgba(252, 211, 77, 0.5); }
.tr-mini-kpi.voided    { background: rgba(239, 68, 68, 0.16);  border-color: rgba(252, 165, 165, 0.5); }
.tr-mini-kpi.customers { background: rgba(59, 130, 246, 0.18); border-color: rgba(147, 197, 253, 0.5); }
.tr-mini-kpi.revenue   { background: rgba(20, 184, 166, 0.18); border-color: rgba(153, 246, 228, 0.5); }

/* Alerts */
.tr-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: 13px;
}
.tr-alert-warning {
  background: #fef3c7;
  border: 1.5px solid #fbbf24;
  color: #78350f;
}

/* Treasury Balance Strip */
.tr-balance-card {
  background: white;
  border-radius: 14px;
  border: 1.5px solid #e0f2fe;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.06);
}
.tr-balance-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: 14px;
  color: #0e7490;
  margin-bottom: 12px;
}
.tr-balance-hint {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}
.tr-balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.tr-balance-tile {
  background: #f0f9ff;
  border: 1.5px solid #bae6fd;
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: start;
  font-family: inherit;
}
.tr-balance-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(8, 145, 178, 0.15);
  border-color: #0891b2;
}
.tr-balance-tile.positive { border-${"left"}-width: 4px; border-${"left"}-color: #10b981; }
.tr-balance-tile.negative { border-${"left"}-width: 4px; border-${"left"}-color: #ef4444; }
.tr-balance-tile.neutral  { border-${"left"}-width: 4px; border-${"left"}-color: #94a3b8; }
[dir="rtl"] .tr-balance-tile.positive { border-left: 1.5px solid #bae6fd; border-right: 4px solid #10b981; }
[dir="rtl"] .tr-balance-tile.negative { border-left: 1.5px solid #bae6fd; border-right: 4px solid #ef4444; }
[dir="rtl"] .tr-balance-tile.neutral  { border-left: 1.5px solid #bae6fd; border-right: 4px solid #94a3b8; }
.tr-balance-tile-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.tr-balance-tile-icon { font-size: 22px; }
.tr-balance-tile-name {
  flex: 1;
  font-weight: 800;
  font-size: 13px;
  color: #0e7490;
}
.tr-balance-tile-count {
  background: #0891b2;
  color: white;
  font-size:10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}
.tr-balance-tile-acct {
  font-size:10.5px;
  color: #64748b;
  font-family: 'SF Mono', Menlo, monospace;
  margin-bottom: 8px;
}
.tr-balance-tile-flows { display: flex; flex-direction: column; gap: 5px; }
.tr-balance-flow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
}
.tr-balance-flow.in   strong { color: #10b981; }
.tr-balance-flow.out  strong { color: #ef4444; }
.tr-balance-flow-bar {
  background: #e0f2fe;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  grid-column: 1 / -1;
  margin-bottom: 2px;
}
.tr-balance-flow.in  .tr-balance-flow-bar > div { background: linear-gradient(90deg, #10b981, #34d399); height: 100%; }
.tr-balance-flow.out .tr-balance-flow-bar > div { background: linear-gradient(90deg, #ef4444, #f87171); height: 100%; }
.tr-balance-tile-net {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #cbd5e1;
  font-size: 12px;
  font-weight: 800;
}
.tr-balance-tile.positive .tr-balance-tile-net strong { color: #10b981; }
.tr-balance-tile.negative .tr-balance-tile-net strong { color: #ef4444; }
.tr-balance-tile.neutral  .tr-balance-tile-net strong { color: #64748b; }

/* Top Routes */
.tr-routes-card {
  background: white;
  border-radius: 14px;
  border: 1.5px solid #e0e7ff;
  padding: 14px 18px;
  margin-bottom: 12px;
}
.tr-routes-header {
  font-weight: 800;
  font-size: 14px;
  color: #4338ca;
  margin-bottom: 10px;
}
.tr-routes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}
.tr-route-tile {
  background: #eef2ff;
  border: 1.5px solid #c7d2fe;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  text-align: start;
  flex-wrap: wrap;
}
.tr-route-tile:hover {
  background: #e0e7ff;
  border-color: #6366f1;
  transform: translateY(-1px);
}
.tr-route-from, .tr-route-to {
  font-weight: 700;
  font-size: 12px;
  color: #312e81;
}
.tr-route-arrow {
  font-size: 14px;
  color: #6366f1;
  font-weight: 800;
}
.tr-route-meta {
  margin-${"inline-start"}: auto;
  font-size: 11px;
  color: #4338ca;
  font-weight: 700;
  font-family: 'SF Mono', Menlo, monospace;
  background: white;
  padding: 2px 8px;
  border-radius: 6px;
}

/* Responsive */
@media (max-width: 1100px) {
  .tr-hero-headline { grid-template-columns: repeat(2, 1fr); }
  .tr-hero-mini     { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .tr-hero-headline { grid-template-columns: 1fr; }
  .tr-hero-mini     { grid-template-columns: repeat(2, 1fr); }
}

/* Treasury Transfer: JV preview + account info */
.tr-acct-info {
  margin-top: 4px;
  min-height: 18px;
}
.tr-jv-preview {
  background: #f0f9ff;
  border: 1.5px dashed #7dd3fc;
  border-radius: 10px;
  padding: 12px;
}
.tr-jv-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  font-size: 12px;
}
.tr-jv-table th {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  color: white;
  padding: 8px 10px;
  text-align: start;
  font-weight: 700;
}
.tr-jv-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #e0f2fe;
}
.tr-jv-table tfoot td {
  background: #ecfeff;
  font-weight: 800;
  border-top: 2px solid #06b6d4;
  border-bottom: none;
}
.tr-jv-table .mono {
  font-family: 'SF Mono', Menlo, monospace;
}

/* ═══ v1052 — معاينة قيد فاتورة البيع: البيان المفسَّر + سبب المنع المكتوب ═══
   الرفض يُقال بسببه ويسمّي الحساب أو الصنف الناقص، بدل إسقاط سطر صامت. */
.si-jv-desc {
  font-size: 12px;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-inline-start: 3px solid var(--el-teal-800, #014034);
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 8px;
  line-height: 1.7;
}
.si-jv-blocked {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  border-radius: 8px;
  padding: 10px 12px;
}
.si-jv-blocked-t {
  font-weight: 800;
  color: #b91c1c;
  font-size: 13px;
  margin-bottom: 4px;
}
.si-jv-blocked-b {
  font-size: 12px;
  color: #7f1d1d;
  line-height: 1.8;
}

/* ═══════════════════════════════════════════════════════════════════════
   Companies V3 — Corporate Navy/Slate Palette
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══ v0.37.9.620 — Establishment profile redesign (hybrid CRM + official ID) ═══
   New co2-* system: one Emerald-Ledger identity band + country-true ID card +
   verification seals + a single completeness meter. Themed (no inline drift). */
.co2 { padding: 2px 2px 16px; }
.co2-band { background: linear-gradient(120deg, #014034, #013229); border-radius: 18px; padding: 20px 22px; color: #fff; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(1,64,52,.22); }
.co2-band::after { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 200px at 90% -20%, rgba(16,185,129,.25), transparent); pointer-events: none; }
.co2-logo { width: 66px; height: 66px; border-radius: 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; font-size: 27px; font-weight: 800; flex: 0 0 auto; overflow: hidden; z-index: 1; }
.co2-logo img { width: 100%; height: 100%; object-fit: contain; }
.co2-bmain { flex: 1 1 220px; min-width: 0; z-index: 1; }
.co2-bname { font-size: 21px; font-weight: 900; letter-spacing: -.3px; line-height: 1.2; }
.co2-bnameen { font-size: 12.5px; opacity: .72; direction: ltr; font-weight: 600; margin-top: 1px; }
.co2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.co2-chip { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.co2-chip.ok { background: rgba(16,185,129,.28); border-color: rgba(16,185,129,.5); }
.co2-chip.warn { background: rgba(0,0,0,.22); }
.co2-bact { display: flex; gap: 8px; flex-wrap: wrap; z-index: 1; align-items: flex-start; }
.co2-btn { border: 0; border-radius: 10px; padding: 9px 15px; font-weight: 800; font-size: 12.5px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
.co2-btn-p { background: #fff; color: #014034; }
.co2-btn-g { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); }
.co2-btn-g:hover, .co2-btn-p:hover { filter: brightness(1.05); }
.co2-audit { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.3); border-radius: 10px; padding: 8px 12px; font-size: 12px; font-weight: 800; color: #fff; }
.co2-audit.on { background: rgba(16,185,129,.32); }
.co2-audit input { width: auto; margin: 0; accent-color: #10b981; cursor: pointer; }
.co2-row2 { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; margin-top: 14px; align-items: stretch; }
.co2-card { background: var(--bg-card, #fff); border: 1px solid var(--line, #e4ede9); border-radius: 14px; padding: 16px; box-shadow: 0 2px 10px rgba(1,64,52,.05); }
.co2-ctitle { font-size: 12px; font-weight: 800; color: var(--text-muted, #5c6f68); margin: 0 0 12px; display: flex; align-items: center; gap: 7px; }
.co2-idlabel { font-size: 11px; color: var(--text-muted, #5c6f68); font-weight: 700; }
/* v0.37.9.632 — identifiers: LTR-isolated, NO letter-spacing/grouping (spacing
   made the digits read reversed in the RTL page). */
.co2-idnum { font-size: 25px; font-weight: 900; letter-spacing: .5px; font-family: ui-monospace, 'SF Mono', monospace; direction: ltr; unicode-bidi: isolate; text-align: start; margin: 2px 0 4px; color: #014034; }
.co2-idnum.miss { color: #b45309; font-size: 16px; letter-spacing: 0; cursor: pointer; }
.co2-idsub { font-size: 12.5px; color: var(--text-muted, #5c6f68); font-weight: 600; text-align: start; }
.co2-idsub b { color: var(--text, #0b1f1a); font-family: ui-monospace, monospace; letter-spacing: .5px; direction: ltr; unicode-bidi: isolate; display: inline-block; }
.co2-idsub b.miss { color: #b45309; cursor: pointer; }
.co2-seals { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.co2-seal { display: inline-flex; align-items: center; gap: 6px; border-radius: 10px; padding: 7px 11px; font-size: 11.5px; font-weight: 800; border: 1px solid; }
.co2-seal.on { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.co2-seal.off { background: transparent; border: 1px dashed #cbd5e1; color: #94a3b8; }
/* v0.37.9.638 — seals are status indicators only: never clickable */
.co2-seal { cursor: default; user-select: none; }
.co2-seal .d { width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-size:10.5px; color: #fff; }
.co2-seal.on .d { background: #10b981; } .co2-seal.off .d { background: #cbd5e1; }
.co2-mtop { display: flex; align-items: baseline; gap: 10px; }
.co2-mpct { font-size: 30px; font-weight: 900; color: #014034; line-height: 1; }
.co2-mcap { font-size: 12px; font-weight: 700; color: var(--text-muted, #5c6f68); }
.co2-mbar { display: flex; gap: 2px; height: 12px; margin: 12px 0 9px; }
.co2-mslot { background: #eef2f0; border-radius: 4px; overflow: hidden; min-width: 0; }
.co2-mfill { display: block; height: 100%; background: linear-gradient(90deg, #047857, #10b981); border-radius: 4px; }
.co2-mlabels { display: flex; flex-wrap: wrap; gap: 10px 14px; font-size: 11px; color: var(--text-muted, #5c6f68); font-weight: 700; }
.co2-mlabels b { color: var(--text, #0b1f1a); }
.co2-mhint { font-size: 11.5px; font-weight: 800; color: #b45309; margin-top: 9px; }
.co2-mhint.done { color: #047857; }
.co2-facts { margin-top: 14px; }
.co2-factgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.co2-frow { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid #f1f5f4; font-size: 13px; }
.co2-frow .k { color: var(--text-muted, #5c6f68); font-weight: 600; }
.co2-frow .v { font-weight: 800; direction: ltr; text-align: end; min-width: 0; }
.co2-frow .v.miss { color: #b45309; font-weight: 700; cursor: pointer; }
.co2-frow a.v { text-decoration: none; color: inherit; }
.co2-frow a.v:hover { color: #047857; }
/* v0.37.9.621 — "needs completion" attention strip (promotes silent-alerts) */
.co2-attn { display: flex; flex-wrap: wrap; gap: 8px; }
/* v0.37.9.639 — attention chips are READ-ONLY indicators (no click, no modal) */
.co2-achip { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card, #fff); border: 1px solid var(--line, #e4ede9); border-radius: 10px; padding: 8px 12px; font-size: 12px; font-weight: 700; color: var(--text, #0b1f1a); cursor: default; user-select: none; font-family: inherit; }
.co2-adot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.co2-allset { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; border-radius: 10px; padding: 11px 14px; font-size: 12.5px; font-weight: 800; }
.co2-single { display: grid; grid-template-columns: 1fr; }
/* v0.37.9.622 — ownership donut (emerald ramp) in the profile */
.co2-own { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.co2-donut { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.co2-donut-h { width: 78px; height: 78px; border-radius: 50%; background: var(--bg-card, #fff); display: grid; place-items: center; font-weight: 900; font-size: 16px; }
.co2-legend { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.co2-leg-row { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.co2-leg-i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.co2-leg-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text, #0b1f1a); }
.co2-leg-pc { color: var(--text-muted, #5c6f68); font-weight: 800; }
@media (max-width: 780px) { .co2-row2 { grid-template-columns: 1fr; } .co2-factgrid { grid-template-columns: 1fr; } }
/* v0.37.9.624 — company modal: sticky section rail + live required meter */
.co-navbar { position: sticky; top: 0; z-index: 6; background: var(--bg-card, #fff); margin: -16px -16px 12px; padding: 10px 14px; border-bottom: 1px solid var(--line, #e4ede9); display: flex; flex-direction: column; gap: 8px; }
.co-req-meter { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--text-muted, #5c6f68); flex-wrap: wrap; }
.co-req-lbl { font-weight: 800; }
.co-req-dots { display: inline-flex; gap: 5px; }
.co-req-dots i { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid #cbd5e1; display: inline-block; transition: background .15s, border-color .15s; }
.co-req-dots i.on { background: #10b981; border-color: #10b981; }
.co-req-count { font-weight: 800; color: var(--text, #0b1f1a); }
.co-req-meter.done .co-req-count { color: #047857; }
.co-section-rail { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.co-rail-btn { flex: 0 0 auto; border: 1px solid var(--line, #e4ede9); background: var(--bg-hover, #f6faf8); color: var(--text-muted, #5c6f68); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; font-family: inherit; }
.co-rail-btn:hover { border-color: #10b981; color: #047857; background: #ecfdf5; }
/* v949→v950 — «البروز»: أقسام وأيقونات أبرز وخطوط أوضح لكل مودال يحمل الصنف .mx-pro (مودالات التعريفات) — يُطبَّق بـMED_UI.proModal(formId) */
.mx-pro .emp-section { padding: 18px 20px 16px !important; border-radius: 16px !important; border-color: #dbe7e2 !important; box-shadow: 0 8px 22px rgba(1,64,52,.06), 0 1px 3px rgba(15,23,42,.05); transition: box-shadow .18s, border-color .18s; }
.mx-pro .emp-section:hover { border-color: #a7f3d0 !important; box-shadow: 0 12px 28px rgba(1,64,52,.10), 0 1px 3px rgba(15,23,42,.05); }
.mx-pro .emp-section::before { width: 4px; top: 16px; bottom: 16px; }
.mx-pro .emp-section > h4 { font-size: 16px !important; font-weight: 900 !important; letter-spacing: 0 !important; gap: 12px; padding: 0 0 12px 6px !important; margin: 0 0 14px !important; border-bottom: 2px solid #e6f4ef !important; color: #014034 !important; }
.co-sec-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 19px; flex: 0 0 auto; color: #fff; background: linear-gradient(135deg, var(--ic-b, #014034), var(--ic-a, #10b981)); box-shadow: 0 6px 14px rgba(16,185,129,.28), inset 0 1px 0 rgba(255,255,255,.25); }
.co-sec-ttl { font-size: 16px; font-weight: 900; }
.mx-pro .form-field label { font-size: 12.5px; font-weight: 800; color: #0b1f1a; letter-spacing: 0; }
.mx-pro .form-field input[type="text"], .mx-pro .form-field input[type="number"], .mx-pro .form-field input[type="date"], .mx-pro .form-field input[type="email"], .mx-pro .form-field input[type="tel"], .mx-pro .form-field input[type="url"], .mx-pro .form-field select, .mx-pro .form-field textarea, .mx-pro .form-field input[data-amt] {
  font-size: 13.5px !important; padding: 10px 12px !important; border-radius: 10px !important; border: 1.5px solid #dbe7e2 !important; background-color: #fbfdfc !important; color: #0b1f1a; min-height: 40px; }
.mx-pro .form-field input:focus, .mx-pro .form-field select:focus, .mx-pro .form-field textarea:focus { border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16,185,129,.16) !important; background: #fff !important; }
.mx-pro .form-help { font-size: 11px; color: #5c6f68; }
.mx-pro .co-navbar { padding: 12px 16px; box-shadow: 0 6px 14px rgba(15,23,42,.05); }
.mx-pro .co-req-meter { font-size: 13px; }
.mx-pro .co-req-dots i { width: 13px; height: 13px; }
.mx-pro .co-rail-btn { font-size: 12.5px; font-weight: 800; padding: 6px 13px; }
.mx-pro .co-brand-lbl { font-size: 13px; font-weight: 900; color: #014034; }
.mx-pro .co-logo-preview { border-radius: 14px; box-shadow: 0 4px 12px rgba(15,23,42,.06); }
.mx-pro .btn.btn-outline.btn-sm { font-weight: 800; }
.co-mhead-ic { width: 48px; height: 48px; border-radius: 14px; font-size: 24px; background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.co-mhead-txt h3 { font-size: 18px; font-weight: 900; }
.co-mhead-sub { font-size: 12.5px; opacity: .88; }
/* v950 — ما لا يستعمل .emp-section: رؤوس form-section (التعريفات العامة) وتسميات عارية */
.mx-pro .form-section-header h4 { font-size: 15px; font-weight: 900; }
.mx-pro .form-section-header > span:first-child { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, #014034, #10b981); color: #fff; box-shadow: 0 6px 14px rgba(16,185,129,.25); }
.mx-pro .form-grid > label, .mx-pro .form-field > label, .mx-pro label.wfs-inline { font-size: 12.5px; font-weight: 800; color: #0b1f1a; }
.mx-pro .mu-nav { border-radius: 12px !important; box-shadow: 0 4px 12px rgba(15,23,42,.05); }
.mx-pro .mu-nav [data-mu-count] { font-size: 12.5px; }
.mx-pro .defs-secnav button, .mx-pro .co-rail-btn { font-weight: 800; }
/* v953 — البروز للمودالات التي لا تستعمل .emp-section/.form-field (المشاريع · الطبية · الشؤون الإدارية) */
.mx-pro .mu-secnum { width: 30px !important; height: 30px !important; font-size: 13px !important; border-radius: 10px !important; background: linear-gradient(135deg, #014034, #10b981) !important; box-shadow: 0 6px 14px rgba(16,185,129,.28); }
.mx-pro .mu-sectitle { font-size: 15px !important; font-weight: 900 !important; color: #014034 !important; }
.mx-pro h4.mu-sechead { font-size: 15.5px !important; font-weight: 900 !important; color: #014034 !important; display: flex; align-items: center; gap: 10px; }
.mx-pro h4.mu-sechead .pm-n { width: 30px; height: 30px; font-size: 13px; border-radius: 10px; background: linear-gradient(135deg, #014034, #10b981); color: #fff; display: inline-grid; place-items: center; box-shadow: 0 6px 14px rgba(16,185,129,.28); flex: 0 0 auto; }
.mx-pro label:not(.wfs-opt):not(.wfs-inline):not(.wfs-switch):not(.btn), .mx-pro .form-label, .mx-pro .lbl { font-size: 12.5px; font-weight: 800; color: #0b1f1a; }
/* v1230 — كانت المُحدِّدات الثلاثة في قاعدةٍ واحدة بخصوصيّاتٍ مختلفة: input بستّ :not() خصوصيّتُها 0,7,1
   بينما select وtextarea 0,1,1. فأيُّ شاشةٍ تكتب «.x input, .x select { font-size }» بمقاسها تخسر أمام
   الأولى وتغلب الأخيرتين ⇒ حجمان للخطّ ونصفا قطرٍ داخل المودال الواحد (قاعدة 115 — قِيس حيّاً في
   مودالات المشاريع: {13.5px, 12.5px} و{10px, 7px}). السلسلةُ نفسها على الثلاثة تُسوّي الخصوصيّة. */
.mx-pro input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not(.auto-code-locked), .mx-pro select:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not(.auto-code-locked), .mx-pro textarea:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not(.auto-code-locked) { font-size: 13.5px; border-radius: 10px; }
.mx-pro td input, .mx-pro td select, .mx-pro .boq-grid input, .mx-pro .cst-grid input { font-size: 13px; border-radius: 8px; }
.mx-pro .prj-modal-b { background: #fbfdfc; }
/* v954 — «البروز» لمعالجات الخطوات (صرف الرواتب · المخالصة): أنماطها مضمَّنة فتُغلَب بـ!important داخل .mx-pro.wz */
.mx-pro.wz h4.wz-sec { display: flex; align-items: center; gap: 10px; font-size: 15.5px !important; font-weight: 900 !important; color: #014034 !important; margin: 0 0 12px !important; padding-bottom: 10px; border-bottom: 2px solid #e6f4ef; }
.mx-pro.wz label:not(.btn) { font-size: 12.5px !important; font-weight: 800 !important; }
.mx-pro.wz input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), .mx-pro.wz select, .mx-pro.wz textarea { font-size: 13.5px !important; padding: 10px 12px !important; border-radius: 10px !important; border-width: 1.5px !important; border-color: #dbe7e2 !important; background-color: #fbfdfc !important; font-family: inherit; }
.mx-pro.wz input:focus, .mx-pro.wz select:focus, .mx-pro.wz textarea:focus { border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16,185,129,.16) !important; background: #fff !important; outline: none; }
.mx-pro.wz td input, .mx-pro.wz td select { font-size: 13px !important; padding: 6px 8px !important; border-radius: 8px !important; }
.mx-pro.wz .modal-body > div[style*="border-bottom:1px solid #e2e8f0"] { padding: 18px 22px !important; }
/* v0.37.9.625 — company logo + seal side-by-side in the modal */
.co-brand-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.co-brand-col { min-width: 0; }
.co-brand-lbl { font-size: 12px; font-weight: 800; color: var(--text-muted, #5c6f68); margin-bottom: 7px; }
.co-seal-preview { background: repeating-conic-gradient(#f6faf8 0% 25%, #eef2f0 0% 50%) 50% / 16px 16px; }
@media (max-width: 620px) { .co-brand-row { grid-template-columns: 1fr; } }
/* v0.37.9.626 → 629 — profile branding card: seal + a FULL A4 letterhead sheet */
.co2-brand { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: start; }
.co2-brand-cap { font-size: 11px; font-weight: 700; color: var(--text-muted, #5c6f68); margin-bottom: 6px; }
.co2-seal-box { height: 130px; border: 1px solid var(--line, #e4ede9); border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: repeating-conic-gradient(#f6faf8 0% 25%, #eef2f0 0% 50%) 50% / 16px 16px; }
.co2-seal-box img { max-width: 86%; max-height: 84%; object-fit: contain; }
/* v1090 — زرّ «سجل الإصدار المختوم» تحت خانة الختم في بطاقة الهوية */
.co2-seal-log { display: block; width: 100%; margin-top: 8px; padding: 7px 10px; border: 1px solid var(--line, #e4ede9); border-radius: 10px; background: #fff; color: #014034; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.co2-seal-log:hover { border-color: #0d6e5c; background: #f0fdf9; }
.co2-brand-empty { width: 100%; height: 130px; border: 1px dashed #cbd5e1; border-radius: 12px; background: transparent; color: #94a3b8; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.co2-brand-lh .co2-brand-empty { aspect-ratio: 210 / 297; height: auto; width: 100%; max-width: 250px; margin-inline: auto; display: grid; place-items: center; }
.co2-brand-empty:hover { border-color: #10b981; color: #047857; background: #ecfdf5; }
/* A4 letterhead sheet */
.co2-lh-box { aspect-ratio: 210 / 297; width: 100%; max-width: 250px; margin-inline: auto; border: 1px solid var(--line, #e4ede9); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; background: #fff; box-shadow: 0 8px 26px rgba(1,64,52,.14); }
.co2-lh-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 15px; border-bottom: 2.5px solid var(--primary, #014034); }
.co2-lh-head img { max-height: 34px; max-width: 40%; object-fit: contain; }
.co2-lh-body { flex: 1; padding: 16px 16px; display: flex; flex-direction: column; gap: 9px; }
.co2-lh-title { font-size: 11px; font-weight: 900; color: var(--primary, #014034); margin-bottom: 3px; }
.co2-lh-line { height: 6px; border-radius: 99px; background: #eef2f7; display: block; }
.co2-lh-foot { padding: 9px 15px; border-top: 1px solid var(--line, #e4ede9); text-align: center; }
.co2-lh-foot img { max-height: 18px; max-width: 70%; object-fit: contain; }
.co2-lh-foot-bar { background: var(--primary, #014034); height: 10px; padding: 0; border-top: 0; }
@media (max-width: 620px) { .co2-brand { grid-template-columns: 1fr; } }
.co2-brand-foot { margin-top: 12px; font-size: 11.5px; color: var(--text-muted, #5c6f68); font-weight: 700; }
.co2-brand-foot b { color: var(--text, #0b1f1a); }
/* 🖨️ v1266 — معاينةُ المطبوعة في صفحة المنشأة: معاينةُ المودال الحيّة نفسُها (lh-a4 بعرض 600) مصغَّرةً بنسبة الورقة،
   والتذييلُ في أسفلها بمحاذاته كما يُطبَع (text-align لا flex — نفسُ قاعدة lhx-ftr في PRINT_FRAME) */
.co2-lh-a4 { width: 252px; height: 357px; max-width: 100%; overflow: hidden; margin-inline: auto; border-radius: 6px; border: 1px solid var(--line, #e4ede9); }
/* الورقةُ بعرض A4 الحقيقي (794px = 210mm عند 96dpi) وبمقاسات المطبوعة نفسها، ثم تُصغَّر كلُّها بنسبةٍ واحدة (252 ÷ 794)
   — فتتصرّف الصورُ بمقاسها الطبيعيّ كما في نافذة الطباعة لا كما في معاينةٍ أضيق */
.co2-lh-a4 > .lh-a4 { width: 794px; max-width: none; margin: 0; box-shadow: none; padding: 30px 45px; -webkit-transform: scale(.3174); transform: scale(.3174); -webkit-transform-origin: top right; transform-origin: top right; }
/* هوامشُ المطبوعة الافتراضية نفسُها (PRINT_FRAME: 8mm أعلى وأسفل · 12mm جانبان) — والبانرُ يلغيها ليبلغ الحافّة */
.co2-lh-a4 .lh-a4-header.lh-a4-banner { margin: -30px -45px 0; }
.lh-a4-foot { border-top: 1px solid #e2e8f0; padding-top: 8px; text-align: center; }
/* الصورةُ سطريّة كما في نافذة الطباعة: preflight يجعل كل img كتلةً فتُهمَل محاذاةُ النصّ وتلتصق بأوّل السطر */
.lh-a4-foot img { display: inline-block; max-height: var(--lh-a4-f, 26px); max-width: 100%; object-fit: contain; vertical-align: middle; }
.co2-lh-facts { margin-top: 8px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text-muted, #5c6f68); }
.co2-pt-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; }
/* v0.37.9.640 — attachments viewer on the profile */
.co2-atts { display: flex; flex-direction: column; gap: 6px; max-height: 230px; overflow-y: auto; }
.co2-att { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line, #e4ede9); border-radius: 10px; text-decoration: none; color: inherit; background: var(--bg-card, #fff); transition: border-color .12s, background .12s; }
.co2-att:hover { border-color: #10b981; background: #ecfdf5; }
.co2-att-ic { flex: 0 0 auto; font-size: 18px; }
.co2-att-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.co2-att-name { font-size: 12.5px; font-weight: 700; color: var(--text, #0b1f1a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co2-att-meta { font-size: 10.5px; color: var(--text-muted, #5c6f68); font-weight: 600; }
/* v0.37.9.646 — the row is now a container: a wide "preview" button plus a
   dedicated download button, so both actions resolve the file properly
   (IDB-backed attachments have no usable href) and downloads keep their name. */
.co2-att-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  cursor: pointer; text-align: inherit; }
.co2-att-go { flex: 0 0 auto; color: #94a3b8; font-weight: 900; background: none; border: 0;
  padding: 4px 7px; border-radius: 7px; cursor: pointer; font-size: 15px; line-height: 1;
  transition: color .12s, background .12s; }
.co2-att:hover .co2-att-go { color: #047857; }
.co2-att-go:hover { background: #d1fae5; color: #065f46; }
.co2-att-empty { font-size: 12.5px; color: var(--text-muted, #5c6f68); padding: 14px 2px; text-align: center; }
/* v0.37.9.627 — premium modal header (icon tile + title + subtitle) */
.co-mhead { align-items: center; gap: 14px; }
.co-mhead-ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; font-size: 22px; flex: 0 0 auto; }
.co-mhead-txt { flex: 1; min-width: 0; }
.co-mhead-txt h3 { margin: 0; line-height: 1.2; }
.co-mhead-sub { font-size: 12px; opacity: .82; margin-top: 2px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v0.37.9.628 — REUSABLE convention (to be applied across ALL modals):
   required fields carry a RED box border so they're unmistakable. */
.req-field { border-color: #f87171 !important; box-shadow: 0 0 0 1px rgba(248,113,113,.16); }
.req-field:focus { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.18) !important; }
/* 👤 v1148 — مودال الموظف: خاناتٌ متساوية بمحاذاةٍ واحدة (بلاغ المالك: «مربعات متساوية التنسيق والمظهر … والمحافظة على المحاذاة الجيدة»).
   قِيس قبل التصميم (قاعدة 115): اثنا عشر ارتفاعَ تحكّمٍ مختلفاً (40–54px) وصفٌّ بـ156px بجوار صفٍّ بـ71px في القسم الأول.
   الآن: ارتفاعٌ واحد للتحكّم · شبكةٌ بأعمدةٍ متساوية تتدرّج بالعرض · التسمية سطرٌ واحد · والمساعدة تحت الخانة لا تُزيح جيرانها. */
#empForm { --emp-ctl: 40px; --emp-cols: 4; }
#empForm .emp-section .form-grid { grid-template-columns: repeat(var(--emp-cols), minmax(0, 1fr)) !important; gap: 14px !important; align-items: stretch; }
/* الخانة صندوقٌ واحد: تسمية · تحكّم بارتفاعٍ واحد · بقيّةُ المساحة للمساعدة — فتتساوى خانات الصفّ وتتحاذى تحكّماتها */
#empForm .form-field { display: grid; grid-template-rows: auto var(--emp-ctl) 1fr; gap: 5px; min-width: 0; }
/* v1184 — قاعدة 56: `display:grid` أعلاه (1,1,0) كان يغلب `[hidden]` فظهر صندوقُ امتيازات العقد الداخلي للرسميّ أيضاً */
#empForm .form-field[hidden] { display: none !important; }
#empForm .emp-field-help { font-size: 11px; }
#empForm .emp-field-help[data-state="bad"] { color: #b91c1c; font-weight: 700; }
#empForm .emp-field-help[hidden] { display: none !important; }
.emp-recent-name { font-size: 11px; font-weight: 700; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-photo-ctrl { min-width: 0; flex: 1; }
#empForm .form-field > label { font-size: 12.5px; font-weight: 800; color: #0b1f1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: end; }
#empForm .form-field > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#empForm .form-field > select {
  height: var(--emp-ctl) !important; min-height: var(--emp-ctl) !important; padding: 0 12px !important;
  font-size: 13.5px !important; border-radius: 10px !important; border: 1.5px solid #dbe7e2 !important; background-color: #fbfdfc !important; }
#empForm .form-field > input:focus, #empForm .form-field > select:focus { border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16,185,129,.16) !important; background-color: #fff !important; }
#empForm .form-field > textarea { min-height: calc(var(--emp-ctl) * 2.2); padding: 10px 12px !important; font-size: 13.5px !important; border-radius: 10px !important; border: 1.5px solid #dbe7e2 !important; background-color: #fbfdfc !important; }
#empForm .form-field > .form-help { font-size: 11px; line-height: 1.55; color: #64748b; }
#empForm .form-field.emp-span2 { grid-column: span 2; }
/* زرّ الترجمة تحت حقل الاسم: شريطٌ بعرض الحقل كان يُطيل الخانة — يصير زرّاً صغيراً في أوّل السطر */
#empForm .form-field > .tr-trigger-btn { justify-self: start; align-self: start; margin-top: 0 !important; }
@media (max-width: 1180px) { #empForm { --emp-cols: 3; } }
@media (max-width: 900px)  { #empForm { --emp-cols: 2; } }
@media (max-width: 620px)  { #empForm { --emp-cols: 1; } }

/* 🪪 v1147 — هوية الموظف: الخطأ يُرى ويمنع الحفظ (كان تلويناً بأنماطٍ مضمّنة والحفظ يمرّ) */
#empForm .emp-id-bad { border-color: #dc2626 !important; background: #fef2f2 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.14) !important; }
#empForm .emp-id-help { font-size: 11.5px; line-height: 1.6; color: #64748b; }
#empForm .emp-id-help[data-state="ok"] { color: #047857; font-weight: 700; }
#empForm .emp-id-help[data-state="bad"] { color: #b91c1c; font-weight: 800; }
/* v0.37.9.630 — structurally locked fields (country/currency after transactions) */
.co-locked-hint { color: #b45309 !important; font-weight: 700; }
#coForm select:disabled { background: #f4f6f5; color: #64748b; cursor: not-allowed; opacity: 1; }
#coForm select:disabled.req-field { border-color: #d7e0dc !important; box-shadow: none; }
/* view-only (audited) modal: dim + non-editable, but keep nav & close usable */
.co-view-banner { display: flex; align-items: center; gap: 8px; background: #fef3c7; border: 1px solid #fde68a; color: #92400e; border-radius: 10px; padding: 10px 14px; font-size: 12.5px; font-weight: 800; margin-bottom: 12px; }
#coForm.co-view-only input, #coForm.co-view-only select, #coForm.co-view-only textarea { background: #f8fafc; }
#coForm.co-view-only .req-field { border-color: var(--line, #e4ede9) !important; box-shadow: none; }

.co-hero-v2 {
  /* v0.37.9.620 — re-skinned from the retired ministerial navy+gold to Emerald
     Ledger (teal), matching the app. Hidden for single company (the identity
     band below replaces it); shown only for the >1 company test path. */
  background: linear-gradient(135deg, #014034 0%, #013229 50%, #014034 100%);
  border-radius: 18px;
  padding: 24px 28px;
  color: white;
  margin-bottom: 14px;
  box-shadow: 0 12px 32px rgba(1, 64, 52, 0.3), inset 0 -3px 0 rgba(16, 185, 129, 0.6);
  position: relative;
  overflow: hidden;
}
.co-hero-v2::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 92% 5%,  rgba(251,191,36,0.22) 0%, transparent 45%),
    radial-gradient(circle at 8%  95%, rgba(14,165,233,0.20) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(251,191,36,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.co-hero-v2::after {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
  pointer-events:none;
}
.co-hero-v2 > * { position: relative; z-index: 1; }
.co-hero-v2-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.co-hero-v2-title { display: flex; align-items: center; gap: 16px; }
.co-hero-v2-title h2 { margin: 0; font-size: 23px; font-weight: 900; letter-spacing: 0;
  color: #ffffff; }
.co-hero-v2-title p { margin: 4px 0 0; font-size: 13px; opacity: 0.85; font-weight: 500; }
.co-hero-v2-icon {
  font-size: 38px; background: linear-gradient(135deg, rgba(59,130,246,0.35), rgba(14,165,233,0.2));
  width: 64px; height: 64px; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 6px 16px rgba(59,130,246,0.18);
}
.co-hero-v2-headline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.co-kpi-big {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 16px 18px;
  display: flex; align-items: stretch; gap: 14px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}
.co-kpi-big::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 70%);
  pointer-events:none;
}
.co-kpi-big:hover { background: rgba(255,255,255,0.10); transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.22); border-color: rgba(255,255,255,0.22); }
.co-kpi-big-ic {
  font-size: 26px; flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
}
.co-kpi-big > div:last-child { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.co-kpi-big-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; opacity: 0.78; letter-spacing: 0.6px; }
.co-kpi-big-val {
  font-size: 26px; font-weight: 900;
  font-family: 'SF Mono', Menlo, monospace; line-height: 1.08;
  background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.co-kpi-big-sub { font-size: 11px; opacity: 0.78; margin-top: 2px; display: inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
.co-kpi-big-sub .chip-trend {
  display:inline-flex; align-items:center; gap:3px;
  background: rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.14);
  padding: 1px 7px; border-radius: 999px;
  font-size:10.5px; font-weight: 800;
}
.co-kpi-big-sub .chip-trend.up   { color:#86efac; background:rgba(34,197,94,0.16); border-color:rgba(34,197,94,0.3); }
.co-kpi-big-sub .chip-trend.down { color:#fca5a5; background:rgba(239,68,68,0.16); border-color:rgba(239,68,68,0.3); }
.co-kpi-big-sub .chip-trend.warn { color:#fcd34d; background:rgba(234,179,8,0.16); border-color:rgba(234,179,8,0.3); }
.co-kpi-big.total   { background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(59,130,246,0.04)); border-color: rgba(147,197,253,0.32); }
.co-kpi-big.total .co-kpi-big-ic { background: linear-gradient(135deg, rgba(59,130,246,0.35), rgba(29,78,216,0.2)); }
.co-kpi-big.capital { background: linear-gradient(135deg, rgba(16,185,129,0.22), rgba(16,185,129,0.04)); border-color: rgba(110,231,183,0.32); }
.co-kpi-big.capital .co-kpi-big-ic { background: linear-gradient(135deg, rgba(16,185,129,0.35), rgba(5,150,105,0.2)); }
.co-kpi-big.owners  { background: linear-gradient(135deg, rgba(168,85,247,0.22), rgba(168,85,247,0.04)); border-color: rgba(196,181,253,0.32); }
.co-kpi-big.owners .co-kpi-big-ic { background: linear-gradient(135deg, rgba(168,85,247,0.35), rgba(124,58,237,0.2)); }
.co-kpi-big.lic     { background: linear-gradient(135deg, rgba(245,158,11,0.22), rgba(245,158,11,0.04)); border-color: rgba(252,211,77,0.32); }
.co-kpi-big.lic .co-kpi-big-ic { background: linear-gradient(135deg, rgba(245,158,11,0.35), rgba(217,119,6,0.2)); }

/* Mini progress bar inside KPI cards */
.co-kpi-progress {
  height: 4px; background: rgba(255,255,255,0.08);
  border-radius: 2px; overflow:hidden; margin-top: 8px;
}
.co-kpi-progress > i {
  display:block; height:100%;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  border-radius: 2px;
}

.co-hero-v2-mini { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.co-mini-kpi {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px; padding: 9px 12px;
  display: flex; align-items: center; gap: 9px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: all 0.18s;
  position:relative;
  overflow:hidden;
}
.co-mini-kpi:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }
.co-mini-kpi::before {
  content:''; position:absolute; inset-inline-start:0; top:10%; bottom:10%; width:3px;
  background: linear-gradient(180deg, #38bdf8, #818cf8); border-radius:2px;
}
.co-mini-ic {
  font-size: 20px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.10);
  border-radius: 8px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.co-mini-num { font-size: 17px; font-weight: 900; font-family: 'SF Mono', Menlo, monospace; line-height: 1.05; color:#fff; }
.co-mini-lbl { font-size:10.5px; font-weight: 700; opacity: 0.78; margin-top: 2px; }

.co-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px; margin-bottom: 10px; font-size: 13px;
}
.co-alert-warning { background: #fef3c7; border: 1.5px solid #fbbf24; color: #78350f; }
.co-alert-danger  { background: #fee2e2; border: 1.5px solid #f87171; color: #991b1b; }

/* Cards View — Corporate */
.co-cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px; padding: 16px;
}
.co-card {
  background: white; border: 1px solid #e2e8f0; border-radius: 14px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  transition: all 0.2s; display: flex; flex-direction: column;
}
.co-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12); border-color: #1e40af; }
.co-card-banner {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  padding: 10px 12px; border-bottom: 1px solid #e2e8f0;
  min-height: 70px; display: flex; align-items: center;
}
.co-card-lh {
  display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 8px;
  width: 100%; align-items: center;
}
.co-card-lh-cell {
  display: flex; align-items: center; justify-content: center;
  height: 56px;
}
.co-card-lh-cell:first-child { justify-content: flex-end; }
.co-card-lh-cell:last-child { justify-content: flex-start; }
.co-card-lh-cell img { max-height: 56px; max-width: 100%; object-fit: contain; }
.co-card-banner-empty {
  font-size: 12px; color: #64748b; display: flex; align-items: center;
  justify-content: center; gap: 8px; width: 100%; font-weight: 600;
}
.co-card-body { padding: 14px; flex: 1; }
.co-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.co-card-logo {
  width: 56px; height: 56px; border-radius: 12px; border: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0; font-weight: 900; font-size: 22px; color: #1e40af;
}
.co-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.co-card-name { font-weight: 800; font-size: 15px; color: #0f172a; line-height: 1.3; }
.co-card-name-en { font-size: 11px; color: #64748b; }
.co-card-type { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.co-card-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: #f8fafc; padding: 10px; border-radius: 10px; margin-bottom: 8px;
  border: 1px solid #f1f5f9;
}
.co-card-meta > div { display: flex; flex-direction: column; }
.co-card-meta span { font-size:10.5px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
.co-card-meta strong { font-size: 12px; color: #0f172a; font-family: 'SF Mono', Menlo, monospace; margin-top: 1px; }
.co-card-extras { display: flex; flex-wrap: wrap; gap: 4px; }
.co-card-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 4px 8px; background: #f1f5f9; border-radius: 999px;
  color: #475569; font-weight: 700; border: 1px solid #e2e8f0;
}
.co-card-foot {
  display: flex; justify-content: center; gap: 6px; padding: 10px;
  background: #f8fafc; border-top: 1px solid #e2e8f0;
}

/* Stats Dashboard (Corporate / Pro) */
.co-stats-pro { padding: 16px; }
.co-stats-snapshot {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  margin-bottom: 14px;
}
.co-snap {
  background: white; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  transition: all 0.15s;
}
.co-snap:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,0.08); border-color: #cbd5e1; }
.co-snap-ic {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.co-snap-num { font-size: 18px; font-weight: 900; font-family: 'SF Mono', Menlo, monospace; color: #0f172a; line-height: 1.1; }
.co-snap-lbl { font-size:10.5px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }

.co-stats-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 14px;
}
.co-stats-panel {
  background: white; border: 1px solid #e2e8f0; border-radius: 14px;
  overflow: hidden;
}
.co-stats-panel.co-stats-full { margin-bottom: 14px; }
.co-stats-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; background: linear-gradient(180deg, #f8fafc, white);
  border-bottom: 1px solid #e2e8f0;
}
.co-stats-panel-head h4 { margin: 0; font-size: 14px; color: #0f172a; font-weight: 800; }
.co-stats-panel-meta { font-size: 12px; color: #64748b; font-weight: 600; }
.co-stats-panel-body { padding: 16px 18px; }

.co-stats-donut-wrap {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.co-donut { flex-shrink: 0; }
.co-donut-seg { transition: opacity 0.15s, transform 0.15s; transform-origin: center; }
.co-donut-seg:hover { opacity: 0.85; }
.co-stats-legend { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.co-stats-legend-row {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  padding: 6px 10px; background: #f8fafc; border-radius: 8px;
  border: 1px solid #f1f5f9;
}
.co-stats-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.co-stats-legend-row strong { color: #0f172a; font-size: 12px; }
.co-stats-legend-row .mono { color: #475569; font-size: 11px; font-family: 'SF Mono', Menlo, monospace; }

.co-timeline { width: 100%; height: auto; max-height: 220px; }

.co-fill-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.co-fill-tile {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 10px 12px; display: flex; align-items: center; gap: 10px;
}
.co-fill-tile strong { font-size: 13px; color: #0f172a; font-weight: 700; display: block; }
.co-fill-tile-sub { font-size: 11px; color: #64748b; font-family: 'SF Mono', Menlo, monospace; margin-top: 2px; }

/* Legacy stats cards (kept for compatibility) */
.co-stats-card {
  background: white; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 16px 18px; margin-bottom: 14px;
}
.co-stats-card h4 {
  margin: 0 0 12px; font-size: 14px; color: #0f172a; font-weight: 800;
}
.co-stats-types { display: flex; flex-direction: column; gap: 8px; }
.co-stats-type-row { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.co-stats-type-bar {
  flex: 1; background: #fef3c7; height: 14px; border-radius: 7px; overflow: hidden;
}
.co-stats-type-bar > div { height: 100%; border-radius: 7px; transition: width 0.3s; }
.co-lic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.co-lic-tile {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border-radius: 10px; border: 1.5px solid;
}
.co-lic-tile.valid    { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.co-lic-tile.expiring { background: #fef3c7; border-color: #fbbf24; color: #92400e; }
.co-lic-tile.expired  { background: #fee2e2; border-color: #f87171; color: #991b1b; }
.co-lic-tile.none     { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.co-lic-tile-ic { font-size: 26px; }
.co-lic-tile-lbl { font-size: 11px; font-weight: 700; opacity: 0.85; }
.co-lic-tile-val { font-size: 22px; font-weight: 900; font-family: 'SF Mono', Menlo, monospace; }
.co-stats-cap-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed #fde68a; font-size: 13px;
}
.co-stats-cap-row:last-child { border-bottom: none; }
.co-stats-rank {
  background: linear-gradient(135deg, #d97706, #f59e0b); color: white;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
}
.co-stats-cap-bar {
  flex: 1; min-width: 80px; background: #fef3c7;
  height: 8px; border-radius: 4px; overflow: hidden;
}
.co-stats-cap-bar > div { background: linear-gradient(90deg, #f59e0b, #d97706); height: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   Chart of Accounts — Pro Hero with KPIs (2 rows)
   ═══════════════════════════════════════════════════════════════════════ */
.coa-hero {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 35%, #047857 65%, #065f46 100%);
  border-radius: 18px;
  padding: 18px 22px;
  color: white;
  margin-bottom: 14px;
  box-shadow: 0 8px 28px rgba(6, 78, 59, 0.25);
  position: relative;
  overflow: hidden;
}
.coa-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(16,185,129,0.25) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(20,184,166,0.18) 0%, transparent 50%);
  pointer-events: none;
}
.coa-hero > * { position: relative; z-index: 1; }

.coa-hero-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.coa-hero-title { display: flex; align-items: center; gap: 12px; }
.coa-hero-title h2 { margin: 0; font-size: 20px; font-weight: 900; }
.coa-hero-title p { margin: 2px 0 0; font-size: 12px; opacity: 0.92; }
.coa-hero-icon {
  font-size: 32px;
  background: rgba(255,255,255,0.2);
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.coa-hero-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.coa-hero-company {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.15);
  color: white;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  min-width: 200px;
  font-family: inherit;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.coa-hero-company option { background: #064e3b; color: white; }
.coa-hero-btn {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 70%, #ecfdf5 100%);
  color: #064e3b;
  border: 0;
  padding: 9px 16px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.2px;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.85),
    0 8px 22px rgba(0,0,0,0.22),
    inset 0 -2px 0 rgba(0,0,0,0.04);
}
.coa-hero-btn:hover {
  background: linear-gradient(135deg, #ffffff, #d1fae5);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px rgba(255,255,255,1),
    0 12px 28px rgba(0,0,0,0.26),
    inset 0 -2px 0 rgba(0,0,0,0.04);
}

.coa-active-filter {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(251, 191, 36, 0.95);
  color: #78350f;
  font-weight: 800;
  font-size: 12px;
  padding: 5px 10px 5px 12px;
  border-radius: 999px;
  border: 1.5px solid #fbbf24;
}
.coa-active-filter-x {
  background: rgba(120,53,15,0.15);
  border: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  cursor: pointer;
  color: #78350f;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  font-size:10.5px;
}
.coa-active-filter-x:hover { background: rgba(120,53,15,0.3); }

/* Row 1: 4 headline big KPIs */
.coa-kpi-row-headline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.coa-kpi-big {
  background: rgba(255,255,255,0.14);
  border: 1.5px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: all 0.2s;
}
.coa-kpi-big:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.coa-kpi-big-ic {
  font-size: 26px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.22);
  width: 48px; height: 48px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.coa-kpi-big-body { flex: 1; min-width: 0; }
.coa-kpi-big-lbl { font-size: 11px; font-weight: 700; opacity: 0.88; text-transform: uppercase; letter-spacing: 0.4px; }
.coa-kpi-big-val { font-size: 22px; font-weight: 900; font-family: 'SF Mono', Menlo, monospace; line-height: 1.1; margin-top: 2px; }
.coa-kpi-big-sub { font-size: 11px; opacity: 0.85; margin-top: 2px; }
.coa-kpi-big.primary { border-color: rgba(167, 243, 208, 0.5); }
.coa-kpi-big.info    { background: rgba(59,130,246,0.18); border-color: rgba(147,197,253,0.5); }
.coa-kpi-big.success { background: rgba(16,185,129,0.22); border-color: rgba(110,231,183,0.5); }
.coa-kpi-big.warning { background: rgba(245,158,11,0.18); border-color: rgba(252,211,77,0.5); }

.coa-jump-bal {
  background: rgba(255,255,255,0.2);
  border: none;
  color: white;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 2px;
}
.coa-jump-bal:hover { background: rgba(255,255,255,0.35); }

/* Row 2: type chips + level chips strip */
.coa-kpi-row-types {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: rgba(0,0,0,0.15);
  padding: 8px;
  border-radius: 12px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.coa-type-chip {
  flex: 1; min-width: 140px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  cursor: pointer;
  color: white;
  transition: all 0.18s;
  font-family: inherit;
}
.coa-type-chip:hover {
  background: rgba(255,255,255,0.22);
  border-color: var(--type-color, white);
  transform: translateY(-1px);
}
.coa-type-chip.active {
  background: white;
  color: #064e3b;
  border-color: var(--type-color, white);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.coa-type-chip.active .coa-type-chip-name { color: var(--type-color, #064e3b); }
.coa-type-chip-ic {
  font-size: 18px;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.coa-type-chip.active .coa-type-chip-ic { background: var(--type-color, #064e3b)33; }
.coa-type-chip-name { font-size: 11px; font-weight: 700; opacity: 0.92; }
.coa-type-chip-num { font-size: 14px; font-weight: 900; font-family: 'SF Mono', Menlo, monospace; }
.coa-type-chip-num small { font-size:10.5px; opacity: 0.7; }

.coa-levels-strip {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.15);
}
.coa-levels-title { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.85); margin-${"inline-end"}: 4px; }
.coa-level-chip {
  background: rgba(255,255,255,0.15);
  border: 1.5px solid transparent;
  color: white;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  font-family: 'SF Mono', Menlo, monospace;
  transition: all 0.15s;
  display: inline-flex; align-items: baseline; gap: 4px;
}
.coa-level-chip small { font-size:10.5px; opacity: 0.75; font-weight: 600; }
.coa-level-chip:hover { background: rgba(255,255,255,0.25); transform: translateY(-1px); }
/* v0.37.9.673 — the level chips are now DERIVED from the tree's real depth, so a
   buyer with 7 levels gets 7 chips. This generic active state covers level 6 and
   beyond; the numbered rules below are more specific and still win for 1–5. */
.coa-level-chip.active { background: white; color: #047857; border-color: white; }
.coa-level-chip.l1.active { background: white; color: #1e3a8a; border-color: white; }
.coa-level-chip.l2.active { background: white; color: #4338ca; border-color: white; }
.coa-level-chip.l3.active { background: white; color: #7c3aed; border-color: white; }
.coa-level-chip.l4.active { background: white; color: #db2777; border-color: white; }
.coa-level-chip.l5.active { background: white; color: #c2410c; border-color: white; }

@media (max-width: 1100px) {
  .coa-kpi-row-headline { grid-template-columns: repeat(2, 1fr); }
  .coa-hero-company { min-width: 160px; }
}
@media (max-width: 640px) {
  .coa-kpi-row-headline { grid-template-columns: 1fr; }
  .coa-type-chip { min-width: calc(50% - 6px); }
}

/* ─── Journal Locked Banner (JV linked to a source screen) ─── */
.jv-locked-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1.5px solid #fbbf24;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(251, 191, 36, 0.15);
}
.jv-locked-banner button {
  flex-shrink: 0;
  background: white;
  color: #78350f;
  border: 1.5px solid #fbbf24;
  font-weight: 800;
}
.jv-locked-banner button:hover {
  background: #fef3c7;
  transform: translateY(-1px);
}

/* ─── v1040 · بانر فشل الحفظ في مودال القيد — دائم لا toast عابر ─── */
.jv-save-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-inline-start: 4px solid #dc2626;
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 12px;
}
.jv-save-error-ic { font-size: 18px; line-height: 1.2; }
.jv-save-error-t { font-size: 13px; font-weight: 800; color: #991b1b; }
.jv-save-error-m { font-size: 12.5px; color: #7f1d1d; margin-top: 3px; word-break: break-word; }

/* ─── CoA Balances View (Trial Balance) ─── */
.coa-bal-strip {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  padding: 12px 18px; background: #f0fdf4;
  border-top: 1px solid #bbf7d0; border-bottom: 1px solid #bbf7d0;
}
.coa-bal-period {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: #166534; font-weight: 600;
}
.coa-bal-period input[type="date"] {
  padding: 6px 10px;
  border: 1.5px solid #86efac;
  border-radius: 8px;
  font-size: 12px;
  background: white;
}
.coa-bal-status {
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
}
.coa-bal-status.balanced {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.coa-bal-status.unbalanced {
  background: linear-gradient(135deg, #f59e0b, #dc2626);
  color: white;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
  animation: pulse-warn 2s ease-in-out infinite;
}

.coa-bal-summary {
  padding: 16px 18px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
}
.coa-bal-summary h4 {
  margin: 0 0 10px;
  font-size: 14px;
  color: #065f46;
  font-weight: 800;
}
.coa-bal-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.coa-bal-summary-table th {
  background: #ecfdf5;
  color: #065f46;
  padding: 8px 12px;
  border: 1px solid #d1fae5;
  font-weight: 800;
  text-align: start;
}
.coa-bal-summary-table td {
  padding: 8px 12px;
  border: 1px solid #f0fdf4;
  font-family: 'SF Mono', Menlo, monospace;
}
.coa-bal-summary-table tfoot td { padding: 10px 12px; }

.coa-bal-table {
  width: 100%;
  border-collapse: collapse;
}
.coa-bal-table thead th {
  background: linear-gradient(135deg, #065f46, #047857);
  color: white;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 12px;
  text-align: start;
}
.coa-bal-table tbody tr.parent-row {
  background: #f0fdf4;
}
.coa-bal-table tbody tr.parent-row td { font-weight: 800; }
.coa-bal-table tbody tr.leaf:hover { background: #f8fafc; }
.coa-bal-table td { padding: 8px 12px; border-bottom: 1px solid #f1f5f9; font-size: 12px; }
.coa-bal-table .mono { font-family: 'SF Mono', Menlo, monospace; }

/* Level pills (L1-L5) for trial balance */
.coa-bal-level-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 11px;
  font-family: 'SF Mono', Menlo, monospace;
  color: white;
  text-align: center;
  min-width: 32px;
}
.coa-bal-level-pill.l1 { background: linear-gradient(135deg, #1e3a8a, #1d4ed8); }
.coa-bal-level-pill.l2 { background: linear-gradient(135deg, #4338ca, #6366f1); }
.coa-bal-level-pill.l3 { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.coa-bal-level-pill.l4 { background: linear-gradient(135deg, #db2777, #ec4899); }
.coa-bal-level-pill.l5 { background: linear-gradient(135deg, #c2410c, #ea580c); }

/* Grand total row */
.coa-bal-grand-total {
  background: linear-gradient(90deg, #0f172a, #1e293b) !important;
  color: white;
  font-weight: 800;
}
.coa-bal-grand-total td { color: white; padding: 12px 12px !important; }
.coa-bal-grand-total td strong { color: white; }

/* Header rows with rowspan and colspan styling */
.coa-bal-table thead th { color: white; }
.coa-bal-table thead tr:nth-child(2) th { font-size: 11px; padding: 6px 10px; }

/* ─── Companies Inner Tabs (Corporate, 4×2 grid) ─── */
.co-tabs-bar {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 16px;
  padding: 8px;
  margin-bottom: 14px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255,255,255,0.7);
}
.co-tabs-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.co-tab-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 10px;
  border: 1.5px solid transparent;
  border-radius: 11px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  color: #475569;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.22s ease;
  font-family: inherit;
  position: relative;
  min-height: 58px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-tab-btn::before {
  content:''; position:absolute; inset:0;
  border-radius:11px;
  background: linear-gradient(135deg, rgba(255,255,255,0.5), transparent);
  opacity:0; transition: opacity 0.22s;
  pointer-events:none;
}
.co-tab-btn:hover {
  background: linear-gradient(180deg, #f1f5f9, #e2e8f0);
  color: #0f172a;
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.co-tab-btn.active {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: white;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.35), inset 0 1px 0 rgba(255,255,255,0.18);
  transform: translateY(-2px);
  border-color: transparent;
}
.co-tab-btn.active::before { opacity:1; }
.co-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 4px;
  background: inherit;
  border-radius: 2px;
  box-shadow: 0 2px 8px currentColor;
}
/* v0.37.9.622 — calm the rainbow: every active tab uses ONE Emerald-Ledger
   color instead of 7 per-tab gradients (matches the redesigned profile). */
.co-tab-btn.active,
.co-tab-btn.active[data-color] { background: linear-gradient(135deg, #014034, #047857); }
.co-tab-count {
  background: rgba(255,255,255,0.22);
  color: inherit;
  font-size: 10.5px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  margin-inline-start: 4px;
  border: 1px solid rgba(255,255,255,0.14);
  font-family: 'SF Mono', Menlo, monospace;
  min-width: 22px;
  display: inline-flex;
  justify-content: center;
}
.co-tab-btn:not(.active) .co-tab-count {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

/* ── Tab clusters: data views (brand teal) + tools/analytics (amber) ── */
.co-tabs-group { margin-bottom: 10px; }
.co-tabs-group:last-child { margin-bottom: 0; }
.co-tabs-group-lbl {
  font-size: 10.5px; font-weight: 800; color: #94a3b8;
  text-transform: uppercase; letter-spacing: 0.7px;
  padding: 2px 6px 7px; display: flex; align-items: center; gap: 6px;
}
.co-tabs-bar .co-tabs-inner-data,
.co-tabs-bar .co-tabs-inner-tools { grid-template-columns: repeat(5, 1fr); }
/* Unified active colours by GROUP (replaces the per-tab rainbow) */
.co-tab-btn.active[data-group="data"] { background: linear-gradient(135deg, #0c4a6e, #075985); }
.co-tab-btn.active[data-group="tool"] { background: linear-gradient(135deg, #b45309, #d97706); }
/* Meaningful badge tones */
.co-tab-count.warn { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.co-tab-count.good { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.co-tab-btn.active .co-tab-count.warn { background: rgba(251,191,36,0.28); color: #fde68a; border-color: rgba(251,191,36,0.45); }
.co-tab-btn.active .co-tab-count.good { background: rgba(16,185,129,0.28); color: #a7f3d0; border-color: rgba(16,185,129,0.45); }

/* Inner hero for each tab — refined with inline metric chips */
.co-inner-hero {
  margin: 0 -1px;
  padding: 16px 22px;
  color: white;
  border-radius: 14px 14px 0 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.co-inner-hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 85% 10%, rgba(255,255,255,0.18) 0%, transparent 50%),
    radial-gradient(circle at 15% 90%, rgba(0,0,0,0.18) 0%, transparent 55%);
  pointer-events:none;
}
.co-inner-hero > * { position: relative; z-index: 1; }
.co-inner-hero-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; width: 100%; flex-wrap: wrap;
}
.co-inner-hero-title { display: flex; align-items: center; gap: 14px; }
.co-inner-hero-icon {
  font-size: 30px;
  background: rgba(255,255,255,0.22);
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.co-inner-hero-title h2 { margin: 0; font-size: 18px; font-weight: 900; letter-spacing:-0.2px; }
.co-inner-hero-title p { margin: 3px 0 0; font-size: 12px; opacity: 0.92; font-weight: 600; }

/* Inline metric chips inside tab inner hero */
.co-inner-hero-chips {
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.co-hero-chip {
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.22);
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space:nowrap;
  transition: all 0.18s;
}
.co-hero-chip:hover { background: rgba(255,255,255,0.28); transform: translateY(-1px); }
.co-hero-chip .ic { font-size: 14px; }
.co-hero-chip .val { font-family:'SF Mono',Menlo,monospace; font-weight:900; }
.co-hero-chip.success { background: rgba(34,197,94,0.28); border-color: rgba(110,231,183,0.36); }
.co-hero-chip.warning { background: rgba(234,179,8,0.28);  border-color: rgba(253,224,71,0.36); }
.co-hero-chip.danger  { background: rgba(239,68,68,0.28);  border-color: rgba(252,165,165,0.36); }

.co-inner-add-btn {
  background: linear-gradient(180deg, #fff, #f1f5f9);
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  transition: all 0.18s;
}
.co-inner-add-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }

/* ─── Tab KPI strip — premium card design ──────────────────────────── */
.co-tab-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}
.co-tab-kpi {
  display: flex; align-items: center; gap: 10px;
  background: white;
  border: 1.5px solid #e2e8f0;
  padding: 11px 14px;
  border-radius: 12px;
  transition: all 0.18s;
  position: relative;
  overflow: hidden;
}
.co-tab-kpi::before {
  content:''; position:absolute;
  inset-inline-start: 0; top: 14%; bottom: 14%;
  width: 4px;
  background: linear-gradient(180deg, #cbd5e1, #94a3b8);
  border-radius: 0 4px 4px 0;
}
.co-tab-kpi:hover {
  border-color: #94a3b8;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15,23,42,0.09);
}
.co-tab-kpi span:first-child {
  font-size: 22px;
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.co-tab-kpi > div { display:flex; flex-direction:column; gap:1px; }
.co-tab-kpi strong {
  font-size: 18px; font-weight: 900;
  font-family: 'SF Mono', Menlo, monospace;
  color: #0f172a; line-height: 1.05;
}
.co-tab-kpi small {
  font-size: 11px; color: #64748b; font-weight: 700;
  letter-spacing: 0.2px;
}
.co-tab-kpi.success { border-color: #6ee7b7; background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.co-tab-kpi.success::before { background: linear-gradient(180deg, #34d399, #059669); }
.co-tab-kpi.success span:first-child { background: linear-gradient(135deg, #bbf7d0, #86efac); }
.co-tab-kpi.success strong { color: #065f46; }
.co-tab-kpi.success small { color: #047857; }
.co-tab-kpi.warning { border-color: #fbbf24; background: linear-gradient(135deg, #fef3c7, #fde68a); }
.co-tab-kpi.warning::before { background: linear-gradient(180deg, #fbbf24, #d97706); }
.co-tab-kpi.warning span:first-child { background: linear-gradient(135deg, #fde68a, #fcd34d); }
.co-tab-kpi.warning strong { color: #78350f; }
.co-tab-kpi.warning small { color: #92400e; }
.co-tab-kpi.danger { border-color: #f87171; background: linear-gradient(135deg, #fee2e2, #fecaca); }
.co-tab-kpi.danger::before { background: linear-gradient(180deg, #f87171, #dc2626); }
.co-tab-kpi.danger span:first-child { background: linear-gradient(135deg, #fecaca, #fca5a5); }
.co-tab-kpi.danger strong { color: #991b1b; }
.co-tab-kpi.danger small { color: #b91c1c; }
.co-tab-kpi.gray { border-color: #cbd5e1; background: linear-gradient(135deg, #f8fafc, #f1f5f9); }
.co-tab-kpi.gray::before { background: linear-gradient(180deg, #94a3b8, #64748b); }
.co-tab-kpi.gray strong { color: #475569; }

/* Quick Insights strip — between hero and tabs */
.co-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.co-insight {
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; gap: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.18s;
}
.co-insight::before {
  content:''; position:absolute;
  inset-inline-start: 0; top: 0; bottom: 0;
  width: 4px;
}
.co-insight:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,0.08); }
.co-insight-ic {
  font-size: 22px;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.co-insight-body { flex: 1; min-width: 0; }
.co-insight-ttl { font-size: 11.5px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.co-insight-val { font-size: 17px; font-weight: 900; color: #0f172a; line-height: 1.15; font-family: 'SF Mono', Menlo, monospace; }
.co-insight-sub { font-size: 11px; color: #64748b; margin-top: 3px; font-weight: 600; }
.co-insight.info     { border-color: #93c5fd; }
.co-insight.info::before    { background: linear-gradient(180deg, #3b82f6, #1d4ed8); }
.co-insight.info .co-insight-ic { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
.co-insight.success  { border-color: #6ee7b7; }
.co-insight.success::before { background: linear-gradient(180deg, #10b981, #047857); }
.co-insight.success .co-insight-ic { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.co-insight.warning  { border-color: #fcd34d; }
.co-insight.warning::before { background: linear-gradient(180deg, #f59e0b, #b45309); }
.co-insight.warning .co-insight-ic { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.co-insight.danger   { border-color: #fca5a5; }
.co-insight.danger::before  { background: linear-gradient(180deg, #ef4444, #b91c1c); }
.co-insight.danger .co-insight-ic { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }
.co-insight.violet   { border-color: #c4b5fd; }
.co-insight.violet::before  { background: linear-gradient(180deg, #8b5cf6, #6d28d9); }
.co-insight.violet .co-insight-ic { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #5b21b6; }

/* Tab-specific table headers */
.co-tab-table.tab-blue thead th    { background: linear-gradient(135deg, #1d4ed8, #3b82f6); color: white; }
.co-tab-table.tab-indigo thead th  { background: linear-gradient(135deg, #4338ca, #6366f1); color: white; }
.co-tab-table.tab-emerald thead th { background: linear-gradient(135deg, #047857, #10b981); color: white; }
.co-tab-table.tab-violet thead th  { background: linear-gradient(135deg, #7c3aed, #a855f7); color: white; }
.co-tab-table.tab-rose thead th    { background: linear-gradient(135deg, #be123c, #e11d48); color: white; }
.co-tab-table.tab-teal thead th    { background: linear-gradient(135deg, #0f766e, #14b8a6); color: white; }

/* Letterheads Grid Tab */
.co-lh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 14px;
  padding: 18px;
}
.co-lh-card {
  background: white;
  border: 1.5px solid #99f6e4;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(20, 184, 166, 0.08);
}
.co-lh-card:hover { box-shadow: 0 12px 22px rgba(20, 184, 166, 0.18); border-color: #14b8a6; }
.co-lh-card-head {
  background: linear-gradient(135deg, #ccfbf1, #99f6e4);
  padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: #134e4a;
}
.co-lh-card-preview {
  padding: 12px;
  background: linear-gradient(180deg, white, #f0fdfa);
  min-height: 160px;
}
.co-lh-card-hdr {
  display: grid; grid-template-columns: 1fr 1.5fr 1fr;
  gap: 6px; align-items: center; padding-bottom: 8px;
  border-bottom: 1.5px dashed #ccfbf1; margin-bottom: 10px;
}
.co-lh-card-cell {
  height: 50px; display: flex; align-items: center; justify-content: center;
}
.co-lh-card-cell.right { justify-content: flex-end; }
.co-lh-card-cell.left { justify-content: flex-start; }
.co-lh-card-cell img { max-height: 50px; max-width: 100%; object-fit: contain; }
.co-lh-empty { font-size: 20px; opacity: 0.5; }
.co-lh-card-stub { height: 5px; background: #ccfbf1; border-radius: 3px; margin: 4px 0; }
.co-lh-card-ftr { text-align: center; margin-top: 10px; padding-top: 8px; border-top: 1.5px dashed #ccfbf1; }
.co-lh-card-ftr img { max-height: 36px; max-width: 100%; }
.co-lh-card-empty {
  text-align: center; padding: 28px 12px; color: #94a3b8; font-size: 32px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.co-lh-card-empty span { font-size: 12px; font-weight: 700; }
.co-lh-card-actions {
  padding: 10px 12px;
  background: #f0fdfa; border-top: 1px solid #ccfbf1;
  display: flex; gap: 6px; flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .co-tabs-inner,
  .co-tabs-bar .co-tabs-inner-data,
  .co-tabs-bar .co-tabs-inner-tools { grid-template-columns: repeat(2, 1fr); }
  .co-tab-btn { padding: 11px 8px; font-size: 12px; min-height: 50px; }
}
@media (max-width: 600px) {
  .co-tabs-inner,
  .co-tabs-bar .co-tabs-inner-data,
  .co-tabs-bar .co-tabs-inner-tools { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .co-tab-btn { padding: 10px 8px; font-size: 11.5px; min-height: 50px; }
  .co-lh-grid { grid-template-columns: 1fr; }
}

/* Letterhead Alignment classes — apply justify-content to flex */
.lh-align-left   { justify-content: flex-start !important; text-align: left !important; }
.lh-align-center { justify-content: center !important; text-align: center !important; }
.lh-align-right  { justify-content: flex-end !important; text-align: right !important; }

/* Alignment bar in modal */
.lh-align-bar {
  display: flex; align-items: center; gap: 4px;
  margin: 4px 0; padding: 4px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 8px; font-size: 11px;
}
.lh-align-lbl { color: #64748b; font-weight: 700; padding: 0 6px; }
.lh-align-btn {
  flex: 1; padding: 4px 6px;
  border: 1px solid transparent; background: transparent;
  border-radius: 6px; cursor: pointer; font-size: 13px;
  color: #475569; transition: all 0.12s;
  font-family: inherit;
}
.lh-align-btn:hover { background: white; border-color: #cbd5e1; }
.lh-align-btn.active {
  background: linear-gradient(135deg, #0f172a, #1e293b); color: white;
  border-color: #0f172a;
}

/* Letterhead in Modal */
.lh-info {
  background: #f0f9ff; border: 1px solid #7dd3fc; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 12px; font-size: 12px; color: #075985;
}
.lh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.lh-slot {
  background: white; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.lh-slot-head { display: flex; align-items: center; gap: 8px; }
.lh-slot-icon { font-size: 22px; }
.lh-slot-head strong { font-size: 13px; color: #0f172a; }
.lh-slot-desc { font-size:10.5px; color: #64748b; }
.lh-slot-preview {
  background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px;
  height: 90px; display: flex; align-items: center; padding: 8px;
  overflow: hidden;
}
.lh-slot-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lh-slot-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lh-slot-empty-text { font-size: 11px; color: #94a3b8; }
.lh-slot-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.lh-preview-wrap { background: #f1f5f9; border-radius: 12px; padding: 14px; margin-top: 8px; }
.lh-preview-label { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 8px; }
.lh-a4 {
  background: white; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  width: 100%; max-width: 600px; margin: 0 auto; overflow: hidden;
  aspect-ratio: 210 / 297; padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.lh-a4-header {
  display: grid; grid-template-columns: 1fr 1.5fr 1fr;
  gap: 8px; align-items: center;
  border-bottom: 2px solid #e2e8f0; padding-bottom: 8px;
}
.lh-a4-slot {
  height: var(--lh-a4-h, 32px); display: flex; align-items: center;   /* v996 — يتبع حجم الترويسة المختار */
  justify-content: center;
}
.lh-a4-slot img { max-height: var(--lh-a4-h, 32px); max-width: 100%; object-fit: contain; }
/* 🖨️ v1267 — «يمين» يعني يمين الخانة (قرار المالك): المحاذاةُ فيزيائية — الخانةُ ltr فـflex-end يمينٌ في الواجهتين
   العربية والإنجليزية كما في المطبوعة (PRINT_FRAME: .lhx-cell) — وخاناتُ الرفع ومعاينةُ A4 ومعاينةُ صفحة المنشأة معها */
.lh-slot-preview, .lh-a4-slot { direction: ltr; }
.lh-a4-header.lh-a4-banner { margin: -18px -18px 0; padding-bottom: 0; gap: 0; border-bottom: 0; }   /* v1021 — الجزء الواحد بكامل عرض الورقة من الحافّة إلى الحافّة (يلغي حاشية الورقة) */
.lh-a4-header.lh-a4-banner + .lh-a4-body { padding-top: var(--lh-a4-bg, 2mm); }   /* الحجم = المسافة تحت البانر */
.lh-a4-banner .lh-a4-slot { height: auto; display: block; }
.lh-a4-banner .lh-a4-slot img { display: block; width: 100%; height: auto; max-height: none; }
.lh-grid[data-lh-layout-grid="1"] .lh-slot-preview { height: auto; display: block; }   /* v998 — خانة الرفع تعرض البانر بعرضها */
.lh-grid[data-lh-layout-grid="1"] .lh-slot-preview img { display: block; width: 100%; height: auto; max-height: none; }
.lh-grid[data-lh-layout-grid="1"] { grid-template-columns: 1fr; }
.lh-grid[data-lh-layout-grid="2"] { grid-template-columns: 1fr 1fr; }
.lh-a4-body { flex: 1; padding: 10px 0; }
.lh-a4-title {
  font-size: 14px; font-weight: 800; color: #d97706; margin-bottom: 10px;
}
.lh-a4-stub {
  height: 6px; background: #e2e8f0; border-radius: 3px; margin: 6px 0;
}
.lh-footer-block {
  background: white; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px; margin-top: 12px;
}
.lh-footer-label {
  font-size: 12px; font-weight: 700; color: #0f172a; margin-bottom: 8px;
}
.lh-footer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lh-footer-preview {
  background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px;
  height: 60px; flex: 1; max-width: 240px; padding: 6px;
  display: flex; align-items: center; overflow: hidden;
}
.lh-footer-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* 🖨️ v1266 — معاينةُ التذييل بمحاذاة المطبوعة: المطبوعةُ تضع صورته بـtext-align (يسارٌ يسار) بينما هذه مرنةٌ في صفحةٍ rtl
   فكانت تعكس الجهة (flex-start = اليمين) — والاتّجاهُ ltr يجعل الأصنافَ الثلاثة تطابق ما يُطبَع */
.lh-footer-preview { direction: ltr; }

/* Responsive */
@media (max-width: 1200px) {
  .co-stats-snapshot { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .co-hero-v2-headline { grid-template-columns: repeat(2, 1fr); }
  .co-hero-v2-mini { grid-template-columns: repeat(3, 1fr); }
  .lh-grid { grid-template-columns: 1fr; }
  .co-lic-grid { grid-template-columns: repeat(2, 1fr); }
  .co-stats-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .co-hero-v2-headline { grid-template-columns: 1fr; }
  .co-hero-v2-mini { grid-template-columns: repeat(2, 1fr); }
  .co-cards-grid { grid-template-columns: 1fr; }
  .co-stats-snapshot { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Fixed Assets — v1059 · هوية Emerald Ledger + قاعدة العرض المالي v970
   (كان المقطع كلّه برتقالياً #ea580c/#f59e0b خارج اللوحة منذ إنشائه)
   ═══════════════════════════════════════════════════════════════════════ */
.fa-hero {
  background: var(--el-grad-hero, linear-gradient(135deg, #014034, #047857));
  border-radius: 20px; padding: 22px 26px; color: #fff; margin-bottom: 14px;
  box-shadow: 0 10px 30px rgba(1, 64, 52, 0.22);
}
.fa-hero-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.fa-hero-title { display: flex; align-items: center; gap: 14px; }
.fa-hero-title h2 { margin: 0; font-size: 22px; font-weight: 900; }
.fa-hero-title p { margin: 2px 0 0; font-size: 13px; opacity: 0.92; max-width: 70ch; }
.fa-hero-icon { font-size: 36px; background: rgba(255,255,255,0.18); width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fa-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fa-period-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.fa-period-label { font-size: 12px; font-weight: 700; opacity: 0.85; }
.fa-period-chip { background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.25); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .2s; font-family: inherit; }
.fa-period-chip:hover { background: rgba(255,255,255,0.28); transform: translateY(-1px); }
.fa-period-chip.active { background: #fff; color: var(--el-teal-800); box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-color: #fff; }
.fa-hero-headline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.fa-kpi-big { background: rgba(255,255,255,0.14); border: 1.5px solid rgba(255,255,255,0.22); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: all .2s; }
.fa-kpi-big:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
.fa-kpi-big-icon { font-size: 26px; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fa-kpi-big-body { flex: 1; min-width: 0; }
.fa-kpi-big-label { font-size: 11px; font-weight: 700; opacity: 0.88; margin-bottom: 2px; }
.fa-kpi-big-value { font-size: 22px; font-weight: 900; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 2px; }
.fa-kpi-big-sub { font-size: 11px; opacity: 0.85; }
.fa-kpi-big.success { background: rgba(16,185,129,0.22); border-color: rgba(110,231,183,0.5); }
.fa-kpi-big.info    { background: rgba(255,255,255,0.10); }
.fa-kpi-big.warning { background: rgba(255,255,255,0.08); border-color: rgba(252,211,77,0.45); }
.fa-hero-mini { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.fa-mini-kpi { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; }
.fa-mini-kpi.is-attn { background: rgba(251,191,36,0.22); border-color: rgba(252,211,77,0.6); }
.fa-mini-icon { font-size: 20px; }
.fa-mini-num { font-size: 16px; font-weight: 800; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; line-height: 1; }
.fa-mini-lbl { font-size: 10.5px; font-weight: 600; opacity: 0.85; margin-top: 2px; }
.fa-alert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; margin-bottom: 12px; font-size: 13px; }
.fa-alert-warning { background: #fef3c7; border: 1.5px solid #fbbf24; color: #78350f; }

/* شريط فئات الجذر — كل بطاقة درجة من عائلة الهوية (مبدأ v655) */
.fa-cats-card { background: #fff; border-radius: 14px; border: 1.5px solid #dbe7e2; padding: 16px 18px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(1,64,52,0.05); }
.fa-cats-header { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 14px; color: var(--el-teal-800); margin-bottom: 12px; }
.fa-cats-hint { font-size: 11px; color: #64748b; font-weight: 500; }
.fa-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.fa-cat-tile { --cat-color: var(--el-teal-800); background: #f8fbfa; border: 1.5px solid #dbe7e2; border-radius: 12px; padding: 12px; cursor: pointer; transition: all .2s; text-align: start; font-family: inherit; border-inline-start: 4px solid var(--cat-color); }
.fa-cat-tile.tone-0 { --cat-color: #014034; } .fa-cat-tile.tone-1 { --cat-color: #047857; } .fa-cat-tile.tone-2 { --cat-color: #059669; }
.fa-cat-tile.tone-3 { --cat-color: #0f766e; } .fa-cat-tile.tone-4 { --cat-color: #10b981; } .fa-cat-tile.tone-5 { --cat-color: #14b8a6; }
.fa-cat-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(1,64,52,0.12); }
.fa-cat-tile.active { background: #ecfdf5; border-color: var(--cat-color); box-shadow: 0 0 0 3px rgba(16,185,129,0.18); }
.fa-cat-tile-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fa-cat-tile-name { flex: 1; font-weight: 800; font-size: 13px; color: var(--el-teal-800); }
.fa-cat-tile-count { background: var(--cat-color); color: #fff; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.fa-cat-tile-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; padding: 2px 0; gap: 8px; }
.fa-cat-tile-row span { color: #475569; }
.fa-cat-tile-row .fs-amt { font-size: 12px; }
.fa-cat-tile-row.nbv { padding-top: 6px; border-top: 1px dashed #dbe7e2; margin-top: 4px; font-size: 12px; }
.fa-cat-tile-row.nbv .fs-amt { color: #047857; font-weight: 900; }
.fa-cat-tile-progress { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.fa-cat-tile-bar { background: #e6f4ef; height: 5px; border-radius: 3px; overflow: hidden; }
.fa-cat-tile-bar > div { background: linear-gradient(90deg, var(--el-teal-800), #10b981); height: 100%; }
.fa-cat-tile-progress span { font-size: 10.5px; color: #475569; font-weight: 700; text-align: end; }

/* شريط الأدوات والفلاتر */
.fa-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 18px; }
.fa-search-wrap { flex: 1; min-width: 240px; position: relative; }
.fa-search-wrap input { width: 100%; padding: 8px 36px; border: 1.5px solid #cbd5e1; border-radius: 8px; font-family: inherit; height: 38px; }
.fa-search-wrap input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.16); }
.fa-search-ic { position: absolute; top: 50%; inset-inline-start: 10px; transform: translateY(-50%); }
.fa-toolbar .btn.is-on { background: #ecfdf5; border-color: #6ee7b7; color: var(--el-teal-800); }
.fa-badge-n { background: #047857; color: #fff; border-radius: 9px; padding: 0 7px; font-size: 10.5px; font-weight: 900; }
.fa-export-grp { display: flex; gap: 4px; }
.fa-adv { padding: 0 18px; }
.fa-adv .fsum-adv { margin-bottom: 0 !important; border-radius: 10px; }
.fa-adv:not(:empty) { padding-bottom: 10px; }

/* شرائح الحالة — دلالية (لا تُطلى) */
.fa-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; border: 1px solid transparent; white-space: nowrap; line-height: 1.4; }
.fa-pill-ok   { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.fa-pill-warn { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.fa-pill-bad  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.fa-pill-info { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.fa-pill-mute { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.fa-pill-btn { cursor: pointer; font-family: inherit; }
.fa-pill-btn:hover { filter: brightness(0.96); }

/* جدول القائمة — قاعدة v970: الرأس في المنتصف · المبالغ يميناً جدولية */
.fa-list-table .fa-code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--el-teal-800); }
.fa-sub { font-size: 10.5px; color: #64748b; margin-top: 2px; }
.fa-tag { display: inline-block; color: #b45309; font-weight: 900; }
.fa-bar { height: 4px; background: #f1f5f9; border-radius: 2px; overflow: hidden; margin-top: 4px; min-width: 60px; }
.fa-bar > div { height: 100%; background: linear-gradient(90deg, #f59e0b, #b91c1c); }
.fa-nbv { color: #047857; }
.fa-list-table tbody td { vertical-align: middle; }
.fa-act-cell { text-align: center; white-space: nowrap; }
.fa-acts { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; max-width: 150px; }
.fa-list-table tfoot tr.fa-list-foot td { background: #ecfdf5; font-weight: 900; border-top: 2px solid #047857; padding: 10px 8px; }
.fa-foot-lbl { font-size: 11.5px; color: #475569; font-weight: 800; }
/* 📒 v1255 — تبويب «حركات الإهلاك»: شرائحُ الحالة ومجاميعُها فوق الجدول */
.fa-moves-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid #e2e8f0; }
.fa-moves-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fa-move-chip { background: #fff; border: 1.5px solid #e2e8f0; color: #475569; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; cursor: pointer; font-family: inherit; }
.fa-move-chip:hover { border-color: var(--el-teal-600); color: var(--el-teal-800); }
.fa-move-chip.active { background: #ecfdf5; border-color: var(--el-teal-600); color: var(--el-teal-800); }
.fa-moves-sums { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #475569; font-weight: 700; }
.fa-moves-sums strong { color: #0f172a; font-variant-numeric: tabular-nums; }
.fa-moves-table tbody td { vertical-align: middle; }

/* عرض فئات الشجرة */
.fa-cats-view { padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; }
.fa-root-card { border: 1.5px solid #dbe7e2; border-radius: 12px; overflow: hidden; background: #fff; }
.fa-root-head { padding: 12px 16px; background: linear-gradient(135deg, #ecfdf5, #f0fdfa); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid #dbe7e2; }
.fa-root-name { font-weight: 900; color: var(--el-teal-800); font-size: 15px; }
.fa-root-accts { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: #334155; margin-inline-start: auto; }
.fa-root-accts .fa-code { font-family: ui-monospace, Menlo, monospace; color: var(--el-teal-800); }
.fa-leaf-table { margin: 0 !important; font-size: 12.5px; }
.fa-leaf-table thead th { background: #f8fafc; color: #334155; font-size: 11.5px; }

/* الملخّص التحليلي */
.fa-stats { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.fa-stats .fsum-card { margin: 0; }
.fa-stats-title { font-weight: 900; color: var(--el-teal-800); font-size: 14px; margin-top: 6px; }

/* جدول الإهلاك */
.fa-sched-table tr.fa-sched-posted td { background: #f0fdf4; }
.fa-sched-table tr.fa-sched-due td { background: #fffbeb; }
.fa-run-table tr.fa-run-bad td, .fa-disp-table tr.fa-run-bad td { background: #fef2f2; }
.fa-run-table, .fa-disp-table { margin: 0 !important; font-size: 12.5px; }
.fa-run-table thead th, .fa-disp-table thead th { background: #f8fafc; color: #334155; font-size: 11.5px; }

/* Responsive */
@media (max-width: 1100px) {
  .fa-hero-headline { grid-template-columns: repeat(2, 1fr); }
  .fa-hero-mini     { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .fa-hero-headline { grid-template-columns: 1fr; }
  .fa-hero-mini     { grid-template-columns: repeat(2, 1fr); }
}

/* Payment method direction radio options */
.gd-dir-opt {
  transition: all 0.2s;
}
.gd-dir-opt:has(input[type=radio]:checked) {
  border-color: #10b981 !important;
  background: #ecfdf5 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.gd-dir-opt:hover {
  border-color: #6ee7b7 !important;
  background: #f0fdf4 !important;
}

.jv-lines-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
}
.jv-shortcut-hint {
  margin-inline-start: auto;
  font-size: 11px;
  color: #6b7280;
}

.mono { font-family: 'SF Mono', Menlo, monospace; }

/* HR export toolbar (used at top of each hr.js screen, after hero) */
.hr-export-toolbar {
  background: white;
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}


/* ─── Receipt Voucher type tabs ───────────────────────────────────── */
.rv-rtype-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  padding: 4px 0;
}
.rv-rtype-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  transition: all .18s ease;
}
.rv-rtype-tab:hover:not(:disabled) {
  border-color: #94a3b8;
  background: #f8fafc;
  transform: translateY(-1px);
}
.rv-rtype-tab.active {
  box-shadow: 0 4px 14px rgba(22,163,74,0.25);
  transform: translateY(-1px);
}
.rv-rtype-tab:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ─── Sales Invoices tab strip ─────────────────────────────────────── */
.si-tab-strip {
  display: flex;
  gap: 8px;
  padding: 12px 4px 0;
  margin-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
  flex-wrap: wrap;
}
.si-tab {
  padding: 10px 20px;
  background: white;
  border: 2px solid #e2e8f0;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  font-weight: 800;
  font-size: 14px;
  color: #475569;
  cursor: pointer;
  transition: all .18s ease;
  margin-bottom: -2px;
}
.si-tab:hover { background: #f1f5f9; color: #1e293b; transform: translateY(-1px); }
.si-tab.active {
  background: linear-gradient(135deg, #014034, #047857);
  color: white;
  border-color: #047857;
  box-shadow: 0 -2px 8px rgba(4,120,87,0.18);
}

/* ─── Journal Entries tab strip ─────────────────────────────────────── */
.jv-tab-strip {
  display: flex;
  gap: 6px;
  padding: 8px 4px 4px;
  margin-bottom: 6px;
  border-bottom: 2px solid #e2e8f0;
  flex-wrap: wrap;
}
.jv-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: white;
  border: 1.5px solid #e2e8f0;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-weight: 800;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  transition: all .18s ease;
  margin-bottom: -2px;
}
.jv-tab:hover { background: #f1f5f9; color: #1e293b; transform: translateY(-1px); }
.jv-tab.active { box-shadow: 0 -2px 8px rgba(30,58,138,0.18); }
.jv-tab-icon { font-size: 14px }
.jv-tab-count {
  background: #e2e8f0;
  color: #475569;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  min-width: 22px;
  text-align: center;
}

/* ─── Print theme picker (in company modal) ──────────────────────────── */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all .18s ease;
}
.theme-card:hover { border-color: #94a3b8; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.06); }
.theme-card.active {
  border-color: #0891b2;
  background: #ecfeff;
  box-shadow: 0 0 0 3px rgba(8,145,178,0.18);
}
.theme-swatches { display: flex; gap: 4px }
.theme-sw {
  flex: 1;
  height: 28px;
  border-radius: 4px;
}
.theme-name {
  font-weight: 800;
  font-size: 13px;
  color: #1e293b;
  text-align: center;
}
.theme-preview {
  padding: 6px 10px;
  border-radius: 6px;
  text-align: center;
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════════
   JOURNALS PRO — Elegant tabs, KPIs, filters, list view
   ═══════════════════════════════════════════════════════════════════ */

/* Tab strip — 4-column grid (forces 4+3 layout for 7 tabs) */
.jv-tabs-wrap {
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.jv-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .jv-tabs { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 720px) {
  .jv-tabs { grid-template-columns: repeat(2, 1fr) }
}
.jv-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: white;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12.5px;
  color: #475569;
  cursor: pointer;
  transition: all .18s ease;
  position: relative;
  margin-bottom: -1px;
  white-space: nowrap;
}
.jv-tab:hover {
  background: #f1f5f9;
  color: #1e293b;
  border-color: var(--tab-color, #94a3b8);
  transform: translateY(-1px);
}
.jv-tab.active {
  font-weight: 900;
  box-shadow: 0 -3px 10px rgba(0,0,0,0.12);
  z-index: 2;
}
.jv-tab-ic { font-size: 15px }
.jv-tab-lbl { letter-spacing: -0.2px }
.jv-tab-cnt {
  background: #e2e8f0;
  color: #475569;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  min-width: 22px;
  text-align: center;
}

/* Pro Hero */
.jv-hero-pro {
  color: white;
  padding: 16px 20px 12px;
  border-radius: 0 0 14px 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  margin-bottom: 12px;
}
.jv-hero-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 14px;
  flex-wrap: wrap;
}
.jv-hero-title { display: flex; align-items: center; gap: 14px }
.jv-hero-icon {
  font-size: 38px;
  width: 60px; height: 60px;
  border-radius: 14px;
  background: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.jv-hero-title h2 { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.1 }
.jv-hero-title p { margin: 3px 0 0; font-size: 12px; opacity: 0.92; line-height: 1.3; max-width: 600px }
.jv-hero-btn {
  padding: 9px 16px;
  background: #ffffff;
  color: #0f172a;
  border: 0;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.16), inset 0 -2px 0 rgba(0,0,0,0.03);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.2px;
}
.jv-hero-btn:hover { transform: translateY(-1px); background:#f8fafc; box-shadow: 0 8px 18px rgba(0,0,0,0.22), inset 0 -2px 0 rgba(0,0,0,0.03) }
.jv-hero-btn.primary {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 70%, #eff6ff 100%);
  font-weight: 900;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 8px 22px rgba(0,0,0,0.22), inset 0 -2px 0 rgba(0,0,0,0.04);
}
.jv-hero-btn.primary:hover { background: linear-gradient(135deg, #ffffff, #dbeafe); transform: translateY(-2px); }

/* 4 big headline KPIs */
.jv-kpi-headline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.jv-kpi-big {
  background: rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform .18s ease;
}
.jv-kpi-big:hover { transform: translateY(-2px); background: rgba(255,255,255,0.22) }
.jv-kpi-big-icon { font-size: 28px; line-height: 1; flex-shrink: 0 }
.jv-kpi-big-body { flex: 1; min-width: 0 }
.jv-kpi-big-label { font-size: 11px; opacity: 0.85; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px }
.jv-kpi-big-value { font-size: 22px; font-weight: 900; line-height: 1.1; margin: 2px 0; font-family: 'SF Mono', monospace }
.jv-kpi-big-sub { font-size: 10.5px; opacity: 0.85 }
.jv-kpi-big-sub strong { font-weight: 800 }

/* Mini KPI strip */
.jv-kpi-mini-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jv-kpi-mini {
  flex: 1;
  min-width: 130px;
  background: rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 9px;
  padding: 7px 11px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jv-kpi-mini-ic { font-size: 16px; flex-shrink: 0 }
.jv-kpi-mini-num { font-size: 16px; font-weight: 800; line-height: 1; font-family: 'SF Mono', monospace }
.jv-kpi-mini-lbl { font-size:10.5px; opacity: 0.85; margin-top: 1px }

/* Toolbar */
.jv-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  flex-wrap: wrap;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}
.jv-search-box {
  flex: 1;
  min-width: 220px;
  position: relative;
}
.jv-search-box .jv-search-ic {
  position: absolute;
  top: 50%;
  [dir="rtl"] & { right: 10px }
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 14px;
}
[dir="rtl"] .jv-search-box .jv-search-ic { right: 10px; left: auto }
[dir="ltr"] .jv-search-box .jv-search-ic { left: 10px; right: auto }
.jv-search-box input {
  width: 100%;
  padding: 8px 34px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
  background: white;
  transition: border-color .15s;
}
.jv-search-box input:focus { outline: none; border-color: #3b82f6 }
.jv-tb-btn { padding: 7px 12px; font-size: 12px }
.jv-view-toggle {
  display: flex;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
}
.jv-vt-btn {
  padding: 7px 14px;
  background: white;
  border: none;
  font-weight: 700;
  font-size: 12px;
  color: #64748b;
  cursor: pointer;
  transition: all .15s;
}
.jv-vt-btn:hover { background: #f1f5f9 }
.jv-vt-btn.active { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white }
.jv-export-grp {
  margin-${'inline'}-start: auto;
  display: flex;
  gap: 6px;
}

/* Filters panel */
.jv-filters-panel {
  background: #f8fafc;
  border-top: 1px dashed #cbd5e1;
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.jv-filter-input {
  padding: 7px 10px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 12px;
  background: white;
  min-width: 130px;
  transition: border-color .15s;
}
.jv-filter-input:focus { outline: none; border-color: #3b82f6 }
.jv-filter-input[type="date"] { width: 145px }

.jv-active-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  flex-basis: 100%;
  padding-top: 6px;
  border-top: 1px dotted #cbd5e1;
  margin-top: 4px;
}
.jv-chip {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.jv-chip:hover { background: #2563eb; transform: translateY(-1px) }

/* Result info bar */
.jv-result-info {
  padding: 8px 14px;
  background: #f0f9ff;
  border-bottom: 1px solid #bae6fd;
  font-size: 12px;
  color: #075985;
}
.jv-result-info strong { font-weight: 800 }

/* List rows: full-text description that wraps onto multiple lines */
.jv-desc-cell {
  min-width: 220px;
  max-width: 360px;
  white-space: normal !important;  /* override .data-table td white-space:nowrap */
  vertical-align: top;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.jv-desc-main {
  font-weight: 700;
  font-size: 12px;
  color: #1e293b;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  margin-bottom: 3px;
}
.jv-desc-sub {
  font-size:10.5px;
  color: #64748b;
  font-family: 'SF Mono', monospace;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.jv-lines-badge {
  display: inline-block;
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 800;
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
}

/* Make journal list rows pop on hover */
.co-list-table tbody tr:hover { background: #f0f9ff }

/* ═══════════════════════════════════════════════════════════════════
   Quick Add FAB — Global floating "+" button on every screen
   ═══════════════════════════════════════════════════════════════════ */
.quick-add-fab {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 950;
  font-family: 'Tajawal', Arial, sans-serif;
}
[dir="ltr"] .quick-add-fab { left: auto; right: 24px }

/* 🆕 v0.37.9.172 — In-topbar mode: small inline pill instead of bottom FAB */
.quick-add-fab.in-topbar {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  display: inline-flex;
  align-items: center;
  z-index: 100;
}
[dir="ltr"] .quick-add-fab.in-topbar { left: auto; right: auto }

.quick-add-toggle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0e7490, #0891b2, #06b6d4);
  color: white;
  border: 3px solid white;
  font-size: 30px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(8,145,178,0.45), 0 2px 8px rgba(0,0,0,0.18);
  transition: all .2s cubic-bezier(.4,0,.2,1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.quick-add-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 30px rgba(8,145,178,0.6), 0 4px 12px rgba(0,0,0,0.22);
}

/* 🆕 v0.37.9.172 — Compact "+" pill when in topbar (matches header buttons) */
.quick-add-fab.in-topbar .quick-add-toggle {
  width: 34px;
  height: 34px;
  border-width: 2px;
  font-size: 20px;
  box-shadow: 0 2px 6px rgba(8,145,178,0.32);
}
.quick-add-fab.in-topbar .quick-add-toggle:hover {
  transform: scale(1.1);
}
.quick-add-toggle .qa-plus {
  font-weight: 300;
  line-height: 1;
  transition: transform .25s ease;
}
.quick-add-fab.open .quick-add-toggle .qa-plus {
  transform: rotate(135deg);
}
.quick-add-fab.open .quick-add-toggle {
  background: linear-gradient(135deg, #dc2626, #ef4444);
}

.quick-add-menu {
  position: absolute;
  bottom: 76px;
  left: 0;
  background: white;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  padding: 8px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: qa-menu-pop .2s cubic-bezier(.4,0,.2,1);
  border: 1.5px solid #e2e8f0;
  z-index: 1000;
}
[dir="ltr"] .quick-add-menu { left: auto; right: 0 }
.quick-add-menu.hidden { display: none }

/* 🆕 v0.37.9.172 — In-topbar mode: drop the menu BELOW the "+" button */
.quick-add-fab.in-topbar .quick-add-menu {
  bottom: auto;
  top: 44px;
  right: 0;
  left: auto;
}
[dir="ltr"] .quick-add-fab.in-topbar .quick-add-menu {
  right: auto;
  left: 0;
}
@keyframes qa-menu-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.quick-add-menu-hdr {
  padding: 8px 12px 6px;
  font-weight: 800;
  font-size: 12px;
  color: #475569;
  border-bottom: 1.5px solid #e2e8f0;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

.quick-add-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: white;
  border: 1.5px solid transparent;
  text-align: start;
  font-weight: 700;
  font-size: 13px;
  color: #1e293b;
  border-radius: 9px;
  cursor: pointer;
  transition: all .15s ease;
}
.quick-add-item:hover {
  background: #f0f9ff;
  border-color: #93c5fd;
  transform: translateX(2px);
}
[dir="rtl"] .quick-add-item:hover { transform: translateX(-2px) }

.quick-add-item .qa-ic {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Hide FAB on login page if any */
body.login-page .quick-add-fab { display: none }

/* v794 — تنسيق تبويبَي الدخول و.login-helper انتقلا إلى كتلة «طيّة الدفتر»
   أعلى الملفّ، مقصورَين على `.login-screen`. حُذفت القواعد هنا كي لا يبقى
   مصدرا تنسيق يتنازعان على نفس الأصناف. */
.emp-reg-hint {
  background: #ecfeff;
  border: 1px dashed #67e8f9;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #155e75;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════
   Employee Portal — mobile-first layout (480px max)
   Designed to translate directly to a Capacitor/RN mobile app later
   ═══════════════════════════════════════════════════════════════════════ */
.emp-portal {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(180deg, #f0fdfa 0%, #ecfeff 50%, #f5f3ff 100%);
}
.emp-portal-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #014034, #0d6e5c);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(1, 64, 52, 0.18);
}
.emp-portal-brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.emp-portal-logo {
  width: 44px; height: 44px; object-fit: contain;
  background: rgba(255,255,255,0.9);
  border-radius: 10px;
  padding: 4px;
  flex-shrink: 0;
}
.emp-portal-company {
  font-size: 15px; font-weight: 900; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.emp-portal-tagline { font-size: 10.5px; opacity: 0.85; line-height: 1.2; letter-spacing: 0.3px; }
.emp-portal-actions { display: flex; gap: 6px; }
.emp-portal-icon-btn {
  background: rgba(255,255,255,0.18);
  border: 0;
  color: #ffffff;
  width: 38px; height: 38px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  transition: background 0.15s;
}
.emp-portal-icon-btn:hover { background: rgba(255,255,255,0.28); }

.emp-portal-content {
  flex: 1;
  padding: 14px;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .emp-portal-content { max-width: 540px; padding: 22px; }
}

.emp-portal-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  margin-bottom: 14px;
}
.emp-portal-card h2 { margin: 0 0 8px; font-size: 18px; font-weight: 900; color: #0f172a; }
.emp-portal-card p { margin: 0 0 12px; font-size: 13px; color: #475569; line-height: 1.6; }
.emp-portal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.emp-portal-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 8px;
  background: linear-gradient(135deg, #f0fdfa, #ecfeff);
  border: 1.5px solid #67e8f9;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  color: #0f172a;
  text-align: center;
}
.emp-portal-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(8, 145, 178, 0.18); background: linear-gradient(135deg, #ecfeff, #f0fdfa); }
.emp-portal-tile > span:first-child { font-size: 30px; line-height: 1; }
.emp-portal-tile strong { font-size: 13px; font-weight: 900; }
.emp-portal-tile small { font-size: 10.5px; color: #475569; }

.emp-portal-nav {
  position: sticky; bottom: 0; z-index: 10;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -4px 14px rgba(15, 23, 42, 0.06);
  padding: 6px;
  gap: 4px;
}
.emp-portal-nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.15s;
}
.emp-portal-nav-btn > span { font-size: 18px; line-height: 1; }
.emp-portal-nav-btn > small { font-size: 10.5px; font-weight: 700; }
.emp-portal-nav-btn.active {
  background: linear-gradient(135deg, #014034, #0d6e5c);
  color: #ffffff;
}
@media (max-width: 420px) {
  .emp-portal-nav-btn > small { display: none; }
  .emp-portal-nav-btn { padding: 10px 2px; }
}

/* Employee Portal — Home: welcome strip + profile summary + leave balances */
.emp-home-welcome {
  background: linear-gradient(135deg, #ecfeff, #f0fdfa);
  border: 1px solid #67e8f9;
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.08);
}
.emp-home-greet-wrap { flex: 1; min-width: 0; }
.emp-home-greet { font-size: 12px; color: #475569; font-weight: 700; }
.emp-home-name { font-size: 19px; font-weight: 900; color: #0f172a; line-height: 1.2; margin-top: 2px; }
.emp-home-job  { font-size: 12px; color: #475569; margin-top: 4px; }
.emp-home-status-pill {
  background: #dcfce7;
  color: #15803d;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid #86efac;
}
.emp-card-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 900;
  color: #0f172a;
  padding-bottom: 8px;
  border-bottom: 1px dashed #e2e8f0;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Profile info grid */
.emp-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 360px) { .emp-info-grid { grid-template-columns: 1fr; } }
.emp-info-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #f8fafc;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.emp-info-icon { font-size: 18px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.emp-info-text { flex: 1; min-width: 0; }
.emp-info-lbl { font-size: 10.5px; color: #64748b; font-weight: 700; }
.emp-info-val {
  font-size: 12.5px;
  color: #0f172a;
  font-weight: 700;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Leave balances */
.emp-leave-headline {
  background: linear-gradient(135deg, #d1fae5, #ecfdf5);
  border: 1.5px solid #6ee7b7;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  margin-bottom: 12px;
}
.emp-leave-headline-val {
  font-size: 36px;
  font-weight: 900;
  color: #065f46;
  font-family: 'Inter', monospace;
  line-height: 1;
}
.emp-leave-headline-lbl { font-size: 12px; color: #047857; font-weight: 700; margin-top: 4px; }
.emp-leave-headline-sub { font-size: 11px; color: #047857; margin-top: 6px; opacity: 0.85; }
.emp-leave-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 480px) { .emp-leave-grid { grid-template-columns: repeat(4, 1fr); } }
.emp-leave-tile {
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  border: 1px solid;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.emp-leave-tile .emp-leave-icon { font-size: 20px; }
.emp-leave-tile .emp-leave-val { font-size: 18px; font-weight: 900; font-family: 'Inter', monospace; line-height: 1; }
.emp-leave-tile .emp-leave-lbl { font-size:10.5px; font-weight: 700; }
.emp-leave-tile.blue  { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }
.emp-leave-tile.rose  { background: #fff1f2; border-color: #fda4af; color: #9f1239; }
.emp-leave-tile.amber { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.emp-leave-tile.red   { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }

/* ═══════════════════════════════════════════════════════════════════════
   Employee Portal Phase 2 — Punch, Attendance, Payroll, Requests, Tasks, Account
   ═══════════════════════════════════════════════════════════════════════ */
.punch-gate {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-radius: 12px;
  padding: 16px;
  color: #991b1b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}
.punch-gate.err { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
.punch-site-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.punch-site-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 13px; color: #475569; }
.punch-site-row strong { color: #0f172a; }
.punch-status-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1.5px solid;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  margin-top: 10px;
}
.punch-status-dot { width: 10px; height: 10px; border-radius: 999px; animation: punchPulse 2s ease-in-out infinite; }
@keyframes punchPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:0.7} }
.punch-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.punch-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 110px;
  padding: 14px;
  border: 0;
  border-radius: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}
.punch-btn.in  { background: linear-gradient(135deg, #16a34a, #22c55e); color: #ffffff; }
.punch-btn.out { background: linear-gradient(135deg, #dc2626, #ef4444); color: #ffffff; }
.punch-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.3); }
.punch-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
.punch-btn.used { background: linear-gradient(135deg, #d4d4d8, #a1a1aa); color: #18181b; }
.punch-btn-icon { font-size: 30px; line-height: 1; }
.punch-btn-label { font-size: 14px; font-weight: 900; }
.punch-btn-time { font-size: 11px; background: rgba(255,255,255,0.25); padding: 4px 8px; border-radius: 999px; }
.punch-foot-hint {
  font-size: 11.5px;
  color: #64748b;
  text-align: center;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
  padding: 8px;
  line-height: 1.7;
}

/* Attendance / Tasks KPIs (shared) */
.emp-att-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
@media (max-width: 420px) { .emp-att-kpis { grid-template-columns: repeat(2, 1fr); } }
.emp-att-kpi {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
}
.emp-att-kpi strong { display: block; font-size: 20px; font-weight: 900; font-family: 'Inter', monospace; line-height: 1; }
.emp-att-kpi small { font-size:10.5px; font-weight: 700; color: #64748b; }
.emp-att-kpi.success { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.emp-att-kpi.info    { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }
.emp-att-kpi.warn    { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.emp-att-kpi.danger  { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }

/* Attendance table */
.emp-att-table-wrap { overflow-x: auto; }
.emp-att-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.emp-att-table th, .emp-att-table td { border-bottom: 1px solid #e2e8f0; padding: 8px 6px; text-align: start; }
.emp-att-table th { background: #f1f5f9; color: #334155; font-size: 11px; font-weight: 800; }
.emp-att-table .muted { color: #94a3b8; font-size:11px; }

/* Payroll cards */
.emp-pay-list { display: flex; flex-direction: column; gap: 8px; }
.emp-pay-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; }
.emp-pay-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; flex-wrap: wrap; }
.emp-pay-row.top { justify-content: space-between; margin-bottom: 6px; }
.emp-pay-period { font-weight: 800; color: #0f172a; }
.emp-pay-net { font-size: 18px; font-weight: 900; color: #15803d; font-family: 'Inter', monospace; }

/* Requests cards */
.emp-req-list, .emp-task-list { display: flex; flex-direction: column; gap: 10px; }
.emp-req-card, .emp-task-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; }
.emp-req-head, .emp-task-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.emp-req-type { font-size: 14px; font-weight: 900; color: #0f172a; }
.emp-req-body, .emp-task-body { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #475569; }
.emp-req-body strong, .emp-task-body strong { color: #0f172a; }
.emp-task-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 11px; }
.emp-task-actions { display: flex; gap: 6px; margin-top: 8px; }
.emp-empty {
  text-align: center;
  padding: 30px 14px;
  background: #f8fafc;
  border: 1.5px dashed #e2e8f0;
  border-radius: 12px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
}

/* Portal-wide buttons */
.emp-portal-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  color: #0f172a;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}
.emp-portal-btn:hover { background: #f8fafc; transform: translateY(-1px); }
.emp-portal-btn.primary { background: linear-gradient(135deg, #014034, #0d6e5c); color: #ffffff; border-color: #014034; }
.emp-portal-btn.primary:hover { background: linear-gradient(135deg, #0d6e5c, #14a085); }
.emp-portal-btn.small { padding: 6px 10px; font-size: 11.5px; }

/* Auto-translate trigger button — inline styles take precedence in JS,
   this is only a fallback. Direction is shown via text label "ترجم → EN" etc. */
.tr-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  background: #0e7490;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.tr-trigger-btn:hover { opacity: 0.9; }
.tr-trigger-btn:active { transform: scale(0.97); }
.tr-trigger-btn:disabled { opacity: 0.6; cursor: wait; }
input[data-tr-busy="1"], textarea[data-tr-busy="1"] { background: #fffbeb !important; }

/* Journal lines: VAT label (when account is mapped to VAT category) */
.jv-lines-table .jv-vat-label {
  display: inline-block;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 800;
  color: #6b21a8;
  background: #f3e8ff;
  border: 1px solid #c084fc;
  border-radius: 6px;
}

/* Lock badge on Chart-of-Accounts rows that are linked in Accounting Linkage */
.coa-lock-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 6px;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  color: #92400e;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: help;
}

/* ═══════════════════════════════════════════════════════════════════════
   ATTENDANCE LOG — Phase A
   ═══════════════════════════════════════════════════════════════════════ */
.atl-hero {
  background: linear-gradient(135deg,#0d9488 0%,#10b981 50%,#059669 100%);
  color: #fff;
  border-radius: 18px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(13,148,136,0.18);
}
.atl-hero-row { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; gap: 14px; flex-wrap: wrap; }
.atl-hero-title { display: flex; align-items: center; gap: 12px; }
.atl-hero-icon { width: 50px; height: 50px; background: rgba(255,255,255,0.22); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.atl-hero-title h2 { margin: 0; font-size: 19px; font-weight: 900; }
.atl-hero-title p  { margin: 3px 0 0; font-size: 12px; opacity: 0.92; }
.atl-hero-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.atl-hero-btn { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 7px 14px; border-radius: 10px; font-weight: 800; font-size: 12.5px; cursor: pointer; transition: all 0.15s; }
.atl-hero-btn:hover { background: rgba(255,255,255,0.28); }
.atl-hero-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 12px 22px; background: rgba(0,0,0,0.12); border-top: 1px solid rgba(255,255,255,0.15); }
.atl-hero-kpi { background: rgba(255,255,255,0.12); border-radius: 10px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.atl-hero-kpi-ic { font-size: 22px; }
.atl-hero-kpi-lbl { font-size: 10.5px; opacity: 0.9; }
.atl-hero-kpi-val { font-size: 16px; font-weight: 900; }

.atl-tabs-card { background: #fff; padding: 8px; border-radius: 12px; box-shadow: 0 2px 6px rgba(15,23,42,0.05); margin-bottom: 14px; }
.atl-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; }
.atl-tab-btn { background: transparent; border: 0; padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 800; font-size: 12.5px; color: #64748b; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; }
.atl-tab-btn:hover { background: #f1f5f9; color: #0f172a; }
.atl-tab-btn.active { background: linear-gradient(135deg,#10b981,#0d9488); color: #fff; box-shadow: 0 4px 10px rgba(13,148,136,0.25); }

.atl-empty { background: #fff; border-radius: 14px; padding: 30px; text-align: center; color: #64748b; }
.atl-empty.err { background: #fef2f2; border: 2px solid #fca5a5; color: #7f1d1d; }
.atl-empty-ic { font-size: 50px; margin-bottom: 10px; }
.atl-empty h3 { margin: 0 0 6px; font-size: 17px; font-weight: 900; }

/* ─── Tab: My Today (kiosk-style card) ─── */
.atl-mytoday-card { background: linear-gradient(135deg,#ecfdf5,#f0fdfa,#ecfeff); border: 2px solid #6ee7b7; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 20px rgba(16,185,129,0.12); }
.atl-mytoday-head { background: linear-gradient(135deg,#10b981,#0d9488); color: #fff; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.atl-mytoday-greet { font-size: 11px; opacity: 0.92; }
.atl-mytoday-name { font-size: 22px; font-weight: 900; }
.atl-mytoday-sub { font-size: 11px; opacity: 0.9; margin-top: 4px; }
.atl-mytoday-clock { text-align: end; }
.atl-mytoday-time { font-size: 28px; font-weight: 900; font-family: 'Inter', monospace; }
.atl-mytoday-date { font-size: 11px; opacity: 0.92; }
.atl-mytoday-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 20px; }
@media (max-width: 640px) { .atl-mytoday-buttons { grid-template-columns: 1fr; } }
.atl-mytoday-btn-wrap { background: #fff; border: 2px solid; border-radius: 14px; padding: 18px; text-align: center; }
.atl-mytoday-btn-wrap.in  { border-color: #6ee7b7; }
.atl-mytoday-btn-wrap.out { border-color: #93c5fd; }
.atl-mytoday-big-ic { font-size: 42px; margin-bottom: 6px; }
.atl-mytoday-lbl { font-size: 12px; font-weight: 800; color: #475569; }
.atl-mytoday-big-val { font-size: 28px; font-weight: 900; color: #0f172a; margin: 6px 0 14px; }
.atl-mytoday-action { width: 100%; border: 0; border-radius: 10px; padding: 12px 14px; font-size: 14px; font-weight: 900; color: #fff; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.12); transition: transform 0.15s, box-shadow 0.15s; }
.atl-mytoday-action.in  { background: linear-gradient(135deg,#10b981,#0d9488); }
.atl-mytoday-action.out { background: linear-gradient(135deg,#3b82f6,#6366f1); }
.atl-mytoday-action:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.18); }
.atl-mytoday-note { padding: 8px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: #475569; background: #f1f5f9; border: 1px solid #cbd5e1; }
.atl-mytoday-note.warn { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.atl-mytoday-note.ok   { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.atl-mytoday-metrics { padding: 0 20px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.atl-mm { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; text-align: center; }
.atl-mm-lbl { font-size: 10.5px; color: #64748b; font-weight: 700; }
.atl-mm-val { font-size: 17px; font-weight: 900; color: #0f172a; }
.atl-mm-val.bad  { color: #b91c1c; }
.atl-mm-val.warn { color: #c2410c; }
.atl-mm-val.good { color: #1d4ed8; }

/* ─── Shared table cell tints ─── */
.atl-table { font-size: 11.5px; table-layout: auto; border-collapse: separate; border-spacing: 0; }
.atl-table th, .atl-table td { padding: 6px 7px; vertical-align: middle; }
.atl-table th { font-size: 11px; white-space: nowrap; }

/* 🧊 Sticky table header — stays at top while body scrolls.
   Stats strip + filters scroll away normally; only the column header pinned.
   ── CRITICAL: position:sticky sticks to the nearest scrolling ancestor.
   In Arttop the scroll container is .main-content (overflow-y:auto).
   But .card has overflow:hidden, and .table-wrapper has overflow-x:auto —
   both create new containing blocks that TRAP sticky.
   Override them for cards/wrappers that hold an .atl-table, so sticky
   bubbles up to .main-content as intended. */
.card:has(.atl-table)          { overflow: visible !important; }
.table-wrapper:has(.atl-table) { overflow: visible !important; background: transparent; box-shadow: none; margin-bottom: 0; }
/* v1183 ⑮ — منفذُ التمرير المقيس (data-tp-x من table_polish) كانت تهزمه القاعدةُ أعلاه (!important) فتتمرّر الصفحةُ كلُّها أفقياً على الجوّال بدل الجدول */
.table-wrapper:has(.atl-table)[data-tp-x] { overflow-x: auto !important; overflow-y: visible !important; }

.atl-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  color: #0f172a;
  font-weight: 800;
  border-bottom: 2px solid #94a3b8;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06);
  /* Ensure the cell paints solid so rows underneath don't bleed through */
  background-clip: padding-box;
}
.atl-table thead th:first-child { border-start-start-radius: 6px; }
.atl-table thead th:last-child  { border-start-end-radius: 6px; }
.atl-table .atl-cell-emerald { background: #ecfdf5; color: #065f46; font-weight: 700; text-align: center; }
.atl-table .atl-cell-blue    { background: #eff6ff; color: #1e40af; font-weight: 700; text-align: center; }
.atl-table .atl-cell-purple  { background: #f5f3ff; color: #6b21a8; font-weight: 700; text-align: center; }
.atl-table .atl-cell-amber   { background: #fffbeb; color: #92400e; font-weight: 700; text-align: center; }
.atl-table .atl-cell-orange  { background: #fff7ed; color: #9a3412; font-weight: 700; text-align: center; }
.atl-table .atl-cell-cyan    { background: #ecfeff; color: #155e75; font-weight: 700; text-align: center; }
.atl-table .atl-cell-rose    { background: #fff1f2; color: #9f1239; font-weight: 700; text-align: center; }
.atl-table .atl-foot td { background: #ecfdf5; color: #065f46; font-weight: 800; padding: 10px; }
/* Employee identity cell */
.atl-emp { line-height: 1.35; }
.atl-emp-name { font-weight: 800; color: #0f172a; font-size: 12px; }
.atl-emp-code { font-family: 'Courier New', monospace; font-size:10.5px; color: #0e7490; font-weight: 700; margin-top: 1px; }
.atl-emp-co   { font-size:10.5px; color: #7c2d12; margin-top: 1px; font-weight: 600; }
/* Date cell — date + day stacked */
.atl-date { line-height: 1.3; text-align: center; }
.atl-date-d { font-family: 'Courier New', monospace; font-weight: 700; font-size: 11.5px; color: #0f172a; }
.atl-date-w { font-size:10.5px; color: #64748b; font-weight: 600; margin-top: 1px; }
/* Note column — 2-line clamp */
.atl-note {
  font-size: 10.5px; color: #475569; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 180px; word-break: break-word;
}
/* Compact time cells */
.atl-table td.atl-cell-emerald,
.atl-table td.atl-cell-blue,
.atl-table td.atl-cell-purple,
.atl-table td.atl-cell-amber,
.atl-table td.atl-cell-orange,
.atl-table td.atl-cell-cyan,
.atl-table td.atl-cell-rose { font-family: 'Courier New', monospace; font-size: 11px; padding: 4px 6px; }
.atl-input { padding: 6px 10px; border: 1.5px solid #cbd5e1; border-radius: 6px; font-size: 12px; background: #fff; }

/* ─── Stats KPIs ─── */
.atl-stats-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 10px; margin-bottom: 14px; }
.atl-stat-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 6px rgba(15,23,42,0.04); }
.atl-stat-ic { font-size: 28px; }
.atl-stat-val { font-size: 22px; font-weight: 900; color: #0f172a; font-family: 'Inter', monospace; }
.atl-stat-lbl { font-size: 11px; color: #64748b; font-weight: 700; }
.atl-stat-card.success { background: #ecfdf5; border-color: #6ee7b7; }
.atl-stat-card.danger  { background: #fef2f2; border-color: #fca5a5; }
.atl-stat-card.warn    { background: #fffbeb; border-color: #fcd34d; }
.atl-stat-card.info    { background: #eff6ff; border-color: #93c5fd; }

/* ═══════════════════════════════════════════════════════════════════
   ATTENDANCE SUMMARY (ملخص الحضور الشهري) — Phase B
   ═══════════════════════════════════════════════════════════════════ */
.atsum-hero {
  background: linear-gradient(135deg, #014034 0%, #047857 55%, #10b981 100%);
  color: #fff; border-radius: 18px; padding: 22px 24px; margin-bottom: 18px;
  box-shadow: 0 14px 38px rgba(1,64,52,0.28);
}
.atsum-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.atsum-hero-title { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 240px; }
.atsum-hero-icon { font-size: 38px; background: rgba(255,255,255,0.18); border-radius: 14px; padding: 8px 12px; backdrop-filter: blur(8px); }
.atsum-hero-title h1 { margin: 0; font-size: 22px; font-weight: 900; }
.atsum-hero-title p  { margin: 2px 0 0; font-size: 12px; opacity: 0.9; }
.atsum-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.atsum-hero-btn {
  background: rgba(255,255,255,0.92); color: #0f172a; border: 0;
  border-radius: 10px; padding: 9px 16px; font-size: 12px; font-weight: 800;
  cursor: pointer; transition: all 0.15s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.atsum-hero-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.atsum-hero-btn.primary { background: #facc15; color: #422006; }
.atsum-hero-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; }
.atsum-hero-kpi { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; backdrop-filter: blur(6px); }
.atsum-hero-kpi-ic { font-size: 22px; opacity: 0.95; }
.atsum-hero-kpi-val { font-size: 18px; font-weight: 900; font-family: 'Inter', monospace; line-height: 1.1; }
.atsum-hero-kpi-lbl { font-size: 10.5px; opacity: 0.88; font-weight: 700; margin-top: 2px; }

.atsum-tabs-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 4px 12px rgba(15,23,42,0.04); margin-bottom: 14px; }
.atsum-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid #e2e8f0; overflow-x: auto; }
.atsum-tab-btn {
  background: transparent; border: 0; padding: 10px 16px;
  font-size: 13px; font-weight: 700; color: #64748b; cursor: pointer;
  border-radius: 8px; white-space: nowrap; transition: all 0.15s ease;
}
.atsum-tab-btn:hover { background: #f1f5f9; color: #0f172a; }
.atsum-tab-btn.active { background: linear-gradient(135deg, #047857, #10b981); color: #fff; box-shadow: 0 2px 6px rgba(4,120,87,0.25); }
.atsum-tab { padding: 18px; }

.atsum-analytics-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; margin-bottom: 14px; }
.atsum-kpi-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 6px rgba(15,23,42,0.04); }
.atsum-kpi-ic { font-size: 28px; }
.atsum-kpi-val { font-size: 20px; font-weight: 900; color: #0f172a; font-family: 'Inter', monospace; }
.atsum-kpi-lbl { font-size: 11px; color: #64748b; font-weight: 700; }

.atsum-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; }
.atsum-table th { background: linear-gradient(135deg, #1e293b, #334155); color: #fff; padding: 11px 9px; font-weight: 800; font-size: 11.5px; white-space: nowrap; border-bottom: 2px solid #0f172a; }
.atsum-table td { padding: 9px 9px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
.atsum-table tbody tr:hover { background: #f8fafc; }
.atsum-table .atsum-cell-emerald { background: #ecfdf5; color: #065f46; font-weight: 700; text-align: center; }
.atsum-table .atsum-cell-blue    { background: #eff6ff; color: #1e40af; font-weight: 700; text-align: center; }
.atsum-table .atsum-cell-indigo  { background: #eef2ff; color: #3730a3; font-weight: 700; text-align: center; }
.atsum-table .atsum-cell-amber   { background: #fffbeb; color: #92400e; font-weight: 700; text-align: center; }
.atsum-table .atsum-cell-orange  { background: #fff7ed; color: #9a3412; font-weight: 700; text-align: center; }
.atsum-table .atsum-cell-cyan    { background: #ecfeff; color: #155e75; font-weight: 700; text-align: center; }
.atsum-table .atsum-cell-rose    { background: #fff1f2; color: #9f1239; font-weight: 700; text-align: center; }
.atsum-table .atsum-cell-red     { background: #fef2f2; color: #991b1b; font-weight: 800; text-align: center; }
.atsum-table .atsum-cell-period  { background: #f5f3ff; color: #5b21b6; font-weight: 800; text-align: center; }
.atsum-table .atsum-cell-override { box-shadow: inset 0 0 0 2px #f59e0b; position: relative; }
.atsum-table .atsum-cell-override::after { content: '✏️'; position: absolute; top: 1px; left: 2px; font-size: 10.5px; }
.atsum-table .atsum-foot td { background: #ecfdf5; color: #065f46; font-weight: 800; padding: 11px 9px; border-top: 2px solid #10b981; }
.atsum-auto-val { display: inline-block; font-size:10.5px; color: #64748b; margin-inline-start: 4px; opacity: 0.7; }
.atsum-row-input { width: 64px; padding: 5px 7px; border: 1.5px solid #cbd5e1; border-radius: 6px; font-size: 12px; text-align: center; background: #fff; font-family: 'Inter', monospace; font-weight: 700; }
.atsum-row-input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.15); }
.atsum-act { display: inline-flex; gap: 4px; }
.atsum-editor-info { background: linear-gradient(135deg, #eff6ff, #ede9fe); border: 1px solid #c7d2fe; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #1e293b; }
.atsum-editor-table { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 10px; }

/* Mobile ≤ 480px */
@media (max-width: 480px) {
  .atsum-hero { padding: 16px; border-radius: 14px; }
  .atsum-hero-title h1 { font-size: 18px; }
  .atsum-hero-actions { width: 100%; }
  .atsum-hero-btn { flex: 1; padding: 8px 10px; font-size: 11.5px; }
  .atsum-hero-kpis { grid-template-columns: repeat(2, 1fr); }
  .atsum-tabs { padding: 6px; }
  .atsum-tab-btn { padding: 8px 11px; font-size: 11.5px; }
  .atsum-tab { padding: 12px; }
  .atsum-table { font-size: 11px; }
  .atsum-table th, .atsum-table td { padding: 7px 5px; }
  .atsum-row-input { width: 52px; padding: 4px 5px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAYROLL (مسير الرواتب) — Phase C
   ═══════════════════════════════════════════════════════════════════ */
.pay-hero {
  background: linear-gradient(135deg, #014034 0%, #047857 55%, #10b981 100%);
  color: #fff; border-radius: 18px; padding: 22px 24px; margin-bottom: 18px;
  box-shadow: 0 14px 38px rgba(1,64,52,0.28);
}
.pay-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pay-hero-title { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 240px; }
.pay-hero-icon { font-size: 38px; background: rgba(255,255,255,0.18); border-radius: 14px; padding: 8px 12px; backdrop-filter: blur(8px); }
.pay-hero-title h1 { margin: 0; font-size: 22px; font-weight: 900; }
.pay-hero-title p  { margin: 2px 0 0; font-size: 12px; opacity: 0.9; }
.pay-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-hero-btn {
  background: rgba(255,255,255,0.92); color: #0f172a; border: 0;
  border-radius: 10px; padding: 9px 16px; font-size: 12px; font-weight: 800;
  cursor: pointer; transition: all 0.15s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.pay-hero-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.pay-hero-btn.primary { background: #facc15; color: #422006; }
.pay-hero-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; }
.pay-hero-kpi { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; backdrop-filter: blur(6px); }
.pay-hero-kpi-ic { font-size: 22px; opacity: 0.95; }
.pay-hero-kpi-val { font-size: 18px; font-weight: 900; font-family: 'Inter', monospace; line-height: 1.1; }
.pay-hero-kpi-lbl { font-size: 10.5px; opacity: 0.88; font-weight: 700; margin-top: 2px; }

.pay-tabs-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 4px 12px rgba(15,23,42,0.04); margin-bottom: 14px; }
.pay-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid #e2e8f0; overflow-x: auto; }
.pay-tab-btn {
  background: transparent; border: 0; padding: 10px 16px;
  font-size: 13px; font-weight: 700; color: #64748b; cursor: pointer;
  border-radius: 8px; white-space: nowrap; transition: all 0.15s ease;
}
.pay-tab-btn:hover { background: #f1f5f9; color: #0f172a; }
.pay-tab-btn.active { background: linear-gradient(135deg, #047857, #10b981); color: #fff; box-shadow: 0 2px 6px rgba(4,120,87,0.30); }
.pay-tab { padding: 18px; }

.pay-filter-bar { display: flex; gap: 8px; padding: 12px 18px; border-bottom: 1px solid #f1f5f9; flex-wrap: wrap; }
.pay-input { padding: 8px 12px; border: 1.5px solid #cbd5e1; border-radius: 8px; font-size: 12.5px; background: #fff; min-width: 140px; }
.pay-input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.12); }
.pay-search { flex: 1; min-width: 200px; }
.pay-reset-btn { background: #f1f5f9; cursor: pointer; font-weight: 700; }
.pay-reset-btn:hover { background: #e2e8f0; }

.pay-info-banner { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border: 1px solid #c4b5fd; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 12.5px; color: #5b21b6; }
.pay-empty { text-align: center; padding: 60px 20px; color: #94a3b8; font-size: 14px; }

/* Tables */
.pay-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; }
.pay-table th { background: linear-gradient(135deg, #1e293b, #334155); color: #fff; padding: 11px 9px; font-weight: 800; font-size: 11.5px; white-space: nowrap; border-bottom: 2px solid #0f172a; }
.pay-table td { padding: 9px 9px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
.pay-table tbody tr:hover { background: #f8fafc; }
.pay-table .pay-foot td { background: #f5f3ff; color: #5b21b6; font-weight: 800; padding: 11px 9px; border-top: 2px solid #a78bfa; }
.pay-table-sm { font-size: 11.5px; }
.pay-table-sm th, .pay-table-sm td { padding: 7px 8px; }
.pay-audited { background: #fffbeb !important; }

/* Cell colors */
.pay-cell-emerald { background: #ecfdf5; color: #065f46; font-weight: 700; text-align: center; }
.pay-cell-blue    { background: #eff6ff; color: #1e40af; font-weight: 700; text-align: center; }
.pay-cell-indigo  { background: #eef2ff; color: #3730a3; font-weight: 700; text-align: center; }
.pay-cell-purple  { background: #f5f3ff; color: #6b21a8; font-weight: 700; text-align: center; }
.pay-cell-cyan    { background: #ecfeff; color: #155e75; font-weight: 700; text-align: center; }
.pay-cell-amber   { background: #fffbeb; color: #92400e; font-weight: 700; text-align: center; }
.pay-cell-orange  { background: #fff7ed; color: #9a3412; font-weight: 700; text-align: center; }
.pay-cell-rose    { background: #fff1f2; color: #9f1239; font-weight: 700; text-align: center; }
.pay-cell-red     { background: #fef2f2; color: #991b1b; font-weight: 700; text-align: center; }
.pay-cell-override { box-shadow: inset 0 0 0 2px #f59e0b; position: relative; }

/* Header color hints */
.pay-th-blue    { background: linear-gradient(135deg, #1e40af, #3730a3) !important; }
.pay-th-emerald { background: linear-gradient(135deg, #065f46, #047857) !important; }
.pay-th-purple  { background: linear-gradient(135deg, #6b21a8, #7c3aed) !important; }
.pay-th-rose    { background: linear-gradient(135deg, #9f1239, #be123c) !important; }
.pay-th-cyan    { background: linear-gradient(135deg, #155e75, #0891b2) !important; }
.pay-th-amber   { background: linear-gradient(135deg, #92400e, #b45309) !important; }
.pay-th-orange  { background: linear-gradient(135deg, #9a3412, #c2410c) !important; }
.pay-th-red     { background: linear-gradient(135deg, #991b1b, #b91c1c) !important; }
.pay-th-teal    { background: linear-gradient(135deg, #115e59, #0d9488) !important; }
.pay-th-violet  { background: linear-gradient(135deg, #5b21b6, #7c3aed) !important; }
.pay-cell-violet { background: #f5f3ff; color: #5b21b6; font-weight: 700; text-align: center; }

/* Actions */
.pay-act { white-space: nowrap; }
.pay-act-btn { background: transparent; border: 0; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; margin: 0 1px; transition: all 0.12s; }
.pay-act-edit { color: #3b82f6; } .pay-act-edit:hover { background: #dbeafe; }
.pay-act-print { color: #6366f1; } .pay-act-print:hover { background: #e0e7ff; }
.pay-act-del { color: #ef4444; } .pay-act-del:hover { background: #fee2e2; }
.pay-audit-btn { background: transparent; border: 1.5px solid #cbd5e1; padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.pay-audit-btn.on { background: #fef3c7; border-color: #f59e0b; }

/* KPIs in summary tab */
.pay-summary-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; margin-bottom: 14px; }
.pay-kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; text-align: center; box-shadow: 0 2px 4px rgba(15,23,42,0.04); }
.pay-kpi-ic { font-size: 22px; margin-bottom: 4px; }
.pay-kpi-val { font-size: 16px; font-weight: 900; color: #0f172a; font-family: 'Inter', monospace; }
.pay-kpi-lbl { font-size: 10.5px; color: #64748b; font-weight: 700; margin-top: 2px; }
.pay-kpi-blue    { border-top: 3px solid #3b82f6; }
.pay-kpi-cyan    { border-top: 3px solid #06b6d4; }
.pay-kpi-emerald { border-top: 3px solid #10b981; }
.pay-kpi-green   { border-top: 3px solid #22c55e; }
.pay-kpi-purple  { border-top: 3px solid #7c3aed; }
.pay-kpi-teal    { border-top: 3px solid #14b8a6; }
.pay-kpi-rose    { border-top: 3px solid #f43f5e; }
.pay-kpi-amber   { border-top: 3px solid #f59e0b; }

.pay-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px,1fr)); gap: 14px; }
.pay-summary-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.pay-summary-h { padding: 12px 16px; color: #fff; font-weight: 800; font-size: 13px; }
.pay-h-emerald { background: linear-gradient(135deg, #059669, #14b8a6); }
.pay-h-rose    { background: linear-gradient(135deg, #be123c, #ef4444); }

/* Editor modal */
.pay-editor-info { background: linear-gradient(135deg, #ecfeff, #f5f3ff); border-bottom: 1px solid #c4b5fd; padding: 10px 16px; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #1e293b; }
.pay-editor-body { flex: 1; overflow: auto; padding: 12px; background: #f8fafc; }
.pay-editor-table { width: 100%; border-collapse: collapse; min-width: 2400px; font-size: 11.5px; background: #fff; }
.pay-editor-table th { padding: 8px 6px; color: #fff; font-weight: 800; font-size: 11px; white-space: nowrap; position: sticky; top: 0; z-index: 5; background: linear-gradient(135deg, #1e293b, #334155); }
.pay-editor-table td { padding: 5px 4px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; text-align: center; font-size: 11.5px; }
.pay-editor-table tbody tr:hover { background: #f8fafc; }
.pay-row-input { width: 80px; padding: 4px 6px; border: 1.5px solid #cbd5e1; border-radius: 5px; font-size: 11.5px; text-align: center; background: #fff; font-family: 'Inter', monospace; font-weight: 700; }
.pay-row-input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,0.15); }
.pay-cell-meta { display: flex; gap: 2px; justify-content: center; margin-top: 2px; }
.pay-auto-badge { display: inline-block; font-size: 10.5px; padding: 1px 4px; border-radius: 4px; font-weight: 700; }
.pay-auto-bot { background: #d1fae5; color: #065f46; }
.pay-auto-edit { background: #fef3c7; color: #92400e; }
.pay-reset-mini { background: #dbeafe; color: #1e40af; border: 0; border-radius: 4px; padding: 1px 4px; font-size: 10.5px; cursor: pointer; font-weight: 800; }
.pay-row-audited { background: #fffbeb !important; }
.pay-editor-table .pay-foot td { background: #f5f3ff; color: #5b21b6; font-weight: 800; border-top: 2px solid #a78bfa; padding: 9px 5px; position: sticky; bottom: 0; }

/* Mobile ≤ 480px */
@media (max-width: 480px) {
  .pay-hero { padding: 16px; border-radius: 14px; }
  .pay-hero-title h1 { font-size: 18px; }
  .pay-hero-actions { width: 100%; }
  .pay-hero-btn { flex: 1; padding: 8px 10px; font-size: 11.5px; }
  .pay-hero-kpis { grid-template-columns: repeat(2, 1fr); }
  .pay-tabs { padding: 6px; }
  .pay-tab-btn { padding: 8px 11px; font-size: 11.5px; }
  .pay-tab { padding: 12px; }
  .pay-table { font-size: 11px; }
  .pay-table th, .pay-table td { padding: 7px 5px; }
  .pay-input { min-width: unset; flex: 1; }
}

/* Employees screen — Dynamic filter KPI highlight */
.emp-kpi { transition: all 0.2s ease; }
.emp-kpi.filter { background: rgba(252, 211, 77, 0.22); border-radius: 8px; padding: 6px 4px; box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.45) inset; }
.emp-kpi.filter .emp-kpi-icon { animation: empKpiPulse 1.6s ease-in-out infinite; }
@keyframes empKpiPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* ═══════════════════════════════════════════════════════════════════
   Collapsible Sidebar — RTL/LTR aware, mobile drawer preserved
   ═══════════════════════════════════════════════════════════════════ */
:root { --sidebar-w-collapsed: 72px; }
body.sidebar-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }

/* When collapsed: hide all text labels — keep icons visible */
body.sidebar-collapsed .sidebar-brand-name,
body.sidebar-collapsed .sidebar-brand-sub,
body.sidebar-collapsed .sidebar-item > span:not(.text-lg),
body.sidebar-collapsed .sidebar-item > span[data-i18n],
body.sidebar-collapsed .sidebar-section > span[data-i18n],
body.sidebar-collapsed .sidebar-section > span:first-child,
body.sidebar-collapsed .sidebar-arrow {
  opacity: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
body.sidebar-collapsed .sidebar-header { padding: 14px 0; display: flex; justify-content: center; }
/* v697 — التوسيط صار في القاعدة الأساسية؛ يبقى هنا إلغاء الفجوة فقط. */
body.sidebar-collapsed .sidebar-brand { gap: 0; }
body.sidebar-collapsed .sidebar-brand-logo { width: 40px; height: 40px; font-size: 18px; }
body.sidebar-collapsed .sidebar-item {
  justify-content: center;
  padding: 12px 8px;
  margin: 3px 8px;
}
body.sidebar-collapsed .sidebar-section {
  justify-content: center;
  padding: 8px 0;
  margin: 8px 4px 4px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
body.sidebar-collapsed .sidebar-section::before {
  content: '•••';
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 2px;
}
/* Collapsed: disable hover-shift (no room to slide) */
body.sidebar-collapsed .sidebar-item:hover { transform: none !important; }
/* Tooltip when collapsed (uses data-i18n text as backup) */
body.sidebar-collapsed .sidebar-item { position: relative; }
body.sidebar-collapsed .sidebar-item::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: #0f172a; color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 8px;
  white-space: nowrap;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  z-index: 100;
}
html[dir="rtl"] body.sidebar-collapsed .sidebar-item::after { right: 100%; margin-right: 12px; }
html[dir="ltr"] body.sidebar-collapsed .sidebar-item::after { left:  100%; margin-left:  12px; }
body.sidebar-collapsed .sidebar-item:hover::after { opacity: 1; visibility: visible; }

/* The "rail" collapse button — sits on the inner edge of the sidebar */
.sidebar-rail-btn {
  position: absolute;
  top: 78px;
  width: 28px; height: 28px;
  /* v0.37.9.509 — matches the active company's sidebar theme (same gradient) */
  background: var(--sidebar-bg, #082f49);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  z-index: 50;
  font-size: 14px;
  font-weight: 800;
  transition: transform 0.25s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.sidebar-rail-btn:hover {
  filter: brightness(1.25);
  box-shadow: 0 6px 18px rgba(0,0,0,0.36);
  transform: scale(1.12);
}
/* Position on the INNER edge (toward the content) */
html[dir="rtl"] .sidebar-rail-btn { left:  -14px; }
html[dir="ltr"] .sidebar-rail-btn { right: -14px; }
/* Arrow rotates depending on state + direction */
.sidebar-rail-btn .rail-arrow { display: inline-block; transition: transform 0.3s cubic-bezier(0.5,0,0.2,1); }
html[dir="rtl"] body:not(.sidebar-collapsed) .sidebar-rail-btn .rail-arrow { transform: rotate(0deg); }
html[dir="rtl"] body.sidebar-collapsed       .sidebar-rail-btn .rail-arrow { transform: rotate(180deg); }
html[dir="ltr"] body:not(.sidebar-collapsed) .sidebar-rail-btn .rail-arrow { transform: rotate(180deg); }
html[dir="ltr"] body.sidebar-collapsed       .sidebar-rail-btn .rail-arrow { transform: rotate(0deg); }

/* Smooth sidebar width transition on desktop */
@media (min-width: 1025px) {
  .sidebar, .app-layout { transition: grid-template-columns 0.28s cubic-bezier(0.5,0,0.2,1); }
  body { transition: none; }
  .sidebar { transition: width 0.28s cubic-bezier(0.5,0,0.2,1); }
}
/* Hide rail button on mobile (drawer pattern continues) */
@media (max-width: 1024px) {
  .sidebar-rail-btn { display: none; }
  body.sidebar-collapsed { --sidebar-w: 280px; } /* mobile ignores collapsed state */
}

/* When collapsed, hide the toggle group dropdowns to keep things clean */
body.sidebar-collapsed .sidebar-group { display: none; }
/* v0.37.9.615 — RAIL FLYOUT: hovering a section divider in the collapsed rail
   reveals its group as a floating panel (JS sets fixed top/left/right in
   viewport coords), so every grouped screen stays reachable without expanding.
   position:fixed lives ONLY on .is-flyout — when the class is removed the group
   reverts to static and the inline top/left/right become inert (no breakage). */
body.sidebar-collapsed .sidebar-group.is-flyout {
  display: block;
  position: fixed;
  background: var(--sidebar-bg, linear-gradient(180deg, #014034, #013229));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 6px;
  min-width: 232px;
  max-height: 78vh; overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  z-index: 95;
  animation: sbFlyIn 0.13s ease;
}
@keyframes sbFlyIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
body.sidebar-collapsed .sidebar-group.is-flyout::before {
  content: attr(data-flyout-title);
  display: block;
  font-size: 11px; font-weight: 800; letter-spacing: .3px;
  color: rgba(255,255,255,0.55);
  padding: 5px 12px 7px;
}
/* Inside the flyout, restore full labels + normal item layout */
body.sidebar-collapsed .sidebar-group.is-flyout .sidebar-item { justify-content: flex-start; margin: 2px; padding: 9px 12px; }
body.sidebar-collapsed .sidebar-group.is-flyout .sidebar-item > span:not(.text-lg),
body.sidebar-collapsed .sidebar-group.is-flyout .sidebar-item > span[data-i18n] {
  opacity: 1 !important; width: auto !important; overflow: visible; pointer-events: auto !important;
}
body.sidebar-collapsed .sidebar-group.is-flyout .sidebar-item::after { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   Searchable-select popup
   ═══════════════════════════════════════════════════════════════════ */
.searchable-popup {
  position: absolute;
  z-index: 10001;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(15,23,42,0.22), 0 2px 6px rgba(15,23,42,0.08);
  display: flex; flex-direction: column;
  max-width: 460px;
  max-height: min(380px, 70vh);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
  font-family: inherit;
}
.searchable-popup.ss-open { opacity: 1; transform: translateY(0) scale(1); }
.searchable-popup.ss-above { transform-origin: bottom; }
.searchable-popup.ss-below { transform-origin: top; }

.searchable-popup .ss-search-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  background: linear-gradient(180deg, #f8fafc, #fff);
}
.searchable-popup .ss-search-icon { font-size: 14px; opacity: 0.7; }
.searchable-popup .ss-search-input {
  flex: 1;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 13px;
  outline: none;
  background: #fff;
  font-family: inherit;
  font-weight: 600;
  color: #0f172a;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.searchable-popup .ss-search-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.searchable-popup .ss-clear-btn {
  background: #f1f5f9; border: 0; padding: 5px 9px;
  border-radius: 7px; font-size: 11px; cursor: pointer;
  color: #64748b; font-weight: 800;
  transition: all 0.12s;
}
.searchable-popup .ss-clear-btn:hover { background: #e2e8f0; color: #0f172a; }

.searchable-popup .ss-list {
  overflow-y: auto; overflow-x: hidden;
  flex: 1 1 auto;
  padding: 4px;
  scrollbar-width: thin;
}
.searchable-popup .ss-list::-webkit-scrollbar { width: 7px; }
.searchable-popup .ss-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.searchable-popup .ss-opt {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0; background: transparent;
  border-radius: 7px;
  cursor: pointer;
  text-align: start;
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  transition: background 0.08s;
  font-family: inherit;
}
.searchable-popup .ss-opt:hover { background: #f1f5f9; }
.searchable-popup .ss-opt-active { background: linear-gradient(90deg, #eef2ff, #f5f3ff); box-shadow: inset 0 0 0 1.5px #c7d2fe; }
.searchable-popup .ss-opt-selected { background: #dcfce7; color: #065f46; }
.searchable-popup .ss-opt-selected.ss-opt-active { background: #bbf7d0; }
.searchable-popup .ss-opt-disabled { opacity: 0.5; cursor: not-allowed; }
.searchable-popup .ss-opt mark {
  background: #fde68a; color: #78350f;
  padding: 0 2px; border-radius: 3px;
  font-weight: 800;
}
.searchable-popup .ss-check { color: #10b981; font-weight: 900; width: 14px; flex: 0 0 14px; text-align: center; }
.searchable-popup .ss-check-space { width: 14px; flex: 0 0 14px; }
.searchable-popup .ss-opt-label { flex: 1 1 auto; }
.searchable-popup .ss-group-tag {
  font-size:10.5px; padding: 2px 6px;
  background: #f1f5f9; color: #64748b;
  border-radius: 5px; font-weight: 700;
  flex: 0 0 auto;
}

.searchable-popup .ss-empty {
  padding: 28px 12px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
}

.searchable-popup .ss-footer {
  display: flex; gap: 14px;
  padding: 8px 12px;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
}
.searchable-popup .ss-footer kbd {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'Inter', monospace;
  font-size:10.5px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 1px;
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .searchable-popup {
    position: fixed !important;
    left: 8px !important; right: 8px !important;
    bottom: 8px !important; top: auto !important;
    max-width: none;
    max-height: 60vh;
    border-radius: 14px 14px 8px 8px;
  }
  .searchable-popup .ss-footer { display: none; }
}

/* Locked date field (business-rule locks in employee modal) */
input.field-locked {
  background: #fef2f2 !important;
  color: #991b1b !important;
  cursor: not-allowed !important;
  border-color: #fca5a5 !important;
  box-shadow: inset 0 0 0 1.5px #fecaca;
}
input.field-locked:focus { outline: none !important; }
.form-field .lock-hint {
  background: #fee2e2;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
}

/* Work days picker — 7 chips on one row (employee modal) */
.emp-workdays-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.emp-workday-chip {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #f1f5f9; border: 1.5px solid #cbd5e1;
  border-radius: 10px; padding: 8px 6px;
  font-size: 12px; font-weight: 700; color: #64748b;
  cursor: pointer; transition: all 0.15s ease;
  user-select: none;
  text-align: center;
}
.emp-workday-chip input { width: 14px; height: 14px; accent-color: #f97316; }
.emp-workday-chip:hover { border-color: #94a3b8; background: #e2e8f0; }
.emp-workday-chip.checked {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff; border-color: #c2410c;
  box-shadow: 0 2px 6px rgba(249,115,22,0.35);
}
@media (max-width: 600px) {
  .emp-workdays-row { grid-template-columns: repeat(4, 1fr); }
  .emp-workday-chip { padding: 7px 4px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
   COST CENTERS SCREEN
   ═══════════════════════════════════════════════════════════════════ */
.cc-hero {
  background: linear-gradient(135deg, #0e7490 0%, #0891b2 60%, #06b6d4 100%);
  color: #fff; border-radius: 18px; padding: 22px 24px; margin-bottom: 18px;
  box-shadow: 0 14px 38px rgba(8,145,178,0.32);
}
.cc-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.cc-hero-title { display: flex; align-items: center; gap: 14px; }
.cc-hero-icon { font-size: 38px; background: rgba(255,255,255,0.18); border-radius: 14px; padding: 8px 12px; }
.cc-hero-title h1 { margin: 0; font-size: 22px; font-weight: 900; }
.cc-hero-title p { margin: 2px 0 0; font-size: 12px; opacity: 0.9; }
.cc-hero-btn { background: #fff; color: #0e7490; border: 0; border-radius: 10px; padding: 9px 16px; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.cc-hero-btn.primary { background: #facc15; color: #422006; }
.cc-hero-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 10px; }
.cc-hero-kpi { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.cc-hero-kpi.warn { background: rgba(254,243,199,0.25); border-color: #fde047; }
.cc-hero-kpi-ic { font-size: 22px; }
.cc-hero-kpi-val { font-size: 16px; font-weight: 900; font-family: 'Inter', monospace; }
.cc-hero-kpi-lbl { font-size: 10.5px; opacity: 0.88; font-weight: 700; }

.cc-tabs-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 4px 12px rgba(15,23,42,0.04); margin-bottom: 14px; overflow: hidden; }
.cc-tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid #e2e8f0; }
.cc-tab-btn { background: transparent; border: 0; padding: 10px 16px; font-size: 13px; font-weight: 700; color: #64748b; cursor: pointer; border-radius: 8px; }
.cc-tab-btn:hover { background: #f1f5f9; color: #0f172a; }
.cc-tab-btn.active { background: linear-gradient(135deg, #0e7490, #0891b2); color: #fff; }
.cc-tab-body { padding: 16px; }

.cc-tree-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.cc-tree { background: #f6faf8; border-radius: 10px; padding: 10px; }   /* v803 — أرضية بمسحة الهوية */
.cc-tree-node { border-radius: 8px; }
.cc-tree-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--el-tree-l4); border: 1px solid rgba(4,120,87,0.10); border-inline-start: 3px solid var(--el-tree-l4-edge); margin-bottom: 4px; font-size: 13px; transition: background .15s, filter .12s; }
/* 🌳 v813 — سلّم العمق الموحّد (نفس شجرة الحسابات حرفياً) */
.cc-tree-node[data-depth="0"] > .cc-tree-row { background: var(--el-tree-l0); border-inline-start-color: var(--el-tree-l0-edge); }
.cc-tree-node[data-depth="1"] > .cc-tree-row { background: var(--el-tree-l1); border-inline-start-color: var(--el-tree-l1-edge); }
.cc-tree-node[data-depth="2"] > .cc-tree-row { background: var(--el-tree-l2); border-inline-start-color: var(--el-tree-l2-edge); }
.cc-tree-node[data-depth="3"] > .cc-tree-row { background: var(--el-tree-l3); border-inline-start-color: var(--el-tree-l3-edge); }
/* v804 — المركز الذي تحته فروع = رئيسي ⇒ أخضر داكن قليلاً */
.cc-tree-node.has-children > .cc-tree-row { font-weight: 800; color: var(--el-tree-ink); }
.cc-tree-row:hover { filter: brightness(0.96); border-color: rgba(4,120,87,0.32); box-shadow: 0 1px 4px rgba(1,64,52,0.06); }   /* v813 — يُعتِّم درجة فيبقى التدرّج */
.cc-tree-node.inactive > .cc-tree-row { opacity: 0.55; }
.cc-tree-toggle { width: 18px; text-align: center; cursor: pointer; font-weight: 800; color: #475569; user-select: none; }
.cc-tree-toggle.placeholder { color: #cbd5e1; cursor: default; }
.cc-tree-icon { font-size: 16px; }
.cc-tree-code { font-family: monospace; font-weight: 800; color: #047857; }   /* v803 — كان سماوياً */
.cc-tree-name { flex: 1; font-weight: 700; color: #0f172a; }
.cc-tree-amt { font-size: 11px; padding: 3px 7px; border-radius: 5px; font-weight: 800; font-family: monospace; }
.cc-tree-amt.cc-rev { background: #d1fae5; color: #065f46; }
.cc-tree-amt.cc-exp { background: #fee2e2; color: #991b1b; }
.cc-tree-actions { display: flex; gap: 4px; }
.cc-tree-children { margin: 0; padding: 0; }

.cc-act-btn { background: transparent; border: 0; padding: 4px 7px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.12s; }
.cc-act-btn.add { color: #16a34a; } .cc-act-btn.add:hover { background: #dcfce7; }
.cc-act-btn.edit { color: #3b82f6; } .cc-act-btn.edit:hover { background: #dbeafe; }
.cc-act-btn.delete { color: #ef4444; } .cc-act-btn.delete:hover { background: #fee2e2; }
.cc-act-btn.dist { color: #047857; background: #ecfdf5; padding: 6px 10px; font-size: 16px; }   /* v803 — كان بنفسجياً */
.cc-act-btn.dist:hover { background: #d1fae5; transform: scale(1.1); }

.cc-empty { text-align: center; padding: 50px; color: #94a3b8; font-size: 14px; }

.cc-filter-bar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.cc-input { padding: 8px 12px; border: 1.5px solid #cbd5e1; border-radius: 8px; font-size: 12.5px; background: #fff; min-width: 150px; }
.cc-reset { cursor: pointer; background: #f1f5f9; font-weight: 700; }
.cc-lines-summary { display: flex; gap: 16px; padding: 12px; background: #f8fafc; border-radius: 10px; margin-bottom: 12px; font-size: 12.5px; flex-wrap: wrap; }
.cc-lines-summary .ok { color: #065f46; }
.cc-lines-summary .warn { color: #b45309; }

.cc-table-wrap { overflow-x: auto; border-radius: 10px; }
.cc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; }
.cc-table th { background: linear-gradient(135deg, #0e7490, #0891b2); color: #fff; padding: 10px 8px; font-weight: 800; font-size: 11.5px; white-space: nowrap; }
.cc-table td { padding: 9px 8px; border-bottom: 1px solid #e2e8f0; }
.cc-table td.num { font-family: monospace; font-weight: 700; text-align: end; }
.cc-table td.cc-cell-ok { background: #ecfdf5; color: #065f46; }
.cc-table td.cc-cell-warn { background: #fffbeb; color: #92400e; }
.cc-table tr.cc-allocated { background: #f0fdf4; }
.cc-table tr:hover { background: #f8fafc; }
.cc-table .mono { font-family: monospace; }

/* Distribution modal */
.cc-dist-body { background: #f8fafc; }
.cc-dist-info { background: #fff; border: 1px solid #c4b5fd; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.cc-dist-summary { margin-bottom: 12px; }
.cc-dist-meter { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 14px; display: flex; gap: 14px; align-items: center; font-size: 12.5px; flex-wrap: wrap; }
.cc-dist-meter.ok { background: #ecfdf5; border-color: #6ee7b7; }
.cc-dist-meter.short { background: #fffbeb; border-color: #fcd34d; }
.cc-dist-meter.over { background: #fee2e2; border-color: #fca5a5; }
.cc-dist-meter .mono { font-family: monospace; font-weight: 800; }
.cc-badge { font-size: 11px; padding: 3px 8px; border-radius: 6px; font-weight: 800; margin-inline-start: auto; }
.cc-badge.ok { background: #10b981; color: #fff; }
.cc-badge.short { background: #f59e0b; color: #fff; }
.cc-badge.over { background: #ef4444; color: #fff; }
.cc-dist-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; font-size: 12px; }
.cc-dist-table th { background: #f1f5f9; padding: 9px 7px; font-weight: 800; color: #475569; }
.cc-dist-table td { padding: 6px 5px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.cc-dist-table input, .cc-dist-table select { padding: 5px 8px; border: 1.5px solid #cbd5e1; border-radius: 6px; font-size: 12px; background: #fff; width: 100%; box-sizing: border-box; }
.cc-dist-table .cc-dist-pct, .cc-dist-table .cc-dist-amt { text-align: end; font-family: monospace; font-weight: 700; }
.cc-dist-helpers { display: flex; gap: 8px; }

/* Cost-center button inside journal line */
.action-btn.cc-jv-dist { background: #f3e8ff; color: #7c3aed; padding: 4px 8px; font-size: 13px; margin-inline-end: 2px; transition: all 0.12s; }
.action-btn.cc-jv-dist:hover { background: #ddd6fe; transform: scale(1.1); }
.action-btn.cc-jv-dist.allocated { background: #d1fae5; color: #065f46; }
.action-btn.cc-jv-dist.allocated::after { content: '✓'; margin-inline-start: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   Cost Centers — Enhanced Hero KPIs + Filter Pro + Export
   ═══════════════════════════════════════════════════════════════════════ */
/* 2-row hero KPIs: 4 columns on wide screens, scales down nicely */
.cc-hero-kpis-2row { grid-template-columns: repeat(4, 1fr); }
.cc-hero-kpi.rev      { background: linear-gradient(135deg, rgba(16,185,129,0.22), rgba(5,150,105,0.22)); border-color: rgba(110,231,183,0.5); }
.cc-hero-kpi.rev-ok   { background: linear-gradient(135deg, rgba(34,197,94,0.25), rgba(22,163,74,0.25)); border-color: rgba(134,239,172,0.6); }
.cc-hero-kpi.exp      { background: linear-gradient(135deg, rgba(239,68,68,0.22), rgba(220,38,38,0.22)); border-color: rgba(252,165,165,0.5); }
.cc-hero-kpi.exp-ok   { background: linear-gradient(135deg, rgba(244,114,182,0.22), rgba(219,39,119,0.22)); border-color: rgba(251,182,206,0.5); }
@media (max-width: 1100px) { .cc-hero-kpis-2row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cc-hero-kpis-2row { grid-template-columns: 1fr; } }

/* Active filter chips */
.cc-active-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: rgba(255,255,255,0.14); padding: 8px 12px; border-radius: 10px; margin: 8px 0; font-size: 11.5px; }
.cc-chips-lbl { color: #facc15; font-weight: 800; }
.cc-chip { background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.32); padding: 3px 9px; border-radius: 12px; color: #fff; font-weight: 700; }
.cc-chip-clear { margin-inline-start: auto; background: #ef4444; color: #fff; border: 0; padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 800; cursor: pointer; }
.cc-chip-clear:hover { background: #dc2626; }

/* Filter bar — pro */
.cc-filter-bar-pro { padding: 12px; background: linear-gradient(135deg, #f0f9ff, #ecfeff); border: 1px solid #bae6fd; border-radius: 12px; margin: 12px; display: flex; flex-direction: column; gap: 10px; }
.cc-filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cc-filter-adv { background: rgba(255,255,255,0.6); border: 1px dashed #93c5fd; border-radius: 10px; padding: 10px; }
.cc-adv-toggle { background: linear-gradient(135deg, #6366f1, #4f46e5) !important; color: #fff !important; border-color: #4f46e5 !important; cursor: pointer; font-weight: 800; }
.cc-adv-toggle.is-open { background: linear-gradient(135deg, #4f46e5, #4338ca) !important; }
.cc-date-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.cc-mini-btn { background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 10px; font-size: 11px; font-weight: 700; color: #475569; cursor: pointer; transition: all 0.12s; }
.cc-mini-btn:hover { background: #0891b2; color: #fff; border-color: #0e7490; }

/* Export buttons */
.cc-filter-export { justify-content: flex-end; padding-top: 6px; border-top: 1px dashed #bae6fd; }
.cc-export-group { display: flex; gap: 6px; }
.cc-export-btn { padding: 7px 13px; border: 0; border-radius: 8px; font-size: 12px; font-weight: 800; cursor: pointer; color: #fff; transition: all 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.cc-export-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.15); }
.cc-export-btn.excel { background: linear-gradient(135deg, #10b981, #059669); }
.cc-export-btn.csv   { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.cc-export-btn.pdf   { background: linear-gradient(135deg, #ef4444, #dc2626); }
.cc-export-btn.print { background: linear-gradient(135deg, #64748b, #475569); }

/* Tree filter results count */
.cc-tree-count { margin-inline-start: auto; font-size: 11.5px; color: #0891b2; font-weight: 800; padding: 4px 10px; background: #ecfeff; border-radius: 6px; border: 1px solid #a5f3fc; }

/* Lines summary — pct chip */
.cc-lines-summary .cc-pct { margin-inline-start: auto; background: #0891b2; color: #fff; padding: 3px 10px; border-radius: 6px; font-weight: 800; }

/* Row tinting for partial/unallocated */
.cc-table tr.cc-unallocated { background: #fffbeb; }
.cc-table tr.cc-partial     { background: #fef3c7; }

/* Combined tab — summary cards */
.cc-combined-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 900px) { .cc-combined-summary { grid-template-columns: 1fr; } }
.cc-cs-card { padding: 14px 16px; border-radius: 12px; border: 1.5px solid; position: relative; overflow: hidden; }
.cc-cs-card .cc-cs-hdr { font-size: 13px; font-weight: 800; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1.5px dashed currentColor; opacity: 0.85; }
.cc-cs-card .cc-cs-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 12px; }
.cc-cs-card .cc-cs-row strong { font-family: monospace; font-size: 13.5px; }
.cc-cs-card .cc-cs-row.ok { color: #065f46; }
.cc-cs-card .cc-cs-row.warn { color: #92400e; }
.cc-cs-card .cc-cs-pct { position: absolute; top: 10px; inset-inline-end: 12px; font-size: 11.5px; font-weight: 800; background: rgba(255,255,255,0.7); padding: 2px 9px; border-radius: 8px; }
.cc-cs-rev { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: #6ee7b7; color: #065f46; }
.cc-cs-exp { background: linear-gradient(135deg, #fef2f2, #fee2e2); border-color: #fca5a5; color: #991b1b; }
.cc-cs-net { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #93c5fd; color: #1e3a8a; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cc-cs-net.positive { background: linear-gradient(135deg, #ecfeff, #cffafe); border-color: #67e8f9; color: #155e75; }
.cc-cs-net.negative { background: linear-gradient(135deg, #fff7ed, #ffedd5); border-color: #fdba74; color: #9a3412; }
.cc-cs-net .cc-cs-net-val { font-family: monospace; font-size: 26px; font-weight: 900; margin: 6px 0; }
.cc-cs-net .cc-cs-net-lbl { font-size: 12px; font-weight: 800; opacity: 0.85; padding: 3px 12px; border-radius: 10px; background: rgba(255,255,255,0.6); }
.cc-cs-net .cc-cs-count { font-size: 10.5px; margin-top: 8px; opacity: 0.7; }

/* Kind badge (combined tab) */
.cc-kind-badge { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.cc-kind-badge.rev { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.cc-kind-badge.exp { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.cc-table tr.cc-row-revenue td:first-child { border-inline-start: 3px solid #10b981; }
.cc-table tr.cc-row-expense td:first-child { border-inline-start: 3px solid #ef4444; }

/* Company cell + source badge */
.cc-cell-company { font-size: 11.5px; color: #0f172a; max-width: 180px; }
.cc-com-code { background: #0891b2; color: #fff; padding: 2px 6px; border-radius: 4px; font-size:10.5px; font-weight: 800; }
.cc-com-name { font-weight: 700; }
.cc-src-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800; padding: 3px 7px; border-radius: 6px; white-space: nowrap; background: #f1f5f9; color: #475569; }
.cc-src-manual        { background: #e0e7ff; color: #3730a3; }
.cc-src-opening       { background: #fef3c7; color: #92400e; }
.cc-src-sales-invoice { background: #d1fae5; color: #065f46; }
.cc-src-receipt       { background: #dbeafe; color: #1e40af; }
.cc-src-payment       { background: #fee2e2; color: #991b1b; }
.cc-src-transfer      { background: #fce7f3; color: #9d174d; }
.cc-src-fixed-asset   { background: #f3e8ff; color: #5b21b6; }

/* ═══════════════════════════════════════════════════════════════════════
   OFFICIAL LETTERS ISSUANCE SCREEN
   ═══════════════════════════════════════════════════════════════════════ */
.ol-hero {
  background: linear-gradient(135deg, #014034 0%, #047857 55%, #10b981 100%);
  color: #fff; border-radius: 14px; padding: 18px 22px; margin-bottom: 14px;
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.2);
}
.ol-hero-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ol-hero-title { display: flex; align-items: center; gap: 14px; }
.ol-hero-icon { font-size: 36px; background: rgba(255,255,255,0.18); border-radius: 12px; padding: 8px 14px; }
.ol-hero h2 { font-size: 20px; font-weight: 900; margin: 0; }
.ol-hero p { font-size: 12px; opacity: 0.92; margin: 4px 0 0; }
.ol-hero-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.ol-kpi {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.24);
  border-radius: 10px; padding: 10px 14px;
}
.ol-kpi-ic { font-size: 22px; }
.ol-kpi-lbl { font-size: 10.5px; opacity: 0.88; font-weight: 700; }
.ol-kpi-val { font-size: 22px; font-weight: 900; font-family: 'Courier New', monospace; direction: ltr; }

.ol-tabs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.ol-tab {
  background: #fff; border: 2px solid #e2e8f0; border-radius: 10px;
  padding: 10px 12px; display: flex; align-items: center; gap: 10px; cursor: pointer;
  transition: all 0.2s; font-size: 12.5px; font-weight: 700; color: #475569;
}
.ol-tab:hover { border-color: var(--c); transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(0,0,0,0.08); }
.ol-tab.active {
  background: var(--c); color: #fff; border-color: transparent;
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--c) 40%, transparent);
}
.ol-tab-ic { font-size: 18px; }
.ol-tab-badge {
  margin-inline-start: auto;
  background: rgba(255,255,255,0.25); padding: 2px 8px; border-radius: 999px;
  font-weight: 900; font-size: 11px; min-width: 24px; text-align: center;
}
.ol-tab:not(.active) .ol-tab-badge { background: #f1f5f9; color: #0f172a; }

.ol-input {
  width: 100%; padding: 7px 10px; border: 1.5px solid #cbd5e1;
  border-radius: 6px; font-size: 12px; background: #fff;
}
.ol-input:focus { outline: 2px solid #15803d; outline-offset: -1px; border-color: #15803d; }

.ol-table th { font-size: 11px; }
.ol-type-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700;
}

/* ─── Official Letters · Rich-text editor toolbar ─── */
.ol-toolbar { font-size: 12px; }
.ol-tb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 5px;
  cursor: pointer; font-size: 13px; font-weight: 700; color: #334155;
  transition: all 0.15s; position: relative;
}
.ol-tb-btn:hover { background: #e0f2fe; border-color: #0ea5e9; color: #0369a1; }
.ol-tb-btn:active { transform: scale(0.95); }
.ol-tb-select {
  height: 30px; padding: 0 6px; border: 1px solid #cbd5e1;
  border-radius: 5px; background: #fff; font-size: 11.5px; cursor: pointer;
}
.ol-tb-sep {
  display: inline-block; width: 1px; height: 22px; background: #cbd5e1; margin: 0 4px;
}
/* Word-style color button — A + color bar under it */
.ol-tb-color {
  flex-direction: column; gap: 0; min-width: 32px; padding: 2px 6px; height: auto;
}
.ol-tb-color-bar { transition: background 0.15s }
.ol-tb-color:hover .ol-tb-color-bar { filter: brightness(1.1) }
/* Hover state for table grid cells */
.tbl-cell:hover { background: #93c5fd !important; border-color: #1e40af !important }
.ol-editor { transition: border-color 0.2s, box-shadow 0.2s; }
.ol-editor:focus { border-color: #0ea5e9 !important; box-shadow: 0 0 0 3px rgba(14,165,233,0.15); }
.ol-editor.view-only { background: #fafafa !important; cursor: default; }
.ol-editor p { margin: 0 0 12px }
.ol-editor table { border-collapse: collapse; margin: 8px 0 }
.ol-editor table td, .ol-editor table th { padding: 6px 10px; border: 1px solid #cbd5e1 }
.ol-editor blockquote {
  margin: 8px 0; padding: 8px 16px; border-inline-start: 4px solid #0ea5e9;
  background: #f0f9ff; color: #0c4a6e; font-style: italic;
}
.ol-editor h2 { font-size: 18px; font-weight: 800; margin: 12px 0 8px; color: #1e40af }

/* ─── Quotations screen ─────────────────────────────────────────────── */
.ql-kpi {
  padding: 12px 14px; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ql-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,0.08); }
.ql-kpi-val { font-size: 19px; font-weight: 900; color: #0f172a; font-family: Tajawal, 'Courier New', monospace; }
.ql-kpi-lbl { font-size: 11.5px; font-weight: 700; color: #475569; margin-top: 4px; }
.ql-tab-strip { font-size: 13px; }
.ql-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px; background: #fff;
  border: 1.5px solid #cbd5e1; color: #475569; font-weight: 700;
  cursor: pointer; transition: all 0.15s; font-size: 12.5px;
}
.ql-tab:hover { background: #ecfeff; border-color: var(--c, #0e7490); color: var(--c, #0e7490); }
.ql-tab.active { background: var(--c, #0e7490); border-color: var(--c, #0e7490); color: #fff; box-shadow: 0 4px 10px rgba(14,116,144,0.25); }
.ql-tab-badge { background: rgba(255,255,255,0.25); color: inherit; padding: 2px 8px; border-radius: 10px; font-weight: 800; font-size: 11px; }
.ql-tab.active .ql-tab-badge { background: rgba(255,255,255,0.35) }
.ql-input {
  width: 100%; padding: 7px 10px; border: 1.5px solid #cbd5e1;
  border-radius: 6px; font-size: 12px; background: #fff;
}
.ql-input:focus { outline: 2px solid #0e7490; outline-offset: -1px; border-color: #0e7490; }
.ql-table th { font-size: 11.5px; }

/* ═══════════════════════════════════════════════════════════════════
   📌 COMPANIES — Pin / Compare / PDF / Bulk / Silent Alerts / Smart Search
   ═══════════════════════════════════════════════════════════════════ */

/* Pinned row marker */
.co-list-table tr.pinned-row { background: linear-gradient(90deg, #fffbeb 0%, #ffffff 12%) !important; }
.co-list-table tr.pinned-row > td:first-child { border-${'left' /* RTL fallback handled via dir */}: 3px solid #f59e0b; }

/* Card-level quick-action row */
.co-card-quick-actions {
  display: flex; gap: 6px; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed #e2e8f0; flex-wrap: wrap;
}
.co-quick-btn {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 8px; border-radius: 7px; font-size: 11px; font-weight: 800;
  border: 1.5px solid #e2e8f0; background: #fff; color: #475569;
  cursor: pointer; transition: all 0.15s;
}
.co-quick-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15,23,42,0.08); }
.co-quick-pin { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.co-quick-pin.active { background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #fff; border-color: #d97706; }
.co-quick-cmp { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }
.co-quick-cmp.active { background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff; border-color: #1e3a8a; }
.co-quick-pdf { background: #fce7f3; color: #be185d; border-color: #f9a8d4; }
.co-quick-pdf:hover { background: linear-gradient(135deg,#be185d,#ec4899); color: #fff; border-color: #9d174d; }

/* Bulk action bar (sticky toolbar) */
.co-bulk-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 18px; background: linear-gradient(135deg,#1e40af,#3b82f6);
  color: #fff; border-bottom: 1px solid #1e3a8a;
  animation: coBulkSlide 0.25s ease;
}
@keyframes coBulkSlide { from { transform: translateY(-6px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.co-bulk-bar-info { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; }
.co-bulk-bar-count {
  background: rgba(255,255,255,0.25); padding: 2px 10px; border-radius: 999px;
  font-weight: 900; font-size: 13px;
}
.co-bulk-bar .btn { font-size: 11.5px; padding: 5px 10px; font-weight: 800; }

/* Bulk row checkboxes accent */
.co-bulk-cb { accent-color: #1e40af; cursor: pointer; transform: scale(1.15); }

/* Silent Alerts panel */
.co-silent-alerts {
  margin-bottom: 14px; background: #fff; border: 1.5px solid #e2e8f0;
  border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 2px 6px rgba(15,23,42,0.04);
}
.co-silent-alerts > summary {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none; user-select: none;
  font-size: 13px; color: #334155;
}
.co-silent-alerts > summary::-webkit-details-marker { display: none; }
.co-silent-badge {
  background: linear-gradient(135deg,#dc2626,#f87171); color: #fff;
  font-weight: 900; font-size: 11px; padding: 2px 9px;
  border-radius: 999px; min-width: 22px; text-align: center;
}
.co-silent-alerts-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 8px; margin-top: 10px;
}
.co-silent-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  font-size: 12px; font-weight: 700;
  border-${'inline-start'}: 4px solid;
}
.co-silent-ic { font-size: 16px; }
.co-silent-amber { background: #fffbeb; color: #92400e; border-color: #f59e0b; }
.co-silent-rose  { background: #fff1f2; color: #9f1239; border-color: #f43f5e; }
.co-silent-cyan  { background: #ecfeff; color: #155e75; border-color: #0891b2; }
.co-silent-slate { background: #f8fafc; color: #475569; border-color: #94a3b8; }

/* Smart Search inline help button */
.co-smart-search-help {
  position: absolute; top: 50%; transform: translateY(-50%);
  inset-inline-end: 8px; background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff;
  border: 0; padding: 4px 9px; border-radius: 6px;
  font-weight: 900; font-size: 13px; cursor: pointer;
  box-shadow: 0 2px 6px rgba(30,64,175,0.25);
}
.co-smart-search-help:hover { transform: translateY(-50%) scale(1.05); }

/* Capital Timeline svg */
.co-cap-timeline { max-width: 100%; }
.co-cap-timeline rect { transition: opacity 0.15s; }
.co-cap-timeline rect:hover { opacity: 1 !important; }
.co-cap-timeline circle { transition: r 0.15s; cursor: pointer; }
.co-cap-timeline circle:hover { r: 7; }


/* ═══════════════════════════════════════════════════════════════════
   🩺 Health Score Badge + 👁 Side Panel Preview + 🕘 Recent + ⌨️ Hints
   ═══════════════════════════════════════════════════════════════════ */

/* Segmented Cards/Table toggle (cleaner replacement) */
.co-basic-view-seg {
  display: inline-flex; background: #f1f5f9; border: 1.5px solid #cbd5e1;
  border-radius: 999px; padding: 3px; gap: 2px;
}
.co-basic-view-seg .btn { border-radius: 999px !important; border: 0 !important; padding: 5px 12px !important; font-size: 11.5px; }
.co-basic-view-seg .btn-outline { background: transparent !important; color: #64748b !important; }
.co-basic-view-seg .btn-primary-action {
  background: linear-gradient(135deg,#1e40af,#3b82f6) !important; color: #fff !important;
  box-shadow: 0 2px 6px rgba(30,64,175,0.25);
}

/* 🩺 Health Score badge in the table */
.col-health { width: 50px; text-align: center; padding: 4px !important; }
.co-health-badge {
  background: none; border: 2px solid; border-radius: 50%;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
.co-health-badge:hover { transform: scale(1.12); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }

/* 🕘 Recently Viewed strip */
.co-recent-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px; background: linear-gradient(90deg,#f8fafc,#fff,#f8fafc);
  border: 1.5px solid #e2e8f0; border-radius: 10px;
  margin-bottom: 12px; box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
.co-recent-strip-lbl {
  font-size: 11.5px; font-weight: 800; color: #475569;
  padding: 2px 10px; background: #f1f5f9; border-radius: 999px;
}
.co-recent-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  background: #fff; border: 1.5px solid #cbd5e1; color: #1e293b;
  cursor: pointer; font-weight: 700; font-size: 11.5px;
  transition: all 0.15s;
}
.co-recent-chip:hover { background: #eff6ff; border-color: #3b82f6; transform: translateY(-1px); }
.co-recent-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: contain; background: #f1f5f9; padding: 1px; }
.co-recent-init {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px;
}
.co-recent-clear {
  margin-inline-start: auto; background: transparent; border: 1.5px dashed #cbd5e1;
  color: #94a3b8; padding: 2px 8px; border-radius: 999px; cursor: pointer;
  font-size: 11px; font-weight: 800;
}
.co-recent-clear:hover { color: #dc2626; border-color: #fca5a5; background: #fef2f2; }

/* 👁 Side Panel Preview (slide-in from end) */
.co-side-panel-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,0.45);
  z-index: 1500; display: flex; justify-content: flex-end;
  animation: coSideFade 0.2s ease;
}
[dir="ltr"] .co-side-panel-backdrop { justify-content: flex-end; }
[dir="rtl"] .co-side-panel-backdrop { justify-content: flex-start; }
@keyframes coSideFade { from { background: rgba(15,23,42,0); } to { background: rgba(15,23,42,0.45); } }
.co-side-panel {
  background: #fff; width: 460px; max-width: 92vw; height: 100%;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(100%); transition: transform 0.24s cubic-bezier(.22,.61,.36,1);
  box-shadow: -8px 0 32px rgba(15,23,42,0.18);
}
[dir="rtl"] .co-side-panel { transform: translateX(-100%); box-shadow: 8px 0 32px rgba(15,23,42,0.18); }
.co-side-panel.open { transform: translateX(0); }
.co-side-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; flex-shrink: 0;
}
.co-side-panel-close {
  background: rgba(255,255,255,0.22); color: #fff; border: 0;
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  font-size: 15px; font-weight: 900;
}
.co-side-panel-close:hover { background: rgba(255,255,255,0.35); }
.co-side-panel-body { flex: 1; overflow-y: auto; padding: 16px; background: #f8fafc; }
.co-side-section {
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 12px;
}
.co-side-section h4 {
  font-size: 12.5px; font-weight: 800; color: #475569;
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px dashed #e2e8f0;
}
.co-side-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: 12.5px; border-bottom: 1px dashed #f1f5f9;
}
.co-side-row:last-child { border-bottom: 0; }
.co-side-row > span { color: #64748b; font-weight: 600; }
.co-side-row > strong { color: #0f172a; }
.co-side-owner-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
}
.co-side-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.co-side-actions .btn { padding: 7px 10px; font-size: 11.5px; font-weight: 800; }

/* ⌨️ kbd badges */
kbd {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: #f1f5f9; border: 1.5px solid #cbd5e1; border-bottom-width: 2px;
  color: #475569; font-family: ui-monospace, monospace; font-size: 11px;
  font-weight: 800; box-shadow: 0 1px 0 #94a3b8;
}

/* ═══════════════════════════════════════════════════════════════════
   ⚡ Quick-Action Icons inside the Companies table row
   ═══════════════════════════════════════════════════════════════════ */
.col-quick { width: 78px; padding: 4px !important; text-align: center; }
.co-row-quick {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: 3px; padding: 3px;
  background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0;
}
.co-row-icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e2e8f0; cursor: pointer;
  font-size: 13.5px; transition: all 0.15s; padding: 0;
}
.co-row-icon:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(15,23,42,0.12); }
.co-row-pin { color: #92400e; }
.co-row-pin:hover, .co-row-pin.active {
  background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #fff; border-color: #d97706;
}
.co-row-pdf { color: #be185d; }
.co-row-pdf:hover { background: linear-gradient(135deg,#be185d,#ec4899); color: #fff; border-color: #9d174d; }
.co-row-preview { color: #1e40af; }
.co-row-preview:hover { background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff; border-color: #1e3a8a; }
.co-row-cmp { color: #475569; }
.co-row-cmp:hover, .co-row-cmp.active { background: linear-gradient(135deg,#475569,#64748b); color: #fff; border-color: #334155; }

/* ═══════════════════════════════════════════════════════════════════
   🔒 Side Panel — Audit lock banner + actions adapt when audited
   ═══════════════════════════════════════════════════════════════════ */
.co-side-audit-banner {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg,#fef3c7,#fde68a);
  color: #92400e; border: 1.5px solid #f59e0b;
  border-radius: 12px; padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(245,158,11,0.15);
}
.co-side-actions.audited {
  grid-template-columns: 1fr 1fr 1fr; /* 3 cols since Edit is gone */
}

/* ═══════════════════════════════════════════════════════════════════
   📊 COMPACT TABLE LAYOUT — Merged columns, screen-optimized
   ═══════════════════════════════════════════════════════════════════ */
.co-tbl-compact .data-table {
  table-layout: auto;
  width: 100%;
  font-size: 12.5px;
}
.co-tbl-compact .data-table th {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
  padding: 8px 6px;
  vertical-align: middle;
}
.co-tbl-compact .data-table td {
  padding: 7px 6px;
  vertical-align: middle;
}
.co-tbl-compact .th-sub {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(0,0,0,0.5);
  margin-inline-start: 2px;
  letter-spacing: 0;
}
.co-tbl-compact thead .th-sub { color: rgba(255,255,255,0.7); }

/* Column widths */
.co-tbl-compact .col-num     { width: 40px; text-align: center; font-weight: 700; color: #475569; }
.co-tbl-compact .col-code    { width: 90px; text-align: center; }
.co-tbl-compact .col-company { min-width: 220px; }
.co-tbl-compact .col-ids     { width: 180px; }
.co-tbl-compact .col-license { width: 130px; text-align: center; }
.co-tbl-compact .col-indic   { width: 150px; text-align: center; }
.co-tbl-compact .col-audit   { width: 50px; text-align: center; }
.co-tbl-compact .col-health  { width: 56px; text-align: center; padding: 4px !important; }
.co-tbl-compact .col-quick   { width: 78px; text-align: center; padding: 4px !important; }
.co-tbl-compact .col-acts    { width: auto; text-align: center; }

/* Code badge */
.co-code-badge {
  display: inline-block;
  background: #dbeafe; color: #1e40af;
  font-family: ui-monospace, monospace;
  font-weight: 800; font-size: 11px;
  padding: 3px 8px; border-radius: 6px;
  letter-spacing: 0.5px;
}

/* Company name cell - stacked layout */
.co-name-cell-text { min-width: 0; flex: 1; line-height: 1.25; }
.co-tbl-name { font-size: 13px; color: #0f172a; display: block; }
.co-tbl-meta {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 3px; align-items: center;
}

/* Mini pills */
.pill.pill-mini {
  font-size:10.5px !important;
  padding: 2px 6px !important;
  font-weight: 700;
  border-radius: 5px !important;
  line-height: 1.3;
}
.co-pill-btn {
  cursor: pointer; border: 0; font-family: inherit;
  transition: transform 0.15s;
}
.co-pill-btn:hover { transform: scale(1.05); }

/* Stacked IDs cell */
.co-ids-stack {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; line-height: 1.45;
}
.co-ids-stack > div {
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.co-id-lbl {
  display: inline-block; width: 16px; text-align: center;
  font-size:10.5px; opacity: 0.7;
}
.co-ids-stack .mono { font-weight: 700; color: #1e293b; }
.co-id-empty { color: #cbd5e1; font-weight: 600; text-align: center; }

/* License stack */
.co-lic-stack {
  display: flex; flex-direction: column; gap: 3px;
  align-items: center; line-height: 1.3;
}
.co-lic-founded {
  font-size: 10.5px; color: #64748b; font-weight: 700;
}

/* Indicators grid */
.co-indic-grid {
  display: inline-flex; gap: 4px; flex-wrap: wrap;
  justify-content: center; align-items: center;
}

/* Pin marker in row number */
.co-pin-mark {
  font-size: 12px; margin-inline-end: 2px;
  filter: drop-shadow(0 1px 1px rgba(245,158,11,0.4));
}

/* Avatar smaller in compact table */
.co-tbl-compact .co-name-avatar {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 8px; font-size: 14px;
}
.co-tbl-compact .co-name-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 2px; background: #fff; }

/* Reduce action button spacing in compact tables */
.co-tbl-compact .co-row-quick {
  padding: 3px; gap: 3px;
}
.co-tbl-compact .co-row-icon {
  width: 28px; height: 26px; font-size: 12.5px;
}
/* For tabs that have only 2 icons, keep them on a single row for a more natural look */
.co-tbl-compact .col-quick:has(.co-row-quick .co-row-icon:nth-child(2):last-child) .co-row-quick {
  grid-template-columns: 1fr 1fr;
}

/* Responsive: tighter padding on smaller screens */
@media (max-width: 1280px) {
  .co-tbl-compact .data-table th,
  .co-tbl-compact .data-table td { padding: 6px 4px; }
  .co-tbl-compact .col-indic { width: 110px; }
  .co-tbl-compact .col-ids { width: 150px; }
  .co-tbl-compact .col-quick { width: 68px; }
  .co-tbl-compact .co-row-icon { width: 26px; height: 24px; font-size: 11.5px; }
  .co-tbl-compact .pill.pill-mini { font-size: 10.5px !important; padding: 1px 5px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   📦 GENERAL DEFINITIONS — Smart Dashboard, Universal Search, Recent, FAB
   ═══════════════════════════════════════════════════════════════════ */

/* 🔍 Universal Search */
.gd-uni-search-wrap { margin: 12px 0; }
.gd-uni-search {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 2px solid #c4b5fd; border-radius: 12px;
  padding: 8px 14px; box-shadow: 0 2px 8px rgba(124,58,237,0.08);
  transition: border-color 0.15s;
}
.gd-uni-search:focus-within { border-color: #7c3aed; box-shadow: 0 4px 14px rgba(124,58,237,0.15); }
.gd-uni-search-icon { font-size: 18px; color: #7c3aed; }
.gd-uni-search input {
  flex: 1; border: 0; outline: 0; font-size: 14px;
  background: transparent; color: #0f172a; font-weight: 600;
}
.gd-uni-search input::placeholder { color: #94a3b8; font-weight: 500; }
.gd-uni-search-clear, .gd-uni-search-help {
  border: 0; background: #f1f5f9; color: #475569; cursor: pointer;
  padding: 4px 10px; border-radius: 6px; font-weight: 800; font-size: 12px;
}
.gd-uni-search-clear:hover { background: #fee2e2; color: #dc2626; }
.gd-uni-search-help:hover { background: #ede9fe; color: #7c3aed; }
.gd-uni-results {
  margin-top: 10px; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; padding: 14px; max-height: 460px; overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.gd-uni-results-empty {
  display: flex; align-items: center; gap: 10px; padding: 18px;
  color: #94a3b8; font-weight: 600; font-size: 13px;
  background: #f8fafc; border-radius: 10px;
}
.gd-uni-results-hdr {
  font-size: 12.5px; color: #475569; padding-bottom: 8px;
  margin-bottom: 8px; border-bottom: 1px solid #e2e8f0;
}
.gd-uni-group { margin: 8px 0; padding-inline-start: 8px; }
.gd-uni-group-hdr {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; color: #1e293b;
  padding: 4px 0;
}
.gd-uni-group-count {
  background: #1e293b; color: #fff; padding: 1px 7px;
  border-radius: 999px; font-size:10.5px; font-weight: 800;
  margin-inline-start: auto;
}
.gd-uni-group-items { display: flex; flex-direction: column; gap: 2px; padding-inline-start: 12px; }
.gd-uni-item {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #f1f5f9;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12px; transition: all 0.12s;
}
.gd-uni-item:hover { background: #eff6ff; border-color: #93c5fd; transform: translateX(-2px); }
[dir="ltr"] .gd-uni-item:hover { transform: translateX(2px); }
.gd-uni-item mark { background: #fef08a; color: #713f12; font-weight: 800; padding: 0 2px; border-radius: 3px; }

/* 🩺 Smart Dashboard */
.gd-smart-dashboard {
  margin: 12px 0; padding: 14px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-radius: 14px; border: 1.5px solid #e2e8f0;
}
.gd-macro-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.gd-macro-card {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1.5px solid #e2e8f0;
  border-radius: 12px; padding: 12px 14px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.gd-macro-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.gd-macro-primary { background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-color: #c7d2fe; }
.gd-macro-primary .gd-macro-num { color: #4338ca; }
.gd-macro-warn { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #fcd34d; }
.gd-macro-warn .gd-macro-num { color: #b45309; }
.gd-macro-danger { background: linear-gradient(135deg, #fee2e2, #fecaca); border-color: #fca5a5; }
.gd-macro-danger .gd-macro-num { color: #b91c1c; }
.gd-macro-icon { font-size: 36px; flex-shrink: 0; }
.gd-macro-num { font-size: 28px; font-weight: 900; line-height: 1; color: #0f172a; }
.gd-macro-lbl { font-size: 12.5px; font-weight: 800; color: #475569; margin-top: 3px; }
.gd-macro-sub { font-size: 10.5px; color: #94a3b8; margin-top: 2px; }

.gd-dash-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 900px) { .gd-dash-row { grid-template-columns: 1fr; } }
.gd-dash-panel {
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
  overflow: hidden;
}
.gd-dash-head {
  padding: 10px 14px; background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid #e2e8f0;
}
.gd-dash-head h4 { margin: 0; font-size: 13px; font-weight: 800; color: #0f172a; }
.gd-dash-body { padding: 14px; }
.gd-dash-legend {
  display: flex; align-items: center; gap: 6px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
  font-size: 11px; transition: all 0.12s; color: #334155;
}
.gd-dash-legend:hover { background: #fff; border-color: #94a3b8; transform: translateY(-1px); }
.gd-dash-legend-num {
  background: #1e293b; color: #fff; padding: 1px 6px;
  border-radius: 999px; font-size:10.5px; font-weight: 800;
}
.gd-top-used-row {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #f1f5f9;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  margin-bottom: 4px; transition: all 0.12s; width: 100%;
}
.gd-top-used-row:hover { background: #fff7ed; border-color: #fdba74; transform: translateX(-2px); }
[dir="ltr"] .gd-top-used-row:hover { transform: translateX(2px); }
.gd-top-rank {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; flex-shrink: 0;
}

/* 🕘 Recently Modified Strip */
.gd-recent-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px;
  background: linear-gradient(90deg, #f8fafc, #fff, #f8fafc);
  border: 1.5px solid #e2e8f0; border-radius: 10px;
  margin: 10px 0;
}
.gd-recent-strip-lbl {
  font-size: 11.5px; font-weight: 800; color: #475569;
  padding: 2px 10px; background: #f1f5f9; border-radius: 999px;
}
.gd-recent-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: #fff; border: 1.5px solid #cbd5e1; color: #1e293b;
  /* 👁️ v0.37.9.661 — read-only indicator: no pointer, no hover lift, not
     selectable. It reports what changed recently; it is not a control. */
  cursor: default; font-weight: 700; font-size: 11.5px; user-select: none;
}
.gd-recent-icon { font-size: 14px; }
.gd-recent-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-recent-time {
  background: #f1f5f9; color: #475569; padding: 1px 6px;
  border-radius: 6px; font-size:10.5px; font-weight: 800;
  font-family: ui-monospace, monospace;
}

/* 🏷️ Smart Status Pills */
.gd-status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800; padding: 2px 8px;
  border-radius: 999px; border: 1px solid;
}
.gd-status-new { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }
.gd-status-active { background: #ecfdf5; color: #065f46; border-color: #6ee7b7; }
.gd-status-hot { background: linear-gradient(135deg,#fef3c7,#fde68a); color: #92400e; border-color: #f59e0b; }
.gd-status-dormant { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.gd-status-orphan { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }
.gd-status-protected { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }

/* 📊 Usage badge */
.gd-use-badge {
  display: inline-block; min-width: 22px; text-align: center;
  font-size: 10.5px; font-weight: 800; padding: 1px 7px;
  border-radius: 999px; font-family: ui-monospace, monospace;
}
.gd-use-zero { background: #fef2f2; color: #b91c1c; border: 1px dashed #fca5a5; }
.gd-use-light { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.gd-use-warm { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.gd-use-hot { background: linear-gradient(135deg,#ea580c,#f97316); color: #fff; border: 1px solid #c2410c; }

/* ⚡ Quick Add FAB */
.gd-fab {
  position: fixed; bottom: 28px; inset-inline-end: 28px; z-index: 800;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff; border: 0; cursor: pointer;
  box-shadow: 0 6px 20px rgba(124,58,237,0.4);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; transition: transform 0.2s, box-shadow 0.2s;
}
.gd-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 28px rgba(124,58,237,0.5); }
.gd-fab:active { transform: translateY(0) scale(0.95); }

/* ═══════════════════════════════════════════════════════════════════
   📦 GD — Row meta (status + usage), Audit toggle, Bulk bar, Templates
   ═══════════════════════════════════════════════════════════════════ */

/* Row meta — injected by post-render enhancement */
.gd-row-meta {
  display: inline-flex; gap: 4px; align-items: center;
  margin-inline-start: 6px; vertical-align: middle;
}

/* 🔒 Per-row audit toggle button (injected post-render) */
.gd-audit-toggle-btn {
  background: #f8fafc; border: 1.5px solid #e2e8f0;
  width: 28px; height: 28px; border-radius: 7px;
  cursor: pointer; font-size: 12px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  margin-inline-end: 4px; transition: all 0.15s;
}
.gd-audit-toggle-btn:hover { background: #fff; border-color: #94a3b8; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.gd-audit-toggle-btn.is-audited {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #f59e0b; color: #92400e;
}

/* Audited rows in general_defs context */
.gd-tab-content tbody tr.audited,
#gdTabContent tbody tr.audited {
  background: linear-gradient(to right, #fffbeb 0%, #fff 30%) !important;
}
[dir="ltr"] #gdTabContent tbody tr.audited {
  background: linear-gradient(to left, #fffbeb 0%, #fff 30%) !important;
}
#gdTabContent tbody tr.audited > td:first-child {
  border-inline-start: 3px solid #f59e0b;
}

/* 🗂️ Bulk Operations Bar */
.gd-bulk-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  padding: 10px 16px; border-radius: 12px; color: #fff;
  margin: 10px 0;
  box-shadow: 0 4px 12px rgba(124,58,237,0.25);
  animation: gdBulkIn 0.25s ease-out;
}
@keyframes gdBulkIn { from { transform: translateY(-6px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.gd-bulk-count {
  background: rgba(255,255,255,0.28); color: #fff;
  font-weight: 900; padding: 2px 12px;
  border-radius: 999px; min-width: 28px; text-align: center;
}
.gd-bulk-bar .btn { font-size: 11.5px; font-weight: 800; padding: 5px 12px; }
.gd-bulk-bar .btn:hover { transform: translateY(-1px); }

/* 📋 Templates modal rows */
.gd-tmpl-row {
  display: flex; align-items: center; gap: 10px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 10px 14px; cursor: pointer;
  transition: all 0.15s;
}
.gd-tmpl-row:hover { background: #ede9fe; border-color: #c4b5fd; }
.gd-tmpl-row input { accent-color: #7c3aed; transform: scale(1.2); }

/* Highlight audited items in dependency inspector */
.gd-uni-results tr[data-audited="true"] { background: #fffbeb; }

/* ═══════════════════════════════════════════════════════════════════
   🚀 GD — Tab Workspace (filters + stats + chips + insights)
   ═══════════════════════════════════════════════════════════════════ */
.gd-workspace {
  margin: 12px 0; padding: 14px;
  background: linear-gradient(135deg, #f8fafc, #fff);
  border: 1.5px solid #e2e8f0; border-radius: 12px;
}
.gd-ws-filter-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.gd-ws-icon { font-size: 18px; color: #0d9488; }
.gd-ws-search {
  flex: 1; min-width: 200px;
  padding: 7px 12px; border: 1.5px solid #cbd5e1;
  border-radius: 8px; font-size: 13px; outline: none;
}
.gd-ws-search:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,0.12); }
.gd-ws-select, .gd-ws-input {
  padding: 6px 10px; border: 1.5px solid #cbd5e1;
  border-radius: 8px; font-size: 12px; background: #fff;
  color: #1e293b; font-weight: 600;
}
.gd-ws-select:focus, .gd-ws-input:focus { border-color: #0d9488; outline: none; }
.gd-ws-undo, .gd-ws-clear {
  padding: 6px 10px; border: 1.5px solid #cbd5e1;
  border-radius: 8px; background: #fff; font-size: 12px;
  font-weight: 800; cursor: pointer; color: #475569;
}
.gd-ws-undo:hover { background: #eff6ff; border-color: #3b82f6; color: #1e40af; }
.gd-ws-clear:hover:not(:disabled) { background: #fee2e2; border-color: #f87171; color: #dc2626; }
.gd-ws-clear:disabled { opacity: 0.4; cursor: not-allowed; }

/* Presets dropdown */
.gd-ws-preset-wrap { position: relative; }
.gd-ws-preset-btn {
  padding: 6px 12px; border: 1.5px solid #c4b5fd;
  border-radius: 8px; background: #ede9fe; color: #5b21b6;
  font-size: 12px; font-weight: 800; cursor: pointer;
}
.gd-ws-preset-btn:hover { background: #ddd6fe; }
.gd-ws-preset-dropdown {
  position: absolute; top: calc(100% + 4px); inset-inline-end: 0;
  min-width: 240px; max-width: 320px; background: #fff;
  border: 1.5px solid #c4b5fd; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 100; padding: 4px;
}
.gd-ws-preset-item {
  display: flex; align-items: center; gap: 4px; padding: 2px;
}
.gd-ws-preset-use {
  flex: 1; padding: 6px 10px; background: #f8fafc;
  border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; font-size: 12px; font-weight: 700;
  color: #5b21b6; text-align: start;
}
.gd-ws-preset-use:hover { background: #ede9fe; }
.gd-ws-preset-del {
  width: 24px; height: 24px; padding: 0; border-radius: 6px;
  background: transparent; border: 0; cursor: pointer;
  color: #94a3b8; font-weight: 800; font-size: 11px;
}
.gd-ws-preset-del:hover { background: #fee2e2; color: #dc2626; }

/* Active filter chips */
.gd-ws-chips {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
}
.gd-ws-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 4px 3px 10px; background: #ecfdf5;
  border: 1.5px solid #6ee7b7; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #065f46; cursor: pointer;
}
[dir="rtl"] .gd-ws-chip { padding: 3px 10px 3px 4px; }
.gd-ws-chip:hover { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.gd-ws-chip-x {
  display: inline-flex; width: 18px; height: 18px;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.08); border-radius: 999px;
  font-size:10.5px;
}

/* Live stats row */
.gd-ws-stats-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
}
.gd-ws-stat {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid #e2e8f0;
  padding: 8px 12px; border-radius: 10px;
  flex: 1; min-width: 130px; max-width: 200px;
  position: relative;
}
.gd-ws-stat-ic { font-size: 22px; flex-shrink: 0; }
.gd-ws-stat-num { font-size: 20px; font-weight: 900; line-height: 1; color: #0f172a; }
.gd-ws-stat-lbl { font-size: 10.5px; font-weight: 700; color: #64748b; margin-top: 2px; }
.gd-ws-stat-primary { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #93c5fd; }
.gd-ws-stat-primary .gd-ws-stat-num { color: #1e40af; }
.gd-ws-stat-success { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: #6ee7b7; }
.gd-ws-stat-success .gd-ws-stat-num { color: #065f46; }
.gd-ws-stat-warning { background: linear-gradient(135deg, #fef2f2, #fecaca); border-color: #fca5a5; }
.gd-ws-stat-warning .gd-ws-stat-num { color: #b91c1c; }
.gd-ws-stat-amber { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #fcd34d; }
.gd-ws-stat-amber .gd-ws-stat-num { color: #92400e; }
.gd-ws-stat-cyan { background: linear-gradient(135deg, #ecfeff, #cffafe); border-color: #67e8f9; }
.gd-ws-stat-cyan .gd-ws-stat-num { color: #0e7490; }
.gd-ws-stat-info { background: #f0f9ff; border-color: #7dd3fc; }
/* 🩶 v0.37.9.706 — «بلا استخدام بعد»: قبل أول معاملة كل تعريف بلا مراجع، وإنذار
   أحمر دائم طوال مرحلة التأسيس يُعلِّم المستخدم تجاهل البطاقة. حالة محايدة. */
.gd-ws-stat-muted { background: linear-gradient(135deg, #f8fafc, #f1f5f9); border-color: #cbd5e1; }
.gd-ws-stat-muted .gd-ws-stat-num { color: #64748b; }
.gd-ws-stat-violet { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border-color: #c4b5fd; }
.gd-ws-stat-violet .gd-ws-stat-num { color: #5b21b6; }
.gd-ws-stat-indigo { background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-color: #a5b4fc; }
.gd-ws-stat-custom { background: linear-gradient(135deg, #fdf4ff, #fae8ff); border-color: #e9d5ff; }
.gd-ws-stat-custom .gd-ws-stat-num { color: #86198f; }
.gd-ws-stat-del {
  position: absolute; top: 2px; inset-inline-end: 2px;
  width: 18px; height: 18px; padding: 0; border: 0;
  background: rgba(0,0,0,0.05); border-radius: 4px;
  font-size:10.5px; cursor: pointer; color: #94a3b8;
}
.gd-ws-stat-del:hover { background: #fee2e2; color: #dc2626; }
.gd-ws-stat-add {
  width: 40px; min-width: 40px; height: auto; padding: 8px;
  border: 2px dashed #cbd5e1; background: #f8fafc;
  border-radius: 10px; cursor: pointer;
  font-size: 22px; color: #64748b; font-weight: 800;
}
.gd-ws-stat-add:hover { background: #ede9fe; border-color: #a78bfa; color: #5b21b6; }

/* Smart Insights */
.gd-ws-insights {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 14px;
  background: linear-gradient(135deg, #ecfeff, #cffafe);
  border: 1.5px solid #67e8f9; border-radius: 10px;
}
.gd-ws-insight {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; padding: 4px 10px;
  border-radius: 999px; font-size: 11.5px; color: #0e7490;
  border: 1px solid #a5f3fc;
}
.gd-ws-insight strong { color: #155e75; }

/* ═══════════════════════════════════════════════════════════════════
   👥 EMPLOYEES — Pulse, Org Tree, Health Badge, Side Panel, Radar, etc.
   ═══════════════════════════════════════════════════════════════════ */

/* 🩺 Health badge in table */
.emp-health-badge {
  background: none; border: 2px solid; border-radius: 50%;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
.emp-health-badge:hover { transform: scale(1.12); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.emp-risk-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; }

/* 📊 Workforce Pulse */
.emp-pulse { margin: 12px 0; padding: 14px; background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1.5px solid #fcd34d; border-radius: 14px; }
.emp-pulse-macros { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.emp-pulse-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; }
.emp-pulse-ic { font-size: 32px; }
.emp-pulse-num { font-size: 24px; font-weight: 900; line-height: 1; color: #0f172a; }
.emp-pulse-lbl { font-size: 12px; font-weight: 800; color: #475569; margin-top: 3px; }
.emp-pulse-sub { font-size: 10.5px; color: #94a3b8; margin-top: 2px; }
.emp-pulse-primary { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #f59e0b; }
.emp-pulse-primary .emp-pulse-num { color: #92400e; }
.emp-pulse-success { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: #6ee7b7; }
.emp-pulse-success .emp-pulse-num { color: #065f46; }
.emp-pulse-danger { background: linear-gradient(135deg, #fef2f2, #fecaca); border-color: #fca5a5; }
.emp-pulse-danger .emp-pulse-num { color: #b91c1c; }
.emp-pulse-violet { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border-color: #c4b5fd; }
.emp-pulse-violet .emp-pulse-num { color: #5b21b6; }
.emp-pulse-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.emp-pulse-panel { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; }
.emp-pulse-panel h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; color: #0f172a; }

/* 🌳 Org Tree */
.emp-org-tree { margin: 12px 0; padding: 14px; background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px; }
.emp-org-head { font-size: 14px; font-weight: 900; color: #0f172a; margin-bottom: 12px; }
.emp-org-co { background: #fff; border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; border-inline-start: 4px solid #d97706; }
.emp-org-co-head { font-size: 13px; font-weight: 800; color: #92400e; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.emp-org-dept { background: #fffbeb; border-radius: 8px; padding: 8px 12px; margin: 6px 0; border-inline-start: 3px solid #f59e0b; }
.emp-org-dept-head { font-size: 12px; font-weight: 800; color: #92400e; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.emp-org-count { background: #d97706; color: #fff; font-size:10.5px; padding: 1px 7px; border-radius: 999px; font-weight: 900; }
.emp-org-emps { display: flex; flex-wrap: wrap; gap: 4px; }
.emp-org-chip { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid #fcd34d; padding: 3px 8px 3px 3px; border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 700; color: #92400e; }
[dir="ltr"] .emp-org-chip { padding: 3px 3px 3px 8px; }
.emp-org-chip:hover { background: #fef3c7; }
.emp-org-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.emp-org-init { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #d97706, #f59e0b); color: #fff; display: flex; align-items: center; justify-content: center; font-size:10.5px; font-weight: 800; }

/* ⏰ Expiry Radar */
.emp-expiry-radar { margin: 10px 0; padding: 10px 14px; background: #fff; border: 1.5px solid #fca5a5; border-radius: 10px; }
.emp-expiry-radar > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 13px; }
.emp-expiry-radar > summary::-webkit-details-marker { display: none; }
.emp-radar-badge { background: linear-gradient(135deg, #dc2626, #f87171); color: #fff; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; }
.emp-radar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px; margin-top: 10px; }
.emp-radar-chip { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid; border-radius: 8px; padding: 6px 10px; cursor: pointer; transition: transform 0.12s; }
.emp-radar-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }

/* 🎂 Events Wall */
.emp-events-wall { margin: 10px 0; padding: 10px 14px; background: linear-gradient(135deg, #fef3c7, #fde68a); border: 1.5px solid #f59e0b; border-radius: 10px; }
.emp-events-head { font-weight: 900; font-size: 13px; color: #92400e; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.emp-events-row { display: flex; gap: 6px; flex-wrap: wrap; }
.emp-event-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: #fff; border: 1.5px solid; border-radius: 8px; cursor: pointer; transition: transform 0.12s; }
.emp-event-chip:hover { transform: translateY(-1px); }
.emp-event-birthday { border-color: #ec4899; color: #be185d; }
.emp-event-anniversary { border-color: #7c3aed; color: #5b21b6; }

/* 🕘 Recently Viewed */
.emp-recent-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; margin: 10px 0; }
.emp-recent-lbl { font-size: 11.5px; font-weight: 800; color: #475569; padding: 2px 10px; background: #f1f5f9; border-radius: 999px; }
.emp-recent-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: #fff; border: 1.5px solid #cbd5e1; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 11.5px; color: #1e293b; }
[dir="ltr"] .emp-recent-chip { padding: 4px 4px 4px 10px; }
.emp-recent-chip:hover { background: #fef3c7; border-color: #f59e0b; }
.emp-recent-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.emp-recent-init { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #d97706, #f59e0b); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; }
.emp-recent-clear { margin-inline-start: auto; border: 1.5px dashed #cbd5e1; background: transparent; padding: 2px 8px; border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 800; color: #94a3b8; }
.emp-recent-clear:hover { color: #dc2626; border-color: #fca5a5; }

/* 🗂️ Bulk Bar */
.emp-bulk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; background: linear-gradient(135deg, #d97706, #f59e0b); color: #fff; border-radius: 12px; margin: 10px 0; box-shadow: 0 4px 12px rgba(217,119,6,0.25); }
.emp-bulk-count { background: rgba(255,255,255,0.28); color: #fff; font-weight: 900; padding: 2px 12px; border-radius: 999px; }

/* 👁 Side Panel */
.emp-side-panel-bd { position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 1500; display: flex; justify-content: flex-end; }
[dir="rtl"] .emp-side-panel-bd { justify-content: flex-start; }
.emp-side-panel { width: 480px; max-width: 92vw; height: 100%; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s cubic-bezier(.22,.61,.36,1); box-shadow: -8px 0 32px rgba(0,0,0,0.2); }
[dir="rtl"] .emp-side-panel { transform: translateX(-100%); box-shadow: 8px 0 32px rgba(0,0,0,0.2); }
.emp-side-panel.open { transform: translateX(0); }
.emp-side-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.emp-side-close { background: rgba(255,255,255,0.25); color: #fff; border: 0; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-weight: 900; }
.emp-side-body { flex: 1; overflow-y: auto; padding: 14px; background: #f8fafc; }
.emp-side-section { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.emp-side-section h4 { font-size: 12.5px; font-weight: 800; color: #475569; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px dashed #e2e8f0; }
.emp-side-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 12.5px; border-bottom: 1px dashed #f1f5f9; }
.emp-side-row > span { color: #64748b; font-weight: 600; }
.emp-side-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.emp-side-actions .btn { padding: 7px 10px; font-size: 11.5px; font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════════
   👥 EMPLOYEES — In-row Health badge + Quick action icons
   (ideas 3, 4, 5 made visible inside every tab table)
   ═══════════════════════════════════════════════════════════════════ */
.emp-row-health { display: inline-block; vertical-align: middle; margin-inline-end: 6px; }
.emp-row-health .emp-health-badge { width: 32px; height: 32px; }
.emp-row-quick-cell { padding: 4px !important; text-align: center; width: 84px; }
.emp-row-quick {
  display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px;
  background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0;
}
.emp-row-icon {
  width: 28px; height: 26px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e2e8f0; cursor: pointer;
  font-size: 12.5px; padding: 0; transition: all 0.15s;
}
.emp-row-icon:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.1); }
.emp-row-pin { color: #92400e; }
.emp-row-pin:hover, .emp-row-pin.active {
  background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #fff; border-color: #d97706;
}
.emp-row-pdf { color: #be185d; }
.emp-row-pdf:hover { background: linear-gradient(135deg,#be185d,#ec4899); color: #fff; border-color: #9d174d; }
.emp-row-preview { color: #1e40af; }
.emp-row-preview:hover { background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff; border-color: #1e3a8a; }
.emp-row-cmp { color: #475569; }
.emp-row-cmp:hover, .emp-row-cmp.active { background: linear-gradient(135deg,#475569,#64748b); color: #fff; border-color: #334155; }

/* Pinned row highlight */
.emp-pinned-row { background: linear-gradient(to right, #fffbeb 0%, #fff 12%) !important; }
[dir="ltr"] .emp-pinned-row { background: linear-gradient(to left, #fffbeb 0%, #fff 12%) !important; }
.emp-pinned-row > td:first-child { border-inline-start: 3px solid #f59e0b; }

/* ═══════════════════════════════════════════════════════════════════
   👥 EMPLOYEES v2 — Bigger, brighter, more visible
   ═══════════════════════════════════════════════════════════════════ */

/* ✨ Feature hint banner — explains the new row icons */
.emp-features-hint {
  /* v833 — كان شريطاً كهرمانياً متوهّجاً بنبض دائم — صار هادئاً بالهوية */
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px; margin: 8px 0;
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border: 1.5px solid #a7f3d0; border-radius: 10px;
}
.emp-hint-lbl { font-weight: 900; color: #047857; font-size: 12.5px; }
.emp-hint-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; padding: 4px 10px; border-radius: 999px;
  font-weight: 900; font-size: 12px; border: 1.5px solid;
}
.emp-hint-health { color: #10b981; border-color: #10b981; }
.emp-hint-arrow { font-size: 16px; font-weight: 900; color: #047857; }
.emp-hint-txt { font-size: 12px; color: #475569; font-weight: 600; }

/* 🩺 Bigger Health badge in row — more prominent */
.emp-row-health { display: inline-block; vertical-align: middle; margin-inline-end: 8px; }
.emp-row-health .emp-health-badge {
  width: 40px; height: 40px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.emp-row-health .emp-health-badge:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  transform: scale(1.15);
}

/* Header for the injected Quick column */
.emp-row-quick-th {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #fff !important; font-size: 11px; font-weight: 800;
  text-align: center; width: 90px;
  letter-spacing: 0.5px;
}
.emp-row-quick-th span { font-size: 10.5px; opacity: 0.95; }

/* 👁 Quick Actions cell — bigger and more prominent */
.emp-row-quick-cell {
  padding: 6px !important; text-align: center; width: 90px;
  background: linear-gradient(135deg, #faf5ff, #fff);
}
.emp-row-quick {
  display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  background: #fff; border-radius: 8px; border: 1.5px solid #c4b5fd;
  box-shadow: 0 2px 4px rgba(124,58,237,0.08);
}
.emp-row-icon {
  width: 30px; height: 28px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid #e2e8f0; cursor: pointer;
  font-size: 13.5px; padding: 0; transition: all 0.15s; position: relative;
}
.emp-row-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.emp-row-pin { color: #92400e; background: #fffbeb; border-color: #fcd34d; }
.emp-row-pin:hover, .emp-row-pin.active {
  background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #fff; border-color: #d97706;
}
.emp-row-pdf { color: #be185d; background: #fdf2f8; border-color: #f9a8d4; }
.emp-row-pdf:hover { background: linear-gradient(135deg,#be185d,#ec4899); color: #fff; border-color: #9d174d; }
.emp-row-preview { color: #1e40af; background: #eff6ff; border-color: #93c5fd; }
.emp-row-preview:hover { background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff; border-color: #1e3a8a; }
.emp-row-cmp { color: #475569; background: #f8fafc; border-color: #cbd5e1; }
.emp-row-cmp:hover, .emp-row-cmp.active { background: linear-gradient(135deg,#475569,#64748b); color: #fff; border-color: #334155; }

/* Pinned row — clearer */
.emp-pinned-row {
  background: linear-gradient(to right, #fffbeb 0%, #fff 18%) !important;
  border-inline-start: 4px solid #f59e0b !important;
}

/* 🔒 Audit lock for employee rows */
.emp-tab-content tbody tr.audited {
  background: linear-gradient(to right, #fef3c7 0%, #fff 22%) !important;
  border-inline-start: 4px solid #d97706 !important;
}

/* Hero action buttons (Pulse, Org) — more visible */
.emp-hero-actions .btn-sm { font-weight: 900; padding: 6px 14px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.emp-hero-actions .btn-sm:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }

/* ═══════════════════════════════════════════════════════════════════
   👥 EMPLOYEES — Merged columns (Identity + Contact) — CENTERED
   Center-aligned content lets the column take the minimum width it
   needs, freeing horizontal space for a full-width screen layout.
   ═══════════════════════════════════════════════════════════════════ */
.emp-col-merged {
  padding: 6px 8px !important;
  vertical-align: middle;
  text-align: center;             /* ← center horizontally */
  white-space: nowrap;            /* prevent line-breaks → narrower column */
  width: 1%;                      /* let content dictate the width */
}
.emp-col-merged-th {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-bottom: 2px solid #f59e0b;
  color: #92400e;
  text-align: center;             /* ← header centered too */
  white-space: nowrap;
  width: 1%;
}
.emp-th-sub {
  font-size: 10.5px; font-weight: 600;
  color: rgba(146,64,14,0.7); display: block;
  margin-top: 2px; letter-spacing: 0;
}
.emp-merged-cell {
  display: inline-flex;            /* ← inline-flex so the cell shrinks */
  flex-direction: column;
  align-items: center;             /* ← center stacked lines */
  gap: 2px;
  line-height: 1.4;
}
.emp-merged-line {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: #0f172a;
  justify-content: center;
}
.emp-merged-type {
  background: #e0f2fe; color: #075985;
  padding: 1px 6px; border-radius: 4px;
  font-size:10.5px; font-weight: 700;
}
.emp-merged-mono {
  font-family: ui-monospace, monospace;
  font-size: 11.5px; color: #1e293b;
  font-weight: 700;
  text-align: center;
}
.emp-merged-small {
  font-size: 10.5px; color: #64748b;
  font-family: ui-monospace, monospace;
}
.emp-merged-email {
  font-size: 10.5px; color: #64748b;
  justify-content: center;
}
.emp-merged-empty {
  color: #cbd5e1; font-weight: 600; font-size: 12px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   🧑‍💼 CLIENTS PRO — Tab bar + Statement + Aging + Pulse + Side Panel
   ═══════════════════════════════════════════════════════════════════ */
.cli-pro-tabs { display: flex; gap: 6px; padding: 12px 14px; background: #f8fafc; border-bottom: 2px solid #e2e8f0; margin: 12px 0 0; border-radius: 12px 12px 0 0; flex-wrap: wrap; }
.cli-pro-tab { padding: 8px 14px; background: #fff; border: 1.5px solid #cbd5e1; border-radius: 8px; cursor: pointer; font-weight: 800; font-size: 12.5px; color: #475569; transition: all 0.15s; }
.cli-pro-tab:hover { border-color: #0369a1; color: #0369a1; transform: translateY(-1px); }
.cli-pro-tab.active { background: linear-gradient(135deg, #0369a1, #0ea5e9); color: #fff; border-color: #0369a1; box-shadow: 0 4px 10px rgba(3,105,161,0.25); }

/* Recent strip */
.cli-recent-strip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 14px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; margin: 8px 0; }
.cli-recent-lbl { font-size: 11px; font-weight: 800; color: #475569; background: #f1f5f9; padding: 2px 8px; border-radius: 999px; }
.cli-recent-chip { background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; padding: 3px 10px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 11.5px; }
.cli-recent-chip:hover { background: #dbeafe; }
.cli-recent-clear { margin-inline-start: auto; border: 1px dashed #cbd5e1; background: transparent; color: #94a3b8; cursor: pointer; padding: 2px 8px; border-radius: 999px; font-size: 11px; }

/* Health badge */
.cli-col-health { width: 50px; text-align: center; padding: 4px !important; }
.cli-health-badge { background: none; border: 2px solid; border-radius: 50%; width: 38px; height: 38px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.15s; }
.cli-health-badge:hover { transform: scale(1.12); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }

/* Quick column */
.cli-col-quick { width: 88px !important; padding: 4px !important; text-align: center; background: linear-gradient(135deg, #f0f9ff, #fff); }
.cli-row-quick { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: #fff; border: 1.5px solid #93c5fd; border-radius: 8px; }
.cli-row-icon { width: 28px; height: 26px; border-radius: 6px; background: #fff; border: 1px solid #e2e8f0; cursor: pointer; font-size: 13px; padding: 0; transition: all 0.15s; display: inline-flex; align-items: center; justify-content: center; }
.cli-row-icon:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.1); }
.cli-row-pin { color: #92400e; background: #fffbeb; border-color: #fcd34d; }
.cli-row-pin:hover, .cli-row-pin.active { background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #fff; border-color: #d97706; }
.cli-row-pdf { color: #0369a1; background: #eff6ff; border-color: #93c5fd; }
.cli-row-pdf:hover { background: linear-gradient(135deg,#0369a1,#0ea5e9); color: #fff; }
.cli-row-preview { color: #1e40af; background: #eff6ff; border-color: #93c5fd; }
.cli-row-preview:hover { background: linear-gradient(135deg,#1e40af,#3b82f6); color: #fff; }
.cli-row-cmp { color: #475569; background: #f8fafc; border-color: #cbd5e1; }
.cli-row-cmp:hover, .cli-row-cmp.active { background: linear-gradient(135deg,#475569,#64748b); color: #fff; }
.cli-pinned-row { background: linear-gradient(to right, #fffbeb 0%, #fff 12%) !important; border-inline-start: 4px solid #f59e0b !important; }

/* Statement view */
.cli-statement-wrap { padding: 14px; background: #fff; border-radius: 0 0 12px 12px; }
.cli-statement-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding-bottom: 12px; border-bottom: 1.5px solid #e2e8f0; margin-bottom: 12px; flex-wrap: wrap; }
.cli-statement-kpis { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 8px; margin-bottom: 14px; }
.cli-skpi { display: flex; align-items: center; gap: 10px; background: #f0f9ff; border: 1.5px solid #93c5fd; border-radius: 10px; padding: 10px 12px; }
.cli-skpi-ic { font-size: 28px; }
.cli-skpi-num { font-size: 18px; font-weight: 900; color: #0369a1; }
.cli-skpi-lbl { font-size: 11px; font-weight: 800; color: #475569; }
.cli-aging-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px; background: #f8fafc; border-radius: 8px; }
.cli-aging-cell { flex: 1; min-width: 90px; padding: 6px 10px; border: 1.5px solid; border-radius: 6px; text-align: center; background: #fff; }
.cli-statement-table tbody tr:hover { background: #f8fafc; }
.cli-statement-opening { background: #fef3c7 !important; }
.cli-statement-empty { text-align: center; padding: 30px 14px; background: #fff; border-radius: 0 0 12px 12px; }
.cli-selector-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 8px; margin-top: 20px; max-width: 900px; margin-inline: auto; }
.cli-selector-card { background: #fff; border: 1.5px solid #cbd5e1; padding: 12px; border-radius: 10px; cursor: pointer; text-align: start; transition: all 0.15s; }
.cli-selector-card:hover { border-color: #0369a1; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(3,105,161,0.15); }

/* Pulse */
.cli-pulse { padding: 14px; background: linear-gradient(135deg,#f0f9ff,#fff); border-radius: 0 0 12px 12px; }
.cli-pulse-macros { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 10px; margin-bottom: 14px; }
.cli-pulse-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; }
.cli-pulse-ic { font-size: 32px; }
.cli-pulse-num { font-size: 22px; font-weight: 900; color: #0f172a; }
.cli-pulse-lbl { font-size: 11.5px; font-weight: 800; color: #475569; }
.cli-pulse-primary { background: linear-gradient(135deg,#eff6ff,#dbeafe); border-color: #93c5fd; }
.cli-pulse-primary .cli-pulse-num { color: #1e40af; }
.cli-pulse-danger { background: linear-gradient(135deg,#fef2f2,#fecaca); border-color: #fca5a5; }
.cli-pulse-danger .cli-pulse-num { color: #b91c1c; }
.cli-pulse-amber { background: linear-gradient(135deg,#fef3c7,#fde68a); border-color: #fcd34d; }
.cli-pulse-amber .cli-pulse-num { color: #92400e; }
.cli-pulse-warning { background: linear-gradient(135deg,#fef2f2,#fecaca); border-color: #f87171; }
.cli-pulse-warning .cli-pulse-num { color: #dc2626; }
.cli-pulse-charts { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 10px; }
.cli-pulse-panel { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; }
.cli-pulse-panel h4 { margin: 0 0 8px; font-size: 13px; font-weight: 900; color: #0369a1; }
.cli-top-row { display: flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid #e2e8f0; padding: 6px 10px; border-radius: 6px; cursor: pointer; margin: 4px 0; transition: all 0.15s; width: 100%; }
.cli-top-row:hover { background: #eff6ff; border-color: #0369a1; }
.cli-top-rank { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg,#f59e0b,#fbbf24); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; }

/* 🆕 Clickable narrative in customer statement */
.cli-narr-link {
  background: none; border: 0; cursor: pointer; padding: 4px 8px;
  border-radius: 6px; transition: background 0.15s;
  text-align: inherit; font-family: inherit; font-size: inherit;
  color: inherit; line-height: 1.4; display: inline-flex; gap: 6px; align-items: center;
}
.cli-narr-link:hover { background: #f1f5f9; text-decoration: underline; }
.cli-narr-link:active { background: #e2e8f0; }

/* Aging tab */
.cli-aging-wrap { padding: 14px; background: #fff; border-radius: 0 0 12px 12px; }
.cli-link-name { background: none; border: 0; cursor: pointer; color: #0369a1; font-weight: 700; padding: 0; }
.cli-link-name:hover { text-decoration: underline; }

/* 🆕 WAVE 2 — Customer 360° View styles */
.cli-360-wrap { padding: 14px; background: #fff; border-radius: 0 0 12px 12px; }
.cli-360-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; border-radius: 12px; color: #fff;
  box-shadow: 0 6px 18px rgba(15,23,42,0.12);
}
.cli-360-kpis {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  margin-top: 12px; margin-bottom: 12px;
}
.cli-360-kpi {
  display: flex; align-items: center; gap: 10px;
  background: #f8fafc; border: 1.5px solid #e2e8f0;
  border-radius: 10px; padding: 10px 12px;
}
.cli-360-kpi-ic { font-size: 22px; }
.cli-360-kpi-num { font-size: 17px; font-weight: 900; color: #0f172a; line-height: 1.1; }
.cli-360-kpi-lbl { font-size: 10.5px; color: #64748b; font-weight: 700; }
.cli-360-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-top: 4px;
}
.cli-360-panel {
  background: #fff; border: 1.5px solid #e2e8f0;
  border-radius: 10px; padding: 12px 14px;
}
.cli-360-panel h4 {
  margin: 0 0 8px; font-size: 13px; font-weight: 900; color: #0369a1;
  padding-bottom: 4px; border-bottom: 1.5px solid #e0f2fe;
}
.cli-360-rows > div { font-size: 12.5px; padding: 4px 0; border-bottom: 1px dashed #e2e8f0; color: #334155; }
.cli-360-rows > div:last-child { border-bottom: 0; }
.cli-360-rows strong { color: #0f172a; min-width: 110px; display: inline-block; }
@media (max-width: 768px) {
  .cli-360-kpis { grid-template-columns: repeat(3, 1fr); }
  .cli-360-grid { grid-template-columns: 1fr; }
}
/* Reports wrap */
.cli-reports-wrap { padding: 14px; background: #fff; border-radius: 0 0 12px 12px; }

/* Side Panel */
.cli-side-bd { position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 1500; display: flex; justify-content: flex-end; }
[dir="rtl"] .cli-side-bd { justify-content: flex-start; }
.cli-side { width: 480px; max-width: 92vw; height: 100%; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s cubic-bezier(.22,.61,.36,1); box-shadow: -8px 0 32px rgba(0,0,0,0.2); }
[dir="rtl"] .cli-side { transform: translateX(-100%); box-shadow: 8px 0 32px rgba(0,0,0,0.2); }
.cli-side.open { transform: translateX(0); }
.cli-side-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: #fff; }
.cli-side-close { background: rgba(255,255,255,0.25); color: #fff; border: 0; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-weight: 900; }
.cli-side-body { flex: 1; overflow-y: auto; padding: 14px; background: #f8fafc; }
.cli-side-section { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.cli-side-section h4 { font-size: 12.5px; font-weight: 800; color: #475569; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px dashed #e2e8f0; }
.cli-side-stat { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: #f8fafc; border-radius: 6px; }
.cli-side-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cli-side-actions .btn { padding: 7px 10px; font-size: 11.5px; font-weight: 800; }

/* ═══════════════════════════════════════════════════════════════════════
   🎌 HOLIDAYS — Waves 1-4 (countdown banner + heatmap + toggle)
   ═══════════════════════════════════════════════════════════════════════ */
.h-countdown-banner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #a7f3d0 100%);
  border: 2px solid #10b981;
  border-radius: 14px;
  padding: 12px 18px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(4, 120, 87, 0.18);
  position: relative;
  overflow: hidden;
}
.h-countdown-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(255,255,255,0.4) 0, transparent 60%);
  pointer-events: none;
}
.h-cb-emoji { font-size: 42px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(4,120,87,0.3)); }
.h-cb-content { display: flex; flex-direction: column; }
.h-cb-label { font-size: 11px; font-weight: 700; color: #047857; text-transform: uppercase; letter-spacing: 1px; }
.h-cb-name { font-size: 18px; font-weight: 900; color: #014034; line-height: 1.2; }
.h-cb-date { font-size: 12px; color: #047857; margin-top: 2px; }
.h-cb-count { text-align: center; background: rgba(255,255,255,0.6); border-radius: 12px; padding: 6px 18px; border: 1.5px solid rgba(16,185,129,0.45); }
.h-cb-num { font-size: 32px; font-weight: 900; color: #014034; line-height: 1; }
.h-cb-unit { font-size: 11px; font-weight: 700; color: #047857; }
.h-cb-progress { width: 90px; height: 6px; background: rgba(255,255,255,0.6); border-radius: 999px; overflow: hidden; align-self: end; margin-bottom: 6px; }
.h-cb-bar { height: 100%; background: linear-gradient(90deg, #16a34a, #84cc16, #fbbf24, #f97316, #dc2626); border-radius: 999px; transition: width 0.4s ease; }

/* Calendar Hijri toggle button */
.h-cal-toggle-btn { transition: all 0.2s ease; }
.h-cal-toggle-btn:hover { transform: scale(1.05); }

/* Holiday bridge & weekend pill colors */
.h-month-holiday[data-bridge] { position: relative; }
.h-month-holiday[data-bridge]::after { content: '🌉'; position: absolute; top: 4px; inset-inline-end: 4px; font-size: 11px; opacity: 0.7; }

@media print {
  .h-countdown-banner { display: none; }
}

/* 💰 Cost cell — clickable button styling */
.h-cost-cell { transition: all 0.18s ease; }
.h-cost-cell:hover {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(245, 158, 11, 0.25);
}
.h-cost-cell:active { transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════
   🆕 v0.37.9.41 — UNIVERSAL JV NUMBER COLORS
   Debit = green · Credit = blue · Difference (Imbalance) = red.
   Apply via class on the <td>/<span>/<strong> that shows the amount.
   ═══════════════════════════════════════════════════════════════════════ */
.jv-debit  { color: #16a34a !important; font-weight: 700; }
.jv-credit { color: #1d4ed8 !important; font-weight: 700; }
.jv-diff   { color: #dc2626 !important; font-weight: 800; }
.jv-debit-bg  { background: #dcfce7 !important; color: #14532d !important; }
.jv-credit-bg { background: #dbeafe !important; color: #1e3a8a !important; }
.jv-diff-bg   { background: #fee2e2 !important; color: #7f1d1d !important; }

/* ═══════════════════════════════════════════════════════════════════════
   📑 v0.37.9.653 — Document Types tab: Emerald Ledger identity + the new
   filter bar and tree toolbar. Replaces the inline sky-blue styling so the
   tab reads as part of the same system as the establishment profile.
   ═══════════════════════════════════════════════════════════════════════ */
.gd-doc-filterbar { background: #fff; border: 1.5px solid #d7e6e0; border-radius: 10px; padding: 10px 12px;
  margin-bottom: 10px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.gd-doc-search { position: relative; flex: 1; min-width: 220px; }
.gd-doc-search input { width: 100%; padding: 8px 12px 8px 36px; border: 1.5px solid #cbd5e1;
  border-radius: 8px; font-size: 13px; font-family: inherit; }
.gd-doc-search input:focus { outline: 0; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.14); }
.gd-doc-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 14px; }
.gd-doc-filterbar select { padding: 8px 12px; border: 1.5px solid #cbd5e1; border-radius: 8px;
  font-size: 13px; font-family: inherit; background: #fff; cursor: pointer; max-width: 260px; }
.gd-doc-filterbar select:focus { outline: 0; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.14); }
.gd-doc-filterbar select:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed; }
.gd-doc-clear { border-color: #047857 !important; color: #047857 !important; }
.gd-doc-legacy-chip { font-size: 11px; color: #78350f; background: #fef3c7; padding: 4px 10px;
  border-radius: 8px; border: 1px solid #fde68a; font-weight: 700; }

.gd-doc-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 10px 14px !important; margin-bottom: 10px; background: #f7fbf9; border: 1px solid #d7e6e0; }
.gd-doc-toolbar .btn-outline { border-color: #a7f3d0; color: #047857; font-weight: 700; }
.gd-doc-toolbar .btn-outline:hover { background: #ecfdf5; border-color: #10b981; }
.gd-doc-toolbar-sep { width: 1px; align-self: stretch; background: #d7e6e0; margin: 0 4px; }
.gd-doc-toolbar-count { font-size: 11.5px; font-weight: 700; color: #5c6f68; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   🎨 v0.37.9.654 — General Definitions: one Emerald Ledger identity.
   The screen carried a violet→indigo→blue outer hero and a violet active-tab
   indicator, both predating the identity. Same treatment the establishment
   profile got in v622 (.co-tab-btn.active). SEMANTIC colours are untouched:
   .btn-danger stays red, warnings amber, success green — meaning, not brand.
   ═══════════════════════════════════════════════════════════════════════ */
.gd-outer-hero { background: linear-gradient(135deg, #014034 0%, #025c48 50%, #047857 100%) !important;
  box-shadow: 0 8px 20px rgba(1,64,52,.22) !important; }
.gd-outer-btn-primary { color: #014034 !important; }
.gd-outer-btn-primary:hover { color: #013229 !important; }

/* Active tab: one emerald for every tab, whatever its data-color says */
.gd-flat-tab-btn.active,
.gd-flat-tab-btn.active[data-color] { color: #047857; border-bottom-color: #10b981;
  background: linear-gradient(180deg, transparent 70%, rgba(16,185,129,.08) 100%); }
.gd-flat-tab-btn.active .gd-flat-tab-count,
.gd-flat-tab-btn.active[data-color] .gd-flat-tab-count { background: #047857; color: #fff;
  box-shadow: 0 2px 4px rgba(4,120,87,.30); }

/* KPI strips: every per-tab palette name resolves to the same calm emerald
   card, so the strip reads as one system instead of six tinted variants. */
.gd-kpi-strip, .gd-kpi-strip.sky, .gd-kpi-strip.teal, .gd-kpi-strip.green,
.gd-kpi-strip.amber, .gd-kpi-strip.orange, .gd-kpi-strip.emerald,
.gd-kpi-strip.violet, .gd-kpi-strip.indigo, .gd-kpi-strip.rose, .gd-kpi-strip.lime,
.gd-kpi-strip.purple { background: linear-gradient(135deg, #f0fdf9, #fff); border-color: #a7f3d0; }
.gd-kpi-num { color: #014034; }

/* Toolbar utility buttons (Time Machine / What-if) — were a violet and a red
   gradient shouting louder than the data. Now quiet outline buttons. */
.gd-util-btn { border-color: #a7f3d0 !important; color: #047857 !important; font-weight: 700; }
.gd-util-btn:hover { background: #ecfdf5 !important; border-color: #10b981 !important; }
.gd-ws-chip-emerald { background: linear-gradient(135deg,#014034,#047857) !important; color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════════════
   🎯 v0.37.9.655 — KPI cards: a distinct shade per card from the identity
   family (deep teal → mint), so a card is recognised by BOTH its position and
   its colour — plus `.gd-kpi-attention`, which flips a card amber the moment
   its number needs acting on. Colour that means something, not decoration.
   ═══════════════════════════════════════════════════════════════════════ */
.gd-kpi { position: relative; overflow: hidden; transition: transform .12s, box-shadow .12s, border-color .12s; }
/* the shade rides on a top rail + the number + the icon tile, never a loud fill */
.gd-kpi[class*="gd-kpi-t"]::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; }
.gd-kpi-t1::before { background: #014034; } .gd-kpi-t1 .gd-kpi-num { color: #014034; } .gd-kpi-t1 .gd-kpi-ic { background: #e6f0ed; }
.gd-kpi-t2::before { background: #0f766e; } .gd-kpi-t2 .gd-kpi-num { color: #0f766e; } .gd-kpi-t2 .gd-kpi-ic { background: #e6f5f2; }
.gd-kpi-t3::before { background: #047857; } .gd-kpi-t3 .gd-kpi-num { color: #047857; } .gd-kpi-t3 .gd-kpi-ic { background: #e7f6f0; }
.gd-kpi-t4::before { background: #059669; } .gd-kpi-t4 .gd-kpi-num { color: #059669; } .gd-kpi-t4 .gd-kpi-ic { background: #e8f8f1; }
.gd-kpi-t5::before { background: #10b981; } .gd-kpi-t5 .gd-kpi-num { color: #059669; } .gd-kpi-t5 .gd-kpi-ic { background: #ecfdf5; }
.gd-kpi-t6::before { background: #14b8a6; } .gd-kpi-t6 .gd-kpi-num { color: #0f766e; } .gd-kpi-t6 .gd-kpi-ic { background: #effcfa; }
.gd-kpi[class*="gd-kpi-t"]:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(1,64,52,.10); }

/* ⚠️ needs attention — overrides the shade, whichever it was */
.gd-kpi.gd-kpi-attention { background: linear-gradient(135deg,#fffbeb,#fff) !important; border-color: #fcd34d !important; }
.gd-kpi.gd-kpi-attention::before { background: #f59e0b !important; }
.gd-kpi.gd-kpi-attention .gd-kpi-num { color: #b45309 !important; }
.gd-kpi.gd-kpi-attention .gd-kpi-ic { background: #fef3c7 !important; }
.gd-kpi.gd-kpi-attention .gd-kpi-lbl { color: #92400e; font-weight: 700; }

/* 🌳 tree toolbar — navigation vs. bulk state change must not look alike */
.gd-doc-nav { background: #fff; border: 1.5px solid #d7e6e0; color: #0f766e; font-weight: 700; }
.gd-doc-nav:hover { background: #f0fdfa; border-color: #14b8a6; }
.gd-doc-bulk-lbl { font-size: 11.5px; font-weight: 800; color: #5c6f68; white-space: nowrap; }
.gd-doc-lock { background: linear-gradient(135deg,#014034,#047857); color: #fff; border: 0; font-weight: 800;
  box-shadow: 0 2px 6px rgba(1,64,52,.22); }
.gd-doc-lock:hover { background: linear-gradient(135deg,#013229,#036548); color: #fff; }
.gd-doc-unlock { background: #fffbeb; border: 1.5px solid #fcd34d; color: #92400e; font-weight: 800; }
.gd-doc-unlock:hover { background: #fef3c7; border-color: #f59e0b; }

/* 🌳 v0.37.9.665 — asset-category caret. A leaf keeps the same slot (no glyph)
   so every name in the tree stays on one vertical line, exactly like the
   document tree's hidden-visibility spacer. */
.ac-caret { width: 18px; height: 18px; flex-shrink: 0; padding: 0; border: 0; background: none;
  color: #047857; font-size: 12px; line-height: 1; cursor: pointer; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s; }
.ac-caret:hover { background: #ecfdf5; }
.ac-caret-leaf { cursor: default; pointer-events: none; }
.ac-caret-leaf:hover { background: none; }

/* ═══════════════════════════════════════════════════════════════════════
   🗂️ v0.37.9.656 — General Definitions: ONE card system across all 13 tabs.
   ⛔ v0.37.9.659 — the inline tab-group labels that shipped here are REMOVED.
   This tab bar WRAPS onto several rows, so a label kept ending one row while
   its own tabs began the next, and the bar read as a scattered grid. Inline
   separators only work in a single-line/scrolling bar. The tabs stay ordered
   by theme; only the (harmless, useful) empty-tab dimming below survives.
   ═══════════════════════════════════════════════════════════════════════ */
/* empty tabs step back so the eye finds the ones holding data */
.gd-flat-tab-btn.is-empty { opacity: .55; }
.gd-flat-tab-btn.is-empty:hover { opacity: 1; }
.gd-flat-tab-count.is-zero { background: #f1f5f9 !important; color: #94a3b8 !important; box-shadow: none !important; }

/* the Linkage-Health meter, lifted out of the retired inline card builders */
.gd-health-bar { background: #fff; padding: 10px 14px; border-radius: 10px; border: 1.5px solid #e2e8f0;
  margin-bottom: 10px; }
.gd-health-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.gd-health-top strong { font-size: 14px; }
.gd-health-lbl { font-size: 11px; color: #5c6f68; font-weight: 700; }
.gd-health-track { height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.gd-health-fill { height: 100%; transition: width .3s; }

/* ═══════════════════════════════════════════════════════════════════════
   😀 v0.37.9.657 — Icon picker. The field used to be a bare text box with a
   written hint, which assumes the user knows an emoji and can type it. Now a
   curated grid sits beside the box — and the box stays, so ANY emoji can still
   be pasted, including ones the grid does not offer.
   ═══════════════════════════════════════════════════════════════════════ */
/* v0.37.9.658 — collapsed behind a ▾: the always-open grid was taking a third
   of the modal for something the user needs for two seconds. */
.gd-ico-wrap { position: relative; display: inline-block; }
.gd-ico-field { display: flex; align-items: stretch; gap: 0; }
.gd-ico-input { width: 62px; flex: 0 0 auto; text-align: center; font-size: 22px; line-height: 1;
  padding: 8px 4px; border: 1.5px solid #a7f3d0; border-radius: 10px 0 0 10px; background: #f0fdf9;
  border-inline-end: 0; }
html[dir="rtl"] .gd-ico-input { border-radius: 0 10px 10px 0; }
.gd-ico-input:focus { outline: 0; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.16); position: relative; z-index: 1; }
.gd-ico-caret { flex: 0 0 auto; width: 32px; border: 1.5px solid #a7f3d0; background: #ecfdf5;
  color: #047857; font-size: 13px; font-weight: 900; cursor: pointer; line-height: 1;
  border-radius: 0 10px 10px 0; transition: background .12s, border-color .12s; }
html[dir="rtl"] .gd-ico-caret { border-radius: 10px 0 0 10px; }
.gd-ico-caret:hover { background: #d1fae5; border-color: #10b981; }
.gd-ico-caret[aria-expanded="true"] { background: #047857; border-color: #047857; color: #fff; }

.gd-ico-pop { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 40;
  width: 290px; background: #fff; border: 1.5px solid #a7f3d0;
  border-radius: 10px; padding: 8px 10px; max-height: 230px; overflow-y: auto;
  box-shadow: 0 10px 28px rgba(1,64,52,.16); }
.gd-ico-pop[hidden] { display: none; }
.gd-ico-group + .gd-ico-group { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2e8f0; }
.gd-ico-group-lbl { font-size:10.5px; font-weight: 800; color: #94a3b8; letter-spacing: .3px;
  margin-bottom: 5px; text-transform: uppercase; }
.gd-ico-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; }
.gd-ico-btn { height: 34px; font-size: 18px; line-height: 1; display: grid; place-items: center;
  background: #fff; border: 1.5px solid transparent; border-radius: 8px; cursor: pointer;
  transition: background .1s, border-color .1s, transform .1s; padding: 0; }
.gd-ico-btn:hover { background: #ecfdf5; border-color: #a7f3d0; transform: translateY(-1px); }
.gd-ico-btn.is-on { background: #ecfdf5; border-color: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.18); }
.gd-ico-hint { font-size: 10.5px; color: #5c6f68; font-weight: 600; margin-top: 8px;
  padding-top: 6px; border-top: 1px dashed #e2e8f0; }

/* 🔒 v0.37.9.660 — a card's own second line. The audited count used to sit in a
   standalone card whose «20/22» the reader could not attribute to anything;
   it now states how many of THAT card's rows are locked. Deliberately quiet:
   the headline number stays the loudest thing on the card. */
.gd-kpi-sub { font-size: 10.5px; font-weight: 700; color: #7c8f88; margin-top: 3px;
  letter-spacing: .1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd-kpi.gd-kpi-attention .gd-kpi-sub { color: #a16207; }

/* ═══ v0.37.9.686 — Items & Services (الأصناف والخدمات) ═══════════════════
   Classes, not inline styles — the same rule the co2-* and gd-doc-* blocks
   follow. Emerald Ledger only; no new colour is introduced. */
.ii-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;
  font-size:11px;font-weight:800;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.ii-chip-sell{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.ii-chip-buy{background:#f0fdfa;color:#115e59;border:1px solid #99f6e4}
.ii-chip-stock{background:#f1f5f9;color:#334155;border:1px solid #cbd5e1}
.ii-badge{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11px;font-weight:900}
.ii-badge-stock{background:#014034;color:#fff}
.ii-badge-direct{background:#e2e8f0;color:#334155}
.ii-badge-exp{background:#fef3c7;color:#92400e}
.ii-lock{opacity:.5;cursor:default;user-select:none}
.ii-sec{margin:18px 0 10px;padding-bottom:6px;border-bottom:2px solid #ecfdf5}
.ii-sec:first-child{margin-top:0}
.ii-sec-h{font-weight:900;color:#047857;font-size:13.5px}
.ii-sec-s{font-size:11.5px;color:#64748b;margin-top:3px;line-height:1.6}
.ii-note{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:8px;padding:9px 12px;
  font-size:11.5px;color:#065f46;line-height:1.7;margin:4px 0 10px}
.ii-opt{flex:1 1 260px;display:flex;gap:9px;align-items:flex-start;padding:11px 13px;
  border:2px solid #e2e8f0;border-radius:10px;transition:border-color .15s,background .15s}
.ii-opt:has(input:checked){border-color:#10b981;background:#f0fdf4}
.ii-opt input{width:18px;height:18px;margin-top:2px;flex:none}

/* ═══ v0.37.9.687 — the definition code box: automatic, and the buyer owns it ═══
   The ↺ button hands the code back to the program; it only appears once the
   value differs from what the program would pick, so it never offers to undo
   something that has not been done. */
.gd-code-wrap{display:flex;gap:6px;align-items:stretch}
.gd-code-input{flex:1;font-family:monospace;font-weight:700;font-size:14px;
  letter-spacing:1px;text-align:center}
.gd-code-reset{flex:none;width:38px;border:1.5px solid #a7f3d0;background:#ecfdf5;
  color:#047857;border-radius:8px;font-size:16px;font-weight:900;cursor:pointer;
  line-height:1;transition:background .15s,border-color .15s}
.gd-code-reset:hover{background:#d1fae5;border-color:#10b981}

/* ═══ v0.37.9.689 — Items & Inventory: the three-tab host ═════════════════
   One sidebar entry replaced three screens. The bar is NAVIGATION, so it is
   quiet by design — the active tab is the only thing that speaks. */
.inv-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px;padding:6px;
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px}
.inv-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:0;
  border-radius:9px;background:transparent;color:#475569;font-weight:800;font-size:13px;
  font-family:inherit;cursor:pointer;transition:background .15s,color .15s}
.inv-tab:hover:not(:disabled){background:#eef2f7;color:#0f172a}
.inv-tab.is-on{background:linear-gradient(135deg,#014034,#047857);color:#fff;
  box-shadow:0 2px 8px rgba(1,64,52,.25)}
.inv-tab:disabled{opacity:.4;cursor:not-allowed}
.inv-tab-ico{font-size:15px;line-height:1}

/* v794 — سقطت كتلة v695: كانت تُبرز إحدى تسميتَي التبويب على الأخرى لأن
   الاثنتين كانتا مبثوثتَين معاً بالعربية والإنجليزية دائماً — وهو ما خالف
   عقد ثنائية اللغة. صار للتبويب **تسمية واحدة** من `data-i18n` تتبع اللغة،
   واتجاه حقلَي البريد وكلمة المرور مضبوط في كتلة «طيّة الدفتر». */


/* ═══════════════════════════════════════════════════════════════════════════
 * 🧭 v0.37.9.714 — القائمة العلوية (بديل القائمة الجانبية · طلب المالك)
 *
 * ⚠️ القائمة الجانبية **تُخفى ولا تُحذف**: بوابة الاشتراك (APP_CAN_ACCESS)
 *    ولوحة الأوامر ومراقب التحديث تقرأ من `#sidebarNav` مباشرةً.
 *
 * 🐛 v714 — الفراغ الجانبي: الشبكة هي `.app-shell` بمناطق **مسمّاة**
 *    ("sidebar header" / "sidebar main")، لا `.app-layout` (لا وجود لها).
 *    فإخفاء القائمة وحده يترك عمودها محجوزاً ٢٨٠px والمحتوى ينزلق خارجه.
 *    تُعاد تعريف الأعمدة **والمناطق** معاً — إحداهما بلا الأخرى لا تكفي.
 * ═══════════════════════════════════════════════════════════════════════════ */
body.topnav-mode #sidebar,
body.topnav-mode .sidebar,
body.topnav-mode #sidebarToggle,
body.topnav-mode .sb-pro-handle,
body.topnav-mode .sidebar-rail-btn { display: none !important; }

/* 📐 v0.37.9.722 — لماذا كانت الصفحة أعرض من الشاشة على زوم 100% (بلاغ المالك):
   عمود الشبكة `1fr` يعني ضمناً `minmax(auto, 1fr)` — أي أن **أدنى عرض للعمود هو
   أدنى محتوى بداخله**. فأي عنصر عريض في أي شاشة (جدول · شريط شهور · صفّ بطاقات)
   كان **يوسّع العمود نفسه** فتطفح الصفحة كلها أفقياً وتُقصّ البطاقات من الطرف.
   `minmax(0, 1fr)` يقطع هذا الانتشار من جذره: العمود = عرض الشاشة دائماً،
   والعنصر العريض يمرَّر داخل حاويته هو (سياسة v601) أو داخل main-content. */
body.topnav-mode .app-shell,
html[dir="ltr"] body.topnav-mode .app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "header" "main" !important;
}
body.topnav-mode .main-content {
  width: auto !important; margin-inline-start: 0 !important;
  min-width: 0; overflow-x: auto;   /* العريض يمرَّر هنا — الصفحة لا تتمدّد أبداً */
}

/* ── الشريط بهوية البرنامج ───────────────────────────────────────────────── */
body.topnav-mode .app-header {
  background: linear-gradient(135deg, #013229 0%, #014034 46%, #01543f 100%);
  border-bottom: 1px solid rgba(16, 185, 129, .42);
  box-shadow: 0 2px 18px rgba(1, 64, 52, .28);
  flex-wrap: nowrap; gap: 8px;
}
body.topnav-mode #pageTitle { display: none !important; }
body.topnav-mode .brand-mini-img { filter: brightness(0) invert(1); }
body.topnav-mode .brand-mini-title { color: #fff; }
body.topnav-mode .brand-mini-sub { color: #6ee7b7; }
body.topnav-mode .brand-mini { flex: 0 0 auto; padding-inline-end: 4px; }
/* أزرار الهيدر تُقرأ على الداكن */
body.topnav-mode .header-action-btn,
body.topnav-mode .icon-btn {
  background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.20); color: #f1f5f9;
}
body.topnav-mode .header-action-btn:hover,
body.topnav-mode .icon-btn:hover { background: rgba(255,255,255,.20); }
body.topnav-mode .user-company { color: #99f6e4 !important; }

/* ── شريط المجموعات ─────────────────────────────────────────────────────── */
.at-topnav { display: none; }
body.topnav-mode .at-topnav {
  display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: visible; scrollbar-width: none; padding: 0 4px;
}
body.topnav-mode .at-topnav::-webkit-scrollbar { display: none; }

.at-tn-btn {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 8px 12px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: rgba(255,255,255,.90); font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.at-tn-btn:hover { background: rgba(255,255,255,.13); border-color: rgba(110,231,183,.35); color: #fff; transform: translateY(-1px); }
.at-tn-btn:active { transform: translateY(0); }
.at-tn-btn.active {
  background: linear-gradient(135deg, #10b981, #047857); color: #fff;
  border-color: #6ee7b7; box-shadow: 0 3px 12px rgba(16,185,129,.38);
}
/* خطّ رفيع أسفل المجموعة النشطة — يربطها بمحتوى الشاشة */
/* v719 — كان bottom:-9px يقع **خارج** الهيدر فيقصّه overflow؛ وبعد إظهاره كان
   سيطفو فوق محتوى الشاشة. صار على حافة الهيدر نفسها فيُقرأ كلسانٍ للمجموعة. */
.at-tn-btn.active::after {
  content: ''; position: absolute; inset-inline: 22%; bottom: -6px; height: 3px;
  border-radius: 3px 3px 0 0; background: #6ee7b7;
}
.at-tn-btn .sb-ico, .at-tn-btn svg { width: 17px; height: 17px; flex: 0 0 auto; color: currentColor; }
.at-tn-caret { font-size: 10.5px; opacity: .75; margin-inline-start: 1px; transition: transform .18s ease; }
.at-tn-btn[aria-expanded="true"] { background: rgba(255,255,255,.16); color: #fff; }
.at-tn-btn[aria-expanded="true"] .at-tn-caret { transform: rotate(180deg); }
.at-tn-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px;
  height: 18px; padding: 0 5px; border-radius: 9px; background: #f43f5e; color: #fff;
  font-size:10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px rgba(1,64,52,.55);
}
.at-tn-btn.active .at-tn-badge { background: #fff; color: #047857; box-shadow: none; }

/* ── اللوحة المنسدلة — v0.37.9.727: بلا رأس مكرّر · سهم · دخول متدرّج ──
   (بلاغ المالك) اسم المجموعة كان يتكرّر داخل اللوحة وهو على زرّها فوقها؛ حُذف
   الرأس وحلّ محلّه سهم يربط اللوحة بزرّها، والعناصر تدخل متتاليةً (--i). */
@keyframes atTnIn { from { opacity: 0; transform: translateY(-9px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes atTnItemIn { from { opacity: 0; transform: translateX(var(--slide, 10px)); } to { opacity: 1; transform: none; } }
.at-tn-panel {
  position: fixed; z-index: 9000; min-width: 250px;
  /* v729 (طلب المالك): لا تمرير من فوق لتحت — اللوحة تتمدّد أعمدةً حتى تظهر
     كل شاشات المجموعة دفعة واحدة (top_nav.js يحسب الصفوف من ارتفاع الشاشة). */
  max-width: calc(100vw - 16px); overflow: visible;
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(240,253,244,.97));
  -webkit-backdrop-filter: blur(16px) saturate(1.6);   /* Safari (قاعدة دائمة) */
  backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(16,185,129,.30); border-top: 3px solid #10b981;
  border-radius: 14px;
  box-shadow: 0 24px 56px rgba(1,50,41,.28), 0 4px 12px rgba(1,50,41,.14);
  padding: 9px 7px 7px;
  animation: atTnIn .2s cubic-bezier(.34,1.4,.64,1);   /* نطّة خفيفة */
  transform-origin: top center;
}
.at-tn-panel.at-cols { display: grid; grid-auto-flow: column; column-gap: 8px; align-items: start; }
.at-tn-panel.at-cols .at-tn-item { min-width: 225px; }
/* السهم: مربّع مُدار على الحافة العلوية، يُحاذيه top_nav.js بمركز الزرّ */
.at-tn-arrow {
  position: absolute; top: -8px; width: 14px; height: 14px; margin-left: -7px;
  background: #10b981; transform: rotate(45deg); border-radius: 3px;
  box-shadow: -2px -2px 5px rgba(1,50,41,.10);
}
.at-tn-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 9px; color: #0f172a;
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background .14s ease, color .14s ease, padding-inline-start .14s ease, box-shadow .14s ease;
  animation: atTnItemIn .22s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 26ms);           /* تتالي الدخول */
}
html[dir="rtl"] .at-tn-item { --slide: -10px; }
.at-tn-item + .at-tn-item { margin-top: 1px; }
.at-tn-item:hover {
  background: #f0fdf4; color: #065f46; padding-inline-start: 16px;
  box-shadow: inset 0 0 0 1px rgba(16,185,129,.22);
}
.at-tn-item:hover::before {
  content: ''; position: absolute; inset-inline-start: 5px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 3px; background: #10b981;
}
.at-tn-item.on { background: linear-gradient(135deg, #014034, #047857); color: #fff; box-shadow: 0 3px 10px rgba(4,120,87,.30); }
.at-tn-item.on:hover { padding-inline-start: 11px; }
.at-tn-item.on:hover::before { display: none; }
.at-tn-item.on .sb-ico, .at-tn-item.on svg { color: #fff; }
.at-tn-item.on .at-tn-item-ic { background: rgba(255,255,255,.16); }
/* رقاقة الأيقونة — تمنح كل سطر مرساة بصرية */
.at-tn-item-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px;
  background: #ecfdf5; transition: background .14s ease, transform .14s ease;
}
.at-tn-item:hover .at-tn-item-ic { background: #d1fae5; transform: scale(1.06); }
.at-tn-item .sb-ico, .at-tn-item svg { width: 16px; height: 16px; flex: 0 0 auto; color: #047857; }
.at-tn-item-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-tn-item .at-tn-badge { box-shadow: none; }
/* من يفضّل تقليل الحركة يُحترم خياره */
@media (prefers-reduced-motion: reduce) {
  .at-tn-panel, .at-tn-item { animation: none; }
}

@media (max-width: 1180px) {
  body.topnav-mode .at-tn-btn { padding: 8px 9px; font-size: 13px; }   /* v724 — تكبير طلبه المالك */
  body.topnav-mode .brand-mini-text { display: none; }
}

/* ── v0.37.9.715 — الشريط يتّسع: اللوجو مضمون · الأدوات بصفّين · التباين ──
   بلاغ المالك: الشريط طفح فدفع اللوجو و«الرئيسية» خارج الشاشة، وبهتت ألوان
   اسم المستخدم واللغة على الأرضية الداكنة. ثلاث معالجات:
     ① **القائمة وحدها هي التي تتقلّص وتُمرَّر** — اللوجو وعنقود الأدوات
        `flex:0 0 auto` فلا ينضغطان ولا يُدفعان أبداً مهما كثرت المجموعات.
     ② عنقود الأدوات صفّان (جرس · تثبيت · لغة / التاريخ) بدل صفّ طويل.
     ③ كل نصّ في الشريط يُعاد تلوينه للأرضية الداكنة صراحةً — لا يُترك
        للون موروث من وضع الأرضية الفاتحة. */
/* 🚨 v0.37.9.719 — `overflow: hidden` كان هنا، وهو خطأ أدخلتُه في v715 لمنع طفح
   الشريط. لكن قائمتَي **الإشعارات والمستخدم** عنصران مُطلَقان **داخل** الهيدر،
   فصار يقصّهما إلى العدم: النقر على الجرس أو على صورتك لا يفتح شيئاً — فتضيع
   «الملف الشخصي» و«تغيير المنشأة» و«إضافة منشأة» والإشعارات كلها.
   القصّ محلّه **القائمة وحدها** (`.at-topnav` فيها `overflow-x: auto` أصلاً)،
   لا الهيدر الذي يحوي قوائم منسدلة يجب أن تتجاوز حدوده. */
body.topnav-mode .app-header {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 8px; padding-inline: 12px; overflow: visible;
}
body.topnav-mode .brand-mini { flex: 0 0 auto; order: -1; margin-inline-end: 2px; }
body.topnav-mode .brand-mini-img { height: 30px; width: auto; }
body.topnav-mode .header-actions { flex: 0 0 auto; gap: 6px; }
body.topnav-mode .at-topnav { flex: 1 1 0%; min-width: 0; }

/* عنقود الأدوات — صفّان مضغوطان */
.at-hdr-stack { display: none; }
body.topnav-mode .at-hdr-stack {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; flex: 0 0 auto;
}
body.topnav-mode .at-hdr-row { display: flex; align-items: center; gap: 4px; justify-content: center; }
body.topnav-mode .at-hdr-row .header-action-btn,
body.topnav-mode .at-hdr-row > button {
  padding: 4px 8px !important; font-size: 11.5px !important; border-radius: 7px !important;
  min-height: 26px; line-height: 1;
}
body.topnav-mode #hdrDatePill {
  background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.20) !important;
  color: #e2e8f0 !important; font-size: 10.5px !important; padding: 3px 8px !important;
  border-radius: 7px !important; justify-content: center; white-space: nowrap;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis;
}
body.topnav-mode #pwaInstallBtn,
body.topnav-mode #appLangToggle {
  background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.22) !important;
  color: #f1f5f9 !important;
}
body.topnav-mode #pwaInstallBtn:hover,
body.topnav-mode #appLangToggle:hover { background: rgba(255,255,255,.22) !important; }
body.topnav-mode #appLangLabel { color: #fff !important; }

/* ③ التباين — كل نصّ يُعلَن صراحةً على الأرضية الداكنة */
body.topnav-mode #userName { color: #ffffff !important; }
body.topnav-mode #userRole { color: #a7f3d0 !important; }
body.topnav-mode #acHeaderCompany,
body.topnav-mode #acHeaderCompanyName { color: #99f6e4 !important; }
body.topnav-mode .user-menu-btn { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); border-radius: 10px; }
body.topnav-mode .user-menu-btn:hover { background: rgba(255,255,255,.17); }
body.topnav-mode .user-avatar { border: 1.5px solid rgba(255,255,255,.45); }
body.topnav-mode #connStatusPill {
  background: rgba(16,185,129,.20) !important; border: 1px solid rgba(110,231,183,.45) !important;
  color: #d1fae5 !important; padding: 4px 9px !important; font-size: 11px !important;
}
/* v0.37.9.720 — الخروج بخلفية حمراء صريحة (طلب المالك): إجراء لا رجعة فيه،
   فيُقرأ من بعيد ولا يُخلَط بأزرار الشريط الأخرى. */
body.topnav-mode .hdr-logout-btn {
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  border: 1px solid #f87171 !important; color: #fff !important;
  font-weight: 800; box-shadow: 0 2px 8px rgba(220,38,38,.35);
}
body.topnav-mode .hdr-logout-btn:hover {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important; color: #fff !important;
}
/* القوائم المنسدلة للمستخدم/الإشعارات تبقى فاتحة — نصّها لا يرث الداكن */
body.topnav-mode .user-dropdown, body.topnav-mode .notif-dropdown { color: #0f172a; }

/* ➕ v0.37.9.715 — زرّ الإضافة السريعة يُزال من الشريط (طلب المالك: «لا نحتاجها»)،
   وهو أعرض عنصر بعد عنقود الأدوات. الإضافة تتمّ من زرّ «+ إضافة» داخل كل شاشة. */
body.topnav-mode #quickAddFabSlot,
body.topnav-mode #quickAddFabSlot > * { display: none !important; }

/* الأضيق: النصوص الثانوية تنسحب أولاً، والمجموعات تبقى */
@media (max-width: 1400px) {
  body.topnav-mode #userRole, body.topnav-mode #connStatusPill .hidden-mobile { display: none !important; }
  body.topnav-mode .hdr-logout-btn .hidden-mobile { display: none !important; }
}
@media (max-width: 1200px) {
  body.topnav-mode .brand-mini-text { display: none !important; }
  body.topnav-mode #acHeaderCompany { display: none !important; }
}

/* ── v0.37.9.716 — اللوجو يظهر · شارة الاتصال تُزال · الصفحة بعرضها الكامل ──
   🐛 **لماذا لم يظهر اللوجو:** ليس ضيقاً ولا ترتيباً — كان **مُخفى بقاعدة
      صريحة** منذ أن كانت القائمة الجانبية تحمله:
          @media (min-width: 1025px) { .brand-mini { display: none; } }
      و`flex: 0 0 auto` لا يتغلّب على `display: none` — خاصيّتان مختلفتان.
      وبزوال القائمة لم يبقَ للوجو موضع، فاختفى على كل شاشة سطح مكتب. */
body.topnav-mode .brand-mini { display: flex !important; }

/* ☁️ شارة «متصل بالسحابة» تتكرّر حرفياً في الشريط السفلي (طلب المالك) —
   ومعلومة واحدة في موضعين تشغل مساحة ولا تضيف يقيناً. */
body.topnav-mode #connStatusPill { display: none !important; }

/* 📐 الصفحة بعرضها الكامل: بزوال العمود الجانبي صار الحدّ 1400px يترك
   هامشين فارغين على الشاشات العريضة. الجداول والبيانات تأخذ المساحة كلها. */
body.topnav-mode .screen-container { max-width: none !important; }

/* ── v0.37.9.717 — تصفير عرض القائمة: العلاج في الجذر لا في كل مستهلك ──
   القائمة اختفت لكن `--sidebar-w` بقي **280px**، فكل ما يحجز مكانها يحجزه على
   فراغ. أوّل ضحاياه صينية المودالات المصغّرة (`#mwcTray`): تُزاح ٢٨٠px عن
   الحافة ويُقصّ عرضها الأقصى بنفس القدر — على مساحة لم يعد فيها شيء.
   ترقيع كل مستهلك على حدة يترك الباب مفتوحاً لمن يُكتب غداً؛ **المتغيّر نفسه
   يُصفَّر** فيصحّ الحاضر والمستقبل معاً.
   يُوضع على `body` لا `:root` عمداً: `responsive_pro.css` يُعيد تعريفه على
   `:root` داخل نقاط توقّف عدّة، و`body` أخصّ منه فيغلبها جميعاً.
   والقائمة نفسها `display:none` فلا يضرّها صفر العرض. */
body.topnav-mode { --sidebar-w: 0px; --sidebar-w-collapsed: 0px; }

/* ── v0.37.9.718 — التاريخ ينزل، والمجموعات تتّسع ──
   طلب المالك: التاريخ الميلادي إلى الشريط السفلي (حيث الهجري والوقت)، ومجموعة
   «التقارير والإعدادات» تظهر كاملة بتضييق ما بين المجموعات. */
body.topnav-mode #hdrDatePill { display: none !important; }

/* مسافات أضيق بين المجموعات — الحروف تبقى بحجمها، والحشو وحده يتقلّص */
body.topnav-mode .at-topnav { gap: 0; padding: 0 2px; }
body.topnav-mode .at-tn-btn { padding: 7px 8px; gap: 5px; }
/* v748 — بقيت للروابط داخل اللوحات إن ورثت الصنف؛ الشريط نفسه بلا أيقونات */
body.topnav-mode .at-tn-btn .sb-ico,
body.topnav-mode .at-tn-btn svg { width: 15px; height: 15px; }
body.topnav-mode .at-tn-caret { margin-inline-start: 0; }
/* المجموعة النشطة وحدها تحتفظ بحشوها فتبقى واضحة */
body.topnav-mode .at-tn-btn.active { padding: 7px 11px; }
body.topnav-mode .at-hdr-stack { gap: 2px; }
body.topnav-mode .header-actions { gap: 4px; }

/* ── 🚨 v0.37.9.719 — حجاب درج القائمة على الجوّال واللوحي ──
   responsive_pro.css يرسم `body:not(.sidebar-collapsed)::after` — ستارة سوداء
   ثابتة (٤٠–٥٠٪ + طمس) تغطّي كل شيء أسفل الهيدر بـz-index 65، وُجدت لتُظلم
   الشاشة خلف **درج القائمة المفتوح**. والدرج لم يعد موجوداً: فتحت ١٠٢٥px صار
   البرنامج مغطّى بستارة **لا شيء يفتحها ولا شيء يُغلقها**، وكل نقرة على أي
   جدول أو زرّ أو حقل تُبتلع. الشريط العلوي يعمل فوقها، فيبدو البرنامج حيّاً
   ومشلولاً معاً.
   `content: none` يُلغي العنصر الزائف من أصله لا يُخفيه فقط، والانتقاء
   `body.topnav-mode` أخصّ من `body` فيغلب القاعدتين في نقطتَي التوقّف معاً. */
body.topnav-mode:not(.sidebar-collapsed)::after,
body.topnav-mode::after { content: none !important; display: none !important; }

/* ── v0.37.9.722 — الخروج داخل قائمة المستخدم (طلب المالك) ──
   top_nav.js ينقل الزرّ نفسه (appendChild يحفظ مستمعه في header_topbar.js)
   إلى ذيل القائمة المنسدلة، فيتحرّر عرضه من الشريط ويبقى أحمر مميّزاً. */
#userDropdown .hdr-logout-btn {
  display: flex !important; width: calc(100% - 16px); margin: 6px 8px 8px;
  justify-content: center; gap: 6px; border-radius: 9px; padding: 9px 12px;
  border-top: none;
}
#userDropdown .hdr-logout-btn .hidden-mobile { display: inline !important; }

/* ── v0.37.9.729 — الشاشات ذات الغطاء الداخلي تتحرّر في وضع الشريط العلوي ──
   (بلاغ المالك بلقطة مركز الاعتمادات) بعد تحرير `.screen-container` في v716
   بقيت شاشتان تضيّقان نفسيهما بغطاء داخلي خاص: مركز الاعتمادات (1400px)
   ولوحة المالك (1000px inline ⇒ صُنّفت `.op-shell`). الغطاء يبقى لوضع
   القائمة الجانبية، ويُرفع هنا فقط — نفس عقد v716 حرفياً. */
.op-shell { max-width: 1000px; margin: 0 auto; }
body.topnav-mode .op-shell,
body.topnav-mode .wfs-shell { max-width: none !important; }

/* ══ v1346 — لوحة المالك: طبقةٌ واحدة معرَّفة هنا (قاعدة 11) — هويّةٌ للـchrome ودلاليٌّ للحالات (قاعدة 5) ══
   كلُّ منشأةٍ صفٌّ مستقلّ (قرارُ المالك)، والرأسُ فوق خانته، والأرقامُ جدولية LTR (عُرف v970). */
.op-hero { margin-bottom: 14px; }
.op-hero .screen-header-icon svg { width: 28px; height: 28px; }
.op-hero .screen-header-actions { flex-wrap: nowrap; }
.op-hero-stat { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 74px;
  padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); }
@media (max-width: 860px) { .op-hero { flex-wrap: wrap; } .op-hero .screen-header-actions { flex-wrap: wrap; margin-inline-start: 0; } }
.op-hero-stat b { font-size: 18px; font-weight: 900; line-height: 1.2; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.op-hero-stat span { font-size: 11px; opacity: .92; white-space: nowrap; }
.op-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.op-kpi { background: #fff; border: 1px solid var(--border, #e2e8f0); border-inline-start: 3px solid var(--primary, #047857);
  border-radius: 12px; padding: 10px 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); min-width: 0; }
.op-kpi[data-tone="ok"]   { border-inline-start-color: #16a34a; }
.op-kpi[data-tone="warn"] { border-inline-start-color: #d97706; }
.op-kpi[data-tone="bad"]  { border-inline-start-color: #dc2626; }
.op-kpi[data-tone="info"] { border-inline-start-color: #2563eb; }
.op-kpi[data-tone="mute"] { border-inline-start-color: #94a3b8; }
.op-kpi-l { font-size: 12px; color: #64748b; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-kpi-v { font-size: 22px; font-weight: 900; color: #0f172a; font-variant-numeric: tabular-nums; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.op-help { font-size: 12.5px; color: #64748b; flex: 1 1 260px; min-width: 220px; line-height: 1.8; }
.op-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.op-sep { width: 1px; height: 22px; background: var(--border, #e2e8f0); margin-inline: 2px; }
.op-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.op-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.op-chip { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: #fff; color: #475569;
  border: 1px solid var(--border, #e2e8f0); cursor: pointer; white-space: nowrap; }
.op-chip:hover { border-color: var(--primary, #047857); color: var(--primary, #047857); }
.op-chip.active { background: #ecfdf5; border-color: var(--primary, #047857); color: #065f46; }
.op-chip span { font-variant-numeric: tabular-nums; margin: 0 5px; opacity: .8; }   /* العددُ LTR فهامشٌ على الجانبين لا «بداية» */
.op-table-wrap { overflow: auto; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; background: #fff; }
.op-co { display: inline-block; min-width: 150px; }
.op-co b { font-weight: 800; color: #0f172a; white-space: nowrap; }
.op-code { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 1px 8px; border-radius: 999px;
  background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; direction: ltr; unicode-bidi: isolate;
  font-variant-numeric: tabular-nums; margin-inline-start: 6px; white-space: nowrap; }
.op-sub { display: block; font-size: 11.5px; color: #64748b; margin-top: 2px; font-weight: 400; }
.op-empty { padding: 22px; text-align: center; color: #94a3b8; font-size: 13px; }
.op-note { font-size: 11.5px; color: #64748b; line-height: 1.9; margin-top: 8px; }
.op-section-title { font-weight: 800; font-size: 13px; color: #0f172a; margin: 16px 0 8px; }
.op-dangerbox { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 10px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.9; }
.op-mh-ico { display: inline-flex; align-items: center; }
.op-mh-ico svg { width: 22px; height: 22px; }

/* ══════════════════════════════════════════════════════════════════════════
   v0.37.9.732 — تبويبا الرواتب في التعريفات العامة: «القيد أولاً»
   ─────────────────────────────────────────────────────────────────────────
   مساحة الأسماء `.pyl-*` (ربط الرواتب) و`.pyi-*` (بنود الرواتب) — **وليست
   `.pi-*`**: تلك يملكها `purchase_invoices.js` (‏64 استعمالاً · styles.css:5825)
   وأي إضافة فيها تُعيد طلاء شاشة فواتير المشتريات صامتاً.
   الاتجاه محمول بعمودَي مدين/دائن وشرائحهما — **لا رموز أسهم** (`→` ينعكس
   معناه بين RTL وLTR). الدلالي محفوظ: .jv-debit / .jv-credit / الكهرماني
   للتنبيه / الأحمر للمنع / ألوان فئات البنود الثلاث.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── مبدّل مجموعة العقد ── */
.pyl-seg { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pyl-seg-btn {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; cursor: pointer;
  border: 1.5px solid #cbd5e1; border-radius: 10px; background: #fff; color: #475569;
  font-weight: 900; font-size: 13.5px; font-family: inherit; text-align: start;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pyl-seg-btn:hover { border-color: #6ee7b7; transform: translateY(-1px); }
.pyl-seg-btn.is-on {
  background: linear-gradient(135deg, #014034, #047857); color: #fff; border-color: #047857;
  box-shadow: 0 4px 12px rgba(1, 64, 52, .22);
}
.pyl-seg-sub { display: block; font-size: 10.5px; font-weight: 700; opacity: .82; margin-top: 2px; }
.pyl-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.pyl-dot-ok { background: #10b981; }
.pyl-dot-warn { background: #f59e0b; }
.pyl-seg-btn.is-on .pyl-dot-ok { background: #6ee7b7; }

/* ── بطاقة القيد (العمود الفقري) ── */
.pyl-jv { background: #fff; border: 1.5px solid #a7f3d0; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.pyl-jv-head {
  background: linear-gradient(135deg, #014034, #047857); color: #fff;
  padding: 12px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pyl-jv-head h4 { margin: 0; font-size: 14px; font-weight: 900; }
.pyl-jv-head p { margin: 2px 0 0; font-size: 11px; opacity: .88; }
.pyl-chip {
  margin-inline-start: auto; padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.pyl-chip-live  { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }
.pyl-chip-shape { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
/* شريحة المصدر: مؤشّر لا أداة — لا ترتفع ولا تُنقر (قاعدة v638/v661) */
.pyl-src {
  display: inline-block; background: #f7fbf9; color: #5c6f68; border: 1px solid #d7e8e2;
  border-radius: 6px; padding: 2px 8px; font-size: 10.5px; font-weight: 700;
  cursor: default; user-select: none;
}
.pyl-acct-fix {
  background: #f1f5f9; border: 1px solid #cbd5e1; color: #1e293b; border-radius: 6px;
  padding: 3px 9px; font-size: 11px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.pyl-acct-fix:hover { background: #e2e8f0; }
.pyl-acct-set {
  background: #047857; border: 0; color: #fff; border-radius: 6px;
  padding: 3px 10px; font-size: 11px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.pyl-acct-set:hover { background: #065f46; }
.pyl-inherit {
  display: inline-flex; align-items: center; gap: 6px; background: #f5f3ff; color: #5b21b6;
  border: 1px dashed #c4b5fd; border-radius: 8px; padding: 3px 10px; font-size: 11px; font-weight: 700;
}
.pyl-miss { color: #b91c1c; font-weight: 800; font-size: 11.5px; }
.pyl-opt  { color: #64748b; font-weight: 700; font-size: 11.5px; }
.pyl-stale { color: #b45309; font-weight: 800; font-size: 11.5px; }

/* ── شريط الاكتمال ── */
.pyl-health { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
.pyl-health-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pyl-health-num { font-size: 22px; font-weight: 900; color: #014034; }
.pyl-health-say { font-size: 12px; color: #475569; font-weight: 700; }
.pyl-health-bar { height: 9px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.pyl-health-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #014034, #10b981); }
.pyl-health.is-warn .pyl-health-num { color: #92400e; }
.pyl-health.is-warn .pyl-health-fill { background: linear-gradient(90deg, #b45309, #f59e0b); }

/* ── ملاحظات وتذييل ── */
.pyl-note { border-radius: 10px; padding: 10px 16px; margin-bottom: 12px; font-size: 11.5px; line-height: 1.8; }
.pyl-note-emerald { background: #ecfdf5; border: 1.5px solid #a7f3d0; color: #065f46; }
.pyl-note-violet  { background: #f5f3ff; border: 1.5px solid #c4b5fd; color: #5b21b6; }
.pyl-note-amber   { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.pyl-note-slate   { background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; }
.pyl-drift { margin: 4px 0 0; padding-inline-start: 18px; }
.pyl-drift li { margin-top: 2px; }

/* ── مسارات بنود الرواتب (ثلاث حارات — تجميع لا تجزئة) ── */
.pyi-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pyi-lane { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; }
.pyi-lane-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pyi-lane-ic { font-size: 20px; }
.pyi-lane-name { font-size: 12.5px; font-weight: 900; color: #0f172a; }
.pyi-lane-n { margin-inline-start: auto; font-size: 18px; font-weight: 900; color: #014034; }
.pyi-lane-where { font-size: 10.5px; color: #64748b; font-weight: 700; }
.pyi-linkbar { height: 7px; border-radius: 999px; background: #e2e8f0; overflow: hidden; margin-top: 8px; display: flex; }
.pyi-linkbar i { display: block; height: 100%; }
.pyi-linkbar .on  { background: linear-gradient(90deg, #047857, #10b981); }
.pyi-linkbar .off { background: #cbd5e1; }
.pyi-lane-foot { display: flex; justify-content: space-between; font-size: 10.5px; color: #64748b; font-weight: 700; margin-top: 5px; }
.pyi-lane-head-row td {
  background: linear-gradient(135deg, #f0fdfa, #fff); border-top: 2px solid #99f6e4 !important;
  font-weight: 900; color: #014034; font-size: 12px; padding: 7px 10px !important;
}
.pyi-used { display: inline-block; background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; border-radius: 6px; padding: 1px 7px; font-size:10.5px; font-weight: 800; }
.pyi-unused { display: inline-block; background: #f8fafc; color: #94a3b8; border: 1px solid #e2e8f0; border-radius: 6px; padding: 1px 7px; font-size:10.5px; font-weight: 800; }
.pyi-dest { display: inline-block; background: #f7fbf9; color: #5c6f68; border: 1px solid #d7e8e2; border-radius: 6px; padding: 2px 8px; font-size: 10.5px; font-weight: 700; cursor: default; user-select: none; }

/* ══════════════════════════════════════════════════════════════════════════
   v0.37.9.735 — شاشتا العملاء والموردين: الهوية + عمود الكود
   ─────────────────────────────────────────────────────────────────────────
   مساحة `.ledg-*` (مُتحقَّق أنها حرّة). الجدولان يحملان `.ledg-party` كنطاق،
   فلا نمسّ `.co-list-table` المشتركة (~20 مستهلكاً عبر البرنامج).
   الكود **معرّف**: `dir=ltr` + `unicode-bidi:isolate` إلزاميان — السطر العربي
   يعيد ترتيب الأرقام المجرّدة فيُقرأ الكود مقلوباً (قاعدة v632).
   ═══════════════════════════════════════════════════════════════════════ */
.data-table.ledg-party thead th {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  color: #014034 !important;
  border-bottom: 1.5px solid #6ee7b7 !important;
}
.data-table.ledg-party tbody tr.audited { background: #f0fdfa !important; }
.ledg-col-code { width: 118px; white-space: nowrap; }
.ledg-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800; font-size: 11.5px; letter-spacing: .3px;
  direction: ltr; unicode-bidi: isolate;
  background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0;
  border-radius: 7px; padding: 3px 9px; cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.ledg-code:hover { background: #d1fae5; transform: translateY(-1px); }
.ledg-code:active { transform: none; }
.ledg-code-none { color: #cbd5e1; font-weight: 700; cursor: default; user-select: none; }

/* ══════════════════════════════════════════════════════════════════════════
   v0.37.9.741 — شارة عدد الملاحظات على زرّ السطر  (مساحة `.nx-*` مُتحقَّق أنها حرّة)
   ─────────────────────────────────────────────────────────────────────────
   الملاحظة تُكتب على سطر، فيجب أن يقول السطر إنها هناك. اللون **دلالي**:
   الزمردي يعني «ثمّة ملاحظة مفتوحة تنتظر»، والرمادي «كلها مغلقة».
   ═══════════════════════════════════════════════════════════════════════ */
.action-btn.nx-has-notes { position: relative; }
.nx-cnt {
  position: absolute; top: -3px; inset-inline-end: -3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: #94a3b8; color: #fff;
  font-size: 10.5px; font-weight: 900; line-height: 15px; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  direction: ltr; unicode-bidi: isolate; pointer-events: none;
  box-shadow: 0 0 0 1.5px #fff;
}
.action-btn.nx-has-open .nx-cnt { background: #047857; }
.action-btn.nx-has-open { box-shadow: inset 0 0 0 1px #6ee7b7; }

/* v0.37.9.742 — شريحة السجل المصدر على بطاقة الملاحظة (أربع حالات صادقة) */
.nx-src-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0;
  border-radius: 8px; padding: 2px 9px; font-size: 10.5px; font-weight: 800;
  font-family: inherit; cursor: default; max-width: 320px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nx-src-chip.is-open { cursor: pointer; transition: background .12s ease, transform .12s ease; }
.nx-src-chip.is-open:hover { background: #d1fae5; transform: translateY(-1px); }
.nx-src-chip.is-dead { background: #f8fafc; color: #94a3b8; border-color: #e2e8f0; text-decoration: line-through; }
.nx-orphan {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fffbeb; color: #92400e; border: 1px solid #fcd34d;
  border-radius: 8px; padding: 2px 9px; font-size: 10.5px; font-weight: 800;
  cursor: default; user-select: none;
}

/* v0.37.9.742 — الملاحظات: شريحة الإرشاد والحالة الفارغة الموصِّلة */
.nx-howto {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.92); color: #014034;
  border-radius: 9px; padding: 7px 13px; font-size: 12px; font-weight: 800;
  cursor: default; user-select: none;
}
.nx-empty { padding: 54px 24px; text-align: center; }
.nx-empty-ic { font-size: 52px; line-height: 1; }
.nx-empty-h { font-weight: 900; font-size: 17px; color: #0f172a; margin-top: 12px; }
.nx-empty-p { font-size: 13px; color: #64748b; margin-top: 6px; max-width: 560px; margin-inline: auto; line-height: 1.9; }
.nx-empty-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.nx-goto {
  background: #ecfdf5; color: #065f46; border: 1.5px solid #a7f3d0;
  border-radius: 10px; padding: 8px 15px; font-size: 12.5px; font-weight: 800;
  cursor: pointer; font-family: inherit;
  transition: background .12s ease, transform .12s ease;
}
.nx-goto:hover { background: #d1fae5; transform: translateY(-1px); }

/* v0.37.9.746 — سبب إغلاق الملاحظة على بطاقتها (الإغلاق بديل الحذف) */
.nx-close-reason {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0;
  border-radius: 8px; padding: 2px 9px; font-size: 10.5px; font-weight: 700;
  cursor: default; max-width: 340px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.nx-close-reason.is-exc { background: #fffbeb; color: #92400e; border-color: #fcd34d; }

/* ══════════════════════════════════════════════════════════════════════════
   v0.37.9.748 — الشريط العلوي: إطار خفيف للمجموعات + اسم مستخدم أوسع
   ─────────────────────────────────────────────────────────────────────────
   (طلب المالك) كل مجموعة تسكن **مربّعاً خفيفاً** يميّزها عن جارتها بدل أن
   تسبح الأسماء في الشريط. المفتوحة شاشتُها تبقى **بلونها الزمردي كما هو** —
   التظليل للمجموعات الساكنة وحدها فلا يُنازع النشطة على الانتباه.
   ═══════════════════════════════════════════════════════════════════════ */
body.topnav-mode .at-tn-btn:not(.active) {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
body.topnav-mode .at-tn-btn:not(.active):hover {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(110, 231, 183, .45);
}
/* النشطة كما هي — تُعاد هنا صراحةً كي لا يسبقها التظليل بحكم الترتيب */
body.topnav-mode .at-tn-btn.active {
  background: linear-gradient(135deg, #10b981, #047857);
  border-color: #6ee7b7;
  box-shadow: 0 3px 12px rgba(16, 185, 129, .38);
}
/* فرجة أوسع قليلاً بين المربّعات لتُقرأ كوحدات مستقلّة */
/* ⚠️ المُحدِّد `.at-topnav` (صنف) لا `#atTopNav`، وقاعدة v724 أعلاه تفرض
   `gap: 0` لتوفير العرض — تُرفع هنا قليلاً لأن المربّعات تحتاج فرجة تفصلها،
   وتأتي **بعدها** في الملفّ فتغلبها بالترتيب لا بـ!important. */
body.topnav-mode .at-topnav { gap: 6px; padding: 0 4px; }

/* 👤 اسم المستخدم أوسع (كان يُقصّ عند ١٤٠px تقريباً) */
body.topnav-mode #userName {
  max-width: 210px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 13.5px;
}
body.topnav-mode .user-info { min-width: 150px; }
@media (max-width: 1180px) {
  body.topnav-mode #userName { max-width: 150px; }
  body.topnav-mode .user-info { min-width: 0; }
}

/* v0.37.9.752 — معاينة البذر: يرى المستخدم ما سيُضاف ويختاره بنداً بنداً */
.gdt-seed-note {
  background: #ecfdf5; border: 1.5px solid #a7f3d0; color: #065f46;
  border-radius: 10px; padding: 10px 14px; font-size: 12.5px; line-height: 1.8; margin-bottom: 10px;
}
.gdt-seed-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gdt-seed-tools .gdt-mini { margin-inline-start: auto; }
.gdt-seed-list { max-height: 46vh; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 10px; }
.gdt-seed-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid #f1f5f9; font-size: 13px; cursor: pointer;
}
.gdt-seed-row:last-child { border-bottom: 0; }
.gdt-seed-row:hover { background: #f8fafc; }
.gdt-seed-row.is-dup { background: #f8fafc; color: #94a3b8; cursor: default; }
.gdt-seed-row.is-dup:hover { background: #f8fafc; }
.gdt-seed-nm { flex: 1; font-weight: 700; color: #0f172a; }
.gdt-seed-row.is-dup .gdt-seed-nm { color: #94a3b8; font-weight: 600; }
.gdt-seed-sub { font-size: 11px; color: #64748b; font-weight: 600; }
.gdt-seed-tag {
  background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0;
  border-radius: 6px; padding: 1px 8px; font-size: 10.5px; font-weight: 800;
}

/* v0.37.9.755 — شريحة كود فئة الأصل (الترتيب الشجري يُقرأ من الكود) */
.ac-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
  background: #f5f3ff; color: #5b21b6; border: 1px solid #ddd6fe;
  border-radius: 5px; padding: 2px 7px; unicode-bidi: isolate; flex: none;
}

/* v0.37.9.756 — تصدير كل التعريفات في مصنّف واحد */
.gdt-xl-all {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 1.5px solid #6ee7b7; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.gdt-xl-all-txt { flex: 1; min-width: 220px; }
.gdt-xl-all-txt strong { font-size: 13.5px; color: #065f46; display: block; margin-bottom: 2px; }
.gdt-mini-btn.primary {
  background: #047857; color: #fff; border-color: #047857; font-weight: 800;
}
.gdt-mini-btn.primary:hover { background: #065f46; border-color: #065f46; }
.gdt-mini-btn.primary:disabled { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════
   v0.37.9.757 — TABLE KIT  ·  مساحة .tbx-* (مُتحقَّق أنها كانت حرّة)
   أسهم الفرز · زرّ الأعمدة ولوحته · عمود المرفقات · التعديل السريع
   ملاحظة Safari: كل `user-select` معه توأمه `-webkit-`.
   ═══════════════════════════════════════════════════════════════════════ */

/* ① رؤوس الفرز — السهم حاضر دائماً، صاخب على العمود العامل وحده */
.tbx-th { position: relative; }
.tbx-th[data-tbx-sort] {
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: background .14s ease;
}
.tbx-th[data-tbx-sort]:hover { background: rgba(16, 185, 129, .14); }
.tbx-th[data-tbx-sort]:focus-visible { outline: 2px solid #10b981; outline-offset: -2px; }
.tbx-th-lbl { vertical-align: middle; }
.tbx-arw {
  display: inline-block; margin-inline-start: 6px; font-size:11px; line-height: 1;
  opacity: .28; transition: opacity .14s ease, color .14s ease; vertical-align: middle;
}
.tbx-th[data-tbx-sort]:hover .tbx-arw { opacity: .7; }
.tbx-th.is-on .tbx-arw { opacity: 1; font-weight: 900; font-size: 11px; }
.tbx-al-e { text-align: end; }
.tbx-al-c { text-align: center; }

/* ② زرّ الأعمدة + لوحته */
.tbx-bar { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tbx-colbtn { display: inline-flex; align-items: center; gap: 6px; }
.tbx-colbtn-n {
  font-size: 10.5px; font-weight: 800; background: #f1f5f9; color: #475569;
  border-radius: 5px; padding: 1px 6px; font-variant-numeric: tabular-nums;
}
.tbx-colbtn.has-hidden { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.tbx-colbtn.has-hidden .tbx-colbtn-n { background: #fde68a; color: #92400e; }

.tbx-cm {
  position: fixed; z-index: 2400; min-width: 232px; max-width: 320px;
  background: #fff; border: 1.5px solid #cbd5e1; border-radius: 12px;
  box-shadow: 0 14px 40px rgba(2, 20, 15, .22); overflow: hidden;
}
.tbx-cm-head {
  padding: 9px 13px; font-size: 12px; font-weight: 800; color: #065f46;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-bottom: 1px solid #a7f3d0;
}
.tbx-cm-list { max-height: 46vh; overflow-y: auto; padding: 4px 0; }
.tbx-cm-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 13px;
  font-size: 12.5px; cursor: pointer; color: #0f172a;
}
.tbx-cm-row:hover { background: #f8fafc; }
.tbx-cm-row.is-lock, .tbx-cm-row.is-last { cursor: default; color: #94a3b8; }
.tbx-cm-row.is-lock:hover { background: transparent; }
.tbx-cm-lk { font-size: 11px; }
.tbx-cm-lbl { flex: 1; }
.tbx-cm-foot {
  display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid #e2e8f0; background: #f8fafc;
}
.tbx-cm-btn {
  flex: 1; padding: 6px 8px; font-size: 11.5px; font-weight: 700; cursor: pointer;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 7px; color: #334155;
  font-family: inherit;
}
.tbx-cm-btn:hover { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }

/* منتقي ترتيب فروع الشجرة */
.tbx-tsort { display: inline-flex; align-items: center; gap: 6px; }
.tbx-tsort-lbl { font-size: 11.5px; font-weight: 700; color: #64748b; }
.tbx-tsort-sel {
  padding: 5px 9px; font-size: 12px; font-weight: 700; font-family: inherit;
  border: 1.5px solid #cbd5e1; border-radius: 7px; background: #fff; color: #0f172a;
}
.tbx-tsort-sel:focus { outline: 0; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .14); }
.tbx-tsort-dir {
  width: 30px; height: 30px; border: 1.5px solid #cbd5e1; border-radius: 7px;
  background: #fff; cursor: pointer; font-size: 11px; color: #047857; font-weight: 900;
}
.tbx-tsort-dir:hover { background: #ecfdf5; border-color: #6ee7b7; }

/* ③ عمود المرفقات — ولا نستعير .att-pill-btn: أنماطها لا توجد قبل أول
   فتح للعارض (injectStyles تعمل داخل open وحدها) فيظهر زرّ بلا شكل. */
.tbx-att {
  display: inline-flex; align-items: center; gap: 4px; justify-content: center;
  min-width: 34px; padding: 3px 8px; font-size: 11.5px; font-weight: 800;
  border-radius: 7px; cursor: pointer; font-family: inherit; line-height: 1.6;
  border: 1px solid #a7f3d0; background: #ecfdf5; color: #047857;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.tbx-att:hover { background: #d1fae5; border-color: #6ee7b7; transform: translateY(-1px); }
.tbx-att.add { border-style: dashed; border-color: #cbd5e1; background: #fff; color: #94a3b8; font-size: 14px; }
.tbx-att.add:hover { border-color: #6ee7b7; background: #ecfdf5; color: #047857; border-style: solid; }
.tbx-att-n { font-variant-numeric: tabular-nums; }
/* السطر المُدقَّق يجمّد كل شيء — والمرفقات استثناء صريح بثلاث طبقات */
.audited .tbx-att, tr.audited .tbx-att, [data-audit-container].audited .tbx-att {
  opacity: 1 !important; pointer-events: auto !important; cursor: pointer !important;
  user-select: auto !important; -webkit-user-select: auto !important;
}

/* ④ التعديل السريع */
.tbx-qe {
  border-color: #fcd34d !important; background: #fffbeb !important; color: #b45309 !important;
}
.tbx-qe:hover { background: #fef3c7 !important; border-color: #f59e0b !important; }
.audited .tbx-qe, tr.audited .tbx-qe, [data-audit-container].audited .tbx-qe {
  opacity: 1 !important; pointer-events: auto !important; cursor: pointer !important;
}
.tbx-qe-note {
  background: #fffbeb; border: 1.5px solid #fcd34d; color: #92400e;
  border-radius: 10px; padding: 10px 14px; font-size: 12.5px; line-height: 1.8; margin-bottom: 12px;
}
.tbx-qe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.tbx-qe-f { display: flex; flex-direction: column; gap: 5px; }
.tbx-qe-f label { font-size: 12px; font-weight: 800; color: #334155; }
.tbx-qe-in {
  padding: 8px 11px; border: 1.5px solid #cbd5e1; border-radius: 8px;
  font-size: 13px; font-family: inherit; background: #fff; color: #0f172a; width: 100%;
}
.tbx-qe-in:focus { outline: 0; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .16); }
.tbx-qe-trail {
  margin-top: 12px; padding: 9px 12px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 8px; font-size: 11px; color: #64748b; line-height: 1.9;
}
.tbx-qe-trail strong { display: block; color: #475569; margin-bottom: 3px; font-size: 11.5px; }

/* v0.37.9.758 — إخفاء حقول الشجرة: الحاوية تحمل data-tbx-hide، والحقل
   يحمل data-tbx-slot. إخفاءٌ بـCSS وحده — بلا مسّ منطق العرض. */
[data-tbx-hide~="code"]   [data-tbx-slot="code"],
[data-tbx-hide~="nameEn"] [data-tbx-slot="nameEn"],
[data-tbx-hide~="usage"]  [data-tbx-slot="usage"],
[data-tbx-hide~="status"] [data-tbx-slot="status"],
[data-tbx-hide~="account"][data-tbx-slot="account"],
[data-tbx-hide~="account"] [data-tbx-slot="account"],
[data-tbx-hide~="depr"]   [data-tbx-slot="depr"],
[data-tbx-hide~="icon"]   [data-tbx-slot="icon"],
[data-tbx-hide~="direction"] [data-tbx-slot="direction"],
[data-tbx-hide~="kind"]   [data-tbx-slot="kind"],
[data-tbx-hide~="rate"]   [data-tbx-slot="rate"],
/* v909 — خانات الجداول الطبّية المسطّحة (المواعيد · الخدمات · المرضى · المتعاقدون) */
[data-tbx-hide~="when"] [data-tbx-slot="when"],
[data-tbx-hide~="patient"] [data-tbx-slot="patient"],
[data-tbx-hide~="specialist"] [data-tbx-slot="specialist"],
[data-tbx-hide~="service"] [data-tbx-slot="service"],
[data-tbx-hide~="package"] [data-tbx-slot="package"],
[data-tbx-hide~="gps"] [data-tbx-slot="gps"],
/* v959 — عمودا المواعيد الجديدان */
/* v1065 — عمود «حالة القيد» في تبويب الضمانات بشاشة المشاريع (قاعدة 119: حلّ محلّ عمود التدقيق) */
[data-tbx-hide~="appr"] [data-tbx-slot="appr"],
[data-tbx-hide~="created"] [data-tbx-slot="created"],
[data-tbx-hide~="atts"] [data-tbx-slot="atts"],
[data-tbx-hide~="notes"] [data-tbx-slot="notes"],
[data-tbx-hide~="price"] [data-tbx-slot="price"],
[data-tbx-hide~="unit"] [data-tbx-slot="unit"],
[data-tbx-hide~="vat"] [data-tbx-slot="vat"],
[data-tbx-hide~="phone"] [data-tbx-slot="phone"],
[data-tbx-hide~="idNumber"] [data-tbx-slot="idNumber"],
[data-tbx-hide~="city"] [data-tbx-slot="city"],
[data-tbx-hide~="zone"] [data-tbx-slot="zone"],
[data-tbx-hide~="gender"] [data-tbx-slot="gender"],
[data-tbx-hide~="nationality"] [data-tbx-slot="nationality"],
[data-tbx-hide~="name"] [data-tbx-slot="name"],
[data-tbx-hide~="services"] [data-tbx-slot="services"],
[data-tbx-hide~="portal"] [data-tbx-slot="portal"],
[data-tbx-hide~="avail"] [data-tbx-slot="avail"],
/* v910 — خانات الجداول المالية الستّ (قيود · مبيعات · مشتريات · قبض · صرف · تحويلات) */
[data-tbx-hide~="docNo"] [data-tbx-slot="docNo"],
[data-tbx-hide~="date"] [data-tbx-slot="date"],
[data-tbx-hide~="desc"] [data-tbx-slot="desc"],
[data-tbx-hide~="debit"] [data-tbx-slot="debit"],
[data-tbx-hide~="credit"] [data-tbx-slot="credit"],
[data-tbx-hide~="source"] [data-tbx-slot="source"],
[data-tbx-hide~="audit"] [data-tbx-slot="audit"],
[data-tbx-hide~="customer"] [data-tbx-slot="customer"],
[data-tbx-hide~="total"] [data-tbx-slot="total"],
[data-tbx-hide~="payment"] [data-tbx-slot="payment"],
[data-tbx-hide~="jv"] [data-tbx-slot="jv"],
[data-tbx-hide~="party"] [data-tbx-slot="party"],
[data-tbx-hide~="treasury"] [data-tbx-slot="treasury"],
[data-tbx-hide~="amount"] [data-tbx-slot="amount"],
[data-tbx-hide~="payee"] [data-tbx-slot="payee"],
[data-tbx-hide~="gross"] [data-tbx-slot="gross"],
[data-tbx-hide~="vat"] [data-tbx-slot="vat"],
[data-tbx-hide~="from"] [data-tbx-slot="from"],
[data-tbx-hide~="to"] [data-tbx-slot="to"],
[data-tbx-hide~="period"] [data-tbx-slot="period"],   /* v1201 — عمود «الفترة» في جدول المستخلصات */
[data-tbx-hide~="fees"] [data-tbx-slot="fees"],
[data-tbx-hide~="supplier"] [data-tbx-slot="supplier"],
/* v912 — خانات عروض الأسعار وأوامر الشراء */
[data-tbx-hide~="client"] [data-tbx-slot="client"],
[data-tbx-hide~="validUntil"] [data-tbx-slot="validUntil"],
[data-tbx-hide~="lines"] [data-tbx-slot="lines"],
[data-tbx-hide~="pq"] [data-tbx-slot="pq"],   /* v1290 — «عرض المشتريات المصدر» في أوامر الشراء (مخفيٌّ افتراضاً) */
/* v778 — خانات شجرة الحسابات */
[data-tbx-hide~="type"]     [data-tbx-slot="type"],
[data-tbx-hide~="nature"]   [data-tbx-slot="nature"],
[data-tbx-hide~="health"]   [data-tbx-slot="health"],
[data-tbx-hide~="children"] [data-tbx-slot="children"],
/* v779 — خانات مراكز التكلفة */
[data-tbx-hide~="leaf"]  [data-tbx-slot="leaf"],
[data-tbx-hide~="ctype"] [data-tbx-slot="ctype"],
[data-tbx-hide~="mgr"]   [data-tbx-slot="mgr"],
/* v1073 — خانات سندات القبض — القطاع الطبي (العدد · جهة التسويق · الفوترة · الخصم) */
[data-tbx-hide~="qty"] [data-tbx-slot="qty"],
[data-tbx-hide~="mk"] [data-tbx-slot="mk"],
[data-tbx-hide~="billing"] [data-tbx-slot="billing"],
[data-tbx-hide~="disc"] [data-tbx-slot="disc"],
/* v1075 — خانتا فواتير المبيعات — القطاع الطبي (الأساسي · المحصَّل) */
[data-tbx-hide~="base"] [data-tbx-slot="base"],
[data-tbx-hide~="collected"] [data-tbx-slot="collected"],
[data-tbx-hide~="amt"]   [data-tbx-slot="amt"] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v0.37.9.775 — مودال تعريف العميل/المورد: هوية حيّة · شعار · عدّاد إلزامي
   ═══════════════════════════════════════════════════════════════════════ */
.pty-head { display: flex; align-items: center; gap: 14px; }
.pty-head-logo {
  flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, .18); border: 1.5px solid rgba(255, 255, 255, .34);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 900; color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pty-head-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pty-head-txt { flex: 1; min-width: 0; }
.pty-head-txt h3 {
  margin: 0; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 17px; color: #fff;
}
.pty-head-sub {
  display: flex; align-items: center; gap: 8px; margin-top: 3px;
  font-size: 12px; color: rgba(255, 255, 255, .88); min-width: 0;
}
#ptyHeadName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; font-weight: 700; }
.pty-head-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 800;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 6px; padding: 1px 7px; unicode-bidi: isolate; flex: none;
}

/* شريط واحد أعلى المودال: العدّاد جانباً والأقسام تلتفّ ولا تُمرَّر (v777) */
.pty-nav {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; background: #f8fafc; border-bottom: 1.5px solid #e2e8f0;
}
.pty-req {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 3px 10px; border-radius: 999px; background: #fff;
  border: 1px solid #e2e8f0;
}
.pty-req.is-full { border-color: #a7f3d0; background: #ecfdf5; }
.pty-rail { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.pty-rail-btn {
  padding: 4px 10px; font-size: 11.5px; font-weight: 700; font-family: inherit;
  border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #475569;
  cursor: pointer; white-space: nowrap;
}
.pty-rail-btn:hover { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.pty-rail-btn.active {
  background: linear-gradient(135deg, #047857, #10b981); color: #fff;
  border-color: #047857; font-weight: 800;
}
.pty-req-n {
  font-size: 12px; font-weight: 900; color: #b45309; font-variant-numeric: tabular-nums;
}
.pty-req.is-full .pty-req-n { color: #047857; }
.pty-req-lbl { font-size: 11px; color: #64748b; font-weight: 700; }
.pty-req-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0;
  border: 1px solid #cbd5e1; display: inline-block;
}
.pty-req-dot.on { background: #10b981; border-color: #059669; }
/* حقل الشعار */
.pty-logo-row { display: flex; gap: 14px; align-items: center; }
.pty-logo-box {
  flex: none; width: 92px; height: 92px; border-radius: 14px; overflow: hidden;
  border: 2px dashed #cbd5e1; background: #f8fafc;
  display: flex; align-items: center; justify-content: center;
}
.pty-logo-box img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pty-logo-ph { font-size: 34px; opacity: .45; }
.pty-logo-side { flex: 1; min-width: 0; }
.pty-logo-side label { display: block; font-size: 12px; font-weight: 800; color: #334155; margin-bottom: 6px; }
.pty-logo-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }

/* v0.37.9.785 — شاشة فريق مساحة العمل */
.tm-note, .tm-warn, .tm-how {
  padding: 12px 16px; border-radius: 12px; margin-bottom: 12px; line-height: 1.9; font-size: 12.5px;
}
.tm-note { background: #ecfdf5; border: 1.5px solid #6ee7b7; color: #065f46; }
.tm-warn { background: #fffbeb; border: 1.5px solid #fcd34d; color: #92400e; }
.tm-how  { background: #f8fafc; border: 1.5px solid #e2e8f0; color: #334155; }
.tm-note strong, .tm-warn strong, .tm-how strong { font-size: 13.5px; }
.tm-how ol { margin: 6px 0 4px; padding-inline-start: 20px; }
.tm-how li { margin-bottom: 3px; }
.tm-muted { color: #64748b; font-size: 11.5px; }
.tm-you {
  background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0;
  border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-weight: 800;
}
.tm-danger { border-color: #fca5a5 !important; color: #b91c1c !important; }
.tm-danger:hover { background: #fef2f2 !important; }
.tm-err {
  background: linear-gradient(135deg, #fef2f2, #fee2e2); border: 2px solid #dc2626;
  border-inline-start: 6px solid #dc2626; border-radius: 10px; padding: 10px 14px;
  margin-bottom: 12px; color: #991b1b; font-weight: 800; font-size: 12.5px;
}
.tm-err[hidden] { display: none !important; }

/* v0.37.9.786 — مودال الحساب: مفتاح البنك وملاحظة التوثيق */
.coa-bank-gate {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  background: #eff6ff; border: 1.5px solid #93c5fd; border-radius: 10px;
  padding: 11px 14px; margin-bottom: 12px;
}
.coa-bank-gate input { width: 18px; height: 18px; accent-color: #2563eb; margin-top: 2px; flex: none; }
.coa-bank-gate strong { display: block; font-size: 13px; color: #1e40af; }
.coa-bank-gate em { display: block; font-style: normal; font-size: 11.5px; color: #475569; margin-top: 2px; }
.coa-doc-note {
  background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 10px; font-size: 11.5px; color: #475569; line-height: 1.75;
}
.coa-ro-badge {
  background: rgba(255,255,255,.25); color: #fff; padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; border: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.coa-ro-note {
  flex: 1; font-size: 11.5px; color: #92400e; background: #fffbeb;
  border: 1px solid #fcd34d; border-radius: 8px; padding: 7px 11px; line-height: 1.7;
}

/* v791 — تنبيه الرصيد الافتتاحي في مودال الحساب: الحقل يُحفظ ولا تقرأه القوائم */
.coa-ob-warn{display:block;margin-top:6px;padding:7px 9px;background:#fffbeb;border:1px dashed #fcd34d;
  border-radius:7px;font-size:10.5px;line-height:1.65;color:#78350f}

/* v799 — بانر سبب الرفض أعلى مودال التعريفات العامة.
   بلاغ المالك كان «لا يقبل الحفظ ولا يعطيني السبب»: التنبيه العابر قد يفوت
   العين أو يُبتلع، فصار للرفض **أثر ثابت** داخل المودال نفسه لا يزول حتى
   يُصحَّح السبب. (نظير `#coReqBanner` في مودال المنشأة.) */
.gd-req-banner{display:block;margin:0 0 14px;padding:11px 13px;background:#fef2f2;
  border:1.5px solid #fca5a5;border-inline-start:4px solid #dc2626;border-radius:9px;
  font-size:12.5px;font-weight:700;line-height:1.75;color:#991b1b}
.gd-req-banner[hidden]{display:none}


/* ═══ v804 — صفوف شجرة فئات الأصول الثابتة ═══════════════════════════════
   قاعدة المالك: الرئيسي أخضر داكن قليلاً، والفرعي أخضر فاتح. كانت الصفوف
   بيضاء بلا تمييز إطلاقاً — يُقرأ الجذر من الفرع بالإزاحة وحدها. */
/* 🌳 v813 — سلّم العمق الموحّد (نفس شجرة الحسابات) — الشجرة تعاودية بعمق حرّ */
.ac-tree-node { background: var(--el-tree-l4); border-inline-start: 3px solid var(--el-tree-l4-edge); }
.ac-tree-node[data-depth="0"] { background: var(--el-tree-l0); border-inline-start-color: var(--el-tree-l0-edge); }
.ac-tree-node[data-depth="1"] { background: var(--el-tree-l1); border-inline-start-color: var(--el-tree-l1-edge); }
.ac-tree-node[data-depth="2"] { background: var(--el-tree-l2); border-inline-start-color: var(--el-tree-l2-edge); }
.ac-tree-node[data-depth="3"] { background: var(--el-tree-l3); border-inline-start-color: var(--el-tree-l3-edge); }
.ac-tree-node.is-root .ac-name { color: var(--el-tree-ink); font-weight: 800; }
.ac-tree-node:hover { filter: brightness(0.965); }

/* ═══ v806 — شاشة «تمويل الصفقات» (المساهمون سابقاً) ═══════════════════════
   الممول ليس شريكاً في المنشأة: يدخل بتمويل صفقة بعينها ويُردّ له رأس ماله
   مع الربحية المتفق عليها. الألوان من الهوية نفسها (أخضر تبويب المستندات). */
.fin-hero{background:linear-gradient(135deg,#014034,#0d6e5c);color:#fff;border-radius:14px;
  padding:20px 22px;margin-bottom:14px}
.fin-hero h2{margin:0;font-size:19px;font-weight:800}
.fin-hero p{margin:6px 0 0;font-size:12px;line-height:1.75;color:rgba(209,250,229,.82);max-width:78ch}
.fin-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:12px}
.fin-kpi{background:#fff;border:1px solid #e4ede9;border-top:3px solid var(--c,#014034);
  border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px}
.fin-kpi-ic{width:38px;height:38px;border-radius:10px;background:#ecfdf5;display:flex;
  align-items:center;justify-content:center;font-size:19px;flex:0 0 auto}
.fin-kpi-num{font-size:18px;font-weight:900;color:var(--c,#014034);line-height:1.2}
.fin-kpi-lbl{font-size:11.5px;color:#5c6f68;font-weight:700;margin-top:2px}
.fin-kpi-sub{font-size:10.5px;color:#94a3b8;margin-top:2px}
.fin-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.fin-empty{text-align:center;padding:44px 20px;color:#5c6f68}
.fin-empty h3{margin:10px 0 4px;font-size:15px;font-weight:800;color:#014034}
.fin-empty p{margin:0;font-size:12.5px;line-height:1.8;max-width:62ch;margin-inline:auto}
.fin-rel{font-size:10.5px;background:#ecfdf5;color:#047857;padding:1px 6px;border-radius:5px;
  font-weight:800;margin-inline-start:6px}
/* v808 — مودال بطاقة الممول: ترويسة هوية حيّة + رؤوس أقسام (معيار المودال v775) */
.fin-idcard{display:flex;align-items:center;gap:12px;background:var(--el-em-50,#ecfdf5);
  border:1px solid var(--el-em-200,#a7f3d0);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.fin-avatar{width:44px;height:44px;border-radius:50%;background:var(--el-grad-hero,linear-gradient(135deg,#014034,#047857));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:900;flex:0 0 auto}
.fin-idname{font-size:14.5px;font-weight:900;color:var(--el-teal-800,#014034);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-idsub{font-size:11px;color:#5c6f68;margin-top:2px}
.fin-lock{font-size:11px;font-weight:800;color:#b45309;background:#fffbeb;
  border:1px solid #fcd34d;border-radius:8px;padding:4px 9px;flex:0 0 auto}
.fin-sec-head{grid-column:1/-1;font-size:12px;font-weight:900;color:var(--el-em-800,#065f46);
  background:var(--el-em-50,#ecfdf5);border-inline-start:3px solid var(--el-em-700,#047857);
  border-radius:6px;padding:6px 10px;margin-top:4px}


.fin-payout-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  background:#ecfdf5;border:1px solid rgba(4,120,87,.20);border-radius:10px;padding:11px 13px;margin-bottom:14px}
.fin-payout-head span{display:block;font-size:10.5px;color:#5c6f68;font-weight:700}
.fin-payout-head b{display:block;font-size:13px;color:#04231d;font-weight:800;margin-top:2px}

/* ═══ v814 — «تمويل الصفقات» · معاملات الممولين ═══════════════════════════
   كل لون من توكنز الهوية (`--el-*`) لا من literal — القاعدة ٥.
   والدلالي يبقى دلالياً: الأحمر للمتأخر، والكهرماني للمعلّق، والأخضر للربح. */
.df-hero{background:var(--el-grad-hero,linear-gradient(135deg,#013229,#0d6e5c));color:#fff;
  border-radius:14px;padding:20px 22px;margin-bottom:14px}
.df-hero h2{margin:0;font-size:19px;font-weight:800}
.df-hero p{margin:6px 0 0;font-size:12px;line-height:1.75;color:var(--el-em-100,#d1fae5);opacity:.86;max-width:84ch}
.df-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:10px;margin-bottom:12px}
.df-kpi{background:#fff;border:1px solid var(--el-em-100,#d1fae5);border-top:3px solid var(--el-teal-800,#014034);
  border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px}
.df-kpi-em{border-top-color:var(--el-em-500,#10b981)}
.df-kpi-warn{border-top-color:var(--warning,#f59e0b)}
.df-kpi-slate{border-top-color:#94a3b8}
.df-kpi-ic{width:38px;height:38px;border-radius:10px;background:var(--el-em-50,#ecfdf5);
  display:flex;align-items:center;justify-content:center;font-size:19px;flex:0 0 auto}
.df-kpi-num{font-size:18px;font-weight:900;color:var(--el-teal-800,#014034);line-height:1.2;font-variant-numeric:tabular-nums}
.df-kpi-lbl{font-size:11.5px;color:var(--el-ta-700,#5c6f68);font-weight:700;margin-top:2px}
.df-kpi-sub{font-size:10.5px;color:#94a3b8;margin-top:2px}
.df-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.df-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;
  border:1px solid var(--el-em-100,#d1fae5);background:#fff;color:var(--el-ta-700,#5c6f68);
  font-weight:700;font-size:13px;font-family:inherit;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.df-tab:hover{border-color:var(--el-em-300,#6ee7b7);color:var(--el-teal-800,#014034)}
.df-tab.active{background:var(--el-teal-800,#014034);border-color:var(--el-teal-800,#014034);color:#fff}
.df-tab-n{font-size:10.5px;background:var(--el-em-50,#ecfdf5);color:var(--el-em-700,#047857);
  padding:1px 7px;border-radius:999px;font-weight:800}
.df-tab.active .df-tab-n{background:rgba(255,255,255,.18);color:#fff}
/* التبويب الفارغ يُهدَّأ فتذهب العين لما فيه بيانات — والنشط لا يُهدَّأ أبداً */
.df-tab-empty:not(.active){opacity:.62}
.df-tab-empty:not(.active) .df-tab-n{background:#f1f5f4;color:#94a3b8}
.df-bar,.df-exp{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.df-exp-lbl{font-size:11.5px;font-weight:800;color:var(--el-ta-700,#5c6f68)}
.df-exp-n{font-size:11px;color:#94a3b8;font-variant-numeric:tabular-nums}
.df-mono{font-family:ui-monospace,Menlo,monospace;font-weight:800;font-size:11.5px}
.df-deal{font-weight:800;color:var(--el-tree-ink,#04231d)}
.df-strong{font-weight:800;font-variant-numeric:tabular-nums}
.df-sub{font-size:10.5px;color:#94a3b8;line-height:1.5}
.df-terms-v{font-size:12.5px;font-weight:800;color:var(--el-em-700,#047857);font-variant-numeric:tabular-nums}
.df-profit{font-weight:800;color:var(--el-em-700,#047857);font-variant-numeric:tabular-nums}
/* «بانتظار الإقفال» كهرماني: حالة معلّقة تنتظر قراراً — لا خطأ ولا نجاح */
.df-pending{font-size:11px;color:var(--warningDark,#b45309);font-weight:700}
.df-out{font-weight:900;font-size:13px;color:var(--el-teal-800,#014034);font-variant-numeric:tabular-nums}
.df-out-late{font-weight:900;font-size:13px;color:var(--dangerDark,#b91c1c);font-variant-numeric:tabular-nums}
.df-out-zero{font-weight:800;color:#94a3b8;font-variant-numeric:tabular-nums}
.df-date{font-weight:700;color:var(--el-ta-700,#5c6f68)}
.df-late{font-weight:800;color:var(--dangerDark,#b91c1c)}
.df-dash{color:#cbd5e1}
.df-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:800}
.df-pill-late{color:var(--dangerDark,#b91c1c);background:var(--dangerBg,#fef2f2)}
.df-pill-capital{color:var(--el-teal-800,#014034);background:var(--el-em-50,#ecfdf5)}
.df-pill-profit{color:var(--el-em-700,#047857);background:var(--el-em-100,#d1fae5)}
.df-pill-live{color:var(--el-em-700,#047857);background:var(--el-em-50,#ecfdf5)}
.df-pill-void{color:#64748b;background:#f1f5f4}
.df-voided{text-decoration:line-through;opacity:.6}
.df-row-void{opacity:.62}
.df-orphan{font-size:11px;color:var(--dangerDark,#b91c1c);font-weight:700}
.df-nolink{font-size:10.5px;color:var(--warningDark,#b45309);font-weight:700;cursor:help}
.df-note-open{color:var(--el-em-700,#047857);font-weight:800}
.df-del{color:var(--dangerDark,#b91c1c)}
.df-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;
  background:var(--el-em-50,#ecfdf5);border:1px solid var(--el-em-100,#d1fae5);
  border-radius:11px;padding:12px 14px;margin-bottom:10px}
.df-sum>div span{display:block;font-size:10.5px;color:var(--el-ta-700,#5c6f68);font-weight:700}
.df-sum>div b{display:block;font-size:14px;color:var(--el-tree-ink,#04231d);font-weight:900;
  margin-top:2px;font-variant-numeric:tabular-nums}
.df-sum-t b{color:var(--el-em-700,#047857)}
.df-empty{text-align:center;padding:44px 20px;color:var(--el-ta-700,#5c6f68)}
.df-empty-ic{font-size:42px}
.df-empty h3{margin:10px 0 4px;font-size:15px;font-weight:800;color:var(--el-teal-800,#014034)}
.df-empty p{margin:0;font-size:12.5px;line-height:1.85;max-width:64ch;margin-inline:auto}
.df-empty-acts{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.df-fatal{padding:20px;color:var(--dangerDark,#b91c1c);font-weight:700;line-height:1.8}
.df-modal-sub{font-size:11.5px;opacity:.85;margin-top:3px}
.df-ro-note{background:var(--el-em-50,#ecfdf5);border:1px dashed var(--el-em-300,#6ee7b7);
  border-radius:9px;padding:9px 12px;margin-bottom:12px;font-size:11.5px;
  color:var(--el-em-700,#047857);line-height:1.7}
.df-cur{font-size:10.5px;color:#94a3b8;font-weight:700}
.df-sep{border-top:1px dashed var(--el-em-100,#d1fae5);padding-top:12px;margin-top:4px}
/* بطاقات لا قائمة منسدلة: الفرق بين أشكال العائد قرار مالي يُقرأ كاملاً قبل اختياره */
.df-rt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(198px,1fr));gap:8px;margin-top:6px}
.df-rt{display:flex;flex-direction:column;gap:3px;padding:10px 12px;position:relative;
  border:1.5px solid var(--el-em-100,#d1fae5);border-radius:10px;background:#fff;cursor:pointer;
  transition:border-color .18s,background .18s}
.df-rt:hover{border-color:var(--el-em-300,#6ee7b7)}
.df-rt.sel{border-color:var(--el-em-700,#047857);background:var(--el-em-50,#ecfdf5)}
.df-rt input{position:absolute;opacity:0;pointer-events:none}
.df-rt-ic{font-size:19px;line-height:1}
.df-rt-t{font-size:12.5px;font-weight:800;color:var(--el-tree-ink,#04231d)}
.df-rt-h{font-size:10.5px;color:var(--el-ta-700,#5c6f68);line-height:1.6}
.df-preview{background:var(--el-em-50,#ecfdf5);border:1px solid var(--el-em-200,#a7f3d0);
  border-radius:10px;padding:12px 14px}
.df-preview-t{font-size:12px;font-weight:800;color:var(--el-teal-800,#014034);margin-bottom:8px}
.df-preview-rows>div{display:flex;justify-content:space-between;align-items:baseline;
  padding:4px 0;font-size:12.5px;color:var(--el-ta-700,#5c6f68)}
.df-preview-rows>div b{color:var(--el-tree-ink,#04231d);font-weight:800;font-variant-numeric:tabular-nums}
.df-preview-tot{border-top:1px dashed var(--el-em-300,#6ee7b7);margin-top:4px;padding-top:8px!important}
.df-preview-tot b{font-size:14px;color:var(--el-em-700,#047857)}
.df-preview-note{margin-top:8px;font-size:11px;color:var(--warningDark,#78350f);
  background:var(--warningBg,#fffbeb);border:1px dashed #fcd34d;border-radius:7px;padding:6px 9px}
.df-payout-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  background:var(--el-em-50,#ecfdf5);border:1px solid var(--el-em-200,#a7f3d0);
  border-radius:10px;padding:11px 13px;margin-bottom:14px}
.df-payout-head span{display:block;font-size:10.5px;color:var(--el-ta-700,#5c6f68);font-weight:700}
.df-payout-head b{display:block;font-size:13px;color:var(--el-tree-ink,#04231d);font-weight:800;
  margin-top:2px;font-variant-numeric:tabular-nums}
.df-stmt-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.df-stmt-name{font-size:13.5px;font-weight:700;color:var(--el-teal-800,#014034)}
.df-stmt-note{background:var(--warningBg,#fffbeb);border:1px dashed #fcd34d;border-radius:8px;
  padding:8px 11px;margin-bottom:10px;font-size:11.5px;color:var(--warningDark,#78350f);line-height:1.7}
.df-stmt .df-cr{color:var(--el-em-700,#047857);font-weight:700;font-variant-numeric:tabular-nums}
.df-stmt .df-dr{color:var(--warningDark,#b45309);font-weight:700;font-variant-numeric:tabular-nums}

/* ═══ 👥 v818 — لوحة اختيار الموظفين (نطاق السجل/المسير) — تتشاركها شاشتا
   ملخص الحضور ومسير الرواتب. توكنز الهوية حصراً (ARTTOP_BRAND_COLORS.md). ═══ */
.emp-pick-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; font-size: 12px; color: var(--el-ink, #0f172a);
  background: var(--el-tree-l1, #ecfdf5);
  border: 1px solid var(--el-line, #d6e5df); border-bottom: 0;
  border-radius: 9px 9px 0 0;
}
.emp-pick-bar .emp-pick-tools { margin-inline-start: auto; display: inline-flex; gap: 6px; }
.emp-pick-search {
  flex: 1 1 130px; min-width: 110px; max-width: 220px;
  font-size: 12px; padding: 4px 9px;
  border: 1px solid var(--el-line, #d6e5df); border-radius: 7px;
  background: #fff; color: var(--el-ink, #0f172a);
}
.emp-pick-search:focus { outline: 2px solid var(--el-emerald, #10b981); outline-offset: 0; }
/* v958 — داخل حقل عمودي (.form-field) لا يتمدّد صندوق البحث ليملأ ارتفاع صفّ الشبكة (كان flex:1 1 130px يصنع صناديق فارغة ضخمة فوق القوائم) */
.form-field > .emp-pick-search { flex: 0 0 auto; max-width: none; width: 100%; box-sizing: border-box; }
/* v958 — قاعدة 56: الشبكة المخفيّة بالسمة تُخفى فعلاً (display:grid كان يغلب hidden) */
.form-grid[hidden] { display: none !important; }
.emp-pick-list {
  max-height: 190px; overflow: auto;
  border: 1px solid var(--el-line, #d6e5df); border-radius: 0 0 9px 9px;
  background: #fff;
}
.emp-pick-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 12.5px; cursor: pointer;
  border-bottom: 1px solid var(--el-tree-l2, #f0fdf7);
}
.emp-pick-item:last-child { border-bottom: 0; }
/* 🐛 v819 — display:flex يغلب سمة hidden الافتراضية فيبقى المُخفى بالبحث
   ظاهراً — القاعدة المؤلّفة يجب أن تعيد إخفاءه صراحةً (لا تُرى إلا بالرسم). */
.emp-pick-item[hidden] { display: none; }
.emp-pick-item:hover { background: var(--el-tree-l1, #ecfdf5); }
.emp-pick-item .emp-pick-name { font-weight: 600; }
.emp-pick-item .emp-pick-code { font-size: 10.5px; color: #64748b; }
.emp-pick-item.is-covered { opacity: .62; cursor: default; }
.emp-pick-item .emp-pick-covered {
  margin-inline-start: auto; font-size:10.5px; color: #92400e;
  background: #fef3c7; border-radius: 6px; padding: 1px 7px; white-space: nowrap;
}
.emp-pick-empty { padding: 14px; text-align: center; font-size: 12px; color: #64748b; }

/* ═══ 🏠 v826 — بوابة الموظف ═══ */
.ep-kpi { display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.14); border-radius:10px; padding:8px 13px; min-width:120px; }
.ep-kpi-i { font-size: var(--ep-t1); }
.ep-kpi-l { font-size: var(--ep-t4); opacity:.9; }
.ep-kpi-v { font-size: var(--ep-t1); font-weight:900; }
.ep-newbtn { background:#ecfdf5; border:1.5px solid #a7f3d0; color:#065f46; border-radius:10px; padding:9px 14px; font-weight:800; font-size: var(--ep-t3); cursor:pointer; transition:all .15s; }
.ep-newbtn:not([disabled]):hover { background:#d1fae5; transform:translateY(-1px); }
.ep-approve-card { display:flex; justify-content:space-between; align-items:center; gap:10px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:9px 12px; margin-bottom:7px; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   🔐 v849 — المستخدمون والصلاحيات (team_users.js + permissions.js)
   الهوية Emerald Ledger. **والدلالي يحمل معنى لا زينة**: الكهرماني للإجراء
   الخطر (حذف · تدقيق · اعتماد) والأزرق للاستثناء فوق الدور والرمادي للموقوف.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── التبويبات ── */
.tm-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.tm-tab { display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:10px;
  border:1px solid var(--border,#e2e8f0); background:#fff; color:#475569; cursor:pointer;
  font-size:13px; font-weight:600; transition:.15s; }
.tm-tab .pm-ico { flex:0 0 auto; opacity:.8; }
.tm-tab.is-on .pm-ico { opacity:1; }
.tm-tab:hover { border-color:var(--el-em-700,#047857); color:var(--el-teal-800,#014034); }
.tm-tab.is-on { background:linear-gradient(135deg,var(--el-teal-800,#014034),var(--el-em-700,#047857)); color:#fff; border-color:var(--el-teal-800,#014034); }
.tm-tab-n { font-style:normal; font-size:11px; padding:1px 6px; border-radius:20px;
  background:rgba(0,0,0,.08); font-variant-numeric:tabular-nums; }
.tm-tab.is-on .tm-tab-n { background:rgba(255,255,255,.22); }

/* ── لافتات الحالة ── */
.tm-note, .tm-warn { padding:13px 15px; font-size:13px; line-height:1.75; }
.tm-note > strong, .tm-warn > strong { display:inline-flex; align-items:center; gap:7px; }
.tm-note-on  { border-inline-start:4px solid var(--el-em-700,#047857); }
.tm-note-off { border-inline-start:4px solid var(--warning,#f59e0b); }
.tm-warn     { border-inline-start:4px solid var(--warning,#f59e0b); background:#fffbeb; }
.tm-alert { margin-top:10px; padding:10px 12px; border-radius:9px; font-size:12.5px; line-height:1.7;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tm-alert-warn { background:var(--warningBg,#fef3c7); color:var(--warningDark,#92400e); border:1px solid #fcd34d; }
.tm-alert-info { background:var(--el-em-50,#ecfdf5); color:var(--el-em-800,#065f46); border:1px solid var(--el-em-200,#a7f3d0); }
.tm-hint { font-size:12px; color:#64748b; font-weight:400; }

/* ── بطاقات المستخدمين والأدوار ── */
.tm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; padding:2px; }
.tm-card { background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:12px; padding:14px;
  display:flex; flex-direction:column; gap:9px; transition:.15s; }
.tm-card:hover { border-color:var(--el-em-700,#047857); box-shadow:0 3px 14px rgba(1,64,52,.09); }
.tm-card.is-off { opacity:.62; background:#f8fafc; }
.tm-card-top { display:flex; align-items:center; gap:10px; }
.tm-avatar { width:40px; height:40px; flex:0 0 40px; border-radius:11px; display:grid; place-items:center;
  background:var(--el-em-50,#ecfdf5); border:1px solid var(--el-em-200,#a7f3d0);
  color:var(--el-em-800,#065f46); }
.tm-idn { min-width:0; flex:1; display:flex; flex-direction:column; }
.tm-idn strong { font-size:14px; color:#0f172a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-mail { font-size:11.5px; color:#64748b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-flags { display:flex; gap:4px; flex-wrap:wrap; }
.tm-you { font-size:10.5px; padding:2px 7px; border-radius:20px; background:var(--el-em-50,#ecfdf5); color:var(--el-em-800,#065f46); border:1px solid var(--el-em-200,#a7f3d0); }
/* 🏢 v864 — مبدّل مساحات العمل: المساحة الحالية */
.tm-card.is-current { border-color:var(--el-em-700,#047857); background:var(--el-em-50,#ecfdf5); }
button.tm-card { font:inherit; color:inherit; width:100%; }
.tm-badge { font-size:10.5px; padding:2px 7px; border-radius:20px; background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }
.tm-badge-off  { background:#f1f5f9; color:#64748b; }
.tm-badge-wait { background:var(--warningBg,#fef3c7); color:var(--warningDark,#92400e); border-color:#fcd34d; }
.tm-badge-custom { background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }
.tm-role { font-size:13px; font-weight:700; color:var(--el-teal-800,#014034); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.tm-emp { display:flex; align-items:center; gap:5px; font-size:12px; color:#475569; }
.tm-role-desc { font-size:12.5px; color:#475569; line-height:1.65; }
.tm-role-stat { display:flex; align-items:center; gap:5px; font-size:12px; color:#64748b; font-variant-numeric:tabular-nums; }

/* ── «ماذا يستطيع؟» — الملخّص المقروء ── */
.tm-sum { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.tm-sum li { font-size:12px; line-height:1.6; padding:4px 9px; border-radius:6px; border-inline-start:3px solid transparent; }
.tm-sum-all   { background:var(--el-em-50,#ecfdf5); color:var(--el-em-800,#065f46); border-inline-start-color:var(--el-em-700,#047857); font-weight:600; }
.tm-sum-read  { background:#f8fafc; color:#475569; border-inline-start-color:#94a3b8; }
.tm-sum-write { background:var(--el-em-50,#ecfdf5); color:var(--el-em-800,#065f46); border-inline-start-color:var(--el-em-500,#10b981); }
.tm-sum-risky { background:#fffbeb; color:var(--warningDark,#92400e); border-inline-start-color:var(--warning,#f59e0b); }
.tm-sum-ceil  { background:#eff6ff; color:#1e40af; border-inline-start-color:var(--info,#3b82f6); font-variant-numeric:tabular-nums; }
.tm-sum-none  { background:var(--dangerBg,#fef2f2); color:var(--dangerDark,#991b1b); border-inline-start-color:var(--danger,#dc2626); }
.tm-sum-more  { color:#94a3b8; font-size:11.5px; }
.tm-card-acts { display:flex; gap:5px; flex-wrap:wrap; margin-top:auto; padding-top:6px; border-top:1px solid #f1f5f9; }
/* ── 👥 v960 — بطاقة المستخدم: شريط الحالة · خريطة الوحدات · أزرار الحالة بكلمات · بحث وفلاتر ── */
.tm-card[hidden] { display: none !important; }                       /* قاعدة 56 */
.tm-state { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; padding:5px 10px; border-radius:8px; margin:-4px -4px 0; }
.tm-state-dot { width:8px; height:8px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.tm-state-ok   { background:var(--el-em-50,#ecfdf5); color:var(--el-em-800,#065f46); }
.tm-state-ok .tm-state-dot { box-shadow:0 0 0 3px rgba(16,185,129,.18); }
.tm-state-wait { background:var(--warningBg,#fef3c7); color:var(--warningDark,#92400e); }
.tm-state-bad  { background:var(--dangerBg,#fef2f2); color:var(--dangerDark,#991b1b); }
.tm-state-off  { background:#f1f5f9; color:#64748b; }
.tm-card-online .tm-state-dot { animation: tmPulse 1.6s ease-in-out infinite; }
@keyframes tmPulse { 0%,100% { box-shadow:0 0 0 0 rgba(16,185,129,.45); } 50% { box-shadow:0 0 0 6px rgba(16,185,129,0); } }
@media (prefers-reduced-motion: reduce) { .tm-card-online .tm-state-dot { animation:none; } }
.tm-mods { border:1px solid #e2e8f0; border-radius:10px; padding:8px 10px; background:#fbfdfc; display:flex; flex-direction:column; gap:7px; }
.tm-mods-h { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11.5px; font-weight:800; color:var(--el-teal-800,#014034); }
.tm-mods-h span { display:inline-flex; align-items:center; gap:5px; }
.tm-mods-h em { font-style:normal; font-size:11px; color:#64748b; font-variant-numeric:tabular-nums; }
.tm-mods-row { display:flex; flex-wrap:wrap; gap:5px; }
.tm-mod { position:relative; display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:96px; padding:5px 9px 6px; border-radius:9px; border:1px solid #e2e8f0; background:#fff; cursor:pointer; text-align:start; font:inherit; transition:border-color .14s, transform .14s; }
.tm-mod:hover { border-color:var(--el-em-500,#10b981); transform:translateY(-1px); }
.tm-mod-nm { font-size:11.5px; font-weight:800; color:#0f172a; line-height:1.3; }
.tm-mod-n { font-style:normal; font-size:10.5px; font-weight:800; color:#64748b; font-variant-numeric:tabular-nums; }
.tm-mod-bar { display:block; width:100%; height:3px; border-radius:3px; background:#e2e8f0; overflow:hidden; }
.tm-mod-bar b { display:block; height:100%; background:currentColor; }
.tm-mod-read  { color:#64748b; } .tm-mod-read .tm-mod-nm { color:#475569; }
.tm-mod-write { color:var(--el-em-500,#10b981); border-color:#a7f3d0; background:var(--el-em-50,#ecfdf5); }
.tm-mod-risky { color:var(--warning,#f59e0b); border-color:#fcd34d; background:#fffbeb; }
.tm-mod-none  { color:#94a3b8; }
.tm-mod-rest  { cursor:default; justify-content:center; font-size:11px; font-weight:700; color:#94a3b8; border-style:dashed; }
.tm-mod-rest:hover { transform:none; border-color:#e2e8f0; }
.tm-mods-legend { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:10.5px; color:#64748b; }
.tm-mods-legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-inline-end:4px; vertical-align:-1px; background:currentColor; }
.tm-btn-activate { background:linear-gradient(135deg,var(--el-em-700,#047857),var(--el-em-500,#10b981)) !important; color:#fff !important; border:0 !important; font-weight:900 !important; box-shadow:0 3px 10px rgba(4,120,87,.28); }
.tm-btn-suspend  { color:var(--warningDark,#92400e) !important; border-color:#fcd34d !important; background:#fffbeb !important; }
.tm-btn-suspend:hover { background:var(--warningBg,#fef3c7) !important; }
.tm-users-tools { padding:0 !important; margin-bottom:12px; }
.tm-users-kpis { grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
.tm-users-bar .tm-search { flex:1 1 260px; }
.tm-select { padding:8px 10px; border:1px solid #e2e8f0; border-radius:10px; font:inherit; font-size:13px; background:#fff; color:#0f172a; }
.tm-select:focus { outline:2px solid var(--el-em-500,#10b981); outline-offset:1px; border-color:transparent; }

/* ── شرائح الإجراءات في بطاقة الدور ── */
.tm-chips { display:flex; flex-wrap:wrap; gap:4px; }
.tm-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:3px 9px; border-radius:20px; background:#f0fdf4; color:var(--el-em-800,#065f46); border:1px solid #bbf7d0; }
.tm-chip.is-risky { background:#fffbeb; color:var(--warningDark,#92400e); border-color:#fcd34d; }
.tm-chip-none { background:#f1f5f9; color:#94a3b8; border-color:#e2e8f0; }

/* ── منتقي الدور في المودال ── */
/* منتقي الدور — بطاقات لا أزرار: الأيقونة أعلى والاسم تحتها، والمختار يحمل ✓ */
.tm-rolepick { display:grid; grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); gap:8px; }
.tm-rolebtn { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 8px 10px; border-radius:11px; cursor:pointer; text-align:center;
  border:1.5px solid var(--border,#e2e8f0); background:#fff; transition:.15s; }
.tm-rolebtn:hover { border-color:var(--el-em-500,#10b981); background:var(--el-em-50,#ecfdf5);
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(1,64,52,.08); }
.tm-rolebtn.is-on { border-color:var(--el-em-700,#047857); background:var(--el-em-50,#ecfdf5);
  box-shadow:0 0 0 2px rgba(4,120,87,.16); }
.tm-rolebtn-ic { display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:#f1f5f9; color:#475569; transition:.15s; }
.tm-rolebtn:hover .tm-rolebtn-ic { background:#fff; color:var(--el-em-700,#047857); }
.tm-rolebtn.is-on .tm-rolebtn-ic { background:var(--el-em-700,#047857); color:#fff; }
.tm-rolebtn-nm { font-size:11.5px; font-weight:700; color:#0f172a; line-height:1.35; }
.tm-rolebtn-tick { position:absolute; inset-block-start:5px; inset-inline-end:5px;
  color:var(--el-em-700,#047857); opacity:0; transition:.15s; }
.tm-rolebtn.is-on .tm-rolebtn-tick { opacity:1; }
.tm-roledesc { margin-top:9px; font-size:12px; color:#475569; line-height:1.7; min-height:18px;
  padding-inline-start:9px; border-inline-start:2px solid var(--el-em-200,#a7f3d0); }
/* مفتاح التفعيل */
.tm-switch { display:flex; align-items:flex-start; gap:9px; padding:11px 13px; border-radius:10px;
  background:#f8fafc; border:1px solid var(--border,#e2e8f0); margin-top:12px; cursor:pointer; }
.tm-switch input { width:16px; height:16px; margin-top:2px; accent-color:var(--el-em-700,#047857); flex:0 0 auto; }
.tm-switch-txt { display:flex; flex-direction:column; gap:2px; }
.tm-switch-txt strong { font-size:12.5px; font-weight:700; color:#0f172a; }
.tm-switch-txt small { font-size:11.5px; color:#64748b; line-height:1.6; }
/* لوحة «ماذا سيستطيع؟» */
.tm-preview-box { margin-top:4px; padding:12px 13px; border-radius:11px;
  background:linear-gradient(180deg,var(--el-em-50,#ecfdf5),#fff);
  border:1px solid var(--el-em-200,#a7f3d0); display:flex; flex-direction:column; gap:8px; }
.tm-preview-box > strong { display:flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--el-teal-800,#014034); }

/* أقسام المودال */
.tm-sec { background:#fff; border:1px solid var(--border,#e2e8f0); }
.modal-body .tm-sec > h4 { color:var(--el-teal-800,#014034); }
.tm-sec-hint { margin-inline-start:auto; font-size:11px; font-weight:500; color:#94a3b8; }
/* ترويسة المودال */
.tm-head { align-items:center; gap:11px; }
.tm-head-ic { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px;
  border-radius:11px; background:rgba(255,255,255,.16); color:#fff;
  border:1px solid rgba(255,255,255,.24); }
.tm-head-txt { min-width:0; }
.tm-head-txt h3 { margin:0; }
.tm-head-sub { font-size:11.5px; opacity:.82; margin-top:1px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
/* زرّ يحمل أيقونة */
.tm-btn { display:inline-flex; align-items:center; gap:6px; }
.tm-btn-ico { padding-inline:9px; }
.tm-foot-gap { flex:1; }
/* الأيقونة لا تتقلّص ولا تُزاح في RTL */
.pm-ico { flex:0 0 auto; vertical-align:-2px; }

/* ── المصفوفة ── */
.tm-matrix-body { max-height:66vh; overflow:auto; }
.tm-matrix-wrap { overflow:auto; max-height:52vh; }
.tm-matrix th, .tm-matrix td { text-align:center; font-size:11.5px; padding:5px 4px; }
.tm-mx-ic { display:grid; place-items:center; margin-bottom:2px; }
.tm-audit thead th { white-space:nowrap; }
.tm-audit thead th .pm-ico { vertical-align:-3px; margin-inline-end:4px; }
.tm-scr-em { display:inline-flex; align-items:center; margin-inline-end:5px; vertical-align:-2px; color:#64748b; }
.pm-ico-em { font-size:13px; line-height:1; }
.tm-matrix th.is-risky { background:#fffbeb; color:var(--warningDark,#92400e); }
.tm-matrix .tm-mx-first { text-align:start; font-size:12px; white-space:nowrap;
  position:sticky; inset-inline-start:0; background:#fff; z-index:2; padding-inline:10px; }
.tm-matrix thead th { position:sticky; top:0; background:#f8fafc; z-index:3; }
.tm-matrix thead th.tm-mx-first { z-index:4; }
.tm-matrix tr.tm-grp td { background:var(--el-em-50,#ecfdf5); font-weight:700; color:var(--el-teal-800,#014034); font-size:12px; }
.tm-matrix tr.tm-grp .tm-mx-first { background:var(--el-em-50,#ecfdf5); }
.tm-mx-all { border:none; background:transparent; cursor:pointer; color:var(--el-em-700,#047857); font-size:12px; padding:1px 4px; border-radius:4px; }
.tm-mx-all:hover { background:rgba(4,120,87,.12); }
.tm-mx-cb { width:16px; height:16px; accent-color:var(--el-em-700,#047857); cursor:pointer; }
/* الاستثناء فوق الدور يُعلَّم — فيرى المدير ما غيّره لا ما هو مُعلَّم فقط */
.tm-mx-cb.is-changed { accent-color:var(--info,#2563eb); outline:2px solid #93c5fd; outline-offset:1px; border-radius:3px; }

/* ── «من يستطيع ماذا» ── */
.tm-audit tr.tm-grp td { background:var(--el-em-50,#ecfdf5); font-weight:700; color:var(--el-teal-800,#014034); }
.tm-audit .tm-scr { white-space:nowrap; font-size:12.5px; }
.tm-who { display:inline-block; font-size:11px; padding:2px 7px; margin:1px; border-radius:20px;
  background:#fffbeb; color:var(--warningDark,#92400e); border:1px solid #fcd34d; }
.tm-none { color:#cbd5e1; text-align:center; }

/* ── 👁️ شريط المعاينة ── */
#permPreviewBar > strong { display:inline-flex; align-items:center; gap:6px; }
#permPreviewBar { position:fixed; inset-inline:0; bottom:var(--statusbar-h,32px); z-index:2000;
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  padding:8px 16px; font-size:13px; color:#fff;
  background:linear-gradient(135deg,#78350f,#b45309); box-shadow:0 -3px 14px rgba(0,0,0,.22); }
#permPreviewBar span { opacity:.86; font-size:12px; }
#permPreviewBar button { border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.14);
  color:#fff; padding:4px 13px; border-radius:7px; cursor:pointer; font-size:12px; font-weight:600; }
#permPreviewBar button:hover { background:rgba(255,255,255,.26); }
/* ── 🛟 v1250 · جلسةُ الدعم المدعوّة: شريطُ التبويب وستارُ الانتهاء (support_session.js) ── */
#supportSessionBar > strong { display:inline-flex; align-items:center; gap:6px; }
#supportSessionBar { position:fixed; inset-inline:0; bottom:var(--statusbar-h,32px); z-index:2000;
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  padding:8px 16px; font-size:13px; color:#fff;
  background:var(--el-grad-hero, linear-gradient(135deg,#014034,#047857)); box-shadow:0 -3px 14px rgba(0,0,0,.22); }
#supportSessionBar span { opacity:.9; font-size:12px; }
#supportSessionBar button { border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.14);
  color:#fff; padding:4px 13px; border-radius:7px; cursor:pointer; font-size:12px; font-weight:600; }
#supportSessionBar button:hover { background:rgba(255,255,255,.26); }
#supportSessionBar button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
#supportSessionEnded { position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center;
  padding:16px; background:var(--el-teal-950,#012a22); }
#supportSessionEnded > div { max-width:440px; width:100%; background:#fff; border-radius:16px; padding:24px 22px; text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.35); }
#supportSessionEnded h2 { margin:0 0 8px; font-size:18px; color:var(--el-teal-900,#013328); }
#supportSessionEnded p { margin:0 0 16px; font-size:13.5px; line-height:1.9; color:#334155; }
/* في تبويب جلسة الدعم: قناةُ الدعم لصاحب الحساب في تبويبه الأصلي — لا من هنا */
html.support-session [data-action="support"] { display:none !important; }
/* ⚡ v1304 — «دردشة الدعم الفورية» (assets/support_channel.js): نقطةُ غير المقروء على زرّ المستخدم · عدّادُ «بانتظار ردّك»
   في القائمة ولوحة المالك · وسطرُ «متصل الآن» أعلى النافذة. الأحمرُ والأخضرُ دلاليّان (قاعدة 5) لا طلاءُ هوية. */
html.support-session [data-action="support-owner"], html.support-session #supDot { display:none !important; }
#userMenuBtn { position:relative; }
.sup-dot { position:absolute; top:-2px; inset-inline-end:0; min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  background:#dc2626; color:#fff; font-size:10.5px; font-weight:800; line-height:16px; text-align:center;
  font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px #fff; pointer-events:none; }
.sup-dot[hidden] { display:none; }
.sup-count { display:inline-block; margin-inline-start:auto; min-width:18px; padding:1px 6px; border-radius:10px;
  background:#dc2626; color:#fff; font-size:11px; font-weight:800; line-height:1.5; text-align:center; font-variant-numeric:tabular-nums; }
.sup-count[hidden] { display:none; }
.sup-live { display:flex; align-items:center; gap:8px; padding:8px 16px; font-size:12px; font-weight:700; color:#475569;
  background:#f8fafc; border-bottom:1px solid #e2e8f0; }
.sup-live[hidden] { display:none; }
.sup-live-dot { flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:#94a3b8; }
.sup-live-dot.is-on { background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.18); }
/* المعاينة **لا تكتب**: كل ما يحفظ أو يحذف يُعطَّل بصرياً كذلك */
body.perm-previewing .btn-primary,
body.perm-previewing [data-rec-act="delete"],
body.perm-previewing [type="submit"] { opacity:.45; pointer-events:none; }
/* ── v852: منتقي أيقونة الدور (بلاطات أصغر · نفس بطاقات الدور) ── */
.tm-icopick { grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); gap:6px; }
.tm-icopick .tm-rolebtn { padding:7px 4px 6px; gap:0; border-radius:9px; }
.tm-icopick .tm-rolebtn-ic { width:30px; height:30px; border-radius:8px; }
.tm-icopick .tm-rolebtn-tick { inset-block-start:3px; inset-inline-end:3px; }
/* الدور المخصّص يُعرَف بشريط أزرق هادئ (الاستثناء فوق المشحون) */
.tm-role-card.is-custom { border-inline-start:3px solid var(--info,#3b82f6); }
.tm-card-acts .btn[disabled] { opacity:.45; cursor:not-allowed; }
/* 🔐 v1127 — زرّ قرارٍ في سلاسل اعتماد الموارد البشرية مقفولٌ بسببه (تلميحه يقول لماذا): يبدو مقفولاً — كان يبدو نافذاً ولا يفعل
   شيئاً لأن البرنامج لا يعرّف مظهراً عامّاً للزرّ المعطَّل (والنمط المحلّي هنا نفسه لبطاقات الأدوار) */
.btn[data-decide][disabled] { opacity:.45; cursor:not-allowed; filter:grayscale(.35); }
/* 🧭 v1140 — «بوابتي» تُفتح لكل من رُبطت بطاقتُه بملفّه، وما لا يملكه فيها (طلبٌ جديد · تصحيح) يُرى مقفولاً بسببه · ومثله «طبّق الأثر» */
.ep-newbtn[disabled], .btn[data-ep-fix][disabled], .btn[data-apply-effect][disabled] { opacity:.45; cursor:not-allowed; filter:grayscale(.35); }
/* ── v853: التفويض المؤقّت ── */
.tm-badge-dlg { display:inline-flex; align-items:center; gap:4px; background:var(--el-em-50,#ecfdf5); color:var(--el-em-800,#065f46); border-color:var(--el-em-200,#a7f3d0); }
.tm-sum-dlg   { background:var(--el-em-50,#ecfdf5); color:var(--el-em-800,#065f46); border-inline-start-color:var(--el-em-600,#059669); font-weight:600; }
/* ── v855: بطاقة الفرض الخادمي ── */
.tm-srv-stats { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.tm-srv-log th, .tm-srv-log td { font-size:11.5px; padding:5px 8px; }
/* ═══ نهاية كتلة v849 ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   🔐📐 v865 — حوكمة الأدوار الافتراضية + السلّم الطباعي لشاشة الصلاحيات ومودالاتها
   النطاق `.tm-scope` (الشاشة) و`.tm-modal` (المستخدم · الدور · المصفوفة · الملف الشخصي · التأكيد)
   كي لا يُصيب بقية البرنامج. ستّ درجات على أرضية 4px، **لا نصّ يُقرأ كجملة تحت 13px**،
   12px للوسوم والعدّادات فقط (700 · أرقام جدولية). الوزن للعربية 700/900 (Tajawal بلا 800 —
   أي 800 يُعرض 900) وللإنجليزية 600/800 عبر html[lang=en]. الألوان من --el-* حصراً.
   ═══════════════════════════════════════════════════════════════════════════ */
.tm-scope, .tm-modal {
  --tm-fs-display: 22px;  /* هيرو */
  --tm-fs-title: 18px;    /* عنوان المودال */
  --tm-fs-h: 15px;        /* عنوان القسم · اسم البطاقة */
  --tm-fs-ui: 15px;       /* الحقول والقوائم */
  --tm-fs-label: 13.5px;  /* تسمية الحقل */
  --tm-fs-body: 13.5px;   /* الجُمل: مساعدة · وصف · «ماذا يستطيع» · التلميح */
  --tm-fs-tag: 12px;      /* الوسوم والعدّادات فقط */
  --tm-ctl-h: 42px;
  --tm-muted: #475569;    /* 7.4:1 على الأبيض — لا #64748b/#6b7280 للجُمل */
  --section-accent2: var(--el-em-500, #10b981);   /* شريط القسم الجانبي لا ينتهي بالأزرق الافتراضي */
}
/* ── الرأس والهيرو: اللون من الرمز لا من literal ── */
.tm-hero { background: var(--el-grad-hero) !important; }
.tm-scope .defs-hero h2 { font-size: var(--tm-fs-display); font-weight: 900; line-height: 1.25; }
.tm-scope .defs-hero p { font-size: 14px; font-weight: 500; }
.tm-scope .defs-hero-actions .btn { font-size: 14px; min-height: 40px; }
.tm-modal .modal-header.tm-head { background: var(--el-grad-hero); padding: 14px 20px; min-height: 64px; }
.tm-modal .tm-head-ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); }
.tm-modal .modal-header h3 { font-size: var(--tm-fs-title); font-weight: 900; line-height: 1.25; }
.tm-modal .tm-head-sub { font-size: 13px; font-weight: 500; opacity: .9; margin-top: 2px; }
.tm-head-chip { background: rgba(255,255,255,.18) !important; color: #fff !important; border-color: rgba(255,255,255,.35) !important;
  font-size: var(--tm-fs-tag); font-weight: 700; margin-inline-end: 6px; flex: 0 0 auto; }
.tm-modal .modal-close { width: 36px; height: 36px; }
html[lang=en] .tm-scope .defs-hero h2, html[lang=en] .tm-modal .modal-header h3 { font-weight: 800; }
/* ── الجسم: لا هالة زرقاء تحت مودال زمردي ── */
.tm-modal .modal-body { background: #fff !important; padding: 18px 20px 22px; }
.tm-modal .emp-section.tm-sec { padding: 16px; margin-bottom: 14px; }
.tm-modal .modal-body .emp-section > h4 { font-size: var(--tm-fs-h); font-weight: 700; letter-spacing: 0; padding-bottom: 10px !important; }
html[lang=en] .tm-modal .modal-body .emp-section > h4 { font-weight: 700; }
.tm-modal .tm-sec-hint { font-size: var(--tm-fs-body); font-weight: 500; color: var(--tm-muted); }
/* الحقول — بخصوصية تغلب `.emp-section .form-field input {12px}` و`.modal-body .form-field input` */
.tm-modal .modal-body .form-field label { font-size: var(--tm-fs-label); font-weight: 700; color: #0f172a; }
.tm-modal .modal-body .emp-section .form-field input,
.tm-modal .modal-body .emp-section .form-field select,
.tm-modal .modal-body .emp-section .form-field textarea,
.tm-modal .modal-body .form-field input,
.tm-modal .modal-body .form-field select {
  font-size: var(--tm-fs-ui); font-weight: 500; padding: 9px 12px; min-height: var(--tm-ctl-h); line-height: 1.4;
  border-radius: 9px; color: #0f172a;
}
.tm-modal .modal-body .form-field input[dir="ltr"] { font-variant-numeric: tabular-nums; }
/* حلقة التركيز زمردية — تغلب `#3b82f6 !important` في 2755 بخصوصية أعلى وأهمية */
.tm-modal .modal-body .form-field input:focus,
.tm-modal .modal-body .form-field select:focus,
.tm-modal .modal-body .form-field textarea:focus {
  border-color: var(--el-em-600, #059669) !important;
  box-shadow: 0 0 0 3px rgba(5,150,105,.14) !important;
}
.tm-modal .modal-body .form-help, .tm-modal .modal-body .emp-section .form-help { font-size: 12.5px; line-height: 1.6; color: var(--tm-muted); }
.tm-modal .tm-alert { font-size: var(--tm-fs-body); line-height: 1.7; }
.tm-modal .tm-preview-box > strong { font-size: var(--tm-fs-label); }
.tm-modal .tm-sum li { font-size: 13px; line-height: 1.6; }
.tm-modal .tm-roledesc { font-size: var(--tm-fs-body); color: var(--tm-muted); }
.tm-modal .tm-rolebtn-nm { font-size: 12.5px; }
.tm-modal .tm-switch-txt strong { font-size: var(--tm-fs-label); }
.tm-modal .tm-switch-txt small { font-size: 12.5px; color: var(--tm-muted); }
.tm-modal .tm-hint { font-size: var(--tm-fs-body); color: var(--tm-muted); }
.tm-modal .modal-footer .btn { font-size: 14px; min-height: 40px; }
.tm-modal .modal-footer .btn-primary { font-weight: 700; }
.tm-body { font-size: var(--tm-fs-body); line-height: 1.7; color: #0f172a; }
.tm-row-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.tm-empty-line { padding: 8px 4px 2px; }
/* شريط الأقسام اللاصق داخل المودال (يُعاد استعمال .defs-secnav) */
.tm-modal .defs-secnav.tm-rail { padding: 8px 16px; gap: 8px; }
.tm-modal .defs-secnav-chip { font-size: 12.5px; font-weight: 700; padding: 6px 14px; }
.tm-modal .defs-secnav-chip.active { background: var(--el-em-700, #047857); border-color: var(--el-em-700, #047857); }
/* منتقي الأيقونة خلف زرّ */
.tm-ico-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tm-ico-cur { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: var(--el-em-50, #ecfdf5); color: var(--el-em-700, #047857); border: 1px solid var(--el-em-200, #a7f3d0); flex: 0 0 40px; }
.tm-ico-row .form-help { flex: 1 1 200px; }
.tm-icopick[hidden] { display: none !important; }
#tmrIcons { margin-top: 10px; }
/* قائمة «ما الذي غيّرته عن الأصل» — الدلالي: زمردي مضاف · أحمر منزوع */
.tm-delta { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #f8fafc; border: 1px solid var(--border, #e2e8f0); }
.tm-delta > strong { display: flex; align-items: center; gap: 6px; font-size: var(--tm-fs-label); color: #0f172a; margin-bottom: 8px; }
.tm-delta ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 12px; }
.tm-delta li { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.6; padding: 4px 8px; border-radius: 6px; }
.tm-delta li b { width: 16px; text-align: center; font-weight: 900; }
.tm-delta li.is-add { background: var(--el-em-50, #ecfdf5); color: var(--el-em-800, #065f46); }
.tm-delta li.is-rm { background: var(--dangerBg, #fef2f2); color: var(--dangerDark, #991b1b); }
.tm-delta li .pm-ico { color: currentColor; opacity: .8; }
/* ── الشاشة: مجموعات الأدوار وشاراتها ── */
.tm-scope .tm-hint { font-size: var(--tm-fs-body); color: var(--tm-muted); }
.tm-scope .tm-idn strong { font-size: var(--tm-fs-h); font-weight: 700; }
.tm-scope .tm-mail { font-size: 13px; }
.tm-scope .tm-role-desc { font-size: var(--tm-fs-body); color: var(--tm-muted); }
.tm-scope .tm-role-stat { font-size: 13px; display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: center; }
.tm-scope .tm-badge, .tm-scope .tm-you, .tm-scope .tm-chip, .tm-scope .tm-tab-n { font-size: var(--tm-fs-tag); font-weight: 700; font-variant-numeric: tabular-nums; }
.tm-scope .tm-sum li { font-size: 13px; }
.tm-scope .tm-note, .tm-scope .tm-warn, .tm-scope .tm-alert { font-size: var(--tm-fs-body); }
.tm-scope .tm-tab { font-size: 14px; }
.tm-scope .tm-matrix th, .tm-scope .tm-matrix td, .tm-modal .tm-matrix th, .tm-modal .tm-matrix td { font-size: 12.5px; }
.tm-scope .tm-matrix .tm-mx-first, .tm-modal .tm-matrix .tm-mx-first { font-size: 13px; }
.tm-scope .tm-audit .tm-scr { font-size: 13px; }
.tm-scope .tm-who { font-size: var(--tm-fs-tag); }
.tm-sec-group { display: flex; align-items: center; gap: 7px; margin: 16px 2px 8px; font-size: var(--tm-fs-h); font-weight: 700; color: var(--el-teal-800, #014034); }
.tm-sec-group .tm-tab-n { background: var(--el-em-50, #ecfdf5); color: var(--el-em-800, #065f46); border: 1px solid var(--el-em-200, #a7f3d0); font-style: normal; padding: 1px 8px; border-radius: 20px; }
.tm-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--tm-fs-body); color: var(--tm-muted); cursor: pointer; user-select: none; }
.tm-toggle input { accent-color: var(--el-em-700, #047857); width: 15px; height: 15px; }
.tm-badge-mod { background: var(--el-em-50, #ecfdf5); color: var(--el-em-800, #065f46); border-color: var(--el-em-200, #a7f3d0); }
.tm-badge-hidden { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; text-decoration: line-through; }
.tm-badge-lock { background: var(--el-teal-800, #014034); color: #fff; border-color: var(--el-teal-800, #014034); }
.tm-role-card.is-mod { border-inline-start: 3px solid var(--el-em-500, #10b981); }
.tm-role-card.is-hidden { opacity: .62; background: #f8fafc; }
.tm-delta-n { font-size: var(--tm-fs-tag); font-weight: 700; padding: 1px 8px; border-radius: 20px;
  background: var(--el-em-50, #ecfdf5); color: var(--el-em-800, #065f46); border: 1px solid var(--el-em-200, #a7f3d0); }
.tm-stale { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 0; }
.tm-stale span { flex: 1 1 200px; }
.tm-lock-note { display: inline-flex; align-items: center; gap: 4px; font-size: var(--tm-fs-tag) !important; }
.tm-btn-restore { border-color: var(--el-em-700, #047857); color: var(--el-em-700, #047857); }
.tm-btn-restore:hover { background: var(--el-em-50, #ecfdf5); }
.tm-rolebtn-hid { font-size: 11px; font-weight: 700; color: #64748b; text-decoration: line-through; }
/* ── لوحة التأكيد ── */
.tm-confirm { max-width: 480px; }
.tm-confirm.is-danger .modal-header.tm-head { background: linear-gradient(135deg, var(--dangerDark, #991b1b), var(--danger, #dc2626)); }
.tm-confirm-body { font-size: var(--tm-fs-body); line-height: 1.8; color: #0f172a; }
.tm-confirm-names { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
/* ── 🗂️ v1095 «احذف المكرّر»: خطّة لكل بريد — تبقى · تُؤرشَف · معلَّقة بسببها المكتوب ── */
.tm-confirm.tm-confirm-wide { max-width: 640px; }
.tm-dd-lead { margin: 0 0 6px; }
.tm-dd-grp { margin-top: 10px; padding: 9px 11px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.tm-dd-grp.is-held { border-color: #fcd34d; background: var(--warningBg, #fef3c7); }
.tm-dd-mail { font-size: 13px; font-weight: 800; color: var(--el-teal-800, #014034); }
.tm-dd-why { display: flex; align-items: flex-start; gap: 6px; margin: 5px 0 2px; font-size: 12.5px; line-height: 1.7; color: var(--warningDark, #92400e); }
.tm-dd-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
.tm-dd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; line-height: 1.6; }
.tm-dd-act { font-size: 11.5px; font-weight: 800; padding: 1px 9px; border-radius: 20px; border: 1px solid transparent; }
.tm-dd-act.is-keep { background: var(--el-em-50, #ecfdf5); color: var(--el-em-800, #065f46); border-color: var(--el-em-200, #a7f3d0); }
.tm-dd-act.is-arch { background: var(--dangerBg, #fef2f2); color: var(--dangerDark, #991b1b); border-color: #fecaca; }
.tm-dd-act.is-held { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.tm-dd-name { font-weight: 700; color: #0f172a; }
.tm-dd-meta { font-size: 12px; color: var(--tm-muted, #475569); }
/* ── الملف الشخصي (app.js) ── */
.pf-avatar-row { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 4px 0 16px; }
.pf-avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--el-em-50, #ecfdf5); color: var(--el-teal-800, #014034); font-size: 36px; font-weight: 900;
  border: 3px solid var(--el-em-200, #a7f3d0); box-shadow: 0 6px 18px rgba(1,64,52,.14); }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-avatar-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pf-avatar-acts .btn { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.pf-avatar-acts > [hidden] { display: none !important; }   /* 🖼️ v1350 — قاعدة 56: `.btn` يعلن display فكانت سمةُ hidden لا تُخفي «حذف الصورة» */
.pf-divider { border-top: 1px dashed var(--border, #e2e8f0); margin: 16px 0; }
.pf-readonly { background: #f1f5f9 !important; cursor: not-allowed; color: var(--tm-muted); }
/* ── الحركة والتركيز ── */
.tm-scope .btn:focus-visible, .tm-modal .btn:focus-visible, .tm-scope .tm-rolebtn:focus-visible, .tm-modal .tm-rolebtn:focus-visible,
.tm-scope .tm-tab:focus-visible { outline: 2px solid var(--el-em-600, #059669); outline-offset: 2px; }
@media (max-width: 768px) {
  .tm-scope, .tm-modal { --tm-fs-ui: 16px; }   /* منع تكبير iOS (درس v794) */
}
@media (prefers-reduced-motion: reduce) {
  .tm-modal { animation: none; }
}
/* أصناف كانت تُستعمل منذ v849 **بلا تعريف** (قاعدة 11 — كشفها ماسح الأصناف): تُعرَّف هنا مرّة واحدة */
.btn-danger-ghost { background: transparent; color: var(--danger, #dc2626); border: 1px solid #fecaca; }
.btn-danger-ghost:hover:not([disabled]) { background: var(--dangerBg, #fef2f2); border-color: var(--danger, #dc2626); }
.btn-ghost-hero { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.45); }
.btn-ghost-hero:hover { background: rgba(255,255,255,.24); }
.tm-mx-cell { text-align: center; }
.tm-ico-field { padding-top: 2px; }
/* ⏸️/⏱️ v869 — الإيقاف المؤقّت وسطر التواجد على بطاقة المستخدم */
.tm-badge-susp { background: var(--warningBg, #fef3c7); color: var(--warningDark, #92400e); border-color: #fcd34d; }
.tm-seen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: #64748b; }
.tm-seen span { display: inline-flex; align-items: center; gap: 4px; }
.tm-stamp { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
/* 🟢 v871 — «متصل الآن»: نقطة خضراء تنبض — لون دلاليّ (حضور) لا هوية */
.tm-online { color: var(--el-em-700, #047857); font-weight: 700; }
.tm-online-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block;
  box-shadow: 0 0 0 3px rgba(34,197,94,.18); animation: tmPulse 2s ease-in-out infinite; }
@keyframes tmPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .tm-online-dot { animation: none; } }
.tm-seen .pm-ico { opacity: .75; }
.tm-seen-dot { opacity: .5; }
/* 🏢 v1237 — «في هذه المنشأة»: مدى الرقمين يُقال بجانبهما لا في الكود وحده (قاعدة 32).
   11px هو الحدّ الأدنى المسموح (قاعدة 73) — ولا يُكتب أصغر منه. */
.tm-seen-scope { font-size: 11px; opacity: .72; font-weight: 600; }
/* 🔐 v869 — لافتة «خرجتَ آلياً بعد الخمول» في شاشة الدخول */
.login-idle-note {
  margin: 0 0 14px; padding: 11px 14px; border-radius: 10px;
  background: var(--warningBg, #fef3c7); color: var(--warningDark, #92400e);
  border: 1px solid #fcd34d; font-size: 13.5px; line-height: 1.75; font-weight: 500;
}
.login-idle-note[hidden] { display: none !important; }
/* v866 — 🖼️ صورة المستخدم على بطاقة الصلاحيات (من ملفّ الموظف المرتبط · أو صورة حسابي) */
.tm-avatar-face { overflow: hidden; padding: 0; background: var(--el-em-50, #ecfdf5); }
.tm-face { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-face-init { font-size: 17px; font-weight: 900; color: var(--el-teal-800, #014034); line-height: 1; }
/* v866 — اسم المنشأة في هيرو الصلاحيات (البطاقات لكل منشأة) */
.tm-hero-co { font-weight: 500; opacity: .85; font-size: .8em; }
/* ═══ نهاية كتلة v865 ═══ */


/* ═══ v0.37.9.876 — الشريط العلوي: لوجو أصغر · كل المجموعات ظاهرة · اللغة تحت
   «تثبيت» · شعار المنشأة على بياض ═══════════════════════════════════════════
   طلبات المالك بلقطة عرض كروم 100%. القواعد هنا في آخر الملفّ عمداً فتغلب
   قواعد v715/718/724 السابقة بلا حذفها (تبقى مرجعاً للتاريخ). */

/* ① لوجو البرنامج أصغر */
body.topnav-mode .brand-mini-img { height: 24px; width: auto; }

/* ② المجموعات: خطّ أصغر يقوده مقياس top_nav.js حتى تتّسع كلها في السطر */
body.topnav-mode .at-tn-btn {
  font-size: var(--at-tn-fs, 12.5px);
  padding: 7px var(--at-tn-pad, 8px);
  gap: 4px;
}
body.topnav-mode .at-tn-btn.active { padding: 7px calc(var(--at-tn-pad, 8px) + 3px); }
body.topnav-mode .at-tn-caret { font-size: 10.5px; opacity: .85; }
body.topnav-mode .at-topnav { gap: 1px; padding: 0 2px; }

/* ③ v877 — عنقود الأدوات سطرٌ واحد: جرس · لغة · شعار المنشأة (طلب المالك) */
body.topnav-mode .at-hdr-row { gap: 6px; }
body.topnav-mode .at-hdr-row #appLangToggle {
  padding: 4px 9px !important; font-size: 11.5px !important; min-height: 26px;
}

/* ④ رقاقة شعار المنشأة النشطة — بيضاء دائماً كي لا يذوب شعارٌ بألوان هويتنا */
/* 🏢 v877 — الشعار بارتفاع الشريط كاملاً (طلب المالك): 60px هي `--header-h`،
   فيبقى هامشٌ رفيع أعلى وأسفل كي لا يلامس حدّ الشريط. العرض تلقائي فيحترم
   نسبة الشعار مهما كانت (طولي أو عرضي) بحدٍّ أدنى يمنع الرقاقة من الانكماش. */
body.topnav-mode .at-co-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(var(--header-h, 60px) - 8px); min-width: 52px; width: auto;
  padding: 3px 5px; flex: 0 0 auto;
  background: #ffffff; border: 1px solid rgba(255,255,255,.55); border-radius: 7px;
  cursor: pointer; overflow: hidden; line-height: 1;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.18); box-shadow: 0 1px 3px rgba(0,0,0,.18);
  -webkit-transition: -webkit-transform .16s ease; transition: transform .16s ease;
}
body.topnav-mode .at-co-chip:hover { -webkit-transform: translateY(-1px); transform: translateY(-1px); }
body.topnav-mode .at-co-chip img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;
  -o-object-fit: contain; object-fit: contain;
}
body.topnav-mode .at-co-chip .at-co-chip-ini {
  font-size: 22px; font-weight: 900; color: #014034; line-height: 1;
}
body.topnav-mode .at-co-chip:focus-visible { outline: 2px solid #6ee7b7; outline-offset: 2px; }

/* الشاشات الأضيق: الرقاقة والصفّ الثاني يبقيان، والخطّ يهبط بالمقياس نفسه */
@media (max-width: 1180px) {
  body.topnav-mode .brand-mini-img { height: 21px; }
  body.topnav-mode .at-co-chip { height: calc(var(--header-h, 60px) - 14px); min-width: 44px; }
}

/* ⑤ v876 — «تثبيت» في الشريط السفلي: الشريط داكن والزرّ كان بأنماط inline فاتحة
   (index.html) فيلزم !important لتجاوزها. ويُخفى في الأعلى فلا يظهر مرّتين. */
body.topnav-mode .app-header #pwaInstallBtn { display: none !important; }
#pspStatusBar #pwaInstallBtn {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(110,231,183,.45) !important;
  color: #d1fae5 !important;
  border-radius: 6px !important;
  padding: 2px 9px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
  min-height: 0 !important;
  /* 🩹 v877 — بلا التفاف: الطرف مزدحم (تثبيت · الحقوق · الإصدار)، فكان نصّ
     الزرّ ينكسر سطرين فيصير ارتفاعه 43px داخل شريط 32px ويطفح. */
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  -webkit-box-shadow: none !important; box-shadow: none !important;
}
#pspStatusBar #pwaInstallBtn:hover { background: rgba(16,185,129,.32) !important; }
#pspStatusBar #pwaInstallBtn.hidden { display: none !important; }

/* ⑥ v877 — بطاقة المستخدم: الاسم وما تحته ألصق بالصورة (طلب المالك) */
body.topnav-mode .user-menu-btn { gap: 5px; padding: 3px 5px; }
body.topnav-mode .user-menu-btn .user-info { line-height: 1.15; }
body.topnav-mode #userName { font-size: 12.5px; line-height: 1.2; }
body.topnav-mode #userRole { font-size: 10.5px; line-height: 1.2; }
body.topnav-mode #acHeaderCompany { margin-top: 0 !important; font-size: 10.5px !important; }

/* ═══ v0.37.9.879 — تبويب «بوابة الموظف» في شاشة المستخدمين والصلاحيات ═══
   قاعدة 11: كل صنف هنا معرَّف — لا اختراع أصناف. والألوان من اللوحة (--el-*)
   عدا الدلالي (أحمر النقص · كهرماني الانتظار · أخضر التفعيل) فهو حُكم لا هوية. */
.tm-portal-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; padding: 12px 14px 4px;
}
.tm-pk {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer; text-align: start;
  background: #f8fafc; border: 1px solid #e2e8f0; transition: border-color .16s ease, background .16s ease;
}
.tm-pk:hover { background: #f1f5f9; }
.tm-pk.is-on { border-color: var(--el-emerald, #10b981); background: #ecfdf5; }
.tm-pk em { font-style: normal; font-weight: 900; font-size: 20px; color: var(--el-teal, #014034); font-variant-numeric: tabular-nums; }
.tm-pk span { font-size: 11.5px; color: #64748b; font-weight: 700; }
.tm-pk-ok em   { color: #047857; }
.tm-pk-bad em  { color: #b91c1c; }
.tm-pk-wait em { color: #b45309; }

.tm-portal-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px 12px; }
.tm-search {
  flex: 1 1 240px; min-width: 180px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid #e2e8f0; font-family: inherit; font-size: 13px; background: #fff;
}
.tm-search:focus { outline: 2px solid var(--el-emerald, #10b981); outline-offset: 1px; border-color: transparent; }

.tm-emp-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tm-emp-code { font-size: 11px; color: #94a3b8; font-weight: 800; font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.tm-emp-name { font-weight: 700; font-size: 13px; color: #0f172a; }
.tm-emp-noemail { color: #b91c1c; font-size: 12px; font-weight: 700; }
.tm-emp-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.tm-badge-ok  { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.tm-badge-bad { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* 👤 v879 — شاشة «حسابك جاهز» لحساب بوابة الموظف قبل اكتمال شاشاتها */
.portal-pending {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #013229 0%, #014034 46%, #01543f 100%); padding: 20px;
}
.portal-pending-card {
  background: #fff; border-radius: 18px; padding: 30px 26px; max-width: 460px; width: 100%;
  text-align: center; -webkit-box-shadow: 0 20px 60px rgba(1,50,41,.35); box-shadow: 0 20px 60px rgba(1,50,41,.35);
}
.portal-pending-logo { height: 34px; width: auto; margin-bottom: 14px; }
.portal-pending-card h2 { margin: 0 0 6px; font-size: 20px; color: #014034; font-weight: 900; }
.portal-pending-name { margin: 0 0 14px; font-weight: 800; color: #047857; font-size: 14px; }
.portal-pending-card p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.9; color: #475569; }
.portal-pending-note { font-size: 12.5px !important; color: #64748b !important; }
.portal-pending-card .btn { margin-top: 8px; }

/* ═══ v0.37.9.880 — بوابة الموظف (assets/portal_ui.js) ═══════════════════
   شاشة قائمة بذاتها: لا قائمة جانبية ولا شريط علوي — الموظف ليس عضو مساحة
   عمل. قاعدة 11: كل صنف هنا معرَّف. والألوان من لوحة Emerald Ledger. */
body.portal-mode .app-shell, body.portal-mode .app-header,
body.portal-mode #sidebar, body.portal-mode #pspStatusBar { display: none !important; }
body.portal-mode { background: #f1f5f9; }

/* 🎚️ v1172 — سلّمُ الخطّ في البوابة أربع درجات لا اثنتا عشرة (بلاغ المالك:
   «أشكالهم ضعيفة جداً وليست احترافية»). القياس قبل التصميم (قاعدة 115): كانت
   شاشةُ «ملفّي» تحمل **سبعة** أحجام خطّ وشاشةُ «إجازاتي» سبعةً — وهذا بعينه ما
   يجعل الواجهة تُقرأ رخيصةً لا الألوان. فصار لكل نصٍّ درجةٌ من أربع، وكلُّ قاعدة
   في البوابة تأخذ حجمها من هذه المتغيّرات لا برقمٍ مكتوب. */
.ep-root {
  --ep-t1: 20px; --ep-t2: 15px; --ep-t3: 13px; --ep-t4: 11.5px;
  --ep-gap: 12px; --ep-pad: 14px; --ep-r: 14px;
  --ep-ink: #0f172a; --ep-ink-2: #475569; --ep-ink-3: #94a3b8;
  --ep-line: #e2e8f0; --ep-brand: #014034; --ep-brand-2: #047857;
  position: fixed; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #f1f5f9; z-index: 8500; padding-bottom: 28px;
}
.ep-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; color: #fff;
  background: linear-gradient(135deg, #013229 0%, #014034 46%, #01543f 100%);
}
.ep-head-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ep-avatar {
  width: 44px; height: 44px; border-radius: 12px; overflow: hidden; flex: 0 0 auto;
  background: #fff; color: #014034; font-weight: 900; font-size: var(--ep-t1);
  display: flex; align-items: center; justify-content: center;
}
.ep-avatar img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.ep-head-txt { display: flex; flex-direction: column; min-width: 0; }
.ep-head-txt strong { font-size: var(--ep-t2); font-weight: 800; }
.ep-head-txt span { font-size: var(--ep-t4); color: #99f6e4; }
.ep-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* v1182 ⑧ — يلتفّ على الجوّال بدل تمريرٍ أفقي */
.ep-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); color: #f1f5f9;
  font-family: inherit; font-size: var(--ep-t3); font-weight: 700; cursor: pointer;
}
.ep-btn-ghost:hover { background: rgba(255,255,255,.22); }

/* 🗂️ v1272 — شريطُ التبويبات (طلب المالك «تحديث شكل التبويب»): كان صفَّ بطاقاتٍ متلاصقة بحافّةٍ علوية فيُقرأ
   ملفّاتٍ مكدّسة — صار شريطاً واحداً بمجموعاتٍ بمعناها تفصلها خطوطٌ رفيعة: المختارُ مملوءٌ بلون الهوية والبقيّةُ نصٌّ
   هادئ، يلتصق أعلى الصفحة عند التمرير ويُمرَّر أفقياً على الجوّال بلا شريط تمرير. والارتفاعُ صريحٌ لا حشوة (قاعدة 115). */
.ep-tabs {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  margin: 12px 14px 0; padding: 6px; border-radius: var(--ep-r, 14px);
  background: #fff; border: 1px solid var(--ep-line, #e2e8f0);
  -webkit-box-shadow: 0 6px 18px rgba(1,64,52,.07); box-shadow: 0 6px 18px rgba(1,64,52,.07);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ep-tabs::-webkit-scrollbar { display: none; }
.ep-tabgrp { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ep-tabgrp + .ep-tabgrp { padding-inline-start: 6px; border-inline-start: 1px solid var(--ep-line, #e2e8f0); }
.ep-tab {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; height: 38px; padding: 0 13px;
  border: 0; border-radius: 10px; background: transparent; color: var(--ep-ink-2, #475569);
  font-family: inherit; font-size: var(--ep-t3); font-weight: 700; white-space: nowrap; cursor: pointer;
  -webkit-transition: background-color .15s ease, color .15s ease; transition: background-color .15s ease, color .15s ease;
}
.ep-tab:hover { background: #f1f5f9; color: var(--ep-brand, #014034); }
.ep-tab:focus-visible { outline: 2px solid var(--el-emerald, #10b981); outline-offset: 2px; }
.ep-tab.is-on {
  background: var(--ep-brand, #014034); color: #fff;
  -webkit-box-shadow: 0 4px 12px rgba(1,64,52,.24); box-shadow: 0 4px 12px rgba(1,64,52,.24);
}
.ep-tab.is-on .pm-ico { color: #a7f3d0; }
.ep-tab.is-on .ep-tab-n { background: #fff; color: var(--ep-brand, #014034); }
@media (prefers-reduced-motion: reduce) { .ep-tab { -webkit-transition: none; transition: none; } }
@media (max-width: 560px) { .ep-tabs { margin: 10px 10px 0; } .ep-tab { padding: 0 11px; } }   /* الارتفاعُ 38 يبقى: حدُّ اللمس العامّ للأزرار على الجوّال */

/* 🔔 v1272 — جرسُ التنبيهات ولوحتُه (طلب المالك): الجرسُ بجوار أزرار الرأس بشارةٍ حمراء للجديد، واللوحةُ تنسدل
   تحت الرأس فوق الشريط الملتصق — كلُّ تنبيهٍ بلونٍ دلاليّ (أخضر · كهرماني · أحمر · أزرق المعلومة) لا بلون الهوية */
.ep-head { position: relative; }
.ep-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 34px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); color: #f1f5f9;
}
.ep-bell:hover { background: rgba(255,255,255,.22); }
.ep-bell:focus-visible { outline: 2px solid #a7f3d0; outline-offset: 2px; }
.ep-bell.has-new { color: #fff; }
.ep-bell-n {
  position: absolute; top: -7px; inset-inline-end: -7px; min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 20px; border: 2px solid #014034; background: #dc2626; color: #fff;
  font-style: normal; font-size: var(--ep-t4); font-weight: 900; font-variant-numeric: tabular-nums;
}
.ep-bellpanel {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 14px; z-index: 60;
  width: 380px; max-width: calc(100vw - 28px); max-height: 70vh; overflow-y: auto;
  background: #fff; color: var(--ep-ink, #0f172a); border: 1px solid var(--ep-line, #e2e8f0); border-radius: var(--ep-r, 14px);
  -webkit-box-shadow: 0 18px 44px rgba(15,23,42,.22); box-shadow: 0 18px 44px rgba(15,23,42,.22);
}
.ep-bellpanel-hd { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--ep-line, #e2e8f0); }
.ep-bellpanel-hd strong { font-size: var(--ep-t2); color: var(--ep-brand, #014034); }
.ep-bellpanel-list { display: flex; flex-direction: column; gap: 2px; padding: 6px; }
.ep-bellpanel-empty { display: flex; align-items: center; gap: 8px; padding: 18px 14px; color: var(--ep-ink-2, #475569); font-size: var(--ep-t3); }
.ep-nt {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; text-align: start; cursor: pointer; font-family: inherit;
}
.ep-nt:hover { background: #f8fafc; }
.ep-nt:focus-visible { outline: 2px solid var(--el-emerald, #10b981); outline-offset: 1px; }
.ep-nt-i { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9; color: #475569; }
.ep-nt-ok .ep-nt-i { background: #ecfdf5; color: #047857; }
.ep-nt-wait .ep-nt-i { background: #fef3c7; color: #92400e; }
.ep-nt-bad .ep-nt-i { background: #fef2f2; color: #b91c1c; }
.ep-nt-info .ep-nt-i { background: #eff6ff; color: #1d4ed8; }
.ep-nt-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ep-nt-txt b { font-size: var(--ep-t3); color: var(--ep-ink, #0f172a); font-weight: 800; }
.ep-nt-txt small { font-size: var(--ep-t4); color: var(--ep-ink-2, #475569); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-nt-when { font-size: var(--ep-t4); color: var(--ep-ink-3, #94a3b8); }
.ep-nt.is-new .ep-nt-txt b::after {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #dc2626; margin-inline-start: 6px; vertical-align: middle;
}

/* 📋 v1272 — تصفيةُ المهامّ بعدّاداتها · والمتأخّرةُ بحافّةٍ حمراء · والمقصودةُ من تنبيهٍ مُبرَزة */
.ep-tfilters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ep-tfilter {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 20px;
  border: 1px solid var(--ep-line, #e2e8f0); background: #fff; color: var(--ep-ink-2, #475569);
  font-family: inherit; font-size: var(--ep-t3); font-weight: 700; cursor: pointer;
}
.ep-tfilter em {
  font-style: normal; font-size: var(--ep-t4); font-weight: 900; min-width: 18px; padding: 1px 6px;
  border-radius: 20px; background: #f1f5f9; color: var(--ep-ink-2, #475569); text-align: center;
}
.ep-tfilter.is-on { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.ep-tfilter.is-on em { background: #047857; color: #fff; }
.ep-tfilter:focus-visible { outline: 2px solid var(--el-emerald, #10b981); outline-offset: 2px; }
.ep-task.is-over { border-inline-start: 4px solid #dc2626; }
.ep-task.is-focus { -webkit-box-shadow: 0 0 0 3px rgba(16,185,129,.35); box-shadow: 0 0 0 3px rgba(16,185,129,.35); }

.ep-body { padding: 0 14px; }
.ep-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px;
  margin-top: 12px; -webkit-box-shadow: 0 1px 3px rgba(15,23,42,.05); box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.ep-empty { display: flex; align-items: center; gap: 10px; color: #64748b; font-size: var(--ep-t3); }
.ep-empty p { margin: 0; }
.ep-dash { color: #cbd5e1; }
.ep-late { color: #b45309; font-weight: 700; }
.ep-note { margin: 12px 0 0; font-size: var(--ep-t4); color: #94a3b8; line-height: 1.8; }

.ep-punch { text-align: center; }
.ep-punch-day { font-size: var(--ep-t3); color: #64748b; font-weight: 700; margin-bottom: 12px; }
.ep-punch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.ep-punch-cell {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 6px;
  display: flex; flex-direction: column; gap: 3px;
}
.ep-punch-cell span { font-size: var(--ep-t4); color: #94a3b8; font-weight: 700; }
.ep-punch-cell strong { font-size: var(--ep-t1); color: #0f172a; font-variant-numeric: tabular-nums; }
.ep-punch-cell.is-set { background: #ecfdf5; border-color: #a7f3d0; }
.ep-punch-cell.is-set strong { color: #047857; }
.ep-punch-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; max-width: 340px; padding: 16px 20px; border-radius: 14px; border: none;
  background: linear-gradient(135deg, #047857, #10b981); color: #fff;
  font-family: inherit; font-size: var(--ep-t1); font-weight: 900; cursor: pointer;
  -webkit-box-shadow: 0 6px 18px rgba(4,120,87,.28); box-shadow: 0 6px 18px rgba(4,120,87,.28);
}
.ep-punch-btn:hover { -webkit-transform: translateY(-1px); transform: translateY(-1px); }
.ep-punch-btn:disabled { opacity: .6; cursor: default; -webkit-transform: none; transform: none; }
.ep-punch-btn.is-out { background: linear-gradient(135deg, #b45309, #d97706); -webkit-box-shadow: 0 6px 18px rgba(180,83,9,.26); box-shadow: 0 6px 18px rgba(180,83,9,.26); }
.ep-punch-done { display: inline-flex; align-items: center; gap: 8px; color: #047857; font-weight: 800; font-size: var(--ep-t3); }

/* 🧩 v1180 — مُعدِّلا `.ep-card` كانا مكتوبَين في markup البوابة **بلا أي قاعدة**
   (قاعدة 11): إخوتُهما `ep-slips` و`ep-slip-top` و`ep-month-hd` معرَّفون، وهذان
   وحدهما بلا أثر — فبطاقةُ الشهر وبطاقةُ القسيمة تُرسَمان بلا تمييزٍ عمّا حولهما. */
.ep-month { padding-block: 12px; }
.ep-slip { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ep-slips { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ep-slip-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ep-slip-top strong { font-size: var(--ep-t2); color: #014034; }
.ep-slip-net {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
}
.ep-slip-net span { font-size: var(--ep-t3); color: #065f46; font-weight: 700; }
.ep-slip-net strong { font-size: var(--ep-t1); color: #047857; font-variant-numeric: tabular-nums; }
.ep-slip-rows { display: flex; flex-direction: column; gap: 5px; }
.ep-slip-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--ep-t3); color: #475569; }
.ep-slip-row span { color: #94a3b8; }

.ep-chip { font-size: var(--ep-t4); padding: 2px 9px; border-radius: 20px; font-weight: 800; border: 1px solid; }
.ep-chip-ok   { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.ep-chip-wait { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.ep-chip-bad  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.ep-chip-off  { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
/* v1189 — نوعُ اليوم في سجلّ الحضور: الأزرقُ الدلالي للإجازات والاستئذان · وصفُّ يوم الراحة مُخفَّت */
.ep-chip-info { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ep-table tr.ep-row-off td { color: #64748b; background: #fafafa; }
.ep-table td.ep-note-cell { max-width: 220px; white-space: normal; font-size: var(--ep-t4); color: #475569; }

@media (max-width: 560px) {
  .ep-punch-grid { grid-template-columns: 1fr; }
  .ep-head { padding: 12px 14px; }
  .ep-body { padding: 0 10px; }
}

/* v881 — سطر «سُجّل حضورك الساعة …» فوق زرّ الانصراف */
.ep-punch-said {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 10px;
  padding: 8px 14px; color: #047857; font-size: var(--ep-t3); font-weight: 700;
}
.ep-punch-done span { font-weight: 800; }

/* v882 — صورة البطاقة في مودال المستخدم + تأكيد البصمة + أفاتار تبويب البوابة */
.tm-photo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tm-photo-prev {
  width: 56px; height: 56px; border-radius: 14px; overflow: hidden; flex: 0 0 auto;
  background: #ecfdf5; color: #014034; font-weight: 900; font-size: 22px;
  display: flex; align-items: center; justify-content: center; border: 1px solid #a7f3d0;
}
.tm-photo-prev img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.tm-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
/* v1089 — توقيع المستخدم في بطاقته: معاينة عريضة على خلفية شطرنجية تُظهر شفافية الصورة */
.tm-sig-prev {
  width: 220px; height: 84px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; padding: 4px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px dashed #a7f3d0; color: #64748b; font-size: 12px; font-weight: 700; line-height: 1.5;
  background: repeating-conic-gradient(#f6faf8 0% 25%, #eef2f0 0% 50%) 50% / 16px 16px;
}
.tm-sig-prev img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; }

.ep-avatar { position: relative; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.ep-avatar-edit {
  position: absolute; inset-inline-end: -3px; bottom: -3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--el-emerald, #10b981); color: #fff;
  display: flex; align-items: center; justify-content: center;
}

.ep-confirm {
  position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center;
  background: rgba(1, 50, 41, .55); padding: 18px;
}
.ep-confirm-card {
  background: #fff; border-radius: 18px; padding: 24px 22px; max-width: 380px; width: 100%; text-align: center;
  -webkit-box-shadow: 0 20px 60px rgba(1,50,41,.35); box-shadow: 0 20px 60px rgba(1,50,41,.35);
}
.ep-confirm-icon {
  width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 12px; color: #047857;
  background: #ecfdf5; display: flex; align-items: center; justify-content: center;
}
/* 🚦 v1168 — اتجاهُ البصمة لونٌ **دلاليّ** مقرَّر (v1065): دخولٌ زمرديّ · خروجٌ أزرق.
   وصارت نافذةُ التأكيد واحدةً للبرنامج والبوابة، فحملت اللونَ المقرَّر بدل الكهرماني. */
.ep-confirm-icon.is-out { background: #dbeafe; color: #3b82f6; }
.ep-confirm-card h3 { margin: 0 0 14px; font-size: var(--ep-t1); color: #014034; font-weight: 900; }
.ep-confirm-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ep-confirm-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--ep-t3); }
.ep-confirm-rows span { color: #94a3b8; font-weight: 700; }
.ep-confirm-rows strong { color: #0f172a; font-variant-numeric: tabular-nums; }
/* v1165 — حكمُ الموقع في تأكيد البصمة: أخضرُ داخل النطاق وأحمرُ خارجه أو بلا موقع */
.ep-confirm-good { margin: 8px 0 2px; padding: 8px 12px; border-radius: 10px; font-size: var(--ep-t3); font-weight: 800;
  background: var(--el-em-50, #ecfdf5); color: var(--el-em-800, #065f46); border: 1px solid var(--el-em-200, #a7f3d0); }
.ep-confirm-bad { margin: 8px 0 2px; padding: 8px 12px; border-radius: 10px; font-size: var(--ep-t3); font-weight: 800;
  background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
/* السمة وحدها لا تُخفي صنفاً يُعلن display (قاعدة 56) — حقلُ خطأ نافذة التأكيد يبدأ مخفيّاً */
.ep-confirm-bad[hidden] { display: none !important; }
.ep-confirm-yes[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.ep-confirm-note { margin: 0 0 16px; font-size: var(--ep-t4); color: #94a3b8; line-height: 1.7; }
.ep-confirm-actions { display: flex; gap: 8px; }
.ep-confirm-no, .ep-confirm-yes {
  flex: 1; padding: 12px; border-radius: 11px; font-family: inherit; font-size: var(--ep-t2); font-weight: 800; cursor: pointer;
}
.ep-confirm-no { background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; }
.ep-confirm-yes { background: linear-gradient(135deg, #047857, #10b981); border: none; color: #fff; }
.ep-confirm-yes.is-out { background: linear-gradient(135deg, #3b82f6, #6366f1); }

.tm-emp-face {
  width: 30px; height: 30px; border-radius: 9px; overflow: hidden; flex: 0 0 auto;
  background: #ecfdf5; color: #014034; font-weight: 900; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.tm-emp-face img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.tm-emp-wrap { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tm-archived-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 12.5px; color: #64748b; }

/* v882 — قفل صورة الموظف في مودّاله */
.emp-photo-lock {
  display: flex; align-items: center; gap: 7px; margin-top: 8px;
  font-size: 11.5px; color: #64748b; cursor: pointer;
}
.emp-photo-lock input { width: auto; margin: 0; }

/* v883 — مبدّل المنشأة في ترويسة البوابة */
.ep-co-sel {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26); color: #f1f5f9;
  border-radius: 9px; padding: 6px 10px; font-family: inherit; font-size: var(--ep-t3); font-weight: 700;
  max-width: 190px; cursor: pointer;
}
.ep-co-sel option { color: #0f172a; }

/* v884 — مودال الإيقاف: خيار المدّة وتسمية الحقل الإلزامي */
.tm-radio {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; margin-bottom: 8px;
  border: 1px solid #e2e8f0; border-radius: 11px; cursor: pointer; background: #fff;
}
.tm-radio:hover { background: #f8fafc; }
.tm-radio input { width: auto; margin: 2px 0 0; flex: 0 0 auto; }
.tm-radio span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-radio strong { font-size: 13.5px; color: #0f172a; font-weight: 800; }
.tm-radio small { font-size: 11.5px; color: #94a3b8; line-height: 1.6; }
.req-field-lbl { display: inline-flex; align-items: center; gap: 4px; }

/* v884 — شاشة الموظف الموقوف/المنتهية خدمته: تشرح بدل خطأ بلا معنى */
.portal-pending-state {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 800;
  background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
}
.portal-pending-state.is-off { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* ═══ v885 — طلبات البوابة وطابور الاعتماد ═══ */
.ep-tab-n {
  font-style: normal; font-size: var(--ep-t4); font-weight: 900; min-width: 17px; text-align: center;
  background: var(--el-emerald, #10b981); color: #fff; border-radius: 20px; padding: 1px 5px;
}
.ep-reqbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0 0; }
.ep-btn-new {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 11px; border: none;
  background: linear-gradient(135deg, #047857, #10b981); color: #fff;
  font-family: inherit; font-size: var(--ep-t3); font-weight: 800; cursor: pointer; flex: 0 0 auto;
}
.ep-btn-new:hover { -webkit-transform: translateY(-1px); transform: translateY(-1px); }

.ep-req-card { max-width: 430px; text-align: start; }
.ep-kinds { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ep-kind {
  flex: 1 1 auto; padding: 9px 10px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff;
  font-family: inherit; font-size: var(--ep-t3); font-weight: 700; color: #64748b; cursor: pointer;
}
.ep-kind.is-on { border-color: var(--el-emerald, #10b981); background: #ecfdf5; color: #047857; }
.ep-req-body { margin-bottom: 10px; }
.ep-f { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ep-f label { font-size: var(--ep-t3); color: #64748b; font-weight: 700; }
.ep-f input {
  padding: 9px 11px; border: 1px solid #e2e8f0; border-radius: 10px;
  font-family: inherit; font-size: var(--ep-t2); background: #fff;
}
.ep-f input:focus { outline: 2px solid var(--el-emerald, #10b981); outline-offset: 1px; border-color: transparent; }
.ep-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* v1310 — تاريخُ التقديم وساعتُه في طلب البوابة: ثابتان يختمهما الخادم لحظة الإرسال (طلب المالك) */
.ep-stamp { margin-bottom: 12px; padding: 10px 12px 8px; border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; }
.ep-stamp .ep-f { margin-bottom: 6px; min-width: 0; }   /* عنصرُ الشبكة لا ينكمش دون عرض محتواه بلا هذا — فتخرج الخانة عن البطاقة على الهاتف */
.ep-stamp .ep-f input.ep-stamp-in,
.ep-stamp .ep-f input.ep-stamp-in:focus {
  width: 100%; min-width: 0; box-sizing: border-box;
  background: #eef2f6; border-color: #e2e8f0; outline: none; color: #0f172a;
  font-weight: 800; font-variant-numeric: tabular-nums; cursor: not-allowed;
}
.ep-stamp-note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--ep-t4); color: #64748b; line-height: 1.7; }
.ep-stamp-note svg { flex: 0 0 auto; color: #047857; }
.ep-req-err {
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px;
  padding: 8px 12px; font-size: var(--ep-t3); font-weight: 700; margin-bottom: 10px;
}
/* 🛠️ v1314 — ملاحظةُ الموارد البشرية في رأس نموذج التصحيح (البند ⑨): بلون «مُعاد للتصحيح» نفسه (ep-chip-wait) — ويُحفَظ سطرُها */
.ep-fix-note {
  display: flex; flex-direction: column; gap: 3px; background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
  border-radius: 10px; padding: 9px 12px; margin: 0 0 10px; font-size: var(--ep-t3); line-height: 1.8;
}
.ep-fix-note b { font-weight: 800; }
.ep-fix-note span { color: #78350f; white-space: pre-wrap; }

.ep-inbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.ep-inbox-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ep-inbox-top strong { font-size: var(--ep-t2); color: #0f172a; }
.ep-inbox-meta { font-size: var(--ep-t4); color: #94a3b8; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.ep-inbox-bits { font-size: var(--ep-t3); color: #334155; font-weight: 700; margin-bottom: 6px; }
.ep-inbox-reason { font-size: var(--ep-t3); color: #64748b; line-height: 1.7; margin-bottom: 10px; }
.ep-inbox-actions { display: flex; gap: 8px; }
.ep-btn-ok, .ep-btn-no {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: 10px; font-family: inherit; font-size: var(--ep-t3); font-weight: 800; cursor: pointer;
}
.ep-btn-ok { background: linear-gradient(135deg, #047857, #10b981); border: none; color: #fff; }
.ep-btn-no { background: #fff; border: 1px solid #fecaca; color: #b91c1c; }
.ep-btn-ok:disabled, .ep-btn-no:disabled { opacity: .6; cursor: default; }

/* v886 — سطر توضيح «الفلتر الشامل» في شاشة الصلاحيات */
.tm-seeall-note {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 12px;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
  font-size: 12px; color: #64748b; line-height: 1.8;
}

/* v887 — مرفقات طلب البوابة */
.ep-att-add {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
  background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155;
  font-family: inherit; font-size: var(--ep-t3); font-weight: 700; cursor: pointer; align-self: flex-start;
}
.ep-att-add:hover { background: #e2e8f0; }
.ep-att-list { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.ep-att-req { font-size: var(--ep-t4); font-weight: 800; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 20px; padding: 1px 8px; margin-inline-start: 6px; }   /* v1191 */
.ep-att-req[hidden] { display: none !important; }
.ep-att-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; width: 100%;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; font-size: var(--ep-t3); text-align: start;
}
.ep-att-open { cursor: pointer; font-family: inherit; }
.ep-att-open:hover { background: #ecfdf5; border-color: #a7f3d0; }
.ep-att-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; font-weight: 700; }
.ep-att-sz { color: #94a3b8; font-variant-numeric: tabular-nums; }
.ep-att-del { background: none; border: none; color: #b91c1c; cursor: pointer; font-size: var(--ep-t3); font-weight: 900; }
.ep-att-hint { font-size: var(--ep-t4); color: #94a3b8; margin-top: 4px; }
.ep-att-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px;
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857;
  font-family: inherit; font-size: var(--ep-t4); font-weight: 800; cursor: pointer;
}
.ep-att-chip:hover { background: #d1fae5; }
/* 🔐 v1306 — «بوابتي» المضمَّنة: ما لا يملكه العضو فيها (طلبٌ جديد · تصحيحُ طلبه المُعاد) يُرى مقفولاً وسببُه مكتوبٌ بجواره —
   ومثله زرُّ الإرسال وهو يجري. البرنامج لا يعرّف مظهراً عامّاً للمعطَّل، والنمطُ نمطُ الرسم الداخلي (v1140) · بلا رفعةِ التحويم */
.ep-btn-new[disabled], .ep-btn-new[disabled]:hover { opacity: .45; cursor: not-allowed; filter: grayscale(.35); -webkit-transform: none; transform: none; }
.ep-att-chip[disabled], .ep-att-chip[disabled]:hover { opacity: .45; cursor: not-allowed; filter: grayscale(.35); background: var(--el-em-50, #ecfdf5); }

/* 🐛 v888 — السمة hidden كانت لا تُخفي بنود قائمة المستخدم: القاعدة أعلاه
   تُعلن display:flex فتغلبها (نفس فخّ v819). قاعدة صريحة تُعيد للسمة معناها. */
.user-dropdown a[hidden], #userDropdown a[hidden] { display: none !important; }

/* ── v0.37.9.970 · القوائم المالية / الجداول المالية المشتركة (.fs-table)
   قاعدة المالك: رأس الجدول في منتصف الخانة · المبالغ من اليمين بأرقام غربية جدولية · السالب بين قوسين */
.fs-table th{text-align:center !important;vertical-align:middle}
.fs-table td.fs-amt,.fs-amt{text-align:right !important;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
.fs-neg{color:#b91c1c}.fs-dash{color:#cbd5e1}
.fs-table tr.fs-grp td{background:#f8fafc;font-weight:800;color:#014034}
.fs-table tr.fs-sub td:first-child{padding-inline-start:26px}
.fs-table tr.fs-tot td{background:#ecfdf5;font-weight:900;border-top:2px solid #047857}
.fs-table tr.fs-sec td{background:#014034;color:#fff;font-weight:900;letter-spacing:.2px}
.fs-table tr.fs-net td{background:#fef9c3;font-weight:900;border-top:2px solid #ca8a04}
.fs-var-up{color:#047857}.fs-var-dn{color:#b91c1c}
.fs-badge{display:inline-flex;align-items:center;gap:6px;border-radius:10px;padding:6px 12px;font-weight:800;font-size:12.5px}

/* ── v0.37.9.972 · التسوية البنكية */
.br-grid tr.br-sel td{background:#fef9c3 !important}
@media(max-width:1100px){.br-grid{grid-template-columns:1fr !important}}

/* ═══ v978 — مودال الموازنة التقديرية: شبكة حساب × شهر مجمَّعة بالنوع · مؤشّرات حيّة · شريط أدوات مجمَّع (قاعدة 11: أصناف معرَّفة هنا لا مخترَعة) ═══ */
.bd-sec2{grid-column:1/-1;display:flex;flex-direction:column;gap:10px}
.bd-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.bd-kpi{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;border-inline-start:4px solid #94a3b8}
.bd-kpi.rev{border-inline-start-color:#047857}.bd-kpi.exp{border-inline-start-color:#b45309}.bd-kpi.net{border-inline-start-color:#014034;background:#ecfdf5}.bd-kpi.cnt{border-inline-start-color:#64748b}
.bd-kpi-l{font-size:11px;font-weight:800;color:#475569}.bd-kpi-v{font-size:16px;font-weight:900;color:#0f172a}.bd-kpi-v.neg{color:#b91c1c}
.bd-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;padding:8px 10px;background:#fff;border:1px solid #e2e8f0;border-radius:10px}
.bd-tg{display:flex;gap:6px;align-items:center;padding:4px 8px;border-radius:8px;background:#f8fafc;border:1px dashed #e2e8f0}
.bd-tg-l{font-size:10.5px;font-weight:900;color:#64748b;text-transform:uppercase;letter-spacing:0;margin-inline-end:2px}
.bd-tg-search{flex:1;min-width:200px;background:transparent;border:0;padding:0}
.bd-tg-search input{width:100%;height:32px;border:1.5px solid #cbd5e1;border-radius:8px;padding:0 10px;font-size:12.5px}
.bd-factor{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;color:#014034}
.bd-factor input{width:64px;height:30px;border:1.5px solid #cbd5e1;border-radius:7px;text-align:center;font-weight:800;direction:ltr}
.bd-factor span{font-size:11px;color:#64748b;font-weight:700;direction:ltr;min-width:38px}
.bd-grid-wrap{overflow:auto;max-height:min(58vh,620px);border:1px solid #e2e8f0;border-radius:10px;background:#fff}
.bd-grid{margin:0;min-width:1240px;border-collapse:separate;border-spacing:0}
.bd-grid thead th{position:sticky;top:0;z-index:3;background:#014034;color:#fff;font-size:11px;padding:6px 4px;white-space:nowrap}
.bd-grid thead th .bd-y{font-size:10.5px;font-weight:600;opacity:.75}
.bd-grid th.bd-acc,.bd-grid td.bd-acc{position:sticky;inset-inline-start:0;z-index:2;background:#fff;min-width:250px;text-align:start}
.bd-grid thead th.bd-acc{z-index:4;background:#014034}
.bd-grid td.bd-acc select{width:100%;height:32px;border:1.5px solid #cbd5e1;border-radius:7px;font-size:12px;padding:0 6px;background:#fff}
.bd-grid td.bd-acc select.req-field{border-color:#ef4444}
.bd-grid th.bd-year,.bd-grid td.bd-year{background:#f0fdf4}
.bd-grid tbody td{padding:3px 3px;border-bottom:1px solid #f1f5f9}
.bd-grid tbody tr[data-bd-line]:nth-child(even) td{background:#fbfdfc}
.bd-grid tbody tr[data-bd-line]:hover td{background:#f0fdf4}
.bd-m{width:82px;height:30px;border:1px solid #e2e8f0;border-radius:6px;padding:0 6px;text-align:right;direction:ltr;font-variant-numeric:tabular-nums;font-size:12px;background:#fff}
.bd-m:focus{outline:none;border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.bd-m-year{width:110px;font-weight:900;color:#014034;border-color:#a7f3d0;background:#f0fdf4}
.bd-m::placeholder{color:#cbd5e1}
.bd-grid tr.bd-grp td{background:#f1f5f9;color:#014034;font-weight:900;font-size:12px;padding:6px 10px;text-align:start;border-top:2px solid #e2e8f0;position:sticky;inset-inline-start:0}
.bd-grid tr.bd-grp .bd-grp-n{margin-inline-start:8px;background:#fff;border:1px solid #cbd5e1;border-radius:9px;padding:0 7px;font-size:10.5px;color:#475569}
.bd-grid tr.bd-sub td{background:#f8fafc;font-weight:800;font-size:11.5px;color:#334155;border-bottom:2px solid #e2e8f0;padding:5px 6px}
.bd-grid tr.bd-sub td:first-child{position:sticky;inset-inline-start:0;background:#f8fafc;text-align:start;padding-inline-start:10px}
.bd-grid tfoot tr.bd-netrow td{position:sticky;bottom:0;z-index:3;background:#ecfdf5;font-weight:900;border-top:2px solid #10b981;padding:6px 6px}
.bd-grid tfoot tr.bd-netrow td:first-child{inset-inline-start:0;z-index:4;text-align:start;padding-inline-start:10px}
.bd-grid td.bd-act{white-space:nowrap;text-align:center;min-width:86px}
.bd-grid td.bd-act button{width:26px;height:26px;border:1px solid #e2e8f0;background:#fff;border-radius:6px;cursor:pointer;font-size:12px;color:#334155;margin:0 1px}
.bd-grid td.bd-act button:hover{border-color:#10b981;background:#ecfdf5}
.bd-grid td.bd-act button.danger{color:#b91c1c}.bd-grid td.bd-act button.danger:hover{border-color:#fca5a5;background:#fef2f2}
.bd-grid tr.bd-empty td{padding:34px 12px;text-align:center;color:#64748b;font-weight:800;font-size:13px}
.bd-grid tr.bd-empty .bd-empty-hint{font-weight:600;font-size:11.5px;color:#94a3b8;margin-top:6px;max-width:640px;margin-inline:auto;line-height:1.7}
.bd-legend{font-size:11px;color:#64748b;padding:0 4px}
.bd-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.bd-chips button{border:1px solid #cbd5e1;background:#fff;border-radius:9px;padding:1px 9px;font-size:10.5px;font-weight:800;color:#014034;cursor:pointer}
.bd-chips button:hover{border-color:#10b981;background:#ecfdf5}
.bd-modal .form-grid{align-items:start}

/* ═══ v979 — كشوف الحساب: منتقيات ديناميكية (as-combo) · فلاتر · تفصيل القيد في مكانه (قاعدة 11: الأصناف معرَّفة هنا) ═══ */
/* v985 — بطاقة الفلاتر ترث .card{overflow:hidden} فكانت تقصّ القائمة المنسدلة عند حدّها الأسفل (لقطة المالك) */
.card.as-filters{overflow:visible}
.as-filters{padding:12px 14px;margin-bottom:14px;display:flex;flex-direction:column;gap:10px}
.as-frow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.as-frow2{padding-top:8px;border-top:1px dashed #e2e8f0}
.as-f{display:flex;flex-direction:column;gap:3px;min-width:160px}.as-f.grow{flex:1;min-width:260px}.as-f-btn{min-width:0;justify-content:flex-end}
.as-f>label{font-size:11px;color:#475569;font-weight:800}.as-opt{font-weight:600;color:#94a3b8;font-size:10.5px}
.as-f .h-filter-select{height:38px}
.as-combo{position:relative}
.as-combo-in{width:100%;height:38px;border:1.5px solid #cbd5e1;border-radius:9px;padding:0 34px 0 12px;font-size:13px;font-weight:700;color:#0f172a;background:#fff}
html[dir="ltr"] .as-combo-in{padding:0 12px 0 34px}
.as-combo-in:focus{outline:none;border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.as-combo-in::placeholder{color:#94a3b8;font-weight:500}
.as-combo-x,.as-combo-ic{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:8px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:0;background:transparent;color:#64748b;cursor:pointer;font-size:12px}
.as-combo-x:hover{background:#fee2e2;color:#b91c1c}.as-combo-ic{pointer-events:none;color:#94a3b8}
.as-combo-list{position:absolute;top:calc(100% + 4px);inset-inline-start:0;inset-inline-end:0;z-index:1200;background:#fff;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 12px 32px rgba(15,23,42,.16);max-height:340px;overflow:auto;padding:4px}
.as-combo-item{padding:7px 10px;border-radius:7px;cursor:pointer;border-bottom:1px solid #f1f5f9}
.as-combo-item:last-child{border-bottom:0}.as-combo-item:hover,.as-combo-item.hi{background:#ecfdf5}.as-combo-item.cur{background:#f0fdf4;box-shadow:inset 3px 0 0 #10b981}
.as-combo-item.grp .as-combo-lbl{color:#014034}
.as-combo-main{display:flex;align-items:center;gap:8px;justify-content:space-between}
.as-combo-lbl{font-weight:800;font-size:12.5px;color:#0f172a}
.as-combo-badge{font-size:10.5px;font-weight:800;color:#475569;background:#f1f5f9;border-radius:8px;padding:1px 7px;white-space:nowrap}
.as-combo-sub{font-size:10.5px;color:#64748b;margin-top:2px}
.as-combo-empty,.as-combo-more{padding:10px;text-align:center;color:#94a3b8;font-size:11.5px}
.as-chips{display:flex;gap:4px;flex-wrap:wrap;align-items:center;padding-bottom:2px}
.as-chip{border:1px solid #cbd5e1;background:#fff;border-radius:9px;padding:6px 10px;font-size:11.5px;font-weight:800;color:#014034;cursor:pointer}
.as-chip:hover{border-color:#10b981;background:#ecfdf5}
.as-selchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.as-selchip{display:inline-flex;align-items:center;gap:6px;border-radius:9px;padding:5px 10px;font-size:12px;font-weight:800;border:1px solid}
.as-selchip.acct{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}.as-selchip.party{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}.as-selchip.both{background:#fefce8;border-color:#fde68a;color:#854d0e}
.as-selchip button{border:0;background:transparent;cursor:pointer;color:inherit;font-size:11px;padding:0 2px}
.as-empty{padding:34px;text-align:center}
.as-order{display:inline-flex;background:#f1f5f9;border-radius:8px;padding:2px}
.as-order button{border:0;background:transparent;border-radius:6px;padding:4px 10px;font-size:11.5px;font-weight:800;color:#475569;cursor:pointer}
.as-order button.on{background:#fff;color:#014034;box-shadow:0 1px 3px rgba(15,23,42,.12)}
.as-stmt tbody tr.as-row{cursor:pointer}.as-stmt tbody tr.as-row:hover td{background:#f0fdf4}
.as-stmt tbody tr.as-row.open td{background:#ecfdf5;box-shadow:inset 0 -2px 0 #10b981}
.as-src-btn{border:1px solid #cbd5e1;background:#fff;border-radius:7px;padding:2px 8px;font-size:11px;font-weight:800;color:#014034;cursor:pointer;white-space:nowrap}
.as-src-btn:hover{border-color:#10b981;background:#ecfdf5}
.as-stmt tr.as-detail>td{background:#f8fafc;padding:10px 12px;border-bottom:2px solid #a7f3d0}
.as-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start}
@media (max-width:1000px){.as-detail-grid{grid-template-columns:1fr}}
.as-jv{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}
.as-jv-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid #e2e8f0;font-size:12px;color:#334155}
.as-jv-desc{flex:1;color:#64748b;min-width:120px}
.as-jv-lines{margin:0;font-size:12px}.as-jv-lines tbody tr.as-cur td{background:#ecfdf5;font-weight:800}
.as-cur-tag{font-size:10.5px;color:#047857;background:#d1fae5;border-radius:8px;padding:0 6px;margin-inline-start:4px}
.as-side{display:flex;flex-direction:column;gap:8px}
.as-src-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;font-size:12px}
.as-src-card.muted{color:#64748b;text-align:center;padding:16px}
.as-src-h{font-weight:900;color:#014034;margin-bottom:6px;font-size:13px}
.as-src-row{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px dashed #f1f5f9}.as-src-row:last-child{border-bottom:0}.as-src-row>span:first-child{color:#64748b}
.as-side-btns{display:flex;gap:6px;flex-wrap:wrap}

/* 🔖 v1043 — عمود «الحالة» في كشوف الحساب (قاعدة 11): القيد غير المعتمَد يظهر موسوماً ولا يمسّ الرصيد */
.as-jst{display:inline-flex;align-items:center;gap:4px;border-radius:8px;padding:2px 8px;font-size:11px;font-weight:800;white-space:nowrap;line-height:1.6}
tr.as-row.as-pend > td{background:#fffbeb}
tr.as-row.as-pend:hover > td{background:#fef3c7}
tr.as-row.as-pend > td:first-child{box-shadow:inset -3px 0 0 #f59e0b}
html[dir="ltr"] tr.as-row.as-pend > td:first-child{box-shadow:inset 3px 0 0 #f59e0b}

/* ═══ 🧪 v980 — أوامر التحاليل والأشعة: الخدمة · الباقة · المنفِّذ · التسعير (قاعدة 11: الأصناف هنا لا inline) ═══ */
.dx-kinds{display:flex;gap:6px;flex-wrap:wrap}
.dx-kind-btn{border:1.5px solid #cbd5e1;background:#fff;color:#334155;border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:800;cursor:pointer;transition:all .15s}
.dx-kind-btn:hover{border-color:var(--el-em-500,#10b981)}
.dx-kind-btn.is-on{background:var(--el-em-50,#ecfdf5);border-color:var(--el-em-500,#10b981);color:var(--el-teal-900,#014034);box-shadow:0 0 0 2px rgba(16,185,129,.18)}
.dx-kind-btn:disabled{opacity:.55;cursor:not-allowed}
.dx-check{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc;font-weight:800;font-size:12.5px;cursor:pointer}
.dx-check input{width:16px;height:16px;accent-color:var(--el-em-500,#10b981)}
.dx-pcard{background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:1px solid #a7f3d0;border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;gap:4px;min-height:42px}
.dx-prow{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#334155}
.dx-prow b{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#0f172a}
.dx-prow.is-pos b{color:#047857}.dx-prow.is-neg b{color:#b91c1c}
.dx-fulfil{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:9px;font-size:10.5px;font-weight:800;white-space:nowrap}
.dx-fulfil b{font-variant-numeric:tabular-nums}
.dx-prog{display:inline-block;width:38px;height:5px;border-radius:3px;background:rgba(15,23,42,.12);overflow:hidden;font-style:normal}
.dx-prog>i{display:block;height:100%;background:currentColor;border-radius:3px}
.dx-exec-btn{margin-top:6px;width:100%;border:0;background:var(--el-teal-900,#014034);color:#fff;border-radius:7px;padding:5px 8px;font-size:11px;font-weight:800;cursor:pointer}
.dx-exec-btn:hover{background:#047857}
.dx-exec-info{display:flex;flex-wrap:wrap;gap:6px 16px;padding:8px 18px;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:12px;font-weight:700;color:#334155}
.dx-total{font-size:20px;font-weight:900;color:var(--el-teal-900,#014034);font-variant-numeric:tabular-nums}
/* 🧾📎 v981 — فوترة الأمر المستقلّ · نتيجة كل تنفيذ */
.dx-bill-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:9px;font-size:10.5px;font-weight:800;border:0;white-space:nowrap}
button.dx-bill-chip{cursor:pointer}button.dx-bill-chip:hover{filter:brightness(.96)}
.dx-exec-btn.is-bill{background:#fff;color:var(--el-teal-900,#014034);border:1.5px solid var(--el-em-500,#10b981)}.dx-exec-btn.is-bill:hover{background:var(--el-em-50,#ecfdf5)}
.dx-att-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.dx-att-chip{border:1px solid #cbd5e1;background:#f8fafc;color:#334155;border-radius:7px;padding:2px 7px;font-size:10.5px;font-weight:700;cursor:pointer;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.dx-att-chip:hover{border-color:var(--el-em-500,#10b981);background:var(--el-em-50,#ecfdf5)}
.dx-att-chip.is-add{color:var(--el-teal-900,#014034);border-style:dashed;font-size:12px;line-height:1}
/* 🔤 v983 — لا نصّ أصغر من 10.5px في الجداول (small كان 80% من 12px = 9.6px) */
.data-table small, .co-list-table small, .ledg-party small { font-size: 11px; }
/* ═══ 🎨 v984 — طقم أيقونات الإجراءات (action_icons.js): SVG أحادي يرث لون الزرّ ═══ */
.ai-ico { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; flex: 0 0 auto; pointer-events: none; }
.ai-ico.ai-lead { margin-inline-end: .35em; }
.ai-only .ai-ico { width: 1.3em; height: 1.3em; vertical-align: -0.28em; margin: 0; }
button.ai-only, .btn.ai-only { line-height: 1; }
.action-btn.ai-only .ai-ico, .btn-icon.ai-only .ai-ico { width: 16px; height: 16px; }
.data-table .ai-only .ai-ico, .co-list-table .ai-only .ai-ico { width: 16px; height: 16px; vertical-align: middle; }
.btn-primary-action .ai-ico, .btn-primary .ai-ico { stroke-width: 2.2; }


/* ── v986 · بطاقات الإحصاء على شاشة بلا بيانات (kpi_zero.js): الشريط الصفري يُطوى إلى سطر هادئ ── */
.kz-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:9px 14px;border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc;color:#64748b;font-size:12.5px;font-weight:600}
.kz-dot{width:8px;height:8px;border-radius:50%;background:var(--el-em-500,#10b981);opacity:.7;flex:0 0 auto}
.kz-show{margin-inline-start:auto;border:1px solid #cbd5e1;background:#fff;color:var(--el-teal-900,#014034);border-radius:999px;padding:3px 12px;font-size:11.5px;font-weight:700;cursor:pointer}
.kz-show:hover{border-color:var(--el-em-500,#10b981);color:var(--el-em-700,#047857)}
[data-kz-strip][hidden]{display:none!important}

/* ── v988 · كشف حساب الطرف (party_statement.js) — تبويب «كشف الحساب» في العملاء والموردين ── */
.pst{padding:14px;background:#fff;border-radius:0 0 12px 12px}
.pst-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1.5px solid #e2e8f0;margin-bottom:12px}
.pst-id{display:flex;gap:12px;align-items:flex-start}
.pst-title{font-size:19px;font-weight:900;color:var(--el-teal-900,#014034);margin:2px 0 4px}
.pst-meta{display:flex;gap:6px;flex-wrap:wrap}
.pst-chip{display:inline-flex;gap:6px;align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:700;color:#0f172a}
.pst-chip-l{color:#64748b;font-weight:600}
.pst-actions{display:flex;gap:6px;flex-wrap:wrap}
.pst-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.pst-segs{display:inline-flex;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;padding:3px;gap:2px;flex-wrap:wrap}
.pst-seg{border:0;background:transparent;border-radius:8px;padding:5px 11px;font-size:12px;font-weight:700;color:#475569;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.pst-seg:hover{background:#fff}
.pst-seg.active{background:#fff;color:var(--el-teal-900,#014034);box-shadow:0 1px 3px rgba(2,6,23,.12)}
.pst-type .pst-dot,.pst-type-pill .pst-dot{width:8px;height:8px;border-radius:50%;background:var(--pst-c,#475569);display:inline-block;flex:0 0 auto}
.pst-dates{display:inline-flex;gap:6px;align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:3px 8px}
.pst-dates label{font-size:11.5px;font-weight:700;color:#475569}
.pst-dates input{border:1px solid #cbd5e1;border-radius:7px;padding:3px 6px;font-size:12px;min-width:128px;background:#fff}
.pst-x{border:0;background:transparent;color:#b91c1c;font-weight:900;cursor:pointer;padding:2px 6px}
.pst-search{flex:1;min-width:220px;border:1px solid #cbd5e1;border-radius:10px;padding:7px 12px;font-size:12.5px;background:#fff}
.pst-search:focus{outline:none;border-color:var(--el-em-500,#10b981);box-shadow:0 0 0 3px rgba(16,185,129,.15)}
.pst-toggle{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:700;color:#475569;cursor:pointer;white-space:nowrap}
.pst-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:12px}
.pst-tile{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px}
.pst-tile-l{font-size:11px;font-weight:700;color:#64748b}
.pst-tile-v{font-size:17px;font-weight:900;color:#0f172a;font-variant-numeric:tabular-nums;font-family:ui-monospace,Menlo,Consolas,monospace;text-align:right;margin-top:3px}
.pst-tile-s{font-size:10.5px;color:#64748b;margin-top:2px}
.pst-tile-main{background:linear-gradient(135deg,var(--el-teal-900,#014034),var(--el-em-700,#047857));border-color:transparent}
.pst-tile-main .pst-tile-l,.pst-tile-main .pst-tile-s{color:#d1fae5}.pst-tile-main .pst-tile-v{color:#fff}
.pst-tile-warn{background:#fef2f2;border-color:#fecaca}.pst-tile-warn .pst-tile-l{color:#991b1b}
.pst-aging{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.pst-age{border:1px solid #e2e8f0;border-radius:10px;padding:6px 10px;background:#fff}
.pst-age-l{font-size:10.5px;font-weight:700;color:var(--pst-c)}
.pst-age-bar{height:5px;border-radius:99px;background:#eef2f7;margin:4px 0;overflow:hidden}.pst-age-bar i{display:block;height:100%;background:var(--pst-c);border-radius:99px}
.pst-age-v{font-size:12.5px;font-weight:900;color:#0f172a;text-align:right;font-variant-numeric:tabular-nums}
.pst-table th.pst-n,.pst-table td.pst-n{width:38px;text-align:center;color:#94a3b8;font-size:11px}
.pst-table td.pst-date{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:center}
.pst-table td.pst-desc{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#334155}
.pst-table th.pst-desc{min-width:180px}
.pst-type-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--pst-c);background:color-mix(in srgb,var(--pst-c) 10%,#fff);border:1px solid color-mix(in srgb,var(--pst-c) 28%,#fff);white-space:nowrap}
.pst-link{border:0;background:transparent;padding:0;font:inherit;font-weight:700;color:var(--el-teal-900,#014034);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;font-variant-numeric:tabular-nums}
.pst-link:hover{color:var(--el-em-700,#047857);text-decoration-style:solid}
.pst-link-jv{color:#475569}
.pst-unposted-tag{font-size:10.5px;color:#b45309;background:#fffbeb;border:1px solid #fde68a;border-radius:999px;padding:1px 7px;white-space:nowrap}
.pst-table td.pst-dr{color:#b91c1c}.pst-table td.pst-cr{color:#047857}
.pst-dash{color:#cbd5e1}
.pst-table td.pst-bal{font-weight:900}.pst-pos{color:#0f172a}.pst-neg{color:#047857}.pst-zero{color:#64748b}
.pst-open td{background:#fef9c3;font-weight:700}
.pst-month td{background:#ecfdf5;font-weight:800;color:var(--el-teal-900,#014034);border-top:1px solid #a7f3d0}
.pst-month-n{font-size:10.5px;color:#64748b;font-weight:600;margin-inline-start:6px}
.pst-bal-sub{color:#475569;font-weight:700}
.pst-empty td{text-align:center;color:#64748b;padding:26px 12px;font-weight:600;background:#f8fafc}
.pst-unposted td.pst-date{color:#b45309}
.pst-tot td{background:#f1f5f9;font-weight:800}
.pst-close td{background:#ecfdf5;font-weight:900;border-top:2px solid var(--el-em-700,#047857)}
.pst-side{font-size:11px;color:#475569;font-weight:600;margin-inline-start:6px}
.pst-foot{margin-top:10px;font-size:11px;color:#64748b}
.pst-table tbody tr.pst-row:hover td{background:#f8fafc}
/* 🩺 v1083 — المستند قيد الاعتماد في الكشف: يُعرَض موسوماً ولا يدخل الرصيد (قاعدتا 99 و102) */
.pst-table tbody tr.pst-pending td{background:#fffbeb}
.pst-table tbody tr.pst-pending td.pst-dr,.pst-table tbody tr.pst-pending td.pst-cr{color:#92400e;font-style:italic}
.pst-pending-tag{font-size:10.5px;color:#92400e;background:#fef3c7;border:1px solid #fde68a;border-radius:999px;padding:1px 7px;white-space:nowrap;margin-inline-start:6px}
@media (max-width:900px){.pst-aging{grid-template-columns:repeat(2,1fr)}.pst-table td.pst-desc{max-width:160px}}

/* ── v989 · لوحة «اختر المنشأة» بعد الدخول (company_picker.js) ── */
.cpk-root{position:fixed;inset:0;z-index:12000;display:flex;align-items:stretch;justify-content:center;padding:22px 26px;font-family:inherit}
body.cpk-open .modal-backdrop{z-index:12500}   /* v990: مودال «إضافة منشأة» يُفتح فوق اللوحة لا بدلها */
.cpk-bg{position:absolute;inset:0;background:radial-gradient(1200px 600px at 80% -10%,rgba(16,185,129,.35),transparent 60%),radial-gradient(900px 500px at 10% 110%,rgba(4,120,87,.35),transparent 60%),var(--el-grad-deep,linear-gradient(135deg,#013229,#014034));}
.cpk-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}
body.cpk-open{overflow:hidden}
body.cpk-open .app-shell{filter:blur(6px) saturate(.8);pointer-events:none;user-select:none}
.cpk-panel{position:relative;width:100%;max-width:1720px;min-height:calc(100vh - 44px);max-height:calc(100vh - 44px);overflow:auto;display:flex;flex-direction:column;background:rgba(255,255,255,.97);backdrop-filter:blur(18px);border-radius:28px;padding:36px 48px 28px;box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.35) inset;animation:cpkIn .38s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes cpkIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cpk-panel{animation:none}}
.cpk-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cpk-brand{display:flex;align-items:center;gap:8px;font-weight:900;color:var(--el-teal-900,#014034);font-size:16px}.cpk-brand img{height:30px;width:auto}
.cpk-user{display:flex;align-items:center;gap:10px}
.cpk-avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--el-grad-hero,#047857);color:#fff;display:grid;place-items:center;font-weight:900;font-size:16px;box-shadow:0 4px 12px rgba(1,64,52,.25)}.cpk-avatar img{width:100%;height:100%;object-fit:cover}
.cpk-hello{display:flex;flex-direction:column;line-height:1.15}.cpk-hello span{font-size:11px;color:#64748b;font-weight:700}.cpk-hello b{font-size:15px;color:#0f172a}
.cpk-x{border:0;background:#f1f5f9;border-radius:50%;width:34px;height:34px;font-size:16px;cursor:pointer;color:#475569}.cpk-x:hover{background:#e2e8f0}
.cpk-title{margin:10px 0 6px;font-size:32px;font-weight:900;color:var(--el-teal-900,#014034);letter-spacing:0;line-height:1.2}
.cpk-sub{margin:0 0 22px;font-size:14.5px;color:#64748b;font-weight:600}
.cpk-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.cpk-search{flex:1;min-width:280px;border:1.5px solid #cbd5e1;border-radius:16px;padding:14px 18px;font-size:15px;background:#fff;transition:box-shadow .15s,border-color .15s}
.cpk-search:focus{outline:none;border-color:var(--el-em-500,#10b981);box-shadow:0 0 0 4px rgba(16,185,129,.16)}
.cpk-count{font-size:12.5px;font-weight:800;color:#0f172a;white-space:nowrap}.cpk-muted{color:#94a3b8;font-weight:700}
.cpk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:20px;margin-top:8px;align-content:start}
.cpk-empty,.cpk-grid{flex:1}
.cpk-card{position:relative;display:flex;gap:18px;align-items:flex-start;text-align:start;background:#fff;border:1.5px solid #e2e8f0;border-radius:22px;padding:22px 22px 22px;min-height:200px;cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;font:inherit;color:inherit;overflow:hidden}
.cpk-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--cpk-c,#014034);opacity:.9}
.cpk-card:hover,.cpk-card:focus-visible{transform:translateY(-3px);border-color:var(--cpk-c,#047857);box-shadow:0 14px 32px rgba(1,64,52,.16)}
.cpk-card:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(16,185,129,.28),0 14px 32px rgba(1,64,52,.16)}
.cpk-card.is-cur{border-color:var(--el-em-500,#10b981);background:linear-gradient(180deg,#f0fdf4,#fff)}
.cpk-card.is-locked{cursor:not-allowed;opacity:.62;filter:grayscale(.35)}.cpk-card.is-locked:hover{transform:none;box-shadow:none;border-color:#e2e8f0}
.cpk-key{position:absolute;top:14px;inset-inline-end:16px;font-size:10.5px;font-weight:800;color:#94a3b8;border:1px solid #e2e8f0;border-radius:6px;padding:0 6px;line-height:16px;font-variant-numeric:tabular-nums}
.cpk-logo{flex:0 0 auto;width:84px;height:84px;border-radius:20px;background:color-mix(in srgb,var(--cpk-c,#014034) 10%,#fff);border:1px solid color-mix(in srgb,var(--cpk-c,#014034) 22%,#fff);display:grid;place-items:center;overflow:hidden}
.cpk-logo img{width:100%;height:100%;object-fit:contain;padding:6px;background:#fff}.cpk-logo b{font-size:32px;font-weight:900;color:var(--cpk-c,#014034);letter-spacing:.5px}
.cpk-body{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1;padding-inline-end:70px}
.cpk-name{font-size:19px;font-weight:900;color:#0f172a;line-height:1.25}
.cpk-name-en{font-size:12.5px;color:#64748b;font-weight:700}
.cpk-chips{display:flex;gap:6px;flex-wrap:wrap}
.cpk-chip{font-size:12px;font-weight:700;color:#334155;background:#f1f5f9;border-radius:999px;padding:3px 11px}.cpk-code{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.3px;color:var(--el-teal-900,#014034);background:#ecfdf5}
.cpk-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:2px}
.cpk-role{font-size:13px;font-weight:800;color:var(--el-em-700,#047857)}.cpk-role.is-muted{color:#94a3b8;font-weight:700}
.cpk-state{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#475569}.cpk-state i{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18)}.cpk-state.off i{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.cpk-last{font-size:12px;color:#94a3b8;font-weight:600}
.cpk-badge{position:absolute;bottom:16px;inset-inline-end:18px;font-size:11.5px;font-weight:800;color:#0f766e;background:#ccfbf1;border-radius:999px;padding:2px 9px}.cpk-badge-cur{color:#065f46;background:#d1fae5}
.cpk-go{position:absolute;bottom:14px;inset-inline-start:18px;font-size:22px;color:var(--cpk-c,#047857);opacity:0;transform:translateX(0);transition:opacity .18s,transform .18s}
.cpk-card:hover .cpk-go,.cpk-card:focus-visible .cpk-go{opacity:1;transform:translateX(var(--cpk-shift,-4px))}
[dir="ltr"] .cpk-card{--cpk-shift:4px}
.cpk-lock{position:absolute;bottom:14px;inset-inline-start:14px;width:14px;height:16px;border:2px solid #94a3b8;border-radius:3px;border-top-left-radius:7px;border-top-right-radius:7px}
.cpk-empty{padding:30px;text-align:center;color:#64748b;font-weight:700}
.cpk-foot-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:18px;border-top:1px solid #e2e8f0}
.cpk-remember{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#334155;cursor:pointer}.cpk-remember input{width:16px;height:16px;accent-color:var(--el-em-700,#047857)}
.cpk-links{display:flex;gap:18px}.cpk-link{border:0;background:transparent;font:inherit;font-size:13.5px;font-weight:800;color:var(--el-teal-900,#014034);cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}.cpk-link:hover{color:var(--el-em-700,#047857)}.cpk-link-danger{color:#b91c1c}
@media (max-width:640px){.cpk-panel{padding:18px 16px;border-radius:18px}.cpk-title{font-size:20px}.cpk-grid{grid-template-columns:1fr}.cpk-key{display:none}}

/* v991 — رقم السجل الرسمي على بطاقة المنشأة (الموحّد 7… للسعودية · السجل/الرخصة لغيرها) + الرقم الضريبي */
.cpk-reg{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px;padding:6px 10px;border:1px dashed #cbd5e1;border-radius:10px;background:#f8fafc}
.cpk-reg-l{font-size:11px;font-weight:700;color:#64748b}.cpk-reg-vat{margin-inline-start:6px;padding-inline-start:10px;border-inline-start:1px solid #e2e8f0}
.cpk-reg-n{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;font-weight:800;color:#0f172a;letter-spacing:.4px;unicode-bidi:isolate}
@media (max-width:640px){.cpk-root{padding:10px}.cpk-panel{min-height:calc(100vh - 20px);max-height:calc(100vh - 20px)}}

/* ── v992 · تنسيق أعمدة الجداول مركزياً (table_polish.js) — يغلب المحاذاة المضمَّنة القديمة ── */
#screenContainer td.tp-num{text-align:right!important;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
#screenContainer td.tp-cnt{text-align:center!important;font-variant-numeric:tabular-nums}
#screenContainer td.tp-date{text-align:center!important;direction:ltr;unicode-bidi:isolate;white-space:nowrap;font-variant-numeric:tabular-nums}
#screenContainer td.tp-idx{text-align:center!important;color:#94a3b8;font-size:11px;font-variant-numeric:tabular-nums}
#screenContainer td.tp-act{text-align:center!important;white-space:nowrap}
/* 💰 v1045 — عمود مبالغ مركَّبة (رقم يتبعه وصفه): يمينٌ · أرقام جدولية · بلا التفاف — بلا أحادي العرض لأن فيه نصّاً */
#screenContainer td.tp-amt{text-align:right!important;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;white-space:nowrap}
#screenContainer th.tp-h-amt{text-align:center!important}
#screenContainer td.tp-doc{white-space:nowrap;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;text-align:center!important}
#screenContainer th.tp-h-doc{text-align:center!important}
#screenContainer th.tp-h-num,#screenContainer th.tp-h-date,#screenContainer th.tp-h-idx,#screenContainer th.tp-h-cnt,#screenContainer th.tp-h-act{text-align:center!important}
#screenContainer .form-field.med-spec-dep[hidden]{display:none!important}

/* v1007 — خانات قوائم الموارد البشرية القابلة للإخفاء (TABLE_KIT · الطلبات · القرارات · المخالصات · الخطابات · الإجازات) — نفس التصريح المركزي */
[data-tbx-hide~="active"] [data-tbx-slot="active"] { display: none !important; }
[data-tbx-hide~="applied"] [data-tbx-slot="applied"] { display: none !important; }
[data-tbx-hide~="att"] [data-tbx-slot="att"] { display: none !important; }
[data-tbx-hide~="chain"] [data-tbx-slot="chain"] { display: none !important; }
[data-tbx-hide~="company"] [data-tbx-slot="company"] { display: none !important; }
[data-tbx-hide~="cost"] [data-tbx-slot="cost"] { display: none !important; }
[data-tbx-hide~="days"] [data-tbx-slot="days"] { display: none !important; }
[data-tbx-hide~="details"] [data-tbx-slot="details"] { display: none !important; }
[data-tbx-hide~="doc"] [data-tbx-slot="doc"] { display: none !important; }
[data-tbx-hide~="eff"] [data-tbx-slot="eff"] { display: none !important; }
[data-tbx-hide~="emp"] [data-tbx-slot="emp"] { display: none !important; }
[data-tbx-hide~="end"] [data-tbx-slot="end"] { display: none !important; }
[data-tbx-hide~="hijri"] [data-tbx-slot="hijri"] { display: none !important; }
[data-tbx-hide~="lastDay"] [data-tbx-slot="lastDay"] { display: none !important; }
[data-tbx-hide~="n"] [data-tbx-slot="n"] { display: none !important; }
[data-tbx-hide~="net"] [data-tbx-slot="net"] { display: none !important; }
[data-tbx-hide~="qr"] [data-tbx-slot="qr"] { display: none !important; }
[data-tbx-hide~="recipient"] [data-tbx-slot="recipient"] { display: none !important; }
[data-tbx-hide~="start"] [data-tbx-slot="start"] { display: none !important; }
[data-tbx-hide~="subject"] [data-tbx-slot="subject"] { display: none !important; }
[data-tbx-hide~="summary"] [data-tbx-slot="summary"] { display: none !important; }
[data-tbx-hide~="trail"] [data-tbx-slot="trail"] { display: none !important; }
[data-tbx-hide~="year"] [data-tbx-slot="year"] { display: none !important; }

/* v1008 — خانات جداول الحضور والمسير والصرف القابلة للإخفاء (TABLE_KIT) — نفس التصريح المركزي */
[data-tbx-hide~="absence"] [data-tbx-slot="absence"] { display: none !important; }
[data-tbx-hide~="absent"] [data-tbx-slot="absent"] { display: none !important; }
[data-tbx-hide~="address"] [data-tbx-slot="address"] { display: none !important; }
[data-tbx-hide~="annual"] [data-tbx-slot="annual"] { display: none !important; }
[data-tbx-hide~="coShare"] [data-tbx-slot="coShare"] { display: none !important; }
[data-tbx-hide~="default"] [data-tbx-slot="default"] { display: none !important; }
[data-tbx-hide~="due"] [data-tbx-slot="due"] { display: none !important; }
[data-tbx-hide~="early"] [data-tbx-slot="early"] { display: none !important; }
[data-tbx-hide~="empShare"] [data-tbx-slot="empShare"] { display: none !important; }
[data-tbx-hide~="emps"] [data-tbx-slot="emps"] { display: none !important; }
[data-tbx-hide~="lat"] [data-tbx-slot="lat"] { display: none !important; }
[data-tbx-hide~="late"] [data-tbx-slot="late"] { display: none !important; }
[data-tbx-hide~="lng"] [data-tbx-slot="lng"] { display: none !important; }
[data-tbx-hide~="mode"] [data-tbx-slot="mode"] { display: none !important; }
[data-tbx-hide~="official"] [data-tbx-slot="official"] { display: none !important; }
[data-tbx-hide~="ot"] [data-tbx-slot="ot"] { display: none !important; }
[data-tbx-hide~="pay"] [data-tbx-slot="pay"] { display: none !important; }
[data-tbx-hide~="payroll"] [data-tbx-slot="payroll"] { display: none !important; }
[data-tbx-hide~="permission"] [data-tbx-slot="permission"] { display: none !important; }
[data-tbx-hide~="present"] [data-tbx-slot="present"] { display: none !important; }
[data-tbx-hide~="radius"] [data-tbx-slot="radius"] { display: none !important; }
[data-tbx-hide~="sick"] [data-tbx-slot="sick"] { display: none !important; }
[data-tbx-hide~="unpaid"] [data-tbx-slot="unpaid"] { display: none !important; }
[data-tbx-hide~="weekly"] [data-tbx-slot="weekly"] { display: none !important; }
[data-tbx-hide~="work"] [data-tbx-slot="work"] { display: none !important; }

/* v1009 — خانات تبويبات الموظفين القابلة للإخفاء (TABLE_KIT) — نفس التصريح المركزي */
[data-tbx-hide~="basic"] [data-tbx-slot="basic"] { display: none !important; }
[data-tbx-hide~="cend"] [data-tbx-slot="cend"] { display: none !important; }
[data-tbx-hide~="contact"] [data-tbx-slot="contact"] { display: none !important; }
[data-tbx-hide~="cstart"] [data-tbx-slot="cstart"] { display: none !important; }
[data-tbx-hide~="daysWk"] [data-tbx-slot="daysWk"] { display: none !important; }
[data-tbx-hide~="employer"] [data-tbx-slot="employer"] { display: none !important; }
[data-tbx-hide~="entitled"] [data-tbx-slot="entitled"] { display: none !important; }
[data-tbx-hide~="excludeDate"] [data-tbx-slot="excludeDate"] { display: none !important; }
[data-tbx-hide~="expiry"] [data-tbx-slot="expiry"] { display: none !important; }
[data-tbx-hide~="hire"] [data-tbx-slot="hire"] { display: none !important; }
[data-tbx-hide~="housing"] [data-tbx-slot="housing"] { display: none !important; }
[data-tbx-hide~="idStatus"] [data-tbx-slot="idStatus"] { display: none !important; }
[data-tbx-hide~="idType"] [data-tbx-slot="idType"] { display: none !important; }
[data-tbx-hide~="identity"] [data-tbx-slot="identity"] { display: none !important; }
[data-tbx-hide~="insDate"] [data-tbx-slot="insDate"] { display: none !important; }
[data-tbx-hide~="insStatus"] [data-tbx-slot="insStatus"] { display: none !important; }
[data-tbx-hide~="medStatus"] [data-tbx-slot="medStatus"] { display: none !important; }
[data-tbx-hide~="mexpiry"] [data-tbx-slot="mexpiry"] { display: none !important; }
[data-tbx-hide~="mstart"] [data-tbx-slot="mstart"] { display: none !important; }
[data-tbx-hide~="nat"] [data-tbx-slot="nat"] { display: none !important; }
[data-tbx-hide~="other"] [data-tbx-slot="other"] { display: none !important; }
[data-tbx-hide~="probEnd"] [data-tbx-slot="probEnd"] { display: none !important; }
[data-tbx-hide~="probation"] [data-tbx-slot="probation"] { display: none !important; }
[data-tbx-hide~="provider"] [data-tbx-slot="provider"] { display: none !important; }
[data-tbx-hide~="remaining"] [data-tbx-slot="remaining"] { display: none !important; }
[data-tbx-hide~="stage"] [data-tbx-slot="stage"] { display: none !important; }
[data-tbx-hide~="transport"] [data-tbx-slot="transport"] { display: none !important; }
[data-tbx-hide~="used"] [data-tbx-slot="used"] { display: none !important; }
[data-tbx-hide~="weeklyOff"] [data-tbx-slot="weeklyOff"] { display: none !important; }
/* v1014 — خانات TABLE_KIT للشؤون الإدارية (المهام · القضايا · الجداول · Word · الأرشيف · المراسلات) */
[data-tbx-hide~="num"] [data-tbx-slot="num"] { display: none !important; }
[data-tbx-hide~="parties"] [data-tbx-slot="parties"] { display: none !important; }
[data-tbx-hide~="stamps"] [data-tbx-slot="stamps"] { display: none !important; }
[data-tbx-hide~="hours"] [data-tbx-slot="hours"] { display: none !important; }
[data-tbx-hide~="reply"] [data-tbx-slot="reply"] { display: none !important; }
[data-tbx-hide~="act"] [data-tbx-slot="act"] { display: none !important; }
[data-tbx-hide~="title"] [data-tbx-slot="title"] { display: none !important; }
[data-tbx-hide~="role"] [data-tbx-slot="role"] { display: none !important; }
[data-tbx-hide~="court"] [data-tbx-slot="court"] { display: none !important; }
[data-tbx-hide~="opponent"] [data-tbx-slot="opponent"] { display: none !important; }
[data-tbx-hide~="claim"] [data-tbx-slot="claim"] { display: none !important; }
[data-tbx-hide~="next"] [data-tbx-slot="next"] { display: none !important; }
[data-tbx-hide~="star"] [data-tbx-slot="star"] { display: none !important; }
[data-tbx-hide~="owner"] [data-tbx-slot="owner"] { display: none !important; }
[data-tbx-hide~="shared"] [data-tbx-slot="shared"] { display: none !important; }
[data-tbx-hide~="cols"] [data-tbx-slot="cols"] { display: none !important; }
[data-tbx-hide~="rows"] [data-tbx-slot="rows"] { display: none !important; }
[data-tbx-hide~="views"] [data-tbx-slot="views"] { display: none !important; }
[data-tbx-hide~="modified"] [data-tbx-slot="modified"] { display: none !important; }
[data-tbx-hide~="words"] [data-tbx-slot="words"] { display: none !important; }
[data-tbx-hide~="category"] [data-tbx-slot="category"] { display: none !important; }
[data-tbx-hide~="cvalue"] [data-tbx-slot="cvalue"] { display: none !important; }
[data-tbx-hide~="position"] [data-tbx-slot="position"] { display: none !important; }
[data-tbx-hide~="salary"] [data-tbx-slot="salary"] { display: none !important; }
[data-tbx-hide~="deadline"] [data-tbx-slot="deadline"] { display: none !important; }
[data-tbx-hide~="priority"] [data-tbx-slot="priority"] { display: none !important; }
[data-tbx-hide~="responsible"] [data-tbx-slot="responsible"] { display: none !important; }
[data-tbx-hide~="code"] [data-tbx-slot="code"] { display: none !important; }
[data-tbx-hide~="type"] [data-tbx-slot="type"] { display: none !important; }
/* v1017 — خانات TABLE_KIT لقوائم المشاريع (المشاريع · المستخلصات · أوامر التغيير · الضمانات · المراسلات) */
[data-tbx-hide~="contract"] [data-tbx-slot="contract"] { display: none !important; }
[data-tbx-hide~="items"] [data-tbx-slot="items"] { display: none !important; }
[data-tbx-hide~="value"] [data-tbx-slot="value"] { display: none !important; }
[data-tbx-hide~="certNo"] [data-tbx-slot="certNo"] { display: none !important; }
[data-tbx-hide~="retention"] [data-tbx-slot="retention"] { display: none !important; }
[data-tbx-hide~="adv"] [data-tbx-slot="adv"] { display: none !important; }
[data-tbx-hide~="invoice"] [data-tbx-slot="invoice"] { display: none !important; }
[data-tbx-hide~="voNo"] [data-tbx-slot="voNo"] { display: none !important; }
[data-tbx-hide~="ref"] [data-tbx-slot="ref"] { display: none !important; }
[data-tbx-hide~="reason"] [data-tbx-slot="reason"] { display: none !important; }
[data-tbx-hide~="impact"] [data-tbx-slot="impact"] { display: none !important; }
[data-tbx-hide~="duration"] [data-tbx-slot="duration"] { display: none !important; }
[data-tbx-hide~="addendum"] [data-tbx-slot="addendum"] { display: none !important; }
[data-tbx-hide~="no"] [data-tbx-slot="no"] { display: none !important; }
[data-tbx-hide~="bank"] [data-tbx-slot="bank"] { display: none !important; }
[data-tbx-hide~="pct"] [data-tbx-slot="pct"] { display: none !important; }
[data-tbx-hide~="issue"] [data-tbx-slot="issue"] { display: none !important; }
[data-tbx-hide~="by"] [data-tbx-slot="by"] { display: none !important; }

/* ═══ 📥 v1028 — استيراد وتصدير البيانات (حزمة التأسيس) — assets/data_exchange.js ═══
   أصناف الوحدة كلها بادئتها dx- (قاعدة 11: لا صنف يُخترع بلا تعريف هنا). الألوان من الهوية؛
   الدلالي (أخضر جديد · أزرق تحديث · كهرماني تخطّي · أحمر خطأ) يحمل معنى لا هوية. */
.dx-hero { background: linear-gradient(135deg, #014034, #047857); color: #fff; border-radius: 14px; padding: 18px 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.dx-hero h3 { margin: 0; font-size: 17px; font-weight: 900; color: #fff; }
.dx-hero p { margin: 4px 0 0; font-size: 12.5px; opacity: .9; max-width: 720px; line-height: 1.7; }
.dx-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-inline-start: auto; }
.dx-hero .btn { font-weight: 800; }
.dx-hero .btn-ghost-hero { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.dx-hero .btn-ghost-hero:hover { background: rgba(255,255,255,.24); }
.dx-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 14px; }
.dx-step { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; }
.dx-step-n { background: #014034; color: #fff; border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px; flex: 0 0 auto; }
.dx-step b { display: block; font-size: 13px; color: #0f172a; }
.dx-step span { font-size: 11.5px; color: #475569; line-height: 1.6; }
.dx-group { margin-bottom: 14px; }
.dx-group-h { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; font-weight: 900; color: #014034; font-size: 13.5px; }
.dx-group-h::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
.dx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.dx-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; transition: box-shadow .15s, transform .15s; }
.dx-card:hover { box-shadow: 0 6px 18px rgba(1,64,52,.10); transform: translateY(-1px); }
.dx-card-t { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; color: #0f172a; }
.dx-card-t .dx-ic { width: 32px; height: 32px; border-radius: 9px; background: #ecfdf5; color: #047857; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; }
.dx-count { margin-inline-start: auto; background: #f1f5f9; color: #334155; border-radius: 9px; padding: 1px 8px; font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums; }
.dx-count.is-empty { background: #fef3c7; color: #92400e; }
.dx-card-d { font-size: 11.5px; color: #64748b; line-height: 1.55; min-height: 2.6em; }
.dx-card-a { display: flex; gap: 6px; flex-wrap: wrap; }
.dx-card-a .btn { padding: 4px 9px; font-size: 11.5px; }
.dx-modal { max-width: min(1240px, 96vw); }
.dx-wiz { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; font-size: 12px; }
.dx-wiz-s { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px; background: #f1f5f9; color: #64748b; font-weight: 700; }
.dx-wiz-s.on { background: #ecfdf5; color: #014034; border: 1px solid #a7f3d0; }
.dx-wiz-s.done { background: #d1fae5; color: #065f46; }
.dx-wiz-n { width: 20px; height: 20px; border-radius: 50%; background: #cbd5e1; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; }
.dx-wiz-s.on .dx-wiz-n, .dx-wiz-s.done .dx-wiz-n { background: #047857; }
.dx-drop { border: 2px dashed #a7f3d0; background: #f0fdf4; border-radius: 14px; padding: 34px 20px; text-align: center; cursor: pointer; transition: background .15s; }
.dx-drop:hover, .dx-drop.is-over { background: #dcfce7; }
.dx-drop b { display: block; font-size: 14px; color: #014034; margin-bottom: 4px; }
.dx-drop span { font-size: 12px; color: #475569; }
.dx-sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.dx-sheet { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.dx-sheet.is-off { opacity: .55; }
.dx-sheet-t { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 12.5px; }
.dx-sheet select { width: 100%; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 12px; }
.dx-map { width: 100%; border-collapse: collapse; font-size: 12px; }
.dx-map th { background: #f8fafc; color: #334155; padding: 7px 8px; text-align: center; font-weight: 800; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; z-index: 2; }
.dx-map td { padding: 5px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.dx-map select { width: 100%; padding: 5px 7px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 12px; }
.dx-map .is-req { color: #b91c1c; font-weight: 900; }
.dx-sum { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; }
.dx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9px; font-size: 11.5px; font-weight: 800; border: 1px solid transparent; font-variant-numeric: tabular-nums; }
.dx-pill.new { background: #d1fae5; color: #065f46; }
.dx-pill.upd { background: #dbeafe; color: #1e40af; }
.dx-pill.same { background: #f1f5f9; color: #475569; }
.dx-pill.skip { background: #fef3c7; color: #92400e; }
.dx-pill.err { background: #fee2e2; color: #991b1b; }
.dx-prev { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.dx-prev th { background: #f8fafc; color: #334155; padding: 6px 7px; text-align: center; font-weight: 800; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; z-index: 2; white-space: nowrap; }
.dx-prev td { padding: 4px 7px; border-bottom: 1px solid #f1f5f9; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.dx-prev tr.err td { background: #fff1f2; }
.dx-prev tr.skip td { background: #fffbeb; }
.dx-prev td.dx-msg { white-space: normal; max-width: 360px; color: #991b1b; font-size: 11px; }
.dx-scroll { max-height: 52vh; overflow: auto; border: 1px solid #e2e8f0; border-radius: 10px; }
.dx-opening { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; font-size: 12.5px; }
.dx-opening .fs-amt { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; font-weight: 900; }
.dx-bal-ok { color: #065f46; font-weight: 900; }
.dx-bal-bad { color: #b91c1c; font-weight: 900; }
.dx-progress { height: 10px; background: #e2e8f0; border-radius: 6px; overflow: hidden; }
.dx-progress > i { display: block; height: 100%; background: linear-gradient(90deg, #047857, #10b981); width: 0; transition: width .2s; }
.dx-report { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.dx-report-c { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; }
.dx-report-c b { display: block; font-size: 12.5px; color: #0f172a; }
.dx-report-c span { font-size: 11.5px; color: #475569; }
.dx-note { font-size: 11.5px; color: #64748b; line-height: 1.7; }
.dx-note b { color: #334155; }
[dir="ltr"] .dx-count, [dir="ltr"] .dx-hero-actions { margin-inline-start: auto; }

/* 📂 v1029 — وسم «من ملفّ الحساب» على خانة الافتتاحي في ميزان الأرصدة: زخرفةٌ بالـCSS كي يبقى نصّ الخانة رقماً صرفاً يصنّفه table_polish */
.coa-bal-table td.coa-rec-open { position: relative; }
.coa-bal-table td.coa-rec-open::after { content: '📂'; font-size:11px; margin-inline-start: 4px; opacity: .8; }

/* 🔢 v1030 — شارة عدد التعديلات على زرّ «حركة السجل» (نظير شارة الملاحظات nx-cnt · لون هوية لا دلالي) */
.action-btn.rh-has { position: relative; }
.rh-cnt {
  position: absolute; top: -3px; inset-inline-end: -3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: #014034; color: #fff;
  font-size: 10.5px; font-weight: 900; line-height: 15px; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  direction: ltr; unicode-bidi: isolate; pointer-events: none;
  box-shadow: 0 0 0 1.5px #fff;
}
/* 📂 v1030 — مؤشّر الأرصدة الافتتاحية من ملفّات الحسابات في شريط شجرة الحسابات */
.coa-rec-open-chip { border-color: #fcd34d !important; background: #fffbeb !important; color: #78350f !important; font-weight: 800; }

/* ═══ 🧾 v1031 — مودال قيد اليومية: «بطاقة القيد» وجدول السطور بهوية Emerald Ledger (طلب المالك: تنسيق عالي المهارة) ═══
   المعرّفات والأصناف الوظيفية (jv_docNo · jv_date · jv_status · jv_sourceType · jv-debit-input …) كما هي — الطبقة بصرية.
   الدلالي محفوظ: المدين أحمر خافت والدائن أخضر خافت · نغمات الحالة دلالية. مقصور على #jvForm فلا يمسّ مودالاً آخر. */
#jvForm .jv-head { display: flex; flex-direction: column; gap: 12px; }
#jvForm .jv-head-strip { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1.25fr; gap: 12px; }
#jvForm .jv-head-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
#jvForm .jv-head-cell { display: flex; flex-direction: column; min-width: 0; }
#jvForm .jv-head-cell > label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: #0f172a; margin: 0 0 6px; line-height: 1.3; }
#jvForm .jv-req { color: #dc2626; font-weight: 900; }
#jvForm .jv-head-tag { margin-inline-start: auto; font-size: 10.5px; font-weight: 700; color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
#jvForm .jv-head-cell > input, #jvForm .jv-head-cell > select, #jvForm .jv-status-pill {
  height: 44px; box-sizing: border-box; width: 100%; padding: 0 12px;
  border: 1.5px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a;
  font-size: 14px; font-weight: 600; font-family: inherit; line-height: 42px; transition: border-color .15s, box-shadow .15s;
}
#jvForm .jv-head-cell > select { padding-inline-end: 34px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: left 12px center; }
[dir="ltr"] #jvForm .jv-head-cell > select { background-position: right 12px center; }
#jvForm .jv-head-cell > input:focus, #jvForm .jv-head-cell > select:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
#jvForm .jv-head-cell > input[readonly], #jvForm .jv-head-cell > input[disabled], #jvForm .jv-head-cell > select[disabled] { background: #f8fafc; color: #334155; cursor: default; }
#jvForm .jv-head-cell > input.req-field.field-invalid, #jvForm .jv-head-cell > select.req-field.field-invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
#jvForm .jv-docno { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 900; letter-spacing: .6px; text-align: center; direction: ltr; background: #f0fdfa !important; color: #014034 !important; border-color: #99f6e4 !important; cursor: not-allowed; }
#jvForm .jv-status-pill { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 900; font-size: 13px; letter-spacing: .1px; }
#jvForm .jv-status-pill[data-tone="draft"]    { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
#jvForm .jv-status-pill[data-tone="pending"]  { background: #fff7ed; color: #9a3412; border-color: #fdba74; }
#jvForm .jv-status-pill[data-tone="audited"], #jvForm .jv-status-pill[data-tone="posted"] { background: #dcfce7; color: #166534; border-color: #86efac; }
#jvForm .jv-status-pill[data-tone="returned"], #jvForm .jv-status-pill[data-tone="voided"] { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
#jvForm .jv-head-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#jvForm .jv-co-chip { display: inline-flex; align-items: center; gap: 6px; background: #ecfdf5; color: #014034; border: 1px solid #a7f3d0; border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 800; }
#jvForm .jv-head-help { font-size: 11.5px; color: #64748b; line-height: 1.6; }
#jvForm .jv-head-company { display: none; }   /* ثابت الشركة الواحدة — المنتقي يبقى للحفظ والحارس ولا يُعرَض */
@media (max-width: 900px) { #jvForm .jv-head-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #jvForm .jv-head-strip { grid-template-columns: 1fr; } }

/* ── جدول السطور ── */
#jvForm .jv-lines-container { border: 1px solid #cfe9df; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(1,64,52,.06); }
#jvForm .jv-lines-table { font-size: 13px; }
#jvForm .jv-lines-table thead th { background: linear-gradient(180deg, #f0fdfa, #e6f7f1); color: #014034; font-size: 12px; font-weight: 900; padding: 11px 10px; text-align: start; border-bottom: 2px solid #a7f3d0; white-space: nowrap; vertical-align: middle; }
#jvForm .jv-lines-table thead th.jv-th-n, #jvForm .jv-lines-table thead th.jv-th-amt, #jvForm .jv-lines-table thead th.jv-th-act { text-align: center; }
#jvForm .jv-lines-table thead th.jv-th-debit { color: #065f46; } #jvForm .jv-lines-table thead th.jv-th-credit { color: #991b1b; } /* v1032 — المدين أخضر والدائن أحمر (قرار المالك) */
#jvForm .jv-lines-table thead th span { font-weight: 600; color: #64748b; }
#jvForm .jv-lines-table tbody td { padding: 7px 8px; border-bottom: 1px solid #eef5f2; vertical-align: middle; }
#jvForm .jv-lines-table tbody tr[data-line-idx]:hover { background: #f6fdf9; }
#jvForm .jv-lines-table tbody tr[data-line-idx]:focus-within { background: #f0fdf4; }
#jvForm .jv-ln { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #e6f7f1; color: #014034; font-size: 11.5px; font-weight: 900; font-variant-numeric: tabular-nums; }
#jvForm .jv-lines-table td.col-num { text-align: center; }
#jvForm .jv-lines-table input[type="text"], #jvForm .jv-lines-table input[type="number"], #jvForm .jv-lines-table .jv-party-cell select, #jvForm .jv-lines-table input[data-amt] {
  height: 32px   /* 📝 v1199 — كان 40px؛ صفٌّ أخفّ بطلب المالك */; box-sizing: border-box; padding: 0 10px; border: 1.5px solid #dbe4e0; border-radius: 9px; font-size: 13.5px; background: #fff; color: #0f172a; font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
/* 📝 v1199 — صفُّ بيان السطر: رفيعٌ تحت الحساب والطرف، والصفُّ الرئيسي بلا حدٍّ أسفله كي يبدوا سطراً واحداً */
#jvForm .jv-lines-table tbody tr[data-line-idx] td, .jv-lines-table tbody tr[data-line-idx] td { border-bottom: 0; padding-bottom: 2px; }
#jvForm .jv-lines-table tbody tr.jv-note-row td, .jv-lines-table tbody tr.jv-note-row td { padding: 0 8px 4px; border-bottom: 1px solid #eff6ff; line-height: 1; }
/* المودالُ يُعطي حقولَ السطور 40px بمُحدِّدٍ معرّفي (#jvForm) — فحقلُ البيان يُغلَب بالمعرّف نفسه */
#jvForm .jv-lines-table tbody tr.jv-note-row .jv-note-input, .jv-lines-table tbody tr.jv-note-row .jv-note-input { display: block; width: 100%; box-sizing: border-box; height: auto; min-height: 26px; padding: 4px 8px; font-size: 12px; line-height: 1.35; border: 1px dashed #cbd5e1; border-radius: 5px; background: #f8fafc; color: #334155; resize: none; overflow: hidden; white-space: pre-wrap; word-break: break-word; font-family: inherit; }   /* 📝 v1200 — يلتفّ ويتّسع آلياً */
#jvForm .jv-lines-table tbody tr.jv-note-row .jv-note-input:focus, .jv-lines-table tbody tr.jv-note-row .jv-note-input:focus { background: #fff; border-style: solid; }

#jvForm .jv-lines-table input:focus, #jvForm .jv-lines-table .jv-party-cell select:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); background: #fff; }
#jvForm .jv-lines-table .jv-amt-cell input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14.5px; text-align: right; direction: ltr; -moz-appearance: textfield; }
#jvForm .jv-lines-table .jv-amt-cell input::-webkit-outer-spin-button, #jvForm .jv-lines-table .jv-amt-cell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#jvForm .jv-lines-table .jv-amt-cell input::placeholder { color: #cbd5e1; font-weight: 600; }
#jvForm .jv-lines-table .jv-debit-input { background: #fff5f5; border-color: #fecaca; color: #991b1b; }
#jvForm .jv-lines-table .jv-credit-input { background: #f0fdf4; border-color: #bbf7d0; color: #065f46; }
#jvForm .jv-lines-table .jv-debit-input:focus { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
#jvForm .jv-lines-table .jv-credit-input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
#jvForm .jv-lines-table .jv-party-cell select { width: 100%; font-size: 12.5px; font-weight: 700; }
#jvForm .jv-lines-table .jv-note-input { background: #fff !important; border: 1.5px solid #dbe4e0 !important; border-radius: 9px !important; }
#jvForm .jv-lines-table tfoot .jv-line-totals td { background: #f8fafc; border-top: 2px solid #014034; padding: 10px 8px; }
#jvForm .jv-lines-table .jv-tot-label { text-align: end; font-weight: 900; color: #334155; font-size: 12.5px; letter-spacing: .2px; }
#jvForm .jv-lines-table .jv-amt-cell { text-align: right; }
#jvForm .jv-total-value { display: inline-block; direction: ltr; unicode-bidi: isolate; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; font-size: 15.5px; font-weight: 900; padding: 4px 10px; border-radius: 8px; }
#jvForm #jv_totalDebit { color: #065f46; background: #ecfdf5; } #jvForm #jv_totalCredit { color: #991b1b; background: #fff1f2; }
#jvForm .jv-balance-status { text-align: center; font-weight: 900; font-size: 12.5px; }
#jvForm .jv-balance-status.balanced { color: #065f46; } #jvForm .jv-balance-status.unbalanced { color: #b91c1c; }
#jvForm .jv-lines-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: #fff; border-top: 1px solid #eef5f2; }
#jvForm .jv-lines-actions .jv-shortcut-hint { margin-inline-start: auto; font-size: 11.5px; color: #94a3b8; }
#jvForm .jv-lines-table .action-btn { width: 30px; height: 30px; border-radius: 8px; }
/* v1031 — القواعد القديمة للإجمالي والتوازن كانت بـ!important (كهرماني متدرّج · شارات ممتلئة نابضة) فتغلب الطبقة الجديدة؛ تُغلَب هنا بنطاق #jvForm والأهمية نفسها */
#jvForm .jv-lines-table .jv-line-totals td { background: #f8fafc !important; color: #0f172a !important; border-top: 2px solid #014034 !important; padding: 10px 8px !important; }
#jvForm .jv-lines-table .jv-total-value { color: inherit; }
#jvForm .jv-lines-table .jv-balance-status { display: table-cell; padding: 10px 8px !important; border-radius: 0; font-size: 12.5px; }
#jvForm .jv-lines-table .jv-balance-status.balanced { background: #f8fafc !important; color: #065f46 !important; }
#jvForm .jv-lines-table .jv-balance-status.unbalanced { background: #f8fafc !important; color: #b91c1c !important; animation: none; }
#jvForm .jv-lines-table .jv-balance-status::before { content: ''; }
#jvForm .jv-lines-table .jv-balance-status span, #jvForm .jv-lines-table .jv-balance-status { font-weight: 900; }

/* ═══ v1032 — منتقي شجرة الحسابات (assets/account_tree_picker.js) ═══ */
.atp-panel { position: fixed; z-index: 10200; background: #fff; border: 1.5px solid #99f6e4; border-radius: 12px; box-shadow: 0 18px 48px rgba(1,64,52,.22), 0 2px 8px rgba(0,0,0,.08); display: flex; flex-direction: column; overflow: hidden; font-size: 13px; animation: atp-in 140ms ease-out; }
.atp-panel.atp-up { animation-name: atp-in-up; }
@keyframes atp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes atp-in-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.atp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; background: linear-gradient(135deg, #f0fdfa, #ecfdf5); border-bottom: 1px solid #99f6e4; flex: 0 0 auto; }
.atp-count { font-size: 11.5px; font-weight: 800; color: #014034; }
.atp-tools { display: flex; gap: 4px; }
.atp-tool { border: 1px solid #99f6e4; background: #fff; color: #0f766e; border-radius: 7px; padding: 3px 9px; font-size: 11px; font-weight: 800; cursor: pointer; font-family: inherit; }
.atp-tool:hover { background: #ccfbf1; }
.atp-recent { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 10px; border-bottom: 1px dashed #d1fae5; background: #fafffe; flex: 0 0 auto; }
.atp-recent-lbl { font-size: 10.5px; font-weight: 800; color: #64748b; }
.atp-chip { border: 1px solid #cbd5e1; background: #fff; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; color: #0f172a; cursor: pointer; font-family: inherit; display: inline-flex; gap: 5px; align-items: center; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atp-chip:hover, .atp-chip.is-sel { border-color: #10b981; background: #ecfdf5; color: #065f46; }
.atp-body { overflow-y: auto; padding: 4px 0; flex: 1 1 auto; }
.atp-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; padding-inline-start: calc(10px + var(--d, 0) * 18px); cursor: pointer; border-inline-start: 3px solid transparent; line-height: 1.35; }
.atp-row:hover { background: #f8fafc; }
.atp-row.is-active { background: #f0fdfa; border-inline-start-color: #10b981; }
.atp-group { color: #334155; font-weight: 800; user-select: none; }
.atp-group .atp-name { font-weight: 800; }
.atp-caret { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; color: #0f766e; transition: transform .15s; flex: 0 0 auto; }
[dir="rtl"] .atp-caret svg { transform: scaleX(-1); }
.atp-group.is-open .atp-caret { transform: rotate(90deg); }
.atp-kids { margin-inline-start: auto; font-size: 10.5px; font-weight: 800; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.atp-leaf { color: #0f172a; }
.atp-leaf.is-sel { background: #ecfdf5; }
.atp-leaf.is-sel .atp-name { color: #065f46; font-weight: 800; }
.atp-check { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; color: #10b981; flex: 0 0 auto; }
.atp-code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700; color: #014034; background: #f1f5f9; border-radius: 5px; padding: 1px 6px; direction: ltr; unicode-bidi: isolate; flex: 0 0 auto; }
.atp-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atp-name mark, .atp-code mark { background: #fef08a; color: inherit; border-radius: 3px; padding: 0 1px; }
.atp-type { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 1px 8px; flex: 0 0 auto; }
.atp-empty { padding: 22px 12px; text-align: center; color: #64748b; font-size: 12.5px; }
.atp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-top: 1px solid #e2e8f0; background: #f8fafc; font-size: 11px; color: #475569; flex: 0 0 auto; }
.atp-path { font-weight: 700; color: #0f766e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.atp-keys { color: #94a3b8; white-space: nowrap; flex: 0 0 auto; }
#jvForm .jv-account-input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }

/* ═══ v1032 — دليل الأشخاص ومنتقي المستلمين (assets/people_directory.js · الملاحظات) ═══ */
.pd-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.pd-avatar-ini { color: #fff; font-weight: 900; font-size: 12px; letter-spacing: 0; }
.rcp { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; overflow: hidden; }
.rcp.is-all { opacity: .55; pointer-events: none; }
.rcp-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; }
.rcp-search { flex: 1 1 220px; min-width: 160px; height: 36px; border: 1.5px solid #cbd5e1; border-radius: 9px; padding: 0 12px; font: inherit; font-size: 13px; background: #fff; }
.rcp-search:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.rcp-count { font-size: 11.5px; font-weight: 800; color: #014034; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 999px; padding: 3px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rcp-btn { border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: 8px; padding: 5px 10px; font-size: 11.5px; font-weight: 800; cursor: pointer; font-family: inherit; white-space: nowrap; }
.rcp-btn:hover { border-color: #10b981; color: #065f46; background: #f0fdfa; }
.rcp-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border-bottom: 1px dashed #e2e8f0; }
.rcp-chips[hidden] { display: none; }
.rcp-chip { display: inline-flex; align-items: center; gap: 6px; background: #f0fdfa; border: 1px solid #99f6e4; color: #014034; border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 11.5px; font-weight: 800; }
.rcp-chip .pd-avatar { width: 20px; height: 20px; font-size: 10.5px; }   /* قاعدة 73: لا خطّ أصغر من 10.5px */
.rcp-chip-x { border: 0; background: transparent; color: #0f766e; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; font-family: inherit; }
.rcp-chip-x:hover { color: #b91c1c; }
.rcp-groups { max-height: 330px; overflow-y: auto; padding: 6px 10px 10px; }
.rcp-group-h { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; color: #475569; margin: 8px 0 6px; }
.rcp-group-h::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
.rcp-group-h span { background: #f1f5f9; border-radius: 999px; padding: 0 8px; font-variant-numeric: tabular-nums; }
.rcp-group[hidden] { display: none; }
.rcp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.rcp-tile { display: flex; align-items: center; gap: 10px; text-align: start; border: 1.5px solid #e2e8f0; background: #fff; border-radius: 12px; padding: 8px 10px; cursor: pointer; font-family: inherit; position: relative; min-height: 54px; transition: border-color .12s, background .12s, box-shadow .12s; }
.rcp-tile:hover { border-color: #99f6e4; background: #fafffe; }
.rcp-tile.is-on { border-color: #10b981; background: #ecfdf5; box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.rcp-tile[hidden] { display: none; }
/* ✉️ v1216 — بطاقةٌ أغلقت واردها: تُعرَض مقفولةً بسببها المكتوب لا تختفي (قرار المالك) */
.rcp-tile.is-locked { border-style: dashed; border-color: #cbd5e1; background: #f8fafc; cursor: not-allowed; opacity: .78; }
.rcp-tile.is-locked:hover { border-color: #cbd5e1; background: #f8fafc; }
.rcp-tile.is-locked .rcp-name { color: #475569; }
.rcp-tile.is-locked .rcp-sub { color: #b45309; font-weight: 700; }
.rcp-tile.is-locked .rcp-kind { color: #b45309 !important; background: #fffbeb !important; border-color: #fde68a !important; }
.rcp-tile.is-locked .rcp-mark { color: #94a3b8; opacity: 1; }
.rcp-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rcp-name { font-weight: 800; color: #0f172a; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcp-sub { font-size: 11px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcp-kind { font-size:10.5px; font-weight: 800; color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 999px; padding: 0 7px; margin-top: 2px; align-self: flex-start; }
.rcp-tile[data-kind="emp"] .rcp-kind { color: #6d28d9; background: #f5f3ff; border-color: #ddd6fe; }
.rcp-mark { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #cbd5e1; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto; }
.rcp-tile.is-on .rcp-mark { background: #10b981; border-color: #10b981; }
.rcp-mark svg { width: 12px; height: 12px; }
.rcp-empty, .rcp-none { padding: 18px 12px; text-align: center; color: #64748b; font-size: 12.5px; }
.rcp-none { background: #fffbeb; color: #92400e; border-top: 1px dashed #fcd34d; }
.rcp-error { margin: 0 10px 10px; padding: 7px 10px; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 8px; font-size: 12px; font-weight: 800; }
.rcp-error[hidden], .rcp-empty[hidden] { display: none; }
.rcp-hint { padding: 0 10px 8px; font-size: 11px; color: #64748b; }

/* ═══════════════════════════════════════════════════════════════════
   v1033 — شاشة قيود اليومية: تبويبات بهوية واحدة ونقطة فئوية · شريط الرؤى (الحركة · حسب المصدر · يحتاج انتباهك) ·
   تصفية سريعة · لوحة فلاتر بتسميات · شريط جماعي · قوالب واختصارات — أصناف حقيقية بدل الأنماط المضمَّنة (قاعدة 11)
   ═══════════════════════════════════════════════════════════════════ */
.jv-tab { background: #fff; border: 1.5px solid #e2e8f0; color: #334155; box-shadow: none; }
.jv-tab .jv-tab-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tab-color, #94a3b8); box-shadow: 0 0 0 3px rgba(148,163,184,.22); flex-shrink: 0; }
.jv-tab:hover { border-color: var(--tab-color, #94a3b8); background: #f8fafc; transform: none; }
.jv-tab.active { background: var(--el-grad-hero); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(1,64,52,.22); }
.jv-tab.active .jv-tab-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
.jv-tab.active .jv-tab-cnt { background: rgba(255,255,255,.22); color: #fff; }
.jv-tab.is-empty { color: #94a3b8; }
.jv-tab.is-empty .jv-tab-dot { opacity: .45; }
.jv-tab.is-empty .jv-tab-cnt { background: #f1f5f9; color: #94a3b8; }
.jv-tab-cnt { font-variant-numeric: tabular-nums; }

/* بطاقات الحالات القابلة للنقر في الشريط الصغير — نغمات دلالية */
.jv-kpi-mini.is-click { cursor: pointer; transition: transform .15s, background .15s; }
.jv-kpi-mini.is-click:hover { transform: translateY(-1px); background: rgba(255,255,255,.22); }
.jv-kpi-mini.tone-amber { background: rgba(245,158,11,.22); }
.jv-kpi-mini.tone-red { background: rgba(220,38,38,.24); }
.jv-kpi-mini.tone-cyan { background: rgba(8,145,178,.24); }
.jv-kpi-mini.tone-violet { background: rgba(124,58,237,.24); }

/* شريط الرؤى */
.jv-insights { display: grid; grid-template-columns: 1.5fr 1.1fr 1.2fr; gap: 12px; margin: 0 0 12px; }
.jv-ins-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.04); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.jv-ins-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #f1f5f9; background: linear-gradient(180deg, #f8fafc, #fff); }
.jv-ins-title { font-size: 12.5px; font-weight: 800; color: #014034; }
.jv-ins-meta { font-size: 11.5px; color: #64748b; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.jv-ins-meta strong { color: #0f172a; font-weight: 800; font-variant-numeric: tabular-nums; }
.jv-ins-body { padding: 10px 14px 12px; flex: 1; min-width: 0; }
.jv-delta { font-weight: 800; font-size: 11px; padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.jv-delta.up { background: #d1fae5; color: #065f46; }
.jv-delta.down { background: #fee2e2; color: #991b1b; }
.jv-delta.flat { background: #f1f5f9; color: #475569; }
.jv-spark { width: 100%; height: auto; display: block; }
.jv-spark-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: #94a3b8; font-variant-numeric: tabular-nums; margin-top: 2px; }
.jv-spark-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.jv-spark-stat { background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; padding: 6px 9px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jv-spark-stat span { font-size: 10.5px; color: #64748b; }
.jv-spark-stat strong { font-size: 13px; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jv-donut-wrap { display: flex; align-items: center; gap: 14px; }
.jv-donut { width: 104px; height: 104px; flex-shrink: 0; }
.jv-donut-n { font-size: 19px; font-weight: 800; fill: #0f172a; font-family: inherit; }
.jv-donut-l { font-size: 11px; fill: #64748b; font-family: inherit; }
.jv-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.jv-legend-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) 56px auto; align-items: center; gap: 7px; font-size: 11.5px; }
.jv-legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c, #94a3b8); }
.jv-legend-lbl { color: #334155; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jv-legend-bar { height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.jv-legend-bar i { display: block; height: 100%; background: var(--c, #94a3b8); border-radius: 999px; }
.jv-legend-n { color: #0f172a; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 11px; white-space: nowrap; }
.jv-legend-more { font-size: 10.5px; color: #94a3b8; }
.jv-alerts { display: flex; flex-direction: column; gap: 6px; }
.jv-alert { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; padding: 7px 10px; border-radius: 10px; border: 1px solid; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; transition: transform .15s, box-shadow .15s; }
.jv-alert:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.06); }
.jv-alert-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.jv-alert-msg { flex: 1; min-width: 0; }
.jv-alert-n { color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-variant-numeric: tabular-nums; }
.jv-alert[data-tone="red"]   { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.jv-alert[data-tone="amber"] { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.jv-alert[data-tone="rose"]  { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.jv-alert[data-tone="cyan"]  { background: #ecfeff; border-color: #a5f3fc; color: #155e75; }
.jv-alert[data-tone="slate"] { background: #f8fafc; border-color: #e2e8f0; color: #475569; }
.jv-alert[data-tone="red"] .jv-alert-n   { background: #dc2626; }
.jv-alert[data-tone="amber"] .jv-alert-n { background: #d97706; }
.jv-alert[data-tone="rose"] .jv-alert-n  { background: #be123c; }
.jv-alert[data-tone="cyan"] .jv-alert-n  { background: #0e7490; }
.jv-alert[data-tone="slate"] .jv-alert-n { background: #64748b; }
.jv-allclear { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 10px; color: #047857; font-weight: 700; font-size: 12.5px; background: #ecfdf5; border: 1px dashed #a7f3d0; border-radius: 10px; }
.jv-allclear-mark { width: 18px; height: 18px; border-radius: 50%; background: #10b981; position: relative; flex-shrink: 0; }
.jv-allclear-mark::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* اللوحة: زرّ الفلاتر · التصفية السريعة · لوحة الفلاتر */
.jv-toolbar .jv-tb-btn.is-on { background: #014034; color: #fff; border-color: #014034; }
.jv-tb-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #10b981; color: #fff; font-size: 10.5px; font-weight: 800; margin-inline-start: 2px; }
.jv-tb-caret { opacity: .7; margin-inline-start: 2px; }
.jv-qchips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 14px; border-top: 1px dashed #e2e8f0; }
.jv-qchips-lbl { font-size: 11px; font-weight: 800; color: #64748b; margin-inline-end: 4px; }
.jv-qchip { padding: 4px 12px; border-radius: 999px; border: 1.5px solid #cbd5e1; background: #fff; color: #475569; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all .15s; }
.jv-qchip:hover { border-color: #047857; color: #014034; background: #f0fdfa; }
.jv-qchip.active { border-color: #014034; background: var(--el-grad-hero); color: #fff; }
.jv-qchips-sp { flex: 1; }
.jv-showall { padding: 5px 14px; border-radius: 999px; border: 1.5px solid #b91c1c; background: #fff; color: #b91c1c; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.jv-showall:hover { background: #b91c1c; color: #fff; }
.jv-filters-panel[hidden] { display: none !important; }   /* قاعدة 56: السمة والقاعدة معاً */
.jv-filters-panel { align-items: flex-end; gap: 10px 12px; }
.jv-ff { display: flex; flex-direction: column; gap: 3px; min-width: 150px; }
.jv-ff > label { font-size: 11px; font-weight: 700; color: #475569; }
.jv-ff .jv-filter-input { min-width: 0; width: 100%; }

/* شريط الإجراءات الجماعية */
.jv-bulk { position: sticky; top: 0; z-index: 50; background: var(--el-grad-hero); color: #fff; padding: 10px 16px; border-radius: 12px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; box-shadow: 0 4px 12px rgba(1,64,52,.3); }
.jv-bulk-n { font-weight: 800; font-size: 13px; }
.jv-bulk-sep { width: 1px; height: 20px; background: rgba(255,255,255,.35); margin: 0 4px; }
.jv-bulk-sp { flex: 1; }
.jv-bulk-btn { border: 1.5px solid rgba(255,255,255,.7); background: rgba(255,255,255,.14); color: #fff; padding: 5px 12px; border-radius: 8px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.jv-bulk-btn.solid { background: #fff; color: #014034; border-color: #fff; }
.jv-bulk-btn.ok { background: #10b981; border-color: #10b981; }
.jv-bulk-btn.danger { background: #dc2626; border-color: #dc2626; }
.jv-bulk-btn:hover { filter: brightness(1.08); }

/* عرض الإحصائيات */
.jv-stats { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.jv-stats .fsum-wrap { margin: 0; }
.jv-stats .jv-stat-kpis { margin: 0; }
.jv-top-share { height: 6px; background: #f1f5f9; border-radius: 999px; overflow: hidden; min-width: 90px; }
.jv-top-share i { display: block; height: 100%; background: var(--el-grad-btn); border-radius: 999px; }

/* القوالب والاختصارات */
.modal-header.jv-tpl-head { background: var(--el-grad-hero); color: #fff; align-items: flex-start; }
.jv-tpl-head h3 { color: #fff; margin: 0; }
.jv-tpl-sub { font-size: 11.5px; opacity: .9; margin-top: 3px; font-weight: 500; line-height: 1.4; }
.jv-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.jv-tpl-card { border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 12px; background: #fff; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, box-shadow .15s; }
.jv-tpl-card:hover { border-color: #6ee7b7; box-shadow: 0 4px 14px rgba(1,64,52,.1); }
.jv-tpl-name { font-weight: 800; color: #014034; font-size: 13.5px; }
.jv-tpl-desc { font-size: 11.5px; color: #475569; line-height: 1.4; }
.jv-tpl-meta { font-size: 11px; color: #64748b; font-variant-numeric: tabular-nums; }
.jv-tpl-lines { list-style: none; margin: 0; padding: 6px 8px; background: #f8fafc; border-radius: 8px; display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; }
.jv-tpl-lines li { display: flex; justify-content: space-between; gap: 8px; }
.jv-tpl-acc { color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jv-tpl-amt { font-variant-numeric: tabular-nums; font-weight: 800; }
.jv-tpl-amt.dr { color: #065f46; }
.jv-tpl-amt.cr { color: #991b1b; }
.jv-tpl-more { color: #94a3b8; }
.jv-tpl-actions { display: flex; gap: 6px; margin-top: auto; }
.jv-tpl-actions .btn { flex: 1; }
.jv-tpl-del { border-color: #fecaca; color: #b91c1c; }
.jv-tpl-empty { text-align: center; padding: 32px 16px; color: #64748b; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; }
.jv-tpl-empty strong { color: #0f172a; font-size: 14px; }
.jv-kb-list { display: flex; flex-direction: column; gap: 4px; }
.jv-kb-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid #f1f5f9; font-size: 12.5px; color: #334155; }
.jv-kb-key { background: #014034; color: #fff; padding: 3px 10px; border-radius: 6px; font-family: 'SF Mono', monospace; font-weight: 800; min-width: 44px; text-align: center; box-shadow: 0 2px 0 #012b23; }
@media (max-width: 1000px) { .jv-insights { grid-template-columns: 1fr 1fr; } .jv-ins-spark { grid-column: 1 / -1; } }
@media (max-width: 768px) {
  .jv-insights { grid-template-columns: 1fr; }
  .jv-kpi-headline { grid-template-columns: 1fr 1fr; }
  .jv-kpi-mini-strip { flex-wrap: wrap; }
  .jv-toolbar { flex-direction: column; align-items: stretch; }
  .jv-search-box { width: 100%; }
  .jv-ff { min-width: 100%; }
}

/* v1034 — 🏦 بيانات الحساب البنكي من تبويب طرق التحصيل والدفع (الأيقونة على الفرع + المودال) */
.pm-bank-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 12px; border: 1px solid var(--el-em-200); background: var(--el-em-50); color: var(--el-teal-800); flex: 0 0 auto; }
.pm-bank-btn.is-set { background: var(--el-grad-btn); border-color: transparent; color: #fff; }
.pm-bank-btn.is-off { opacity: .45; cursor: not-allowed; background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.pm-bank-btn .ai-ico { width: 14px; height: 14px; }
/* v1038 — 🏦 العارض المختصر لبيانات الحساب البنكي (للقراءة · من أيقونة الفرع): رأس بالهوية · بطاقات تسمية/قيمة · مرفقات تُفتح بالنقر */
.modal.pm-bank-view-modal { max-width: 500px; }
.pm-bank-view-hd { background: var(--el-grad-hero); }
.pm-bank-view-hd .pm-bank-view-hd-ic { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 18px; }
.pm-bank-view-hd .pm-bank-view-hd-ic svg { width: 20px; height: 20px; stroke: #fff; }
.pm-bank-view-hd .pm-bank-view-hd-t { flex: 1; min-width: 0; }
.pm-bank-view-hd .pm-bank-view-hd-t h3 { margin: 0; font-size: 15.5px; font-weight: 900; }
.pm-bank-view-hd .pm-bank-view-hd-t span { display: block; font-size: 11.5px; opacity: .9; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-bank-view { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px !important; }
.pm-bank-view-lock { font-size: 12px; font-weight: 800; color: #92400e; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 8px; padding: 6px 10px; }
.pm-bank-view-card { background: #fff; border: 1.5px solid var(--el-em-100); border-radius: 12px; padding: 10px 12px; }
.pm-bank-view-ttl { font-size: 11.5px; font-weight: 900; color: var(--el-teal-800); letter-spacing: 0; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.pm-bank-view-n { font-size: 10.5px; font-weight: 800; color: var(--el-em-700); background: var(--el-em-50); border: 1px solid var(--el-em-200); border-radius: 999px; padding: 0 7px; line-height: 16px; }
.pm-bank-view-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: baseline; padding: 5px 0; border-top: 1px dashed #e2e8f0; }
.pm-bank-view-row:first-of-type { border-top: 0; }
.pm-bank-view-k { font-size: 11.5px; font-weight: 700; color: #64748b; }
.pm-bank-view-v { font-size: 13px; font-weight: 800; color: #0f172a; overflow-wrap: anywhere; }
.pm-bank-view-v[dir="ltr"] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; text-align: start; }
.pm-bank-view-v.is-empty { color: #94a3b8; font-weight: 600; }
.pm-bank-view-empty { font-size: 11.5px; color: #94a3b8; text-align: center; padding: 8px; border: 1px dashed #e2e8f0; border-radius: 8px; }
.pm-bank-view-atts { display: flex; flex-direction: column; gap: 6px; }
.pm-bank-view-att { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 9px; cursor: pointer; font: inherit; color: #0f172a; }
.pm-bank-view-att:hover { background: var(--el-em-50); border-color: var(--el-em-200); }
.pm-bank-view-att .pm-bank-view-att-ic { font-size: 16px; flex: 0 0 auto; }
.pm-bank-view-att .pm-bank-view-att-ic .ai-ico { width: 16px; height: 16px; }
.pm-bank-view-att .pm-bank-view-att-nm { flex: 1; min-width: 0; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-bank-view-att .pm-bank-view-att-sz { font-size: 10.5px; color: #64748b; flex: 0 0 auto; }
.pm-bank-view-ft { flex-wrap: wrap; }
/* v1035 — مودال البنك المستقلّ تقاعد (البيانات على سجلّ الفرع داخل مودال طريقة الدفع) */

/* v1034 — قائمة قيود اليومية: توزيع الأعمدة بحسب بياناتها · تذييل الإجماليات · الصفّ المحدَّد · الدائن أحمر والمدين أخضر (قرار v1032) */
.jv-list-table th[data-tbx-cell="docNo"], .jv-list-table td[data-tbx-slot="docNo"] { width: 120px; min-width: 110px; }
/* 👤 v1333 ← v1342 — منشئُ المستند تحت رقمه في كل شاشةٍ مالية وقيودِ اليومية (طلب المالك · CREATOR_FILTER.lineHtml): خطٌّ صغير بحدّ
   الجداول الأدنى (11px · قاعدة 73) ولونٌ هادئ، وخطُّه خطُّ الواجهة من قاعدة «*» لا الأحاديُّ العريضُ الملوّن الذي تحمله بعضُ الخانات،
   والاسمُ الطويل يُقصّ بثلاث نقاط واسمُه كاملاً في التلميح — وعرضُه خارج حساب عرض العمود (width:0 · min-width:100%) فلا تتّسع الخانة.
   ومحاذاتُه محاذاةُ الرقم فوقه (match-parent وتوأمُها -webkit-): اتّجاهُه «auto» ليُقصّ الاسمُ العربيّ من طرفه الصحيح، فبلاها
   كان يُحاذى يميناً تحت رقمٍ يساريّ في خانةٍ LTR لم يصنّفها table_polish (أوامرُ الشراء بعد إعادة رسم التبويب) */
td .doc-creator { display: block; width: 0; min-width: 100%; margin-top: 2px; font-size: 11px; font-weight: 600; font-style: normal;
  line-height: 1.3; letter-spacing: normal; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: -webkit-match-parent; text-align: match-parent; }
.jv-list-table th[data-tbx-cell="date"], .jv-list-table td[data-tbx-slot="date"] { width: 104px; min-width: 96px; }
.jv-list-table td[data-tbx-slot="desc"] { min-width: 240px; }
.jv-list-table th[data-tbx-cell="debit"], .jv-list-table th[data-tbx-cell="credit"], .jv-list-table td[data-tbx-slot="debit"], .jv-list-table td[data-tbx-slot="credit"] { width: 128px; min-width: 112px; }
.jv-list-table th[data-tbx-cell="status"], .jv-list-table td[data-tbx-slot="status"] { width: 160px; }
.jv-list-table th[data-tbx-cell="source"], .jv-list-table td[data-tbx-slot="source"] { width: 140px; }
.jv-list-table th[data-tbx-cell="att"], .jv-list-table td[data-tbx-slot="att"] { width: 56px; text-align: center; }
.jv-list-table th[data-tbx-cell="act"], .jv-list-table td[data-tbx-slot="act"] { width: 168px; }
/* v1045 — عمود «الحالة» هو العمود الوحيد للحالة (حُذف عمود التدقيق بقرار المالك)،
   وشارته نفسها مدخلُ القرار: مراجعة واعتماد · أو فكّ اعتماد وإرجاع للمنشئ. */
.jv-state-btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; padding: 0; cursor: pointer; font: inherit; border-radius: 999px; transition: transform .12s ease, box-shadow .12s ease; }
.jv-state-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(15,23,42,.14); }
.jv-state-btn:focus-visible { outline: 2px solid var(--el-em-500); outline-offset: 2px; }
.jv-state-caret { font-size: 13px; font-weight: 900; color: #94a3b8; line-height: 1; }
html[dir="rtl"] .jv-state-caret { transform: scaleX(-1); }
.jv-state-btn:hover .jv-state-caret { color: var(--el-teal-800); }
@media (prefers-reduced-motion: reduce) { .jv-state-btn { transition: none; } .jv-state-btn:hover { transform: none; } }
.jv-list-table tbody tr.is-selected { background: var(--el-em-50); box-shadow: inset 3px 0 0 var(--el-em-500); }
.jv-list-table tbody tr.is-selected:hover { background: var(--el-em-100); }
.jv-list-table .jv-debit { color: #047857 !important; }
.jv-list-table .jv-credit { color: #b91c1c !important; }
.jv-list-table .jv-src-ref { font-size: 10.5px; color: var(--el-teal-800); margin-top: 2px; font-weight: 700; text-decoration: underline; }
.jv-list-table .co-attach-btn { cursor: pointer; border: none; font-size: 11px; font-weight: 700; }
.jv-list-table .jv-att-add { background: var(--el-em-50); color: var(--el-teal-800); border: 1px dashed var(--el-em-300); font-weight: 900; min-width: 28px; }
.jv-list-table .jv-att-add:hover { background: var(--el-em-100); border-style: solid; }
.jv-list-table tfoot tr.jv-list-foot td { background: var(--el-em-50); border-top: 2px solid var(--el-em-500); font-size: 12px; padding: 10px 8px; color: var(--el-teal-900); }
.jv-list-table tfoot .jv-foot-lbl { color: #475569; font-weight: 700; }
.jv-list-table tfoot .jv-foot-ok { display: inline-block; background: #d1fae5; color: #065f46; padding: 2px 8px; border-radius: 6px; font-weight: 800; }
.jv-list-table tfoot .jv-foot-diff { display: inline-block; background: #fee2e2; color: #991b1b; padding: 2px 8px; border-radius: 6px; font-weight: 800; }
.jv-list-table tfoot .jv-foot-unb { display: inline-block; margin-inline-start: 6px; color: #9a3412; font-weight: 700; font-size: 11px; }
/* v1034 — قفل خانتَي الرصيد الافتتاحي في مودال الحساب بعد ترحيل القيد الافتتاحي · وتلميح زرّ المسودّة في الميزان */
.coa-opening-lock { display: block; margin-top: 4px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 4px 8px; font-size: 11.5px; font-weight: 700; }
.coa-rec-open-hint { font-size: 11px; color: #92400e; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   v1035 — ✍️ تبويبات قيود اليومية بارزة (أيقونة في مربّع بلون المصدر · اسم · عدّاد) · شريط «القيود اليدوية» ·
   أزرار الفلاتر والعرض حبوباً بالهوية · 🏦 مودال طريقة الدفع بعمودَين مربّعَين وصندوق البنك على سجلّ الفرع ·
   🔏 (ختم التحقّق الإلكتروني يحمل أنماطه مضمَّنة داخل المطبوعة — قاعدة 82)
   ═══════════════════════════════════════════════════════════════════ */
.jv-tabs-wrap { background: #fff; padding: 12px; border-radius: 14px; border: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(1,64,52,.06); }
.jv-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.jv-tab { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; justify-content: start; text-align: start; padding: 10px 12px 10px 14px; min-height: 62px; border-radius: 12px; border: 1.5px solid #e2e8f0; background: #fff; position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s; }
.jv-tab::before { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 4px; background: var(--tab-color, #94a3b8); }
.jv-tab .jv-tab-ic { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; background: color-mix(in srgb, var(--tab-color, #94a3b8) 14%, #fff); border: 1px solid color-mix(in srgb, var(--tab-color, #94a3b8) 35%, #fff); flex: 0 0 auto; }
.jv-tab .jv-tab-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jv-tab .jv-tab-lbl { font-weight: 800; font-size: 13px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jv-tab .jv-tab-cnt { font-size: 12.5px; font-weight: 800; color: var(--tab-color, #475569); background: transparent; padding: 0; display: inline-flex; gap: 4px; align-items: baseline; font-variant-numeric: tabular-nums; }
.jv-tab .jv-tab-cnt small { font-size: 10.5px; font-weight: 600; color: #64748b; }
.jv-tab:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(1,64,52,.12); border-color: var(--tab-color, #94a3b8); background: #fff; }
.jv-tab.active { background: var(--el-grad-hero); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(1,64,52,.28); }
.jv-tab.active::before { background: #fff; }
.jv-tab.active .jv-tab-ic { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); }
.jv-tab.active .jv-tab-lbl, .jv-tab.active .jv-tab-cnt, .jv-tab.active .jv-tab-cnt small { color: #fff; }
.jv-tab.is-empty { opacity: .72; }
.jv-tab.is-empty .jv-tab-ic { filter: grayscale(.6); }
.jv-tab.is-empty .jv-tab-lbl { color: #64748b; }
@media (max-width: 1100px) { .jv-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .jv-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jv-manual-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 12px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(135deg, #f5f3ff, #fff); border: 1.5px solid #ddd6fe; box-shadow: 0 2px 8px rgba(124,58,237,.08); }
.jv-manual-cta-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jv-manual-cta-txt strong { font-size: 14px; color: #4c1d95; }
.jv-manual-cta-txt span { font-size: 12px; color: #475569; }
.jv-manual-cta .btn { flex: 0 0 auto; }
@media (max-width: 720px) { .jv-manual-cta { flex-direction: column; align-items: stretch; } }
/* أزرار شريط الأدوات — حبوب بالهوية بدل الرمادي والأزرق */
.jv-toolbar .btn.jv-tb-btn, .jv-toolbar .btn.btn-outline { border-radius: 999px; border: 1.5px solid var(--el-em-200); background: #fff; color: var(--el-teal-800); font-weight: 800; padding: 7px 14px; box-shadow: 0 1px 2px rgba(1,64,52,.06); transition: background .15s, box-shadow .15s, transform .15s; }
.jv-toolbar .btn.jv-tb-btn:hover, .jv-toolbar .btn.btn-outline:hover { background: var(--el-em-50); box-shadow: 0 4px 12px rgba(1,64,52,.12); transform: translateY(-1px); }
.jv-toolbar .jv-tb-btn.is-on { background: var(--el-grad-btn); color: #fff; border-color: transparent; }
.jv-toolbar .jv-tb-btn.is-on .jv-tb-badge { background: #fff; color: var(--el-teal-800); }
.jv-vt-btn { border-radius: 999px; font-weight: 800; }
.jv-vt-btn.active { background: var(--el-grad-hero); color: #fff; }
/* 🏦 مودال طريقة الدفع: عمودان مربّعان وصندوق بيانات البنك */
#gdForm .gd-pm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
#gdForm .gd-pm-grid > .form-field.full { grid-column: 1 / -1; }
#gdForm .gd-pm-grid .form-field > input[type="text"], #gdForm .gd-pm-grid .form-field > select { border-radius: 8px; }
.gd-pm-bank-box { grid-column: 1 / -1; background: var(--el-em-50); border: 1.5px solid var(--el-em-200); border-radius: 12px; padding: 12px 14px; }
.gd-pm-bank-box[hidden] { display: none !important; }
.gd-pm-bank-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gd-pm-bank-hd .gd-pm-bank-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--el-grad-btn); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 17px; }
.gd-pm-bank-hd .gd-pm-bank-ic .ai-ico, .gd-pm-bank-hd .gd-pm-bank-ic svg { width: 18px; height: 18px; }
.gd-pm-bank-hd strong { display: block; font-size: 13.5px; color: var(--el-teal-900); }
.gd-pm-bank-hd span { display: block; font-size: 11.5px; color: #475569; }
.gd-pm-bank-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.gd-pm-bank-grid > .form-field.full { grid-column: 1 / -1; }
#gd_pmIbanHint[data-state="ok"] { color: #047857; font-weight: 700; }
#gd_pmIbanHint[data-state="bad"] { color: #b91c1c; font-weight: 700; }
@media (max-width: 640px) { #gdForm .gd-pm-grid, .gd-pm-bank-grid { grid-template-columns: 1fr; } }

/* ═══ v1036 — ⚙️ الإعدادات: رؤوس بطاقات بالهوية · تبويب السنوات المالية المُحسَّن · شارة «حساسة» · وضع الاستعراض بالنقر على الكود · وثائق الشركة ═══ */
.set-card-head { background: linear-gradient(135deg, var(--el-teal-900), var(--el-teal-800)); border-bottom: 2px solid var(--el-em-500); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.set-card-head .card-title { color: #fff; }
.set-card-sub { font-size: 11.5px; color: rgba(255,255,255,.82); font-weight: 600; line-height: 1.6; }
.set-tab-flag { display: inline-block; background: #fef3c7; color: #92400e; font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 6px; margin-inline-start: 4px; vertical-align: middle; border: 1px solid #fcd34d; }
.fy-rule { font-size: 11.5px; color: #475569; font-weight: 600; line-height: 1.6; }
.fy-subbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fy-sub { border: 1px solid var(--el-em-200); background: #fff; color: var(--el-teal-900); border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 800; cursor: pointer; }
.fy-sub.active { background: var(--el-grad-hero); color: #fff; border-color: transparent; }
.fy-sub-cnt { background: #f1f5f9; color: #475569; border-radius: 9px; padding: 1px 7px; font-size: 10.5px; font-weight: 900; margin-inline-start: 4px; }
.fy-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.fy-kpi { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; border-inline-start: 4px solid var(--el-teal-800); }
.fy-kpi.ok { border-inline-start-color: var(--el-em-500); }
.fy-kpi.lock { border-inline-start-color: #475569; }
.fy-kpi.warn { border-inline-start-color: #f59e0b; background: #fffbeb; }
.fy-kpi-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--el-em-50, #ecfdf5); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.fy-kpi-l { font-size: 11px; color: #64748b; font-weight: 700; }
.fy-kpi-v { font-size: 17px; font-weight: 900; color: #0f172a; font-variant-numeric: tabular-nums; }
.fy-note { border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 12.5px; font-weight: 700; line-height: 1.7; }
.fy-note.warn { background: #fffbeb; border: 1.5px solid #fcd34d; color: #92400e; }
.fy-add-grid { align-items: end; }
.fy-add-btn .btn { width: 100%; }
.fy-table tbody tr.fy-current { background: #f0fdf9; }
.fy-table tbody tr.fy-current td:first-child { border-inline-start: 4px solid var(--el-em-500); }
.fy-code { font-size: 14px; font-variant-numeric: tabular-nums; }
.fy-cur-badge { display: inline-block; margin-inline-start: 6px; background: var(--el-em-500); color: #fff; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 6px; vertical-align: middle; }
.fy-flag { margin-inline-start: 4px; cursor: help; }
.fy-prog { display: inline-block; width: 90px; height: 8px; background: #e2e8f0; border-radius: 6px; overflow: hidden; vertical-align: middle; }
.fy-prog-bar { height: 100%; background: linear-gradient(90deg, var(--el-teal-800), var(--el-em-500)); }
.fy-prog-txt { margin-inline-start: 6px; font-size: 11px; font-weight: 800; color: #475569; font-variant-numeric: tabular-nums; vertical-align: middle; }
.fy-pill-closed { background: #475569; color: #fff; font-weight: 800; }
.fy-pill-partial { background: #fef3c7; color: #92400e; font-weight: 800; border: 1px solid #fcd34d; }
.fy-actions { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; justify-content: flex-start; white-space: nowrap; }
.fy-close-btn { background: #fff; color: #b91c1c; border: 1px solid #fca5a5; }
.fy-actions .action-btn { flex: 0 0 auto; }
.fy-act-months { padding: 6px 12px !important; font-size: 12px !important; white-space: nowrap; }
.fy-locked-note { font-size: 11.5px; color: #64748b; font-weight: 700; }
/* 📅 v1129 — سنةٌ بانتظار اعتماد قيد إقفالها (قرار المالك (أ)) — كهرمانيٌّ دلالي كالإقفال الجزئي */
.fy-pill-closing { background: #fef3c7; color: #92400e; font-weight: 800; border: 1px solid #fcd34d; }
.fy-closing-note { font-size: 11px; color: #92400e; font-weight: 700; white-space: nowrap; }
.fy-cancel-close { padding: 4px 10px; font-size: 11.5px; white-space: nowrap; }
.fy-table th, .fy-table td { vertical-align: middle; }
.fy-table thead th { text-align: center; }
.fy-table .col-num { width: 44px; text-align: center; color: #94a3b8; font-weight: 700; }
.fy-table td.fy-c { text-align: center; }
.fy-table td.fy-acts { min-width: 250px; }
.fy-days { font-variant-numeric: tabular-nums; font-weight: 700; }
.fy-close-btn:hover { background: #fef2f2; }

/* 🔗 v1036 — الكود في الصفّ رابط استعراض (مستمع مفوَّض في code_view_link.js) */
[data-id] > [data-tbx-slot="code"], [data-id] > [data-tbx-slot="docNo"], [data-id] > [data-tbx-slot="no"],
[data-id] > [data-tbx-cell="code"], [data-id] > [data-tbx-cell="docNumber"], [data-id] > [data-tbx-cell="docNo"], [data-id] > [data-tbx-cell="no"],
[data-id] [data-code-view] { cursor: pointer; }
[data-id] > [data-tbx-slot="code"]:hover, [data-id] > [data-tbx-slot="docNo"]:hover, [data-id] > [data-tbx-slot="no"]:hover,
[data-id] > [data-tbx-cell="code"]:hover, [data-id] > [data-tbx-cell="docNumber"]:hover, [data-id] > [data-tbx-cell="docNo"]:hover, [data-id] > [data-tbx-cell="no"]:hover,
[data-id] [data-code-view]:hover { color: var(--el-em-700, #047857); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
/* 🔗 v1164 — رابطُ الاستعراض المتسلسل: خانةٌ تسمّي مستنداً آخر تُفتحه بالنقر.
   تُرسَم رابطاً واضحاً (تسطيرٌ منقوط + لونُ الهوية) فيُعرَف أنها قابلة للنقر. */
.cvl-src { cursor: pointer; color: var(--el-teal-800, #115e59); font-weight: 700;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
  text-decoration-color: var(--el-em-300, #6ee7b7); border-radius: 4px; padding: 0 1px; }
.cvl-src:hover { color: var(--el-em-700, #047857); background: var(--el-em-50, #ecfdf5); text-decoration-style: solid; }
.cvl-src:focus-visible { outline: 2px solid var(--el-em-500, #10b981); outline-offset: 1px; }
.cvl-src[dir="ltr"] { unicode-bidi: isolate; }
.cvl-banner { background: #f0fdf9; border: 1px solid var(--el-em-200, #a7f3d0); color: var(--el-teal-900, #014034); border-radius: 10px; padding: 8px 12px; font-size: 12px; font-weight: 800; margin-bottom: 10px; grid-column: 1 / -1; }
.modal-backdrop.view-only .modal-header h3::after { content: ' · 👁'; font-size: .8em; opacity: .85; }

/* 🗂️ v1036 — وثائق ومستندات الشركة */
.cd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.cd-kpi { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; border-inline-start: 4px solid var(--el-teal-800); }
.cd-kpi.ok { border-inline-start-color: var(--el-em-500); }
.cd-kpi.warn { border-inline-start-color: #f59e0b; background: #fffbeb; }
.cd-kpi.bad { border-inline-start-color: #dc2626; background: #fef2f2; }
.cd-kpi.muted { border-inline-start-color: #94a3b8; }
.cd-kpi-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--el-em-50, #ecfdf5); display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.cd-kpi-l { font-size: 11px; color: #64748b; font-weight: 700; }
.cd-kpi-v { font-size: 17px; font-weight: 900; color: #0f172a; font-variant-numeric: tabular-nums; }
.cd-filters { background: #f8fafc; border-top: 1px dashed #cbd5e1; display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 18px; }
.cd-filters .search-box { flex: 1; min-width: 220px; }
.cd-actions { white-space: nowrap; text-align: center; }
.cd-status-pill { font-weight: 800; }
.cd-renew-row td { background: #f0fdf9; border-top: 2px solid var(--el-em-500); padding: 12px 14px; }
.cd-renew { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; align-items: end; }
.cd-renew .form-field label { font-size: 11.5px; font-weight: 800; color: var(--el-teal-900); }
.cd-renew .form-field input, .cd-renew .form-field textarea { font-size: 13px; }
.cd-renew-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 900; color: var(--el-teal-900); }
.cd-renew-head .cd-renew-was { font-size: 11.5px; color: #64748b; font-weight: 700; }
.cd-renew-foot { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cd-renew-foot .cd-renew-hint { flex: 1; font-size: 11px; color: #64748b; font-weight: 600; }
.cd-iban-hint { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: #64748b; }
.cd-iban-hint[data-state="ok"] { color: #047857; }
.cd-iban-hint[data-state="bad"] { color: #b91c1c; }
.cd-iban-hint button { margin-inline-start: 6px; }
.cd-hist { font-size: 11.5px; color: #475569; }
.cd-hist li { margin: 2px 0; }
.cd-modal-sub { font-size: 11.5px; opacity: .9; font-weight: 500; }
@media (max-width: 640px) { .cd-renew { grid-template-columns: 1fr; } .fy-kpis { grid-template-columns: 1fr 1fr; } }

/* ✉️ v1036 — تبويب بريد المنشأة */
.ms-note { background: #f0fdf9; border: 1px solid var(--el-em-200, #a7f3d0); color: var(--el-teal-900, #014034); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; font-weight: 600; line-height: 1.75; margin-bottom: 12px; }
.ms-note.warn { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.ms-smtp { border: 1px dashed #cbd5e1; border-radius: 12px; padding: 12px 14px; background: #f8fafc; margin-bottom: 10px; }
.ms-pass { display: flex; gap: 6px; align-items: center; }
.ms-pass input { flex: 1; }
.ms-inline-btn { padding: 2px 8px; font-size: 11px; margin-inline-start: 6px; }
.ms-check { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 6px; cursor: pointer; }
.ms-check input { width: 16px; height: 16px; accent-color: var(--el-em-500); }
.ms-status { margin-top: 6px; }
.ms-chip { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 8px; background: #f1f5f9; color: #475569; }
.ms-chip.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.ms-events { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-bottom: 8px; }
.ms-event { display: flex; align-items: center; gap: 8px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; background: #fff; }
.ms-event input { width: 17px; height: 17px; accent-color: var(--el-em-500); }
.ms-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 12px; border-top: 1px solid #e2e8f0; }
.ms-test { display: flex; gap: 6px; align-items: center; }
.ms-test input { min-width: 220px; font-size: 13px; }
.ms-result { flex: 1; font-size: 12px; font-weight: 800; color: #475569; }
.ms-result[data-state="ok"] { color: #047857; }
.ms-result[data-state="bad"] { color: #b91c1c; }
.ms-empty { padding: 16px; text-align: center; color: #94a3b8; font-size: 12.5px; }
.ms-log { font-size: 12px; }
.ms-open-log { margin-inline-start: 10px; font-size: 11.5px; vertical-align: middle; }

/* 🗂️ v1142 — «سجل البريد المرسل» (assets/sent_mail_log.js) */
.sml-shell { display: flex; flex-direction: column; gap: 12px; }
.sml-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--el-grad-hero); color: #fff; border-radius: 18px; padding: 16px 20px; box-shadow: 0 8px 28px rgba(6, 78, 59, .22); }
.sml-hero-ic { width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.sml-hero-svg { width: 28px; height: 28px; }
.sml-hero-txt { flex: 1 1 260px; min-width: 0; }
.sml-hero-txt h2 { margin: 0; font-size: 20px; font-weight: 900; }
.sml-hero-txt p { margin: 4px 0 0; font-size: 12.5px; opacity: .92; line-height: 1.7; }
.sml-hero-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sml-hero-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .35); font-weight: 700; }
.sml-hero-btn:hover { background: rgba(255, 255, 255, .26); }
.sml-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sml-kpi { background: #fff; border: 1px solid #e2e8f0; border-inline-start: 4px solid var(--el-teal-800); border-radius: 12px; padding: 10px 14px; }
.sml-kpi-v { font-size: 22px; font-weight: 900; color: var(--el-teal-900); font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
.sml-kpi-l { font-size: 12px; font-weight: 700; color: #475569; margin-top: 2px; }
.sml-kpi-h { font-size: 11px; color: #b45309; margin-top: 2px; }
.sml-kpi.is-ok { border-inline-start-color: var(--el-em-600); }
.sml-kpi.is-ok .sml-kpi-v { color: var(--el-em-700); }
.sml-kpi.is-bad { border-inline-start-color: #dc2626; }
.sml-kpi.is-bad .sml-kpi-v { color: #b91c1c; }
.sml-kpi.is-today { border-inline-start-color: var(--el-teal-600); }
.sml-kpi.is-rcp { border-inline-start-color: #d97706; }
.sml-scope { font-size: 12.5px; font-weight: 600; color: var(--el-teal-900); background: var(--el-em-50); border: 1px solid var(--el-em-200); border-radius: 10px; padding: 8px 12px; }
.sml-scope:empty { display: none; }
.sml-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 14px; }
.sml-f { display: flex; flex-direction: column; gap: 4px; min-width: 140px; flex: 1 1 150px; }
.sml-f > span { font-size: 11.5px; font-weight: 700; color: #475569; }
.sml-f input, .sml-f select { font-size: 13px; width: 100%; box-sizing: border-box; }
.sml-f-grow { flex: 2 1 320px; min-width: 260px; }   /* 🛡️ v1265 — البحثُ أعرضُ حقول الشريط (طلب المالك: «شريط البحث صغير») */
.sml-f:not(.sml-f-grow) { max-width: 260px; }   /* فلترٌ قصير لا يتمدّد وحده على سطرٍ كامل */
.sml-filters .btn { display: inline-flex; align-items: center; gap: 6px; }
.sml-card { padding: 0; overflow: hidden; }
.sml-card-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #e2e8f0; }
.sml-count { font-size: 12px; font-weight: 700; color: #475569; }
.sml-empty { padding: 30px 16px; text-align: center; color: #64748b; font-size: 13px; }
.sml-err { color: #b91c1c; }
.sml-table { font-size: 12.5px; }
.sml-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; font-size: 11.5px; color: var(--el-teal-800); white-space: nowrap; }
.sml-strong { font-weight: 700; color: #0f172a; }
.sml-sub { font-size: 11px; color: #64748b; margin-top: 2px; }
.sml-subject { font-weight: 600; color: #0f172a; min-width: 170px; max-width: 320px; }
.sml-table .sml-sub { line-height: 1.45; }
.sml-table td[data-tbx-cell="recipients"] { min-width: 212px; }   /* الخانة المسمّاة لا الموضع (قاعدة 80) — العنوان لا ينكسر سطرين */
.sml-table td[data-tbx-cell="what"] { min-width: 150px; }
.sml-table .sml-addr { white-space: nowrap; }
@media (max-width: 1180px) { .sml-table .sml-src { display: none; } }   /* العرض الأضيق: «من شاشة» في الاستعراض وحده فلا يتضخّم السطر */
.sml-rcp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 1px 0; }
.sml-tag { font-size: 10.5px; font-weight: 800; color: var(--el-teal-800); background: var(--el-em-50); border: 1px solid var(--el-em-200); border-radius: 6px; padding: 0 5px; }
.sml-addr { font-size: 11.5px; color: #334155; unicode-bidi: isolate; }
.sml-kind { display: inline-block; font-size: 11px; font-weight: 800; color: var(--el-teal-900); background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px; padding: 1px 7px; }
.sml-att-n { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #334155; }
.sml-pill { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 8px; padding: 2px 9px; border: 1px solid; white-space: nowrap; }
.sml-pill.is-sent { color: #065f46; background: #ecfdf5; border-color: #6ee7b7; }
.sml-pill.is-failed { color: #991b1b; background: #fef2f2; border-color: #fca5a5; }
.sml-pill.is-pending { color: #92400e; background: #fffbeb; border-color: #fcd34d; }
.sml-acts-th { text-align: center; }
.sml-acts { white-space: nowrap; }
.sml-acts .action-btn + .action-btn { margin-inline-start: 4px; }
.sml-acts .action-btn[disabled] { opacity: .4; cursor: not-allowed; }
.sml-more { text-align: center; padding: 12px; border-top: 1px solid #e2e8f0; }
.sml-modal-head { background: var(--el-grad-hero); color: #fff; }
.sml-modal-title { flex: 1; min-width: 0; }
.sml-modal-title h3 { margin: 0; }
.sml-modal-title .sml-sub { color: rgba(255, 255, 255, .85); }
.sml-view { padding: 16px 18px; }
.sml-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-bottom: 12px; }
.sml-kv { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 12px; min-width: 0; }
.sml-kv.is-wide { grid-column: 1 / -1; }
.sml-kv-l { font-size: 11px; font-weight: 700; color: #64748b; }
.sml-kv-v { font-size: 13px; color: #0f172a; margin-top: 3px; overflow-wrap: anywhere; }
.sml-atts { display: flex; flex-direction: column; gap: 6px; }
.sml-att { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sml-att-name { font-weight: 600; overflow-wrap: anywhere; }
.sml-att .btn { display: inline-flex; align-items: center; gap: 6px; }
.sml-frame-cap { font-size: 12px; font-weight: 700; color: #475569; background: #f1f5f9; border: 1px solid #e2e8f0; border-bottom: 0; border-radius: 10px 10px 0 0; padding: 7px 12px; }
.sml-frame { width: 100%; height: 480px; border: 1px solid #e2e8f0; border-radius: 0 0 10px 10px; background: #fff; display: block; }
#smlViewBd .modal-footer .btn { display: inline-flex; align-items: center; gap: 6px; }

/* 📊 v1145 — «مركز التقارير» (assets/reports_centre.js) · الجداول المالية من .fs-table (قاعدة 11) */
.rc-shell { display: flex; flex-direction: column; gap: 12px; }
.rc-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--el-grad-hero); color: #fff; border-radius: 18px; padding: 16px 20px; box-shadow: 0 8px 28px rgba(6, 78, 59, .22); }
.rc-hero-ic { width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rc-hero-svg { width: 28px; height: 28px; }
.rc-hero-txt { flex: 1 1 280px; min-width: 0; }
.rc-hero-txt h2 { margin: 0; font-size: 20px; font-weight: 900; }
.rc-hero-txt p { margin: 4px 0 0; font-size: 12.5px; opacity: .92; line-height: 1.7; }
.rc-search { flex: 0 1 280px; min-width: 200px; }
.rc-search input { width: 100%; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .95); color: #0f172a; padding: 8px 12px; font-size: 13px; }
.rc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rc-policy { font-size: 12.5px; font-weight: 600; color: var(--el-teal-900); background: var(--el-em-50); border: 1px solid var(--el-em-200); border-radius: 10px; padding: 8px 12px; line-height: 1.7; }
.rc-group { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px 16px; }
.rc-group-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rc-group-h h3 { margin: 0; font-size: 16px; font-weight: 900; color: var(--el-teal-900); }
.rc-group-ic { width: 22px; height: 22px; color: var(--el-teal-800); flex: 0 0 auto; }
.rc-group-n { margin-inline-start: auto; font-size: 11.5px; font-weight: 800; color: var(--el-teal-800); background: var(--el-em-50); border: 1px solid var(--el-em-200); border-radius: 999px; padding: 2px 10px; }
/* ═══ 🗂️ v1170 — شكلُ مركز التقارير (طلب المالك): تبويباتٌ وأقسامٌ تُطوى ومفضّلة ═══
   أربعةٌ وأربعون تقريراً في صفحةٍ واحدة لا يجد فيها المحاسبُ تقريرَه: فمجموعةٌ لكل
   تبويب بعددها، وقسمٌ يُطوى بنقرة، وصفُّ المفضّلة يسبق الكلّ. */
.rc-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.rc-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 99px; cursor: pointer;
  border: 1.5px solid #e2e8f0; background: #fff; color: #475569; font: inherit; font-size: 12.5px; font-weight: 800;
  transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease; }
.rc-tab:hover { border-color: #6ee7b7; color: var(--el-teal-900, #014034); }
.rc-tab.is-on { background: linear-gradient(135deg, #047857, #10b981); border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px rgba(4,120,87,.22); }
.rc-tab-ic { width: 16px; height: 16px; flex-shrink: 0; }
.rc-tab-n { font-style: normal; font-size: 11px; font-weight: 900; padding: 1px 7px; border-radius: 99px;
  background: rgba(15,23,42,.08); color: inherit; }
.rc-tab.is-on .rc-tab-n { background: rgba(255,255,255,.22); }
.rc-found { font-size: 12.5px; font-weight: 800; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0;
  border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.rc-fav-group .rc-group-h { color: #b45309; }
.rc-fav-star { font-size: 16px; color: #f59e0b; }
.rc-allsec { margin-inline-start: auto; font: inherit; font-size: 11.5px; font-weight: 800; color: #475569;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 99px; padding: 3px 12px; cursor: pointer; }
.rc-allsec:hover { border-color: #cbd5e1; color: #0f172a; }
.rc-section { margin-top: 10px; }
.rc-section-h { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; font: inherit;
  font-size: 12px; font-weight: 800; color: #64748b; margin-bottom: 8px; padding: 6px 8px; border-radius: 9px;
  background: transparent; border: 0; cursor: pointer; }
.rc-section-h:hover { background: #f1f5f9; color: #0f172a; }
.rc-sec-caret { font-size: 11px; color: #94a3b8; }
.rc-sec-t { flex: 1; }
.rc-star-svg { display: block; }
.rc-sec-n { margin-inline-start: auto; font-size: 11px; font-weight: 900; color: #475569;
  background: #f1f5f9; border-radius: 99px; padding: 1px 8px; }
.rc-cards[hidden] { display: none !important; }
.rc-card-wrap { position: relative; display: flex; }
.rc-card-wrap > .rc-card { flex: 1; }
.rc-fav { position: absolute; inset-inline-end: 8px; top: 8px; width: 26px; height: 26px; border-radius: 8px;
  border: 0; background: transparent; color: #cbd5e1; font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
  transition: color .14s ease, background .14s ease; }
.rc-fav:hover { background: #fffbeb; color: #f59e0b; }
.rc-fav.is-on { color: #f59e0b; }
.rc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.rc-card { display: flex; align-items: flex-start; gap: 10px; text-align: start; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.rc-card:hover, .rc-card:focus-visible { border-color: var(--el-teal-600); box-shadow: 0 4px 14px rgba(6, 78, 59, .12); outline: none; }
.rc-card-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--el-em-50); color: var(--el-teal-800); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rc-card-svg { width: 20px; height: 20px; }
.rc-card-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rc-card-t { font-size: 14px; font-weight: 800; color: #0f172a; }
.rc-card-d { font-size: 12px; color: #475569; line-height: 1.6; }
.rc-card-src { font-size: 11px; font-weight: 700; color: var(--el-teal-800); }
.rc-soon { font-size: 12px; color: #64748b; text-align: center; padding: 4px 0 8px; }
.rc-empty { padding: 30px 16px; text-align: center; color: #64748b; font-size: 13px; }
.rc-err { color: #b91c1c; }
.rc-rep-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px 16px; }
.rc-back { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.rc-rep-title { flex: 1 1 320px; min-width: 0; }
.rc-crumb { font-size: 11.5px; font-weight: 700; color: #64748b; }
.rc-rep-title h2 { margin: 2px 0 0; font-size: 19px; font-weight: 900; color: var(--el-teal-900); }
.rc-rep-title p { margin: 3px 0 4px; font-size: 12.5px; color: #475569; line-height: 1.7; }
.rc-rep-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rc-act { display: inline-flex; align-items: center; gap: 6px; background: var(--el-teal-800); color: #fff; border: 1px solid var(--el-teal-800); font-weight: 700; }
.rc-act:hover { background: var(--el-teal-900); }
.rc-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 14px; }
.rc-f { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.rc-f > span { font-size: 11.5px; font-weight: 700; color: #475569; }
.rc-f input, .rc-f select { font-size: 13px; }
.rc-f-grow { flex: 1 1 260px; }
.rc-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #334155; cursor: pointer; padding-bottom: 6px; }
.rc-reset { display: inline-flex; align-items: center; gap: 6px; }
.rc-notice { font-size: 12.5px; font-weight: 600; color: #92400e; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px; padding: 8px 12px; line-height: 1.7; }
.rc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.rc-kpi { background: #fff; border: 1px solid #e2e8f0; border-inline-start: 4px solid var(--el-teal-800); border-radius: 12px; padding: 10px 14px; min-width: 0; }
.rc-kpi-v { font-size: 18px; font-weight: 900; color: var(--el-teal-900); font-variant-numeric: tabular-nums; unicode-bidi: plaintext; overflow-wrap: anywhere; }
.rc-kpi-l { font-size: 12px; font-weight: 700; color: #475569; margin-top: 2px; }
.rc-kpi-h { font-size: 11px; color: #64748b; margin-top: 2px; }
.rc-kpi.is-ok { border-inline-start-color: var(--el-em-600); }
.rc-kpi.is-ok .rc-kpi-v { color: var(--el-em-700); }
.rc-kpi.is-bad { border-inline-start-color: #dc2626; }
.rc-kpi.is-bad .rc-kpi-v { color: #b91c1c; }
.rc-kpi.is-warn { border-inline-start-color: #d97706; }
.rc-kpi.is-warn .rc-kpi-v { color: #b45309; }
.rc-kpi.is-strong { border-inline-start-color: var(--el-teal-600); background: var(--el-em-50); }
.rc-kpi.is-muted .rc-kpi-v { font-size: 13px; color: #64748b; }
.rc-table-card { padding: 0; overflow: hidden; }
.rc-card-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #e2e8f0; }
.rc-count { font-size: 12px; font-weight: 700; color: #475569; }
.rc-table { font-size: 12.5px; }
.rc-table tfoot td { background: #ecfdf5; font-weight: 900; border-top: 2px solid var(--el-em-700); }
.rc-code, .rc-date { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; white-space: nowrap; unicode-bidi: isolate; direction: ltr; }
.rc-code { font-weight: 800; color: var(--el-teal-800); }
.rc-pill { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 8px; padding: 2px 9px; border: 1px solid; white-space: nowrap; }
.rc-pill.is-posted { color: #065f46; background: #ecfdf5; border-color: #6ee7b7; }
.rc-pill.is-pending { color: #92400e; background: #fffbeb; border-color: #fcd34d; }
/* v1282 — تجاوز المهلة والإعادة للتصحيح (تقارير الاعتماد): أحمرُ دلاليّ كتبويب «مُعادة للتصحيح» في مركز الاعتمادات */
.rc-pill.is-late { color: #991b1b; background: #fef2f2; border-color: #fca5a5; }
/* v1283 — الخطُّ المصغّر لمسار صافي الدخل في «الأداء الشهري» (رسمٌ متجهيّ بلون الهوية) */
.rc-spark { display: inline-block; vertical-align: middle; margin-inline-start: 8px; color: var(--el-teal-600); }
.rc-pend-amt { color: #b45309; }
.rc-table tr.rc-r-sec td { background: var(--el-teal-800); color: #fff; font-weight: 900; }
.rc-table tr.rc-r-grp td { background: #f8fafc; font-weight: 800; color: var(--el-teal-900); }
.rc-table tr.rc-r-acc td[data-tbx-cell="name"] { padding-inline-start: 28px; color: #334155; }
.rc-table tr.rc-r-sub td { font-weight: 800; color: #334155; border-top: 1px solid #cbd5e1; }
.rc-table tr.rc-r-sub td[data-tbx-cell="name"] { padding-inline-start: 18px; }
.rc-table tr.rc-r-tot td { background: #ecfdf5; font-weight: 900; border-top: 2px solid var(--el-em-700); }
.rc-table tr.rc-r-net td { background: #fef9c3; font-weight: 900; border-top: 2px solid #ca8a04; }
.rc-table tr.rc-r-open td { background: #f8fafc; font-style: italic; color: #475569; }
.rc-table tr.rc-r-pend td { background: #fffdf5; color: #78716c; }
.rc-table tr.rc-r-warn td { background: #fff7ed; color: #9a3412; }
.rc-notes { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
/* 👁️ v1260 — إخفاءُ الصفوف في مركز التقارير: زرّ «الصفوف» بجوار زرّ الأعمدة وقائمةٌ منبثقة بمربّعات (الإجمالياتُ تتبع الظاهر) */
.rc-bar-tools { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-count.is-hid { color: #b45309; }
.rc-rows-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; min-height: 32px;
  font: inherit; font-size: 12px; font-weight: 800; color: #014034; cursor: pointer;
  background: #fff; border: 1.5px solid #a7f3d0; border-radius: 9px;
}
.rc-rows-btn:hover, .rc-rows-btn[aria-expanded="true"] { background: #ecfdf5; border-color: #047857; }
.rc-rows-btn.is-on { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
.rc-rows-btn .ai-ico { width: 15px; height: 15px; }
.rc-rows-n { font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: #fde68a; color: #78350f; }
.rc-rows-menu {
  position: fixed; z-index: 2400; width: min(420px, calc(100vw - 16px)); max-height: min(560px, calc(100vh - 16px));
  display: flex; flex-direction: column; background: #fff; border: 1.5px solid #cbd5e1; border-radius: 12px;
  box-shadow: 0 14px 40px rgba(2, 20, 15, .22); overflow: hidden;
}
.rc-rm-head { display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-bottom: 1px solid #a7f3d0; }
.rc-rm-t { flex: 1; font-size: 12.5px; font-weight: 800; color: #065f46; line-height: 1.5; }
.rc-rm-tools { display: flex; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.rc-rm-q { flex: 1; min-width: 0; height: 36px; padding: 0 12px; font: inherit; font-size: 13px; border: 1.5px solid #cbd5e1; border-radius: 9px; background: #fff; color: #0f172a; }
.rc-rm-q:focus { outline: none; border-color: #047857; box-shadow: 0 0 0 3px rgba(4, 120, 87, .15); }
.rc-rm-btn { flex: none; padding: 7px 12px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; background: #fff; border: 1.5px solid #cbd5e1; border-radius: 9px; color: #334155; }
.rc-rm-btn:hover { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.rc-rm-btn.is-main { background: #047857; border-color: #047857; color: #fff; }
.rc-rm-btn.is-main:hover { background: #014034; border-color: #014034; color: #fff; }
.rc-rm-list { flex: 1; overflow-y: auto; padding: 4px 0; }
.rc-rm-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 13px; font-size: 12.5px; color: #0f172a; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.rc-rm-row:hover { background: #f8fafc; }
.rc-rm-row input { margin-top: 2px; width: 16px; height: 16px; accent-color: #047857; flex: none; }
.rc-rm-row.is-off .rc-rm-txt, .rc-rm-row.is-off .rc-rm-amt { color: #94a3b8; text-decoration: line-through; }
.rc-rm-i { flex: none; min-width: 22px; font-size: 11px; font-weight: 700; color: #64748b; font-variant-numeric: tabular-nums; }
.rc-rm-txt { flex: 1; line-height: 1.55; }
.rc-rm-amt { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; color: #014034; }
.rc-rm-empty { padding: 18px 13px; text-align: center; font-size: 12.5px; color: #64748b; }
.rc-rm-foot { padding: 8px 13px; font-size: 12px; font-weight: 700; color: #475569; background: #f8fafc; border-top: 1px solid #e2e8f0; }

.rc-note { font-size: 12px; color: #475569; line-height: 1.7; }
@media (max-width: 720px) { .rc-search { flex: 1 1 100%; } .rc-rep-actions { width: 100%; } }

/* ✉️ v1037 — «إرسال بالبريد» من الشاشات */
.action-btn.email:hover    { background: #ecfdf5; border-color: #6ee7b7; }
.mls-att { display: flex; flex-direction: column; gap: 8px; }
.mls-att .ms-check { margin-top: 0; }
.mls-att-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: #475569; padding: 8px 10px; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px; }
.mls-att-name strong { color: #0f172a; }
.mls-att { gap: 12px; }

/* ✉️ v1146 — نافذة البريد الجديدة: مستلمون كالبريد العادي (شرائح + اقتراحات) · صياغة بلغتين · PDF أو Excel */
.modal.mlx-modal { max-width: 780px; }
.mlx-modal .co-mhead-ic .ai-ico { width: 22px; height: 22px; }
.mlx-modal .co-mhead-txt h3 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlx-modal .emp-section .form-grid.mlx-rcps { gap: 12px; }
.mlx-field { position: relative; min-width: 0; }
.mlx-field[hidden], .mlx-sugg[hidden] { display: none !important; }
.mlx-lbl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-height: 22px; }
.mlx-lbl-acts { display: inline-flex; gap: 2px; margin-inline-start: auto; }
.mlx-link { border: 0; background: transparent; color: var(--el-em-700); font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 8px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.mlx-link:hover { background: var(--el-em-50); }
.mlx-link:focus-visible { outline: 2px solid var(--el-em-500); outline-offset: 1px; }
.mlx-link[hidden] { display: none !important; }
.mlx-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 5px 8px; border: 1.5px solid #dbe7e2; border-radius: 10px; background: #fbfdfc; cursor: text; transition: border-color .15s, box-shadow .15s; }
.mlx-box:focus-within { border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16,185,129,.16) !important; background: #fff; }
.mlx-box.req-field:focus-within { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.18) !important; }
.mlx-chips { display: contents; }
.mx-pro .form-field .mlx-box input.mlx-input, .form-field .mlx-box input.mlx-input { flex: 1 1 180px; min-width: 140px; min-height: 30px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 4px 4px !important; border-radius: 0 !important; font-size: 13.5px !important; outline: none; }
.mlx-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding-block: 3px; padding-inline: 10px 3px; border-radius: 999px; border: 1px solid #cfe3dc; background: #fff; font-size: 12.5px; line-height: 1.5; }
.mlx-chip.is-user { background: var(--el-em-50); border-color: #a7f3d0; }
.mlx-chip.is-emp { background: #fff; border-color: #cfe3dc; }
.mlx-chip.is-typed { background: #f8fafc; border-color: #e2e8f0; }
.mlx-chip-t { font-weight: 800; color: #0b1f1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.mlx-chip-m { color: #64748b; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.mlx-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #64748b; cursor: pointer; }
.mlx-chip-x:hover { background: #fee2e2; color: #b91c1c; }
.mlx-chip-x:focus-visible { outline: 2px solid var(--el-em-500); }
.mlx-chip-x .ai-ico { width: 13px; height: 13px; }
.mlx-sugg { position: absolute; inset-inline: 0; top: 100%; z-index: 40; margin-top: 4px; padding: 4px; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid #dbe7e2; border-radius: 12px; box-shadow: 0 18px 38px rgba(1,64,52,.16), 0 2px 6px rgba(15,23,42,.06); }
.mlx-sugg-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; cursor: pointer; }
.mlx-sugg-item.is-active, .mlx-sugg-item:hover { background: var(--el-em-50); }
.mlx-sugg-av { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; }
.mlx-sugg-av.is-new { background: #ecfdf5; color: var(--el-em-700); }
.mlx-sugg-av.is-new .ai-ico { width: 16px; height: 16px; }
.mlx-sugg-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.mlx-sugg-name { font-size: 13px; font-weight: 800; color: #0b1f1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlx-sugg-mail { font-size: 11.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; unicode-bidi: plaintext; }
.mlx-sugg-kind { flex: 0 1 auto; max-width: 42%; font-size: 11px; font-weight: 700; color: #475569; background: #f1f5f9; border-radius: 999px; padding: 2px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-section .form-help.mlx-help { font-size: 11.5px; margin-top: 10px; line-height: 1.7; }
.mx-pro .emp-section > h4.mlx-h4 { display: flex; align-items: center; flex-wrap: wrap; }
.mlx-lang { display: inline-flex; gap: 2px; padding: 3px; margin-inline-start: auto; border-radius: 10px; background: #f1f5f9; }
.mlx-lang-btn { border: 0; background: transparent; padding: 5px 14px; border-radius: 8px; font-family: inherit; font-size: 12.5px; font-weight: 800; color: #475569; cursor: pointer; }
.mlx-lang-btn.is-on { background: #fff; color: var(--el-teal-900); box-shadow: 0 1px 3px rgba(15,23,42,.14); }
.mlx-lang-btn:focus-visible { outline: 2px solid var(--el-em-500); outline-offset: 1px; }
.mlx-fmt { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.mlx-fmt-opt { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1.5px solid #dbe7e2; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.mlx-fmt-opt:hover { border-color: #a7f3d0; }
.mlx-fmt-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mlx-fmt-opt.is-on { border-color: var(--el-em-500); background: var(--el-em-50); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.mlx-fmt-opt:focus-within { outline: 2px solid var(--el-em-500); outline-offset: 2px; }
.mx-pro .mlx-fmt-opt { font-size: 13px; }
.mlx-fmt-t { font-size: 14px; font-weight: 900; color: #0b1f1a; }
.mlx-fmt-d { font-size: 12px; font-weight: 600; color: #475569; line-height: 1.6; }
.mlx-att-meta { color: #64748b; font-weight: 700; }
.mlx-preview { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.mlx-send { display: inline-flex; align-items: center; gap: 8px; }
.mlx-send .ai-ico, .mlx-preview .ai-ico { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .mlx-modal .co-mhead-txt h3 { white-space: normal; font-size: 15px; line-height: 1.4; }
  .mlx-chip-t { max-width: 150px; }
  .mlx-chip-m, .mlx-sugg-kind { display: none; }
  .mlx-preview { margin-inline-start: 0; }
}

/* ✉️ v1037 — بريد المنشأة وحده (لا مسار منصّة): سياسة · مزوّدون · توثيق */
.ms-policy strong { display: block; font-size: 13.5px; color: var(--el-teal-900, #014034); margin-bottom: 2px; }
.ms-verify-row { margin-bottom: 12px; }
.ms-chip.warn { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.ms-providers { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ms-prov { border: 1.5px solid #e2e8f0; background: #fff; color: #0f172a; border-radius: 10px; padding: 8px 14px; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.ms-prov:hover { border-color: var(--el-em-500); }
.ms-prov.active { border-color: var(--el-em-500); background: #f0fdf9; color: var(--el-teal-900, #014034); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.ms-prov-hint { font-size: 11.5px; color: #64748b; font-weight: 600; margin-bottom: 10px; line-height: 1.6; }
/* v1037 — إجراءات السنوات المالية صفّاً واحداً: القاعدة المركزية `td > div:has(> .action-btn)` تجعل الحاوية شبكةً ضيّقة للأيقونات
   فيتراكب زرّ «الشهور» النصّي عليها (لقطة المالك) — هنا صفّ مرن بخصوصية أعلى */
.fy-table td > div.fy-actions { display: flex !important; width: auto !important; margin: 0 !important; grid-template-columns: none; place-items: normal; justify-content: flex-start !important; }

/* ═══════════════════════════════════════════════════════════════════
   🌳 v1041 — شجرة مراكز التكلفة: صفٌّ واحد وأعمدة متحاذية
   ─────────────────────────────────────────────────────────────────
   السبب المقيس (بلاغ المالك): سطر الشجرة كان **73px** لأن عنقود
   الإجراءات يرث القاعدة المركزية `repeat(3,28px)` — وهي صحيحة داخل
   خانة جدول ضيّقة وخاطئة في سطرٍ واحد — فتنزل أزراره الستّة سطرين.
   والشارات والمبالغ كانت تطفو خلف اسمٍ يتمدّد **1015px** فلا يتحاذى
   عمود مع نظيره في السطر الذي تحته.
   العلاج: عنقود الإجراءات صفٌّ واحد · وكل شارة عمودٌ ثابت العرض
   مرساه **نهاية** السطر (الإزاحة على البداية وحدها) فتتحاذى الأعمدة
   عبر كل العمق · والمبالغ أرقام جدولية من اليمين (قاعدة العرض v970).
   ═══════════════════════════════════════════════════════════════════ */
.cc-tree-row { gap: 6px; padding: 5px 10px; min-height: 34px; }
.cc-tree-row > .cc-tree-actions .rec-actions,
.cc-tree-row > .cc-tree-actions .row-actions {
  display: inline-flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
}
.cc-tree-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.cc-tree-actions .action-btn,
.cc-tree-actions .rec-actions button { padding: 3px 5px; font-size: 13px; }

/* أعمدة ثابتة تُرسي كل شارة تحت نظيرتها مهما اختلف عمق الفرع */
.cc-tree-row > [data-tbx-slot="leaf"]  { flex: 0 0 58px;  display: flex; justify-content: flex-start; }
.cc-tree-row > [data-tbx-slot="ctype"] { flex: 0 0 118px; display: flex; justify-content: flex-start; gap: 4px; }
.cc-tree-row > [data-tbx-slot="mgr"]   { flex: 0 0 52px;  display: flex; justify-content: flex-start; }
.cc-tree-row > .cc-tree-budget         { flex: 0 0 58px;  display: flex; justify-content: flex-start; }
.cc-tree-row > [data-tbx-slot="amt"]   { flex: 0 0 176px; display: flex; justify-content: flex-end; gap: 4px; }
.cc-tree-row > [data-tbx-slot] > .pill { white-space: nowrap; }
.cc-tree-name { flex: 1 1 auto; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-tree-code { flex: 0 0 auto; white-space: nowrap; }
.cc-tree-toggle, .cc-tree-icon { flex: 0 0 auto; }
.cc-tree-amt {
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
  direction: ltr; unicode-bidi: isolate; white-space: nowrap;
}

/* 🎨 هوية Emerald Ledger — كانت الشاشة آخر جزيرة سماوية/كهرمانية */
.cc-hero {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 35%, #047857 65%, #065f46 100%);
  box-shadow: 0 10px 30px rgba(6,78,59,0.25);
}
.cc-hero-btn { color: #047857; }
.cc-hero-btn.primary { background: var(--el-grad-btn); color: #fff; }
.cc-tab-btn.active { background: var(--el-grad-hero); }
.cc-table th { background: var(--el-grad-hero); }
.cc-table td.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

@media (max-width: 1100px) {
  .cc-tree-row > [data-tbx-slot="ctype"] { flex: 0 0 auto; }
  .cc-tree-row > [data-tbx-slot="amt"]   { flex: 0 0 auto; }
}

/* 📥 v1041 — خانات مركز الاعتمادات القابلة للإخفاء (نفس التصريح المركزي v758) */
[data-tbx-hide~="src"]   [data-tbx-slot="src"],
[data-tbx-hide~="sent"]  [data-tbx-slot="sent"],
[data-tbx-hide~="age"]   [data-tbx-slot="age"],
[data-tbx-hide~="state"] [data-tbx-slot="state"] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   💳 v1051 — سجلّ السداد داخل جدول المبيعات (طلب المالك)
   لوحةٌ تُفتح تحت صفّ الفاتورة فيها سنداتها بأرقامها وحالاتها وإجراءاتها.
   بلا أي لون خارج لوحة الهوية؛ والأخضر/الأحمر هنا **دلاليّان** (مُحصَّل/متبقٍّ).
   ═══════════════════════════════════════════════════════════════════════ */
.si-pl-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0;
  padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  cursor: pointer; font-variant-numeric: tabular-nums; line-height: 1.7;
}
.si-pl-chip:hover  { background: #d1fae5; }
.si-pl-chip.is-open { background: var(--el-teal-900, #014034); color: #fff; border-color: var(--el-teal-900, #014034); }
.si-pl-chip.empty  { background: #f8fafc; color: #64748b; border: 1px dashed #cbd5e1; }
.si-pl-dot { font-size: 10.5px; }

tr.si-paylog-row > td { background: #f8fafc; padding: 0 !important; border-top: 0; }
.si-paylog { padding: 10px 14px 12px; border-inline-start: 3px solid var(--el-teal-900, #014034); }
.si-pl-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.si-pl-title { font-size: 12.5px; font-weight: 800; color: var(--el-teal-900, #014034); }
.si-pl-sum { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: #475569; font-weight: 700; }
.si-pl-sum b { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.si-pl-sum .ok  { color: #047857; }
.si-pl-sum .due { color: #b91c1c; }

.si-pl-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.si-pl-table th {
  background: var(--el-grad-hero, linear-gradient(135deg, #014034, #047857));
  color: #fff; font-size: 10.5px; font-weight: 800; padding: 6px 8px; text-align: center; white-space: nowrap;
}
.si-pl-table td { padding: 5px 8px; font-size: 11.5px; border-top: 1px solid #f1f5f9; vertical-align: middle; }
.si-pl-table tbody tr:hover { background: #f8fafc; }
.si-pl-amt { text-align: right; font-variant-numeric: tabular-nums; unicode-bidi: isolate; white-space: nowrap; }
.si-pl-of  { font-size: 10.5px; color: #64748b; font-weight: 600; }
.si-pl-act { text-align: center; white-space: nowrap; }
.si-pl-act .action-btn { margin: 0 1px; }
.si-pl-locked { display: inline-block; padding: 0 5px; opacity: 0.55; cursor: default; }
.si-pl-empty { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 11.5px; color: #64748b; font-weight: 600; padding: 6px 2px; }
.si-pl-foot  { margin-top: 8px; text-align: start; }

/* 💳 v1055 — سجلّ السداد صار لوحة تسوية: شريط تقدّم · شرائح حالة ·
   إجماليات · وسندات العميل غير المخصَّصة. (قاعدة 11: كل صنف مُعرَّف هنا.) */
.si-pl-bar {
  position: relative; height: 10px; border-radius: 999px; background: #e2e8f0;
  overflow: hidden; margin: 2px 0 8px;
}
/* المعلَّق يُرسَم أولاً بعرض (المُحصَّل + المعلَّق) ثم يعلوه المُحصَّل بعرضه —
   فيظهر المعلَّق شريطاً مخطَّطاً يتلو الأخضر بلا حساب إزاحةٍ في الـmarkup. */
.si-pl-bar-pend { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, #fcd34d, #fcd34d 4px, #fde68a 4px, #fde68a 8px); opacity: .85; }
.si-pl-bar-fill { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #047857, #10b981); }
.si-pl-bar-t {
  position: absolute; inset-inline-end: 6px; top: -1px; font-size: 10.5px; font-weight: 800;
  color: #0f172a; line-height: 12px; font-variant-numeric: tabular-nums; unicode-bidi: isolate;
}
.si-pl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.si-pl-k {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
}
.si-pl-k.is-ok   { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.si-pl-k.is-part { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.si-pl-k.is-due  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.si-pl-k.is-wait { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.si-pl-table tbody tr.is-pending { background: #fffdf5; }
.si-pl-table tfoot td {
  padding: 6px 8px; font-size: 11.5px; font-weight: 800; color: var(--el-teal-900, #014034);
  background: #f1f5f9; border-top: 2px solid #cbd5e1;
}
.si-pl-unalloc { margin-top: 9px; padding: 8px 10px; border: 1px dashed #c7d2fe; border-radius: 8px; background: #f8faff; }
.si-pl-ua-h { font-size: 11.5px; font-weight: 800; color: #3730a3; margin-bottom: 6px; }
.si-pl-ua-h b { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.si-pl-ua-n { font-size: 10.5px; font-weight: 600; color: #64748b; margin-inline-start: 6px; }
.si-pl-ua-list { display: flex; flex-wrap: wrap; gap: 6px; }
.si-pl-ua-item {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 7px;
  background: #fff; border: 1px solid #c7d2fe; font-size: 11px; font-weight: 700; color: #1e293b;
  cursor: pointer; font-family: inherit;
}
.si-pl-ua-item:hover { background: #eef2ff; }
.si-pl-ua-item b { font-variant-numeric: tabular-nums; unicode-bidi: isolate; color: #3730a3; }
.si-pl-ua-st { opacity: .7; }
.si-pl-ua-more { font-size: 10.5px; font-weight: 700; color: #64748b; align-self: center; }
.si-pl-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* 🧰 v1051 — أعمدة جدول المبيعات الجديدة وسطر إجمالياته */
.si-num { text-align: right; font-variant-numeric: tabular-nums; unicode-bidi: isolate; white-space: nowrap; }
.si-due { color: #b91c1c; }
.si-ok  { color: #047857; }
.si-dim { color: #94a3b8; }
.si-paid-ok { font-size: 10.5px; font-weight: 700; color: #047857; }
.si-age { font-size: 10.5px; font-weight: 700; color: #b91c1c; }
tr.si-foot > td {
  background: #f1f5f9; border-top: 2px solid var(--el-teal-900, #014034);
  font-size: 11.5px; font-weight: 800; color: #0f172a; padding: 6px 8px;
}

/* 🧰 v1051 — خانتا vat/due تستعملان التصريح المركزي القائم أعلاه (لا تُكرَّر القاعدة) */


/* ══════════════════════════════════════════════════════════════════════════
   v1052 — مودال فاتورة البيع «الدفتر»: المستند وقيده لوحان متزامنان.
   النطاق كلّه محصور بـ .si2-modal / :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) — لا قاعدة تخرج عنهما · v1063 اتّسع لـ#trForm (مودال التحويل بين الخزائن)
   v1062 — واتّسع النطاق لـ#piForm (مودال فاتورة الشراء) بـ`:is()` — تطبيقٌ واحد لا نسختان
   إلا الكتلة ⑬ (دَين قاعدة 11 القائم في ثلاث شاشات).
   ══════════════════════════════════════════════════════════════════════════ */

/* ① الرموز — سلّم واحد: ٥ أحجام خطّ · ٣ أنصاف أقطار · تباعد أساسه 4 ───── */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form{
  --si2-fs-xs: 11px;      /* شرائح · تسميات مساعدة · بيانات صغيرة (أرضية 10.5) */
  --si2-fs-sm: 12.5px;    /* خلايا الجدول ومدخلاته · تسميات الحقول */
  --si2-fs-md: 13.5px;    /* حقول النموذج */
  --si2-fs-lg: 15px;      /* عناوين البطاقات · لوحة رقم المستند */
  --si2-fs-xl: 26px;      /* الإجمالي النهائي */

  --si2-r-sm: 8px;  --si2-r-md: 12px;  --si2-r-pill: 999px;
  --si2-s1: 4px; --si2-s2: 8px; --si2-s3: 12px; --si2-s4: 16px; --si2-s5: 20px;

  --si2-ctl: 40px;        /* كثافة النموذج */
  --si2-ctl-t: 32px;      /* كثافة الجدول — كثافتان معلنتان، لا ثلاث بالصدفة */
  --si2-rail: 380px;
  /* 🧾 v1055 — **قِيس فلم يكن 26**: رأس الجدول خليّةٌ لاصقة داخل جدولٍ داخل
     مودالٍ يحمل `transform` (طبقة العمق)، فأي إزاحة تُطبَّق عليه **وهو ساكن**
     فتدفعه فوق أوّل صفّ ⇒ «البند مختفٍ تحت السطر الرئيسي» (بلاغ المالك).
     مُقاس: 26 ⇒ تراكب 25px · 0 ⇒ تراكب صفر، والرأس يبقى ظاهراً عند التمرير. */
  /* 🧾 v1055 — إزاحة رأس جدول البنود = ارتفاع شريط أقسام المودال اللاصق فوقه
     (46px بإزاحته ‎-18‎ ⇒ 28). تُقاس حيّاً عند الفتح فتصحّح نفسها إن تغيّر
     الشريط، وهذه قيمتها المشحونة. وكانت 26 **قبل** أن يُكشَف أن الالتصاق
     لم يكن ينعقد أصلاً، فكانت تدفع الرأس فوق السطر الأول دفعاً دائماً. */
  --si2-stick-top: 28px;
  --si2-rail-top: 26px;   /* الرَّيل لوحٌ عادي فيلتزم الإزاحة تحت شريط الأقسام */

  --si2-ink:   #0b1f1a;
  --si2-mut:   #475569;   /* 7.4:1 — لا #94a3b8 لأي نصّ يُقرأ */
  --si2-line:  #e2e8f0;
  --si2-teal:  var(--el-teal-800, #014034);
  --si2-em:    var(--el-em-700,  #047857);
  --si2-em50:  var(--el-em-50,   #ecfdf5);
  --si2-em200: var(--el-em-200,  #a7f3d0);
  --si2-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ② الصدفة والترويسة ─────────────────────────────────────────────────── */
/* 📐 v1214 (طلب المالك «وسّع المودال 2سم على الأقلّ من كل عرض») — السقفُ 1400 كان
   يترك على شاشةٍ عريضة ≈105px فارغة كل جانب. صار 1560 والهامشُ 16px، فالمكسب
   ≈80px ≈ 2.1سم لكل جانب حيث تتّسع الشاشة، ويبقى الأضيقُ محكوماً بـ`100vw` كما كان. */
.modal.si2-modal{ max-width: min(1560px, calc(100vw - 32px)); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form{ background:#fff !important; }   /* يُطفئ الهالة الزرقاء #eff6ff */

.si2-modal .modal-header.si2-head{ min-height:60px; gap:var(--si2-s3); }
.si2-head-txt{ flex:1; min-width:0; }
.si2-modal .modal-header.si2-head h3{ margin:0; font-size:16px; font-weight:900; line-height:1.2; }
html[lang="en"] .si2-modal .modal-header.si2-head h3{ font-weight:800; }
.si2-head-sub{ margin-top:2px; font-size:var(--si2-fs-xs); font-weight:700; color:#a7f3d0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.si2-head-state{ flex:0 0 auto; font-size:10.5px; font-weight:900; white-space:nowrap;
  padding:4px 11px; border-radius:var(--si2-r-pill); }
.si2-head-state.is-pending{ background:rgba(255,255,255,.16); color:#fff;
  border:1px solid rgba(255,255,255,.32); }
.si2-head-state.is-ok{ background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; }

/* ③ الشبكة والرَّيل اللاصق ────────────────────────────────────────────── */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-grid{ display:grid; grid-template-columns: minmax(0,1fr); gap:var(--si2-s4);
  align-items:start; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-pane{ min-width:0; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger{ min-width:0; display:flex; flex-direction:column; gap:var(--si2-s3); }
@media (min-width:1440px){
  :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-grid{ grid-template-columns: minmax(0,1fr) var(--si2-rail); }
  :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger{ position:sticky; top:var(--si2-rail-top); align-self:start; z-index:2; }
}

/* ④ البطاقة الموحّدة — بديل .form-section (ومعه يزول الشريط الأزرق #3b82f6) ─ */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-card{ position:relative; overflow:visible;
  background:#fff; border:1px solid var(--si2-line); border-radius:var(--si2-r-md);
  padding:var(--si2-s3) var(--si2-s4); margin:0 0 var(--si2-s3);
  box-shadow:0 2px 6px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-card::before{ content:''; position:absolute; inset-inline-start:0;
  top:var(--si2-s3); bottom:var(--si2-s3); width:3px;
  border-start-end-radius:3px; border-end-end-radius:3px;
  background:var(--si2-teal); }          /* شريط مُصمت — لا تدرّج ولا ظلّ ملوّن */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-card-h{ display:flex; align-items:center; gap:var(--si2-s2); flex-wrap:wrap;
  min-height:34px; margin:0 0 var(--si2-s3); padding:0 0 var(--si2-s2);
  border-bottom:1px dashed var(--si2-line); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-card-h h4{ margin:0; font-size:var(--si2-fs-lg); font-weight:900;
  color:var(--si2-teal); line-height:1.2; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-card-note{ margin-inline-start:auto; font-size:var(--si2-fs-xs);
  font-weight:700; color:var(--si2-mut); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-gap{ flex:1 1 auto; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-count{ font-size:var(--si2-fs-xs); font-weight:900; color:var(--si2-mut);
  background:#f1f5f9; border-radius:var(--si2-r-pill); padding:2px 9px; }

/* ⑤ الحقول — ارتفاع واحد 40px وخطّ واحد 13.5px ────────────────────────
   الخصوصية (1,2,1) بالمعرّف تغلب .mx-pro المحمّلة !important. */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .si2-fgrid{ display:grid; gap:var(--si2-s3);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .si2-fgrid > .si2-full{ grid-column: 1 / -1; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .form-field{ gap:0; min-width:0; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .form-field > label{                       /* التباعد من label لا من gap:
  فالحقول المشروطة تُبدَّل بـ display:block الذي يُلغي gap الفلكس */
  display:block; margin:0 0 var(--si2-s1);
  font-size:var(--si2-fs-sm); font-weight:800; color:var(--si2-ink); line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .form-field > input[type="text"],
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .form-field > input[type="number"],
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .form-field > input[type="date"],
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .form-field > select,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .form-field > textarea,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .form-field > input[data-amt]{
  width:100%; box-sizing:border-box;
  height:var(--si2-ctl) !important; min-height:var(--si2-ctl) !important; line-height:1.2 !important;
  padding:0 11px !important; font-size:var(--si2-fs-md) !important; font-family:inherit;
  border:1.5px solid #dbe7e2 !important; border-radius:var(--si2-r-sm) !important;
  background:#fbfdfc !important; color:var(--si2-ink) !important; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .form-field > textarea{
  height:auto !important; min-height:76px !important; padding:9px 11px !important; line-height:1.6;
  resize:vertical; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .form-field > :focus{
  outline:0; border-color:var(--el-em-500,#10b981) !important; background:#fff !important;
  box-shadow:0 0 0 3px rgba(16,185,129,.16) !important; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .form-field > .form-help{ display:block; margin-top:var(--si2-s1);
  font-size:var(--si2-fs-xs); color:var(--si2-mut); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .defs-req{ color:#dc2626; font-weight:900; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form select.si2-sel-lead{ font-size:14.5px !important; font-weight:700 !important; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-warn{ padding:11px 14px; text-align:center; font-size:var(--si2-fs-sm);
  background:#fff7ed; border:1px dashed #fdba74; border-radius:var(--si2-r-sm); color:#9a3412; }

/* أسهم النظام تقضم ~16px وتكسر المحاذاة اليمنى — تُزال */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form input[type="number"], :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form input[data-amt]{ -moz-appearance:textfield; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form input[type="number"]::-webkit-outer-spin-button,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
/* سفاري يتجاهل height على السليكت الأصلي ⇒ سهم يدوي */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form select{ -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-size:10px 7px;
  padding-inline-end:26px !important; }
html[dir="rtl"] :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form select{ background-position:left 10px center; }
html[dir="ltr"] :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form select{ background-position:right 10px center; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form select:disabled{ opacity:.72; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form input[type="date"]{ padding-inline-end:8px !important; }

/* ⑥ لوحة رقم المستند — لم تعد مربّعاً رمادياً فارغاً ───────────────────── */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form input.si2-plate{
  font-family:var(--si2-mono) !important; font-size:var(--si2-fs-lg) !important;
  font-weight:900 !important; letter-spacing:.8px; text-align:center;
  color:var(--si2-teal) !important; cursor:default !important;
  background:#f6fbf9 !important; border:1.5px dashed var(--si2-em200) !important; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form input.si2-plate.is-live{
  background:var(--si2-em50) !important; border-style:solid !important;
  border-color:var(--si2-em200) !important; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form input.si2-plate::placeholder{
  font-family:inherit; letter-spacing:0; font-size:var(--si2-fs-sm); font-weight:700;
  color:#0f766e; opacity:1; }

/* ⑦ شرائح العميل ─────────────────────────────────────────────────────── */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-chips{ display:flex; flex-wrap:wrap; gap:var(--si2-s2); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-chip{ display:inline-flex; align-items:baseline; gap:6px; max-width:100%;
  background:#f8fafc; border:1px solid var(--si2-line); border-radius:var(--si2-r-pill);
  padding:4px 11px; font-size:var(--si2-fs-xs); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-chip i{ font-style:normal; color:var(--si2-mut); font-weight:700; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-chip b{ color:var(--si2-ink); font-weight:800;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-chip.is-warn{ background:#fffbeb; border-color:#fcd34d; color:#92400e; font-weight:700; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-chip.is-mut{ color:var(--si2-mut); border-style:dashed; }   /* v1062 — بطاقة طرفٍ لم يُختَر بعد */

/* ⑧ شريط التصنيف الضريبي — ظاهر دائماً (لا يُطوى) ─────────────────────── */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-flag{ display:flex; align-items:center; gap:var(--si2-s2); cursor:pointer;
  background:#fffbeb; border:1px solid #fcd34d; border-radius:var(--si2-r-sm);
  padding:7px 12px; min-height:34px; user-select:none; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-flag input{ width:15px; height:15px; min-height:0; margin:0; flex:0 0 15px;
  accent-color:var(--si2-em); cursor:pointer; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-flag-t{ flex:1; min-width:0; font-size:var(--si2-fs-sm); font-weight:800; color:#78350f; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-flag-n{ flex:0 0 auto; font-size:var(--si2-fs-xs); font-weight:700; color:#92400e;
  background:#fef3c7; border-radius:var(--si2-r-pill); padding:2px 9px; white-space:nowrap; }

/* ⑨ جدول البنود ──────────────────────────────────────────────────────── */
/* بطاقة البنود: الجدول بطلُها فيمتدّ على عرضها كاملاً بلا حشو جانبي يقضمه */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-card-lines .si2-lines-scroll{ margin-inline:calc(var(--si2-s3) * -1); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-card-lines .si2-lines{ border-inline:0; }
/* «إعادة للتصحيح» قرارٌ مرتدّ لا مدمِّر — كهرمانيّ دلاليّ لا أحمر */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-btn-return,
.si2-foot .si2-btn-return{ background:#fffbeb; color:#92400e; border-color:#fcd34d; }
.si2-foot .si2-btn-return:hover{ background:#fef3c7; border-color:#f59e0b; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines-scroll{ overflow:visible; }      /* المُمرِّر هو :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) ⇒ thead يلتصق فعلاً */
/* ⚠️ الحدّ الأدنى **مقيس** (v1055): مجموع الأعمدة الثابتة الثمانية 692px
   + «البند» بحدٍّ مقروء 188px = 880. (كان 956 فيُخرج الجدول 39px خارج لوحه.) */
/* 🚨 v1055 — `overflow:hidden` على الجدول (كان لقصّ الزوايا) يجعل **الجدول نفسه**
   حاوية تمرير الرأس اللاصق، والجدول لا يُمرَّر داخلياً أبداً ⇒ `position:sticky`
   لا ينعقد إطلاقاً. مُقاس حيّاً: عند التمرير كان الرأس يخرج مع الجدول (‎−95px‎).
   فالقصّ انتقل إلى زوايا الخانات نفسها، والمُمرِّر صار `:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm)` كما قُصد. */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines{ width:100%; min-width:880px; table-layout:fixed;
  border-collapse:separate; border-spacing:0; font-size:var(--si2-fs-sm);
  border:1px solid var(--si2-line); border-radius:var(--si2-r-md); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines thead th:first-child{ border-start-start-radius:var(--si2-r-md); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines thead th:last-child{ border-start-end-radius:var(--si2-r-md); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines tbody tr:last-child > td:first-child{ border-end-start-radius:var(--si2-r-md); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines tbody tr:nth-last-child(2) > td[rowspan]:last-child{ border-end-end-radius:var(--si2-r-md); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines thead th{ position:sticky; top:var(--si2-stick-top); z-index:3;
  background:var(--si2-teal); color:#d1fae5; border:0;
  font-size:var(--si2-fs-xs); font-weight:800; letter-spacing:.2px;
  padding:8px; white-space:nowrap; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines thead th.si2-th-s{ text-align:start; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines thead th.si2-th-c{ text-align:center; }   /* قاعدة v970: الرأس في المنتصف */
/* 🧾 v1055 — الوصف نزل **سطراً تحت البند** بعرض المجموعة حتى عمود نوع الضريبة
   (فكرة المالك): تحرّر 160px فاتّسع «البند» من 128 إلى 210، والوصف صار يلتفّ
   فيُقرأ كاملاً. والمبالغ تمتدّ على السطرين (rowspan) فتتوسّط مجموعة البند. */
/* الفاصل بين البنود يُرسَم أسفل **سطر الوصف** وأسفل خانات المبالغ الممتدّة —
   لا بين سطرَي البند الواحد، وإلا انقسم البند بصرياً إلى بندين. */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines tbody tr.si2-r-main > td:not([rowspan]){ border-bottom:0; padding-bottom:2px; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines tbody tr.si2-r-desc > td{ padding-top:0; padding-bottom:6px; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines tbody tr.si2-r-desc .si2-desc-wrap{ display:flex; align-items:flex-start; gap:6px; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines tbody tr.si2-r-desc .si2-desc-k{ flex:0 0 auto; font-size:10.5px; font-weight:800;
  color:var(--si2-mut); padding-top:7px; }
/* v1062 — مُنتقٍ إضافي في سطر الوصف (ربط صنف المخزون في فاتورة الشراء): بعرضٍ ثابت وبارتفاع مربّع الوصف */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines tbody tr.si2-r-desc .si2-desc-extra{ flex:0 0 230px; width:230px; height:30px; padding:2px 8px;
  font-size:var(--si2-fs-xs); border:1px solid var(--si2-bd); border-radius:var(--si2-r-sm); background:#fff; color:var(--si2-ink); }
/* v1062 — أصناف خطّافات JS لسطر فاتورة الشراء (قاعدة 11: تُعرَّف ولو كان دورها التوصيل) */
#piForm .si2-lines :is(.pi-ln-acct,.pi-ln-qty,.pi-ln-price,.pi-ln-disc,.pi-ln-disctype,.pi-ln-vat){ min-width:0; }
#piForm .si2-lines .pi-ln-invitem{ max-width:230px; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines textarea:is(.si-ln-desc,.pi-ln-desc){ width:100%; box-sizing:border-box; resize:none;
  min-height:30px; line-height:1.55; padding:6px 8px; overflow:hidden;
  white-space:pre-wrap; word-break:break-word;
  font-family:inherit; font-size:var(--si2-fs-sm); color:var(--si2-ink);
  background:#fff; border:1px solid var(--si2-line); border-radius:var(--si2-r-sm); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines textarea:is(.si-ln-desc,.pi-ln-desc):focus{ outline:0; border-color:var(--el-em-500,#10b981);
  box-shadow:0 0 0 3px rgba(16,185,129,.16); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines textarea:is(.si-ln-desc,.pi-ln-desc)[readonly]{ background:#f8fafc; color:var(--si2-mut); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines td[rowspan]{
  /* 📐 v1211 (بلاغ المالك) — كانت `middle` فتتوسّط المبالغُ مجموعةَ الصفّين فتقع بحذاء
     **الوصف** لا بحذاء البند. المبلغُ يخصّ سطرَ البند فيُحاذيه من أعلى، وحشوةٌ صغيرة
     تُطابق خطَّ نصّه خطَّ المربّعات المجاورة (ارتفاعُ حقل سطر البند 32px). */
  vertical-align:top; padding-top:13px;
}
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines tbody td{ padding:4px 6px; border-bottom:1px solid #f1f5f9;
  vertical-align:middle; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines tbody tr:last-child td,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines tbody tr:nth-last-child(2) > td[rowspan]{ border-bottom:0; }
/* الحومان يضيء **مجموعة البند** كلها (سطراه معاً) لا نصفها */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines tbody tr.si2-r-main:hover td,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines tbody tr.si2-r-main:hover + tr.si2-r-desc td,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines tbody tr.si2-r-desc:hover td,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines tbody tr.si2-r-main:has(+ tr.si2-r-desc:hover) td{ background:#f7fdfb; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines td.si2-td-c{ text-align:center; padding-inline:2px; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines td input,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines td select{ width:100%; box-sizing:border-box;
  height:var(--si2-ctl-t); font-size:var(--si2-fs-sm); padding:0 8px; font-family:inherit;
  border:1.5px solid #e2e8f0; border-radius:var(--si2-r-sm); background:#fff; color:var(--si2-ink); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines td input:focus,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines td select:focus{ outline:0; border-color:var(--el-em-500,#10b981);
  box-shadow:0 0 0 3px rgba(16,185,129,.14); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines td input[readonly],
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines td select:disabled{ background:#f8fafc; color:var(--si2-mut); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-cell{ display:flex; align-items:center; gap:var(--si2-s1); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-cell > input{ flex:1 1 auto; min-width:0; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-unit{ flex:0 0 36px; width:36px !important; text-align:center;
  padding-inline-end:8px !important; background-image:none !important; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-incl{ flex:0 0 54px; display:inline-flex; align-items:center; justify-content:center;
  gap:3px; height:var(--si2-ctl-t); padding:0 6px; cursor:pointer; user-select:none;
  border:1.5px solid #e2e8f0; border-radius:var(--si2-r-sm); background:#f8fafc;
  font-size:10.5px; font-weight:800; color:var(--si2-mut); white-space:nowrap; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-incl input{ width:12px; height:12px; margin:0; accent-color:var(--si2-em); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-incl.is-on{ background:var(--si2-em50); border-color:var(--el-em-500,#10b981);
  color:var(--si2-em); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-calc{ font-weight:700; color:var(--si2-ink); padding-inline-end:10px !important; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-calc-vat{ color:var(--el-ta-800,#115e59); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-calc-tot{ font-weight:900; color:var(--si2-teal); }
/* اللون للاستثناء لا للحالة الشائعة — لا لون لكل نوع ضريبة في كل صفّ */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines td[data-si2-vat="zero"]   select{ color:#15803d; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines td[data-si2-vat="exempt"] select{ color:var(--si2-mut); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines-empty{ padding:22px; text-align:center; border:1.5px dashed #fcd34d;
  background:#fffbeb; color:#92400e; border-radius:var(--si2-r-md);
  font-size:var(--si2-fs-sm); font-weight:700; }

/* شريط الشحن — خارج #si_totalsBox عمداً (قاعدة 96) */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lbar{ display:flex; align-items:center; gap:var(--si2-s3); flex-wrap:wrap;
  margin-top:var(--si2-s3); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ship{ display:inline-flex; align-items:center; gap:var(--si2-s2);
  background:#f8fafc; border:1px solid var(--si2-line); border-radius:var(--si2-r-sm);
  padding:5px 11px; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ship-k{ font-size:var(--si2-fs-sm); font-weight:800; color:var(--si2-ink); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ship input{ width:118px; box-sizing:border-box; height:30px; padding:0 9px;
  font-size:var(--si2-fs-sm); font-family:inherit;
  border:1.5px solid #dbe7e2; border-radius:var(--si2-r-sm); background:#fff; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ship input:focus{ outline:0; border-color:var(--el-em-500,#10b981);
  box-shadow:0 0 0 3px rgba(16,185,129,.14); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ship-n{ font-size:var(--si2-fs-xs); color:var(--si2-mut); }
/* 💸 v1214 — مُنتقي «مبلغ/نسبة» صار ينطق بكلمته فاحتاج عرضَه (كان رمزاً وحده)،
   وحقلُ الشريط اتّسع ليُظهر مبلغاً بستّة أرقام كاملاً. */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ship input{ width:132px; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-unit-w{ min-width:104px; }

/* ⑩ الرَّيل: الإجمالي · التفصيل · القيد ──────────────────────────────── */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-tot-wrap{ display:flex; flex-direction:column; gap:var(--si2-s3); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-grand{ display:flex; align-items:baseline; gap:var(--si2-s3);
  background:var(--si2-teal); color:#fff;                 /* مُصمت لا متدرّج */
  border-radius:var(--si2-r-md); padding:var(--si2-s3) var(--si2-s4); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-grand-k{ font-size:var(--si2-fs-xs); font-weight:800; letter-spacing:.4px; opacity:.85; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-grand-v{ margin-inline-start:auto; font-size:var(--si2-fs-xl); font-weight:900;
  line-height:1.1; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-grand-v .cur-sym{ font-size:15px; opacity:.9; margin-inline-start:5px; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-card-tot{ margin-bottom:0; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-tot{ width:100%; border-collapse:collapse; font-size:var(--si2-fs-sm); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-tot th{ text-align:start; font-weight:700; color:var(--si2-mut);
  padding:5px 0; font-size:var(--si2-fs-sm); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-tot td{ width:1%; white-space:nowrap; padding:5px 0;
  padding-inline-start:var(--si2-s3); font-weight:800; color:var(--si2-ink); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-tot tr.is-neg td{ color:#b91c1c; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-tot tr.is-vat td{ color:var(--el-ta-800,#115e59); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-tot tr.is-rule th, :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-tot tr.is-rule td{
  border-top:1px dashed #cbd5e1; padding-top:var(--si2-s2); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-tot tr.is-sub th, :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-tot tr.is-sub td{
  font-size:var(--si2-fs-xs); color:var(--si2-mut); font-weight:700; padding:2px 0; }

:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-card-jv{ margin-bottom:0; display:flex; flex-direction:column; min-height:0; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-jv-body{ max-height:min(296px, calc(90vh - 508px)); overflow:auto; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-empty{ padding:12px 4px; text-align:center;
  font-size:var(--si2-fs-sm); color:var(--si2-mut); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-bal{ font-size:10.5px; font-weight:900; padding:3px 10px;
  border-radius:var(--si2-r-pill); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-bal.is-ok{ background:var(--si2-em50); color:var(--si2-em); border:1px solid var(--si2-em200); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-bal.is-no{ background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-jvlock{ margin-top:var(--si2-s2); padding:7px 11px;
  font-size:var(--si2-fs-xs); font-weight:700;
  background:#fffbeb; color:#92400e; border-radius:var(--si2-r-sm);
  border-inline-start:3px solid #f59e0b; }
/* معاينة القيد تُقرأ في 380px: اسم الحساب يلتفّ والمبالغ بأعمدة ضيّقة */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger .tr-jv-preview{ background:#fbfdfc; border:1.5px dashed var(--si2-em200);
  border-radius:var(--si2-r-sm); padding:var(--si2-s2); margin:0; }
/* 🧾 القيد في رَيل 338px **لا يُعرَض أعمدةً**: عمود «البيان» وحده يحتاج 377px
   فيُقصّ ويتراكب (قِيس حيّاً). يُعرَض **سطوراً مكدّسة**: الحساب والمبلغان في
   سطر، والبيان تحته صغيراً — بلا تغيير بنية الجدول الذي يولّده updateJvPreview. */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger .tr-jv-table{ display:block; width:100%; font-size:var(--si2-fs-xs); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger .tr-jv-table thead{ display:none; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger .tr-jv-table tbody,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger .tr-jv-table tfoot{ display:block; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger .tr-jv-table tbody tr,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger .tr-jv-table tfoot tr{
  display:grid; grid-template-columns:1fr auto auto; align-items:baseline;
  column-gap:var(--si2-s2); row-gap:2px;
  padding:6px 7px; border-bottom:1px solid #ecfdf5; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger .tr-jv-table tbody tr:last-child{ border-bottom:0; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger .tr-jv-table td{ padding:0; border:0; min-width:0; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger .tr-jv-table td:nth-child(1){ grid-column:1; white-space:normal;
  word-break:break-word; line-height:1.45; font-weight:700; color:var(--si2-ink); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger .tr-jv-table td:nth-child(2),
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger .tr-jv-table td:nth-child(3){ text-align:end; white-space:nowrap;
  direction:ltr; unicode-bidi:isolate;
  font-family:var(--si2-mono); font-variant-numeric:tabular-nums; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger .tr-jv-table td:nth-child(4){ grid-column:1 / -1;
  font-size:10.5px; color:var(--si2-mut); line-height:1.5;
  white-space:normal; word-break:break-word; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger .tr-jv-table tfoot td{ background:var(--si2-em50);
  border-top:2px solid var(--el-em-500,#10b981); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-ledger .si-jv-desc{ font-size:var(--si2-fs-xs); padding:6px 9px;
  margin-bottom:var(--si2-s2); line-height:1.6; }

/* ⑪ ملاحظات ومرفقات · الباقة الطبية · سندات القبض ─────────────────────── */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-2col{ display:grid; gap:var(--si2-s3);
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); align-items:start; }
@media (max-width:860px){ :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-2col{ grid-template-columns: minmax(0,1fr); } }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-att{ min-width:0; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-att .emp-attach-drop{ min-height:76px; padding:12px !important; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-pkg-grid{ display:grid; gap:var(--si2-s2);
  grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-pkg-cell{ min-width:0; background:#f6fbf9; border:1px solid var(--si2-em200);
  border-radius:var(--si2-r-sm); padding:7px 10px; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-pkg-cell i{ display:block; font-style:normal; font-size:10.5px; font-weight:800;
  color:var(--si2-em); letter-spacing:.3px; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-pkg-cell b{ display:block; margin-top:2px; font-size:var(--si2-fs-sm);
  font-weight:800; color:var(--si2-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si-prepaid-toolbar{ background:#f6fbf9 !important; border-color:var(--si2-em200) !important; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si-prepaid-table thead th{ background:var(--si2-teal) !important; }

/* ⑫ الأرقام — table_polish يتخطّى المودالات، فكل رقم يُنسَّق يدوياً ─────── */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-num,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) input.si2-num,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) td.si2-num,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) b.si2-num{
  direction:ltr; unicode-bidi:isolate; text-align:right;
  font-family:var(--si2-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  white-space:nowrap; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) input.si2-num{ text-align:right !important; }  /* يغلب html[dir=rtl] input[type=number] */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) span.si2-num, :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) b.si2-num{ display:inline-block; }

/* ⑬ القدم ────────────────────────────────────────────────────────────── */
.si2-modal .modal-footer.si2-foot{ min-height:62px; gap:var(--si2-s2); align-items:center; }
.si2-foot .si2-foot-tot{ margin-inline-end:auto; display:flex; align-items:baseline; gap:7px;
  font-size:12.5px; font-weight:800; color:#475569; }
.si2-foot .si2-foot-k{ font-size:11px; font-weight:800; color:#64748b; }
.si2-foot :is(#si_footTotal,#pi_footTotal,#tr_footTotal,#mrv_footTotal,#mci_footTotal,#mcn_footTotal,#mrf_footTotal,#scn_footTotal,#pdn_footTotal){ font-size:17px; font-weight:900; color:#014034;
  direction:ltr; unicode-bidi:isolate; white-space:nowrap;
  font-family: ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-variant-numeric: tabular-nums; }

/* ⑭ التجاوب ──────────────────────────────────────────────────────────── */
@media (max-width:1060px){
  /* دون هذا العرض يصير الجدول أوسع من لوحه ⇒ تمرير أفقي داخل حاويته.
     ⚠️ overflow-x:auto يجعل overflow-y تلقائياً فيتعطّل لصق thead (علّة v601) — مقبول ومُعلَن. */
  :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines-scroll{ overflow-x:auto; border-radius:var(--si2-r-md); }
  :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines thead th{ position:static; }
}
@media (prefers-reduced-motion:reduce){
  :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .form-field > input,
  :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .form-field > select,
  :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm).si2-form .form-field > textarea{ transition:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   ⑮ إصلاح عامّ (خارج نطاق المودال) — دَين قاعدة 11 قائم:
   خمسة أصناف تستهلكها sales_invoices.js · fixed_assets.js · transfers.js
   وهي بلا تعريف في أي ملفّ أنماط ⇒ بطاقة المرفق بلا تنسيق في ثلاث شاشات.
   ══════════════════════════════════════════════════════════════════════ */
.emp-attach-card{ display:flex; align-items:center; gap:10px; min-width:0;
  background:#fff; border:1px solid #e2e8f0; border-radius:10px;
  padding:8px 10px; margin-bottom:6px; }
.emp-attach-card:hover{ border-color:#6ee7b7; background:#f8fefb; }
.emp-attach-card-icon{ flex:0 0 32px; width:32px; height:32px; border-radius:9px;
  display:inline-grid; place-items:center; font-size:16px;
  background:#ecfdf5; border:1px solid #e2e8f0; }
.emp-attach-card-info{ flex:1 1 auto; min-width:0; }
.emp-attach-card-name{ font-size:12.5px; font-weight:700; color:#0f172a;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.emp-attach-card-meta{ margin-top:2px; font-size:11px; color:#475569;
  direction:ltr; unicode-bidi:isolate;
  font-variant-numeric:tabular-nums; }
.emp-attach-card-rm{ flex:0 0 28px; width:28px; height:28px; border-radius:8px; cursor:pointer;
  display:inline-grid; place-items:center; line-height:1; font-size:13px;
  background:#fff; border:1px solid #fecaca; color:#b91c1c; }
.emp-attach-card-rm:hover{ background:#fef2f2; border-color:#fca5a5; }

/* ═══════════════════════════════════════════════════════════════════════
   v1059 · مودال الأصل الثابت «بطاقة الأصل» (.fa2-*) — لوحان: المستند يُمرَّر
   والدفتر لاصق · سلّم واحد: 5 أحجام خطّ · حقول 40px · كل رقم تحت عنوانه
   ═══════════════════════════════════════════════════════════════════════ */
.fa2-modal { max-width: min(1240px, calc(100vw - 48px)); max-height: 92vh; display: flex; flex-direction: column; }
.fa2-modal.fa2-modal-md { max-width: min(960px, calc(100vw - 48px)); }
.fa2-form, .fa2-body { --fa2-xs: 11px; --fa2-sm: 12.5px; --fa2-md: 13.5px; --fa2-lg: 15px; --fa2-xl: 22px; --fa2-ctl: 40px; --fa2-ink: #0b1f1a; --fa2-mut: #475569; --fa2-line: #e2e8f0; --fa2-teal: var(--el-teal-800, #014034); --fa2-em: var(--el-em-700, #047857);
  --fa2-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; padding: 18px !important; overflow-y: auto; background: #fff !important; }
.fa2-modal .modal-header.fa2-head { min-height: 60px; gap: 12px; }
.fa2-head-ic { font-size: 24px; }
.fa2-head-txt { flex: 1; min-width: 0; }
.fa2-modal .modal-header.fa2-head h3 { margin: 0; font-size: 16px; font-weight: 900; line-height: 1.2; }
.fa2-head-sub { margin-top: 2px; font-size: var(--fa2-xs, 11px); font-weight: 700; color: #a7f3d0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa2-head-state { flex: 0 0 auto; font-size: 10.5px; font-weight: 900; white-space: nowrap; padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.32); }
.fa2-head-state.is-view { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

.fa2-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.fa2-doc { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.fa2-ledger { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1280px) {
  .fa2-grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .fa2-ledger { position: sticky; top: 30px; align-self: start; z-index: 2; }
}
.fa2-card { border: 1.5px solid var(--fa2-line, #e2e8f0); border-radius: 14px; background: #fff; padding: 14px 16px; box-shadow: 0 6px 18px rgba(1,64,52,.05); }
.fa2-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1.5px solid #e6f4ef; }
.fa2-card-h h4 { margin: 0; font-size: var(--fa2-lg, 15px); font-weight: 900; color: var(--fa2-teal, #014034); flex: 1; }
.fa2-n { background: var(--fa2-teal, #014034); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; flex-shrink: 0; }
.fa2-card-note { font-size: var(--fa2-xs, 11px); font-weight: 700; color: var(--fa2-mut, #475569); }

.fa2-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.fa2-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fa2-f.span2 { grid-column: span 2; }
.fa2-f.span3, .fa2-inherit.span2, .fa2-switch-row.span2, .fa2-depgrid.span2, .fa2-pi.span2, .fa2-pi.span3 { grid-column: 1 / -1; }
.fa2-f.fa2-f-btn { justify-content: flex-end; }
.fa2-f label { font-size: var(--fa2-sm, 12.5px); font-weight: 800; color: var(--fa2-ink, #0b1f1a); }
.fa2-f label b { color: #b91c1c; }
.fa2-form .fa2-f input, .fa2-form .fa2-f select, .fa2-form .fa2-f textarea, .fa2-body .fa2-f input, .fa2-body .fa2-f select {
  height: var(--fa2-ctl, 40px) !important; padding: 0 12px !important; border: 1.5px solid #cbd5e1 !important; border-radius: 10px !important; font-size: var(--fa2-md, 13.5px) !important; font-family: inherit; background: #fff !important; color: var(--fa2-ink, #0b1f1a); width: 100%; box-sizing: border-box; }
.fa2-form .fa2-f textarea { height: auto !important; min-height: 64px; padding: 9px 12px !important; }
.fa2-form .fa2-f input:focus, .fa2-form .fa2-f select:focus, .fa2-form .fa2-f textarea:focus { outline: none; border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16,185,129,.16) !important; }
.fa2-form .fa2-f input[readonly], .fa2-form .fa2-f select:disabled, .fa2-form .fa2-f input.is-inherited, .fa2-form .fa2-f select.is-inherited { background: #f8fafc !important; color: #334155; }
.fa2-form .fa2-f input.field-invalid, .fa2-form .fa2-f select.field-invalid { border-color: #dc2626 !important; }
.fa2-help { font-size: var(--fa2-xs, 11px); color: var(--fa2-mut, #475569); line-height: 1.4; }
.fa2-mono, .fa2-form .fa2-f input.fa2-mono { font-family: var(--fa2-mono) !important; font-variant-numeric: tabular-nums; }
.fa2-form .fa2-f input.fa2-num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--fa2-mono) !important; }
.fa2-form .fa2-f input.fa2-amt { font-weight: 800; }

/* الموروث من جذر الفئة */
.fa2-inherit { min-height: 0; }
.fa2-inh-empty { font-size: var(--fa2-sm, 12.5px); color: #92400e; background: #fffbeb; border: 1.5px dashed #fcd34d; border-radius: 10px; padding: 10px 12px; }
.fa2-inh-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f0fdfa; border: 1.5px dashed #99f6e4; border-radius: 10px; padding: 8px 12px; }
.fa2-inh-k { font-weight: 900; color: var(--fa2-teal, #014034); font-size: var(--fa2-sm, 12.5px); }
.fa2-inh-chip { display: inline-flex; flex-direction: column; gap: 1px; background: #fff; border: 1px solid #ccfbf1; border-radius: 8px; padding: 4px 10px; min-width: 90px; }
.fa2-inh-chip small { font-size: 10.5px; color: var(--fa2-mut, #475569); font-weight: 700; }
.fa2-inh-chip b { font-size: var(--fa2-md, 13.5px); color: var(--fa2-ink, #0b1f1a); font-variant-numeric: tabular-nums; }
.fa2-inh-note { font-size: var(--fa2-xs, 11px); color: var(--fa2-mut, #475569); }

/* مفتاح التجاوز */
.fa2-switch-row { background: #f8fafc; border: 1.5px solid var(--fa2-line, #e2e8f0); border-radius: 10px; padding: 10px 12px; }
.fa2-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0; }
.fa2-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fa2-switch-ui { width: 42px; height: 24px; border-radius: 999px; background: #cbd5e1; position: relative; flex-shrink: 0; transition: background .2s; }
.fa2-switch-ui::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.fa2-switch input:checked + .fa2-switch-ui { background: #10b981; }
[dir="rtl"] .fa2-switch input:checked + .fa2-switch-ui::after { transform: translateX(-18px); }
[dir="ltr"] .fa2-switch input:checked + .fa2-switch-ui::after { transform: translateX(18px); }
.fa2-switch input:focus-visible + .fa2-switch-ui { box-shadow: 0 0 0 3px rgba(16,185,129,.3); }
.fa2-switch input:disabled + .fa2-switch-ui { opacity: .5; }
.fa2-switch-txt { display: flex; flex-direction: column; gap: 2px; }
.fa2-switch-txt strong { font-size: var(--fa2-sm, 12.5px); color: var(--fa2-ink, #0b1f1a); }
.fa2-switch-txt small { font-size: var(--fa2-xs, 11px); color: var(--fa2-mut, #475569); line-height: 1.4; }
.fa2-switch.fa2-switch-hd { margin-inline-start: auto; gap: 8px; }
.fa2-switch.fa2-switch-hd .fa2-switch-ui { width: 36px; height: 20px; }
.fa2-switch.fa2-switch-hd .fa2-switch-ui::after { width: 14px; height: 14px; }
[dir="rtl"] .fa2-switch.fa2-switch-hd input:checked + .fa2-switch-ui::after { transform: translateX(-16px); }
[dir="ltr"] .fa2-switch.fa2-switch-hd input:checked + .fa2-switch-ui::after { transform: translateX(16px); }
.fa2-doc-2col { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 14px; align-items: start; }
.fa2-doc-2col .fa2-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fa2-fields.fa2-fields-1 { grid-template-columns: minmax(0, 1fr) !important; }
@media (max-width: 1100px) { .fa2-doc-2col { grid-template-columns: minmax(0, 1fr); } }
.fa2-depgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; padding: 12px; border-radius: 10px; border: 1.5px dashed var(--fa2-line, #e2e8f0); }
.fa2-depgrid.is-override { border-color: #f59e0b; background: #fffbeb; }
.fa2-depgrid.is-nodep .fa2-f:not(:first-child) { opacity: .45; }

/* بند الفاتورة */
.fa2-pi-empty { font-size: var(--fa2-sm, 12.5px); color: var(--fa2-mut, #475569); background: #f8fafc; border: 1.5px dashed #cbd5e1; border-radius: 10px; padding: 10px 12px; }
.fa2-pi-card { background: #ecfdf5; border: 1.5px dashed #6ee7b7; border-radius: 10px; padding: 10px 12px; }
.fa2-pi-h { display: flex; align-items: center; gap: 8px; font-weight: 900; color: #065f46; font-size: var(--fa2-sm, 12.5px); margin-bottom: 8px; }
.fa2-pi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.fa2-pi-grid .fa2-stat { background: #fff; }
.fa2-pi-grid .fa2-stat.span2 { grid-column: span 2; }

/* بطاقات الأرقام: التسمية فوق والقيمة تحتها */
.fa2-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fa2-stats.fa2-stats-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 12px; }
.fa2-stats.fa2-stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 12px; }
.fa2-stat { display: flex; flex-direction: column; gap: 3px; background: #f8fafc; border: 1px solid var(--fa2-line, #e2e8f0); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.fa2-stat-l { font-size: 10.5px; font-weight: 700; color: var(--fa2-mut, #475569); line-height: 1.3; }
.fa2-stat-v { font-size: var(--fa2-lg, 15px); font-weight: 900; color: var(--fa2-ink, #0b1f1a); font-family: var(--fa2-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa2-stat.txt .fa2-stat-v { font-family: inherit; text-align: start; font-size: var(--fa2-md, 13.5px); white-space: normal; }
.fa2-stat.hi { background: #ecfdf5; border-color: #a7f3d0; }
.fa2-stat.hi .fa2-stat-v { color: #065f46; }
.fa2-stat.ok .fa2-stat-v { color: #047857; }
.fa2-stat.neg .fa2-stat-v { color: #b91c1c; }
.fa2-card-led .fa2-card-h { margin-bottom: 10px; }
.fa2-prog { margin-top: 10px; }
.fa2-prog-bar { height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.fa2-prog-bar > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--fa2-teal, #014034), #10b981); transition: width .3s; }
.fa2-prog-txt { font-size: var(--fa2-xs, 11px); color: var(--fa2-mut, #475569); font-weight: 700; margin-top: 5px; }
.fa2-accts { display: flex; flex-direction: column; gap: 6px; }
.fa2-acct { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; background: #f8fafc; border-radius: 8px; border: 1px solid var(--fa2-line, #e2e8f0); }
.fa2-acct-l { font-size: 10.5px; font-weight: 700; color: var(--fa2-mut, #475569); }
.fa2-acct-v { font-size: var(--fa2-sm, 12.5px); font-weight: 800; color: var(--fa2-ink, #0b1f1a); }
.fa2-acct-v .fa2-mono { color: var(--fa2-teal, #014034); }
.fa2-cycle { margin-top: 10px; font-size: var(--fa2-xs, 11px); color: #92400e; background: #fffbeb; border: 1px dashed #fcd34d; border-radius: 8px; padding: 7px 10px; line-height: 1.5; }
.fa2-cycle-inline { margin-inline-end: auto; font-size: var(--fa2-xs, 11px); color: #92400e; font-weight: 700; }
.fa2-entries { display: flex; gap: 8px; flex-wrap: wrap; }
.fa2-modal .modal-footer.fa2-foot { min-height: 62px; gap: 8px; align-items: center; }
.fa2-foot-tot { margin-inline-end: auto; display: flex; align-items: baseline; gap: 8px; }
.fa2-foot-k { font-size: 11px; font-weight: 800; color: #64748b; }
.fa2-foot-tot strong { font-size: 18px; font-weight: 900; color: var(--el-teal-800, #014034); font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.fa2-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

/* محرّك الإهلاك */
.fa2-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.fa2-step { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fa2-sm, 12.5px); font-weight: 800; color: #64748b; }
.fa2-step b { width: 24px; height: 24px; border-radius: 50%; background: #e2e8f0; color: #475569; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.fa2-step.now { color: var(--el-teal-800, #014034); }
.fa2-step.now b { background: var(--el-teal-800, #014034); color: #fff; }
.fa2-step.done b { background: #10b981; color: #fff; }
.fa2-step-sep { flex: 0 0 26px; height: 2px; background: #e2e8f0; }
.fa2-note-warn { font-size: var(--fa2-sm, 12.5px); color: #92400e; background: #fffbeb; border: 1.5px dashed #fcd34d; border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; line-height: 1.7; }
.fa2-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.fa2-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 2px solid var(--fa2-line, #e2e8f0); border-radius: 12px; background: #fff; cursor: pointer; margin: 0; }
.fa2-opt.on { border-color: #10b981; background: #ecfdf5; }
.fa2-opt input { accent-color: #047857; margin-top: 3px; }
.fa2-opt-ic { font-size: 20px; }
.fa2-opt-t { display: flex; flex-direction: column; gap: 3px; }
.fa2-opt-t strong { font-size: var(--fa2-md, 13.5px); color: var(--fa2-ink, #0b1f1a); }
.fa2-opt-t small { font-size: var(--fa2-xs, 11px); color: var(--fa2-mut, #475569); line-height: 1.4; }
.fa2-run { border: 1.5px solid var(--fa2-line, #e2e8f0); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
.fa2-run-h { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; background: linear-gradient(135deg, #ecfdf5, #f0fdfa); font-weight: 900; color: var(--el-teal-800, #014034); font-size: var(--fa2-sm, 12.5px); }
.fa2-details summary { cursor: pointer; font-size: var(--fa2-xs, 11px); color: #047857; font-weight: 700; margin-top: 3px; }
.fa2-details ul { margin: 6px 0 0; padding-inline-start: 16px; font-size: var(--fa2-xs, 11px); color: #334155; }
.fa2-done { padding: 14px; background: #ecfdf5; border: 1.5px solid #a7f3d0; border-radius: 12px; }
.fa2-done-h { font-weight: 900; color: #065f46; font-size: var(--fa2-lg, 15px); margin-bottom: 8px; }
.fa2-done ul { margin: 0 0 10px; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 1100px) {
  .fa-hero-headline { grid-template-columns: repeat(2, 1fr); }
  .fa-hero-mini { grid-template-columns: repeat(3, 1fr); }
  .fa2-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fa2-depgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fa2-stats.fa2-stats-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fa2-pi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .fa2-fields, .fa2-depgrid { grid-template-columns: minmax(0, 1fr); }
  .fa2-f.span2 { grid-column: auto; }
  .fa2-stats.fa2-stats-6, .fa2-stats.fa2-stats-4, .fa2-pi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1063 — شاشة التحويل بين الخزائن على نظام المبيعات: القائمة والمودال «الدفتر».
   أصناف `tr2-*` حقيقية (قاعدة 11) — لا inline في الشاشة الجديدة. المودال يستهلك `si2-*`
   (النطاق اتّسع لـ#trForm أعلاه) وما يلي خاصّ بما ليس في المبيعات: مسار من→إلى.
   ══════════════════════════════════════════════════════════════════════════ */
.tr2-toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:12px 18px; }
.tr2-gap{ flex:1 1 auto; }
.tr2-search{ flex:1 1 260px; min-width:220px; position:relative; }
.tr2-search input{ width:100%; box-sizing:border-box; height:38px; padding:0 36px; border:1.5px solid #cbd5e1; border-radius:9px; font-size:13px; font-family:inherit; }
.tr2-search input:focus{ outline:0; border-color:var(--el-em-500,#10b981); box-shadow:0 0 0 3px rgba(16,185,129,.15); }
.tr2-search-ic{ position:absolute; top:50%; inset-inline-start:11px; transform:translateY(-50%); font-size:14px; pointer-events:none; }
.tr2-adv{ padding:0 18px; }
.tr2-adv .fsum-adv{ margin-bottom:8px; }
/* الجدول: خزينة بسطرَين (الاسم · المجموعة والحساب) · البيان يُقصّ بنقاط · المبالغ يميناً جدولية */
.tr2-table td{ vertical-align:middle; }
.tr2-m{ display:flex; align-items:center; gap:8px; min-width:0; }
.tr2-m-ic{ font-size:16px; flex:0 0 auto; }
.tr2-m-b{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.tr2-m-b strong{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tr2-m-b small{ display:flex; gap:6px; align-items:center; font-size:10.5px; color:#64748b; white-space:nowrap; }
.tr2-grp{ display:inline-block; padding:0 7px; border-radius:999px; background:#ecfdf5; color:#047857; font-size:10.5px; font-weight:800; line-height:16px; }
.tr2-missing{ color:#b91c1c; font-size:11px; font-weight:800; }
.tr2-arrow{ text-align:center !important; font-size:18px; color:var(--el-teal-800,#014034); }
.tr2-desc{ max-width:280px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12.5px; color:#334155; }
.tr2-ref{ font-size:10.5px; color:#64748b; font-family:ui-monospace,Menlo,monospace; margin-top:2px; }
.tr2-mut{ color:#94a3b8; }
.tr2-fees{ color:#b45309; font-weight:800; }
.tr2-fees small{ display:block; font-size:10.5px; font-weight:700; color:#92400e; }
.tr-num{ text-align:right !important; font-variant-numeric:tabular-nums; font-family:ui-monospace,Menlo,monospace; white-space:nowrap; }
.tr2-jv{ border:1px solid; border-radius:999px; padding:2px 9px; font-size:11px; font-weight:800; cursor:pointer; background:#fff; white-space:nowrap; }
.tr2-jv.is-ok{ color:#047857; border-color:#a7f3d0; background:#ecfdf5; }
.tr2-jv.is-pend{ color:#92400e; border-color:#fcd34d; background:#fffbeb; }
.tr2-jv.is-void{ color:#991b1b; border-color:#fecaca; background:#fef2f2; }
.tr2-badge-btn{ background:transparent; border:0; padding:0; cursor:pointer; }
.tr2-att-add{ cursor:pointer; border:1px dashed #94a3b8 !important; background:#f8fafc; color:#475569; font-size:11px; font-weight:800; }
.tr2-acts{ white-space:nowrap; text-align:center; }
.tr2-table .tr-foot td{ background:var(--el-em-50,#ecfdf5); border-top:2px solid var(--el-em-500,#10b981); font-weight:800; font-size:12.5px; color:#014034; }
.tr-foot-pend{ display:inline-block; padding:1px 8px; border-radius:999px; background:#fffbeb; color:#92400e; border:1px solid #fcd34d; font-size:10.5px; font-weight:800; }
/* المودال: مسار من→إلى بثلاث خانات · حقل المبلغ أكبر · بانر خطأ الحفظ (قاعدة v1040: الحفظ إمّا ينجح أو يقول سببه) */
.tr2-modal{ max-width:1180px; width:min(1180px, 96vw); }
:is(#trForm) .tr2-route{ display:grid; grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr); gap:var(--si2-s3); align-items:start; }
:is(#trForm) .tr2-route-arrow{ text-align:center; font-size:26px; color:var(--el-teal-800,#014034); padding-top:30px; }
:is(#trForm) .tr2-chips{ margin-top:var(--si2-s2); min-height:0; }
:is(#trForm).si2-form .form-field > input.tr2-amt{ font-size:18px !important; font-weight:900; color:#014034 !important; }
:is(#trForm) .tr2-lock{ margin-bottom:var(--si2-s3); }
.tr2-err{ margin:0 0 12px; padding:10px 14px; border-radius:10px; background:#fef2f2; color:#991b1b; border:1.5px solid #fecaca; font-weight:800; font-size:13px; white-space:pre-wrap; }
.tr2-err[hidden]{ display:none !important; }
@media (max-width:860px){ :is(#trForm) .tr2-route{ grid-template-columns:minmax(0,1fr); } :is(#trForm) .tr2-route-arrow{ transform:rotate(90deg); padding:0; } }

/* ══════════════════════════════════════════════════════════════════════════
   v1073 — «سندات القبض — القطاع الطبي» (الشحنة ② · قرار المالك): قائمة بستّة تبويبات وتسعة مؤشّرات، ومودال «الدفتر».
   أصناف `mrv-*` حقيقية (قاعدة 11). المودال يستهلك `si2-*` (النطاق اتّسع لـ#mrvForm أعلاه) وما يلي خاصّ به:
   جدول البنود بسطرَين · الربط بالمصدر · بانر الشكل والضريبة · الدفعة التكميلية · شارة القطاع في السندات العامّة.
   ══════════════════════════════════════════════════════════════════════════ */
.mrv-hero{ background:linear-gradient(135deg,var(--el-teal-900,#013229),var(--el-teal-800,#014034) 55%,var(--el-em-700,#047857)); color:#fff; border-radius:16px; padding:16px 18px; margin-bottom:12px; box-shadow:0 10px 28px rgba(1,64,52,.18); }
.mrv-hero-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.mrv-hero-title{ display:flex; align-items:center; gap:12px; flex:1 1 420px; min-width:0; }
.mrv-hero-title h2{ margin:0; font-size:20px; font-weight:900; color:#fff; }
.mrv-hero-title p{ margin:3px 0 0; font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.82); }
.mrv-hero-ic{ width:46px; height:46px; flex:0 0 46px; display:flex; align-items:center; justify-content:center; font-size:24px; border-radius:13px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); }
.mrv-hero-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.mrv-kpis{ display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:8px; margin-top:14px; }
.mrv-kpi{ display:flex; align-items:center; gap:8px; min-width:0; padding:9px 10px; border-radius:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); }
.mrv-kpi.is-main{ background:rgba(16,185,129,.24); border-color:rgba(167,243,208,.55); }
.mrv-kpi.is-ok{ border-color:rgba(167,243,208,.45); }
.mrv-kpi.is-warn{ background:rgba(245,158,11,.2); border-color:rgba(252,211,77,.55); }
.mrv-kpi-ic{ font-size:17px; flex:0 0 auto; }
.mrv-kpi-b{ min-width:0; }
.mrv-kpi-l{ font-size:11px; font-weight:700; color:rgba(255,255,255,.78); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrv-kpi-v{ font-size:15px; font-weight:900; color:#fff; font-variant-numeric:tabular-nums; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrv-kpi-s{ font-size:10.5px; color:rgba(255,255,255,.72); white-space:nowrap; }
@media (max-width:1280px){ .mrv-kpis{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:760px){ .mrv-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.mrv-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 10px; }
.mrv-tabs button{ border:1.5px solid #cbd5e1; background:#fff; color:#334155; border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:800; cursor:pointer; font-family:inherit; }
.mrv-tabs button.is-on{ background:var(--el-teal-800,#014034); border-color:var(--el-teal-800,#014034); color:#fff; }
.mrv-card{ overflow:visible; }
.mrv-toolbar{ display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; padding:12px 16px; }
.mrv-search{ position:relative; flex:1 1 300px; min-width:240px; }
.mrv-search input{ width:100%; box-sizing:border-box; height:38px; padding:0 36px; border:1.5px solid #cbd5e1; border-radius:9px; font-size:13px; font-family:inherit; }
.mrv-search input:focus{ outline:0; border-color:var(--el-em-500,#10b981); box-shadow:0 0 0 3px rgba(16,185,129,.15); }
.mrv-search-ic{ position:absolute; top:50%; inset-inline-start:11px; -webkit-transform:translateY(-50%); transform:translateY(-50%); font-size:14px; pointer-events:none; }
.mrv-f{ display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:700; color:#64748b; }
.mrv-f input{ height:38px; box-sizing:border-box; border:1.5px solid #cbd5e1; border-radius:9px; padding:0 8px; font-size:12.5px; font-family:inherit; width:132px; min-width:0; }
.mrv-unlinked{ height:38px; border:1.5px solid #fcd34d; background:#fffbeb; color:#92400e; border-radius:9px; padding:0 12px; font-size:12.5px; font-weight:800; cursor:pointer; font-family:inherit; white-space:nowrap; }
.mrv-unlinked.is-on{ background:#f59e0b; border-color:#d97706; color:#fff; }
.mrv-count{ align-self:center; font-size:12px; font-weight:800; color:#475569; white-space:nowrap; }
.mrv-gap{ flex:1 1 auto; }
.mrv-adv{ padding:0 16px; }
.mrv-adv .fsum-adv{ margin-bottom:8px; }
.mrv-empty{ padding:36px 16px; text-align:center; color:#64748b; font-size:13.5px; }
.mrv-empty-ic{ font-size:34px; margin-bottom:6px; }
.mrv-summary{ padding:12px 16px 16px; }
/* 📣 v1084 — لوحة «جهات التسويق» في سندات القبض الطبية (الجزء ④ب١) */
.mkb{ padding:12px 16px 16px; }
.mkb-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; margin-bottom:12px; }
.mkb-tile{ background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:10px 12px; }
.mkb-tile-l{ font-size:11px; font-weight:700; color:#64748b; }
.mkb-tile-v{ font-size:18px; font-weight:900; color:#0f172a; font-variant-numeric:tabular-nums; text-align:right; margin-top:3px; }
.mkb-tile-s{ font-size:10.5px; color:#64748b; margin-top:2px; }
.mkb-tile.is-main{ background:var(--el-teal-900,#014034); border-color:transparent; }
.mkb-tile.is-main .mkb-tile-l,.mkb-tile.is-main .mkb-tile-s{ color:#d1fae5; }
.mkb-tile.is-main .mkb-tile-v{ color:#fff; }
.mkb-tile.is-warn{ background:#fffbeb; border-color:#fde68a; }
.mkb-tile.is-warn .mkb-tile-l{ color:#92400e; }
.mkb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.mkb-card{ background:#fff; border:1px solid #e2e8f0; border-top:4px solid var(--mk-c,#475569); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.mkb-card.is-none{ border-top-style:dashed; background:#f8fafc; }
.mkb-card-h{ display:flex; align-items:center; gap:8px; }
.mkb-dot{ width:10px; height:10px; border-radius:50%; background:var(--mk-c,#475569); flex:0 0 auto; }
.mkb-card-t{ font-weight:900; font-size:14px; color:#0f172a; flex:1; min-width:0; }
.mkb-share{ font-size:12px; font-weight:800; color:var(--mk-c,#475569); }
.mkb-amt{ font-size:20px; font-weight:900; color:var(--el-teal-900,#014034); font-variant-numeric:tabular-nums; text-align:right; }
.mkb-bar{ height:6px; border-radius:99px; background:#eef2f7; overflow:hidden; }
.mkb-bar i{ display:block; height:100%; background:var(--mk-c,#475569); border-radius:99px; }
.mkb-ms{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 12px; }
.mkb-m{ display:flex; justify-content:space-between; gap:6px; font-size:11.5px; color:#475569; border-bottom:1px dashed #eef2f7; padding:2px 0; }
.mkb-m b{ color:#0f172a; font-variant-numeric:tabular-nums; }
.mkb-m small{ font-size:10.5px; color:#64748b; font-weight:600; }
.mkb-trend{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; align-items:end; height:64px; padding-top:4px; }
.mkb-tcol{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:3px; min-width:0; }
.mkb-tcol i{ display:block; width:70%; background:color-mix(in srgb,var(--mk-c,#475569) 70%,#fff); border-radius:4px 4px 0 0; }
.mkb-tcol span{ font-size:10.5px; color:#64748b; white-space:nowrap; }
.mkb-subs{ display:flex; flex-direction:column; gap:6px; border-top:1px solid #eef2f7; padding-top:8px; }
.mkb-sub{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.mkb-sub-h{ display:flex; justify-content:space-between; gap:8px; font-size:12px; font-weight:700; color:#334155; }
.mkb-sub-h b{ font-variant-numeric:tabular-nums; }
.mkb-sub-s{ font-size:10.5px; color:#64748b; }
.mkb-notes{ font-size:11px; color:#475569; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.mkb-notes em{ font-style:normal; background:#f1f5f9; border-radius:999px; padding:1px 8px; }
.mkb-foot{ margin-top:10px; font-size:11px; color:#64748b; }
.mrv-table td{ vertical-align:middle; }
.mrv-cell2{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mrv-cell2 strong{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrv-cell2 small{ font-size:11px; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mrv-sub{ font-size:11px; color:#64748b; font-weight:600; margin-top:2px; white-space:nowrap; }
.mrv-warn{ color:#b45309; font-weight:800; }
.mrv-mut{ color:#94a3b8; }
.mrv-num{ text-align:right !important; font-variant-numeric:tabular-nums; font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; white-space:nowrap; }
.mrv-table .mrv-foot td{ background:var(--el-em-50,#ecfdf5); border-top:2px solid var(--el-em-500,#10b981); font-weight:800; font-size:12.5px; color:#014034; }
.mrv-chip{ display:inline-block; padding:1px 8px; border-radius:999px; border:1px solid #e2e8f0; background:#f8fafc; color:#475569; font-size:11px; font-weight:800; line-height:18px; white-space:nowrap; }
.mrv-chip.is-ok{ color:#047857; border-color:#a7f3d0; background:#ecfdf5; }
.mrv-chip.is-warn, .mrv-chip.is-pend{ color:#92400e; border-color:#fcd34d; background:#fffbeb; }
.mrv-chip.is-cons{ color:#014034; border-color:#99f6e4; background:#f0fdfa; }
.mrv-chip.is-topup{ color:#9a3412; border-color:#fdba74; background:#fff7ed; }
.mrv-src{ display:inline-flex; align-items:center; gap:4px; font-size:12px; white-space:nowrap; }
.mrv-src b{ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:11.5px; color:#014034; }
.mrv-prog{ font-size:10.5px; color:#64748b; margin-top:2px; white-space:nowrap; }
.mrv-bill{ display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; border:1px solid; font-size:11px; font-weight:800; white-space:nowrap; }
.mrv-bill.is-open{ color:#475569; border-color:#cbd5e1; background:#f8fafc; }
.mrv-bill.is-ready{ color:#047857; border-color:#6ee7b7; background:#ecfdf5; }
.mrv-bill.is-partial{ color:#92400e; border-color:#fcd34d; background:#fffbeb; }
.mrv-bill.is-billed{ color:#014034; border-color:#5eead4; background:#f0fdfa; }
.mrv-bill.is-exc{ color:#9a3412; border-color:#fdba74; background:#fff7ed; }
.mrv-jv{ margin-top:3px; border:1px solid; border-radius:999px; padding:1px 8px; font-size:11px; font-weight:800; cursor:pointer; background:#fff; white-space:nowrap; font-family:inherit; align-self:flex-start; }
.mrv-jv.is-ok{ color:#047857; border-color:#a7f3d0; background:#ecfdf5; }
.mrv-jv.is-pend{ color:#92400e; border-color:#fcd34d; background:#fffbeb; }
.mrv-jv.is-void{ color:#991b1b; border-color:#fecaca; background:#fef2f2; }
.mrv-badge-btn{ background:transparent; border:0; padding:0; cursor:pointer; }
.mrv-att-add{ cursor:pointer; border:1px dashed #94a3b8 !important; background:#f8fafc; color:#475569; font-size:11px; font-weight:800; }
.mrv-acts{ white-space:nowrap; text-align:center; }
.mrv-sector-chip{ display:inline-block; margin-inline-start:4px; padding:0 5px; border-radius:6px; background:#f0fdfa; border:1px solid #99f6e4; font-size:11px; line-height:16px; vertical-align:middle; cursor:default; }
/* المودال */
.mrv-modal{ max-width:1320px; width:min(1320px, 97vw); }
.mrv-modal .modal-footer.si2-foot.is-approval{ background:#fffbeb; border-top:2px solid #f59e0b; }
.mrv-err{ margin:0 0 12px; padding:10px 14px; border-radius:10px; background:#fef2f2; color:#991b1b; border:1.5px solid #fecaca; font-weight:800; font-size:13px; white-space:pre-wrap; }
.mrv-err[hidden], .mrv-form-chip[hidden]{ display:none !important; }
.mrv-form-chip{ white-space:nowrap; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-lock{ margin-bottom:var(--si2-s3,12px); }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-banner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 12px; margin:0 0 10px; border-radius:10px; border:1.5px dashed #99f6e4; background:#f0fdfa; color:#134e4a; font-size:12.5px; font-weight:700; line-height:1.6; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-banner span{ flex:1 1 280px; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-banner.is-cons{ border-style:solid; border-color:#5eead4; background:#ccfbf1; color:#014034; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-vatwrap{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-vatwrap:empty{ display:none; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-vat{ padding:8px 12px; border-radius:10px; font-size:12.5px; font-weight:800; border:1.5px solid; line-height:1.6; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-vat.is-ex{ color:#065f46; border-color:#6ee7b7; background:#ecfdf5; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-vat.is-std{ color:#92400e; border-color:#fcd34d; background:#fffbeb; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-vat.is-mixed{ color:#1e3a8a; border-color:#bfdbfe; background:#eff6ff; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-vat.is-warn{ color:#991b1b; border-color:#fecaca; background:#fef2f2; }
/* مُقاس على 1440×900 (قاعدة 117): صندوق البنود 869px — مجموع الأعمدة 864 فلا تمرير أفقي، وتحت ذلك يُمرَّر داخل صندوقه وحده */
:is(#mrvForm) .mrv-lines{ min-width:864px; }
:is(#mrvForm) col.mrv-c-idx{ width:28px; }
:is(#mrvForm) col.mrv-c-svc{ width:146px; }
:is(#mrvForm) col.mrv-c-src{ width:150px; }
:is(#mrvForm) col.mrv-c-qty{ width:52px; }
:is(#mrvForm) col.mrv-c-amt{ width:88px; }
:is(#mrvForm) col.mrv-c-disc{ width:118px; }
:is(#mrvForm) col.mrv-c-net{ width:84px; }
:is(#mrvForm) col.mrv-c-vat{ width:78px; }
:is(#mrvForm) col.mrv-c-tot{ width:88px; }
:is(#mrvForm) col.mrv-c-del{ width:32px; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-idx{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; background:var(--el-teal-800,#014034); color:#fff; font-size:11px; font-weight:900; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-disc{ display:grid; grid-template-columns:minmax(0,1fr) 46px; gap:4px; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-pct{ text-align:center; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-del{ border:1px solid #fecaca; background:#fef2f2; color:#b91c1c; border-radius:8px; width:28px; height:28px; cursor:pointer; font-size:13px; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-line2{ display:flex; align-items:center; gap:6px 10px; flex-wrap:wrap; font-size:12px; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-pl{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:#014034; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-pl select{ min-width:220px; height:32px; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-lbtn{ border:1px solid #cbd5e1; background:#fff; color:#334155; border-radius:999px; padding:2px 10px; font-size:11.5px; font-weight:800; cursor:pointer; font-family:inherit; white-space:nowrap; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-lbtn.is-fill{ border-color:#6ee7b7; background:#ecfdf5; color:#047857; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-tick{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; border:1px solid #e2e8f0; background:#f8fafc; font-size:11.5px; font-weight:800; color:#475569; cursor:pointer; white-space:nowrap; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-tick.is-on{ border-color:#6ee7b7; background:#ecfdf5; color:#047857; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .mrv-why{ font-size:11px; color:#64748b; margin-inline-start:auto; }
:is(#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-chip.is-ok{ border-color:#a7f3d0; background:#ecfdf5; color:#047857; }
.mrv-modal .mrv-acode{ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-weight:800; color:#014034; }
.mrv-modal .mrv-dr{ color:#047857; }
.mrv-modal .mrv-cr{ color:#b91c1c; }
.mrv-modal .mrv-jvnote{ font-size:11px; color:#64748b; line-height:1.6; padding:8px 12px 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   v1075 — «فواتير المبيعات — القطاع الطبي» (الشحنة ③أ · قرار المالك): تحلّ محلّ «فواتير الرعاية».
   الشاشة والمودال يستهلكان أصناف `mrv-*` و`si2-*` نفسها (النطاقان اتّسعا لـ#mciForm أعلاه — تطبيقٌ واحد لا نسختان)،
   وما يلي خاصّ بالفاتورة وحدها: ستّة مؤشّرات · حالة السداد · خانة الاعتماد · جدول البنود بعروضه المقيسة · الإعفاء اليدوي.
   ══════════════════════════════════════════════════════════════════════════ */
.mci-hero{ position:relative; }
.mrv-kpis.mci-kpis{ grid-template-columns:repeat(6,minmax(0,1fr)); }
@media (max-width:1100px){ .mrv-kpis.mci-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px){ .mrv-kpis.mci-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.mci-pay{ display:inline-flex; align-items:center; gap:4px; padding:1px 9px; border-radius:999px; border:1px solid; font-size:11px; font-weight:800; line-height:18px; white-space:nowrap; align-self:flex-start; }
.mci-pay.is-paid{ color:#047857; border-color:#6ee7b7; background:#ecfdf5; }
.mci-pay.is-partial{ color:#92400e; border-color:#fcd34d; background:#fffbeb; }
.mci-pay.is-unpaid{ color:#475569; border-color:#cbd5e1; background:#f8fafc; }
.mci-pay.is-over{ color:#991b1b; border-color:#fecaca; background:#fef2f2; margin-top:2px; }
.mci-due{ color:#b91c1c; }
.mci-ok{ color:#047857; font-weight:800; }
.mci-appr{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
.mci-appr small{ font-size:11px; color:#64748b; white-space:nowrap; }
.mci-cn-note{ margin:0 16px 10px; padding:8px 12px; border-radius:10px; border:1.5px dashed #99f6e4; background:#f0fdfa; color:#134e4a; font-size:12.5px; font-weight:700; line-height:1.6; }
.mci-view-btn{ border:1px solid #cbd5e1; background:#fff; color:#014034; border-radius:8px; padding:3px 10px; font-size:12px; font-weight:800; cursor:pointer; font-family:inherit; white-space:nowrap; }
/* مُقاس على نمط سندات القبض (قاعدة 117): مجموع الأعمدة 864px فلا تمرير أفقي على 1440، وتحت ذلك يُمرَّر داخل صندوقه وحده */
:is(#mciForm) .mci-lines{ min-width:864px; }
:is(#mciForm) col.mci-c-idx{ width:28px; }
:is(#mciForm) col.mci-c-svc{ width:146px; }
:is(#mciForm) col.mci-c-src{ width:150px; }
:is(#mciForm) col.mci-c-qty{ width:52px; }
:is(#mciForm) col.mci-c-price{ width:88px; }
:is(#mciForm) col.mci-c-disc{ width:118px; }
:is(#mciForm) col.mci-c-net{ width:84px; }
:is(#mciForm) col.mci-c-vat{ width:78px; }
:is(#mciForm) col.mci-c-tot{ width:88px; }
:is(#mciForm) col.mci-c-del{ width:32px; }
:is(#mciForm) .mci-ov{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
:is(#mciForm) .mci-ov-reason{ flex:1 1 240px; min-width:0; height:32px; box-sizing:border-box; border:1.5px solid #fcd34d; border-radius:8px; padding:0 10px; font-size:12.5px; font-family:inherit; background:#fffbeb; }
:is(#mciForm) .mci-ov-reason[hidden]{ display:none !important; }
:is(#mciForm) .mci-desc{ flex:1 1 200px; min-width:0; height:30px; box-sizing:border-box; border:1px solid #e2e8f0; border-radius:8px; padding:0 8px; font-size:12px; font-family:inherit; }
:is(#mciForm) .mci-due-hint{ font-size:12px; font-weight:700; color:#475569; }
:is(#mciForm) .mci-due-hint.is-cash{ color:#047857; }
/* 🧾 v1076 — «فوترة باقة من السند» (③ب١): بند الفاتورة المربوط بسنده والفوترة الاستثنائية بسببها + مودال الفوترة */
:is(#mciForm) .mci-exc{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1 1 300px; min-width:0; }
:is(#mciForm) .si2-warn.mci-from-rcpt{ border-color:#6ee7b7 !important; background:#ecfdf5 !important; color:#065f46 !important; }
.modal.si2-modal.mcb-modal{ width:min(900px, 96vw) !important; max-width:900px !important; }
.mcb-body{ padding:16px 18px; display:flex; flex-direction:column; gap:12px; overflow:auto; background:#f8fafc; }
.mcb-banner{ border:1.5px solid #6ee7b7; background:#ecfdf5; color:#065f46; border-radius:12px; padding:10px 14px; font-size:13px; font-weight:800; line-height:1.6; }
.mcb-banner small{ display:block; font-size:12px; font-weight:600; color:#047857; }
.mcb-pat{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:13px; color:#334155; background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:8px 14px; }
.mcb-pat strong{ color:#014034; font-weight:800; }
.mcb-note{ font-size:12px; font-weight:600; color:#64748b; }
.mcb-card{ border:1px solid #e2e8f0; border-radius:12px; padding:12px 14px; background:#fff; display:flex; flex-direction:column; gap:10px; }
.mcb-card.is-off{ background:#f8fafc; }
.mcb-card-h{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px; font-weight:800; color:#0f172a; }
.mcb-pk{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; color:#475569; }
.mcb-pk b{ font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; color:#014034; }
.mcb-boxes{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; }
.mcb-box{ border:1px solid #e2e8f0; border-radius:10px; padding:7px 10px; background:#f8fafc; }
.mcb-box span{ display:block; font-size:11px; font-weight:700; color:#64748b; }
.mcb-box b{ display:block; margin-top:2px; font-size:15px; font-weight:900; color:#0f172a; font-variant-numeric:tabular-nums; }
.mcb-box.is-key{ border-color:#99f6e4; background:#f0fdfa; }
.mcb-box.is-key b{ color:#014034; }
.mcb-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mcb-lbl{ font-size:12.5px; font-weight:800; color:#334155; margin-inline-end:4px; }
.mcb-num{ width:110px; height:36px; box-sizing:border-box; border:1.5px solid #cbd5e1; border-radius:9px; padding:0 10px; font-size:14px; font-weight:800; font-family:inherit; text-align:center; font-variant-numeric:tabular-nums; background:#fff; }
.mcb-num.is-wide{ width:160px; }
.mcb-num:focus{ outline:none; border-color:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.18); }
.mcb-q{ border:1px solid #cbd5e1; background:#fff; color:#334155; border-radius:999px; padding:5px 12px; font-size:12px; font-weight:800; font-family:inherit; cursor:pointer; }
.mcb-q:hover:not(:disabled){ border-color:#6ee7b7; background:#ecfdf5; color:#047857; }
.mcb-q:disabled{ opacity:.5; cursor:not-allowed; }
.mcb-eq{ font-size:12.5px; font-weight:800; color:#047857; font-variant-numeric:tabular-nums; }
.mcb-exc{ border:1.5px solid #fdba74; background:#fff7ed; color:#9a3412; border-radius:10px; padding:8px 12px; font-size:12.5px; font-weight:800; display:flex; flex-direction:column; gap:6px; }
.mcb-exc[hidden]{ display:none !important; }
.mcb-exc ul{ margin:0; padding-inline-start:18px; font-weight:600; }
.mcb-exc textarea{ width:100%; min-height:54px; box-sizing:border-box; border:1.5px solid #fdba74; border-radius:9px; padding:6px 10px; font:inherit; font-weight:600; color:#0f172a; background:#fff; resize:vertical; }
.mcb-err{ border:1.5px solid #fca5a5; background:#fef2f2; color:#991b1b; border-radius:10px; padding:8px 12px; font-size:12.5px; font-weight:800; white-space:pre-line; }
.mcb-err[hidden]{ display:none !important; }
/* 🤝 v1077 — الفوترة المرحلية للمرافقة (③ب٢): خانة الفترة · بانر الدورة · تاريخا المرحلة · الفوترة الجزئية · فترة البند في الفاتورة */
.mcb-box.is-wide{ grid-column:span 2; }
.mcb-cad{ border:1.5px solid; border-radius:10px; padding:8px 12px; font-size:12.5px; font-weight:800; line-height:1.6; }
.mcb-cad.is-green{ background:#ecfdf5; border-color:#6ee7b7; color:#065f46; }
.mcb-cad.is-blue{ background:#eff6ff; border-color:#93c5fd; color:#1e3a8a; }
.mcb-cad.is-amber{ background:#fffbeb; border-color:#fcd34d; color:#92400e; }
.mcb-dl{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:#334155; }
.mcb-num.is-date{ width:150px; text-align:start; }
.mcb-partial{ border:1.5px solid #fcd34d; background:#fffbeb; color:#92400e; border-radius:10px; padding:7px 12px; font-size:12.5px; font-weight:800; }
.mcb-partial[hidden]{ display:none !important; }
:is(#mciForm) .mci-period{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color:#334155; }
:is(#mciForm) .mci-period input[type="date"]{ height:32px; box-sizing:border-box; border:1.5px solid #cbd5e1; border-radius:8px; padding:0 8px; font-size:12.5px; font-family:inherit; background:#fff; }

/* 🔗 v1078 — لوحة ربط سندات القبض بالفاتورة (③ب٣): سطرٌ مكدَّس لكل سند في رَيل الدفتر الضيّق (قاعدة 116) */
:is(#mciForm) .mci-links .mci-lk-list{ display:flex; flex-direction:column; gap:8px; margin:8px 0; max-height:360px; overflow:auto; }
:is(#mciForm) .mci-lk{ border:1.5px solid #e2e8f0; border-radius:10px; padding:8px 10px; background:#fff; }
:is(#mciForm) .mci-lk.is-on{ border-color:#6ee7b7; background:#ecfdf5; }
:is(#mciForm) .mci-lk.is-pend.is-on{ border-color:#fcd34d; background:#fffbeb; }
:is(#mciForm) .mci-lk-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; cursor:pointer; }
:is(#mciForm) .mci-lk-g{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 10px; margin-top:6px; }
:is(#mciForm) .mci-lk-g > span{ display:flex; flex-direction:column; gap:2px; font-size:11px; color:#64748b; font-weight:700; min-width:0; }
:is(#mciForm) .mci-lk-g > span b{ font-size:12.5px; color:#0f172a; font-weight:800; overflow-wrap:anywhere; }
:is(#mciForm) .mci-lk-amt{ height:30px; box-sizing:border-box; border:1.5px solid #cbd5e1; border-radius:8px; padding:0 8px; font-size:12.5px; width:100%; background:#fff; font-family:inherit; }
:is(#mciForm) .mci-lk-amt:disabled{ background:#f1f5f9; color:#94a3b8; }
:is(#mciForm) .mci-lk-note{ font-size:11px; color:#64748b; margin-top:6px; line-height:1.6; }

/* ↩️ v1079 — مودال الإشعار الدائن (③ج١) · v1133 — والإشعار الدائن العامّ #scnForm · v1134 — والإشعار المدين #pdnForm: نطاق الدفتر الواحد اتّسع لـ#mcnForm · خانة المُرجَع بزرّ «كامل المتاح» · تنبيه المحصَّل الزائد */
:is(#mcnForm,#mrfForm,#scnForm,#pdnForm) .mcn-lines td{ vertical-align:middle; }
:is(#mcnForm,#mrfForm,#scnForm,#pdnForm) .mcn-qty-cell{ white-space:nowrap; }
:is(#mcnForm,#mrfForm,#scnForm,#pdnForm) .mcn-qty{ width:72px; height:32px; box-sizing:border-box; border:1.5px solid #cbd5e1; border-radius:8px; padding:0 8px; font-size:12.5px; background:#fff; text-align:center; font-family:inherit; }
:is(#mcnForm,#mrfForm,#scnForm,#pdnForm) .mcn-qty:disabled{ background:#f1f5f9; color:#94a3b8; }
:is(#mcnForm,#mrfForm,#scnForm,#pdnForm) .mcn-fill{ margin-inline-start:6px; white-space:nowrap; font-size:11px; padding:2px 8px; }
:is(#mcnForm,#mrfForm,#scnForm,#pdnForm) .mcn-over{ border-color:#fcd34d !important; background:#fffbeb !important; color:#92400e !important; font-size:12px; line-height:1.6; }

/* 🩺 v1071 — سطر حالة ضريبة الخدمات الطبية (للقراءة فقط) في تبويب الضرائب · MEDICAL_VAT.statusHtml
   القاعدة تُشتقّ من دولة المنشأة ولا مفتاح لها (قرار المالك) — فالسطر يشرح ولا يتحكّم. */
.mvat-note{ margin:10px 0 12px; padding:12px 14px; border-radius:12px; border:1.5px solid var(--el-em-200,#a7f3d0); background:var(--el-em-50,#ecfdf5); color:#064e3b; }
.mvat-note.is-exempt{ border-color:var(--el-em-200,#a7f3d0); background:var(--el-em-50,#ecfdf5); color:#064e3b; }
.mvat-note.is-std{ border-color:#e2e8f0; background:#f8fafc; color:#334155; }
.mvat-note-h{ display:flex; gap:10px; align-items:flex-start; }
.mvat-note-ic{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:var(--el-teal-800,#014034); color:#fff; }
.mvat-note.is-std .mvat-note-ic{ background:#64748b; }
.mvat-note-svg{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mvat-note-t{ font-weight:800; font-size:13.5px; color:var(--el-teal-800,#014034); }
.mvat-note.is-std .mvat-note-t{ color:#334155; }
.mvat-note-s{ font-size:12.5px; margin-top:2px; line-height:1.6; }
.mvat-conds{ margin:8px 0 6px; padding-inline-start:22px; display:grid; gap:3px; font-size:12.5px; line-height:1.6; }
.mvat-cond::marker{ color:var(--el-em-600,#059669); font-weight:800; }
.mvat-note-f{ font-size:11.5px; color:#64748b; border-top:1px dashed var(--el-em-200,#a7f3d0); padding-top:6px; margin-top:6px; }
.mvat-note.is-std .mvat-note-f{ border-top-color:#e2e8f0; }

/* ═══ 🏠 v1109 — الشاشة الرئيسية الديناميكية (home_dash.js) ═══
   للعرض فقط: لا مؤشّر يد ولا رفعٌ عند المرور — لا شيء فيها ينقل إلى شاشة أخرى (طلب المالك). */
.hd-wrap { display: flex; flex-direction: column; gap: 14px; }
.hd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--el-grad-hero); color: #fff; border-radius: 14px; padding: 16px 20px; box-shadow: var(--shadow-sm); }
.hd-hello { font-size: 19px; font-weight: 900; }
.hd-hello-s { font-size: 12.5px; font-weight: 600; opacity: .92; margin-top: 3px; }
.hd-period { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; }
.hd-period select { border-radius: 9px; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.16); color: #fff; padding: 6px 10px; font-weight: 800; font-size: 12.5px; }
.hd-period select option { color: #0f172a; }
.hd-note { font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin: -6px 4px 0; }
.hd-alerts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.hd-alerts-t { font-size: 12.5px; font-weight: 900; color: var(--text); margin-inline-end: 4px; }
.hd-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid; border-radius: 10px; padding: 6px 10px; font-size: 12px; font-weight: 800; cursor: default; user-select: none; }
.hd-sev-red { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.hd-sev-amber { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.hd-chip-n { border-radius: 999px; padding: 1px 8px; font-size: 11px; font-variant-numeric: tabular-nums; color: #fff; }
.hd-sev-red .hd-chip-n { background: #b91c1c; }
.hd-sev-amber .hd-chip-n { background: #b45309; }
.hd-chip-m { font-weight: 900; font-variant-numeric: tabular-nums; }
.hd-clear { font-size: 12.5px; font-weight: 800; color: var(--el-em-700); }
.hd-sec { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.hd-sec-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 900; color: var(--el-teal-900); margin-bottom: 10px; }
.hd-sec-ic { display: inline-flex; align-items: center; }
.hd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.hd-tile { display: flex; align-items: flex-start; gap: 10px; min-width: 0; border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; background: var(--bg); cursor: default; }
.hd-tile-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--el-em-50); color: var(--el-em-700); }
.hd-tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hd-tile-lbl { font-size: 11.5px; font-weight: 800; color: var(--text-muted); }
.hd-tile-val { font-size: 19px; font-weight: 900; color: var(--text); text-align: start; }
.hd-tile-sub { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.hd-num { font-variant-numeric: tabular-nums; }
.hd-cur { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.hd-na { color: var(--text-muted); }
.hd-t-good .hd-tile-val { color: var(--el-em-700); }
.hd-t-bad .hd-tile-val { color: #b91c1c; }
.hd-t-bad .hd-tile-ic { background: #fef2f2; color: #b91c1c; }
.hd-t-warn .hd-tile-ic { background: #fffbeb; color: #b45309; }
.hd-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; margin-top: 10px; }
.hd-card { min-width: 0; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--bg-card); }
.hd-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 900; color: var(--text); margin-bottom: 6px; }
.hd-legend { display: inline-flex; gap: 10px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.hd-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 4px; vertical-align: middle; }
.hd-c-a { background: var(--el-em-600); }
.hd-c-b { background: var(--warning); }
.hd-c-c { background: var(--danger); }
.hd-svg { display: block; width: 100%; height: auto; }
.hd-grid-ln { stroke: #eef2f0; stroke-width: 1; }
.hd-ax { font-size: 10.5px; fill: var(--text-muted); }
.hd-ln-a { stroke: var(--el-em-600); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hd-ln-a-dot { fill: var(--el-em-600); }
.hd-ln-b { stroke: var(--warning); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hd-ln-b-dot { fill: var(--warning); }
.hd-bar-a { fill: var(--el-em-600); }
.hd-bar-b { fill: var(--danger); }
.hd-aging { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.hd-ag { min-width: 0; }
.hd-ag-h { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 900; color: var(--text); margin-bottom: 4px; }
.hd-ag-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 8px; align-items: center; font-size: 11.5px; font-weight: 700; color: var(--text-muted); padding: 3px 0; cursor: default; }
.hd-ag-track { height: 8px; border-radius: 99px; background: var(--el-em-50); overflow: hidden; }
.hd-ag-fill { display: block; height: 100%; border-radius: 99px; }
.hd-ag-0 { background: var(--el-em-600); }
.hd-ag-1 { background: #f59e0b; }
.hd-ag-2 { background: #f97316; }
.hd-ag-3 { background: #ef4444; }
.hd-ag-4 { background: #b91c1c; }
.hd-act { display: flex; flex-direction: column; gap: 6px; }
.hd-act-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--text); padding: 7px 10px; border-radius: 10px; background: var(--bg); cursor: default; }
.hd-act-ic { color: var(--el-em-700); display: inline-flex; }
.hd-act-t { flex: 1 1 auto; min-width: 0; }
.hd-act-by { font-weight: 600; color: var(--text-muted); }
/* 📒 v1311 — سطرُ الملخّص تحت عنوان الحركة: الإضافةُ بطرفها وتاريخها، والتعديلُ «الحقل: من … إلى …» */
.hd-act-d { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.hd-act-w { font-size: 11px; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.hd-empty { text-align: center; padding: 26px 16px; color: var(--text-muted); font-weight: 700; font-size: 13px; }
.hd-ico { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
.hd-chip-ic .hd-ico, .hd-act-ic .hd-ico { width: 16px; height: 16px; }
.hd-sec-h .hd-ico { width: 18px; height: 18px; }
/* 🔍 v1321 — «التفصيل بالنقر» على الرئيسية: الشريحةُ والبطاقةُ ذاتُ التفصيل زرٌّ (مؤشّرٌ وحلقةُ تركيز) · ونافذةُ الاستعراض
   جدولٌ ماليّ (.fs-table: رأسٌ في المنتصف · مبالغُ يميناً بأرقام غربية · السالب بين قوسين) داخل المودال العامّ */
.hd-chip[data-hd-detail], .hd-tile[data-hd-detail] { cursor: pointer; }
.hd-chip[data-hd-detail]:hover, .hd-chip[data-hd-detail]:focus-visible { box-shadow: 0 0 0 2px rgba(1, 64, 52, .14); outline: none; }
.hd-tile[data-hd-detail]:hover, .hd-tile[data-hd-detail]:focus-visible { border-color: var(--el-em-600); box-shadow: 0 2px 10px rgba(4, 120, 87, .14); outline: none; }
.hd-dt-bd { align-items: flex-start; padding-top: 6vh; }   /* النافذة قرب الأعلى فلا تقفز القوائم الطويلة عند الفتح */
.hd-dt .modal-header h3 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-dt-n { border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 900; background: rgba(255,255,255,.2); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-dt-body { padding: 12px 16px 16px; }
.hd-dt-hint { font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin: 0 2px 10px; }
/* 🎨 v1325 — جدولُ نافذة التفصيل: الرأسُ والخانةُ يتحاذيان بصنف نوع العمود (hd-dt-k-*) · فهرسٌ · اسمٌ بارز · شاراتُ حالة · ألوانٌ دلالية */
.hd-dt-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: clip; background: var(--bg-card); }
.hd-dt-tbl { font-size: 13px; }
.hd-dt-tbl thead th { position: sticky; top: 0; z-index: 2; background: #f1f5f9; color: #334155; font-size: 12px; font-weight: 800; padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--border); box-shadow: none; }
.hd-dt-tbl thead th:first-child, .hd-dt-tbl thead th:last-child { border-radius: 0; }
.hd-dt-tbl thead th.hd-dt-k-code, .hd-dt-tbl thead th.hd-dt-k-date, .hd-dt-tbl thead th.hd-dt-k-until, .hd-dt-tbl thead th.hd-dt-k-late, .hd-dt-tbl thead th.hd-dt-k-status, .hd-dt-tbl thead th.hd-dt-k-idx { text-align: center; }
.hd-dt-tbl thead th.hd-dt-k-money, .hd-dt-tbl thead th.hd-dt-k-num { text-align: right; direction: ltr; }
.hd-dt-tbl tbody td { padding: 9px 12px; border-bottom: 1px solid #eef2f0; vertical-align: middle; font-variant-numeric: tabular-nums; color: var(--text); }
.hd-dt-tbl tbody tr:last-child td { border-bottom: 0; }
.hd-dt-tbl th.hd-dt-k-idx, .hd-dt-tbl td.hd-dt-k-idx { width: 34px; text-align: center; color: var(--text-muted); font-size: 11.5px; font-weight: 700; padding-inline: 6px; }
.hd-dt-tbl td.hd-dt-k-text { text-align: start; }
.hd-dt-tbl td.hd-dt-strong { font-weight: 800; }
.hd-dt-tbl td.hd-dt-k-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; letter-spacing: .2px; }
.hd-dt-tbl td.hd-dt-k-date { font-size: 12.5px; }
.hd-dt-tbl td.hd-dt-k-until, .hd-dt-tbl td.hd-dt-k-late { font-size: 12.5px; font-weight: 700; }
.hd-dt-tbl td.hd-dt-k-money, .hd-dt-tbl td.hd-dt-k-num { font-weight: 700; }
.hd-dt-tbl .hd-cur { font-size: 11px; font-weight: 600; }
.hd-dt-bad { color: #b91c1c; }
.hd-dt-warn { color: #b45309; }
.hd-dt-good { color: var(--el-em-700); }
.hd-dt-pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 800; background: #f1f5f9; color: #334155; white-space: nowrap; line-height: 1.6; }
.hd-dt-pill-bad { background: #fef2f2; color: #991b1b; }
.hd-dt-pill-warn { background: #fffbeb; color: #92400e; }
.hd-dt-pill-good { background: var(--el-em-50); color: var(--el-em-700); }
.hd-dt-tbl tfoot td { font-weight: 900; background: var(--el-em-50); border-top: 2px solid var(--el-em-700); padding: 9px 12px; }
.hd-dt-c { text-align: center; white-space: nowrap; }
.hd-dt-more { margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.hd-dt-foot { flex: 1; align-self: center; font-size: 12px; font-weight: 700; color: var(--text-muted); min-width: 0; }

/* ═══ 🔄 v1166 — قائمة تغيير الحالة: صنفٌ **مشترك** بين شاشتين ═══
   كانت قواعد `.prj-stmenu` تعيش في كتلة <style> تحقنها شاشةُ المشاريع مع HTML
   شاشتها وحدها، وشاشةُ مستخلصات مقاولي الباطن تبني القائمة بالصنف نفسه — فكانت
   تُرسَم بلا نمطٍ إطلاقاً (وبلا `position:fixed` فلا يعمل موضعها المحسوب) نصّاً
   خامّاً أسفل الصفحة. الصنفُ المشترك مكانُه الورقة المشتركة (قاعدة 11). */
.prj-stmenu { position: fixed; z-index: 12000; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 18px 44px rgba(15,23,42,.22); padding: 8px; min-width: 250px; max-width: 320px; }
.prj-stmenu .hd { font-size: 11px; font-weight: 900; color: #64748b; padding: 4px 8px 8px; border-bottom: 1px solid #f1f5f9; margin-bottom: 6px; }
.prj-stmenu button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 800; color: #0f172a; text-align: start; }
.prj-stmenu button:hover { background: #f0fdf4; }
.prj-stmenu button .d { font-size: 10.5px; font-weight: 700; color: #64748b; }
.prj-stmenu .cur { background: #ecfdf5; color: #047857; font-weight: 900; cursor: default; }
.prj-stmenu .none { font-size: 11.5px; font-weight: 700; color: #64748b; padding: 8px 10px; line-height: 1.6; }

/* ═══ 🏢 v1168 — شاشةُ اختيار المنشأة في بوابة الموظف (طلب المالك) ═══
   الموظفُ قد يكون مسجَّلاً في أكثر من منشأة بالبريد نفسه، فيختار عند الدخول.
   والمقفولةُ تُعرَض **مقفولةً بسببها المكتوب** لا تختفي صامتة (قاعدة 638 · 102). */
.ep-copick { max-width: 720px; margin: 0 auto; padding: 22px 16px 34px; }
.ep-copick-hd { text-align: center; margin-bottom: 18px; }
.ep-copick-hd strong { display: block; font-size: var(--ep-t1); font-weight: 900; color: #0f172a; }
.ep-copick-hd span { display: block; margin-top: 6px; font-size: var(--ep-t3); font-weight: 700; color: #64748b; line-height: 1.7; }
.ep-copick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 14px; }
.ep-copick-card { display: flex; flex-direction: column; gap: 5px; text-align: start; padding: 15px 16px; border-radius: 14px;
  border: 1.5px solid #e2e8f0; background: #fff; box-shadow: 0 2px 10px rgba(15,23,42,.06); font-family: inherit; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.ep-copick-card:hover:not(.is-off) { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(4,120,87,.16); border-color: #6ee7b7; }
.ep-copick-card.is-off { cursor: default; background: #f8fafc; border-style: dashed; box-shadow: none; opacity: .92; }
.ep-copick-nm { font-size: var(--ep-t2); font-weight: 900; color: #0f172a; }
.ep-copick-meta { font-size: var(--ep-t4); font-weight: 700; color: #64748b; }
.ep-copick-go { margin-top: 6px; align-self: flex-start; font-size: var(--ep-t3); font-weight: 900; color: #047857;
  background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 99px; padding: 3px 12px; }
.ep-copick-off { margin-top: 6px; font-size: var(--ep-t4); font-weight: 800; color: #991b1b; line-height: 1.7; }

/* ═══ 🏠 v1169 — البوابةُ مضمَّنةً داخل البرنامج (طلب المالك) ═══
   نفسُ واجهة بوابة الموظف تُعرَض في `#screenContainer` بلا أن تُسيطر على الصفحة.
   ⚠️ v1172 — بلاغ المالك: «لا يوجد ما يرجعني للبرنامج، ومودال أي طلب يظهر
   بالخلفية ولا يعمل». والسببُ سطرٌ واحد: الجذرُ المستقلّ `position: fixed;
   inset: 0; z-index: 8500` طبقةٌ تُغطّي الصفحة كلَّها، وتجاوزُ v1169 أعاد
   الألوان والحشو **ولم يُلغِ الطبقة** — فبقي الشريطُ الجانبي تحتها (فلا مخرج)،
   وكلُّ مودالٍ في البرنامج (`z-index: 100`) يُرسَم تحتها فيُرى باهتاً ولا يُنقَر.
   فالمضمَّنةُ تخرج من الطبقات تماماً وتجري في سياق الصفحة كأي شاشة. */
.ep-root.ep-embedded {
  position: static; inset: auto; z-index: auto; overflow: visible;
  min-height: 0; background: transparent; padding: 0;
}
.ep-root.ep-embedded .ep-head { border-radius: 14px; }

/* ═══ 📅 v1172 — ملخّصُ الحضور الشهري وشكلُ البوابة (بلاغ المالك) ═══ */
.ep-month-hd {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--ep-line);
}
.ep-month-hd strong { font-size: var(--ep-t2); color: var(--ep-brand); min-width: 148px; text-align: center; }
.ep-mnav {
  width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--ep-line);
  background: #fff; color: var(--ep-ink-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.ep-mnav:hover:not(:disabled) { background: #f0fdf4; border-color: #a7f3d0; color: var(--ep-brand-2); }
.ep-mnav:disabled { opacity: .35; cursor: default; }
.ep-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
.ep-stat {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border: 1px solid var(--ep-line); border-radius: 12px; background: #f8fafc;
}
.ep-stat-i {
  width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--ep-line); color: var(--ep-ink-3);
}
.ep-stat-t { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ep-stat-t em { font-style: normal; font-size: var(--ep-t4); color: var(--ep-ink-3); font-weight: 700; }
.ep-stat-t b { font-size: var(--ep-t2); color: var(--ep-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.ep-stat-of { font-size: var(--ep-t4); color: var(--ep-ink-3); font-weight: 700; }
.ep-stat.is-ok { background: #f0fdf4; border-color: #bbf7d0; }
.ep-stat.is-ok .ep-stat-i { color: var(--ep-brand-2); border-color: #bbf7d0; }
.ep-stat.is-warn { background: #fffbeb; border-color: #fde68a; }
.ep-stat.is-warn .ep-stat-i { color: #b45309; border-color: #fde68a; }

/* جدولُ الحضور: رأسٌ هادئ وأرقامٌ جدولية وصفوفٌ متناوبة تُقرأ بلمحة */
.ep-tablecard { padding: 0; overflow: hidden; }
/* v1182 ⑦ — البوابةُ المستقلّة تُلحَق بـbody فلا يبلغها منفذُ table_polish (data-tp-x): جداولُها تُمرَّر أفقياً عند ضيق الشاشة */
.ep-root:not(.ep-embedded) .table-wrapper { overflow-x: auto; }
.ep-table { width: 100%; }
.ep-table thead th {
  background: #f8fafc; color: var(--ep-ink-3); font-size: var(--ep-t4); font-weight: 800;
  text-align: center; padding: 10px 8px; border-bottom: 1px solid var(--ep-line); white-space: nowrap;
}
.ep-table tbody td {
  padding: 9px 8px; font-size: var(--ep-t3); color: var(--ep-ink-2); text-align: center;
  border-bottom: 1px solid #f1f5f9; font-variant-numeric: tabular-nums;
}
.ep-table tbody tr:nth-child(even) td { background: #fcfdfe; }
.ep-table tbody tr:last-child td { border-bottom: 0; }

/* حالةُ الفراغ: رمزٌ وعنوانٌ وجملةٌ تقول الخطوة */
.ep-emptybox {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 30px 18px; text-align: center;
}
/* v1182 ① — صندوقُ تعذُّر القراءة في البوابة: حدٌّ كهرماني دلاليّ (خطأٌ لا فراغ) وزرُّ إعادة المحاولة */
.ep-failbox { border: 1px solid #fde68a; background: #fffbeb; }
.ep-failbox .ep-btn-ghost { margin-top: 6px; }
.ep-emptybox-i {
  width: 46px; height: 46px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #94a3b8;
}
.ep-emptybox strong { font-size: var(--ep-t2); color: var(--ep-ink-2); font-weight: 800; }
.ep-emptybox span { font-size: var(--ep-t3); color: var(--ep-ink-3); max-width: 46ch; line-height: 1.8; }

/* شبكةٌ من عمودين على الشاشة العريضة وعمودٍ واحد على الجوّال — «ملفّي» */
.ep-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--ep-gap); align-items: start; }
.ep-grid2 > .ep-card { margin: 0; }

/* ═══ 👥 v1173 — منتقي «موظفون محدَّدون» في بند الراتب ═══ */
.pi-emp-pick { margin-top: 10px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; background: #f8fafc; }
.pi-emp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pi-emp-head strong { font-size: 12px; color: #475569; font-weight: 800; }
.pi-emp-head span { font-size: 11px; font-weight: 800; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 20px; padding: 1px 9px; }
.pi-emp-list { max-height: 190px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px; }
.pi-emp-row { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 7px; cursor: pointer; font-size: 12px; color: #334155; background: #fff; border: 1px solid #e2e8f0; }
.pi-emp-row:hover { background: #f0fdf4; border-color: #a7f3d0; }
.pi-emp-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-emp-row em { font-style: normal; font-size: 11px; color: #94a3b8; direction: ltr; }

/* 📕 v1173 — سطرُ «قيودٌ لم تُعتمَد ولم تُحسَب» في مراكز التكلفة (قاعدة 102) */
.cc-pending-note {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 10px;
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
  font-size: 12px; font-weight: 700; line-height: 1.7;
}
/* ⛔ v1289 — محرّكُ القوائم المالية غير محمَّل: لا رقمَ في شاشة مراكز التكلفة ولا في تقاريرها — خطأٌ مكتوب مكانه (قاعدة 107ب)
   ⛔ v1300 — ومثلُها شاشتا كشوف الحساب والموازنة التقديرية (`.fs-engine-err`) */
.fs-engine-err, .cc-engine-err {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 10px;
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  font-size: 12px; font-weight: 800; line-height: 1.7;
}
/* حاوية أزرار الهيرو — كانت مكتوبةً في الـmarkup بلا تعريف فالتصقت الأزرار */
.cc-hero-actions { display: flex; align-items: center; gap: 8px; }

/* ═══ 🌳 v1174 — أنماطُ مودال شجرة الحسابات: نُقلت من حقنٍ وقت التشغيل ═══
   كانت `coa.js` تُنشئ `<style id="coaModalTabCss">` عند كل فتح (مخالفة قاعدة 11)،
   فلا يصلها أي ضبطٍ مركزيّ هنا. ومعها خمسةُ أصناف كانت مكتوبةً في الـmarkup بلا
   أي قاعدة. وكلُّ ما لم يكن مقصوراً على المودال قُيِّد بـ`#coaModalEl`. */
#coaModalEl .coa-modal-tabnav { position: sticky; top: 0; z-index: 30; }
#coaModalEl .coa-modal-tabnav .coa-tab-btn {
  padding: 10px 14px; background: transparent; border: none; border-bottom: 3px solid transparent;
  cursor: pointer; font-size: 12.5px; font-weight: 700; color: #475569; white-space: nowrap;
  -webkit-transition: all .15s ease; transition: all .15s ease;
}
#coaModalEl .coa-modal-tabnav .coa-tab-btn:hover { background: #f1f5f9; color: #065f46; }
#coaModalEl .coa-modal-tabnav .coa-tab-btn.active {
  color: #065f46; border-bottom-color: #10b981;
  background: linear-gradient(180deg, transparent 0%, #ecfdf5 100%);
}
/* v0.37.9.672 — كل قسم ظاهر، والشريط يمرّر إليه */
#coaModalEl .coa-tab-panel { display: block; scroll-margin-top: 8px; }
#coaModalEl .coa-breadcrumb { color: rgba(255,255,255,0.92); }
#coaModalEl .coa-bc-node {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px;
  font-size: 10.5px; background: rgba(255,255,255,0.16); color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
}
#coaModalEl .coa-bc-node.active { background: rgba(255,255,255,0.32); font-weight: 800; }
#coaModalEl .coa-bc-code { font-family: monospace; font-weight: 800; }
#coaModalEl .coa-bc-name { font-weight: 600; }
#coaModalEl .coa-bc-sep  { color: rgba(255,255,255,0.6); font-weight: 800; }
@media (min-width: 900px) {
  /* 🏦 v1030 — :not([hidden]) لئلّا تغلب القاعدةُ القسرية إخفاءَ حقول البنك */
  #coaModalEl .form-grid:not([hidden]) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  #coaModalEl .form-field.full { grid-column: 1 / -1; }
}
/* الأصنافُ الخمسة التي كانت بلا قاعدة — الثابتُ هنا والدلاليُّ يبقى مضمَّناً (قاعدة 5) */
.coa-bc-icon { font-size: 11px; line-height: 1; flex: 0 0 auto; }
.coa-health-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px; flex: 0 0 auto; }
.coa-nature-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .coa-nature-picker { grid-template-columns: 1fr; } }
.coa-tree-nature { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px; line-height: 1.5; white-space: nowrap; }
.coa-rec-open-strip {
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 10px 14px;
  margin: 10px 18px; font-size: 12px; color: #78350f;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}







/* ═══ v1178 — توزيعُ مراكز التكلفة في القيود (نُقلت من حقنٍ وقت التشغيل في journals.js · قاعدة 11) ═══ */
/* Total CSS reset for cc-dist shell — bypass .audited & .modal-backdrop */
      .cc-dist-shell, .cc-dist-shell * {
        pointer-events: auto !important;
        opacity: 1 !important;
        user-select: auto !important;
        filter: none !important;
        cursor: auto !important;
      }
      .cc-dist-shell button,
      .cc-dist-shell [role="button"],
      .cc-dist-shell .cc-dist-pick,
      .cc-dist-shell .cc-dist-pick-item {
        cursor: pointer !important;
      }
      .cc-dist-shell input,
      .cc-dist-shell textarea {
        cursor: text !important;
        background: #fff !important;
        color: #0f172a !important;
        border: 1px solid #cbd5e1 !important;
      }
      /* Even if .audited cascades into the shell, force-enable everything */
      .audited .cc-dist-shell,
      .audited .cc-dist-shell *,
      .modal-backdrop .cc-dist-shell,
      .modal-backdrop .cc-dist-shell * {
        pointer-events: auto !important;
        opacity: 1 !important;
        cursor: auto !important;
      }
      .audited .cc-dist-shell button,
      .audited .cc-dist-shell .cc-dist-pick {
        cursor: pointer !important;
      }
      /* Custom dropdown styling */
      .cc-dist-pick {
        position: relative;
        width: 100%;
        padding: 6px 10px;
        background: #fff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px;
        text-align: start;
        font-size: 12.5px;
        color: #0f172a !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 32px;
      }
      .cc-dist-pick:hover { border-color: #7c3aed !important; }
      .cc-dist-pick-menu {
        position: fixed !important;
        z-index: 2147483647 !important;
        background: #fff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
        max-height: 280px;
        overflow-y: auto;
        min-width: 200px;
        padding: 4px 0;
      }
      .cc-dist-pick-search {
        width: calc(100% - 16px);
        margin: 6px 8px;
        padding: 6px 10px;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px;
        font-size: 12px;
        background: #fff !important;
      }
      .cc-dist-pick-item {
        padding: 8px 12px;
        font-size: 12.5px;
        color: #0f172a !important;
        border-bottom: 1px solid #f1f5f9;
      }
      .cc-dist-pick-item:hover { background: #ede9fe !important; }
      .cc-dist-pick-item.selected { background: #7c3aed !important; color: #fff !important; }
      .cc-dist-table { width: 100%; border-collapse: collapse; }
      .cc-dist-table th, .cc-dist-table td { padding: 6px 8px; border-bottom: 1px solid #e2e8f0; font-size: 12.5px; }
      .cc-dist-table th { background: #f8fafc; font-weight: 700; color: #475569; text-align: start; }

/* v1178 — نبضةُ لافتة المراجعة في القيود (نُقلت من `<style>` داخل جسم المودال · قاعدة 11) */
@keyframes reviewPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* ═══ v1178 — أربعةَ عشرَ صنفاً كانت مكتوبةً في markup القيود بلا أي قاعدة (قاعدة 11) ═══
   أثرُها الحقيقي: أعمدةُ جدول السطور في المودال بلا عرضٍ محكوم، ونغمتا المدين
   والدائن لا تُطبَّقان — فالجدول يُقرأ «غير منسّق» وتتساوى خانتا المبلغ بصرياً
   مع بقيّة الخانات. تُعرَّف هنا بما تَعِد به أسماؤها، بلا مسّ الـmarkup. */
.jv-panel { overflow: visible; }
#jvForm .jv-form-edit-zone { display: block; min-width: 0; }
.jv-head-desc { grid-column: 1 / -1; min-width: 0; }
#jvForm .jv-th-acct { min-width: 190px; }
#jvForm .jv-th-party { min-width: 150px; }
#jvForm .jv-th-note { min-width: 180px; }
#jvForm .jv-note-cell { vertical-align: top; }
.jv-amt-debit { background: rgba(5, 150, 105, 0.04); }
.jv-amt-credit { background: rgba(220, 38, 38, 0.04); }
#jvForm .jv-amt-debit .jv-total-value { color: #047857; }
#jvForm .jv-amt-credit .jv-total-value { color: #b91c1c; }
#jvForm .jv-treasury-label { max-width: 100%; }
#jvForm .jv-treasury-input { width: 100%; min-width: 0; border-radius: 6px; padding: 5px 8px; font-size: 12px; }
.jv-cc-subrow > td { padding-block: 6px; }
.jv-ins-alerts { display: flex; flex-direction: column; gap: 8px; }
.jv-ins-donut { display: flex; align-items: center; justify-content: center; min-height: 120px; }

/* ═══ v1178 — أصنافٌ مكتوبة في markup المالية بلا أي قاعدة (قاعدة 11) ═══
   فُحصت واحداً واحداً: ليست في أنماط نوافذ الطباعة ولا في أي ورقة — فكانت
   مُعدِّلاتُ الشبكة والأرقام بلا أثر (عمودان/ثلاثة · أربع بطاقات/ستّ · الحقل
   الرقمي)، والشاشتان بلا جذرٍ محكوم. تُعرَّف هنا بما تَعِد به أسماؤها. */
.fin-screen { display: block; min-width: 0; }
.df-screen { display: block; min-width: 0; }
.fin-hero-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fin-kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fin-exp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-exp-lbl { font-size: 12px; font-weight: 800; color: var(--el-teal-800, #115e56); }
.df-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.df-terms { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; }
/* الأصول الثابتة — مُعدِّلاتُ الشبكة والأرقام */
.fa2-fields-1 { grid-template-columns: minmax(0, 1fr); }
.span2 { grid-column: span 2; min-width: 0; }
.span3 { grid-column: span 3; min-width: 0; }
.fa2-stats-4 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.fa2-stats-6 { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.fa2-num { font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, Consolas, monospace; }
.fa2-amt { font-weight: 700; }
.fa2-switch-hd { margin-inline-start: auto; }
.fa2-head { align-items: center; gap: 10px; }
.fa2-head .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fa2-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fa2-f-btn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fa2-modal-md { max-width: 860px; }
.fa-run-table { width: 100%; border-collapse: collapse; }
.fs-tot > td { background: #ecfdf5; font-weight: 900; border-top: 2px solid #047857; }
.fa-nbv .nbv { font-variant-numeric: tabular-nums; }

/* ═══ 📌 v1178 — سياسةُ الرأس المثبَّت (601) كانت مُعلَنةً ولا تعمل ═══
   القياسُ الحيّ (1440 · 60 صفّاً · تمريرٌ إلى آخر المنطقة) أثبت أن رأسَ الجدول
   **لا يثبت في أي شاشة** رغم `position: sticky` و`.table-wrapper{overflow:visible}`:
   السببُ سطرٌ واحد أعلى منهما — `.card { overflow: hidden }` — فالقصُّ يجعل البطاقةَ
   نفسَها منفذَ تمريرٍ يحبس اللاصق. والدليلُ القاطع من الشاشات نفسها: «قيود اليومية»
   وحدها تثبت (20 · 20 · 20 بعد التمرير) لأن لوحها لا يقصّ، بينما سندات القبض
   وفواتير المبيعات والأصول الثابتة يتحرّك رأسُها مع التمرير (1001 ⟵ 819 ⟵ 692 ⟵ 638).
   فالعلاجُ في البطاقة التي تحمل جدولاً رئيسياً وحدها: لا تقصّ. */
.card:has(.data-table) { overflow: visible; }

/* 🔐 v1180 — مودالُ «ضَعْ كلمة مرورك» لا يُدفَن تحت أي سطح.
   كان `.modal-backdrop` عند 100 والبوابةُ `.ep-root` عند 8500، فكان يُرسَم
   تحتها ولا يُرى ولا يُنقَر (أثبتَه اختبارُ الإصابة: `elementFromPoint` على قلبه
   يُرجع `.ep-root`). الترتيبُ الجديد يمنع تزامنَهما أصلاً، وهذا حزامٌ ثانٍ:
   حارسُ كلمةِ المرور فوق كل شيء مهما فُتح قبله. */
#setPwdBackdrop { z-index: 9600; }

/* 🔴 v1181 — إشاراتُ الحقل الإلزامي في مودال الموظف كانت مُعلَنةً وميتةً معاً.
   قدمُ المودال يَعِد نصّاً: «الحقول الإلزامية تُظهر إطاراً أحمر · اضغط حفظ للتحقق» —
   وقياسُ المتصفّح على حقلٍ إلزاميٍّ فارغ كان يُرجع `borderColor: rgb(219,231,226)`
   (رماديٌّ مخضرّ) قبل الحفظ **وبعد** فشله، وبطاقةُ القسم المعطوب تُرسَم مطابقةً
   حرفياً للسليمة. السبب: الأصنافُ كانت تُحقَن من الوحدة بـ`!important` لكنها أصنافٌ
   (0,1,0) بينما `#empForm .form-field > input:not(…):not(…):not(…)` مُعرَّفٌ (1,4,1)
   فيغلبها — ومعها سقطت قاعدةُ `.req-field` العامّة (معيارُ البرنامج كلّه) في هذا
   المودال وحده. فالعلاجُ بالخصوصية هنا لا بحقنٍ من الوحدة (قاعدة 11)، ومقصورٌ
   على `#empForm` فلا يمسّ مودالاً آخر. */
#empForm .form-field > .emp-req-empty:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#empForm .form-field > .req-field:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  border-color: #f87171 !important;
  background-color: #fff7f7 !important;
  box-shadow: inset 0 0 0 1px rgba(248,113,113,.35) !important;
}
#empForm .form-field > .emp-req-ok:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  border-color: #86efac !important;
  background-color: #fbfffc !important;
  box-shadow: inset 0 0 0 1px rgba(22,163,74,.25) !important;
}
/* بعد فشل الحفظ: الحقلُ الناقص أحمرُ صريح يفترق عمّا حوله (يغلب الأخضر والأحمر الهادئ معاً) */
#empForm .form-field > .emp-required-error:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  border-color: #dc2626 !important;
  border-width: 2px !important;
  background: #fef2f2 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.16) !important;
}
#empForm .form-field > .emp-req-empty:focus, #empForm .form-field > .emp-required-error:focus {
  border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.22) !important; background: #fff !important;
}
/* 🔴 v1181 — بطاقةُ القسم الذي فيه نقص: حدٌّ أحمر بدل شارةٍ كانت لا تُرسَم أصلاً
   (شريطُ `.modal-body .emp-section::before` الزخرفي (0,2,1) كان يغلب `.emp-section-error::before` (0,1,0)،
   و`.emp-section{overflow:hidden}` كان سيقصّها على أي حال). بلا رمزٍ جديد — قاعدة 12. */
#empForm .emp-section.emp-section-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 1px rgba(220,38,38,.35), 0 6px 18px rgba(220,38,38,.10) !important;
}
#empForm .emp-section.emp-section-error::before {
  background: linear-gradient(180deg, #dc2626, #991b1b) !important;
  width: 4px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   🎨 v1207 — طبقةُ مودالات «الموارد البشرية» (طلب المالك 2026-09-19)
   ──────────────────────────────────────────────────────────────────────────
   **لماذا مركزياً لا في كل شاشة** (قاعدتا 61 و155): إحدى عشرة شاشةً في المجموعة
   تفتح مودالاتٍ بُنيت على مدى عام. القياسُ الحيّ على أربعة منها أظهر في النموذج
   الواحد: **ستّة ارتفاعات حقول** (27 · 34 · 35 · 40 · 43 · 45) · خطَّين (13 و13.5)
   · تسميتين (12/700 و12.5/800) · نصفَي قطر (8 و10) · أربع خلفيات · خمسة حدود
   · و**صفراً من ثماني عشرة قائمةً منسدلة** بسهمٍ مصمَّم.
   **والسببُ ليس اختلافَ الأنماط**: الحشوةُ نفسها (10px) والخطُّ نفسه يُنتجان
   ارتفاعاً مختلفاً لكل نوعِ مُدخَل — النصُّ 43 والتاريخُ 45 والقائمةُ 40 — لأن
   ارتفاعَ المحتوى الذاتي يختلف. فالعلاجُ **ارتفاعٌ صريحٌ واحد** لا ضبطُ حشوة.
   **النطاق** من مصدرٍ واحد: `body[data-screen-group]` يكتبه `renderScreen` من
   مجموعة الشاشة في القائمة الجانبية — فلا تُمَسّ مودالاتُ المالية المعتمَدة،
   وغيابُ الوسم يعني «لا تغيير» (فشلٌ بلا أثر).
   ═══════════════════════════════════════════════════════════════════════════ */
body[data-screen-group="hr"] .modal-backdrop .modal-body {
  --hrx-h: 40px;            /* ارتفاعُ الحقل الواحد — هو `--emp-ctl` المُجرَّب في مودال الموظفين، فلا تتنازع قاعدتان */
  --hrx-r: 10px;            /* نصفُ القطر الواحد */
  --hrx-line: #dbe7e2;      /* حدُّ الحقل الساكن */
  --hrx-bg: #fbfdfc;        /* خلفيةُ الحقل الساكن */
  --hrx-on: #10b981;        /* لونُ التركيز */
  --hrx-ink: #0b1f1a;       /* لونُ التسمية */
  --hrx-accent: #0d9488;    /* شريطُ بطاقة القسم */
  --hrx-h-sm: 34px;         /* الحقلُ الكثيف خارج صفوف النموذج */
}

/* ① الحقلُ الواحد: ارتفاعٌ صريح لكل مُدخَل (نصّ · رقم · تاريخ · وقت · قائمة)
      — `height` لا `padding` لأن الحشوةَ لا تسوّي اختلافَ المحتوى الذاتي. */
body[data-screen-group="hr"] .modal-backdrop .modal-body :is(
  input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="color"],
  input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input:not([type]), select),
body[data-screen-group="hr"] .modal-backdrop .modal-body :is(
  input[type="text"], input[data-amt], input[type="date"], input[type="time"], input[type="color"],
  input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input:not([type]), select) {
  height: var(--hrx-h) !important;
  min-height: var(--hrx-h) !important;
  padding-block: 0 !important;
  padding-inline: 12px !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: var(--hrx-r) !important;
  border: 1.5px solid var(--hrx-line) !important;
  background-color: var(--hrx-bg) !important;
  color: #0f172a !important;
  transition: border-color .15s, box-shadow .15s, background-color .15s !important;
}
body[data-screen-group="hr"] .modal-backdrop .modal-body :is(input, select):hover:not(:disabled):not([readonly]) { border-color: #a7d7c9 !important; }
body[data-screen-group="hr"] .modal-backdrop .modal-body :is(input, select):focus {
  border-color: var(--hrx-on) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.16) !important;
  outline: none !important;
}
/* المنطقةُ النصّية تتبع الطقمَ نفسه لكن بارتفاعٍ مريح للقراءة */
body[data-screen-group="hr"] .modal-backdrop .modal-body textarea {
  min-height: 84px !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  line-height: 1.75 !important;
  border-radius: var(--hrx-r) !important;
  border: 1.5px solid var(--hrx-line) !important;
  background-color: var(--hrx-bg) !important;
  resize: vertical;
}
/* المقفولُ والمعطَّل شكلٌ واحد يقول «لا يُكتَب» */
body[data-screen-group="hr"] .modal-backdrop .modal-body :is(input, select, textarea):is(:disabled, [readonly]) {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* ①ب الاستثناءُ الكثيف — **بموضعه لا بغياب صنف**: شبكةُ مستندات الموظف صفوفُها
      كالجدول (اثنا عشر تاريخاً متجاورة)، وكذلك أيُّ حقلٍ داخل جدولٍ في مودال.
      يبقيان أقصر عن قصد وبلغةٍ بصرية واحدة (الخطّ والحدّ والخلفية وحلقةُ التركيز).
      ⚠️ ولا يُكتب هذا الاستثناء بـ«ما ليس داخل `.form-field`»: مودالُ المخالصة
      يبني نموذجَه كلَّه بلا `.form-field`، فكان معيارُ الغياب يقصّ حقولَه الرئيسية. */
body[data-screen-group="hr"] .modal-backdrop .modal-body :is(#empDocHub, table) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
  height: var(--hrx-h-sm) !important;
  min-height: var(--hrx-h-sm) !important;
  font-size: 12.5px !important;
  border-radius: 9px !important;
}

/* ② القائمةُ المنسدلة: سهمُ النظام الخامّ يُستبدَل بشارةٍ مستديرة مرسومة —
      تتحرّك مع اتجاه الصفحة، وتتغيّر عند التركيز، وتبهت حين يُقفَل الحقل. */
body[data-screen-group="hr"] .modal-backdrop .modal-body select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><rect x='0.5' y='0.5' width='25' height='25' rx='8' fill='%23ecfdf5' stroke='%23c7ece0'/><path d='M8.5 11 L13 15.5 L17.5 11' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-size: 26px 26px !important;
  padding-inline-end: 46px !important;
  cursor: pointer;
}
html[dir="rtl"] body[data-screen-group="hr"] .modal-backdrop .modal-body select { background-position: left 8px center !important; }
html[dir="ltr"] body[data-screen-group="hr"] .modal-backdrop .modal-body select { background-position: right 8px center !important; }
body[data-screen-group="hr"] .modal-backdrop .modal-body select:focus { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><rect x='0.5' y='0.5' width='25' height='25' rx='8' fill='%23d1fae5' stroke='%2310b981'/><path d='M8.5 11 L13 15.5 L17.5 11' fill='none' stroke='%23047857' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important; }
body[data-screen-group="hr"] .modal-backdrop .modal-body select:disabled { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><rect x='0.5' y='0.5' width='25' height='25' rx='8' fill='%23eef2f6' stroke='%23dfe6ec'/><path d='M8.5 11 L13 15.5 L17.5 11' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important; cursor: not-allowed; }
body[data-screen-group="hr"] .modal-backdrop .modal-body select option { font-size: 13.5px; padding: 6px 8px; }
body[data-screen-group="hr"] .modal-backdrop .modal-body input[type="color"] { padding: 4px !important; cursor: pointer; }
/* مودالٌ يضبط حشوةَ حقوله بقاعدةٍ ذات معرّف (مودال الموظفين) يغلب أي قاعدةٍ بأصناف،
   فتُكتب له نظيرتُها بمعرّفه كي تبقى مساحةُ السهم محجوزة ولا يمرّ النصُّ تحته. */
body[data-screen-group="hr"] #empForm .form-field > select { padding-inline-end: 46px !important; }

/* ③ التاريخُ والرقم: أرقامٌ جدولية لاتينية ومفتاحُ التقويم واضحُ الهدف */
body[data-screen-group="hr"] .modal-backdrop .modal-body input[type="date"] {
  direction: ltr; text-align: start;
  font-variant-numeric: tabular-nums;
}
body[data-screen-group="hr"] .modal-backdrop .modal-body input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .55; cursor: pointer; padding: 3px; border-radius: 6px; transition: opacity .15s, background .15s;
}
body[data-screen-group="hr"] .modal-backdrop .modal-body input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: #ecfdf5; }
body[data-screen-group="hr"] .modal-backdrop .modal-body input[type="number"], body[data-screen-group="hr"] .modal-backdrop .modal-body input[data-amt] {
  direction: ltr; text-align: start;
  font-variant-numeric: tabular-nums; font-weight: 700 !important;
}

/* ④ التسمية: مقاسٌ واحد وسطرٌ واحد بحدٍّ أدنى — فتبقى مربّعاتُ الصفّ متحاذية
      حتى حين تطول تسميةُ جارها (كانت التسميةُ ذاتُ السطرين تُنزل حقلَها وحده). */
body[data-screen-group="hr"] .modal-backdrop .modal-body .form-field {
  /* ⚠️ `minmax(…, auto)` لا مقاسٌ ثابت: مسارٌ ثابت لا يتمدّد لمنطقةٍ نصّية أعلى منه،
     فتفيض فوق ما بعدها وتتراكب الحقول — كشفته لقطةُ مودال «تحديث الراتب». */
  display: grid; grid-template-rows: auto minmax(var(--hrx-h), auto) 1fr; gap: 5px; min-width: 0; align-content: start;
}
body[data-screen-group="hr"] .modal-backdrop .modal-body .form-field > label {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--hrx-ink) !important;
  line-height: 1.35;
  min-height: 18px;
  display: flex; align-items: flex-end; gap: 5px;
}
body[data-screen-group="hr"] .modal-backdrop .modal-body .form-help { font-size: 11px; color: #5c6f68; line-height: 1.5; }
body[data-screen-group="hr"] .modal-backdrop .modal-body .defs-req {
  color: #dc2626; font-weight: 900; font-size: 15px; line-height: 1; margin-inline-start: 1px;
}

/* ⑤ صندوقُ البحث فوق القوائم: حقلٌ كامل بأيقونةٍ مرسومة (لا إيموجي في النائب) */
.emp-pick-search {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230d6e5c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.2-3.2'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
  padding-inline-start: 32px !important;
}
html[dir="rtl"] .emp-pick-search { background-position: right 10px center !important; }
html[dir="ltr"] .emp-pick-search { background-position: left 10px center !important; }
/* حشوةُ العدسة تُكتب بخصوصيةٍ تفوق طبقاتِ الحقول التي تضبط حشوتَها بـ`!important`
   (`.mx-pro .form-field input…` وأخواتُها)، وإلا داس النصُّ العدسةَ في مودالٍ
   خارج الموارد البشرية — وهو ما كشفه الفحصُ الحيّ على مودال المرافقات. */
.modal-body .form-field input.emp-pick-search,
.modal-body input.emp-pick-search,
.form-field > input.emp-pick-search { padding-inline-start: 32px !important; }
/* `input.` تُضاف عمداً: القاعدةُ العامّة للحقول أعلاه تنتهي بـ`[type="text"]`
   فتزنُ سمةً زائدة — ولولاها لغلبت حشوتُها حشوةَ صندوق البحث فداس النصُّ العدسة. */
body[data-screen-group="hr"] .modal-backdrop .modal-body input.emp-pick-search { background-size: 17px 17px !important; padding-inline-start: 36px !important; }
html[dir="rtl"] body[data-screen-group="hr"] .modal-backdrop .modal-body input.emp-pick-search { background-position: right 12px center !important; }
html[dir="ltr"] body[data-screen-group="hr"] .modal-backdrop .modal-body input.emp-pick-search { background-position: left 12px center !important; }

/* ⑥ بطاقةُ القسم: شكلٌ واحد لكل أقسام المجموعة — بطاقةٌ بيضاء بشريطٍ واحد في
      بدايتها (كان بعضُها يحمل شريطَين: حدّاً مضمَّناً و`::before` معاً). */
body[data-screen-group="hr"] .modal-backdrop .modal-body :is(.emp-section, .form-section)::before { display: none !important; }
body[data-screen-group="hr"] .modal-backdrop .modal-body :is(.emp-section, .form-section) {
  background: #fff !important;
  border: 1px solid #e6f0ec !important;
  border-inline-start: 4px solid var(--hrx-accent) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(1,64,52,.05), 0 1px 2px rgba(15,23,42,.04) !important;
}

/* ⑦ المرفقات: منطقةُ إفلاتٍ واضحة بحدٍّ متقطّع وزرٍّ بارز — لا سطرٌ باهت */
body[data-screen-group="hr"] .modal-backdrop .modal-body [data-att-inline] {
  border: 1.5px dashed #bfe3d6;
  border-radius: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #f8fffc 0%, #ffffff 100%);
}
body[data-screen-group="hr"] .modal-backdrop .modal-body [data-att-inline]:hover { border-color: var(--hrx-on); }
body[data-screen-group="hr"] .modal-backdrop .modal-body [data-att-inline] > div:first-child > label {
  font-size: 13px !important; font-weight: 900 !important; color: #065f46 !important;
}
body[data-screen-group="hr"] .modal-backdrop .modal-body [data-att-inline] .btn.btn-outline.btn-sm {
  background: #ecfdf5; border-color: #a7f3d0 !important; color: #065f46 !important; font-weight: 800; border-radius: 9px;
}
body[data-screen-group="hr"] .modal-backdrop .modal-body [data-att-inline] .btn.btn-outline.btn-sm:hover { background: #d1fae5; }

/* ⑧ قدمُ المودال: زرُّ الحفظ هو البارز وحده، ومسافةٌ ثابتة */
body[data-screen-group="hr"] .modal-backdrop .modal-footer { gap: 10px; padding: 14px 20px; }
body[data-screen-group="hr"] .modal-backdrop .modal-footer .btn { border-radius: 10px; font-weight: 800; min-height: 40px; }


/* ═══════════════════════════════════════════════════════════════════════════
   🎨 v1208 — طبقةُ مودالات «المالية» (طلب المالك 2026-09-19 · نظيرةُ طبقة الموارد البشرية)
   📌 v1213 — ووُسِّع نطاقُها إلى **كل مجموعةٍ عدا الموارد البشرية** (لها طبقتُها):
   الفحصُ الشامل على 31 مودالاً أظهر أن التعريفات والعلاقات والرعاية والمشاريع
   بقيت بثلاثةِ ارتفاعاتٍ إلى خمسة وبقوائمَ بلا سهمٍ مصمَّم — وشكلُ المالية هو
   الأعمّ (حقلُ نموذجٍ 40 وحقلُ سطرِ جدولٍ 32) فصار هو شكلَ البرنامج كلّه.
   ──────────────────────────────────────────────────────────────────────────
   **القياسُ الحيّ على عشرة مودالات** (قيد · تحويل · قبض · صرف · شجرة الحسابات ·
   أصل · موازنة · قيد دوري · فاتورة بيع · فاتورة شراء) أظهر في حقول النماذج
   **سبعةَ ارتفاعات** (30 · 32 · 40 · 41.25 · 43.25 · 44 · 45.25) وأربعةَ أحجام
   خطّ (12.5 · 13.5 · 14 · 14.5) ونصفَي قطر (8 · 10)، وفي سطور البنود خطَّين
   مختلفين وحدَّين مختلفين، و**إحدى عشرة قائمةً منسدلة بلا سهمٍ مصمَّم**.
   **مرتبتان لا واحدة** (بخلاف الموارد البشرية): حقلُ النموذج 40px، وحقلُ سطر
   البند 32px — لأن جدولَ البنود مصفوفةُ إدخالٍ كثيفة يُقرأ صفّاً صفّاً.
   **الخصوصية:** مودالاتُ المستندات تُنسَّق بقواعد ذات **معرّف**
   (`#jvForm` · `:is(#siForm,#piForm,…)` وهي بوزن المعرّف)، فأي قاعدةٍ بأصناف
   تُهزَم مهما كثرت — ولذلك يُرفَع وزنُ هذه الطبقة بـ`:is(#…Form, .modal-body)`:
   تطابق ما كانت تطابقه وتزن معرّفاً.
   ═══════════════════════════════════════════════════════════════════════════ */
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body {
  --fnx-h: 40px;            /* حقلُ النموذج */
  --fnx-h-sm: 32px;         /* حقلُ سطر البند — مصفوفةٌ كثيفة */
  --fnx-r: 10px;
  --fnx-r-sm: 8px;
  --fnx-line: #dbe7e2;
  --fnx-bg: #fbfdfc;
  --fnx-on: #10b981;
  --fnx-ink: #0b1f1a;
}

/* ① حقولُ النموذج — ارتفاعٌ صريح (الحشوةُ لا تسوّي اختلافَ المحتوى الذاتي · قاعدة 115) */
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop :is(#jvForm, #siForm, #piForm, #trForm, #scnForm, #pdnForm, #poForm, .modal-body) :is(
  input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="color"],
  input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input:not([type]), select):not(table *),
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop :is(#jvForm, #siForm, #piForm, #trForm, #scnForm, #pdnForm, #poForm, .modal-body) :is(
  input[type="text"], input[data-amt], input[type="date"], input[type="time"], input[type="color"],
  input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input:not([type]), select):not(table *) {
  height: var(--fnx-h) !important;
  min-height: var(--fnx-h) !important;
  padding-block: 0 !important;
  padding-inline: 12px !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: var(--fnx-r) !important;
  border: 1.5px solid var(--fnx-line) !important;
  background-color: var(--fnx-bg) !important;
  color: #0f172a !important;
  transition: border-color .15s, box-shadow .15s, background-color .15s !important;
}
/* ② حقولُ سطر البند — المرتبةُ الكثيفة بلغةٍ بصرية واحدة */
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop :is(#jvForm, #siForm, #piForm, #trForm, #scnForm, #pdnForm, #poForm, .modal-body) table :is(
  input[type="text"], input[type="number"], input[type="date"], input[type="time"],
  input[type="email"], input[type="tel"], input[type="search"], input:not([type]), select),
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop :is(#jvForm, #siForm, #piForm, #trForm, #scnForm, #pdnForm, #poForm, .modal-body) table :is(
  input[type="text"], input[data-amt], input[type="date"], input[type="time"],
  input[type="email"], input[type="tel"], input[type="search"], input:not([type]), select) {
  height: var(--fnx-h-sm) !important;
  min-height: var(--fnx-h-sm) !important;
  padding-block: 0 !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
  font-size: 12.5px !important;
  border-radius: var(--fnx-r-sm) !important;
  border: 1.5px solid var(--fnx-line) !important;
  background-color: #fff !important;
  color: #0f172a !important;
}
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body :is(input, select):hover:not(:disabled):not([readonly]) { border-color: #a7d7c9 !important; }
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop :is(#jvForm, #siForm, #piForm, #trForm, #scnForm, #pdnForm, #poForm, .modal-body) :is(input, select):focus {
  border-color: var(--fnx-on) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.16) !important;
  outline: none !important;
}
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body :is(input, select, textarea):is(:disabled, [readonly]) {
  background-color: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* ③ القائمةُ المنسدلة: سهمٌ مرسوم بحجمَين — للنموذج ولسطر البند */
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop :is(#jvForm, #siForm, #piForm, #trForm, #scnForm, #pdnForm, #poForm, .modal-body) select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><rect x='0.5' y='0.5' width='25' height='25' rx='8' fill='%23ecfdf5' stroke='%23c7ece0'/><path d='M8.5 11 L13 15.5 L17.5 11' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-size: 26px 26px !important;
  padding-inline-end: 46px !important;
  cursor: pointer;
}
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop :is(#jvForm, #siForm, #piForm, #trForm, #scnForm, #pdnForm, #poForm, .modal-body) table select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><rect x='0.5' y='0.5' width='19' height='19' rx='6' fill='%23ecfdf5' stroke='%23c7ece0'/><path d='M6.5 8.5 L10 12 L13.5 8.5' fill='none' stroke='%23047857' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-size: 18px 18px !important;
  /* 📏 v1211 — حجزُ السهم في خانة الجدول الضيّقة يُقاس لا يُقدَّر: الشارةُ 18px،
     فالحجزُ 24 والحشوةُ الأمامية 6 — والقياسُ الحيّ: أطولُ اسمِ ضريبةٍ شائع يحتاج
     154px والمتاحُ بعدهما 164. (كان الحجزُ 32 والحشوةُ 8 فيُقصّ الاسم.) */
  padding-inline-end: 24px !important;
  padding-inline-start: 6px !important;
  text-overflow: ellipsis;
}
html[dir="rtl"] body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body select { background-position: left 7px center !important; }
html[dir="rtl"] body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body table select { background-position: left 5px center !important; }
html[dir="ltr"] body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body table select { background-position: right 5px center !important; }
html[dir="ltr"] body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body select { background-position: right 7px center !important; }
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body select:focus { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><rect x='0.5' y='0.5' width='25' height='25' rx='8' fill='%23d1fae5' stroke='%2310b981'/><path d='M8.5 11 L13 15.5 L17.5 11' fill='none' stroke='%23047857' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important; }
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body select:disabled { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><rect x='0.5' y='0.5' width='25' height='25' rx='8' fill='%23eef2f6' stroke='%23dfe6ec'/><path d='M8.5 11 L13 15.5 L17.5 11' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important; cursor: not-allowed; }

/* ④ الأرقام والتواريخ: خانةٌ ثابتة العرض لاتينية — فتتحاذى الأرقام رأسياً في العمود */
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body :is(input[type="number"], input[type="date"], input[type="time"]), body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body :is(input[data-amt], input[type="date"], input[type="time"]) {
  direction: ltr; text-align: start;
  font-variant-numeric: tabular-nums;
}
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body input[type="number"], body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body input[data-amt] { font-weight: 700 !important; }
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .55; cursor: pointer; padding: 3px; border-radius: 6px; transition: opacity .15s, background .15s;
}
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; background: #ecfdf5; }
/* المبلغُ المحسوب في سطر البند يُقرأ من اليمين بأرقامٍ جدولية (قاعدة العرض المالي v970) */
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body table td.si2-num,
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body table td.si2-calc {
  font-variant-numeric: tabular-nums; direction: ltr; text-align: right;
}

/* ⑤ التسمية: مقاسٌ واحد وسطرٌ أدنى — فتتحاذى مربّعاتُ الصفّ الواحد */
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body .form-field > label {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--fnx-ink) !important;
  line-height: 1.35;
  min-height: 18px;
  display: flex; align-items: flex-end; gap: 5px;
}
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body .form-help { font-size: 11px; color: #5c6f68; line-height: 1.5; }

/* ⑥ المنطقةُ النصّية: لا ارتفاعَ مفروض (ارتفاعُها يحسبه `AUTO_GROW` من نصّها)، لكن جلدٌ واحد */
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body textarea:not([data-autogrow]) {
  min-height: 72px !important;
  padding: 10px 12px !important;
  line-height: 1.7 !important;
}
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body textarea {
  font-size: 13px !important;
  border-radius: var(--fnx-r) !important;
  border: 1.5px solid var(--fnx-line) !important;
  background-color: var(--fnx-bg) !important;
  font-family: inherit;
}
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body table textarea { font-size: 12.5px !important; border-radius: var(--fnx-r-sm) !important; }
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body textarea:focus {
  border-color: var(--fnx-on) !important; background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.16) !important; outline: none !important;
}

/* ⑦ المرفقات: منطقةُ إفلاتٍ واضحة — نظيرةُ طبقة الموارد البشرية */
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body [data-att-inline] {
  border: 1.5px dashed #bfe3d6;
  border-radius: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #f8fffc 0%, #ffffff 100%);
}
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body [data-att-inline]:hover { border-color: var(--fnx-on); }
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body [data-att-inline] > div:first-child > label {
  font-size: 13px !important; font-weight: 900 !important; color: #065f46 !important;
}
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body [data-att-inline] .btn.btn-outline.btn-sm {
  background: #ecfdf5; border-color: #a7f3d0 !important; color: #065f46 !important; font-weight: 800; border-radius: 9px;
}

/* ⑧ قدمُ المودال */
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-footer { gap: 10px; padding: 14px 20px; }
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-footer .btn { border-radius: 10px; font-weight: 800; min-height: 40px; }

/* ═══════════════════════════════════════════════════════════════════════════
   🧾 v1208 — عرضُ مودال المستند على الشاشات المتوسطة (عطبٌ مقيس)
   `responsive_pro.css` يقصّ **كل** مودال إلى 720px بـ`!important` بين 641 و1024،
   بينما جدولُ بنود الفاتورة حدُّه الأدنى 880px وحاويتُه `overflow:visible` —
   فقياسٌ حيٌّ عند 1024 أظهر ثلاثةَ أعمدة **خارج الصندوق بلا شريط تمرير يبلغها**:
   «الضريبة» و«الإجمالي» وزرّ الحذف. ومودالُ المستند يُعلن أصلاً
   `max-width: min(1400px, 100vw - 48px)` فيُستثنى من القصّ، ويبقى القصُّ لغيره.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 1024px) {
  .modal.si2-modal:not(.mwc-maximized),
  .modal.modal-xl:not(.mwc-maximized) {
    width: calc(100vw - 32px) !important;
    max-width: min(1400px, calc(100vw - 32px)) !important;
  }
}
/* وشبكةُ أمانٍ لكل عرضٍ أضيقَ من الجدول: يُمرَّر أفقياً فيُبلَغ آخرُ عمود.
   (الرأسُ اللاصق يعمل على المُمرِّر الرأسي وهو النموذج، فلا يتأثّر) */
body[data-screen-group]:not([data-screen-group="hr"]) .modal-backdrop .modal-body .si2-lines-scroll { max-width: 100%; }
/* 🔚 علامةُ نهاية الطبقة — يقرؤها حارسُها ليعرف أين تنتهي قواعدُه وأين تبدأ قواعدُ غيره.
   (نزعُ التعليقات في الاختبار يمحو أي علامةٍ في تعليق، فالعلامةُ قاعدةٌ حقيقية.) */
body[data-screen-group="fin"] { --fnx-layer-end: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   📐 v1212 — سطرُ بند الفاتورة على الشاشات الواسعة (بلاغ المالك: «مربّعات الكمية
   وسعر الوحدة والخصم صغيرة جداً»).
   **السببُ المقيس:** الجدولُ `table-layout:fixed` وأعمدتُه الثمانيةُ بعرضٍ ثابت
   وعمودُ «البند» وحده مرن — فكلُّ ما يزيد من عرض المودال يذهب إلى «البند» وحده.
   قياسٌ حيّ عند عرض 1200: الجدولُ 1073 و«البند» **305**، بينما مربّعُ السعر 35
   ومربّعُ الخصم 40 كما هما عند أضيق عرض.
   **العلاج:** فوق 1180 تتّسع مربّعاتُ الإدخال الثلاثة من المساحة الزائدة، ويبقى
   «البند» مرناً يأخذ الباقي. وتحت ذلك يبقى التوزيعُ المُجرَّب كما هو (قاعدة 155).
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   📐 v1213 — عرضُ أعمدة الإدخال **نسبةٌ من عرض الجدول** لا مقاسٌ بمدى عرض النافذة.
   **العطبُ الذي صحّحه الفحصُ الشامل:** v1212 وسّعت الكميةَ والسعرَ والخصم بـ`@media`
   على عرض **النافذة**، والمقيَّدُ الحقيقي هو عرضُ **حاوية الجدول** — وهما لا يسيران
   معاً: عند نافذةٍ 1200 الحاويةُ 1073 (لوحٌ واحد)، وعند 1440 تصير **896** (لوحان
   جنباً إلى جنب). فطُبِّق التوسيعُ عند 1440 على حاويةٍ أضيق، فانسحق عمودُ «البند»
   إلى **10px** (قياسٌ حيّ) وصار منتقي الصنف 34px.
   **العلاج:** نِسَبٌ من عرض الجدول: تعطي عند 896 ما كان قبل v1212 (58 · 112 · 96)
   وتكبر تلقائياً كلّما اتّسعت الحاوية — بلا مدى عرضٍ يخمّن، وبلا استعلام حاوية
   قد لا يعرفه متصفّح. وأعمدةُ المبالغ تبقى **بالبكسل** لأن لها حدّاً أدنى مقيساً
   (مبلغٌ بستّة أرقام غليظ = 92px بالحشوة).
   ═══════════════════════════════════════════════════════════════════════════ */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines col:nth-child(2) { width: 6.5% !important; }    /* الكمية      */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines col:nth-child(3) { width: 11.5% !important; }   /* سعر الوحدة  */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines col:nth-child(4) { width: 10.5% !important; }   /* الخصم — ضاق 1.5% لصالح الضريبة (بلاغ المالك: «المضافة 15%» كانت تُقصّ) */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines col:nth-child(5) { width: 15.5% !important; }   /* نوع الضريبة — v1215: 14% لم تكفِ فعلياً («المضافة 5…») لأن السهم يأخذ من عرض الخانة؛ ومجموعُ العمودين ثابت فلا يتأثّر عمودُ البند */
/* «شامل» ونوعُ الخصم يتّسعان مع عمودهما ولا يُقيَّدان بمقاسٍ ثابت
   (v1214 — وصارا سطراً تحت المبلغ داخل جدول البنود · القاعدة أدناه) */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-incl { flex: 0 0 auto; min-width: 54px; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-cell > .si2-unit { text-align: start; }

/* ═══════════════════════════════════════════════════════════════════════════
   📐 v1214 — خاناتُ الكمية والسعر والخصم تتّسع **بقياس حاويتها** (طلب المالك)
   النِّسَبُ أعلاه تبقى الأساسَ الذي يعمل في كل متصفّح (وهي ما يحمي عمودَ البند في
   الحاوية الضيّقة · درس v1212). وفوقها طبقتان باستعلام الحاوية — لا بمدى الشاشة،
   فالجدولُ يضيق بفتح لوحٍ جانبي بينما الشاشةُ كما هي (ذلك بعينه عطبُ v1212).
   ومتصفّحٌ لا يعرف `@container` يتجاهل الكتلتين فيبقى على النِّسَب: تحسينٌ لا شرط.
   الأرقامُ مقيسةٌ لا مُخمَّنة: «سعر الوحدة» يسع 9,999,999.00 بخطّ الجدول،
   و«الخصم» يسعه ومعه مُنتقي «مبلغ/نسبة»، والبندُ يبقى فوق 200px في الطبقتين.
   ═══════════════════════════════════════════════════════════════════════════ */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines-scroll { container-type: inline-size; container-name: si2lines; }
@container si2lines (min-width: 980px) {
  :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines col:nth-child(2) { width: 78px !important; }    /* الكمية     */
  :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines col:nth-child(3) { width: 132px !important; }   /* سعر الوحدة */
  :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines col:nth-child(4) { width: 128px !important; }   /* الخصم      */
  :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines col:nth-child(5) { width: 126px !important; }   /* نوع الضريبة — «المضافة 15%» ≈ 80px، والباقي للبند: 980 − (78+132+146+108+316) = 200px */
}
@container si2lines (min-width: 1100px) {
  :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines col:nth-child(2) { width: 86px !important; }
  :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines col:nth-child(3) { width: 146px !important; }
  :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines col:nth-child(4) { width: 142px !important; }
  :is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines col:nth-child(5) { width: 136px !important; }
}
/* الحقلُ يملأ خانته كاملةً بعد الاتّساع (كان يكتفي بعرضه الذاتي) */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines td > input.si2-num,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines td > input.si2-num { width: 100%; min-width: 0; }
/* 🧮 v1214 — الخانةُ ذاتُ المُلحَق (شامل · نوع الخصم) تُكدَّس: المبلغُ يأخذ عرضَ
   العمود كاملاً والمُلحَقُ سطراً تحته. كان المبلغُ يتقاسم السطر فيبقى **47px**
   في عمودٍ عرضُه 122 (مقيسٌ حيّاً) — و«اتّساع العمود» لا يعني شيئاً إن بقي
   المربّعُ صغيراً (قاعدة 155). وأمثالُ الصفّ المحسوبة `rowspan` تبقى بحذاء
   سطر البند بحشوتها العلوية كما طلب المالك في v1211. */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines .si2-cell { flex-wrap: wrap; row-gap: 4px; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines .si2-cell > input.si2-num { flex: 1 1 100%; width: 100%; min-width: 0; }
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines .si2-cell > .si2-unit { flex: 1 1 100%; width: 100% !important; min-width: 0; }
/* 🧾 v1215 (طلب المالك «صغّر بوكس شامل قليلاً») — «شامل» مفتاحٌ لا حقلُ إدخال، فيبقى
   على سطره بعرض كلمته لا بعرض العمود، وبخطٍّ أصغر قليلاً (فوق الحدّ الأدنى 10.5px · قاعدة 73). */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-lines .si2-cell > .si2-incl { flex: 0 0 auto; width: auto !important; min-width: 0; font-size: 10.5px; padding: 2px 7px; }
/* وعلامةُ الاختيار نفسُها بمقاسٍ هادئ بلون الهوية — كانت مربّعاً أخضرَ كبيراً في اللقطة.
   (وقاعدة 11: الصنفُ مستعمَلٌ في markup المودال فيجب أن يكون معرَّفاً — حارسُ pi_modal_1062.) */
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-incl > input[type="checkbox"].si-ln-incl,
:is(#siForm,#piForm,#trForm,#mrvForm,#mciForm,#mcnForm,#mrfForm,#scnForm,#pdnForm) .si2-incl > input[type="checkbox"].pi-ln-incl { width: 13px; height: 13px; margin: 0; accent-color: var(--el-em-500, #10b981); cursor: pointer; }

/* 🌙 v1212 — صفُّ الإدخال الهجري تحت الحقل الميلادي (مودال الموظف) */
#empForm .emp-hijri-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
#empForm .emp-hijri-row[hidden] { display: none; }
/* 📏 v1213 — 152 بدل 132: النائبُ «هجري 1400-01-01» يحتاج 122px والمتاحُ كان 105 (قياسٌ حيّ) */
#empForm .emp-hijri-in { flex: 0 0 152px; width: 152px; font-family: monospace; letter-spacing: .3px; }
#empForm .emp-hijri-out { font-size: 11px; font-weight: 800; color: #64748b; white-space: nowrap; }
#empForm .emp-hijri-out.is-ok { color: #047857; }
#empForm .emp-hijri-out.is-bad { color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════════════════
   📊 v1214 — مركزُ التقارير: شكلٌ أوضح (طلبات المالك 2026-09-20)
   شاشةُ التقارير ليست مودالاً فلم تبلغها طبقاتُ التوحيد — وقياسُها الحيّ أظهر
   حقولَ فلترةٍ بارتفاعاتٍ صغيرة مختلفة، وشريطَ قسمٍ بلا لون يكاد لا يُرى،
   وزرَّ عودةٍ باهتاً كبقيّة الأزرار. القواعدُ أدناه تعالج ذلك بألوان الهوية
   (`--el-*` · قاعدة 5) بلا حقن CSS من الوحدة (قاعدة 11).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ① شريطُ القسم الفرعي: كان نصّاً رمادياً بخلفيةٍ شفّافة — صار شريطاً بشارةٍ
      جانبية وخلفيةٍ من الهوية، فيُقرأ القسمُ قبل بطاقاته. */
.rc-section-h {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: var(--el-teal-900, #014034) !important;
  background: linear-gradient(90deg, var(--el-em-50, #ecfdf5), #ffffff 70%) !important;
  border: 1px solid #cdeee1 !important;
  border-inline-start: 4px solid var(--el-teal-800, #115e59) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 1px 2px rgba(1, 64, 52, .05);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.rc-section-h:hover {
  background: linear-gradient(90deg, #d7f5e9, #ffffff 70%) !important;
  border-color: #a7ddc9 !important;
  box-shadow: 0 3px 10px rgba(1, 64, 52, .08);
}
.rc-section-h .rc-sec-caret { color: var(--el-teal-800, #115e59); font-size: 12px; }
.rc-section-h .rc-sec-n {
  background: var(--el-teal-800, #115e59); color: #fff;
  font-size: 11px; padding: 2px 9px; border-radius: 99px;
}
.rc-section.is-closed .rc-section-h {
  background: #f8fafc !important;
  border-inline-start-color: #cbd5e1 !important;
  color: #475569 !important;
}
.rc-section.is-closed .rc-section-h .rc-sec-n { background: #e2e8f0; color: #475569; }

/* 🛡️ v1265 — شريطُ فلاتر «مراقبة المراسلات» (`.sml-filters`) يأخذ هذا التصميم نفسه: ارتفاعٌ واحد 40px · سهمٌ وعدسةٌ مرسومان · حافّةُ الهوية (قاعدة 115 — كان البحثُ 20px بلا إطار) */
/* ② شريطُ الفلاتر: بطاقةٌ بيضاء ⇒ شريطٌ من ألوان البرنامج بحافّةٍ مميّزة، يبقى
      ظاهراً عند التمرير فلا يُبحَث عنه في أعلى الصفحة. */
:is(.rc-filters, .sml-filters) {
  background: linear-gradient(180deg, var(--el-em-50, #ecfdf5), #ffffff) !important;
  border: 1px solid #bfe3d6 !important;
  border-inline-start: 5px solid var(--el-teal-800, #115e59) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  gap: 12px !important;
  box-shadow: 0 2px 10px rgba(1, 64, 52, .06);
  position: sticky; top: 0; z-index: 6;
}
:is(.rc-filters, .sml-filters) :is(.rc-f, .sml-f) > span { color: var(--el-teal-900, #014034); font-weight: 800; font-size: 12px; }

/* ③ حقولُ الفلترة والبحث: ارتفاعٌ واحد 40px كما في مودالات البرنامج — كان
      البحثُ الحرّ أقصرَ من جيرانه (قياسٌ حيّ) والحشوةُ لا تسوّي ذلك (قاعدة 115). */
:is(.rc-filters, .sml-filters) :is(input[type="text"], input[type="search"], input[type="date"], input[type="number"], select), :is(.rc-filters, .sml-filters) :is(input[type="text"], input[type="search"], input[type="date"], input[data-amt], select) {
  height: 40px; min-height: 40px; box-sizing: border-box;
  padding-block: 0; padding-inline: 12px;
  font-size: 13.5px; font-weight: 600;
  border: 1.5px solid #cfe7dd; border-radius: 10px;
  background-color: #fff; color: #0f172a;   /* لا الاختصار: هذه الحقولُ نفسُها تأخذ سهماً وعدسةً مرسومين أدناه */
  transition: border-color .15s, box-shadow .15s;
}
:is(.rc-filters, .sml-filters) :is(input, select):focus {
  border-color: var(--el-em-500, #10b981);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .16);
  outline: none;
}
:is(.rc-filters, .sml-filters) select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'><rect x='0.5' y='0.5' width='25' height='25' rx='8' fill='%23ecfdf5' stroke='%23c7ece0'/><path d='M8.5 11 L13 15.5 L17.5 11' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-size: 26px 26px; padding-inline-end: 44px; cursor: pointer;
}
html[dir="rtl"] :is(.rc-filters, .sml-filters) select { background-position: left 7px center; }
html[dir="ltr"] :is(.rc-filters, .sml-filters) select { background-position: right 7px center; }
/* مربّعُ البحث الحرّ بعدسةٍ مرسومة كبقيّة البرنامج */
:is(.rc-filters, .sml-filters) input[type="search"], :is(.rc-filters, .sml-filters) :is(.rc-f-grow, .sml-f-grow) input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230d6e5c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.2-3.2'/></svg>");
  background-repeat: no-repeat; background-size: 16px 16px; padding-inline-start: 34px;
}
html[dir="rtl"] :is(.rc-filters, .sml-filters) input[type="search"], html[dir="rtl"] :is(.rc-filters, .sml-filters) :is(.rc-f-grow, .sml-f-grow) input { background-position: right 11px center; }
html[dir="ltr"] :is(.rc-filters, .sml-filters) input[type="search"], html[dir="ltr"] :is(.rc-filters, .sml-filters) :is(.rc-f-grow, .sml-f-grow) input { background-position: left 11px center; }
.rc-filters .rc-check { padding-bottom: 0; align-self: center; height: 40px; }
.rc-filters .rc-reset, .sml-filters .btn { height: 40px; }

/* ④ زرُّ العودة إلى كل التقارير: كان باهتاً كبقيّة الأزرار — صار قرصاً بلون
      الهوية يُرى من أوّل نظرة. */
.rc-back {
  background: var(--el-teal-800, #115e59) !important;
  border: 1px solid var(--el-teal-900, #014034) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 99px !important;
  padding: 8px 16px !important;
  min-height: 38px;
  box-shadow: 0 2px 8px rgba(1, 64, 52, .18);
  transition: background .15s, transform .12s, box-shadow .15s;
}
.rc-back:hover { background: var(--el-teal-900, #014034) !important; box-shadow: 0 4px 14px rgba(1, 64, 52, .26); }
.rc-back:active { transform: translateY(1px); }
.rc-back .ai-ico { width: 15px; height: 15px; }

/* ⑤ بحثُ قائمة التقارير في الترويسة يتبع الارتفاع نفسه */
.rc-search input { height: 40px; box-sizing: border-box; padding-block: 0; font-size: 13.5px; }

/* ══════════════════════════════════════════════════════════════════════════
   ✉️ v1223 — البريد الداخلي (شاشةٌ مستقلّة · الشؤون الإدارية)
   أصنافٌ معرَّفة هنا لا مُخترَعة في الوحدة (قاعدة 11)، وبألوان الهوية (قاعدة 5).
   ══════════════════════════════════════════════════════════════════════════ */
.im-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.im-tabs { display: inline-flex; gap: 6px; background: #f1f5f9; padding: 4px; border-radius: 10px; }
.im-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 14px; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: #475569;
  display: inline-flex; align-items: center; gap: 6px;
}
.im-tab:hover { background: #e2e8f0; }
.im-tab.is-on { background: var(--el-teal-800, #115e59); color: #fff; }
.im-badge {
  background: #dc2626; color: #fff; border-radius: 999px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800;
}
.im-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #475569; cursor: pointer; }
.im-note {
  margin-top: 10px; padding: 8px 12px; border-radius: 9px;
  background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
  font-size: 12px; font-weight: 700; line-height: 1.6;
}
.im-foot { margin-top: 12px; font-size: 11.5px; color: #64748b; line-height: 1.7; }
.im-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; white-space: nowrap;
}
.im-unread { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.im-read { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.im-msg { border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: #fff; }
.im-msg-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed #e2e8f0; }
.im-msg-h strong { font-size: 13px; color: #0f172a; }
.im-msg-to { font-size: 11.5px; color: #64748b; }
.im-msg-when { font-size: 11.5px; color: #64748b; margin-inline-start: auto; }
.im-msg-no { font-size: 11px; color: #94a3b8; font-weight: 700; }
.im-msg-b { font-size: 13px; line-height: 1.85; color: #1e293b; white-space: pre-wrap; word-break: break-word; }
.im-msg-att { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.im-msg-read { margin-top: 9px; font-size: 11px; color: #64748b; border-top: 1px dashed #e2e8f0; padding-top: 7px; }

/* ✉️ v1225 — بريدي الداخلي في البوّابة (أصنافٌ معرَّفة هنا لا مُخترَعة · قاعدة 11)
   🎨 v1305 — طلب المالك «تنسيقٌ وشكلٌ وألوانٌ أوضح لبريدي الداخلي وخصوصاً الرسالة الجديدة»:
   • شريطُ الصناديق مقطعٌ واحد (الوارد · المرسَل) مختارُه مملوءٌ بلون الهوية والآخرُ نصٌّ داكنٌ مقروء — كان «المرسَل» بصنف رأس
     البوّابة الداكن (نصٌّ فاتحٌ على بطاقةٍ بيضاء) فلا يكاد يُرى، و«رسالة جديدة» بصنفٍ غير معرَّف فيُرسَم نصّاً عارياً.
   • المستلمون صفوفٌ بمربّع اختيار ✓ واسمٍ ووظيفةٍ وحرفٍ أوّل — لا أزرارٌ يتلوّن المختارُ منها؛ والمختارُ يُعرَف بعلامته لا بتظليله.
   • الموضوعُ والنصُّ صندوقان بحدٍّ ظاهر وارتفاعٍ صريح (قاعدة 115) وحلقةِ تركيزٍ بلون الهوية — كان النصُّ بلا حدٍّ إطلاقاً.
   • الأزرار: أساسيٌّ بتدرّج الهوية وثانويٌّ بحدٍّ رماديّ · وما ينقص عند الإرسال يُعلَّم بإطارٍ أحمر في مكانه.
   ⚠️ المربّعُ مرسومٌ بـ`appearance: none` (وعلامتُه ::before) فيتطابق في سفاري وكروم. */
.ep-mail-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; }
.ep-mail-seg {
  display: inline-flex; gap: 4px; padding: 4px;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 12px;
}
.ep-mail-seg-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px;
  border: 0; border-radius: 9px; background: transparent; color: #334155;
  font-family: inherit; font-size: var(--ep-t3); font-weight: 800; cursor: pointer;
  -webkit-transition: background-color .15s ease, color .15s ease; transition: background-color .15s ease, color .15s ease;
}
.ep-mail-seg-btn:hover { background-color: #fff; color: var(--el-teal-800, #014034); }
.ep-mail-seg-btn.is-on {
  background-color: var(--el-teal-800, #014034); color: #fff;
  -webkit-box-shadow: 0 1px 3px rgba(1,64,52,.25); box-shadow: 0 1px 3px rgba(1,64,52,.25);
}
.ep-mail-seg-n {
  font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--el-em-500, #10b981); color: #fff; font-size: var(--ep-t4); font-weight: 900;
}
.ep-mail-seg-btn.is-on .ep-mail-seg-n { background-color: #fff; color: var(--el-teal-800, #014034); }

.ep-mail-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent;
  font-family: inherit; font-size: var(--ep-t3); font-weight: 800; cursor: pointer; white-space: nowrap;
  -webkit-transition: background-color .15s ease, border-color .15s ease, -webkit-filter .15s ease;
  transition: background-color .15s ease, border-color .15s ease, filter .15s ease;
}
.ep-mail-btn-pri {
  background-image: var(--el-grad-btn, linear-gradient(135deg, #047857, #059669));
  background-color: var(--el-em-700, #047857); border-color: var(--el-em-700, #047857); color: #fff;
}
.ep-mail-btn-pri:hover { -webkit-filter: brightness(1.07); filter: brightness(1.07); }
.ep-mail-btn-sec { background-color: #fff; border-color: #cbd5e1; color: #334155; }
.ep-mail-btn-sec:hover { background-color: #f8fafc; border-color: #94a3b8; color: #0f172a; }
.ep-mail-btn:disabled { opacity: .5; cursor: default; -webkit-filter: none; filter: none; }
.ep-mail-btn:focus-visible, .ep-mail-seg-btn:focus-visible { outline: 2px solid var(--el-em-500, #10b981); outline-offset: 2px; }

.ep-mail-compose {
  border-color: var(--el-em-200, #a7f3d0);
  -webkit-box-shadow: 0 4px 18px rgba(1,64,52,.08); box-shadow: 0 4px 18px rgba(1,64,52,.08);
}
.ep-mail-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #eef2f6; }
.ep-mail-head-ic {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--el-em-50, #ecfdf5); color: var(--el-em-700, #047857);
}
.ep-mail-head-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ep-mail-head-txt strong { font-size: var(--ep-t2); font-weight: 900; color: #0f172a; }
.ep-mail-head-txt span { font-size: var(--ep-t4); color: #64748b; line-height: 1.6; }
.ep-mail-compose .ep-f { margin-bottom: 14px; gap: 6px; }
.ep-mail-compose .ep-f label { font-size: var(--ep-t3); font-weight: 800; color: #1e293b; }
.ep-mail-req { color: #dc2626; font-weight: 900; }
.ep-mail-opt { color: #94a3b8; font-weight: 600; }
.ep-mail-compose .ep-mail-input,
.ep-mail-compose .ep-mail-textarea {
  width: 100%; border: 1.5px solid #cbd5e1; border-radius: 10px; background-color: #fff; color: #0f172a;
  font-family: inherit; font-size: var(--ep-t2);
  -webkit-transition: border-color .15s ease, -webkit-box-shadow .15s ease; transition: border-color .15s ease, box-shadow .15s ease;
}
.ep-mail-compose .ep-mail-input { height: 44px; padding: 0 12px; }
.ep-mail-compose .ep-mail-textarea { min-height: 160px; padding: 10px 12px; line-height: 1.8; resize: vertical; overflow-x: hidden; overflow-y: auto; }
/* ⚠️ `overflow-x: hidden` مقيسٌ في المتصفّح: شريطُ التمرير العامّ (8px · premium_theme) مع `overflow: auto` كان يحجز شريطين فارغين
   داكنَين على حافّتَي الصندوق يمنةً وأسفلَ والنصُّ لم يفض — والنصُّ يلتفّ فلا حاجة لتمريرٍ أفقي أصلاً. */
.ep-mail-compose .ep-mail-input::placeholder, .ep-mail-compose .ep-mail-textarea::placeholder { color: #94a3b8; }
.ep-mail-compose .ep-mail-input:hover, .ep-mail-compose .ep-mail-textarea:hover { border-color: #94a3b8; }
.ep-mail-compose .ep-mail-input:focus, .ep-mail-compose .ep-mail-textarea:focus {
  outline: none; border-color: var(--el-em-600, #059669);
  -webkit-box-shadow: 0 0 0 3px rgba(16,185,129,.18); box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}
.ep-mail-compose .ep-mail-input.is-err, .ep-mail-compose .ep-mail-textarea.is-err {
  border-color: #dc2626; -webkit-box-shadow: 0 0 0 3px rgba(220,38,38,.12); box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}

.ep-mail-rcpt-box { border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; background-color: #f8fafc; }
.ep-mail-rcpt-box.is-err { border-color: #fca5a5; background-color: #fef2f2; }
.ep-mail-rcpt-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ep-mail-rcpt-h { display: inline-flex; align-items: center; gap: 6px; font-size: var(--ep-t3); font-weight: 800; color: #1e293b; }
.ep-mail-rcpt-n {
  font-size: var(--ep-t4); font-weight: 700; color: #64748b;
  background-color: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 2px 10px;
}
.ep-mail-rcpt-n.is-some { color: var(--el-em-800, #065f46); background-color: var(--el-em-50, #ecfdf5); border-color: var(--el-em-200, #a7f3d0); }
.ep-mail-link {
  margin-inline-start: auto; padding: 0; border: 0; background: none;
  color: var(--el-em-700, #047857); font-family: inherit; font-size: var(--ep-t4); font-weight: 800; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.ep-mail-rcpt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ep-mail-rcpt {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px;
  background-color: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; cursor: pointer;
  -webkit-user-select: none; user-select: none;
  -webkit-transition: border-color .15s ease; transition: border-color .15s ease;
}
.ep-mail-rcpt:hover { border-color: #94a3b8; }
.ep-mail-rcpt.is-on { border-color: var(--el-em-600, #059669); }
.ep-mail-cb {
  -webkit-appearance: none; appearance: none; margin: 0; flex: 0 0 auto;
  width: 20px; height: 20px; min-height: 20px; border: 2px solid #94a3b8; border-radius: 6px; background-color: #fff;
  display: inline-grid; place-content: center; cursor: pointer;
  /* `min-height` مقيسٌ على الجوّال: `responsive_pro.css` يعطي كل `input` تحت 640px ارتفاعاً أدنى 38px فيستطيل المربّع */
  -webkit-transition: background-color .12s ease, border-color .12s ease; transition: background-color .12s ease, border-color .12s ease;
}
.ep-mail-cb::before {
  content: ''; width: 10px; height: 5px; margin-top: -3px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  -webkit-transform: rotate(-45deg) scale(0); transform: rotate(-45deg) scale(0);
  -webkit-transition: -webkit-transform .12s ease; transition: transform .12s ease;
}
.ep-mail-cb:checked { background-color: var(--el-teal-800, #014034); border-color: var(--el-teal-800, #014034); }
.ep-mail-cb:checked::before { -webkit-transform: rotate(-45deg) scale(1); transform: rotate(-45deg) scale(1); }
.ep-mail-cb:focus-visible { outline: 2px solid var(--el-em-500, #10b981); outline-offset: 2px; }
.ep-mail-av {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--el-em-100, #d1fae5); color: var(--el-em-800, #065f46); font-size: var(--ep-t3); font-weight: 900;
}
.ep-mail-rcpt-txt { display: flex; flex-direction: column; min-width: 0; }
.ep-mail-rcpt-nm { font-size: var(--ep-t3); font-weight: 800; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-mail-rcpt-sub { font-size: var(--ep-t4); color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ep-mail-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }
.ep-mail-item { padding: 12px 14px; }
.ep-mail-row {
  display: flex; gap: 12px; align-items: center; width: 100%;
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
  padding: 0; text-align: start; color: inherit;
}
.ep-mail-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ep-mail-line1 { display: flex; align-items: baseline; gap: 10px; }
.ep-mail-who { flex: 1; min-width: 0; font-weight: 800; font-size: var(--ep-t3); color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-mail-when { flex: 0 0 auto; font-size: var(--ep-t4); color: #64748b; font-variant-numeric: tabular-nums; }
.ep-mail-sub { font-size: var(--ep-t3); color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-mail-unread { border-inline-start: 4px solid var(--el-em-500, #10b981); }
.ep-mail-unread .ep-mail-sub { color: #0f172a; font-weight: 800; }
.ep-mail-item.is-open { border-color: var(--el-em-200, #a7f3d0); }
.ep-mail-body {
  margin-top: 12px; padding: 12px 14px; background-color: #f8fafc; border: 1px solid #eef2f6; border-radius: 10px;
  font-size: var(--ep-t2); line-height: 1.85; color: #1e293b; white-space: pre-wrap; word-break: break-word;
}
.ep-mail-meta { margin-top: 8px; font-size: var(--ep-t4); color: #64748b; }
@media (max-width: 560px) {
  .ep-mail-bar { -webkit-box-align: stretch; align-items: stretch; }
  .ep-mail-seg { width: 100%; }
  .ep-mail-seg-btn { -webkit-box-flex: 1; flex: 1; justify-content: center; }
  .ep-mail-bar > .ep-mail-btn { width: 100%; }
  .ep-mail-acts .ep-mail-btn { -webkit-box-flex: 1; flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   🗂️ v1227 — القائمة المنسدلة بمراحل العمل (طلب المالك: ثماني شاشات للعمود،
   ومرتَّبةً بآليّة العمل). لكل مرحلةٍ عمودٌ برأسٍ صغير يفصلها عمّا بعدها.
   ══════════════════════════════════════════════════════════════════════════ */
.at-tn-cols { display: flex; align-items: flex-start; gap: 6px; }
.at-tn-col { display: flex; flex-direction: column; min-width: 232px; }
.at-tn-col + .at-tn-col { padding-inline-start: 6px; border-inline-start: 1px solid rgba(16,185,129,.16); }
.at-tn-col-h {
  font-size: 10.5px; font-weight: 800; letter-spacing: .2px;
  color: var(--el-teal-800, #115e59);
  padding: 2px 10px 6px; margin-bottom: 3px;
  border-bottom: 1px dashed rgba(16,185,129,.28);
  white-space: nowrap;
}
.at-tn-col-h-cont { border-bottom-style: dotted; opacity: .5; min-height: 14px; }
html[dir="rtl"] .at-tn-col-h { text-align: right; }

/* 🛡️ v1229 — شاشة «مراقبة المراسلات» (ثلاثة تبويبات) وعلامةُ التدخّل الإداري */
.mw-shell { display: block; }
.mw-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mw-count { font-size: 12px; font-weight: 700; color: #475569; }
.mw-note {
  margin-bottom: 10px; padding: 8px 12px; border-radius: 9px;
  background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
  font-size: 12px; font-weight: 700; line-height: 1.6;
}
.mw-note.warn { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.mw-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
}
.mw-pill.ok { background: #dcfce7; color: #166534; border-color: #86efac; }
.mw-pill.bad { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.im-oversight { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.im-tab-link { text-decoration: none; }

/* 🔢 v1256 — مرآةُ المبلغ أثناء الكتابة (amount_mirror.js · طلب المالك «فاصلة الآلاف للمبالغ فقط»): فقاعةٌ لا تمسّ القيمة */
.amt-mirror { position: fixed; z-index: 2147483000; background: #0f172a; color: #fff; font-size: 12px; font-weight: 800; line-height: 1.35;
  padding: 3px 9px; border-radius: 6px; font-variant-numeric: tabular-nums; letter-spacing: .2px; pointer-events: none; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .22); }
.amt-mirror[hidden] { display: none !important; }

/* 🧾 v1264 — بطاقةُ القيد في جداول المستندات (JV_LEDGER.cardHtml · المبيعات والمشتريات والقبض والصرف بتطبيقٍ واحد):
   رقمُ القيد في سطر وحالتُه بنقطةٍ ملوّنة في سطر — نفسُ مظهر البطاقة القديمة بلا إيموجي (قاعدة 12) */
.jv-card { background: #f8fafc; border: 1.5px solid #cbd5e1; border-radius: 8px; padding: 5px 9px; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 108px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05); transition: transform .1s; font: inherit; color: #0f172a; }
.jv-card:hover { transform: translateY(-1px); }
.jv-card:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }
.jv-card__no { font-family: 'SF Mono', Menlo, monospace; font-size: 11.5px; font-weight: 800; color: #0f172a; letter-spacing: .3px;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.jv-card__no .ai-ico { width: 13px; height: 13px; flex: none; }
.jv-card__st { font-size: 10.5px; font-weight: 800; line-height: 1.1; color: #64748b; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.jv-card__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.jv-card[data-jv-state="pending"], .jv-card[data-jv-state="amended"] { background: #fff7ed; border-color: #fdba74; }
.jv-card[data-jv-state="pending"] .jv-card__st, .jv-card[data-jv-state="amended"] .jv-card__st { color: #9a3412; }
.jv-card[data-jv-state="returned"], .jv-card[data-jv-state="voided"] { background: #fee2e2; border-color: #fca5a5; }
.jv-card[data-jv-state="returned"] .jv-card__st, .jv-card[data-jv-state="voided"] .jv-card__st { color: #991b1b; }
.jv-card[data-jv-state="approved"] { background: #dcfce7; border-color: #86efac; }
.jv-card[data-jv-state="approved"] .jv-card__st { color: #166534; }
.jv-card[data-jv-state="unknown"] { background: #eff6ff; border-color: #bfdbfe; min-width: 0; }
.jv-card[data-jv-state="unknown"] .jv-card__no { color: #1e40af; font-family: inherit; }
.jv-card-none { color: #94a3b8; font-size: 12px; }

/* ═══ v1274 — كشوف جلسات الأخصائيين المتعاونين (assets/specialist_statements.js) ═══
   ارتفاعٌ صريح لحقول الفلاتر (قاعدة 115) · خلفية الحقول بـbackground-color (الاختصار يمسح سهم القائمة) · الألوان من الهوية والدلالي وحده */
.sps { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }   /* العمود ينكمش دون عرض أعرض جدول فيُمرَّر الجدول وحده */
.sps .sps-tw { box-shadow: none; margin: 0; border-radius: 0 0 12px 12px; }
.sps-head > div { min-width: 0; }
.sps [hidden] { display: none !important; }
.sps-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sps-title { margin: 0; font-size: 17px; font-weight: 900; color: var(--el-teal-900); }
.sps-sub { margin: 4px 0 0; font-size: 12.5px; color: #475569; max-width: 72ch; line-height: 1.6; }
.sps-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.sps-filters label { display: grid; gap: 4px; font-size: 11px; font-weight: 800; color: #475569; }
.sps-filters input, .sps-filters select { height: 36px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 12.5px; background-color: #fff; min-width: 140px; }
.sps-filters .sps-grow { flex: 1 1 220px; }
.sps-filters .sps-grow input { width: 100%; }
.sps-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.sps-kpi { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.sps-kpi .k { font-size: 11px; font-weight: 800; color: #64748b; }
.sps-kpi .v { font-size: 19px; font-weight: 900; color: var(--el-teal-900); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; margin-top: 2px; }
.sps-kpi .s { font-size: 11px; color: #64748b; margin-top: 2px; }
.sps-kpi.is-warn { border-color: #fcd34d; background: #fffbeb; }
.sps-kpi.is-warn .v { color: #92400e; }
.sps-sec { background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.sps-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #f8fafc; border-radius: 12px 12px 0 0; }
.sps-sec-h h4 { margin: 0; font-size: 13.5px; font-weight: 900; color: var(--el-teal-900); }
.sps-empty { padding: 22px; text-align: center; color: #64748b; font-size: 12.5px; }
.sps-acts { display: inline-flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.sps-note { font-size: 11px; color: #64748b; font-weight: 600; }
.sps-warn { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; border-radius: 10px; padding: 8px 12px; font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.sps-warn table { margin-top: 6px; background: #fff; }
.sps-err { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; border-radius: 10px; padding: 10px 14px; font-size: 12.5px; font-weight: 700; margin-bottom: 10px; }
.sps-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sps-sum > div { background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.sps-sum .k { font-size: 11px; font-weight: 800; color: #64748b; }
.sps-sum .v { font-size: 16px; font-weight: 900; color: var(--el-teal-900); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.sps-sum .net { border-color: var(--el-em-300); background: var(--el-em-50); }
.sps-sum .net .v { color: var(--el-em-800); }
.sps-adj { display: grid; grid-template-columns: 120px 1fr 150px 36px; gap: 6px; align-items: center; margin-bottom: 6px; }
.sps-adj select, .sps-adj input { height: 34px; padding: 0 8px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 12.5px; background-color: #fff; width: 100%; }
.sps-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; background: #f1f5f9; color: #334155; white-space: nowrap; }
.sps-chip.is-warn { background: #fef3c7; color: #92400e; }
.sps-chip.is-bad { background: #fee2e2; color: #991b1b; }
.sps-ico .ai-ico { width: 15px; height: 15px; }
tr.sps-drift td { background: #fffbeb; }
@media (max-width: 640px) {
  .sps-adj { grid-template-columns: 1fr 1fr; }
  .sps-filters input, .sps-filters select { min-width: 0; width: 100%; }
  .sps-filters label { flex: 1 1 140px; }
}

/* ═══ v1275 — المعفيون من البصمة: زرّا البصمة ضبابيّان لا يعملان · ومودالُ التوليد بمعاينته (attendance_log.js · portal_ui.js) ═══ */
.atl-mytoday-action.is-exempt, .ep-punch-btn.is-exempt {
  opacity: .45; cursor: not-allowed; -webkit-box-shadow: none; box-shadow: none;
  -webkit-filter: grayscale(1) blur(.6px); filter: grayscale(1) blur(.6px);
  -webkit-transform: none; transform: none;
}
.atl-mytoday-action.is-exempt:hover, .ep-punch-btn.is-exempt:hover { -webkit-transform: none; transform: none; -webkit-box-shadow: none; box-shadow: none; }
.atl-exempt-note, .ep-punch-exempt { margin-top: 10px; background: var(--el-em-50); border: 1px solid var(--el-em-200); color: var(--el-em-900); border-radius: 10px; padding: 9px 12px; font-weight: 700; line-height: 1.7; }
.atl-exempt-note { font-size: 12.5px; }
.ep-punch-exempt { font-size: var(--ep-t3); }   /* سلّمُ البوابة الرباعيّ (قاعدة 115) */
.atx-info { background: var(--el-em-50); border: 1px solid var(--el-em-200); color: var(--el-em-900); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.8; margin-bottom: 12px; }
.atx-preview { margin-top: 12px; }
.atx-preview .atx-tw { box-shadow: none; margin: 0 0 8px; }
.atx-sum { font-size: 12.5px; font-weight: 900; color: var(--el-teal-900); padding: 6px 2px; }
.atx-note { font-size: 12px; color: #64748b; padding: 8px 2px; }
.atx-err { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; font-weight: 700; }
.atx-z { color: #94a3b8; font-weight: 600; }
.atx-rules { margin: 12px 0 0; padding: 10px 14px 10px 10px; -webkit-padding-start: 26px; padding-inline-start: 26px; background: #f8fafc; border: 1px dashed var(--el-em-300); border-radius: 10px; font-size: 11.5px; color: #334155; line-height: 1.8; }

/* ═══ v1277 — فترات المرافقة تُعتمَد قبل فوترتها (companion_periods.js · companionships.js) ═══ */
.cpa-tab { display: flex; flex-direction: column; gap: 12px; }
.cpa-intro { background: var(--el-em-50); border: 1px solid var(--el-em-200); color: var(--el-em-900); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.8; }
.cpa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cpa-kpi { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.cpa-kpi b { font-size: 20px; font-weight: 900; line-height: 1.1; color: var(--el-teal-900); font-variant-numeric: tabular-nums; }
.cpa-kpi span { font-size: 11.5px; font-weight: 700; color: #475569; }
.cpa-empty { background: #fff; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 28px 16px; text-align: center; color: #64748b; font-size: 13px; }
.cpa-table td { vertical-align: middle; font-size: 12.5px; }
.cpa-acts { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cpa-note { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 700; line-height: 1.7; margin-bottom: 12px; }
.cpa-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.cpa-strip > div { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 10px; min-width: 0; }
.cpa-strip span { display: block; font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 2px; }
.cpa-strip b { font-size: 13px; font-weight: 800; color: #0f172a; overflow-wrap: anywhere; }
.cpa-calc { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; background: var(--el-em-50); border: 1px solid var(--el-em-200); color: var(--el-em-900); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.cpa-calc b { font-variant-numeric: tabular-nums; }
.cpa-calc:empty { display: none; }
.cpa-err { margin-top: 12px; background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; font-weight: 700; line-height: 1.7; white-space: pre-line; }
.cpa-err[hidden] { display: none !important; }   /* قاعدة 56 */
.cmp-tag.cpa-ok { background: var(--el-em-50); color: var(--el-em-800); border: 1px solid var(--el-em-200); }
/* 🖼️ v1343 (خطةُ الحجم · الدفعة 3ب) — صورةٌ مرجعُها في التخزين (sb://) ولم تُحَلّ بعدُ إلى ذاكرة الشاشة (نافذةُ تنزيلٍ قصيرة، أو جلسةٌ لا تقرأ
   الحاوية) لا تُرسَم رمزَ صورةٍ مكسورة: تُخفى في مكانها حتى تُحَلّ فيُعاد الرسم — شبكةُ أمانٍ مركزية لا سطرَ في أيّ شاشة */
img[src^="sb:"] { visibility: hidden; }