/* ===================================
   Dark Mode - Red & Black Theme
   نظام ألوان الوضع الليلي - أحمر وأسود
   =================================== */

:root {
    /* ألوان الهوية - أحمر وأسود */
    --brand-red: #dc2626;
    --brand-red-hover: #b91c1c;
    --brand-red-light: #ef4444;
    --brand-red-dark: #991b1b;
    --brand-black: #0a0a0a;

    /* الوضع الليلي - الخلفيات (ألوان أفتح بكثير - رمادي فاتح) */
    --dark-bg-primary: #2a2a2a;
    /* رمادي متوسط للخلفية الرئيسية */
    --dark-bg-secondary: #3a3a3a;
    /* رمادي فاتح للبطاقات */
    --dark-bg-tertiary: #454545;
    /* رمادي أفتح للعناصر المرتفعة */
    --dark-bg-hover: #505050;
    /* حالة hover */
    --dark-bg-elevated: #484848;
    /* عناصر مرتفعة */

    /* الوضع الليلي - النصوص */
    --dark-text-primary: #f0f0f0;
    /* أبيض مائل للرمادي */
    --dark-text-secondary: #c0c0c0;
    /* رمادي فاتح جداً */
    --dark-text-muted: #a0a0a0;
    /* رمادي متوسط */
    --dark-text-disabled: #808080;
    /* رمادي */

    /* الوضع الليلي - الحدود */
    --dark-border: #555555;
    /* رمادي فاتح */
    --dark-border-light: #606060;
    /* رمادي أفتح */
    --dark-border-lighter: #707070;
    /* رمادي فاتح جداً */
}

/* تطبيق الألوان على الوضع الليلي */
.dark {
    --tw-bg-opacity: 1;
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

/* الخلفيات الأساسية */
.dark .bg-gray-50 {
    background-color: var(--dark-bg-secondary) !important;
}

.dark .bg-gray-100 {
    background-color: var(--dark-bg-tertiary) !important;
}

.dark .bg-gray-200 {
    background-color: var(--dark-bg-hover) !important;
}

.dark .bg-white {
    background-color: var(--dark-bg-secondary) !important;
}

/* البطاقات والعناصر المرتفعة */
.dark .bg-gray-800,
.dark .dark\:bg-gray-800 {
    background-color: var(--dark-bg-secondary) !important;
}

.dark .bg-gray-900,
.dark .dark\:bg-gray-900 {
    background-color: var(--dark-bg-primary) !important;
}

.dark .bg-gray-700,
.dark .dark\:bg-gray-700 {
    background-color: var(--dark-bg-tertiary) !important;
}

/* النصوص */
.dark .text-gray-900 {
    color: var(--dark-text-primary) !important;
}

.dark .text-gray-800 {
    color: var(--dark-text-primary) !important;
}

.dark .text-gray-700 {
    color: var(--dark-text-secondary) !important;
}

.dark .text-gray-600 {
    color: var(--dark-text-secondary) !important;
}

.dark .text-gray-500 {
    color: var(--dark-text-muted) !important;
}

.dark .text-gray-400 {
    color: var(--dark-text-muted) !important;
}

.dark .text-gray-300 {
    color: var(--dark-text-secondary) !important;
}

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

.dark .border-gray-300 {
    border-color: var(--dark-border-light) !important;
}

.dark .border-gray-600 {
    border-color: var(--dark-border-light) !important;
}

.dark .border-gray-700 {
    border-color: var(--dark-border) !important;
}

/* ألوان الهوية - الأزرار والروابط */
.dark .bg-blue-600,
.dark .bg-blue-500,
.dark .text-blue-600,
.dark .text-blue-500 {
    background-color: var(--brand-red) !important;
    color: white !important;
}

.dark .hover\:bg-blue-700:hover,
.dark .hover\:bg-blue-600:hover {
    background-color: var(--brand-red-hover) !important;
}

.dark .text-blue-600,
.dark .text-blue-500 {
    color: var(--brand-red) !important;
}

.dark .hover\:text-blue-700:hover,
.dark .hover\:text-blue-600:hover {
    color: var(--brand-red-hover) !important;
}

/* Hover States */
.dark .hover\:bg-gray-100:hover {
    background-color: var(--dark-bg-hover) !important;
}

.dark .hover\:bg-gray-200:hover {
    background-color: var(--dark-bg-elevated) !important;
}

.dark .hover\:bg-gray-700:hover {
    background-color: var(--dark-bg-hover) !important;
}

.dark .hover\:bg-gray-800:hover {
    background-color: var(--dark-bg-tertiary) !important;
}

/* Focus States */
.dark .focus\:ring-blue-500:focus {
    --tw-ring-color: var(--brand-red) !important;
}

.dark .focus\:border-blue-500:focus {
    border-color: var(--brand-red) !important;
}

/* البطاقات */
.dark .card,
.dark .laptop-card,
.dark .feature-card {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.dark .card:hover,
.dark .laptop-card:hover,
.dark .feature-card:hover {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-light) !important;
}

/* الظلال */
.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

/* الأزرار الأساسية */
.dark button,
.dark .btn {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border-light);
    color: var(--dark-text-primary);
}

.dark button:hover,
.dark .btn:hover {
    background-color: var(--dark-bg-hover);
}

/* أزرار الهوية (Primary Buttons) */
.dark .btn-primary,
.dark .bg-primary-600 {
    background-color: var(--brand-red) !important;
    color: white !important;
}

.dark .btn-primary:hover,
.dark .bg-primary-600:hover {
    background-color: var(--brand-red-hover) !important;
}

/* الإدخالات والنماذج */
.dark input,
.dark textarea,
.dark select {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-light) !important;
    color: var(--dark-text-primary) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: var(--dark-text-muted) !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: var(--brand-red) !important;
    --tw-ring-color: var(--brand-red) !important;
}

/* القوائم المنسدلة */
.dark .dropdown-menu,
.dark [role="menu"] {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.dark .dropdown-item,
.dark [role="menuitem"] {
    color: var(--dark-text-primary) !important;
}

.dark .dropdown-item:hover,
.dark [role="menuitem"]:hover {
    background-color: var(--dark-bg-hover) !important;
}

/* الشريط الجانبي */
.dark .sidebar {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

/* الجداول */
.dark table {
    background-color: var(--dark-bg-secondary) !important;
}

.dark th {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.dark td {
    border-color: var(--dark-border) !important;
    color: var(--dark-text-secondary) !important;
}

.dark tr:hover {
    background-color: var(--dark-bg-hover) !important;
}

/* الشارات (Badges) */
.dark .badge {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}

.dark .badge-primary {
    background-color: var(--brand-red) !important;
    color: white !important;
}

/* التنبيهات (Alerts) */
.dark .alert {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border-light) !important;
    color: var(--dark-text-primary) !important;
}

/* الأكورديون */
.dark .accordion-item {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.dark .accordion-button {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}

/* التبويبات (Tabs) */
.dark .tab {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-secondary) !important;
}

.dark .tab.active,
.dark .tab:hover {
    background-color: var(--dark-bg-hover) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--brand-red) !important;
}

/* الصور والأيقونات */
.dark img {
    opacity: 0.95;
}

.dark .icon {
    color: var(--dark-text-secondary);
}

/* Scrollbar */
.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark ::-webkit-scrollbar-track {
    background: var(--dark-bg-primary);
}

.dark ::-webkit-scrollbar-thumb {
    background: var(--dark-bg-hover);
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-border-lighter);
}

/* إصلاح البطاقات التي تظهر داكنة في الوضع النهاري */
html:not(.dark) .bg-gray-800,
html:not(.dark) .bg-gray-900,
html:not(.dark) .dark\:bg-gray-800,
html:not(.dark) .dark\:bg-gray-900 {
    background-color: white !important;
}

html:not(.dark) .text-white {
    color: #1f2937 !important;
}

/* التأكد من أن الوضع النهاري هو الافتراضي */
html:not(.dark) {
    background-color: #f9fafb;
    color: #1f2937;
}

/* Spec card dark mode styles */
.dark .spec-card-dark {
    background-color: var(--dark-bg-elevated) !important;
    color: rgba(255, 255, 255, 1) !important;
}

.dark .spec-text-dark {
    color: rgba(255, 255, 255, 1) !important;
}

/* Gallery thumbnail image styles */
.gallery-thumb-img {
    width: 338px;
    height: 97px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 640px) {
    .gallery-thumb-img {
        width: 100%;
        height: 80px;
    }
}