الواجهات الكاملة · مكتب محاسبة
فاتورة قابلة للطباعة
مستند ببنود ومجاميع — التقريب مرّة عند الإجمالي، والأرقام بخطّ جدولي فتنطبق الفواصل
<div class="iface ifv">
<header class="if-top ifv-bar">
<span class="brand" data-ar="دفتر" data-en="Daftar">دفتر</span>
<span class="grow"></span>
<button class="if-btn ghost" data-ar="تنزيل PDF" data-en="Download PDF">تنزيل PDF</button>
<button class="if-btn" data-ar="أرسل للعميل" data-en="Send to client">أرسل للعميل</button>
</header>
<div class="if-body">
<article class="ifv-doc">
<div class="ifv-head">
<div>
<b data-ar="مكتب الأفق للمحاسبة" data-en="Ufuq Accounting">مكتب الأفق للمحاسبة</b>
<span data-ar="المنامة — السيف" data-en="Manama — Seef">المنامة — السيف</span>
<span class="num" dir="ltr">+973 3612 3456</span>
</div>
<div class="ifv-meta">
<h1 data-ar="فاتورة" data-en="Invoice">فاتورة</h1>
<dl>
<div><dt data-ar="الرقم" data-en="No.">الرقم</dt><dd class="num">INV-2026-0184</dd></div>
<div><dt data-ar="التاريخ" data-en="Date">التاريخ</dt><dd class="num">26 / 08 / 2026</dd></div>
<div><dt data-ar="الاستحقاق" data-en="Due">الاستحقاق</dt><dd class="num">09 / 09 / 2026</dd></div>
</dl>
</div>
</div>
<div class="ifv-to">
<span data-ar="إلى" data-en="Billed to">إلى</span>
<b data-ar="شركة النسيم للتجارة" data-en="Naseem Trading">شركة النسيم للتجارة</b>
<span data-ar="الرقم الضريبي 200001234500002" data-en="VAT 200001234500002">الرقم الضريبي 200001234500002</span>
</div>
<table class="ifv-lines">
<thead><tr>
<th data-ar="البند" data-en="Item">البند</th>
<th data-ar="الكمّية" data-en="Qty">الكمّية</th>
<th data-ar="السعر" data-en="Rate">السعر</th>
<th data-ar="المجموع" data-en="Amount">المجموع</th>
</tr></thead>
<tbody>
<tr><td data-ar="مراجعة الحسابات السنوية" data-en="Annual audit">مراجعة الحسابات السنوية</td>
<td class="num">1</td><td class="num">1,850.000</td><td class="num">1,850.000</td></tr>
<tr><td data-ar="إعداد الإقرار الضريبي" data-en="Tax return preparation">إعداد الإقرار الضريبي</td>
<td class="num">1</td><td class="num">420.000</td><td class="num">420.000</td></tr>
<tr><td data-ar="استشارة شهرية" data-en="Monthly advisory">استشارة شهرية</td>
<td class="num">6</td><td class="num">95.000</td><td class="num">570.000</td></tr>
</tbody>
</table>
<div class="ifv-sums">
<dl>
<div><dt data-ar="المجموع قبل الضريبة" data-en="Subtotal">المجموع قبل الضريبة</dt>
<dd class="num">2,840.000 د.ب</dd></div>
<div><dt data-ar="ضريبة القيمة المضافة 10%" data-en="VAT 10%">ضريبة القيمة المضافة 10%</dt>
<dd class="num">284.000 د.ب</dd></div>
<div class="tot"><dt data-ar="الإجمالي المستحقّ" data-en="Total due">الإجمالي المستحقّ</dt>
<dd class="num">3,124.000 د.ب</dd></div>
</dl>
</div>
<p class="ifv-fine" data-ar="الدينار البحريني يُقسَّم إلى ألف فلس — فالخانات العشرية ثلاث، لا اثنتان."
data-en="The Bahraini dinar divides into 1000 fils — three decimal places, not two.">الدينار البحريني يُقسَّم إلى ألف فلس — فالخانات العشرية ثلاث، لا اثنتان.</p>
</article>
</div>
</div>
.iface{min-height:100%;background:var(--pt-bg-base);color:var(--pt-text-primary);
font-family:inherit;display:flex;flex-direction:column}
.iface *,.iface *::before,.iface *::after{box-sizing:border-box}
.iface h1,.iface h2,.iface h3,.iface h4,.iface p,.iface ul,.iface ol{margin:0}
.iface ul{list-style:none;padding:0}
.iface a{color:inherit;text-decoration:none}
.iface button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.iface button:focus-visible,.iface a:focus-visible,.iface input:focus-visible,
.iface select:focus-visible{outline:2px solid var(--pt-focus-ring);outline-offset:2px}
/* الرأس المشترك */
.if-top{display:flex;align-items:center;gap:var(--pt-space-4);
padding:var(--pt-space-3) var(--pt-space-5);
border-block-end:1px solid var(--pt-border-subtle);background:var(--pt-bg-raised)}
.if-top .brand{font-weight:700;font-size:var(--pt-font-size-sm)}
.if-top .grow{flex:1}
.if-top nav{display:flex;gap:var(--pt-space-4);font-size:var(--pt-font-size-xs);
color:var(--pt-text-muted)}
.if-top nav a[aria-current]{color:var(--pt-accent);font-weight:600}
.if-avatar{width:26px;height:26px;border-radius:50%;background:var(--pt-bg-inset);
border:1px solid var(--pt-border-default);display:grid;place-items:center;
font-size:10px;color:var(--pt-text-secondary)}
.if-btn{padding:var(--pt-space-2) var(--pt-space-4);border-radius:var(--pt-radius-md);
background:var(--pt-accent);color:var(--pt-on-accent);font-weight:700;
font-size:var(--pt-font-size-xs)}
.if-btn.ghost{background:transparent;color:var(--pt-text-secondary);
border:1px solid var(--pt-border-default);font-weight:500}
.if-body{flex:1;padding:var(--pt-space-5);display:flex;flex-direction:column;
gap:var(--pt-space-5)}
.if-h{display:flex;align-items:baseline;gap:var(--pt-space-3);flex-wrap:wrap}
.if-h h1{font-size:var(--pt-font-size-xl);font-weight:700}
.if-h p{font-size:var(--pt-font-size-xs);color:var(--pt-text-muted)}
.if-card{border:1px solid var(--pt-border-subtle);border-radius:var(--pt-radius-lg);
background:var(--pt-bg-raised);padding:var(--pt-space-4)}
.num{font-variant-numeric:tabular-nums}
/* الرقم بإشارته: عزلٌ باتّجاه لاتيني.
«−» و«+» محارف محايدة في خوارزمية الاتّجاه. وفي سطر عربي تُقذَف إلى
طرف النصّ، فيقرأ الزائر «0.6-» بدل «-0.6» — وهي قراءة معكوسة للمعنى
لا مجرّد فرق شكل. والعزل يجعل المحتوى يُحلّ اتّجاهه وحده. */
.sig{unicode-bidi:isolate;direction:ltr;font-variant-numeric:tabular-nums;
/* العرض بقدر المحتوى: العنصر داخل عمودٍ مرن يمتدّ افتراضيًّا، وباتّجاه
لاتيني يهاجر نصّه إلى الطرف الآخر — فيبقى مكانه بتقييد عرضه. */
inline-size:fit-content}
.ifv-bar{position:sticky;inset-block-start:0;z-index:2}
.ifv-doc{max-inline-size:820px;margin-inline:auto;inline-size:100%;
padding:var(--pt-space-8);border-radius:var(--pt-radius-lg);
border:1px solid var(--pt-border-subtle);background:var(--pt-bg-raised);
display:flex;flex-direction:column;gap:var(--pt-space-6)}
.ifv-head{display:flex;justify-content:space-between;gap:var(--pt-space-6);flex-wrap:wrap}
.ifv-head b{display:block;font-size:var(--pt-font-size-base);font-weight:700}
.ifv-head span{display:block;font-size:var(--pt-font-size-xs);color:var(--pt-text-muted);
margin-block-start:2px}
.ifv-meta{text-align:end}
.ifv-meta h1{font-size:var(--pt-font-size-2xl);font-weight:700;color:var(--pt-accent);
margin-block-end:var(--pt-space-2)}
.ifv-meta dl{display:flex;flex-direction:column;gap:2px}
.ifv-meta dl div{display:flex;justify-content:flex-end;gap:var(--pt-space-3);
font-size:var(--pt-font-size-xs)}
.ifv-meta dt{color:var(--pt-text-muted)}
.ifv-meta dd{margin:0}
.ifv-to{padding:var(--pt-space-4);border-radius:var(--pt-radius-md);
background:var(--pt-bg-inset)}
.ifv-to span{display:block;font-size:11px;color:var(--pt-text-muted)}
.ifv-to b{display:block;margin-block:2px;font-size:var(--pt-font-size-sm)}
.ifv-lines{inline-size:100%;border-collapse:collapse;font-size:var(--pt-font-size-xs)}
.ifv-lines th{text-align:start;padding:var(--pt-space-3) var(--pt-space-2);
color:var(--pt-text-muted);font-weight:500;
border-block-end:1px solid var(--pt-border-default)}
.ifv-lines th:not(:first-child),.ifv-lines td:not(:first-child){text-align:end}
.ifv-lines td{padding:var(--pt-space-3) var(--pt-space-2);
border-block-end:1px solid var(--pt-border-subtle)}
/* الأرقام بخطّ جدولي: بلا هذا تختلف عروض الخانات فلا تنطبق الفواصل */
.ifv-lines .num,.ifv-sums .num{font-variant-numeric:tabular-nums}
.ifv-sums{display:flex;justify-content:flex-end}
.ifv-sums dl{min-inline-size:280px;display:flex;flex-direction:column;gap:var(--pt-space-2)}
.ifv-sums dl div{display:flex;justify-content:space-between;gap:var(--pt-space-4);
font-size:var(--pt-font-size-xs)}
.ifv-sums dt{color:var(--pt-text-muted)}
.ifv-sums dd{margin:0}
.ifv-sums .tot{padding-block-start:var(--pt-space-3);
border-block-start:1px solid var(--pt-border-default);font-size:var(--pt-font-size-base)}
.ifv-sums .tot dt{color:var(--pt-text-primary);font-weight:600}
.ifv-sums .tot dd{color:var(--pt-accent);font-weight:700}
.ifv-fine{font-size:11px;color:var(--pt-text-muted);
padding-block-start:var(--pt-space-4);
border-block-start:1px dashed var(--pt-border-subtle)}