/* ============================================================
   حصن — App chrome & components
   ============================================================ */

/* ---- App shell layout ---- */
#app{ min-height:100dvh; }
.app-shell{ display:flex; min-height:100dvh; }

/* side rail (desktop) */
.rail{ position:sticky; top:0; align-self:flex-start; height:100dvh;
  width:84px; flex:none; padding:18px 12px; z-index:40;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:rgba(8,42,56,0.55); border-inline-start:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur)); }
.rail-logo{ margin-bottom:10px; }
.rail-item{ width:56px; height:50px; border-radius:14px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; cursor:pointer; color:var(--ink-3);
  border:1px solid transparent; transition:.2s var(--ease); position:relative; }
/* ── محاذاة نصوص الشريط الجانبي ──
   .rail عرضه 84px بحشوة 12px جانبين ⇒ 60px داخلي · .rail-item 56px.
   كان span بلا عرض ولا محاذاة ولا معالجة فيض، فالعناوين الطويلة
   («الإقرارات الضريبية» · «العمليات والمقاولات») تفيض حدود العنصر وتلتفّ
   بلا انضباط فتختلّ محاذاة العناصر رأسياً. */
/* سطران دائماً لكل عنصر — لا سطر واحد ولا ثلاثة — فيتساوى ارتفاع كل العناصر
   مهما طال العنوان وتبقى المحاذاة الرأسية منضبطة، ولا يُقصّ نصّ إلى كلمة واحدة
   مبهمة («دراسة» بدل «دراسة الجدوى»). */
.rail .rail-item{ width:56px; height:60px; min-height:60px; padding:5px 2px;
  justify-content:center; gap:2px; }
.rail .rail-item span{ font-size:9.5px; font-weight:600; width:100%; max-width:52px;
  text-align:center; line-height:1.2; height:2.4em;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
  overflow:hidden; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
.rail .rail-item svg{ flex:none; }
.rail-item:hover{ color:#fff; background:rgba(255,255,255,.06); }
.rail-item.active{ color:#fff; background:linear-gradient(160deg, rgba(124,240,200,.18), rgba(21,184,194,.10));
  border-color:rgba(124,240,200,.30); box-shadow:0 6px 18px rgba(0,0,0,.25); }
.rail-item.active::before{ content:""; position:absolute; inset-inline-end:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:24px; border-radius:4px; background:linear-gradient(var(--mint),var(--primary-bright));
  box-shadow:0 0 10px var(--mint); }
.rail-spacer{ flex:1; }

/* main column */
.main-col{ flex:1; min-width:0; display:flex; flex-direction:column;
  padding-bottom:40px; max-height:100dvh; overflow-y:auto; scroll-behavior:smooth; }
.screen{ padding:0 0 60px; }

/* bottom dock (mobile) */
.dock{ position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:50;
  display:flex; gap:2px; padding:7px; border-radius:var(--r-pill);
  background:rgba(8,42,56,0.6); border:1px solid var(--glass-border-bright);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 14px 40px rgba(0,0,0,.45); max-width:calc(100vw - 24px); }
.dock-item{ width:54px; height:50px; border-radius:16px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; cursor:pointer; color:var(--ink-3);
  transition:.2s var(--ease); }
.dock-item span{ font-size:9px; font-weight:600; }
.dock-item.active{ color:#04221c; background:linear-gradient(160deg,var(--mint),var(--primary-bright));
  box-shadow:0 6px 16px rgba(25,198,160,.5); }
.dock-more{ position:relative; }

/* ---- Screen header ---- */
.screen-hdr{ position:sticky; top:0; z-index:30; border-radius:0;
  margin:0; padding:14px clamp(16px,4vw,28px); border-inline:0; border-top:0;
  background:rgba(10,61,69,0.55); }
.screen-hdr::before{ display:none; }
.hdr-act{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink-2); background:var(--glass-fill); border:1px solid var(--glass-border);
  transition:.2s var(--ease); }
.hdr-act:hover{ color:#fff; background:rgba(255,255,255,.12); transform:translateY(-1px); }

/* ---- Top user bar (home) ---- */
.topbar{ display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(16px,4vw,28px); }
.userchip{ display:flex; align-items:center; gap:9px; padding:7px 8px 7px 14px; border-radius:var(--r-pill);
  background:var(--glass-fill); border:1px solid var(--glass-border); cursor:pointer; transition:.2s var(--ease); }
.userchip:hover{ border-color:var(--glass-border-bright); }
.avatar{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#04221c;
  background:linear-gradient(135deg,var(--mint),var(--teal)); flex:none; }

/* ---- KPI card ---- */
.kpi{ padding:18px; overflow:hidden; }
.kpi-top{ position:absolute; top:0; inset-inline:0; height:3px; opacity:.9; }
.kpi .between{ gap:10px; }
.kpi .col{ min-width:0; }
.kpi-val{ font-size:clamp(20px,2.4vw,26px); font-weight:800; line-height:1.05; display:flex; align-items:baseline; gap:5px; flex-wrap:nowrap; white-space:nowrap; }
.kpi-unit{ font-size:13px; font-weight:700; color:var(--ink-2); }
.kpi-ic{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--glass-border); flex:none; }
.label{ font-size:12.5px; }
.sar{ font-size:.62em; font-weight:700; color:var(--ink-2); margin-inline-start:3px; }

/* ---- Module cards (home) ---- */
.mod-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.mod-card{ padding:20px; cursor:pointer; display:flex; flex-direction:column; gap:14px; min-height:140px;
  position:relative; overflow:hidden; }
.mod-card.wide{ grid-column:1 / -1; flex-direction:row; align-items:center; min-height:auto; }
.mod-ic{ width:50px; height:50px; border-radius:15px; display:flex; align-items:center; justify-content:center;
  flex:none; color:#fff; position:relative; }
.mod-ic svg{ width:24px; height:24px; }
.mod-accent{ position:absolute; inset-inline-start:0; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0; }
.mod-card .mod-title{ font-weight:700; font-size:16.5px; }
.mod-card .mod-sub{ font-size:12px; color:var(--ink-3); line-height:1.7; }
.mod-arrow{ margin-inline-start:auto; margin-block-start:auto; color:var(--ink-3); transition:.2s var(--ease); }
.mod-card.wide .mod-arrow{ margin-block-start:0; }
.mod-card:hover .mod-arrow{ color:var(--mint); transform:translateX(-4px); }

/* quick actions row */
.qa-row{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.qa-row::-webkit-scrollbar{ display:none; }
.qa{ flex:none; display:flex; align-items:center; gap:8px; padding:11px 16px; border-radius:var(--r-pill);
  background:var(--glass-fill); border:1px solid var(--glass-border); cursor:pointer; color:var(--ink-2);
  font-size:13.5px; font-weight:600; white-space:nowrap; transition:.2s var(--ease); }
.qa:hover{ color:#fff; border-color:var(--glass-border-bright); transform:translateY(-2px); }
.qa svg{ width:17px; height:17px; color:var(--mint); }

/* ---- Empty state ---- */
.empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:60px 20px; }
.empty-ic{ width:74px; height:74px; border-radius:22px; display:flex; align-items:center; justify-content:center;
  color:var(--mint); }

/* ---- FAB ---- */
.fab{ position:fixed; inset-inline-end:22px; bottom:90px; z-index:45; height:56px; min-width:56px;
  border:none; border-radius:var(--r-pill); cursor:pointer; color:#04221c; display:flex; align-items:center;
  gap:8px; padding:0 18px; font-family:var(--font); font-weight:800; font-size:15px;
  background:linear-gradient(135deg,var(--mint),var(--primary-bright));
  box-shadow:0 12px 30px rgba(25,198,160,.55), inset 0 1px 0 rgba(255,255,255,.4);
  transition:.25s var(--ease); }
.fab svg{ width:24px; height:24px; }
.fab .fab-label{ font-size:14px; }
.fab:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 18px 40px rgba(25,198,160,.7); }
@media (max-width:560px){ .fab .fab-label{ display:none; } .fab{ padding:0; width:56px; } }

/* ---- Big highlighted summary banner (portfolio / VAT) ---- */
.banner{ padding:20px 22px; border-radius:var(--r-card); overflow:hidden; position:relative;
  background:linear-gradient(135deg, rgba(14,138,110,.5), rgba(14,92,83,.42));
  border:1px solid rgba(124,240,200,.22); }
.banner.neg-banner{ background:linear-gradient(135deg, rgba(240,107,107,.32), rgba(120,40,40,.30)); border-color:rgba(240,107,107,.3); }
.banner-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; font-size:14.5px; color:var(--ink-2); }
.banner-row.total{ border-top:1px solid rgba(255,255,255,.18); margin-top:6px; padding-top:14px; }
.banner-row.total .v, .banner-row.total .k{ color:var(--mint); font-weight:800; font-size:18px; }
.banner-row .v{ font-weight:700; color:#fff; }

/* ---- Tables ---- */
/* radius is concentric with the glass card (20px) minus its 6px padding = 14px;
   overflow-x:auto makes overflow-y compute to auto, so the wrapper clips all four
   corners to one consistent radius — no per-cell radii needed */
.tbl-wrap{ overflow-x:auto; border-radius:14px; border:1px solid rgba(255,255,255,.06); }
table.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px; }
table.tbl thead th{ text-align:right; font-weight:700; font-size:12.5px; color:#eafff8; padding:12px 14px;
  background:linear-gradient(180deg, rgba(14,138,110,.5), rgba(14,138,110,.28)); position:sticky; top:0; }
table.tbl tbody td{ padding:12px 14px; color:var(--ink-2); border-bottom:1px solid rgba(255,255,255,.06); }
table.tbl tbody tr:last-child td{ border-bottom:none; }
table.tbl tbody tr:nth-child(even){ background:rgba(255,255,255,.025); }
table.tbl tbody tr:hover{ background:rgba(124,240,200,.05); }
.tbl-empty{ text-align:center; color:var(--ink-3); padding:30px; font-size:13.5px; }

/* إصلاح محاذاة الجداول: الرمز .num يُطبَّق على الخلية نفسها فيكسر تخطيط الجدول — نعيدها خلية */
td.num, th.num{ display:table-cell; }
/* نفس العلّة مع الصنف المساعد .flex المستخدَم على خلية الإجراءات في 9 شاشات:
   display:flex يُخرج الخلية من تخطيط الجدول فلا تمتد لارتفاع صفّها (قياس: خلية 59px
   داخل صف 67.7px، وصفّان متطابقا المحتوى يختلفان 24.3px). نعيدها خلية ونرتّب
   محتواها بـflex داخلياً: الأزرار تبقى في سطر واحد بفضل white-space.
   لا يُضاف تباعد هنا: الصنف .gap1 غير معرَّف في هذه الورقة أصلاً فالتباعد اليوم صفر،
   وإضافته تغيير بصري لا إصلاح. أبناء الخلية تُجعَل inline-flex لأن .li-del معرَّف
   display:flex (كتلي) فيتكدّس رأسياً داخل خلية جدول لو تُرك على حاله. */
td.flex, th.flex{ display:table-cell; white-space:nowrap; }
td.flex > *, th.flex > *{ display:inline-flex; vertical-align:middle; }
/* التباعد بالهامش لا بـgap: الخلية table-cell والـgap لا يعمل خارج flex/grid.
   القيمة --s2 (8px) لا --s1: أزرار 34×34 متلاصقة تُنتج نقرات خاطئة على الجوال،
   وفصل ≥8px يبقي هدف اللمس الفعلي ضمن المعيار. */
td.flex > * + *, th.flex > * + *{ margin-inline-start:var(--s2, 8px); }
/* الأرقام ورؤوسها بمحاذاة واحدة (يمين) في RTL لتصطفّ بصرياً */
table.tbl td.num{ white-space:nowrap; text-align:right; }
/* عمود اسم البند: سطر واحد مع تلميح كامل في title */
table.tbl td.cell-name{ max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.tbl thead th{ text-align:right; }
/* جدول مستند الفاتورة: تخطيط ثابت لمحاذاة دقيقة */
.invd-table{ table-layout:fixed; }
.invd-table th, .invd-table td{ text-align:center; }
.invd-table th:first-child, .invd-table td:first-child{ text-align:right; width:44%; }
.invd-table th:nth-child(2), .invd-table td:nth-child(2){ width:14%; }
.invd-table th:nth-child(3), .invd-table td:nth-child(3){ width:21%; }
.invd-table th:nth-child(4), .invd-table td:nth-child(4){ width:21%; }
.invd-table td.num{ direction:ltr; }


/* ============================================================
   جداول كثيفة الأعمدة (2.38.wide) — عرض فقط، لا يمسّ أي منطق حسابي
   ------------------------------------------------------------
   المشكلة المقاسة (سجل تكاليف CBS): 11 عموداً بعرض طبيعي 1086px
   داخل حاوية 944px ← عمود الإجراءات يختفي كلياً و«فواتير» يُقصّ 45px،
   والتمرير صامت لأن أشرطة macOS العائمة غير مرئية في السكون.
   ------------------------------------------------------------
   العلاج بأربع طبقات:
   (1) كثافة compact/dense  → العرض الطبيعي 1066px بدل 1086px
   (2) طيّ الأعمدة الثانوية → 786px عند الشاشات المتوسطة
   (3) بطاقات على الضيّقة   → كل الحقول ظاهرة رأسياً
   (4) تثبيت الإجراءات + شريط تمرير مرئي = شبكة أمان لأي جدول يفيض
   ============================================================ */

/* (1) درجتا كثافة لجداول الزجاج — مكافئ .ht-table compact/dense الكلاسيكية */
table.tbl.compact{ font-size:12.8px; }
table.tbl.compact thead th,
table.tbl.compact tbody td,
table.tbl.compact tfoot td{ padding:9px 9px; }
table.tbl.compact thead th{ font-size:12px; }
table.tbl.dense{ font-size:12px; }
table.tbl.dense thead th,
table.tbl.dense tbody td,
table.tbl.dense tfoot td{ padding:6px 6px; }
table.tbl.dense thead th{ font-size:11.4px; white-space:nowrap; }

/* (2) إشارة تمرير صريحة — شريط مرئي دائماً بدل شريط macOS العائم غير المرئي */
.tbl-wrap{ scrollbar-width:thin; scrollbar-color:rgba(124,240,200,.45) rgba(255,255,255,.06); }
.tbl-wrap::-webkit-scrollbar{ height:9px; }
.tbl-wrap::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); border-radius:0 0 14px 14px; }
.tbl-wrap::-webkit-scrollbar-thumb{ background:rgba(124,240,200,.42); border-radius:99px;
  border:2px solid transparent; background-clip:padding-box; }
.tbl-wrap::-webkit-scrollbar-thumb:hover{ background:rgba(124,240,200,.68); background-clip:padding-box; }

/* (3) تثبيت عمود الإجراءات على حافة النهاية (اليسار في RTL) */
table.tbl.sticky-end thead th:last-child,
table.tbl.sticky-end tbody td:last-child{ position:sticky; inset-inline-end:0; }
/* الخلفية المعتمة والظِلّ لا يُطبَّقان إلا حين يوجد فائض أفقي فعلي
   (الصنف is-scrollable يضعه HISN.syncTableScroll) — فلا فاصل بصري حين يتّسع الجدول */
.tbl-wrap.is-scrollable table.tbl.sticky-end tbody td:last-child{ z-index:2; background:var(--sticky-col);
  box-shadow:9px 0 12px -8px rgba(0,0,0,.6); }
.tbl-wrap.is-scrollable table.tbl.sticky-end tbody tr:nth-child(even) td:last-child{ background:var(--sticky-col-alt); }
.tbl-wrap.is-scrollable table.tbl.sticky-end tbody tr:hover td:last-child{ background:var(--sticky-col-hover); }
.tbl-wrap.is-scrollable table.tbl.sticky-end thead th:last-child{ z-index:3; background:var(--sticky-col-head);
  box-shadow:9px 0 12px -8px rgba(0,0,0,.6); }

/* (4) طيّ الأعمدة الثانوية — عتبتان حسب كثافة الجدول.
   fold-lg: جداول 10 أعمدة فأكثر (تُطوى مبكراً) · fold-sm: جداول 7–9 أعمدة */
@media (max-width:1280px){ table.tbl .fold-lg{ display:none; } }
@media (max-width:900px){  table.tbl .fold-sm{ display:none; } }

/* (5) بطاقات على الشاشات الضيّقة — كل صف بطاقة مكدّسة رأسياً بعناوين من data-label.
   يُفعَّل بالصنف cards-on الذي يضعه HISN.syncTableScroll حسب data-cards-bp لكل جدول،
   فتختار كل شاشة عتبتها دون تكرار الكتلة في أكثر من media query. */
.tbl-wrap.cards-on{ overflow-x:visible; border:none; border-radius:0; }
table.tbl.cards-on{ display:block; min-width:0; font-size:13px; }
.tbl.cards-on thead{ display:none; }
.tbl.cards-on tbody{ display:block; }
.tbl.cards-on tbody tr,
.tbl.cards-on tbody tr:nth-child(even){ display:block; margin-bottom:10px; padding:2px 13px 4px;
  border:1px solid rgba(255,255,255,.10); border-radius:14px; background:rgba(255,255,255,.04); }
.tbl.cards-on tbody tr:hover{ background:rgba(124,240,200,.07); }
.tbl.cards-on tbody td{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px dashed rgba(255,255,255,.09); text-align:start; white-space:normal; }
.tbl.cards-on tbody tr td:last-child{ border-bottom:none; }
.tbl.cards-on tbody td::before{ content:attr(data-label); flex:none; color:var(--ink-3);
  font-size:11.5px; font-weight:700; }
.tbl.cards-on tbody td:not([data-label])::before,
.tbl.cards-on tbody td[data-label=""]::before{ display:none; }
/* أول خلية = صدر البطاقة (الكود/المعرّف) */
.tbl.cards-on tbody td:first-child{ border-bottom:1px solid rgba(124,240,200,.20); padding-top:11px; }
.tbl.cards-on td.num{ white-space:nowrap; }
.tbl.cards-on td.cell-name{ max-width:none; overflow:visible; text-overflow:clip; white-space:normal; }
/* الأعمدة المطويّة تعود للظهور داخل البطاقة — لا يضيع أي حقل */
.tbl.cards-on .fold-lg,
.tbl.cards-on .fold-sm{ display:flex; }
/* صف الأزرار في ذيل البطاقة */
.tbl.cards-on tbody td.acts{ justify-content:flex-end; gap:8px; padding-top:11px; }
/* التثبيت بلا معنى في وضع البطاقات */
.tbl.cards-on.sticky-end thead th:last-child,
.tbl.cards-on.sticky-end tbody td:last-child{ position:static; box-shadow:none; background:transparent; }
/* ذيل الإجماليات كبطاقة ملخّص */
.tbl.cards-on tfoot{ display:block; }
.tbl.cards-on tfoot tr{ display:flex; flex-wrap:wrap; gap:8px 18px; padding:13px;
  border:1px solid rgba(124,240,200,.28); border-radius:14px; background:rgba(14,138,110,.20); }
.tbl.cards-on tfoot td{ display:flex; gap:7px; border:none; padding:0; }
.tbl.cards-on tfoot td::before{ content:attr(data-label); color:var(--ink-3); font-weight:700; font-size:11.5px; }
.tbl.cards-on tfoot td:not([data-label])::before,
.tbl.cards-on tfoot td[data-label=""]::before{ display:none; }

/* الطباعة: عرض ورقة A4 يطابق عتبتَي الطيّ (1280/900)، فتختفي الأعمدة الثانوية
   من المطبوعات صامتةً. تُعاد كاملةً هنا، ويُبطَل وضع البطاقات والتثبيت على الورق. */
@media print{
  table.tbl .fold-lg, table.tbl .fold-sm{ display:table-cell !important; }
  .tbl-wrap{ overflow:visible !important; border:none !important; }
  table.tbl.cards-on{ display:table !important; }
  .tbl.cards-on thead{ display:table-header-group !important; }
  .tbl.cards-on tbody{ display:table-row-group !important; }
  .tbl.cards-on tbody tr{ display:table-row !important; border:0 !important; padding:0 !important; background:none !important; }
  .tbl.cards-on tbody td{ display:table-cell !important; border-bottom:1px solid #ddd !important; }
  .tbl.cards-on tbody td::before{ content:none !important; }
  table.tbl.sticky-end thead th:last-child,
  table.tbl.sticky-end tbody td:last-child{ position:static !important; box-shadow:none !important; background:none !important; }
}

/* ============================================================
   طباعة مستند الفاتورة (2.42.invprint)
   المسار الرسمي للفاتورة الورقية: window.print يستخدم محرّك المتصفح
   نفسه، فيعرض العربية بتشكيل ومسافات سليمة — بخلاف html2canvas
   الذي يُسقط آخر مسافة (البلاغ 14.1). يبقى html2pdf للإرفاق السريع.
   يُفعَّل بالصنف body.print-invoice الذي يضعه HISN.invPrint().
   ============================================================ */
@media print{
  @page{ size:A4; margin:12mm; }

  /* إخفاء واجهة التطبيق بـdisplay لا visibility: الأخيرة تحجز مساحة التخطيط
     فتُنتج صفحة ثانية فارغة (بلاغ مثبت على ملف مطبوع فعلياً). */
  body.print-invoice .rail,
  body.print-invoice .dock,
  body.print-invoice .screen-hdr,
  body.print-invoice .fab,
  body.print-invoice .cards-2,
  body.print-invoice .tweaks-panel,
  body.print-invoice #hisn-toast,
  body.print-invoice #hisn-busy,
  body.print-invoice .modal-overlay{ display:none !important; }

  /* تحييد الارتفاع القسري: #app و.app-shell عليهما min-height:100dvh
     فيفرضان صفحة كاملة على الأقل ثم تفيض البقية لصفحة ثانية. */
  body.print-invoice, body.print-invoice #app, body.print-invoice .app-shell,
  body.print-invoice .main-col, body.print-invoice .screen{
    min-height:0 !important; height:auto !important; max-height:none !important;
    overflow:visible !important; display:block !important;
    background:#fff !important; padding:0 !important; margin:0 !important;
  }
  body.print-invoice .wrap{ max-width:none !important; width:auto !important;
    padding:0 !important; margin:0 !important; }

  /* المستند يبقى في التدفق الطبيعي — لا position:absolute:
     الإزاحة تُخرجه من التدفق فيصير ارتفاع الصفحة مستقلاً عن ارتفاعه. */
  body.print-invoice #inv-doc{
    border-radius:0 !important; box-shadow:none !important; border:none !important;
    background:#fff !important; padding:18px !important; margin:0 !important;
    max-width:none !important; width:auto !important;
  }
  /* لوحة QR: الإطار 96px بينما اللوحة 140px — يُترك الإطار يتمدّد للحجم الفعلي */
  body.print-invoice #inv-doc .invd-qr{ width:auto !important; height:auto !important; }
  body.print-invoice #inv-doc .invd-qr canvas{ width:120px !important; height:120px !important; }

  /* الخلفيات والألوان تُطبع كما هي (رأس الجدول الأخضر وQR والشرائط) */
  body.print-invoice #inv-doc, body.print-invoice #inv-doc *{
    -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
  }
  /* لا تُقطع الصفوف والكتل بين الصفحات */
  body.print-invoice #inv-doc .invd-table tr,
  body.print-invoice #inv-doc .invd-meta,
  body.print-invoice #inv-doc .invd-party,
  body.print-invoice #inv-doc .invd-tot{ page-break-inside:avoid; break-inside:avoid; }
  body.print-invoice #inv-doc .invd-table thead{ display:table-header-group; }
  /* آخر عنصر لا يدفع صفحة زائدة */
  body.print-invoice #inv-doc .invd-foot{ page-break-after:avoid; break-after:avoid; }
}

/* ---- Segmented toggle (sales/purchase, etc.) ---- */
.seg{ display:flex; gap:6px; padding:6px; border-radius:var(--r-btn); background:rgba(4,22,28,.4);
  border:1px solid var(--glass-border); }
.seg button{ flex:1; padding:11px 14px; border:none; border-radius:9px; cursor:pointer; font-family:var(--font);
  font-weight:700; font-size:14px; color:var(--ink-2); background:transparent; transition:.2s var(--ease); }
.seg button.on{ color:#fff; background:linear-gradient(135deg,var(--primary-bright),var(--primary));
  box-shadow:0 6px 16px rgba(14,138,110,.45); }
.seg button.on.danger{ background:linear-gradient(135deg,#F58A8A,var(--neg)); box-shadow:0 6px 16px rgba(240,107,107,.4); }

/* ---- Tabs ---- */
/* B-45: صفّ التبويبات كان بلا التفاف ولا تمرير — أربع تبويبات عربية
   تبلغ 406px داخل حاوية 328px عند 360px فتدفع الصفحة أفقياً (فيض 62px
   على كل تبويبات الشاشة القانونية). الالتفاف يُبقي كل تبويب قابلاً
   للوصول بلا إخفاء ولا شريط تمرير خفي. */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:420px){
  .tabs{ gap:6px; }
  .tabs .tab{ padding:8px 12px; font-size:12.5px; }
}
.tab{ padding:10px 16px; border-radius:var(--r-pill); cursor:pointer; font-weight:600; font-size:13.5px;
  color:var(--ink-2); background:var(--glass-fill); border:1px solid var(--glass-border); transition:.2s var(--ease); }
.tab:hover{ color:#fff; } .tab.on{ color:#04221c; background:linear-gradient(135deg,var(--mint),var(--primary-bright)); border-color:transparent; }

/* ---- Modal ---- */
.modal-overlay{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(4,18,24,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease); }
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal{ width:min(440px,100%); padding:26px; transform:translateY(16px) scale(.98); transition:transform .3s var(--ease); }
.modal-overlay.open .modal{ transform:none; }

/* ---- Upload dropzone ---- */
.dropzone{ border:1.5px dashed rgba(124,240,200,.35); border-radius:var(--r-card-sm); padding:34px 20px;
  text-align:center; cursor:pointer; transition:.2s var(--ease); background:rgba(124,240,200,.04); }
.dropzone:hover{ background:rgba(124,240,200,.08); border-color:rgba(124,240,200,.6); }
.dropzone .dz-ic{ width:56px; height:56px; border-radius:16px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
  color:var(--mint); background:rgba(124,240,200,.10); }

/* ---- Notice / hint ---- */
.notice{ display:flex; gap:11px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-card-sm);
  font-size:13px; line-height:1.7; }
.notice svg{ flex:none; margin-top:2px; }
.notice.hint{ background:rgba(21,184,194,.10); border:1px solid rgba(21,184,194,.25); color:#bdeef2; }
.notice.warn{ background:rgba(245,177,76,.10); border:1px solid rgba(245,177,76,.28); color:#f6d49a; }
.notice.hint svg{ color:var(--teal); } .notice.warn svg{ color:var(--warn); }

/* line items */
.li-row{ display:grid; grid-template-columns:1fr 80px 100px 110px 38px; gap:8px; align-items:center; }
.li-head{ font-size:11.5px; font-weight:700; color:var(--ink-3); padding-inline:4px; }
.li-del{ width:34px; height:34px; border-radius:10px; border:1px solid rgba(240,107,107,.3); background:rgba(240,107,107,.12);
  color:#ff9b9b; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.li-del:hover{ background:rgba(240,107,107,.22); }
@media (max-width:560px){ .li-row{ grid-template-columns:1fr 56px 72px 80px 32px; gap:5px; } }
/* صفّ بند بعمودَي ضريبة: النوع ومبلغها.
   عمودان إضافيان يدفعان الصف فوق عرض الحاوية (بلاغ 14.8) — لذلك يُطويان
   بعتبتين: مبلغ الضريبة أولاً (fold-lg) ثم النوع (fold-sm)، والنوع يبقى
   متاحاً في النافذة عبر القائمة نفسها بعد الطيّ لأنه يُحفظ مع البند. */
.li-row-tax{ grid-template-columns:1fr 70px 90px 150px 90px 100px 38px; }
@media (max-width:1180px){ .li-row-tax{ grid-template-columns:1fr 70px 90px 150px 100px 38px; }
  .li-row-tax > .fold-lg{ display:none; } }
@media (max-width:820px){ .li-row-tax{ grid-template-columns:1fr 60px 80px 90px 32px; }
  .li-row-tax > .fold-sm{ display:none; } }
@media (max-width:560px){ .li-row-tax{ grid-template-columns:1fr 52px 68px 76px 30px; gap:5px; } }
/* الأبناء لا يتجاوزون أعمدتهم: .li-del عرضه الثابت 34px كان يفيض عمود 30px */
.li-row-tax > *{ min-width:0; }
.li-row-tax > .li-del{ width:100%; min-width:0; }
/* المطبوعة: لا طيّ — كل الأعمدة تعود، **ومعها قالب الشبكة السباعي**.
   إعادة إظهار العنصرين بلا إعادة القالب تُنسِل سبعة أبناء في ستة أعمدة
   فيلتفّ الصف سطرين (قِيس: 43px → 85px على عرض A4 الفعلي 703px). */
@media print{
  /* أعمدة كسرية لا ثابتة: الورق قد يكون A4 أو أضيق، والقيم الثابتة تفيض.
     الكسور تتكيّف مع أي عرض فيبقى الفيض صفراً في كل المقاسات. */
  .li-row-tax{ grid-template-columns:2.2fr .7fr 1fr 1.6fr 1fr 1.1fr 26px !important; gap:4px !important; }
  .li-row-tax > *{ min-width:0 !important; }
  .li-row-tax > .fold-lg, .li-row-tax > .fold-sm{ display:block !important; }
  .li-row-tax .input{ font-size:11px; padding:4px 6px; }
}

/* small card metric (3-up totals) */
.mini-metric{ padding:16px; text-align:center; border-top:3px solid var(--ka,var(--mint)); }
.mini-metric .mm-label{ font-size:12.5px; color:var(--ink-2); }
.mini-metric .mm-val{ font-size:22px; font-weight:800; margin-top:6px; }

/* responsive grids */
.cards-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cards-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:880px){ .cards-4{ grid-template-columns:repeat(2,1fr); } .cards-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .mod-grid{ grid-template-columns:1fr; } .cards-2{ grid-template-columns:1fr; } .cards-3,.cards-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .cards-3,.cards-4{ grid-template-columns:1fr; } }

/* responsive nav visibility */
.dock{ display:none; }
@media (max-width:880px){
  .rail{ display:none; }
  .dock{ display:flex; }
  .main-col{ max-height:none; overflow:visible; }
  .app-shell{ display:block; }
  .main-col{ padding-bottom:96px; }
}

/* ---- Home hero ---- */
/* ⛔ B-173 (الجذر الحقيقي) — صفّ `.between` بـ`nowrap` يجمع عنواناً وأزراراً.
   مقيس على شاشة التدقيق عند 360px: العنوان 51px + الأزرار 335px = 386px داخل
   حاوية 294px ⇒ **فيض 107px** يدفع الصفحة ويُزيح `body` 74px.
   ⚠️ **ولم تكن الزينة السبب** — `.orb` كان ضحيةً لا بذرة (مقيس: إخفاؤه لا
      يُنقص `scrollWidth`، وإخفاء `#app` يُعيده إلى 360).
   ⚠️ والالتفاف مقصور على المقاسات الضيّقة كي لا يُغيَّر تخطيط سطح المكتب. */
@media (max-width:560px){
  .between{ flex-wrap:wrap; }
  /* ومجموعة الإجراءات نفسها تلتفّ: ثلاثة أزرار = 335px داخل 294px.
     `min-width:0` لأن عنصر flex افتراضه `auto` فيوسّعه محتواه (§2.37).
     ⚠️ **ابن مباشر لا سليل** (§14.8) — `.flex` مساعد عام يُستعمل في كل مكان. */
  .between > .flex{ flex-wrap:wrap; min-width:0; }
}

.home-hero{ padding:26px clamp(20px,4vw,30px); margin-top:8px; overflow:hidden; position:relative; }
.home-hero-glow{ position:absolute; width:340px; height:340px; border-radius:50%; filter:blur(60px);
  top:-160px; inset-inline-start:-60px; opacity:.55;
  background:radial-gradient(circle, rgba(25,198,160,.6), transparent 70%); }

/* ---- Form grid (2-up, collapses) ---- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }

/* ---- Printable invoice document ---- */
.invoice-doc{ background:#fbfdfc; color:#0b2a30; border-radius:var(--r-card); padding:clamp(20px,4vw,34px);
  box-shadow:0 24px 60px rgba(0,0,0,.4); border:1px solid rgba(0,0,0,.06); }
.invoice-doc .num{ color:#0b2a30; }
.invd-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding-bottom:18px; border-bottom:2px solid #0E8A6E; }
.invoice-doc .logo-lockup span{ color:#0b3a33 !important; }
.invd-qr{ width:96px; height:96px; border-radius:14px; border:1.5px solid #cfe6df; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; color:#0E8A6E; background:#f0f8f5; }
.invd-qr svg{ width:48px; height:48px; }
.invd-qr span{ font-size:8.5px; font-weight:700; color:#5a857c; }
.invd-meta{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:20px 0; }
.invd-meta > div{ display:flex; flex-direction:column; gap:3px; }
.invd-meta span{ font-size:11px; color:#6f9089; font-weight:600; }
.invd-meta b{ font-size:13.5px; color:#0b2a30; }
.invd-party{ background:#eef7f4; border-radius:12px; padding:12px 16px; display:flex; flex-direction:column; gap:3px; }
.invd-party span{ font-size:11px; color:#6f9089; font-weight:700; }
.invd-party b{ font-size:14px; }
.invd-table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:13px; }
.invd-table th{ background:#0E8A6E; color:#fff; padding:11px 12px; text-align:center; font-weight:700; }
.invd-table th:first-child{ text-align:right; border-start-start-radius:10px; } .invd-table th:last-child{ border-start-end-radius:10px; }
.invd-table td{ padding:11px 12px; border-bottom:1px solid #e4efeb; }
.invd-tot{ margin-inline-start:auto; max-width:320px; display:flex; flex-direction:column; gap:9px; padding-top:4px; }
.invd-tot > div{ display:flex; justify-content:space-between; font-size:13.5px; color:#33564f; }
.invd-tot .grand{ border-top:2px solid #0E8A6E; padding-top:11px; margin-top:4px; font-size:16px; font-weight:800; color:#0b2a30; }
.invd-foot{ margin-top:22px; padding-top:16px; border-top:1px dashed #cfe6df; font-size:11.5px; color:#6f9089; text-align:center; line-height:1.7; }
@media (max-width:560px){ .invd-meta{ grid-template-columns:repeat(2,1fr); } }

/* chart placeholder */
.chart-empty{ height:160px; display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:13.5px;
  border:1px dashed rgba(255,255,255,.10); border-radius:var(--r-card-sm); background:rgba(255,255,255,.02); }

/* ---- Tweaks panel ---- */
.tweaks-panel{ position:fixed; left:18px; bottom:18px; z-index:300; width:260px; border-radius:18px;
  overflow:hidden; transform:translateY(12px) scale(.98); opacity:0; transition:.25s var(--ease); }
.tweaks-panel.open{ transform:none; opacity:1; }
.tw-head{ display:flex; align-items:center; justify-content:space-between; padding:13px 15px;
  border-bottom:1px solid var(--glass-border); font-size:14px; }
.tw-x{ width:30px; height:30px; border-radius:9px; border:1px solid var(--glass-border); background:transparent;
  color:var(--ink-2); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.tw-x:hover{ color:#fff; background:rgba(255,255,255,.08); }
.tw-body{ padding:15px; }
.tw-sec{ font-size:12px; font-weight:700; color:var(--ink-2); margin:14px 0 8px; display:flex; justify-content:space-between; }
.tw-sec:first-child{ margin-top:0; }
.tw-val{ color:var(--mint); }
.tw-seg{ display:flex; gap:5px; padding:5px; border-radius:11px; background:rgba(4,22,28,.45); border:1px solid var(--glass-border); }
.tw-seg button{ flex:1; padding:8px 4px; border:none; border-radius:8px; cursor:pointer; font-family:var(--font);
  font-weight:600; font-size:12.5px; color:var(--ink-2); background:transparent; transition:.2s var(--ease); }
.tw-seg button.on{ color:#04221c; background:linear-gradient(135deg,var(--mint),var(--primary-bright)); }
.tw-range{ width:100%; -webkit-appearance:none; height:6px; border-radius:99px; outline:none;
  background:linear-gradient(90deg,var(--mint),var(--primary-bright)); }
.tw-range::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; cursor:pointer;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.4); border:3px solid var(--primary-bright); }
.tw-swatches{ display:flex; gap:9px; }
.tw-sw{ width:34px; height:34px; border-radius:10px; cursor:pointer; border:2px solid transparent; transition:.2s var(--ease); }
.tw-sw.on{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.2); transform:scale(1.05); }
@media (max-width:880px){ .tweaks-panel{ bottom:90px; } }

/* ===== الوصولية (WCAG AA) ===== */
:focus-visible{ outline:2px solid var(--mint,#7CF0C8); outline-offset:2px; }
.btn:focus-visible,.tab:focus-visible,.hdr-act:focus-visible,.li-del:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
/* أحجام لمس مريحة للأزرار الصغيرة */
.btn-sm{ min-height:34px; } .li-del{ min-width:34px; min-height:34px; }
/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ===== غطاء التحميل (Day-4 UX) ===== */
.hisn-busy{ position:fixed; inset:0; z-index:600; display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(6,20,28,.55); backdrop-filter:blur(4px); color:#fff; font-weight:600; font-size:14px; }
.hisn-spin{ width:44px; height:44px; border-radius:50%; border:3px solid rgba(124,240,200,.25); border-top-color:var(--mint,#7CF0C8); animation:hisn-rot .8s linear infinite; }
@keyframes hisn-rot{ to{ transform:rotate(360deg); } }

/* ===== وضع كثافة الجداول (مضغوط) ===== */
body.dense table.tbl td, body.dense table.tbl th{ padding:5px 8px !important; font-size:12px; }
body.dense .kpi-val{ font-size:17px !important; }
body.dense .glass{ padding-top:14px; padding-bottom:14px; }


/* ── شريط الوضع التجريبي — دائم وغير قابل للإخفاء ─────────────────────── */
.demo-bar{ position:sticky; top:0; z-index:900; display:flex; align-items:center; gap:10px;
  padding:9px clamp(14px,3vw,26px); font-size:13px; font-weight:600; line-height:1.6;
  color:#1b1200; background:linear-gradient(90deg,#F5B14C,#F2C572);
  border-bottom:2px solid rgba(0,0,0,.22); box-shadow:0 2px 12px rgba(0,0,0,.28); }
.demo-bar svg{ flex:none; }
.demo-bar b{ font-weight:800; }
/* شارة السجل التجريبي في القوائم */
.badge.demo{ background:rgba(245,177,76,.18); color:#F5B14C; border:1px solid rgba(245,177,76,.42); }
@media print{ .demo-bar{ position:static; } }

/* ---- شريط سلامة البيانات (التكامل المرجعي) ----
   لونه أحمر تحذيري لا كهرماني: الوضع التجريبي حالة اختيارية،
   أما الرابط المفقود فخلل يستوجب فعلاً. */
.integrity-bar{ position:sticky; top:0; z-index:901; display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; padding:9px clamp(14px,3vw,26px); font-size:13px; font-weight:600; line-height:1.6;
  color:#2a0d0d; background:linear-gradient(90deg,#F08D8D,#F3AFAF);
  border-bottom:2px solid rgba(0,0,0,.22); box-shadow:0 2px 12px rgba(0,0,0,.28); }
.integrity-bar svg{ flex:none; }
.integrity-bar b{ font-weight:800; }
.integrity-bar .btn{ margin-inline-start:auto; background:rgba(0,0,0,.72); color:#fff;
  border:1px solid rgba(0,0,0,.5); font-weight:700; }
.integrity-bar .btn:hover{ background:#000; }
@media print{ .integrity-bar{ display:none; } }

/* ---- شريط النسخة الاحتياطية الخارجية (أحمر · غير قابل للإخفاء) ---- */
.backup-bar{ position:sticky; top:0; z-index:902; display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; padding:9px clamp(14px,3vw,26px); font-size:13px; font-weight:600; line-height:1.6;
  color:#2a0d0d; background:linear-gradient(90deg,#E86A6A,#F09B9B);
  border-bottom:2px solid rgba(0,0,0,.24); box-shadow:0 2px 12px rgba(0,0,0,.28); }
.backup-bar svg{ flex:none; }
.backup-bar .btn{ margin-inline-start:auto; background:rgba(0,0,0,.75); color:#fff;
  border:1px solid rgba(0,0,0,.5); font-weight:700; }
.backup-bar .btn:hover{ background:#000; }
@media print{ .backup-bar{ display:none; } }

/* ---- مؤشر حالة المزامنة — دائم في كل شاشة ----
   ثابت أسفل يسار، فوق الدوك على الجوال. قابل للنقر ويقود لشاشة السحابة.
   يُبنى مرة واحدة في <body> فلا يُفقد مع إعادة رسم الشاشة. */
.sync-pill{ position:fixed; inset-inline-start:14px; bottom:14px; z-index:480;
  display:inline-flex; align-items:center; gap:7px; max-width:min(70vw,320px);
  padding:7px 14px; border-radius:999px; cursor:pointer;
  font:600 12.5px/1.4 inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:#eafff7; background:rgba(8,42,56,.82); border:1px solid rgba(124,240,200,.28);
  backdrop-filter:blur(14px); box-shadow:0 8px 22px rgba(0,0,0,.34);
  transition:.25s var(--ease); }
.sync-pill:hover{ transform:translateY(-2px); border-color:rgba(124,240,200,.55); }
.sync-pill:focus-visible{ outline:2px solid var(--mint,#7CF0C8); outline-offset:2px; }
.sync-pill.s-online{ border-color:rgba(25,198,160,.45); color:#bdf6e4; }
.sync-pill.s-syncing,.sync-pill.s-connecting{ border-color:rgba(21,184,194,.5); color:#c4f0f4; }
.sync-pill.s-offline{ border-color:rgba(245,177,76,.55); color:#ffe2b4; }
.sync-pill.s-error{ border-color:rgba(240,141,141,.6); color:#ffd2d2; }
.sync-pill.s-off,.sync-pill.s-signedout{ opacity:.72; }
@media (max-width:900px){ .sync-pill{ bottom:88px; font-size:12px; padding:6px 12px; } }
@media print{ .sync-pill{ display:none; } }

/* ---- تلميح الأزرار الأيقونية ----
   يعمل بالمرور وبالتركيز وبالضغطة المطوّلة على اللمس (الجوال لا hover فيه). */
#hisn-tip{ position:fixed; z-index:1200; pointer-events:none;
  padding:6px 11px; border-radius:8px; font:600 12px/1.5 inherit; white-space:nowrap;
  color:#eafff7; background:rgba(6,32,42,.96); border:1px solid rgba(124,240,200,.28);
  box-shadow:0 8px 22px rgba(0,0,0,.42); max-width:min(70vw,260px);
  overflow:hidden; text-overflow:ellipsis; }
#hisn-tip[hidden]{ display:none; }
@media print{ #hisn-tip{ display:none !important; } }

/* ============ دليل الاستخدام (3.32) ============ */
.help-me{background:var(--glass-fill,rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.1);
  border-radius:10px;padding:9px 13px;font-size:12.5px;margin-bottom:12px;color:var(--ink-2)}
.help-mod{padding:16px;margin-bottom:12px;border-radius:14px}
.help-mod.dim{opacity:.62}
.help-mod-h{cursor:pointer;align-items:flex-start;gap:10px}
.help-mod-h:focus-visible{outline:3px solid var(--ht-accent,#15B8C2);outline-offset:3px;border-radius:8px}
.help-mod-b{margin-top:12px;border-top:1px solid rgba(255,255,255,.09);padding-top:12px}
.help-when{font-size:12.5px;line-height:1.9;color:var(--ink-2);margin-bottom:8px}
.help-h4{font-size:14px;font-weight:700;margin:20px 0 10px;color:var(--ink)}
.help-line{font-size:12px;line-height:1.9;color:var(--ink-2);margin-top:6px;
  display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.help-line.approval{color:#7CF0C8}
.help-line.warnline{color:#F5B14C}
.help-line.limit{display:block;padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.help-line.limit:last-child{border-bottom:0}
.help-acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-top:10px}
.help-act{border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:11px 13px;
  background:rgba(255,255,255,.03)}
.help-act.mine{border-color:rgba(124,240,200,.34);background:rgba(124,240,200,.06)}
.help-act.notmine{opacity:.72}
.help-perm{font-size:10.5px;color:var(--ink-3,#8896A0);margin-top:3px;direction:ltr}
.help-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:2px 8px;
  border-radius:999px;background:color-mix(in srgb,var(--rc) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--rc) 45%,transparent);white-space:nowrap}
.help-chip.me{outline:2px solid var(--rc);outline-offset:1px;font-weight:700}
.help-badge{font-size:10.5px;padding:2px 8px;border-radius:6px;white-space:nowrap}
.help-badge.ok{background:rgba(124,240,200,.16);color:#7CF0C8}
.help-badge.no{background:rgba(255,255,255,.07);color:var(--ink-3,#8896A0)}
.help-tag{font-size:10px;padding:1px 7px;border-radius:5px;margin-inline-start:6px;white-space:nowrap}
.help-tag.ok{background:rgba(124,240,200,.14);color:#7CF0C8}
.help-tag.danger{background:rgba(240,141,141,.16);color:#F08D8D}
.help-tag.info{background:rgba(91,200,232,.14);color:#5BC8E8}
.help-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.help-res{padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.help-res:last-child{border-bottom:0}
.help-rolebar{display:flex;flex-wrap:wrap;gap:7px}
.help-flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin-top:8px}
.help-step{flex:1 1 150px;min-width:0;border:1px solid rgba(255,255,255,.1);border-radius:10px;
  padding:9px 11px;font-size:11.5px;line-height:1.8;background:rgba(255,255,255,.03)}
.help-step-t{display:block;font-weight:700;font-size:10.5px;color:var(--ht-accent,#15B8C2);margin-bottom:2px}
.help-arrow{align-self:center;color:var(--ink-3,#8896A0);font-size:15px}
.hdr-help{margin-inline-end:6px}
@media (max-width:560px){
  .help-acts{grid-template-columns:1fr}
  .help-flow{flex-direction:column}
  .help-arrow{transform:rotate(-90deg)}
}
@media print{
  .help-mod-b{display:block !important}
  .help-acts{grid-template-columns:1fr 1fr}
  .help-mod{break-inside:avoid}
}

/* ── الشريط التوضيحي للأهلية الضريبية (3.33) ── */
.tax-banner{display:flex;gap:10px;align-items:flex-start;padding:11px 16px;
  background:rgba(245,177,76,.13);border-bottom:1px solid rgba(245,177,76,.3);
  color:var(--ink);font-size:12.5px;line-height:1.9}
.tax-banner svg{flex:none;color:#F5B14C;margin-top:2px}
.tax-banner b{color:#F5B14C}
@media (max-width:560px){.tax-banner{font-size:12px;padding:10px 12px}}

/* ── سجل الإقرارات (3.35) ── */
.cns-row{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:13px 15px;margin-bottom:10px}
.cns-text{margin-top:8px}
.cns-text summary{cursor:pointer;font-size:12px;color:var(--ink-2)}
.cns-text pre{white-space:pre-wrap;font-size:12px;line-height:1.9;background:rgba(0,0,0,.22);
  padding:10px 12px;border-radius:8px;margin:8px 0 4px;direction:rtl;text-align:start}
.cns-verdict{margin-top:6px;min-height:16px}

/* ── إقرار الشكل النظامي (قرار ٢-أ-٢) ─────────────────────────────── */
.lf-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.lf-opt{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
  border:1px solid var(--glass-brd);border-radius:12px;cursor:pointer;
  background:var(--glass-fill);transition:border-color .15s,background .15s}
.lf-opt:hover{border-color:var(--mint)}
.lf-opt input{margin-top:3px;flex:0 0 auto}
.lf-opt > span{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.lf-opt b{font-size:14px;line-height:1.6}
.lf-note{font-size:12px;opacity:.72;font-style:normal}
.lf-tag{font-size:11px;font-style:normal;align-self:flex-start;
  padding:2px 8px;border-radius:999px;white-space:nowrap}
.lf-tag.ok{background:#0E8A6E22;color:var(--ht-success-text,#0E8A6E);border:1px solid #0E8A6E44}
.lf-tag.no{background:#B4530922;color:var(--ht-warning-text,#B45309);border:1px solid #B4530944}
@media (max-width:420px){.lf-opt{padding:10px 11px}.lf-opt b{font-size:13px}}