/* 1) 外層給高度（自行調整 header 高度）*/
.tabs-wrapper {
    height: calc(100vh - 200px);
}

/* 2) 垂直 tabs 與左右兩側都吃滿高度 */
.h-100, .mud-tabs-vertical, .mud-tabs-vertical .mud-tabs-toolbar, .mud-tabs-panels {
    height: 100%;
}

    /* 3) 左邊清單超多時可捲動，右側內容也可捲動 */
    .mud-tabs-vertical .mud-tabs-toolbar {
        overflow-y: auto;
    }

.mud-tabs-panels {
    overflow: auto;
}

/* 4) 想固定左欄寬度可加這條（可自行調整寬度）*/
.mud-tabs-vertical .mud-tabs-toolbar {
    min-width: 220px;
}

/* 5) 讓左欄分隔線從上到下（有時主題 padding 會斷掉的話可強化一下）*/
.mud-tabs-vertical .mud-tabs-toolbar {
    border: 1px solid var(--mud-palette-lines-default);
}

.right-panel {
    height: 100%;
    box-sizing: border-box;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: none;
    border-radius: 0 12px 12px 0; /* 跟主題的圓角合一點 */
    background: var(--mud-palette-surface);
}

/* 讓整體撐滿高度（若外層有固定高度） */
.mud-tabs-vertical,
.mud-tabs-vertical .mud-tabs-toolbar,
.mud-tabs-panels {
    height: 100%;
}

    /* 左側清單的分隔線（可選） */
    .mud-tabs-vertical .mud-tabs-toolbar {
        border-right: 1px solid var(--mud-palette-lines-default);
    }


.mud-tab.mud-tab-active {
    Color: #EC6032 !important;
}

.mud-tab-slider {
    position: absolute;
    background: #EC6032 !important;
}