/* =========================
   LIGHT MODE
========================= */
body.light-mode {
    background-color: #f5f5f5 !important;
    color: #1F1F1F !important;
}

body.light-mode header,
body.light-mode .head-top,
body.light-mode .navbar,
body.light-mode .sidepanel,
body.light-mode .services {  /* <-- خلي الخدمات هنا */
    background-color: #ffffff !important;
    color: #1F1F1F !important;
}

 
/* =========================
   DARK MODE
========================= */
body.dark-mode {
    background-color: #313249 !important; /* خلفية داكنة للصفحة */
    color: #ffffff !important;
}

body.dark-mode header,
body.dark-mode .head-top,
body.dark-mode .navbar,
body.dark-mode .sidepanel,
body.dark-mode .services {
    background-color: #1b1d32 !important;
    color: #ffffff !important;
}
/* =========================
   DEFAULT / NORMAL MODE
========================= */
body {
    background-color: #313249; /* اللون الكحلي الافتراضي */
    color: #ffffff;
}

/* العناصر الأساسية */
header,
.sidepanel,
.services,
.inner_page header,
.footer,
.category,
.about {
    background-color: #313249; /* افتراضي كحلي */
    color: #ffffff;
}

/* =========================
   LIGHT MODE
========================= */
body.light-mode {
    background-color: #f5f5f5 !important;
    color: #1F1F1F !important;
 }



body.light-mode header,
body.light-mode .sidepanel,
body.light-mode .services,
body.light-mode .inner_page header,
body.light-mode .category,
body.light-mode .about {
    background-color: #ffffff !important;
    color: #1F1F1F !important;
}

/* أي عناصر نصية محددة */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6,
body.light-mode p,
body.light-mode a {
    color: #1F1F1F !important;
}

/* =========================
   DARK MODE
========================= */
body.dark-mode {
    background-color: #313249 !important; /* خلفية داكنة للصفحة */
    color: #ffffff !important;
}

body.dark-mode header,
 body.dark-mode .services,
body.dark-mode .inner_page header,
body.dark-mode .category,
body.dark-mode .about {
    background-color: #313249 !important; /* الكحلي */
    color: #ffffff !important;
}
body.dark-mode {
    background-color: #313249 !important;
    color: #1F1F1F !important;
 }
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode a {
    color: #ffffff !important;
}
/* =========================
   DEFAULT / NORMAL MODE
========================= */
.openbtn {
    background-color: transparent; /* افتراضي */
    border: none;
    cursor: pointer;
}

/* =========================
   LIGHT MODE
========================= */
body.light-mode .openbtn {
    background-color: #ffffff !important; /* زر أبيض في الوضع النهاري */
    border: none;
}

body.light-mode .openbtn img {
    filter: brightness(0) invert(0) !important; /* أيقونة داكنة */
}

 
body.light-mode .cat-name{
    color: black !important;
}




/* =========================
   Overlay Loader
========================= */
body.light-mode .login-overlay .overlay-backdrop {
    background: rgba(255,255,255,0.55) !important;
}

body.light-mode .login-overlay .overlay-box {
    background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01)) !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
}

body.light-mode .loader-ring {
    box-shadow: 0 8px 18px rgba(0,0,0,0.12), 0 0 28px rgba(0,0,0,0.06) !important;
}

body.light-mode .loader-inner {
    background: radial-gradient(circle at 40% 30%, rgba(0,0,0,0.05), rgba(0,0,0,0.12)) !important;
}




/* =========================
   LIGHT MODE - الصفحة الشخصية
========================= */

/* الكاردات العامة */
body.light-mode .category .card,
body.light-mode .category .w3-card,
body.light-mode .category .bg-pattern {
    background-color: #ffffff !important; /* خلفية بيضاء للكاردات */
    color: #1F1F1F !important; /* نصوص داكنة */
    border: 1px solid #e0e0e0 !important; /* حدود خفيفة */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* العنوان الرئيسي */
body.light-mode .category .titlepage h3 {
    color: #1F1F1F !important;
}

/* الجدول */
body.light-mode table {
    background-color: #ffffff !important;
    color: #1F1F1F !important;
    border: 1px solid #dcdcdc !important;
}

body.light-mode table thead th {
    color: #1F1F1F !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #dcdcdc !important;
}

body.light-mode table tbody td {
    color: #1F1F1F !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #eaeaea !important;
}

/* الفورم داخل الكارد */
body.light-mode .form-control {
    background-color: #f9f9f9 !important;
    color: #1F1F1F !important;
    border: 1px solid #d0d0d8 !important;
}

body.light-mode .form-control:focus {
    background-color: #ffffff !important;
    color: #1F1F1F !important;
    border-color: #7a2bff !important; /* يمكن ترك لون الـ focus أرجواني فاتح */
    box-shadow: 0 0 0 2px rgba(122, 43, 255, 0.15) !important;
}

/* أزرار */
body.light-mode .btn-primary {
    background-color: #7a2bff !important;
    border-color: #7a2bff !important;
    color: #ffffff !important;
}

body.light-mode .btn-primary:hover {
    background-color: #6613e1 !important;
    border-color: #6613e1 !important;
}

/* Alert */
body.light-mode .alert {
    background-color: #e6ffed !important;
    color: #1F1F1F !important;
    border: 1px solid #b3f0c6 !important;
}

/* Select (تغيير العملة) */
body.light-mode select {
    background-color: #f5f5f5 !important;
    color: #1F1F1F !important;
    border: 1px solid #d0d0d8 !important;
}

/* Inputs داخل select/form */
body.light-mode select option {
    background-color: #ffffff !important;
    color: #1F1F1F !important;
}

/* النصوص العامة */
body.light-mode p,
body.light-mode b,
body.light-mode label,
body.light-mode .username {
    color: #1F1F1F !important;
}

/* أي عناصر margin/padding داكنة أو backgrounds داخل الفورم */
body.light-mode .category .row,
body.light-mode .category .col-md-12,
body.light-mode .category .col-sm-6 {
    color: #1F1F1F !important;
}



/* =========================
   LIGHT MODE - سياسة الاسترجاع
========================= */
body.light-mode .category,
body.light-mode .category * {
    background-color: #ffffff !important; /* خلفية بيضاء للنهاري */
    color: #1F1F1F !important;           /* نص داكن */
}

/* عناصر النصوص مثل الفقرات والعناوين */
body.light-mode .category p,
body.light-mode .category span,
body.light-mode .category div,
body.light-mode .category h1,
body.light-mode .category h2,
body.light-mode .category h3,
body.light-mode .category h4,
body.light-mode .category h5,
body.light-mode .category h6 {
    color: #1F1F1F !important;
}

/* أي روابط */
body.light-mode .category a {
    color: #7a2bff !important; /* يمكن تركها أرجوانية لتتناسب مع تصميمك */
    text-decoration: underline;
}










body.light-mode .card-header{
    background-color: white !important;
}








/* =========================
   LIGHT MODE - Currency Dropdown
========================= */
body.light-mode #currency {
    background-color: #ffffff !important; /* خلفية بيضاء */
    color: #1F1F1F !important;           /* نص داكن */
    border: 1px solid #ccc !important;    /* حد فاتح */
}

/* إذا حبيت تغير شكل الخيارات عند فتح الـ select */
body.light-mode #currency option {
    background-color: #ffffff !important; /* خلفية الخيارات */
    color: #1F1F1F !important;           /* نص الخيارات */
}



body.light-mode .username{
    color: white !important; 
}








body.light-mode .clearfix{
    background-color: white !important;

}



/* =========================
   LIGHT MODE - Mobile Menu Button
========================= */
 
/* أيقونة القائمة */
body.light-mode .button-menu-mobile i {
    color: #1F1F1F !important;
}

/* Hover */
body.light-mode .button-menu-mobile:hover {
    background-color: #f2f2f2 !important;
    border-color: #d6d6d6 !important;
}







/* =========================
   LIGHT MODE - DASHBOARD CONTENT
========================= */

/* خلفية الصفحة الداخلية */
body.light-mode .content-page,
body.light-mode .content {
    background-color: #f5f6fa !important;
    color: #1F1F1F !important;
}

/* =========================
   METRIC CARDS
========================= */
body.light-mode .card {
    background-color: #ffffff !important;
    color: #1F1F1F !important;
    border: 1px solid #e6e6e6 !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

body.light-mode .metric .value {
    color: #1F1F1F !important;
    font-weight: 600;
}

body.light-mode .metric .label {
    color: #6b7280 !important; /* رمادي */
}

/* أيقونات الكروت */
body.light-mode .metric .icon {
    background: #f1f3f7 !important;
    color: #1F1F1F !important;
    border-radius: 8px;
    padding: 8px;
}

/* حدود يمين الكروت (الألوان) */
body.light-mode .border-right-blue {
    border-right: 4px solid #3b82f6 !important;
}
body.light-mode .border-right-red {
    border-right: 4px solid #ef4444 !important;
}
body.light-mode .border-right-yellow {
    border-right: 4px solid #f59e0b !important;
}
body.light-mode .border-right-green {
    border-right: 4px solid #10b981 !important;
}

/* =========================
   CARD BOX (الجداول)
========================= */
body.light-mode .card-box {
    background-color: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    color: #1F1F1F !important;
}

/* عناوين الكروت */
body.light-mode .card-box .header-title {
    color: #1F1F1F !important;
}

/* =========================
   TABLES
========================= */
body.light-mode .table {
    color: #1F1F1F !important;
    background-color: #ffffff !important;
}

body.light-mode .table thead th {
    background-color: #f1f3f7 !important;
    color: #374151 !important;
    border-bottom: 1px solid #e5e7eb !important;
}

body.light-mode .table tbody tr {
    background-color: #ffffff !important;
}

body.light-mode .table tbody tr:hover {
    background-color: #f9fafb !important;
}

/* إزالة أي لون أحمر إجباري */
body.light-mode .table tbody {
    background-color: transparent !important;
}

/* dark-table override */
body.light-mode .dark-table {
    background-color: #ffffff !important;
    color: #1F1F1F !important;
}

/* =========================
   THEAD LIGHT FIX
========================= */
body.light-mode .thead-light th {
    background-color: #f1f3f7 !important;
    color: #374151 !important;
}






/* =========================
   LIGHT MODE - SIDEBAR
========================= */

/* خلفية السايدبار */
body.light-mode .left-side-menu {
    background-color: #ffffff !important;
    border-right: 1px solid #e5e7eb;
    color: #1F1F1F !important;
}

/* محتوى السايد */
body.light-mode #sidebar-menu {
    background-color: #ffffff !important;
}

/* عناصر القائمة */
body.light-mode #side-menu li a {
    color: #374151 !important;
    background-color: transparent !important;
    border-radius: 6px;
    margin: 2px 8px;
}

/* أيقونات */
body.light-mode #side-menu li a i,
body.light-mode #side-menu li a svg {
    color: #6b7280 !important;
}

/* hover */
body.light-mode #side-menu li a:hover {
    background-color: #f1f5f9 !important;
    color: #111827 !important;
}

body.light-mode #side-menu li a:hover i,
body.light-mode #side-menu li a:hover svg {
    color: #3b82f6 !important;
}

/* العنصر النشط */
body.light-mode #side-menu li.menuitem-active > a,
body.light-mode #side-menu li a.active {
    background-color: #e8f0fe !important;
    color: #1d4ed8 !important;
    font-weight: 600;
}

body.light-mode #side-menu li.menuitem-active > a i,
body.light-mode #side-menu li a.active i {
    color: #1d4ed8 !important;
}

/* القائمة الفرعية */
body.light-mode .nav-second-level {
    background-color: #f9fafb !important;
    border-radius: 6px;
    margin: 4px 8px;
}

body.light-mode .nav-second-level li a {
    color: #374151 !important;
}

body.light-mode .nav-second-level li a:hover {
    background-color: #eef2ff !important;
    color: #1d4ed8 !important;
}

/* =========================
   USER BOX
========================= */
body.light-mode .user-box {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb;
}

body.light-mode .user-box .dropdown-toggle {
    color: #1F1F1F !important;
}

body.light-mode .user-box p {
    color: #6b7280 !important;
}

/* dropdown المستخدم */
body.light-mode .user-pro-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb;
}

body.light-mode .user-pro-dropdown .dropdown-item {
    color: #374151 !important;
}

body.light-mode .user-pro-dropdown .dropdown-item:hover {
    background-color: #f1f5f9 !important;
    color: #111827 !important;
}



/* select نهاري موحد مع dropdown */
body.light-mode select.custom-select,
body.light-mode select.form-control {
    background-color: #ffffff !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
}

body.light-mode select.custom-select:hover,
body.light-mode select.form-control:hover {
    border-color: #d1d5db !important;
}

body.light-mode select.custom-select:focus,
body.light-mode select.form-control:focus {
    border-color: #9ca3af !important;
    box-shadow: 0 0 0 0.15rem rgba(156,163,175,.25) !important;
}



body.light-mode #stocksTable_length select{
    background-color: #ffffff !important;

}




/* حقل البحث (DataTables) */
body.light-mode input[type="search"].form-control {
    background-color: #ffffff !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
}

/* hover */
body.light-mode input[type="search"].form-control:hover {
    border-color: #d1d5db !important;
}

/* focus */
body.light-mode input[type="search"].form-control:focus {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #9ca3af !important;
    box-shadow: 0 0 0 0.15rem rgba(156,163,175,.25) !important;
}




/* Pagination (DataTables) - الوضع الداكن */
body.dark-mode .dataTables_paginate .page-link {
    color: #000000 !important;
}

/* hover */
body.dark-mode .dataTables_paginate .page-link:hover {
    color: #000000 !important;
    background-color: #2f3349 !important;
    border-color: #3b3f5c !important;
}

/* active */
body.dark-mode .dataTables_paginate .page-item.active .page-link {
    color: #000000 !important;
    background-color: #4b516e !important;
    border-color: #4b516e !important;
}

/* disabled */
body.dark-mode .dataTables_paginate .page-item.disabled .page-link {
    color: #000000 !important;
    opacity: 0.6;
}



/* زر Browse فقط - الوضع النهاري */
body.light-mode .custom-file-input::file-selector-button {
    background-color: #4b5563; /* رمادي غامق أنيق */
    color: #000000 !important;  /* نص أسود */
    border: 1px solid #374151;
    padding: 0.375rem 0.75rem;
    margin-right: 0.5rem;
    border-radius: 0.25rem;
}

body.light-mode .custom-file-input::file-selector-button:hover {
    background-color: #374151;
}

body.light-mode .custom-file-input::file-selector-button:active {
    background-color: #1f2937;
}

/* زر Browse فقط - الوضع الليلي */
body.dark-mode .custom-file-input::file-selector-button {
    background-color: #1f2937; /* أغمق للليلي */
    color: #ffffff !important;  /* نص أبيض */
    border: 1px solid #374151;
    padding: 0.375rem 0.75rem;
    margin-right: 0.5rem;
    border-radius: 0.25rem;
}

body.dark-mode .custom-file-input::file-selector-button:hover {
    background-color: #111827;
}

body.dark-mode .custom-file-input::file-selector-button:active {
    background-color: #0f172a;
}



body.light-mode .navbar-custom{
    background-color: #ffffff !important;
}
body.dark-mode .navbar-custom{
    background-color: #1b1d32 !important;
}