/* ==========================================
   [ROSTER] 佈局鎖定：解決與選單連住的問題
   ========================================== */

/* 1. 大標題文字鎖定 */
.page-main-title {
    font-size: 32px !important;
    font-weight: 900 !important;
    color: rgb(5, 71, 0) !important;
    margin: 0 0 10px 0 !important;
    letter-spacing: 1px !important;
}

/* 2. 標題下方那條「霸氣綠線」 */
/* 雖然你 HTML 寫了 inline style，但這裡補強可以確保 opacity 不會被覆蓋 */


/* 3. 確保整體內容區塊不會縮水 */
.main-content-area {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

/* 1. 確保大容器有正確的推擠距離 */
.player-management-container {
    background-color: #ffffff !important;
    display: block !important;
    width: auto !important; /* 🌟 讓它由 Margin 決定寬度 */
    
    /* 🌟 物理鎖定：推開左側選單的距離 (依照你整體的 1600px 佈局) */
    margin-left: 0px !important; 
    margin-right: 25px !important;
    margin-top: 20px !important;
    
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* 2. 修正整體頁面佈局，確保 Flex 不會把表格擠向左邊 */
.bh-page-layout {
    display: flex !important;
    align-items: flex-start !important;
    max-width: 1600px !important;
    margin: 0 !important; /* 保持靠左 */
}



/* ==========================================
   [TABS INTERACTION] 只增加 Hover 效果
   ========================================== */



   

/* ==========================================
   [SUB-TABS] 投手/野手按鈕：零抖動物理鎖定
   ========================================== */

/* 1. 基礎狀態 */
.sub-btn {
    /* 保持你原本的所有樣式設定，不准動字體 */
    cursor: pointer !important;
    position: relative !important;
    /* 確保平時有基礎邊框 */
    border: 2px solid #ddd !important;
}

/* 2. 🌟 Hover 畫框：改用 outline 確保零位移 */
.sub-btn:hover {
    background-color: #e0e0e0 !important;
    
    /* 🌟 核心：維持原本 1px border，改用 outline 疊加出 2px 視覺感 */
    /* outline 不佔物理空間，絕對不會推擠表格導致抖動 */
    border: 2px solid #bbb !important; 
    outline: 1px solid #bbb !important;
    outline-offset: -1px !important; /* 讓輪廓向內對齊邊框 */
}

/* 3. Active 狀態 (綠色) */
.sub-btn.active {
    background-color: rgb(5, 71, 0) !important;
    color: white !important;
    border: 1px solid rgb(5, 71, 0) !important;
    outline: 1px solid rgb(5, 71, 0) !important;
    outline-offset: -1px !important;
}


/* 3. 確保表格本體不會溢出 */
table.roster-table {
    width: 100% !important;
    border-collapse: collapse !important;
    /* 確保文字不會縮在一起 */
    min-width: 800px !important; 
}

/* 表格樣式 */
.roster-table {
    width: 100%;
    border-collapse: collapse;
}

.roster-table th {
    background-color: rgb(5, 71, 0);
    color: white;
    padding: 12px 5px;
}

.roster-table td {
    padding: 12px 8px;
    text-align: center;
}

.roster-table tbody tr:nth-child(even) td {
    background-color: #f7f9f7 !important;
}

.roster-table tbody tr:hover td {
    background-color: #f1f8e9 !important;
}

/* 加上 .roster-table 前綴，並使用 !important 確保它是最高優先級 */
.roster-table th.border-right, 
.roster-table td.border-right {
    border-right: 1px solid rgba(131, 131, 131, 0.2) !important;
}

/* 確保表格隔線不會被隱藏 */
.roster-table {
    border-collapse: collapse !important;
}

.name-cell {
    text-align: left !important;
    padding-left: 20px !important;
    font-weight: bold;
}