/* =========================================================
   hr.css — تنسيقات المرحلة 2: HR / الحضور / الهيكل الوظيفي
   ========================================================= */

.section-grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); animation: fadeUp .45s var(--ease); }
.card.wide{ grid-column: 1 / -1; }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.card-head h3{ margin:0; font-size:1rem; }
.hint-text{ font-size:.78rem; color: var(--text-dim); margin:6px 0 14px; }

.form-grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 4px; }
.form-grid .field{ grid-column: span 1; min-width:0; } /* min-width:0 يمنع تجاوز عرض العمود بمحتوى طويل */
.form-actions{ grid-column: 1 / -1; display:flex; justify-content:space-between; gap:10px; margin-top:6px; flex-wrap:wrap; }
.form-grid select{
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px;
  background: var(--surface-2); color: var(--text); font-size:.9rem; width:100%;
}

/* ملاحظة: التكيّف مع الشاشات الصغيرة الآن يتم تلقائيًا عبر auto-fit
   في .section-grid و .form-grid أعلاه — بدون حاجة لـ media query هنا،
   وبالتالي بيشتغل صح حتى داخل الـ Modal الضيق مش بس الموبايل. */

/* ---- جدول عام ---- */
.table-wrap{ overflow-x:auto; border-radius: var(--radius-sm); border:1px solid var(--border); }
.data-table{ width:100%; border-collapse: collapse; font-size:.85rem; min-width: 520px; }
.data-table th{
  background: var(--surface-2); color: var(--text-dim); text-align:right;
  padding: 11px 14px; font-weight:700; font-size:.78rem; border-bottom:1px solid var(--border);
}
.data-table td{ padding: 11px 14px; border-bottom:1px solid var(--border); }
.data-table tbody tr{ transition: background .15s var(--ease); }
.data-table tbody tr:hover{ background: var(--surface-2); }
.data-table tbody tr:last-child td{ border-bottom:none; }
.empty-row{ text-align:center; color: var(--text-dim); padding: 22px !important; }

.btn-ghost.small{ padding:6px 10px; font-size:.75rem; min-height:32px; }
.btn-ghost:disabled, .btn-primary:disabled{ opacity:.45; cursor:not-allowed; transform:none !important; }

/* ---- شارات حضور/انصراف (تمييز بصري واضح) ---- */
.badge{ padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; gap:5px; }
.badge-in{ background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.badge-in::before{ content:'●'; }
.badge-out{ background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.badge-out::before{ content:'●'; }

/* ---- Modal ----
   ملاحظة تصميم مهمة: الـ Modal معلَّق من الأعلى (مش متمركز رأسيًا)
   عمدًا، لأن التمركز الرأسي بيتعارض مع ظهور لوحة المفاتيح على
   الموبايل (بيغطي الحقول أو يدفع الـ Modal بشكل غير متوقع). كمان
   الهيدر (العنوان + زر الإغلاق) ثابت (sticky) فوق أثناء السكرول
   لو محتوى النموذج طويل. */
.modal{
  position: fixed; inset:0; background: rgba(10,15,30,.55);
  display:flex; align-items:flex-start; justify-content:center;
  padding: 16px; padding-top: max(16px, env(safe-area-inset-top));
  z-index: 300; opacity:0; visibility:hidden; transition: opacity .25s var(--ease), visibility .25s;
  overflow-y: auto;
}
.modal:not(.hidden){ opacity:1; visibility:visible; }
.modal-box{
  background: var(--surface); border-radius: var(--radius-lg);
  width:100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y:auto; position:relative;
  box-shadow: var(--shadow-lg);
  animation: cardIn .3s var(--ease);
  margin-top: 6vh;
}
/* على الشاشات الكبيرة (تابلت فأكبر)، نكبّر المودال تدريجيًا عشان
   الجداول العريضة (زي تفاصيل المعمل/الأشعة اللي فيها أعمدة كتير)
   تتعرض كاملة بدون Scroll أفقي مزعج. الموبايل يفضل زي ما هو تمامًا
   (max-width: 460px) لأنه مش محتاج المساحة دي أصلًا. */
@media (min-width: 640px){
  .modal-box{ max-width: 640px; }
}
@media (min-width: 900px){
  .modal-box{ max-width: 820px; }
}
@media (min-width: 1200px){
  .modal-box{ max-width: 1000px; }
}
.modal-box-inner{ padding: 20px 22px 24px; }
.modal-close{
  position:absolute; left:14px; top:14px; background:var(--surface-2); border:none;
  width:38px; height:38px; border-radius:50%; font-size:1.05rem; color:var(--text-dim);
  transition: background .18s var(--ease), color .18s var(--ease);
  z-index: 2;
}
.modal-close:hover{ background: var(--bg); color:var(--text); }
.modal-box h3{
  margin: 0; padding: 16px 22px 16px 60px; font-size: 1.02rem;
  position: sticky; top:0; background: var(--surface); border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; z-index: 1;
}
#qrCanvas{ display:block; margin: 0 auto 12px; border-radius: var(--radius-sm); }
.qr-label{ text-align:center; font-size:.85rem; color: var(--text-dim); }

.pay-result{ margin-top:12px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px; font-size:.85rem; line-height:1.9; }
.net-highlight{ color: var(--accent); font-weight:800; }
.deduct-list{ display:flex; flex-direction:column; gap:6px; margin: 8px 0 14px; }
.deduct-item{ display:flex; align-items:center; justify-content:space-between; background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 12px; font-size:.82rem; }

/* ---- كاميرا التحقق ---- */
.camera-box{
  position: relative; width:100%; aspect-ratio: 4/3; background: var(--surface-2);
  border: 1.5px dashed var(--border); border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center; overflow:hidden; margin: 12px 0;
}
.camera-box video, .camera-box img{ width:100%; height:100%; object-fit:cover; }
.cam-placeholder{ color: var(--text-dim); font-size:.85rem; }
.cam-placeholder.cam-error-text{
  color: var(--danger); font-size:.78rem; font-weight:600; padding: 0 16px; text-align:center; line-height:1.6;
}
.cam-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.file-upload-btn{ display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.match-box{
  margin-top: 12px; background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success); border-radius: var(--radius-sm); padding: 10px 14px; font-size:.85rem;
}
.match-box.match-warning{
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  color: color-mix(in srgb, var(--text) 75%, var(--warning));
}
.camera-box.small{ aspect-ratio: 1/1; max-width: 220px; margin: 10px auto; }
.ref-face-box{ margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 12px; }
.ref-face-box h4{ margin: 0 0 4px; font-size: .85rem; }
.emp-preview{
  margin: 8px 0 4px; background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: .85rem; animation: fadeUp .25s var(--ease);
}

/* ---- الهيكل الوظيفي (Tree) ---- */
.org-tree{ overflow-x:auto; padding: 20px 10px; }
.org-node{ display:flex; flex-direction:column; align-items:center; }
.org-children{ display:flex; gap: 22px; margin-top: 26px; position:relative; padding-top: 22px; }
.org-children::before{ content:''; position:absolute; top:0; right:50%; left:50%; height:22px; }
.org-node > .org-box{ position:relative; }
.org-children .org-node{ position:relative; }
.org-children .org-node::before{
  content:''; position:absolute; top:-22px; right:50%; width:1px; height:22px; background: var(--border);
}
.org-box{
  background: var(--surface); border:1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 18px; font-size:.85rem; font-weight:700; white-space:nowrap;
  display:flex; align-items:center; gap:8px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  box-shadow: var(--shadow-sm);
}
.org-box:hover{ transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.org-count{
  background: var(--accent); color:#fff; border-radius:999px; font-size:.7rem;
  padding: 1px 8px; font-weight:800;
}

/* ---- فاتورة الوارد (نظام الصيدليات) ---- */
.invoice-items-box{ display:flex; flex-direction:column; gap:8px; margin: 10px 0; }
.invoice-item-row{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr)) auto;
  gap:8px; align-items:center; background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 8px; border:1px solid var(--border);
}
.invoice-item-row input{
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px;
  font-size:.82rem; background: var(--surface); color: var(--text); width:100%; box-sizing:border-box; min-height:38px;
}
.invoice-item-row .remove-invoice-row{ min-width:32px; }

/* ---- مقارنة بصرية بين الصورة المصوَّرة الآن والمرجعية ---- */
.face-compare-box{ margin-top:12px; }
.compare-pair{ display:flex; gap:12px; flex-wrap:wrap; }
.compare-pair > div{ flex:1; min-width:120px; text-align:center; }
.compare-pair img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius: var(--radius-sm); border:2px solid var(--border); }
.compare-pair span{ display:block; font-size:.72rem; color: var(--text-dim); margin-top:4px; }

.compare-thumbs{ display:flex; gap:6px; }
.compare-thumbs img{ width:44px; height:44px; object-fit:cover; border-radius:6px; border:1px solid var(--border); cursor:pointer; }

/* ---- معاينة الطباعة القابلة للتعديل ---- */
.print-preview-area{
  background: #fff; color:#111; border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 18px; max-height: 50vh; overflow-y:auto; font-size:.85rem;
}
.print-preview-area table{ width:100%; border-collapse:collapse; margin-top:10px; }
.print-preview-area td, .print-preview-area th{ border:1px solid #ccc; padding:6px 10px; font-size:.8rem; }
.print-preview-area .net-row td{ font-weight:bold; background:#f3f7fd; }

/* ---- نظام التعيين (بالساعة / مرتب ثابت) ---- */
.payment-type-toggle{ display:flex; gap:16px; margin-bottom:10px; font-size:.85rem; }
.payment-type-toggle label{ display:flex; align-items:center; gap:6px; cursor:pointer; }
.pt-fields{ display:grid; gap:10px; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); margin-bottom:10px; }

/* ---- عداد نسبة إنجاز ساعات المرتب الثابت ---- */
.progress-track{ width:100%; height:6px; background: var(--surface-2); border-radius:4px; margin:4px 0 2px; overflow:hidden; }
.progress-fill{ height:100%; background: var(--accent); border-radius:4px; transition: width .3s var(--ease); }
.progress-fill.over{ background: var(--warning); }

/* ---- تمييز زر تسجيل الحضور عن الانصراف ---- */
#submitAttendanceBtn.btn-attendance-in{ background: linear-gradient(135deg, var(--success), #1f8f63); }
#submitAttendanceBtn.btn-attendance-out{ background: linear-gradient(135deg, var(--warning), #d98a1f); }
.late-tag{
  display:inline-flex; align-items:center; gap:3px; background: var(--danger); color:#fff;
  font-size:.68rem; font-weight:800; padding: 2px 7px; border-radius: 999px; margin-right:5px;
}