/* ============================================================= 0) الأيقونات — شريط SVG مضمّن، بلا اعتماد على أي شبكة ============================================================= */ .ic{ width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex-shrink:0; fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; overflow:visible; } .ic.w-4,.ic.w-5{width:1.25em;height:1.25em;} /* ============================================================= CAREERPORTAL ATS — DESIGN SYSTEM نظام التوظيف الذكي — ملف نظام التصميم الموحّد ------------------------------------------------------------- مبني على: AI_DESIGN_GUIDE.md (ميادين EMS v1.0) نفس الرموز واللغة البصرية + طبقة حركة موسّعة (Motion Layer) ------------------------------------------------------------- ترتيب الاستدعاء في : 1) tailwindcss CDN 2) Chart.js (عند وجود رسوم) 3) Tajawal من Google Fonts 4) Font Awesome 6.5.1 5) هذا الملف 6) ats-core.js قبل ============================================================= */ /* ============================================================= 1) الرموز (TOKENS) ============================================================= */ :root{ /* سُلّم العلامة — Sky */ --sky-50:#F0F9FF; --sky-100:#E0F2FE; --sky-200:#BAE6FD; --sky-300:#7DD3FC; --sky-400:#38BDF8; --sky-500:#0EA5E9; --sky-600:#0284C7; --sky-700:#0369A1; --sky-800:#075985; --sky-900:#0C4A6E; /* السُلّم المحايد — Slate */ --slate-50:#F8FAFC; --slate-100:#F1F5F9; --slate-200:#E2E8F0; --slate-300:#CBD5E1; --slate-400:#94A3B8; --slate-500:#64748B; --slate-600:#475569; --slate-700:#334155; --slate-800:#1E293B; --slate-900:#0F172A; --slate-950:#020617; /* ألوان الدلالة */ --success:#059669; --success-strong:#10B981; --success-bg:#D1FAE5; --success-ink:#065F46; --warning:#F59E0B; --warning-bg:#FEF3C7; --warning-ink:#92400E; --danger:#EF4444; --danger-strong:#DC2626; --danger-bg:#FEE2E2; --danger-ink:#991B1B; --info:#3B82F6; --info-bg:#DBEAFE; --info-ink:#1E40AF; --purple:#A855F7; --purple-bg:#EDE9FE; --purple-ink:#5B21B6; /* تدرّجات التوقيع */ --grad-brand:linear-gradient(135deg,#0EA5E9 0%,#0284C7 100%); --grad-brand-deep:linear-gradient(135deg,#38BDF8 0%,#0EA5E9 50%,#0284C7 100%); --grad-success:linear-gradient(135deg,#10B981,#059669); --grad-dark:linear-gradient(135deg,#1E293B,#0F172A); --grad-ai:linear-gradient(135deg,#A855F7 0%,#0EA5E9 100%); /* الحواف */ --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-2xl:16px; --r-3xl:20px; --r-pill:999px; /* الظلال */ --sh-card:0 1px 3px rgba(15,23,42,.04); --sh-card-hover:0 8px 24px rgba(15,23,42,.06); --sh-lift:0 12px 30px rgba(15,23,42,.08); --sh-brand:0 4px 14px rgba(14,165,233,.35); --sh-brand-lg:0 10px 28px rgba(14,165,233,.42); --sh-pop:0 20px 50px rgba(15,23,42,.15); --sh-drawer:10px 0 30px rgba(0,0,0,.15); /* ★ منحنيات الحركة — طبقة النعومة */ --ease-out:cubic-bezier(.16,1,.3,1); /* خروج ناعم جداً */ --ease-soft:cubic-bezier(.4,0,.2,1); /* قياسي */ --ease-spring:cubic-bezier(.34,1.56,.64,1); /* ارتداد خفيف */ --t-fast:.18s var(--ease-soft); --t-base:.28s var(--ease-out); --t-slow:.42s var(--ease-out); --t-drawer:.46s var(--ease-out); --sidebar-w:260px; } /* ------------------------------------------------------------- الخط — Tajawal هو الخط الوحيد للواجهة القاعدة الشاملة تُطبَّق على كل شيء، ثم نستثني صراحةً محارف Font Awesome وكتل الكود حتى لا تنكسر الأيقونات أبداً. ------------------------------------------------------------- */ *,*::before,*::after{ font-family:'Tajawal','Noto Kufi Arabic','Segoe UI',Tahoma,Arial,sans-serif; font-feature-settings:'kern' 1,'liga' 1; } html,body,input,select,textarea,button,kbd,optgroup{ font-family:'Tajawal','Noto Kufi Arabic','Segoe UI',Tahoma,Arial,sans-serif; } /* ★ استثناء الأيقونات — يمنع كسرها بالقاعدة الشاملة أعلاه */ .fa,.fas,.far,.fal,.fat,.fad,.fa-solid,.fa-regular, [class^="fa-"],[class*=" fa-"], [class^="fa-"]::before,[class*=" fa-"]::before{ font-family:"Font Awesome 6 Free" !important; } .fab,.fa-brands,.fab::before,.fa-brands::before{font-family:"Font Awesome 6 Brands" !important;} .fas,.fa-solid,.fas::before,.fa-solid::before{font-weight:900 !important;} .far,.fa-regular,.fab,.fa-brands{font-weight:400 !important;} /* ★ استثناء الأرقام التقنية والمعرّفات وكتل الكود */ .font-mono,code,pre,kbd.mono,[data-mono]{ font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace !important; } /* شبكة احتياطية إن فشل تحميل Tajawal (يضيفها ats-core.js) */ html.font-fallback *{font-family:'Noto Kufi Arabic','Segoe UI',Tahoma,Arial,sans-serif;} html{scroll-behavior:smooth;} body{background:var(--slate-100); color:var(--slate-800); overflow-x:hidden;} ::-webkit-scrollbar{width:8px;height:8px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--slate-300);border-radius:10px;transition:background .2s;} ::-webkit-scrollbar-thumb:hover{background:var(--slate-400);} :focus-visible{outline:2px solid var(--sky-500);outline-offset:2px;border-radius:4px;} /* ============================================================= 2) ★ طبقة الحركة (MOTION LAYER) ============================================================= */ /* --- 2.1 دخول وخروج الصفحة --- */ @keyframes page-enter{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} body{animation:page-enter .5s var(--ease-out) both;} body.page-leaving{opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .22s ease;} /* شريط تقدّم التنقّل أعلى الشاشة */ #navProgress{ position:fixed;top:0;right:0;height:3px;width:0;z-index:999; background:var(--grad-brand-deep);box-shadow:0 0 12px rgba(14,165,233,.7); transition:width .3s var(--ease-out),opacity .3s;pointer-events:none; } /* --- 2.2 الكشف عند التمرير --- */ [data-reveal]{ opacity:0;transform:translateY(22px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); transition-delay:var(--d,0ms);will-change:opacity,transform; } [data-reveal="right"]{transform:translateX(28px);} [data-reveal="left"]{transform:translateX(-28px);} [data-reveal="zoom"]{transform:scale(.94);} [data-reveal="blur"]{filter:blur(8px);transform:translateY(10px);} [data-reveal].in{opacity:1;transform:none;filter:none;} /* --- 2.3 حركات مسمّاة --- */ @keyframes fade{from{opacity:0;}to{opacity:1;}} @keyframes fade-up{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}} @keyframes fade-down{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}} @keyframes scale-in{from{opacity:0;transform:scale(.94) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}} @keyframes slide-in-left{from{opacity:0;transform:translateX(-24px);}to{opacity:1;transform:none;}} @keyframes float-y{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}} @keyframes shimmer{100%{transform:translateX(-200%);}} @keyframes spin-slow{to{transform:rotate(360deg);}} @keyframes draw-ring{from{stroke-dashoffset:var(--dash);}to{stroke-dashoffset:var(--off);}} .fade-in{animation:fade-up .6s var(--ease-out) both;} .float-y{animation:float-y 6s ease-in-out infinite;} /* تتابع الدخول (Stagger) — ضعه على الحاوية */ .stagger > *{animation:fade-up .6s var(--ease-out) both;} .stagger > *:nth-child(1){animation-delay:.04s;} .stagger > *:nth-child(2){animation-delay:.10s;} .stagger > *:nth-child(3){animation-delay:.16s;} .stagger > *:nth-child(4){animation-delay:.22s;} .stagger > *:nth-child(5){animation-delay:.28s;} .stagger > *:nth-child(6){animation-delay:.34s;} .stagger > *:nth-child(7){animation-delay:.40s;} .stagger > *:nth-child(8){animation-delay:.46s;} .stagger > *:nth-child(9){animation-delay:.52s;} .stagger > *:nth-child(10){animation-delay:.58s;} .stagger > *:nth-child(11){animation-delay:.64s;} .stagger > *:nth-child(12){animation-delay:.70s;} /* --- 2.4 هيكل تحميل (Skeleton) --- */ .skeleton{position:relative;overflow:hidden;background:var(--slate-100);border-radius:var(--r-md);} .skeleton::after{ content:'';position:absolute;inset:0;transform:translateX(200%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent); animation:shimmer 1.4s infinite; } /* --- 2.5 التموّج على الأزرار (Ripple) --- */ .ripple-host{position:relative;overflow:hidden;} .ripple-ink{ position:absolute;border-radius:50%;transform:scale(0);pointer-events:none; background:rgba(255,255,255,.45);animation:ripple .6s var(--ease-out) forwards; } .ripple-dark .ripple-ink{background:rgba(14,165,233,.22);} @keyframes ripple{to{transform:scale(2.6);opacity:0;}} /* --- 2.6 مؤشّر التبويب المنزلق --- */ .tab-track{position:relative;} .tab-ink{ position:absolute;bottom:0;height:3px;border-radius:3px;background:var(--sky-500); transition:all .38s var(--ease-out);box-shadow:0 0 10px rgba(14,165,233,.5); } /* --- 2.7 أضواء محيطة (Ambient blobs) --- */ .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;} @keyframes blob-drift{ 0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(-24px,18px) scale(1.08);} 66%{transform:translate(18px,-14px) scale(.95);} } .blob-drift{animation:blob-drift 16s ease-in-out infinite;} /* ============================================================= 2.9) ★ إطار التطبيق — منطقة تمرير واحدة الصفحة نفسها لا تتمرّر. السايدبار والهيدر ثابتان بالكامل، والمحتوى وحده هو ما يتمرّر داخل .main-area. يُفعَّل بإضافة الصنف app-shell على وسم body ============================================================= */ :root{ --sidebar-rail:74px; --header-h:66px; } body.app-shell{height:100vh;overflow:hidden;} /* --- السايدبار: رأس ثابت + قائمة تتمرّر + بطاقة مستخدم مثبّتة --- */ body.app-shell .sidebar{ position:fixed;top:0;right:0;bottom:0;width:var(--sidebar-w); display:flex;flex-direction:column;z-index:30; transition:width .32s var(--ease-out),transform var(--t-drawer); } .side-head{flex-shrink:0;} .side-nav{ flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; scrollbar-gutter:stable; /* تلاشٍ خفيف أعلى وأسفل ليدلّ على وجود المزيد */ mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 14px),transparent 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10px,#000 calc(100% - 14px),transparent 100%); } .side-nav::-webkit-scrollbar{width:5px;} .side-nav::-webkit-scrollbar-thumb{background:transparent;border-radius:6px;transition:background .2s;} .side-nav:hover::-webkit-scrollbar-thumb{background:var(--slate-300);} .side-foot{flex-shrink:0;} /* --- الهيدر ثابت بعرض المحتوى فقط --- */ body.app-shell .app-header{ position:fixed;top:0;right:var(--sidebar-w);left:0; height:var(--header-h);min-height:var(--header-h); z-index:25;display:flex;align-items:center;overflow:hidden; transition:right .32s var(--ease-out),box-shadow var(--t-base); background:rgba(255,255,255,.92);backdrop-filter:blur(12px) saturate(150%); } /* صفّ الهيدر لا يلتفّ أبداً — الالتفاف يضخّم الارتفاع فيطغى على المحتوى */ body.app-shell .app-header .hdr-row{ flex-wrap:nowrap;height:100%;min-width:0; } body.app-shell .app-header .hdr-row > *{min-width:0;} body.app-shell .app-header .search-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} body.app-shell .app-header.scrolled{box-shadow:0 4px 20px rgba(15,23,42,.07);} /* --- منطقة التمرير الوحيدة --- تُثبَّت بإزاحات مطلقة لا بهوامش: الهامش قابل للانهيار ولإلغائه بأصناف Tailwind، أمّا top/bottom/left/right فلا. --- */ body.app-shell .main-area{ position:fixed; top:var(--header-h); bottom:0; left:0; right:var(--sidebar-w); margin:0 !important; height:auto; overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth; transition:right .32s var(--ease-out); } body.app-shell .main-area > main{max-width:1620px;margin-inline:auto;width:100%;} body.app-shell .main-area::-webkit-scrollbar{width:10px;} body.app-shell .main-area::-webkit-scrollbar-thumb{background:var(--slate-300);border:3px solid var(--slate-100);border-radius:10px;} /* --- وضع الشريط المضغوط (Rail) --- */ body.app-shell.rail{--sidebar-w:var(--sidebar-rail);} body.app-shell.rail .sidebar .nav-item{justify-content:center;padding-inline:0;} body.app-shell.rail .sidebar .nav-item > span, body.app-shell.rail .sidebar .nav-group-label, body.app-shell.rail .side-head .logo-text, body.app-shell.rail .side-foot .user-text{display:none;} body.app-shell.rail .side-head{justify-content:center;padding-inline:0;} body.app-shell.rail .side-foot .user-card{justify-content:center;padding:10px 0;} body.app-shell.rail .nav-item.active::before{right:-8px;} body.app-shell.rail #railBtn i{transform:rotate(180deg);} /* تلميح عند المرور في الوضع المضغوط */ body.app-shell.rail .nav-item{position:relative;} body.app-shell.rail .nav-item::after{ content:attr(data-label);position:absolute;right:calc(100% + 10px);top:50%; transform:translateY(-50%) translateX(6px);white-space:nowrap; background:var(--slate-900);color:#fff;font-size:12px;font-weight:700; padding:6px 11px;border-radius:8px;opacity:0;pointer-events:none; transition:all .22s var(--ease-out);box-shadow:var(--sh-pop);z-index:40; } body.app-shell.rail .nav-item:hover::after{opacity:1;transform:translateY(-50%) translateX(0);} /* زر طيّ السايدبار */ .rail-btn{ width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center; color:var(--slate-400);background:transparent;cursor:pointer;transition:all var(--t-fast);flex-shrink:0; } .rail-btn:hover{background:var(--sky-50);color:var(--sky-600);} .rail-btn i{transition:transform .32s var(--ease-out);} /* ستارة السايدبار على الجوال */ .side-scrim{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px); z-index:29;opacity:0;pointer-events:none;transition:opacity .3s;} .side-scrim.show{opacity:1;pointer-events:auto;} @media(max-width:1024px){ body.app-shell .sidebar{width:262px;transform:translateX(100%);} body.app-shell .sidebar.open{transform:translateX(0);box-shadow:-12px 0 40px rgba(15,23,42,.18);} body.app-shell .app-header{right:0;} body.app-shell .main-area{right:0 !important;} body.app-shell.rail{--sidebar-w:0px;} } /* ============================================================= 3) الشل — الشريط الجانبي ============================================================= */ .sidebar{ background:linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%); border-left:1px solid var(--slate-200); } .nav-item{border-radius:11px;transition:background var(--t-base),color var(--t-base),box-shadow var(--t-base),transform var(--t-fast);position:relative;} .nav-item:hover:not(.active){background:var(--sky-50);color:var(--sky-700);transform:translateX(-3px);} .nav-item.active{background:var(--grad-brand);color:#fff;box-shadow:0 4px 14px rgba(14,165,233,.32);} .nav-item.active::before{ content:'';position:absolute;right:-12px;top:50%;transform:translateY(-50%); width:4px;height:24px;background:var(--sky-700);border-radius:4px 0 0 4px; animation:tab-grow .45s var(--ease-spring) both; } @keyframes tab-grow{from{height:0;opacity:0;}to{height:24px;opacity:1;}} .nav-group-label{ font-size:10px;font-weight:700;color:var(--slate-400); text-transform:uppercase;letter-spacing:.05em;padding:0 12px;margin-bottom:8px; } /* ============================================================= 4) الشل — الشريط العلوي ============================================================= */ .search-bar{background:var(--slate-50);border:1.5px solid var(--slate-200);transition:all var(--t-base);} .search-bar:focus-within{background:#fff;border-color:var(--sky-400);box-shadow:0 0 0 4px rgba(14,165,233,.1);transform:translateY(-1px);} .notif-dropdown{ position:absolute;top:55px;left:0;width:380px;z-index:60; background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-pop); border:1px solid var(--slate-200);display:none;transform-origin:top left; } .notif-dropdown.show{display:block;animation:scale-in .28s var(--ease-out);} /* ============================================================= 5) البطاقات ============================================================= */ .card{ background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-2xl); box-shadow:var(--sh-card); transition:box-shadow var(--t-base),border-color var(--t-base),transform var(--t-base); } .card:hover{box-shadow:var(--sh-card-hover);} .card-lift{cursor:pointer;} .card-lift:hover{transform:translateY(-3px);box-shadow:var(--sh-lift);border-color:var(--sky-300);} .kpi-card{position:relative;overflow:hidden;} .kpi-card::before{ content:'';position:absolute;top:-50%;right:-30%;width:200px;height:200px;border-radius:50%; background:radial-gradient(circle,currentColor 0%,transparent 70%);opacity:.08; transition:opacity var(--t-slow),transform var(--t-slow); } .kpi-card:hover::before{opacity:.14;transform:scale(1.12);} .pattern-bg{ background-image: radial-gradient(circle at 100% 0%, rgba(14,165,233,.045) 0%, transparent 42%), radial-gradient(circle at 0% 100%, rgba(168,85,247,.035) 0%, transparent 42%); } /* شريط سياق الوظيفة — نظير .mini-event */ .mini-job{background:var(--grad-brand-deep);color:#fff;border-radius:var(--r-2xl);position:relative;overflow:hidden;} .mini-job::after{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 90% 20%, rgba(255,255,255,.16) 0%, transparent 45%); } /* بطاقة وظيفة في البوابة العامة */ .job-card{transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base);cursor:pointer;position:relative;overflow:hidden;} .job-card::after{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(135deg,rgba(14,165,233,.06),transparent 55%); opacity:0;transition:opacity var(--t-base); } .job-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--sky-300);} .job-card:hover::after{opacity:1;} /* ============================================================= 6) الأزرار ============================================================= */ .btn-primary{ background:var(--grad-brand);box-shadow:var(--sh-brand);color:#fff; transition:transform var(--t-fast),box-shadow var(--t-base),filter var(--t-fast); position:relative;overflow:hidden; } .btn-primary:hover{transform:translateY(-1.5px);box-shadow:var(--sh-brand-lg);} .btn-primary:active{transform:translateY(0) scale(.985);} .btn-secondary{background:#fff;border:1.5px solid var(--slate-200);color:var(--slate-800);transition:all var(--t-base);position:relative;overflow:hidden;} .btn-secondary:hover{border-color:var(--sky-500);color:var(--sky-700);transform:translateY(-1px);} .btn-secondary:active{transform:translateY(0) scale(.985);} .btn-success{background:var(--grad-success);color:#fff;transition:all var(--t-base);position:relative;overflow:hidden;} .btn-success:hover{transform:translateY(-1.5px);box-shadow:0 8px 20px rgba(16,185,129,.35);} .btn-danger{background:linear-gradient(135deg,#EF4444,#DC2626);color:#fff;transition:all var(--t-base);position:relative;overflow:hidden;} .btn-danger:hover{transform:translateY(-1.5px);box-shadow:0 8px 20px rgba(239,68,68,.32);} .btn-ai{background:var(--grad-ai);color:#fff;box-shadow:0 4px 14px rgba(168,85,247,.32);transition:all var(--t-base);position:relative;overflow:hidden;} .btn-ai:hover{transform:translateY(-1.5px);box-shadow:0 10px 26px rgba(168,85,247,.42);} .action-btn-mini{ width:32px;height:32px;border-radius:var(--r-sm); background:#fff;border:1px solid var(--slate-200);color:var(--slate-500); font-size:12px;display:inline-flex;align-items:center;justify-content:center; cursor:pointer;transition:all var(--t-fast); } .action-btn-mini:hover{border-color:var(--sky-500);color:var(--sky-700);background:var(--sky-50);transform:translateY(-1px);} .action-btn-glass{ background:rgba(255,255,255,.18);color:#fff; border:1.5px solid rgba(255,255,255,.30);backdrop-filter:blur(8px);transition:all var(--t-base); } .action-btn-glass:hover{background:rgba(255,255,255,.30);transform:translateY(-1px);} .icon-circle{width:40px;height:40px;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;transition:transform var(--t-base);} .card-lift:hover .icon-circle,.job-card:hover .icon-circle{transform:scale(1.08) rotate(-4deg);} /* ============================================================= 7) الوسوم والحالات ============================================================= */ .badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:var(--r-xs);font-size:11px;font-weight:600;} .badge-success{background:#D1FAE5;color:#065F46;} .badge-warning{background:#FEF3C7;color:#92400E;} .badge-danger {background:#FEE2E2;color:#991B1B;} .badge-info {background:#DBEAFE;color:#1E40AF;} .badge-sky {background:#E0F2FE;color:#0C4A6E;} .badge-purple {background:#EDE9FE;color:#5B21B6;} .badge-orange {background:#FFEDD5;color:#9A3412;} .badge-slate {background:#F1F5F9;color:#334155;} .status-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;} .status-live{background:#D1FAE5;color:#065F46;} @keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.6);}50%{box-shadow:0 0 0 6px rgba(16,185,129,0);}} .pulse-dot{animation:pulse-dot 2s infinite;} @keyframes pulse-red{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.6);}50%{box-shadow:0 0 0 6px rgba(239,68,68,0);}} .pulse-red{animation:pulse-red 1.5s infinite;} @keyframes pulse-amber{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.6);}50%{box-shadow:0 0 0 10px rgba(251,191,36,0);}} .pulse-amber{animation:pulse-amber 1.6s infinite;} /* تصنيفات الأقسام — لوحة مغلقة */ .dep-tech {background:#E0F2FE;color:#0C4A6E;} .dep-finance {background:#D1FAE5;color:#065F46;} .dep-hr {background:#EDE9FE;color:#5B21B6;} .dep-sales {background:#FFEDD5;color:#9A3412;} .dep-marketing {background:#FCE7F3;color:#9D174D;} .dep-ops {background:#FEF3C7;color:#92400E;} .dep-legal {background:#F1F5F9;color:#334155;} .dep-design {background:#ECFCCB;color:#3F6212;} .dep-support {background:#CFFAFE;color:#155E75;} .dep-supply {background:#F3E8FF;color:#6B21A8;} /* ============================================================= 8) الفلاتر والتبويبات ============================================================= */ .filter-chip{ padding:7px 14px;font-size:12px;font-weight:600;color:var(--slate-600); border:1.5px solid var(--slate-200);background:#fff;border-radius:var(--r-md); cursor:pointer;transition:all var(--t-fast);display:inline-flex;align-items:center;gap:6px; } .filter-chip:hover{border-color:var(--sky-300);background:var(--sky-50);transform:translateY(-1px);} .filter-chip.active{background:var(--sky-100);border-color:var(--sky-500);color:var(--sky-700);} .seg-btn{padding:8px 16px;font-size:13px;font-weight:600;color:var(--slate-500);border-radius:var(--r-sm);transition:all var(--t-base);white-space:nowrap;} .seg-btn:hover:not(.active){color:var(--sky-700);} .seg-btn.active{background:#fff;color:var(--sky-700);box-shadow:0 1px 3px rgba(0,0,0,.08);} .status-tab{ padding:11px 18px;font-size:13px;font-weight:700;color:var(--slate-500); border-radius:12px 12px 0 0;cursor:pointer;transition:all var(--t-base); display:inline-flex;align-items:center;gap:8px;border-bottom:3px solid transparent; } .status-tab:hover{color:var(--sky-700);background:var(--sky-50);} .status-tab.active{color:var(--sky-600);background:var(--sky-50);} .tab-btn{ padding:10px 16px;font-size:13px;font-weight:600;color:var(--slate-500); border-radius:var(--r-md);white-space:nowrap;cursor:pointer;transition:all var(--t-base); display:flex;align-items:center;gap:6px; } .tab-btn:hover{background:var(--sky-50);color:var(--sky-700);} .tab-btn.active{background:var(--sky-500);color:#fff;box-shadow:0 2px 10px rgba(14,165,233,.32);} .view-btn{width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;transition:all var(--t-base);} .view-btn.active{background:var(--sky-500);color:#fff;box-shadow:0 2px 8px rgba(14,165,233,.3);} .view-btn:not(.active){color:var(--slate-400);background:#fff;border:1px solid var(--slate-200);} /* لوحة قابلة للتبديل بحركة ناعمة */ .pane{display:none;} .pane.active{display:block;animation:fade-up .45s var(--ease-out) both;} /* ============================================================= 9) الجداول ============================================================= */ .data-table{width:100%;border-collapse:separate;border-spacing:0;} .data-table thead th{ background:var(--slate-50);color:var(--slate-500); font-size:11px;font-weight:700;text-align:right;padding:12px 14px; border-bottom:1px solid var(--slate-200);text-transform:uppercase;letter-spacing:.03em; position:sticky;top:0;z-index:1; } .data-table tbody td{padding:14px;border-bottom:1px solid var(--slate-100);font-size:13px;} .data-table tbody tr{transition:background var(--t-fast),transform var(--t-fast);cursor:pointer;} .data-table tbody tr:hover{background:var(--sky-50);} .data-table tbody tr:hover td:first-child{box-shadow:inset -3px 0 0 var(--sky-500);} /* ============================================================= 10) النماذج ============================================================= */ .form-input,.form-select,.form-textarea{ background:#fff;border:1.5px solid var(--slate-200);border-radius:var(--r-md); padding:10px 14px;font-size:13px;width:100%;transition:all var(--t-base);font-family:'Tajawal',sans-serif; } .form-input:focus,.form-select:focus,.form-textarea:focus{ border-color:var(--sky-500);box-shadow:0 0 0 4px rgba(14,165,233,.12);outline:none; } .form-label{display:block;font-size:12px;font-weight:700;color:var(--slate-700);margin-bottom:6px;} .form-label .req{color:var(--danger);} .form-error{font-size:11.5px;color:var(--danger-ink);margin-top:5px;animation:fade-down .3s var(--ease-out) both;} .form-input.is-error{border-color:var(--danger);} .toggle-sw{position:relative;display:inline-block;width:44px;height:24px;} .toggle-sw input{opacity:0;width:0;height:0;} .toggle-sw .slider{position:absolute;cursor:pointer;inset:0;background:var(--slate-300);transition:.32s var(--ease-out);border-radius:24px;} .toggle-sw .slider:before{content:'';position:absolute;height:18px;width:18px;right:3px;top:3px;background:#fff;transition:.32s var(--ease-spring);border-radius:50%;} .toggle-sw input:checked + .slider{background:var(--sky-500);} .toggle-sw input:checked + .slider:before{transform:translateX(-20px);} .sup-check{ display:flex;align-items:center;gap:12px;padding:11px 14px; border:1.5px solid var(--slate-200);border-radius:var(--r-md); cursor:pointer;transition:all var(--t-fast);background:#fff; } .sup-check:hover{border-color:var(--sky-300);background:var(--sky-50);} .sup-check.checked{border-color:var(--sky-500);background:var(--sky-50);box-shadow:0 0 0 3px rgba(14,165,233,.1);} /* منطقة رفع الملفات */ .dropzone{ border:2px dashed var(--slate-300);border-radius:var(--r-2xl);background:var(--slate-50); padding:32px;text-align:center;transition:all var(--t-base);cursor:pointer; } .dropzone:hover,.dropzone.drag{border-color:var(--sky-500);background:var(--sky-50);transform:scale(1.008);} /* ============================================================= 11) الطبقات — نافذة / لوحة منزلقة / Toast ============================================================= */ .modal-overlay{ position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(4px); z-index:90;display:none;align-items:center;justify-content:center;padding:20px; } .modal-overlay.show{display:flex;animation:fade .25s var(--ease-out);} .modal-box{ background:#fff;border-radius:var(--r-3xl);width:100%;max-width:720px; max-height:90vh;overflow-y:auto;animation:scale-in .34s var(--ease-spring); } .drawer-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);z-index:80;display:none;} .drawer-overlay.show{display:block;animation:fade .25s;} .drawer{ position:fixed;top:0;left:0;bottom:0;z-index:81;width:min(640px,95vw); background:#fff;display:flex;flex-direction:column; transform:translateX(-100%);transition:transform var(--t-drawer);box-shadow:var(--sh-drawer); } .drawer.show{transform:translateX(0);} .drawer-header{padding:18px 22px;border-bottom:1px solid var(--slate-200);display:flex;align-items:flex-start;justify-content:space-between;gap:12px;} .drawer-body{flex:1;overflow-y:auto;padding:20px 22px;} .drawer-footer{padding:14px 22px;border-top:1px solid var(--slate-200);background:var(--slate-50);display:flex;gap:10px;} .drawer.show .drawer-body > *{animation:fade-up .5s var(--ease-out) both;} .drawer.show .drawer-body > *:nth-child(2){animation-delay:.06s;} .drawer.show .drawer-body > *:nth-child(3){animation-delay:.12s;} .drawer.show .drawer-body > *:nth-child(4){animation-delay:.18s;} .drawer.show .drawer-body > *:nth-child(5){animation-delay:.24s;} /* Toast */ #toastWrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:10px;align-items:center;} .toast{ background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-xl); box-shadow:var(--sh-pop);padding:12px 18px;display:flex;align-items:center;gap:10px; font-size:13px;font-weight:600;color:var(--slate-800);min-width:260px; animation:toast-in .45s var(--ease-spring) both; } .toast.out{animation:toast-out .3s var(--ease-soft) forwards;} @keyframes toast-in{from{opacity:0;transform:translateY(-24px) scale(.94);}to{opacity:1;transform:none;}} @keyframes toast-out{to{opacity:0;transform:translateY(-16px) scale(.96);}} .toast .t-ic{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex-shrink:0;} /* ============================================================= 12) عناصر تشغيلية متكرّرة ============================================================= */ .progress-bar{height:6px;background:var(--slate-200);border-radius:10px;overflow:hidden;} .progress-fill{height:100%;border-radius:10px;width:0;transition:width 1.1s var(--ease-out);} .step-circle{ width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-weight:800;font-size:12px;flex-shrink:0;background:var(--slate-100);color:var(--slate-500); transition:all .45s var(--ease-spring); } .step-circle.completed{background:var(--success-strong);color:#fff;} .step-circle.current{background:var(--grad-brand);color:#fff;box-shadow:0 0 0 6px rgba(14,165,233,.15);} .activity-item{position:relative;padding-right:32px;padding-bottom:16px;} .activity-item::before{content:'';position:absolute;right:9px;top:24px;bottom:0;width:2px;background:var(--slate-200);} .activity-item:last-child::before{display:none;} .timeline-icon{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;} /* لوح كانبان — مسار التوظيف */ .kanban-col{background:var(--slate-50);border-radius:var(--r-lg);padding:12px;min-width:290px;flex-shrink:0;transition:background var(--t-base);} .kanban-col.drag-over{background:var(--sky-50);box-shadow:inset 0 0 0 2px var(--sky-300);} .col-new {background:linear-gradient(180deg,#F1F5F9 0%,#F8FAFC 100%);} .col-screen {background:linear-gradient(180deg,#E0F2FE 0%,#F8FAFC 100%);} .col-interview{background:linear-gradient(180deg,#EDE9FE 0%,#F8FAFC 100%);} .col-assess {background:linear-gradient(180deg,#FEF3C7 0%,#FFFBEB 100%);} .col-offer {background:linear-gradient(180deg,#FFEDD5 0%,#FFF7ED 100%);} .col-hired {background:linear-gradient(180deg,#D1FAE5 0%,#ECFDF5 100%);} .cand-card{ background:#fff;border:1px solid var(--slate-200);border-radius:var(--r-lg); padding:12px;margin-bottom:10px;cursor:grab; transition:transform var(--t-base),box-shadow var(--t-base),border-color var(--t-base),opacity .2s; border-top:3px solid var(--slate-300); } .cand-card:hover{box-shadow:0 8px 20px rgba(15,23,42,.09);border-color:var(--sky-300);transform:translateY(-2px);} .cand-card:active{cursor:grabbing;} .cand-card.dragging{opacity:.45;transform:rotate(-1.5deg) scale(.98);} .cand-card.fit-high{border-top-color:var(--success-strong);} .cand-card.fit-mid {border-top-color:var(--warning);} .cand-card.fit-low {border-top-color:var(--slate-300);} @keyframes card-drop{0%{transform:scale(1.04);box-shadow:0 12px 30px rgba(14,165,233,.28);}100%{transform:none;}} .cand-card.dropped{animation:card-drop .5s var(--ease-out);} /* صورة رمزية بحرفين */ .avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0;} /* دائرة نتيجة المطابقة */ .score-ring{position:relative;display:inline-flex;align-items:center;justify-content:center;} .score-ring svg{transform:rotate(-90deg);} .score-ring .ring-bg{stroke:var(--slate-100);} .score-ring .ring-fg{stroke-linecap:round;transition:stroke-dashoffset 1.4s var(--ease-out);} .score-ring .ring-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;line-height:1;} /* شريط مهارة */ .skill-row{display:flex;align-items:center;gap:10px;} .skill-bar{flex:1;height:8px;background:var(--slate-100);border-radius:8px;overflow:hidden;} .skill-fill{height:100%;width:0;border-radius:8px;transition:width 1.2s var(--ease-out);} .stars i{color:var(--warning);font-size:13px;} .stars i.empty{color:var(--slate-200);} .check-item{ padding:18px 20px;border-radius:var(--r-xl);border:1.5px solid var(--slate-200); background:#fff;display:flex;align-items:center;gap:16px; transition:all var(--t-base);position:relative;overflow:hidden; } .check-item.completed{background:linear-gradient(135deg,#F0FDF4,#FFFFFF);border-color:#86EFAC;} .check-item.pending {background:linear-gradient(135deg,#FEF3C7,#FFFFFF);border-color:#FCD34D;} .comment-bubble{flex:1;background:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--r-xl);padding:12px 14px;} .comment-bubble.ai{background:#F5F3FF;border-color:#DDD6FE;} /* المساعد الذكي العائم */ .fab-assistant{ position:fixed;bottom:30px;left:30px;z-index:50; width:60px;height:60px;border-radius:50%; background:var(--grad-ai);box-shadow:0 8px 24px rgba(168,85,247,.42); cursor:pointer;transition:transform .35s var(--ease-spring),box-shadow var(--t-base); } .fab-assistant:hover{transform:scale(1.1) rotate(6deg);box-shadow:0 14px 34px rgba(168,85,247,.5);} .fab-pulse{position:absolute;inset:0;border-radius:50%;background:rgba(168,85,247,.4);animation:fab-pulse 2.4s infinite;} @keyframes fab-pulse{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.55);opacity:0;}} /* شريط علوي عام للبوابة العامة */ .portal-header{ background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(160%); border-bottom:1px solid var(--slate-200);transition:box-shadow var(--t-base),background var(--t-base); } .portal-header.scrolled{box-shadow:0 6px 24px rgba(15,23,42,.07);background:rgba(255,255,255,.95);} .portal-link{position:relative;padding:6px 2px;font-weight:600;font-size:14px;color:var(--slate-600);transition:color var(--t-base);} .portal-link::after{content:'';position:absolute;bottom:0;right:0;width:0;height:2px;background:var(--sky-500);border-radius:2px;transition:width .35s var(--ease-out);} .portal-link:hover{color:var(--sky-700);} .portal-link:hover::after,.portal-link.active::after{width:100%;} .portal-link.active{color:var(--sky-700);} /* ============================================================= 12.5) ★ الطبقة الحيّة — عناصر تتحدّث فعلاً ============================================================= */ /* ومضة عند تغيّر رقم حيّ */ @keyframes num-pop{0%{transform:scale(1);}38%{transform:scale(1.22);color:var(--sky-500);}100%{transform:scale(1);}} .num-pop{display:inline-block;animation:num-pop .62s var(--ease-spring);} /* خانة عدّ تنازلي */ .cd-box{ background:#fff;border:1.5px solid var(--slate-200);border-radius:var(--r-md); padding:8px 10px;min-width:58px;text-align:center;transition:border-color var(--t-base); } .cd-box .cd-num{font-size:20px;font-weight:900;line-height:1;color:var(--slate-900);font-variant-numeric:tabular-nums;} .cd-box .cd-lbl{font-size:10px;font-weight:700;color:var(--slate-400);margin-top:3px;} .cd-box.glass{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);backdrop-filter:blur(8px);} .cd-box.glass .cd-num{color:#fff;} .cd-box.glass .cd-lbl{color:rgba(255,255,255,.7);} .cd-box.urgent{border-color:#FCA5A5;background:#FEF2F2;} .cd-box.urgent .cd-num{color:var(--danger-strong);} /* شريط نشاط حيّ */ .live-feed{position:relative;overflow:hidden;} .live-feed-item{ display:flex;align-items:center;gap:10px;padding:10px 0; border-bottom:1px solid var(--slate-100); animation:feed-in .55s var(--ease-out) both; } .live-feed-item:last-child{border-bottom:none;} @keyframes feed-in{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}} /* نقطة بثّ حيّ */ .live-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--success-strong);flex-shrink:0;} .live-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:inherit;animation:live-ring 1.8s ease-out infinite;} @keyframes live-ring{0%{transform:scale(1);opacity:.7;}100%{transform:scale(2.8);opacity:0;}} /* لوحة الأوامر Ctrl+K */ .cmdk-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(6px);z-index:120;display:none;padding-top:12vh;justify-content:center;} .cmdk-overlay.show{display:flex;animation:fade .2s;} .cmdk-box{ width:min(620px,92vw);height:max-content;max-height:66vh;background:#fff; border-radius:var(--r-3xl);box-shadow:var(--sh-pop);overflow:hidden;display:flex;flex-direction:column; animation:scale-in .3s var(--ease-spring); } .cmdk-input{border:none;outline:none;flex:1;font-size:15px;font-weight:600;background:transparent;} .cmdk-list{overflow-y:auto;padding:8px;} .cmdk-item{ display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-md); cursor:pointer;transition:background var(--t-fast); } .cmdk-item:hover,.cmdk-item.sel{background:var(--sky-50);} .cmdk-item.sel{box-shadow:inset 3px 0 0 var(--sky-500);} .cmdk-sec{font-size:10px;font-weight:800;color:var(--slate-400);text-transform:uppercase;letter-spacing:.06em;padding:10px 13px 5px;} /* زر محفوظ */ .saved-on{background:var(--sky-100)!important;border-color:var(--sky-500)!important;color:var(--sky-700)!important;} /* ============================================================= 14) الاستجابة ============================================================= */ @media (max-width:1280px){ .notif-dropdown{width:340px;} } @media (max-width:1024px){ .sidebar{transform:translateX(100%);transition:transform var(--t-drawer);} .sidebar.open{transform:translateX(0);} .main-area{margin-right:0 !important;} } @media (max-width:1024px){ body.app-shell .main-area > main{padding:18px !important;} } @media (max-width:768px){ main{padding:14px !important;} .mini-job{border-radius:var(--r-lg);} .modal-box{max-width:100%;border-radius:var(--r-2xl);} .drawer,.devdocs-drawer{width:100vw;} .fab-assistant{width:52px;height:52px;bottom:18px;left:18px;} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;} [data-reveal]{opacity:1 !important;transform:none !important;filter:none !important;} } /* ============================================================ التنقّل الهرمي القابل للطيّ ============================================================ */ .nav-search{position:relative;margin:10px 10px 6px;} .nav-search i,.nav-search svg{position:absolute;right:11px;top:50%;transform:translateY(-50%); width:13px;height:13px;color:var(--slate-400);pointer-events:none;} .nav-search input{width:100%;border:1.5px solid var(--slate-200);border-radius:10px; padding:8px 32px 8px 11px;font-family:inherit;font-size:12.5px;background:var(--slate-50); transition:all var(--t-base);color:var(--slate-700);} .nav-search input::placeholder{color:var(--slate-400);} .nav-search input:focus{outline:none;border-color:var(--sky-400);background:#fff; box-shadow:0 0 0 3px rgba(14,165,233,.1);} .nav-mod{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border-radius:11px; font-family:inherit;font-size:13px;font-weight:800;color:var(--slate-600);background:transparent; border:0;cursor:pointer;transition:all var(--t-base);text-align:right;position:relative;} .nav-mod:hover{background:var(--sky-50);color:var(--sky-700);} .nav-mod .mi{width:20px;text-align:center;flex-shrink:0;font-size:13px;} .nav-mod .mt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .nav-mod .chev{width:11px;height:11px;flex-shrink:0;color:var(--slate-400); transition:transform .28s var(--ease-out);} .nav-mod.open .chev{transform:rotate(-90deg);} .nav-mod.has-active{color:var(--sky-700);background:var(--sky-50);} .nav-mod .cnt{font-size:10px;font-weight:900;color:var(--slate-400);background:var(--slate-100); border-radius:var(--r-pill);padding:1px 7px;flex-shrink:0;} .nav-mod.has-active .cnt{background:#fff;color:var(--sky-600);} .nav-sub{overflow:hidden;max-height:0;transition:max-height .32s var(--ease-out);} .nav-mod.open + .nav-sub{max-height:1400px;} .nav-leaf{display:flex;align-items:center;gap:9px;padding:6.5px 10px 6.5px 8px; margin:1px 0 1px 0;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--slate-500); transition:all var(--t-base);position:relative;} .nav-sub .nav-leaf{margin-right:14px;} .nav-sub .nav-sub .nav-leaf{margin-right:26px;} .nav-leaf::before{content:'';position:absolute;right:-8px;top:0;bottom:0;width:1.5px; background:var(--slate-200);} .nav-leaf:hover{background:var(--sky-50);color:var(--sky-700);} .nav-leaf:hover::before{background:var(--sky-300);} .nav-leaf.active{background:var(--grad-brand);color:#fff;font-weight:800; box-shadow:0 3px 12px rgba(14,165,233,.3);} .nav-leaf.active::before{background:var(--sky-500);width:2.5px;} .nav-leaf .li{width:14px;height:14px;flex-shrink:0;opacity:.75;} .nav-leaf.active .li{opacity:1;} .nav-leaf span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .nav-leaf .badge{margin-right:auto;flex-shrink:0;} .nav-sec{font-size:10px;font-weight:900;color:var(--slate-400);letter-spacing:.05em; padding:12px 12px 5px;text-transform:uppercase;} .nav-empty{padding:26px 14px;text-align:center;font-size:12px;font-weight:700;color:var(--slate-400);} /* وضع الشريط المطويّ */ body.app-shell.rail .nav-search, body.app-shell.rail .nav-sub, body.app-shell.rail .nav-sec, body.app-shell.rail .nav-mod .mt, body.app-shell.rail .nav-mod .chev, body.app-shell.rail .nav-mod .cnt{display:none !important;} body.app-shell.rail .nav-mod{justify-content:center;padding-inline:0;} body.app-shell.rail .nav-mod.has-active{background:var(--grad-brand);color:#fff;} body.app-shell.rail .nav-mod::after{ content:attr(data-label);position:absolute;right:calc(100% + 10px);top:50%; transform:translateY(-50%) translateX(6px);background:var(--slate-900);color:#fff; font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:8px;white-space:nowrap; opacity:0;pointer-events:none;transition:all var(--t-base);z-index:60;} body.app-shell.rail .nav-mod:hover::after{opacity:1;transform:translateY(-50%) translateX(0);} /* زرّ الدخول للنظام الداخلي من البوابة العامة */ .hr-login-btn{ background:var(--grad-dark);color:#fff;padding:7px 12px;border-radius:var(--r-md); font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:7px; transition:all var(--t-base);box-shadow:0 3px 10px rgba(15,23,42,.22);cursor:pointer;border:0; } .hr-login-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(15,23,42,.3);} .hr-login-btn i,.hr-login-btn svg{color:var(--sky-300);} /* زرّ العودة في صفحات التفاصيل — تُفتح من قوائمها لا من السايدبار */ .back-crumb{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800; color:var(--slate-500);background:#fff;border:1.5px solid var(--slate-200); padding:6px 13px;border-radius:var(--r-pill);transition:all var(--t-base);width:fit-content;} .back-crumb:hover{color:var(--sky-700);border-color:var(--sky-300);background:var(--sky-50); transform:translateX(3px);} .back-crumb i,.back-crumb svg{width:11px;height:11px;} /* ============================================================ قائمة الحساب في الشريط العلوي ============================================================ */ .acct-dropdown{position:absolute;top:calc(100% + 10px);left:0;width:262px;background:#fff; border:1px solid var(--slate-200);border-radius:var(--r-xl);box-shadow:var(--sh-pop); z-index:70;opacity:0;visibility:hidden;transform:translateY(-8px); transition:all var(--t-base);overflow:hidden;} .acct-dropdown.show{opacity:1;visibility:visible;transform:translateY(0);} .acct-head{display:flex;align-items:center;gap:11px;padding:14px 15px; background:linear-gradient(135deg,var(--sky-50),#fff);border-bottom:1px solid var(--slate-100);} .acct-body{padding:6px;} .acct-foot{padding:6px;border-top:1px solid var(--slate-100);} .acct-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px; font-size:13px;font-weight:700;color:var(--slate-600);transition:all var(--t-fast);cursor:pointer;} .acct-item:hover{background:var(--sky-50);color:var(--sky-700);} .acct-item i,.acct-item svg{width:15px;height:15px;flex-shrink:0;color:var(--slate-400);} .acct-item:hover i,.acct-item:hover svg{color:var(--sky-600);} .acct-item.danger:hover{background:#FEF2F2;color:var(--danger-strong,#DC2626);} .acct-item.danger:hover i,.acct-item.danger:hover svg{color:var(--danger-strong,#DC2626);} /* ============================================================ تلميحات تفسيرية — data-tip ============================================================ */ .ats-tip{ position:fixed;z-index:200;max-width:270px;background:var(--slate-900);color:#fff; font-family:'Tajawal',sans-serif;font-size:11.5px;font-weight:600;line-height:1.75; padding:9px 13px;border-radius:10px;box-shadow:0 10px 28px rgba(15,23,42,.28); opacity:0;visibility:hidden;transform:translateY(-5px);pointer-events:none; transition:opacity .16s var(--ease-out),transform .16s var(--ease-out),visibility .16s; } .ats-tip.show{opacity:1;visibility:visible;transform:translateY(0);} [data-tip]{cursor:help;} a[data-tip],button[data-tip],.card[data-tip]{cursor:pointer;} /* شارة «ما فائدة هذه الشاشة؟» في الشريط العلوي */ .value-chip{ display:inline-flex;align-items:center;gap:5px;flex-shrink:0;margin-right:8px; padding:3px 9px;border-radius:var(--r-pill);cursor:help; background:linear-gradient(135deg,#F5F3FF,#EDE9FE);border:1px solid #DDD6FE; color:#6D28D9;font-size:10.5px;font-weight:800;white-space:nowrap; transition:all var(--t-base); } .value-chip:hover,.value-chip:focus{background:#DDD6FE;border-color:#C4B5FD;outline:none; transform:translateY(-1px);box-shadow:0 3px 9px rgba(109,40,217,.16);} .value-chip svg{opacity:.85;} @media (max-width:900px){ .value-chip span{display:none;} .value-chip{padding:4px 7px;} } .value-chip-float{position:fixed;bottom:18px;right:18px;z-index:60;margin:0; padding:8px 14px;font-size:11.5px;box-shadow:0 6px 20px rgba(109,40,217,.2);} @media (max-width:900px){ .value-chip-float span{display:inline;} } @media print{ .value-chip-float{display:none;} }