/* ============================================================================
   admin.css — شاشة إدارة الحسابات لمدير المنصة (دفعة الردم 3 · F8)
   يعتمد رموز design-system.css بالكامل (ثيمات + وضع داكن + RTL تلقائياً).
   ============================================================================ */

.admin-wrap {
  max-width: 880px;
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.admin-section { display: flex; flex-direction: column; gap: var(--sp-3); }

.section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.section-title {
  font-family: var(--display-font);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-1);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.section-title i { color: var(--accent); font-size: .9em; }
.section-hint { color: var(--text-3); font-size: var(--fs-sm); margin: 0 0 var(--sp-1); }

/* قسم المعلّقين بطلٌ بحدّ تنبيهي خفيف */
.pending-section {
  background: var(--st-warn-soft);
  border: 1px solid color-mix(in srgb, var(--st-warn) 26%, transparent);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.pending-section .section-title i { color: var(--st-warn); }

.count-pill {
  min-width: 1.6rem;
  height: 1.6rem;
  padding-inline: var(--sp-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  margin-inline-start: auto;
}
.count-pill.alert { background: var(--st-warn); color: #fff; }

/* بطاقات الحسابات */
.acct-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }

.acct-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--elev-1);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.acct-card:hover { box-shadow: var(--elev-2); }
.acct-card.needs-action { border-inline-start: 3px solid var(--st-warn); }

.avatar {
  flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: grid; place-items: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
}

.acct-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.acct-name {
  font-weight: var(--fw-semi); color: var(--text-1); font-size: var(--fs-md);
  display: flex; align-items: center; gap: var(--sp-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-sub { color: var(--text-3); font-size: var(--fs-xs); }

.self-tag {
  font-size: var(--fs-xs); font-weight: var(--fw-med);
  background: var(--bg-raised); color: var(--text-2);
  padding: 1px var(--sp-2); border-radius: var(--r-pill);
}

/* شارة الحالة */
.status-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
}
.status-active  { background: var(--st-ontime-soft);  color: var(--st-ontime); }
.status-frozen  { background: var(--st-pending-soft); color: var(--st-pending); }
.status-pendingapproval { background: var(--st-warn-soft); color: var(--st-warn); }

.acct-actions { flex: 0 0 auto; display: flex; gap: var(--sp-2); }
.acct-act { flex: 0 0 auto; }

.btn.sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }

/* زرّ فعل هدّام (حذف) — لمسة حمراء خفيفة بلا صراخ */
.btn-danger-soft {
  background: var(--st-late-soft);
  color: var(--st-late);
  border: 1px solid transparent;
}
.btn-danger-soft:hover:not(:disabled) {
  background: color-mix(in srgb, var(--st-late) 18%, transparent);
}
.btn-danger {
  background: var(--st-late);
  color: #fff;
  border: 1px solid transparent;
}
.btn-danger:hover:not(:disabled) { filter: brightness(.94); }

/* حالات فارغة سطرية */
.empty-inline {
  padding: var(--sp-4);
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-sm);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
}
.empty-inline.ok {
  color: var(--st-ontime);
  border-color: color-mix(in srgb, var(--st-ontime) 30%, transparent);
  background: var(--st-ontime-soft);
}
.empty-inline.ok i { margin-inline-end: var(--sp-2); }

.empty-ico { font-size: 2.5rem; color: var(--text-3); margin-bottom: var(--sp-3); }

/* هياكل تحميل */
.skeleton-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.skeleton-card {
  height: 3.75rem;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--bg-raised) 25%, var(--bg-input) 37%, var(--bg-raised) 63%);
  background-size: 400% 100%;
  animation: adminShimmer 1.4s ease infinite;
}
@keyframes adminShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* مربّع تأكيد الأفعال الهدّامة */
.confirm-modal {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin-inline: auto;
  transform: translateY(-50%);
  z-index: 1200;
  width: min(420px, calc(100vw - 2rem));
  background: var(--bg-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-4);
  padding: var(--sp-6);
  text-align: center;
  animation: confirmPop var(--t-base) var(--ease-out);
}
@keyframes confirmPop { from { opacity: 0; transform: translateY(-46%) scale(.96); } }

.confirm-ico {
  width: 3.25rem; height: 3.25rem;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  font-size: var(--fs-xl);
}
.confirm-ico.warn   { background: var(--st-pending-soft); color: var(--st-pending); }
.confirm-ico.danger { background: var(--st-late-soft);    color: var(--st-late); }

.confirm-title { font-family: var(--display-font); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-1); margin: 0 0 var(--sp-2); }
.confirm-body  { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-normal); margin: 0 0 var(--sp-5); }
.confirm-actions { display: flex; gap: var(--sp-3); justify-content: center; }
.confirm-actions .btn { min-width: 7rem; }

@media (max-width: 768px) {
  .admin-wrap { padding: var(--sp-4) var(--sp-3) calc(var(--sp-12) + 60px); }
  .acct-card { flex-wrap: wrap; }
  .acct-actions, .acct-act { width: 100%; }
  .acct-actions .btn, .acct-act { flex: 1 1 auto; justify-content: center; }
  .status-chip { order: 3; }
}