/* ===================================================================== DESIGN SYSTEM — منصة إدارة الأكاديميات ملف موحّد لكل لوحات التحكم (طالب / مدرب / نادي / إدارة / استقبال / دعم فني) يعتمد على متغيرات CSS بحيث يسهل تغيير الهوية اللونية من مكان واحد، ويوفر مكونات جاهزة (بطاقات، جداول، شارات، أزرار...) تعمل تلقائياً مع Tailwind ومع اتجاه RTL/LTR. ===================================================================== */ :root { /* الألوان الأساسية */ --color-primary: #4f46e5; /* indigo-600 */ --color-primary-dark: #4338ca; /* indigo-700 */ --color-primary-light: #eef2ff;/* indigo-50 */ --color-accent: #0ea5e9; /* sky-500 */ --color-success: #16a34a; --color-success-light: #dcfce7; --color-warning: #d97706; --color-warning-light: #fef3c7; --color-danger: #dc2626; --color-danger-light: #fee2e2; --color-info: #0284c7; --color-info-light: #e0f2fe; /* محايدات */ --color-bg: #f4f5fa; --color-surface: #ffffff; --color-border: #e5e7eb; --color-text: #1f2430; --color-text-muted: #6b7280; /* هندسة */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04); --shadow-md: 0 8px 24px -6px rgba(17, 24, 39, 0.12); --shadow-lg: 0 20px 40px -12px rgba(17, 24, 39, 0.18); --sidebar-w: 16rem; --topbar-h: 4rem; --bottomnav-h: 4.5rem; --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); } /* وضع داكن اختياري (يُفعّل بإضافة data-theme="dark" على ) */ [data-theme="dark"] { --color-bg: #10131c; --color-surface: #171b26; --color-border: #262c3a; --color-text: #e7e9f0; --color-text-muted: #9aa1b3; --color-primary-light: #1e2240; } html, body { background-color: var(--color-bg); color: var(--color-text); scroll-behavior: smooth; } * { box-sizing: border-box; } ::selection { background: var(--color-primary); color: #fff; } /* شريط تمرير أنيق */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #c7cbd6; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: #a4a9b8; } [x-cloak] { display: none !important; } /* ===================================================================== الحاوية / تخطيط الصفحة ===================================================================== */ .page-container { max-width: 1400px; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 2rem); padding-block: 1.5rem; width: 100%; } .app-main { min-height: 100vh; /* لم يعد أي قالب يعرض شريط تنقل سفلياً (استُبدل بالشريط الجانبي)، فحجز ارتفاعه كان يترك فراغاً ميتاً أسفل كل صفحة. */ padding-bottom: 1.5rem; } @media (min-width: 1280px) { .app-main-with-sidebar { padding-inline-start: var(--sidebar-w); padding-bottom: 1.5rem; } } .page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .page-header h1, .page-header .page-title { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 800; color: var(--color-text); margin: 0; } .page-subtitle { color: var(--color-text-muted); font-size: 0.925rem; margin-top: 0.25rem; } /* خيط تنقّل (Breadcrumb) */ .breadcrumb-ds { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.75rem; } .breadcrumb-ds a { color: var(--color-text-muted); text-decoration: none; } .breadcrumb-ds a:hover { color: var(--color-primary); } .breadcrumb-ds .sep { opacity: 0.5; } .breadcrumb-ds .current { color: var(--color-text); font-weight: 600; } /* ===================================================================== البطاقات (Cards) ===================================================================== */ .card-ds { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition); } .card-ds:hover { box-shadow: var(--shadow-md); } .card-ds-hover:hover { transform: translateY(-3px); } .card-ds-body { padding: 1.25rem; } .card-ds-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .card-ds-header h2, .card-ds-header h3 { font-size: 1rem; font-weight: 700; margin: 0; } /* شبكة بطاقات متجاوبة تلقائياً */ .grid-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid-cards-sm { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .grid-cards-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* بطاقات إحصائية (Stat cards) لصفحات الرئيسية بكل اللوحات */ .stat-card-ds { position: relative; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1.25rem; display: flex; align-items: center; gap: 1rem; transition: transform var(--transition), box-shadow var(--transition); } .stat-card-ds:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .stat-card-ds .stat-icon { flex-shrink: 0; width: 3.25rem; height: 3.25rem; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); } .stat-card-ds .stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--color-text); } .stat-card-ds .stat-label { font-size: 0.825rem; color: var(--color-text-muted); margin-top: 0.15rem; } .stat-card-ds.tone-success .stat-icon { background: linear-gradient(135deg,#22c55e,#15803d); } .stat-card-ds.tone-warning .stat-icon { background: linear-gradient(135deg,#f59e0b,#b45309); } .stat-card-ds.tone-danger .stat-icon { background: linear-gradient(135deg,#f87171,#b91c1c); } .stat-card-ds.tone-info .stat-icon { background: linear-gradient(135deg,#38bdf8,#0369a1); } .stat-card-ds .stat-trend { font-size: .75rem; font-weight: 700; display:inline-flex; align-items:center; gap:.25rem; } .stat-card-ds .stat-trend.up { color: var(--color-success); } .stat-card-ds .stat-trend.down { color: var(--color-danger); } /* ===================================================================== الشارات (Badges) والأزرار المساعدة ===================================================================== */ .badge-ds { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; white-space: nowrap; } .badge-ds.success { background: var(--color-success-light); color: #166534; } .badge-ds.warning { background: var(--color-warning-light); color: #92400e; } .badge-ds.danger { background: var(--color-danger-light); color: #991b1b; } .badge-ds.info { background: var(--color-info-light); color: #075985; } .badge-ds.neutral { background: #f1f2f6; color: #4b5563; } .btn-ds { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 700; font-size: .875rem; padding: .6rem 1.15rem; border-radius: var(--radius-sm); transition: background var(--transition), box-shadow var(--transition), transform var(--transition); border: 1px solid transparent; cursor: pointer; } .btn-ds:active { transform: scale(0.97); } .btn-ds-primary { background: var(--color-primary); color: #fff; } .btn-ds-primary:hover { background: var(--color-primary-dark); } .btn-ds-outline { background: transparent; border-color: var(--color-border); color: var(--color-text); } .btn-ds-outline:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); } .btn-ds-danger { background: var(--color-danger); color: #fff; } .btn-ds-danger:hover { background: #b91c1c; } .btn-ds-icon { width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 999px; } /* ===================================================================== الجداول المتجاوبة ===================================================================== */ .table-wrap-ds { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); } .table-wrap-ds table { width: 100%; border-collapse: collapse; min-width: 640px; } .table-wrap-ds thead th { background: var(--color-bg); color: var(--color-text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; padding: .85rem 1rem; text-align: start; white-space: nowrap; } .table-wrap-ds tbody td { padding: .85rem 1rem; border-top: 1px solid var(--color-border); font-size: .9rem; vertical-align: middle; } .table-wrap-ds tbody tr { transition: background var(--transition); } .table-wrap-ds tbody tr:hover { background: var(--color-primary-light); } /* بطاقة-جدول للموبايل: تتحول الصفوف إلى بطاقات عبر data-label */ @media (max-width: 640px) { .table-stack-ds thead { display: none; } .table-stack-ds, .table-stack-ds tbody, .table-stack-ds tr, .table-stack-ds td { display: block; width: 100%; } .table-stack-ds tr { border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: .75rem; overflow: hidden; } .table-stack-ds td { display: flex; justify-content: space-between; gap: 1rem; text-align: end; border-top: 1px solid var(--color-border); } .table-stack-ds td:first-child { border-top: none; } .table-stack-ds td::before { content: attr(data-label); font-weight: 700; color: var(--color-text-muted); text-align: start; } } .flash-highlight-bg { background-color: var(--color-primary-light) !important; transition: background-color .3s ease; } .flash-highlight-text { color: var(--color-primary) !important; transition: color .3s ease; } /* ===================================================================== حالات فارغة / تحميل ===================================================================== */ .empty-state-ds { text-align: center; padding: 3rem 1.5rem; color: var(--color-text-muted); } .empty-state-ds i { font-size: 2.75rem; opacity: .35; margin-bottom: 1rem; } .empty-state-ds h3 { color: var(--color-text); font-size: 1.05rem; font-weight: 700; margin-bottom: .35rem; } .skeleton-ds { background: linear-gradient(90deg, #eef0f4 25%, #f7f8fa 37%, #eef0f4 63%); background-size: 400% 100%; animation: skeleton-ds-loading 1.4s ease infinite; border-radius: var(--radius-sm); } @keyframes skeleton-ds-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* دائرة تحميل عامة */ .spinner-ds { width: 1.35rem; height: 1.35rem; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin-ds .7s linear infinite; } @keyframes spin-ds { to { transform: rotate(360deg); } } /* ===================================================================== طبقة تنقّل (Sidebar / Topbar / Bottom nav) — تُستخدم من قِبل كل الشرائح ===================================================================== */ .app-topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); background: var(--color-surface); border-bottom: 1px solid var(--color-border); backdrop-filter: saturate(180%) blur(6px); } /* ضمانة صلبة لظهور الشريط العلوي (سطح المكتب) والشريط السفلي (الموبايل) بغضّ النظر عن نجاح توليد كلاسات Tailwind الديناميكية (hidden/xl:block) — نفس فئة المشكلة التي عولجت سابقاً في الشريط الجانبي لبعض اللوحات. */ @media (max-width: 1279.98px) { .app-topbar { display: none !important; } } @media (min-width: 1280px) { .app-topbar { display: block !important; } .app-bottomnav { display: none !important; } } .app-sidebar { position: fixed; inset-inline-start: 0; top: 0; bottom: 0; width: var(--sidebar-w); background: var(--color-surface); border-inline-end: 1px solid var(--color-border); z-index: 45; display: flex; flex-direction: column; transition: transform var(--transition); /* مخفية افتراضياً على الجوال — هذا مضمون 100% ولا يعتمد على أي كلاسات Tailwind ديناميكية قد تفشل بصمت حسب طريقة تحميل CDN. */ transform: translateX(-100%); } html[dir="rtl"] .app-sidebar { transform: translateX(100%); } .app-sidebar.is-open { transform: translateX(0) !important; } @media (min-width: 1280px) { .app-sidebar { transform: translateX(0) !important; } } /* ضمانة إضافية للوحة السوبر أدمن (لها بنية مختلفة عن باقي اللوحات) — تجبر الحالة الصحيحة بغض النظر عن نجاح توليد كلاسات Tailwind الديناميكية. ملاحظة: قاعدة "إخفاء الجوال" ADDS .translate-x-full لنفس تحديد [data-admin-sidebar] الخاص بقاعدة "إظهار سطح المكتب" أدناه، حتى تتساوى خصوصية (specificity) القاعدتين وتفوز الأحدث بترتيب الظهور بدلاً من أن تفوز الأكثر تحديداً دائماً (وهو ما كان يُبقي الشريط الجانبي مخفياً حتى على الشاشات الكبيرة). */ @media (max-width: 1279.98px) { [data-admin-sidebar].translate-x-full { transform: translateX(100%) !important; } } @media (min-width: 1280px) { [data-admin-sidebar], [data-admin-sidebar].translate-x-full { transform: translateX(0) !important; } } .app-sidebar-link { display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; border-radius: var(--radius-sm); color: var(--color-text-muted); font-weight: 600; font-size: .9rem; transition: background var(--transition), color var(--transition); } .app-sidebar-link i { width: 1.25rem; text-align: center; color: inherit; } .app-sidebar-link:hover { background: var(--color-primary-light); color: var(--color-primary); } .app-sidebar-link.active { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); } .app-sidebar-section-title { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: 800; padding: 0 .9rem; margin: 1.1rem 0 .4rem; } .app-bottomnav { position: fixed; bottom: 0; inset-inline: 0; z-index: 50; height: var(--bottomnav-h); background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -6px 20px rgba(17,24,39,.06); } .app-bottomnav-scroll { display: flex; align-items: stretch; height: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .app-bottomnav-scroll::-webkit-scrollbar { display: none; } .app-bottomnav-item { flex: 0 0 auto; min-width: 4.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; font-size: .65rem; font-weight: 700; color: var(--color-text-muted); padding: .35rem .5rem; position: relative; transition: color var(--transition), transform var(--transition); } .app-bottomnav-item i { font-size: 1.1rem; } .app-bottomnav-item.active { color: var(--color-primary); } .app-bottomnav-item:active { transform: scale(.93); } .notif-dot-ds { position: absolute; top: -2px; inset-inline-end: -6px; min-width: 16px; height: 16px; background: var(--color-danger); color: #fff; font-size: .6rem; font-weight: 800; border-radius: 999px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--color-surface); padding: 0 3px; } /* طبقة تعتيم عند فتح القائمة الجانبية على الموبايل */ .app-backdrop { position: fixed; inset: 0; background: rgba(15, 18, 28, .45); z-index: 44; backdrop-filter: blur(1px); } /* زر العودة للأعلى */ .back-to-top-ds { position: fixed; bottom: calc(var(--bottomnav-h) + 1rem); inset-inline-end: 1.25rem; z-index: 49; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity var(--transition), transform var(--transition); } .back-to-top-ds.show { opacity: 1; pointer-events: auto; transform: translateY(0); } @media (min-width: 1280px) { .back-to-top-ds { bottom: 1.5rem; } } /* طباعة */ @media print { .no-print, .app-bottomnav, .app-sidebar, .app-topbar, .back-to-top-ds { display: none !important; } .app-main-with-sidebar { padding-inline-start: 0 !important; } } /* ===================================================================== واجهة لوحة السوبر أدمن (v2) — شريط جانبي مضغوط بالأيقونات + بطاقات زجاجية (Glassmorphism). محصورة عمداً تحت body.admin-glass حتى لا تؤثر على بقية اللوحات (طالب/مدرب/نادي/استقبال/دعم) التي تستخدم نفس أسماء الكلاسات (.card-ds ...) بمظهرها الأصلي. الألوان والخطوط كما هي — فقط التركيبة (composition) والبطاقات والشريط الجانبي تتغيّر. ===================================================================== */ :root { --admin-sidebar-w: 4.75rem; } body.admin-glass { position: relative; isolation: isolate; } /* خلفية متدرّجة هادئة خلف كل شيء حتى يكون لتأثير البلور (blur) ما "يبرز" من خلاله */ body.admin-glass::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--color-primary) 16%, transparent) 0%, transparent 45%), radial-gradient(circle at 92% 15%, color-mix(in srgb, var(--color-accent) 14%, transparent) 0%, transparent 40%), radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--color-success) 10%, transparent) 0%, transparent 50%), var(--color-bg); } body.admin-glass .card-ds, body.admin-glass .stat-card-ds { background: color-mix(in srgb, var(--color-surface) 62%, transparent); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid color-mix(in srgb, var(--color-surface) 40%, var(--color-border)); box-shadow: var(--shadow-md); } body.admin-glass .card-ds:hover, body.admin-glass .stat-card-ds:hover { box-shadow: var(--shadow-lg); } body.admin-glass .card-ds-header { border-bottom-color: color-mix(in srgb, var(--color-surface) 40%, var(--color-border)); } body.admin-glass .stat-card-ds .stat-icon { box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--color-primary) 55%, transparent); } body.admin-glass .table-wrap-ds { background: color-mix(in srgb, var(--color-surface) 70%, transparent); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border-color: color-mix(in srgb, var(--color-surface) 40%, var(--color-border)); } body.admin-glass .table-wrap-ds thead th { background: color-mix(in srgb, var(--color-bg) 65%, transparent); } /* --- الشريط الجانبي المضغوط (أيقونات فقط + تلميحات عند hover) --- */ .app-sidebar-compact { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--admin-sidebar-w); z-index: 45; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding-block: 1rem; background: color-mix(in srgb, var(--color-surface) 55%, transparent); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-inline-end: 1px solid color-mix(in srgb, var(--color-surface) 40%, var(--color-border)); } .app-main-compact-sidebar { padding-inline-start: var(--admin-sidebar-w); min-height: 100vh; } .compact-logo { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); object-fit: contain; margin-bottom: .5rem; } .compact-nav-item { position: relative; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: 1.1rem; transition: background var(--transition), color var(--transition), transform var(--transition); } .compact-nav-item:hover { background: var(--color-primary-light); color: var(--color-primary); transform: translateY(-1px); } .compact-nav-item.active { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); } /* تلميح (tooltip) بالاسم يظهر جانب الأيقونة عند hover */ .compact-nav-item .tip { position: absolute; inset-inline-start: calc(100% + .6rem); top: 50%; transform: translateY(-50%) translateX(-6px); background: var(--color-text); color: var(--color-surface); font-size: .78rem; font-weight: 700; white-space: nowrap; padding: .35rem .65rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity var(--transition), transform var(--transition); z-index: 60; } html[dir="rtl"] .compact-nav-item .tip { inset-inline-start: auto; inset-inline-end: calc(100% + .6rem); } .compact-nav-item:hover .tip { opacity: 1; transform: translateY(-50%) translateX(0); } .compact-sidebar-sep { width: 1.75rem; height: 1px; background: color-mix(in srgb, var(--color-surface) 30%, var(--color-border)); margin-block: .35rem; } .compact-sidebar-spacer { flex: 1; } .compact-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); } @media print { .app-sidebar-compact { display: none !important; } .app-main-compact-sidebar { padding-inline-start: 0 !important; } } /* ===================================================================== مكوّن تقييم بالنجوم (CSS-only) — يُستخدم عبر أي form يحتوي على
مع أزرار راديو مرتبة تنازلياً (5..1) يتبعها label لكل واحد، بنمط: ... ===================================================================== */ .star-rating { display: inline-flex; flex-direction: row-reverse; gap: .15rem; font-size: 1.75rem; } .star-rating input { position: absolute; opacity: 0; width: 0; height: 0; } .star-rating label { cursor: pointer; color: #d1d5db; transition: color var(--transition), transform var(--transition); line-height: 1; } .star-rating label:hover, .star-rating label:hover ~ label { color: var(--color-warning); transform: scale(1.1); } .star-rating input:checked ~ label { color: var(--color-warning); } /* --- الخط الزمني للنشاطات الأخيرة --- */ .activity-timeline { position: relative; list-style: none; margin: 0; padding: 0; } .activity-timeline::before { content: ''; position: absolute; inset-inline-start: 1.35rem; top: .5rem; bottom: .5rem; width: 2px; background: linear-gradient(to bottom, var(--color-border), transparent); } .activity-timeline-item { position: relative; display: flex; gap: 1rem; padding-block: .85rem; } .activity-timeline-item:not(:last-child) { border-bottom: 1px dashed var(--color-border); } .activity-timeline-dot { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff; z-index: 1; box-shadow: var(--shadow-sm); background: linear-gradient(135deg, var(--color-text-muted), var(--color-text)); } .activity-timeline-dot.tone-info { background: linear-gradient(135deg, #38bdf8, #0369a1); } .activity-timeline-dot.tone-success { background: linear-gradient(135deg, #22c55e, #15803d); } .activity-timeline-dot.tone-primary { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); } .activity-timeline-dot.tone-neutral { background: linear-gradient(135deg, #9ca3af, #6b7280); } .activity-timeline-content { flex: 1; min-width: 0; padding-top: .3rem; }