/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.06s;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1;
}
.btn:active { transform: scale(0.98); }
.btn svg { flex-shrink: 0; }
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primary {
  background: var(--brand);
  color: white;
  border-color: var(--brand);
}
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: white; }

.btn--secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn--secondary:hover { background: var(--bg-subtle); border-color: var(--text-tertiary); }

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn--ghost:hover { background: var(--bg-subtle); color: var(--text-primary); }

.btn--danger {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}
.btn--danger:hover { background: #8B2408; border-color: #8B2408; color: white; }

.btn--sm { height: 30px; padding: 0 12px; font-size: 12px; }
.btn--lg { height: 42px; padding: 0 22px; font-size: 14px; }

/* Chips / status pills */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  white-space: nowrap;
}
.chip--draft   { background: var(--status-draft);   color: var(--status-draft-text); }
.chip--pending { background: var(--status-pending); color: var(--status-pending-text); }
.chip--progress{ background: var(--status-progress);color: var(--status-progress-text); }
.chip--blocked { background: var(--status-blocked); color: var(--status-blocked-text); }
.chip--done    { background: var(--status-done);    color: var(--status-done-text); }
.chip--muted   { background: var(--muted-chip);     color: var(--text-tertiary); }
.chip--info    { background: #FFF3CD; color: #8A5A00; border: 1px solid #F2D27A; }
.chip--warning { background: #FFE8D1; color: #A84B00; border: 1px solid #F4B67D; }
.chip--success { background: var(--success-soft); color: var(--success); border: 1px solid #A8D8C1; }
.chip--danger  { background: var(--danger-soft); color: var(--danger); border: 1px solid #E7ADAD; }
.chip__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}
.chip svg { width: 14px; height: 14px; }

/* Priority tag */
.priority {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: var(--radius-full); border: 1px solid transparent;
  font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.priority__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.priority--normal { color: var(--text-secondary); background: var(--bg-subtle); border-color: var(--border); }
.priority--high { color: #A84B00; background: #FFE8D1; border-color: #F4B67D; }
.priority--rush { color: var(--danger); background: var(--danger-soft); border-color: #E7ADAD; }

/* Shared service reference and dates */
.service-ref { color: var(--text-primary); font-weight: 500; }
.service-ref--missing-text { color: var(--text-muted); font-weight: 400; }
.date-cell { display: inline-flex; flex-direction: column; gap: 2px; min-width: 96px; }
.date-cell__label { color: var(--text-muted); font-size: 10px; font-weight: 500; }
.date-cell time { color: var(--text-primary); font-size: 12px; white-space: nowrap; direction: rtl; unicode-bidi: plaintext; }

/* Cards */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
}
.card--tight { padding: var(--sp-base); }
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-base);
  margin-bottom: var(--sp-base);
}
.card__title { font-size: var(--fs-lg); font-weight: 600; }
.card__subtitle { font-size: var(--fs-sm); color: var(--text-muted); }

/* KPI tile */
.kpi {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
  position: relative;
  transition: border-color 0.12s;
}
.kpi:hover { border-color: var(--border-strong); }
.kpi__label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.kpi__value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.kpi__delta {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.kpi__delta--up { color: var(--success); }
.kpi__delta--down { color: var(--danger); }
.kpi--danger .kpi__value { color: var(--danger); }
.kpi--warning .kpi__value { color: var(--warning); }
.kpi--success .kpi__value { color: var(--success); }

/* Grid helpers */
.grid { display: grid; gap: var(--sp-base); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (max-width: 900px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.stack { display: flex; flex-direction: column; gap: var(--sp-base); }
.stack--sm { gap: var(--sp-sm); }
.stack--lg { gap: var(--sp-lg); }
.row { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }

/* Tables */
/* الغلاف كان `overflow: hidden` — فالجدول الأعرض من الشاشة لا يُمرَّر بل
   يُقصّ: الأعمدة الزائدة تُحذف من العين ولا سبيل للوصول إليها. وعلى الجوّال
   كان المقصوص من ٤٣٩ إلى ٧٠٩ بكسل في شاشات القوائم كلها — أي أن الحالة
   والمبلغ وأزرار الإجراء تختفي. و`auto` يُبقي الحوافّ المستديرة مقصوصة
   كما كانت، ويُعيد ما ضاع. */
.table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
table.data {
  width: 100%;
  font-size: var(--fs-body);
  border-collapse: collapse;
}
table.data thead th {
  background: var(--bg-subtle);
  font-weight: 600;
  color: var(--text-secondary);
  text-align: right;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
table.data tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--bg-subtle); }
table.data tbody tr[data-clickable] { cursor: pointer; }
table.data .cell-mono { font-family: var(--font-mono); font-size: 12px; }
table.data .cell-num  { text-align: left; font-variant-numeric: tabular-nums; }
table.data .cell-center { text-align: center; }

/* Form controls */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  font-weight: 500;
}
.field__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.input, .select, .textarea {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  font-family: inherit;
  font-size: var(--fs-md);
  width: 100%;
}
/* ── الحقول اللاتينية ───────────────────────────────────────────────────────
   البريد والجوال والروابط وكلمات المرور محتواها لاتينيّ دائمًا، فتُفرض عليها
   عائلة الخط اللاتينية بدل خطّ المنصة العربي.

   والاختيار بنوع الحقل لا بصنفٍ يُضاف يدويًّا: أي حقل بريد يُكتب لاحقًا في
   أي شاشة يرث المعالجة بلا أن يتذكّرها كاتبه. وكان بعضها يضبط dir="ltr"
   وينسى الخط — فيظهر البريد بالاتجاه الصحيح وأرقامه بخطٍّ لا يدعمها.

   و locl 0 تمنع المتصفح من استبدال الأرقام بصيغتها المحلية (٠١٢ بدل 012).
   ───────────────────────────────────────────────────────────────────────── */
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[dir="ltr"],
.input--latin {
  font-family: var(--font-latin);
  font-feature-settings: 'locl' 0;
}

/* البريد والرابط لاتينيّان في الاتجاه أيضًا — يُكتبان من اليسار */
input[type="email"],
input[type="url"] { direction: ltr; text-align: left; }

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-tertiary) 50%),
                    linear-gradient(-45deg, transparent 50%, var(--text-tertiary) 50%);
  background-position: calc(12px) calc(50% - 3px), calc(18px) calc(50% - 3px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-left: 32px;
}

/* Filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-md) var(--sp-base);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-base);
  flex-wrap: wrap;
}
.filter-bar .input, .filter-bar .select { height: 32px; font-size: var(--fs-sm); width: auto; min-width: 140px; }
.filter-bar .flex-1 { flex: 1; min-width: 200px; }

/* Tabs */
.tabs {
  display: flex;
  gap: var(--sp-sm);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-lg);
  overflow-x: auto;
  scrollbar-width: none;           /* تمرير أفقي بلا شريط ظاهر على الجوّال */
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 10px 14px;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  white-space: nowrap;
}
.tab:hover { color: var(--text-primary); }
.tab--active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}

/* Object page header */
.obj-header {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  margin-bottom: var(--sp-base);
}
.obj-header__top {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-base);
  justify-content: space-between;
  flex-wrap: wrap;
}
.obj-header__id {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.obj-header__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--sp-sm);
}
.obj-header__meta {
  display: flex;
  gap: var(--sp-base);
  flex-wrap: wrap;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
}
.obj-header__meta-item {
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.obj-header__meta-item strong { color: var(--text-primary); font-weight: 600; }
.obj-header__actions { display: flex; gap: var(--sp-sm); align-items: center; }

/* Two-column detail layout */
.obj-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-base);
}
@media (max-width: 1100px) { .obj-layout { grid-template-columns: 1fr; } }

/* Timeline */
.timeline { position: relative; padding-right: 24px; }
.timeline::before {
  content: "";
  position: absolute;
  right: 8px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--border);
}
.timeline__item {
  position: relative;
  padding-bottom: var(--sp-base);
}
.timeline__item::before {
  content: "";
  position: absolute;
  right: -20px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  border: 2px solid var(--bg-surface);
}
.timeline__meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 2px;
}
.timeline__body {
  font-size: var(--fs-body);
  color: var(--text-primary);
}
.timeline__actor { font-weight: 600; }

/* Empty state */
.empty {
  text-align: center;
  padding: var(--sp-2xl) var(--sp-base);
  color: var(--text-tertiary);
}
.empty__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-md);
  border-radius: 50%;
  background: var(--bg-subtle);
  display: grid;
  place-items: center;
  font-size: 24px;
  color: var(--text-muted);
}
.empty__title { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.empty__body { font-size: var(--fs-md); }

/* Alerts / callouts */
.alert {
  padding: var(--sp-md) var(--sp-base);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--fs-md);
  display: flex;
  gap: var(--sp-sm);
  align-items: flex-start;
}
.alert--info    { background: var(--info-soft);    border-color: var(--info);    color: var(--info); }
.alert--warning { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.alert--danger  { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger); }
.alert--success { background: var(--success-soft); border-color: var(--success); color: var(--success); }

/* Toast */
.toast-region {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  pointer-events: none;
  padding: var(--sp-base);
  background: rgba(15, 23, 42, .32);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  animation: focus-backdrop-in .18s ease-out;
}
.toast {
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
  font-size: var(--fs-md);
  max-width: 400px;
  min-width: min(360px, calc(100vw - 32px));
  text-align: start;
  pointer-events: auto;
  animation: toast-in 0.16s ease-out;
  display: grid; grid-template-columns: 32px 1fr 30px; align-items: center; gap: 10px;
}
.toast__icon { width: 32px; height: 32px; border-radius: var(--radius-full); display: inline-grid; place-items: center; }
.toast--success .toast__icon { background: var(--success-soft); color: var(--success); }
.toast--warning .toast__icon { background: var(--warning-soft); color: var(--warning); }
.toast__message { font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; }
.toast__close { width: 30px; height: 30px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-muted); display: grid; place-items: center; }
.toast__close:hover { background: var(--bg-subtle); color: var(--text-primary); }
@keyframes toast-in {
  from { transform: translateY(10px) scale(.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: var(--sp-base);
  animation: focus-backdrop-in .18s ease-out;
}
.modal {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  max-width: 520px;
  width: 100%;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 28px 90px rgba(15, 23, 42, .34);
  max-height: 90vh;
  overflow-y: auto;
  animation: focus-dialog-in .2s ease-out;
}
/* نافذة أوسع لمحتوى ثريّ (جدول + شبكة معلومات + مسار اعتماد) لا يتّسع
   عرض التأكيد الافتراضي له بلا ازدحام */
.modal--wide { max-width: 640px; }
@keyframes focus-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes focus-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal__title { font-size: var(--fs-h3); margin-bottom: var(--sp-sm); }
.modal__actions { display: flex; gap: var(--sp-sm); justify-content: flex-start; margin-top: var(--sp-lg); }

/* Wizard steps */
.stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-lg);
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 4px 0;
}
.stepper__step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.stepper__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-surface);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted);
}
.stepper__step--done .stepper__dot {
  background: var(--brand);
  border-color: var(--brand);
  color: white;
}
.stepper__step--active .stepper__dot {
  background: var(--bg-surface);
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.stepper__step--active { color: var(--brand); font-weight: 600; }
.stepper__line {
  flex: 1;
  height: 1px;
  background: var(--border);
  min-width: 12px;
}

/* Progress bar */
.progress {
  background: var(--bg-inset);
  border-radius: var(--radius-full);
  height: 8px;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--brand);
  border-radius: inherit;
  transition: width 0.24s;
}

/* Utility */
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-success { color: var(--success); }
.text-brand { color: var(--brand); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-lg { font-size: var(--fs-lg); }
.text-right { text-align: left; } /* semantic 'end' in RTL */
.text-center { text-align: center; }
.font-mono { font-family: var(--font-mono); }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--sp-sm); }
.mb-md { margin-bottom: var(--sp-md); }
.mb-base { margin-bottom: var(--sp-base); }
.mb-lg { margin-bottom: var(--sp-lg); }
.mt-sm { margin-top: var(--sp-sm); }
.mt-base { margin-top: var(--sp-base); }
.mt-lg { margin-top: var(--sp-lg); }
.flex-1 { flex: 1; }
.hidden { display: none !important; }
.divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-base) 0;
}

/* Notifications list: بطاقة لكل إشعار برمز الفئة، والعنوان وشارته، والنص، والوقت، وسهم للفتح */
.notif-list { list-style: none; padding: 0 16px 16px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface, #fff);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.notif-item:hover { background: var(--bg-subtle); border-color: var(--border-strong, #cfd8e3); }
.notif-item--unread { border-inline-start: 3px solid var(--brand); background: var(--brand-soft, #eef6fb); }
.notif-item__icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-inset, #f3f6fa); color: var(--text-secondary);
}
.notif-item--action .notif-item__icon { background: #fff4e0; color: #b3600a; }
.notif-item--approval .notif-item__icon { background: #e6f1fb; color: var(--brand); }
.notif-item--status .notif-item__icon { background: #e8f5ec; color: #1e7a3c; }
.notif-item__body { flex: 1; min-width: 0; }
.notif-item__title { font-weight: 700; color: var(--text-primary); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-md); }
.notif-item__title .chip { margin-inline-start: 0 !important; }
.nowrap { white-space: nowrap; }
.notif-item__desc  { color: var(--text-secondary); font-size: var(--fs-md); margin-top: 4px; line-height: 1.7; }
.notif-item__foot  { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--text-muted); font-size: var(--fs-sm); }
.notif-item__foot svg { flex: 0 0 auto; }
.notif-item__go { flex: 0 0 auto; align-self: center; color: var(--text-muted); opacity: 0; transition: opacity .12s; }
.notif-item:hover .notif-item__go { opacity: 1; }
.notif-item__dot { display: none; }
.notif-item__meta { display: none; }

/* Profile card */
.profile-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--sp-lg);
}
@media (max-width: 780px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-side { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; }
.profile-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-text);
  display: grid; place-items: center;
  font-size: 40px; font-weight: 700;
  border: 3px solid var(--bg-surface);
  box-shadow: 0 0 0 1px var(--border);
}
.profile-name { font-size: 18px; font-weight: 700; color: var(--text-primary); text-align: center; }
.profile-role {
  font-size: 12px; color: var(--brand); font-weight: 600;
  padding: 4px 12px; border-radius: var(--radius-full);
  background: var(--brand-soft); border: 1px solid var(--brand);
}
.profile-fields { display: grid; gap: 14px; padding: 24px; }
.profile-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: baseline; }
@media (max-width: 500px) { .profile-row { grid-template-columns: 1fr; gap: 2px; } }
.profile-row__label { color: var(--text-tertiary); font-size: var(--fs-md); }
.profile-row__value { color: var(--text-primary); font-weight: 500; }

/* ── أدوات جداول عامة ─────────────────────────────────────────────────────
   يستخدمها أكثر من بوابة: سجلّ عملاء الجامعة (الجهة المعطّلة)، رضا العملاء
   (الصفّ القابل للفتح)، إنتاجية الموظفين (القسم بلا عمل مقيس). */
tr.is-dim td { opacity: .58; }
tr[data-open] { cursor: pointer; }
tr[data-open]:hover td { background: var(--bg-subtle); }

/* سبب عدم قياس إنتاجية قسم — يُعرض تحت اسمه لا في تلميح مخفي */
.dept-note { margin-top: 4px; max-width: 280px; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.6; }

/* ── شريط أرقام موجز أعلى الصفحة ───────────────────────────────────────────
   يستخدمه سجلّ عملاء الجامعة ورضا العملاء والأقسام. كان يسكن ورقة الجهات
   باسم clients-stat، وليس فيه ما يخصّ العملاء. */
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: var(--sp-base); }
.stat-tile { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); }
.stat-tile__value { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); line-height: 1.15; letter-spacing: -.01em; }
.stat-tile__label { margin-top: 6px; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.5; }
.stat-tile--ok { border-inline-start: 3px solid var(--success); }
.stat-tile--warn { border-inline-start: 3px solid var(--warning); }
.stat-tile--warn .stat-tile__value { color: var(--warning); }
@media (max-width: 900px) { .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acct { display: inline-flex; align-items: center; margin-top: 4px; padding: 2px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; white-space: nowrap; }
.acct--on      { background: #E7F5EE; color: #1F6B4A; }
.acct--off     { background: #F2F4F7; color: #6B7280; }
.acct--missing { background: #FDECEC; color: #A32B2B; }   /* بيانات بلا حساب — أخطر الحالات */
.acct--warn    { background: #FFF3E0; color: #8A5A12; }
.acct--none    { background: var(--bg-subtle); color: var(--text-muted); font-weight: 500; }
.seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.seg__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; white-space: nowrap; }
.seg__btn b { min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--bg-surface); color: var(--text-muted); font-size: 10px; }
.seg__btn.is-active { background: var(--bg-surface); color: var(--brand); box-shadow: 0 1px 4px rgba(15, 23, 42, .08); }
.seg__btn.is-active b { background: var(--brand); color: #fff; }
.person-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .person-grid { grid-template-columns: 1fr; } }
.person-card { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); }
.person-card--gap { border-color: var(--warning); background: #FFFCF5; }
.person-card__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.person-card__head b { font-size: var(--fs-sm); }
.person-card__head small { color: var(--text-muted); font-size: var(--fs-xs); }
.person-card__name { font-weight: 600; }
.person-card__mail { margin-top: 2px; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-xs); }
.person-card__empty { color: var(--text-muted); font-size: var(--fs-sm); }

/* بطاقة شخص (مدير قسم · مفوّض جهة · صاحب اعتماد) */

/* ── طلبات الشراء: مصدر الطلب وملاحظات الخلايا ────────────────────────────
   تشترك فيها شاشة الاعتمادات التنفيذية وشاشة تنبيهات المستودع: كلتاهما
   تحتاج تمييز ما أوقف طلب عميل عمّا هو تعويض مخزون. */
/* مصدر طلب الشراء: ما أوقف طلب عميل يُلوَّن ليُقرأ قبل بقية الصفّ */
.pr-origin b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.pr-origin small { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--fs-xs); }
.pr-origin--order b { color: #A32B2B; }

/* ملاحظة تحت خلية — سعر ناقص أو تحفّظ المالية أو تنبيه */
.pr-note { margin-top: 3px; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.pr-note--warn { color: #A32B2B; font-weight: 600; }

/* نوافذ ذات محتوى مركّب تحتاج عرضًا أوسع من نافذة التأكيد القصيرة.
   :has يوسّع النافذة بحسب محتواها بلا تغيير واجهة MIDAD.modal. */
.modal:has(.peek), .modal:has(.inq-form) { max-width: 600px; }

/* ════════════════════════════════════════════════════════════════════════
   الجداول على الشاشات الضيّقة — كل صفٍّ بطاقة
   ------------------------------------------------------------------------
   جدولٌ بتسعة أعمدة لا يُقرأ في ٣٧٥ بكسل مهما فعلنا: إمّا يُقصّ فيضيع نصفه،
   أو يُمرَّر أفقيًّا فيقرأ المستخدم عمودًا ويفقد سياق الصفّ. والحلّ أن يتحوّل
   الصفّ نفسه إلى بطاقة: كل خليّة سطرٌ فيه عنوان العمود وقيمته معًا.

   وعنوان العمود يُنسخ إلى كل خليّة في data-label من قِبل MIDAD.labelTables
   في app.js — فلا تُعدَّل ستّون شاشة، ولا يُنسى جدولٌ يُضاف لاحقًا.

   وصفوف الحالات الفارغة (colspan) تبقى على حالها — فهي رسالة لا بيانات.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  table.data,
  table.data tbody,
  table.data tbody tr,
  table.data tbody td { display: block; width: auto; }

  /* العناوين انتقلت إلى داخل الخلايا فلم يعد للرأس عمل */
  table.data thead { display: none; }

  table.data tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    padding: 4px 12px;
    margin-bottom: 10px;
  }
  table.data tbody tr:hover { background: var(--bg-surface); }
  table.data tbody tr:last-child { margin-bottom: 0; }

  table.data tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px dotted var(--border);
    text-align: start;
  }
  table.data tbody td:last-child { border-bottom: none; }

  table.data tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 42%;
    color: var(--text-tertiary);
    font-size: var(--fs-sm);
    font-weight: 600;
  }

  /* خلايا البريد والهاتف تحمل dir="ltr" ليُقرأ محتواها لاتينيًّا — وهو يقلب
     محور الصفّ فيهبط العنوان يسارًا وحده بين إخوته. وعكسُ الترتيب يُعيد
     العنوان يمينًا مع البقيّة، ويُبقي القيمة نفسها لاتينيّة الاتّجاه. */
  table.data tbody td[dir="ltr"] { flex-direction: row-reverse; }

  /* خليّة بلا عنوان: أزرار الإجراءات غالبًا — تأخذ السطر كاملًا */
  table.data tbody td[data-label=""]::before { content: none; }
  table.data tbody td[data-label=""] { justify-content: flex-start; }

  /* رسالة «لا توجد بيانات» ليست صفًّا من البيانات */
  table.data tbody td[colspan]::before { content: none; }
  table.data tbody td[colspan] { display: block; border-bottom: none; padding: 0; }
  table.data tbody tr:has(td[colspan]) { border: none; padding: 0; }

  /* أوّل خليّة هي هويّة الصفّ — تُقرأ كعنوان البطاقة */
  table.data tbody td:first-child { font-weight: 600; }

  /* الأرقام تبقى مصطفّة والنصّ لا يُقصّ */
  table.data tbody td .cell-num,
  table.data tbody td.cell-num { text-align: start; }
  table.data tbody th,
  table.data tbody td { white-space: normal; }

  /* لم يعد ثمّة ما يُمرَّر أفقيًّا */
  .table-wrap { overflow-x: visible; border: none; background: none; border-radius: 0; }
}