/* نمط الوضع الليلي */
html.dark-mode {
    background-color: #000000 !important;
}

:root.dark-mode {
    /* ألوان أساسية محسنة للوضع الليلي */
    --primary-color: #60a5fa;
    --secondary-color: #9ca3af;
    --accent-color: #3b82f6;
    --success-color: #34d399;
    --warning-color: #fbbf24;
    --danger-color: #f87171;
    
    /* تحسين ألوان الخلفية والنصوص لزيادة التباين - تم تغيير الألوان لتكون أكثر قتامة */
    --body-bg: #000000;      /* خلفية سوداء */
    --text-color: #ffffff;   /* نص أكثر بياضاً */
    --text-muted: #b0b8c1;   /* نص ثانوي أفتح */
    --border-color: #2d3748;
    --card-bg: #121212;      /* خلفية البطاقات سوداء */
    --navbar-bg: #000000;    /* شريط التنقل أسود */
    --footer-bg: #000000;    /* تذييل أسود */
    --hero-bg: #000000;      /* خلفية القسم الرئيسي (الهيرو) سوداء */
    --menu-text: #ffffff;    /* لون نص القائمة */
    
    /* تحسين ألوان العناصر التفاعلية */
    --input-bg: #2d3748;     /* خلفية حقول الإدخال أفتح */
    --input-border: #4a5568;
    --input-text: #ffffff;   /* نص الإدخال أكثر وضوحاً */
    --input-placeholder: #a0aec0;
    --dropdown-bg: #1a202c;
    --dropdown-hover: #2d3748;
    
    /* الظلال */
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* تطبيق الألوان على العناصر */
.dark-mode,
.dark-mode body,
.dark-mode main,
.dark-mode #app,
.dark-mode .wrapper,
.dark-mode .container,
.dark-mode .container-fluid,
.dark-mode .content-wrapper,
.dark-mode .page-wrapper,
.dark-mode .main-content,
.dark-mode .footer-wrapper,
.dark-mode .footer-container,
.dark-mode .site-wrapper,
.dark-mode .site-content,
.dark-mode .page-content,
.dark-mode .content,
.dark-mode .row,
.dark-mode .col,
.dark-mode div[class*="container"],
.dark-mode div[class*="wrapper"],
.dark-mode div[class*="content"],
.dark-mode div[class*="row"],
.dark-mode div[class*="col"],
.dark-mode div,
.dark-mode section,
.dark-mode article,
.dark-mode aside,
.dark-mode header,
.dark-mode footer,
.dark-mode nav,
.dark-mode main {
    background-color: var(--body-bg) !important;
    color: var(--text-color);
}

/* قاعدة شاملة لضمان تحويل أي خلفية بيضاء إلى سوداء */
.dark-mode *:not(.btn):not(.badge):not(img):not(svg):not(i):not(.fa):not(.fas):not(.far):not(.fab) {
    background-color: var(--body-bg) !important;
}

/* القسم الرئيسي (الهيرو) وجميع الأقسام ذات الخلفية الملونة */
.dark-mode .hero-section,
.dark-mode section.blue-bg,
.dark-mode .blue-section,
.dark-mode [style*="background-color:"],
.dark-mode [style*="background:"],
.dark-mode [class*="blue-bg"],
.dark-mode [class*="hero"],
.dark-mode section,
.dark-mode .container-fluid,
.dark-mode .bg-light,
.dark-mode .bg-white,
.dark-mode .bg-primary,
.dark-mode .bg-info,
.dark-mode div[class*="bg-"] {
    background-color: var(--hero-bg) !important;
    background: var(--hero-bg) !important;
}

/* الشريط العلوي */
.dark-mode .navbar {
    background-color: var(--navbar-bg);
    border-bottom: 1px solid var(--border-color);
}

.dark-mode .navbar-light .navbar-nav .nav-link,
.dark-mode .navbar-light .navbar-brand,
.dark-mode a.nav-link,
.dark-mode .nav-item a,
.dark-mode header a,
.dark-mode nav a,
.dark-mode .nav-link,
.dark-mode .navbar a {
    color: var(--menu-text) !important;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    font-weight: 600;
}

/* تحسين وضوح العناوين الرئيسية */
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6,
.dark-mode .section-title,
.dark-mode .heading {
    color: #ffffff !important;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
    font-weight: bold;
}

.dark-mode .navbar-light .navbar-toggler {
    border-color: var(--border-color);
    color: var(--text-color);
}

/* البطاقات والحاويات */
.dark-mode .card,
.dark-mode .tool-form,
.dark-mode .account-sidebar {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* النماذج والإدخال */
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.dark-mode .form-control::placeholder {
    color: var(--input-placeholder);
}

.dark-mode .form-control:focus {
    background-color: var(--input-bg);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(96, 165, 250, 0.25);
}

/* القوائم المنسدلة */
.dark-mode .dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
}

.dark-mode .dropdown-item {
    color: var(--text-color);
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: var(--dropdown-hover);
    color: var(--text-color);
}

/* الأزرار */
.dark-mode .btn-outline-secondary {
    color: var(--text-color);
    border-color: var(--border-color);
}

.dark-mode .btn-outline-secondary:hover {
    background-color: var(--border-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* نتائج الأدوات */
.dark-mode .tool-result {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* الإشعارات */
.dark-mode .notification-item {
    border-bottom: 1px solid var(--border-color);
}

.dark-mode .notification-item:hover {
    background-color: var(--dropdown-hover);
}

.dark-mode .notification-item.unread {
    background-color: rgba(59, 130, 246, 0.1);
}

/* النصوص والعناوين */
.dark-mode .text-muted {
    color: var(--text-muted) !important;
}

.dark-mode .elegant-text {
    background-color: var(--card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* التذييل */
.dark-mode footer {
    background-color: var(--footer-bg);
    border-top: 1px solid var(--border-color);
}

/* تحسين وضوح حقوق النشر في التذييل */
.dark-mode footer p,
.dark-mode .copyright,
.dark-mode footer .text-muted,
.dark-mode footer small,
.dark-mode footer .footer-text,
.dark-mode footer span,
.dark-mode footer div {
    color: #ffffff !important;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
    font-weight: 600;
    opacity: 1;
    font-size: 1.05em;
}

/* الشارات */
.dark-mode .badge.bg-warning {
    background-color: var(--warning-color) !important;
    color: var(--dark-color) !important;
}

/* حالة الاشتراك */
.dark-mode .subscription-status {
    background-color: var(--card-bg);
}

.dark-mode .subscription-status.trial {
    background-color: rgba(245, 158, 11, 0.1);
}

.dark-mode .subscription-status.active {
    background-color: rgba(16, 185, 129, 0.1);
}

.dark-mode .subscription-status.expired {
    background-color: rgba(239, 68, 68, 0.1);
}

/* تحسينات إضافية للتباين */
.dark-mode .btn-primary {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.dark-mode .btn-primary:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

/* تحسينات الرؤية للعناصر المهمة */
.dark-mode .pricing-card.featured::before {
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
    opacity: 0.8;
}

.dark-mode .tool-icon {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    opacity: 0.9;
}

/* تحسينات الظلال والحدود */
.dark-mode .card:hover {
    box-shadow: var(--shadow-lg);
}

.dark-mode hr {
    border-color: var(--border-color);
    opacity: 0.2;
}

/* تم حذف هذا القسم لأنه تم استبداله بقسم أكثر شمولاً */

.dark-mode p {
    color: var(--text-color);
    line-height: 1.6;
}

/* تحسين تباين الروابط */
.dark-mode a {
    color: #82b1ff;
}

.dark-mode a:hover {
    color: #b6e0ff;
}

/* تحسين تباين النصوص في البطاقات */
.dark-mode .card {
    color: var(--text-color);
}

/* تحسين شارة الأكثر شعبية */
.dark-mode .pricing-badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
    z-index: 2;
}

.dark-mode .pricing-card {
    position: relative;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    overflow: visible;
}

.dark-mode .pricing-card.featured {
    position: relative;
    border: 2px solid #3b82f6;
    background: linear-gradient(180deg, 
        rgba(59, 130, 246, 0.15) 0%,
        rgba(37, 99, 235, 0.05) 100%
    );
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
    z-index: 1;
}

.dark-mode .pricing-card.featured:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
}

/* تحسين حواف البطاقة المميزة */
.dark-mode .pricing-card.featured::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    padding: 2px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* تحسين أزرار البطاقة المميزة */
.dark-mode .pricing-card.featured .btn-primary {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border: none;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.dark-mode .pricing-card.featured .btn-primary:hover {
    background: linear-gradient(90deg, #2563eb, #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.4);
}

/* تعديل المسافات الداخلية للبطاقة المميزة */
.dark-mode .pricing-card.featured .card-content {
    padding-top: 40px;
}

/* --- Footer full width black background in dark mode --- */
.dark-mode body, .dark-mode main, .dark-mode .footer-custom, .dark-mode footer, .dark-mode .container, .dark-mode .footer-box {
    background-color: #000 !important;
    background: #000 !important;
}

/* Keep footer text and links readable */
.dark-mode .footer-custom, .dark-mode .footer-custom *, .dark-mode footer, .dark-mode footer * {
    color: #fff !important;
}

/* Optional: Make footer boxes slightly lighter for contrast */
.dark-mode .footer-box {
    background-color: #181818 !important;
}

/* تأثير أزرق عند التحويم على روابط الفوتر في الوضع الليلي */
.dark-mode .footer-links a:hover, .dark-mode .footer-legal-links a:hover {
    background: #0d6efd !important;
    color: #fff !important;
    text-decoration: none;
    box-shadow: 0 2px 8px #0d6efd33;
    transform: translateY(-2px) scale(1.05);
}

/* تأثير أزرق قوي عند التحويم على جميع روابط الفوتر في الوضع الليلي */
.dark-mode footer a:hover, .dark-mode .footer-custom a:hover, .dark-mode .footer-links a:hover, .dark-mode .footer-legal-links a:hover {
    background: #0d6efd !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px #0d6efd33 !important;
    border-radius: 0.4rem;
    transform: translateY(-2px) scale(1.05);
    transition: all 0.2s;
}