/* 1. 基礎容器與滑動設定 */
.table-wrapper {
    /*            width: 100%;*/
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    /* 重要：移除可能導致 sticky 失效的 overflow 限制 */
    overflow-y: visible;
}

.table-wrapper table {
    width: 100%;
    /*                min-width: 800px;*/
    table-layout: auto;
    white-space: nowrap;
    border-collapse: separate;
    border-spacing: 0;
}

/* 2. 處理邊框衝突 (Sticky 模式下必須使用 separate) */
.table-wrapper th,
.table-wrapper td {
    border-bottom: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    padding: 8px;
}

.table-wrapper tr th:first-child,
.table-wrapper tr td:first-child {
    border-left: 1px solid #dee2e6;
}

/* 3. 固定標頭 (Sticky Header) 邏輯 */
.sticky-header {
    position: sticky;
    z-index: 100; /* 確保高於內容 */
    background-color: #212529; /* 配合 table-dark 顏色 */
    color: white;
}

/* 第一層：查詢時間列 */
.header-row-1 {
    top: 0;
    z-index: 102; /* 最高層級 */
}

/* 第二層：欄位名稱列 */
/* 56px 是根據文字高度預估的，如果重疊請微調此數值 */
.header-row-2 {
    top: 56px;
    z-index: 101;
}

/* 4. 固定左側欄位 (Sticky Column) 邏輯 */
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 10;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

/* 當標頭與左側欄位交會時 (左上角那格)，需要最高等級的 z-index */
thead .sticky-col {
    z-index: 110 !important;
}

.first-col {
    min-width: 70px;
}

/* 5. 其他樣式 */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: inline-block;
    letter-spacing: 2px;
    white-space: nowrap;
    vertical-align: middle;
}

.bg-info {
    background-color: rgb(25, 127, 147) !important;
    color: #ffffff !important;
}

.bg-success {
    background-color: #8daf66 !important;
}

/* 顏色標籤樣式 (維持不變) */
.bg-webOrder {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
}

.bg-isClose {
    background-color: #f8d7da !important;
    color: #dc3545 !important;
}

.bg-inUse {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

.bg-LargeCoffin {
    background-color: #fff3cd !important;
    border: 1px solid #ffeeba;
}

.loading-overlay-local {
    display: flex;
    justify-content: center;
    padding: 20px;
}

/* 修正 Bootstrap table-striped 在 sticky 模式下的背景問題 */
.table-striped tbody tr:nth-of-type(odd) {
    --bs-table-accent-bg: rgba(0, 0, 0, 0.05);
}

/* 確保固定欄位在橫向捲動時有背景色，否則會變透明看到後面的字 */
tr td.sticky-col {
    background-color: white !important;
}

tr:nth-of-type(odd) td.sticky-col {
    background-color: #f9f9f9 !important;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}


.status-item {
    display: inline-flex; /* 讓容器寬度隨內容伸縮，且內部分子元素對齊 */
    align-items: center; /* 垂直置中 */
    margin-right: 15px; /* 多個標籤並行時的間距 */
    font-family: sans-serif;
}

.color-box {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    margin-right: 8px;
    border-color: black;
    border: 1px solid;
}

/* 線上預訂 */
.Online {
    background-color: #0f5132;
}

/* 大型棺木 */
.largeCoffin {
    background-color: #fff3cd;
}

/* 關爐 */
.Close {
    background-color: #f8d7da;
}