/* ════════════════════════════════════════════════════════════════════════
   ADMIN CENTER 2.0 — تصميم خانة «تخصيص الأدمن» (2026-06-12)
   ────────────────────────────────────────────────────────────────────────
   (1) بطاقات الإحصاءات الأربع — كانت تُرسم divs عارية (أصناف ac-stat-*
       مستخدمة 23 مرة في index.html بلا أي تعريف CSS بالمستودع كله).
   (2) طبقة تجاوب كاملة للخانة: جوال/آيفون/أندرويد — المودالات أوراق سفلية
       ≤480px، أزرار ≥44px، صفر تمرير أفقي، safe-area.
   فلسفة clamp(min, vw, الأصل): الديسكتوب سقف لا يتغير (نمط المنصة المجرَّب).
   يُحمَّل قبل 99-performance-mode.css (الذي يجب أن يبقى آخر stylesheet دائماً
   بعقده الموثق) — لا تعارض خصائص بينهما: قواعدنا أصناف جديدة أو media queries
   على ids المودالات بخصائص لا يلمسها وضع الأداء.
   ════════════════════════════════════════════════════════════════════════ */

/* ═══ (1) الداشبورد العلوي — البطاقات الأربع ═══ */

.ac-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.6vw, 14px);
  margin-bottom: 16px;
}
/* تابلت: 2×2 */
@media (max-width: 1024px) {
  .ac-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* جوال صغير جداً: عمود واحد */
@media (max-width: 360px) {
  .ac-stats-grid { grid-template-columns: 1fr; }
}

.ac-stat-card {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 14px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  padding: clamp(10px, 2.4vw, 16px);
  min-width: 0; /* يمنع انفجار الشبكة بالنصوص الطويلة */
}

.ac-stat-icon {
  width: clamp(38px, 9vw, 46px);
  height: clamp(38px, 9vw, 46px);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.95rem, 2.6vw, 1.2rem);
  flex-shrink: 0;
}

.ac-stat-body { min-width: 0; flex: 1; }

.ac-stat-value {
  font-size: clamp(1rem, 3.4vw, 1.4rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-stat-label {
  font-size: clamp(0.7rem, 1.9vw, 0.8rem);
  color: var(--muted);
  margin-top: 2px;
}

/* سطر «اسم الأدمن — فعله» تحت بطاقة آخر نشاط */
.ac-stat-sub {
  font-size: 0.72rem;
  color: var(--text2, var(--muted));
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* بطاقة «محاولات مرفوضة» قابلة للنقر — تفتح السجل مفلتراً */
.ac-stat-clickable { cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.ac-stat-clickable:hover,
.ac-stat-clickable:focus-visible {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.12);
  transform: translateY(-1px);
  outline: none;
}
.ac-stat-clickable:active { transform: translateY(0); }
.ac-stat-go { font-size: 0.62rem; opacity: 0.65; margin-inline-start: 3px; }

/* ═══ (2) شارة «قديمة» للصلاحيات الميتة الممنوحة ═══ */

.ace-dead-badge {
  display: inline-block;
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 6px;
  margin-inline-start: 5px;
  vertical-align: middle;
}
.ace-perm-item.is-dead .ace-perm-text { opacity: 0.8; }

/* ═══ (3) التجاوب الكامل للخانة — جوال/آيفون/أندرويد ═══ */

/* صفر تمرير أفقي داخل الخانة بأي مقاس */
#pg-admin-customization { overflow-x: clip; }
#pg-admin-customization .a-card { min-width: 0; }

/* فلاتر السجل: التواريخ والقوائم لا تنفجر */
#aalFilterBar select.a-input,
#aalFilterBar input.a-input { max-width: 100%; min-width: 0; }

@media (max-width: 768px) {
  /* شريط أدوات المحرر (تحديد الكل/إلغاء/مثلي تماماً/فتح/طي/تراجع):
     يلتف بلا انزياح أفقي والبحث يأخذ سطره */
  #pg-admin-customization .ace-toolbar { gap: 6px; }
  #pg-admin-customization .ace-toolbar .a-input { flex: 1 1 100%; min-width: 0; }
  #pg-admin-customization .ace-toolbar .a-btn { flex: 1 1 auto; justify-content: center; }

  /* شبكة الصلاحيات: عمود واحد */
  #pg-admin-customization .ace-perm-grid { grid-template-columns: 1fr !important; }
  #pg-admin-customization .ace-groups-grid,
  #pg-admin-customization .ace-groups-grid.ace-two-col { grid-template-columns: 1fr !important; }

  /* مربعات المعاينة: عمود واحد مريح */
  #pg-admin-customization .ace-tiles-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  /* بطاقات الأدمنز: عمود واحد (الـ media الأصلية ≥720px عمودان — هنا توكيد) */
  #pg-admin-customization .ace-admin-list { grid-template-columns: 1fr !important; }

  /* gotcha موثق: inline style على .ace-topbar (grid-template-columns:1fr auto)
     يغلب أي media query — نعالجه بـ !important: زر الإنشاء ينزل سطراً كاملاً */
  #pg-admin-customization .ace-topbar { grid-template-columns: 1fr !important; }
  #pg-admin-customization .ace-topbar .a-btn { width: 100%; justify-content: center; }

  /* رأس بطاقة الأدمن المختار: الأزرار تلتف بعرض مريح */
  #pg-admin-customization .ace-admin-actions { width: 100%; }
  #pg-admin-customization .ace-admin-actions .a-btn { flex: 1 1 calc(50% - 4px); justify-content: center; }

  /* أهداف لمس ≥44px لكل أزرار الخانة ومودالاتها (آيفون/أندرويد) */
  #pg-admin-customization .a-btn,
  #aalDetailsModal .a-btn, #previewAdminModal .a-btn, #deleteAdminConfirmModal .a-btn,
  #createAdminWizardModal .a-btn, #editAdminPermsModal .a-btn, #editAdminInfoModal .a-btn,
  #changeAdminPasswordModal .a-btn, #acQuickCreateModal .a-btn,
  #acQuickCreateModal .acqc-save, #acQuickCreateModal .acqc-cancel {
    min-height: 44px;
  }
  #pg-admin-customization .a-input,
  #aalFilterBar .a-input { min-height: 44px; }

  /* safe-area لآيفون (الحواف الجانبية بالعرض الأفقي والسفلية للأوراق) */
  #pg-admin-customization {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* ═══ (4) المودالات أوراق سفلية مريحة بالجوال (≤480px) ═══
   القشور في index.html تحمل inline styles (max-width/max-height) —
   لذلك !important إلزامي هنا. عائلة .modal-bg يديرها محرك الطبقات في
   honest-ui-core (z-index تصاعدي + ESC + قفل تمرير) — لا نلمس z-index. */

@media (max-width: 480px) {
  #aalDetailsModal.modal-bg, #previewAdminModal.modal-bg, #deleteAdminConfirmModal.modal-bg,
  #createAdminWizardModal.modal-bg, #editAdminPermsModal.modal-bg, #editAdminInfoModal.modal-bg,
  #changeAdminPasswordModal.modal-bg, #acQuickCreateModal.modal-bg {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  #aalDetailsModal .modal-box, #previewAdminModal .modal-box, #deleteAdminConfirmModal .modal-box,
  #createAdminWizardModal .modal-box, #editAdminPermsModal .modal-box, #editAdminInfoModal .modal-box,
  #changeAdminPasswordModal .modal-box, #acQuickCreateModal .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 94vh !important;   /* fallback للمتصفحات بلا dvh */
    max-height: 94dvh !important;  /* يحترم شريط عناوين الجوال الديناميكي */
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
    padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
  }

  /* «منبثقة فوق منبثقة»: الورقة الأعلى يرفعها المحرك z-index تلقائياً —
     نضيف ظلاً علوياً يفصلها بصرياً عن الورقة التحتية */
  #aalDetailsModal .modal-box, #previewAdminModal .modal-box, #deleteAdminConfirmModal .modal-box,
  #createAdminWizardModal .modal-box, #editAdminPermsModal .modal-box, #editAdminInfoModal .modal-box,
  #changeAdminPasswordModal .modal-box, #acQuickCreateModal .modal-box {
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
  }
}

/* تكبير حقل التأكيد المطبوع بمودال الحذف على الجوال (لا zoom تلقائياً بآيفون) */
@media (max-width: 480px) {
  #deleteAdminConfirmModal #dacConfirmInput,
  #acQuickCreateModal input.a-input,
  #aalFilterBar input.a-input,
  #aalFilterBar select.a-input { font-size: 16px !important; }
}

/* ═══ (5) reduced-motion: نحترم تفضيل تقليل الحركة ═══ */
@media (prefers-reduced-motion: reduce) {
  .ac-stat-clickable { transition: none; }
}