/**
 * EMG Store Platform — Official System Themes CSS (المظهر الغامق 🌙 / المظهر الفاتح ☀️)
 * مسار الملف: assets/store/css/store_system_themes.css
 * =========================================================================
 * معايير المنظومة الرسمية المعتمدة لكافة واجهات ومتاجر النظام
 */

/* =========================================================================
   ☀️ 1. المظهر الفاتح (Light Modern Standard - Soft Tinted Rows & High-Contrast Text)
   ========================================================================= */

/* 1.1 خلفية الصفحة العامة بيضاء ناصعة */
html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] main,
html[data-theme="light"] .wrapper,
html[data-theme="light"] #content,
html[data-theme="light"] .container-fluid,
html[data-theme="light"] .salla-infinite-marquee-section,
html[data-theme="light"] .emg-categories-marquee-section,
html[data-theme="light"] .emg-guarantee-section,
html[data-theme="light"] .emg-trust-strip,
html[data-theme="light"] .emg-infinite-products-showcase,
html[data-theme="light"] .store-main-content,
html[data-theme="light"] .site-content {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #000000 !important;
}

/* 1.2 قاعدة الكروت: معبئة بالبيج الفاتح ومحددة باللون الأسود */
html[data-theme="light"] .card,
html[data-theme="light"] .pos-crm-card,
html[data-theme="light"] .emg-card,
html[data-theme="light"] .dash-card,
html[data-theme="light"] .emg-royal-kpi-card,
html[data-theme="light"] .emg-light-kpi-card,
html[data-theme="light"] .salla-marquee-card,
html[data-theme="light"] .product-card-emg,
html[data-theme="light"] .product-card,
html[data-theme="light"] .emg-marquee-card,
html[data-theme="light"] .index-deal-card,
html[data-theme="light"] .category-deal-card,
html[data-theme="light"] .emg-product-box,
html[data-theme="light"] .cat-card-box,
html[data-theme="light"] .mobile-cat-item-card > div,
html[data-theme="light"] .cat-row-icon,
html[data-theme="light"] .emg-trust-item,
html[data-theme="light"] .guarantee-box,
html[data-theme="light"] .emg-service-card,
html[data-theme="light"] .feature-box,
html[data-theme="light"] .emg-light-container {
    background-color: #fbf7ee !important;
    background: #fbf7ee !important;
    border: 2px solid #000000 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    color: #000000 !important;
}

/* حاوية صور المنتجات في المظهر الفاتح: بيج متناسق مع برواز سفلي أسود صريح */
html[data-theme="light"] .salla-card-img-wrap,
html[data-theme="light"] .product-img-holder {
    background-color: #fbf7ee !important;
    background: #fbf7ee !important;
    border-bottom: 2px solid #000000 !important;
}

/* 1.3 شرائح ومربعات الاستخدام */
html[data-theme="light"] .salla-usecases-section,
html[data-theme="light"] .madar-usecases-section {
    background: #fbf7ee !important;
    border-top: 2px solid #000000 !important;
    border-bottom: 2px solid #000000 !important;
    color: #000000 !important;
}

html[data-theme="light"] .usecase-mini-square {
    background: #fbf7ee !important;
    border: 2px solid #000000 !important;
    color: #000000 !important;
}

html[data-theme="light"] .usecase-mini-square:hover,
html[data-theme="light"] .usecase-mini-square.active {
    background: #ede3ce !important;
    border-color: #000000 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] .usecase-mini-icon {
    background: #ede3ce !important;
    border: 1.5px solid #000000 !important;
    color: #b45309 !important;
}

html[data-theme="light"] .usecase-mini-title {
    color: #000000 !important;
    font-weight: 900 !important;
}

html[data-theme="light"] .usecase-header-title {
    color: #1e3a8a !important;
    font-weight: 900 !important;
}

html[data-theme="light"] .usecase-header-tag {
    background: #ede3ce !important;
    border: 1.5px solid #000000 !important;
    color: #b45309 !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .usecase-header-sub {
    color: #b45309 !important;
    font-weight: 700 !important;
}

/* 1.4 القائمة المنسدلة للأقسام (Submenus): لون بني غامق فخم كما طلب المستخدم */
html[data-theme="light"] .cat-dropdown-menu,
html[data-theme="light"] #catDropdownMenu {
    background: #2a1810 !important;
    background-color: #2a1810 !important;
    border: 2px solid #4a2d1d !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="light"] .cat-dropdown-header-bar {
    border-bottom: 1px solid #4a2d1d !important;
    color: #fde047 !important;
}

html[data-theme="light"] .cat-dropdown-header-bar a {
    color: #fde047 !important;
}

html[data-theme="light"] .cat-main-title-link {
    color: #ffffff !important;
}

html[data-theme="light"] .cat-main-title-link:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="light"] .cat-main-name {
    color: #ffffff !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .cat-sub-link {
    color: #fde047 !important;
}

html[data-theme="light"] .cat-sub-link:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* 1.5 تدرج ألوان النصوص الصارم في المظهر الفاتح بالألوان الأربعة المعتمدة حصرياً:
   1. الأسود (#000000): للنصوص الأساسية، البيانات، الأرقام، وتفاصيل السجلات
   2. الأزرق الغامق (#1e3a8a): للعناوين الرئيسية، الترويسات (h1-h6)، ورؤوس الجداول
   3. الأصفر الغامق (#b45309): للملاحظات، التنبيهات، الأيقونات البارزة، والوسوم التحذيرية
   4. الأخضر الغامق (#065f46): للمبالغ المالية، الأسعار، الحالات النشطة، والاعتمادات */

/* 2. الأزرق الغامق (#1e3a8a): العناوين والترويسات */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] .cat-row-title,
html[data-theme="light"] .cat-row-more-btn,
html[data-theme="light"] .section-title,
html[data-theme="light"] .emg-royal-kpi-card h6,
html[data-theme="light"] .emg-light-kpi-card h6 {
    color: #1e3a8a !important;
    font-weight: 900 !important;
}

/* 3. الأصفر الغامق (#b45309): أسماء المنتجات في كروت العرض والواجهة */
html[data-theme="light"] .product-title,
html[data-theme="light"] .product-title a,
html[data-theme="light"] .product-card-title,
html[data-theme="light"] .product-card-title a,
html[data-theme="light"] .salla-card-title,
html[data-theme="light"] .salla-card-title a,
html[data-theme="light"] .salla-prod-slide-item .product-title,
html[data-theme="light"] .salla-prod-slide-item .product-title-text,
html[data-theme="light"] .cmg-prod-title {
    color: #b45309 !important;
    -webkit-text-fill-color: #b45309 !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .product-card-emg:hover .product-title a,
html[data-theme="light"] .product-card-emg:hover .product-card-title a,
html[data-theme="light"] .product-card:hover .product-title a,
html[data-theme="light"] .product-card:hover .product-card-title a,
html[data-theme="light"] .cmg-prod-title:hover {
    color: #d97706 !important;
    -webkit-text-fill-color: #d97706 !important;
}

/* 1. الأسود (#000000): نصوص المنتجات والشرح والبيانات والوسوم العادية */
html[data-theme="light"] p,
html[data-theme="light"] .salla-card-body p,
html[data-theme="light"] .salla-card-body span:not(.badge):not(.salla-price-amount):not(.salla-currency-symbol):not(.stock-in):not(.stock-out),
html[data-theme="light"] .salla-vat-label,
html[data-theme="light"] .product-desc,
html[data-theme="light"] .cat-row-count,
html[data-theme="light"] .mobile-cat-item-card span,
html[data-theme="light"] .emg-product-card-desc,
html[data-theme="light"] label,
html[data-theme="light"] .table td,
html[data-theme="light"] .emg-royal-kpi-card h3,
html[data-theme="light"] .emg-light-kpi-card h3 {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 700 !important;
}

/* 4. الأخضر الغامق (#065f46): الأسعار والمبالغ */
html[data-theme="light"] .salla-price-amount,
html[data-theme="light"] .salla-currency-symbol,
html[data-theme="light"] .product-price,
html[data-theme="light"] .emg-price-val,
html[data-theme="light"] .price-current,
html[data-theme="light"] .price,
html[data-theme="light"] .custody-val {
    color: #065f46 !important;
    font-weight: 900 !important;
}

/* 3. الأصفر الغامق (#b45309): التنبيهات والأيقونات والملاحظات */
html[data-theme="light"] .salla-cat-tag,
html[data-theme="light"] .badge-warning,
html[data-theme="light"] .cat-row-header i,
html[data-theme="light"] .product-badge-note,
html[data-theme="light"] .salla-card-old-price {
    background: #ede3ce !important;
    border: 1.5px solid #000000 !important;
    color: #b45309 !important;
    font-weight: 800 !important;
}

html[data-theme="light"] .salla-card-old-price {
    background: transparent !important;
    border: none !important;
    text-decoration: line-through;
    text-decoration-color: #ef4444;
}

/* حقول الإدخال والاختيارات في المظهر الفاتح: بيج فاتح ومحددة بالأسود */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select {
    background-color: #fbf7ee !important;
    border: 1.5px solid #000000 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* 1.6 تعبئة سطور الصفوف بيج فاتح ولون بيج غامق سطر وسطر في كل الصفحات */
html[data-theme="light"] .table thead th,
html[data-theme="light"] thead th {
    background-color: #e5d7be !important;
    color: #1e3a8a !important;
    border-bottom: 2px solid #000000 !important;
    font-weight: 900 !important;
}

html[data-theme="light"] .table tbody tr:nth-child(odd) td,
html[data-theme="light"] tbody tr:nth-child(odd) td,
html[data-theme="light"] .alternating-row:nth-child(odd) {
    background-color: #fbf7ee !important;
    color: #000000 !important;
    border-bottom: 1px solid #d4c5a9 !important;
}

html[data-theme="light"] .table tbody tr:nth-child(even) td,
html[data-theme="light"] tbody tr:nth-child(even) td,
html[data-theme="light"] .alternating-row:nth-child(even) {
    background-color: #ede3ce !important;
    color: #000000 !important;
    border-bottom: 1px solid #d4c5a9 !important;
}

html[data-theme="light"] .table tbody tr:hover td,
html[data-theme="light"] tbody tr:hover td,
html[data-theme="light"] .alternating-row:hover {
    background-color: #dfd0b5 !important;
    color: #000000 !important;
}

/* زر الشراء الدائري في المظهر الفاتح */
html[data-theme="light"] .salla-round-buy-btn {
    background: #1e3a8a !important;
    border: 2px solid #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="light"] .salla-round-buy-btn:hover {
    background: #065f46 !important;
    transform: scale(1.1) !important;
}

/* حظر اللون الرمادي وحظر الأبيض في المظهر الفاتح */
html[data-theme="light"] .text-muted,
html[data-theme="light"] .text-secondary,
html[data-theme="light"] .form-text,
html[data-theme="light"] .text-black-50 {
    color: #000000 !important;
    opacity: 1 !important;
}


/* =========================================================================
   🌙 2. المظهر الغامق (Royal Navy Golden Glow on Crisp Light Canvas)
   ========================================================================= */

/* 2.1 خلفية الصفحة نفسها بيضاء ناصعة / لؤلؤية كما في البداية */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] #content,
html[data-theme="dark"] .container-fluid,
html[data-theme="dark"] .salla-infinite-marquee-section,
html[data-theme="dark"] .emg-categories-marquee-section,
html[data-theme="dark"] .store-main-content {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #0f172a !important;
}

/* 2.2 الكروت بنمط الأزرق الملكي والإضاءة الذهبية الفخمة */
html[data-theme="dark"] .salla-marquee-card,
html[data-theme="dark"] .product-card-emg,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .emg-marquee-card,
html[data-theme="dark"] .index-deal-card,
html[data-theme="dark"] .category-deal-card,
html[data-theme="dark"] .emg-product-box,
html[data-theme="dark"] .card,
html[data-theme="dark"] .emg-card,
html[data-theme="dark"] .pos-crm-card,
html[data-theme="dark"] .dash-card,
html[data-theme="dark"] .emg-royal-kpi-card {
    background: linear-gradient(135deg, #0d2847 0%, #163d69 100%) !important;
    border: 2px solid #28598f !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), 0 6px 18px rgba(245, 158, 11, 0.18) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .salla-marquee-card:hover,
html[data-theme="dark"] .product-card-emg:hover,
html[data-theme="dark"] .card:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.35), 0 0 25px rgba(245, 158, 11, 0.45) !important;
    transform: translateY(-6px) !important;
}

/* حاوية صورة المنتج في المظهر الغامق - خلفية بيضاء نقية وتغطية كاملة للمربع بالصورة لمنع أي براويز غامقة مشوهة */
html[data-theme="dark"] .salla-card-img-wrap,
html[data-theme="dark"] .product-img-holder {
    background: #ffffff !important;
    border-bottom: 1px solid #1f4773 !important;
    padding: 0 !important;
}

html[data-theme="dark"] .salla-card-img-wrap img,
html[data-theme="dark"] .product-img-holder img,
html[data-theme="dark"] .gallery-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* 2.3 حظر الأسود والرمادي تماماً في كروت المظهر الغامق */
html[data-theme="dark"] .salla-card-body,
html[data-theme="dark"] .card-body {
    color: #ffffff !important;
}

/* أسماء المنتجات باللون الأصفر الذهبي في المظهر الغامق */
html[data-theme="dark"] .product-title,
html[data-theme="dark"] .product-title a,
html[data-theme="dark"] .product-card-title,
html[data-theme="dark"] .product-card-title a,
html[data-theme="dark"] .salla-card-title,
html[data-theme="dark"] .salla-card-title a,
html[data-theme="dark"] .salla-prod-slide-item .product-title,
html[data-theme="dark"] .salla-prod-slide-item .product-title-text,
html[data-theme="dark"] .cmg-prod-title {
    color: #f59e0b !important;
    -webkit-text-fill-color: #f59e0b !important;
    font-weight: 800 !important;
}

html[data-theme="dark"] .product-card-emg:hover .product-title a,
html[data-theme="dark"] .product-card-emg:hover .product-card-title a,
html[data-theme="dark"] .product-card:hover .product-title a,
html[data-theme="dark"] .product-card:hover .product-card-title a,
html[data-theme="dark"] .cmg-prod-title:hover {
    color: #fde047 !important;
    -webkit-text-fill-color: #fde047 !important;
}

html[data-theme="dark"] .salla-price-amount {
    color: #4ade80 !important; /* أخضر زمردي بارز للأسعار */
    font-weight: 900 !important;
}

html[data-theme="dark"] .salla-currency-symbol {
    color: #fde047 !important; /* ذهبي للعملة */
    font-weight: 900 !important;
}

html[data-theme="dark"] .salla-vat-label {
    color: #ffffff !important;
    opacity: 0.9 !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] .salla-card-old-price {
    color: #fde047 !important;
    text-decoration: line-through;
    text-decoration-color: #ef4444;
}

/* شريط الاستخدام في المظهر الغامق */
html[data-theme="dark"] .salla-usecases-section,
html[data-theme="dark"] .madar-usecases-section {
    background: linear-gradient(135deg, #0d2847 0%, #163d69 100%) !important;
    border-top: 2px solid #28598f !important;
    border-bottom: 2px solid #28598f !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .usecase-mini-square {
    background: #08182b !important;
    border: 1.5px solid #1f4773 !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .usecase-mini-square:hover {
    border-color: #f59e0b !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
}

html[data-theme="dark"] .usecase-mini-title {
    color: #ffffff !important;
}

html[data-theme="dark"] .usecase-header-title {
    color: #ffffff !important;
}

/* إلغاء الرمادي واستبداله بالأبيض والذهبي في المظهر الغامق */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .cat-row-count {
    color: #ffffff !important;
    background: #08182b !important;
    border: 1px solid #1f4773 !important;
}

/* تفاعل مرور الماوس على الجداول أزرق غامق ملكي */
html[data-theme="dark"] .table tr:hover td,
html[data-theme="dark"] .table-custom tbody tr:hover td {
    background-color: #163d69 !important;
    color: #ffffff !important;
}