/* 全域一致性（避免 FF/Chrome 細節差） */
*, *::before, *::after { box-sizing: border-box; }
:root { --gap: .75rem; --brand: #0d6efd; --border: rgba(0,0,0,.12); --table-fz:12px;  --table-infofont:24px;}
/* 上一行已涵蓋 ::before/::after，移除重複設定線 */

/* 表格外層：限制寬高、提供卷軸；在 1080 高度下不溢出 */
.table-wrap {
  max-width: 100vw;                 /* 不超出螢幕寬 */
  max-height: calc(100vh - 220px);  /* 視需要調整 -220 的頁頭/動作區高度 */
  overflow: auto;                    /* 同時支援水平與垂直卷軸 */
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}



/* 表格本體：固定布局，寬度至少等於容器 */
/*要彈性，但最多到 1900px（容器夠寬時別再放大）*/
.orderTable {
    width: 100%;
    max-width: 1900px;
    min-width: 1380px;
    /*min-width: 1200px;  避免被壓得太窄；有很多尺碼時可再加大 */
    border-collapse: separate;   /* 讓 sticky 欄位不被裁切 */
    border-spacing: 0;
    border: 0.5px solid #cfd6e4;
    table-layout: fixed;         /* 讓 width 設定生效 */
    font-size: var(--table-fz);
    line-height: 1.4; /*「行高」——控制一行文字「上下間距」的 CSS 屬性*/
}

/* 也可用相鄰選擇器只針對相鄰表格加距離（擇一保留即可） */
/* .orderTable + .orderTable { margin-top: 24px; } */



/* 表頭固定在頂端（合併成一處，保留較高的 z-index） */
.orderTable thead th {
  background: #f5f7fa;
  position: sticky;
  top: 0;
  z-index: 3;  /* sticky header 蓋過內容 */
}

.orderTable td{
    border: 0.5px solid #cfd6e4;
}

/* 數量輸入欄：寬度以字元數計（6–8 字元） */
/* 共同：更好看的數字輸入框 */
.orderTable input[type="number"] {
  width: 8ch;                 /* 可改 6–10ch */
  max-width: 10ch;
  text-align: right;
  box-sizing: border-box;
  padding: .35rem .4rem; /*上下 左右*/
  border: 0 solid #cfd6e4;
  border-radius: 8px;
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
  font-variant-numeric: tabular-nums;
}

/* hover / focus 狀態 */
.orderTable input[type="number"]:hover {
  border-color: #aab4c6;
}
.orderTable input[type="number"]:focus {
  border-color: #5b8def;
  box-shadow: 0 0 0 3px rgba(91,141,239,.18);
}

/* 無效值（超出 min/max） */
.orderTable input[type="number"]:out-of-range {
  border-color: #d93025;
  background: #ffe8e6;
}

/* 依數值門檻套色（由 JS 加上這些 class） */
.orderTable input[type="number"].qty-low {
  background: #f6ffed;              /* 淺綠 */
  border-color: #b7eb8f;
}
.orderTable input[type="number"].qty-mid {
  background: #fff7e6;              /* 淺橙 */
  border-color: #ffd591;
}
.orderTable input[type="number"].qty-high {
  background: #fff1f0;              /* 淺紅 */
  border-color: #ffa39e;
}

/*（可選）移除數字輸入的上下箭頭，讓欄位更精簡
.orderTable input[type="number"]::-webkit-outer-spin-button,
.orderTable input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.orderTable input[type="number"] {
  -moz-appearance: textfield;
}
*/

/* 加粗關鍵欄位（整合於單一處） */
.qty-subtotal, .amount-subtotal, .unit-price {
  font-weight: 600;
  text-align: center;
}

/* 左側五欄：序號、產品代號、零售價、產品名稱、上市月 */
.orderTable th:nth-child(1),
.orderTable td:nth-child(1) { width: 6ch; text-align: left; }   /* 序號 6ch 代表6個0的宽度*/
.orderTable th:nth-child(2),
.orderTable td:nth-child(2) { width: 12ch; }   /* 產品代號 */
.orderTable th:nth-child(3),
.orderTable td:nth-child(3) { width: 20ch; text-align: left; } /* 產品名稱 */
.orderTable th:nth-child(4),
.orderTable td:nth-child(4) { width: 6ch; text-align: center; }   /* 零售價 */
.orderTable th:nth-child(5),
.orderTable td:nth-child(5) { width: 6ch;  text-align: center;}   /* 上市月 */


/* 右側三欄（固定為該列最後三欄）：數量小計、單價、金額小計 */
.orderTable th:nth-last-child(3),
.orderTable td:nth-last-child(3) { width: 8ch; text-align: right; } /* 數量小計 */
.orderTable th:nth-last-child(2),
.orderTable td:nth-last-child(2) { width: 6ch; text-align: right; } /* 單價 */
.orderTable th:nth-last-child(1),
.orderTable td:nth-last-child(1) { width: 8ch; text-align: right; } /* 金額小計 */



/* 產品名稱過長時加省略號（避免撐寬） */
.orderTable td:nth-child(4) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 版面其他元件 */
.content { max-width: 1900px; margin: 16px auto; padding: 0  2px 40px; }


.empty { padding: 24px; color: #666; }


/* 表格本體：固定布局，寬度至少等於容器 */
/*要彈性，但最多到 1900px（容器夠寬時別再放大）*/
.infoOrder {
    width: 100%;
    max-width: 1900px;
    min-width: 1380px;
    /*min-width: 1200px;  避免被壓得太窄；有很多尺碼時可再加大 */
    border-collapse: separate;   /* 讓 sticky 欄位不被裁切 */
    border-spacing: 0;
    border: 0.5px solid #cfd6e4;
    table-layout: fixed;         /* 讓 width 設定生效 */
    font-size: var(--table-infofont);
    line-height: 1.4; /*「行高」——控制一行文字「上下間距」的 CSS 屬性*/
    font-weight: 600;

}

/* 也可用相鄰選擇器只針對相鄰表格加距離（擇一保留即可） */
/* .infoOrder + .infoOrder { margin-top: 24px; } */



/* 表頭固定在頂端（合併成一處，保留較高的 z-index） */
.infoOrder thead th {
    background: #f5f7fa;
    position: sticky;
    top: 0;
    z-index: 3;  /* sticky header 蓋過內容 */
    text-align: center;
    border: 0.5px solid #cfd6e4;

}

.infoOrder td{
    border: 0.5px solid #cfd6e4;
    text-align: center;
}
/* JS版 autocomplete */