/* =============================================================== نظام التصميم نفس هوية صفحة الهبوط: البنّي العميق والبرتقالي وخط IBM Plex Sans Arabic. الموظف الذي يرى الصفحة الرئيسية ثم يدخل اللوحة يجب أن يشعر أنه في نفس المنتج لا في نظامين اشتُريا من جهتين. والفارق مقصود في المساحات لا في الألوان: الهبوط يتنفّس لأنه يُقرأ مرة، واللوحة كثيفة لأنها تُفتح كل يوم وكل صف فيها عمل. =============================================================== */ :root { --deep: #3b2229; --deep-soft: #4a2c34; --accent: #c9772b; /* لون النص فوق اللون الأساسي — يقلبه لونُ المنشأة إن كان فاتحاً */ --accent-ink: #ffffff; --accent-dark: #a95f1d; --accent-soft: #f7efe8; --ink: #2c1b20; --muted: #6f625e; --line: #e6dcd8; --bg: #f8f3f0; --card: #ffffff; --danger: #a02c1c; --ok: #1e7a4c; --warn: #a9702a; --radius: 12px; --shadow: 0 1px 3px rgba(59, 34, 41, 0.08); --sidebar-w: 240px; } * { box-sizing: border-box; } body { margin: 0; /* الخط من الشبكة، والبديل المحلي كامل: لو تعذّر التحميل تُقرأ اللوحة فوراً */ font-family: "IBM Plex Sans Arabic", "SF Arabic", "Geeza Pro", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif; direction: rtl; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.7; } /* الأرقام دائماً لاتينية ومن اليسار لليمين حتى داخل نص عربي */ .num, td.num, .mono, .kpi-value { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; } /** * والخلية تبقى خلية. * * `inline-block` على `` يُخرجه من تخطيط الجدول: لا يعود عموداً * يُقاس مع ترويسته، بل صندوقاً يتقلّص على محتواه. فتنزاح أعمدةُ * الأرقام كلها عن عناوينها — «آخر عنوان» في أقصى اليسار وقيمُه في * الوسط، وكلُّ جدولٍ فيه رقم مصاب. * * ولم يكن ظاهراً لأن الانزياح يصغر حين تمتلئ بقية الأعمدة، فيُقرأ * «ضيق» لا «خطأ». وجدولُ الأجهزة كشفه: عمودان نصّيان وعمودان رقميان. * * والعزل والاتجاه يبقيان — هما الغرض، و`inline-block` كان وسيلةً * لا يحتاجها `table-cell`. */ td.num, th.num { display: table-cell; } a { color: var(--accent-dark); } button { font-family: inherit; font-size: inherit; } /* --- التخطيط --- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--deep); color: #fff; padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; } /* نفس علامة الصفحة الرئيسية — تعريف الهوية بلا صورة تُحمَّل */ .sidebar h1 { font-size: 17px; margin: 0 0 4px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .sidebar h1::before { content: '💬'; } /* شعار المنشأة يحلّ محلّ علامة المنصة، لا يُضاف إليها */ .sidebar h1.has-logo::before { content: none; } .brand-logo { width: 30px; height: 30px; border-radius: 7px; object-fit: contain; /* خلفية بيضاء تحت الشعار: أكثر الشعارات داكن على شفافية، ويختفي على الشريط */ background: #fff; padding: 2px; flex: 0 0 auto; } .sidebar .who { font-size: 13px; opacity: 0.72; margin-bottom: 16px; } .sidebar nav { display: flex; flex-direction: column; gap: 2px; } .sidebar nav button { background: transparent; border: 0; color: #fff; text-align: right; padding: 9px 12px; border-radius: 999px; cursor: pointer; opacity: 0.82; } .sidebar nav button:hover { background: rgba(255, 255, 255, 0.12); opacity: 1; } .sidebar nav button.active { background: var(--accent); color: var(--accent-ink); opacity: 1; font-weight: 600; } .sidebar .spacer { flex: 1; } .sidebar select { width: 100%; padding: 8px; border-radius: 8px; border: 0; font-family: inherit; margin-bottom: 14px; color: var(--ink); } /* العمود الأيسر: شريط علوي ثابت العرض ثم الصفحة */ main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .page { flex: 1; padding: 22px 26px; min-width: 0; } /** * الشريط العلوي. * * يحمل موضعك الآن وزرّ الإعدادات. ووجوده يُخرج من الشريط الجانبي كل * ما لا يُفتح يومياً، فيبقى فيه عملُ الموظف وحده. */ .topbar { display: flex; align-items: center; gap: 12px; padding: 12px 26px; border-bottom: 1px solid var(--line); background: var(--card); } .topbar-where { font-weight: 600; font-size: 15px; } .topbar-actions { display: flex; gap: 8px; margin-inline-start: auto; align-items: center; } /* فاصل بين شاشات المنصة وشاشات المنشأة في الشريط الجانبي */ .nav-split { height: 1px; background: rgba(255, 255, 255, 0.18); margin: 10px 12px; } /* --- صفحة الإعدادات --- */ /** * أعمدة لا شبكة. * * التصنيفات تختلف أطوالها — واحدٌ فيه بند وآخر فيه خمسة. والشبكة * تصفّها في صفوف، فيترك الصفُّ الأول فجوةً بارتفاع أطول بطاقة فيه * قبل أن يبدأ الثاني. والأعمدة ترصّها رصّاً فتنزل كلُّ بطاقة تحت * سابقتها مباشرة. */ .settings-grid { column-width: 250px; column-gap: 14px; } .settings-group { /* البطاقة لا تنقسم بين عمودين */ break-inside: avoid; margin-bottom: 14px; } .settings-group h3 { color: var(--accent-dark); margin-bottom: 4px; } .settings-links { display: flex; flex-direction: column; } .setting-link { display: flex; align-items: center; gap: 10px; width: 100%; text-align: right; background: transparent; border: 0; /* فاصل منقّط بين البنود — يفصل بلا أن يثقل البطاقة بخطوط صلبة */ border-bottom: 1px dashed var(--line); padding: 11px 2px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; } .setting-link:last-child { border-bottom: 0; } .setting-link:hover { color: var(--accent-dark); } .setting-link.on { color: var(--accent-dark); font-weight: 600; } .setting-gear { color: var(--muted); font-size: 13px; flex: 0 0 auto; } .setting-link:hover .setting-gear { color: var(--accent); } @media (max-width: 760px) { .topbar { padding: 10px 16px; } .page { padding: 16px; } } h2 { margin: 0 0 4px; font-size: 21px; font-weight: 700; } .subtitle { color: var(--muted); margin: 0 0 18px; font-size: 14px; } /* --- البطاقات --- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 14px; } .card h3 { margin: 0 0 10px; font-size: 16px; } .grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 18px; } /** * ثمانية أرقام في صفّين متساويين. * * و`auto-fit` يرصّ سبعة في صفّ ويترك الثامن وحده — فيُقرأ الثامن * استثناءً أو خطأً، وهو مساوٍ لما قبله. */ .kpis-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 760px) { .kpis-4 { grid-template-columns: repeat(2, 1fr); } } .kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; } .kpi-label { color: var(--muted); font-size: 13px; } .kpi-value { font-size: 26px; font-weight: 700; color: var(--deep); } .kpi-hint { color: var(--muted); font-size: 12px; margin-top: 3px; } /** * الرقم الذي ينتظر عملاً يُلوَّن، وبقيته لا. * * ولو لُوّنت كلها لَما دلّ اللون على شيء — وهو الغرض منه الوحيد هنا. */ .kpi-alarm { border-color: #e7c4bd; background: #fdf4f2; } .kpi-alarm .kpi-value { color: var(--danger); } /* --- التنبيهات: كلٌّ زرٌّ يقود إلى مكان معالجته --- */ .notices { display: grid; gap: 8px; margin-bottom: 18px; } .notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: right; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 11px 14px; font: inherit; font-size: 14px; color: var(--ink); } button.notice { cursor: pointer; } button.notice:hover { border-color: var(--accent); } .notice.danger { border-color: #e7c4bd; background: #fdf4f2; color: #7d2415; } .notice.warn { border-color: #ecd9bd; background: #fdf8f0; color: #7d5518; } .notice.ok { border-color: #cfe7da; background: #f2faf5; color: var(--ok); } .notice-go { color: var(--muted); font-size: 13px; flex: 0 0 auto; } /* --- عمودان يصيران واحداً على الجوال --- */ .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; } .cols > .card { margin-bottom: 14px; } /* --- الرسوم --- */ /** * الرسم يتمدّد بنسبته، والنسبة مكتوبة صراحةً. * * أمران كسرا هذا الرسم قبل أن يستقرّ. الأول `preserveAspectRatio="none"`: * يملأ العرض بالضبط ويمطّ معه نصّ المحور حتى يصير خطوطاً لا تُقرأ. * والثاني أن `height: auto` على SVG داخل الصفحة لا يعني «بالنسبة» — * المتصفح يعطيه ١٥٠ بكسل، فيُقصّ آخر الرسم وفيه سطر التواريخ. فالنسبة * تُكتب هنا ولا تُترك للمتصفح يحزرها. */ .chart { width: 100%; aspect-ratio: 640 / 170; height: auto; display: block; } .chart .axline { stroke: var(--line); stroke-width: 1; } /** * `direction: ltr` على نصّ المحور وحده. * * `text-anchor` منطقيّ لا مكانيّ: في سياق عربي يصير `end` هو **يسار** * النصّ لا يمينه. فكان طرفا المحور يُرسمان خارج الرسم ولا يظهر منهما * إلا شعرة — وهو ما بدا للعين خطّاً لا كلمة. والإحداثيات هنا مكانية * أصلاً (اليمين يمين)، فتُثبَّت الجهة ولا تُترك للسياق. */ .chart .ax { fill: var(--muted); font-size: 14px; font-family: inherit; direction: ltr; } .legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 5px; } .legend-max { margin-right: auto; } .chart-note { font-size: 12px; margin: 10px 0 0; } .sat { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .gauge { width: 150px; flex: 0 0 auto; } .gauge-value { fill: var(--deep); font-size: 24px; font-weight: 700; font-family: inherit; } .sat-side { flex: 1; min-width: 200px; } .rating-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 13px; } .rating-score { color: var(--accent); flex: 0 0 auto; letter-spacing: -1px; width: 62px; } .rating-track { flex: 1; height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; } .rating-track i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .rating-count { flex: 0 0 auto; color: var(--muted); min-width: 60px; } /* --- الجداول --- */ table { width: 100%; border-collapse: collapse; } th, td { text-align: right; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } th { color: var(--muted); font-weight: 600; font-size: 13px; } tbody tr:hover { background: #fdfaf8; } .table-wrap { overflow-x: auto; } /* --- الأزرار --- */ /* كبسولة كأزرار الصفحة الرئيسية، بحشو أضيق يناسب الكثافة */ .btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 600; } .btn:hover { background: var(--accent-dark); } .btn.ghost { background: transparent; color: var(--accent-dark); border: 1px solid var(--line); } .btn.ghost:hover { background: var(--accent-soft); } .btn.danger { background: var(--danger); } .btn.small { padding: 4px 12px; font-size: 13px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* --- الحقول --- */ label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; } input, select, textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 15px; background: #fff; color: var(--ink); } textarea { min-height: 90px; resize: vertical; line-height: 1.7; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .row > * { flex: 1; min-width: 180px; } .actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } .actions .muted { align-self: center; font-size: 13px; } /* وصلةٌ معطّلة: تُرى ولا تُضغط — ملفٌّ فارغ لا معنى له. */ /** * الوصلة ليست زرّاً بطبعها. * * `` سطريّة افتراضاً، فالحشو لا يوسّع صندوقها ويُرسَم * نصف قطرها ٩٩٩ بكسل بيضاوياً مشوّهاً. ظهر هذا في فحص شاشة السجلات. */ a.btn { display: inline-block; text-decoration: none; line-height: 1.2; } a.btn.disabled { opacity: .45; pointer-events: none; } /** * جدول التصنيفات: قوائمه تُقرأ. * * سبعة أعمدة في نافذةٍ ضيّقة تضغط كل `select` حتى يظهر «مت» بدل * «متوسطة» و«٤٨» بدل «٤٨ ساعة» — ظهر هكذا في فحص الشاشة. فلكلٍّ * عرضٌ أدنى، والجدول يُمرَّر أفقياً في غلافه بدل أن يخنق محتواه. */ #rows select { min-width: 118px; } #rows input[data-f='label'] { min-width: 150px; } #rows input[data-f='wa'] { min-width: 140px; } #rows input[data-f='key'] { min-width: 150px; width: 100%; } /** * جدول السجلات: يُمرَّر أفقياً ولا يُخنق. * * تسعة أعمدة في نافذةٍ ضيّقة تضغط عمود النصّ حتى يصير كل كلمة سطراً، * فيطول الصفُّ عشرة أسطر ويضيع الجدول. ظهر هذا في فحص الشاشة عند * ٧٤٤ بكسل. وللغلاف `overflow-x` أصلاً — ينقصه ألّا تقبل الخلايا * الانضغاط دونه. */ .table-wrap td.summary { min-width: 240px; } .table-wrap td, .table-wrap th { min-width: 64px; } .table-wrap td.duration, .table-wrap th { white-space: normal; } /** بطاقة صورة الإثبات — تُفتح كاملةً بالضغط. */ .proof-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; } .proof-card { font-size: 12px; } /* --- ورقة ملصقات المحطات --- */ .qr-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .qr-card { break-inside: avoid; } .qr-pair { display: flex; gap: 14px; } .qr-one { flex: 1; text-align: center; } .qr-one img { width: 100%; max-width: 170px; aspect-ratio: 1; } .qr-label { font-weight: 600; margin-top: 4px; } .qr-place { color: var(--muted); font-size: 12px; margin-bottom: 6px; } /** * الطباعة: الملصقات وحدها. * * الرمز يُلصق على مضخة لا يُنظر إليه على الشاشة — فالشريط الجانبي * والأزرار لا تُطبع، والبطاقة لا تُقسَم بين ورقتين فيُقصّ رمزها. */ @media print { body { background: #fff; } aside, nav, .no-print, .actions, .subtitle { display: none !important; } .qr-sheet { grid-template-columns: repeat(2, 1fr); } .qr-card { border: 1px solid #ccc; page-break-inside: avoid; } } /** خانة اختيار بنصّها في سطر واحد — «تجاوز المهلة فقط» كانت تنكسر ثلاثة. */ .check-inline { display: flex; align-items: center; gap: 6px; flex: none; font-size: 13px; white-space: nowrap; } .check-inline input { width: 15px; height: 15px; accent-color: var(--accent); } /** * مدّةٌ بالعربية لا رقم. * * `.num` تفرض `direction: ltr`، و«٥ ساعة و١٠ دقيقة» تحتها تُرسَم * «ساعة و١٠ دقيقة ٥» — العدد يقفز إلى آخر السطر. فالمدّة نصٌّ عربي * اتجاهه من اليمين، والطابع الزمني وحده تحته رقمٌ لاتيني. */ td.duration { direction: rtl; text-align: start; } td.duration .stamp { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; font-size: 12px; color: var(--muted); } /* --- وضع تنظيف المحادثات --- */ .wa-row.pick { display: flex; align-items: center; gap: 10px; cursor: pointer; } .wa-row.pick input { flex: none; width: 16px; height: 16px; accent-color: var(--brand, #005F5D); } .wa-row.pick.on { background: #f3f8f8; } /* --- الشارات --- */ .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; background: #f1eae6; color: var(--muted); white-space: nowrap; } .badge.green { background: #e6f3ea; color: #1e7a4c; } .badge.red { background: #fdecea; color: var(--danger); } .badge.amber { background: var(--accent-soft); color: var(--accent-dark); } .badge.grey { background: #f1eae6; color: var(--muted); } /* --- الوحدات --- */ .module { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--card); } .module h4 { margin: 0 0 4px; font-size: 16px; } .module p { margin: 0 0 10px; color: var(--muted); font-size: 14px; } .module.off { background: #faf6f4; border-style: dashed; } .module.off h4, .module.off p { color: #a89c98; } .module .locked { background: #fff; border: 1px dashed var(--line); border-radius: 8px; padding: 10px; font-size: 13px; color: var(--muted); margin-top: 8px; } /* --- شاشة المحادثات: قائمة على اليمين ولوح محادثة على اليسار --- */ /** * لوحان لا جدول ثم بطاقة تحته. * * الجدول كان يدفع المحادثة المفتوحة أسفل الشاشة، فيقرأ الموظف الرسالة * ثم يرفع بصره ليرى من أرسلها. وهذا التخطيط هو ما اعتاده كل من استعمل * واتساب: الأسماء ثابتة على اليمين، والحديث في لوح واحد لا يتحرك. */ .wa { display: flex; gap: 14px; /* ارتفاع ثابت ليتمرّر كل لوح وحده — بلا هذا تتمرّر الصفحة كلها فتغيب قائمة الأسماء كلما طالت المحادثة. والطرح يشمل الشريط العلوي وعنوان الشاشة وحشو الصفحة. */ height: calc(100vh - 215px); min-height: 440px; } .wa-list { flex: 0 0 300px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow-y: auto; padding: 6px; } .wa-row { display: block; width: 100%; text-align: right; background: transparent; border: 0; cursor: pointer; padding: 10px 12px; border-radius: 10px; font: inherit; color: inherit; } .wa-row + .wa-row { border-top: 1px solid var(--line); border-radius: 10px; } .wa-row:hover { background: var(--bg); } /* شريط على الحافة مع التظليل: التظليل وحده خفيف جداً على خلفية دافئة فلا يتبيّن أي محادثة مفتوحة حين تكثر الصفوف. */ .wa-row.active { background: var(--accent-soft); box-shadow: inset -3px 0 0 var(--accent); } .wa-row .line { display: flex; align-items: baseline; gap: 8px; } .wa-row .name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wa-row .when { font-size: 11px; color: var(--muted); white-space: nowrap; } .wa-row .last { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wa-row .dots { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; } .wa-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; /* الأرضية هنا لا في جسم المحادثة، ليقع الشعار بينهما */ background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; position: relative; } /** * شعار المنشأة خلف الرسائل. * * على اللوح لا على جسمه: الجسم يتمرّر، فلو حُمل عليه لزحف الشعار مع * الرسائل وخرج من الشاشة عند أول تمرير. وهنا يبقى ثابتاً في وسط * اللوح كخلفية واتساب. * * وشفافيته منخفضة عمداً: خلفية تُنافس نصّ العميل على الانتباه أسوأ * من غيابها، وهذه شاشة تُقرأ طول اليوم. */ .wa-chat::before { content: ''; position: absolute; inset: 0; background-image: var(--brand-watermark, none); background-repeat: no-repeat; background-position: center; background-size: min(320px, 40%); opacity: 0.07; /* بلا لون: الشعار الملوّن ولو باهتاً يبقى بقعة ألوان خلف النص، أما الرمادي فيقرأ كنسيج خلفية — وهذا ما تفعله خلفيات واتساب نفسها. */ filter: grayscale(1); pointer-events: none; } /* الرأس والذيل معتمان فوق العلامة، والجسم شفاف ليظهر من خلاله */ .wa-head, .wa-foot { position: relative; z-index: 1; background: var(--card); } .wa-body { position: relative; z-index: 1; } .wa-head { padding: 12px 16px; border-bottom: 1px solid var(--line); } .wa-head h3 { margin: 0; font-size: 16px; } .wa-head .row { margin-top: 10px; gap: 8px; } .wa-head label { margin: 0 0 2px; } .wa-body { flex: 1; overflow-y: auto; padding: 14px 16px; background: transparent; display: flex; flex-direction: column; } /** * الرسائل تلتصق بأسفل اللوح كما في واتساب. * * بـmargin-top: auto لا بـjustify-content: flex-end — الثاني يقصّ أعلى * المحادثة حين تطول فلا يصل إليه التمرير، والأول يعود صفراً من تلقائه * حين يفيض المحتوى. */ .wa-body .chat { margin-top: auto; } .wa-foot { border-top: 1px solid var(--line); padding: 12px 16px; } .wa-foot textarea { min-height: 60px; } .wa-empty { flex: 1; display: grid; place-items: center; color: var(--muted); padding: 30px; text-align: center; position: relative; z-index: 1; } @media (max-width: 760px) { /* الشاشة الضيقة لا تتسع للوحين جنباً إلى جنب */ .wa { flex-direction: column; height: auto; } .wa-list { flex: none; max-height: 34vh; } .wa-chat { height: 72vh; } } /* --- المحادثة --- */ /* نفس فقاعات النموذج المصغّر في الصفحة الرئيسية: الوارد فاتح والصادر عميق */ .chat { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 6px; } /* داخل اللوح التمرير للوح نفسه، فلا حدّ للارتفاع هنا */ .wa-body .chat { max-height: none; overflow: visible; padding: 0; } .bubble { max-width: 74%; padding: 8px 12px; border-radius: 14px; white-space: pre-wrap; word-break: break-word; } .bubble .meta { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; direction: ltr; text-align: left; } .bubble.customer { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-start-start-radius: 4px; } .bubble.bot { align-self: flex-end; background: var(--deep); color: #fff; border-start-end-radius: 4px; } /* الموظف بلون ثالث: التمييز بين رد البوت ورد الإنسان أهم من الجمال */ .bubble.bot .meta { color: rgba(255, 255, 255, 0.7); } .bubble.staff { align-self: flex-end; background: var(--accent-soft); border: 1px solid #e8d6c4; border-start-end-radius: 4px; } /* --- شاشة الهوية --- */ .swatches { display: flex; gap: 8px; flex-wrap: wrap; } .swatch { width: 34px; height: 34px; border-radius: 9px; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); } .swatch:hover { transform: scale(1.08); } /* المربّع الملوّن والنص جنباً إلى جنب: أحدهما للاختيار والآخر للّصق */ .color-pick { display: flex; gap: 8px; align-items: center; } .color-pick input[type='color'] { width: 42px; height: 38px; padding: 2px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; } .color-pick input[type='text'], .color-pick input:not([type]) { direction: ltr; text-align: left; } label.inline { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; font-size: 14px; color: var(--ink); } label.inline input { width: auto; } .logo-box { display: grid; place-items: center; min-height: 110px; border: 1px dashed var(--line); border-radius: var(--radius); /* رقعة شطرنج خفيفة: الشعار الشفاف يُرى حدّه بدل أن يذوب في البياض */ background: linear-gradient(45deg, #f1eae6 25%, transparent 25%, transparent 75%, #f1eae6 75%), linear-gradient(45deg, #f1eae6 25%, #fff 25%, #fff 75%, #f1eae6 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; } .logo-box img { max-width: 180px; max-height: 90px; object-fit: contain; } /* صورة واتساب مربّعة لا ممتدة — كما تظهر عند العميل تماماً */ .wa-photo { min-height: 150px; } .wa-photo img { width: 120px; height: 120px; max-width: none; max-height: none; border-radius: 50%; object-fit: cover; } .logo-box { position: relative; cursor: pointer; transition: border-color .12s ease; } .logo-box:hover { border-color: var(--accent); } /* حال السحب فوق المربّع: الحدّ يمتلئ وتظهر كلمة «أفلِت» فوق ما بداخله */ .drop-hint { position: absolute; inset: 0; display: none; place-items: center; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; } .logo-box.over { border-style: solid; border-color: var(--accent); } .logo-box.over .drop-hint { display: grid; } /* معاينة مصغّرة للوحة نفسها — لا صورة ثابتة تكذب بعد أول تعديل */ .preview { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .preview-side { flex: 0 0 170px; background: var(--deep); color: #fff; padding: 12px 10px; } .preview-brand { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 12px; } .preview-brand img { width: 26px; height: 26px; border-radius: 6px; background: #fff; padding: 2px; object-fit: contain; } .preview-nav { display: block; padding: 7px 10px; border-radius: 999px; font-size: 13px; opacity: .8; } .preview-nav.on { background: var(--accent); color: var(--accent-ink); opacity: 1; font-weight: 600; } .preview-main { flex: 1; padding: 14px; background: var(--bg); display: flex; flex-direction: column; gap: 8px; position: relative; } .preview-main::before { content: ''; position: absolute; inset: 0; background-image: var(--brand-watermark, none); background-repeat: no-repeat; background-position: center; background-size: 40%; opacity: 0.07; filter: grayscale(1); pointer-events: none; } .preview-main > * { position: relative; z-index: 1; } .preview-main .bubble { max-width: 70%; } @media (max-width: 760px) { .preview { flex-direction: column; } .preview-side { flex: none; } } /* --- متفرقات --- */ .empty { color: var(--muted); text-align: center; padding: 30px; } .error { background: #fdecea; border: 1px solid #f3c3bc; color: var(--danger); padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; } .ok { background: #e6f3ea; border: 1px solid #c3e2cd; color: #1e7a4c; padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; } .qr { font-family: ui-monospace, Menlo, monospace; font-size: 8px; line-height: 8px; white-space: pre; direction: ltr; } .muted { color: var(--muted); font-size: 13px; } @media (max-width: 760px) { .layout { flex-direction: column; } .sidebar { width: 100%; flex: none; } } /* --- التحقق بخطوتين --- */ /* السرّ ورموز الاسترجاع: خط ثابت العرض حتى لا يلتبس 0 بـO ولا 1 بـl. */ .secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; letter-spacing: 1px; line-height: 1.9; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 10px 0; user-select: all; word-break: break-all; } .steps { margin: 0 0 14px; padding-inline-start: 20px; line-height: 2 } .steps li { margin-bottom: 6px } /* باركود الإعداد — خلفيته بيضاء دائماً لأن قارئ الكاميرا يلزمه التباين */ .qr-box { display: inline-block; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin: 8px 0; line-height: 0; } .qr-box img { display: block; width: 220px; height: 220px } .manual { margin: 6px 0 2px } .manual summary { cursor: pointer; color: var(--muted); font-size: 13px } .manual summary:hover { color: var(--ink) } .manual .secret { margin-top: 8px } /* تنبيه داخل بطاقة — أهدأ من .error وأوضح من .muted */ .warn-box { background: #fdf5ea; border: 1px solid #efdcbe; border-radius: 10px; padding: 12px 14px; margin: 10px 0; } /* --- الوصول --- */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px } /* --- سير العمل --- */ .check { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 14px; cursor: pointer; } .check input { width: auto; margin: 0; } .slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .slot { display: flex; align-items: center; gap: 8px; } .slot select { flex: 1; } /* رقم المتغيّر لاتيني في نصّ عربي — يُثبَّت اتجاهه وإلا انقلبت أقواسه. */ .slot-num { flex: 0 0 auto; color: var(--muted); font-size: 13px; direction: ltr; unicode-bidi: isolate; } /* --- مربّع إفلات ملف الفروع --- */ .drop { border: 1px dashed var(--line); border-radius: var(--radius); padding: 18px; text-align: center; color: var(--muted); transition: border-color .12s ease, background .12s ease; } .drop p { margin: 0; } .drop.over { border-style: solid; border-color: var(--accent); background: var(--accent-soft); } /* --- مقايضات طريقة الربط: ما يعمل وما لا يعمل في سطر --- */ .pros { margin: 4px 0; padding-inline-start: 0; list-style: none; font-size: 13px; } .pros li { padding-inline-start: 18px; position: relative; margin: 3px 0; line-height: 1.5; } .pros li::before { position: absolute; inset-inline-start: 0; } .pros li.ok::before { content: '✔'; color: var(--ok); } .pros li.no::before { content: '✕'; color: var(--danger); } /** * بطاقة إصدار في سجل الحوكمة. * * والعنوان صفٌّ واحد يلتفّ: التاريخ والناشر ورمز الالتزام ثلاثة * عناصر قصيرة، وتكديسها رأسياً يُطيل البطاقة ثلاثة أضعاف فيضيع * تسلسلُ الإصدارات — وهو ما يُقرأ منه السجل. */ .release { padding: 10px 0; border-bottom: 1px solid var(--line); } .release:last-child { border-bottom: 0; padding-bottom: 0; } .release-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .release-changes { margin: 6px 0 0; padding-inline-start: 18px; } .release-changes li { margin: 2px 0; } /** * السجل الزمني داخل صفّ الجدول. * * والوقت عمودٌ ثابت العرض على اليمين: القيود تُقرأ بأعينها على * التواريخ أولاً — «ثم ماذا بعد يومين؟» — وتاريخٌ يتزحزح مع طول * النصّ بجانبه يُبطل ذلك. */ .timeline-row > td { background: var(--soft, #faf7f5); padding: 14px 18px; } .timeline { display: grid; gap: 10px; } .timeline-item { display: flex; gap: 14px; align-items: flex-start; } .timeline-when { flex: 0 0 110px; padding-top: 2px; } .timeline-what { flex: 1 1 auto; min-width: 0; } .timeline-item.seen .timeline-what { border-inline-start: 3px solid var(--ok, #0a7); padding-inline-start: 10px; } .timeline-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; } .timeline-add textarea { flex: 1 1 320px; min-width: 0; margin: 0; } /* زرٌّ مضغوط: السجل مفتوح تحته، فيُعرف أيُّ صفٍّ فُتح دون تتبّع. */ .btn.ghost.small.on { background: var(--accent); color: #fff; border-color: var(--accent); } /** * رقمٌ يُضغط — زرٌّ بهيئة رابط. * * `` بلا `href` لا يصله لوح المفاتيح ولا يقرؤه قارئ الشاشة زراً، * و`