/* ========================================================== هوية "متجري" 2026 — نظام مزدوج (فاتح/داكن) بلمسة Indigo/Emerald عصرية، مستوحاة من جودة Linear/Stripe/Vercel/Notion بهوية خاصة. التبديل عبر data-theme="light|dark" على (محفوظ بـlocalStorage). ========================================================== */ :root, [data-theme="light"] { --background: #F8FAFC; --surface: #FFFFFF; --surface-raised: #F1F5F9; --primary: #6366F1; --primary-dark: #4F46E5; /* درجة أغمق للتباين على خلفيات فاتحة (نصوص/حدود) */ --primary-light: #EEF2FF; /* سطح فاتح جداً - خلفيات شارات */ --accent: #D4AF37; --accent-light: #FDF8ED; --success: #10B981; /* مستقل عن accent - مخصَّص لزر "رؤية/عرض" تحديداً */ --success-light: #ECFDF5; --border: #E2E8F0; --ink: #0F172A; --ink-soft: #64748B; --danger: #DC2626; --shadow-sm: 0 1px 2px rgba(15,23,42,.05); --shadow-md: 0 4px 16px rgba(15,23,42,.08); --shadow-lg: 0 12px 32px rgba(15,23,42,.10); } [data-theme="dark"] { --background: #0F172A; --surface: #1E293B; --surface-raised: #263449; --primary: #818CF8; --primary-dark: #A5B4FC; /* درجة أفتح للتباين على خلفيات داكنة */ --primary-light: #312E81; --accent: #E8C86B; --accent-light: #3D3419; --success: #34D399; --success-light: #064E3B; --border: #334155; --ink: #F8FAFC; --ink-soft: #94A3B8; --danger: #F87171; --shadow-sm: 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 4px 16px rgba(0,0,0,.28); --shadow-lg: 0 12px 32px rgba(0,0,0,.35); } /* توافق مؤقت مع أي كود قديم لسا يستعمل هاذي الأسماء (الفريز الزخرفي، شارات) */ :root { --primary-shadow: rgba(99,102,241,.35); } * { box-sizing: border-box; } html { color-scheme: light dark; } body { margin: 0; background: var(--background); color: var(--ink); font-family: 'Inter', 'Tajawal', sans-serif; transition: background-color .2s ease, color .2s ease; } h1, h2, h3, .font-display { font-family: 'Manrope', 'Cairo', sans-serif; font-weight: 800; letter-spacing: -0.01em; } /* ---------- مبدّل الوضع الفاتح/الداكن ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; cursor: pointer; background: var(--surface-raised); border: 1px solid var(--border); color: var(--ink); transition: background-color .15s ease, transform .1s ease; } .theme-toggle:hover { background: var(--primary-light); } .theme-toggle:active { transform: scale(.94); } .theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ---------- الفريز الزخرفي (التوقيع البصري) ---------- نجمة ثمانية متشابكة (رب الحزب) مستوحاة من الزليج الأندلسي-الجزائري، مرسومة كنمط SVG متكرر بخط ذهبي رفيع. تُستخدم بقلة: أسفل شعار المتجر فالشريط الجانبي، وحول شعار صفحات الدخول فقط. */ .zellige-strip { height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 5H19V19H5Z M12 2 L22 12 L12 22 L2 12 Z' fill='none' stroke='%23D4AF37' stroke-width='1' stroke-opacity='0.85'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: center; background-size: 22px 22px; opacity: .8; } .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 250px; flex-shrink: 0; position: relative; /* سياق تموضع للقائمة المنسدلة (اسم المتجر) - قاعدة الهاتف تتجاوزها لـfixed */ background: var(--surface); /* لون واحد صلب افتراضياً (مناسب للوضع الفاتح تحديداً) */ border-left: 1px solid var(--border); display: flex; flex-direction: column; transition: transform .25s ease, background-color .2s ease; z-index: 200; } [data-theme="dark"] .sidebar { /* تدرّج خفيف بالوضع الداكن فقط - بألوان تتكيّف تلقائياً، بدل اللون القديم المثبَّت يدوياً (#1C1026) لي كان يكسر مظهر الوضع الفاتح */ background: linear-gradient(180deg, var(--surface) 0%, var(--background) 100%); } [dir="ltr"] .sidebar { border-left: none; border-right: 1px solid var(--border); } .sidebar .brand { padding: 20px 24px; border-bottom: 1px solid var(--border); } .sidebar .brand span { font-size: 18px; font-weight: 800; color: var(--accent); } .sidebar nav { padding: 16px 12px; flex: 1; overflow-y: auto; } .nav-section-label { font-size: 11px; font-weight: 800; color: var(--ink-soft); opacity: .65; text-transform: uppercase; letter-spacing: .06em; margin: 18px 10px 6px; padding-top: 12px; border-top: 1px solid var(--border); } .nav-section-label:first-of-type { border-top: none; margin-top: 6px; padding-top: 0; } .sidebar a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; margin-bottom: 2px; color: var(--ink-soft); text-decoration: none; font-weight: 700; font-size: 13.5px; transition: background-color .15s ease, color .15s ease, transform .1s ease; } .sidebar a svg { opacity: .8; transition: opacity .15s ease; } .sidebar a:hover { background: var(--primary-light); color: var(--primary-dark); } .sidebar a:hover svg { opacity: 1; } .sidebar a.active { background: var(--primary); color: #fff; box-shadow: 0 2px 10px var(--primary-shadow, rgba(107,42,140,.4)); } .sidebar a.active svg { opacity: 1; } /* قوائم منسدلة بالشريط الجانبي (الرئيسية+الإحصائيات، المنتجات+إضافة+التصنيفات، المتجر+صفحاته) */ .nav-dropdown summary { display: flex; align-items: center; gap: 11px; cursor: pointer; list-style: none; padding: 9px 12px; border-radius: 9px; margin-bottom: 2px; color: var(--ink-soft); font-weight: 700; font-size: 13.5px; transition: background-color .15s ease, color .15s ease; } .nav-dropdown summary::-webkit-details-marker { display: none; } .nav-dropdown summary::marker { content: ""; } .dropdown-chevron { margin-inline-start: auto; font-size: 11px; opacity: .6; padding: 4px 8px; border-radius: 6px; cursor: pointer; } .dropdown-chevron:hover { opacity: 1; background: rgba(255,255,255,.15); } .nav-dropdown[open] .dropdown-chevron { transform: rotate(180deg); } .nav-dropdown summary:hover { background: var(--primary-light); color: var(--primary-dark); } .nav-dropdown summary.active { background: var(--primary); color: #fff; box-shadow: 0 2px 10px var(--primary-shadow, rgba(107,42,140,.4)); } .nav-dropdown summary.active svg { opacity: 1; } .nav-dropdown-items { padding-inline-start: 30px; display: flex; flex-direction: column; } .nav-dropdown-items a { font-size: 12.5px; padding: 7px 12px; } .main { flex: 1; min-width: 0; } .topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .topbar h1 { margin: 0; font-size: 20px; } .topbar p { margin: 2px 0 0; color: var(--ink-soft); font-size: 13px; } .content { padding: 32px; max-width: 1320px; margin-inline: auto; } .sidebar-toggle { display: none; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 18px; cursor: pointer; color: var(--ink); } .sidebar-overlay { display: none; } /* ---------- استجابة كاملة: سطح مكتب واسع → تابلت → هاتف ---------- */ /* تابلت (بين الهاتف وسطح المكتب) - عمودان بدل عمود واحد يفادي فراغات كبيرة */ @media (max-width: 1024px) and (min-width: 881px) { .content { padding: 24px; max-width: 100%; } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 880px) { .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; } .sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: 82vw; max-width: 300px; transform: translateX(100%); box-shadow: -12px 0 40px rgba(0,0,0,.45); border-radius: 20px 0 0 20px; transition: transform .3s cubic-bezier(.32,.72,0,1); } .sidebar.is-open { transform: translateX(0); } [dir="ltr"] .sidebar { right: auto; left: 0; transform: translateX(-100%); box-shadow: 12px 0 40px rgba(0,0,0,.45); border-radius: 0 20px 20px 0; } [dir="ltr"] .sidebar.is-open { transform: translateX(0); } .sidebar-overlay.is-open { display: block; position: fixed; inset: 0; background: rgba(8,3,12,.55); z-index: 190; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: sidebarOverlayFade .25s ease; } @keyframes sidebarOverlayFade { from { opacity: 0; } to { opacity: 1; } } /* مساحات لمس أكبر وأريح بالهاتف (بدل تصميم سطح المكتب المضغوط) */ .sidebar nav { padding: 20px 14px; } .sidebar a { padding: 13px 14px; border-radius: 12px; font-size: 14.5px; margin-bottom: 4px; } .sidebar .brand { padding: 24px 20px 18px; } .sidebar .store-menu-trigger { font-size: 15px; } .nav-dropdown summary { padding: 13px 14px !important; border-radius: 12px !important; } .nav-dropdown-items a { padding: 11px 14px !important; font-size: 13.5px !important; } .topbar { padding: 14px 16px; } .topbar h1 { font-size: 17px; } .content { padding: 16px; max-width: 100%; } .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; } .grid-2 { grid-template-columns: 1fr; gap: 12px; } table { display: block; } .card > table, table { font-size: 13px; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .btn { padding: 9px 14px; font-size: 13px; } .card { padding: 18px; margin-bottom: 16px; } /* أي flex فيه أعمدة جنب بعض تتكدّس عمودياً بالهاتف بدل ما تتضيّق وتخلي فراغات */ .page-head { flex-direction: column; align-items: stretch !important; } .page-head > * { width: 100%; } } @media (max-width: 480px) { .grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; } .content { padding: 12px; } .card { padding: 14px; } .stat-value { font-size: 20px; } .stat-card .stat-value[style*="font-size"] { font-size: 17px !important; } .btn { width: 100%; justify-content: center; } .flex.gap-3:not(.no-stack-mobile) { flex-wrap: wrap; } } @media (max-width: 360px) { .grid-4 { grid-template-columns: 1fr; } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; margin-bottom: 24px; box-shadow: var(--shadow-md); transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease; } details.card summary::-webkit-details-marker { display: none; } details.card summary::marker { content: ""; } details.card summary::after { content: '▾'; color: var(--ink-soft); font-size: 14px; margin-inline-start: 8px; } details.card[open] summary::after { content: '▴'; } .card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); } .grid { display: grid; gap: 20px; } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } /* ملاحظة: استجابة .grid-4/.grid-2 معرَّفة بدقة أكبر بقسم "استجابة كاملة" بالأعلى (تابلت/هاتف منفصلين) */ .stat-label { color: var(--ink-soft); font-weight: 700; font-size: 13px; } .stat-value { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 24px; color: var(--accent); margin-top: 6px; } table { width: 100%; border-collapse: collapse; font-size: 14px; } thead { background: var(--primary-light); color: var(--primary-dark); } th, td { text-align: right; padding: 12px 16px; } tbody tr { border-top: 1px solid var(--border); } tbody tr:hover { background: var(--surface-raised); } tbody tr.clickable-row { cursor: pointer; } tbody tr.clickable-row:hover { background: var(--primary-light); } .btn { display: inline-flex; align-items: center; gap: 6px; background: var(--primary); color: #fff; border: none; padding: 10px 18px; border-radius: 12px; font-weight: 800; font-size: 14px; cursor: pointer; text-decoration: none; transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease; } .btn:hover { filter: brightness(0.92); box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .btn.secondary { background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent); } .btn.secondary:hover { filter: brightness(0.96); } .btn.view { background: var(--success-light); color: var(--success); border: 1px solid var(--success); } .btn.view:hover { filter: brightness(0.96); } .btn.danger { background: var(--danger); color: #fff; } .btn.danger:hover { filter: brightness(0.9); } .btn.ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--border); } .btn.ghost:hover { background: var(--surface-raised); color: var(--ink); } label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--ink-soft); } input, select, textarea { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); font-family: inherit; font-size: 14px; background: var(--surface-raised); color: var(--ink); margin-bottom: 14px; transition: border-color .15s ease, box-shadow .15s ease; } /* ⚠️ إصلاح تباين حرج بالوضع الليلي: بلا هذي القاعدة، قوائم