:root {
  --hr-primary: #1f5f8b;
  --hr-primary-dark: #16455f;
  --hr-accent: #0e7c7b;
  --hr-bg: #f3f5f7;
  --hr-card: #ffffff;
  --hr-border: #e1e6ea;
  --hr-text: #1f272e;
  --hr-muted: #69747d;
  --hr-danger: #c0392b;
  --hr-warning: #b8860b;
  --hr-success: #1e7e46;
  --hr-sidebar-w: 255px;
}

* { box-sizing: border-box; }

body {
  font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
  background: var(--hr-bg);
  color: var(--hr-text);
  margin: 0;
}

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--hr-sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--hr-primary-dark), var(--hr-primary));
  color: #e8f4fb;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  /* القائمة تثبت والمحتوى وحده يتمرر. الشاشات صارت طويلة (المرتبات، أرصدة الإجازات،
     الإعدادات) فكان التنقل يعني الرجوع لأعلى الصفحة أولًا في كل مرة. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* شريط تمرير رفيع داخل القائمة بدل الشريط العريض الافتراضي */
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .25);
  border-radius: 3px;
}
.sidebar::-webkit-scrollbar-track { background: transparent; }

.sidebar .brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1.1rem;
  padding: .5rem 1.2rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
  margin-bottom: .8rem;
}

.sidebar nav { display: flex; flex-direction: column; gap: .15rem; padding: 0 .7rem; }

.sidebar nav a {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: #d6e9f5;
  text-decoration: none;
  padding: .55rem .9rem;
  border-radius: 10px;
  font-size: .93rem;
  transition: background .15s;
}

.sidebar nav a i { width: 18px; text-align: center; }
.sidebar nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.sidebar nav a.active { background: #ffffff; color: var(--hr-primary-dark); font-weight: 700; }

/* عنوان مجموعة، وهو زرّ يطويها.
   القائمة كاملة تحتاج 1414 بكسل وشاشة الجانب 800، فبنودٌ كاملة تقع تحت الطيّة بلا دليل
   على وجودها. الطيّ يجعل ما يُستعمل يوميًا مفتوحًا وما يُضبط مرة واحدة مطويًّا مسمّى. */
.sidebar .nav-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid rgba(255,255,255,.13);
  color: #a9d2ea;
  font-family: inherit;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: start;
  padding: .5rem .9rem .3rem;
  margin-top: .3rem;
  cursor: pointer;
}
.sidebar .nav-section:first-of-type { border-top: none; margin-top: .15rem; }
.sidebar .nav-section:hover { color: #eaf6ff; }
.sidebar .nav-section .chev {
  font-size: .6rem; opacity: .7; transition: transform .18s;
}
.sidebar .nav-section[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.sidebar .nav-group { display: flex; flex-direction: column; gap: .15rem; }
.sidebar .nav-section[aria-expanded="false"] + .nav-group { display: none; }

.sidebar-version {
  margin-top: auto;
  padding: .8rem .9rem;
  font-size: .7rem;
  color: #9dc8e2;
  text-align: center;
}

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  background: var(--hr-card);
  border-bottom: 1px solid var(--hr-border);
  padding: .7rem 1.5rem;
  /* الشريط العلوي بيثبت زي القائمة الجانبية بالظبط.
     كان بيمشي مع التمرير، فاللي بينزل في كشف طويل بيفقد اسم الشركة والبحث السريع
     وزرار الخروج ولازم يرجع لفوق علشان يوصلهم. (بلاغ #49) */
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar .company-name { font-weight: 700; font-size: 1.02rem; color: var(--hr-primary); }
.topbar .spacer { flex: 1; }

.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--hr-text);
  padding: .3rem .6rem;
  margin-inline-end: .6rem;
  cursor: pointer;
  border-radius: 8px;
}
.hamburger-btn:hover { background: var(--hr-bg); }
.sidebar-backdrop { display: none; }

.user-menu { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .9rem; }
.user-menu .role-chip {
  background: var(--hr-bg);
  border: 1px solid var(--hr-border);
  border-radius: 20px;
  padding: .1rem .6rem;
  font-size: .75rem;
  color: var(--hr-muted);
  font-weight: 600;
}

.content { padding: 1.5rem; flex: 1; min-width: 0; }

/* ---------- login ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--hr-primary-dark), var(--hr-accent));
}
.login-card {
  background: var(--hr-card);
  border-radius: 16px;
  padding: 2.2rem 2rem;
  width: 100%;
  max-width: 390px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.login-brand { text-align: center; margin-bottom: 1.5rem; color: var(--hr-primary-dark); }
.login-brand i { font-size: 2.2rem; }
.login-brand h1 { font-size: 1.2rem; margin-top: .5rem; }
.login-brand .sub { font-size: .82rem; color: var(--hr-muted); font-weight: 600; }

/* Password field with a show/hide toggle */
.pw-wrap { position: relative; }
.pw-wrap .form-control { padding-inline-start: 2.6rem; }
.pw-toggle {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--hr-muted);
  cursor: pointer;
  padding: 0;
}
.pw-toggle:hover { color: var(--hr-primary); }

.login-note {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hr-border);
  font-size: .78rem;
  color: var(--hr-muted);
  line-height: 1.7;
}

/* ---------- generic surfaces ---------- */
.card-hr {
  background: var(--hr-card);
  border: 1px solid var(--hr-border);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
}
.card-hr + .card-hr { margin-top: 1rem; }
.card-hr h2, .card-hr h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .9rem; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.kpi-tile {
  background: var(--hr-card);
  border: 1px solid var(--hr-border);
  border-radius: 14px;
  padding: 1rem 1.2rem;
}
/* شريط أرقام مضغوط للشاشات اللي تحتها جدول طويل.
   .table-hr ارتفاعه calc(100vh - 15rem)، يعني التخطيط مفترض إن اللي فوقه ~240px. شاشة
   المرتبات كان فوق جدولها 467px، فأول اسم يظهر عند 574px على لابتوب 768px — أربعة صفوف من
   57. المجرّب طلب «تثبيت الجزء العلوي وتحريك الأسماء»، وهو يصف هذا: الأسامي مدفوعة برّه
   الشاشة. الرأس اللاصق وحده لا يكفي ما دام الجدول يبدأ بعد ثلثي الشاشة. */
.kpi-grid.tight { grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: .6rem;
                  margin-bottom: .9rem; }
.kpi-grid.tight .kpi-tile { padding: .5rem .75rem; border-radius: 10px; }
.kpi-grid.tight .kpi-label { font-size: .74rem; }
.kpi-grid.tight .kpi-value { font-size: 1.1rem; margin-top: .05rem; }
.kpi-grid.tight .kpi-sub { font-size: .7rem; margin-top: 0; }

.kpi-tile .kpi-label { color: var(--hr-muted); font-size: .84rem; }
.kpi-tile .kpi-value { font-size: 1.55rem; font-weight: 700; margin-top: .2rem; }
.kpi-tile .kpi-value.danger { color: var(--hr-danger); }
.kpi-tile .kpi-value.warning { color: var(--hr-warning); }
.kpi-tile .kpi-value.primary { color: var(--hr-primary); }
.kpi-tile .kpi-value.success { color: var(--hr-success); }
.kpi-tile .kpi-sub { font-size: .76rem; color: var(--hr-muted); margin-top: .15rem; }
a.kpi-tile { text-decoration: none; color: inherit; display: block; transition: border-color .15s; }
a.kpi-tile:hover { border-color: var(--hr-primary); }

/* شريط وقائع الفترة في شاشة التقييم: غياب/تأخير/إجازات/جزاءات الموظف الحقيقية.
   «الالتزام بالمواعيد والحضور» كان يُقيَّم من الذاكرة والبرنامج عنده الرقم مكتوبًا. */
.kpi-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  align-items: center;
  background: #f3f6f8;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  padding: .5rem .8rem;
  font-size: .84rem;
}
.kpi-fact i { color: var(--hr-muted); margin-inline-end: .2rem; }
.kpi-fact-note { color: var(--hr-muted); font-size: .76rem; margin-inline-start: auto; }

/* مين لسه ماتقيّمش: أسماء متراصّة، الضغطة الواحدة تختاره في الاستمارة. */
.pending-wrap { display: flex; flex-wrap: wrap; gap: .4rem; }
.pending-chip {
  display: inline-block;
  border: 1px solid var(--hr-border);
  border-radius: 20px;
  padding: .22rem .7rem;
  font-size: .82rem;
  text-decoration: none;
  color: var(--hr-text);
  background: var(--hr-card);
  transition: border-color .15s, color .15s;
}
.pending-chip:hover { border-color: var(--hr-primary); color: var(--hr-primary); }
.pending-chip .num { color: var(--hr-muted); font-size: .76rem; }

/* شاشة صرف اليوميات: بتتفتح كل مساء ومن الموبايل غالبًا، والراجل واقف بيعدّ فلوس.
   الخانات أكبر من العادي عن قصد — الخطأ هنا مش خانة غلط، ده مبلغ اتصرف غلط. */
.daily-entry .form-control-lg, .daily-entry .form-select-lg { font-size: 1.05rem; }
.daily-entry .num { font-variant-numeric: tabular-nums; }
.daily-paid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1rem;
  background: #f2f9f4;
  border: 1px solid var(--hr-border);
  border-inline-start: 3px solid var(--hr-success);
  border-radius: 8px;
  padding: .6rem .9rem;
}
.daily-paid .form-check-input { width: 1.25rem; height: 1.25rem; margin-top: 0; }
.daily-paid .form-check { display: flex; align-items: center; gap: .55rem; padding: 0; }
.daily-paid .form-hint { margin: 0; }

@media (max-width: 640px) {
  /* على الموبايل الزراير والخانات بتتلمس بالصباع مش بالماوس */
  .daily-entry .form-control, .daily-entry .form-select { min-height: 46px; }
  .daily-entry .btn-lg { padding: .8rem 1rem; font-size: 1.05rem; }
}

/* تبويب فيه خانة غلط: من غير العلامة دي المستخدم بيدوس «حفظ» ومايحصلش حاجة،
   لأن المتصفح مايقدرش يوري رسالته على خانة جوّه تبويب مقفول. */
.nav-tabs .nav-link.tab-has-error {
  color: var(--hr-danger);
  border-block-end-color: var(--hr-danger);
}
.nav-tabs .nav-link.tab-has-error::after {
  content: "●";
  font-size: .6rem;
  vertical-align: super;
  margin-inline-start: .25rem;
}

/* كتلة العامل في تقرير المحاسبة: كل عامل بجدوله، والمحاسب بيقرا اسم وإجمالي
   قبل ما يدخل في التفاصيل. */
.daily-worker-block { margin-bottom: 1.1rem; }
.daily-worker-block + .daily-worker-block { border-top: 1px solid var(--hr-border);
                                            padding-top: 1.1rem; }
.daily-worker-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}
.daily-worker-sum { margin-inline-start: auto; color: var(--hr-muted); font-size: .86rem; }
.daily-worker-block { break-inside: avoid; page-break-inside: avoid; }

/* عناوين لا تظهر إلا على الورق: الشاشة فيها الترويسة والقائمة الجانبية، والورقة
   كانت بتخرج بجدول بلا اسم شركة ولا اسم كشف. */
.print-only { display: none; }
.print-head { text-align: center; margin-bottom: .9rem; }
.print-head .print-co { font-size: 1.15rem; font-weight: 700; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.page-header h1 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.page-header .sub { color: var(--hr-muted); font-size: .85rem; margin-top: .15rem; }

/* رأس الجدول يفضل ثابت والأسماء تتحرك تحته.
   في كشف المرتبات 57 سطرًا و20 عمودًا، فبمجرد ما تنزل شوية تفقد الأرقام معناها: أي عمود
   هذا؟ خصم أم استحقاق؟ طلبه المجرّب لكل شاشة «فيها بيانات فوق وأسماء تحت».
   الثبات يحتاج وعاءً له ارتفاع ينزلق داخله — الجدول كان ينزلق مع الصفحة كلها، فلا شيء
   يثبت. الحد الأقصى محسوب من ارتفاع النافذة، فالجداول القصيرة لا تبلغه ولا يتغيّر شكلها. */
/* عناوين الجداول تثبت في **كل** الشاشات، مش في الجداول اللي جوه وعاء منزلق بس.
   كان الجدول اللي بره `.table-hr` بيمرّر مع الصفحة وعناوينه تختفي، فاللي بيقرا سطر
   رقم 40 مش عارف العمود ده اسمه إيه. (بلاغ #49)

   الإزاحة `--hr-topbar-h` بتتقاس من الشريط العلوي نفسه في base.html، فمافيش رقم
   مكتوب مرتين يفرق عن التاني لو الشريط اتغيّر ارتفاعه. */
:root { --hr-topbar-h: 3.25rem; }
.card-hr table thead th {
  position: sticky;
  top: var(--hr-topbar-h);
  z-index: 3;
  background: var(--hr-card);
  box-shadow: inset 0 -1px 0 var(--hr-border);
}

.table-hr {
  background: var(--hr-card);
  border: 1px solid var(--hr-border);
  border-radius: 14px;
  overflow: auto;
  max-height: calc(100vh - 15rem);
}
.table-hr table { margin-bottom: 0; }
.table-hr table thead th {
  font-size: .82rem;
  color: var(--hr-muted);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid var(--hr-border);
  position: sticky;
  top: 0;
  z-index: 3;
  /* خلفية صمّاء إجباريّة: الشفافية تُظهر السطور وهي تمرّ تحت العناوين */
  background: var(--hr-card);
  /* الحد السفلي لا يثبت مع الخلية اللاصقة في بعض المتصفحات، فيُرسَم بالظل */
  box-shadow: inset 0 -1px 0 var(--hr-border);
}
.table-hr table tbody td { vertical-align: middle; font-size: .9rem; }
.table-hr table tbody tr:hover { background: #f8fafb; }

.filters-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; align-items: center; }
.filters-bar select, .filters-bar input { max-width: 230px; }

.empty-state { text-align: center; color: var(--hr-muted); padding: 3rem 1rem; }
.empty-state i { font-size: 2.2rem; opacity: .4; display: block; margin-bottom: .7rem; }

/* ---------- status pills ---------- */
.pill {
  display: inline-block;
  padding: .16rem .6rem;
  border-radius: 20px;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
}
.pill-active   { background: #e4f4ea; color: var(--hr-success); }
.pill-hold     { background: #fdf3e0; color: var(--hr-warning); }
.pill-ended    { background: #eef0f2; color: var(--hr-muted); }
.pill-danger   { background: #fbe9e7; color: var(--hr-danger); }
.pill-info     { background: #e6f0f7; color: var(--hr-primary); }
.pill-locked   { background: #e8eaf6; color: #3949ab; }

/* ---------- progress ---------- */
.prog {
  height: 8px;
  border-radius: 6px;
  background: #e9edf0;
  overflow: hidden;
  min-width: 70px;
}
.prog span { display: block; height: 100%; background: var(--hr-success); }
.prog.warn span { background: var(--hr-warning); }
.prog.bad span { background: var(--hr-danger); }

/* ---------- detail page ---------- */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .1rem 1.6rem;
}
.field { padding: .45rem 0; border-bottom: 1px dashed var(--hr-border); }
.field .lbl { font-size: .78rem; color: var(--hr-muted); }
.field .val { font-weight: 600; font-size: .93rem; }
.field .val.empty { color: #b3bcc4; font-weight: 400; }

.nav-tabs .nav-link { color: var(--hr-muted); font-weight: 600; font-size: .92rem; }
.nav-tabs .nav-link.active { color: var(--hr-primary); }

.section-note {
  background: #f0f6fa;
  border-inline-start: 3px solid var(--hr-primary);
  padding: .55rem .85rem;
  border-radius: 6px;
  font-size: .84rem;
  color: #3b4a56;
  margin-bottom: .9rem;
}
.section-note.warn { background: #fdf6e7; border-inline-start-color: var(--hr-warning); }
.section-note.danger { background: #fdeeec; border-inline-start-color: var(--hr-danger); }

/* خطوات شهر المرتب — حالة كل خطوة محسوبة، لا معلَّمة بإيد. */
.steps {
  background: #fff; border: 1px solid #e3e9ee; border-inline-start: 5px solid var(--hr-primary);
  border-radius: 8px; padding: .7rem .95rem; margin-bottom: 1rem;
}
.steps-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem;
  margin-bottom: .5rem; font-size: .9rem;
}
.steps-count { color: var(--hr-muted); font-size: .82rem; }
.steps-next { margin-inline-start: auto; font-size: .82rem; font-weight: 600; color: #b8860b; }
.steps-next.steps-done { color: #2e7d5b; }
.steps-list { list-style: none; margin: 0; padding: 0; }
.step {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem;
  padding: .3rem 0; font-size: .84rem; border-top: 1px solid #f2f5f8;
}
.step:first-child { border-top: 0; }
.step-mark { flex: 0 0 1.3rem; }
.step-title { font-weight: 600; color: #3b4a56; min-width: 9.5rem; }
.step-detail { color: #66727d; }
.step-link { margin-inline-start: auto; white-space: nowrap; font-weight: 600; }
.step-waiting { opacity: .55; }
.step-blocked .step-title, .step-blocked .step-detail { color: var(--hr-danger); }

/* «ليه الرقم ده؟» — اشتقاق أرقام الكشف. على الشاشة فقط، مش على الورقة المطبوعة. */
.explain { margin-top: 1.5rem; }
.explain-title { font-size: .95rem; color: #45535f; margin-bottom: .6rem; font-weight: 700; }
.explain-grid {
  display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.explain-card {
  background: #fff; border: 1px solid #e3e9ee; border-radius: 8px;
  padding: .5rem .8rem; font-size: .84rem;
}
.explain-card > summary {
  cursor: pointer; display: flex; justify-content: space-between;
  align-items: baseline; gap: .5rem; font-weight: 600; color: #3b4a56;
}
.explain-card[open] > summary {
  border-bottom: 1px solid #eef2f5; padding-bottom: .4rem; margin-bottom: .4rem;
}
.explain-value { color: var(--hr-primary); white-space: nowrap; }
.explain-parts { width: 100%; }
.explain-parts td { padding: .18rem 0; color: #55636e; }
.explain-parts td.num { text-align: end; white-space: nowrap; }
.explain-note { margin-top: .35rem; font-size: .78rem; color: var(--hr-muted); line-height: 1.75; }

.req-star { color: var(--hr-danger); }

label.form-label { font-size: .85rem; font-weight: 600; color: #45535f; margin-bottom: .25rem; }
.form-hint { font-size: .76rem; color: var(--hr-muted); margin-top: .2rem; }

.btn-primary {
  background-color: var(--hr-primary);
  border-color: var(--hr-primary);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--hr-primary-dark);
  border-color: var(--hr-primary-dark);
}
.btn-outline-primary { color: var(--hr-primary); border-color: var(--hr-primary); }
.btn-outline-primary:hover { background-color: var(--hr-primary); border-color: var(--hr-primary); }

/* Bootstrap's `a:hover` rules otherwise win over .btn styling for anchor-buttons and flip the
   label to the link colour mid-hover — a trap that has bitten this codebase twice before. */
a.btn:hover, a.btn:focus { text-decoration: none; }
a.btn-primary:hover, a.btn-primary:focus { color: #fff; }
a.btn-outline-primary:hover, a.btn-outline-primary:focus { color: #fff; }

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.text-money { font-variant-numeric: tabular-nums; font-weight: 600; }

.alert-row { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; border-bottom: 1px solid var(--hr-border); }
.alert-row:last-child { border-bottom: none; }
.alert-row .who { font-weight: 600; font-size: .9rem; }
.alert-row .meta { font-size: .78rem; color: var(--hr-muted); }
.alert-row .when { margin-inline-start: auto; font-size: .8rem; font-weight: 700; }

@media (max-width: 768px) {
  .hamburger-btn { display: flex; }
  .sidebar {
    position: fixed;
    inset-block: 0;
    /* في RTL يكون inline-START هو الحافة اليمنى — وهي التي تجلس عليها القائمة في سطح
       المكتب. كان المكتوب inline-END أي الحافة اليسرى، فتُثبَّت على الجهة الخطأ ثم يزيحها
       translateX الموجب إلى داخل الشاشة بدل خارجها: تبقى 120 بكسل منها فوق المحتوى وهي
       «مغلقة». */
    inset-inline-start: 0;
    height: 100vh;
    z-index: 1050;
    /* translateX الموجب يمينٌ فيزيائيًا دائمًا ولا يتأثر بالاتجاه، وهو هنا الخروج من الشاشة. */
    transform: translateX(100%);
    transition: transform .25s ease;
    box-shadow: -4px 0 16px rgba(0,0,0,.25);
  }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1040;
  }
  .app-shell.sidebar-open .sidebar-backdrop { display: block; }
  .topbar { padding: .6rem .9rem; }
  .topbar .company-name { font-size: .88rem; }
  .content { padding: 1rem .9rem; }
  .user-menu .role-chip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* Vertical column headers for the documents matrix.
   The rotated text must be clipped by a container with a real height — rotating the text
   inside a <th> alone leaves it overflowing downward across the first data rows. */
.vhead {
  height: 240px;
  padding: .3rem .1rem !important;
  vertical-align: bottom !important;
  text-align: center;
  width: 34px;
  min-width: 34px;
}
.vhead-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  max-height: 205px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: .78rem;
  line-height: 1.1;
  margin: 0 auto;
}
.vhead-num {
  display: block;
  font-size: .7rem;
  color: var(--hr-muted);
  font-weight: 700;
  margin-bottom: .25rem;
}
.doc-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .2rem .9rem;
  font-size: .82rem;
}
.doc-legend div { padding: .15rem 0; }
.doc-legend b { color: var(--hr-primary); margin-inline-end: .3rem; }

/* Connection state for the attendance screen. Project sites have no internet, so the state of
   the connection and the queue has to be permanently visible, not a transient toast. */
.net-bar {
  position: sticky;
  top: 0;
  z-index: 1020;
  padding: .6rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  font-size: .88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.net-off     { background: #fdeeec; color: var(--hr-danger); border: 1px solid #f5c6c0; }
.net-pending { background: #fdf6e7; color: var(--hr-warning); border: 1px solid #f0dfae; }
.net-ok      { background: #e4f4ea; color: var(--hr-success); border: 1px solid #bfe3cc; }

/* لون السطر بيقول حالته من غير قراءة: المنقطع أحمر، الإجازة المعتمدة زرقا،
   التكليف رمادي فاتح. اللي بيدخّل الحضور بيمرّ على 60 سطر بسرعة — السطر الرمادي
   الصغير ماكانش بيتقرا. (بلاغ #43 و#44) */
.att-table tr.att-cut    { background: #fdf2f1; }
.att-table tr.att-cut:hover { background: #fbe9e7 !important; }
.att-table tr.att-cut td:first-child { box-shadow: inset 3px 0 0 var(--hr-danger); }
.att-table tr.att-leave  { background: #f1f7fb; }
.att-table tr.att-leave:hover { background: #e8f2f9 !important; }
.att-table tr.att-leave td:first-child { box-shadow: inset 3px 0 0 var(--hr-primary); }
.att-table tr.att-assign td:first-child { box-shadow: inset 3px 0 0 var(--hr-muted); }

.att-name { font-weight: 600; font-size: .9rem; }
.att-sub  { font-size: .72rem; color: var(--hr-muted); }
.att-table input[type="time"] { font-variant-numeric: tabular-nums; }

/* Below the phone breakpoint the grid becomes stacked cards: a seven-column table is
   unusable on the handset a site manager actually carries. */
@media (max-width: 768px) {
  .att-table thead { display: none; }
  .att-table, .att-table tbody, .att-table tr, .att-table td { display: block; width: 100%; }
  .att-table tr {
    border: 1px solid var(--hr-border);
    border-radius: 12px;
    margin-bottom: .8rem;
    padding: .6rem .8rem;
    background: #fff;
  }
  .att-table td { border: none !important; padding: .3rem 0 !important; }
  .att-table td::before {
    content: attr(data-label);
    display: block;
    font-size: .72rem;
    color: var(--hr-muted);
    margin-bottom: .15rem;
  }
  .att-table td:first-child::before { content: none; }
  .att-table input, .att-table select { font-size: 1rem; padding: .5rem; }
}

/* Per-user permission checkboxes */
.perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .35rem .9rem;
}
.perm-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  font-size: .86rem;
  cursor: pointer;
}
.perm-item:hover { border-color: var(--hr-primary); }
.perm-item input { margin: 0; flex-shrink: 0; }
.perm-item input:disabled + span { color: var(--hr-muted); }

/* الصندوق اللي بيفضى بعد بحث لازم يقول ليه — الفراغ الصامت بيتقري «البرنامج باظ». */
.empty-pick {
  padding: .8rem;
  text-align: center;
  color: var(--hr-muted);
  font-size: .85rem;
}

/* زرار الملاحظة — في الشريط العلوي لا عايم فوق الصفحة.
   كان `position: fixed` في الركن، فكان بيقعد فوق زرار «تسجيل» في الشاشات الطويلة
   والضغطة تروح للملاحظات وتضيّع الاستمارة. أي عنصر عايم فوق المحتوى بيعمل الكلام
   ده عاجلًا أو آجلًا — فشِلناه من فوق المحتوى خالص. */
.btn-note {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--hr-accent);
  color: #fff;
  border: none;
  text-decoration: none;
  padding: .3rem .8rem;
  border-radius: 30px;
  font-weight: 700;
  font-size: .82rem;
  transition: background .15s;
}
.btn-note:hover, .btn-note:focus {
  background: #0a5f5e;
  color: #fff;
}

@media (max-width: 768px) {
  .btn-note .note-label { display: none; }
  .btn-note { padding: .35rem .5rem; border-radius: 50%; }
}

@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .print-only { display: block !important; }
  .content { padding: 0; }
  .card-hr { border: none; }
  body { background: #fff; }
  /* الوعاء المنزلق يقتطع كل ما لا يظهر على الشاشة، فتخرج الورقة بأول عشرين سطرًا فقط. */
  .table-hr { max-height: none !important; overflow: visible !important; }
  .table-hr table thead th, .card-hr table thead th {
    position: static !important; box-shadow: none !important; }
  /* المطويّة المقفولة لا تطبع محتواها. الملاحظات المطويّة على الشاشة توفّر مساحة الكشف،
     لكن على الورق لا مساحة تُوفَّر ولا ضغطة تُفتح بها — فتُفرد كلها عند الطباعة، وإلا
     خرجت ورقة المرتب بلا أسماء المستبعَدين ولا سبب استبعادهم. */
  details > *:not(summary) { display: block !important; }
  details > summary { list-style: none; }
  details > summary::-webkit-details-marker { display: none; }
  /* قسايم الشهر كلها في ورقة واحدة: كل قسيمة صفحة. من غير الفاصل ده بتخرج القسايم
     ملزوقة ببعضها والورقة الواحدة فيها آخر نص قسيمة وأول نص اللي بعدها. */
  .slip-break { break-after: page; page-break-after: always; }

/* قسيمتين في الورقة: نفس القسيمة بالظبط، الخط والمسافات أصغر علشان الاتنين
   يقعدوا في ورقة A4 من غير ما يتقصّ سطر. */
.slip-half .payslip { padding: .7rem .9rem; }
.slip-half .payslip-co { font-size: 1rem; }
.slip-half .payslip-net { min-width: 130px; padding: .3rem .8rem; }
.slip-half .payslip-net-value { font-size: 1.1rem; }
.slip-half .payslip-head { padding-bottom: .5rem; margin-bottom: .55rem; }
.slip-half .payslip-meta { margin-bottom: .55rem; }
.slip-half .payslip-meta td { padding: .2rem .45rem; font-size: .76rem; }
.slip-half .payslip-col h4 { font-size: .82rem; padding: .22rem .5rem; }
.slip-half .payslip-col td { padding: .18rem .4rem; font-size: .76rem; }
.slip-half .payslip-note { margin-top: .5rem; font-size: .74rem; padding: .3rem .55rem; }
.slip-half .payslip-foot { margin-top: .55rem; padding-top: .45rem; }
.slip-half .payslip-sign { margin-top: 1.1rem; }
.slip-half .payslip-sign > div { font-size: .72rem; }
  .slip-page { break-inside: avoid; page-break-inside: avoid; }
}
/* على الشاشة: فاصل مرئي بين القسايم علشان المراجعة قبل الطباعة تبقى ممكنة */
.slip-page + .slip-page { margin-top: 1.6rem; padding-top: 1.6rem;
                          border-top: 2px dashed var(--hr-border); }

/* ---------------------------------------------------------------------------
   قسيمة المرتب
   مصمَّمة لتُطبع على A4 وتُسلَّم للموظف: عمودان متقابلان للاستحقاق والاستقطاع،
   والصافي بارز في الرأس لأنه أول ما يبحث عنه المستلم.
   --------------------------------------------------------------------------- */
.payslip {
  background: var(--hr-card);
  border: 1px solid var(--hr-border);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  max-width: 940px;
}

.payslip-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  border-bottom: 2px solid var(--hr-primary);
  padding-bottom: .8rem;
  margin-bottom: .9rem;
}
.payslip-co { font-size: 1.15rem; font-weight: 700; color: var(--hr-primary); }
.payslip-sub { font-size: .85rem; color: var(--hr-muted); margin-top: .15rem; }
.payslip-net {
  text-align: center;
  background: #eef5f9;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  padding: .45rem 1.1rem;
  min-width: 170px;
}
.payslip-net-label { font-size: .74rem; color: var(--hr-muted); }
.payslip-net-value { font-size: 1.35rem; font-weight: 700; color: var(--hr-success); }

.payslip-meta { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.payslip-meta td {
  border: 1px solid var(--hr-border);
  padding: .35rem .6rem;
  font-size: .86rem;
  width: 50%;
}
.payslip-meta td span:first-child {
  display: inline-block;
  min-width: 110px;
  color: var(--hr-muted);
  font-size: .78rem;
}

.payslip-cols { display: flex; gap: 1rem; flex-wrap: wrap; }
.payslip-col { flex: 1 1 300px; min-width: 280px; }
.payslip-col h4 {
  font-size: .92rem;
  font-weight: 700;
  background: #f3f6f8;
  border-inline-start: 3px solid var(--hr-primary);
  padding: .35rem .6rem;
  margin: 0 0 .4rem;
}
.payslip-col table { width: 100%; border-collapse: collapse; }
.payslip-col td {
  border-bottom: 1px solid var(--hr-border);
  padding: .32rem .5rem;
  font-size: .85rem;
}
.payslip-col td.num { text-align: start; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payslip-total td {
  font-weight: 700;
  background: #f7f9fa;
  border-top: 2px solid var(--hr-border);
  border-bottom: none;
}

.payslip-note {
  margin-top: .9rem;
  font-size: .82rem;
  background: #fdf6e7;
  border-inline-start: 3px solid var(--hr-warning);
  padding: .45rem .7rem;
  border-radius: 5px;
}

.payslip-foot { margin-top: 1rem; border-top: 1px solid var(--hr-border); padding-top: .7rem; }
.payslip-foot table { width: 100%; }
.payslip-foot td { font-size: .8rem; padding: .2rem .4rem; }
.payslip-foot td span:first-child {
  display: block;
  color: var(--hr-muted);
  font-size: .72rem;
}
.payslip-sign {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2.2rem;
  text-align: center;
}
.payslip-sign > div {
  flex: 1;
  border-top: 1px solid var(--hr-text);
  padding-top: .3rem;
  font-size: .8rem;
  color: var(--hr-muted);
}

@media print {
  .payslip { border: none; padding: 0; max-width: none; }
  .payslip-cols { display: flex !important; }
  .payslip-col { break-inside: avoid; }
}

@media (max-width: 640px) {
  .payslip-head { flex-direction: column; align-items: stretch; }
  .payslip-meta td { display: block; width: 100%; }
}

/* شريط الحفظ الثابت في شاشة الإعدادات.
   الشاشة طويلة عمدًا (58 إعدادًا)، وزر الحفظ في آخرها كان يعني تمريرًا كاملًا بعد كل
   تعديل — أو الأسوأ، مغادرة الصفحة دون حفظ لأن الزر لم يكن في المجال البصري. */
.settings-savebar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  background: var(--hr-card);
  border: 1px solid var(--hr-border);
  border-radius: 10px;
  padding: .7rem 1rem;
  margin: .9rem 0 1.4rem;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .07);
}

.set-chip { border-radius: 20px; }
.set-head { transition: color .15s; }
.set-head:hover { color: var(--hr-primary); }
.set-caret { font-size: .72rem; color: var(--hr-muted); }

/* بطاقات اكتمال البيانات في شاشة الاستيفاء */
.fill-card {
  display: block;
  background: var(--hr-card);
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  padding: .55rem .7rem;
  text-decoration: none;
  color: var(--hr-text);
  height: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.fill-card:hover { border-color: var(--hr-primary); color: var(--hr-text); }
.fill-card.active { border-color: var(--hr-primary); box-shadow: 0 0 0 2px rgba(31,95,139,.18); }
.fill-card.done { background: #f2f9f4; }
.fill-bar {
  height: 5px;
  background: #e9edf0;
  border-radius: 3px;
  margin: .35rem 0 .25rem;
  overflow: hidden;
}
.fill-bar > span {
  display: block;
  height: 100%;
  background: var(--hr-primary);
  border-radius: 3px;
}
.fill-card.done .fill-bar > span { background: var(--hr-success); }

/* قائمة داخل صندوق تنبيه: عشرات الأسطر يجب ألا تدفع محتوى الصفحة خارج الشاشة. */
.flash-list { margin: .45rem .9rem 0 0; padding: 0; list-style: none;
              max-height: 11rem; overflow-y: auto; }
.flash-list li { position: relative; padding: .2rem 1rem .2rem 0;
                 font-size: .86rem; line-height: 1.55; }
.flash-list li::before { content: "•"; position: absolute; right: 0; opacity: .55; }


/* ---------------------------------------------------------------------------
   شبكة الشهر للموقع — صف موظف وعمود يوم. 31 عمودًا في شاشة واحدة، فالخانة صغيرة
   واللون هو اللي بيتقري لا الحرف.
   --------------------------------------------------------------------------- */
.month-grid { border-collapse: collapse; font-size: .78rem; }
.month-grid th, .month-grid td { border: 1px solid var(--hr-border); padding: 0; text-align: center; }
.month-grid th { background: #f3f6f8; padding: .15rem .1rem; font-weight: 600; }
.month-grid .grid-daynum { font-size: .74rem; }
.month-grid .grid-dayname { font-size: .6rem; color: var(--hr-muted); }
.month-grid .grid-holiday-head { background: #fdecec; }
.month-grid .grid-name {
  text-align: start; padding: .2rem .45rem; min-width: 150px;
  position: sticky; inset-inline-start: 0; background: var(--hr-card); z-index: 2;
}
.month-grid .grid-name .att-sub { font-size: .68rem; }
.grid-cell { width: 22px; }
.grid-cell a { display: block; padding: .22rem 0; text-decoration: none; color: inherit; font-weight: 600; }
.grid-present  { background: #eef7f0; color: #1b7a3d; }
.grid-absent   { background: #fdecec; color: #b3261e; }
.grid-leave    { background: #eef3fb; color: #1f4e8c; }
.grid-mission  { background: #f2f0fb; color: #5033a0; }
.grid-rest     { background: #f4f5f6; color: var(--hr-muted); }
.grid-holiday  { background: #fdf6e7; color: #8a6100; }
.grid-warn     { background: #ffe9c7; color: #9a4a00; outline: 1px solid #d98324; }
.grid-missing  { background: #fff; color: #b3261e; }
.grid-assign   { background: #e8f4f1; color: #10614f; }

/* بحث الهيدر */
.quick-search { position: relative; flex: 0 1 380px; margin-inline-start: 1rem; }
.quick-search > i {
  position: absolute; inset-inline-start: .6rem; top: 50%; transform: translateY(-50%);
  color: var(--hr-muted); font-size: .85rem; pointer-events: none;
}
/* المسافة **منطقية** زي مكان الأيقونة بالظبط.
   كانت `padding: .38rem .7rem .38rem 2rem` — يعني الـ2rem على الشمال (خاصية
   مادية)، والأيقونة على `inset-inline-start` يعني اليمين في RTL. فالمسافة
   بتتفضّى في ناحية والأيقونة في الناحية التانية، والنص بيبدأ من تحتها. */
.quick-search input {
  width: 100%; padding-block: .38rem; padding-inline: 2rem .7rem; font-size: .85rem;
  border: 1px solid var(--hr-border); border-radius: 7px; background: var(--hr-card);
  color: var(--hr-text);
}
.quick-search input:focus { outline: 2px solid var(--hr-primary); outline-offset: -1px; }
.quick-results {
  position: absolute; inset-inline: 0; top: calc(100% + .3rem); z-index: 1200;
  background: var(--hr-card); border: 1px solid var(--hr-border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); max-height: 60vh; overflow-y: auto;
}
.qs-head {
  font-size: .7rem; color: var(--hr-muted); padding: .35rem .7rem .15rem;
  background: #f7f9fa; border-bottom: 1px solid var(--hr-border);
}
.qs-item {
  display: block; padding: .4rem .7rem; font-size: .85rem; text-decoration: none;
  color: var(--hr-text); border-bottom: 1px solid var(--hr-border);
}
.qs-item:hover, .qs-item.on { background: #eef5f9; }
.qs-code { font-variant-numeric: tabular-nums; color: var(--hr-muted); font-size: .78rem; }
.qs-sub { font-size: .72rem; color: var(--hr-muted); margin-inline-start: .4rem; }
.qs-tag {
  font-size: .68rem; background: #fdecec; color: #b3261e; border-radius: 3px;
  padding: 0 .25rem; margin-inline-start: .3rem;
}
.qs-empty { padding: .6rem .7rem; font-size: .82rem; color: var(--hr-muted); }
@media (max-width: 820px) { .quick-search { display: none; } }

/* إعداد الشركة غيّرته عن اللي البرنامج نزل بيه — علامة هادية تفرّق من غير ما تصرخ. */
.set-changed { position: relative; }
.set-changed > label::before {
  content: ""; display: inline-block; width: .45rem; height: .45rem;
  border-radius: 50%; background: var(--hr-primary); margin-inline-end: .35rem;
  vertical-align: middle;
}
.grid-exempt   { background: #f3f3f7; color: #4a4a68; }
.grid-future   { background: repeating-linear-gradient(45deg, #fafbfc, #fafbfc 3px, #f1f3f5 3px, #f1f3f5 6px); }
.grid-outside  { background: repeating-linear-gradient(45deg, #f6f2f2, #f6f2f2 3px, #ece3e3 3px, #ece3e3 6px); }
.grid-key {
  display: inline-block; min-width: 1.25rem; text-align: center; border-radius: 3px;
  padding: 0 .2rem; border: 1px solid var(--hr-border);
}
@media print {
  .month-grid { font-size: .62rem; }
  .month-grid .grid-name { min-width: 110px; position: static; }
  .grid-cell { width: 15px; }
}

/* مفتاح «بموظف ولا بموقع». الشاشتين موجودين والاتنين في القائمة، بس اللي واقف في
   واحدة مايعرفش إن التانية موجودة — فالمفتاح ده هو الطريق بينهم لا شاشة تالتة. */
.viewswitch {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin: 0 0 .75rem; padding: .45rem .6rem;
  background: var(--hr-surface, #f6f8f9);
  border: 1px solid var(--hr-border, #dde3e6); border-radius: .5rem;
}
.viewswitch-label { font-size: .8rem; color: var(--hr-muted); margin-inline-end: .2rem; }
@media print { .viewswitch { display: none; } }

/* الصورة مقابل الأصل في مسوغات التعيين. اللون مش زينة: الصورة مابتنفعش في التفتيش
   ومش محسوبة في نسبة الاكتمال، فلازم تتقري بنظرة مش بقراءة العمود. (بلاغ #65) */
.doc-copy { color: var(--hr-warn, #c8871b); }
.doc-copy-sel { border-color: var(--hr-warn, #c8871b); background: #fff8ec; }

/* ترويسة المطبوعات: اللوجو جنب اسم الشركة. الارتفاع محدود علشان لوجو كبير
   مايزقّش باقي الورقة لصفحة تانية — الورقة دي بتتطبع مش بتتفرّج عليها. */
.letterhead { display: flex; align-items: center; gap: .55rem; }
.letterhead-logo { max-height: 46px; max-width: 150px; object-fit: contain; }
@media print { .letterhead-logo { max-height: 40px; } }

/* «مين غيّر ده». المعلومة دي كانت موجودة في سجل النظام من زمان، بس اللي واقف
   قدام رقم غريب كان لازم يسيب شاشته ويروح يدوّر — فمحدش كان بيعمل كده.
   الحجم صغير عن قصد: دي معلومة بتتقري لما تتسأل، مش بتنافس محتوى الشاشة. */
/* عمود واحد لا صف: القطعة دي بتقع جوه خلية جدول ضيقة، والصف كان بيكسر الاسم
   عن تاريخه على سطرين — «Ahmed» في سطر و«feky» في اللي بعده. السطر لكل حدث
   بيتقرا من أول نظرة. */
.who-line {
  display: flex; flex-direction: column; align-items: flex-start; gap: .12rem;
  margin-top: .35rem; font-size: .7rem; color: var(--hr-muted); line-height: 1.5;
}
.who-bit {
  display: inline-flex; align-items: baseline; gap: .3rem;
  white-space: nowrap;   /* الاسم وتاريخه حاجة واحدة مابتتكسرش */
}
.who-bit strong { color: var(--hr-text); font-weight: 600; }
.who-bit i { opacity: .55; font-size: .68rem; }
/* التعديل بلون مختلف: «اتعمل» و«اتعدّل» مش نفس الوزن لما تكون بتراجع رقم. */
.who-edited strong { color: var(--hr-warn, #c8871b); }
.who-more summary {
  cursor: pointer; color: var(--hr-primary); font-size: .72rem;
  list-style: none; user-select: none;
}
.who-more summary::-webkit-details-marker { display: none; }
.who-more summary::before { content: "\f1da"; font-family: "Font Awesome 6 Free";
  font-weight: 900; margin-inline-end: .3rem; opacity: .6; }
.who-more[open] summary { margin-bottom: .3rem; }
.who-table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.who-table td {
  padding: .18rem .5rem; border-bottom: 1px solid var(--hr-border, #e7ecef);
  vertical-align: top;
}
.who-table tr:last-child td { border-bottom: 0; }
.who-detail { color: var(--hr-muted); }
@media print { .who-line { display: none; } }