/* ═══════════════════════════════════════════════════════════════════════ منصة الوليد — الترويسة الموحّدة (Alwaleed Unified Header) ─────────────────────────────────────────────────────────────────────── نظام ترويسة واحد لكل شاشات الموقع (الجوال + الديسكتوب). • بنية واحدة:
…
• التجاوب عبر Container Queries → يتبدّل حسب عرض الحاوية نفسها (نقطة التحوّل 700px): جوال = صفّان · ديسكتوب = سطر واحد ممتد. • لون هوية كل قسم يأتي من data-aw-theme عبر طبقة alwaleed-screen-theme.css. • كل القواعد داخل @media screen → لا تؤثّر على طباعة A4 إطلاقاً. حمّل هذا الملف بعد بقية ملفات CSS (آخر وسم في ). ═══════════════════════════════════════════════════════════════════════ */ @media screen { /* ===== الحاوية الخارجية (لاصقة + حاوية استعلام) ===== */ .nh-head { --acc: #08766b; /* اللون الافتراضي — يُستبدل لكل شاشة */ --nh-line: var( --aw-identity-spectrum, linear-gradient(90deg, #08766b, #61b7aa, #c79a45, #d97559) ); --nh-ink: #13322d; --nh-muted: #5f7a72; --nh-edge: color-mix(in srgb, var(--acc) 20%, transparent); container-type: inline-size; /* ← يتجاوب حسب عرضه هو */ position: sticky; top: 0; z-index: 50; box-sizing: border-box; } .nh-head * { box-sizing: border-box; } /* ===== الترويسة (الصف البصري) ===== */ .nh { position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: 11px; row-gap: 9px; padding: 11px clamp(13px, 3.2cqi, 16px) 12px; background: linear-gradient( 180deg, color-mix(in srgb, var(--acc) 11%, #fff), rgba(255, 255, 255, 0.96) ); border-bottom: 1px solid var(--nh-edge); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* خط الهوية المتدرّج (3px على الحافة العليا) */ .nh::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--nh-line); } /* ===== شعار الوزارة — متوازن (مكبّر) ===== */ .nh-logo { order: 1; flex: none; height: 32px; width: auto; display: block; opacity: 0.97; } /* فاصل رفيع — ديسكتوب فقط */ .nh-div { display: none; } /* ===== صف الهوية: أيقونة القسم + العنوان ===== */ .nh-id { order: 3; flex-basis: 100%; /* جوال: صف ثانٍ كامل */ display: flex; align-items: center; gap: 10px; justify-content: flex-start; /* محاذاة يمين (RTL) */ min-width: 0; } .nh-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--acc), color-mix(in srgb, var(--acc) 60%, #fff)); box-shadow: 0 9px 18px -9px var(--acc); } .nh-ic svg { width: 20px; height: 20px; display: block; stroke: currentColor; } .nh-tx { min-width: 0; } .nh-title { margin: 0; font-size: 16px; font-weight: 900; line-height: 1.2; color: var(--nh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nh-sub { display: block; font-size: 11px; font-weight: 700; line-height: 1.35; color: var(--nh-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===== الإجراءات: زر الرئيسية (+ أي زر ثانوي مفرد) ===== */ .nh-actions { order: 2; margin-inline-start: auto; /* جوال: يُدفع لأقصى اليسار */ display: flex; align-items: center; gap: 7px; } .nh-home { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; border: 0; border-radius: 13px; cursor: pointer; background: linear-gradient(140deg, var(--acc), color-mix(in srgb, var(--acc) 76%, #000)); color: #fff; font: inherit; font-size: 13.5px; font-weight: 900; box-shadow: 0 11px 20px -11px var(--acc); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; white-space: nowrap; } .nh-home svg { width: 18px; height: 18px; flex: none; stroke: currentColor; } .nh-home:hover { transform: translateY(-1px); box-shadow: 0 14px 24px -11px var(--acc); } .nh-home:active { transform: translateY(0); } /* ===== شريط الأدوات (التقارير: تقاريري/الإعدادات…) ===== */ .nh-tools { order: 4; flex-basis: 100%; /* جوال: شريط مستقل تحت الترويسة */ display: flex; align-items: center; gap: 8px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--nh-edge); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nh-tools::-webkit-scrollbar { display: none; } .nh-tool { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 999px; cursor: pointer; background: #fff; border: 1px solid var(--nh-edge); color: #2c534b; font: inherit; font-size: 12.5px; font-weight: 800; text-decoration: none; transition: transform 0.15s, border-color 0.15s; white-space: nowrap; position: relative; } .nh-tool svg { width: 18px; height: 18px; flex: none; color: var(--acc); stroke: currentColor; } .nh-tool:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--acc) 34%, #fff); } .nh-tool .dot-badge { position: absolute; inset-block-start: -4px; inset-inline-start: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 10px; font-weight: 900; display: grid; place-items: center; } /* ═══════════════════ الديسكتوب: سطر واحد ممتد (عرض الحاوية ≥ 700px) ═══════════════════ */ @container (min-width:700px) { .nh { flex-wrap: nowrap; column-gap: 14px; padding: 13px clamp(18px, 2.4cqi, 30px); } .nh-logo { height: 40px; } /* أكبر قليلاً — متوازن */ .nh-div { display: block; order: 2; flex: none; width: 1px; height: 34px; background: var(--nh-edge); } .nh-id { order: 3; flex-basis: auto; margin-inline-end: auto; } /* يدفع الأدوات/الرئيسية لليسار */ .nh-ic { width: 42px; height: 42px; border-radius: 13px; } .nh-ic svg { width: 22px; height: 22px; } .nh-title { font-size: 19px; line-height: 1.15; } .nh-sub { font-size: 12px; } .nh-tools { order: 4; flex-basis: auto; margin-top: 0; padding-top: 0; border-top: 0; overflow: visible; } .nh-tool { border-radius: 11px; } .nh-actions { order: 5; margin-inline-start: 0; } .nh-home { height: 44px; padding: 0 17px; } } /* ═══════════════════ جوال ضيّق جداً (≤ 360px) ═══════════════════ */ @container (max-width:360px) { .nh-home { padding: 0; width: 40px; justify-content: center; } .nh-home .nh-home-t { display: none; } /* يبقى أيقونة فقط */ } /* ملاحظة: شاشة الدخول وصفحة الترحيب موحّدتان أصلاً عبر ui-vision.css بنفس لوحة الهوية (vision-brand/gold/coral) — لا نكرّر تنسيقهما هنا. */ }