/* =========================================================
   0) CSS 變數（品牌/尺寸/色彩）
   --------------------------------------------------------- */
:root{
  --bg:#f9fafb;               /* 頁面背景 */
  --bg2:#ffffff;              /* 卡片/表格底色 */
  --fg:#1a1a1a;               /* 主要文字色 */
  --muted:#6b7280;            /* 次要文字色 */
  --line:#d1d5db;             /* 分隔線 */
  --accent:#069393;           /* 品牌主色 */
  --accent-press:#037c7e;     /* 主色按下狀態 */
  --radius:14px;              /* 一致的圓角 */
  --tap:48px;                 /* 觸控友善高度 */
  --container:1200px;         /* 版心寬度 */
}

/* =========================================================
   1) 基礎設定（Reset / Typography / Link）
   --------------------------------------------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.65;
}

a{
  color:var(--accent);
  text-decoration:none;
}
a:hover{ text-decoration:underline; }

/* 共用容器（版心） */
.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:16px clamp(12px,3vw,24px);
}

/* =========================================================
   2) 頂部區（標題/控制列）
   - 將 h1 置中並避免中文亂斷行
   --------------------------------------------------------- */
.top{
  display:block;           /* 用 block 容納標題區 */
  margin-bottom:12px;
}
.top h1{
  margin:0 0 10px;
  font-size:clamp(18px,2.8vw,22px);
  color:var(--accent);
  text-align:center;
  word-break:keep-all;     /* 只在 <wbr> 處換行，避免中文字中斷 */
}

/* 控制列（左：搜尋/篩選；中：容量；右：重新整理） */
.controls{
  display:grid;
  grid-template-columns: 1fr 1fr minmax(120px, 180px);
  gap:16px;
  width:100%;
  align-items:stretch;     /* 讓右側按鈕高度與群組齊 */
}

/* 搜尋輸入框 */
.controls input[type="search"]{
  flex:1;
  min-height:var(--tap);
  padding:12px 14px;
  font-size:16px;
  color:var(--fg);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.controls input::placeholder{ color:#9ca3af; }

/* 按鈕（主樣式 / 次樣式） */
.btn{
  min-height:var(--tap);
  padding:12px 14px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  border-radius:var(--radius);
  cursor:pointer;
  transition:opacity .15s ease, transform .06s ease, background .15s ease;
}
.btn:active{ transform:scale(0.98); background:var(--accent-press); }
.btn.ghost{ background:transparent; color:var(--fg); border-color:var(--line); }

/* 提示區（如權限/錯誤/公告） */
.notice{
  padding:10px 12px;
  margin-bottom:10px;
  color:#92400e;
  background:#fffbe6;
  border:1px solid #fcd34d;
  border-radius:var(--radius);
}

/* =========================================================
   3) 卡片/面板（Panel）
   --------------------------------------------------------- */
.panel{
  overflow:hidden;
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
.panel-head{
  display:flex;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
}

/* 筆數/更新等中繼資訊：預設隱藏，載入後淡入 */
.meta{
  font-size:14px;
  color:var(--muted);
  opacity:0;
  transition:opacity .18s ease;
}
.meta.ready{ opacity:1; }

/* =========================================================
   4) 表格容器（可滾動 / 陰影提示）
   --------------------------------------------------------- */
.table-scroll{
  position:relative;
  max-height:calc(100svh - 240px);  /* 讓表格在視窗內可滾 */
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* 仍保留原本上下陰影（你已有的這段，可留） */
.table-scroll::before,
.table-scroll::after{
  content:"";
  position:absolute; left:0; right:0; height:18px;
  pointer-events:none;
  opacity:0; transition:opacity .18s ease;
  z-index:2;
}
.table-scroll::before{ top:0;    background:linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,0)); }
.table-scroll::after { bottom:0; background:linear-gradient(to top,    rgba(0,0,0,.10), rgba(0,0,0,0)); }
.table-scroll.can-scroll:not(.at-top)::before{ opacity:1; }
.table-scroll.can-scroll:not(.at-bottom)::after{ opacity:1; }

/* ⬅️➡️ 左右箭頭，使用實體元素（JS 動態插入） */
.table-scroll{ position:relative; } /* 重要：讓絕對定位以它為參考 */

.table-scroll .arrow-hint{
  position:absolute; top:0; bottom:0;
  width:28px; display:flex; align-items:center; justify-content:center;
  font-size:16px; color:#fff; pointer-events:none; z-index:3;
  text-shadow:0 0 4px rgba(0,0,0,.5);
  opacity:0; transition:opacity .18s ease;
}
.table-scroll .arrow-left{
  left:0;
  background:linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0));
}
.table-scroll .arrow-right{
  right:0;
  background:linear-gradient(to left, rgba(0,0,0,.08), rgba(0,0,0,0));
}

/* =========================================================
   5) 表格（Table）與欄位語意
   - 保留 data-* 選擇器，避免改動 HTML
   --------------------------------------------------------- */
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

thead th,
tbody td{
  padding:12px;
  text-align:center;        /* 內文水平置中 */
  vertical-align:middle;    /* 內文垂直置中 */
  border-bottom:1px dashed var(--line);
  white-space: nowrap;
  font-weight: bold;
}

thead th .arrow{
  margin-left:6px;
  font-size:12px;
  opacity:.7;
}

tbody tr:hover{ background:#f3f4f6; }
tr.zero td{ 
  opacity:.7; 
  font-weight: lighter;
}     /* 0 庫存行淡化 */

/* 縮圖（推薦用） */
.thumb{
  width:60px; height:60px;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}


/* 指定欄位「推薦 / 數量」不換行且置中對齊 */
th[data-key="推薦"], td[data-label="推薦"],
th[data-key="數量"], td[data-label="數量"]{
  text-align:center;
}
th[data-key="推薦"], td[data-label="推薦"]{ 
  text-align: center; 
}
th[data-key="數量"], td[data-label="數量"]{ 
  text-align: center;  
}
/* 為每個欄位加上合理的最小寬度 */
th[data-key="推薦"], td[data-label="推薦"] { min-width: 50px; }
th[data-key="型號"], td[data-label="型號"] { min-width: 80px; }
th[data-key="規格"], td[data-label="規格"] { min-width: 80px; }
th[data-key="容量"], td[data-label="容量"] { min-width: 80px; }
th[data-key="數量"], td[data-label="數量"] { min-width: 70px; }

/* 推薦欄位：圖片/文字置中 */
td[data-label="推薦"],
th[data-key="推薦"] {
  text-align: center;          /* 水平置中 */
  vertical-align: middle;      /* 垂直置中 */
}

@media (max-width:640px){
  td[data-label="推薦"]{ justify-content:flex-end; }
  .thumb{ 
    width:40px; 
    height:40px;
    text-align: center;

  }   /* 手機縮小縮圖 */
}

/* 缺貨標章 */
.badge{
  display:inline-block;
  padding:2px 8px;
  font-size:12px;
  color:#b91c1c;
  background:#fee2e2;
  border:1px solid #dc2626;
  border-radius:999px;
  margin-left:0;
}

/* 底部捲動小提示（可用 JS 控制顯示） */
.scroll-hint{
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  padding:4px 8px;
  font-size:12px; line-height:1;
  color:#fff; background:rgba(0,0,0,.38);
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:3;
}
.table-scroll.show-hint .scroll-hint{ opacity:1; }

/* 型號作為「按鈕連結」 */
.model-link{
  background:transparent; border:0; padding:0;
  color:var(--accent);
  text-decoration:underline;
  font:inherit;
  cursor:pointer;
}

/* =========================================================
   6) 篩選（Filters / Chips）
   - 桌機佔前兩欄；載入完成後以 .ready 顯示與淡入
   --------------------------------------------------------- */
.filters{
  display:none;                /* 載入前先隱藏 */
  grid-column:1 / span 2;      /* 置於 controls 左兩欄 */
  width:100%;
  max-width:100%;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease;

  /* 內部均分「規格 / 容量」 */
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:16px;
  row-gap:12px;
}
.filters.ready{
  opacity:1;
  transform:translateY(0);
}

/* 單一篩選群組卡片 */
.filter-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}

.filter-title{
  flex:0 0 auto;
  padding-top:2px;
  font-size:13px;
  color:var(--muted);
}

/* 右側「重新整理」按鈕，跟群組等高 */
#refreshBtn{
  grid-column:3;                /* 放第三欄（桌機） */
  align-self:stretch;
  display:grid; place-items:center;
  padding:0 12px;
  font-size:16px; line-height:1.2;
  border-radius:16px;
  word-break:keep-all;
}

/* Chip 容器/按鈕 */
.filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  flex:1 1 auto;
}

.filter-chip{
  position:relative;
  padding:8px 14px 8px 30px;          /* 左側留位給圓點/勾勾 */
  font-size:14px;
  color:var(--fg);
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  outline:none;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.filter-chip:hover{
  border-color:#bcdfe0;                /* 主色的淡邊框 */
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.filter-chip:active{ transform:scale(0.98); }

/* 未選中：空心圓點 */
.filter-chip::before{
  content:"";
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%;
  background:transparent;
  border:2px solid var(--accent);
  transition:background .15s ease, border-color .15s ease;
}

/* 已選中：主色底 + 白勾 */
.filter-chip.active{
  color:#fff;
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 3px 10px rgba(0,0,0,.10);
}
.filter-chip.active::before{
  background:#fff;
  border-color:#fff;
}
.filter-chip.active::after{
  content:"✓";
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  font-size:12px; line-height:1;
  color:var(--accent);
}

/* 無障礙鍵盤外框 */
.filter-chip:focus-visible{
  box-shadow:0 0 0 3px rgba(6,147,147,.25);
}

/* =========================================================
   7) 燈箱（Lightbox）
   --------------------------------------------------------- */
.lightbox{
  position:fixed; inset:0;
  display:none;
  z-index:1000;
}
.lightbox.open{ display:block; }

.lightbox__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);
}
.lightbox__dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  max-width:min(92vw, 720px);
  background:#fff; color:#111;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.lightbox__img{
  display:block;
  max-width:min(92vw, 720px);
  max-height:70vh;
  object-fit:contain;
  background:#f3f4f6;
  border-radius:14px 14px 0 0;
}
.lightbox__caption{
  padding:8px 12px 12px;
  font-size:13px;
  color:#4b5563;
  text-align:center;
}
.lightbox__close{
  position:absolute; right:8px; top:8px;
  width:36px; height:36px;
  display:grid; place-items:center;
  font-size:16px;
  background:#fff; color:#111;
  border:1px solid #e5e7eb;
  border-radius:50%;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  cursor:pointer;
}

/* =========================================================
   8) 浮動動作按鈕（手機）
   --------------------------------------------------------- */
.fab{
  position:fixed;
  right:clamp(12px,3vw,20px);
  bottom:clamp(16px,4vw,24px);
  width:64px; height:64px;
  display:grid; place-items:center;
  font-size:26px;
  color:#fff;
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:50%;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  cursor:pointer;
  z-index:10;
}
.fab:active{ background:var(--accent-press); transform:translateY(1px); }

/* 桌機隱藏 FAB */
@media (min-width:900px){
  .fab{ display:none; }
}

/* =========================================================
   9) RWD（<= 900px：直排、按鈕滿寬）
   --------------------------------------------------------- */
@media (max-width:900px){
  .controls{
    grid-template-columns:1fr;  /* 單欄直排 */
    gap:12px;
  }

  /* 手機上整頁滾動，不需要表格內提示 */
  .scroll-hint{ display:none; }

  /* 篩選改成上下排列 */
  .filters{
    grid-column:auto;
    grid-template-columns:1fr;
  }

  /* 右側「重新整理」在手機隱藏（交由 FAB 或其他互動觸發） */
  #refreshBtn{
    grid-column:auto;
    width:100%;
    align-self:auto;
    padding:12px 14px;
    border-radius:var(--radius);
    display:none !important;
  }

  /* 表格改為隨頁滾動 */
  .table-scroll{
    max-height:none;
    overflow:auto;
  }
}

/* =========================================================
   10) 版尾小字（資料來源/免責等）
   --------------------------------------------------------- */
.footer-note{
  margin:16px auto 24px;
  max-width:var(--container);
  font-size:10px;
  color:#9ca3af;
  text-align:right;
  line-height:1.3;
}