/* ========================================================================== صفحة «قاعدة العملاء» (#/clients) — نقل حرفي لتصميم madar-client-management. كل القواعد **مسكوبة تحت `.cdb`** عشان ما تسرّبش على باقي صفحات النظام (التصميم الأصلي بيستخدم أسماء عامة زي table / header / footer / .panel). الألوان الثابتة بتاعت التصميم اتحوّلت لمتغيّرات على `.cdb`، وتحت `[data-theme="dark"]` بتتبدّل بمتغيّرات النظام عشان الصفحة ما تتكسرش في الثيم الغامق. ========================================================================== */ .cdb-page { max-width: 1700px; } .cdb, .modal.cdb-hist { /* ------- نهاري: نفس قيم التصميم المرجعي بالحرف ------- */ --c-ink: #17223b; --c-muted: #7b8498; --c-line: #e7e9f0; --c-card: #fff; --c-head: #fafbfc; --c-rowline: #f0f1f5; --c-th: #777f91; --c-small: #8e96a7; --c-hint: #8b93a4; --c-num: #30394c; --c-link: #5d36c7; --c-purple: #6e42da; --c-field: #4f586c; --c-fieldline: #e0e3ea; --c-wa: #13885d; --c-call: #3266b1; --c-green: #087849; --c-red: #bd2730; --c-blue: #2863bb; --c-amber: #9a650e; --c-loss: #a52b31; --c-lossmuted: #6c7280; --c-dash: #a3a9b6; --c-dup-fg: #b45a00; --c-dup-bg: #fff0e1; --c-chip-fg: #747d8e; --c-on-fg: #6339c8; --c-on-bg: #eee9ff; --c-sep: #e2e4ea; --c-stat1-fg: #5934b5; --c-stat1-bg: #f7f5ff; --c-stat2-fg: #275fa8; --c-stat2-bg: #f2f7ff; --c-statline: #edf0f4; --c-statnum: #273148; --c-total-bg: #fafbfc; --c-shadow: 0 2px 10px rgba(23, 34, 59, .03); color: var(--c-ink); font-family: Tahoma, Arial, sans-serif; font-size: 14px; } /* ------- ليلي: نفس التخطيط، ألوان النظام ------- */ :root[data-theme="dark"] .cdb, :root[data-theme="dark"] .modal.cdb-hist { --c-ink: var(--ink); --c-muted: var(--muted); --c-line: var(--line); --c-card: var(--card); --c-head: var(--card-2); --c-rowline: var(--line); --c-th: var(--muted); --c-small: var(--faint); --c-hint: var(--faint); --c-num: var(--ink); --c-link: #b39bf5; --c-purple: #a98af0; --c-field: var(--ink); --c-fieldline: var(--line-strong); --c-wa: #3fbd8d; --c-call: #6fa0f0; --c-green: var(--ok); --c-red: var(--danger); --c-blue: var(--info); --c-amber: var(--warn); --c-loss: var(--danger); --c-lossmuted: var(--faint); --c-dash: var(--faint); --c-dup-fg: #e0a35f; --c-dup-bg: #33251a; --c-chip-fg: var(--muted); --c-on-fg: #c3aefb; --c-on-bg: #241a3d; --c-sep: var(--line-strong); --c-stat1-fg: #c3aefb; --c-stat1-bg: #201a33; --c-stat2-fg: #8db4f5; --c-stat2-bg: #16203a; --c-statline: var(--line); --c-statnum: var(--ink); --c-total-bg: var(--card-2); --c-shadow: 0 2px 10px rgba(0, 0, 0, .35); } /* لو المستخدم على «تفضيل النظام» ومفيش data-theme صريح */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cdb, :root:not([data-theme="light"]) .modal.cdb-hist { --c-ink: var(--ink); --c-muted: var(--muted); --c-line: var(--line); --c-card: var(--card); --c-head: var(--card-2); --c-rowline: var(--line); --c-th: var(--muted); --c-small: var(--faint); --c-hint: var(--faint); --c-num: var(--ink); --c-link: #b39bf5; --c-purple: #a98af0; --c-field: var(--ink); --c-fieldline: var(--line-strong); --c-wa: #3fbd8d; --c-call: #6fa0f0; --c-green: var(--ok); --c-red: var(--danger); --c-blue: var(--info); --c-amber: var(--warn); --c-loss: var(--danger); --c-lossmuted: var(--faint); --c-dash: var(--faint); --c-dup-fg: #e0a35f; --c-dup-bg: #33251a; --c-chip-fg: var(--muted); --c-on-fg: #c3aefb; --c-on-bg: #241a3d; --c-sep: var(--line-strong); --c-stat1-fg: #c3aefb; --c-stat1-bg: #201a33; --c-stat2-fg: #8db4f5; --c-stat2-bg: #16203a; --c-statline: var(--line); --c-statnum: var(--ink); --c-total-bg: var(--card-2); --c-shadow: 0 2px 10px rgba(0, 0, 0, .35); } } /* ------------------------------- الهيدر ------------------------------- */ .cdb > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } .cdb > header p { color: #8d95a7; margin: 0 0 7px; font-size: 12px; } :root[data-theme="dark"] .cdb > header p { color: var(--faint); } .cdb > header h1 { margin: 0 0 7px; font-size: 25px; font-family: Tahoma, Arial, sans-serif; } .cdb > header span { color: var(--c-muted); } /* ------------------------------- فلتر الفترة ------------------------------- */ .cdb .date-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; } .cdb .date-filter > b { color: #5d6576; font-size: 12px; } :root[data-theme="dark"] .cdb .date-filter > b { color: var(--muted); } .cdb .date-filter label { color: #7c8495; display: flex; align-items: center; gap: 7px; font-size: 10px; } :root[data-theme="dark"] .cdb .date-filter label { color: var(--faint); } .cdb .date-filter input { color: var(--c-field); background: var(--c-card); border: 1px solid var(--c-fieldline); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 12px; } /* السهمين و«اليوم» بياخدوا كلاسات النظام العامة (`icon-btn`/`btn-ghost`) عشان يبقوا **نفس** أزرار شريط الاجتماعات بالظبط — واللي هنا **مقاسات وبس**: الزرار العام ٣٨px وخانات الفترة هنا أصغر، فكان هيطول عليها. ⚠️ ومافيش لون مكتوب هنا عن قصد: الألوان بتيجي من توكنز النظام، فأي تعديل في الثيم بيطبّق على الشريطين مع بعض. */ .cdb .date-filter .icon-btn { width: 32px; height: 32px; border-radius: 8px; } .cdb .date-filter .btn-ghost { padding: 7px 13px; font-size: 12px; border-radius: 8px; } /* ------------------------------- كرتا الإحصاء ------------------------------- */ .cdb .company-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; } .cdb .company-stats section { background: var(--c-card); border: 1px solid var(--c-line); border-radius: 12px; overflow: hidden; } .cdb .company-stats h3 { color: var(--c-stat1-fg); background: var(--c-stat1-bg); margin: 0; padding: 10px 14px; font-size: 12px; font-family: Tahoma, Arial, sans-serif; } .cdb .company-stats section:nth-child(2) h3 { color: var(--c-stat2-fg); background: var(--c-stat2-bg); } .cdb .company-stats section > div { display: grid; grid-template-columns: repeat(3, 1fr); } .cdb .company-stats span { color: #777f90; border-left: 1px solid var(--c-statline); padding: 11px 14px; font-size: 10px; } :root[data-theme="dark"] .cdb .company-stats span { color: var(--muted); } .cdb .company-stats span:last-child { border-left: 0; } .cdb .company-stats b { color: var(--c-statnum); margin-top: 3px; font-size: 19px; display: block; } .cdb .company-stats .total { background: var(--c-total-bg); font-weight: 700; } /* ------------------------------- البانل والتولبار ------------------------------- */ .cdb .panel { border: 1px solid var(--c-line); background: var(--c-card); border-radius: 15px; overflow: hidden; box-shadow: var(--c-shadow); } .cdb .toolbar { border-bottom: 1px solid var(--c-line); display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; gap: 15px; } .cdb .toolbar h2 { margin: 0 0 5px; font-size: 18px; font-family: Tahoma, Arial, sans-serif; } .cdb .toolbar p { color: var(--c-muted); margin: 0; font-size: 12px; } .cdb .filter-area { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .cdb .quick-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .cdb .quick-filters button { color: var(--c-chip-fg); background: none; border: 0; border-radius: 7px; padding: 7px 9px; font: inherit; font-size: 10px; cursor: pointer; } .cdb .quick-filters button.on { color: var(--c-on-fg); background: var(--c-on-bg); font-weight: 700; } .cdb .quick-filters i { background: var(--c-sep); width: 1px; height: 22px; margin: 0 3px; } /* عناوين أقسام البطاقة — التذاكر فوق والتواصلات تحت */ .modal.cdb-hist .hist-sub { margin: 16px 0 8px; font-size: 13px; font-weight: 700; color: var(--c-th); } .modal.cdb-hist .hist-sub:first-of-type { margin-top: 4px; } /* المراجعة: نفس عناصر الاجتماعات (btn sm + mdot ok) — الكلاسات عامة، وده كل اللي محتاجينه هنا هو تصغير المقاس شوية عشان الجدول كتيف. */ .cdb .cdb-rev .btn.sm { font-size: 11px; padding: 4px 12px; } .cdb .cdb-rev .mdot { font-size: 11px; max-width: 110px; } /* خانة سلاك: بتفضل «…» لحد ما رد slack-link يوصل. ⚠️ **الاتنين لازم**: البطاقة بتتبني في `body` **بره `.cdb`** (زي كل كلاسات الخانات تحت)، فكتابة `.cdb` لوحدها كانت هتخلّي عمود سلاك جوّه البطاقة بلا تنسيق. */ .cdb .cdb-slack, .modal.cdb-hist .cdb-slack { display: inline-flex; flex-direction: column; gap: 2px; } /* ------------------- قايمة اختيار متعدّد (القناة / الحالة) ------------------- ⚠️ مش `` اتشالت (بقت ميتة أصلاً — مافيش `` **فاضل في الـDOM ومخفي بـCSS**: الـradio بنفس الـ`name` هو اللي بيضمن إن **واحد بس** يبقى مختار — المتصفح بيعمل ده، مش كود بنكتبه. شيله كان معناه منطق حصر في الجافاسكريبت يقدر يغلط. ⚠️ و`visually-hidden` مش `display:none` عشان قارئ الشاشة يفضل يقراه. 📌 والمختار بيبان **باللون والخط العريض** — نفس لون الشريحة الشغّالة (`--c-on-fg`) عشان الشكل يبقى واحد في التولبار. */ .cdb .ms.ms-one .ms-opt input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cdb .ms.ms-one .ms-opt span { flex: 1; } /* 📌 مافيش علامة قبل الاسم — اللون والخط العريض كفاية للمختار، والقايمة بتتقفل بعد الاختيار فالمستخدم شايف اختياره على الزرار نفسه كمان. */ .cdb .ms.ms-one .ms-opt input:checked + span { color: var(--c-on-fg); font-weight: 700; } /* التركيز بالكيبورد لازم يبان — المربّع مخفي فمافيش حلقة تركيز تلقائية */ .cdb .ms.ms-one .ms-opt input:focus-visible + span { outline: 2px solid var(--c-purple); outline-offset: 2px; } /* ⚠️ **مافيش قاعدة `label` هنا عن قصد.** كان فيه `.cdb .cdb-selects label` (حبّة بحدود وخلفية) للـ`` اتشالت — مافيش select في التولبار.) */ .cdb .cdb-selects { display: flex; gap: 9px; flex-wrap: wrap; } .cdb .tools { display: flex; gap: 9px; } .cdb .tools label { border: 1px solid var(--c-line); color: #9299a9; background: var(--c-head); border-radius: 9px; display: flex; align-items: center; padding: 0 11px; } :root[data-theme="dark"] .cdb .tools label { color: var(--faint); } .cdb .tools input { background: none; border: 0; outline: 0; width: 210px; padding: 9px; font: inherit; font-size: 12px; color: var(--c-ink); } /* زرار الـ PDF — نفس ارتفاع وحدود خانة البحث اللي جنبه */ .cdb .cdb-pdf { border: 1px solid var(--c-line); background: var(--c-head); color: var(--c-field); border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; } .cdb .cdb-pdf:hover { color: var(--c-on-fg); background: var(--c-on-bg); border-color: var(--c-on-fg); } .cdb .cdb-pdf:focus-visible { outline: 2px solid var(--c-on-fg); outline-offset: 2px; } /* ------------------------------- الجدول ------------------------------- */ /* 🔴 **القواعد دي كانت `.cdb table` / `.cdb th` / `.cdb td` — بمحدّد عنصر.** يعني بتطبّق على **أي** جدول جوّه الصفحة، وهي مكتوبة لجدول واحد بالذات: جدول السجل بأعمدته التلاتاشر. وأول جدول جديد نزل في الصفحة (جدول القنوات في تاب الإحصائيات) ورث `min-width: 1150px` — فطلع **١١٥٠ بكسل جوّه كارت ٦٨٩**، و`overflow: hidden` بتاعت الكارت قصّت عمود «تواصلات» بالكامل. مافيش خطأ، ومافيش رسالة: عمود بعنوانه وأرقامه موجود في الـDOM ومش على الشاشة، والكارت التاني بيرسم فوق الزيادة فمالوش أثر يدلّ عليه. 📌 **والحل جوّه المشكلة مش جنبها**: القواعد اتربطت بـ`.tech-table` (الجدول اللي اتكتبت له)، بدل ما نحطّ `min-width: 0` على كل جدول جديد بعد كده — ده كان بيسيب اللغم لكل حد جاي. ⚠️ **ومافيش جدول تاني كان بيعتمد عليها**: جداول المودال (`.hist-tickets` · `.mtg-tbl`) بتتبني في `body` **برّه** `.cdb`، فقواعدها مكتوبة لها صريح تحت (`.modal.cdb-hist …`) — وده بالظبط سبب وجود التعليق اللي تحت. (نفس عيلة `.cdb .cdb-selects label` اللي كانت لعنصر مااتشالش وفضلت تكسب.) */ .cdb .tablewrap { overflow: auto; } .cdb .tech-table { border-collapse: collapse; text-align: right; width: 100%; min-width: 1150px; } .cdb .tech-table th { color: var(--c-th); border-bottom: 1px solid var(--c-line); white-space: nowrap; background: var(--c-head); padding: 16px 15px; font-size: 11px; font-weight: 600; } .cdb .tech-table td { vertical-align: middle; border-bottom: 1px solid var(--c-rowline); padding: 16px 15px; font-size: 12px; } /* 💎 عمود VIP + خلفية صف العميل المميز (طلب فراس ٢٠٢٦-٠٩-٠٩). 🎯 **`--accent-tint` — نفس توكن صفحة الصفقات بالحرف**، فالصفحتين بيتلوّنوا زي بعض. لون مكتوب هنا كان بيدّي درجتين لنفس المعنى. ⚠️ **ومافيش `!important`**: جدول قاعدة العملاء **مالوش قاعدة hover على الصفوف** (اتفحص) — فالـ`!important` اللي في `deals.css` مالهاش لزمة هنا، وحطّها بيكسر أي تلوين حالة يتضاف بعدين. ⚠️ **والشارة نفسها شكلها من `deals.css`** (قواعدها مش مقيّدة بـ`.dls`) — فمافيش نسخة تانية تفرق. */ .cdb tr.cdb-viprow > td { background: var(--accent-tint); } .cdb .tech-table th.cdb-vip, .cdb .tech-table td.cdb-vip { text-align: center; } .cdb .tech-table td b { margin-bottom: 4px; font-size: 11px; display: block; } .cdb .tech-table td small { color: var(--c-small); font-size: 9px; display: block; } /* العمود الأول والسادس ليهم سطر تحتاني في الهيدر (زي التصميم) */ .cdb .tech-table th .th-sub { color: #a0a6b2; margin-top: 4px; font-size: 8px; font-weight: 400; display: block; } :root[data-theme="dark"] .cdb .tech-table th .th-sub { color: var(--faint); } /* ⚠️ خلايا مشتركة بين الجدول ومودالات السجل. المودال بيتبني في body برّه `.cdb`، فأي قاعدة هنا لازم تتكتب للاتنين — لو اتكتبت لـ `.cdb` بس، الكود جوّه المودال بياخد لون الروابط العام بتاع النظام (أخضر) والحالة تطلع بلا لون. */ .cdb .ltr, .modal.cdb-hist .ltr { direction: ltr; text-align: right; } .cdb .phone-text, .modal.cdb-hist .phone-text { margin-bottom: 5px; display: block; } .cdb .main-link, .modal.cdb-hist .main-link { color: var(--c-link); margin-bottom: 5px; font-size: 12px; font-weight: 700; text-decoration: none; display: block; } .cdb .main-link:hover, .modal.cdb-hist .main-link:hover { text-decoration: underline; } .cdb .link-hint, .modal.cdb-hist .link-hint { margin-top: 3px; display: block; color: var(--c-hint) !important; font-size: 9px !important; } /* هنت «الرقم ده له رقم تاني» — تذكرة أودو بتشيل phone و mobile، فالعميل ممكن يكون مسجّل بمدخلين واللي بيراجع يفتحهم على إنهم عميلين. 📌 وبيتطبع: رقم تاني للعميل معلومة على الورق، مش زرار. */ .cdb .cdb-alt, .modal.cdb-hist .cdb-alt { margin-top: 3px; display: block; color: var(--c-hint); font-size: 10px; line-height: 1.5; } .cdb .cdb-alt b, .modal.cdb-hist .cdb-alt b { color: var(--c-num); font-weight: 700; } /* عنوان مجموعة جوّه قايمة القناة (157) — «قنوات الواتساب» / «خطوط الاتصال». 🔴 **الاسم لوحده مابقاش مميّز**: «CS - SOCIAL» إنبوكس شات ووت **ورقم حملة** في الكول سنتر، فالقايمة لازم تقول الخيار ده بتاع إيه. ⚠️ **ومش خيار**: مالوش تشيك بوكس ومالوش `cursor:pointer` عشان محدش يدوس. */ .cdb .ms-head { padding: 7px 11px 4px; color: var(--c-th); font-size: 9px; font-weight: 700; border-top: 1px solid var(--c-line); margin-top: 3px; cursor: default; } .cdb .ms-panel .ms-head:first-child { border-top: 0; margin-top: 0; } /* هنت خط الكول سنتر تحت الرقم (157) — منقولة من صفحة مينا «عملاء جدد». ⚠️ **وبتتطبع**: دي معلومة على الورق (زي «كمان: …»)، مش زرار. */ .cdb .cdb-notes { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .cdb .cdb-note { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: 9px !important; font-weight: 700; line-height: 1.6; cursor: help; } .cdb .cdb-note.out { color: var(--c-call); background: var(--c-stat2-bg); } /* زرارا الرقم: نسخ · افتح البحث السريع (م. قطب). ⚠️ مقاسات وألوان من توكنز الصفحة (`--c-*`) زي باقي الخلايا — مافيش لون مكتوب، فالدارك مود بيمشي لوحده. 📌 وبيبانوا في **الجدول بس**: `no-print` على الحاوية عشان زرار مالوش معنى على الورق (نفس قاعدة عمود «مخالفة» و«تعديل»). */ .cdb .cdb-pacts { display: inline-flex; gap: 4px; margin-top: 4px; } .cdb .cdb-pact { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--c-line); background: var(--c-card); color: var(--c-hint); border-radius: 6px; cursor: pointer; padding: 0; font: inherit; transition: color .15s, border-color .15s; } .cdb .cdb-pact:hover { color: var(--c-link); border-color: var(--c-link); text-decoration: none; } /* ⚠️ زرار البحث `` مش `