html {
        transition: data-bs-theme 0.3s ease-in-out;
}


/* --- General Dark Mode Setup --- */
html[data-bs-theme="dark"] {
    background-color: #050505 !important; 
   color: #fafafa !important;     }

/* Setting colors for common text elements */
html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6,
html[data-bs-theme="dark"] p ,
html[data-bs-theme="dark"] a
{
    color: #fafafa !important;
}

html[data-bs-theme="dark"] .menu-link-Title.active {

color: #6da8ff !important;
font-weight:bold !important;

}


    .theme-switcher button {
        transition: transform 0.3s ease;
        padding: 5px;
        line-height: 0;
    }
    .theme-switcher button:hover {
        transform: scale(1.1);
    }
    .theme-icon {
        width: 22px;
        height: 22px;
          }

html[data-bs-theme="dark"] .custom-link::after {

 background:#6da8ff;


}


html[data-bs-theme="dark"] a:hover {
color:#6da8ff !important;

}

html[data-bs-theme="dark"] .indicator{
   background:#6da8ff;

}

/* Resetting inheritance issues on body */
body {
    background-color: inherit !important;
    color: inherit !important;
}

/* --- Header Setup (Assuming IDs 'header' and 'headerSidebar') --- */

/* Style for general header elements (if ID 'header' is used) */
html[data-bs-theme="dark"] header#header .header-top,
html[data-bs-theme="dark"] header#header .header-second {
    background-color: #121212 !important; 
    color: #fafafa !important;
    border: 1px solid #333;
}

/* Style for headerSidebar (Assuming ID 'headerSidebar') */
html[data-bs-theme="dark"] header#headerSidebar {
    background-color: #121212 !important; 
    color: #fafafa !important;
    border: 1px solid #333;
}

/* --- Dropdown Menu Styling for Header Sidebar --- */

/* General styling for all dropdown menus */
html[data-bs-theme="dark"] ul.dropdown-menu {
    background-color: #121212 !important; 
    border-color: #333 !important;
}

/* Styling for the specific sidebar navigation menu background */
html[data-bs-theme="dark"] #headerSidebar .headerSidebar-nav-main nav > ul > li.dropdown .dropdown-menu {
    background-color: #121212 !important; 
    border-color: #1a1a1a !important; 
}

/* Styling for menu items on hover/active states within the sidebar dropdown */
html[data-bs-theme="dark"] #headerSidebar .headerSidebar-nav-main nav > ul > li.dropdown .dropdown-menu li:hover > a,
html[data-bs-theme="dark"] #headerSidebar .headerSidebar-nav-main nav > ul > li.dropdown .dropdown-menu li:focus > a,
html[data-bs-theme="dark"] #headerSidebar .headerSidebar-nav-main nav > ul > li.dropdown .dropdown-menu li.active > a,
html[data-bs-theme="dark"] #headerSidebar .headerSidebar-nav-main nav > ul > li.dropdown .dropdown-menu li:active > a,
html[data-bs-theme="dark"] #headerSidebar .headerSidebar-nav-main nav > ul > li.dropdown .dropdown-menu li.open > a,
html[data-bs-theme="dark"] #headerSidebar .headerSidebar-nav-main nav > ul > li.dropdown .dropdown-menu li.accessibility-open > a {
    background-color: #1a1a1a !important; /* Hover background */
    color: #6da8ff !important; /* Hover text color */
    border-color: #2a2a2a !important;
}

/* Styling for standard links within the sidebar navigation */
html[data-bs-theme="dark"] #headerSidebar .headerSidebar-nav-main nav > ul > li > a {
    color: #fafafa !important; 
}

/* Styling for icons and spans within the sidebar navigation links */
html[data-bs-theme="dark"] #headerSidebar .headerSidebar-nav-main nav > ul > li > a i,
html[data-bs-theme="dark"] #headerSidebar .headerSidebar-nav-main nav > ul > li > a span {
    color: #fafafa !important;
}

/* --- Footer Setup --- */
html[data-bs-theme="dark"] footer#footer {  
   background-color: #121212 !important; 
    color: #fafafa !important;
    border-top: 1px solid #333;
}

/* --- card style --- */
html[data-bs-theme="dark"] div.card{
  background-color: #171b20 !important;
}

html[data-bs-theme="dark"] div.cardborderhover:hover {
   border: 1px solid #5c6bc0 !important;	
	}

html[data-bs-theme="dark"] div.cardborderhover:hover .card-title {
  color: #5c6bc0 !important; 
		}
html[data-bs-theme="dark"] .mobile-header {

   background-color:#120d0d !important;
}

html[data-bs-theme="dark"] .push-menu {

 background-color:#121212 !important;
}

html[data-bs-theme="dark"] #backToMain{
 
color:#fff !important;
}

html[data-bs-theme="dark"] .toggle.active > .toggle-title {

background:#1a1a1a !important;

}
html[data-bs-theme="dark"] .toggle > .toggle-title {

background:#1a1a1a !important;
color: #ccc !important ;
 

}

html[data-bs-theme="dark"] .toggle > .toggle-content {
	        background:#1a1a1a  !important;
}


html[data-bs-theme="dark"] .copyButton
 {
    background-color: #696c70 !important ;
}
html[data-bs-theme="dark"] .codeBlockHeader {
  background: #2f2f30 !important;
}

html[data-bs-theme="dark"] pre p {
    color: #fff !important;
}

html[data-bs-theme="dark"] pre{

background-color:#2f2f308f;
border : 1px solid #e8e8e826 !important;

}


html[data-bs-theme="dark"] .headerSidebar-nav-main nav > ul > li {

border-bottom:solid 1px #e5e7eb29 !important;
}

html[data-bs-theme="dark"]  ul {

color:#fafafa !important;
}


/* وقتی کلاس dark به تگ body یا کانتینر اصلی اضافه شود */
html[data-bs-theme="dark"] .pishgam-callout.note {
   
    background-color: #020028;
    border-right: 5px solid #5766b7;
    box-shadow: 2px 4px 5px #5766b747;
}

}

html[data-bs-theme="dark"] .pishgam-callout .title {
    color: #d0d4ed;
}

html[data-bs-theme="dark"] .pishgam-callout .text {
    color: #e5e7eb;
}

html[data-bs-theme="dark"] .pishgam-callout .icon-container {
    color: #6272ca; 
}



/* حالت دارک مود */
html[data-bs-theme="dark"] .callout-warning {
    background-color: rgba(245, 158, 11, 0.1); /* نارنجی شفاف روی پس‌زمینه تیره */
    border-right-color: #F59E0B;
    box-shadow: none;
}

html[data-bs-theme="dark"] .callout-warning .title, 
.dark .callout-warning .text {
    color: #FCD34D; /* زرد روشن برای خوانایی در تاریکی */
}
html[data-bs-theme="dark"] .logo-color{

   fill: #fff;
}
html[data-bs-theme="dark"] {
  --pishgam-logo-main-color: #fff !important; /* رنگ اصلی لایت */
   --pishgam-logo-text-color: #fff; /* خاکستری ثابت متن انگلیسی */
--pishgam-logo-vector-color:#000;
}


/* ==========================================================================
   Premium Blog & Related Section - Dark Mode Fixes
   ========================================================================== */

/* هدر بلاگ */
html[data-bs-theme="dark"] .blog-header {
    border-bottom: 1px solid #2a2a2a !important;
}

/* کارت اصلی رسانه (مدیا) */
html[data-bs-theme="dark"] .media-card {
    background: #121212 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
}

/* بخش متن اصلی بلاگ و پاراگراف‌ها */
html[data-bs-theme="dark"] .blog-content {
    color: #e5e7eb !important; /* رنگ روشن‌تر برای خوانایی بهتر متن‌های طولانی */
}

/* عنوان بخش مقالات مرتبط و خط ظریف زیر آن */
html[data-bs-theme="dark"] .related-section-title {
    color: #fafafa !important;
}

html[data-bs-theme="dark"] .related-section-title::after {
    background-color: #6da8ff !important; /* تغییر خط زیرین به رنگ آبی برند در حالت دارک */
}

/* استایل پرمیوم کارت‌های مرتبط */
html[data-bs-theme="dark"] .premium-relation-card {
    background: #121212 !important;
    border: 1px solid #2a2a2a !important;
}

html[data-bs-theme="dark"] .premium-relation-card:hover {
    border-color: #5c6bc0 !important; /* هماهنگ با هاور بقیه کارت‌های قالب شما */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4) !important;
}

/* باکس تصویر داخل کارت */
html[data-bs-theme="dark"] .card-image-wrapper {
    background-color: #1a1a1a !important;
}

/* عناوین داخل کارت‌های مرتبط */
html[data-bs-theme="dark"] .relation-card-title {
    color: #fafafa !important;
}

/* دیسکریپشن و توضیحات کارت */
html[data-bs-theme="dark"] .relation-card-desc {
    color: #b3b3b3 !important; /* خاکستری روشن و استاندارد دارک مود برای متن ریز */
}

/* فوتر کارت و بخش اکشن */
html[data-bs-theme="dark"] .relation-card-footer {
    border-top: 1px solid #2a2a2a !important;
    color: #6da8ff !important; /* تغییر رنگ دکمه/فلش راهنما به آبی برند */
}

/* استایل دکمه "مشاهده همه" و حالت هاور آن */
html[data-bs-theme="dark"] .related-guides-section .related-title {
    color: #fafafa !important;
}

html[data-bs-theme="dark"] .related-guides-section .btn-view-all {
    color: #b3b3b3 !important;
}

html[data-bs-theme="dark"] .related-guides-section .btn-view-all:hover {
    color: #6da8ff !important;
}


/* ==========================================================================
   Premium UI Components & Hero Section - Dark Mode Fixes
   ========================================================================== */

/* ۱. بازنویسی متغیرهای رنگی اختصاصی برای حالت دارک */
html[data-bs-theme="dark"] {
    --bg-card: #121212;                     /* پس‌زمینه کارت‌ها هماهنگ با هدر و فوتر */
    --border-card: #2a2a2a;                 /* بوردرهای تیره و ملایم */
    --border-card-hover: #5c6bc0;           /* رنگ هاور بوردر کارت‌ها */
    --text-title: #fafafa;                  /* رنگ سفید متن‌های شاخص */
    --text-desc: #b3b3b3;                   /* خاکستری خوانا برای دیسکریپشن */
    --text-muted: #71717a;                  /* خاکستری تیره برای متون فرعی */
    --bg-tech-icon: #1a1a1a;                /* پس‌زمینه باکس‌های کوچک و آیکون‌ها */
    --bg-badge: rgba(109, 168, 255, 0.1);   /* رنگ پس‌زمینه بدج‌ها (آبی شفاف دارک) */
    --color-badge: #6da8ff;                 /* رنگ متن بدج‌ها (آبی روشن برند شما) */
    --footer-border: #2a2a2a;
    --shadow-card-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    
    --color-link: #fafafa;                  /* رنگ ثابت متون لینک دار در حالت دارک */
    --color-link-hover: #6da8ff;            /* رنگ هاور لینک‌ها */
}

/* ۲. اصلاحات تکمیلی اجزا در حالت دارک مود */

/* باکس سرچ */
html[data-bs-theme="dark"] .search-input {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #fafafa !important;
}

html[data-bs-theme="dark"] .search-input:focus {
    background-color: #121212 !important;
    border-color: #6da8ff !important;
    box-shadow: 0 0 0 4px rgba(109, 168, 255, 0.15) !important;
}

/* ناوبری فیلترها (تب‌ها) */
html[data-bs-theme="dark"] .filter-nav {
    border-bottom: 1px solid #2a2a2a !important;
}

html[data-bs-theme="dark"] .filter-btn {
    color: #b3b3b3 !important;
}

html[data-bs-theme="dark"] .filter-btn:hover {
    color: #fafafa !important;
    background-color: #1a1a1a !important;
}

html[data-bs-theme="dark"] .filter-btn.active {
    color: #6da8ff !important;
    background-color: rgba(109, 168, 255, 0.1) !important;
    border-color: #2a2a2a !important;
}

/* کارت‌های پرمیوم بخش مستندات */
html[data-bs-theme="dark"] .guide-card {
    background: #121212 !important;
    border: 1px solid #2a2a2a !important;
}

html[data-bs-theme="dark"] .guide-card:hover {
    border-color: #5c6bc0 !important;
    box-shadow: var(--shadow-card-hover) !important;
}

html[data-bs-theme="dark"] .card-tech-icon {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
}

html[data-bs-theme="dark"] .card-footer-meta {
    border-top: 1px solid #2a2a2a !important;
}

/* هیرو سکشن مدرن */
html[data-bs-theme="dark"] .hero-documentation {
    border-bottom: 1px solid #2a2a2a !important;
}

/* نشانک (بدج) بالای عنوان هیرو */
html[data-bs-theme="dark"] .hero-badge {
    background-color: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    color: #6da8ff !important;
}

/* تصحیح انیمیشن پالس نقطه بدج برای رنگ دارک */
@keyframes pulseGlowDark {
    0% { box-shadow: 0 0 0 0 rgba(109, 168, 255, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(109, 168, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(109, 168, 255, 0); }
}

html[data-bs-theme="dark"] .hero-badge .badge-dot {
    background-color: #6da8ff !important;
    animation: pulseGlowDark 2s infinite !important;
}

/* افکت گرادینت عنوان هیرو در حالت دارک */
html[data-bs-theme="dark"] .hero-title .text-gradient {
    background: linear-gradient(135deg, #fafafa 0%, #6da8ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* تگ‌های پیشنهادی زیر باکس سرچ */
html[data-bs-theme="dark"] .suggested-tag {
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
    color: #b3b3b3 !important;
}

html[data-bs-theme="dark"] .suggested-tag:hover {
    color: #6da8ff !important;
    border-color: #6da8ff !important;
    background-color: rgba(109, 168, 255, 0.1) !important;
}

/* تصحیح آیکون سرچ در حالت فوکوس */
html[data-bs-theme="dark"] .hero-documentation .search-input:focus + .search-icon {
    color: #6da8ff !important;
}