/* =====================================================================
   css/approvals.css — مركز الاعتمادات
   هوية بصرية مميزة: كحلي رسمي + ذهبي رئاسي (تختلف عن باقي الأقسام)
   البادئة apr- لكل الأصناف — صفر تعارض مع أي قسم آخر
   ===================================================================== */

/* ── الصفحة ── */
.apr-page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; direction: rtl; }

/* ── الترويسة ── */
.apr-hero {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(135deg, #172554 0%, #1e3a8a 55%, #92400e 130%);
  border-radius: 22px; padding: 26px 28px; color: #fff;
  box-shadow: 0 18px 45px -18px rgba(30, 58, 138, .55);
  border: 1px solid rgba(255, 255, 255, .14);
}
.apr-hero-icon {
  width: 66px; height: 66px; border-radius: 18px; flex-shrink: 0;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #fff;
  box-shadow: 0 10px 22px -8px rgba(245, 158, 11, .6);
}
.apr-hero-text { flex: 1; min-width: 220px; }
.apr-hero-text h1 { margin: 0 0 6px; font-size: 1.65rem; font-weight: 800; letter-spacing: -.3px; }
.apr-hero-text p { margin: 0; opacity: .85; font-size: .93rem; line-height: 1.6; }
.apr-hero-side { display: flex; gap: 10px; }

.apr-stat-chip {
  background: rgba(255, 255, 255, .12); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px;
  padding: 10px 16px; text-align: center; min-width: 86px; color: #fff;
}
.apr-stat-chip i { font-size: .95rem; opacity: .9; }
.apr-stat-chip span { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.apr-stat-chip label { font-size: .72rem; opacity: .8; }
.apr-chip-green { background: rgba(16, 185, 129, .22); }

/* ── التبويبات ── */
.apr-tabs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 22px 0 16px;
  background: #fff; border-radius: 16px; padding: 8px;
  box-shadow: 0 4px 18px -8px rgba(15, 23, 42, .15);
  border: 1px solid #e2e8f0;
}
.apr-tab {
  border: none; background: transparent; cursor: pointer;
  padding: 11px 18px; border-radius: 12px; font-size: .95rem; font-weight: 700;
  color: #475569; display: inline-flex; align-items: center; gap: 8px;
  transition: all .25s ease; font-family: inherit;
}
.apr-tab:hover { background: #f1f5f9; color: #1e293b; }
.apr-tab.active { background: linear-gradient(135deg, #1e3a8a, #1d4ed8); color: #fff; box-shadow: 0 6px 14px -6px rgba(30, 58, 138, .5); }
.apr-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: #ef4444; color: #fff; font-size: .72rem; font-weight: 800;
}
.apr-count-amber { background: #f59e0b; }
.apr-refresh {
  margin-inline-start: auto; border: none; width: 42px; height: 42px; border-radius: 12px;
  background: #f1f5f9; color: #334155; cursor: pointer; font-size: 1rem; transition: all .25s;
}
.apr-refresh:hover { background: #e2e8f0; transform: rotate(45deg); }

/* ── المحتوى والبطاقات ── */
.apr-content { display: flex; flex-direction: column; gap: 14px; }

.apr-card {
  background: #fff; border-radius: 18px; border: 1px solid #e2e8f0;
  box-shadow: 0 6px 20px -10px rgba(15, 23, 42, .12);
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.apr-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(15, 23, 42, .2); }

.apr-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap;
}
.apr-card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apr-type-badge {
  background: linear-gradient(135deg, #1e3a8a, #2563eb); color: #fff;
  padding: 7px 14px; border-radius: 10px; font-weight: 800; font-size: .9rem;
}
.apr-id {
  background: #eef2ff; color: #3730a3; border: 1px dashed #c7d2fe;
  padding: 3px 10px; border-radius: 8px; font-size: .75rem; direction: ltr;
}

.apr-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: .8rem; font-weight: 800; }
.apr-status-pending { background: #fef3c7; color: #92400e; }
.apr-status-approved { background: #d1fae5; color: #065f46; }
.apr-status-rejected { background: #fee2e2; color: #991b1b; }

.apr-card-body { padding: 16px 20px; }
.apr-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 12px; }
.apr-meta-item { font-size: .85rem; color: #475569; display: inline-flex; align-items: center; gap: 7px; }
.apr-meta-item i { color: #1e3a8a; opacity: .75; }

.apr-details summary {
  cursor: pointer; font-size: .85rem; font-weight: 700; color: #1e40af;
  padding: 8px 0; user-select: none; list-style: none;
}
.apr-details summary::-webkit-details-marker { display: none; }
.apr-payload {
  background: #0f172a; color: #e2e8f0; border-radius: 12px; padding: 14px;
  font-size: .78rem; direction: ltr; text-align: left; overflow-x: auto;
  max-height: 220px; margin: 6px 0 0;
}

/* ── جدول مقارنة التعديلات (الحالي ← المقترح) ── */
.apr-diff { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .85rem; }
.apr-diff th {
  background: #f1f5f9; color: #334155; padding: 8px 12px; text-align: right;
  font-weight: 800; border-bottom: 2px solid #e2e8f0; font-size: .78rem;
}
.apr-diff td { padding: 9px 12px; border-bottom: 1px solid #eef2f7; vertical-align: middle; }
.apr-diff-field { font-weight: 700; color: #1e3a8a; white-space: nowrap; }
.apr-diff-old { color: #991b1b; background: #fef2f2; text-decoration: line-through; text-decoration-color: rgba(153, 27, 27, .45); border-radius: 6px; }
.apr-diff-new { color: #065f46; background: #ecfdf5; font-weight: 700; border-radius: 6px; }
.apr-diff-arrow { color: #94a3b8; width: 34px; text-align: center; }
.apr-diff tr:last-child td { border-bottom: none; }

.apr-note {
  margin-top: 12px; background: #fffbeb; border-right: 4px solid #f59e0b;
  border-radius: 10px; padding: 10px 14px; font-size: .85rem; color: #78350f;
  display: flex; align-items: flex-start; gap: 8px;
}

.apr-actions { display: flex; gap: 10px; padding: 14px 20px; background: #f8fafc; border-top: 1px solid #e2e8f0; flex-wrap: wrap; }
.apr-btn {
  border: none; cursor: pointer; padding: 11px 22px; border-radius: 12px;
  font-weight: 800; font-size: .9rem; display: inline-flex; align-items: center; gap: 8px;
  transition: all .25s ease; font-family: inherit;
}
.apr-btn-approve { background: linear-gradient(135deg, #059669, #10b981); color: #fff; box-shadow: 0 8px 18px -8px rgba(16, 185, 129, .6); }
.apr-btn-approve:hover { transform: translateY(-2px); }
.apr-btn-reject { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; box-shadow: 0 8px 18px -8px rgba(239, 68, 68, .55); }
.apr-btn-reject:hover { transform: translateY(-2px); }
.apr-btn-cancel { background: #f1f5f9; color: #475569; }
.apr-btn:disabled { opacity: .6; cursor: wait; }

/* ── الحالات الفارغة ── */
.apr-empty {
  text-align: center; padding: 56px 20px; background: #fff;
  border: 2px dashed #e2e8f0; border-radius: 18px; color: #64748b;
}
.apr-empty i { font-size: 2.4rem; color: #94a3b8; margin-bottom: 12px; display: block; }
.apr-empty h3 { margin: 0 0 6px; color: #334155; }
.apr-empty p { margin: 0; font-size: .88rem; }
.apr-empty-error i { color: #f59e0b; }

/* ── نافذة القرار ── */
.apr-modal {
  background: #fff; border-radius: 20px; width: 92%; max-width: 480px;
  overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .45);
  animation: aprScaleIn .3s cubic-bezier(.175, .885, .32, 1.275);
}
@keyframes aprScaleIn { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.apr-modal-head { padding: 22px; text-align: center; color: #fff; }
.apr-modal-head i { font-size: 2rem; display: block; margin-bottom: 8px; }
.apr-modal-head h3 { margin: 0; font-size: 1.25rem; font-weight: 800; }
.apr-modal-approve { background: linear-gradient(135deg, #047857, #059669); }
.apr-modal-reject { background: linear-gradient(135deg, #b91c1c, #dc2626); }
.apr-modal-body { padding: 22px; }
.apr-modal-request {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px 16px; display: flex; flex-direction: column; gap: 4px;
  font-size: .9rem; color: #334155; margin-bottom: 14px;
}
.apr-modal-request code { font-size: .75rem; color: #3730a3; direction: ltr; align-self: flex-start; }
.apr-modal-warn {
  background: #fffbeb; border-right: 4px solid #f59e0b; border-radius: 10px;
  padding: 10px 14px; font-size: .82rem; color: #92400e; margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.apr-modal-label { display: block; font-weight: 700; font-size: .85rem; color: #1e293b; margin-bottom: 8px; }
#apr-decision-note {
  width: 100%; border: 2px solid #e2e8f0; border-radius: 12px; padding: 12px 14px;
  font-size: .9rem; font-family: inherit; resize: vertical; background: #f8fafc;
}
#apr-decision-note:focus { outline: none; border-color: #1e3a8a; background: #fff; }
.apr-modal-actions { display: flex; gap: 10px; padding: 0 22px 22px; }

/* ── شارة بطاقة الإدارة ── */
.approvals-card-badge {
  position: absolute; top: 10px; left: 10px; min-width: 24px; height: 24px;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: .75rem;
  font-weight: 800; align-items: center; justify-content: center; padding: 0 7px;
  box-shadow: 0 4px 10px -3px rgba(239, 68, 68, .6); display: none;
}

/* ── تكامل وضع التحرير لجدول سجلات الحوار (2026-09-01) ──
   صف واحد في وضع التحرير: ✏️ تفعيل → تحرير → 💾 حفظ شامل / ✖ إلغاء */

/* قائمة الإدارة الفرعية (6 عناصر) — الافتراضي العام 200px يقتطعها */
#admin-submenu.open { max-height: 420px; }
.btn-inline-edit, .btn-inline-cancel {
  border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem;
  transition: all .2s ease;
}
.btn-inline-edit { background: #eef2ff; color: #3730a3; }
.btn-inline-edit:hover { background: #e0e7ff; transform: translateY(-1px); }
.btn-inline-cancel { background: #fef2f2; color: #b91c1c; }
.btn-inline-cancel:hover { background: #fee2e2; }

tr.row-editing { outline: 2px solid #6366f1; outline-offset: -2px; background: #eef2ff66 !important; }
tr.row-editing td.editable-cell {
  background: #fffbeb; cursor: text; min-height: 20px;
  box-shadow: inset 0 0 0 1px #fcd34d;
}
td.editable-cell.cell-dirty {
  background: #fef3c7 !important; box-shadow: inset 0 0 0 2px #f59e0b; border-radius: 4px;
}
tr:not(.row-editing) td.editable-cell { cursor: default; }

/* ═══════════ تمييز الصفوف + عرض البطاقات لجدول سجلات الحوار (2026-09-01) ═══════════ */

/* زر القلم (تمييز الصف) */
.btn-mark-row {
  border: 1px solid #e2e8f0; background: #f8fafc; color: #94a3b8;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; transition: all .2s ease;
}
.btn-mark-row:hover { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
.btn-mark-row.active {
  background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
  border-color: #d97706; box-shadow: 0 4px 10px -4px rgba(245, 158, 11, .7);
}

/* الصف المميز — لون كهرماني بارز يبقى أثناء التمرير */
tr.row-marked > td { background: #fef9c3 !important; }
tr.row-marked > td:first-child { box-shadow: inset 4px 0 0 #f59e0b; }
body.dark-mode tr.row-marked > td { background: #453112 !important; }

/* زر تبديل العرض */
.btn-view-toggle { background: #eef2ff; color: #3730a3; }
.btn-view-toggle:hover { background: #e0e7ff; }

/* ── عرض البطاقات: تحويل الجدول لبطاقات (عند التبديل — على كل الشاشات) ── */
.recent-table-wrapper.view-cards { overflow-x: visible; }
.recent-table-wrapper.view-cards .recent-table { min-width: 0; }
.recent-table-wrapper.view-cards thead { display: none; }
.recent-table-wrapper.view-cards .recent-table,
.recent-table-wrapper.view-cards tbody { display: block; width: 100%; }
.recent-table-wrapper.view-cards tr {
  display: block; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 14px; margin-bottom: 12px; padding: 4px 6px;
  box-shadow: 0 4px 14px -8px rgba(15, 23, 42, .14);
}
body.dark-mode .recent-table-wrapper.view-cards tr { background: #1e293b; border-color: rgba(255,255,255,.08); }
.recent-table-wrapper.view-cards td {
  display: flex; align-items: center; gap: 10px;
  border: none !important; border-bottom: 1px dashed #f1f5f9 !important;
  padding: 7px 10px !important; text-align: right; white-space: normal;
}
.recent-table-wrapper.view-cards td:last-child { border-bottom: none !important; }
.recent-table-wrapper.view-cards td[data-field]::before {
  content: attr(data-field);
  font-weight: 800; color: #64748b; min-width: 88px; font-size: .78rem; flex-shrink: 0;
}
.recent-table-wrapper.view-cards td.mark-cell {
  justify-content: flex-end; border-bottom: 1px solid #e2e8f0 !important;
  background: #f8fafc; border-radius: 10px 10px 0 0;
}
/* خلية الهاتف: الاتجاه ثابت والاسم يبقى يمينًا */
.recent-table-wrapper.view-cards td.phone-cell { direction: ltr; flex-direction: row-reverse; }
.recent-table-wrapper.view-cards td.phone-cell::before { direction: rtl; }
/* خلية الإجراءات (الأزرار) */
.recent-table-wrapper.view-cards td:last-of-type::before { content: none; }
.recent-table-wrapper.view-cards td:last-of-type { justify-content: center; gap: 12px; }
/* الصف المميز في وضع البطاقات */
.recent-table-wrapper.view-cards tr.row-marked { border-color: #f59e0b; box-shadow: 0 4px 16px -6px rgba(245, 158, 11, .45); }

/* ═══════════ أيقونة واتساب لخلية الهاتف في جدول السجلات (2026-09-01) ═══════════ */
.wa-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #1ebe57); color: #fff !important;
  font-size: 1.05rem; text-decoration: none;
  box-shadow: 0 4px 10px -4px rgba(37, 211, 102, .85);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-link:hover { transform: scale(1.15); box-shadow: 0 6px 14px -4px rgba(37, 211, 102, .95); }
tr.row-editing td.phone-cell { cursor: text; }
.recent-table-wrapper.view-cards td.phone-cell .wa-link { order: 1; }

/* ── التجاوب ── */
@media (max-width: 640px) {
  .apr-hero { padding: 20px; }
  .apr-hero-text h1 { font-size: 1.3rem; }
  .apr-hero-side { width: 100%; }
  .apr-stat-chip { flex: 1; }
  .apr-tab { padding: 10px 13px; font-size: .85rem; }
  .apr-refresh { margin-inline-start: 0; }
  .apr-actions .apr-btn { flex: 1; justify-content: center; }
}