/* ════════════════════════════════════════════════════════════════════════════
* ELP Design System (v50 — Full Rewrite, May 2026)
* ════════════════════════════════════════════════════════════════════════════
* Single overlay applied to all pages. Replaces 24 stacked patches (v3..v24).
* Organized via @layer for predictable specificity.
*
* Layer order (low → high specificity):
* tokens → base → helpers → components → admin → dialog → landing-protection
*
* IMPORTANT: Landing page (.landing, footer, [class*="cta"], [class*="hero"])
* is protected at the highest layer. All admin overrides are scoped to
* containers that are explicitly NOT inside protected landing zones.
* ════════════════════════════════════════════════════════════════════════════ */
@layer tokens, base, helpers, components, admin, dialog, landing-protection;
/* ════════════════════════════════════════════════════════════════════════════
* LAYER: tokens — design tokens (CSS variables)
* ════════════════════════════════════════════════════════════════════════════ */
@layer tokens {
:root {
/* Brand */
--elp-primary-dark: #003366;
--elp-primary: #20638b;
--elp-primary-light:#2d7aa8;
/* Gender (flat pastels — used by .elp-avatar) */
--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;
/* Semantic */
--elp-success: #10b981; --elp-success-bg: #d1fae5; --elp-success-fg:#047857; --elp-success-bd:#86efac;
--elp-warning: #f59e0b; --elp-warning-bg: #fef3c7; --elp-warning-fg:#b45309; --elp-warning-bd:#fcd34d;
--elp-danger: #ef4444; --elp-danger-bg: #fee2e2; --elp-danger-fg: #b91c1c; --elp-danger-bd: #fca5a5;
--elp-info: #0ea5e9; --elp-info-bg: #e0f2fe; --elp-info-fg: #0369a1; --elp-info-bd: #7dd3fc;
--elp-neutral-bg: #f1f5f9; --elp-neutral-fg: #475569; --elp-neutral-bd:#cbd5e1;
/* Neutrals */
--elp-text-strong: rgb(15 23 42); /* slate-900 */
--elp-text-base: rgb(30 41 59); /* slate-800 */
--elp-text-muted: rgb(100 116 139);/* slate-500 */
--elp-text-subtle: rgb(148 163 184);/* slate-400 */
--elp-border: rgb(226 232 240);/* slate-200 */
--elp-bg-soft: rgb(248 250 252);/* slate-50 */
/* Avatar sizes */
--elp-avatar-xs: 24px;
--elp-avatar-sm: 32px;
--elp-avatar-md: 36px;
--elp-avatar-lg: 44px;
--elp-avatar-xl: 80px;
/* Radius */
--elp-radius-sm: 6px;
--elp-radius-md: 10px;
--elp-radius-lg: 14px;
--elp-radius-full:9999px;
/* Typography */
--elp-font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
--elp-font-size-base:14px;
--elp-font-size-sm: 12px;
--elp-font-size-lg: 16px;
}
}
/* ════════════════════════════════════════════════════════════════════════════
* LAYER: base — global resets, scrollbar, focus
* ════════════════════════════════════════════════════════════════════════════ */
@layer base {
/* Numeric formatting (Latin numerals + tabular) */
.elp-numeric,
td.elp-numeric {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
direction: ltr;
unicode-bidi: plaintext;
}
/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: rgb(203 213 225);
border-radius: var(--elp-radius-full);
}
*::-webkit-scrollbar-thumb:hover { background: rgb(148 163 184); }
/* Focus visible — accessible, brand-tinted */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--elp-primary);
outline-offset: 2px;
}
}
/* ════════════════════════════════════════════════════════════════════════════
* LAYER: helpers — opt-in utility classes (.elp-avatar, .elp-status-pill, ...)
* ════════════════════════════════════════════════════════════════════════════ */
@layer helpers {
/* Avatars */
.elp-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--elp-radius-full);
color: #fff;
font-weight: 600;
overflow: hidden;
flex-shrink: 0;
}
.elp-avatar-xs { width: var(--elp-avatar-xs); height: var(--elp-avatar-xs); font-size: 10px; }
.elp-avatar-sm { width: var(--elp-avatar-sm); height: var(--elp-avatar-sm); font-size: 12px; }
.elp-avatar-md { width: var(--elp-avatar-md); height: var(--elp-avatar-md); font-size: 13px; }
.elp-avatar-lg { width: var(--elp-avatar-lg); height: var(--elp-avatar-lg); font-size: 15px; }
.elp-avatar-xl { width: var(--elp-avatar-xl); height: var(--elp-avatar-xl); font-size: 24px; }
.elp-avatar.male { background: var(--elp-gender-male); }
.elp-avatar.female { background: var(--elp-gender-female); }
.elp-avatar.unknown { background: var(--elp-gender-unknown); color: var(--elp-text-base); }
/* Status pills (semantic badges) */
.elp-status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 12px;
border-radius: var(--elp-radius-full);
font-size: var(--elp-font-size-sm);
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
border: 1px solid transparent;
vertical-align: middle;
}
.elp-status-pill.success { background: var(--elp-success-bg); color: var(--elp-success-fg); border-color: var(--elp-success-bd); }
.elp-status-pill.warning { background: var(--elp-warning-bg); color: var(--elp-warning-fg); border-color: var(--elp-warning-bd); }
.elp-status-pill.danger { background: var(--elp-danger-bg); color: var(--elp-danger-fg); border-color: var(--elp-danger-bd); }
.elp-status-pill.info { background: var(--elp-info-bg); color: var(--elp-info-fg); border-color: var(--elp-info-bd); }
.elp-status-pill.neutral { background: var(--elp-neutral-bg); color: var(--elp-neutral-fg); border-color: var(--elp-neutral-bd); }
}
/* ════════════════════════════════════════════════════════════════════════════
* LAYER: components — shared widgets (tables, tabs, toasts, empty states, forms)
* ════════════════════════════════════════════════════════════════════════════ */
@layer components {
/* ─── Font for the whole app ──────────────────────────────────────── */
body, .p-component, .p-datatable, .p-button, .p-inputtext, .p-dialog,
.p-toast, .p-menu, .p-dropdown {
font-family: var(--elp-font-family);
font-size: var(--elp-font-size-base);
}
/* ─── PrimeNG datatable polish ───────────────────────────────────── */
.p-datatable .p-datatable-thead > tr > th {
background: var(--elp-bg-soft);
color: var(--elp-text-muted);
font-weight: 600;
font-size: var(--elp-font-size-sm);
border-bottom: 1px solid var(--elp-border);
}
.p-datatable .p-datatable-tbody > tr > td {
border-bottom: 1px solid var(--elp-border);
color: var(--elp-text-base);
}
.p-datatable .p-datatable-tbody > tr:hover > td { background: rgb(241 245 249 / 0.6); }
.p-datatable .p-datatable-emptymessage {
color: var(--elp-text-muted);
text-align: center;
padding: 2rem;
}
/* ─── Pill tabs (filter tabs above tables) ───────────────────────── */
[role="tablist"] [role="tab"],
.p-tabview-nav li .p-tabview-nav-link,
.p-selectbutton .p-button {
border-radius: var(--elp-radius-full);
font-weight: 600;
font-size: var(--elp-font-size-sm);
padding: 6px 14px;
}
/* ─── Empty states (outside p-datatable) ─────────────────────────── */
.elp-empty,
[class*="empty-state"]:not(.p-datatable-emptymessage) {
text-align: center;
color: var(--elp-text-muted);
padding: 2rem 1rem;
}
/* ─── Toasts: tint by severity ───────────────────────────────────── */
.p-toast .p-toast-message-success { background: var(--elp-success-bg); border-color: var(--elp-success-bd); color: var(--elp-success-fg); }
.p-toast .p-toast-message-warn,
.p-toast .p-toast-message-warning { background: var(--elp-warning-bg); border-color: var(--elp-warning-bd); color: var(--elp-warning-fg); }
.p-toast .p-toast-message-error,
.p-toast .p-toast-message-danger { background: var(--elp-danger-bg); border-color: var(--elp-danger-bd); color: var(--elp-danger-fg); }
.p-toast .p-toast-message-info { background: var(--elp-info-bg); border-color: var(--elp-info-bd); color: var(--elp-info-fg); }
/* ─── Form fields: consistent radius and focus ───────────────────── */
.p-inputtext, .p-dropdown, .p-multiselect, .p-calendar input,
.p-password input, .p-inputnumber input, .p-textarea {
border-radius: var(--elp-radius-md);
border: 1px solid var(--elp-border);
}
.p-inputtext:focus,
.p-dropdown:not(.p-disabled):hover,
.p-dropdown:not(.p-disabled).p-focus {
border-color: var(--elp-primary);
box-shadow: 0 0 0 2px rgb(32 99 139 / 0.12);
}
/* ─── Hide breadcrumbs across the platform ──────────────────────── */
/* Per user request — admin pages do not use breadcrumbs. */
p-breadcrumb,
.p-breadcrumb,
nav[aria-label="breadcrumb"] {
display: none !important;
}
}
/* ════════════════════════════════════════════════════════════════════════════
* LAYER: admin — unify admin page headers ("تسكين المستويات" pattern)
* ════════════════════════════════════════════════════════════════════════════
* Reference DOM (placement page):
*
*
* Strategy: any div carrying both:
* - a brand-color inline background (one of the listed hex values)
* - rounded-2xl class
* gets flattened: transparent bg, dark text, hidden decorative avatars/stats.
*
* Excluded: anything inside footer/cta/hero/.landing/p-dialog (handled by
* later layers).
* ════════════════════════════════════════════════════════════════════════════ */
@layer admin {
/* ─── A. Brand-color inline backgrounds (admin page headers) ──────── */
/* Match rounded-xl, rounded-2xl, rounded-3xl, rounded-lg. */
/* Includes: hex (any case), rgb(), and linear-gradient with brand hex.*/
/* Step 1: flatten the colored background */
div[style*="#20638b" i][class*="rounded-"],
div[style*="#003366" i][class*="rounded-"],
div[style*="#1a5070" i][class*="rounded-"],
div[style*="#0077B6" i][class*="rounded-"],
div[style*="#0077b6" i][class*="rounded-"],
div[style*="#001f3f" i][class*="rounded-"],
div[style*="#1a6fa8" i][class*="rounded-"],
div[style*="#2d7aa8" i][class*="rounded-"],
div[style*="#134059" i][class*="rounded-"],
div[style*="rgb(32, 99, 139)" i][class*="rounded-"],
div[style*="rgb(0, 51, 102)" i][class*="rounded-"],
div[style*="linear-gradient" i][style*="#001f3f" i],
div[style*="linear-gradient" i][style*="#003366" i],
div[style*="linear-gradient" i][style*="#20638b" i],
div[style*="linear-gradient" i][style*="#1a5070" i] {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
padding: 0.75rem 1rem !important;
overflow: visible !important;
}
/* Step 2: title (h1/h2) — text-xl bold slate-800 */
div[style*="#20638b" i][class*="rounded-"] :is(h1, h2),
div[style*="#003366" i][class*="rounded-"] :is(h1, h2),
div[style*="#1a5070" i][class*="rounded-"] :is(h1, h2),
div[style*="#0077B6" i][class*="rounded-"] :is(h1, h2),
div[style*="#0077b6" i][class*="rounded-"] :is(h1, h2),
div[style*="#001f3f" i][class*="rounded-"] :is(h1, h2),
div[style*="#1a6fa8" i][class*="rounded-"] :is(h1, h2),
div[style*="#2d7aa8" i][class*="rounded-"] :is(h1, h2),
div[style*="linear-gradient" i][style*="#001f3f" i] :is(h1, h2),
div[style*="linear-gradient" i][style*="#003366" i] :is(h1, h2),
div[style*="linear-gradient" i][style*="#20638b" i] :is(h1, h2) {
color: var(--elp-text-base) !important;
-webkit-text-fill-color: var(--elp-text-base) !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
margin: 0 !important;
opacity: 1 !important;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
}
/* Step 3: subtitle (p) — text-xs slate-400 */
div[style*="#20638b" i][class*="rounded-"] p,
div[style*="#003366" i][class*="rounded-"] p,
div[style*="#1a5070" i][class*="rounded-"] p,
div[style*="#0077B6" i][class*="rounded-"] p,
div[style*="#0077b6" i][class*="rounded-"] p,
div[style*="#001f3f" i][class*="rounded-"] p,
div[style*="#1a6fa8" i][class*="rounded-"] p,
div[style*="#2d7aa8" i][class*="rounded-"] p,
div[style*="linear-gradient" i][style*="#001f3f" i] p,
div[style*="linear-gradient" i][style*="#003366" i] p,
div[style*="linear-gradient" i][style*="#20638b" i] p {
color: var(--elp-text-subtle) !important;
-webkit-text-fill-color: var(--elp-text-subtle) !important;
font-size: 0.75rem !important;
margin: 0.125rem 0 0 0 !important;
opacity: 1 !important;
}
/* Step 4: hide decorative avatars + stats pills inside admin header */
/* (Any element with translucent white bg — was decorative on dark bg.) */
div[style*="#20638b" i][class*="rounded-"] [class*="bg-white\/"],
div[style*="#003366" i][class*="rounded-"] [class*="bg-white\/"],
div[style*="#1a5070" i][class*="rounded-"] [class*="bg-white\/"],
div[style*="#0077B6" i][class*="rounded-"] [class*="bg-white\/"],
div[style*="#0077b6" i][class*="rounded-"] [class*="bg-white\/"],
div[style*="#001f3f" i][class*="rounded-"] [class*="bg-white\/"],
div[style*="#1a6fa8" i][class*="rounded-"] [class*="bg-white\/"],
div[style*="linear-gradient" i][style*="#001f3f" i] [class*="bg-white\/"],
div[style*="linear-gradient" i][style*="#003366" i] [class*="bg-white\/"],
div[style*="linear-gradient" i][style*="#20638b" i] [class*="bg-white\/"] {
display: none !important;
}
/* Step 5: keep header action buttons usable */
div[style*="#20638b" i][class*="rounded-"] p-button,
div[style*="#003366" i][class*="rounded-"] p-button,
div[style*="#1a5070" i][class*="rounded-"] p-button {
display: inline-flex !important;
}
/* Step 6: icons inside admin headers — brand color (not white) */
div[style*="#20638b" i][class*="rounded-"] i[class*="pi-"],
div[style*="#003366" i][class*="rounded-"] i[class*="pi-"],
div[style*="#1a5070" i][class*="rounded-"] i[class*="pi-"],
div[style*="#001f3f" i][class*="rounded-"] i[class*="pi-"],
div[style*="linear-gradient" i][style*="#001f3f" i] i[class*="pi-"],
div[style*="linear-gradient" i][style*="#003366" i] i[class*="pi-"],
div[style*="linear-gradient" i][style*="#20638b" i] i[class*="pi-"] {
color: var(--elp-primary) !important;
}
/* Step 7: any text-white inside admin header → forced dark */
/* (Catches subtitles/badges that use text-white instead of ) */
div[style*="#20638b" i][class*="rounded-"] [class*="text-white"],
div[style*="#003366" i][class*="rounded-"] [class*="text-white"],
div[style*="#1a5070" i][class*="rounded-"] [class*="text-white"],
div[style*="#001f3f" i][class*="rounded-"] [class*="text-white"],
div[style*="linear-gradient" i][style*="#001f3f" i] [class*="text-white"],
div[style*="linear-gradient" i][style*="#003366" i] [class*="text-white"],
div[style*="linear-gradient" i][style*="#20638b" i] [class*="text-white"] {
color: var(--elp-text-muted) !important;
-webkit-text-fill-color: var(--elp-text-muted) !important;
}
}
/* ════════════════════════════════════════════════════════════════════════════
* LAYER: dialog — p-dialog / [role="dialog"] specifics
* ════════════════════════════════════════════════════════════════════════════
* Dialogs need their own header style — the admin "transparent" rule is wrong
* for modals (a dialog needs a clear header strip).
* ════════════════════════════════════════════════════════════════════════════ */
@layer dialog {
/* Cancel any inherited light-pastel gradient that admin transforms applied */
p-dialog [style*="linear-gradient"],
.p-dialog [style*="linear-gradient"],
[role="dialog"] [style*="linear-gradient"],
p-dynamicdialog [style*="linear-gradient"] {
background: #ffffff !important;
background-image: none !important;
border: 1px solid var(--elp-border) !important;
color: var(--elp-text-strong) !important;
}
/* Dialog header — clean white strip with bottom border */
p-dialog .p-dialog-header,
.p-dialog .p-dialog-header,
p-dynamicdialog .p-dialog-header {
background: #ffffff !important;
background-image: none !important;
border-bottom: 1px solid var(--elp-border) !important;
padding: 1rem 1.25rem !important;
color: var(--elp-text-strong) !important;
}
/* Dialog title text */
p-dialog .p-dialog-title,
.p-dialog .p-dialog-title,
p-dialog [role="dialog"] h1,
p-dialog [role="dialog"] h2,
p-dialog [role="dialog"] h3,
.p-dialog h1, .p-dialog h2, .p-dialog h3 {
color: var(--elp-text-strong) !important;
-webkit-text-fill-color: var(--elp-text-strong) !important;
font-size: 1.125rem !important;
font-weight: 700 !important;
opacity: 1 !important;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
}
/* Dialog subtitle / paragraphs */
p-dialog [role="dialog"] p,
.p-dialog p {
color: var(--elp-text-muted) !important;
-webkit-text-fill-color: var(--elp-text-muted) !important;
opacity: 1 !important;
background: none !important;
}
/* Section headers inside dialog */
p-dialog [class*="rounded"] [class*="bg-"][class*="-50"],
.p-dialog [class*="rounded"] [class*="bg-"][class*="-50"],
p-dialog [style*="background"][style*="#e0f"],
p-dialog [style*="background"][style*="#f0f9"] {
background: var(--elp-bg-soft) !important;
border: 1px solid var(--elp-border) !important;
color: var(--elp-text-strong) !important;
}
/* Icons inside dialog */
p-dialog [role="dialog"] i[class*="pi-"],
.p-dialog i[class*="pi-"] {
color: var(--elp-primary) !important;
}
/* Close button (×) */
p-dialog .p-dialog-header-close,
.p-dialog .p-dialog-header-close {
color: var(--elp-text-muted) !important;
background: transparent !important;
border: none !important;
width: 2rem !important;
height: 2rem !important;
border-radius: var(--elp-radius-md) !important;
}
p-dialog .p-dialog-header-close:hover,
.p-dialog .p-dialog-header-close:hover {
background: var(--elp-bg-soft) !important;
color: var(--elp-text-strong) !important;
}
/* Form labels and helpers inside dialogs */
p-dialog label, .p-dialog label {
color: var(--elp-text-base);
font-size: var(--elp-font-size-sm);
font-weight: 600;
margin-bottom: 0.25rem;
display: inline-block;
}
p-dialog .p-error, .p-dialog .p-error,
p-dialog .invalid-feedback, .p-dialog .invalid-feedback {
color: var(--elp-danger-fg);
font-size: var(--elp-font-size-sm);
margin-top: 0.25rem;
}
}
/* ════════════════════════════════════════════════════════════════════════════
* LAYER: landing-protection — restore landing visuals (highest priority)
* ════════════════════════════════════════════════════════════════════════════
* Landing page MUST keep its dark gradient backgrounds, white headings,
* and translucent text. This layer reverts every admin/component override.
* ════════════════════════════════════════════════════════════════════════════ */
@layer landing-protection {
/* Restore dark backgrounds in landing zones */
footer[style*="#20638b"], footer[style*="#003366"], footer[style*="#1a5070"],
[class*="footer"][style*="#20638b"], [class*="footer"][style*="#003366"],
[class*="cta"][style*="#20638b"], [class*="cta"][style*="#003366"],
[class*="hero"][style*="#20638b"], [class*="hero"][style*="#003366"],
.landing [style*="#20638b"], .landing [style*="#003366"],
section[class*="cta"], section[class*="hero"] {
background: #20638b !important;
background-color: #20638b !important;
background-image: initial !important;
border: none !important;
padding: revert !important;
box-shadow: revert !important;
color: #ffffff !important;
}
/* Restore white headings in landing zones */
footer h1, footer h2, footer h3, footer h4, footer p, footer span,
[class*="footer"] h1, [class*="footer"] h2, [class*="footer"] h3, [class*="footer"] p,
[class*="hero"] h1, [class*="hero"] h2, [class*="hero"] h3, [class*="hero"] p,
[class*="cta"] h1, [class*="cta"] h2, [class*="cta"] h3, [class*="cta"] p,
.landing h1, .landing h2, .landing h3, .landing h4, .landing p {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: revert !important;
font-weight: revert !important;
opacity: 1 !important;
}
/* Restore translucent secondary text */
footer [class*="text-white\/"], footer .opacity-80,
[class*="footer"] [class*="text-white\/"], [class*="footer"] .opacity-80,
[class*="hero"] [class*="text-white\/"], [class*="hero"] .opacity-80,
[class*="cta"] [class*="text-white\/"], [class*="cta"] .opacity-80,
.landing [class*="text-white\/"], .landing .opacity-80 {
color: rgba(255, 255, 255, 0.85) !important;
opacity: 1 !important;
}
/* Restore translucent backgrounds (avatars/badges in hero/footer) */
footer [class*="bg-white\/"],
[class*="footer"] [class*="bg-white\/"],
[class*="hero"] [class*="bg-white\/"],
[class*="cta"] [class*="bg-white\/"],
.landing [class*="bg-white\/"] {
background: rgba(255, 255, 255, 0.15) !important;
color: #ffffff !important;
display: revert !important;
}
/* Restore icon color (was forced to brand by admin layer) */
footer i[class*="pi-"],
[class*="footer"] i[class*="pi-"],
[class*="hero"] i[class*="pi-"],
[class*="cta"] i[class*="pi-"],
.landing i[class*="pi-"] {
color: inherit !important;
}
}