/* 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; --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; } /* ===== Animated Theme Switch (sun/moon morph) ===== زر واحد دائري ينقلب بين الشمس والقمر بحركة نابضة (spring). الحالة مدفوعة بالكامل بوجود body.dark-mode، فلا حاجة لأي JS لتغيير شكل الزر. */ .theme-switch-wrap { display: flex; gap: 10px; align-items: center; } .theme-switch-label { font-size: 13px; font-weight: 700; color: var(--text-main); min-width: 32px; } .theme-switch { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-main); background: var(--surface-main); color: var(--text-secondary); cursor: pointer; overflow: hidden; flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .theme-switch:hover { background: var(--surface-hover); color: var(--text-main); transform: scale(1.06); } .theme-switch:active { transform: scale(0.94); } .theme-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .theme-switch .ts-icon { position: absolute; width: 22px; height: 22px; /* تخفيف أُسّي (ease-out-quint) — نفس منحنى البيت المستعمل في أشرطة التقدّم. المنحنى السابق cubic-bezier(0.34, 1.56, …) ارتدادي و0.45s خارج نطاق 180–260ms، وكلاهما ممنوع نصّاً في DESIGN.md § Motion. */ transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease; } /* الوضع النهاري (الافتراضي): الشمس ظاهرة، القمر مخفي */ .theme-switch .ts-sun { transform: scale(1) translateY(0); opacity: 1; } .theme-switch .ts-moon { transform: scale(0.4) translateY(8px); opacity: 0; } /* الوضع الليلي: القمر ظاهر، الشمس مخفية */ body.dark-mode .theme-switch { color: var(--ready-text, #5BD0B5); } body.dark-mode .theme-switch .ts-sun { transform: scale(0.4) translateY(8px); opacity: 0; } body.dark-mode .theme-switch .ts-moon { transform: scale(1) translateY(0); opacity: 1; } /* ===== الشريط الجانبي وزر تخصيص الألوان في الوضع الليلي (سطح المكتب/الآيباد) ===== الشريط يندمج مع خلفية الصفحة (شفّاف) تماماً كالوضع النهاري — لا خلفية/إطار/ظل. */ body.dark-mode .sidebar { background: transparent; color: var(--text-main); box-shadow: none; } body.dark-mode .sidebar-brand .brand-name, body.dark-mode .sidebar-nav .nav-item { color: var(--text-secondary); } body.dark-mode .sidebar-nav .nav-item:hover { background: var(--nav-bg-hover); color: var(--primary); } body.dark-mode .sidebar-nav .nav-item.active { background: var(--primary); color: #ffffff; } /* ===== شامل: تحويل النصوص السوداء والأيقونات الداكنة إلى اللون الأبيض في الوضع الليلي ===== */ 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); } body.dark-mode img.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); } 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); } /* ===== التقارير والإحصائيات في الوضع الليلي ===== */ body.dark-mode .chart-card, 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 .chart-card-title { color: var(--text-title); text-shadow: 0 1px 0 rgba(30, 25, 50, 0.4), 0 -1px 0 rgba(255, 255, 255, 0.08); } /* ===== اللوغو: جعل كلمة "رفوفي" بيضاء مع الحفاظ على الألوان الأخرى ===== */ body.dark-mode .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() بقيم متناقضة وتُربك ترتيب الكاسكيد. ======================================================================== */ body.dark-mode .theme-switch { background: color-mix(in srgb, var(--ready-text, #5BD0B5) 14%, transparent); border-color: color-mix(in srgb, var(--ready-text, #5BD0B5) 40%, var(--border-main)); } /* 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(--bg-main); 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, body.dark-mode .settings-action-card 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; } body.dark-mode #reportsPage, body.dark-mode #reportsPage * { color: var(--text-main); } body.dark-mode #reportsPage h1, body.dark-mode #reportsPage h2, body.dark-mode #reportsPage h3, body.dark-mode #reportsPage h4, body.dark-mode #reportsPage .order-id, body.dark-mode #reportsPage .chart-card-title, body.dark-mode #reportsPage .chart-card-subtitle { color: #ffffff; } body.dark-mode #reportsPage .order-card { background: var(--surface-main); border-color: var(--border-main); } body.dark-mode .chart-card { background: var(--surface-main); border-color: var(--border-main); } body.dark-mode .chart-legend-item { background: var(--bg-main); color: var(--text-main); } body.dark-mode #reportsPage img { filter: brightness(0) invert(1); } body.dark-mode #reportsPage img[src*="0398.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) { 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"] { 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"] { 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); } body.dark-mode .settings-action-card, body.dark-mode .settings-action-card * { color: var(--text-main); } body.dark-mode .settings-action-title { color: #ffffff; } /* شارات الحالة في الوضع الليلي: لا نفرض نصاً أسود. توكنات --*-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). ============================================================ */