/* Dark mode overrides — loaded AFTER base / layout / components so the cascading rules apply. Any var() defined here replaces the light-mode value when has the .dark-mode class. */ /* ===== Dark Mode — ليل Modernize (Dark / Zinc slate) ===== تحويل هوية الليل من البنفسجي العميق (Meadows) إلى لوحة Slate محايدة متناسقة مع أزرق Modernize الفاتح #5D87FF. أسماء المتغيّرات ثابتة (مقدّسة)؛ القيم وحدها تلتزم بليلة داكنة محايدة. */ body.dark-mode { --bg-main: #161F2C !important; --surface-solid: #1E2838 !important; --modal-base: #1E2838 !important; /* أرضية المودال المُعتِمة — انظر base.css */ --surface-main: color-mix(in srgb, var(--surface-solid) calc(var(--card-opacity) * 100%), transparent) !important; --surface-hover: #273344 !important; --border-main: #2E3B4E !important; --border-light: #263241 !important; /* العناوين أفتح من النصّ عمداً في الليلي — هذا ما يفرّق الرمزين. */ --text-title: #E7EEF7 !important; --text-main: #C7D2DE !important; --ink-2: var(--text-main) !important; /* اسم مستعار، لا قيمة مستقلّة */ --text-secondary: #8CA1B8 !important; --text-muted: #6F8399 !important; --placeholder: #5A6B80 !important; --muted-2: #5A6B80 !important; /* أشرطة التمرير: الطبقة الموحّدة في base.css تشتقّ الإبهام من --text-secondary فيتبع الليلي تلقائياً. نرفع النِسَب درجة هنا فقط لأن الرمادي الفاتح على أرضية داكنة يُقرأ أخفت من نظيره على الأرضية الفاتحة. */ --scrollbar-thumb: color-mix(in srgb, var(--text-secondary) 38%, transparent) !important; --scrollbar-thumb-hover: color-mix(in srgb, var(--text-secondary) 65%, transparent) !important; --new-bg: #123043 !important; --new-text: #5BD5FF !important; --ready-bg: #12372D !important; --ready-text: #5BD0B5 !important; --delivering-bg: #3A2A08 !important; --delivering-text: #FFB45C !important; --pending-bg: #2A2350 !important; --pending-text: #A89BFF !important; --completed-bg: #2A2F45 !important; --completed-text: #BFC4DD !important; --collected-bg: #12372D !important; --collected-text: #5BD0B5 !important; --review-bg: #3A2A08 !important; --review-text: #FFB45C !important; --cancelled-bg: #3D1C28 !important; --cancelled-text: #FF8AA0 !important; --header-bg: #161F2C !important; --header-border: #2E3B4E !important; --header-text: #C7D2DE !important; --nav-text: #8CA1B8 !important; --nav-text-hover: #E7EEF7 !important; --nav-text-active: var(--primary) !important; --nav-bg-hover: #273344 !important; --nav-bg-active: #2E3B4E !important; --nav-icon-color: #6F8399 !important; --nav-icon-active: var(--primary) !important; --nav-border: #2E3B4E !important; --stat-tab-text: var(--primary) !important; --stat-tab-active-bg: #273344 !important; --stat-tab-active-border: var(--primary) !important; --header-actions-bg: #1E2838 !important; --header-actions-border: #2E3B4E !important; --card-bg: #1E2838 !important; --table-wrapper-bg: #161F2C !important; --table-wrapper-solid: #161F2C !important; --table-border: #2E3B4E !important; --table-header-bg: #141C28 !important; --table-header-text: #E7EEF7 !important; --table-header-border: #141C28 !important; --table-row-bg: #1E2838 !important; --table-row-solid: #1E2838 !important; --table-row-alt-bg: #223040 !important; --table-row-hover-bg: #273344 !important; --table-row-border: #273344 !important; --table-row-text: #C7D2DE !important; --input-bg: #1E2838 !important; --input-border: #2E3B4E !important; --input-border-focus: var(--primary) !important; --input-text: #E7EEF7 !important; --input-placeholder: #5A6B80 !important; --input-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent) !important; --btn-primary-bg: var(--primary) !important; --btn-primary-text: #ffffff !important; --btn-primary-hover: #4570EA !important; --btn-secondary-bg: #273344 !important; --btn-secondary-text: #E7EEF7 !important; --btn-secondary-border: #2E3B4E !important; --btn-secondary-hover: #32404F !important; --btn-danger-bg: #E14868 !important; --btn-danger-text: #ffffff !important; --btn-danger-hover: #F45B7C !important; --notification-bg: #1E2838 !important; --notification-border: #2E3B4E !important; --notification-header-bg: #161F2C !important; --notification-header-text: #E7EEF7 !important; --notification-item-bg: #1E2838 !important; --notification-item-hover-bg: #273344 !important; --notification-warning-bg: #3D1C28 !important; --notification-warning-border: #F45B7C !important; --notification-warning-text: #FF8AA0 !important; --notes-bg: #1E2838 !important; --notes-text: #C7D2DE !important; --notes-border: var(--primary) !important; --pinned-note-color: #FFB45C !important; --tag-orders-bg: #123043 !important; --tag-customers-bg: #3D1C28 !important; --tag-products-bg: #12372D !important; --tag-delivery-bg: #3A2A08 !important; --tag-marketing-bg: #2A2350 !important; --tag-inventory-bg: #273344 !important; --tag-freespace-bg: #2A2F45 !important; --simple-product-bg: #123043 !important; --simple-product-text: #5BD5FF !important; --simple-product-border: #00C2D7 !important; --multi-product-bg: #12372D !important; --multi-product-text: #5BD0B5 !important; --multi-product-border: #5BD0B5 !important; --package-movement-highlight: #FFB45C !important; --profitable-product-bg: #12372D !important; --profitable-product-text: #5BD0B5 !important; --losing-product-bg: #3D1C28 !important; --losing-product-text: #FF8AA0 !important; --break-even-product-bg: #2A2350 !important; --break-even-product-text: #A89BFF !important; --login-form-bg: #1E2838 !important; --login-input-bg: #161F2C !important; --login-input-border: #2E3B4E !important; --login-input-focus: var(--primary) !important; --login-button-bg: var(--primary) !important; --login-button-hover: #4570EA !important; --login-text: #E7EEF7 !important; --login-text-secondary: #8CA1B8 !important; --login-shadow: 0 24px 60px rgba(0, 0, 0, 0.45) !important; --modal-bg: #1E2838 !important; --modal-overlay: rgba(0, 0, 0, 0.65) !important; --modal-shadow: 0 30px 80px rgba(0, 0, 0, 0.55) !important; --modal-border: #2E3B4E !important; --report-table-bg: #1E2838 !important; --report-table-odd-bg: #161F2C !important; --report-table-even-bg: #1E2838 !important; --report-footer-bg: #161F2C !important; --report-footer-text: #8CA1B8 !important; --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.30) !important; --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.40) !important; --shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.50) !important; --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.40) !important; /* ألوان الأكاسيد الفاتحة (light tints) في الليل — تُستخدم لبلاطات أيقونات KPI وبطاقة ذيل الشريط الجانبي. تُصبح داكنة متناسقة مع ليلة Modernize بدل بقائها فاتحة ساطعة. */ --light-primary: #24304A !important; --light-secondary: #1F3547 !important; --light-info: #22304A !important; --light-success: #12372D !important; --light-warning: #3A2A08 !important; --light-danger: #3D1C28 !important; } /* مطابق مع `dashboard.style.display = 'flex'` التي يضعها app-core.js */ #dashboard[style*="display: block"], #dashboard[style*="display: flex"] { display: flex !important; } /* ===== زر تبديل المظهر (شمس/قمر) — حُذف ===== استُبدل بمجموعة أزرار نهاري/ليلي (sg-pill-group) في تبويب الإعدادات › عام؛ أنماطه في settings.css القسم 6. */ /* ===== الشريط الجانبي في الوضع الليلي (سطح المكتب/الآيباد) ===== أرضية صلبة بنفس لون خلفية البرنامج الأصلي (--surface-solid — نفس ما يرسم به html/body المضيف في base.css): الشريط المثبَّت يبقى مدمجاً بصرياً مع الصفحة (لون واحد)، لكنه عند التمدّد بالمرور (76px ← 270px) يغطّي المحتوى خلفه بدل أن يُرى من خلاله. الشفّافية السابقة كانت تكشف المحتوى تحت الجزء المتمدّد. */ body.dark-mode .sidebar { background: var(--surface-solid); color: var(--text-main); } body.dark-mode .sidebar-brand .brand-name, body.dark-mode .sidebar-nav .nav-item { /* التخميف باللون وحده (مرآة sidebar.css) — الوزن يرث 500 من sidebar.css. */ color: color-mix(in srgb, var(--text-secondary) 42%, var(--text-muted)); } body.dark-mode .sidebar-nav .nav-item:hover { background: var(--nav-bg-hover); color: var(--text-title); } body.dark-mode .sidebar-nav .nav-item:hover .nav-icon { color: var(--primary); } /* نشط مُهدَّأ (مرآة sidebar.css): tint ناعم من الأساسي + شريط هوية رفيع، لا تعبئة صلبة تستحوذ على اللوحة. */ body.dark-mode .sidebar-nav .nav-item.active { background: color-mix(in srgb, var(--primary) 22%, transparent); color: color-mix(in srgb, var(--primary) 55%, #ffffff); } body.dark-mode .sidebar-nav .nav-item.active::before { content: ''; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 55%; border-radius: 3px; background: var(--primary); } /* ===== شامل: تحويل النصوص السوداء والأيقونات الداكنة إلى اللون الأبيض في الوضع الليلي ===== */ body.dark-mode .tenant-logo, body.dark-mode .tenant-logo-text, body.dark-mode .brand-name, body.dark-mode .page-title h1, body.dark-mode .page-title .greeting, body.dark-mode .page-title h2, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4 { color: var(--text-title); } body.dark-mode .info-item span, body.dark-mode .info-item div, body.dark-mode .stat-card-value, body.dark-mode .stat-card-title, body.dark-mode .stat-card-footer span { color: var(--text-main); } /* الشعار الافتراضي فقط يُقلب أبيض؛ شعار المتجر المرفوع (data-tenant-logo) يُعرض بألوانه الأصلية في الوضعين. */ body.dark-mode img.tenant-logo:not([data-tenant-logo]) { filter: brightness(0) invert(1); } /* ===== تفاصيل الطلبات والعملاء في الوضع الليلي ===== */ body.dark-mode .order-card, body.dark-mode .customers-table-wrapper, body.dark-mode .movements-table-wrapper, body.dark-mode .settings-page, body.dark-mode .form-input, body.dark-mode .modal, body.dark-mode .notifications, body.dark-mode .stat-card, body.dark-mode .kpi06 { background: var(--surface-solid); color: var(--text-main); border-color: var(--border-main); } body.dark-mode .order-header, body.dark-mode .modal-header { border-bottom-color: var(--border-main); } /* نقطة إشعار الجرس ليلاً — منفذ shadcn button-38: `dark:bg-sky-400` (#38BDF8) مقابل sky-600 نهاراً (forms.css). !important يُمسك أمام قاعدة forms.css المُهمَّة أيضاً؛ الحركة (ncDotBounce) تُورَث كما هي. */ body.dark-mode .topbar-icon .notification-badge { background: #38bdf8 !important; } body.dark-mode .order-id, body.dark-mode .info-item strong { color: var(--text-title); } body.dark-mode .order-price, body.dark-mode .modal-body { color: var(--text-main); } body.dark-mode .order-actions button, body.dark-mode .modal-footer button { background: var(--border-main); color: var(--text-title); border-color: var(--border-main); } body.dark-mode .order-actions button:hover { background: #32404F; } body.dark-mode .orders-list tr { background: var(--surface-solid); border-color: var(--border-main); } body.dark-mode .orders-list tr:hover { background: var(--surface-hover); } body.dark-mode .orders-list thead tr { background: var(--surface-hover); } body.dark-mode .orders-list th { color: var(--text-main); border-color: var(--border-main); } body.dark-mode .orders-list td { color: var(--text-main); border-color: var(--border-main); } body.dark-mode .customer-row, body.dark-mode .orders-list tbody tr { background: var(--surface-solid); color: var(--text-main); } body.dark-mode .orders-list .status-badge { border: 1px solid currentColor; } /* ===== تفاصيل الإقليم في الوضع الليلي ===== */ body.dark-mode .region-card, body.dark-mode .region-card:hover { background: var(--surface-solid); border-color: var(--border-main); color: var(--text-main); } /* ===== تبويبات الطلبات (حالات الطلب) في الوضع الليلي ===== */ body.dark-mode .stat-tab { color: var(--text-secondary); background: var(--bg-main); border-color: var(--border-main); } body.dark-mode .stat-tab:hover { background: var(--surface-hover); color: var(--text-main); } body.dark-mode .stat-tab.active { background: var(--surface-solid); color: var(--primary); border-color: var(--primary); } /* ===== التقارير والإحصائيات في الوضع الليلي ===== بطاقات صفحة التقارير صارت .rp-* في styles/reports.css وتشتقّ ألوانها من التوكنات مباشرةً، فلا تحتاج قواعد ليلية خاصة. ما بقي هنا هو الأسطح التي لا يغطّيها ذلك الملف. */ body.dark-mode .reports-container, body.dark-mode .reports-stats-card { background: var(--surface-solid); border-color: var(--border-main); color: var(--text-main); } /* ===== اللوغو: جعل كلمة "رفوفي" بيضاء مع الحفاظ على الألوان الأخرى ===== */ body.dark-mode .tenant-logo:not([data-tenant-logo]) { filter: brightness(0) invert(1); } /* ===== مُدخلات النموذج (تواريخ، قوائم) في الوضع الليلي ===== */ body.dark-mode input[type="date"], body.dark-mode input[type="time"], body.dark-mode input[type="datetime-local"], body.dark-mode select { background: var(--surface-solid); color: var(--text-title); border-color: var(--border-main); color-scheme: dark; } body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator, body.dark-mode input[type="time"]::-webkit-calendar-picker-indicator, body.dark-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; } /* ===== حقل المدينة (searchable-input) في الوضع الليلي ===== */ body.dark-mode .searchable-input, body.dark-mode .searchable-dropdown input { background: var(--surface-solid); color: var(--text-title); border-color: var(--border-main); } body.dark-mode .dropdown-list > div { background: var(--surface-solid); color: var(--text-title); border-color: var(--border-main); } body.dark-mode .dropdown-list > div:hover { background: var(--surface-hover); } /* ===== سجل النشاطات في الوضع الليلي ===== */ body.dark-mode .activity-log-entry, body.dark-mode .notifications-dropdown { background: var(--surface-solid); color: var(--text-main); border-color: var(--border-main); } /* ===== الصفحة الرئيسية: آخر النشاطات (Timeline) في الوضع الليلي ===== */ body.dark-mode .home-activity-section, body.dark-mode .tl-entry, body.dark-mode .tl-body { background: var(--surface-solid); color: var(--text-main); border-color: var(--border-main); } /* ======================================================================== Meadows dark-mode overrides — مصدر وحيد للثيم الليلي معرَّف أعلى الملف (السطور 6-144). الكتلة المكرّرة أدناه حُذفت: كانت تعيد إعلان var() بقيم متناقضة وتُربك ترتيب الكاسكيد. ======================================================================== */ /* Meadows: أيقونات القائمة الجانبية تأخذ currentColor (لون النص) ولا تنقلب إلى الأبيض — تباين أهدأ وأنسب مع الكثافة اللونية للوضع الليلي. */ body.dark-mode .notification-bell .bell-icon { color: #ffffff; } body.dark-mode .btn img[alt] { filter: brightness(0) invert(1); } @media (max-width: 900px) { body.dark-mode .sidebar { background: var(--surface-solid); box-shadow: -10px 0 40px rgba(0, 0, 0, 0.45); } } @media (max-width: 900px) { body.dark-mode .main-content { box-shadow: var(--shadow-md); } } body.dark-mode .modal-content, body.dark-mode .modal-content * { color: var(--text-main); } body.dark-mode .modal-title { color: #ffffff; } /* Meadows: اقلب الأيقونات التي تعيش على خلفيات داكنة ثابتة (الأزرار البنفسجية/الحمراء/الخضراء، بطاقات KPI التدرّجية، ترويسة الـmodal) إلى الأبيض لتبقى مقروءة. لكن أبقِ `.nav-icon-img` و `.header-actions img` و `.order-card img` بدون قلب — لأنها تعيش على خلفيات فاتحة نسبياً و`currentColor` أجمل بصرياً من الأبيض الجامد. */ body.dark-mode img.icon-invert, body.dark-mode .btn-primary img, body.dark-mode .btn-danger img, body.dark-mode .btn-success img, body.dark-mode .btn-warning img, body.dark-mode .kpi06__icon img, body.dark-mode .stat-card-icon img, body.dark-mode .stat-card-icon svg, body.dark-mode .modal-header img, body.dark-mode .header-actions img { filter: brightness(0) invert(1); } body.dark-mode .order-card, body.dark-mode .order-card *, body.dark-mode .clickable-order-card, body.dark-mode .clickable-order-card * { color: var(--text-main); } body.dark-mode .stat-card-title, body.dark-mode .stat-card-value, body.dark-mode .stat-card-footer, body.dark-mode .stat-card-footer * { color: #ffffff; } body.dark-mode .stat-card-icon { background: transparent; } body.dark-mode #orderDetailsContent, body.dark-mode #orderDetailsContent *, body.dark-mode #customerDetailsContent, body.dark-mode #customerDetailsContent *, body.dark-mode #productDetailsContent, body.dark-mode #productDetailsContent *, body.dark-mode #productionCostDetailsContent, body.dark-mode #productionCostDetailsContent *, body.dark-mode #campaignDetailsContent, body.dark-mode #campaignDetailsContent * { color: var(--text-main); } body.dark-mode #orderDetailsContent h3, body.dark-mode #orderDetailsContent h4, body.dark-mode #customerDetailsContent h3, body.dark-mode #customerDetailsContent h4, body.dark-mode #productDetailsContent h3, body.dark-mode #productDetailsContent h4, body.dark-mode #productionCostDetailsContent h3, body.dark-mode #productionCostDetailsContent h4, body.dark-mode #campaignDetailsContent h3, body.dark-mode #campaignDetailsContent h4 { color: #ffffff; } body.dark-mode .order-details-content, body.dark-mode .order-details-content * { color: var(--text-main); } body.dark-mode .order-details-title, body.dark-mode .order-detail-value, body.dark-mode .order-product-name { color: #ffffff !important; } body.dark-mode .order-detail-label, body.dark-mode .order-product-details { color: var(--text-secondary) !important; } body.dark-mode .order-product-item { background: var(--bg-main); border-color: var(--border-main); } body.dark-mode .customer-name { color: #ffffff; } body.dark-mode .customer-phone, body.dark-mode .customer-address, body.dark-mode .customer-address-details { color: var(--text-main); } body.dark-mode .order-customer-notes { background: var(--bg-main); color: #ffffff; border-color: var(--border-main); } body.dark-mode #regionDetailsContent, body.dark-mode #regionDetailsContent * { color: var(--text-main); } body.dark-mode #regionDetailsContent h3, body.dark-mode #regionDetailsContent h4 { color: #ffffff; } body.dark-mode .stat-count { background: rgba(255,255,255,0.08); color: inherit; } /* أُزيل `#reportsPage *` (لون واحد لكل عنصر داخل الصفحة). كان مطلوباً حين كانت صفحة التقارير القديمة تكتب ألوانها inline؛ بعد إعادة التصميم صارت كل ألوانها توكنات (reports.css) — وبقاؤه كان يهزم تدرّج القراءة: أخصّيته (1,1,1) تتغلّب على قواعد الصنف المفرد (1,1,0) فتُسوّي النص الثانوي بالعنوان، وتمحو أخضر الربح/أحمر الخسارة (.rp-money-pos/.rp-money-neg)، وتُلوّن نصّ الزرّ الأساسي بلون النصّ بدل الأبيض. لا تُعِده. */ /* عناوين صفحة التقارير بيضاء صريحة في الوضع الليلي. لا تُضِف هنا `.rp-card-sub` أو نصوص المؤشّرات الثانوية: تلك تعتمد --text-secondary عمداً لتبقى أخفت من العناوين (تدرّج القراءة) — تبييضها يُسطّح البطاقة. */ body.dark-mode #reportsPage h1, body.dark-mode #reportsPage h2, body.dark-mode #reportsPage h3, body.dark-mode #reportsPage h4 { color: #ffffff; } body.dark-mode #reportsPage img { filter: brightness(0) invert(1); } body.dark-mode #reportsPage img[src*="0398.png"], body.dark-mode #reportsPage img[src*="rofofi.png"] { filter: brightness(1) invert(0); } body.dark-mode .logo-dark-wrapper { position: relative; display: inline-block; } body.dark-mode .logo-dark-wrapper img { display: block; } body.dark-mode .logo-dark-wrapper::before { content: ''; position: absolute; inset: 0; background-image: url('../photo/0398.png'); background-size: contain; background-repeat: no-repeat; background-position: center; filter: brightness(0) invert(1); mix-blend-mode: lighten; pointer-events: none; } body.dark-mode img[src*="0398.png"]:not(.logo-wrapped), body.dark-mode img[src*="rofofi.png"]:not(.logo-wrapped) { filter: brightness(1) invert(0); } body.dark-mode .form-input { background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box, linear-gradient(135deg, var(--border-main), var(--border-main)) border-box; color: var(--text-main); } body.dark-mode .form-input::placeholder { color: var(--text-secondary); } body.dark-mode select.form-input, body.dark-mode input[type="date"].form-input, body.dark-mode input[type="search"].form-input, body.dark-mode input[type="text"].form-input { color: var(--text-main); } /* أُسقطت هنا ثلاث قواعد كانت تخصّ حقل المدينة وحده في الوضع الليلي: حدّ بتدرّج عبر padding-box/border-box، وظلّ ثقيل rgba(0,0,0,.3)، ولون تركيز #6ba3e5 خارج اللوحة — بينما كل الحقول المجاورة تأخذ معالجة .form-input المشتركة. كانت هذه النسخة الليلية من نفس التفرّد الذي جعل النموذج يبدو غير متّسق. التغطية الليلية للحقل تأتي من القاعدة المشتركة أعلاه (body.dark-mode .searchable-input). */ body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); } body.dark-mode .search-box { background: var(--bg-main); border-color: var(--border-main); } body.dark-mode .search-box input { color: var(--text-main); } body.dark-mode .search-box input::placeholder { color: var(--text-secondary); } body.dark-mode .search-box img { filter: brightness(0) invert(1); } body.dark-mode label[for] { color: var(--text-main); } body.dark-mode .status-select-dropdown { background: var(--surface-solid); color: var(--text-main); border-color: var(--border-main); } body.dark-mode #activityLogPage, body.dark-mode #activityLogPage * { color: var(--text-main); } body.dark-mode #activityLogPage h1, body.dark-mode #activityLogPage h2, body.dark-mode #activityLogPage h3, body.dark-mode #activityLogPage h4, body.dark-mode #activityLogPage th { color: #ffffff; } body.dark-mode #activityLogPage .btn-primary, body.dark-mode #activityLogPage .btn-danger { color: #ffffff; } body.dark-mode #activityLogPage img:not(.no-invert) { filter: brightness(0) invert(1); } body.dark-mode #activityLogPage img[src*="0398.png"], body.dark-mode #activityLogPage img[src*="rofofi.png"] { filter: brightness(1) invert(0); } body.dark-mode .tl-cust img, body.dark-mode .tl-it img, body.dark-mode .tl-when img, body.dark-mode .tl-empty img { filter: brightness(0) invert(1); } body.dark-mode .tl-entry, body.dark-mode .tl-entry * { color: var(--text-main); } body.dark-mode .tl-id, body.dark-mode .tl-amt { color: #ffffff; } body.dark-mode .tl-meta { border-top-color: var(--border-main); } body.dark-mode .home-timeline { background: transparent; } body.dark-mode #homePage img[src*="0398.png"], body.dark-mode #homePage img[src*="dash1.png"], body.dark-mode #homePage img[src*="rofofi.png"] { filter: brightness(1) invert(0); } body.dark-mode svg[fill]:not(.no-invert):not([fill="none"]):not([fill="#25D366"]):not([fill="#1da851"]) { filter: brightness(0) invert(1); } /* شارات الحالة في الوضع الليلي: لا نفرض نصاً أسود. توكنات --*-text (أعلاه) مضبوطة فاتحةً على خلفيات --*-bg الداكنة، فتركها يحفظ المقروئية والتباين. القاعدة `color:#000 !important` القديمة كانت تجعل الشارات غير مقروءة. */ body.dark-mode .dropdown-list > div, body.dark-mode .customer-suggestions > div { border-bottom-color: var(--border-main) !important; color: var(--text-main) !important; } body.dark-mode .dropdown-list > div:hover, body.dark-mode .customer-suggestions > div:hover { background: var(--table-row-hover-bg) !important; } /* ============================================================ Dark-mode element overrides — restored from HEAD main.css, with @media context preserved. Translated to Meadows night tokens. Obsolete [style*=...] rules dropped (JS uses var() now). ============================================================ */ /* ===== الانترو/تسجيل الدخول — حالات الخطأ والحقل غير الصالح في الليلي ===== (ألوان #c62828/#92400e النهارية تفقد تباينها على الأرضية الداكنة). */ body.dark-mode .intro-screen #loginError { background: color-mix(in srgb, #ef5350 14%, transparent); border-color: color-mix(in srgb, #ef5350 30%, transparent); color: #ff8a80; } body.dark-mode .intro-screen .ao-field-wrap:has(.form-input.is-invalid) { border-color: #ef5350; } body.dark-mode .intro-screen .intro-caps-hint { color: #fbbf24; }