/* استایل‌های بهبود تب‌ها در افزودن محتوا */

/* بهبود استایل هاور تب‌ها - افزایش اختصاصی بودن سلکتورها */
.content-add-page .tab-header-container .nav-tabs .nav-link:hover,
#contentTabContent + .card .nav-tabs .nav-link:hover,
.content-add-page .nav-tabs .nav-link:hover,
div.content-body .nav-tabs .nav-link:hover {
    background-color: rgba(108, 117, 125, 0.15) !important; /* رنگ خاکستری تیره‌تر برای هاور */
    border-color: #dee2e6 #dee2e6 #fff !important;
    transition: all 0.2s ease;
    color: #333 !important;
    opacity: 0.95 !important;
}

#contentTabContent + .card .nav-tabs .nav-link.active,
.content-add-page .nav-tabs .nav-link.active,
div.content-body .nav-tabs .nav-link.active {
    color: #212529 !important; /* رنگ متن تیره‌تر برای تب فعال */
    background-color: #fff !important;
    border-color: #6c757d #dee2e6 #fff !important;
    border-top-width: 2px !important;
    font-weight: bold !important;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05) !important;
}

/* کاهش فضاهای سفید اضافی */
.tab-content .card-body {
    padding: 1rem;
}

.tab-content .row {
    margin-bottom: 1rem;
}

.tab-pane {
    padding-top: 0.5rem;
}

/* فیکس کردن منوی تب‌ها و عنوان‌ها */
.sticky-top.bg-body {
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    background-color: #fff !important;
}

/* اضافه کردن اثر اسکرول با فیکس ماندن هدر */
.page-title-wrapper {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: #fff;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e9ecef;
    box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* نگه داشتن منوی تب‌ها زیر عنوان در هنگام اسکرول */
.tab-header-container {
    position: sticky;
    top: 60px; /* فاصله از بالای صفحه، متناسب با ارتفاع عنوان */
    z-index: 1019;
    background-color: #fff;
    padding-top: 0.5rem;
    transition: box-shadow 0.3s ease;
    padding-bottom: 0;
    margin-bottom: 1rem;
}

/* بهبود ظاهر تب‌ها */
.content-add-page .nav-tabs .nav-link,
div.content-body .nav-tabs .nav-link,
#contentTabContent + .card .nav-tabs .nav-link {
    color: #495057 !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid transparent !important;
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
    margin-bottom: -1px !important;
    transition: all 0.2s ease !important;
    background-color: #f8f9fa !important;
    opacity: 0.85 !important;
}

/* تقویت استایل تب‌ها با انتخابگرهای اختصاصی‌تر */
.content-add-page .tab-header-container .card-body .nav-tabs .nav-link:hover {
    background-color: rgba(108, 117, 125, 0.15) !important;
    border-color: #dee2e6 #dee2e6 #fff !important;
    color: #000 !important;
    opacity: 1 !important;
}

.content-add-page .tab-header-container .card-body .nav-tabs .nav-link.active {
    color: #212529 !important;
    background-color: #fff !important;
    border-color: #6c757d #dee2e6 #fff !important;
    border-top-width: 2px !important;
    font-weight: bold !important;
    opacity: 1 !important;
}

/* کاهش فاصله‌ها در کارت‌های محتوا */
.card {
    margin-bottom: 1rem;
}

/* اطمینان از نمایش درست تب‌های فعال */
.tab-pane {
    display: none !important; /* همه تب‌ها به صورت پیش‌فرض مخفی باشند */
}

.tab-pane.active.show {
    display: block !important; /* فقط تب فعال نمایش داده شود */
}

/* اصلاح مارجین‌ها و پدینگ‌ها */
.tab-content > .tab-pane {
    padding: 1rem 0;
}

/* بهبود عملکرد تب‌ها در حالت موبایل */
@media (max-width: 768px) {
    .tab-header-container .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    .tab-header-container .nav-tabs .nav-link {
        white-space: nowrap;
    }
}