/* ==================== المتغيرات - CSS Variables ==================== */
:root {
    /* الخلفية والنصوص */
    --bg-primary: #FFFFFF;
    --text-color: #1a1a1a;
    --link-color: #000000;
    --border-color: #E5E7EB;

    /* الهيدر والفوتر */
    --header-footer-bg: #000000;
    --header-footer-text: #FFFFFF;

    /* الأزرار */
    --btn-primary-bg: #000000;
    --btn-primary-text: #FFFFFF;
    --btn-secondary-bg: #6B7280;
    --btn-secondary-text: #FFFFFF;
}

/* ==================== الخلفية الأساسية ==================== */
body,
html,
main {
    background-color: var(--bg-primary) !important;
}

/* ==================== النصوص ==================== */
body,
body *:not(button):not(.btn):not(a.btn):not(input[type="submit"]):not(header *):not(footer *):not(.text-white):not(.text-white *):not(.text-green-600):not(.text-green-600 *):not(.text-red-500):not(.text-red-600):not(.text-yellow-400):not(.text-yellow-400 *):not(.text-gray-700):not(.text-gray-600):not(.text-gray-500) {
    color: var(--text-color) !important;
}

/* استثناءات للألوان الخاصة - علامات التميز والموثوق */
.text-green-600,
.text-green-600 * {
    color: #16a34a !important;
}

.text-red-500,
.text-red-600 {
    color: #ef4444 !important;
}

/* النجوم الذهبية */
.text-yellow-400,
.text-yellow-400 * {
    color: #FBBF24 !important;
}

/* SVG النجوم الذهبية */
svg.text-yellow-400 {
    fill: #FBBF24 !important;
}

/* الروابط */
a:not(.btn):not(button):not([class*="btn-"]):not(header a):not(footer a):not(.text-white) {
    color: var(--link-color) !important;
}

a:not(.btn):not(button):hover {
    opacity: 0.8;
}

/* استثناءات للنصوص البيضاء */
.text-white,
.text-white *,
.text-white a {
    color: #FFFFFF !important;
}

/* الحدود */
.border,
.border-gray-200,
.border-gray-300 {
    border-color: var(--border-color) !important;
}

/* استثناء للإطار الذهبي للسلع المتميزة */
.border-yellow-400,
.border-yellow-500 {
    border-color: #FBBF24 !important;
}

.hover\:border-yellow-400:hover,
.hover\:border-yellow-500:hover {
    border-color: #F59E0B !important;
}

/* استثناء للإطار الأخضر للمستخدمين الموثوقين */
.border-green-600 {
    border-color: #16a34a !important;
}

.border-green-500 {
    border-color: #22c55e !important;
}

input,
textarea,
select {
    border-color: var(--border-color) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--text-color) !important;
}

/* تنسيق select */
select {
    background-color: white !important;
    color: var(--text-color) !important;
}

select option {
    background-color: white !important;
    color: var(--text-color) !important;
}

/* ==================== الهيدر والفوتر ==================== */
header,
footer {
    background-color: var(--header-footer-bg) !important;
}

header,
header *,
header a,
header a *,
header span,
header nav,
header nav a,
footer,
footer *,
footer a,
footer a *,
footer span {
    color: var(--header-footer-text) !important;
}

/* استثناء: القوائم المنسدلة داخل الهيدر - نصوص سوداء */
header .bg-white,
header .bg-white *,
header .bg-white a,
header .bg-white span,
header .bg-white svg {
    color: #1a1a1a !important;
}

header .bg-white a:hover {
    color: #1a1a1a !important;
}

/* الفئات والأزرار ذات الخلفية السوداء */
button.bg-black,
a.bg-black,
.bg-black {
    background-color: #000000 !important;
}

/* جميع النصوص داخل العناصر السوداء يجب أن تكون بيضاء */
button.bg-black,
button.bg-black *,
button.bg-black span,
button.bg-black svg,
a.bg-black,
a.bg-black *,
a.bg-black span,
.bg-black,
.bg-black *,
.bg-black span,
.bg-black a {
    color: #FFFFFF !important;
}

/* الأزرار السوداء مع أيقونات */
.bg-black svg,
button.bg-black svg,
a.bg-black svg {
    color: #FFFFFF !important;
    stroke: currentColor;
}

/* ==================== الأزرار الأساسية ==================== */
button:not(.btn-secondary):not(.bg-transparent):not(.category-btn):not([class*="bg-blue"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-gray"]):not([class*="bg-white"]),
.btn-primary,
button[type="submit"]:not(.btn-secondary):not(.bg-transparent):not([class*="bg-white"]),
input[type="submit"]:not(.btn-secondary):not([class*="bg-white"]) {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border: none !important;
}

/* ملاحظة: تم إزالة الألوان الصفراء - الهوية الجديدة تستخدم أسود وأبيض فقط */

/* نص الأزرار الأساسية (يجب أن يكون أبيض دائماً) */
button:not(.btn-secondary):not(.bg-transparent):not(.category-btn):not([class*="bg-blue"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-gray"]):not([class*="bg-yellow"]):not([class*="bg-white"]) *,
.btn-primary *,
button[type="submit"]:not(.btn-secondary):not(.bg-transparent):not([class*="bg-yellow"]):not([class*="bg-white"]) *,
input[type="submit"]:not(.btn-secondary):not([class*="bg-white"]) * {
    color: var(--btn-primary-text) !important;
}

button:not(.btn-secondary):not(.bg-transparent):not(.category-btn):not([class*="bg-blue"]):not([class*="bg-green"]):not([class*="bg-red"]):not([class*="bg-gray"]):not([class*="bg-yellow"]):not([class*="bg-white"]):hover,
.btn-primary:hover,
button[type="submit"]:not(.btn-secondary):not(.bg-transparent):not([class*="bg-yellow"]):not([class*="bg-white"]):hover {
    background-color: var(--btn-primary-bg) !important;
    opacity: 0.9;
}

/* الأزرار الشفافة - لا تطبق عليها ألوان */
button.bg-transparent {
    background-color: transparent !important;
    border: none !important;
}

/* أزرار الفئات - خلفية بيضاء بحدود فقط */
button.category-btn {
    background-color: white !important;
}

button.category-btn.border-black {
    border-color: #000000 !important;
    font-weight: bold !important;
}

button.category-btn.border-black,
button.category-btn.border-black * {
    color: #000000 !important;
}

button.category-btn:not(.border-black) {
    border-color: #D1D5DB !important;
}

button.category-btn:not(.border-black),
button.category-btn:not(.border-black) * {
    color: #6B7280 !important;
}

button.category-btn:not(.border-black):hover {
    border-color: #9CA3AF !important;
}

/* ==================== الأزرار الثانوية ==================== */
.btn-secondary,
button.btn-secondary,
a.btn-secondary,
.bg-gray-500,
.bg-gray-600 {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    border: none !important;
}

/* نص الأزرار الثانوية */
.btn-secondary *,
button.btn-secondary *,
a.btn-secondary *,
.bg-gray-500 *,
.bg-gray-600 * {
    color: var(--btn-secondary-text) !important;
}

.btn-secondary:hover,
button.btn-secondary:hover,
a.btn-secondary:hover {
    background-color: var(--btn-secondary-bg) !important;
    opacity: 0.9;
}

/* ==================== البطاقات ==================== */
.bg-white,
.card,
.item-card {
    background-color: var(--bg-primary) !important;
}

/* ==================== الأزرار الملونة ==================== */
/* الأزرار الخضراء */
button.bg-green-500,
button.bg-green-600,
a.bg-green-500,
a.bg-green-600,
.bg-green-500,
.bg-green-600 {
    background-color: #059669 !important;
}

button.bg-green-500 *,
button.bg-green-600 *,
a.bg-green-500 *,
a.bg-green-600 *,
.bg-green-500 *,
.bg-green-600 * {
    color: #FFFFFF !important;
}

/* الأزرار الحمراء */
button.bg-red-500,
button.bg-red-600,
a.bg-red-500,
a.bg-red-600,
.bg-red-500,
.bg-red-600 {
    background-color: #DC2626 !important;
}

button.bg-red-500 *,
button.bg-red-600 *,
a.bg-red-500 *,
a.bg-red-600 *,
.bg-red-500 *,
.bg-red-600 * {
    color: #FFFFFF !important;
}

/* الأزرار الزرقاء */
button.bg-blue-500,
button.bg-blue-600,
a.bg-blue-500,
a.bg-blue-600,
.bg-blue-500,
.bg-blue-600 {
    background-color: #2563EB !important;
}

button.bg-blue-500 *,
button.bg-blue-600 *,
a.bg-blue-500 *,
a.bg-blue-600 *,
.bg-blue-500 *,
.bg-blue-600 * {
    color: #FFFFFF !important;
}

/* الأزرار البرتقالية */
button.bg-orange-500,
button.bg-orange-600,
a.bg-orange-500,
a.bg-orange-600,
.bg-orange-500,
.bg-orange-600 {
    background-color: #D97706 !important;
}

button.bg-orange-500 *,
button.bg-orange-600 *,
a.bg-orange-500 *,
a.bg-orange-600 *,
.bg-orange-500 *,
.bg-orange-600 * {
    color: #FFFFFF !important;
}

/* ==================== تجاوز Tailwind ==================== */
/* تجاوز الخلفيات */
.bg-gray-50,
.bg-gray-100 {
    background-color: var(--bg-primary) !important;
}

.bg-gray-800,
.bg-gray-900 {
    background-color: var(--header-footer-bg) !important;
}

/* تجاوز النصوص */
.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-gray-600 {
    color: var(--text-color) !important;
}

.text-white {
    color: var(--header-footer-text) !important;
}

/* تجاوز الحدود */
.border-gray-200,
.border-gray-300,
.border-gray-400 {
    border-color: var(--border-color) !important;
}

/* ==================== النهاية ==================== */