/* WRD Payroll — نظام الواجهة الموحد (docs/04)
   عربي RTL، ألوان وقياسات المواصفة، ومقاسات مريحة على الهاتف والكمبيوتر. */

/* الخط العربي محلي الاستضافة (ملف متغير الوزن)، مع بديل نظامي دائمًا. */
@font-face {
  font-family: "Cairo";
  src: url("../fonts/Cairo-Variable.4d90a59cb181.woff2") format("woff2-variations"),
       url("../fonts/Cairo-Variable.4d90a59cb181.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #1f2937;
  --text-muted: #4b5563;
  --primary: #b4232c;
  --primary-dark: #8e1a22;
  --success: #166534;
  --success-bg: #ecfdf3;
  --warning: #92400e;
  --warning-bg: #fef7ec;
  --danger: #b4232c;
  --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: 10px;
  --control-h: 44px;
  --sidebar-w: 248px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Cairo", "Segoe UI", "Tahoma", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

h1, h2, h3 { font-weight: 700; line-height: 1.35; margin: 0 0 var(--sp-3); }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; font-weight: 600; }

@media (min-width: 1024px) {
  h1 { font-size: 28px; }
}

a { color: var(--primary); }
p { margin: 0 0 var(--sp-3); }

/* ————————————————————— التخطيط ————————————————————— */

.layout { display: flex; min-height: 100vh; flex-direction: column; }

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar__brand { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: var(--sp-2); }
.topbar__brand img { height: 32px; width: auto; }
.topbar__org { color: var(--text-muted); font-size: 14px; font-weight: 400; }
.topbar__spacer { margin-inline-start: auto; }
.topbar__user { font-size: 14px; color: var(--text-muted); }

.shell { display: flex; flex: 1; align-items: flex-start; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-3);
  min-height: calc(100vh - 61px);
  position: sticky;
  top: 61px;
}

.sidebar__group { margin-bottom: var(--sp-6); }
.sidebar__label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: none; margin: 0 var(--sp-2) var(--sp-2);
}

.nav-link {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  min-height: 40px;
}
.nav-link:hover { background: var(--bg); }
.nav-link--active { background: var(--primary); color: #fff; font-weight: 600; }

.content { flex: 1; padding: var(--sp-6) var(--sp-4); min-width: 0; }
.content__inner { max-width: 1200px; margin: 0 auto; }

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

/* قائمة الهاتف السفلية */
.mobile-nav { display: none; }

@media (max-width: 1023px) {
  .sidebar { display: none; }
  .content { padding: var(--sp-4) var(--sp-3) 88px; }
  .mobile-nav {
    display: flex;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: var(--sp-1) var(--sp-1) calc(var(--sp-1) + env(safe-area-inset-bottom, 0px));
  }
  .mobile-nav a {
    flex: 1; text-align: center; padding: var(--sp-2) var(--sp-1);
    font-size: 12px; color: var(--text-muted); text-decoration: none;
    border-radius: var(--radius-sm); min-height: 44px;
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
  }
  .mobile-nav a.is-active { color: var(--primary); font-weight: 600; background: var(--bg); }
}

/* ————————————————————— البطاقات ————————————————————— */

.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 { font-size: 17px; font-weight: 600; margin: 0 0 var(--sp-3); }
.card__hint { color: var(--text-muted); font-size: 14px; }

.grid { display: grid; gap: var(--sp-4); }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.grid--form { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.stat { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--sp-4); }
.stat__label { color: var(--text-muted); font-size: 14px; margin-bottom: var(--sp-1); }
.stat__value { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat__value--muted { color: var(--text-muted); font-size: 18px; font-weight: 600; }
.stat__note { color: var(--text-muted); font-size: 13px; margin-top: var(--sp-1); }

/* ————————————————————— الحالة الفارغة ————————————————————— */

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

/* ————————————————————— الأزرار ————————————————————— */

.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-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--primary-dark); }
.btn:focus-visible { outline: 3px solid rgba(180, 35, 44, 0.35); outline-offset: 2px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn--secondary:hover { background: var(--bg); }
.btn--ghost { background: transparent; color: var(--primary); border-color: transparent; }
.btn--ghost:hover { background: var(--bg); }
.btn--small { min-height: 36px; padding: 0 var(--sp-3); font-size: 14px; }
.btn--block { width: 100%; }

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

.field { margin-bottom: var(--sp-4); }
.field__label { display: block; font-weight: 600; font-size: 14px; margin-bottom: var(--sp-1); }
.field__help { color: var(--text-muted); font-size: 13px; margin-top: var(--sp-1); }
.field__error { color: var(--primary); font-size: 13px; margin-top: var(--sp-1); font-weight: 600; }
.field__required { color: var(--primary); }

input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="time"], input[type="search"], input[type="tel"], input[type="email"],
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: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}
textarea { padding: var(--sp-2) var(--sp-3); min-height: 88px; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(180, 35, 44, 0.14);
}
input[disabled], select[disabled] { background: var(--bg); color: var(--text-muted); }

/* Django يرسم مجموعات الاختيار كـ <div> غلاف يحوي <div> لكل خيار،
   لذلك تُبنى الشبكة على الغلاف الداخلي لا على قائمة <ul>. */
.checkbox-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-2);
}
.checkbox-grid > div > div { display: flex; }
.checkbox-grid label {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); width: 100%; min-height: 44px; cursor: pointer;
  font-size: 14px;
}
.checkbox-grid input[type="checkbox"], .checkbox-grid input[type="radio"] {
  width: 20px; height: 20px; accent-color: var(--primary); flex: 0 0 auto;
}

.radio-stack > div { display: flex; flex-direction: column; gap: var(--sp-2); }
.radio-stack label {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); min-height: 44px; cursor: pointer;
}
.radio-stack input[type="radio"] {
  width: 20px; height: 20px; accent-color: var(--primary); flex: 0 0 auto;
}

.form-actions {
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--border-soft);
}

/* ————————————————————— الجداول ————————————————————— */

.table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); }

table.data { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
table.data th, table.data td { padding: var(--sp-3); text-align: right; border-bottom: 1px solid var(--border-soft); }
table.data th { background: var(--bg); font-weight: 600; font-size: 14px; white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #fbfbfc; }
.num { font-variant-numeric: tabular-nums; direction: ltr; text-align: right; unicode-bidi: plaintext; }
.col-name {
  position: sticky; inset-inline-start: 0; background: var(--surface); z-index: 1;
  min-width: 200px;
}
@media (min-width: 1024px) {
  .col-name { min-width: 220px; }
}

/* في شبكة اليوميات وحدها يُقصَّر العمودان المثبَّتان عمدًا ليبقيا **أضيق
   من خلية اليوم**. العمود المثبَّت الأعرض من الخلية يبتلعها كاملة عند طرف
   التمرير فيتعذر الوصول إليها؛ وما دام أضيق منها فأسوأ ما يحدث تغطية
   جزئية يكشفها التمرير. الاسم الطويل يلتف سطرين بدل أن يخفي يوم عمل. */
.attendance-grid .col-name { min-width: 136px; max-width: 136px; }
.attendance-grid .col-total { min-width: 74px; }
.attendance-grid--extended .col-name { min-width: 128px; max-width: 128px; }
.attendance-grid--extended .col-total { min-width: 68px; }
.attendance-grid .col-name a { font-size: 13px; line-height: 1.35; }
table.data td.col-name a { font-weight: 600; }

/* إجمالي الأيام رقم قراءة أساسي: يُثبَّت على الحافة المقابلة فيبقى ظاهرًا
   مهما اتسع الجدول بأيام الأسبوع. */
.col-total {
  position: sticky; inset-inline-end: 0; z-index: 1;
  background: var(--surface);
  border-inline-start: 1px solid var(--border-soft);
  min-width: 88px;
}
table.data th.col-total { background: var(--bg); }
table.data th.col-name { background: var(--bg); }

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

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; border: 1px solid transparent;
}
.badge--ok { background: var(--success-bg); color: var(--success); border-color: #bbf7d0; }
.badge--warn { background: var(--warning-bg); color: var(--warning); border-color: #fde3bf; }
.badge--muted { background: var(--bg); color: var(--text-muted); border-color: var(--border); }
.badge--owner { background: #fdeaec; color: var(--primary); border-color: #f7c6ca; }

.alert {
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 15px;
}
.alert--success { background: var(--success-bg); border-color: #bbf7d0; color: var(--success); }
.alert--error { background: #fdeaec; border-color: #f7c6ca; color: var(--primary); }
.alert--warning { background: var(--warning-bg); border-color: #fde3bf; color: var(--warning); }
.alert--info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.alert__title { font-weight: 700; margin-bottom: var(--sp-1); }

.messages { margin-bottom: var(--sp-4); }

/* ————————————————————— بطاقة العامل ————————————————————— */

.worker-head { display: flex; gap: var(--sp-4); align-items: flex-start; flex-wrap: wrap; }
.avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; flex: 0 0 auto; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.worker-head__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); color: var(--text-muted); font-size: 14px; }

.definition { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.definition__item { padding: var(--sp-3); background: var(--bg); border-radius: var(--radius-sm); }
.definition__label { font-size: 13px; color: var(--text-muted); margin-bottom: 2px; }
.definition__value { font-weight: 600; font-variant-numeric: tabular-nums; }

.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4); overflow-x: auto; }
.tabs a {
  padding: var(--sp-2) var(--sp-4); text-decoration: none; color: var(--text-muted);
  border-bottom: 3px solid transparent; font-weight: 600; font-size: 15px; white-space: nowrap;
  min-height: 44px; display: flex; align-items: center;
}
.tabs a.is-active { color: var(--primary); border-bottom-color: var(--primary); }

/* ————————————————————— شاشة اليوميات —————————————————————

   الخلية كتلة ثابتة الارتفاع: قائمة واحدة بعرض وارتفاع موحدين، وأيقونة
   سبب داخل مساحتها. لا حقل سبب تحتها ولا زر حفظ بجوارها، فتبقى قوائم
   الصف كلها على خط أفقي واحد مهما وُجد سبب محفوظ أو طال اسم العامل. */

.attendance-cell { min-width: 164px; vertical-align: top; }

.unit-cell {
  display: flex; flex-direction: column; gap: 4px;
  /* ارتفاع ثابت: القائمة + سطر الحالة. لا يزيد بوجود سبب. */
  min-height: 62px;
}
/* خانة الأيقونة محجوزة دائمًا، ظهرت أم لا: فتتساوى عروض القوائم في كل
   الخلايا، ولا يركب نصُّ الخيار على الأيقونة فيُقتطع. */
.unit-cell__control {
  display: grid; grid-template-columns: 1fr 18px; align-items: center; gap: 4px;
}

.unit-select {
  width: 100%; height: 40px; min-height: 40px;
  font-size: 13px; padding-inline: 6px 22px;
  text-overflow: ellipsis;
  /* سهم واضح موحّد بدل سهم النظام المتفاوت بين المتصفحات. */
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 11px 8px;
  background-position: left 8px center;
}
.unit-select:disabled { background-color: var(--bg); color: var(--text-muted); }

/* أيقونة السبب داخل الخلية: لا ترفع ارتفاعها ولا تزيح القائمة. */
.unit-note {
  width: 18px; height: 18px; padding: 0; line-height: 1;
  border: 1px solid var(--warning); border-radius: 50%;
  background: var(--warning-bg); color: var(--warning);
  font-size: 11px; font-weight: 700; cursor: pointer;
}
.unit-note:hover { background: var(--warning); color: #fff; }
/* الإخفاء يبقي الخانة محجوزة: `visibility` لا `display`، فلا تتغير الأبعاد. */
.unit-note[hidden] { display: block; visibility: hidden; }

.attendance-cell--holiday { background: var(--warning-bg); }
.attendance-cell__state { font-size: 12px; color: var(--text-muted); display: block; }
.attendance-cell__reason { font-size: 12px; color: var(--warning); margin-top: 2px; display: block; }

.day-head { font-size: 13px; }
.day-head strong { display: block; font-size: 15px; }
.day-head--today { color: var(--primary); }

.period-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
.period-bar__label { font-weight: 600; }
.period-bar__site { color: var(--primary); font-weight: 600; }

/* بطاقة عامل مدمجة على الهاتف بدل الجدول العريض */
.attendance-mobile { display: none; }
/* الشبكة تحتاج عرضًا حقيقيًا: عمود اسم وعمود إجمالي مثبَّتان وستة أو سبعة
   أعمدة أيام. دونه ينزلق يوم كامل تحت أحد العمودين عند طرف التمرير فيتعذر
   الوصول إليه. لذلك تبدأ الشبكة من 1024px، وما دونه بطاقة لكل عامل: الاسم
   والإجمالي في رأسها، وكل يوم في سطره كاملًا بلا تثبيت ولا حجب. */
@media (max-width: 1023px) {
  .attendance-desktop { display: none; }
  .attendance-mobile { display: block; }
}

.att-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--sp-3); margin-bottom: var(--sp-3); }
.att-card__name { font-weight: 600; margin-bottom: var(--sp-2); display: flex; justify-content: space-between; gap: var(--sp-2); }
.att-card__day { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-top: 1px solid var(--border-soft); }
.att-card__day-label { flex: 0 0 84px; font-size: 14px; color: var(--text-muted); }
/* على الهاتف أيضًا: قائمة واحدة بلا زر حفظ دائم بجوارها. */
.att-card__day .unit-cell { flex: 1; min-width: 0; min-height: 0; }
.att-card__day .unit-select { height: 44px; min-height: 44px; font-size: 14px; }

/* ————————————————————— الإعداد الأول ————————————————————— */

.setup { max-width: 720px; margin: 0 auto; padding: var(--sp-6) var(--sp-4); }
.setup__steps { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.setup__step {
  flex: 1 1 90px; padding: var(--sp-2); border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border-soft);
  font-size: 13px; text-align: center; color: var(--text-muted);
}
.setup__step--done { border-color: #bbf7d0; background: var(--success-bg); color: var(--success); font-weight: 600; }
.setup__step--current { border-color: var(--primary); color: var(--primary); font-weight: 700; }

.code-block {
  background: #1f2937; color: #f9fafb; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm); direction: ltr; text-align: left;
  font-family: "Consolas", "Courier New", monospace; font-size: 14px;
  overflow-x: auto; margin: var(--sp-3) 0;
}

.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.auth-card { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--sp-6); width: 100%; max-width: 420px; }
.auth-card__brand { text-align: center; margin-bottom: var(--sp-6); }
.auth-card__brand strong { font-size: 22px; display: block; }
.auth-card__brand span { color: var(--text-muted); font-size: 14px; }

/* ————————————————————— أدوات ————————————————————— */

.muted { color: var(--text-muted); }
.small { font-size: 14px; }
.smaller { font-size: 13px; }
.strong { font-weight: 600; }
.stack > * + * { margin-top: var(--sp-3); }
.row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.mt-4 { margin-top: var(--sp-4); }
.mb-0 { margin-bottom: 0; }
.text-left { text-align: left; }
.nowrap { white-space: nowrap; }
/* أداة إخفاء بصري تبقى مقروءة لقارئ الشاشة.
   تستخدم !important لأن قواعد الحقول تنص على width:100% بأولوية أعلى
   (محدِّد بالنوع)، وبدونها يتمدد الحقل المخفي ويكسر عرض الصفحة أفقيًا. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0 !important;
}

@media print {
  .topbar, .sidebar, .mobile-nav, .form-actions, .btn { display: none !important; }
  body { background: #fff; }
}

/* خلية يوم يخص موقعًا آخر: تُعرض للسياق ولا تُحرَّر من هذه الشاشة. */
.attendance-cell--other-site {
  background: repeating-linear-gradient(
    45deg, var(--bg), var(--bg) 6px, #eceef1 6px, #eceef1 12px
  );
  color: var(--text-muted);
}

/* ————————————————————— السلف والمعاينة ————————————————————— */

/* الصافي السالب حالة تحتاج معالجة، فيُميَّز بصريًا لا يُخفى. */
td.danger, .danger { color: var(--danger); }
.btn--danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.alert--danger {
  background: #fdf1f1; border-color: var(--danger); color: #7d1a20;
}
.page-head__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* الدورة المُمدَّدة تضيف عمود يوم سابع. بلا تضييق، يتجاوز الجدول إطاره
   عند 1366 فينزلق يوم العطلة تحت عمود الإجمالي المثبَّت. التضييق هنا
   يبقي الأعمدة كلها ظاهرة، والفحص الآلي في scripts/capture_screens.py
   يرفض التصوير إن عاد أي خيار مقتطعًا. */
/* عرض الخلية لا يقل عمّا يسع أطول خيار كاملًا: الرقم والوصف معًا.
   ما يضيق هو الحشو وعمودا الاسم والإجمالي، فيقل التمرير الأفقي دون
   اقتطاع أي قيمة. العمودان مثبَّتان فيبقيان ظاهرين مهما اتسع الجدول. */
.attendance-grid--extended .attendance-cell { min-width: 150px; }
.attendance-grid--extended .attendance-cell select { font-size: 12px; }
.attendance-grid--extended .day-head { font-size: 12px; }
.attendance-grid--extended .day-head strong { font-size: 13px; }
.attendance-grid--extended.data th,
.attendance-grid--extended.data td { padding-inline: 4px; }
.attendance-grid--extended .col-name { min-width: 160px; }
.attendance-grid--extended .col-total { min-width: 72px; }

/* ————————————————————— نافذة السبب والتنبيه ————————————————————— */

.modal { position: fixed; inset: 0; z-index: 60; display: flex;
         align-items: center; justify-content: center; padding: var(--sp-4); }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.45); }
.modal__panel {
  position: relative; background: var(--surface); border-radius: var(--radius);
  /* حشو داخلي مريح: 16px على الهاتف و22px على الكمبيوتر. */
  padding: 16px; width: 100%; max-width: 460px;
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.28);
  max-height: 90vh; overflow-y: auto;
}
@media (min-width: 768px) { .modal__panel { padding: 22px; } }

.modal__title { font-size: 18px; margin: 0 0 16px; }
.modal__facts { display: grid; gap: 10px; margin-bottom: 20px;
                background: var(--bg); border-radius: var(--radius-sm); padding: 14px 16px; }
.modal__panel .field { margin-bottom: 16px; }
.modal__panel .field:last-of-type { margin-bottom: 20px; }
.modal__panel .form-actions { margin-top: 4px; gap: 10px; }
.modal__facts > div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.modal__facts dt { color: var(--text-muted); font-size: 13px; }
.modal__facts dd { font-weight: 600; font-size: 14px; }

/* تأكيد نجاح واضح بدل إعادة تحميل الصفحة. */
.toast {
  position: fixed; inset-block-end: 96px; inset-inline: var(--sp-4);
  margin-inline: auto; max-width: 520px; z-index: 70;
  background: var(--text); color: #fff; border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); font-size: 14px; text-align: center;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.3);
}
.toast[hidden] { display: none; }
.toast--error { background: var(--danger); }
.toast--warn { background: var(--warning); color: #3d2b00; }

@media (min-width: 1024px) { .toast { inset-block-end: var(--sp-4); } }



/* التثبيت داخل جدول: `border-collapse: collapse` يُبطل `position: sticky`
   على خلايا الجسم في Chrome — تُحسب القيمة ولا تُطبَّق. الحل الموثَّق هو
   الفصل، مع رسم الحدود على الخلايا نفسها بدل الاعتماد على الدمج. */
table.attendance-grid { border-collapse: separate; border-spacing: 0; }
table.attendance-grid th, table.attendance-grid td {
  border-bottom: 1px solid var(--border-soft);
}
table.attendance-grid tbody tr:last-child td { border-bottom: none; }

/* خلية الإجمالي تحمل `.num` التي تجعل اتجاهها ltr لعرض الأرقام. الخصائص
   المنطقية تُحسب باتجاه العنصر نفسه، فصار `inset-inline-end` عندها يعني
   «يمين» بينما يعني «يسار» في رأس العمود RTL — فتثبَّت الترويسة ولا تثبت
   الخلية. الاتجاه يُعاد إلى اتجاه الجدول؛ والأرقام تبقى صحيحة لأن
   `unicode-bidi: plaintext` يعالجها كمقطع مستقل. */
table.attendance-grid td.col-total { direction: rtl; }

/* ————— شريط التمرير العلوي المتزامن —————

   شريط مرسوم لا شريط النظام: المتصفحات الحديثة تعرض أشرطة تمرير طافية
   بسمك بضعة بكسلات أو تخفيها حتى الحركة، وهو ما لا يصلح لعنصر تحكم
   أساسي. هذا الشريط ظاهر دائمًا ما دام التمرير مطلوبًا، ويُسحب بالفأرة
   ولوحة المفاتيح. */

.hscroll { margin-bottom: var(--sp-2); }
.hscroll[hidden] { display: none; }
.hscroll__track {
  position: relative; height: 14px; border-radius: 7px;
  background: #e6e8ec; border: 1px solid var(--border-soft);
  cursor: pointer;
}
.hscroll__thumb {
  position: absolute; inset-block: 1px; inset-inline-start: 0;
  min-width: 40px; border-radius: 6px;
  background: #98a1b0; cursor: grab;
}
.hscroll__thumb:hover { background: var(--primary); }
.hscroll__thumb:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hscroll__thumb.is-dragging { background: var(--primary); cursor: grabbing; }

.scroll-hint {
  font-size: 13px; color: var(--text-muted);
  margin: 0 0 var(--sp-2); text-align: center;
}
.scroll-hint[hidden] { display: none; }

/* ظل خفيف يوضح أن المحتوى ينزلق تحت العمودين المثبَّتين. */
.attendance-grid .col-name { box-shadow: -6px 0 6px -6px rgba(17, 24, 39, 0.18); }
.attendance-grid .col-total { box-shadow: 6px 0 6px -6px rgba(17, 24, 39, 0.18); }

/* إجراء داخل التنبيه: إعادة التحقق بعد نتيجة غير مؤكدة. */
.toast__action {
  margin-inline-start: var(--sp-3); padding: 2px 10px;
  border: 1px solid currentColor; border-radius: var(--radius-sm);
  background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.toast__action[hidden] { display: none; }

/* خلية نتيجتها غير مؤكدة: تُميَّز ولا تُعرض كأنها محفوظة. */
.unit-cell.is-uncertain .unit-select {
  border-color: var(--warning); background: var(--warning-bg);
}