:root{--bg:#0b0c10;--panel:#14161a;--muted:#8a94a6;--text:#e8edf3;--accent:#ff8a00;--accent-2:#ffd699;--line:#2b2f36;--ok:#19c37d}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;background:linear-gradient(180deg,#0b0c10 0%,#12151b 100%);color:var(--text)}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(13,14,18,.85);backdrop-filter:saturate(140%) blur(8px);z-index:5}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:8px;background:radial-gradient(120% 120% at 0% 0%,#ffb457 0%,#ff8a00 50%,#ff5e00 100%);color:#1b1200;font-weight:900}
.brand h1{font-size:18px;margin:0}
.header-actions{display:flex;gap:8px}
.btn{background:#20242c;border:1px solid var(--line);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer}
.btn:hover{border-color:#3a3f48}
.btn-primary{background:linear-gradient(90deg,#ff8a00,#ff5e00);border-color:#ff8a00;color:#1b1200;font-weight:700}
.btn-ghost{background:transparent}

.layout{display:grid;grid-template-columns:1fr;gap:16px;padding:16px 20px}
.summary-top{padding:10px 20px}
.summary-top .card{position:sticky;top:62px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.collapsed-bar{display:none;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:#0f1116;border:1px solid var(--line);border-radius:10px;margin-top:8px}
.collapsed .details{display:none}
.collapsed .collapsed-bar{display:flex}
.controls{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px}
.control-row{display:flex;flex-direction:column;gap:6px}
input[type=search]{width:460px;max-width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0f1116;color:var(--text);outline:none}
input[type=number]{width:86px;padding:8px;border-radius:8px;border:1px solid var(--line);background:#0f1116;color:var(--text)}

.tabs{display:flex;gap:8px;margin-left:auto}
.tab{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#0f1116;color:var(--text);cursor:pointer}
.tab.active{border-color:#ff8a00;color:#ffcc99}

.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#0f1116 0%,#0e1014 100%)}
table.sheet{width:100%;border-collapse:separate;border-spacing:0}
table.sheet.hidden{display:none}
table.sheet thead th{position:sticky;top:0;background:#141821;color:#e6ecf3;font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
table.sheet tbody td{padding:8px 12px;border-bottom:1px dashed #1f232b}
table.sheet tbody tr:hover{background:#12151a}
table .num{text-align:right}
.muted{color:var(--muted)}

/* 桌機：隱藏獨立的金額小計欄（第8欄），已整合在「PV/金額」 */
table.sheet thead th:nth-child(8),
table.sheet tbody td:nth-child(8){display:none}

.summary{position:sticky;top:76px}
.card{border:1px solid var(--line);border-radius:14px;padding:14px;background:linear-gradient(180deg,#111319,#0d0f14);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card h3{margin:4px 0 8px 0}
.card .row{display:flex;align-items:center;justify-content:space-between;margin:6px 0}
.card .row.total{font-size:18px;color:#fff}
.card .row.total.payable strong{color:var(--accent)}
.card .row.total strong{color:var(--accent)}
.card .hint{font-size:12px;color:var(--muted)}

/* 會員資訊區域樣式 */
.member-info{margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.member-row{display:flex;align-items:center;justify-content:space-between;margin:6px 0;gap:12px}
.member-row label{font-size:13px;color:var(--text);font-weight:500;min-width:60px}
.member-row input{flex:1;padding:6px 8px;border-radius:6px;border:1px solid var(--line);background:#0e1014;color:var(--text);font-size:12px}
.member-row input:focus{outline:none;border-color:var(--accent)}
.member-row input::placeholder{color:var(--muted)}

/* 購物車圖示和數量提示 */
.cart-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}
.cart-badge{position:absolute;top:-6px;right:-6px;display:flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;background:#ff4757;color:#fff;font-size:11px;font-weight:700;border-radius:9px;border:2px solid #14161a}

/* 摺疊狀態下的應付金額樣式 */
.collapsed-bar strong{color:var(--accent);font-weight:700}

/* 手動輸入區域樣式 */
.manual-input-section{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.manual-input-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.manual-input-header h5{margin:0;font-size:13px;color:var(--text)}
.btn-small{padding:4px 8px;font-size:11px}
.manual-inputs{display:flex;flex-direction:column;gap:8px}
.manual-input-row{display:grid;grid-template-columns:1fr 60px 80px 80px 60px auto;gap:6px;align-items:center;padding:8px;background:#0f1116;border:1px solid var(--line);border-radius:8px}
.manual-input-row input{width:100%;padding:6px 8px;border-radius:6px;border:1px solid var(--line);background:#0e1014;color:var(--text);font-size:12px}
.manual-input-row input:focus{outline:none;border-color:var(--accent)}
.manual-input-row input[readonly]{background:#1a1d24;color:var(--muted);cursor:not-allowed}
.manual-input-row .remove-btn{width:24px;height:24px;border-radius:4px;border:1px solid var(--line);background:#20242c;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px}
.manual-input-row .remove-btn:hover{background:#2a2f38;color:#fff}
.manual-input-row .label{font-size:11px;color:var(--muted);text-align:center}

/* 手機版手動輸入樣式 */
@media (max-width: 720px){
  .manual-input-row{display:flex;flex-direction:column;gap:8px;padding:10px;background:#0f1116;border:1px solid var(--line);border-radius:8px}
  
  .manual-input-row .manual-name{width:100%}
  .manual-input-row .remove-btn{align-self:flex-end;margin-top:-8px;margin-right:-8px}
  
  .manual-input-row .manual-pv,
  .manual-input-row .manual-price,
  .manual-input-row .manual-qty{width:100%}
  
  .manual-input-row .label{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
  
  .manual-input-row .manual-pv::before{content:""}
  .manual-input-row .manual-price::before{content:""}
  .manual-input-row .manual-qty::before{content:""}
}

/* 手動標籤樣式 */
.manual-tag{font-size:10px;color:var(--accent);background:rgba(255,138,0,0.1);padding:1px 4px;border-radius:3px;margin-left:4px}
.ordered-list{border-top:1px dashed var(--line);padding-top:8px;margin-top:6px;font-size:13px;max-height:260px;overflow:auto}
.ordered-list .line{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed #1e222a}
.ordered-list .line:last-child{border-bottom:0}
.ordered-list .name{color:#e8edf3}
.ordered-list .meta{color:var(--muted)}

/* 手機版已訂購品項樣式 */
@media (max-width: 720px){
  .ordered-list .line{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:8px 0;
    border-bottom:1px dashed #1e222a;
  }
  
  .ordered-list .left{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
    overflow:hidden;
  }
  
  .ordered-list .name{
    flex:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
  }
  
  .ordered-list .meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    white-space:nowrap;
    overflow:hidden;
  }
  
  .ordered-list .meta > *{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

.app-footer{padding:16px 20px;border-top:1px solid var(--line);color:var(--muted)}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .summary{position:static}
  .app-header{flex-wrap:wrap;gap:10px}
  .brand h1{font-size:16px}
  .header-actions{display:flex !important;flex-wrap:wrap;gap:8px}
  .controls{flex-direction:column;align-items:stretch}
  input[type=search]{width:100%}
  .tabs{overflow:auto}
}

/* 手機：每個品項單行顯示（僅顯示：編號、名稱、數量、金額小計） */
@media (max-width: 720px){
  /* 手機：每個品項兩行
     行1：名稱（滿寬）
     行2：PV / 數量 / 金額小計
  */
  table.sheet thead{display:none}
  table.sheet tbody tr{display:grid;grid-template-columns:1fr 80px;grid-template-areas:
    "name qty"
    "price pv"
    "subpv subamt";gap:6px;padding:10px;border-bottom:1px solid var(--line);min-width:0}

  /* 隱藏不需要的欄位：編號、規格、單價、PV小計、備註 */
  table.sheet tbody td:nth-child(1),
  table.sheet tbody td:nth-child(3),
  table.sheet tbody td:nth-child(9){display:none}

  table.sheet tbody td:nth-child(2){grid-area:name;padding:0;display:flex;justify-content:space-between;align-items:center;min-height:40px;overflow:hidden}
  .name-cell{display:block;flex:1;min-width:0}
  .name-cell .name-text{display:block;font-weight:600;line-height:1.2;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* 單價 */
  table.sheet tbody td:nth-child(5){grid-area:price;align-self:center;color:var(--muted);text-align:right;display:flex;justify-content:flex-end;align-items:center}
  table.sheet tbody td:nth-child(5)::before{content:"單價 ";color:var(--muted);margin-right:4px}

  /* PV 獨立欄位 */
  table.sheet tbody td:nth-child(4){grid-area:pv;align-self:center;color:var(--muted);text-align:right;display:flex;justify-content:flex-end;align-items:center}
  table.sheet tbody td:nth-child(4)::before{content:"PV ";color:var(--muted);margin-right:4px}

  table.sheet tbody td:nth-child(6){grid-area:qty;text-align:right;align-self:center;width:80px;min-width:80px}
  table.sheet tbody td:nth-child(6) input[type=number]{width:100%;padding:6px 8px}
  table.sheet tbody td:nth-child(6) select{text-align:right;width:100%;min-width:80px}

  /* 第三行：小計（顯示 PV/金額），置右，與數量欄同右緣 */
  table.sheet tbody td:nth-child(7){grid-area:subamt;display:flex;justify-content:flex-end;align-items:center;gap:6px;text-align:right;white-space:nowrap}
  table.sheet tbody td:nth-child(7)::before{content:"PV/金額";color:var(--muted)}
  table.sheet tbody td:nth-child(8){grid-area:subamt;text-align:right;display:none}
}