:root {
  --table-bg-light: #f8f9fa;
  --table-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --table-shadow-sticky: 2px 0 4px rgba(0, 0, 0, 0.1);
  --table-col1-width: 120px;
  --table-col2-width: 150px;
  --table-col3-width: 110px;
  --table-col4-width: 90px;
  --table-col2-left: var(--table-col1-width);
  --table-col3-left: calc(var(--table-col1-width) + var(--table-col2-width));
  --table-col4-left: calc(var(--table-col1-width) + var(--table-col2-width) + var(--table-col3-width));
  --table-max-height: 70vh;
  --z-header: 10;
  --z-sticky-col: 5;
  --z-sticky-header: 15;
}

/* 固定表頭 */
.table thead th {
  position: sticky;
  top: 0;
  background-color: var(--table-bg-light);
  z-index: var(--z-header);
  box-shadow: var(--table-shadow);
}

/* 固定前四欄 - 一般行 */
.table tbody tr:not(.table-info):not(.table-dark):not(.project-type-row) td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: var(--z-sticky-col);
  box-shadow: var(--table-shadow-sticky);
  min-width: var(--table-col1-width);
}

.table tbody tr:not(.table-info):not(.table-dark):not(.project-type-row) td:nth-child(2) {
  position: sticky;
  left: var(--table-col2-left);
  z-index: var(--z-sticky-col);
  box-shadow: var(--table-shadow-sticky);
  min-width: var(--table-col2-width);
}

.table tbody tr:not(.table-info):not(.table-dark):not(.project-type-row) td:nth-child(3) {
  position: sticky;
  left: var(--table-col3-left);
  z-index: var(--z-sticky-col);
  box-shadow: var(--table-shadow-sticky);
  min-width: var(--table-col3-width);
}

.table tbody tr:not(.table-info):not(.table-dark):not(.project-type-row) td:nth-child(4) {
  position: sticky;
  left: var(--table-col4-left);
  z-index: var(--z-sticky-col);
  box-shadow: var(--table-shadow-sticky);
  min-width: var(--table-col4-width);
}

/* 固定前四欄 - 表頭 */
.table th:nth-child(1),
.table th:nth-child(2),
.table th:nth-child(3),
.table th:nth-child(4) {
  position: sticky;
  z-index: var(--z-sticky-col);
  box-shadow: var(--table-shadow-sticky);
}

.table th:nth-child(1) {
  left: 0;
  min-width: var(--table-col1-width);
}

.table th:nth-child(2) {
  left: var(--table-col2-left);
  min-width: var(--table-col2-width);
}

.table th:nth-child(3) {
  left: var(--table-col3-left);
  min-width: var(--table-col3-width);
}

.table th:nth-child(4) {
  left: var(--table-col4-left);
  min-width: var(--table-col4-width);
}

/* 表頭和固定列的交叉點需要更高的 z-index */
.table thead th:nth-child(1),
.table thead th:nth-child(2),
.table thead th:nth-child(3),
.table thead th:nth-child(4) {
  z-index: var(--z-sticky-header);
  background-color: var(--table-bg-light);
}

/* 確保表格容器可以滾動 */
.table-responsive {
  max-height: var(--table-max-height);
  overflow-y: auto;
  overflow-x: auto;
}

/* 專案選擇 Modal 表格樣式 */
.project-modal-table {
  table-layout: fixed;
  width: 100%;
  min-width: 800px;
}

.project-modal-table .col-client {
  width: 15%;
}

.project-modal-table .col-project {
  width: 30%;
}

.project-modal-table .col-status {
  width: 12%;
  text-align: center;
}

.project-modal-table .col-mandays {
  width: 12%;
  text-align: center;
}

.project-modal-table .col-deadline {
  width: 15%;
  text-align: center;
}

.project-modal-table .col-action {
  width: 16%;
  text-align: center;
}

/* 響應式調整 */
@media (max-width: 768px) {
  :root {
    --table-col1-width: 100px;
    --table-col2-width: 120px;
    --table-col3-width: 90px;
    --table-col4-width: 80px;
    --table-max-height: 60vh;
  }
}