/* 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;

  /* ————— قياسات النماذج —————

     ارتفاع سطر عنوان الحقل مُعلن لا مُستنتَج: صفُّ المرشحات يحاذي عناصره
     من **أعلى** كي تستوي الحقول على خط واحد مهما اختلفت تلميحاتها طولًا،
     والزرُّ الذي بلا عنوان يحتاج مقدار هذا السطر ليقف مع الحقول لا فوقها.
     كان الصف يحاذي من الأسفل، فحقلٌ له تلميح يعلو جاره ويترك القوائم على
     خطوط مختلفة. */
  --field-label-h: 21px;
  --field-label-gap: var(--sp-1);
  --field-head-h: 25px;   /* العنوان + المسافة تحته */

  /* ————— اسم العامل —————

     مقاسٌ واحد لكل الشاشات، لا إصلاحٌ في كل قالب. الاسم هو ما تبحث عنه
     العين وهي تمرّ على عشرين صفًّا، وهو ما يُنادى به يوم القبض؛ فلا يصغر
     عن حجم القراءة الأساسي في النظام (16px)، والكود تحته أصغر منه دائمًا.
     ورفعُه من موضع واحد يرفعه في كل شاشة دفعةً واحدة. */
  --name-size: 16px;
  --name-size-lg: 17px;
  --name-size-head: 22px;
  --name-size-head-lg: 26px;
  --code-size: 12px;
  --code-size-lg: 13px;
}

* { 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; }

/* ————————————————————— القائمة: جانبية ومنزلقة —————————————————————

   عنصر واحد بحالتين، لا قائمتان. على الكمبيوتر عمودٌ ثابت؛ ودون 1024px
   لوحةٌ تنزلق من **اليمين** (جهة البداية في RTL). القائمة الدائمة
   والمنزلقة لا تظهران معًا أبدًا: الحالة الثانية تلغي الأولى بالكامل. */

.nav-toggle { display: none; }
.nav-scrim { display: none; }
.sidebar__head { display: none; }
.sidebar__scroll { display: contents; }

/* الحساب والخروج داخل اللوحة يخصّان الهاتف: على الكمبيوتر هما في
   الشريط العلوي، وتكرارهما هناك ضجيج. */
.sidebar__account { display: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  border: 0;
}

@media (max-width: 1023px) {
  /* لا مساحة محجوزة لشريط سفلي: أُزيل الشريط، وحشو المحتوى يعود طبيعيًا. */
  .content { padding: var(--sp-4) var(--sp-3); }

  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: var(--control-h); padding: 0 var(--sp-3);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .nav-toggle__bars {
    width: 18px; height: 2px; background: currentColor; border-radius: 2px;
    position: relative; flex: 0 0 auto;
  }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: ""; position: absolute; inset-inline: 0; height: 2px;
    background: currentColor; border-radius: 2px;
  }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after { top: 6px; }

  /* الحجاب المظلل: يغلق باللمس، ويمنع لمس ما خلفه. */
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 40;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0; transition: opacity 180ms ease;
  }
  .nav-scrim[hidden] { display: none; }
  .nav-scrim.is-open { opacity: 1; }

  #site-nav {
    display: flex; flex-direction: column;
    position: fixed;
    /* من اليمين لأن الواجهة RTL: `inset-inline-start` هو اليمين هنا. */
    inset-block: 0; inset-inline-start: 0;
    z-index: 50;
    width: min(86vw, 320px);
    max-width: 100%;
    /* `dvh` يتبع انكماش شريط Safari وتمدده؛ و`vh` بديلٌ للمتصفحات
       القديمة. بدونه يقع آخر عنصر خلف الشريط السفلي فلا يُنقر. */
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    background: var(--surface);
    border-inline-start: none;
    border-inline-end: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.18);
    padding: 0;
    /* اللوحة مغلقة: تنزلق خارج الشاشة ولا تستقبل تركيزًا. */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 220ms ease, visibility 0s linear 220ms;
  }
  #site-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 220ms ease, visibility 0s;
  }

  .sidebar__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3);
    /* النتوء العلوي على iPhone: بلا هذا يقع العنوان تحته. */
    padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
  }
  .sidebar__title { font-weight: 700; font-size: 16px; }
  .nav-close {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--control-h); min-height: var(--control-h);
    background: transparent; border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-size: 16px; cursor: pointer;
  }

  /* المحتوى وحده يتمرر، والترويسة تبقى. وحشو الأسفل يتجاوز شريط
     Safari والمنطقة الآمنة، فيبقى آخر عنصر قابلًا للنقر. */
  .sidebar__scroll {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: var(--sp-4) var(--sp-3)
             calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  }
  /* فاصلٌ يسبق عنوان كل مجموعة: بدونه يلتصق العنوان بآخر عنصر فوقه
     فيُقرأ وصفًا له لا رأسًا لما تحته. */
  .sidebar__group { margin-bottom: var(--sp-4); }
  .sidebar__group + .sidebar__group {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-soft);
  }
  .sidebar__group:last-child { margin-bottom: 0; }
  .sidebar__label { margin-bottom: var(--sp-2); }
  .sidebar__account { display: block; }
  .sidebar__account form { margin-top: var(--sp-2); }
}

/* تمرير الصفحة الخلفية يتوقف أثناء فتح اللوحة، ومكان شريط التمرير
   يُعوَّض بالحشو فلا يقفز عرض الصفحة عند الفتح. */
html.nav-open, body.nav-open { overflow: hidden; }

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

.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); }
/* `min-height` لا `height`: العنوان الطويل يلتف ولا يُقصّ، والقصير يحجز
   السطر نفسه فتستوي رؤوس الحقول المتجاورة. و`line-height` 1.5 لأن أقل
   منها يقطع نزول الحروف العربية (ج، ح، خ، ي) أسفل السطر. */
.field__label {
  display: block; font-weight: 600; font-size: 14px; line-height: 1.5;
  min-height: var(--field-label-h); margin-bottom: var(--field-label-gap);
}
.field__help {
  color: var(--text-muted); font-size: 13px; line-height: 1.5;
  margin: var(--sp-1) 0 0;
}
.field__error {
  color: var(--primary); font-size: 13px; line-height: 1.5; font-weight: 600;
  margin: var(--sp-1) 0 0;
}
.field__required { color: var(--primary); }

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

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;
  /* 1.5 لا 1.6 الموروثة عن `body`: الفارق يكفي لتقطع بعض المتصفحات نزول
     الحرف العربي داخل حقلٍ ذي ارتفاع ثابت. */
  line-height: 1.5;
}
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); }

/* ————————————————————— قائمة اختيار العامل —————————————————————

   الخيار **اسم عامل**، والاسم يُقرأ بالعين لا يُفكّ بالحرف: خطٌّ 16px لا
   يصغر (وهو أيضًا ما يمنع Safari على iPhone من تكبير الصفحة عند التركيز)،
   وارتفاع لمس 44px للحقل وللخيار.

   وسطرٌ واحد لا سطران: الاسم الطويل يُقصّ بصريًا في الحقل المغلق ولا يلتف،
   فلا يرتفع الحقل فوق جاره ولا يزيح ما تحته. والاسم كاملًا يبقى في قائمة
   المتصفح وفي بطاقة الهوية أعلى النموذج بعد الاختيار.

   `max-width: 100%` مع `min-width: 0` على الغلاف: قائمةٌ باسم طويل كانت
   تمدّ الصف فيخرج عن الشاشة على 320px. */
select.worker-select {
  min-height: var(--control-h);
  font-size: 16px;
  line-height: 1.4;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
select.worker-select option {
  min-height: var(--control-h);
  padding: 10px var(--sp-3);
  font-size: 16px;
  line-height: 1.5;
}

/* 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: 150px; max-width: 150px; }
.attendance-grid .col-total { min-width: 74px; }
.attendance-grid--extended .col-name { min-width: 142px; max-width: 142px; }
.attendance-grid--extended .col-total { min-width: 68px; }
/* الاسم أبرز ما في الصف: أكبر خطًّا وأعرض وزنًا وبلون الهوية، فتلتقطه
   العين وهي تمرّ على عشرين صفًّا. والكود تحته أصغر لكنه مقروء — به
   يُميَّز المتشابهون في الاسم.

   والالتفاف على حدود الكلمات بثلاثة أسطر كحد أقصى: الاسم العربي الطويل
   يلتف ولا يُقصّ، ولا يمتد العمود فيبتلع يوم عمل. */
.worker-name,
.entity-name {
  display: block;
  font-size: var(--name-size);
  font-weight: 700;
  /* 1.35 كانت تقطع نزول الحروف العربية في الأسماء الطويلة الملتفّة. */
  line-height: 1.45;
  color: var(--primary);
  text-decoration: none;
  /* **يلتف ولا يُقصّ.** القصّ باتّزان (`line-clamp`) يبدو مرتبًا ويخفي
     آخر الاسم: «عمرو فتحي عبد الا…» ليس اسمًا يُميَّز به أحد. الصف يعلو
     قليلًا لاسمٍ طويل، والعمود يبقى بعرضه فلا يبتلع يوم عمل. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
/* اسم كيانٍ ليس عاملًا (قاعدة خصم مثلًا): المقاس نفسه بلون النص، فلا
   يُقرأ رابطًا إلى بطاقة عامل ولا يختلط بأسماء الأشخاص. */
.entity-name { color: var(--text); }

/* الاسم عنوانًا للصفحة: أبرز ما فيها بعد نوعها، فيُتأكَّد من صاحب الحركة
   بنظرة قبل قراءة أي مبلغ. */
.worker-name--head {
  font-size: var(--name-size-head);
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 var(--sp-1);
}
h1.worker-name--head { color: var(--text); }
p.page-head__sub .worker-name { display: inline; color: var(--text); }

/* أخصّ من `table.data td.col-name a` القديمة، وإلا عاد الوزن إلى 600. */
table.data td.col-name a.worker-name { font-weight: 700; }
a.worker-name:hover { text-decoration: underline; }
/* الكود **أصغر من الاسم دائمًا** وتحته لا بجواره: به يُميَّز المتشابهون
   في الاسم، وهو ليس ما يُقرأ أولًا. */
.worker-code {
  display: block;
  font-size: var(--code-size);
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
}
@media (min-width: 768px) {
  .worker-name, .entity-name { font-size: var(--name-size-lg); }
  .worker-name--head { font-size: var(--name-size-head-lg); }
  .worker-code { font-size: var(--code-size-lg); }
}

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); }

/* ————— ترتيب الطبقات عند تقاطع المثبَّتات —————

   ثلاث طبقات لا اثنتان: خلايا الجسم المثبَّتة (الاسم والإجمالي)، ثم رأس
   الأيام، ثم **خليتا الرأس المثبَّتتان** وهما نقطتا التقاطع. بلا هذا
   الترتيب ينزلق اسم العامل فوق رأس اليوم أو العكس، فيُقرأ رأسٌ فوق اسم.

   وكل مثبَّت بخلفية **مصمتة**: الشفافة تُظهر ما يمر تحتها فيبدو النص
   مزدوجًا. */
table.attendance-grid thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg);
}
table.attendance-grid tbody td.col-name,
table.attendance-grid tbody td.col-total {
  z-index: 2;
  background: var(--surface);
}
table.attendance-grid thead th.col-name,
table.attendance-grid thead th.col-total {
  z-index: 4;
  background: var(--bg);
}
/* صفٌّ يُظلَّل بالتناوب: الخلية المثبَّتة تأخذ ظلّه كي لا تبدو نافرة. */
table.attendance-grid tbody tr:hover td.col-name,
table.attendance-grid tbody tr:hover td.col-total { background: #fbfbfc; }

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

.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; }

/* لا بطاقة هاتف ولا جدول كمبيوتر: جدول واحد لكل المقاسات (GOLIVE-006). */
/* ————————————————————— حاوية جدول اليوميات —————————————————————

   الجدول يتمرر **داخل حاويته** في الاتجاهين: أفقيًا لبقية أيام الأسبوع،
   ورأسيًا لبقية العمال. والتمرير الرأسي داخل الحاوية لا في الصفحة هو ما
   يجعل `position: sticky` على رأس الأيام يعمل: رأسٌ يثبت على الشاشة
   يحتاج حاوية تمرير معروفة، ولا يكفي `overflow-x` وحده.

   `max-height` بالنسبة إلى ارتفاع النافذة لا برقم ثابت، و`dvh` تتبع
   انكماش شريط المتصفح على الهاتف. وجدولٌ أقصر منها لا يتمرر أصلًا. */
.attendance-scroll {
  overflow: auto;
  max-height: 74vh;
  max-height: 74dvh;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

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

.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;
}

/* بديل الشعار: حرفان في إطار، لا صورة عامة تُطبع على كشف قبض فتبدو
   شعار منشأة أخرى. النسبة ثابتة (مربع) فلا يتمدد ولا يُقص. */
.brand-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--surface-2, #eef1f5);
  color: var(--text-2, #445);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  flex: none;
}

.brand-initials--lg { width: 3rem; height: 3rem; font-size: 1.15rem; }

/* الشعار يملأ ارتفاع الترويسة ويحتفظ بنسبته: لا تمدد ولا قص. */
.topbar__brand img { height: 2rem; width: auto; max-width: 8rem; object-fit: contain; }

/* ترويسة الطباعة: مخفية على الشاشة، ظاهرة على الورق. */
.print-header { display: none; }

@media print {
  .topbar, .sidebar, .nav-scrim, .form-actions, .btn { display: none !important; }
  body { background: #fff; }
  /* ورقة بلا هوية المنشأة لا تصلح مستندًا، وترويسة الشاشة مخفية أعلاه. */
  .print-header {
    display: block;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #999;
    font-size: 11pt;
  }
  .print-header span { display: inline-block; margin-inline-start: 0.75rem; font-size: 9pt; }
}

/* خلية يوم يخص موقعًا آخر: تُعرض للسياق ولا تُحرَّر من هذه الشاشة. */
.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);
}

/* ————————————————————— GOLIVE-003 ————————————————————— */

/* ————— الشعار: مقاس لكل سطح، لا قيمة واحدة —————
   شاشة الدخول تعرض هوية المنشأة، فالشعار فيها عنصر رئيسي. والترويسة
   شريط تنقل، فالشعار فيها علامة صغيرة بجوار اسم النظام. مقاس واحد
   للاثنين يجعل أحدهما خطأً حتمًا.
   `clamp` لا قيمة ثابتة: هاتف بعرض 320 وشاشة 1920 لا يناسبهما رقم واحد.
   و`object-fit: contain` يحفظ النسبة مهما كان الشعار أفقيًا أو رأسيًا
   أو مربعًا — لا تمدد ولا قص. */
.auth-card__logo {
  display: block;
  margin: 0 auto var(--sp-3);
  /* الارتفاع يتبع عرض الشاشة **وارتفاعها**: هاتف قصير الارتفاع (568px مثلًا)
     كان الشعار الكبير يدفع فيه زر الدخول خارج الشاشة، والحد الأعلى يمنع
     أن يبتلع الشعار البطاقة على الشاشات الكبيرة. */
  height: clamp(64px, min(26vw, 16vh), 132px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.auth-card .brand-initials--lg {
  width: clamp(64px, min(26vw, 16vh), 132px);
  height: clamp(64px, min(26vw, 16vh), 132px);
  font-size: clamp(18px, 6vw, 32px);
  margin: 0 auto var(--sp-3);
  display: flex;
}

.auth-card__brand strong { font-size: clamp(19px, 5vw, 24px); }
.auth-card__brand span { display: block; margin-top: 2px; }

/* الترويسة: علامة لا لوحة. */
.topbar__brand img { height: 32px; width: auto; max-width: 120px; object-fit: contain; }

@media (max-width: 480px) {
  /* على الهاتف يختفي اسم المنشأة من الشريط لا الشعار: الشريط ضيق،
     والاسم موجود في كل صفحة أخرى. وكذلك اسم المستخدم وزر الخروج:
     كلاهما داخل لوحة القائمة، وإبقاؤهما هنا يزاحم زر القائمة نفسه. */
  .topbar__org { display: none; }
  .topbar__user { display: none; }
  .topbar > form { display: none; }
  .topbar__brand { font-size: 16px; }
  .topbar__brand img { height: 28px; max-width: 88px; }
}

/* ————— بطاقة المراجعة قبل الحفظ ————— */
.review-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: var(--sp-3) var(--sp-4);
}
.review-card__title { font-size: 15px; font-weight: 600; margin: 0 0 var(--sp-2); }
.review-card__list { display: grid; gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-2); }
.review-card__list > div { display: flex; gap: var(--sp-2); align-items: baseline; }
.review-card__list dt { color: var(--text-muted); font-size: 13px; min-width: 7.5rem; }
.review-card__list dd { margin: 0; font-weight: 600; font-size: 14px; }
@media (min-width: 640px) { .review-card__list { grid-template-columns: 1fr 1fr; } }

/* ————— أدوات تباعد ————— */
.mt-2 { margin-top: var(--sp-2); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }

/* ————— الجداول على الشاشات الضيقة —————
   العمود الأول ملتصق أثناء التمرير الأفقي: من يمرّر سبعة أعمدة يفقد اسم
   العامل فيقرأ رقمًا لا يعرف صاحبه. الالتصاق على الطرف **البادئ** لا
   على «اليسار»، فيصح في RTL كما يصح في LTR. */
@media (max-width: 767px) {
  table.data th.col-name,
  table.data td.col-name {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--surface);
    /* حد يفصل العمود الملتصق عمّا يمر تحته، وإلا بدا النص متداخلًا. */
    box-shadow: -1px 0 0 var(--border-soft) inset;
    max-width: 10rem;
  }
  table.data th.col-name { background: var(--bg); }
  table.data { font-size: 14px; }
  table.data th, table.data td { padding: var(--sp-2); }
}

/* اسم طويل في الجداول العامة: **يلتف ولا يُقصّ**.

   كان يُقصّ بثلاث نقاط ويُترك كاملًا في `title`. و`title` تلميحُ مرور
   بالفأرة: لا وجود له على الهاتف، وهو أكثر ما تُقرأ به هذه الشاشات. فكان
   الاسم مقطوعًا بلا وسيلة لعرضه كاملًا حيث يُقرأ أكثر — وهو الاسم الذي
   يُنادى به صاحبه يوم القبض. يلتف الآن سطرًا ثانيًا عند الحاجة، فيعلو
   الصفُّ قليلًا ويبقى الاسم كاملًا. */
table.data td.col-name a,
table.data td.col-name .worker-name {
  display: block;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: break-word;
}

/* **إلا في جدول اليوميات**: هناك الاسم هو ما يبحث عنه المستخدم وهو يمرّ
   على الصفوف، و«عمرو فتحي عبد الا…» ليس اسمًا يُميَّز به أحد. فيلتف على
   حدود الكلمات بقدر ما يحتاج، ويعلو الصف قليلًا — والعمود يبقى بعرضه
   فلا يبتلع يوم عمل. */
table.attendance-grid td.col-name a.worker-name {
  display: block;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  vertical-align: baseline;
}

/* صف الإجماليات يبقى مقروءًا ومميزًا مهما ضاقت الشاشة. */
table.data tfoot td, table.data tr.is-total td {
  background: var(--bg);
  font-weight: 700;
  border-top: 2px solid var(--border);
}

/* ————— النماذج —————
   حقل واحد في الصف على الهاتف: عمودان بعرض 240px كانا يتزاحمان تحت 520px
   فيُقصّ عنوان الحقل. */
@media (max-width: 519px) {
  .grid--form { grid-template-columns: 1fr; }
}

/* مساحة لمس لا تقل عن 44×44 لكل ما يُنقر — بما فيها الأزرار «الصغيرة».
   الصِّغَر في هذا النظام بصريّ (حشو أقل وخط أصغر) لا في مساحة اللمس:
   زر خروج بارتفاع 36 يُخطئه الإصبع على الهاتف. */
.btn, .nav-link, .nav-toggle, .nav-close, table.data td .btn {
  min-height: var(--control-h);
}
.btn--small { min-height: var(--control-h); padding-inline: var(--sp-3); }

/* مؤشر تركيز واحد واضح لكل عنصر تفاعلي، لا للأزرار وحدها. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(180, 35, 44, 0.45);
  outline-offset: 2px;
  border-radius: 4px;
}

/* حقل به خطأ: لون **وحد** — لا يُعتمد على اللون وحده. */
.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: var(--primary);
  border-width: 2px;
}

/* ملخص أخطاء النموذج: عنوان نصي مع الرمز، لا لون فقط. */
.form-errors__title::before { content: "⚠ "; }

/* ————— احترام تقليل الحركة ————— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* لا تمرير أفقي على مستوى الصفحة مهما فعل جدول أو صورة داخلها. */
html, body { overflow-x: hidden; }
.content, .content__inner { max-width: 100%; }
img, svg, video { max-width: 100%; }

/* قائمة ملخص أخطاء النموذج: روابط لا نص، فيصل المستخدم إلى الحقل. */
.form-errors__list { margin: var(--sp-2) 0 0; padding-inline-start: 1.2rem; font-size: 14px; }
.form-errors__list li { margin-bottom: var(--sp-1); }
.form-errors__list a { font-weight: 600; }

/* أيقونة سبب اليومية: دائرة صغيرة بصريًا، ومساحة لمس كاملة حولها.
   الدائرة 18px لأن الخلية ضيقة، لكن الإصبع لا يصيب 18px — فيُوسَّع هدف
   اللمس بعنصر زائف شفاف دون تكبير الشكل ودون إزاحة الشبكة. */
.unit-note { position: relative; }
.unit-note::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(50%, -50%);
  width: 44px;
  height: 44px;
}

/* في الشاشات التي تعمل باللمس وحدها تُوسَّع الخانة نفسها أيضًا. */
@media (pointer: coarse) {
  .unit-select { min-height: var(--control-h); font-size: 16px; }
  .attendance-cell { padding: var(--sp-2) var(--sp-1); }
}

/* ————————————————————— نافذة اليوم في لوحة اليوميات —————————————————————

   حالة كل يوم صريحة بجانبه: خليةٌ معطّلة بلا تفسير تُقرأ عطلًا لا قاعدة. */
.day-window__list { display: grid; gap: var(--sp-2); }
.day-window__item {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  min-height: var(--control-h);
}
.day-window__date { display: flex; align-items: center; gap: var(--sp-2); min-width: 90px; }
.day-window__form {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-inline-start: auto;
}
.day-window__form input[type="text"] { width: min(260px, 100%); }

@media (max-width: 639px) {
  .day-window__form { margin-inline-start: 0; width: 100%; }
  .day-window__form input[type="text"] { width: 100%; }
  .day-window__form .btn { width: 100%; }
}

/* ————————————————————— بطاقة الهوية ومسار التنقل —————————————————————

   من أسجّل عليه هذه الحركة؟ سطرٌ صغير تحت العنوان يُتجاوَز بالعين،
   وسلفةٌ سُجِّلت على عاملٍ آخر لا تُكتشف إلا يوم القبض. */
.identity-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.identity-card__label {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 2px;
}
.identity-card__name {
  display: block; font-size: 22px; line-height: 1.3; font-weight: 700;
  margin-bottom: var(--sp-2);
}
.identity-card__facts {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: 14px;
}
.identity-card__fact { display: flex; align-items: baseline; gap: 6px; }
.identity-card__key { color: var(--text-muted); font-size: 12px; }

@media (min-width: 768px) { .identity-card__name { font-size: 26px; } }

/* مسار التنقل: أين أنا، وكيف أعود خطوة. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-muted); margin-bottom: var(--sp-3);
}
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--text); font-weight: 600; }

/* زر الرجوع لا يزاحم زر الحفظ: ثانويٌّ في الترويسة لا في شريط الإجراءات. */
.back-link { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 639px) { .back-link { width: 100%; justify-content: center; } }

/* ————————————————————— صف مرشحات على خط واحد —————————————————————

   الحقول والأزرار في صف واحد تُحاذى **من الأسفل** (`align-items: end`):
   المحاذاة من الأعلى تدفع الزرَّ الذي بلا عنوان إلى مستوًى أعلى، وتلميحُ
   حقلٍ واحد كان يزيح زرَّ «عرض» وحده إلى أسفل الصف. */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  /* **من الأعلى لا من الأسفل.** كل حقل في الصف يبدأ بعنوان بارتفاع واحد
     (`--field-label-h`) ثم قائمة بارتفاع واحد، فالمحاذاة من الأعلى تضع
     القوائم كلها على خط واحد مهما اختلفت التلميحات والأخطاء تحتها.
     المحاذاة من الأسفل كانت تفعل العكس: حقلٌ له تلميح يرتفع فوق جاره،
     فتتفاوت القوائم على خطوط مختلفة، ويعلو زرُّ «عرض» عن الصف كله. */
  align-items: flex-start;
  gap: var(--sp-3);
}
.filter-row > .field {
  /* 180 لا 200: صفٌّ بثلاثة حقول وزرَّين كان يتجاوز عرض المحتوى عند 768
     فينزل الزر وحده إلى سطر لا قوائم فيه — ويبدو مزاحًا بمقدار سطر عنوان
     لا وجود له. الفرق عشرون بكسلًا لا يضيّق أي حقل عن قراءته. */
  flex: 1 1 180px;
  min-width: 0;
  margin-bottom: 0;
}
.filter-row__action {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
  min-height: var(--control-h);
  /* الزرُّ بلا عنوان، فيُزاح بمقدار سطر العنوان ليقف مع القوائم لا فوقها. */
  margin-top: var(--field-head-h);
}
.filter-row__action .btn { min-height: var(--control-h); }

/* التلميح والخطأ يقعان **تحت** الحقل ولا يزيحان جاره، لأن الصف يحاذي من
   الأعلى. (كان المحدِّد هنا `.field__hint` وهو صنفٌ لا وجود له في أي
   قالب — الصنف الفعلي `.field__help` — فلم تكن القاعدة تُطبَّق أصلًا.) */
.filter-row .field__help,
.filter-row .field__error { margin-bottom: 0; }

@media (max-width: 767px) {
  /* الهاتف: ترتيب رأسي وكل عنصر بعرض كامل، ولا إزاحة لسطر عنوان غائب. */
  .filter-row { flex-direction: column; align-items: stretch; }
  .filter-row > .field { flex: 1 1 auto; width: 100%; }
  .filter-row__action { width: 100%; margin-top: 0; }
  .filter-row__action .btn { flex: 1 1 auto; }
}

/* لوحة أيام الدورة مطويّة: عنوانها يحمل ما يلزم يوميًا، وتفاصيلها لمن
   يفتح يومًا مضى. مفتوحةً كانت تدفع جدول اليوميات أسفل شاشة كاملة على
   الهاتف — والجدول هو عمل هذه الشاشة. */
.day-window__summary {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  cursor: pointer; min-height: var(--control-h); list-style: none;
}
.day-window__summary::-webkit-details-marker { display: none; }
.day-window__summary::after {
  content: "▾"; margin-inline-start: auto; color: var(--text-muted);
}
.day-window[open] .day-window__summary::after { content: "▴"; }
.day-window[open] .day-window__summary { margin-bottom: var(--sp-3); }

/* ————— الهاتف الضيق: عمود واحد مثبَّت لا عمودان —————

   عند 320px يشغل العمودان المثبَّتان (الاسم ١٥٠ + الإجمالي ٧٤) ٢٢٤ من
   ٣٢٠، فيبقى ٩٦ لخلية اليوم وعرضها ١٦٤ — فتبقى مقصوصة تحت الإجمالي مهما
   سحب المستخدم، ولا يرى قائمة اليوم كاملة أبدًا.

   الاسم هو ما يلزم تثبيته: به يعرف المستخدم **صف من** يملأ. والإجمالي
   رقمٌ مشتق يُبلَغ بالسحب. فيُفكّ تثبيته دون 480px، فيتّسع اليوم كاملًا
   بجوار الاسم (١٥٠ + ١٦٤ = ٣١٤ < ٣٢٠). */
@media (max-width: 479px) {
  table.attendance-grid td.col-total,
  table.attendance-grid th.col-total {
    position: static;
    border-inline-start: 1px solid var(--border-soft);
  }
}

/* ————————————————————— قائمة السلف المجمَّعة (GOLIVE-008A) —————————————————————

   حالاتٌ مختلفة في مجموع واحد: الشارة تقول «حالات متعددة»، وهذا السطر
   يقول كم في كلٍّ منها. لا يُختصر إلى أقربها للإغلاق — مجموعٌ بعض حركاته
   مفتوحة ليس مجموعًا سُوِّي. */
.state-parts {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 2px;
}

/* شريط الصفحات: مساحة لمس كاملة، ووسطٌ يقول أين أنت من كم. */
.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; cursor: not-allowed; pointer-events: none;
}

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

/* ————————————————————— أهداف اللمس التي كانت أصغر من الإصبع —————————————————————

   المساحة البصرية شيء ومساحة اللمس شيء آخر: رابطٌ نصّه رقم واحد عرضه
   ثمانية بكسلات مهما كبر ما يفتحه. هذه القواعد توسّع **الهدف** لا الشكل.

   لماذا هنا لا في كل قالب: القاعدة واحدة (44×44)، ومن يضيف رابط عدد
   جديدًا يأخذها بالصنف ولا يعيد اكتشافها. */

/* رابط عدد داخل خلية جدول: الرقم صغير والهدف كامل. الصنف صريح لا
   محدِّد عام (`td.num > a`): كي يكون التوسيع قرارًا مكتوبًا في القالب لا
   أثرًا جانبيًا يصيب كل رابط في خلية رقمية. */
.count-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding-inline: var(--sp-1);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* اسم العامل رابطًا في جدول: سطرٌ نصّي ارتفاعه 23px، والإصبع يحتاج 44.
   يُوسَّع بالمحاذاة الرأسية داخل الخلية فلا يعلو الصف إلا بقدر الحاجة. */
table.data td.col-name a.worker-name {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
}
/* **إلا في شبكة اليوميات**: صفوفها كثيرة وخلاياها ذات ارتفاع محسوب،
   والاسم فيها يلتف ثلاثة أسطر أصلًا فيتجاوز 44 بنفسه. */
table.attendance-grid td.col-name a.worker-name {
  display: block;
  min-height: 0;
}

/* اسم المستخدم في الشريط العلوي: رابطٌ إلى تغيير كلمة المرور، وارتفاعه
   كان 26px على كل الشاشات التي يظهر فيها. */
.topbar__user a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
}

/* كل `<summary>` قابل للنقر: يفتح ويُغلق، فهو زرٌّ بشكل سطر. */
details > summary {
  min-height: var(--control-h);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
}

/* ————————————————————— تبويبات ولوحة تصفية وأرقام صفحات —————————————————————

   بُنيت لسجل المراجعة، وهي عامة عمدًا: أي قائمة طويلة تحتاج القسمة نفسها.

   التبويبات **روابط** لا أزرار JavaScript. الرابط يُشارك ويُحفظ ويرجع
   إليه زر المتصفح، والتصفية على الخادم فلا تعتمد الصفحة على سكربت. */
.tabs {
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
}
.tabs__list {
  display: flex;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
  /* تمرير أفقي **داخل الشريط وحده**: سبعة تبويبات عربية أعرض من 320
     بكسلًا، وبلا هذا يتمدد عرض الصفحة كلها فتُمرَّر يمينًا ويسارًا.
     `nowrap` كي لا تنكسر إلى سطرين يخفيان أن هناك مزيدًا. */
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.tabs__link {
  display: flex;
  align-items: center;
  /* هدف اللمس كاملًا: 44 ارتفاعًا، والحشو الأفقي يمنع تلاصق تبويبين. */
  min-height: var(--control-h);
  padding: 0 var(--sp-3);
  white-space: nowrap;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tabs__link:hover { background: var(--bg); color: var(--text); }
.tabs__link--active {
  color: var(--primary);
  font-weight: 600;
  /* اللون وحده لا يكفي: الحدّ السفلي يميّز التبويب الجاري لمن لا يفرّق
     بين الأحمر والرمادي. */
  border-bottom-color: var(--primary);
}

/* لوحة التصفية `<details>`: تطوي نفسها بلا سكربت، وتُفتح حين تكون هناك
   تصفية سارية كي يرى المستخدم سبب نقص النتائج. */
.filters {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: var(--sp-4);
}
.filters__summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding: 0 var(--sp-4);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.filters__summary::-webkit-details-marker { display: none; }
.filters__summary::before {
  content: "▾";
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.filters[open] .filters__summary::before { transform: rotate(180deg); }
.filters__form {
  padding: 0 var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--border-soft);
  padding-top: var(--sp-3);
}
/* حقل البحث أعرض من قائمة اختيار: نصُّه جملة لا كلمة. */
.filters .field--wide { flex: 2 1 260px; }
.filters__actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.filters__actions .btn { min-height: var(--control-h); }

@media (max-width: 767px) {
  .filters__actions .btn { flex: 1 1 auto; }
}

/* سطر «عرض ١–٢٥ من ٤٠٠»: يقول أين أنت من كم قبل أن تُقرأ الصفحة. */
.results-count {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 var(--sp-2);
}

/* أرقام الصفحات — كلٌّ هدف لمس كامل لا رقمٌ عرضه ثمانية بكسلات. */
.pager__numbers { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.pager__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding: 0 var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
}
.pager__num:hover { background: var(--bg); }
.pager__num--current {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
.pager__gap {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 0 var(--sp-1);
  color: var(--text-muted);
}

@media (max-width: 479px) {
  /* الهاتف: الأرقام سطر كامل تحت زرَّي السابقة/التالية. */
  .pager__numbers { order: 2; width: 100%; justify-content: center; }
}

/* ————————————————————— شريط تنبيه فتح دورة الأسبوع —————————————————————

   تنبيهٌ لا حاجز: يجلس أعلى المحتوى، ولا يغطي شيئًا، ولا يمنع عملًا.
   لونه تحذيري لا خطر — نسيانُ فتح الدورة يُدرَك ويُصحَّح، وليس عطلًا.

   ولا يعتمد اللون وحده: النص يقول ما جرى، فيقرأه من لا يميّز الألوان. */
.cycle-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--warning-bg);
  border: 1px solid #fde68a;
  border-inline-start: 4px solid var(--warning);
  border-radius: var(--radius);
  color: var(--warning);
}
.cycle-banner__text { display: flex; flex-direction: column; gap: 2px;
                      min-width: 0; }
.cycle-banner__range { font-size: 13px; color: var(--text-muted); }
.cycle-banner__action { margin-inline-start: auto; }
.cycle-banner .btn { min-height: var(--control-h); }

@media (max-width: 767px) {
  /* الهاتف: الزر سطرٌ كامل تحت النص، لا مزاحمٌ له في سطر ضيق. */
  .cycle-banner__action { margin-inline-start: 0; width: 100%; }
  .cycle-banner__action .btn { width: 100%; }
}

/* ————————————————————— بطاقات النقد الخارج فعليًا —————————————————————

   شقّان ومجموعهما. الفرق بينهما هو ما يُخطئ فيه القارئ — يظن السلفة
   المخصومة من الكشف نقدًا خرج مرتين — فيُفصل بصريًا ويُشرح نصًّا.

   الإجمالي يُميَّز بحدٍّ لا بلونٍ وحده: من لا يميّز الألوان يقرأ عنوانه. */
.cash-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.cash-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--sp-4);
  min-width: 0;
}
.cash-card--total {
  border-width: 2px;
  border-color: var(--primary);
  background: #fdf6f6;
}
.cash-card__label { color: var(--text-muted); font-size: 13px; margin: 0; }
.cash-card__value {
  font-size: 24px;
  font-weight: 700;
  margin: var(--sp-1) 0 var(--sp-1);
  /* الأرقام لا تلتفّ: مبلغٌ مقطوع على سطرين يُقرأ رقمين. */
  white-space: nowrap;
  overflow-wrap: normal;
}
.cash-card__note { color: var(--text-muted); font-size: 12px; margin: 0; }

@media (max-width: 479px) {
  /* الشاشة الضيقة: المبلغ الطويل يصغر بدل أن يمدّ الصفحة. */
  .cash-card__value { font-size: 20px; }
}

/* ————————————————————— COMMERCIAL-002 —————————————————————
   شريط القراءة فقط، وكتالوج الصلاحيات، وقائمة الصلاحيات الفعلية،
   وقائمة خطوات البدء الفارغة. */

.read-only-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  background: var(--warning-bg);
  border: 1px solid #fde3bf;
  border-inline-start: 4px solid var(--warning);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  color: var(--warning);
}
.read-only-banner__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.read-only-banner__reason { font-size: 13px; color: var(--text-muted); }
.read-only-banner__action { margin-inline-start: auto; }
@media (max-width: 479px) {
  .read-only-banner__action { margin-inline-start: 0; width: 100%; }
}

/* في القراءة فقط تُخفى أزرار الإرسال في كل نموذج POST إلا ما يُعلن أنه
   مسموح (الدخول والخروج). الإخفاء إعلامٌ للمستخدم؛ المنع في الخادم. */
body.is-read-only form[method="post"]:not([data-allow-readonly]) button[type="submit"],
body.is-read-only form[method="POST"]:not([data-allow-readonly]) button[type="submit"],
body.is-read-only form[method="post"]:not([data-allow-readonly]) input[type="submit"] {
  display: none !important;
}

.perm-catalog { display: flex; flex-direction: column; gap: var(--sp-3); }
.perm-catalog__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.perm-catalog__search { flex: 1 1 220px; min-width: 0; }
.perm-group {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  margin: 0;
  min-width: 0;
}
.perm-group__title { font-weight: 700; padding: 0 var(--sp-1); }
.perm-group[hidden], [data-perm-item][hidden] { display: none !important; }

.effective-list { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.effective-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) 0; border-bottom: 1px dashed var(--border-soft);
}

.start-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.start-steps li {
  display: flex; flex-wrap: wrap; 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); background: var(--surface);
}
.start-steps__num {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700;
  background: var(--bg); color: var(--text-muted); flex: 0 0 auto;
}
.start-steps li.is-done .start-steps__num { background: var(--success-bg); color: var(--success); }
.start-steps__text { flex: 1 1 200px; min-width: 0; }
.start-steps .btn { margin-inline-start: auto; }
@media (max-width: 479px) { .start-steps .btn { margin-inline-start: 0; width: 100%; } }