/* ============================================
   DarkMode.css - حالت تاریک ساده
   نسخه نهایی - با محافظت از reflow
   ============================================ */

/* ============================================
   متغیرهای حالت روشن (پیش‌فرض)
   ============================================ */
html.theme-light {
    --dm-bg: #f5f5f5;
    --dm-surface: #ffffff;
    --dm-text: #222222;
    --dm-text-secondary: #555555;
    --dm-border: rgba(0, 0, 0, 0.08);
    --dm-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* ============================================
   متغیرهای حالت تاریک
   ============================================ */
html.theme-dark {
    --dm-bg: #0f1720;
    --dm-surface: #1a2530;
    --dm-text: #e8edf3;
    --dm-text-secondary: #b0bcc7;
    --dm-border: rgba(255, 255, 255, 0.08);
    --dm-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* ============================================
   اعمال روی body
   ============================================ */
html.theme-dark body {
    background: var(--dm-bg);
    color: var(--dm-text);
}

/* ============================================
   اعمال روی اجزای اصلی
   ============================================ */

/* ===== نوار بالایی ===== */
html.theme-dark .TopIcons {
    background: #1a2530;
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

html.theme-dark .TopIcons .brand-title {
    filter: drop-shadow(0 0 3px rgba(212, 168, 71, 0.5));
}

html.theme-dark .TopIcons .menu-icon:hover,
html.theme-dark .TopIcons .icon-btn:hover,
html.theme-dark .TopIcons .settings-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ===== نوار ناوبری ===== */
html.theme-dark .sub-nav {
    background: linear-gradient(135deg, #16202b 0%, #1a2530 100%);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ===== سایدبار و بخش کناری ===== */
html.theme-dark .sidebar {
    background: #16202b;
    color: var(--dm-text);
}

html.theme-dark .sidebar h3 {
    color: #4ade80;
    border-bottom-color: rgba(74, 222, 128, 0.2);
}

html.theme-dark .aside {
    background: #1f1812;
    color: var(--dm-text);
}

html.theme-dark .aside h3 {
    color: #d4a847;
    border-bottom-color: rgba(212, 168, 71, 0.2);
}

html.theme-dark .aside p {
    color: var(--dm-text-secondary);
}

/* ===== محتوای اصلی ===== */
html.theme-dark .main {
    background: var(--dm-surface);
    color: var(--dm-text);
    box-shadow: var(--dm-shadow);
}

html.theme-dark .main h2 {
    color: var(--dm-text);
}

/* ===== فوتر ساده ===== */
html.theme-dark .footer-simple {
    background: #0a0f15;
}

/* ===== منوی کشویی ===== */
html.theme-dark .MenuSidebar .menu-content {
    background: rgba(15, 23, 32, 0.95);
    color: var(--dm-text);
    border-right-color: rgba(255, 255, 255, 0.08);
}

html.theme-dark .MenuSidebar .close-btn {
    color: var(--dm-text);
    background: rgba(255, 255, 255, 0.08);
}

html.theme-dark .MenuSidebar li a {
    color: var(--dm-text);
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

html.theme-dark .MenuSidebar li a:hover {
    background: rgba(74, 144, 226, 0.2);
}

/* ===== کارت‌های گالری ویدئو ===== */
html.theme-dark .vid-gallery-card {
    background: #1e2a36;
    color: var(--dm-text);
    border-color: rgba(255, 255, 255, 0.06);
}

html.theme-dark .vid-gallery-title {
    color: var(--dm-text);
}

html.theme-dark .vid-gallery-description {
    color: var(--dm-text-secondary);
}

html.theme-dark .vid-gallery-footer {
    background: #16202b;
    border-top-color: rgba(255, 255, 255, 0.05);
}

/* ===== محتوای صفحات (PageContent) ===== */
html.theme-dark .page-hero-body {
    color: var(--dm-text-secondary);
}

html.theme-dark .page-list {
    background: linear-gradient(135deg, #1a2530 0%, #1e2a36 100%);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

html.theme-dark .page-list-item-text {
    color: var(--dm-text-secondary);
}

html.theme-dark .page-main-body {
    color: var(--dm-text-secondary);
}

/* ===== FAQ ===== */
html.theme-dark .faq-section h2 {
    color: var(--dm-text);
    border-bottom-color: var(--primary-blue, #4A90E2);
}

html.theme-dark .faq-section details {
    background: #1a2530;
    border-color: rgba(255, 255, 255, 0.06);
}

html.theme-dark .faq-section details[open] {
    background: #1e2a36;
    border-color: rgba(255, 255, 255, 0.1);
}

html.theme-dark .faq-section summary {
    color: var(--dm-text);
}

html.theme-dark .faq-section details p {
    color: var(--dm-text-secondary);
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ===== دکمه اسکرول به بالا ===== */
html.theme-dark .scroll-to-top {
    background: #1e2a36;
}

/* ===== هدر ===== */
html.theme-dark .header {
    background: #0a0f15;
}

/* ===== انتخاب متن ===== */
html.theme-dark ::selection {
    background: var(--primary-blue, #4A90E2);
    color: #ffffff;
}

/* ===== اسکرول‌بار ===== */
html.theme-dark ::-webkit-scrollbar-track {
    background: #0f1720;
}

html.theme-dark ::-webkit-scrollbar-thumb {
    background: var(--primary-blue, #4A90E2);
}

html.theme-dark ::-webkit-scrollbar-thumb:hover {
    background: #5aa0f0;
}

/* ===== عنوان‌های کارت گالری آیکون ===== */
html.theme-dark .icon-gallery-caption {
    color: var(--dm-text);
}

/* ===== لینک‌ها ===== */
html.theme-dark a {
    color: #6bb0f5;
}

html.theme-dark a:hover {
    color: #8cc5ff;
}