/** * ================================================================================ * نظام الثيمات الموحد - Unified Theme System * ================================================================================ * ملف واحد يحتوي على جميع ثيمات الألوان للنظام الكامل * يتم تطبيق الثيم عن طريق إضافة class للـ body * * الثيمات المتاحة: * - theme-red (الأحمر - الافتراضي) * - theme-blue (الأزرق) * - theme-green (الأخضر) * - theme-yellow (الأصفر) * - theme-purple (البنفسجي) * - theme-orange (البرتقالي) * - theme-pink (الوردي) * - theme-teal (التركواز) * * الاستخدام: * أو إلخ... * ================================================================================ */ /* ============================================================================ انتقالات سلسة للثيمات - Smooth Theme Transitions ============================================================================ */ * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } body { transition: background-color 0.3s ease, color 0.3s ease; } .sidebar-menu li a, .navbar-nav li a, .btn, .card, .table, .form-control { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* الكروت لا تحتاج انتقالات لأنها تظهر بالألوان الصحيحة فوراً */ .small-box { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; cursor: pointer; position: relative; overflow: hidden; } .small-box:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important; } .small-box::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .small-box:hover::before { left: 100%; } .small-box .inner {} .small-box:hover .inner { transform: scale(1.05); } .small-box .icon1 { /* الأيقونة ثابتة - لا تتحرك عند التمرير */ } /* ============================================================================ تحسينات للأجهزة المحمولة - تقليل التأثيرات لتحسين الأداء ============================================================================ */ @media (max-width: 768px) { .small-box:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important; } .small-box:hover .inner { transform: scale(1.02); } .small-box::before { transition: left 0.3s; } } /* ============================================================================ الثيم الأحمر - Red Theme (الافتراضي) ============================================================================ */ body.theme-red, body:not([class*="theme-"]) { /* الألوان الأساسية */ --primary-color: #dc3545; --primary-hover: #c82333; --primary-active: #bd2130; --success-dark: #1e7e34; /* ألوان الخطأ */ --error-color: #dc3545; --error-hover: #c82333; --error-light: #f8d7da; --error-dark: #bd2130; /* ألوان التحذير */ --warning-color: #ffc107; --warning-hover: #e0a800; --warning-light: #fff3cd; --warning-dark: #d39e00; /* ألوان المعلومات */ --info-color: #17a2b8; --info-hover: #138496; --info-light: #d1ecf1; --info-dark: #117a8b; /* ألوان الخلفية */ --bg-primary: #dc3545; --bg-secondary: #6c757d; --bg-light: #f8f9fa; --bg-dark: #343a40; --bg-white: #ffffff; --bg-body: #ecf0f5; /* ألوان النصوص */ --text-primary: #333333; --text-secondary: #666666; --text-muted: #999999; --text-light: #ffffff; --text-dark: #212529; /* ألوان الحدود */ --border-color: #dee2e6; --border-light: #e9ecef; --border-dark: #adb5bd; /* ألوان الروابط */ --link-color: #dc3545; --link-hover: #c82333; /* ألوان الكروت في الداشبورد */ --card-customers: #dc3545; --card-customers-hover: #c82333; --card-suppliers: #28a745; --card-suppliers-hover: #218838; --card-orders: #ffc107; --card-orders-hover: #e0a800; --card-workers: #17a2b8; --card-workers-hover: #138496; --card-checks: #dc3545; --card-checks-hover: #c82333; --card-invoices: #a71d2a; --card-invoices-hover: #dc3545; --card-movements: #1e7e34; --card-movements-hover: #28a745; --card-reports: #117a8b; --card-reports-hover: #17a2b8; /* ألوان الأزرار */ --btn-primary: #dc3545; --btn-primary-hover: #c82333; --btn-secondary: #6c757d; --btn-secondary-hover: #5a6268; /* ألوان الـ Sidebar */ --sidebar-bg: #222d32; --sidebar-hover: #1e282c; --sidebar-active: #dc3545; --sidebar-text: #b8c7ce; /* ألوان الـ Navbar */ --navbar-bg: #dc3545; --navbar-text: #ffffff; --navbar-hover: #c82333; /* ألوان الجداول */ --table-header-bg: #dc3545; --table-header-text: #ffffff; --table-row-hover: #f8f9fa; --table-border: #dee2e6; /* ألوان الـ Cards */ --card-bg: #ffffff; --card-border: #dee2e6; --card-header-bg: #f8f9fa; /* ألوان الـ Forms */ --input-bg: #ffffff; --input-border: #ced4da; --input-focus: #dc3545; --input-disabled: #e9ecef; /* ألوان الـ Login Page */ --login-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --login-card-bg: rgba(255, 255, 255, 0.95); --login-btn-bg: #dc3545; --login-btn-hover: #c82333; /* الظلال */ --shadow-sm: 0 0.125rem 0.25rem rgba(220, 53, 69, 0.075); --shadow: 0 0.5rem 1rem rgba(220, 53, 69, 0.15); --shadow-lg: 0 1rem 3rem rgba(220, 53, 69, 0.175); } /* ============================================================================ الثيم الأزرق - Blue Theme ============================================================================ */ body.theme-blue { --primary-color: #007bff; --primary-hover: #0056b3; --primary-active: #004085; --primary-light: #cce5ff; --primary-dark: #003d7a; --success-color: #28a745; --success-hover: #218838; --success-light: #d4edda; --success-dark: #1e7e34; --error-color: #dc3545; --error-hover: #c82333; --error-light: #f8d7da; --error-dark: #bd2130; --warning-color: #ffc107; --warning-hover: #e0a800; --warning-light: #fff3cd; --warning-dark: #d39e00; --info-color: #17a2b8; --info-hover: #138496; --info-light: #d1ecf1; --info-dark: #117a8b; --bg-primary: #007bff; --bg-secondary: #6c757d; --bg-light: #f8f9fa; --bg-dark: #343a40; --bg-white: #ffffff; --bg-body: #e8f4f8; --text-primary: #333333; --text-secondary: #666666; --text-muted: #999999; --text-light: #ffffff; --text-dark: #212529; --border-color: #dee2e6; --border-light: #e9ecef; --border-dark: #adb5bd; --link-color: #007bff; --link-hover: #0056b3; /* ألوان الكروت في الداشبورد */ --card-customers: #007bff; --card-customers-hover: #0056b3; --card-suppliers: #28a745; --card-suppliers-hover: #218838; --card-orders: #ffc107; --card-orders-hover: #e0a800; --card-workers: #17a2b8; --card-workers-hover: #138496; --card-checks: #007bff; --card-checks-hover: #0056b3; --card-invoices: #003d7a; --card-invoices-hover: #007bff; --card-movements: #1e7e34; --card-movements-hover: #28a745; --card-reports: #117a8b; --card-reports-hover: #17a2b8; --btn-primary: #007bff; --btn-primary-hover: #0056b3; --btn-secondary: #6c757d; --btn-secondary-hover: #5a6268; --sidebar-bg: #1a2226; --sidebar-hover: #151a1e; --sidebar-active: #007bff; --sidebar-text: #b8c7ce; --navbar-bg: #007bff; --navbar-text: #ffffff; --navbar-hover: #0056b3; --table-header-bg: #007bff; --table-header-text: #ffffff; --table-row-hover: #f8f9fa; --table-border: #dee2e6; --card-bg: #ffffff; --card-border: #dee2e6; --card-header-bg: #f8f9fa; --input-bg: #ffffff; --input-border: #ced4da; --input-focus: #007bff; --input-disabled: #e9ecef; --login-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --login-card-bg: rgba(255, 255, 255, 0.95); --login-btn-bg: #007bff; --login-btn-hover: #0056b3; --shadow-sm: 0 0.125rem 0.25rem rgba(0, 123, 255, 0.075); --shadow: 0 0.5rem 1rem rgba(0, 123, 255, 0.15); --shadow-lg: 0 1rem 3rem rgba(0, 123, 255, 0.175); /* ألوان الكروت في الداشبورد */ --card-customers: #007bff; --card-customers-hover: #0056b3; --card-suppliers: #28a745; --card-suppliers-hover: #218838; --card-orders: #ffc107; --card-orders-hover: #e0a800; --card-workers: #17a2b8; --card-workers-hover: #138496; --card-checks: #007bff; --card-checks-hover: #0056b3; --card-invoices: #003d7a; --card-invoices-hover: #007bff; --card-movements: #1e7e34; --card-movements-hover: #28a745; --card-reports: #117a8b; --card-reports-hover: #17a2b8; } /* ============================================================================ الثيم الأخضر - Green Theme ============================================================================ */ body.theme-green { --primary-color: #28a745; --primary-hover: #218838; --primary-active: #1e7e34; --primary-light: #d4edda; --primary-dark: #1c7430; --success-color: #28a745; --success-hover: #218838; --success-light: #d4edda; --success-dark: #1e7e34; --error-color: #dc3545; --error-hover: #c82333; --error-light: #f8d7da; --error-dark: #bd2130; --warning-color: #ffc107; --warning-hover: #e0a800; --warning-light: #fff3cd; --warning-dark: #d39e00; --info-color: #17a2b8; --info-hover: #138496; --info-light: #d1ecf1; --info-dark: #117a8b; --bg-primary: #28a745; --bg-secondary: #6c757d; --bg-light: #f8f9fa; --bg-dark: #343a40; --bg-white: #ffffff; --bg-body: #e8f5e9; --text-primary: #333333; --text-secondary: #666666; --text-muted: #999999; --text-light: #ffffff; --text-dark: #212529; --border-color: #dee2e6; --border-light: #e9ecef; --border-dark: #adb5bd; --link-color: #28a745; --link-hover: #218838; --btn-primary: #28a745; --btn-primary-hover: #218838; --btn-secondary: #6c757d; --btn-secondary-hover: #5a6268; --sidebar-bg: #1a2f23; --sidebar-hover: #15261d; --sidebar-active: #28a745; --sidebar-text: #b8c7ce; --navbar-bg: #28a745; --navbar-text: #ffffff; --navbar-hover: #218838; --table-header-bg: #28a745; --table-header-text: #ffffff; --table-row-hover: #f8f9fa; --table-border: #dee2e6; --card-bg: #ffffff; --card-border: #dee2e6; --card-header-bg: #f8f9fa; --input-bg: #ffffff; --input-border: #ced4da; --input-focus: #28a745; --input-disabled: #e9ecef; --login-bg: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); --login-card-bg: rgba(255, 255, 255, 0.95); --login-btn-bg: #28a745; --login-btn-hover: #218838; --shadow-sm: 0 0.125rem 0.25rem rgba(40, 167, 69, 0.075); --shadow: 0 0.5rem 1rem rgba(40, 167, 69, 0.15); --shadow-lg: 0 1rem 3rem rgba(40, 167, 69, 0.175); /* ألوان الكروت في الداشبورد */ --card-customers: #28a745; --card-customers-hover: #218838; --card-suppliers: #007bff; --card-suppliers-hover: #0056b3; --card-orders: #ffc107; --card-orders-hover: #e0a800; --card-workers: #17a2b8; --card-workers-hover: #138496; --card-checks: #28a745; --card-checks-hover: #218838; --card-invoices: #1e7e34; --card-invoices-hover: #28a745; --card-movements: #007bff; --card-movements-hover: #0056b3; --card-reports: #117a8b; --card-reports-hover: #17a2b8; } /* ============================================================================ الثيم الأصفر - Yellow Theme ============================================================================ */ body.theme-yellow { --primary-color: #ffc107; --primary-hover: #e0a800; --primary-active: #d39e00; --primary-light: #fff3cd; --primary-dark: #c69500; --success-color: #28a745; --success-hover: #218838; --success-light: #d4edda; --success-dark: #1e7e34; --error-color: #dc3545; --error-hover: #c82333; --error-light: #f8d7da; --error-dark: #bd2130; --warning-color: #ffc107; --warning-hover: #e0a800; --warning-light: #fff3cd; --warning-dark: #d39e00; --info-color: #17a2b8; --info-hover: #138496; --info-light: #d1ecf1; --info-dark: #117a8b; --bg-primary: #ffc107; --bg-secondary: #6c757d; --bg-light: #f8f9fa; --bg-dark: #343a40; --bg-white: #ffffff; --bg-body: #fffbf0; --text-primary: #333333; --text-secondary: #666666; --text-muted: #999999; --text-light: #ffffff; --text-dark: #212529; --border-color: #dee2e6; --border-light: #e9ecef; --border-dark: #adb5bd; --link-color: #ffc107; --link-hover: #e0a800; --btn-primary: #ffc107; --btn-primary-hover: #e0a800; --btn-secondary: #6c757d; --btn-secondary-hover: #5a6268; --sidebar-bg: #2d2716; --sidebar-hover: #231f12; --sidebar-active: #ffc107; --sidebar-text: #b8c7ce; --navbar-bg: #ffc107; --navbar-text: #212529; --navbar-hover: #e0a800; --table-header-bg: #ffc107; --table-header-text: #212529; --table-row-hover: #f8f9fa; --table-border: #dee2e6; --card-bg: #ffffff; --card-border: #dee2e6; --card-header-bg: #f8f9fa; --input-bg: #ffffff; --input-border: #ced4da; --input-focus: #ffc107; --input-disabled: #e9ecef; --login-bg: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --login-card-bg: rgba(255, 255, 255, 0.95); --login-btn-bg: #ffc107; --login-btn-hover: #e0a800; --shadow-sm: 0 0.125rem 0.25rem rgba(255, 193, 7, 0.075); --shadow: 0 0.5rem 1rem rgba(255, 193, 7, 0.15); --shadow-lg: 0 1rem 3rem rgba(255, 193, 7, 0.175); /* ألوان الكروت في الداشبورد */ --card-customers: #ffc107; --card-customers-hover: #e0a800; --card-suppliers: #28a745; --card-suppliers-hover: #218838; --card-orders: #007bff; --card-orders-hover: #0056b3; --card-workers: #17a2b8; --card-workers-hover: #138496; --card-checks: #ffc107; --card-checks-hover: #e0a800; --card-invoices: #c69500; --card-invoices-hover: #ffc107; --card-movements: #1e7e34; --card-movements-hover: #28a745; --card-reports: #117a8b; --card-reports-hover: #17a2b8; } /* ============================================================================ الثيم البنفسجي - Purple Theme ============================================================================ */ body.theme-purple { --primary-color: #6f42c1; --primary-hover: #5a32a3; --primary-active: #4e2a8e; --primary-light: #e2d9f3; --primary-dark: #432874; --success-color: #28a745; --success-hover: #218838; --success-light: #d4edda; --success-dark: #1e7e34; --error-color: #dc3545; --error-hover: #c82333; --error-light: #f8d7da; --error-dark: #bd2130; --warning-color: #ffc107; --warning-hover: #e0a800; --warning-light: #fff3cd; --warning-dark: #d39e00; --info-color: #17a2b8; --info-hover: #138496; --info-light: #d1ecf1; --info-dark: #117a8b; --bg-primary: #6f42c1; --bg-secondary: #6c757d; --bg-light: #f8f9fa; --bg-dark: #343a40; --bg-white: #ffffff; --bg-body: #f3eef8; --text-primary: #333333; --text-secondary: #666666; --text-muted: #999999; --text-light: #ffffff; --text-dark: #212529; --border-color: #dee2e6; --border-light: #e9ecef; --border-dark: #adb5bd; --link-color: #6f42c1; --link-hover: #5a32a3; --btn-primary: #6f42c1; --btn-primary-hover: #5a32a3; --btn-secondary: #6c757d; --btn-secondary-hover: #5a6268; --sidebar-bg: #1f1729; --sidebar-hover: #18121f; --sidebar-active: #6f42c1; --sidebar-text: #b8c7ce; --navbar-bg: #6f42c1; --navbar-text: #ffffff; --navbar-hover: #5a32a3; --table-header-bg: #6f42c1; --table-header-text: #ffffff; --table-row-hover: #f8f9fa; --table-border: #dee2e6; --card-bg: #ffffff; --card-border: #dee2e6; --card-header-bg: #f8f9fa; --input-bg: #ffffff; --input-border: #ced4da; --input-focus: #6f42c1; --input-disabled: #e9ecef; --login-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --login-card-bg: rgba(255, 255, 255, 0.95); --login-btn-bg: #6f42c1; --login-btn-hover: #5a32a3; --shadow-sm: 0 0.125rem 0.25rem rgba(111, 66, 193, 0.075); --shadow: 0 0.5rem 1rem rgba(111, 66, 193, 0.15); --shadow-lg: 0 1rem 3rem rgba(111, 66, 193, 0.175); /* ألوان الكروت في الداشبورد */ --card-customers: #6f42c1; --card-customers-hover: #5a32a3; --card-suppliers: #28a745; --card-suppliers-hover: #218838; --card-orders: #ffc107; --card-orders-hover: #e0a800; --card-workers: #17a2b8; --card-workers-hover: #138496; --card-checks: #6f42c1; --card-checks-hover: #5a32a3; --card-invoices: #432874; --card-invoices-hover: #6f42c1; --card-movements: #1e7e34; --card-movements-hover: #28a745; --card-reports: #117a8b; --card-reports-hover: #17a2b8; } /* ============================================================================ الثيم البرتقالي - Orange Theme ============================================================================ */ body.theme-orange { --primary-color: #fd7e14; --primary-hover: #e8590c; --primary-active: #d45100; --primary-light: #ffe5d0; --primary-dark: #c04900; --success-color: #28a745; --success-hover: #218838; --success-light: #d4edda; --success-dark: #1e7e34; --error-color: #dc3545; --error-hover: #c82333; --error-light: #f8d7da; --error-dark: #bd2130; --warning-color: #ffc107; --warning-hover: #e0a800; --warning-light: #fff3cd; --warning-dark: #d39e00; --info-color: #17a2b8; --info-hover: #138496; --info-light: #d1ecf1; --info-dark: #117a8b; --bg-primary: #fd7e14; --bg-secondary: #6c757d; --bg-light: #f8f9fa; --bg-dark: #343a40; --bg-white: #ffffff; --bg-body: #fff5eb; --text-primary: #333333; --text-secondary: #666666; --text-muted: #999999; --text-light: #ffffff; --text-dark: #212529; --border-color: #dee2e6; --border-light: #e9ecef; --border-dark: #adb5bd; --link-color: #fd7e14; --link-hover: #e8590c; --btn-primary: #fd7e14; --btn-primary-hover: #e8590c; --btn-secondary: #6c757d; --btn-secondary-hover: #5a6268; --sidebar-bg: #2d1a0d; --sidebar-hover: #23150a; --sidebar-active: #fd7e14; --sidebar-text: #b8c7ce; --navbar-bg: #fd7e14; --navbar-text: #ffffff; --navbar-hover: #e8590c; --table-header-bg: #fd7e14; --table-header-text: #ffffff; --table-row-hover: #f8f9fa; --table-border: #dee2e6; --card-bg: #ffffff; --card-border: #dee2e6; --card-header-bg: #f8f9fa; --input-bg: #ffffff; --input-border: #ced4da; --input-focus: #fd7e14; --input-disabled: #e9ecef; --login-bg: linear-gradient(135deg, #fa709a 0%, #fee140 100%); --login-card-bg: rgba(255, 255, 255, 0.95); --login-btn-bg: #fd7e14; --login-btn-hover: #e8590c; --shadow-sm: 0 0.125rem 0.25rem rgba(253, 126, 20, 0.075); --shadow: 0 0.5rem 1rem rgba(253, 126, 20, 0.15); --shadow-lg: 0 1rem 3rem rgba(253, 126, 20, 0.175); /* ألوان الكروت في الداشبورد */ --card-customers: #fd7e14; --card-customers-hover: #e8590c; --card-suppliers: #28a745; --card-suppliers-hover: #218838; --card-orders: #ffc107; --card-orders-hover: #e0a800; --card-workers: #17a2b8; --card-workers-hover: #138496; --card-checks: #fd7e14; --card-checks-hover: #e8590c; --card-invoices: #c04900; --card-invoices-hover: #fd7e14; --card-movements: #1e7e34; --card-movements-hover: #28a745; --card-reports: #117a8b; --card-reports-hover: #17a2b8; } /* ============================================================================ الثيم الوردي - Pink Theme ============================================================================ */ body.theme-pink { --primary-color: #e83e8c; --primary-hover: #d91a72; --primary-active: #c51162; --primary-light: #f8d7e8; --primary-dark: #b01058; --success-color: #28a745; --success-hover: #218838; --success-light: #d4edda; --success-dark: #1e7e34; --error-color: #dc3545; --error-hover: #c82333; --error-light: #f8d7da; --error-dark: #bd2130; --warning-color: #ffc107; --warning-hover: #e0a800; --warning-light: #fff3cd; --warning-dark: #d39e00; --info-color: #17a2b8; --info-hover: #138496; --info-light: #d1ecf1; --info-dark: #117a8b; --bg-primary: #e83e8c; --bg-secondary: #6c757d; --bg-light: #f8f9fa; --bg-dark: #343a40; --bg-white: #ffffff; --bg-body: #fef0f5; --text-primary: #333333; --text-secondary: #666666; --text-muted: #999999; --text-light: #ffffff; --text-dark: #212529; --border-color: #dee2e6; --border-light: #e9ecef; --border-dark: #adb5bd; --link-color: #e83e8c; --link-hover: #d91a72; --btn-primary: #e83e8c; --btn-primary-hover: #d91a72; --btn-secondary: #6c757d; --btn-secondary-hover: #5a6268; --sidebar-bg: #2d1420; --sidebar-hover: #22101a; --sidebar-active: #e83e8c; --sidebar-text: #b8c7ce; --navbar-bg: #e83e8c; --navbar-text: #ffffff; --navbar-hover: #d91a72; --table-header-bg: #e83e8c; --table-header-text: #ffffff; --table-row-hover: #f8f9fa; --table-border: #dee2e6; --card-bg: #ffffff; --card-border: #dee2e6; --card-header-bg: #f8f9fa; /* ألوان الكروت في الداشبورد */ --card-customers: #e83e8c; --card-customers-hover: #d91a72; --card-suppliers: #f093fb; --card-suppliers-hover: #e83e8c; --card-orders: #f5576c; --card-orders-hover: #e83e8c; --card-workers: #c2185b; --card-workers-hover: #ad1457; --card-checks: #e91e63; --card-checks-hover: #d81b60; --card-invoices: #f06292; --card-invoices-hover: #ec407a; --card-movements: #e91e63; --card-movements-hover: #d81b60; --input-bg: #ffffff; --input-border: #ced4da; --input-focus: #e83e8c; --input-disabled: #e9ecef; --login-bg: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --login-card-bg: rgba(255, 255, 255, 0.95); --login-btn-bg: #e83e8c; --login-btn-hover: #d91a72; --shadow-sm: 0 0.125rem 0.25rem rgba(232, 62, 140, 0.075); --shadow: 0 0.5rem 1rem rgba(232, 62, 140, 0.15); --shadow-lg: 0 1rem 3rem rgba(232, 62, 140, 0.175); } /* ============================================================================ الثيم التركواز - Teal Theme ============================================================================ */ body.theme-teal { --primary-color: #20c997; --primary-hover: #1aa179; --primary-active: #158765; --primary-light: #d1f4e8; --primary-dark: #127d5b; --success-color: #28a745; --success-hover: #218838; --success-light: #d4edda; --success-dark: #1e7e34; --error-color: #dc3545; --error-hover: #c82333; --error-light: #f8d7da; --error-dark: #bd2130; --warning-color: #ffc107; --warning-hover: #e0a800; --warning-light: #fff3cd; --warning-dark: #d39e00; --info-color: #17a2b8; --info-hover: #138496; --info-light: #d1ecf1; --info-dark: #117a8b; --bg-primary: #20c997; --bg-secondary: #6c757d; --bg-light: #f8f9fa; --bg-dark: #343a40; --bg-white: #ffffff; --bg-body: #e6f9f4; --text-primary: #333333; --text-secondary: #666666; --text-muted: #999999; --text-light: #ffffff; --text-dark: #212529; --border-color: #dee2e6; --border-light: #e9ecef; --border-dark: #adb5bd; --link-color: #20c997; --link-hover: #1aa179; --btn-primary: #20c997; --btn-primary-hover: #1aa179; --btn-secondary: #6c757d; --btn-secondary-hover: #5a6268; --sidebar-bg: #0d2d26; --sidebar-hover: #0a231e; --sidebar-active: #20c997; --sidebar-text: #b8c7ce; --navbar-bg: #20c997; --navbar-text: #ffffff; --navbar-hover: #1aa179; --table-header-bg: #20c997; --table-header-text: #ffffff; --table-row-hover: #f8f9fa; --table-border: #dee2e6; --card-bg: #ffffff; --card-border: #dee2e6; --card-header-bg: #f8f9fa; /* ألوان الكروت في الداشبورد */ --card-customers: #20c997; --card-customers-hover: #1aa179; --card-suppliers: #17a2b8; --card-suppliers-hover: #138496; --card-orders: #28a745; --card-orders-hover: #218838; --card-workers: #007bff; --card-workers-hover: #0056b3; --card-checks: #20c997; --card-checks-hover: #1aa179; --card-invoices: #0ba360; --card-invoices-hover: #20c997; --card-movements: #17a2b8; --card-movements-hover: #138496; --input-bg: #ffffff; --input-border: #ced4da; --input-focus: #20c997; --input-disabled: #e9ecef; --login-bg: linear-gradient(135deg, #0ba360 0%, #3cba92 100%); --login-card-bg: rgba(255, 255, 255, 0.95); --login-btn-bg: #20c997; --login-btn-hover: #1aa179; --shadow-sm: 0 0.125rem 0.25rem rgba(32, 201, 151, 0.075); --shadow: 0 0.5rem 1rem rgba(32, 201, 151, 0.15); --shadow-lg: 0 1rem 3rem rgba(32, 201, 151, 0.175); } /* ============================================================================ تطبيق المتغيرات على عناصر HTML ============================================================================ */ /* الألوان الأساسية */ .bg-primary { background-color: var(--primary-color) !important; } .text-primary { color: var(--primary-color) !important; } .border-primary { border-color: var(--primary-color) !important; } /* الأزرار */ .btn-primary { background-color: var(--btn-primary) !important; border-color: var(--btn-primary) !important; } .btn-primary:hover { background-color: var(--btn-primary-hover) !important; border-color: var(--btn-primary-hover) !important; } /* الروابط */ a { color: var(--link-color); } a:hover { color: var(--link-hover); } /* الـ Navbar */ .main-header .navbar { background-color: var(--navbar-bg) !important; } .navbar-nav>li>a { color: var(--navbar-text) !important; } /* الـ Sidebar */ .main-sidebar, .sidebar { background-color: var(--sidebar-bg) !important; } .sidebar-menu>li>a { color: var(--sidebar-text) !important; } .sidebar-menu>li.active>a, .sidebar-menu>li:hover>a { background-color: var(--sidebar-active) !important; } /* الجداول */ .table thead th { background-color: var(--table-header-bg) !important; color: var(--table-header-text) !important; } .table tbody tr:hover { background-color: var(--table-row-hover) !important; } /* صفحة تسجيل الدخول */ .login-page { background: var(--login-bg) !important; } .login-card { background: var(--login-card-bg) !important; box-shadow: var(--shadow-lg) !important; } .btn-login { background: var(--login-btn-bg) !important; } .btn-login:hover { background: var(--login-btn-hover) !important; } /* الـ Forms */ .form-control:focus, .form-control-modern:focus { border-color: var(--input-focus) !important; box-shadow: 0 0 0 0.2rem rgba(var(--primary-color), 0.25) !important; } /* Box و Cards */ .box { border-top-color: var(--primary-color) !important; } .box-primary { border-top-color: var(--primary-color) !important; } .box-header { background-color: var(--card-header-bg); } /* الشارات Badges */ .badge-primary { background-color: var(--primary-color) !important; } /* الأزرار الأخرى */ .btn-success { background-color: var(--success-color) !important; border-color: var(--success-color) !important; } .btn-danger { background-color: var(--error-color) !important; border-color: var(--error-color) !important; } .btn-warning { background-color: var(--warning-color) !important; border-color: var(--warning-color) !important; } .btn-info { background-color: var(--info-color) !important; border-color: var(--info-color) !important; } /* AdminLTE Skins */ .skin-blue .main-header .navbar, .skin-red .main-header .navbar, .skin-green .main-header .navbar, .skin-yellow .main-header .navbar, .skin-purple .main-header .navbar { background-color: var(--navbar-bg) !important; } .skin-blue .main-header .logo, .skin-red .main-header .logo, .skin-green .main-header .logo, .skin-yellow .main-header .logo, .skin-purple .main-header .logo { background-color: var(--primary-dark) !important; } /* Small Box Info Boxes */ .small-box.bg-aqua, .small-box.bg-red, .small-box.bg-green, .small-box.bg-yellow { background-color: var(--primary-color) !important; } .info-box-icon { background-color: var(--primary-color) !important; } /* Pagination */ .pagination>.active>a, .pagination>.active>span { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; } /* Progress Bars */ .progress-bar { background-color: var(--primary-color) !important; } /* Alerts */ .alert-info { background-color: var(--info-light) !important; border-color: var(--info-color) !important; color: var(--info-dark) !important; } /* Panel Headers */ .panel-primary>.panel-heading { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; } /* Modal Headers */ .modal-header { background-color: var(--primary-color) !important; color: var(--text-light) !important; } /* Dropdowns in Navbar */ .navbar-nav>.user-menu>.dropdown-menu>.user-header { background-color: var(--primary-color) !important; } /* Active Links */ .treeview-menu>li.active>a, .treeview-menu>li>a:hover { color: var(--primary-color) !important; } /* Icons with Primary Color */ .fa-primary { color: var(--primary-color) !important; } /* Custom Classes for Themed Elements */ .themed-bg { background-color: var(--primary-color) !important; } .themed-text { color: var(--primary-color) !important; } .themed-border { border-color: var(--primary-color) !important; } /* Hover Effects */ .themed-hover:hover { background-color: var(--primary-hover) !important; } /* Active States */ .themed-active { background-color: var(--primary-active) !important; } /* ============================================================================ ألوان الكروت المباشرة لكل ثيم - Direct Card Colors for Each Theme ============================================================================ */ /* الثيم الأحمر */ body.theme-red .small-box.bg-customers { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important; } body.theme-red .small-box.bg-suppliers { background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important; } body.theme-red .small-box.bg-orders { background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important; } body.theme-red .small-box.bg-workers { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important; } body.theme-red .small-box.bg-checks { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important; } body.theme-red .small-box.bg-invoices { background: linear-gradient(135deg, #b02a37 0%, #dc3545 100%) !important; } body.theme-red .small-box.bg-movements { background: linear-gradient(135deg, #1e7e34 0%, #28a745 100%) !important; } /* الثيم الأزرق */ body.theme-blue .small-box.bg-customers { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important; } body.theme-blue .small-box.bg-suppliers { background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important; } body.theme-blue .small-box.bg-orders { background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important; } body.theme-blue .small-box.bg-workers { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important; } body.theme-blue .small-box.bg-checks { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important; } body.theme-blue .small-box.bg-invoices { background: linear-gradient(135deg, #0056b3 0%, #007bff 100%) !important; } body.theme-blue .small-box.bg-movements { background: linear-gradient(135deg, #1e7e34 0%, #28a745 100%) !important; } /* الثيم الأخضر */ body.theme-green .small-box.bg-customers { background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important; } body.theme-green .small-box.bg-suppliers { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important; } body.theme-green .small-box.bg-orders { background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important; } body.theme-green .small-box.bg-workers { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important; } body.theme-green .small-box.bg-checks { background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important; } body.theme-green .small-box.bg-invoices { background: linear-gradient(135deg, #1e7e34 0%, #28a745 100%) !important; } body.theme-green .small-box.bg-movements { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important; } /* الثيم الأصفر */ body.theme-yellow .small-box.bg-customers { background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important; } body.theme-yellow .small-box.bg-suppliers { background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important; } body.theme-yellow .small-box.bg-orders { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important; } body.theme-yellow .small-box.bg-workers { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important; } body.theme-yellow .small-box.bg-checks { background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important; } body.theme-yellow .small-box.bg-invoices { background: linear-gradient(135deg, #e0a800 0%, #ffc107 100%) !important; } body.theme-yellow .small-box.bg-movements { background: linear-gradient(135deg, #1e7e34 0%, #28a745 100%) !important; } /* الثيم البنفسجي */ body.theme-purple .small-box.bg-customers { background: linear-gradient(135deg, #6f42c1 0%, #5a359a 100%) !important; } body.theme-purple .small-box.bg-suppliers { background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important; } body.theme-purple .small-box.bg-orders { background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important; } body.theme-purple .small-box.bg-workers { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important; } body.theme-purple .small-box.bg-checks { background: linear-gradient(135deg, #6f42c1 0%, #5a359a 100%) !important; } body.theme-purple .small-box.bg-invoices { background: linear-gradient(135deg, #5a359a 0%, #6f42c1 100%) !important; } body.theme-purple .small-box.bg-movements { background: linear-gradient(135deg, #1e7e34 0%, #28a745 100%) !important; } /* الثيم البرتقالي */ body.theme-orange .small-box.bg-customers { background: linear-gradient(135deg, #fd7e14 0%, #e8590c 100%) !important; } body.theme-orange .small-box.bg-suppliers { background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important; } body.theme-orange .small-box.bg-orders { background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important; } body.theme-orange .small-box.bg-workers { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important; } body.theme-orange .small-box.bg-checks { background: linear-gradient(135deg, #fd7e14 0%, #e8590c 100%) !important; } body.theme-orange .small-box.bg-invoices { background: linear-gradient(135deg, #e8590c 0%, #fd7e14 100%) !important; } body.theme-orange .small-box.bg-movements { background: linear-gradient(135deg, #1e7e34 0%, #28a745 100%) !important; } /* الثيم الوردي */ body.theme-pink .small-box.bg-customers { background: linear-gradient(135deg, #e83e8c 0%, #d91a72 100%) !important; } body.theme-pink .small-box.bg-suppliers { background: linear-gradient(135deg, #f093fb 0%, #e83e8c 100%) !important; } body.theme-pink .small-box.bg-orders { background: linear-gradient(135deg, #f5576c 0%, #e83e8c 100%) !important; } body.theme-pink .small-box.bg-workers { background: linear-gradient(135deg, #c2185b 0%, #ad1457 100%) !important; } body.theme-pink .small-box.bg-checks { background: linear-gradient(135deg, #e91e63 0%, #d81b60 100%) !important; } body.theme-pink .small-box.bg-invoices { background: linear-gradient(135deg, #f06292 0%, #ec407a 100%) !important; } body.theme-pink .small-box.bg-movements { background: linear-gradient(135deg, #e91e63 0%, #d81b60 100%) !important; } /* الثيم التركواز */ body.theme-teal .small-box.bg-customers { background: linear-gradient(135deg, #20c997 0%, #1aa179 100%) !important; } body.theme-teal .small-box.bg-suppliers { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important; } body.theme-teal .small-box.bg-orders { background: linear-gradient(135deg, #28a745 0%, #218838 100%) !important; } body.theme-teal .small-box.bg-workers { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important; } body.theme-teal .small-box.bg-checks { background: linear-gradient(135deg, #20c997 0%, #1aa179 100%) !important; } body.theme-teal .small-box.bg-invoices { background: linear-gradient(135deg, #0ba360 0%, #20c997 100%) !important; } body.theme-teal .small-box.bg-movements { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important; } /* ============================================================================ جداول قابلة للسحب الأفقي - Responsive Table Horizontal Scroll ============================================================================ */ /* حاوية الجدول القابل للسحب - الطريقة الصحيحة */ .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; display: block; width: 100%; } /* الجداول التي تحمل class table-responsive مباشرة - إصلاح للبنية الخاطئة */ table.table-responsive { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; } /* محتوى الجدول */ table.table-responsive tbody, table.table-responsive thead, table.table-responsive tfoot { display: table; width: 100%; } table.table-responsive tr { display: table-row; } table.table-responsive th, table.table-responsive td { display: table-cell; } /* تحسين مظهر شريط السحب */ .table-responsive::-webkit-scrollbar, table.table-responsive::-webkit-scrollbar { height: 10px; background-color: #f5f5f5; } .table-responsive::-webkit-scrollbar-track, table.table-responsive::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 5px; } .table-responsive::-webkit-scrollbar-thumb, table.table-responsive::-webkit-scrollbar-thumb { background: #888; border-radius: 5px; transition: background 0.3s; } .table-responsive::-webkit-scrollbar-thumb:hover, table.table-responsive::-webkit-scrollbar-thumb:hover { background: #555; } /* تأكد من أن الجدول لا ينكسر في الشاشات الصغيرة */ .table-responsive table, table.table-responsive { margin-bottom: 0; white-space: nowrap; } /* تحسين عرض الجداول على الشاشات الصغيرة */ @media (max-width: 768px) { .table-responsive, table.table-responsive { border: 1px solid #dee2e6; border-radius: 0.25rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: relative; } .table-responsive table, table.table-responsive tbody { font-size: 0.875rem; } .table-responsive table th, .table-responsive table td, table.table-responsive th, table.table-responsive td { padding: 0.5rem; min-width: 150px; white-space: nowrap; } /* تحسينات للأجهزة المحمولة - Mobile Optimizations ============================================================================ */ /* ============================================================================ } /* إضافة مؤشر سحب للجداول */ .table-responsive, table.table-responsive { cursor: grab; user-select: none; } .table-responsive:active, table.table-responsive:active { cursor: grabbing; } } /* تحسين للشاشات المتوسطة */ @media (max-width: 992px) and (min-width: 769px) { .table-responsive table th, .table-responsive table td, table.table-responsive th, table.table-responsive td { padding: 0.75rem; min-width: 120px; } } /* رسالة توضيحية للمستخدم - فقط على الشاشات الصغيرة */ @media (max-width: 768px) { .table-responsive::before, table.table-responsive::before { content: "⬅️ اسحب يميناً أو يساراً لعرض جميع البيانات ➡️"; display: block; text-align: center; padding: 10px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; font-size: 0.9rem; font-weight: 600; border-radius: 0.25rem 0.25rem 0 0; margin-bottom: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } } @media (min-width: 769px) { .table-responsive::before, table.table-responsive::before { display: none; } } /* ============================================================================ تحسينات للأجهزة المحمولة - Mobile Optimizations ============================================================================ */ /* ============================================================================ تحسينات للأجهزة المحمولة - Mobile Optimizations ============================================================================ */