/* ===================================================================== Smart Accounting — design system (RTL-first, works in LTR too) لون العلامة: العنابي القطري. الخصائص المنطقية (inline-start/end) لدعم الاتجاهين. ===================================================================== */ /* ---------- لون الواجهة (Accent) ---------- كل لون يعرّف نسخة للوضع الفاتح (a-l) وأخرى للداكن (a-d خلفية الأزرار، a-d-ink النصوص والروابط). الاختيار في من كوكي SA_ACCENT (ui_theme() في functions.php). */ :root { --a-l: #8a1538; --a-l-600: #72112e; --a-d: #b0305a; --a-d-600: #c23d68; --a-d-ink: #f394b2; } :root[data-accent="teal"] { --a-l: #0f766e; --a-l-600: #115e59; --a-d: #0d7f76; --a-d-600: #0f8f85; --a-d-ink: #5eead4; } :root[data-accent="navy"] { --a-l: #1e40af; --a-l-600: #1e3a8a; --a-d: #3056d3; --a-d-600: #4169e1; --a-d-ink: #9db8ff; } :root[data-accent="amber"] { --a-l: #92400e; --a-l-600: #78350f; --a-d: #b45309; --a-d-600: #c8610f; --a-d-ink: #fcc44d; } :root[data-accent="graphite"] { --a-l: #334155; --a-l-600: #1e293b; --a-d: #52627a; --a-d-600: #64748b; --a-d-ink: #cbd5e1; } /* ---------- الوضع الفاتح (افتراضي) ---------- */ :root { color-scheme: light; --primary: var(--a-l); --primary-600: var(--a-l-600); --primary-ink: var(--a-l); /* النصوص والأيقونات بلون الواجهة */ --primary-ink-2: var(--a-l-600); --mix-50: 6%; --mix-100: 15%; --primary-50: color-mix(in srgb, var(--primary) var(--mix-50), var(--surface)); --primary-100: color-mix(in srgb, var(--primary) var(--mix-100), var(--surface)); --ink: #1c1917; --ink-2: #44403c; --muted: #78716c; --line: #e7e5e4; --line-2: #d6d3d1; --bg: #faf9f7; --surface: #ffffff; --subtle: #f5f4f2; --sand: var(--sand); --row-hover: #fcfbfa; --header-bg: color-mix(in srgb, var(--bg) 88%, transparent); /* الشريط الجانبي مظلّل بلون الواجهة (يتبع العنابي/الفيروزي/… تلقائياً) — لوحة المنصة تبقى داكنة في .sidebar-admin */ --sidebar-bg: color-mix(in srgb, var(--primary) 13%, var(--bg)); --sidebar-border: color-mix(in srgb, var(--primary) 20%, var(--line)); --sidebar-hover: color-mix(in srgb, var(--primary) 8%, var(--sidebar-bg)); --sidebar-active: var(--surface); --hero-dim: .95; --success: #15803d; --success-bg: #ecfdf3; --success-line: #bbf7d0; --success-ink: #166534; --danger: #b91c1c; --danger-bg: #fef2f2; --danger-line: #fecaca; --danger-ink: #991b1b; --danger-solid: #b91c1c; --warning: #a16207; --warning-bg: #fefce8; --warning-line: #fde68a; --warning-ink: #854d0e; --info: #1d4ed8; --info-bg: #eff6ff; --info-line: #bfdbfe; --info-ink: #1e40af; --violet: #7e22ce; --violet-bg: #f3e8ff; --radius: 14px; --radius-sm: 9px; --shadow-sm: 0 1px 2px rgba(28, 25, 23, .06); --shadow: 0 10px 30px -14px rgba(28, 25, 23, .22); --font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif; --sidebar-w: 232px; } /* ---------- الوضع الداكن: يدوي (data-mode=dark) أو تلقائي حسب إعداد الجهاز (data-mode=system) ---------- */ :root[data-mode="dark"] { color-scheme: dark; --primary: var(--a-d); --primary-600: var(--a-d-600); --primary-ink: var(--a-d-ink); --primary-ink-2: color-mix(in srgb, var(--a-d-ink) 70%, #fff); --mix-50: 15%; --mix-100: 28%; --ink: #f3f0ee; --ink-2: #d6d1cd; --muted: #a39c97; --line: #2f2a2d; --line-2: #3f393c; --bg: #131012; --surface: #1c181a; --subtle: #262124; --sand: #211c1f; --row-hover: rgba(255, 255, 255, .03); --sidebar-bg: color-mix(in srgb, var(--primary) 14%, var(--bg)); --sidebar-border: color-mix(in srgb, var(--primary) 22%, var(--line)); --sidebar-hover: color-mix(in srgb, var(--primary) 12%, var(--sidebar-bg)); --sidebar-active: color-mix(in srgb, var(--primary) 30%, var(--surface)); --hero-dim: .78; --success: #4ade80; --success-bg: rgba(34, 197, 94, .13); --success-line: rgba(74, 222, 128, .3); --success-ink: #86efac; --danger: #f87171; --danger-bg: rgba(239, 68, 68, .13); --danger-line: rgba(248, 113, 113, .32); --danger-ink: #fca5a5; --danger-solid: #dc2626; --warning: #fbbf24; --warning-bg: rgba(245, 158, 11, .13); --warning-line: rgba(251, 191, 36, .3); --warning-ink: #fcd34d; --info: #60a5fa; --info-bg: rgba(59, 130, 246, .14); --info-line: rgba(96, 165, 250, .3); --info-ink: #93c5fd; --violet: #c4a1ff; --violet-bg: rgba(168, 85, 247, .16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --shadow: 0 14px 34px -14px rgba(0, 0, 0, .75); } @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]):not([data-mode="dark"]) { color-scheme: dark; --primary: var(--a-d); --primary-600: var(--a-d-600); --primary-ink: var(--a-d-ink); --primary-ink-2: color-mix(in srgb, var(--a-d-ink) 70%, #fff); --mix-50: 15%; --mix-100: 28%; --ink: #f3f0ee; --ink-2: #d6d1cd; --muted: #a39c97; --line: #2f2a2d; --line-2: #3f393c; --bg: #131012; --surface: #1c181a; --subtle: #262124; --sand: #211c1f; --row-hover: rgba(255, 255, 255, .03); --sidebar-bg: color-mix(in srgb, var(--primary) 14%, var(--bg)); --sidebar-border: color-mix(in srgb, var(--primary) 22%, var(--line)); --sidebar-hover: color-mix(in srgb, var(--primary) 12%, var(--sidebar-bg)); --sidebar-active: color-mix(in srgb, var(--primary) 30%, var(--surface)); --hero-dim: .78; --success: #4ade80; --success-bg: rgba(34, 197, 94, .13); --success-line: rgba(74, 222, 128, .3); --success-ink: #86efac; --danger: #f87171; --danger-bg: rgba(239, 68, 68, .13); --danger-line: rgba(248, 113, 113, .32); --danger-ink: #fca5a5; --danger-solid: #dc2626; --warning: #fbbf24; --warning-bg: rgba(245, 158, 11, .13); --warning-line: rgba(251, 191, 36, .3); --warning-ink: #fcd34d; --info: #60a5fa; --info-bg: rgba(59, 130, 246, .14); --info-line: rgba(96, 165, 250, .3); --info-ink: #93c5fd; --violet: #c4a1ff; --violet-bg: rgba(168, 85, 247, .16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --shadow: 0 14px 34px -14px rgba(0, 0, 0, .75); } } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: var(--primary-ink); text-decoration: none; } a:hover { color: var(--primary-ink-2); } h1, h2, h3 { line-height: 1.3; margin: 0 0 .5em; color: var(--ink); } h1 { font-size: 1.6rem; font-weight: 700; } h2 { font-size: 1.3rem; font-weight: 700; } h3 { font-size: 1.05rem; font-weight: 600; } p { margin: 0 0 1em; } small { font-size: .82em; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--subtle); padding: 2px 6px; border-radius: 5px; } .muted { color: var(--muted); } .small { font-size: .85rem; } .block { display: block; } .num { font-variant-numeric: tabular-nums; } .container { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: 20px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid transparent; background: var(--subtle); color: var(--ink); font: inherit; font-weight: 600; font-size: .93rem; line-height: 1.2; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; white-space: nowrap; } .btn:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid var(--primary-100); outline-offset: 1px; } .btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.08); } .btn-primary:hover { background: var(--primary-600); color: #fff; } .btn-outline { background: var(--surface); border-color: var(--line-2); color: var(--ink); } .btn-outline:hover { border-color: var(--primary); color: var(--primary-ink); } .btn-ghost { background: transparent; color: var(--ink-2); } .btn-ghost:hover { background: var(--subtle); color: var(--ink); } .btn-light { background: #fff; color: var(--a-l); } .btn-light:hover { background: color-mix(in srgb, var(--a-l) 8%, #fff); color: var(--a-l-600); } .btn-whatsapp { background: #1f9d55; color: #fff; } .btn-whatsapp:hover { background: #17864a; color: #fff; } .btn-sm { padding: 7px 12px; font-size: .85rem; } .btn-xs { padding: 3px 9px; font-size: .78rem; border-radius: 6px; vertical-align: middle; } .btn-lg { padding: 13px 24px; font-size: 1rem; } .btn-block { width: 100%; } .btn[disabled] { opacity: .5; cursor: not-allowed; } .link-btn { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; } .link-btn:hover { color: var(--danger); } /* ---------- Badges & alerts ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: .76rem; font-weight: 600; background: var(--subtle); color: var(--ink-2); white-space: nowrap; } .badge-success { background: var(--success-bg); color: var(--success); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .badge-muted { background: var(--subtle); color: var(--muted); } .badge-info { background: var(--info-bg); color: var(--info); } .badge-role-owner { background: var(--primary-50); color: var(--primary-ink); } .badge-role-manager { background: var(--info-bg); color: var(--info); } .badge-role-accountant { background: var(--violet-bg); color: var(--violet); } .badge-role-cashier { background: var(--warning-bg); color: var(--warning); } .alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; border: 1px solid; font-size: .92rem; } .alert i { margin-top: 4px; } /* النص يأخذ المساحة، وزر داخل التنبيه (مثل «إعادة إرسال رابط التأكيد») ينزل لسطر خاص على الجوال بدل أن يخرج عن الإطار */ .alert > span { flex: 1; min-width: 0; } .alert > .inline-form { flex-shrink: 0; } @media (max-width: 600px) { .alert { flex-wrap: wrap; } .alert > .inline-form { flex-basis: 100%; padding-inline-start: 24px; } } .alert-success { background: var(--success-bg); border-color: var(--success-line); color: var(--success-ink); } .alert-error { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-ink); } .alert-warning { background: var(--warning-bg); border-color: var(--warning-line); color: var(--warning-ink); } .alert-info { background: var(--info-bg); border-color: var(--info-line); color: var(--info-ink); } .flash-wrap { padding-top: 16px; } /* ---------- Forms ---------- */ .form { display: flex; flex-direction: column; gap: 16px; } .form-narrow { max-width: 760px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .field { display: flex; flex-direction: column; gap: 6px; } .field-full { grid-column: 1 / -1; } .field > span { font-weight: 600; font-size: .9rem; color: var(--ink-2); } .field > span small { font-weight: 400; color: var(--muted); } .hint { color: var(--muted); font-size: .8rem; } input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], select { width: 100%; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s; } input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); } input[readonly] { background: var(--subtle); color: var(--muted); } input[dir=ltr] { text-align: left; } [dir=rtl] input[dir=ltr]::placeholder { text-align: left; } .form-section { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .form-section legend { font-weight: 700; font-size: .95rem; margin-bottom: 10px; color: var(--ink); padding: 0; } .form-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; } /* «باقتي»: الاستهلاك مقابل حدود الباقة */ .plan-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.15rem; margin: 0 0 12px; } .plan-facts { display: grid; gap: 8px; margin: 0 0 14px; } .plan-facts > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; } .plan-facts dt { color: var(--muted); } .plan-facts dd { margin: 0; font-weight: 600; } .usage-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 14px; } .usage-head { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; margin-bottom: 6px; } .usage-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; } .usage-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); } .usage-bar.is-near > span { background: var(--warning); } .usage-bar.is-full > span { background: var(--danger-solid); } .usage-note { margin: 6px 0 0; color: var(--danger-ink); } .hint-box { margin: 0; padding: 10px 14px; background: var(--info-bg); color: var(--info-ink); border-radius: var(--radius-sm); font-size: .88rem; } .role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .role-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s; } .role-option:hover { border-color: var(--primary); } .role-option:has(input:checked) { border-color: var(--primary); background: var(--primary-50); } .role-option input { margin-top: 5px; accent-color: var(--primary); } .role-option span { display: flex; flex-direction: column; } .role-option small { color: var(--muted); } .switch-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--subtle); cursor: pointer; } .switch-row input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--primary); } .switch-row span { display: flex; flex-direction: column; } .switch-row small { color: var(--muted); } /* ---------- Cards & tables ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); } .card-flush { padding: 0; overflow: hidden; } .card-title { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .card-accent { border-color: var(--primary-100); background: linear-gradient(180deg, var(--primary-50), var(--surface) 65%); } .table-wrap { overflow-x: auto; } /* جداول القوائم بطاقاتٍ على الجوال (table-cards): app.js يلفّ محتوى كل خلية في .cell-v ويضع عنوان عمودها في data-label. على الشاشات الواسعة .cell-v شفافة (display: contents) فلا يتغير شيء */ .table-cards .cell-v { display: contents; } @media (max-width: 600px) { .card:has(> .table-wrap > .table-cards), .card:has(> .table-cards) { background: transparent; border: 0; box-shadow: none; padding: 0; overflow: visible; } .table-wrap:has(> .table-cards) { overflow: visible; } .table-cards, .table-cards tbody, .table-cards tfoot { display: block; } .table-cards thead { display: none; } .table-cards tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; } .table-cards td { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; padding: 0 !important; border: 0 !important; background: none; font-size: .9rem; } [dir=rtl] .table-cards td[dir=ltr] { flex-direction: row-reverse; } .table-cards td::before { content: attr(data-label); color: var(--muted); font-size: .8rem; font-weight: 500; flex-shrink: 0; } .table-cards td.cell-nolabel::before { content: none; } .table-cards .cell-v { display: block; min-width: 0; text-align: end; } .table-cards td.col-check { grid-column: 1; grid-row: 1; } .table-cards td.cell-title { grid-column: 2; grid-row: 1; font-weight: 600; font-size: .96rem; } .table-cards tr:not(:has(> td.col-check)) td.cell-title { grid-column: 1 / 3; } .table-cards td.cell-title .cell-v, .table-cards td.cell-full .cell-v { text-align: start; width: 100%; } .table-cards td.col-actions { grid-column: 3; grid-row: 1; } .table-cards td.cell-title + td { margin-top: 2px; } } .table { width: 100%; border-collapse: collapse; font-size: .92rem; } .table th, .table td { padding: 12px 16px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; } .table th { font-size: .78rem; font-weight: 600; color: var(--muted); background: var(--subtle); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--row-hover); } .table tr.is-muted td { color: var(--muted); } .table tr.is-selected td { background: var(--primary-50); } .col-actions { text-align: end !important; white-space: nowrap; } .cell-user { display: flex; align-items: center; gap: 10px; } .cell-user > div { display: flex; flex-direction: column; } .cell-user strong { display: inline-flex; gap: 6px; align-items: center; } .avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-weight: 700; font-size: .9rem; } .avatar-sm { width: 30px; height: 30px; font-size: .8rem; background: var(--primary-100); color: var(--primary-ink); } /* ---------- Public site ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line); } .site-nav { display: flex; align-items: center; gap: 24px; height: 68px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 1.05rem; } .brand:hover { color: var(--ink); } .brand-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .site-links { display: flex; gap: 22px; } .site-links a { color: var(--ink-2); font-weight: 500; font-size: .93rem; } .site-links a:hover { color: var(--primary-ink); } .site-actions { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; } .hero { padding: 72px 0 64px; background: radial-gradient(900px 400px at 85% -10%, var(--primary-50), transparent 70%), radial-gradient(700px 300px at 0% 110%, var(--sand), transparent 70%); } [dir=ltr] .hero { background: radial-gradient(900px 400px at 15% -10%, var(--primary-50), transparent 70%), radial-gradient(700px 300px at 100% 110%, var(--sand), transparent 70%); } .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: var(--primary-50); color: var(--primary-ink); font-size: .82rem; font-weight: 600; margin-bottom: 18px; } .hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.25; letter-spacing: -.01em; } .lead { font-size: 1.08rem; color: var(--ink-2); max-width: 36em; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 16px; } .hero-note { color: var(--muted); font-size: .9rem; display: flex; align-items: center; gap: 8px; } .hero-note i { color: var(--success); } .hero-visual { position: relative; padding: 24px; } .mock-receipt { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 20px 22px; max-width: 360px; margin-inline: auto; font-variant-numeric: tabular-nums; } .mock-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; padding-bottom: 12px; border-bottom: 1px dashed var(--line-2); margin-bottom: 8px; } .mock-head i { color: var(--primary-ink); } .mock-num { color: var(--muted); font-weight: 500; font-size: .88rem; } .mock-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: .92rem; color: var(--ink-2); } .mock-total { display: flex; justify-content: space-between; padding: 12px 0 4px; margin-top: 6px; border-top: 1px dashed var(--line-2); font-weight: 700; font-size: 1.05rem; } .mock-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; } .mock-qr { font-size: 2rem; color: var(--ink-2); } .mock-float { position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 9px 14px; font-size: .84rem; font-weight: 600; display: flex; gap: 8px; align-items: center; } .mock-float i { color: var(--primary-ink); } .mock-float-a { top: 6px; inset-inline-start: -6px; } .mock-float-b { bottom: 10px; inset-inline-end: -6px; } .section { padding: 72px 0; } .section-alt { background: var(--surface); border-block: 1px solid var(--line); } .section-head { text-align: center; max-width: 640px; margin: 0 auto 40px; } .section-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); } .section-head p { color: var(--muted); } .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .feature-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: border-color .2s, transform .2s, box-shadow .2s; } .feature-card:hover { border-color: var(--primary-100); transform: translateY(-2px); box-shadow: var(--shadow); } .feature-card p { color: var(--muted); margin: 0; font-size: .93rem; } .feature-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-50); color: var(--primary-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 14px; } .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: s; } .step { padding: 8px 4px; text-align: center; } .step p { color: var(--muted); margin: 0; } .step-num { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--primary); color: var(--primary-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 12px; } .pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; } .price-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; display: flex; flex-direction: column; } .price-card.is-featured { border: 2px solid var(--primary); box-shadow: var(--shadow); } .price-ribbon { position: absolute; top: -13px; inset-inline-start: 24px; background: var(--primary); color: #fff; font-size: .76rem; font-weight: 600; padding: 3px 12px; border-radius: 999px; } .price { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 18px; font-variant-numeric: tabular-nums; } .price strong { font-size: 2.2rem; line-height: 1; } .price span { color: var(--muted); font-size: .9rem; } .price-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .price-list li { display: flex; gap: 10px; align-items: center; color: var(--ink-2); font-size: .93rem; font-variant-numeric: tabular-nums; } .price-list i { color: var(--success); font-size: .8rem; } .referral-band { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; } .check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .check-list li { display: flex; gap: 12px; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 500; } .check-list i { color: var(--primary-ink); width: 20px; text-align: center; } .cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--primary); color: #fff; border-radius: 20px; padding: 40px 44px; } .cta-band h2 { color: #fff; margin-bottom: 6px; } .cta-band p { margin: 0; color: rgba(255, 255, 255, .82); } .site-footer { border-top: 1px solid var(--line); padding: 24px 0; color: var(--muted); font-size: .86rem; } .footer-inner { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } /* ---------- Auth ---------- */ .auth-wrap { min-height: calc(100vh - 68px - 74px); display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px; } .auth-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 32px; box-shadow: var(--shadow); } .auth-card-wide { max-width: 640px; } .auth-card h1 { font-size: 1.45rem; } .auth-card .form { margin-top: 20px; } .auth-alt { text-align: center; margin: 20px 0 0; color: var(--muted); font-size: .92rem; } .company-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } /* دعوات الانضمام (صفحة اختيار الشركة) */ .invite-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 6px; } .invite-list h2 { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: 8px; } .invite-card { padding: 14px 16px; } .invite-card p { margin: 0 0 10px; } .invite-card .form-actions form { display: inline; } .company-option { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: inherit; text-align: start; cursor: pointer; transition: border-color .15s, background .15s; } .company-option:hover, .company-option.is-current { border-color: var(--primary); background: var(--primary-50); } .company-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--primary-50); color: var(--primary-ink); display: inline-flex; align-items: center; justify-content: center; } .company-text { flex: 1; display: flex; flex-direction: column; } .company-text small { color: var(--muted); } /* ---------- App shell ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar-bg); color: var(--ink-2); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } /* داخل الشريط المظلّل: التمرير والفواصل من درجته، والنص الخافت أغمق قليلاً ليبقى مقروءاً عليه */ .sidebar:not(.sidebar-admin) { --subtle: var(--sidebar-hover); --line: var(--sidebar-border); --muted: color-mix(in srgb, var(--ink) 66%, var(--sidebar-bg)); } .sidebar .brand { color: var(--ink); padding: 18px 18px 14px; } .sidebar .brand:hover { color: var(--ink); } .side-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px; flex: 1; } .side-label { font-size: .74rem; font-weight: 500; color: var(--muted); padding: 14px 12px 4px; } .side-link { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 9px; color: var(--ink-2); font-size: .92rem; font-weight: 500; } .side-link i { width: 18px; text-align: center; color: var(--muted); } .side-link:hover { background: var(--subtle); color: var(--ink); } /* النشط تظليل خفيف من لون الواجهة ونص بلونه، لا كتلة ممتلئة تسرق العين من المحتوى */ .side-link.is-active { background: var(--sidebar-active); color: var(--primary-ink); font-weight: 600; box-shadow: var(--shadow-sm); } .side-link.is-active i { color: var(--primary-ink); } .side-link.is-soon { color: var(--muted); cursor: default; } .side-link.is-soon:hover { background: none; color: var(--muted); } .side-link.is-soon i { color: var(--line-2); } .side-link em { margin-inline-start: auto; font-style: normal; font-size: .68rem; background: var(--subtle); color: var(--muted); padding: 1px 8px; border-radius: 999px; } .side-logout { padding: 10px; border-top: 1px solid var(--line); } .side-logout button { width: 100%; display: flex; align-items: center; gap: 11px; padding: 8px 12px; background: none; border: 0; border-radius: 9px; color: var(--ink-2); font: inherit; font-size: .92rem; cursor: pointer; text-align: start; } .side-logout button i { width: 18px; text-align: center; color: var(--muted); } .side-logout button:hover { background: var(--danger-bg); color: var(--danger-ink); } .side-logout button:hover i { color: var(--danger-ink); } .bottom-nav { display: none; } .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-height: 48px; padding: 2px 0; background: none; border: 0; font: inherit; font-size: .72rem; font-weight: 500; color: var(--muted); cursor: pointer; } .bottom-nav i { font-size: 1.12rem; } .bottom-nav .is-active { color: var(--primary-ink); font-weight: 600; } .bottom-nav .bn-sell { color: var(--ink); } .bottom-nav .bn-sell i { width: 50px; height: 50px; border-radius: 16px; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-top: -24px; font-size: 1.25rem; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--primary) 70%, transparent); } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; } .topbar-company { display: flex; align-items: center; gap: 10px; min-width: 0; } .topbar-company strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; } .user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: .88rem; } [dir=rtl] .user-chip { padding: 4px 4px 4px 12px; } .user-chip:hover { border-color: var(--primary); color: var(--ink); } .user-chip .avatar { width: 30px; height: 30px; font-size: .8rem; } .icon-btn { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .menu-toggle { display: none; } .app-content { padding: 28px; max-width: 1200px; width: 100%; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .page-head h1 { margin-bottom: 4px; } .page-head p { margin: 0; } .page-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* تلتف على الجوال بدل أن تدفع الصفحة للخارج */ .usage { color: var(--muted); font-size: .88rem; background: var(--subtle); padding: 6px 12px; border-radius: 999px; } .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--muted); margin-bottom: 6px; } .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; } .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; gap: 14px; align-items: center; box-shadow: var(--shadow-sm); } .stat-card small { display: block; color: var(--muted); font-size: .8rem; } .stat-card strong { font-size: 1.15rem; } .stat-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--primary-50); color: var(--primary-ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } /* ---------- لوحة التحكم (تصميم 2026-09-24): رقم بطل واحد، ثم ما يحتاج انتباهاً، ثم المؤشرات والقوائم ---------- */ [dir=ltr] .flip-rtl { transform: scaleX(-1); } .dash-top { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; } .dash-hero { display: flex; flex-direction: column; gap: 6px; box-shadow: none; } .dash-hero-label { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 500; flex-wrap: wrap; } .dash-hero-num { font-size: 2.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } .dash-cur { font-size: .42em; font-weight: 500; color: var(--muted); margin-inline-start: 6px; } .dash-spark { display: block; width: 100%; height: 70px; margin-block: 4px; } .dash-spark .spark-base { stroke: var(--line); stroke-width: 1; } .dash-spark .spark-area { fill: color-mix(in srgb, var(--primary) 12%, transparent); } .dash-spark .spark-line { fill: none; stroke: var(--primary); stroke-width: 2.2; vector-effect: non-scaling-stroke; } .dash-facts { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; margin-top: auto; } .dash-facts small { display: block; color: var(--muted); font-size: .8rem; } .dash-facts strong { font-weight: 600; } .dash-link { margin-inline-start: auto; font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; } .dash-link i { font-size: .75rem; } .dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .dash-card-head .card-title { margin-bottom: 0; } .dash-attention { box-shadow: none; } .dash-att-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); color: var(--ink); } .dash-card-head + .dash-att-item { border-top: 0; } .dash-att-item:hover { color: var(--ink); } .dash-att-item:hover .dash-att-act { text-decoration: underline; } .dash-att-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--subtle); color: var(--ink-2); } .dash-att-icon.is-warn { background: var(--warning-bg); color: var(--warning-ink); } .dash-att-icon.is-info { background: var(--info-bg); color: var(--info-ink); } .dash-att-text strong { display: block; font-weight: 600; font-size: .92rem; line-height: 1.45; } .dash-att-text small { display: block; color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-att-act { color: var(--primary-ink); font-weight: 600; font-size: .85rem; white-space: nowrap; } .dash-calm { color: var(--muted); display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; } .dash-calm i { color: var(--success); } .dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding: 0; margin-bottom: 16px; box-shadow: none; } .dash-kpis > div { padding: 14px 20px; display: flex; flex-direction: column; gap: 2px; } .dash-kpis > div + div { border-inline-start: 1px solid var(--line); } .dash-kpis small { color: var(--muted); font-size: .8rem; } .dash-kpis strong { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; } .dash-kpis .dash-cur { font-size: .6em; } .dash-up { color: var(--success) !important; } .dash-down { color: var(--danger) !important; } .dash-bottom { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; margin-bottom: 20px; } .dash-bottom > .card { box-shadow: none; } .dash-inv-list { padding: 0 20px 6px; } .dash-inv { display: grid; grid-template-columns: 84px minmax(0, 1fr) 48px 84px minmax(0, max-content); gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: .9rem; } .dash-inv:hover { color: var(--ink); background: var(--row-hover); } .dash-inv code { font-size: .78rem; color: var(--ink-2); text-align: end; } .dash-inv-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-inv-who small { display: block; color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; } .dash-inv-time { color: var(--muted); font-size: .82rem; text-align: end; } .dash-inv-amt { text-align: end; font-weight: 600; } .dash-inv-pill { text-align: end; } .dash-bars { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; } .dash-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: .9rem; } .dash-bar > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-bar strong { font-weight: 600; } .dash-bar-track { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--subtle); overflow: hidden; } .dash-bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--primary); opacity: .85; } @media (max-width: 1024px) { .dash-top, .dash-bottom { grid-template-columns: 1fr; } } @media (max-width: 600px) { .dash-hero-num { font-size: 2rem; } .dash-facts { gap: 18px; } .dash-link { margin-inline-start: 0; width: 100%; } .dash-kpis { grid-template-columns: 1fr 1fr; } .dash-kpis > div { padding: 12px 14px; } .dash-kpis > div + div { border-inline-start: 0; } .dash-kpis > div:nth-child(even) { border-inline-start: 1px solid var(--line); } .dash-kpis > div:nth-child(n+3) { border-top: 1px solid var(--line); } .dash-kpis strong { font-size: 1.1rem; } .dash-inv-list { padding: 0 14px 4px; } .dash-inv { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; } .dash-inv code { grid-row: 2; text-align: start; justify-self: start; } .dash-inv-who { grid-column: 1; grid-row: 1; } .dash-inv-amt { grid-column: 2; grid-row: 1; } .dash-inv-time { grid-column: 2; grid-row: 2; } .dash-inv-pill { display: none; } } .todo-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .todo-list li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); } .todo-list li:last-child { border-bottom: 0; } .todo-list i { color: var(--line-2); width: 18px; } .todo-list li.is-done i { color: var(--success); } .todo-list li.is-done, .todo-list li.is-done a { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-2); } .todo-list li.is-soon { color: var(--muted); } .todo-list em { margin-inline-start: auto; font-style: normal; font-size: .72rem; background: var(--subtle); padding: 1px 8px; border-radius: 999px; } .copy-field { display: flex; gap: 8px; margin: 14px 0; } .copy-field input { flex: 1; font-size: .85rem; background: var(--surface); } .ref-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .split-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; } .split-even { grid-template-columns: 1fr 1fr; } .sidebar-backdrop { display: none; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-grid, .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split-grid, .split-even { grid-template-columns: 1fr; } } @media (max-width: 860px) { .site-links { display: none; } .hero-grid, .referral-band, .dash-grid { grid-template-columns: 1fr; } .hero { padding-top: 44px; } .hero-visual { order: -1; max-width: 420px; margin-inline: auto; width: 100%; } .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60; transform: translateX(100%); transition: transform .22s ease; } [dir=ltr] .sidebar { transform: translateX(-100%); } body.sidebar-open .sidebar { transform: none; } body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(28, 25, 23, .45); z-index: 55; } .menu-toggle { display: inline-flex; } .topbar { padding: 0 14px; } .app-content { padding: 20px 16px; } /* تنقّل سفلي في نظام الشركة: الرئيسية، الفواتير، البيع في المنتصف، الأصناف، «المزيد» يفتح القائمة الجانبية */ .layout-app .bottom-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; position: fixed; inset-inline: 0; bottom: 0; z-index: 50; background: var(--surface); border-top: 1px solid var(--line); padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px)); } .layout-app .app-content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } .layout-app .menu-toggle { display: none; } .layout-app .ai-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 600px) { .hide-sm { display: none; } .feature-grid, .pricing-grid, .steps, .stat-grid { grid-template-columns: 1fr; } .form-grid, .role-grid { grid-template-columns: 1fr; } .auth-card { padding: 24px 20px; } .cta-band { padding: 28px 24px; } .section { padding: 52px 0; } .copy-field { flex-direction: column; } .mock-float { display: none; } } /* ---------- Google / Apple sign-in ---------- */ .oauth-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; } .btn-oauth { background: var(--surface); border-color: var(--line-2); color: var(--ink); padding: 11px 16px; } .btn-oauth:hover { border-color: var(--ink-2); color: var(--ink); } .btn-oauth i { font-size: 1.1rem; } .btn-oauth-google i { color: #ea4335; } .btn-oauth-apple { background: #000; border-color: #000; color: #fff; } .btn-oauth-apple:hover { background: #262626; color: #fff; } .divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .85rem; margin-top: 18px; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } .linked-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .linked-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); flex-wrap: wrap; } .linked-list li small { margin-inline-start: auto; color: var(--muted); } .stack { display: flex; flex-direction: column; gap: 20px; } /* ---------- POS devices & PIN ---------- */ .device-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 20px; border: 1px solid var(--primary-100); background: var(--primary-50); border-radius: var(--radius); } .device-banner-text { flex: 1; min-width: 200px; } .empty-state { text-align: center; padding: 32px 20px; color: var(--muted); margin: 0; } .empty-state i { display: block; font-size: 2rem; margin-bottom: 10px; color: var(--line-2); } .span-all { grid-column: 1 / -1; } .pos-head { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .pos-link { margin-top: 12px; } .pin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; } .pin-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); cursor: pointer; text-align: center; background: var(--surface); transition: border-color .15s, background .15s; } .pin-option input { position: absolute; opacity: 0; pointer-events: none; } .pin-option:hover { border-color: var(--primary); } .pin-option:has(input:checked) { border-color: var(--primary); background: var(--primary-50); box-shadow: 0 0 0 3px var(--primary-100); } .pin-option .avatar { width: 46px; height: 46px; font-size: 1.1rem; } .pin-name { font-weight: 600; font-size: .9rem; line-height: 1.3; } input.pin-input { font-size: 1.6rem; letter-spacing: .5em; text-align: center; padding: 12px; } /* ---------- Platform admin panel ---------- */ input[type=number], input[type=search], textarea { width: 100%; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); } input[type=number]:focus, input[type=search]:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); } textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; resize: vertical; } /* لوحة المنصة تبقى داكنة حتى يعرف الأدمن أين هو: نعيد تعريف التوكنز داخلها فقط */ .sidebar-admin { --ink: #f3f0ee; --ink-2: #d6d3d1; --muted: #94a3b8; --subtle: rgba(255,255,255,.06); --line: rgba(255,255,255,.08); --line-2: #475569; --danger-bg: rgba(185,28,28,.2); --danger-ink: #fecaca; --sidebar-border: transparent; background: #151922; } .sidebar-admin .side-link.is-active, .sidebar-admin .side-link.is-active i { background: #334155; color: #fff; box-shadow: none; } .sidebar-admin .brand-mark { background: #334155; } .badge-admin { background: #1e293b; color: #fff; } .badge-ref-pending { background: var(--warning-bg); color: var(--warning); } .badge-ref-active { background: var(--success-bg); color: var(--success); } .badge-ref-ended { background: var(--subtle); color: var(--muted); } .badge-ref-rejected { background: var(--danger-bg); color: var(--danger); } .btn-danger { background: var(--danger-solid); color: #fff; } .btn-danger:hover { background: color-mix(in srgb, var(--danger-solid) 85%, #000); color: #fff; } .btn-danger-text { color: var(--danger); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; } .card-head .card-title { margin-bottom: 12px; } .card-head-flat { padding: 0; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; font-size: .92rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; } .filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; } .filter-bar input[type=search] { flex: 1; min-width: 220px; width: auto; } .filter-bar input[type=number] { width: 160px; } .filter-bar select { width: auto; min-width: 140px; } .tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .tab { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-size: .88rem; background: var(--surface); } .tab:hover { border-color: var(--ink-2); color: var(--ink); } .tab.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); } .pager { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; } .inline-form { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .inline-form input[type=text] { width: 170px; padding: 6px 10px; font-size: .85rem; } .amount-pos { color: var(--success); font-weight: 600; } .amount-neg { color: var(--danger); font-weight: 600; } .nowrap { white-space: nowrap; } .table-compact th, .table-compact td { padding: 9px 12px; font-size: .86rem; } details.json summary { cursor: pointer; color: var(--primary-ink); font-size: .82rem; } details.json pre { white-space: pre-wrap; word-break: break-word; font-size: .74rem; background: var(--subtle); padding: 8px 10px; border-radius: 6px; max-width: 460px; margin: 6px 0 0; } .todo-list li.is-ok i { color: var(--success); } .todo-list li:not(.is-ok) > i.fa-circle-exclamation { color: var(--warning); } .pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; align-items: start; } .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } .split-wide { grid-template-columns: minmax(0, 1fr) 320px; } @media (max-width: 1024px) { .settings-grid, .split-wide { grid-template-columns: 1fr; } } /* ===================================================================== النظام المحاسبي والعمليات ===================================================================== */ .col-num { text-align: end !important; font-variant-numeric: tabular-nums; white-space: nowrap; } /* في الواجهة العربية خلايا الأرقام dir=ltr فكان `end` فيها = يسار بينما عنوان العمود يمين — نثبّت اليمين للاثنين ليقع الرقم تحت عنوانه مباشرة (ملاحظة رائد 2026-09-16) */ [dir=rtl] .table .col-num, [dir=rtl] .table td[dir=ltr], [dir=rtl] .table th[dir=ltr] { text-align: right !important; } .form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--ink-2); } .check-inline input { accent-color: var(--primary); } .filter-bar input[type=date] { width: auto; padding: 8px 10px; font: inherit; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); } input[type=date], input[type=email] { font: inherit; } input.amount { text-align: left; font-variant-numeric: tabular-nums; } input.big-input { font-size: 1.5rem; padding: 12px; text-align: center; } .big { font-size: 1.25rem; } .input-group { display: flex; gap: 4px; } .input-group input { flex: 1; } .kv-inline { grid-template-columns: max-content 1fr max-content 1fr; } .tree-indent { display: inline-block; padding-inline-start: calc(var(--lvl, 0) * 18px); } .table tr.is-header td, .table tr.is-header th { background: var(--subtle); } .lines-table select, .lines-table input[type=text] { padding: 7px 9px; font-size: .9rem; } .lines-table td { padding: 6px 8px; } .btn-remove-line, .lines-table .icon-btn { width: 32px; height: 32px; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; } .chip { background: var(--subtle); border-radius: 999px; padding: 4px 12px; font-size: .88rem; } .stat-card.is-warn, .stat-icon.is-warn { background: var(--warning-bg); color: var(--warning); } a.stat-card { color: inherit; } a.stat-card:hover { border-color: var(--primary-100); } .pager-links { display: flex; gap: 6px; } .row-pos th { color: var(--success); } .row-neg th { color: var(--danger); } .print-head { display: none; } .card-head .inline-form input[type=date] { width: auto; padding: 6px 8px; font: inherit; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); } @media (max-width: 860px) { .form-grid-3 { grid-template-columns: 1fr; } .kv-inline { grid-template-columns: max-content 1fr; } } /* ---------- شاشة البيع ---------- */ body.layout-pos { background: var(--bg); } .pos-shell { display: flex; flex-direction: column; min-height: 100vh; } .pos-topbar { height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; } .pos-topbar .brand-mark { width: 32px; height: 32px; border-radius: 8px; } .pos-topbar-info { display: flex; gap: 6px; flex-wrap: wrap; } .pos-topbar .brand { flex-shrink: 0; } .pos-back { flex-shrink: 0; font-weight: 600; } .pos-back i { color: var(--primary-ink); } /* قائمة المستخدم في شاشة البيع: الاسم والمظهر واللغة ثم الخروج منفصلاً في آخرها */ .user-menu summary.user-chip { background: var(--surface); } .user-menu summary.user-chip i { font-size: .7rem; color: var(--muted); } .user-menu[open] summary.user-chip { border-color: var(--primary); } .user-menu-list { min-width: 260px; padding: 10px; gap: 8px; margin-top: 6px; } .user-menu-head { display: flex; flex-direction: column; padding: 2px 4px 6px; } .user-menu-head small { color: var(--muted); font-size: .8rem; } .user-menu-list .theme-label { padding-inline: 4px; } .user-menu-list form button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: .9rem; cursor: pointer; text-align: start; } .user-menu-list form button i { width: 16px; text-align: center; } .pos-content { flex: 1; padding: 12px; } .pos-content .alert { margin-bottom: 10px; } .pos-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 12px; height: calc(100vh - 56px - 24px); } .pos-catalog { display: flex; flex-direction: column; gap: 10px; min-height: 0; } .pos-search { position: relative; display: flex; gap: 8px; align-items: center; } .pos-search > i { position: absolute; inset-inline-start: 14px; color: var(--muted); } .pos-search input { flex: 1; padding: 13px 14px; padding-inline-start: 40px; font-size: 1.05rem; border-radius: 12px; } .pos-scanner { max-width: 420px; border-radius: 12px; overflow: hidden; background: #000; } .pos-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; flex-shrink: 0; } .pos-cats .tab { flex-shrink: 0; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: .86rem; cursor: pointer; } .pos-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; gap: 8px; overflow-y: auto; align-content: start; padding: 2px; } .pos-product { display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: start; padding: 10px 12px; min-height: 92px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font: inherit; cursor: pointer; transition: border-color .12s, transform .12s; } .pos-product:hover { border-color: var(--primary); } .pos-product:active { transform: scale(.97); } .pos-product.is-out { opacity: .5; } /* السعر والكمية أولاً على سطر واحد ثم الاسم بسطرين ثابتين — فتقع الأرقام في الموضع نفسه في كل البطاقات (ملاحظة رائد) */ .pos-product-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .pos-product-name { font-weight: 600; font-size: .9rem; line-height: 1.3; height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .pos-product-price { color: var(--primary-ink); font-weight: 700; font-size: 1.02rem; white-space: nowrap; } .pos-product-stock { font-size: .74rem; color: var(--muted); white-space: nowrap; } .pos-product-img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; flex: none; object-fit: contain; border-radius: 8px; background: #fff; margin-bottom: 2px; } .pos-product.has-img { padding: 8px; } .pos-product.has-img .pos-product-name { font-size: .84rem; } .thumb { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line); vertical-align: middle; margin-inline-end: 8px; } .product-image-row { display: flex; gap: 14px; align-items: flex-start; } .product-image-preview { width: 120px; height: 120px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--line); } .stack-sm { display: flex; flex-direction: column; gap: 6px; } .check-row { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; cursor: pointer; } /* ---------- تصدير البيانات ---------- */ .export-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 12px; } .export-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } .export-icon { font-size: 1.3rem; color: var(--primary-ink); width: 28px; text-align: center; } .export-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .export-body small { font-size: .8rem; } .export-all { grid-column: 1 / -1; border-color: var(--primary); } /* ---------- العبوات والأحجام ---------- */ .pack-templates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; } .pack-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .pack-option { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font: inherit; cursor: pointer; } .pack-option:hover, .pack-option:focus { border-color: var(--primary); outline: none; } .pack-option strong { color: var(--primary-ink); } .pos-cart { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; min-height: 0; overflow: hidden; } .pos-cart-head { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); } .pos-cart-head select { flex: 1; } .pos-lines { flex: 1; overflow-y: auto; padding: 6px 10px; } .pos-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 78px 30px 30px; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line); } .pos-line-main { display: flex; flex-direction: column; min-width: 0; } .pos-line-main strong { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pos-qty { display: flex; align-items: center; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; } .pos-qty button { width: 30px; height: 32px; border: 0; background: var(--subtle); cursor: pointer; color: var(--ink-2); font-size: .8rem; } .pos-qty input { width: 52px; border: 0; background: var(--surface); color: var(--ink); text-align: center; padding: 6px 2px; font: inherit; font-weight: 600; } .pos-line-total { text-align: end; font-size: .95rem; } .pos-line .icon-btn { width: 30px; height: 30px; border: 0; color: var(--muted); } .pos-totals { padding: 12px; border-top: 1px solid var(--line); background: var(--subtle); display: flex; flex-direction: column; gap: 8px; } .pos-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .pos-row-sm { font-size: .9rem; color: var(--ink-2); } .pos-row-sm input { width: 120px; padding: 6px 8px; } .pos-total { font-size: 1.35rem; font-weight: 700; padding-top: 6px; border-top: 1px dashed var(--line-2); } .pos-totals .btn-lg { margin-top: 4px; font-size: 1.1rem; padding: 15px; } .pos-open-wrap { display: flex; justify-content: center; padding: 40px 16px; } .pos-open-card { width: 100%; max-width: 420px; text-align: center; align-items: center; } .pos-open-card .stat-icon { width: 56px; height: 56px; font-size: 1.4rem; } .pos-open-card .field { width: 100%; text-align: start; } .pos-toast { position: fixed; bottom: 24px; inset-inline-start: 50%; transform: translate(50%, 20px); background: var(--ink); color: var(--surface); padding: 12px 18px; border-radius: 12px; font-size: .92rem; opacity: 0; transition: opacity .2s, transform .2s; z-index: 200; box-shadow: var(--shadow); max-width: 90vw; } [dir=ltr] .pos-toast { transform: translate(-50%, 20px); } .pos-toast.show { opacity: 1; transform: translate(50%, 0); } [dir=ltr] .pos-toast.show { transform: translate(-50%, 0); } .pos-toast.is-error { background: var(--danger-solid); color: #fff; } .modal { position: fixed; inset: 0; background: rgba(28, 25, 23, .5); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 100; } .modal-card { width: 100%; max-width: 460px; max-height: 95vh; overflow-y: auto; background: var(--surface); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); } .modal-head { display: flex; justify-content: space-between; align-items: center; } .modal-head h2 { margin: 0; } .pay-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; padding: 10px 14px; background: var(--primary-50); border-radius: 10px; } .pay-total strong { font-size: 1.6rem; color: var(--primary-ink); } .pay-row { display: grid; grid-template-columns: 1fr 130px auto; gap: 6px; align-items: center; margin-bottom: 6px; } .pay-row input { font-size: 1.1rem; font-weight: 600; } .pay-quick { display: flex; flex-wrap: wrap; gap: 6px; } .pay-summary { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px dashed var(--line-2); font-size: 1rem; } .done-card { text-align: center; align-items: center; position: relative; } .done-close { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; border-color: transparent; background: var(--subtle); } .done-close:hover { color: var(--ink); background: var(--line); } .done-icon { font-size: 3rem; color: var(--success); } .done-amounts { display: flex; gap: 24px; justify-content: center; } .done-amounts small { display: block; color: var(--muted); } .done-amounts strong { font-size: 1.3rem; } .done-actions { display: flex; gap: 8px; } .done-qr { display: flex; justify-content: center; padding: 8px; } .done-email { width: 100%; justify-content: center; } .done-email input { flex: 1; } /* الإلغاء بعيد عن الأزرار المعتادة: تذييل بفاصل، رابط خافت في جهة النهاية؛ ولوحته تحذير أحمر هادئ */ .done-foot { align-self: stretch; display: flex; justify-content: flex-end; margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--line-2); } .done-void-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; background: none; border: 0; border-radius: 6px; font: inherit; font-size: .82rem; color: var(--muted); cursor: pointer; } .done-void-link:hover, .done-void-link:focus-visible { color: var(--danger-ink); background: var(--danger-bg); } .done-void-panel { align-self: stretch; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding: 14px; text-align: start; background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: var(--radius-sm); } .done-void-warn { display: flex; gap: 8px; margin: 0; font-size: .86rem; line-height: 1.6; color: var(--danger-ink); } .done-void-warn i { margin-top: 4px; } .done-void-panel .check-row { color: var(--ink); } .done-void-panel .check-row input { accent-color: var(--danger-solid); } .done-void-btns { display: flex; gap: 8px; flex-wrap: wrap; } .btn-danger:disabled { opacity: .45; cursor: not-allowed; } @media (max-width: 900px) { .pos-grid { grid-template-columns: minmax(0, 1fr); height: auto; } /* minmax(0,…) لا 1fr: شريط التصنيفات العريض كان يفرض عرضه على العمود فيُرسم البيع بعرض 644px على جوال 390px (2026-09-24) */ /* السلة ورقة سفلية: مطوية = شريط بعدد الأصناف والإجمالي وزر الدفع تحت الإبهام، ومفتوحة = السلة كاملة (تصميم 2026-09-24) */ .pos-content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } .pos-products { max-height: none; overflow: visible; } .pos-cart { position: fixed; inset-inline: 0; bottom: 0; z-index: 70; max-height: 88vh; border-radius: 18px 18px 0 0; border-bottom: 0; box-shadow: 0 -12px 30px -12px rgba(28, 25, 23, .3); } .pos-cart:not(.is-open) .pos-cart-head, .pos-cart:not(.is-open) .pos-lines, .pos-cart:not(.is-open) .pos-totals .pos-row { display: none; } .pos-cart:not(.is-open) .pos-totals { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 0; } .pos-cart:not(.is-open) .pos-totals .btn-lg { margin: 0; width: auto; flex-shrink: 0; padding: 13px 18px; } .pos-cart:not(.is-open) #pos-pay-amount { display: none; } .pos-cart-toggle { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; background: none; border: 0; padding: 4px 2px; font: inherit; color: var(--ink); cursor: pointer; text-align: start; } .pos-cart.is-open .pos-cart-toggle { order: -1; } .pos-cart.is-open .pos-cart-toggle i { transform: rotate(180deg); } .pos-cart.is-open .pos-cart-sum small { display: none; } .pos-cart-count { min-width: 34px; height: 34px; padding: 0 6px; border-radius: 10px; background: var(--primary-50); color: var(--primary-ink); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .pos-cart-sum { display: flex; flex-direction: column; line-height: 1.25; margin-inline-end: auto; } .pos-cart-sum small { color: var(--muted); font-size: .76rem; } .pos-cart-sum strong { font-size: 1.15rem; } .pos-cart-toggle i { color: var(--muted); transition: transform .2s; } .pos-cart-backdrop { position: fixed; inset: 0; background: rgba(28, 25, 23, .45); z-index: 65; } } .pos-cart-toggle, .pos-cart-backdrop { display: none; } /* اللوحي (600–900): أزرار شريط البيع العلوي بأيقونات فقط ومعلومات الوردية تُقصّ، وإلا دفعت الصفحة للخارج */ @media (max-width: 900px) { .pos-topbar .hide-sm { display: none; } .pos-topbar-info { flex: 1; min-width: 0; overflow: hidden; flex-wrap: nowrap; } .pos-topbar-info .badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 900px) { .pos-cart-toggle { display: flex; } .pos-cart-backdrop:not([hidden]) { display: block; } } /* ---------- الإيصال (80mm) ---------- */ .bare-main { padding: 20px 12px; display: flex; justify-content: center; } .receipt { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 16px; font-size: .88rem; font-variant-numeric: tabular-nums; } .receipt-head { text-align: center; padding-bottom: 10px; border-bottom: 1px dashed var(--line-2); } .receipt-head h1 { font-size: 1.15rem; margin-bottom: 4px; } .receipt-meta { padding: 8px 0; border-bottom: 1px dashed var(--line-2); display: flex; flex-direction: column; gap: 2px; } .receipt-items { width: 100%; border-collapse: collapse; margin: 6px 0; } .receipt-items th { font-size: .74rem; color: var(--muted); text-align: start; padding: 4px 2px; border-bottom: 1px solid var(--line); } .receipt-items td { padding: 5px 2px; vertical-align: top; border-bottom: 1px dotted var(--line); } .receipt-items .r { text-align: end; } .receipt-totals { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-top: 1px dashed var(--line-2); } .receipt-totals > div { display: flex; justify-content: space-between; } .receipt-grand { font-weight: 700; font-size: 1.05rem; padding: 4px 0; } .receipt-foot { text-align: center; padding-top: 10px; border-top: 1px dashed var(--line-2); } .receipt-qr { display: flex; justify-content: center; margin-bottom: 4px; } .receipt-actions { text-align: center; margin-top: 12px; } @media print { .no-print, .bottom-nav, .sidebar, .topbar, .pos-topbar, .site-header, .site-footer, .filter-bar, .page-actions, .sidebar-backdrop { display: none !important; } body { background: #fff; } .app-content, .bare-main { padding: 0; max-width: none; } .card, .receipt { border: 0; box-shadow: none; border-radius: 0; } .print-head { display: block; margin-bottom: 12px; } .print-head h1 { font-size: 1.2rem; margin: 0; } .receipt { max-width: none; width: 72mm; padding: 0; font-size: 11px; } /* الطابعات الحرارية تبدأ الطباعة تحت القاطع فتُفقد أول سنتيمتر — الهامش يُضبط من إعدادات الإيصال */ .receipt { padding-top: var(--receipt-top, 8mm); } @page { margin: 6mm; } } /* منطقة الحذف أسفل نموذج الصنف */ .danger-zone { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; border-color: var(--danger-line); } .danger-zone p { margin: 4px 0 0; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* العودة إلى صف الصنف بعد التعديل: الرابط ينتهي بـ #p- فيُبرز الصف ويُمرَّر إليه تحت الشريط العلوي */ .table tr[id] { scroll-margin-top: 84px; } .table tr:target td { background: var(--primary-50); box-shadow: inset 3px 0 0 var(--primary); } /* قناة الطلب في شاشة البيع: تنبيه تحت القائمة */ .pos-channel-hint { width: 100%; margin: 0; font-size: .82rem; color: var(--muted); } .pos-channel-hint.is-warn { color: var(--warning-ink); } .pos-channel-hint a { text-decoration: underline; } /* تقرير إغلاق اليوم */ .daily-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .daily-stats { padding: 16px 16px 0; margin-bottom: 0; } .daily-stats .stat-card { box-shadow: none; } .daily-grid { padding: 16px; } .daily-h { font-size: .95rem; margin: 0 0 8px; padding: 0 16px; display: flex; align-items: center; gap: 8px; } .daily-grid .daily-h { padding: 0; } .daily-grid .daily-h + .table + .daily-h { margin-top: 18px; } .report > .table-wrap { margin-top: 0; } @media print { .daily-stats { grid-template-columns: repeat(4, 1fr); } .daily-grid { grid-template-columns: 1fr 1fr; } } /* المساعد الذكي: زر عائم في الجهة المقابلة للقائمة الجانبية + لوحة دردشة */ .ai-fab { position: fixed; bottom: 22px; inset-inline-end: 22px; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; font-size: 1.15rem; box-shadow: var(--shadow); cursor: pointer; z-index: 90; display: inline-flex; align-items: center; justify-content: center; } .ai-fab:hover { filter: brightness(1.08); } .ai-panel { position: fixed; bottom: 84px; inset-inline-end: 22px; width: min(400px, calc(100vw - 32px)); height: min(600px, calc(100vh - 110px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); z-index: 95; display: flex; flex-direction: column; overflow: hidden; } .ai-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--subtle); } .ai-head strong { flex: 1; font-size: .95rem; } .ai-head .icon-btn { width: 32px; height: 32px; } .ai-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .ai-msg { max-width: 88%; padding: 8px 12px; border-radius: 12px; font-size: .9rem; line-height: 1.6; } .ai-msg p { margin: 0; white-space: pre-line; } .ai-msg.is-bot { align-self: flex-start; background: var(--subtle); border: 1px solid var(--line); } .ai-msg.is-user { align-self: flex-end; background: var(--primary); color: #fff; } .ai-msg.is-error { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-ink); } .ai-typing span { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--muted); animation: ai-blink 1.2s infinite; } .ai-typing span:nth-child(2) { animation-delay: .2s; } .ai-typing span:nth-child(3) { animation-delay: .4s; } @keyframes ai-blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } } .ai-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; } .ai-chips button { font: inherit; font-size: .8rem; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; } .ai-chips button:hover { border-color: var(--primary); color: var(--primary-ink); } .ai-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: flex-end; } .ai-input textarea { flex: 1; resize: none; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); font: inherit; background: var(--surface); color: var(--ink); min-height: 40px; } .ai-foot { margin: 0; padding: 0 12px 8px; font-size: .72rem; } .badge.is-warn { background: var(--warning-bg); color: var(--warning-ink); } @media (max-width: 600px) { .ai-panel { bottom: 0; inset-inline: 0; width: 100vw; height: 85vh; border-radius: 16px 16px 0 0; } } @media print { .ai-fab, .ai-panel { display: none !important; } } /* لوحة المنصة: الذكاء الاصطناعي (cp_ai) */ .ai-logo { width: 30px; height: 30px; border-radius: 9px; background: var(--primary-50); color: var(--primary-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; flex-shrink: 0; } .ai-pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .ai-pick { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; } .ai-pick input { accent-color: var(--primary); margin: 0; } .ai-pick:has(input:checked) { border-color: var(--primary); background: var(--primary-50); } .ai-pick.is-nokey .ai-pick-text { opacity: .7; } .ai-pick-text { display: flex; flex-direction: column; flex: 1; min-width: 0; } .ai-pick-text strong, .ai-pick-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; } .ai-pick-text small { color: var(--muted); font-size: .78rem; } .ai-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); margin-inline-end: 6px; vertical-align: middle; } .ai-dot.is-ok { background: var(--success); } .ai-prov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .ai-prov .card-title { display: flex; align-items: center; gap: 10px; margin: 0; } @media (max-width: 860px) { .ai-prov-grid { grid-template-columns: 1fr; } } /* قائمة إجراءات الصف (details) */ .menu { position: relative; display: inline-block; } .menu summary { list-style: none; cursor: pointer; } .menu summary::-webkit-details-marker { display: none; } .menu-list { position: absolute; top: 100%; inset-inline-end: 0; z-index: 30; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; text-align: start; } .menu-list a, .menu-list > button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--ink); font-size: .9rem; white-space: nowrap; } .menu-list > button { background: none; border: 0; font: inherit; font-size: .9rem; cursor: pointer; text-align: start; width: 100%; } .menu-list a:hover, .menu-list > button:hover { background: var(--subtle); } .menu-list a i, .menu-list > button i { width: 16px; text-align: center; color: var(--muted); } .menu-list hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; } .menu-list .menu-danger, .menu-list .menu-danger i { color: var(--danger-ink); } .menu-list .menu-danger:hover { background: var(--danger-bg); } .col-check { width: 34px; text-align: center; } .bulk-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--primary-50); border-bottom: 1px solid var(--line); } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; } .kv dt { color: var(--muted); font-size: .88rem; } .kv dd { margin: 0; } .product-detail { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; } .pack-option.is-out { opacity: .45; } .stack-sm { display: flex; flex-direction: column; gap: 10px; } /* الإيصال: الشعار ومقاس 58 مم */ .receipt-logo { display: block; max-height: 64px; max-width: 160px; margin: 0 auto 6px; object-fit: contain; } .receipt.paper-58 { max-width: 280px; font-size: .82rem; } @media print { .receipt.paper-58 { width: 50mm; font-size: 10px; } .receipt-logo { max-height: 14mm; filter: grayscale(1); } } /* ---------- الصفحة الرئيسية (Split Home) ---------- */ .split-home { display: flex; min-height: calc(100vh - 68px); } .split-home-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; position: relative; isolation: isolate; } /* نقش هندسي خفيف بلون الواجهة، يتلاشى خلف النموذج */ .home-pattern { position: absolute; inset: 0; z-index: -1; background: var(--primary); opacity: .07; pointer-events: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='black' stroke-width='1.1'%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3Crect x='17' y='17' width='22' height='22' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 0l9 9M56 0l-9 9M0 56l9-9M56 56l-9-9'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 56px repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='black' stroke-width='1.1'%3E%3Crect x='17' y='17' width='22' height='22'/%3E%3Crect x='17' y='17' width='22' height='22' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 0l9 9M56 0l-9 9M0 56l9-9M56 56l-9-9'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 56px repeat; } .split-home-main::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 58% 52% at 50% 44%, var(--bg) 42%, transparent 100%); } .auth-card-home { box-shadow: none; border: 0; background: transparent; padding: 0; animation: fade-up .6s ease both; } .home-mark { width: 52px; height: 52px; border-radius: 15px; font-size: 1.3rem; margin-bottom: 16px; box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--primary) 75%, transparent); } .home-quick-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 580px; margin-top: 32px; animation: fade-up .6s .15s ease both; } .quick-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; text-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; font: inherit; color: var(--ink); cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; } .quick-card:hover { border-color: var(--primary-100); transform: translateY(-2px); box-shadow: var(--shadow); } .quick-card .feature-icon { width: 36px; height: 36px; font-size: .95rem; margin: 0; border-radius: 10px; flex-shrink: 0; } .quick-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .quick-text strong { font-size: .92rem; } .quick-text small { color: var(--muted); font-size: .78rem; line-height: 1.45; } /* الصورة ثابتة بارتفاع الشاشة حتى تبقى رسالتها ظاهرة مهما طال عمود النموذج */ .split-home-visual { width: 44%; position: sticky; top: 84px; align-self: flex-start; height: calc(100vh - 68px - 32px); margin-block: 16px; margin-inline-end: 16px; border-radius: 24px; overflow: hidden; isolation: isolate; background: var(--sand); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06); } .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(var(--hero-dim)) contrast(.92) saturate(.88); transform-origin: 60% 40%; animation: hero-zoom 30s ease-in-out infinite alternate; } .hero-image-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--primary) 84%, #000) 0%, color-mix(in srgb, var(--primary) 48%, transparent) 34%, transparent 64%); } .hero-caption { position: absolute; inset-inline: 32px; bottom: 32px; color: #fff; animation: fade-up .7s .25s ease both; } .hero-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); margin-bottom: 12px; } .hero-caption h2 { color: #fff; font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.4; margin-bottom: 14px; max-width: 22em; text-shadow: 0 2px 14px rgba(0, 0, 0, .28); } .hero-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .hero-chips li { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24); backdrop-filter: blur(6px); } @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.08); } } @media (prefers-reduced-motion: reduce) { .hero-image, .auth-card-home, .home-quick-links, .hero-caption { animation: none; } } @media (max-width: 900px) { .split-home { flex-direction: column; min-height: 0; } .split-home-visual { order: -1; position: relative; top: auto; align-self: stretch; width: auto; height: 240px; margin: 12px 12px 0; border-radius: 20px; } .hero-caption { inset-inline: 18px; bottom: 18px; } .hero-kicker { display: none; } .hero-caption h2 { font-size: 1.1rem; margin-bottom: 10px; } .hero-chips { gap: 6px; } .hero-chips li { font-size: .74rem; padding: 4px 10px; } .split-home-main { padding: 28px 20px 40px; } .home-quick-links { grid-template-columns: 1fr; margin-top: 28px; } .quick-card { flex-direction: row; align-items: center; } } /* ---------- Modals (Dialog) ---------- */ .native-modal { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; } .native-modal::backdrop { background: rgba(28, 25, 23, .5); backdrop-filter: blur(4px); } /* يأخذ عرض محتواه؛ نحدد العرض صراحة حتى تتوزع البطاقات أعمدة */ .native-modal .modal-card-lg { width: min(760px, calc(100vw - 32px)); max-width: 760px; } .native-modal .modal-card-xl { width: min(1024px, calc(100vw - 32px)); max-width: 1024px; } /* ---------- قنوات الطلب + إلغاء الفاتورة ---------- */ .pos-cart-head { flex-wrap: wrap; } .pos-channel-row { display: flex; gap: 8px; width: 100%; } .pos-channel-row select { flex: 1; } .pos-channel-row input { flex: 1; min-width: 0; } .receipt { position: relative; } .receipt-channel { margin-top: 4px; } .receipt.is-voided .receipt-items, .receipt.is-voided .receipt-totals { opacity: .55; } .receipt-void-stamp { position: absolute; top: 42%; inset-inline: 0; text-align: center; font-size: 2.6rem; font-weight: 800; letter-spacing: .1em; color: var(--danger); border: 4px solid var(--danger); border-radius: 12px; width: max-content; margin: 0 auto; padding: 4px 22px; transform: rotate(-14deg); opacity: .8; pointer-events: none; } @media print { .receipt-void-stamp { color: #000; border-color: #000; } } /* الديمو: ختم على كل مستند + شريط أعلى النظام */ .receipt-demo-stamp { display: block; text-align: center; font-size: .78rem; font-weight: 700; color: var(--info-ink); background: var(--info-bg); border: 2px dashed var(--info-line); border-radius: 8px; width: max-content; max-width: 100%; margin: 0 auto 8px; padding: 3px 10px; } @media print { .receipt-demo-stamp { color: #000; border-color: #000; } } .demo-banner a { font-weight: 700; text-decoration: underline; } .demo-link { margin-top: 12px; } .demo-hint { font-size: .85rem; margin: 6px 0 0; text-align: center; } /* التحقق المبسّط (captcha) */ .captcha-row { display: flex; align-items: center; gap: 10px; } .captcha-img { border: 1px solid var(--line); border-radius: 8px; flex: none; background: #faf7f2; } .captcha-row input { flex: 1; min-width: 0; font-size: 1.1rem; text-align: center; } .hp-field { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; } .demo-points { margin: 12px 0 4px; padding-inline-start: 20px; color: var(--muted); font-size: .9rem; line-height: 1.8; } /* بوابة الديمو لمن هو داخل حسابه: تذكير صريح + العودة، ودخول الديمو خيار هادئ منفصل */ .demo-signed-in { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } .demo-signed-in p { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; background: var(--primary-50); border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; line-height: 1.6; } .demo-signed-in p i { color: var(--primary-ink); margin-top: 4px; } .demo-switch { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-2); } .demo-switch summary { cursor: pointer; color: var(--muted); font-size: .9rem; text-align: center; list-style: none; } .demo-switch summary::-webkit-details-marker { display: none; } .demo-switch summary:hover { color: var(--ink); } .demo-switch[open] summary { margin-bottom: 8px; color: var(--ink); } .done-void { margin-top: 6px; } /* الخروج التلقائي (idle.js): عدّاد في شريط شاشة البيع، واختيار المدة، والتنبيه قبل دقيقتين */ .idle-chip { gap: 6px; font-variant-numeric: tabular-nums; } .idle-chip i { color: var(--muted); } .idle-chip.is-warn, .idle-chip.is-warn i { color: var(--warning-ink); background: var(--warning-bg); } .idle-card { max-width: 420px; } .idle-seg { margin: 4px 0; } .idle-seg button { padding: 10px 4px; font-size: .88rem; } .idle-risk { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: var(--radius-sm); } .idle-risk p { display: flex; gap: 8px; margin: 0; font-size: .86rem; line-height: 1.6; color: var(--danger-ink); } .idle-risk p i { margin-top: 4px; } .idle-risk .check-row { color: var(--ink); align-items: flex-start; } .idle-risk .check-row input { accent-color: var(--danger-solid); margin-top: 3px; } .idle-btns { display: flex; gap: 8px; flex-wrap: wrap; } .idle-btns .btn-primary:disabled { opacity: .45; cursor: not-allowed; } .idle-warn-card { text-align: center; align-items: center; } .idle-warn-icon { font-size: 2.2rem; color: var(--warning); } .idle-warn-card h2 { margin: 0; } .idle-warn-time { font-size: 2.4rem; font-weight: 700; margin: 0; color: var(--warning-ink); font-variant-numeric: tabular-nums; } /* ---------- حذف الشركة ---------- */ label.check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; } label.check input { margin-top: 4px; } /* ---------- المظهر: زر الوضع ولون الواجهة ---------- */ body { accent-color: var(--primary); } .theme-menu summary { list-style: none; } .theme-menu summary::-webkit-details-marker { display: none; } .theme-panel { min-width: 250px; padding: 12px; gap: 8px; } .theme-label { font-size: .76rem; font-weight: 600; color: var(--muted); } .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--subtle); border-radius: 10px; margin-bottom: 4px; } .seg button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; } .seg button:hover { color: var(--ink); } .seg button[aria-pressed="true"] { background: var(--surface); color: var(--primary-ink); box-shadow: var(--shadow-sm); } .swatches { display: flex; gap: 10px; padding: 2px; } .swatch { position: relative; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid var(--surface); background: var(--sw); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; } .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw); } .swatch[aria-pressed="true"]::after { content: '\f00c'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: .7rem; color: #fff; } .sidebar { border-inline-end: 1px solid var(--sidebar-border); } /* بطاقات الأسعار: وصف الباقة وسطر يوضح طريقة الدفع */ .pricing-grid-auto { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .pricing-grid-auto .price-card { padding: 24px 18px 18px; } .price-name { font-size: 1.1rem; margin-bottom: 4px; } .price-desc { color: var(--muted); font-size: .84rem; line-height: 1.5; margin: 0 0 14px; min-height: 2.6em; } .price-note { color: var(--muted); font-size: .82rem; line-height: 1.5; margin: -10px 0 16px; min-height: 2.5em; } .price-save { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--success-bg); color: var(--success); font-weight: 600; font-size: .74rem; } .price-card.is-yearly { border-color: var(--warning-line); } .price-ribbon-yearly { display: inline-flex; align-items: center; gap: 5px; background: var(--warning-bg); color: var(--warning-ink); border: 1px solid var(--warning-line); } @media (max-width: 600px) { .site-nav { gap: 12px; } .site-actions { gap: 4px; } /* قائمة المظهر على الجوال: بعرض الشاشة تحت الشريط العلوي حتى لا تخرج عن الحافة */ .theme-panel { position: fixed; top: 62px; inset-inline: 12px; min-width: 0; } } @media (max-width: 600px) { /* شريط شاشة البيع على الجوال: معلومات الوردية تُقصّ بدل أن تدفع الصفحة للخارج */ .pos-topbar { gap: 8px; padding: 0 10px; } .pos-topbar-info { flex: 1; min-width: 0; overflow: hidden; flex-wrap: nowrap; } .pos-topbar-info .badge { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .pos-topbar-info .badge-muted { display: none; } .pos-topbar .topbar-actions { gap: 0; flex-shrink: 0; } .pos-topbar .topbar-actions .btn-sm { padding: 7px 8px; } .pos-topbar .user-chip { padding: 3px; } .user-menu-list { position: fixed; top: 68px; inset-inline: 10px; min-width: 0; } .pos-topbar .user-menu-list { top: 60px; } } /* تبويب التصنيف النشط في شاشة البيع (كان نصه بلون خلفيته فيختفي) */ .pos-cats .tab.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }