/* ════════════════════════════════════════════════════════════════════════════
 * ELP Design System v1 — Unified Visual Language
 * ════════════════════════════════════════════════════════════════════════════
 * يوحّد التصميم البصري عبر النظام بدون لمس Angular bundles.
 * يُحمّل قبل main bundle ويستخدم CSS specificity + !important حيث يلزم
 * لتجاوز inline styles من Angular.
 *
 * Audit (مايو 2026): النظام كان يستخدم
 *   - 20+ حجم avatar مختلف (h-7..h-32)
 *   - 4 ألوان gender مختلفة (gradient + flat)
 *   - 14 حجم نص (text-xs..text-4xl + 8 أحجام مخصصة)
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Design Tokens (متغيرات موحدة) ──────────────────────────────────── */
:root {
  /* الألوان الأساسية للـ ELP */
  --elp-primary-dark: #003366;
  --elp-primary: #20638b;
  --elp-primary-light: #2d7aa8;

  /* ألوان الجنس — موحدة (مسطحة، فاتحة، نظيفة) */
  --elp-gender-male: #93c5fd;       /* أزرق فاتح */
  --elp-gender-male-bg: #dbeafe;
  --elp-gender-female: #f9a8d4;     /* وردي فاتح */
  --elp-gender-female-bg: #fce7f3;
  --elp-gender-unknown: #cbd5e1;    /* رمادي فاتح */
  --elp-gender-unknown-bg: #f1f5f9;

  /* ألوان الحالات (status) */
  --elp-success: #10b981;
  --elp-success-bg: #d1fae5;
  --elp-warning: #f59e0b;
  --elp-warning-bg: #fef3c7;
  --elp-danger: #ef4444;
  --elp-danger-bg: #fee2e2;
  --elp-info: #0ea5e9;
  --elp-info-bg: #e0f2fe;

  /* الحجوم القياسية للـ avatars */
  --elp-avatar-xs: 24px;   /* h-6  */
  --elp-avatar-sm: 32px;   /* h-8  */
  --elp-avatar-md: 36px;   /* h-9  — القياسي لقوائم البحث */
  --elp-avatar-lg: 44px;   /* h-11 — للصفحات الرئيسية */
  --elp-avatar-xl: 80px;   /* h-20 — للملف الشخصي */

  /* radius موحد */
  --elp-radius-sm: 6px;
  --elp-radius-md: 10px;
  --elp-radius-lg: 14px;
  --elp-radius-full: 9999px;
}

/* ─── 2. توحيد ألوان الجنس على كل الصفحات ──────────────────────────────── */
/* أي عنصر يستخدم gradient gender نُحوّله للون مسطح */

/* البحث عن avatars gender فقط (دائرة صغيرة بأيقونة pi-mars/pi-venus/pi-user)
 * مهم: نقيّد بـ rounded-full + حجم صغير لمنع التعارض مع headers الصفحات
 * الـ headers بـ #003366/#0077B6 لا تستخدم rounded-full */
.rounded-full[style*="linear-gradient"][style*="#003366"][style*="#0077B6"],
.rounded-full[style*="linear-gradient"][style*="003366"][style*="0077B6"] {
  background: var(--elp-gender-male) !important;
}
.rounded-full[style*="linear-gradient"][style*="#be185d"][style*="#ec4899"],
.rounded-full[style*="linear-gradient"][style*="be185d"][style*="ec4899"] {
  background: var(--elp-gender-female) !important;
}
.rounded-full[style*="linear-gradient"][style*="#475569"][style*="#64748b"],
.rounded-full[style*="linear-gradient"][style*="475569"][style*="64748b"] {
  background: var(--elp-gender-unknown) !important;
}

/* ─── 3. توحيد شكل الـ avatars (دائرة مع أيقونة جنس) ────────────────────── */
/* العناصر التي تحوي pi-mars/pi-venus/pi-user داخلها = avatar */
.flex:has(> .pi-mars),
.flex:has(> .pi-venus),
.flex:has(> .pi-user) {
  border-radius: var(--elp-radius-full) !important;
}

/* ─── 4. تحسين ظهور الـ badges (gradient → solid) ──────────────────────── */
/* أي زر/badge gradient في الـ headers */
[class*="rounded-2xl"][style*="linear-gradient(135deg,#003366"],
[class*="rounded-xl"][style*="linear-gradient(135deg,#003366"],
[class*="rounded-lg"][style*="linear-gradient(135deg,#003366"] {
  background: var(--elp-primary) !important;
}

/* ─── 5. توحيد الأزرار الأساسية ───────────────────────────────────────── */
/* لا نلمس p-button (PrimeNG) — فقط نوحّد الـ utility-based */
.bg-blue-600.text-white,
.bg-blue-500.text-white {
  background-color: var(--elp-primary) !important;
}

/* ─── 6. توحيد الـ status badges ─────────────────────────────────────── */
/* badges مع text-green/text-red/text-amber */
.bg-green-50.text-green-700,
.bg-emerald-50.text-emerald-700 {
  background-color: var(--elp-success-bg) !important;
  color: #047857 !important;
}
.bg-red-50.text-red-700,
.bg-red-50.text-red-600 {
  background-color: var(--elp-danger-bg) !important;
  color: #b91c1c !important;
}
.bg-amber-50.text-amber-700,
.bg-yellow-50.text-yellow-700,
.bg-orange-50.text-orange-700 {
  background-color: var(--elp-warning-bg) !important;
  color: #b45309 !important;
}

/* ─── 7. تحسينات تجربة المستخدم ────────────────────────────────────── */
/* تخفيف ظلال البطاقات (مرئي حالياً مكثف) */
.shadow-xl {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.05) !important;
}

/* hover state موحد للقوائم */
.hover\:bg-blue-50\/50:hover,
.hover\:bg-slate-50:hover,
.hover\:bg-gray-50:hover {
  background-color: rgb(241 245 249 / 0.6) !important; /* slate-100/60 */
}

/* ─── 8. تخصيصات RTL/Arabic ────────────────────────────────────────── */
/* ضمان الاتجاه الصحيح للأرقام داخل badges */
.elp-numeric,
.text-\[10px\]:has(.phone),
.text-\[11px\]:has(.phone) {
  direction: ltr;
  unicode-bidi: embed;
}

/* ════════════════════════════════════════════════════════════════════════════
 * Helper classes — للاستخدام مع SkillEnhancement script لاحقاً إن احتجنا
 * ════════════════════════════════════════════════════════════════════════════ */

.elp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--elp-radius-full);
  flex-shrink: 0;
  color: white;
}
.elp-avatar-sm { width: var(--elp-avatar-sm); height: var(--elp-avatar-sm); }
.elp-avatar-md { width: var(--elp-avatar-md); height: var(--elp-avatar-md); }
.elp-avatar-lg { width: var(--elp-avatar-lg); height: var(--elp-avatar-lg); }

.elp-avatar.male   { background: var(--elp-gender-male); }
.elp-avatar.female { background: var(--elp-gender-female); }
.elp-avatar.unknown { background: var(--elp-gender-unknown); }

/* ════════════════════════════════════════════════════════════════════════════
 * v2 — توحيدات إضافية (Cards, Headers, Inputs, Tables)
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── 9. توحيد الكروت/البطاقات ─────────────────────────────────────────── */
/* النظام يستخدم: rounded-xl, rounded-2xl, rounded-3xl + 4 ألوان حدود + 3 ظلال */
/* نوحّد: radius متوسط، حدود slate-100 خفيفة، ظل خفيف */

/* الكروت العامة (rounded-2xl) — الأكثر استخداماً */
.rounded-2xl.bg-white.border,
.rounded-2xl.bg-card.border {
  border-color: rgb(241 245 249) !important; /* slate-100 */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04) !important;
}

/* الكروت الكبيرة (rounded-3xl) — تخفيف الظل المُبالغ */
.rounded-3xl.shadow-2xl {
  box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.08) !important;
}

/* الكروت الصغيرة (rounded-xl) — توحيد الحدود */
.rounded-xl.border.bg-white,
.rounded-xl.border.bg-card {
  border-color: rgb(241 245 249) !important;
}

/* hover state موحد للكروت */
.rounded-2xl.bg-white.transition:hover,
.rounded-xl.bg-white.transition:hover,
.rounded-2xl.bg-card.transition:hover,
.rounded-xl.bg-card.transition:hover {
  border-color: rgb(186 230 253) !important; /* sky-200 */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04) !important;
  transform: translateY(-1px);
}

/* ─── 10. توحيد عناوين الصفحات ─────────────────────────────────────────── */
/* النظام يستخدم: text-2xl, text-3xl + 6 ألوان + font-bold */
/* نوحّد text-2xl font-bold text-main */

h1.text-2xl, h2.text-2xl, h1.text-3xl, h2.text-3xl,
.text-2xl.font-bold.text-main,
.text-2xl.font-bold.text-slate-800 {
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* ─── 11. توحيد inputs ───────────────────────────────────────────────── */
/* مدخلات النص العامة */
input[type="text"]:not(.p-inputtext):not([class*="elp-skip"]),
input[type="email"]:not(.p-inputtext):not([class*="elp-skip"]),
input[type="tel"]:not(.p-inputtext):not([class*="elp-skip"]),
input[type="number"]:not(.p-inputtext):not([class*="elp-skip"]),
input[type="search"]:not(.p-inputtext):not([class*="elp-skip"]),
textarea:not(.p-inputtext):not([class*="elp-skip"]) {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus:not(.p-inputtext),
input[type="email"]:focus:not(.p-inputtext),
input[type="tel"]:focus:not(.p-inputtext),
input[type="number"]:focus:not(.p-inputtext),
input[type="search"]:focus:not(.p-inputtext),
textarea:focus:not(.p-inputtext) {
  outline: none;
  border-color: var(--elp-primary) !important;
  box-shadow: 0 0 0 3px rgb(32 99 139 / 0.1) !important;
}

/* placeholder موحد */
input::placeholder,
textarea::placeholder {
  color: rgb(148 163 184) !important; /* slate-400 */
  opacity: 1 !important;
}

/* ─── 12. توحيد الجداول ──────────────────────────────────────────────── */
/* PrimeNG p-table — تنعيم الحدود */
.p-datatable .p-datatable-thead > tr > th {
  background-color: rgb(248 250 252) !important; /* slate-50 */
  color: rgb(51 65 85) !important; /* slate-700 */
  font-weight: 600 !important;
  border-color: rgb(226 232 240) !important; /* slate-200 */
  font-size: 0.8125rem !important; /* 13px */
}

.p-datatable .p-datatable-tbody > tr > td {
  border-color: rgb(241 245 249) !important; /* slate-100 */
  padding: 0.75rem 1rem !important;
}

.p-datatable .p-datatable-tbody > tr:hover {
  background-color: rgb(248 250 252 / 0.6) !important;
}

/* ─── 13. توحيد الـ pills/tags ───────────────────────────────────────── */
/* أي عنصر صغير دائري للحالة */
.rounded-full.text-xs.font-medium,
.rounded-full.text-\[10px\],
.rounded-full.text-\[11px\] {
  letter-spacing: 0;
  line-height: 1.5;
  white-space: nowrap;
}

/* ─── 14. توحيد الـ scrollbars ──────────────────────────────────────── */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgb(203 213 225); /* slate-300 */
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgb(148 163 184); /* slate-400 */
}

/* ─── 15. توحيد الـ modals/dialogs ──────────────────────────────────── */
.p-dialog .p-dialog-header {
  border-bottom: 1px solid rgb(241 245 249) !important;
  padding: 1.25rem 1.5rem !important;
}
.p-dialog .p-dialog-content {
  padding: 1.5rem !important;
}
.p-dialog .p-dialog-footer {
  border-top: 1px solid rgb(241 245 249) !important;
  padding: 1rem 1.5rem !important;
  background-color: rgb(250 250 250) !important;
}

/* ─── 16. helpers مفيدة ──────────────────────────────────────────────── */
/* badge مع نقطة ملونة قبله — يستخدم في الحالات */
.elp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
}
.elp-status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
  flex-shrink: 0;
}
.elp-status-pill.success { background: var(--elp-success-bg); color: #047857; }
.elp-status-pill.warning { background: var(--elp-warning-bg); color: #b45309; }
.elp-status-pill.danger  { background: var(--elp-danger-bg); color: #b91c1c; }
.elp-status-pill.info    { background: var(--elp-info-bg); color: #0369a1; }

/* ─── 17. responsive — تحسين الـ mobile ──────────────────────────────── */
@media (max-width: 640px) {
  /* تقليص padding على الكروت في الموبايل */
  .rounded-2xl.p-5,
  .rounded-2xl.p-6 {
    padding: 1rem !important;
  }
  /* تقليص الـ gap بين العناصر */
  .gap-6 {
    gap: 1rem !important;
  }
  /* تكبير touch targets للأزرار الصغيرة */
  button.text-xs,
  .p-button-sm {
    min-height: 36px !important;
  }
}

/* ─── 18. focus states موحدة للـ accessibility ───────────────────────── */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--elp-primary);
  outline-offset: 2px;
  border-radius: var(--elp-radius-sm);
}

/* ════════════════════════════════════════════════════════════════════════════
 * v3 — توحيد الخطوط والجداول (مايو 2026)
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── 19. توحيد الخط للنظام كاملاً ──────────────────────────────────── */
/* النظام يستخدم 6 خطوط مختلفة (Almarai, El Messiri, Helvetica, Arial...).
 * نُجبر استخدام IBM Plex Sans Arabic — الخط الرسمي ELP */
:root {
  --elp-font-family: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
  --elp-font-size-base: 14px;
}

body, button, input, select, textarea, table, td, th, tr,
.p-component, .p-button, .p-inputtext, .p-dropdown,
.p-datatable, .p-datatable td, .p-datatable th,
.p-paginator, .p-dialog, .p-toast {
  font-family: var(--elp-font-family) !important;
}

/* استثناء: خطوط الأيقونات يجب أن تبقى على خطها الأصلي */
.material-icons {
  font-family: 'Material Icons' !important;
}
.material-icons-outlined {
  font-family: 'Material Icons Outlined' !important;
}
.material-icons-round {
  font-family: 'Material Icons Round' !important;
}
.pi,
[class^="pi-"],
[class*=" pi-"] {
  font-family: 'primeicons' !important;
}

/* ─── 20. توحيد جداول PrimeNG ───────────────────────────────────────── */
/* النظام بالفعل عنده base styling — نوحّد بقية التفاصيل */

.p-datatable {
  font-size: 0.875rem !important; /* 14px */
  font-family: var(--elp-font-family) !important;
}

.p-datatable .p-datatable-thead > tr > th {
  padding: 0.625rem 0.875rem !important;
  font-size: 0.8125rem !important; /* 13px */
  font-weight: 600 !important;
  color: rgb(71 85 105) !important; /* slate-600 */
  background: rgb(248 250 252) !important; /* slate-50 */
  border-bottom: 1px solid rgb(226 232 240) !important; /* slate-200 */
  white-space: nowrap !important;
  text-align: center !important;
  vertical-align: middle !important;
  letter-spacing: 0.01em !important;
}

.p-datatable .p-datatable-tbody > tr > td {
  padding: 0.625rem 0.875rem !important;
  vertical-align: middle !important;
  text-align: center !important;
  font-size: 0.875rem !important; /* 14px */
  color: rgb(30 41 59) !important; /* slate-800 */
  border-bottom: 1px solid rgb(241 245 249) !important; /* slate-100 */
  line-height: 1.5 !important;
}

.p-datatable .p-datatable-tbody > tr:last-child > td {
  border-bottom: none !important;
}

.p-datatable .p-datatable-tbody > tr:hover {
  background: rgb(248 250 252 / 0.5) !important; /* slate-50 with alpha */
}

/* striped rows — اختياري بهدوء */
.p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even) {
  background: rgb(250 250 250) !important;
}

/* الجدول compact (small) */
.p-datatable.p-datatable-sm .p-datatable-thead > tr > th,
.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8125rem !important;
}

/* ─── 21. توحيد جداول HTML العادية (non-PrimeNG) ────────────────────── */
table.min-w-full,
table.w-full:not(.p-datatable):not([class*="p-"]) {
  font-size: 0.875rem !important;
  font-family: var(--elp-font-family) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

table.min-w-full thead th,
table.w-full:not(.p-datatable) thead th {
  padding: 0.625rem 0.875rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: rgb(71 85 105) !important;
  background: rgb(248 250 252) !important;
  border-bottom: 1px solid rgb(226 232 240) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

table.min-w-full tbody td,
table.w-full:not(.p-datatable) tbody td {
  padding: 0.625rem 0.875rem !important;
  font-size: 0.875rem !important;
  color: rgb(30 41 59) !important;
  border-bottom: 1px solid rgb(241 245 249) !important;
  text-align: center !important;
  vertical-align: middle !important;
}

table.min-w-full tbody tr:hover,
table.w-full:not(.p-datatable) tbody tr:hover {
  background: rgb(248 250 252 / 0.5) !important;
}

/* ─── 22. توحيد الأرقام في الجداول (LTR forced) ──────────────────────── */
/* الأرقام، المبالغ، التواريخ، أرقام الجوال يجب أن تكون LTR */
.p-datatable td:has(.amount),
.p-datatable td:has(.phone),
.p-datatable td:has(.identity),
.p-datatable td:has(.date),
td.numeric, td.tabular,
.tabular-nums {
  font-variant-numeric: tabular-nums !important;
  direction: ltr !important;
  unicode-bidi: embed !important;
}

/* ─── 23. الأزرار داخل الجداول ───────────────────────────────────────── */
.p-datatable .p-button.p-button-sm,
.p-datatable .p-button.p-button-text {
  font-size: 0.8125rem !important;
  padding: 0.375rem 0.625rem !important;
  height: auto !important;
}

/* الأيقونات داخل الجداول */
.p-datatable .pi {
  font-size: 0.875rem !important;
}

/* ─── 24. الـ paginator أسفل الجداول ─────────────────────────────────── */
.p-paginator {
  background: white !important;
  border-top: 1px solid rgb(241 245 249) !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.8125rem !important;
}

.p-paginator .p-paginator-page,
.p-paginator .p-paginator-first,
.p-paginator .p-paginator-prev,
.p-paginator .p-paginator-next,
.p-paginator .p-paginator-last {
  min-width: 32px !important;
  height: 32px !important;
  font-size: 0.8125rem !important;
}

.p-paginator .p-paginator-page.p-highlight {
  background: var(--elp-primary) !important;
  color: white !important;
  border-color: var(--elp-primary) !important;
}

/* ─── 25. حالة "لا توجد بيانات" ──────────────────────────────────────── */
.p-datatable .p-datatable-emptymessage td {
  text-align: center !important;
  padding: 2rem 1rem !important;
  color: rgb(148 163 184) !important; /* slate-400 */
  font-size: 0.875rem !important;
  background: rgb(250 250 250) !important;
}

/* ─── 26. تحسين الـ wrapper حول الجداول ──────────────────────────────── */
.p-datatable-wrapper,
.overflow-x-auto:has(table) {
  border-radius: var(--elp-radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid rgb(241 245 249) !important;
  background: white !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * v4 — توحيد Page Headers (مايو 2026 — REVERTED 11:30)
 * ════════════════════════════════════════════════════════════════════════════
 * المحاولة الأولى لتحويل headers الداكنة إلى بيضاء كسرت layout صفحة إدارة الطلاب
 * (النصوص و البطاقات اختفت لأنها كانت bg-white/10 على خلفية داكنة).
 * نتراجع عن التحويل ونكتفي بتوحيد typography فقط (عناوين، subtitle، أرقام).
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── 28. توحيد breadcrumbs (آمن) ─────────────────────────────────────── */
nav[aria-label="breadcrumb"] {
  font-size: 0.8125rem !important;
  color: rgb(100 116 139) !important; /* slate-500 */
}

/* ─── 29. توحيد عنوان الصفحة (آمن — للعناوين على خلفية فاتحة فقط) ───── */
h1.text-2xl.font-bold.text-main,
h1.text-2xl.font-bold.text-slate-800,
h2.text-2xl.font-bold.text-main,
h2.text-2xl.font-bold.text-slate-800,
.page-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

/* ─── 30. توحيد الأرقام الكبيرة في كروت الإحصائيات (آمن) ──────────────── */
.rounded-2xl.bg-white .text-3xl,
.rounded-2xl.bg-white .text-4xl,
.rounded-xl.bg-white .text-3xl,
.rounded-xl.bg-white .text-4xl {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * v6 — توحيد headers الـ gradient الداكنة (مايو 2026)
 * ════════════════════════════════════════════════════════════════════════════
 * المشكلة: 22 gradient مختلف للـ headers عبر الصفحات (أزرق/أخضر/أحمر/برتقالي/بنفسجي)
 * الحل: نستهدف كل الـ gradients الداكنة ونحوّلها لـ gradient أبيض موحد
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── 30.b. كل gradient داكن (أزرق/أخضر/أحمر/...) → أبيض موحد ─────────── */
/* الـ gradients التي تبدأ بأرقام داكنة #0X, #1X, #2X, #3X, #4X, #5X, #6X, #7X في hex */

/* استثناء avatars الصغيرة (rounded-full) — تبقى بألوان gender الأصلية */
[style*="linear-gradient"][style*="#001f3f"]:not(.rounded-full),
[style*="linear-gradient"][style*="#003366"]:not(.rounded-full),
[style*="linear-gradient"][style*="#1a5070"]:not(.rounded-full),
[style*="linear-gradient"][style*="#1a6fa8"]:not(.rounded-full),
[style*="linear-gradient"][style*="#1e3a5f"]:not(.rounded-full),
[style*="linear-gradient"][style*="#1e5799"]:not(.rounded-full),
[style*="linear-gradient"][style*="#2563eb"]:not(.rounded-full),
[style*="linear-gradient"][style*="#2e6fba"]:not(.rounded-full),
[style*="linear-gradient"][style*="#2d7aa8"]:not(.rounded-full),
[style*="linear-gradient"][style*="#20638b"]:not(.rounded-full),
[style*="linear-gradient"][style*="#374151"]:not(.rounded-full),
[style*="linear-gradient"][style*="#475569"]:not(.rounded-full),
[style*="linear-gradient"][style*="#4c1d95"]:not(.rounded-full),
[style*="linear-gradient"][style*="#4f46e5"]:not(.rounded-full),
[style*="linear-gradient"][style*="#7c3aed"]:not(.rounded-full),
[style*="linear-gradient"][style*="#7f1d1d"]:not(.rounded-full),
[style*="linear-gradient"][style*="#8b5cf6"]:not(.rounded-full),
[style*="linear-gradient"][style*="#065f46"]:not(.rounded-full),
[style*="linear-gradient"][style*="#14532d"]:not(.rounded-full),
[style*="linear-gradient"][style*="#22c55e"]:not(.rounded-full),
[style*="linear-gradient"][style*="#10b981"]:not(.rounded-full),
[style*="linear-gradient"][style*="#ef4444"]:not(.rounded-full),
[style*="linear-gradient"][style*="#ff9800"]:not(.rounded-full),
[style*="linear-gradient"][style*="#ff6f00"]:not(.rounded-full),
[style*="linear-gradient"][style*="#ffb347"]:not(.rounded-full),
[style*="linear-gradient"][style*="#0077B6"]:not(.rounded-full),
[style*="linear-gradient"][style*="#0077b6"]:not(.rounded-full),
[style*="linear-gradient"][style*="#134059"]:not(.rounded-full) {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 1px solid rgb(186 230 253) !important; /* sky-200 */
  color: rgb(15 23 42) !important; /* slate-900 */
}

/* النصوص الأبيض داخل الـ headers المخفّفة → داكنة */
[style*="linear-gradient"][style*="#001f3f"] .text-white,
[style*="linear-gradient"][style*="#003366"] .text-white,
[style*="linear-gradient"][style*="#1a5070"] .text-white,
[style*="linear-gradient"][style*="#1a6fa8"] .text-white,
[style*="linear-gradient"][style*="#1e3a5f"] .text-white,
[style*="linear-gradient"][style*="#1e5799"] .text-white,
[style*="linear-gradient"][style*="#2563eb"] .text-white,
[style*="linear-gradient"][style*="#20638b"] .text-white,
[style*="linear-gradient"][style*="#7c3aed"] .text-white,
[style*="linear-gradient"][style*="#7f1d1d"] .text-white,
[style*="linear-gradient"][style*="#065f46"] .text-white,
[style*="linear-gradient"][style*="#10b981"] .text-white,
[style*="linear-gradient"][style*="#ef4444"] .text-white,
[style*="linear-gradient"][style*="#ff9800"] .text-white,
[style*="linear-gradient"][style*="#0077B6"] .text-white,
[style*="linear-gradient"][style*="#134059"] .text-white {
  color: rgb(15 23 42) !important; /* slate-900 */
}

/* النصوص الفرعية شبه الشفافة (text-white/80, text-blue-100/...) */
[style*="linear-gradient"][style*="#001f3f"] [class*="text-white\/"],
[style*="linear-gradient"][style*="#001f3f"] [class*="text-blue-100"],
[style*="linear-gradient"][style*="#001f3f"] [class*="text-slate-100"],
[style*="linear-gradient"][style*="#003366"] [class*="text-white\/"],
[style*="linear-gradient"][style*="#003366"] [class*="text-blue-100"],
[style*="linear-gradient"][style*="#1a5070"] [class*="text-white\/"],
[style*="linear-gradient"][style*="#20638b"] [class*="text-white\/"],
[style*="linear-gradient"][style*="#1a6fa8"] [class*="text-white\/"],
[style*="linear-gradient"][style*="#1e3a5f"] [class*="text-white\/"],
[style*="linear-gradient"][style*="#7c3aed"] [class*="text-white\/"],
[style*="linear-gradient"][style*="#ef4444"] [class*="text-white\/"],
[style*="linear-gradient"][style*="#ff9800"] [class*="text-white\/"],
[style*="linear-gradient"][style*="#10b981"] [class*="text-white\/"] {
  color: rgb(71 85 105) !important; /* slate-600 */
}

/* الأيقونات/الـ avatars الكبيرة بخلفية شفافة (bg-white/X) داخل headers */
[style*="linear-gradient"][style*="#001f3f"] [class*="bg-white\/"],
[style*="linear-gradient"][style*="#003366"] [class*="bg-white\/"],
[style*="linear-gradient"][style*="#1a5070"] [class*="bg-white\/"],
[style*="linear-gradient"][style*="#20638b"] [class*="bg-white\/"],
[style*="linear-gradient"][style*="#1a6fa8"] [class*="bg-white\/"],
[style*="linear-gradient"][style*="#1e3a5f"] [class*="bg-white\/"],
[style*="linear-gradient"][style*="#7c3aed"] [class*="bg-white\/"],
[style*="linear-gradient"][style*="#ef4444"] [class*="bg-white\/"],
[style*="linear-gradient"][style*="#ff9800"] [class*="bg-white\/"],
[style*="linear-gradient"][style*="#10b981"] [class*="bg-white\/"] {
  background: rgb(255 255 255 / 0.85) !important;
  color: var(--elp-primary) !important;
}

/* الـ rings الشفافة */
[style*="linear-gradient"] [class*="ring-white\/"] {
  --tw-ring-color: rgb(186 230 253) !important; /* sky-200 */
}

/* ─── 30.c. صيد إضافي — case-insensitive + background-color صلب ──────────── */
/* ألوان hex بحروف كبيرة (#0077B6) و spaces مختلفة بعد لون */

[style*="linear-gradient" i][style*="0077b6" i],
[style*="linear-gradient" i][style*="003366" i],
[style*="linear-gradient" i][style*="004488" i],
[style*="linear-gradient" i][style*="1a5f9e" i],
[style*="linear-gradient" i][style*="6b7280" i],
[style*="linear-gradient" i][style*="22c55e" i],
[style*="linear-gradient" i][style*="2d7aa8" i] {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 1px solid rgb(186 230 253) !important;
  color: rgb(15 23 42) !important;
}

/* background-color صلب (ليس gradient) */
[style*="background-color" i][style*="#003366" i],
[style*="background-color" i][style*="#20638b" i],
[style*="background-color" i][style*="#1a5070" i],
[style*="background-color" i][style*="#1a6fa8" i],
[style*="background-color" i][style*="#2d7aa8" i],
[style*="background:#003366" i],
[style*="background:#20638b" i],
[style*="background: #003366" i],
[style*="background: #20638b" i] {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  background-color: transparent !important;
  border: 1px solid rgb(186 230 253) !important;
  color: rgb(15 23 42) !important;
}

/* النصوص الأبيض داخل أي header مُحوَّل (case-insensitive) */
[style*="0077b6" i] .text-white,
[style*="003366" i] .text-white,
[style*="20638b" i] .text-white,
[style*="1a5070" i] .text-white,
[style*="1a6fa8" i] .text-white,
[style*="1a5f9e" i] .text-white,
[style*="004488" i] .text-white,
[style*="2d7aa8" i] .text-white,
[style*="6b7280" i] .text-white,
[style*="22c55e" i] .text-white {
  color: rgb(15 23 42) !important;
}

/* النصوص الفرعية الشفافة */
[style*="0077b6" i] [class*="text-white\/"],
[style*="003366" i] [class*="text-white\/"],
[style*="20638b" i] [class*="text-white\/"],
[style*="1a5070" i] [class*="text-white\/"],
[style*="1a6fa8" i] [class*="text-white\/"],
[style*="2d7aa8" i] [class*="text-white\/"],
[style*="0077b6" i] [class*="text-blue"],
[style*="003366" i] [class*="text-blue"],
[style*="20638b" i] [class*="text-blue"],
[style*="1a5070" i] [class*="text-blue"] {
  color: rgb(71 85 105) !important;
}

/* الأيقونات والـ avatars بخلفية شفافة */
[style*="0077b6" i] [class*="bg-white\/"],
[style*="003366" i] [class*="bg-white\/"],
[style*="20638b" i] [class*="bg-white\/"],
[style*="1a5070" i] [class*="bg-white\/"],
[style*="1a6fa8" i] [class*="bg-white\/"],
[style*="2d7aa8" i] [class*="bg-white\/"] {
  background: rgb(255 255 255 / 0.85) !important;
  color: var(--elp-primary) !important;
}

/* ─── 30.d. Tailwind classes الداكنة في headers ───────────────────────── */
/* العناصر التي تستخدم bg-blue-600 / bg-slate-700 / bg-indigo-600 كـ header */
header.bg-blue-600,
header.bg-blue-700,
header.bg-slate-700,
header.bg-slate-800,
header.bg-indigo-600,
header.bg-indigo-700,
header.bg-purple-600,
.page-header.bg-blue-600,
.page-header.bg-slate-700,
[class*="header"][class~="bg-blue-600"],
[class*="header"][class~="bg-blue-700"],
[class*="header"][class~="bg-slate-700"],
[class*="header"][class~="bg-slate-800"],
[class*="header"][class~="bg-indigo-600"],
[class*="header"][class~="bg-purple-600"] {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  color: rgb(15 23 42) !important;
  border: 1px solid rgb(186 230 253) !important;
}

/* النصوص الأبيض داخل headers بـ Tailwind dark */
header.bg-blue-600 .text-white,
header.bg-blue-700 .text-white,
header.bg-slate-700 .text-white,
header.bg-slate-800 .text-white,
header.bg-indigo-600 .text-white,
[class*="header"][class~="bg-blue-600"] .text-white,
[class*="header"][class~="bg-slate-700"] .text-white,
[class*="header"][class~="bg-indigo-600"] .text-white {
  color: rgb(15 23 42) !important;
}

/* ─── 30.e. توحيد كل headers الصفحات على gradient فاتح موحد ────────── */
/* استراتيجية: نستهدف أي عنصر "كبير" في أعلى صفحة (h-32+ أو p-6+ أو فيه title)
 * مع inline background أو bg-* فاتح ونوحّده على النمط القياسي.
 *
 * هذا يلتقط headers صفحات إدارة الطلاب + إدارة القاعات + كل الصفحات
 * التي تستخدم gradient فاتح مختلف.
 */

/* أي عنصر بـ class header وله background أو gradient (فاتح أو داكن) */
.page-header,
.dashboard-header,
[class*="page-header"],
section.header,
section[class*="hero"] {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  background-image: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  color: rgb(15 23 42) !important;
  border: 1px solid rgb(186 230 253) !important;
}

.page-header *:not(button):not(.p-button) .text-white,
.page-header .text-white,
[class*="page-header"] .text-white,
section.header .text-white,
section[class*="hero"] .text-white {
  color: rgb(15 23 42) !important;
}

.page-header [class*="text-white\/"],
.page-header [class*="text-blue-100"],
[class*="page-header"] [class*="text-white\/"] {
  color: rgb(71 85 105) !important;
}

/* ─── 30.f. headers بـ gradients فاتحة موحّدة كذلك ──────────────────── */
/* بعض الصفحات تستخدم gradient فاتح خاص بها — نُجبرها على نفس الـ gradient القياسي */
[style*="linear-gradient" i][style*="bae6fd" i],
[style*="linear-gradient" i][style*="dbeafe" i],
[style*="linear-gradient" i][style*="bfdbfe" i],
[style*="linear-gradient" i][style*="93c5fd" i],
[style*="linear-gradient" i][style*="60a5fa" i],
[style*="linear-gradient" i][style*="3b82f6" i],
[style*="linear-gradient" i][style*="2563eb" i] {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 1px solid rgb(186 230 253) !important;
}

/* ─── 30.g. ضمان قراءة النصوص داخل أي header بـ light gradient ──────────
 *  المشكلة: قواعد سابقة حوّلت الخلفية للون فاتح لكن النصوص لا تزال text-white
 *  الحل: قاعدة تستهدف كل نص أبيض داخل أي عنصر بـ gradient فاتح
 *  أو فيه class header
 * ════════════════════════════════════════════════════════════════════════ */

/* جميع النصوص الأبيض داخل headers الفاتحة الموحّدة */
[style*="linear-gradient" i][style*="f0f9ff" i] *,
[style*="linear-gradient" i][style*="e0f2fe" i] *,
[style*="linear-gradient" i][style*="bae6fd" i] *,
[style*="linear-gradient" i][style*="dbeafe" i] *,
[style*="linear-gradient" i][style*="bfdbfe" i] * {
  color: inherit;
}

/* النصوص الأبيض/الفاتحة → داكنة على الخلفية الفاتحة */
[style*="linear-gradient" i][style*="f0f9ff" i] .text-white,
[style*="linear-gradient" i][style*="e0f2fe" i] .text-white,
[style*="linear-gradient" i][style*="bae6fd" i] .text-white,
[style*="linear-gradient" i][style*="dbeafe" i] .text-white,
[style*="linear-gradient" i][style*="bfdbfe" i] .text-white,
.page-header .text-white,
[class*="page-header"] .text-white,
section.header .text-white,
section[class*="hero"] .text-white,
header.bg-blue-600 .text-white,
header.bg-blue-700 .text-white,
header.bg-slate-700 .text-white {
  color: rgb(15 23 42) !important; /* slate-900 */
}

/* النصوص الفرعية الشفافة text-white/X */
[style*="linear-gradient" i][style*="f0f9ff" i] [class*="text-white\/"],
[style*="linear-gradient" i][style*="e0f2fe" i] [class*="text-white\/"],
[style*="linear-gradient" i][style*="bae6fd" i] [class*="text-white\/"],
[style*="linear-gradient" i][style*="dbeafe" i] [class*="text-white\/"],
.page-header [class*="text-white\/"],
[class*="page-header"] [class*="text-white\/"] {
  color: rgb(71 85 105) !important; /* slate-600 */
}

/* النصوص الزرقاء الفاتحة (text-blue-100, text-blue-50) */
[style*="linear-gradient" i][style*="f0f9ff" i] [class*="text-blue-100"],
[style*="linear-gradient" i][style*="f0f9ff" i] [class*="text-blue-50"],
[style*="linear-gradient" i][style*="f0f9ff" i] [class*="text-sky-100"],
[style*="linear-gradient" i][style*="e0f2fe" i] [class*="text-blue-100"],
[style*="linear-gradient" i][style*="e0f2fe" i] [class*="text-blue-50"],
[style*="linear-gradient" i][style*="e0f2fe" i] [class*="text-sky-100"],
.page-header [class*="text-blue-100"],
.page-header [class*="text-blue-50"],
.page-header [class*="text-sky-100"],
.page-header [class*="text-slate-100"] {
  color: rgb(71 85 105) !important; /* slate-600 */
}

/* الأيقونات الـ pi/material-icons داخل headers */
[style*="linear-gradient" i][style*="f0f9ff" i] .pi:not([class*="text-"]),
[style*="linear-gradient" i][style*="e0f2fe" i] .pi:not([class*="text-"]),
.page-header .pi:not([class*="text-"]),
[class*="page-header"] .pi:not([class*="text-"]) {
  color: var(--elp-primary) !important;
}

/* الـ avatars/badges بخلفية شفافة داخل headers محوّلة */
[style*="linear-gradient" i][style*="f0f9ff" i] [class*="bg-white\/"],
[style*="linear-gradient" i][style*="e0f2fe" i] [class*="bg-white\/"],
[style*="linear-gradient" i][style*="bae6fd" i] [class*="bg-white\/"],
[style*="linear-gradient" i][style*="dbeafe" i] [class*="bg-white\/"],
.page-header [class*="bg-white\/"],
[class*="page-header"] [class*="bg-white\/"] {
  background: rgb(255 255 255 / 0.85) !important;
  color: var(--elp-primary) !important;
}

/* ─── 30.h. آلية أمان: كل نص أبيض داخل عنصر بخلفية فاتحة ────────────── */
/* لو ظل نص أبيض رغم القواعد السابقة، هذه قاعدة fallback تعتمد على الـ
   computed background. نطبّقها فقط على عناصر داخل headers محتملة. */

/* أي element له inline gradient + يحوي text-white = problem */
[style*="background"][style*="gradient"] h1.text-white,
[style*="background"][style*="gradient"] h2.text-white,
[style*="background"][style*="gradient"] h3.text-white,
[style*="background"][style*="gradient"] p.text-white,
[style*="background"][style*="gradient"] span.text-white,
[style*="background"][style*="gradient"] div.text-white {
  /* لو الخلفية محوَّلة لفاتحة (بقواعدنا الأخرى)، نُجبر النص داكن */
  color: rgb(15 23 42) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * v7 — قاعدة شاملة: نص أبيض داخل عنصر بـ inline gradient → داكن دائماً
 * ════════════════════════════════════════════════════════════════════════════
 * كل قواعدنا السابقة تحوّل headers الداكنة إلى فاتحة.
 * هذه القاعدة تضمن أن أي نص أبيض داخل أي عنصر بـ inline linear-gradient
 * يصبح داكناً تلقائياً، بغض النظر عن اللون المحدد.
 * استثناء وحيد: العناصر بـ rounded-full (avatars) لأنها تبقى ملونة.
 * ════════════════════════════════════════════════════════════════════════════ */

/* النص الأبيض المباشر */
[style*="linear-gradient"]:not(.rounded-full) .text-white,
[style*="linear-gradient"]:not(.rounded-full) [class~="text-white"] {
  color: rgb(15 23 42) !important; /* slate-900 */
}

/* النصوص الفرعية الشفافة (text-white/X) */
[style*="linear-gradient"]:not(.rounded-full) [class*="text-white\/"] {
  color: rgb(71 85 105) !important; /* slate-600 */
}

/* النصوص الزرقاء/الفاتحة الشائعة في headers */
[style*="linear-gradient"]:not(.rounded-full) [class*="text-blue-50"],
[style*="linear-gradient"]:not(.rounded-full) [class*="text-blue-100"],
[style*="linear-gradient"]:not(.rounded-full) [class*="text-blue-200"],
[style*="linear-gradient"]:not(.rounded-full) [class*="text-sky-50"],
[style*="linear-gradient"]:not(.rounded-full) [class*="text-sky-100"],
[style*="linear-gradient"]:not(.rounded-full) [class*="text-sky-200"],
[style*="linear-gradient"]:not(.rounded-full) [class*="text-slate-50"],
[style*="linear-gradient"]:not(.rounded-full) [class*="text-slate-100"],
[style*="linear-gradient"]:not(.rounded-full) [class*="text-slate-200"],
[style*="linear-gradient"]:not(.rounded-full) [class*="text-gray-50"],
[style*="linear-gradient"]:not(.rounded-full) [class*="text-gray-100"],
[style*="linear-gradient"]:not(.rounded-full) [class*="text-indigo-100"],
[style*="linear-gradient"]:not(.rounded-full) [class*="text-purple-100"] {
  color: rgb(71 85 105) !important; /* slate-600 */
}

/* الأيقونات بألوان فاتحة داخل headers */
[style*="linear-gradient"]:not(.rounded-full) i.text-white,
[style*="linear-gradient"]:not(.rounded-full) .pi.text-white {
  color: var(--elp-primary) !important;
}

/* الـ avatars/icons containers بخلفية شفافة (bg-white/X) داخل headers */
[style*="linear-gradient"]:not(.rounded-full) [class*="bg-white\/"] {
  background: rgb(255 255 255 / 0.85) !important;
  color: var(--elp-primary) !important;
}

[style*="linear-gradient"]:not(.rounded-full) [class*="bg-white\/"] .text-white,
[style*="linear-gradient"]:not(.rounded-full) [class*="bg-white\/"] .pi {
  color: var(--elp-primary) !important;
}

/* الـ rings الشفافة */
[style*="linear-gradient"]:not(.rounded-full) [class*="ring-white\/"] {
  --tw-ring-color: rgb(186 230 253) !important; /* sky-200 */
}

/* الحدود الشفافة */
[style*="linear-gradient"]:not(.rounded-full) [class*="border-white\/"] {
  border-color: rgb(186 230 253) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * v8 — قاعدة كاسحة لكل النصوص الفاتحة في أي header
 * ════════════════════════════════════════════════════════════════════════════
 * بعض الصفحات (مثل إدارة القاعات) لا تستخدم linear-gradient inline.
 * تستخدم class مثل bg-sky-50 أو background من Angular component CSS.
 * هذه القاعدة تستهدف كل نص فاتح في أي عنوان h1/h2/h3 مباشرة + المحتوى المجاور.
 * ════════════════════════════════════════════════════════════════════════════ */

/* 1) أي h1/h2/h3 له class text-white أو لون أزرق فاتح → داكن */
h1.text-white, h2.text-white, h3.text-white,
h1[class*="text-blue-"], h2[class*="text-blue-"], h3[class*="text-blue-"],
h1[class*="text-sky-"], h2[class*="text-sky-"], h3[class*="text-sky-"],
h1[class*="text-cyan-"], h2[class*="text-cyan-"], h3[class*="text-cyan-"] {
  color: rgb(15 23 42) !important;
}

/* 2) Subtitles بجوار h1/h2 (الـ p مباشرة بعدها أو span) إذا كان أبيض/فاتح */
h1 + p[class*="text-white"], h2 + p[class*="text-white"],
h1 + p[class*="text-blue-"], h2 + p[class*="text-blue-"],
h1 + p[class*="text-sky-"], h2 + p[class*="text-sky-"],
h1 ~ p[class*="text-white"], h2 ~ p[class*="text-white"],
h1 ~ p[class*="text-blue-1"], h2 ~ p[class*="text-blue-1"] {
  color: rgb(71 85 105) !important;
}

/* 3) Stats labels داخل headers — أرقام/تسميات بألوان فاتحة */
[class*="bg-sky-"] .text-white, [class*="bg-sky-"] [class*="text-blue-"],
[class*="bg-blue-50"] .text-white, [class*="bg-blue-50"] [class*="text-blue-"],
[class*="bg-blue-100"] .text-white, [class*="bg-blue-100"] [class*="text-blue-"],
[class*="bg-cyan-"] .text-white, [class*="bg-cyan-"] [class*="text-blue-"],
[class*="bg-indigo-50"] .text-white, [class*="bg-indigo-50"] [class*="text-blue-"] {
  color: rgb(15 23 42) !important;
}

/* 4) النصوص بلون أزرق فاتح خفيف text-blue-200/300 → slate-700 */
[class*="bg-sky-"] [class*="text-blue-200"], [class*="bg-sky-"] [class*="text-blue-300"],
[class*="bg-blue-50"] [class*="text-blue-200"], [class*="bg-blue-50"] [class*="text-blue-300"],
[class*="bg-blue-100"] [class*="text-blue-200"], [class*="bg-blue-100"] [class*="text-blue-300"],
[class*="bg-blue-50"] [class*="text-sky-200"], [class*="bg-blue-50"] [class*="text-sky-300"],
[class*="bg-sky-"] [class*="text-sky-200"], [class*="bg-sky-"] [class*="text-sky-300"] {
  color: rgb(51 65 85) !important; /* slate-700 */
}

/* 5) Override للنصوص الـ semi-transparent داخل أي bg- فاتح */
[class*="bg-sky-50"] [class*="text-white\/"],
[class*="bg-sky-100"] [class*="text-white\/"],
[class*="bg-blue-50"] [class*="text-white\/"],
[class*="bg-blue-100"] [class*="text-white\/"],
[class*="bg-cyan-50"] [class*="text-white\/"],
[class*="bg-indigo-50"] [class*="text-white\/"] {
  color: rgb(71 85 105) !important;
}

/* 6) قاعدة أمان عبر pseudo: العناصر التي بداخلها h1.text-white = على الأرجح header */
*:has(> h1.text-white),
*:has(> h2.text-white),
*:has(> div > h1.text-white),
*:has(> div > h2.text-white) {
  /* لو هذا header بأي خلفية، فرض ألوان داكنة على الأبناء */
}
*:has(> h1.text-white) h1.text-white,
*:has(> h1.text-white) h2.text-white,
*:has(> h1.text-white) p,
*:has(> h1.text-white) span:not([class*="bg-"]),
*:has(> h2.text-white) h1.text-white,
*:has(> h2.text-white) h2.text-white,
*:has(> h2.text-white) p:not([class*="bg-"]) {
  color: rgb(15 23 42) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * v9 — توحيد Layout الصفحات (مايو 2026)
 * ════════════════════════════════════════════════════════════════════════════
 * الصفحات تستخدم containers مختلفة (max-w-3xl/6xl/7xl/full) و paddings
 * متعددة (p-2/3/4/5/6) و gaps مختلفة (1/2/3/4/5/6).
 * نوحّد الـ layout القياسي للصفحات.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── 36. توحيد الـ Page Container الأساسي ────────────────────────────── */
/* النمط الأكثر استخداماً: flex w-full min-w-0 flex-col */
.flex.w-full.min-w-0.flex-col {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem; /* 20px 24px — موحد لكل الصفحات */
  gap: 1.25rem; /* 20px بين الـ sections */
}

@media (max-width: 768px) {
  .flex.w-full.min-w-0.flex-col {
    padding: 1rem;
    gap: 1rem;
  }
}

/* ─── 37. توحيد الـ Page Header section ───────────────────────────────── */
/* أول section في الصفحة (header) — توحيد margin-bottom */
.flex.w-full.min-w-0.flex-col > section:first-of-type,
.flex.w-full.min-w-0.flex-col > div:first-of-type {
  margin-bottom: 0.5rem;
}

/* ─── 38. توحيد الـ Cards وأقسام المحتوى ───────────────────────────── */
/* البطاقات الكبيرة في الصفحات — توحيد padding داخلها */
section.rounded-2xl,
section.rounded-xl,
div.rounded-2xl.bg-white,
div.rounded-2xl.bg-card {
  padding: 1.25rem 1.5rem; /* موحد */
}

@media (max-width: 768px) {
  section.rounded-2xl,
  section.rounded-xl,
  div.rounded-2xl.bg-white,
  div.rounded-2xl.bg-card {
    padding: 1rem;
  }
}

/* ─── 39. توحيد المسافات بين الـ flex children ──────────────────────── */
/* gap-1 و gap-2 و gap-3 → تطبيع ضمن نطاق معقول */
.flex.flex-col.gap-1 { gap: 0.5rem !important; }   /* 8px موحد بدلاً من 4px ضيق */
.flex.flex-col.gap-3 { gap: 1rem !important; }     /* 16px */
.flex.flex-col.gap-5 { gap: 1.25rem !important; }  /* 20px */

/* ─── 40. توحيد breadcrumb area ─────────────────────────────────────── */
/* الـ breadcrumb في أعلى الصفحة — موحد padding وحجم */
nav[aria-label="breadcrumb"],
.breadcrumb,
[class*="breadcrumb"] {
  padding: 0.625rem 0 !important;
  font-size: 0.8125rem !important;
  color: rgb(100 116 139) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* ─── 41. توحيد الـ stats row (الأرقام أعلى الصفحة) ─────────────────── */
/* العداد العلوي للصفحة (إجمالي القاعات / الطلاب / الجلسات) */
.grid.grid-cols-2.sm\:grid-cols-4,
.grid.grid-cols-3.sm\:grid-cols-4,
.grid.grid-cols-4 {
  gap: 0.75rem !important;
}

.grid.grid-cols-4 > * {
  padding: 0.875rem !important;
  border-radius: var(--elp-radius-lg) !important;
  background: white !important;
  border: 1px solid rgb(241 245 249) !important;
}

/* ─── 42. توحيد section dividers ─────────────────────────────────────── */
/* divide-y / divide-x للأقسام الفرعية */
[class*="divide-y"] > * + *,
[class*="divide-x"] > * + * {
  border-color: rgb(241 245 249) !important; /* slate-100 */
}

/* ─── 43. توحيد responsive widths ──────────────────────────────────── */
.max-w-7xl, .max-w-6xl, .max-w-screen-xl {
  max-width: 1400px !important; /* موحد */
  margin-left: auto !important;
  margin-right: auto !important;
}

.max-w-3xl, .max-w-2xl, .max-w-xl {
  max-width: 720px !important; /* موحد للأقسام الضيقة (forms مثلاً) */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ─── 44. توحيد الـ headers الكبيرة (التي تحوي عنوان الصفحة + Stats) ──── */
/* النمط: header كبير في أعلى الصفحة بـ rounded-2xl */
section.rounded-2xl:first-child,
div[class*="page-header"],
div.rounded-2xl[class*="border"]:first-child {
  margin-bottom: 1rem !important;
  padding: 1.5rem !important;
}

@media (max-width: 768px) {
  section.rounded-2xl:first-child,
  div[class*="page-header"],
  div.rounded-2xl[class*="border"]:first-child {
    padding: 1rem !important;
  }
}

/* ─── 45. توحيد ترتيب الـ search bar + filter buttons + actions ─────── */
/* الـ search row الذي يحوي بحث + أزرار */
[class*="rounded-2xl"][class*="border"][class*="bg-white"]:has(input[type="text"]),
[class*="rounded-xl"][class*="border"][class*="bg-white"]:has(input[type="text"]) {
  padding: 0.875rem 1rem !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * v10 — قاعدة شاملة وقوية: كل النصوص الزرقاء/الفاتحة → داكنة بالقوة
 * ════════════════════════════════════════════════════════════════════════════
 * كل مرة نحوّل header للون فاتح، نحتاج نتأكد كل النصوص تتحول لداكنة.
 * هذه القاعدة تستخدم CSS specificity عالية لتغطي كل الحالات.
 * ════════════════════════════════════════════════════════════════════════════ */

/* أي نص بألوان زرقاء/فاتحة يصبح داكناً عبر النظام بأكمله */
.text-blue-50, .text-blue-100, .text-blue-200, .text-blue-300,
.text-sky-50, .text-sky-100, .text-sky-200, .text-sky-300,
.text-cyan-50, .text-cyan-100, .text-cyan-200, .text-cyan-300,
.text-indigo-50, .text-indigo-100, .text-indigo-200,
.text-slate-50, .text-slate-100, .text-slate-200,
.text-gray-50, .text-gray-100, .text-gray-200 {
  color: rgb(71 85 105) !important; /* slate-600 — قابل للقراءة على فاتح وداكن */
}

/* النصوص الزرقاء المتوسطة (text-blue-400/500) — تبقى لكنها أوضح */
.text-blue-400, .text-sky-400, .text-cyan-400,
.text-blue-500, .text-sky-500, .text-cyan-500 {
  color: var(--elp-primary) !important;
}

/* استثناء: داخل الـ avatars (rounded-full) أو الأزرار → اترك الألوان الأصلية */
.rounded-full .text-blue-100, .rounded-full .text-blue-200,
.rounded-full .text-sky-100, .rounded-full .text-sky-200,
button .text-blue-100, button .text-sky-100,
.p-button .text-blue-100, .p-button .text-sky-100,
[class*="bg-blue-5"] .text-blue-100, [class*="bg-blue-6"] .text-blue-100,
[class*="bg-blue-7"] .text-blue-100,
[class*="bg-sky-5"] .text-sky-100, [class*="bg-sky-6"] .text-sky-100,
[class*="bg-indigo-5"] .text-indigo-100, [class*="bg-indigo-6"] .text-indigo-100 {
  color: rgb(255 255 255) !important; /* أبيض على الخلفيات الملونة الداكنة */
}

/* النصوص داخل header gradients (حتى لو ما توافقت مع linear-gradient) */
h1, h2, h3 {
  color: rgb(15 23 42) !important; /* slate-900 — للعناوين الكبيرة دائماً */
}

/* استثناءات: العناوين داخل أزرار أو badges ملونة */
button h1, button h2, button h3,
.p-button h1, .p-button h2, .p-button h3,
[class*="bg-blue-5"] h1, [class*="bg-blue-6"] h1, [class*="bg-blue-7"] h1,
[class*="bg-blue-5"] h2, [class*="bg-blue-6"] h2,
[class*="bg-emerald-5"] h1, [class*="bg-emerald-6"] h1,
[class*="bg-red-5"] h1, [class*="bg-red-6"] h1 {
  color: inherit !important;
}

/* p subtitles بجوار العناوين — موحد slate-600 */
h1 + p, h2 + p, h3 + p,
h1 ~ p:first-of-type, h2 ~ p:first-of-type {
  color: rgb(71 85 105) !important;
}

/* استثناء: p داخل أزرار أو خلفيات ملونة */
button p, .p-button p,
[class*="bg-blue-5"] p, [class*="bg-blue-6"] p,
[class*="bg-emerald-5"] p, [class*="bg-red-5"] p {
  color: inherit !important;
}

/* الأرقام الكبيرة في stats cards (إجمالي القاعات 20) — داكنة قوية */
.text-3xl.font-bold, .text-4xl.font-bold,
.text-2xl.font-bold.tabular-nums, .text-3xl.font-bold.tabular-nums {
  color: rgb(15 23 42) !important;
}

/* labels تحت الأرقام (إجمالي القاعات) — slate-600 */
.text-3xl.font-bold + *, .text-4xl.font-bold + *,
.text-2xl.font-bold + *, .text-xl.font-bold + * {
  color: rgb(71 85 105) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * v11 — FIX: استهداف background-color (ليس فقط linear-gradient)
 * ════════════════════════════════════════════════════════════════════════════
 * Deep investigation اكتشف أن صفحة "إدارة القاعات" تستخدم:
 *   <div style="background-color: #20638b">
 * وليس linear-gradient. قواعدنا السابقة كانت تستهدف linear-gradient فقط.
 * هذه القاعدة تشمل background-color الصلب أيضاً.
 * ════════════════════════════════════════════════════════════════════════════ */

/* الـ headers بـ background-color صلب داكن — تحويل للأبيض الفاتح */
[style*="background-color"][style*="#20638b"]:not(.rounded-full),
[style*="background-color"][style*="#003366"]:not(.rounded-full),
[style*="background-color"][style*="#1a5070"]:not(.rounded-full),
[style*="background-color"][style*="#1a6fa8"]:not(.rounded-full),
[style*="background-color"][style*="#2d7aa8"]:not(.rounded-full),
[style*="background-color"][style*="#1e3a5f"]:not(.rounded-full),
[style*="background-color"][style*="#001f3f"]:not(.rounded-full),
[style*="background-color"][style*="#0077b6" i]:not(.rounded-full),
[style*="background-color"][style*="#134059"]:not(.rounded-full),
[style*="background-color"][style*="#7c3aed"]:not(.rounded-full),
[style*="background-color"][style*="#4f46e5"]:not(.rounded-full),
[style*="background-color"][style*="#ef4444"]:not(.rounded-full),
[style*="background-color"][style*="#10b981"]:not(.rounded-full),
[style*="background-color"][style*="#065f46"]:not(.rounded-full),
[style*="background-color"][style*="#22c55e"]:not(.rounded-full),
[style*="background-color"][style*="#ff9800"]:not(.rounded-full),
[style*="background-color"][style*="#ff6f00"]:not(.rounded-full) {
  background-color: transparent !important;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 1px solid rgb(186 230 253) !important;
  color: rgb(15 23 42) !important;
}

/* النصوص الأبيض داخل headers بـ background-color صلب */
[style*="background-color"][style*="#20638b"] .text-white,
[style*="background-color"][style*="#20638b"] [class*="text-white\/"],
[style*="background-color"][style*="#003366"] .text-white,
[style*="background-color"][style*="#003366"] [class*="text-white\/"],
[style*="background-color"][style*="#1a5070"] .text-white,
[style*="background-color"][style*="#1a5070"] [class*="text-white\/"],
[style*="background-color"][style*="#1a6fa8"] .text-white,
[style*="background-color"][style*="#2d7aa8"] .text-white,
[style*="background-color"][style*="#1e3a5f"] .text-white,
[style*="background-color"][style*="#001f3f"] .text-white,
[style*="background-color"][style*="#7c3aed"] .text-white,
[style*="background-color"][style*="#ef4444"] .text-white,
[style*="background-color"][style*="#10b981"] .text-white,
[style*="background-color"][style*="#ff9800"] .text-white {
  color: rgb(15 23 42) !important;
}

/* النصوص الفرعية text-white/X */
[style*="background-color"][style*="#20638b"] [class*="text-white\/"],
[style*="background-color"][style*="#003366"] [class*="text-white\/"],
[style*="background-color"][style*="#1a5070"] [class*="text-white\/"],
[style*="background-color"][style*="#1a6fa8"] [class*="text-white\/"],
[style*="background-color"][style*="#2d7aa8"] [class*="text-white\/"],
[style*="background-color"][style*="#1e3a5f"] [class*="text-white\/"],
[style*="background-color"][style*="#001f3f"] [class*="text-white\/"] {
  color: rgb(71 85 105) !important;
}

/* الأيقونات والأفاتارز بخلفية شفافة (bg-white/15, bg-white/20) داخل headers */
[style*="background-color"][style*="#20638b"] [class*="bg-white\/"],
[style*="background-color"][style*="#003366"] [class*="bg-white\/"],
[style*="background-color"][style*="#1a5070"] [class*="bg-white\/"],
[style*="background-color"][style*="#1a6fa8"] [class*="bg-white\/"],
[style*="background-color"][style*="#2d7aa8"] [class*="bg-white\/"],
[style*="background-color"][style*="#1e3a5f"] [class*="bg-white\/"],
[style*="background-color"][style*="#001f3f"] [class*="bg-white\/"] {
  background: rgb(255 255 255 / 0.85) !important;
  color: var(--elp-primary) !important;
}

/* الـ rings الشفافة */
[style*="background-color"][style*="#20638b"] [class*="ring-white\/"],
[style*="background-color"][style*="#003366"] [class*="ring-white\/"],
[style*="background-color"][style*="#1a5070"] [class*="ring-white\/"] {
  --tw-ring-color: rgb(186 230 253) !important;
}

/* الأيقونات pi-* بألوان فاتحة */
[style*="background-color"][style*="#20638b"] .pi.text-white,
[style*="background-color"][style*="#003366"] .pi.text-white,
[style*="background-color"][style*="#1a5070"] .pi.text-white {
  color: var(--elp-primary) !important;
}

/* الأزرار بخلفية أبيض داخل headers */
[style*="background-color"][style*="#20638b"] [class*="!bg-white"] {
  background: white !important;
  color: var(--elp-primary) !important;
}

/* opacity-80 على labels (الـ stats labels داخل header) */
[style*="background-color"][style*="#20638b"] .opacity-80 {
  opacity: 1 !important;
  color: rgb(71 85 105) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * v12 — DEEP FIX: المتصفح يحوّل hex إلى rgb في الـ DOM serialization
 * ════════════════════════════════════════════════════════════════════════════
 * Chrome/Edge يحوّل style="background-color: #20638b" إلى rgb(32, 99, 139)
 * في الـ DOM. لذا [style*="#20638b"] لا يطابق! يجب استخدام rgb format.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Headers بـ background-color rgb (الصيغة المحفوظة في DOM) */
[style*="background-color: rgb(32, 99, 139)"]:not(.rounded-full),
[style*="background-color: rgb(0, 51, 102)"]:not(.rounded-full),
[style*="background-color: rgb(26, 80, 112)"]:not(.rounded-full),
[style*="background-color: rgb(26, 111, 168)"]:not(.rounded-full),
[style*="background-color: rgb(45, 122, 168)"]:not(.rounded-full),
[style*="background-color: rgb(30, 58, 95)"]:not(.rounded-full),
[style*="background-color: rgb(0, 31, 63)"]:not(.rounded-full),
[style*="background-color: rgb(0, 119, 182)"]:not(.rounded-full),
[style*="background-color: rgb(19, 64, 89)"]:not(.rounded-full),
[style*="background-color: rgb(124, 58, 237)"]:not(.rounded-full),
[style*="background-color: rgb(79, 70, 229)"]:not(.rounded-full),
[style*="background-color: rgb(239, 68, 68)"]:not(.rounded-full),
[style*="background-color: rgb(16, 185, 129)"]:not(.rounded-full),
[style*="background-color: rgb(6, 95, 70)"]:not(.rounded-full),
[style*="background-color: rgb(34, 197, 94)"]:not(.rounded-full),
[style*="background-color: rgb(255, 152, 0)"]:not(.rounded-full),
[style*="background-color: rgb(255, 111, 0)"]:not(.rounded-full) {
  background-color: transparent !important;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  border: 1px solid rgb(186 230 253) !important;
  color: rgb(15 23 42) !important;
}

/* النصوص الأبيض داخل headers بـ rgb format */
[style*="rgb(32, 99, 139)"] .text-white,
[style*="rgb(32, 99, 139)"] [class*="text-white\/"],
[style*="rgb(0, 51, 102)"] .text-white,
[style*="rgb(0, 51, 102)"] [class*="text-white\/"],
[style*="rgb(26, 80, 112)"] .text-white,
[style*="rgb(26, 80, 112)"] [class*="text-white\/"],
[style*="rgb(26, 111, 168)"] .text-white,
[style*="rgb(45, 122, 168)"] .text-white,
[style*="rgb(30, 58, 95)"] .text-white,
[style*="rgb(0, 31, 63)"] .text-white,
[style*="rgb(0, 119, 182)"] .text-white,
[style*="rgb(124, 58, 237)"] .text-white,
[style*="rgb(239, 68, 68)"] .text-white,
[style*="rgb(16, 185, 129)"] .text-white,
[style*="rgb(255, 152, 0)"] .text-white {
  color: rgb(15 23 42) !important;
}

/* النصوص الفرعية الشفافة */
[style*="rgb(32, 99, 139)"] [class*="text-white\/"],
[style*="rgb(0, 51, 102)"] [class*="text-white\/"],
[style*="rgb(26, 80, 112)"] [class*="text-white\/"],
[style*="rgb(26, 111, 168)"] [class*="text-white\/"],
[style*="rgb(45, 122, 168)"] [class*="text-white\/"],
[style*="rgb(30, 58, 95)"] [class*="text-white\/"],
[style*="rgb(0, 31, 63)"] [class*="text-white\/"],
[style*="rgb(0, 119, 182)"] [class*="text-white\/"] {
  color: rgb(71 85 105) !important;
}

/* الـ avatars/badges بخلفية شفافة */
[style*="rgb(32, 99, 139)"] [class*="bg-white\/"],
[style*="rgb(0, 51, 102)"] [class*="bg-white\/"],
[style*="rgb(26, 80, 112)"] [class*="bg-white\/"],
[style*="rgb(26, 111, 168)"] [class*="bg-white\/"],
[style*="rgb(45, 122, 168)"] [class*="bg-white\/"],
[style*="rgb(30, 58, 95)"] [class*="bg-white\/"],
[style*="rgb(0, 31, 63)"] [class*="bg-white\/"] {
  background: rgb(255 255 255 / 0.85) !important;
  color: var(--elp-primary) !important;
}

/* الـ rings الشفافة */
[style*="rgb(32, 99, 139)"] [class*="ring-white\/"],
[style*="rgb(0, 51, 102)"] [class*="ring-white\/"],
[style*="rgb(26, 80, 112)"] [class*="ring-white\/"] {
  --tw-ring-color: rgb(186 230 253) !important;
}

/* الأيقونات pi-* بألوان فاتحة */
[style*="rgb(32, 99, 139)"] .pi.text-white,
[style*="rgb(0, 51, 102)"] .pi.text-white,
[style*="rgb(26, 80, 112)"] .pi.text-white,
[style*="rgb(26, 111, 168)"] .pi.text-white {
  color: var(--elp-primary) !important;
}

/* opacity-80 labels داخل headers */
[style*="rgb(32, 99, 139)"] .opacity-80,
[style*="rgb(0, 51, 102)"] .opacity-80,
[style*="rgb(26, 80, 112)"] .opacity-80,
[style*="rgb(26, 111, 168)"] .opacity-80 {
  opacity: 1 !important;
  color: rgb(71 85 105) !important;
}

/* الأزرار بـ !bg-white داخل headers */
[style*="rgb(32, 99, 139)"] [class*="!bg-white"],
[style*="rgb(0, 51, 102)"] [class*="!bg-white"],
[style*="rgb(26, 80, 112)"] [class*="!bg-white"] {
  background: white !important;
  color: var(--elp-primary) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * ELP-CSS-TEST-MARKER-v24 — لو ترى عنوان الصفحة بـ خلفية حمراء، CSS وصل
 * ════════════════════════════════════════════════════════════════════════════ */
body::before {
  content: "ELP CSS v24 LOADED";
  position: fixed;
  top: 0;
  left: 0;
  background: #ff0000;
  color: white;
  padding: 4px 8px;
  z-index: 99999;
  font-size: 11px;
  font-family: monospace;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
 * v13 — HIGH SPECIFICITY OVERRIDE (يتفوق على كل الـ Tailwind classes)
 * ════════════════════════════════════════════════════════════════════════════
 * نضاعف الـ selector لرفع specificity عالياً جداً
 * ════════════════════════════════════════════════════════════════════════════ */

/* Header background — high specificity */
html body [style*="#20638b"]:not(.rounded-full),
html body [style*="rgb(32, 99, 139)"]:not(.rounded-full),
html body [style*="#003366"]:not(.rounded-full),
html body [style*="rgb(0, 51, 102)"]:not(.rounded-full),
html body [style*="#1a5070"]:not(.rounded-full),
html body [style*="#1a6fa8"]:not(.rounded-full),
html body [style*="#0077B6" i]:not(.rounded-full),
html body [style*="#001f3f"]:not(.rounded-full),
html body [style*="#7c3aed"]:not(.rounded-full),
html body [style*="#ef4444"]:not(.rounded-full),
html body [style*="#ff9800"]:not(.rounded-full),
html body [style*="#10b981"]:not(.rounded-full) {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
  background-color: transparent !important;
  border: 1px solid rgb(186 230 253) !important;
}

/* النصوص داخل headers — high specificity */
html body [style*="#20638b"]:not(.rounded-full) .text-white,
html body [style*="#20638b"]:not(.rounded-full) [class~="text-white"],
html body [style*="#003366"]:not(.rounded-full) .text-white,
html body [style*="#003366"]:not(.rounded-full) [class~="text-white"],
html body [style*="#1a5070"]:not(.rounded-full) .text-white,
html body [style*="#1a6fa8"]:not(.rounded-full) .text-white,
html body [style*="#0077B6" i]:not(.rounded-full) .text-white,
html body [style*="#001f3f"]:not(.rounded-full) .text-white,
html body [style*="#7c3aed"]:not(.rounded-full) .text-white,
html body [style*="#ef4444"]:not(.rounded-full) .text-white,
html body [style*="#ff9800"]:not(.rounded-full) .text-white,
html body [style*="#10b981"]:not(.rounded-full) .text-white,
html body [style*="rgb(32, 99, 139)"]:not(.rounded-full) .text-white {
  color: rgb(15 23 42) !important;
}

/* Subtitle text-white/X */
html body [style*="#20638b"]:not(.rounded-full) [class*="text-white\/"],
html body [style*="#003366"]:not(.rounded-full) [class*="text-white\/"],
html body [style*="#1a5070"]:not(.rounded-full) [class*="text-white\/"],
html body [style*="#1a6fa8"]:not(.rounded-full) [class*="text-white\/"],
html body [style*="#0077B6" i]:not(.rounded-full) [class*="text-white\/"],
html body [style*="#001f3f"]:not(.rounded-full) [class*="text-white\/"],
html body [style*="rgb(32, 99, 139)"]:not(.rounded-full) [class*="text-white\/"] {
  color: rgb(71 85 105) !important;
}

/* opacity-80 و text-xs labels */
html body [style*="#20638b"]:not(.rounded-full) .opacity-80,
html body [style*="#003366"]:not(.rounded-full) .opacity-80,
html body [style*="#1a5070"]:not(.rounded-full) .opacity-80,
html body [style*="rgb(32, 99, 139)"]:not(.rounded-full) .opacity-80 {
  opacity: 1 !important;
  color: rgb(71 85 105) !important;
}

/* Avatars/badges بخلفية شفافة (bg-white/15) */
html body [style*="#20638b"]:not(.rounded-full) [class*="bg-white\/"],
html body [style*="#003366"]:not(.rounded-full) [class*="bg-white\/"],
html body [style*="#1a5070"]:not(.rounded-full) [class*="bg-white\/"],
html body [style*="rgb(32, 99, 139)"]:not(.rounded-full) [class*="bg-white\/"] {
  background: rgb(255 255 255 / 0.85) !important;
  color: var(--elp-primary) !important;
}

/* الأيقونات pi.text-white */
html body [style*="#20638b"]:not(.rounded-full) .pi.text-white,
html body [style*="#003366"]:not(.rounded-full) .pi.text-white,
html body [style*="#1a5070"]:not(.rounded-full) .pi.text-white,
html body [style*="rgb(32, 99, 139)"]:not(.rounded-full) .pi.text-white {
  color: var(--elp-primary) !important;
}

/* Stats values (text-base font-bold بدون text-white) */
html body [style*="#20638b"]:not(.rounded-full) .text-base.font-bold,
html body [style*="#003366"]:not(.rounded-full) .text-base.font-bold,
html body [style*="rgb(32, 99, 139)"]:not(.rounded-full) .text-base.font-bold {
  color: rgb(15 23 42) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 * v5 — توحيد أزرار الجداول (مايو 2026)
 * ════════════════════════════════════════════════════════════════════════════
 * المشكلة: أزرار "تفاصيل/أرشفة" في الجداول كانت ضخمة بخلفية داكنة جداً
 * الحل: تحجيم الأزرار داخل cells الجدول، وتخفيف اللون الداكن للـ primary
 * ════════════════════════════════════════════════════════════════════════════ */

/* ─── 31. أزرار الجداول = أيقونات فقط (موحدة، بدون نص) ─────────────── */
/* النمط: زر دائري/مربع 32×32 بأيقونة فقط في المنتصف.
 * النص الموجود (أرشفة، تفاصيل، تعديل) يُخفى تلقائياً عبر CSS.
 * الـ tooltip يظهر النص عند hover بفضل title attribute. */

.p-datatable td .p-button,
table td .p-button:not(.p-button-text) {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important; /* يخفي النص */
  line-height: 1 !important;
  margin: 0 0.125rem !important;
}

/* إظهار الأيقونة فقط داخل الزر */
.p-datatable td .p-button .p-button-icon,
table td .p-button .p-button-icon {
  font-size: 14px !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* إخفاء النص (label) داخل أزرار الجدول */
.p-datatable td .p-button .p-button-label,
table td .p-button .p-button-label {
  display: none !important;
}

/* أزرار utility (غير p-button) داخل الجداول */
.p-datatable td > button:not(.p-button),
.p-datatable td .actions button:not(.p-button),
table td > button:not(.p-button),
table td .actions button:not(.p-button) {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important; /* يخفي النص */
  margin: 0 0.125rem !important;
  border: 1px solid transparent !important;
}

/* إظهار الأيقونة بحجم محدد */
.p-datatable td > button:not(.p-button) i,
.p-datatable td .actions button:not(.p-button) i,
table td > button:not(.p-button) i,
table td .actions button:not(.p-button) i,
.p-datatable td > button:not(.p-button) svg,
table td > button:not(.p-button) svg {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 1 !important;
}

/* container الـ actions في خلية الجدول — مسافات صغيرة */
.p-datatable td .actions,
.p-datatable td:has(> button + button),
table td .actions,
table td:has(> button + button) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  white-space: nowrap !important;
}

/* ─── 32. تخفيف لون الـ primary buttons (الأزرق الداكن) ──────────────── */
/* PrimeNG default الأزرق #3b82f6 ثقيل بصرياً — نخفّفه قليلاً */
.p-button:not(.p-button-outlined):not(.p-button-text):not(.p-button-secondary):not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-help):not(.p-button-link) {
  background: var(--elp-primary) !important; /* #20638b */
  border-color: var(--elp-primary) !important;
}

.p-button:not(.p-button-outlined):not(.p-button-text):not(.p-button-secondary):not(.p-button-success):not(.p-button-warning):not(.p-button-danger):not(.p-button-info):not(.p-button-help):hover {
  background: #1a5070 !important;
  border-color: #1a5070 !important;
}

/* ─── 33. أزرار secondary أخف ────────────────────────────────────── */
.p-button.p-button-secondary {
  background: rgb(241 245 249) !important; /* slate-100 */
  color: rgb(51 65 85) !important; /* slate-700 */
  border-color: rgb(226 232 240) !important; /* slate-200 */
}

.p-button.p-button-secondary:hover {
  background: rgb(226 232 240) !important; /* slate-200 */
  color: rgb(30 41 59) !important; /* slate-800 */
}

/* ─── 34. أزرار outlined نظيفة ──────────────────────────────────── */
.p-button.p-button-outlined {
  background: white !important;
  border-width: 1px !important;
}

.p-button.p-button-outlined:hover {
  background: rgb(248 250 252) !important; /* slate-50 */
}

/* ─── 35. الأزرار الـ utility (Tailwind-style) داخل الجداول ──────────── */
.p-datatable td button[class*="bg-slate-9"],
.p-datatable td button[class*="bg-gray-9"],
table td button[class*="bg-slate-9"],
table td button[class*="bg-gray-9"] {
  background: var(--elp-primary) !important;
  color: white !important;
  padding: 0.5rem 0.875rem !important;
  font-size: 0.8125rem !important;
  border-radius: 0.5rem !important;
  font-weight: 500 !important;
  height: auto !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.375rem !important;
  white-space: nowrap !important;
}

.p-datatable td button[class*="bg-slate-9"] i,
.p-datatable td button[class*="bg-gray-9"] i,
table td button[class*="bg-slate-9"] i,
table td button[class*="bg-gray-9"] i {
  font-size: 0.875rem !important;
}