/* ========================================================================== dashboard-pro.css — طبقة الهوية المتطوّرة للوحة تحكم مدعوم -------------------------------------------------------------------------- تُحمَّل بعد main.css و whatsapp-theme.css، فتعمل كطبقة تطوير بصري فوق النظام القائم دون حذف أي شيء منه: • نفس لوحة الألوان بالضبط (#1677FF / #0F52BA / #00B8FF + ألوان الحالة). لا لون جديد هنا — فقط طرق أحدث في استعماله: تدرّجات، شفافيات مضبوطة، وحلقات تركيز بلون العلامة. • هوية أحدث: زوايا أوسع، ظلال مزرقّة متعدّدة الطبقات بدل الظل الرمادي المسطّح، شريط جانبي زجاجي، وبطاقات بخط علوي متدرّج. • دعم كامل للوضعين الفاتح والداكن عبر [data-wa-theme] الموجود أصلاً. • RTL أصلي — الاتجاه من الـ ولا نفترض يساراً في أي مكان. ========================================================================== */ :root { /* ── زوايا أوسع قليلاً: الفارق البصري الأكبر بين "لوحة 2022" و"لوحة اليوم" ── */ --pro-r-xs: 10px; --pro-r-sm: 14px; --pro-r-md: 18px; --pro-r-lg: 24px; --pro-r-xl: 32px; /* ── ظلال بطبقتين مبنيّة على --shadow و --primary-rgb من main.css ── لا قيمة ثابتة هنا: --shadow معرّفة لكل سمة (فاتحة/داكنة) في main.css، فالظلال تتبع السمة تلقائياً ولا تحتاج كتلة تجاوز للوضع الداكن. */ --pro-sh-1: 0 1px 2px var(--shadow), 0 2px 8px rgba(var(--primary-rgb), .05); --pro-sh-2: 0 2px 6px var(--shadow), 0 12px 28px rgba(var(--primary-rgb), .08); --pro-sh-3: 0 8px 20px var(--shadow), 0 28px 60px rgba(var(--primary-rgb), .14); --pro-ring: 0 0 0 4px rgba(var(--primary-rgb), .12); /* ── تدرّجات مبنية من نفس ألوان اللوحة لا غير ── */ --pro-grad-brand: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); --pro-grad-sky: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%); --pro-grad-line: linear-gradient(90deg, var(--accent), var(--primary), var(--primary-dark)); /* ── أسطح: --bg-glass موجودة في main.css ومعرّفة للسمتين ── */ --pro-hairline: rgba(var(--primary-rgb), .10); --pro-tint-1: rgba(var(--primary-rgb), .05); --pro-tint-2: rgba(var(--primary-rgb), .09); --pro-tint-3: rgba(var(--primary-rgb), .16); /* ── ألوان الحالة: نفس الصيغة المستعملة في main.css (خلفية شفافة 12%) ونفس درجة الحبر التي تستعملها .status-badge.connected في dashboard.html. تُكتب هنا مرة واحدة كرموز بدل تكرارها في كل قاعدة. ── */ --pro-ok-tint: rgba(34, 197, 94, .12); --pro-warn-tint: rgba(245, 158, 11, .14); --pro-bad-tint: rgba(239, 68, 68, .12); --pro-ok-ink: #16a34a; --pro-warn-ink: #b45309; --pro-bad-ink: #dc2626; --pro-ease: cubic-bezier(.32, .72, 0, 1); --pro-t: .28s var(--pro-ease); } /* في الوضع الداكن يُقلب الحبر لدرجة أفتح: الدرجة الداكنة على خلفية داكنة غير مقروءة. الخلفيات الشفافة تصلح كما هي لأنها تمتزج بما تحتها. */ [data-wa-theme="dark"] { --pro-hairline: rgba(var(--primary-rgb), .20); --pro-tint-1: rgba(var(--primary-rgb), .10); --pro-tint-2: rgba(var(--primary-rgb), .16); --pro-tint-3: rgba(var(--primary-rgb), .26); --pro-ok-ink: #4ade80; --pro-warn-ink: #fbbf24; --pro-bad-ink: #f87171; } /* الأرقام بأرقام لاتينية مصطفّة عمودياً — الأرقام العربية-الهندية داخل بطاقات المؤشرات تجعل الأعمدة تهتزّ عند كل تحديث. */ .pro-num, .stat-value, .pro-kpi-value { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; direction: ltr; unicode-bidi: isolate; } /* ══════════════ 1 · الخلفية العامة ══════════════ طبقة ضوء ناعمة خلف كل شيء بدل اللون المسطّح — تعطي إحساس العمق الذي تشترك فيه لوحات 2025 دون أي لون جديد. */ body { background: radial-gradient(120% 90% at 100% -10%, rgba(var(--accent-rgb), .10) 0%, transparent 55%), radial-gradient(90% 70% at 0% 0%, rgba(var(--primary-rgb), .09) 0%, transparent 50%), var(--bg-base); background-attachment: fixed; } /* ══════════════ 1.1 · جذر الانزلاق الأفقي ══════════════ .app-shell شبكة مرنة (display:flex) و .main-content عنصر مرن بـ flex:1. القيمة الافتراضية min-width:auto لعنصر مرن تمنعه من الانكماش تحت عرض محتواه الأدنى، فكان شريط أدوات الهيدر (نحو 400px من الأزرار) يمدّ .main-content إلى ما يتجاوز الشاشة، وتنزلق **كل** صفحات اللوحة أفقياً على الهاتف — لا الرئيسية وحدها (قِيس على HEAD: 157–224px على كل صفحة). min-width:0 هو العلاج القياسي لهذه الحالة: لا أثر له على الشاشات التي يتّسع فيها المحتوى أصلاً، وعلى الضيقة يسمح للعنصر بأخذ حجمه المخصّص فتتولّى الحاويات الداخلية (شريط الأدوات، الخريطة الحرارية، الجداول) تمريرَ ما يزيد داخل نفسها بدل دفع الصفحة كلها. ملاحظة: صفحة الرسائل كانت وحدها سليمة لأن main.css يضبط لها overflow عبر :has(#page-messages.active) — ما يؤكّد التشخيص. */ .main-content { min-width: 0; } /* ══════════════ 2 · الشريط الجانبي ══════════════ */ /* الشريط الجانبي: لا backdrop-filter هنا عن قصد. sidebar-collapsed.css يجعل القوائم المنسدلة (.nav-flyout) تخرج من حدود الشريط بـ position:absolute و z-index:250، و backdrop-filter كان سيصنع سياق تكديس جديداً على .sidebar يحبسها داخل طبقته. المكسب البصري من الزجاج على شريط أيقونات عرضه 72px لا يساوي المخاطرة بميزة قائمة تعمل. نكتفي بالرمز المخصّص للشريط وبحدّ شعري وظلّ خفيف. */ .sidebar { background: var(--bg-sidebar); border-inline-end: 1px solid var(--pro-hairline); box-shadow: var(--pro-sh-1); } .sidebar-header { gap: 12px; border-bottom: 1px solid var(--pro-hairline); } .sidebar-logo { background: var(--pro-grad-brand); border-radius: 14px; box-shadow: 0 6px 16px rgba(var(--primary-rgb), .32); position: relative; overflow: hidden; } /* لمعة قطرية خفيفة فوق اللوجو — تفصيل صغير يقرأه العين كـ"مصمَّم". */ .sidebar-logo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg, rgba(255, 255, 255, .38) 0%, transparent 52%); } .sidebar-brand-name { letter-spacing: -.01em; } .sidebar-brand-tag { color: var(--primary); background: var(--pro-tint-2); border-radius: 99px; padding: 2px 8px; font-size: 10px; font-weight: 800; letter-spacing: .02em; } .nav-item { border-radius: var(--pro-r-sm); position: relative; transition: background var(--pro-t), color var(--pro-t), transform var(--pro-t); } .nav-item:hover { background: var(--pro-tint-1); transform: translateX(-2px); } .nav-item.active { background: var(--pro-grad-brand); color: var(--text-on-brand); box-shadow: 0 6px 18px rgba(var(--primary-rgb), .30); } .nav-item.active .nav-icon, .nav-item.active .nav-label { color: var(--text-on-brand); } /* لا مؤشّر ::before هنا: sidebar-collapsed.css يضبط .nav-item.active::before بـ right:auto; left:0 ليناسب الشريط المطوي، وأي إعادة تعريف من طبقتنا (تُحمَّل بعده) كانت ستدفع المؤشّر خارج حافة الشاشة اليمنى. حبّة التدرّج والتوهّج أدناه تكفي للدلالة على العنصر النشط. */ .nav-badge { background: var(--status-warning); color: var(--text-on-brand); box-shadow: 0 0 0 3px var(--pro-warn-tint); } .sidebar-footer { border-top: 1px solid var(--pro-hairline); } .user-card { border-radius: var(--pro-r-sm); transition: background var(--pro-t); } .user-card:hover { background: var(--pro-tint-1); } .user-avatar { background: var(--pro-grad-sky); border-radius: 12px; color: var(--text-on-brand); font-weight: 800; } /* ══════════════ 3 · الهيدر العلوي ══════════════ */ /* الهيدر: main.css يضبط backdrop-filter و sticky و z-index أصلاً — لا نكرّرها حتى لا يتغيّر ترتيب الطبقات مع اللوحات المنبثقة. نضيف الحدّ الشعري والفجوة فقط. (تنبيه من ARCHITECTURE.md: backdrop-filter يصنع containing block لأي ابن position:fixed — ولهذا تُلحَق لوحتا الإشعارات والمحفظة بـ.) */ .top-header { border-bottom: 1px solid var(--pro-hairline); gap: 16px; } .header-title { font-weight: 800; letter-spacing: -.02em; } .icon-btn { border-radius: 12px; border: 1px solid transparent; transition: all var(--pro-t); } .icon-btn:hover { background: var(--pro-tint-1); border-color: var(--pro-hairline); color: var(--primary); transform: translateY(-1px); } .plan-badge { background: var(--pro-tint-2); border-color: var(--pro-hairline); box-shadow: var(--pro-sh-1); } /* ── شريط البحث في الهيدر (جديد) ── */ .pro-search { display: flex; align-items: center; gap: 9px; min-width: 260px; padding: 9px 14px; border-radius: 99px; background: var(--bg-card); border: 1px solid var(--pro-hairline); color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--pro-t); } .pro-search:hover { border-color: rgba(var(--primary-rgb), .35); box-shadow: var(--pro-ring); color: var(--primary); } .pro-search svg { width: 17px; height: 17px; flex-shrink: 0; } .pro-search-text { flex: 1; text-align: start; } .pro-kbd { display: inline-flex; align-items: center; gap: 2px; padding: 3px 7px; border-radius: 7px; background: var(--pro-tint-1); border: 1px solid var(--pro-hairline); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10.5px; font-weight: 700; color: var(--text-secondary); direction: ltr; } @media (max-width: 1100px) { .pro-search { display: none; } } /* ══════════════ 4 · بطاقة الترحيب (Hero) ══════════════ */ .welcome-banner { position: relative; overflow: hidden; border-radius: var(--pro-r-xl); padding: 34px 36px; border: 1px solid var(--pro-hairline); background: radial-gradient(90% 140% at 100% 0%, rgba(var(--accent-rgb), .16) 0%, transparent 58%), radial-gradient(80% 120% at 0% 100%, rgba(var(--primary-rgb), .14) 0%, transparent 55%), var(--bg-card); box-shadow: var(--pro-sh-2); } /* كرة ضوء تتنفّس ببطء خلف الرسم — حركة واحدة فقط في الصفحة، ومُعطَّلة لمن يطلب تقليل الحركة. */ .welcome-banner::after { content: ""; position: absolute; inset-inline-end: -90px; top: -110px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--primary-rgb), .20) 0%, transparent 68%); animation: proBreathe 9s ease-in-out infinite; pointer-events: none; } @keyframes proBreathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.16); opacity: 1; } } .welcome-title { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; } .welcome-sub { font-size: 14.5px; color: var(--text-secondary); line-height: 1.7; max-width: 62ch; } /* ══════════════ 5 · بطاقات المؤشرات ══════════════ */ .stats-grid, .pro-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-card, .pro-card { position: relative; overflow: hidden; background: var(--bg-card); border: 1px solid var(--pro-hairline); border-radius: var(--pro-r-lg); box-shadow: var(--pro-sh-1); transition: transform var(--pro-t), box-shadow var(--pro-t), border-color var(--pro-t); } /* الخط المتدرّج العلوي: يظهر عند المرور فيعطي البطاقة "حياة" بلا ألوان جديدة. */ .stat-card::before, .pro-card.is-interactive::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--pro-grad-line); transform: scaleX(0); transform-origin: inline-end; transition: transform var(--pro-t); } .stat-card:hover, .pro-card.is-interactive:hover { transform: translateY(-3px); box-shadow: var(--pro-sh-2); border-color: rgba(var(--primary-rgb), .28); } .stat-card:hover::before, .pro-card.is-interactive:hover::before { transform: scaleX(1); } .stat-icon { border-radius: var(--pro-r-sm); background: var(--pro-tint-2); color: var(--primary); box-shadow: inset 0 0 0 1px var(--pro-hairline); } .stat-value { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; } .stat-label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); } .stat-change { font-size: 11.5px; font-weight: 700; } /* ── بطاقة مؤشّر بنمط جديد: قيمة + دلتا + خط اتجاه مصغّر ── */ .pro-kpi { padding: 20px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; } .pro-kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .pro-kpi-label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); display: flex; align-items: center; gap: 7px; } .pro-kpi-label svg { width: 15px; height: 15px; color: var(--primary); flex-shrink: 0; } .pro-kpi-value { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--text-primary); line-height: 1.1; } .pro-kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .pro-delta { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 800; background: var(--pro-tint-1); color: var(--text-secondary); white-space: nowrap; } .pro-delta.up { background: var(--pro-ok-tint); color: var(--pro-ok-ink); } .pro-delta.down { background: var(--pro-bad-tint); color: var(--pro-bad-ink); } .pro-delta svg { width: 12px; height: 12px; } .pro-spark { display: block; width: 84px; height: 30px; flex-shrink: 0; opacity: .95; } /* ══════════════ 6 · البطاقات والأقسام ══════════════ */ .section-card, .pro-panel { background: var(--bg-card); border: 1px solid var(--pro-hairline); border-radius: var(--pro-r-lg); box-shadow: var(--pro-sh-1); overflow: hidden; } .section-card-header, .pro-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--pro-hairline); background: linear-gradient(180deg, var(--pro-tint-1), transparent); } .section-card-title, .pro-panel-title { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 800; color: var(--text-primary); letter-spacing: -.01em; } .pro-panel-title svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; } .pro-panel-sub { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 3px; } .pro-panel-body { padding: 20px 22px; } .pro-grid-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-bottom: 24px; } .pro-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; } @media (max-width: 1040px) { .pro-grid-2 { grid-template-columns: 1fr; } } .pro-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; font-size: 13px; font-weight: 800; color: var(--text-secondary); letter-spacing: .01em; } /* ══════════════ 7 · الإجراءات السريعة ══════════════ */ .quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .quick-action { background: var(--bg-card); border: 1px solid var(--pro-hairline); border-radius: var(--pro-r-md); padding: 18px 14px; text-align: center; cursor: pointer; transition: all var(--pro-t); box-shadow: var(--pro-sh-1); } .quick-action:hover { transform: translateY(-3px); border-color: rgba(var(--primary-rgb), .35); box-shadow: var(--pro-sh-2); background: linear-gradient(180deg, var(--pro-tint-1), var(--bg-card)); } .quick-action-icon { width: 46px; height: 46px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--pro-tint-2); color: var(--primary); transition: all var(--pro-t); } .quick-action:hover .quick-action-icon { background: var(--pro-grad-brand); color: var(--text-on-brand); transform: scale(1.06); box-shadow: 0 8px 20px rgba(var(--primary-rgb), .3); } .quick-action-label { font-size: 12.5px; font-weight: 700; color: var(--text-primary); } /* ══════════════ 8 · الأزرار ══════════════ */ .btn { border-radius: 12px; font-weight: 700; transition: all var(--pro-t); } .btn-primary { background: var(--pro-grad-brand); border: none; box-shadow: 0 6px 16px rgba(var(--primary-rgb), .28); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(var(--primary-rgb), .38); } .btn-secondary { background: var(--bg-card); border: 1px solid var(--pro-hairline); } .btn-secondary:hover { border-color: rgba(var(--primary-rgb), .35); background: var(--pro-tint-1); transform: translateY(-2px); } .btn:focus-visible, .icon-btn:focus-visible, .nav-item:focus-visible, .pro-card:focus-visible { outline: none; box-shadow: var(--pro-ring); } /* ══════════════ 9 · شرائح ووسوم ══════════════ */ .pro-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--pro-hairline); background: var(--bg-card); font-size: 12px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: all var(--pro-t); white-space: nowrap; } .pro-chip:hover { border-color: rgba(var(--primary-rgb), .35); color: var(--primary); } .pro-chip.active { background: var(--pro-grad-brand); border-color: transparent; color: var(--text-on-brand); box-shadow: 0 4px 12px rgba(var(--primary-rgb), .28); } .pro-chips { display: flex; gap: 8px; flex-wrap: wrap; } .pro-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; } .pro-pill.ok { background: var(--pro-ok-tint); color: var(--pro-ok-ink); } .pro-pill.warn { background: var(--pro-warn-tint); color: var(--pro-warn-ink); } .pro-pill.bad { background: var(--pro-bad-tint); color: var(--pro-bad-ink); } .pro-pill.info { background: var(--pro-tint-2); color: var(--primary); } .pro-pill.muted { background: var(--pro-tint-1); color: var(--text-muted); } /* ══════════════ 10 · شريط التنبيهات ══════════════ */ .pro-alerts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .pro-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: var(--pro-r-md); border: 1px solid var(--pro-hairline); background: var(--bg-card); box-shadow: var(--pro-sh-1); font-size: 13px; line-height: 1.6; color: var(--text-secondary); position: relative; overflow: hidden; } /* شريط لوني على حافة البدء يحدّد درجة الخطورة دون تلوين البطاقة كلها. */ .pro-alert::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--primary); } .pro-alert.warn::before { background: var(--status-warning); } .pro-alert.bad::before { background: var(--status-error); } .pro-alert.ok::before { background: var(--status-success); } .pro-alert-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--primary); margin-top: 1px; } .pro-alert.warn .pro-alert-icon { color: var(--status-warning); } .pro-alert.bad .pro-alert-icon { color: var(--status-error); } .pro-alert.ok .pro-alert-icon { color: var(--status-success); } .pro-alert-body { flex: 1; min-width: 0; } .pro-alert-title { font-weight: 800; color: var(--text-primary); margin-bottom: 2px; font-size: 13.5px; } .pro-alert-action { flex-shrink: 0; align-self: center; } /* ══════════════ 11 · لوحة نوافذ الـ24 ساعة ══════════════ */ .pro-window-list { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; } .pro-window-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--pro-r-sm); border: 1px solid var(--pro-hairline); background: var(--bg-surface); transition: all var(--pro-t); cursor: pointer; } .pro-window-row:hover { border-color: rgba(var(--primary-rgb), .35); transform: translateX(-2px); background: var(--bg-card); } .pro-window-avatar { width: 38px; height: 38px; border-radius: 12px; background: var(--pro-grad-sky); color: var(--text-on-brand); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; direction: ltr; } .pro-window-main { flex: 1; min-width: 0; } .pro-window-phone { font-size: 13px; font-weight: 700; color: var(--text-primary); direction: ltr; text-align: start; } .pro-window-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .pro-window-timer { text-align: center; flex-shrink: 0; min-width: 62px; } .pro-window-left { font-size: 14px; font-weight: 800; direction: ltr; font-variant-numeric: tabular-nums; } .pro-window-left.safe { color: var(--status-success); } .pro-window-left.soon { color: var(--status-warning); } .pro-window-left.urgent { color: var(--status-error); } .pro-window-hint { font-size: 10px; color: var(--text-muted); margin-top: 1px; } .pro-window-bar { height: 4px; border-radius: 99px; background: var(--pro-tint-1); overflow: hidden; margin-top: 6px; } .pro-window-bar > i { display: block; height: 100%; border-radius: 99px; transition: width .6s var(--pro-ease); } .pro-window-bar > i.safe { background: var(--status-success); } .pro-window-bar > i.soon { background: var(--status-warning); } .pro-window-bar > i.urgent { background: var(--status-error); } /* ══════════════ 12 · قائمة الأوامر (⌘K) ══════════════ */ .pro-cmdk-overlay { position: fixed; inset: 0; z-index: 12000; display: none; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px; background: var(--wa-overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .pro-cmdk-overlay.open { display: flex; animation: proFade .16s ease-out; } @keyframes proFade { from { opacity: 0; } to { opacity: 1; } } @keyframes proPop { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } } .pro-cmdk { width: 100%; max-width: 620px; background: var(--bg-card); border: 1px solid var(--pro-hairline); border-radius: var(--pro-r-lg); box-shadow: var(--pro-sh-3); overflow: hidden; animation: proPop .22s var(--pro-ease); display: flex; flex-direction: column; max-height: 68vh; } .pro-cmdk-input-wrap { display: flex; align-items: center; gap: 11px; padding: 16px 20px; border-bottom: 1px solid var(--pro-hairline); } .pro-cmdk-input-wrap svg { width: 19px; height: 19px; color: var(--text-muted); flex-shrink: 0; } .pro-cmdk-input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 15.5px; font-weight: 600; color: var(--text-primary); } .pro-cmdk-input::placeholder { color: var(--text-muted); font-weight: 500; } .pro-cmdk-list { overflow-y: auto; padding: 8px; } .pro-cmdk-group { padding: 10px 12px 5px; font-size: 10.5px; font-weight: 800; color: var(--text-muted); letter-spacing: .06em; } .pro-cmdk-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--pro-r-xs); cursor: pointer; transition: background .12s ease; } .pro-cmdk-item[aria-selected="true"] { background: var(--pro-tint-2); } .pro-cmdk-item-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--pro-tint-1); color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pro-cmdk-item[aria-selected="true"] .pro-cmdk-item-icon { background: var(--pro-grad-brand); color: var(--text-on-brand); } .pro-cmdk-item-icon svg { width: 16px; height: 16px; } .pro-cmdk-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .pro-cmdk-item-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); } .pro-cmdk-item-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; } .pro-cmdk-empty { padding: 34px 20px; text-align: center; color: var(--text-muted); font-size: 13px; } .pro-cmdk-foot { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-top: 1px solid var(--pro-hairline); background: var(--bg-surface); font-size: 11px; color: var(--text-muted); font-weight: 600; } .pro-cmdk-foot span { display: inline-flex; align-items: center; gap: 5px; } /* ══════════════ 13 · قائمة المهام (Onboarding) ══════════════ */ .pro-steps { display: flex; flex-direction: column; gap: 4px; } .pro-step { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: var(--pro-r-sm); cursor: pointer; transition: background var(--pro-t); } .pro-step:hover { background: var(--pro-tint-1); } .pro-step-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--pro-tint-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; transition: all var(--pro-t); } .pro-step.done .pro-step-check { background: var(--status-success); border-color: var(--status-success); color: var(--text-on-brand); } .pro-step-check svg { width: 13px; height: 13px; } .pro-step-title { font-size: 13px; font-weight: 700; color: var(--text-primary); } .pro-step.done .pro-step-title { color: var(--text-muted); text-decoration: line-through; } .pro-step-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; } .pro-progress { height: 8px; border-radius: 99px; background: var(--pro-tint-1); overflow: hidden; } .pro-progress > i { display: block; height: 100%; border-radius: 99px; background: var(--pro-grad-line); transition: width .8s var(--pro-ease); } /* ══════════════ 14 · خريطة أفضل أوقات الإرسال ══════════════ */ .pro-heat-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; } .pro-heat { display: grid; grid-template-columns: auto repeat(24, 1fr); gap: 3px; direction: rtl; min-width: 430px; } .pro-heat-hlabel { font-size: 9px; color: var(--text-muted); text-align: center; font-variant-numeric: tabular-nums; } .pro-heat-dlabel { font-size: 10.5px; color: var(--text-secondary); font-weight: 700; padding-inline-end: 8px; display: flex; align-items: center; } .pro-heat-cell { aspect-ratio: 1; border-radius: 3px; background: var(--pro-tint-1); transition: transform .15s ease; min-height: 12px; } .pro-heat-cell:hover { transform: scale(1.35); box-shadow: var(--pro-ring); } .pro-heat-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); margin-top: 12px; justify-content: flex-end; } .pro-heat-legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; } /* ══════════════ 15 · جداول ولوائح صغيرة ══════════════ */ .pro-list { display: flex; flex-direction: column; } .pro-list-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--pro-hairline); } .pro-list-row:last-child { border-bottom: none; } .pro-list-main { flex: 1; min-width: 0; } .pro-list-title { font-size: 13px; font-weight: 700; color: var(--text-primary); } .pro-list-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; } .pro-list-value { font-size: 13.5px; font-weight: 800; color: var(--text-primary); direction: ltr; font-variant-numeric: tabular-nums; } .pro-rank { width: 26px; height: 26px; border-radius: 8px; background: var(--pro-tint-1); color: var(--primary); font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ══════════════ 16 · حالات فارغة وهياكل تحميل ══════════════ */ .pro-empty { text-align: center; padding: 38px 20px; color: var(--text-muted); } .pro-empty svg { width: 42px; height: 42px; margin-bottom: 12px; color: var(--pro-tint-3); } .pro-empty-title { font-size: 14px; font-weight: 700; color: var(--text-secondary); margin-bottom: 5px; } .pro-empty-sub { font-size: 12.5px; line-height: 1.6; max-width: 44ch; margin: 0 auto; } .pro-skeleton { border-radius: var(--pro-r-xs); background: linear-gradient(90deg, var(--pro-tint-1) 25%, var(--pro-tint-2) 50%, var(--pro-tint-1) 75%); background-size: 200% 100%; animation: proShimmer 1.4s infinite; } @keyframes proShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ══════════════ 17 · التبويبات الداخلية ══════════════ */ .pro-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-surface); border: 1px solid var(--pro-hairline); } .pro-tab { padding: 7px 15px; border: none; border-radius: 9px; background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); cursor: pointer; transition: all var(--pro-t); } .pro-tab:hover { color: var(--text-primary); } .pro-tab.active { background: var(--bg-card); color: var(--primary); box-shadow: var(--pro-sh-1); } /* ══════════════ 18 · تفاصيل أخيرة ══════════════ */ .pro-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-success); box-shadow: 0 0 0 0 var(--pro-ok-tint); animation: proPulse 2s infinite; flex-shrink: 0; } @keyframes proPulse { 0% { box-shadow: 0 0 0 0 var(--pro-ok-tint); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* شريط تمرير أنحف بلون العلامة بدل الشريط الرمادي الافتراضي. */ .pro-window-list::-webkit-scrollbar, .pro-cmdk-list::-webkit-scrollbar, .page-content::-webkit-scrollbar { width: 9px; height: 9px; } .pro-window-list::-webkit-scrollbar-thumb, .pro-cmdk-list::-webkit-scrollbar-thumb, .page-content::-webkit-scrollbar-thumb { background: var(--pro-tint-3); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; } .pro-window-list::-webkit-scrollbar-track, .pro-cmdk-list::-webkit-scrollbar-track, .page-content::-webkit-scrollbar-track { background: transparent; } /* ظهور متدرّج لعناصر الصفحة عند أول رسم. */ .pro-reveal { animation: proReveal .5s var(--pro-ease) both; } @keyframes proReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .pro-reveal:nth-of-type(2) { animation-delay: .05s; } .pro-reveal:nth-of-type(3) { animation-delay: .1s; } .pro-reveal:nth-of-type(4) { animation-delay: .15s; } /* احترام تفضيل تقليل الحركة: كل ما سبق زينة، ولا شيء منه يحمل معنى. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .welcome-banner::after { animation: none; } } @media (max-width: 720px) { .welcome-banner { padding: 24px 20px; border-radius: var(--pro-r-lg); } .welcome-banner::after { display: none; } .pro-panel-body, .section-card-body { padding: 16px; } .stat-value, .pro-kpi-value { font-size: 25px; } /* ── الهيدر على الشاشات الضيقة ── .top-header صفّ مرن لا يلتفّ، و.header-actions بداخله يحتاج نحو 392px بينما المتاح بعد شريط الأيقونات (72px) لا يتجاوز 318px على هاتف بعرض 390px. النتيجة أن الهيدر كان يمدّ .main-content إلى 498px فتنزلق **كل** صفحات اللوحة أفقياً — سلوك سابق لهذه الطبقة وموجود على كل الصفحات، وتُضيف إليه فجوة الهيدر أعلاه 16px. العلاج بلا إخفاء أي عنصر وظيفي: • العنوان يُسمح له بالانكماش مع قصّ بثلاث نقاط بدل فرض عرضه. • شريط الأدوات يمرّر أفقياً داخل نفسه — كل زر يبقى قابلاً للوصول. • شارة الخطة وحدها تُخفى: نص ثابت في الترميز لا يكتب فيه أي كود ولا يُنقر، فإخفاؤه لا يُفقد المستخدم شيئاً. */ .top-header { gap: 10px; padding-inline: 12px; } .top-header > div:first-child { min-width: 0; flex: 0 1 auto; } .header-title, .header-subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-actions { min-width: 0; flex: 1 1 auto; justify-content: flex-end; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .header-actions::-webkit-scrollbar { display: none; } .header-actions > * { flex-shrink: 0; } /* المحدِّد مطوّل عن قصد: dashboard.html يحمل