/* ————————————————————— لوحة منصة WRD Payroll —————————————————————

   عربية من اليمين إلى اليسار، ومقاسها يتبع الشاشة لا العكس. الأرقام
   والمعرّفات بخط لاتيني واتجاه `ltr` داخل نصٍّ عربي، وإلا انقلب ترتيب
   خاناتها على القارئ.

   أهداف اللمس 44 بكسلًا في كل مكان: هذه لوحةٌ تُفتح من الهاتف كثيرًا،
   ونقرةٌ خاطئة هنا تعلّق عميلًا أو تلغي اشتراكًا. */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #1f2937;
  --text-muted: #4b5563;
  --primary: #1d4ed8;
  --primary-dark: #1e3a8a;
  --success: #166534;
  --success-bg: #ecfdf3;
  --warning: #92400e;
  --warning-bg: #fef7ec;
  --danger: #b4232c;
  --danger-bg: #fef2f2;
  --border: #d1d5db;
  --border-soft: #e5e7eb;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  --radius: 12px;
  --radius-sm: 8px;
  --control-h: 44px;
  --sidebar-w: 230px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* الخطوط المحلية أولًا: لا يُحمَّل خطٌّ من شبكة خارجية في لوحة تحوي
     أسماء عملاء — الطلب نفسه يسرّب أن اللوحة تُستعمل. */
  font-family: "Segoe UI", "Noto Naskh Arabic", "Tahoma", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

h1, h2, h3 { margin: 0 0 var(--sp-3); line-height: 1.35; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
p { margin: 0 0 var(--sp-3); }
a { color: var(--primary); }

/* الأرقام والمعرّفات: لاتينية واتجاهها من اليسار مهما كان محيطها. */
.num, code, .mono {
  font-family: "Consolas", "SF Mono", "Menlo", monospace;
  direction: ltr;
  unicode-bidi: isolate;
}
.muted { color: var(--text-muted); }
.smaller { font-size: 13px; }
.strong { font-weight: 600; }
.inline { display: inline; }
.mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: var(--sp-3); }
.nowrap { white-space: nowrap; }

/* ————————————————————— الهيكل ————————————————————— */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: 0 var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar__brand { font-weight: 700; }
.topbar__spacer { flex: 1; }
.topbar__user { color: var(--text-muted); font-size: 13px; }

.shell { display: flex; align-items: flex-start; min-height: calc(100vh - 56px); }
.shell--bare { justify-content: center; align-items: center; min-height: 100vh; }

.sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  padding: var(--sp-4) var(--sp-2);
  background: var(--surface);
  border-inline-start: 1px solid var(--border-soft);
  min-height: calc(100vh - 56px);
  position: sticky;
  top: 56px;
}
.nav-link {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 0 var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}
.nav-link:hover { background: var(--bg); }
.nav-link--active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.content { flex: 1 1 auto; min-width: 0; padding: var(--sp-6) var(--sp-4); }
.content--bare { max-width: 420px; width: 100%; padding: var(--sp-6) var(--sp-4); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding: 0 var(--sp-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font: inherit;
}
.nav-toggle__bars {
  width: 18px; height: 2px; background: var(--text);
  box-shadow: 0 6px 0 var(--text), 0 -6px 0 var(--text);
}
.nav-scrim {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 20;
}

/* ————————————————————— البطاقات والجداول ————————————————————— */

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.card__title { margin-bottom: var(--sp-3); font-size: 16px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}
.stat__label { color: var(--text-muted); font-size: 13px; margin: 0; }
.stat__value { font-size: 26px; font-weight: 700; margin: var(--sp-1) 0 0;
               font-family: "Consolas", monospace; direction: ltr;
               unicode-bidi: isolate; }

/* الجدول العريض يتمرر **داخل غلافه** لا بتمديد الصفحة كلها. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; background: var(--surface); }
table.data th, table.data td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
  text-align: start;
  vertical-align: middle;
}
table.data th { background: var(--bg); font-weight: 600; font-size: 13px;
                white-space: nowrap; }
table.data tbody tr:hover { background: #fafafa; }

.definition {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.definition__label { color: var(--text-muted); font-size: 13px; margin: 0; }
.definition__value { margin: 2px 0 0; font-weight: 600; }

/* ————————————————————— الشارات والتنبيهات ————————————————————— */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--sp-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--border);
}
/* اللون وحده لا يكفي لمن لا يفرّق بين الأخضر والأحمر: لكل شارة نصُّها. */
.badge--ok { background: var(--success-bg); color: var(--success);
             border-color: #bbf7d0; }
.badge--warn { background: var(--warning-bg); color: var(--warning);
               border-color: #fde68a; }
.badge--danger { background: var(--danger-bg); color: var(--danger);
                 border-color: #fecaca; }
.badge--muted { color: var(--text-muted); }

.alert {
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
}
.alert--success { background: var(--success-bg); border-color: #bbf7d0;
                  color: var(--success); }
.alert--error { background: var(--danger-bg); border-color: #fecaca;
                color: var(--danger); }
.alert--warning { background: var(--warning-bg); border-color: #fde68a;
                  color: var(--warning); }
.messages { margin-bottom: var(--sp-4); display: grid; gap: var(--sp-2); }

/* السرّ يُعرض مرة واحدة: يُميَّز بصريًا كي يُنسخ فورًا ولا يُنتظر. */
.secret-once {
  background: var(--warning-bg);
  border: 2px dashed var(--warning);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.secret-once code {
  display: block;
  padding: var(--sp-3);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  word-break: break-all;
  font-size: 13px;
  margin-top: var(--sp-2);
}

/* ————————————————————— النماذج ————————————————————— */

.field { margin-bottom: var(--sp-3); }
.field__label { display: block; font-size: 13px; font-weight: 600;
                margin-bottom: var(--sp-1); }
.field input, .field select, .field textarea,
input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="email"], input[type="search"], select, textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  color: inherit;
}
textarea { padding: var(--sp-2) var(--sp-3); min-height: 84px; line-height: 1.6; }
.field__help { color: var(--text-muted); font-size: 12px; margin: var(--sp-1) 0 0; }

.grid--form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.filter-row > .field { flex: 1 1 180px; min-width: 0; margin-bottom: 0; }
.filter-row__action { display: flex; align-items: flex-end; gap: var(--sp-2);
                      min-height: var(--control-h); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding: 0 var(--sp-4);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn--secondary { background: var(--surface); color: var(--text);
                  border-color: var(--border); }
.btn--secondary:hover { background: var(--bg); }
.btn--danger { background: var(--danger); border-color: var(--danger); }
.btn--small { min-height: 36px; padding: 0 var(--sp-3); font-size: 13px; }
.btn--block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--sp-6);
  width: 100%;
}

.page-head { display: flex; flex-wrap: wrap; align-items: flex-start;
             gap: var(--sp-3); margin-bottom: var(--sp-4); }
.page-head__sub { color: var(--text-muted); font-size: 13px; margin: 0; }
.page-head__actions { margin-inline-start: auto; display: flex; gap: var(--sp-2);
                      flex-wrap: wrap; }

.empty {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  text-align: center;
}
.empty__title { font-weight: 600; margin-bottom: var(--sp-1); }
.empty__text { color: var(--text-muted); font-size: 13px; margin: 0; }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
         margin-top: var(--sp-3); }
.pager__state { font-size: 13px; color: var(--text-muted); }
.pager [aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* خطوات التجهيز: حالة كل خطوة تُقرأ نصًّا لا لونًا وحده. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.step { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2);
        border-radius: var(--radius-sm); background: var(--bg); font-size: 13px; }
.step__mark { width: 22px; text-align: center; }
.step--succeeded { background: var(--success-bg); }
.step--failed { background: var(--danger-bg); }

/* ————————————————————— الشاشات الضيقة ————————————————————— */

@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
  .sidebar {
    position: fixed;
    inset-block: 56px 0;
    inset-inline-end: 0;
    width: min(280px, 82vw);
    transform: translateX(100%);
    transition: transform 0.18s ease;
    z-index: 25;
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.12);
  }
  /* من اليمين إلى اليسار: القائمة تنزلق من اليمين، فالإزاحة موجبة. */
  .sidebar--open { transform: translateX(0); }
  .content { padding: var(--sp-4) var(--sp-3); }
}

@media (max-width: 767px) {
  .page-head__actions { margin-inline-start: 0; width: 100%; }
  .page-head__actions .btn { flex: 1 1 auto; }
  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-row > .field { width: 100%; flex: 1 1 auto; }
  .filter-row__action { width: 100%; }
  .filter-row__action .btn { flex: 1 1 auto; }
  .actions .btn { flex: 1 1 auto; }
}

@media (max-width: 479px) {
  body { font-size: 14px; }
  .stat__value { font-size: 22px; }
  .pager__state { order: 3; width: 100%; text-align: center; }
  .pager > .btn, .pager > span.btn { flex: 1 1 40%; }
}

/* بلا JavaScript تبقى القائمة ظاهرة: الصفحة تعمل كاملة. */
@media (max-width: 1023px) {
  .no-js .sidebar { position: static; transform: none; width: auto;
                    box-shadow: none; }
}

/* ————————————————————— إصلاحات قياس الشاشات الضيقة —————————————————————

   ثلاثة عيوب كشفها الفحص الهندسي عند 320–768، وكلها حقيقية:

   ١) صفُّ خطوة التجهيز كان `flex` بلا التفاف، ونصُّ التفصيل فيه طويل
      (اسم قاعدة ودور وإصدار)، فيمدّ الصفحة مئة بكسل عند 320 — والصفحة
      كلها تُمرَّر يمينًا ويسارًا لأجل سطرٍ واحد.

   ٢) `.btn--small` بارتفاع 36: مقبولٌ بالفأرة، وأصغر من الإصبع. وهذه
      لوحةٌ تُفتح من الهاتف، ونقرةٌ خاطئة فيها تعلّق عميلًا.

   ٣) روابط أسماء العملاء في الجدول نصٌّ بارتفاع 19 بكسلًا، وهي المدخل
      الوحيد إلى صفحة العميل على الهاتف. */

.step {
  flex-wrap: wrap;
  /* `min-width: 0` شرطٌ لعمل `overflow-wrap` داخل flex: بدونه يرفض
     العنصر أن يضيق عن محتواه مهما ضاقت الشاشة. */
  min-width: 0;
}
.step > * { min-width: 0; overflow-wrap: anywhere; }

@media (pointer: coarse) {
  /* الهدف يكبر، والشكل لا يتغيّر: الحشو الأفقي كما هو. */
  .btn--small { min-height: var(--control-h); }

  /* رابطُ الخلية هدفُ لمسٍ كامل بارتفاع الصف، لا سطرُ نصٍّ رفيع. */
  table.data td a {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-h);
  }

  /* مربعات الاختيار: المربع نفسه 13 بكسلًا مهما كبر ما يفعله. */
  input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-height: 22px;
  }
  label.field__label:has(input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--control-h);
  }
}

/* مربع اختيار داخل عنوانه: العنوان كله هدفُ اللمس، والمربع يُقاس بحجمه
   لا بعرض الحقل. كان في القالب `style="width:auto"` سطريًا يتجاوز كل
   قاعدة — والنمط السطري أقوى من أي محدِّد، فلا يُصلَح إلا بإزالته. */
.field__check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.field__check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  flex: 0 0 auto;
  margin: 0;
}

@media (pointer: coarse) {
  .field__check input[type="checkbox"] { width: 24px; height: 24px; }
  /* زرٌّ نصُّه كلمة واحدة («فتح») يبقى أضيق من الإصبع بلا حدٍّ أدنى. */
  .btn--small { min-width: var(--control-h); }
}