/* ===================================================================== Resalaty LMS — Design System v2 نظام تصميم موحّد: رموز، مكوّنات، حركات. RTL أصلاً. الاستخدام: داخل السمة: الوضع: ملاحظة: الوضع الليلي واللون سمتان مستقلتان — يمكن اختيار "بنفسجي + ليلي" معاً، وهو ما لم يكن ممكناً في النسخة الأولى. ===================================================================== */ /* ===================== 1. الرموز (Design Tokens) ===================== */ :root { /* --- سلّم محايد بارد يشتق منه كل شيء (فاتح وعصري) --- */ --n-0: #ffffff; --n-25: #fbfcfe; --n-50: #f4f6fb; --n-100: #eef1f8; --n-200: #e4e8f2; --n-300: #cfd6e6; --n-400: #9aa3bd; --n-500: #6b7590; --n-600: #4c5670; --n-700: #353d54; --n-800: #232a3d; --n-900: #161c2d; --n-950: #0b0f1a; /* --- الأسطح --- */ --bg-body: var(--n-50); --bg-canvas: var(--n-100); --bg-card: var(--n-0); --bg-raised: var(--n-0); --bg-sunken: var(--n-100); --bg-hover: var(--n-100); --bg-glass: rgba(255, 255, 255, 0.72); /* --- النص --- */ --text-main: var(--n-900); --text-body: var(--n-700); --text-muted: var(--n-500); --text-faint: var(--n-400); --text-on-accent: #ffffff; /* --- الحدود --- */ --border-color: var(--n-200); --border-strong: var(--n-300); --border-subtle: var(--n-100); /* --- كروم الهيكل: يُستخدم للّافتات الداكنة عند الحاجة --- */ --chrome-950: #1a1d29; --chrome-900: #21263a; --chrome-800: #2a3050; --chrome-700: #343b63; --chrome-600: #454d80; --chrome-line: rgba(255,255,255,.08); --chrome-text: #c3cbdd; --chrome-muted: #8b95af; /* --- اللون الأساسي: إنديغو عصري افتراضياً (يُعاد كتابته بالسمات) --- */ --accent-primary: #5b5fef; --accent-secondary: #7c7ff5; --accent-soft: rgba(91, 95, 239, 0.10); --accent-glow: rgba(91, 95, 239, 0.30); /* --- تلوينات باستيل لبطاقات الإحصاء (كالمراجع العصرية) --- */ --tint-rose: #f6607d; --tint-rose-bg: rgba(246,96,125,.12); --tint-amber: #f5a524; --tint-amber-bg: rgba(245,165,36,.14); --tint-green: #17c07f; --tint-green-bg: rgba(23,192,127,.13); --tint-violet: #8b5cf6; --tint-violet-bg: rgba(139,92,246,.13); --tint-blue: #4a8cff; --tint-blue-bg: rgba(74,140,255,.13); --tint-cyan: #17c0d4; --tint-cyan-bg: rgba(23,192,212,.13); /* --- ألوان دلالية ثابتة عبر كل السمات --- */ --accent-success: #0d9f6e; --accent-warning: #e08a00; --accent-danger: #e0435b; --accent-info: #0d8ecf; --success-soft: rgba(13, 159, 110, 0.12); --warning-soft: rgba(224, 138, 0, 0.12); --danger-soft: rgba(224, 67, 91, 0.12); --info-soft: rgba(13, 142, 207, 0.12); /* --- الظلال: طبقات ناعمة بدل ظل واحد قاسٍ --- */ --shadow-xs: 0 1px 2px rgba(21, 26, 40, 0.04); --shadow-sm: 0 1px 3px rgba(21, 26, 40, 0.06), 0 1px 2px rgba(21, 26, 40, 0.04); --shadow-md: 0 4px 12px rgba(21, 26, 40, 0.07), 0 2px 4px rgba(21, 26, 40, 0.04); --shadow-lg: 0 12px 28px rgba(21, 26, 40, 0.09), 0 4px 10px rgba(21, 26, 40, 0.05); --shadow-xl: 0 24px 56px rgba(21, 26, 40, 0.12), 0 8px 20px rgba(21, 26, 40, 0.06); --shadow-accent: 0 8px 24px var(--accent-glow); --ring: 0 0 0 3px var(--accent-soft); /* --- الأبعاد --- */ --radius-xs: 6px; --radius-sm: 9px; --radius-md: 13px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 22px; --space-6: 30px; --space-7: 40px; --space-8: 56px; /* --- سلّم الخط --- */ --font-ar: 'Tajawal', 'Segoe UI', system-ui, sans-serif; --font-num: 'Tajawal', ui-monospace, 'SF Mono', monospace; --fs-xs: 0.76rem; --fs-sm: 0.86rem; --fs-base: 0.95rem; --fs-md: 1.05rem; --fs-lg: 1.22rem; --fs-xl: 1.5rem; --fs-2xl: 1.9rem; --fs-3xl: 2.4rem; /* --- الحركة --- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; --transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); --z-nav: 1000; --z-dropdown: 1200; --z-overlay: 1400; --z-lms-modal: 1500; --z-lms-toast: 1700; color-scheme: light; } /* ===================== 2. الوضع الليلي ===================== */ /* أسطح ليلية دافئة قليلاً بدل الأسود الميت — أريح للعين في جلسات طويلة */ [data-mode="dark"] { --bg-body: #0d1220; --bg-canvas: #0a0e1a; --bg-card: #161d2f; --bg-raised: #1d2539; --bg-sunken: #101625; --bg-hover: #212a40; --bg-glass: rgba(22, 29, 47, 0.78); --text-main: #eef2f9; --text-body: #c6cee0; --text-muted: #8892a8; --text-faint: #667088; --border-color: #29334a; --border-strong: #384360; --border-subtle: #1e2638; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.38), 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.42), 0 2px 5px rgba(0, 0, 0, 0.28); --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.50), 0 5px 12px rgba(0, 0, 0, 0.32); --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.58), 0 10px 24px rgba(0, 0, 0, 0.38); /* ألوان دلالية أفتح قليلاً لتبقى مقروءة على خلفية داكنة */ --accent-success: #2ecc94; --accent-warning: #f0a935; --accent-danger: #f4677d; --accent-info: #35aae6; color-scheme: dark; } /* ===================== 3. السمات اللونية ===================== */ /* كل سمة تغيّر زوج اللون فقط — الأسطح والنص تبقى كما هي */ /* السمة الافتراضية: إنديغو عصري — هوية النظام الأساسية */ [data-theme="indigo"], [data-theme="royal"] { --accent-primary:#5b5fef; --accent-secondary:#7c7ff5; --accent-soft:rgba(91,95,239,.10); --accent-glow:rgba(91,95,239,.30); } [data-theme="gold"] { --accent-primary:#c9a24b; --accent-secondary:#e0c583; --accent-soft:rgba(201,162,75,.13); --accent-glow:rgba(201,162,75,.30); } [data-theme="blue"] { --accent-primary:#3b6ef5; --accent-secondary:#7c5cf0; --accent-soft:rgba(59,110,245,.10); --accent-glow:rgba(59,110,245,.35); } [data-theme="green"] { --accent-primary:#0d9f6e; --accent-secondary:#16b8a6; --accent-soft:rgba(13,159,110,.11); --accent-glow:rgba(13,159,110,.32); } [data-theme="purple"] { --accent-primary:#7c5cf0; --accent-secondary:#a855f7; --accent-soft:rgba(124,92,240,.11); --accent-glow:rgba(124,92,240,.34); } [data-theme="rose"] { --accent-primary:#e0435b; --accent-secondary:#ec4899; --accent-soft:rgba(224,67,91,.11); --accent-glow:rgba(224,67,91,.32); } [data-theme="orange"] { --accent-primary:#ea7317; --accent-secondary:#e0a800; --accent-soft:rgba(234,115,23,.11); --accent-glow:rgba(234,115,23,.32); } [data-theme="teal"] { --accent-primary:#0e9fb5; --accent-secondary:#0d8ecf; --accent-soft:rgba(14,159,181,.11); --accent-glow:rgba(14,159,181,.32); } /* في الوضع الليلي ترفع الألوان قليلاً لتحافظ على التباين */ [data-mode="dark"][data-theme="indigo"], [data-mode="dark"][data-theme="royal"] { --accent-primary:#7d81ff; --accent-secondary:#9a9dff; } [data-mode="dark"][data-theme="gold"] { --accent-primary:#d9b463; --accent-secondary:#ecd39a; } [data-mode="dark"][data-theme="blue"] { --accent-primary:#5b87ff; --accent-secondary:#9678ff; } [data-mode="dark"][data-theme="green"] { --accent-primary:#22b782; --accent-secondary:#2dd4bf; } [data-mode="dark"][data-theme="purple"] { --accent-primary:#9678ff; --accent-secondary:#c084fc; } [data-mode="dark"][data-theme="rose"] { --accent-primary:#f4677d; --accent-secondary:#f472b6; } [data-mode="dark"][data-theme="orange"] { --accent-primary:#fb8c2b; --accent-secondary:#f0b429; } [data-mode="dark"][data-theme="teal"] { --accent-primary:#22b8cf; --accent-secondary:#35aae6; } /* ── لون السمة حين يكون نصّاً فوق سطح فاتح ────────────────── لون السمة مصمَّم ليكون خلفيةً، وبعض السمات فاتحة فلا يُقرأ نصّاً على أبيض: الذهبي 2.4:1 والبرتقالي 3.0:1 والأخضر 3.4:1 والتركوازي 3.2:1 — دون حدّ الوصولية 4.5:1. لذلك كل نصّ/أيقونة بلون السمة يستعمل ‎--accent-ink‎: نفس اللون مغمَّقاً إلى أن يبلغ 4.5:1 على الأبيض، وبالسمة نفسها. في الوضع الليلي الألوان مرفوعة أصلاً (5:1 فما فوق) فيعود إلى لون السمة. */ :root { --accent-ink: var(--accent-primary); } [data-theme="gold"] { --accent-ink: #8e7335; } [data-theme="orange"] { --accent-ink: #bb5b12; } [data-theme="green"] { --accent-ink: #0b875d; } [data-theme="teal"] { --accent-ink: #0b8294; } [data-theme="rose"] { --accent-ink: #d43f56; } [data-theme="blue"] { --accent-ink: #3a6cf2; } [data-mode="dark"] { --accent-ink: var(--accent-primary); } /* تباين النصّ فوق البراند: السمتان الذهبية والبرتقالية فاتحتان، فالنصّ الأبيض عليهما يفشل — نجعل النصّ داكناً (يسري على كل أزرار/شارات الموقع في هاتين السمتين). */ [data-theme="gold"], [data-mode="dark"][data-theme="gold"], [data-theme="orange"], [data-mode="dark"][data-theme="orange"] { --text-on-accent: #2a2000; } /* ===================== 4. الأساس ===================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-ar); font-size: var(--fs-base); line-height: 1.65; color: var(--text-body); background-color: var(--bg-body); background-image: radial-gradient(1100px 520px at 88% -12%, var(--accent-soft), transparent 62%), radial-gradient(820px 420px at 6% 4%, var(--accent-soft), transparent 58%); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out); } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3); color: var(--text-main); font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } h5 { font-size: var(--fs-md); } h6 { font-size: var(--fs-base); } p { margin: 0 0 var(--space-3); } a { color: var(--accent-ink); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--accent-secondary); } /* أرقام مصطفّة عمودياً في الجداول المالية — فرق كبير في القراءة */ .num, td.num, .stat-value, .amount { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } hr { border: none; border-top: 1px solid var(--border-color); margin: var(--space-5) 0; } ::selection { background: var(--accent-soft); color: var(--accent-ink); } /* --- شريط التمرير --- */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; } /* --- التركيز: مرئي دائماً بلوحة المفاتيح، مخفي بالفأرة --- */ :focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: var(--radius-xs); } :focus:not(:focus-visible) { outline: none; } /* رابط "تخطَّ إلى المحتوى" لمستخدمي لوحة المفاتيح وقارئات الشاشة */ .skip-link { position: absolute; top: -60px; right: var(--space-4); z-index: calc(var(--z-lms-toast) + 1); background: var(--accent-primary); color: #fff; padding: var(--space-3) var(--space-5); border-radius: 0 0 var(--radius-md) var(--radius-md); font-weight: 700; box-shadow: var(--shadow-lg); transition: top var(--dur-base) var(--ease-spring); } .skip-link:focus { top: 0; color: #fff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ===================== 5. التخطيط ===================== */ .app-shell { display: flex; flex-direction: column; min-height: 100vh; } .main-content, .page-wrap { flex: 1; width: 100%; max-width: 1560px; margin-inline: auto; padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .row-end { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; } .spacer { flex: 1; } .grid { display: grid; gap: var(--space-4); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* ===================== 6. البطاقات والأسطح ===================== */ .card, .panel, .box, .widget, .content-box, .data-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: var(--transition); } .card { padding: var(--space-5); } .card-hover:hover, .card.is-interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); } .card-header { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); font-weight: 800; font-size: var(--fs-md); color: var(--text-main); } .card-header i { color: var(--accent-ink); font-size: 1.15em; } .glass { background: var(--bg-glass); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); border: 1px solid var(--border-color); } /* --- ترويسة الصفحة --- */ .page-header, .section-header { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px solid var(--border-subtle); font-size: var(--fs-lg); font-weight: 800; color: var(--text-main); position: relative; } /* خط لوني قصير أسفل الترويسة — لمسة هوية بسيطة */ .page-header::after, .section-header::after { content: ''; position: absolute; bottom: -2px; right: 0; width: 56px; height: 2px; border-radius: 2px; background: linear-gradient(to left, var(--accent-primary), var(--accent-secondary)); } .page-header i, .section-header i { color: var(--accent-ink); font-size: 1.1em; } /* --- لافتة الترحيب --- */ .welcome-banner, .hero-banner { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-5); padding: var(--space-7) var(--space-6); border-radius: var(--radius-xl); color: #fff; background: linear-gradient(125deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); box-shadow: var(--shadow-lg), var(--shadow-accent); } /* توهّجان يتحرّكان ببطء خلف اللافتة — عمق بلا صور */ .welcome-banner::before, .hero-banner::before { content: ''; position: absolute; inset: -50%; background: radial-gradient(circle at 22% 28%, rgba(255,255,255,.22), transparent 42%), radial-gradient(circle at 78% 72%, rgba(255,255,255,.14), transparent 46%); animation: hero-drift 22s var(--ease-in-out) infinite alternate; pointer-events: none; } .welcome-banner > *, .hero-banner > * { position: relative; z-index: 1; } .welcome-banner h1, .welcome-banner h2, .welcome-banner h3, .hero-banner h1, .hero-banner h2, .hero-banner h3 { color: #fff; } @keyframes hero-drift { from { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); } to { transform: translate3d( 4%, 3%, 0) rotate(7deg) scale(1.12); } } /* ===================== 7. بطاقات التنقّل ===================== */ .nav-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--space-4); } .nav-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 152px; padding: var(--space-5) var(--space-3); text-align: center; text-decoration: none; color: var(--text-main); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); cursor: pointer; transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } /* حجاب لوني يظهر من الأسفل عند المرور */ .nav-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, var(--accent-primary), var(--accent-secondary)); opacity: 0; transform: translateY(100%); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .nav-card > * { position: relative; z-index: 1; transition: color var(--dur-base) var(--ease-out); } .nav-card i { font-size: 2.15rem; background: linear-gradient(150deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: transform var(--dur-base) var(--ease-spring); } .nav-card span { font-size: var(--fs-sm); font-weight: 700; color: var(--text-body); } .nav-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg), var(--shadow-accent); border-color: transparent; } .nav-card:hover::before { opacity: 1; transform: translateY(0); } .nav-card:hover i { -webkit-text-fill-color: #fff; background: none; transform: scale(1.14) translateY(-2px); } .nav-card:hover span { color: #fff; } .nav-card:active { transform: translateY(-2px); } /* ===================== 8. بطاقات الإحصاء ===================== */ .stat-card, .stat-item { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: var(--transition); } /* شريط لوني على حافة البدء (يمين في RTL) */ .stat-card::before, .stat-item::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: linear-gradient(to bottom, var(--accent-primary), var(--accent-secondary)); } .stat-card:hover, .stat-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .stat-card .value, .stat-item .value, .stat-value { font-size: var(--fs-2xl); font-weight: 800; color: var(--text-main); line-height: 1.15; font-variant-numeric: tabular-nums; } .stat-card .label, .stat-item .label, .stat-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); } .stat-card .stat-icon { position: absolute; inset-block-start: var(--space-4); inset-inline-end: var(--space-4); font-size: 1.7rem; color: var(--accent-ink); opacity: .16; } .stat-trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; } .stat-trend.up { color: var(--accent-success); } .stat-trend.down { color: var(--accent-danger); } /* ===================== 9. الأزرار ===================== */ .btn, button.btn, .button, input[type="submit"], input[type="button"], input[type="reset"] { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 11px 20px; font-family: var(--font-ar); font-size: var(--fs-base); font-weight: 700; line-height: 1.2; color: var(--text-on-accent); background: var(--accent-primary); border: 1px solid transparent; border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), filter var(--dur-fast) var(--ease-out); } /* لمعة تعبر الزر عند المرور */ .btn::after, .button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-130%); transition: transform var(--dur-slow) var(--ease-out); pointer-events: none; } .btn:hover::after, .button:hover::after { transform: translateX(130%); } .btn:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), var(--shadow-accent); filter: saturate(1.08); } .btn:active, .button:active { transform: translateY(0); box-shadow: var(--shadow-xs); } .btn:disabled, .btn.is-disabled, .button:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: var(--shadow-xs) !important; filter: grayscale(.35); } .btn:disabled::after { display: none; } /* المحدد المركّب .btn.btn-* يرفع التخصيص إلى (0,2,0) كي تتغلب أصناف الألوان على button.btn وinput[type=submit] (0,1,1) في القاعدة الأساسية أعلاه. */ .btn-primary, .btn.btn-primary { background: var(--accent-primary); } .btn-secondary, .btn.btn-secondary { background: var(--accent-secondary); } .btn-success, .btn-green, .btn.btn-success, .btn.btn-green { background: var(--accent-success); --accent-glow: rgba(13,159,110,.32); } .btn-warning, .btn.btn-warning { background: var(--accent-warning); --accent-glow: rgba(224,138,0,.32); } .btn-danger, .btn-delete, .btn-red, .btn.btn-danger, .btn.btn-delete, .btn.btn-red { background: var(--accent-danger); --accent-glow: rgba(224,67,91,.32); } .btn-info, .btn.btn-info { background: var(--accent-info); } .btn-gradient, .btn.btn-gradient { background: linear-gradient(125deg, var(--accent-primary), var(--accent-secondary)); } .btn-outline, .btn.btn-outline { background: transparent; color: var(--accent-ink); border-color: var(--accent-primary); box-shadow: none; } .btn-outline:hover, .btn.btn-outline:hover { background: var(--accent-soft); } .btn-ghost, .btn.btn-ghost { background: transparent; color: var(--text-body); border-color: transparent; box-shadow: none; } .btn-ghost:hover, .btn.btn-ghost:hover { background: var(--bg-hover); color: var(--text-main); box-shadow: none; } .btn-sm { padding: 7px 14px; font-size: var(--fs-sm); border-radius: var(--radius-xs); } .btn-lg { padding: 15px 30px; font-size: var(--fs-md); border-radius: var(--radius-md); } .btn-icon { padding: 0; width: 40px; height: 40px; border-radius: var(--radius-sm); } .btn-block { display: flex; width: 100%; } /* حالة الانتظار: يستبدل النص بدوّارة */ .btn.is-loading { color: transparent !important; pointer-events: none; } .btn.is-loading::before { content: ''; position: absolute; top: 50%; left: 50%; width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; z-index: 2; } @keyframes spin { to { transform: rotate(360deg); } } /* ===================== 10. النماذج ===================== */ label { display: inline-block; margin-bottom: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-main); } input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea, .form-control { width: 100%; padding: 11px 14px; font-family: var(--font-ar); font-size: var(--fs-base); color: var(--text-main); /* background-color (لا الاختصار background) كي لا تُصفَّر خصائص سهم select المعرفة لاحقاً (image/repeat/position) عند وجود صنف form-control على select */ background-color: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: var(--radius-sm); outline: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--border-strong); } input:focus, select:focus, textarea:focus, .form-control:focus { border-color: var(--accent-primary); box-shadow: var(--ring); background-color: var(--bg-card); } input::placeholder, textarea::placeholder { color: var(--text-faint); } input:disabled, select:disabled, textarea:disabled { background-color: var(--bg-sunken); color: var(--text-muted); cursor: not-allowed; } textarea { min-height: 108px; resize: vertical; line-height: 1.65; } select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7690'%3E%3Cpath d='M4.2 6.3a1 1 0 0 1 1.4 0L8 8.7l2.4-2.4a1 1 0 1 1 1.4 1.4l-3.1 3.1a1 1 0 0 1-1.4 0L4.2 7.7a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 13px center; background-size: 17px; } /* عناصر القائمة المنسدلة يرسمها النظام لا الصفحة، فلا ترث لون النص من select. بلا تصريح صريح تخرج بألوان النظام: نص فاتح على خلفية فاتحة في الوضع الليلي (أو العكس) في بعض السمات والمنصّات. نُثبّتها على رموز السطح والنص. */ option, optgroup { background-color: var(--bg-card); color: var(--text-main); font-family: var(--font-ar); } option:disabled { color: var(--text-faint); } option:checked { font-weight: 700; } [data-mode="dark"] select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238892a8'%3E%3Cpath d='M4.2 6.3a1 1 0 0 1 1.4 0L8 8.7l2.4-2.4a1 1 0 1 1 1.4 1.4l-3.1 3.1a1 1 0 0 1-1.4 0L4.2 7.7a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E"); } /* ── حقول التاريخ والوقت على واجهة نظام عربية ──────────────── كروم يرسم داخل الحقل نصّاً من عنده بلغة واجهة النظام. على ويندوز بواجهة عربية يخرج النصّ النائب معكوس الحروف (ةنس/موي/رهش) — علّة في المتصفح لا تُصلحها direction ولا unicode-bidi على الحقل (جُرّبت). العلاج: نُثبّت اتجاه الأجزاء الداخلية LTR فيستقيم ترتيب يوم/شهر/سنة، ثم نُخفي النصّ النائب المعطوب ما دام الحقل فارغاً غير مركَّز ونضع مكانه نائباً من عندنا يبنيه app.js بترتيب لغة الجهاز نفسها (‎--lms-date-ph‎). */ input[type="date"]::-webkit-datetime-edit, input[type="time"]::-webkit-datetime-edit, input[type="datetime-local"]::-webkit-datetime-edit, input[type="month"]::-webkit-datetime-edit, input[type="week"]::-webkit-datetime-edit, input[type="date"]::-webkit-datetime-edit-fields-wrapper, input[type="time"]::-webkit-datetime-edit-fields-wrapper, input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper, input[type="month"]::-webkit-datetime-edit-fields-wrapper, input[type="week"]::-webkit-datetime-edit-fields-wrapper { direction: ltr; unicode-bidi: normal; /* الأجزاء LTR داخل صندوق يملأ عرض الحقل — نُعيدها إلى بداية السطر كي تحاذي بقية الحقول ولا تقفز القيمة إلى الطرف المقابل للنائب */ text-align: right; } [dir="ltr"] input[type="date"]::-webkit-datetime-edit, [dir="ltr"] input[type="time"]::-webkit-datetime-edit, [dir="ltr"] input[type="datetime-local"]::-webkit-datetime-edit, [dir="ltr"] input[type="month"]::-webkit-datetime-edit, [dir="ltr"] input[type="week"]::-webkit-datetime-edit { text-align: left; } /* الحقل نفسه يبقى محاذياً لبداية السطر (يمين في RTL) كبقية الحقول */ input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"] { text-align: start; } .lms-date-empty:not(:focus)::-webkit-datetime-edit { color: transparent; } .lms-date-empty:not(:focus) { background-image: var(--lms-date-ph, none); background-repeat: no-repeat; background-position: right 14px center; background-size: auto 1em; } [dir="ltr"] .lms-date-empty:not(:focus) { background-position: left 14px center; } /* عند التركيز يعود نصّ المتصفح كي يرى المستخدم ما يكتبه قبل اكتمال التاريخ */ input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent-primary); cursor: pointer; vertical-align: middle; } input[type="file"] { padding: var(--space-3); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-sunken); color: var(--text-muted); width: 100%; transition: var(--transition); } input[type="file"]:hover { border-color: var(--accent-primary); background: var(--accent-soft); } .form-group { margin-bottom: var(--space-4); } .form-hint { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 5px; } .form-error { font-size: var(--fs-xs); color: var(--accent-danger); margin-top: 5px; font-weight: 600; } .is-invalid, input.error { border-color: var(--accent-danger) !important; } .is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-soft) !important; } /* حقل بحث بأيقونة */ .search-box { position: relative; display: flex; align-items: center; background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: var(--radius-pill); overflow: hidden; transition: var(--transition); } .search-box:focus-within { border-color: var(--accent-primary); box-shadow: var(--ring); } .search-box input { flex: 1; border: none !important; background: transparent !important; box-shadow: none !important; padding: 10px 18px; } .search-box i { padding-inline: 14px; color: var(--text-faint); } /* ===================== 11. الجداول ===================== */ /* غلاف التمرير — يُضاف تلقائياً بـ app.js لكل جدول عريض */ .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); background: var(--bg-card); } .table-scroll > table { border: none; box-shadow: none; border-radius: 0; } table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; font-size: var(--fs-sm); } thead th, table th { position: sticky; top: 0; z-index: 2; padding: 14px 16px; text-align: right; font-size: var(--fs-sm); font-weight: 800; color: var(--text-on-accent); background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); white-space: nowrap; border: none; } thead th:first-child { border-start-end-radius: var(--radius-lg); } thead th:last-child { border-start-start-radius: var(--radius-lg); } tbody td, table td { padding: 13px 16px; color: var(--text-body); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; } tbody tr { transition: background-color var(--dur-fast) var(--ease-out); } tbody tr:nth-child(even) { background: var(--bg-sunken); } tbody tr:hover { background: var(--accent-soft); } tbody tr:last-child td { border-bottom: none; } tfoot td { padding: 14px 16px; font-weight: 800; color: var(--text-main); background: var(--bg-sunken); border-top: 2px solid var(--border-color); } .table-compact td, .table-compact th { padding: 8px 12px; font-size: var(--fs-xs); } /* حالة "لا توجد بيانات" */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8) var(--space-5); text-align: center; color: var(--text-muted); } .empty-state i { font-size: 3.2rem; opacity: .3; color: var(--accent-ink); } .empty-state h4 { color: var(--text-body); margin: 0; } .empty-state p { margin: 0; font-size: var(--fs-sm); } /* ===================== 12. الشارات والوسوم ===================== */ .badge, .tag, .chip, .status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; font-size: var(--fs-xs); font-weight: 700; line-height: 1.7; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap; } .badge-success, .status-active, .status-paid { background: var(--success-soft); color: var(--accent-success); } .badge-warning, .status-pending { background: var(--warning-soft); color: var(--accent-warning); } .badge-danger, .status-inactive, .status-unpaid { background: var(--danger-soft); color: var(--accent-danger); } .badge-info { background: var(--info-soft); color: var(--accent-info); } .badge-neutral { background: var(--bg-sunken); color: var(--text-muted); } /* نقطة نبض للحالة الحيّة */ .badge-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse-dot 1.8s var(--ease-in-out) infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } } /* ===================== 13. التنبيهات ===================== */ .alert { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--border-color); border-inline-start: 4px solid var(--accent-primary); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-body); box-shadow: var(--shadow-xs); font-size: var(--fs-sm); font-weight: 600; } .alert i { font-size: 1.2em; margin-top: 2px; } .alert-success, .alert-ok { background: var(--success-soft); border-color: var(--accent-success); color: var(--accent-success); } .alert-danger, .alert-error { background: var(--danger-soft); border-color: var(--accent-danger); color: var(--accent-danger); } .alert-warning { background: var(--warning-soft); border-color: var(--accent-warning); color: var(--accent-warning); } .alert-info { background: var(--info-soft); border-color: var(--accent-info); color: var(--accent-info); } /* ===================== 14. الحركات ===================== */ @keyframes fade-in-up { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes scale-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } } @keyframes slide-in-start { from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes shimmer { to { background-position-x: -200%; } } .animate-in { animation: fade-in-up var(--dur-slow) var(--ease-out) both; } .animate-fade { animation: fade-in var(--dur-slow) var(--ease-out) both; } .animate-scale { animation: scale-in var(--dur-base) var(--ease-spring) both; } /* دخول متتابع: يضبط app.js المتغيّر --i على كل عنصر */ .stagger > * { animation: fade-in-up var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); } /* الكشف عند التمرير — يضيف app.js الصنف is-visible */ .reveal { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } /* هيكل تحميل متلألئ */ .skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--bg-sunken) 25%, var(--border-color) 37%, var(--bg-sunken) 63%); background-size: 200% 100%; animation: shimmer 1.5s linear infinite; color: transparent !important; pointer-events: none; user-select: none; } .skeleton-text { height: 1em; margin-block: .3em; } /* تلميح فقاعي للنصوص المقصوصة — يُدار من app.js */ .lms-trunc-tip { position: fixed; z-index: var(--z-lms-toast); max-width: min(360px, 80vw); padding: 8px 13px; border-radius: var(--radius-sm); background: var(--n-900); color: #fff; font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; box-shadow: var(--shadow-xl); pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); white-space: normal; word-break: break-word; text-align: start; } [data-mode="dark"] .lms-trunc-tip { background: var(--n-700); border: 1px solid var(--border-strong); } .lms-trunc-tip.is-visible { opacity: 1; transform: none; } /* شريط تقدّم أعلى الصفحة أثناء التنقّل */ .page-progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: calc(var(--z-lms-toast) + 2); background: linear-gradient(to left, var(--accent-primary), var(--accent-secondary)); transform-origin: right center; transform: scaleX(0); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base); } .page-progress.is-active { transform: scaleX(.75); } .page-progress.is-done { transform: scaleX(1); opacity: 0; } /* ===================== 15. الإشعارات (lms-toast) ===================== */ .lms-toast-stack { position: fixed; inset-block-start: var(--space-5); inset-inline-start: var(--space-5); z-index: var(--z-lms-toast); display: flex; flex-direction: column; gap: var(--space-3); max-width: min(400px, calc(100vw - var(--space-6))); pointer-events: none; } .lms-toast { pointer-events: auto; position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--bg-card); border: 1px solid var(--border-color); border-inline-start: 4px solid var(--accent-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); color: var(--text-body); font-size: var(--fs-sm); font-weight: 600; animation: lms-toast-in var(--dur-base) var(--ease-spring) both; } .lms-toast.is-leaving { animation: lms-toast-out var(--dur-base) var(--ease-in-out) both; } @keyframes lms-toast-in { from { opacity: 0; transform: translate3d(-30px, 0, 0) scale(.95); } to { opacity: 1; transform: none; } } @keyframes lms-toast-out { from { opacity: 1; transform: none; max-height: 200px; } to { opacity: 0; transform: translate3d(-30px, 0, 0) scale(.95); max-height: 0; margin-bottom: calc(var(--space-3) * -1); padding-block: 0; } } .lms-toast-icon { font-size: 1.25em; margin-top: 1px; } .lms-toast-body { flex: 1; } .lms-toast-title { display: block; font-weight: 800; color: var(--text-main); margin-bottom: 2px; } .lms-toast-close { background: none; border: none; padding: 2px 4px; cursor: pointer; color: var(--text-faint); font-size: 1em; box-shadow: none; transition: color var(--dur-fast); } .lms-toast-close:hover { color: var(--text-main); background: none; transform: none; box-shadow: none; } .lms-toast-success { border-inline-start-color: var(--accent-success); } .lms-toast-success .lms-toast-icon { color: var(--accent-success); } .lms-toast-error { border-inline-start-color: var(--accent-danger); } .lms-toast-error .lms-toast-icon { color: var(--accent-danger); } .lms-toast-warning { border-inline-start-color: var(--accent-warning); } .lms-toast-warning .lms-toast-icon { color: var(--accent-warning); } .lms-toast-info { border-inline-start-color: var(--accent-info); } .lms-toast-info .lms-toast-icon { color: var(--accent-info); } /* شريط عدّ تنازلي أسفل الإشعار */ .lms-toast-timer { position: absolute; inset-block-end: 0; inset-inline: 0; height: 2px; background: currentColor; opacity: .35; transform-origin: right center; animation: lms-toast-timer linear both; } @keyframes lms-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* ===================== 16. النوافذ الحوارية ===================== */ .lms-modal-overlay { position: fixed; inset: 0; z-index: var(--z-lms-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-5); background: rgba(11, 15, 26, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade-in var(--dur-base) var(--ease-out) both; } .lms-modal-overlay.is-leaving { animation: fade-in var(--dur-fast) var(--ease-in-out) reverse both; } .lms-modal { width: 100%; max-width: 470px; max-height: calc(100vh - var(--space-8)); display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; animation: lms-modal-in var(--dur-base) var(--ease-spring) both; } .lms-modal-overlay.is-leaving .lms-modal { animation: lms-modal-in var(--dur-fast) var(--ease-in-out) reverse both; } @keyframes lms-modal-in { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.96); } to { opacity: 1; transform: none; } } .lms-modal-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); font-size: var(--fs-md); font-weight: 800; color: var(--text-main); border-bottom: 1px solid var(--border-subtle); } .lms-modal-head .lms-modal-icon { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-ink); font-size: 1.15rem; } .lms-modal.is-danger .lms-modal-icon { background: var(--danger-soft); color: var(--accent-danger); } .lms-modal.is-warning .lms-modal-icon { background: var(--warning-soft); color: var(--accent-warning); } .lms-modal.is-success .lms-modal-icon { background: var(--success-soft); color: var(--accent-success); } .lms-modal-body { padding: var(--space-5); overflow-y: auto; color: var(--text-body); font-size: var(--fs-base); line-height: 1.7; } .lms-modal-foot { display: flex; gap: var(--space-3); justify-content: flex-start; padding: var(--space-4) var(--space-5) var(--space-5); border-top: 1px solid var(--border-subtle); background: var(--bg-sunken); } .lms-modal-foot .btn { min-width: 104px; } /* ===================== 17. أدوات مساعدة ===================== */ .text-muted { color: var(--text-muted) !important; } .text-center { text-align: center; } .text-start { text-align: start; } .text-end { text-align: end; } .text-success { color: var(--accent-success) !important; } .text-danger { color: var(--accent-danger) !important; } .text-warning { color: var(--accent-warning) !important; } .fw-bold { font-weight: 800; } .fs-sm { font-size: var(--fs-sm); } .fs-xs { font-size: var(--fs-xs); } .mt-0{margin-top:0}.mb-0{margin-bottom:0} .mt-3{margin-top:var(--space-3)}.mb-3{margin-bottom:var(--space-3)} .mt-4{margin-top:var(--space-4)}.mb-4{margin-bottom:var(--space-4)} .mt-5{margin-top:var(--space-5)}.mb-5{margin-bottom:var(--space-5)} .p-4{padding:var(--space-4)}.p-5{padding:var(--space-5)} .w-100{width:100%} .hidden, [hidden] { display: none !important; } .divider { height: 1px; background: var(--border-color); margin: var(--space-4) 0; } /* ===================== 18. الاستجابة ===================== */ @media (max-width: 1200px) { .main-content, .page-wrap { padding: var(--space-5) var(--space-4); } } @media (max-width: 900px) { :root { --fs-3xl: 2rem; --fs-2xl: 1.6rem; --fs-xl: 1.3rem; } .main-content, .page-wrap { padding: var(--space-4) var(--space-3); gap: var(--space-4); } .welcome-banner, .hero-banner { padding: var(--space-5) var(--space-4); text-align: center; justify-content: center; } .nav-cards-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-3); } .nav-card { min-height: 126px; padding: var(--space-4) var(--space-2); } .nav-card i { font-size: 1.8rem; } .card { padding: var(--space-4); } } @media (max-width: 640px) { :root { --fs-3xl: 1.7rem; --fs-2xl: 1.42rem; } .nav-cards-grid { grid-template-columns: repeat(2, 1fr); } .lms-modal { max-width: 100%; border-radius: var(--radius-lg); } .lms-modal-foot { flex-direction: column-reverse; } .lms-modal-foot .btn { width: 100%; } .lms-toast-stack { inset-inline: var(--space-3); inset-block-start: var(--space-3); max-width: none; } .btn { padding: 12px 18px; } /* هدف لمس أكبر على الهاتف */ .row, .row-end { gap: var(--space-2); } thead th, tbody td { padding: 11px 12px; } /* الجداول تصبح قابلة للتمرير أفقياً بدل الانضغاط */ table { min-width: 560px; } } /* ===================== 19. تقليل الحركة ===================== */ /* من يضبط نظامه على تقليل الحركة يحصل على واجهة ساكنة بلا كسر */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } .welcome-banner::before, .hero-banner::before { animation: none; } } /* ===================== 20. الطباعة ===================== */ @media print { body { background: #fff !important; background-image: none !important; color: #000; } /* المؤشّر المخصّص عنصر ثابت (position: fixed) فيُطبع كمربّع تائه أعلى كل ورقة — صورته لا تُحمَّل في الطباعة فيظهر صندوقاً أبيض. يُخفى هنا. */ .top-navbar, .lms-toast-stack, .lms-modal-overlay, .skip-link, .page-progress, .lms-cursor, .no-print, .btn, button { display: none !important; } html.lms-cursor-on, html.lms-cursor-on *, html.lms-cursor-snap, html.lms-cursor-snap * { cursor: auto !important; } .card, table, .table-scroll { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; } thead th { background: #eee !important; color: #000 !important; } a { color: #000; text-decoration: none; } } /* ═══════════════════════════════════════════════════════════════════ 21. القائمة الجانبية — هيكل لوحة القيادة الخريطة في includes/nav_side.php. الطيّ يُطبَّق على فيزيح المحتوى بلا وميض، ويُقرأ من التخزين المحلي قبل أول رسم. ═══════════════════════════════════════════════════════════════════ */ :root { --nav-w: 268px; --nav-w-collapsed: 76px; } html.lms-nav-collapsed { --nav-w: var(--nav-w-collapsed); } /* المحتوى يزاح بمقدار عرض القائمة — لكن فقط حيث توجد قائمة فعلاً. صفحة الدخول وشاشات العرض بلا قائمة، فتبقى بعرض الشاشة كاملاً. :has() للمتصفحات الحديثة، و html.lms-has-nav احتياط يضبطه nav_side.php. */ body { transition: padding-inline-start var(--dur-base) var(--ease-out); } body:has(.lms-nav), html.lms-has-nav body { padding-inline-start: var(--nav-w); } /* السايد ناف فاتح عصري — يتبع سطح البطاقة، بحبّة نشطة إنديغو (كالمراجع) */ .lms-nav { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--z-nav); width: var(--nav-w); display: flex; flex-direction: column; background: var(--bg-card); border-inline-end: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: width var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); overflow: hidden; } /* ── الترويسة ───────────────────────────────────────────── */ .lms-nav-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-4); border-bottom: 1px solid var(--border-subtle); min-height: 68px; } /* عنوان القائمة (بلا شعار — الشعار في الشريط العلوي فقط) */ .lms-nav-title { font-weight: 800; font-size: var(--fs-sm); color: var(--text-muted); letter-spacing: .04em; white-space: nowrap; overflow: hidden; } /* الرابط المثبّت (الرئيسية) أعلى القائمة */ .lms-nav-pinned { margin: 4px 0 6px; padding-block: 11px; font-weight: 700; } .lms-nav-pinned i { width: 20px; text-align: center; font-size: 1rem; } .lms-nav-pinned::after { content: ''; position: absolute; inset-inline: 8px; bottom: -5px; height: 1px; background: var(--border-subtle); } html.lms-nav-collapsed .lms-nav-pinned::after { display: none; } .lms-nav-collapse { margin-inline-start: auto; flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--border-color); border-radius: var(--radius-xs); background: var(--bg-card); color: var(--text-muted); cursor: pointer; box-shadow: none; transition: var(--transition); } .lms-nav-collapse:hover { color: var(--accent-ink); border-color: var(--accent-primary); background: var(--accent-soft); } .lms-nav-collapse i { transition: transform var(--dur-base) var(--ease-out); } html.lms-nav-collapsed .lms-nav-collapse i { transform: rotate(180deg); } /* ── البحث ──────────────────────────────────────────────── */ .lms-nav-search { position: relative; display: flex; align-items: center; margin: var(--space-2) var(--space-4); background: var(--bg-sunken); border: 1px solid var(--border-color); border-radius: var(--radius-pill); transition: var(--transition); } .lms-nav-search:focus-within { border-color: var(--accent-primary); background: var(--bg-card); box-shadow: var(--ring); } .lms-nav-search i { padding-inline: 11px; color: var(--text-faint); font-size: var(--fs-xs, .8rem); } .lms-nav-search input { flex: 1; min-width: 0; /* !important لتجاوز حشوة قاعدة input العامّة العالية التخصيص (7 :not) */ padding: 5px 0 5px 12px !important; line-height: 1.3; border: none !important; background: transparent !important; box-shadow: none !important; font-size: var(--fs-sm) !important; color: var(--text-main); } .lms-nav-search input::placeholder { color: var(--text-faint); } .lms-nav-search input::-webkit-search-cancel-button { -webkit-appearance: none; } /* ── جسم القائمة ────────────────────────────────────────── */ .lms-nav-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--space-2) var(--space-3) var(--space-4); } .lms-nav-body::-webkit-scrollbar { width: 6px; } .lms-nav-group { margin-bottom: 2px; } .lms-nav-group[hidden] { display: none; } .lms-nav-group-btn { width: 100%; display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; background: transparent; border: none; box-shadow: none; border-radius: var(--radius-sm); color: var(--text-faint); font-family: var(--font-ar); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-align: start; cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .lms-nav-group-btn:hover { color: var(--text-main); background: var(--bg-hover); transform: none; box-shadow: none; } .lms-nav-group-icon { font-size: 0.95rem; width: 20px; text-align: center; flex-shrink: 0; } .lms-nav-group-title { flex: 1; white-space: nowrap; overflow: hidden; } .lms-nav-chev { font-size: .68rem; flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); } .lms-nav-group.is-open .lms-nav-chev { transform: rotate(180deg); } .lms-nav-group.is-open .lms-nav-group-btn { color: var(--accent-ink); } /* الطيّ بغلاف واحد (grid 0fr↔1fr) — يشمل كل العناصر معاً بانتقال سلس. لا بدّ من عنصر غلاف وحيد؛ عدّة عناصر مباشرة تكسر الحيلة. */ .lms-nav-acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); } .lms-nav-acc > .lms-nav-list { overflow: hidden; min-height: 0; } .lms-nav-group.is-open .lms-nav-acc { grid-template-rows: 1fr; } .lms-nav-list { list-style: none; margin: 0; padding: 0; } .lms-nav-list li[hidden] { display: none; } .lms-nav-link { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: 9px 12px 9px 12px; margin-inline-start: 10px; border-radius: var(--radius-sm); color: var(--text-body); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .lms-nav-link i { width: 18px; text-align: center; font-size: .9rem; color: var(--text-faint); flex-shrink: 0; transition: color var(--dur-fast) var(--ease-out); } .lms-nav-link span { overflow: hidden; text-overflow: ellipsis; } .lms-nav-link:hover { background: var(--bg-hover); color: var(--text-main); } .lms-nav-link:hover i { color: var(--accent-ink); } /* العناصر الفرعية نصّية (بلا أيقونات) — نقطة صغيرة تدلّ على التداخل */ .lms-nav-list .lms-nav-link { padding-inline-start: 26px; font-weight: 600; } .lms-nav-list .lms-nav-link::after { content: ''; position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); transition: background-color var(--dur-fast) var(--ease-out); } .lms-nav-list .lms-nav-link:hover::after { background: var(--accent-primary); } .lms-nav-list .lms-nav-link.is-active::after { background: var(--accent-primary); } /* الحبّة النشطة إنديغو ناعمة — كالمراجع العصرية */ .lms-nav-link.is-active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; } .lms-nav-link.is-active i { color: var(--accent-ink); } .lms-nav-link.is-active::before { content: ''; position: absolute; inset-block: 5px; inset-inline-start: -10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-primary); } .lms-nav-empty { padding: var(--space-5) var(--space-4); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); } /* ── التذييل ────────────────────────────────────────────── */ .lms-nav-foot { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-subtle); background: var(--bg-sunken); } .lms-nav-user { display: flex; align-items: center; gap: var(--space-3); min-width: 0; flex: 1; } /* البطاقة رابط إلى الملف الشخصي: نمنع قاعدة a:hover المركزية من قلب الألوان، والحشوة مع هامش سالب تُبقي التخطيط كما كان قبل أن تصير رابطاً. */ a.lms-nav-user, a.lms-nav-user:hover { text-decoration: none; color: inherit; } a.lms-nav-user { padding: var(--space-2); margin: calc(var(--space-2) * -1); border-radius: var(--radius-xs); transition: background var(--dur-fast) var(--ease-out); } a.lms-nav-user:hover { background: var(--bg-sunken); } a.lms-nav-user:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } /* الصورة الشخصية تحلّ محلّ الحرف الأول في بطاقة الحساب */ .lms-nav-avatar.has-photo { padding: 0; overflow: hidden; background: var(--bg-sunken); } .lms-nav-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .lms-nav-avatar { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-sm); color: #fff; font-weight: 800; background: linear-gradient(145deg, var(--accent-primary), var(--accent-secondary)); } .lms-nav-user-meta { min-width: 0; overflow: hidden; line-height: 1.3; } .lms-nav-user-meta strong { display: block; font-size: var(--fs-sm); color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lms-nav-user-meta small { font-size: var(--fs-xs); color: var(--text-muted); } .lms-nav-logout { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-xs); color: var(--text-muted); transition: var(--transition); } .lms-nav-logout:hover { color: var(--accent-danger); background: var(--danger-soft); } /* ── الوضع المطويّ: أيقونات الفئات الرئيسية فقط ────────────── لا عناصر فرعية إطلاقاً — فقط الرئيسية + 9 أيقونات فئات، والفئة النشطة مميّزة. النقر على أي فئة يوسّع القائمة ويفتحها. */ html.lms-nav-collapsed .lms-nav-title, html.lms-nav-collapsed .lms-nav-group-title, html.lms-nav-collapsed .lms-nav-chev, html.lms-nav-collapsed .lms-nav-search, html.lms-nav-collapsed .lms-nav-user-meta, html.lms-nav-collapsed .lms-nav-pinned span { display: none; } /* إخفاء كل العناصر الفرعية تماماً عند الطيّ */ html.lms-nav-collapsed .lms-nav-acc { display: none; } html.lms-nav-collapsed .lms-nav-empty { display: none; } /* الترويسة عند الطيّ: زر يفتح القائمة، بأيقونة ونصّ "القائمة" أسفلها */ html.lms-nav-collapsed .lms-nav-head { flex-direction: column; gap: 3px; justify-content: center; padding: var(--space-3) var(--space-2); } html.lms-nav-collapsed .lms-nav-collapse { flex-direction: column; gap: 3px; width: auto; height: auto; padding: 7px 10px; /* إلغاء margin-inline-start:auto الموروث كي يتوسّط الزر على الشريط المطويّ بدل انزياحه لأحد جانبيه */ margin-inline: auto; } html.lms-nav-collapsed .lms-nav-collapse::after { content: 'القائمة'; font-size: .58rem; font-weight: 700; letter-spacing: .02em; color: var(--text-muted); } html.lms-nav-collapsed .lms-nav-body { padding-inline: var(--space-2); overflow: visible; } html.lms-nav-collapsed .lms-nav-group { margin-bottom: 4px; } /* زر الفئة يصبح أيقونة مربّعة مركزية */ html.lms-nav-collapsed .lms-nav-group-btn, html.lms-nav-collapsed .lms-nav-pinned { justify-content: center; padding: 11px 0; margin-inline-start: 0; border-radius: var(--radius-sm); } html.lms-nav-collapsed .lms-nav-group-icon, html.lms-nav-collapsed .lms-nav-pinned i { font-size: 1.15rem; width: auto; } /* الأيقونة الملوّنة الوحيدة على الشريط المطويّ: الفئة التي تحوي الصفحة المفتوحة حالياً (has-active من الخادم) أو الرئيسية إن كانت هي الصفحة. الحالة المحفوظة is-open لا تُلوّن هنا (انظر التحييد في @media أدناه)، فيبقى ملوّناً عنصر واحد فقط دالّاً على "أنت هنا". */ html.lms-nav-collapsed .lms-nav-group-btn.has-active, html.lms-nav-collapsed .lms-nav-pinned.is-active { background: var(--accent-soft); color: var(--accent-ink); } html.lms-nav-collapsed .lms-nav-group-btn.has-active .lms-nav-group-icon { color: var(--accent-ink); } html.lms-nav-collapsed .lms-nav-foot { justify-content: center; padding-inline: var(--space-2); } html.lms-nav-collapsed .lms-nav-logout { display: none; } /* تلميحات الأيقونات تُبنى بـ JS على مستوى الصفحة (.lms-trunc-tip) لتفادي القصّ بحدّ القائمة overflow:hidden. لا حاجة لفقاعة CSS هنا. */ /* ── معاينة بالمرور (سطح المكتب) ───────────────────────────── عند مرور المؤشر فوق القائمة المطويّة تنزلق مفتوحةً كطبقة تطفو فوق المحتوى دون إزاحته (padding الجسم يبقى بعرض الطيّ)، وتتبع الفئة التي يمرّ فوقها المؤشر لتسهيل الاختيار. تُدار بصنف html.lms-nav-peek من nav_side.php. */ @media (min-width: 1025px) { html.lms-nav-collapsed.lms-nav-peek .lms-nav { width: var(--nav-w-hover, 268px); box-shadow: var(--shadow-xl); } /* المحتوى يُدفَع بمقدار العرض الموسّع فلا يغطّيه السايد ناف (بدل الطفو فوقه). body له transition على padding-inline-start فينزلق المحتوى بسلاسة. التخصيص (0,2,1) يتغلّب على body:has(.lms-nav) و html.lms-has-nav body. */ html.lms-nav-collapsed.lms-nav-peek body, html.lms-nav-collapsed.lms-nav-peek.lms-has-nav body { padding-inline-start: var(--nav-w-hover, 268px); } html.lms-nav-collapsed.lms-nav-peek .lms-nav-body { overflow-y: auto; padding-inline: var(--space-3); } html.lms-nav-collapsed.lms-nav-peek .lms-nav-title, html.lms-nav-collapsed.lms-nav-peek .lms-nav-group-title, html.lms-nav-collapsed.lms-nav-peek .lms-nav-chev, html.lms-nav-collapsed.lms-nav-peek .lms-nav-user-meta, html.lms-nav-collapsed.lms-nav-peek .lms-nav-empty, html.lms-nav-collapsed.lms-nav-peek .lms-nav-pinned span { display: revert; } /* البحث flex صراحةً (revert يجعله block فتتكدّس الأيقونة والحقل ويتضخّم لسطرين) */ html.lms-nav-collapsed.lms-nav-peek .lms-nav-search { display: flex; } /* إلغاء تسمية "القائمة" أسفل الأيقونات ونقاط الفئات في وضع المعاينة */ html.lms-nav-collapsed.lms-nav-peek .lms-nav-collapse::after, html.lms-nav-collapsed.lms-nav-peek .lms-nav-group-btn::after, html.lms-nav-collapsed.lms-nav-peek .lms-nav-pinned::after { display: none; } /* الأكورديون يعود لخدعة grid 0fr↔1fr كما في الوضع الموسّع */ html.lms-nav-collapsed.lms-nav-peek .lms-nav-acc { display: grid; grid-template-rows: 0fr; } html.lms-nav-collapsed.lms-nav-peek .lms-nav-group.is-open .lms-nav-acc { grid-template-rows: 1fr; } /* أزرار الفئات تعود لصفّ نصّي بمحاذاة البدء */ html.lms-nav-collapsed.lms-nav-peek .lms-nav-group-btn, html.lms-nav-collapsed.lms-nav-peek .lms-nav-pinned { justify-content: flex-start; padding: 11px 12px; } html.lms-nav-collapsed.lms-nav-peek .lms-nav-logout { display: grid; } /* الترويسة تعود صفّاً: عنوان "القائمة" يميناً وزر الطيّ يساراً */ html.lms-nav-collapsed.lms-nav-peek .lms-nav-head { flex-direction: row; gap: var(--space-3); justify-content: flex-start; padding: var(--space-4); } html.lms-nav-collapsed.lms-nav-peek .lms-nav-collapse { flex-direction: row; width: 32px; height: 32px; padding: 0; margin-inline: 0; margin-inline-start: auto; } html.lms-nav-collapsed.lms-nav-peek .lms-nav-foot { justify-content: flex-start; padding-inline: var(--space-4); } /* ── الشريط المطويّ الحقيقي (بلا معاينة) ──────────────────── الفئات المفتوحة بالحالة المحفوظة (is-open) لا تُلوَّن: قوائمها الفرعية مخفيّة هنا (.lms-nav-acc{display:none}) فاللون بلا معنى وكان يُظهر عدّة أيقونات ملوّنة. المستثنى has-active — الفئة التي تحوي الصفحة المفتوحة فعلاً — فتبقى وحدها ملوّنة. الجوال مستثنى لأن الدرج ينفتح موسّعاً رغم بقاء صنف lms-nav-collapsed على html. */ html.lms-nav-collapsed:not(.lms-nav-peek) .lms-nav-group.is-open .lms-nav-group-btn:not(.has-active):not(:hover), html.lms-nav-collapsed:not(.lms-nav-peek) .lms-nav-group.is-open .lms-nav-group-btn:not(.has-active):not(:hover) .lms-nav-group-icon { color: var(--text-faint); background: transparent; } } /* ── الحجاب والزر على الجوال ────────────────────────────── */ .lms-nav-scrim { position: fixed; inset: 0; z-index: calc(var(--z-nav) - 1); background: rgba(11, 15, 26, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border: none; padding: 0; cursor: pointer; animation: fade-in var(--dur-fast) var(--ease-out) both; } .lms-nav-scrim[hidden] { display: none; } .lms-nav-toggle { display: none; width: 40px; height: 40px; flex-shrink: 0; place-items: center; border-radius: var(--radius-sm); background: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-muted); cursor: pointer; font-size: 1.05rem; transition: var(--transition); } .lms-nav-toggle:hover { color: var(--accent-ink); border-color: var(--accent-primary); } /* ── المؤشر المخصّص (كل الموقع) ────────────────────────────── يُفعّل بصنف html.lms-cursor-on من app.js عند وجود مؤشر دقيق فقط. الصور تُركَّب عبر خاصية cursor نفسها لا عبر عنصر DOM يلاحق الفأرة. السبب: العنصر المرسوم كان يختفي فوق الحقول والأزرار — يكفي أن يحجبه سطح فيه backdrop-filter، أو أن تفتح نافذة أصلية (الإكمال التلقائي في صفحة الدخول، قائمة select) فيتوقف mousemove ويبقى cursor:none بلا بديل فلا يرى المستخدم مؤشراً إطلاقاً. مؤشر النظام يرسمه المُركِّب نفسه فلا يُحجب ولا يتأخّر ولا يغيب فوق أشرطة التمرير والقوائم الأصلية. اللصق المغناطيسي (is-snapped) لا يُستدعى إلا من داخل السايد ناف، وعندها فقط يُخفى مؤشر النظام (html.lms-cursor-snap) ويظهر المرسوم. */ html.lms-cursor-on { cursor: url('../img/cursor-normal-32.png') 6 4, default; cursor: image-set(url('../img/cursor-normal-32.png') 1x, url('../img/cursor-normal.png') 2x) 6 4, default; } /* العناصر القابلة للنقر: «يد الرابط» — نقطة الإصابة طرف الإصبع */ html.lms-cursor-on a[href], html.lms-cursor-on button, html.lms-cursor-on summary, html.lms-cursor-on [role="button"], html.lms-cursor-on [role="tab"], html.lms-cursor-on [role="option"], html.lms-cursor-on select, html.lms-cursor-on label, html.lms-cursor-on option, html.lms-cursor-on input[type="checkbox"], html.lms-cursor-on input[type="radio"], html.lms-cursor-on input[type="submit"], html.lms-cursor-on input[type="button"], html.lms-cursor-on input[type="reset"], html.lms-cursor-on input[type="file"], html.lms-cursor-on input[type="color"], html.lms-cursor-on input[type="date"], html.lms-cursor-on input[type="time"], html.lms-cursor-on input[type="datetime-local"], html.lms-cursor-on input[type="month"], html.lms-cursor-on input[type="week"], html.lms-cursor-on .lms-nav-link, html.lms-cursor-on .lms-nav-group-btn, html.lms-cursor-on .btn, html.lms-cursor-on .f-btn, /* كل ما تعلّمه الصفحات كقابل للنقر — [onclick] وحده يغطّي مئات المواضع */ html.lms-cursor-on [onclick], html.lms-cursor-on .clickable, html.lms-cursor-on .f-tab, html.lms-cursor-on .f-check, html.lms-cursor-on .f-switch, html.lms-cursor-on .f-chip, html.lms-cursor-on .m-chip, html.lms-cursor-on .f-table th.f-sortable, html.lms-cursor-on .f-spin .f-spin-btns button, html.lms-cursor-on .lms-toast-close, html.lms-cursor-on .lms-nav-scrim, html.lms-cursor-on .lms-nav-toggle, html.lms-cursor-on .toggle-password, html.lms-cursor-on .theme-toggle, html.lms-cursor-on .mode-btn { cursor: url('../img/cursor-link-32.png') 12 5, pointer; cursor: image-set(url('../img/cursor-link-32.png') 1x, url('../img/cursor-link.png') 2x) 12 5, pointer; } /* حقول الكتابة تُبقي مؤشر النص — هو الدلالة الصحيحة وأوضحها فوق خلفية بيضاء */ html.lms-cursor-on input:not([type]), html.lms-cursor-on input[type="text"], html.lms-cursor-on input[type="password"], html.lms-cursor-on input[type="search"], html.lms-cursor-on input[type="email"], html.lms-cursor-on input[type="tel"], html.lms-cursor-on input[type="url"], html.lms-cursor-on input[type="number"], html.lms-cursor-on textarea, html.lms-cursor-on [contenteditable="true"] { cursor: text; } /* المعطَّل والمنتظِر يتقدّمان على كل ما سبق */ html.lms-cursor-on :disabled, html.lms-cursor-on [aria-disabled="true"] { cursor: not-allowed; } html.lms-cursor-on [aria-busy="true"] { cursor: progress; } /* أثناء اللصق المغناطيسي فقط: يُخفى مؤشر النظام ويحلّ محلّه المرسوم */ html.lms-cursor-snap, html.lms-cursor-snap * { cursor: none !important; } .lms-cursor { position: fixed; top: 0; left: 0; z-index: 2147483000; width: 30px; height: 30px; background: url('../img/cursor-normal.png') no-repeat center / contain; pointer-events: none; opacity: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); transition: opacity .18s var(--ease-out, ease), filter .16s var(--ease-out, ease); will-change: transform; } .lms-cursor.is-visible { opacity: 1; } /* فوق عنصر تفاعلي: صورة «يد الرابط» (نقطة الإصابة تُضبط في app.js) */ .lms-cursor.is-hot { background-image: url('../img/cursor-link.png'); } /* داخل السايد ناف المؤشر مثبّت في المنتصف — إطار بلون الثيم يحدّد العنصر الحالي */ .lms-cursor.is-snapped { filter: drop-shadow(0 0 6px var(--accent-glow, rgba(91,95,239,.55))) drop-shadow(0 1px 2px rgba(0,0,0,.3)); } .lms-nav .lms-nav-cursor-target { /* إطار داخلي (inset) كي لا يقصّه overflow جسم القائمة عند الحواف */ box-shadow: inset 0 0 0 2px var(--accent-primary); background: var(--accent-soft); border-radius: var(--radius-sm, 10px); position: relative; z-index: 1; transition: box-shadow var(--dur-fast, 140ms) var(--ease-out, ease), background var(--dur-fast, 140ms) var(--ease-out, ease); } @media (prefers-reduced-motion: reduce) { .lms-cursor { transition: opacity .12s linear; } } /* أمان: أي مؤشر خشن/لمس لا يُخفي المؤشر الأصلي ولا يرسم المخصّص */ @media (pointer: coarse) { .lms-cursor { display: none !important; } html.lms-cursor-snap, html.lms-cursor-snap * { cursor: auto !important; } } /* ── الجوال واللوح ──────────────────────────────────────── */ @media (max-width: 1024px) { /* يجب مطابقة تخصيص body:has(.lms-nav) وإلا بقيت الإزاحة على الجوال */ body, body:has(.lms-nav), html.lms-has-nav body { padding-inline-start: 0; } .lms-nav { transform: translateX(100%); /* خارج الشاشة على جهة البدء في RTL */ width: min(300px, 84vw); box-shadow: var(--shadow-xl); } html[dir="ltr"] .lms-nav { transform: translateX(-100%); } html.lms-nav-open .lms-nav { transform: none; } html.lms-nav-collapsed .lms-nav { width: min(300px, 84vw); } /* على الجوال لا معنى للوضع المطويّ — القائمة درج كامل بالتسميات */ html.lms-nav-collapsed .lms-nav-title, html.lms-nav-collapsed .lms-nav-group-title, html.lms-nav-collapsed .lms-nav-chev, html.lms-nav-collapsed .lms-nav-search, html.lms-nav-collapsed .lms-nav-user-meta, html.lms-nav-collapsed .lms-nav-pinned span { display: revert; } html.lms-nav-collapsed .lms-nav-group-btn::after, html.lms-nav-collapsed .lms-nav-pinned::after { display: none; } html.lms-nav-collapsed .lms-nav-acc { display: grid; grid-template-rows: 0fr; } html.lms-nav-collapsed .lms-nav-group.is-open .lms-nav-acc { grid-template-rows: 1fr; } html.lms-nav-collapsed .lms-nav-group-btn, html.lms-nav-collapsed .lms-nav-pinned { justify-content: flex-start; padding-inline: 12px; } html.lms-nav-collapsed .lms-nav-group-btn.has-active, html.lms-nav-collapsed .lms-nav-pinned.is-active { background: var(--accent-soft); } html.lms-nav-collapsed .lms-nav-logout { display: grid; } html.lms-nav-collapsed .lms-nav-head, html.lms-nav-collapsed .lms-nav-foot { justify-content: flex-start; padding-inline: var(--space-4); } /* الدرج على الجوال ينفتح موسّعاً رغم بقاء صنف lms-nav-collapsed على html، فيجب إبطال overflow:visible الموروث من الوضع المطويّ — وإلا تمدّد جسم القائمة بارتفاعه الكامل وقصّه .lms-nav{overflow:hidden} بلا أي تمرير. */ html.lms-nav-collapsed .lms-nav-body { padding-inline: var(--space-3); overflow-y: auto; overflow-x: hidden; } /* التمرير باللمس يبقى داخل الدرج ولا يسحب الصفحة خلفه عند بلوغ الطرف */ .lms-nav-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .lms-nav-collapse { display: none; } .lms-nav-toggle { display: grid; } } @media (min-width: 1025px) { .lms-nav-scrim { display: none !important; } } @media print { .lms-nav, .lms-nav-scrim, .lms-nav-toggle { display: none !important; } body { padding-inline-start: 0 !important; } }