/* 容器樣式 */
.personal-leave-records {
    margin: 2px 0;
}

/*
.leave-records-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
*/

/* 表格基本樣式 */
.leave-records-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.leave-records-table th {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
    font-size: 14px !important;
    background-color: #f5f5f5;
    font-weight: bold;
}

.leave-records-table td {
    padding: 2px;
    border: 1px solid #ddd;
    text-align: left;
    font-size: 12px !important;
    line-height: 30px; /* 設定行高 */
}



.leave-records-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* 表格內元素樣式 */
.leave-records-table input,
.leave-records-table select {
    width: 100%;
    font-size: 12px !important;
    line-height: 20px;
}

/* 狀態顏色 */
.status-pending { 
    color: #f0ad4e; 
}

.status-approved { 
    color: #5cb85c; 
}

.status-rejected { 
    color: #d9534f; 
}

/* 放按鈕的那個div的樣式，不是按鈕本身 */
.action-buttons {
    display: flex;
    gap: 2px;
    justify-content:flex-start;
    align-items: center;
    /*min-width: 140px;*/
}

/*div內的button 及 a 等元素共用的*/

.action-buttons button,
.action-buttons a /*為何同樣共用的editbale-records-table,前端呈現 button.a的樣式，後台呈現 button.button-primary樣式？ */,
.cancel-leave-btn {
    /*flex: 0 0 auto;*/
    white-space: nowrap;
    min-width: 50px;
    padding: 2px 2px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
}


/* 按鈕元素本身單獨用的class */
.action-buttons .button,
.action-buttons .button-primary {
    display: flex;
    line-height: 20px; 
    align-items: center; /* 垂直居中 */
    justify-content: center; /*水平居中 */
}


.cancel-leave-btn {
    background-color: #d9534f;
    color: white;
    border: none;
    border-radius: 3px;
    /*height: 50px;*/
    line-height: 30px;
    cursor: pointer;
}

.cancel-leave-btn:hover {
    background-color: #c9302c;
}


/*欄位調整區域*/

/* 調整 ID 欄位寬度 */
.leave-records-table th:first-child,
.leave-records-table td:first-child {
    width: 30px !important;
    min-width: 30px;
    max-width: 30px;
}

/* 調整 order_id 欄位寬度 */
.leave-records-table th:nth-child(2),
.leave-records-table td:nth-child(2) {
    width: 80px !important;
    min-width: 80px;
    max-width: 80px;
}

/* 調整 order_source 欄位大小*/
.leave-records-table th:nth-child(3),
.leave-records-table td:nth-child(3) select {
    width: 80px !important;
    min-width: 80px;
    max-width: 80px;
} 

/* 調整 order_date 欄位寬度 */
.leave-records-table th:nth-child(4),
.leave-records-table td:nth-child(4) {
    width: 150px !important;
    min-width: 150px;
    max-width: 150px;
}


/* 調整操作按鈕欄位寬度和排列 */
.leave-records-tablet th:last-child,
.leave-records-table td:last-child {
    width: 180px !important;
    min-width: 180px;
    white-space: nowrap;
}


/* 確保其他欄位平均分配剩餘空間 */
.leave-records-table th:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:last-child),
.leave-records-table td:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:last-child) {
    width: auto !important;
}