/* ═══════════════════════════════════════════════════════════════════════════ SmartStruct — Light Mode احترافي وضع فاتح أنيق بألوان متناسقة — يُفعّل بإضافة class="light" على ═══════════════════════════════════════════════════════════════════════════ */ html.light { /* ── الخلفيات — تدرّج رمادي دافئ ── */ --ss-bg-0: #dcdad2; /* خلفية رئيسية */ --ss-bg-1: #d3d0c6; /* بطاقات */ --ss-bg-2: #cdcabf; /* عناصر ثانوية */ --ss-bg-3: #c8c4b8; /* عناصر أعمق */ --bg: #dcdad2; --bg2: #d3d0c6; --bg3: #cdcabf; --bg4: #c8c4b8; --card-bg: #d3d0c6; /* ── النصوص — رمادي داكن مريح ── */ --ss-fg: #1a1714; --ss-fg-muted: #3d3830; --ss-fg-dim: #6e6760; --text: #1a1714; --muted: #3d3830; --dim: #6e6760; /* ── الحدود — رمادي ناعم ── */ --ss-border: #d4d1c8; --ss-border-2: #c4c0b5; --border: #d4d1c8; --border2: #c4c0b5; /* ── الذهبي — أغمق قليلاً للوضوح على الأبيض ── */ --ss-gold: #a8801a; --gold: #a8801a; --gold2: #8a6c14; --gold3: #c49832; --gold-dim: rgba(168,128,26,.12); --gold-glow: rgba(168,128,26,.18); /* ── ألوان الحالة — متناسقة مع الخلفية الفاتحة ── */ --green: #0a8043; --ss-green: #0a8043; --blue: #1a5fb4; --ss-blue: #1a5fb4; --red: #d32f2f; --ss-red: #d32f2f; --purple: #6a3aab; --ss-purple: #6a3aab; --orange: #e8590c; --ss-orange: #e8590c; /* ── الظلال — ناعمة وخفيفة ── */ --shadow: 0 4px 20px rgba(80,70,55,.06); --shadow-lg: 0 12px 40px rgba(80,70,55,.10); } /* ── الجسم ── */ html.light body { background: #dcdad2; color: #2d2a26; } /* ── الشريط الجانبي ── */ html.light .sidebar, html.light .app-sidebar { background: #d3d0c6; border-color: #d4d1c8; box-shadow: 0 0 30px rgba(80,70,55,.03); } html.light .nav-link { color: #5c574f; } html.light .nav-link:hover { background: rgba(168,128,26,.07); color: #2d2a26; } html.light .nav-link.active { background: linear-gradient(135deg, rgba(168,128,26,.12), rgba(168,128,26,.04)); color: #a8801a; border-color: rgba(168,128,26,.25); } /* ── الشريط العلوي ── */ html.light .topbar { background: #d3d0c6; border-color: #d4d1c8; box-shadow: 0 2px 12px rgba(80,70,55,.03); } html.light .topbar-breadcrumb { color: #5c574f; } html.light .topbar-avatar { background: linear-gradient(135deg, #a8801a, #c49832); color: #fff; } /* ── البطاقات ── */ html.light .card, html.light .stat-card { background: #d3d0c6; border-color: #d4d1c8; box-shadow: 0 2px 12px rgba(80,70,55,.04); } html.light .card:hover, html.light .stat-card:hover { box-shadow: 0 6px 24px rgba(80,70,55,.08); border-color: #c4c0b5; } /* ── الأزرار ── */ html.light .btn-ghost { background: #cdcabf; border-color: #c4c0b5; color: #2d2a26; } html.light .btn-ghost:hover { background: #c8c4b8; color: #2d2a26; } html.light .btn-gold { background: linear-gradient(135deg, #a8801a, #c49832); color: #d3d0c6; box-shadow: 0 2px 10px rgba(168,128,26,.25); } html.light .btn-gold:hover { box-shadow: 0 4px 16px rgba(168,128,26,.35); } /* ── الحقول ── */ html.light .form-input, html.light .form-select, html.light .form-textarea { background: #d3d0c6; border-color: #c4c0b5; color: #2d2a26; } html.light .form-input:focus, html.light .form-select:focus, html.light .form-textarea:focus { border-color: #a8801a; box-shadow: 0 0 0 3px rgba(168,128,26,.1); } html.light .form-input::placeholder { color: #a59f94; } html.light .form-label { color: #5c574f; } /* ── الجداول ── */ html.light table thead th { background: #cdcabf; color: #5c574f; border-bottom: 2px solid #d4d1c8; } html.light tbody td { border-bottom-color: #e5e2db; color: #2d2a26; } html.light tbody tr:hover td { background: rgba(168,128,26,.04); } /* ── الشارات ── */ html.light .badge { background: #cdcabf; color: #5c574f; border-color: #d4d1c8; } html.light .badge-active { background: rgba(10,128,67,.1); color: #0a8043; border-color: rgba(10,128,67,.25); } html.light .badge-paused { background: rgba(232,89,12,.1); color: #e8590c; border-color: rgba(232,89,12,.25); } html.light .badge-delayed { background: rgba(211,47,47,.1); color: #d32f2f; border-color: rgba(211,47,47,.25); } /* ── النوافذ المنبثقة ── */ html.light .modal { background: #d3d0c6; border-color: #d4d1c8; box-shadow: 0 20px 60px rgba(80,70,55,.16); } html.light .modal-overlay { background: rgba(26,31,46,.4); backdrop-filter: blur(4px); } html.light .modal-title { color: #2d2a26; } /* ── شريط التمرير ── */ html.light ::-webkit-scrollbar-track { background: #cdcabf; } html.light ::-webkit-scrollbar-thumb { background: #bdb8ab; border-radius: 8px; } html.light ::-webkit-scrollbar-thumb:hover { background: #a8a294; } /* ── عناوين الصفحات ── */ html.light .page-title { color: #2d2a26; } html.light .page-sub { color: #9a948a; } /* ── العناصر ذات الخلفية البيضاء الشفافة ── */ html.light [style*="rgba(255,255,255,.03)"], html.light [style*="rgba(255,255,255,0.03)"] { background: #ede9e3 !important; } html.light [style*="rgba(255,255,255,.04)"], html.light [style*="rgba(255,255,255,0.04)"] { background: #dcdad2 !important; } html.light [style*="rgba(255,255,255,.05)"], html.light [style*="rgba(255,255,255,0.05)"] { background: #cdcabf !important; } html.light [style*="rgba(255,255,255,.06)"], html.light [style*="rgba(255,255,255,0.06)"] { background: #e5e2db !important; } html.light [style*="rgba(255,255,255,.08)"], html.light [style*="rgba(255,255,255,0.08)"] { background: #c8c4b8 !important; } /* ── شريط المزامنة ── */ html.light #syncPill { background: rgba(10,128,67,.08) !important; border-color: rgba(10,128,67,.2) !important; color: #0a8043 !important; } /* ── الرسوم البيانية والحاويات ── */ html.light .chart-container, html.light .table-wrap { background: #d3d0c6; } /* ── انتقال سلس عند تبديل الوضع ── */ html.light body, html.light .card, html.light .sidebar, html.light .topbar, html.light .btn, html.light .form-input { transition: background-color .3s ease, color .3s ease, border-color .3s ease; } /* ═══════════════════════════════════════════════════════════════════════════ تحسينات نوافذ لوحة الأدمن — تعمل في الوضعين ═══════════════════════════════════════════════════════════════════════════ */ /* ── النوافذ المنبثقة — تنسيق احترافي ── */ .modal-overlay { animation: modalFadeIn .25s ease; } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { animation: modalSlideUp .3s cubic-bezier(.16,1,.3,1); } @keyframes modalSlideUp { from { transform: translateY(24px) scale(.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* ── تبويبات الأدمن — أوضح ── */ #adminTab_tenants, #adminTab_ai, #adminTab_gdrive, #adminTab_notif { transition: all .2s ease; } /* ── جداول الأدمن — صفوف متناوبة ── */ .admin-table tbody tr:nth-child(even) td { background: rgba(128,128,128,.03); } /* ── شارات الأدمن ── */ .admin-stat-card { transition: transform .2s ease, box-shadow .2s ease; } .admin-stat-card:hover { transform: translateY(-2px); } html.light .admin-table tbody tr:nth-child(even) td { background: #ede9e3; } html.light .modal { box-shadow: 0 24px 64px rgba(80,70,55,.14); } /* ═══════════════════════════════════════════════════════════════════════════ لمسات احترافية — وضع فاتح غير ساطع (بيج/رمادي محسوس) ═══════════════════════════════════════════════════════════════════════════ */ /* خلفية رمادية بيج واضحة — ليست بيضاء */ html.light body { background: #d4d2c8 !important; background-attachment: fixed; } /* الشريط الجانبي — رمادي بيج أغمق قليلاً */ html.light .sidebar, html.light .app-sidebar { background: #cac7bb !important; border-color: #b5b1a3 !important; } /* الشريط العلوي */ html.light .topbar { background: #cac7bb !important; border-bottom: 1px solid #b5b1a3 !important; } /* البطاقات — بيج هادئ واضح (ليس أبيض) */ html.light .card, html.light .stat-card { background: #e3e1d7 !important; border-color: #c2bdae !important; box-shadow: 0 2px 8px rgba(70,62,48,.08) !important; } html.light .card:hover, html.light .stat-card:hover { box-shadow: 0 5px 16px rgba(70,62,48,.12) !important; background: #e8e6dc !important; } /* الحقول — بيج فاتح واضح */ html.light .form-input, html.light .form-select, html.light .form-textarea { background: #eceae0 !important; border-color: #bdb8a8 !important; color: #2d2a24 !important; } html.light .form-input:focus, html.light .form-select:focus, html.light .form-textarea:focus { border-color: #a8801a !important; background: #f0eee4 !important; } /* الجداول */ html.light table thead th { background: #c5c1b2 !important; color: #4a4640 !important; border-bottom: 2px solid #b5b1a3 !important; } html.light tbody td { border-bottom-color: #d0ccbe !important; color: #2d2a24 !important; } html.light tbody tr:hover td { background: rgba(168,128,26,.08) !important; } /* النوافذ المنبثقة */ html.light .modal { background: #e3e1d7 !important; border-color: #c2bdae !important; box-shadow: 0 20px 50px rgba(50,44,34,.25) !important; } html.light .modal-overlay { background: rgba(45,40,30,.45) !important; } /* الأزرار الثانوية */ html.light .btn-ghost { background: #d4d1c5 !important; border-color: #bdb8a8 !important; color: #2d2a24 !important; } html.light .btn-ghost:hover { background: #c8c4b6 !important; } /* شريط التمرير */ html.light ::-webkit-scrollbar-thumb { background: #b0ab99 !important; border-radius: 8px; } html.light ::-webkit-scrollbar-thumb:hover { background: #9a9482 !important; } html.light ::-webkit-scrollbar-track { background: #cdcabc !important; } /* العناصر البيضاء الشفافة — تُحوّل لبيج */ html.light [style*="rgba(255,255,255,.03)"], html.light [style*="rgba(255,255,255,0.03)"] { background: #d8d5c9 !important; } html.light [style*="rgba(255,255,255,.04)"], html.light [style*="rgba(255,255,255,0.04)"] { background: #d3d0c4 !important; } html.light [style*="rgba(255,255,255,.05)"], html.light [style*="rgba(255,255,255,0.05)"] { background: #cecbbe !important; } html.light [style*="rgba(255,255,255,.06)"], html.light [style*="rgba(255,255,255,0.06)"] { background: #c9c6b8 !important; } html.light [style*="rgba(255,255,255,.08)"], html.light [style*="rgba(255,255,255,0.08)"] { background: #c2bfb0 !important; } /* الروابط النشطة */ html.light .nav-link { color: #5c574c !important; } html.light .nav-link:hover { background: rgba(168,128,26,.1) !important; color: #2d2a24 !important; } html.light .nav-link.active { background: linear-gradient(135deg, rgba(168,128,26,.18), rgba(168,128,26,.07)) !important; color: #8a6c14 !important; } /* النصوص العامة */ html.light .page-title { color: #2d2a24 !important; } html.light .page-sub { color: #8a847a !important; } html.light .topbar-breadcrumb { color: #5c574c !important; } /* الشارات */ html.light .badge { background: #d0ccbe !important; color: #5c574c !important; border-color: #bdb8a8 !important; } /* الأفاتار */ html.light .topbar-avatar { background: linear-gradient(135deg, #a8801a, #c49832) !important; color: #fff !important; } /* ── إصلاح القوائم المنسدلة في الوضع الفاتح ── */ html.light .form-select option, html.light select option { background: #f9f7f3 !important; color: #2d2a24 !important; } html.light .form-select, html.light select { background: #eceae0 !important; color: #2d2a24 !important; border-color: #bdb8a8 !important; } html.light .modal .form-select, html.light .modal select, html.light .modal-overlay .form-select, html.light .modal-overlay select { background: #eceae0 !important; color: #2d2a24 !important; } /* ── تعميق الكتابة في الوضع الفاتح ── */ html.light body, html.light .page-title, html.light .team-user-name, html.light td, html.light th, html.light .stat-label, html.light .form-label, html.light .modal-title { color: #1a1714 !important; } html.light .page-sub, html.light .stat-value { color: #3d3830 !important; } html.light .nav-link { color: #3d3830 !important; } html.light .nav-link.active { color: #8a6c14 !important; } html.light .topbar-breadcrumb { color: #3d3830 !important; } html.light .card, html.light .stat-card { color: #1a1714 !important; }