جدول موظفين

<span class="rtlok employee-table" data-ar="RTL مُختبَر" data-en="RTL verified">RTL مُختبَر</span>
        <div class="mini tbl" style="align-self:center">
          <div class="hd"><span data-ar="الموظف" data-en="Employee">الموظف</span><span data-ar="القسم" data-en="Dept.">القسم</span><span data-ar="الحالة" data-en="Status">الحالة</span></div>
          <div class="tr"><div class="who"><span class="av">م</span><span data-ar="مها العتيبي" data-en="M. Otaibi">مها العتيبي</span></div><span data-ar="التقنية" data-en="Tech">التقنية</span><span class="st" data-ar="نشط" data-en="Active">نشط</span></div>
          <div class="tr"><div class="who"><span class="av">ي</span><span data-ar="يوسف الحربي" data-en="Y. Harbi">يوسف الحربي</span></div><span data-ar="المالية" data-en="Finance">المالية</span><span class="st" data-ar="نشط" data-en="Active">نشط</span></div>
          <div class="tr"><div class="who"><span class="av">ن</span><span data-ar="نورة القحطاني" data-en="N. Qahtani">نورة القحطاني</span></div><span data-ar="التسويق" data-en="Marketing">التسويق</span><span class="st off" data-ar="إجازة" data-en="Leave">إجازة</span></div>
          <div class="tr"><div class="who"><span class="av">ع</span><span data-ar="عبدالله الشمري" data-en="A. Shammari">عبدالله الشمري</span></div><span data-ar="العمليات" data-en="Ops">العمليات</span><span class="st" data-ar="نشط" data-en="Active">نشط</span></div>
        </div>

/* pt-scoped */
/* جدول */
.employee-table .tbl{width:100%;font-size:9px}
.employee-table .tbl .hd, .employee-table .tbl .tr{display:grid;grid-template-columns:1.6fr 1fr auto;gap:6px;
  padding:6px 8px;align-items:center}
.employee-table .tbl .hd{color:var(--pt-text-muted);border-bottom:1px solid var(--pt-border-default);font-size:8px}
.employee-table .tbl .tr{border-bottom:1px solid var(--pt-border-subtle)}
.employee-table .tbl .tr:last-child{border-bottom:none}
.employee-table .tbl .who{display:flex;align-items:center;gap:6px}
.employee-table .tbl .av{width:18px;height:18px;border-radius:var(--pt-radius-full);flex-shrink:0;
  background:color-mix(in srgb,var(--pt-accent) 22%,var(--pt-surface));
  color:var(--pt-accent);display:grid;place-items:center;font-size:8px;font-weight:700}
.employee-table .tbl .st{padding:2px 6px;border-radius:var(--pt-radius-full);font-size:8px;
  background:color-mix(in srgb,var(--pt-color-success-500) 18%,transparent);color:var(--pt-color-success-300)}
.employee-table .tbl .st.off{background:color-mix(in srgb,var(--pt-color-danger-500) 18%,transparent);color:var(--pt-color-danger-300)}

# Staff Table

**Role:** You are an Arabic-first UI designer and front-end engineer. Read the whole
specification before writing a single line, then follow it literally. If two requirements
conflict, favour usability over visual effect.

**Goal:** Staff Table — Tables

**Direction:** Genuine RTL — not a mirrored Latin layout. Use logical properties
(`margin-inline-start`, `padding-inline`, `inset-inline-start`, `text-align: start`),
never physical ones (`margin-left`, `left`). The layout must flip with `dir` on its own,
with no duplicated rules.

**Typography:** Cairo for Arabic, IBM Plex Sans for Latin. Arabic line-height must be
`0.18` higher than the Latin equivalent — dots, hamzas and maddas need more vertical room.
Arabic font-size runs `1.06×` the Latin size at the same optical weight.

**Numerals:** Western digits in both languages (`1,234.50`). Only the currency changes:
`ر.س` **after** the number in Arabic, `$` **before** it in English. Jordanian dinar
uses **three** decimal places, not two.

**Colors:** Dark mode — background `#0D142B` · surfaces `#211F54` · borders `#545C91` · text `#918FC2`.
Accent `#ADA9E8` must never exceed 8% of the screen area.

**Language:** Bilingual — every string carries both Arabic and English, and the layout
flips with `dir` automatically.

**States:** `default` · `hover` · `focus` · `active` · `disabled` · `loading` · `error`.
Do not design the resting state alone.

**Accessibility:** Contrast ratio at least `4.5:1`, complete keyboard navigation,
visible focus rings, and honour `prefers-reduced-motion`.

**Output:** Clean HTML and CSS in two separate files. No frameworks, no libraries,
no external dependencies.