:root{
  --bg:#0A0A0B;
  --header:#050506;
  --panel:#141416;
  --panel-2:#1A1A1D;
  --input:#101012;
  --line:#29292E;
  --line-strong:#38383F;
  --text:#F4F4F5;
  --text-2:#A1A1AA;
  --text-3:#71717A;
  --gold:#F4C543;
  --gold-hover:#FFD75E;
  --gold-soft:rgba(244,197,67,.13);
  --gold-line:rgba(244,197,67,.36);
  --ok:#22C55E;
  --ok-soft:rgba(34,197,94,.12);
  --danger:#EF4444;
  --danger-soft:rgba(239,68,68,.12);
  --r-sm:8px;
  --r-md:10px;
  --r-lg:14px;
  --font:"Cairo","Segoe UI","Noto Sans Arabic",Tahoma,sans-serif;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14.5px;
  line-height:1.6;
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
input,select,textarea,button{font-family:inherit;font-size:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.ltr{direction:ltr;text-align:right;unicode-bidi:isolate}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- header ---------------- */
.hdr{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:14px;
  height:60px;padding:0 clamp(12px,2.5vw,26px);
  background:var(--header);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand img{height:34px;width:auto;display:block;background:transparent}
.brand-sep{width:1px;height:26px;background:var(--line-strong)}
.brand-txt{min-width:0}
.brand-txt h1{margin:0;font-size:14.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.brand-txt p{margin:0;font-size:11.5px;color:var(--text-3);white-space:nowrap}
.hdr-grow{flex:1}
.role{
  padding:5px 11px;border-radius:var(--r-sm);
  font-size:11.5px;font-weight:600;
  color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line);
  white-space:nowrap;
}
.save-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 11px;border-radius:var(--r-sm);
  font-size:11.5px;font-weight:600;
  border:1px solid var(--line-strong);color:var(--text-2);background:var(--panel);
  white-space:nowrap;
}
.save-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.save-chip.is-saved{color:var(--ok);border-color:rgba(34,197,94,.3)}
.save-chip.is-saving{color:var(--gold);border-color:var(--gold-line)}
.save-chip.is-dirty{color:var(--gold);border-color:var(--gold-line)}
.save-chip.is-error{color:var(--danger);border-color:rgba(239,68,68,.35)}

/* ---------------- nav ---------------- */
.nav{
  position:sticky;top:60px;z-index:45;
  display:flex;gap:4px;
  padding:8px clamp(12px,2.5vw,26px);
  background:var(--header);
  border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none}
.nav button{
  padding:7px 14px;border-radius:var(--r-sm);
  background:transparent;border:1px solid transparent;
  color:var(--text-3);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:color .12s,background .12s,border-color .12s;
}
.nav button:hover{color:var(--text);background:var(--panel)}
.nav button.active{color:var(--gold);background:var(--gold-soft);border-color:var(--gold-line)}

/* ---------------- layout ---------------- */
.wrap{max-width:1360px;margin:0 auto;padding:20px clamp(12px,2.5vw,26px) 60px}
.view{display:none}
.view.active{display:block}
/* لحد ما شاشة الحسابات (SPA) تحمّل بياناتها الأولى وتطبّق التبويب الصح،
   كل الأقسام بتتخفي (حتى اللي عليها active الافتراضي في الـHTML) عشان
   مفيش شاشة غلط أو جدول فاضي يبان لحظة قبل ما JS يشتغل — شوف #finLoading
   في finance_body.php. مقصورة على #financeMain بس (مش .wrap عمومًا)
   عشان ما تأثّرش على صفحات تانية بتستخدم نفس كلاس .wrap (شاشة الموارد
   البشرية وشاشات الإعدادات المفردة). */
#financeMain:not(.is-ready) > .view{display:none!important}
.block{margin-bottom:22px}
.block-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.block-head h2{margin:0;font-size:15px;font-weight:700}
.block-head .muted{margin:0;font-size:12.5px;color:var(--text-3)}
.grow{flex:1}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:18px;
}
.panel + .panel{margin-top:14px}
.panel-tight{padding:14px}

/* ---------------- stats ---------------- */
.stats{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(138px,1fr))}
.stat{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-md);padding:10px 12px;
}
.stat span{display:block;font-size:11px;color:var(--text-3);margin-bottom:4px}
.stat b{font-size:16px;font-weight:700;letter-spacing:.2px}
.stat b small{font-size:11px;color:var(--text-3);font-weight:500}
.stat.is-gold b{color:var(--gold)}
.stat.is-ok b{color:var(--ok)}
.stat.is-warn b{color:var(--danger)}
/* الأرقام الثلاثة الأهم في ملخّص الشهر: إطار أوضح وخط أكبر شوية عشان
   يتقروا كمجموعة واحدة من غير ما الكارت يكبر. */
.stat.is-priority{border-color:var(--line-strong);background:var(--panel)}
.stat.is-priority b{font-size:19px}
.stat.is-priority span{color:var(--text-2);font-weight:600}
/* «آخر حفظ» معلومة مساعدة مش رقم مالي — أهدى وأصغر. */
.stat.is-minor{background:transparent}
.stat.is-minor b{font-size:13px;font-weight:600;color:var(--text-2)}
/* وسم انتهاء الخدمة + حالة التسوية — مدمج وواضح، بيشتغل جنب الاسم في
   الجدول وفي الكارت الموبايل من غير ما يكسر السطر. */
.exit-tag{
  display:inline-block;margin-inline-start:6px;padding:2px 7px;border-radius:999px;
  font-size:10.5px;font-weight:600;line-height:1.7;white-space:nowrap;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text-2);
}
.exit-tag.is-pending{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold)}
/* مبلغ مبدئي: النظام حسبه، والحسابات لسه ما راجعتوش ولا حفظت تسوية. */
.exit-tag.is-preview{background:rgba(244,197,67,.10);border-color:var(--gold-line);
  color:var(--gold);border-style:dashed}
@media (max-width:720px){ .exit-tag{margin-inline-start:0;margin-top:4px} }
/* حالة الموظف في الجدول/الكارت: وسم واحد مدمج (الأهم) بيفتح كل التفاصيل والإجراء — بدل ما كل حالة وسم كبير جنب الاسم. */
button.rs-chip{
  display:inline-flex;align-items:center;gap:4px;margin-inline-start:6px;padding:2px 8px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:10.5px;font-weight:700;line-height:1.7;white-space:nowrap;vertical-align:middle;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text-2);
}
button.rs-chip.is-warn{background:var(--danger-soft);border-color:rgba(239,68,68,.32);color:var(--danger)}
button.rs-chip.is-wait{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold)}
button.rs-chip:hover{filter:brightness(1.15)}
button.rs-chip i{font-style:normal;opacity:.75;font-weight:600}
@media (max-width:720px){ button.rs-chip{margin-inline-start:0;margin-top:4px} }
/* نافذة «حالة الموظف» + بطاقات «المطلوب منك» في مراجعة الشروط */
.rs-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0;background:var(--panel-2)}
.rs-card>b{display:block;margin-bottom:6px}
.rs-item{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:6px 0;border-top:1px dashed var(--line)}
.rs-item:first-of-type{border-top:0}
.rs-item .rs-txt{flex:1 1 220px;min-width:0}
.rs-item .rs-txt small{display:block;color:var(--text-2);font-weight:400;margin-top:2px}
.rs-item.is-ctx .rs-txt{color:var(--text-2)}
.rs-days{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.rs-days a{padding:1px 7px;border-radius:999px;border:1px solid var(--line);font-size:11px;color:var(--text-2);text-decoration:none}

/* ---------------- controls ---------------- */
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--panel-2);color:var(--text);
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s,opacity .12s;
}
.btn:hover:not(:disabled){background:#232327;border-color:#45454d}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn-primary{background:var(--gold);border-color:var(--gold);color:#191307}
.btn-primary:hover:not(:disabled){background:var(--gold-hover);border-color:var(--gold-hover)}
.btn-gold-ghost{background:transparent;border-color:var(--gold-line);color:var(--gold)}
.btn-gold-ghost:hover:not(:disabled){background:var(--gold-soft);border-color:var(--gold)}
.btn-quiet{background:transparent;border-color:var(--line-strong);color:var(--text-2)}
.btn-quiet:hover:not(:disabled){background:var(--panel-2);color:var(--text)}
.btn-danger{background:transparent;border-color:rgba(239,68,68,.4);color:var(--danger)}
.btn-danger:hover:not(:disabled){background:var(--danger-soft)}
.btn-sm{padding:6px 11px;font-size:12px}
.btn-icon{width:32px;height:32px;padding:0;font-size:15px;line-height:1}
/* text-overflow:ellipsis مبتشتغلش على .btn نفسه لأنه flex container —
   لازم عنصر block جواه. مستخدمة بس في زرار التسوية (شوف settleActionButton
   في finance-app.js) عشان نصوصه بتتغيّر طولها بحالته. */
.btn-label{display:block;min-width:0;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}

.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > label,.field-label{font-size:12.5px;font-weight:600;color:var(--text-2)}
.hint{font-size:11.5px;color:var(--text-3)}
.inp{
  width:100%;padding:10px 12px;
  background:var(--input);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  color:var(--text);transition:border-color .12s,background .12s;
}
.inp::placeholder{color:#52525b}
.inp:hover{border-color:#45454d}
.inp:focus{outline:none;border-color:var(--gold);background:#0c0c0e}
.inp[type=number]{-moz-appearance:textfield}
.inp[type=number]::-webkit-outer-spin-button,.inp[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.inp.err{border-color:var(--danger)}
.inp:disabled{background:var(--panel-2);color:var(--text-3);border-style:dashed;cursor:not-allowed;opacity:.7}
.err-msg{font-size:11.5px;color:var(--danger);min-height:0}
select.inp{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:left 14px top 55%,left 9px top 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-left:32px;line-height:1.4;text-overflow:ellipsis}
/* قائمة الاختيارات المنسدلة: لازم ألوان صريحة وإلا بتظهر فاضية على Safari/Mac */
select.inp option,select.inp optgroup{background-color:#1A1A1D;color:#F4F4F5;font-family:var(--font);padding:8px}
input[type=date].inp,input[type=month].inp{min-height:44px}

/* ---------------- عنصر وقت 12 ساعة (مربوط بمربّع واحد) ---------------- */
.time12{
  display:inline-flex;align-items:stretch;width:100%;
  background:var(--input);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  transition:border-color .12s,background .12s;overflow:hidden;
}
.time12:focus-within{border-color:var(--gold);background:#0c0c0e}
.time12-txt{
  flex:1;min-width:0;border:none;background:transparent;color:var(--text);
  padding:10px 10px;font-size:13px;font-variant-numeric:tabular-nums;text-align:center;
}
.time12-txt:focus{outline:none}
.time12-txt::placeholder{color:#52525b}
.time12-ap{
  flex:0 0 auto;border:none;border-inline-start:1px solid var(--line-strong);
  background:var(--panel-2);color:var(--text-2);font-size:12px;font-weight:700;
  padding:0 12px;cursor:pointer;transition:color .12s,background .12s;
}
.time12-ap:hover:not(:disabled){color:var(--gold);background:var(--gold-soft)}
.time12-ap:disabled{cursor:default;opacity:.5}
.time12.is-empty{border-style:dashed}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.55);cursor:pointer}

.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grid-2{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.mini-lbl{display:block;font-size:11.5px;color:var(--text-3);margin-bottom:5px}

.pill{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  padding:5px 11px;border-radius:var(--r-sm);
  background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold);
  font-size:12px;font-weight:700;
}

/* ---------------- رؤى التحليلات التلقائية ---------------- */
.insight-row{
  display:flex;flex-direction:column;gap:3px;
  padding:11px 13px;border-radius:var(--r-sm);
  background:var(--panel-2);border:1px solid var(--line);
  border-inline-start:3px solid var(--line-strong);
}
.insight-row + .insight-row{margin-top:8px}
.insight-row b{font-size:13px;font-weight:700}
.insight-row span{font-size:12px;color:var(--text-2)}
.insight-row.is-ok{border-inline-start-color:var(--ok)}
.insight-row.is-warn{border-inline-start-color:var(--danger)}
.search{position:relative;flex:1;min-width:190px;max-width:340px}
.search .inp{padding-right:34px}
.search i{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--text-3);font-style:normal;font-size:13px}

.toggle{display:inline-flex;gap:6px;flex-wrap:wrap}
.toggle button{
  padding:7px 12px;border-radius:var(--r-sm);
  background:transparent;border:1px solid var(--line-strong);color:var(--text-3);
  font-size:12.5px;font-weight:600;cursor:pointer;
}
.toggle button.on{color:var(--gold);border-color:var(--gold-line);background:var(--gold-soft)}

/* ---------------- table ---------------- */
.tbl-wrap{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);overflow:auto;max-height:70vh;
}
.tbl-wrap::-webkit-scrollbar{width:9px;height:9px}
.tbl-wrap::-webkit-scrollbar-track{background:#0d0d0f}
.tbl-wrap::-webkit-scrollbar-thumb{background:#2f2f36;border-radius:6px}
table{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
thead th{
  position:sticky;top:0;z-index:2;
  background:#0F0F11;color:var(--text-3);
  font-size:11.5px;font-weight:700;text-align:right;
  padding:11px 13px;border-bottom:1px solid var(--line-strong);
}
tbody td{padding:11px 13px;border-bottom:1px solid var(--line);color:var(--text-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(255,255,255,.022)}
td.nm{color:var(--text);font-weight:600}
td.acts{white-space:nowrap}
/* التلات أزرار (تعديل/كشف الراتب/التسوية) بنفس المقاس بالظبط — عرض
   وارتفاع سوا، بس مقاس مضغوط قريب من حجم النص نفسه (مش 120px التجربة
   الأولى اللي طلعت كبيرة بصريًا). 88px اتقاس فعليًا: أطول نص لازم يبان
   كامل بدون قص (كشف الراتب / تمت التسوية، كلاهما محتاج ~85-87px جوّه
   الحشو المخفّض تحت) بيسعه بالظبط + هامش بسيط. حشو مخفّض (5px 10px بدل
   6px 11px الافتراضي) بيقلل الارتفاع شوية كمان (34.5px بدل 36.5px) من
   غير ما يضيّق منطقة اللمس فعليًا. حالات النص الطويل الاستثنائية (تسوية
   مطلوبة/تحتاج إعادة اعتماد) بتتقص بـ...‎ من غير ما تكبّر الصندوق (شوف
   .btn-label). */
td.acts .btn{margin-left:6px;width:88px;padding:5px 10px}

.tag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid}
.tag-ok{color:var(--ok);background:var(--ok-soft);border-color:rgba(34,197,94,.3)}
.tag-wait{color:var(--text-3);background:rgba(255,255,255,.04);border-color:var(--line-strong)}
.tag-danger{color:var(--danger);background:var(--danger-soft);border-color:rgba(239,68,68,.32)}
.tag-off{color:var(--danger);background:var(--danger-soft);border-color:rgba(239,68,68,.3)}
.tag-gold{color:var(--gold);background:var(--gold-soft);border-color:var(--gold-line)}

.empty{padding:44px 18px;text-align:center;color:var(--text-3);font-size:13px}
.empty b{display:block;color:var(--text-2);font-size:14px;margin-bottom:5px;font-weight:600}

/* ---------------- mobile cards ---------------- */
.cards{display:none}
.ecard{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px;margin-bottom:10px;
}
.ecard-top{display:flex;align-items:center;gap:9px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.ecard-top .nm{flex:1;font-weight:700;font-size:14px;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis}
.ecard-ph{font-size:11.5px;color:var(--text-3)}
.ecard-body{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;font-size:12.5px}
.ecard-body div{display:flex;justify-content:space-between;gap:8px}
.ecard-body span:first-child{color:var(--text-3)}
.ecard-body span:last-child{font-weight:600;color:var(--text-2)}
.ecard-body div.full{grid-column:1/-1}
.ecard-acts{display:flex;gap:8px;margin-top:12px;justify-content:center}
/* flex:1 كان بيمطّط التلات أزرار على عرض الكارت كله — مطلوب مقاس مضغوط
   زي الديسكتوب (88px) بدل التمدد. flex:0 1 88px (مش width ثابت) عشان
   على أضيق عرض كارت (320px) لو المساحة المتاحة أقل من 3×88px+الفراغات،
   الثلاثة ينكمشوا بالتساوي مع بعض تلقائيًا (نفس معامل الانكماش لكل
   واحد) بدل ما يعملوا overflow — وبرضه بيفضلوا متساوين في العرض بعد
   الانكماش. min-width:0 لازم عشان الانكماش يشتغل أصلًا (min-width:auto
   الافتراضي بيمنعه تحت عرض النص). */
.ecard-acts .btn{flex:0 1 88px;min-width:0;padding:5px 10px}

/* ---------------- archive ---------------- */
.mlist{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:15px}
.mcard.current{border-color:var(--gold-line)}
.mcard-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.mcard-h b{font-size:14.5px;font-weight:700}
.mcard-rows{font-size:12.5px;color:var(--text-3);display:grid;gap:5px;margin-bottom:12px}
.mcard-rows div{display:flex;justify-content:space-between;gap:10px}
.mcard-rows span:last-child{color:var(--text-2);font-weight:600}
.mcard-acts{display:flex;gap:7px;flex-wrap:wrap}

/* ---------------- deductions ---------------- */
.ded-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.ded{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--input);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;
}
.ded-main{flex:1;min-width:0}
.ded-amt{font-weight:700;color:var(--danger);font-size:13.5px}
.ded-rsn{font-size:12.5px;color:var(--text);margin-top:1px}
.ded-meta{font-size:11.5px;color:var(--text-3);margin-top:2px}
.ded-acts{display:flex;gap:5px}
.ded-empty{font-size:12.5px;color:var(--text-3);padding:12px;text-align:center;border:1px dashed var(--line-strong);border-radius:var(--r-md)}
/* أنواع الحركات في نافذة الموظف — عرض بس: مكافأة أخضر · خصم أحمر · سحب محايد (مش خصم) */
.ded-amt.plus{color:var(--ok)}
.ded-amt.is-wd{color:var(--text)}
.ded-amt .tag{margin-left:6px;vertical-align:1px}
.tag-wd{color:var(--text-2);background:rgba(255,255,255,.06);border-color:var(--line-strong)}
.btn-ok-ghost{background:transparent;border-color:rgba(34,197,94,.4);color:var(--ok)}
.btn-ok-ghost:hover:not(:disabled){background:var(--ok-soft)}
.btn-wd-ghost{background:transparent;border-color:var(--line-strong);color:var(--text)}
.btn-wd-ghost:hover:not(:disabled){background:var(--panel-2)}

/* ---------------- modal ---------------- */
.mask{
  position:fixed;inset:0;z-index:100;
  display:none;align-items:center;justify-content:center;padding:14px;
  background:rgba(0,0,0,.72);
}
.mask.open{display:flex}
.modal{
  width:min(760px,100%);max-height:92vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  box-shadow:0 18px 50px rgba(0,0,0,.6);
}
.modal.sm{width:min(480px,100%)}
.modal-h{
  position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;
  padding:15px 18px;background:var(--panel);border-bottom:1px solid var(--line);
}
.modal-h h3{margin:0;font-size:15px;font-weight:700;flex:1}
.modal-b{padding:18px}
.modal-f{
  position:sticky;bottom:0;display:flex;gap:9px;flex-wrap:wrap;
  padding:14px 18px;background:var(--panel);border-top:1px solid var(--line);
}
.fset{border:1px solid var(--line);border-radius:var(--r-md);padding:14px;margin-bottom:14px;background:var(--panel-2)}
.fset > h4{margin:0 0 12px;font-size:12.5px;font-weight:700;color:var(--gold)}
.info-rows{display:grid;gap:8px;font-size:13px}
.info-rows div{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.info-rows div:last-child{border-bottom:none;padding-bottom:0}
.info-rows span:first-child{color:var(--text-3)}
.info-rows span:last-child{font-weight:600}
.note{
  display:flex;gap:9px;padding:11px 13px;border-radius:var(--r-md);
  background:var(--gold-soft);border:1px solid var(--gold-line);
  color:var(--text-2);font-size:12.5px;margin-bottom:14px;
}
.note b{color:var(--gold)}
.note.warn{background:var(--danger-soft);border-color:rgba(239,68,68,.35)}
.note.warn b{color:var(--danger)}

/* ---------------- toasts ---------------- */
.ordercell{display:flex;gap:4px;align-items:center}
.ordernum{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;
  border-radius:var(--r-sm);background:var(--gold-soft);border:1px solid var(--gold-line);
  color:var(--gold);font-size:12px;font-weight:700;flex:none}
.btn-move{width:28px;height:28px;padding:0;font-size:11px;line-height:1}
.toasts{position:fixed;left:14px;bottom:14px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{
  min-width:220px;max-width:340px;padding:11px 14px;border-radius:var(--r-md);
  background:var(--panel-2);border:1px solid var(--line-strong);border-right:3px solid var(--gold);
  font-size:13px;box-shadow:0 12px 30px rgba(0,0,0,.5);
  animation:tin .16s ease-out;
}
.toast.ok{border-right-color:var(--ok)}
.toast.err{border-right-color:var(--danger)}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .tbl-wrap{display:none}
  .cards{display:block}
  .wrap{padding:16px 12px 70px}
  .hdr{height:56px;gap:10px}
  .brand img{height:28px}
  .brand-sep,.brand-txt p{display:none}
  .nav{top:56px}
  .modal-b{padding:14px}
  .modal-h,.modal-f{padding:13px 14px}
  .toasts{left:10px;right:10px}
  .toast{max-width:none}
  .modal-f .btn{flex:1}
  .search{max-width:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ---------------- إضافات نسخة الحسابات ---------------- */
.acc-col{background:rgba(244,197,67,.045)}
.mini-inp{width:102px;padding:6px 8px;background:var(--input);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);color:var(--text);font-size:12.5px;text-align:center}
.mini-inp:focus{outline:none;border-color:var(--gold)}
.mini-inp::-webkit-outer-spin-button,.mini-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.chk{width:17px;height:17px;accent-color:var(--gold);cursor:pointer}
tbody tr.sel td{background:rgba(244,197,67,.06)}
td.minus{color:var(--danger)}
td.plus{color:var(--ok)}
td.net{color:var(--gold);font-weight:700;font-size:13.5px}
.ecard-body span.minus{color:var(--danger)}
.ecard-body span.plus{color:var(--ok)}
.ecard-body span.net{color:var(--gold);font-weight:700}
.muted-txt{color:var(--text-3)}
.fs-title{margin:0 0 12px;font-size:12.5px;font-weight:700;color:var(--gold)}
.actionbar{position:sticky;bottom:0;z-index:30;display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-top:12px;padding:12px 14px;background:rgba(5,5,6,.95);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:var(--r-lg)}
.actionbar .cnt{font-size:12.5px;color:var(--text-3)}
.actionbar .cnt b{color:var(--gold)}
.barrow{display:grid;grid-template-columns:160px 1fr auto;gap:10px;align-items:center;padding:6px 0;font-size:12.5px}
.barlbl{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bartrack{height:10px;background:var(--input);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.barfill{height:100%;background:var(--gold);border-radius:999px}
.barfill.red{background:var(--danger)}
.barfill.dim{background:#3f3f46}
.barval{color:var(--text-3);font-size:12px;white-space:nowrap}
.dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-wait{color:var(--text-3)}.st-rdy{color:var(--gold)}.st-done{color:var(--ok)}.st-err{color:var(--danger)}
.preview{background:#060607;border:1px solid var(--line);border-radius:var(--r-md);padding:10px;text-align:center}
.preview img{max-width:100%;border-radius:8px}
/* رأس الجدول الثابت: خلفية معتمة صريحة وطبقة أعلى من أعمدة الجسم الثابتة
   (كانت أوطى منها z-index، فصفوف التمرير الأفقي كانت "تخترق" الرأس بصريًا
   عند تقاطع التثبيت الرأسي مع الأفقي — ده سبب إحساس "الشفافية"). */
.payroll thead th{background:var(--header);z-index:8;border-bottom:1px solid var(--gold-line)}
/* تمرير الماوس على أي جزء من الصف بيلوّن الصف كله بنفس الخلفية — بما فيها
   الأعمدة المثبّتة (الاسم/الإجراءات) اللي محتاجة خلفية معتمة صريحة أصلًا
   عشان التثبيت. القاعدة العامة هنا، وقواعد الأعمدة المثبّتة تحت بتاخد
   نفس القيمة بالظبط عشان الأولوية (specificity) بتاعة nth-child/acts
   ماتكسرش التوحيد. --panel-2 هو نفس رمز التمرير المستخدم فعلًا في
   جداول تانية بالنظام (exc-table)، مفيش لون جديد اتخترع. */
.payroll tbody tr:hover td{background:var(--panel-2)}
/* تثبيت عمود التحديد واسم الموظف عند التمرير الأفقي */
.payroll th:nth-child(1),.payroll td:nth-child(1){position:sticky;right:0;z-index:3;
  width:46px;min-width:46px;background:var(--panel)}
.payroll th:nth-child(2),.payroll td:nth-child(2){position:sticky;right:46px;z-index:3;
  min-width:150px;background:var(--panel);box-shadow:-1px 0 0 var(--line)}
.payroll thead th:nth-child(1),.payroll thead th:nth-child(2){background:var(--header);z-index:9}
.payroll tbody tr:hover td:nth-child(1),.payroll tbody tr:hover td:nth-child(2){background:var(--panel-2)}
.payroll tbody tr.sel td:nth-child(1),.payroll tbody tr.sel td:nth-child(2){background:#1a1811}
@media (max-width:900px){.payroll th:nth-child(1),.payroll td:nth-child(1),
  .payroll th:nth-child(2),.payroll td:nth-child(2){position:static}}
/* عمود الإجراءات آخر عمود في جدول عرضه 3000px+ — كان بيتطلب تمرير أفقي
   كامل عشان يبان، فكان بيبان منه «تعديل» بس. بنثبّته على طرف السطر زي ما
   عمود الاسم متثبّت على الطرف التاني، من غير تغيير في عرض الأعمدة ولا
   ارتفاع الصف ولا الشكل المضغوط ذو السطر الواحد. */
.payroll th:last-child,.payroll td.acts{
  position:sticky;left:0;z-index:3;
  background:var(--panel);box-shadow:1px 0 0 var(--line)}
.payroll thead th:last-child{background:var(--header);z-index:9}
.payroll tbody tr:hover td.acts{background:var(--panel-2)}
.payroll tbody tr.sel td.acts{background:#1a1811}
@media (max-width:900px){
  .payroll th:last-child,.payroll td.acts{position:static;box-shadow:none}}

/* أعمدة البيانات (الأرقام/القيم) في جدول الحسابات بتتوسّط تحت رأسها —
   قاعدة واحدة على الجدول كله بدل تكرارها عمود عمود. الاسم والتحديد
   والإجراءات مش بيانات رقمية، فبيفضلوا على محاذاتهم الطبيعية (يمين). */
.payroll thead th{text-align:center}
.payroll tbody td{text-align:center}
.payroll th:nth-child(1),.payroll td:nth-child(1),
.payroll th:nth-child(2),.payroll td:nth-child(2),
.payroll th:last-child,.payroll td.acts{text-align:right}
/* .ltr بتفرض يمين لأغراض اتجاه الأرقام في جداول تانية — هنا خانة
   الموبايل لازم تتوسّط زي باقي أعمدة البيانات، فبنكسبها التخصيص جوّه
   .payroll بس، من غير ما نلمس .ltr نفسها ولا أي استخدام تاني ليها. */
.payroll tbody td.ltr{text-align:center}
/* ===== سياسة أيام الراحة + نافذة التسوية ===== */
/* جدول الشرائح في الإعدادات — عرض بس، بيتولّد من نفس دالة السياسة
   في السيرفر (settlement_rest_policy_tiers) عشان اللي المستخدم شايفه
   يبقى هو اللي بيتحسب فعلًا، مش نسخة تانية من القاعدة. */
.tierbox{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--input);
  overflow:hidden;font-size:12.5px}
.tierbox div{display:flex;justify-content:space-between;gap:12px;padding:7px 11px;
  border-bottom:1px solid var(--line)}
.tierbox div:last-child{border-bottom:none}
.tierbox span:first-child{color:var(--text-3)}
.tierbox span:last-child{font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums}
.tierbox .is-zero span:last-child{color:var(--text-3);font-weight:600}

.modal-settle{width:min(680px,100%)}
/* ترويسة الموظف — الاسم والحالة أول حاجة تتقري، قبل أي رقم. */
.st-head{border:1px solid var(--gold-line);border-radius:var(--r-md);padding:14px;
  margin-bottom:14px;background:var(--gold-soft)}
.st-head-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.st-name{flex:1;min-width:0;font-size:16px;font-weight:700;color:var(--text)}
.st-pill{flex:0 0 auto;padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:700;
  border:1px solid var(--line-strong);background:var(--panel);color:var(--text-2);white-space:nowrap}
.st-pill.is-pending{color:var(--gold);background:var(--gold-soft);border-color:var(--gold-line)}
.st-pill.is-closed{color:#86efac;background:var(--ok-soft);border-color:rgba(34,197,94,.35)}

/* الأقسام مرقّمة — الرقم مكتوب جوّه الترويسة نفسها في الـHTML (attr()
   بتقرا من العنصر نفسه بس، فمكانش ينفع نجيبه من data-n اللي على الأب). */
.st-sec > h4 i{font-style:normal;color:var(--text-3)}
.st-more{margin-top:10px}
.st-more > summary{cursor:pointer;font-size:12.5px;color:var(--text-3);
  padding:6px 0;list-style:none;user-select:none}
.st-more > summary::-webkit-details-marker{display:none}
.st-more > summary::before{content:"▾ ";display:inline-block;transition:transform .12s}
.st-more[open] > summary::before{content:"▴ "}
.st-more > summary:hover{color:var(--gold)}
.st-more .info-rows{margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.st-sum{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-strong)}
.st-sum span:last-child{color:var(--text);font-size:14px}

/* بطاقة الاقتراح — شكل مميّز عن الأرقام المعتمدة عشان محدش يخلط بين
   «النظام بيقترح» و«الحسابات اعتمدت». */
.st-reco{border:1px dashed var(--gold-line);border-radius:var(--r-sm);
  padding:13px;background:rgba(244,197,67,.05)}
.st-reco-n{font-size:15px;font-weight:700;color:var(--gold);margin-bottom:4px}
.st-reco-why{font-size:12px;color:var(--text-3);line-height:1.8}
.st-reco-amt{font-size:13px;font-weight:600;color:var(--text-2);margin-top:6px}
.st-reco-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.st-reco-state{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--text-2)}
.st-reco-state b{color:var(--text)}
.st-conflict{margin-top:11px;border-color:rgba(239,68,68,.4);background:var(--danger-soft);
  color:#fca5a5}
/* نفس الصندوق بعد ما الحسابات تختار عدد مسموح — بيقول إيه اللي هيحصل
   بعد الحفظ، من غير ما يكون تحذير أحمر تاني. */
.st-conflict.is-ok{border-color:var(--gold-line);background:var(--gold-soft);color:var(--gold)}
.st-restedit{margin-top:11px}
/* .field بتحطّ display:flex، وده بيتغلب على السلوك الافتراضي لـ[hidden]
   (نفس الأولوية، و.field متأخّرة في الملف) — يعني عنصر .field عليه hidden
   كان بيفضل ظاهر.
   النطاق مقصور على نافذة التسوية عن قصد: العنصرين الوحيدين اللي الميزة
   دي بتخفيهم بالخاصية دي هما #stRestEdit و #stReopenBox، والاتنين جوّه
   .modal-settle. فيه .field تالتة عليها hidden في شاشة الموارد البشرية
   (#empStartWrap في hr_body.php) — دي مشكلة قائمة من قبل الميزة دي
   ومالهاش علاقة بالتسوية، فمابنغيّرش سلوك .field العام هنا عشانها. */
.modal-settle .field[hidden]{display:none}
/* خطأ مرتبط بحقل بعينه — بيظهر جنب الحقل نفسه مش فوق النافذة بس. */
.fld-err{font-size:12px;font-weight:600;color:#fca5a5}
.inp.is-err{border-color:rgba(239,68,68,.55)}

/* المستحق النهائي — أوضح رقم في الشاشة كلها. */
.st-final{border-color:var(--gold-line)}
.st-final-amt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:11px;padding-top:12px;border-top:1px solid var(--gold-line)}
.st-final-amt span{font-size:13px;font-weight:700;color:var(--text-2)}
.st-final-amt b{font-size:21px;font-weight:800;color:var(--gold);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* شريط الحالة — ثلاث خطوات، الحالية مضيّية. */
.st-steps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.st-step{display:inline-flex;align-items:center;gap:6px;color:var(--text-3)}
.st-step::before{content:"○";font-size:13px}
.st-step.is-on{color:var(--gold);font-weight:700}
.st-step.is-on::before{content:"●"}
.st-step.is-done{color:#86efac}
.st-step.is-done::before{content:"●"}
.st-steps .st-arrow{color:var(--line-strong)}
@media (max-width:720px){
  .st-final-amt{flex-direction:column;align-items:flex-start;gap:4px}
  .st-final-amt b{font-size:19px}
  .st-reco-acts .btn{flex:1}
}

/* ===== هاب الإعدادات — بطاقات تنقّل ===== */
.setgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-top:4px}
.setcard{display:flex;flex-direction:column;gap:5px;padding:16px 18px;text-decoration:none;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .12s,background .12s}
.setcard:hover{border-color:var(--gold-line);background:#1d1c17}
.setcard-t{font-size:15px;font-weight:650;color:var(--text)}
.setcard-d{font-size:12.5px;color:var(--text-3);line-height:1.6}
.setcard-s{font-size:11px;color:var(--gold);margin-top:2px}
/* فتات تنقّل صغيرة فوق عنوان أي شاشة إعداد */
.crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-3);margin-bottom:10px}
.crumb a{color:var(--text-3);text-decoration:none}
.crumb a:hover{color:var(--gold)}
.crumb b{color:var(--text-2);font-weight:600}

.chkgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));margin-top:10px}
.chkgrid label{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--input);
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:12.5px;color:var(--text-3);cursor:pointer}
.chkgrid label.on{border-color:var(--gold-line);color:var(--text)}
textarea.inp{resize:vertical;min-height:130px;line-height:1.75;font-size:13px}
@media (max-width:900px){
  .barrow{grid-template-columns:118px 1fr}
  .barval{grid-column:1/-1;text-align:left}
  .actionbar .btn{flex:1}
}
/* ---------------- إضافات النسخة الأونلاين ---------------- */
.acct{display:flex;align-items:center;gap:8px}
.acct .who{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.acct .who b{font-size:12px;font-weight:700}
.acct .who span{font-size:10.5px;color:var(--text-3)}
.acct .sep{width:1px;height:24px;background:var(--line-strong)}
.seclinks{display:flex;gap:6px}
.seclinks a{padding:6px 12px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;
  color:var(--text-3);text-decoration:none;border:1px solid transparent;white-space:nowrap}
.seclinks a:hover{color:var(--text);background:var(--panel)}
.seclinks a.on{color:var(--gold);background:var(--gold-soft);border-color:var(--gold-line)}
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.authcard{width:min(410px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:26px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
.authcard .logo{display:block;height:42px;width:auto;margin:0 auto 18px}
.authcard h1{margin:0 0 4px;font-size:17px;text-align:center}
.authcard p.sub{margin:0 0 20px;font-size:12.5px;color:var(--text-3);text-align:center}
.authcard .field{margin-bottom:14px}
.alert{padding:11px 13px;border-radius:var(--r-md);font-size:13px;margin-bottom:14px;
  background:var(--danger-soft);border:1px solid rgba(239,68,68,.35);color:#fca5a5}
.alert.ok{background:var(--ok-soft);border-color:rgba(34,197,94,.35);color:#86efac}
.page{max-width:760px;margin:0 auto;padding:26px clamp(12px,3vw,26px) 60px}
.steps{counter-reset:s;display:grid;gap:12px;margin:0;padding:0;list-style:none}
.steps li{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;font-size:13px}
code.inline{background:var(--input);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:12.5px}
@media (max-width:900px){.acct .who{display:none}}

/* ================= العمليات اليومية (Daily Operations — P3) ================= */
/* روابط التنقل (بجانب أزرار .nav) */
.nav a{
  padding:7px 14px;border-radius:var(--r-sm);
  background:transparent;border:1px solid transparent;
  color:var(--text-3);font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none;
  display:inline-flex;align-items:center;transition:color .12s,background .12s,border-color .12s;
}
.nav a:hover{color:var(--text);background:var(--panel)}
.nav a.active{color:var(--gold);background:var(--gold-soft);border-color:var(--gold-line)}
/* شارة عدد الإجراءات المطلوبة (نمط إشعارات فيسبوك) — دائرة/كبسولة حمراء
   مضغوطة، رقم أبيض، جنب التسمية على نفس السطر. .nav a أصلًا
   inline-flex+align-items:center فبتتمركز رأسيًا تلقائي. */
.nav-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;margin-inline-start:6px;
  border-radius:999px;background:var(--danger);color:#fff;
  font-size:10.5px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
}


/* ================= تخطيط الإجازات (Leave Planning — P5) ================= */

/* ================= الاستثناءات والتغييرات (Exceptions Review — P6) ================= */
/* جدول الاستثناءات — لازم يدخل في الشاشة من غير تمرير أفقي.
   سبب التمرير قبل كده: min-width:900px + عمود «التغيير» بـnowrap وفيه
   حمولة JSON طويلة. الاتنين اتشالوا: الأعمدة بقت 6، العرض ثابت بنِسَب،
   والنص بيلتف. الإجراء عمود ضيق ثابت عشان يفضل ظاهر دايمًا. */
.exc-scroll{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.exc-table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:12.5px}
.exc-table th,.exc-table td{
  border-bottom:1px solid var(--line);padding:9px 10px;text-align:start;vertical-align:top;
  overflow-wrap:anywhere;word-break:break-word;
}
.exc-table thead th{background:var(--header);color:var(--text-2);font-weight:700;position:sticky;top:0;z-index:1}
.exc-table tbody tr:hover{background:var(--panel-2)}
.exc-pending{background:rgba(212,175,55,.04)}
/* الموظف · التاريخ · النوع · التفاصيل · الحالة · إجراء */
.exc-table th:nth-child(1),.exc-table td:nth-child(1){width:13%}
.exc-table th:nth-child(2),.exc-table td:nth-child(2){width:10%}
.exc-table th:nth-child(3),.exc-table td:nth-child(3){width:15%}
.exc-table th:nth-child(4),.exc-table td:nth-child(4){width:34%}
.exc-table th:nth-child(5),.exc-table td:nth-child(5){width:14%}
.exc-table th:nth-child(6),.exc-table td:nth-child(6){width:14%}
.exc-date{white-space:nowrap;font-variant-numeric:tabular-nums}
.exc-sum{font-weight:600;color:var(--text-2);line-height:1.6}
.exc-reason{margin-top:3px;font-size:11.5px;color:var(--text-2);opacity:.85}
.exc-by{margin-top:3px;font-size:11px;color:var(--text-3)}
.exc-act .btn{margin:0 0 4px}
@media (max-width:1100px){
  .exc-table{font-size:12px}
  .exc-table th,.exc-table td{padding:8px 7px}
}

/* ===== الاستثناءات على الموبايل — كل صف بيبقى كارت =====
   الجدول الست أعمدة مبيتقسّمش على 375px: عمود «إجراء» بياخد 14% (≈50px)
   والزرار عرضه 92px، و.exc-scroll فيها overflow:hidden — فالزرار كان
   بيتقص ومبقاش ممكن يتضغط. الحل: نوقف تخطيط الجدول على الشاشات الصغيرة
   ونعرض كل صف كارت مكدّس، والعناوين بتيجي من ::before.
   مفيش تغيير في الـ HTML ولا الـ JS ولا أي قاعدة شغل. */
@media (max-width:720px){
  .exc-scroll{border:0;border-radius:0;overflow:visible;background:transparent}
  .exc-table,.exc-table tbody,.exc-table tr,.exc-table td{display:block;width:auto}
  .exc-table{table-layout:auto;font-size:13px}
  .exc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  .exc-table tbody tr{
    border:1px solid var(--line);border-radius:var(--r-md);
    background:var(--panel);margin-bottom:10px;padding:4px 0;
  }
  .exc-table tbody tr:hover{background:var(--panel)}
  .exc-table tr.exc-pending{background:rgba(212,175,55,.05)}

  .exc-table td{
    border-bottom:0;padding:6px 12px;text-align:start;
    display:flex;gap:10px;align-items:flex-start;
  }
  .exc-table td::before{
    content:attr(data-label);
    flex:0 0 88px;color:var(--text-3);font-size:11.5px;font-weight:700;
    padding-top:1px;
  }
  /* العناوين من ترتيب العمود — الجدول متبني من JS من غير data-label */
  .exc-table td:nth-child(1)::before{content:"الموظف"}
  .exc-table td:nth-child(2)::before{content:"التاريخ"}
  .exc-table td:nth-child(3)::before{content:"النوع"}
  .exc-table td:nth-child(4)::before{content:"التفاصيل"}
  .exc-table td:nth-child(5)::before{content:"الحالة"}
  .exc-table td:nth-child(6)::before{content:"إجراء"}
  /* الأعمدة النسبية بتاعة الديسكتوب مالهاش لازمة هنا */
  .exc-table td:nth-child(1),.exc-table td:nth-child(2),.exc-table td:nth-child(3),
  .exc-table td:nth-child(4),.exc-table td:nth-child(5),.exc-table td:nth-child(6){width:auto}

  .exc-table td:nth-child(1){font-weight:700;font-size:14px}
  .exc-table td.exc-details{flex-direction:column;gap:2px}
  .exc-table td.exc-details::before{flex:none;margin-bottom:2px}

  /* الإجراء: زرار كامل العرض وسهل الضغط */
  .exc-table td.exc-act{flex-direction:column;gap:6px;padding-top:8px;padding-bottom:10px}
  .exc-table td.exc-act::before{flex:none}
  .exc-table td.exc-act .btn{width:100%;margin:0;min-height:40px;font-size:13px}
}



/* ===== إعدادات مدة العمل ===== */
.ws-default{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px}
.ws-default label{color:var(--text-2);font-weight:600}
.ws-num{width:70px;text-align:center;padding:7px 8px}
.ws-time{width:110px;text-align:center;padding:6px 8px}

/* منتقي 12 ساعة — بديل عن input[type=time] عشان يعرض ص/م دايمًا */
.tp12{display:inline-flex;align-items:center;gap:4px}
.tp12-h,.tp12-m{width:52px;text-align:center;padding:6px 4px}
.tp12-ap{width:48px;text-align:center;padding:6px 4px}
.tp12.is-empty .tp12-h,.tp12.is-empty .tp12-m,.tp12.is-empty .tp12-ap{opacity:.45}
.tp12-clear{width:26px;height:26px;padding:0;font-size:12px;line-height:1;flex:0 0 26px}
/* المنتقي خانة واحدة بتتقري زي الوقت المكتوب جنبه («م 1:25»): إطار واحد (.tp12-box) معزول LTR فيه ص/م
   ثم الساعة «:» الدقيقة. القوائم جوّه من غير إطار ولا سهم لكل واحدة (select.inp كان بيدّي كل قائمة إطارها
   وسهمها فكانت بتبان 3 خانات منفصلة). زرار المسح برّه الإطار. عرض بس — نفس القوائم ونفس القيمة المحفوظة. */
.tp12{gap:6px}
.tp12-box{display:inline-flex;align-items:center;direction:ltr;unicode-bidi:isolate;flex:0 0 auto;
  background:var(--input);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:3px 5px;transition:border-color .12s,background .12s}
.tp12-box:hover{border-color:#45454d}
.tp12-box:focus-within{border-color:var(--gold);background:#0c0c0e}
.tp12-box select.inp{width:auto;flex:0 0 auto;border:0;border-radius:4px;background:transparent none;padding:4px 3px;
  text-align:center;text-align-last:center;text-overflow:clip;font-variant-numeric:tabular-nums;cursor:pointer}
.tp12-box select.tp12-h{min-width:1.8em;direction:rtl;text-align:right;text-align-last:right;padding-right:2px}   /* الساعة لازقة في «:» */
.tp12-box select.tp12-m{min-width:1.8em;text-align:left;text-align-last:left;padding-left:2px}
.tp12-box select.tp12-ap{min-width:1.9em;order:-1;margin-right:4px}
.tp12-box select.inp:hover{background-color:rgba(255,255,255,.05)}
.tp12-box select.inp:focus{background-color:var(--gold-soft);color:var(--gold)}
.tp12-sep{color:var(--text-3);font-weight:700;padding:0 1px}
.tp12.is-empty .tp12-box{border-style:dashed}
.orow-mid .tp12-box{padding:2px 4px}
.orow-mid .tp12-box select.inp{padding-top:3px;padding-bottom:3px}
select.inp.tp12-day{padding-left:15px;background-position:left 7px top 55%,left 2px top 55%}
.ws-sep{width:1px;align-self:stretch;background:var(--line-strong);margin:0 6px}
.ws-sshint{font-size:11px;color:var(--gold);margin-top:3px}
.ws-table-wrap{overflow-x:auto}
.ws-table{width:100%;border-collapse:collapse;font-size:13px}
.ws-table th,.ws-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:start;vertical-align:middle}
.ws-table thead th{background:var(--header);color:var(--text-2);font-weight:700}
.ws-name{font-weight:600;color:var(--text-2);min-width:120px}
.ws-chk{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-3);margin-inline-end:10px}
.ws-custom{display:inline-flex;align-items:center;gap:6px}
.ws-defhint{margin-inline-start:8px;font-size:12px;color:var(--gold)}
.ws-elig{width:auto;min-width:80px;padding:6px 10px}

/* ==================================================================
   العمليات اليومية — لوحة تشغيل
   المبدأ البصري: أسطح هادية، لون الحالة كشريط رفيع + وسم صغير (مش تعبئة
   كبيرة)، وذهب واحد بس في كل صف = الإجراء التالي. الكثافة عالية من غير زحمة.
   ================================================================== */
/* --c-perm = نفس توكن «إجازة بإذن» في خطة الإجازات (تركوازي #2DD4BF) — نعيد استخدامه
   في العمليات اليومية لشارة «نصف يوم إذن» عشان نفس الحالة = نفس اللون في كل النظام. */
.ops{ --c-live:#22C55E; --c-leave:#7CB3FF; --c-perm:#2DD4BF; --c-abs:#EF4444; --c-warn:#FB923C; }
.ops-view[hidden]{display:none}
/* .save-chip بتاخد display:inline-flex فوق — لازم hidden تكسبها */
.save-chip[hidden]{display:none}

/* ---------- شريط التحكّم ---------- */
.ops-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:0 0 16px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.ops-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ops-nav[hidden]{display:none}
.ops-arrow{
  width:32px;height:32px;flex:0 0 32px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-strong);border-radius:9px;
  color:var(--text-3);font-size:15px;font-family:inherit;cursor:pointer;transition:.12s;
}
.ops-arrow:hover{color:var(--text);border-color:var(--line-strong);background:var(--panel-2)}
.ops-when{min-width:150px;padding:0 6px;line-height:1.25}
.ops-when b{display:block;font-size:17px;font-weight:700;color:var(--text)}
.ops-when span{display:block;font-size:11.5px;color:var(--gold);font-weight:600}
.ops-today{
  background:transparent;border:1px solid var(--line-strong);border-radius:9px;
  color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:600;
  padding:7px 13px;cursor:pointer;transition:.12s;
}
.ops-today:hover{color:var(--gold);border-color:var(--gold-line)}
.ops-cal{
  position:relative;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:9px;color:var(--text-3);cursor:pointer;font-size:14px;
}
.ops-cal:hover{color:var(--gold);border-color:var(--gold-line)}
.ops-cal input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ops-div{width:1px;height:24px;background:var(--line-strong);margin:0 4px}
.ops-emp{
  min-width:170px;background:var(--panel-2);border:1px solid var(--line-strong);border-radius:9px;
  color:var(--text);font-family:inherit;font-size:14px;font-weight:600;padding:7px 12px;
}
.ops-emp:focus{outline:none;border-color:var(--gold)}

/* ---------------- قائمة منسدلة مخصّصة (بديل <select> الأصلي) ----------------
   على macOS، قائمة اختيارات <select> بترسمها الواجهة الأصلية للنظام مش
   Chrome/Safari نفسهم — فألوان option بتتجاهل جزئيًا ونص فاتح ممكن يطلع على
   خلفية فاتحة. الحل الوحيد المضمون: قائمة مرسومة بالكامل بـ CSS بدل الأصلية.
   الـ <select> الحقيقي (.jsel-native) بيفضل موجود ومخفي بصريًا بس — هو لسه
   مصدر القيمة والحدث الوحيد، الكود القديم اللي بيسمعه مبيتغيّرش. */
.jsel{position:relative;display:inline-block}
.jsel-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.jsel-btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:8px;
  min-width:170px;background:var(--panel-2);border:1px solid var(--line-strong);border-radius:9px;
  color:var(--text);font-family:inherit;font-size:14px;font-weight:600;padding:7px 12px;cursor:pointer;
}
.jsel-btn:hover{border-color:var(--gold-line)}
.jsel-btn:focus-visible{outline:none;border-color:var(--gold)}
.jsel-btn[aria-expanded="true"]{outline:none;border-color:var(--gold)}
.jsel-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jsel-chev{flex:0 0 auto;font-size:11px;color:var(--text-3);transition:transform .12s}
.jsel-btn[aria-expanded="true"] .jsel-chev{transform:rotate(180deg);color:var(--gold)}
.jsel-list{
  position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:60;min-width:100%;
  max-height:260px;overflow-y:auto;background:#1A1A1D;border:1px solid var(--line-strong);
  border-radius:9px;box-shadow:0 12px 30px rgba(0,0,0,.5);padding:6px;
}
.jsel-opt{padding:8px 10px;border-radius:7px;font-size:13.5px;color:#F4F4F5;cursor:pointer;white-space:nowrap}
.jsel-opt.is-active{background:var(--gold-soft)}
.jsel-opt.is-sel{font-weight:700;color:var(--gold)}
@media (max-width:900px){.jsel-btn,.jsel-list{min-width:140px}}
.ops-seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:3px}
.ops-seg-b{
  background:none;border:none;border-radius:7px;color:var(--text-3);
  font-family:inherit;font-size:13px;font-weight:600;padding:7px 16px;cursor:pointer;transition:.12s;
}
.ops-seg-b:hover{color:var(--text-2)}
.ops-seg-b.is-on{background:var(--panel);color:var(--gold);box-shadow:0 1px 3px rgba(0,0,0,.35)}

/* ---------- نبض اليوم (عدّادات = فلاتر) ---------- */
.ops-pulse{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.pulse{
  display:flex;align-items:baseline;gap:7px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:9px 14px;cursor:pointer;font-family:inherit;transition:.12s;
}
.pulse:hover{border-color:var(--line-strong)}
.pulse b{font-size:18px;font-weight:700;color:var(--text);line-height:1}
.pulse span{font-size:11.5px;color:var(--text-3);font-weight:600}
.pulse.is-on{border-color:var(--gold-line);background:var(--gold-soft)}
.pulse.is-on span{color:var(--gold)}
.pulse-alert b{color:var(--c-warn)}
.pulse-alert{border-color:rgba(251,146,60,.3)}
.pulse-live b{color:var(--c-live)}
.pulse-plan b{color:var(--c-leave)}

/* ---------- المجموعات ---------- */
.ops-list{display:flex;flex-direction:column;gap:26px}
.ogroup{display:flex;flex-direction:column;gap:6px}
.ogroup-h{
  display:flex;align-items:center;gap:9px;margin:0 0 4px;
  font-size:11.5px;font-weight:700;color:var(--text-3);letter-spacing:.3px;
}
.ogroup-n{
  display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 6px;
  border-radius:999px;background:var(--panel-2);border:1px solid var(--line);font-size:10.5px;color:var(--text-3);
}
.ogroup-h--alert{color:var(--c-warn)}
.ogroup-h--live{color:var(--c-live)}
.ogroup-h--plan{color:var(--c-leave)}

/* ---------- صف الموظف ---------- */
.orow{
  /* fit-content(300px) — تحدّ العمود الأقصى (لسبب تأخير طويل) من غير ما
     يستولي على مساحة العمود الأوسط لما مايكونش محتاجها فعلًا (زي minmax
     العادية اللي كانت بتاخد الأقصى دايمًا لو المساحة سمحت، حتى بدون محتوى). */
  display:grid;grid-template-columns:minmax(170px,1.1fr) minmax(0,1.5fr) fit-content(300px);
  align-items:center;gap:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:11px 16px;position:relative;transition:border-color .12s,background .12s;
}
.orow::before{
  content:"";position:absolute;inset-block:11px;inset-inline-start:0;width:3px;border-radius:3px;background:transparent;
}
/* تظليل صف الموظف عند مرور الماوس — واضح لكن هادي، ومبيغيّرش أبعاد الصف
   (حدود 1px زي ما هي + خلفية مرتفعة بس). بيكسب على خلفيات done/review لأن
   .orow:hover أعلى تخصيصًا. */
.orow:hover{border-color:var(--gold-line);background:var(--panel-2)}
/* شارة نص اليوم المضغوطة على الصف الرئيسي — تظهر مباشرةً من غير فتح قائمة (⋯).
   بتعيد استخدام نفس ألوان الحالة الموجودة (مفيش لون جديد):
     نصف يوم إذن  → توكن «بإذن» التركوازي (--c-perm)  — زي خطة الإجازات.
     نصف يوم غياب → توكن الغياب الأحمر (--c-abs)      — زي بقية النظام.
   الأبعاد متّسقة مع .otag ومبتزوّدش ارتفاع الصف. */
.ohalf{flex:0 0 auto;display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;
  font-size:10.5px;font-weight:700;white-space:nowrap;line-height:1.5;border:1px solid transparent}
.ohalf-permit{color:var(--c-perm);background:rgba(45,212,191,.1);border-color:rgba(45,212,191,.34)}
.ohalf-absence{color:var(--c-abs);background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}
/* مؤشّر ثابت على مستوى الصف كله: وردية اليوم اتغيّرت عمدًا (تجاوز محفوظ) —
   مصدره العلم الموثوق من السيرفر (e.shiftOverride)، مش مقارنة نص في الواجهة.
   بيفضل ظاهر قبل/بعد الحضور والانصراف وبعد التحديث. بيستخدم نفس أزرق التجاوز
   (#7CB3FF) بتاع رقاقة الوردية عشان الاتّساق. شريط جانبي على الطرف المقابل
   للشريط الحالة (::before)، فالاتنين بيظهروا مع بعض. مبيغيّرش أبعاد الصف. */
/* مؤشّر التجاوز = الشريط الأزرق الرفيع بس؛ خلفية الصف تفضل عادية زي أي صف
   (مفيش تلوين خلفية للصف). التمرير بيدّي خلفية hover العادية والشريط بيفضل ظاهر. */
.orow--override::after{content:"";position:absolute;inset-block:11px;inset-inline-end:0;
  width:3px;border-radius:3px;background:var(--c-leave)}
.orow--working::before{background:var(--c-live)}
.orow--review::before{background:var(--c-warn)}
.orow--planned::before,.orow--off::before{background:var(--c-leave)}
.orow--off.orow--absence::before{background:var(--c-abs)}
.orow--done{background:transparent}
.orow--review{background:rgba(251,146,60,.05);border-color:rgba(251,146,60,.26)}

.orow-who{display:flex;align-items:center;gap:11px;min-width:0}
.oav{
  flex:0 0 32px;width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel-2);border:1px solid var(--line-strong);color:var(--text-2);font-size:14px;font-weight:700;
}
.oname{display:flex;flex-direction:column;gap:2px;min-width:0}
.oname b{font-size:14.5px;font-weight:700;color:var(--text);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oname em{font-style:normal;font-size:11.5px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* عمود الوقت: كله سطر واحد مضغوط بطبيعته (زي التصميم الأصلي) — دخول/خروج
   سلوتين بعرض أدنى ثابت (مش عرض إجباري كبير) عشان يفضلوا في نفس الموضع
   بين الصفوف، والمقاييس (مدة الشغل/تأخير/خروج مبكر/إضافي) بتتدفّق فورًا
   بعدهم على نفس السطر — من غير كسر سطر إجباري. اللف لسطر تاني بيحصل بس
   لو المساحة فعلًا ماكفتش (شاشة ضيقة)، مش افتراضيًا. */
.orow-mid{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-width:0}
.omuted{font-size:12.5px;color:var(--text-3)}
/* أدنى عرض يكفي الحالة الثابتة (تسمية + وقت) عشان الصفوف تتراصف بصريًا —
   مش عرض إجباري كبير، فمفيش فراغ زايد. لو المنتقي المضغوط (وقت التعديل)
   احتاج أوسع من كده، السلوت بيكبر طبيعيًا (تفاعل لحظي، مش الحالة الدايمة). */
.opair{flex:0 0 auto;min-width:96px;display:inline-flex;align-items:center;gap:6px}
.opair em{font-style:normal;font-size:11px;color:var(--text-3);flex:0 0 auto}

/* منتقي الوقت المضغوط داخل صف العمليات اليومية — نفس منطق .tp12 (الدرج)
   بالظبط، بس أضيق عشان يتناسب مع سلوت الصف. */
.orow-mid .tp12{gap:3px}
.orow-mid .tp12-h,.orow-mid .tp12-m{width:38px;padding:5px 2px;font-size:13px}
.orow-mid .tp12-ap{width:34px;padding:5px 2px;font-size:12px}
/* منتقي يوم الانصراف جوّه التعديل السريع — «نفس اليوم» / «+1».
   نفس مقاسات .tp12 بالظبط عشان مايزوّدش ارتفاع الصف، وأعرض شوية لأن
   النص أطول من ص/م. */
.tp12-day{width:78px;text-align:center;padding:6px 4px}
.orow-mid .tp12-day{width:74px;padding:5px 2px;font-size:12px}
/* المقاييس بتتدفّق جوّه نفس سطر .orow-mid فورًا — مفيش flex-basis:100% تاني */
.ometa{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-width:0}
.olive{font-size:13px;font-weight:700;color:var(--c-live);font-variant-numeric:tabular-nums}
.owarn{font-size:12px;color:var(--c-warn);font-weight:600}
.ofacts{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;color:var(--text-3)}
.ofacts b{color:var(--text-2);font-weight:700;font-variant-numeric:tabular-nums}
.oot{color:var(--gold);font-weight:600}
.olate{color:var(--c-warn);font-weight:600}
.oearly{color:var(--danger);font-weight:600}

/* وقت قابل للتعديل في المكان */
.otime{
  background:var(--panel-2);border:1px solid var(--line-strong);border-radius:8px;
  color:var(--text);font-family:inherit;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
  padding:4px 10px;cursor:pointer;transition:.12s;position:relative;
}
.otime:hover{border-color:var(--gold-line);color:var(--gold)}
.otime.is-static{cursor:default;background:transparent;border-color:transparent;padding-inline:2px}
.onext{color:var(--gold);font-size:9.5px;font-weight:700;margin-inline-start:2px;top:-.4em}
.otime-inp{
  background:var(--input);border:1px solid var(--gold);border-radius:8px;color:var(--text);
  font-family:inherit;font-size:14px;font-weight:700;padding:3px 8px;width:118px;
}
.otime-inp:focus{outline:none}

/* وسوم الحالة */
.otag{display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;
  font-size:11.5px;font-weight:600;border:1px solid transparent}
.otag-leave{color:var(--c-leave);background:rgba(124,179,255,.1);border-color:rgba(124,179,255,.28)}
.otag-permit{color:var(--c-perm);background:rgba(45,212,191,.1);border-color:rgba(45,212,191,.34)}
.otag-absence{color:var(--c-abs);background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}
.otag-present{color:var(--c-live);background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3)}
.otag-plan{color:var(--c-leave);background:rgba(124,179,255,.08);border:1px dashed rgba(124,179,255,.4)}
.otag-sub{font-size:10.5px;color:var(--text-3)}

/* الإجراءات */
.orow-act{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.obtn{
  border:none;border-radius:9px;font-family:inherit;font-size:13.5px;font-weight:700;
  padding:9px 20px;cursor:pointer;transition:.12s;white-space:nowrap;
}
.obtn-go{background:var(--gold);color:#191307}
.obtn-go:hover{background:var(--gold-hover)}
.obtn-ghost{background:transparent;border:1px solid var(--gold-line);color:var(--gold);padding:8px 18px}
.obtn-ghost:hover{background:var(--gold-soft)}
.obtn-warn{background:var(--c-warn);color:#2a1502}
.obtn-warn:hover{filter:brightness(1.08)}
.omore{
  width:32px;height:32px;flex:0 0 32px;background:var(--panel-2);border:1px solid var(--line-strong);border-radius:9px;
  color:var(--text-2);font-size:17px;line-height:1;cursor:pointer;font-family:inherit;transition:.12s;
}
.omore:hover{color:var(--gold);background:var(--panel);border-color:var(--gold-line)}
.oshift{
  background:var(--panel-2);border:1px solid var(--line-strong);border-radius:999px;
  color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;
  padding:6px 11px 6px 9px;cursor:pointer;transition:.12s;display:inline-flex;align-items:center;gap:6px;
}
.oshift:hover{border-color:var(--gold-line);color:var(--gold)}
/* مثلّث مرسوم بـ CSS — أوضح من محرف ▾ في المقاسات الصغيرة */
.oshift i{
  display:inline-block;width:0;height:0;border-inline:4px solid transparent;
  border-top:4px solid currentColor;opacity:.6;font-size:0;
}
.oshift.is-custom{border-color:var(--gold-line);color:var(--gold)}
.oshift.is-static{cursor:default;background:transparent}
/* السطر مقفول بعرض ثابت مهما كان طول الرسالة — مسموح دايمًا يقصّ للسبب
   الكامل عبر title. عمود الأزرار (.orow-act) عمره ما يتّسع بسبب رسالة طويلة. */
.orow-chip{flex:0 0 auto;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ops-empty{padding:36px;text-align:center;color:var(--text-3);font-size:13px}
.ops-skel{display:flex;flex-direction:column;gap:8px}
.ops-skel[hidden]{display:none}
.ops-skel i{
  display:block;height:56px;border-radius:12px;
  background:linear-gradient(90deg,var(--panel) 25%,var(--panel-2) 50%,var(--panel) 75%);
  background-size:200% 100%;animation:opsk 1.2s linear infinite;
}
@keyframes opsk{to{background-position:-200% 0}}

/* ---------- قائمة منبثقة ---------- */
.opop{
  position:absolute;z-index:80;min-width:216px;padding:6px;
  background:var(--panel-2);border:1px solid var(--line-strong);border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:2px;
}
.opop[hidden]{display:none}
.opop-h{padding:7px 12px 6px;font-size:11px;font-weight:700;color:var(--text-3);letter-spacing:.3px}
.opop-b{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:none;border:none;border-radius:8px;color:var(--text-2);
  font-family:inherit;font-size:13.5px;font-weight:600;padding:9px 12px;cursor:pointer;text-align:start;transition:.1s;
}
.opop-b:hover{background:var(--panel);color:var(--text)}
.opop-b.is-on{color:var(--gold);background:var(--gold-soft)}
.opop-b--present:hover{color:var(--c-live)}
.opop-b--leave:hover{color:var(--c-leave)}
.opop-b--absence:hover{color:var(--c-abs)}
.opop-b--danger{color:var(--danger)}
.opop-b--danger:hover{background:var(--danger-soft);color:var(--danger)}
.opop-sep{height:1px;background:var(--line);margin:5px 8px}
.opop-chk{display:flex;align-items:center;gap:8px;padding:9px 12px;margin-top:4px;
  border-top:1px solid var(--line);font-size:12px;color:var(--text-3);cursor:pointer}

/* ---------- إشعار / تراجع ---------- */
.otoast{
  position:fixed;inset-inline:auto;inset-inline-start:24px;bottom:24px;z-index:120;
  display:flex;align-items:center;gap:14px;max-width:min(440px,calc(100vw - 48px));
  background:var(--panel-2);border:1px solid var(--line-strong);border-radius:12px;
  padding:12px 16px;box-shadow:0 14px 40px rgba(0,0,0,.55);font-size:13px;color:var(--text-2);
}
.otoast[hidden]{display:none}
.otoast button{
  background:none;border:1px solid var(--gold-line);border-radius:8px;color:var(--gold);
  font-family:inherit;font-size:12.5px;font-weight:700;padding:5px 13px;cursor:pointer;white-space:nowrap;
}
.otoast button:hover{background:var(--gold-soft)}
.otoast button[hidden]{display:none}

/* ---------- تقويم الشهر ---------- */
.mstats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.mstat{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px 16px;min-width:104px}
.mstat span{display:block;font-size:11px;color:var(--text-3);margin-bottom:4px}
.mstat b{font-size:16px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.mstat.is-leave b{color:var(--c-leave)}
.mstat.is-absence b{color:var(--c-abs)}
.mstat.is-gold b{color:var(--gold)}
.mstat-empty{color:var(--text-3);font-size:12.5px;min-width:auto}

.mcal{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;overflow-x:auto}
.mcal-head,.mcal-grid{display:grid;grid-template-columns:repeat(7,minmax(94px,1fr));gap:6px}
.mcal-head{margin-bottom:8px}
.mcal-head span{text-align:center;font-size:11px;font-weight:700;color:var(--text-3);padding:2px}
.mday{
  min-height:82px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:7px 9px;
  cursor:pointer;font-family:inherit;text-align:start;position:relative;transition:.12s;overflow:hidden;
}
.mday:hover{border-color:var(--gold-line)}
/* يوم من غير تسجيل بيفضل هادي عشان الأيام اللي فيها بيانات هي اللي تبان */
.mday:not([class*="is-"]){background:transparent;border-style:dashed;border-color:rgba(255,255,255,.055)}
.mday:not([class*="is-"]) .mday-n{color:rgba(161,161,170,.42)}
.mday-void{background:none;border:none;cursor:default;min-height:0}
.mday-n{font-size:12.5px;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums}
.mday.is-weekend{background:rgba(255,255,255,.015)}
.mday.is-today{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-line)}
.mday.is-today .mday-n{color:var(--gold)}
.mday.is-present{border-inline-start:3px solid rgba(34,197,94,.55)}
.mday.is-leave{border-inline-start:3px solid rgba(124,179,255,.55)}
.mday.is-absence{border-inline-start:3px solid rgba(239,68,68,.55)}
.mday.is-planned{border-inline-start:3px dashed rgba(124,179,255,.5)}
.mday.is-review{border-inline-start:3px solid var(--c-warn)}
.mday-tag{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.05);color:var(--text-2)}
.mday.is-present .mday-tag{color:var(--c-live);background:rgba(34,197,94,.1)}
.mday.is-leave .mday-tag{color:var(--c-leave);background:rgba(124,179,255,.1)}
.mday.is-absence .mday-tag{color:var(--c-abs);background:rgba(239,68,68,.1)}
.mday.is-planned .mday-tag{color:var(--c-leave);background:transparent;border:1px dashed rgba(124,179,255,.4)}
.mday-t{font-size:10.5px;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.mday-ot{font-size:10.5px;color:var(--gold);font-weight:700}
.mday-late{font-size:10.5px;color:var(--c-warn);font-weight:600}
/* لما التأخير والإضافي مع بعض في نفس اليوم، بيتعرضوا في سطر واحد: تأخير الأول ثم الإضافي */
.mday-metrics{display:inline-flex;align-items:center;gap:6px}
.mday-plan{font-size:9.5px;color:var(--text-3)}
.mlegend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding-inline-start:4px}
.lg{font-size:11.5px;color:var(--text-3);display:inline-flex;align-items:center;gap:6px}
.lg::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--text-3)}
.lg-present::before{background:var(--c-live)}
.lg-leave::before{background:var(--c-leave)}
.lg-absence::before{background:var(--c-abs)}
.lg-plan::before{background:transparent;border:1px dashed var(--c-leave)}
.lg-review::before{background:var(--c-warn)}

/* ---------- درج اليوم ---------- */
/* وضع embed («مراجعة الحضور» في V2 فاتحة الصفحة دي في إطار): الدرج بس، بعرض الإطار كله — نفس الدرج ونفس الحفظ.
   الإغلاق من شريط الصفحة الأم (✕ هنا مستخبي)؛ التوست والتأكيدات بتفضل زي ما هي. */
body.day-embed{background:var(--panel)}
body.day-embed > .hdr, body.day-embed > .nav, body.day-embed .ops-bar, body.day-embed .ops-view{display:none!important}
body.day-embed .dw-back, body.day-embed .dw-x{display:none}
body.day-embed .dw-panel{width:100%;border:0;box-shadow:none;transform:none!important;transition:none}
/* موبايل: اسم الموظف والتاريخ ظاهرين في شريط الصفحة الأم فوق — رأس الدرج بيستخبى عشان المحرّر ياخد ارتفاع الشاشة؛ و«تم» فوق شريط iOS */
@media (max-width:600px){
  body.day-embed .dw-head{display:none}
  body.day-embed .dw-foot{padding-bottom:max(14px,env(safe-area-inset-bottom))}
  body.day-embed .dw-foot .btn{min-height:44px}
}
.dw[hidden]{display:none}
.dw{position:fixed;inset:0;z-index:100}
.dw-back{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s}
.dw.is-open .dw-back{opacity:1}
.dw-panel{
  position:absolute;inset-block:0;inset-inline-end:0;width:min(440px,94vw);
  background:var(--panel);border-inline-start:1px solid var(--line-strong);
  box-shadow:-12px 0 48px rgba(0,0,0,.5);transform:translateX(-100%);
  transition:transform .22s cubic-bezier(.22,.61,.36,1);display:flex;flex-direction:column;
}
[dir=rtl] .dw-panel{transform:translateX(-100%)}
.dw.is-open .dw-panel{transform:translateX(0)}
.dw-head{display:flex;align-items:center;gap:10px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.dw-head-t{flex:1;min-width:0}
.dw-head h3{margin:0;font-size:16px;font-weight:700}
.dw-head p{margin:3px 0 0;font-size:12px;color:var(--text-3)}
.dw-x{width:30px;height:30px;background:none;border:1px solid var(--line-strong);border-radius:8px;
  color:var(--text-3);font-size:13px;cursor:pointer;font-family:inherit}
.dw-x:hover{color:var(--text);background:var(--panel-2)}
.dw-body{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:18px}
.dw-sec{display:flex;flex-direction:column;gap:8px}
.dw-sec[hidden]{display:none}
.dw-lbl{font-size:11px;font-weight:700;color:var(--text-3);letter-spacing:.3px}
.dw-statuses{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dw-st{
  background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:600;
  padding:10px 8px;cursor:pointer;transition:.12s;
}
.dw-st:hover:not(:disabled){border-color:var(--line-strong);color:var(--text)}
.dw-st.is-on{border-color:var(--gold);background:var(--gold-soft);color:var(--gold)}
.dw-st:disabled{opacity:.45;cursor:default}
.dw-shifts{display:flex;gap:6px;flex-wrap:wrap}
.dw-sh{
  background:var(--panel-2);border:1px solid var(--line);border-radius:999px;
  color:var(--text-2);font-family:inherit;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  padding:7px 15px;cursor:pointer;transition:.12s;
}
.dw-sh:hover:not(:disabled){border-color:var(--gold-line);color:var(--gold)}
.dw-sh.is-on{border-color:var(--gold);background:var(--gold-soft);color:var(--gold)}
.dw-times{display:flex;flex-wrap:wrap;gap:10px}   /* الموبايل: الانصراف ينزل سطر بدل ما يخرج برّه الشاشة */
.dw-time{flex:1;display:flex;flex-direction:column;gap:5px;position:relative}
.dw-time span{font-size:11.5px;color:var(--text-3)}
.dw-time .inp{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.dw-next{
  font-style:normal;font-size:9.5px;font-weight:700;color:var(--gold);
  background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:999px;
  padding:1px 7px;margin-inline-start:5px;
}
.dw-next[hidden]{display:none}
.dw-hint{margin:-3px 0 0;font-size:11px;color:var(--text-3);line-height:1.6}
.dw-chk{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3);cursor:pointer}
.dw-calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;
  padding:13px 14px;background:var(--panel-2);border:1px solid var(--line);border-radius:11px}
.dw-calc[hidden]{display:none}
.dw-calc-i{display:flex;flex-direction:column;gap:3px}
.dw-calc-i span{font-size:10.5px;color:var(--text-3)}
.dw-calc-i b{font-size:14px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.dw-calc-i.is-gold b{color:var(--gold)}
.dw-calc-i.is-quiet b{color:var(--text-3);font-size:13px}
.dw-err[hidden]{display:none}
.dw-foot{display:flex;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--line);background:var(--panel-2)}
.dw-foot .grow{flex:1}
#dwDelete[hidden]{display:none}

/* قفل حقول الحضور المُدارة يوميًا (شاشة الموارد البشرية) */
.lock-note{
  display:flex;align-items:flex-start;gap:9px;margin-bottom:14px;padding:11px 13px;
  background:var(--gold-soft);border:1px solid var(--gold-line);border-radius:10px;
  font-size:12.5px;color:var(--text-2);line-height:1.6;
}
.lock-note[hidden]{display:none}
.lock-note-i{flex:0 0 auto;font-size:13px}
.lock-note a{color:var(--gold);font-weight:700}
.inp.is-locked{background:var(--panel-2);color:var(--text-3);border-style:dashed;cursor:not-allowed}

/* ---------- استجابة ---------- */
@media (max-width:900px){
  .mcal-head,.mcal-grid{grid-template-columns:repeat(7,minmax(76px,1fr))}
}
@media (max-width:720px){
  /* الهيدر كان بيتوسّع أعرض من الشاشة على الموبايل ويزقّ الصفحة كلها (تمرير أفقي).
     على الشاشات الصغيرة بنسيب اللوجو والروابط بس. */
  .hdr{gap:10px;overflow-x:auto;scrollbar-width:none}
  .hdr::-webkit-scrollbar{display:none}
  .brand-txt,.brand-sep,.hdr .role{display:none}
  .brand,.brand img,.seclinks,.acct{flex:0 0 auto}
  .acct .sep{display:none}

  .ops-bar{gap:10px}
  .ops-when{min-width:118px}
  .ops-when b{font-size:15px}
  .ops-seg{width:100%}
  .ops-seg-b{flex:1}
  .orow{grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding:12px 14px}
  .orow-who{grid-column:1}
  .orow-act{grid-column:2;grid-row:1}
  .orow-mid{grid-column:1/-1;grid-row:2;gap:10px}
  .obtn{padding:11px 18px;font-size:14px}
  .omore{width:38px;height:38px;flex-basis:38px}
  .otime{padding:7px 12px;font-size:15px}
  /* الرقاقة بتختفي عشان الاسم ياخد عرض أكبر — الوردية مكتوبة في سطر التفاصيل
     والتغيير من قائمة (⋯). */
  .oshift{display:none}
  .pulse{flex:1 1 auto;justify-content:center;padding:10px 12px}
  .otoast{inset-inline:16px;bottom:16px;max-width:none}
  .dw-panel{width:100%}
  .mcal{padding:8px}
  .mcal-head,.mcal-grid{grid-template-columns:repeat(7,minmax(52px,1fr));gap:4px}
  .mday{min-height:62px;padding:5px 6px}
  .mday-tag{font-size:9.5px;padding:1px 5px}
  .mday-t,.mday-ot,.mday-late{font-size:9.5px}
  .mday-plan{display:none}
}

/* ---------- شريط الأيام المفتوحة (حضور بدون انصراف) ---------- */
.openbar{
  display:flex;flex-direction:column;gap:9px;margin-bottom:18px;padding:13px 16px;
  background:rgba(251,146,60,.07);border:1px solid rgba(251,146,60,.3);border-radius:12px;
}
.openbar[hidden]{display:none}
.openbar-t{display:flex;flex-direction:column;gap:3px}
.openbar-t b{font-size:13.5px;font-weight:700;color:var(--c-warn)}
.openbar-t span{font-size:11.5px;color:var(--text-3);line-height:1.6}
.openbar-l{display:flex;gap:7px;flex-wrap:wrap}
.openchip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--panel);border:1px solid rgba(251,146,60,.35);border-radius:999px;
  color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:600;
  padding:6px 13px;cursor:pointer;transition:.12s;
}
.openchip:hover{border-color:var(--c-warn);color:var(--c-warn)}
.openchip i{font-style:normal;font-size:11px;color:var(--text-3)}
.openchip.is-here{border-color:var(--c-warn);color:var(--c-warn)}
.openbar-here{font-size:11px;color:var(--text-3)}
.mstat.is-open b{color:var(--c-warn);font-size:14px}
.mstat.is-open{border-color:rgba(251,146,60,.32)}

/* ==================================================================
   لوحة تخطيط الشهر — صفوف موظفين × أعمدة أيام

   التصميم: اللوحة نفسها هي سطح التعامل. الشبكة بتفضل هادية لما كل حاجة
   عادية، والاستثناء هو اللي بيجذب العين. اللون بيحمل معنى بس — مفيش تلوين
   للزينة. التمييز المتقاطع (صف + عمود) بيمنع تتبّع الشبكة بالعين.
   ================================================================== */
.board{
  --bd-name:196px;      /* عرض عمود الموظف */
  --bd-row:40px;        /* ارتفاع الصف */
  --c-leave:#7CB3FF; --c-perm:#2DD4BF; --c-abs:#EF4444; --c-res:#A78BFA; --c-warn:#FB923C; --c-ok:#22C55E;
  /* تجميع أسبوعي محايد بلا أزرق/بترولي — ألوان **مصمتة** من نفس عائلة الثيم،
     مش طبقات شفافة فوق بعض. الشفافية كانت بتدّي إحساس «إضاءة/شرائط» فوق
     اللوحة؛ اللون المصمت بيخلّي كل مجموعة تبان سطح مسطّح واحد.
       خميس→أحد (is-sens) = الأغمق · اتنين→أربع (الافتراضي) = الأفتح شويه.
     نسخة الرأس أغمق شويه من نسخة الخانات عشان تتماشى مع شريط الرأس. */
  --bd-band-sens:#0D0D0F;    /* خميس → أحد — خانات */
  --bd-band-plain:#1C1D20;   /* اتنين → أربع — خانات */
  --bd-band-sens-h:#08080A;  /* خميس → أحد — رأس */
  --bd-band-plain-h:#151518; /* اتنين → أربع — رأس */
}

/* ---------- شريط التحكّم ---------- */
.bd-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.bd-month{display:flex;align-items:center;gap:6px}
.bd-arrow{
  width:32px;height:32px;flex:0 0 32px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-strong);border-radius:9px;
  color:var(--text-3);font-size:15px;font-family:inherit;cursor:pointer;transition:.12s;
}
.bd-arrow:hover{color:var(--text);background:var(--panel-2)}
.bd-mlabel{
  position:relative;min-width:158px;padding:6px 14px;
  background:transparent;border:1px solid transparent;border-radius:9px;
  font-family:inherit;cursor:pointer;text-align:center;transition:.12s;
}
.bd-mlabel:hover{border-color:var(--line-strong);background:var(--panel-2)}
.bd-mlabel b{font-size:17px;font-weight:700;color:var(--text)}
.bd-mlabel input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.bd-now{
  background:transparent;border:1px solid var(--line-strong);border-radius:9px;
  color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:600;
  padding:7px 13px;cursor:pointer;transition:.12s;
}
.bd-now:hover{color:var(--gold);border-color:var(--gold-line)}
.bd-tools{display:flex;align-items:center;gap:12px}
.bd-count{font-size:12px;color:var(--text-3)}
.bd-key-t{
  background:none;border:none;color:var(--text-3);font-family:inherit;font-size:12px;
  font-weight:600;cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:3px;
}
.bd-key-t:hover{color:var(--gold)}

/* ---------- دليل الألوان ---------- */
.bd-key{
  display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px;padding:12px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;
}
.bd-key[hidden]{display:none}
.bd-key .k{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-3)}
.sw{width:13px;height:13px;border-radius:4px;flex:0 0 13px;background:var(--panel-2);border:1px solid var(--line-strong)}
.sw-leave{background:rgba(124,179,255,.22);border-color:rgba(124,179,255,.5)}
.sw-perm{background:rgba(45,212,191,.2);border-color:rgba(45,212,191,.55)}
.sw-abs{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.5)}
.sw-res{background:transparent;border:1px dashed rgba(167,139,250,.7)}
.sw-work{background:transparent;border:1px solid var(--line-strong)}
.sw-done{background:rgba(34,197,94,.2);border-color:rgba(34,197,94,.5)}
.sw-diff{background:transparent;border:1px solid var(--gold);box-shadow:inset 0 0 0 1px var(--gold-soft)}
.sw-unp{background:transparent;border:1px dashed var(--line-strong)}
.sw-rev{background:var(--c-warn);border-color:var(--c-warn)}
.sw-half{background-image:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.55) 50%)}

/* ---------- اللوحة ---------- */
.bd-wrap{
  position:relative;isolation:isolate;      /* سياق تكديس خاص — الرؤوس اللاصقة ما تخرجش برّه */
  overflow:auto;overscroll-behavior:contain;
  max-width:100%;
  max-height:calc(100vh - 232px);           /* احتياطي — JS بيظبّطه من المكان الفعلي */
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  scrollbar-width:thin;
}
.bd-wrap[hidden]{display:none}
.bd-wrap::-webkit-scrollbar{width:10px;height:10px}
.bd-wrap::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:3px solid var(--panel)}
.bd{
  display:grid;
  /* الأعمدة بتتمدّد لتملأ عرض اللوحة بالظبط (1fr لكل يوم) بدل عرض ثابت
     بالبكسل — كده مفيش تمرير أفقي عند أي عرض شاشة، من غير حاجة لضبط نقاط
     توقّف يدوية لكل عرض ممكن. --bd-cell-min هو حد أدنى تقريبي للقراءة على
     الشاشات الضيقة جدًا بس (شوف الاستجابة تحت). */
  grid-template-columns:var(--bd-name) repeat(var(--days),minmax(var(--bd-cell-min,22px),1fr));
  width:100%;
}

/* رأس الأعمدة */
.bd-corner,.bd-h{position:sticky;top:0;z-index:3;background:var(--header)}
/* عمود الموظف (زاوية + اسم + تذييل) اتجمّد أفقيًا بـtransform من JS، مش
   position:sticky — اتثبت إن sticky الأفقي جوّه الشبكة دي بينهار بعد
   تمرير كافي (~200-250px) في المتصفح الحقيقي، بدل ما يفضل ملتصق لآخر
   التمرير، وده اللي كان بيخفي عمود الاسم فعليًا. الالتصاق الرأسي
   (top/bottom) فوق سليم تمامًا ولسه شغّال زي ما هو. شوف updateFreeze()
   في leave-plan.js. */
.bd-corner{
  z-index:5;
  display:flex;align-items:flex-end;padding:10px 16px 9px;
  font-size:11px;font-weight:700;color:var(--text-3);letter-spacing:.3px;
  border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line);
}
.bd-h{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1px;
  padding:8px 0 7px;border-bottom:1px solid var(--line);
  background:var(--bd-band-plain-h);
  transition:background .1s;
}
.bd-h-w{font-size:9.5px;color:var(--text-3);line-height:1}
.bd-h-n{
  font-size:13.5px;font-weight:700;color:var(--text-2);line-height:1.5;
  min-width:22px;text-align:center;border-radius:6px;font-variant-numeric:tabular-nums;
}
/* خميس → أحد: أيام تشغيل مهمة. تمييز هادي بيمتد على العمود كله (رأس + خانات
   + تذييل) عشان تقدر تمسح اللوحة بعينك وتلاقيهم على طول. أولوية بصرية رقم 4 —
   بعد الحالة واليوم الحالي والصليب، وقبل خلفية اللوحة العادية. لون مصمت
   أغمق — بلا أزرق وبلا تدرّج. */
.bd-h.is-sens{background:var(--bd-band-sens-h)}
.bd-h.is-sens .bd-h-w{color:var(--text-2)}
/* حدّ المجموعة في الرأس بنفس منطق الخلايا — استمرارية بصرية من الرأس للّوحة */
.bd-h.is-sens + .bd-h:not(.is-sens){box-shadow:inset 1px 0 0 rgba(255,255,255,.06)}
.bd-h:not(.is-sens) + .bd-h.is-sens{box-shadow:inset 1px 0 0 rgba(255,255,255,.06)}
.bd-h.is-past .bd-h-n,.bd-h.is-past .bd-h-w{opacity:.45}
.bd-h.is-today .bd-h-n{background:var(--gold);color:#191307}
.bd-h.is-today .bd-h-w{color:var(--gold)}
.bd-h.x-col{background:var(--panel-2)}
.bd-h.x-col .bd-h-n{color:var(--text)}

/* عمود الموظف — position:relative بس (مش sticky)، عشان z-index يشتغل؛
   التجميد الأفقي بـtransform من JS (شوف تعليق .bd-corner فوق). */
.bd-name{
  position:relative;z-index:2;background:var(--panel);
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  min-height:var(--bd-row);padding:6px 16px;cursor:pointer;
  border-bottom:1px solid var(--line);border-inline-end:1px solid var(--line);
  border-inline-start:2px solid transparent;
  text-align:start;transition:background .12s,border-color .12s;
}
.bd-name:hover{background:var(--panel-2);border-inline-start-color:var(--line-strong)}
.bd-name.x-row{background:var(--panel-2)}
.bd-name-t{
  font-size:13.5px;font-weight:700;color:var(--text);line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* الاسم أساسي وواضح، «متبقي X من Y» ثانوي وهادي — الرقم بس ياخد وزن أعلى
   عشان يتقرا بسرعة من غير ما الصف كله يصيح. */
.bd-name-b{font-size:10.5px;color:var(--text-3);display:flex;align-items:baseline;gap:4px}
.bd-name-b b{color:var(--text-2);font-weight:700;font-size:11px}
.bd-name-b i{font-style:normal;opacity:.6;font-size:9.5px}
.bd-name-b.is-over{color:var(--c-abs)}
.bd-name-b.is-over b{color:var(--c-abs)}

/* الخلية */
.bd-c{
  position:relative;min-height:var(--bd-row);
  display:flex;align-items:center;justify-content:center;
  background:var(--bd-band-plain);border:0;border-bottom:1px solid rgba(41,41,46,.55);
  border-inline-start:1px solid rgba(41,41,46,.4);
  cursor:pointer;font-family:inherit;padding:2px;transition:background .1s;
}
.bd-c.is-sens{background:var(--bd-band-sens)}
/* حدود المجموعة — خط رفيع جدًا عند حدّ خميس↔اتنين وأحد↔أربع، مش قبل كل يوم */
.bd-c.is-sens + .bd-c:not(.is-sens){box-shadow:inset 1px 0 0 rgba(255,255,255,.06)}
.bd-c:not(.is-sens) + .bd-c.is-sens{box-shadow:inset 1px 0 0 rgba(255,255,255,.06)}
.bd-c.is-past{opacity:.72}
.bd-c.is-today{box-shadow:inset 1px 0 0 var(--gold-line),inset -1px 0 0 var(--gold-line)}
/* الهوفر مسطّح — تغيير خلفية بس، بلا حلقة/ظل. is-today مش متلمس. */
.bd-c:hover{background:var(--panel-2)}
/* ---------- الصليب الديناميكي ----------
   التدرّج: الصف/العمود خفيف · اسم الموظف ورأس اليوم أوضح · التقاطع الأقوى.
   بيتطبّق على **سطح** الخانة بس — شارة الحالة (لونها ونصّها) ما بتتلمسش،
   فالأحمر يفضل أحمر والأزرق أزرق تحت الصليب. */
.bd-c.x-col,.bd-c.x-row{background:rgba(244,197,67,.055)}
.bd-c.is-sens.x-col,.bd-c.is-sens.x-row{background:rgba(244,197,67,.075)}
/* التقاطع — خلفية ذهبية أوضح شويه + حدّ رفيع بس، مفيش ظل/زاوية دائرية */
.bd-c.x-col.x-row{
  background:rgba(244,197,67,.16);
  border:1px solid var(--gold-line);
}
/* اسم الموظف ورأس اليوم — تمييز أوضح بحدّ حقيقي مسطّح، مش ظل */
.bd-name.x-row{background:var(--gold-soft);border-inline-start:2px solid var(--gold)}
.bd-name.x-row .bd-name-t{color:var(--gold)}
.bd-h.x-col{background:var(--gold-soft)}
.bd-h.x-col .bd-h-n{color:var(--gold)}
.bd-h.x-col .bd-h-w{color:var(--gold);opacity:.85}
.bd-foot.x-col{background:var(--gold-soft);color:var(--gold)}
/* اليوم الحالي لازم يفضل باين حتى وإنت واقف على يوم تاني:
   النهاردة = حبّة ذهبية مصمتة · العمود المتحوّم = خلفية ذهبية شفافة.
   لو النهاردة هو المتحوّم، الاتنين بيتجمعوا من غير حدود مزدوجة. */
.bd-h.is-today .bd-h-n{background:var(--gold);color:#191307}
.bd-h.is-today.x-col .bd-h-n{background:var(--gold-hover);color:#191307}
.bd-c.is-today{box-shadow:inset 1px 0 0 var(--gold-line),inset -1px 0 0 var(--gold-line)}
.bd-c.is-today.x-col.x-row{box-shadow:inset 0 0 0 1.5px var(--gold)}

/* شارة داخل الخلية
   اللغة البصرية:
     مفرّغ  = مخطّط لسه ما اتأكّدش
     ممتلئ  = اتأكّد فعليًا
     قَطْع مائل = نص يوم
     ذهبي   = الفعلي مختلف عن الخطة (الحالة الوحيدة اللي بتاخد ذهب) */
.bd-c-t{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;max-width:30px;height:23px;padding:0 3px;border-radius:6px;
  font-size:9.5px;font-weight:700;line-height:1;white-space:nowrap;overflow:hidden;
  border:1px solid transparent;position:relative;
}
/* مخطّط — مفرّغ بحدود ملوّنة */
.bd-c.t-leave .bd-c-t{color:var(--c-leave);border-color:rgba(124,179,255,.45);background:rgba(124,179,255,.07)}
.bd-c.t-perm  .bd-c-t{color:var(--c-perm);border-color:rgba(45,212,191,.5);background:rgba(45,212,191,.08)}
.bd-c.t-abs   .bd-c-t{color:var(--c-abs);border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.07)}
.bd-c.t-res   .bd-c-t{color:var(--c-res);border:1px dashed rgba(167,139,250,.6);background:transparent}
/* اتأكّد فعليًا — ممتلئ */
.bd-c.is-confirmed.t-leave .bd-c-t{background:rgba(124,179,255,.26);border-color:rgba(124,179,255,.75)}
.bd-c.is-confirmed.t-perm  .bd-c-t{background:rgba(45,212,191,.26);border-color:rgba(45,212,191,.75)}
.bd-c.is-confirmed.t-abs   .bd-c-t{background:rgba(239,68,68,.24);border-color:rgba(239,68,68,.7)}
/* الفعلي مختلف عن الخطة */
.bd-c.is-diff .bd-c-t{background:var(--gold-soft);color:var(--gold);border-color:var(--gold)}
.bd-c.is-diff::after{
  content:"";position:absolute;inset-block-start:4px;inset-inline-start:4px;
  width:4px;height:4px;border-radius:50%;background:var(--gold);
}
/* فعلي بدون خطة — متقطّع */
.bd-c.is-unplanned .bd-c-t{border-style:dashed;background:transparent}
/* نص يوم — قَطْع مائل + علامة ½ في الركن.
   الفرق بين نص يوم ويوم كامل بيأثّر على الرواتب، فمينفعش يبقى خفيّ. */
.bd-c.is-half .bd-c-t::before{
  content:"";position:absolute;inset:0;border-radius:5px;
  background:linear-gradient(135deg,currentColor 0 46%,transparent 46%);
  opacity:.26;pointer-events:none;
}
.bd-c.is-half::before{
  content:"\00BD";
  position:absolute;inset-block-start:2px;inset-inline-end:3px;z-index:1;
  font-size:9px;font-weight:700;line-height:1;color:var(--text);
  text-shadow:0 0 3px var(--panel),0 0 3px var(--panel);
  pointer-events:none;
}
/* محتاج مراجعة */
.bd-c-rev{
  position:absolute;inset-block-end:4px;inset-inline-end:4px;
  width:5px;height:5px;border-radius:50%;background:var(--c-warn);
  box-shadow:0 0 0 2px var(--panel);
}
.bd-c.is-review{background:rgba(251,146,60,.07)}
/* يوم مملوك بإدخال فعلي يدوي — مقفول على اللوحة */
.bd-c.is-locked{cursor:default}

/* صف العدد — بيكمّل نفس سطح المجموعة (رأس + خانات + تذييل = عمود واحد) */
.bd-foot-l,.bd-foot{
  position:sticky;bottom:0;z-index:2;background:var(--header);
  border-top:1px solid var(--line);
}
.bd-foot-l{
  z-index:4;
  display:flex;align-items:center;padding:8px 14px;
  font-size:10.5px;font-weight:700;color:var(--text-3);
  border-inline-end:1px solid var(--line);
}
.bd-foot{
  display:flex;align-items:center;justify-content:center;padding:8px 0;
  font-size:11px;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums;
  background:var(--bd-band-plain-h);
}
.bd-foot.is-sens{background:var(--bd-band-sens-h)}
.bd-foot.is-over{color:var(--c-abs);background:rgba(239,68,68,.1)}
.bd-foot.x-col{background:var(--panel-2);color:var(--text-2)}

.bd-empty{padding:44px;text-align:center;color:var(--text-3);font-size:13px}
.bd-skel{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.bd-skel[hidden]{display:none}
.bd-skel i{
  display:block;height:42px;border-radius:8px;
  background:linear-gradient(90deg,var(--panel) 25%,var(--panel-2) 50%,var(--panel) 75%);
  background-size:200% 100%;animation:opsk 1.2s linear infinite;
}

/* ---------- قائمة الخلية ---------- */
/* القائمة لازم تبان طايفة فوق اللوحة بوضوح.
   قبل كده كانت #1A1A1D فوق لوحة #141416 — فرق ~6 درجات بس، فكانت بتتقري
   كأنها شفافة والشارات ورا بتشوّش. دلوقتي سطح أفتح + حدّ أقوى + ظل أعمق. */
.cpop{
  position:absolute;z-index:200;width:300px;max-width:calc(100vw - 24px);padding:8px;
  background:#26262B;
  border:1px solid #43434B;border-radius:13px;
  box-shadow:0 24px 64px rgba(0,0,0,.78), 0 0 0 1px rgba(0,0,0,.5);
}
.cpop[hidden]{display:none}
.cpop-h{padding:6px 8px 9px;border-bottom:1px solid var(--line);margin-bottom:7px}
.cpop-h b{display:block;font-size:13.5px;font-weight:700;color:var(--text)}
.cpop-h span{display:block;font-size:11px;color:var(--text-3);margin-top:2px}
.cpop-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
/* كل اختيار = شبكة صغيرة من صفّين جوّه نفس الزرار:
     صف 1: مربّع اللون + اسم الحالة
     صف 2: شارة الأثر (من الرصيد / خصم كذا)
   قبل كده كان كله في سطر واحد flex، والشارة عليها white-space:nowrap من غير
   إمكانية تقلّص — فكانت بتطلع برّه العمود (≈124 بكسل بس لكل عمود).
   الصفّين بيخلّوا كل حاجة جوّه الزرار مهما ضاق العرض. */
.cpop-grid .cpop-b{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:4px 7px;
  padding:9px 9px;
}
.cpop-grid .cpop-sw{grid-column:1;grid-row:1;margin-top:3px}
.cpop-grid .cpop-lbl{
  grid-column:2;grid-row:1;
  min-width:0;line-height:1.35;overflow-wrap:anywhere;
}
.cpop-grid .cpop-ded,
.cpop-grid .cpop-on{
  grid-column:2;justify-self:start;max-width:100%;
  white-space:normal;overflow-wrap:anywhere;
}
.cpop-grid .cpop-ded{grid-row:2}
.cpop-grid .cpop-on{grid-row:3}
.cpop-b{
  display:flex;align-items:center;gap:8px;width:100%;
  background:none;border:1px solid transparent;border-radius:8px;
  color:var(--text-2);font-family:inherit;font-size:12.5px;font-weight:600;
  padding:9px 10px;cursor:pointer;text-align:start;transition:.1s;
}
.cpop-b:hover:not(:disabled){background:var(--panel);color:var(--text)}
.cpop-b:disabled{opacity:.4;cursor:default}
.cpop-b.is-on{border-color:var(--gold-line);background:var(--gold-soft);color:var(--gold)}
.cpop-b span{flex:1;min-width:0;overflow-wrap:anywhere}
.cpop-lbl{flex:1;min-width:0}
.cpop-ded{
  font-style:normal;font-size:9.5px;font-weight:700;line-height:1.4;
  padding:2px 6px;border-radius:5px;color:var(--text-3);background:rgba(255,255,255,.05);
}
.cpop-b--perm .cpop-ded{color:var(--c-perm);background:rgba(45,212,191,.12)}
.cpop-b--abs  .cpop-ded{color:var(--c-abs);background:rgba(239,68,68,.12)}
.cpop-b--leave .cpop-ded{color:var(--c-leave);background:rgba(124,179,255,.12)}
.cpop-on{font-style:normal;font-size:9.5px;color:var(--gold);opacity:.85}
.cpop-sw{width:11px;height:11px;flex:0 0 11px;border-radius:3px;border:1px solid var(--line-strong);background:var(--panel)}
.cpop-b--leave .cpop-sw{background:rgba(124,179,255,.22);border-color:rgba(124,179,255,.5)}
.cpop-b--perm  .cpop-sw{background:rgba(45,212,191,.2);border-color:rgba(45,212,191,.55)}
.cpop-b--abs   .cpop-sw{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.5)}
.cpop-b--res   .cpop-sw{background:transparent;border:1px dashed rgba(167,139,250,.7)}
.cpop-b--reset{margin-bottom:4px}
.cpop-b--reset .cpop-sw{background:transparent}
.cpop-b--go{justify-content:center;border-color:var(--gold-line);color:var(--gold);margin-top:6px}
.cpop-b--go:hover{background:var(--gold-soft)}
.cpop-b--danger{justify-content:center;color:var(--danger);margin-top:4px}
.cpop-b--danger:hover{background:var(--danger-soft);color:var(--danger)}
.cpop-sep{height:1px;background:var(--line);margin:8px 6px 6px}
.cpop-more{
  display:block;width:100%;background:none;border:none;color:var(--text-3);
  font-family:inherit;font-size:11.5px;font-weight:600;padding:5px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.cpop-more:hover{color:var(--gold)}
.cpop-details{margin-top:7px;padding-top:9px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:7px}
.cpop-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:11.5px}
.cpop-row span{color:var(--text-3)}
.cpop-row b{color:var(--text-2);font-weight:700;text-align:end}
.cpop-row b.is-gold{color:var(--gold)}
.cpop-row b.is-red{color:var(--danger)}
.cpop-row b.is-quiet{color:var(--text-3);font-weight:500}
.cpop-f{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--text-3)}
.cpop-f input{
  width:100%;padding:8px 10px;background:#141418;
  border:1px solid var(--line-strong);border-radius:8px;color:var(--text);font-size:12.5px;
}
.cpop-f input:focus{outline:none;border-color:var(--gold)}
.cpop-lock{
  padding:9px 10px;margin-bottom:4px;border-radius:9px;
  background:rgba(251,146,60,.08);border:1px solid rgba(251,146,60,.28);
}
.cpop-lock b{display:block;font-size:12px;color:var(--c-warn);margin-bottom:3px}
.cpop-lock span{display:block;font-size:11px;color:var(--text-3);line-height:1.65}

/* ---------- شاشات أضيق ----------
   الأعمدة أصبحت 1fr (شوف .bd فوق) فبتتمدّد لتملأ العرض المتاح تلقائيًا —
   مفيش تمرير أفقي على أي عرض ديسكتوب/لابتوب. عمود الموظف بس بيضيق تدريجيًا
   عشان يسيب مساحة أكبر للأيام. --bd-cell-min هو آخر خط دفاع: لو العرض
   ضاق جدًا (موبايل) لدرجة إن الخانة هتبقى أضيق من الحد المقروء، ساعتها
   بس .bd-wrap{overflow:auto} بيشتغل كتمرير أفقي — مش قبل كده. */
@media (max-width:1400px){
  .board{--bd-name:168px}
}
@media (max-width:1100px){
  .board{--bd-name:150px}
  .bd-wrap{max-height:calc(100vh - 210px)}
}
@media (max-width:720px){
  .board{--bd-name:128px;--bd-row:46px;--bd-cell-min:30px}
  .bd-bar{gap:8px}
  .bd-mlabel{min-width:120px}
  .bd-mlabel b{font-size:15px}
  .bd-name{padding:6px 10px}
  .bd-name-t{font-size:12.5px}
  .cpop{width:min(268px,calc(100vw - 24px))}
}

/* ---------- حالة الوردية: افتراضية مقابل معدّلة لليوم ----------
   ذهبي = وردية الموظف الافتراضية (الوضع العادي).
   أزرق = اتغيّرت لليوم ده بس. الفرق لازم يبان من غير ما تقرا نص. */
.oshift.is-default{border-color:var(--gold-line);color:var(--gold);background:var(--gold-soft)}
.oshift.is-override{
  border-color:rgba(124,179,255,.55);color:#7CB3FF;background:rgba(124,179,255,.12);
}
.oshift-tag{
  font-style:normal;font-size:9px;font-weight:700;opacity:.9;
  padding:1px 5px;border-radius:5px;background:rgba(124,179,255,.2);
}
.opop-shift{display:flex;align-items:center;gap:8px}
.opop-shift .opop-ot{
  margin-inline-start:auto;font-style:normal;font-size:10px;color:var(--text-3);white-space:nowrap;
}
.opop-shift.is-def{border-color:var(--gold-line)}
/* «الموعد الافتراضي — X» — بند الرجوع للطبيعي. مميّز عن قائمة الورديات
   عشان يبان إنه إلغاء للتجاوز مش اختيار وردية تانية. */
.opop-shift--def{justify-content:flex-start;gap:8px;color:var(--text-2)}
.opop-shift--def.is-on{color:var(--gold);background:var(--gold-soft)}
.opop-def{
  font-style:normal;font-size:9px;font-weight:700;color:var(--gold);
  padding:1px 5px;border-radius:5px;background:var(--gold-soft);
}
/* أزرار الوردية في الدرج */
#dwShifts{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px}
.dw-sh{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 6px;border-radius:9px;cursor:pointer;font-family:inherit;
  background:var(--panel-2);border:1px solid var(--line-strong);color:var(--text-2);transition:.12s;
}
.dw-sh b{font-size:13px;font-weight:700;line-height:1.2}
.dw-sh span{font-size:9.5px;color:var(--text-3);line-height:1.2}
.dw-sh:hover{border-color:var(--line-strong);background:#232327;color:var(--text)}
.dw-sh.is-def{border-style:dashed;border-color:var(--gold-line)}
.dw-sh.is-on{background:var(--gold-soft);border-color:var(--gold);color:var(--gold)}
.dw-sh.is-on b{color:var(--gold)}
.dw-sh.is-on.is-override{
  background:rgba(124,179,255,.14);border-color:#7CB3FF;border-style:solid;color:#7CB3FF;
}
.dw-sh.is-on.is-override b{color:#7CB3FF}
.dw-shift-note{margin:8px 0 0;font-size:11px;color:var(--text-3);line-height:1.6}
.dw-shift-note b{color:var(--gold);font-weight:700}
.dw-shift-note.is-override{color:#7CB3FF}
.dw-shift-note.is-override b{color:#7CB3FF}
/* شارة الوردية الافتراضية في إعدادات الموظفين */
.shiftpill{
  display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;
}
.shiftpill.is-default{color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line)}
.shiftpill.is-none{color:var(--text-3);background:transparent;border:1px dashed var(--line-strong);font-weight:500}

/* ==================================================================
   المصادقة + صفحة بداية الموارد البشرية
   ================================================================== */
.authlink{
  display:block;margin-top:14px;text-align:center;
  font-size:12.5px;font-weight:600;color:var(--text-3);
  text-decoration:underline;text-underline-offset:3px;
}
.authlink:hover{color:var(--gold)}
.alert.auth-ok{background:var(--ok-soft);border-color:rgba(34,197,94,.32);color:var(--ok)}
.alert.auth-note{background:var(--gold-soft);border-color:var(--gold-line);color:var(--gold)}
.alert.auth-dev{
  background:rgba(124,179,255,.08);border-color:rgba(124,179,255,.3);color:#7CB3FF;
  font-size:11.5px;line-height:1.8;
}
.alert.auth-dev b{display:block;margin-bottom:3px}
.alert.auth-dev .inline{color:#7CB3FF;word-break:break-all}

/* ---------- شاشة الحساب ---------- */
.acct-panel{margin-top:14px}
.acct-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.acct-head .grow{flex:1}
.acct-sub{margin:3px 0 0;font-size:12px;color:var(--text-3)}
.acct-sub b{color:var(--text-2)}
.acct-tag{
  margin-inline-start:auto;padding:4px 10px;border-radius:999px;
  font-size:11px;font-weight:700;
  color:var(--gold);background:var(--gold-soft);border:1px solid var(--gold-line);
}
.acct-tag.is-off{color:var(--text-3);background:transparent;border:1px dashed var(--line-strong)}

/* ---------- صفحة بداية الموارد البشرية ---------- */
.home{max-width:980px}
.home-hi{margin-bottom:22px}
.home-hi h2{margin:0;font-size:22px;font-weight:700;letter-spacing:.2px}
.home-hi p{margin:5px 0 0;font-size:12.5px;color:var(--text-3)}
.home-alert{
  display:flex;flex-direction:column;gap:3px;margin-bottom:20px;padding:14px 16px;
  background:rgba(251,146,60,.07);border:1px solid rgba(251,146,60,.3);border-radius:12px;
  text-decoration:none;transition:.12s;
}
.home-alert:hover{border-color:rgba(251,146,60,.55);background:rgba(251,146,60,.1)}
.home-alert b{font-size:13.5px;color:#FB923C}
.home-alert span{font-size:11.5px;color:var(--text-3);line-height:1.7}
.home-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}
.home-card{
  display:flex;flex-direction:column;gap:5px;padding:20px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  text-decoration:none;transition:.14s;
}
.home-card:hover{border-color:var(--line-strong);background:var(--panel-2);transform:translateY(-2px)}
.home-card.is-main{border-color:var(--gold-line);background:linear-gradient(160deg,var(--gold-soft),var(--panel) 62%)}
.home-card.is-main:hover{border-color:var(--gold)}
.home-ic{font-size:22px;line-height:1;margin-bottom:7px}
.home-t{font-size:15px;font-weight:700;color:var(--text)}
.home-card.is-main .home-t{color:var(--gold)}
.home-d{font-size:12px;color:var(--text-3);line-height:1.65}
.home-s{margin-top:9px;font-size:11px;font-weight:600;color:var(--text-2)}
.home-admin{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.home-admin-t{display:block;font-size:11px;font-weight:700;color:var(--text-3);margin-bottom:10px;letter-spacing:.3px}
.home-admin-l{display:flex;gap:8px;flex-wrap:wrap}
.home-admin-l a{
  padding:8px 14px;border-radius:9px;font-size:12.5px;font-weight:600;
  color:var(--text-2);background:var(--panel);border:1px solid var(--line);text-decoration:none;transition:.12s;
}
.home-admin-l a:hover{color:var(--gold);border-color:var(--gold-line);background:var(--gold-soft)}
@media (max-width:640px){
  .home-hi h2{font-size:19px}
  .home-card{padding:16px}
}
.sw-weekend{background:rgba(255,255,255,.09);border-color:var(--line-strong)}
.bd-key .k b{font-weight:700;color:var(--text-2);font-size:10.5px}

/* ---------- فلاتر حالة الموظفين ---------- */
.empfilters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.empfilter{
  padding:7px 15px;border-radius:9px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--text-3);
  background:transparent;border:1px solid var(--line);transition:.12s;
}
.empfilter:hover{color:var(--text);background:var(--panel-2)}
.empfilter.is-on{color:var(--gold);background:var(--gold-soft);border-color:var(--gold-line)}
.emp-ended-tag{
  display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;
  color:var(--text-3);background:transparent;border:1px dashed var(--line-strong);
}

/* ---------- مؤشّر طلب الاستثناء ----------
   بيظهر **بس** لما يكون فيه طلب اتقدّم فعلًا — مفيش أي تنبيه تلقائي من
   مجرد وجود تأخير أو نقص. وزن بصري خفيف زي إشعار صغير: نقطة + كلمتين. */
.odot{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;white-space:nowrap;color:var(--text-3);
}
.odot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.odot.is-wait{color:var(--gold)}
.odot.is-ok{color:var(--ok)}
.odot.is-rej{color:var(--danger)}

/* ================= مركز المراجعة (sysaudit — Admin) ================= */
.alert-ok{background:var(--ok-soft);border:1px solid rgba(34,197,94,.35);color:#86efac}
.alert-error{background:var(--danger-soft);border:1px solid rgba(239,68,68,.35);color:#fca5a5}

/* --- العدّادات الملخّصة --- */
.sa-counters{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.sa-counter{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:104px;flex:1 1 104px;padding:12px 10px;border-radius:var(--r-md);
  background:var(--panel);border:1px solid var(--line)}
.sa-counter-val{font-size:22px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.sa-counter-lbl{font-size:11.5px;color:var(--text-3);margin-top:5px}
.sa-c-need{border-color:var(--gold-line)} .sa-c-need .sa-counter-val{color:var(--gold)}
.sa-c-crit{border-color:rgba(239,68,68,.4)} .sa-c-crit .sa-counter-val{color:var(--danger)}
.sa-c-warn .sa-counter-val{color:var(--c-warn)}
.sa-c-info .sa-counter-val{color:var(--c-leave)}
.sa-c-appr{border-color:rgba(45,212,191,.34)} .sa-c-appr .sa-counter-val{color:#2DD4BF}
.sa-c-done .sa-counter-val{color:var(--ok)}
.sa-c-ign .sa-counter-val{color:var(--text-3)}

/* --- الفلاتر --- */
.sa-filters{align-items:flex-end}
.sa-fl{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-2)}
.sa-fl .inp{min-width:120px}

/* --- قائمة الحالات --- */
.sa-list{display:flex;flex-direction:column;gap:12px}
.sa-card{background:var(--panel);border:1px solid var(--line);border-inline-start:3px solid var(--line-strong);
  border-radius:var(--r-md);padding:13px 15px}
.sa-card-critical{border-inline-start-color:var(--danger)}
.sa-card-warning{border-inline-start-color:var(--c-warn)}
.sa-card-info{border-inline-start-color:var(--c-leave)}
.sa-card-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sa-rule{font-weight:700;font-size:14px}
.sa-group{font-size:11.5px;color:var(--text-3);background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.sa-rulekey{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums;letter-spacing:.5px}
.sa-card-meta{margin-top:7px;font-size:13px;color:var(--text-2)}
.sa-card-meta b{color:var(--text)}
.sa-explain{margin:8px 0 0;font-size:12.5px;color:var(--text-3);line-height:1.7}
.sa-ev{margin-top:10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 16px}
.sa-ev-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;
  border-bottom:1px dotted var(--line);padding-bottom:4px}
.sa-ev-k{color:var(--text-3)}
.sa-ev-v{color:var(--text);font-weight:600;text-align:end;font-variant-numeric:tabular-nums}
.sa-note{margin-top:9px;font-size:12.5px;color:var(--text-2);background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px}
.sa-card-actions{margin-top:11px;display:flex;gap:8px;flex-wrap:wrap}

/* --- شرائح الأهمية والحالة --- */
.sa-sev{font-size:11px;font-weight:800;border-radius:999px;padding:3px 10px;line-height:1}
.sa-sev-critical{background:var(--danger-soft);color:var(--danger);border:1px solid rgba(239,68,68,.4)}
.sa-sev-warning{background:rgba(251,146,60,.12);color:var(--c-warn);border:1px solid rgba(251,146,60,.4)}
.sa-sev-info{background:rgba(124,179,255,.12);color:var(--c-leave);border:1px solid rgba(124,179,255,.4)}
.sa-st{font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;line-height:1;border:1px solid var(--line)}
.sa-st-need{color:var(--gold);border-color:var(--gold-line);background:var(--gold-soft)}
.sa-st-appr{color:#2DD4BF;border-color:rgba(45,212,191,.34);background:rgba(45,212,191,.1)}
.sa-st-done{color:var(--ok);border-color:rgba(34,197,94,.35);background:var(--ok-soft)}
.sa-st-ign{color:var(--text-3)}
.sa-st-res{color:var(--c-leave);border-color:rgba(124,179,255,.35)}

/* --- نافذة المراجعة --- */
.sa-modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;z-index:60;padding:18px}
.sa-modal[hidden]{display:none}
.sa-modal-card{background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:20px;max-width:440px;width:100%}
.sa-modal-card h3{margin:0 0 4px;font-size:15px}
.sa-modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:14px}

/* ================= إعدادات نظام المراجعة ================= */
.sa-master{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sa-master h2{margin:0 0 4px;font-size:16px}
.sa-master .muted{margin:0;font-size:12.5px;color:var(--text-3);max-width:640px;line-height:1.7}

/* مفتاح تبديل */
.sa-switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.sa-switch input{position:absolute;opacity:0;width:0;height:0}
.sa-switch-track{position:relative;width:42px;height:24px;border-radius:999px;background:var(--line-strong);
  border:1px solid var(--line-strong);transition:background .15s}
.sa-switch-track::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:inset-inline-start .15s}
.sa-switch input:checked + .sa-switch-track{background:var(--gold);border-color:var(--gold)}
.sa-switch input:checked + .sa-switch-track::after{inset-inline-start:20px}
.sa-switch input:disabled + .sa-switch-track{opacity:.4;cursor:not-allowed}
.sa-switch-label{font-size:13px;font-weight:700}
.sa-switch-sm .sa-switch-track{width:36px;height:20px}
.sa-switch-sm .sa-switch-track::after{width:14px;height:14px}
.sa-switch-sm input:checked + .sa-switch-track::after{inset-inline-start:18px}

/* تصنيف A/B/C */
.sa-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--text-3)}
.sa-klass{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;
  border-radius:6px;font-size:11px;font-weight:800;border:1px solid var(--line)}
.sa-klass-A{color:var(--ok);border-color:rgba(34,197,94,.4);background:var(--ok-soft)}
.sa-klass-B{color:var(--c-warn);border-color:rgba(251,146,60,.4);background:rgba(251,146,60,.1)}
.sa-klass-C{color:var(--text-3);border-color:var(--line-strong);background:var(--panel-2)}

.sa-group-block{margin-bottom:18px}
.sa-group-title{font-size:13.5px;font-weight:700;color:var(--gold);margin:0 0 9px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.sa-rule{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;margin-bottom:9px}
.sa-rule-off{opacity:.72;background:var(--panel-2);border-style:dashed}
.sa-rule-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sa-rule-key{font-size:11px;color:var(--text-3);font-weight:700;font-variant-numeric:tabular-nums;min-width:26px}
.sa-rule-title{font-size:13.5px;font-weight:700}
.sa-manual{font-size:10.5px;color:var(--c-leave);border:1px solid rgba(124,179,255,.35);border-radius:999px;padding:2px 8px}
.sa-sevsel{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-3)}
.sa-sevsel .inp{padding:5px 8px;font-size:12px;min-height:auto}
.sa-rule-explain{margin:8px 0 0;font-size:12px;color:var(--text-3);line-height:1.7}
.sa-rule-note{margin:7px 0 0;font-size:11.5px;border-radius:var(--r-sm);padding:6px 9px}
.sa-note-b{color:var(--c-warn);background:rgba(251,146,60,.08);border:1px solid rgba(251,146,60,.28)}
.sa-note-c{color:var(--text-3);background:var(--panel-2);border:1px solid var(--line);line-height:1.7}
.sa-thrs{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.sa-thr{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2)}
.sa-thr-inp{max-width:96px;padding:6px 8px;min-height:auto}

@media (max-width:720px){
  .sa-ev{grid-template-columns:1fr}
  .sa-counter{min-width:88px;flex-basis:88px}
  .sa-rule-head{gap:7px}
}

/* ===== المستخدمون + إعدادات البريد ===== */
.u-list{display:grid;gap:10px}
.u-card{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);padding:12px 14px}
.u-card.is-off{opacity:.62}
.u-card-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.u-name{font-weight:700;font-size:15px}
.u-display{font-weight:400;color:var(--text-3);font-size:13px}
.u-role{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--text-2)}
.u-role-finance{color:var(--gold);border-color:var(--gold)}
.u-state{font-size:11.5px;color:var(--text-3);margin-inline-start:auto}
.u-perms{margin-top:6px;font-size:12.5px;color:var(--text-2);line-height:1.7}
.u-meta{margin-top:3px;font-size:11.5px;color:var(--text-3)}
.u-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.u-form{display:grid;gap:12px;max-width:520px}
.u-form-actions{display:flex;gap:8px;margin-top:4px}
.u-test{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:16px;
  padding-top:16px;border-top:1px solid var(--line)}
.u-test .field{max-width:320px;flex:1 1 240px}

/* شبكة الصلاحيات — صفوف واضحة، بتشتغل على الموبايل زي ما هي */
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;margin-top:8px}
.perm-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--panel-2);cursor:pointer;font-size:13.5px;min-height:42px}
.perm-row input{width:17px;height:17px;flex:none;accent-color:var(--gold)}
.perm-row:hover{border-color:var(--gold)}

@media (max-width:720px){
  .u-form{max-width:none}
  .u-form-actions .btn{width:100%}
  .u-actions .btn{flex:1 1 auto;min-height:40px}
  .u-test{flex-direction:column;align-items:stretch}
  .u-test .field{max-width:none}
  .u-test .btn{width:100%;min-height:44px}
  .perm-grid{grid-template-columns:1fr}
  .u-state{margin-inline-start:0}
}

/* ============ تقويم اختيار التاريخ (date-picker.js) ============
   نفس رموز التصميم الموجودة بالظبط — مفيش لون جديد اتخلق هنا. */
.jdp-btn{
  display:flex;align-items:center;gap:8px;width:100%;
  text-align:right;cursor:pointer;font:inherit;
}
.jdp-btn::before{content:"📅";font-size:14px;line-height:1;opacity:.85}
.jdp-btn.is-empty{color:var(--text-3)}

.jdp{
  position:absolute;z-index:120;width:290px;padding:10px;
  background:var(--panel-2);border:1px solid var(--line-strong);
  border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.55);
  direction:rtl;
}
.jdp-h{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.jdp-t{flex:1;text-align:center;font-weight:600;font-size:13.5px}
.jdp-nav{
  width:28px;height:28px;flex:none;border-radius:7px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);
  color:var(--text-2);font-size:13px;line-height:1;
}
.jdp-nav:hover{color:var(--gold);border-color:var(--gold-line)}

.jdp-dow,.jdp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.jdp-dow{margin-bottom:4px}
.jdp-dow span{
  text-align:center;font-size:10px;color:var(--text-3);
  padding:2px 0;overflow:hidden;text-overflow:ellipsis;
}
.jdp-x{height:32px}
.jdp-d{
  height:32px;border-radius:7px;cursor:pointer;font-size:12.5px;
  background:transparent;border:1px solid transparent;color:var(--text);
}
.jdp-d:hover:not(:disabled){background:var(--panel);border-color:var(--line-strong)}
.jdp-d.is-today{border-color:var(--line-strong);font-weight:600}
.jdp-d.is-sel{
  background:var(--gold-soft);border-color:var(--gold-line);
  color:var(--gold);font-weight:700;
}
.jdp-d.is-off,.jdp-d:disabled{opacity:.28;cursor:not-allowed}

.jdp-f{display:flex;align-items:center;gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.jdp-grow{flex:1}
.jdp-act{
  padding:5px 10px;border-radius:7px;cursor:pointer;font-size:11.5px;
  background:var(--panel);border:1px solid var(--line);color:var(--text-2);
}
.jdp-act:hover{color:var(--gold);border-color:var(--gold-line)}

/* الشاشات الصغيرة: التقويم بيتوسّط ويكبر شوية عشان اللمس */
@media (max-width:520px){
  .jdp{width:calc(100vw - 24px);max-width:320px}
  .jdp-d,.jdp-x{height:38px}
}

/* ===== المستحق حتى اليوم — معاينة تقديرية في «الشهر الحالي» ===== */
/* رقم بس، بلون محايد ثابت مهما كانت حالة التسوية — الحالة نفسها (ولونها)
   موجودة على زرار الإجراء بس (settleActionButton)، عشان الخلية دي
   معلوماتية بحتة ومتكررش نفس المعنى بلون تاني. */
.payroll th.ent-col { white-space: nowrap; }
.ent-cell { min-width: 132px; }
/* بلا وزن/حجم/لون خاص — نفس مستوى خانة رقم الموبايل بالحرف (td.ltr
   مالهاش أي تنسيق نص خاص هي كمان)، عشان الرقم يفضل معلوماتي بحت من غير
   أي تمييز بصري زيادة. الجدول (.ecard-ent .ent-amt) بتاع كارت الموبايل
   بقاعدته الخاصة تحت وبيفضل زي ما هو. */
.ent-amt {
  display: block;
}
.ent-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; padding: 1px 7px;
  font-size: 10.5px; line-height: 1.7;
  background: transparent; cursor: pointer;
  color: var(--text-2, #9aa0a6);
  border: 1px solid var(--line, #2a2a2e); border-radius: 999px;
}
.ent-toggle:hover { color: var(--text-1, #e8e8ea); border-color: var(--gold, #e3c27e); }
.ent-toggle[aria-expanded="true"] { color: var(--gold, #e3c27e); border-color: var(--gold, #e3c27e); }
.ent-mini {
  width: 100%; border-collapse: collapse; margin-top: 6px;
  font-size: 11.5px;
}
.ent-mini th, .ent-mini td {
  padding: 4px 8px; border-bottom: 1px solid var(--line, #2a2a2e);
  text-align: start; white-space: nowrap;
}
.ent-mini th { color: var(--text-2, #9aa0a6); font-weight: 600; }
.ent-mini-wrap { max-height: 260px; overflow: auto; }
.ecard .ent-amt { font-size: 15px; }
@media (max-width: 720px) {
}


/* ===== حاسبة «تقدير المستحق حتى اليوم» =====
   النافذة بتورث تنسيق التسوية بالكامل (modal-settle / st-head / st-sec /
   st-more / st-final-amt / info-rows). اللي تحت ده بس عناصر التحكّم
   الجديدة: اختيار الطريقة، أزرار − / +، ومربّعات الخصومات. */


@media (max-width: 520px) {
  .en-step-lbl { flex: 1 1 100%; }
  .en-modes .en-radio { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   التسوية الموحّدة — نافذة فوق شاشة الحسابات.
   بتستعمل نفس أسطح نافذة التسوية القديمة (modal-settle / st-head /
   fset.st-sec / info-rows)، فالمظهر مألوف والفرق في المحرّك مش في الشكل.
   كل الأرقام بالخانات الغربية — قرار عرض، مش تغيير في أي حساب.
   ========================================================================== */
#m-settlement .modal-b > #usMain { display: block; }
.us-skel{color:var(--text-3);padding:26px 0;text-align:center}
.us-cut{color:var(--text-3);font-size:12px;margin-top:5px}

.us-result{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:14px 0 12px;padding:12px 14px;border-radius:var(--r-md);
  background:var(--gold-soft);border:1px solid var(--gold-line)}
.us-result span{color:var(--text-2);font-size:12.5px}
.us-result b{font-size:25px;font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.us-result b.is-neg{color:var(--danger)}

.us-modes{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.us-modes-l{color:var(--text-2);font-size:12.5px}
.us-seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r-md);overflow:hidden}
.us-seg-b{appearance:none;background:transparent;border:0;color:var(--text-2);
  font:inherit;font-size:12.5px;padding:9px 15px;cursor:pointer;min-height:40px}
.us-seg-b+.us-seg-b{border-inline-start:1px solid var(--line-strong)}
.us-seg-b:hover{color:var(--text)}
.us-seg-b.is-on{background:var(--gold-soft);color:var(--gold);font-weight:600}
.us-chip{font-size:11px;padding:3px 9px;border-radius:999px;
  background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold-line)}

.us-state{font-size:12px;color:var(--text-3);margin-bottom:10px}
.us-state.is-dirty{color:var(--gold)}
.us-state[hidden]{display:none}
.us-note{font-size:12.5px;color:var(--text-2);background:var(--gold-soft);
  border:1px solid var(--gold-line);border-radius:var(--r-sm);padding:8px 11px;margin-bottom:12px}
.us-note[hidden]{display:none}

.us-link{appearance:none;background:transparent;border:0;color:var(--gold);
  font:inherit;font-size:12.5px;cursor:pointer;padding:8px 2px;min-height:40px}
.us-link:hover{color:var(--gold-hover);text-decoration:underline}
.us-link.us-danger{color:var(--danger)}
.us-hint{color:var(--text-3);font-size:11.5px;margin:8px 0 0;line-height:1.65}

/* الحساب باليوم — مدخلين وبس */
.us-daily[hidden]{display:none}
.us-daily-in{display:flex;gap:12px;flex-wrap:wrap}
.us-fld{display:flex;flex-direction:column;gap:5px;flex:1 1 140px;min-width:0}
.us-fld>span{color:var(--text-2);font-size:12px}
.us-fld input,.us-fld select{background:var(--input);border:1px solid var(--line-strong);
  color:var(--text);border-radius:var(--r-sm);padding:10px 12px;font:inherit;font-size:15px;
  min-height:44px;width:100%;font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
.us-fld input:focus,.us-fld select:focus{outline:0;border-color:var(--gold-line)}
.us-fld select{direction:rtl}
.us-daily-out{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:13px;padding-top:11px;border-top:1px solid var(--line)}
.us-daily-out span{color:var(--text-2);font-size:12.5px}
.us-daily-out b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}

/* أيام الراحة — اقتراح + معتمد، زي نافذة التسوية القديمة */
.us-rest-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.us-rest-l{color:var(--text-2);font-size:12.5px}
.us-spin{display:inline-flex;align-items:center;gap:6px}
.us-spin .btn{min-width:36px;min-height:36px;padding:2px 0;font-size:17px;line-height:1}
.us-spin b{min-width:34px;text-align:center;font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums}
.us-rest-amt{margin-inline-start:auto;font-size:14px;font-weight:600;
  font-variant-numeric:tabular-nums}
.us-rest-amt.plus{color:var(--ok)}
.us-rest-amt.is-zero{color:var(--text-3)}

.us-chk{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer;
  font-size:13px;min-height:40px}
.us-chk input{width:17px;height:17px;accent-color:var(--gold);flex:0 0 auto}
.us-adj{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;
  padding-top:12px;border-top:1px solid var(--line)}

#usRecon .us-total-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:9px;padding-top:11px;border-top:1px solid var(--line-strong);
  font-size:15px;font-weight:700}
#usRecon .us-total-row span:last-child{font-variant-numeric:tabular-nums}
#usRecon .us-total-row .minus{color:var(--danger)}
#m-settlement .info-rows span.plus{color:var(--ok)}
#m-settlement .info-rows span.minus{color:var(--danger)}
#m-settlement .info-rows span.is-zero{color:var(--text-3)}

.us-days-t{margin-top:10px;max-height:260px;overflow-y:auto}
.us-days-r{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--line);font-size:12px;color:var(--text-2)}
.us-days-r span:first-child{font-variant-numeric:tabular-nums;color:var(--text-3);direction:ltr}

/* التذييل: «التفاصيل» على الشمال، والإجراءات على اليمين */
/* .btn هي inline-flex و.us-* كتير منها flex — والاتنين بيتغلبوا على
   السلوك الافتراضي لـ[hidden]، فأي عنصر بنخفيه من الـJS كان هيفضل ظاهر.
   نفس القاعدة الموجودة أصلًا لـ.modal-settle .field[hidden]. */
#m-settlement [hidden],.ent-cell [hidden]{display:none !important}
.us-foot{align-items:center}
.us-foot-grow{flex:1 1 auto}
#usDetailsBtn.is-on{border-color:var(--gold-line);color:var(--gold)}
.us-readonly .us-seg-b,.us-readonly .us-fld input,.us-readonly .us-fld select,
.us-readonly .us-chk input,.us-readonly .us-spin .btn{pointer-events:none;opacity:.55}
/* إعادة الفتح هي الإجراء الوحيد المسموح جوّه تسوية مقفولة (readonly) —
   حقل السبب لازم يفضل شغّال رغم القفل العام على باقي الحقول. */
.us-readonly .us-reopen-fld input{pointer-events:auto;opacity:1}

.st-pill.is-wait{background:var(--danger-soft);color:var(--danger);border-color:rgba(239,68,68,.35)}
.st-pill.is-done{background:var(--gold-soft);color:var(--gold);border-color:var(--gold-line)}

/* شاشة الحسابات: «المستحق حتى اليوم» معاينة بس — مفيش فتح ولا تفاعل هنا.
   مدخل التسوية الوحيد هو زرار «التسوية» في عمود الإجراءات. */
.ent-cell .se-info{display:block;width:100%;color:inherit}

/* زرار الإغلاق هدف لمس — لازم يفضل مريح على الموبايل. */
#m-settlement .modal-h .btn-icon{min-width:40px;min-height:40px}

@media (max-width:760px){
  .us-result b{font-size:22px}
  .us-seg{width:100%}
  .us-seg-b{flex:1 1 0;padding-inline:6px}
  .us-modes{flex-direction:column;align-items:flex-start;gap:8px}
  .us-modes .us-seg{width:100%}
  .us-chip{align-self:flex-start}
  .us-foot-grow{display:none}
  .us-rest-amt{margin-inline-start:0;width:100%}
  .us-foot .btn{flex:1 1 auto}
}

/* مصالحة الأيام + تفصيل الخصومات/السحوبات */
.us-howrow{padding-top:6px}
.us-how{margin-top:6px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--input)}
.us-how[hidden]{display:none}
.us-how-total{margin-top:4px;padding-top:6px;border-top:1px solid var(--line-strong);font-weight:700}
.us-how-of{color:var(--text-3);font-size:11.5px;margin:10px 0 2px}
.us-drill{border-bottom:1px solid var(--line)}
.us-drill-b{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;
  appearance:none;background:transparent;border:0;padding:7px 0;font:inherit;font-size:13px;
  color:var(--text-2);cursor:pointer;min-height:40px;text-align:inherit}
.us-drill-b:hover{color:var(--gold)}
.us-drill-b .minus{color:var(--danger);font-variant-numeric:tabular-nums}
.us-caret{font-style:normal;display:inline-block;transition:transform .15s;color:var(--text-3)}
.us-drill-b.is-open .us-caret{transform:rotate(90deg);color:var(--gold)}
.us-drill-body{padding:4px 12px 10px;border-inline-start:2px solid var(--gold-line);margin:0 6px 8px}
.us-drill-body[hidden]{display:none}
.us-drill-sum{margin-top:6px;padding-top:7px;border-top:1px solid var(--line-strong);font-weight:700}
.us-warn{color:var(--danger)}

/* بنود الإضافة/الخصم داخل التسوية: checkbox لكل بند + حالة صغيرة. المستبعد بيفضل مقروء (باهت + خط على القيمة). */
#m-settlement .info-rows > div.us-line{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;gap:10px;min-width:0;padding-bottom:7px}
#m-settlement .us-line-l{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;min-width:0;flex:1 1 0;cursor:pointer;color:var(--text-2)}
#m-settlement .us-line-l input{width:18px;height:18px;accent-color:var(--gold);flex:0 0 auto;margin:0}
#m-settlement .us-line-n{min-width:0;overflow-wrap:anywhere}
#m-settlement .us-line-s{font-style:normal;font-size:11px;line-height:1.6;color:var(--text-3);border:1px solid var(--line);border-radius:999px;padding:0 8px;white-space:nowrap}
#m-settlement .us-line-a{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
#m-settlement .us-line.is-off{opacity:.62}
#m-settlement .us-line.is-off .us-line-a{text-decoration:line-through;color:var(--text-3)}
#m-settlement .us-line.is-off .us-line-s{color:var(--danger);border-color:var(--danger)}
#m-settlement .us-line.us-sub{padding-inline-start:12px;border-inline-start:2px solid var(--gold-line)}
#m-settlement .us-grp{display:flex;justify-content:space-between;gap:12px;font-weight:700;color:var(--text-2)}
#m-settlement .us-grp .minus{color:var(--danger);font-variant-numeric:tabular-nums}
#m-settlement .us-grp-off{font-style:normal;font-weight:400;font-size:11.5px;color:var(--text-3)}
#m-settlement .us-line-l input:disabled{cursor:default}
#m-settlement .us-lines-hint{margin-top:8px}
#m-settlement .us-line-a{padding-top:1px}

/* حالة التسوية (لون/نص) بتبان على زرار الإجراء بس — settleActionButton.
   «المستحق حتى اليوم» رقم محايد ثابت دايمًا (.ent-amt فوق)، عشان الخلية
   المعلوماتية ما تكررش نفس المعنى بلون تاني. */

/* زرار الإجراء «التسوية» — لون التّون بيتحدد بـclass الزرار نفسه
   (btn-quiet/btn-danger/btn-primary) من settleActionButton، فمفيش قواعد
   لون إضافية هنا. الوسم الفرعي «مسودة» بجانبه لتمييز غير-مكتملة بس،
   بدون لون رئيسي جديد. */
.st-draft-badge{margin-inline-start:6px;vertical-align:middle}
@media (max-width:720px){ .st-draft-badge{display:block;margin-inline-start:0;margin-top:4px} }

/* كارت الموبايل: صف «المستحق حتى اليوم» معاينة بس */
.ecard-ent{width:100%;color:inherit;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;min-height:48px}
.ecard-ent .ent-amt{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}

/* fieldset عنده min-width ضمني (min-content) في كل المتصفحات، فأي سطر طويل
   جوّه بيمنع القسم إنه يضيق، والقسم بيطلع أعرض من النافذة نفسها على الموبايل.
   الإصلاح المعياري: min-width:0 على الـfieldset وعلى أولاد الـflex/grid،
   مع سماح بكسر الكلمات الطويلة. النافذة نفسها بتفضل جوّه الشاشة. */
#m-settlement .fset,
#m-settlement fieldset{min-width:0}
#m-settlement .info-rows{min-width:0}
#m-settlement .info-rows > div{min-width:0;flex-wrap:wrap}
#m-settlement .info-rows span{min-width:0;overflow-wrap:anywhere}
#m-settlement .us-drill-b{min-width:0}
#m-settlement .us-drill-b > span{min-width:0;overflow-wrap:anywhere}
/* السبب الجذري لتكسّر تفاصيل السحوبات/الخصومات لأعمدة ضيقة: .info-rows
   div{display:flex} (قاعدة عامة فوق) بتتطبّق على أي <div> جوّه .info-rows
   بما فيهم .us-drill-body نفسه (الحاوية) — يعني الحاوية كانت بتبقى صف
   flex أفقي وبتحشر كل حركة في عمود ضيق جنب التانية، بدل ما تترصّ كل حركة
   في سطرها. الإصلاح: .us-drill-body لازم display:block عشان كل حركة
   (اللي هي بالفعل <div> flex من نفس القاعدة العامة) تاخد عرض السطر كامل
   وترصّ تحت بعض. specificity#m-settlement) لازمة عشان تكسب .info-rows
   div. */
#m-settlement .us-drill-body{display:block}
/* المبلغ (رقم + ج.م) ثابت الطول دايمًا — ميتلفّش حتى لو التاريخ/السبب
   طويل واحتاج يلف لسطرين. */
#m-settlement .us-drill-body > div > span:last-child{white-space:nowrap;flex-shrink:0}
#m-settlement .us-hint{overflow-wrap:anywhere}
#m-settlement .us-days-r{min-width:0}
#m-settlement .us-days-r span{min-width:0;overflow-wrap:anywhere}

/* الحساب باليوم — سطر الحضور الفعلي + مؤشر التعديل اليدوي */
.us-daily-attend{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.us-daily-attend .info-rows > div{padding-bottom:0;border-bottom:none}
.us-daily-mod{margin-top:8px;padding:7px 10px;border-radius:var(--r-sm);
  background:var(--gold-soft);border:1px solid var(--gold-line);
  color:var(--text-2);font-size:11.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.us-daily-mod[hidden]{display:none}
.us-daily-mod .us-link{padding:2px 0;font-size:11.5px}

/* تتبّع نص اليوم في التفاصيل — سطر فرعي هادي تحت صف اليوم نفسه */
.us-days-sub{font-size:11px;color:var(--text-3);padding-top:0;padding-bottom:6px;border-bottom:none}
.us-days-sub span:nth-child(2){color:var(--text-3)}
.us-days-sub span:nth-child(3){color:var(--ok);font-variant-numeric:tabular-nums}

/* Finance summary cards — balanced responsive grid */
#monthStats.stats{
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
}
#monthStats .stat{
  min-width:0;
  min-height:72px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
#monthStats .stat span{
  line-height:1.35;
  min-height:30px;
}
#monthStats .stat b{
  line-height:1.2;
  white-space:nowrap;
}

@media (max-width:720px){
  #monthStats.stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  #monthStats .stat{
    min-height:76px;
    padding:9px 10px;
  }
  #monthStats .stat span{
    min-height:30px;
    font-size:10.5px;
  }
  #monthStats .stat b{
    font-size:15px;
  }
  #monthStats .stat.is-priority b{
    font-size:17px;
  }
}

/* Finance summary — 8 equal cards on one desktop row */
#monthStats.stats{
  grid-template-columns:repeat(8,minmax(0,1fr));
}
#monthStats .stat{
  background:var(--panel-2);
  min-height:76px;
}
#monthStats .stat.is-minor{
  background:var(--panel-2);
}
#monthStats .stat span{
  overflow-wrap:break-word;
}
#monthStats .stat b{
  white-space:normal;
  overflow-wrap:break-word;
}

@media (max-width:720px){
  #monthStats.stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* التسوية الموحّدة — بطاقة الإجمالي مستقلة وثابتة فوق، و«مفردات الحساب» قسم منفصل تحتها (عرض فقط — مفيش أي تغيير في الحساب). */
#m-settlement .us-result{position:sticky;top:6px;z-index:3;align-items:center;margin:12px 0 14px;padding:12px 14px;
  border-radius:var(--r-md);border:1px solid var(--gold-line);background-color:var(--panel);
  background-image:linear-gradient(var(--gold-soft),var(--gold-soft));box-shadow:0 8px 16px rgba(0,0,0,.35)}
#m-settlement .us-result-l{display:flex;flex-direction:column;gap:3px;min-width:0}
#m-settlement .us-result-l span{font-size:13px;font-weight:700;color:var(--text)}
#m-settlement .us-result-l small{font-size:11.5px;line-height:1.5;color:var(--text-3);overflow-wrap:anywhere}
#m-settlement .us-result b{flex:0 0 auto;font-size:28px;white-space:nowrap}
#m-settlement .us-items{border-color:var(--line-strong)}
#m-settlement .us-items > legend{color:var(--gold);font-weight:700}
#m-settlement .us-items-hint{margin:0 0 10px;color:var(--text-3)}
@media (max-width:560px){
  #m-settlement .us-result{padding:10px 12px}
  #m-settlement .us-result b{font-size:22px}
}