/* ===================================================== نظام التصميم — ألوان عصرية بمتغيرات CSS يُبدَّل الوضع بإضافة كلاس "dark" أو "light" على ===================================================== */ :root, html.dark { --bg: #0b0f17; --bg-soft: #0e1420; --panel: #141b26; --panel-2: #1c2534; --border: #243044; --border-soft: #1b2434; --text: #e9eef7; --text-dim: #8493ab; --accent: #6d8cff; /* اللون الأساسي للنظام */ --accent-soft: rgba(109,140,255,.14); --accent-strong: #5570f5; --amber: #f5a524; /* المبالغ والأسعار */ --amber-soft: rgba(245,165,36,.14); --green: #22c58a; --green-soft: rgba(34,197,138,.14); --danger: #f2556d; --danger-soft: rgba(242,85,109,.14); --blue: #6d8cff; --nav-bg: rgba(14,20,32,.92); --shadow: 0 10px 30px rgba(0,0,0,.45); --shadow-sm: 0 2px 10px rgba(0,0,0,.3); --r: 14px; --r-lg: 18px; } html.light { --bg: #f5f7fb; --bg-soft: #eef2f8; --panel: #ffffff; --panel-2: #f1f4f9; --border: #e1e7f0; --border-soft: #eaeff6; --text: #101827; --text-dim: #64748b; --accent: #4a63d8; --accent-soft: rgba(74,99,216,.10); --accent-strong: #3b51c4; --amber: #b8730a; --amber-soft: rgba(184,115,10,.12); --green: #0f9d70; --green-soft: rgba(15,157,112,.12); --danger: #dc3a55; --danger-soft: rgba(220,58,85,.10); --blue: #4a63d8; --nav-bg: rgba(255,255,255,.92); --shadow: 0 10px 30px rgba(16,24,39,.10); --shadow-sm: 0 2px 10px rgba(16,24,39,.06); --r: 14px; --r-lg: 18px; } /* الأيقونات ترث لون النص وتتوسّط مع النص */ .ico { flex-shrink: 0; vertical-align: -.18em; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Segoe UI', Tahoma, Arial, sans-serif; -webkit-font-smoothing: antialiased; transition: background .2s, color .2s; } a { color: inherit; text-decoration: none; } /* مساحة سفلية تكفي شريط التنقل الثابت */ .container { max-width: 480px; margin: 0 auto; padding-bottom: 92px; } /* ---------- Top bar ---------- */ .topbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); background: var(--nav-bg); backdrop-filter: saturate(180%) blur(14px); position: sticky; top: 0; z-index: 10; } .topbar .brand { font-weight: 700; font-size: 15px; flex: 1; } .topbar .brand small { display: block; font-weight: 400; font-size: 11px; color: var(--text-dim); } .icon-btn, .back-btn { width: 36px; height: 36px; border-radius: 11px; background: var(--panel-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; color: var(--text); position: relative; flex-shrink: 0; transition: background .15s, border-color .15s, color .15s; } .icon-btn:hover, .back-btn:hover { border-color: var(--accent); color: var(--accent); } .bell-dot { position: absolute; top: -5px; left: -5px; background: var(--danger); color: #fff; font-size: 9px; font-weight: 800; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .logo-badge { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, var(--amber), #c97b00); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #1a1200; } .logo-badge img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Search ---------- */ .search-box { margin: 12px 16px 4px; display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; } .search-box input { border: none; background: transparent; outline: none; color: var(--text); font-size: 13px; width: 100%; } .search-box input::placeholder { color: var(--text-dim); } .search-submit { background: none; border: none; color: inherit; font-size: 14px; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; } /* اسم المنتج الطويل لا يزحم أزرار الشريط العلوي */ .topbar .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Section titles ---------- */ .section-title { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; padding: 16px 16px 8px; } /* ---------- Category grid (catalog home) ---------- */ .cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 16px 16px; } .cat-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px 10px; text-align: center; position: relative; } .cat-card img { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; margin-bottom: 8px; } .cat-card .icon-fallback { width: 44px; height: 44px; border-radius: 10px; margin: 0 auto 8px; background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-size: 20px; } .cat-card .name { font-size: 13px; font-weight: 600; } /* ---------- Product rows (list) ---------- */ .prod-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); } .prod-thumb { width: 52px; height: 52px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 20px; } .prod-thumb img { width: 100%; height: 100%; object-fit: contain; } .prod-info { flex: 1; min-width: 0; } .prod-code { font-size: 10px; color: var(--text-dim); font-family: monospace; } .prod-name { font-size: 13px; font-weight: 600; margin: 2px 0; } .prod-price { font-size: 12px; color: var(--amber); font-weight: 700; } .prod-price .iqd { color: var(--text-dim); font-weight: 400; font-size: 10px; } .chev { color: var(--text-dim); font-size: 14px; } .stock-pill { font-size: 9px; font-weight: 800; padding: 3px 7px; border-radius: 6px; flex-shrink: 0; } .stock-ok { background: rgba(37,211,102,.15); color: var(--green); } .stock-low { background: rgba(240,165,0,.15); color: var(--amber); } .stock-empty { background: rgba(225,75,75,.15); color: var(--danger); } /* ---------- FAB ---------- */ .fab:active { transform: scale(.94); } .fab { position: fixed; bottom: 88px; left: 20px; width: 52px; height: 52px; border-radius: 17px; background: linear-gradient(150deg, var(--accent), var(--accent-strong)); color: #fff; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); z-index: 30; border: none; cursor: pointer; transition: transform .15s; } /* ---------- Product detail ---------- */ /* الصورة تُعرض كاملة بلا قطع، والحاوية تتمدّد مع نسبتها حتى حدّ أقصى */ .gallery { display: flex; gap: 2px; border-bottom: 1px solid var(--border); } .gallery .main { flex: 1; min-height: 220px; background: linear-gradient(160deg, var(--panel-2), var(--bg)); display: flex; align-items: center; justify-content: center; padding: 10px; } .gallery .main img { max-width: 100%; max-height: 70vh; width: auto; height: auto; object-fit: contain; border-radius: 8px; } .thumb-strip { display: flex; gap: 6px; padding: 10px 16px; overflow-x: auto; } .thumb-strip .t { width: 48px; height: 48px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; flex-shrink: 0; cursor: pointer; } .thumb-strip .t img { width: 100%; height: 100%; object-fit: contain; } .thumb-strip .t.active { border-color: var(--amber); } .prod-detail { padding: 10px 16px 16px; } .code-tag { display: inline-block; font-family: monospace; font-size: 11px; color: var(--text-dim); background: var(--panel-2); padding: 3px 8px; border-radius: 6px; margin-bottom: 6px; } .prod-detail h2 { margin: 6px 0 10px; font-size: 18px; } .price-dual .usd { font-size: 22px; font-weight: 800; color: var(--amber); } /* بطاقتا السعر والكمية جنباً إلى جنب بنفس البروز */ .pq-row { display: flex; gap: 10px; } .pq-item { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; } .pq-label { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .price-dual .qty { color: var(--green); } .price-dual .qty.empty { color: var(--danger); } .eye-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 0; line-height: 1; } .price-dual .iqd { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .barcode-row { font-size: 11px; color: var(--text-dim); margin: 10px 0; } .desc { font-size: 13px; line-height: 1.7; color: var(--text); margin: 14px 0; } .spec-table { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 16px; } .spec-row { display: flex; justify-content: space-between; padding: 9px 12px; font-size: 12px; border-bottom: 1px solid var(--border); } .spec-row:last-child { border-bottom: none; } .spec-row span:first-child { color: var(--text-dim); } .btn-primary { background: var(--green); color: #06280f; font-weight: 800; font-size: 14px; text-align: center; padding: 13px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; width: 100%; } .btn-primary { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); color: #fff; box-shadow: 0 6px 18px var(--accent-soft); } .btn-primary:hover { filter: brightness(1.06); } .btn-secondary { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-weight: 700; font-size: 13px; padding: 12px; border-radius: 14px; cursor: pointer; } .btn-danger { background: rgba(225,75,75,.12); color: var(--danger); border: 1px solid var(--danger); } .cta-bar { position: sticky; bottom: 78px; background: var(--nav-bg); backdrop-filter: blur(12px); border-top: 1px solid var(--border-soft); padding: 12px 16px; display: flex; gap: 8px; z-index: 15; } /* ---------- شجرة الأقسام ---------- */ .tree-branch { color: var(--text-dim); font-size: 14px; flex-shrink: 0; margin-left: -4px; } /* ---------- شريط الحساب أسفل صفحات الكتالوج ---------- */ .account-bar { display: flex; align-items: center; justify-content: space-between; margin: 24px 16px 0; padding: 12px 14px; font-size: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; color: var(--text-dim); } .account-bar a { color: var(--danger); font-weight: 700; } /* ---------- خانات صور المنتج الثلاث ---------- */ .img-slot { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; border: 1px dashed var(--border); border-radius: 12px; padding: 8px; } .img-slot.filled { border-style: solid; } .img-slot .slot-no { width: 20px; height: 20px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .img-slot .slot-label { flex: 1; font-size: 12px; color: var(--text-dim); } /* ---------- رفع الصور: حقل الملف + زر الكاميرا ---------- */ .upload-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 14px; } .upload-row .field-input { flex: 1; margin-bottom: 0; } .camera-btn { flex-shrink: 0; padding: 0 14px; border-radius: 10px; font-size: 18px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; } .camera-btn:active { border-color: var(--amber); } /* ---------- Forms ---------- */ .field-label { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; display: block; } .field-input, select.field-input, textarea.field-input { width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; font-size: 13px; color: var(--text); margin-bottom: 14px; font-family: inherit; } textarea.field-input { min-height: 90px; resize: vertical; } .form-wrap { padding: 16px; max-width: 480px; margin: 0 auto; } .toggle-row { display: flex; gap: 8px; margin-bottom: 14px; } .toggle-btn { flex: 1; text-align: center; padding: 10px; border-radius: 10px; font-size: 12px; font-weight: 700; border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; background: var(--panel); } .toggle-btn.active { background: rgba(47,111,237,.15); color: var(--blue); border-color: var(--blue); } .toggle-btn.active.danger-active { background: rgba(225,75,75,.12); color: var(--danger); border-color: var(--danger); } /* ---------- Tables (admin lists) ---------- */ .list-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); } .list-row .name { font-size: 13px; font-weight: 700; flex: 1; } .list-row .sub { font-size: 11px; color: var(--text-dim); } .mini-btn { font-size: 11px; padding: 6px 10px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; } .add-bar { margin: 12px 16px; padding: 12px; border: 1px dashed var(--border); border-radius: 12px; text-align: center; font-size: 12px; color: var(--text-dim); cursor: pointer; } /* ---------- Dashboard stats ---------- */ .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 16px 12px; } .stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; box-shadow: var(--shadow-sm); } .stat-card .label { font-size: 10px; color: var(--text-dim); margin-bottom: 6px; } .stat-card .value { font-size: 19px; font-weight: 800; } .notif-panel { margin: 0 16px 10px; background: var(--panel); border: 1px solid var(--danger); border-radius: 12px; overflow: hidden; } .notif-head { background: rgba(225,75,75,.12); padding: 9px 12px; font-size: 11px; font-weight: 700; color: var(--danger); } .notif-item { display: flex; justify-content: space-between; padding: 9px 12px; font-size: 12px; border-top: 1px solid var(--border); } .notif-item .tag { font-size: 9px; padding: 2px 6px; border-radius: 5px; font-weight: 700; } .tag-empty { background: rgba(225,75,75,.15); color: var(--danger); } .tag-low { background: rgba(240,165,0,.15); color: var(--amber); } /* ---------- Nav menu (admin) ---------- */ .nav-menu { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; } .nav-item { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 13px 14px; font-size: 13px; font-weight: 600; transition: border-color .15s, transform .1s; } .nav-item:hover { border-color: var(--accent); } .nav-item:active { transform: scale(.99); } .nav-item .ico { color: var(--accent); } /* ---------- Login ---------- */ .login-wrap { max-width: 360px; margin: 60px auto; padding: 0 26px; text-align: center; } .login-logo { width: 74px; height: 74px; border-radius: 22px; margin: 0 auto 18px; overflow: hidden; background: linear-gradient(140deg, var(--accent), var(--accent-strong)); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; font-size: 32px; } .login-title { font-size: 19px; font-weight: 800; margin-bottom: 4px; } .login-sub { font-size: 12px; color: var(--text-dim); margin-bottom: 26px; } .error-msg { background: rgba(225,75,75,.12); color: var(--danger); border: 1px solid var(--danger); padding: 10px 14px; border-radius: 10px; font-size: 12px; margin-bottom: 16px; } .success-msg { background: rgba(37,211,102,.12); color: var(--green); border: 1px solid var(--green); padding: 10px 14px; border-radius: 10px; font-size: 12px; margin-bottom: 16px; } /* ---------- Invoice items ---------- */ .invoice-item-row { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin: 0 16px 8px; } .invoice-item-row .name { font-size: 12px; font-weight: 600; } .invoice-item-row .price { font-size: 11px; color: var(--text-dim); } .lock-icon { font-size: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; color: var(--text-dim); margin-right: 6px; } .qty-input { width: 44px; text-align: center; font-size: 13px; background: var(--panel-2); border-radius: 6px; padding: 6px 2px; border: 1px solid var(--border); margin-right: auto; color: var(--text); } .total-bar { padding: 12px 16px 0; } .total-line { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; } .total-line.grand { font-size: 16px; font-weight: 800; color: var(--text); border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 4px; } .total-line.grand .iqd-sub { display: block; font-size: 10px; font-weight: 400; color: var(--text-dim); } /* ---------- Theme toggle switch ---------- */ .theme-toggle { width: 46px; height: 26px; border-radius: 13px; background: var(--panel-2); border: 1px solid var(--border); position: relative; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; padding: 2px; margin-right: auto; } .theme-toggle .knob { width: 20px; height: 20px; border-radius: 50%; background: var(--amber); display: flex; align-items: center; justify-content: center; font-size: 11px; transition: margin .15s; } html.light .theme-toggle .knob { margin-right: auto; } html.dark .theme-toggle .knob { margin-left: auto; } /* ---------- Utility ---------- */ .text-center { text-align: center; } .text-dim { color: var(--text-dim); } .empty-state { text-align: center; padding: 40px 20px; color: var(--text-dim); font-size: 13px; } /* ===================================================== شريط التنقل السفلي بالأيقونات ===================================================== */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; max-width: 480px; margin: 0 auto; display: flex; gap: 2px; background: var(--nav-bg); backdrop-filter: saturate(180%) blur(16px); border-top: 1px solid var(--border-soft); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); } .bottom-nav a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border-radius: 12px; color: var(--text-dim); font-size: 10px; font-weight: 600; transition: color .15s, background .15s; } .bottom-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bottom-nav a:hover { color: var(--text); } .bottom-nav a.active { color: var(--accent); background: var(--accent-soft); } .bottom-nav a.danger { color: var(--danger); } /* شارة التنبيه فوق أيقونة التنقل */ .nav-badge { position: absolute; transform: translate(-14px, -4px); background: var(--danger); color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }