/* =================================================================== */ /* DARK MODE OVERRIDES FOR SERENITY v9 */ /* (Overrides light-mode styles completely) */ /* =================================================================== */ :root[data-bs-theme="dark"] { --bs-body-bg: #121212; --bs-body-color: #e0e0e0; --bs-card-bg: #1e1e1e; --bs-border-color: #444; --bs-btn-color: #fff; --bs-btn-bg: #333; --bs-btn-border-color: #555; --bs-form-control-bg: #252525; --bs-form-control-color: #e0e0e0; --bs-form-control-border-color: #555; /* Custom Serenity-specific variables */ --sidebar-bg: #1a1a1a; --sidebar-header-bg: #161616; --sidebar-text: #e0e0e0; --sidebar-icon: #a0a0a0; --sidebar-active-bg: #252525; --sidebar-active-text: #009055; --sidebar-active-border: #009055; --content-bg: #161616; --grid-header-bg: #222222; --grid-row-bg: #1a1a1a; --grid-row-hover: #2a2a2a; --footer-bg: #1a1a1a; } /* === 1. BODY & GENERAL LAYOUT === */ :root[data-bs-theme="dark"] body { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; } /* === 2. SIDEBAR (Serenity v9 structure) === */ :root[data-bs-theme="dark"] .s-sidebar-pane { background-color: var(--sidebar-bg) !important; } :root[data-bs-theme="dark"] .s-sidebar-header { background-color: var(--sidebar-header-bg) !important; } :root[data-bs-theme="dark"] .s-sidebar-header .s-sidebar-header-title, :root[data-bs-theme="dark"] .s-sidebar-header .s-sidebar-header-link i { color: var(--sidebar-text) !important; } :root[data-bs-theme="dark"] .s-sidebar-link-text { color: var(--sidebar-text) !important; } :root[data-bs-theme="dark"] .s-sidebar-icon { color: var(--sidebar-icon) !important; } :root[data-bs-theme="dark"] .s-sidebar-item { background-color: transparent !important; border-left: 4px solid transparent !important; } :root[data-bs-theme="dark"] .s-sidebar-item.active, :root[data-bs-theme="dark"] .s-sidebar-item.active:hover { background-color: var(--sidebar-active-bg) !important; border-left: 4px solid var(--sidebar-active-border) !important; } :root[data-bs-theme="dark"] .s-sidebar-item.active .s-sidebar-link-text, :root[data-bs-theme="dark"] .s-sidebar-item.active .s-sidebar-icon { color: var(--sidebar-active-text) !important; } :root[data-bs-theme="dark"] .s-sidebar-menu { background-color: var(--sidebar-bg) !important; } :root[data-bs-theme="dark"] .s-sidebar-link:hover .s-sidebar-link-text { color: var(--sidebar-active-text) !important; } :root[data-bs-theme="dark"] .s-sidebar-menu .s-sidebar-item:hover { background-color: var(--sidebar-active-bg) !important; } :root[data-bs-theme="dark"] .s-sidebar-search-input { background-color: #2a2a2a !important; color: var(--sidebar-text) !important; border: 1px solid var(--bs-border-color) !important; } /* Fix hamburger icon */ :root[data-bs-theme="dark"] .fa-bars::before { color: #fff !important; background: transparent !important; } /* === 3. MAIN CONTENT AREA === */ :root[data-bs-theme="dark"] section.content, :root[data-bs-theme="dark"] .full-height-page section.content, /* ملف: dark-overrides.css */ /* dark-overrides.css */ /* وضع داكن — يُطبّق فقط عند تفعيل data-bs-theme="dark" على */ /* dark-overrides.css */ /* وضع داكن — تجاوز كامل لأي تنسيق سابق */ html[data-bs-theme="dark"] .full-height-page section.content > .s-Panel, html[data-bs-theme="dark"] .full-height-page section.content > .s-DataGrid { background-color: #161616 !important; color: #e0e0e0 !important; } /* إذا كان هناك عناصر داخلية مثل الجداول (SlickGrid) */ html[data-bs-theme="dark"] .slick-grid-container, html[data-bs-theme="dark"] .slick-header, html[data-bs-theme="dark"] .slick-row { background-color: #161616 !important; color: #e0e0e0 !important; } /* تجاوز خلفية الجدول الداخلية */ html[data-bs-theme="dark"] .slick-row { background: #1a1a1a !important; } html[data-bs-theme="dark"] .slick-row:hover { background: #2a2a2a !important; } /* === 4. GRID & TABLES (SlickGrid-based) === */ :root[data-bs-theme="dark"] .slick-header { background: var(--grid-header-bg) !important; color: #fff !important; border-color: var(--bs-border-color) !important; } :root[data-bs-theme="dark"] .slick-row { background: var(--grid-row-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } :root[data-bs-theme="dark"] .slick-row:hover, :root[data-bs-theme="dark"] .slick-row.odd:hover { background: var(--grid-row-hover) !important; } :root[data-bs-theme="dark"] .grid-title, :root[data-bs-theme="dark"] .section.content-header { color: var(--bs-body-color) !important; } /* === 5. BUTTONS & CONTROLS === */ :root[data-bs-theme="dark"] .export-chart-button, :root[data-bs-theme="dark"] .export-pdf-button, :root[data-bs-theme="dark"] .kpi-chart-container button { background-color: #009055 !important; color: #000 !important; border: none !important; box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; } :root[data-bs-theme="dark"] .export-chart-button:hover, :root[data-bs-theme="dark"] .export-pdf-button:hover, :root[data-bs-theme="dark"] .kpi-chart-container button:hover { background-color: #3ac855 !important; } /* Form controls */ :root[data-bs-theme="dark"] .form-control, :root[data-bs-theme="dark"] .form-select { background-color: var(--bs-form-control-bg) !important; color: var(--bs-form-control-color) !important; border-color: var(--bs-form-control-border-color) !important; } /* === 6. FOOTER === */ :root[data-bs-theme="dark"] .main-footer { background-color: var(--footer-bg) !important; border-top: 1px solid #333 !important; color: var(--bs-body-color) !important; } :root[data-bs-theme="dark"] .footer-time, :root[data-bs-theme="dark"] .footer-left a { color: #009055 !important; } :root[data-bs-theme="dark"] .footer-left a:hover { color: #3ac855 !important; } /* === 7. DIALOGS & MODALS (jQuery UI based) === */ :root[data-bs-theme="dark"] .ui-dialog, :root[data-bs-theme="dark"] .ui-widget-content { background-color: var(--bs-card-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } :root[data-bs-theme="dark"] .ui-widget-header { background: #2a2a2a !important; color: #fff !important; border-color: #444 !important; } /* === 8. RTL FIX (if any) === */ :root[data-bs-theme="dark"] .rtl { direction: ltr !important; text-align: left !important; } /* === زر تبديل الوضع الداكن === */ :root[data-bs-theme="dark"] #themeToggle { background-color: transparent !important; color: #e0e0e0 !important; border-color: #555 !important; } :root[data-bs-theme="dark"] #themeToggle:hover { background-color: #333 !important; color: #fff !important; border-color: #666 !important; } :root[data-bs-theme="dark"] #themeToggle i { color: inherit !important; } :root[data-bs-theme="dark"] .s-sidebar-header-link { color: #e0e0e0 !important; } :root[data-bs-theme="dark"] .s-sidebar-header-link:hover { color: #009055 !important; } /* === دعم الوضع الداكن لصفحة الأخبار === */ html[data-bs-theme="dark"] .news-container { background-color: #121212; color: #e0e0e0; } html[data-bs-theme="dark"] .news-card { background-color: #1e1e1e !important; border-color: #444 !important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important; } html[data-bs-theme="dark"] .news-card:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5) !important; } html[data-bs-theme="dark"] .news-card img { border-color: #444 !important; } html[data-bs-theme="dark"] .news-card-title { color: #009055 !important; /* لون مميز للعناوين */ } html[data-bs-theme="dark"] .news-card-description { color: #ccc !important; } html[data-bs-theme="dark"] .news-card-footer { color: #aaa !important; border-color: #444 !important; } /* Lightbox في الوضع الداكن — بالفعل داكن، لكن نضمن التوافق */ html[data-bs-theme="dark"] .lightbox { background-color: rgba(0, 0, 0, 0.95) !important; } html[data-bs-theme="dark"] .close { color: #fff !important; } html[data-bs-theme="dark"] .close:hover { color: #bbb !important; } html[data-bs-theme="dark"] header h1 { color: #009055 !important; } /* === دعم الوضع الداكن لصفحة الـ Dashboard === */ html[data-bs-theme="dark"] .dashboard-container { --primary-color: #009055; --secondary-color: #5ac8a3; --light-bg: #1e1e1e; --text-color: #e0e0e0; --border-color: #444; --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } html[data-bs-theme="dark"] .stat-card { background: #1a1a1a !important; border: 1px solid #333 !important; color: var(--text-color) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; } html[data-bs-theme="dark"] .stat-card:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important; } html[data-bs-theme="dark"] .stat-title { color: #ccc !important; } /* الألوان الداكنة للمؤشرات — تبقى مميزة */ html[data-bs-theme="dark"] .stat-total { color: var(--primary-color) !important; } html[data-bs-theme="dark"] .stat-open { color: #ff6b6b !important; } html[data-bs-theme="dark"] .stat-ongoing { color: #ffcc00 !important; } html[data-bs-theme="dark"] .stat-closed { color: #4caf50 !important; } html[data-bs-theme="dark"] .stat-newly-closed { color: #4da6ff !important; } html[data-bs-theme="dark"] .stat-members { color: #b388ff !important; } html[data-bs-theme="dark"] .stat-decisions { color: #9a67ea !important; } /* عناوين الكروت */ html[data-bs-theme="dark"] .dashboard-card-header { background-color: var(--primary-color) !important; color: #000 !important; border-color: var(--border-color) !important; } /* جدول KPIs */ html[data-bs-theme="dark"] .kpi-performance-table { background: #1e1e1e !important; color: var(--text-color) !important; } html[data-bs-theme="dark"] .kpi-performance-table th { background-color: #252525 !important; color: var(--primary-color) !important; border-color: var(--border-color) !important; } html[data-bs-theme="dark"] .kpi-performance-table td { border-color: var(--border-color) !important; } /* شريط التقدم */ html[data-bs-theme="dark"] .progress { background-color: #2a2a2a !important; border: 1px solid #444 !important; } html[data-bs-theme="dark"] .progress-bar { color: #fff !important; } /* العناصر المتأخرة (Overdue) */ html[data-bs-theme="dark"] .kpi-overdue { color: #ff6b6b !important; } /* === تعديل لون عناوين الأقسام في الوضع الداكن === */ /* إذا كان لديك كلاس مثل .dashboard-card-header */ html[data-bs-theme="dark"] .dashboard-card-header { background-color: #252525 !important; /* خلفية داكنة أكثر تناسقًا */ color: #e0e0e0 !important; /* نص فاتح لكن ليس أبيض صلب */ border-color: #444 !important; } /* إذا كان لديك عناصر

أو

داخل الأقسام */ html[data-bs-theme="dark"] h2, html[data-bs-theme="dark"] h3, html[data-bs-theme="dark"] .toggle-section-title { color: #e0e0e0 !important; } /* إذا كانت هناك أيقونات داخل العناوين */ html[data-bs-theme="dark"] .toggle-icon { color: #ccc !important; } /* لتحسين التباين مع الخلفية السوداء */ html[data-bs-theme="dark"] .dashboard-container h2, html[data-bs-theme="dark"] .dashboard-container h3 { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; } /* إظهار زر الطي دائمًا حتى في الشاشات الكبيرة */ @media (min-width: 1200px) { .s-sidebar-toggler { width: auto !important; display: inline-block !important; } } /* تأكد من أن الزر يظهر فوق كل شيء */ .s-sidebar-toggler { z-index: 1035 !important; position: relative !important; } html[data-bs-theme="dark"] .s-sidebar-toggler { background-color: #333 !important; color: #fff !important; border-color: #555 !important; } html[data-bs-theme="dark"] .s-sidebar-toggler:hover { background-color: #444 !important; color: #fff !important; } html[data-bs-theme="dark"] #sidebarCollapseToggle { color: #e0e0e0 !important; } /* =================================================================== */ /* FULL DARK MODE SUPPORT FOR DASHBOARD & COMMITTEE MODULES */ /* (Add this to the END of your dark-overrides.css file) */ /* =================================================================== */ /* =============== الخلفية العامة =============== */ html[data-bs-theme="dark"] body { background-color: #161616 !important; color: #e0e0e0 !important; } /* =============== داشبورد الرئيسي =============== */ /* الحاوية */ html[data-bs-theme="dark"] .dashboard-container { color: #e0e0e0 !important; } /* الكروت */ html[data-bs-theme="dark"] .dashboard-card, html[data-bs-theme="dark"] .stat-card { background: #1a1a1a !important; color: #e0e0e0 !important; border: 1px solid #444 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; } html[data-bs-theme="dark"] .dashboard-card:hover, html[data-bs-theme="dark"] .stat-card:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important; } /* رؤوس الكروت */ html[data-bs-theme="dark"] .dashboard-card-header { color: #fff !important; border-bottom: 1px solid #444 !important; } /* أزرار التصدير */ html[data-bs-theme="dark"] .export-btn { background: #1a1a1a !important; color: #009055 !important; border: 1px solid #444 !important; } html[data-bs-theme="dark"] .export-btn:hover { background: #009055 !important; color: #fff !important; } /* عناصر التحكم */ html[data-bs-theme="dark"] .control-btn, html[data-bs-theme="dark"] .btn-add, html[data-bs-theme="dark"] .btn-edit, html[data-bs-theme="dark"] .btn-delete, html[data-bs-theme="dark"] .btn-attendance, html[data-bs-theme="dark"] .btn-copy-recurring { border: 1px solid !important; } html[data-bs-theme="dark"] .btn-close { color: #aaa !important; } html[data-bs-theme="dark"] .btn-close:hover { color: #fff !important; } /* الكروت المحددة */ html[data-bs-theme="dark"] .member-card.selected { background-color: #1e1e1e !important; border-color: #007bff !important; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25) !important; } html[data-bs-theme="dark"] .details-table tr.selected { background-color: #1e1e1e !important; } html[data-bs-theme="dark"] .details-table tr.selected td { border-color: #007bff !important; } /* شبكة الأعضاء */ html[data-bs-theme="dark"] .member-card { background: #1a1a1a !important; border: 1px solid #444 !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .member-card:hover { border-color: #009055 !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important; } html[data-bs-theme="dark"] .member-name { color: #009055 !important; } html[data-bs-theme="dark"] .member-role { color: #bbb !important; } /* جدول التفاصيل */ html[data-bs-theme="dark"] .details-table { background: #1a1a1a !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .details-table th, html[data-bs-theme="dark"] .details-table td { border: 1px solid #444 !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .details-table th { background-color: #1e1e1e !important; color: #009055 !important; } html[data-bs-theme="dark"] .details-table tr:hover td { background-color: #1e1e1e !important; } /* أقسام مميزة */ html[data-bs-theme="dark"] .priority-section-header td { background: linear-gradient(90deg, #009055, #72c6a3) !important; color: white !important; border-top: 3px solid #005c36 !important; border-bottom: 2px solid rgba(255,255,255,0.3) !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important; } /* شريط التحكم داخل الكروت */ html[data-bs-theme="dark"] .dashboard-card-controls { background-color: #161616 !important; border-bottom: 1px solid #444 !important; color: #e0e0e0 !important; } /* وصف اللجنة */ html[data-bs-theme="dark"] #committeeDescriptionContent { background-color: #1e1e1e !important; border: 1px solid #444 !important; color: #e0e0e0 !important; } /* التقويم */ html[data-bs-theme="dark"] #committeeCalendar, html[data-bs-theme="dark"] #calendar { background: #1a1a1a !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .fc-day-today { background-color: #1e1e1e !important; } html[data-bs-theme="dark"] .fc-event, html[data-bs-theme="dark"] .fc-daygrid-event { background-color: #009055 !important; color: white !important; } html[data-bs-theme="dark"] .fc-event-time, html[data-bs-theme="dark"] .fc-event-title { color: #e0e0e0 !important; } /* =============== النوافذ المنبثقة (Modals) =============== */ html[data-bs-theme="dark"] .modal { background: #1a1a1a !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .modal-header { border-bottom: 2px solid #444 !important; } html[data-bs-theme="dark"] .modal-footer { border-top: 1px solid #444 !important; } html[data-bs-theme="dark"] .modal-title { color: #009055 !important; } /* الحقول */ html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] .inline-edit-input, html[data-bs-theme="dark"] .inline-edit-select { background-color: #252525 !important; color: #e0e0e0 !important; border: 2px solid #555 !important; } html[data-bs-theme="dark"] .form-control:focus, html[data-bs-theme="dark"] .inline-edit-input:focus, html[data-bs-theme="dark"] .inline-edit-select:focus { border-color: #009055 !important; box-shadow: 0 0 0 3px rgba(0, 144, 85, 0.25) !important; } html[data-bs-theme="dark"] .form-label { color: #e0e0e0 !important; } /* القوائم السياقية */ html[data-bs-theme="dark"] .context-menu { background: #1a1a1a !important; border: 1px solid #444 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important; } html[data-bs-theme="dark"] .context-menu-item { color: #e0e0e0 !important; border-bottom: 1px solid #444 !important; } html[data-bs-theme="dark"] .context-menu-item:hover { background-color: #252525 !important; } /* مؤشرات الحالة */ html[data-bs-theme="dark"] .status-pending { background-color: #3a3a2e !important; color: #e0c568 !important; } html[data-bs-theme="dark"] .status-completed { background-color: #2a3d2f !important; color: #9de0a6 !important; } html[data-bs-theme="dark"] .status-in-progress { background-color: #2a384a !important; color: #99caff !important; } /* الجداول العامة (لجان) */ html[data-bs-theme="dark"] .table, html[data-bs-theme="dark"] #summaryTable { background: #1a1a1a !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .table thead th, html[data-bs-theme="dark"] #summaryTable thead th { background-color: #1e1e1e !important; color: #009055 !important; border-bottom: 2px solid #72c6a3 !important; } html[data-bs-theme="dark"] .table tbody tr:hover, html[data-bs-theme="dark"] #summaryTable tbody tr:hover { background-color: #1e1e1e !important; } html[data-bs-theme="dark"] .table td { border: 1px solid #444 !important; } html[data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: #161616 !important; } /* الفلاتر */ html[data-bs-theme="dark"] .filters { background-color: #1a1a1a !important; box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; } /* رؤوس الكروت (لجان) */ html[data-bs-theme="dark"] .card-header { background-color: #252525 !important; color: #fff !important; } html[data-bs-theme="dark"] .card { background: #1a1a1a !important; color: #e0e0e0 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; } html[data-bs-theme="dark"] .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important; } /* اسم اللجنة */ html[data-bs-theme="dark"] #committeeNameHeader { color: #009055 !important; } /* جدول Checklist */ html[data-bs-theme="dark"] #checklistTable .compliant-select, html[data-bs-theme="dark"] #checklistTable .verified-by-select { background-color: #252525 !important; color: #e0e0e0 !important; border: 1px solid #555 !important; } /* =================================================================== */ /* DARK MODE SUPPORT FOR EMBEDDED DASHBOARD (INLINE STYLE) */ /* =================================================================== */ html[data-bs-theme="dark"] .dashboard-container { color: #e0e0e0 !important; } /* الكروت */ html[data-bs-theme="dark"] .dashboard-card { background: #1a1a1a !important; color: #e0e0e0 !important; border: 1px solid #444 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; } /* رؤوس الكروت */ html[data-bs-theme="dark"] .dashboard-card-header { color: #fff !important; border-bottom: 1px solid #444 !important; } /* جدول التفاصيل */ html[data-bs-theme="dark"] .details-table { background: #1a1a1a !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .details-table th, html[data-bs-theme="dark"] .details-table td { border: 1px solid #444 !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .details-table th { background-color: #1e1e1e !important; color: #009055 !important; } html[data-bs-theme="dark"] .details-table tr:hover td { background-color: #1e1e1e !important; } /* أقسام مميزة (عناوين priority) */ html[data-bs-theme="dark"] .priority-section-header td { background: linear-gradient(90deg, #009055, #72c6a3) !important; color: white !important; border-top: 3px solid #005c36 !important; border-bottom: 2px solid rgba(255,255,255,0.3) !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important; } /* =================================================================== */ /* DARK MODE SUPPORT FOR KPI & CONTROL PANEL DASHBOARDS */ /* =================================================================== */ /* =============== الخلفيات العامة =============== */ html[data-bs-theme="dark"] .kpi-dashboard, html[data-bs-theme="dark"] .kpi-filters, html[data-bs-theme="dark"] .dashboard-card, html[data-bs-theme="dark"] .kpi-chart-card, html[data-bs-theme="dark"] .kpi-mini-card, html[data-bs-theme="dark"] .snapshot-details-content { background: #1a1a1a !important; color: #e0e0e0 !important; border-color: #444 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; } /* =============== الكروت والبطاقات =============== */ html[data-bs-theme="dark"] .stat-card, html[data-bs-theme="dark"] .kpi-detail-item { background: #1e1e1e !important; border: 1px solid #444 !important; color: #e0e0e0 !important; } /* بطاقات KPI الملونة */ html[data-bs-theme="dark"] .kpi-mini-card { border-left: 4px solid #059669 !important; } html[data-bs-theme="dark"] .kpi-mini-card.critical { border-left-color: #dc2626 !important; } html[data-bs-theme="dark"] .kpi-mini-card.warning { border-left-color: #d97706 !important; } /* =============== رؤوس الكروت =============== */ /* رؤوس الأقسام - نسخة داكنة متوافقة مع الهوية البصرية */ html[data-bs-theme="dark"] .dashboard-card-header, html[data-bs-theme="dark"] .kpi-chart-header, html[data-bs-theme="dark"] .kpi-table th { background: linear-gradient(135deg, #252525, #252525) !important; color: #f1f5f9 !important; border-bottom: 1px solid #444 !important; } /* =============== الجداول =============== */ html[data-bs-theme="dark"] .kpi-table, html[data-bs-theme="dark"] .details-table, html[data-bs-theme="dark"] .monthly-readings-table { background: #1a1a1a !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .kpi-table th, html[data-bs-theme="dark"] .details-table th, html[data-bs-theme="dark"] .monthly-readings-table th { background: #1e1e1e !important; color: #059669 !important; border: 1px solid #444 !important; } html[data-bs-theme="dark"] .kpi-table td, html[data-bs-theme="dark"] .details-table td, html[data-bs-theme="dark"] .monthly-readings-table td { border: 1px solid #444 !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .kpi-table tr:nth-child(even), html[data-bs-theme="dark"] .details-table tr:hover td, html[data-bs-theme="dark"] .monthly-readings-table tr:hover td { background-color: #1e1e1e !important; } /* =============== مؤشرات الحالة =============== */ html[data-bs-theme="dark"] .status-normal { background-color: #1a291f !important; color: #86e09d !important; } html[data-bs-theme="dark"] .status-warning { background-color: #2a2518 !important; color: #f8c97c !important; } html[data-bs-theme="dark"] .status-critical { background-color: #2a1a1a !important; color: #f88a8a !important; } /* =============== الحقول والفلاتر =============== */ html[data-bs-theme="dark"] .kpi-dropdown, html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] input, html[data-bs-theme="dark"] select, html[data-bs-theme="dark"] .select2-container--default .select2-selection--single { background-color: #252525 !important; color: #e0e0e0 !important; border: 2px solid #555 !important; } html[data-bs-theme="dark"] .kpi-dropdown:focus, html[data-bs-theme="dark"] .form-control:focus, html[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single { border-color: #059669 !important; box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.25) !important; } html[data-bs-theme="dark"] .form-label, html[data-bs-theme="dark"] .kpi-filters .form-label { color: #e0e0e0 !important; } /* =============== النصوص والأرقام =============== */ html[data-bs-theme="dark"] .stat-card h3, html[data-bs-theme="dark"] .kpi-name, html[data-bs-theme="dark"] .kpi-detail-label { color: #e0e0e0 !important; } html[data-bs-theme="dark"] .stat-card p, html[data-bs-theme="dark"] .kpi-value, html[data-bs-theme="dark"] .kpi-detail-value { background: linear-gradient(135deg, #059669, #047857) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; /* fallback */ } /* =============== التنبيهات =============== */ html[data-bs-theme="dark"] #controlChartWarningsContainer { background-color: #2a2518 !important; border: 1px solid #d97706 !important; color: #f8c97c !important; } html[data-bs-theme="dark"] #controlChartWarningsContainer h4, html[data-bs-theme="dark"] #controlChartWarningsList { color: #f8c97c !important; } html[data-bs-theme="dark"] #btnReportDeviation { background-color: #b45309 !important; } html[data-bs-theme="dark"] #btnReportDeviation:hover { background-color: #9a4707 !important; } /* =============== الأزرار =============== */ html[data-bs-theme="dark"] .btn-add, html[data-bs-theme="dark"] .btn-edit, html[data-bs-theme="dark"] .btn-delete, html[data-bs-theme="dark"] .view-details-btn, html[data-bs-theme="dark"] .view-mode-btn, html[data-bs-theme="dark"] #btnLoadMore { border: 1px solid !important; } html[data-bs-theme="dark"] .btn-close { color: #aaa !important; } html[data-bs-theme="dark"] .btn-close:hover { color: #fff !important; } /* =============== النوافذ المنبثقة =============== */ html[data-bs-theme="dark"] .modal { background: #1a1a1a !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .modal-header { border-bottom: 2px solid #444 !important; } html[data-bs-theme="dark"] .modal-footer { border-top: 1px solid #444 !important; } html[data-bs-theme="dark"] .modal-title { color: #059669 !important; } /* =============== عناصر التحرير =============== */ html[data-bs-theme="dark"] .inline-edit-input, html[data-bs-theme="dark"] .inline-edit-select { background-color: #252525 !important; color: #e0e0e0 !important; border: 2px solid #059669 !important; } /* دعم كامل لحاويات الرسوم البيانية في الوضع الداكن */ html[data-bs-theme="dark"] .kpi-chart-container, html[data-bs-theme="dark"] .chart-container, html[data-bs-theme="dark"] .apexcharts-canvas, html[data-bs-theme="dark"] canvas { background-color: #1a1a1a !important; color: #e0e0e0 !important; } /* خلفية شبكة تفاصيل KPI في الوضع الداكن */ html[data-bs-theme="dark"] .kpi-details-grid { background-color: #1a1a1a !important; border: 1px solid #444 !important; color: #e0e0e0 !important; } /* =============== Select2 - الوضع الداكن =============== */ html[data-bs-theme="dark"] .select2-dropdown { background-color: #1a1a1a !important; border: 1px solid #444 !important; color: #e0e0e0 !important; } /* عناصر القائمة */ html[data-bs-theme="dark"] .select2-results__option { background-color: #1a1a1a !important; color: #e0e0e0 !important; padding: 6px 12px !important; } /* العنصر المُحدَّد حالياً (selected) */ html[data-bs-theme="dark"] .select2-results__option[aria-selected="true"] { background-color: #1e1e1e !important; color: #059669 !important; } /* العنصر المُمرَّر عليه (highlighted) */ html[data-bs-theme="dark"] .select2-results__option--highlighted[aria-selected] { background-color: #059669 !important; color: #f1f5f9 !important; } /* حقل البحث داخل القائمة المنسدلة */ html[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: #252525 !important; color: #e0e0e0 !important; border: 1px solid #555 !important; border-radius: 4px !important; } /* تأكد من أن النتائج لا ترث خلفية بيضاء */ html[data-bs-theme="dark"] .select2-results > .select2-results__options { background-color: #1a1a1a !important; } /* =================================================================== */ /* DARK MODE SUPPORT FOR SERENITY FORM ELEMENTS */ /* =================================================================== */ /* =============== الحقول النصية والمنسدلة (Input, Select, Textarea) =============== */ html[data-bs-theme="dark"] .s-Form input[type="text"], html[data-bs-theme="dark"] .s-Form input[type="email"], html[data-bs-theme="dark"] .s-Form input[type="number"], html[data-bs-theme="dark"] .s-Form input[type="date"], html[data-bs-theme="dark"] .s-Form textarea, html[data-bs-theme="dark"] .s-Form select { background-color: #252525 !important; color: #e0e0e0 !important; border: 1px solid #555 !important; border-radius: 4px !important; padding: 0.5rem 0.75rem !important; font-size: 0.95rem !important; } /* التركيز على الحقول */ html[data-bs-theme="dark"] .s-Form input:focus, html[data-bs-theme="dark"] .s-Form textarea:focus, html[data-bs-theme="dark"] .s-Form select:focus { border-color: #009055 !important; box-shadow: 0 0 0 3px rgba(0, 144, 85, 0.25) !important; outline: none !important; } /* =============== قوائم Select2 داخل الفورم =============== */ html[data-bs-theme="dark"] .select2-container--default .select2-selection--single { background-color: #252525 !important; color: #e0e0e0 !important; border: 1px solid #555 !important; border-radius: 4px !important; height: auto !important; padding: 0.5rem 0.75rem !important; } html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e0e0e0 !important; } html[data-bs-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single { border-color: #009055 !important; box-shadow: 0 0 0 3px rgba(0, 144, 85, 0.25) !important; } /* القائمة المنسدلة لـ Select2 */ html[data-bs-theme="dark"] .select2-dropdown { background-color: #1a1a1a !important; border: 1px solid #444 !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .select2-results__option { background-color: #1a1a1a !important; color: #e0e0e0 !important; padding: 6px 12px !important; } html[data-bs-theme="dark"] .select2-results__option[aria-selected="true"] { background-color: #1e1e1e !important; color: #009055 !important; } html[data-bs-theme="dark"] .select2-results__option--highlighted[aria-selected] { background-color: #009055 !important; color: #fff !important; } html[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: #252525 !important; color: #e0e0e0 !important; border: 1px solid #555 !important; border-radius: 4px !important; } /* =============== حقول التاريخ (Date Picker) =============== */ html[data-bs-theme="dark"] .s-DateTimeEditor input, html[data-bs-theme="dark"] .s-DateEditor input { background-color: #252525 !important; color: #e0e0e0 !important; border: 1px solid #555 !important; border-radius: 4px !important; padding: 0.5rem 0.75rem !important; } /* =============== العلامات (Labels) =============== */ html[data-bs-theme="dark"] .s-Form label { color: #e0e0e0 !important; font-weight: 600 !important; } /* =============== علامة النجمة للحقول الإجبارية =============== */ html[data-bs-theme="dark"] .s-Form .required-label::before { content: "*"; color: #dc3545 !important; margin-right: 4px; } /* =============== الأزرار داخل الفورم =============== */ html[data-bs-theme="dark"] .s-Form .btn { background-color: #009055 !important; color: #fff !important; border: 1px solid #007a47 !important; padding: 0.5rem 1rem !important; border-radius: 4px !important; } html[data-bs-theme="dark"] .s-Form .btn:hover { background-color: #007a47 !important; border-color: #006a3c !important; } /* =============== حاوية الفورم =============== */ html[data-bs-theme="dark"] .s-Form { background-color: #161616 !important; color: #e0e0e0 !important; padding: 1.5rem !important; border-radius: 8px !important; border: 1px solid #444 !important; } /* =================================================================== */ /* DARK MODE FOR SELECT2 CLASSIC & CKEDITOR 4 IN SERENITY 9 */ /* =================================================================== */ /* =============== Select2 الكلاسيكي - الحقل الرئيسي =============== */ html[data-bs-theme="dark"] .select2-choice { background-color: #252525 !important; color: #e0e0e0 !important; border: 1px solid #555 !important; border-radius: 4px !important; } /* السهم داخل Select2 */ html[data-bs-theme="dark"] .select2-choice .select2-arrow { background-color: #1e1e1e !important; border-left: 1px solid #555 !important; } html[data-bs-theme="dark"] .select2-choice .select2-arrow b { border-top-color: #aaa !important; } /* =============== Select2 - القائمة المنسدلة =============== */ html[data-bs-theme="dark"] .select2-drop { background-color: #1a1a1a !important; color: #e0e0e0 !important; border: 1px solid #444 !important; border-top: none !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important; } /* عناصر القائمة */ html[data-bs-theme="dark"] .select2-drop .select2-results li { background-color: #1a1a1a !important; color: #e0e0e0 !important; padding: 6px 8px !important; } /* العنصر المُحدَّد */ html[data-bs-theme="dark"] .select2-drop .select2-results li.select2-highlighted { background-color: #009055 !important; color: #fff !important; } /* =============== CKEditor 4 - الواجهة =============== */ /* الشريط العلوي */ html[data-bs-theme="dark"] .cke_top { background-color: #161616 !important; border-bottom: 1px solid #444 !important; padding: 6px 8px 2px !important; } /* منطقة الكتابة */ html[data-bs-theme="dark"] .cke_contents { background-color: #1a1a1a !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .cke_editable { background-color: #1a1a1a !important; color: #e0e0e0 !important; padding: 10px !important; } /* الشريط السفلي */ html[data-bs-theme="dark"] .cke_bottom { background-color: #161616 !important; border-top: 1px solid #444 !important; padding: 6px 8px 2px !important; } /* أزرار شريط الأدوات */ html[data-bs-theme="dark"] .cke_button { color: #ccc !important; } html[data-bs-theme="dark"] .cke_button:hover, html[data-bs-theme="dark"] .cke_button.cke_on { background-color: #252525 !important; border-radius: 2px !important; } /* =================================================================== */ /* DARK MODE — Specific Fixes for Annual Plans Dashboard */ /* =================================================================== */ /* --- وصف الخطة (Plan Description) --- */ html[data-bs-theme="dark"] #planDescriptionContent { background-color: #1e1e1e !important; border: 1px solid #444 !important; color: #e0e0e0 !important; border-radius: 8px !important; } /* --- أزرار التحكم (Control Buttons Bar) --- */ html[data-bs-theme="dark"] .control-buttons { background-color: #161616 !important; border-bottom: 1px solid #444 !important; } /* =================================================================== */ /* DARK MODE — الجداول: thead/tbody/tr/td/th (عام لكن آمن) */ /* =================================================================== */ /* ✅ يُطبّق فقط داخل الصفحات التي تستخدم data-bs-theme="dark" */ html[data-bs-theme="dark"] thead, html[data-bs-theme="dark"] tbody, html[data-bs-theme="dark"] tfoot { color: #e0e0e0 !important; } /* الصفوف والخلايا — خلفية داكنة مُنظمة */ html[data-bs-theme="dark"] tr { background-color: transparent !important; /* يسمح لـ tbody/thead بتحديد الخلفية */ } html[data-bs-theme="dark"] tbody tr { background-color: #1a1a1a !important; } html[data-bs-theme="dark"] tbody tr:hover, html[data-bs-theme="dark"] tbody tr.selected { background-color: #1e1e1e !important; } html[data-bs-theme="dark"] thead th { background-color: #1e1e1e !important; color: #009055 !important; border-color: #444 !important; } html[data-bs-theme="dark"] td, html[data-bs-theme="dark"] th { color: #fff !important; border-color: #444 !important; /* الحدود: ترث الأسلوب لكن نضبط العرض واللون صراحةً */ border-style: solid !important; border-width: 1px !important; } /* =================================================================== */ /* DARK MODE — تغيير لون hover للصفوف في الجداول */ /* =================================================================== */ /* عندما تمرر على صف في أي جدول داخل dashboard */ html[data-bs-theme="dark"] .plans-table tbody tr:hover td { background-color: #444 !important; } /* إذا كان لديك جداول أخرى مثل swotTable, resourcesTable, etc. */ html[data-bs-theme="dark"] .swotTable tbody tr:hover td, html[data-bs-theme="dark"] .resourcesTable tbody tr:hover td, html[data-bs-theme="dark"] .lessonsTable tbody tr:hover td, html[data-bs-theme="dark"] .relatedItemsTable tbody tr:hover td, html[data-bs-theme="dark"] .subPlansProgressTable tbody tr:hover td, html[data-bs-theme="dark"] .allTasksTable tbody tr:hover td { background-color: #444 !important; } /* لتحسين التباين مع النصوص */ html[data-bs-theme="dark"] .plans-table tbody tr:hover td, html[data-bs-theme="dark"] .swotTable tbody tr:hover td, html[data-bs-theme="dark"] .resourcesTable tbody tr:hover td, html[data-bs-theme="dark"] .lessonsTable tbody tr:hover td, html[data-bs-theme="dark"] .relatedItemsTable tbody tr:hover td, html[data-bs-theme="dark"] .subPlansProgressTable tbody tr:hover td, html[data-bs-theme="dark"] .allTasksTable tbody tr:hover td { color: #fff !important; /* لجعل النص واضحًا على الخلفية الرمادية */ } /* الوضع الداكن — منطقة التحكم في العناصر المرتبطة */ html[data-bs-theme="dark"] .related-items-controls { background-color: #161616 !important; border-bottom: 1px solid #444 !important; color: #e0e0e0 !important; } /* =================================================================== */ /* DARK MODE — خلايا الجداول العامة (td / th داخل .table) */ /* =================================================================== */ html[data-bs-theme="dark"] .table > :not(caption) > * > * { color: #e0e0e0 !important; background-color: #1a1a1a !important; border-bottom-color: #444 !important; /* إذا أردت إظهار الحدود الأفقية فقط (كما في أنماط Serenity) */ border-bottom-width: 1px !important; /* إلغاء أي box-shadow داخلي من Bootstrap */ box-shadow: none !important; } /* =================================================================== */ /* DARK MODE — تحسينات الجداول المتداخلة والـ Fullscreen */ /* =================================================================== */ html[data-bs-theme="dark"] .details-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } html[data-bs-theme="dark"] .main-details-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; background: #1a1a1a !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .main-details-table th, html[data-bs-theme="dark"] .main-details-table td { padding: 12px; border: 1px solid #444 !important; text-align: left; vertical-align: middle; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .main-details-table th { background-color: #1e1e1e !important; color: #009055 !important; font-weight: 600; position: sticky; top: 0; z-index: 5; } html[data-bs-theme="dark"] .main-details-table tbody tr:nth-child(even) { background-color: #1d1d1d !important; } html[data-bs-theme="dark"] .main-details-table tbody tr:hover td { background-color: #252525 !important; } html[data-bs-theme="dark"] .expand-btn { background: none !important; border: none !important; cursor: pointer !important; font-size: 1rem !important; color: #4da6ff !important; padding: 0 !important; margin-right: 6px !important; transition: transform 0.2s; } html[data-bs-theme="dark"] .expand-btn:focus { outline: none !important; } html[data-bs-theme="dark"] .expand-btn:hover { color: #9ac8ff !important; } html[data-bs-theme="dark"] .toggle-icon.expanded { transform: rotate(90deg) !important; } html[data-bs-theme="dark"] .nested-row { display: none; } html[data-bs-theme="dark"] .nested-container { padding: 12px 24px; background-color: #1d1d1d !important; border-top: 1px dashed #555 !important; border-bottom: 1px dashed #555 !important; } html[data-bs-theme="dark"] .sub-details-table { width: 100%; margin-top: 8px; font-size: 0.85rem; border-collapse: collapse; background: #1a1a1a !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .sub-details-table th, html[data-bs-theme="dark"] .sub-details-table td { padding: 8px 10px; border: 1px solid #4a4a4a !important; background-color: #1c1c1c !important; vertical-align: top; color: #e0e0e0 !important; } html[data-bs-theme="dark"] .sub-details-table th { background-color: #202020 !important; color: #86e09d !important; font-weight: 600; font-size: 0.8rem; } /* =================================================================== */ /* DARK MODE — عناصر السحب والإفلات (Drag & Drop) */ /* =================================================================== */ html[data-bs-theme="dark"] .draggable-topic, html[data-bs-theme="dark"] .draggable-decision, html[data-bs-theme="dark"] .draggable-agenda-item { cursor: grab !important; transition: all 0.2s ease !important; position: relative !important; } html[data-bs-theme="dark"] .draggable-topic.dragging, html[data-bs-theme="dark"] .draggable-decision.dragging, html[data-bs-theme="dark"] .draggable-agenda-item.dragging { opacity: 0.75 !important; background-color: #262626 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important; } html[data-bs-theme="dark"] .draggable-topic.drag-over, html[data-bs-theme="dark"] .draggable-decision.drag-over, html[data-bs-theme="dark"] .draggable-agenda-item.drag-over { background-color: #1c2a3a !important; border-left: 4px solid #4da6ff !important; } html[data-bs-theme="dark"] .draggable-topic.selected, html[data-bs-theme="dark"] .draggable-decision.selected { background-color: #1c2a3a !important; border-left: 4px solid #009055 !important; } html[data-bs-theme="dark"] .priority-section-header.drag-over { background-color: #1e2a26 !important; border-left: 4px solid #009055 !important; box-shadow: inset 0 0 0 2px rgba(0, 144, 85, 0.4) !important; } /* =================================================================== */ /* DARK MODE — التحرير المضمن (Inline Edit) */ /* =================================================================== */ html[data-bs-theme="dark"] .inline-edit-input, html[data-bs-theme="dark"] .inline-edit-select { width: 100% !important; padding: 4px 8px !important; border: 1px solid #009055 !important; border-radius: 3px !important; background-color: #252525 !important; color: #e0e0e0 !important; font-size: 0.85rem !important; } html[data-bs-theme="dark"] .inline-edit-input:focus, html[data-bs-theme="dark"] .inline-edit-select:focus { border-color: #4da6ff !important; box-shadow: 0 0 0 3px rgba(77, 166, 255, 0.2) !important; outline: none !important; } /* =================================================================== */ /* DARK MODE — أزرار الإضافة والتحكم */ /* =================================================================== */ html[data-bs-theme="dark"] .add-record-btn { background-color: #009055 !important; color: white !important; border: none !important; border-radius: 3px !important; padding: 4px 8px !important; font-size: 0.8rem !important; cursor: pointer !important; } html[data-bs-theme="dark"] .add-record-btn:hover { background-color: #007a47 !important; opacity: 0.95 !important; } /* =================================================================== */ /* DARK MODE — تبويبات التنقل (nav-tabs) */ /* =================================================================== */ html[data-bs-theme="dark"] .nav-tabs { border-bottom: 2px solid #444 !important; margin-bottom: 1rem; background-color: #161616 !important; border-radius: 0.5rem 0.5rem 0 0 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; padding: 0.5rem 0.75rem !important; } html[data-bs-theme="dark"] .nav-tabs .nav-link { color: #aaa !important; background-color: transparent !important; border: 1px solid transparent !important; border-top-left-radius: 0.5rem !important; border-top-right-radius: 0.5rem !important; padding: 0.75rem 1.25rem !important; font-weight: 600 !important; font-size: 0.95rem !important; transition: all 0.3s ease !important; position: relative !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; text-decoration: none !important; } html[data-bs-theme="dark"] .nav-tabs .nav-link:hover { color: #009055 !important; background-color: #1e1e1e !important; border-color: #444 #444 transparent !important; transform: translateY(-1px) !important; } html[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: #009055 !important; background-color: #1a1a1a !important; border: 1px solid #444 !important; border-bottom-color: #1a1a1a !important; box-shadow: 0 -2px 0 #009055 inset, 0 2px 4px rgba(0, 0, 0, 0.15) !important; z-index: 2 !important; } html[data-bs-theme="dark"] .nav-tabs .nav-link i.toggle-icon { font-size: 0.9rem !important; transition: transform 0.3s ease !important; color: #888 !important; } html[data-bs-theme="dark"] .nav-tabs .nav-link i.toggle-icon.collapsed { transform: rotate(-90deg) !important; } html[data-bs-theme="dark"] .nav-tabs .nav-link.active i.toggle-icon { color: #009055 !important; transform: rotate(0deg) !important; } html[data-bs-theme="dark"] .tab-content { border-radius: var(--border-radius) !important; border: 1px solid #444 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; background-color: #1a1a1a !important; padding: 1.5rem !important; } /* =================================================================== */ /* DARK MODE — دليل الاستخدام (How-To Guide) */ /* =================================================================== */ html[data-bs-theme="dark"] .howto-guide-container { color: #e0e0e0 !important; font-size: 1.05rem !important; line-height: 1.7 !important; } html[data-bs-theme="dark"] .howto-section h4 { color: #009055 !important; font-weight: 800 !important; font-size: 1.8rem !important; border-bottom: 3px solid #007a47 !important; } html[data-bs-theme="dark"] .howto-step-card { background: #1c1c1c !important; border-radius: 16px !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important; border: 1px solid #007a47 !important; padding: 2.25rem !important; } html[data-bs-theme="dark"] .howto-step-card::before { background: linear-gradient(to bottom, #007a47, #2e7d32, #388e3c) !important; } html[data-bs-theme="dark"] .howto-step-card:hover { box-shadow: 0 12px 30px rgba(0, 144, 85, 0.25) !important; } html[data-bs-theme="dark"] .howto-step-card h5 { color: #66bb6a !important; } html[data-bs-theme="dark"] .howto-step-card p, html[data-bs-theme="dark"] .howto-step-card li { color: #c5c5c5 !important; } html[data-bs-theme="dark"] .howto-badge { border: 1px solid #444 !important; } html[data-bs-theme="dark"] .howto-badge--primary { background-color: #1c2a40 !important; color: #88b7e0 !important; } html[data-bs-theme="dark"] .howto-badge--success { background-color: #1c2a22 !important; color: #a5d6a7 !important; } html[data-bs-theme="dark"] .howto-badge--warning { background-color: #2a2518 !important; color: #ffd54f !important; } html[data-bs-theme="dark"] .howto-badge--info { background-color: #1a2e2e !important; color: #80deea !important; } html[data-bs-theme="dark"] .howto-badge--danger { background-color: #2a1a1a !important; color: #ef9a9a !important; } html[data-bs-theme="dark"] .howto-note { background-color: #2a2518 !important; border-left: 4px solid #d97706 !important; color: #f8c97c !important; } html[data-bs-theme="dark"] .howto-note::before { content: '💡'; color: #f8c97c !important; } html[data-bs-theme="dark"] .howto-visual img { border: 1px solid #007a47 !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important; } html[data-bs-theme="dark"] .howto-visual img:hover { box-shadow: 0 10px 25px rgba(0, 144, 85, 0.35) !important; } html[data-bs-theme="dark"] .howto-cta-section { background: linear-gradient(135deg, #1a2a22 0%, #161616 100%) !important; border: 1px solid #007a47 !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important; } html[data-bs-theme="dark"] .howto-cta-section i { color: #009055 !important; } html[data-bs-theme="dark"] .howto-cta-section h4 { color: #66bb6a !important; } html[data-bs-theme="dark"] .howto-cta-section p { color: #c5c5c5 !important; } /* =================================================================== */ /* DARK MODE — الوضع ملء الشاشة (Fullscreen Table) */ /* =================================================================== */ html[data-bs-theme="dark"] .fullscreen-table-container { background-color: #0f0f0f !important; padding: 16px !important; overflow: auto !important; height: 100vh !important; display: flex !important; flex-direction: column !important; } html[data-bs-theme="dark"] .fullscreen-table-container .main-details-table { flex: 1; min-height: 0; } html[data-bs-theme="dark"] .fullscreen-table-container .nested-container { max-height: 300px !important; overflow-y: auto !important; background-color: #131313 !important; } html[data-bs-theme="dark"] #decisionsBody .details-table-container.fullscreen-mode .main-details-table, html[data-bs-theme="dark"] #decisionsBody .details-table-container.fullscreen-mode .sub-details-table { font-size: 16px !important; } html[data-bs-theme="dark"] #decisionsBody .details-table-container.fullscreen-mode th, html[data-bs-theme="dark"] #decisionsBody .details-table-container.fullscreen-mode td { padding: 8px 10px !important; } html[data-bs-theme="dark"] #decisionsBody .details-table-container.fullscreen-mode .expand-btn i { font-size: 1.2em !important; color: #9ac8ff !important; } /* =================================================================== */ /* DARK MODE — أقسام الأولوية (Open/New/Default Topic Rows) */ /* =================================================================== */ html[data-bs-theme="dark"] .draggable-topic[data-priority-name="Open"], html[data-bs-theme="dark"] .draggable-decision[data-priority-name="Open"], html[data-bs-theme="dark"] .draggable-topic[data-priority-name="New"], html[data-bs-theme="dark"] .draggable-decision[data-priority-name="New"], html[data-bs-theme="dark"] .draggable-topic[data-priority-name="Default"], html[data-bs-theme="dark"] .draggable-decision[data-priority-name="Default"] { background-color: #1c261f !important; } html[data-bs-theme="dark"] .draggable-topic[data-priority-name="Open"]:hover, html[data-bs-theme="dark"] .draggable-decision[data-priority-name="Open"]:hover, html[data-bs-theme="dark"] .draggable-topic[data-priority-name="New"]:hover, html[data-bs-theme="dark"] .draggable-decision[data-priority-name="New"]:hover, html[data-bs-theme="dark"] .draggable-topic[data-priority-name="Default"]:hover, html[data-bs-theme="dark"] .draggable-decision[data-priority-name="Default"]:hover { background-color: #263d29 !important; border-left: 4px solid #2e7d32 !important; } html[data-bs-theme="dark"] .priority-section-header[data-section="Open"]:hover, html[data-bs-theme="dark"] .priority-section-header[data-section="New"]:hover, html[data-bs-theme="dark"] .priority-section-header[data-section="Default"]:hover { background: linear-gradient(90deg, #007a47, #2e7d32) !important; border-top-color: #005c36 !important; } html[data-bs-theme="dark"] .nested-container .sub-details-table { background-color: #161c18 !important; border: 1px solid #007a47 !important; } html[data-bs-theme="dark"] .nested-container .sub-details-table th, html[data-bs-theme="dark"] .nested-container .sub-details-table td { border-color: #1e2a21 !important; } /* =================================================================== */ /* DARK MODE — زر معطل (btn-disabled) */ /* =================================================================== */ html[data-bs-theme="dark"] .btn-disabled { opacity: 0.55 !important; cursor: not-allowed !important; background-color: #444 !important; color: #888 !important; border-color: #555 !important; } html[data-bs-theme="dark"] .btn-disabled:hover { opacity: 0.6 !important; background-color: #444 !important; color: #888 !important; } /* =================================================================== */ /* DARK MODE — Terms of Reference (Static TOR Document) */ /* =================================================================== */ html[data-bs-theme="dark"] h2, html[data-bs-theme="dark"] h3 { color: #e0e0e0 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; } /* عناوين H2 مميزة */ html[data-bs-theme="dark"] h2 { color: #009055 !important; border-bottom: 2px solid #005c36 !important; padding-bottom: 0.4rem !important; } /* الجداول العامة في TOR (مثل Header Info + Approvals + Review Info) */ html[data-bs-theme="dark"] table[border="1"] { border-color: #444 !important; background-color: #1a1a1a !important; color: #e0e0e0 !important; } html[data-bs-theme="dark"] table[border="1"] td, html[data-bs-theme="dark"] table[border="1"] th { border-color: #444 !important; background-color: #1a1a1a !important; color: #e0e0e0 !important; padding: 0.75rem !important; } /* خلايا الرؤوس / الصفوف المُظلَّلة (مثل background-color:#ecf0f1) */ html[data-bs-theme="dark"] table[border="1"] td[style*="background-color:#ecf0f1"], html[data-bs-theme="dark"] table[border="1"] th[style*="background-color:#ecf0f1"], html[data-bs-theme="dark"] table[border="1"] tr > td[colspan][style*="background-color:#ecf0f1"] { background-color: #1e1e1e !important; color: #009055 !important; font-weight: 600 !important; border-color: #444 !important; } /* الصفوف الفردية (حتى بدون تضليل) تحصل على تدرج داكن ناعم */ html[data-bs-theme="dark"] table[border="1"] tbody tr:nth-child(even) td { background-color: #161616 !important; } /* رؤوس الجداول (thead > tr > th) */ html[data-bs-theme="dark"] table[border="1"] thead th { background-color: #1e1e1e !important; color: #009055 !important; border-bottom: 2px solid #007a47 !important; } /* القوائم (ol, ul) */ html[data-bs-theme="dark"] ol, html[data-bs-theme="dark"] ul { color: #e0e0e0 !important; } html[data-bs-theme="dark"] ol li, html[data-bs-theme="dark"] ul li { margin-bottom: 0.75rem !important; } html[data-bs-theme="dark"] ol li strong, html[data-bs-theme="dark"] ul li strong { color: #009055 !important; } /* فقرات النصوص */ html[data-bs-theme="dark"] p { color: #e0e0e0 !important; margin-bottom: 1rem !important; } /* =================================================================== */ /* DARK MODE — Terms of Reference (TOR) Static Document */ /* =================================================================== */ /* === العناوين الرئيسية === */ html[data-bs-theme="dark"] h2, html[data-bs-theme="dark"] h3 { color: #e0e0e0 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; } /* h2 مميز (مثل اسم اللجنة) */ html[data-bs-theme="dark"] h2 { color: #009055 !important; border-bottom: 2px solid #005c36 !important; padding-bottom: 0.5rem !important; margin-top: 2rem !important; margin-bottom: 1.25rem !important; } /* === الجداول العامة (border="1") === */ html[data-bs-theme="dark"] table[border="1"] { border-color: #444 !important; background-color: #1a1a1a !important; color: #e0e0e0 !important; width: 100% !important; border-collapse: collapse !important; } html[data-bs-theme="dark"] table[border="1"] td, html[data-bs-theme="dark"] table[border="1"] th { border: 1px solid #444 !important; padding: 0.75rem !important; color: #e0e0e0 !important; background-color: #1a1a1a !important; vertical-align: top !important; } /* خلفيات الخلايا المُظلّلة (مثل background-color:#ecf0f1) */ html[data-bs-theme="dark"] table[border="1"] td[style*="background-color:#ecf0f1"], html[data-bs-theme="dark"] table[border="1"] th[style*="background-color:#ecf0f1"], html[data-bs-theme="dark"] table[border="1"] tr > td[colspan][style*="background-color:#ecf0f1"] { background-color: #1e1e1e !important; color: #009055 !important; font-weight: 600 !important; border-color: #444 !important; } /* رؤوس الجداول (thead) */ html[data-bs-theme="dark"] table[border="1"] thead th { background-color: #1e1e1e !important; color: #009055 !important; border-bottom: 2px solid #007a47 !important; text-align: left !important; } /* صفوف زوجية لتحسين القراءة (حتى بدون class) */ html[data-bs-theme="dark"] table[border="1"] tbody tr:nth-child(even) td { background-color: #161616 !important; } /* === القوائم المرقّمة وغير المرقّمة === */ html[data-bs-theme="dark"] ol, html[data-bs-theme="dark"] ul { color: #e0e0e0 !important; padding-left: 1.5rem !important; } html[data-bs-theme="dark"] ol li, html[data-bs-theme="dark"] ul li { margin-bottom: 0.6rem !important; line-height: 1.6 !important; } html[data-bs-theme="dark"] ol li strong, html[data-bs-theme="dark"] ul li strong { color: #009055 !important; } /* القوائم المتداخلة */ html[data-bs-theme="dark"] ul ul { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } /* === الفقرات === */ html[data-bs-theme="dark"] p { color: #e0e0e0 !important; line-height: 1.6 !important; margin-bottom: 1rem !important; } html[data-bs-theme="dark"] p strong { color: #009055 !important; } /* =================================================================== */ /* DARK MODE — OVERRIDE INLINE STYLES IN TOR DOCUMENT */ /* (For element.style and legacy inline background-color="#fff") */ /* =================================================================== */ /* 1. الحاوية الرئيسية (حتى لو كانت تستخدم inline style) */ html[data-bs-theme="dark"] [style*="background-color:#fff"], html[data-bs-theme="dark"] [style*="background-color: #fff"], html[data-bs-theme="dark"] [style*="background:#fff"], html[data-bs-theme="dark"] [style*="background: #fff"] { background-color: #1a1a1a !important; color: #e0e0e0 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; } /* 2. جداول TOR: تجاوز الخلفيات البيضاء في الخلايا (حتى لو مُضمنة) */ html[data-bs-theme="dark"] table[border="1"] td[style*="background-color:#fff"], html[data-bs-theme="dark"] table[border="1"] td[style*="background-color: #fff"], html[data-bs-theme="dark"] table[border="1"] td[style*="background:#fff"], html[data-bs-theme="dark"] table[border="1"] td[style*="background: #fff"] { background-color: #1a1a1a !important; color: #e0e0e0 !important; border-color: #444 !important; } /* 3. تأمين كل الخلايا داخل جداول TOR (حتى بدون inline style) */ html[data-bs-theme="dark"] table[border="1"] td, html[data-bs-theme="dark"] table[border="1"] th { background-color: #1a1a1a !important; color: #e0e0e0 !important; border-color: #444 !important; } /* 4. عناصر

,

  • , داخل TOR — تأمين الألوان */ html[data-bs-theme="dark"] p, html[data-bs-theme="dark"] li, html[data-bs-theme="dark"] ol li, html[data-bs-theme="dark"] ul li { color: #e0e0e0 !important; } html[data-bs-theme="dark"] strong { color: #009055 !important; } /* 5. (اختياري) إذا كانت الحاوية مُعرّفة بـ class أو id معين، استخدم مباشرًا */ /* مثال: لو كانت
    أو id="torContainer" */ html[data-bs-theme="dark"] .tor-document, html[data-bs-theme="dark"] #torContainer { background-color: #1a1a1a !important; color: #e0e0e0 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; } /* =================================================================== */ /* DARK MODE — تجاوز inline style لخلايا الجداول المُظلَّلة */ /* (مثل: style="background-color:#ecf0f1; color:#2c3e50; ...") */ /* =================================================================== */ /* 1. خلفية رمادية فاتحة → داكنة */ html[data-bs-theme="dark"] td[style*="background-color:#ecf0f1"], html[data-bs-theme="dark"] td[style*="background-color: #ecf0f1"], html[data-bs-theme="dark"] td[style*="background:#ecf0f1"], html[data-bs-theme="dark"] td[style*="background: #ecf0f1"] { background-color: #1e1e1e !important; color: #009055 !important; font-weight: 600 !important; border-color: #444 !important; } /* 2. إن وُجدت ألوان نص رمادية داكنة (#2c3e50 أو #34495e أو #7f8c8d) داخل نفس العناصر */ html[data-bs-theme="dark"] td[style*="color:#2c3e50"], html[data-bs-theme="dark"] td[style*="color: #2c3e50"], html[data-bs-theme="dark"] td[style*="color:#34495e"], html[data-bs-theme="dark"] td[style*="color: #34495e"], html[data-bs-theme="dark"] td[style*="color:#7f8c8d"], html[data-bs-theme="dark"] td[style*="color: #7f8c8d"] { color: #e0e0e0 !important; } /* 3. تأمين مزيج مشترك: خلفية + لون نص في نفس الـ style */ html[data-bs-theme="dark"] td[style*="#ecf0f1"][style*="#2c3e50"], html[data-bs-theme="dark"] td[style*="#ecf0f1"][style*="#34495e"], html[data-bs-theme="dark"] td[style*="#ecf0f1"][style*="#7f8c8d"] { background-color: #1e1e1e !important; color: #009055 !important; font-weight: 600 !important; border-color: #444 !important; } /* 4. (إحتياطي) كل خلايا الجداول المحتوية على أي inline style مُضيئة — نُعيد ضبطها */ html[data-bs-theme="dark"] table[border="1"] td[style] { background-color: #1a1a1a !important; color: #e0e0e0 !important; border-color: #444 !important; } /* لكن نستثني إذا كانت تحتوي على "background-color:#ecf0f1" لأنها مُعالَجة أعلاه */ html[data-bs-theme="dark"] table[border="1"] td[style*="background-color:#ecf0f1"], html[data-bs-theme="dark"] table[border="1"] td[style*="background:#ecf0f1"] { background-color: #1e1e1e !important; color: #009055 !important; }