/* ====== THEME VARIABLES ====== */ :root { --color-bg: #ffffff; --color-surface: #f8f9fa; --color-text: #212529; --color-muted: #6c757d; --color-primary: #0d6efd; --color-accent: #00b7ff; --color-border: #dee2e6; --card-radius: 12px; } /* Dark vars when html[data-bs-theme="dark"] */ html[data-bs-theme="dark"] { --color-bg: #0f1418; --color-surface: #1b2228; --color-text: #e6eef6; --color-muted: #9aa4b0; --color-primary: #00b7ff; --color-accent: #33cfff; --color-border: #22303a; } /* إضافة دعم للغة العربية */ body.rtl { direction: rtl; text-align: right; } body.rtl .navbar-nav, body.rtl .card-body, body.rtl .footer, body.rtl .offcanvas-body { text-align: right; } body.rtl .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; } body.rtl .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; } body.rtl .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; } body.rtl .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; } body.rtl .text-md-start { text-align: right !important; } body.rtl .d-flex.justify-content-between .badge { order: 2; } body.rtl .d-flex.justify-content-between .btn { order: 1; } /* يمكنك إضافة المزيد من التنسيقات حسب الحاجة */ /* ====== FORCE BODY BACKGROUND (important) ====== */ /* These selectors are intentionally specific and use !important to override bootstrap inline classes */ html[data-bs-theme="light"] body, body[data-bs-theme="light"] { background: linear-gradient( 135deg, var(--color-bg) 0%, rgba(0, 0, 0, 0.02) 100% ) !important; background-color: var(--color-bg) !important; color: var(--color-text) !important; transition: background 0.45s ease, color 0.35s ease; } /* ===== BODY & THEME-AWARE BACKGROUND ===== */ /* افتراضياً (light) — يستخدم متغيرات root */ html[data-bs-theme="light"] body, body:not([data-bs-theme]) { background: linear-gradient( 135deg, var(--color-bg, #ffffff) 0%, rgba(0, 0, 0, 0.02) 100% ); background-color: var(--color-bg, #ffffff); color: var(--color-text, #212529); transition: background 0.45s ease, color 0.35s ease; } /* الداكن — يتم تفعيله عندما يتغير data-bs-theme إلى "dark" على عنصر */ html[data-bs-theme="dark"] body, body[data-bs-theme="dark"] { background: linear-gradient(135deg, #0f1418 0%, #071014 100%) !important; background-color: #0f1418 !important; color: var(--color-text, #e6eef6); transition: background 0.45s ease, color 0.35s ease; } /* Force common containers to use surface color (override bg-white/ etc) */ html[data-bs-theme="light"] .surface-box, html[data-bs-theme="light"] .card, html[data-bs-theme="light"] .navbar, html[data-bs-theme="light"] footer, html[data-bs-theme="light"] .offcanvas, html[data-bs-theme="light"] .modal-content { background: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } html[data-bs-theme="dark"] .surface-box, html[data-bs-theme="dark"] .card, html[data-bs-theme="dark"] .navbar, html[data-bs-theme="dark"] footer, html[data-bs-theme="dark"] .offcanvas, html[data-bs-theme="dark"] .modal-content { background: var(--color-surface) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; } /* Some helpers to override explicit bootstrap classes that may be present */ .bg-white, ., .text-dark, .border-dark { background: none !important; color: inherit !important; border-color: inherit !important; } /* Other UI */ .navbar { border-bottom: 1px solid var(--color-border) !important; } .navbar .nav-link { color: var(--color-text) !important; } .navbar .nav-link.active { color: var(--color-primary) !important; } .card { border-radius: var(--card-radius); border: 1px solid var(--color-border) !important; box-shadow: none; } .card .card-body, .card .card-footer { background: transparent !important; color: var(--color-text) !important; } .section-title { display: inline-block; padding: 0.6rem 1.2rem; background: transparent; color: var(--color-text); border-radius: 8px; border: 1px solid var(--color-border); } .muted { color: var(--color-muted) !important; } /* scroll to top */ #scrollTopBtn { position: fixed; bottom: 22px; right: 22px; display: none; background: var(--color-primary); color: #fff; padding: 10px; border-radius: 50%; border: none; } #scrollTopBtn:hover { background: var(--color-accent); }