/* ============================================================ admin-theme.css إعادة تصميم بصري بحت للوحة التحكم (admin.html) فقط. ------------------------------------------------------------- هذا الملف بيُحمَّل بعد styles.css ويعمل Override على نفس أسماء الـ classes والـ IDs الموجودة بالفعل في admin.html — من غير ما يتغيّر أي اسم، أي نص، أو أي سطر JavaScript. بمعنى تاني: نفس العناصر بالظبط، بس بشكل احترافي وأنيق ومتجاوب بالكامل مع الموبايل واللابتوب، مع وضع ليلي مريح بتدرجات Slate / Zinc بدل الأسود الفاقع. ============================================================ */ /* --------------------------------------------------------- 1) متغيرات التصميم (Design Tokens) --------------------------------------------------------- */ :root{ /* نفس هوية المتجر (تيل + ذهبي) لكن بضبط أدق للوحة تحكم */ --a-ink:#1b2622; --a-ink-soft:#4b5a54; --a-paper:#f4f6f5; --a-panel:#ffffff; --a-panel-soft:#f8faf9; --a-teal:#0e6b5c; --a-teal-dark:#0a5347; --a-teal-deep:#062420; --a-teal-soft:#e7f2ef; --a-gold:#c9973b; --a-gold-light:#e8c77a; --a-line:#e3e7e5; --a-muted:#77837d; --a-radius-sm:10px; --a-radius:16px; --a-radius-lg:20px; --a-shadow:0 1px 2px rgba(16,24,22,.04), 0 12px 28px -14px rgba(16,24,22,.14); --a-shadow-lg:0 20px 48px -16px rgba(16,24,22,.22); --a-sky:#2f7dd1; --a-amber:#b6791a; --a-rose:#c0392b; --a-green:#1f8a5f; } /* الوضع الليلي — درجات رمادي مريحة فقط (أبيض/أسود/رمادي)، من غير أي لون للبراند (لا تيل ولا دهبي). سايبين لون دلالي خفيف فقط لحالات النجاح/ التحذير/الخطأ (--a-green/--a-amber/--a-rose/--a-sky) لأنها مؤشرات حالة مش ألوان هوية، ومكتومة أصلًا عشان تفضل مريحة على الخلفية الغامقة. */ html.dark-mode{ --a-ink:#e7e7ea; --a-ink-soft:#adafb5; --a-paper:#17181b; --a-panel:#212226; --a-panel-soft:#26282d; /* --a-teal/--a-gold وكل مشتقاتهم بقوا رمادي بدل الدهبي — نفس المتغيرات لسه مستخدمة في كل مكان (نصوص، حدود، عناوين) عشان محدش يتغيّر غير القيم */ --a-teal:#b7b9c0; --a-teal-dark:#cfd1d6; --a-teal-deep:#ececed; --a-teal-soft:rgba(183,185,192,.12); --a-gold:#aeb0b6; --a-gold-light:#d6d7db; --a-line:#34363c; --a-muted:#9a9da5; --a-shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 32px -14px rgba(0,0,0,.55); --a-shadow-lg:0 24px 56px -18px rgba(0,0,0,.65); /* خلفية موحّدة للأزرار الرئيسية (رمادي غامق يتباين مع نص أبيض) */ --a-btn-dark:#37393f; --a-btn-dark-hover:#46484f; --a-sky:#8b9bab; --a-amber:#c9ab7a; --a-rose:#c98f88; /* --a-green سايبه أخضر مكتوم عمدًا — ده لون "نجاح/تم التسليم" الدلالي، مش لون البراند */ --a-green:#7fb89a; /* ===== إصلاح: الوضع الليلي كان مش بيغيّر إلا العناصر اللي بتستخدم متغيرات --a-* الجديدة بس. لكن admin.html وadmin-theme.css نفسه لسه فيهم عناصر كتير (زي خلفية والـ inputs وbtn-secondary القديمة) بتستخدم أسماء المتغيرات الأصلية من styles.css (--paper, --panel, --ink, --muted, --line, --teal...) اللي متعرّفتش تاني هنا أبدًا — فكانت فاضلة بلونها الفاتح الأصلي حتى بعد تفعيل الوضع الليلي. الحل: بنعكس نفس قيم --a-* على أسماء المتغيرات القديمة كمان، عشان أي عنصر يستخدم أي مجموعة من الاسمين ياخد اللون الغامق الصح. */ --paper: var(--a-paper); --panel: var(--a-panel); --ink: var(--a-ink); --muted: var(--a-muted); --line: var(--a-line); --teal: var(--a-teal); --teal-dark: var(--a-teal-dark); --teal-deep: var(--a-teal-deep); --gold: var(--a-gold); --gold-light: var(--a-gold-light); } /* أي خلفية كانت بتاخد --a-teal-deep/--a-teal/--a-gold كخلفية لزرار بنص أبيض — دلوقتي المتغيرات دي بقت فاتحة (للنصوص)، فلازم نثبّت خلفيات الأزرار والعناصر النشطة بلون رمادي غامق واضح بدل ما نعتمد على المتغيرات نفسها هنا. */ html.dark-mode .admin-login::before{ background:linear-gradient(90deg, var(--a-btn-dark), var(--a-gold-light)); } html.dark-mode .admin-login button{ background:linear-gradient(120deg, var(--a-btn-dark), var(--a-btn-dark-hover)); } html.dark-mode .btn-primary{ background:linear-gradient(120deg, var(--a-btn-dark), var(--a-btn-dark-hover)); } html.dark-mode .admin-topbar h1::before{ background:linear-gradient(135deg, var(--a-gold-light), var(--a-gold)); } html.dark-mode .editor-actions .save-btn{ background:linear-gradient(120deg, var(--a-btn-dark), var(--a-btn-dark-hover)); } html.dark-mode .chart-toggle button.active{ background:var(--a-btn-dark); color:#fff; border-color:var(--a-btn-dark); } html.dark-mode .status-step.active{ background:var(--a-btn-dark); color:#fff; } html.dark-mode .app-toast{ background:var(--a-btn-dark); } html.dark-mode .app-toast.error{ background:#6b3c34; } html.dark-mode .a-switch input:checked ~ .a-switch-track{ background:var(--a-btn-dark-hover); } html.dark-mode .tab-badge, html.dark-mode .vendorsBadge, html.dark-mode .new-vendor-badge{ color:#1a1b1e; } html.dark-mode .vendor-tag-yellow{ background:rgba(183,185,192,.14); color:var(--a-gold-light); } html.dark-mode .order-row.suspicious{ background:rgba(183,185,192,.07); border-color:var(--a-line); } html.dark-mode .suspicious-badge{ background:rgba(183,185,192,.14); color:var(--a-ink-soft); } html.dark-mode .btn-danger{ background:rgba(201,143,136,.14); } /* أشرطة الإحصائيات الملونة أعلى كل كارت — بدرجات رمادي متفاوتة بدل الألوان */ html.dark-mode .stat-card::before{ background:linear-gradient(90deg, #6a6c73, #9a9da5); opacity:.7; } html.dark-mode .stat-card:nth-child(6n+2)::before{ background:linear-gradient(90deg, #5f6167, #8b8e96); } html.dark-mode .stat-card:nth-child(6n+3)::before{ background:linear-gradient(90deg, #75777e, #a4a6ac); } html.dark-mode .stat-card:nth-child(6n+4)::before{ background:linear-gradient(90deg, #55575d, #83858c); } html.dark-mode .stat-card:nth-child(6n+5)::before{ background:linear-gradient(90deg, #6a6c73, #96999f); } html.dark-mode .stat-card:nth-child(6n+6)::before{ background:linear-gradient(90deg, #4d4f55, #7a7c83); } /* الحاوية العامة للوحة التحكم فقط — بدون التأثير على باقي صفحات الموقع */ #loginScreen, #dashboard{ font-family:'IBM Plex Sans Arabic', sans-serif; color:var(--a-ink); background:var(--a-paper); transition:background .25s ease, color .25s ease; } #dashboard{ min-height:100vh; } /* عناوين لوحة التحكم بخط Cairo مثل باقي الموقع */ #loginScreen h2, #dashboard h1, #dashboard h3, #dashboard h4, .settings-card h3, .editor-box h3{ font-family:'Cairo', sans-serif; } /* --------------------------------------------------------- 2) الحاوية الرئيسية — مساحة أوسع على اللابتوب --------------------------------------------------------- */ .admin-wrap{ max-width:1360px; margin:0 auto; padding:20px 18px 60px; } @media(min-width:900px){ .admin-wrap{ padding:28px 32px 70px; } } /* --------------------------------------------------------- 3) شاشة تسجيل الدخول المحسّنة والاحترافية --------------------------------------------------------- */ .admin-login-wrapper { min-height: 100vh; display: flex !important; align-items: center; justify-content: center; padding: 32px 16px; background: radial-gradient(circle at 50% 15%, color-mix(in srgb, var(--a-teal) 14%, transparent), transparent 65%), radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--a-gold-light, #f59e0b) 10%, transparent), transparent 50%), var(--a-paper); position: relative; } .admin-login-wrapper[style*="display: none"] { display: none !important; } .admin-login { width: 100%; max-width: 450px; margin: 0 auto; background: var(--a-panel); border: 1px solid color-mix(in srgb, var(--a-line) 85%, var(--a-teal)); border-radius: 24px; padding: 40px 34px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.05); position: relative; overflow: hidden; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease; } html.dark-mode .admin-login { background: rgba(28, 29, 34, 0.94); backdrop-filter: blur(16px); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08); } .admin-login::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 5px; background: linear-gradient(90deg, #0d9488, #14b8a6, #f59e0b, #0d9488); background-size: 200% 100%; animation: loginBarShimmer 4s infinite linear; } @keyframes loginBarShimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } /* الشعار والترويسة */ .login-brand { text-align: center; margin-bottom: 26px; } .login-icon-ring { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--a-teal) 22%, transparent), color-mix(in srgb, var(--a-teal) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--a-teal) 38%, transparent); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 24px -6px color-mix(in srgb, var(--a-teal) 28%, transparent); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .login-icon-ring.vendor-ring { background: linear-gradient(135deg, rgba(217, 119, 6, 0.2), rgba(217, 119, 6, 0.05)); border-color: rgba(217, 119, 6, 0.38); box-shadow: 0 12px 24px -6px rgba(217, 119, 6, 0.22); } .admin-login:hover .login-icon-ring { transform: scale(1.08) rotate(-3deg); } .login-icon { font-size: 2.1rem; line-height: 1; } .admin-login h2 { font-size: 1.45rem; font-weight: 800; margin: 0 0 6px; color: var(--a-ink); letter-spacing: -0.02em; } .login-subtitle { font-size: 0.88rem; color: var(--a-muted); margin: 0; line-height: 1.5; } /* محول نوع الحساب لوحة البائع */ .login-type-switch { display: flex; gap: 6px; background: var(--a-panel-soft); border: 1px solid var(--a-line); border-radius: 14px; padding: 5px; margin-bottom: 22px; } .login-type-btn { flex: 1; padding: 11px 12px; border: none; border-radius: 10px; background: transparent; color: var(--a-muted); font-family: 'Cairo', 'IBM Plex Sans Arabic', sans-serif; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); display: flex; align-items: center; justify-content: center; gap: 6px; } .login-type-btn.active { background: var(--a-panel); color: var(--a-teal-dark); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } html.dark-mode .login-type-btn.active { background: var(--a-teal-dark, #0d9488); color: #ffffff; box-shadow: 0 4px 14px rgba(13, 148, 136, 0.4); } /* حقول الإدخال */ .input-group-custom { margin-bottom: 18px; text-align: right; } .input-label { display: block; font-size: 0.84rem; font-weight: 700; color: var(--a-ink); margin-bottom: 6px; } .input-inner { position: relative; display: flex; align-items: center; } .input-icon { position: absolute; right: 14px; font-size: 1.1rem; color: var(--a-muted); pointer-events: none; z-index: 2; } .input-inner input { width: 100%; padding: 13px 44px 13px 44px; border: 1px solid var(--a-line); border-radius: 12px; font-family: inherit; font-size: 0.95rem; background: var(--a-panel-soft); color: var(--a-ink); transition: all 0.2s ease; margin-bottom: 0 !important; } .input-inner input:focus { outline: none; border-color: var(--a-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-teal) 20%, transparent); background: var(--a-panel); } .toggle-password-btn { position: absolute; left: 10px; background: none; border: none; padding: 6px 8px; cursor: pointer; font-size: 1.05rem; color: var(--a-muted); border-radius: 6px; transition: background 0.15s ease, opacity 0.15s ease; line-height: 1; } .toggle-password-btn:hover { background: color-mix(in srgb, var(--a-line) 50%, transparent); color: var(--a-ink); } /* زر الدخول الرئيسي */ .login-submit-btn, .admin-login > button#loginBtn { width: 100%; padding: 14px 20px; border: none; border-radius: 12px; background: linear-gradient(135deg, var(--a-teal-deep, #005959), var(--a-teal, #008080)); color: #ffffff; font-weight: 800; font-family: 'Cairo', sans-serif; font-size: 1.02rem; cursor: pointer; box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--a-teal) 45%, transparent); transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; } .login-submit-btn:hover, .admin-login > button#loginBtn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -8px color-mix(in srgb, var(--a-teal) 55%, transparent); background: linear-gradient(135deg, #004d4d, #008080); } .login-submit-btn:active, .admin-login > button#loginBtn:active { transform: translateY(0) scale(0.99); } .btn-arrow { font-size: 1.1rem; transition: transform 0.2s ease; } .login-submit-btn:hover .btn-arrow { transform: translateX(-4px); } /* رسالة الخطأ */ .admin-login .err { color: var(--a-rose, #dc2626); background: color-mix(in srgb, var(--a-rose, #dc2626) 10%, transparent); border: 1px solid color-mix(in srgb, var(--a-rose, #dc2626) 25%, transparent); padding: 11px 14px; border-radius: 12px; font-size: 0.85rem; font-weight: 700; margin-top: 16px; text-align: center; } /* دعوة تسجيل بائع جديد */ .vendor-signup-cta { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--a-line); text-align: center; font-size: 0.88rem; color: var(--a-muted); display: flex; flex-direction: column; align-items: center; gap: 6px; } .vendor-signup-cta button { background: none; border: none; color: var(--a-teal-dark, #008080); font-weight: 800; cursor: pointer; font-family: inherit; font-size: 0.9rem; transition: color 0.15s ease, transform 0.15s ease; } .vendor-signup-cta button:hover { color: #0d9488; transform: scale(1.02); text-decoration: underline; } /* روابط أسفل الكارت */ .login-footer-links { margin-top: 20px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.82rem; } .login-footer-link { color: var(--a-muted); text-decoration: none; transition: color 0.15s ease; } .login-footer-link:hover { color: var(--a-teal-dark); text-decoration: underline; } .dot-sep { color: var(--a-muted); opacity: 0.5; } /* --------------------------------------------------------- 4) شريط الحفظ العلوي (Save Bar) --------------------------------------------------------- */ .admin-save-bar{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--a-paper) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:12px 18px; margin:0 -18px 20px; display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--a-line); } @media(min-width:900px){ .admin-save-bar{ margin:0 -32px 24px; padding:14px 32px; } } .save-status{ font-size:.85rem; color:var(--a-muted); align-self:center; } .save-status.saved{ color:var(--a-teal-dark); font-weight:700; } /* --------------------------------------------------------- 5) شريط العنوان والإجراءات (Topbar) --------------------------------------------------------- */ .admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; flex-wrap:wrap; gap:12px; } .admin-topbar h1{ font-size:clamp(1.2rem, 2.4vw, 1.55rem); margin:0; color:var(--a-teal-deep); font-weight:800; display:flex; align-items:center; gap:10px; } html.dark-mode .admin-topbar h1{ color:var(--a-ink); } .admin-topbar h1::before{ content:''; width:8px; height:8px; border-radius:2px; background:linear-gradient(135deg, var(--a-gold-light), var(--a-gold)); transform:rotate(45deg); flex-shrink:0; } .admin-actions{ display:flex; gap:9px; flex-wrap:wrap; } /* --------------------------------------------------------- 6) الأزرار --------------------------------------------------------- */ .btn-primary, .btn-secondary, .btn-danger{ border-radius:10px; font-family:'Cairo', sans-serif; font-weight:700; cursor:pointer; font-size:.86rem; transition:transform .12s ease, box-shadow .18s ease, background .18s ease; -webkit-tap-highlight-color:transparent; } .btn-primary{ background:linear-gradient(120deg, var(--a-teal-deep), var(--a-teal)); color:#fff; border:none; padding:10px 18px; box-shadow:0 10px 22px -8px rgba(6,36,32,.4); } .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 26px -8px rgba(6,36,32,.45); } .btn-secondary{ background:var(--a-panel); color:var(--a-teal-dark); border:1px solid var(--a-line); padding:10px 18px; } .btn-secondary:hover{ background:var(--a-panel-soft); border-color:var(--a-teal); } .btn-danger{ background:#fbeae4; color:var(--a-rose); border:none; padding:8px 14px; font-size:.8rem; } html.dark-mode .btn-danger{ background:rgba(224,104,90,.14); } .btn-danger:hover{ filter:brightness(.96); } .btn-primary:active, .btn-secondary:active, .btn-danger:active{ transform:scale(.97); } /* --------------------------------------------------------- 7) بطاقات الإحصائيات السريعة (Stats Cards) --------------------------------------------------------- */ .stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:26px; } @media(min-width:640px){ .stats-grid{ grid-template-columns:repeat(3,1fr); gap:14px; } } @media(min-width:1100px){ .stats-grid{ grid-template-columns:repeat(6,1fr); } } .stat-card{ background:var(--a-panel); border:1px solid var(--a-line); border-radius:var(--a-radius); padding:18px 16px; text-align:center; position:relative; overflow:hidden; box-shadow:var(--a-shadow); transition:transform .2s ease, box-shadow .2s ease; } .stat-card:hover{ transform:translateY(-3px); box-shadow:var(--a-shadow-lg); } .stat-card::before{ content:''; position:absolute; top:0; right:0; left:0; height:3px; background:linear-gradient(90deg, var(--a-teal), var(--a-gold-light)); opacity:.85; } /* تلوين خفيف متبادل للبطاقات عشان تبقى مقروءة بصريًا بسرعة */ .stat-card:nth-child(6n+2)::before{ background:linear-gradient(90deg, var(--a-sky), #7fb8ec); } .stat-card:nth-child(6n+3)::before{ background:linear-gradient(90deg, var(--a-amber), var(--a-gold-light)); } .stat-card:nth-child(6n+4)::before{ background:linear-gradient(90deg, #7a5fd1, #b39ce8); } .stat-card:nth-child(6n+5)::before{ background:linear-gradient(90deg, var(--a-green), #7fd6ae); } .stat-card:nth-child(6n+6)::before{ background:linear-gradient(90deg, var(--a-rose), #ec9a8f); } .stat-value{ font-family:'Almarai', sans-serif; font-weight:800; font-size:clamp(1.15rem, 2.2vw, 1.5rem); color:var(--a-teal-dark); letter-spacing:-.01em; } .stat-label{ font-size:.78rem; color:var(--a-muted); margin-top:5px; } /* --------------------------------------------------------- 7ب) كروت توزيع حالات الطلبات (طلبات جديدة / قيد مراجعة / تم الشحن / تم التوصيل / ملغى / مرتجع) — نفس فكرة stat-card بس بألوان دلالية ثابتة لكل حالة (مش تبادل لوني عشوائي)، وأيقونة بدل ما تبقى أرقام مجردة بس. --------------------------------------------------------- */ .status-stats-title{ margin-top:6px; } .status-stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:26px; } @media(min-width:640px){ .status-stats-grid{ grid-template-columns:repeat(3,1fr); gap:14px; } } @media(min-width:1100px){ .status-stats-grid{ grid-template-columns:repeat(6,1fr); } } .status-stat-card{ display:flex; align-items:center; gap:12px; background:var(--a-panel); border:1px solid var(--a-line); border-inline-start:4px solid var(--st-color, var(--a-teal)); border-radius:var(--a-radius); padding:14px 16px; box-shadow:var(--a-shadow); transition:transform .2s ease, box-shadow .2s ease; } .status-stat-card:hover{ transform:translateY(-3px); box-shadow:var(--a-shadow-lg); } .status-stat-icon{ flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.15rem; line-height:1; background:color-mix(in srgb, var(--st-color, var(--a-teal)) 14%, transparent); } .status-stat-info{ min-width:0; } .status-stat-value{ font-family:'Almarai', sans-serif; font-weight:800; font-size:clamp(1.1rem, 2.1vw, 1.4rem); color:var(--st-color, var(--a-teal-dark)); letter-spacing:-.01em; } .status-stat-label{ font-size:.78rem; color:var(--a-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .status-stat-card.st-new{ --st-color:var(--a-sky); } .status-stat-card.st-processing{ --st-color:var(--a-amber); } .status-stat-card.st-shipped{ --st-color:#7a5fd1; } .status-stat-card.st-delivered{ --st-color:var(--a-green); } .status-stat-card.st-cancelled{ --st-color:var(--a-rose); } .status-stat-card.st-returned{ --st-color:#77837d; } @media(max-width:480px){ .status-stats-grid{ gap:8px; } .status-stat-card{ padding:10px 12px; gap:8px; } .status-stat-icon{ width:32px; height:32px; font-size:1rem; } .status-stat-value{ font-size:1.05rem; } .status-stat-label{ font-size:.7rem; } } /* --------------------------------------------------------- 8) تبويبات لوحة التحكم — قابلة للتمرير الأفقي على الموبايل بدون أي أثر على باقي الصفحة (Scroll داخلي فقط) --------------------------------------------------------- */ .admin-tabs{ display:flex; gap:6px; margin-bottom:22px; border-bottom:1px solid var(--a-line); overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:1px; } .admin-tabs::-webkit-scrollbar{ display:none; } .tab-btn{ background:none; border:none; white-space:nowrap; padding:11px 16px; font-family:'Cairo', sans-serif; font-weight:700; color:var(--a-muted); cursor:pointer; border-bottom:2.5px solid transparent; font-size:.88rem; flex-shrink:0; transition:color .18s ease, border-color .18s ease; display:flex; align-items:center; } .tab-btn:hover{ color:var(--a-teal-dark); } .tab-btn.active{ color:var(--a-teal-dark); border-bottom-color:var(--a-teal); } .tab-badge, .vendorsBadge{ background:linear-gradient(120deg, var(--a-gold-light), var(--a-gold)); color:#241a04; font-size:.68rem; font-weight:800; border-radius:999px; padding:2px 7px; margin-left:6px; } /* --------------------------------------------------------- 9) بطاقات الإعدادات وشبكات الحقول --------------------------------------------------------- */ .settings-card{ background:var(--a-panel); border:1px solid var(--a-line); border-radius:var(--a-radius); padding:22px; margin-bottom:26px; box-shadow:var(--a-shadow); } .settings-card h3{ margin-top:0; font-size:1.05rem; color:var(--a-teal-deep); } html.dark-mode .settings-card h3{ color:var(--a-ink); } .settings-grid{ display:grid; grid-template-columns:1fr; gap:14px; } @media(min-width:640px){ .settings-grid{ grid-template-columns:1fr 1fr; } } .settings-grid .field label{ display:block; font-size:.83rem; color:var(--a-muted); margin-bottom:6px; } /* حقول الإدخال بشكل عام داخل لوحة التحكم */ #dashboard input[type="text"], #dashboard input[type="number"], #dashboard input[type="tel"], #dashboard input[type="email"], #dashboard input[type="password"], #dashboard input[type="date"], #dashboard select, #dashboard textarea{ padding:10px 12px; border:1px solid var(--a-line); border-radius:9px; font-family:inherit; font-size:.9rem; background:var(--a-panel-soft); color:var(--a-ink); transition:border-color .18s ease, box-shadow .18s ease; } #dashboard input:focus, #dashboard select:focus, #dashboard textarea:focus{ outline:none; border-color:var(--a-teal); box-shadow:0 0 0 3px var(--a-teal-soft); } #dashboard input[type="color"]{ border:1px solid var(--a-line); border-radius:9px; background:var(--a-panel-soft); } .feature-toggles{ display:grid; grid-template-columns:1fr; gap:8px; } @media(min-width:640px){ .feature-toggles{ grid-template-columns:1fr 1fr; } } .feature-toggle-item{ display:flex; align-items:center; gap:8px; font-size:.87rem; background:var(--a-panel-soft); border:1px solid var(--a-line); padding:10px 12px; border-radius:10px; cursor:pointer; transition:border-color .15s ease; } .feature-toggle-item:hover{ border-color:var(--a-teal); } /* --------------------------------------------------------- 10) قائمة المنتجات --------------------------------------------------------- */ .products-header{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:16px; } .products-header input{ min-width:220px; flex:1; max-width:320px; } .admin-products{ display:grid; grid-template-columns:1fr; gap:12px; } .admin-product-row{ background:var(--a-panel); border:1px solid var(--a-line); border-radius:var(--a-radius); padding:14px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; box-shadow:var(--a-shadow); transition:box-shadow .2s ease, transform .2s ease; } .admin-product-row:hover{ box-shadow:var(--a-shadow-lg); transform:translateY(-1px); } .admin-product-row.is-hidden{ opacity:.55; } .admin-product-row .thumb{ width:60px; height:60px; border-radius:12px; overflow:hidden; background:var(--a-panel-soft); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.68rem; color:var(--a-muted); text-align:center; } .admin-product-row .info .name{ font-weight:700; color:var(--a-ink); } .admin-product-row .info .meta{ font-size:.8rem; color:var(--a-muted); } .admin-product-row .row-actions{ display:flex; gap:7px; flex-wrap:wrap; } .hidden-tag{ background:var(--a-line); color:var(--a-muted); font-size:.68rem; padding:2px 8px; border-radius:999px; } .stock-tag{ font-size:.76rem; color:var(--a-muted); } .stock-tag.low{ color:var(--a-rose); font-weight:700; } .vendor-tag-green{ background:var(--a-teal-soft); color:var(--a-teal-dark); font-size:.68rem; padding:2px 8px; border-radius:999px; } .vendor-tag-yellow{ background:#fbf0d9; color:#8a6412; font-size:.68rem; padding:2px 8px; border-radius:999px; } html.dark-mode .vendor-tag-yellow{ background:rgba(224,168,64,.15); color:var(--a-gold-light); } .new-vendor-badge{ background:linear-gradient(120deg,var(--a-gold-light),var(--a-gold)); color:#3a2a05; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:999px; } /* --------------------------------------------------------- 11) نافذة تعديل المنتج (Modal) --------------------------------------------------------- */ .editor-overlay{ background:rgba(10,20,17,.6); backdrop-filter:blur(3px); } .editor-box{ background:var(--a-panel); border-radius:var(--a-radius-lg); padding:26px; max-width:640px; width:100%; margin:24px auto; box-shadow:var(--a-shadow-lg); animation:aFadeUp .25s ease; } @keyframes aFadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} } .editor-box h3{ margin-top:0; color:var(--a-teal-deep); } html.dark-mode .editor-box h3{ color:var(--a-ink); } .editor-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media(max-width:480px){ .editor-row2{ grid-template-columns:1fr; } } .image-upload-zone{ border:1.5px dashed var(--a-line); border-radius:12px; padding:18px; text-align:center; margin-bottom:14px; cursor:pointer; color:var(--a-muted); font-size:.87rem; transition:border-color .18s ease, background .18s ease; } .image-upload-zone:hover{ border-color:var(--a-teal); background:var(--a-teal-soft); } .image-preview{ width:68px; height:68px; border-radius:11px; overflow:hidden; background:var(--a-panel-soft); } .editor-actions{ display:flex; gap:10px; margin-top:22px; } .editor-actions button{ flex:1; padding:12px; border-radius:10px; font-weight:700; font-family:'Cairo', sans-serif; cursor:pointer; border:none; } .editor-actions .save-btn{ background:linear-gradient(120deg, var(--a-teal-deep), var(--a-teal)); color:#fff; } .editor-actions .cancel-btn{ background:var(--a-panel-soft); color:var(--a-ink); border:1px solid var(--a-line); } /* --------------------------------------------------------- 12) الرسم البياني وبطاقات الشارت --------------------------------------------------------- */ .chart-card{ background:var(--a-panel); border:1px solid var(--a-line); border-radius:var(--a-radius); padding:20px; margin-bottom:24px; box-shadow:var(--a-shadow); } .chart-card-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px; } .chart-card-header h3{ color:var(--a-teal-deep); } html.dark-mode .chart-card-header h3{ color:var(--a-ink); } .chart-toggle{ display:flex; gap:6px; } .chart-toggle button{ background:var(--a-panel-soft); border:1px solid var(--a-line); border-radius:9px; padding:6px 14px; font-size:.8rem; cursor:pointer; color:var(--a-muted); transition:.15s ease; } .chart-toggle button.active{ background:var(--a-teal); color:#fff; border-color:var(--a-teal); } /* --------------------------------------------------------- 13) شريط أدوات الطلبات + الإجراءات الجماعية --------------------------------------------------------- */ .orders-toolbar{ display:flex; gap:9px; flex-wrap:wrap; margin-bottom:16px; align-items:center; } .orders-toolbar input{ min-width:220px; flex:1; max-width:320px; } .orders-toolbar .export-btn{ margin-right:auto; } .bulk-action-bar{ align-items:center; gap:12px; flex-wrap:wrap; background:var(--a-teal-soft); border:1px solid var(--a-teal); border-radius:12px; padding:12px 16px; margin-bottom:14px; } /* --------------------------------------------------------- 14) قائمة الطلبات — تتحول تلقائيًا لبطاقات مرتبة على الموبايل --------------------------------------------------------- */ .admin-orders{ display:flex; flex-direction:column; gap:10px; } .order-row{ background:var(--a-panel); border:1px solid var(--a-line); border-radius:var(--a-radius); padding:15px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; box-shadow:var(--a-shadow); transition:box-shadow .2s ease, border-color .2s ease; } .order-row:hover{ box-shadow:var(--a-shadow-lg); } .order-row.suspicious{ border-color:var(--a-gold); background:#fdf6e8; } html.dark-mode .order-row.suspicious{ background:rgba(224,168,64,.08); } .order-main{ display:flex; gap:12px; align-items:flex-start; flex:1; min-width:220px; } .order-num{ font-family:'Almarai', sans-serif; font-weight:800; color:var(--a-teal-dark); white-space:nowrap; } .order-details{ font-size:.87rem; color:var(--a-ink); } .order-meta{ font-size:.77rem; color:var(--a-muted); } .suspicious-badge{ background:#fdf0d5; color:var(--a-amber); font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; } html.dark-mode .suspicious-badge{ background:rgba(224,168,64,.15); } @media(max-width:640px){ .order-row{ align-items:flex-start; row-gap:10px; } .order-row .order-select-cb{ order:0; margin-top:6px; width:auto; flex:0 0 auto; } .order-row .order-main{ order:1; flex:1 1 70%; min-width:0; } .order-row .quick-actions{ order:2; flex:1 1 100%; padding-top:8px; border-top:1px dashed var(--a-line); } .order-row .order-status-select{ order:3; flex:1 1 auto; min-width:110px; } .order-row .edit-order-btn{ order:4; flex:1 1 auto; } .order-row .delete-order-btn{ order:5; flex:0 0 auto; } } /* --------------------------------------------------------- 15) سجل النشاط --------------------------------------------------------- */ .activity-row{ background:var(--a-panel); border:1px solid var(--a-line); border-radius:11px; padding:11px 14px; font-size:.84rem; margin-bottom:8px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; box-shadow:var(--a-shadow); } .activity-row .a-time{ color:var(--a-muted); font-size:.77rem; white-space:nowrap; } /* --------------------------------------------------------- 16) الترقيم (Pagination) --------------------------------------------------------- */ .pagination-bar{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:22px; flex-wrap:wrap; } .pagination-bar button:not(.btn-primary):not(.btn-secondary){ background:var(--a-panel); border:1px solid var(--a-line); border-radius:9px; width:34px; height:34px; cursor:pointer; color:var(--a-ink); } .pagination-bar button:disabled{ opacity:.4; cursor:not-allowed; } /* --------------------------------------------------------- 17) عناصر متفرقة: جداول عامة، صلاحيات، تواصل، تقارير --------------------------------------------------------- */ #dashboard table{ width:100%; border-collapse:collapse; font-size:.86rem; } #dashboard table th, #dashboard table td{ padding:9px 10px; border-bottom:1px solid var(--a-line); text-align:right; } #dashboard table th{ color:var(--a-muted); font-weight:700; font-size:.78rem; } .permission-matrix{ border:1px solid var(--a-line); border-radius:12px; overflow:hidden; } .perm-row{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; align-items:center; padding:10px 14px; border-bottom:1px solid var(--a-line); font-size:.84rem; } .perm-row.perm-header{ background:var(--a-panel-soft); font-weight:700; color:var(--a-muted); font-size:.76rem; } @media(max-width:480px){ .perm-row{ grid-template-columns:1.2fr 1fr 1fr 1fr; font-size:.76rem; padding:9px 8px; } } .contact-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--a-panel-soft); border:1px solid var(--a-line); border-radius:11px; padding:11px 12px; } .contact-row .contact-label{ font-size:.84rem; color:var(--a-muted); width:90px; flex-shrink:0; } /* --------------------------------------------------------- تبويب "الصفحة الرئيسية" — إظهار/إخفاء وترتيب الأقسام --------------------------------------------------------- */ .hp-section-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--a-panel-soft); border:1px solid var(--a-line); border-radius:11px; padding:11px 12px; } .hp-section-toggle{ display:flex; align-items:center; gap:8px; font-size:.87rem; font-weight:700; color:var(--a-ink); cursor:pointer; min-width:150px; } .hp-section-toggle input[disabled] ~ span{ color:var(--a-muted); font-weight:400; } .hp-section-note{ font-size:.78rem; color:var(--a-muted); flex:1; min-width:200px; } .hp-section-move{ display:flex; gap:6px; margin-inline-start:auto; } .hp-move-btn{ width:32px; height:32px; padding:0; display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1; } .hp-move-btn:disabled{ opacity:.35; cursor:not-allowed; } .related-picker{ max-height:170px; overflow-y:auto; border:1px solid var(--a-line); border-radius:10px; padding:8px 12px; } .quick-actions{ display:flex; gap:6px; } .quick-action-btn{ width:32px; height:32px; border-radius:9px; background:var(--a-panel-soft); border:1px solid var(--a-line); display:flex; align-items:center; justify-content:center; font-size:.92rem; cursor:pointer; text-decoration:none; color:var(--a-ink); transition:background .15s ease; } .quick-action-btn:hover{ background:var(--a-line); } .phone-link{ color:var(--a-teal-dark); font-weight:700; } .notes-badge{ background:var(--a-teal-soft); color:var(--a-teal-dark); font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:999px; } .report-bar-row{ display:flex; align-items:center; gap:12px; padding:8px 0; font-size:.84rem; flex-wrap:wrap; } .report-label{ width:130px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .report-bar-track{ flex:1; min-width:100px; background:var(--a-panel-soft); border-radius:7px; height:15px; overflow:hidden; } .report-bar-fill{ background:var(--a-teal); height:100%; border-radius:7px; transition:width .35s ease; } .report-bar-fill.high{ background:var(--a-rose); } .report-value{ width:90px; flex-shrink:0; text-align:left; color:var(--a-muted); font-size:.77rem; } /* --------------------------------------------------------- 18) استجابة تفاعلية عامة + شاشات صغيرة جدًا --------------------------------------------------------- */ #dashboard button{ -webkit-tap-highlight-color:transparent; } #dashboard a:focus-visible, #dashboard button:focus-visible, #dashboard input:focus-visible, #dashboard select:focus-visible, #dashboard textarea:focus-visible{ outline:2px solid var(--a-teal); outline-offset:2px; border-radius:5px; } @media(max-width:480px){ .admin-topbar{ flex-direction:column; align-items:flex-start; } .admin-actions{ width:100%; } .admin-actions .btn-primary, .admin-actions .btn-secondary{ flex:1; text-align:center; } } @media (prefers-reduced-motion: reduce){ #dashboard *, #dashboard *::before, #dashboard *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } /* ============================================================ 19) تحسينات إضافية مخصّصة للموبايل — شكل أقرب لتطبيقات الجوال الاحترافية (App-like)، من غير أي تغيير في الـ HTML أو الـ JS. ============================================================ */ /* ---- عناصر الشريط الجانبي: مخفية افتراضيًا على اللابتوب/التابلت ---- */ .sidebar-toggle-btn, .sidebar-close-btn, .tabs-sidebar-header, .tabs-group-label{ display:none; } .sidebar-backdrop{ display:none; } @media(max-width:640px){ /* مساحة إضافية أسفل الصفحة عشان الزرار العائم ما يغطيش آخر عنصر */ #dashboard{ padding-bottom:calc(90px + env(safe-area-inset-bottom)); } /* ---- لمس أوسع لكل عناصر التحكم (أسهل باللمس) ---- */ .btn-primary, .btn-secondary, .btn-danger, #dashboard input, #dashboard select, #dashboard textarea, .quick-action-btn{ min-height:44px; } #dashboard input, #dashboard select, #dashboard textarea{ font-size:16px; } /* يمنع تكبير الشاشة التلقائي في iOS */ /* ---- بطاقات الإحصائيات: شبكة عمودين واضحة بدل شريط بيتقطع نصه على الحواف ---- */ .stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:22px; } .stat-card{ padding:14px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; } .stat-value{ font-size:1.2rem; } .stat-label{ font-size:.72rem; line-height:1.3; } /* ---- ترويسة الصفحة: زرار الهامبرجر + العنوان في صف واحد، والإجراءات تحتهم ---- */ .admin-topbar{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 12px; } .admin-topbar h1{ order:2; flex:1; min-width:0; font-size:1.05rem; } .admin-topbar .admin-actions{ order:3; flex:1 1 100%; } /* ---- زرار فتح الشريط الجانبي (هامبرجر) ---- */ .sidebar-toggle-btn{ order:1; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:40px; height:40px; flex-shrink:0; border:1px solid var(--a-line); border-radius:11px; background:var(--a-panel); cursor:pointer; padding:0; } .sidebar-toggle-btn span{ width:18px; height:2px; border-radius:2px; background:var(--a-teal-dark); display:block; } .sidebar-toggle-btn[aria-expanded="true"]{ background:var(--a-teal-soft); border-color:var(--a-teal); } /* ---- الخلفية المعتمة خلف الشريط الجانبي ---- */ .sidebar-backdrop{ display:block; position:fixed; inset:0; z-index:110; background:rgba(10,22,20,.5); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s; } .sidebar-backdrop.open{ opacity:1; visibility:visible; transition:opacity .25s ease; } /* ---- التبويبات: شريط جانبي منسدل (Off-canvas Sidebar) مقسم لأقسام، نفس عناصر .tab-btn بالظبط ونفس معالِجات الضغط عليها زي ما هي ---- */ .admin-tabs{ position:fixed; top:0; bottom:0; right:0; z-index:120; width:80%; max-width:300px; display:flex; flex-direction:column; align-items:stretch; gap:2px; background:var(--a-panel); border-bottom:none; border-left:1px solid var(--a-line); border-radius:0; margin:0; padding:0 10px calc(16px + env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:-14px 0 34px -14px rgba(16,24,22,.35); transform:translateX(105%); transition:transform .3s cubic-bezier(.22,1,.36,1); } html.dark-mode .admin-tabs{ box-shadow:-14px 0 34px -14px rgba(0,0,0,.6); } .admin-tabs.open{ transform:translateX(0); } /* ---- ترويسة الشريط الجانبي: عنوان + زرار إغلاق ---- */ .tabs-sidebar-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 8px 12px; margin-bottom:4px; border-bottom:1px solid var(--a-line); position:sticky; top:0; background:var(--a-panel); z-index:1; } .tabs-sidebar-title{ font-family:'Cairo', sans-serif; font-weight:800; font-size:.92rem; color:var(--a-teal-dark); } html.dark-mode .tabs-sidebar-title{ color:var(--a-ink); } .sidebar-close-btn{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; border:1px solid var(--a-line); background:var(--a-paper); color:var(--a-muted); cursor:pointer; font-size:.85rem; padding:0; } /* ---- عناوين تقسيم الأقسام داخل الشريط الجانبي ---- */ .tabs-group-label{ display:block; font-family:'Cairo', sans-serif; font-weight:800; font-size:.68rem; letter-spacing:.03em; color:var(--a-muted); text-transform:uppercase; padding:14px 8px 6px; margin:0; } /* ---- عناصر التبويبات: صفوف عمودية كاملة العرض، شكل قائمة احترافية ---- */ .tab-btn{ position:relative; flex-direction:row; justify-content:flex-start; align-items:center; gap:10px; width:100%; max-width:none; min-width:0; padding:11px 12px; border-radius:11px; font-size:.87rem; line-height:1.3; font-weight:700; white-space:normal; overflow:visible; text-overflow:clip; border-bottom:none; } .tab-btn::before{ font-size:1.05rem; line-height:1; flex-shrink:0; } /* أيقونة كل قسم */ .tab-btn.active{ background:var(--a-teal-soft); color:var(--a-teal-dark); border-bottom:none; } .tab-btn.active::after{ content:''; position:absolute; top:8px; bottom:8px; right:0; width:3px; border-radius:3px; background:var(--a-teal); } /* أيقونات الأقسام حسب data-tab — بدون أي تغيير في الـ HTML */ .tab-btn[data-tab="products"]::before{ content:'📦'; } .tab-btn[data-tab="overview"]::before{ content:'🏠'; } .tab-btn[data-tab="orders"]::before{ content:'🧾'; } .tab-btn[data-tab="returns"]::before{ content:'↩️'; } .tab-btn[data-tab="activity"]::before{ content:'🕘'; } .tab-btn[data-tab="reports"]::before{ content:'📊'; } .tab-btn[data-tab="landingpages"]::before{ content:'🚀'; } .tab-btn[data-tab="content"]::before{ content:'🖼️'; } .tab-btn[data-tab="users"]::before{ content:'👥'; } .tab-btn[data-tab="vendors"]::before{ content:'🏪'; } .tab-btn[data-tab="support"]::before{ display:none; } /* الإيموجي موجود بالفعل في نص الزرار */ .tab-btn[data-tab="analytics"]::before{ content:'📈'; } .tab-btn[data-tab="coupons"]::before{ content:'🏷️'; } .tab-btn[data-tab="settings"]::before{ content:'⚙️'; } .tab-btn[data-tab="team"]::before{ content:'👤'; } /* الشارة (عدد الطلبات الجديدة...) تفضل واضحة جنب اسم القسم */ .tab-btn .tab-badge{ position:static; margin:0 0 0 auto; order:2; font-size:.66rem; padding:2px 7px; } /* ---- قفل تمرير الصفحة الخلفية وقت فتح الشريط الجانبي ---- */ body.sidebar-open-lock{ overflow:hidden; } /* ---- زرار "إضافة منتج جديد" كزر عائم أسفل الشاشة ---- */ #addProductBtn{ position:fixed; z-index:51; bottom:calc(16px + env(safe-area-inset-bottom)); left:16px; right:16px; border-radius:999px; box-shadow:0 14px 32px -8px rgba(6,36,32,.45); text-align:center; } /* ---- باقي أزرار الإجراءات العلوية: صف قابل للتمرير بدل النزول سطر تحت التاني ---- */ .admin-actions{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -18px; padding:0 18px 4px; } .admin-actions::-webkit-scrollbar{ display:none; } .admin-actions > *{ flex-shrink:0; } /* ---- نافذة التعديل: تتحول لـ Bottom Sheet بدل مربع حوار في المنتصف ---- */ .editor-overlay{ align-items:flex-end; padding:0; } .editor-box{ width:100%; max-width:100%; margin:0; border-radius:20px 20px 0 0; max-height:92vh; overflow-y:auto; padding:22px 18px calc(22px + env(safe-area-inset-bottom)); animation:aSheetUp .3s cubic-bezier(.22,1,.36,1); } @keyframes aSheetUp{ from{ transform:translateY(40px); opacity:.4; } to{ transform:translateY(0); opacity:1; } } /* ---- صفوف المنتجات/المستخدمين: صورة+معلومات أعلى، وأزرار الإجراءات كصف كامل العرض تحتها ---- */ .admin-product-row{ align-items:flex-start; row-gap:10px; } .admin-product-row .thumb{ order:1; } .admin-product-row .info{ order:2; flex:1 1 60%; min-width:0; } .admin-product-row .row-actions{ order:3; flex:1 1 100%; display:flex; gap:8px; padding-top:8px; border-top:1px dashed var(--a-line); } .admin-product-row .row-actions > *{ flex:1; text-align:center; } /* ---- مقبض صغير أعلى الـ Bottom Sheet يوحي إنها قابلة للسحب ---- */ .editor-box::before{ content:''; display:block; width:40px; height:4px; border-radius:99px; background:var(--a-line); margin:0 auto 16px; } } /* جداول تُبنى ديناميكيًا بالجافاسكريبت داخل تفاصيل البائع — تمرير أفقي آمن على الشاشات الصغيرة بدل ما تكسر عرض الصفحة */ #vendorOrdersSummaryWrap, #vdOrdersWrap, #vdReturnsWrap, #variantCombosWrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } #vendorOrdersSummaryWrap table, #vdOrdersWrap table, #vdReturnsWrap table, #variantCombosWrap table{ min-width:520px; } /* ============================================================ 21) فلاتر Bottom Sheet + Stepper لحالة الطلب + تنبيهات Toast عناصر بتتضاف ديناميكيًا بمعرفة dashboard-ux.js فوق العناصر الأصلية بالظبط (من غير حذف أو تعديل أي id/class/دالة موجودة). ============================================================ */ /* ---- 21.1) زرار فتح فلاتر الطلبات/الإرجاع (موبايل فقط) ---- */ .filter-sheet-toggle{ display:none; } .filter-sheet-body{ display:contents; } /* على اللابتوب: العناصر تفضل في مكانها جوه الشريط بالظبط */ .filter-sheet-body .fs-title{ display:none; } /* عنوان الشيت يظهر بس على الموبايل جوه الـ Bottom Sheet */ @media(max-width:640px){ .filter-sheet-toggle{ display:inline-flex; align-items:center; gap:6px; background:var(--a-panel-soft); border:1px solid var(--a-line); border-radius:10px; padding:9px 14px; font-family:'Cairo', sans-serif; font-weight:700; font-size:.85rem; color:var(--a-teal-dark); cursor:pointer; margin-inline-start:auto; min-height:44px; } .filter-sheet-body{ display:none; } .filter-sheet-body.open{ display:flex; flex-direction:column; gap:12px; position:fixed; z-index:70; left:0; right:0; bottom:0; background:var(--a-panel); border-radius:20px 20px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom)); max-height:78vh; overflow-y:auto; box-shadow:var(--a-shadow-lg); animation:aSheetUp .3s cubic-bezier(.22,1,.36,1); } .filter-sheet-body.open > *{ width:100%; margin:0 !important; max-width:100% !important; } .filter-sheet-body .fs-title{ display:flex; justify-content:space-between; align-items:center; font-family:'Cairo', sans-serif; font-weight:800; font-size:1rem; color:var(--a-teal-deep); } html.dark-mode .filter-sheet-body .fs-title{ color:var(--a-ink); } .filter-sheet-body .fs-close{ background:var(--a-panel-soft); border:1px solid var(--a-line); border-radius:8px; width:30px; height:30px; font-size:.9rem; cursor:pointer; color:var(--a-muted); flex-shrink:0; } #filterSheetBackdrop{ display:none; } #filterSheetBackdrop.open{ display:block; position:fixed; inset:0; z-index:69; background:rgba(10,20,17,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); } } /* ---- 21.2) Stepper بصري لحالة الطلب (بديل عرض للـ select الأصلي) ---- */ select.order-status-select.visually-hidden-select{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .status-stepper{ display:flex; align-items:center; gap:2px; max-width:100%; background:var(--a-panel-soft); border:1px solid var(--a-line); border-radius:10px; padding:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .status-stepper::-webkit-scrollbar{ display:none; } .status-step{ flex-shrink:0; border:none; background:none; cursor:pointer; white-space:nowrap; font-family:'Almarai', sans-serif; font-size:.72rem; font-weight:700; color:var(--a-muted); padding:7px 11px; border-radius:8px; transition:background .15s ease, color .15s ease; } .status-step:hover:not(.disabled){ background:var(--a-panel); color:var(--a-teal-dark); } .status-step.active{ background:var(--a-teal); color:#fff; } .status-step.disabled{ cursor:not-allowed; opacity:.55; } /* ---- 21.3) تنبيهات Toast عائمة (بديل alert() ورسائل النجاح الثابتة) ---- */ #toastHost{ position:fixed; z-index:200; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column-reverse; gap:8px; align-items:center; pointer-events:none; width:100%; padding:0 16px; } @media(max-width:640px){ #toastHost{ bottom:calc(150px + env(safe-area-inset-bottom)); } } .app-toast{ background:var(--a-teal-deep); color:#fff; font-family:'Cairo', sans-serif; font-weight:700; font-size:.86rem; padding:12px 20px; border-radius:999px; box-shadow:var(--a-shadow-lg); opacity:0; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease; max-width:92vw; text-align:center; } .app-toast.show{ opacity:1; transform:translateY(0); } .app-toast.error{ background:#9c3b1f; } @media (prefers-reduced-motion: reduce){ #addProductBtn, .editor-box{ animation:none !important; } } /* ============================================================ 20) شاشات اللابتوب/الديسكتوب الواسعة — استغلال أفضل للمساحة وترتيب بصري أوضح للبطاقات، من غير أي تغيير في ترتيب الـ HTML (Flexbox/Grid فقط، عبر order وgrid-template-columns). ============================================================ */ @media(min-width:1280px){ /* بطاقات الإعدادات المتتالية (محتوى الموقع/الإعدادات الشخصية) تتوزع في عمودين بدل عمود واحد طويل على الشاشات الواسعة جدًا، لتقليل التمرير — بتقنية Multi-column الآمنة (كل بطاقة تفضل متماسكة). */ #tabContent, #tabSettings{ column-count:2; column-gap:22px; } #tabContent > .section-title, #tabSettings > .section-title{ column-span:all; } #tabContent .settings-card, #tabSettings .settings-card, #tabContent .chart-card, #tabSettings .chart-card{ break-inside:avoid; -webkit-column-break-inside:avoid; } } /* شريط الحفظ العلوي والعنوان يتراصّان بشكل أوضح على الشاشات المتوسطة (تابلت/لابتوب صغير) بدل التزاحم */ @media(min-width:640px) and (max-width:1023px){ .admin-topbar{ align-items:center; } .admin-actions{ justify-content:flex-end; } } /* تحسين شبكة كروت المنتجات على شاشات اللابتوب الكبيرة: عرض عمودين بدل عمود واحد طويل، لاستغلال المساحة الأفقية المتاحة */ @media(min-width:1100px){ .admin-products{ grid-template-columns:1fr 1fr; } } /* ============================================================ البنر الإعلاني الديناميكي (لوحة تحكم البائع) — عناصر التحكم في لوحة الأدمن: مفتاح تبديل عام + شبكة صور قابلة لإعادة الترتيب. ============================================================ */ /* --------------------------------------------------------- مفتاح تبديل (Toggle Switch) عام، قابل لإعادة الاستخدام في أي مكان بلوحة التحكم (مش مقصور على البنر بس). --------------------------------------------------------- */ .a-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; font-family:'Almarai', sans-serif; font-weight:700; font-size:.88rem; color:var(--a-ink); } .a-switch input{ position:absolute; opacity:0; width:1px; height:1px; } .a-switch-track{ position:relative; width:44px; height:24px; border-radius:999px; background:var(--a-line); transition:background .2s ease; flex-shrink:0; } .a-switch-thumb{ position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(16,24,22,.25); transition:transform .2s ease; } .a-switch input:checked ~ .a-switch-track{ background:var(--a-teal); } .a-switch input:checked ~ .a-switch-track .a-switch-thumb{ transform:translateX(-20px); } .a-switch input:focus-visible ~ .a-switch-track{ box-shadow:0 0 0 3px var(--a-teal-soft); } .a-switch-label{ color:var(--a-ink-soft); font-weight:700; } /* --------------------------------------------------------- شبكة صور البنر الإعلاني: كل صورة في كرت صغير مع أزرار إعادة الترتيب/الحذف تظهر عند الـ hover (أو التركيز للموبايل). --------------------------------------------------------- */ .vb-thumb{ position:relative; width:128px; height:76px; border-radius:10px; overflow:hidden; border:1px solid var(--a-line); background:var(--a-panel-soft); flex-shrink:0; } .vb-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .vb-thumb-order{ position:absolute; top:4px; right:4px; background:rgba(15,20,18,.65); color:#fff; font-size:.68rem; font-weight:700; border-radius:5px; padding:1px 6px; line-height:1.4; } .vb-thumb-actions{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:5px; background:rgba(15,20,18,.5); opacity:0; transition:opacity .15s ease; } .vb-thumb:hover .vb-thumb-actions, .vb-thumb:focus-within .vb-thumb-actions{ opacity:1; } .vb-thumb-btn{ width:24px; height:24px; border-radius:6px; border:none; background:rgba(255,255,255,.95); cursor:pointer; font-size:.72rem; display:flex; align-items:center; justify-content:center; transition:background .15s ease; } .vb-thumb-btn:hover{ background:#fff; } .vb-thumb-btn.vb-thumb-remove{ color:var(--a-rose); } .vb-thumb-btn:disabled{ opacity:.35; cursor:not-allowed; } .vb-thumb-empty{ font-size:.82rem; color:var(--a-muted); } @media(max-width:480px){ .vb-thumb{ width:104px; height:64px; } .vb-thumb-actions{ opacity:1; background:rgba(15,20,18,.32); } } html.dark-mode .vb-thumb{ background:var(--a-panel-soft); border-color:var(--a-line); } /* ===================================================================== * محرر متغيرات المنتج (لون/مقاس) — تصميم مجمّع حسب اللون * مستخدم في: admin.html + vendor.html (product editor) * ===================================================================== */ .variant-color-group{ border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:14px; background:var(--panel); } .variant-color-group:last-child{ margin-bottom:0; } .variant-color-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; } .variant-color-icon{ font-size:1.05rem; } .variant-color-name{ flex:1; min-width:140px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-weight:600; font-size:.9rem; background:transparent; color:var(--ink); } .variant-color-head .btn-secondary{ padding:7px 12px; font-size:.8rem; white-space:nowrap; } .variant-del-color{ color:#c0392b !important; } .variant-size-table{ width:100%; border-collapse:collapse; font-size:.85rem; } .variant-size-table th{ text-align:right; padding:6px; color:var(--muted); font-weight:600; font-size:.78rem; border-bottom:1px solid var(--line); } .variant-size-table td{ padding:6px; border-bottom:1px solid var(--line); vertical-align:middle; } .variant-size-table tr:last-child td{ border-bottom:none; } .variant-size-table input[type="text"], .variant-size-table input[type="number"]{ width:100%; padding:7px 8px; border:1px solid var(--line); border-radius:6px; font-size:.85rem; background:transparent; color:var(--ink); } .variant-size-table input[disabled]{ background:rgba(0,0,0,.04); color:var(--muted); } .variant-toggle{ display:flex; align-items:center; gap:5px; font-size:.76rem; color:var(--muted); white-space:nowrap; cursor:pointer; font-weight:400; } .variant-toggle.small{ margin-top:5px; font-size:.7rem; } .variant-toggle input{ width:auto; margin:0; } .variant-del-size{ background:none; border:none; color:#c0392b; font-size:1.15rem; line-height:1; cursor:pointer; padding:2px 6px; } html.dark-mode .variant-size-table input[disabled]{ background:rgba(255,255,255,.06); } /* ============================================================ 20) لمسات الجمال والترقية البصرية الفاخرة لوحة تحكم الأدمن ============================================================ */ /* تحسين البطاقات الرئيسية وشبكات العرض */ .stat-card, .status-stat-card, .settings-card, .chart-card, .admin-product-row, .order-row { transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease; } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -10px rgba(14, 107, 92, 0.15); } html.dark-mode .stat-card:hover { box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6); border-color: var(--a-line); } .stat-value, .status-stat-value { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* بطاقات المبيعات والمنتجات في الجداول */ .admin-product-row:hover, .order-row:hover { border-color: color-mix(in srgb, var(--a-teal) 40%, var(--a-line)); } /* تحسين أزرار الإجراءات السريعة والجداول */ .quick-action-btn { border-radius: 10px; transition: all 0.18s ease; } .quick-action-btn:hover { background: var(--a-teal-soft); color: var(--a-teal-dark); transform: translateY(-1px); } /* شريط ترويسة الجداول */ #dashboard table th { background: var(--a-panel-soft); padding: 11px 12px; font-family: 'Cairo', sans-serif; font-weight: 700; border-bottom: 2px solid var(--a-line); } #dashboard table td { padding: 11px 12px; } #dashboard table tbody tr { transition: background 0.15s ease; } #dashboard table tbody tr:hover { background: var(--a-panel-soft); } /* تحسين حقول الإدخال والقوائم المنسدلة */ #dashboard input[type="text"], #dashboard input[type="number"], #dashboard input[type="tel"], #dashboard input[type="email"], #dashboard input[type="password"], #dashboard input[type="date"], #dashboard select, #dashboard textarea { border-radius: 10px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.02); } #dashboard select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2008080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 10px center; padding-left: 28px; } html.dark-mode #dashboard select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23adafb5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); } /* تحسين النوافذ المنبثقة (Modals & Overlays) */ .editor-box { border: 1px solid var(--a-line); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } /* شارات الحالة الأنيقة */ .badge-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; } /* لمسات ناعمة للمؤشرات البصرية للأداء وقمع المبيعات */ #adminFunnelVisual, #vendorFunnelVisual { padding: 4px; } /* ===== شبكة أسعار الشحن حسب المحافظة (لوحة البائع ولوحة الأدمن) — كانت الألوان متحطة inline بقيم ثابتة (#fff, #f8fafc, #0f172a...) فكانت بتفضل فاتحة حتى بعد تفعيل الوضع الليلي. دلوقتي بتستخدم متغيرات الثيم نفسها فبتتلوّن صح تلقائيًا في الوضعين. ===== */ .gov-ship-quickbar{ background:var(--a-panel-soft); border:1px solid var(--a-line); } .gov-ship-quickbar-label{ color:var(--a-ink); } .gov-ship-quickbar input.gov-ship-uniform-input{ background:var(--a-panel); border:1px solid var(--a-line); color:var(--a-ink); } .gov-ship-card{ background:var(--a-panel); border:1px solid var(--a-line); box-shadow:var(--a-shadow); } .gov-ship-card label{ color:var(--a-ink); } .gov-ship-card .gov-ship-unit{ color:var(--a-muted); } .gov-ship-card input.gov-ship-input, .gov-ship-card input.admin-gov-ship-input{ background:var(--a-panel); border:1px solid var(--a-line); color:var(--a-ink); } @media(max-width:640px){ .variant-size-table thead{ display:none; } .variant-size-table, .variant-size-table tbody, .variant-size-table tr, .variant-size-table td{ display:block; width:100%; } .variant-size-table tr{ border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:8px; } .variant-size-table td{ border-bottom:none; padding:4px 0; } .variant-size-table td:before{ content: attr(data-label); display:block; font-size:.72rem; color:var(--muted); margin-bottom:2px; } }