.tabs-container {
    position: relative;
}

/* برای اینکه منو جا داشته باشه، گوشه‌ی راست tabbar رو خالی می‌کنیم */
.main-tabs .mud-tabs-tabbar-inner {
    padding-right: 30px !important;
    box-sizing: border-box;
}

/*dddddddddd خود منو را دقیقا گوشه‌ی راست tabbar بگذار */
 .tabs-action-menu {
    position: absolute;
    top: 9px;
    right: 6px; /* دقیق کنار دکمه اسکرول */
    z-index: 30;
}

/* منوی بازشده (Popover) همین دکمه */
.main-tabs .tabs-menu-popover .mud-menu-item-text {
    font-size: 12px !important;
}








/* دکمه اسکرول تب‌ها */
.main-tabs .mud-tabs-scroll-button {
    height: 44px !important; /* برابر با ارتفاع تب‌ها */
    display: flex;
    align-items: center; /* آیکن وسط‌چین */
}

    /* خود دکمه */
    .main-tabs .mud-tabs-scroll-button .mud-icon-button {
        padding: 8px !important;
    }

    /* آیکن داخل دکمه */
    .main-tabs .mud-tabs-scroll-button .mud-icon-root {
        font-size: 20px !important;
    }








/* فقط دکمه اضافه + را مخفی کن */
.main-tabs .mud-tabs-header-after .mud-icon-button {
    display: none !important;
}

.main-tabs .mud-tabs-header-after button.mud-icon-button {
    display: none !important;
}



/*ddddddddd نوار بالای تب‌ها */
.main-tabs .mud-tabs-tabbar {
    min-height: 32px !important; /* ارتفاع کلی نوار */
    padding: 0 4px !important; /* فاصله داخلی کمتر */
}

/* wrapper داخلی هم ممکنه ارتفاع بده */
.main-tabs .mud-tabs-tabbar-inner,
.main-tabs .mud-tabs-tabbar-content,
.main-tabs .mud-tabs-tabbar-wrapper {
    min-height: 32px !important;
}

/* خود تب‌ها */
.main-tabs .mud-tab {
    padding: 0px 6px 0 4px !important; /* تب‌ها جمع‌وجورتر */
    font-size: 12px !important; /* متن کوچیک‌تر */
    min-height: 40px !important; /* ارتفاع هر تب کمتر */
    line-height: 1.2 !important;
}

/* ---------- دکمه بستن تب ---------- */

.mud-tab .mud-icon-button:hover {
    color: red !important;
    /*background-color: red;*/

    padding: 0; /* برای اینکه دایره درست بمونه */
    transform: scale(1.1); /* کوچیک‌تر شدن به نسبت 80% */
}

/*    .mud-tab .mud-icon-button .mud-icon-size-medium {
        font-size: 1.1rem !important;
    }
*/
.main-tabs .mud-tab .mud-icon-button .mud-icon-size-small {
    font-size: 16px !important; /* سایز دلخواه (پیشفرض حدود 20px هست) */
}







.main-tabs .mud-tabs-tabbar-wrapper {
    gap: 8px !important; /* فاصله بین تب‌ها */
}


/* فاصله از سمت راست برای کل نوار تب‌ها */
/*.mud-tabs-tabbar-inner {
    padding-right: 18px !important;*/ /* فاصله ابتدای تب‌ها */
/*box-sizing: border-box !important;
}*/




/* تب‌ها حالت عادی */
.main-tabs .mud-tab {
    margin-top: 4px !important; /* فاصله بین تب‌ها */
    border-radius: 6px 6px 0 0 !important;
    /*border: 1px solid #ddd !important;*/ /* بوردر ریز خاکستری */
    transition: all 0.2s ease-in-out;
    position: relative; /* لازم برای خط زیر */
}



/* هر تب دقیقا به اندازه متنش */
.main-tabs.mud-tab {
    min-width: unset !important;
    width: auto !important;
    flex: 0 0 auto !important; /* از کشیده شدن تو فلکس جلوگیری میکنه */
}




    /* تب غیر فعال در حالت هاور */
    .main-tabs.mud-tab:not(.mud-tab-active):hover {
        background-color: #e5e6ef !important;
        background-color: #f0f0f0 !important;
        color: #374151 !important;
        border-radius: 6px 6px 0px 0px !important;
        transform: translateY(-2px);
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        cursor: pointer;
        border-bottom: 2px solid rgba(0, 0, 0, 0.12) !important; /* خط زیر تب */
    }

    /* هاور روی تب فعال */
    .main-tabs.mud-tab.mud-tab-active:hover {
        background-color: #eef2ff !important;
        color: #1d4ed8 !important;
        border-radius: 6px 6px 0 0 !important;
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }


/* تغییر رنگ و ضخامت خط آبی زیر تب فعال */
/*.main-tabs .mud-tab-slider {
    background-color: #6366f1 !important;*/ /* رنگ آبی دلخواه */
/*height: 2px !important;*/ /* ضخامت خط */
/*bottom: -1px !important;*/ /* جابه‌جایی به پایین‌تر */
/*border-radius: 0 !important;
}*/








/*.custom-tabs .mud-tabs-tabbar {
    background-color: #f3f4f6 !important;*/ /* مثلا خاکستری روشن */
/*border-bottom: 1px solid #ddd;*/ /* خط زیرش اختیاری */
/*min-height: 36px;*/ /* می‌تونی کنترل ارتفاعم بکنی */
/*}*/


/* تب فعال */
/*.mud-tab.mud-tab-active {
    background-color: #ffffff !important;*/ /* سفید روشن */
/*color: #1e40af !important;*/ /* متن آبی تیره */
/*font-weight: 600 !important;*/ /* متن بولدتر */
/*border-radius: 1px 10px 0 0 !important;*/
/*border: 1px solid #4b5563 !important;*/ /* دور تب پررنگ‌تر */
/*border: 1px solid #d1d5db !important;*/ /* کادر خاکستری نازک (Tailwind Gray-300) */
/*border-bottom: none !important;*/ /* پایینش خالی بمونه تا به محتوا بچسبه */
/*border-bottom: 1px solid #ffffff !important;*/ /* پایین تب هم‌رنگ پس‌زمینه → خط tabbar پوشانده بشه */

/*border-bottom: none !important;*/ /* خط پایین حذف بشه تا به محتوای تب بچسبه */
/*box-shadow: 0 -2px 8px rgba(99, 102, 241, 0.25);*/ /* سایه آبی ملایم */
/*}*/




/* خط کلی tabbar */
.mud-tabs.main-tabs > .mud-tabs-tabbar {
    /*background: linear-gradient(to bottom, #f9fcfe 0%, #dbe7f2 100%);*/
    /*background: linear-gradient(0deg, #f9fafb 0%, #e5e9f0 100%);*/

    background-color: #f1f1f2b2 !important;
    background-color: #e9edfa !important;
    background-color: #e0e7ff !important;
    /*    border-bottom: 1px solid #ddd !important; */
    min-height: 36px;
    position: relative;
    z-index: 1;
}

/* تب فعال */
.main-tabs .mud-tab.mud-tab-active {
    background-color: #ffffff !important;
    color: #685dd8 !important;
    font-weight: 600 !important;
    border: 1px solid #d8d8d8 !important;
    border-bottom: none !important; /* خط پایین تب حذف */
    border-radius: 6px 6px 0 0 !important;
    margin-bottom: -1px !important; /* بیاد روی tabbar بشینه */
    position: relative;
    z-index: 2; /* بالاتر از tabbar */
    box-shadow: none !important; /* مطمئن بشیم سایه اضافی نداره */
}


/* غیرفعال کردن خط رنگی MudBlazor زیر تب فعال */
.main-tabs .mud-tab-slider {
    display: none !important;
}



.main-tabs .mud-tabs-panels {
    background: #f9fafb !important; /* خاکستری خیلی روشن */
    /*    padding: 20px;
*/
}



/* آیکن کنار اسم تب */
.main-tabs .tab-icon {
    /*margin-left: 4px;*/ /* فاصله از متن */
    font-size: 20px; /* سایز آیکن */
    display: inline-flex; /* برای وسط چین شدن آیکن */
    align-items: center; /* عمودی وسط */
}

/* هاور */
.main-tabs .mud-tab:hover .tab-icon {
    /*color: red;*/ /* رنگ دلخواه */
    transform: scale(1.1);
    transition: 0.15s ease;
}