لوحة الموارد البشرية

<span class="rtlok hr-dashboard" data-ar="RTL مُختبَر" data-en="RTL verified">RTL مُختبَر</span>
        <div class="mini dash">
          <div class="side"><i class="act"></i><i></i><i></i><i></i><i></i></div>
          <div class="body">
            <div class="tiles">
              <div class="tile"><b class="num" data-n="124">124</b><span data-ar="موظف" data-en="Staff">موظف</span></div>
              <div class="tile"><b class="num" data-n="98%">98%</b><span data-ar="حضور" data-en="Present">حضور</span></div>
              <div class="tile"><b class="num" data-n="7">7</b><span data-ar="إجازة" data-en="Leave">إجازة</span></div>
            </div>
            <div class="chart">
              <u style="height:42%"></u><u style="height:66%"></u><u style="height:38%"></u>
              <u style="height:80%"></u><u style="height:55%"></u><u style="height:92%"></u><u style="height:70%"></u>
            </div>
          </div>
        </div>

/* pt-scoped */
/* لوحة تحكم — الشريط الجانبي ينتقل للجهة الصحيحة تلقائيًا */
.hr-dashboard .dash{display:flex;height:100%;gap:8px}
.hr-dashboard .dash .side{width:52px;flex-shrink:0;background:var(--pt-surface);border-radius:var(--pt-radius-sm);
  padding:8px 6px;display:flex;flex-direction:column;gap:6px}
.hr-dashboard .dash .side i{display:block;height:5px;border-radius:2px;background:var(--pt-border-strong)}
.hr-dashboard .dash .side i.act{background:var(--pt-accent);width:70%}
.hr-dashboard .dash .body{flex:1;display:flex;flex-direction:column;gap:7px}
.hr-dashboard .dash .tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.hr-dashboard .dash .tile{background:var(--pt-surface);border-radius:var(--pt-radius-md);padding:7px}
.hr-dashboard .dash .tile b{display:block;font-size:13px;color:var(--pt-accent)}
.hr-dashboard .dash .tile span{font-size:9px;color:var(--pt-text-muted)}
.hr-dashboard .dash .chart{flex:1;background:var(--pt-surface);border-radius:var(--pt-radius-md);padding:8px;
  display:flex;align-items:flex-end;gap:4px}
.hr-dashboard .dash .chart u{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--pt-accent),transparent)}
.hr-dashboard .num{font-variant-numeric:tabular-nums}

# HR Dashboard

**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:** HR Dashboard — Dashboard

**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.